@crowdstrike/glide-core 0.14.0 → 0.15.0

package/dist/button-group.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,l=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(l=(i<3?r(l):i>3?r(e,o,l):r(e,o))||l);return i>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 GlideCoreButtonGroupButton from"./button-group.button.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#n)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#n)e.privateOrientation=t;this.#t=t}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton])}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#r}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#n(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){ow(this.#n.length,ow.number.greaterThan(1).message("A Button Group must contain two or more Button Group Buttons.")),owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton]);if(!this.#n.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#n.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#n)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#r(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0)}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(ow(e,ow.object.instanceOf(GlideCoreButtonGroupButton)),t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#n.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#n.at(-1);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#n.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#n.at(0);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");e&&!e.disabled&&(e.selected=!0)}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#n)e!==t.target&&(e.selected=!1);t.target.focus(),t.target.dispatchEvent(new Event("change",{bubbles:!0})),t.target.dispatchEvent(new Event("input",{bubbles:!0}))}}};__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"orientation",null),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;
+var __decorate=this&&this.__decorate||function(t,e,o,n){var r,i=arguments.length,l=i<3?e:null===n?n=Object.getOwnPropertyDescriptor(e,o):n;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)l=Reflect.decorate(t,e,o,n);else for(var s=t.length-1;s>=0;s--)(r=t[s])&&(l=(i<3?r(l):i>3?r(e,o,l):r(e,o))||l);return i>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 GlideCoreButtonGroupButton from"./button-group.button.js";import ow,{owSlot,owSlotType}from"./library/ow.js";import styles from"./button-group.styles.js";let GlideCoreButtonGroup=class GlideCoreButtonGroup extends LitElement{constructor(){super(...arguments),this.label="",this.#t="horizontal",this.#e=createRef()}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get variant(){return this.#o}set variant(t){for(const e of this.#n)e.privateVariant=t;this.#o=t}get orientation(){return this.#t}set orientation(t){for(const e of this.#n)e.privateOrientation=t;this.#t=t}firstUpdated(){owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton])}render(){return html`<div class="${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}"><div class="label" id="label" data-test="label">${this.label}</div><div aria-labelledby="label" role="radiogroup" class="${classMap({container:!0,vertical:"vertical"===this.orientation})}"><slot @click="${this.#r}" @keydown="${this.#i}" @private-selected="${this.#l}" @slotchange="${this.#s}" ${ref(this.#e)}></slot></div></div>`}#t;#e;#o;get#n(){return[...this.querySelectorAll("glide-core-button-group-button")]}#s(){ow(this.#n.length,ow.number.greaterThan(1).message("A Button Group must contain two or more Button Group Buttons.")),owSlot(this.#e.value),owSlotType(this.#e.value,[GlideCoreButtonGroupButton]);if(!this.#n.find((({disabled:t,selected:e})=>!t&&e))){const t=this.#n.find((({disabled:t})=>!t));t&&(t.selected=!0)}for(const t of this.#n)t.privateVariant=this.variant,this.orientation&&(t.privateOrientation=this.orientation)}#r(t){if(t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");!e||e.disabled||e.selected||(e.selected=!0)}}#i(t){const e=this.querySelector("glide-core-button-group-button[selected]");switch(ow(e,ow.object.instanceOf(GlideCoreButtonGroupButton)),t.key){case"ArrowUp":case"ArrowLeft":{t.preventDefault();let o=e?.previousElementSibling??this.#n.at(-1);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.previousElementSibling??this.#n.at(-1);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case"ArrowDown":case"ArrowRight":{t.preventDefault();let o=e?.nextElementSibling??this.#n.at(0);for(;o instanceof GlideCoreButtonGroupButton&&o.disabled;)o=o.nextElementSibling??this.#n.at(0);o instanceof GlideCoreButtonGroupButton&&(o.selected=!0);break}case" ":if(t.preventDefault(),t.target instanceof HTMLElement){const e=t.target.closest("glide-core-button-group-button");e&&!e.disabled&&(e.selected=!0)}}}#l(t){if(t.target instanceof GlideCoreButtonGroupButton&&t.target.selected){for(const e of this.#n)e!==t.target&&(e.selected=!1);t.target.focus(),t.target.dispatchEvent(new Event("change",{bubbles:!0})),t.target.dispatchEvent(new Event("input",{bubbles:!0,composed:!0}))}}};__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"variant",null),__decorate([property({reflect:!0})],GlideCoreButtonGroup.prototype,"orientation",null),GlideCoreButtonGroup=__decorate([customElement("glide-core-button-group")],GlideCoreButtonGroup);export default GlideCoreButtonGroup;

package/dist/checkbox-group.js

@@ -40,4 +40,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,o){var s,l=arguments.length
               >`))}
         </div>
       </glide-core-private-label>
-    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#l=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#r;#o;#e;#i;#s;get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#l;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.isReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#c(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;
+    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#o.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#o.setValidity({customError:!1},"",this.#d.value):this.#o.setValidity({customError:!0,valueMissing:this.#o.validity.valueMissing}," ",this.#d.value)}setValidity(e,t){this.validityMessage=t,this.#o.setValidity(e," ",this.#d.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isReportValidityOrSubmit=!1,this.#d=createRef(),this.#r=createRef(),this.#e=!1,this.#i=!1,this.#s=[],this.#l=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#o=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#d;#r;#o;#e;#i;#s;get#t(){return this.#r.value?this.#r.value.assignedElements().filter((e=>e instanceof GlideCoreCheckbox)):[]}#l;get#n(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#u(){for(const e of this.#t)e.privateIsReportValidityOrSubmit=!0}#a(e){const t=e.relatedTarget;t&&t instanceof GlideCoreCheckbox&&this.#t.includes(t)||this.#u()}#c(){this.value=this.#t.filter((({checked:e,disabled:t})=>e&&!t)).map((({value:e})=>e)).filter((e=>Boolean(e)))}#h(e){e.target instanceof GlideCoreCheckbox&&e.target.checked&&e.detail.new?this.value=this.#s.map((t=>t===e.detail.old?e.detail.new:t)):e.target instanceof GlideCoreCheckbox&&e.target.checked&&(this.value=this.#s.filter((t=>t!==e.detail.old)))}#p(){owSlot(this.#r.value),owSlotType(this.#r.value,[GlideCoreCheckbox])}};__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"disabled",null),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckboxGroup.prototype,"hideLabel",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"label",void 0),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"name",void 0),__decorate([property()],GlideCoreCheckboxGroup.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckboxGroup.prototype,"required",null),__decorate([property({reflect:!0})],GlideCoreCheckboxGroup.prototype,"summary",void 0),__decorate([property({reflect:!0,type:Array})],GlideCoreCheckboxGroup.prototype,"value",null),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckboxGroup.prototype,"validityMessage",void 0),GlideCoreCheckboxGroup=__decorate([customElement("glide-core-checkbox-group")],GlideCoreCheckboxGroup);export default GlideCoreCheckboxGroup;

package/dist/checkbox.d.ts

@@ -31,6 +31,7 @@ export default class GlideCoreCheckbox extends LitElement {
     name: string;
     privateLabelTooltipOffset: number;
     privateShowLabelTooltip: boolean;
+    privateDisableLabelTooltip: boolean;
     privateSize: 'large' | 'small';
     privateSplit?: 'left' | 'middle';
     privateVariant?: 'minimal';
@@ -38,7 +39,7 @@ export default class GlideCoreCheckbox extends LitElement {
     summary?: string;
     get value(): string;
     set value(value: string);
-    isReportValidityOrSubmit: boolean;
+    privateIsReportValidityOrSubmit: boolean;
     get form(): HTMLFormElement | null;
     blur(): void;
     checkValidity(): boolean;

package/dist/checkbox.js

@@ -1,4 +1,4 @@
-var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length,r=o<3?t:null===s?s=Object.getOwnPropertyDescriptor(t,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,s);else for(var l=e.length-1;l>=0;l--)(a=e[l])&&(r=(o<3?a(r):o>3?a(t,i,r):a(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};import"./label.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{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`
+var __decorate=this&&this.__decorate||function(e,t,i,a){var s,o=arguments.length,r=o<3?t:null===a?a=Object.getOwnPropertyDescriptor(t,i):a;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,a);else for(var l=e.length-1;l>=0;l--)(s=e[l])&&(r=(o<3?s(r):o>3?s(t,i,r):s(t,i))||r);return o>3&&r&&Object.defineProperty(t,i,r),r};import"./label.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{ifDefined}from"lit/directives/if-defined.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import checkedIcon from"./icons/checked.js";import styles from"./checkbox.styles.js";const indeterminateIcon=html`
   <svg
     width="14"
     height="14"
@@ -12,7 +12,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
       fill="currentColor"
     />
   </svg>
-`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#s.form}blur(){this.#a.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#s.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#a.value?.click()}connectedCallback(){super.connectedCallback(),this.#o=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#o.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r),this.#o?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#s.validity:this.required&&!this.checked?(this.#s.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#a.value),this.#s.validity):this.required&&this.#s.validity.valueMissing&&this.checked?(this.#s.setValidity({}),this.#s.validity):(this.required||!this.#s.validity.valueMissing||this.checked||this.#s.setValidity({}),this.#s.validity)}focus(e){this.#a.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
+`;let GlideCoreCheckbox=class GlideCoreCheckbox extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get label(){return this.#e}set label(e){this.#e=e,setTimeout((()=>{this.#t()}))}get value(){return this.#i}set value(e){const t=this.#i;this.#i=e,this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:t,new:e}}))}get form(){return this.#a.form}blur(){this.#s.value?.blur()}checkValidity(){this.isCheckingValidity=!0;const e=this.#a.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#s.value?.click()}connectedCallback(){super.connectedCallback(),this.#o=new IntersectionObserver((()=>{this.checkVisibility()&&this.#t()})),this.#o.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#r),this.#o?.disconnect()}get validity(){return"minimal"===this.privateVariant?this.#a.validity:this.required&&!this.checked?(this.#a.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.#s.value),this.#a.validity):this.required&&this.#a.validity.valueMissing&&this.checked?(this.#a.setValidity({}),this.#a.validity):(this.required||!this.#a.validity.valueMissing||this.checked||this.#a.setValidity({}),this.#a.validity)}focus(e){this.#s.value?.focus(e)}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#r)}formResetCallback(){this.checked=""===this.getAttribute("checked"),this.indeterminate=""===this.getAttribute("indeterminate")}render(){return html`<div class="component" data-test="component">
       ${when("minimal"===this.privateVariant,(()=>html`
           <label
             class=${classMap({"label-and-input-and-checkbox":!0,[this.privateSize]:!0})}
@@ -21,6 +21,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
             <div class="input-and-checkbox">
               <input
                 aria-invalid=${this.#l}
+                class="input"
                 data-test="input"
                 type="checkbox"
                 .checked=${this.checked}
@@ -30,7 +31,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
                 @change=${this.#n}
                 @input=${this.#n}
                 @keydown=${this.#d}
-                ${ref(this.#a)}
+                ${ref(this.#s)}
               />
 
               <div
@@ -47,12 +48,16 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
               <glide-core-tooltip
                 class="label-tooltip"
                 offset=${this.privateLabelTooltipOffset}
-                ?disabled=${!this.isLabelOverflow}
+                ?disabled=${!this.isLabelOverflow||this.privateDisableLabelTooltip}
                 ?open=${this.privateShowLabelTooltip}
               >
                 <div aria-hidden="true" data-test="tooltip">${this.label}</div>
 
-                <div class="label" slot="target" ${ref(this.#h)}>
+                <div
+                  class=${classMap({label:!0,disabled:this.disabled})}
+                  slot="target"
+                  ${ref(this.#h)}
+                >
                   ${this.label}
                 </div>
               </glide-core-tooltip>
@@ -97,6 +102,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
               <input
                 aria-describedby="summary description"
                 aria-invalid=${this.#l}
+                class="input"
                 data-test="input"
                 id="input"
                 type="checkbox"
@@ -107,7 +113,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
                 @change=${this.#n}
                 @input=${this.#n}
                 @keydown=${this.#d}
-                ${ref(this.#a)}
+                ${ref(this.#s)}
               />
 
               <div
@@ -132,4 +138,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var a,o=arguments.length
                   >`))}
             </div>
           </glide-core-private-label>`))}
-    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#s.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#s.setValidity({customError:!1},"",this.#a.value):this.#s.setValidity({customError:!0,valueMissing:this.#s.validity.valueMissing}," ",this.#a.value)}setValidity(e,t){this.validityMessage=t,this.#s.setValidity(e," ",this.#a.value)}get willValidate(){return this.#s.willValidate}updated(){this.#a.value&&(this.#a.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateSize="large",this.required=!1,this.isReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#a=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#r=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#s=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#a;#s;#o;#e;#h;#i;#r;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.isReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([state()],GlideCoreCheckbox.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;
+    </div>`}reportValidity(){this.privateIsReportValidityOrSubmit=!0;const e=this.#a.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#a.setValidity({customError:!1},"",this.#s.value):this.#a.setValidity({customError:!0,valueMissing:this.#a.validity.valueMissing}," ",this.#s.value)}setValidity(e,t){this.validityMessage=t,this.#a.setValidity(e," ",this.#s.value)}get willValidate(){return this.#a.willValidate}updated(){this.#s.value&&(this.#s.value.indeterminate=this.indeterminate)}constructor(){super(),this.checked=!1,this.internallyInert=!1,this.disabled=!1,this.hideLabel=!1,this.indeterminate=!1,this.orientation="horizontal",this.name="",this.privateLabelTooltipOffset=4,this.privateShowLabelTooltip=!1,this.privateDisableLabelTooltip=!1,this.privateSize="large",this.required=!1,this.privateIsReportValidityOrSubmit=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isLabelOverflow=!1,this.#s=createRef(),this.#e="",this.#h=createRef(),this.#i="",this.#r=({formData:e})=>{this.checked&&this.name&&this.value&&!this.disabled&&e.append(this.name,this.value)},this.#a=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.privateIsReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#s;#a;#o;#e;#h;#i;#r;get#l(){return"minimal"===this.privateVariant?!this.validity.valid&&this.privateIsReportValidityOrSubmit:!this.disabled&&!this.validity.valid&&this.privateIsReportValidityOrSubmit}#c(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#n(e){e.target instanceof HTMLInputElement&&(this.checked=e.target.checked),this.indeterminate=!1,"change"===e.type&&this.dispatchEvent(new Event(e.type,e))}#d(e){"Enter"===e.key&&this.form?.requestSubmit()}#t(){this.#h.value&&(this.isLabelOverflow=this.#h.value.scrollWidth>this.#h.value.clientWidth)}};__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"checked",void 0),__decorate([property({attribute:"internally-inert",type:Boolean})],GlideCoreCheckbox.prototype,"internallyInert",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"disabled",void 0),__decorate([property({attribute:"hide-label",type:Boolean})],GlideCoreCheckbox.prototype,"hideLabel",void 0),__decorate([property({type:Boolean})],GlideCoreCheckbox.prototype,"indeterminate",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"label",null),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"orientation",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"name",void 0),__decorate([property({attribute:"private-label-tooltip-offset",reflect:!0,type:Number})],GlideCoreCheckbox.prototype,"privateLabelTooltipOffset",void 0),__decorate([property({attribute:"private-show-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateShowLabelTooltip",void 0),__decorate([property({attribute:"private-disable-label-tooltip",reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"privateDisableLabelTooltip",void 0),__decorate([property({attribute:"private-size"})],GlideCoreCheckbox.prototype,"privateSize",void 0),__decorate([property()],GlideCoreCheckbox.prototype,"privateSplit",void 0),__decorate([property({attribute:"private-variant"})],GlideCoreCheckbox.prototype,"privateVariant",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreCheckbox.prototype,"required",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"summary",void 0),__decorate([property({reflect:!0})],GlideCoreCheckbox.prototype,"value",null),__decorate([state()],GlideCoreCheckbox.prototype,"privateIsReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isBlurring",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isCheckingValidity",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"isLabelOverflow",void 0),__decorate([state()],GlideCoreCheckbox.prototype,"validityMessage",void 0),GlideCoreCheckbox=__decorate([customElement("glide-core-checkbox")],GlideCoreCheckbox);export default GlideCoreCheckbox;

package/dist/checkbox.styles.js

@@ -1,5 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";export default[css`
-    ${focusOutline("input:focus-visible ~ .checkbox, input:focus ~ .checkbox.error")}
+    ${focusOutline(".input:focus-visible ~ .checkbox")}
+    ${focusOutline(".input:focus ~ .checkbox.error")}
   `,css`
     /*
 Most states are handled on the host. But ":checked" and ":indeterminate" are
@@ -77,7 +78,7 @@ when browsers support them.
       }
     }
 
-    input {
+    .input {
       block-size: 100%;
       cursor: inherit;
       inline-size: 100%;
@@ -187,6 +188,10 @@ when browsers support them.
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
+
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+      }
     }
 
     .description {

package/dist/drawer.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,s,o){var i,l=arguments.length,r=l<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,s):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,s,o);else for(var n=e.length-1;n>=0;n--)(i=e[n])&&(r=(l<3?i(r):l>3?i(t,s,r):i(t,s))||r);return l>3&&r&&Object.defineProperty(t,s,r),r};import{LitElement,html,nothing}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{owSlot}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.label="",this.pinned=!1,this.#e=createRef(),this.#t=createRef(),this.#s=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#s}set open(e){this.#s=e,this.#s?(this.#e?.value?.addEventListener("transitionend",(()=>{this.#e?.value?.focus()}),{once:!0}),this.#e?.value?.classList?.add("open")):(this.#e?.value?.addEventListener("transitionend",(()=>{this.#e?.value?.classList?.remove("open"),this.#e?.value?.classList?.remove("closing"),this.dispatchEvent(new Event("close",{bubbles:!0}))}),{once:!0}),this.#e?.value?.classList?.add("closing"))}close(){this.open=!1}firstUpdated(){owSlot(this.#t.value),this.#s&&this.#e?.value?.classList?.add("open")}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test="${this.#s?"open":"closed"}" @keydown="${this.#o}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#i}" ${ref(this.#t)}></slot></aside>`}show(){this.open=!0}#e;#t;#s;#i(){owSlot(this.#t.value)}#o(e){"Escape"===e.key&&(e.preventDefault(),this.close())}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;
+var __decorate=this&&this.__decorate||function(e,t,i,s){var o,a=arguments.length,n=a<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 l=e.length-1;l>=0;l--)(o=e[l])&&(n=(a<3?o(n):a>3?o(t,i,n):o(t,i))||n);return a>3&&n&&Object.defineProperty(t,i,n),n};import{LitElement,html,nothing}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{owSlot}from"./library/ow.js";import styles from"./drawer.styles.js";let GlideCoreDrawer=class GlideCoreDrawer extends LitElement{constructor(){super(...arguments),this.label="",this.pinned=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get open(){return this.#i}set open(e){this.#i=e,this.#i?(async()=>{this.#s?.cancel(),this.#e?.value?.classList?.add("open"),this.#o=this.#e?.value?.animate({transform:["translateX(100%)","translateX(0)"]},{duration:300,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[0,1]},{duration:300,fill:"forwards",easing:"ease-in",composite:"add"}),await(this.#o?.finished),this.#e?.value?.focus()})():(async()=>{this.#o?.cancel(),this.#s=this.#e?.value?.animate({transform:["translateX(0)","translateX(100%)"]},{duration:300,fill:"forwards",easing:"cubic-bezier(0.33, 1, 0.68, 1)"}),this.#e?.value?.animate({opacity:[1,0]},{duration:300,fill:"forwards",composite:"add"}),await(this.#s?.finished),this.#e?.value?.classList?.remove("open"),this.dispatchEvent(new Event("close",{bubbles:!0}))})()}close(){this.open=!1}firstUpdated(){owSlot(this.#t.value),this.#i&&this.#e?.value?.classList?.add("open")}render(){return html`<aside class="${classMap({component:!0,pinned:this.pinned})}" tabindex="-1" data-test="${this.#i?"open":"closed"}" @keydown="${this.#a}" ${ref(this.#e)} aria-label="${this.label||nothing}"><slot @slotchange="${this.#n}" ${ref(this.#t)}></slot></aside>`}show(){this.open=!0}#e;#s;#t;#i;#o;#n(){owSlot(this.#t.value)}#a(e){"Escape"===e.key&&(e.preventDefault(),this.close())}};__decorate([property()],GlideCoreDrawer.prototype,"label",void 0),__decorate([property({type:Boolean})],GlideCoreDrawer.prototype,"pinned",void 0),__decorate([property({reflect:!0,type:Boolean})],GlideCoreDrawer.prototype,"open",null),GlideCoreDrawer=__decorate([customElement("glide-core-drawer")],GlideCoreDrawer);export default GlideCoreDrawer;

package/dist/drawer.styles.js

@@ -24,23 +24,12 @@ import{css}from"lit";export default[css`
     }
 
     .open {
-      /* prefix required for Safari */
       /* stylelint-disable-next-line property-no-vendor-prefix */
       -webkit-backdrop-filter: blur(25px);
       backdrop-filter: blur(25px);
       block-size: auto;
       inline-size: var(--width, 27.375rem);
       inset: 0 0 0 auto;
-      opacity: 1;
-      transform: none;
-      transition:
-        transform 0.3s cubic-bezier(0.33, 1, 0.68, 1),
-        opacity 0.3s ease-in;
       visibility: visible;
     }
-
-    .closing {
-      transform: translateX(100%);
-      transition: transform 0.3s cubic-bezier(0.33, 1, 0.68, 1);
-    }
   `];

package/dist/dropdown.d.ts

@@ -73,11 +73,14 @@ export default class GlideCoreDropdown extends LitElement {
     setValidity(flags?: ValidityStateFlags, message?: string): void;
     constructor();
     private ariaActivedescendant;
+    private inputValue;
     private isBlurring;
     private isCheckingValidity;
     private isCommunicateItemCountToScreenreaders;
     private isFilterable;
     private isFiltering;
+    private isInputOverflow;
+    private isInputTooltipOpen;
     private isInternalLabelOverflow;
     private isInternalLabelTooltipOpen;
     private isNoResults;

package/dist/dropdown.js

@@ -1,4 +1,4 @@
-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{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 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?setTimeout((()=>{this.updateComplete.then((()=>{this.#o.value&&this.selectedOptions.length>0&&(this.#o.value.value=this.selectedOptions[0].label)}))})):this.#s!==e&&this.#l(),this.#s=e}get open(){return this.#n}set open(e){if(this.#n=e,!e||this.disabled){if(!this.multiple&&this.#o.value&&this.selectedOptions.length>0){this.#o.value.value=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()}else this.#i()}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.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`."));for(const t of this.#a)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#p?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#u.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#o.value?(this.#o.value.click(),this.#o.value.select()):this.#v.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.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.#m,{capture:!0})}createRenderRoot(){return this.#f=super.createRenderRoot(),this.#f}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#g),document.removeEventListener("click",this.#m,{capture:!0})}async filter(e){return this.#a.filter((({label:t})=>t.toLowerCase().includes(e.toLowerCase().trim())))}firstUpdated(){if(owSlotType(this.#b.value,[GlideCoreDropdownOption,Text]),this.#O.value&&(this.#O.value.popover="manual"),this.open&&!this.disabled&&this.#i(),this.#E.value){new ResizeObserver((()=>{this.#h()})).observe(this.#E.value)}if(this.#w.value){new ResizeObserver((()=>{this.#w.value&&(this.isInternalLabelOverflow=this.#w.value.scrollWidth>this.#w.value.clientWidth)})).observe(this.#w.value)}}focus(e){this.filterable||this.isFilterable?this.#o.value?.focus(e):this.#v.value?.focus(e)}get form(){return this.#u.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#u.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#o.value:this.#v.value),this.#u.validity):this.required&&this.#u.validity.valueMissing&&this.selectedOptions.length>0?(this.#u.setValidity({}),this.#u.validity):this.#u.validity}get willValidate(){return this.#u.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#g)}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"./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{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 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){if(this.#n=e,!e||this.disabled){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()}else this.#i()}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.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`."));for(const t of this.#a)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#p?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#u.checkValidity();return this.isCheckingValidity=!1,e}click(){this.filterable||this.isFilterable?(this.#o.value?.click(),this.#o.value?.select()):this.#v.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.#m,{capture:!0})}createRenderRoot(){return this.#f=super.createRenderRoot(),this.#f}disconnectedCallback(){super.disconnectedCallback(),this.form?.removeEventListener("formdata",this.#g),document.removeEventListener("click",this.#m,{capture:!0})}async filter(e){return this.#a.filter((({label:t})=>t.toLowerCase().includes(e.toLowerCase().trim())))}firstUpdated(){if(owSlotType(this.#b.value,[GlideCoreDropdownOption,Text]),this.#O.value&&(this.#O.value.popover="manual"),this.open&&!this.disabled&&this.#i(),this.#E.value){new ResizeObserver((()=>{this.#h()})).observe(this.#E.value)}if(this.#w.value){new ResizeObserver((()=>{this.#w.value&&(this.isInternalLabelOverflow=this.#w.value.scrollWidth>this.#w.value.clientWidth)})).observe(this.#w.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.#v.value?.focus(e)}get form(){return this.#u.form}get validity(){return this.required&&0===this.selectedOptions.length?(this.#u.setValidity({customError:Boolean(this.validityMessage),valueMissing:!0}," ",this.filterable||this.isFilterable?this.#o.value:this.#v.value),this.#u.validity):this.required&&this.#u.validity.valueMissing&&this.selectedOptions.length>0?(this.#u.setValidity({}),this.#u.validity):this.#u.validity}get willValidate(){return this.#u.willValidate}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#g)}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.#y}
       ${ref(this.#E)}
@@ -24,8 +24,8 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
           <div
             class=${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#R,readonly:this.readonly,multiple:this.multiple})}
             @click=${this.#$}
-            @mousedown=${this.#D}
-            ${ref(this.#I)}
+            @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">
@@ -69,7 +69,17 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
                 data-test="single-select-icon-slot"
                 name="icon:${this.selectedOptions.at(0)?.value}"
               ></slot>`))}
-            ${when(this.filterable||this.isFilterable,(()=>html`<input
+
+            <glide-core-tooltip
+              class=${classMap({"input-tooltip":!0,visible:this.filterable||this.isFilterable})}
+              offset=${8}
+              ?disabled=${this.open||!this.isInputOverflow}
+              ?open=${!this.open&&this.isInputTooltipOpen}
+            >
+              <div aria-hidden="true">${this.inputValue}</div>
+
+              <div class="input-container" slot="target">
+                <input
                   aria-activedescendant=${this.ariaActivedescendant}
                   aria-controls="options"
                   aria-describedby="description"
@@ -86,26 +96,35 @@ 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}
-                  @focusin=${this.#L}
-                  @focusout=${this.#_}
+                  @blur=${this.#L}
+                  @focus=${this.#_}
                   @input=${this.#B}
                   @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"
+                    >
+                      …
+                    </span>`))}
+
                 <span
-                  aria-label=${this.#M.term("itemCount",this.itemCount.toString())}
+                  aria-label=${this.#V.term("itemCount",this.itemCount.toString())}
                   aria-live="assertive"
                   class="item-count"
                   data-test="item-count"
                   id="item-count"
-                ></span>`))}
+                ></span>
+              </div>
+            </glide-core-tooltip>
 
             <glide-core-tooltip
               class=${classMap({"internal-label-tooltip":!0,visible:Boolean(this.internalLabel)})}
-              data-test="internal-label-tooltip"
               offset=${8}
-              ?disabled=${this.open||!this.isInternalLabelOverflow}
+              ?disabled=${this.open||this.multiple||this.filterable||this.isFilterable||!this.isInternalLabelOverflow}
               ?open=${!this.open&&this.isInternalLabelTooltipOpen}
             >
               <div aria-hidden="true">${this.internalLabel}</div>
@@ -140,11 +159,11 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
               ${when(!this.multiple&&this.selectedOptions.length>0&&this.selectedOptions[0].editable,(()=>html`<glide-core-icon-button
                     class="edit-button"
                     data-test="edit-button"
-                    label=${this.#M.term("editOption",this.selectedOptions[0].label)}
+                    label=${this.#V.term("editOption",this.selectedOptions[0].label)}
                     tabindex=${this.disabled||this.readonly?"-1":"0"}
                     variant="tertiary"
                     ?disabled=${this.disabled||this.readonly}
-                    @click=${this.#V}
+                    @click=${this.#M}
                     ${ref(this.#z)}
                   >
                     ${pencilIcon}
@@ -169,7 +188,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
                 ${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">
                       ${magnifyingGlassIcon}
                     </div>`),(()=>html`<svg
-                      aria-label=${this.#M.term("open")}
+                      aria-label=${this.#V.term("open")}
                       width="16"
                       height="16"
                       viewBox="0 0 24 24"
@@ -204,15 +223,15 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
               @focusin=${this.#q}
               @mousedown=${this.#U}
               @mouseover=${this.#P}
-              @private-editable-change=${this.#K}
-              @private-label-change=${this.#W}
+              @private-editable-change=${this.#W}
+              @private-label-change=${this.#K}
               @private-selected-change=${this.#J}
               @private-value-change=${this.#Q}
             >
               <glide-core-dropdown-option
                 class="select-all"
                 data-test="select-all"
-                label=${this.#M.term("selectAll")}
+                label=${this.#V.term("selectAll")}
                 private-size=${this.size}
                 private-multiple
                 ?hidden=${!this.selectAll||!this.multiple||this.isFiltering}
@@ -228,7 +247,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
             </div>
 
             ${when(this.isNoResults,(()=>html`<div class="no-results">
-                ${this.#M.term("noResults")}
+                ${this.#V.term("noResults")}
               </div>`))}
 
             <footer
@@ -274,4 +293,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var o,l=arguments.length
               >`))}
         </div>
       </glide-core-private-label>
-    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#u.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#u.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#o.value:this.#v.value):this.#u.setValidity({customError:!0,valueMissing:this.#u.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#o.value:this.#v.value)}setValidity(e,t){this.validityMessage=t,this.#u.setValidity(e," ",this.filterable||this.isFilterable?this.#o.value:this.#v.value)}constructor(){super(),this.hideLabel=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.ariaActivedescendant="",this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInternalLabelOverflow=!1,this.isInternalLabelTooltipOpen=!1,this.isNoResults=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#ie=createRef(),this.#E=createRef(),this.#b=createRef(),this.#I=createRef(),this.#z=createRef(),this.#o=createRef(),this.#w=createRef(),this.#se=!1,this.#e=!1,this.#oe=!1,this.#s=!1,this.#d=!1,this.#n=!1,this.#le=!1,this.#ne=!1,this.#ae=!1,this.#re=!1,this.#M=new LocalizeController(this),this.#O=createRef(),this.#v=createRef(),this.#X=createRef(),this.#r="large",this.#k=createRef(),this.#c=[],this.#m=()=>{this.#se?setTimeout((()=>{this.#se=!1})):this.open=!1},this.#g=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#u=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#ie;#pe;#E;#b;#I;#z;#o;#w;#u;#se;#e;#oe;#s;#d;#n;#le;#ne;#ae;#re;#M;#O;#de;#v;#X;#f;#r;#k;#c;#m;#g;#t(){this.#pe?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#de=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#R(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#Z(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#ee(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#de=this.activeOption,this.activeOption.privateActive=!1)}#te(){this.activeOption&&!this.#le&&(this.#de=this.activeOption,this.activeOption.privateActive=!1)}#y(){this.#se=!0}#Y(){owSlotType(this.#b.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.#he?.at(0);!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#de=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#de=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#X.value&&(this.#X.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)}))}#A(e){this.open&&this.#de&&e.relatedTarget===this.#ie.value&&(this.#de.privateActive=!0,this.#de.privateIsTooltipOpen=!this.#de.editable)}#C(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#f?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#oe&&(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.#z.value)return void(this.#se=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#f?.activeElement===this.#ie.value)return this.focus(),void(this.#de&&(this.#de.privateActive=!0,this.#de.privateIsEditActive=this.#de.editable,this.#de.privateIsTooltipOpen=!this.#de.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#f?.activeElement===this.#ie.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#ce?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#de=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ie.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#f?.activeElement===this.#ie.value&&this.focus());const t=e.target===this.#v.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.#ce&&this.#ce.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#re=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#X.value&&this.#ue(),this.#re=!1,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}))}const t=this.#he?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#he&&"number"==typeof t){e.preventDefault();const i=this.#he.at(t-1);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.#de=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#he&&"number"==typeof t){e.preventDefault();const i=this.#he.at(t+1);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.#de=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#he){e.preventDefault();const t=this.#he.at(0);return void(t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#de=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#he){e.preventDefault();const t=this.#he.at(-1);return void(t&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#de=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#$(e){if(!this.disabled&&!this.readonly)if(this.#oe)this.#oe=!1;else if(e.target instanceof Node&&this.#z.value?.contains(e.target))this.selectedOptions[0].dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}));else{if(this.#re||!this.open)return 0!==e.detail?(this.open=!0,this.focus(),this.#le=!0,void setTimeout((()=>{this.#le=!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()}#V(){this.open=!1}get#a(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#p(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#X.value)return[this.#X.value,...e]}get#ce(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#he(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#X.value&&!this.#X.value.hidden&&e?[this.#X.value,...e]:e}#L(){this.#o.value?.select()}#_(){this.isCommunicateItemCountToScreenreaders=!1}async#B(e){let t;ow(this.#o.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,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.#ce?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#de=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#ce||0===this.#ce.length,this.isCommunicateItemCountToScreenreaders=!0,this.#ce&&(this.itemCount=this.#ce.length)}}#G(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#oe=!0,t.selected=!1,void(this.#oe=!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.#oe=!0;for(const e of i)e.selected=!1;this.#oe=!1}else;}#j(e){if(e.target instanceof Element){const t=e.target.closest("glide-core-dropdown-option");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("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#K(){this.requestUpdate()}#q(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#de=e.target)}#H(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#X.value&&this.#ue(),this.#l(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#W(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))):this.#o.value?this.#o.value.value=this.selectedOptions[0].label:this.requestUpdate())}#U(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#P(e){e.target instanceof GlideCoreDropdownOption&&this.#he&&(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#de=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#f?.activeElement===this.#ie.value&&this.focus())}#J(e){e.target!==this.#X.value&&!this.#ae&&this.#X.value&&(this.#X.value.selected=this.isAllSelected),this.isFiltering=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple?(this.#c=e.target.selected&&e.target.value?[...this.value,e.target.value]:this.value.filter((t=>e.target instanceof GlideCoreDropdownOption&&t!==e.target.value)),this.#o.value&&!this.#oe&&(this.#o.value.value="")):!this.multiple&&e.target.selected&&(this.#c=e.target.value?[e.target.value]:[],this.#o.value&&(this.#o.value.value=e.target.label))),this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))}#Q(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]:[])}#N(){this.isInternalLabelTooltipOpen=!0}#x(){this.isInternalLabelTooltipOpen=!1}#F(){this.#oe=!0,this.open=!1}async#T(e){this.#oe=!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.#oe=!1}))}else setTimeout((()=>{this.focus(),this.#oe=!1}));this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#ue(){ow(this.#X.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#ae=!0;for(const e of this.#a)e.selected=this.#X.value.selected;this.#ae=!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.#ne&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ne=!0,await this.updateComplete,this.#h()):this.#ne=!1}}#i(){this.#pe?.(),this.#de&&(this.#de.privateActive=!0,this.ariaActivedescendant=this.#de.id),this.#I.value&&this.#O.value&&(this.#pe=autoUpdate(this.#I.value,this.#O.value,(()=>{(async()=>{if(this.#I.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#I.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({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,"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,"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;
+    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const e=this.#u.reportValidity();return this.requestUpdate(),e}setCustomValidity(e){this.validityMessage=e,""===e?this.#u.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#o.value:this.#v.value):this.#u.setValidity({customError:!0,valueMissing:this.#u.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#o.value:this.#v.value)}setValidity(e,t){this.validityMessage=t,this.#u.setValidity(e," ",this.filterable||this.isFilterable?this.#o.value:this.#v.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.#ie=createRef(),this.#E=createRef(),this.#b=createRef(),this.#D=createRef(),this.#z=createRef(),this.#o=createRef(),this.#w=createRef(),this.#se=!1,this.#e=!1,this.#oe=!1,this.#s=!1,this.#d=!1,this.#n=!1,this.#le=!1,this.#ne=!1,this.#ae=!1,this.#re=!1,this.#V=new LocalizeController(this),this.#O=createRef(),this.#v=createRef(),this.#X=createRef(),this.#r="large",this.#k=createRef(),this.#c=[],this.#m=()=>{this.#se?setTimeout((()=>{this.#se=!1})):this.open=!1},this.#g=({formData:e})=>{this.name&&this.value.length>0&&!this.disabled&&e.append(this.name,JSON.stringify(this.value))},this.#u=this.attachInternals(),this.addEventListener("invalid",(e=>{if(e?.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#ie;#pe;#E;#b;#D;#z;#o;#w;#u;#se;#e;#oe;#s;#d;#n;#le;#ne;#ae;#re;#V;#O;#de;#v;#X;#f;#r;#k;#c;#m;#g;#t(){this.#pe?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#de=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#R(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#Z(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#ee(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#de=this.activeOption,this.activeOption.privateActive=!1)}#te(){this.activeOption&&!this.#le&&(this.#de=this.activeOption,this.activeOption.privateActive=!1)}#y(){this.#se=!0}#Y(){owSlotType(this.#b.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.#he?.find((e=>!e.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#de=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(this.#de=e,this.ariaActivedescendant=this.open?e.id:"",e.privateActive=!0),this.#X.value&&(this.#X.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)}))}#A(e){this.open&&this.#de&&e.relatedTarget===this.#ie.value&&(this.#de.privateActive=!0,this.#de.privateIsTooltipOpen=!this.#de.editable)}#C(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#f?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#oe&&(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.#z.value)return void(this.#se=!0);if(!this.open&&"Enter"===e.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===e.key&&this.#f?.activeElement===this.#ie.value)return this.focus(),void(this.#de&&(this.#de.privateActive=!0,this.#de.privateIsEditActive=this.#de.editable,this.#de.privateIsTooltipOpen=!this.#de.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#f?.activeElement===this.#ie.value)return void e.preventDefault();if(this.open&&"ArrowDown"===e.key&&this.addButtonLabel&&this.activeOption===this.#ce?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return e.preventDefault(),this.activeOption&&(this.#de=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#ie.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#f?.activeElement===this.#ie.value&&this.focus());const t=e.target===this.#v.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.#ce&&this.#ce.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return this.#re=!0,e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#X.value&&this.#ue(),this.#re=!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}))}const t=this.#he?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#he&&"number"==typeof t){e.preventDefault();const i=this.#he.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.#de=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#he&&"number"==typeof t){e.preventDefault();const i=this.#he.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.#de=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#he){e.preventDefault();const t=[...this.#he].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.#de=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#he){e.preventDefault();const t=[...this.#he].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.#de=t,t.privateActive=!0,t.privateIsTooltipOpen=!0,t.scrollIntoView({block:"nearest"})))}}}}#$(e){if(this.disabled||this.readonly)return;if(this.#oe)return void(this.#oe=!1);if(e.target instanceof Node&&this.#z.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.#re||!this.open||t&&!(e.target instanceof Element&&this.#v.value?.contains(e.target)))return 0!==e.detail?(this.open=!0,this.focus(),this.#le=!0,void setTimeout((()=>{this.#le=!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()}#M(){this.open=!1}get#a(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#p(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#X.value)return[this.#X.value,...e]}get#ce(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#he(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#X.value&&!this.#X.value.hidden&&e?[this.#X.value,...e]:e}#L(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#_(){this.#o.value?.select(),this.isInputTooltipOpen=!0}async#B(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.#ce?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#de=e,this.ariaActivedescendant=e.id,e.privateActive=!0),this.isNoResults=!this.#ce||0===this.#ce.length,this.isCommunicateItemCountToScreenreaders=!0,this.#ce&&(this.itemCount=this.#ce.length)}}#G(e){const t=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1)).at(-1);if(t&&"Backspace"===e.key&&!e.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#oe=!0,t.selected=!1,void(this.#oe=!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.#oe=!0;for(const e of i)e.selected=!1;this.#oe=!1}else;}#j(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}));if(t?.selected&&!this.multiple)return void(this.open=!1)}}#W(){this.requestUpdate()}#q(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#de=e.target)}#H(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#X.value&&this.#ue(),this.#l(),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))}#K(){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())}#U(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#P(e){if(e.target instanceof GlideCoreDropdownOption&&this.#he){if(e.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=e.target.id,this.#de=e.target,e.target.privateActive=!0,e.target.privateIsEditActive=!1,this.#f?.activeElement===this.#ie.value&&this.focus()}}#J(e){e.target!==this.#X.value&&!this.#ae&&this.#X.value&&(this.#X.value.selected=this.isAllSelected),this.isFiltering=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value),e.target instanceof GlideCoreDropdownOption&&(this.multiple?(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.#oe&&(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.#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()}))}#Q(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]:[])}#N(){this.isInternalLabelTooltipOpen=!0}#x(){this.isInternalLabelTooltipOpen=!1}#F(){this.#oe=!0,this.open=!1}async#T(e){this.#oe=!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.#oe=!1}))}else setTimeout((()=>{this.focus(),this.#oe=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0}))}#ue(){ow(this.#X.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#ae=!0;for(const e of this.#a)e.selected=this.#X.value.selected&&!e.disabled;this.#ae=!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.#ne&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ne=!0,await this.updateComplete,this.#h()):this.#ne=!1}}#i(){this.#pe?.(),this.#de&&(this.#de.privateActive=!0,this.ariaActivedescendant=this.#de.id),this.#D.value&&this.#O.value&&(this.#pe=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({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;

package/dist/dropdown.option.d.ts

@@ -13,6 +13,8 @@ export default class GlideCoreDropdownOption extends LitElement {
     #private;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    get disabled(): boolean;
+    set disabled(isDisabled: boolean);
     get editable(): boolean;
     set editable(isEditable: boolean);
     get label(): string;

package/dist/dropdown.option.js

@@ -1 +1 @@
-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{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="",this.#s=createRef(),this.#r=!1,this.#a=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:"closed"}}static{this.styles=styles}get editable(){return this.#o}set editable(e){this.#o=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get label(){return this.#l}set label(e){this.#l=e,setTimeout((()=>{this.#n()})),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.#c)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="option",this.tabIndex=-1,this.#p=new IntersectionObserver((()=>{this.checkVisibility()&&this.#n()})),this.#p.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#p?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected)}get value(){return this.#a}set value(e){this.dispatchEvent(new CustomEvent("private-value-change",{bubbles:!0,detail:{old:this.value,new:e}})),this.#a=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,[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.#d}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ${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,multiple:Boolean(this.isMultiple),[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#v}">${pencilIcon}</button>`))}`),(()=>html`<div class="${classMap({option:!0,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}" ?open="${this.privateIsTooltipOpen}"><div aria-hidden="true" data-test="tooltip">${this.label}</div><div class="label" data-test="label" slot="target" ${ref(this.#s)}>${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,[this.privateSize]:!0})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#v}">${pencilIcon}</button>`))}</div>`))}</div>`}#e;#t;#i;#p;#o;#l;#s;#r;#a;get#c(){return[...this.closest("glide-core-dropdown")?.querySelectorAll("glide-core-dropdown-option")??[]]}#d(e){e.stopPropagation()}#v(){this.privateIsEditActive=!1}#h(){this.privateIsEditActive=!0}#n(){this.#s.value&&(this.isLabelOverflow=this.#s.value.scrollWidth>this.#s.value.clientWidth)}};__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,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}"><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}#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;

package/dist/dropdown.option.styles.js

@@ -9,13 +9,16 @@ import{css}from"lit";export default[css`
       user-select: none;
 
       &.active {
-        background-color: var(--glide-core-surface-hover);
+        &:not(.disabled) {
+          background-color: var(--glide-core-surface-hover);
+        }
       }
     }
 
     .option {
       align-items: center;
       block-size: 100%;
+      color: var(--glide-core-text-body-1);
       display: flex;
       flex-grow: 1;
       overflow: hidden;
@@ -46,6 +49,10 @@ import{css}from"lit";export default[css`
           padding-inline-end: var(--glide-core-spacing-xs);
         }
       }
+
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
+      }
     }
 
     .checkbox {
@@ -162,7 +169,13 @@ import{css}from"lit";export default[css`
       padding-inline-start: var(--glide-core-spacing-xs);
 
       &.active {
-        color: var(--glide-core-text-primary-hover);
+        &:not(.disabled) {
+          color: var(--glide-core-text-primary-hover);
+        }
+      }
+
+      &.disabled {
+        color: var(--glide-core-icon-tertiary-disabled);
       }
 
       &.large {