@beeq/core 1.12.3 → 1.12.4-beta.2

package/dist/custom-elements.json

@@ -2110,6 +2110,149 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-breadcrumb.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>",
+          "name": "BqBreadcrumb",
+          "cssParts": [
+            {
+              "description": "The `nav` tag that loads the breadcrumb items",
+              "name": "navigation"
+            },
+            {
+              "description": "The container that wraps the separator element",
+              "name": "separator"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.",
+              "name": ""
+            },
+            {
+              "description": "The slot to add a separator between breadcrumb items. Default separator is `/`.",
+              "name": "separator"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "navElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "spanElem",
+              "type": {
+                "text": "HTMLElement"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqBreadcrumbElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Breadcrumbs'",
+              "description": "The `aria-label` attribute to describe the type of navigation"
+            },
+            {
+              "kind": "field",
+              "name": "handleSlotChange",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "getSeparatorElem",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "separatorFromSlot",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "breadcrumbItems",
+              "type": {
+                "text": "HTMLBqBreadcrumbItemElement[]"
+              },
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "The `aria-label` attribute to describe the type of navigation",
+              "name": "label"
+            },
+            {
+              "name": "label",
+              "fieldName": "label",
+              "default": "'Breadcrumbs'",
+              "description": "The `aria-label` attribute to describe the type of navigation",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "tagName": "bq-breadcrumb",
+          "csspart": [
+            {
+              "name": "navigation",
+              "description": "The `nav` tag that loads the breadcrumb items"
+            },
+            {
+              "name": "separator",
+              "description": "The container that wraps the separator element"
+            }
+          ],
+          "events": [],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqBreadcrumb",
+          "declaration": {
+            "name": "BqBreadcrumb",
+            "module": "components/bq-breadcrumb.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-breadcrumb",
+          "declaration": {
+            "name": "BqBreadcrumb",
+            "module": "components/bq-breadcrumb.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bq-breadcrumb-item.js",
@@ -3040,89 +3183,89 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-breadcrumb.js",
+      "path": "components/bq-card.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb label=\"Breadcrumb\">\n<bq-breadcrumb-item>Home</bq-breadcrumb-item>\n<bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n<bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n<bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n</bq-breadcrumb>\n```\n\n</figure>",
-          "name": "BqBreadcrumb",
-          "cssParts": [
+          "description": "The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\nIts structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-card type=\"default\" border=\"m\">\n<div class=\"p-m\">\n<h3 class=\"text-xl font-bold\">Card Title</h3>\n<p class=\"text-m\">Card content goes here</p>\n</div>\n</bq-card>\n```\n\n</figure>",
+          "name": "BqCard",
+          "cssProperties": [
             {
-              "description": "The `nav` tag that loads the breadcrumb items",
-              "name": "navigation"
+              "description": "Card border color",
+              "name": "--bq-card--borderColor"
             },
             {
-              "description": "The container that wraps the separator element",
-              "name": "separator"
+              "description": "Card border radius",
+              "name": "--bq-card--borderRadius"
+            },
+            {
+              "description": "Card border style",
+              "name": "--bq-card--borderStyle"
+            },
+            {
+              "description": "Card border width",
+              "name": "--bq-card--borderWidth"
+            },
+            {
+              "description": "Card padding",
+              "name": "--bq-card--padding"
+            },
+            {
+              "description": "Minimal card padding",
+              "name": "--bq-card--paddingMinimal"
+            },
+            {
+              "description": "Card background color",
+              "name": "--bq-card--background"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
+              "name": "wrapper"
             }
           ],
           "slots": [
             {
-              "description": "The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.",
+              "description": "The content of the card component",
               "name": ""
-            },
-            {
-              "description": "The slot to add a separator between breadcrumb items. Default separator is `/`.",
-              "name": "separator"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "navElem",
+              "name": "el",
               "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
+                "text": "HTMLBqCardElement"
+              }
             },
             {
               "kind": "field",
-              "name": "spanElem",
+              "name": "type",
               "type": {
-                "text": "HTMLElement"
+                "text": "TCardType"
               },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqBreadcrumbElement"
+              "default": "'default'",
+              "description": "Type of card component",
+              "parsedType": {
+                "text": "'default' | 'minimal'"
               }
             },
             {
               "kind": "field",
-              "name": "label",
+              "name": "border",
               "type": {
-                "text": "string"
+                "text": "TCardBorderRadius"
               },
-              "default": "'Breadcrumbs'",
-              "description": "The `aria-label` attribute to describe the type of navigation"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "getSeparatorElem",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "separatorFromSlot",
-              "privacy": "private",
-              "readonly": true
+              "default": "'m'",
+              "description": "The corner radius of the card component",
+              "parsedType": {
+                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
+              }
             },
             {
-              "kind": "field",
-              "name": "breadcrumbItems",
-              "type": {
-                "text": "HTMLBqBreadcrumbItemElement[]"
-              },
-              "privacy": "private",
-              "readonly": true
+              "kind": "method",
+              "name": "checkPropValue"
             },
             {
               "kind": "method",
@@ -3132,153 +3275,10 @@
           "attributes": [
             {
               "type": {
-                "text": "string"
+                "text": "\"default\" | \"minimal\""
               },
-              "description": "The `aria-label` attribute to describe the type of navigation",
-              "name": "label"
-            },
-            {
-              "name": "label",
-              "fieldName": "label",
-              "default": "'Breadcrumbs'",
-              "description": "The `aria-label` attribute to describe the type of navigation",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "tagName": "bq-breadcrumb",
-          "csspart": [
-            {
-              "name": "navigation",
-              "description": "The `nav` tag that loads the breadcrumb items"
-            },
-            {
-              "name": "separator",
-              "description": "The container that wraps the separator element"
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqBreadcrumb",
-          "declaration": {
-            "name": "BqBreadcrumb",
-            "module": "components/bq-breadcrumb.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-breadcrumb",
-          "declaration": {
-            "name": "BqBreadcrumb",
-            "module": "components/bq-breadcrumb.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-card.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\nIts structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-card type=\"default\" border=\"m\">\n<div class=\"p-m\">\n<h3 class=\"text-xl font-bold\">Card Title</h3>\n<p class=\"text-m\">Card content goes here</p>\n</div>\n</bq-card>\n```\n\n</figure>",
-          "name": "BqCard",
-          "cssProperties": [
-            {
-              "description": "Card border color",
-              "name": "--bq-card--borderColor"
-            },
-            {
-              "description": "Card border radius",
-              "name": "--bq-card--borderRadius"
-            },
-            {
-              "description": "Card border style",
-              "name": "--bq-card--borderStyle"
-            },
-            {
-              "description": "Card border width",
-              "name": "--bq-card--borderWidth"
-            },
-            {
-              "description": "Card padding",
-              "name": "--bq-card--padding"
-            },
-            {
-              "description": "Minimal card padding",
-              "name": "--bq-card--paddingMinimal"
-            },
-            {
-              "description": "Card background color",
-              "name": "--bq-card--background"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
-              "name": "wrapper"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The content of the card component",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqCardElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "type",
-              "type": {
-                "text": "TCardType"
-              },
-              "default": "'default'",
-              "description": "Type of card component",
-              "parsedType": {
-                "text": "'default' | 'minimal'"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "border",
-              "type": {
-                "text": "TCardBorderRadius"
-              },
-              "default": "'m'",
-              "description": "The corner radius of the card component",
-              "parsedType": {
-                "text": "'none' | 'xs2' | 'xs' | 's' | 'm' | 'l' | 'full'"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValue"
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "\"default\" | \"minimal\""
-              },
-              "description": "Type of card component",
-              "name": "type"
+              "description": "Type of card component",
+              "name": "type"
             },
             {
               "type": {
@@ -6775,66 +6775,94 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-empty-state.js",
+      "path": "components/bq-dropdown.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>",
-          "name": "BqEmptyState",
-          "cssParts": [
+          "description": "The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\nThey provide an efficient way to save space and present a long list of options in a compact and organized manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dropdown placement=\"bottom-start\">\n<bq-button slot=\"trigger\">Dropdown</bq-button>\n<bq-option-list>\n<bq-option value=\"users\">...</bq-option>\n<bq-option value=\"user\">...</bq-option>\n<bq-option value=\"dashboard\">...</bq-option>\n<bq-option value=\"settings\">...</bq-option>\n<bq-option value=\"logout\">...</bq-option>\n</bq-option-list>\n</bq-dropdown>\n```\n\n</figure>",
+          "name": "BqDropdown",
+          "cssProperties": [
             {
-              "description": "The container `<div>` that wraps the alert description content",
-              "name": "body"
+              "description": "Panel background color",
+              "name": "--bq-panel--background"
             },
             {
-              "description": "The container `<div>` that wraps the alert footer content",
-              "name": "footer"
+              "description": "Panel border color",
+              "name": "--bq-panel--border-color"
             },
             {
-              "description": "The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)",
-              "name": "icon"
+              "description": "Panel border radius",
+              "name": "--bq-panel--border-radius"
             },
             {
-              "description": "The container `<div>` that wraps the thumbnail element",
-              "name": "thumbnail"
+              "description": "Panel border style",
+              "name": "--bq-panel--border-style"
             },
             {
-              "description": "The container `<div>` that wraps the empty state title content",
-              "name": "title"
+              "description": "Panel border width",
+              "name": "--bq-panel--border-width"
             },
             {
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
-              "name": "wrapper"
+              "description": "Panel box shadow",
+              "name": "--bq-panel--box-shadow"
+            },
+            {
+              "description": "Panel padding",
+              "name": "--bq-panel--padding"
+            },
+            {
+              "description": "Panel height",
+              "name": "--bq-panel--height"
+            },
+            {
+              "description": "Panel width",
+              "name": "--bq-panel--width"
+            },
+            {
+              "description": "Panel z-index applied when opened",
+              "name": "--bq-panel-z-index"
             }
           ],
-          "slots": [
+          "cssParts": [
             {
-              "description": "The element that wraps the thumbnail element",
-              "name": "thumbnail"
+              "description": "The component's internal wrapper.",
+              "name": "base"
             },
             {
-              "description": "The content to be displayed after the thumbnail section",
-              "name": "body"
+              "description": "The `<bq-panel>` element used under the hood to display the dropdown panel.",
+              "name": "dropdown"
             },
             {
-              "description": "The content to be displayed after the body section as footer",
-              "name": "footer"
+              "description": "The `<div>` element used to display and style the panel inside the `<bq-panel>` element.",
+              "name": "panel"
+            },
+            {
+              "description": "The `<div>` element that hosts the trigger element.",
+              "name": "trigger"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The trigger element that opens the dropdown panel.",
+              "name": "trigger"
+            },
+            {
+              "description": "The content of the dropdown panel.",
+              "name": ""
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "bodyElem",
-              "type": {
-                "text": "HTMLDivElement"
-              },
-              "privacy": "private"
+              "name": "dropdownPanelId",
+              "privacy": "private",
+              "default": "`bq-dropdown-panel-${++id}`"
             },
             {
               "kind": "field",
-              "name": "footerElem",
+              "name": "triggerElem",
               "type": {
-                "text": "HTMLDivElement"
+                "text": "HTMLElement"
               },
               "privacy": "private"
             },
@@ -6842,262 +6870,32 @@
               "kind": "field",
               "name": "el",
               "type": {
-                "text": "HTMLBqEmptyStateElement"
+                "text": "HTMLBqDropdownElement"
               }
             },
             {
               "kind": "field",
-              "name": "hasBody",
+              "name": "disableScrollLock",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "If true, the dropdown panel will not lock the page body scroll when open."
             },
             {
               "kind": "field",
-              "name": "hasFooter",
+              "name": "disabled",
               "type": {
-                "text": "boolean"
+                "text": "boolean | undefined"
               },
-              "privacy": "private",
-              "default": "false"
+              "default": "false",
+              "description": "If true, the dropdown panel will be visible and won't be shown."
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "distance",
               "type": {
-                "text": "TEmptyStateSize"
-              },
-              "default": "'medium'",
-              "description": "The size of the empty state component",
-              "parsedType": {
-                "text": "'small' | 'medium' | 'large'"
-              }
-            },
-            {
-              "kind": "method",
-              "name": "checkPropValues"
-            },
-            {
-              "kind": "field",
-              "name": "handleSlotChange",
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "iconSize",
-              "type": {
-                "text": "number"
-              },
-              "privacy": "private",
-              "readonly": true
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "\"large\" | \"medium\" | \"small\""
-              },
-              "description": "The size of the empty state component",
-              "name": "size"
-            },
-            {
-              "name": "size",
-              "fieldName": "size",
-              "default": "'medium'",
-              "description": "The size of the empty state component",
-              "type": {
-                "text": "TEmptyStateSize"
-              },
-              "parsedType": {
-                "text": "'small' | 'medium' | 'large'"
-              }
-            }
-          ],
-          "tagName": "bq-empty-state",
-          "dependencies": [
-            {
-              "name": "bq-icon",
-              "description": ""
-            }
-          ],
-          "csspart": [
-            {
-              "name": "body",
-              "description": "The container `<div>` that wraps the alert description content"
-            },
-            {
-              "name": "footer",
-              "description": "The container `<div>` that wraps the alert footer content"
-            },
-            {
-              "name": "icon",
-              "description": "The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)"
-            },
-            {
-              "name": "thumbnail",
-              "description": "The container `<div>` that wraps the thumbnail element"
-            },
-            {
-              "name": "title",
-              "description": "The container `<div>` that wraps the empty state title content"
-            },
-            {
-              "name": "wrapper",
-              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
-            }
-          ],
-          "events": [],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqEmptyState",
-          "declaration": {
-            "name": "BqEmptyState",
-            "module": "components/bq-empty-state.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-empty-state",
-          "declaration": {
-            "name": "BqEmptyState",
-            "module": "components/bq-empty-state.js"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-dropdown.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\nThey provide an efficient way to save space and present a long list of options in a compact and organized manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dropdown placement=\"bottom-start\">\n<bq-button slot=\"trigger\">Dropdown</bq-button>\n<bq-option-list>\n<bq-option value=\"users\">...</bq-option>\n<bq-option value=\"user\">...</bq-option>\n<bq-option value=\"dashboard\">...</bq-option>\n<bq-option value=\"settings\">...</bq-option>\n<bq-option value=\"logout\">...</bq-option>\n</bq-option-list>\n</bq-dropdown>\n```\n\n</figure>",
-          "name": "BqDropdown",
-          "cssProperties": [
-            {
-              "description": "Panel background color",
-              "name": "--bq-panel--background"
-            },
-            {
-              "description": "Panel border color",
-              "name": "--bq-panel--border-color"
-            },
-            {
-              "description": "Panel border radius",
-              "name": "--bq-panel--border-radius"
-            },
-            {
-              "description": "Panel border style",
-              "name": "--bq-panel--border-style"
-            },
-            {
-              "description": "Panel border width",
-              "name": "--bq-panel--border-width"
-            },
-            {
-              "description": "Panel box shadow",
-              "name": "--bq-panel--box-shadow"
-            },
-            {
-              "description": "Panel padding",
-              "name": "--bq-panel--padding"
-            },
-            {
-              "description": "Panel height",
-              "name": "--bq-panel--height"
-            },
-            {
-              "description": "Panel width",
-              "name": "--bq-panel--width"
-            },
-            {
-              "description": "Panel z-index applied when opened",
-              "name": "--bq-panel-z-index"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            },
-            {
-              "description": "The `<bq-panel>` element used under the hood to display the dropdown panel.",
-              "name": "dropdown"
-            },
-            {
-              "description": "The `<div>` element used to display and style the panel inside the `<bq-panel>` element.",
-              "name": "panel"
-            },
-            {
-              "description": "The `<div>` element that hosts the trigger element.",
-              "name": "trigger"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The trigger element that opens the dropdown panel.",
-              "name": "trigger"
-            },
-            {
-              "description": "The content of the dropdown panel.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "dropdownPanelId",
-              "privacy": "private",
-              "default": "`bq-dropdown-panel-${++id}`"
-            },
-            {
-              "kind": "field",
-              "name": "triggerElem",
-              "type": {
-                "text": "HTMLElement"
-              },
-              "privacy": "private"
-            },
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqDropdownElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "disableScrollLock",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "If true, the dropdown panel will not lock the page body scroll when open."
-            },
-            {
-              "kind": "field",
-              "name": "disabled",
-              "type": {
-                "text": "boolean | undefined"
-              },
-              "default": "false",
-              "description": "If true, the dropdown panel will be visible and won't be shown."
-            },
-            {
-              "kind": "field",
-              "name": "distance",
-              "type": {
-                "text": "number | undefined"
+                "text": "number | undefined"
               },
               "default": "4",
               "description": "Represents the distance (gutter or margin) between the panel and the trigger element."
@@ -7431,255 +7229,202 @@
     },
     {
       "kind": "javascript-module",
-      "path": "components/bq-icon.js",
+      "path": "components/bq-empty-state.js",
       "declarations": [
         {
           "kind": "class",
-          "description": "The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\nIt is a small graphical element that is used to enhance the user interface and improve user experience.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n```\n\n</figure>",
-          "name": "BqIcon",
-          "cssProperties": [
+          "description": "An Empty State is a UI component displayed when there is no data or content available, often used in dynamic or inactive application states.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-empty-state size=\"medium\">Title</bq-empty-state>\n```\n\n</figure>",
+          "name": "BqEmptyState",
+          "cssParts": [
             {
-              "description": "The stroke color of the SVG.",
-              "name": "--bq-icon--color"
+              "description": "The container `<div>` that wraps the alert description content",
+              "name": "body"
             },
             {
-              "description": "The size of the SVG.",
-              "name": "--bq-icon--size"
+              "description": "The container `<div>` that wraps the alert footer content",
+              "name": "footer"
+            },
+            {
+              "description": "The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)",
+              "name": "icon"
+            },
+            {
+              "description": "The container `<div>` that wraps the thumbnail element",
+              "name": "thumbnail"
+            },
+            {
+              "description": "The container `<div>` that wraps the empty state title content",
+              "name": "title"
+            },
+            {
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM",
+              "name": "wrapper"
             }
           ],
-          "cssParts": [
+          "slots": [
             {
-              "description": "The component's internal wrapper that holds the icon SVG content.",
-              "name": "base"
+              "description": "The element that wraps the thumbnail element",
+              "name": "thumbnail"
             },
             {
-              "description": "The `<svg>` tag element inside the component.",
-              "name": "svg"
+              "description": "The content to be displayed after the thumbnail section",
+              "name": "body"
+            },
+            {
+              "description": "The content to be displayed after the body section as footer",
+              "name": "footer"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "svgContent",
+              "name": "bodyElem",
               "type": {
-                "text": "string"
+                "text": "HTMLDivElement"
               },
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Label for the icon, used for accessibility"
-            },
-            {
-              "kind": "field",
-              "name": "color",
+              "name": "footerElem",
               "type": {
-                "text": "string | undefined"
+                "text": "HTMLDivElement"
               },
-              "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color"
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "name",
+              "name": "el",
               "type": {
-                "text": "string | undefined"
-              },
-              "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/)"
+                "text": "HTMLBqEmptyStateElement"
+              }
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "hasBody",
               "type": {
-                "text": "string | number | undefined"
+                "text": "boolean"
               },
-              "default": "24",
-              "description": "Set the size of the SVG"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "src",
+              "name": "hasFooter",
               "type": {
-                "text": "string | undefined"
+                "text": "boolean"
               },
-              "description": "Set the source of the SVG. If the source is set, the name property will be ignored"
+              "privacy": "private",
+              "default": "false"
             },
             {
               "kind": "field",
-              "name": "weight",
+              "name": "size",
               "type": {
-                "text": "TIconWeight | undefined"
+                "text": "TEmptyStateSize"
               },
-              "default": "undefined",
-              "deprecated": "It set the icon weight/style",
+              "default": "'medium'",
+              "description": "The size of the empty state component",
               "parsedType": {
-                "text": "'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' | undefined"
-              },
-              "description": ""
-            },
-            {
-              "kind": "method",
-              "name": "handlePropsChange"
+                "text": "'small' | 'medium' | 'large'"
+              }
             },
             {
               "kind": "method",
-              "name": "handleWeightChange",
-              "description": "!TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\nWe need to maintain retro-compatibility until the next major release"
-            },
-            {
-              "kind": "field",
-              "name": "setupIconComponent",
-              "privacy": "private"
+              "name": "checkPropValues"
             },
             {
               "kind": "field",
-              "name": "getIconSource",
+              "name": "handleSlotChange",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "loadIcon",
-              "privacy": "private"
+              "name": "iconSize",
+              "type": {
+                "text": "number"
+              },
+              "privacy": "private",
+              "readonly": true
             },
             {
               "kind": "method",
               "name": "render"
             }
           ],
-          "events": [
-            {
-              "description": "Callback handler to be called when the SVG has loaded.",
-              "name": "svgLoaded"
-            },
-            {
-              "name": "svgLoaded",
-              "type": {
-                "text": "EventEmitter"
-              },
-              "description": "Callback handler to be called when the SVG has loaded"
-            }
-          ],
           "attributes": [
             {
               "type": {
-                "text": "string"
-              },
-              "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color.",
-              "name": "color"
-            },
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "Label for the icon, used for accessibility.",
-              "name": "label"
-            },
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/).",
-              "name": "name"
-            },
-            {
-              "type": {
-                "text": "string | number"
+                "text": "\"large\" | \"medium\" | \"small\""
               },
-              "description": "Set the size of the SVG.",
+              "description": "The size of the empty state component",
               "name": "size"
             },
             {
+              "name": "size",
+              "fieldName": "size",
+              "default": "'medium'",
+              "description": "The size of the empty state component",
               "type": {
-                "text": "string"
+                "text": "TEmptyStateSize"
               },
-              "description": "Set the source of the SVG. If the source is set, the name property will be ignored.",
-              "name": "src"
-            },
-            {
-              "name": "label",
-              "fieldName": "label",
-              "description": "Label for the icon, used for accessibility",
-              "type": {
-                "text": "string"
+              "parsedType": {
+                "text": "'small' | 'medium' | 'large'"
               }
-            },
+            }
+          ],
+          "tagName": "bq-empty-state",
+          "dependencies": [
             {
-              "name": "color",
-              "fieldName": "color",
-              "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color",
-              "type": {
-                "text": "string"
-              }
-            },
+              "name": "bq-icon",
+              "description": ""
+            }
+          ],
+          "csspart": [
             {
-              "name": "name",
-              "fieldName": "name",
-              "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/)",
-              "type": {
-                "text": "string"
-              }
+              "name": "body",
+              "description": "The container `<div>` that wraps the alert description content"
             },
             {
-              "name": "size",
-              "fieldName": "size",
-              "default": "24",
-              "description": "Set the size of the SVG",
-              "type": {
-                "text": "string | number"
-              }
+              "name": "footer",
+              "description": "The container `<div>` that wraps the alert footer content"
             },
             {
-              "name": "src",
-              "fieldName": "src",
-              "description": "Set the source of the SVG. If the source is set, the name property will be ignored",
-              "type": {
-                "text": "string"
-              }
+              "name": "icon",
+              "description": "The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)"
             },
             {
-              "name": "weight",
-              "fieldName": "weight",
-              "default": "undefined",
-              "type": {
-                "text": "TIconWeight"
-              },
-              "parsedType": {
-                "text": "'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'"
-              }
-            }
-          ],
-          "tagName": "bq-icon",
-          "csspart": [
+              "name": "thumbnail",
+              "description": "The container `<div>` that wraps the thumbnail element"
+            },
             {
-              "name": "base",
-              "description": "The component's internal wrapper that holds the icon SVG content."
+              "name": "title",
+              "description": "The container `<div>` that wraps the empty state title content"
             },
             {
-              "name": "svg",
-              "description": "The `<svg>` tag element inside the component."
+              "name": "wrapper",
+              "description": "The wrapper container `<div>` of the element inside the shadow DOM"
             }
           ],
+          "events": [],
           "customElement": true
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "BqIcon",
+          "name": "BqEmptyState",
           "declaration": {
-            "name": "BqIcon",
-            "module": "components/bq-icon.js"
+            "name": "BqEmptyState",
+            "module": "components/bq-empty-state.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-icon",
-          "declaration": {
-            "name": "BqIcon",
-            "module": "components/bq-icon.js"
+          "name": "bq-empty-state",
+          "declaration": {
+            "name": "BqEmptyState",
+            "module": "components/bq-empty-state.js"
           }
         }
       ]
@@ -8678,18 +8423,273 @@
       "exports": [
         {
           "kind": "js",
-          "name": "BqInput",
+          "name": "BqInput",
+          "declaration": {
+            "name": "BqInput",
+            "module": "components/bq-input.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-input",
+          "declaration": {
+            "name": "BqInput",
+            "module": "components/bq-input.js"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-icon.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The Icon component is an image that provides a visual representation of an object, action, or concept displayed on the screen.\nIt is a small graphical element that is used to enhance the user interface and improve user experience.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-icon color=\"text--brand\" name=\"bell-ringing\" size=\"24\"></bq-icon>\n```\n\n</figure>",
+          "name": "BqIcon",
+          "cssProperties": [
+            {
+              "description": "The stroke color of the SVG.",
+              "name": "--bq-icon--color"
+            },
+            {
+              "description": "The size of the SVG.",
+              "name": "--bq-icon--size"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper that holds the icon SVG content.",
+              "name": "base"
+            },
+            {
+              "description": "The `<svg>` tag element inside the component.",
+              "name": "svg"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "svgContent",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Label for the icon, used for accessibility"
+            },
+            {
+              "kind": "field",
+              "name": "color",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color"
+            },
+            {
+              "kind": "field",
+              "name": "name",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/)"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "string | number | undefined"
+              },
+              "default": "24",
+              "description": "Set the size of the SVG"
+            },
+            {
+              "kind": "field",
+              "name": "src",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Set the source of the SVG. If the source is set, the name property will be ignored"
+            },
+            {
+              "kind": "field",
+              "name": "weight",
+              "type": {
+                "text": "TIconWeight | undefined"
+              },
+              "default": "undefined",
+              "deprecated": "It set the icon weight/style",
+              "parsedType": {
+                "text": "'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone' | undefined"
+              },
+              "description": ""
+            },
+            {
+              "kind": "method",
+              "name": "handlePropsChange"
+            },
+            {
+              "kind": "method",
+              "name": "handleWeightChange",
+              "description": "!TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\nWe need to maintain retro-compatibility until the next major release"
+            },
+            {
+              "kind": "field",
+              "name": "setupIconComponent",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "getIconSource",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "loadIcon",
+              "privacy": "private"
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "events": [
+            {
+              "description": "Callback handler to be called when the SVG has loaded.",
+              "name": "svgLoaded"
+            },
+            {
+              "name": "svgLoaded",
+              "type": {
+                "text": "EventEmitter"
+              },
+              "description": "Callback handler to be called when the SVG has loaded"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color.",
+              "name": "color"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Label for the icon, used for accessibility.",
+              "name": "label"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/).",
+              "name": "name"
+            },
+            {
+              "type": {
+                "text": "string | number"
+              },
+              "description": "Set the size of the SVG.",
+              "name": "size"
+            },
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Set the source of the SVG. If the source is set, the name property will be ignored.",
+              "name": "src"
+            },
+            {
+              "name": "label",
+              "fieldName": "label",
+              "description": "Label for the icon, used for accessibility",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "color",
+              "fieldName": "color",
+              "description": "Set the stroke color of the SVG. The value should be a valid value of the palette color",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "name",
+              "fieldName": "name",
+              "description": "Icon name to load. Please check all available icons [here](https://phosphoricons.com/)",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "size",
+              "fieldName": "size",
+              "default": "24",
+              "description": "Set the size of the SVG",
+              "type": {
+                "text": "string | number"
+              }
+            },
+            {
+              "name": "src",
+              "fieldName": "src",
+              "description": "Set the source of the SVG. If the source is set, the name property will be ignored",
+              "type": {
+                "text": "string"
+              }
+            },
+            {
+              "name": "weight",
+              "fieldName": "weight",
+              "default": "undefined",
+              "type": {
+                "text": "TIconWeight"
+              },
+              "parsedType": {
+                "text": "'thin' | 'light' | 'regular' | 'bold' | 'fill' | 'duotone'"
+              }
+            }
+          ],
+          "tagName": "bq-icon",
+          "csspart": [
+            {
+              "name": "base",
+              "description": "The component's internal wrapper that holds the icon SVG content."
+            },
+            {
+              "name": "svg",
+              "description": "The `<svg>` tag element inside the component."
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqIcon",
           "declaration": {
-            "name": "BqInput",
-            "module": "components/bq-input.js"
+            "name": "BqIcon",
+            "module": "components/bq-icon.js"
           }
         },
         {
           "kind": "custom-element-definition",
-          "name": "bq-input",
+          "name": "bq-icon",
           "declaration": {
-            "name": "BqInput",
-            "module": "components/bq-input.js"
+            "name": "BqIcon",
+            "module": "components/bq-icon.js"
           }
         }
       ]
@@ -9648,6 +9648,120 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "components/bq-option-list.js",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>",
+          "name": "BqOptionList",
+          "cssProperties": [
+            {
+              "description": "Option group gap between items Y axis",
+              "name": "--bq-option-group--gapY-list"
+            }
+          ],
+          "cssParts": [
+            {
+              "description": "The component's internal wrapper.",
+              "name": "base"
+            }
+          ],
+          "slots": [
+            {
+              "description": "The option items",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "el",
+              "type": {
+                "text": "HTMLBqOptionListElement"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string"
+              },
+              "default": "'Options'",
+              "description": "Aria label for the list."
+            },
+            {
+              "kind": "method",
+              "name": "onBqSelect",
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "CustomEvent<HTMLElement>"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "render"
+            }
+          ],
+          "attributes": [
+            {
+              "type": {
+                "text": "string"
+              },
+              "description": "Aria label for the list.",
+              "name": "aria-label"
+            },
+            {
+              "name": "aria-label",
+              "fieldName": "ariaLabel",
+              "default": "'Options'",
+              "description": "Aria label for the list.",
+              "type": {
+                "text": "string"
+              }
+            }
+          ],
+          "tagName": "bq-option-list",
+          "csspart": {
+            "name": "base",
+            "description": "The component's internal wrapper."
+          },
+          "events": [
+            {
+              "name": "bqSelect",
+              "type": {
+                "text": "EventEmitter<{ value: string; item: HTMLBqOptionElement }>"
+              },
+              "description": "Handler to be called when `bq-option` is selected (on click/enter press)."
+            }
+          ],
+          "customElement": true
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "BqOptionList",
+          "declaration": {
+            "name": "BqOptionList",
+            "module": "components/bq-option-list.js"
+          }
+        },
+        {
+          "kind": "custom-element-definition",
+          "name": "bq-option-list",
+          "declaration": {
+            "name": "BqOptionList",
+            "module": "components/bq-option-list.js"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "components/bq-option-group.js",
@@ -9793,120 +9907,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "components/bq-option-list.js",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "The option list component is a container for multiple option elements.\nIt allows to manage the appearance and size of all options at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option-list>\n<bq-option value=\"football\">Football</bq-option>\n<bq-option value=\"basketball\">Basketball</bq-option>\n<bq-option value=\"tennis\">Tennis</bq-option>\n</bq-option-list>\n```\n\n</figure>",
-          "name": "BqOptionList",
-          "cssProperties": [
-            {
-              "description": "Option group gap between items Y axis",
-              "name": "--bq-option-group--gapY-list"
-            }
-          ],
-          "cssParts": [
-            {
-              "description": "The component's internal wrapper.",
-              "name": "base"
-            }
-          ],
-          "slots": [
-            {
-              "description": "The option items",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "el",
-              "type": {
-                "text": "HTMLBqOptionListElement"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "ariaLabel",
-              "type": {
-                "text": "string"
-              },
-              "default": "'Options'",
-              "description": "Aria label for the list."
-            },
-            {
-              "kind": "method",
-              "name": "onBqSelect",
-              "parameters": [
-                {
-                  "name": "event",
-                  "type": {
-                    "text": "CustomEvent<HTMLElement>"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "render"
-            }
-          ],
-          "attributes": [
-            {
-              "type": {
-                "text": "string"
-              },
-              "description": "Aria label for the list.",
-              "name": "aria-label"
-            },
-            {
-              "name": "aria-label",
-              "fieldName": "ariaLabel",
-              "default": "'Options'",
-              "description": "Aria label for the list.",
-              "type": {
-                "text": "string"
-              }
-            }
-          ],
-          "tagName": "bq-option-list",
-          "csspart": {
-            "name": "base",
-            "description": "The component's internal wrapper."
-          },
-          "events": [
-            {
-              "name": "bqSelect",
-              "type": {
-                "text": "EventEmitter<{ value: string; item: HTMLBqOptionElement }>"
-              },
-              "description": "Handler to be called when `bq-option` is selected (on click/enter press)."
-            }
-          ],
-          "customElement": true
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "BqOptionList",
-          "declaration": {
-            "name": "BqOptionList",
-            "module": "components/bq-option-list.js"
-          }
-        },
-        {
-          "kind": "custom-element-definition",
-          "name": "bq-option-list",
-          "declaration": {
-            "name": "BqOptionList",
-            "module": "components/bq-option-list.js"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "components/bq-page-title.js",
@@ -15367,6 +15367,14 @@
             {
               "description": "The switch label text",
               "name": ""
+            },
+            {
+              "description": "Custom content to be displayed as the `ON` mark inside the control. It will be displayed when the `inner-label` property is set to `icon`",
+              "name": "icon-on"
+            },
+            {
+              "description": "Custom content to be displayed as the `OFF` mark inside the control. It will be displayed when the `inner-label` property is set to `icon`",
+              "name": "icon-off"
             }
           ],
           "members": [
@@ -15386,14 +15394,6 @@
               },
               "privacy": "private"
             },
-            {
-              "kind": "field",
-              "name": "prevCheckedValue",
-              "type": {
-                "text": "boolean"
-              },
-              "privacy": "private"
-            },
             {
               "kind": "field",
               "name": "internals",