@crowdstrike/glide-core 0.17.1 → 0.19.0

package/dist/dropdown.js

@@ -1,31 +1,31 @@
-var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(l<3?o(n):l>3?o(t,i,n):o(t,i))||n);return l>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./dropdown.option.js";import"./icon-button.js";import"./label.js";import"./tooltip.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import GlideCoreDropdownOption from"./dropdown.option.js";import GlideCoreTag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import ow,{owSlotType}from"./library/ow.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.open&&e?this.#t():this.open&&this.#i()}get filterable(){return this.#s}set filterable(e){this.#s!==e&&e&&!this.multiple?this.#o.value&&this.selectedOptions.length>0&&(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.#s!==e&&this.#l(),this.#s=e}get open(){return this.#n}set open(e){const t=e!==this.#n;if(this.#n=e,e&&t&&!this.disabled)return this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(!this.open&&t){if(!this.multiple&&this.#o.value&&this.selectedOptions.length>0){this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isFiltering=!1,this.isNoResults=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value);for(const e of this.#a)e.hidden=!1}this.#t(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}}get size(){return this.#r}set size(e){if(this.#r=e,this.#p)for(const t of this.#p)t.privateSize=e}get multiple(){return this.#d}set multiple(e){const t=this.#d&&!e,i=!this.#d&&e;this.#d=e,this.isShowSingleSelectIcon=!1;for(const i of this.#a)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.#o.value&&(this.#o.value.value=""),this.lastSelectedOption.privateUpdateCheckbox(),this.#h())}get value(){return this.#c}set value(e){this.#c=e,ow(this.multiple||!this.multiple&&e.length<=1,ow.boolean.true.message("Only one value is allowed when not `multiple`.")),this.#u=!0;for(const t of this.#a)t.selected=e.some((e=>e&&e===t.value));this.#u=!1}get activeOption(){return this.#p?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#v.checkValidity();return this.isCheckingValidity=!1,e}click(){this.filterable||this.isFilterable?(this.#o.value?.click(),this.#o.value?.select()):this.#m.value?.click()}get selectedOptions(){return this.#a.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#a.findLast((e=>e.selected))}get isAllSelected(){return this.#a.filter((({selected:e})=>e)).length===this.#a.filter((({disabled:e})=>!e)).length}get isSomeSelected(){return this.#a.some((({selected:e})=>e))}get internalLabel(){const e=this.filterable||this.isFilterable;return e||0!==this.selectedOptions.length?this.multiple||e||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#f,{capture:!0})}createRenderRoot(){return this.#g=super.createRenderRoot(),this.#g}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#b),document.removeEventListener("click",this.#f,{capture:!0})}async filter(e){return this.#a.filter((({label:t})=>t.toLowerCase().includes(e.toLowerCase().trim())))}firstUpdated(){if(owSlotType(this.#O.value,[GlideCoreDropdownOption,Text]),this.#E.value&&(this.#E.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedOption&&this.#o.value&&(this.#o.value.value=this.lastSelectedOption.label),this.#w.value){new ResizeObserver((()=>{this.#h()})).observe(this.#w.value)}if(this.#y.value){new ResizeObserver((()=>{this.#y.value&&(this.isInternalLabelOverflow=this.#y.value.scrollWidth>this.#y.value.clientWidth)})).observe(this.#y.value)}if(this.#o.value){new ResizeObserver((()=>{this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)})).observe(this.#o.value)}}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#m.value?.focus(e)}get form(){return this.#v.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#v.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value),this.#v.validity):this.required&&this.#v.validity.valueMissing&&this.selectedOptions.length>0?(this.#v.setValidity({}),this.#v.validity):this.#v.validity}get willValidate(){return this.#v.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#b)}formResetCallback(){for(const e of this.#a){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#a.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#c=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div
+var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length,n=l<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,s);else for(var a=e.length-1;a>=0;a--)(o=e[a])&&(n=(l<3?o(n):l>3?o(t,i,n):o(t,i))||n);return l>3&&n&&Object.defineProperty(t,i,n),n};import"./checkbox.js";import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreDropdownOption from"./dropdown.option.js";import{LocalizeController}from"./library/localize.js";import GlideCoreTag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreDropdown=class GlideCoreDropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#e}set disabled(e){this.#e=e,this.open&&e?this.#t():this.open&&this.#i()}get filterable(){return this.#s}set filterable(e){this.#s!==e&&e&&!this.multiple?this.#o.value&&this.selectedOptions.length>0&&(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.#s!==e&&this.#l(),this.#s=e}get open(){return this.#n}set open(e){const t=e!==this.#n;if(this.#n=e,e&&t&&!this.disabled)return this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(!this.open&&t){!this.multiple&&this.#o.value&&this.selectedOptions.length>0?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label):(!this.multiple&&this.#o.value&&0===this.selectedOptions.length||this.multiple&&this.#o.value)&&(this.#o.value.value="",this.inputValue=""),this.isFiltering=!1,this.isNoResults=!1,this.isShowSingleSelectIcon=Boolean(this.selectedOptions.at(0)?.value);for(const e of this.#a)e.hidden=!1;this.#t(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}}get size(){return this.#r}set size(e){if(this.#r=e,this.#p)for(const t of this.#p)t.privateSize=e}get multiple(){return this.#d}set multiple(e){const t=this.#d&&!e,i=!this.#d&&e;this.#d=e,this.isShowSingleSelectIcon=!1;for(const i of this.#a)i.privateMultiple=e,t&&i!==this.lastSelectedOption&&(i.selected=!1);t&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.#o.value&&(this.#o.value.value=""),this.lastSelectedOption.privateUpdateCheckbox(),this.#h())}get value(){return this.#c}set value(e){if(this.#c=e,!this.multiple&&e.length>1)throw new Error("Only one value is allowed when not `multiple`.");this.#u=!0;for(const t of this.#a)t.selected=e.some((e=>e&&e===t.value));this.#u=!1}get activeOption(){return this.#p?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#v.checkValidity();return this.isCheckingValidity=!1,e}click(){this.filterable||this.isFilterable?(this.#o.value?.click(),this.#o.value?.select()):this.#m.value?.click()}get selectedOptions(){return this.#a.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#a.findLast((e=>e.selected))}get isAllSelected(){return this.#a.length>0&&this.#a.filter((({selected:e})=>e)).length===this.#a.filter((({disabled:e})=>!e)).length}get isSomeSelected(){return this.#a.some((({selected:e})=>e))}get internalLabel(){const e=this.filterable||this.isFilterable;return e||0!==this.selectedOptions.length?this.multiple||e||!this.selectedOptions.at(-1)?.label?"":this.selectedOptions.at(-1)?.label:this.placeholder}connectedCallback(){super.connectedCallback(),document.addEventListener("click",this.#f,{capture:!0})}createRenderRoot(){return this.#g=super.createRenderRoot(),this.#g}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#b),document.removeEventListener("click",this.#f,{capture:!0})}async filter(e){return this.#a.filter((({label:t})=>t.toLowerCase().includes(e.toLowerCase().trim())))}firstUpdated(){if(this.#O.value&&(this.#O.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedOption&&this.#o.value&&(this.#o.value.value=this.lastSelectedOption.label),this.#E.value){new ResizeObserver((()=>{this.#h()})).observe(this.#E.value)}if(this.#y.value){new ResizeObserver((()=>{this.#y.value&&(this.isInternalLabelOverflow=this.#y.value.scrollWidth>this.#y.value.clientWidth)})).observe(this.#y.value)}if(this.#o.value){new ResizeObserver((()=>{this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth-1>this.#o.value.clientWidth)})).observe(this.#o.value)}}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#m.value?.focus(e)}get form(){return this.#v.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#v.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value),this.#v.validity):this.required&&this.#v.validity.valueMissing&&this.selectedOptions.length>0?(this.#v.setValidity({}),this.#v.validity):this.#v.validity}get willValidate(){return this.#v.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#b)}formResetCallback(){for(const e of this.#a){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#a.filter((e=>e.hasAttribute("selected"))),t=e.at(-1)?.value;this.#c=this.multiple&&e.length>0?e.map((({value:e})=>e)):!this.multiple&&t?[t]:[]}render(){return html`<div
       class=${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}
-      @mouseup=${this.#R}
-      ${ref(this.#w)}
+      @mouseup=${this.#w}
+      ${ref(this.#E)}
     >
       <glide-core-private-label
         orientation=${this.orientation}
         split=${ifDefined(this.privateSplit??void 0)}
+        tooltip=${ifDefined(this.tooltip)}
         ?disabled=${this.disabled}
-        ?error=${this.#A}
+        ?error=${this.#R}
         ?hide=${this.hideLabel}
         ?required=${this.required}
       >
         <label for="primary-button" id="label"> ${this.label} </label>
-        <slot name="tooltip" slot="tooltip"></slot>
 
         <div
           class="dropdown-and-options"
           slot="control"
-          @focusin=${this.#C}
-          @focusout=${this.#S}
-          @keydown=${this.#$}
+          @focusin=${this.#A}
+          @focusout=${this.#C}
+          @keydown=${this.#S}
         >
           <div
-            class=${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#A,readonly:this.readonly,multiple:this.multiple})}
-            @click=${this.#I}
-            @mousedown=${this.#D}
-            ${ref(this.#F)}
+            class=${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#R,readonly:this.readonly,multiple:this.multiple})}
+            @click=${this.#$}
+            @mousedown=${this.#I}
+            ${ref(this.#D)}
           >
             <span class="selected-option-labels" id="selected-option-labels">
               ${this.selectedOptions.map((({label:e})=>html`<span data-test="selected-option-label">
@@ -51,8 +51,8 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
                         size=${this.size}
                         ?disabled=${this.disabled||this.readonly}
                         ?private-editable=${t}
-                        @edit=${this.#T}
-                        @remove=${this.#L.bind(this,e)}
+                        @edit=${this.#F}
+                        @remove=${this.#T.bind(this,e)}
                       >
                         ${when(s,(()=>html`
                             <slot
@@ -72,12 +72,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
 
             <glide-core-tooltip
               class=${classMap({"input-tooltip":!0,visible:this.filterable||this.isFilterable})}
+              data-test="input-tooltip"
+              label=${this.inputValue}
               offset=${8}
               ?disabled=${this.open||!this.isInputOverflow}
               ?open=${!this.open&&this.isInputTooltipOpen}
+              @toggle=${this.#_}
+              screenreader-hidden
             >
-              <div aria-hidden="true">${this.inputValue}</div>
-
               <div class="input-container" slot="target">
                 <input
                   aria-activedescendant=${this.ariaActivedescendant}
@@ -96,18 +98,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
                   tabindex=${this.disabled?"-1":"0"}
                   ?disabled=${this.disabled}
                   ?readonly=${this.readonly}
-                  @blur=${this.#_}
+                  @blur=${this.#L}
                   @focus=${this.#B}
-                  @input=${this.#G}
-                  @keydown=${this.#V}
+                  @input=${this.#V}
+                  @keydown=${this.#G}
                   ${ref(this.#o)}
                 />
 
-                ${when(!this.multiple&&this.isInputOverflow&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span
-                      aria-hidden="true"
-                      class="ellipsis"
-                      data-test="ellipsis"
-                    >
+                ${when(!this.multiple&&this.isInputOverflow&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span aria-hidden="true" data-test="ellipsis">
                       …
                     </span>`))}
 
@@ -123,12 +121,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
 
             <glide-core-tooltip
               class=${classMap({"internal-label-tooltip":!0,visible:Boolean(this.internalLabel)})}
+              data-test="internal-label-tooltip"
+              label=${ifDefined(this.internalLabel)}
               offset=${8}
               ?disabled=${this.open||this.multiple||this.filterable||this.isFilterable||!this.isInternalLabelOverflow}
               ?open=${!this.open&&this.isInternalLabelTooltipOpen}
+              @toggle=${this.#_}
+              screenreader-hidden
             >
-              <div aria-hidden="true">${this.internalLabel}</div>
-
               <div
                 class="internal-label"
                 data-test="internal-label"
@@ -195,7 +195,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
           <div
             aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
             class="options-and-footer"
-            ${ref(this.#E)}
+            ${ref(this.#O)}
           >
             <div
               aria-labelledby=${this.filterable||this.isFilterable?"input":"button"}
@@ -226,9 +226,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
               ></glide-core-dropdown-option>
 
               <slot
-                class="options-slot"
+                class="default-slot"
                 @slotchange=${this.#Z}
-                ${ref(this.#O)}
+                ${assertSlot([GlideCoreDropdownOption,Text])}
+                ${ref(this.#ee)}
               ></slot>
             </div>
 
@@ -243,10 +244,10 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
                 class=${classMap({"add-button":!0,[this.size]:!0})}
                 data-test="add-button"
                 type="button"
-                @click=${this.#ee}
-                @focusin=${this.#te}
-                @mouseover=${this.#ie}
-                ${ref(this.#se)}
+                @click=${this.#te}
+                @focusin=${this.#ie}
+                @mouseover=${this.#se}
+                ${ref(this.#oe)}
               >
                 ${icons.plus} ${this.addButtonLabel}
               </button>
@@ -256,15 +257,15 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
 
         <div id="description" slot="description">
           <slot
-            class=${classMap({description:!0,hidden:Boolean(this.#A&&this.validityMessage)})}
+            class=${classMap({description:!0,hidden:Boolean(this.#R&&this.validityMessage)})}
             name="description"
           ></slot>
-          ${when(this.#A&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+          ${when(this.#R&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
                 >${unsafeHTML(this.validityMessage)}</span
               >`))}
         </div>
       </glide-core-private-label>
-    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#v.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#v.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#o.value:this.#m.value):this.#v.setValidity({customError:!0,valueMissing:this.#v.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}setValidity(e,t){this.validityMessage=t,this.#v.setValidity(e," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.inputValue="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInputOverflow=!1,this.isInputTooltipOpen=!1,this.isInternalLabelOverflow=!1,this.isInternalLabelTooltipOpen=!1,this.isNoResults=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#se=createRef(),this.#w=createRef(),this.#O=createRef(),this.#F=createRef(),this.#N=createRef(),this.#o=createRef(),this.#y=createRef(),this.#oe=!1,this.#e=!1,this.#le=!1,this.#s=!1,this.#d=!1,this.#n=!1,this.#ne=!1,this.#ae=!1,this.#re=!1,this.#pe=!1,this.#u=!1,this.#M=new LocalizeController(this),this.#E=createRef(),this.#m=createRef(),this.#Y=createRef(),this.#r="large",this.#k=createRef(),this.#c=[],this.#f=()=>{this.#oe?setTimeout((()=>{this.#oe=!1})):this.open=!1},this.#b=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#v=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#se;#de;#w;#O;#F;#N;#o;#y;#v;#oe;#e;#le;#s;#d;#n;#ne;#ae;#re;#pe;#u;#M;#E;#he;#m;#Y;#g;#r;#k;#c;#f;#b;#t(){this.#de?.(),this.#E.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#he=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#A(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#ee(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#te(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#he=this.activeOption,this.activeOption.privateActive=!1)}#ie(){this.activeOption&&!this.#ne&&(this.#he=this.activeOption,this.activeOption.privateActive=!1)}#R(){this.#oe=!0}#Z(){owSlotType(this.#O.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#a.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#a)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#ce?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#he=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#he=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#Y.value&&(this.#Y.value.selected=this.isAllSelected),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),this.updateComplete.then((()=>{!this.multiple&&this.#o.value&&this.lastSelectedOption?.value&&(this.#o.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)}))}#C(e){this.open&&this.#he&&e.relatedTarget===this.#se.value&&(this.#he.privateActive=!0,this.#he.privateIsTooltipOpen=!this.#he.editable)}#S(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#le&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#$(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#N.value)return void(this.#oe=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#se.value)return this.focus(),void(this.#he&&(this.#he.privateActive=!0,this.#he.privateIsEditActive=this.#he.editable,this.#he.privateIsTooltipOpen=!this.#he.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#se.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#ue?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#he=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#se.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#se.value&&this.focus());const t=e.target===this.#m.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key))return e.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.activeOption.privateIsEditActive)return this.activeOption.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),void(this.open=!1);if("Enter"===e.key&&this.#ue&&this.#ue.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#pe=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#Y.value&&this.#ve(),this.#pe=!1,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const t=this.#ce?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#ce&&"number"==typeof t){e.preventDefault();const i=this.#ce.findLast(((e,i)=>!e.disabled&&i<t));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&0!==t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#he=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#ce&&"number"==typeof t){e.preventDefault();const i=this.#ce.find(((e,i)=>!e.disabled&&i>t));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#he=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#ce){e.preventDefault();const t=[...this.#ce].reverse().findLast((e=>!e.disabled));return void(t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#he=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#ce){e.preventDefault();const t=[...this.#ce].findLast((e=>!e.disabled));return void(t&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#he=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#I(e){if(this.disabled||this.readonly)return;if(this.#le)return void(this.#le=!1);if(e.target instanceof Node&&this.#N.value?.contains(e.target))return void this.selectedOptions[0].dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}));const t=this.filterable||this.isFilterable;if(this.#pe||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#ne=!0,void setTimeout((()=>{this.#ne=!1}))):void 0;this.open=!1}#D(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#o.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}#z(){this.open=!1}get#a(){return this.#O.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#p(){const e=this.#O.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#Y.value)return[this.#Y.value,...e]}get#ue(){return this.#O.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#ce(){const e=this.#O.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#Y.value&&!this.#Y.value.hidden&&e?[this.#Y.value,...e]:e}#_(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#B(){this.#o.value?.select(),this.isInputTooltipOpen=!0}async#G(e){let t;ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,this.inputValue=this.#o.value.value,this.multiple&&""!==this.#o.value.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#o.value.value&&this.#o.value.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1;try{t=await this.filter(this.#o.value.value)}catch{}if(t){for(const e of this.#a)e.hidden=!t.includes(e);const e=this.#ue?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#he=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#ue||0===this.#ue.length,this.isCommunicateItemCountToScreenreaders=!0,this.#ue&&(this.itemCount=this.#ue.length)}}#V(e){const t=this.selectedOptions.findLast(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#le=!0,t.selected=!1,void(this.#le=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart){this.#le=!0;for(const e of i)e.selected=!1;this.#le=!1}else;}#H(e){e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#Y.value&&this.#ve(),this.#l()}#q(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");if(t instanceof GlideCoreDropdownOption&&t.disabled)return;if(t instanceof GlideCoreDropdownOption&&t.privateIsEditActive)return t.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),void(this.open=!1);if(t&&!t.selected)return t.selected=!0,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#K(){this.requestUpdate()}#U(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#he=e.target)}#J(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))):(this.filterable||this.isFilterable)&&this.#o.value?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.requestUpdate())}#P(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#W(e){if(e.target instanceof GlideCoreDropdownOption&&this.#ce){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#he=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#se.value&&this.focus()}}#Q(e){e.target!==this.#Y.value&&!this.#re&&this.#Y.value&&(this.#Y.value.selected=this.isAllSelected),this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple&&!this.#u?(this.#c=e.target.selected&&e.target.value&&!e.target.disabled?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#o.value&&!this.#le&&(this.isFiltering=!1,this.#o.value.value="",this.inputValue="")):this.multiple||!e.target.selected||e.target.disabled||(this.#c=e.target.value?[e.target.value]:[],this.#o.value&&(this.isFiltering=!1,this.#o.value.value=e.target.label,this.inputValue=e.target.label))),this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))}#X(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.detail.new?this.#c=this.value.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#c=this.value.filter((t=>t!==e.detail.old)):e.target instanceof GlideCoreDropdownOption&&(this.#c=e.detail.new?[e.detail.new]:[])}#j(){this.isInternalLabelTooltipOpen=!0}#x(){this.isInternalLabelTooltipOpen=!1}#T(){this.#le=!0,this.open=!1}async#L(e){this.#le=!0;for(const t of this.#a)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#k.value?.querySelectorAll("glide-core-tag");if(t&&this.selectedOptions.length>0){const i=[...t].findIndex((t=>t.dataset.id===e)),s=t[i<t.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#le=!1}))}else setTimeout((()=>{this.focus(),this.#le=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#ve(){ow(this.#Y.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#re=!0;for(const e of this.#a)e.selected=this.#Y.value.selected&&!e.disabled;this.#re=!1}async#h(){if(this.#w.value){const e=this.#w.value.scrollWidth>this.#w.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#h()):!e&&!this.#ae&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ae=!0,await this.updateComplete,this.#h()):this.#ae=!1}}#i(){this.#de?.(),this.#he&&(this.#he.privateActive=!0,this.ariaActivedescendant=this.#he.id),this.#F.value&&this.#E.value&&(this.#de=autoUpdate(this.#F.value,this.#E.value,(()=>{(async()=>{if(this.#F.value&&this.#E.value){const{x:e,y:t,placement:i}=await computePosition(this.#F.value,this.#E.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#E.value.dataset.placement=i,Object.assign(this.#E.value.style,{left:`${e}px`,top:`${t}px`}),this.#E.value?.showPopover()}})()})))}#l(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({attribute:"add-button-label",reflect:!0})],GlideCoreDropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"inputValue",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isNoResults",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],GlideCoreDropdown.prototype,"itemCount",void 0),__decorate([state()],GlideCoreDropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"validityMessage",void 0),GlideCoreDropdown=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;const icons={plus:html`
+    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#v.reportValidity();return this.requestUpdate(),e}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(e){this.validityMessage=e,""===e?this.#v.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#o.value:this.#m.value):this.#v.setValidity({customError:!0,valueMissing:this.#v.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}setValidity(e,t){this.validityMessage=t,this.#v.setValidity(e," ",this.filterable||this.isFilterable?this.#o.value:this.#m.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.version=packageJson.version,this.ariaActivedescendant="",this.inputValue="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInputOverflow=!1,this.isInputTooltipOpen=!1,this.isInternalLabelOverflow=!1,this.isInternalLabelTooltipOpen=!1,this.isNoResults=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#oe=createRef(),this.#E=createRef(),this.#ee=createRef(),this.#D=createRef(),this.#N=createRef(),this.#o=createRef(),this.#y=createRef(),this.#le=!1,this.#e=!1,this.#ne=!1,this.#s=!1,this.#d=!1,this.#n=!1,this.#ae=!1,this.#re=!1,this.#pe=!1,this.#de=!1,this.#u=!1,this.#M=new LocalizeController(this),this.#O=createRef(),this.#m=createRef(),this.#Y=createRef(),this.#r="large",this.#k=createRef(),this.#c=[],this.#f=()=>{this.#le?setTimeout((()=>{this.#le=!1})):this.open=!1},this.#b=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#v=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#oe;#he;#E;#ee;#D;#N;#o;#y;#v;#le;#e;#ne;#s;#d;#n;#ae;#re;#pe;#de;#u;#M;#O;#ce;#m;#Y;#g;#r;#k;#c;#f;#b;#t(){this.#he?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#ce=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#R(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#te(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#ie(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#ce=this.activeOption,this.activeOption.privateActive=!1)}#se(){this.activeOption&&!this.#ae&&(this.#ce=this.activeOption,this.activeOption.privateActive=!1)}#w(){this.#le=!0}async#Z(){this.isFilterable=this.#a.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#a)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#ue?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#ce=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#ce=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#Y.value&&(this.#Y.value.selected=this.isAllSelected),this.multiple?this.#c=this.selectedOptions.filter((e=>Boolean(e.value))).map((({value:e})=>e)):this.lastSelectedOption?.value&&(this.#c=[this.lastSelectedOption.value]),this.requestUpdate(),await this.updateComplete,!this.multiple&&this.#o.value&&this.lastSelectedOption?.value&&(this.#o.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)}#A(e){this.open&&this.#ce&&e.relatedTarget===this.#oe.value&&(this.#ce.privateActive=!0,this.#ce.privateIsTooltipOpen=!this.#ce.editable)}#C(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#g?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#ne&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#S(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#N.value)return void(this.#le=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#g?.activeElement===this.#oe.value)return this.focus(),void(this.#ce&&(this.#ce.privateActive=!0,this.#ce.privateIsEditActive=this.#ce.editable,this.#ce.privateIsTooltipOpen=!this.#ce.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#g?.activeElement===this.#oe.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#ve?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#ce=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#oe.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#g?.activeElement===this.#oe.value&&this.focus());const t=e.target===this.#m.value||e.target===this.#o.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key))return e.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.activeOption.privateIsEditActive)return this.activeOption.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),void(this.open=!1);if("Enter"===e.key&&this.#ve&&this.#ve.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#de=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#Y.value&&this.#me(),this.#de=!1,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const t=this.#ue?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#ue&&"number"==typeof t){e.preventDefault();const i=this.#ue.findLast(((e,i)=>!e.disabled&&i<t));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&0!==t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#ce=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#ue&&"number"==typeof t){e.preventDefault();const i=this.#ue.find(((e,i)=>!e.disabled&&i>t));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#ce=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#ue){e.preventDefault();const t=[...this.#ue].reverse().findLast((e=>!e.disabled));return void(t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#ce=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#ue){e.preventDefault();const t=[...this.#ue].findLast((e=>!e.disabled));return void(t&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#ce=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#$(e){if(this.disabled||this.readonly)return;if(this.#ne)return void(this.#ne=!1);if(e.target instanceof Node&&this.#N.value?.contains(e.target))return void this.selectedOptions[0].dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}));const t=this.filterable||this.isFilterable;if(this.#de||!this.open||t&&!(e.target instanceof Element&&this.#m.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#ae=!0,void setTimeout((()=>{this.#ae=!1}))):void 0;this.open=!1}#I(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#o.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}#z(){this.open=!1}get#a(){return this.#ee.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#p(){const e=this.#ee.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#Y.value)return[this.#Y.value,...e]}get#ve(){return this.#ee.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#ue(){const e=this.#ee.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#Y.value&&!this.#Y.value.hidden&&e?[this.#Y.value,...e]:e}#L(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#B(){this.#o.value?.select(),this.isInputTooltipOpen=!0}async#V(e){let t;if(e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,this.#o.value?.value&&(this.inputValue=this.#o.value.value),this.multiple&&""!==this.#o.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#o.value?.value&&this.#o.value?.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1,this.#o.value?.value)try{t=await this.filter(this.#o.value.value)}catch{}if(t){for(const e of this.#a)e.hidden=!t.includes(e);const e=this.#ve?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#ce=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#ve||0===this.#ve.length,this.isCommunicateItemCountToScreenreaders=!0,this.#ve&&(this.itemCount=this.#ve.length)}}#G(e){const t=this.selectedOptions.findLast(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#ne=!0,t.selected=!1,void(this.#ne=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart){this.#ne=!0;for(const e of i)e.selected=!1;this.#ne=!1}else;}#H(e){e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#Y.value&&this.#me(),this.#l()}#q(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");if(t instanceof GlideCoreDropdownOption&&t.disabled)return;if(t instanceof GlideCoreDropdownOption&&t.privateIsEditActive)return t.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),void(this.open=!1);if(t&&!t.selected)return t.selected=!0,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#K(){this.requestUpdate()}#U(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#ce=e.target)}#J(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))):(this.filterable||this.isFilterable)&&this.#o.value?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.requestUpdate())}#P(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#W(e){if(e.target instanceof GlideCoreDropdownOption&&this.#ue){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#ce=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#g?.activeElement===this.#oe.value&&this.focus()}}#Q(e){e.target!==this.#Y.value&&!this.#pe&&this.#Y.value&&(this.#Y.value.selected=this.isAllSelected),this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple&&!this.#u?(this.#c=e.target.selected&&e.target.value&&!e.target.disabled?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#o.value&&!this.#ne&&(this.isFiltering=!1,this.#o.value.value="",this.inputValue="")):this.multiple||!e.target.selected||e.target.disabled||(this.#c=e.target.value?[e.target.value]:[],this.#o.value&&(this.isFiltering=!1,this.#o.value.value=e.target.label,this.inputValue=e.target.label))),this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))}#X(e){e.target instanceof GlideCoreDropdownOption&&this.multiple&&e.target.selected&&e.detail.new?this.#c=this.value.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreDropdownOption&&this.multiple?this.#c=this.value.filter((t=>t!==e.detail.old)):e.target instanceof GlideCoreDropdownOption&&(this.#c=e.detail.new?[e.detail.new]:[])}#j(){this.isInternalLabelTooltipOpen=!0}#x(){this.isInternalLabelTooltipOpen=!1}#F(){this.#ne=!0,this.open=!1}async#T(e){this.#ne=!0;for(const t of this.#a)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#k.value?.querySelectorAll("glide-core-tag");if(t&&this.selectedOptions.length>0){const i=[...t].findIndex((t=>t.dataset.id===e)),s=t[i<t.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#ne=!1}))}else setTimeout((()=>{this.focus(),this.#ne=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#_(e){e.stopPropagation()}#me(){this.#pe=!0;for(const e of this.#a)!this.#Y.value?.selected||e.selected||e.disabled?!this.#Y.value?.selected&&e.selected&&(e.selected=!1):e.selected=!0;this.#pe=!1}async#h(){if(this.#E.value){const e=this.#E.value.scrollWidth>this.#E.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#h()):!e&&!this.#re&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#re=!0,await this.updateComplete,this.#h()):this.#re=!1}}#i(){this.#a.length>0&&(this.#he?.(),this.#ce&&(this.#ce.privateActive=!0,this.ariaActivedescendant=this.#ce.id),this.#D.value&&this.#O.value&&(this.#he=autoUpdate(this.#D.value,this.#O.value,(()=>{(async()=>{if(this.#D.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#D.value,this.#O.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#O.value.dataset.placement=i,Object.assign(this.#O.value.style,{left:`${e}px`,top:`${t}px`}),this.#O.value?.showPopover()}})()}))))}#l(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const e of this.#a)e.hidden=!1}}};__decorate([property({attribute:"add-button-label",reflect:!0})],GlideCoreDropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"open",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"placeholder",void 0),__decorate([property()],GlideCoreDropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"size",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"multiple",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdown.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"tooltip",void 0),__decorate([property({type:Array})],GlideCoreDropdown.prototype,"value",null),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreDropdown.prototype,"version",void 0),__decorate([state()],GlideCoreDropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],GlideCoreDropdown.prototype,"inputValue",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelOverflow",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isNoResults",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],GlideCoreDropdown.prototype,"itemCount",void 0),__decorate([state()],GlideCoreDropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"validityMessage",void 0),GlideCoreDropdown=__decorate([customElement("glide-core-dropdown")],GlideCoreDropdown);export default GlideCoreDropdown;const icons={plus:html`
     <svg
       aria-hidden="true"
       viewBox="0 0 16 16"

package/dist/dropdown.option.d.ts

@@ -7,7 +7,7 @@ declare global {
     }
 }
 /**
- * @slot icon - An icon before the label.
+ * @slot icon - An optional icon before the label.
  */
 export default class GlideCoreDropdownOption extends LitElement {
     #private;
@@ -26,8 +26,9 @@ export default class GlideCoreDropdownOption extends LitElement {
     set selected(isSelected: boolean);
     privateSize: 'small' | 'large';
     privateActive: boolean;
-    private get isMultiple();
     privateIsTooltipOpen: boolean;
+    readonly version: string;
+    private get isMultiple();
     click(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;

package/dist/dropdown.option.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var r=e.length-1;r>=0;r--)(l=e[r])&&(a=(s<3?l(a):s>3?l(t,i,a):l(t,i))||a);return s>3&&a&&Object.defineProperty(t,i,a),a};import"./checkbox.js";import"./tooltip.js";import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.option.styles.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.privateIsTooltipOpen=!1,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o=!1,this.#l=!1,this.#s="",this.#a=createRef(),this.#r=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#s}set label(e){this.#s=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#r}set selected(e){if(this.#r=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#p)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#d()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#n}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#n=e}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-size="${this.privateSize}" private-variant="minimal" value="${this.value}" internally-inert @click="${this.#h}" ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="${classMap({"checkbox-icon-slot":!0,[this.privateSize]:!0})}" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button class="${classMap({"edit-button":!0,active:this.privateIsEditActive,disabled:this.disabled,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}`),(()=>html`<div class="${classMap({option:!0,disabled:this.disabled,editable:this.editable,[this.privateSize]:!0})}"><slot class="${classMap({"icon-slot":!0,[this.privateSize]:!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" @toggle="${this.#u}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" data-test="label" slot="target" ${ref(this.#a)}>${this.label}</div></glide-core-tooltip>${when(this.selected,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}</div>`))}</div>`}#e;#t;#i;#c;#o;#l;#s;#a;#r;#n;get#p(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#h(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#v(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#d(){this.#a.value&&(this.isLabelOverflow=this.#a.value.scrollWidth>this.#a.value.clientWidth)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"editable",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([state()],GlideCoreDropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,i,r):l(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import"./checkbox.js";import"./tooltip.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{nanoid}from"nanoid";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.option.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreDropdownOption=class GlideCoreDropdownOption extends LitElement{constructor(){super(...arguments),this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateMultiple=!1,this.privateSize="large",this.privateActive=!1,this.privateIsTooltipOpen=!1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=nanoid(),this.#o=!1,this.#l=!1,this.#s="",this.#r=createRef(),this.#a=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#o}set disabled(e){this.role=e?"none":"option",this.#o=e}get editable(){return this.#l}set editable(e){this.#l=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#s}set label(e){this.#s=e,setTimeout((()=>{this.#p()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get selected(){return this.#a}set selected(e){if(this.#a=e,this.ariaSelected=e.toString(),this.isMultiple)this.#e.value&&(this.#e.value.checked=e);else for(const e of this.#d)e!==this&&this.selected&&e.selected&&(e.selected=!1);this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.id=this.#i,this.ariaSelected=this.selected.toString(),this.role=this.disabled?"none":"option",this.tabIndex=-1,this.#c=new IntersectionObserver((()=>{this.checkVisibility()&&this.#p()})),this.#c.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#c?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#n}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#n=e}async privateUpdateCheckbox(){await this.updateComplete,this.#e.value&&(this.#e.value.checked=this.selected)}render(){return html`<div class="${classMap({component:!0,active:this.privateActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable,[this.privateSize]:!0})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-size="${this.privateSize}" private-variant="minimal" value="${this.value}" internally-inert @click="${this.#h}" ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="${classMap({"checkbox-icon-slot":!0,[this.privateSize]:!0})}" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button class="${classMap({"edit-button":!0,active:this.privateIsEditActive,disabled:this.disabled,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}`),(()=>html`<div class="${classMap({option:!0,disabled:this.disabled,editable:this.editable,[this.privateSize]:!0})}"><slot class="${classMap({"icon-slot":!0,[this.privateSize]:!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" data-test="tooltip" label="${this.label}" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" screenreader-hidden @toggle="${this.#u}"><div class="label" data-test="label" slot="target" ${ref(this.#r)}>${this.label}</div></glide-core-tooltip>${when(this.selected,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,disabled:this.disabled,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#v}" @mouseout="${this.#b}">${pencilIcon}</button>`))}</div>`))}</div>`}#e;#t;#i;#c;#o;#l;#s;#r;#a;#n;get#d(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#h(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#v(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#p(){this.#r.value&&(this.isLabelOverflow=this.#r.value.scrollWidth>this.#r.value.clientWidth)}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"editable",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"label",null),__decorate([property({attribute:"private-indeterminate",type:Boolean})],GlideCoreDropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],GlideCoreDropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDropdownOption.prototype,"selected",null),__decorate([property({attribute:"private-size",reflect:!0})],GlideCoreDropdownOption.prototype,"privateSize",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateActive",void 0),__decorate([property({type:Boolean})],GlideCoreDropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"version",void 0),__decorate([state()],GlideCoreDropdownOption.prototype,"isMultiple",null),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;

package/dist/dropdown.styles.js

@@ -141,7 +141,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .options-slot {
+    .default-slot {
       display: block;
       padding: var(--glide-core-spacing-xxxs);
     }
@@ -329,6 +329,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
     }
 
     .input-container {
+      align-items: baseline;
       display: flex;
       flex-grow: 1;
     }
@@ -341,7 +342,7 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       flex-grow: 1;
       font-family: var(--glide-core-font-sans);
       font-size: inherit;
-      min-inline-size: var(--min-inline-size);
+      inline-size: 100%;
       padding-block-end: 0;
       padding-inline: 0;
 
@@ -363,19 +364,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .ellipsis {
-      background-color: var(--glide-core-surface-page);
-      inset-block-end: 0;
-      inset-inline-end: 0;
-
-      /*
-        0.125rem so the value is vertically aligned with the value of ".input", which
-        has the same padding so it's centered vertically.
-      */
-      padding-block-start: 0.125rem;
-      position: absolute;
-    }
-
     .description {
       display: block;
 

package/dist/form-controls-layout.d.ts

@@ -1,6 +1,3 @@
-import './checkbox.js';
-import './dropdown.option.js';
-import './label.js';
 import { LitElement } from 'lit';
 declare global {
     interface HTMLElementTagNameMap {
@@ -8,7 +5,7 @@ declare global {
     }
 }
 /**
- * @slot - GlideCoreCheckbox | GlideCoreCheckboxGroup | GlideCoreDropdown | GlideCoreInput | GlideCoreTextArea.
+ * @slot - GlideCoreCheckbox | GlideCoreCheckboxGroup | GlideCoreDropdown | GlideCoreRadioGroup | GlideCoreInput | GlideCoreTextArea.
  */
 export default class GlideCoreFormControlsLayout extends LitElement {
     #private;
@@ -16,6 +13,6 @@ export default class GlideCoreFormControlsLayout extends LitElement {
     static styles: import("lit").CSSResult[];
     get split(): "left" | "middle";
     set split(split: 'left' | 'middle');
-    firstUpdated(): void;
+    readonly version: string;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/form-controls-layout.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,o,t,r){var l,s=arguments.length,i=s<3?o:null===r?r=Object.getOwnPropertyDescriptor(o,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)i=Reflect.decorate(e,o,t,r);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(i=(s<3?l(i):s>3?l(o,t,i):l(o,t))||i);return s>3&&i&&Object.defineProperty(o,t,i),i};import"./checkbox.js";import"./dropdown.option.js";import"./label.js";import{LitElement,html}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import GlideCoreCheckbox from"./checkbox.js";import GlideCoreCheckboxGroup from"./checkbox-group.js";import GlideCoreDropdown from"./dropdown.js";import GlideCoreInput from"./input.js";import GlideCoreTextArea from"./textarea.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./form-controls-layout.styles.js";let GlideCoreFormControlsLayout=class GlideCoreFormControlsLayout extends LitElement{static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get split(){return this.#e}set split(e){if(this.#e=e,this.#o.value)for(const e of this.#o.value.assignedElements())"privateSplit"in e&&(e.privateSplit=this.split)}firstUpdated(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreCheckbox,GlideCoreCheckboxGroup,GlideCoreDropdown,GlideCoreInput,GlideCoreTextArea]),this.#t()}render(){return html`<div class="component"><slot @slotchange="${this.#r}" ${ref(this.#o)}></slot></div>`}#o=createRef();#e="left";#t(){owSlot(this.#o.value);for(const e of this.#o.value.assignedElements())"orientation"in e&&ow("horizontal"===e.orientation,ow.boolean.true.message("Only horizontal controls are supported."))}#r(){owSlot(this.#o.value),owSlotType(this.#o.value,[GlideCoreCheckbox,GlideCoreCheckboxGroup,GlideCoreDropdown,GlideCoreInput,GlideCoreTextArea]),this.#t();for(const e of this.#o.value.assignedElements())"privateSplit"in e&&(e.privateSplit=this.split)}};__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"split",null),GlideCoreFormControlsLayout=__decorate([customElement("glide-core-form-controls-layout")],GlideCoreFormControlsLayout);export default GlideCoreFormControlsLayout;
+var __decorate=this&&this.__decorate||function(o,e,t,r){var i,s=arguments.length,l=s<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,t):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(o,e,t,r);else for(var n=o.length-1;n>=0;n--)(i=o[n])&&(l=(s<3?i(l):s>3?i(e,t,l):i(e,t))||l);return s>3&&l&&Object.defineProperty(e,t,l),l};import{html,LitElement}from"lit";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import packageJson from"../package.json"with{type:"json"};import GlideCoreCheckbox from"./checkbox.js";import GlideCoreCheckboxGroup from"./checkbox-group.js";import GlideCoreDropdown from"./dropdown.js";import GlideCoreRadioGroup from"./radio-group.js";import GlideCoreInput from"./input.js";import GlideCoreTextArea from"./textarea.js";import styles from"./form-controls-layout.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreFormControlsLayout=class GlideCoreFormControlsLayout extends LitElement{constructor(){super(...arguments),this.version=packageJson.version,this.#o=createRef(),this.#e="left"}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get split(){return this.#e}set split(o){if(this.#e=o,this.#o.value)for(const o of this.#o.value.assignedElements())"privateSplit"in o&&(o.privateSplit=this.split)}render(){return html`<div class="component"><slot @slotchange="${this.#t}" ${assertSlot([GlideCoreCheckbox,GlideCoreCheckboxGroup,GlideCoreDropdown,GlideCoreRadioGroup,GlideCoreInput,GlideCoreTextArea])} ${ref(this.#o)}></slot></div>`}#o;#e;#t(){if(this.#o.value)for(const o of this.#o.value.assignedElements())if("privateSplit"in o&&(o.privateSplit=this.split),"orientation"in o&&"horizontal"!==o.orientation)throw new TypeError("Only horizontal controls are supported.")}};__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"split",null),__decorate([property({reflect:!0})],GlideCoreFormControlsLayout.prototype,"version",void 0),GlideCoreFormControlsLayout=__decorate([customElement("glide-core-form-controls-layout")],GlideCoreFormControlsLayout);export default GlideCoreFormControlsLayout;

package/dist/icon-button.d.ts

@@ -17,7 +17,7 @@ export default class GlideCoreIconButton extends LitElement {
     disabled: boolean;
     label: string;
     variant: 'primary' | 'secondary' | 'tertiary';
+    readonly version: string;
     click(): void;
-    firstUpdated(): void;
     render(): import("lit").TemplateResult<1>;
 }

package/dist/icon-button.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,l=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(l=(a<3?i(l):a>3?i(e,o,l):i(e,o))||l);return a>3&&l&&Object.defineProperty(e,o,l),l};import{LitElement,html}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{owSlot}from"./library/ow.js";import styles from"./icon-button.styles.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.label="",this.variant="primary",this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:"closed"}}static{this.styles=styles}click(){this.#t.value?.click()}firstUpdated(){owSlot(this.#e.value)}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${this.label}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#t)}><slot @slotchange="${this.#o}" ${ref(this.#e)}></slot></button>`}#t;#e;#o(){owSlot(this.#e.value)}};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button")],GlideCoreIconButton);export default GlideCoreIconButton;
+var __decorate=this&&this.__decorate||function(t,e,o,r){var i,a=arguments.length,s=a<3?e:null===r?r=Object.getOwnPropertyDescriptor(e,o):r;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)s=Reflect.decorate(t,e,o,r);else for(var n=t.length-1;n>=0;n--)(i=t[n])&&(s=(a<3?i(s):a>3?i(e,o,s):i(e,o))||s);return a>3&&s&&Object.defineProperty(e,o,s),s};import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import packageJson from"../package.json"with{type:"json"};import styles from"./icon-button.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreIconButton=class GlideCoreIconButton extends LitElement{constructor(){super(...arguments),this.ariaControls=null,this.ariaExpanded=null,this.ariaHasPopup=null,this.disabled=!1,this.label="",this.variant="primary",this.version=packageJson.version,this.#t=createRef(),this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,delegatesFocus:!0,mode:shadowRootMode}}static{this.styles=styles}click(){this.#t.value?.click()}render(){return html`<button aria-controls="${ifDefined(this.ariaControls??void 0)}" aria-expanded="${ifDefined(this.ariaExpanded??void 0)}" aria-haspopup="${ifDefined(this.ariaHasPopup??void 0)}" aria-label="${this.label}" class="${classMap({component:!0,primary:"primary"===this.variant,secondary:"secondary"===this.variant,tertiary:"tertiary"===this.variant})}" data-test="button" type="button" ?disabled="${this.disabled}" ${ref(this.#t)}><slot ${assertSlot()} ${ref(this.#e)}></slot></button>`}#t;#e};__decorate([property({attribute:"aria-controls",reflect:!0})],GlideCoreIconButton.prototype,"ariaControls",void 0),__decorate([property({attribute:"aria-expanded",reflect:!0})],GlideCoreIconButton.prototype,"ariaExpanded",void 0),__decorate([property({attribute:"aria-haspopup",reflect:!0})],GlideCoreIconButton.prototype,"ariaHasPopup",void 0),__decorate([property({type:Boolean,reflect:!0})],GlideCoreIconButton.prototype,"disabled",void 0),__decorate([property()],GlideCoreIconButton.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"variant",void 0),__decorate([property({reflect:!0})],GlideCoreIconButton.prototype,"version",void 0),GlideCoreIconButton=__decorate([customElement("glide-core-icon-button")],GlideCoreIconButton);export default GlideCoreIconButton;

package/dist/inline-alert.d.ts

@@ -16,6 +16,7 @@ export default class GlideCoreInlineAlert extends LitElement {
     static styles: import("lit").CSSResult[];
     variant: keyof typeof icons;
     removable?: boolean | undefined;
+    readonly version: string;
     firstUpdated(): void;
     focus(): void;
     render(): import("lit").TemplateResult<1>;

package/dist/inline-alert.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,r=arguments.length,n=r<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(n=(r<3?l(n):r>3?l(t,i,n):l(t,i))||n);return r>3&&n&&Object.defineProperty(t,i,n),n};import"./icon-button.js";import{LitElement,html}from"lit";import{LocalizeController}from"./library/localize.js";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{owSlot}from"./library/ow.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import styles from"./inline-alert.styles.js";import xIcon from"./icons/x.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.#e=100,this.#t=createRef(),this.#i=createRef(),this.#o=!1,this.#l=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}firstUpdated(){owSlot(this.#i.value),this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" data-animation-duration="${this.#e}" style="--animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot @slotchange="${this.#n}" ${ref(this.#i)}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#l.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#a}" @keydown="${this.#s}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#i;#o;#l;#r;#n(){owSlot(this.#i.value)}#a(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#s(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert")],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666672C3.94987 0.666672 0.666626 3.94992 0.666626 8C0.666626 12.0501 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.0501 15.3333 8C15.3333 3.94992 12.05 0.666672 7.99996 0.666672ZM8.66663 5.33334C8.66663 4.96515 8.36815 4.66667 7.99996 4.66667C7.63177 4.66667 7.33329 4.96515 7.33329 5.33334V8C7.33329 8.36819 7.63177 8.66667 7.99996 8.66667C8.36815 8.66667 8.66663 8.36819 8.66663 8V5.33334ZM7.99996 10C7.63177 10 7.33329 10.2985 7.33329 10.6667C7.33329 11.0349 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0349 8.67329 10.6667C8.67329 10.2985 8.37482 10 8.00663 10H7.99996Z" fill="currentColor"/></svg>`,medium:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.54175 1.44697C8.19688 1.29362 7.80317 1.29362 7.45829 1.44697C7.19194 1.5654 7.01892 1.77402 6.89852 1.944C6.78014 2.11113 6.6534 2.33007 6.51402 2.57087L1.00258 12.0906C0.862641 12.3323 0.735472 12.5519 0.649245 12.7383C0.561611 12.9277 0.466542 13.1824 0.496841 13.473C0.536048 13.849 0.733076 14.1908 1.03889 14.4131C1.27522 14.585 1.54321 14.6303 1.75105 14.6493C1.95555 14.6681 2.20932 14.6681 2.48858 14.668H13.5114C13.7907 14.6681 14.0445 14.6681 14.249 14.6493C14.4568 14.6303 14.7248 14.585 14.9612 14.4131C15.267 14.1908 15.464 13.849 15.5032 13.473C15.5335 13.1824 15.4384 12.9277 15.3508 12.7383C15.2646 12.5519 15.1374 12.3323 14.9975 12.0907L9.48601 2.57085C9.34664 2.33006 9.2199 2.11112 9.10153 1.944C8.98113 1.77401 8.80811 1.5654 8.54175 1.44697ZM8.66671 6.33472C8.66671 5.96653 8.36823 5.66806 8.00004 5.66806C7.63185 5.66806 7.33337 5.96653 7.33337 6.33472V9.00139C7.33337 9.36958 7.63185 9.66805 8.00004 9.66805C8.36823 9.66805 8.66671 9.36958 8.66671 9.00139V6.33472ZM8.00004 11.0014C7.63185 11.0014 7.33337 11.2999 7.33337 11.6681C7.33337 12.0362 7.63185 12.3347 8.00004 12.3347H8.00671C8.3749 12.3347 8.67337 12.0362 8.67337 11.6681C8.67337 11.2999 8.3749 11.0014 8.00671 11.0014H8.00004Z" fill="currentColor"/></svg>`,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.26864 0.790031C8.09143 0.753584 7.90865 0.753584 7.73144 0.790031C7.52659 0.832161 7.3435 0.934713 7.19794 1.01624L7.15826 1.03841L2.22493 3.77915L2.18284 3.8024C2.02875 3.88727 1.835 3.99398 1.68622 4.15543C1.55759 4.29502 1.46024 4.46046 1.40069 4.6407C1.33181 4.84916 1.33262 5.07035 1.33326 5.24627L1.33338 5.29435V10.7058L1.33326 10.7538C1.33262 10.9298 1.33181 11.1509 1.40069 11.3594C1.46024 11.5397 1.55759 11.7051 1.68622 11.8447C1.835 12.0061 2.02873 12.1128 2.18281 12.1977L2.22493 12.221L7.15826 14.9617L7.19793 14.9839C7.34349 15.0654 7.52659 15.1679 7.73144 15.2101C7.90865 15.2465 8.09143 15.2465 8.26864 15.2101C8.4735 15.1679 8.65659 15.0654 8.80215 14.9839L8.84182 14.9617L13.7752 12.221L13.8172 12.1977C13.9713 12.1128 14.1651 12.0061 14.3139 11.8447C14.4425 11.7051 14.5398 11.5397 14.5994 11.3594C14.6683 11.1509 14.6675 10.9298 14.6668 10.7538L14.6667 10.7058V5.29435L14.6668 5.24627C14.6675 5.07035 14.6683 4.84916 14.5994 4.6407C14.5398 4.46046 14.4425 4.29502 14.3139 4.15543C14.1651 3.99398 13.9713 3.88727 13.8172 3.8024L13.7752 3.77915L8.84182 1.03841L8.80215 1.01624C8.65659 0.934713 8.47349 0.832161 8.26864 0.790031ZM8.66671 5.33333C8.66671 4.96514 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96514 7.33337 5.33333V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33333ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67337 11.0349 8.67337 10.6667C8.67337 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`};
+var __decorate=this&&this.__decorate||function(e,t,o,i){var r,l=arguments.length,n=l<3?t:null===i?i=Object.getOwnPropertyDescriptor(t,o):i;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(e,t,o,i);else for(var a=e.length-1;a>=0;a--)(r=e[a])&&(n=(l<3?r(n):l>3?r(t,o,n):r(t,o))||n);return l>3&&n&&Object.defineProperty(t,o,n),n};import"./icon-button.js";import{html,LitElement}from"lit";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property}from"lit/decorators.js";import{styleMap}from"lit/directives/style-map.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import{LocalizeController}from"./library/localize.js";import styles from"./inline-alert.styles.js";import xIcon from"./icons/x.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";let GlideCoreInlineAlert=class GlideCoreInlineAlert extends LitElement{constructor(){super(...arguments),this.variant="informational",this.removable=!1,this.version=packageJson.version,this.#e=100,this.#t=createRef(),this.#o=!1,this.#i=new LocalizeController(this),this.#r=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}firstUpdated(){this.#t.value?.addEventListener("animationend",(()=>{this.#t.value?.classList.remove("added")}),{once:!0})}focus(){this.#r.value?.focus()}render(){return html`<div class="${classMap({component:!0,added:!0,[this.variant]:!0})}" role="alert" aria-labelledby="label" data-test="component" data-animation-duration="${this.#e}" style="--animation-duration: ${this.#e}ms" ${ref(this.#t)}><div aria-hidden="true" class="${classMap({"icon-container":!0,[this.variant]:!0})}">${icons[this.variant]}</div><div id="label" class="content"><slot ${assertSlot()}></slot></div>${when(this.removable,(()=>html`<glide-core-icon-button label="${this.#i.term("closeInlineAlert",this.variant)}" variant="tertiary" class="removal-button" data-test="removal-button" @click="${this.#l}" @keydown="${this.#n}" ${ref(this.#r)}>${xIcon}</glide-core-icon-button>`))}</div>`}#e;#t;#o;#i;#r;#l(){this.#o?this.#o=!1:(setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}#n(e){["Enter"," "].includes(e.key)&&(this.#o=!0,setTimeout((()=>{this.remove()}),this.#e),this.#t.value?.classList.add("removed"),this.dispatchEvent(new Event("remove",{bubbles:!0,composed:!0})))}};__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"variant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreInlineAlert.prototype,"removable",void 0),__decorate([property({reflect:!0})],GlideCoreInlineAlert.prototype,"version",void 0),GlideCoreInlineAlert=__decorate([customElement("glide-core-inline-alert")],GlideCoreInlineAlert);export default GlideCoreInlineAlert;const icons={informational:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M7.99996 0.666672C3.94987 0.666672 0.666626 3.94992 0.666626 8C0.666626 12.0501 3.94987 15.3333 7.99996 15.3333C12.05 15.3333 15.3333 12.0501 15.3333 8C15.3333 3.94992 12.05 0.666672 7.99996 0.666672ZM8.66663 5.33334C8.66663 4.96515 8.36815 4.66667 7.99996 4.66667C7.63177 4.66667 7.33329 4.96515 7.33329 5.33334V8C7.33329 8.36819 7.63177 8.66667 7.99996 8.66667C8.36815 8.66667 8.66663 8.36819 8.66663 8V5.33334ZM7.99996 10C7.63177 10 7.33329 10.2985 7.33329 10.6667C7.33329 11.0349 7.63177 11.3333 7.99996 11.3333H8.00663C8.37482 11.3333 8.67329 11.0349 8.67329 10.6667C8.67329 10.2985 8.37482 10 8.00663 10H7.99996Z" fill="currentColor"/></svg>`,medium:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.54175 1.44697C8.19688 1.29362 7.80317 1.29362 7.45829 1.44697C7.19194 1.5654 7.01892 1.77402 6.89852 1.944C6.78014 2.11113 6.6534 2.33007 6.51402 2.57087L1.00258 12.0906C0.862641 12.3323 0.735472 12.5519 0.649245 12.7383C0.561611 12.9277 0.466542 13.1824 0.496841 13.473C0.536048 13.849 0.733076 14.1908 1.03889 14.4131C1.27522 14.585 1.54321 14.6303 1.75105 14.6493C1.95555 14.6681 2.20932 14.6681 2.48858 14.668H13.5114C13.7907 14.6681 14.0445 14.6681 14.249 14.6493C14.4568 14.6303 14.7248 14.585 14.9612 14.4131C15.267 14.1908 15.464 13.849 15.5032 13.473C15.5335 13.1824 15.4384 12.9277 15.3508 12.7383C15.2646 12.5519 15.1374 12.3323 14.9975 12.0907L9.48601 2.57085C9.34664 2.33006 9.2199 2.11112 9.10153 1.944C8.98113 1.77401 8.80811 1.5654 8.54175 1.44697ZM8.66671 6.33472C8.66671 5.96653 8.36823 5.66806 8.00004 5.66806C7.63185 5.66806 7.33337 5.96653 7.33337 6.33472V9.00139C7.33337 9.36958 7.63185 9.66805 8.00004 9.66805C8.36823 9.66805 8.66671 9.36958 8.66671 9.00139V6.33472ZM8.00004 11.0014C7.63185 11.0014 7.33337 11.2999 7.33337 11.6681C7.33337 12.0362 7.63185 12.3347 8.00004 12.3347H8.00671C8.3749 12.3347 8.67337 12.0362 8.67337 11.6681C8.67337 11.2999 8.3749 11.0014 8.00671 11.0014H8.00004Z" fill="currentColor"/></svg>`,high:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.8924 1.33334H4.10768C3.75626 1.33333 3.45307 1.33332 3.20336 1.35372C2.93979 1.37525 2.67765 1.4228 2.42539 1.55132C2.04907 1.74307 1.74311 2.04903 1.55136 2.42536C1.42283 2.67761 1.37529 2.93976 1.35376 3.20332C1.33335 3.45303 1.33336 3.75619 1.33337 4.10762V11.8924C1.33336 12.2438 1.33335 12.547 1.35376 12.7967C1.37529 13.0603 1.42283 13.3224 1.55136 13.5747C1.74311 13.951 2.04907 14.2569 2.42539 14.4487C2.67765 14.5772 2.93979 14.6248 3.20336 14.6463C3.45307 14.6667 3.75624 14.6667 4.10766 14.6667H11.8924C12.2438 14.6667 12.547 14.6667 12.7967 14.6463C13.0603 14.6248 13.3224 14.5772 13.5747 14.4487C13.951 14.2569 14.257 13.951 14.4487 13.5747C14.5773 13.3224 14.6248 13.0603 14.6463 12.7967C14.6667 12.547 14.6667 12.2438 14.6667 11.8924V4.10763C14.6667 3.7562 14.6667 3.45303 14.6463 3.20332C14.6248 2.93976 14.5773 2.67761 14.4487 2.42536C14.257 2.04903 13.951 1.74307 13.5747 1.55132C13.3224 1.4228 13.0603 1.37525 12.7967 1.35372C12.547 1.33332 12.2438 1.33333 11.8924 1.33334ZM8.66671 5.33334C8.66671 4.96515 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96515 7.33337 5.33334V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33334ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67338 11.0349 8.67338 10.6667C8.67338 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`,critical:html`<svg aria-hidden="true" viewBox="0 0 16 16" fill="none" style="${styleMap({height:"var(--size, 1rem)",width:"var(--size, 1rem)"})}"><path fill-rule="evenodd" clip-rule="evenodd" d="M8.26864 0.790031C8.09143 0.753584 7.90865 0.753584 7.73144 0.790031C7.52659 0.832161 7.3435 0.934713 7.19794 1.01624L7.15826 1.03841L2.22493 3.77915L2.18284 3.8024C2.02875 3.88727 1.835 3.99398 1.68622 4.15543C1.55759 4.29502 1.46024 4.46046 1.40069 4.6407C1.33181 4.84916 1.33262 5.07035 1.33326 5.24627L1.33338 5.29435V10.7058L1.33326 10.7538C1.33262 10.9298 1.33181 11.1509 1.40069 11.3594C1.46024 11.5397 1.55759 11.7051 1.68622 11.8447C1.835 12.0061 2.02873 12.1128 2.18281 12.1977L2.22493 12.221L7.15826 14.9617L7.19793 14.9839C7.34349 15.0654 7.52659 15.1679 7.73144 15.2101C7.90865 15.2465 8.09143 15.2465 8.26864 15.2101C8.4735 15.1679 8.65659 15.0654 8.80215 14.9839L8.84182 14.9617L13.7752 12.221L13.8172 12.1977C13.9713 12.1128 14.1651 12.0061 14.3139 11.8447C14.4425 11.7051 14.5398 11.5397 14.5994 11.3594C14.6683 11.1509 14.6675 10.9298 14.6668 10.7538L14.6667 10.7058V5.29435L14.6668 5.24627C14.6675 5.07035 14.6683 4.84916 14.5994 4.6407C14.5398 4.46046 14.4425 4.29502 14.3139 4.15543C14.1651 3.99398 13.9713 3.88727 13.8172 3.8024L13.7752 3.77915L8.84182 1.03841L8.80215 1.01624C8.65659 0.934713 8.47349 0.832161 8.26864 0.790031ZM8.66671 5.33333C8.66671 4.96514 8.36823 4.66667 8.00004 4.66667C7.63185 4.66667 7.33337 4.96514 7.33337 5.33333V8C7.33337 8.36819 7.63185 8.66667 8.00004 8.66667C8.36823 8.66667 8.66671 8.36819 8.66671 8V5.33333ZM8.00004 10C7.63185 10 7.33337 10.2985 7.33337 10.6667C7.33337 11.0349 7.63185 11.3333 8.00004 11.3333H8.00671C8.3749 11.3333 8.67337 11.0349 8.67337 10.6667C8.67337 10.2985 8.3749 10 8.00671 10H8.00004Z" fill="currentColor"/></svg>`};

package/dist/input.d.ts

@@ -1,6 +1,7 @@
 import './icon-button.js';
 import './label.js';
 import { LitElement } from 'lit';
+import type FormControl from './library/form-control.js';
 declare global {
     interface HTMLElementTagNameMap {
         'glide-core-input': GlideCoreInput;
@@ -13,12 +14,11 @@ type SupportedTypes = (typeof SUPPORTED_TYPES)[number];
  * @event input
  * @event invalid
  *
- * @slot tooltip - Content for the tooltip.
  * @slot description - Additional information or context.
  * @slot prefix-icon - An optional icon before the input field.
  * @slot suffix-icon - An optional icon after the input field.
  */
-export default class GlideCoreInput extends LitElement {
+export default class GlideCoreInput extends LitElement implements FormControl {
     #private;
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
@@ -42,6 +42,8 @@ export default class GlideCoreInput extends LitElement {
     disabled: boolean;
     privateSplit?: 'left' | 'middle';
     maxlength?: number;
+    readonly version: string;
+    tooltip?: string;
     get form(): HTMLFormElement | null;
     get validity(): ValidityState;
     get willValidate(): boolean;
@@ -52,6 +54,7 @@ export default class GlideCoreInput extends LitElement {
     formResetCallback(): void;
     render(): import("lit").TemplateResult<1>;
     reportValidity(): boolean;
+    resetValidityFeedback(): void;
     setCustomValidity(message: string): void;
     setValidity(flags?: ValidityStateFlags, message?: string): void;
     constructor();