@trendyol/baklava 2.0.0-beta.88 → 2.0.0-beta.89

package/dist/baklava.js

@@ -1,2 +1,2 @@
-import{b as S}from"./chunk-4IAGV6FP.js";import{a as b}from"./chunk-RHHUBYKO.js";import{a as I}from"./chunk-WWAUSDYZ.js";import{a as P}from"./chunk-JMV2HWKD.js";import{a as g}from"./chunk-FHOMHSA6.js";import{a as h}from"./chunk-R6XFK3HN.js";import{b as T,d as G}from"./chunk-W3NQ6T5J.js";import{b as D}from"./chunk-KQBXYF3J.js";import{a as B}from"./chunk-J774WKKH.js";import{a as m}from"./chunk-2Y65CGCP.js";import{a as s}from"./chunk-THIPCHAK.js";import{a as x}from"./chunk-2I5EAQVM.js";import"./chunk-L3EQLCFT.js";import"./chunk-3B64VOWB.js";import{a as w}from"./chunk-C5UMBCON.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-6J4GSOJU.js";import{c,f as i}from"./chunk-BD5KXTYS.js";import{a as r}from"./chunk-C3X43Y7C.js";import{a}from"./chunk-TJ47AW2B.js";import{b as f,e as p}from"./chunk-DSM6T5MC.js";import"./chunk-EPJ347EQ.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-AHEWP6LO.js";import{a as u}from"./chunk-N35VLT2U.js";import{b as l}from"./chunk-ZV3Y7O4M.js";import"./chunk-OLPYXE2P.js";import"./chunk-KPAWUBRO.js";import{a as o,b as e,c as t}from"./chunk-F3ZH5IV7.js";import"./chunk-RLMJN536.js";import"./chunk-23UFIOHV.js";import"./chunk-57PTZNIL.js";import"./chunk-NZ3RGSR6.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,w as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,h as BlTooltip,e as getIconPath,o as setIconPath};
+import{b as S}from"./chunk-QV3A6DWH.js";import{a as b}from"./chunk-J73JZGIX.js";import{a as I}from"./chunk-MGQL62CQ.js";import{a as P}from"./chunk-JMV2HWKD.js";import{a as g}from"./chunk-CMIFBOTH.js";import{a as h}from"./chunk-72WMF254.js";import{b as T,d as G}from"./chunk-B3HLJT4E.js";import{b as D}from"./chunk-VYKKWEKI.js";import{a as B}from"./chunk-EMMMXLJJ.js";import{a as m}from"./chunk-2EMIR5ZN.js";import{a as s}from"./chunk-4UWTC6BR.js";import{a as x}from"./chunk-NPBDEGIU.js";import"./chunk-XQN3H7RG.js";import"./chunk-3B64VOWB.js";import{a as w}from"./chunk-NYLRILUV.js";import"./chunk-ANYJUR6Q.js";import{a as n}from"./chunk-6J4GSOJU.js";import{c,f as i}from"./chunk-HTIGXY2B.js";import{a as r}from"./chunk-6IV5ELOB.js";import{a}from"./chunk-TJ47AW2B.js";import{b as f,e as p}from"./chunk-DSM6T5MC.js";import"./chunk-EPJ347EQ.js";import"./chunk-DJOD4BTL.js";import{a as d}from"./chunk-XKX2GLBY.js";import{a as u}from"./chunk-W6FBJD54.js";import{b as l}from"./chunk-ZEBKUNFE.js";import"./chunk-OLPYXE2P.js";import"./chunk-KPAWUBRO.js";import{a as o,b as e,c as t}from"./chunk-F3ZH5IV7.js";import"./chunk-RLMJN536.js";import"./chunk-23UFIOHV.js";import"./chunk-57PTZNIL.js";import"./chunk-NZ3RGSR6.js";export{r as BlAlert,a as BlBadge,l as BlButton,f as BlCheckbox,p as BlCheckboxGroup,d as BlDialog,u as BlDrawer,G as BlDropdown,D as BlDropdownGroup,T as BlDropdownItem,t as BlIcon,x as BlInput,B as BlPagination,w as BlPopover,n as BlProgressIndicator,c as BlRadio,i as BlRadioGroup,m as BlSelect,s as BlSelectOption,S as BlSwitch,I as BlTab,b as BlTabGroup,P as BlTabPanel,g as BlTextarea,h as BlTooltip,e as getIconPath,o as setIconPath};
 //# sourceMappingURL=baklava.js.map

package/dist/{chunk-2Y65CGCP.js → chunk-2EMIR5ZN.js}

@@ -1,12 +1,13 @@
 import{a as m}from"./chunk-3B64VOWB.js";import{b as y,d as g,f as x,g as _,h as O}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 h}from"./chunk-23UFIOHV.js";import{a as d,b as n,f as c,g as u,h as l,i as r,j as a,k as v}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var T=d`:host{width:200px;display:inline-block}.select-wrapper{width:100%;position:relative;display:flex;flex-direction:column;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:var(--bl-color-primary-background);--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--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-tertiary);--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-content-passive)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);-webkit-user-select:none;user-select:none}.placeholder{color:var(--placeholder-color);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-border)}.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-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.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{flex:1;padding:0;margin:0;list-style:none;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-content-passive)}.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)}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));max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial;right:var(--padding-horizontal)}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.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-content-secondary)}.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(c){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 i=e.composedPath();(s=i==null?void 0:i.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 i=new FormData;e.forEach(s=>i.append(this.name,`${s}`)),this.setValue(i)}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=_(this._selectInput,this._popover,()=>{O(this._selectInput,this._popover,{placement:"bottom",strategy:"fixed",middleware:[y(),g(8),x({apply(e){Object.assign(e.elements.floating.style,{width:`${e.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:e,y:i})=>{this._popover.style.setProperty("--left",`${e}px`),this._popover.style.setProperty("--top",`${i}px`)})})}connectedCallback(){var e;super.connectedCallback(),(e=this.form)==null||e.addEventListener("submit",i=>{this.reportValidity()||i.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>`,i=n`<bl-button
-        class="remove-all"
-        size="small"
-        variant="tertiary"
-        kind="neutral"
-        icon="close"
-        @click=${this._onClickRemove}></bl-button>`;return n`<div
+      class="remove-all"
+      size="small"
+      variant="tertiary"
+      kind="neutral"
+      icon="close"
+      @click=${this._onClickRemove}
+    ></bl-button>`;return n`<div
       class=${p({"select-input":!0,"has-overflowed-options":this._additionalSelectedOptionCount>0})}
       tabindex="${this.disabled?"-1":0}"
       ?autofocus=${this.autofocus}
@@ -17,15 +18,9 @@ import{a as m}from"./chunk-3B64VOWB.js";import{b as y,d as g,f as x,g as _,h as
       <span class="additional-selection-count">+${this._additionalSelectedOptionCount}</span>
       <div class="actions">
         ${this.multiple?i:null}
-        <bl-icon
-          class="dropdown-icon open"
-          name="arrow_up"
-        ></bl-icon>
+        <bl-icon class="dropdown-icon open" name="arrow_up"></bl-icon>
 
-        <bl-icon
-          class="dropdown-icon closed"
-          name="arrow_down"
-        ></bl-icon>
+        <bl-icon class="dropdown-icon closed" name="arrow_down"></bl-icon>
       </div>
     </div>`}render(){let e=this.checkValidity()?"":n`<p id="errorMessage" aria-live="polite" class="invalid-text">
           ${this.validationMessage}
@@ -33,11 +28,14 @@ import{a as m}from"./chunk-3B64VOWB.js";import{b as y,d as g,f as x,g as _,h as
       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}>
+      ${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} ${i}</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 i=e.target;this.dirty=!0,this.multiple?this._handleMultipleSelect():this._handleSingleSelect(i)}_onClickRemove(e){e.stopPropagation(),this._connectedOptions.filter(i=>i.selected).forEach(i=>{i.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(i=>i.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.formControlValidators=[m],o([l()],t.prototype,"name",2),o([l()],t.prototype,"value",1),o([l({reflect:!0})],t.prototype,"label",2),o([l({})],t.prototype,"placeholder",2),o([l({type:String,reflect:!0})],t.prototype,"size",2),o([l({type:Boolean,reflect:!0})],t.prototype,"required",2),o([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([l({type:Boolean})],t.prototype,"multiple",2),o([l({type:Boolean,reflect:!0})],t.prototype,"autofocus",2),o([l({type:Boolean,attribute:"label-fixed",reflect:!0})],t.prototype,"labelFixed",2),o([l({type:String,attribute:"help-text"})],t.prototype,"helpText",2),o([l({type:String,attribute:"invalid-text"})],t.prototype,"customInvalidText",2),o([r()],t.prototype,"_isPopoverOpen",2),o([r()],t.prototype,"_additionalSelectedOptionCount",2),o([a(".selected-options")],t.prototype,"selectedOptionsContainer",2),o([v(".selected-options li")],t.prototype,"selectedOptionsItems",2),o([a(".popover")],t.prototype,"_popover",2),o([a(".select-input")],t.prototype,"_selectInput",2),o([h("bl-select")],t.prototype,"_onBlSelect",2),o([r()],t.prototype,"_selectedOptions",2),o([r()],t.prototype,"dirty",2),o([a(".select-input")],t.prototype,"validationTarget",2),t=o([u("bl-select")],t);export{t as a};
-//# sourceMappingURL=chunk-2Y65CGCP.js.map
+//# sourceMappingURL=chunk-2EMIR5ZN.js.map

package/dist/chunk-2EMIR5ZN.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:flex;flex-direction:column;gap:var(--bl-size-3xs);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--background-color:var(--bl-color-primary-background);--border-color:var(--bl-color-border);--border-focus-color:var(--bl-color-primary-hover);--icon-color:var(--bl-color-content-tertiary);--text-color:var(--bl-color-content-primary);--label-color:var(--bl-color-content-secondary);--placeholder-color:var(--bl-color-content-tertiary);--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-tertiary);--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-content-passive)}.dirty.invalid{--border-color:var(--bl-color-danger);--border-focus-color:var(--bl-color-danger-hover);--label-color:var(--bl-color-danger)}.select-input{display:flex;align-items:center;justify-content:space-between;cursor:pointer;box-sizing:border-box;height:var(--height);border:solid 1px var(--border-color);font:var(--bl-font-title-3-regular);padding:0 var(--padding-horizontal);border-radius:var(--bl-border-radius-s);color:var(--text-color);-webkit-user-select:none;user-select:none}.placeholder{color:var(--placeholder-color);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-border)}.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-secondary)}:host([disabled]) .dropdown-icon{--icon-color:var(--bl-color-content-passive)}.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{flex:1;padding:0;margin:0;list-style:none;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-content-passive)}.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)}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));max-width:max-content;transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);font-size:var(--font-size);color:var(--placeholder-color);padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.select-open,.selected) label{top:0;left:var(--bl-size-2xs);transform:translateY(-50%);font:var(--bl-font-caption);color:var(--label-color);padding:0 var(--bl-size-3xs);background-color:var(--bl-color-primary-background);pointer-events:initial;right:var(--padding-horizontal)}:host([label-fixed]) label{position:static;padding:0;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--label-color)}.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-content-secondary)}.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  MiddlewareArguments,\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 - Sets the positioning strategy of select popover. You can set it as `absolute` if you need to show popover relative to its trigger element. Default value is `fixed`\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\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: MiddlewareArguments) {\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`<div\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      <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    </div>`;\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 =\n      this.helpText && !invalidMessage ? 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": "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",
+  "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-THIPCHAK.js → chunk-4UWTC6BR.js}

@@ -1,4 +1,9 @@
-import{a as s}from"./chunk-23UFIOHV.js";import{a as n,b as l,f as a,g as c,h as i,i as p,j as u}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var d=n`: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-hover);--option-color:var(--bl-color-secondary);--option-disabled-color:var(--bl-color-content-passive);--option-separator:1px solid var(--bl-color-border);--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)}`,h=d;var t=class extends a{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.multiple=!1}static get styles(){return[h]}get value(){return this._value||this.textContent}set value(e){this._value=e}focus(){this.multiple||(this.focusTarget.tabIndex=0),this.focusTarget.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.focusTarget.tabIndex=-1}singleOptionTemplate(){return l`<div class="single-option focus-target" @blur=${this.blur} @keydown=${this.handleKeydown} @click="${this._onClickOption}">
+import{a as s}from"./chunk-23UFIOHV.js";import{a as n,b as l,f as a,g as c,h as i,i as p,j as u}from"./chunk-57PTZNIL.js";import{a as o}from"./chunk-NZ3RGSR6.js";var d=n`: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-hover);--option-color:var(--bl-color-secondary);--option-disabled-color:var(--bl-color-content-passive);--option-separator:1px solid var(--bl-color-border);--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)}`,h=d;var t=class extends a{constructor(){super(...arguments);this.disabled=!1;this.selected=!1;this.multiple=!1}static get styles(){return[h]}get value(){return this._value||this.textContent}set value(e){this._value=e}focus(){this.multiple||(this.focusTarget.tabIndex=0),this.focusTarget.focus(),this.onFocus(this.value)}blur(){this.onBlur(this.value),this.focusTarget.tabIndex=-1}singleOptionTemplate(){return l`<div
+      class="single-option focus-target"
+      @blur=${this.blur}
+      @keydown=${this.handleKeydown}
+      @click="${this._onClickOption}"
+    >
       <slot></slot>
     </div>`}checkboxOptionTemplate(){return l`<bl-checkbox
       class="checkbox-option focus-target"
@@ -10,4 +15,4 @@ import{a as s}from"./chunk-23UFIOHV.js";import{a as n,b as l,f as a,g as c,h as
     </bl-checkbox>`}render(){return l`<div class="option-container">
       ${this.multiple?this.checkboxOptionTemplate():this.singleOptionTemplate()}
     </div>`}handleKeydown(e){(e.code==="Enter"||e.code==="Space")&&(this._onClickOption(),e.preventDefault())}_handleEvent(){this._onSelect(this.value)}_onClickOption(){this.selected=!this.selected,this._handleEvent()}_onCheckboxChange(e){this.selected=e.detail,this._handleEvent()}connectedCallback(){super.connectedCallback(),this.updateComplete.then(()=>{var e,r;this.blSelect=this.closest("bl-select"),this.multiple=((e=this.blSelect)==null?void 0:e.multiple)||!1,(r=this.blSelect)==null||r.registerOption(this)})}disconnectedCallback(){var e;super.disconnectedCallback(),(e=this.blSelect)==null||e.unregisterOption(this)}};o([i({})],t.prototype,"value",1),o([i({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([i({type:Boolean,reflect:!0})],t.prototype,"selected",2),o([p()],t.prototype,"multiple",2),o([s("bl-select-option")],t.prototype,"_onSelect",2),o([s("bl-focus")],t.prototype,"onFocus",2),o([s("bl-blur")],t.prototype,"onBlur",2),o([u(".focus-target")],t.prototype,"focusTarget",2),t=o([c("bl-select-option")],t);export{t as a};
-//# sourceMappingURL=chunk-THIPCHAK.js.map
+//# sourceMappingURL=chunk-4UWTC6BR.js.map

package/dist/{chunk-THIPCHAK.js.map → chunk-4UWTC6BR.js.map}

@@ -1,7 +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-hover);--option-color:var(--bl-color-secondary);--option-disabled-color:var(--bl-color-content-passive);--option-separator:1px solid var(--bl-color-border);--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  /**\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 class=\"single-option focus-target\" @blur=${this.blur} @keydown=${this.handleKeydown} @click=\"${this._onClickOption}\">\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\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,27CACfC,EAAQF,ECMf,IAAqBG,EAArB,cAAkFC,CAAW,CAA7F,kCAyBE,cAAW,GAMX,cAAW,GAGX,cAAW,GAjCX,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CASA,IAAI,OAAmB,CACrB,OAAO,KAAK,QAAU,KAAK,WAC7B,CAEA,IAAI,MAAMC,EAAgB,CACxB,KAAK,OAASA,CAChB,CAsCA,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,kDAAqD,KAAK,iBAAiB,KAAK,yBAAyB,KAAK;AAAA;AAAA,WAGvH,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,CAGQ,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,CAlInC,IAAAC,EAAAC,EAmIM,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,CA3IzB,IAAAD,EA4II,MAAM,qBAAqB,GAC3BA,EAAA,KAAK,WAAL,MAAAA,EAAe,iBAAiB,KAClC,CACF,EA3HME,EAAA,CADHC,EAAS,CAAC,CAAC,GAXOT,EAYf,qBAaJQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAxBvBT,EAyBnB,wBAMAQ,EAAA,CADCC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA9BvBT,EA+BnB,wBAGAQ,EAAA,CADCE,EAAM,GAjCYV,EAkCnB,wBAKmCQ,EAAA,CAAlCH,EAAM,kBAAkB,GAvCNL,EAuCgB,yBAKRQ,EAAA,CAA1BH,EAAM,UAAU,GA5CEL,EA4CQ,uBAKDQ,EAAA,CAAzBH,EAAM,SAAS,GAjDGL,EAiDO,sBAEMQ,EAAA,CAA/BG,EAAM,eAAe,GAnDHX,EAmDa,2BAnDbA,EAArBQ,EAAA,CADCC,EAAc,kBAAkB,GACZT",
+  "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-hover);--option-color:var(--bl-color-secondary);--option-disabled-color:var(--bl-color-content-passive);--option-separator:1px solid var(--bl-color-border);--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,27CACfC,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-6IV5ELOB.js

@@ -0,0 +1,32 @@
+import{a as b}from"./chunk-KPAWUBRO.js";import{a as g}from"./chunk-23UFIOHV.js";import{a as p,b as n,f as d,g as u,h as e}from"./chunk-57PTZNIL.js";import{a as r}from"./chunk-NZ3RGSR6.js";var y=p`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:inset 0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding);padding-right:calc(var(--padding) / 2)}.description{font:var(--bl-font-body-text-2)}.wrapper{display:flex;flex-flow:column;flex-wrap:wrap;justify-content:space-between;flex:auto}.content{display:flex;margin-right:var(--bl-size-2xs);flex:20 1 70%;padding:calc(var(--padding) / 2) 0}.icon{padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--bl-color-content-primary);font:var(--bl-font-title-3-medium)}.actions{display:none;flex-wrap:wrap;gap:16px;padding:calc(var(--padding) / 2) 0}.close{--bl-color-secondary-background:transparent}.caption+.description{margin-top:var(--bl-size-2xs)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`,m=y;var v=()=>({fromAttribute:a=>!a||a==="true"?!0:a==="false"?!1:a});var t=class extends d{constructor(){super(...arguments);this.variant="info";this.closable=!1;this.closed=!1}static get styles(){return[m]}open(){this.closed=!1}close(){this.closed=!0}get _hasAlertCaptionSlot(){return this.querySelector(':scope > [slot="caption"]')!==null}_closeHandler(){this.closed=!0,this.onClose(!0)}_predefinedIcons(){switch(this.variant){case"success":return"check_fill";case"danger":return"close_fill";default:return this.variant}}_getIcon(){if(this.icon)return this.icon===!0?this._predefinedIcons():this.icon}_initAlertActionSlot(s){let i=s.target;i.assignedElements().forEach(o=>{var c;if(o.tagName!=="BL-BUTTON"){(c=o.parentNode)==null||c.removeChild(o);return}i.parentElement.style.display="flex";let f=o.slot==="action-secondary"?"secondary":"primary",h={info:"default",warning:"neutral",success:"success",danger:"danger"};o.setAttribute("variant",f),o.setAttribute("kind",h[this.variant]),o.setAttribute("size","medium"),o.removeAttribute("icon")})}render(){let s=this.caption||this._hasAlertCaptionSlot?n`<span class="caption">
+            <slot name="caption"> ${this.caption} </slot>
+          </span>`:null,i=this._getIcon()?n`<bl-icon class="icon" name=${b(this._getIcon())}></bl-icon>`:null,l=this.closable?n`<bl-button
+          class="close"
+          label="close"
+          variant="tertiary"
+          kind="neutral"
+          icon="close"
+          variant="secondary"
+          @click=${this._closeHandler}
+        ></bl-button>`:null,o=n`<span class="description">
+      <slot> ${this.description} </slot>
+    </span>`;return n`
+      <div class="alert">
+        ${i}
+        <div class="wrapper">
+          <div class="content">
+            <div class="text-content">${s} ${o}</div>
+          </div>
+          <div class="actions">
+            <slot class="action" name="action" @slotchange=${this._initAlertActionSlot}></slot>
+            <slot
+              class="action-secondary"
+              name="action-secondary"
+              @slotchange=${this._initAlertActionSlot}
+            ></slot>
+          </div>
+        </div>
+        ${l}
+      </div>
+    `}};r([e({reflect:!0})],t.prototype,"variant",2),r([e()],t.prototype,"description",2),r([e({converter:v()})],t.prototype,"icon",2),r([e({type:Boolean,reflect:!0})],t.prototype,"closable",2),r([e()],t.prototype,"caption",2),r([e({type:Boolean,reflect:!0})],t.prototype,"closed",2),r([g("bl-close")],t.prototype,"onClose",2),t=r([u("bl-alert")],t);export{t as a};
+//# sourceMappingURL=chunk-6IV5ELOB.js.map

package/dist/chunk-6IV5ELOB.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../src/components/alert/bl-alert.css", "../src/utilities/string-boolean.converter.ts", "../src/components/alert/bl-alert.ts"],
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{display:block}.alert{--padding:var(--bl-size-m);--main-color:var(--bl-color-primary);--main-bg-color:var(--bl-color-accent-primary-background);position:relative;display:flex;align-items:flex-start;justify-content:space-between;background-color:var(--main-bg-color);color:var(--bl-color-content-primary);box-shadow:inset 0 0 0 1px var(--main-color);border-radius:var(--bl-border-radius-s);padding:calc(var(--padding) / 2) var(--padding);padding-right:calc(var(--padding) / 2)}.description{font:var(--bl-font-body-text-2)}.wrapper{display:flex;flex-flow:column;flex-wrap:wrap;justify-content:space-between;flex:auto}.content{display:flex;margin-right:var(--bl-size-2xs);flex:20 1 70%;padding:calc(var(--padding) / 2) 0}.icon{padding:calc(var(--padding) / 2) 0;margin-right:var(--bl-size-2xs);color:var(--main-color)}.text-content{display:flex;flex-direction:column}.caption{color:var(--bl-color-content-primary);font:var(--bl-font-title-3-medium)}.actions{display:none;flex-wrap:wrap;gap:16px;padding:calc(var(--padding) / 2) 0}.close{--bl-color-secondary-background:transparent}.caption+.description{margin-top:var(--bl-size-2xs)}:host([closed]){display:none}:host([variant='success']) .alert{--main-color:var(--bl-color-success);--main-bg-color:var(--bl-color-success-background)}:host([variant='warning']) .alert{--main-color:var(--bl-color-warning);--main-bg-color:var(--bl-color-warning-background)}:host([variant='danger']) .alert{--main-color:var(--bl-color-danger);--main-bg-color:var(--bl-color-danger-background)}`;\nexport default styles;\n", "import type { ComplexAttributeConverter } from 'lit';\n\nexport const stringBooleanConverter = (): ComplexAttributeConverter<string | boolean> => {\n  return {\n    fromAttribute: (value: string): string | boolean => {\n      if (!value || value === 'true') return true;\n      if (value === 'false') return false;\n      return value;\n    },\n  };\n};\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport style from './bl-alert.css';\nimport '../icon/bl-icon';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { stringBooleanConverter } from '../../utilities/string-boolean.converter';\nimport { ButtonVariant, ButtonKind, ButtonSize } from '../button/bl-button';\n\nexport type AlertVariant = 'info' | 'warning' | 'success' | 'danger';\n\n/**\n * @tag bl-alert\n * @summary Baklava Alert component\n */\n\n@customElement('bl-alert')\nexport default class BlAlert extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets alert variant\n   */\n  @property({ reflect: true })\n  variant: AlertVariant = 'info';\n\n  /**\n   * Sets alert description\n   */\n  @property()\n  description?: 'string';\n\n  /**\n   * Allows to customize alert icon\n   */\n  @property({ converter: stringBooleanConverter() })\n  icon?: boolean | string;\n\n  /**\n   * Displays a close button.\n   */\n  @property({ type: Boolean, reflect: true })\n  closable = false;\n\n  /**\n   * Sets alert caption.\n   */\n  @property()\n  caption?: string;\n\n  /**\n   * Sets alert components display state.\n   */\n  @property({ type: Boolean, reflect: true })\n  closed = false;\n\n  /**\n   * Opens alert component.\n   */\n  public open() {\n    this.closed = false;\n  }\n\n  /**\n   * Closes alert component.\n   */\n  public close() {\n    this.closed = true;\n  }\n\n  /**\n   * Fires when close button clicked.\n   */\n  @event('bl-close') private onClose: EventDispatcher<boolean>;\n\n  private get _hasAlertCaptionSlot() {\n    return this.querySelector(':scope > [slot=\"caption\"]') !== null;\n  }\n\n  private _closeHandler() {\n    this.closed = true;\n    this.onClose(true);\n  }\n\n  private _predefinedIcons() {\n    switch (this.variant) {\n      case 'success':\n        return 'check_fill';\n      case 'danger':\n        return 'close_fill';\n      default:\n        return this.variant;\n    }\n  }\n\n  private _getIcon(): string | undefined {\n    if (!this.icon) return;\n    if (this.icon === true) return this._predefinedIcons();\n    return this.icon;\n  }\n\n  private _initAlertActionSlot(event: Event) {\n    const slotElement = event.target as HTMLSlotElement;\n    const slotElements = slotElement.assignedElements();\n\n    slotElements.forEach(element => {\n      if (element.tagName !== 'BL-BUTTON') {\n        element.parentNode?.removeChild(element);\n        return;\n      }\n\n      (slotElement.parentElement as HTMLElement).style.display = 'flex';\n\n      const variant = element.slot === 'action-secondary' ? 'secondary' : 'primary';\n      const buttonTypes: Record<AlertVariant, string> = {\n        info: 'default',\n        warning: 'neutral',\n        success: 'success',\n        danger: 'danger',\n      };\n\n      element.setAttribute('variant', variant as ButtonVariant);\n      element.setAttribute('kind', buttonTypes[this.variant] as ButtonKind);\n      element.setAttribute('size', 'medium' as ButtonSize);\n      element.removeAttribute('icon');\n    });\n  }\n\n  render(): TemplateResult {\n    const caption =\n      this.caption || this._hasAlertCaptionSlot\n        ? html`<span class=\"caption\">\n            <slot name=\"caption\"> ${this.caption} </slot>\n          </span>`\n        : null;\n    const icon = this._getIcon()\n      ? html`<bl-icon class=\"icon\" name=${ifDefined(this._getIcon())}></bl-icon>`\n      : null;\n\n    const closable = this.closable\n      ? html`<bl-button\n          class=\"close\"\n          label=\"close\"\n          variant=\"tertiary\"\n          kind=\"neutral\"\n          icon=\"close\"\n          variant=\"secondary\"\n          @click=${this._closeHandler}\n        ></bl-button>`\n      : null;\n    const description = html`<span class=\"description\">\n      <slot> ${this.description} </slot>\n    </span>`;\n\n    return html`\n      <div class=\"alert\">\n        ${icon}\n        <div class=\"wrapper\">\n          <div class=\"content\">\n            <div class=\"text-content\">${caption} ${description}</div>\n          </div>\n          <div class=\"actions\">\n            <slot class=\"action\" name=\"action\" @slotchange=${this._initAlertActionSlot}></slot>\n            <slot\n              class=\"action-secondary\"\n              name=\"action-secondary\"\n              @slotchange=${this._initAlertActionSlot}\n            ></slot>\n          </div>\n        </div>\n        ${closable}\n      </div>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-alert': BlAlert;\n  }\n}\n"],
+  "mappings": "4LACO,IAAMA,EAASC,2/CACfC,EAAQF,ECAR,IAAMG,EAAyB,KAC7B,CACL,cAAgBC,GACV,CAACA,GAASA,IAAU,OAAe,GACnCA,IAAU,QAAgB,GACvBA,CAEX,GCQF,IAAqBC,EAArB,cAAqCC,CAAW,CAAhD,kCASE,aAAwB,OAkBxB,cAAW,GAYX,YAAS,GAtCT,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAyCO,MAAO,CACZ,KAAK,OAAS,EAChB,CAKO,OAAQ,CACb,KAAK,OAAS,EAChB,CAOA,IAAY,sBAAuB,CACjC,OAAO,KAAK,cAAc,2BAA2B,IAAM,IAC7D,CAEQ,eAAgB,CACtB,KAAK,OAAS,GACd,KAAK,QAAQ,EAAI,CACnB,CAEQ,kBAAmB,CACzB,OAAQ,KAAK,QAAS,CACpB,IAAK,UACH,MAAO,aACT,IAAK,SACH,MAAO,aACT,QACE,OAAO,KAAK,OAChB,CACF,CAEQ,UAA+B,CACrC,GAAK,KAAK,KACV,OAAI,KAAK,OAAS,GAAa,KAAK,iBAAiB,EAC9C,KAAK,IACd,CAEQ,qBAAqBC,EAAc,CACzC,IAAMC,EAAcD,EAAM,OACLC,EAAY,iBAAiB,EAErC,QAAQC,GAAW,CA3GpC,IAAAC,EA4GM,GAAID,EAAQ,UAAY,YAAa,EACnCC,EAAAD,EAAQ,aAAR,MAAAC,EAAoB,YAAYD,GAChC,OAGDD,EAAY,cAA8B,MAAM,QAAU,OAE3D,IAAMG,EAAUF,EAAQ,OAAS,mBAAqB,YAAc,UAC9DG,EAA4C,CAChD,KAAM,UACN,QAAS,UACT,QAAS,UACT,OAAQ,QACV,EAEAH,EAAQ,aAAa,UAAWE,CAAwB,EACxDF,EAAQ,aAAa,OAAQG,EAAY,KAAK,OAAO,CAAe,EACpEH,EAAQ,aAAa,OAAQ,QAAsB,EACnDA,EAAQ,gBAAgB,MAAM,CAChC,CAAC,CACH,CAEA,QAAyB,CACvB,IAAMI,EACJ,KAAK,SAAW,KAAK,qBACjBC;AAAA,oCAC0B,KAAK;AAAA,mBAE/B,KACAC,EAAO,KAAK,SAAS,EACvBD,+BAAkCE,EAAU,KAAK,SAAS,CAAC,eAC3D,KAEEC,EAAW,KAAK,SAClBH;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mBAOW,KAAK;AAAA,uBAEhB,KACEI,EAAcJ;AAAA,eACT,KAAK;AAAA,aAGhB,OAAOA;AAAA;AAAA,UAEDC;AAAA;AAAA;AAAA,wCAG8BF,KAAWK;AAAA;AAAA;AAAA,6DAGU,KAAK;AAAA;AAAA;AAAA;AAAA,4BAItC,KAAK;AAAA;AAAA;AAAA;AAAA,UAIvBD;AAAA;AAAA,KAGR,CACF,EAtJEE,EAAA,CADC,EAAS,CAAE,QAAS,EAAK,CAAC,GARRf,EASnB,uBAMAe,EAAA,CADC,EAAS,GAdSf,EAenB,2BAMAe,EAAA,CADC,EAAS,CAAE,UAAWC,EAAuB,CAAE,CAAC,GApB9BhB,EAqBnB,oBAMAe,EAAA,CADC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GA1BvBf,EA2BnB,wBAMAe,EAAA,CADC,EAAS,GAhCSf,EAiCnB,uBAMAe,EAAA,CADC,EAAS,CAAE,KAAM,QAAS,QAAS,EAAK,CAAC,GAtCvBf,EAuCnB,sBAmB2Be,EAAA,CAA1BZ,EAAM,UAAU,GA1DEH,EA0DQ,uBA1DRA,EAArBe,EAAA,CADCE,EAAc,UAAU,GACJjB",
+  "names": ["styles", "i", "bl_alert_default", "stringBooleanConverter", "value", "BlAlert", "s", "bl_alert_default", "event", "slotElement", "element", "_a", "variant", "buttonTypes", "caption", "y", "icon", "l", "closable", "description", "__decorateClass", "stringBooleanConverter", "e"]
+}

package/dist/{chunk-R6XFK3HN.js → chunk-72WMF254.js}

@@ -12,4 +12,4 @@ import{a as b,b as u,c as f,d as g,e as w,g as y,h as x}from"./chunk-ANYJUR6Q.js
         <slot id="tooltip" role="tooltip" aria-live=${this._visible?"polite":"off"}></slot>
         <div class="arrow" aria-hidden="true"></div>
       </div>`}};e([i(".tooltip")],t.prototype,"tooltip",2),e([i(".trigger")],t.prototype,"trigger",2),e([i(".arrow")],t.prototype,"arrow",2),e([c({type:String})],t.prototype,"placement",2),e([v()],t.prototype,"_visible",2),e([r("bl-tooltip-show")],t.prototype,"onShow",2),e([r("bl-tooltip-hide")],t.prototype,"onHide",2),t=e([h("bl-tooltip")],t);export{t as a};
-//# sourceMappingURL=chunk-R6XFK3HN.js.map
+//# sourceMappingURL=chunk-72WMF254.js.map

package/dist/{chunk-R6XFK3HN.js.map → chunk-72WMF254.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/tooltip/bl-tooltip.css", "../src/components/tooltip/bl-tooltip.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.trigger{display:inline-block;cursor:pointer}.tooltip{position:fixed;box-sizing:border-box;border:0;background-color:var(--bl-color-secondary);color:var(--bl-color-content-primary-contrast);border-radius:var(--bl-size-3xs);pointer-events:none;font:var(--bl-font-title-3-regular);padding:var(--bl-size-m);z-index:var(--bl-index-tooltip);width:max-content;hyphens:auto;--max-viewport:calc(100vw - var(--bl-size-s));--tooltip-max-width:424px;max-width:min(var(--max-viewport),var(--tooltip-max-width))}.tooltip:not(.visible){visibility:hidden}.arrow{position:absolute;background-color:var(--bl-color-secondary);width:var(--bl-size-2xs);height:var(--bl-size-2xs);transform:rotate(45deg)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { computePosition, flip, shift, offset, arrow, inline, autoUpdate } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ReferenceElement } from '@floating-ui/core';\nimport style from './bl-tooltip.css';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport type Placement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end';\n\n/**\n * @tag bl-tooltip\n * @summary Baklava Tooltip component\n *\n * @property {string} placement - Sets the tooltip placement\n */\n@customElement('bl-tooltip')\nexport default class BlTooltip extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @query('.tooltip') private tooltip: HTMLElement;\n  @query('.trigger') private trigger: ReferenceElement;\n  @query('.arrow') private arrow: HTMLElement;\n\n  /**\n   * Sets placement of the tooltip\n   */\n  @property({ type: String })\n  placement: Placement = 'top';\n\n  @state() private _visible = false;\n\n  /**\n   * Fires when hovering over a trigger\n   */\n  @event('bl-tooltip-show') private onShow: EventDispatcher<string>;\n\n  /**\n   * Fires when leaving over from trigger\n   */\n  @event('bl-tooltip-hide') private onHide: EventDispatcher<string>;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this.handleKeyDown);\n\n    this.popoverAutoUpdateCleanup && this.popoverAutoUpdateCleanup();\n  }\n\n  private popoverAutoUpdateCleanup: () => void;\n\n  private setTooltip() {\n    this.popoverAutoUpdateCleanup = autoUpdate(this.trigger, this.tooltip, () => {\n      computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        strategy: 'fixed',\n        middleware: [\n          offset(8),\n          shift({ padding: 5 }),\n          flip(),\n          inline(),\n          arrow({ element: this.arrow, padding: 5 }),\n        ],\n      }).then(({ x, y, placement, middlewareData }) => {\n        Object.assign(this.tooltip.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n\n        if (middlewareData.arrow) {\n          const {x: arrowX, y: arrowY} = middlewareData.arrow;\n\n          Object.assign(this.arrow.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n          });\n\n          const arrowFlipDirections = {\n            top: 'bottom',\n            right: 'left',\n            bottom: 'top',\n            left: 'right',\n          };\n          const tooltipPlacement = placement.split('-')[0] as keyof typeof arrowFlipDirections;\n          const arrowDirection = arrowFlipDirections[tooltipPlacement];\n\n          this.arrow.style.setProperty(arrowDirection, '-4px');\n        }\n      });\n    });\n  }\n\n  /**\n   * Shows tooltip\n   */\n  show() {\n    this._visible = true;\n    this.setTooltip();\n    this.onShow('Show event fired!');\n  }\n\n  /**\n   * Hides tooltip\n   */\n  hide() {\n    this._visible = false;\n    this.onHide('Hide event fired!');\n  }\n\n  /**\n   * Gives the visibility status of the tooltip\n   */\n  get visible(): boolean {\n    return this._visible;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this._visible && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  }\n\n  render(): TemplateResult {\n    const classes = classMap({\n      tooltip: true,\n      visible: this._visible,\n    });\n\n    return html`<slot\n        class=\"trigger\"\n        name=\"tooltip-trigger\"\n        aria-describedby=\"tooltip\"\n        @focus=${{ handleEvent: () => this.show(), capture: true }}\n        @blur=${{ handleEvent: () => this.hide(), capture: true }}\n        @mouseover=${() => this.show()}\n        @mouseleave=${() => this.hide()}\n      >\n      </slot>\n      <div class=${classes}>\n        <slot id=\"tooltip\" role=\"tooltip\" aria-live=${this._visible ? 'polite' : 'off'}></slot>\n        <div class=\"arrow\" aria-hidden=\"true\"></div>\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tooltip': BlTooltip;\n  }\n}\n"],
-  "mappings": "4RACO,IAAMA,EAASC,+qBACfC,EAAQF,EC2Bf,IAAqBG,EAArB,cAAuCC,CAAW,CAAlD,kCAaE,eAAuB,MAEd,KAAQ,SAAW,GAd5B,WAAW,QAAyB,CAClC,MAAO,CAACC,CAAK,CACf,CAwBA,mBAAoB,CAClB,MAAM,kBAAkB,EAExB,KAAK,iBAAiB,UAAW,KAAK,aAAa,CACrD,CAEA,sBAAuB,CACrB,MAAM,qBAAqB,EAE3B,KAAK,oBAAoB,UAAW,KAAK,aAAa,EAEtD,KAAK,0BAA4B,KAAK,yBAAyB,CACjE,CAIQ,YAAa,CACnB,KAAK,yBAA2BC,EAAW,KAAK,QAAS,KAAK,QAAS,IAAM,CAC3EC,EAAgB,KAAK,QAAS,KAAK,QAAS,CAC1C,UAAW,KAAK,UAChB,SAAU,QACV,WAAY,CACVC,EAAO,CAAC,EACRC,EAAM,CAAE,QAAS,CAAE,CAAC,EACpBC,EAAK,EACLC,EAAO,EACPC,EAAM,CAAE,QAAS,KAAK,MAAO,QAAS,CAAE,CAAC,CAC3C,CACF,CAAC,EAAE,KAAK,CAAC,CAAE,EAAAC,EAAG,EAAAC,EAAG,UAAAC,EAAW,eAAAC,CAAe,IAAM,CAM/C,GALA,OAAO,OAAO,KAAK,QAAQ,MAAO,CAChC,KAAM,GAAGH,MACT,IAAK,GAAGC,KACV,CAAC,EAEGE,EAAe,MAAO,CACxB,GAAM,CAAC,EAAGC,EAAQ,EAAGC,CAAM,EAAIF,EAAe,MAE9C,OAAO,OAAO,KAAK,MAAM,MAAO,CAC9B,KAAMC,GAAU,KAAO,GAAGA,MAAa,GACvC,IAAKC,GAAU,KAAO,GAAGA,MAAa,EACxC,CAAC,EAED,IAAMC,EAAsB,CAC1B,IAAK,SACL,MAAO,OACP,OAAQ,MACR,KAAM,OACR,EACMC,EAAmBL,EAAU,MAAM,GAAG,EAAE,CAAC,EACzCM,EAAiBF,EAAoBC,CAAgB,EAE3D,KAAK,MAAM,MAAM,YAAYC,EAAgB,MAAM,EAEvD,CAAC,CACH,CAAC,CACH,CAKA,MAAO,CACL,KAAK,SAAW,GAChB,KAAK,WAAW,EAChB,KAAK,OAAO,mBAAmB,CACjC,CAKA,MAAO,CACL,KAAK,SAAW,GAChB,KAAK,OAAO,mBAAmB,CACjC,CAKA,IAAI,SAAmB,CACrB,OAAO,KAAK,QACd,CAEQ,cAAcC,EAAsB,CACtC,KAAK,UAAYA,EAAM,MAAQ,WACjCA,EAAM,gBAAgB,EACtB,KAAK,KAAK,EAEd,CAEA,QAAyB,CACvB,IAAMC,EAAUC,EAAS,CACvB,QAAS,GACT,QAAS,KAAK,QAChB,CAAC,EAED,OAAOV;AAAA;AAAA;AAAA;AAAA,iBAIM,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,gBACjD,CAAE,YAAa,IAAM,KAAK,KAAK,EAAG,QAAS,EAAK;AAAA,qBAC3C,IAAM,KAAK,KAAK;AAAA,sBACf,IAAM,KAAK,KAAK;AAAA;AAAA;AAAA,mBAGnBS;AAAA,sDACmC,KAAK,SAAW,SAAW;AAAA;AAAA,aAG/E,CACF,EAnI6BE,EAAA,CAA1B,EAAM,UAAU,GALEtB,EAKQ,uBACAsB,EAAA,CAA1B,EAAM,UAAU,GANEtB,EAMQ,uBACFsB,EAAA,CAAxB,EAAM,QAAQ,GAPItB,EAOM,qBAMzBsB,EAAA,CADCC,EAAS,CAAE,KAAM,MAAO,CAAC,GAZPvB,EAanB,yBAEiBsB,EAAA,CAAhBE,EAAM,GAfYxB,EAeF,wBAKiBsB,EAAA,CAAjCH,EAAM,iBAAiB,GApBLnB,EAoBe,sBAKAsB,EAAA,CAAjCH,EAAM,iBAAiB,GAzBLnB,EAyBe,sBAzBfA,EAArBsB,EAAA,CADCC,EAAc,YAAY,GACNvB",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`.trigger{display:inline-block;cursor:pointer}.tooltip{position:fixed;box-sizing:border-box;border:0;background-color:var(--bl-color-secondary);color:var(--bl-color-content-primary-contrast);border-radius:var(--bl-size-3xs);pointer-events:none;font:var(--bl-font-title-3-regular);padding:var(--bl-size-m);z-index:var(--bl-index-tooltip);width:max-content;hyphens:auto;--max-viewport:calc(100vw - var(--bl-size-s));--tooltip-max-width:424px;max-width:min(var(--max-viewport),var(--tooltip-max-width))}.tooltip:not(.visible){visibility:hidden}.arrow{position:absolute;background-color:var(--bl-color-secondary);width:var(--bl-size-2xs);height:var(--bl-size-2xs);transform:rotate(45deg)}`;\nexport default styles;\n", "import { CSSResultGroup, html, LitElement, TemplateResult } from 'lit';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { computePosition, flip, shift, offset, arrow, inline, autoUpdate } from '@floating-ui/dom';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { ReferenceElement } from '@floating-ui/core';\nimport style from './bl-tooltip.css';\nimport { event, EventDispatcher } from '../../utilities/event';\n\nexport type Placement =\n  | 'top-start'\n  | 'top'\n  | 'top-end'\n  | 'bottom-start'\n  | 'bottom'\n  | 'bottom-end'\n  | 'left-start'\n  | 'left'\n  | 'left-end'\n  | 'right-start'\n  | 'right'\n  | 'right-end';\n\n/**\n * @tag bl-tooltip\n * @summary Baklava Tooltip component\n *\n * @property {string} placement - Sets the tooltip placement\n */\n@customElement('bl-tooltip')\nexport default class BlTooltip extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @query('.tooltip') private tooltip: HTMLElement;\n  @query('.trigger') private trigger: ReferenceElement;\n  @query('.arrow') private arrow: HTMLElement;\n\n  /**\n   * Sets placement of the tooltip\n   */\n  @property({ type: String })\n  placement: Placement = 'top';\n\n  @state() private _visible = false;\n\n  /**\n   * Fires when hovering over a trigger\n   */\n  @event('bl-tooltip-show') private onShow: EventDispatcher<string>;\n\n  /**\n   * Fires when leaving over from trigger\n   */\n  @event('bl-tooltip-hide') private onHide: EventDispatcher<string>;\n\n  connectedCallback() {\n    super.connectedCallback();\n\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this.removeEventListener('keydown', this.handleKeyDown);\n\n    this.popoverAutoUpdateCleanup && this.popoverAutoUpdateCleanup();\n  }\n\n  private popoverAutoUpdateCleanup: () => void;\n\n  private setTooltip() {\n    this.popoverAutoUpdateCleanup = autoUpdate(this.trigger, this.tooltip, () => {\n      computePosition(this.trigger, this.tooltip, {\n        placement: this.placement,\n        strategy: 'fixed',\n        middleware: [\n          offset(8),\n          shift({ padding: 5 }),\n          flip(),\n          inline(),\n          arrow({ element: this.arrow, padding: 5 }),\n        ],\n      }).then(({ x, y, placement, middlewareData }) => {\n        Object.assign(this.tooltip.style, {\n          left: `${x}px`,\n          top: `${y}px`,\n        });\n\n        if (middlewareData.arrow) {\n          const { x: arrowX, y: arrowY } = middlewareData.arrow;\n\n          Object.assign(this.arrow.style, {\n            left: arrowX != null ? `${arrowX}px` : '',\n            top: arrowY != null ? `${arrowY}px` : '',\n          });\n\n          const arrowFlipDirections = {\n            top: 'bottom',\n            right: 'left',\n            bottom: 'top',\n            left: 'right',\n          };\n          const tooltipPlacement = placement.split('-')[0] as keyof typeof arrowFlipDirections;\n          const arrowDirection = arrowFlipDirections[tooltipPlacement];\n\n          this.arrow.style.setProperty(arrowDirection, '-4px');\n        }\n      });\n    });\n  }\n\n  /**\n   * Shows tooltip\n   */\n  show() {\n    this._visible = true;\n    this.setTooltip();\n    this.onShow('Show event fired!');\n  }\n\n  /**\n   * Hides tooltip\n   */\n  hide() {\n    this._visible = false;\n    this.onHide('Hide event fired!');\n  }\n\n  /**\n   * Gives the visibility status of the tooltip\n   */\n  get visible(): boolean {\n    return this._visible;\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (this._visible && event.key === 'Escape') {\n      event.stopPropagation();\n      this.hide();\n    }\n  }\n\n  render(): TemplateResult {\n    const classes = classMap({\n      tooltip: true,\n      visible: this._visible,\n    });\n\n    return html`<slot\n        class=\"trigger\"\n        name=\"tooltip-trigger\"\n        aria-describedby=\"tooltip\"\n        @focus=${{ handleEvent: () => this.show(), capture: true }}\n        @blur=${{ handleEvent: () => this.hide(), capture: true }}\n        @mouseover=${() => this.show()}\n        @mouseleave=${() => this.hide()}\n      >\n      </slot>\n      <div class=${classes}>\n        <slot id=\"tooltip\" role=\"tooltip\" aria-live=${this._visible ? 'polite' : 'off'}></slot>\n        <div class=\"arrow\" aria-hidden=\"true\"></div>\n      </div>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'bl-tooltip': BlTooltip;\n  }\n}\n"],
+  "mappings": "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",
   "names": ["styles", "i", "bl_tooltip_default", "BlTooltip", "s", "bl_tooltip_default", "P", "z", "O", "D", "b", "T", "u", "x", "y", "placement", "middlewareData", "arrowX", "arrowY", "arrowFlipDirections", "tooltipPlacement", "arrowDirection", "event", "classes", "o", "__decorateClass", "e", "t"]
 }

package/dist/{chunk-W3NQ6T5J.js → chunk-B3HLJT4E.js}

@@ -1,4 +1,4 @@
-import{a as h}from"./chunk-KQBXYF3J.js";import{b as y,d as g,f as k,g as x,h as w}from"./chunk-ANYJUR6Q.js";import{a as f}from"./chunk-OLPYXE2P.js";import{a as l}from"./chunk-KPAWUBRO.js";import{a as s}from"./chunk-23UFIOHV.js";import{a,b as d,f as c,g as u,h as r,i as b,j as n}from"./chunk-57PTZNIL.js";import{a as e}from"./chunk-NZ3RGSR6.js";var O=a`:host{position:relative;display:inline-block}.popover{--left:0;--top:0;--border-color:var(--bl-color-primary);position:fixed;z-index:var(--bl-index-popover);display:none;flex-direction:column;align-items:flex-start;padding:var(--bl-size-m);gap:var(--bl-size-xs);overflow-y:auto;background:var(--bl-color-primary-background);border:1px solid var(--border-color);box-shadow:0 10px 15px -8px #27314226;border-radius:var(--bl-size-3xs);left:var(--left);top:var(--top);box-sizing:border-box}:host([kind='neutral']) .popover{--border-color:var(--bl-color-secondary)}:host([kind='success']) .popover{--border-color:var(--bl-color-success)}:host([kind='danger']) .popover{--border-color:var(--bl-color-danger)}.visible{display:flex}`,_=O;var m="bl-dropdown",t=class extends c{constructor(){super(...arguments);this._cleanUpPopover=null;this._isPopoverOpen=!1;this.label="Dropdown Button";this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this._handleClickOutside=o=>{let p=o.composedPath();!p.includes(this._popover)&&!p.includes(this._dropdownButton)&&this.close()};this.focusedOptionIndex=-1}static get styles(){return[_]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover(),this.removeEventListener("keydown",this.handleKeyDown)}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}_setupPopover(){this._cleanUpPopover=x(this._dropdownButton,this._popover,()=>{w(this._dropdownButton,this._popover,{placement:"bottom-start",strategy:"fixed",middleware:[y(),g(8),k({apply(o){Object.assign(o.elements.floating.style,{minWidth:`${o.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:o,y:p})=>{this._popover.style.setProperty("--left",`${o}px`),this._popover.style.setProperty("--top",`${p}px`)})})}handleKeyDown(o){if(["ArrowDown","ArrowRight"].includes(o.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(o.key))this.focusedOptionIndex--;else if(o.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),o.preventDefault()}get options(){return[].slice.call(this.querySelectorAll(v))}open(){this._isPopoverOpen=!0,this._setupPopover(),this.onOpen("Dropdown opened!"),document.addEventListener("click",this._handleClickOutside)}close(){this._isPopoverOpen=!1,this.onClose("Dropdown closed!"),this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._handleClickOutside)}render(){let o=f({popover:!0,visible:this.opened});return d`<bl-button
+import{a as h}from"./chunk-VYKKWEKI.js";import{b as y,d as g,f as k,g as x,h as w}from"./chunk-ANYJUR6Q.js";import{a as f}from"./chunk-OLPYXE2P.js";import{a as l}from"./chunk-KPAWUBRO.js";import{a as s}from"./chunk-23UFIOHV.js";import{a,b as d,f as c,g as u,h as r,i as b,j as n}from"./chunk-57PTZNIL.js";import{a as e}from"./chunk-NZ3RGSR6.js";var O=a`:host{position:relative;display:inline-block}.popover{--left:0;--top:0;--border-color:var(--bl-color-primary);position:fixed;z-index:var(--bl-index-popover);display:none;flex-direction:column;align-items:flex-start;padding:var(--bl-size-m);gap:var(--bl-size-xs);overflow-y:auto;background:var(--bl-color-primary-background);border:1px solid var(--border-color);box-shadow:0 10px 15px -8px #27314226;border-radius:var(--bl-size-3xs);left:var(--left);top:var(--top);box-sizing:border-box}:host([kind='neutral']) .popover{--border-color:var(--bl-color-secondary)}:host([kind='success']) .popover{--border-color:var(--bl-color-success)}:host([kind='danger']) .popover{--border-color:var(--bl-color-danger)}.visible{display:flex}`,_=O;var m="bl-dropdown",t=class extends c{constructor(){super(...arguments);this._cleanUpPopover=null;this._isPopoverOpen=!1;this.label="Dropdown Button";this.variant="primary";this.kind="default";this.size="medium";this.disabled=!1;this._handleClickOutside=o=>{let p=o.composedPath();!p.includes(this._popover)&&!p.includes(this._dropdownButton)&&this.close()};this.focusedOptionIndex=-1}static get styles(){return[_]}connectedCallback(){super.connectedCallback(),this.addEventListener("keydown",this.handleKeyDown)}disconnectedCallback(){super.disconnectedCallback(),this._cleanUpPopover&&this._cleanUpPopover(),this.removeEventListener("keydown",this.handleKeyDown)}get opened(){return this._isPopoverOpen}_handleClick(){!this._isPopoverOpen&&!this.disabled?this.open():this.close()}_setupPopover(){this._cleanUpPopover=x(this._dropdownButton,this._popover,()=>{w(this._dropdownButton,this._popover,{placement:"bottom-start",strategy:"fixed",middleware:[y(),g(8),k({apply(o){Object.assign(o.elements.floating.style,{minWidth:`${o.elements.reference.getBoundingClientRect().width}px`})}})]}).then(({x:o,y:p})=>{this._popover.style.setProperty("--left",`${o}px`),this._popover.style.setProperty("--top",`${p}px`)})})}handleKeyDown(o){if(["ArrowDown","ArrowRight"].includes(o.key))this.focusedOptionIndex++;else if(["ArrowUp","ArrowLeft"].includes(o.key))this.focusedOptionIndex--;else if(o.key==="Escape"){this.focusedOptionIndex=-1,this.close();return}else return;this.focusedOptionIndex=Math.max(0,Math.min(this.focusedOptionIndex,this.options.length-1)),this.options[this.focusedOptionIndex].focus(),o.preventDefault()}get options(){return[].slice.call(this.querySelectorAll(v))}open(){this._isPopoverOpen=!0,this._setupPopover(),this.onOpen("Dropdown opened!"),document.addEventListener("click",this._handleClickOutside)}close(){this._isPopoverOpen=!1,this.onClose("Dropdown closed!"),this._cleanUpPopover&&this._cleanUpPopover(),document.removeEventListener("click",this._handleClickOutside)}render(){let o=f({popover:!0,visible:this.opened});return d`<bl-button
         dropdown
         .active=${this.opened}
         ?disabled=${l(this.disabled)}
@@ -10,7 +10,9 @@ import{a as h}from"./chunk-KQBXYF3J.js";import{b as y,d as g,f as k,g as x,h as
       >
         ${this.label}
       </bl-button>
-      <div class="${o}" role="menu" aria-expanded="${this.opened}"><slot></slot></div> `}};e([n("bl-button")],t.prototype,"_dropdownButton",2),e([n(".popover")],t.prototype,"_popover",2),e([b()],t.prototype,"_isPopoverOpen",2),e([r({type:String,reflect:!0})],t.prototype,"label",2),e([r({type:String,reflect:!0})],t.prototype,"variant",2),e([r({type:String,reflect:!0})],t.prototype,"kind",2),e([r({type:String,reflect:!0})],t.prototype,"size",2),e([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("bl-dropdown-open")],t.prototype,"onOpen",2),e([s("bl-dropdown-close")],t.prototype,"onClose",2),t=e([u(m)],t);var P=a`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,C=P;var v="bl-dropdown-item",i=class extends c{static get styles(){return[C]}_handleClick(){this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(h),this.BlDropdownField=this.closest(m),!this.BlDropdownField&&!this.BlDropdownGroupField&&console.warn(`bl-dropdown-item is designed to be used inside a ${h} or ${m}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return d`<bl-button
+      <div class="${o}" role="menu" aria-expanded="${this.opened}">
+        <slot></slot>
+      </div> `}};e([n("bl-button")],t.prototype,"_dropdownButton",2),e([n(".popover")],t.prototype,"_popover",2),e([b()],t.prototype,"_isPopoverOpen",2),e([r({type:String,reflect:!0})],t.prototype,"label",2),e([r({type:String,reflect:!0})],t.prototype,"variant",2),e([r({type:String,reflect:!0})],t.prototype,"kind",2),e([r({type:String,reflect:!0})],t.prototype,"size",2),e([r({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([s("bl-dropdown-open")],t.prototype,"onOpen",2),e([s("bl-dropdown-close")],t.prototype,"onClose",2),t=e([u(m)],t);var P=a`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`,C=P;var v="bl-dropdown-item",i=class extends c{static get styles(){return[C]}_handleClick(){this.onClick("Action clicked!")}focus(){this.menuElement.focus()}connectedCallback(){super.connectedCallback(),this.BlDropdownGroupField=this.closest(h),this.BlDropdownField=this.closest(m),!this.BlDropdownField&&!this.BlDropdownGroupField&&console.warn(`bl-dropdown-item is designed to be used inside a ${h} or ${m}`,this)}disconnectedCallback(){super.disconnectedCallback()}render(){return d`<bl-button
       variant="tertiary"
       kind="neutral"
       icon="${l(this.icon)}"
@@ -18,4 +20,4 @@ import{a as h}from"./chunk-KQBXYF3J.js";import{b as y,d as g,f as k,g as x,h as
       @click="${this._handleClick}"
       ><slot></slot>
     </bl-button>`}};e([r({type:String})],i.prototype,"icon",2),e([s("bl-dropdown-item-click")],i.prototype,"onClick",2),e([n("[role=menuitem]")],i.prototype,"menuElement",2),i=e([u(v)],i);export{v as a,i as b,m as c,t as d};
-//# sourceMappingURL=chunk-W3NQ6T5J.js.map
+//# sourceMappingURL=chunk-B3HLJT4E.js.map

package/dist/{chunk-W3NQ6T5J.js.map → chunk-B3HLJT4E.js.map}

@@ -1,7 +1,7 @@
 {
   "version": 3,
   "sources": ["../src/components/dropdown/bl-dropdown.css", "../src/components/dropdown/bl-dropdown.ts", "../src/components/dropdown/item/bl-dropdown-item.css", "../src/components/dropdown/item/bl-dropdown-item.ts"],
-  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}.popover{--left:0;--top:0;--border-color:var(--bl-color-primary);position:fixed;z-index:var(--bl-index-popover);display:none;flex-direction:column;align-items:flex-start;padding:var(--bl-size-m);gap:var(--bl-size-xs);overflow-y:auto;background:var(--bl-color-primary-background);border:1px solid var(--border-color);box-shadow:0 10px 15px -8px #27314226;border-radius:var(--bl-size-3xs);left:var(--left);top:var(--top);box-sizing:border-box}:host([kind='neutral']) .popover{--border-color:var(--bl-color-secondary)}:host([kind='success']) .popover{--border-color:var(--bl-color-success)}:host([kind='danger']) .popover{--border-color:var(--bl-color-danger)}.visible{display:flex}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport {\n  computePosition,\n  flip,\n  offset,\n  autoUpdate,\n  size,\n  MiddlewareArguments,\n} from '@floating-ui/dom';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport style from './bl-dropdown.css';\n\nimport '../button/bl-button';\nimport { ButtonSize, ButtonVariant, ButtonKind } from '../button/bl-button';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport BlDropdownItem, { blDropdownItemTag } from './item/bl-dropdown-item';\n\nexport type CleanUpFunction = () => void;\n\nexport const blDropdownTag = 'bl-dropdown';\n\n/**\n * @tag bl-dropdown\n * @summary Baklava Dropdown component\n */\n@customElement(blDropdownTag)\nexport default class BlDropdown extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @query('bl-button')\n  private _dropdownButton: HTMLElement;\n\n  @query('.popover')\n  private _popover: HTMLElement;\n\n  private _cleanUpPopover: CleanUpFunction | null = null;\n\n  @state() private _isPopoverOpen = false;\n\n  /**\n   * Sets the dropdown button label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Dropdown Button';\n\n  /**\n   * Sets the dropdown button variant\n   */\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = 'primary';\n\n  /**\n   * Sets the dropdown button kind\n   */\n  @property({ type: String, reflect: true })\n  kind: ButtonKind = 'default';\n\n  /**\n   * Sets the dropdown button size\n   */\n  @property({ type: String, reflect: true })\n  size: ButtonSize = 'medium';\n\n  /**\n   * Sets button as disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Fires when dropdown opened\n   */\n  @event('bl-dropdown-open') private onOpen: EventDispatcher<string>;\n\n  /**\n   * Fires when dropdown closed\n   */\n  @event('bl-dropdown-close') private onClose: EventDispatcher<string>;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this._cleanUpPopover && this._cleanUpPopover();\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  get opened() {\n    return this._isPopoverOpen;\n  }\n\n  private _handleClick() {\n    !this._isPopoverOpen && !this.disabled ? this.open() : this.close();\n  }\n\n  private _handleClickOutside = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n    if (!eventPath.includes(this._popover) && !eventPath.includes(this._dropdownButton)) {\n      this.close();\n    }\n  };\n\n  private _setupPopover() {\n    this._cleanUpPopover = autoUpdate(this._dropdownButton, this._popover, () => {\n      computePosition(this._dropdownButton, this._popover, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        middleware: [\n          flip(),\n          offset(8),\n          size({\n            apply(args: MiddlewareArguments) {\n              Object.assign(args.elements.floating.style, {\n                minWidth: `${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  private focusedOptionIndex = -1;\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Next action\n    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n      this.focusedOptionIndex++;\n\n      // Previous action\n    } else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n      this.focusedOptionIndex--;\n      // Select action\n    } else if (event.key === 'Escape') {\n      this.focusedOptionIndex = -1;\n      this.close()\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.options.length - 1)\n    );\n\n    this.options[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\n  }\n\n  get options(): BlDropdownItem[] {\n    return [].slice.call(this.querySelectorAll(blDropdownItemTag));\n  }\n\n  open() {\n    this._isPopoverOpen = true;\n    this._setupPopover();\n    this.onOpen('Dropdown opened!');\n    document.addEventListener('click', this._handleClickOutside);\n  }\n\n  close() {\n    this._isPopoverOpen = false;\n    this.onClose('Dropdown closed!');\n    this._cleanUpPopover && this._cleanUpPopover();\n    document.removeEventListener('click', this._handleClickOutside);\n  }\n\n  render(): TemplateResult {\n    const popoverClasses = classMap({\n      popover: true,\n      visible: this.opened,\n    });\n\n    return html`<bl-button\n        dropdown\n        .active=${this.opened}\n        ?disabled=${ifDefined(this.disabled)}\n        variant=\"${this.variant}\"\n        kind=\"${this.kind}\"\n        size=\"${this.size}\"\n        aria-label=\"${ifDefined(this.label)}\"\n        @bl-click=\"${this._handleClick}\"\n      >\n        ${this.label}\n      </bl-button>\n      <div class=\"${popoverClasses}\" role=\"menu\" aria-expanded=\"${this.opened}\"><slot></slot></div> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blDropdownTag]: BlDropdown;\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\nimport type BlDropdownGroup from '../group/bl-dropdown-group';\nimport type BlDropdown from '../bl-dropdown';\n\nimport { blDropdownGroupTag } from '../group/bl-dropdown-group';\nimport { blDropdownTag } from '../bl-dropdown';\n\nimport style from './bl-dropdown-item.css';\n\nimport '../../button/bl-button';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport BlButton from '../../button/bl-button';\n\nexport const blDropdownItemTag = 'bl-dropdown-item';\n\n/**\n * @tag bl-dropdown-item\n * @summary Baklava Dropdown Item component\n */\n@customElement(blDropdownItemTag)\nexport default class BlDropdownItem extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the icon name. Shows icon with bl-icon component\n   */\n\n  @property({ type: String })\n  icon?: string;\n\n  @event('bl-dropdown-item-click') private onClick: EventDispatcher<string>;\n\n  private _handleClick() {\n    this.onClick('Action clicked!');\n  }\n\n  @query('[role=menuitem]') private menuElement: BlButton;\n\n  /**\n   * Focuses this action\n   */\n   focus() {\n    this.menuElement.focus();\n  }\n\n  private BlDropdownGroupField: BlDropdownGroup | null;\n  private BlDropdownField: BlDropdown | null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n    this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n\n    if (!this.BlDropdownField && !this.BlDropdownGroupField) {\n      console.warn(`bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag} or ${blDropdownTag}`, this);\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  render(): TemplateResult {\n    return html`<bl-button\n      variant=\"tertiary\"\n      kind=\"neutral\"\n      icon=\"${ifDefined(this.icon)}\"\n      role=\"menuitem\"\n      @click=\"${this._handleClick}\"\n      ><slot></slot>\n    </bl-button>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blDropdownItemTag]: BlDropdownItem;\n  }\n}\n"],
-  "mappings": "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",
+  "sourcesContent": ["import {css} from 'lit';\nexport const styles = css`:host{position:relative;display:inline-block}.popover{--left:0;--top:0;--border-color:var(--bl-color-primary);position:fixed;z-index:var(--bl-index-popover);display:none;flex-direction:column;align-items:flex-start;padding:var(--bl-size-m);gap:var(--bl-size-xs);overflow-y:auto;background:var(--bl-color-primary-background);border:1px solid var(--border-color);box-shadow:0 10px 15px -8px #27314226;border-radius:var(--bl-size-3xs);left:var(--left);top:var(--top);box-sizing:border-box}:host([kind='neutral']) .popover{--border-color:var(--bl-color-secondary)}:host([kind='success']) .popover{--border-color:var(--bl-color-success)}:host([kind='danger']) .popover{--border-color:var(--bl-color-danger)}.visible{display:flex}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property, state, query } from 'lit/decorators.js';\nimport {\n  computePosition,\n  flip,\n  offset,\n  autoUpdate,\n  size,\n  MiddlewareArguments,\n} from '@floating-ui/dom';\nimport { event, EventDispatcher } from '../../utilities/event';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport style from './bl-dropdown.css';\n\nimport '../button/bl-button';\nimport { ButtonSize, ButtonVariant, ButtonKind } from '../button/bl-button';\nimport { ifDefined } from 'lit/directives/if-defined.js';\n\nimport BlDropdownItem, { blDropdownItemTag } from './item/bl-dropdown-item';\n\nexport type CleanUpFunction = () => void;\n\nexport const blDropdownTag = 'bl-dropdown';\n\n/**\n * @tag bl-dropdown\n * @summary Baklava Dropdown component\n */\n@customElement(blDropdownTag)\nexport default class BlDropdown extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  @query('bl-button')\n  private _dropdownButton: HTMLElement;\n\n  @query('.popover')\n  private _popover: HTMLElement;\n\n  private _cleanUpPopover: CleanUpFunction | null = null;\n\n  @state() private _isPopoverOpen = false;\n\n  /**\n   * Sets the dropdown button label\n   */\n  @property({ type: String, reflect: true })\n  label = 'Dropdown Button';\n\n  /**\n   * Sets the dropdown button variant\n   */\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = 'primary';\n\n  /**\n   * Sets the dropdown button kind\n   */\n  @property({ type: String, reflect: true })\n  kind: ButtonKind = 'default';\n\n  /**\n   * Sets the dropdown button size\n   */\n  @property({ type: String, reflect: true })\n  size: ButtonSize = 'medium';\n\n  /**\n   * Sets button as disabled\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Fires when dropdown opened\n   */\n  @event('bl-dropdown-open') private onOpen: EventDispatcher<string>;\n\n  /**\n   * Fires when dropdown closed\n   */\n  @event('bl-dropdown-close') private onClose: EventDispatcher<string>;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.handleKeyDown);\n  }\n  disconnectedCallback() {\n    super.disconnectedCallback();\n\n    this._cleanUpPopover && this._cleanUpPopover();\n    this.removeEventListener('keydown', this.handleKeyDown);\n  }\n\n  get opened() {\n    return this._isPopoverOpen;\n  }\n\n  private _handleClick() {\n    !this._isPopoverOpen && !this.disabled ? this.open() : this.close();\n  }\n\n  private _handleClickOutside = (event: MouseEvent) => {\n    const eventPath = event.composedPath() as HTMLElement[];\n    if (!eventPath.includes(this._popover) && !eventPath.includes(this._dropdownButton)) {\n      this.close();\n    }\n  };\n\n  private _setupPopover() {\n    this._cleanUpPopover = autoUpdate(this._dropdownButton, this._popover, () => {\n      computePosition(this._dropdownButton, this._popover, {\n        placement: 'bottom-start',\n        strategy: 'fixed',\n        middleware: [\n          flip(),\n          offset(8),\n          size({\n            apply(args: MiddlewareArguments) {\n              Object.assign(args.elements.floating.style, {\n                minWidth: `${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  private focusedOptionIndex = -1;\n\n  private handleKeyDown(event: KeyboardEvent) {\n    // Next action\n    if (['ArrowDown', 'ArrowRight'].includes(event.key)) {\n      this.focusedOptionIndex++;\n\n      // Previous action\n    } else if (['ArrowUp', 'ArrowLeft'].includes(event.key)) {\n      this.focusedOptionIndex--;\n      // Select action\n    } else if (event.key === 'Escape') {\n      this.focusedOptionIndex = -1;\n      this.close();\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.options.length - 1)\n    );\n\n    this.options[this.focusedOptionIndex].focus();\n\n    event.preventDefault();\n  }\n\n  get options(): BlDropdownItem[] {\n    return [].slice.call(this.querySelectorAll(blDropdownItemTag));\n  }\n\n  open() {\n    this._isPopoverOpen = true;\n    this._setupPopover();\n    this.onOpen('Dropdown opened!');\n    document.addEventListener('click', this._handleClickOutside);\n  }\n\n  close() {\n    this._isPopoverOpen = false;\n    this.onClose('Dropdown closed!');\n    this._cleanUpPopover && this._cleanUpPopover();\n    document.removeEventListener('click', this._handleClickOutside);\n  }\n\n  render(): TemplateResult {\n    const popoverClasses = classMap({\n      popover: true,\n      visible: this.opened,\n    });\n\n    return html`<bl-button\n        dropdown\n        .active=${this.opened}\n        ?disabled=${ifDefined(this.disabled)}\n        variant=\"${this.variant}\"\n        kind=\"${this.kind}\"\n        size=\"${this.size}\"\n        aria-label=\"${ifDefined(this.label)}\"\n        @bl-click=\"${this._handleClick}\"\n      >\n        ${this.label}\n      </bl-button>\n      <div class=\"${popoverClasses}\" role=\"menu\" aria-expanded=\"${this.opened}\">\n        <slot></slot>\n      </div> `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blDropdownTag]: BlDropdown;\n  }\n}\n", "import {css} from 'lit';\nexport const styles = css`:host{width:100%;--bl-button-display:block;--bl-button-justify:start}`;\nexport default styles;\n", "import { LitElement, html, CSSResultGroup, TemplateResult } from 'lit';\nimport { customElement, property, query } from 'lit/decorators.js';\nimport { event, EventDispatcher } from '../../../utilities/event';\nimport type BlDropdownGroup from '../group/bl-dropdown-group';\nimport type BlDropdown from '../bl-dropdown';\n\nimport { blDropdownGroupTag } from '../group/bl-dropdown-group';\nimport { blDropdownTag } from '../bl-dropdown';\n\nimport style from './bl-dropdown-item.css';\n\nimport '../../button/bl-button';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport BlButton from '../../button/bl-button';\n\nexport const blDropdownItemTag = 'bl-dropdown-item';\n\n/**\n * @tag bl-dropdown-item\n * @summary Baklava Dropdown Item component\n */\n@customElement(blDropdownItemTag)\nexport default class BlDropdownItem extends LitElement {\n  static get styles(): CSSResultGroup {\n    return [style];\n  }\n\n  /**\n   * Sets the icon name. Shows icon with bl-icon component\n   */\n\n  @property({ type: String })\n  icon?: string;\n\n  @event('bl-dropdown-item-click') private onClick: EventDispatcher<string>;\n\n  private _handleClick() {\n    this.onClick('Action clicked!');\n  }\n\n  @query('[role=menuitem]') private menuElement: BlButton;\n\n  /**\n   * Focuses this action\n   */\n  focus() {\n    this.menuElement.focus();\n  }\n\n  private BlDropdownGroupField: BlDropdownGroup | null;\n  private BlDropdownField: BlDropdown | null;\n\n  connectedCallback(): void {\n    super.connectedCallback();\n\n    this.BlDropdownGroupField = this.closest<BlDropdownGroup>(blDropdownGroupTag);\n    this.BlDropdownField = this.closest<BlDropdown>(blDropdownTag);\n\n    if (!this.BlDropdownField && !this.BlDropdownGroupField) {\n      console.warn(\n        `bl-dropdown-item is designed to be used inside a ${blDropdownGroupTag} or ${blDropdownTag}`,\n        this\n      );\n    }\n  }\n\n  disconnectedCallback(): void {\n    super.disconnectedCallback();\n  }\n\n  render(): TemplateResult {\n    return html`<bl-button\n      variant=\"tertiary\"\n      kind=\"neutral\"\n      icon=\"${ifDefined(this.icon)}\"\n      role=\"menuitem\"\n      @click=\"${this._handleClick}\"\n      ><slot></slot>\n    </bl-button>`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    [blDropdownItemTag]: BlDropdownItem;\n  }\n}\n"],
+  "mappings": "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",
   "names": ["styles", "i", "bl_dropdown_default", "blDropdownTag", "BlDropdown", "s", "event", "eventPath", "bl_dropdown_default", "P", "z", "b", "O", "args", "x", "y", "blDropdownItemTag", "popoverClasses", "o", "__decorateClass", "i", "t", "e", "styles", "i", "bl_dropdown_item_default", "blDropdownItemTag", "BlDropdownItem", "s", "bl_dropdown_item_default", "blDropdownGroupTag", "blDropdownTag", "y", "__decorateClass", "e", "event", "i"]
 }

package/dist/{chunk-FHOMHSA6.js → chunk-CMIFBOTH.js}

@@ -1,4 +1,4 @@
-import{b as z}from"./chunk-L3EQLCFT.js";import{a as $}from"./chunk-EPJ347EQ.js";import{a as w}from"./chunk-DJOD4BTL.js";import{a as x}from"./chunk-OLPYXE2P.js";import{a as n}from"./chunk-KPAWUBRO.js";import{a as m,b as f,c as y}from"./chunk-RLMJN536.js";import{a as c}from"./chunk-23UFIOHV.js";import{a as p,b as s,c as u,f as v,g,h as a,i as h,j as b}from"./chunk-57PTZNIL.js";import{a as e}from"./chunk-NZ3RGSR6.js";var k=f(class extends y{constructor(o){var l;if(super(o),o.type!==m.ATTRIBUTE||o.name!=="style"||((l=o.strings)===null||l===void 0?void 0:l.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(o){return Object.keys(o).reduce((l,r)=>{let i=o[r];return i==null?l:l+`${r=r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${i};`},"")}update(o,[l]){let{style:r}=o.element;if(this.vt===void 0){this.vt=new Set;for(let i in l)this.vt.add(i);return this.render(l)}this.vt.forEach(i=>{l[i]==null&&(this.vt.delete(i),i.includes("-")?r.removeProperty(i):r[i]="")});for(let i in l){let d=l[i];d!=null&&(this.vt.add(i),i.includes("-")?r.setProperty(i,d):r[i]=d)}return u}});var V=p`:host{display:inline-block;width:200px;position:relative}.wrapper{--row-count:1;--maxrow-count:;--line-height:var(--bl-font-title-3-line-height);--scroll-height:var(--line-height);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--border-size:1px;--default-scroll-height:calc((var(--row-count) * var(--line-height)) + var(--padding-vertical));--height:max(var(--scroll-height),var(--default-scroll-height));--input-font:var(--bl-font-body-text-2);--border-radius:var(--bl-size-3xs);--border-color:var(--bl-color-border);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.input-wrapper{border:solid var(--border-size) var(--border-color);border-radius:var(--border-radius);padding-top:var(--padding-vertical);display:flex;box-sizing:border-box}textarea{width:100%;align-self:stretch;outline:0;font:var(--input-font);padding:0 calc(var(--padding-horizontal) - var(--border-size));padding-bottom:var(--padding-vertical);margin:0;border:0;border-radius:var(--border-radius);color:var(--bl-color-content-primary);resize:vertical;display:block}:host([size='large']) .wrapper{--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--input-font:var(--bl-font-body-text-3);--line-height:var(--bl-font-title-4-line-height)}textarea:disabled{background-color:var(--bl-color-secondary-background);color:var(--bl-color-content-tertiary);cursor:not-allowed}:host([disabled]) .wrapper{background-color:var(--bl-color-secondary-background)}:host([expand]) textarea{overflow:hidden;resize:none;height:var(--height)}:host([expand][max-rows]) textarea{--maxrow-height:calc((var(--maxrow-count) * var(--line-height)) + var(--padding-vertical));overflow-y:scroll;height:min(var(--height),var(--maxrow-height))}.wrapper:focus-within{--border-color:var(--bl-color-primary)}.dirty.max-len-invalid,.dirty.invalid{--border-color:var(--bl-color-danger)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0;max-width:max-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-content-primary-contrast);pointer-events:initial}:host ::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);background-color:initial;padding:0}.hint{display:none;font:var(--bl-font-body-text-3)}:host([character-counter]) .hint,:host([help-text]) .hint,.dirty.invalid .hint{display:flex;gap:var(--bl-size-3xs)}.hint>*{margin:0;padding:0}.help-text,.invalid-text{flex:1}.counter-text{color:var(--bl-color-content-secondary);margin-left:auto}:where(.max-len-invalid,.dirty.invalid) .hint>.counter-text{color:var(--bl-color-danger)}.dirty.invalid label{color:var(--bl-color-danger)}.invalid-text{display:none;color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:where(.dirty.max-len-invalid,.dirty.invalid) .hint>.invalid-text{display:inline-block}.dirty.invalid .hint>.help-text{display:none}`,C=V;var t=class extends w(v){constructor(){super(...arguments);this.name="";this.required=!1;this.disabled=!1;this.expand=!1;this.size="medium";this.labelFixed=!1;this.characterCounter=!1;this.value="";this.rows=4;this.autofocus=!1;this.spellchecker="false";this.customScrollHeight=null;this.inputId=Math.random().toString(36).substring(2);this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1}static get styles(){return[C]}connectedCallback(){var r;super.connectedCallback(),(r=this.internals.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}inputHandler(r){this.autoResize();let i=r.target.value;this.value=i,this.onInput(i)}changeHandler(r){let i=r.target.value;this.dirty=!0,this.value=i,this.onChange(i)}firstUpdated(){this.setValue(this.value),this.autoResize()}async updated(r){r.has("rows")&&this.autoResize(),r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(r){this.value=r}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}autoResize(){if(!this.expand)return;this.validationTarget.style.height="auto";let r=this.validationTarget.scrollHeight;this.customScrollHeight=`${r}px`,this.validationTarget.style.removeProperty("height")}render(){let r=this.internals.validity.tooLong,i=this.checkValidity()?"":s`<p class="invalid-text">${this.validationMessage}</p>`,d=this.helpText?s`<p class="help-text">${this.helpText}</p>`:"",S=this.label?s`<label for="${this.inputId}">${this.label}</label>`:"",E=this.characterCounter&&this.maxlength?`${this.value.length}/${this.maxlength}`:this.characterCounter?`${this.value.length}`:"",M=this.characterCounter?s`<p class="counter-text">${E}</p>`:"",H={wrapper:!0,"has-value":this.value!==null&&this.value!=="",dirty:this.dirty,"max-len-invalid":r,invalid:!this.checkValidity()},R={"--row-count":`${this.rows}`,"--maxrow-count":this.maxRows?`${this.maxRows}`:null,"--scroll-height":this.customScrollHeight};return s`
+import{b as z}from"./chunk-XQN3H7RG.js";import{a as $}from"./chunk-EPJ347EQ.js";import{a as w}from"./chunk-DJOD4BTL.js";import{a as x}from"./chunk-OLPYXE2P.js";import{a as n}from"./chunk-KPAWUBRO.js";import{a as m,b as f,c as y}from"./chunk-RLMJN536.js";import{a as c}from"./chunk-23UFIOHV.js";import{a as p,b as s,c as u,f as v,g,h as a,i as h,j as b}from"./chunk-57PTZNIL.js";import{a as e}from"./chunk-NZ3RGSR6.js";var k=f(class extends y{constructor(o){var l;if(super(o),o.type!==m.ATTRIBUTE||o.name!=="style"||((l=o.strings)===null||l===void 0?void 0:l.length)>2)throw Error("The `styleMap` directive must be used in the `style` attribute and must be the only part in the attribute.")}render(o){return Object.keys(o).reduce((l,r)=>{let i=o[r];return i==null?l:l+`${r=r.replace(/(?:^(webkit|moz|ms|o)|)(?=[A-Z])/g,"-$&").toLowerCase()}:${i};`},"")}update(o,[l]){let{style:r}=o.element;if(this.vt===void 0){this.vt=new Set;for(let i in l)this.vt.add(i);return this.render(l)}this.vt.forEach(i=>{l[i]==null&&(this.vt.delete(i),i.includes("-")?r.removeProperty(i):r[i]="")});for(let i in l){let d=l[i];d!=null&&(this.vt.add(i),i.includes("-")?r.setProperty(i,d):r[i]=d)}return u}});var V=p`:host{display:inline-block;width:200px;position:relative}.wrapper{--row-count:1;--maxrow-count:;--line-height:var(--bl-font-title-3-line-height);--scroll-height:var(--line-height);--padding-vertical:var(--bl-size-2xs);--padding-horizontal:var(--bl-size-xs);--border-size:1px;--default-scroll-height:calc((var(--row-count) * var(--line-height)) + var(--padding-vertical));--height:max(var(--scroll-height),var(--default-scroll-height));--input-font:var(--bl-font-body-text-2);--border-radius:var(--bl-size-3xs);--border-color:var(--bl-color-border);display:flex;flex-direction:column;position:relative;gap:var(--bl-size-3xs)}.input-wrapper{border:solid var(--border-size) var(--border-color);border-radius:var(--border-radius);padding-top:var(--padding-vertical);display:flex;box-sizing:border-box}textarea{width:100%;align-self:stretch;outline:0;font:var(--input-font);padding:0 calc(var(--padding-horizontal) - var(--border-size));padding-bottom:var(--padding-vertical);margin:0;border:0;border-radius:var(--border-radius);color:var(--bl-color-content-primary);resize:vertical;display:block}:host([size='large']) .wrapper{--padding-vertical:var(--bl-size-xs);--padding-horizontal:var(--bl-size-m)}:host([size='small']) .wrapper{--padding-vertical:var(--bl-size-3xs);--padding-horizontal:var(--bl-size-xs);--input-font:var(--bl-font-body-text-3);--line-height:var(--bl-font-title-4-line-height)}textarea:disabled{background-color:var(--bl-color-secondary-background);color:var(--bl-color-content-tertiary);cursor:not-allowed}:host([disabled]) .wrapper{background-color:var(--bl-color-secondary-background)}:host([expand]) textarea{overflow:hidden;resize:none;height:var(--height)}:host([expand][max-rows]) textarea{--maxrow-height:calc((var(--maxrow-count) * var(--line-height)) + var(--padding-vertical));overflow-y:scroll;height:min(var(--height),var(--maxrow-height))}.wrapper:focus-within{--border-color:var(--bl-color-primary)}.dirty.max-len-invalid,.dirty.invalid{--border-color:var(--bl-color-danger)}:host([label]) ::placeholder{color:transparent;transition:color ease-out .4s}label{position:absolute;top:var(--padding-vertical);left:var(--padding-horizontal);right:var(--padding-horizontal);transition:all ease-in .2s;pointer-events:none;font:var(--bl-font-title-3-regular);color:var(--bl-color-content-tertiary);padding:0;max-width:max-content;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}:where(.wrapper:focus-within,.wrapper.has-value) label{--label-padding:var(--bl-size-3xs);top:0;left:calc(var(--padding-horizontal) - var(--label-padding));transform:translateY(-50%);font:var(--bl-font-caption);color:var(--bl-color-content-secondary);padding:0 var(--label-padding);background-color:var(--bl-color-content-primary-contrast);pointer-events:initial}:host ::placeholder,:host([label-fixed]) ::placeholder{color:var(--bl-color-content-tertiary)}:host([label-fixed]) label{position:static;transition:none;transform:none;pointer-events:initial;font:var(--bl-font-caption);color:var(--bl-color-content-secondary);background-color:initial;padding:0}.hint{display:none;font:var(--bl-font-body-text-3)}:host([character-counter]) .hint,:host([help-text]) .hint,.dirty.invalid .hint{display:flex;gap:var(--bl-size-3xs)}.hint>*{margin:0;padding:0}.help-text,.invalid-text{flex:1}.counter-text{color:var(--bl-color-content-secondary);margin-left:auto}:where(.max-len-invalid,.dirty.invalid) .hint>.counter-text{color:var(--bl-color-danger)}.dirty.invalid label{color:var(--bl-color-danger)}.invalid-text{display:none;color:var(--bl-color-danger)}.help-text{color:var(--bl-color-content-secondary)}:where(.dirty.max-len-invalid,.dirty.invalid) .hint>.invalid-text{display:inline-block}.dirty.invalid .hint>.help-text{display:none}`,C=V;var t=class extends w(v){constructor(){super(...arguments);this.name="";this.required=!1;this.disabled=!1;this.expand=!1;this.size="medium";this.labelFixed=!1;this.characterCounter=!1;this.value="";this.rows=4;this.autofocus=!1;this.spellchecker="false";this.customScrollHeight=null;this.inputId=Math.random().toString(36).substring(2);this.onError=()=>{this.onInvalid(this.internals.validity)};this.dirty=!1}static get styles(){return[C]}connectedCallback(){var r;super.connectedCallback(),(r=this.internals.form)==null||r.addEventListener("submit",()=>{this.reportValidity()})}inputHandler(r){this.autoResize();let i=r.target.value;this.value=i,this.onInput(i)}changeHandler(r){let i=r.target.value;this.dirty=!0,this.value=i,this.onChange(i)}firstUpdated(){this.setValue(this.value),this.autoResize()}async updated(r){r.has("rows")&&this.autoResize(),r.has("value")&&(this.setValue(this.value),await this.validationComplete,this.requestUpdate())}reportValidity(){return this.dirty=!0,this.checkValidity()}valueChangedCallback(r){this.value=r}validityCallback(){var r;return this.customInvalidText||((r=this.validationTarget)==null?void 0:r.validationMessage)}autoResize(){if(!this.expand)return;this.validationTarget.style.height="auto";let r=this.validationTarget.scrollHeight;this.customScrollHeight=`${r}px`,this.validationTarget.style.removeProperty("height")}render(){let r=this.internals.validity.tooLong,i=this.checkValidity()?"":s`<p class="invalid-text">${this.validationMessage}</p>`,d=this.helpText?s`<p class="help-text">${this.helpText}</p>`:"",S=this.label?s`<label for="${this.inputId}">${this.label}</label>`:"",E=this.characterCounter&&this.maxlength?`${this.value.length}/${this.maxlength}`:this.characterCounter?`${this.value.length}`:"",M=this.characterCounter?s`<p class="counter-text">${E}</p>`:"",H={wrapper:!0,"has-value":this.value!==null&&this.value!=="",dirty:this.dirty,"max-len-invalid":r,invalid:!this.checkValidity()},R={"--row-count":`${this.rows}`,"--maxrow-count":this.maxRows?`${this.maxRows}`:null,"--scroll-height":this.customScrollHeight};return s`
       <div style=${k(R)} class=${x(H)}>
         ${S}
         <div class="input-wrapper">
@@ -33,4 +33,4 @@ lit-html/directives/style-map.js:
    * SPDX-License-Identifier: BSD-3-Clause
    *)
 */
-//# sourceMappingURL=chunk-FHOMHSA6.js.map
+//# sourceMappingURL=chunk-CMIFBOTH.js.map