@beeq/core 1.13.0 → 1.13.1

package/dist/beeq/p-d4fa3abb.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["bqDropdownCss","id","BqDropdown","dropdownPanelId","triggerElem","disableScrollLock","disabled","distance","keepOpenOnSelect","placement","open","panelHeight","sameWidth","skidding","strategy","onOpenChange","this","bqOpen","emit","handleDisabledChange","removeAttribute","setAttribute","componentDidLoad","el","querySelector","addEventListener","togglePanel","disconnectedCallback","removeEventListener","onItemSelect","onClickOutside","event","isEventTargetChildOfElement","onEscape","key","handleScrollEvent","isDisabled","hasAttribute","render","style","h","class","part","name","exportparts","bqPanelCss","BqPanel","panel","floatingUI","trigger","handleOpenChange","hidePanel","showPanel","onPropChange","isClient","configure","options","parentTrigger","parentElement","getBoundingClientRect","contextElement","FloatingUI","connectedCallback","stop","unlockBodyScroll","start","lockBodyScroll","hidden","ref"],"sources":["../../packages/beeq/src/components/dropdown/scss/bq-dropdown.scss?tag=bq-dropdown&encapsulation=shadow","../../packages/beeq/src/components/dropdown/bq-dropdown.tsx","../../packages/beeq/src/components/panel/scss/bq-panel.scss?tag=bq-panel&encapsulation=shadow","../../packages/beeq/src/components/panel/bq-panel.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Dropdown styles                */\n/* -------------------------------------------------------------------------- */\n\n:host {\n  @apply relative inline-block;\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { isEventTargetChildOfElement } from '../../shared/utils';\n\nlet id = 0;\n\n/**\n * The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\n * They provide an efficient way to save space and present a long list of options in a compact and organized manner.\n *\n * @example How to use it\n * ```html\n * <bq-dropdown placement=\"bottom-start\">\n *   <bq-button slot=\"trigger\">Dropdown</bq-button>\n *   <bq-option-list>\n *     <bq-option value=\"users\">...</bq-option>\n *     <bq-option value=\"user\">...</bq-option>\n *     <bq-option value=\"dashboard\">...</bq-option>\n *     <bq-option value=\"settings\">...</bq-option>\n *     <bq-option value=\"logout\">...</bq-option>\n *   </bq-option-list>\n * </bq-dropdown>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/47ff4b-dropdown\n * @status stable\n *\n * @dependency bq-panel\n *\n * @attr {boolean} disabled - If true, the dropdown panel will be visible and won't be shown.\n * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.\n * @attr {boolean} keep-open-on-select - If true, the panel will remain open after a selection is made.\n * @attr {\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"} placement - Position of the panel.\n * @attr {boolean} open - If true, the panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the dropdown panel.\n * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.\n * @attr {number} skidding - Represents the skidding between the panel and the trigger element.\n * @attr {\"fixed\" | \"absolute\"} strategy - Defines the strategy to position the panel.\n *\n * @event bqOpen - Callback handler to be called when the dropdown panel is opened or closed.\n *\n * @slot trigger - The trigger element that opens the dropdown panel.\n * @slot - The content of the dropdown panel.\n *\n * @part base - The component's internal wrapper.\n * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel.\n * @part panel - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.\n * @part trigger - The `<div>` element that hosts the trigger element.\n *\n * @cssprop --bq-panel--background - Panel background color\n * @cssprop --bq-panel--border-color - Panel border color\n * @cssprop --bq-panel--border-radius - Panel border radius\n * @cssprop --bq-panel--border-style - Panel border style\n * @cssprop --bq-panel--border-width - Panel border width\n * @cssprop --bq-panel--box-shadow - Panel box shadow\n * @cssprop --bq-panel--padding - Panel padding\n * @cssprop --bq-panel--height - Panel height\n * @cssprop --bq-panel--width - Panel width\n * @cssprop --bq-panel-z-index - Panel z-index applied when opened\n */\n@Component({\n  tag: 'bq-dropdown',\n  styleUrl: './scss/bq-dropdown.scss',\n  shadow: true,\n})\nexport class BqDropdown {\n  // Own Properties\n  // ====================\n\n  private dropdownPanelId = `bq-dropdown-panel-${++id}`;\n  private triggerElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDropdownElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the dropdown panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /** If true, the dropdown panel will be visible and won't be shown. */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** If true, the panel will remain open after a selection is made. */\n  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the dropdown panel */\n  @Prop({ reflect: true }) panelHeight?: string;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  onOpenChange() {\n    this.bqOpen.emit({ open: this.open });\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (!this.triggerElem) return;\n\n    // set 'disabled' attribute based on 'this.disabled' value, ensuring consistent state handling\n    if (!this.disabled) {\n      this.triggerElem?.removeAttribute('disabled');\n      return;\n    }\n    this.triggerElem?.setAttribute('disabled', 'true');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the dropdown panel is opened or closed. */\n  @Event() bqOpen: EventEmitter<{ open: boolean }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.triggerElem = this.el.querySelector('[slot=\"trigger\"]');\n    this.triggerElem?.addEventListener('click', this.togglePanel);\n\n    this.handleDisabledChange();\n  }\n\n  disconnectedCallback() {\n    this.triggerElem?.removeEventListener('click', this.togglePanel);\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqSelect', { passive: true })\n  onItemSelect() {\n    if (this.keepOpenOnSelect) return;\n\n    this.open = false;\n  }\n\n  /** Listens for the 'click' event on the document object\n   * and closes the dropdown panel if the click is outside the component.\n   */\n  @Listen('click', { target: 'document', passive: true })\n  onClickOutside(event: MouseEvent) {\n    if (!this.open || isEventTargetChildOfElement(event, this.el)) return;\n\n    // Close when clicking outside of the close element\n    this.open = false;\n  }\n\n  @Listen('keyup', { target: 'window', passive: true })\n  onEscape(event: KeyboardEvent) {\n    if (!this.open) return;\n    // Close the panel when pressing Escape or when pressing Tab and the component loses focus.\n    if (event.key === 'Escape' || (event.key === 'Tab' && !isEventTargetChildOfElement(event, this.el))) {\n      this.open = false;\n    }\n  }\n\n  @Listen('scroll', { target: 'window', passive: true, capture: true })\n  handleScrollEvent() {\n    if (!this.open || this.disableScrollLock) return;\n\n    // Close the panel when the scroll event is triggered.\n    // This is useful for those cases where the floating panel is inside a scrollable container.\n    // For example, a select inside a dialog, drawer, etc.\n    // ⚠️ Notice that document body scroll lock is handled via the `scrollLock` utility.\n    this.open = false;\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 togglePanel = (): void => {\n    const isDisabled = this.disabled || this.triggerElem?.hasAttribute('disabled');\n    if (isDisabled) return;\n\n    this.open = !this.open;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.panelHeight && { '--bq-panel--height': this.panelHeight }),\n    };\n\n    return (\n      <div class=\"bq-dropdown\" part=\"base\">\n        {/* TRIGGER CONTAINER */}\n        <div\n          aria-controls={this.dropdownPanelId}\n          aria-haspopup=\"true\"\n          class=\"bq-dropdown__trigger block\"\n          part=\"trigger\"\n        >\n          <slot name=\"trigger\" />\n        </div>\n        {/* PANEL */}\n        <bq-panel\n          class=\"bq-dropdown__panel\"\n          disableScrollLock={this.disableScrollLock}\n          distance={this.distance}\n          exportparts=\"panel\"\n          id={this.dropdownPanelId}\n          open={this.open}\n          part=\"dropdown\"\n          placement={this.placement}\n          sameWidth={this.sameWidth}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          style={style}\n        >\n          <slot />\n        </bq-panel>\n      </div>\n    );\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                                Panel styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-panel.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-panel {\n  @include animation-fade-in;\n  @apply fixed z-[--bq-panel-z-index] overflow-y-auto overflow-x-hidden is-[--bq-panel--width] max-bs-[--bq-panel--height];\n  @apply rounded-[--bq-panel--border-radius] bg-[--bq-panel--background] shadow-[shadow:--bq-panel--box-shadow];\n  @apply pe-[--bq-panel--padding-end] ps-[--bq-panel--padding-start] p-b-[--bq-panel--paddingY];\n  @apply border-[length:--bq-panel--border-width] border-[color:--bq-panel--border-color];\n\n  border-style: var(--bq-panel--border-style);\n}\n","import type { ReferenceElement } from '@floating-ui/dom';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\nimport { isClient, lockBodyScroll, unlockBodyScroll } from '../../shared/utils';\n\n/**\n * The Panel component is a versatile and essential element used to wrap and display content in a floating panel.\n *\n * @example How to use it\n * ```html\n * <bq-panel open>\n *   <div>Panel content</div>\n * </bq-panel>\n * ```\n *\n * @status stable\n *\n * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.\n * @attr {\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"} placement - Position of the panel.\n * @attr {boolean} open - If true, the panel will be visible.\n * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.\n * @attr {number} skidding - Represents the skidding between the panel and the trigger element.\n * @attr {\"fixed\" | \"absolute\"} strategy - Defines the strategy to position the panel.\n *\n * @slot - The content of the panel.\n *\n * @part panel - The `<div>` element used to display and style the panel\n *\n * @prop --bq-panel--background - Panel background color\n * @prop --bq-panel--border-color - Panel border color\n * @prop --bq-panel--border-radius - Panel border radius\n * @prop --bq-panel--border-style - Panel border style\n * @prop --bq-panel--border-width - Panel border width\n * @prop --bq-panel--box-shadow - Panel box shadow\n * @prop --bq-panel--padding - Panel padding\n * @prop --bq-panel--height - Panel height\n * @prop --bq-panel--width - Panel width\n * @prop --bq-panel-z-index - Panel z-index applied when opened\n */\n@Component({\n  tag: 'bq-panel',\n  styleUrl: './scss/bq-panel.scss',\n  shadow: true,\n})\nexport class BqPanel {\n  // Own Properties\n  // ====================\n\n  private panel: HTMLElement;\n  private floatingUI: FloatingUI;\n  private trigger: ReferenceElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPanelElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  handleOpenChange() {\n    if (!this.open) {\n      this.hidePanel();\n      return;\n    }\n\n    this.showPanel();\n  }\n\n  @Watch('distance')\n  @Watch('placement')\n  @Watch('sameWidth')\n  @Watch('skidding')\n  @Watch('strategy')\n  onPropChange() {\n    if (!isClient()) return;\n\n    this.floatingUI?.configure({ ...this.options });\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    if (!isClient()) return;\n\n    // We need to find the trigger element from the parent to position the panel relative to it.\n    const parentTrigger = this.el.parentElement.querySelector('div[part=\"trigger\"]');\n\n    if (!parentTrigger) return;\n\n    this.trigger = {\n      getBoundingClientRect: () => parentTrigger.getBoundingClientRect(),\n      contextElement: parentTrigger,\n    };\n\n    this.floatingUI = new FloatingUI(this.trigger, this.panel, { ...this.options });\n    this.handleOpenChange();\n  }\n\n  connectedCallback() {\n    if (!this.floatingUI || !this.open) return;\n\n    this.showPanel();\n  }\n\n  disconnectedCallback() {\n    if (!isClient()) return;\n\n    this.floatingUI?.stop();\n\n    // Ensure scroll lock is removed if the component is disconnected while the panel is open.\n    if (this.open && !this.disableScrollLock) {\n      unlockBodyScroll();\n    }\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 showPanel() {\n    if (!isClient()) return;\n\n    this.floatingUI?.start();\n\n    // Lock the body scroll if the disableScrollLock prop is not true.\n    if (!this.disableScrollLock) {\n      lockBodyScroll();\n    }\n  }\n\n  private async hidePanel() {\n    this.open = false;\n    this.floatingUI?.stop();\n\n    // Unlock the body scroll if the disableScrollLock prop is not true.\n    if (isClient() && !this.disableScrollLock) {\n      unlockBodyScroll();\n    }\n  }\n\n  private get options() {\n    return {\n      distance: this.distance,\n      placement: this.placement,\n      sameWidth: this.sameWidth,\n      skidding: this.skidding,\n      strategy: this.strategy,\n    };\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        aria-hidden={!this.open ? 'true' : 'false'}\n        class=\"bq-panel\"\n        hidden={!this.open}\n        part=\"panel\"\n        ref={(el) => {\n          this.panel = el;\n        }}\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"],"mappings":";;;;gNAAA,MAAMA,EAAgB,IAAM,4omBCM5B,IAAIC,EAAK,E,MA6DIC,EAAU,M,sDAIbC,gBAAkB,uBAAuBF,IACzCG,Y,wBAeiBC,kBAA8B,MAG9BC,SAAqB,MAGrBC,SAAoB,EAGpBC,iBAA6B,MAG7BC,UAAwB,eAGTC,KAAiB,MAGhCC,YAGAC,UAAsB,MAGtBC,SAAoB,EAGpBC,SAAkC,QAM3D,YAAAC,GACEC,KAAKC,OAAOC,KAAK,CAAER,KAAMM,KAAKN,M,CAIhC,oBAAAS,GACE,IAAKH,KAAKZ,YAAa,OAGvB,IAAKY,KAAKV,SAAU,CAClBU,KAAKZ,aAAagB,gBAAgB,YAClC,M,CAEFJ,KAAKZ,aAAaiB,aAAa,WAAY,O,CAQpCJ,OAMT,gBAAAK,GACEN,KAAKZ,YAAcY,KAAKO,GAAGC,cAAc,oBACzCR,KAAKZ,aAAaqB,iBAAiB,QAAST,KAAKU,aAEjDV,KAAKG,sB,CAGP,oBAAAQ,GACEX,KAAKZ,aAAawB,oBAAoB,QAASZ,KAAKU,Y,CAOtD,YAAAG,GACE,GAAIb,KAAKR,iBAAkB,OAE3BQ,KAAKN,KAAO,K,CAOd,cAAAoB,CAAeC,GACb,IAAKf,KAAKN,MAAQsB,EAA4BD,EAAOf,KAAKO,IAAK,OAG/DP,KAAKN,KAAO,K,CAId,QAAAuB,CAASF,GACP,IAAKf,KAAKN,KAAM,OAEhB,GAAIqB,EAAMG,MAAQ,UAAaH,EAAMG,MAAQ,QAAUF,EAA4BD,EAAOf,KAAKO,IAAM,CACnGP,KAAKN,KAAO,K,EAKhB,iBAAAyB,GACE,IAAKnB,KAAKN,MAAQM,KAAKX,kBAAmB,OAM1CW,KAAKN,KAAO,K,CAeNgB,YAAc,KACpB,MAAMU,EAAapB,KAAKV,UAAYU,KAAKZ,aAAaiC,aAAa,YACnE,GAAID,EAAY,OAEhBpB,KAAKN,MAAQM,KAAKN,IAAI,EAOxB,MAAA4B,GACE,MAAMC,EAAQ,IACRvB,KAAKL,aAAe,CAAE,qBAAsBK,KAAKL,cAGvD,OACE6B,EAAA,OAAAN,IAAA,2CAAKO,MAAM,cAAcC,KAAK,QAE5BF,EAAA,OAAAN,IAAA,2DACiBlB,KAAKb,gBAAe,gBACrB,OACdsC,MAAM,6BACNC,KAAK,WAELF,EAAA,QAAAN,IAAA,2CAAMS,KAAK,aAGbH,EAAA,YAAAN,IAAA,2CACEO,MAAM,qBACNpC,kBAAmBW,KAAKX,kBACxBE,SAAUS,KAAKT,SACfqC,YAAY,QACZ3C,GAAIe,KAAKb,gBACTO,KAAMM,KAAKN,KACXgC,KAAK,WACLjC,UAAWO,KAAKP,UAChBG,UAAWI,KAAKJ,UAChBC,SAAUG,KAAKH,SACfC,SAAUE,KAAKF,SACfyB,MAAOA,GAEPC,EAAA,QAAAN,IAAA,8C,yGC7PV,MAAMW,EAAa,IAAM,w5qB,MC8CZC,EAAO,M,yBAIVC,MACAC,WACAC,Q,wBAeiB5C,kBAA8B,MAG9BE,SAAoB,EAGpBE,UAAwB,eAGTC,KAAiB,MAGhCE,UAAsB,MAGtBC,SAAoB,EAGpBC,SAAkC,QAM3D,gBAAAoC,GACE,IAAKlC,KAAKN,KAAM,CACdM,KAAKmC,YACL,M,CAGFnC,KAAKoC,W,CAQP,YAAAC,GACE,IAAKC,IAAY,OAEjBtC,KAAKgC,YAAYO,UAAU,IAAKvC,KAAKwC,S,CAWvC,gBAAAlC,GACE,IAAKgC,IAAY,OAGjB,MAAMG,EAAgBzC,KAAKO,GAAGmC,cAAclC,cAAc,uBAE1D,IAAKiC,EAAe,OAEpBzC,KAAKiC,QAAU,CACbU,sBAAuB,IAAMF,EAAcE,wBAC3CC,eAAgBH,GAGlBzC,KAAKgC,WAAa,IAAIa,EAAW7C,KAAKiC,QAASjC,KAAK+B,MAAO,IAAK/B,KAAKwC,UACrExC,KAAKkC,kB,CAGP,iBAAAY,GACE,IAAK9C,KAAKgC,aAAehC,KAAKN,KAAM,OAEpCM,KAAKoC,W,CAGP,oBAAAzB,GACE,IAAK2B,IAAY,OAEjBtC,KAAKgC,YAAYe,OAGjB,GAAI/C,KAAKN,OAASM,KAAKX,kBAAmB,CACxC2D,G,EAmBI,SAAAZ,GACN,IAAKE,IAAY,OAEjBtC,KAAKgC,YAAYiB,QAGjB,IAAKjD,KAAKX,kBAAmB,CAC3B6D,G,EAII,eAAMf,GACZnC,KAAKN,KAAO,MACZM,KAAKgC,YAAYe,OAGjB,GAAIT,MAAetC,KAAKX,kBAAmB,CACzC2D,G,EAIJ,WAAYR,GACV,MAAO,CACLjD,SAAUS,KAAKT,SACfE,UAAWO,KAAKP,UAChBG,UAAWI,KAAKJ,UAChBC,SAAUG,KAAKH,SACfC,SAAUE,KAAKF,S,CAQnB,MAAAwB,GACE,OACEE,EAAA,OAAAN,IAAA,0DACgBlB,KAAKN,KAAO,OAAS,QACnC+B,MAAM,WACN0B,QAASnD,KAAKN,KACdgC,KAAK,QACL0B,IAAM7C,IACJP,KAAK+B,MAAQxB,CAAE,GAGjBiB,EAAA,QAAAN,IAAA,6C","ignoreList":[]}

package/dist/beeq/p-seEHHqwi.js

@@ -0,0 +1,6 @@
+/*!
+ * Built by Endavans
+ * © https://beeq.design - Apache 2 License.
+ */
+const e=()=>typeof HTMLElement!=="undefined"&&"popover"in HTMLElement.prototype&&typeof HTMLElement.prototype.showPopover==="function"&&typeof HTMLElement.prototype.hidePopover==="function";export{e as i};
+//# sourceMappingURL=p-seEHHqwi.js.map

package/dist/beeq/p-seEHHqwi.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"p-seEHHqwi.js","sources":["../../packages/beeq/src/shared/utils/isPopoverSupported.ts"],"sourcesContent":["/** Returns whether the current runtime provides the complete HTML Popover API. */\nexport const isPopoverSupported = (): boolean => {\n  return (\n    typeof HTMLElement !== 'undefined' &&\n    'popover' in HTMLElement.prototype &&\n    typeof HTMLElement.prototype.showPopover === 'function' &&\n    typeof HTMLElement.prototype.hidePopover === 'function'\n  );\n};\n"],"names":[],"mappings":";;;;AAAA;AACO,MAAM,kBAAkB,GAAG,MAAc;AAC9C,IAAA,QACE,OAAO,WAAW,KAAK,WAAW;QAClC,SAAS,IAAI,WAAW,CAAC,SAAS;AAClC,QAAA,OAAO,WAAW,CAAC,SAAS,CAAC,WAAW,KAAK,UAAU;QACvD,OAAO,WAAW,CAAC,SAAS,CAAC,WAAW,KAAK,UAAU;AAE3D;;;;"}

package/dist/beeq/svg/.icons-meta.json

@@ -8,6 +8,6 @@
   "svgFolder": "core-2b75f3ad12b420c9504ef05df8d2564a28f8500e",
   "iconCount": 9072,
   "iconsHash": "sha256-4efb20f7b589cd783efce9373314d826099238bded039010f494a475d6de7d3a",
-  "generatedAt": "2026-07-15T07:09:16.849Z",
+  "generatedAt": "2026-08-13T02:34:25.371Z",
   "observedChecksum": "sha256-e108846ce4e8235e6327451769c16cea1f2d15d4ee9b739d6434444ce6f712b4"
 }

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

@@ -362,58 +362,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-checkbox",
-      "description": "The checkbox is a UI component that allows users to select one or more options from a list of choices.\nIt is commonly used in forms, surveys, and settings pages.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\nCheckbox label\n</bq-checkbox>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the checkbox state changes\n- **bqFocus** - Handler to be called when the checkbox gets focus\n- **bqBlur** - Handler to be called when the checkbox loses focus\n- **bqChange** - Handler to be called when the checkbox state changes\n- **bqFocus** - Handler to be called when the checkbox gets focus\n- **bqBlur** - Handler to be called when the checkbox loses focus\n\n### **Methods:**\n - **vClick()** - Simulate a click event on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.click()`.\n- **vFocus()** - Sets focus on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`.\n- **vBlur()** - Remove focus from the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`.\n\n### **Slots:**\n - _default_ - The content of the checkbox component\n\n### **CSS Properties:**\n - **--bq-checkbox--background-color** - Checkbox background color _(default: undefined)_\n- **--bq-checkbox--border-radius** - Checkbox border radius _(default: undefined)_\n- **--bq-checkbox--border-width** - Checkbox border width _(default: undefined)_\n- **--bq-checkbox--size** - Checkbox size _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the checkbox component.\n- **control** - The container `<div>` element that holds the custom checkbox.\n- **input** - The native HTML `<input type=\"checkbox\">` used under the hood.\n- **checkbox** - The `<span>` element that renders the custom checked/indeterminate state.\n- **label** - The `<span>` element that holds the text content.",
-      "attributes": [
-        {
-          "name": "background-on-hover",
-          "description": "If true checkbox displays background on hover",
-          "values": []
-        },
-        {
-          "name": "form-id",
-          "description": "The form ID that the checkbox is associated with",
-          "values": []
-        },
-        {
-          "name": "form-validation-message",
-          "description": "The native form validation message",
-          "values": []
-        },
-        {
-          "name": "checked",
-          "description": "If true checkbox is checked",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "If true checkbox is disabled",
-          "values": []
-        },
-        {
-          "name": "indeterminate",
-          "description": "A state that is neither checked nor unchecked",
-          "values": []
-        },
-        {
-          "name": "name",
-          "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
-          "values": []
-        },
-        {
-          "name": "required",
-          "description": "If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted",
-          "values": []
-        },
-        {
-          "name": "value",
-          "description": "A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-date-picker",
       "description": "The Date Picker is a pure-Stencil calendar input.\n\nIt supports single, multi, and range selection, three navigation views\n(days → months → years), full localization via `Intl.DateTimeFormat`,\nmulti-month side-by-side rendering, and RTL layouts.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-date-picker\nfirst-day-of-week=\"1\"\nlocale=\"en-GB\"\nname=\"bq-date-picker\"\nplaceholder=\"Enter your date\"\ntype=\"single\"\nvalue=\"2026-07-15\"\n>\n<label slot=\"label\">Date picker label</label>\n</bq-date-picker>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Emitted when the input loses focus.\n- **bqChange** - Emitted when the value changes.\n- **bqClear** - Emitted when the value is cleared.\n- **bqFocus** - Emitted when the input receives focus.\n- **bqViewChange** - Emitted when the internal calendar view changes (days ↔ months ↔ years).\n- **bqBlur** - Callback handler emitted when the input loses focus.\n- **bqChange** - Callback handler emitted when the input value changes.\n- **bqClear** - Callback handler emitted when the value is cleared.\n- **bqFocus** - Callback handler emitted when the input receives focus.\n- **bqViewChange** - Callback handler emitted when the internal calendar view changes\n(e.g. from `days` to `months`, or from `years` back to `days`).\n\n### **Methods:**\n - **clear(): __** - Clears the selected value and any pending validation state (bad input,\nbounds overflow). Emits `bqClear`. No-op when the component is disabled.\n\n### **Slots:**\n - **label** - The label displayed above the input.\n- **prefix** - Content rendered before the input value.\n- **suffix** - Icon rendered inside the calendar trigger button (defaults to a calendar icon).\n- **clear-icon** - Icon used inside the clear button.\n\n### **CSS Properties:**\n - **--bq-date-picker--background-color** - Input background color. _(default: undefined)_\n- **--bq-date-picker--border-color** - Input border color. _(default: undefined)_\n- **--bq-date-picker--border-color-disabled** - Border color when disabled. _(default: undefined)_\n- **--bq-date-picker--border-color-focus** - Border color on focus. _(default: undefined)_\n- **--bq-date-picker--border-radius** - Input border radius. _(default: undefined)_\n- **--bq-date-picker--border-style** - Border style. _(default: undefined)_\n- **--bq-date-picker--border-width** - Border width. _(default: undefined)_\n- **--bq-date-picker--currentDate-border-color** - Border color for today's date. _(default: undefined)_\n- **--bq-date-picker--currentDate-border-width** - Border width for today's date. _(default: undefined)_\n- **--bq-date-picker--day-size** - Size of a day cell in the calendar. _(default: undefined)_\n- **--bq-date-picker--gap** - Gap between the input content and prefix/suffix. _(default: undefined)_\n- **--bq-date-picker--header-title-color** - Color of the per-panel month label in multi-panel view. _(default: undefined)_\n- **--bq-date-picker--icon-size** - Size of the icons used in prefix/suffix/clear. _(default: undefined)_\n- **--bq-date-picker--label-margin-bottom** - Space below the label. _(default: undefined)_\n- **--bq-date-picker--label-text-color** - Label text color. _(default: undefined)_\n- **--bq-date-picker--label-text-size** - Label text size. _(default: undefined)_\n- **--bq-date-picker--padding-end** - Input padding end. _(default: undefined)_\n- **--bq-date-picker--padding-start** - Input padding start. _(default: undefined)_\n- **--bq-date-picker--paddingY** - Input vertical padding. _(default: undefined)_\n- **--bq-date-picker--range-background-color** - Background color for range start/end days. _(default: undefined)_\n- **--bq-date-picker--range-inner-background-color** - Background color for inner range days. _(default: undefined)_\n- **--bq-date-picker--row-gap** - Vertical space between day-grid rows. _(default: undefined)_\n- **--bq-date-picker--text-color** - Input text color. _(default: undefined)_\n- **--bq-date-picker--text-placeholder-color** - Placeholder text color. _(default: undefined)_\n- **--bq-date-picker--text-size** - Input text size. _(default: undefined)_\n- **--bq-date-picker--view-cell-background-hover** - Hover background for day/month/year cells. _(default: undefined)_\n- **--bq-date-picker--view-cell-background-selected** - Selected background for day/month/year cells. _(default: undefined)_\n- **--bq-date-picker--view-cell-height** - Height of month/year cells. _(default: undefined)_\n- **--bq-date-picker--view-cell-radius** - Border radius of day/month/year cells. _(default: undefined)_\n- **--bq-date-picker--view-cell-text-selected** - Text color for selected day/month/year cells. _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **label** - The label slot container.\n- **control** - The input control wrapper.\n- **prefix** - The prefix slot container.\n- **suffix** - The suffix slot container.\n- **input** - The native input element.\n- **clear-btn** - The clear button.\n- **calendar-trigger** - The calendar icon trigger button.\n- **button** - Any button rendered inside the calendar (nav or day/month/year cell).\n- **panel** - The dropdown panel container.\n- **calendar__container** - The calendar panels wrapper.\n- **calendar__header** - The header row (prev / title / next).\n- **calendar__heading** - The header title button (or month label above a panel).\n- **calendar__previous** - The previous navigation button.\n- **calendar__next** - The next navigation button.\n- **calendar__table** - The day-view `<table>` element.\n- **calendar__head** - The day-view table header row wrapper.\n- **calendar__tr** - Any row within the day-view table.\n- **calendar__th** - The day-view weekday header cells.\n- **calendar__week** - Body rows in the day-view table.\n- **calendar__td** - Body cells in the day-view table.\n- **calendar__day** - Any day button in the day view.\n- **calendar__today** - The button representing today's date.\n- **calendar__selected** - Any selected day.\n- **calendar__outside** - Any day outside the visible month.\n- **calendar__disallowed** - Any day rejected by `isDateDisallowed`.\n- **calendar__disabled** - Any button disabled by min/max.\n- **calendar__range-start** - The first day of a range selection.\n- **calendar__range-end** - The last day of a range selection.\n- **calendar__range-inner** - Days between the start and end of a range.\n- **calendar__months** - The month-view grid.\n- **calendar__month** - Any month button.\n- **calendar__month-selected** - The currently selected month.\n- **calendar__years** - The year-view grid.\n- **calendar__year** - Any year button.\n- **calendar__year-selected** - The currently selected year.",
@@ -601,6 +549,58 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-checkbox",
+      "description": "The checkbox is a UI component that allows users to select one or more options from a list of choices.\nIt is commonly used in forms, surveys, and settings pages.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-checkbox name=\"bq-checkbox\" value=\"checkbox-value\" background-on-hover>\nCheckbox label\n</bq-checkbox>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqChange** - Handler to be called when the checkbox state changes\n- **bqFocus** - Handler to be called when the checkbox gets focus\n- **bqBlur** - Handler to be called when the checkbox loses focus\n- **bqChange** - Handler to be called when the checkbox state changes\n- **bqFocus** - Handler to be called when the checkbox gets focus\n- **bqBlur** - Handler to be called when the checkbox loses focus\n\n### **Methods:**\n - **vClick()** - Simulate a click event on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.click()`.\n- **vFocus()** - Sets focus on the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.focus()`.\n- **vBlur()** - Remove focus from the native `<input>` HTML element used under the hood.\nUse this method instead of the global `element.blur()`.\n\n### **Slots:**\n - _default_ - The content of the checkbox component\n\n### **CSS Properties:**\n - **--bq-checkbox--background-color** - Checkbox background color _(default: undefined)_\n- **--bq-checkbox--border-radius** - Checkbox border radius _(default: undefined)_\n- **--bq-checkbox--border-width** - Checkbox border width _(default: undefined)_\n- **--bq-checkbox--size** - Checkbox size _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's internal wrapper of the checkbox component.\n- **control** - The container `<div>` element that holds the custom checkbox.\n- **input** - The native HTML `<input type=\"checkbox\">` used under the hood.\n- **checkbox** - The `<span>` element that renders the custom checked/indeterminate state.\n- **label** - The `<span>` element that holds the text content.",
+      "attributes": [
+        {
+          "name": "background-on-hover",
+          "description": "If true checkbox displays background on hover",
+          "values": []
+        },
+        {
+          "name": "form-id",
+          "description": "The form ID that the checkbox is associated with",
+          "values": []
+        },
+        {
+          "name": "form-validation-message",
+          "description": "The native form validation message",
+          "values": []
+        },
+        {
+          "name": "checked",
+          "description": "If true checkbox is checked",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "If true checkbox is disabled",
+          "values": []
+        },
+        {
+          "name": "indeterminate",
+          "description": "A state that is neither checked nor unchecked",
+          "values": []
+        },
+        {
+          "name": "name",
+          "description": "Name of the HTML input form control. Submitted with the form as part of a name/value pair",
+          "values": []
+        },
+        {
+          "name": "required",
+          "description": "If `true`, it will indicate that the user must specify a value for the checkbox before the owning form can be submitted",
+          "values": []
+        },
+        {
+          "name": "value",
+          "description": "A string representing the value of the checkbox. Primarily used to differentiate a list of related checkboxes that have the same name",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-dialog",
       "description": "The Dialog component is used to display additional content or prompt a user for action.\nIt provides a way to display additional information, options, or controls in a separate, non-obstructive interface element.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-dialog footer-appearance=\"standard\" border=\"m\" size=\"medium\">\n<h5 class=\"bold flex items-center gap-s\" slot=\"title\">\n<bq-icon name=\"info\" size=\"30\" color=\"text--accent\" role=\"img\" title=\"Info\"></bq-icon>\nTitle\n</h5>\n<p>\nLorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's\nstandard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a\ntype specimen book.\n</p>\n<div class=\"flex gap-xs\" slot=\"footer\">\n<bq-button appearance=\"link\">Button</bq-button>\n<bq-button variant=\"ghost\">Button</bq-button>\n<bq-button variant=\"standard\" slot=\"footer\">Button</bq-button>\n</div>\n</bq-dialog>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed.\n- **bqClose** - Callback handler emitted when the dialog will close.\n- **bqOpen** - Callback handler emitted when the dialog will open.\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening.\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing.\n- **bqCancel** - Callback handler emitted when the dialog has been canceled or dismissed\n- **bqClose** - Callback handler emitted when the dialog will close\n- **bqOpen** - Callback handler emitted when the dialog will open\n- **bqAfterOpen** - Callback handler emitted when the dialog finish opening\n- **bqAfterClose** - Callback handler emitted when the dialog finish closing\n\n### **Methods:**\n - **show()** - Open the dialog\n- **hide()** - Closes the dialog\n- **cancel()** - Dismiss or cancel the dialog\n\n### **Slots:**\n - **title** - The title content of the dialog.\n- _default_ - The body content of the dialog.\n- **footer** - The footer content of the dialog.\n- **button-close** - The close button content of the dialog.\n\n### **CSS Properties:**\n - **--bq-dialog--background** - Dialog background color _(default: undefined)_\n- **--bq-dialog--background-backdrop** - Dialog backdrop background color _(default: undefined)_\n- **--bq-dialog--box-shadow** - Dialog box shadow _(default: undefined)_\n- **--bq-dialog--border-color** - Dialog border color _(default: undefined)_\n- **--bq-dialog--border-style** - Dialog border style _(default: undefined)_\n- **--bq-dialog--border-width** - Dialog border width _(default: undefined)_\n- **--bq-dialog--border-radius** - Dialog border radius _(default: undefined)_\n- **--bq-dialog--padding** - Dialog padding _(default: undefined)_\n- **--bq-dialog--content-footer-gap** - Dialog gap distance between content and footer elements _(default: undefined)_\n- **--bq-dialog--title-body-gap** - Dialog gap distance between title and body elements _(default: undefined)_\n- **--bq-dialog--width-small** - Dialog small width _(default: undefined)_\n- **--bq-dialog--width-medium** - Dialog medium width _(default: undefined)_\n- **--bq-dialog--width-large** - Dialog large width _(default: undefined)_\n- **--bq-dialog-z-index** - Dialog z-index applied when opened _(default: undefined)_\n\n### **CSS Parts:**\n - **body** - The `<main>` that holds the dialog body content.\n- **button-close** - The button that closes the dialog on click.\n- **content** - The `<div>` container that holds the dialog title and body content.\n- **dialog** - The `<dialog>` wrapper container inside the shadow DOM.\n- **footer** - The `<footer>` that holds footer content.\n- **header** - The `<header>` that holds the icon, title, description and close button.\n- **title** - The `<div>` that holds the title content.",
@@ -1468,28 +1468,6 @@
       ],
       "references": []
     },
-    {
-      "name": "bq-side-menu-item",
-      "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus.\n- **bqClick** - Handler to be called when the button gets focused.\n- **bqFocus** - Handler to be called when the button is clicked.\n- **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when the button is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix part of menu item.\n- _default_ - The content of the menu item.\n- **suffix** - The suffix part of menu item.\n\n### **CSS Properties:**\n - **--bq-side-menu-item--bg-default** - Side menu item default background color _(default: undefined)_\n- **--bq-side-menu-item--bg-active** - Side menu item active background color _(default: undefined)_\n- **--bq-side-menu-item--text-default** - Side menu item default text color _(default: undefined)_\n- **--bq-side-menu-item--text-active** - Side menu item active text color _(default: undefined)_\n- **--bq-side-menu-item--paddingX** - Side menu item vertical padding _(default: undefined)_\n- **--bq-side-menu-item--paddingY** - Side menu item horizontal padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **label** - The label slot\n- **prefix** - The prefix slot\n- **suffix** - The suffix slot\n- **panel** - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
-      "attributes": [
-        {
-          "name": "active",
-          "description": "If `true`, the menu item will be shown as active/selected.",
-          "values": []
-        },
-        {
-          "name": "collapse",
-          "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
-          "values": []
-        },
-        {
-          "name": "disabled",
-          "description": "If `true`, the menu item will be disabled (no interaction allowed).",
-          "values": []
-        }
-      ],
-      "references": []
-    },
     {
       "name": "bq-slider",
       "description": "Sliders provide a visual representation of adjustable content, enabling users to change values by dragging a handle along a horizontal track.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-slider max=\"100\" value=\"30\"></bq-slider>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the slider loses focus.\n- **bqChange** - Handler to be called when changing the value on range inputs.\n- **bqFocus** - Handler to be called when the slider gets focused.\n- **bqChange** - Handler to be called when change the value on range inputs\n- **bqBlur** - Handler to be called when the slider loses focus\n- **bqFocus** - Handler to be called when the slider gets focused\n\n### **CSS Properties:**\n - **--bq-slider--size** - The height of the slider track/progress area _(default: undefined)_\n- **--bq-slider--border-radius** - Slider border radius _(default: undefined)_\n- **--bq-slider--thumb-size** - Slider hover thumb size _(default: undefined)_\n- **--bq-slider--progress-color** - Slider progress background color _(default: undefined)_\n- **--bq-slider--trackarea-color** - Slider track background color _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component's base wrapper.\n- **container** - The container of the slider.\n- **track-area** - The track area of the slider.\n- **progress-area** - The progress area of the slider.\n- **input-min** - The input element for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n- **input-max** - The input element for the maximum value.\n- **label-start** - The label for the value when the slider type is `single` or the minimum value when the slider type is `range`.\n- **label-end** - The label for maximum value when the slider type is `range`.",
@@ -1561,6 +1539,28 @@
       ],
       "references": []
     },
+    {
+      "name": "bq-side-menu-item",
+      "description": "Represents the default side menu item for standard navigation elements, providing a clean and straightforward way to display menu options.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-side-menu-item>\n<bq-icon name=\"star-four\" slot=\"prefix\"></bq-icon>\nMenu item\n<bq-badge slot=\"suffix\">5</bq-badge>\n</bq-side-menu-item>\n```\n\n</figure>\n---\n\n\n### **Events:**\n - **bqBlur** - Handler to be called when the button loses focus.\n- **bqClick** - Handler to be called when the button gets focused.\n- **bqFocus** - Handler to be called when the button is clicked.\n- **bqBlur** - Handler to be called when the button loses focus\n- **bqFocus** - Handler to be called when the button is clicked\n- **bqClick** - Handler to be called when button gets focus\n\n### **Slots:**\n - **prefix** - The prefix part of menu item.\n- _default_ - The content of the menu item.\n- **suffix** - The suffix part of menu item.\n\n### **CSS Properties:**\n - **--bq-side-menu-item--bg-default** - Side menu item default background color _(default: undefined)_\n- **--bq-side-menu-item--bg-active** - Side menu item active background color _(default: undefined)_\n- **--bq-side-menu-item--text-default** - Side menu item default text color _(default: undefined)_\n- **--bq-side-menu-item--text-active** - Side menu item active text color _(default: undefined)_\n- **--bq-side-menu-item--paddingX** - Side menu item vertical padding _(default: undefined)_\n- **--bq-side-menu-item--paddingY** - Side menu item horizontal padding _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The component wrapper container inside the shadow DOM\n- **label** - The label slot\n- **prefix** - The prefix slot\n- **suffix** - The suffix slot\n- **panel** - The `<div>` container that holds the tooltip content (when the side menu is collapsed)\n- **trigger** - The `<div>` container that holds the element which displays tooltip on hover (when the side menu is collapsed)",
+      "attributes": [
+        {
+          "name": "active",
+          "description": "If `true`, the menu item will be shown as active/selected.",
+          "values": []
+        },
+        {
+          "name": "collapse",
+          "description": "If `true`, the item label and suffix will be hidden and the `width` will be reduced according to its parent.",
+          "values": []
+        },
+        {
+          "name": "disabled",
+          "description": "If `true`, the menu item will be disabled (no interaction allowed).",
+          "values": []
+        }
+      ],
+      "references": []
+    },
     {
       "name": "bq-spinner",
       "description": "Spinners are designed for users to display data loading.\n\n## Examples\n\n<figure class=\"example\"><figcaption>How to use it</figcaption>\n\n```html\n<bq-spinner size=\"medium\" text-position=\"bellow\">\n<span>Loading...</span>\n</bq-spinner>\n```\n\n</figure>\n---\n\n\n### **Slots:**\n - **icon** - The icon slot container.\n- _default_ - The content of the spinner component.\n\n### **CSS Properties:**\n - **--bq-spinner--color** - Spinner color _(default: undefined)_\n- **--bq-spinner--size-large** - Spinner large size _(default: undefined)_\n- **--bq-spinner--size-medium** - Spinner medium size _(default: undefined)_\n- **--bq-spinner--size-small** - Spinner small size _(default: undefined)_\n- **--bq-spinner--large-text-fontSize** - Spinner large text font size _(default: undefined)_\n- **--bq-spinner--medium-text-fontSize** - Spinner medium text font size _(default: undefined)_\n- **--bq-spinner--small-text-fontSize** - Spinner small text font size _(default: undefined)_\n- **--bq-spinner--text-lineHeight** - Spinner text line height _(default: undefined)_\n\n### **CSS Parts:**\n - **base** - The div wrapper container used under the hood.\n- **icon** - The `<svg>` icon element used to spin/animate.\n- **custom-icon** - The `<span>` tag element that holds the custom icon element passed.\n- **text** - The `<span>` tag element that renders the label text inside the component.",

package/dist/cjs/beeq.cjs.js

@@ -43,7 +43,7 @@ var patchCloneNodeFix = (HTMLElementPrototype) => {
 
 patchBrowser().then(async (options) => {
   await index.globalScripts();
-  return index.bootstrapLazy(JSON.parse("[[\"bq-select.cjs\",[[849,\"bq-select\",{\"autofocus\":[516],\"clearButtonLabel\":[513,\"clear-button-label\"],\"debounceTime\":[1538,\"debounce-time\"],\"disableScrollLock\":[516,\"disable-scroll-lock\"],\"disabled\":[1028],\"disableClear\":[516,\"disable-clear\"],\"distance\":[514],\"form\":[513],\"formValidationMessage\":[1025,\"form-validation-message\"],\"keepOpenOnSelect\":[516,\"keep-open-on-select\"],\"name\":[513],\"maxTagsVisible\":[1026,\"max-tags-visible\"],\"multiple\":[516],\"open\":[1540],\"panelHeight\":[513,\"panel-height\"],\"placeholder\":[513],\"placement\":[513],\"readonly\":[516],\"required\":[516],\"sameWidth\":[516,\"same-width\"],\"skidding\":[514],\"strategy\":[513],\"validationStatus\":[513,\"validation-status\"],\"value\":[1537],\"displayValue\":[32],\"hasHelperText\":[32],\"selectedOptions\":[32],\"hasLabel\":[32],\"hasPrefix\":[32],\"hasSuffix\":[32],\"hasValue\":[32],\"clear\":[64],\"reset\":[64]},[[2,\"bqOpen\",\"handleOpenChange\"],[2,\"bqFocus\",\"stopOptionFocusBlurPropagation\"],[2,\"bqBlur\",\"stopOptionFocusBlurPropagation\"],[11,\"scroll\",\"handleScrollEvent\"]],{\"value\":[{\"handleValueChange\":0}],\"required\":[{\"handleRequiredPropChange\":0}]}]]],[\"bq-date-picker.cjs\",[[849,\"bq-date-picker\",{\"autofocus\":[516],\"clearButtonLabel\":[513,\"clear-button-label\"],\"calendarButtonLabel\":[513,\"calendar-button-label\"],\"disableClear\":[516,\"disable-clear\"],\"disabled\":[1540],\"distance\":[514],\"firstDayOfWeek\":[514,\"first-day-of-week\"],\"formatOptions\":[16],\"form\":[513],\"formValidationMessage\":[1025,\"form-validation-message\"],\"initialView\":[513,\"initial-view\"],\"isDateDisallowed\":[16],\"locale\":[513],\"max\":[513],\"min\":[513],\"months\":[1538],\"monthsPerView\":[513,\"months-per-view\"],\"name\":[513],\"open\":[1540],\"panelHeight\":[1537,\"panel-height\"],\"placeholder\":[513],\"placement\":[513],\"precision\":[513],\"required\":[516],\"skidding\":[514],\"showOutsideDays\":[516,\"show-outside-days\"],\"strategy\":[513],\"type\":[513],\"validationStatus\":[513,\"validation-status\"],\"value\":[1537],\"decadeStart\":[32],\"displayDate\":[32],\"focusedISO\":[32],\"focusedMonth\":[32],\"focusedYear\":[32],\"hasConstraintError\":[32],\"hasLabel\":[32],\"hasPrefix\":[32],\"hasValue\":[32],\"tentativeHover\":[32],\"view\":[32],\"viewDate\":[32],\"clear\":[64]},[[2,\"bqOpen\",\"handleOpenChange\"]],{\"value\":[{\"handleValueChange\":0}],\"formatOptions\":[{\"handleFormattingChange\":0}],\"locale\":[{\"handleFormattingChange\":0}],\"type\":[{\"handleTypeChange\":0},{\"checkPropValues\":0}],\"precision\":[{\"handlePrecisionChange\":0},{\"checkPropValues\":0}],\"max\":[{\"handleBoundsChange\":0}],\"min\":[{\"handleBoundsChange\":0}],\"required\":[{\"handleRequiredChange\":0}],\"firstDayOfWeek\":[{\"checkPropValues\":0}],\"initialView\":[{\"checkPropValues\":0}],\"monthsPerView\":[{\"checkPropValues\":0}],\"placement\":[{\"checkPropValues\":0}],\"strategy\":[{\"checkPropValues\":0}],\"validationStatus\":[{\"checkPropValues\":0}],\"months\":[{\"handleMonthsChange\":0}],\"open\":[{\"handleOpen\":0}],\"view\":[{\"handleViewChange\":0}]}]]],[\"bq-drawer.cjs\",[[769,\"bq-drawer\",{\"enableBackdrop\":[516,\"enable-backdrop\"],\"closeOnClickOutside\":[516,\"close-on-click-outside\"],\"closeOnEsc\":[516,\"close-on-esc\"],\"open\":[1540],\"placement\":[1537],\"position\":[1537],\"hasFooter\":[32],\"hasIcon\":[32],\"hide\":[64],\"show\":[64]},[[11,\"mousedown\",\"handleMouseClick\"],[10,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"handleOpenChange\":0}],\"placement\":[{\"handlePlacementChange\":0}],\"position\":[{\"handlePositionChange\":0}]}]]],[\"bq-alert.cjs\",[[769,\"bq-alert\",{\"autoDismiss\":[516,\"auto-dismiss\"],\"border\":[513],\"disableClose\":[516,\"disable-close\"],\"hideIcon\":[516,\"hide-icon\"],\"open\":[1540],\"time\":[514],\"type\":[513],\"sticky\":[516],\"hasContent\":[32],\"hasFooter\":[32],\"hide\":[64],\"show\":[64]},null,{\"autoDismiss\":[{\"handleTimeout\":0}],\"time\":[{\"handleTimeout\":0}],\"open\":[{\"handleOpenChange\":0}],\"type\":[{\"checkPropValues\":0}]}]]],[\"bq-dialog.cjs\",[[769,\"bq-dialog\",{\"border\":[513],\"disableBackdrop\":[516,\"disable-backdrop\"],\"disableCloseEscKeydown\":[516,\"disable-close-esc-keydown\"],\"disableCloseClickOutside\":[516,\"disable-close-click-outside\"],\"footerAppearance\":[513,\"footer-appearance\"],\"hideCloseButton\":[516,\"hide-close-button\"],\"open\":[1540],\"size\":[1537],\"hasContent\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64],\"cancel\":[64]},[[11,\"mousedown\",\"handleMouseClick\"],[10,\"keydown\",\"handleKeyDown\"]],{\"footerAppearance\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}],\"open\":[{\"handleOpenChange\":0}]}]]],[\"bq-input.cjs\",[[849,\"bq-input\",{\"autocapitalize\":[513],\"autocomplete\":[513],\"autofocus\":[516],\"clearButtonLabel\":[513,\"clear-button-label\"],\"debounceTime\":[1538,\"debounce-time\"],\"disabled\":[1028],\"disableClear\":[516,\"disable-clear\"],\"form\":[513],\"formValidationMessage\":[1025,\"form-validation-message\"],\"inputmode\":[1],\"max\":[520],\"maxlength\":[514],\"min\":[520],\"minlength\":[514],\"name\":[513],\"pattern\":[513],\"placeholder\":[513],\"readonly\":[516],\"required\":[516],\"step\":[520],\"type\":[513],\"validationStatus\":[513,\"validation-status\"],\"value\":[1544],\"hasHelperText\":[32],\"hasLabel\":[32],\"hasPrefix\":[32],\"hasSuffix\":[32],\"hasValue\":[32]},null,{\"value\":[{\"handleValueChange\":0}],\"required\":[{\"handleRequiredPropChange\":0}]}]]],[\"bq-notification.cjs\",[[769,\"bq-notification\",{\"autoDismiss\":[516,\"auto-dismiss\"],\"border\":[513],\"disableClose\":[516,\"disable-close\"],\"hideIcon\":[516,\"hide-icon\"],\"open\":[1540],\"time\":[514],\"type\":[513],\"hasContent\":[32],\"hasFooter\":[32],\"notificationPortal\":[32],\"hide\":[64],\"show\":[64],\"toast\":[64]},[[0,\"bqAfterClose\",\"afterNotificationClose\"]],{\"autoDismiss\":[{\"handleTimeout\":0}],\"time\":[{\"handleTimeout\":0}],\"open\":[{\"handleOpenChange\":0}],\"type\":[{\"checkPropValues\":0}]}]]],[\"bq-accordion.cjs\",[[769,\"bq-accordion\",{\"appearance\":[1537],\"disabled\":[516],\"expanded\":[1540],\"noAnimation\":[516,\"no-animation\"],\"rotate\":[516],\"size\":[1537],\"hasPrefix\":[32],\"hasSuffix\":[32]},[[0,\"accordionTransitionEnd\",\"onAccordionTransitionEnd\"]],{\"size\":[{\"checkPropValues\":0}],\"expanded\":[{\"handleExpandedChange\":0}],\"disabled\":[{\"handleDisabledChange\":0}],\"noAnimation\":[{\"handleJsAnimation\":0}]}]]],[\"bq-empty-state.cjs\",[[769,\"bq-empty-state\",{\"size\":[1537],\"hasBody\":[32],\"hasFooter\":[32]},null,{\"size\":[{\"checkPropValues\":0}]}]]],[\"bq-progress.cjs\",[[513,\"bq-progress\",{\"borderShape\":[513,\"border-shape\"],\"enableTooltip\":[516,\"enable-tooltip\"],\"indeterminate\":[516],\"label\":[516],\"thickness\":[513],\"type\":[513],\"value\":[1538]},null,{\"borderShape\":[{\"handleTypePropChange\":0}],\"thickness\":[{\"handleTypePropChange\":0}],\"type\":[{\"handleTypePropChange\":0}],\"value\":[{\"handleValuePropChange\":0}]}]]],[\"bq-side-menu-item.cjs\",[[769,\"bq-side-menu-item\",{\"active\":[4],\"collapse\":[4],\"disabled\":[4],\"textContent\":[32]}]]],[\"bq-slider.cjs\",[[593,\"bq-slider\",{\"debounceTime\":[514,\"debounce-time\"],\"disabled\":[516],\"enableValueIndicator\":[516,\"enable-value-indicator\"],\"gap\":[1538],\"max\":[514],\"min\":[514],\"name\":[513],\"step\":[514],\"type\":[513],\"value\":[1544],\"enableTooltip\":[516,\"enable-tooltip\"],\"tooltipAlwaysVisible\":[516,\"tooltip-always-visible\"],\"minValue\":[32],\"maxValue\":[32],\"minThumbPosition\":[32],\"maxThumbPosition\":[32]},null,{\"value\":[{\"handleValuePropChange\":0}],\"step\":[{\"handleStepPropChange\":0}],\"gap\":[{\"handleGapChange\":0}]}]]],[\"bq-status.cjs\",[[769,\"bq-status\",{\"type\":[513]},null,{\"type\":[{\"checkPropValues\":0}]}]]],[\"bq-step-item.cjs\",[[785,\"bq-step-item\",{\"dividerColor\":[513,\"divider-color\"],\"isLast\":[516,\"is-last\"],\"orientation\":[513],\"size\":[513],\"status\":[1537],\"type\":[513]},null,{\"size\":[{\"checkPropValues\":0}],\"status\":[{\"checkPropValues\":0}]}]]],[\"bq-switch.cjs\",[[849,\"bq-switch\",{\"backgroundOnHover\":[516,\"background-on-hover\"],\"checked\":[1540],\"disabled\":[516],\"formValidationMessage\":[1025,\"form-validation-message\"],\"fullWidth\":[516,\"full-width\"],\"innerLabel\":[513,\"inner-label\"],\"justifyContent\":[513,\"justify-content\"],\"name\":[513],\"required\":[516],\"reverseOrder\":[516,\"reverse-order\"],\"value\":[513],\"hasLabel\":[32],\"vClick\":[64],\"vFocus\":[64],\"vBlur\":[64]},null,{\"required\":[{\"handleRequiredChange\":0}]}]]],[\"bq-toast.cjs\",[[769,\"bq-toast\",{\"border\":[513],\"type\":[1537],\"placement\":[1537],\"hideIcon\":[1540,\"hide-icon\"],\"open\":[1540],\"time\":[514],\"toastPortal\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64]},[[0,\"bqHide\",\"onNotificationHide\"]],{\"type\":[{\"checkPropValues\":0}],\"placement\":[{\"checkPropValues\":0}],\"time\":[{\"handleTimeChange\":0}],\"open\":[{\"handleOpenChange\":0}]}]]],[\"bq-accordion-group.cjs\",[[769,\"bq-accordion-group\",{\"appearance\":[1537],\"expandAll\":[516,\"expand-all\"],\"noAnimation\":[516,\"no-animation\"],\"multiple\":[516],\"size\":[1537]},[[1,\"bqClick\",\"onBqClick\"]],{\"appearance\":[{\"checkPropValues\":0}],\"expandAll\":[{\"checkPropValues\":0}],\"noAnimation\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}]}]]],[\"bq-avatar.cjs\",[[769,\"bq-avatar\",{\"altText\":[513,\"alt-text\"],\"image\":[513],\"label\":[513],\"initials\":[513],\"shape\":[513],\"size\":[1537],\"hasError\":[32]},null,{\"image\":[{\"handleImagePropChange\":0}],\"shape\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0},{\"onInitialsChange\":0}],\"initials\":[{\"onInitialsChange\":0}]}]]],[\"bq-breadcrumb.cjs\",[[769,\"bq-breadcrumb\",{\"label\":[513]}]]],[\"bq-breadcrumb-item.cjs\",[[769,\"bq-breadcrumb-item\",{\"href\":[513],\"target\":[513],\"rel\":[513]}]]],[\"bq-card.cjs\",[[769,\"bq-card\",{\"type\":[513],\"border\":[513]},null,{\"type\":[{\"checkPropValue\":0}]}]]],[\"bq-checkbox.cjs\",[[849,\"bq-checkbox\",{\"backgroundOnHover\":[516,\"background-on-hover\"],\"formId\":[513,\"form-id\"],\"formValidationMessage\":[1025,\"form-validation-message\"],\"checked\":[1540],\"disabled\":[516],\"indeterminate\":[1540],\"name\":[513],\"required\":[516],\"value\":[513],\"vClick\":[64],\"vFocus\":[64],\"vBlur\":[64]},null,{\"checked\":[{\"handleCheckedPropChange\":0}],\"indeterminate\":[{\"handleIndeterminatePropChange\":0}],\"required\":[{\"handleRequiredPropChange\":0}]}]]],[\"bq-option.cjs\",[[769,\"bq-option\",{\"hidden\":[516],\"disabled\":[516],\"displayValue\":[513,\"display-value\"],\"selected\":[516],\"value\":[513],\"hasPrefix\":[32],\"hasSuffix\":[32]},[[0,\"keydown\",\"onKeyDown\"]]]]],[\"bq-option-group.cjs\",[[257,\"bq-option-group\"]]],[\"bq-page-title.cjs\",[[769,\"bq-page-title\",{\"haveBackNavigation\":[32],\"hasSuffix\":[32],\"hasSubTitle\":[32]}]]],[\"bq-radio.cjs\",[[785,\"bq-radio\",{\"backgroundOnHover\":[516,\"background-on-hover\"],\"checked\":[1540],\"disabled\":[516],\"forceDisabled\":[516,\"force-disabled\"],\"formId\":[513,\"form-id\"],\"name\":[513],\"required\":[516],\"value\":[513],\"vClick\":[64],\"vFocus\":[64],\"vBlur\":[64],\"getNativeInput\":[64]}]]],[\"bq-radio-group.cjs\",[[849,\"bq-radio-group\",{\"backgroundOnHover\":[516,\"background-on-hover\"],\"debounceTime\":[1538,\"debounce-time\"],\"disabled\":[516],\"fieldset\":[516],\"name\":[513],\"orientation\":[1537],\"required\":[516],\"requiredValidationMessage\":[513,\"required-validation-message\"],\"value\":[1537],\"checkedRadio\":[32],\"tabIndex\":[32]},[[2,\"bqClick\",\"onBqClick\"],[0,\"bqKeyDown\",\"onBqKeyDown\"],[2,\"bqFocus\",\"onBqFocus\"],[2,\"bqBlur\",\"onBqBlur\"]],{\"debounceTime\":[{\"handleDebounceTimeChange\":0}],\"disabled\":[{\"handleDisabledChange\":0},{\"handleGroupProperties\":0}],\"backgroundOnHover\":[{\"handleGroupProperties\":0}],\"name\":[{\"handleGroupProperties\":0}],\"required\":[{\"handleGroupProperties\":0},{\"handleRequiredChange\":0}],\"orientation\":[{\"checkPropValues\":0}],\"value\":[{\"handleValueChange\":0}]}]]],[\"bq-side-menu.cjs\",[[769,\"bq-side-menu\",{\"appearance\":[513],\"collapse\":[516],\"size\":[513],\"documentBody\":[32],\"toggleCollapse\":[64]},[[1,\"bqClick\",\"onMenuItemClick\"]],{\"collapse\":[{\"onCollapsePropChange\":0}]}]]],[\"bq-spinner.cjs\",[[769,\"bq-spinner\",{\"animation\":[516],\"textPosition\":[513,\"text-position\"],\"size\":[513],\"hasIconSlot\":[32],\"hasSlot\":[32],\"slotContentLength\":[32]},null,{\"textPosition\":[{\"handleTextPositionProp\":0}],\"size\":[{\"handleSizeProp\":0}],\"hasIconSlot\":[{\"handleHasIconSlot\":0}]}]]],[\"bq-steps.cjs\",[[769,\"bq-steps\",{\"dividerColor\":[513,\"divider-color\"],\"orientation\":[513],\"size\":[513],\"type\":[513],\"setCurrentStepItem\":[64]},null,{\"dividerColor\":[{\"checkPropValues\":0}],\"orientation\":[{\"checkPropValues\":0}],\"type\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}]}]]],[\"bq-tab.cjs\",[[769,\"bq-tab\",{\"active\":[1540],\"controls\":[513],\"disabled\":[516],\"orientation\":[513],\"placement\":[513],\"size\":[513],\"tabId\":[513,\"tab-id\"],\"tabIndex\":[32],\"hasIcon\":[32],\"vClick\":[64],\"vFocus\":[64],\"vBlur\":[64],\"enableFocus\":[64]},null,{\"size\":[{\"checkPropValues\":0}],\"orientation\":[{\"checkPropValues\":0}],\"placement\":[{\"checkPropValues\":0}]}]]],[\"bq-tab-group.cjs\",[[769,\"bq-tab-group\",{\"debounceTime\":[1538,\"debounce-time\"],\"disableDivider\":[516,\"disable-divider\"],\"orientation\":[513],\"placement\":[513],\"size\":[513],\"value\":[1537]},[[19,\"keyup\",\"onKeyUp\"],[1,\"bqClick\",\"onBqClick\"],[1,\"bqKeyDown\",\"onBqKeyDown\"],[3,\"bqBlur\",\"onBqBlur\"]],{\"debounceTime\":[{\"checkDebounceChange\":0}],\"size\":[{\"checkPropValues\":0}],\"value\":[{\"checkPropValues\":0}],\"orientation\":[{\"checkPropValues\":0}],\"placement\":[{\"checkPropValues\":0}]}]]],[\"bq-textarea.cjs\",[[849,\"bq-textarea\",{\"autocapitalize\":[513],\"autocomplete\":[513],\"autofocus\":[516],\"autoGrow\":[516,\"auto-grow\"],\"debounceTime\":[1538,\"debounce-time\"],\"disabled\":[516],\"disableResize\":[516,\"disable-resize\"],\"form\":[513],\"formValidationMessage\":[1025,\"form-validation-message\"],\"maxlength\":[514],\"name\":[513],\"placeholder\":[513],\"readonly\":[516],\"required\":[516],\"rows\":[514],\"spellcheck\":[516],\"validationStatus\":[1537,\"validation-status\"],\"value\":[1025],\"wrap\":[513],\"hasHelperText\":[32],\"hasLabel\":[32]},null,{\"value\":[{\"handleValueChange\":0}],\"required\":[{\"handleRequiredPropChange\":0}]}]]],[\"bq-badge.cjs\",[[769,\"bq-badge\",{\"backgroundColor\":[1537,\"background-color\"],\"textColor\":[1537,\"text-color\"],\"size\":[1537],\"contentLength\":[32]},null,{\"size\":[{\"handleSizePropChange\":0}]}]]],[\"bq-button_2.cjs\",[[849,\"bq-button\",{\"appearance\":[513],\"block\":[516],\"border\":[513],\"disabled\":[4],\"download\":[1],\"href\":[513],\"justifyContent\":[513,\"justify-content\"],\"label\":[513],\"loading\":[4],\"onlyIcon\":[4,\"only-icon\"],\"size\":[513],\"target\":[513],\"type\":[513],\"variant\":[513],\"hasPrefix\":[32],\"hasSuffix\":[32]},null,{\"appearance\":[{\"checkPropValues\":0}],\"type\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}],\"variant\":[{\"checkPropValues\":0}],\"onlyIcon\":[{\"handleOnlyIconPropChange\":0}]}],[513,\"bq-icon\",{\"label\":[513],\"color\":[513],\"name\":[513],\"size\":[520],\"src\":[513],\"weight\":[513],\"svgContent\":[32]},null,{\"color\":[{\"handlePropsChange\":0}],\"name\":[{\"handlePropsChange\":0}],\"size\":[{\"handlePropsChange\":0}],\"weight\":[{\"handleWeightChange\":0}]}]]],[\"bq-option-list_2.cjs\",[[785,\"bq-tag\",{\"border\":[513],\"clickable\":[516],\"color\":[513],\"disabled\":[516],\"hidden\":[1540],\"removable\":[516],\"selected\":[1540],\"size\":[513],\"variant\":[513],\"hasPrefix\":[32],\"hide\":[64],\"show\":[64]},null,{\"size\":[{\"checkPropValues\":0}],\"variant\":[{\"checkPropValues\":0}]}],[769,\"bq-option-list\",{\"ariaLabel\":[513,\"aria-label\"]},[[1,\"bqClick\",\"onBqSelect\"],[1,\"bqEnter\",\"onBqSelect\"]]]]],[\"bq-divider.cjs\",[[769,\"bq-divider\",{\"dashed\":[4],\"orientation\":[513],\"strokeColor\":[513,\"stroke-color\"],\"titleAlignment\":[513,\"title-alignment\"],\"strokeDashWidth\":[514,\"stroke-dash-width\"],\"strokeDashGap\":[514,\"stroke-dash-gap\"],\"strokeThickness\":[514,\"stroke-thickness\"],\"strokeBasis\":[514,\"stroke-basis\"],\"strokeLinecap\":[513,\"stroke-linecap\"],\"hasTitle\":[32]},null,{\"orientation\":[{\"checkPropValues\":0}],\"titleAlignment\":[{\"checkPropValues\":0}],\"strokeLinecap\":[{\"checkPropValues\":0}]}]]],[\"bq-tooltip.cjs\",[[769,\"bq-tooltip\",{\"alwaysVisible\":[4,\"always-visible\"],\"distance\":[514],\"hideArrow\":[516,\"hide-arrow\"],\"placement\":[513],\"sameWidth\":[516,\"same-width\"],\"displayOn\":[513,\"display-on\"],\"visible\":[1540],\"show\":[64],\"hide\":[64]},[[4,\"keydown\",\"handleDocumentKeyDown\"],[5,\"mousedown\",\"handleDocumentMouseDown\"],[7,\"scroll\",\"handleDocumentScroll\"]],{\"visible\":[{\"handleVisibleChange\":0}],\"distance\":[{\"handleFloatingUIOptionsChange\":0}],\"hideArrow\":[{\"handleFloatingUIOptionsChange\":0}],\"placement\":[{\"handleFloatingUIOptionsChange\":0}],\"sameWidth\":[{\"handleFloatingUIOptionsChange\":0}]}]]],[\"bq-dropdown_2.cjs\",[[769,\"bq-dropdown\",{\"disableScrollLock\":[516,\"disable-scroll-lock\"],\"disabled\":[516],\"distance\":[514],\"keepOpenOnSelect\":[516,\"keep-open-on-select\"],\"placement\":[513],\"open\":[1540],\"panelHeight\":[513,\"panel-height\"],\"sameWidth\":[516,\"same-width\"],\"skidding\":[514],\"strategy\":[513]},[[1,\"bqSelect\",\"onItemSelect\"],[5,\"click\",\"onClickOutside\"],[9,\"keyup\",\"onEscape\"],[11,\"scroll\",\"handleScrollEvent\"]],{\"open\":[{\"onOpenChange\":0}],\"disabled\":[{\"handleDisabledChange\":0}]}],[769,\"bq-panel\",{\"disableScrollLock\":[516,\"disable-scroll-lock\"],\"distance\":[514],\"placement\":[513],\"open\":[1540],\"sameWidth\":[516,\"same-width\"],\"skidding\":[514],\"strategy\":[513]},null,{\"open\":[{\"handleOpenChange\":0}],\"distance\":[{\"onPropChange\":0}],\"placement\":[{\"onPropChange\":0}],\"sameWidth\":[{\"onPropChange\":0}],\"skidding\":[{\"onPropChange\":0}],\"strategy\":[{\"onPropChange\":0}]}]]]]"), options);
+  return index.bootstrapLazy(JSON.parse("[[\"bq-select.cjs\",[[849,\"bq-select\",{\"autofocus\":[516],\"clearButtonLabel\":[513,\"clear-button-label\"],\"debounceTime\":[1538,\"debounce-time\"],\"disableScrollLock\":[516,\"disable-scroll-lock\"],\"disabled\":[1028],\"disableClear\":[516,\"disable-clear\"],\"distance\":[514],\"form\":[513],\"formValidationMessage\":[1025,\"form-validation-message\"],\"keepOpenOnSelect\":[516,\"keep-open-on-select\"],\"name\":[513],\"maxTagsVisible\":[1026,\"max-tags-visible\"],\"multiple\":[516],\"open\":[1540],\"panelHeight\":[513,\"panel-height\"],\"placeholder\":[513],\"placement\":[513],\"readonly\":[516],\"required\":[516],\"sameWidth\":[516,\"same-width\"],\"skidding\":[514],\"strategy\":[513],\"validationStatus\":[513,\"validation-status\"],\"value\":[1537],\"displayValue\":[32],\"hasHelperText\":[32],\"selectedOptions\":[32],\"hasLabel\":[32],\"hasPrefix\":[32],\"hasSuffix\":[32],\"hasValue\":[32],\"clear\":[64],\"reset\":[64]},[[2,\"bqOpen\",\"handleOpenChange\"],[2,\"bqFocus\",\"stopOptionFocusBlurPropagation\"],[2,\"bqBlur\",\"stopOptionFocusBlurPropagation\"],[11,\"scroll\",\"handleScrollEvent\"]],{\"value\":[{\"handleValueChange\":0}],\"required\":[{\"handleRequiredPropChange\":0}]}]]],[\"bq-date-picker.cjs\",[[849,\"bq-date-picker\",{\"autofocus\":[516],\"clearButtonLabel\":[513,\"clear-button-label\"],\"calendarButtonLabel\":[513,\"calendar-button-label\"],\"disableClear\":[516,\"disable-clear\"],\"disabled\":[1540],\"distance\":[514],\"firstDayOfWeek\":[514,\"first-day-of-week\"],\"formatOptions\":[16],\"form\":[513],\"formValidationMessage\":[1025,\"form-validation-message\"],\"initialView\":[513,\"initial-view\"],\"isDateDisallowed\":[16],\"locale\":[513],\"max\":[513],\"min\":[513],\"months\":[1538],\"monthsPerView\":[513,\"months-per-view\"],\"name\":[513],\"open\":[1540],\"panelHeight\":[1537,\"panel-height\"],\"placeholder\":[513],\"placement\":[513],\"precision\":[513],\"required\":[516],\"skidding\":[514],\"showOutsideDays\":[516,\"show-outside-days\"],\"strategy\":[513],\"type\":[513],\"validationStatus\":[513,\"validation-status\"],\"value\":[1537],\"decadeStart\":[32],\"displayDate\":[32],\"focusedISO\":[32],\"focusedMonth\":[32],\"focusedYear\":[32],\"hasConstraintError\":[32],\"hasLabel\":[32],\"hasPrefix\":[32],\"hasValue\":[32],\"tentativeHover\":[32],\"view\":[32],\"viewDate\":[32],\"clear\":[64]},[[2,\"bqOpen\",\"handleOpenChange\"]],{\"value\":[{\"handleValueChange\":0}],\"formatOptions\":[{\"handleFormattingChange\":0}],\"locale\":[{\"handleFormattingChange\":0}],\"type\":[{\"handleTypeChange\":0},{\"checkPropValues\":0}],\"precision\":[{\"handlePrecisionChange\":0},{\"checkPropValues\":0}],\"max\":[{\"handleBoundsChange\":0}],\"min\":[{\"handleBoundsChange\":0}],\"required\":[{\"handleRequiredChange\":0}],\"firstDayOfWeek\":[{\"checkPropValues\":0}],\"initialView\":[{\"checkPropValues\":0}],\"monthsPerView\":[{\"checkPropValues\":0}],\"placement\":[{\"checkPropValues\":0}],\"strategy\":[{\"checkPropValues\":0}],\"validationStatus\":[{\"checkPropValues\":0}],\"months\":[{\"handleMonthsChange\":0}],\"open\":[{\"handleOpen\":0}],\"view\":[{\"handleViewChange\":0}]}]]],[\"bq-drawer.cjs\",[[769,\"bq-drawer\",{\"enableBackdrop\":[516,\"enable-backdrop\"],\"closeOnClickOutside\":[516,\"close-on-click-outside\"],\"closeOnEsc\":[516,\"close-on-esc\"],\"open\":[1540],\"placement\":[1537],\"position\":[1537],\"hasFooter\":[32],\"hasIcon\":[32],\"hide\":[64],\"show\":[64]},[[11,\"mousedown\",\"handleMouseClick\"],[10,\"keydown\",\"handleKeyDown\"]],{\"open\":[{\"handleOpenChange\":0}],\"placement\":[{\"handlePlacementChange\":0}],\"position\":[{\"handlePositionChange\":0}]}]]],[\"bq-alert.cjs\",[[769,\"bq-alert\",{\"autoDismiss\":[516,\"auto-dismiss\"],\"border\":[513],\"disableClose\":[516,\"disable-close\"],\"hideIcon\":[516,\"hide-icon\"],\"open\":[1540],\"time\":[514],\"type\":[513],\"sticky\":[516],\"hasContent\":[32],\"hasFooter\":[32],\"hide\":[64],\"show\":[64]},null,{\"autoDismiss\":[{\"handleTimeout\":0}],\"time\":[{\"handleTimeout\":0}],\"open\":[{\"handleOpenChange\":0}],\"type\":[{\"checkPropValues\":0}]}]]],[\"bq-dialog.cjs\",[[769,\"bq-dialog\",{\"border\":[513],\"disableBackdrop\":[516,\"disable-backdrop\"],\"disableCloseEscKeydown\":[516,\"disable-close-esc-keydown\"],\"disableCloseClickOutside\":[516,\"disable-close-click-outside\"],\"footerAppearance\":[513,\"footer-appearance\"],\"hideCloseButton\":[516,\"hide-close-button\"],\"open\":[1540],\"size\":[1537],\"hasContent\":[32],\"hasFooter\":[32],\"show\":[64],\"hide\":[64],\"cancel\":[64]},[[11,\"mousedown\",\"handleMouseClick\"],[10,\"keydown\",\"handleKeyDown\"]],{\"footerAppearance\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}],\"open\":[{\"handleOpenChange\":0}]}]]],[\"bq-input.cjs\",[[849,\"bq-input\",{\"autocapitalize\":[513],\"autocomplete\":[513],\"autofocus\":[516],\"clearButtonLabel\":[513,\"clear-button-label\"],\"debounceTime\":[1538,\"debounce-time\"],\"disabled\":[1028],\"disableClear\":[516,\"disable-clear\"],\"form\":[513],\"formValidationMessage\":[1025,\"form-validation-message\"],\"inputmode\":[1],\"max\":[520],\"maxlength\":[514],\"min\":[520],\"minlength\":[514],\"name\":[513],\"pattern\":[513],\"placeholder\":[513],\"readonly\":[516],\"required\":[516],\"step\":[520],\"type\":[513],\"validationStatus\":[513,\"validation-status\"],\"value\":[1544],\"hasHelperText\":[32],\"hasLabel\":[32],\"hasPrefix\":[32],\"hasSuffix\":[32],\"hasValue\":[32]},null,{\"value\":[{\"handleValueChange\":0}],\"required\":[{\"handleRequiredPropChange\":0}]}]]],[\"bq-notification.cjs\",[[769,\"bq-notification\",{\"autoDismiss\":[516,\"auto-dismiss\"],\"border\":[513],\"disableClose\":[516,\"disable-close\"],\"hideIcon\":[516,\"hide-icon\"],\"open\":[1540],\"time\":[514],\"type\":[513],\"hasContent\":[32],\"hasFooter\":[32],\"notificationPortal\":[32],\"hide\":[64],\"show\":[64],\"toast\":[64]},[[0,\"bqAfterClose\",\"afterNotificationClose\"]],{\"autoDismiss\":[{\"handleTimeout\":0}],\"time\":[{\"handleTimeout\":0}],\"open\":[{\"handleOpenChange\":0}],\"type\":[{\"checkPropValues\":0}]}]]],[\"bq-accordion.cjs\",[[769,\"bq-accordion\",{\"appearance\":[1537],\"disabled\":[516],\"expanded\":[1540],\"noAnimation\":[516,\"no-animation\"],\"rotate\":[516],\"size\":[1537],\"hasPrefix\":[32],\"hasSuffix\":[32]},[[0,\"accordionTransitionEnd\",\"onAccordionTransitionEnd\"]],{\"size\":[{\"checkPropValues\":0}],\"expanded\":[{\"handleExpandedChange\":0}],\"disabled\":[{\"handleDisabledChange\":0}],\"noAnimation\":[{\"handleJsAnimation\":0}]}]]],[\"bq-empty-state.cjs\",[[769,\"bq-empty-state\",{\"size\":[1537],\"hasBody\":[32],\"hasFooter\":[32]},null,{\"size\":[{\"checkPropValues\":0}]}]]],[\"bq-progress.cjs\",[[513,\"bq-progress\",{\"borderShape\":[513,\"border-shape\"],\"enableTooltip\":[516,\"enable-tooltip\"],\"indeterminate\":[516],\"label\":[516],\"thickness\":[513],\"type\":[513],\"value\":[1538]},null,{\"borderShape\":[{\"handleTypePropChange\":0}],\"thickness\":[{\"handleTypePropChange\":0}],\"type\":[{\"handleTypePropChange\":0}],\"value\":[{\"handleValuePropChange\":0}]}]]],[\"bq-side-menu-item.cjs\",[[769,\"bq-side-menu-item\",{\"active\":[4],\"collapse\":[4],\"disabled\":[4],\"textContent\":[32]}]]],[\"bq-slider.cjs\",[[593,\"bq-slider\",{\"debounceTime\":[514,\"debounce-time\"],\"disabled\":[516],\"enableValueIndicator\":[516,\"enable-value-indicator\"],\"gap\":[1538],\"max\":[514],\"min\":[514],\"name\":[513],\"step\":[514],\"type\":[513],\"value\":[1544],\"enableTooltip\":[516,\"enable-tooltip\"],\"tooltipAlwaysVisible\":[516,\"tooltip-always-visible\"],\"minValue\":[32],\"maxValue\":[32],\"minThumbPosition\":[32],\"maxThumbPosition\":[32]},null,{\"value\":[{\"handleValuePropChange\":0}],\"step\":[{\"handleStepPropChange\":0}],\"gap\":[{\"handleGapChange\":0}]}]]],[\"bq-status.cjs\",[[769,\"bq-status\",{\"type\":[513]},null,{\"type\":[{\"checkPropValues\":0}]}]]],[\"bq-step-item.cjs\",[[785,\"bq-step-item\",{\"dividerColor\":[513,\"divider-color\"],\"isLast\":[516,\"is-last\"],\"orientation\":[513],\"size\":[513],\"status\":[1537],\"type\":[513]},null,{\"size\":[{\"checkPropValues\":0}],\"status\":[{\"checkPropValues\":0}]}]]],[\"bq-switch.cjs\",[[849,\"bq-switch\",{\"backgroundOnHover\":[516,\"background-on-hover\"],\"checked\":[1540],\"disabled\":[516],\"formValidationMessage\":[1025,\"form-validation-message\"],\"fullWidth\":[516,\"full-width\"],\"innerLabel\":[513,\"inner-label\"],\"justifyContent\":[513,\"justify-content\"],\"name\":[513],\"required\":[516],\"reverseOrder\":[516,\"reverse-order\"],\"value\":[513],\"hasLabel\":[32],\"vClick\":[64],\"vFocus\":[64],\"vBlur\":[64]},null,{\"required\":[{\"handleRequiredChange\":0}]}]]],[\"bq-toast.cjs\",[[769,\"bq-toast\",{\"border\":[513],\"type\":[1537],\"placement\":[1537],\"hideIcon\":[1540,\"hide-icon\"],\"open\":[1540],\"time\":[514],\"toastPortal\":[32],\"show\":[64],\"hide\":[64],\"toast\":[64]},[[0,\"bqHide\",\"onNotificationHide\"]],{\"type\":[{\"checkPropValues\":0}],\"placement\":[{\"checkPropValues\":0}],\"time\":[{\"handleTimeChange\":0}],\"open\":[{\"handleOpenChange\":0}]}]]],[\"bq-accordion-group.cjs\",[[769,\"bq-accordion-group\",{\"appearance\":[1537],\"expandAll\":[516,\"expand-all\"],\"noAnimation\":[516,\"no-animation\"],\"multiple\":[516],\"size\":[1537]},[[1,\"bqClick\",\"onBqClick\"]],{\"appearance\":[{\"checkPropValues\":0}],\"expandAll\":[{\"checkPropValues\":0}],\"noAnimation\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}]}]]],[\"bq-avatar.cjs\",[[769,\"bq-avatar\",{\"altText\":[513,\"alt-text\"],\"image\":[513],\"label\":[513],\"initials\":[513],\"shape\":[513],\"size\":[1537],\"hasError\":[32]},null,{\"image\":[{\"handleImagePropChange\":0}],\"shape\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0},{\"onInitialsChange\":0}],\"initials\":[{\"onInitialsChange\":0}]}]]],[\"bq-breadcrumb.cjs\",[[769,\"bq-breadcrumb\",{\"label\":[513]}]]],[\"bq-breadcrumb-item.cjs\",[[769,\"bq-breadcrumb-item\",{\"href\":[513],\"target\":[513],\"rel\":[513]}]]],[\"bq-card.cjs\",[[769,\"bq-card\",{\"type\":[513],\"border\":[513]},null,{\"type\":[{\"checkPropValue\":0}]}]]],[\"bq-checkbox.cjs\",[[849,\"bq-checkbox\",{\"backgroundOnHover\":[516,\"background-on-hover\"],\"formId\":[513,\"form-id\"],\"formValidationMessage\":[1025,\"form-validation-message\"],\"checked\":[1540],\"disabled\":[516],\"indeterminate\":[1540],\"name\":[513],\"required\":[516],\"value\":[513],\"vClick\":[64],\"vFocus\":[64],\"vBlur\":[64]},null,{\"checked\":[{\"handleCheckedPropChange\":0}],\"indeterminate\":[{\"handleIndeterminatePropChange\":0}],\"required\":[{\"handleRequiredPropChange\":0}]}]]],[\"bq-option.cjs\",[[769,\"bq-option\",{\"hidden\":[516],\"disabled\":[516],\"displayValue\":[513,\"display-value\"],\"selected\":[516],\"value\":[513],\"hasPrefix\":[32],\"hasSuffix\":[32]},[[0,\"keydown\",\"onKeyDown\"]]]]],[\"bq-option-group.cjs\",[[257,\"bq-option-group\"]]],[\"bq-page-title.cjs\",[[769,\"bq-page-title\",{\"haveBackNavigation\":[32],\"hasSuffix\":[32],\"hasSubTitle\":[32]}]]],[\"bq-radio.cjs\",[[785,\"bq-radio\",{\"backgroundOnHover\":[516,\"background-on-hover\"],\"checked\":[1540],\"disabled\":[516],\"forceDisabled\":[516,\"force-disabled\"],\"formId\":[513,\"form-id\"],\"name\":[513],\"required\":[516],\"value\":[513],\"vClick\":[64],\"vFocus\":[64],\"vBlur\":[64],\"getNativeInput\":[64]}]]],[\"bq-radio-group.cjs\",[[849,\"bq-radio-group\",{\"backgroundOnHover\":[516,\"background-on-hover\"],\"debounceTime\":[1538,\"debounce-time\"],\"disabled\":[516],\"fieldset\":[516],\"name\":[513],\"orientation\":[1537],\"required\":[516],\"requiredValidationMessage\":[513,\"required-validation-message\"],\"value\":[1537],\"checkedRadio\":[32],\"tabIndex\":[32]},[[2,\"bqClick\",\"onBqClick\"],[0,\"bqKeyDown\",\"onBqKeyDown\"],[2,\"bqFocus\",\"onBqFocus\"],[2,\"bqBlur\",\"onBqBlur\"]],{\"debounceTime\":[{\"handleDebounceTimeChange\":0}],\"disabled\":[{\"handleDisabledChange\":0},{\"handleGroupProperties\":0}],\"backgroundOnHover\":[{\"handleGroupProperties\":0}],\"name\":[{\"handleGroupProperties\":0}],\"required\":[{\"handleGroupProperties\":0},{\"handleRequiredChange\":0}],\"orientation\":[{\"checkPropValues\":0}],\"value\":[{\"handleValueChange\":0}]}]]],[\"bq-side-menu.cjs\",[[769,\"bq-side-menu\",{\"appearance\":[513],\"collapse\":[516],\"size\":[513],\"documentBody\":[32],\"toggleCollapse\":[64]},[[1,\"bqClick\",\"onMenuItemClick\"]],{\"collapse\":[{\"onCollapsePropChange\":0}]}]]],[\"bq-spinner.cjs\",[[769,\"bq-spinner\",{\"animation\":[516],\"textPosition\":[513,\"text-position\"],\"size\":[513],\"hasIconSlot\":[32],\"hasSlot\":[32],\"slotContentLength\":[32]},null,{\"textPosition\":[{\"handleTextPositionProp\":0}],\"size\":[{\"handleSizeProp\":0}],\"hasIconSlot\":[{\"handleHasIconSlot\":0}]}]]],[\"bq-steps.cjs\",[[769,\"bq-steps\",{\"dividerColor\":[513,\"divider-color\"],\"orientation\":[513],\"size\":[513],\"type\":[513],\"setCurrentStepItem\":[64]},null,{\"dividerColor\":[{\"checkPropValues\":0}],\"orientation\":[{\"checkPropValues\":0}],\"type\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}]}]]],[\"bq-tab.cjs\",[[769,\"bq-tab\",{\"active\":[1540],\"controls\":[513],\"disabled\":[516],\"orientation\":[513],\"placement\":[513],\"size\":[513],\"tabId\":[513,\"tab-id\"],\"tabIndex\":[32],\"hasIcon\":[32],\"vClick\":[64],\"vFocus\":[64],\"vBlur\":[64],\"enableFocus\":[64]},null,{\"size\":[{\"checkPropValues\":0}],\"orientation\":[{\"checkPropValues\":0}],\"placement\":[{\"checkPropValues\":0}]}]]],[\"bq-tab-group.cjs\",[[769,\"bq-tab-group\",{\"debounceTime\":[1538,\"debounce-time\"],\"disableDivider\":[516,\"disable-divider\"],\"orientation\":[513],\"placement\":[513],\"size\":[513],\"value\":[1537]},[[19,\"keyup\",\"onKeyUp\"],[1,\"bqClick\",\"onBqClick\"],[1,\"bqKeyDown\",\"onBqKeyDown\"],[3,\"bqBlur\",\"onBqBlur\"]],{\"debounceTime\":[{\"checkDebounceChange\":0}],\"size\":[{\"checkPropValues\":0}],\"value\":[{\"checkPropValues\":0}],\"orientation\":[{\"checkPropValues\":0}],\"placement\":[{\"checkPropValues\":0}]}]]],[\"bq-textarea.cjs\",[[849,\"bq-textarea\",{\"autocapitalize\":[513],\"autocomplete\":[513],\"autofocus\":[516],\"autoGrow\":[516,\"auto-grow\"],\"debounceTime\":[1538,\"debounce-time\"],\"disabled\":[516],\"disableResize\":[516,\"disable-resize\"],\"form\":[513],\"formValidationMessage\":[1025,\"form-validation-message\"],\"maxlength\":[514],\"name\":[513],\"placeholder\":[513],\"readonly\":[516],\"required\":[516],\"rows\":[514],\"spellcheck\":[516],\"validationStatus\":[1537,\"validation-status\"],\"value\":[1025],\"wrap\":[513],\"hasHelperText\":[32],\"hasLabel\":[32]},null,{\"value\":[{\"handleValueChange\":0}],\"required\":[{\"handleRequiredPropChange\":0}]}]]],[\"bq-badge.cjs\",[[769,\"bq-badge\",{\"backgroundColor\":[1537,\"background-color\"],\"textColor\":[1537,\"text-color\"],\"size\":[1537],\"contentLength\":[32]},null,{\"size\":[{\"handleSizePropChange\":0}]}]]],[\"bq-button_2.cjs\",[[849,\"bq-button\",{\"appearance\":[513],\"block\":[516],\"border\":[513],\"disabled\":[4],\"download\":[1],\"href\":[513],\"justifyContent\":[513,\"justify-content\"],\"label\":[513],\"loading\":[4],\"onlyIcon\":[4,\"only-icon\"],\"size\":[513],\"target\":[513],\"type\":[513],\"variant\":[513],\"hasPrefix\":[32],\"hasSuffix\":[32]},null,{\"appearance\":[{\"checkPropValues\":0}],\"type\":[{\"checkPropValues\":0}],\"size\":[{\"checkPropValues\":0}],\"variant\":[{\"checkPropValues\":0}],\"onlyIcon\":[{\"handleOnlyIconPropChange\":0}]}],[513,\"bq-icon\",{\"label\":[513],\"color\":[513],\"name\":[513],\"size\":[520],\"src\":[513],\"weight\":[513],\"svgContent\":[32]},null,{\"color\":[{\"handlePropsChange\":0}],\"name\":[{\"handlePropsChange\":0}],\"size\":[{\"handlePropsChange\":0}],\"weight\":[{\"handleWeightChange\":0}]}]]],[\"bq-option-list_2.cjs\",[[785,\"bq-tag\",{\"border\":[513],\"clickable\":[516],\"color\":[513],\"disabled\":[516],\"hidden\":[1540],\"removable\":[516],\"selected\":[1540],\"size\":[513],\"variant\":[513],\"hasPrefix\":[32],\"hide\":[64],\"show\":[64]},null,{\"size\":[{\"checkPropValues\":0}],\"variant\":[{\"checkPropValues\":0}]}],[769,\"bq-option-list\",{\"ariaLabel\":[513,\"aria-label\"]},[[1,\"bqClick\",\"onBqSelect\"],[1,\"bqEnter\",\"onBqSelect\"]]]]],[\"bq-divider.cjs\",[[769,\"bq-divider\",{\"dashed\":[4],\"orientation\":[513],\"strokeColor\":[513,\"stroke-color\"],\"titleAlignment\":[513,\"title-alignment\"],\"strokeDashWidth\":[514,\"stroke-dash-width\"],\"strokeDashGap\":[514,\"stroke-dash-gap\"],\"strokeThickness\":[514,\"stroke-thickness\"],\"strokeBasis\":[514,\"stroke-basis\"],\"strokeLinecap\":[513,\"stroke-linecap\"],\"hasTitle\":[32]},null,{\"orientation\":[{\"checkPropValues\":0}],\"titleAlignment\":[{\"checkPropValues\":0}],\"strokeLinecap\":[{\"checkPropValues\":0}]}]]],[\"bq-tooltip.cjs\",[[769,\"bq-tooltip\",{\"alwaysVisible\":[4,\"always-visible\"],\"distance\":[514],\"hideArrow\":[516,\"hide-arrow\"],\"placement\":[513],\"sameWidth\":[516,\"same-width\"],\"displayOn\":[513,\"display-on\"],\"visible\":[1540],\"show\":[64],\"hide\":[64]},[[4,\"keydown\",\"handleDocumentKeyDown\"],[5,\"mousedown\",\"handleDocumentMouseDown\"],[7,\"scroll\",\"handleDocumentScroll\"]],{\"visible\":[{\"handleVisibleChange\":0}],\"alwaysVisible\":[{\"handleAlwaysVisibleChange\":0}],\"distance\":[{\"handleFloatingUIOptionsChange\":0}],\"placement\":[{\"handleFloatingUIOptionsChange\":0}],\"sameWidth\":[{\"handleFloatingUIOptionsChange\":0}]}]]],[\"bq-dropdown_2.cjs\",[[769,\"bq-dropdown\",{\"disableScrollLock\":[516,\"disable-scroll-lock\"],\"disabled\":[516],\"distance\":[514],\"keepOpenOnSelect\":[516,\"keep-open-on-select\"],\"placement\":[513],\"open\":[1540],\"panelHeight\":[513,\"panel-height\"],\"sameWidth\":[516,\"same-width\"],\"skidding\":[514],\"strategy\":[513]},[[1,\"bqSelect\",\"onItemSelect\"],[5,\"click\",\"onClickOutside\"],[9,\"keyup\",\"onEscape\"],[11,\"scroll\",\"handleScrollEvent\"]],{\"open\":[{\"onOpenChange\":0}],\"disabled\":[{\"handleDisabledChange\":0}]}],[769,\"bq-panel\",{\"disableScrollLock\":[516,\"disable-scroll-lock\"],\"distance\":[514],\"placement\":[513],\"open\":[1540],\"sameWidth\":[516,\"same-width\"],\"skidding\":[514],\"strategy\":[513]},null,{\"open\":[{\"handleOpenChange\":0}],\"distance\":[{\"onPropChange\":0}],\"placement\":[{\"onPropChange\":0}],\"sameWidth\":[{\"onPropChange\":0}],\"skidding\":[{\"onPropChange\":0}],\"strategy\":[{\"onPropChange\":0}]}]]]]"), options);
 });
 
 exports.setNonce = index.setNonce;

package/dist/cjs/bq-dropdown_2.cjs.entry.js

@@ -6,7 +6,7 @@
 
 var index = require('./index-J9jJ-fFQ.js');
 var event = require('./event-BhuEFC-I.js');
-var index$1 = require('./index-CfLTYjba.js');
+var index$1 = require('./index-CVDzXB4K.js');
 var isClient = require('./isClient-CrXhXxbA.js');
 var scrollLock = require('./scrollLock-OTzU3x3y.js');
 
@@ -191,7 +191,7 @@ const BqPanel = class {
     onPropChange() {
         if (!isClient.isClient())
             return;
-        this.floatingUI?.init({ ...this.options });
+        this.floatingUI?.configure({ ...this.options });
     }
     // Events section
     // Requires JSDocs for public API documentation
@@ -213,10 +213,15 @@ const BqPanel = class {
         this.floatingUI = new index$1.FloatingUI(this.trigger, this.panel, { ...this.options });
         this.handleOpenChange();
     }
+    connectedCallback() {
+        if (!this.floatingUI || !this.open)
+            return;
+        this.showPanel();
+    }
     disconnectedCallback() {
         if (!isClient.isClient())
             return;
-        this.floatingUI?.destroy();
+        this.floatingUI?.stop();
         // Ensure scroll lock is removed if the component is disconnected while the panel is open.
         if (this.open && !this.disableScrollLock) {
             scrollLock.unlockBodyScroll();
@@ -237,7 +242,7 @@ const BqPanel = class {
     showPanel() {
         if (!isClient.isClient())
             return;
-        this.floatingUI?.update();
+        this.floatingUI?.start();
         // Lock the body scroll if the disableScrollLock prop is not true.
         if (!this.disableScrollLock) {
             scrollLock.lockBodyScroll();
@@ -245,6 +250,7 @@ const BqPanel = class {
     }
     async hidePanel() {
         this.open = false;
+        this.floatingUI?.stop();
         // Unlock the body scroll if the disableScrollLock prop is not true.
         if (isClient.isClient() && !this.disableScrollLock) {
             scrollLock.unlockBodyScroll();
@@ -263,9 +269,9 @@ const BqPanel = class {
     // Always the last one in the class.
     // ===================================
     render() {
-        return (index.h("div", { key: '085545c8b547887ff02e2215e260805e280ef217', "aria-hidden": !this.open ? 'true' : 'false', class: "bq-panel", hidden: !this.open, part: "panel", ref: (el) => {
+        return (index.h("div", { key: '6d0376f5f829189a179dfb409e06198dbd568d4d', "aria-hidden": !this.open ? 'true' : 'false', class: "bq-panel", hidden: !this.open, part: "panel", ref: (el) => {
                 this.panel = el;
-            } }, index.h("slot", { key: '2b883bb9a200cb5aa0d1851a68bd4592fcb02fc1' })));
+            } }, index.h("slot", { key: '535289afc3b7e127a496c8b6b1492e3b22017606' })));
     }
     static get watchers() { return {
         "open": [{

package/dist/cjs/bq-dropdown_2.cjs.entry.js.map

@@ -1 +1 @@
-{"file":"bq-dropdown_2.cjs.entry.js","mappings":"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","names":["event","isEventTargetChildOfElement","h","isClient","FloatingUI","unlockBodyScroll","lockBodyScroll"],"sources":["../../packages/beeq/src/components/dropdown/scss/bq-dropdown.scss?tag=bq-dropdown&encapsulation=shadow","../../packages/beeq/src/components/dropdown/bq-dropdown.tsx","../../packages/beeq/src/components/panel/scss/bq-panel.scss?tag=bq-panel&encapsulation=shadow","../../packages/beeq/src/components/panel/bq-panel.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Dropdown styles                */\n/* -------------------------------------------------------------------------- */\n\n:host {\n  @apply relative inline-block;\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { isEventTargetChildOfElement } from '../../shared/utils';\n\nlet id = 0;\n\n/**\n * The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\n * They provide an efficient way to save space and present a long list of options in a compact and organized manner.\n *\n * @example How to use it\n * ```html\n * <bq-dropdown placement=\"bottom-start\">\n *   <bq-button slot=\"trigger\">Dropdown</bq-button>\n *   <bq-option-list>\n *     <bq-option value=\"users\">...</bq-option>\n *     <bq-option value=\"user\">...</bq-option>\n *     <bq-option value=\"dashboard\">...</bq-option>\n *     <bq-option value=\"settings\">...</bq-option>\n *     <bq-option value=\"logout\">...</bq-option>\n *   </bq-option-list>\n * </bq-dropdown>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/47ff4b-dropdown\n * @status stable\n *\n * @dependency bq-panel\n *\n * @attr {boolean} disabled - If true, the dropdown panel will be visible and won't be shown.\n * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.\n * @attr {boolean} keep-open-on-select - If true, the panel will remain open after a selection is made.\n * @attr {\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"} placement - Position of the panel.\n * @attr {boolean} open - If true, the panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the dropdown panel.\n * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.\n * @attr {number} skidding - Represents the skidding between the panel and the trigger element.\n * @attr {\"fixed\" | \"absolute\"} strategy - Defines the strategy to position the panel.\n *\n * @event bqOpen - Callback handler to be called when the dropdown panel is opened or closed.\n *\n * @slot trigger - The trigger element that opens the dropdown panel.\n * @slot - The content of the dropdown panel.\n *\n * @part base - The component's internal wrapper.\n * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel.\n * @part panel - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.\n * @part trigger - The `<div>` element that hosts the trigger element.\n *\n * @cssprop --bq-panel--background - Panel background color\n * @cssprop --bq-panel--border-color - Panel border color\n * @cssprop --bq-panel--border-radius - Panel border radius\n * @cssprop --bq-panel--border-style - Panel border style\n * @cssprop --bq-panel--border-width - Panel border width\n * @cssprop --bq-panel--box-shadow - Panel box shadow\n * @cssprop --bq-panel--padding - Panel padding\n * @cssprop --bq-panel--height - Panel height\n * @cssprop --bq-panel--width - Panel width\n * @cssprop --bq-panel-z-index - Panel z-index applied when opened\n */\n@Component({\n  tag: 'bq-dropdown',\n  styleUrl: './scss/bq-dropdown.scss',\n  shadow: true,\n})\nexport class BqDropdown {\n  // Own Properties\n  // ====================\n\n  private dropdownPanelId = `bq-dropdown-panel-${++id}`;\n  private triggerElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDropdownElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the dropdown panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /** If true, the dropdown panel will be visible and won't be shown. */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** If true, the panel will remain open after a selection is made. */\n  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the dropdown panel */\n  @Prop({ reflect: true }) panelHeight?: string;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  onOpenChange() {\n    this.bqOpen.emit({ open: this.open });\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (!this.triggerElem) return;\n\n    // set 'disabled' attribute based on 'this.disabled' value, ensuring consistent state handling\n    if (!this.disabled) {\n      this.triggerElem?.removeAttribute('disabled');\n      return;\n    }\n    this.triggerElem?.setAttribute('disabled', 'true');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the dropdown panel is opened or closed. */\n  @Event() bqOpen: EventEmitter<{ open: boolean }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.triggerElem = this.el.querySelector('[slot=\"trigger\"]');\n    this.triggerElem?.addEventListener('click', this.togglePanel);\n\n    this.handleDisabledChange();\n  }\n\n  disconnectedCallback() {\n    this.triggerElem?.removeEventListener('click', this.togglePanel);\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqSelect', { passive: true })\n  onItemSelect() {\n    if (this.keepOpenOnSelect) return;\n\n    this.open = false;\n  }\n\n  /** Listens for the 'click' event on the document object\n   * and closes the dropdown panel if the click is outside the component.\n   */\n  @Listen('click', { target: 'document', passive: true })\n  onClickOutside(event: MouseEvent) {\n    if (!this.open || isEventTargetChildOfElement(event, this.el)) return;\n\n    // Close when clicking outside of the close element\n    this.open = false;\n  }\n\n  @Listen('keyup', { target: 'window', passive: true })\n  onEscape(event: KeyboardEvent) {\n    if (!this.open) return;\n    // Close the panel when pressing Escape or when pressing Tab and the component loses focus.\n    if (event.key === 'Escape' || (event.key === 'Tab' && !isEventTargetChildOfElement(event, this.el))) {\n      this.open = false;\n    }\n  }\n\n  @Listen('scroll', { target: 'window', passive: true, capture: true })\n  handleScrollEvent() {\n    if (!this.open || this.disableScrollLock) return;\n\n    // Close the panel when the scroll event is triggered.\n    // This is useful for those cases where the floating panel is inside a scrollable container.\n    // For example, a select inside a dialog, drawer, etc.\n    // ⚠️ Notice that document body scroll lock is handled via the `scrollLock` utility.\n    this.open = false;\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 togglePanel = (): void => {\n    const isDisabled = this.disabled || this.triggerElem?.hasAttribute('disabled');\n    if (isDisabled) return;\n\n    this.open = !this.open;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.panelHeight && { '--bq-panel--height': this.panelHeight }),\n    };\n\n    return (\n      <div class=\"bq-dropdown\" part=\"base\">\n        {/* TRIGGER CONTAINER */}\n        <div\n          aria-controls={this.dropdownPanelId}\n          aria-haspopup=\"true\"\n          class=\"bq-dropdown__trigger block\"\n          part=\"trigger\"\n        >\n          <slot name=\"trigger\" />\n        </div>\n        {/* PANEL */}\n        <bq-panel\n          class=\"bq-dropdown__panel\"\n          disableScrollLock={this.disableScrollLock}\n          distance={this.distance}\n          exportparts=\"panel\"\n          id={this.dropdownPanelId}\n          open={this.open}\n          part=\"dropdown\"\n          placement={this.placement}\n          sameWidth={this.sameWidth}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          style={style}\n        >\n          <slot />\n        </bq-panel>\n      </div>\n    );\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                                Panel styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-panel.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-panel {\n  @include animation-fade-in;\n  @apply fixed z-[--bq-panel-z-index] overflow-y-auto overflow-x-hidden is-[--bq-panel--width] max-bs-[--bq-panel--height];\n  @apply rounded-[--bq-panel--border-radius] bg-[--bq-panel--background] shadow-[shadow:--bq-panel--box-shadow];\n  @apply pe-[--bq-panel--padding-end] ps-[--bq-panel--padding-start] p-b-[--bq-panel--paddingY];\n  @apply border-[length:--bq-panel--border-width] border-[color:--bq-panel--border-color];\n\n  border-style: var(--bq-panel--border-style);\n}\n","import type { ReferenceElement } from '@floating-ui/dom';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\nimport { isClient, lockBodyScroll, unlockBodyScroll } from '../../shared/utils';\n\n/**\n * The Panel component is a versatile and essential element used to wrap and display content in a floating panel.\n *\n * @example How to use it\n * ```html\n * <bq-panel open>\n *   <div>Panel content</div>\n * </bq-panel>\n * ```\n *\n * @status stable\n *\n * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.\n * @attr {\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"} placement - Position of the panel.\n * @attr {boolean} open - If true, the panel will be visible.\n * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.\n * @attr {number} skidding - Represents the skidding between the panel and the trigger element.\n * @attr {\"fixed\" | \"absolute\"} strategy - Defines the strategy to position the panel.\n *\n * @slot - The content of the panel.\n *\n * @part panel - The `<div>` element used to display and style the panel\n *\n * @prop --bq-panel--background - Panel background color\n * @prop --bq-panel--border-color - Panel border color\n * @prop --bq-panel--border-radius - Panel border radius\n * @prop --bq-panel--border-style - Panel border style\n * @prop --bq-panel--border-width - Panel border width\n * @prop --bq-panel--box-shadow - Panel box shadow\n * @prop --bq-panel--padding - Panel padding\n * @prop --bq-panel--height - Panel height\n * @prop --bq-panel--width - Panel width\n * @prop --bq-panel-z-index - Panel z-index applied when opened\n */\n@Component({\n  tag: 'bq-panel',\n  styleUrl: './scss/bq-panel.scss',\n  shadow: true,\n})\nexport class BqPanel {\n  // Own Properties\n  // ====================\n\n  private panel: HTMLElement;\n  private floatingUI: FloatingUI;\n  private trigger: ReferenceElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPanelElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  handleOpenChange() {\n    if (!this.open) {\n      this.hidePanel();\n      return;\n    }\n\n    this.showPanel();\n  }\n\n  @Watch('distance')\n  @Watch('placement')\n  @Watch('sameWidth')\n  @Watch('skidding')\n  @Watch('strategy')\n  onPropChange() {\n    if (!isClient()) return;\n\n    this.floatingUI?.init({ ...this.options });\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    if (!isClient()) return;\n\n    // We need to find the trigger element from the parent to position the panel relative to it.\n    const parentTrigger = this.el.parentElement.querySelector('div[part=\"trigger\"]');\n\n    if (!parentTrigger) return;\n\n    this.trigger = {\n      getBoundingClientRect: () => parentTrigger.getBoundingClientRect(),\n      contextElement: parentTrigger,\n    };\n\n    this.floatingUI = new FloatingUI(this.trigger, this.panel, { ...this.options });\n    this.handleOpenChange();\n  }\n\n  disconnectedCallback() {\n    if (!isClient()) return;\n\n    this.floatingUI?.destroy();\n\n    // Ensure scroll lock is removed if the component is disconnected while the panel is open.\n    if (this.open && !this.disableScrollLock) {\n      unlockBodyScroll();\n    }\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 showPanel() {\n    if (!isClient()) return;\n\n    this.floatingUI?.update();\n\n    // Lock the body scroll if the disableScrollLock prop is not true.\n    if (!this.disableScrollLock) {\n      lockBodyScroll();\n    }\n  }\n\n  private async hidePanel() {\n    this.open = false;\n\n    // Unlock the body scroll if the disableScrollLock prop is not true.\n    if (isClient() && !this.disableScrollLock) {\n      unlockBodyScroll();\n    }\n  }\n\n  private get options() {\n    return {\n      distance: this.distance,\n      placement: this.placement,\n      sameWidth: this.sameWidth,\n      skidding: this.skidding,\n      strategy: this.strategy,\n    };\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        aria-hidden={!this.open ? 'true' : 'false'}\n        class=\"bq-panel\"\n        hidden={!this.open}\n        part=\"panel\"\n        ref={(el) => {\n          this.panel = el;\n        }}\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}
+{"file":"bq-dropdown_2.cjs.entry.js","mappings":"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","names":["event","isEventTargetChildOfElement","h","isClient","FloatingUI","unlockBodyScroll","lockBodyScroll"],"sources":["../../packages/beeq/src/components/dropdown/scss/bq-dropdown.scss?tag=bq-dropdown&encapsulation=shadow","../../packages/beeq/src/components/dropdown/bq-dropdown.tsx","../../packages/beeq/src/components/panel/scss/bq-panel.scss?tag=bq-panel&encapsulation=shadow","../../packages/beeq/src/components/panel/bq-panel.tsx"],"sourcesContent":["/* -------------------------------------------------------------------------- */\n/*                                Dropdown styles                */\n/* -------------------------------------------------------------------------- */\n\n:host {\n  @apply relative inline-block;\n}\n","import type { EventEmitter } from '@stencil/core';\nimport { Component, Element, Event, h, Listen, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { isEventTargetChildOfElement } from '../../shared/utils';\n\nlet id = 0;\n\n/**\n * The Dropdown Component is commonly used when presenting a list of selectable options that are too numerous to fit comfortably on the screen.\n * They provide an efficient way to save space and present a long list of options in a compact and organized manner.\n *\n * @example How to use it\n * ```html\n * <bq-dropdown placement=\"bottom-start\">\n *   <bq-button slot=\"trigger\">Dropdown</bq-button>\n *   <bq-option-list>\n *     <bq-option value=\"users\">...</bq-option>\n *     <bq-option value=\"user\">...</bq-option>\n *     <bq-option value=\"dashboard\">...</bq-option>\n *     <bq-option value=\"settings\">...</bq-option>\n *     <bq-option value=\"logout\">...</bq-option>\n *   </bq-option-list>\n * </bq-dropdown>\n * ```\n *\n * @documentation https://www.beeq.design/3d466e231/p/47ff4b-dropdown\n * @status stable\n *\n * @dependency bq-panel\n *\n * @attr {boolean} disabled - If true, the dropdown panel will be visible and won't be shown.\n * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.\n * @attr {boolean} keep-open-on-select - If true, the panel will remain open after a selection is made.\n * @attr {\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"} placement - Position of the panel.\n * @attr {boolean} open - If true, the panel will be visible.\n * @attr {string} panel-height - When set, it will override the height of the dropdown panel.\n * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.\n * @attr {number} skidding - Represents the skidding between the panel and the trigger element.\n * @attr {\"fixed\" | \"absolute\"} strategy - Defines the strategy to position the panel.\n *\n * @event bqOpen - Callback handler to be called when the dropdown panel is opened or closed.\n *\n * @slot trigger - The trigger element that opens the dropdown panel.\n * @slot - The content of the dropdown panel.\n *\n * @part base - The component's internal wrapper.\n * @part dropdown - The `<bq-panel>` element used under the hood to display the dropdown panel.\n * @part panel - The `<div>` element used to display and style the panel inside the `<bq-panel>` element.\n * @part trigger - The `<div>` element that hosts the trigger element.\n *\n * @cssprop --bq-panel--background - Panel background color\n * @cssprop --bq-panel--border-color - Panel border color\n * @cssprop --bq-panel--border-radius - Panel border radius\n * @cssprop --bq-panel--border-style - Panel border style\n * @cssprop --bq-panel--border-width - Panel border width\n * @cssprop --bq-panel--box-shadow - Panel box shadow\n * @cssprop --bq-panel--padding - Panel padding\n * @cssprop --bq-panel--height - Panel height\n * @cssprop --bq-panel--width - Panel width\n * @cssprop --bq-panel-z-index - Panel z-index applied when opened\n */\n@Component({\n  tag: 'bq-dropdown',\n  styleUrl: './scss/bq-dropdown.scss',\n  shadow: true,\n})\nexport class BqDropdown {\n  // Own Properties\n  // ====================\n\n  private dropdownPanelId = `bq-dropdown-panel-${++id}`;\n  private triggerElem: HTMLElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqDropdownElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the dropdown panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /** If true, the dropdown panel will be visible and won't be shown. */\n  @Prop({ reflect: true }) disabled?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** If true, the panel will remain open after a selection is made. */\n  @Prop({ reflect: true }) keepOpenOnSelect?: boolean = false;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** When set, it will override the height of the dropdown panel */\n  @Prop({ reflect: true }) panelHeight?: string;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  onOpenChange() {\n    this.bqOpen.emit({ open: this.open });\n  }\n\n  @Watch('disabled')\n  handleDisabledChange() {\n    if (!this.triggerElem) return;\n\n    // set 'disabled' attribute based on 'this.disabled' value, ensuring consistent state handling\n    if (!this.disabled) {\n      this.triggerElem?.removeAttribute('disabled');\n      return;\n    }\n    this.triggerElem?.setAttribute('disabled', 'true');\n  }\n\n  // Events section\n  // Requires JSDocs for public API documentation\n  // ==============================================\n\n  /** Callback handler to be called when the dropdown panel is opened or closed. */\n  @Event() bqOpen: EventEmitter<{ open: boolean }>;\n\n  // Component lifecycle events\n  // Ordered by their natural call order\n  // =====================================\n\n  componentDidLoad() {\n    this.triggerElem = this.el.querySelector('[slot=\"trigger\"]');\n    this.triggerElem?.addEventListener('click', this.togglePanel);\n\n    this.handleDisabledChange();\n  }\n\n  disconnectedCallback() {\n    this.triggerElem?.removeEventListener('click', this.togglePanel);\n  }\n\n  // Listeners\n  // ==============\n\n  @Listen('bqSelect', { passive: true })\n  onItemSelect() {\n    if (this.keepOpenOnSelect) return;\n\n    this.open = false;\n  }\n\n  /** Listens for the 'click' event on the document object\n   * and closes the dropdown panel if the click is outside the component.\n   */\n  @Listen('click', { target: 'document', passive: true })\n  onClickOutside(event: MouseEvent) {\n    if (!this.open || isEventTargetChildOfElement(event, this.el)) return;\n\n    // Close when clicking outside of the close element\n    this.open = false;\n  }\n\n  @Listen('keyup', { target: 'window', passive: true })\n  onEscape(event: KeyboardEvent) {\n    if (!this.open) return;\n    // Close the panel when pressing Escape or when pressing Tab and the component loses focus.\n    if (event.key === 'Escape' || (event.key === 'Tab' && !isEventTargetChildOfElement(event, this.el))) {\n      this.open = false;\n    }\n  }\n\n  @Listen('scroll', { target: 'window', passive: true, capture: true })\n  handleScrollEvent() {\n    if (!this.open || this.disableScrollLock) return;\n\n    // Close the panel when the scroll event is triggered.\n    // This is useful for those cases where the floating panel is inside a scrollable container.\n    // For example, a select inside a dialog, drawer, etc.\n    // ⚠️ Notice that document body scroll lock is handled via the `scrollLock` utility.\n    this.open = false;\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 togglePanel = (): void => {\n    const isDisabled = this.disabled || this.triggerElem?.hasAttribute('disabled');\n    if (isDisabled) return;\n\n    this.open = !this.open;\n  };\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    const style = {\n      ...(this.panelHeight && { '--bq-panel--height': this.panelHeight }),\n    };\n\n    return (\n      <div class=\"bq-dropdown\" part=\"base\">\n        {/* TRIGGER CONTAINER */}\n        <div\n          aria-controls={this.dropdownPanelId}\n          aria-haspopup=\"true\"\n          class=\"bq-dropdown__trigger block\"\n          part=\"trigger\"\n        >\n          <slot name=\"trigger\" />\n        </div>\n        {/* PANEL */}\n        <bq-panel\n          class=\"bq-dropdown__panel\"\n          disableScrollLock={this.disableScrollLock}\n          distance={this.distance}\n          exportparts=\"panel\"\n          id={this.dropdownPanelId}\n          open={this.open}\n          part=\"dropdown\"\n          placement={this.placement}\n          sameWidth={this.sameWidth}\n          skidding={this.skidding}\n          strategy={this.strategy}\n          style={style}\n        >\n          <slot />\n        </bq-panel>\n      </div>\n    );\n  }\n}\n","/* -------------------------------------------------------------------------- */\n/*                                Panel styles                */\n/* -------------------------------------------------------------------------- */\n\n@import './bq-panel.variables';\n\n:host {\n  @apply block;\n}\n\n.bq-panel {\n  @include animation-fade-in;\n  @apply fixed z-[--bq-panel-z-index] overflow-y-auto overflow-x-hidden is-[--bq-panel--width] max-bs-[--bq-panel--height];\n  @apply rounded-[--bq-panel--border-radius] bg-[--bq-panel--background] shadow-[shadow:--bq-panel--box-shadow];\n  @apply pe-[--bq-panel--padding-end] ps-[--bq-panel--padding-start] p-b-[--bq-panel--paddingY];\n  @apply border-[length:--bq-panel--border-width] border-[color:--bq-panel--border-color];\n\n  border-style: var(--bq-panel--border-style);\n}\n","import type { ReferenceElement } from '@floating-ui/dom';\nimport { Component, Element, h, Prop, Watch } from '@stencil/core';\n\nimport type { Placement } from '../../services/interfaces';\nimport { FloatingUI } from '../../services/libraries';\nimport { isClient, lockBodyScroll, unlockBodyScroll } from '../../shared/utils';\n\n/**\n * The Panel component is a versatile and essential element used to wrap and display content in a floating panel.\n *\n * @example How to use it\n * ```html\n * <bq-panel open>\n *   <div>Panel content</div>\n * </bq-panel>\n * ```\n *\n * @status stable\n *\n * @attr {number} distance - Represents the distance (gutter or margin) between the panel and the trigger element.\n * @attr {\"top\" | \"bottom\" | \"left\" | \"right\" | \"top-start\" | \"top-end\" | \"bottom-start\" | \"bottom-end\" | \"left-start\" | \"left-end\" | \"right-start\" | \"right-end\"} placement - Position of the panel.\n * @attr {boolean} open - If true, the panel will be visible.\n * @attr {boolean} same-width - Whether the panel should have the same width as the trigger element.\n * @attr {number} skidding - Represents the skidding between the panel and the trigger element.\n * @attr {\"fixed\" | \"absolute\"} strategy - Defines the strategy to position the panel.\n *\n * @slot - The content of the panel.\n *\n * @part panel - The `<div>` element used to display and style the panel\n *\n * @prop --bq-panel--background - Panel background color\n * @prop --bq-panel--border-color - Panel border color\n * @prop --bq-panel--border-radius - Panel border radius\n * @prop --bq-panel--border-style - Panel border style\n * @prop --bq-panel--border-width - Panel border width\n * @prop --bq-panel--box-shadow - Panel box shadow\n * @prop --bq-panel--padding - Panel padding\n * @prop --bq-panel--height - Panel height\n * @prop --bq-panel--width - Panel width\n * @prop --bq-panel-z-index - Panel z-index applied when opened\n */\n@Component({\n  tag: 'bq-panel',\n  styleUrl: './scss/bq-panel.scss',\n  shadow: true,\n})\nexport class BqPanel {\n  // Own Properties\n  // ====================\n\n  private panel: HTMLElement;\n  private floatingUI: FloatingUI;\n  private trigger: ReferenceElement;\n\n  // Reference to host HTML element\n  // ===================================\n\n  @Element() el!: HTMLBqPanelElement;\n\n  // State() variables\n  // Inlined decorator, alphabetical order\n  // =======================================\n\n  // Public Property API\n  // ========================\n\n  /** If true, the panel will not lock the page body scroll when open. */\n  @Prop({ reflect: true }) disableScrollLock?: boolean = false;\n\n  /** Represents the distance (gutter or margin) between the panel and the trigger element. */\n  @Prop({ reflect: true }) distance?: number = 4;\n\n  /** Position of the panel */\n  @Prop({ reflect: true }) placement?: Placement = 'bottom-start';\n\n  /** If true, the panel will be visible. */\n  @Prop({ reflect: true, mutable: true }) open?: boolean = false;\n\n  /** Whether the panel should have the same width as the trigger element */\n  @Prop({ reflect: true }) sameWidth?: boolean = false;\n\n  /**  Represents the skidding between the panel and the trigger element. */\n  @Prop({ reflect: true }) skidding?: number = 0;\n\n  /** Defines the strategy to position the panel */\n  @Prop({ reflect: true }) strategy?: 'fixed' | 'absolute' = 'fixed';\n\n  // Prop lifecycle events\n  // =======================\n\n  @Watch('open')\n  handleOpenChange() {\n    if (!this.open) {\n      this.hidePanel();\n      return;\n    }\n\n    this.showPanel();\n  }\n\n  @Watch('distance')\n  @Watch('placement')\n  @Watch('sameWidth')\n  @Watch('skidding')\n  @Watch('strategy')\n  onPropChange() {\n    if (!isClient()) return;\n\n    this.floatingUI?.configure({ ...this.options });\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    if (!isClient()) return;\n\n    // We need to find the trigger element from the parent to position the panel relative to it.\n    const parentTrigger = this.el.parentElement.querySelector('div[part=\"trigger\"]');\n\n    if (!parentTrigger) return;\n\n    this.trigger = {\n      getBoundingClientRect: () => parentTrigger.getBoundingClientRect(),\n      contextElement: parentTrigger,\n    };\n\n    this.floatingUI = new FloatingUI(this.trigger, this.panel, { ...this.options });\n    this.handleOpenChange();\n  }\n\n  connectedCallback() {\n    if (!this.floatingUI || !this.open) return;\n\n    this.showPanel();\n  }\n\n  disconnectedCallback() {\n    if (!isClient()) return;\n\n    this.floatingUI?.stop();\n\n    // Ensure scroll lock is removed if the component is disconnected while the panel is open.\n    if (this.open && !this.disableScrollLock) {\n      unlockBodyScroll();\n    }\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 showPanel() {\n    if (!isClient()) return;\n\n    this.floatingUI?.start();\n\n    // Lock the body scroll if the disableScrollLock prop is not true.\n    if (!this.disableScrollLock) {\n      lockBodyScroll();\n    }\n  }\n\n  private async hidePanel() {\n    this.open = false;\n    this.floatingUI?.stop();\n\n    // Unlock the body scroll if the disableScrollLock prop is not true.\n    if (isClient() && !this.disableScrollLock) {\n      unlockBodyScroll();\n    }\n  }\n\n  private get options() {\n    return {\n      distance: this.distance,\n      placement: this.placement,\n      sameWidth: this.sameWidth,\n      skidding: this.skidding,\n      strategy: this.strategy,\n    };\n  }\n\n  // render() function\n  // Always the last one in the class.\n  // ===================================\n\n  render() {\n    return (\n      <div\n        aria-hidden={!this.open ? 'true' : 'false'}\n        class=\"bq-panel\"\n        hidden={!this.open}\n        part=\"panel\"\n        ref={(el) => {\n          this.panel = el;\n        }}\n      >\n        <slot />\n      </div>\n    );\n  }\n}\n"],"version":3}