@beeq/core 1.12.3-beta.0 → 1.12.3

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

@@ -3,69 +3,69 @@
   "version": 1.1,
   "tags": [
     {
-      "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.",
+      "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 accordion to be applied to all accordions",
+          "description": "The appearance style of the Accordion",
           "values": [{ "name": "filled" }, { "name": "ghost" }]
         },
         {
-          "name": "expandAll",
-          "description": "If true all accordions are expanded",
+          "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.",
+          "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",
+          "name": "rotate",
+          "description": "If true, the Accordion expand icon is rotate 180deg when expanded",
           "values": []
         },
         {
           "name": "size",
-          "description": "The size of accordion to be applied to all accordions",
+          "description": "The size of the the Accordion",
           "values": [{ "name": "small" }, { "name": "medium" }]
         }
       ],
       "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",
+      "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 the Accordion",
+          "description": "The appearance style of accordion to be applied to all accordions",
           "values": [{ "name": "filled" }, { "name": "ghost" }]
         },
         {
-          "name": "disabled",
-          "description": "If true, the Accordion is disabled",
-          "values": []
-        },
-        {
-          "name": "expanded",
-          "description": "If true, the Accordion is expanded",
+          "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.",
+          "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",
+          "name": "multiple",
+          "description": "If true multiple accordions can be expanded at the same time",
           "values": []
         },
         {
           "name": "size",
-          "description": "The size of the the Accordion",
+          "description": "The size of accordion to be applied to all accordions",
           "values": [{ "name": "small" }, { "name": "medium" }]
         }
       ],
@@ -174,28 +174,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-breadcrumb-item",
-      "description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqBlur** - Handler to be called when item loses focus\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\n### **Slots:**\n - _default_ - The default slot is used to add content to the breadcrumb item.\n\n### **CSS Properties:**\n - **--bq-breadcrumb-item--background** - Background color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--box-shadow** - Box shadow of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-color** - Border color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-style** - Border style of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-width** - Border width of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-radius** - Border radius of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--line-height** - Line height of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color** - Text color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color-current** - Text color of the current breadcrumb item (active) _(default: undefined)_\n- **--bq-breadcrumb-item--text-size** - Text size of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-size-separator** - Text size of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start** - Padding start of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end** - Padding end of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--paddingY** - Padding top and bottom of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start-separator** - Padding start of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end-separator** - Padding end of the breadcrumb item separator _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container\n- **content** - The `span` tag that wraps the content item\n- **item** - The breadcrumb item wrapper (`button` or `a`)\n- **separator** - The `span` tag that wraps the separator element",
-      "attributes": [
-        {
-          "name": "href",
-          "description": "If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.",
-          "values": []
-        },
-        {
-          "name": "target",
-          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
-          "values": []
-        },
-        {
-          "name": "rel",
-          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
-          "values": []
-        }
-      ],
-      "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.",
@@ -222,6 +200,28 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-breadcrumb-item",
+      "description": "The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-breadcrumb-item label=\"Home page\">\n<bq-icon name=\"house-line\" size=\"16\"></bq-icon>\nHome\n</bq-breadcrumb-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqFocus** - Handler to be called when item is focused\n- **bqClick** - Handler to be called when item is clicked\n- **bqBlur** - Handler to be called when item loses focus\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\n### **Slots:**\n - _default_ - The default slot is used to add content to the breadcrumb item.\n\n### **CSS Properties:**\n - **--bq-breadcrumb-item--background** - Background color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--box-shadow** - Box shadow of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-color** - Border color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-style** - Border style of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-width** - Border width of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--border-radius** - Border radius of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--line-height** - Line height of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color** - Text color of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-color-current** - Text color of the current breadcrumb item (active) _(default: undefined)_\n- **--bq-breadcrumb-item--text-size** - Text size of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--text-size-separator** - Text size of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start** - Padding start of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end** - Padding end of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--paddingY** - Padding top and bottom of the breadcrumb item _(default: undefined)_\n- **--bq-breadcrumb-item--padding-start-separator** - Padding start of the breadcrumb item separator _(default: undefined)_\n- **--bq-breadcrumb-item--padding-end-separator** - Padding end of the breadcrumb item separator _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container\n- **content** - The `span` tag that wraps the content item\n- **item** - The breadcrumb item wrapper (`button` or `a`)\n- **separator** - The `span` tag that wraps the separator element",
+      "attributes": [
+        {
+          "name": "href",
+          "description": "If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.",
+          "values": []
+        },
+        {
+          "name": "target",
+          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
+          "values": []
+        },
+        {
+          "name": "rel",
+          "description": "Where to display the link in the browser context. Relevant only if `href` is set.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-button",
       "description": "Buttons are designed for users to take action on a page or a screen.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n<bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\nGo back\n</bq-button>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when button gets focus\n- **bqClick** - Handler to be called when the button is clicked\n- **bqBlur** - Handler to be called when the button loses focus.\n- **bqFocus** - Handler to be called when the button gets focus.\n- **bqClick** - Handler to be called when the button is clicked.\n\n### **Slots:**\n - **prefix** - The prefix content to be displayed before the button label\n- _default_ - The button label content\n- **suffix** - The suffix content to be displayed after the button label\n\n### **CSS Properties:**\n - **--bq-button--border-color** - Button border color _(default: undefined)_\n- **--bq-button--border-radius** - Button border radius _(default: undefined)_\n- **--bq-button--border-style** - Button border style _(default: undefined)_\n- **--bq-button--border-width** - Button border width _(default: undefined)_\n- **--bq-button--small-paddingX** - Button small padding block (top and bottom) _(default: undefined)_\n- **--bq-button--small-paddingY** - Button small padding inline (left and right) _(default: undefined)_\n- **--bq-button--small-font-size** - Button small font size _(default: undefined)_\n- **--bq-button--medium-paddingX** - Button medium padding block (top and bottom) _(default: undefined)_\n- **--bq-button--medium-paddingY** - Button medium padding inline (left and right) _(default: undefined)_\n- **--bq-button--medium-font-size** - Button medium font size _(default: undefined)_\n- **--bq-button--large-paddingX** - Button large padding block (top and bottom) _(default: undefined)_\n- **--bq-button--large-paddingY** - Button large padding inline (left and right) _(default: undefined)_\n- **--bq-button--large-font-size** - Button large font size _(default: undefined)_\n\n### **CSS Parts:**\n - **button** - The `<a>` or `<button>` HTML element used under the hood.\n- **prefix** - The `<span>` tag element that acts as prefix container.\n- **label** - The `<span>` tag element that renders the text of the button.\n- **suffix** - The `<span>` tag element that acts as suffix container.",
@@ -337,6 +337,31 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-card",
+      "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>\n---\n\n\n### **Slots:**\n - _default_ - The content of the card component\n\n### **CSS Properties:**\n - **--bq-card--borderColor** - Card border color _(default: undefined)_\n- **--bq-card--borderRadius** - Card border radius _(default: undefined)_\n- **--bq-card--borderStyle** - Card border style _(default: undefined)_\n- **--bq-card--borderWidth** - Card border width _(default: undefined)_\n- **--bq-card--padding** - Card padding _(default: undefined)_\n- **--bq-card--paddingMinimal** - Minimal card padding _(default: undefined)_\n- **--bq-card--background** - Card background color _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
+      "attributes": [
+        {
+          "name": "type",
+          "description": "Type of card component",
+          "values": [{ "name": "default" }, { "name": "minimal" }]
+        },
+        {
+          "name": "border",
+          "description": "The corner radius of the card component",
+          "values": [
+            { "name": "none" },
+            { "name": "xs2" },
+            { "name": "xs" },
+            { "name": "s" },
+            { "name": "m" },
+            { "name": "l" },
+            { "name": "full" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-checkbox",
       "description": "The checkbox is a UI component that allows users to select one or more options from a list of choices.\nIt is commonly used in forms, surveys, and settings pages.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\nCheckbox label\n</bq-checkbox>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the checkbox state changes\n- **bqFocus** - Handler to be called when the checkbox gets focus\n- **bqBlur** - Handler to be called when the checkbox loses focus\n- **bqChange** - Handler to be called when the checkbox state changes\n- **bqFocus** - Handler to be called when the checkbox gets focus\n- **bqBlur** - Handler to be called when the checkbox loses focus\n\n### **Methods:**\n - **vClick()** - Simulate a click event on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.click()`.\n- **vFocus()** - Sets focus on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`.\n- **vBlur()** - Remove focus from the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`.\n\n### **Slots:**\n - _default_ - The content of the checkbox component\n\n### **CSS Properties:**\n - **--bq-checkbox--size** - Checkbox size _(default: undefined)_\n- **--bq-checkbox--border-radius** - Checkbox border radius _(default: undefined)_\n- **--bq-checkbox--border-width** - Checkbox border width _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the checkbox component.\n- **control** - The container `<div>` element that holds the custom checkbox.\n- **input** - The native HTML `<input type=\"checkbox\">` used under the hood.\n- **checkbox** - The `<span>` element that renders the custom checked/indeterminate state.\n- **label** - The `<span>` element that holds the text content.",
@@ -389,31 +414,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-card",
-      "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>\n---\n\n\n### **Slots:**\n - _default_ - The content of the card component\n\n### **CSS Properties:**\n - **--bq-card--borderColor** - Card border color _(default: undefined)_\n- **--bq-card--borderRadius** - Card border radius _(default: undefined)_\n- **--bq-card--borderStyle** - Card border style _(default: undefined)_\n- **--bq-card--borderWidth** - Card border width _(default: undefined)_\n- **--bq-card--padding** - Card padding _(default: undefined)_\n- **--bq-card--paddingMinimal** - Minimal card padding _(default: undefined)_\n- **--bq-card--background** - Card background color _(default: undefined)_\n\n### **CSS Parts:**\n - **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
-      "attributes": [
-        {
-          "name": "type",
-          "description": "Type of card component",
-          "values": [{ "name": "default" }, { "name": "minimal" }]
-        },
-        {
-          "name": "border",
-          "description": "The corner radius of the card component",
-          "values": [
-            { "name": "none" },
-            { "name": "xs2" },
-            { "name": "xs" },
-            { "name": "s" },
-            { "name": "m" },
-            { "name": "l" },
-            { "name": "full" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-date-picker",
       "description": "The Date Picker is a intuitive UI element component allows users to select dates from a visual calendar interface, providing an intuitive way to input date information.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-date-picker\nfirst-day-of-week=\"1\"\nlocale=\"en-GB\"\nmonths-per-view=\"single\"\nmonths=\"2\"\nname=\"bq-date-picker\"\nplaceholder=\"Enter your date\"\nplacement=\"bottom-end\"\nshow-outside-days=\"false\"\ntype=\"range\"\nvalidation-status=\"none\"\nvalue=\"2024-05-25\"\n>\n<label class=\"flex flex-grow items-center\" slot=\"label\">\nDate picker label\n</label>\n</bq-date-picker>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Callback handler emitted when the input loses focus.\n- **bqChange** - Callback handler emitted when the input value has changed and the input loses focus.\n- **bqClear** - Callback handler emitted when the input value has been cleared.\n- **bqFocus** - Callback handler emitted when the input has received focus.\n- **bqBlur** - Callback handler emitted when the input loses focus\n- **bqChange** - Callback handler emitted when the input value has changed and the input loses focus.\nThis handler is called whenever the user finishes typing or pasting text into the input field and then clicks outside of the input field.\n- **bqClear** - Callback handler emitted when the input value has been cleared\n- **bqFocus** - Callback handler emitted when the input has received focus\n\n### **Methods:**\n - **clear(): _Promise<void>_** - Clears the selected value.\n\n### **CSS Properties:**\n - **--bq-date-picker--background-color** - Date picker background color. _(default: undefined)_\n- **--bq-date-picker--border-color** - Date picker border color. _(default: undefined)_\n- **--bq-date-picker--border-color-disabled** - Date picker border color when disabled. _(default: undefined)_\n- **--bq-date-picker--border-color-focus** - Date picker border color on focus. _(default: undefined)_\n- **--bq-date-picker--border-radius** - Date picker border radius. _(default: undefined)_\n- **--bq-date-picker--border-style** - Date picker border style. _(default: undefined)_\n- **--bq-date-picker--border-width** - Date picker border width. _(default: undefined)_\n- **--bq-date-picker--currentDate-border-color** - Date picker border color for current date. _(default: undefined)_\n- **--bq-date-picker--currentDate-border-width** - Date picker border width for current date. _(default: undefined)_\n- **--bq-date-picker--day-size** - Date picker button day size. _(default: undefined)_\n- **--bq-date-picker--gap** - Gap between Date picker content and prefix/suffix. _(default: undefined)_\n- **--bq-date-picker--icon-size** - Icon size to use in prefix/suffix and clear button. _(default: undefined)_\n- **--bq-date-picker--label-margin-bottom** - Date picker label margin bottom. _(default: undefined)_\n- **--bq-date-picker--label-text-color** - Date picker label text color. _(default: undefined)_\n- **--bq-date-picker--label-text-size** - Date picker label text size. _(default: undefined)_\n- **--bq-date-picker--padding-end** - Date picker padding end. _(default: undefined)_\n- **--bq-date-picker--padding-start** - Date picker padding start. _(default: undefined)_\n- **--bq-date-picker--paddingY** - Date picker padding top and bottom. _(default: undefined)_\n- **--bq-date-picker--range-background-color** - Background color for the selected date range in the date picker. _(default: undefined)_\n- **--bq-date-picker--range-inner-background-color** - Background color for the selected dates inside the date range in the date picker. _(default: undefined)_\n- **--bq-date-picker--text-color** - Date picker text color. _(default: undefined)_\n- **--bq-date-picker--text-placeholder-color** - Date picker placeholder text color. _(default: undefined)_\n- **--bq-date-picker--text-size** - Date picker text size. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **button** - The native HTML button used under the hood in the clear button.\n- **calendar__button** - Any button used in the calendar-month component.\n- **calendar__button** - Any button within the calendar-range component.\n- **calendar__container** - The calendar-range container for the entire component.\n- **calendar__day** - The buttons corresponding to each day in the calendar-month grid.\n- **calendar__disabled** - A button that is disabled due to min/max on the calendar-range component.\n- **calendar__disallowed** - Any day that has been disallowed via isDateDisallowed.\n- **calendar__head** - The calendar-month table's header row.\n- **calendar__header** - The calendar-range container for the heading and buttons.\n- **calendar__heading** - The calendar-month heading container that labels the month.\n- **calendar__heading** - The calendar-range heading containing the month and year.\n- **calendar__next** - The next page button on the calendar-range component.\n- **calendar__outside** - Any days which are outside the current month.\n- **calendar__previous** - The previous page button on the calendar-range component.\n- **calendar__range-end** - The day at the end of a date range.\n- **calendar__range-inner** - Any days between the start and end of a date range.\n- **calendar__range-start** - The day at the start of a date range.\n- **calendar__selected** - Any days which are selected.\n- **calendar__table** - The calendar-month <table> element.\n- **calendar__td** - The calendar-month table's body cells.\n- **calendar__th** - The calendar-month table's header cells.\n- **calendar__today** - The Today's day.\n- **calendar__tr** - Any row within the table on the calendar-month component.\n- **calendar__week** - The calendar-month table's body rows.\n- **clear-btn** - The clear button.\n- **control** - The input control wrapper.\n- **input** - The native HTML input element used under the hood.\n- **label** - The label slot container.\n- **panel** - The date picker panel container\n- **prefix** - The prefix slot container.\n- **suffix** - The suffix slot container.",
@@ -743,6 +743,22 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-empty-state",
+      "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>\n---\n\n\n### **Slots:**\n - **thumbnail** - The element that wraps the thumbnail element\n- **body** - The content to be displayed after the thumbnail section\n- **footer** - The content to be displayed after the body section as footer\n\n### **CSS Parts:**\n - **body** - The container `<div>` that wraps the alert description content\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n- **thumbnail** - The container `<div>` that wraps the thumbnail element\n- **title** - The container `<div>` that wraps the empty state title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
+      "attributes": [
+        {
+          "name": "size",
+          "description": "The size of the empty state component",
+          "values": [
+            { "name": "large" },
+            { "name": "medium" },
+            { "name": "small" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-dropdown",
       "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>\n---\n\n\n### **Events:**\n - **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n- **bqOpen** - Callback handler to be called when the dropdown panel is opened or closed.\n\n### **Methods:**\n - **onClickOutside(event: _MouseEvent_)** - Listens for the 'click' event on the document object\nand closes the dropdown panel if the click is outside the component.\n\n### **Slots:**\n - **trigger** - The trigger element that opens the dropdown panel.\n- _default_ - The content of the dropdown panel.\n\n### **CSS Properties:**\n - **--bq-panel--background** - Panel background color _(default: undefined)_\n- **--bq-panel--border-color** - Panel border color _(default: undefined)_\n- **--bq-panel--border-radius** - Panel border radius _(default: undefined)_\n- **--bq-panel--border-style** - Panel border style _(default: undefined)_\n- **--bq-panel--border-width** - Panel border width _(default: undefined)_\n- **--bq-panel--box-shadow** - Panel box shadow _(default: undefined)_\n- **--bq-panel--padding** - Panel padding _(default: undefined)_\n- **--bq-panel--height** - Panel height _(default: undefined)_\n- **--bq-panel--width** - Panel width _(default: undefined)_\n- **--bq-panel-z-index** - Panel z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.\n- **dropdown** - The `<bq-panel>` element used under the hood to display the dropdown panel.\n- **panel** - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.\n- **trigger** - The `<div>` element that hosts the trigger element.",
@@ -813,22 +829,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-empty-state",
-      "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>\n---\n\n\n### **Slots:**\n - **thumbnail** - The element that wraps the thumbnail element\n- **body** - The content to be displayed after the thumbnail section\n- **footer** - The content to be displayed after the body section as footer\n\n### **CSS Parts:**\n - **body** - The container `<div>` that wraps the alert description content\n- **footer** - The container `<div>` that wraps the alert footer content\n- **icon** - The `<bq-icon>` element used to render a predefined icon size based on the empty state size (small, medium, large)\n- **thumbnail** - The container `<div>` that wraps the thumbnail element\n- **title** - The container `<div>` that wraps the empty state title content\n- **wrapper** - The wrapper container `<div>` of the element inside the shadow DOM",
-      "attributes": [
-        {
-          "name": "size",
-          "description": "The size of the empty state component",
-          "values": [
-            { "name": "large" },
-            { "name": "medium" },
-            { "name": "small" }
-          ]
-        }
-      ],
-      "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.",
@@ -1027,18 +1027,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-option-list",
-      "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>\n---\n\n\n### **Events:**\n - **bqSelect** - Handler to be called when `bq-option` is selected (on click/enter press).\n\n### **Slots:**\n - _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--gapY-list** - Option group gap between items Y axis _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
-      "attributes": [
-        {
-          "name": "aria-label",
-          "description": "Aria label for the list.",
-          "values": []
-        }
-      ],
-      "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`).",
@@ -1077,6 +1065,18 @@
       "attributes": [],
       "references": []
     },
+    {
+      "name": "bq-option-list",
+      "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>\n---\n\n\n### **Events:**\n - **bqSelect** - Handler to be called when `bq-option` is selected (on click/enter press).\n\n### **Slots:**\n - _default_ - The option items\n\n### **CSS Properties:**\n - **--bq-option-group--gapY-list** - Option group gap between items Y axis _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper.",
+      "attributes": [
+        {
+          "name": "aria-label",
+          "description": "Aria label for the list.",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-page-title",
       "description": "The Page Title component is a versatile and essential element used to display the main title of a page or section within an application.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-page-title>\n<bq-button appearance=\"link\" slot=\"back\">\n<bq-icon\ncolor=\"text--primary\"\nname=\"arrow-left\"\nweight=\"bold\"\nrole=\"img\"\ntitle=\"Navigate back to the previous page\"\n></bq-icon>\n</bq-button>\nTitle\n<div slot=\"sub-title\">Sub-title</div>\n</bq-page-title>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **back** - The back navigation button.\n- _default_ - The main title content.\n- **sub-title** - The sub-title content.\n- **suffix** - The suffix content.\n\n### **CSS Properties:**\n - **--paddingY** - Padding top and bottom of the page title wrapper _(default: undefined)_\n- **--subtitle-borderBlockEnd** - Page title border end color _(default: undefined)_\n- **--subtitle-fontWeight** - Page title font weight for subtitle _(default: undefined)_\n- **--subtitle-textColor** - Page title color for sub-title _(default: undefined)_\n- **--subtitle-textSize** - Page title text size for subtitle _(default: undefined)_\n- **--title-fontWeight** - Page title font weight for title _(default: undefined)_\n- **--title-lineHeight** - Page title text line height _(default: undefined)_\n- **--title-textColor** - Page title color for title _(default: undefined)_\n- **--title-textSize** - Page title text size for title _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The inner container `<div>`of element that contains the base page title component.\n- **content** - Defines the main container of the page title component, which includes the title and subtitle elements.\n- **title-suffix** - Defines the container that holds the title and any suffix content.\n- **back** - The container `<div>` page title element that acts as back slot container.\n- **title** - The `<h1>` element serves as a container for the page title content, to improve accessibility.\n- **suffix** - The `<div>` page title element that acts as suffix slot container.\n- **sub-title** - The `<div>` page title element that acts as sub-title slot container.",
@@ -1423,28 +1423,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-side-menu-item",
-      "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus.\n- **bqClick** - Handler to be called when the button gets focused.\n- **bqFocus** - Handler to be called when the button is clicked.\n- **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when the button is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix part of menu item.\n- _default_ - The content of the menu item.\n- **suffix** - The suffix part of menu item.\n\n### **CSS Properties:**\n - **--bq-side-menu-item--bg-default** - Side menu item default background color _(default: undefined)_\n- **--bq-side-menu-item--bg-active** - Side menu item active background color _(default: undefined)_\n- **--bq-side-menu-item--text-default** - Side menu item default text color _(default: undefined)_\n- **--bq-side-menu-item--text-active** - Side menu item active text color _(default: undefined)_\n- **--bq-side-menu-item--paddingX** - Side menu item vertical padding _(default: undefined)_\n- **--bq-side-menu-item--paddingY** - Side menu item horizontal padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **label** - The label slot\n- **prefix** - The prefix slot\n- **suffix** - The suffix slot\n- **panel** - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
-      "attributes": [
-        {
-          "name": "active",
-          "description": "If `true`, the menu item will be shown as active/selected.",
-          "values": []
-        },
-        {
-          "name": "collapse",
-          "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "If `true`, the menu item will be disabled (no interaction allowed).",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-side-menu",
       "description": "The default side menu serves as a versatile container for organizing and displaying navigation elements,\n with default side menu items providing a clean and straightforward way to represent individual menu options.\n Together, they form the foundation for building structured and intuitive side menu layouts.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu>\n<div slot=\"logo\">\n<h1>Your Logo</h1>\n</div>\n<bq-side-menu-item active>\n<bq-icon name=\"home\" slot=\"prefix\"></bq-icon>\nHome\n</bq-side-menu-item>\n<bq-side-menu-item>\n<bq-icon name=\"settings\" slot=\"prefix\"></bq-icon>\nSettings\n</bq-side-menu-item>\n<bq-side-menu-item disabled>\n<bq-icon name=\"help\" slot=\"prefix\"></bq-icon>\nHelp\n</bq-side-menu-item>\n</bq-side-menu>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqCollapse** - Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa.\n- **bqSelect** - Callback handler to be called when the active/selected menu item changes.\n- **bqCollapse** - Callback handler to be called when the Side menu changes its width from expanded to collapse and vice versa\n- **bqSelect** - Callback handler to be called when the active/selected menu item changes\n\n### **Methods:**\n - **toggleCollapse()** - Toggle the collapse state of the side menu\n\n### **Slots:**\n - **logo** - The section for displaying the logo or brand in the side menu.\n- **The** - main section that holds all menu items.\n- **footer** - The section for adding footer content to the side menu.\n\n### **CSS Properties:**\n - **--bq-side-menu--bg-color** - Side menu background color _(default: undefined)_\n- **--bq-side-menu--brand-color** - Side menu logo color _(default: undefined)_\n- **--bq-side-menu--border-color** - Side menu border color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - HTML `<aside>` root container\n- **footer** - HTML `<div>` element that holds the footer\n- **logo** - HTML `<div>` element that holds the logo\n- **nav** - HTML `<nav>` element that holds the navigation items",
@@ -1475,6 +1453,28 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-side-menu-item",
+      "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus.\n- **bqClick** - Handler to be called when the button gets focused.\n- **bqFocus** - Handler to be called when the button is clicked.\n- **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when the button is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix part of menu item.\n- _default_ - The content of the menu item.\n- **suffix** - The suffix part of menu item.\n\n### **CSS Properties:**\n - **--bq-side-menu-item--bg-default** - Side menu item default background color _(default: undefined)_\n- **--bq-side-menu-item--bg-active** - Side menu item active background color _(default: undefined)_\n- **--bq-side-menu-item--text-default** - Side menu item default text color _(default: undefined)_\n- **--bq-side-menu-item--text-active** - Side menu item active text color _(default: undefined)_\n- **--bq-side-menu-item--paddingX** - Side menu item vertical padding _(default: undefined)_\n- **--bq-side-menu-item--paddingY** - Side menu item horizontal padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **label** - The label slot\n- **prefix** - The prefix slot\n- **suffix** - The suffix slot\n- **panel** - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
+      "attributes": [
+        {
+          "name": "active",
+          "description": "If `true`, the menu item will be shown as active/selected.",
+          "values": []
+        },
+        {
+          "name": "collapse",
+          "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the menu item will be disabled (no interaction allowed).",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-slider",
       "description": "Sliders provide a visual representation of adjustable content, enabling users to change values by dragging a handle along a horizontal track.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-slider max=\"100\" value=\"30\"></bq-slider>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the slider loses focus.\n- **bqChange** - Handler to be called when changing the value on range inputs.\n- **bqFocus** - Handler to be called when the slider gets focused.\n- **bqChange** - Handler to be called when change the value on range inputs\n- **bqBlur** - Handler to be called when the slider loses focus\n- **bqFocus** - Handler to be called when the slider gets focused\n\n### **CSS Properties:**\n - **--bq-slider--size** - The height of the slider track/progress area _(default: undefined)_\n- **--bq-slider--border-radius** - Slider border radius _(default: undefined)_\n- **--bq-slider--thumb-size** - Slider hover thumb size _(default: undefined)_\n- **--bq-slider--progress-color** - Slider progress background color _(default: undefined)_\n- **--bq-slider--trackarea-color** - Slider track background color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **container** - The container of the slider.\n- **track-area** - The track area of the slider.\n- **progress-area** - The progress area of the slider.\n- **input-min** - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n- **input-max** - The input element for the maximum value.\n- **label-start** - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n- **label-end** - The label for maximum value when the slider type is `range`.",
@@ -1639,6 +1639,37 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-steps",
+      "description": "The Steps Component is a UI element used to display a series of steps or stages in a process or task.\nIt is used to guide users through a process or task and to indicate their progress.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n<bq-step-item status=\"completed\"> ... </bq-step-item>\n<bq-step-item status=\"error\"> ... </bq-step-item>\n<bq-step-item status=\"current\"> ... </bq-step-item>\n<bq-step-item status=\"default\"> ... </bq-step-item>\n</bq-steps>\n```\n\n</figure>\n---\n\n\n### **Methods:**\n - **setCurrentStepItem(newCurrentStep: _HTMLBqStepItemElement_): _Promise<void>_** - Set the current step item.\n\n### **Slots:**\n - _default_ - The step items\n\n### **CSS Properties:**\n - **--bq-steps--divider-color** - Divider color _(default: undefined)_\n- **--bq-steps--gap** - Gap between steps _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - The container wrapper of the Steps component\n- **divider-base** - The base wrapper of the divider component\n- **divider-dash-start** - The dash start wrapper of the divider component\n- **divider-dash-end** - The dash end wrapper of the divider component",
+      "attributes": [
+        {
+          "name": "divider-color",
+          "description": "The color of the line that connects the steps. It should be a valid declarative color token.",
+          "values": []
+        },
+        {
+          "name": "orientation",
+          "description": "The orientation of the steps",
+          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
+        },
+        {
+          "name": "size",
+          "description": "The size of the steps",
+          "values": [{ "name": "medium" }, { "name": "small" }]
+        },
+        {
+          "name": "type",
+          "description": "The type of prefix element to use on the step items",
+          "values": [
+            { "name": "numeric" },
+            { "name": "icon" },
+            { "name": "dot" }
+          ]
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-switch",
       "description": "Toggle switches are digital on/off switches.\nThey should provide immediate results, giving users the freedom to control their preferences as needed.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-switch inner-label=\"default\" justify-content=\"start\" name=\"bq-switch\" value=\"Switch value\">\nToggle me!\n</bq-switch>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the switch state changes\n- **bqFocus** - Handler to be called when the switch gets focus\n- **bqBlur** - Handler to be called when the switch loses focus\n- **bqChange** - Handler to be called when the switch state changes\n- **bqFocus** - Handler to be called when the switch gets focus\n- **bqBlur** - Handler to be called when the switch loses focus\n\n### **Methods:**\n - **vClick()** - Simulate a click event on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.click()`.\n- **vFocus()** - Sets focus on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`.\n- **vBlur()** - Remove focus from the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`.\n\n### **Slots:**\n - _default_ - The switch label text\n\n### **CSS Properties:**\n - **--bq-switch--height** - Switch height _(default: undefined)_\n- **--bq-switch--justify-content** - Switch justify content _(default: undefined)_\n- **--bq-switch--width** - Switch width _(default: undefined)_\n- **--bq-switch--dot-size** - Switch dot size _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - HTML `<label>` root container\n- **control** - HTML `<div>` element for the custom control\n- **dot** - HTML `<div>` element that acts as changing dot\n- **icon-off** - HTMLBqIcon `<pk-icon>` element used as the `OFF` mark inner label\n- **icon-on** - HTMLBqIcon `<pk-icon>` element used as the `ON` mark inner label\n- **label** - HTML `<span>` element that holds the label text",
@@ -1708,37 +1739,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-steps",
-      "description": "The Steps Component is a UI element used to display a series of steps or stages in a process or task.\nIt is used to guide users through a process or task and to indicate their progress.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-steps divider-color=\"stroke--primary\" type=\"dot\" size=\"medium\">\n<bq-step-item status=\"completed\"> ... </bq-step-item>\n<bq-step-item status=\"error\"> ... </bq-step-item>\n<bq-step-item status=\"current\"> ... </bq-step-item>\n<bq-step-item status=\"default\"> ... </bq-step-item>\n</bq-steps>\n```\n\n</figure>\n---\n\n\n### **Methods:**\n - **setCurrentStepItem(newCurrentStep: _HTMLBqStepItemElement_): _Promise<void>_** - Set the current step item.\n\n### **Slots:**\n - _default_ - The step items\n\n### **CSS Properties:**\n - **--bq-steps--divider-color** - Divider color _(default: undefined)_\n- **--bq-steps--gap** - Gap between steps _(default: undefined)_\n\n### **CSS Parts:**\n - **container** - The container wrapper of the Steps component\n- **divider-base** - The base wrapper of the divider component\n- **divider-dash-start** - The dash start wrapper of the divider component\n- **divider-dash-end** - The dash end wrapper of the divider component",
-      "attributes": [
-        {
-          "name": "divider-color",
-          "description": "The color of the line that connects the steps. It should be a valid declarative color token.",
-          "values": []
-        },
-        {
-          "name": "orientation",
-          "description": "The orientation of the steps",
-          "values": [{ "name": "horizontal" }, { "name": "vertical" }]
-        },
-        {
-          "name": "size",
-          "description": "The size of the steps",
-          "values": [{ "name": "medium" }, { "name": "small" }]
-        },
-        {
-          "name": "type",
-          "description": "The type of prefix element to use on the step items",
-          "values": [
-            { "name": "numeric" },
-            { "name": "icon" },
-            { "name": "dot" }
-          ]
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-tab",
       "description": "The tab is a user interface element that allows users to navigate between different sections of a page.\nIt should be used inside `<bq-tab-group>` component.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-tab tab-id=\"1\" controls=\"panel-1\">Tab 1</bq-tab>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqClick** - Handler to be called when the tab state changes\n- **bqFocus** - Handler to be called when the tab gets focus\n- **bqBlur** - Handler to be called when the tab loses focus\n- **bqKeyDown** - Handler to be called when the tab key is pressed\n- **bqClick** - Handler to be called when the tab state changes\n- **bqFocus** - Handler to be called when the tab gets focus\n- **bqBlur** - Handler to be called when the tab loses focus\n- **bqKeyDown** - Handler to be called when the tab key is pressed\n\n### **Methods:**\n - **vClick()** - Simulate a click event on the native `<button>` HTML element used under the hood.\nUse this method instead of the global `element.click()`.\n- **vFocus()** - Sets focus on the native `<button>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`.\n- **vBlur()** - Remove focus from the native `<button>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`.\n\n### **CSS Properties:**\n - **--bq-tab--font-size** - Font size _(default: undefined)_\n- **--bq-tab--font-weight** - Font weight _(default: undefined)_\n- **--bq-tab--icon-size-large** - Icon size for large tab _(default: undefined)_\n- **--bq-tab--icon-size-medium** - Icon size for medium tab _(default: undefined)_\n- **--bq-tab--icon-size-small** - Icon size for small tab _(default: undefined)_\n- **--bq-tab--label-icon-gap** - Gap between label and icon _(default: undefined)_\n- **--bq-tab--line-height** - Line height _(default: undefined)_\n- **--bq-tab--padding-horizontal-large** - Horizontal padding for large tab _(default: undefined)_\n- **--bq-tab--padding-horizontal-medium** - Horizontal padding for medium tab _(default: undefined)_\n- **--bq-tab--padding-horizontal-small** - Horizontal padding for small tab _(default: undefined)_\n- **--bq-tab--padding-vertical-large** - Vertical padding for large tab _(default: undefined)_\n- **--bq-tab--padding-vertical-medium** - Vertical padding for medium tab _(default: undefined)_\n- **--bq-tab--padding-vertical-small** - Vertical padding for small tab _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The HTML button used under the hood.\n- **content** - The HTML `<div>` element that holds the content.\n- **icon** - The HTML `<div>` element that holds the icon content.\n- **text** - The HTML `<div>` element that holds the text content.\n- **underline** - The HTML `<div>` element that display active state.",

package/dist/cjs/beeq.cjs.js

@@ -4,11 +4,11 @@
  */
 'use strict';
 
-var index = require('./index-Bp6IQmE_.js');
+var index = require('./index-Cs3Q5RMj.js');
 
 var _documentCurrentScript = typeof document !== 'undefined' ? document.currentScript : null;
 /*
- Stencil Client Patch Browser v4.41.3 | MIT Licensed | https://stenciljs.com
+ Stencil Client Patch Browser v4.42.0 | MIT Licensed | https://stenciljs.com
  */
 
 var patchBrowser = () => {

package/dist/cjs/beeq.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"beeq.cjs.js","sources":["../../node_modules/.pnpm/@stencil+core@4.41.3/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.41.3 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["H","promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAIzB,EAA0B;AAC1B,IAAI,iBAAiB,CAACA,OAAC,CAAC,SAAS,CAAC;AAClC;AAIA,EAAE,MAAM,UAAU,GAAG,6PAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOC,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;AACD,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS;AAC1D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C;AACA,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;AACzC,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAClE;AACA;AACA;AACA,IAAI,OAAO,UAAU;AACrB,GAAG;AACH,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}
+{"version":3,"file":"beeq.cjs.js","sources":["../../node_modules/.pnpm/@stencil+core@4.42.0/node_modules/@stencil/core/internal/client/patch-browser.js","@lazy-browser-entrypoint?app-data=conditional"],"sourcesContent":["/*\n Stencil Client Patch Browser v4.42.0 | MIT Licensed | https://stenciljs.com\n */\n\n// src/client/client-patch-browser.ts\nimport { BUILD, NAMESPACE } from \"@stencil/core/internal/app-data\";\nimport { consoleDevInfo, H, promiseResolve, win } from \"@stencil/core\";\nvar patchBrowser = () => {\n  if (BUILD.isDev && !BUILD.isTesting) {\n    consoleDevInfo(\"Running in development mode.\");\n  }\n  if (BUILD.cloneNodeFix) {\n    patchCloneNodeFix(H.prototype);\n  }\n  const scriptElm = BUILD.scriptDataOpts ? win.document && Array.from(win.document.querySelectorAll(\"script\")).find(\n    (s) => new RegExp(`/${NAMESPACE}(\\\\.esm)?\\\\.js($|\\\\?|#)`).test(s.src) || s.getAttribute(\"data-stencil-namespace\") === NAMESPACE\n  ) : null;\n  const importMeta = import.meta.url;\n  const opts = BUILD.scriptDataOpts ? (scriptElm || {})[\"data-opts\"] || {} : {};\n  if (importMeta !== \"\") {\n    opts.resourcesUrl = new URL(\".\", importMeta).href;\n  }\n  return promiseResolve(opts);\n};\nvar patchCloneNodeFix = (HTMLElementPrototype) => {\n  const nativeCloneNodeFn = HTMLElementPrototype.cloneNode;\n  HTMLElementPrototype.cloneNode = function(deep) {\n    if (this.nodeName === \"TEMPLATE\") {\n      return nativeCloneNodeFn.call(this, deep);\n    }\n    const clonedNode = nativeCloneNodeFn.call(this, false);\n    const srcChildNodes = this.childNodes;\n    if (deep) {\n      for (let i = 0; i < srcChildNodes.length; i++) {\n        if (srcChildNodes[i].nodeType !== 2) {\n          clonedNode.appendChild(srcChildNodes[i].cloneNode(true));\n        }\n      }\n    }\n    return clonedNode;\n  };\n};\nexport {\n  patchBrowser\n};\n","export { setNonce } from '@stencil/core';\nimport { bootstrapLazy } from '@stencil/core';\nimport { patchBrowser } from '@stencil/core/internal/client/patch-browser';\nimport { globalScripts } from '@stencil/core/internal/app-globals';\npatchBrowser().then(async (options) => {\n  await globalScripts();\n  return bootstrapLazy([/*!__STENCIL_LAZY_DATA__*/], options);\n});\n"],"names":["H","promiseResolve","globalScripts","bootstrapLazy"],"mappings":";;;;;;;;;AAAA;AACA;AACA;;AAKA,IAAI,YAAY,GAAG,MAAM;AAIzB,EAA0B;AAC1B,IAAI,iBAAiB,CAACA,OAAC,CAAC,SAAS,CAAC;AAClC;AAIA,EAAE,MAAM,UAAU,GAAG,6PAAe;AACpC,EAAE,MAAM,IAAI,GAAiE,EAAE;AAC/E,EAAE,IAAI,UAAU,KAAK,EAAE,EAAE;AACzB,IAAI,IAAI,CAAC,YAAY,GAAG,IAAI,GAAG,CAAC,GAAG,EAAE,UAAU,CAAC,CAAC,IAAI;AACrD;AACA,EAAE,OAAOC,oBAAc,CAAC,IAAI,CAAC;AAC7B,CAAC;AACD,IAAI,iBAAiB,GAAG,CAAC,oBAAoB,KAAK;AAClD,EAAE,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,SAAS;AAC1D,EAAE,oBAAoB,CAAC,SAAS,GAAG,SAAS,IAAI,EAAE;AAClD,IAAI,IAAI,IAAI,CAAC,QAAQ,KAAK,UAAU,EAAE;AACtC,MAAM,OAAO,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,IAAI,CAAC;AAC/C;AACA,IAAI,MAAM,UAAU,GAAG,iBAAiB,CAAC,IAAI,CAAC,IAAI,EAAE,KAAK,CAAC;AAC1D,IAAI,MAAM,aAAa,GAAG,IAAI,CAAC,UAAU;AACzC,IAAI,IAAI,IAAI,EAAE;AACd,MAAM,KAAK,IAAI,CAAC,GAAG,CAAC,EAAE,CAAC,GAAG,aAAa,CAAC,MAAM,EAAE,CAAC,EAAE,EAAE;AACrD,QAAQ,IAAI,aAAa,CAAC,CAAC,CAAC,CAAC,QAAQ,KAAK,CAAC,EAAE;AAC7C,UAAU,UAAU,CAAC,WAAW,CAAC,aAAa,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;AAClE;AACA;AACA;AACA,IAAI,OAAO,UAAU;AACrB,GAAG;AACH,CAAC;;ACrCD,YAAY,EAAE,CAAC,IAAI,CAAC,OAAO,OAAO,KAAK;AACvC,EAAE,MAAMC,mBAAa,EAAE;AACvB,EAAE,OAAOC,mBAAa,CAAC,4BAA4B,EAAE,OAAO,CAAC;AAC7D,CAAC,CAAC;;;;","x_google_ignoreList":[0]}