From 6d3c07e9ecbfb4101b1b3aa2e31cdb9e557931f0 Mon Sep 17 00:00:00 2001
From: Vikas Awaghade <67629551+vikas-cldcvr@users.noreply.github.com>
Date: Wed, 27 Sep 2023 13:22:30 +0530
Subject: [PATCH] FLOW-923 f-select options navigation through arrow keys
 (#143)

* FLOW-923 f-select options navigation through arrow keys

* FLOW-923 disabled option selection issue fixed
---
 .../flow-code-editor/custom-elements.json     |   48 +-
 packages/flow-core/CHANGELOG.md               |    7 +
 packages/flow-core/custom-elements.json       | 8421 +++++++++--------
 packages/flow-core/html.html-data.json        |   14 +-
 packages/flow-core/package.json               |    2 +-
 .../flow-core/src/components/f-div/f-div.scss |   29 +-
 .../src/components/f-select/f-select.ts       |   31 +-
 .../src/components/f-select/handlers.ts       |   80 +-
 .../src/components/f-select/render.ts         |   26 +-
 packages/flow-table/custom-elements.json      |  652 +-
 stories/f-select.stories.mdx                  |   14 +-
 11 files changed, 4712 insertions(+), 4612 deletions(-)

diff --git a/packages/flow-code-editor/custom-elements.json b/packages/flow-code-editor/custom-elements.json
index aff84c7f0..4b559aca7 100644
--- a/packages/flow-code-editor/custom-elements.json
+++ b/packages/flow-code-editor/custom-elements.json
@@ -55,30 +55,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"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "src/components/f-code-editor/f-code-editor.ts",
@@ -449,6 +425,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"
+          }
+        }
+      ]
     }
   ]
 }
diff --git a/packages/flow-core/CHANGELOG.md b/packages/flow-core/CHANGELOG.md
index f21386f02..a67a51c91 100644
--- a/packages/flow-core/CHANGELOG.md
+++ b/packages/flow-core/CHANGELOG.md
@@ -4,6 +4,13 @@
 
 # Change Log
 
+## [1.26.0] - 2023-09-26
+
+### Features
+
+- `f-select` : options navigation through arrow keys.
+- `f-select` : `Enter` key to select option 
+- `f-select` : `Esc` to close f-select.
 ## [1.25.5] - 2023-09-25
 
 ### Bug Fixes
diff --git a/packages/flow-core/custom-elements.json b/packages/flow-core/custom-elements.json
index 7a226b9f6..590d15558 100644
--- a/packages/flow-core/custom-elements.json
+++ b/packages/flow-core/custom-elements.json
@@ -724,138 +724,173 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-accordion/f-accordion.ts",
+      "path": "src/components/f-button/f-button.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FAccordion",
+          "name": "FButton",
           "members": [
             {
               "kind": "field",
-              "name": "open",
+              "name": "fill",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "open",
+              "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": "icon",
+              "name": "size",
               "type": {
-                "text": "\"chevron\" | \"caret\" | \"plus\" | \"none\" | undefined"
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "\"chevron\"",
-              "attribute": "icon",
+              "default": "\"medium\"",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconSize",
+              "name": "state",
               "type": {
-                "text": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined"
+                "text": "FButtonState | undefined"
               },
-              "default": "\"small\"",
-              "attribute": "icon-size",
+              "default": "\"primary\"",
+              "attribute": "state",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconPlacement",
+              "name": "variant",
               "type": {
-                "text": "\"right\" | \"left\" | undefined"
+                "text": "\"round\" | \"curved\" | \"block\" | undefined"
               },
-              "default": "\"right\"",
-              "attribute": "icon-placement",
+              "default": "\"round\"",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxHeight",
+              "name": "iconLeft",
               "type": {
-                "text": "FAccordionBodyHeightProp | undefined"
+                "text": "string | undefined"
               },
-              "attribute": "max-height",
+              "attribute": "icon-left",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "headerPadding",
+              "name": "iconRight",
               "type": {
-                "text": "FAccordionPadding | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"medium\"",
-              "attribute": "header-padding",
+              "attribute": "icon-right",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "bodyPadding",
+              "name": "counter",
               "type": {
-                "text": "FAccordionPadding | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"none medium\"",
-              "attribute": "body-padding",
+              "attribute": "counter",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "fAccordionBody",
+              "name": "loading",
               "type": {
-                "text": "FDiv | undefined"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "loading",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "fAccordionHeader",
+              "name": "disabled",
               "type": {
-                "text": "FDiv | undefined"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconName",
-              "description": "identify icon-name from string",
+              "name": "labelWrap",
+              "type": {
+                "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": "method",
-              "name": "toggleAccordion",
-              "description": "toggle accordion"
+              "kind": "field",
+              "name": "textColor",
+              "description": "compute textColor when custom color of tag is defined.",
+              "readonly": true
             },
             {
-              "kind": "method",
-              "name": "stateChange",
-              "parameters": [
-                {
-                  "name": "mouseState",
-                  "type": {
-                    "text": "\"enter\" | \"leave\""
-                  }
-                }
-              ],
-              "description": "changeState"
+              "kind": "field",
+              "name": "required",
+              "type": {
+                "text": "array"
+              },
+              "readonly": true,
+              "default": "[\"label\"]",
+              "description": "mention required fields here for generating vue types"
             },
             {
               "kind": "method",
-              "name": "dispatchToggleEvent",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "boolean"
-                }
-              ],
-              "description": "toggle event dispatch"
+              "name": "validateProperties",
+              "description": "validation for all atrributes"
             },
             {
               "kind": "method",
-              "name": "handleAccordionBody",
-              "description": "handling max-height of body"
+              "name": "applyStyles",
+              "description": "apply inline styles to shadow-dom for custom fill."
             },
             {
               "kind": "field",
@@ -918,59 +953,88 @@
           ],
           "attributes": [
             {
-              "name": "open",
+              "name": "label",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "open"
+              "fieldName": "label"
             },
             {
-              "name": "icon",
+              "name": "category",
               "type": {
-                "text": "\"chevron\" | \"caret\" | \"plus\" | \"none\" | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "default": "\"chevron\"",
-              "fieldName": "icon"
+              "default": "\"fill\"",
+              "fieldName": "category"
             },
             {
-              "name": "icon-size",
+              "name": "size",
               "type": {
-                "text": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined"
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "\"small\"",
-              "fieldName": "iconSize"
+              "default": "\"medium\"",
+              "fieldName": "size"
             },
             {
-              "name": "icon-placement",
+              "name": "state",
               "type": {
-                "text": "\"right\" | \"left\" | undefined"
+                "text": "FButtonState | undefined"
               },
-              "default": "\"right\"",
-              "fieldName": "iconPlacement"
+              "default": "\"primary\"",
+              "fieldName": "state"
             },
             {
-              "name": "max-height",
+              "name": "variant",
               "type": {
-                "text": "FAccordionBodyHeightProp | undefined"
+                "text": "\"round\" | \"curved\" | \"block\" | undefined"
               },
-              "fieldName": "maxHeight"
+              "default": "\"round\"",
+              "fieldName": "variant"
             },
             {
-              "name": "header-padding",
+              "name": "icon-left",
               "type": {
-                "text": "FAccordionPadding | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"medium\"",
-              "fieldName": "headerPadding"
+              "fieldName": "iconLeft"
             },
             {
-              "name": "body-padding",
+              "name": "icon-right",
               "type": {
-                "text": "FAccordionPadding | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"none medium\"",
-              "fieldName": "bodyPadding"
+              "fieldName": "iconRight"
+            },
+            {
+              "name": "counter",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "counter"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "loading"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "label-wrap",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "labelWrap"
             },
             {
               "name": "tooltip",
@@ -987,194 +1051,39 @@
           "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": "FAccordion",
+          "name": "FButton",
           "declaration": {
-            "name": "FAccordion",
-            "module": "src/components/f-accordion/f-accordion.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",
-              "type": {
-                "text": "\"medium\" | \"small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "crumbs",
-              "type": {
-                "text": "FBreadcrumbs"
-              },
-              "attribute": "crumbs"
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
+              "name": "contentId",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "default": "false",
-              "attribute": "disabled",
+              "attribute": "content-id",
               "reflects": true
             },
-            {
-              "kind": "field",
-              "name": "popOverElement",
-              "type": {
-                "text": "FPopover"
-              },
-              "description": "popover element reference"
-            },
-            {
-              "kind": "field",
-              "name": "breadCrumbPopover",
-              "type": {
-                "text": "FDiv"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "initialCrumbs",
-              "type": {
-                "text": "FBreadCrumbsProp"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "middlePopoverCrumbs",
-              "type": {
-                "text": "FBreadcrumbs"
-              },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "endingCrumbs",
-              "type": {
-                "text": "FBreadcrumbs"
-              },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "textSize",
-              "description": "text size computed",
-              "readonly": 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": "method",
-              "name": "createSeperateCrumbs",
-              "description": "create seperate crumbs when crumbs length is greater than 4"
-            },
-            {
-              "kind": "method",
-              "name": "crumbLoop",
-              "parameters": [
-                {
-                  "name": "crumb",
-                  "type": {
-                    "text": "FBreadCrumbsProp"
-                  }
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "array",
-                  "type": {
-                    "text": "FBreadcrumbs"
-                  }
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "togglePopover",
-              "parameters": [
-                {
-                  "name": "action",
-                  "type": {
-                    "text": "\"open\" | \"close\""
-                  },
-                  "description": "action whether to close or open popover"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "handleDispatchEvent",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "event"
-                },
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "FBreadCrumbsProp"
-                  },
-                  "description": "crumb value"
-                }
-              ],
-              "description": "dispatch click event"
-            },
             {
               "kind": "field",
               "name": "tooltipElement",
@@ -1236,27 +1145,11 @@
           ],
           "attributes": [
             {
-              "name": "size",
-              "type": {
-                "text": "\"medium\" | \"small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "fieldName": "size"
-            },
-            {
-              "name": "crumbs",
-              "type": {
-                "text": "FBreadcrumbs"
-              },
-              "fieldName": "crumbs"
-            },
-            {
-              "name": "disabled",
+              "name": "content-id",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "contentId"
             },
             {
               "name": "tooltip",
@@ -1279,183 +1172,206 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FBreadcrumb",
+          "name": "FCarouselContent",
           "declaration": {
-            "name": "FBreadcrumb",
-            "module": "src/components/f-breadcrumb/f-breadcrumb.ts"
+            "name": "FCarouselContent",
+            "module": "src/components/f-carousel-content/f-carousel-content.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-button/f-button.ts",
+      "path": "src/components/f-carousel/f-carousel.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FButton",
+          "name": "FCarousel",
           "members": [
             {
               "kind": "field",
-              "name": "fill",
+              "name": "activeContentId",
               "type": {
-                "text": "string"
+                "text": "string | undefined"
               },
-              "default": "\"\""
+              "attribute": "active-content-id"
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "autoPlay",
               "type": {
-                "text": "string"
+                "text": "boolean | undefined"
               },
-              "attribute": "label"
+              "attribute": "auto-play"
             },
             {
               "kind": "field",
-              "name": "category",
+              "name": "autoPlayInterval",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "number | undefined"
               },
-              "default": "\"fill\"",
-              "attribute": "category",
-              "reflects": true
+              "attribute": "auto-play-interval"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "slides",
               "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "slider",
               "type": {
-                "text": "FButtonState | undefined"
-              },
-              "default": "\"primary\"",
-              "attribute": "state",
-              "reflects": true
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "dots",
               "type": {
-                "text": "\"round\" | \"curved\" | \"block\" | undefined"
-              },
-              "default": "\"round\"",
-              "attribute": "variant",
-              "reflects": true
+                "text": "HTMLElement"
+              }
             },
             {
               "kind": "field",
-              "name": "iconLeft",
+              "name": "nextArrow",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "icon-left",
-              "reflects": true
+                "text": "FIcon"
+              }
             },
             {
               "kind": "field",
-              "name": "iconRight",
+              "name": "progress",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "icon-right",
-              "reflects": true
+                "text": "FDiv | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "counter",
+              "name": "prevArrow",
               "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "counter",
-              "reflects": true
+                "text": "FIcon"
+              }
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "activeSlide",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "loading",
-              "reflects": true
+                "text": "HTMLElement | null | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "slideElements",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+                "text": "NodeListOf<FCarouselContent> | undefined"
+              }
             },
             {
-              "kind": "field",
-              "name": "labelWrap",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "label-wrap",
-              "reflects": true
+              "kind": "method",
+              "name": "handleNavigation",
+              "parameters": [
+                {
+                  "name": "type",
+                  "default": "\"next\"",
+                  "type": {
+                    "text": "\"next\" | \"prev\""
+                  }
+                }
+              ]
             },
             {
-              "kind": "field",
-              "name": "iconElement",
-              "type": {
-                "text": "FIcon"
-              },
-              "description": "icon element reference"
+              "kind": "method",
+              "name": "handleTransitionEnd"
             },
             {
-              "kind": "field",
-              "name": "counterElement",
-              "type": {
-                "text": "FCounter | undefined"
-              },
-              "description": "counter element reference"
+              "kind": "method",
+              "name": "removeClonnedSlides"
             },
             {
-              "kind": "field",
-              "name": "counterSize",
-              "description": "compute counter size based on button size",
-              "readonly": true
+              "kind": "method",
+              "name": "checkAutoPlay"
             },
             {
-              "kind": "field",
-              "name": "textColor",
-              "description": "compute textColor when custom color of tag is defined.",
-              "readonly": true
+              "kind": "method",
+              "name": "handleProgressEnd"
             },
             {
-              "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "array"
-              },
-              "readonly": true,
-              "default": "[\"label\"]",
-              "description": "mention required fields here for generating vue types"
+              "kind": "method",
+              "name": "emitNavigationEvent",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "\"next\" | \"prev\""
+                  }
+                },
+                {
+                  "name": "contentId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "validateProperties",
-              "description": "validation for all atrributes"
+              "name": "jumpTo",
+              "parameters": [
+                {
+                  "name": "contentId",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "applyStyles",
-              "description": "apply inline styles to shadow-dom for custom fill."
+              "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",
@@ -1518,88 +1434,25 @@
           ],
           "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",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "iconRight"
-            },
-            {
-              "name": "counter",
+              "name": "active-content-id",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "counter"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "loading"
+              "fieldName": "activeContentId"
             },
             {
-              "name": "disabled",
+              "name": "auto-play",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "autoPlay"
             },
             {
-              "name": "label-wrap",
+              "name": "auto-play-interval",
               "type": {
-                "text": "boolean | undefined"
+                "text": "number | undefined"
               },
-              "default": "false",
-              "fieldName": "labelWrap"
+              "fieldName": "autoPlayInterval"
             },
             {
               "name": "tooltip",
@@ -1616,213 +1469,208 @@
           "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": "FCarousel",
           "declaration": {
-            "name": "FButton",
-            "module": "src/components/f-button/f-button.ts"
+            "name": "FCarousel",
+            "module": "src/components/f-carousel/f-carousel.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-carousel/f-carousel.ts",
-      "declarations": [
+      "path": "src/components/f-carousel/i-fcarousel-example.ts",
+      "declarations": [],
+      "exports": [
         {
-          "kind": "class",
-          "description": "",
-          "name": "FCarousel",
-          "members": [
-            {
-              "kind": "field",
-              "name": "activeContentId",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "active-content-id"
-            },
+          "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-breadcrumb/f-breadcrumb.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FBreadcrumb",
+          "members": [
             {
               "kind": "field",
-              "name": "autoPlay",
+              "name": "size",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
-              "attribute": "auto-play"
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoPlayInterval",
+              "name": "crumbs",
               "type": {
-                "text": "number | undefined"
+                "text": "FBreadcrumbs"
               },
-              "attribute": "auto-play-interval"
-            },
-            {
-              "kind": "field",
-              "name": "slides",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "attribute": "crumbs"
             },
             {
               "kind": "field",
-              "name": "slider",
+              "name": "disabled",
               "type": {
-                "text": "HTMLElement"
-              }
+                "text": "boolean | undefined"
+              },
+              "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",
@@ -1885,25 +1733,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",
@@ -1926,167 +1776,38 @@
       "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-carousel-content/f-carousel-content.ts",
+      "path": "src/components/f-checkbox/f-checkbox.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FCarouselContent",
+          "name": "FCheckbox",
           "members": [
             {
               "kind": "field",
-              "name": "contentId",
+              "name": "value",
               "type": {
-                "text": "string"
+                "text": "\"checked\" | \"unchecked\" | \"indeterminate\" | undefined"
               },
-              "attribute": "content-id",
+              "default": "\"unchecked\"",
+              "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltipElement",
+              "name": "state",
               "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"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "isMouseOver",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "content-id",
-              "type": {
-                "text": "string"
-              },
-              "fieldName": "contentId"
-            },
-            {
-              "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": "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": "value",
-              "type": {
-                "text": "\"checked\" | \"unchecked\" | \"indeterminate\" | undefined"
-              },
-              "default": "\"unchecked\"",
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "FCheckboxState | undefined"
+                "text": "FCheckboxState | undefined"
               },
               "default": "\"default\"",
               "attribute": "state",
@@ -2518,332 +2239,153 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-date-time-picker/f-date-time-picker.ts",
+      "path": "src/components/f-accordion/f-accordion.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FDateTimePicker",
+          "name": "FAccordion",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "open",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"curved\"",
-              "attribute": "variant",
+              "default": "false",
+              "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "category",
+              "name": "icon",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "\"chevron\" | \"caret\" | \"plus\" | \"none\" | undefined"
               },
-              "default": "\"fill\"",
-              "attribute": "category",
+              "default": "\"chevron\"",
+              "attribute": "icon",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "mode",
+              "name": "iconSize",
               "type": {
-                "text": "\"date-time\" | \"date-only\" | \"time-only\" | undefined"
+                "text": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined"
               },
-              "default": "\"date-time\"",
-              "attribute": "mode",
+              "default": "\"small\"",
+              "attribute": "icon-size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "iconPlacement",
               "type": {
-                "text": "DateValueType | undefined"
+                "text": "\"right\" | \"left\" | undefined"
               },
-              "attribute": "value",
+              "default": "\"right\"",
+              "attribute": "icon-placement",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "maxHeight",
               "type": {
-                "text": "string | undefined"
+                "text": "FAccordionBodyHeightProp | undefined"
               },
-              "attribute": "placeholder",
+              "attribute": "max-height",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "headerPadding",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "FAccordionPadding | undefined"
               },
               "default": "\"medium\"",
-              "attribute": "size",
+              "attribute": "header-padding",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "bodyPadding",
               "type": {
-                "text": "FDateTimePickerState | undefined"
+                "text": "FAccordionPadding | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
+              "default": "\"none medium\"",
+              "attribute": "body-padding",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "[\"min-date\"]",
+              "name": "fAccordionBody",
               "type": {
-                "text": "FDateOption | undefined"
-              },
-              "attribute": "[\"min-date\"]",
-              "reflects": true
+                "text": "FDiv | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "[\"max-date\"]",
+              "name": "fAccordionHeader",
               "type": {
-                "text": "FDateOption | undefined"
-              },
-              "attribute": "[\"max-date\"]",
-              "reflects": true
+                "text": "FDiv | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "[\"disable-date\"]",
-              "type": {
-                "text": "DateDisableType | undefined"
-              },
-              "default": "[]",
-              "attribute": "[\"disable-date\"]",
-              "reflects": true
+              "name": "iconName",
+              "description": "identify icon-name from string",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "clear",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "clear",
-              "reflects": true
+              "kind": "method",
+              "name": "toggleAccordion",
+              "description": "toggle accordion"
             },
             {
-              "kind": "field",
-              "name": "[\"is-range\"]",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "[\"is-range\"]",
-              "reflects": true
+              "kind": "method",
+              "name": "stateChange",
+              "parameters": [
+                {
+                  "name": "mouseState",
+                  "type": {
+                    "text": "\"enter\" | \"leave\""
+                  }
+                }
+              ],
+              "description": "changeState"
+            },
+            {
+              "kind": "method",
+              "name": "dispatchToggleEvent",
+              "parameters": [
+                {
+                  "name": "value",
+                  "type": {
+                    "text": "boolean"
+                  },
+                  "description": "boolean"
+                }
+              ],
+              "description": "toggle event dispatch"
+            },
+            {
+              "kind": "method",
+              "name": "handleAccordionBody",
+              "description": "handling max-height of body"
             },
             {
               "kind": "field",
-              "name": "inline",
+              "name": "tooltipElement",
               "type": {
-                "text": "boolean | undefined"
+                "text": "HTMLElement"
               },
-              "default": "false",
-              "attribute": "inline",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "[\"week-number\"]",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "[\"week-number\"]",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "loading",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "dateTimePickerElement",
-              "type": {
-                "text": "FInput"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "helpSlotElement",
-              "type": {
-                "text": "FDiv"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "flatPickerElement",
-              "type": {
-                "text": "Instance"
-              },
-              "description": "flatpickr instance"
-            },
-            {
-              "kind": "field",
-              "name": "placeholderText",
-              "description": "conditional placeholder",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "regexDateTime",
-              "description": "regex for date-time validation on keyboard typing",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "dateValidationMessage",
-              "description": "validation message",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "handleInput",
-              "parameters": [
-                {
-                  "name": "dateObj",
-                  "type": {
-                    "text": "object"
-                  }
-                },
-                {
-                  "name": "dateStr",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ],
-              "description": "emit input custom event"
-            },
-            {
-              "kind": "method",
-              "name": "dispatchInputEvent",
-              "parameters": [
-                {
-                  "name": "dateObj",
-                  "type": {
-                    "text": "object"
-                  },
-                  "description": "Date as an object"
-                },
-                {
-                  "name": "dateStr",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "Date oin string format"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "dateObjectFromString",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  },
-                  "description": "custom-event value having date string"
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "handleKeyboardInput",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "CustomEvent"
-                  },
-                  "description": "custom-event value having date string"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "datePickerOnChange",
-              "parameters": [
-                {
-                  "name": "selectedDates",
-                  "type": {
-                    "text": "Date[]"
-                  },
-                  "description": "selected date object array"
-                },
-                {
-                  "name": "dateStr",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "selected date string"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "createDateTimePicker",
-              "parameters": [
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "HTMLElement"
-                  },
-                  "description": "element w.r.t which creation of date picker takes place"
-                }
-              ],
-              "description": "creates date picker"
-            },
-            {
-              "kind": "method",
-              "name": "addWeekNoStyle",
-              "description": "week-number border conditional styling"
-            },
-            {
-              "kind": "field",
-              "name": "tooltipElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "tooltip",
+              "name": "tooltip",
               "type": {
                 "text": "string | undefined"
               },
@@ -2891,133 +2433,64 @@
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "open",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"curved\"",
-              "fieldName": "variant"
+              "default": "false",
+              "fieldName": "open"
             },
             {
-              "name": "category",
+              "name": "icon",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "\"chevron\" | \"caret\" | \"plus\" | \"none\" | undefined"
               },
-              "default": "\"fill\"",
-              "fieldName": "category"
+              "default": "\"chevron\"",
+              "fieldName": "icon"
             },
             {
-              "name": "mode",
+              "name": "icon-size",
               "type": {
-                "text": "\"date-time\" | \"date-only\" | \"time-only\" | undefined"
+                "text": "\"x-small\" | \"small\" | \"medium\" | \"large\" | undefined"
               },
-              "default": "\"date-time\"",
-              "fieldName": "mode"
+              "default": "\"small\"",
+              "fieldName": "iconSize"
             },
             {
-              "name": "value",
+              "name": "icon-placement",
               "type": {
-                "text": "DateValueType | undefined"
+                "text": "\"right\" | \"left\" | undefined"
               },
-              "fieldName": "value"
+              "default": "\"right\"",
+              "fieldName": "iconPlacement"
             },
             {
-              "name": "placeholder",
+              "name": "max-height",
               "type": {
-                "text": "string | undefined"
+                "text": "FAccordionBodyHeightProp | undefined"
               },
-              "fieldName": "placeholder"
+              "fieldName": "maxHeight"
             },
             {
-              "name": "size",
+              "name": "header-padding",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "FAccordionPadding | undefined"
               },
               "default": "\"medium\"",
-              "fieldName": "size"
-            },
-            {
-              "name": "state",
-              "type": {
-                "text": "FDateTimePickerState | undefined"
-              },
-              "default": "\"default\"",
-              "fieldName": "state"
+              "fieldName": "headerPadding"
             },
             {
-              "name": "[\"min-date\"]",
+              "name": "body-padding",
               "type": {
-                "text": "FDateOption | undefined"
+                "text": "FAccordionPadding | undefined"
               },
-              "fieldName": "[\"min-date\"]"
+              "default": "\"none medium\"",
+              "fieldName": "bodyPadding"
             },
             {
-              "name": "[\"max-date\"]",
+              "name": "tooltip",
               "type": {
-                "text": "FDateOption | undefined"
-              },
-              "fieldName": "[\"max-date\"]"
-            },
-            {
-              "name": "[\"disable-date\"]",
-              "type": {
-                "text": "DateDisableType | undefined"
-              },
-              "default": "[]",
-              "fieldName": "[\"disable-date\"]"
-            },
-            {
-              "name": "clear",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "clear"
-            },
-            {
-              "name": "[\"is-range\"]",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "[\"is-range\"]"
-            },
-            {
-              "name": "inline",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "inline"
-            },
-            {
-              "name": "[\"week-number\"]",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "[\"week-number\"]"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "loading"
-            },
-            {
-              "name": "tooltip",
-              "type": {
-                "text": "string | undefined"
+                "text": "string | undefined"
               },
               "fieldName": "tooltip",
               "inheritedFrom": {
@@ -3035,266 +2508,368 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FDateTimePicker",
+          "name": "FAccordion",
           "declaration": {
-            "name": "FDateTimePicker",
-            "module": "src/components/f-date-time-picker/f-date-time-picker.ts"
+            "name": "FAccordion",
+            "module": "src/components/f-accordion/f-accordion.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-div/f-div.ts",
+      "path": "src/components/f-date-time-picker/f-date-time-picker.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "END :  constant values required for `f-div`",
-          "name": "FDiv",
+          "description": "",
+          "name": "FDateTimePicker",
           "members": [
-            {
-              "kind": "field",
-              "name": "fill",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\""
-            },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"block\" | \"curved\" | \"round\" | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
-              "default": "\"block\"",
+              "default": "\"curved\"",
               "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "category",
               "type": {
-                "text": "\"row\" | \"column\" | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "default": "\"row\"",
-              "attribute": "direction",
+              "default": "\"fill\"",
+              "attribute": "category",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "mode",
               "type": {
-                "text": "FDivStateProp | undefined"
+                "text": "\"date-time\" | \"date-only\" | \"time-only\" | undefined"
               },
-              "default": "\"transparent\"",
-              "attribute": "state",
+              "default": "\"date-time\"",
+              "attribute": "mode",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "border",
+              "name": "value",
               "type": {
-                "text": "FDivBorderProp | undefined"
+                "text": "DateValueType | undefined"
               },
-              "attribute": "border",
+              "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "gap",
+              "name": "placeholder",
               "type": {
-                "text": "\"auto\" | \"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | \"none\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"none\"",
-              "attribute": "gap",
+              "attribute": "placeholder",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "padding",
+              "name": "size",
               "type": {
-                "text": "FDivPaddingProp | undefined"
+                "text": "\"small\" | \"medium\" | undefined"
               },
-              "default": "\"none\"",
-              "attribute": "padding",
+              "default": "\"medium\"",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "align",
+              "name": "state",
               "type": {
-                "text": "| \"top-left\"\n\t\t| \"top-center\"\n\t\t| \"top-right\"\n\t\t| \"middle-left\"\n\t\t| \"middle-center\"\n\t\t| \"middle-right\"\n\t\t| \"bottom-left\"\n\t\t| \"bottom-center\"\n\t\t| \"bottom-right\" | undefined"
+                "text": "FDateTimePickerState | undefined"
               },
-              "default": "\"top-left\"",
-              "attribute": "align",
+              "default": "\"default\"",
+              "attribute": "state",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "width",
+              "name": "[\"min-date\"]",
               "type": {
-                "text": "FDivWidthProp | undefined"
+                "text": "FDateOption | undefined"
               },
-              "default": "\"fill-container\"",
-              "attribute": "width",
+              "attribute": "[\"min-date\"]",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "height",
+              "name": "[\"max-date\"]",
               "type": {
-                "text": "FDivHeightProp | undefined"
+                "text": "FDateOption | undefined"
               },
-              "default": "\"fill-container\"",
-              "attribute": "height",
+              "attribute": "[\"max-date\"]",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxWidth",
+              "name": "[\"disable-date\"]",
               "type": {
-                "text": "FDivWidthProp | undefined"
+                "text": "DateDisableType | undefined"
               },
-              "attribute": "max-width",
+              "default": "[]",
+              "attribute": "[\"disable-date\"]",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxHeight",
+              "name": "clear",
               "type": {
-                "text": "FDivHeightProp | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "max-height",
+              "default": "false",
+              "attribute": "clear",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "[\"is-range\"]",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "disabled",
+              "attribute": "[\"is-range\"]",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "inline",
               "type": {
-                "text": "\"skeleton\" | \"loader\" | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "loading",
+              "default": "false",
+              "attribute": "inline",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "clickable",
+              "name": "[\"week-number\"]",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "clickable",
+              "attribute": "[\"week-number\"]",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "highlight",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "highlight",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "overflow",
+              "name": "loading",
               "type": {
-                "text": "\"wrap\" | \"scroll\" | \"hidden\" | \"visible\" | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"wrap\"",
-              "attribute": "overflow",
+              "default": "false",
+              "attribute": "loading",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "dateTimePickerElement",
               "type": {
-                "text": "\"none\" | \"background\" | \"border\" | \"notch-right\" | \"notch-left\" | undefined"
-              },
-              "default": "\"none\"",
-              "attribute": "selected",
-              "reflects": true
+                "text": "FInput"
+              }
             },
             {
               "kind": "field",
-              "name": "sticky",
+              "name": "helpSlotElement",
               "type": {
-                "text": "\"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | undefined"
-              },
-              "default": "\"none\"",
-              "attribute": "sticky",
-              "reflects": true
-            },
-            {
-              "kind": "method",
-              "name": "applyBorder",
-              "description": "Applying border related style, based on value"
-            },
-            {
-              "kind": "method",
-              "name": "applyPadding",
-              "description": "Applying padding related style, based on value"
-            },
-            {
-              "kind": "method",
-              "name": "applySize",
-              "description": "Applying height,width related style, based on value"
-            },
-            {
-              "kind": "method",
-              "name": "checkHighlight"
+                "text": "FDiv"
+              }
             },
             {
               "kind": "field",
-              "name": "tooltipElement",
+              "name": "flatPickerElement",
               "type": {
-                "text": "HTMLElement"
+                "text": "Instance"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "description": "flatpickr instance"
             },
             {
               "kind": "field",
-              "name": "tooltip",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "tooltip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "name": "placeholderText",
+              "description": "conditional placeholder",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "mouseEnter",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "name": "regexDateTime",
+              "description": "regex for date-time validation on keyboard typing",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "mouseLeave",
-              "type": {
-                "text": "() => void | undefined"
+              "name": "dateValidationMessage",
+              "description": "validation message",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "parameters": [
+                {
+                  "name": "dateObj",
+                  "type": {
+                    "text": "object"
+                  }
+                },
+                {
+                  "name": "dateStr",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ],
+              "description": "emit input custom event"
+            },
+            {
+              "kind": "method",
+              "name": "dispatchInputEvent",
+              "parameters": [
+                {
+                  "name": "dateObj",
+                  "type": {
+                    "text": "object"
+                  },
+                  "description": "Date as an object"
+                },
+                {
+                  "name": "dateStr",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "Date oin string format"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "dateObjectFromString",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  },
+                  "description": "custom-event value having date string"
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "handleKeyboardInput",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "CustomEvent"
+                  },
+                  "description": "custom-event value having date string"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "datePickerOnChange",
+              "parameters": [
+                {
+                  "name": "selectedDates",
+                  "type": {
+                    "text": "Date[]"
+                  },
+                  "description": "selected date object array"
+                },
+                {
+                  "name": "dateStr",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "selected date string"
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "createDateTimePicker",
+              "parameters": [
+                {
+                  "name": "element",
+                  "type": {
+                    "text": "HTMLElement"
+                  },
+                  "description": "element w.r.t which creation of date picker takes place"
+                }
+              ],
+              "description": "creates date picker"
+            },
+            {
+              "kind": "method",
+              "name": "addWeekNoStyle",
+              "description": "week-number border conditional styling"
+            },
+            {
+              "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",
@@ -3318,142 +2893,126 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"block\" | \"curved\" | \"round\" | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
-              "default": "\"block\"",
+              "default": "\"curved\"",
               "fieldName": "variant"
             },
             {
-              "name": "direction",
+              "name": "category",
               "type": {
-                "text": "\"row\" | \"column\" | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "default": "\"row\"",
-              "fieldName": "direction"
+              "default": "\"fill\"",
+              "fieldName": "category"
             },
             {
-              "name": "state",
+              "name": "mode",
               "type": {
-                "text": "FDivStateProp | undefined"
+                "text": "\"date-time\" | \"date-only\" | \"time-only\" | undefined"
               },
-              "default": "\"transparent\"",
-              "fieldName": "state"
+              "default": "\"date-time\"",
+              "fieldName": "mode"
             },
             {
-              "name": "border",
+              "name": "value",
               "type": {
-                "text": "FDivBorderProp | undefined"
+                "text": "DateValueType | undefined"
               },
-              "fieldName": "border"
+              "fieldName": "value"
             },
             {
-              "name": "gap",
+              "name": "placeholder",
               "type": {
-                "text": "\"auto\" | \"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | \"none\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"none\"",
-              "fieldName": "gap"
+              "fieldName": "placeholder"
             },
             {
-              "name": "padding",
+              "name": "size",
               "type": {
-                "text": "FDivPaddingProp | undefined"
+                "text": "\"small\" | \"medium\" | undefined"
               },
-              "default": "\"none\"",
-              "fieldName": "padding"
+              "default": "\"medium\"",
+              "fieldName": "size"
             },
             {
-              "name": "align",
+              "name": "state",
               "type": {
-                "text": "| \"top-left\"\n\t\t| \"top-center\"\n\t\t| \"top-right\"\n\t\t| \"middle-left\"\n\t\t| \"middle-center\"\n\t\t| \"middle-right\"\n\t\t| \"bottom-left\"\n\t\t| \"bottom-center\"\n\t\t| \"bottom-right\" | undefined"
+                "text": "FDateTimePickerState | undefined"
               },
-              "default": "\"top-left\"",
-              "fieldName": "align"
+              "default": "\"default\"",
+              "fieldName": "state"
             },
             {
-              "name": "width",
+              "name": "[\"min-date\"]",
               "type": {
-                "text": "FDivWidthProp | undefined"
+                "text": "FDateOption | undefined"
               },
-              "default": "\"fill-container\"",
-              "fieldName": "width"
+              "fieldName": "[\"min-date\"]"
             },
             {
-              "name": "height",
+              "name": "[\"max-date\"]",
               "type": {
-                "text": "FDivHeightProp | undefined"
+                "text": "FDateOption | undefined"
               },
-              "default": "\"fill-container\"",
-              "fieldName": "height"
+              "fieldName": "[\"max-date\"]"
             },
             {
-              "name": "max-width",
+              "name": "[\"disable-date\"]",
               "type": {
-                "text": "FDivWidthProp | undefined"
+                "text": "DateDisableType | undefined"
               },
-              "fieldName": "maxWidth"
+              "default": "[]",
+              "fieldName": "[\"disable-date\"]"
             },
             {
-              "name": "max-height",
+              "name": "clear",
               "type": {
-                "text": "FDivHeightProp | undefined"
+                "text": "boolean | undefined"
               },
-              "fieldName": "maxHeight"
+              "default": "false",
+              "fieldName": "clear"
             },
             {
-              "name": "disabled",
+              "name": "[\"is-range\"]",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "[\"is-range\"]"
             },
             {
-              "name": "loading",
+              "name": "inline",
               "type": {
-                "text": "\"skeleton\" | \"loader\" | undefined"
+                "text": "boolean | undefined"
               },
-              "fieldName": "loading"
+              "default": "false",
+              "fieldName": "inline"
             },
             {
-              "name": "clickable",
+              "name": "[\"week-number\"]",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "clickable"
+              "fieldName": "[\"week-number\"]"
             },
             {
-              "name": "highlight",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "highlight"
+              "fieldName": "disabled"
             },
             {
-              "name": "overflow",
+              "name": "loading",
               "type": {
-                "text": "\"wrap\" | \"scroll\" | \"hidden\" | \"visible\" | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"wrap\"",
-              "fieldName": "overflow"
-            },
-            {
-              "name": "selected",
-              "type": {
-                "text": "\"none\" | \"background\" | \"border\" | \"notch-right\" | \"notch-left\" | undefined"
-              },
-              "default": "\"none\"",
-              "fieldName": "selected"
-            },
-            {
-              "name": "sticky",
-              "type": {
-                "text": "\"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | undefined"
-              },
-              "default": "\"none\"",
-              "fieldName": "sticky"
+              "default": "false",
+              "fieldName": "loading"
             },
             {
               "name": "tooltip",
@@ -3470,29 +3029,28 @@
           "superclass": {
             "name": "FRoot",
             "module": "/src/mixins/components/f-root/f-root"
-          },
-          "summary": "F-div is used as a container for HTML elements."
+          }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FDiv",
+          "name": "FDateTimePicker",
           "declaration": {
-            "name": "FDiv",
-            "module": "src/components/f-div/f-div.ts"
+            "name": "FDateTimePicker",
+            "module": "src/components/f-date-time-picker/f-date-time-picker.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-divider/f-divider.ts",
+      "path": "src/components/f-div/f-div.ts",
       "declarations": [
         {
           "kind": "class",
-          "description": "",
-          "name": "FDivider",
+          "description": "END :  constant values required for `f-div`",
+          "name": "FDiv",
           "members": [
             {
               "kind": "field",
@@ -3506,503 +3064,196 @@
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"solid\" | \"dashed\" | \"dotted\" | undefined"
+                "text": "\"block\" | \"curved\" | \"round\" | undefined"
               },
-              "default": "\"solid\"",
+              "default": "\"block\"",
               "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "direction",
               "type": {
-                "text": "\"large\" | \"medium\" | undefined"
+                "text": "\"row\" | \"column\" | undefined"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
+              "default": "\"row\"",
+              "attribute": "direction",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "state",
               "type": {
-                "text": "FDividerState | undefined"
+                "text": "FDivStateProp | undefined"
               },
-              "default": "\"default\"",
+              "default": "\"transparent\"",
               "attribute": "state",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltipElement",
+              "name": "border",
               "type": {
-                "text": "HTMLElement"
+                "text": "FDivBorderProp | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "attribute": "border",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltip",
+              "name": "gap",
               "type": {
-                "text": "string | undefined"
+                "text": "\"auto\" | \"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | \"none\" | undefined"
               },
-              "attribute": "tooltip",
-              "reflects": true,
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "\"none\"",
+              "attribute": "gap",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseEnter",
+              "name": "padding",
               "type": {
-                "text": "() => void | undefined"
+                "text": "FDivPaddingProp | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "\"none\"",
+              "attribute": "padding",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseLeave",
+              "name": "align",
               "type": {
-                "text": "() => void | undefined"
+                "text": "| \"top-left\"\n\t\t| \"top-center\"\n\t\t| \"top-right\"\n\t\t| \"middle-left\"\n\t\t| \"middle-center\"\n\t\t| \"middle-right\"\n\t\t| \"bottom-left\"\n\t\t| \"bottom-center\"\n\t\t| \"bottom-right\" | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "\"top-left\"",
+              "attribute": "align",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isMouseOver",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"solid\" | \"dashed\" | \"dotted\" | undefined"
-              },
-              "default": "\"solid\"",
-              "fieldName": "variant"
-            },
-            {
-              "name": "size",
-              "type": {
-                "text": "\"large\" | \"medium\" | undefined"
-              },
-              "default": "\"medium\"",
-              "fieldName": "size"
-            },
-            {
-              "name": "state",
+              "name": "width",
               "type": {
-                "text": "FDividerState | undefined"
+                "text": "FDivWidthProp | undefined"
               },
-              "default": "\"default\"",
-              "fieldName": "state"
+              "default": "\"fill-container\"",
+              "attribute": "width",
+              "reflects": 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": "FDivider",
-          "declaration": {
-            "name": "FDivider",
-            "module": "src/components/f-divider/f-divider.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-emoji-picker/f-emoji-picker.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FEmojiPicker",
-          "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "height",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "FDivHeightProp | undefined"
               },
-              "default": "\"curved\"",
-              "attribute": "variant",
+              "default": "\"fill-container\"",
+              "attribute": "height",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "category",
+              "name": "maxWidth",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "FDivWidthProp | undefined"
               },
-              "default": "\"fill\"",
-              "attribute": "category",
+              "attribute": "max-width",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "maxHeight",
               "type": {
-                "text": "string | undefined"
+                "text": "FDivHeightProp | undefined"
               },
-              "attribute": "value",
+              "attribute": "max-height",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "disabled",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "placeholder",
+              "default": "false",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "loading",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "\"skeleton\" | \"loader\" | undefined"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
+              "attribute": "loading",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "clickable",
               "type": {
-                "text": "FEmojiPickerState | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
+              "default": "false",
+              "attribute": "clickable",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "recent",
+              "name": "highlight",
               "type": {
-                "text": "RecentEmojis | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "[]",
-              "attribute": "recent",
+              "default": "false",
+              "attribute": "highlight",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "include",
+              "name": "overflow",
               "type": {
-                "text": "FEmojiPickerIncludesCategories | undefined"
+                "text": "\"wrap\" | \"scroll\" | \"hidden\" | \"visible\" | undefined"
               },
-              "default": "[]",
-              "attribute": "include",
+              "default": "\"wrap\"",
+              "attribute": "overflow",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "exclude",
+              "name": "selected",
               "type": {
-                "text": "FEmojiPickerExcludesCategories | undefined"
+                "text": "\"none\" | \"background\" | \"border\" | \"notch-right\" | \"notch-left\" | undefined"
               },
-              "default": "[]",
-              "attribute": "exclude",
+              "default": "\"none\"",
+              "attribute": "selected",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "[\"exclude-emojis\"]",
+              "name": "sticky",
               "type": {
-                "text": "ExcludeEmojis | undefined"
+                "text": "\"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | undefined"
               },
-              "default": "[]",
-              "attribute": "[\"exclude-emojis\"]",
+              "default": "\"none\"",
+              "attribute": "sticky",
               "reflects": true
             },
             {
-              "kind": "field",
-              "name": "custom",
-              "type": {
-                "text": "FEmojiPickerCustomEmojiData | undefined"
-              },
-              "default": "[]",
-              "attribute": "custom",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "[\"close-on-select\"]",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "[\"close-on-select\"]",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "clear",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "true",
-              "attribute": "clear",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "_labelNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_descriptionNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "_helpNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "emojiPickerHeader",
-              "type": {
-                "text": "FDiv"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "emojiPickerError",
-              "type": {
-                "text": "FDiv"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "labelSlot",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "descriptionSlot",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "helpSlot",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "emojiPicker",
-              "type": {
-                "text": "FDiv"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "emojiPickerPopover",
-              "type": {
-                "text": "FPopover"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "picker",
-              "type": {
-                "text": "Picker | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "categories",
-              "type": {
-                "text": "array"
-              },
-              "default": "[\n\t\t\"frequent\",\n\t\t\"people\",\n\t\t\"nature\",\n\t\t\"foods\",\n\t\t\"activity\",\n\t\t\"places\",\n\t\t\"objects\",\n\t\t\"symbols\",\n\t\t\"flags\"\n\t]"
-            },
-            {
-              "kind": "field",
-              "name": "hasLabel",
-              "description": "has label slot",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "hasDescription",
-              "description": "has description slot",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "hasHelperText",
-              "description": "has help slot",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "iconSize",
-              "description": "icon size",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "excludeCategories",
-              "description": "exclude categories",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "categroiesToDisplay",
-              "description": "categories to be displayed for picker according to inclide amd exclude",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "headerSectionDisplay",
-              "description": "header slot display"
-            },
-            {
-              "kind": "method",
-              "name": "helpSectionDisplay",
-              "description": "help section display"
-            },
-            {
-              "kind": "method",
-              "name": "toggleEmojiPicker",
-              "parameters": [
-                {
-                  "name": "value",
-                  "type": {
-                    "text": "boolean"
-                  },
-                  "description": "boolean"
-                }
-              ],
-              "description": "open/close picker"
-            },
-            {
-              "kind": "method",
-              "name": "handleSelectEmoji",
-              "parameters": [
-                {
-                  "name": "valuePicked",
-                  "optional": true,
-                  "type": {
-                    "text": "Emoji"
-                  },
-                  "description": "emoji as value"
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "clearValue",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "MouseEvent"
-                }
-              ],
-              "description": "clear emoji value"
-            },
-            {
-              "kind": "method",
-              "name": "handleFrequentEmojiCategory",
-              "description": "add recently used emojis"
+              "kind": "method",
+              "name": "applyBorder",
+              "description": "Applying border related style, based on value"
             },
             {
               "kind": "method",
-              "name": "handleCustomEmoji",
-              "description": "handle custom emoji insertion"
+              "name": "applyPadding",
+              "description": "Applying padding related style, based on value"
             },
             {
               "kind": "method",
-              "name": "validateProperties",
-              "description": "validation for placeolder"
+              "name": "applySize",
+              "description": "Applying height,width related style, based on value"
             },
             {
               "kind": "method",
-              "name": "closeEmojiPicker",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "mMouseEvent"
-                },
-                {
-                  "name": "element",
-                  "type": {
-                    "text": "FEmojiPicker"
-                  },
-                  "description": "emoji-picker component"
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "outsideClick"
+              "name": "checkHighlight"
             },
             {
               "kind": "field",
@@ -4067,112 +3318,142 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "\"block\" | \"curved\" | \"round\" | undefined"
               },
-              "default": "\"curved\"",
+              "default": "\"block\"",
               "fieldName": "variant"
             },
             {
-              "name": "category",
+              "name": "direction",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "\"row\" | \"column\" | undefined"
               },
-              "default": "\"fill\"",
-              "fieldName": "category"
+              "default": "\"row\"",
+              "fieldName": "direction"
             },
             {
-              "name": "value",
+              "name": "state",
               "type": {
-                "text": "string | undefined"
+                "text": "FDivStateProp | undefined"
               },
-              "fieldName": "value"
+              "default": "\"transparent\"",
+              "fieldName": "state"
             },
             {
-              "name": "placeholder",
+              "name": "border",
               "type": {
-                "text": "string | undefined"
+                "text": "FDivBorderProp | undefined"
               },
-              "fieldName": "placeholder"
+              "fieldName": "border"
             },
             {
-              "name": "size",
+              "name": "gap",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "\"auto\" | \"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | \"none\" | undefined"
               },
-              "default": "\"medium\"",
-              "fieldName": "size"
+              "default": "\"none\"",
+              "fieldName": "gap"
             },
             {
-              "name": "state",
+              "name": "padding",
               "type": {
-                "text": "FEmojiPickerState | undefined"
+                "text": "FDivPaddingProp | undefined"
               },
-              "default": "\"default\"",
-              "fieldName": "state"
+              "default": "\"none\"",
+              "fieldName": "padding"
             },
             {
-              "name": "recent",
+              "name": "align",
               "type": {
-                "text": "RecentEmojis | undefined"
+                "text": "| \"top-left\"\n\t\t| \"top-center\"\n\t\t| \"top-right\"\n\t\t| \"middle-left\"\n\t\t| \"middle-center\"\n\t\t| \"middle-right\"\n\t\t| \"bottom-left\"\n\t\t| \"bottom-center\"\n\t\t| \"bottom-right\" | undefined"
               },
-              "default": "[]",
-              "fieldName": "recent"
+              "default": "\"top-left\"",
+              "fieldName": "align"
             },
             {
-              "name": "include",
+              "name": "width",
               "type": {
-                "text": "FEmojiPickerIncludesCategories | undefined"
+                "text": "FDivWidthProp | undefined"
               },
-              "default": "[]",
-              "fieldName": "include"
+              "default": "\"fill-container\"",
+              "fieldName": "width"
             },
             {
-              "name": "exclude",
+              "name": "height",
               "type": {
-                "text": "FEmojiPickerExcludesCategories | undefined"
+                "text": "FDivHeightProp | undefined"
               },
-              "default": "[]",
-              "fieldName": "exclude"
+              "default": "\"fill-container\"",
+              "fieldName": "height"
             },
             {
-              "name": "[\"exclude-emojis\"]",
+              "name": "max-width",
               "type": {
-                "text": "ExcludeEmojis | undefined"
+                "text": "FDivWidthProp | undefined"
               },
-              "default": "[]",
-              "fieldName": "[\"exclude-emojis\"]"
+              "fieldName": "maxWidth"
             },
             {
-              "name": "custom",
+              "name": "max-height",
               "type": {
-                "text": "FEmojiPickerCustomEmojiData | undefined"
+                "text": "FDivHeightProp | undefined"
               },
-              "default": "[]",
-              "fieldName": "custom"
+              "fieldName": "maxHeight"
             },
             {
-              "name": "[\"close-on-select\"]",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "[\"close-on-select\"]"
+              "fieldName": "disabled"
             },
             {
-              "name": "clear",
+              "name": "loading",
+              "type": {
+                "text": "\"skeleton\" | \"loader\" | undefined"
+              },
+              "fieldName": "loading"
+            },
+            {
+              "name": "clickable",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
-              "fieldName": "clear"
+              "default": "false",
+              "fieldName": "clickable"
             },
             {
-              "name": "disabled",
+              "name": "highlight",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "highlight"
+            },
+            {
+              "name": "overflow",
+              "type": {
+                "text": "\"wrap\" | \"scroll\" | \"hidden\" | \"visible\" | undefined"
+              },
+              "default": "\"wrap\"",
+              "fieldName": "overflow"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "\"none\" | \"background\" | \"border\" | \"notch-right\" | \"notch-left\" | undefined"
+              },
+              "default": "\"none\"",
+              "fieldName": "selected"
+            },
+            {
+              "name": "sticky",
+              "type": {
+                "text": "\"none\" | \"top\" | \"bottom\" | \"left\" | \"right\" | undefined"
+              },
+              "default": "\"none\"",
+              "fieldName": "sticky"
             },
             {
               "name": "tooltip",
@@ -4189,105 +3470,66 @@
           "superclass": {
             "name": "FRoot",
             "module": "/src/mixins/components/f-root/f-root"
-          }
+          },
+          "summary": "F-div is used as a container for HTML elements."
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "FEmojiPicker",
+          "name": "FDiv",
           "declaration": {
-            "name": "FEmojiPicker",
-            "module": "src/components/f-emoji-picker/f-emoji-picker.ts"
+            "name": "FDiv",
+            "module": "src/components/f-div/f-div.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-field/f-field.ts",
+      "path": "src/components/f-divider/f-divider.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FField",
+          "name": "FDivider",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "fill",
               "type": {
-                "text": "\"inline\" | \"normal\" | undefined"
+                "text": "string"
               },
-              "default": "\"normal\"",
-              "attribute": "variant",
-              "reflects": true
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "variant",
               "type": {
-                "text": "FFieldStateProp | undefined"
+                "text": "\"solid\" | \"dashed\" | \"dotted\" | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
+              "default": "\"solid\"",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "\"large\" | \"medium\" | undefined"
               },
+              "default": "\"medium\"",
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "description",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "description",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "canDuplicate",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "can-duplicate",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "loading",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "readOnlyValue",
+              "name": "state",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FDividerState | undefined"
               },
-              "default": "false",
-              "attribute": "read-only",
+              "default": "\"default\"",
+              "attribute": "state",
               "reflects": true
             },
             {
@@ -4353,64 +3595,26 @@
             {
               "name": "variant",
               "type": {
-                "text": "\"inline\" | \"normal\" | undefined"
+                "text": "\"solid\" | \"dashed\" | \"dotted\" | undefined"
               },
-              "default": "\"normal\"",
+              "default": "\"solid\"",
               "fieldName": "variant"
             },
-            {
-              "name": "state",
-              "type": {
-                "text": "FFieldStateProp | undefined"
-              },
-              "default": "\"default\"",
-              "fieldName": "state"
-            },
             {
               "name": "size",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "\"large\" | \"medium\" | undefined"
               },
+              "default": "\"medium\"",
               "fieldName": "size"
             },
             {
-              "name": "description",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "description"
-            },
-            {
-              "name": "can-duplicate",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "canDuplicate"
-            },
-            {
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "disabled"
-            },
-            {
-              "name": "loading",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "loading"
-            },
-            {
-              "name": "read-only",
+              "name": "state",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FDividerState | undefined"
               },
-              "default": "false",
-              "fieldName": "readOnlyValue"
+              "default": "\"default\"",
+              "fieldName": "state"
             },
             {
               "name": "tooltip",
@@ -4427,229 +3631,155 @@
           "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": "FField",
+          "name": "FDivider",
           "declaration": {
-            "name": "FField",
-            "module": "src/components/f-field/f-field.ts"
+            "name": "FDivider",
+            "module": "src/components/f-divider/f-divider.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-form/f-form.ts",
+      "path": "src/components/f-emoji-picker/f-emoji-picker.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FForm",
+          "name": "FEmojiPicker",
           "members": [
             {
               "kind": "field",
-              "name": "gap",
+              "name": "variant",
               "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
-              "default": "\"medium\"",
-              "attribute": "gap",
+              "default": "\"curved\"",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "separator",
+              "name": "category",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "default": "false",
-              "attribute": "separator",
+              "default": "\"fill\"",
+              "attribute": "category",
               "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",
+              "name": "value",
               "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"
-              }
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseLeave",
+              "name": "placeholder",
               "type": {
-                "text": "() => void | undefined"
+                "text": "string | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "attribute": "placeholder",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isMouseOver",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "gap",
+              "name": "size",
               "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
               "default": "\"medium\"",
-              "fieldName": "gap"
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "name": "separator",
+              "kind": "field",
+              "name": "state",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FEmojiPickerState | undefined"
               },
-              "default": "false",
-              "fieldName": "separator"
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": 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"
-          },
-          "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",
+              "name": "recent",
               "type": {
-                "text": "\"single\" | \"multiple\" | undefined"
+                "text": "RecentEmojis | undefined"
               },
-              "default": "\"single\"",
-              "attribute": "type",
+              "default": "[]",
+              "attribute": "recent",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "include",
               "type": {
-                "text": "FFileUploadValueType | undefined"
+                "text": "FEmojiPickerIncludesCategories | undefined"
               },
-              "attribute": "value"
+              "default": "[]",
+              "attribute": "include",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "placeholder",
+              "name": "exclude",
               "type": {
-                "text": "string | undefined"
+                "text": "FEmojiPickerExcludesCategories | undefined"
               },
-              "attribute": "placeholder",
+              "default": "[]",
+              "attribute": "exclude",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "fileType",
+              "name": "[\"exclude-emojis\"]",
               "type": {
-                "text": "FFileUploadFileType | undefined"
+                "text": "ExcludeEmojis | undefined"
               },
-              "default": "\"all\"",
-              "attribute": "file-type",
+              "default": "[]",
+              "attribute": "[\"exclude-emojis\"]",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "custom",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "FEmojiPickerCustomEmojiData | undefined"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
+              "default": "[]",
+              "attribute": "custom",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "[\"close-on-select\"]",
               "type": {
-                "text": "FFileUploadState | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
+              "default": "false",
+              "attribute": "[\"close-on-select\"]",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxSize",
+              "name": "clear",
               "type": {
-                "text": "FFileUploadSizeProp | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "max-size",
+              "default": "true",
+              "attribute": "clear",
               "reflects": true
             },
             {
@@ -4664,122 +3794,88 @@
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "_labelNodes",
               "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "loading",
-              "reflects": true
+                "text": "NodeListOf<HTMLElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "fileUploadSection",
+              "name": "_descriptionNodes",
               "type": {
-                "text": "HTMLElement"
+                "text": "NodeListOf<HTMLElement>"
               }
             },
             {
               "kind": "field",
-              "name": "fileUploadHeader",
+              "name": "_helpNodes",
               "type": {
-                "text": "FDiv"
+                "text": "NodeListOf<HTMLElement>"
               }
             },
             {
               "kind": "field",
-              "name": "fileUploadError",
+              "name": "emojiPickerHeader",
               "type": {
                 "text": "FDiv"
               }
             },
             {
               "kind": "field",
-              "name": "labelSlot",
+              "name": "emojiPickerError",
               "type": {
-                "text": "HTMLElement"
+                "text": "FDiv"
               }
             },
             {
               "kind": "field",
-              "name": "descriptionSlot",
+              "name": "labelSlot",
               "type": {
                 "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "helpSlot",
+              "name": "descriptionSlot",
               "type": {
                 "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "textOverflow",
+              "name": "helpSlot",
               "type": {
-                "text": "FText"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "_labelNodes",
+              "name": "emojiPicker",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
+                "text": "FDiv"
               }
             },
             {
               "kind": "field",
-              "name": "_descriptionNodes",
+              "name": "emojiPickerPopover",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
+                "text": "FPopover"
               }
             },
             {
               "kind": "field",
-              "name": "_helpNodes",
+              "name": "picker",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
+                "text": "Picker | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "bytes",
-              "type": {
-                "text": "number"
-              },
-              "default": "0"
-            },
-            {
-              "kind": "field",
-              "name": "sizeLimitFlag",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "acceptedFilesFlag",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "true"
-            },
-            {
-              "kind": "field",
-              "name": "selectedFiles",
+              "name": "categories",
               "type": {
-                "text": "File[] | undefined"
+                "text": "array"
               },
-              "default": "[]"
-            },
-            {
-              "kind": "field",
-              "name": "fileInputRef",
-              "type": {
-                "text": "Ref<HTMLInputElement>"
-              }
+              "default": "[\n\t\t\"frequent\",\n\t\t\"people\",\n\t\t\"nature\",\n\t\t\"foods\",\n\t\t\"activity\",\n\t\t\"places\",\n\t\t\"objects\",\n\t\t\"symbols\",\n\t\t\"flags\"\n\t]"
             },
             {
               "kind": "field",
@@ -4801,85 +3897,63 @@
             },
             {
               "kind": "field",
-              "name": "fileFormatError",
-              "description": "error if file format is incorrect",
+              "name": "iconSize",
+              "description": "icon size",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "fileSizeError",
-              "description": "error if file size is more than given size",
+              "name": "excludeCategories",
+              "description": "exclude categories",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "dispatchValue",
-              "description": "value for event dispatch",
+              "name": "categroiesToDisplay",
+              "description": "categories to be displayed for picker according to inclide amd exclude",
               "readonly": true
             },
             {
               "kind": "method",
-              "name": "handleClick",
-              "description": "on click open file selector window on OS"
-            },
-            {
-              "kind": "method",
-              "name": "dropFile",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "DragEvent"
-                  },
-                  "description": "DragEvent\ndrag and drop file(s) and event emission"
-                }
-              ]
+              "name": "headerSectionDisplay",
+              "description": "header slot display"
             },
             {
               "kind": "method",
-              "name": "selectFile",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "InputEvent"
-                  },
-                  "description": "InputEvent"
-                }
-              ],
-              "description": "select file(s) from browse options"
+              "name": "helpSectionDisplay",
+              "description": "help section display"
             },
             {
               "kind": "method",
-              "name": "dispatchOnInput",
+              "name": "toggleEmojiPicker",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "value",
                   "type": {
-                    "text": "Event"
+                    "text": "boolean"
                   },
-                  "description": "Event"
+                  "description": "boolean"
                 }
               ],
-              "description": "dispatch input event"
+              "description": "open/close picker"
             },
             {
               "kind": "method",
-              "name": "handleRemoveFile",
+              "name": "handleSelectEmoji",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "valuePicked",
+                  "optional": true,
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "Emoji"
                   },
-                  "description": "MouseEvent"
+                  "description": "emoji as value"
                 }
-              ],
-              "description": "on click remove the selected single file"
+              ]
             },
             {
               "kind": "method",
-              "name": "handleRemoveRespectiveFile",
+              "name": "clearValue",
               "parameters": [
                 {
                   "name": "e",
@@ -4887,98 +3961,48 @@
                     "text": "MouseEvent"
                   },
                   "description": "MouseEvent"
-                },
-                {
-                  "name": "file",
-                  "type": {
-                    "text": "File"
-                  },
-                  "description": "contains clicked file"
                 }
               ],
-              "description": "removes the clicked respective file from selection array"
+              "description": "clear emoji value"
             },
             {
               "kind": "method",
-              "name": "checkOverflowing",
-              "description": "check if ellipsis happens on text and insert tooltip"
+              "name": "handleFrequentEmojiCategory",
+              "description": "add recently used emojis"
             },
             {
               "kind": "method",
-              "name": "handleMouseEnter",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  },
-                  "description": "MouseEvent"
-                }
-              ],
-              "description": "in multiple file selection hovering on the particular file name may open the tooltip -if ellipsis is present"
+              "name": "handleCustomEmoji",
+              "description": "handle custom emoji insertion"
             },
             {
               "kind": "method",
-              "name": "isLetter",
-              "parameters": [
-                {
-                  "name": "str",
-                  "type": {
-                    "text": "string"
-                  },
-                  "description": "single character"
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": ""
-                }
-              }
+              "name": "validateProperties",
+              "description": "validation for placeolder"
             },
             {
               "kind": "method",
-              "name": "split",
+              "name": "closeEmojiPicker",
               "parameters": [
                 {
-                  "name": "str",
+                  "name": "e",
                   "type": {
-                    "text": "string"
+                    "text": "MouseEvent"
                   },
-                  "description": "string"
+                  "description": "mMouseEvent"
                 },
                 {
-                  "name": "index",
+                  "name": "element",
                   "type": {
-                    "text": "number"
+                    "text": "FEmojiPicker"
                   },
-                  "description": "index to splice from"
-                }
-              ],
-              "return": {
-                "type": {
-                  "text": ""
+                  "description": "emoji-picker component"
                 }
-              }
-            },
-            {
-              "kind": "method",
-              "name": "updateSelectedValues",
-              "description": "update file array locally"
-            },
-            {
-              "kind": "method",
-              "name": "helpSectionMessages",
-              "description": "display messages according to conditions"
-            },
-            {
-              "kind": "method",
-              "name": "helpSectionDisplay",
-              "description": "conditional help section display for false spacing issue"
+              ]
             },
             {
-              "kind": "method",
-              "name": "headerSectionDisplay",
-              "description": "conditional header section display for false spacing issue"
+              "kind": "field",
+              "name": "outsideClick"
             },
             {
               "kind": "field",
@@ -5041,34 +4065,34 @@
           ],
           "attributes": [
             {
-              "name": "type",
+              "name": "variant",
               "type": {
-                "text": "\"single\" | \"multiple\" | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
-              "default": "\"single\"",
-              "fieldName": "type"
+              "default": "\"curved\"",
+              "fieldName": "variant"
             },
             {
-              "name": "value",
+              "name": "category",
               "type": {
-                "text": "FFileUploadValueType | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "fieldName": "value"
+              "default": "\"fill\"",
+              "fieldName": "category"
             },
             {
-              "name": "placeholder",
+              "name": "value",
               "type": {
                 "text": "string | undefined"
               },
-              "fieldName": "placeholder"
+              "fieldName": "value"
             },
             {
-              "name": "file-type",
+              "name": "placeholder",
               "type": {
-                "text": "FFileUploadFileType | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"all\"",
-              "fieldName": "fileType"
+              "fieldName": "placeholder"
             },
             {
               "name": "size",
@@ -5081,33 +4105,74 @@
             {
               "name": "state",
               "type": {
-                "text": "FFileUploadState | undefined"
+                "text": "FEmojiPickerState | undefined"
               },
               "default": "\"default\"",
               "fieldName": "state"
             },
             {
-              "name": "max-size",
+              "name": "recent",
               "type": {
-                "text": "FFileUploadSizeProp | undefined"
+                "text": "RecentEmojis | undefined"
               },
-              "fieldName": "maxSize"
+              "default": "[]",
+              "fieldName": "recent"
             },
             {
-              "name": "disabled",
+              "name": "include",
+              "type": {
+                "text": "FEmojiPickerIncludesCategories | undefined"
+              },
+              "default": "[]",
+              "fieldName": "include"
+            },
+            {
+              "name": "exclude",
+              "type": {
+                "text": "FEmojiPickerExcludesCategories | undefined"
+              },
+              "default": "[]",
+              "fieldName": "exclude"
+            },
+            {
+              "name": "[\"exclude-emojis\"]",
+              "type": {
+                "text": "ExcludeEmojis | undefined"
+              },
+              "default": "[]",
+              "fieldName": "[\"exclude-emojis\"]"
+            },
+            {
+              "name": "custom",
+              "type": {
+                "text": "FEmojiPickerCustomEmojiData | undefined"
+              },
+              "default": "[]",
+              "fieldName": "custom"
+            },
+            {
+              "name": "[\"close-on-select\"]",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "[\"close-on-select\"]"
             },
             {
-              "name": "loading",
+              "name": "clear",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "fieldName": "clear"
+            },
+            {
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "loading"
+              "fieldName": "disabled"
             },
             {
               "name": "tooltip",
@@ -5130,37 +4195,28 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FFileUpload",
+          "name": "FEmojiPicker",
           "declaration": {
-            "name": "FFileUpload",
-            "module": "src/components/f-file-upload/f-file-upload.ts"
+            "name": "FEmojiPicker",
+            "module": "src/components/f-emoji-picker/f-emoji-picker.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-form-group/f-form-group.ts",
+      "path": "src/components/f-field/f-field.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FFormGroup",
+          "name": "FField",
           "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "FGroupLabel | undefined"
-              },
-              "attribute": "label",
-              "reflects": true
-            },
             {
               "kind": "field",
               "name": "variant",
               "type": {
-                "text": "\"normal\" | \"compact\" | undefined"
+                "text": "\"inline\" | \"normal\" | undefined"
               },
               "default": "\"normal\"",
               "attribute": "variant",
@@ -5168,75 +4224,71 @@
             },
             {
               "kind": "field",
-              "name": "direction",
+              "name": "state",
               "type": {
-                "text": "\"vertical\" | \"horizontal\" | undefined"
+                "text": "FFieldStateProp | undefined"
               },
-              "default": "\"vertical\"",
-              "attribute": "direction",
+              "default": "\"default\"",
+              "attribute": "state",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "gap",
+              "name": "size",
               "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
-              "default": "\"small\"",
-              "attribute": "gap",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "collapse",
+              "name": "description",
               "type": {
-                "text": "\"none\" | \"accordion\" | \"text\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"none\"",
-              "attribute": "collapse",
+              "attribute": "description",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "isCollapsed",
+              "name": "canDuplicate",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "is-collapsed",
+              "attribute": "can-duplicate",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "canDuplicate",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "can-duplicate",
+              "attribute": "disabled",
               "reflects": true
             },
             {
-              "kind": "method",
-              "name": "applyStyles",
-              "description": "apply styles"
-            },
-            {
-              "kind": "method",
-              "name": "applyCursorStyles",
-              "description": "apply cursor styles"
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "loading",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "duplicationClick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "readOnlyValue",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "read-only",
+              "reflects": true
             },
             {
               "kind": "field",
@@ -5299,59 +4351,66 @@
           ],
           "attributes": [
             {
-              "name": "label",
+              "name": "variant",
               "type": {
-                "text": "FGroupLabel | undefined"
+                "text": "\"inline\" | \"normal\" | undefined"
               },
-              "fieldName": "label"
+              "default": "\"normal\"",
+              "fieldName": "variant"
             },
             {
-              "name": "variant",
+              "name": "state",
               "type": {
-                "text": "\"normal\" | \"compact\" | undefined"
+                "text": "FFieldStateProp | undefined"
               },
-              "default": "\"normal\"",
-              "fieldName": "variant"
+              "default": "\"default\"",
+              "fieldName": "state"
             },
             {
-              "name": "direction",
+              "name": "size",
               "type": {
-                "text": "\"vertical\" | \"horizontal\" | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
-              "default": "\"vertical\"",
-              "fieldName": "direction"
+              "fieldName": "size"
             },
             {
-              "name": "gap",
+              "name": "description",
               "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"small\"",
-              "fieldName": "gap"
+              "fieldName": "description"
             },
             {
-              "name": "collapse",
+              "name": "can-duplicate",
               "type": {
-                "text": "\"none\" | \"accordion\" | \"text\" | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"none\"",
-              "fieldName": "collapse"
+              "default": "false",
+              "fieldName": "canDuplicate"
             },
             {
-              "name": "is-collapsed",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "isCollapsed"
+              "fieldName": "disabled"
             },
             {
-              "name": "can-duplicate",
+              "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "canDuplicate"
+              "fieldName": "loading"
+            },
+            {
+              "name": "read-only",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "readOnlyValue"
             },
             {
               "name": "tooltip",
@@ -5375,371 +4434,465 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FFormGroup",
+          "name": "FField",
           "declaration": {
-            "name": "FFormGroup",
-            "module": "src/components/f-form-group/f-form-group.ts"
+            "name": "FField",
+            "module": "src/components/f-field/f-field.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-grid/f-grid.ts",
+      "path": "src/components/f-file-upload/f-file-upload.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FGrid",
+          "name": "FFileUpload",
           "members": [
             {
               "kind": "field",
-              "name": "minCellWidth",
+              "name": "type",
               "type": {
-                "text": "number | undefined"
+                "text": "\"single\" | \"multiple\" | undefined"
               },
-              "attribute": "min-cell-width",
+              "default": "\"single\"",
+              "attribute": "type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "maxCellWidth",
+              "name": "value",
               "type": {
-                "text": "number | undefined"
+                "text": "FFileUploadValueType | undefined"
               },
-              "attribute": "max-cell-width",
-              "reflects": true
+              "attribute": "value"
             },
             {
               "kind": "field",
-              "name": "cellHeight",
+              "name": "placeholder",
               "type": {
-                "text": "number | undefined"
+                "text": "string | undefined"
               },
-              "attribute": "cell-height",
+              "attribute": "placeholder",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "gap",
+              "name": "fileType",
               "type": {
-                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "FFileUploadFileType | undefined"
               },
-              "default": "\"small\"",
-              "attribute": "gap",
+              "default": "\"all\"",
+              "attribute": "file-type",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "gridTemplateColumns",
-              "description": "grid-template-columns to assign cell-width",
-              "readonly": true
+              "name": "size",
+              "type": {
+                "text": "\"medium\" | \"small\" | undefined"
+              },
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "applyGridStyles",
-              "description": "styling for grid"
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "FFileUploadState | undefined"
+              },
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "tooltipElement",
+              "name": "maxSize",
               "type": {
-                "text": "HTMLElement"
+                "text": "FFileUploadSizeProp | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "attribute": "max-size",
+              "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": "loading",
               "type": {
-                "text": "() => void | undefined"
+                "text": "boolean | undefined"
               },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "default": "false",
+              "attribute": "loading",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "mouseLeave",
+              "name": "fileUploadSection",
               "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
+                "text": "HTMLElement"
               }
             },
             {
               "kind": "field",
-              "name": "isMouseOver",
+              "name": "fileUploadHeader",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
+                "text": "FDiv"
               }
-            }
-          ],
-          "attributes": [
+            },
             {
-              "name": "min-cell-width",
+              "kind": "field",
+              "name": "fileUploadError",
               "type": {
-                "text": "number | undefined"
-              },
-              "fieldName": "minCellWidth"
+                "text": "FDiv"
+              }
             },
             {
-              "name": "max-cell-width",
+              "kind": "field",
+              "name": "labelSlot",
               "type": {
-                "text": "number | undefined"
-              },
-              "fieldName": "maxCellWidth"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "cell-height",
+              "kind": "field",
+              "name": "descriptionSlot",
               "type": {
-                "text": "number | undefined"
-              },
-              "fieldName": "cellHeight"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "gap",
+              "kind": "field",
+              "name": "helpSlot",
               "type": {
-                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
-              },
-              "default": "\"small\"",
-              "fieldName": "gap"
+                "text": "HTMLElement"
+              }
             },
             {
-              "name": "tooltip",
+              "kind": "field",
+              "name": "textOverflow",
               "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "tooltip",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
+                "text": "FText"
               }
-            }
-          ],
-          "superclass": {
-            "name": "FRoot",
-            "module": "/src/mixins/components/f-root/f-root"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "FGrid",
-          "declaration": {
-            "name": "FGrid",
-            "module": "src/components/f-grid/f-grid.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/components/f-icon/f-icon.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FIcon",
-          "members": [
+            },
             {
               "kind": "field",
-              "name": "fill",
+              "name": "_labelNodes",
               "type": {
-                "text": "string"
-              },
-              "default": "\"\""
+                "text": "NodeListOf<HTMLElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "_source",
+              "name": "_descriptionNodes",
               "type": {
-                "text": "string"
-              },
-              "privacy": "private"
+                "text": "NodeListOf<HTMLElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "_originalSource",
+              "name": "_helpNodes",
               "type": {
-                "text": "string | undefined"
-              },
-              "privacy": "private"
+                "text": "NodeListOf<HTMLElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "_themeSubscription",
+              "name": "bytes",
               "type": {
-                "text": "Subscription | undefined"
+                "text": "number"
               },
-              "privacy": "private"
+              "default": "0"
             },
             {
               "kind": "field",
-              "name": "_configSubscription",
+              "name": "sizeLimitFlag",
               "type": {
-                "text": "Subscription | undefined"
+                "text": "boolean"
               },
-              "privacy": "private"
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "acceptedFilesFlag",
               "type": {
-                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "boolean"
               },
-              "default": "\"small\"",
-              "attribute": "size"
+              "default": "true"
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "selectedFiles",
               "type": {
-                "text": "FIconState | undefined"
+                "text": "File[] | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state"
+              "default": "[]"
             },
             {
               "kind": "field",
-              "name": "source",
+              "name": "fileInputRef",
               "type": {
-                "text": "string"
-              },
-              "attribute": "source"
+                "text": "Ref<HTMLInputElement>"
+              }
             },
             {
               "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "name": "hasLabel",
+              "description": "has label slot",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "loading",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "loading"
+              "name": "hasDescription",
+              "description": "has description slot",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "clickable",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "attribute": "clickable"
+              "name": "hasHelperText",
+              "description": "has help slot",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "required",
-              "type": {
-                "text": "array"
-              },
-              "readonly": true,
-              "default": "[\"source\"]"
+              "name": "fileFormatError",
+              "description": "error if file format is incorrect",
+              "readonly": true
             },
             {
-              "kind": "method",
-              "name": "validateProperties",
-              "description": "validation for all atrributes"
+              "kind": "field",
+              "name": "fileSizeError",
+              "description": "error if file size is more than given size",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "dispatchValue",
+              "description": "value for event dispatch",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "applyStyles",
-              "description": "apply inline styles to shadow-dom for custom fill."
+              "name": "handleClick",
+              "description": "on click open file selector window on OS"
             },
             {
               "kind": "method",
-              "name": "computeSource",
+              "name": "dropFile",
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "e",
                   "type": {
-                    "text": "string"
-                  }
+                    "text": "DragEvent"
+                  },
+                  "description": "DragEvent\ndrag and drop file(s) and event emission"
                 }
               ]
             },
             {
-              "kind": "field",
-              "name": "tooltipElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "kind": "method",
+              "name": "selectFile",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "InputEvent"
+                  },
+                  "description": "InputEvent"
+                }
+              ],
+              "description": "select file(s) from browse options"
             },
             {
-              "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": "method",
+              "name": "dispatchOnInput",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "Event"
+                  },
+                  "description": "Event"
+                }
+              ],
+              "description": "dispatch input event"
             },
             {
-              "kind": "field",
-              "name": "mouseEnter",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "kind": "method",
+              "name": "handleRemoveFile",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "MouseEvent"
+                }
+              ],
+              "description": "on click remove the selected single file"
             },
             {
-              "kind": "field",
-              "name": "mouseLeave",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "kind": "method",
+              "name": "handleRemoveRespectiveFile",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "MouseEvent"
+                },
+                {
+                  "name": "file",
+                  "type": {
+                    "text": "File"
+                  },
+                  "description": "contains clicked file"
+                }
+              ],
+              "description": "removes the clicked respective file from selection array"
             },
             {
-              "kind": "field",
+              "kind": "method",
+              "name": "checkOverflowing",
+              "description": "check if ellipsis happens on text and insert tooltip"
+            },
+            {
+              "kind": "method",
+              "name": "handleMouseEnter",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  },
+                  "description": "MouseEvent"
+                }
+              ],
+              "description": "in multiple file selection hovering on the particular file name may open the tooltip -if ellipsis is present"
+            },
+            {
+              "kind": "method",
+              "name": "isLetter",
+              "parameters": [
+                {
+                  "name": "str",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "single character"
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "split",
+              "parameters": [
+                {
+                  "name": "str",
+                  "type": {
+                    "text": "string"
+                  },
+                  "description": "string"
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  },
+                  "description": "index to splice from"
+                }
+              ],
+              "return": {
+                "type": {
+                  "text": ""
+                }
+              }
+            },
+            {
+              "kind": "method",
+              "name": "updateSelectedValues",
+              "description": "update file array locally"
+            },
+            {
+              "kind": "method",
+              "name": "helpSectionMessages",
+              "description": "display messages according to conditions"
+            },
+            {
+              "kind": "method",
+              "name": "helpSectionDisplay",
+              "description": "conditional help section display for false spacing issue"
+            },
+            {
+              "kind": "method",
+              "name": "headerSectionDisplay",
+              "description": "conditional header section display for false spacing issue"
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "kind": "field",
               "name": "isMouseOver",
               "type": {
                 "text": "boolean"
@@ -5752,28 +4905,58 @@
             }
           ],
           "attributes": [
+            {
+              "name": "type",
+              "type": {
+                "text": "\"single\" | \"multiple\" | undefined"
+              },
+              "default": "\"single\"",
+              "fieldName": "type"
+            },
+            {
+              "name": "value",
+              "type": {
+                "text": "FFileUploadValueType | undefined"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "placeholder"
+            },
+            {
+              "name": "file-type",
+              "type": {
+                "text": "FFileUploadFileType | undefined"
+              },
+              "default": "\"all\"",
+              "fieldName": "fileType"
+            },
             {
               "name": "size",
               "type": {
-                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
-              "default": "\"small\"",
+              "default": "\"medium\"",
               "fieldName": "size"
             },
             {
               "name": "state",
               "type": {
-                "text": "FIconState | undefined"
+                "text": "FFileUploadState | undefined"
               },
               "default": "\"default\"",
               "fieldName": "state"
             },
             {
-              "name": "source",
+              "name": "max-size",
               "type": {
-                "text": "string"
+                "text": "FFileUploadSizeProp | undefined"
               },
-              "fieldName": "source"
+              "fieldName": "maxSize"
             },
             {
               "name": "disabled",
@@ -5791,14 +4974,6 @@
               "default": "false",
               "fieldName": "loading"
             },
-            {
-              "name": "clickable",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "clickable"
-            },
             {
               "name": "tooltip",
               "type": {
@@ -5820,144 +4995,248 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FIcon",
+          "name": "FFileUpload",
           "declaration": {
-            "name": "FIcon",
-            "module": "src/components/f-icon/f-icon.ts"
+            "name": "FFileUpload",
+            "module": "src/components/f-file-upload/f-file-upload.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-icon-button/f-icon-button.ts",
+      "path": "src/components/f-form/f-form.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FIconButton",
+          "name": "FForm",
           "members": [
             {
               "kind": "field",
-              "name": "fill",
+              "name": "gap",
               "type": {
-                "text": "string"
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "\"\""
+              "default": "\"medium\"",
+              "attribute": "gap",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconInputClass",
+              "name": "separator",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false"
+              "default": "false",
+              "attribute": "separator",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "icon",
+              "name": "tooltipElement",
               "type": {
-                "text": "string"
+                "text": "HTMLElement"
               },
-              "attribute": "icon"
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "tooltip",
               "type": {
-                "text": "FIconButtonVariant | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"round\"",
-              "attribute": "variant"
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "category",
+              "name": "mouseEnter",
               "type": {
-                "text": "FIconButtonType | undefined"
+                "text": "() => void | undefined"
               },
-              "default": "\"fill\"",
-              "attribute": "category"
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "mouseLeave",
               "type": {
-                "text": "FIconButtonSize | undefined"
+                "text": "() => void | undefined"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "isMouseOver",
               "type": {
-                "text": "FIconButtonState | undefined"
+                "text": "boolean"
               },
-              "default": "\"primary\"",
-              "attribute": "state"
-            },
-            {
-              "kind": "field",
-              "name": "counter",
+              "default": "false",
+              "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"
               },
-              "attribute": "counter",
+              "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",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FFormGroup",
+          "members": [
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "FGroupLabel | undefined"
+              },
+              "attribute": "label",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "variant",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"normal\" | \"compact\" | undefined"
               },
-              "default": "false",
-              "attribute": "loading",
+              "default": "\"normal\"",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "direction",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"vertical\" | \"horizontal\" | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
+              "default": "\"vertical\"",
+              "attribute": "direction",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconElement",
+              "name": "gap",
               "type": {
-                "text": "FIcon"
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "description": "icon element reference"
+              "default": "\"small\"",
+              "attribute": "gap",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "counterElement",
+              "name": "collapse",
               "type": {
-                "text": "FCounter | undefined"
+                "text": "\"none\" | \"accordion\" | \"text\" | undefined"
               },
-              "description": "icon element reference"
+              "default": "\"none\"",
+              "attribute": "collapse",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "counterSize",
-              "description": "compute counter size based on button size",
-              "readonly": true
+              "name": "isCollapsed",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "is-collapsed",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "canDuplicate",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "can-duplicate",
+              "reflects": true
             },
             {
               "kind": "method",
               "name": "applyStyles",
-              "description": "apply inline styles to shadow-dom for custom fill."
+              "description": "apply styles"
             },
             {
               "kind": "method",
-              "name": "validateProperties",
-              "description": "validation for all atrributes"
+              "name": "applyCursorStyles",
+              "description": "apply cursor styles"
+            },
+            {
+              "kind": "method",
+              "name": "duplicationClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
@@ -6020,66 +5299,59 @@
           ],
           "attributes": [
             {
-              "name": "icon",
+              "name": "label",
               "type": {
-                "text": "string"
+                "text": "FGroupLabel | undefined"
               },
-              "fieldName": "icon"
+              "fieldName": "label"
             },
             {
               "name": "variant",
               "type": {
-                "text": "FIconButtonVariant | undefined"
+                "text": "\"normal\" | \"compact\" | undefined"
               },
-              "default": "\"round\"",
+              "default": "\"normal\"",
               "fieldName": "variant"
             },
             {
-              "name": "category",
-              "type": {
-                "text": "FIconButtonType | undefined"
-              },
-              "default": "\"fill\"",
-              "fieldName": "category"
-            },
-            {
-              "name": "size",
+              "name": "direction",
               "type": {
-                "text": "FIconButtonSize | undefined"
+                "text": "\"vertical\" | \"horizontal\" | undefined"
               },
-              "default": "\"medium\"",
-              "fieldName": "size"
+              "default": "\"vertical\"",
+              "fieldName": "direction"
             },
             {
-              "name": "state",
+              "name": "gap",
               "type": {
-                "text": "FIconButtonState | undefined"
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "\"primary\"",
-              "fieldName": "state"
+              "default": "\"small\"",
+              "fieldName": "gap"
             },
             {
-              "name": "counter",
+              "name": "collapse",
               "type": {
-                "text": "string | undefined"
+                "text": "\"none\" | \"accordion\" | \"text\" | undefined"
               },
-              "fieldName": "counter"
+              "default": "\"none\"",
+              "fieldName": "collapse"
             },
             {
-              "name": "loading",
+              "name": "is-collapsed",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "loading"
+              "fieldName": "isCollapsed"
             },
             {
-              "name": "disabled",
+              "name": "can-duplicate",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "canDuplicate"
             },
             {
               "name": "tooltip",
@@ -6096,300 +5368,330 @@
           "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": "FIconButton",
+          "name": "FFormGroup",
           "declaration": {
-            "name": "FIconButton",
-            "module": "src/components/f-icon-button/f-icon-button.ts"
+            "name": "FFormGroup",
+            "module": "src/components/f-form-group/f-form-group.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-input/f-input.ts",
+      "path": "src/components/f-grid/f-grid.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FInput",
+          "name": "FGrid",
           "members": [
             {
               "kind": "field",
-              "name": "showPassword",
+              "name": "minCellWidth",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false"
+              "attribute": "min-cell-width",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_labelNodes",
+              "name": "maxCellWidth",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+                "text": "number | undefined"
+              },
+              "attribute": "max-cell-width",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_hasLabel",
+              "name": "cellHeight",
               "type": {
-                "text": "boolean"
+                "text": "number | undefined"
               },
-              "default": "false"
+              "attribute": "cell-height",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_helpNodes",
+              "name": "gap",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+              },
+              "default": "\"small\"",
+              "attribute": "gap",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_hasHelperText",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+              "name": "gridTemplateColumns",
+              "description": "grid-template-columns to assign cell-width",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "applyGridStyles",
+              "description": "styling for grid"
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "tooltipElement",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "HTMLElement"
               },
-              "default": "\"curved\"",
-              "attribute": "variant",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "category",
+              "name": "tooltip",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"fill\"",
-              "attribute": "category",
-              "reflects": true
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "mouseEnter",
               "type": {
-                "text": "FInputState | undefined"
+                "text": "() => void | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "mouseLeave",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "() => void | undefined"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "type",
+              "name": "isMouseOver",
               "type": {
-                "text": "\"text\" | \"number\" | \"email\" | \"password\" | \"url\" | \"tel\" | undefined"
+                "text": "boolean"
               },
-              "default": "\"text\"",
-              "attribute": "type",
-              "reflects": true
+              "default": "false",
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "min-cell-width",
+              "type": {
+                "text": "number | undefined"
+              },
+              "fieldName": "minCellWidth"
             },
             {
-              "kind": "field",
-              "name": "value",
+              "name": "max-cell-width",
               "type": {
-                "text": "string | number | undefined"
+                "text": "number | undefined"
               },
-              "attribute": "value",
-              "reflects": true
+              "fieldName": "maxCellWidth"
             },
             {
-              "kind": "field",
-              "name": "placeholder",
+              "name": "cell-height",
               "type": {
-                "text": "string | undefined"
+                "text": "number | undefined"
               },
-              "attribute": "placeholder",
-              "reflects": true
+              "fieldName": "cellHeight"
             },
             {
-              "kind": "field",
-              "name": "iconLeft",
+              "name": "gap",
               "type": {
-                "text": "string | undefined"
+                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "attribute": "icon-left",
-              "reflects": true
+              "default": "\"small\"",
+              "fieldName": "gap"
             },
             {
-              "kind": "field",
-              "name": "iconRight",
+              "name": "tooltip",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "icon-right",
-              "reflects": true
+              "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": "FGrid",
+          "declaration": {
+            "name": "FGrid",
+            "module": "src/components/f-grid/f-grid.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-icon/f-icon.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FIcon",
+          "members": [
+            {
+              "kind": "field",
+              "name": "fill",
+              "type": {
+                "text": "string"
+              },
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "prefix",
+              "name": "_source",
               "type": {
-                "text": "string | null"
+                "text": "string"
               },
-              "default": "null",
-              "attribute": "prefix",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "suffix",
+              "name": "_originalSource",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "suffix",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "maxLength",
+              "name": "_themeSubscription",
               "type": {
-                "text": "number | undefined"
+                "text": "Subscription | undefined"
               },
-              "attribute": "max-length",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "_configSubscription",
               "type": {
-                "text": "boolean | undefined"
+                "text": "Subscription | undefined"
               },
-              "default": "false",
-              "attribute": "loading",
-              "reflects": true
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "size",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "\"small\"",
+              "attribute": "size"
             },
             {
               "kind": "field",
-              "name": "clear",
+              "name": "state",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FIconState | undefined"
               },
-              "default": "true",
-              "attribute": "clear",
-              "reflects": true
+              "default": "\"default\"",
+              "attribute": "state"
             },
             {
               "kind": "field",
-              "name": "readOnly",
+              "name": "source",
+              "type": {
+                "text": "string"
+              },
+              "attribute": "source"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "read-only",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "suffixWhen",
+              "name": "loading",
               "type": {
-                "text": "FInputSuffixWhen | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "suffixWhen"
+              "default": "false",
+              "attribute": "loading"
             },
             {
               "kind": "field",
-              "name": "inputElement",
+              "name": "clickable",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "boolean | undefined"
               },
-              "description": "input element reference"
+              "default": "false",
+              "attribute": "clickable"
             },
             {
               "kind": "field",
-              "name": "inputWrapperElement",
+              "name": "required",
               "type": {
-                "text": "HTMLInputElement"
+                "text": "array"
               },
-              "description": "input element reference"
+              "readonly": true,
+              "default": "[\"source\"]"
             },
             {
               "kind": "method",
-              "name": "handleInput",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "InputEvent"
-                  }
-                }
-              ],
-              "description": "emit input custom event"
+              "name": "validateProperties",
+              "description": "validation for all atrributes"
             },
             {
               "kind": "method",
-              "name": "clearInputValue",
-              "description": "clear input value on clear icon clicked"
+              "name": "applyStyles",
+              "description": "apply inline styles to shadow-dom for custom fill."
             },
             {
               "kind": "method",
-              "name": "dispatchInputEvent",
+              "name": "computeSource",
               "parameters": [
                 {
                   "name": "value",
                   "type": {
-                    "text": "string | number | undefined"
-                  }
-                },
-                {
-                  "name": "type",
-                  "type": {
-                    "text": "\"clear\" | \"input\""
+                    "text": "string"
                   }
                 }
               ]
             },
-            {
-              "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",
@@ -6451,102 +5753,27 @@
           ],
           "attributes": [
             {
-              "name": "variant",
+              "name": "size",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "\"x-large\" | \"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
               },
-              "default": "\"curved\"",
-              "fieldName": "variant"
-            },
-            {
-              "name": "category",
-              "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
-              },
-              "default": "\"fill\"",
-              "fieldName": "category"
+              "default": "\"small\"",
+              "fieldName": "size"
             },
             {
               "name": "state",
               "type": {
-                "text": "FInputState | undefined"
+                "text": "FIconState | undefined"
               },
               "default": "\"default\"",
               "fieldName": "state"
             },
             {
-              "name": "size",
-              "type": {
-                "text": "\"medium\" | \"small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "fieldName": "size"
-            },
-            {
-              "name": "type",
-              "type": {
-                "text": "\"text\" | \"number\" | \"email\" | \"password\" | \"url\" | \"tel\" | undefined"
-              },
-              "default": "\"text\"",
-              "fieldName": "type"
-            },
-            {
-              "name": "value",
-              "type": {
-                "text": "string | number | undefined"
-              },
-              "fieldName": "value"
-            },
-            {
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "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",
+              "name": "source",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string"
               },
-              "default": "false",
-              "fieldName": "loading"
+              "fieldName": "source"
             },
             {
               "name": "disabled",
@@ -6557,27 +5784,20 @@
               "fieldName": "disabled"
             },
             {
-              "name": "clear",
+              "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
-              "fieldName": "clear"
+              "default": "false",
+              "fieldName": "loading"
             },
             {
-              "name": "read-only",
+              "name": "clickable",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "readOnly"
-            },
-            {
-              "name": "suffixWhen",
-              "type": {
-                "text": "FInputSuffixWhen | undefined"
-              },
-              "fieldName": "suffixWhen"
+              "fieldName": "clickable"
             },
             {
               "name": "tooltip",
@@ -6600,230 +5820,155 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FInput",
+          "name": "FIcon",
           "declaration": {
-            "name": "FInput",
-            "module": "src/components/f-input/f-input.ts"
+            "name": "FIcon",
+            "module": "src/components/f-icon/f-icon.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-pictogram/f-pictogram.ts",
+      "path": "src/components/f-icon-button/f-icon-button.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FPictogram",
+          "name": "FIconButton",
           "members": [
             {
               "kind": "field",
-              "name": "variant",
+              "name": "fill",
               "type": {
-                "text": "FPictogramVariant | undefined"
+                "text": "string"
               },
-              "default": "\"squircle\"",
-              "attribute": "variant",
-              "reflects": true
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "source",
+              "name": "iconInputClass",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "icon",
               "type": {
                 "text": "string"
               },
-              "attribute": "source",
-              "reflects": true
+              "attribute": "icon"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "variant",
               "type": {
-                "text": "FPictogramSize | undefined"
+                "text": "FIconButtonVariant | undefined"
               },
-              "default": "\"large\"",
-              "attribute": "size",
-              "reflects": true
+              "default": "\"round\"",
+              "attribute": "variant"
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "category",
               "type": {
-                "text": "FPictogramState | undefined"
+                "text": "FIconButtonType | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
-              "reflects": true
+              "default": "\"fill\"",
+              "attribute": "category"
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "size",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FIconButtonSize | undefined"
               },
-              "default": "false",
-              "attribute": "loading",
+              "default": "\"medium\"",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "state",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FIconButtonState | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "\"primary\"",
+              "attribute": "state"
             },
             {
               "kind": "field",
-              "name": "fPicorgramWrapper",
+              "name": "counter",
               "type": {
-                "text": "HTMLDivElement"
-              }
+                "text": "string | undefined"
+              },
+              "attribute": "counter",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "clickable",
+              "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "clickable",
+              "attribute": "loading",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoBg",
+              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "auto-bg",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "isText",
+              "name": "iconElement",
               "type": {
-                "text": "boolean"
+                "text": "FIcon"
               },
-              "default": "false"
+              "description": "icon element reference"
             },
             {
               "kind": "field",
-              "name": "getLetters",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "capitalizeFirstLetter",
-              "parameters": [
-                {
-                  "name": "string",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "name": "counterElement",
+              "type": {
+                "text": "FCounter | undefined"
+              },
+              "description": "icon element reference"
             },
             {
               "kind": "field",
-              "name": "textSource",
+              "name": "counterSize",
+              "description": "compute counter size based on button size",
               "readonly": true
             },
             {
               "kind": "method",
-              "name": "hslToHex",
-              "parameters": [
-                {
-                  "name": "h",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "s",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "l",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
+              "name": "applyStyles",
+              "description": "apply inline styles to shadow-dom for custom fill."
             },
             {
-              "kind": "field",
-              "name": "textColor",
-              "readonly": true
+              "kind": "method",
+              "name": "validateProperties",
+              "description": "validation for all atrributes"
             },
             {
               "kind": "field",
-              "name": "textColorStyling",
-              "readonly": true
-            },
-            {
-              "kind": "field",
-              "name": "renderedHtml",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "sourceSize"
-            },
-            {
-              "kind": "field",
-              "name": "hashCode",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "stringReplaceAtIndex",
-              "parameters": [
-                {
-                  "name": "str",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "index",
-                  "type": {
-                    "text": "number"
-                  }
-                },
-                {
-                  "name": "chr",
-                  "type": {
-                    "text": "number"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "field",
-              "name": "hashCodeHover",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "validateProperties"
-            },
-            {
-              "kind": "field",
-              "name": "tooltipElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "name": "tooltipElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
@@ -6874,68 +6019,67 @@
             }
           ],
           "attributes": [
+            {
+              "name": "icon",
+              "type": {
+                "text": "string"
+              },
+              "fieldName": "icon"
+            },
             {
               "name": "variant",
               "type": {
-                "text": "FPictogramVariant | undefined"
+                "text": "FIconButtonVariant | undefined"
               },
-              "default": "\"squircle\"",
+              "default": "\"round\"",
               "fieldName": "variant"
             },
             {
-              "name": "source",
+              "name": "category",
               "type": {
-                "text": "string"
+                "text": "FIconButtonType | undefined"
               },
-              "fieldName": "source"
+              "default": "\"fill\"",
+              "fieldName": "category"
             },
             {
               "name": "size",
               "type": {
-                "text": "FPictogramSize | undefined"
+                "text": "FIconButtonSize | undefined"
               },
-              "default": "\"large\"",
+              "default": "\"medium\"",
               "fieldName": "size"
             },
             {
               "name": "state",
               "type": {
-                "text": "FPictogramState | undefined"
+                "text": "FIconButtonState | undefined"
               },
-              "default": "\"default\"",
+              "default": "\"primary\"",
               "fieldName": "state"
             },
             {
-              "name": "loading",
+              "name": "counter",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "default": "false",
-              "fieldName": "loading"
+              "fieldName": "counter"
             },
             {
-              "name": "disabled",
+              "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "loading"
             },
             {
-              "name": "clickable",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "clickable"
-            },
-            {
-              "name": "auto-bg",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "fieldName": "autoBg"
+              "fieldName": "disabled"
             },
             {
               "name": "tooltip",
@@ -6958,196 +6102,293 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FPictogram",
+          "name": "FIconButton",
           "declaration": {
-            "name": "FPictogram",
-            "module": "src/components/f-pictogram/f-pictogram.ts"
+            "name": "FIconButton",
+            "module": "src/components/f-icon-button/f-icon-button.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-popover/f-popover.ts",
+      "path": "src/components/f-input/f-input.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FPopover",
+          "name": "FInput",
           "members": [
             {
               "kind": "field",
-              "name": "placement",
+              "name": "showPassword",
               "type": {
-                "text": "FPopoverPlacement | undefined"
+                "text": "boolean"
               },
-              "default": "\"auto\"",
-              "attribute": "placement",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "_labelNodes",
               "type": {
-                "text": "FPopoverSize | undefined"
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hasLabel",
+              "type": {
+                "text": "boolean"
               },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "_helpNodes",
               "type": {
-                "text": "boolean | undefined"
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_hasHelperText",
+              "type": {
+                "text": "boolean"
               },
-              "default": "false",
-              "attribute": "open",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "overlay",
+              "name": "variant",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
-              "default": "true",
-              "attribute": "overlay",
+              "default": "\"curved\"",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoHeight",
+              "name": "category",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
               },
-              "default": "false",
-              "attribute": "auto-height",
+              "default": "\"fill\"",
+              "attribute": "category",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "closeOnEscape",
+              "name": "state",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FInputState | undefined"
               },
-              "default": "true",
-              "attribute": "close-on-escape",
+              "default": "\"default\"",
+              "attribute": "state",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "target",
+              "name": "size",
               "type": {
-                "text": "string | HTMLElement"
+                "text": "\"medium\" | \"small\" | undefined"
               },
-              "attribute": "target",
+              "default": "\"medium\"",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "cleanup",
+              "name": "type",
               "type": {
-                "text": "() => void"
-              }
+                "text": "\"text\" | \"number\" | \"email\" | \"password\" | \"url\" | \"tel\" | undefined"
+              },
+              "default": "\"text\"",
+              "attribute": "type",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isEscapeClicked",
+              "name": "value",
               "type": {
-                "text": "boolean"
+                "text": "string | number | undefined"
               },
-              "default": "false"
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "escapeHandler"
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "placeholder",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isTooltip",
+              "name": "iconLeft",
               "type": {
-                "text": "boolean"
+                "text": "string | undefined"
               },
-              "default": "false"
+              "attribute": "icon-left",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "reqAniFrame",
+              "name": "iconRight",
               "type": {
-                "text": "number | undefined"
-              }
+                "text": "string | undefined"
+              },
+              "attribute": "icon-right",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "offset",
+              "name": "prefix",
               "type": {
-                "text": "FPopOverOffset | null"
+                "text": "string | null"
               },
-              "default": "null"
+              "default": "null",
+              "attribute": "prefix",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "targetElement",
-              "readonly": true
+              "name": "suffix",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "suffix",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "stringToHTML",
-              "parameters": [
-                {
-                  "name": "str",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
+              "kind": "field",
+              "name": "maxLength",
+              "type": {
+                "text": "number | undefined"
+              },
+              "attribute": "max-length",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "computePlacement"
+              "kind": "field",
+              "name": "loading",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "loading",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
+            },
+            {
+              "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",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "description": "input element reference"
+            },
+            {
+              "kind": "field",
+              "name": "inputWrapperElement",
+              "type": {
+                "text": "HTMLInputElement"
+              },
+              "description": "input element reference"
             },
             {
               "kind": "method",
-              "name": "computePosition",
+              "name": "handleInput",
               "parameters": [
                 {
-                  "name": "isTooltip",
+                  "name": "e",
                   "type": {
-                    "text": "boolean"
+                    "text": "InputEvent"
                   }
                 }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "getBodyTargetPlacementCords"
+              ],
+              "description": "emit input custom event"
             },
             {
               "kind": "method",
-              "name": "dispatchEsc"
+              "name": "clearInputValue",
+              "description": "clear input value on clear icon clicked"
             },
             {
               "kind": "method",
-              "name": "escapekeyHandle",
+              "name": "dispatchInputEvent",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "value",
                   "type": {
-                    "text": "KeyboardEvent"
+                    "text": "string | number | undefined"
                   }
                 },
                 {
-                  "name": "el",
+                  "name": "type",
                   "type": {
-                    "text": "HTMLElement"
+                    "text": "\"clear\" | \"input\""
                   }
                 }
               ]
             },
+            {
+              "kind": "field",
+              "name": "iconSize",
+              "description": "icon size",
+              "readonly": true
+            },
             {
               "kind": "method",
-              "name": "overlayClick"
+              "name": "togglePasswordView",
+              "description": "Toggle Password view"
+            },
+            {
+              "kind": "method",
+              "name": "_onLabelSlotChange"
+            },
+            {
+              "kind": "method",
+              "name": "_onHelpSlotChange"
             },
             {
               "kind": "field",
@@ -7210,59 +6451,133 @@
           ],
           "attributes": [
             {
-              "name": "placement",
+              "name": "variant",
               "type": {
-                "text": "FPopoverPlacement | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
-              "default": "\"auto\"",
-              "fieldName": "placement"
+              "default": "\"curved\"",
+              "fieldName": "variant"
+            },
+            {
+              "name": "category",
+              "type": {
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+              },
+              "default": "\"fill\"",
+              "fieldName": "category"
+            },
+            {
+              "name": "state",
+              "type": {
+                "text": "FInputState | undefined"
+              },
+              "default": "\"default\"",
+              "fieldName": "state"
             },
             {
               "name": "size",
               "type": {
-                "text": "FPopoverSize | undefined"
+                "text": "\"medium\" | \"small\" | undefined"
               },
               "default": "\"medium\"",
               "fieldName": "size"
             },
             {
-              "name": "open",
+              "name": "type",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"text\" | \"number\" | \"email\" | \"password\" | \"url\" | \"tel\" | undefined"
               },
-              "default": "false",
-              "fieldName": "open"
+              "default": "\"text\"",
+              "fieldName": "type"
             },
             {
-              "name": "overlay",
+              "name": "value",
+              "type": {
+                "text": "string | number | undefined"
+              },
+              "fieldName": "value"
+            },
+            {
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "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",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
-              "fieldName": "overlay"
+              "default": "false",
+              "fieldName": "loading"
             },
             {
-              "name": "auto-height",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "autoHeight"
+              "fieldName": "disabled"
             },
             {
-              "name": "close-on-escape",
+              "name": "clear",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "true",
-              "fieldName": "closeOnEscape"
+              "fieldName": "clear"
             },
             {
-              "name": "target",
+              "name": "read-only",
               "type": {
-                "text": "string | HTMLElement"
+                "text": "boolean | undefined"
               },
-              "fieldName": "target"
+              "default": "false",
+              "fieldName": "readOnly"
+            },
+            {
+              "name": "suffixWhen",
+              "type": {
+                "text": "FInputSuffixWhen | undefined"
+              },
+              "fieldName": "suffixWhen"
             },
             {
               "name": "tooltip",
@@ -7285,49 +6600,49 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FPopover",
+          "name": "FInput",
           "declaration": {
-            "name": "FPopover",
-            "module": "src/components/f-popover/f-popover.ts"
+            "name": "FInput",
+            "module": "src/components/f-input/f-input.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-progress-bar/f-progress-bar.ts",
+      "path": "src/components/f-pictogram/f-pictogram.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FProgressBar",
+          "name": "FPictogram",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "variant",
               "type": {
-                "text": "FProgressBarValueProp | undefined"
+                "text": "FPictogramVariant | undefined"
               },
-              "attribute": "value",
+              "default": "\"squircle\"",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "variant",
+              "name": "source",
               "type": {
-                "text": "\"block\" | \"curved\" | undefined"
+                "text": "string"
               },
-              "default": "\"block\"",
-              "attribute": "variant",
+              "attribute": "source",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "FPictogramSize | undefined"
               },
-              "default": "\"medium\"",
+              "default": "\"large\"",
               "attribute": "size",
               "reflects": true
             },
@@ -7335,7 +6650,7 @@
               "kind": "field",
               "name": "state",
               "type": {
-                "text": "FProgressBarState | undefined"
+                "text": "FPictogramState | undefined"
               },
               "default": "\"default\"",
               "attribute": "state",
@@ -7343,46 +6658,161 @@
             },
             {
               "kind": "field",
-              "name": "width",
+              "name": "loading",
               "type": {
-                "text": "FProgressBarWidthProp | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"fill-container\"",
-              "attribute": "width",
+              "default": "false",
+              "attribute": "loading",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "fProgressBarFill",
+              "name": "disabled",
               "type": {
-                "text": "FDiv | undefined"
+                "text": "boolean | undefined"
               },
-              "description": "progress-bar fill query selector"
+              "default": "false",
+              "attribute": "disabled",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "computedHeight",
-              "description": "compyr height of the progress-bar",
+              "name": "fPicorgramWrapper",
+              "type": {
+                "text": "HTMLDivElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "clickable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "clickable",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoBg",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "attribute": "auto-bg",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "isText",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "getLetters",
               "readonly": true
             },
+            {
+              "kind": "method",
+              "name": "capitalizeFirstLetter",
+              "parameters": [
+                {
+                  "name": "string",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
-              "name": "computedWidth",
-              "description": "compute width of fill in the track",
+              "name": "textSource",
               "readonly": true
             },
             {
               "kind": "method",
-              "name": "validateProperties",
-              "description": "validation for all atrributes"
+              "name": "hslToHex",
+              "parameters": [
+                {
+                  "name": "h",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "s",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "l",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
             },
             {
               "kind": "field",
-              "name": "fill",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\""
+              "name": "textColor",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "textColorStyling",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "renderedHtml",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "sourceSize"
+            },
+            {
+              "kind": "field",
+              "name": "hashCode",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "stringReplaceAtIndex",
+              "parameters": [
+                {
+                  "name": "str",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "index",
+                  "type": {
+                    "text": "number"
+                  }
+                },
+                {
+                  "name": "chr",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "field",
+              "name": "hashCodeHover",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "validateProperties"
             },
             {
               "kind": "field",
@@ -7445,43 +6875,67 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "variant",
               "type": {
-                "text": "FProgressBarValueProp | undefined"
+                "text": "FPictogramVariant | undefined"
               },
-              "fieldName": "value"
+              "default": "\"squircle\"",
+              "fieldName": "variant"
             },
             {
-              "name": "variant",
+              "name": "source",
               "type": {
-                "text": "\"block\" | \"curved\" | undefined"
+                "text": "string"
               },
-              "default": "\"block\"",
-              "fieldName": "variant"
+              "fieldName": "source"
             },
             {
               "name": "size",
               "type": {
-                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+                "text": "FPictogramSize | undefined"
               },
-              "default": "\"medium\"",
+              "default": "\"large\"",
               "fieldName": "size"
             },
             {
               "name": "state",
               "type": {
-                "text": "FProgressBarState | undefined"
+                "text": "FPictogramState | undefined"
               },
               "default": "\"default\"",
               "fieldName": "state"
             },
             {
-              "name": "width",
+              "name": "loading",
               "type": {
-                "text": "FProgressBarWidthProp | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"fill-container\"",
-              "fieldName": "width"
+              "default": "false",
+              "fieldName": "loading"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "clickable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "clickable"
+            },
+            {
+              "name": "auto-bg",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "autoBg"
             },
             {
               "name": "tooltip",
@@ -7504,85 +6958,196 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FProgressBar",
+          "name": "FPictogram",
           "declaration": {
-            "name": "FProgressBar",
-            "module": "src/components/f-progress-bar/f-progress-bar.ts"
+            "name": "FPictogram",
+            "module": "src/components/f-pictogram/f-pictogram.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-radio/f-radio.ts",
+      "path": "src/components/f-popover/f-popover.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FRadio",
+          "name": "FPopover",
           "members": [
             {
               "kind": "field",
-              "name": "value",
+              "name": "placement",
               "type": {
-                "text": "\"selected\" | \"unselected\" | undefined"
+                "text": "FPopoverPlacement | undefined"
               },
-              "default": "\"unselected\"",
-              "attribute": "value",
+              "default": "\"auto\"",
+              "attribute": "placement",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "state",
+              "name": "size",
               "type": {
-                "text": "FRadioState | undefined"
+                "text": "FPopoverSize | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
+              "default": "\"medium\"",
+              "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "open",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "size",
+              "default": "false",
+              "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "overlay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "attribute": "overlay",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "autoHeight",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "disabled",
+              "attribute": "auto-height",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "slotWrapper",
+              "name": "closeOnEscape",
               "type": {
-                "text": "FDiv"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "attribute": "close-on-escape",
+              "reflects": true
             },
             {
-              "kind": "method",
-              "name": "handleClick",
-              "parameters": [
-                {
-                  "name": "e",
-                  "type": {
-                    "text": "MouseEvent"
+              "kind": "field",
+              "name": "target",
+              "type": {
+                "text": "string | HTMLElement"
+              },
+              "attribute": "target",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "cleanup",
+              "type": {
+                "text": "() => void"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isEscapeClicked",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "escapeHandler"
+            },
+            {
+              "kind": "field",
+              "name": "isTooltip",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "reqAniFrame",
+              "type": {
+                "text": "number | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "offset",
+              "type": {
+                "text": "FPopOverOffset | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "targetElement",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "stringToHTML",
+              "parameters": [
+                {
+                  "name": "str",
+                  "type": {
+                    "text": "string"
                   }
                 }
-              ],
-              "description": "emit event on click"
+              ]
             },
             {
               "kind": "method",
-              "name": "checkSlots"
+              "name": "computePlacement"
+            },
+            {
+              "kind": "method",
+              "name": "computePosition",
+              "parameters": [
+                {
+                  "name": "isTooltip",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "getBodyTargetPlacementCords"
+            },
+            {
+              "kind": "method",
+              "name": "dispatchEsc"
+            },
+            {
+              "kind": "method",
+              "name": "escapekeyHandle",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "KeyboardEvent"
+                  }
+                },
+                {
+                  "name": "el",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "overlayClick"
             },
             {
               "kind": "field",
@@ -7645,35 +7210,59 @@
           ],
           "attributes": [
             {
-              "name": "value",
+              "name": "placement",
               "type": {
-                "text": "\"selected\" | \"unselected\" | undefined"
+                "text": "FPopoverPlacement | undefined"
               },
-              "default": "\"unselected\"",
-              "fieldName": "value"
+              "default": "\"auto\"",
+              "fieldName": "placement"
             },
             {
-              "name": "state",
+              "name": "size",
               "type": {
-                "text": "FRadioState | undefined"
+                "text": "FPopoverSize | undefined"
               },
-              "default": "\"default\"",
-              "fieldName": "state"
+              "default": "\"medium\"",
+              "fieldName": "size"
             },
             {
-              "name": "size",
+              "name": "open",
               "type": {
-                "text": "\"small\" | \"medium\" | undefined"
+                "text": "boolean | undefined"
               },
-              "fieldName": "size"
+              "default": "false",
+              "fieldName": "open"
             },
             {
-              "name": "disabled",
+              "name": "overlay",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "fieldName": "overlay"
+            },
+            {
+              "name": "auto-height",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "disabled"
+              "fieldName": "autoHeight"
+            },
+            {
+              "name": "close-on-escape",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "fieldName": "closeOnEscape"
+            },
+            {
+              "name": "target",
+              "type": {
+                "text": "string | HTMLElement"
+              },
+              "fieldName": "target"
             },
             {
               "name": "tooltip",
@@ -7696,205 +7285,257 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FRadio",
+          "name": "FPopover",
           "declaration": {
-            "name": "FRadio",
-            "module": "src/components/f-radio/f-radio.ts"
+            "name": "FPopover",
+            "module": "src/components/f-popover/f-popover.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-select/f-select.ts",
+      "path": "src/components/f-progress-bar/f-progress-bar.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FSelect",
+          "name": "FProgressBar",
           "members": [
             {
               "kind": "field",
-              "name": "_labelNodes",
+              "name": "value",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+                "text": "FProgressBarValueProp | undefined"
+              },
+              "attribute": "value",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_hasLabel",
+              "name": "variant",
               "type": {
-                "text": "boolean"
+                "text": "\"block\" | \"curved\" | undefined"
               },
-              "default": "false"
+              "default": "\"block\"",
+              "attribute": "variant",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_helpNodes",
+              "name": "size",
               "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+              },
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "_hasHelperText",
+              "name": "state",
               "type": {
-                "text": "boolean"
+                "text": "FProgressBarState | undefined"
               },
-              "default": "false"
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "openDropdown",
+              "name": "width",
               "type": {
-                "text": "boolean"
+                "text": "FProgressBarWidthProp | undefined"
               },
-              "default": "false"
+              "default": "\"fill-container\"",
+              "attribute": "width",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "viewMoreTags",
+              "name": "fProgressBarFill",
               "type": {
-                "text": "boolean"
+                "text": "FDiv | undefined"
               },
-              "default": "false"
+              "description": "progress-bar fill query selector"
             },
             {
               "kind": "field",
-              "name": "searchValue",
-              "type": {
-                "text": "string"
-              },
-              "default": "\"\""
+              "name": "computedHeight",
+              "description": "compyr height of the progress-bar",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "selectedOptions",
-              "type": {
-                "text": "FSelectOptions"
-              },
-              "default": "[]"
+              "name": "computedWidth",
+              "description": "compute width of fill in the track",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "filteredOptions",
-              "type": {
-                "text": "FSelectOptions"
-              },
-              "default": "[]"
+              "kind": "method",
+              "name": "validateProperties",
+              "description": "validation for all atrributes"
             },
             {
               "kind": "field",
-              "name": "currentCursor",
+              "name": "fill",
               "type": {
-                "text": "number"
+                "text": "string"
               },
-              "default": "-1"
+              "default": "\"\""
             },
             {
               "kind": "field",
-              "name": "currentGroupCursor",
+              "name": "tooltipElement",
               "type": {
-                "text": "number"
+                "text": "HTMLElement"
               },
-              "default": "-1"
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "optimizedHeight",
+              "name": "tooltip",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "0"
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "preferredOpenDirection",
+              "name": "mouseEnter",
               "type": {
-                "text": "string"
+                "text": "() => void | undefined"
               },
-              "default": "\"below\""
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "optionsTop",
+              "name": "mouseLeave",
               "type": {
-                "text": "string"
+                "text": "() => void | undefined"
               },
-              "default": "\"\""
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "optionsBottom",
+              "name": "isMouseOver",
               "type": {
-                "text": "string"
+                "text": "boolean"
               },
-              "default": "\"\""
-            },
+              "default": "false",
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "currentGroupOptionCursor",
+              "name": "value",
               "type": {
-                "text": "number"
+                "text": "FProgressBarValueProp | undefined"
               },
-              "default": "-1"
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "inputElement",
+              "name": "variant",
               "type": {
-                "text": "HTMLInputElement"
-              }
+                "text": "\"block\" | \"curved\" | undefined"
+              },
+              "default": "\"block\"",
+              "fieldName": "variant"
             },
             {
-              "kind": "field",
-              "name": "wrapperElement",
+              "name": "size",
               "type": {
-                "text": "HTMLDivElement"
-              }
+                "text": "\"large\" | \"medium\" | \"small\" | \"x-small\" | undefined"
+              },
+              "default": "\"medium\"",
+              "fieldName": "size"
             },
             {
-              "kind": "field",
-              "name": "optionElement",
+              "name": "state",
               "type": {
-                "text": "HTMLDivElement"
-              }
+                "text": "FProgressBarState | undefined"
+              },
+              "default": "\"default\"",
+              "fieldName": "state"
             },
             {
-              "kind": "field",
-              "name": "type",
+              "name": "width",
               "type": {
-                "text": "\"single\" | \"multiple\" | undefined"
+                "text": "FProgressBarWidthProp | undefined"
               },
-              "default": "\"single\"",
-              "attribute": "type",
-              "reflects": true
+              "default": "\"fill-container\"",
+              "fieldName": "width"
             },
             {
-              "kind": "field",
-              "name": "variant",
+              "name": "tooltip",
               "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "string | undefined"
               },
-              "default": "\"curved\"",
-              "attribute": "variant",
-              "reflects": true
-            },
+              "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": "FProgressBar",
+          "declaration": {
+            "name": "FProgressBar",
+            "module": "src/components/f-progress-bar/f-progress-bar.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-radio/f-radio.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FRadio",
+          "members": [
             {
               "kind": "field",
-              "name": "category",
+              "name": "value",
               "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+                "text": "\"selected\" | \"unselected\" | undefined"
               },
-              "default": "\"fill\"",
-              "attribute": "category",
+              "default": "\"unselected\"",
+              "attribute": "value",
               "reflects": true
             },
             {
               "kind": "field",
               "name": "state",
               "type": {
-                "text": "FSelectState | undefined"
+                "text": "FRadioState | undefined"
               },
               "default": "\"default\"",
               "attribute": "state",
@@ -7904,454 +7545,474 @@
               "kind": "field",
               "name": "size",
               "type": {
-                "text": "\"medium\" | \"small\" | undefined"
+                "text": "\"small\" | \"medium\" | undefined"
               },
               "attribute": "size",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "value",
+              "name": "disabled",
               "type": {
-                "text": "FSelectValue | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "value",
+              "default": "false",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "options",
+              "name": "slotWrapper",
               "type": {
-                "text": "FSelectOptions"
-              },
-              "attribute": "options",
-              "reflects": true
+                "text": "FDiv"
+              }
             },
             {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "placeholder",
-              "reflects": true
+              "kind": "method",
+              "name": "handleClick",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ],
+              "description": "emit event on click"
             },
             {
-              "kind": "field",
-              "name": "optionTemplate",
-              "type": {
-                "text": "FSelectOptionTemplate | undefined"
-              },
-              "attribute": "option-template"
+              "kind": "method",
+              "name": "checkSlots"
             },
             {
               "kind": "field",
-              "name": "[\"option-template\"]"
+              "name": "tooltipElement",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "iconLeft",
+              "name": "tooltip",
               "type": {
                 "text": "string | undefined"
               },
-              "attribute": "icon-left",
-              "reflects": true
+              "attribute": "tooltip",
+              "reflects": true,
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "height",
+              "name": "mouseEnter",
               "type": {
-                "text": "FSelectHeightProp"
+                "text": "() => void | undefined"
               },
-              "default": "180",
-              "attribute": "height",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "width",
+              "name": "mouseLeave",
               "type": {
-                "text": "FSelectWidthProp | undefined"
+                "text": "() => void | undefined"
               },
-              "default": "\"fill-container\"",
-              "attribute": "width",
-              "reflects": true
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "isMouseOver",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
               "default": "false",
-              "attribute": "loading",
-              "reflects": true
-            },
+              "inheritedFrom": {
+                "name": "FRoot",
+                "module": "src/mixins/components/f-root/f-root.ts"
+              }
+            }
+          ],
+          "attributes": [
             {
-              "kind": "field",
-              "name": "disabled",
+              "name": "value",
               "type": {
-                "text": "boolean | undefined"
+                "text": "\"selected\" | \"unselected\" | undefined"
               },
-              "default": "false",
-              "attribute": "disabled",
-              "reflects": true
+              "default": "\"unselected\"",
+              "fieldName": "value"
             },
             {
-              "kind": "field",
-              "name": "searchable",
+              "name": "state",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FRadioState | undefined"
               },
-              "default": "false",
-              "attribute": "searchable",
-              "reflects": true
+              "default": "\"default\"",
+              "fieldName": "state"
             },
             {
-              "kind": "field",
-              "name": "clear",
+              "name": "size",
+              "type": {
+                "text": "\"small\" | \"medium\" | undefined"
+              },
+              "fieldName": "size"
+            },
+            {
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "clear",
+              "fieldName": "disabled"
+            },
+            {
+              "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": "FRadio",
+          "declaration": {
+            "name": "FRadio",
+            "module": "src/components/f-radio/f-radio.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/components/f-search/f-search.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "FSearch",
+          "members": [
+            {
+              "kind": "field",
+              "name": "variant",
+              "type": {
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+              },
+              "default": "\"curved\"",
+              "attribute": "variant",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "checkbox",
+              "name": "category",
+              "type": {
+                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
+              },
+              "default": "\"fill\"",
+              "attribute": "category",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "result",
+              "type": {
+                "text": "FSearchSuggestions | undefined"
+              },
+              "default": "[]",
+              "attribute": "result",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "state",
+              "type": {
+                "text": "FSearchState | undefined"
+              },
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "\"medium\" | \"small\" | undefined"
+              },
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "value",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "value",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "[\"selected-scope\"]",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "[\"selected-scope\"]",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "placeholder",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "placeholder",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "scope",
+              "type": {
+                "text": "FSearchScope | undefined"
+              },
+              "default": "\"none\"",
+              "attribute": "scope",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "checkbox",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "createOption",
+              "name": "clear",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "true",
+              "attribute": "clear",
+              "reflects": true
+            },
+            {
+              "kind": "field",
+              "name": "[\"search-button\"]",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "create-option",
+              "attribute": "[\"search-button\"]",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "autoAddOption",
+              "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
-              "attribute": "auto-add-option",
+              "default": "false",
+              "attribute": "loading",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "selectionLimit",
+              "name": "resultWhen",
               "type": {
-                "text": "number"
+                "text": "FSearchResultWhen"
               },
-              "default": "2",
-              "attribute": "selection-limit",
+              "description": "to customize result",
+              "attribute": "result-when"
+            },
+            {
+              "kind": "field",
+              "name": "[\"result-when\"]"
+            },
+            {
+              "kind": "field",
+              "name": "resultMaxHeight",
+              "type": {
+                "text": "string | undefined"
+              },
+              "attribute": "result-max-height",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "iconSize",
-              "description": "icon size",
+              "name": "labelSlot",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "descriptionSlot",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helpSlot",
+              "type": {
+                "text": "HTMLElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "headerSection",
+              "type": {
+                "text": "FDiv"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "helperTextSection",
+              "type": {
+                "text": "FDiv"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_labelNodes",
+              "type": {
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_descriptionNodes",
+              "type": {
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "_helpNodes",
+              "type": {
+                "text": "NodeListOf<HTMLElement>"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "hasLabel",
+              "description": "has label slot",
               "readonly": true
             },
             {
               "kind": "field",
-              "name": "outsideClick"
+              "name": "hasDescription",
+              "description": "has description slot",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "containerScroll"
+              "name": "hasHelperText",
+              "description": "has help slot",
+              "readonly": true
             },
             {
               "kind": "method",
-              "name": "applyOptionsStyle",
+              "name": "handleInput",
               "parameters": [
                 {
-                  "name": "width",
+                  "name": "e",
                   "type": {
-                    "text": "number"
+                    "text": "CustomEvent"
                   }
                 }
               ],
-              "description": "apply styling to f-select options wrapper."
+              "description": "emit input custom event"
             },
             {
               "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",
+              "name": "handleScopeSelection",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "MouseEvent"
+                    "text": "CustomEvent"
                   }
                 }
               ],
-              "description": "clear input value on clear icon clicked"
+              "description": "emit input custom event for scope"
             },
             {
               "kind": "method",
-              "name": "clearSelectionInGroups",
+              "name": "handleSearchClick",
               "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"
+                    "text": "CustomEvent"
                   }
                 }
               ],
-              "description": "get sliced array to show selected options"
+              "description": "emit search custom event"
             },
             {
               "kind": "method",
-              "name": "applyInputStyle",
-              "description": "change width of input inside f-select according to searchable prop"
+              "name": "clearInputValue",
+              "description": "clear input value on clear icon clicked"
             },
             {
               "kind": "method",
-              "name": "getConcaticateGroupOptions",
+              "name": "dispatchInputEvent",
               "parameters": [
                 {
-                  "name": "array",
+                  "name": "value",
                   "type": {
-                    "text": "FSelectOptionsGroup"
-                  }
-                }
-              ],
-              "description": "get concatinated array from groups"
-            },
-            {
-              "kind": "method",
-              "name": "clearFilterSearchString",
-              "description": "clear search string"
-            },
-            {
-              "kind": "method",
-              "name": "isStringsArray",
-              "parameters": [
+                    "text": "any"
+                  },
+                  "description": "string for value"
+                },
                 {
-                  "name": "arr",
-                  "type": {
-                    "text": "unknown[]"
-                  }
+                  "name": "scope",
+                  "default": "\"\"",
+                  "description": "string for scope value"
                 }
               ]
             },
-            {
-              "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": "field",
-              "name": "rightOffset",
+              "name": "applyStyling",
+              "description": "set styling class",
               "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": "displayHelpSection",
+              "description": "conditional help section display for false spacing issue"
             },
             {
-              "kind": "field",
-              "name": "renderMultipleSelectionTag",
-              "default": "renderMultipleSelectionTag"
+              "kind": "method",
+              "name": "displayHeaderSection",
+              "description": "conditional header section display for false spacing issue"
             },
             {
               "kind": "field",
@@ -8414,17 +8075,9 @@
           ],
           "attributes": [
             {
-              "name": "type",
+              "name": "variant",
               "type": {
-                "text": "\"single\" | \"multiple\" | undefined"
-              },
-              "default": "\"single\"",
-              "fieldName": "type"
-            },
-            {
-              "name": "variant",
-              "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
+                "text": "\"curved\" | \"round\" | \"block\" | undefined"
               },
               "default": "\"curved\"",
               "fieldName": "variant"
@@ -8437,10 +8090,18 @@
               "default": "\"fill\"",
               "fieldName": "category"
             },
+            {
+              "name": "result",
+              "type": {
+                "text": "FSearchSuggestions | undefined"
+              },
+              "default": "[]",
+              "fieldName": "result"
+            },
             {
               "name": "state",
               "type": {
-                "text": "FSelectState | undefined"
+                "text": "FSearchState | undefined"
               },
               "default": "\"default\"",
               "fieldName": "state"
@@ -8450,21 +8111,22 @@
               "type": {
                 "text": "\"medium\" | \"small\" | undefined"
               },
+              "default": "\"medium\"",
               "fieldName": "size"
             },
             {
               "name": "value",
               "type": {
-                "text": "FSelectValue | undefined"
+                "text": "string | undefined"
               },
               "fieldName": "value"
             },
             {
-              "name": "options",
+              "name": "[\"selected-scope\"]",
               "type": {
-                "text": "FSelectOptions"
+                "text": "string | undefined"
               },
-              "fieldName": "options"
+              "fieldName": "[\"selected-scope\"]"
             },
             {
               "name": "placeholder",
@@ -8474,42 +8136,12 @@
               "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",
-              "fieldName": "height"
-            },
-            {
-              "name": "width",
-              "type": {
-                "text": "FSelectWidthProp | undefined"
-              },
-              "default": "\"fill-container\"",
-              "fieldName": "width"
-            },
-            {
-              "name": "loading",
+              "name": "scope",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FSearchScope | undefined"
               },
-              "default": "false",
-              "fieldName": "loading"
+              "default": "\"none\"",
+              "fieldName": "scope"
             },
             {
               "name": "disabled",
@@ -8519,53 +8151,44 @@
               "default": "false",
               "fieldName": "disabled"
             },
-            {
-              "name": "searchable",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "fieldName": "searchable"
-            },
             {
               "name": "clear",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "false",
+              "default": "true",
               "fieldName": "clear"
             },
             {
-              "name": "checkbox",
+              "name": "[\"search-button\"]",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "checkbox"
+              "fieldName": "[\"search-button\"]"
             },
             {
-              "name": "create-option",
+              "name": "loading",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "createOption"
+              "fieldName": "loading"
             },
             {
-              "name": "auto-add-option",
+              "name": "result-when",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FSearchResultWhen"
               },
-              "default": "true",
-              "fieldName": "autoAddOption"
+              "description": "to customize result",
+              "fieldName": "resultWhen"
             },
             {
-              "name": "selection-limit",
+              "name": "result-max-height",
               "type": {
-                "text": "number"
+                "text": "string | undefined"
               },
-              "default": "2",
-              "fieldName": "selectionLimit"
+              "fieldName": "resultMaxHeight"
             },
             {
               "name": "tooltip",
@@ -8588,554 +8211,298 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FSelect",
+          "name": "FSearch",
           "declaration": {
-            "name": "FSelect",
-            "module": "src/components/f-select/f-select.ts"
+            "name": "FSearch",
+            "module": "src/components/f-search/f-search.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-select/handlers.ts",
+      "path": "src/components/f-select/f-select.ts",
       "declarations": [
         {
-          "kind": "function",
-          "name": "handleDropDownOpen",
-          "parameters": [
+          "kind": "class",
+          "description": "",
+          "name": "FSelect",
+          "members": [
             {
-              "name": "this",
+              "kind": "field",
+              "name": "_labelNodes",
               "type": {
-                "text": "FSelect"
+                "text": "NodeListOf<HTMLElement>"
               }
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "_hasLabel",
               "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "open options menu"
-        },
-        {
-          "kind": "function",
-          "name": "handleDropDownClose",
-          "parameters": [
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "_helpNodes",
               "type": {
-                "text": "FSelect"
+                "text": "NodeListOf<HTMLElement>"
               }
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "_hasHelperText",
               "type": {
-                "text": "MouseEvent"
-              }
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "clearSearch",
-              "default": "true"
-            }
-          ],
-          "description": "close options menu"
-        },
-        {
-          "kind": "function",
-          "name": "handleOptionSelection",
-          "parameters": [
+              "kind": "field",
+              "name": "openDropdown",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false"
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "viewMoreTags",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "boolean"
+              },
+              "default": "false"
             },
             {
-              "name": "option",
+              "kind": "field",
+              "name": "searchValue",
               "type": {
-                "text": "FSelectSingleOption"
-              }
+                "text": "string"
+              },
+              "default": "\"\""
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "selectedOptions",
               "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "action for selection of options if the options is in the form of array"
-        },
-        {
-          "kind": "function",
-          "name": "handleSelectionGroup",
-          "parameters": [
+                "text": "FSelectOptions"
+              },
+              "default": "[]"
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "filteredOptions",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "FSelectOptions"
+              },
+              "default": "[]"
             },
             {
-              "name": "option",
+              "kind": "field",
+              "name": "optimizedHeight",
               "type": {
-                "text": "FSelectSingleOption"
-              }
+                "text": "number"
+              },
+              "default": "0"
             },
             {
-              "name": "group",
+              "kind": "field",
+              "name": "preferredOpenDirection",
               "type": {
                 "text": "string"
-              }
+              },
+              "default": "\"below\""
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "optionsTop",
               "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "action for selection of options if the options is in the form of groups"
-        },
-        {
-          "kind": "function",
-          "name": "handleRemoveGroupSelection",
-          "parameters": [
+                "text": "string"
+              },
+              "default": "\"\""
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "optionsBottom",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "string"
+              },
+              "default": "\"\""
             },
             {
-              "name": "option",
+              "kind": "field",
+              "name": "inputElement",
               "type": {
-                "text": "FSelectSingleOption"
+                "text": "HTMLInputElement"
               }
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "wrapperElement",
               "type": {
-                "text": "MouseEvent"
+                "text": "HTMLDivElement"
               }
-            }
-          ],
-          "description": "remove selection option (in group) when f-tag is clicked"
-        },
-        {
-          "kind": "function",
-          "name": "handleCheckboxInput",
-          "parameters": [
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "optionElement",
               "type": {
-                "text": "FSelect"
+                "text": "HTMLDivElement"
               }
             },
             {
-              "name": "option",
+              "kind": "field",
+              "name": "allOptions",
               "type": {
-                "text": "FSelectSingleOption"
+                "text": "NodeListOf<HTMLElement> | undefined"
               }
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "type",
               "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "handle click on checkbox"
-        },
-        {
-          "kind": "function",
-          "name": "handleCheckboxGroup",
-          "parameters": [
+                "text": "\"single\" | \"multiple\" | undefined"
+              },
+              "default": "\"single\"",
+              "attribute": "type",
+              "reflects": true
+            },
             {
-              "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": "group",
+              "kind": "field",
+              "name": "state",
               "type": {
-                "text": "string"
-              }
+                "text": "FSelectState | undefined"
+              },
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "size",
               "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "handle click on checkbox in group"
-        },
-        {
-          "kind": "function",
-          "name": "handleSelectAll",
-          "parameters": [
+                "text": "\"medium\" | \"small\" | undefined"
+              },
+              "attribute": "size",
+              "reflects": true
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "value",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "FSelectValue | undefined"
+              },
+              "attribute": "value",
+              "reflects": true
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "options",
               "type": {
-                "text": "MouseEvent"
-              }
+                "text": "FSelectOptions"
+              },
+              "attribute": "options",
+              "reflects": true
             },
             {
-              "name": "group",
+              "kind": "field",
+              "name": "placeholder",
               "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "description": "select all options inside a particular group"
-        },
-        {
-          "kind": "function",
-          "name": "handleViewMoreTags",
-          "parameters": [
+                "text": "string | undefined"
+              },
+              "attribute": "placeholder",
+              "reflects": true
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "optionTemplate",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "FSelectOptionTemplate | undefined"
+              },
+              "attribute": "option-template"
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "[\"option-template\"]"
+            },
+            {
+              "kind": "field",
+              "name": "iconLeft",
               "type": {
-                "text": "MouseEvent"
-              }
-            }
-          ],
-          "description": "hide/show f-tags when multiple options are selected"
-        },
-        {
-          "kind": "function",
-          "name": "handleInput",
-          "parameters": [
+                "text": "string | undefined"
+              },
+              "attribute": "icon-left",
+              "reflects": true
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "height",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "FSelectHeightProp"
+              },
+              "default": "180",
+              "attribute": "height",
+              "reflects": true
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "width",
               "type": {
-                "text": "InputEvent"
-              }
-            }
-          ],
-          "description": "emit input custom event for option selection"
-        },
-        {
-          "kind": "function",
-          "name": "handleBlur",
-          "parameters": [
+                "text": "FSelectWidthProp | undefined"
+              },
+              "default": "\"fill-container\"",
+              "attribute": "width",
+              "reflects": true
+            },
             {
-              "name": "this",
+              "kind": "field",
+              "name": "loading",
               "type": {
-                "text": "FSelect"
-              }
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "attribute": "loading",
+              "reflects": true
             },
             {
-              "name": "e",
+              "kind": "field",
+              "name": "disabled",
               "type": {
-                "text": "FocusEvent"
-              }
-            }
-          ]
-        }
-      ],
-      "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",
-              "type": {
-                "text": "FSelect"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "renderSingleSelection",
-          "parameters": [
-            {
-              "name": "this",
-              "type": {
-                "text": "FSelect"
-              }
-            },
-            {
-              "name": "option",
-              "type": {
-                "text": "FSelectSingleOption"
-              }
-            }
-          ]
-        },
-        {
-          "kind": "function",
-          "name": "renderMultipleSelectionTag",
-          "parameters": [
-            {
-              "name": "this",
-              "type": {
-                "text": "FSelect"
-              }
-            },
-            {
-              "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-search/f-search.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "FSearch",
-          "members": [
-            {
-              "kind": "field",
-              "name": "variant",
-              "type": {
-                "text": "\"curved\" | \"round\" | \"block\" | undefined"
-              },
-              "default": "\"curved\"",
-              "attribute": "variant",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "category",
-              "type": {
-                "text": "\"fill\" | \"outline\" | \"transparent\" | undefined"
-              },
-              "default": "\"fill\"",
-              "attribute": "category",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "result",
-              "type": {
-                "text": "FSearchSuggestions | undefined"
-              },
-              "default": "[]",
-              "attribute": "result",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "state",
-              "type": {
-                "text": "FSearchState | undefined"
-              },
-              "default": "\"default\"",
-              "attribute": "state",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "size",
-              "type": {
-                "text": "\"medium\" | \"small\" | undefined"
-              },
-              "default": "\"medium\"",
-              "attribute": "size",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "value",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "value",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "[\"selected-scope\"]",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "[\"selected-scope\"]",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "placeholder",
-              "type": {
-                "text": "string | undefined"
-              },
-              "attribute": "placeholder",
-              "reflects": true
-            },
-            {
-              "kind": "field",
-              "name": "scope",
-              "type": {
-                "text": "FSearchScope | undefined"
+                "text": "boolean | undefined"
               },
-              "default": "\"none\"",
-              "attribute": "scope",
+              "default": "false",
+              "attribute": "disabled",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "disabled",
+              "name": "searchable",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "disabled",
+              "attribute": "searchable",
               "reflects": true
             },
             {
@@ -9144,264 +8511,424 @@
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
+              "default": "false",
               "attribute": "clear",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "[\"search-button\"]",
+              "name": "checkbox",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "[\"search-button\"]",
+              "attribute": "checkbox",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "loading",
+              "name": "createOption",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "attribute": "loading",
+              "attribute": "create-option",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "resultWhen",
+              "name": "autoAddOption",
               "type": {
-                "text": "FSearchResultWhen"
+                "text": "boolean | undefined"
               },
-              "description": "to customize result",
-              "attribute": "result-when"
-            },
-            {
-              "kind": "field",
-              "name": "[\"result-when\"]"
+              "default": "true",
+              "attribute": "auto-add-option",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "resultMaxHeight",
+              "name": "selectionLimit",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "attribute": "result-max-height",
+              "default": "2",
+              "attribute": "selection-limit",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "labelSlot",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "name": "iconSize",
+              "description": "icon size",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "descriptionSlot",
-              "type": {
-                "text": "HTMLElement"
-              }
+              "name": "outsideClick"
             },
             {
               "kind": "field",
-              "name": "helpSlot",
-              "type": {
-                "text": "HTMLElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "headerSection",
-              "type": {
-                "text": "FDiv"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "helperTextSection",
-              "type": {
-                "text": "FDiv"
-              }
+              "name": "containerScroll"
             },
             {
-              "kind": "field",
-              "name": "_labelNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+              "kind": "method",
+              "name": "applyOptionsStyle",
+              "parameters": [
+                {
+                  "name": "width",
+                  "type": {
+                    "text": "number"
+                  }
+                }
+              ],
+              "description": "apply styling to f-select options wrapper."
             },
             {
-              "kind": "field",
-              "name": "_descriptionNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+              "kind": "method",
+              "name": "getIndex",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "FSelectSingleOption"
+                  }
+                }
+              ],
+              "description": "index search for the resepctive option"
             },
             {
-              "kind": "field",
-              "name": "_helpNodes",
-              "type": {
-                "text": "NodeListOf<HTMLElement>"
-              }
+              "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": "hasLabel",
-              "description": "has label slot",
-              "readonly": true
+              "kind": "method",
+              "name": "isSelected",
+              "parameters": [
+                {
+                  "name": "option",
+                  "type": {
+                    "text": "FSelectOptionObject | string"
+                  }
+                }
+              ],
+              "description": "check selection for respective option."
             },
             {
-              "kind": "field",
-              "name": "hasDescription",
-              "description": "has description slot",
-              "readonly": true
+              "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": "hasHelperText",
-              "description": "has help slot",
-              "readonly": true
+              "kind": "method",
+              "name": "clearInputValue",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ],
+              "description": "clear input value on clear icon clicked"
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "clearSelectionInGroups",
               "parameters": [
                 {
                   "name": "e",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "MouseEvent"
                   }
                 }
               ],
-              "description": "emit input custom event"
+              "description": "clear te search string"
             },
             {
               "kind": "method",
-              "name": "handleScopeSelection",
+              "name": "getCheckedValue",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "group",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "string"
                   }
                 }
               ],
-              "description": "emit input custom event for scope"
+              "description": "check if all values of group are selected or not or are in idetereminate state"
             },
             {
               "kind": "method",
-              "name": "handleSearchClick",
+              "name": "getSlicedSelections",
               "parameters": [
                 {
-                  "name": "e",
+                  "name": "optionList",
                   "type": {
-                    "text": "CustomEvent"
+                    "text": "FSelectOptionsProp"
                   }
                 }
               ],
-              "description": "emit search custom event"
+              "description": "get sliced array to show selected options"
             },
             {
               "kind": "method",
-              "name": "clearInputValue",
-              "description": "clear input value on clear icon clicked"
+              "name": "applyInputStyle",
+              "description": "change width of input inside f-select according to searchable prop"
             },
             {
               "kind": "method",
-              "name": "dispatchInputEvent",
+              "name": "getConcaticateGroupOptions",
               "parameters": [
                 {
-                  "name": "value",
+                  "name": "array",
                   "type": {
-                    "text": "any"
-                  },
-                  "description": "string for value"
-                },
+                    "text": "FSelectOptionsGroup"
+                  }
+                }
+              ],
+              "description": "get concatinated array from groups"
+            },
+            {
+              "kind": "method",
+              "name": "clearFilterSearchString",
+              "description": "clear search string"
+            },
+            {
+              "kind": "method",
+              "name": "isStringsArray",
+              "parameters": [
                 {
-                  "name": "scope",
-                  "default": "\"\"",
-                  "description": "string for scope value"
+                  "name": "arr",
+                  "type": {
+                    "text": "unknown[]"
+                  }
                 }
               ]
             },
             {
-              "kind": "field",
-              "name": "applyStyling",
-              "description": "set styling class",
-              "readonly": true
+              "kind": "method",
+              "name": "createNewOption",
+              "parameters": [
+                {
+                  "name": "e",
+                  "type": {
+                    "text": "MouseEvent"
+                  }
+                }
+              ],
+              "description": "Create New Option when option not present"
             },
             {
               "kind": "method",
-              "name": "displayHelpSection",
-              "description": "conditional help section display for false spacing issue"
+              "name": "validateProperties",
+              "description": "validate properties"
             },
             {
               "kind": "method",
-              "name": "displayHeaderSection",
-              "description": "conditional header section display for false spacing issue"
+              "name": "updateDimentions",
+              "description": "options wrapper dimentions update on the basis of window screen"
             },
             {
-              "kind": "field",
-              "name": "tooltipElement",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "kind": "method",
+              "name": "_onLabelSlotChange"
             },
             {
-              "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": "method",
+              "name": "_onHelpSlotChange"
             },
             {
               "kind": "field",
-              "name": "mouseEnter",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "name": "singleSelectionStyle",
+              "readonly": true
             },
             {
               "kind": "field",
-              "name": "mouseLeave",
-              "type": {
-                "text": "() => void | undefined"
-              },
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
+              "name": "rightOffset",
+              "readonly": true
             },
             {
-              "kind": "field",
-              "name": "isMouseOver",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false",
-              "inheritedFrom": {
-                "name": "FRoot",
-                "module": "src/mixins/components/f-root/f-root.ts"
-              }
-            }
+              "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": "handleKeyDown",
+              "default": "handleKeyDown"
+            },
+            {
+              "kind": "field",
+              "name": "handleOptionMouseOver",
+              "default": "handleOptionMouseOver"
+            },
+            {
+              "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"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "isMouseOver",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "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": {
@@ -9418,18 +8945,10 @@
               "default": "\"fill\"",
               "fieldName": "category"
             },
-            {
-              "name": "result",
-              "type": {
-                "text": "FSearchSuggestions | undefined"
-              },
-              "default": "[]",
-              "fieldName": "result"
-            },
             {
               "name": "state",
               "type": {
-                "text": "FSearchState | undefined"
+                "text": "FSelectState | undefined"
               },
               "default": "\"default\"",
               "fieldName": "state"
@@ -9439,22 +8958,21 @@
               "type": {
                 "text": "\"medium\" | \"small\" | undefined"
               },
-              "default": "\"medium\"",
               "fieldName": "size"
             },
             {
               "name": "value",
               "type": {
-                "text": "string | undefined"
+                "text": "FSelectValue | undefined"
               },
               "fieldName": "value"
             },
             {
-              "name": "[\"selected-scope\"]",
+              "name": "options",
               "type": {
-                "text": "string | undefined"
+                "text": "FSelectOptions"
               },
-              "fieldName": "[\"selected-scope\"]"
+              "fieldName": "options"
             },
             {
               "name": "placeholder",
@@ -9464,12 +8982,42 @@
               "fieldName": "placeholder"
             },
             {
-              "name": "scope",
+              "name": "option-template",
               "type": {
-                "text": "FSearchScope | undefined"
+                "text": "FSelectOptionTemplate | undefined"
               },
-              "default": "\"none\"",
-              "fieldName": "scope"
+              "fieldName": "optionTemplate"
+            },
+            {
+              "name": "icon-left",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "iconLeft"
+            },
+            {
+              "name": "height",
+              "type": {
+                "text": "FSelectHeightProp"
+              },
+              "default": "180",
+              "fieldName": "height"
+            },
+            {
+              "name": "width",
+              "type": {
+                "text": "FSelectWidthProp | undefined"
+              },
+              "default": "\"fill-container\"",
+              "fieldName": "width"
+            },
+            {
+              "name": "loading",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "loading"
             },
             {
               "name": "disabled",
@@ -9479,44 +9027,53 @@
               "default": "false",
               "fieldName": "disabled"
             },
+            {
+              "name": "searchable",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "default": "false",
+              "fieldName": "searchable"
+            },
             {
               "name": "clear",
               "type": {
                 "text": "boolean | undefined"
               },
-              "default": "true",
+              "default": "false",
               "fieldName": "clear"
             },
             {
-              "name": "[\"search-button\"]",
+              "name": "checkbox",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "[\"search-button\"]"
+              "fieldName": "checkbox"
             },
             {
-              "name": "loading",
+              "name": "create-option",
               "type": {
                 "text": "boolean | undefined"
               },
               "default": "false",
-              "fieldName": "loading"
+              "fieldName": "createOption"
             },
             {
-              "name": "result-when",
+              "name": "auto-add-option",
               "type": {
-                "text": "FSearchResultWhen"
+                "text": "boolean | undefined"
               },
-              "description": "to customize result",
-              "fieldName": "resultWhen"
+              "default": "true",
+              "fieldName": "autoAddOption"
             },
             {
-              "name": "result-max-height",
+              "name": "selection-limit",
               "type": {
-                "text": "string | undefined"
+                "text": "number"
               },
-              "fieldName": "resultMaxHeight"
+              "default": "2",
+              "fieldName": "selectionLimit"
             },
             {
               "name": "tooltip",
@@ -9539,10 +9096,498 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FSearch",
+          "name": "FSelect",
           "declaration": {
-            "name": "FSearch",
-            "module": "src/components/f-search/f-search.ts"
+            "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"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent | KeyboardEvent"
+              }
+            }
+          ],
+          "description": "open options menu"
+        },
+        {
+          "kind": "function",
+          "name": "handleDropDownClose",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent | KeyboardEvent"
+              }
+            },
+            {
+              "name": "clearSearch",
+              "default": "true"
+            }
+          ],
+          "description": "close options menu"
+        },
+        {
+          "kind": "function",
+          "name": "handleOptionSelection",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "option",
+              "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",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "option",
+              "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"
+        },
+        {
+          "kind": "function",
+          "name": "handleRemoveGroupSelection",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "option",
+              "type": {
+                "text": "FSelectSingleOption"
+              }
+            },
+            {
+              "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": "FSelect"
+              }
+            },
+            {
+              "name": "option",
+              "type": {
+                "text": "FSelectSingleOption"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "handle click on checkbox"
+        },
+        {
+          "kind": "function",
+          "name": "handleCheckboxGroup",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "option",
+              "type": {
+                "text": "FSelectSingleOption"
+              }
+            },
+            {
+              "name": "group",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "handle click on checkbox in group"
+        },
+        {
+          "kind": "function",
+          "name": "handleSelectAll",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent"
+              }
+            },
+            {
+              "name": "group",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "description": "select all options inside a particular group"
+        },
+        {
+          "kind": "function",
+          "name": "handleViewMoreTags",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent"
+              }
+            }
+          ],
+          "description": "hide/show f-tags when multiple options are selected"
+        },
+        {
+          "kind": "function",
+          "name": "handleInput",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "InputEvent"
+              }
+            }
+          ],
+          "description": "emit input custom event for option selection"
+        },
+        {
+          "kind": "function",
+          "name": "handleBlur",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "FocusEvent"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "handleKeyDown",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "KeyboardEvent"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "handleOptionMouseOver",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "e",
+              "type": {
+                "text": "MouseEvent"
+              }
+            }
+          ]
+        }
+      ],
+      "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": "js",
+          "name": "handleKeyDown",
+          "declaration": {
+            "name": "handleKeyDown",
+            "module": "src/components/f-select/handlers.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "handleOptionMouseOver",
+          "declaration": {
+            "name": "handleOptionMouseOver",
+            "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",
+              "type": {
+                "text": "FSelect"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "renderSingleSelection",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "name": "option",
+              "type": {
+                "text": "FSelectSingleOption"
+              }
+            }
+          ]
+        },
+        {
+          "kind": "function",
+          "name": "renderMultipleSelectionTag",
+          "parameters": [
+            {
+              "name": "this",
+              "type": {
+                "text": "FSelect"
+              }
+            },
+            {
+              "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"
           }
         }
       ]
diff --git a/packages/flow-core/html.html-data.json b/packages/flow-core/html.html-data.json
index 3fa917af2..6be5c363c 100644
--- a/packages/flow-core/html.html-data.json
+++ b/packages/flow-core/html.html-data.json
@@ -14747,7 +14747,7 @@
     },
     {
       "name": "f-select",
-      "description": "Events:\n\n  * `input` {`CustomEvent<FSelectCustomEvent>`} - \n\n  * `add-option` {`CustomEvent<FSelectCreateOptionEvent>`} - \n\nAttributes:\n\n  * `openDropdown` {`boolean`} - \n\n  * `viewMoreTags` {`boolean`} - \n\n  * `searchValue` {`string`} - \n\n  * `selectedOptions` - \n\n  * `filteredOptions` - \n\n  * `currentCursor` {`number`} - \n\n  * `currentGroupCursor` {`number`} - \n\n  * `currentGroupOptionCursor` {`number`} - \n\n  * `type` {`\"single\" | \"multiple\" | undefined`} - \n\n  * `variant` {`\"round\" | \"curved\" | \"block\" | undefined`} - \n\n  * `category` {`\"fill\" | \"outline\" | \"transparent\" | undefined`} - \n\n  * `state` {`FSelectState | undefined`} - \n\n  * `size` {`\"small\" | \"medium\" | undefined`} - \n\n  * `value` - \n\n  * `options` - \n\n  * `placeholder` {`string | undefined`} - \n\n  * `option-template` - \n\n  * `icon-left` {`string | undefined`} - \n\n  * `height` {`number`} - \n\n  * `width` {`FSelectWidthProp | undefined`} - \n\n  * `loading` {`boolean | undefined`} - \n\n  * `disabled` {`boolean | undefined`} - \n\n  * `searchable` {`boolean | undefined`} - \n\n  * `clear` {`boolean | undefined`} - \n\n  * `checkbox` {`boolean | undefined`} - \n\n  * `create-option` {`boolean | undefined`} - \n\n  * `auto-add-option` {`boolean | undefined`} - \n\n  * `selection-limit` {`number`} - \n\n  * `tooltip` {`string | undefined`} - \n\nProperties:\n\n  * `_labelNodes` {`NodeListOf<HTMLElement>`} - \n\n  * `_hasLabel` {`boolean`} - \n\n  * `_helpNodes` {`NodeListOf<HTMLElement>`} - \n\n  * `_hasHelperText` {`boolean`} - \n\n  * `openDropdown` {`boolean`} - \n\n  * `viewMoreTags` {`boolean`} - \n\n  * `searchValue` {`string`} - \n\n  * `selectedOptions` - \n\n  * `filteredOptions` - \n\n  * `currentCursor` {`number`} - \n\n  * `currentGroupCursor` {`number`} - \n\n  * `optimizedHeight` {`number`} - \n\n  * `preferredOpenDirection` {`string`} - \n\n  * `optionsTop` {`string`} - \n\n  * `optionsBottom` {`string`} - \n\n  * `currentGroupOptionCursor` {`number`} - \n\n  * `inputElement` {`HTMLInputElement`} - \n\n  * `wrapperElement` {`HTMLDivElement`} - \n\n  * `optionElement` {`HTMLDivElement`} - \n\n  * `type` {`\"single\" | \"multiple\" | undefined`} - \n\n  * `variant` {`\"round\" | \"curved\" | \"block\" | undefined`} - \n\n  * `category` {`\"fill\" | \"outline\" | \"transparent\" | undefined`} - \n\n  * `state` {`FSelectState | undefined`} - \n\n  * `size` {`\"small\" | \"medium\" | undefined`} - \n\n  * `value` - \n\n  * `options` - \n\n  * `placeholder` {`string | undefined`} - \n\n  * `optionTemplate` - \n\n  * `iconLeft` {`string | undefined`} - \n\n  * `height` {`number`} - \n\n  * `width` {`FSelectWidthProp | undefined`} - \n\n  * `loading` {`boolean | undefined`} - \n\n  * `disabled` {`boolean | undefined`} - \n\n  * `searchable` {`boolean | undefined`} - \n\n  * `clear` {`boolean | undefined`} - \n\n  * `checkbox` {`boolean | undefined`} - \n\n  * `createOption` {`boolean | undefined`} - \n\n  * `autoAddOption` {`boolean | undefined`} - \n\n  * `selectionLimit` {`number`} - \n\n  * `iconSize` {`\"x-small\" | \"small\" | undefined`} - icon size\n\n  * `outsideClick` - \n\n  * `containerScroll` - \n\n  * `singleSelectionStyle` {`string`} - \n\n  * `rightOffset` {`74 | 54`} - \n\n  * `handleDropDownOpen` - \n\n  * `handleDropDownClose` - \n\n  * `handleOptionSelection` - \n\n  * `handleSelectionGroup` - \n\n  * `handleRemoveGroupSelection` - \n\n  * `handleCheckboxInput` - \n\n  * `handleCheckboxGroup` - \n\n  * `handleSelectAll` - \n\n  * `handleViewMoreTags` - \n\n  * `handleInput` - \n\n  * `handleBlur` - \n\n  * `render` - \n\n  * `renderSingleSelection` - \n\n  * `renderMultipleSelectionTag` - \n\n  * `styles` {`CSSResult[]`} - css loaded from scss file\n\n  * `tooltipElement` {`HTMLElement`} - \n\n  * `tooltip` {`string | undefined`} - \n\n  * `mouseEnter` - \n\n  * `mouseLeave` - \n\n  * `isMouseOver` {`boolean`} - ",
+      "description": "Events:\n\n  * `input` {`CustomEvent<FSelectCustomEvent>`} - \n\n  * `add-option` {`CustomEvent<FSelectCreateOptionEvent>`} - \n\nAttributes:\n\n  * `openDropdown` {`boolean`} - \n\n  * `viewMoreTags` {`boolean`} - \n\n  * `searchValue` {`string`} - \n\n  * `selectedOptions` - \n\n  * `filteredOptions` - \n\n  * `type` {`\"single\" | \"multiple\" | undefined`} - \n\n  * `variant` {`\"round\" | \"curved\" | \"block\" | undefined`} - \n\n  * `category` {`\"fill\" | \"outline\" | \"transparent\" | undefined`} - \n\n  * `state` {`FSelectState | undefined`} - \n\n  * `size` {`\"small\" | \"medium\" | undefined`} - \n\n  * `value` - \n\n  * `options` - \n\n  * `placeholder` {`string | undefined`} - \n\n  * `option-template` - \n\n  * `icon-left` {`string | undefined`} - \n\n  * `height` {`number`} - \n\n  * `width` {`FSelectWidthProp | undefined`} - \n\n  * `loading` {`boolean | undefined`} - \n\n  * `disabled` {`boolean | undefined`} - \n\n  * `searchable` {`boolean | undefined`} - \n\n  * `clear` {`boolean | undefined`} - \n\n  * `checkbox` {`boolean | undefined`} - \n\n  * `create-option` {`boolean | undefined`} - \n\n  * `auto-add-option` {`boolean | undefined`} - \n\n  * `selection-limit` {`number`} - \n\n  * `tooltip` {`string | undefined`} - \n\nProperties:\n\n  * `_labelNodes` {`NodeListOf<HTMLElement>`} - \n\n  * `_hasLabel` {`boolean`} - \n\n  * `_helpNodes` {`NodeListOf<HTMLElement>`} - \n\n  * `_hasHelperText` {`boolean`} - \n\n  * `openDropdown` {`boolean`} - \n\n  * `viewMoreTags` {`boolean`} - \n\n  * `searchValue` {`string`} - \n\n  * `selectedOptions` - \n\n  * `filteredOptions` - \n\n  * `optimizedHeight` {`number`} - \n\n  * `preferredOpenDirection` {`string`} - \n\n  * `optionsTop` {`string`} - \n\n  * `optionsBottom` {`string`} - \n\n  * `inputElement` {`HTMLInputElement`} - \n\n  * `wrapperElement` {`HTMLDivElement`} - \n\n  * `optionElement` {`HTMLDivElement`} - \n\n  * `allOptions` {`NodeListOf<HTMLElement> | undefined`} - \n\n  * `type` {`\"single\" | \"multiple\" | undefined`} - \n\n  * `variant` {`\"round\" | \"curved\" | \"block\" | undefined`} - \n\n  * `category` {`\"fill\" | \"outline\" | \"transparent\" | undefined`} - \n\n  * `state` {`FSelectState | undefined`} - \n\n  * `size` {`\"small\" | \"medium\" | undefined`} - \n\n  * `value` - \n\n  * `options` - \n\n  * `placeholder` {`string | undefined`} - \n\n  * `optionTemplate` - \n\n  * `iconLeft` {`string | undefined`} - \n\n  * `height` {`number`} - \n\n  * `width` {`FSelectWidthProp | undefined`} - \n\n  * `loading` {`boolean | undefined`} - \n\n  * `disabled` {`boolean | undefined`} - \n\n  * `searchable` {`boolean | undefined`} - \n\n  * `clear` {`boolean | undefined`} - \n\n  * `checkbox` {`boolean | undefined`} - \n\n  * `createOption` {`boolean | undefined`} - \n\n  * `autoAddOption` {`boolean | undefined`} - \n\n  * `selectionLimit` {`number`} - \n\n  * `iconSize` {`\"x-small\" | \"small\" | undefined`} - icon size\n\n  * `outsideClick` - \n\n  * `containerScroll` - \n\n  * `singleSelectionStyle` {`string`} - \n\n  * `rightOffset` {`74 | 54`} - \n\n  * `handleDropDownOpen` - \n\n  * `handleDropDownClose` - \n\n  * `handleOptionSelection` - \n\n  * `handleSelectionGroup` - \n\n  * `handleRemoveGroupSelection` - \n\n  * `handleCheckboxInput` - \n\n  * `handleCheckboxGroup` - \n\n  * `handleSelectAll` - \n\n  * `handleViewMoreTags` - \n\n  * `handleInput` - \n\n  * `handleBlur` - \n\n  * `handleKeyDown` - \n\n  * `handleOptionMouseOver` - \n\n  * `render` - \n\n  * `renderSingleSelection` - \n\n  * `renderMultipleSelectionTag` - \n\n  * `styles` {`CSSResult[]`} - css loaded from scss file\n\n  * `tooltipElement` {`HTMLElement`} - \n\n  * `tooltip` {`string | undefined`} - \n\n  * `mouseEnter` - \n\n  * `mouseLeave` - \n\n  * `isMouseOver` {`boolean`} - ",
       "attributes": [
         {
           "name": "openDropdown",
@@ -14773,18 +14773,6 @@
           "description": "`filteredOptions` - \n\nProperty: filteredOptions\n\nDefault: ",
           "values": []
         },
-        {
-          "name": "currentCursor",
-          "description": "`currentCursor` {`number`} - \n\nProperty: currentCursor\n\nDefault: -1"
-        },
-        {
-          "name": "currentGroupCursor",
-          "description": "`currentGroupCursor` {`number`} - \n\nProperty: currentGroupCursor\n\nDefault: -1"
-        },
-        {
-          "name": "currentGroupOptionCursor",
-          "description": "`currentGroupOptionCursor` {`number`} - \n\nProperty: currentGroupOptionCursor\n\nDefault: -1"
-        },
         {
           "name": "type",
           "description": "`type` {`\"single\" | \"multiple\" | undefined`} - \n\nProperty: type\n\nDefault: single",
diff --git a/packages/flow-core/package.json b/packages/flow-core/package.json
index dd11aacb8..64071ad6e 100644
--- a/packages/flow-core/package.json
+++ b/packages/flow-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@cldcvr/flow-core",
-  "version": "1.25.5",
+  "version": "1.26.0",
   "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-div/f-div.scss b/packages/flow-core/src/components/f-div/f-div.scss
index 8df3d2e46..286de089b 100644
--- a/packages/flow-core/src/components/f-div/f-div.scss
+++ b/packages/flow-core/src/components/f-div/f-div.scss
@@ -108,19 +108,19 @@ f-div {
 	}
 
 	&.f-div-custom-width {
-    --max-width: none; /* Define a CSS variable */
-    max-width: var(--max-width) !important;
+		--max-width: none; /* Define a CSS variable */
+		max-width: var(--max-width) !important;
 	}
 
 	&.f-div-custom-height {
-    --max-height: none; /* Define a CSS variable */
-    max-height: var(--max-height) !important;
+		--max-height: none; /* Define a CSS variable */
+		max-height: var(--max-height) !important;
 	}
 
 	&[highlight] {
-      position: relative;
-      z-index: 1001; /* set a higher z-index for the highlighted div to place it above the overlay */
-    }
+		position: relative;
+		z-index: 1001; /* set a higher z-index for the highlighted div to place it above the overlay */
+	}
 	// iterating over states and appyling respective css
 	@each $state, $value in $states {
 		&[state^="#{$state}"] {
@@ -136,13 +136,14 @@ f-div {
 					background-color: map.get($value, "hover");
 					> f-div {
 						&[state="inherit"] {
-							--color-inherit-background :var(--color-inherit-background-hover)
+							--color-inherit-background: var(--color-inherit-background-hover);
 							background-color: var(--color-inherit-background-hover);
 						}
 					}
 				}
 			}
 			&.f-select-options-clickable {
+				cursor: pointer;
 				&[clickable] {
 					&:hover {
 						background-color: var(--color-surface-tertiary);
@@ -151,6 +152,9 @@ f-div {
 				&[selected="background"] {
 					background-color: var(--color-surface-tertiary);
 				}
+				&.hover {
+					background-color: var(--color-surface-tertiary);
+				}
 			}
 			// if selected state is background
 			&[selected="background"] {
@@ -201,7 +205,7 @@ f-div {
 		width: fit-content;
 	}
 	&[slot="description"] {
-		font-weight: 350;
+		font-weight: 400;
 		font-size: 12px;
 		line-height: 18px;
 		color: var(--color-text-secondary);
@@ -299,11 +303,12 @@ f-div {
 		> f-div[width="fill-container"] {
 			width: 100%;
 		}
-		> f-form-builder,> f-accordion{
+		> f-form-builder,
+		> f-accordion {
 			width: 100%;
 		}
-		> f-accordion{
-			flex: 0 0  auto;
+		> f-accordion {
+			flex: 0 0 auto;
 		}
 	}
 
diff --git a/packages/flow-core/src/components/f-select/f-select.ts b/packages/flow-core/src/components/f-select/f-select.ts
index 4fdf190f5..7930063d1 100644
--- a/packages/flow-core/src/components/f-select/f-select.ts
+++ b/packages/flow-core/src/components/f-select/f-select.ts
@@ -1,6 +1,6 @@
 /* eslint-disable no-mixed-spaces-and-tabs */
 import { HTMLTemplateResult, PropertyValues, unsafeCSS } from "lit";
-import { property, query, queryAssignedElements, state } from "lit/decorators.js";
+import { property, query, queryAll, queryAssignedElements, state } from "lit/decorators.js";
 import eleStyle from "./f-select.scss";
 import { FRoot } from "../../mixins/components/f-root/f-root";
 import { FText } from "../f-text/f-text";
@@ -19,7 +19,9 @@ import {
 	handleSelectAll,
 	handleViewMoreTags,
 	handleInput,
-	handleBlur
+	handleBlur,
+	handleKeyDown,
+	handleOptionMouseOver
 } from "./handlers";
 import { FIconButton } from "../f-icon-button/f-icon-button";
 import { flowElement } from "./../../utils";
@@ -112,18 +114,6 @@ export class FSelect extends FRoot {
 	@state({})
 	filteredOptions: FSelectOptions = [];
 
-	/**
-	 * @attribute keyboard hover for array of objects
-	 */
-	@state({})
-	currentCursor = -1;
-
-	/**
-	 * @attribute keyboard hover for group for objects consisting groups
-	 */
-	@state({})
-	currentGroupCursor = -1;
-
 	@state({})
 	optimizedHeight = 0;
 
@@ -136,12 +126,6 @@ export class FSelect extends FRoot {
 	@state({})
 	optionsBottom = "";
 
-	/**
-	 * @attribute keyboard hover for options in group for objects consisting groups
-	 */
-	@state({})
-	currentGroupOptionCursor = -1;
-
 	@query("#f-select")
 	inputElement!: HTMLInputElement;
 
@@ -151,6 +135,9 @@ export class FSelect extends FRoot {
 	@query("#f-select-options")
 	optionElement!: HTMLDivElement;
 
+	@queryAll(".f-select-options-clickable:not([disabled])")
+	allOptions?: NodeListOf<HTMLElement>;
+
 	/**
 	 * @attribute Categories are various visual representations of an input field.
 	 */
@@ -184,7 +171,7 @@ export class FSelect extends FRoot {
 	/**
 	 * @attribute Defines the value of an f-select. Validation rules are applied on the value depending on the type property of the f-text-input.
 	 */
-	@property({ reflect: true, type: Object })
+	@property({ reflect: true, type: [Object, String] })
 	value?: FSelectValue;
 
 	/**
@@ -631,6 +618,8 @@ export class FSelect extends FRoot {
 	handleViewMoreTags = handleViewMoreTags;
 	handleInput = handleInput;
 	handleBlur = handleBlur;
+	handleKeyDown = handleKeyDown;
+	handleOptionMouseOver = handleOptionMouseOver;
 	render = render;
 	renderSingleSelection = renderSingleSelection;
 	renderMultipleSelectionTag = renderMultipleSelectionTag;
diff --git a/packages/flow-core/src/components/f-select/handlers.ts b/packages/flow-core/src/components/f-select/handlers.ts
index 2ab6a3248..3a2ff9bb8 100644
--- a/packages/flow-core/src/components/f-select/handlers.ts
+++ b/packages/flow-core/src/components/f-select/handlers.ts
@@ -12,7 +12,7 @@ import _ from "lodash";
 /**
  * open options menu
  */
-export function handleDropDownOpen(this: FSelect, e: MouseEvent) {
+export function handleDropDownOpen(this: FSelect, e: MouseEvent | KeyboardEvent) {
 	if (!this.loading) {
 		this.openDropdown = true;
 		this?.inputElement?.focus();
@@ -24,14 +24,15 @@ export function handleDropDownOpen(this: FSelect, e: MouseEvent) {
 /**
  * close options menu
  */
-export function handleDropDownClose(this: FSelect, e: MouseEvent, clearSearch = true) {
+export function handleDropDownClose(
+	this: FSelect,
+	e: MouseEvent | KeyboardEvent,
+	clearSearch = true
+) {
 	this.openDropdown = false;
 	if (clearSearch) {
 		this.clearFilterSearchString();
 	}
-	this.currentCursor = -1;
-	this.currentGroupCursor = -1;
-	this.currentGroupOptionCursor = -1;
 	this.requestUpdate();
 	e.stopPropagation();
 
@@ -281,3 +282,72 @@ export function handleBlur(this: FSelect, e: FocusEvent) {
 	e.stopImmediatePropagation();
 	e.stopPropagation();
 }
+
+export function handleKeyDown(this: FSelect, e: KeyboardEvent) {
+	if (this.openDropdown) {
+		if (e.code === "ArrowDown" || e.code === "ArrowUp") {
+			let nextToHover: Element | undefined = undefined;
+			const allOptionsArray = Array.prototype.slice.call(this.allOptions) as HTMLElement[];
+			const currentHoverIndex = allOptionsArray?.findIndex(op => op.classList.contains("hover"));
+
+			const currentHover = allOptionsArray[currentHoverIndex];
+			if (currentHover) {
+				currentHover.classList.remove("hover");
+				if (allOptionsArray[currentHoverIndex + 1] && e.code === "ArrowDown") {
+					allOptionsArray[currentHoverIndex + 1].classList.add("hover");
+					nextToHover = allOptionsArray[currentHoverIndex + 1];
+				} else if (allOptionsArray[currentHoverIndex - 1] && e.code === "ArrowUp") {
+					allOptionsArray[currentHoverIndex - 1].classList.add("hover");
+					nextToHover = allOptionsArray[currentHoverIndex - 1];
+				} else if (this.allOptions && e.code === "ArrowDown") {
+					this.allOptions[0].classList.add("hover");
+					nextToHover = this.allOptions[0];
+				} else if (this.allOptions && e.code === "ArrowUp") {
+					this.allOptions[this.allOptions.length - 1].classList.add("hover");
+					nextToHover = this.allOptions[this.allOptions.length - 1];
+				}
+			} else if (this.allOptions && e.code === "ArrowDown") {
+				this.allOptions[0].classList.add("hover");
+				nextToHover = this.allOptions[0];
+			} else if (this.allOptions && e.code === "ArrowUp") {
+				this.allOptions[this.allOptions.length - 1].classList.add("hover");
+				nextToHover = this.allOptions[this.allOptions.length - 1];
+			}
+
+			nextToHover?.scrollIntoView({
+				behavior: "auto",
+				block: "nearest"
+			});
+		} else if (e.code === "Enter") {
+			const currentHover = (Array.prototype.slice.call(this.allOptions) as HTMLElement[])?.find(
+				op => op.classList.contains("hover")
+			);
+			if (currentHover) {
+				currentHover.click();
+			}
+		} else if (e.code === "Escape") {
+			this.handleDropDownClose(e);
+		}
+	} else if (!this.openDropdown && (e.code === "ArrowDown" || e.code === "ArrowUp")) {
+		this.handleDropDownOpen(e);
+	}
+}
+
+export function handleOptionMouseOver(this: FSelect, e: MouseEvent) {
+	const currentHover = (Array.prototype.slice.call(this.allOptions) as HTMLElement[])?.find(op =>
+		op.classList.contains("hover")
+	);
+	if (currentHover) {
+		currentHover.classList.remove("hover");
+	}
+	(e.composedPath()[0] as HTMLElement).classList.add("hover");
+	const nextHover = e.composedPath().find(op => {
+		if (op instanceof HTMLElement) {
+			return op.classList.contains("f-select-options-clickable");
+		}
+		return false;
+	}) as HTMLElement | undefined;
+	if (nextHover) {
+		nextHover.classList.add("hover");
+	}
+}
diff --git a/packages/flow-core/src/components/f-select/render.ts b/packages/flow-core/src/components/f-select/render.ts
index 4da65855e..f964881e0 100644
--- a/packages/flow-core/src/components/f-select/render.ts
+++ b/packages/flow-core/src/components/f-select/render.ts
@@ -310,6 +310,7 @@ export default function render(this: FSelect) {
 				?allow-gap=${this._hasLabel && !this._hasHelperText ? true : false}
 				data-qa-id=${this.getAttribute("data-qa-element-id")}
 				@click=${this.handleDropDownOpen}
+				@keydown=${this.handleKeyDown}
 			>
 				${prefixAppend} ${suffixAppend}
 				<div
@@ -322,7 +323,7 @@ export default function render(this: FSelect) {
 						${Array.isArray(this.options)
 							? this.filteredOptions.length > 0
 								? (this.filteredOptions as FSelectArray)?.map(
-										(option, index) =>
+										option =>
 											html`<f-div
 												class="f-select-options-clickable"
 												padding="medium"
@@ -330,15 +331,15 @@ export default function render(this: FSelect) {
 												height="hug-content"
 												width="fill-container"
 												direction="row"
-												?clickable=${true}
 												align="middle-left"
 												gap="small"
-												.selected=${this.isSelected(option) || this.currentCursor === index
-													? "background"
-													: undefined}
+												.selected=${this.isSelected(option) ? "background" : undefined}
 												@click=${(e: MouseEvent) => {
 													this.handleOptionSelection(option, e);
 												}}
+												@mouseover=${(e: MouseEvent) => {
+													this.handleOptionMouseOver(e);
+												}}
 												.disabled=${typeof option === "object" && option.disabled}
 											>
 												${this.checkbox
@@ -391,7 +392,7 @@ export default function render(this: FSelect) {
 							  Object.keys(this.filteredOptions)?.every(
 									groupName => (this.filteredOptions as FSelectOptionsGroup)[groupName].length > 0
 							  )
-							? Object.keys(this.filteredOptions)?.map((group, groupIndex) =>
+							? Object.keys(this.filteredOptions)?.map(group =>
 									(this.filteredOptions as FSelectOptionsGroup)[group].length > 0
 										? html`<f-div
 				padding="none"
@@ -408,6 +409,7 @@ export default function render(this: FSelect) {
 				  height="hug-content"
 				  width="fill-container"
 				  align="middle-left"
+				  gap="small"
 				  direction="row"
 				  ?clickable=${true}
 				  .selected=${this.getCheckedValue(group) === "checked" ? "background" : undefined}
@@ -428,7 +430,7 @@ export default function render(this: FSelect) {
 							>
 				  </f-div>
 				  ${(this.filteredOptions as FSelectOptionsGroup)[group].map(
-						(option, optionIndex) =>
+						option =>
 							html`
 								<f-div
 									class="f-select-options-clickable"
@@ -437,17 +439,15 @@ export default function render(this: FSelect) {
 									height="hug-content"
 									width="fill-container"
 									direction="row"
-									?clickable=${true}
 									align="middle-left"
 									gap="small"
-									.selected=${this.isGroupSelection(option, group) ||
-									(this.currentGroupOptionCursor === optionIndex &&
-										this.currentGroupCursor === groupIndex)
-										? "background"
-										: undefined}
+									.selected=${this.isGroupSelection(option, group) ? "background" : undefined}
 									@click=${(e: MouseEvent) => {
 										this.handleSelectionGroup(option, group, e);
 									}}
+									@mouseover=${(e: MouseEvent) => {
+										this.handleOptionMouseOver(e);
+									}}
 									.disabled=${typeof option === "object" && option.disabled}
 								>
 									${this.checkbox
diff --git a/packages/flow-table/custom-elements.json b/packages/flow-table/custom-elements.json
index 501a153cc..d80d7b2a3 100644
--- a/packages/flow-table/custom-elements.json
+++ b/packages/flow-table/custom-elements.json
@@ -72,210 +72,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-table-schema/f-table-schema.ts",
@@ -759,114 +555,252 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-tcell/f-tcell.ts",
+      "path": "src/components/f-trow/f-trow.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FTcell",
+          "name": "FTrow",
           "members": [
             {
               "kind": "field",
-              "name": "actions",
+              "name": "state",
               "type": {
-                "text": "FTcellActions | undefined"
+                "text": "FTrowState | undefined"
               },
-              "attribute": "actions"
+              "default": "\"default\"",
+              "attribute": "state",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "open",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false",
-              "attribute": "selected",
+              "attribute": "open",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "width",
+              "name": "selected",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean | undefined"
               },
-              "attribute": "width",
+              "attribute": "selected",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "selectable",
+              "name": "expandIconPosition",
               "type": {
-                "text": "FTableSelectable | undefined"
+                "text": "FTrowChevronPosition | undefined"
               },
-              "default": "\"none\""
+              "default": "\"right\"",
+              "attribute": "expand-icon-position",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "isDisabled",
+              "name": "disableSelection",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "default": "false"
+              "attribute": "disable-selection",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "expandIcon",
+              "name": "expndablePanel",
               "type": {
-                "text": "boolean"
-              },
-              "default": "false"
+                "text": "FTcell | undefined"
+              }
             },
             {
               "kind": "field",
-              "name": "expandIconPosition",
+              "name": "detailsSlotElement",
               "type": {
-                "text": "FTrowChevronPosition"
-              },
-              "default": "\"right\""
+                "text": "HTMLSlotElement"
+              }
+            },
+            {
+              "kind": "method",
+              "name": "propogateProps",
+              "description": "propogate props related to chevron and checkbox and radio boxes"
+            },
+            {
+              "kind": "method",
+              "name": "toggleDetails",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleInput",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "handleDetailsSlot"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "state",
+              "type": {
+                "text": "FTrowState | undefined"
+              },
+              "default": "\"default\"",
+              "fieldName": "state"
+            },
+            {
+              "name": "open",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "open"
+            },
+            {
+              "name": "selected",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "selected"
+            },
+            {
+              "name": "expand-icon-position",
+              "type": {
+                "text": "FTrowChevronPosition | undefined"
+              },
+              "default": "\"right\"",
+              "fieldName": "expandIconPosition"
+            },
+            {
+              "name": "disable-selection",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "disableSelection"
+            }
+          ],
+          "superclass": {
+            "name": "FRoot",
+            "package": "@cldcvr/flow-core"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FTrow",
+          "declaration": {
+            "name": "FTrow",
+            "module": "src/components/f-trow/f-trow.ts"
+          }
+        }
+      ]
+    },
+    {
+      "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": "checkbox",
+              "name": "size",
               "type": {
-                "text": "FCheckbox | undefined"
-              }
+                "text": "FTableSize | undefined"
+              },
+              "default": "\"medium\"",
+              "attribute": "size",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "radio",
+              "name": "selectable",
               "type": {
-                "text": "FRadio | undefined"
-              }
+                "text": "FTableSelectable | undefined"
+              },
+              "default": "\"none\"",
+              "attribute": "selectable",
+              "reflects": true
             },
             {
               "kind": "field",
-              "name": "chevron",
+              "name": "highlightSelected",
               "type": {
-                "text": "FIconButton | undefined"
-              }
+                "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": "renderActions"
+              "name": "propogateProps"
             },
             {
               "kind": "method",
-              "name": "setSelection",
+              "name": "updateGridTemplateColumns"
+            },
+            {
+              "kind": "method",
+              "name": "applySelectable",
+              "description": "apply checkbox or radio based on selection property"
+            },
+            {
+              "kind": "method",
+              "name": "handleHeaderRowSelection",
               "parameters": [
                 {
-                  "name": "value",
-                  "default": "false"
-                },
-                {
-                  "name": "isDisabled",
-                  "default": "false"
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
+                  }
                 }
-              ]
+              ],
+              "description": "if checkbox from header got clicked"
             },
             {
               "kind": "method",
-              "name": "handleSelection",
+              "name": "handleRowSelection",
               "parameters": [
                 {
                   "name": "event",
@@ -874,24 +808,51 @@
                     "text": "CustomEvent"
                   }
                 }
-              ]
+              ],
+              "description": "if checkbox or radio clicked in row"
             },
             {
               "kind": "method",
-              "name": "toggleDetails"
+              "name": "dispatchSelectedRowEvent"
             },
             {
               "kind": "method",
-              "name": "toggleColumnSelection"
+              "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": "type",
+                  "name": "event",
                   "type": {
-                    "text": "\"add\" | \"remove\""
+                    "text": "CustomEvent"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "toggleColumnSelected",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent"
                   }
                 }
               ]
@@ -899,26 +860,44 @@
           ],
           "attributes": [
             {
-              "name": "actions",
+              "name": "variant",
               "type": {
-                "text": "FTcellActions | undefined"
+                "text": "FTableVariant | undefined"
               },
-              "fieldName": "actions"
+              "default": "\"stripped\"",
+              "fieldName": "variant"
             },
             {
-              "name": "selected",
+              "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": "selected"
+              "fieldName": "highlightSelected"
             },
             {
-              "name": "width",
+              "name": "highlight-hover",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "fieldName": "width"
+              "default": "false",
+              "fieldName": "highlightHover"
             }
           ],
           "superclass": {
@@ -930,104 +909,124 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FTcell",
+          "name": "FTable",
           "declaration": {
-            "name": "FTcell",
-            "module": "src/components/f-tcell/f-tcell.ts"
+            "name": "FTable",
+            "module": "src/components/f-table/f-table.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/components/f-trow/f-trow.ts",
+      "path": "src/components/f-tcell/f-tcell.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "FTrow",
+          "name": "FTcell",
           "members": [
             {
               "kind": "field",
-              "name": "state",
+              "name": "actions",
               "type": {
-                "text": "FTrowState | undefined"
+                "text": "FTcellActions | undefined"
               },
-              "default": "\"default\"",
-              "attribute": "state",
-              "reflects": true
+              "attribute": "actions"
             },
             {
               "kind": "field",
-              "name": "open",
+              "name": "selected",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "attribute": "open",
+              "default": "false",
+              "attribute": "selected",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "selected",
+              "name": "width",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "attribute": "selected",
+              "attribute": "width",
               "reflects": true
             },
             {
               "kind": "field",
-              "name": "expandIconPosition",
+              "name": "selectable",
               "type": {
-                "text": "FTrowChevronPosition | undefined"
+                "text": "FTableSelectable | undefined"
               },
-              "default": "\"right\"",
-              "attribute": "expand-icon-position",
-              "reflects": true
+              "default": "\"none\""
             },
             {
               "kind": "field",
-              "name": "disableSelection",
+              "name": "isDisabled",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
-              "attribute": "disable-selection",
-              "reflects": true
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "expndablePanel",
+              "name": "expandIcon",
               "type": {
-                "text": "FTcell | undefined"
+                "text": "boolean"
+              },
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "expandIconPosition",
+              "type": {
+                "text": "FTrowChevronPosition"
+              },
+              "default": "\"right\""
+            },
+            {
+              "kind": "field",
+              "name": "checkbox",
+              "type": {
+                "text": "FCheckbox | undefined"
               }
             },
             {
               "kind": "field",
-              "name": "detailsSlotElement",
+              "name": "radio",
               "type": {
-                "text": "HTMLSlotElement"
+                "text": "FRadio | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "chevron",
+              "type": {
+                "text": "FIconButton | undefined"
               }
             },
             {
               "kind": "method",
-              "name": "propogateProps",
-              "description": "propogate props related to chevron and checkbox and radio boxes"
+              "name": "renderActions"
             },
             {
               "kind": "method",
-              "name": "toggleDetails",
+              "name": "setSelection",
               "parameters": [
                 {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent"
-                  }
+                  "name": "value",
+                  "default": "false"
+                },
+                {
+                  "name": "isDisabled",
+                  "default": "false"
                 }
               ]
             },
             {
               "kind": "method",
-              "name": "handleInput",
+              "name": "handleSelection",
               "parameters": [
                 {
                   "name": "event",
@@ -1039,46 +1038,47 @@
             },
             {
               "kind": "method",
-              "name": "handleDetailsSlot"
+              "name": "toggleDetails"
+            },
+            {
+              "kind": "method",
+              "name": "toggleColumnSelection"
+            },
+            {
+              "kind": "method",
+              "name": "toggleColumnHighlight",
+              "parameters": [
+                {
+                  "name": "type",
+                  "type": {
+                    "text": "\"add\" | \"remove\""
+                  }
+                }
+              ]
             }
           ],
           "attributes": [
             {
-              "name": "state",
-              "type": {
-                "text": "FTrowState | undefined"
-              },
-              "default": "\"default\"",
-              "fieldName": "state"
-            },
-            {
-              "name": "open",
+              "name": "actions",
               "type": {
-                "text": "boolean | undefined"
+                "text": "FTcellActions | undefined"
               },
-              "fieldName": "open"
+              "fieldName": "actions"
             },
             {
               "name": "selected",
               "type": {
-                "text": "boolean | undefined"
+                "text": "boolean"
               },
+              "default": "false",
               "fieldName": "selected"
             },
             {
-              "name": "expand-icon-position",
-              "type": {
-                "text": "FTrowChevronPosition | undefined"
-              },
-              "default": "\"right\"",
-              "fieldName": "expandIconPosition"
-            },
-            {
-              "name": "disable-selection",
+              "name": "width",
               "type": {
-                "text": "boolean | undefined"
+                "text": "string | undefined"
               },
-              "fieldName": "disableSelection"
+              "fieldName": "width"
             }
           ],
           "superclass": {
@@ -1090,10 +1090,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "FTrow",
+          "name": "FTcell",
           "declaration": {
-            "name": "FTrow",
-            "module": "src/components/f-trow/f-trow.ts"
+            "name": "FTcell",
+            "module": "src/components/f-tcell/f-tcell.ts"
           }
         }
       ]
diff --git a/stories/f-select.stories.mdx b/stories/f-select.stories.mdx
index fd8ef3bad..c995e2d70 100644
--- a/stories/f-select.stories.mdx
+++ b/stories/f-select.stories.mdx
@@ -99,7 +99,7 @@ Select allows users to choose one or multiple options from a list of values.
 			}
 		}}
 		args={{
-			type: "multiple",
+			type: "single",
 			placeholder: "Select Option",
 			variant: "curved",
 			category: "fill",
@@ -124,7 +124,7 @@ Select allows users to choose one or multiple options from a list of values.
 			["icon-left"]: undefined,
 			height: 180,
 			width: "fill-container",
-			searchable: true,
+			searchable: false,
 			disabled: false,
 			loading: false,
 			clear: false,
@@ -512,7 +512,7 @@ Provides the options to select in form of array of string or objects
 			const [options, setOptions] = useState(["option 1", "option 2", "option 3", "option 4"]);
 			const [optionsObjects, setOptionsObjects] = useState([
 				{ icon: "i-home", title: "option 1", qaId: "TestQa" },
-				{ icon: "i-user", title: "option 2" },
+				{ icon: "i-user", title: "option 2", disabled: true },
 				{ icon: "i-setting", title: "option 3" },
 				{ icon: "i-app", title: "option 4" }
 			]);
@@ -1237,10 +1237,10 @@ checkboxes apper in front of every option in menu. By default its <code>false</c
 				]
 			});
 			const handleValue = e => {
-				setValue(e.detail.value);
+				//setValue(e.detail.value);
 			};
 			const handleValueGroup = e => {
-				setValueObjects(e.detail.value);
+				//setValueObjects(e.detail.value);
 			};
 			return html`
 				<f-div width="100%" align="middle-center" padding="large" gap="medium">
@@ -1249,7 +1249,6 @@ checkboxes apper in front of every option in menu. By default its <code>false</c
 							placeholder="Select Option"
 							@input=${handleValue}
 							.options=${options}
-							.value=${value}
 							?searchable=${true}
 							?checkbox=${true}
 							type="multiple"
@@ -1266,7 +1265,6 @@ checkboxes apper in front of every option in menu. By default its <code>false</c
 							placeholder="Select Option"
 							@input=${handleValue}
 							.options=${optionsObjects}
-							.value=${value}
 							?searchable=${true}
 							?checkbox=${true}
 							type="multiple"
@@ -1285,7 +1283,6 @@ checkboxes apper in front of every option in menu. By default its <code>false</c
 							placeholder="Select Option"
 							@input=${handleValueGroup}
 							.options=${groupOptions}
-							.value=${valueObjects}
 							?searchable=${true}
 							?checkbox=${true}
 							type="multiple"
@@ -1304,7 +1301,6 @@ checkboxes apper in front of every option in menu. By default its <code>false</c
 							placeholder="Select Option"
 							@input=${handleValueGroup}
 							.options=${groupOtionsObjects}
-							.value=${valueObjects}
 							?searchable=${true}
 							?checkbox=${true}
 							type="multiple"