@beeq/core 1.8.3 → 1.8.4-beta.0

package/dist/beeq.html-custom-data.json

@@ -2,75 +2,6 @@
   "$schema": "https://raw.githubusercontent.com/microsoft/vscode-html-languageservice/main/docs/customData.schema.json",
   "version": 1.1,
   "tags": [
-    {
-      "name": "bq-accordion",
-      "description": "The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion appearance=\"filled\" size=\"medium\">\n<bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n<h3 slot=\"header\">Header</h3>\n<div>Lorem ipsum dolor...</div>\n</bq-accordion>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqClick** - Handler to be called when the accordion is clicked\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqClick** - Handler to be called when the accordion is clicked\n\n### **Slots:**\n - _default_ - The accordion panel content\n- **collapse** - The accordion collapse icon\n- **expand** - The accordion expand icon\n- **header** - The accordion header content\n- **prefix** - The accordion prefix content (icon or avatar)\n- **suffix** - The accordion suffix content (icon or avatar)\n\n### **CSS Properties:**\n - **--bq-accordion--small-padding-y** - Accordion small vertical padding _(default: undefined)_\n- **--bq-accordion--small-padding-start** - Accordion small start padding _(default: undefined)_\n- **--bq-accordion--small-padding-end** - Accordion small end padding _(default: undefined)_\n- **--bq-accordion--small-padding-gap** - Accordion small gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--small-radius** - Accordion small border radius _(default: undefined)_\n- **--bq-accordion--medium-padding-y** - Accordion medium vertical padding _(default: undefined)_\n- **--bq-accordion--medium-padding-start** - Accordion medium start padding _(default: undefined)_\n- **--bq-accordion--medium-padding-end** - Accordion medium end padding _(default: undefined)_\n- **--bq-accordion--medium-padding-gap** - Accordion medium gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--medium-radius** - Accordion medium border radius _(default: undefined)_\n- **--bq-accordion--collapsed-border-color** - Accordion collapsed border color _(default: undefined)_\n- **--bq-accordion--collapsed-border-style** - Accordion collapsed border style _(default: undefined)_\n- **--bq-accordion--collapsed-border-width** - Accordion collapsed border width _(default: undefined)_\n- **--bq-accordion--expanded-border-color** - Accordion expanded border color _(default: undefined)_\n- **--bq-accordion--expanded-border-style** - Accordion expanded border style _(default: undefined)_\n- **--bq-accordion--expanded-border-width** - Accordion expanded border width _(default: undefined)_\n- **--bq-accordion--filled-collapsed-background** - Accordion filled collapsed header background _(default: undefined)_\n- **--bq-accordion--filled-collapsed-text-color** - Accordion filled collapsed header text color _(default: undefined)_\n- **--bq-accordion--filled-expanded-background** - Accordion filled expanded header background _(default: undefined)_\n- **--bq-accordion--filled-expanded-collapsed-hover** - Accordion filled expanded header color on hover _(default: undefined)_\n- **--bq-accordion--filled-expanded-text-color** - Accordion filled expanded header text color _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-background** - Accordion ghost collapsed header background _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-text-color** - Accordion ghost collapsed header text color _(default: undefined)_\n- **--bq-accordion--ghost-expanded-background** - Accordion ghost expanded header background _(default: undefined)_\n- **--bq-accordion--ghost-expanded-collapsed-hover** - Accordion ghost expanded header color on hover _(default: undefined)_\n- **--bq-accordion--ghost-expanded-text-color** - Accordion ghost expanded header text color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-color** - Accordion filled panel border color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-style** - Accordion filled panel border style _(default: undefined)_\n- **--bq-accordion--panel-filled-border-width** - Accordion filled panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-y** - Accordion small filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-start** - Accordion small filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-end** - Accordion small filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-y** - Accordion medium filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-start** - Accordion medium filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-end** - Accordion medium filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-color** - Accordion ghost panel border color _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-style** - Accordion ghost panel border style _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-width** - Accordion ghost panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-y** - Accordion small ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-start** - Accordion small ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-end** - Accordion small ghost panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-y** - Accordion medium ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-start** - Accordion medium ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-end** - Accordion medium ghost panel end padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<details>` that holds the accordion content\n- **header** - The `<summary>` that holds the accordion header content\n- **panel** - The `<div>` that holds the accordion panel content\n- **prefix** - The `<div>` that holds the accordion prefix content\n- **suffix** - The `<div>` that holds the accordion suffix content\n- **text** - The `<div>` that holds the accordion header text content",
-      "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance style of the Accordion",
-          "values": [{ "name": "filled" }, { "name": "ghost" }]
-        },
-        {
-          "name": "disabled",
-          "description": "If true, the Accordion is disabled",
-          "values": []
-        },
-        {
-          "name": "expanded",
-          "description": "If true, the Accordion is expanded",
-          "values": []
-        },
-        {
-          "name": "no-animation",
-          "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the Accordion animation, will be disabled. No animation will be applied.",
-          "values": []
-        },
-        {
-          "name": "rotate",
-          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the the Accordion",
-          "values": [{ "name": "small" }, { "name": "medium" }]
-        }
-      ],
-      "references": []
-    },
-    {
-      "name": "bq-accordion-group",
-      "description": "The accordion group component is a container for multiple accordion elements.\nIt allows to manage the appearance and size of all accordions at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion-group appearance=\"filled\" size=\"medium\">\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n</bq-accordion-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot where the bq-accordion elements are placed.\n\n### **CSS Properties:**\n - **--bq-accordion-group--gap** - Accordion group distance between elements _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
-      "attributes": [
-        {
-          "name": "appearance",
-          "description": "The appearance style of accordion to be applied to all accordions",
-          "values": [{ "name": "filled" }, { "name": "ghost" }]
-        },
-        {
-          "name": "expandAll",
-          "description": "If true all accordions are expanded",
-          "values": []
-        },
-        {
-          "name": "no-animation",
-          "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.",
-          "values": []
-        },
-        {
-          "name": "multiple",
-          "description": "If true multiple accordions can be expanded at the same time",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of accordion to be applied to all accordions",
-          "values": [{ "name": "small" }, { "name": "medium" }]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-alert",
       "description": "The Alert is a user interface component used to convey important information to the user in a clear and concise manner.\nIt can be used to notify users of success, failure, warning, or any other type of information that needs to be brought to their attention.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-alert>\n<bq-icon name=\"star\" slot=\"icon\"></bq-icon>\nTitle\n<span slot=\"body\">\nDescription\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-alert>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqHide** - Callback handler to be called when the alert is hidden\n- **bqShow** - Callback handler to be called when the alert is shown\n- **bqAfterShow** - Callback handler to be called after the alert has been shown\n- **bqAfterHide** - Callback handler to be called after the alert has been hidden\n- **bqHide** - Callback handler to be called when the alert is hidden\n- **bqShow** - Callback handler to be called when the alert is shown\n- **bqAfterShow** - Callback handler to be called after the alert has been shown\n- **bqAfterHide** - Callback handler to be called after the alert has been hidden\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the alert component\n- **show(): _Promise<void>_** - Method to be called to show the alert component\n\n### **Slots:**\n - _default_ - The alert title content (no slot name required)\n- **body** - The alert description content\n- **footer** - The alert footer content\n- **icon** - The predefined icon based on the alert type (info, success, warning, error, default)\n- **btn-close** - The close button of the alert\n\n### **CSS Properties:**\n - **--bq-alert--background** - The alert background color _(default: undefined)_\n- **--bq-alert--border-radius** - The alert border radius _(default: undefined)_\n- **--bq-alert--content-footer-gap** - The alert content and footer gap _(default: undefined)_\n- **--bq-alert--title-body-gap** - The alert title and body gap _(default: undefined)_\n- **--bq-alert--border-color** - The alert border color _(default: undefined)_\n- **--bq-alert--border-style** - The alert border style _(default: undefined)_\n- **--bq-alert--border-width** - The alert border width _(default: undefined)_\n- **--bq-alert--background-info** - The alert background color for info type _(default: undefined)_\n- **--bq-alert--background-success** - The alert background color for success type _(default: undefined)_\n- **--bq-alert--background-warning** - The alert background color for warning type _(default: undefined)_\n- **--bq-alert--background-error** - The alert background color for error type _(default: undefined)_\n- **--bq-alert--border-info** - The alert border color for info type _(default: undefined)_\n- **--bq-alert--border-success** - The alert border color for success type _(default: undefined)_\n- **--bq-alert--border-warning** - The alert border color for warning type _(default: undefined)_\n- **--bq-alert--border-error** - The alert border color for error type _(default: undefined)_\n- **--bq-alert--icon-color-info** - The alert icon color for info type _(default: undefined)_\n- **--bq-alert--icon-color-success** - The alert icon color for success type _(default: undefined)_\n- **--bq-alert--icon-color-warning** - The alert icon color for warning type _(default: undefined)_\n- **--bq-alert--icon-color-error** - The alert icon color for error type _(default: undefined)_\n- **--bq-alert--padding** - The alert padding _(default: undefined)_\n- **--bq-alert--min-width** - The alert min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component\n- **body** - The container `<div>` that wraps the alert description content\n- **btn-close** - The `bq-button` used to close the alert\n- **content** - The container `<div>` that wraps all the alert content (title, description, footer)\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the alert type (info, success, warning, error, default)\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the alert main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component\n- **title** - The container `<div>` that wraps the alert title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
@@ -132,6 +63,38 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-accordion-group",
+      "description": "The accordion group component is a container for multiple accordion elements.\nIt allows to manage the appearance and size of all accordions at once.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion-group appearance=\"filled\" size=\"medium\">\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n<bq-accordion> ... </bq-accordion>\n</bq-accordion-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot where the bq-accordion elements are placed.\n\n### **CSS Properties:**\n - **--bq-accordion-group--gap** - Accordion group distance between elements _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.",
+      "attributes": [
+        {
+          "name": "appearance",
+          "description": "The appearance style of accordion to be applied to all accordions",
+          "values": [{ "name": "filled" }, { "name": "ghost" }]
+        },
+        {
+          "name": "expandAll",
+          "description": "If true all accordions are expanded",
+          "values": []
+        },
+        {
+          "name": "no-animation",
+          "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the accordion animation, will be disabled. No animation will be applied.",
+          "values": []
+        },
+        {
+          "name": "multiple",
+          "description": "If true multiple accordions can be expanded at the same time",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of accordion to be applied to all accordions",
+          "values": [{ "name": "small" }, { "name": "medium" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-avatar",
       "description": "The Avatar component is a simple and customizable element that displays an image or initials in a circular or square shape.\nThis component is useful for displaying user profile pictures or any other image that represents a person or an entity.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-avatar\nalt-text=\"John Doe profile picture\"\nimage=\"/image/url/photo-1524593689594.jpeg\"\nlabel=\"John Doe profile picture\"\nshape=\"circle\"\nsize=\"medium\"\n>\n<bq-badge slot=\"badge\" text-color=\"#fff\">9</bq-badge>\n</bq-avatar>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **badge** - The badge slot is used to add a badge to the avatar. The badge is a small circle or square that can be used to display a number or a status.\n\n### **CSS Properties:**\n - **--bq-avatar--background** - Avatar background color _(default: undefined)_\n- **--bq-avatar--border-color** - Avatar border color _(default: undefined)_\n- **--bq-avatar--border-style** - Avatar border style _(default: undefined)_\n- **--bq-avatar--border-width** - Avatar border width _(default: undefined)_\n- **--bq-avatar--border-radius-circle** - Avatar border radius for circle & any size _(default: undefined)_\n- **--bq-avatar--border-radius-squareXs** - Avatar border radius for square & size xsmall _(default: undefined)_\n- **--bq-avatar--border-radius-squareS** - Avatar border radius for square & size small _(default: undefined)_\n- **--bq-avatar--border-radius-squareM** - Avatar border radius for square & size medium/large _(default: undefined)_\n- **--bq-avatar--size-xsmall** - Avatar xsmall size _(default: undefined)_\n- **--bq-avatar--size-small** - Avatar small size _(default: undefined)_\n- **--bq-avatar--size-medium** - Avatar medium size _(default: undefined)_\n- **--bq-avatar--size-large** - Avatar large size _(default: undefined)_\n- **--bq-avatar--badge-top-square** - Badge top position shape square _(default: undefined)_\n- **--bq-avatar--badge-left-square** - Badge left position shape square _(default: undefined)_\n- **--bq-avatar--badge-top-circle** - Badge top position shape circle _(default: undefined)_\n- **--bq-avatar--badge-left-circle** - Badge left position shape circle _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **img** - The `<image>` tag element that load the image source.\n- **text** - The `<span>` tag element that rendered the `Initials` text string.\n- **badge** - The container that wraps the badge slot element.",
@@ -174,6 +137,43 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-accordion",
+      "description": "The Accordion is a UI component that allows users to toggle between showing and hiding content sections. It provides a collapsible functionality, where only one section can be expanded at a time, while the others remain collapsed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-accordion appearance=\"filled\" size=\"medium\">\n<bq-avatar size=\"xsmall\" image=\"/image/url/img.png\" slot=\"prefix\"></bq-avatar>\n<h3 slot=\"header\">Header</h3>\n<div>Lorem ipsum dolor...</div>\n</bq-accordion>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqClick** - Handler to be called when the accordion is clicked\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqBlur** - Handler to be called when the accordion loses focus\n- **bqFocus** - Handler to be called when the accordion gets focus\n- **bqOpen** - Handler to be called when the accordion is opened\n- **bqAfterOpen** - Handler to be called after the accordion is opened\n- **bqClose** - Handler to be called when the accordion is closed\n- **bqAfterClose** - Handler to be called after the accordion is closed\n- **bqClick** - Handler to be called when the accordion is clicked\n\n### **Slots:**\n - _default_ - The accordion panel content\n- **collapse** - The accordion collapse icon\n- **expand** - The accordion expand icon\n- **header** - The accordion header content\n- **prefix** - The accordion prefix content (icon or avatar)\n- **suffix** - The accordion suffix content (icon or avatar)\n\n### **CSS Properties:**\n - **--bq-accordion--small-padding-y** - Accordion small vertical padding _(default: undefined)_\n- **--bq-accordion--small-padding-start** - Accordion small start padding _(default: undefined)_\n- **--bq-accordion--small-padding-end** - Accordion small end padding _(default: undefined)_\n- **--bq-accordion--small-padding-gap** - Accordion small gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--small-radius** - Accordion small border radius _(default: undefined)_\n- **--bq-accordion--medium-padding-y** - Accordion medium vertical padding _(default: undefined)_\n- **--bq-accordion--medium-padding-start** - Accordion medium start padding _(default: undefined)_\n- **--bq-accordion--medium-padding-end** - Accordion medium end padding _(default: undefined)_\n- **--bq-accordion--medium-padding-gap** - Accordion medium gap distance between suffix, title and prefix _(default: undefined)_\n- **--bq-accordion--medium-radius** - Accordion medium border radius _(default: undefined)_\n- **--bq-accordion--collapsed-border-color** - Accordion collapsed border color _(default: undefined)_\n- **--bq-accordion--collapsed-border-style** - Accordion collapsed border style _(default: undefined)_\n- **--bq-accordion--collapsed-border-width** - Accordion collapsed border width _(default: undefined)_\n- **--bq-accordion--expanded-border-color** - Accordion expanded border color _(default: undefined)_\n- **--bq-accordion--expanded-border-style** - Accordion expanded border style _(default: undefined)_\n- **--bq-accordion--expanded-border-width** - Accordion expanded border width _(default: undefined)_\n- **--bq-accordion--filled-collapsed-background** - Accordion filled collapsed header background _(default: undefined)_\n- **--bq-accordion--filled-collapsed-text-color** - Accordion filled collapsed header text color _(default: undefined)_\n- **--bq-accordion--filled-expanded-background** - Accordion filled expanded header background _(default: undefined)_\n- **--bq-accordion--filled-expanded-collapsed-hover** - Accordion filled expanded header color on hover _(default: undefined)_\n- **--bq-accordion--filled-expanded-text-color** - Accordion filled expanded header text color _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-background** - Accordion ghost collapsed header background _(default: undefined)_\n- **--bq-accordion--ghost-collapsed-text-color** - Accordion ghost collapsed header text color _(default: undefined)_\n- **--bq-accordion--ghost-expanded-background** - Accordion ghost expanded header background _(default: undefined)_\n- **--bq-accordion--ghost-expanded-collapsed-hover** - Accordion ghost expanded header color on hover _(default: undefined)_\n- **--bq-accordion--ghost-expanded-text-color** - Accordion ghost expanded header text color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-color** - Accordion filled panel border color _(default: undefined)_\n- **--bq-accordion--panel-filled-border-style** - Accordion filled panel border style _(default: undefined)_\n- **--bq-accordion--panel-filled-border-width** - Accordion filled panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-y** - Accordion small filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-start** - Accordion small filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-filled-padding-end** - Accordion small filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-y** - Accordion medium filled panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-start** - Accordion medium filled panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-filled-padding-end** - Accordion medium filled panel end padding _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-color** - Accordion ghost panel border color _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-style** - Accordion ghost panel border style _(default: undefined)_\n- **--bq-accordion--panel-ghost-border-width** - Accordion ghost panel border width _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-y** - Accordion small ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-start** - Accordion small ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-small-ghost-padding-end** - Accordion small ghost panel end padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-y** - Accordion medium ghost panel vertical padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-start** - Accordion medium ghost panel start padding _(default: undefined)_\n- **--bq-accordion--panel-medium-ghost-padding-end** - Accordion medium ghost panel end padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<details>` that holds the accordion content\n- **header** - The `<summary>` that holds the accordion header content\n- **panel** - The `<div>` that holds the accordion panel content\n- **prefix** - The `<div>` that holds the accordion prefix content\n- **suffix** - The `<div>` that holds the accordion suffix content\n- **text** - The `<div>` that holds the accordion header text content",
+      "attributes": [
+        {
+          "name": "appearance",
+          "description": "The appearance style of the Accordion",
+          "values": [{ "name": "filled" }, { "name": "ghost" }]
+        },
+        {
+          "name": "disabled",
+          "description": "If true, the Accordion is disabled",
+          "values": []
+        },
+        {
+          "name": "expanded",
+          "description": "If true, the Accordion is expanded",
+          "values": []
+        },
+        {
+          "name": "no-animation",
+          "description": "Animation is set through JS when the browser does not support CSS calc-size() If true, the Accordion animation, will be disabled. No animation will be applied.",
+          "values": []
+        },
+        {
+          "name": "rotate",
+          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
+          "values": []
+        },
+        {
+          "name": "size",
+          "description": "The size of the the Accordion",
+          "values": [{ "name": "small" }, { "name": "medium" }]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-badge",
       "description": "The Badge component is a visual indicator that can be added to various elements within a user interface.\nIt is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The default slot is used to add content to the badge. The content can be a number or a text.\n\n### **CSS Properties:**\n - **--bq-badge--background-color** - The badge background color _(default: undefined)_\n- **--bq-badge--box-shadow** - The badge box shadow _(default: undefined)_\n- **--bq-badge--border-color** - The badge border color _(default: undefined)_\n- **--bq-badge--border-radius** - The badge border radius _(default: undefined)_\n- **--bq-badge--border-style** - The badge border style _(default: undefined)_\n- **--bq-badge--border-width** - The badge border width _(default: undefined)_\n- **--bq-badge--size-small** - The badge small size _(default: undefined)_\n- **--bq-badge--size-medium** - The badge medium size _(default: undefined)_\n- **--bq-badge--size-large** - The badge large size _(default: undefined)_\n- **--bq-badge--text-color** - The badge text color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the count.\n- **number** - The component's internal wrapper that holds the slot.",
@@ -576,65 +576,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-dialog",
-      "description": "The Dialog component is used to display additional content or prompt a user for action.\nIt provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dialog footer-appearance=\"standard\" border=\"m\" size=\"medium\">\n<h5 class=\"bold flex items-center gap-s\" slot=\"title\">\n<bq-icon name=\"info\" size=\"30\" color=\"text--accent\" role=\"img\" title=\"Info\"></bq-icon>\nTitle\n</h5>\n<p>\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\nstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a\ntype specimen book.\n</p>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"link\">Button</bq-button>\n<bq-button variant=\"ghost\">Button</bq-button>\n<bq-button variant=\"standard\" slot=\"footer\">Button</bq-button>\n</div>\n</bq-dialog>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed.\n- **bqClose** - Callback handler emitted when the dialog will close.\n- **bqOpen** - Callback handler emitted when the dialog will open.\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening.\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing.\n- **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed\n- **bqClose** - Callback handler emitted when the dialog will close\n- **bqOpen** - Callback handler emitted when the dialog will open\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing\n\n### **Methods:**\n - **show()** - Open the dialog\n- **hide()** - Closes the dialog\n- **cancel()** - Dismiss or cancel the dialog\n\n### **Slots:**\n - **title** - The title content of the dialog.\n- _default_ - The body content of the dialog.\n- **footer** - The footer content of the dialog.\n- **button-close** - The close button content of the dialog.\n\n### **CSS Properties:**\n - **--bq-dialog--background** - Dialog background color _(default: undefined)_\n- **--bq-dialog--background-backdrop** - Dialog backdrop background color _(default: undefined)_\n- **--bq-dialog--box-shadow** - Dialog box shadow _(default: undefined)_\n- **--bq-dialog--border-color** - Dialog border color _(default: undefined)_\n- **--bq-dialog--border-style** - Dialog border style _(default: undefined)_\n- **--bq-dialog--border-width** - Dialog border width _(default: undefined)_\n- **--bq-dialog--border-radius** - Dialog border radius _(default: undefined)_\n- **--bq-dialog--padding** - Dialog padding _(default: undefined)_\n- **--bq-dialog--content-footer-gap** - Dialog gap distance between content and footer elements _(default: undefined)_\n- **--bq-dialog--title-body-gap** - Dialog gap distance between title and body elements _(default: undefined)_\n- **--bq-dialog--width-small** - Dialog small width _(default: undefined)_\n- **--bq-dialog--width-medium** - Dialog medium width _(default: undefined)_\n- **--bq-dialog--width-large** - Dialog large width _(default: undefined)_\n- **--bq-dialog-z-index** - Dialog z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **body** - The `<main>` that holds the dialog body content.\n- **button-close** - The button that closes the dialog on click.\n- **content** - The `<div>` container that holds the dialog title and body content.\n- **dialog** - The `<dialog>` wrapper container inside the shadow DOM.\n- **footer** - The `<footer>` that holds footer content.\n- **header** - The `<header>` that holds the icon, title, description and close button.\n- **title** - The `<div>` that holds the title content.",
-      "attributes": [
-        {
-          "name": "border",
-          "description": "Border radius of the dialog component.",
-          "values": [
-            { "name": "none" },
-            { "name": "xs2" },
-            { "name": "xs" },
-            { "name": "s" },
-            { "name": "m" },
-            { "name": "l" },
-            { "name": "full" }
-          ]
-        },
-        {
-          "name": "disable-backdrop",
-          "description": "If true, the backdrop overlay won't be shown when the dialog opens.",
-          "values": []
-        },
-        {
-          "name": "disable-close-esc-keydown",
-          "description": "If true, the dialog will not close when the [Esc] key is pressed.",
-          "values": []
-        },
-        {
-          "name": "disable-close-click-outside",
-          "description": "If true, the dialog will not close when clicking on the backdrop overlay.",
-          "values": []
-        },
-        {
-          "name": "footer-appearance",
-          "description": "The appearance of the footer.",
-          "values": [{ "name": "standard" }, { "name": "highlight" }]
-        },
-        {
-          "name": "hide-close-button",
-          "description": "If true, it hides the close button.",
-          "values": []
-        },
-        {
-          "name": "open",
-          "description": "If true, the dialog will be shown as open.",
-          "values": []
-        },
-        {
-          "name": "size",
-          "description": "The size of the dialog.",
-          "values": [
-            { "name": "small" },
-            { "name": "medium" },
-            { "name": "large" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-divider",
       "description": "The Divider component is used to visually separate content in a layout.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-divider orientation=\"horizontal\" stroke-color=\"stroke--primary\" title-alignment=\"middle\">\n<span slot=\"title\">Divider Title</span>\n</bq-divider>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - _default_ - The title content of the divider.\n\n### **CSS Properties:**\n - **--bq-divider--color** - Divider color _(default: undefined)_\n- **--bq-divider--title-marginX** - Divider space between title and delimiters _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dash-start** - The component's internal svg wrapper for the start line of the divider's stroke.\n- **dash-end** - The component's internal svg wrapper for the end line of the divider's stroke.\n- **dash-start-line** - The component's internal line component of the divider's stroke.\n- **dash-end-line** - The component's internal line component of the divider's stroke.",
@@ -696,35 +637,61 @@
       "references": []
     },
     {
-      "name": "bq-drawer",
-      "description": "The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-drawer position=\"end\">\n<div class=\"flex gap-xs\" slot=\"title\">Title</div>\n<div class=\"...\">\nContent\n</div>\n<div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n</div>\n</bq-drawer>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the drawer is closed.\n- **bqOpen** - Callback handler to be called when the drawer is opened.\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened.\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed.\n- **bqClose** - Callback handler to be called when the drawer is closed\n- **bqOpen** - Callback handler to be called when the drawer is opened\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed\n\n### **Methods:**\n - **handlePlacementChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property\n- **hide(): _Promise<void>_** - Method to be called to hide the drawer component\n- **show(): _Promise<void>_** - Method to be called to show the drawer component\n\n### **Slots:**\n - **title** - The title content of the drawer.\n- _default_ - The body content of the drawer.\n- **footer** - The footer content of the drawer.\n- **button-close** - The close button content of the drawer.\n- **footer-divider** - The footer divider content of the drawer.\n\n### **CSS Properties:**\n - **--bq-drawer--backgroundBackdrop** - Background color of the backdrop _(default: undefined)_\n- **--bq-drawer--gap** - Gap between the drawer and the viewport _(default: undefined)_\n- **--bq-drawer--width** - Width of the drawer _(default: undefined)_\n- **--bq-drawer--paddingX** - Padding left and right of the drawer _(default: undefined)_\n- **--bq-drawer--paddingY** - Padding top and bottom of the drawer _(default: undefined)_\n- **--bq-drawer--zIndex** - Z-index of the drawer component _(default: undefined)_\n\n### **CSS Parts:**\n - **backdrop** - The `<div>` that holds the backdrop overlay.\n- **button-close** - The BqButton that closes the drawer.\n- **button-close__btn** - The native button used under the hood that closes the drawer.\n- **button-close__label** - The text inside the native button that closes the drawer.\n- **panel** - The `<div>` that holds the drawer entire content.\n- **header** - The `<header>` that holds the icon, title, and close button.\n- **title** - The `<div>` that holds the title content.\n- **body** - The `<main>` that holds the drawer body content.\n- **footer** - The `<footer>` that holds footer content.",
+      "name": "bq-dialog",
+      "description": "The Dialog component is used to display additional content or prompt a user for action.\nIt provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dialog footer-appearance=\"standard\" border=\"m\" size=\"medium\">\n<h5 class=\"bold flex items-center gap-s\" slot=\"title\">\n<bq-icon name=\"info\" size=\"30\" color=\"text--accent\" role=\"img\" title=\"Info\"></bq-icon>\nTitle\n</h5>\n<p>\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\nstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a\ntype specimen book.\n</p>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"link\">Button</bq-button>\n<bq-button variant=\"ghost\">Button</bq-button>\n<bq-button variant=\"standard\" slot=\"footer\">Button</bq-button>\n</div>\n</bq-dialog>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed.\n- **bqClose** - Callback handler emitted when the dialog will close.\n- **bqOpen** - Callback handler emitted when the dialog will open.\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening.\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing.\n- **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed\n- **bqClose** - Callback handler emitted when the dialog will close\n- **bqOpen** - Callback handler emitted when the dialog will open\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing\n\n### **Methods:**\n - **show()** - Open the dialog\n- **hide()** - Closes the dialog\n- **cancel()** - Dismiss or cancel the dialog\n\n### **Slots:**\n - **title** - The title content of the dialog.\n- _default_ - The body content of the dialog.\n- **footer** - The footer content of the dialog.\n- **button-close** - The close button content of the dialog.\n\n### **CSS Properties:**\n - **--bq-dialog--background** - Dialog background color _(default: undefined)_\n- **--bq-dialog--background-backdrop** - Dialog backdrop background color _(default: undefined)_\n- **--bq-dialog--box-shadow** - Dialog box shadow _(default: undefined)_\n- **--bq-dialog--border-color** - Dialog border color _(default: undefined)_\n- **--bq-dialog--border-style** - Dialog border style _(default: undefined)_\n- **--bq-dialog--border-width** - Dialog border width _(default: undefined)_\n- **--bq-dialog--border-radius** - Dialog border radius _(default: undefined)_\n- **--bq-dialog--padding** - Dialog padding _(default: undefined)_\n- **--bq-dialog--content-footer-gap** - Dialog gap distance between content and footer elements _(default: undefined)_\n- **--bq-dialog--title-body-gap** - Dialog gap distance between title and body elements _(default: undefined)_\n- **--bq-dialog--width-small** - Dialog small width _(default: undefined)_\n- **--bq-dialog--width-medium** - Dialog medium width _(default: undefined)_\n- **--bq-dialog--width-large** - Dialog large width _(default: undefined)_\n- **--bq-dialog-z-index** - Dialog z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **body** - The `<main>` that holds the dialog body content.\n- **button-close** - The button that closes the dialog on click.\n- **content** - The `<div>` container that holds the dialog title and body content.\n- **dialog** - The `<dialog>` wrapper container inside the shadow DOM.\n- **footer** - The `<footer>` that holds footer content.\n- **header** - The `<header>` that holds the icon, title, description and close button.\n- **title** - The `<div>` that holds the title content.",
       "attributes": [
         {
-          "name": "enable-backdrop",
-          "description": "If true, the backdrop overlay will be shown when the drawer opens.",
+          "name": "border",
+          "description": "Border radius of the dialog component.",
+          "values": [
+            { "name": "none" },
+            { "name": "xs2" },
+            { "name": "xs" },
+            { "name": "s" },
+            { "name": "m" },
+            { "name": "l" },
+            { "name": "full" }
+          ]
+        },
+        {
+          "name": "disable-backdrop",
+          "description": "If true, the backdrop overlay won't be shown when the dialog opens.",
           "values": []
         },
         {
-          "name": "close-on-click-outside",
-          "description": "If true, the drawer will not close when clicking outside the panel.",
+          "name": "disable-close-esc-keydown",
+          "description": "If true, the dialog will not close when the [Esc] key is pressed.",
           "values": []
         },
         {
-          "name": "close-on-esc",
-          "description": "If true, the drawer will not close when the [Esc] key is pressed.",
+          "name": "disable-close-click-outside",
+          "description": "If true, the dialog will not close when clicking on the backdrop overlay.",
           "values": []
         },
         {
-          "name": "open",
-          "description": "If true, the drawer component will be shown.",
+          "name": "footer-appearance",
+          "description": "The appearance of the footer.",
+          "values": [{ "name": "standard" }, { "name": "highlight" }]
+        },
+        {
+          "name": "hide-close-button",
+          "description": "If true, it hides the close button.",
           "values": []
         },
         {
-          "name": "position",
-          "description": "Defines the position of the drawer.",
-          "values": [{ "name": "start" }, { "name": "end" }]
+          "name": "open",
+          "description": "If true, the dialog will be shown as open.",
+          "values": []
         },
-        { "name": "placement", "values": [{ "name": "TDrawerPlacement" }] }
+        {
+          "name": "size",
+          "description": "The size of the dialog.",
+          "values": [
+            { "name": "small" },
+            { "name": "medium" },
+            { "name": "large" }
+          ]
+        }
       ],
       "references": []
     },
@@ -809,6 +776,39 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-drawer",
+      "description": "The Drawer component provides a sliding panel interface commonly used for navigation or presenting additional content without taking up significant screen space.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-drawer position=\"end\">\n<div class=\"flex gap-xs\" slot=\"title\">Title</div>\n<div class=\"...\">\nContent\n</div>\n<div class=\"flex flex-1 justify-center gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" block=\"\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" block=\"\" size=\"small\">Button</bq-button>\n</div>\n</bq-drawer>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClose** - Callback handler to be called when the drawer is closed.\n- **bqOpen** - Callback handler to be called when the drawer is opened.\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened.\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed.\n- **bqClose** - Callback handler to be called when the drawer is closed\n- **bqOpen** - Callback handler to be called when the drawer is opened\n- **bqAfterOpen** - Callback handler to be called after the drawer has been opened\n- **bqAfterClose** - Callback handler to be called after the drawer has been closed\n\n### **Methods:**\n - **handlePlacementChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `placement` property is removed\nWe need to maintain retro-compatibility with the deprecated `placement` property\n- **hide(): _Promise<void>_** - Method to be called to hide the drawer component\n- **show(): _Promise<void>_** - Method to be called to show the drawer component\n\n### **Slots:**\n - **title** - The title content of the drawer.\n- _default_ - The body content of the drawer.\n- **footer** - The footer content of the drawer.\n- **button-close** - The close button content of the drawer.\n- **footer-divider** - The footer divider content of the drawer.\n\n### **CSS Properties:**\n - **--bq-drawer--backgroundBackdrop** - Background color of the backdrop _(default: undefined)_\n- **--bq-drawer--gap** - Gap between the drawer and the viewport _(default: undefined)_\n- **--bq-drawer--width** - Width of the drawer _(default: undefined)_\n- **--bq-drawer--paddingX** - Padding left and right of the drawer _(default: undefined)_\n- **--bq-drawer--paddingY** - Padding top and bottom of the drawer _(default: undefined)_\n- **--bq-drawer--zIndex** - Z-index of the drawer component _(default: undefined)_\n\n### **CSS Parts:**\n - **backdrop** - The `<div>` that holds the backdrop overlay.\n- **button-close** - The BqButton that closes the drawer.\n- **button-close__btn** - The native button used under the hood that closes the drawer.\n- **button-close__label** - The text inside the native button that closes the drawer.\n- **panel** - The `<div>` that holds the drawer entire content.\n- **header** - The `<header>` that holds the icon, title, and close button.\n- **title** - The `<div>` that holds the title content.\n- **body** - The `<main>` that holds the drawer body content.\n- **footer** - The `<footer>` that holds footer content.",
+      "attributes": [
+        {
+          "name": "enable-backdrop",
+          "description": "If true, the backdrop overlay will be shown when the drawer opens.",
+          "values": []
+        },
+        {
+          "name": "close-on-click-outside",
+          "description": "If true, the drawer will not close when clicking outside the panel.",
+          "values": []
+        },
+        {
+          "name": "close-on-esc",
+          "description": "If true, the drawer will not close when the [Esc] key is pressed.",
+          "values": []
+        },
+        {
+          "name": "open",
+          "description": "If true, the drawer component will be shown.",
+          "values": []
+        },
+        {
+          "name": "position",
+          "description": "Defines the position of the drawer.",
+          "values": [{ "name": "start" }, { "name": "end" }]
+        },
+        { "name": "placement", "values": [{ "name": "TDrawerPlacement" }] }
+      ],
+      "references": []
+    },
     {
       "name": "bq-icon",
       "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>\n---\n\n\n### **Events:**\n - **svgLoaded** - Callback handler to be called when the SVG has loaded.\n- **svgLoaded** - Callback handler to be called when the SVG has loaded\n\n### **Methods:**\n - **handleWeightChange()** - !TO BE REMOVED: Delete this `@Watch()` once the deprecated `weight` property is removed\nWe need to maintain retro-compatibility until the next major release\n\n### **CSS Properties:**\n - **--bq-icon--color** - The stroke color of the SVG. _(default: undefined)_\n- **--bq-icon--size** - The size of the SVG. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper that holds the icon SVG content.\n- **svg** - The `<svg>` tag element inside the component.",
@@ -974,6 +974,33 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-option",
+      "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when item loses focus.\n- **bqFocus** - Handler to be called when item is focused.\n- **bqClick** - Handler to be called when item is clicked.\n- **bqEnter** - Handler to be called on enter key press.\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqEnter** - Handler to be called on enter key press\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the label.\n- _default_ - The label content to be displayed.\n\n### **CSS Properties:**\n - **--bq-option--background** - background color _(default: undefined)_\n- **--bq-option--font-size** - font size _(default: undefined)_\n- **--bq-option--border-color** - border color _(default: undefined)_\n- **--bq-option--border-style** - border style _(default: undefined)_\n- **--bq-option--border-width** - border width _(default: undefined)_\n- **--bq-option--border-radius** - border radius _(default: undefined)_\n- **--bq-option--box-shadow** - box shadow _(default: undefined)_\n- **--bq-option--gap-start** - gap space between prefix and label _(default: undefined)_\n- **--bq-option--gap-end** - gap space between label and suffix _(default: undefined)_\n- **--bq-option--paddingY** - padding Y axis _(default: undefined)_\n- **--bq-option--padding-start** - option label padding start _(default: undefined)_\n- **--bq-option--padding-end** - option label padding end _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **label** - The `span` element in which the label text is displayed.\n- **prefix** - The `span` element in which the prefix is displayed (generally `bq-icon`).\n- **suffix** - The `span` element in which the suffix is displayed (generally `bq-icon`).",
+      "attributes": [
+        {
+          "name": "disabled",
+          "description": "If true, the option is disabled.",
+          "values": []
+        },
+        {
+          "name": "hidden",
+          "description": "If true, the option is hidden.",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "A string representing the value of the option. Can be used to identify the item.",
+          "values": []
+        },
+        {
+          "name": "selected",
+          "description": "If true, the option is selected and active.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-notification",
       "description": "The Notification component is a user interface element used to provide information or alerts to users in a non-intrusive manner.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-notification border=\"s\" time=\"3000\" type=\"info\">\nTitle\n<span slot=\"body\">\nThis is some description text text\n<a class=\"bq-link\" href=\"https://example.com\">Link</a>\n</span>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"primary\" size=\"small\">Button</bq-button>\n<bq-button appearance=\"link\" size=\"small\">Button</bq-button>\n</div>\n</bq-notification>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqAfterClose** - Callback handler to be called after the notification has been closed\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqHide** - Callback handler to be called when the notification is hidden\n- **bqShow** - Callback handler to be called when the notification is shown\n- **bqAfterOpen** - Callback handler to be called after the notification has been opened\n- **bqAfterClose** - Callback handler to be called after the notification has been closed\n\n### **Methods:**\n - **hide(): _Promise<void>_** - Method to be called to hide the notification component\n- **show(): _Promise<void>_** - Method to be called to show the notification component\n- **toast()** - This method can be used to display notifications in a fixed-position element that allows for stacking multiple notifications vertically\n\n### **Slots:**\n - _default_ - The notification title content\n- **body** - The notification description content\n- **footer** - The notification footer content\n- **icon** - The icon to be displayed in the notification\n- **btn-close** - The close button of the notification\n\n### **CSS Properties:**\n - **--bq-notification--background** - The notification background color _(default: undefined)_\n- **--bq-notification--box-shadow** - The notification box shadow _(default: undefined)_\n- **--bq-notification--border-color** - The notification border color _(default: undefined)_\n- **--bq-notification--border-radius** - The notification border radius _(default: undefined)_\n- **--bq-notification--border-style** - The notification border style _(default: undefined)_\n- **--bq-notification--border-width** - The notification border width _(default: undefined)_\n- **--bq-notification--content-footer-gap** - The notification content and footer gap _(default: undefined)_\n- **--bq-notification--title-body-gap** - The notification title and body gap _(default: undefined)_\n- **--bq-notification--icon-color-error** - The notification icon color for error type _(default: undefined)_\n- **--bq-notification--icon-color-info** - The notification icon color for info type _(default: undefined)_\n- **--bq-notification--icon-color-neutral** - The notification icon color for neutral type _(default: undefined)_\n- **--bq-notification--icon-color-success** - The notification icon color for success type _(default: undefined)_\n- **--bq-notification--icon-color-warning** - The notification icon color for warning type _(default: undefined)_\n- **--bq-notification--padding** - The notification padding _(default: undefined)_\n- **--bq-notification--min-width** - The notification min width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The `<div>` container of the predefined bq-icon component.\n- **body** - The container `<div>` that wraps the notification description content\n- **btn-close** - The `bq-button` used to close the notification\n- **content** - The container `<div>` that wraps all the notification content (title, description, footer)\n- **footer** - The container `<div>` that wraps the notification footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon based on the notification type\n- **icon-outline** - The container `<div>` that wraps the icon element\n- **main** - The container `<div>` that wraps the notification main content (title, description)\n- **svg** - The `<svg>` element of the predefined bq-icon component.\n- **title** - The container `<div>` that wraps the notification title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
@@ -1012,33 +1039,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-option",
-      "description": "An option refers to a specific choice that appears in a list of selectable items that can be opened or closed by the user.\nIt can be an element of the navigation system that allows users to select different sections or pages within an application or it can be used within a dropdown list.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-option value=\"user\">\n<span>User profile</span>\n<bq-icon slot=\"suffix\" name=\"user\"></bq-icon>\n</bq-option>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when item loses focus.\n- **bqFocus** - Handler to be called when item is focused.\n- **bqClick** - Handler to be called when item is clicked.\n- **bqEnter** - Handler to be called on enter key press.\n- **bqBlur** - Handler to be called when item loses focus\n- **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqEnter** - Handler to be called on enter key press\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the label.\n- _default_ - The label content to be displayed.\n\n### **CSS Properties:**\n - **--bq-option--background** - background color _(default: undefined)_\n- **--bq-option--font-size** - font size _(default: undefined)_\n- **--bq-option--border-color** - border color _(default: undefined)_\n- **--bq-option--border-style** - border style _(default: undefined)_\n- **--bq-option--border-width** - border width _(default: undefined)_\n- **--bq-option--border-radius** - border radius _(default: undefined)_\n- **--bq-option--box-shadow** - box shadow _(default: undefined)_\n- **--bq-option--gap-start** - gap space between prefix and label _(default: undefined)_\n- **--bq-option--gap-end** - gap space between label and suffix _(default: undefined)_\n- **--bq-option--paddingY** - padding Y axis _(default: undefined)_\n- **--bq-option--padding-start** - option label padding start _(default: undefined)_\n- **--bq-option--padding-end** - option label padding end _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **label** - The `span` element in which the label text is displayed.\n- **prefix** - The `span` element in which the prefix is displayed (generally `bq-icon`).\n- **suffix** - The `span` element in which the suffix is displayed (generally `bq-icon`).",
-      "attributes": [
-        {
-          "name": "disabled",
-          "description": "If true, the option is disabled.",
-          "values": []
-        },
-        {
-          "name": "hidden",
-          "description": "If true, the option is hidden.",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "A string representing the value of the option. Can be used to identify the item.",
-          "values": []
-        },
-        {
-          "name": "selected",
-          "description": "If true, the option is selected and active.",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-option-group",
       "description": "The option group 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-group class=\"hydrated\">\n<span slot=\"header-label\">Sport</span>\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-group>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **header-label** - The label of the option group\n- **header-prefix** - The prefix of the label\n- **header-suffix** - The suffix of the label\n- _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--background** - option group background color _(default: undefined)_\n- **--bq-option-group--font-size** - option group font size _(default: undefined)_\n- **--bq-option-group--line-height** - option group line height _(default: undefined)_\n- **--bq-option-group--label-padding-start** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-padding-end** - option group header padding start _(default: undefined)_\n- **--bq-option-group--label-paddingY** - option group header padding Y axis _(default: undefined)_\n- **--bq-option-group--label-text-padding-start** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--label-text-padding-end** - option group text within label padding start _(default: undefined)_\n- **--bq-option-group--container-padding-start** - option group container padding start _(default: undefined)_\n\n### **CSS Parts:**\n - **label** - The `legend` tag element which acts as a container for the label\n- **prefix** - The prefix of the label\n- **label** - The text of the label\n- **suffix** - The suffix of the label\n- **group** - The `div` element which holds the option items",

package/dist/cjs/{assetsPath-32c4030b.js → assetsPath-95e7f5ab.js}

@@ -4,7 +4,7 @@
  */
 'use strict';
 
-require('./index-0c8d249a.js');
+require('./index-d734f710.js');
 const isClient = require('./isClient-c22372aa.js');
 
 /**
@@ -77,4 +77,4 @@ const getScriptPath = (script) => {
 exports.getBasePath = getBasePath;
 exports.setBasePath = setBasePath;
 
-//# sourceMappingURL=assetsPath-32c4030b.js.map
+//# sourceMappingURL=assetsPath-95e7f5ab.js.map

package/dist/cjs/{assetsPath-32c4030b.js.map → assetsPath-95e7f5ab.js.map}

@@ -1 +1 @@
-{"file":"assetsPath-32c4030b.js","mappings":";;;;;;;;;AAAA;;;;AAQA,IAAI,YAAgC,CAAC;AACrC,MAAM,mBAAmB,GAAG,WAAW,CAAC;AACxC,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAE/B;;;;MAIa,WAAW,GAAG,CAAC,IAAY;IACtC,YAAY,GAAG,IAAI,CAAC;AACtB,EAAE;AAEF;;;;;MAKa,WAAW,GAAG,CAAC,UAAkB,EAAE;IAC9C,IAAI,CAAC,YAAY,EAAE;QACjB,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;QACxC,MAAM,cAAc,GAAG,YAAY,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAAC;QAElE,MAAM,MAAM,GAAG,YAAY,IAAI,cAAc,CAAC;QAC9C,IAAI,MAAM,EAAE;YACV,MAAM,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;YAC7F,WAAW,CAAC,GAAG,IAAI,IAAI,gBAAgB,EAAE,CAAC,CAAC;SAC5C;aAAM;;YAEL,WAAW,CAA8B,KAAK,gBAAgB,EAAE,CAAC,CAAC;SACnE;KACF;;IAGD,MAAM,gBAAgB,GAAG,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;IACzE,OAAO,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC;AAC5D,EAAE;AAEF;;;;AAIA,MAAM,gBAAgB,GAAG;IACvB,IAAI,CAACA,iBAAQ,EAAE;QAAE,OAAO,IAAI,CAAC;IAE7B,OAAO,QAAQ,CAAC,aAAa,CAAC,UAAU,mBAAmB,GAAG,CAAC,CAAC;AAClE,CAAC,CAAC;AAEF;;;;AAIA,MAAM,kBAAkB,GAAG;IACzB,IAAI,CAACA,iBAAQ,EAAE;QAAE,OAAO,IAAI,CAAC;IAE7B,OAAO,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF;;;;;AAKA,MAAM,aAAa,GAAG,CAAC,MAAyB;IAC9C,IAAI,CAACA,iBAAQ,EAAE;QAAE,OAAO,EAAE,CAAC;IAE3B,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;AAC3D,CAAC;;;;;","names":["isClient"],"sources":["../../packages/beeq/src/shared/utils/assetsPath.ts"],"sourcesContent":["/**\n * Inspired by Shoelace's `getBasePath` and `setBasePath` functions.\n * https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts\n */\nimport { Env } from '@stencil/core';\n\nimport { isClient } from './isClient';\n\nlet beeqBasePath: string | undefined;\nconst DATA_BEEQ_ATTRIBUTE = 'data-beeq';\nconst DEFAULT_SVG_PATH = 'svg';\n\n/**\n * Sets the base path for the assets.\n * @param {string} path - The base path to set.\n */\nexport const setBasePath = (path: string): void => {\n  beeqBasePath = path;\n};\n\n/**\n * Gets the base path for the assets.\n * @param {string} subpath - An optional subpath to append to the base path.\n * @returns {string} The base path of the assets.\n */\nexport const getBasePath = (subpath: string = ''): string => {\n  if (!beeqBasePath) {\n    const configScript = findConfigScript();\n    const fallbackScript = configScript ? null : findFallbackScript();\n\n    const script = configScript || fallbackScript;\n    if (script) {\n      const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);\n      setBasePath(`${path}/${DEFAULT_SVG_PATH}`);\n    } else {\n      // Fallback: use an environment variable (if set) or the default path\n      setBasePath(Env.BEEQ_ASSETS_BASE_PATH || `./${DEFAULT_SVG_PATH}`);\n    }\n  }\n\n  // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.\n  const formattedSubpath = subpath ? `/${subpath.replace(/^\\//, '')}` : '';\n  return beeqBasePath.replace(/\\/$/, '') + formattedSubpath;\n};\n\n/**\n * Finds the configuration script element.\n * @returns The configuration script element or null if not found.\n */\nconst findConfigScript = (): HTMLScriptElement | null => {\n  if (!isClient()) return null;\n\n  return document.querySelector(`script[${DATA_BEEQ_ATTRIBUTE}]`);\n};\n\n/**\n * Finds the fallback script element.\n * @returns The fallback script element or null if not found.\n */\nconst findFallbackScript = (): HTMLScriptElement | null => {\n  if (!isClient()) return null;\n\n  return document.querySelector(`script[src*=\"beeq\"]`);\n};\n\n/**\n * Gets the path of a script element.\n * @param {HTMLScriptElement} script - The script element.\n * @returns The path of the script element.\n */\nconst getScriptPath = (script: HTMLScriptElement): string => {\n  if (!isClient()) return '';\n\n  const src = script.getAttribute('src');\n  return src ? src.substring(0, src.lastIndexOf('/')) : '';\n};\n"],"version":3}
+{"file":"assetsPath-95e7f5ab.js","mappings":";;;;;;;;;AAAA;;;;AAQA,IAAI,YAAgC,CAAC;AACrC,MAAM,mBAAmB,GAAG,WAAW,CAAC;AACxC,MAAM,gBAAgB,GAAG,KAAK,CAAC;AAE/B;;;;MAIa,WAAW,GAAG,CAAC,IAAY;IACtC,YAAY,GAAG,IAAI,CAAC;AACtB,EAAE;AAEF;;;;;MAKa,WAAW,GAAG,CAAC,UAAkB,EAAE;IAC9C,IAAI,CAAC,YAAY,EAAE;QACjB,MAAM,YAAY,GAAG,gBAAgB,EAAE,CAAC;QACxC,MAAM,cAAc,GAAG,YAAY,GAAG,IAAI,GAAG,kBAAkB,EAAE,CAAC;QAElE,MAAM,MAAM,GAAG,YAAY,IAAI,cAAc,CAAC;QAC9C,IAAI,MAAM,EAAE;YACV,MAAM,IAAI,GAAG,YAAY,GAAG,MAAM,CAAC,YAAY,CAAC,mBAAmB,CAAC,GAAG,aAAa,CAAC,MAAM,CAAC,CAAC;YAC7F,WAAW,CAAC,GAAG,IAAI,IAAI,gBAAgB,EAAE,CAAC,CAAC;SAC5C;aAAM;;YAEL,WAAW,CAA8B,KAAK,gBAAgB,EAAE,CAAC,CAAC;SACnE;KACF;;IAGD,MAAM,gBAAgB,GAAG,OAAO,GAAG,IAAI,OAAO,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,EAAE,GAAG,EAAE,CAAC;IACzE,OAAO,YAAY,CAAC,OAAO,CAAC,KAAK,EAAE,EAAE,CAAC,GAAG,gBAAgB,CAAC;AAC5D,EAAE;AAEF;;;;AAIA,MAAM,gBAAgB,GAAG;IACvB,IAAI,CAACA,iBAAQ,EAAE;QAAE,OAAO,IAAI,CAAC;IAE7B,OAAO,QAAQ,CAAC,aAAa,CAAC,UAAU,mBAAmB,GAAG,CAAC,CAAC;AAClE,CAAC,CAAC;AAEF;;;;AAIA,MAAM,kBAAkB,GAAG;IACzB,IAAI,CAACA,iBAAQ,EAAE;QAAE,OAAO,IAAI,CAAC;IAE7B,OAAO,QAAQ,CAAC,aAAa,CAAC,qBAAqB,CAAC,CAAC;AACvD,CAAC,CAAC;AAEF;;;;;AAKA,MAAM,aAAa,GAAG,CAAC,MAAyB;IAC9C,IAAI,CAACA,iBAAQ,EAAE;QAAE,OAAO,EAAE,CAAC;IAE3B,MAAM,GAAG,GAAG,MAAM,CAAC,YAAY,CAAC,KAAK,CAAC,CAAC;IACvC,OAAO,GAAG,GAAG,GAAG,CAAC,SAAS,CAAC,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC;AAC3D,CAAC;;;;;","names":["isClient"],"sources":["../../packages/beeq/src/shared/utils/assetsPath.ts"],"sourcesContent":["/**\n * Inspired by Shoelace's `getBasePath` and `setBasePath` functions.\n * https://github.com/shoelace-style/shoelace/blob/next/src/utilities/base-path.ts\n */\nimport { Env } from '@stencil/core';\n\nimport { isClient } from './isClient';\n\nlet beeqBasePath: string | undefined;\nconst DATA_BEEQ_ATTRIBUTE = 'data-beeq';\nconst DEFAULT_SVG_PATH = 'svg';\n\n/**\n * Sets the base path for the assets.\n * @param {string} path - The base path to set.\n */\nexport const setBasePath = (path: string): void => {\n  beeqBasePath = path;\n};\n\n/**\n * Gets the base path for the assets.\n * @param {string} subpath - An optional subpath to append to the base path.\n * @returns {string} The base path of the assets.\n */\nexport const getBasePath = (subpath: string = ''): string => {\n  if (!beeqBasePath) {\n    const configScript = findConfigScript();\n    const fallbackScript = configScript ? null : findFallbackScript();\n\n    const script = configScript || fallbackScript;\n    if (script) {\n      const path = configScript ? script.getAttribute(DATA_BEEQ_ATTRIBUTE) : getScriptPath(script);\n      setBasePath(`${path}/${DEFAULT_SVG_PATH}`);\n    } else {\n      // Fallback: use an environment variable (if set) or the default path\n      setBasePath(Env.BEEQ_ASSETS_BASE_PATH || `./${DEFAULT_SVG_PATH}`);\n    }\n  }\n\n  // Return the base path without a trailing slash. If one exists, append the subpath separated by a slash.\n  const formattedSubpath = subpath ? `/${subpath.replace(/^\\//, '')}` : '';\n  return beeqBasePath.replace(/\\/$/, '') + formattedSubpath;\n};\n\n/**\n * Finds the configuration script element.\n * @returns The configuration script element or null if not found.\n */\nconst findConfigScript = (): HTMLScriptElement | null => {\n  if (!isClient()) return null;\n\n  return document.querySelector(`script[${DATA_BEEQ_ATTRIBUTE}]`);\n};\n\n/**\n * Finds the fallback script element.\n * @returns The fallback script element or null if not found.\n */\nconst findFallbackScript = (): HTMLScriptElement | null => {\n  if (!isClient()) return null;\n\n  return document.querySelector(`script[src*=\"beeq\"]`);\n};\n\n/**\n * Gets the path of a script element.\n * @param {HTMLScriptElement} script - The script element.\n * @returns The path of the script element.\n */\nconst getScriptPath = (script: HTMLScriptElement): string => {\n  if (!isClient()) return '';\n\n  const src = script.getAttribute('src');\n  return src ? src.substring(0, src.lastIndexOf('/')) : '';\n};\n"],"version":3}