@trendyol/baklava 2.0.0-beta.92 → 2.0.0-beta.94

package/dist/chunk-MCS3XLXD.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/select/option/bl-select-option.css", "../src/components/select/option/bl-select-option.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative}.option-container{--option-font:var(--bl-font-title-3-regular);--option-spacing:var(--bl-size-xs) 0;--option-selected-color:var(--bl-color-primary);--option-hover-color:var(--bl-color-primary-highlight);--option-color:var(--bl-color-neutral-darker);--option-disabled-color:var(--bl-color-neutral-light);--option-seperator:1px solid var(--bl-color-neutral-lighter);--option-gap:var(--bl-size-2xs);--option-transition:color 120ms ease-out}.option-container::after{position:absolute;content:'';width:100%;bottom:0;border-bottom:var(--option-separator)}:host(:last-of-type) .option-container::after{border-bottom:0}.single-option{width:100%;display:block;cursor:pointer;color:var(--option-color);margin:var(--option-spacing);transition:var(--option-transition);font:var(--option-font);user-select:none;position:relative;outline:0}.single-option:focus-visible::after{content:'';position:absolute;inset:calc(var(--bl-size-3xs) * -1);border:var(--bl-size-4xs) solid var(--option-hover-color);border-radius:var(--bl-size-4xs)}:host(:hover) .single-option,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) .single-option{color:var(--option-hover-color)}:host([selected]) .single-option{color:var(--option-selected-color)}:host([disabled]){cursor:not-allowed}:host([disabled]) .single-option{color:var(--option-disabled-color);cursor:not-allowed;pointer-events:none}.checkbox-option{width:100%;display:block;color:var(--option-color);padding:var(--option-spacing)}`;\nexport default styles;\n", "import { FormValue } from '@open-wc/form-helpers';\nimport { CSSResultGroup, html, LitElement } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\nimport BlSelect from '../bl-select';\nimport style from './bl-select-option.css';\n\n@customElement('bl-select-option')\nexport default class BlSelectOption<ValueType extends FormValue = string> extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  private _value: ValueType;\n\n  /* Declare reactive properties */\n  /**\n   * Sets the value for the option\n   */\n  @property({})\n  get value(): ValueType {\n    return this._value || (this.textContent as ValueType);\n  }\n\n  set value(val: ValueType) {\n    this._value = val;\n  }\n\n  /**\n   * Sets option as disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Sets option as selected state\n   */\n  @property({ type: Boolean, reflect: true })\n  selected = false;\n\n  @state()\n  multiple = false;\n\n  /**\n   * Fires when clicked on the option\n   */\n  @event('bl-select-option') private _onSelect: EventDispatcher<ValueType | string | null>;\n\n  /**\n   * Fires when checkbox is focused\n   */\n  @event('bl-focus') private onFocus: EventDispatcher<ValueType | string | null>;\n\n  /**\n   * Fires when checkbox is blurred\n   */\n  @event('bl-blur') private onBlur: EventDispatcher<ValueType | string | null>;\n\n  @query('.focus-target') private focusTarget: HTMLElement;\n\n  /**\n   * Focuses this option\n   */\n  focus() {\n    if (!this.multiple) {\n      this.focusTarget.tabIndex = 0;\n    }\n    this.focusTarget.focus();\n    this.onFocus(this.value);\n  }\n\n  /**\n   * Blurs from this option\n   */\n  blur() {\n    this.onBlur(this.value);\n    this.focusTarget.tabIndex = -1;\n  }\n\n  private blSelect: BlSelect<ValueType> | null;\n\n  private singleOptionTemplate() {\n    return html`<div\n      class=\"single-option focus-target\"\n      @blur=${this.blur}\n      @keydown=${this.handleKeydown}\n      @click=\"${this._onClickOption}\"\n    >\n      <slot></slot>\n    </div>`;\n  }\n\n  private checkboxOptionTemplate() {\n    return html`<bl-checkbox\n      class=\"checkbox-option focus-target\"\n      .checked=\"${this.selected}\"\n      .disabled=\"${this.disabled}\"\n      @bl-checkbox-change=\"${this._onCheckboxChange}\"\n    >\n      <slot></slot>\n    </bl-checkbox>`;\n  }\n\n  render() {\n    return html`<div class=\"option-container\">\n      ${this.multiple ? this.checkboxOptionTemplate() : this.singleOptionTemplate()}\n    </div>`;\n  }\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this._onClickOption();\n      event.preventDefault();\n    }\n  }\n\n  private _handleEvent() {\n    this._onSelect(this.value);\n  }\n\n  private _onClickOption() {\n    this.selected = !this.selected;\n    this._handleEvent();\n  }\n\n  private _onCheckboxChange(event: CustomEvent) {\n    this.selected = event.detail;\n    this._handleEvent();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.updateComplete.then(() => {\n      this.blSelect = this.closest<BlSelect<ValueType>>('bl-select');\n      // FIXME: We should warn when parent is not bl-select\n\n      this.multiple = this.blSelect?.multiple || false;\n      this.blSelect?.registerOption(this);\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.blSelect?.unregisterOption(this);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-select-option': BlSelectOption;\n  }\n}\n"],
+  "mappings": "kKACO,IAAMA,EAASC,28CACfC,EAAQF,ECMf,IAAqBG,EAArB,cAAkFC,CAAW,CAA7F,kCAwBE,cAAW,GAMX,cAAW,GAGX,cAAW,GAhCX,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CASA,IAAI,OAAmB,CACrB,OAAO,KAAK,QAAW,KAAK,WAC9B,CAEA,IAAI,MAAMC,EAAgB,CACxB,KAAK,OAASA,CAChB,CAqCA,OAAQ,CACD,KAAK,WACR,KAAK,YAAY,SAAW,GAE9B,KAAK,YAAY,MAAM,EACvB,KAAK,QAAQ,KAAK,KAAK,CACzB,CAKA,MAAO,CACL,KAAK,OAAO,KAAK,KAAK,EACtB,KAAK,YAAY,SAAW,EAC9B,CAIQ,sBAAuB,CAC7B,OAAOC;AAAA;AAAA,cAEG,KAAK;AAAA,iBACF,KAAK;AAAA,gBACN,KAAK;AAAA;AAAA;AAAA,WAInB,CAEQ,wBAAyB,CAC/B,OAAOA;AAAA;AAAA,kBAEO,KAAK;AAAA,mBACJ,KAAK;AAAA,6BACK,KAAK;AAAA;AAAA;AAAA,mBAIhC,CAEA,QAAS,CACP,OAAOA;AAAA,QACH,KAAK,SAAW,KAAK,uBAAuB,EAAI,KAAK,qBAAqB;AAAA,WAEhF,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,eAAe,EACpBA,EAAM,eAAe,EAEzB,CAEQ,cAAe,CACrB,KAAK,UAAU,KAAK,KAAK,CAC3B,CAEQ,gBAAiB,CACvB,KAAK,SAAW,CAAC,KAAK,SACtB,KAAK,aAAa,CACpB,CAEQ,kBAAkBA,EAAoB,CAC5C,KAAK,SAAWA,EAAM,OACtB,KAAK,aAAa,CACpB,CAEA,mBAAoB,CAClB,MAAM,kBAAkB,EAExB,KAAK,eAAe,KAAK,IAAM,CArInC,IAAAC,EAAAC,EAsIM,KAAK,SAAW,KAAK,QAA6B,WAAW,EAG7D,KAAK,WAAWD,EAAA,KAAK,WAAL,YAAAA,EAAe,WAAY,IAC3CC,EAAA,KAAK,WAAL,MAAAA,EAAe,eAAe,KAChC,CAAC,CACH,CAEA,sBAAuB,CA9IzB,IAAAD,EA+II,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,WAAL,MAAAA,EAAe,iBAAiB,KAClC,CACF,EA9HME,EAAA,CADHC,EAAS,CAAC,CAAC,GAXOT,EAYf,qBAYJQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAvBvBT,EAwBnB,wBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA7BvBT,EA8BnB,wBAGAQ,EAAA,CADCE,EAAM,GAhCYV,EAiCnB,wBAKmCQ,EAAA,CAAlCH,EAAM,kBAAkB,GAtCNL,EAsCgB,yBAKRQ,EAAA,CAA1BH,EAAM,UAAU,GA3CEL,EA2CQ,uBAKDQ,EAAA,CAAzBH,EAAM,SAAS,GAhDGL,EAgDO,sBAEMQ,EAAA,CAA/BG,EAAM,eAAe,GAlDHX,EAkDa,2BAlDbA,EAArBQ,EAAA,CADCC,EAAc,kBAAkB,GACZT",
+  "names": ["styles", "i", "bl_select_option_default", "BlSelectOption", "s", "bl_select_option_default", "val", "y", "event", "_a", "_b", "__decorateClass", "e", "t", "i"]
+}

package/dist/{chunk-QV3A6DWH.js → chunk-N53HXW4A.js}

@@ -1,4 +1,4 @@
-import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as l,b as c,f as n,g as h,h as a}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var p=l`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-content-passive);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:'';display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`,u=p;var m="bl-switch",t=class extends n{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[u]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var i,o,s;let e=(s=(o=this.ariaLabel)!=null?o:(i=this.attributes.getNamedItem("aria-label"))==null?void 0:i.value)!=null?s:void 0;return c`
+import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";import{a as s,b as c,f as h,g as n,h as a}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var p=s`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:'';display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`,u=p;var m="bl-switch",t=class extends h{constructor(){super(...arguments);this.checked=!1;this.disabled=!1}static get styles(){return[u]}toggle(){this.disabled||(this.checked=!this.checked,this.onToggle(this.checked))}handleKeyDown(e){(e.code==="Enter"||e.code==="Space")&&(this.toggle(),e.preventDefault())}render(){var i,o,l;let e=(l=(o=this.ariaLabel)!=null?o:(i=this.attributes.getNamedItem("aria-label"))==null?void 0:i.value)!=null?l:void 0;return c`
       <span
         class="switch"
         role="switch"
@@ -10,5 +10,5 @@ import{a as b}from"./chunk-KPAWUBRO.js";import{a as d}from"./chunk-23UFIOHV.js";
         tabindex="0"
       >
       </span>
-    `}};r([a({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([d("bl-switch-toggle")],t.prototype,"onToggle",2),t=r([h(m)],t);export{m as a,t as b};
-//# sourceMappingURL=chunk-QV3A6DWH.js.map
+    `}};r([a({type:Boolean,reflect:!0})],t.prototype,"checked",2),r([a({type:Boolean,reflect:!0})],t.prototype,"disabled",2),r([d("bl-switch-toggle")],t.prototype,"onToggle",2),t=r([n(m)],t);export{m as a,t as b};
+//# sourceMappingURL=chunk-N53HXW4A.js.map

package/dist/{chunk-QV3A6DWH.js.map → chunk-N53HXW4A.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/switch/bl-switch.css", "../src/components/switch/bl-switch.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-content-passive);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:'';display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-switch.css';\n\nexport const blSwitchTag = 'bl-switch';\n\n/**\n * @tag bl-switch\n * @summary Baklava Switch component\n */\n@customElement(blSwitchTag)\nexport default class BlSwitch extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checked state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the disabled state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled? = false;\n\n  /**\n   * Fires whenever user toggles the switch\n   */\n  @event('bl-switch-toggle') private onToggle: EventDispatcher<boolean>;\n\n  toggle() {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.onToggle(this.checked);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.toggle();\n      event.preventDefault();\n    }\n  }\n\n  render(): TemplateResult {\n    const ariaLabel =\n      this.ariaLabel ?? this.attributes.getNamedItem('aria-label')?.value ?? undefined;\n\n    return html`\n      <span\n        class=\"switch\"\n        role=\"switch\"\n        aria-checked=${this.checked}\n        aria-readonly=${!!this.disabled}\n        @click=${this.toggle}\n        @keydown=${this.handleKeyDown}\n        aria-label=${ifDefined(ariaLabel)}\n        tabindex=\"0\"\n      >\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blSwitchTag]: BlSwitch;\n  }\n}\n"],
-  "mappings": "4LACO,IAAMA,EAASC,g6CACfC,EAAQF,ECIR,IAAMG,EAAc,YAONC,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAU,GAMV,cAAY,GAdZ,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAmBA,QAAS,CACH,KAAK,WAET,KAAK,QAAU,CAAC,KAAK,QACrB,KAAK,SAAS,KAAK,OAAO,EAC5B,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CAjD3B,IAAAC,EAAAC,EAAAC,EAkDI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK;AAAA,wBACJ,CAAC,CAAC,KAAK;AAAA,iBACd,KAAK;AAAA,mBACH,KAAK;AAAA,qBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA,KAKtC,CACF,EA7CEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBX,EASnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBX,EAenB,wBAKmCU,EAAA,CAAlCP,EAAM,kBAAkB,GApBNH,EAoBgB,wBApBhBA,EAArBU,EAAA,CADCC,EAAcZ,CAAW,GACLC",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer}span{display:inline-block}.switch{--track-height:var(--bl-size-xl);--track-width:var(--bl-size-4xl);--thumb-offset:var(--bl-size-4xs);--thumb-height:calc(var(--track-height) - calc(2 * var(--thumb-offset)));--thumb-width:var(--thumb-height);--animation-duration:var(--bl-switch-animation-duration,300ms);--switch-color:var(--bl-switch-color,var(--bl-color-primary));background-color:var(--bl-color-neutral-lighter);border-radius:var(--bl-border-radius-pill);height:var(--track-height);transition-property:background-color;transition-duration:var(--animation-duration);width:var(--track-width)}.switch::before{content:'';display:inline-block;background-color:white;border-radius:var(--bl-border-radius-circle);height:var(--thumb-height);left:var(--thumb-offset);position:relative;top:var(--thumb-offset);transition:transform;transition-duration:var(--animation-duration);width:var(--thumb-width)}:host([checked]) .switch{background-color:var(--switch-color)}:host([checked]) .switch::before{transform:translateX(calc(var(--track-width) - var(--thumb-width) - calc(2 * var(--thumb-offset))))}:host([disabled]) .switch{opacity:.5}:host([disabled]){cursor:not-allowed}.switch:focus-visible{position:relative;outline:0}.switch:focus-visible::after{border:2px solid var(--switch-color);border-radius:var(--bl-border-radius-pill);content:'';position:absolute;top:-3px;right:-3px;bottom:-3px;left:-3px}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-switch.css';\n\nexport const blSwitchTag = 'bl-switch';\n\n/**\n * @tag bl-switch\n * @summary Baklava Switch component\n *\n * @cssproperty [--bl-switch-color=--bl-color-primary] Set the accent color\n * @cssproperty [--bl-switch-animation-duration=300ms] Set the animation duration of switch toggle\n */\n@customElement(blSwitchTag)\nexport default class BlSwitch extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the checked state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /**\n   * Sets the disabled state for switch\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled? = false;\n\n  /**\n   * Fires whenever user toggles the switch\n   */\n  @event('bl-switch-toggle') private onToggle: EventDispatcher<boolean>;\n\n  toggle() {\n    if (this.disabled) return;\n\n    this.checked = !this.checked;\n    this.onToggle(this.checked);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.code === 'Enter' || event.code === 'Space') {\n      this.toggle();\n      event.preventDefault();\n    }\n  }\n\n  render(): TemplateResult {\n    const ariaLabel =\n      this.ariaLabel ?? this.attributes.getNamedItem('aria-label')?.value ?? undefined;\n\n    return html`\n      <span\n        class=\"switch\"\n        role=\"switch\"\n        aria-checked=${this.checked}\n        aria-readonly=${!!this.disabled}\n        @click=${this.toggle}\n        @keydown=${this.handleKeyDown}\n        aria-label=${ifDefined(ariaLabel)}\n        tabindex=\"0\"\n      >\n      </span>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blSwitchTag]: BlSwitch;\n  }\n}\n"],
+  "mappings": "4LACO,IAAMA,EAASC,g6CACfC,EAAQF,ECIR,IAAMG,EAAc,YAUNC,EAArB,cAAsCC,CAAW,CAAjD,kCASE,aAAU,GAMV,cAAY,GAdZ,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAmBA,QAAS,CACH,KAAK,WAET,KAAK,QAAU,CAAC,KAAK,QACrB,KAAK,SAAS,KAAK,OAAO,EAC5B,CAEQ,cAAcC,EAAsB,EACtCA,EAAM,OAAS,SAAWA,EAAM,OAAS,WAC3C,KAAK,OAAO,EACZA,EAAM,eAAe,EAEzB,CAEA,QAAyB,CApD3B,IAAAC,EAAAC,EAAAC,EAqDI,IAAMC,GACJD,GAAAD,EAAA,KAAK,YAAL,KAAAA,GAAkBD,EAAA,KAAK,WAAW,aAAa,YAAY,IAAzC,YAAAA,EAA4C,QAA9D,KAAAE,EAAuE,OAEzE,OAAOE;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK;AAAA,wBACJ,CAAC,CAAC,KAAK;AAAA,iBACd,KAAK;AAAA,mBACH,KAAK;AAAA,qBACHC,EAAUF,CAAS;AAAA;AAAA;AAAA;AAAA,KAKtC,CACF,EA7CEG,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GARvBX,EASnB,uBAMAU,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAdvBX,EAenB,wBAKmCU,EAAA,CAAlCP,EAAM,kBAAkB,GApBNH,EAoBgB,wBApBhBA,EAArBU,EAAA,CADCC,EAAcZ,CAAW,GACLC",
   "names": ["styles", "i", "bl_switch_default", "blSwitchTag", "BlSwitch", "s", "bl_switch_default", "event", "_a", "_b", "_c", "ariaLabel", "y", "l", "__decorateClass", "e"]
 }

package/dist/chunk-PUNHEAEI.js

@@ -0,0 +1,46 @@
+import{a as m}from"./chunk-XQN3H7RG.js";import{a as f}from"./chunk-EPJ347EQ.js";import{a as g}from"./chunk-DJOD4BTL.js";import{a as u}from"./chunk-KGIPG6EV.js";import{a as p}from"./chunk-OLPYXE2P.js";import{a}from"./chunk-KPAWUBRO.js";import{a as n}from"./chunk-23UFIOHV.js";import{a as h,b as o,f as d,g as v,h as i,i as c,j as b}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var V=h`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:0;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;padding-left:var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within,.wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--padding-horizontal) - var(--label-padding));right:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within,.has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`,y=V;var e=class extends g(d){constructor(){super(...arguments);this.type="text";this.value="";this.required=!1;this.autofocus=!1;this.size="medium";this.disabled=!1;this.labelFixed=!1;this.onKeydown=r=>{r.code==="Enter"&&this.form&&u(this.form)};this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1;this.passwordVisible=!1;this.inputId=Math.random().toString(36).substring(2)}static get styles(){return[y]}set customInvalidText(r){this._customInvalidText=r,this.setValue(this.value)}get customInvalidText(){return this._customInvalidText}connectedCallback(){var r;super.connectedCallback(),this.addEventListener("keydown",this.onKeydown),this.addEventListener("invalid",this.onError),(r=this.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}disconnectedCallback(){super.disconnectedCallback(),this.removeEventListener("keydown",this.onKeydown),this.removeEventListener("invalid",this.onError)}textVisibilityToggle(){this.passwordVisible=!this.passwordVisible}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}forceCustomError(){this.validationTarget.setCustomValidity(this.customInvalidText||"An error occurred"),this.setValue(this.value),this.reportValidity()}clearCustomError(){this.validationTarget.setCustomValidity(""),this.setValue(this.value),this.reportValidity()}reportValidity(){return this.dirty=!0,this.requestUpdate(),this.checkValidity()}inputHandler(r){let l=r.target.value;this.value=l,this.onInput(l)}changeHandler(r){let l=r.target.value;this.dirty=!0,this.value=l,this.onChange(l)}firstUpdated(){this.setValue(this.value)}async updated(r){r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}render(){let r=this.checkValidity()?"":o`<p id="errorMessage" aria-live="polite" class="invalid-text">
+          ${this.validationMessage}
+        </p>`,l=this.helpText?o`<p id="helpText" class="help-text">${this.helpText}</p>`:"",x=this.icon?o`<bl-icon class="custom-icon" name="${this.icon}"></bl-icon>`:"",w=this.label?o`<label for=${this.inputId}>${this.label}</label>`:"",s=this.type==="password",k=s?o`<bl-button
+          size="small"
+          kind="neutral"
+          variant="tertiary"
+          class="${p({"reveal-button":!0,"password-visible":this.passwordVisible})}"
+          aria-label="Toggle password reveal"
+          @bl-click="${this.textVisibilityToggle}"
+        >
+          <bl-icon class="reveal-icon" slot="icon" name="eye_on"></bl-icon>
+          <bl-icon class="reveal-icon" slot="icon" name="eye_off"></bl-icon>
+        </bl-button>`:"",z={wrapper:!0,dirty:this.dirty,invalid:!this.checkValidity(),"has-icon":s||this.icon||this.dirty&&!this.checkValidity(),"has-value":this.value!==null&&this.value!==""},$=this.passwordVisible?"text":"password",T=s?$:this.type;return o`<div class=${p(z)}>
+      ${w}
+      <fieldset class="input-wrapper">
+        <legend><span>${this.label}</span></legend>
+        <input
+          id=${this.inputId}
+          type=${T}
+          .value=${f(this.value)}
+          inputmode="${a(this.inputmode)}"
+          ?autofocus=${this.autofocus}
+          autocomplete="${a(this.autocomplete)}"
+          placeholder="${a(this.placeholder)}"
+          minlength="${a(this.minlength)}"
+          maxlength="${a(this.maxlength)}"
+          min="${a(this.min)}"
+          max="${a(this.max)}"
+          pattern="${a(this.pattern)}"
+          step="${a(this.step)}"
+          ?required=${this.required}
+          ?disabled=${this.disabled}
+          @change=${this.changeHandler}
+          @input=${this.inputHandler}
+          aria-invalid=${this.checkValidity()?"false":"true"}
+          aria-describedby=${a(this.helpText?"helpText":void 0)}
+          aria-errormessage=${a(this.checkValidity()?void 0:"errorMessage")}
+        />
+        <div class="icon">
+          ${k} ${x}
+          <bl-icon class="error-icon" name="alert"></bl-icon>
+        </div>
+      </fieldset>
+      <div class="hint">${r} ${l}</div>
+    </div>`}};e.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},e.formControlValidators=m,t([b("input")],e.prototype,"validationTarget",2),t([i({reflect:!0})],e.prototype,"name",2),t([i({reflect:!0})],e.prototype,"type",2),t([i({reflect:!0})],e.prototype,"label",2),t([i({reflect:!0})],e.prototype,"placeholder",2),t([i({reflect:!0})],e.prototype,"value",2),t([i({type:Boolean,reflect:!0})],e.prototype,"required",2),t([i({type:Number,reflect:!0})],e.prototype,"minlength",2),t([i({type:Number,reflect:!0})],e.prototype,"maxlength",2),t([i({type:Number,reflect:!0})],e.prototype,"min",2),t([i({type:Number,reflect:!0})],e.prototype,"max",2),t([i({type:String,reflect:!0})],e.prototype,"pattern",2),t([i({type:Number,reflect:!0})],e.prototype,"step",2),t([i({type:String,reflect:!0})],e.prototype,"autocomplete",2),t([i({type:String,reflect:!0})],e.prototype,"inputmode",2),t([i({type:Boolean,reflect:!0})],e.prototype,"autofocus",2),t([i({type:String,reflect:!0})],e.prototype,"icon",2),t([i({type:String,reflect:!0})],e.prototype,"size",2),t([i({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([i({type:Boolean,attribute:"label-fixed",reflect:!0})],e.prototype,"labelFixed",2),t([i({type:String,attribute:"invalid-text",reflect:!0})],e.prototype,"customInvalidText",1),t([i({type:String,attribute:"help-text",reflect:!0})],e.prototype,"helpText",2),t([n("bl-change")],e.prototype,"onChange",2),t([n("bl-input")],e.prototype,"onInput",2),t([n("bl-invalid")],e.prototype,"onInvalid",2),t([c()],e.prototype,"dirty",2),t([c()],e.prototype,"passwordVisible",2),e=t([v("bl-input")],e);export{e as a};
+//# sourceMappingURL=chunk-PUNHEAEI.js.map

package/dist/chunk-PUNHEAEI.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/input/bl-input.css", "../src/components/input/bl-input.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;width:200px;position:relative}.wrapper{--border-color:var(--bl-color-neutral-lighter);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--height:var(--bl-size-2xl);--input-font:var(--bl-font-body-text-2);--line-height:var(--bl-font-body-text-2-line-height);--icon-size:var(--line-height);--icon-gap:var(--bl-size-xs);--padding-vertical:calc((var(--height) - var(--line-height)) / 2);--padding-horizontal:var(--bl-size-xs);--autofill-bg-color:var(--bl-color-primary-contrast);--label-padding:var(--bl-size-3xs);--background-color:var(--bl-color-neutral-full);display:grid;position:relative;gap:var(--bl-size-3xs)}.wrapper:focus-within{--border-color:var(--bl-color-primary);--icon-color:var(--bl-color-primary)}.wrapper.dirty.invalid{--border-color:var(--bl-color-danger);--icon-color:var(--bl-color-danger)}:host([size='large']) .wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m);--icon-gap:var(--bl-size-m)}:host([size='small']) .wrapper{--height:var(--bl-size-xl);--input-font:var(--bl-font-body-text-3);--padding-vertical:var(--bl-size-3xs);--icon-size:var(--bl-font-body-text-3-line-height);--icon-gap:var(--bl-size-2xs)}.input-wrapper{--border-size:1px;outline:0;display:flex;box-sizing:border-box;gap:var(--padding-vertical);height:var(--height);border:solid var(--border-size) var(--border-color);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));background-color:var(--background-color);border-radius:var(--bl-size-3xs);margin:0;width:0;min-width:100%}:host([disabled]) .wrapper{cursor:not-allowed;--background-color:var(--bl-color-neutral-lightest);--text-color:var(--bl-color-neutral-light)}.wrapper:has(input:autofill){--background-color:var(--autofill-bg-color)}.wrapper:has(input:-webkit-autofill){--background-color:var(--autofill-bg-color)}.input-wrapper legend,label{padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;max-width:max-content;transition:all ease-in .1s;font:var(--input-font);top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);pointer-events:none;color:var(--bl-color-neutral-light)}.has-icon label{right:calc(var(--padding-horizontal) + var(--icon-size) + var(--padding-vertical))}.input-wrapper legend{height:0;visibility:hidden;display:none}.input-wrapper legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}input{width:100%;align-self:stretch;outline:0;border:0;padding:0;padding-left:var(--label-padding);font:var(--input-font);color:var(--text-color);-webkit-text-fill-color:var(--text-color);background-color:transparent}input::-webkit-credentials-auto-fill-button{color:red}:where(.wrapper:focus-within,.wrapper.has-value) input{padding-left:var(--label-padding)}input:disabled{cursor:not-allowed}input:autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}input:-webkit-autofill{background-color:var(--autofill-bg-color);box-shadow:0 0 0 40rem var(--autofill-bg-color) inset}.icon{display:flex;align-items:center;gap:var(--icon-gap);flex-basis:var(--icon-size);align-self:center;height:var(--icon-size);margin-right:var(--label-padding)}bl-icon:not(.reveal-icon){font-size:var(--icon-size);color:var(--icon-color);height:var(--icon-size)}.reveal-button bl-icon{display:none}bl-icon[name='eye_on']{display:inline-block}.password-visible bl-icon[name='eye_on']{display:none}.password-visible bl-icon[name='eye_off']{display:inline-block}.wrapper:not(.has-icon) .icon{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label]) ::placeholder{color:transparent;-webkit-text-fill-color:transparent;transition:color ease-out .4s}:host([label-fixed]) ::placeholder,:host :focus-within ::placeholder{color:var(--bl-color-neutral-light);-webkit-text-fill-color:var(--bl-color-neutral-light)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0}:host([label-fixed]) legend{display:none}:host(:not([label-fixed])) :focus-within label,:host(:not([label-fixed])) .has-value label{top:0;left:calc(var(--padding-horizontal) - var(--label-padding));right:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-neutral-dark);padding:0 var(--label-padding);pointer-events:initial;z-index:var(--bl-index-base)}:host([label]:not([label-fixed])) :where(:focus-within,.has-value) legend{max-width:100%;font:var(--bl-font-caption);display:block}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}.dirty.invalid .error-icon{display:inline-block}.dirty.invalid .custom-icon ~ .error-icon{display:none}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { FormControlMixin } from '@open-wc/form-control';\nimport { submit } from '@open-wc/form-helpers';\nimport { live } from 'lit/directives/live.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { innerInputValidators } from '../../utilities/form-control';\nimport 'element-internals-polyfill';\nimport '../icon/bl-icon';\nimport '../button/bl-button';\n\nimport style from './bl-input.css';\n\nexport type InputSize = 'small' | 'medium' | 'large';\n/**\n * @tag bl-input\n * @summary Baklava Input component\n */\n@customElement('bl-input')\nexport default class BlInput extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  static formControlValidators = innerInputValidators;\n\n  @query('input')\n  validationTarget: HTMLInputElement;\n\n  /**\n   * Sets name of the input\n   */\n  @property({ reflect: true })\n  name?: string;\n\n  /**\n   * Type of the input. It's used to set `type` attribute of native input inside. Only `text`, `number` and `password` is supported for now.\n   */\n  @property({ reflect: true })\n  type: 'text' | 'password' | 'number' | 'tel' | 'url' = 'text';\n\n  /**\n   * Sets label of the input\n   */\n  @property({ reflect: true })\n  label?: string;\n\n  /**\n   * Sets placeholder of the input\n   */\n  @property({ reflect: true })\n  placeholder?: string;\n\n  /**\n   * Sets initial value of the input\n   */\n  @property({ reflect: true })\n  value = '';\n\n  /**\n   * Makes input a mandatory field\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Sets minimum length of the input\n   */\n  @property({ type: Number, reflect: true })\n  minlength?: number;\n\n  /**\n   * Sets maximum length of the input\n   */\n  @property({ type: Number, reflect: true })\n  maxlength?: number;\n\n  /**\n   * Sets the smallest number can be entered to a `number` input\n   */\n  @property({ type: Number, reflect: true })\n  min?: number;\n\n  /**\n   * Sets the biggest number can be entered to a `number` input\n   */\n  @property({ type: Number, reflect: true })\n  max?: number;\n\n  /**\n   * Sets a regex pattern form the input validation\n   */\n  @property({ type: String, reflect: true })\n  pattern?: string;\n\n  /**\n   * Sets the increase and decrease step to a `number` input\n   */\n  @property({ type: Number, reflect: true })\n  step?: number;\n\n  /**\n   * Hints browser to autocomplete this field.\n   */\n  @property({ type: String, reflect: true })\n  autocomplete: string;\n\n  /**\n   * Sets the input mode of the field for asking browser to show the desired keyboard.\n   */\n  @property({ type: String, reflect: true })\n  inputmode: 'none' | 'text' | 'decimal' | 'numeric' | 'tel' | 'search' | 'email' | 'url';\n\n  /**\n   * Sets input to get keyboard focus automatically\n   */\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  /**\n   * Sets the custom icon name. `bl-icon` component is used to show an icon\n   */\n  @property({ type: String, reflect: true })\n  icon?: string;\n\n  /**\n   * Sets input size.\n   */\n  @property({ type: String, reflect: true })\n  size?: InputSize = 'medium';\n\n  /**\n   * Disables the input\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n  labelFixed = false;\n\n  /**\n   * Overrides error message. This message will override default error messages\n   */\n  @property({ type: String, attribute: 'invalid-text', reflect: true })\n  set customInvalidText(value: string) {\n    this._customInvalidText = value;\n    this.setValue(this.value);\n  }\n\n  get customInvalidText(): string {\n    return this._customInvalidText;\n  }\n\n  private _customInvalidText: string;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text', reflect: true })\n  helpText?: string;\n\n  /**\n   * Fires when an alteration to the element's value is committed by the user. Unlike the input event, the change event is not necessarily fired for each alteration to an element's value.\n   */\n  @event('bl-change') private onChange: EventDispatcher<string>;\n\n  /**\n   * Fires when the value of an input element has been changed.\n   */\n  @event('bl-input') private onInput: EventDispatcher<string>;\n\n  /**\n   * Fires when the value of an input element has been changed.\n   */\n  @event('bl-invalid') private onInvalid: EventDispatcher<ValidityState>;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeydown);\n    this.addEventListener('invalid', this.onError);\n\n    this.form?.addEventListener('submit', () => {\n      this.reportValidity();\n    });\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.onKeydown);\n    this.removeEventListener('invalid', this.onError);\n  }\n\n  private onKeydown = (event: KeyboardEvent): void => {\n    if (event.code === 'Enter' && this.form) {\n      submit(this.form);\n    }\n  };\n\n  private onError = (): void => {\n    this.onInvalid(this.internals.validity);\n  };\n\n  @state() private dirty = false;\n\n  @state() private passwordVisible = false;\n\n  private textVisibilityToggle() {\n    this.passwordVisible = !this.passwordVisible;\n  }\n\n  validityCallback(): string | void {\n    return this.customInvalidText || this.validationTarget?.validationMessage;\n  }\n\n  /**\n   * Force to set input as in invalid state.\n   */\n  forceCustomError() {\n    this.validationTarget.setCustomValidity(this.customInvalidText || 'An error occurred');\n    this.setValue(this.value);\n    this.reportValidity();\n  }\n\n  /**\n   * Clear forced invalid state\n   */\n  clearCustomError() {\n    this.validationTarget.setCustomValidity('');\n    this.setValue(this.value);\n    this.reportValidity();\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    this.requestUpdate();\n    return this.checkValidity();\n  }\n\n  private inputHandler(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.value = value;\n    this.onInput(value);\n  }\n\n  private changeHandler(event: Event) {\n    const value = (event.target as HTMLInputElement).value;\n\n    this.dirty = true;\n    this.value = value;\n    this.onChange(value);\n  }\n\n  firstUpdated() {\n    this.setValue(this.value);\n  }\n\n  protected async updated(changedProperties: PropertyValues) {\n    if (changedProperties.has('value')) {\n      this.setValue(this.value);\n\n      await this.validationComplete;\n\n      this.requestUpdate();\n    }\n  }\n\n  private inputId = Math.random().toString(36).substring(2);\n\n  render(): TemplateResult {\n    const invalidMessage = !this.checkValidity()\n      ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n          ${this.validationMessage}\n        </p>`\n      : ``;\n    const helpMessage = this.helpText\n      ? html`<p id=\"helpText\" class=\"help-text\">${this.helpText}</p>`\n      : ``;\n\n    const icon = this.icon ? html`<bl-icon class=\"custom-icon\" name=\"${this.icon}\"></bl-icon>` : '';\n    const label = this.label ? html`<label for=${this.inputId}>${this.label}</label>` : '';\n    const passwordInput = this.type === 'password';\n\n    const revealButton = passwordInput\n      ? html`<bl-button\n          size=\"small\"\n          kind=\"neutral\"\n          variant=\"tertiary\"\n          class=\"${classMap({\n            'reveal-button': true,\n            'password-visible': this.passwordVisible,\n          })}\"\n          aria-label=\"Toggle password reveal\"\n          @bl-click=\"${this.textVisibilityToggle}\"\n        >\n          <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_on\"></bl-icon>\n          <bl-icon class=\"reveal-icon\" slot=\"icon\" name=\"eye_off\"></bl-icon>\n        </bl-button>`\n      : '';\n\n    const classes = {\n      'wrapper': true,\n      'dirty': this.dirty,\n      'invalid': !this.checkValidity(),\n      'has-icon': passwordInput || this.icon || (this.dirty && !this.checkValidity()),\n      'has-value': this.value !== null && this.value !== '',\n    };\n\n    const passwordType = this.passwordVisible ? 'text' : 'password';\n    const inputType = passwordInput ? passwordType : this.type;\n\n    return html`<div class=${classMap(classes)}>\n      ${label}\n      <fieldset class=\"input-wrapper\">\n        <legend><span>${this.label}</span></legend>\n        <input\n          id=${this.inputId}\n          type=${inputType}\n          .value=${live(this.value)}\n          inputmode=\"${ifDefined(this.inputmode)}\"\n          ?autofocus=${this.autofocus}\n          autocomplete=\"${ifDefined(this.autocomplete)}\"\n          placeholder=\"${ifDefined(this.placeholder)}\"\n          minlength=\"${ifDefined(this.minlength)}\"\n          maxlength=\"${ifDefined(this.maxlength)}\"\n          min=\"${ifDefined(this.min)}\"\n          max=\"${ifDefined(this.max)}\"\n          pattern=\"${ifDefined(this.pattern)}\"\n          step=\"${ifDefined(this.step)}\"\n          ?required=${this.required}\n          ?disabled=${this.disabled}\n          @change=${this.changeHandler}\n          @input=${this.inputHandler}\n          aria-invalid=${this.checkValidity() ? 'false' : 'true'}\n          aria-describedby=${ifDefined(this.helpText ? 'helpText' : undefined)}\n          aria-errormessage=${ifDefined(this.checkValidity() ? undefined : 'errorMessage')}\n        />\n        <div class=\"icon\">\n          ${revealButton} ${icon}\n          <bl-icon class=\"error-icon\" name=\"alert\"></bl-icon>\n        </div>\n      </fieldset>\n      <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-input': BlInput;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_input_default", "BlInput", "FormControlMixin", "s", "event", "submit", "bl_input_default", "value", "_a", "changedProperties", "invalidMessage", "y", "helpMessage", "icon", "label", "passwordInput", "revealButton", "o", "classes", "passwordType", "inputType", "l", "innerInputValidators", "__decorateClass", "i", "e", "t"]
+}

package/dist/chunk-QASRATPF.js

@@ -0,0 +1,42 @@
+import{a as m}from"./chunk-3B64VOWB.js";import{b as g,d as y,f as x,g as O,h as _}from"./chunk-ANYJUR6Q.js";import{a as f}from"./chunk-DJOD4BTL.js";import{a as p}from"./chunk-OLPYXE2P.js";import{a as b}from"./chunk-KPAWUBRO.js";import{a as v}from"./chunk-23UFIOHV.js";import{a as c,b as n,f as d,g as u,h as l,i as r,j as a,k as h}from"./chunk-57PTZNIL.js";import{a as i}from"./chunk-NZ3RGSR6.js";var T=c`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position,fixed)}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);-webkit-user-select:none;user-select:none;margin:0;width:0;min-width:100%}.placeholder{color:var(--placeholder-color);padding-left:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-neutral-lighter)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:0}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-left:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{max-width:max-content;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in .1s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:where(.select-open,.selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal)}:host([label]) :where(.select-open,.selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`,w=T;var t=class extends f(d){constructor(){super(...arguments);this.size="medium";this.required=!1;this.disabled=!1;this.multiple=!1;this.autofocus=!1;this.labelFixed=!1;this._isPopoverOpen=!1;this._additionalSelectedOptionCount=0;this._connectedOptions=[];this._cleanUpPopover=null;this._selectedOptions=[];this.dirty=!1;this._interactOutsideHandler=e=>{var s;let o=e.composedPath();(s=o==null?void 0:o.find(z=>z.tagName==="BL-SELECT"))!=null&&s.contains(this)||this.close()};this.focusedOptionIndex=-1}static get styles(){return[w]}get value(){return this._value}set value(e){if(this._value=e,Array.isArray(e)){let o=new FormData;e.forEach(s=>o.append(this.name,`${s}`)),this.setValue(o)}else this.setValue(e);this.setOptionsSelected()}shouldFormValueUpdate(){return this.value!==null&&this.value!==""}setOptionsSelected(){this._connectedOptions.forEach(e=>e.selected=this.value===e.value||Array.isArray(this.value)&&this.value.includes(e.value)),this._selectedOptions=[...this.options.filter(e=>e.selected)]}get options(){return this._connectedOptions}get opened(){return this._isPopoverOpen}get selectedOptions(){return this._selectedOptions}get additionalSelectedOptionCount(){return this._additionalSelectedOptionCount}validityCallback(){if(this.customInvalidText)return this.customInvalidText;let e=document.createElement("select");return e.required=this.required,e.validationMessage}reportValidity(){return this.dirty=!0,this.checkValidity()}resetFormControl(){this.value=this._initialValue}open(){this._isPopoverOpen=!0,this._setupPopover(),document.addEventListener("click",this._interactOutsideHandler,!0),document.addEventListener("focus",this._interactOutsideHandler,!0)}close(){this._isPopoverOpen=!1,this.focusedOptionIndex=-1,this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._interactOutsideHandler,!0),document.removeEventListener("focus",this._interactOutsideHandler,!0)}_setupPopover(){this._cleanUpPopover=O(this._selectInput,this._popover,()=>{_(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[g(),y(8),x({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:o})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${o}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",o=>{this.reportValidity()||o.preventDefault()})}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover()}inputTemplate(){let e=n`<ul class="selected-options">
+      ${this._selectedOptions.map(s=>n`<li>${s.textContent}</li>`)}
+    </ul>`,o=n`<bl-button
+      class="remove-all"
+      size="small"
+      variant="tertiary"
+      kind="neutral"
+      icon="close"
+      @click=${this._onClickRemove}
+    ></bl-button>`;return n`<fieldset
+      class=${p({"select-input":!0,"has-overflowed-options":this._additionalSelectedOptionCount>0})}
+      tabindex="${this.disabled?"-1":0}"
+      ?autofocus=${this.autofocus}
+      @click=${this.togglePopover}
+    >
+      <legend><span>${this.label}</span></legend>
+      <span class="placeholder">${this.placeholder}</span>
+      ${e}
+      <span class="additional-selection-count">+${this._additionalSelectedOptionCount}</span>
+      <div class="actions">
+        ${this.multiple?o:null}
+        <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
+
+        <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
+      </div>
+    </fieldset>`}render(){let e=this.checkValidity()?"":n`<p id="errorMessage" aria-live="polite" class="invalid-text">
+          ${this.validationMessage}
+        </p>`,o=this.helpText?n`<p class="help-text">${this.helpText}</p>`:"",s=this.label?n`<label>${this.label}</label>`:"";return n`<div
+      class=${p({"select-wrapper":!0,"select-open":this.opened,selected:this._selectedOptions.length>0,invalid:!this.validity.valid,dirty:this.dirty})}
+      @keydown=${this.handleKeydown}
+    >
+      ${s} ${this.inputTemplate()}
+      <div
+        class="popover"
+        tabindex="${b(this._isPopoverOpen?void 0:"-1")}"
+        @bl-select-option=${this._handleSelectOptionEvent}
+      >
+        <slot></slot>
+      </div>
+      <div class="hint">${e} ${o}</div>
+    </div> `}handleKeydown(e){this.focusedOptionIndex===-1&&["Enter","Space"].includes(e.code)?(this.togglePopover(),e.preventDefault()):this._isPopoverOpen===!1&&["ArrowDown","ArrowUp"].includes(e.code)?(this.open(),e.preventDefault()):e.code==="Escape"?(this.close(),e.preventDefault()):this._isPopoverOpen&&["ArrowDown","ArrowUp"].includes(e.code)&&(e.code==="ArrowDown"&&this.focusedOptionIndex++,e.code==="ArrowUp"&&this.focusedOptionIndex--,this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),e.preventDefault())}togglePopover(){this._isPopoverOpen?this.close():this.open()}_handleSelectEvent(){this._onBlSelect(this._selectedOptions.map(e=>({value:e.value,selected:e.selected,text:e.textContent})))}_handleSingleSelect(e){this.value=e.value,this._handleSelectEvent(),this._isPopoverOpen=!1}_handleMultipleSelect(){this.value=this._connectedOptions.filter(e=>e.selected).map(e=>e.value),this._handleSelectEvent()}_handleSelectOptionEvent(e){let o=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(o)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(o=>o.selected).forEach(o=>{o.selected=!1}),this.value=null,this._additionalSelectedOptionCount=0,this._handleSelectEvent()}_checkAdditionalItemCount(){if(!this.multiple||!this.selectedOptionsItems||this.selectedOptionsItems.length<2){this._additionalSelectedOptionCount=0;return}let e=[...this.selectedOptionsItems].findIndex(o=>o.offsetLeft>this.selectedOptionsContainer.offsetWidth);e>-1?this._additionalSelectedOptionCount=this.selectedOptionsItems.length-e:this._additionalSelectedOptionCount=0}firstUpdated(){this.value===void 0&&(this.value=""),this._initialValue=this._value}updated(e){e.has("multiple")&&typeof e.get("multiple")=="boolean"&&(this.value=null),this._checkAdditionalItemCount()}registerOption(e){this._connectedOptions.push(e),e.selected&&(this.multiple?(Array.isArray(this.value)||(this.value=[]),this.value=[...this.value,e.value]):this.value=e.value),this.setOptionsSelected(),this.requestUpdate()}unregisterOption(e){this._connectedOptions.splice(this._connectedOptions.indexOf(e),1)}};t.shadowRootOptions={...d.shadowRootOptions,delegatesFocus:!0},t.formControlValidators=[m],i([l()],t.prototype,"name",2),i([l()],t.prototype,"value",1),i([l({reflect:!0})],t.prototype,"label",2),i([l({})],t.prototype,"placeholder",2),i([l({type:String,reflect:!0})],t.prototype,"size",2),i([l({type:Boolean,reflect:!0})],t.prototype,"required",2),i([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),i([l({type:Boolean})],t.prototype,"multiple",2),i([l({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),i([l({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),i([l({type:String,attribute:"help-text"})],t.prototype,"helpText",2),i([l({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),i([r()],t.prototype,"_isPopoverOpen",2),i([r()],t.prototype,"_additionalSelectedOptionCount",2),i([a(".selected-options")],t.prototype,"selectedOptionsContainer",2),i([h(".selected-options li")],t.prototype,"selectedOptionsItems",2),i([a(".popover")],t.prototype,"_popover",2),i([a(".select-input")],t.prototype,"_selectInput",2),i([v("bl-select")],t.prototype,"_onBlSelect",2),i([r()],t.prototype,"_selectedOptions",2),i([r()],t.prototype,"dirty",2),i([a(".select-input")],t.prototype,"validationTarget",2),t=i([u("bl-select")],t);export{t as a};
+//# sourceMappingURL=chunk-QASRATPF.js.map

package/dist/chunk-QASRATPF.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/select/bl-select.css", "../src/components/select/bl-select.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:grid;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--label-padding:var(--bl-size-3xs);--border-size:1px;--background-color:var(--bl-color-neutral-full);--border-color:var(--bl-color-neutral-lighter);--border-focus-color:var(--bl-color-primary-highlight);--icon-color:var(--bl-color-neutral-light);--text-color:var(--bl-color-neutral-darker);--label-color:var(--bl-color-neutral-dark);--placeholder-color:var(--bl-color-neutral-light);--height:var(--bl-size-2xl);--menu-padding:0 var(--bl-size-m);--menu-margin-top:var(--bl-size-2xs);--font-size:var(--bl-font-size-m);--disabled-color:var(--bl-color-neutral-lightest);--menu-height:250px;--popover-position:var(--bl-popover-position,fixed)}:host([size='large']) .select-wrapper{--height:var(--bl-size-3xl);--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .select-wrapper{--height:var(--bl-size-xl);--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--font-size:var(--bl-font-size-s)}:host([disabled]) .select-wrapper{--placeholder-color:var(--bl-color-neutral-light)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-highlight);--label-color:var(--bl-color-danger)}.select-input{display:grid;align-items:center;justify-content:space-between;grid-template-columns:1fr max-content max-content;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 calc(var(--padding-horizontal) - var(--label-padding) - var(--border-size));border-radius:var(--bl-border-radius-s);color:var(--text-color);background-color:var(--background-color);-webkit-user-select:none;user-select:none;margin:0;width:0;min-width:100%}.placeholder{color:var(--placeholder-color);padding-left:var(--label-padding);white-space:nowrap;max-width:100%;overflow:hidden;text-overflow:ellipsis}.select-wrapper.selected .placeholder,:host([label]:not([label-fixed])) .select-wrapper:not(.select-open) .placeholder{display:none}.remove-all{display:none}.remove-all::after{content:'';position:absolute;left:1.5rem;bottom:4px;height:1rem;border-left:1px solid var(--bl-color-neutral-lighter)}.selected .remove-all{display:block}:host([disabled]) .remove-all,:host([disabled]) .remove-all::after{display:none}.dropdown-icon{font-size:var(--bl-font-size-m)}.dropdown-icon.open{display:none}.select-open .dropdown-icon.open{display:inline-block}.select-open .dropdown-icon.closed{display:none}.selected .dropdown-icon{--icon-color:var(--bl-color-neutral-darker)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-neutral-light)}.select-open .select-input,.select-input:focus-visible{border:solid 1px var(--border-focus-color);outline:0}:host([disabled]){cursor:not-allowed}:host([disabled]) .select-input{pointer-events:none;background-color:var(--disabled-color)}.select-input .selected-options{padding:0;padding-left:var(--label-padding);margin:0;list-style:none;flex:1;overflow:hidden;white-space:nowrap;text-overflow:ellipsis}.selected-options li{display:inline;font-size:var(--font-size);color:var(--text-color)}.selected-options li:not(:last-child)::after{content:', '}.select-input:not(.has-overflowed-options) .additional-selection-count{display:none}:host([disabled]) .selected-options li{color:var(--bl-color-neutral-light)}.select-input .actions{display:flex;align-items:center;justify-content:center;gap:var(--bl-size-2xs);margin-left:var(--bl-size-2xs)}.popover{--left:0;--top:0;position:var(--popover-position);border:solid 1px var(--border-color);background-color:var(--background-color);font:var(--bl-font-title-3-regular);border-radius:var(--bl-border-radius-s);padding:var(--menu-padding);outline:0;box-sizing:border-box;max-height:var(--menu-height);overflow-y:auto;display:none;flex-direction:column;z-index:var(--bl-index-popover);width:100%;top:var(--top);left:var(--left)}.select-open .popover{display:flex;border:solid 1px var(--border-focus-color)}bl-icon{color:var(--icon-color)}legend,label{max-width:max-content;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}label{position:absolute;display:block;top:var(--padding-vertical);left:var(--padding-horizontal);right:calc(var(--bl-size-2xs) + var(--bl-size-m) + var(--bl-size-2xs));transition:all ease-in .1s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color)}legend{height:0;visibility:hidden;display:none}legend span{padding:0 var(--label-padding);display:inline-block;opacity:0;visibility:visible}:where(.select-open,.selected) label{top:0;transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);pointer-events:initial;right:var(--padding-horizontal)}:host([label]) :where(.select-open,.selected) legend{max-width:100%;font:var(--bl-font-caption);display:block}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}:host([label-fixed]) legend{display:none}.hint{display:none;font:var(--bl-font-body-text-3)}.hint p{padding:0;margin:0}.error-icon,.invalid-text{display:none}.dirty.invalid label,.invalid-text,.error-icon{color:var(--bl-color-danger)}.help-text{color:var(--bl-color-neutral-dark)}.select-open .help-text,.select-open .invalid-text{visibility:hidden}:host([help-text]) .hint,.dirty.invalid .hint{display:block}.dirty.invalid .invalid-text{display:block}.dirty.invalid .help-text{display:none}`;\nexport default styles;\n", "import {\n  autoUpdate,\n  computePosition,\n  flip,\n  MiddlewareState,\n  offset,\n  size,\n} from '@floating-ui/dom';\nimport { FormControlMixin, requiredValidator } from '@open-wc/form-control';\nimport { FormValue } from '@open-wc/form-helpers';\nimport 'element-internals-polyfill';\nimport { CSSResultGroup, html, LitElement, PropertyValues } from 'lit';\nimport { customElement, property, query, queryAll, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../icon/bl-icon';\nimport style from '../select/bl-select.css';\nimport '../select/option/bl-select-option';\nimport type BlSelectOption from './option/bl-select-option';\n\nexport interface ISelectOption<T> {\n  value: T;\n  text: string;\n  selected: boolean;\n}\n\nexport type SelectSize = 'medium' | 'large' | 'small';\n\nexport type CleanUpFunction = () => void;\n\n/**\n * @tag bl-select\n * @summary Baklava Select component\n *\n * @cssproperty [--bl-popover-position=fixed] Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element.\n */\n@customElement('bl-select')\nexport default class BlSelect<ValueType extends FormValue = string> extends FormControlMixin(\n  LitElement\n) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n  static shadowRootOptions = {...LitElement.shadowRootOptions, delegatesFocus: true};\n\n  static formControlValidators = [requiredValidator];\n\n  /**\n   * Sets name of the select field\n   */\n  @property()\n  name: string;\n\n  private _value: ValueType | ValueType[] | null;\n\n  private _initialValue: ValueType | ValueType[] | null;\n\n  /**\n   * Sets the value of the select\n   */\n  @property()\n  get value(): ValueType | ValueType[] | null {\n    return this._value;\n  }\n\n  set value(val: ValueType | ValueType[] | null) {\n    this._value = val;\n\n    if (Array.isArray(val)) {\n      const formData = new FormData();\n      val.forEach(option => formData.append(this.name, `${option}`));\n      this.setValue(formData);\n    } else {\n      this.setValue(val);\n    }\n\n    this.setOptionsSelected();\n  }\n\n  shouldFormValueUpdate(): boolean {\n    return this.value !== null && this.value !== '';\n  }\n\n  /* Declare reactive properties */\n  /**\n   * Sets the label value\n   */\n  @property({ reflect: true })\n  label?: string;\n\n  /**\n   * Sets the placeholder value. If left blank, the label value (if specified) is set as placeholder.\n   */\n  @property({})\n  placeholder?: string;\n\n  /**\n   * Sets the size value. Select component's height value will be changed accordingly\n   */\n  @property({ type: String, reflect: true })\n  size: SelectSize = 'medium';\n\n  /**\n   * When option is not selected, shows component in error state\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /**\n   * Shows the component in disabled state.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Allows multiple options to be selected\n   */\n  @property({ type: Boolean })\n  multiple = false;\n\n  /**\n   * Sets input to get keyboard focus automatically\n   */\n  @property({ type: Boolean, reflect: true })\n  autofocus = false;\n\n  /**\n   * Makes label as fixed positioned\n   */\n  @property({ type: Boolean, attribute: 'label-fixed', reflect: true })\n  labelFixed = false;\n\n  /**\n   * Adds help text\n   */\n  @property({ type: String, attribute: 'help-text' })\n  helpText?: string;\n\n  /**\n   * Set custom error message\n   */\n  @property({ type: String, attribute: 'invalid-text' })\n  customInvalidText?: string;\n\n  /* Declare internal reactive properties */\n  @state()\n  private _isPopoverOpen = false;\n\n  @state()\n  private _additionalSelectedOptionCount = 0;\n\n  @query('.selected-options')\n  private selectedOptionsContainer!: HTMLElement;\n\n  @queryAll('.selected-options li')\n  private selectedOptionsItems!: NodeListOf<HTMLElement>;\n\n  @query('.popover')\n  private _popover: HTMLElement;\n\n  @query('.select-input')\n  private _selectInput: HTMLElement;\n\n  /**\n   * Fires when selection changes\n   */\n  @event('bl-select') private _onBlSelect: EventDispatcher<ISelectOption<ValueType>[]>;\n\n  private _connectedOptions: BlSelectOption<ValueType>[] = [];\n\n  private _cleanUpPopover: CleanUpFunction | null = null;\n\n  private setOptionsSelected() {\n    this._connectedOptions.forEach(\n      option =>\n        (option.selected =\n          this.value === option.value ||\n          (Array.isArray(this.value) && this.value.includes(option.value)))\n    );\n\n    this._selectedOptions = [...this.options.filter(option => option.selected)];\n  }\n\n  get options() {\n    return this._connectedOptions;\n  }\n\n  get opened() {\n    return this._isPopoverOpen;\n  }\n\n  @state()\n  private _selectedOptions: BlSelectOption<ValueType>[] = [];\n\n  @state()\n  private dirty = false;\n\n  get selectedOptions(): BlSelectOption<ValueType>[] {\n    return this._selectedOptions;\n  }\n\n  get additionalSelectedOptionCount() {\n    return this._additionalSelectedOptionCount;\n  }\n\n  validityCallback(): string | void {\n    if (this.customInvalidText) {\n      return this.customInvalidText;\n    }\n    const select = document.createElement('select');\n    select.required = this.required;\n\n    return select.validationMessage;\n  }\n\n  reportValidity() {\n    this.dirty = true;\n    return this.checkValidity();\n  }\n\n  resetFormControl(): void {\n    this.value = this._initialValue;\n  }\n\n  @query('.select-input')\n  validationTarget: HTMLElement;\n\n  open() {\n    this._isPopoverOpen = true;\n    this._setupPopover();\n    document.addEventListener('click', this._interactOutsideHandler, true);\n    document.addEventListener('focus', this._interactOutsideHandler, true);\n  }\n\n  close() {\n    this._isPopoverOpen = false;\n    this.focusedOptionIndex = -1;\n    this._cleanUpPopover && this._cleanUpPopover();\n    document.removeEventListener('click', this._interactOutsideHandler, true);\n    document.removeEventListener('focus', this._interactOutsideHandler, true);\n  }\n\n  private _interactOutsideHandler = (event: MouseEvent | FocusEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n\n    if (!eventPath?.find(el => el.tagName === 'BL-SELECT')?.contains(this)) {\n      this.close();\n    }\n  };\n\n  private _setupPopover() {\n    this._cleanUpPopover = autoUpdate(this._selectInput, this._popover, () => {\n      computePosition(this._selectInput, this._popover, {\n        placement: 'bottom',\n        strategy: 'fixed',\n        middleware: [\n          flip(),\n          offset(8),\n          size({\n            apply(args: MiddlewareState) {\n              Object.assign(args.elements.floating.style, {\n                width: `${args.elements.reference.getBoundingClientRect().width}px`,\n              });\n            },\n          }),\n        ],\n      }).then(({ x, y }) => {\n        this._popover.style.setProperty('--left', `${x}px`);\n        this._popover.style.setProperty('--top', `${y}px`);\n      });\n    });\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.form?.addEventListener('submit', (e: SubmitEvent) => {\n      if (!this.reportValidity()) {\n        e.preventDefault();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this._cleanUpPopover && this._cleanUpPopover();\n  }\n\n  private inputTemplate() {\n    const inputSelectedOptions = html`<ul class=\"selected-options\">\n      ${this._selectedOptions.map(item => html`<li>${item.textContent}</li>`)}\n    </ul>`;\n    const removeButton = html`<bl-button\n      class=\"remove-all\"\n      size=\"small\"\n      variant=\"tertiary\"\n      kind=\"neutral\"\n      icon=\"close\"\n      @click=${this._onClickRemove}\n    ></bl-button>`;\n\n    return html`<fieldset\n      class=${classMap({\n        'select-input': true,\n        'has-overflowed-options': this._additionalSelectedOptionCount > 0,\n      })}\n      tabindex=\"${this.disabled ? '-1' : 0}\"\n      ?autofocus=${this.autofocus}\n      @click=${this.togglePopover}\n    >\n      <legend><span>${this.label}</span></legend>\n      <span class=\"placeholder\">${this.placeholder}</span>\n      ${inputSelectedOptions}\n      <span class=\"additional-selection-count\">+${this._additionalSelectedOptionCount}</span>\n      <div class=\"actions\">\n        ${this.multiple ? removeButton : null}\n        <bl-icon class=\"dropdown-icon open\" name=\"arrow_up\"></bl-icon>\n\n        <bl-icon class=\"dropdown-icon closed\" name=\"arrow_down\"></bl-icon>\n      </div>\n    </fieldset>`;\n  }\n\n  render() {\n    const invalidMessage = !this.checkValidity()\n      ? html`<p id=\"errorMessage\" aria-live=\"polite\" class=\"invalid-text\">\n          ${this.validationMessage}\n        </p>`\n      : '';\n\n    const helpMessage = this.helpText ? html`<p class=\"help-text\">${this.helpText}</p>` : '';\n\n    const label = this.label ? html`<label>${this.label}</label>` : '';\n\n    return html`<div\n      class=${classMap({\n        'select-wrapper': true,\n        'select-open': this.opened,\n        'selected': this._selectedOptions.length > 0,\n        'invalid': !this.validity.valid,\n        'dirty': this.dirty,\n      })}\n      @keydown=${this.handleKeydown}\n    >\n      ${label} ${this.inputTemplate()}\n      <div\n        class=\"popover\"\n        tabindex=\"${ifDefined(this._isPopoverOpen ? undefined : '-1')}\"\n        @bl-select-option=${this._handleSelectOptionEvent}\n      >\n        <slot></slot>\n      </div>\n      <div class=\"hint\">${invalidMessage} ${helpMessage}</div>\n    </div> `;\n  }\n\n  private focusedOptionIndex = -1;\n\n  private handleKeydown(event: KeyboardEvent) {\n    if (this.focusedOptionIndex === -1 && ['Enter', 'Space'].includes(event.code)) {\n      this.togglePopover();\n      event.preventDefault();\n    } else if (this._isPopoverOpen === false && ['ArrowDown', 'ArrowUp'].includes(event.code)) {\n      this.open();\n      event.preventDefault();\n    } else if (event.code === 'Escape') {\n      this.close();\n      event.preventDefault();\n    } else if (this._isPopoverOpen && ['ArrowDown', 'ArrowUp'].includes(event.code)) {\n      event.code === 'ArrowDown' && this.focusedOptionIndex++;\n      event.code === 'ArrowUp' && this.focusedOptionIndex--;\n\n      // Don't exceed array indexes\n      this.focusedOptionIndex = Math.max(\n        0,\n        Math.min(this.focusedOptionIndex, this.options.length - 1)\n      );\n\n      this.options[this.focusedOptionIndex].focus();\n\n      event.preventDefault();\n    }\n  }\n\n  private togglePopover() {\n    this._isPopoverOpen ? this.close() : this.open();\n  }\n\n  private _handleSelectEvent() {\n    this._onBlSelect(\n      this._selectedOptions.map(\n        option =>\n          ({\n            value: option.value,\n            selected: option.selected,\n            text: option.textContent,\n          } as ISelectOption<ValueType>)\n      )\n    );\n  }\n\n  private _handleSingleSelect(optionItem: BlSelectOption<ValueType>) {\n    this.value = optionItem.value;\n\n    this._handleSelectEvent();\n    this._isPopoverOpen = false;\n  }\n\n  private _handleMultipleSelect() {\n    this.value = this._connectedOptions\n      .filter(option => option.selected)\n      .map(option => option.value);\n\n    this._handleSelectEvent();\n  }\n\n  private _handleSelectOptionEvent(e: CustomEvent) {\n    const optionItem = e.target as BlSelectOption<ValueType>;\n    this.dirty = true;\n\n    if (this.multiple) {\n      this._handleMultipleSelect();\n    } else {\n      this._handleSingleSelect(optionItem);\n    }\n  }\n\n  private _onClickRemove(e: MouseEvent) {\n    e.stopPropagation();\n\n    this._connectedOptions\n      .filter(option => option.selected)\n      .forEach(option => {\n        option.selected = false;\n      });\n\n    this.value = null;\n    this._additionalSelectedOptionCount = 0;\n    this._handleSelectEvent();\n  }\n\n  private _checkAdditionalItemCount() {\n    if (!this.multiple || !this.selectedOptionsItems || this.selectedOptionsItems.length < 2) {\n      this._additionalSelectedOptionCount = 0;\n      return;\n    }\n\n    const firstNonVisibleItemIndex = [...this.selectedOptionsItems].findIndex(\n      item => item.offsetLeft > this.selectedOptionsContainer.offsetWidth\n    );\n\n    if (firstNonVisibleItemIndex > -1) {\n      this._additionalSelectedOptionCount =\n        this.selectedOptionsItems.length - firstNonVisibleItemIndex;\n    } else {\n      this._additionalSelectedOptionCount = 0;\n    }\n  }\n\n  protected firstUpdated(): void {\n    if (this.value === undefined) {\n      this.value = '' as ValueType;\n    }\n\n    this._initialValue = this._value;\n  }\n\n  protected updated(_changedProperties: PropertyValues) {\n    if (\n      _changedProperties.has('multiple') &&\n      typeof _changedProperties.get('multiple') === 'boolean'\n    ) {\n      this.value = null;\n    }\n\n    this._checkAdditionalItemCount();\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to register itself to bl-select.\n   * @param option BlSelectOption reference to be registered\n   */\n  registerOption(option: BlSelectOption<ValueType>) {\n    this._connectedOptions.push(option);\n\n    if (option.selected) {\n      if (this.multiple) {\n        if (!Array.isArray(this.value)) {\n          this.value = [];\n        }\n        this.value = [...this.value, option.value];\n      } else {\n        this.value = option.value;\n      }\n    }\n\n    this.setOptionsSelected();\n    this.requestUpdate();\n  }\n\n  /**\n   * This method is used by `bl-select-option` component to unregister itself from bl-select.\n   * @param option BlSelectOption reference to be unregistered\n   */\n  unregisterOption(option: BlSelectOption<ValueType>) {\n    this._connectedOptions.splice(this._connectedOptions.indexOf(option), 1);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-select': BlSelect;\n  }\n}\n"],
+  "mappings": "6YACO,IAAMA,EAASC,8hLACfC,EAAQF,ECoCf,IAAqBG,EAArB,cAA4EC,EAC1EC,CACF,CAAE,CAFF,kCA+DE,UAAmB,SAMnB,cAAW,GAMX,cAAW,GAMX,cAAW,GAMX,eAAY,GAMZ,gBAAa,GAgBb,KAAQ,eAAiB,GAGzB,KAAQ,+BAAiC,EAmBzC,KAAQ,kBAAiD,CAAC,EAE1D,KAAQ,gBAA0C,KAsBlD,KAAQ,iBAAgD,CAAC,EAGzD,KAAQ,MAAQ,GA+ChB,KAAQ,wBAA2BC,GAAmC,CAnPxE,IAAAC,EAoPI,IAAMC,EAAYF,EAAM,aAAa,GAEhCC,EAAAC,GAAA,YAAAA,EAAW,KAAKC,GAAMA,EAAG,UAAY,eAArC,MAAAF,EAAmD,SAAS,OAC/D,KAAK,MAAM,CAEf,EA6GA,KAAQ,mBAAqB,GA7T7B,WAAW,QAAyB,CAClC,MAAO,CAACG,CAAK,CACf,CAmBA,IAAI,OAAwC,CAC1C,OAAO,KAAK,MACd,CAEA,IAAI,MAAMC,EAAqC,CAG7C,GAFA,KAAK,OAASA,EAEV,MAAM,QAAQA,CAAG,EAAG,CACtB,IAAMC,EAAW,IAAI,SACrBD,EAAI,QAAQE,GAAUD,EAAS,OAAO,KAAK,KAAM,GAAGC,GAAQ,CAAC,EAC7D,KAAK,SAASD,CAAQ,OAEtB,KAAK,SAASD,CAAG,EAGnB,KAAK,mBAAmB,CAC1B,CAEA,uBAAiC,CAC/B,OAAO,KAAK,QAAU,MAAQ,KAAK,QAAU,EAC/C,CA2FQ,oBAAqB,CAC3B,KAAK,kBAAkB,QACrBE,GACGA,EAAO,SACN,KAAK,QAAUA,EAAO,OACrB,MAAM,QAAQ,KAAK,KAAK,GAAK,KAAK,MAAM,SAASA,EAAO,KAAK,CACpE,EAEA,KAAK,iBAAmB,CAAC,GAAG,KAAK,QAAQ,OAAOA,GAAUA,EAAO,QAAQ,CAAC,CAC5E,CAEA,IAAI,SAAU,CACZ,OAAO,KAAK,iBACd,CAEA,IAAI,QAAS,CACX,OAAO,KAAK,cACd,CAQA,IAAI,iBAA+C,CACjD,OAAO,KAAK,gBACd,CAEA,IAAI,+BAAgC,CAClC,OAAO,KAAK,8BACd,CAEA,kBAAkC,CAChC,GAAI,KAAK,kBACP,OAAO,KAAK,kBAEd,IAAMC,EAAS,SAAS,cAAc,QAAQ,EAC9C,OAAAA,EAAO,SAAW,KAAK,SAEhBA,EAAO,iBAChB,CAEA,gBAAiB,CACf,YAAK,MAAQ,GACN,KAAK,cAAc,CAC5B,CAEA,kBAAyB,CACvB,KAAK,MAAQ,KAAK,aACpB,CAKA,MAAO,CACL,KAAK,eAAiB,GACtB,KAAK,cAAc,EACnB,SAAS,iBAAiB,QAAS,KAAK,wBAAyB,EAAI,EACrE,SAAS,iBAAiB,QAAS,KAAK,wBAAyB,EAAI,CACvE,CAEA,OAAQ,CACN,KAAK,eAAiB,GACtB,KAAK,mBAAqB,GAC1B,KAAK,iBAAmB,KAAK,gBAAgB,EAC7C,SAAS,oBAAoB,QAAS,KAAK,wBAAyB,EAAI,EACxE,SAAS,oBAAoB,QAAS,KAAK,wBAAyB,EAAI,CAC1E,CAUQ,eAAgB,CACtB,KAAK,gBAAkBC,EAAW,KAAK,aAAc,KAAK,SAAU,IAAM,CACxEC,EAAgB,KAAK,aAAc,KAAK,SAAU,CAChD,UAAW,SACX,SAAU,QACV,WAAY,CACVC,EAAK,EACLC,EAAO,CAAC,EACRC,EAAK,CACH,MAAMC,EAAuB,CAC3B,OAAO,OAAOA,EAAK,SAAS,SAAS,MAAO,CAC1C,MAAO,GAAGA,EAAK,SAAS,UAAU,sBAAsB,EAAE,SAC5D,CAAC,CACH,CACF,CAAC,CACH,CACF,CAAC,EAAE,KAAK,CAAC,CAAE,EAAAC,EAAG,EAAAC,CAAE,IAAM,CACpB,KAAK,SAAS,MAAM,YAAY,SAAU,GAAGD,KAAK,EAClD,KAAK,SAAS,MAAM,YAAY,QAAS,GAAGC,KAAK,CACnD,CAAC,CACH,CAAC,CACH,CAEA,mBAA0B,CAlR5B,IAAAf,EAmRI,MAAM,kBAAkB,GAExBA,EAAA,KAAK,OAAL,MAAAA,EAAW,iBAAiB,SAAWgB,GAAmB,CACnD,KAAK,eAAe,GACvBA,EAAE,eAAe,CAErB,EACF,CAEA,sBAAuB,CACrB,MAAM,qBAAqB,EAE3B,KAAK,iBAAmB,KAAK,gBAAgB,CAC/C,CAEQ,eAAgB,CACtB,IAAMC,EAAuBF;AAAA,QACzB,KAAK,iBAAiB,IAAIG,GAAQH,QAAWG,EAAK,kBAAkB;AAAA,WAElEC,EAAeJ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,eAMV,KAAK;AAAA,mBAGhB,OAAOA;AAAA,cACGK,EAAS,CACf,eAAgB,GAChB,yBAA0B,KAAK,+BAAiC,CAClE,CAAC;AAAA,kBACW,KAAK,SAAW,KAAO;AAAA,mBACtB,KAAK;AAAA,eACT,KAAK;AAAA;AAAA,sBAEE,KAAK;AAAA,kCACO,KAAK;AAAA,QAC/BH;AAAA,kDAC0C,KAAK;AAAA;AAAA,UAE7C,KAAK,SAAWE,EAAe;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMvC,CAEA,QAAS,CACP,IAAME,EAAkB,KAAK,cAAc,EAIvC,GAHAN;AAAA,YACI,KAAK;AAAA,cAIPO,EAAc,KAAK,SAAWP,yBAA4B,KAAK,eAAiB,GAEhFQ,EAAQ,KAAK,MAAQR,WAAc,KAAK,gBAAkB,GAEhE,OAAOA;AAAA,cACGK,EAAS,CACf,iBAAkB,GAClB,cAAe,KAAK,OACpB,SAAY,KAAK,iBAAiB,OAAS,EAC3C,QAAW,CAAC,KAAK,SAAS,MAC1B,MAAS,KAAK,KAChB,CAAC;AAAA,iBACU,KAAK;AAAA;AAAA,QAEdG,KAAS,KAAK,cAAc;AAAA;AAAA;AAAA,oBAGhBC,EAAU,KAAK,eAAiB,OAAY,IAAI;AAAA,4BACxC,KAAK;AAAA;AAAA;AAAA;AAAA,0BAIPH,KAAkBC;AAAA,YAE1C,CAIQ,cAAcvB,EAAsB,CACtC,KAAK,qBAAuB,IAAM,CAAC,QAAS,OAAO,EAAE,SAASA,EAAM,IAAI,GAC1E,KAAK,cAAc,EACnBA,EAAM,eAAe,GACZ,KAAK,iBAAmB,IAAS,CAAC,YAAa,SAAS,EAAE,SAASA,EAAM,IAAI,GACtF,KAAK,KAAK,EACVA,EAAM,eAAe,GACZA,EAAM,OAAS,UACxB,KAAK,MAAM,EACXA,EAAM,eAAe,GACZ,KAAK,gBAAkB,CAAC,YAAa,SAAS,EAAE,SAASA,EAAM,IAAI,IAC5EA,EAAM,OAAS,aAAe,KAAK,qBACnCA,EAAM,OAAS,WAAa,KAAK,qBAGjC,KAAK,mBAAqB,KAAK,IAC7B,EACA,KAAK,IAAI,KAAK,mBAAoB,KAAK,QAAQ,OAAS,CAAC,CAC3D,EAEA,KAAK,QAAQ,KAAK,kBAAkB,EAAE,MAAM,EAE5CA,EAAM,eAAe,EAEzB,CAEQ,eAAgB,CACtB,KAAK,eAAiB,KAAK,MAAM,EAAI,KAAK,KAAK,CACjD,CAEQ,oBAAqB,CAC3B,KAAK,YACH,KAAK,iBAAiB,IACpBO,IACG,CACC,MAAOA,EAAO,MACd,SAAUA,EAAO,SACjB,KAAMA,EAAO,WACf,EACJ,CACF,CACF,CAEQ,oBAAoBmB,EAAuC,CACjE,KAAK,MAAQA,EAAW,MAExB,KAAK,mBAAmB,EACxB,KAAK,eAAiB,EACxB,CAEQ,uBAAwB,CAC9B,KAAK,MAAQ,KAAK,kBACf,OAAOnB,GAAUA,EAAO,QAAQ,EAChC,IAAIA,GAAUA,EAAO,KAAK,EAE7B,KAAK,mBAAmB,CAC1B,CAEQ,yBAAyB,EAAgB,CAC/C,IAAMmB,EAAa,EAAE,OACrB,KAAK,MAAQ,GAET,KAAK,SACP,KAAK,sBAAsB,EAE3B,KAAK,oBAAoBA,CAAU,CAEvC,CAEQ,eAAe,EAAe,CACpC,EAAE,gBAAgB,EAElB,KAAK,kBACF,OAAOnB,GAAUA,EAAO,QAAQ,EAChC,QAAQA,GAAU,CACjBA,EAAO,SAAW,EACpB,CAAC,EAEH,KAAK,MAAQ,KACb,KAAK,+BAAiC,EACtC,KAAK,mBAAmB,CAC1B,CAEQ,2BAA4B,CAClC,GAAI,CAAC,KAAK,UAAY,CAAC,KAAK,sBAAwB,KAAK,qBAAqB,OAAS,EAAG,CACxF,KAAK,+BAAiC,EACtC,OAGF,IAAMoB,EAA2B,CAAC,GAAG,KAAK,oBAAoB,EAAE,UAC9DR,GAAQA,EAAK,WAAa,KAAK,yBAAyB,WAC1D,EAEIQ,EAA2B,GAC7B,KAAK,+BACH,KAAK,qBAAqB,OAASA,EAErC,KAAK,+BAAiC,CAE1C,CAEU,cAAqB,CACzB,KAAK,QAAU,SACjB,KAAK,MAAQ,IAGf,KAAK,cAAgB,KAAK,MAC5B,CAEU,QAAQC,EAAoC,CAElDA,EAAmB,IAAI,UAAU,GACjC,OAAOA,EAAmB,IAAI,UAAU,GAAM,YAE9C,KAAK,MAAQ,MAGf,KAAK,0BAA0B,CACjC,CAMA,eAAerB,EAAmC,CAChD,KAAK,kBAAkB,KAAKA,CAAM,EAE9BA,EAAO,WACL,KAAK,UACF,MAAM,QAAQ,KAAK,KAAK,IAC3B,KAAK,MAAQ,CAAC,GAEhB,KAAK,MAAQ,CAAC,GAAG,KAAK,MAAOA,EAAO,KAAK,GAEzC,KAAK,MAAQA,EAAO,OAIxB,KAAK,mBAAmB,EACxB,KAAK,cAAc,CACrB,CAMA,iBAAiBA,EAAmC,CAClD,KAAK,kBAAkB,OAAO,KAAK,kBAAkB,QAAQA,CAAM,EAAG,CAAC,CACzE,CACF,EAvdqBV,EAMZ,kBAAoB,CAAC,GAAGE,EAAW,kBAAmB,eAAgB,EAAI,EAN9DF,EAQZ,sBAAwB,CAACgC,CAAiB,EAMjDC,EAAA,CADCb,EAAS,GAbSpB,EAcnB,oBAUIiC,EAAA,CADHb,EAAS,GAvBSpB,EAwBf,qBA2BJiC,EAAA,CADCb,EAAS,CAAE,QAAS,EAAK,CAAC,GAlDRpB,EAmDnB,qBAMAiC,EAAA,CADCb,EAAS,CAAC,CAAC,GAxDOpB,EAyDnB,2BAMAiC,EAAA,CADCb,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GA9DtBpB,EA+DnB,oBAMAiC,EAAA,CADCb,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GApEvBpB,EAqEnB,wBAMAiC,EAAA,CADCb,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1EvBpB,EA2EnB,wBAMAiC,EAAA,CADCb,EAAS,CAAE,KAAM,OAAQ,CAAC,GAhFRpB,EAiFnB,wBAMAiC,EAAA,CADCb,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtFvBpB,EAuFnB,yBAMAiC,EAAA,CADCb,EAAS,CAAE,KAAM,QAAS,UAAW,cAAe,QAAS,EAAK,CAAC,GA5FjDpB,EA6FnB,0BAMAiC,EAAA,CADCb,EAAS,CAAE,KAAM,OAAQ,UAAW,WAAY,CAAC,GAlG/BpB,EAmGnB,wBAMAiC,EAAA,CADCb,EAAS,CAAE,KAAM,OAAQ,UAAW,cAAe,CAAC,GAxGlCpB,EAyGnB,iCAIQiC,EAAA,CADPC,EAAM,GA5GYlC,EA6GX,8BAGAiC,EAAA,CADPC,EAAM,GA/GYlC,EAgHX,8CAGAiC,EAAA,CADPE,EAAM,mBAAmB,GAlHPnC,EAmHX,wCAGAiC,EAAA,CADPb,EAAS,sBAAsB,GArHbpB,EAsHX,oCAGAiC,EAAA,CADPE,EAAM,UAAU,GAxHEnC,EAyHX,wBAGAiC,EAAA,CADPE,EAAM,eAAe,GA3HHnC,EA4HX,4BAKoBiC,EAAA,CAA3B9B,EAAM,WAAW,GAjICH,EAiIS,2BA0BpBiC,EAAA,CADPC,EAAM,GA1JYlC,EA2JX,gCAGAiC,EAAA,CADPC,EAAM,GA7JYlC,EA8JX,qBA8BRiC,EAAA,CADCE,EAAM,eAAe,GA3LHnC,EA4LnB,gCA5LmBA,EAArBiC,EAAA,CADCb,EAAc,WAAW,GACLpB",
+  "names": ["styles", "i", "bl_select_default", "BlSelect", "FormControlMixin", "s", "event", "_a", "eventPath", "el", "bl_select_default", "val", "formData", "option", "select", "P", "z", "b", "O", "k", "args", "x", "y", "e", "inputSelectedOptions", "item", "removeButton", "o", "invalidMessage", "helpMessage", "label", "l", "optionItem", "firstNonVisibleItemIndex", "_changedProperties", "requiredValidator", "__decorateClass", "t", "i"]
+}

package/dist/chunk-RFAEPGC3.js

@@ -0,0 +1,7 @@
+import{a as i,b as l,f as o,g as u,h as a,i as s,j as p}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var m=i`.progress-indicator{--max:100;--value:0;--value-color:var(--bl-color-success);--height:var(--bl-size-2xs);--radius:var(--bl-border-radius-s);position:relative;background-color:var(--bl-color-neutral-lightest);height:var(--height);border-radius:var(--radius);width:100%}.progress-indicator::before{content:'';position:absolute;height:100%;width:calc(100% / var(--max) * var(--value));background-color:var(--value-color);border-radius:var(--radius);transition:width ease var(--bl-progress-indicator-transition-duration,.2s)}:host([size='small']) .progress-indicator{--height:var(--bl-size-3xs);--radius:var(--bl-border-radius-xs)}:host([size='large']) .progress-indicator{--height:var(--bl-size-xs);--radius:var(--bl-border-radius-m)}:host([failed]) .progress-indicator{--value-color:var(--bl-color-danger)}`,d=m;var e=class extends o{constructor(){super(...arguments);this.size="medium";this.failed=!1;this._max=100;this._value=0}static get styles(){return d}get max(){return this._max}set max(t){this._max=t,this.updateCssVariable()}get value(){return this._value}set value(t){this._value=t,this.updateCssVariable()}async updateCssVariable(){await this.updateComplete,this.wrapper.style.setProperty("--value",`${this.value}`),this.wrapper.style.setProperty("--max",`${this.max}`)}render(){return l`<div
+      class="progress-indicator"
+      role="progressbar"
+      aria-valuemax="${this._max}"
+      aria-valuenow="${this._value}"
+    ></div>`}};r([p(".progress-indicator")],e.prototype,"wrapper",2),r([a({type:String,reflect:!0})],e.prototype,"size",2),r([a({type:Boolean,reflect:!0})],e.prototype,"failed",2),r([a({type:Number})],e.prototype,"max",1),r([a({type:Number})],e.prototype,"value",1),r([s()],e.prototype,"_max",2),r([s()],e.prototype,"_value",2),e=r([u("bl-progress-indicator")],e);export{e as a};
+//# sourceMappingURL=chunk-RFAEPGC3.js.map

package/dist/chunk-RFAEPGC3.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/progress-indicator/bl-progress-indicator.css", "../src/components/progress-indicator/bl-progress-indicator.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.progress-indicator{--max:100;--value:0;--value-color:var(--bl-color-success);--height:var(--bl-size-2xs);--radius:var(--bl-border-radius-s);position:relative;background-color:var(--bl-color-neutral-lightest);height:var(--height);border-radius:var(--radius);width:100%}.progress-indicator::before{content:'';position:absolute;height:100%;width:calc(100% / var(--max) * var(--value));background-color:var(--value-color);border-radius:var(--radius);transition:width ease var(--bl-progress-indicator-transition-duration,.2s)}:host([size='small']) .progress-indicator{--height:var(--bl-size-3xs);--radius:var(--bl-border-radius-xs)}:host([size='large']) .progress-indicator{--height:var(--bl-size-xs);--radius:var(--bl-border-radius-m)}:host([failed]) .progress-indicator{--value-color:var(--bl-color-danger)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport style from './bl-progress-indicator.css';\n\nexport type ProgressIndicatorSize = 'small' | 'medium' | 'large';\n\n/**\n * @tag bl-progress-indicator\n * @summary Baklava Progress Indicator component\n *\n * @cssproperty [--bl-progress-indicator-transition-duration=.2s] Duration of the transition of progress bar\n * @property {max} [max=100]\n * @property {number} [value=0]\n */\n\n@customElement('bl-progress-indicator')\nexport default class BlProgressIndicator extends LitElement {\n  static get styles(): CSSResultGroup {\n    return style;\n  }\n\n  @query('.progress-indicator') private wrapper: HTMLElement;\n\n  /**\n   * Sets the size\n   */\n  @property({ type: String, reflect: true })\n  size: ProgressIndicatorSize = 'medium';\n\n  /**\n   * Sets the status\n   */\n  @property({ type: Boolean, reflect: true })\n  failed = false;\n\n  /**\n   * Sets the max\n   */\n  @property({ type: Number })\n  get max() {\n    return this._max;\n  }\n  set max(max: number) {\n    this._max = max;\n    this.updateCssVariable();\n  }\n\n  /**\n   * Sets the value\n   */\n  @property({ type: Number })\n  get value() {\n    return this._value;\n  }\n  set value(value: number) {\n    this._value = value;\n    this.updateCssVariable();\n  }\n\n  @state() private _max = 100;\n  @state() private _value = 0;\n\n  async updateCssVariable() {\n    await this.updateComplete;\n    this.wrapper.style.setProperty('--value', `${this.value}`);\n    this.wrapper.style.setProperty('--max', `${this.max}`);\n  }\n\n  render(): TemplateResult {\n    return html`<div\n      class=\"progress-indicator\"\n      role=\"progressbar\"\n      aria-valuemax=\"${this._max}\"\n      aria-valuenow=\"${this._value}\"\n    ></div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-progress-indicator': BlProgressIndicator;\n  }\n}\n"],
+  "mappings": "0HACO,IAAMA,EAAS,yyBACfC,EAAQD,ECcf,IAAqBE,EAArB,cAAiDC,CAAW,CAA5D,kCAWE,UAA8B,SAM9B,YAAS,GA0BA,KAAQ,KAAO,IACf,KAAQ,OAAS,EA3C1B,WAAW,QAAyB,CAClC,OAAOC,CACT,CAoBA,IAAI,KAAM,CACR,OAAO,KAAK,IACd,CACA,IAAI,IAAIC,EAAa,CACnB,KAAK,KAAOA,EACZ,KAAK,kBAAkB,CACzB,CAMA,IAAI,OAAQ,CACV,OAAO,KAAK,MACd,CACA,IAAI,MAAMC,EAAe,CACvB,KAAK,OAASA,EACd,KAAK,kBAAkB,CACzB,CAKA,MAAM,mBAAoB,CACxB,MAAM,KAAK,eACX,KAAK,QAAQ,MAAM,YAAY,UAAW,GAAG,KAAK,OAAO,EACzD,KAAK,QAAQ,MAAM,YAAY,QAAS,GAAG,KAAK,KAAK,CACvD,CAEA,QAAyB,CACvB,OAAOC;AAAA;AAAA;AAAA,uBAGY,KAAK;AAAA,uBACL,KAAK;AAAA,YAE1B,CACF,EAvDwCC,EAAA,CAArCC,EAAM,qBAAqB,GALTP,EAKmB,uBAMtCM,EAAA,CADCE,EAAS,CAAE,KAAM,OAAQ,QAAS,EAAK,CAAC,GAVtBR,EAWnB,oBAMAM,EAAA,CADCE,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAhBvBR,EAiBnB,sBAMIM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAtBPR,EAuBf,mBAYAM,EAAA,CADHE,EAAS,CAAE,KAAM,MAAO,CAAC,GAlCPR,EAmCf,qBAQaM,EAAA,CAAhBG,EAAM,GA3CYT,EA2CF,oBACAM,EAAA,CAAhBG,EAAM,GA5CYT,EA4CF,sBA5CEA,EAArBM,EAAA,CADCE,EAAc,uBAAuB,GACjBR",
+  "names": ["styles", "bl_progress_indicator_default", "BlProgressIndicator", "s", "bl_progress_indicator_default", "max", "value", "y", "__decorateClass", "i", "e", "t"]
+}

package/dist/chunk-TQBAGFBF.js

@@ -0,0 +1,11 @@
+import{a as l,b as n,f as r,g as d}from"./chunk-57PTZNIL.js";import{a as i}from"./chunk-NZ3RGSR6.js";var b=l`.tabs{background-color:var(--bl-color-neutral-full);border-bottom:var(--bl-size-4xs) solid var(--bl-color-neutral-lightest);display:flex;flex-direction:row}.tabs-list{overflow-x:scroll;border-radius:var(--bl-border-radius-m) var(--bl-border-radius-m) 0 0}.panels{border-radius:0 0 var(--bl-border-radius-m) var(--bl-border-radius-m)}`,o=b;var s=class extends r{constructor(){super(...arguments);this._connectedTabs=[];this._connectedPanels=[];this._tabFocus=0}static get styles(){return[o]}get tabs(){return this._connectedTabs}get panels(){return this._connectedPanels}registerTab(e){let t=this._connectedTabs.filter(a=>!a.disabled).length===0&&!e.disabled;this._connectedTabs.push(e),(!e.disabled&&e.selected||t)&&(this.selectedTabName=e.name,this._tabFocus=this._connectedTabs.length-1)}unregisterTab(e){var t;this._connectedTabs.splice(this._connectedTabs.indexOf(e),1),e.selected&&((t=this._connectedTabs.find(a=>!a.disabled))==null||t.select())}registerTabPanel(e){e.hidden=e.tab!==this.selectedTabName,e.tabIndex=0,this._connectedPanels.push(e)}unregisterTabPanel(e){this._connectedTabs.splice(this._connectedPanels.indexOf(e),1)}get selectedTabName(){return this._selectedTabName}set selectedTabName(e){this._selectedTabName=e,this._connectedTabs.forEach(t=>{t.selected=e===t.name}),this._connectedPanels.forEach(t=>{t.hidden=t.tab!==this._selectedTabName})}_handleTabSelected(e){this.selectedTabName=e.detail,this._tabFocus=this._connectedTabs.findIndex(t=>t.name===e.detail)}_handleTabListKeyDown(e){if(e.key==="ArrowRight"||e.key==="ArrowLeft"){if(e.key==="ArrowRight")do this._tabFocus++,this._tabFocus>=this._connectedTabs.length&&(this._tabFocus=0);while(this._connectedTabs[this._tabFocus].disabled);else if(e.key==="ArrowLeft")do this._tabFocus--,this._tabFocus<0&&(this._tabFocus=this._connectedTabs.length-1);while(this._connectedTabs[this._tabFocus].disabled);this._connectedTabs[this._tabFocus].focus()}}render(){return n` <div class="container" @bl-tab-selected="${this._handleTabSelected}">
+      <div role="tablist" @keydown=${this._handleTabListKeyDown} class="tabs-list">
+        <div class="tabs">
+          <slot name="tabs"></slot>
+        </div>
+      </div>
+      <div role="tabpanel" class="panels">
+        <slot></slot>
+      </div>
+    </div>`}};s=i([d("bl-tab-group")],s);export{s as a};
+//# sourceMappingURL=chunk-TQBAGFBF.js.map

package/dist/chunk-TQBAGFBF.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/tab-group/bl-tab-group.css", "../src/components/tab-group/bl-tab-group.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.tabs{background-color:var(--bl-color-neutral-full);border-bottom:var(--bl-size-4xs) solid var(--bl-color-neutral-lightest);display:flex;flex-direction:row}.tabs-list{overflow-x:scroll;border-radius:var(--bl-border-radius-m) var(--bl-border-radius-m) 0 0}.panels{border-radius:0 0 var(--bl-border-radius-m) var(--bl-border-radius-m)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement } from 'lit/decorators.js';\nimport style from './bl-tab-group.css';\nimport './tab-panel/bl-tab-panel';\nimport './tab/bl-tab';\nimport type BlTabPanel from './tab-panel/bl-tab-panel';\nimport type BlTab from './tab/bl-tab';\n\n/**\n * @tag bl-tab-group\n * @summary Baklava Tab group component\n */\n@customElement('bl-tab-group')\nexport default class BlTabGroup extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  private _connectedTabs: BlTab[] = [];\n  private _connectedPanels: BlTabPanel[] = [];\n  private _tabFocus = 0;\n\n  get tabs() {\n    return this._connectedTabs;\n  }\n\n  get panels() {\n    return this._connectedPanels;\n  }\n\n  /**\n   * This method is used by `tab` component to register them self to the tab group.\n   * @param tab BlTab reference to be registered\n   */\n  registerTab(tab: BlTab) {\n    const isFirstAndNotDisabled =\n      this._connectedTabs.filter(t => !t.disabled).length === 0 && !tab.disabled;\n    this._connectedTabs.push(tab);\n\n    if ((!tab.disabled && tab.selected) || isFirstAndNotDisabled) {\n      this.selectedTabName = tab.name;\n      this._tabFocus = this._connectedTabs.length - 1;\n    }\n  }\n\n  /**\n   * This method is used by `tab` component to unregister them self to the tab group.\n   * @param tab BlTab reference to be unregistered\n   */\n  unregisterTab(tab: BlTab) {\n    this._connectedTabs.splice(this._connectedTabs.indexOf(tab), 1);\n    if (tab.selected) {\n      this._connectedTabs.find(t => !t.disabled)?.select();\n    }\n  }\n\n  /**\n   * This method is used by `tab-panel` component to register them self to the tab group.\n   * @param panel BlTabPanel reference to be registered\n   */\n  registerTabPanel(panel: BlTabPanel) {\n    panel.hidden = panel.tab !== this.selectedTabName;\n    panel.tabIndex = 0;\n    this._connectedPanels.push(panel);\n  }\n\n  /**\n   * This method is used by `tab-panel` component to unregister them self to the tab group.\n   * @param panel BlTabPanel reference to be unregistered\n   */\n  unregisterTabPanel(panel: BlTabPanel) {\n    this._connectedTabs.splice(this._connectedPanels.indexOf(panel), 1);\n  }\n\n  private _selectedTabName: string;\n\n  get selectedTabName() {\n    return this._selectedTabName;\n  }\n\n  set selectedTabName(name: string) {\n    this._selectedTabName = name;\n    this._connectedTabs.forEach(t => {\n      t.selected = name === t.name;\n    });\n    this._connectedPanels.forEach(p => {\n      p.hidden = p.tab !== this._selectedTabName;\n    });\n  }\n\n  private _handleTabSelected(e: CustomEvent) {\n    this.selectedTabName = e.detail;\n    this._tabFocus = this._connectedTabs.findIndex(t => t.name === e.detail);\n  }\n\n  private _handleTabListKeyDown(e: KeyboardEvent) {\n    if (e.key === 'ArrowRight' || e.key === 'ArrowLeft') {\n      if (e.key === 'ArrowRight') {\n        do {\n          this._tabFocus++;\n          if (this._tabFocus >= this._connectedTabs.length) {\n            this._tabFocus = 0;\n          }\n        } while (this._connectedTabs[this._tabFocus].disabled);\n      } else if (e.key === 'ArrowLeft') {\n        do {\n          this._tabFocus--;\n          if (this._tabFocus < 0) {\n            this._tabFocus = this._connectedTabs.length - 1;\n          }\n        } while (this._connectedTabs[this._tabFocus].disabled);\n      }\n\n      this._connectedTabs[this._tabFocus].focus();\n    }\n  }\n\n  render(): TemplateResult {\n    return html` <div class=\"container\" @bl-tab-selected=\"${this._handleTabSelected}\">\n      <div role=\"tablist\" @keydown=${this._handleTabListKeyDown} class=\"tabs-list\">\n        <div class=\"tabs\">\n          <slot name=\"tabs\"></slot>\n        </div>\n      </div>\n      <div role=\"tabpanel\" class=\"panels\">\n        <slot></slot>\n      </div>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tab-group': BlTabGroup;\n  }\n}\n"],
+  "mappings": "qGACO,IAAMA,EAASC,iVACfC,EAAQF,ECWf,IAAqBG,EAArB,cAAwCC,CAAW,CAAnD,kCAKE,KAAQ,eAA0B,CAAC,EACnC,KAAQ,iBAAiC,CAAC,EAC1C,KAAQ,UAAY,EANpB,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAMA,IAAI,MAAO,CACT,OAAO,KAAK,cACd,CAEA,IAAI,QAAS,CACX,OAAO,KAAK,gBACd,CAMA,YAAYC,EAAY,CACtB,IAAMC,EACJ,KAAK,eAAe,OAAOC,GAAK,CAACA,EAAE,QAAQ,EAAE,SAAW,GAAK,CAACF,EAAI,SACpE,KAAK,eAAe,KAAKA,CAAG,GAEvB,CAACA,EAAI,UAAYA,EAAI,UAAaC,KACrC,KAAK,gBAAkBD,EAAI,KAC3B,KAAK,UAAY,KAAK,eAAe,OAAS,EAElD,CAMA,cAAcA,EAAY,CAjD5B,IAAAG,EAkDI,KAAK,eAAe,OAAO,KAAK,eAAe,QAAQH,CAAG,EAAG,CAAC,EAC1DA,EAAI,YACNG,EAAA,KAAK,eAAe,KAAKD,GAAK,CAACA,EAAE,QAAQ,IAAzC,MAAAC,EAA4C,SAEhD,CAMA,iBAAiBC,EAAmB,CAClCA,EAAM,OAASA,EAAM,MAAQ,KAAK,gBAClCA,EAAM,SAAW,EACjB,KAAK,iBAAiB,KAAKA,CAAK,CAClC,CAMA,mBAAmBA,EAAmB,CACpC,KAAK,eAAe,OAAO,KAAK,iBAAiB,QAAQA,CAAK,EAAG,CAAC,CACpE,CAIA,IAAI,iBAAkB,CACpB,OAAO,KAAK,gBACd,CAEA,IAAI,gBAAgBC,EAAc,CAChC,KAAK,iBAAmBA,EACxB,KAAK,eAAe,QAAQ,GAAK,CAC/B,EAAE,SAAWA,IAAS,EAAE,IAC1B,CAAC,EACD,KAAK,iBAAiB,QAAQC,GAAK,CACjCA,EAAE,OAASA,EAAE,MAAQ,KAAK,gBAC5B,CAAC,CACH,CAEQ,mBAAmB,EAAgB,CACzC,KAAK,gBAAkB,EAAE,OACzB,KAAK,UAAY,KAAK,eAAe,UAAU,GAAK,EAAE,OAAS,EAAE,MAAM,CACzE,CAEQ,sBAAsB,EAAkB,CAC9C,GAAI,EAAE,MAAQ,cAAgB,EAAE,MAAQ,YAAa,CACnD,GAAI,EAAE,MAAQ,aACZ,GACE,KAAK,YACD,KAAK,WAAa,KAAK,eAAe,SACxC,KAAK,UAAY,SAEZ,KAAK,eAAe,KAAK,SAAS,EAAE,kBACpC,EAAE,MAAQ,YACnB,GACE,KAAK,YACD,KAAK,UAAY,IACnB,KAAK,UAAY,KAAK,eAAe,OAAS,SAEzC,KAAK,eAAe,KAAK,SAAS,EAAE,UAG/C,KAAK,eAAe,KAAK,SAAS,EAAE,MAAM,EAE9C,CAEA,QAAyB,CACvB,OAAOC,8CAAiD,KAAK;AAAA,qCAC5B,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,WASxC,CACF,EApHqBV,EAArBW,EAAA,CADCC,EAAc,cAAc,GACRZ",
+  "names": ["styles", "i", "bl_tab_group_default", "BlTabGroup", "s", "bl_tab_group_default", "tab", "isFirstAndNotDisabled", "t", "_a", "panel", "name", "p", "y", "__decorateClass", "e"]
+}

package/dist/chunk-VXGOQPWU.js

@@ -0,0 +1,17 @@
+import{a as f}from"./chunk-DJOD4BTL.js";import{a as m}from"./chunk-OLPYXE2P.js";import{a}from"./chunk-23UFIOHV.js";import{a as s,b as n,f as d,g as c,h as i,i as u,j as v}from"./chunk-57PTZNIL.js";import{a as t}from"./chunk-NZ3RGSR6.js";var y=s`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`,g=y;var p="bl-radio-group",b="bl-radio-change",r=class extends f(d){constructor(){super(...arguments);this.value="";this.required=!1;this.focusedOptionIndex=0}static get styles(){return[g]}get options(){return[].slice.call(this.querySelectorAll(h))}get availableOptions(){return this.options.filter(e=>!e.disabled)}updated(e){e.has("value")&&(this.setValue(this.value),this.onChange(this.value))}handleOptionChecked(e){let o=e.target;this.setValue(o.value),this.onChange(o.value)}handleKeyDown(e){if(["ArrowDown","ArrowRight"].includes(e.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(e.key))this.focusedOptionIndex--;else if([" "].includes(e.key)){this.availableOptions[this.focusedOptionIndex].select();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.availableOptions.length-1)),this.availableOptions[this.focusedOptionIndex].focus(),e.preventDefault()}connectedCallback(){super.connectedCallback(),this.tabIndex=0,this.addEventListener("focus",this.handleFocus),this.addEventListener("keydown",this.handleKeyDown)}handleFocus(){this.availableOptions[this.focusedOptionIndex].focus()}render(){return n`<fieldset role="radiogroup" aria-labelledby="label" aria-required=${this.required}>
+      <legend>${this.label}</legend>
+      <div class="options" @bl-checked=${this.handleOptionChecked}>
+        <slot></slot>
+      </div>
+    </fieldset>`}};t([i({type:String})],r.prototype,"label",2),t([i()],r.prototype,"value",2),t([i({type:Boolean,reflect:!0})],r.prototype,"required",2),t([a("bl-radio-change")],r.prototype,"onChange",2),r=t([c(p)],r);var C=s`:host{display:inline-block;cursor:pointer;outline:0}.wrapper{--size:var(--bl-size-m);outline:0}#label{display:flex;font:var(--bl-font-title-3-regular);height:var(--size);line-height:normal;vertical-align:middle;margin-block:0;color:var(--bl-color-neutral-darker)}#label::before{content:'';display:inline-block;box-sizing:border-box;width:var(--size);height:var(--size);background-color:white;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter);margin-right:var(--bl-size-2xs);vertical-align:middle}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}:host(:hover) #label,.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,.selected #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`,x=C;var h="bl-radio",W="bl-checked",l=class extends d{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.handleFieldValueChange=e=>{let o=e.detail;this.selected=o===this.value}}static get styles(){return[x]}select(){this.selected=!0,this.onChecked(this.value)}get checked(){return this.selected}focus(){this.radioElement.tabIndex=0,this.radioElement.focus(),this.onFocus(this.value)}blur(){this.radioElement.tabIndex=-1,this.onBlur(this.value)}connectedCallback(){var e;super.connectedCallback(),this.field=this.closest(p),this.field||console.warn("bl-radio is designed to be used inside a bl-radio-group",this),(e=this.field)==null||e.addEventListener(b,this.handleFieldValueChange)}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.field)==null||e.removeEventListener(b,this.handleFieldValueChange)}render(){let e=m({wrapper:!0,selected:this.selected});return n`<div
+      class=${e}
+      role="radio"
+      aria-labelledby="label"
+      aria-disabled=${this.disabled}
+      aria-readonly=${this.disabled}
+      @blur=${this.blur}
+      @click=${this.select}
+    >
+      <p id="label"><slot></slot></p>
+    </div>`}};t([i()],l.prototype,"name",2),t([i()],l.prototype,"value",2),t([i({type:Boolean,reflect:!0})],l.prototype,"disabled",2),t([u()],l.prototype,"selected",2),t([a("bl-checked")],l.prototype,"onChecked",2),t([a("bl-focus")],l.prototype,"onFocus",2),t([a("bl-blur")],l.prototype,"onBlur",2),t([v("[role=radio]")],l.prototype,"radioElement",2),l=t([c(h)],l);export{h as a,W as b,l as c,p as d,b as e,r as f};
+//# sourceMappingURL=chunk-VXGOQPWU.js.map

package/dist/chunk-VXGOQPWU.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/radio-group/bl-radio-group.css", "../src/components/radio-group/bl-radio-group.ts", "../src/components/radio-group/radio/bl-radio.css", "../src/components/radio-group/radio/bl-radio.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:flex;flex-direction:row}fieldset{border:0;padding:0}legend{font:var(--bl-font-title-3-medium);color:var(--bl-color-neutral-darker)}.options{display:flex;flex-flow:var(--bl-radio-direction,column) wrap;gap:var(--bl-size-m);margin-block:var(--bl-size-xs)}`;\nexport default styles;\n", "import { FormControlMixin } from '@open-wc/form-control';\nimport { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport 'element-internals-polyfill';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-radio-group.css';\nimport BlRadio, { blRadioTag } from './radio/bl-radio';\n\nexport const blRadioGroupTag = 'bl-radio-group';\n\nexport const blChangeEventName = 'bl-radio-change';\n\n/**\n * @tag bl-radio-group\n * @summary Baklava Button component\n *\n * @cssproperty [--bl-radio-direction=row] Can be used for showing radio options as columns instead of rows. Options are `row` or `column`\n */\n@customElement(blRadioGroupTag)\nexport default class BlRadioGroup extends FormControlMixin(LitElement) {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the radio group label\n   */\n  @property({ type: String })\n  label: string;\n\n  /**\n   * Set and gets the actual value of the field\n   */\n  @property()\n  value = '';\n\n  /**\n   * Sets option as required\n   */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  get options(): BlRadio[] {\n    return [].slice.call(this.querySelectorAll(blRadioTag));\n  }\n\n  get availableOptions(): BlRadio[] {\n    return this.options.filter(option => !option.disabled);\n  }\n\n  updated(changedProperties: Map<string, unknown>): void {\n    if (changedProperties.has('value')) {\n      this.setValue(this.value);\n      this.onChange(this.value);\n    }\n  }\n\n  /**\n   * Fires when radio group value changed\n   */\n  @event('bl-radio-change') private onChange: EventDispatcher<string>;\n\n  private focusedOptionIndex = 0;\n\n  private handleOptionChecked(event: CustomEvent) {\n    const checkedOption = event.target as BlRadio;\n    this.setValue(checkedOption.value);\n    this.onChange(checkedOption.value);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Next option\n    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n      this.focusedOptionIndex++;\n\n      // Previous option\n    } else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n      this.focusedOptionIndex--;\n\n      // Select option\n    } else if ([' '].includes(event.key)) {\n      this.availableOptions[this.focusedOptionIndex].select();\n      return;\n    } else {\n      // Other keys are not our interest here\n      return;\n    }\n\n    // Don't exceed array indexes\n    this.focusedOptionIndex = Math.max(\n      0,\n      Math.min(this.focusedOptionIndex, this.availableOptions.length - 1)\n    );\n\n    this.availableOptions[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\n  }\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.tabIndex = 0;\n    this.addEventListener('focus', this.handleFocus);\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  private handleFocus() {\n    this.availableOptions[this.focusedOptionIndex].focus();\n  }\n\n  render(): TemplateResult {\n    return html`<fieldset role=\"radiogroup\" aria-labelledby=\"label\" aria-required=${this.required}>\n      <legend>${this.label}</legend>\n      <div class=\"options\" @bl-checked=${this.handleOptionChecked}>\n        <slot></slot>\n      </div>\n    </fieldset>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blRadioGroupTag]: BlRadioGroup;\n  }\n  interface HTMLElementEventMap {\n    [blChangeEventName]: CustomEvent<string>;\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{display:inline-block;cursor:pointer;outline:0}.wrapper{--size:var(--bl-size-m);outline:0}#label{display:flex;font:var(--bl-font-title-3-regular);height:var(--size);line-height:normal;vertical-align:middle;margin-block:0;color:var(--bl-color-neutral-darker)}#label::before{content:'';display:inline-block;box-sizing:border-box;width:var(--size);height:var(--size);background-color:white;border-radius:var(--bl-border-radius-circle);border:solid 1px var(--bl-color-neutral-lighter);margin-right:var(--bl-size-2xs);vertical-align:middle}.selected #label::before{border-width:var(--bl-size-3xs);border-color:var(--bl-color-primary)}:host(:hover) #label,.selected #label,:host(.__ONLY_FOR_STORYBOOK_DEMONSTRATION_HOVER__) #label,.selected #label{color:var(--bl-color-primary)}:host([disabled]){cursor:not-allowed;pointer-events:none}:host([disabled]) .wrapper{--size:calc(var(--bl-size-m) - 2px)}:host([disabled]) #label{color:var(--bl-color-neutral-light)}:host([disabled]) #label::before{background-color:var(--bl-color-neutral-lightest);border-width:0;box-shadow:0 0 0 1px var(--bl-color-neutral-lighter)}:host([disabled]) .selected #label::before{background-color:var(--bl-color-neutral-light);border-color:var(--bl-color-neutral-lightest);border-width:calc(var(--bl-size-3xs) - 1px)}.wrapper:focus-visible #label::before{box-shadow:0 0 0 1px white,0 0 0 3px var(--bl-color-primary)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\nimport type BlRadioGroup from '../bl-radio-group';\nimport { blChangeEventName, blRadioGroupTag } from '../bl-radio-group';\nimport style from './bl-radio.css';\n\nexport const blRadioTag = 'bl-radio';\n\nexport const blCheckedEventName = 'bl-checked';\n\n/**\n * @tag bl-radio\n * @summary Baklava Radio Option component\n */\n@customElement(blRadioTag)\nexport default class BlRadio extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @property()\n  name: string;\n\n  @property()\n  value: string;\n\n  /**\n   * Sets option as disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @state() private selected = false;\n\n  /**\n   * Fires when radio is checked\n   */\n  @event('bl-checked') private onChecked: EventDispatcher<string>;\n\n  /**\n   * Fires when radio is blurred\n   */\n  @event('bl-focus') private onFocus: EventDispatcher<string>;\n\n  /**\n   * Fires when radio is blurred\n   */\n  @event('bl-blur') private onBlur: EventDispatcher<string>;\n\n  /**\n   * Sets this option selected\n   */\n  select() {\n    this.selected = true;\n    this.onChecked(this.value);\n  }\n\n  /**\n   * Readonly property to determine if option is currently checked\n   */\n  get checked() {\n    return this.selected;\n  }\n\n  @query('[role=radio]') private radioElement: HTMLElement;\n\n  /**\n   * Focuses this option\n   */\n  focus() {\n    this.radioElement.tabIndex = 0;\n    this.radioElement.focus();\n    this.onFocus(this.value);\n  }\n\n  /**\n   * Blurs from this option\n   */\n  blur() {\n    this.radioElement.tabIndex = -1;\n    this.onBlur(this.value);\n  }\n\n  private handleFieldValueChange = (event: CustomEvent<string>) => {\n    const newValue = event.detail;\n    this.selected = newValue === this.value;\n  };\n\n  private field: BlRadioGroup | null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.field = this.closest<BlRadioGroup>(blRadioGroupTag);\n\n    if (!this.field) {\n      console.warn('bl-radio is designed to be used inside a bl-radio-group', this);\n    }\n\n    this.field?.addEventListener(blChangeEventName, this.handleFieldValueChange);\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.field?.removeEventListener(blChangeEventName, this.handleFieldValueChange);\n  }\n\n  render(): TemplateResult {\n    const classes = classMap({\n      wrapper: true,\n      selected: this.selected,\n    });\n\n    return html`<div\n      class=${classes}\n      role=\"radio\"\n      aria-labelledby=\"label\"\n      aria-disabled=${this.disabled}\n      aria-readonly=${this.disabled}\n      @blur=${this.blur}\n      @click=${this.select}\n    >\n      <p id=\"label\"><slot></slot></p>\n    </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blRadioTag]: BlRadio;\n  }\n  interface HTMLElementEventMap {\n    [blCheckedEventName]: CustomEvent<string>;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_radio_group_default", "blRadioGroupTag", "blChangeEventName", "BlRadioGroup", "FormControlMixin", "s", "bl_radio_group_default", "blRadioTag", "option", "changedProperties", "event", "checkedOption", "y", "__decorateClass", "e", "styles", "i", "bl_radio_default", "blRadioTag", "blCheckedEventName", "BlRadio", "s", "event", "newValue", "bl_radio_default", "_a", "blRadioGroupTag", "blChangeEventName", "classes", "o", "y", "__decorateClass", "e", "t", "i"]
+}

package/dist/{chunk-EMMMXLJJ.js → chunk-Y4UXIJSO.js}

@@ -1,4 +1,4 @@
-import{a as h}from"./chunk-KPAWUBRO.js";import{a as o}from"./chunk-23UFIOHV.js";import{a as p,b as s,f as u,g as c,h as i,i as g}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var b=p`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\B7 \\B7 \\B7';color:var(--bl-color-content-primary)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-content-primary)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`,m=b;var t=class extends u{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=10;this.hasJumper=!1;this.jumperLabel="Go To";this.hasSelect=!1;this.selectLabel="Show";this.itemsPerPageOptions=[{text:"10 Items",value:10},{text:"25 Items",value:25},{text:"50 Items",value:50},{text:"100 Items",value:100}];this.pages=[]}static get styles(){return[m]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{window==null||window.addEventListener("resize",()=>this._paginate())})}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",this._paginate)}updated(e){(e.has("currentPage")||e.has("itemsPerPage")||e.has("totalItems"))&&this._paginate()}_paginate(){this.pages=[];let e=Math.ceil(Math.abs(this.totalItems/this.itemsPerPage))||1;if(e<=8){this.pages=Array.from(Array(e),(a,l)=>l+1);return}this.pages.push(1),this.currentPage<5?this.pages.push(2,3,4,5,"..."):this.currentPage>=5&&this.currentPage<=e-4?this.pages.push("...",this.currentPage-1,this.currentPage,this.currentPage+1,"..."):this.pages.push("...",e-4,e-3,e-2,e-1),this.pages.push(e)}_changePage(e){let a=this.currentPage;this.currentPage=e,this.onChange({selectedPage:e,prevPage:a,itemsPerPage:this.itemsPerPage})}_pageBack(){this.currentPage!==1&&this._changePage(this.currentPage-1)}_pageForward(){this.currentPage!==this._getLastPage()&&this._changePage(this.currentPage+1)}_getLastPage(){return+this.pages[this.pages.length-1]}_inputHandler(e){e.stopPropagation();let a=+e.target.value,l=a>0?Math.min(this._getLastPage(),a):1;this._changePage(l)}_selectHandler(e){var a;this.itemsPerPage=+((a=e==null?void 0:e.detail[0])==null?void 0:a.value)||100,this._changePage(1)}_renderSinglePage(e){if(typeof e=="string")return s`<li class="dots"></li>`;let a=this.currentPage===e?"page":void 0;return s` <li>
+import{a as h}from"./chunk-KPAWUBRO.js";import{a as o}from"./chunk-23UFIOHV.js";import{a as p,b as s,f as u,g as c,h as i,i as g}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var b=p`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\B7 \\B7 \\B7';color:var(--bl-color-neutral-darker)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-neutral-darker)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`,m=b;var t=class extends u{constructor(){super(...arguments);this.currentPage=1;this.totalItems=0;this.itemsPerPage=10;this.hasJumper=!1;this.jumperLabel="Go To";this.hasSelect=!1;this.selectLabel="Show";this.itemsPerPageOptions=[{text:"10 Items",value:10},{text:"25 Items",value:25},{text:"50 Items",value:50},{text:"100 Items",value:100}];this.pages=[]}static get styles(){return[m]}connectedCallback(){super.connectedCallback(),setTimeout(()=>{window==null||window.addEventListener("resize",()=>this._paginate())})}disconnectedCallback(){super.disconnectedCallback(),window==null||window.removeEventListener("resize",this._paginate)}updated(e){(e.has("currentPage")||e.has("itemsPerPage")||e.has("totalItems"))&&this._paginate()}_paginate(){this.pages=[];let e=Math.ceil(Math.abs(this.totalItems/this.itemsPerPage))||1;if(e<=8){this.pages=Array.from(Array(e),(a,l)=>l+1);return}this.pages.push(1),this.currentPage<5?this.pages.push(2,3,4,5,"..."):this.currentPage>=5&&this.currentPage<=e-4?this.pages.push("...",this.currentPage-1,this.currentPage,this.currentPage+1,"..."):this.pages.push("...",e-4,e-3,e-2,e-1),this.pages.push(e)}_changePage(e){let a=this.currentPage;this.currentPage=e,this.onChange({selectedPage:e,prevPage:a,itemsPerPage:this.itemsPerPage})}_pageBack(){this.currentPage!==1&&this._changePage(this.currentPage-1)}_pageForward(){this.currentPage!==this._getLastPage()&&this._changePage(this.currentPage+1)}_getLastPage(){return+this.pages[this.pages.length-1]}_inputHandler(e){e.stopPropagation();let a=+e.target.value,l=a>0?Math.min(this._getLastPage(),a):1;this._changePage(l)}_selectHandler(e){var a;this.itemsPerPage=+((a=e==null?void 0:e.detail[0])==null?void 0:a.value)||100,this._changePage(1)}_renderSinglePage(e){if(typeof e=="string")return s`<li class="dots"></li>`;let a=this.currentPage===e?"page":void 0;return s` <li>
       <bl-button
         @click="${()=>this._changePage(e)}"
         variant=${this.currentPage===e?"primary":"tertiary"}
@@ -47,4 +47,4 @@ import{a as h}from"./chunk-KPAWUBRO.js";import{a as o}from"./chunk-23UFIOHV.js";
         </div>`:null;return s` <nav class="pagination" aria-label="Pagination">
       ${(()=>{if(!(!this.hasSelect&&!this.hasJumper))return s` <div class="pagination-helpers">${e} ${a}</div> `})()} ${this.renderPages()}
     </nav>`}};r([i({attribute:"current-page",type:Number,reflect:!0})],t.prototype,"currentPage",2),r([i({attribute:"total-items",type:Number})],t.prototype,"totalItems",2),r([i({attribute:"items-per-page",type:Number,reflect:!0})],t.prototype,"itemsPerPage",2),r([i({attribute:"has-jumper",type:Boolean})],t.prototype,"hasJumper",2),r([i({attribute:"jumper-label",type:String})],t.prototype,"jumperLabel",2),r([i({attribute:"has-select",type:Boolean})],t.prototype,"hasSelect",2),r([i({attribute:"select-label",type:String})],t.prototype,"selectLabel",2),r([i({type:Array,attribute:!1})],t.prototype,"itemsPerPageOptions",2),r([g()],t.prototype,"pages",2),r([o("bl-change")],t.prototype,"onChange",2),t=r([c("bl-pagination")],t);export{t as a};
-//# sourceMappingURL=chunk-EMMMXLJJ.js.map
+//# sourceMappingURL=chunk-Y4UXIJSO.js.map

package/dist/chunk-Y4UXIJSO.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/pagination/bl-pagination.css", "../src/components/pagination/bl-pagination.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.pagination{display:flex;flex-wrap:wrap;justify-content:center;max-width:max-content;gap:var(--bl-size-s)}.pagination *{margin:0;padding:0;box-sizing:border-box}.page-container{display:flex;align-items:center}.page-list{display:flex;align-items:center;list-style:none;user-select:none;gap:var(--bl-size-3xs)}.dots{margin:0 var(--bl-size-2xs)}.dots::before{content:' \\\\B7 \\\\B7 \\\\B7';color:var(--bl-color-neutral-darker)}.pagination-helpers{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:var(--bl-size-m);color:var(--bl-color-neutral-darker)}.jumper,.select{display:flex;align-items:center;gap:var(--bl-size-2xs)}label{font:var(--bl-font-title-3-medium);font-size:var(--bl-font-size-m);font-weight:var(--bl-font-weight-medium);line-height:var(--bl-font-size-m);letter-spacing:0;user-select:none}bl-input{width:62px}bl-select{width:128px}@media only screen and (max-width:768px){label{display:none}}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult, PropertyValues } from 'lit';\nimport { customElement, property, state } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport '../button/bl-button';\nimport '../input/bl-input';\nimport '../select/bl-select';\n\nimport style from './bl-pagination.css';\n\n/**\n * @tag bl-pagination\n * @summary Baklava Pagination component\n */\n\n@customElement('bl-pagination')\nexport default class BlPagination extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the current page\n   */\n  @property({ attribute: 'current-page', type: Number, reflect: true })\n  currentPage = 1;\n\n  /**\n   * Sets the total items to be paginated\n   */\n  @property({ attribute: 'total-items', type: Number })\n  totalItems = 0;\n\n  /**\n   * Sets the number of items per page\n   */\n  @property({ attribute: 'items-per-page', type: Number, reflect: true })\n  itemsPerPage = 10;\n\n  /**\n   * Adds jumper element if provided as true\n   */\n  @property({ attribute: 'has-jumper', type: Boolean })\n  hasJumper = false;\n\n  /**\n   * Sets the jumper label\n   */\n  @property({ attribute: 'jumper-label', type: String })\n  jumperLabel = 'Go To';\n\n  /**\n   *  Adds select element to choose the items per page\n   */\n  @property({ attribute: 'has-select', type: Boolean })\n  hasSelect = false;\n\n  /**\n   *  Adds select element to choose the items per page\n   */\n  @property({ attribute: 'select-label', type: String })\n  selectLabel = 'Show';\n\n  /**\n   * Sets the items per page options of the select element\n   *  PROPERTY\n   */\n  @property({ type: Array, attribute: false })\n  itemsPerPageOptions = [\n    {\n      text: '10 Items',\n      value: 10,\n    },\n    {\n      text: '25 Items',\n      value: 25,\n    },\n    {\n      text: '50 Items',\n      value: 50,\n    },\n    {\n      text: '100 Items',\n      value: 100,\n    },\n  ];\n\n  @state() private pages: Array<number | string> = [];\n\n  /**\n   * Fires when the current page changes\n   */\n  @event('bl-change') private onChange: EventDispatcher<{\n    selectedPage: number;\n    prevPage: number;\n    itemsPerPage: number;\n  }>;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    setTimeout(() => {\n      window?.addEventListener('resize', () => this._paginate());\n    });\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    window?.removeEventListener('resize', this._paginate);\n  }\n\n  updated(changedProperties: PropertyValues<this>) {\n    if (\n      changedProperties.has('currentPage') ||\n      changedProperties.has('itemsPerPage') ||\n      changedProperties.has('totalItems')\n    ) {\n      this._paginate();\n    }\n  }\n\n  private _paginate() {\n    this.pages = [];\n    const pageListLength = Math.ceil(Math.abs(this.totalItems / this.itemsPerPage)) || 1;\n\n    if (pageListLength <= 8) {\n      this.pages = Array.from(Array(pageListLength), (_, index) => index + 1);\n      return;\n    }\n\n    this.pages.push(1);\n\n    if (this.currentPage < 5) {\n      this.pages.push(2, 3, 4, 5, '...');\n    } else if (this.currentPage >= 5 && this.currentPage <= pageListLength - 4) {\n      this.pages.push('...', this.currentPage - 1, this.currentPage, this.currentPage + 1, '...');\n    } else {\n      this.pages.push(\n        '...',\n        pageListLength - 4,\n        pageListLength - 3,\n        pageListLength - 2,\n        pageListLength - 1\n      );\n    }\n\n    this.pages.push(pageListLength);\n  }\n\n  private _changePage(selectedPage: number): void {\n    const prevPage = this.currentPage;\n\n    this.currentPage = selectedPage;\n\n    this.onChange({\n      selectedPage,\n      prevPage,\n      itemsPerPage: this.itemsPerPage,\n    });\n  }\n\n  private _pageBack(): void {\n    if (this.currentPage === 1) return;\n    this._changePage(this.currentPage - 1);\n  }\n\n  private _pageForward(): void {\n    if (this.currentPage === this._getLastPage()) return;\n    this._changePage(this.currentPage + 1);\n  }\n\n  private _getLastPage(): number {\n    return +this.pages[this.pages.length - 1];\n  }\n\n  private _inputHandler(event: CustomEvent) {\n    event.stopPropagation();\n    const inputValue = +(event.target as HTMLInputElement).value;\n    const newPage = inputValue > 0 ? Math.min(this._getLastPage(), inputValue) : 1;\n    this._changePage(newPage);\n  }\n\n  private _selectHandler(event: CustomEvent) {\n    this.itemsPerPage = +event?.detail[0]?.value || 100;\n    this._changePage(1);\n  }\n\n  private _renderSinglePage(page: number | string) {\n    if (typeof page === 'string') {\n      return html`<li class=\"dots\"></li>`;\n    }\n    const ariaCurrent = this.currentPage === page ? 'page' : undefined;\n    return html` <li>\n      <bl-button\n        @click=\"${() => this._changePage(page)}\"\n        variant=${this.currentPage === page ? 'primary' : 'tertiary'}\n        kind=\"neutral\"\n        label=\"Page ${page}\"\n        aria-current=${ifDefined(ariaCurrent)}\n      >\n        ${page}\n      </bl-button>\n    </li>`;\n  }\n\n  private renderPages() {\n    return html`\n      <div class=\"page-container\">\n        <bl-button\n          @click=\"${this._pageBack}\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          icon=\"arrow_left\"\n          class=\"previous\"\n          label=\"Previous\"\n          ?disabled=${this.currentPage === 1}\n        ></bl-button>\n        <ul class=\"page-list\">\n          ${window.innerWidth < 768\n            ? html`${this._renderSinglePage(this.currentPage)}`\n            : this.pages.map(page => html`${this._renderSinglePage(page)}`)}\n        </ul>\n        <bl-button\n          @click=\"${this._pageForward}\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          icon=\"arrow_right\"\n          class=\"next\"\n          label=\"Next\"\n          ?disabled=${this.currentPage === this._getLastPage()}\n        ></bl-button>\n      </div>\n    `;\n  }\n\n  render(): TemplateResult {\n    const selectEl = this.hasSelect\n      ? html`\n          <div class=\"select\">\n            <label>${this.selectLabel}</label>\n            <bl-select @bl-select=\"${this._selectHandler}\" .value=${this.itemsPerPage}>\n              ${this.itemsPerPageOptions.map(option => {\n                return html`<bl-select-option .value=${option.value}\n                  >${option.text}</bl-select-option\n                >`;\n              })}\n            </bl-select>\n          </div>\n        `\n      : null;\n\n    const jumperEl = this.hasJumper\n      ? html` <div class=\"jumper\">\n          <label>${this.jumperLabel}</label>\n          <bl-input .value=\"${this.currentPage}\" @bl-change=\"${this._inputHandler}\"></bl-input>\n        </div>`\n      : null;\n\n    const getHelperElements = () => {\n      if (!this.hasSelect && !this.hasJumper) return;\n      return html` <div class=\"pagination-helpers\">${selectEl} ${jumperEl}</div> `;\n    };\n\n    return html` <nav class=\"pagination\" aria-label=\"Pagination\">\n      ${getHelperElements()} ${this.renderPages()}\n    </nav>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-pagination': BlPagination;\n  }\n}\n"],
+  "mappings": "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",
+  "names": ["styles", "i", "bl_pagination_default", "BlPagination", "s", "bl_pagination_default", "changedProperties", "pageListLength", "_", "index", "selectedPage", "prevPage", "event", "inputValue", "newPage", "_a", "page", "y", "ariaCurrent", "l", "selectEl", "option", "jumperEl", "__decorateClass", "e", "t"]
+}