@beeq/core 1.12.2-beta.0 → 1.12.3-beta.0

package/dist/collection/components/badge/bq-badge.js

@@ -2,8 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { jsx as _jsx } from "@stencil/core/jsx-runtime";
-import { Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { getColorCSSVariable, getTextContent, isNil, validatePropValue } from "../../shared/utils";
 import { BADGE_SIZE } from "./bq-badge.types";
 /**
@@ -120,14 +119,14 @@ export class BqBadge {
             ...(this.backgroundColor && { '--bq-badge--background-color': getColorCSSVariable(this.backgroundColor) }),
             ...(this.textColor && { '--bq-badge--text-color': getColorCSSVariable(this.textColor) }),
         };
-        return (_jsx(Host, { style: styles, children: _jsx("div", { class: {
-                    'bq-badge': true,
-                    [`size--${this.size}`]: this.contentLength === 0,
-                    digit: this.contentLength > 0,
-                    'p-i-xs2': this.contentLength > 1,
-                }, part: "base", children: _jsx("span", { class: "font-bold text-xs leading-small", part: "number", ref: (element) => {
-                        this.spanElement = element;
-                    }, children: _jsx("slot", { onSlotchange: this.handleSlotChange }, '8f9415c3553ffdbce2648fc51f2b13219f5f0e92') }, '48257204ed0e405e0285faed7fdbcfc71bf9d0a4') }, '0eff9208b94e6a95d4054df951b8a7ebef5ac875') }, '62aa0bc73e0bb039ef11fa654c0778ddebf9973e'));
+        return (h(Host, { key: '4d6b4653506d8b406226c839d96744f0960058be', style: styles }, h("div", { key: '7c025d136551f77a5ba224f322b4c4d547940514', class: {
+                'bq-badge': true,
+                [`size--${this.size}`]: this.contentLength === 0,
+                digit: this.contentLength > 0,
+                'p-i-xs2': this.contentLength > 1,
+            }, part: "base" }, h("span", { key: '25ec4c8b78a3bf191692da8d70d0c8a3d7765e16', class: "font-bold text-xs leading-small", part: "number", ref: (element) => {
+                this.spanElement = element;
+            } }, h("slot", { key: '900f53f255db157c50de876c4d43235b3c116d2b', onSlotchange: this.handleSlotChange })))));
     }
     static get is() { return "bq-badge"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/badge/bq-badge.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-badge.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/badge/bq-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { getColorCSSVariable, getTextContent, isNil, validatePropValue } from '../../shared/utils';\nimport type { TBadgeSize } from './bq-badge.types';\nimport { BADGE_SIZE } from './bq-badge.types';\n\n/**\n * The Badge component is a visual indicator that can be added to various elements within a user interface.\n * It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n *\n * @example How to use it\n * ```html\n * <bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/194fd1-badge\n * @status stable\n *\n * @attr {string} background-color - Badge background color. The value should be a valid value of the palette color.\n * @attr {string} text-color - Badge number color. The value should be a valid value of the palette color.\n * @attr {\"small\" | \"medium\" | \"large\"} size - The size of the badge. Relevant if badge has no content.\n *\n * @slot - The default slot is used to add content to the badge. The content can be a number or a text.\n *\n * @part base - The component's internal wrapper that holds the count.\n * @part number - The component's internal wrapper that holds the slot.\n *\n * @cssprop --bq-badge--background-color - The badge background color\n * @cssprop --bq-badge--box-shadow - The badge box shadow\n * @cssprop --bq-badge--border-color - The badge border color\n * @cssprop --bq-badge--border-radius - The badge border radius\n * @cssprop --bq-badge--border-style - The badge border style\n * @cssprop --bq-badge--border-width - The badge border width\n * @cssprop --bq-badge--size-small - The badge small size\n * @cssprop --bq-badge--size-medium - The badge medium size\n * @cssprop --bq-badge--size-large - The badge large size\n * @cssprop --bq-badge--text-color - The badge text color\n */\n@Component({\n  tag: 'bq-badge',\n  styleUrl: './scss/bq-badge.scss',\n  shadow: true,\n})\nexport class BqBadge {\n  // Own Properties\n  // ====================\n\n  private spanElement?: HTMLSpanElement;\n\n  private observer: MutationObserver = new MutationObserver((mutations) => {\n    const [mutation] = mutations;\n    this.contentLength = mutation.target.textContent.length;\n  });\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el: HTMLBqBadgeElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private contentLength = 0;\n\n  // Public Property API\n  // ========================\n\n  /** Badge background color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) backgroundColor?: string;\n\n  /** Badge number color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) textColor?: string;\n\n  /** The size of the badge. Relevant if badge has no content. */\n  @Prop({ reflect: true, mutable: true }) size?: TBadgeSize = 'small';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  handleSizePropChange() {\n    validatePropValue(BADGE_SIZE, 'small', this.el, 'size');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleSizePropChange();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    const slot = this.slot;\n\n    if (isNil(slot)) return;\n\n    this.contentLength = getTextContent(slot, { recurse: true }).length;\n    const [node] = slot.assignedNodes({ flatten: true });\n\n    if (isNil(node)) {\n      this.observer.takeRecords();\n      return;\n    }\n\n    this.observer.observe(node, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  private get slot(): HTMLSlotElement | null {\n    return this.spanElement?.querySelector('slot') ?? null;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.backgroundColor && { '--bq-badge--background-color': getColorCSSVariable(this.backgroundColor) }),\n      ...(this.textColor && { '--bq-badge--text-color': getColorCSSVariable(this.textColor) }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          class={{\n            'bq-badge': true,\n            [`size--${this.size}`]: this.contentLength === 0,\n            digit: this.contentLength > 0,\n            'p-i-xs2': this.contentLength > 1,\n          }}\n          part=\"base\"\n        >\n          <span\n            class=\"font-bold text-xs leading-small\"\n            part=\"number\"\n            ref={(element) => {\n              this.spanElement = element;\n            }}\n          >\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-badge.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/badge/bq-badge.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { getColorCSSVariable, getTextContent, isNil, validatePropValue } from '../../shared/utils';\nimport type { TBadgeSize } from './bq-badge.types';\nimport { BADGE_SIZE } from './bq-badge.types';\n\n/**\n * The Badge component is a visual indicator that can be added to various elements within a user interface.\n * It is typically used to highlight important or relevant information, such as alerts, notifications, or statuses.\n *\n * @example How to use it\n * ```html\n * <bq-badge background-color=\"ui--success\" text-color=\"text--inverse\" size=\"small\">9</bq-badge>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/194fd1-badge\n * @status stable\n *\n * @attr {string} background-color - Badge background color. The value should be a valid value of the palette color.\n * @attr {string} text-color - Badge number color. The value should be a valid value of the palette color.\n * @attr {\"small\" | \"medium\" | \"large\"} size - The size of the badge. Relevant if badge has no content.\n *\n * @slot - The default slot is used to add content to the badge. The content can be a number or a text.\n *\n * @part base - The component's internal wrapper that holds the count.\n * @part number - The component's internal wrapper that holds the slot.\n *\n * @cssprop --bq-badge--background-color - The badge background color\n * @cssprop --bq-badge--box-shadow - The badge box shadow\n * @cssprop --bq-badge--border-color - The badge border color\n * @cssprop --bq-badge--border-radius - The badge border radius\n * @cssprop --bq-badge--border-style - The badge border style\n * @cssprop --bq-badge--border-width - The badge border width\n * @cssprop --bq-badge--size-small - The badge small size\n * @cssprop --bq-badge--size-medium - The badge medium size\n * @cssprop --bq-badge--size-large - The badge large size\n * @cssprop --bq-badge--text-color - The badge text color\n */\n@Component({\n  tag: 'bq-badge',\n  styleUrl: './scss/bq-badge.scss',\n  shadow: true,\n})\nexport class BqBadge {\n  // Own Properties\n  // ====================\n\n  private spanElement?: HTMLSpanElement;\n\n  private observer: MutationObserver = new MutationObserver((mutations) => {\n    const [mutation] = mutations;\n    this.contentLength = mutation.target.textContent.length;\n  });\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el: HTMLBqBadgeElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private contentLength = 0;\n\n  // Public Property API\n  // ========================\n\n  /** Badge background color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) backgroundColor?: string;\n\n  /** Badge number color. The value should be a valid value of the palette color */\n  @Prop({ mutable: true, reflect: true }) textColor?: string;\n\n  /** The size of the badge. Relevant if badge has no content. */\n  @Prop({ reflect: true, mutable: true }) size?: TBadgeSize = 'small';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('size')\n  handleSizePropChange() {\n    validatePropValue(BADGE_SIZE, 'small', this.el, 'size');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.handleSizePropChange();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  disconnectedCallback() {\n    this.observer?.disconnect();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = () => {\n    const slot = this.slot;\n\n    if (isNil(slot)) return;\n\n    this.contentLength = getTextContent(slot, { recurse: true }).length;\n    const [node] = slot.assignedNodes({ flatten: true });\n\n    if (isNil(node)) {\n      this.observer.takeRecords();\n      return;\n    }\n\n    this.observer.observe(node, {\n      characterData: true,\n      childList: true,\n      subtree: true,\n    });\n  };\n\n  private get slot(): HTMLSlotElement | null {\n    return this.spanElement?.querySelector('slot') ?? null;\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const styles = {\n      ...(this.backgroundColor && { '--bq-badge--background-color': getColorCSSVariable(this.backgroundColor) }),\n      ...(this.textColor && { '--bq-badge--text-color': getColorCSSVariable(this.textColor) }),\n    };\n\n    return (\n      <Host style={styles}>\n        <div\n          class={{\n            'bq-badge': true,\n            [`size--${this.size}`]: this.contentLength === 0,\n            digit: this.contentLength > 0,\n            'p-i-xs2': this.contentLength > 1,\n          }}\n          part=\"base\"\n        >\n          <span\n            class=\"font-bold text-xs leading-small\"\n            part=\"number\"\n            ref={(element) => {\n              this.spanElement = element;\n            }}\n          >\n            <slot onSlotchange={this.handleSlotChange}></slot>\n          </span>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb/bq-breadcrumb.js

@@ -2,8 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "@stencil/core/jsx-runtime";
-import { Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 /**
  * The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.
  *
@@ -98,11 +97,11 @@ export class BqBreadcrumb {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (_jsxs(Host, { children: [_jsx("nav", { "aria-label": this.label, class: "flex items-center", part: "navigation", ref: (elem) => {
-                        this.navElem = elem;
-                    }, children: _jsx("slot", { onSlotchange: this.handleSlotChange }, '281a873e92e56f97049616ee82a63adc78e5578f') }, '35030be4b40c56abee812d15558262d7eb15f3ab'), _jsx("span", { "aria-hidden": "true", hidden: true, part: "separator", ref: (element) => {
-                        this.spanElem = element;
-                    }, children: _jsx("slot", { name: "separator", children: _jsx("span", { class: "is-3 flex items-center justify-center", children: "/" }, '79fa0d26e937fb87f472be5cf9613cac662c3b79') }, '44a3585aad5e83b2fa7ff338702b2e7596990bcc') }, 'f72776ca0dce58151bef2b8263d8684828da11c6')] }, '1005d042790614a9ca0ae38d05e93f128193aa0a'));
+        return (h(Host, { key: 'aae87cc8b4a6faf6fd4f98ecd3a417332f0b11a5' }, h("nav", { key: 'eeebb3ae723f6ec75ea707109c8e80eec8a96fd8', "aria-label": this.label, class: "flex items-center", part: "navigation", ref: (elem) => {
+                this.navElem = elem;
+            } }, h("slot", { key: '733199ba2016771d7ef4f6b4dfafd7934cc25f60', onSlotchange: this.handleSlotChange })), h("span", { key: '16bc244633fba3223f7e3e62105b00b0d0d992a9', "aria-hidden": "true", hidden: true, part: "separator", ref: (element) => {
+                this.spanElem = element;
+            } }, h("slot", { key: 'ded02598143fef6596e929c1f0b12c5aa8a9e346', name: "separator" }, h("span", { key: '13bbd7d815f75140665e09519283945ed38227c6', class: "is-3 flex items-center justify-center" }, "/")))));
     }
     static get is() { return "bq-breadcrumb"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb/bq-breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-breadcrumb.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/breadcrumb/bq-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, Prop } from '@stencil/core';\n\n/**\n * The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n *\n * @example How to use it\n * ```html\n * <bq-breadcrumb label=\"Breadcrumb\">\n *   <bq-breadcrumb-item>Home</bq-breadcrumb-item>\n *   <bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n *   <bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n *   <bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n * </bq-breadcrumb>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/194fd1-breadcrumb\n * @status stable\n *\n * @attr {string} label - The `aria-label` attribute to describe the type of navigation\n *\n * @slot - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n * @slot separator - The slot to add a separator between breadcrumb items. Default separator is `/`.\n *\n * @part navigation - The `nav` tag that loads the breadcrumb items\n * @part separator - The container that wraps the separator element\n */\n@Component({\n  tag: 'bq-breadcrumb',\n  styleUrl: './scss/bq-breadcrumb.scss',\n  shadow: true,\n})\nexport class BqBreadcrumb {\n  // Own Properties\n  // ====================\n\n  private navElem: HTMLElement;\n  private spanElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqBreadcrumbElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** The `aria-label` attribute to describe the type of navigation */\n  @Prop({ reflect: true }) label: string = 'Breadcrumbs';\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = (): void => {\n    const breadcrumbItems = this.breadcrumbItems;\n    const itemCount = breadcrumbItems.length;\n    const separatorElem = this.getSeparatorElem();\n\n    breadcrumbItems.forEach((item, index) => {\n      const isLastItem = index === itemCount - 1;\n      const separatorSlot = item.querySelector('[slot=\"separator\"]');\n\n      if (!separatorSlot && !isLastItem) {\n        item.append(separatorElem.cloneNode(true));\n      }\n\n      item.setAttribute('aria-current', isLastItem ? 'page' : '');\n    });\n  };\n\n  private getSeparatorElem = (): HTMLElement => {\n    const clone = this.separatorFromSlot.cloneNode(true) as HTMLElement;\n    clone.slot = 'separator';\n\n    return clone;\n  };\n\n  private get separatorFromSlot() {\n    return this.spanElem\n      .querySelector<HTMLSlotElement>('slot[name=\"separator\"]')\n      .assignedElements({ flatten: true })[0] as HTMLElement;\n  }\n\n  private get breadcrumbItems(): HTMLBqBreadcrumbItemElement[] {\n    return this.navElem\n      .querySelector<HTMLSlotElement>('slot')\n      .assignedElements({ flatten: true }) as HTMLBqBreadcrumbItemElement[];\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host>\n        <nav\n          aria-label={this.label}\n          class=\"flex items-center\"\n          part=\"navigation\"\n          ref={(elem) => {\n            this.navElem = elem;\n          }}\n        >\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </nav>\n        <span\n          aria-hidden=\"true\"\n          hidden\n          part=\"separator\"\n          ref={(element) => {\n            this.spanElem = element;\n          }}\n        >\n          <slot name=\"separator\">\n            <span class=\"is-3 flex items-center justify-center\">/</span>\n          </slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-breadcrumb.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/breadcrumb/bq-breadcrumb.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, Host, h, Prop } from '@stencil/core';\n\n/**\n * The Breadcrumb is used to wraps a series of breadcrumb items to indicate the current page's location within a navigational hierarchy.\n *\n * @example How to use it\n * ```html\n * <bq-breadcrumb label=\"Breadcrumb\">\n *   <bq-breadcrumb-item>Home</bq-breadcrumb-item>\n *   <bq-breadcrumb-item>Men's clothing</bq-breadcrumb-item>\n *   <bq-breadcrumb-item>Shirt</bq-breadcrumb-item>\n *   <bq-breadcrumb-item>Casual shirts</bq-breadcrumb-item>\n * </bq-breadcrumb>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/194fd1-breadcrumb\n * @status stable\n *\n * @attr {string} label - The `aria-label` attribute to describe the type of navigation\n *\n * @slot - The default slot is used to add `bq-breadcrumb-item` items to the breadcrumb.\n * @slot separator - The slot to add a separator between breadcrumb items. Default separator is `/`.\n *\n * @part navigation - The `nav` tag that loads the breadcrumb items\n * @part separator - The container that wraps the separator element\n */\n@Component({\n  tag: 'bq-breadcrumb',\n  styleUrl: './scss/bq-breadcrumb.scss',\n  shadow: true,\n})\nexport class BqBreadcrumb {\n  // Own Properties\n  // ====================\n\n  private navElem: HTMLElement;\n  private spanElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqBreadcrumbElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** The `aria-label` attribute to describe the type of navigation */\n  @Prop({ reflect: true }) label: string = 'Breadcrumbs';\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleSlotChange = (): void => {\n    const breadcrumbItems = this.breadcrumbItems;\n    const itemCount = breadcrumbItems.length;\n    const separatorElem = this.getSeparatorElem();\n\n    breadcrumbItems.forEach((item, index) => {\n      const isLastItem = index === itemCount - 1;\n      const separatorSlot = item.querySelector('[slot=\"separator\"]');\n\n      if (!separatorSlot && !isLastItem) {\n        item.append(separatorElem.cloneNode(true));\n      }\n\n      item.setAttribute('aria-current', isLastItem ? 'page' : '');\n    });\n  };\n\n  private getSeparatorElem = (): HTMLElement => {\n    const clone = this.separatorFromSlot.cloneNode(true) as HTMLElement;\n    clone.slot = 'separator';\n\n    return clone;\n  };\n\n  private get separatorFromSlot() {\n    return this.spanElem\n      .querySelector<HTMLSlotElement>('slot[name=\"separator\"]')\n      .assignedElements({ flatten: true })[0] as HTMLElement;\n  }\n\n  private get breadcrumbItems(): HTMLBqBreadcrumbItemElement[] {\n    return this.navElem\n      .querySelector<HTMLSlotElement>('slot')\n      .assignedElements({ flatten: true }) as HTMLBqBreadcrumbItemElement[];\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <Host>\n        <nav\n          aria-label={this.label}\n          class=\"flex items-center\"\n          part=\"navigation\"\n          ref={(elem) => {\n            this.navElem = elem;\n          }}\n        >\n          <slot onSlotchange={this.handleSlotChange}></slot>\n        </nav>\n        <span\n          aria-hidden=\"true\"\n          hidden\n          part=\"separator\"\n          ref={(element) => {\n            this.spanElem = element;\n          }}\n        >\n          <slot name=\"separator\">\n            <span class=\"is-3 flex items-center justify-center\">/</span>\n          </slot>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/breadcrumb-item/bq-breadcrumb-item.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "@stencil/core/jsx-runtime";
+import { h } from "@stencil/core";
 import { isDefined } from "../../shared/utils";
 /**
  * The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.
@@ -108,7 +108,7 @@ export class BqBreadcrumbItem {
     render() {
         const isLink = isDefined(this.href);
         const TagElem = isLink ? 'a' : 'button';
-        return (_jsxs("div", { class: "flex items-center", part: "base", children: [_jsx(TagElem, { class: "breadcrumb-item", href: isLink ? this.href : undefined, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, part: "item", rel: isLink && this.target ? 'noreferrer noopener' : undefined, target: isLink ? this.target : undefined, children: _jsx("span", { class: "flex items-center gap-xs2", part: "content", children: _jsx("slot", {}, 'c0040b5ef53400e89776184c3c39b04604654d9b') }, '6d1cb5c7269db437675589c170a89a22a59c25bd') }, 'd2a03460d88c78d9765316169860d0f29d634a86'), _jsx("span", { class: "breadcrumb-separator", part: "separator", children: _jsx("slot", { name: "separator" }, '0ee412fee8256011c04df8f2906beb8696e22810') }, '9f698e839e864a1ce3f97dcc5462d768b532b337')] }, '1414ecc049740b809bcf383e8405e04da71f2b63'));
+        return (h("div", { key: '76b21263852564dd2819baa47f0ea6bd0cecaaba', class: "flex items-center", part: "base" }, h(TagElem, { key: '57fe9fc084c3b04eb3c64241987811b1f6f032da', class: "breadcrumb-item", href: isLink ? this.href : undefined, onBlur: this.onBlur, onClick: this.onClick, onFocus: this.onFocus, part: "item", rel: isLink && this.target ? 'noreferrer noopener' : undefined, target: isLink ? this.target : undefined }, h("span", { key: 'fb853379089aa81a865557b9d76a4ee42a864e36', class: "flex items-center gap-xs2", part: "content" }, h("slot", { key: 'd447ccd4592702202a53cb9aecc6bcd0ce0eddf1' }))), h("span", { key: 'eecbe1bca281af57f5fa604f9ab7282078ecefeb', class: "breadcrumb-separator", part: "separator" }, h("slot", { key: '4c016aecf135483b32fb879bc0625e8955a9f4eb', name: "separator" }))));
     }
     static get is() { return "bq-breadcrumb-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/breadcrumb-item/bq-breadcrumb-item.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-breadcrumb-item.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/breadcrumb-item/bq-breadcrumb-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, Prop } from '@stencil/core';\n\nimport { isDefined } from '../../shared/utils';\n\n/**\n * The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n *\n * @example How to use it\n * ```html\n * <bq-breadcrumb-item label=\"Home page\">\n *   <bq-icon name=\"house-line\" size=\"16\"></bq-icon>\n *   Home\n * </bq-breadcrumb-item>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/61d6c0-breadcrumb\n * @status stable\n *\n * @attr {string} href - If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.\n * @attr {string} target - Where to display the link in the browser context. Relevant only if `href` is set.\n * @attr {string} rel - Where to display the link in the browser context. Relevant only if `href` is set.\n *\n * @event bqFocus - Handler to be called when item is focused\n * @event bqClick - Handler to be called when item is clicked\n * @event bqBlur - Handler to be called when item loses focus\n *\n * @slot - The default slot is used to add content to the breadcrumb item.\n *\n * @part base - The component wrapper container\n * @part content - The `span` tag that wraps the content item\n * @part item - The breadcrumb item wrapper (`button` or `a`)\n * @part separator - The `span` tag that wraps the separator element\n *\n * @cssprop --bq-breadcrumb-item--background - Background color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--box-shadow - Box shadow of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-color - Border color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-style - Border style of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-width - Border width of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-radius - Border radius of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--line-height - Line height of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color - Text color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color-current - Text color of the current breadcrumb item (active)\n * @cssprop --bq-breadcrumb-item--text-size - Text size of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-size-separator - Text size of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-start - Padding start of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-end - Padding end of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--paddingY - Padding top and bottom of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-start-separator - Padding start of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-end-separator - Padding end of the breadcrumb item separator\n */\n@Component({\n  tag: 'bq-breadcrumb-item',\n  styleUrl: './scss/bq-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BqBreadcrumbItem {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqBreadcrumbItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Where to display the link in the browser context. Relevant only if `href` is set. */\n  @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Where to display the link in the browser context. Relevant only if `href` is set. */\n  @Prop({ reflect: true }) rel: string = 'noreferrer noopener';\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when item loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  /** Handler to be called when item is focused */\n  @Event() bqFocus: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  /** Handler to be called when item is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private onBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private onFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private onClick = () => {\n    this.bqClick.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n\n    return (\n      <div class=\"flex items-center\" part=\"base\">\n        <TagElem\n          class=\"breadcrumb-item\"\n          href={isLink ? this.href : undefined}\n          onBlur={this.onBlur}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          part=\"item\"\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          target={isLink ? this.target : undefined}\n        >\n          <span class=\"flex items-center gap-xs2\" part=\"content\">\n            <slot></slot>\n          </span>\n        </TagElem>\n        {/* @internal use only */}\n        <span class=\"breadcrumb-separator\" part=\"separator\">\n          <slot name=\"separator\"></slot>\n        </span>\n      </div>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-breadcrumb-item.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/breadcrumb-item/bq-breadcrumb-item.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, h, Prop } from '@stencil/core';\n\nimport { isDefined } from '../../shared/utils';\n\n/**\n * The Breadcrumb Item helps users understand their current location within a website or application's hierarchical structure.\n *\n * @example How to use it\n * ```html\n * <bq-breadcrumb-item label=\"Home page\">\n *   <bq-icon name=\"house-line\" size=\"16\"></bq-icon>\n *   Home\n * </bq-breadcrumb-item>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/61d6c0-breadcrumb\n * @status stable\n *\n * @attr {string} href - If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered.\n * @attr {string} target - Where to display the link in the browser context. Relevant only if `href` is set.\n * @attr {string} rel - Where to display the link in the browser context. Relevant only if `href` is set.\n *\n * @event bqFocus - Handler to be called when item is focused\n * @event bqClick - Handler to be called when item is clicked\n * @event bqBlur - Handler to be called when item loses focus\n *\n * @slot - The default slot is used to add content to the breadcrumb item.\n *\n * @part base - The component wrapper container\n * @part content - The `span` tag that wraps the content item\n * @part item - The breadcrumb item wrapper (`button` or `a`)\n * @part separator - The `span` tag that wraps the separator element\n *\n * @cssprop --bq-breadcrumb-item--background - Background color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--box-shadow - Box shadow of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-color - Border color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-style - Border style of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-width - Border width of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--border-radius - Border radius of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--line-height - Line height of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color - Text color of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-color-current - Text color of the current breadcrumb item (active)\n * @cssprop --bq-breadcrumb-item--text-size - Text size of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--text-size-separator - Text size of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-start - Padding start of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-end - Padding end of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--paddingY - Padding top and bottom of the breadcrumb item\n * @cssprop --bq-breadcrumb-item--padding-start-separator - Padding start of the breadcrumb item separator\n * @cssprop --bq-breadcrumb-item--padding-end-separator - Padding end of the breadcrumb item separator\n */\n@Component({\n  tag: 'bq-breadcrumb-item',\n  styleUrl: './scss/bq-breadcrumb-item.scss',\n  shadow: true,\n})\nexport class BqBreadcrumbItem {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqBreadcrumbItemElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If set, the breadcrumb item will be rendered as an `<a>` with this `href`, otherwise, a `<button>` will be rendered. */\n  @Prop({ reflect: true }) href: string;\n\n  /** Where to display the link in the browser context. Relevant only if `href` is set. */\n  @Prop({ reflect: true }) target: '_blank' | '_parent' | '_self' | '_top';\n\n  /** Where to display the link in the browser context. Relevant only if `href` is set. */\n  @Prop({ reflect: true }) rel: string = 'noreferrer noopener';\n\n  // Prop lifecycle events\n  // =======================\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when item loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  /** Handler to be called when item is focused */\n  @Event() bqFocus: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  /** Handler to be called when item is clicked */\n  @Event() bqClick: EventEmitter<HTMLBqBreadcrumbItemElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private onBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private onFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private onClick = () => {\n    this.bqClick.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n\n    return (\n      <div class=\"flex items-center\" part=\"base\">\n        <TagElem\n          class=\"breadcrumb-item\"\n          href={isLink ? this.href : undefined}\n          onBlur={this.onBlur}\n          onClick={this.onClick}\n          onFocus={this.onFocus}\n          part=\"item\"\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          target={isLink ? this.target : undefined}\n        >\n          <span class=\"flex items-center gap-xs2\" part=\"content\">\n            <slot></slot>\n          </span>\n        </TagElem>\n        {/* @internal use only */}\n        <span class=\"breadcrumb-separator\" part=\"separator\">\n          <slot name=\"separator\"></slot>\n        </span>\n      </div>\n    );\n  }\n}\n"]}

package/dist/collection/components/button/bq-button.js

@@ -2,8 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "@stencil/core/jsx-runtime";
-import { Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from "../../shared/utils";
 import { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from "./bq-button.types";
 /**
@@ -216,23 +215,23 @@ export class BqButton {
         const style = {
             ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),
         };
-        return (_jsx(Host, { style: style, children: _jsxs(TagElem, { "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label ?? undefined, class: {
-                    'bq-button': true,
-                    [`bq-button--${this.appearance}`]: true,
-                    [`content-${this.justifyContent}`]: true,
-                    [`${this.variant}`]: true,
-                    [`${this.size}`]: true,
-                    block: this.block,
-                    disabled: this.disabled,
-                    'has-prefix': this.hasPrefix,
-                    'has-suffix': this.hasSuffix,
-                    loading: this.loading,
-                    'only-icon': this.onlyIcon,
-                }, disabled: this.disabled, download: isLink ? this.download : undefined, href: isLink ? this.href : undefined, onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, part: "button", rel: isLink && this.target ? 'noreferrer noopener' : undefined, tabIndex: this.disabled ? -1 : 0, target: isLink ? this.target : undefined, type: this.type, children: [_jsx("span", { class: "bq-button__prefix", part: "prefix", ref: (spanElem) => {
-                            this.prefixElem = spanElem;
-                        }, children: _jsx("slot", { name: "prefix", onSlotchange: this.handleSlotChange }, '55575b413c59f9499932490fb3ee2551ff709bce') }, '5f1f85af3d7e96b2114174c9081edab4d694f809'), _jsx("span", { class: "bq-button__label", part: "label", children: _jsx("slot", {}, '7d9a81d3372e34d3830f5e13b1cecdfe72cc6a63') }, 'fb1d5752b5c6ea83ef03e7dfafae09d62b773bb8'), _jsx("span", { class: "bq-button__suffix", part: "suffix", ref: (spanElem) => {
-                            this.suffixElem = spanElem;
-                        }, children: _jsx("slot", { name: "suffix", onSlotchange: this.handleSlotChange }, '671f87b0a668528881ac47476a4a8730487ee56c') }, '9d6f8f7e8059227149234299e00f353982db3212'), this.loading && _jsx("bq-icon", { class: "bq-button__loader", name: "spinner-gap" }, 'd7ab32aba962018d2584f35c45bb2675c565695c')] }, 'b3c2855e63f79457f88123a21b71e13490bc6f13') }, '112ba618a14a84e57dd17427422b6088b518d6c1'));
+        return (h(Host, { key: '59aa5d609765eb449a0c880b51e9047d846c1d39', style: style }, h(TagElem, { key: 'a41c8a26f4baabc52c6baff2d36a6080949a0b9a', "aria-disabled": this.disabled ? 'true' : 'false', "aria-label": this.label ?? undefined, class: {
+                'bq-button': true,
+                [`bq-button--${this.appearance}`]: true,
+                [`content-${this.justifyContent}`]: true,
+                [`${this.variant}`]: true,
+                [`${this.size}`]: true,
+                block: this.block,
+                disabled: this.disabled,
+                'has-prefix': this.hasPrefix,
+                'has-suffix': this.hasSuffix,
+                loading: this.loading,
+                'only-icon': this.onlyIcon,
+            }, disabled: this.disabled, download: isLink ? this.download : undefined, href: isLink ? this.href : undefined, onBlur: this.handleBlur, onClick: this.handleClick, onFocus: this.handleFocus, part: "button", rel: isLink && this.target ? 'noreferrer noopener' : undefined, tabIndex: this.disabled ? -1 : 0, target: isLink ? this.target : undefined, type: this.type }, h("span", { key: 'a371c05dfb53e89de6baccf7f32c266392f39e78', class: "bq-button__prefix", part: "prefix", ref: (spanElem) => {
+                this.prefixElem = spanElem;
+            } }, h("slot", { key: '14d062855f2a5e6b5314402c450a251bcec63f56', name: "prefix", onSlotchange: this.handleSlotChange })), h("span", { key: 'eddde84e0d66e759ddae018f1d2593e88dd14962', class: "bq-button__label", part: "label" }, h("slot", { key: 'e311be1ac0f20eda0fea376953efd4dd44e2ce1d' })), h("span", { key: 'cc3e13436975f93402ee230b654bbaa85aeec8ce', class: "bq-button__suffix", part: "suffix", ref: (spanElem) => {
+                this.suffixElem = spanElem;
+            } }, h("slot", { key: '211a86e553a17b1985175375fc22c87b409d5fe2', name: "suffix", onSlotchange: this.handleSlotChange })), this.loading && h("bq-icon", { key: '5684d748b4ccdf7731e98cd1e67f8233bf96383f', class: "bq-button__loader", name: "spinner-gap" }))));
     }
     static get is() { return "bq-button"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/button/bq-button.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-button.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/button/bq-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, Prop, State, Watch } from '@stencil/core';\n\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\nimport type {\n  TButtonAppearance,\n  TButtonBorderRadius,\n  TButtonSize,\n  TButtonType,\n  TButtonVariant,\n} from './bq-button.types';\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\n\n/**\n * Buttons are designed for users to take action on a page or a screen.\n *\n * @example How to use it\n * ```html\n * <bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n *   <bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\n *   Go back\n * </bq-button>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/286b43-buttons\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {\"primary\" | \"secondary\" | \"link\" | \"text\"} appearance - The appearance style to apply to the button\n * @attr {boolean} block - If `true`, it will make the button fit to its parent width.\n * @attr {string} border - The corner radius of the button\n * @attr {boolean} disabled - If `true`, the button will be disabled (no interaction allowed)\n * @attr {string} download - Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`\n * @attr {\"left\" | \"center\" | \"right\"} justify-content - It determinate how the content should be aligned\n * @attr {boolean} loading - If `true` it will display the button in a loading state\n * @attr {boolean} only-icon - If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions)\n * @attr {\"small\" | \"medium\" | \"large\"} size - The size of the button\n * @attr {\"_blank\" | \"_parent\" | \"_self\" | \"_top\"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * @attr {\"button\" | \"submit\" | \"reset\"} type - The default behavior of the button\n * @attr {\"standard\" | \"ghost\" | \"danger\"} variant - The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`)\n *\n * @event bqBlur - Handler to be called when the button loses focus\n * @event bqFocus - Handler to be called when button gets focus\n * @event bqClick - Handler to be called when the button is clicked\n *\n * @slot prefix - The prefix content to be displayed before the button label\n * @slot - The button label content\n * @slot suffix - The suffix content to be displayed after the button label\n *\n * @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n *\n * @cssprop --bq-button--border-color - Button border color\n * @cssprop --bq-button--border-radius - Button border radius\n * @cssprop --bq-button--border-style - Button border style\n * @cssprop --bq-button--border-width - Button border width\n * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)\n * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)\n * @cssprop --bq-button--small-font-size - Button small font size\n * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)\n * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)\n * @cssprop --bq-button--medium-font-size - Button medium font size\n * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)\n * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)\n * @cssprop --bq-button--large-font-size - Button large font size\n */\n@Component({\n  tag: 'bq-button',\n  styleUrl: './scss/bq-button.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqButton {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n  private suffixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqButtonElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style to apply to the button */\n  @Prop({ reflect: true }) appearance?: TButtonAppearance = 'primary';\n\n  /** If `true`, it will make the button fit to its parent width. */\n  @Prop({ reflect: true }) block?: boolean = false;\n\n  /** The corner radius of the button */\n  @Prop({ reflect: true }) border?: TButtonBorderRadius = 'm';\n\n  /** If true, the button will be disabled (no interaction allowed) */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n   */\n  @Prop() download?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` */\n  @Prop({ reflect: true }) href?: string;\n\n  /** It determinate how the content should be aligned */\n  @Prop({ reflect: true }) justifyContent?: 'left' | 'center' | 'right' = 'center';\n\n  /** Text  used for accessibility purposes, specially screen readers, to describe the button action */\n  @Prop({ reflect: true }) label?: string;\n\n  /** If `true` it will display the button in a loading state */\n  @Prop() loading?: boolean = false;\n\n  /** If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions). Make sure to set the `label` prop for accessibility purposes. */\n  @Prop() onlyIcon?: boolean = false;\n\n  /** The size of the button */\n  @Prop({ reflect: true }) size?: TButtonSize = 'medium';\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n   */\n  @Prop({ reflect: true }) target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The default behavior of the button */\n  @Prop({ reflect: true }) type?: TButtonType = 'button';\n\n  /** The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) */\n  @Prop({ reflect: true }) variant?: TButtonVariant = 'standard';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('appearance')\n  @Watch('type')\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n    validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n    validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n    validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n  }\n\n  @Watch('onlyIcon')\n  handleOnlyIconPropChange() {\n    if (!this.onlyIcon || !isNil(this.label)) return;\n\n    console.warn(\n      '⚠️ [BqButton]: When using `only-icon` attribute (`onlyIcon` prop), it is required to set the `label` prop for accessibility reasons.',\n    );\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus. */\n  @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button gets focus. */\n  @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button is clicked. */\n  @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n    this.handleOnlyIconPropChange();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleClick = (ev: Event) => {\n    const { disabled, loading, bqClick, el } = this;\n\n    if (disabled || loading) {\n      this.preventEvent(ev);\n      return;\n    }\n\n    const bqClickEvent = bqClick.emit(el);\n    if (bqClickEvent.defaultPrevented) {\n      this.preventEvent(ev);\n      return;\n    }\n\n    this.handleFormAction();\n  };\n\n  private handleFormAction() {\n    const {\n      type,\n      internals: { form },\n    } = this;\n    if (isNil(form)) return;\n\n    const formAction = this.formActions(form)[type];\n    if (isNil(formAction)) return;\n\n    formAction();\n  }\n\n  private formActions = (form: HTMLFormElement) => ({\n    submit: () => this.submitAssociatedForm(form),\n    reset: () => form.reset(),\n  });\n\n  private submitAssociatedForm = (form: HTMLFormElement) => {\n    if (!isClient() || isNil(form)) return;\n\n    const btn = document.createElement('button');\n    btn.type = this.type;\n    btn.hidden = true;\n    form.append(btn);\n\n    btn.click();\n    btn.remove();\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  private preventEvent(ev: Event) {\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n    const style = {\n      ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host style={style}>\n        <TagElem\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-label={this.label ?? undefined}\n          class={{\n            'bq-button': true,\n            [`bq-button--${this.appearance}`]: true,\n            [`content-${this.justifyContent}`]: true,\n            [`${this.variant}`]: true,\n            [`${this.size}`]: true,\n            block: this.block,\n            disabled: this.disabled,\n            'has-prefix': this.hasPrefix,\n            'has-suffix': this.hasSuffix,\n            loading: this.loading,\n            'only-icon': this.onlyIcon,\n          }}\n          disabled={this.disabled}\n          download={isLink ? this.download : undefined}\n          href={isLink ? this.href : undefined}\n          onBlur={this.handleBlur}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          part=\"button\"\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          tabIndex={this.disabled ? -1 : 0}\n          target={isLink ? this.target : undefined}\n          type={this.type}\n        >\n          <span\n            class=\"bq-button__prefix\"\n            part=\"prefix\"\n            ref={(spanElem) => {\n              this.prefixElem = spanElem;\n            }}\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span class=\"bq-button__label\" part=\"label\">\n            <slot />\n          </span>\n          <span\n            class=\"bq-button__suffix\"\n            part=\"suffix\"\n            ref={(spanElem) => {\n              this.suffixElem = spanElem;\n            }}\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n        </TagElem>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-button.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/button/bq-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Host, h, Prop, State, Watch } from '@stencil/core';\n\nimport { hasSlotContent, isClient, isDefined, isNil, validatePropValue } from '../../shared/utils';\nimport type {\n  TButtonAppearance,\n  TButtonBorderRadius,\n  TButtonSize,\n  TButtonType,\n  TButtonVariant,\n} from './bq-button.types';\nimport { BUTTON_APPEARANCE, BUTTON_SIZE, BUTTON_TYPE, BUTTON_VARIANT } from './bq-button.types';\n\n/**\n * Buttons are designed for users to take action on a page or a screen.\n *\n * @example How to use it\n * ```html\n * <bq-button appearance=\"primary\" border=\"m\" size=\"medium\">\n *   <bq-icon name=\"arrow-circle-left\" slot=\"prefix\"></bq-icon>\n *   Go back\n * </bq-button>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/286b43-buttons\n * @status stable\n *\n * @dependency bq-icon\n *\n * @attr {\"primary\" | \"secondary\" | \"link\" | \"text\"} appearance - The appearance style to apply to the button\n * @attr {boolean} block - If `true`, it will make the button fit to its parent width.\n * @attr {string} border - The corner radius of the button\n * @attr {boolean} disabled - If `true`, the button will be disabled (no interaction allowed)\n * @attr {string} download - Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n * @attr {string} href - When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`\n * @attr {\"left\" | \"center\" | \"right\"} justify-content - It determinate how the content should be aligned\n * @attr {boolean} loading - If `true` it will display the button in a loading state\n * @attr {boolean} only-icon - If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions)\n * @attr {\"small\" | \"medium\" | \"large\"} size - The size of the button\n * @attr {\"_blank\" | \"_parent\" | \"_self\" | \"_top\"} target - Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n * @attr {\"button\" | \"submit\" | \"reset\"} type - The default behavior of the button\n * @attr {\"standard\" | \"ghost\" | \"danger\"} variant - The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`)\n *\n * @event bqBlur - Handler to be called when the button loses focus\n * @event bqFocus - Handler to be called when button gets focus\n * @event bqClick - Handler to be called when the button is clicked\n *\n * @slot prefix - The prefix content to be displayed before the button label\n * @slot - The button label content\n * @slot suffix - The suffix content to be displayed after the button label\n *\n * @part button - The `<a>` or `<button>` HTML element used under the hood.\n * @part prefix - The `<span>` tag element that acts as prefix container.\n * @part label - The `<span>` tag element that renders the text of the button.\n * @part suffix - The `<span>` tag element that acts as suffix container.\n *\n * @cssprop --bq-button--border-color - Button border color\n * @cssprop --bq-button--border-radius - Button border radius\n * @cssprop --bq-button--border-style - Button border style\n * @cssprop --bq-button--border-width - Button border width\n * @cssprop --bq-button--small-paddingX - Button small padding block (top and bottom)\n * @cssprop --bq-button--small-paddingY - Button small padding inline (left and right)\n * @cssprop --bq-button--small-font-size - Button small font size\n * @cssprop --bq-button--medium-paddingX - Button medium padding block (top and bottom)\n * @cssprop --bq-button--medium-paddingY - Button medium padding inline (left and right)\n * @cssprop --bq-button--medium-font-size - Button medium font size\n * @cssprop --bq-button--large-paddingX - Button large padding block (top and bottom)\n * @cssprop --bq-button--large-paddingY - Button large padding inline (left and right)\n * @cssprop --bq-button--large-font-size - Button large font size\n */\n@Component({\n  tag: 'bq-button',\n  styleUrl: './scss/bq-button.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqButton {\n  // Own Properties\n  // ====================\n\n  private prefixElem: HTMLElement;\n  private suffixElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqButtonElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  @State() private hasPrefix = false;\n  @State() private hasSuffix = false;\n\n  // Public Property API\n  // ========================\n\n  /** The appearance style to apply to the button */\n  @Prop({ reflect: true }) appearance?: TButtonAppearance = 'primary';\n\n  /** If `true`, it will make the button fit to its parent width. */\n  @Prop({ reflect: true }) block?: boolean = false;\n\n  /** The corner radius of the button */\n  @Prop({ reflect: true }) border?: TButtonBorderRadius = 'm';\n\n  /** If true, the button will be disabled (no interaction allowed) */\n  @Prop() disabled?: boolean = false;\n\n  /**\n   * Tells the browser to treat the linked URL as a download. Only used when `href` is set.\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download\n   */\n  @Prop() download?: string;\n\n  /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>` */\n  @Prop({ reflect: true }) href?: string;\n\n  /** It determinate how the content should be aligned */\n  @Prop({ reflect: true }) justifyContent?: 'left' | 'center' | 'right' = 'center';\n\n  /** Text  used for accessibility purposes, specially screen readers, to describe the button action */\n  @Prop({ reflect: true }) label?: string;\n\n  /** If `true` it will display the button in a loading state */\n  @Prop() loading?: boolean = false;\n\n  /** If `true` it will display the button as an icon-only button with aspect ratio 1:1 (square dimensions). Make sure to set the `label` prop for accessibility purposes. */\n  @Prop() onlyIcon?: boolean = false;\n\n  /** The size of the button */\n  @Prop({ reflect: true }) size?: TButtonSize = 'medium';\n\n  /**\n   * Where to display the linked URL, as the name for a browsing context (a `tab`, `window`, or `<iframe>`)\n   * Details: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-target\n   */\n  @Prop({ reflect: true }) target?: '_blank' | '_parent' | '_self' | '_top';\n\n  /** The default behavior of the button */\n  @Prop({ reflect: true }) type?: TButtonType = 'button';\n\n  /** The variant of button to apply on top of the appearance (applicable only to `appearance=\"primary\"`) */\n  @Prop({ reflect: true }) variant?: TButtonVariant = 'standard';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('appearance')\n  @Watch('type')\n  @Watch('size')\n  @Watch('variant')\n  checkPropValues() {\n    validatePropValue(BUTTON_APPEARANCE, 'primary', this.el, 'appearance');\n    validatePropValue(BUTTON_TYPE, 'button', this.el, 'type');\n    validatePropValue(BUTTON_SIZE, 'medium', this.el, 'size');\n    validatePropValue(BUTTON_VARIANT, 'standard', this.el, 'variant');\n  }\n\n  @Watch('onlyIcon')\n  handleOnlyIconPropChange() {\n    if (!this.onlyIcon || !isNil(this.label)) return;\n\n    console.warn(\n      '⚠️ [BqButton]: When using `only-icon` attribute (`onlyIcon` prop), it is required to set the `label` prop for accessibility reasons.',\n    );\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the button loses focus. */\n  @Event() bqBlur: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button gets focus. */\n  @Event() bqFocus: EventEmitter<HTMLBqButtonElement>;\n\n  /** Handler to be called when the button is clicked. */\n  @Event() bqClick: EventEmitter<HTMLBqButtonElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValues();\n    this.handleOnlyIconPropChange();\n  }\n\n  componentDidLoad() {\n    this.handleSlotChange();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private handleBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  private handleFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleClick = (ev: Event) => {\n    const { disabled, loading, bqClick, el } = this;\n\n    if (disabled || loading) {\n      this.preventEvent(ev);\n      return;\n    }\n\n    const bqClickEvent = bqClick.emit(el);\n    if (bqClickEvent.defaultPrevented) {\n      this.preventEvent(ev);\n      return;\n    }\n\n    this.handleFormAction();\n  };\n\n  private handleFormAction() {\n    const {\n      type,\n      internals: { form },\n    } = this;\n    if (isNil(form)) return;\n\n    const formAction = this.formActions(form)[type];\n    if (isNil(formAction)) return;\n\n    formAction();\n  }\n\n  private formActions = (form: HTMLFormElement) => ({\n    submit: () => this.submitAssociatedForm(form),\n    reset: () => form.reset(),\n  });\n\n  private submitAssociatedForm = (form: HTMLFormElement) => {\n    if (!isClient() || isNil(form)) return;\n\n    const btn = document.createElement('button');\n    btn.type = this.type;\n    btn.hidden = true;\n    form.append(btn);\n\n    btn.click();\n    btn.remove();\n  };\n\n  private handleSlotChange = () => {\n    this.hasPrefix = hasSlotContent(this.prefixElem, 'prefix');\n    this.hasSuffix = hasSlotContent(this.suffixElem, 'suffix');\n  };\n\n  private preventEvent(ev: Event) {\n    ev.preventDefault();\n    ev.stopPropagation();\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const isLink = isDefined(this.href);\n    const TagElem = isLink ? 'a' : 'button';\n    const style = {\n      ...(this.border && { '--bq-button--border-radius': `var(--bq-radius--${this.border})` }),\n    };\n\n    return (\n      <Host style={style}>\n        <TagElem\n          aria-disabled={this.disabled ? 'true' : 'false'}\n          aria-label={this.label ?? undefined}\n          class={{\n            'bq-button': true,\n            [`bq-button--${this.appearance}`]: true,\n            [`content-${this.justifyContent}`]: true,\n            [`${this.variant}`]: true,\n            [`${this.size}`]: true,\n            block: this.block,\n            disabled: this.disabled,\n            'has-prefix': this.hasPrefix,\n            'has-suffix': this.hasSuffix,\n            loading: this.loading,\n            'only-icon': this.onlyIcon,\n          }}\n          disabled={this.disabled}\n          download={isLink ? this.download : undefined}\n          href={isLink ? this.href : undefined}\n          onBlur={this.handleBlur}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          part=\"button\"\n          rel={isLink && this.target ? 'noreferrer noopener' : undefined}\n          tabIndex={this.disabled ? -1 : 0}\n          target={isLink ? this.target : undefined}\n          type={this.type}\n        >\n          <span\n            class=\"bq-button__prefix\"\n            part=\"prefix\"\n            ref={(spanElem) => {\n              this.prefixElem = spanElem;\n            }}\n          >\n            <slot name=\"prefix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          <span class=\"bq-button__label\" part=\"label\">\n            <slot />\n          </span>\n          <span\n            class=\"bq-button__suffix\"\n            part=\"suffix\"\n            ref={(spanElem) => {\n              this.suffixElem = spanElem;\n            }}\n          >\n            <slot name=\"suffix\" onSlotchange={this.handleSlotChange} />\n          </span>\n          {this.loading && <bq-icon class=\"bq-button__loader\" name=\"spinner-gap\" />}\n        </TagElem>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/card/bq-card.js

@@ -2,8 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { jsx as _jsx } from "@stencil/core/jsx-runtime";
-import { Host } from "@stencil/core";
+import { Host, h } from "@stencil/core";
 import { validatePropValue } from "../../shared/utils";
 import { CARD_TYPE } from "./bq-card.types";
 /**
@@ -87,12 +86,12 @@ export class BqCard {
         const style = {
             ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),
         };
-        return (_jsx(Host, { style: style, children: _jsx("div", { class: {
-                    'bq-card rounded-[--bq-card--borderRadius] border-[color:--bq-card--borderColor] border-[length:--bq-card--borderWidth] bg-[--bq-card--background]': true,
-                    'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',
-                    // Remove padding for minimal card type
-                    'p-b-0 p-i-0': this.type === 'minimal',
-                }, part: "wrapper", children: _jsx("slot", {}, 'b1663bad5dfb656e1cbb455fa715a6c789701b4c') }, '5b0508901a7a50a4987419a748fbff112b83a209') }, '79843b4331902edb6dc8409cb2a7085781135fd7'));
+        return (h(Host, { key: '3ac2ef6895a154485e2123b9ea6298d437e0918a', style: style }, h("div", { key: '1b8ccdca965fec742339ff11869e080cb49d9bb3', class: {
+                'bq-card rounded-[--bq-card--borderRadius] border-[color:--bq-card--borderColor] border-[length:--bq-card--borderWidth] bg-[--bq-card--background]': true,
+                'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',
+                // Remove padding for minimal card type
+                'p-b-0 p-i-0': this.type === 'minimal',
+            }, part: "wrapper" }, h("slot", { key: 'd7b652982dc0e9e1eae929416d5bd88fcf0c5c3b' }))));
     }
     static get is() { return "bq-card"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/card/bq-card.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-card.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/card/bq-card.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEtE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,MAAM;IACjB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAqB;IAElC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,6BAA6B;IACJ,IAAI,GAAc,SAAS,CAAC;IAErD,8CAA8C;IACrB,MAAM,GAAsB,GAAG,CAAC;IAEzD,wBAAwB;IACxB,0BAA0B;IAG1B,cAAc;QACZ,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,yBAAyB,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SACtF,CAAC;QACF,OAAO,CACL,KAAC,IAAI,IAAC,KAAK,EAAE,KAAK,YAChB,cACE,KAAK,EAAE;oBACL,mJAAmJ,EAAE,IAAI;oBACzJ,mDAAmD,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC5E,uCAAuC;oBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;iBACvC,EACD,IAAI,EAAC,SAAS,YAEd,4DAAQ,+CACJ,+CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, Prop, Watch } from '@stencil/core';\n\nimport { validatePropValue } from '../../shared/utils';\nimport type { TCardBorderRadius, TCardType } from './bq-card.types';\nimport { CARD_TYPE } from './bq-card.types';\n\n/**\n * The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\n * Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n *\n * @example How to use it\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 * @documentation https://www.beeq.design/3d466e231/p/522abb-card\n * @status stable\n *\n * @attr {\"default\" | \"minimal\"} type - Type of card component\n * @attr {\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\"} border - The corner radius of the card component\n *\n * @slot - The content of the card component\n *\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n *\n * @cssprop --bq-card--borderColor - Card border color\n * @cssprop --bq-card--borderRadius - Card border radius\n * @cssprop --bq-card--borderStyle - Card border style\n * @cssprop --bq-card--borderWidth - Card border width\n *\n * @cssprop --bq-card--padding - Card padding\n * @cssprop --bq-card--paddingMinimal - Minimal card padding\n * @cssprop --bq-card--background - Card background color\n */\n@Component({\n  tag: 'bq-card',\n  styleUrl: './scss/bq-card.scss',\n  shadow: true,\n})\nexport class BqCard {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCardElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** Type of card component */\n  @Prop({ reflect: true }) type: TCardType = 'default';\n\n  /** The corner radius of the card component */\n  @Prop({ reflect: true }) border: TCardBorderRadius = 'm';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  checkPropValue() {\n    validatePropValue(CARD_TYPE, 'default', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValue();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),\n    };\n    return (\n      <Host style={style}>\n        <div\n          class={{\n            'bq-card rounded-[--bq-card--borderRadius] border-[color:--bq-card--borderColor] border-[length:--bq-card--borderWidth] bg-[--bq-card--background]': true,\n            'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',\n            // Remove padding for minimal card type\n            'p-b-0 p-i-0': this.type === 'minimal',\n          }}\n          part=\"wrapper\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-card.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/card/bq-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAEzE,OAAO,EAAE,iBAAiB,EAAE,MAAM,oBAAoB,CAAC;AAEvD,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAE5C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAgCG;AAMH,MAAM,OAAO,MAAM;IACjB,iBAAiB;IACjB,uBAAuB;IAEvB,iCAAiC;IACjC,sCAAsC;IAE3B,EAAE,CAAqB;IAElC,oBAAoB;IACpB,wCAAwC;IACxC,0CAA0C;IAE1C,sBAAsB;IACtB,2BAA2B;IAE3B,6BAA6B;IACJ,IAAI,GAAc,SAAS,CAAC;IAErD,8CAA8C;IACrB,MAAM,GAAsB,GAAG,CAAC;IAEzD,wBAAwB;IACxB,0BAA0B;IAG1B,cAAc;QACZ,iBAAiB,CAAC,SAAS,EAAE,SAAS,EAAE,IAAI,CAAC,EAAE,EAAE,MAAM,CAAC,CAAC;IAC3D,CAAC;IAED,iBAAiB;IACjB,+CAA+C;IAC/C,iDAAiD;IAEjD,6BAA6B;IAC7B,sCAAsC;IACtC,wCAAwC;IAExC,iBAAiB;QACf,IAAI,CAAC,cAAc,EAAE,CAAC;IACxB,CAAC;IAED,YAAY;IACZ,iBAAiB;IAEjB,qBAAqB;IACrB,iDAAiD;IACjD,wBAAwB;IACxB,gCAAgC;IAChC,gDAAgD;IAChD,kDAAkD;IAElD,gBAAgB;IAChB,2BAA2B;IAC3B,wDAAwD;IACxD,0DAA0D;IAE1D,oBAAoB;IACpB,oCAAoC;IACpC,sCAAsC;IAEtC,MAAM;QACJ,MAAM,KAAK,GAAG;YACZ,GAAG,CAAC,IAAI,CAAC,MAAM,IAAI,EAAE,yBAAyB,EAAE,oBAAoB,IAAI,CAAC,MAAM,GAAG,EAAE,CAAC;SACtF,CAAC;QACF,OAAO,CACL,EAAC,IAAI,qDAAC,KAAK,EAAE,KAAK;YAChB,4DACE,KAAK,EAAE;oBACL,mJAAmJ,EAAE,IAAI;oBACzJ,mDAAmD,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;oBAC5E,uCAAuC;oBACvC,aAAa,EAAE,IAAI,CAAC,IAAI,KAAK,SAAS;iBACvC,EACD,IAAI,EAAC,SAAS;gBAEd,8DAAQ,CACJ,CACD,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';\n\nimport { validatePropValue } from '../../shared/utils';\nimport type { TCardBorderRadius, TCardType } from './bq-card.types';\nimport { CARD_TYPE } from './bq-card.types';\n\n/**\n * The Card component serves as a versatile container designed for flexible content presentation within user interfaces.\n * Its structure accommodates various styles, allowing users to customize and adapt it according to their design preferences.\n *\n * @example How to use it\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 * @documentation https://www.beeq.design/3d466e231/p/522abb-card\n * @status stable\n *\n * @attr {\"default\" | \"minimal\"} type - Type of card component\n * @attr {\"none\" | \"xs2\" | \"xs\" | \"s\" | \"m\" | \"l\" | \"full\"} border - The corner radius of the card component\n *\n * @slot - The content of the card component\n *\n * @part wrapper - The wrapper container `<div>` of the element inside the shadow DOM\n *\n * @cssprop --bq-card--borderColor - Card border color\n * @cssprop --bq-card--borderRadius - Card border radius\n * @cssprop --bq-card--borderStyle - Card border style\n * @cssprop --bq-card--borderWidth - Card border width\n *\n * @cssprop --bq-card--padding - Card padding\n * @cssprop --bq-card--paddingMinimal - Minimal card padding\n * @cssprop --bq-card--background - Card background color\n */\n@Component({\n  tag: 'bq-card',\n  styleUrl: './scss/bq-card.scss',\n  shadow: true,\n})\nexport class BqCard {\n  // Own Properties\n  // ====================\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCardElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** Type of card component */\n  @Prop({ reflect: true }) type: TCardType = 'default';\n\n  /** The corner radius of the card component */\n  @Prop({ reflect: true }) border: TCardBorderRadius = 'm';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('type')\n  checkPropValue() {\n    validatePropValue(CARD_TYPE, 'default', this.el, 'type');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.checkPropValue();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.border && { '--bq-card--borderRadius': `var(--bq-radius--${this.border})` }),\n    };\n    return (\n      <Host style={style}>\n        <div\n          class={{\n            'bq-card rounded-[--bq-card--borderRadius] border-[color:--bq-card--borderColor] border-[length:--bq-card--borderWidth] bg-[--bq-card--background]': true,\n            'p-b-[--bq-card--padding] p-i-[--bq-card--padding]': this.type === 'default',\n            // Remove padding for minimal card type\n            'p-b-0 p-i-0': this.type === 'minimal',\n          }}\n          part=\"wrapper\"\n        >\n          <slot />\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/checkbox/bq-checkbox.js

@@ -2,7 +2,7 @@
  * Built by Endavans
  * © https://beeq.design - Apache 2 License.
  */
-import { jsx as _jsx, jsxs as _jsxs } from "@stencil/core/jsx-runtime";
+import { h } from "@stencil/core";
 import { isNil } from "../../shared/utils";
 /**
  * The checkbox is a UI component that allows users to select one or more options from a list of choices.
@@ -203,15 +203,15 @@ export class BqCheckbox {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (_jsxs("label", { "aria-label": this.name || 'checkbox', class: {
+        return (h("label", { key: 'ac095d204487e115cb1d11cf63f5688dc30be6ba', "aria-label": this.name || 'checkbox', class: {
                 'bq-checkbox group': true,
                 'is-checked': this.checked,
                 'is-indeterminate': this.indeterminate,
                 'is-disabled !cursor-not-allowed': this.disabled,
                 'has-background': this.backgroundOnHover,
-            }, part: "base", children: [_jsxs("div", { class: "bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3", part: "control", children: [_jsx("input", { "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', checked: this.checked, class: "bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0", disabled: this.disabled, form: this.formId, indeterminate: this.indeterminate, name: !isNil(this.name) ? this.name : undefined, onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", ref: (input) => {
-                                this.inputElem = input;
-                            }, required: this.required, tabindex: "0", type: "checkbox", value: this.value }, '82705831b212ce4295abf361b33778096b1830d0'), _jsxs("span", { class: "bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center", part: "checkbox", children: [this.checked && (_jsxs("svg", { "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M0 0h256v256H0z", fill: "none" }, 'b9639c45ba423f57e3d52ffcc139f7806cd16a4c'), _jsx("path", { d: "M216 72 104 184l-56-56", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }, '0e870063a942e07968558c4c6217ba5e5e4cb07e')] }, '7eec03aadbeaf92e76cad339ef8b71d7a7202cf2')), !this.checked && this.indeterminate && (_jsxs("svg", { "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", fill: "currentColor", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("path", { d: "M0 0h256v256H0z", fill: "none" }, '4b0cf7e0dcf552aa21c9778eee796de3f4927916'), _jsx("path", { d: "M40 128h176", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }, 'bfc9017dd7d5c89b68f292dcc91501b072f8374b')] }, '65ad79b2823f8a4a20459687fab6e1462943e013'))] }, '49f2681d3ac70f03a2f3b12f0404cb7d0e8f842e')] }, '8a6ccdc8d6386f308467c816351c5fbdc1ff3ec5'), _jsx("span", { class: "bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60", part: "label", children: _jsx("slot", {}, '91709a8ae5aca9ea6b9db45d13eec7664961bb5d') }, 'a52dfe3e8800c3988a0af094a853396ee37d4167')] }, '5bac9ae4cab3a640fc43608f5e6a78f3a14f359f'));
+            }, part: "base" }, h("div", { key: '2de34c0b5f1d2d67df7a10d3825bdfbd000cf9d3', class: "bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3", part: "control" }, h("input", { key: 'eedf7c8931a93a33fea19a7472cd199c7198732a', "aria-checked": this.checked ? 'true' : 'false', "aria-disabled": this.disabled ? 'true' : 'false', checked: this.checked, class: "bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0", disabled: this.disabled, form: this.formId, indeterminate: this.indeterminate, name: !isNil(this.name) ? this.name : undefined, onBlur: this.handleOnBlur, onChange: this.handleChange, onFocus: this.handleOnFocus, part: "input", ref: (input) => {
+                this.inputElem = input;
+            }, required: this.required, tabindex: "0", type: "checkbox", value: this.value }), h("span", { key: '6316510ffdb21d195f8ed0aa7ae46e02c5746266', class: "bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center", part: "checkbox" }, this.checked && (h("svg", { key: '11dfd11d0cac62b824169cf8312222348c5bd39c', "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: '0de7ed79d17f4a26356ad4cd4e61a4a8c573f9da', d: "M0 0h256v256H0z", fill: "none" }), h("path", { key: 'b74ec0b4fded0752a4d494ed264c30beb97026e3', d: "M216 72 104 184l-56-56", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }))), !this.checked && this.indeterminate && (h("svg", { key: '5eb4937e2654ce5d87521303d1d21583c31c3394', "aria-hidden": "true", class: "bs-full is-full absolute text-neutral-white", fill: "currentColor", viewBox: "0 0 256 256", xmlns: "http://www.w3.org/2000/svg" }, h("path", { key: 'a2205d8f2d4212c6c06590ea9cf1e3c7f9d72f6a', d: "M0 0h256v256H0z", fill: "none" }), h("path", { key: '1001683358e518ca20ffdd0fe18a276452a2f69f', d: "M40 128h176", fill: "none", stroke: "currentColor", "stroke-linecap": "round", "stroke-linejoin": "round", "stroke-width": "32" }))))), h("span", { key: '0735d4ebff84e967c511f23ea3c4700217b0e37a', class: "bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60", part: "label" }, h("slot", { key: 'a212b9b8b092b87a537575048156c5cd590e5976' }))));
     }
     static get is() { return "bq-checkbox"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/checkbox/bq-checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"bq-checkbox.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/**\n * The checkbox is a UI component that allows users to select one or more options from a list of choices.\n * It is commonly used in forms, surveys, and settings pages.\n *\n * @example How to use it\n * ```html\n * <bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\n *   Checkbox label\n * </bq-checkbox>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox\n * @status stable\n *\n * @attr {boolean} background-on-hover - If true checkbox displays background on hover\n * @attr {string} form-id - The form ID that the checkbox is associated with\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} checked - If true checkbox is checked\n * @attr {boolean} disabled - If true checkbox is disabled\n * @attr {boolean} indeterminate - A state that is neither checked nor unchecked\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted\n * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the checkbox state changes\n * @event bqFocus - Handler to be called when the checkbox gets focus\n * @event bqBlur - Handler to be called when the checkbox loses focus\n *\n * @slot - The content of the checkbox component\n *\n * @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n *\n * @cssprop --bq-checkbox--size - Checkbox size\n * @cssprop --bq-checkbox--border-radius - Checkbox border radius\n * @cssprop --bq-checkbox--border-width - Checkbox border width\n */\n@Component({\n  tag: 'bq-checkbox',\n  styleUrl: './scss/bq-checkbox.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqCheckbox {\n  // Own Properties\n  // ====================\n\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCheckboxElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true checkbox displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** The form ID that the checkbox is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true checkbox is checked */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n  /** If true checkbox is disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** A state that is neither checked nor unchecked */\n  @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('indeterminate')\n  handleIndeterminatePropChange() {\n    if (!this.inputElem) return;\n\n    this.inputElem.indeterminate = this.indeterminate;\n    if (this.indeterminate) {\n      this.checked = false;\n    }\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the checkbox state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the checkbox gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n  /** Handler to be called when the checkbox loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      if (!this.indeterminate) {\n        this.bqChange.emit({ checked: this.checked });\n      }\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.indeterminate = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the checkbox (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the checkbox is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <label\n        aria-label={this.name || 'checkbox'}\n        class={{\n          'bq-checkbox group': true,\n          'is-checked': this.checked,\n          'is-indeterminate': this.indeterminate,\n          'is-disabled !cursor-not-allowed': this.disabled,\n          'has-background': this.backgroundOnHover,\n        }}\n        part=\"base\"\n      >\n        <div\n          class=\"bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3\"\n          part=\"control\"\n        >\n          <input\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            checked={this.checked}\n            class=\"bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0\"\n            disabled={this.disabled}\n            form={this.formId}\n            indeterminate={this.indeterminate}\n            name={!isNil(this.name) ? this.name : undefined}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            part=\"input\"\n            ref={(input: HTMLInputElement) => {\n              this.inputElem = input;\n            }}\n            required={this.required}\n            tabindex=\"0\"\n            type=\"checkbox\"\n            value={this.value}\n          />\n          <span\n            class=\"bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center\"\n            part=\"checkbox\"\n          >\n            {/*\n              We could move these SVGs to separated functional components, but it seems there's a weird issue with\n              Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n             */}\n            {this.checked && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M216 72 104 184l-56-56\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n            {!this.checked && this.indeterminate && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M40 128h176\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n          </span>\n        </div>\n        <span\n          class=\"bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60\"\n          part=\"label\"\n        >\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}
+{"version":3,"file":"bq-checkbox.js","sourceRoot":"","sources":["../../../../../../packages/beeq/src/components/checkbox/bq-checkbox.tsx"],"names":[],"mappings":"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","sourcesContent":["import type { EventEmitter } from '@stencil/core';\nimport { AttachInternals, Component, Element, Event, h, Method, Prop, Watch } from '@stencil/core';\n\nimport { isNil } from '../../shared/utils';\n\n/**\n * The checkbox is a UI component that allows users to select one or more options from a list of choices.\n * It is commonly used in forms, surveys, and settings pages.\n *\n * @example How to use it\n * ```html\n * <bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\n *   Checkbox label\n * </bq-checkbox>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/431f17-checkbox\n * @status stable\n *\n * @attr {boolean} background-on-hover - If true checkbox displays background on hover\n * @attr {string} form-id - The form ID that the checkbox is associated with\n * @attr {string} form-validation-message - The native form validation message\n * @attr {boolean} checked - If true checkbox is checked\n * @attr {boolean} disabled - If true checkbox is disabled\n * @attr {boolean} indeterminate - A state that is neither checked nor unchecked\n * @attr {string} name - Name of the HTML input form control. Submitted with the form as part of a name/value pair\n * @attr {boolean} required - If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted\n * @attr {string} value - A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name\n *\n * @method vClick - Simulate a click event on the native `<input>` HTML element used under the hood\n * @method vFocus - Sets focus on the native `<input>` HTML element used under the hood\n * @method vBlur - Remove focus from the native `<input>` HTML element used under the hood\n *\n * @event bqChange - Handler to be called when the checkbox state changes\n * @event bqFocus - Handler to be called when the checkbox gets focus\n * @event bqBlur - Handler to be called when the checkbox loses focus\n *\n * @slot - The content of the checkbox component\n *\n * @part base - The component's internal wrapper of the checkbox component.\n * @part control - The container `<div>` element that holds the custom checkbox.\n * @part input - The native HTML `<input type=\"checkbox\">` used under the hood.\n * @part checkbox - The `<span>` element that renders the custom checked/indeterminate state.\n * @part label - The `<span>` element that holds the text content.\n *\n * @cssprop --bq-checkbox--size - Checkbox size\n * @cssprop --bq-checkbox--border-radius - Checkbox border radius\n * @cssprop --bq-checkbox--border-width - Checkbox border width\n */\n@Component({\n  tag: 'bq-checkbox',\n  styleUrl: './scss/bq-checkbox.scss',\n  formAssociated: true,\n  shadow: {\n    delegatesFocus: true,\n  },\n})\nexport class BqCheckbox {\n  // Own Properties\n  // ====================\n\n  private inputElem: HTMLInputElement;\n  private prevCheckedValue: boolean;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqCheckboxElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true checkbox displays background on hover */\n  @Prop({ reflect: true }) backgroundOnHover? = false;\n\n  /** The form ID that the checkbox is associated with */\n  @Prop({ reflect: true }) formId?: string;\n\n  /** The native form validation message */\n  @Prop({ mutable: true }) formValidationMessage?: string;\n\n  /** If true checkbox is checked */\n  @Prop({ reflect: true, mutable: true }) checked?: boolean;\n\n  /** If true checkbox is disabled */\n  @Prop({ reflect: true }) disabled? = false;\n\n  /** A state that is neither checked nor unchecked */\n  @Prop({ reflect: true, mutable: true }) indeterminate? = false;\n\n  /** Name of the HTML input form control. Submitted with the form as part of a name/value pair.  */\n  @Prop({ reflect: true }) name!: string;\n\n  /** If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted */\n  @Prop({ reflect: true }) required?: boolean;\n\n  /** A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name.  */\n  @Prop({ reflect: true }) value!: string;\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('indeterminate')\n  handleIndeterminatePropChange() {\n    if (!this.inputElem) return;\n\n    this.inputElem.indeterminate = this.indeterminate;\n    if (this.indeterminate) {\n      this.checked = false;\n    }\n  }\n\n  @Watch('required')\n  handleRequiredPropChange() {\n    this.updateFormValidity();\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Handler to be called when the checkbox state changes */\n  @Event() bqChange: EventEmitter<{ checked: boolean }>;\n\n  /** Handler to be called when the checkbox gets focus */\n  @Event() bqFocus: EventEmitter<HTMLBqCheckboxElement>;\n\n  /** Handler to be called when the checkbox loses focus */\n  @Event() bqBlur: EventEmitter<HTMLBqCheckboxElement>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentWillLoad() {\n    this.prevCheckedValue = this.checked;\n  }\n\n  componentDidUpdate() {\n    /**\n     * We need to trigger the `bqChange` immediately after the first update happens\n     * so the checked attribute get applied, otherwise, a delay will happen\n     * between the event emits and when the checked attribute value gets reflected in the element host.\n     */\n    if (this.checked !== this.prevCheckedValue) {\n      if (!this.indeterminate) {\n        this.bqChange.emit({ checked: this.checked });\n      }\n      this.prevCheckedValue = this.checked;\n    }\n  }\n\n  formAssociatedCallback() {\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  }\n\n  formResetCallback() {\n    // Reset the form value and validity state\n    this.checked = false;\n    this.indeterminate = false;\n    this.inputElem.removeAttribute('checked');\n    this.internals?.setFormValue(undefined);\n    this.updateFormValidity();\n  }\n\n  // Listeners\n  // ==============\n\n  // Public methods API\n  // These methods are exposed on the host element.\n  // Always use two lines.\n  // Public Methods must be async.\n  // Requires JSDocs for public API documentation.\n  // ===============================================\n\n  /**\n   * Simulate a click event on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.click()`.\n   */\n  @Method()\n  async vClick() {\n    this.inputElem?.click();\n  }\n\n  /**\n   * Sets focus on the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.focus()`.\n   */\n  @Method()\n  async vFocus() {\n    this.inputElem?.focus();\n  }\n\n  /**\n   * Remove focus from the native `<input>` HTML element used under the hood.\n   * Use this method instead of the global `element.blur()`.\n   */\n  @Method()\n  async vBlur() {\n    this.inputElem?.blur();\n  }\n\n  // Local methods\n  // Internal business logic.\n  // These methods cannot be called from the host element.\n  // =======================================================\n\n  private setFormValue = (checked: boolean) => {\n    const value = checked ? 'on' : undefined;\n    // Set form value based on the checked state\n    // Here we also pass the state of the checkbox (2nd argument) as the state of the form control\n    // Details: https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/setFormValue\n    this.internals?.setFormValue(value, `${this.checked}`);\n  };\n\n  private updateFormValidity = () => {\n    const { formValidationMessage, internals, required, checked, inputElem } = this;\n    // Clear the validity state\n    internals?.states.clear();\n\n    if (!(required && !checked)) {\n      // If the checkbox is not required or is checked, set the validity state to valid\n      internals?.states.add('valid');\n      internals?.setValidity({});\n      return;\n    }\n\n    // Set validity state based on the required property and checked state\n    internals?.states.add('invalid');\n    internals?.setValidity({ valueMissing: true }, formValidationMessage, inputElem);\n  };\n\n  private handleChange = () => {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n\n    this.setFormValue(this.checked);\n    this.updateFormValidity();\n  };\n\n  private handleOnFocus = () => {\n    this.bqFocus.emit(this.el);\n  };\n\n  private handleOnBlur = () => {\n    this.bqBlur.emit(this.el);\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <label\n        aria-label={this.name || 'checkbox'}\n        class={{\n          'bq-checkbox group': true,\n          'is-checked': this.checked,\n          'is-indeterminate': this.indeterminate,\n          'is-disabled !cursor-not-allowed': this.disabled,\n          'has-background': this.backgroundOnHover,\n        }}\n        part=\"base\"\n      >\n        <div\n          class=\"bq-checkbox__control bs-[--bq-checkbox--size] is-[--bq-checkbox--size] relative box-border flex items-center justify-center p-b-xs3 p-i-xs3\"\n          part=\"control\"\n        >\n          <input\n            aria-checked={this.checked ? 'true' : 'false'}\n            aria-disabled={this.disabled ? 'true' : 'false'}\n            checked={this.checked}\n            class=\"bq-checkbox__input pointer-events-none absolute m-b-0 m-i-0 p-b-0 p-i-0 opacity-0\"\n            disabled={this.disabled}\n            form={this.formId}\n            indeterminate={this.indeterminate}\n            name={!isNil(this.name) ? this.name : undefined}\n            onBlur={this.handleOnBlur}\n            onChange={this.handleChange}\n            onFocus={this.handleOnFocus}\n            part=\"input\"\n            ref={(input: HTMLInputElement) => {\n              this.inputElem = input;\n            }}\n            required={this.required}\n            tabindex=\"0\"\n            type=\"checkbox\"\n            value={this.value}\n          />\n          <span\n            class=\"bq-checkbox__checkbox bs-full is-[--bq-checkbox--size] relative box-border flex items-center justify-center\"\n            part=\"checkbox\"\n          >\n            {/*\n              We could move these SVGs to separated functional components, but it seems there's a weird issue with\n              Stencil and pure SVG components: https://stencil-worldwide.slack.com/archives/C79EANFL7/p1663779385026389\n             */}\n            {this.checked && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M216 72 104 184l-56-56\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n            {!this.checked && this.indeterminate && (\n              <svg\n                aria-hidden=\"true\"\n                class=\"bs-full is-full absolute text-neutral-white\"\n                fill=\"currentColor\"\n                viewBox=\"0 0 256 256\"\n                xmlns=\"http://www.w3.org/2000/svg\"\n              >\n                <path d=\"M0 0h256v256H0z\" fill=\"none\" />\n                <path\n                  d=\"M40 128h176\"\n                  fill=\"none\"\n                  stroke=\"currentColor\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                  stroke-width=\"32\"\n                />\n              </svg>\n            )}\n          </span>\n        </div>\n        <span\n          class=\"bq-checkbox__label ps-xs text-start font-medium text-primary leading-regular group-hover-[&:not(.is-disabled)]:text-hover-primary group-[.is-disabled]:opacity-60\"\n          part=\"label\"\n        >\n          <slot />\n        </span>\n      </label>\n    );\n  }\n}\n"]}