From 449d7a2975ddd8463e497b99944f249d7ff31beb Mon Sep 17 00:00:00 2001
From: vikas-cldcvr <vikas@cldcvr.com>
Date: Mon, 14 Aug 2023 19:50:17 +0530
Subject: [PATCH] FLOW-865 f-icon z-index issue fixed

---
 .../flow-code-editor/custom-elements.json     |   48 +-
 packages/flow-core/CHANGELOG.md               |    7 +
 packages/flow-core/custom-elements.json       | 5802 ++++++++---------
 packages/flow-core/package.json               |    2 +-
 .../flow-core/src/components/f-icon/f-icon.ts |    7 +-
 .../src/components/f-popover/f-popover.ts     |    4 +-
 packages/flow-table/custom-elements.json      |  408 +-
 7 files changed, 3146 insertions(+), 3132 deletions(-)

diff --git a/packages/flow-code-editor/custom-elements.json b/packages/flow-code-editor/custom-elements.json
index 4b559aca7..aff84c7f0 100644
--- a/packages/flow-code-editor/custom-elements.json
+++ b/packages/flow-code-editor/custom-elements.json
@@ -55,6 +55,30 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/utils/lang-comments-map.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "languageCommentsMap",
+          "type": {
+            "text": "Map<string, CommentItem>"
+          },
+          "default": "new Map([\n\t// JavaScript\n\t[\"javascript\", commonItem],\n\n\t// TypeScript\n\t[\"typescript\", commonItem],\n\n\t// Python\n\t[\n\t\t\"python\",\n\t\t{\n\t\t\tsingleLine: \"#\",\n\t\t\tmultiLine: { start: \"'''\", end: \"'''\" }\n\t\t}\n\t],\n\n\t// Java\n\t[\"java\", commonItem],\n\n\t// C++\n\t[\"cpp\", commonItem],\n\n\t// C#\n\t[\"csharp\", commonItem],\n\n\t// PHP\n\t[\"php\", commonItem],\n\n\t// Ruby\n\t[\n\t\t\"ruby\",\n\t\t{\n\t\t\tsingleLine: \"#\",\n\t\t\tmultiLine: { start: \"=begin\", end: \"=end\" }\n\t\t}\n\t],\n\n\t// Swift\n\t[\"swift\", commonItem],\n\n\t// Go\n\t[\"go\", commonItem],\n\n\t// Rust\n\t[\"rust\", commonItem],\n\n\t// Kotlin\n\t[\"kotlin\", commonItem],\n\n\t// Dart\n\t[\"dart\", commonItem],\n\n\t// HTML (HTML does not support multi-line comments)\n\t[\n\t\t\"html\",\n\t\t{\n\t\t\tsingleLine: \"<!--\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// CSS (CSS does not support multi-line comments)\n\t[\n\t\t\"css\",\n\t\t{\n\t\t\tsingleLine: \"//\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// SCSS (SCSS does not support multi-line comments)\n\t[\n\t\t\"scss\",\n\t\t{\n\t\t\tsingleLine: \"//\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// Less (Less does not support multi-line comments)\n\t[\n\t\t\"less\",\n\t\t{\n\t\t\tsingleLine: \"//\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// JSON (JSON does not support multi-line comments)\n\t[\n\t\t\"json\",\n\t\t{\n\t\t\tsingleLine: \"//\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// YAML (YAML does not support multi-line comments)\n\t[\n\t\t\"yaml\",\n\t\t{\n\t\t\tsingleLine: \"#\",\n\t\t\tmultiLine: null\n\t\t}\n\t]\n])"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "languageCommentsMap",
+          "declaration": {
+            "name": "languageCommentsMap",
+            "module": "src/utils/lang-comments-map.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/f-code-editor/f-code-editor.ts",
@@ -425,30 +449,6 @@
           }
         }
       ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/utils/lang-comments-map.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "languageCommentsMap",
-          "type": {
-            "text": "Map<string, CommentItem>"
-          },
-          "default": "new Map([\n\t// JavaScript\n\t[\"javascript\", commonItem],\n\n\t// TypeScript\n\t[\"typescript\", commonItem],\n\n\t// Python\n\t[\n\t\t\"python\",\n\t\t{\n\t\t\tsingleLine: \"#\",\n\t\t\tmultiLine: { start: \"'''\", end: \"'''\" }\n\t\t}\n\t],\n\n\t// Java\n\t[\"java\", commonItem],\n\n\t// C++\n\t[\"cpp\", commonItem],\n\n\t// C#\n\t[\"csharp\", commonItem],\n\n\t// PHP\n\t[\"php\", commonItem],\n\n\t// Ruby\n\t[\n\t\t\"ruby\",\n\t\t{\n\t\t\tsingleLine: \"#\",\n\t\t\tmultiLine: { start: \"=begin\", end: \"=end\" }\n\t\t}\n\t],\n\n\t// Swift\n\t[\"swift\", commonItem],\n\n\t// Go\n\t[\"go\", commonItem],\n\n\t// Rust\n\t[\"rust\", commonItem],\n\n\t// Kotlin\n\t[\"kotlin\", commonItem],\n\n\t// Dart\n\t[\"dart\", commonItem],\n\n\t// HTML (HTML does not support multi-line comments)\n\t[\n\t\t\"html\",\n\t\t{\n\t\t\tsingleLine: \"<!--\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// CSS (CSS does not support multi-line comments)\n\t[\n\t\t\"css\",\n\t\t{\n\t\t\tsingleLine: \"//\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// SCSS (SCSS does not support multi-line comments)\n\t[\n\t\t\"scss\",\n\t\t{\n\t\t\tsingleLine: \"//\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// Less (Less does not support multi-line comments)\n\t[\n\t\t\"less\",\n\t\t{\n\t\t\tsingleLine: \"//\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// JSON (JSON does not support multi-line comments)\n\t[\n\t\t\"json\",\n\t\t{\n\t\t\tsingleLine: \"//\",\n\t\t\tmultiLine: null\n\t\t}\n\t],\n\n\t// YAML (YAML does not support multi-line comments)\n\t[\n\t\t\"yaml\",\n\t\t{\n\t\t\tsingleLine: \"#\",\n\t\t\tmultiLine: null\n\t\t}\n\t]\n])"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "languageCommentsMap",
-          "declaration": {
-            "name": "languageCommentsMap",
-            "module": "src/utils/lang-comments-map.ts"
-          }
-        }
-      ]
     }
   ]
 }
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
index 4af97272c..a796c890f 100644
--- a/packages/flow-core/CHANGELOG.md
+++ b/packages/flow-core/CHANGELOG.md
@@ -4,6 +4,13 @@
 
 # Change Log
 
+## [1.20.5] - 2023-08-14
+
+### Bug Fixes
+
+- If `f-popover` used as tooltip then causing z-index issue.
+- The tooltip is not removed from the DOM for the f-icon when the element is removed.
+
 ## [1.20.4] - 2023-08-09
 
 ### Bug Fixes
diff --git a/packages/flow-core/custom-elements.json b/packages/flow-core/custom-elements.json
index e4d83fba7..4c5f1db36 100644
--- a/packages/flow-core/custom-elements.json
+++ b/packages/flow-core/custom-elements.json
@@ -664,173 +664,118 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-button/f-button.ts",
+      "path": "src/components/f-accordion/f-accordion.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FButton",
+          "name": "FAccordion",
           "members": [
             {
               "kind": "field",
-              "name": "fill",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\""
-            },
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "attribute": "label"
-            },
-            {
-              "kind": "field",
-              "name": "category",
-              "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
-              },
-              "default": "\"fill\"",
-              "attribute": "category",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "FButtonState | undefined"
-              },
-              "default": "\"primary\"",
-              "attribute": "state",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"round\" | \"curved\" | \"block\" | undefined"
-              },
-              "default": "\"round\"",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconLeft",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "icon-left",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconRight",
+              "name": "open",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "icon-right",
+              "default": "false",
+              "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "icon",
               "type": {
-                "text": "string | undefined"
+                "text": "\"chevron\" | \"caret\" | \"plus\" | \"none\" | undefined"
               },
-              "attribute": "counter",
+              "default": "\"chevron\"",
+              "attribute": "icon",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "iconSize",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined"
               },
-              "default": "false",
-              "attribute": "loading",
+              "default": "\"small\"",
+              "attribute": "icon-size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "iconPlacement",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"right\" | \"left\" | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
+              "default": "\"right\"",
+              "attribute": "icon-placement",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "labelWrap",
+              "name": "maxHeight",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FAccordionBodyHeightProp | undefined"
               },
-              "default": "false",
-              "attribute": "label-wrap",
+              "attribute": "max-height",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconElement",
+              "name": "fAccordionBody",
               "type": {
-                "text": "FIcon"
-              },
-              "description": "icon element reference"
+                "text": "FDiv | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "counterElement",
+              "name": "fAccordionHeader",
               "type": {
-                "text": "FCounter | undefined"
-              },
-              "description": "counter element reference"
+                "text": "FDiv | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "counterSize",
-              "description": "compute counter size based on button size",
+              "name": "iconName",
+              "description": "identify icon-name from string",
               "readonly": true
             },
             {
-              "kind": "field",
-              "name": "textColor",
-              "description": "compute textColor when custom color of tag is defined.",
-              "readonly": true
+              "kind": "method",
+              "name": "toggleAccordion",
+              "description": "toggle accordion"
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "array"
-              },
-              "readonly": true,
-              "default": "[\"label\"]",
-              "description": "mention required fields here for generating vue types"
+              "kind": "method",
+              "name": "stateChange",
+              "parameters": [
+                {
+                  "name": "mouseState",
+                  "type": {
+                    "text": "\"enter\" | \"leave\""
+                  }
+                }
+              ],
+              "description": "changeState"
             },
             {
               "kind": "method",
-              "name": "validateProperties",
-              "description": "validation for all atrributes"
+              "name": "dispatchToggleEvent",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "boolean"
+                }
+              ],
+              "description": "toggle event dispatch"
             },
             {
               "kind": "method",
-              "name": "applyStyles",
-              "description": "apply inline styles to shadow-dom for custom fill."
+              "name": "handleAccordionBody",
+              "description": "handling max-height of body"
             },
             {
               "kind": "field",
@@ -881,88 +826,43 @@
           ],
           "attributes": [
             {
-              "name": "label",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "label"
-            },
-            {
-              "name": "category",
-              "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
-              },
-              "default": "\"fill\"",
-              "fieldName": "category"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "fieldName": "size"
-            },
-            {
-              "name": "state",
-              "type": {
-                "text": "FButtonState | undefined"
-              },
-              "default": "\"primary\"",
-              "fieldName": "state"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"round\" | \"curved\" | \"block\" | undefined"
-              },
-              "default": "\"round\"",
-              "fieldName": "variant"
-            },
-            {
-              "name": "icon-left",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "iconLeft"
-            },
-            {
-              "name": "icon-right",
+              "name": "open",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "fieldName": "iconRight"
+              "default": "false",
+              "fieldName": "open"
             },
             {
-              "name": "counter",
+              "name": "icon",
               "type": {
-                "text": "string | undefined"
+                "text": "\"chevron\" | \"caret\" | \"plus\" | \"none\" | undefined"
               },
-              "fieldName": "counter"
+              "default": "\"chevron\"",
+              "fieldName": "icon"
             },
             {
-              "name": "loading",
+              "name": "icon-size",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined"
               },
-              "default": "false",
-              "fieldName": "loading"
+              "default": "\"small\"",
+              "fieldName": "iconSize"
             },
             {
-              "name": "disabled",
+              "name": "icon-placement",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"right\" | \"left\" | undefined"
               },
-              "default": "false",
-              "fieldName": "disabled"
+              "default": "\"right\"",
+              "fieldName": "iconPlacement"
             },
             {
-              "name": "label-wrap",
+              "name": "max-height",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FAccordionBodyHeightProp | undefined"
               },
-              "default": "false",
-              "fieldName": "labelWrap"
+              "fieldName": "maxHeight"
             },
             {
               "name": "tooltip",
@@ -979,213 +879,193 @@
           "superclass": {
             "name": "FRoot",
             "module": "/src/mixins/components/f-root/f-root"
-          },
-          "summary": "Buttons allow users to perform an action or to initiate a new function."
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FButton",
+          "name": "FAccordion",
           "declaration": {
-            "name": "FButton",
-            "module": "src/components/f-button/f-button.ts"
+            "name": "FAccordion",
+            "module": "src/components/f-accordion/f-accordion.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-carousel/f-carousel.ts",
+      "path": "src/components/f-breadcrumb/f-breadcrumb.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FCarousel",
+          "name": "FBreadcrumb",
           "members": [
             {
               "kind": "field",
-              "name": "activeContentId",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
-              "attribute": "active-content-id"
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoPlay",
+              "name": "crumbs",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FBreadcrumbs"
               },
-              "attribute": "auto-play"
+              "attribute": "crumbs"
             },
             {
               "kind": "field",
-              "name": "autoPlayInterval",
+              "name": "disabled",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "auto-play-interval"
-            },
-            {
-              "kind": "field",
-              "name": "slides",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "slider",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "dots",
+              "name": "popOverElement",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "FPopover"
+              },
+              "description": "popover element reference"
             },
             {
               "kind": "field",
-              "name": "nextArrow",
+              "name": "breadCrumbPopover",
               "type": {
-                "text": "FIcon"
+                "text": "FDiv"
               }
             },
             {
               "kind": "field",
-              "name": "progress",
+              "name": "initialCrumbs",
               "type": {
-                "text": "FDiv | undefined"
+                "text": "FBreadCrumbsProp"
               }
             },
             {
               "kind": "field",
-              "name": "prevArrow",
+              "name": "middlePopoverCrumbs",
               "type": {
-                "text": "FIcon"
-              }
+                "text": "FBreadcrumbs"
+              },
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "activeSlide",
+              "name": "endingCrumbs",
               "type": {
-                "text": "HTMLElement | null | undefined"
-              }
+                "text": "FBreadcrumbs"
+              },
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "slideElements",
-              "type": {
-                "text": "NodeListOf<FCarouselContent> | undefined"
-              }
+              "name": "textSize",
+              "description": "text size computed",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "handleNavigation",
+              "name": "isCurrentCrumb",
               "parameters": [
                 {
-                  "name": "type",
-                  "default": "\"next\"",
+                  "name": "index",
                   "type": {
-                    "text": "\"next\" | \"prev\""
-                  }
+                    "text": "number"
+                  },
+                  "description": "index number of crumbs"
+                },
+                {
+                  "name": "array",
+                  "type": {
+                    "text": "FBreadcrumbs"
+                  },
+                  "description": "crumbs array"
                 }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleTransitionEnd"
-            },
-            {
-              "kind": "method",
-              "name": "removeClonnedSlides"
-            },
-            {
-              "kind": "method",
-              "name": "checkAutoPlay"
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "handleProgressEnd"
+              "name": "createSeperateCrumbs",
+              "description": "create seperate crumbs when crumbs length is greater than 4"
             },
             {
               "kind": "method",
-              "name": "emitNavigationEvent",
+              "name": "crumbLoop",
               "parameters": [
                 {
-                  "name": "type",
+                  "name": "crumb",
                   "type": {
-                    "text": "\"next\" | \"prev\""
+                    "text": "FBreadCrumbsProp"
                   }
                 },
                 {
-                  "name": "contentId",
+                  "name": "index",
                   "type": {
-                    "text": "string"
+                    "text": "number"
                   }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "jumpTo",
-              "parameters": [
+                },
                 {
-                  "name": "contentId",
+                  "name": "array",
                   "type": {
-                    "text": "string"
+                    "text": "FBreadcrumbs"
                   }
                 }
-              ]
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
             },
             {
               "kind": "method",
-              "name": "getSlideIndex",
+              "name": "togglePopover",
               "parameters": [
                 {
-                  "name": "slide",
+                  "name": "action",
                   "type": {
-                    "text": "HTMLElement"
-                  }
+                    "text": "\"open\" | \"close\""
+                  },
+                  "description": "action whether to close or open popover"
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "slideTransition",
+              "name": "handleDispatchEvent",
               "parameters": [
                 {
-                  "name": "slideIndex",
+                  "name": "e",
                   "type": {
-                    "text": "number"
-                  }
+                    "text": "MouseEvent"
+                  },
+                  "description": "event"
                 },
                 {
-                  "name": "duration",
-                  "default": "0.3"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "renderDots"
-            },
-            {
-              "kind": "method",
-              "name": "updateDots",
-              "parameters": [
-                {
-                  "name": "activeIndex",
-                  "default": "null",
+                  "name": "value",
                   "type": {
-                    "text": "number | null"
-                  }
+                    "text": "FBreadCrumbsProp"
+                  },
+                  "description": "crumb value"
                 }
-              ]
+              ],
+              "description": "dispatch click event"
             },
             {
               "kind": "field",
@@ -1236,25 +1116,27 @@
           ],
           "attributes": [
             {
-              "name": "active-content-id",
+              "name": "size",
               "type": {
-                "text": "string | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
-              "fieldName": "activeContentId"
+              "default": "\"medium\"",
+              "fieldName": "size"
             },
             {
-              "name": "auto-play",
+              "name": "crumbs",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FBreadcrumbs"
               },
-              "fieldName": "autoPlay"
+              "fieldName": "crumbs"
             },
             {
-              "name": "auto-play-interval",
+              "name": "disabled",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean | undefined"
               },
-              "fieldName": "autoPlayInterval"
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
               "name": "tooltip",
@@ -1277,143 +1159,206 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FCarousel",
-          "declaration": {
-            "name": "FCarousel",
-            "module": "src/components/f-carousel/f-carousel.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-carousel/i-fcarousel-example.ts",
-      "declarations": [],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
+          "name": "FBreadcrumb",
           "declaration": {
-            "name": "<svg width=\"140\" height=\"137\" viewBox=\"0 0 140 137\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M71.8705 118.323C71.8705 117.576 72.1673 116.859 72.6957 116.331C73.2241 115.802 73.9407 115.506 74.688 115.506H82.9287C86.4167 115.506 89.7618 114.12 92.2282 111.654C94.6946 109.187 96.0802 105.842 96.0802 102.354C96.0802 98.8661 94.6946 95.521 92.2282 93.0546C89.7618 90.5882 86.4167 89.2026 82.9287 89.2026H60.2448C51.4311 89.2026 42.9784 85.7014 36.7461 79.4692C30.5139 73.237 27.0127 64.7843 27.0127 55.9706C27.0127 47.1569 30.5139 38.7042 36.7461 32.472C42.9784 26.2397 51.4311 22.7385 60.2448 22.7385H88.0382C90.2806 22.7385 92.4311 23.6293 94.0167 25.2149C95.6023 26.8005 96.4931 28.951 96.4931 31.1934C96.4931 33.4357 95.6023 35.5863 94.0167 37.1719C92.4311 38.7575 90.2806 39.6482 88.0382 39.6482H60.2448C58.0854 39.6231 55.9426 40.0267 53.9404 40.8357C51.9382 41.6446 50.1164 42.8428 48.5806 44.3609C47.0448 45.879 45.8254 47.6867 44.9933 49.6794C44.1611 51.672 43.7326 53.81 43.7326 55.9695C43.7326 58.1289 44.1611 60.2669 44.9933 62.2596C45.8254 64.2523 47.0448 66.06 48.5806 67.578C50.1164 69.0961 51.9382 70.2943 53.9404 71.1033C55.9426 71.9122 58.0854 72.3158 60.2448 72.2907H82.9287C86.8979 72.2567 90.8346 73.0091 94.5115 74.5045C98.1884 75.9999 101.533 78.2087 104.352 81.0034C107.17 83.7982 109.408 87.1235 110.935 90.7874C112.461 94.4514 113.248 98.3814 113.248 102.351C113.248 106.32 112.461 110.25 110.935 113.914C109.408 117.578 107.17 120.903 104.352 123.698C101.533 126.493 98.1884 128.702 94.5115 130.197C90.8346 131.693 86.8979 132.445 82.9287 132.411H71.8705V118.323Z\" fill=\"#FF6242\"/>\n<path d=\"M41.7102 128.075H8.71887V95.0837H39.5021C40.0878 95.0837 40.6494 95.3163 41.0635 95.7304C41.4776 96.1445 41.7102 96.7062 41.7102 97.2918V128.075Z\" fill=\"#80DDFF\"/>\n<path d=\"M41.7102 97.2918C41.7102 96.7062 41.4776 96.1445 41.0635 95.7304C40.6494 95.3163 40.0878 95.0837 39.5021 95.0837H8.71887V101.984H39.5021C40.0878 101.984 40.6494 102.217 41.0635 102.631C41.4776 103.045 41.7102 103.607 41.7102 104.192V97.2918Z\" fill=\"#B8ECFF\"/>\n<path d=\"M41.7102 128.075H8.71887V95.0837H39.5021C40.0878 95.0837 40.6494 95.3163 41.0635 95.7304C41.4776 96.1445 41.7102 96.7062 41.7102 97.2918V128.075Z\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15.3186 128.066V120.757C15.299 119.445 15.5405 118.142 16.029 116.925C16.5175 115.707 17.2433 114.598 18.1641 113.664C19.085 112.729 20.1825 111.987 21.3928 111.48C22.6032 110.973 23.9022 110.713 25.2143 110.713C26.5264 110.713 27.8254 110.973 29.0357 111.48C30.246 111.987 31.3435 112.729 32.2644 113.664C33.1852 114.598 33.911 115.707 34.3995 116.925C34.888 118.142 35.1295 119.445 35.1099 120.757V128.066\" fill=\"#656769\"/>\n<path d=\"M15.3186 128.066V120.757C15.299 119.445 15.5405 118.142 16.029 116.925C16.5175 115.707 17.2433 114.598 18.1641 113.664C19.085 112.729 20.1825 111.987 21.3928 111.48C22.6032 110.973 23.9022 110.713 25.2143 110.713C26.5264 110.713 27.8254 110.973 29.0357 111.48C30.246 111.987 31.3435 112.729 32.2644 113.664C33.1852 114.598 33.911 115.707 34.3995 116.925C34.888 118.142 35.1295 119.445 35.1099 120.757V128.066\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M60.2446 72.291C56.5538 72.2836 52.9741 71.0279 50.0876 68.7279C47.201 66.4279 45.1776 63.219 44.3462 59.623C43.8001 62.0138 43.7991 64.4969 44.3433 66.8882C44.8875 69.2794 45.963 71.5175 47.49 73.4364C49.0171 75.3554 50.9564 76.906 53.1644 77.9734C55.3723 79.0407 57.7922 79.5973 60.2446 79.602H82.9285C90.2654 79.6115 97.3462 82.2999 102.841 87.162C108.335 92.0242 111.865 98.7254 112.767 106.007C113.284 101.782 112.899 97.4957 111.635 93.4312C110.372 89.3668 108.261 85.6169 105.44 82.4296C102.619 79.2423 99.1539 76.6904 95.2731 74.9426C91.3924 73.1948 87.1847 72.291 82.9285 72.291H60.2446Z\" fill=\"#FF866E\"/>\n<path d=\"M82.9291 115.499H74.6885C73.9412 115.499 73.2245 115.796 72.6961 116.325C72.1678 116.853 71.8709 117.57 71.8709 118.317V122.808H82.9291C84.9682 122.807 86.9791 122.333 88.8033 121.422C90.6274 120.51 92.2148 119.188 93.4401 117.558C94.6654 115.928 95.4951 114.036 95.8637 112.03C96.2323 110.025 96.1296 107.961 95.5639 106.002C94.7686 108.739 93.1072 111.144 90.8291 112.856C88.551 114.569 85.779 115.496 82.9291 115.499Z\" fill=\"#FF866E\"/>\n<path d=\"M60.2453 30.0572H88.0387C89.6333 30.0567 91.1955 30.5072 92.545 31.3566C93.8945 32.206 94.9763 33.4197 95.6656 34.8576C96.2821 33.5685 96.5621 32.1442 96.4793 30.7175C96.3965 29.2909 95.9537 27.9085 95.1921 26.6994C94.4305 25.4902 93.3751 24.4937 92.1242 23.8028C90.8733 23.1119 89.4678 22.7491 88.0387 22.7484H60.2453C55.5733 22.7463 50.9534 23.7299 46.6874 25.6348C42.4214 27.5397 38.6052 30.3231 35.4881 33.8032C32.371 37.2833 30.0232 41.3818 28.5978 45.8311C27.1725 50.2803 26.7017 54.9802 27.2164 59.6238C28.1278 51.4986 31.9988 43.9933 38.0907 38.54C44.1827 33.0866 52.0691 30.067 60.2453 30.0572Z\" fill=\"#FF866E\"/>\n<path d=\"M71.8705 118.323C71.8705 117.576 72.1673 116.859 72.6957 116.331C73.2241 115.802 73.9407 115.506 74.688 115.506H82.9287C86.4167 115.506 89.7618 114.12 92.2282 111.654C94.6946 109.187 96.0802 105.842 96.0802 102.354C96.0802 98.8661 94.6946 95.521 92.2282 93.0546C89.7618 90.5882 86.4167 89.2026 82.9287 89.2026H60.2448C51.4311 89.2026 42.9784 85.7014 36.7461 79.4692C30.5139 73.237 27.0127 64.7843 27.0127 55.9706C27.0127 47.1569 30.5139 38.7042 36.7461 32.472C42.9784 26.2397 51.4311 22.7385 60.2448 22.7385H88.0382C90.2806 22.7385 92.4311 23.6293 94.0167 25.2149C95.6023 26.8005 96.4931 28.951 96.4931 31.1934C96.4931 33.4357 95.6023 35.5863 94.0167 37.1719C92.4311 38.7575 90.2806 39.6482 88.0382 39.6482H60.2448C58.0854 39.6231 55.9426 40.0267 53.9404 40.8357C51.9382 41.6446 50.1164 42.8428 48.5806 44.3609C47.0448 45.879 45.8254 47.6867 44.9933 49.6794C44.1611 51.672 43.7326 53.81 43.7326 55.9695C43.7326 58.1289 44.1611 60.2669 44.9933 62.2596C45.8254 64.2523 47.0448 66.06 48.5806 67.578C50.1164 69.0961 51.9382 70.2943 53.9404 71.1033C55.9426 71.9122 58.0854 72.3158 60.2448 72.2907H82.9287C86.8979 72.2567 90.8346 73.0091 94.5115 74.5045C98.1884 75.9999 101.533 78.2087 104.352 81.0034C107.17 83.7982 109.408 87.1235 110.935 90.7874C112.461 94.4514 113.248 98.3814 113.248 102.351C113.248 106.32 112.461 110.25 110.935 113.914C109.408 117.578 107.17 120.903 104.352 123.698C101.533 126.493 98.1884 128.702 94.5115 130.197C90.8346 131.693 86.8979 132.445 82.9287 132.411H71.8705V118.323Z\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M139.368 133.096C139.368 133.842 139.073 134.558 138.546 135.087C138.019 135.616 137.303 135.914 136.557 135.915H3.45195C3.08166 135.915 2.71499 135.843 2.37288 135.701C2.03077 135.559 1.71993 135.351 1.45809 135.09C1.19625 134.828 0.988546 134.517 0.84684 134.175C0.705134 133.833 0.632202 133.466 0.632202 133.096V9.45485C0.635123 7.21338 1.52683 5.06455 3.11179 3.47959C4.69675 1.89464 6.84558 1.00292 9.08705 1H130.913C133.154 1.00292 135.303 1.89464 136.888 3.47959C138.473 5.06455 139.365 7.21338 139.368 9.45485V133.096ZM8.7183 128.07H131.284L131.143 11.9059C131.142 11.1586 130.845 10.442 130.317 9.91341C129.789 9.38479 129.072 9.08727 128.325 9.0861L11.5358 9.22742C10.7886 9.22858 10.0723 9.52611 9.54405 10.0547C9.01585 10.5833 8.71888 11.2999 8.7183 12.0472V128.07Z\" fill=\"#C0DCEB\"/>\n<path d=\"M8.71608 128.155L131.275 128.005L131.282 135.85L8.72296 136L8.71608 128.155Z\" fill=\"#DAEDF7\"/>\n<path d=\"M139.368 9.46477C139.365 7.22312 138.474 5.07396 136.889 3.48887C135.304 1.90378 133.154 1.01226 130.913 1.00992H9.08704C6.8456 1.01226 4.69666 1.90386 3.11192 3.489C1.52719 5.07415 0.636153 7.22332 0.634399 9.46477V17.5553C0.636738 15.3142 1.52803 13.1656 3.1127 11.5809C4.69737 9.99627 6.84598 9.10498 9.08704 9.10264H130.913C133.154 9.10498 135.303 9.9962 136.888 11.5808C138.473 13.1654 139.365 15.314 139.368 17.5553V9.46477Z\" fill=\"#DAEDF7\"/>\n<path d=\"M139.368 133.096C139.368 133.842 139.073 134.558 138.546 135.087C138.019 135.616 137.303 135.914 136.557 135.915H3.45195C3.08166 135.915 2.71499 135.843 2.37288 135.701C2.03077 135.559 1.71993 135.351 1.45809 135.09C1.19625 134.828 0.988546 134.517 0.84684 134.175C0.705134 133.833 0.632202 133.466 0.632202 133.096V9.45485C0.635123 7.21338 1.52683 5.06455 3.11179 3.47959C4.69675 1.89464 6.84558 1.00292 9.08705 1H130.913C133.154 1.00292 135.303 1.89464 136.888 3.47959C138.473 5.06455 139.365 7.21338 139.368 9.45485V133.096ZM8.7183 128.07H131.284L131.143 11.9059C131.142 11.1586 130.845 10.442 130.317 9.91341C129.789 9.38479 129.072 9.08727 128.325 9.0861L11.5358 9.22742C10.7886 9.22858 10.0723 9.52611 9.54405 10.0547C9.01585 10.5833 8.71888 11.2999 8.7183 12.0472V128.07Z\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M88.265 9.09531H121.256V39.6379H88.265V9.09531Z\" fill=\"#FFF48C\"/>\n<path d=\"M88.265 9.09531H121.256V15.7638H88.265V9.09531Z\" fill=\"#FFE500\"/>\n<path d=\"M88.265 9.09531H121.256V39.6379H88.265V9.09531Z\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M94.8665 39.6387V32.3298C94.8665 29.705 95.9091 27.1878 97.7651 25.3318C99.6211 23.4758 102.138 22.4331 104.763 22.4331C107.388 22.4331 109.905 23.4758 111.761 25.3318C113.617 27.1878 114.66 29.705 114.66 32.3298V39.6387\" fill=\"#656769\"/>\n<path d=\"M94.8665 39.6387V32.3298C94.8665 29.705 95.9091 27.1878 97.7651 25.3318C99.6211 23.4758 102.138 22.4331 104.763 22.4331C107.388 22.4331 109.905 23.4758 111.761 25.3318C113.617 27.1878 114.66 29.705 114.66 32.3298V39.6387\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M78.3956 42.4463V44.3717C78.3953 44.7419 78.468 45.1086 78.6095 45.4506C78.7509 45.7927 78.9584 46.1036 79.2201 46.3655C79.4818 46.6273 79.7925 46.8351 80.1344 46.9768C80.4764 47.1185 80.843 47.1915 81.2132 47.1915H131.185V39.6287H81.2132C80.4659 39.6287 79.7493 39.9256 79.2209 40.454C78.6925 40.9824 78.3956 41.699 78.3956 42.4463Z\" fill=\"#DEBB7E\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M60.3818 20.6346H66.1736V41.3886H60.3818V20.6346Z\" fill=\"#FF6242\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M60.3818 70.1819H66.1736V90.936H60.3818V70.1819Z\" fill=\"#FF6242\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M25.1293 52.9714H45.8833V58.7633H25.1293V52.9714Z\" fill=\"#FF6242\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M94.3842 99.119H115.138V104.911H94.3842V99.119Z\" fill=\"#FF6242\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
-            "module": "src/components/f-carousel/i-fcarousel-example.ts"
+            "name": "FBreadcrumb",
+            "module": "src/components/f-breadcrumb/f-breadcrumb.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-accordion/f-accordion.ts",
+      "path": "src/components/f-carousel/f-carousel.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FAccordion",
+          "name": "FCarousel",
           "members": [
             {
               "kind": "field",
-              "name": "open",
+              "name": "activeContentId",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "attribute": "open",
-              "reflects": true
+              "attribute": "active-content-id"
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "autoPlay",
               "type": {
-                "text": "\"chevron\" | \"caret\" | \"plus\" | \"none\" | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"chevron\"",
-              "attribute": "icon",
-              "reflects": true
+              "attribute": "auto-play"
             },
             {
               "kind": "field",
-              "name": "iconSize",
+              "name": "autoPlayInterval",
               "type": {
-                "text": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined"
+                "text": "number | undefined"
               },
-              "default": "\"small\"",
-              "attribute": "icon-size",
-              "reflects": true
+              "attribute": "auto-play-interval"
             },
             {
               "kind": "field",
-              "name": "iconPlacement",
+              "name": "slides",
               "type": {
-                "text": "\"right\" | \"left\" | undefined"
-              },
-              "default": "\"right\"",
-              "attribute": "icon-placement",
-              "reflects": true
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "maxHeight",
+              "name": "slider",
               "type": {
-                "text": "FAccordionBodyHeightProp | undefined"
-              },
-              "attribute": "max-height",
-              "reflects": true
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "fAccordionBody",
+              "name": "dots",
               "type": {
-                "text": "FDiv | undefined"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "fAccordionHeader",
+              "name": "nextArrow",
+              "type": {
+                "text": "FIcon"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "progress",
               "type": {
                 "text": "FDiv | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "iconName",
-              "description": "identify icon-name from string",
-              "readonly": true
+              "name": "prevArrow",
+              "type": {
+                "text": "FIcon"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "activeSlide",
+              "type": {
+                "text": "HTMLElement | null | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "slideElements",
+              "type": {
+                "text": "NodeListOf<FCarouselContent> | undefined"
+              }
             },
             {
               "kind": "method",
-              "name": "toggleAccordion",
-              "description": "toggle accordion"
+              "name": "handleNavigation",
+              "parameters": [
+                {
+                  "name": "type",
+                  "default": "\"next\"",
+                  "type": {
+                    "text": "\"next\" | \"prev\""
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "stateChange",
+              "name": "handleTransitionEnd"
+            },
+            {
+              "kind": "method",
+              "name": "removeClonnedSlides"
+            },
+            {
+              "kind": "method",
+              "name": "checkAutoPlay"
+            },
+            {
+              "kind": "method",
+              "name": "handleProgressEnd"
+            },
+            {
+              "kind": "method",
+              "name": "emitNavigationEvent",
               "parameters": [
                 {
-                  "name": "mouseState",
+                  "name": "type",
                   "type": {
-                    "text": "\"enter\" | \"leave\""
+                    "text": "\"next\" | \"prev\""
+                  }
+                },
+                {
+                  "name": "contentId",
+                  "type": {
+                    "text": "string"
                   }
                 }
-              ],
-              "description": "changeState"
+              ]
             },
             {
               "kind": "method",
-              "name": "dispatchToggleEvent",
+              "name": "jumpTo",
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "contentId",
                   "type": {
-                    "text": "boolean"
-                  },
-                  "description": "boolean"
+                    "text": "string"
+                  }
                 }
-              ],
-              "description": "toggle event dispatch"
+              ]
             },
             {
               "kind": "method",
-              "name": "handleAccordionBody",
-              "description": "handling max-height of body"
+              "name": "getSlideIndex",
+              "parameters": [
+                {
+                  "name": "slide",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "slideTransition",
+              "parameters": [
+                {
+                  "name": "slideIndex",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "duration",
+                  "default": "0.3"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "renderDots"
+            },
+            {
+              "kind": "method",
+              "name": "updateDots",
+              "parameters": [
+                {
+                  "name": "activeIndex",
+                  "default": "null",
+                  "type": {
+                    "text": "number | null"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -1464,43 +1409,25 @@
           ],
           "attributes": [
             {
-              "name": "open",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "open"
-            },
-            {
-              "name": "icon",
-              "type": {
-                "text": "\"chevron\" | \"caret\" | \"plus\" | \"none\" | undefined"
-              },
-              "default": "\"chevron\"",
-              "fieldName": "icon"
-            },
-            {
-              "name": "icon-size",
+              "name": "active-content-id",
               "type": {
-                "text": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"small\"",
-              "fieldName": "iconSize"
+              "fieldName": "activeContentId"
             },
             {
-              "name": "icon-placement",
+              "name": "auto-play",
               "type": {
-                "text": "\"right\" | \"left\" | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"right\"",
-              "fieldName": "iconPlacement"
+              "fieldName": "autoPlay"
             },
             {
-              "name": "max-height",
+              "name": "auto-play-interval",
               "type": {
-                "text": "FAccordionBodyHeightProp | undefined"
+                "text": "number | undefined"
               },
-              "fieldName": "maxHeight"
+              "fieldName": "autoPlayInterval"
             },
             {
               "name": "tooltip",
@@ -1523,152 +1450,129 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FAccordion",
+          "name": "FCarousel",
           "declaration": {
-            "name": "FAccordion",
-            "module": "src/components/f-accordion/f-accordion.ts"
+            "name": "FCarousel",
+            "module": "src/components/f-carousel/f-carousel.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-carousel-content/f-carousel-content.ts",
+      "path": "src/components/f-carousel/i-fcarousel-example.ts",
+      "declarations": [],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "<svg width=\"140\" height=\"137\" viewBox=\"0 0 140 137\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n<path d=\"M71.8705 118.323C71.8705 117.576 72.1673 116.859 72.6957 116.331C73.2241 115.802 73.9407 115.506 74.688 115.506H82.9287C86.4167 115.506 89.7618 114.12 92.2282 111.654C94.6946 109.187 96.0802 105.842 96.0802 102.354C96.0802 98.8661 94.6946 95.521 92.2282 93.0546C89.7618 90.5882 86.4167 89.2026 82.9287 89.2026H60.2448C51.4311 89.2026 42.9784 85.7014 36.7461 79.4692C30.5139 73.237 27.0127 64.7843 27.0127 55.9706C27.0127 47.1569 30.5139 38.7042 36.7461 32.472C42.9784 26.2397 51.4311 22.7385 60.2448 22.7385H88.0382C90.2806 22.7385 92.4311 23.6293 94.0167 25.2149C95.6023 26.8005 96.4931 28.951 96.4931 31.1934C96.4931 33.4357 95.6023 35.5863 94.0167 37.1719C92.4311 38.7575 90.2806 39.6482 88.0382 39.6482H60.2448C58.0854 39.6231 55.9426 40.0267 53.9404 40.8357C51.9382 41.6446 50.1164 42.8428 48.5806 44.3609C47.0448 45.879 45.8254 47.6867 44.9933 49.6794C44.1611 51.672 43.7326 53.81 43.7326 55.9695C43.7326 58.1289 44.1611 60.2669 44.9933 62.2596C45.8254 64.2523 47.0448 66.06 48.5806 67.578C50.1164 69.0961 51.9382 70.2943 53.9404 71.1033C55.9426 71.9122 58.0854 72.3158 60.2448 72.2907H82.9287C86.8979 72.2567 90.8346 73.0091 94.5115 74.5045C98.1884 75.9999 101.533 78.2087 104.352 81.0034C107.17 83.7982 109.408 87.1235 110.935 90.7874C112.461 94.4514 113.248 98.3814 113.248 102.351C113.248 106.32 112.461 110.25 110.935 113.914C109.408 117.578 107.17 120.903 104.352 123.698C101.533 126.493 98.1884 128.702 94.5115 130.197C90.8346 131.693 86.8979 132.445 82.9287 132.411H71.8705V118.323Z\" fill=\"#FF6242\"/>\n<path d=\"M41.7102 128.075H8.71887V95.0837H39.5021C40.0878 95.0837 40.6494 95.3163 41.0635 95.7304C41.4776 96.1445 41.7102 96.7062 41.7102 97.2918V128.075Z\" fill=\"#80DDFF\"/>\n<path d=\"M41.7102 97.2918C41.7102 96.7062 41.4776 96.1445 41.0635 95.7304C40.6494 95.3163 40.0878 95.0837 39.5021 95.0837H8.71887V101.984H39.5021C40.0878 101.984 40.6494 102.217 41.0635 102.631C41.4776 103.045 41.7102 103.607 41.7102 104.192V97.2918Z\" fill=\"#B8ECFF\"/>\n<path d=\"M41.7102 128.075H8.71887V95.0837H39.5021C40.0878 95.0837 40.6494 95.3163 41.0635 95.7304C41.4776 96.1445 41.7102 96.7062 41.7102 97.2918V128.075Z\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M15.3186 128.066V120.757C15.299 119.445 15.5405 118.142 16.029 116.925C16.5175 115.707 17.2433 114.598 18.1641 113.664C19.085 112.729 20.1825 111.987 21.3928 111.48C22.6032 110.973 23.9022 110.713 25.2143 110.713C26.5264 110.713 27.8254 110.973 29.0357 111.48C30.246 111.987 31.3435 112.729 32.2644 113.664C33.1852 114.598 33.911 115.707 34.3995 116.925C34.888 118.142 35.1295 119.445 35.1099 120.757V128.066\" fill=\"#656769\"/>\n<path d=\"M15.3186 128.066V120.757C15.299 119.445 15.5405 118.142 16.029 116.925C16.5175 115.707 17.2433 114.598 18.1641 113.664C19.085 112.729 20.1825 111.987 21.3928 111.48C22.6032 110.973 23.9022 110.713 25.2143 110.713C26.5264 110.713 27.8254 110.973 29.0357 111.48C30.246 111.987 31.3435 112.729 32.2644 113.664C33.1852 114.598 33.911 115.707 34.3995 116.925C34.888 118.142 35.1295 119.445 35.1099 120.757V128.066\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M60.2446 72.291C56.5538 72.2836 52.9741 71.0279 50.0876 68.7279C47.201 66.4279 45.1776 63.219 44.3462 59.623C43.8001 62.0138 43.7991 64.4969 44.3433 66.8882C44.8875 69.2794 45.963 71.5175 47.49 73.4364C49.0171 75.3554 50.9564 76.906 53.1644 77.9734C55.3723 79.0407 57.7922 79.5973 60.2446 79.602H82.9285C90.2654 79.6115 97.3462 82.2999 102.841 87.162C108.335 92.0242 111.865 98.7254 112.767 106.007C113.284 101.782 112.899 97.4957 111.635 93.4312C110.372 89.3668 108.261 85.6169 105.44 82.4296C102.619 79.2423 99.1539 76.6904 95.2731 74.9426C91.3924 73.1948 87.1847 72.291 82.9285 72.291H60.2446Z\" fill=\"#FF866E\"/>\n<path d=\"M82.9291 115.499H74.6885C73.9412 115.499 73.2245 115.796 72.6961 116.325C72.1678 116.853 71.8709 117.57 71.8709 118.317V122.808H82.9291C84.9682 122.807 86.9791 122.333 88.8033 121.422C90.6274 120.51 92.2148 119.188 93.4401 117.558C94.6654 115.928 95.4951 114.036 95.8637 112.03C96.2323 110.025 96.1296 107.961 95.5639 106.002C94.7686 108.739 93.1072 111.144 90.8291 112.856C88.551 114.569 85.779 115.496 82.9291 115.499Z\" fill=\"#FF866E\"/>\n<path d=\"M60.2453 30.0572H88.0387C89.6333 30.0567 91.1955 30.5072 92.545 31.3566C93.8945 32.206 94.9763 33.4197 95.6656 34.8576C96.2821 33.5685 96.5621 32.1442 96.4793 30.7175C96.3965 29.2909 95.9537 27.9085 95.1921 26.6994C94.4305 25.4902 93.3751 24.4937 92.1242 23.8028C90.8733 23.1119 89.4678 22.7491 88.0387 22.7484H60.2453C55.5733 22.7463 50.9534 23.7299 46.6874 25.6348C42.4214 27.5397 38.6052 30.3231 35.4881 33.8032C32.371 37.2833 30.0232 41.3818 28.5978 45.8311C27.1725 50.2803 26.7017 54.9802 27.2164 59.6238C28.1278 51.4986 31.9988 43.9933 38.0907 38.54C44.1827 33.0866 52.0691 30.067 60.2453 30.0572Z\" fill=\"#FF866E\"/>\n<path d=\"M71.8705 118.323C71.8705 117.576 72.1673 116.859 72.6957 116.331C73.2241 115.802 73.9407 115.506 74.688 115.506H82.9287C86.4167 115.506 89.7618 114.12 92.2282 111.654C94.6946 109.187 96.0802 105.842 96.0802 102.354C96.0802 98.8661 94.6946 95.521 92.2282 93.0546C89.7618 90.5882 86.4167 89.2026 82.9287 89.2026H60.2448C51.4311 89.2026 42.9784 85.7014 36.7461 79.4692C30.5139 73.237 27.0127 64.7843 27.0127 55.9706C27.0127 47.1569 30.5139 38.7042 36.7461 32.472C42.9784 26.2397 51.4311 22.7385 60.2448 22.7385H88.0382C90.2806 22.7385 92.4311 23.6293 94.0167 25.2149C95.6023 26.8005 96.4931 28.951 96.4931 31.1934C96.4931 33.4357 95.6023 35.5863 94.0167 37.1719C92.4311 38.7575 90.2806 39.6482 88.0382 39.6482H60.2448C58.0854 39.6231 55.9426 40.0267 53.9404 40.8357C51.9382 41.6446 50.1164 42.8428 48.5806 44.3609C47.0448 45.879 45.8254 47.6867 44.9933 49.6794C44.1611 51.672 43.7326 53.81 43.7326 55.9695C43.7326 58.1289 44.1611 60.2669 44.9933 62.2596C45.8254 64.2523 47.0448 66.06 48.5806 67.578C50.1164 69.0961 51.9382 70.2943 53.9404 71.1033C55.9426 71.9122 58.0854 72.3158 60.2448 72.2907H82.9287C86.8979 72.2567 90.8346 73.0091 94.5115 74.5045C98.1884 75.9999 101.533 78.2087 104.352 81.0034C107.17 83.7982 109.408 87.1235 110.935 90.7874C112.461 94.4514 113.248 98.3814 113.248 102.351C113.248 106.32 112.461 110.25 110.935 113.914C109.408 117.578 107.17 120.903 104.352 123.698C101.533 126.493 98.1884 128.702 94.5115 130.197C90.8346 131.693 86.8979 132.445 82.9287 132.411H71.8705V118.323Z\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M139.368 133.096C139.368 133.842 139.073 134.558 138.546 135.087C138.019 135.616 137.303 135.914 136.557 135.915H3.45195C3.08166 135.915 2.71499 135.843 2.37288 135.701C2.03077 135.559 1.71993 135.351 1.45809 135.09C1.19625 134.828 0.988546 134.517 0.84684 134.175C0.705134 133.833 0.632202 133.466 0.632202 133.096V9.45485C0.635123 7.21338 1.52683 5.06455 3.11179 3.47959C4.69675 1.89464 6.84558 1.00292 9.08705 1H130.913C133.154 1.00292 135.303 1.89464 136.888 3.47959C138.473 5.06455 139.365 7.21338 139.368 9.45485V133.096ZM8.7183 128.07H131.284L131.143 11.9059C131.142 11.1586 130.845 10.442 130.317 9.91341C129.789 9.38479 129.072 9.08727 128.325 9.0861L11.5358 9.22742C10.7886 9.22858 10.0723 9.52611 9.54405 10.0547C9.01585 10.5833 8.71888 11.2999 8.7183 12.0472V128.07Z\" fill=\"#C0DCEB\"/>\n<path d=\"M8.71608 128.155L131.275 128.005L131.282 135.85L8.72296 136L8.71608 128.155Z\" fill=\"#DAEDF7\"/>\n<path d=\"M139.368 9.46477C139.365 7.22312 138.474 5.07396 136.889 3.48887C135.304 1.90378 133.154 1.01226 130.913 1.00992H9.08704C6.8456 1.01226 4.69666 1.90386 3.11192 3.489C1.52719 5.07415 0.636153 7.22332 0.634399 9.46477V17.5553C0.636738 15.3142 1.52803 13.1656 3.1127 11.5809C4.69737 9.99627 6.84598 9.10498 9.08704 9.10264H130.913C133.154 9.10498 135.303 9.9962 136.888 11.5808C138.473 13.1654 139.365 15.314 139.368 17.5553V9.46477Z\" fill=\"#DAEDF7\"/>\n<path d=\"M139.368 133.096C139.368 133.842 139.073 134.558 138.546 135.087C138.019 135.616 137.303 135.914 136.557 135.915H3.45195C3.08166 135.915 2.71499 135.843 2.37288 135.701C2.03077 135.559 1.71993 135.351 1.45809 135.09C1.19625 134.828 0.988546 134.517 0.84684 134.175C0.705134 133.833 0.632202 133.466 0.632202 133.096V9.45485C0.635123 7.21338 1.52683 5.06455 3.11179 3.47959C4.69675 1.89464 6.84558 1.00292 9.08705 1H130.913C133.154 1.00292 135.303 1.89464 136.888 3.47959C138.473 5.06455 139.365 7.21338 139.368 9.45485V133.096ZM8.7183 128.07H131.284L131.143 11.9059C131.142 11.1586 130.845 10.442 130.317 9.91341C129.789 9.38479 129.072 9.08727 128.325 9.0861L11.5358 9.22742C10.7886 9.22858 10.0723 9.52611 9.54405 10.0547C9.01585 10.5833 8.71888 11.2999 8.7183 12.0472V128.07Z\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M88.265 9.09531H121.256V39.6379H88.265V9.09531Z\" fill=\"#FFF48C\"/>\n<path d=\"M88.265 9.09531H121.256V15.7638H88.265V9.09531Z\" fill=\"#FFE500\"/>\n<path d=\"M88.265 9.09531H121.256V39.6379H88.265V9.09531Z\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M94.8665 39.6387V32.3298C94.8665 29.705 95.9091 27.1878 97.7651 25.3318C99.6211 23.4758 102.138 22.4331 104.763 22.4331C107.388 22.4331 109.905 23.4758 111.761 25.3318C113.617 27.1878 114.66 29.705 114.66 32.3298V39.6387\" fill=\"#656769\"/>\n<path d=\"M94.8665 39.6387V32.3298C94.8665 29.705 95.9091 27.1878 97.7651 25.3318C99.6211 23.4758 102.138 22.4331 104.763 22.4331C107.388 22.4331 109.905 23.4758 111.761 25.3318C113.617 27.1878 114.66 29.705 114.66 32.3298V39.6387\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M78.3956 42.4463V44.3717C78.3953 44.7419 78.468 45.1086 78.6095 45.4506C78.7509 45.7927 78.9584 46.1036 79.2201 46.3655C79.4818 46.6273 79.7925 46.8351 80.1344 46.9768C80.4764 47.1185 80.843 47.1915 81.2132 47.1915H131.185V39.6287H81.2132C80.4659 39.6287 79.7493 39.9256 79.2209 40.454C78.6925 40.9824 78.3956 41.699 78.3956 42.4463Z\" fill=\"#DEBB7E\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M60.3818 20.6346H66.1736V41.3886H60.3818V20.6346Z\" fill=\"#FF6242\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M60.3818 70.1819H66.1736V90.936H60.3818V70.1819Z\" fill=\"#FF6242\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M25.1293 52.9714H45.8833V58.7633H25.1293V52.9714Z\" fill=\"#FF6242\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n<path d=\"M94.3842 99.119H115.138V104.911H94.3842V99.119Z\" fill=\"#FF6242\" stroke=\"#45413C\" stroke-linecap=\"round\" stroke-linejoin=\"round\"/>\n</svg>\n",
+            "module": "src/components/f-carousel/i-fcarousel-example.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-button/f-button.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FCarouselContent",
+          "name": "FButton",
           "members": [
             {
               "kind": "field",
-              "name": "contentId",
+              "name": "fill",
               "type": {
                 "text": "string"
               },
-              "attribute": "content-id",
-              "reflects": true
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "tooltipElement",
+              "name": "label",
               "type": {
-                "text": "HTMLElement"
+                "text": "string"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "attribute": "label"
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "category",
               "type": {
-                "text": "string | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "attribute": "tooltip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "\"fill\"",
+              "attribute": "category",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseEnter",
+              "name": "size",
               "type": {
-                "text": "() => void | undefined"
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseLeave",
+              "name": "state",
               "type": {
-                "text": "() => void | undefined"
+                "text": "FButtonState | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "attributes": [
+              "default": "\"primary\"",
+              "attribute": "state",
+              "reflects": true
+            },
             {
-              "name": "content-id",
+              "kind": "field",
+              "name": "variant",
               "type": {
-                "text": "string"
+                "text": "\"round\" | \"curved\" | \"block\" | undefined"
               },
-              "fieldName": "contentId"
+              "default": "\"round\"",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "name": "tooltip",
+              "kind": "field",
+              "name": "iconLeft",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "tooltip",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "FRoot",
-            "module": "/src/mixins/components/f-root/f-root"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FCarouselContent",
-          "declaration": {
-            "name": "FCarouselContent",
-            "module": "src/components/f-carousel-content/f-carousel-content.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-checkbox/f-checkbox.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FCheckbox",
-          "members": [
+              "attribute": "icon-left",
+              "reflects": true
+            },
             {
               "kind": "field",
-              "name": "value",
+              "name": "iconRight",
               "type": {
-                "text": "\"checked\" | \"unchecked\" | \"indeterminate\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"unchecked\"",
-              "attribute": "value",
+              "attribute": "icon-right",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "counter",
               "type": {
-                "text": "FCheckboxState | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
+              "attribute": "counter",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "loading",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "size",
+              "default": "false",
+              "attribute": "loading",
               "reflects": true
             },
             {
@@ -1683,27 +1587,61 @@
             },
             {
               "kind": "field",
-              "name": "slotWrapper",
+              "name": "labelWrap",
               "type": {
-                "text": "FDiv"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "label-wrap",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "iconElement",
+              "type": {
+                "text": "FIcon"
+              },
+              "description": "icon element reference"
+            },
+            {
+              "kind": "field",
+              "name": "counterElement",
+              "type": {
+                "text": "FCounter | undefined"
+              },
+              "description": "counter element reference"
+            },
+            {
+              "kind": "field",
+              "name": "counterSize",
+              "description": "compute counter size based on button size",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "textColor",
+              "description": "compute textColor when custom color of tag is defined.",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "array"
+              },
+              "readonly": true,
+              "default": "[\"label\"]",
+              "description": "mention required fields here for generating vue types"
             },
             {
               "kind": "method",
-              "name": "handleInput",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ],
-              "description": "emit event."
+              "name": "validateProperties",
+              "description": "validation for all atrributes"
             },
             {
               "kind": "method",
-              "name": "checkSlots"
+              "name": "applyStyles",
+              "description": "apply inline styles to shadow-dom for custom fill."
             },
             {
               "kind": "field",
@@ -1754,28 +1692,73 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "label",
               "type": {
-                "text": "\"checked\" | \"unchecked\" | \"indeterminate\" | undefined"
+                "text": "string"
               },
-              "default": "\"unchecked\"",
-              "fieldName": "value"
+              "fieldName": "label"
             },
             {
-              "name": "state",
+              "name": "category",
               "type": {
-                "text": "FCheckboxState | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "default": "\"default\"",
-              "fieldName": "state"
+              "default": "\"fill\"",
+              "fieldName": "category"
             },
             {
               "name": "size",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
+              "default": "\"medium\"",
               "fieldName": "size"
             },
+            {
+              "name": "state",
+              "type": {
+                "text": "FButtonState | undefined"
+              },
+              "default": "\"primary\"",
+              "fieldName": "state"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"round\" | \"curved\" | \"block\" | undefined"
+              },
+              "default": "\"round\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "icon-left",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "iconLeft"
+            },
+            {
+              "name": "icon-right",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "iconRight"
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "counter"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "loading"
+            },
             {
               "name": "disabled",
               "type": {
@@ -1784,6 +1767,14 @@
               "default": "false",
               "fieldName": "disabled"
             },
+            {
+              "name": "label-wrap",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "labelWrap"
+            },
             {
               "name": "tooltip",
               "type": {
@@ -1799,193 +1790,194 @@
           "superclass": {
             "name": "FRoot",
             "module": "/src/mixins/components/f-root/f-root"
-          }
+          },
+          "summary": "Buttons allow users to perform an action or to initiate a new function."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FCheckbox",
+          "name": "FButton",
           "declaration": {
-            "name": "FCheckbox",
-            "module": "src/components/f-checkbox/f-checkbox.ts"
+            "name": "FButton",
+            "module": "src/components/f-button/f-button.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-breadcrumb/f-breadcrumb.ts",
+      "path": "src/components/f-carousel-content/f-carousel-content.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FBreadcrumb",
+          "name": "FCarouselContent",
           "members": [
             {
               "kind": "field",
-              "name": "size",
+              "name": "contentId",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "string"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
+              "attribute": "content-id",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "crumbs",
+              "name": "tooltipElement",
               "type": {
-                "text": "FBreadcrumbs"
+                "text": "HTMLElement"
               },
-              "attribute": "crumbs"
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "tooltip",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "popOverElement",
+              "name": "mouseEnter",
               "type": {
-                "text": "FPopover"
+                "text": "() => void | undefined"
               },
-              "description": "popover element reference"
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "breadCrumbPopover",
+              "name": "mouseLeave",
               "type": {
-                "text": "FDiv"
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
               }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "content-id",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "contentId"
             },
             {
-              "kind": "field",
-              "name": "initialCrumbs",
+              "name": "tooltip",
               "type": {
-                "text": "FBreadCrumbsProp"
+                "text": "string | undefined"
+              },
+              "fieldName": "tooltip",
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
               }
-            },
+            }
+          ],
+          "superclass": {
+            "name": "FRoot",
+            "module": "/src/mixins/components/f-root/f-root"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FCarouselContent",
+          "declaration": {
+            "name": "FCarouselContent",
+            "module": "src/components/f-carousel-content/f-carousel-content.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-checkbox/f-checkbox.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FCheckbox",
+          "members": [
             {
               "kind": "field",
-              "name": "middlePopoverCrumbs",
+              "name": "value",
               "type": {
-                "text": "FBreadcrumbs"
+                "text": "\"checked\" | \"unchecked\" | \"indeterminate\" | undefined"
               },
-              "default": "[]"
+              "default": "\"unchecked\"",
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "endingCrumbs",
+              "name": "state",
               "type": {
-                "text": "FBreadcrumbs"
+                "text": "FCheckboxState | undefined"
               },
-              "default": "[]"
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "textSize",
-              "description": "text size computed",
-              "readonly": true
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | undefined"
+              },
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "isCurrentCrumb",
-              "parameters": [
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  },
-                  "description": "index number of crumbs"
-                },
-                {
-                  "name": "array",
-                  "type": {
-                    "text": "FBreadcrumbs"
-                  },
-                  "description": "crumbs array"
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "createSeperateCrumbs",
-              "description": "create seperate crumbs when crumbs length is greater than 4"
+              "kind": "field",
+              "name": "slotWrapper",
+              "type": {
+                "text": "FDiv"
+              }
             },
             {
               "kind": "method",
-              "name": "crumbLoop",
+              "name": "handleInput",
               "parameters": [
                 {
-                  "name": "crumb",
-                  "type": {
-                    "text": "FBreadCrumbsProp"
-                  }
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "array",
+                  "name": "e",
                   "type": {
-                    "text": "FBreadcrumbs"
+                    "text": "InputEvent"
                   }
                 }
               ],
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "togglePopover",
-              "parameters": [
-                {
-                  "name": "action",
-                  "type": {
-                    "text": "\"open\" | \"close\""
-                  },
-                  "description": "action whether to close or open popover"
-                }
-              ]
+              "description": "emit event."
             },
             {
               "kind": "method",
-              "name": "handleDispatchEvent",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "event"
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "FBreadCrumbsProp"
-                  },
-                  "description": "crumb value"
-                }
-              ],
-              "description": "dispatch click event"
+              "name": "checkSlots"
             },
             {
               "kind": "field",
@@ -2036,19 +2028,27 @@
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "value",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "\"checked\" | \"unchecked\" | \"indeterminate\" | undefined"
               },
-              "default": "\"medium\"",
-              "fieldName": "size"
+              "default": "\"unchecked\"",
+              "fieldName": "value"
             },
             {
-              "name": "crumbs",
+              "name": "state",
               "type": {
-                "text": "FBreadcrumbs"
+                "text": "FCheckboxState | undefined"
               },
-              "fieldName": "crumbs"
+              "default": "\"default\"",
+              "fieldName": "state"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | undefined"
+              },
+              "fieldName": "size"
             },
             {
               "name": "disabled",
@@ -2079,10 +2079,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FBreadcrumb",
+          "name": "FCheckbox",
           "declaration": {
-            "name": "FBreadcrumb",
-            "module": "src/components/f-breadcrumb/f-breadcrumb.ts"
+            "name": "FCheckbox",
+            "module": "src/components/f-checkbox/f-checkbox.ts"
           }
         }
       ]
@@ -4132,53 +4132,176 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-file-upload/f-file-upload.ts",
+      "path": "src/components/f-form/f-form.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FFileUpload",
+          "name": "FForm",
           "members": [
             {
               "kind": "field",
-              "name": "type",
+              "name": "gap",
               "type": {
-                "text": "\"single\" | \"multiple\" | undefined"
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "\"single\"",
-              "attribute": "type",
+              "default": "\"medium\"",
+              "attribute": "gap",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "separator",
               "type": {
-                "text": "FFileUploadValueType | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "value"
+              "default": "false",
+              "attribute": "separator",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "tooltipElement",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLElement"
               },
-              "attribute": "placeholder",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "fileType",
+              "name": "tooltip",
               "type": {
-                "text": "FFileUploadFileType | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"all\"",
-              "attribute": "file-type",
-              "reflects": true
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "mouseEnter",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseLeave",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "gap",
+              "type": {
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+              },
+              "default": "\"medium\"",
+              "fieldName": "gap"
+            },
+            {
+              "name": "separator",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "separator"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "tooltip",
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "FRoot",
+            "module": "/src/mixins/components/f-root/f-root"
+          },
+          "summary": "Text component includes Headings, titles, body texts and links."
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FForm",
+          "declaration": {
+            "name": "FForm",
+            "module": "src/components/f-form/f-form.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-file-upload/f-file-upload.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FFileUpload",
+          "members": [
+            {
+              "kind": "field",
+              "name": "type",
+              "type": {
+                "text": "\"single\" | \"multiple\" | undefined"
+              },
+              "default": "\"single\"",
+              "attribute": "type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "FFileUploadValueType | undefined"
+              },
+              "attribute": "value"
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "placeholder",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "fileType",
+              "type": {
+                "text": "FFileUploadFileType | undefined"
+              },
+              "default": "\"all\"",
+              "attribute": "file-type",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
               "type": {
                 "text": "\"medium\" | \"small\" | undefined"
               },
@@ -4679,129 +4802,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-form/f-form.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FForm",
-          "members": [
-            {
-              "kind": "field",
-              "name": "gap",
-              "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "attribute": "gap",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "separator",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "separator",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tooltipElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltip",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "tooltip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "mouseEnter",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "mouseLeave",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "gap",
-              "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "fieldName": "gap"
-            },
-            {
-              "name": "separator",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "separator"
-            },
-            {
-              "name": "tooltip",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "tooltip",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "FRoot",
-            "module": "/src/mixins/components/f-root/f-root"
-          },
-          "summary": "Text component includes Headings, titles, body texts and links."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FForm",
-          "declaration": {
-            "name": "FForm",
-            "module": "src/components/f-form/f-form.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/f-form-group/f-form-group.ts",
@@ -5458,16 +5458,24 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-input/f-input.ts",
+      "path": "src/components/f-icon-button/f-icon-button.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FInput",
+          "name": "FIconButton",
           "members": [
             {
               "kind": "field",
-              "name": "showPassword",
+              "name": "fill",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
+            },
+            {
+              "kind": "field",
+              "name": "iconInputClass",
               "type": {
                 "text": "boolean"
               },
@@ -5475,69 +5483,35 @@
             },
             {
               "kind": "field",
-              "name": "_labelNodes",
+              "name": "icon",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_hasLabel",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "_helpNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_hasHelperText",
-              "type": {
-                "text": "boolean"
+                "text": "string"
               },
-              "default": "false"
+              "attribute": "icon"
             },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "FIconButtonVariant | undefined"
               },
-              "default": "\"curved\"",
-              "attribute": "variant",
-              "reflects": true
+              "default": "\"round\"",
+              "attribute": "variant"
             },
             {
               "kind": "field",
               "name": "category",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "FIconButtonType | undefined"
               },
               "default": "\"fill\"",
-              "attribute": "category",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "FInputState | undefined"
-              },
-              "default": "\"default\"",
-              "attribute": "state",
-              "reflects": true
+              "attribute": "category"
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "FIconButtonSize | undefined"
               },
               "default": "\"medium\"",
               "attribute": "size",
@@ -5545,76 +5519,20 @@
             },
             {
               "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"text\" | \"number\" | \"email\" | \"password\" | \"url\" | \"tel\" | undefined"
-              },
-              "default": "\"text\"",
-              "attribute": "type",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | number | undefined"
-              },
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "placeholder",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconLeft",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "icon-left",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "iconRight",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "icon-right",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "prefix",
+              "name": "state",
               "type": {
-                "text": "string | null"
+                "text": "FIconButtonState | undefined"
               },
-              "default": "null",
-              "attribute": "prefix",
-              "reflects": true
+              "default": "\"primary\"",
+              "attribute": "state"
             },
             {
               "kind": "field",
-              "name": "suffix",
+              "name": "counter",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "suffix",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "maxLength",
-              "type": {
-                "text": "number | undefined"
-              },
-              "attribute": "max-length",
+              "attribute": "counter",
               "reflects": true
             },
             {
@@ -5639,102 +5557,35 @@
             },
             {
               "kind": "field",
-              "name": "clear",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "true",
-              "attribute": "clear",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "readOnly",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "read-only",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "suffixWhen",
-              "type": {
-                "text": "FInputSuffixWhen | undefined"
-              },
-              "attribute": "suffixWhen"
-            },
-            {
-              "kind": "field",
-              "name": "inputElement",
+              "name": "iconElement",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "FIcon"
               },
-              "description": "input element reference"
+              "description": "icon element reference"
             },
             {
               "kind": "field",
-              "name": "inputWrapperElement",
+              "name": "counterElement",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "FCounter | undefined"
               },
-              "description": "input element reference"
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ],
-              "description": "emit input custom event"
-            },
-            {
-              "kind": "method",
-              "name": "clearInputValue",
-              "description": "clear input value on clear icon clicked"
-            },
-            {
-              "kind": "method",
-              "name": "dispatchInputEvent",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string | number"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "\"clear\" | \"input\""
-                  }
-                }
-              ]
+              "description": "icon element reference"
             },
             {
               "kind": "field",
-              "name": "iconSize",
-              "description": "icon size",
+              "name": "counterSize",
+              "description": "compute counter size based on button size",
               "readonly": true
             },
             {
               "kind": "method",
-              "name": "togglePasswordView",
-              "description": "Toggle Password view"
-            },
-            {
-              "kind": "method",
-              "name": "_onLabelSlotChange"
+              "name": "applyStyles",
+              "description": "apply inline styles to shadow-dom for custom fill."
             },
             {
               "kind": "method",
-              "name": "_onHelpSlotChange"
+              "name": "validateProperties",
+              "description": "validation for all atrributes"
             },
             {
               "kind": "field",
@@ -5784,135 +5635,68 @@
             }
           ],
           "attributes": [
+            {
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "icon"
+            },
             {
               "name": "variant",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "FIconButtonVariant | undefined"
               },
-              "default": "\"curved\"",
+              "default": "\"round\"",
               "fieldName": "variant"
             },
             {
               "name": "category",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "FIconButtonType | undefined"
               },
               "default": "\"fill\"",
               "fieldName": "category"
             },
-            {
-              "name": "state",
-              "type": {
-                "text": "FInputState | undefined"
-              },
-              "default": "\"default\"",
-              "fieldName": "state"
-            },
             {
               "name": "size",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "FIconButtonSize | undefined"
               },
               "default": "\"medium\"",
               "fieldName": "size"
             },
             {
-              "name": "type",
+              "name": "state",
               "type": {
-                "text": "\"text\" | \"number\" | \"email\" | \"password\" | \"url\" | \"tel\" | undefined"
+                "text": "FIconButtonState | undefined"
               },
-              "default": "\"text\"",
-              "fieldName": "type"
+              "default": "\"primary\"",
+              "fieldName": "state"
             },
             {
-              "name": "value",
+              "name": "counter",
               "type": {
-                "text": "string | number | undefined"
+                "text": "string | undefined"
               },
-              "fieldName": "value"
+              "fieldName": "counter"
             },
             {
-              "name": "placeholder",
+              "name": "loading",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "fieldName": "placeholder"
+              "default": "false",
+              "fieldName": "loading"
             },
             {
-              "name": "icon-left",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "iconLeft"
-            },
-            {
-              "name": "icon-right",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "iconRight"
-            },
-            {
-              "name": "prefix",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null",
-              "fieldName": "prefix"
-            },
-            {
-              "name": "suffix",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "suffix"
-            },
-            {
-              "name": "max-length",
-              "type": {
-                "text": "number | undefined"
-              },
-              "fieldName": "maxLength"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "loading"
-            },
-            {
-              "name": "disabled",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
               "fieldName": "disabled"
             },
-            {
-              "name": "clear",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "true",
-              "fieldName": "clear"
-            },
-            {
-              "name": "read-only",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "readOnly"
-            },
-            {
-              "name": "suffixWhen",
-              "type": {
-                "text": "FInputSuffixWhen | undefined"
-              },
-              "fieldName": "suffixWhen"
-            },
             {
               "name": "tooltip",
               "type": {
@@ -5934,34 +5718,41 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FInput",
+          "name": "FIconButton",
           "declaration": {
-            "name": "FInput",
-            "module": "src/components/f-input/f-input.ts"
+            "name": "FIconButton",
+            "module": "src/components/f-icon-button/f-icon-button.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-icon-button/f-icon-button.ts",
+      "path": "src/components/f-input/f-input.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FIconButton",
+          "name": "FInput",
           "members": [
             {
               "kind": "field",
-              "name": "fill",
+              "name": "showPassword",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\""
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "iconInputClass",
+              "name": "_labelNodes",
+              "type": {
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hasLabel",
               "type": {
                 "text": "boolean"
               },
@@ -5969,35 +5760,54 @@
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "_helpNodes",
               "type": {
-                "text": "string"
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hasHelperText",
+              "type": {
+                "text": "boolean"
               },
-              "attribute": "icon"
+              "default": "false"
             },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "FIconButtonVariant | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
-              "default": "\"round\"",
-              "attribute": "variant"
+              "default": "\"curved\"",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "category",
               "type": {
-                "text": "FIconButtonType | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
               "default": "\"fill\"",
-              "attribute": "category"
+              "attribute": "category",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "FInputState | undefined"
+              },
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "FIconButtonSize | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
               "default": "\"medium\"",
               "attribute": "size",
@@ -6005,167 +5815,334 @@
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "type",
               "type": {
-                "text": "FIconButtonState | undefined"
+                "text": "\"text\" | \"number\" | \"email\" | \"password\" | \"url\" | \"tel\" | undefined"
               },
-              "default": "\"primary\"",
-              "attribute": "state"
+              "default": "\"text\"",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "string | number | undefined"
               },
-              "attribute": "counter",
+              "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "placeholder",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "attribute": "loading",
+              "attribute": "placeholder",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "iconLeft",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
+              "attribute": "icon-left",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconElement",
+              "name": "iconRight",
               "type": {
-                "text": "FIcon"
+                "text": "string | undefined"
               },
-              "description": "icon element reference"
+              "attribute": "icon-right",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "counterElement",
+              "name": "prefix",
               "type": {
-                "text": "FCounter | undefined"
+                "text": "string | null"
               },
-              "description": "icon element reference"
+              "default": "null",
+              "attribute": "prefix",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "counterSize",
-              "description": "compute counter size based on button size",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "applyStyles",
-              "description": "apply inline styles to shadow-dom for custom fill."
+              "name": "suffix",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "suffix",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "validateProperties",
-              "description": "validation for all atrributes"
+              "kind": "field",
+              "name": "maxLength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "max-length",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltipElement",
+              "name": "loading",
               "type": {
-                "text": "HTMLElement"
+                "text": "boolean | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "false",
+              "attribute": "loading",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "tooltip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseEnter",
+              "name": "clear",
               "type": {
-                "text": "() => void | undefined"
+                "text": "boolean | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "true",
+              "attribute": "clear",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseLeave",
+              "name": "readOnly",
               "type": {
-                "text": "() => void | undefined"
+                "text": "boolean | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "attributes": [
+              "default": "false",
+              "attribute": "read-only",
+              "reflects": true
+            },
             {
-              "name": "icon",
+              "kind": "field",
+              "name": "suffixWhen",
               "type": {
-                "text": "string"
+                "text": "FInputSuffixWhen | undefined"
               },
-              "fieldName": "icon"
+              "attribute": "suffixWhen"
             },
             {
-              "name": "variant",
+              "kind": "field",
+              "name": "inputElement",
               "type": {
-                "text": "FIconButtonVariant | undefined"
+                "text": "HTMLInputElement"
               },
-              "default": "\"round\"",
+              "description": "input element reference"
+            },
+            {
+              "kind": "field",
+              "name": "inputWrapperElement",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "description": "input element reference"
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ],
+              "description": "emit input custom event"
+            },
+            {
+              "kind": "method",
+              "name": "clearInputValue",
+              "description": "clear input value on clear icon clicked"
+            },
+            {
+              "kind": "method",
+              "name": "dispatchInputEvent",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string | number"
+                  }
+                },
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "\"clear\" | \"input\""
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "description": "icon size",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "togglePasswordView",
+              "description": "Toggle Password view"
+            },
+            {
+              "kind": "method",
+              "name": "_onLabelSlotChange"
+            },
+            {
+              "kind": "method",
+              "name": "_onHelpSlotChange"
+            },
+            {
+              "kind": "field",
+              "name": "tooltipElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseEnter",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseLeave",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+              },
+              "default": "\"curved\"",
               "fieldName": "variant"
             },
             {
               "name": "category",
               "type": {
-                "text": "FIconButtonType | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
               "default": "\"fill\"",
               "fieldName": "category"
             },
+            {
+              "name": "state",
+              "type": {
+                "text": "FInputState | undefined"
+              },
+              "default": "\"default\"",
+              "fieldName": "state"
+            },
             {
               "name": "size",
               "type": {
-                "text": "FIconButtonSize | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
               "default": "\"medium\"",
               "fieldName": "size"
             },
             {
-              "name": "state",
+              "name": "type",
               "type": {
-                "text": "FIconButtonState | undefined"
+                "text": "\"text\" | \"number\" | \"email\" | \"password\" | \"url\" | \"tel\" | undefined"
               },
-              "default": "\"primary\"",
-              "fieldName": "state"
+              "default": "\"text\"",
+              "fieldName": "type"
             },
             {
-              "name": "counter",
+              "name": "value",
+              "type": {
+                "text": "string | number | undefined"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "counter"
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "icon-left",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "iconLeft"
+            },
+            {
+              "name": "icon-right",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "iconRight"
+            },
+            {
+              "name": "prefix",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "prefix"
+            },
+            {
+              "name": "suffix",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "suffix"
+            },
+            {
+              "name": "max-length",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "maxLength"
             },
             {
               "name": "loading",
@@ -6183,6 +6160,29 @@
               "default": "false",
               "fieldName": "disabled"
             },
+            {
+              "name": "clear",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "fieldName": "clear"
+            },
+            {
+              "name": "read-only",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "readOnly"
+            },
+            {
+              "name": "suffixWhen",
+              "type": {
+                "text": "FInputSuffixWhen | undefined"
+              },
+              "fieldName": "suffixWhen"
+            },
             {
               "name": "tooltip",
               "type": {
@@ -6204,10 +6204,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FIconButton",
+          "name": "FInput",
           "declaration": {
-            "name": "FIconButton",
-            "module": "src/components/f-icon-button/f-icon-button.ts"
+            "name": "FInput",
+            "module": "src/components/f-input/f-input.ts"
           }
         }
       ]
@@ -7247,1316 +7247,1110 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-search/f-search.ts",
+      "path": "src/components/f-select/f-select.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FSearch",
+          "name": "FSelect",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "_labelNodes",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
-              },
-              "default": "\"curved\"",
-              "attribute": "variant",
-              "reflects": true
+                "text": "NodeListOf<HTMLElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "category",
+              "name": "_hasLabel",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "boolean"
               },
-              "default": "\"fill\"",
-              "attribute": "category",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "result",
+              "name": "_helpNodes",
               "type": {
-                "text": "FSearchSuggestions | undefined"
-              },
-              "default": "[]",
-              "attribute": "result",
-              "reflects": true
+                "text": "NodeListOf<HTMLElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "_hasHelperText",
               "type": {
-                "text": "FSearchState | undefined"
+                "text": "boolean"
               },
-              "default": "\"default\"",
-              "attribute": "state",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "openDropdown",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "boolean"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "viewMoreTags",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "attribute": "value",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "[\"selected-scope\"]",
+              "name": "searchValue",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "attribute": "[\"selected-scope\"]",
-              "reflects": true
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "selectedOptions",
               "type": {
-                "text": "string | undefined"
+                "text": "FSelectOptions"
               },
-              "attribute": "placeholder",
-              "reflects": true
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "scope",
+              "name": "filteredOptions",
               "type": {
-                "text": "FSearchScope | undefined"
+                "text": "FSelectOptions"
               },
-              "default": "\"none\"",
-              "attribute": "scope",
-              "reflects": true
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "currentCursor",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "-1"
             },
             {
               "kind": "field",
-              "name": "clear",
+              "name": "currentGroupCursor",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number"
               },
-              "default": "true",
-              "attribute": "clear",
-              "reflects": true
+              "default": "-1"
             },
             {
               "kind": "field",
-              "name": "[\"search-button\"]",
+              "name": "optimizedHeight",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number"
               },
-              "default": "false",
-              "attribute": "[\"search-button\"]",
-              "reflects": true
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "preferredOpenDirection",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string"
+              },
+              "default": "\"below\""
             },
             {
               "kind": "field",
-              "name": "descriptionSlot",
+              "name": "optionsTop",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string"
+              },
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "helpSlot",
+              "name": "optionsBottom",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "string"
+              },
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "headerSection",
+              "name": "currentGroupOptionCursor",
               "type": {
-                "text": "FDiv"
-              }
+                "text": "number"
+              },
+              "default": "-1"
             },
             {
               "kind": "field",
-              "name": "helperTextSection",
+              "name": "inputElement",
               "type": {
-                "text": "FDiv"
+                "text": "HTMLInputElement"
               }
             },
             {
               "kind": "field",
-              "name": "_labelNodes",
+              "name": "wrapperElement",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
+                "text": "HTMLDivElement"
               }
             },
             {
               "kind": "field",
-              "name": "_descriptionNodes",
+              "name": "optionElement",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
+                "text": "HTMLDivElement"
               }
             },
             {
               "kind": "field",
-              "name": "_helpNodes",
+              "name": "type",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+                "text": "\"single\" | \"multiple\" | undefined"
+              },
+              "default": "\"single\"",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasLabel",
-              "description": "has label slot",
-              "readonly": true
+              "name": "variant",
+              "type": {
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+              },
+              "default": "\"curved\"",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasDescription",
-              "description": "has description slot",
-              "readonly": true
+              "name": "category",
+              "type": {
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+              },
+              "default": "\"fill\"",
+              "attribute": "category",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "hasHelperText",
-              "description": "has help slot",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ],
-              "description": "emit input custom event"
-            },
-            {
-              "kind": "method",
-              "name": "handleScopeSelection",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ],
-              "description": "emit input custom event for scope"
-            },
-            {
-              "kind": "method",
-              "name": "handleSearchClick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ],
-              "description": "emit search custom event"
-            },
-            {
-              "kind": "method",
-              "name": "clearInputValue",
-              "description": "clear input value on clear icon clicked"
-            },
-            {
-              "kind": "method",
-              "name": "dispatchInputEvent",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "string for value"
-                },
-                {
-                  "name": "scope",
-                  "default": "\"\"",
-                  "description": "string for scope value"
-                }
-              ]
+              "name": "state",
+              "type": {
+                "text": "FSelectState | undefined"
+              },
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "applyStyling",
-              "description": "set styling class",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "displayHelpSection",
-              "description": "conditional help section display for false spacing issue"
+              "name": "size",
+              "type": {
+                "text": "\"medium\" | \"small\" | undefined"
+              },
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "displayHeaderSection",
-              "description": "conditional header section display for false spacing issue"
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "FSelectOptions | string | undefined"
+              },
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltipElement",
+              "name": "options",
               "type": {
-                "text": "HTMLElement"
+                "text": "FSelectOptions"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "attribute": "options",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "placeholder",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "tooltip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "attribute": "placeholder",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseEnter",
+              "name": "optionTemplate",
               "type": {
-                "text": "() => void | undefined"
+                "text": "FSelectOptionTemplate | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "attribute": "option-template"
             },
             {
               "kind": "field",
-              "name": "mouseLeave",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
-              },
-              "default": "\"curved\"",
-              "fieldName": "variant"
-            },
-            {
-              "name": "category",
-              "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
-              },
-              "default": "\"fill\"",
-              "fieldName": "category"
-            },
-            {
-              "name": "result",
-              "type": {
-                "text": "FSearchSuggestions | undefined"
-              },
-              "default": "[]",
-              "fieldName": "result"
-            },
-            {
-              "name": "state",
-              "type": {
-                "text": "FSearchState | undefined"
-              },
-              "default": "\"default\"",
-              "fieldName": "state"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"medium\" | \"small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "fieldName": "size"
+              "name": "[\"option-template\"]"
             },
             {
-              "name": "value",
+              "kind": "field",
+              "name": "iconLeft",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "value"
+              "attribute": "icon-left",
+              "reflects": true
             },
             {
-              "name": "[\"selected-scope\"]",
+              "kind": "field",
+              "name": "height",
               "type": {
-                "text": "string | undefined"
+                "text": "FSelectHeightProp"
               },
-              "fieldName": "[\"selected-scope\"]"
+              "default": "180",
+              "attribute": "height",
+              "reflects": true
             },
             {
-              "name": "placeholder",
+              "kind": "field",
+              "name": "width",
               "type": {
-                "text": "string | undefined"
+                "text": "FSelectWidthProp | undefined"
               },
-              "fieldName": "placeholder"
+              "default": "\"fill-container\"",
+              "attribute": "width",
+              "reflects": true
             },
             {
-              "name": "scope",
+              "kind": "field",
+              "name": "loading",
               "type": {
-                "text": "FSearchScope | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"none\"",
-              "fieldName": "scope"
+              "default": "false",
+              "attribute": "loading",
+              "reflects": true
             },
             {
+              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "clear",
+              "kind": "field",
+              "name": "searchable",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
-              "fieldName": "clear"
+              "default": "false",
+              "attribute": "searchable",
+              "reflects": true
             },
             {
-              "name": "[\"search-button\"]",
+              "kind": "field",
+              "name": "clear",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "[\"search-button\"]"
-            },
-            {
-              "name": "tooltip",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "tooltip",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "FRoot",
-            "module": "/src/mixins/components/f-root/f-root"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FSearch",
-          "declaration": {
-            "name": "FSearch",
-            "module": "src/components/f-search/f-search.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-select/f-select.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FSelect",
-          "members": [
-            {
-              "kind": "field",
-              "name": "_labelNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+              "attribute": "clear",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_hasLabel",
+              "name": "checkbox",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "_helpNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+              "default": "false",
+              "attribute": "checkbox",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_hasHelperText",
+              "name": "createOption",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false"
+              "default": "false",
+              "attribute": "create-option",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "openDropdown",
+              "name": "selectionLimit",
               "type": {
-                "text": "boolean"
+                "text": "number"
               },
-              "default": "false"
+              "default": "2",
+              "attribute": "selection-limit",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "viewMoreTags",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "name": "iconSize",
+              "description": "icon size",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "searchValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\""
+              "name": "outsideClick"
             },
             {
               "kind": "field",
-              "name": "selectedOptions",
-              "type": {
-                "text": "FSelectOptions"
-              },
-              "default": "[]"
+              "name": "containerScroll"
             },
             {
-              "kind": "field",
-              "name": "filteredOptions",
-              "type": {
-                "text": "FSelectOptions"
-              },
-              "default": "[]"
+              "kind": "method",
+              "name": "applyOptionsStyle",
+              "parameters": [
+                {
+                  "name": "width",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "apply styling to f-select options wrapper."
             },
             {
-              "kind": "field",
-              "name": "currentCursor",
-              "type": {
-                "text": "number"
-              },
-              "default": "-1"
+              "kind": "method",
+              "name": "getIndex",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "FSelectSingleOption"
+                  }
+                }
+              ],
+              "description": "index search for the resepctive option"
             },
             {
-              "kind": "field",
-              "name": "currentGroupCursor",
-              "type": {
-                "text": "number"
-              },
-              "default": "-1"
+              "kind": "method",
+              "name": "getIndexInGroup",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "FSelectSingleOption"
+                  }
+                },
+                {
+                  "name": "group",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "index search for respective option of the respective group"
             },
             {
-              "kind": "field",
-              "name": "optimizedHeight",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
+              "kind": "method",
+              "name": "isSelected",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "FSelectOptionObject | string"
+                  }
+                }
+              ],
+              "description": "check selection for respective option."
             },
             {
-              "kind": "field",
-              "name": "preferredOpenDirection",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"below\""
+              "kind": "method",
+              "name": "isGroupSelection",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "FSelectSingleOption"
+                  }
+                },
+                {
+                  "name": "group",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "check selection for respective option of the respective group"
             },
             {
-              "kind": "field",
-              "name": "optionsTop",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\""
+              "kind": "method",
+              "name": "clearInputValue",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ],
+              "description": "clear input value on clear icon clicked"
             },
             {
-              "kind": "field",
-              "name": "optionsBottom",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\""
+              "kind": "method",
+              "name": "clearSelectionInGroups",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ],
+              "description": "clear te search string"
             },
             {
-              "kind": "field",
-              "name": "currentGroupOptionCursor",
-              "type": {
-                "text": "number"
-              },
-              "default": "-1"
+              "kind": "method",
+              "name": "getCheckedValue",
+              "parameters": [
+                {
+                  "name": "group",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "check if all values of group are selected or not or are in idetereminate state"
             },
             {
-              "kind": "field",
-              "name": "inputElement",
-              "type": {
-                "text": "HTMLInputElement"
-              }
+              "kind": "method",
+              "name": "getSlicedSelections",
+              "parameters": [
+                {
+                  "name": "optionList",
+                  "type": {
+                    "text": "FSelectOptionsProp"
+                  }
+                }
+              ],
+              "description": "get sliced array to show selected options"
             },
             {
-              "kind": "field",
-              "name": "wrapperElement",
-              "type": {
-                "text": "HTMLDivElement"
-              }
+              "kind": "method",
+              "name": "applyInputStyle",
+              "description": "change width of input inside f-select according to searchable prop"
             },
             {
-              "kind": "field",
-              "name": "optionElement",
-              "type": {
-                "text": "HTMLDivElement"
-              }
+              "kind": "method",
+              "name": "getConcaticateGroupOptions",
+              "parameters": [
+                {
+                  "name": "array",
+                  "type": {
+                    "text": "FSelectOptionsGroup"
+                  }
+                }
+              ],
+              "description": "get concatinated array from groups"
             },
             {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "\"single\" | \"multiple\" | undefined"
-              },
-              "default": "\"single\"",
-              "attribute": "type",
-              "reflects": true
+              "kind": "method",
+              "name": "clearFilterSearchString",
+              "description": "clear search string"
             },
             {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
-              },
-              "default": "\"curved\"",
-              "attribute": "variant",
-              "reflects": true
+              "kind": "method",
+              "name": "isStringsArray",
+              "parameters": [
+                {
+                  "name": "arr",
+                  "type": {
+                    "text": "unknown[]"
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "category",
-              "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
-              },
-              "default": "\"fill\"",
-              "attribute": "category",
-              "reflects": true
+              "kind": "method",
+              "name": "createNewOption",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ],
+              "description": "Create New Option when option not present"
             },
             {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "FSelectState | undefined"
-              },
-              "default": "\"default\"",
-              "attribute": "state",
-              "reflects": true
+              "kind": "method",
+              "name": "validateProperties",
+              "description": "validate properties"
             },
             {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"medium\" | \"small\" | undefined"
-              },
-              "attribute": "size",
-              "reflects": true
+              "kind": "method",
+              "name": "updateDimentions",
+              "description": "options wrapper dimentions update on the basis of window screen"
             },
             {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "FSelectOptions | string | undefined"
-              },
-              "attribute": "value",
-              "reflects": true
+              "kind": "method",
+              "name": "_onLabelSlotChange"
             },
             {
-              "kind": "field",
-              "name": "options",
-              "type": {
-                "text": "FSelectOptions"
-              },
-              "attribute": "options",
-              "reflects": true
+              "kind": "method",
+              "name": "_onHelpSlotChange"
             },
             {
               "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "placeholder",
-              "reflects": true
+              "name": "singleSelectionStyle",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "getOptionQaId",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "FSelectSingleOption"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "optionTemplate",
-              "type": {
-                "text": "FSelectOptionTemplate | undefined"
-              },
-              "attribute": "option-template"
+              "name": "handleDropDownOpen",
+              "default": "handleDropDownOpen"
             },
             {
               "kind": "field",
-              "name": "[\"option-template\"]"
+              "name": "handleDropDownClose",
+              "default": "handleDropDownClose"
             },
             {
               "kind": "field",
-              "name": "iconLeft",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "icon-left",
-              "reflects": true
+              "name": "handleOptionSelection",
+              "default": "handleOptionSelection"
             },
             {
               "kind": "field",
-              "name": "height",
+              "name": "handleSelectionGroup",
+              "default": "handleSelectionGroup"
+            },
+            {
+              "kind": "field",
+              "name": "handleRemoveGroupSelection",
+              "default": "handleRemoveGroupSelection"
+            },
+            {
+              "kind": "field",
+              "name": "handleCheckboxInput",
+              "default": "handleCheckboxInput"
+            },
+            {
+              "kind": "field",
+              "name": "handleCheckboxGroup",
+              "default": "handleCheckboxGroup"
+            },
+            {
+              "kind": "field",
+              "name": "handleSelectAll",
+              "default": "handleSelectAll"
+            },
+            {
+              "kind": "field",
+              "name": "handleViewMoreTags",
+              "default": "handleViewMoreTags"
+            },
+            {
+              "kind": "field",
+              "name": "handleInput",
+              "default": "handleInput"
+            },
+            {
+              "kind": "field",
+              "name": "handleBlur",
+              "default": "handleBlur"
+            },
+            {
+              "kind": "field",
+              "name": "renderSingleSelection",
+              "default": "renderSingleSelection"
+            },
+            {
+              "kind": "field",
+              "name": "renderMultipleSelectionTag",
+              "default": "renderMultipleSelectionTag"
+            },
+            {
+              "kind": "field",
+              "name": "tooltipElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseEnter",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseLeave",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"single\" | \"multiple\" | undefined"
+              },
+              "default": "\"single\"",
+              "fieldName": "type"
+            },
+            {
+              "name": "variant",
+              "type": {
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+              },
+              "default": "\"curved\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "category",
+              "type": {
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+              },
+              "default": "\"fill\"",
+              "fieldName": "category"
+            },
+            {
+              "name": "state",
+              "type": {
+                "text": "FSelectState | undefined"
+              },
+              "default": "\"default\"",
+              "fieldName": "state"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"medium\" | \"small\" | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "FSelectOptions | string | undefined"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "options",
+              "type": {
+                "text": "FSelectOptions"
+              },
+              "fieldName": "options"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "option-template",
+              "type": {
+                "text": "FSelectOptionTemplate | undefined"
+              },
+              "fieldName": "optionTemplate"
+            },
+            {
+              "name": "icon-left",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "iconLeft"
+            },
+            {
+              "name": "height",
               "type": {
                 "text": "FSelectHeightProp"
               },
               "default": "180",
-              "attribute": "height",
-              "reflects": true
+              "fieldName": "height"
             },
             {
-              "kind": "field",
               "name": "width",
               "type": {
                 "text": "FSelectWidthProp | undefined"
               },
               "default": "\"fill-container\"",
-              "attribute": "width",
-              "reflects": true
+              "fieldName": "width"
             },
             {
-              "kind": "field",
               "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "loading",
-              "reflects": true
+              "fieldName": "loading"
             },
             {
-              "kind": "field",
               "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
               "name": "searchable",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "searchable",
-              "reflects": true
+              "fieldName": "searchable"
             },
             {
-              "kind": "field",
               "name": "clear",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "clear",
-              "reflects": true
+              "fieldName": "clear"
             },
             {
-              "kind": "field",
               "name": "checkbox",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "checkbox",
-              "reflects": true
+              "fieldName": "checkbox"
             },
             {
-              "kind": "field",
-              "name": "createOption",
+              "name": "create-option",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "create-option",
-              "reflects": true
+              "fieldName": "createOption"
             },
             {
-              "kind": "field",
-              "name": "selectionLimit",
+              "name": "selection-limit",
               "type": {
                 "text": "number"
               },
               "default": "2",
-              "attribute": "selection-limit",
-              "reflects": true
+              "fieldName": "selectionLimit"
             },
             {
-              "kind": "field",
-              "name": "iconSize",
-              "description": "icon size",
-              "readonly": true
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "tooltip",
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "FRoot",
+            "module": "/src/mixins/components/f-root/f-root"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FSelect",
+          "declaration": {
+            "name": "FSelect",
+            "module": "src/components/f-select/f-select.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-select/handlers.ts",
+      "declarations": [
+        {
+          "kind": "function",
+          "name": "handleDropDownOpen",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
             },
             {
-              "kind": "field",
-              "name": "outsideClick"
-            },
-            {
-              "kind": "field",
-              "name": "containerScroll"
-            },
-            {
-              "kind": "method",
-              "name": "applyOptionsStyle",
-              "parameters": [
-                {
-                  "name": "width",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ],
-              "description": "apply styling to f-select options wrapper."
-            },
-            {
-              "kind": "method",
-              "name": "getIndex",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "FSelectSingleOption"
-                  }
-                }
-              ],
-              "description": "index search for the resepctive option"
-            },
-            {
-              "kind": "method",
-              "name": "getIndexInGroup",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "FSelectSingleOption"
-                  }
-                },
-                {
-                  "name": "group",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "index search for respective option of the respective group"
-            },
-            {
-              "kind": "method",
-              "name": "isSelected",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "FSelectOptionObject | string"
-                  }
-                }
-              ],
-              "description": "check selection for respective option."
-            },
-            {
-              "kind": "method",
-              "name": "isGroupSelection",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "FSelectSingleOption"
-                  }
-                },
-                {
-                  "name": "group",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "check selection for respective option of the respective group"
-            },
-            {
-              "kind": "method",
-              "name": "clearInputValue",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ],
-              "description": "clear input value on clear icon clicked"
-            },
-            {
-              "kind": "method",
-              "name": "clearSelectionInGroups",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ],
-              "description": "clear te search string"
-            },
-            {
-              "kind": "method",
-              "name": "getCheckedValue",
-              "parameters": [
-                {
-                  "name": "group",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "check if all values of group are selected or not or are in idetereminate state"
-            },
-            {
-              "kind": "method",
-              "name": "getSlicedSelections",
-              "parameters": [
-                {
-                  "name": "optionList",
-                  "type": {
-                    "text": "FSelectOptionsProp"
-                  }
-                }
-              ],
-              "description": "get sliced array to show selected options"
-            },
-            {
-              "kind": "method",
-              "name": "applyInputStyle",
-              "description": "change width of input inside f-select according to searchable prop"
-            },
-            {
-              "kind": "method",
-              "name": "getConcaticateGroupOptions",
-              "parameters": [
-                {
-                  "name": "array",
-                  "type": {
-                    "text": "FSelectOptionsGroup"
-                  }
-                }
-              ],
-              "description": "get concatinated array from groups"
-            },
-            {
-              "kind": "method",
-              "name": "clearFilterSearchString",
-              "description": "clear search string"
-            },
-            {
-              "kind": "method",
-              "name": "isStringsArray",
-              "parameters": [
-                {
-                  "name": "arr",
-                  "type": {
-                    "text": "unknown[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "createNewOption",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ],
-              "description": "Create New Option when option not present"
-            },
-            {
-              "kind": "method",
-              "name": "validateProperties",
-              "description": "validate properties"
-            },
-            {
-              "kind": "method",
-              "name": "updateDimentions",
-              "description": "options wrapper dimentions update on the basis of window screen"
-            },
-            {
-              "kind": "method",
-              "name": "_onLabelSlotChange"
-            },
-            {
-              "kind": "method",
-              "name": "_onHelpSlotChange"
-            },
-            {
-              "kind": "field",
-              "name": "singleSelectionStyle",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "getOptionQaId",
-              "parameters": [
-                {
-                  "name": "option",
-                  "type": {
-                    "text": "FSelectSingleOption"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "handleDropDownOpen",
-              "default": "handleDropDownOpen"
-            },
-            {
-              "kind": "field",
-              "name": "handleDropDownClose",
-              "default": "handleDropDownClose"
-            },
-            {
-              "kind": "field",
-              "name": "handleOptionSelection",
-              "default": "handleOptionSelection"
-            },
-            {
-              "kind": "field",
-              "name": "handleSelectionGroup",
-              "default": "handleSelectionGroup"
-            },
-            {
-              "kind": "field",
-              "name": "handleRemoveGroupSelection",
-              "default": "handleRemoveGroupSelection"
-            },
-            {
-              "kind": "field",
-              "name": "handleCheckboxInput",
-              "default": "handleCheckboxInput"
-            },
-            {
-              "kind": "field",
-              "name": "handleCheckboxGroup",
-              "default": "handleCheckboxGroup"
-            },
-            {
-              "kind": "field",
-              "name": "handleSelectAll",
-              "default": "handleSelectAll"
-            },
-            {
-              "kind": "field",
-              "name": "handleViewMoreTags",
-              "default": "handleViewMoreTags"
-            },
-            {
-              "kind": "field",
-              "name": "handleInput",
-              "default": "handleInput"
-            },
-            {
-              "kind": "field",
-              "name": "handleBlur",
-              "default": "handleBlur"
-            },
-            {
-              "kind": "field",
-              "name": "renderSingleSelection",
-              "default": "renderSingleSelection"
-            },
+              "name": "e",
+              "type": {
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "open options menu"
+        },
+        {
+          "kind": "function",
+          "name": "handleDropDownClose",
+          "parameters": [
             {
-              "kind": "field",
-              "name": "renderMultipleSelectionTag",
-              "default": "renderMultipleSelectionTag"
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
             },
             {
-              "kind": "field",
-              "name": "tooltipElement",
+              "name": "e",
               "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
+                "text": "MouseEvent"
               }
             },
             {
-              "kind": "field",
-              "name": "tooltip",
+              "name": "clearSearch",
+              "default": "true"
+            }
+          ],
+          "description": "close options menu"
+        },
+        {
+          "kind": "function",
+          "name": "handleOptionSelection",
+          "parameters": [
+            {
+              "name": "this",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "tooltip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
+                "text": "FSelect"
               }
             },
             {
-              "kind": "field",
-              "name": "mouseEnter",
+              "name": "option",
               "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
+                "text": "FSelectSingleOption"
               }
             },
             {
-              "kind": "field",
-              "name": "mouseLeave",
+              "name": "e",
               "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
+                "text": "MouseEvent"
               }
             }
           ],
-          "attributes": [
+          "description": "action for selection of options if the options is in the form of array"
+        },
+        {
+          "kind": "function",
+          "name": "handleSelectionGroup",
+          "parameters": [
             {
-              "name": "type",
+              "name": "this",
               "type": {
-                "text": "\"single\" | \"multiple\" | undefined"
-              },
-              "default": "\"single\"",
-              "fieldName": "type"
+                "text": "FSelect"
+              }
             },
             {
-              "name": "variant",
+              "name": "option",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
-              },
-              "default": "\"curved\"",
-              "fieldName": "variant"
+                "text": "FSelectSingleOption"
+              }
             },
             {
-              "name": "category",
+              "name": "group",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
-              },
-              "default": "\"fill\"",
-              "fieldName": "category"
+                "text": "string"
+              }
             },
             {
-              "name": "state",
+              "name": "e",
               "type": {
-                "text": "FSelectState | undefined"
-              },
-              "default": "\"default\"",
-              "fieldName": "state"
-            },
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "action for selection of options if the options is in the form of groups"
+        },
+        {
+          "kind": "function",
+          "name": "handleRemoveGroupSelection",
+          "parameters": [
             {
-              "name": "size",
+              "name": "this",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
-              },
-              "fieldName": "size"
+                "text": "FSelect"
+              }
             },
             {
-              "name": "value",
+              "name": "option",
               "type": {
-                "text": "FSelectOptions | string | undefined"
-              },
-              "fieldName": "value"
+                "text": "FSelectSingleOption"
+              }
             },
             {
-              "name": "options",
+              "name": "e",
+              "type": {
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "remove selection option (in group) when f-tag is clicked"
+        },
+        {
+          "kind": "function",
+          "name": "handleCheckboxInput",
+          "parameters": [
+            {
+              "name": "this",
               "type": {
-                "text": "FSelectOptions"
-              },
-              "fieldName": "options"
+                "text": "FSelect"
+              }
             },
             {
-              "name": "placeholder",
+              "name": "option",
               "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "placeholder"
+                "text": "FSelectSingleOption"
+              }
             },
             {
-              "name": "option-template",
+              "name": "e",
               "type": {
-                "text": "FSelectOptionTemplate | undefined"
-              },
-              "fieldName": "optionTemplate"
-            },
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "handle click on checkbox"
+        },
+        {
+          "kind": "function",
+          "name": "handleCheckboxGroup",
+          "parameters": [
             {
-              "name": "icon-left",
+              "name": "this",
               "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "iconLeft"
+                "text": "FSelect"
+              }
             },
             {
-              "name": "height",
+              "name": "option",
               "type": {
-                "text": "FSelectHeightProp"
-              },
-              "default": "180",
-              "fieldName": "height"
+                "text": "FSelectSingleOption"
+              }
             },
             {
-              "name": "width",
+              "name": "group",
               "type": {
-                "text": "FSelectWidthProp | undefined"
-              },
-              "default": "\"fill-container\"",
-              "fieldName": "width"
+                "text": "string"
+              }
             },
             {
-              "name": "loading",
+              "name": "e",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "loading"
-            },
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "handle click on checkbox in group"
+        },
+        {
+          "kind": "function",
+          "name": "handleSelectAll",
+          "parameters": [
             {
-              "name": "disabled",
+              "name": "this",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "disabled"
+                "text": "FSelect"
+              }
             },
             {
-              "name": "searchable",
+              "name": "e",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "searchable"
+                "text": "MouseEvent"
+              }
             },
             {
-              "name": "clear",
+              "name": "group",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "clear"
-            },
+                "text": "string"
+              }
+            }
+          ],
+          "description": "select all options inside a particular group"
+        },
+        {
+          "kind": "function",
+          "name": "handleViewMoreTags",
+          "parameters": [
             {
-              "name": "checkbox",
+              "name": "this",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "checkbox"
+                "text": "FSelect"
+              }
             },
             {
-              "name": "create-option",
+              "name": "e",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "createOption"
-            },
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "hide/show f-tags when multiple options are selected"
+        },
+        {
+          "kind": "function",
+          "name": "handleInput",
+          "parameters": [
             {
-              "name": "selection-limit",
+              "name": "this",
               "type": {
-                "text": "number"
-              },
-              "default": "2",
-              "fieldName": "selectionLimit"
+                "text": "FSelect"
+              }
             },
             {
-              "name": "tooltip",
+              "name": "e",
               "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "tooltip",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
+                "text": "InputEvent"
               }
             }
           ],
-          "superclass": {
-            "name": "FRoot",
-            "module": "/src/mixins/components/f-root/f-root"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FSelect",
-          "declaration": {
-            "name": "FSelect",
-            "module": "src/components/f-select/f-select.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-select/handlers.ts",
-      "declarations": [
+          "description": "emit input custom event for option selection"
+        },
         {
           "kind": "function",
-          "name": "handleDropDownOpen",
+          "name": "handleBlur",
           "parameters": [
             {
               "name": "this",
@@ -8567,38 +8361,122 @@
             {
               "name": "e",
               "type": {
-                "text": "MouseEvent"
+                "text": "FocusEvent"
               }
             }
-          ],
-          "description": "open options menu"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "handleDropDownOpen",
+          "declaration": {
+            "name": "handleDropDownOpen",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleDropDownClose",
+          "declaration": {
+            "name": "handleDropDownClose",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleOptionSelection",
+          "declaration": {
+            "name": "handleOptionSelection",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleSelectionGroup",
+          "declaration": {
+            "name": "handleSelectionGroup",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleRemoveGroupSelection",
+          "declaration": {
+            "name": "handleRemoveGroupSelection",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleCheckboxInput",
+          "declaration": {
+            "name": "handleCheckboxInput",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleCheckboxGroup",
+          "declaration": {
+            "name": "handleCheckboxGroup",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleSelectAll",
+          "declaration": {
+            "name": "handleSelectAll",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleViewMoreTags",
+          "declaration": {
+            "name": "handleViewMoreTags",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleInput",
+          "declaration": {
+            "name": "handleInput",
+            "module": "src/components/f-select/handlers.ts"
+          }
         },
+        {
+          "kind": "js",
+          "name": "handleBlur",
+          "declaration": {
+            "name": "handleBlur",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-select/render.ts",
+      "declarations": [
         {
           "kind": "function",
-          "name": "handleDropDownClose",
+          "name": "render",
           "parameters": [
             {
               "name": "this",
               "type": {
                 "text": "FSelect"
               }
-            },
-            {
-              "name": "e",
-              "type": {
-                "text": "MouseEvent"
-              }
-            },
-            {
-              "name": "clearSearch",
-              "default": "true"
             }
-          ],
-          "description": "close options menu"
+          ]
         },
         {
           "kind": "function",
-          "name": "handleOptionSelection",
+          "name": "renderSingleSelection",
           "parameters": [
             {
               "name": "this",
@@ -8611,19 +8489,12 @@
               "type": {
                 "text": "FSelectSingleOption"
               }
-            },
-            {
-              "name": "e",
-              "type": {
-                "text": "MouseEvent"
-              }
             }
-          ],
-          "description": "action for selection of options if the options is in the form of array"
+          ]
         },
         {
           "kind": "function",
-          "name": "handleSelectionGroup",
+          "name": "renderMultipleSelectionTag",
           "parameters": [
             {
               "name": "this",
@@ -8636,379 +8507,314 @@
               "type": {
                 "text": "FSelectSingleOption"
               }
-            },
-            {
-              "name": "group",
-              "type": {
-                "text": "string"
-              }
-            },
-            {
-              "name": "e",
-              "type": {
-                "text": "MouseEvent"
-              }
             }
-          ],
-          "description": "action for selection of options if the options is in the form of groups"
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "default",
+          "declaration": {
+            "name": "render",
+            "module": "src/components/f-select/render.ts"
+          }
         },
         {
-          "kind": "function",
-          "name": "handleRemoveGroupSelection",
-          "parameters": [
+          "kind": "js",
+          "name": "renderSingleSelection",
+          "declaration": {
+            "name": "renderSingleSelection",
+            "module": "src/components/f-select/render.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "renderMultipleSelectionTag",
+          "declaration": {
+            "name": "renderMultipleSelectionTag",
+            "module": "src/components/f-select/render.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-search/f-search.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FSearch",
+          "members": [
             {
-              "name": "this",
+              "kind": "field",
+              "name": "variant",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+              },
+              "default": "\"curved\"",
+              "attribute": "variant",
+              "reflects": true
             },
             {
-              "name": "option",
+              "kind": "field",
+              "name": "category",
               "type": {
-                "text": "FSelectSingleOption"
-              }
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+              },
+              "default": "\"fill\"",
+              "attribute": "category",
+              "reflects": true
             },
             {
-              "name": "e",
-              "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "remove selection option (in group) when f-tag is clicked"
-        },
-        {
-          "kind": "function",
-          "name": "handleCheckboxInput",
-          "parameters": [
-            {
-              "name": "this",
+              "kind": "field",
+              "name": "result",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "FSearchSuggestions | undefined"
+              },
+              "default": "[]",
+              "attribute": "result",
+              "reflects": true
             },
             {
-              "name": "option",
+              "kind": "field",
+              "name": "state",
               "type": {
-                "text": "FSelectSingleOption"
-              }
+                "text": "FSearchState | undefined"
+              },
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "handle click on checkbox"
-        },
-        {
-          "kind": "function",
-          "name": "handleCheckboxGroup",
-          "parameters": [
+                "text": "\"medium\" | \"small\" | undefined"
+              },
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "string | undefined"
+              },
+              "attribute": "value",
+              "reflects": true
             },
             {
-              "name": "option",
+              "kind": "field",
+              "name": "[\"selected-scope\"]",
               "type": {
-                "text": "FSelectSingleOption"
-              }
+                "text": "string | undefined"
+              },
+              "attribute": "[\"selected-scope\"]",
+              "reflects": true
             },
             {
-              "name": "group",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
-                "text": "string"
-              }
+                "text": "string | undefined"
+              },
+              "attribute": "placeholder",
+              "reflects": true
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "scope",
               "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "handle click on checkbox in group"
-        },
-        {
-          "kind": "function",
-          "name": "handleSelectAll",
-          "parameters": [
+                "text": "FSearchScope | undefined"
+              },
+              "default": "\"none\"",
+              "attribute": "scope",
+              "reflects": true
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "clear",
               "type": {
-                "text": "MouseEvent"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "attribute": "clear",
+              "reflects": true
             },
             {
-              "name": "group",
+              "kind": "field",
+              "name": "[\"search-button\"]",
               "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "select all options inside a particular group"
-        },
-        {
-          "kind": "function",
-          "name": "handleViewMoreTags",
-          "parameters": [
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "[\"search-button\"]",
+              "reflects": true
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "labelSlot",
               "type": {
-                "text": "FSelect"
+                "text": "HTMLElement"
               }
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "descriptionSlot",
               "type": {
-                "text": "MouseEvent"
+                "text": "HTMLElement"
               }
-            }
-          ],
-          "description": "hide/show f-tags when multiple options are selected"
-        },
-        {
-          "kind": "function",
-          "name": "handleInput",
-          "parameters": [
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "helpSlot",
               "type": {
-                "text": "FSelect"
+                "text": "HTMLElement"
               }
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "headerSection",
               "type": {
-                "text": "InputEvent"
+                "text": "FDiv"
               }
-            }
-          ],
-          "description": "emit input custom event for option selection"
-        },
-        {
-          "kind": "function",
-          "name": "handleBlur",
-          "parameters": [
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "helperTextSection",
               "type": {
-                "text": "FSelect"
+                "text": "FDiv"
               }
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "_labelNodes",
               "type": {
-                "text": "FocusEvent"
+                "text": "NodeListOf<HTMLElement>"
               }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "handleDropDownOpen",
-          "declaration": {
-            "name": "handleDropDownOpen",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleDropDownClose",
-          "declaration": {
-            "name": "handleDropDownClose",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleOptionSelection",
-          "declaration": {
-            "name": "handleOptionSelection",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleSelectionGroup",
-          "declaration": {
-            "name": "handleSelectionGroup",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleRemoveGroupSelection",
-          "declaration": {
-            "name": "handleRemoveGroupSelection",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleCheckboxInput",
-          "declaration": {
-            "name": "handleCheckboxInput",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleCheckboxGroup",
-          "declaration": {
-            "name": "handleCheckboxGroup",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleSelectAll",
-          "declaration": {
-            "name": "handleSelectAll",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleViewMoreTags",
-          "declaration": {
-            "name": "handleViewMoreTags",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleInput",
-          "declaration": {
-            "name": "handleInput",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "handleBlur",
-          "declaration": {
-            "name": "handleBlur",
-            "module": "src/components/f-select/handlers.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-select/render.ts",
-      "declarations": [
-        {
-          "kind": "function",
-          "name": "render",
-          "parameters": [
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "_descriptionNodes",
               "type": {
-                "text": "FSelect"
+                "text": "NodeListOf<HTMLElement>"
               }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "renderSingleSelection",
-          "parameters": [
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "_helpNodes",
               "type": {
-                "text": "FSelect"
+                "text": "NodeListOf<HTMLElement>"
               }
             },
             {
-              "name": "option",
-              "type": {
-                "text": "FSelectSingleOption"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "renderMultipleSelectionTag",
-          "parameters": [
+              "kind": "field",
+              "name": "hasLabel",
+              "description": "has label slot",
+              "readonly": true
+            },
             {
-              "name": "this",
-              "type": {
-                "text": "FSelect"
-              }
+              "kind": "field",
+              "name": "hasDescription",
+              "description": "has description slot",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "hasHelperText",
+              "description": "has help slot",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ],
+              "description": "emit input custom event"
+            },
+            {
+              "kind": "method",
+              "name": "handleScopeSelection",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ],
+              "description": "emit input custom event for scope"
+            },
+            {
+              "kind": "method",
+              "name": "handleSearchClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ],
+              "description": "emit search custom event"
+            },
+            {
+              "kind": "method",
+              "name": "clearInputValue",
+              "description": "clear input value on clear icon clicked"
+            },
+            {
+              "kind": "method",
+              "name": "dispatchInputEvent",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "string for value"
+                },
+                {
+                  "name": "scope",
+                  "default": "\"\"",
+                  "description": "string for scope value"
+                }
+              ]
             },
-            {
-              "name": "option",
-              "type": {
-                "text": "FSelectSingleOption"
-              }
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "default",
-          "declaration": {
-            "name": "render",
-            "module": "src/components/f-select/render.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "renderSingleSelection",
-          "declaration": {
-            "name": "renderSingleSelection",
-            "module": "src/components/f-select/render.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "renderMultipleSelectionTag",
-          "declaration": {
-            "name": "renderMultipleSelectionTag",
-            "module": "src/components/f-select/render.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-spacer/f-spacer.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FSpacer",
-          "members": [
             {
               "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "FSpacerSizeProp | undefined"
-              },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
+              "name": "applyStyling",
+              "description": "set styling class",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "applySize",
-              "description": "Applying height,width related style, based on size property"
+              "name": "displayHelpSection",
+              "description": "conditional help section display for false spacing issue"
+            },
+            {
+              "kind": "method",
+              "name": "displayHeaderSection",
+              "description": "conditional header section display for false spacing issue"
             },
             {
               "kind": "field",
@@ -9059,148 +8865,150 @@
           ],
           "attributes": [
             {
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "FSpacerSizeProp | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
-              "default": "\"medium\"",
-              "fieldName": "size"
+              "default": "\"curved\"",
+              "fieldName": "variant"
             },
             {
-              "name": "tooltip",
+              "name": "category",
               "type": {
-                "text": "string | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "fieldName": "tooltip",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "FRoot",
-            "module": "/src/mixins/components/f-root/f-root"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FSpacer",
-          "declaration": {
-            "name": "FSpacer",
-            "module": "src/components/f-spacer/f-spacer.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-switch/f-switch.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FSwitch",
-          "members": [
+              "default": "\"fill\"",
+              "fieldName": "category"
+            },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "result",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FSearchSuggestions | undefined"
               },
-              "default": "false",
-              "attribute": "value",
-              "reflects": true
+              "default": "[]",
+              "fieldName": "result"
             },
             {
-              "kind": "field",
               "name": "state",
               "type": {
-                "text": "FSwitchState | undefined"
+                "text": "FSearchState | undefined"
               },
               "default": "\"default\"",
-              "attribute": "state",
-              "reflects": true
+              "fieldName": "state"
             },
             {
-              "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
-              "attribute": "size",
-              "reflects": true
+              "default": "\"medium\"",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "switchSlots",
+              "name": "[\"selected-scope\"]",
               "type": {
-                "text": "FDiv"
-              }
+                "text": "string | undefined"
+              },
+              "fieldName": "[\"selected-scope\"]"
             },
             {
-              "kind": "field",
-              "name": "_labelNodes",
+              "name": "placeholder",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder"
             },
             {
-              "kind": "field",
-              "name": "_subtitleNodes",
+              "name": "scope",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+                "text": "FSearchScope | undefined"
+              },
+              "default": "\"none\"",
+              "fieldName": "scope"
             },
             {
-              "kind": "field",
-              "name": "_iconTooltipNodes",
+              "name": "disabled",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
-              "kind": "field",
-              "name": "hasLabel",
-              "description": "has label slot",
-              "readonly": true
+              "name": "clear",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "fieldName": "clear"
             },
             {
-              "kind": "field",
-              "name": "hasSubtitle",
-              "description": "has subtitle slot",
-              "readonly": true
+              "name": "[\"search-button\"]",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "[\"search-button\"]"
             },
             {
-              "kind": "field",
-              "name": "hasIconTooltip",
-              "description": "has icon-tooltip slot",
-              "readonly": true
-            },
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "tooltip",
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "FRoot",
+            "module": "/src/mixins/components/f-root/f-root"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FSearch",
+          "declaration": {
+            "name": "FSearch",
+            "module": "src/components/f-search/f-search.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-spacer/f-spacer.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FSpacer",
+          "members": [
             {
-              "kind": "method",
-              "name": "handleInput",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ],
-              "description": "emit event."
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "FSpacerSizeProp | undefined"
+              },
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "applySize",
+              "description": "Applying height,width related style, based on size property"
             },
             {
               "kind": "field",
@@ -9250,37 +9058,14 @@
             }
           ],
           "attributes": [
-            {
-              "name": "value",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "value"
-            },
-            {
-              "name": "state",
-              "type": {
-                "text": "FSwitchState | undefined"
-              },
-              "default": "\"default\"",
-              "fieldName": "state"
-            },
             {
               "name": "size",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "FSpacerSizeProp | undefined"
               },
+              "default": "\"medium\"",
               "fieldName": "size"
             },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            },
             {
               "name": "tooltip",
               "type": {
@@ -9302,10 +9087,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FSwitch",
+          "name": "FSpacer",
           "declaration": {
-            "name": "FSwitch",
-            "module": "src/components/f-switch/f-switch.ts"
+            "name": "FSpacer",
+            "module": "src/components/f-spacer/f-spacer.ts"
           }
         }
       ]
@@ -9932,7 +9717,222 @@
               "type": {
                 "text": "FSuggestSuffixWhen | undefined"
               },
-              "fieldName": "suffixWhen"
+              "fieldName": "suffixWhen"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "tooltip",
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "FRoot",
+            "module": "/src/mixins/components/f-root/f-root"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FSuggest",
+          "declaration": {
+            "name": "FSuggest",
+            "module": "src/components/f-suggest/f-suggest.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-switch/f-switch.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FSwitch",
+          "members": [
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "FSwitchState | undefined"
+              },
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | undefined"
+              },
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "switchSlots",
+              "type": {
+                "text": "FDiv"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_labelNodes",
+              "type": {
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_subtitleNodes",
+              "type": {
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_iconTooltipNodes",
+              "type": {
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasLabel",
+              "description": "has label slot",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "hasSubtitle",
+              "description": "has subtitle slot",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "hasIconTooltip",
+              "description": "has icon-tooltip slot",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "InputEvent"
+                  }
+                }
+              ],
+              "description": "emit event."
+            },
+            {
+              "kind": "field",
+              "name": "tooltipElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseEnter",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseLeave",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "value",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "value"
+            },
+            {
+              "name": "state",
+              "type": {
+                "text": "FSwitchState | undefined"
+              },
+              "default": "\"default\"",
+              "fieldName": "state"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "disabled"
             },
             {
               "name": "tooltip",
@@ -9955,10 +9955,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FSuggest",
+          "name": "FSwitch",
           "declaration": {
-            "name": "FSuggest",
-            "module": "src/components/f-suggest/f-suggest.ts"
+            "name": "FSwitch",
+            "module": "src/components/f-switch/f-switch.ts"
           }
         }
       ]
@@ -10189,6 +10189,128 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-tab-content/f-tab-content.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FTabContent",
+          "members": [
+            {
+              "kind": "field",
+              "name": "transition",
+              "type": {
+                "text": "\"fade\" | \"slide\" | \"none\" | undefined"
+              },
+              "default": "\"none\"",
+              "attribute": "transition",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "duration",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "200",
+              "attribute": "duration",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "tooltipElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseEnter",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "mouseLeave",
+              "type": {
+                "text": "() => void | undefined"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "transition",
+              "type": {
+                "text": "\"fade\" | \"slide\" | \"none\" | undefined"
+              },
+              "default": "\"none\"",
+              "fieldName": "transition"
+            },
+            {
+              "name": "duration",
+              "type": {
+                "text": "number | undefined"
+              },
+              "default": "200",
+              "fieldName": "duration"
+            },
+            {
+              "name": "tooltip",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "tooltip",
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "superclass": {
+            "name": "FRoot",
+            "module": "/src/mixins/components/f-root/f-root"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FTabContent",
+          "declaration": {
+            "name": "FTabContent",
+            "module": "src/components/f-tab-content/f-tab-content.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/f-tab-node/f-tab-node.ts",
@@ -10587,135 +10709,12 @@
               "fieldName": "disabled"
             },
             {
-              "name": "clickable",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "clickable"
-            },
-            {
-              "name": "tooltip",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "tooltip",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "superclass": {
-            "name": "FRoot",
-            "module": "/src/mixins/components/f-root/f-root"
-          },
-          "summary": "Tags allow users to categorize the content. They can be used to add metadata to an element such as category, or property or show a status."
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FTag",
-          "declaration": {
-            "name": "FTag",
-            "module": "src/components/f-tag/f-tag.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-tab-content/f-tab-content.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FTabContent",
-          "members": [
-            {
-              "kind": "field",
-              "name": "transition",
-              "type": {
-                "text": "\"fade\" | \"slide\" | \"none\" | undefined"
-              },
-              "default": "\"none\"",
-              "attribute": "transition",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "duration",
-              "type": {
-                "text": "number | undefined"
-              },
-              "default": "200",
-              "attribute": "duration",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "tooltipElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltip",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "tooltip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "mouseEnter",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "mouseLeave",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "transition",
-              "type": {
-                "text": "\"fade\" | \"slide\" | \"none\" | undefined"
-              },
-              "default": "\"none\"",
-              "fieldName": "transition"
-            },
-            {
-              "name": "duration",
+              "name": "clickable",
               "type": {
-                "text": "number | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "200",
-              "fieldName": "duration"
+              "default": "false",
+              "fieldName": "clickable"
             },
             {
               "name": "tooltip",
@@ -10732,16 +10731,17 @@
           "superclass": {
             "name": "FRoot",
             "module": "/src/mixins/components/f-root/f-root"
-          }
+          },
+          "summary": "Tags allow users to categorize the content. They can be used to add metadata to an element such as category, or property or show a status."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FTabContent",
+          "name": "FTag",
           "declaration": {
-            "name": "FTabContent",
-            "module": "src/components/f-tab-content/f-tab-content.ts"
+            "name": "FTag",
+            "module": "src/components/f-tag/f-tag.ts"
           }
         }
       ]
@@ -10834,128 +10834,183 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-text-area/f-text-area.ts",
+      "path": "src/components/f-text/f-text.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FTextArea",
+          "name": "FText",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "fill",
               "type": {
-                "text": "string | undefined"
+                "text": "string"
               },
-              "attribute": "value",
-              "reflects": true
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "category",
+              "name": "variant",
               "type": {
-                "text": "\"fill\" | \"transparent\" | \"outline\" | undefined"
+                "text": "\"heading\" | \"para\" | \"code\" | undefined"
               },
-              "default": "\"fill\"",
-              "attribute": "category",
+              "default": "\"para\"",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "size",
               "type": {
-                "text": "FTextAreaState | undefined"
+                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
+              "default": "\"medium\"",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "weight",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "\"bold\" | \"medium\" | \"regular\" | undefined"
               },
-              "attribute": "size",
+              "attribute": "weight",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "rows",
+              "name": "highlight",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "rows",
+              "attribute": "highlight",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "state",
               "type": {
-                "text": "string | undefined"
+                "text": "FTextStateProp | undefined"
               },
-              "attribute": "placeholder",
+              "default": "\"default\"",
+              "attribute": "state",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxLength",
+              "name": "align",
               "type": {
-                "text": "string | undefined"
+                "text": "\"left\" | \"center\" | \"right\" | undefined"
               },
-              "attribute": "max-length",
+              "default": "\"left\"",
+              "attribute": "align",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "resizable",
+              "name": "inline",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "resizable",
+              "attribute": "inline",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "clear",
+              "name": "editable",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
-              "attribute": "clear",
+              "default": "false",
+              "attribute": "editable",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "disabled",
+              "attribute": "loading",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "readOnly",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "read-only",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maskValue",
+              "name": "ellipsis",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "mask-value",
+              "attribute": "ellipsis",
               "reflects": true
             },
+            {
+              "kind": "field",
+              "name": "defaultSlot",
+              "type": {
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "innerTextValue",
+              "type": {
+                "text": "HTMLDivElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "spanEditable",
+              "type": {
+                "text": "HTMLSpanElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "editTextIcon",
+              "type": {
+                "text": "HTMLDivElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "highlightedText",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "isTextInput",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "validateProperties",
+              "description": "validation for all atrributes"
+            },
             {
               "kind": "method",
               "name": "handleInput",
@@ -10966,54 +11021,47 @@
                     "text": "InputEvent"
                   }
                 }
-              ],
-              "description": "emit event"
+              ]
             },
             {
               "kind": "method",
-              "name": "replaceCharacter",
+              "name": "handleEdit"
+            },
+            {
+              "kind": "method",
+              "name": "handleSubmit"
+            },
+            {
+              "kind": "method",
+              "name": "editOnHover",
               "parameters": [
                 {
-                  "name": "string",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "replacement",
+                  "name": "display",
                   "type": {
-                    "text": "string"
+                    "text": "\"flex\" | \"none\""
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "clearValue",
-              "description": "clear value inside f-text-area on click of clear icon."
+              "name": "showEmptyPlaceholder"
             },
             {
               "kind": "method",
-              "name": "applyStyles",
+              "name": "removeMarkTag",
               "parameters": [
                 {
-                  "name": "parent",
+                  "name": "str",
                   "type": {
-                    "text": "HTMLElement | \"\""
+                    "text": "string"
                   }
                 }
-              ],
-              "description": "apply styles"
+              ]
             },
             {
               "kind": "method",
-              "name": "getDots"
+              "name": "handleSlotChange"
             },
             {
               "kind": "field",
@@ -11064,95 +11112,90 @@
           ],
           "attributes": [
             {
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "category",
+              "name": "variant",
               "type": {
-                "text": "\"fill\" | \"transparent\" | \"outline\" | undefined"
+                "text": "\"heading\" | \"para\" | \"code\" | undefined"
               },
-              "default": "\"fill\"",
-              "fieldName": "category"
+              "default": "\"para\"",
+              "fieldName": "variant"
             },
             {
-              "name": "state",
+              "name": "size",
               "type": {
-                "text": "FTextAreaState | undefined"
+                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "\"default\"",
-              "fieldName": "state"
+              "default": "\"medium\"",
+              "fieldName": "size"
             },
             {
-              "name": "size",
+              "name": "weight",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "\"bold\" | \"medium\" | \"regular\" | undefined"
               },
-              "fieldName": "size"
+              "fieldName": "weight"
             },
             {
-              "name": "rows",
+              "name": "highlight",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "rows"
+              "fieldName": "highlight"
             },
             {
-              "name": "placeholder",
+              "name": "state",
               "type": {
-                "text": "string | undefined"
+                "text": "FTextStateProp | undefined"
               },
-              "fieldName": "placeholder"
+              "default": "\"default\"",
+              "fieldName": "state"
             },
             {
-              "name": "max-length",
+              "name": "align",
               "type": {
-                "text": "string | undefined"
+                "text": "\"left\" | \"center\" | \"right\" | undefined"
               },
-              "fieldName": "maxLength"
+              "default": "\"left\"",
+              "fieldName": "align"
             },
             {
-              "name": "resizable",
+              "name": "inline",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "resizable"
+              "fieldName": "inline"
             },
             {
-              "name": "clear",
+              "name": "editable",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
-              "fieldName": "clear"
+              "default": "false",
+              "fieldName": "editable"
             },
             {
-              "name": "disabled",
+              "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "loading"
             },
             {
-              "name": "read-only",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "readOnly"
+              "fieldName": "disabled"
             },
             {
-              "name": "mask-value",
+              "name": "ellipsis",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "maskValue"
+              "fieldName": "ellipsis"
             },
             {
               "name": "tooltip",
@@ -11169,199 +11212,145 @@
           "superclass": {
             "name": "FRoot",
             "module": "/src/mixins/components/f-root/f-root"
-          }
+          },
+          "summary": "Text component includes Headings, titles, body texts and links."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FTextArea",
+          "name": "FText",
           "declaration": {
-            "name": "FTextArea",
-            "module": "src/components/f-text-area/f-text-area.ts"
+            "name": "FText",
+            "module": "src/components/f-text/f-text.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-text/f-text.ts",
+      "path": "src/components/f-text-area/f-text-area.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FText",
+          "name": "FTextArea",
           "members": [
             {
               "kind": "field",
-              "name": "fill",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\""
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "category",
               "type": {
-                "text": "\"heading\" | \"para\" | \"code\" | undefined"
+                "text": "\"fill\" | \"transparent\" | \"outline\" | undefined"
               },
-              "default": "\"para\"",
-              "attribute": "variant",
+              "default": "\"fill\"",
+              "attribute": "category",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "state",
               "type": {
-                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "FTextAreaState | undefined"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
+              "default": "\"default\"",
+              "attribute": "state",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "weight",
+              "name": "size",
               "type": {
-                "text": "\"bold\" | \"medium\" | \"regular\" | undefined"
+                "text": "\"small\" | \"medium\" | undefined"
               },
-              "attribute": "weight",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "highlight",
+              "name": "rows",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "highlight",
+              "attribute": "rows",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "placeholder",
               "type": {
-                "text": "FTextStateProp | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
+              "attribute": "placeholder",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "maxLength",
               "type": {
-                "text": "\"left\" | \"center\" | \"right\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"left\"",
-              "attribute": "align",
+              "attribute": "max-length",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "inline",
+              "name": "resizable",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "inline",
+              "attribute": "resizable",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "editable",
+              "name": "clear",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "false",
-              "attribute": "editable",
+              "default": "true",
+              "attribute": "clear",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "loading",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "readOnly",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "disabled",
+              "attribute": "read-only",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "ellipsis",
+              "name": "maskValue",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "ellipsis",
+              "attribute": "mask-value",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "defaultSlot",
-              "type": {
-                "text": "HTMLSlotElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "innerTextValue",
-              "type": {
-                "text": "HTMLDivElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "spanEditable",
-              "type": {
-                "text": "HTMLSpanElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "editTextIcon",
-              "type": {
-                "text": "HTMLDivElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "highlightedText",
-              "type": {
-                "text": "string | null"
-              },
-              "default": "null"
-            },
-            {
-              "kind": "field",
-              "name": "isTextInput",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
-            {
-              "kind": "field",
-              "name": "iconSize",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "validateProperties",
-              "description": "validation for all atrributes"
-            },
             {
               "kind": "method",
               "name": "handleInput",
@@ -11372,47 +11361,54 @@
                     "text": "InputEvent"
                   }
                 }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleEdit"
-            },
-            {
-              "kind": "method",
-              "name": "handleSubmit"
+              ],
+              "description": "emit event"
             },
             {
               "kind": "method",
-              "name": "editOnHover",
+              "name": "replaceCharacter",
               "parameters": [
                 {
-                  "name": "display",
+                  "name": "string",
                   "type": {
-                    "text": "\"flex\" | \"none\""
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "replacement",
+                  "type": {
+                    "text": "string"
                   }
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "showEmptyPlaceholder"
+              "name": "clearValue",
+              "description": "clear value inside f-text-area on click of clear icon."
             },
             {
               "kind": "method",
-              "name": "removeMarkTag",
+              "name": "applyStyles",
               "parameters": [
                 {
-                  "name": "str",
+                  "name": "parent",
                   "type": {
-                    "text": "string"
+                    "text": "HTMLElement | \"\""
                   }
                 }
-              ]
+              ],
+              "description": "apply styles"
             },
             {
               "kind": "method",
-              "name": "handleSlotChange"
+              "name": "getDots"
             },
             {
               "kind": "field",
@@ -11463,90 +11459,95 @@
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "value",
               "type": {
-                "text": "\"heading\" | \"para\" | \"code\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"para\"",
-              "fieldName": "variant"
+              "fieldName": "value"
             },
             {
-              "name": "size",
+              "name": "category",
               "type": {
-                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "\"fill\" | \"transparent\" | \"outline\" | undefined"
               },
-              "default": "\"medium\"",
-              "fieldName": "size"
+              "default": "\"fill\"",
+              "fieldName": "category"
             },
             {
-              "name": "weight",
+              "name": "state",
               "type": {
-                "text": "\"bold\" | \"medium\" | \"regular\" | undefined"
+                "text": "FTextAreaState | undefined"
               },
-              "fieldName": "weight"
+              "default": "\"default\"",
+              "fieldName": "state"
             },
             {
-              "name": "highlight",
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "rows",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "highlight"
+              "fieldName": "rows"
             },
             {
-              "name": "state",
+              "name": "placeholder",
               "type": {
-                "text": "FTextStateProp | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"default\"",
-              "fieldName": "state"
+              "fieldName": "placeholder"
             },
             {
-              "name": "align",
+              "name": "max-length",
               "type": {
-                "text": "\"left\" | \"center\" | \"right\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"left\"",
-              "fieldName": "align"
+              "fieldName": "maxLength"
             },
             {
-              "name": "inline",
+              "name": "resizable",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "inline"
+              "fieldName": "resizable"
             },
             {
-              "name": "editable",
+              "name": "clear",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "false",
-              "fieldName": "editable"
+              "default": "true",
+              "fieldName": "clear"
             },
             {
-              "name": "loading",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "loading"
+              "fieldName": "disabled"
             },
             {
-              "name": "disabled",
+              "name": "read-only",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "readOnly"
             },
             {
-              "name": "ellipsis",
+              "name": "mask-value",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "ellipsis"
+              "fieldName": "maskValue"
             },
             {
               "name": "tooltip",
@@ -11563,17 +11564,16 @@
           "superclass": {
             "name": "FRoot",
             "module": "/src/mixins/components/f-root/f-root"
-          },
-          "summary": "Text component includes Headings, titles, body texts and links."
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FText",
+          "name": "FTextArea",
           "declaration": {
-            "name": "FText",
-            "module": "src/components/f-text/f-text.ts"
+            "name": "FTextArea",
+            "module": "src/components/f-text-area/f-text-area.ts"
           }
         }
       ]
@@ -12053,4 +12053,4 @@
       ]
     }
   ]
-}
\ No newline at end of file
+}
diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
index 3e1298838..5c6ea50c1 100644
--- a/packages/flow-core/package.json
+++ b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "1.20.4",
+  "version": "1.20.5",
   "description": "Core package of flow design system",
   "module": "dist/flow-core.es.js",
   "main": "dist/flow-core.cjs.js",
diff --git a/packages/flow-core/src/components/f-icon/f-icon.ts b/packages/flow-core/src/components/f-icon/f-icon.ts
index 6b64ae473..04d13ed59 100644
--- a/packages/flow-core/src/components/f-icon/f-icon.ts
+++ b/packages/flow-core/src/components/f-icon/f-icon.ts
@@ -1,4 +1,4 @@
-import { html, unsafeCSS } from "lit";
+import { html, PropertyValues, unsafeCSS } from "lit";
 import { property, state } from "lit/decorators.js";
 import eleStyle from "./f-icon.scss";
 import { FRoot } from "../../mixins/components/f-root/f-root";
@@ -129,6 +129,7 @@ export class FIcon extends FRoot {
 	}
 
 	disconnectedCallback(): void {
+		super.disconnectedCallback();
 		this._themeSubscription?.unsubscribe();
 		this._configSubscription?.unsubscribe();
 	}
@@ -213,6 +214,10 @@ export class FIcon extends FRoot {
 				: html`${this.isURLSource ? unsafeHTML(this.source) : unsafeSVG(this.source)}`}
 		</div>`;
 	}
+
+	protected updated(changedProperties: PropertyValues) {
+		super.updated(changedProperties);
+	}
 }
 
 /**
diff --git a/packages/flow-core/src/components/f-popover/f-popover.ts b/packages/flow-core/src/components/f-popover/f-popover.ts
index 9c1d41f8d..4e40ae21b 100644
--- a/packages/flow-core/src/components/f-popover/f-popover.ts
+++ b/packages/flow-core/src/components/f-popover/f-popover.ts
@@ -120,7 +120,9 @@ export class FPopover extends FRoot {
 	computePosition(isTooltip: boolean) {
 		let target = document.body;
 		if (this.targetElement && this.open) {
-			this.targetElement.style.zIndex = "201";
+			if (!isTooltip) {
+				this.targetElement.style.zIndex = "201";
+			}
 			target = this.targetElement;
 		}
 		if (this.open) {
diff --git a/packages/flow-table/custom-elements.json b/packages/flow-table/custom-elements.json
index 8422800cd..fcfc04d7d 100644
--- a/packages/flow-table/custom-elements.json
+++ b/packages/flow-table/custom-elements.json
@@ -72,6 +72,210 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-table/f-table.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FTable",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "FTableVariant | undefined"
+              },
+              "default": "\"stripped\"",
+              "attribute": "variant",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "FTableSize | undefined"
+              },
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "selectable",
+              "type": {
+                "text": "FTableSelectable | undefined"
+              },
+              "default": "\"none\"",
+              "attribute": "selectable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "highlightSelected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "highlight-selected",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "highlightHover",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "highlight-hover",
+              "reflects": true
+            },
+            {
+              "kind": "method",
+              "name": "propogateProps"
+            },
+            {
+              "kind": "method",
+              "name": "updateGridTemplateColumns"
+            },
+            {
+              "kind": "method",
+              "name": "applySelectable",
+              "description": "apply checkbox or radio based on selection property"
+            },
+            {
+              "kind": "method",
+              "name": "handleHeaderRowSelection",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ],
+              "description": "if checkbox from header got clicked"
+            },
+            {
+              "kind": "method",
+              "name": "handleRowSelection",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ],
+              "description": "if checkbox or radio clicked in row"
+            },
+            {
+              "kind": "method",
+              "name": "dispatchSelectedRowEvent"
+            },
+            {
+              "kind": "method",
+              "name": "updateRadioChecks",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "only one radio should be selected"
+            },
+            {
+              "kind": "method",
+              "name": "updateHeaderSelectionCheckboxState",
+              "description": "update header checkbox based on rest of the selection"
+            },
+            {
+              "kind": "method",
+              "name": "toggleColumnHighlight",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toggleColumnSelected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "variant",
+              "type": {
+                "text": "FTableVariant | undefined"
+              },
+              "default": "\"stripped\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "FTableSize | undefined"
+              },
+              "default": "\"medium\"",
+              "fieldName": "size"
+            },
+            {
+              "name": "selectable",
+              "type": {
+                "text": "FTableSelectable | undefined"
+              },
+              "default": "\"none\"",
+              "fieldName": "selectable"
+            },
+            {
+              "name": "highlight-selected",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "highlightSelected"
+            },
+            {
+              "name": "highlight-hover",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "highlightHover"
+            }
+          ],
+          "superclass": {
+            "name": "FRoot",
+            "package": "@cldcvr/flow-core"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FTable",
+          "declaration": {
+            "name": "FTable",
+            "module": "src/components/f-table/f-table.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/components/f-table-schema/f-table-schema.ts",
@@ -708,210 +912,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-table/f-table.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FTable",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "FTableVariant | undefined"
-              },
-              "default": "\"stripped\"",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "FTableSize | undefined"
-              },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "selectable",
-              "type": {
-                "text": "FTableSelectable | undefined"
-              },
-              "default": "\"none\"",
-              "attribute": "selectable",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "highlightSelected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "highlight-selected",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "highlightHover",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "attribute": "highlight-hover",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "propogateProps"
-            },
-            {
-              "kind": "method",
-              "name": "updateGridTemplateColumns"
-            },
-            {
-              "kind": "method",
-              "name": "applySelectable",
-              "description": "apply checkbox or radio based on selection property"
-            },
-            {
-              "kind": "method",
-              "name": "handleHeaderRowSelection",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ],
-              "description": "if checkbox from header got clicked"
-            },
-            {
-              "kind": "method",
-              "name": "handleRowSelection",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ],
-              "description": "if checkbox or radio clicked in row"
-            },
-            {
-              "kind": "method",
-              "name": "dispatchSelectedRowEvent"
-            },
-            {
-              "kind": "method",
-              "name": "updateRadioChecks",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  }
-                }
-              ],
-              "description": "only one radio should be selected"
-            },
-            {
-              "kind": "method",
-              "name": "updateHeaderSelectionCheckboxState",
-              "description": "update header checkbox based on rest of the selection"
-            },
-            {
-              "kind": "method",
-              "name": "toggleColumnHighlight",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "toggleColumnSelected",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
-                }
-              ]
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "FTableVariant | undefined"
-              },
-              "default": "\"stripped\"",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "FTableSize | undefined"
-              },
-              "default": "\"medium\"",
-              "fieldName": "size"
-            },
-            {
-              "name": "selectable",
-              "type": {
-                "text": "FTableSelectable | undefined"
-              },
-              "default": "\"none\"",
-              "fieldName": "selectable"
-            },
-            {
-              "name": "highlight-selected",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "highlightSelected"
-            },
-            {
-              "name": "highlight-hover",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "highlightHover"
-            }
-          ],
-          "superclass": {
-            "name": "FRoot",
-            "package": "@cldcvr/flow-core"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FTable",
-          "declaration": {
-            "name": "FTable",
-            "module": "src/components/f-table/f-table.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/f-trow/f-trow.ts",