@crowdstrike/glide-core 0.27.0 → 0.28.0

package/dist/dropdown.d.ts

@@ -1,4 +1,3 @@
-import './checkbox.js';
 import './icon-button.js';
 import './label.js';
 import './tooltip.js';
@@ -12,7 +11,7 @@ declare global {
 }
 /**
  * @attr {string} label
- * @attr {string} [add-button-label]
+ * @attr {boolean} [add-button=false]
  * @attr {boolean} [disabled=false]
  * @attr {boolean} [filterable=false]
  * @attr {boolean} [hide-label=false]
@@ -34,9 +33,9 @@ declare global {
  *
  * @slot {DropdownOption}
  * @slot {Element | string} [description] - Additional information or context
- * @slot {Element} [icon:value] - Icons for the selected option or options. Slot one icon per Dropdown Option. `<value>` should be equal to the `value` of each Dropdown Option.
+ * @slot {Element} [icon:value] - Icons for the selected Dropdown Option(s). Slot one icon per Dropdown Option. `<value>` should be equal to the `value` of each Dropdown Option.
  *
- * @fires {Event} add
+ * @fires {CustomEvent} add
  * @fires {Event} change
  * @fires {Event} input
  * @fires {Event} invalid
@@ -76,7 +75,7 @@ export default class Dropdown extends LitElement implements FormControl {
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
     label?: string;
-    addButtonLabel?: string;
+    addButton: boolean;
     /**
      * @default false
      */
@@ -115,12 +114,12 @@ export default class Dropdown extends LitElement implements FormControl {
     variant?: 'quiet';
     readonly version: string;
     private get activeOption();
+    private get areAllOptionsSelected();
+    private get areSomeOptionsSelected();
     checkValidity(): boolean;
     click(): void;
     private get selectedOptions();
-    private get lastSelectedOption();
-    private get isAllSelected();
-    private get isSomeSelected();
+    private get lastSelectedAndEnabledOption();
     private get internalLabel();
     connectedCallback(): void;
     createRenderRoot(): ShadowRoot;
@@ -142,14 +141,16 @@ export default class Dropdown extends LitElement implements FormControl {
     private hasNoAvailableOptions;
     private hasNoMatchingOptions;
     private inputValue;
+    private isAddButtonActive;
+    private isAddButtonVisible;
     private isBlurring;
     private isCheckingValidity;
     private isCommunicateItemCountToScreenreaders;
     private isFilterable;
     private isFiltering;
-    private isInputOverflow;
+    private isInputOverflowing;
     private isInputTooltipOpen;
-    private isInternalLabelOverflow;
+    private isInternalLabelOverflowing;
     private isInternalLabelTooltipOpen;
     private isReportValidityOrSubmit;
     private isShowSingleSelectIcon;

package/dist/dropdown.js

@@ -1,7 +1,7 @@
-var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length,n=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)n=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(o=t[a])&&(n=(l<3?o(n):l>3?o(e,i,n):o(e,i))||n);return l>3&&n&&Object.defineProperty(e,i,n),n};import"./checkbox.js";import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{range}from"lit/directives/range.js";import{map}from"lit/directives/map.js";import{styleMap}from"lit/directives/style-map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import onResize from"./library/on-resize.js";import DropdownOption from"./dropdown.option.js";import{LocalizeController}from"./library/localize.js";import Tag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";let Dropdown=class Dropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.open&&t?this.#e():this.open&&this.#i()}get filterable(){return this.#s}set filterable(t){this.#s!==t&&t&&!this.multiple?this.#o.value&&this.selectedOptions[0]?.label&&(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!==t&&this.#l(),this.#s=t}get open(){return this.#n}set open(t){const e=t!==this.#n;if(this.#n=t,t&&e&&!this.disabled)return this.hasNoAvailableOptions=0===this.#a.length,this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));if(!this.open&&e){!this.multiple&&this.#o.value&&this.selectedOptions[0]?.label?(this.#o.value.value=this.selectedOptions[0].label,this.inputValue=this.selectedOptions[0].label):(!this.multiple&&this.#o.value&&0===this.selectedOptions.length||this.multiple&&this.#o.value)&&(this.#o.value.value="",this.inputValue=""),this.isFiltering=!1,this.hasNoMatchingOptions=!1,this.isShowSingleSelectIcon=Boolean(this.selectedOptions.at(0)?.value);for(const t of this.#a)t.hidden=!1;this.#e(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}))}}get multiple(){return this.#r}set multiple(t){const e=this.#r&&!t,i=!this.#r&&t;this.#r=t,this.isShowSingleSelectIcon=!1;for(const i of this.#a)i.privateMultiple=t,e&&i!==this.lastSelectedOption&&(i.selected=!1);e&&this.lastSelectedOption?.value?this.value=[this.lastSelectedOption.value]:i&&this.lastSelectedOption&&(this.#o.value&&(this.#o.value.value=""),this.lastSelectedOption.privateUpdateCheckbox(),this.#p())}get value(){return this.#d}set value(t){if(this.#d=t,!this.multiple&&t.length>1)throw new Error("Only one value is allowed when not `multiple`.");!this.multiple&&0===this.value.length&&this.#o.value&&1===this.selectedOptions.length&&(this.#o.value.value="");for(const e of this.#a)this.#h=!0,e.selected=t.some((t=>t&&t===e.value)),this.#h=!1,e.selected&&e.disabled&&(e.disabled=!1)}get activeOption(){return this.#c?.find((({privateActive:t})=>t))}checkValidity(){this.isCheckingValidity=!0;const t=this.#u.checkValidity();return this.isCheckingValidity=!1,t}click(){this.filterable||this.isFilterable?(this.#o.value?.click(),this.#o.value?.select()):this.#v.value?.click()}get selectedOptions(){return this.#a.filter((t=>t instanceof DropdownOption&&t.selected&&!t.disabled))}get lastSelectedOption(){return this.#a.findLast((t=>t.selected))}get isAllSelected(){return this.#a.length>0&&this.#a.filter((({selected:t})=>t)).length===this.#a.filter((({disabled:t})=>!t)).length}get isSomeSelected(){return this.#a.some((({selected:t})=>t))}get internalLabel(){const t=this.filterable||this.isFilterable;return t||0!==this.selectedOptions.length?this.multiple||t||!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(t){return this.#a.filter((({label:e})=>e?.toLowerCase().includes(t.toLowerCase().trim())))}firstUpdated(){this.#b.value&&(this.#b.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedOption&&this.#o.value&&this.lastSelectedOption.label&&(this.#o.value.value=this.lastSelectedOption.label);if(this.#a.every((({selected:t})=>!t)))for(const t of this.#a)t.selected=this.value.some((e=>""!==e&&e===t.value)),t.selected&&t.disabled&&(t.disabled=!1)}focus(t){this.filterable||this.isFilterable?this.#o.value?.focus(t):this.#v.value?.focus(t)}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}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#g)}formResetCallback(){for(const t of this.#a){t.hasAttribute("selected")||(t.selected=!1)}const t=this.#a.filter((t=>t.hasAttribute("selected"))),e=t.at(-1)?.value;this.#d=this.multiple&&t.length>0?t.map((({value:t})=>t)):!this.multiple&&e?[e]:[]}render(){return html`<div
+var __decorate=this&&this.__decorate||function(t,e,i,s){var n,l=arguments.length,o=l<3?e:null===s?s=Object.getOwnPropertyDescriptor(e,i):s;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)o=Reflect.decorate(t,e,i,s);else for(var a=t.length-1;a>=0;a--)(n=t[a])&&(o=(l<3?n(o):l>3?n(e,i,o):n(e,i))||o);return l>3&&o&&Object.defineProperty(e,i,o),o};import"./icon-button.js";import"./label.js";import"./tooltip.js";import{html,LitElement}from"lit";import{autoUpdate,computePosition,flip,offset}from"@floating-ui/dom";import{classMap}from"lit/directives/class-map.js";import{createRef,ref}from"lit/directives/ref.js";import{customElement,property,state}from"lit/decorators.js";import{ifDefined}from"lit/directives/if-defined.js";import{repeat}from"lit/directives/repeat.js";import{range}from"lit/directives/range.js";import{map}from"lit/directives/map.js";import{unsafeHTML}from"lit/directives/unsafe-html.js";import{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import onResize from"./library/on-resize.js";import DropdownOption from"./dropdown.option.js";import{LocalizeController}from"./library/localize.js";import Tag from"./tag.js";import chevronIcon from"./icons/chevron.js";import magnifyingGlassIcon from"./icons/magnifying-glass.js";import pencilIcon from"./icons/pencil.js";import styles from"./dropdown.styles.js";import assertSlot from"./library/assert-slot.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let Dropdown=class Dropdown extends LitElement{static{this.formAssociated=!0}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get disabled(){return this.#t}set disabled(t){this.#t=t,this.open&&t?this.#e():this.open&&this.#i()}get filterable(){return this.#s}set filterable(t){this.#s!==t&&t&&!this.multiple?this.#n.value&&this.lastSelectedAndEnabledOption?.label&&(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.#s!==t&&this.#l(),this.#s=t}get open(){return this.#o}set open(t){const e=t!==this.#o;if(this.#o=t,t&&e&&!this.disabled)return this.#i(),void this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0}));!this.open&&e&&(!this.multiple&&this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label):(!this.multiple&&this.#n.value&&0===this.selectedOptions.length||this.multiple&&this.#n.value)&&(this.#n.value.value="",this.inputValue=""),this.#l(),this.#e(),this.dispatchEvent(new Event("toggle",{bubbles:!0,composed:!0})))}get multiple(){return this.#a}set multiple(t){const e=this.#a&&!t,i=!this.#a&&t;this.#a=t,this.isShowSingleSelectIcon=!!e&&Boolean(this.lastSelectedAndEnabledOption?.value);for(const i of this.#d)i.privateMultiple=t,e&&i!==this.lastSelectedAndEnabledOption&&(i.selected=!1);e&&this.lastSelectedAndEnabledOption?.value?this.value=[this.lastSelectedAndEnabledOption.value]:i&&this.lastSelectedAndEnabledOption&&(this.#n.value&&(this.#n.value.value=""),this.lastSelectedAndEnabledOption.privateUpdateCheckbox(),this.#r())}get value(){return this.#p}set value(t){if(this.#p=t,!this.multiple&&t.length>1)throw new Error("Only one value is allowed when not `multiple`.");!this.multiple&&0===this.value.length&&this.#n.value&&1===this.selectedOptions.length&&(this.#n.value.value="");for(const e of this.#d)this.#h=!0,e.selected=t.some((t=>t&&t===e.value)),this.#h=!1,e.selected&&e.disabled&&(e.disabled=!1)}get activeOption(){return this.#c?.find((({privateActive:t})=>t))}get areAllOptionsSelected(){return this.#d.length>0&&this.#d.filter((({selected:t})=>t)).length===this.#d.filter((({disabled:t})=>!t)).length}get areSomeOptionsSelected(){return this.#d.some((({selected:t})=>t))}checkValidity(){this.isCheckingValidity=!0;const t=this.#u.checkValidity();return this.isCheckingValidity=!1,t}click(){this.filterable||this.isFilterable?(this.#n.value?.click(),this.#n.value?.select()):this.#v.value?.click()}get selectedOptions(){return this.#d.filter((t=>t instanceof DropdownOption&&t.selected&&!t.disabled))}get lastSelectedAndEnabledOption(){return this.#d.findLast((t=>t.selected&&!t.disabled))}get internalLabel(){const t=this.filterable||this.isFilterable;return t||0!==this.selectedOptions.length?this.multiple||t||!this.lastSelectedAndEnabledOption?.label?"":this.lastSelectedAndEnabledOption.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.#b),document.removeEventListener("click",this.#m,{capture:!0})}async filter(t){return this.#d.filter((({label:e})=>e?.toLowerCase().includes(t.toLowerCase().trim())))}firstUpdated(){this.#g.value&&(this.#g.value.popover="manual"),this.open&&!this.disabled&&this.#i(),!this.multiple&&this.lastSelectedAndEnabledOption&&this.#n.value&&this.lastSelectedAndEnabledOption.label&&(this.#n.value.value=this.lastSelectedAndEnabledOption.label);if(this.#d.every((({selected:t})=>!t)))for(const t of this.#d)t.selected=this.value.some((e=>""!==e&&e===t.value)),t.selected&&t.disabled&&(t.disabled=!1)}focus(t){this.filterable||this.isFilterable?this.#n.value?.focus(t):this.#v.value?.focus(t)}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.#n.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}formAssociatedCallback(){this.form?.addEventListener("formdata",this.#b)}formResetCallback(){for(const t of this.#d){t.hasAttribute("selected")||(t.selected=!1)}const t=this.#d.filter((t=>t.hasAttribute("selected"))),e=t.at(-1)?.value;this.#p=this.multiple&&t.length>0?t.map((({value:t})=>t)):!this.multiple&&e?[e]:[]}render(){return html`<div
       class=${classMap({component:!0,horizontal:"horizontal"===this.orientation,vertical:"vertical"===this.orientation})}
       @mouseup=${this.#O}
-      ${onResize(this.#p.bind(this))}
+      ${onResize(this.#r.bind(this))}
       ${ref(this.#E)}
     >
       <glide-core-private-label
@@ -10,7 +10,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
         split=${ifDefined(this.privateSplit??void 0)}
         tooltip=${ifDefined(this.tooltip)}
         ?disabled=${this.disabled}
-        ?error=${this.#y}
+        ?error=${this.#A}
         ?hide=${this.hideLabel}
         ?required=${this.required}
       >
@@ -19,15 +19,14 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
         <div
           class="dropdown-and-options"
           slot="control"
-          @focusin=${this.#w}
-          @focusout=${this.#R}
-          @keydown=${this.#A}
+          @focusout=${this.#y}
+          @keydown=${this.#w}
         >
           <div
-            class=${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#y,readonly:this.readonly,multiple:this.multiple})}
-            @click=${this.#S}
-            @mousedown=${this.#$}
-            ${ref(this.#D)}
+            class=${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#A,readonly:this.readonly,multiple:this.multiple})}
+            @click=${this.#R}
+            @mousedown=${this.#S}
+            ${ref(this.#$)}
           >
             <span class="selected-option-labels" id="selected-option-labels">
               ${this.selectedOptions.map((({label:t})=>html`<span data-test="selected-option-label">
@@ -40,10 +39,10 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
                 class="tags"
                 ${ref(this.#I)}
               >
-                ${repeat(this.selectedOptions,(({id:t})=>t),(({id:t,editable:e,label:i,value:s},o)=>html`<li
-                      class=${classMap({"tag-container":!0,hidden:o>this.tagOverflowLimit-1})}
+                ${repeat(this.selectedOptions,(({id:t})=>t),(({id:t,editable:e,label:i,value:s},n)=>html`<li
+                      class=${classMap({"tag-container":!0,hidden:n>this.tagOverflowLimit-1})}
                       data-test="tag-container"
-                      data-test-hidden=${o>this.tagOverflowLimit-1}
+                      data-test-hidden=${n>this.tagOverflowLimit-1}
                     >
                       <glide-core-tag
                         data-test="tag"
@@ -52,8 +51,8 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
                         removable
                         ?disabled=${this.disabled||this.readonly}
                         ?private-editable=${e}
-                        @edit=${this.#F}
-                        @remove=${this.#k.bind(this,t)}
+                        @edit=${this.#D}
+                        @remove=${this.#B.bind(this,t)}
                       >
                         ${when(s,(()=>html`
                             <slot
@@ -62,7 +61,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
                               slot="icon"
                             >
                               <!--
-                                Icons for the selected option or options.
+                                Icons for the selected Dropdown Option(s).
                                 Slot one icon per Dropdown Option.
                                 \`<value>\` should be equal to the \`value\` of each Dropdown Option.
 
@@ -77,7 +76,7 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
             ${when(this.isShowSingleSelectIcon,(()=>html`<slot
                 class=${classMap({"single-select-icon-slot":!0,quiet:"quiet"===this.variant})}
                 data-test="single-select-icon-slot"
-                name="icon:${this.selectedOptions.at(0)?.value}"
+                name="icon:${this.lastSelectedAndEnabledOption?.value}"
               >
                 <!--
                   @type {Element}
@@ -90,9 +89,9 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
               data-test="input-tooltip"
               label=${this.inputValue}
               offset=${8}
-              ?disabled=${this.open||!this.isInputOverflow}
+              ?disabled=${this.open||!this.isInputOverflowing}
               ?open=${!this.open&&this.isInputTooltipOpen}
-              @toggle=${this.#C}
+              @toggle=${this.#k}
               screenreader-hidden
             >
               <div class="input-container" slot="target">
@@ -113,20 +112,20 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
                   tabindex=${this.disabled?"-1":"0"}
                   ?disabled=${this.disabled}
                   ?readonly=${this.readonly}
-                  @blur=${this.#T}
-                  @focus=${this.#_}
-                  @input=${this.#L}
-                  @keydown=${this.#B}
+                  @blur=${this.#F}
+                  @focus=${this.#C}
+                  @input=${this.#_}
+                  @keydown=${this.#T}
                   ${onResize(this.#V.bind(this))}
-                  ${ref(this.#o)}
+                  ${ref(this.#n)}
                 />
 
-                ${when(!this.multiple&&this.isInputOverflow&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span aria-hidden="true" data-test="ellipsis">
+                ${when(!this.multiple&&this.isInputOverflowing&&this.inputValue===this.selectedOptions.at(-1)?.label,(()=>html`<span aria-hidden="true" data-test="ellipsis">
                       …
                     </span>`))}
 
                 <span
-                  aria-label=${this.#M.term("itemCount",this.itemCount.toString())}
+                  aria-label=${this.#L.term("itemCount",this.itemCount.toString())}
                   aria-live="assertive"
                   class="item-count"
                   data-test="item-count"
@@ -140,17 +139,17 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
               data-test="internal-label-tooltip"
               label=${this.internalLabel??""}
               offset=${8}
-              ?disabled=${this.open||this.multiple||this.filterable||this.isFilterable||!this.isInternalLabelOverflow}
+              ?disabled=${this.open||this.multiple||this.filterable||this.isFilterable||!this.isInternalLabelOverflowing}
               ?open=${!this.open&&this.isInternalLabelTooltipOpen}
-              @toggle=${this.#C}
+              @toggle=${this.#k}
               screenreader-hidden
             >
               <div
                 class="internal-label"
                 data-test="internal-label"
                 slot="target"
-                ${onResize(this.#N.bind(this))}
-                ${ref(this.#j)}
+                ${onResize(this.#M.bind(this))}
+                ${ref(this.#N)}
               >
                 ${when(this.internalLabel===this.placeholder,(()=>html`<span
                       class=${classMap({placeholder:!0,quiet:"quiet"===this.variant})}
@@ -174,15 +173,15 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
 
                     more
                   </div>`))}
-              ${when(!this.multiple&&this.selectedOptions[0]?.editable,(()=>html`<glide-core-icon-button
+              ${when(!this.multiple&&this.lastSelectedAndEnabledOption?.editable&&!this.isFiltering,(()=>html`<glide-core-icon-button
                     class="edit-button"
                     data-test="edit-button"
-                    label=${this.#M.term("editOption",this.selectedOptions[0].label)}
+                    label=${this.#L.term("editOption",this.lastSelectedAndEnabledOption.label)}
                     tabindex=${this.disabled||this.readonly?"-1":"0"}
                     variant="tertiary"
                     ?disabled=${this.disabled||this.readonly}
                     @click=${this.#q}
-                    ${ref(this.#x)}
+                    ${ref(this.#j)}
                   >
                     ${pencilIcon}
                   </glide-core-icon-button>`))}
@@ -200,8 +199,8 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
                 tabindex=${this.filterable||this.isFilterable||this.disabled?"-1":"0"}
                 type="button"
                 ?disabled=${this.disabled}
-                @focusin=${this.#z}
-                @focusout=${this.#H}
+                @focusin=${this.#H}
+                @focusout=${this.#U}
                 ${ref(this.#v)}
               >
                 ${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">
@@ -212,83 +211,96 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
           </div>
 
           <div
-            class=${classMap({"options-and-footer":!0,optionless:(this.hasNoAvailableOptions||this.hasNoMatchingOptions)&&!this.loading})}
-            ${ref(this.#b)}
+            aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
+            class=${classMap({"options-and-feedback":!0,optionless:(this.hasNoAvailableOptions||this.hasNoMatchingOptions)&&!this.loading&&!this.isAddButtonVisible})}
+            role="listbox"
+            tabindex="-1"
+            ${ref(this.#g)}
           >
             <div
-              aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
-              class=${classMap({options:!0,hidden:this.hasNoAvailableOptions||this.hasNoMatchingOptions||this.loading})}
+              class=${classMap({options:!0,hidden:!this.isAddButtonVisible&&(this.hasNoAvailableOptions||this.hasNoMatchingOptions||this.loading)})}
               data-test="options"
               id="options"
-              role="listbox"
-              tabindex="-1"
-              @change=${this.#U}
-              @click=${this.#W}
-              @focusin=${this.#P}
-              @mousedown=${this.#K}
-              @mouseover=${this.#J}
-              @private-disabled-change=${this.#G}
-              @private-editable-change=${this.#Q}
-              @private-label-change=${this.#X}
-              @private-value-change=${this.#Y}
+              @change=${this.#x}
+              @click=${this.#z}
+              @focusin=${this.#W}
+              @mousedown=${this.#P}
+              @mouseover=${this.#K}
+              @private-disabled-change=${this.#J}
+              @private-editable-change=${this.#G}
+              @private-label-change=${this.#Q}
+              @private-value-change=${this.#X}
             >
               <glide-core-dropdown-option
                 class="select-all"
                 data-test="select-all"
-                label=${this.#M.term("selectAll")}
+                label=${this.#L.term("selectAll")}
                 private-multiple
                 ?hidden=${!this.selectAll||!this.multiple||this.isFiltering}
-                ?private-indeterminate=${this.isSomeSelected&&!this.isAllSelected}
-                ${ref(this.#Z)}
+                ?private-indeterminate=${this.areSomeOptionsSelected&&!this.areAllOptionsSelected}
+                ${ref(this.#Y)}
               ></glide-core-dropdown-option>
 
               <slot
-                class="default-slot"
-                @private-selected-change=${this.#tt}
-                @slotchange=${this.#et}
+                class=${classMap({"default-slot":!0,optionless:this.hasNoMatchingOptions})}
+                @private-selected-change=${this.#Z}
+                @slotchange=${this.#tt}
                 ${assertSlot([DropdownOption,Text],!0)}
-                ${ref(this.#it)}
+                ${ref(this.#et)}
               >
                 <!--
-                  @required
-                  @type {DropdownOption}
-                -->
+                    @required
+                    @type {DropdownOption}
+                  -->
               </slot>
             </div>
 
+            ${when(this.isAddButtonVisible,(()=>html`
+                <div
+                  class=${classMap({"add-button-container":!0,bordered:!this.hasNoAvailableOptions&&!this.hasNoMatchingOptions})}
+                >
+                  <button
+                    aria-selected="false"
+                    class=${classMap({"add-button":!0,active:this.isAddButtonActive})}
+                    data-test="add-button"
+                    data-test-active=${this.isAddButtonActive}
+                    id=${this.#it}
+                    role="option"
+                    tabindex="-1"
+                    type="button"
+                    @click=${this.#st}
+                    @mouseover=${this.#nt}
+                    ${ref(this.#lt)}
+                  >
+                    <div class="add-button-label">
+                      ${this.inputValue.trim()}
+                    </div>
+
+                    &nbsp;
+
+                    <div class="add-button-description">
+                      (${this.#L.term("add")})
+                    </div>
+                  </button>
+                </div>
+              `))}
             ${when(this.loading,(()=>html`<div
-                aria-label=${this.#M.term("loading")}
+                aria-label=${this.#L.term("loading")}
                 class="loading-feedback"
                 data-test="loading-feedback"
                 id="loading-feedback"
               >
                 ${map(range(7),(()=>html`<div></div>`))}
               </div>`))}
-            ${when((this.hasNoAvailableOptions||this.hasNoMatchingOptions)&&!this.loading,(()=>html`<div data-test="optionless-feedback">
-                  ${this.hasNoAvailableOptions?this.#M.term("noAvailableOptions"):this.#M.term("noMatchingOptions")}
+            ${when((this.hasNoAvailableOptions||this.hasNoMatchingOptions)&&!this.loading&&!this.isAddButtonVisible,(()=>html`<div data-test="optionless-feedback">
+                  ${this.hasNoAvailableOptions?this.#L.term("noAvailableOptions"):this.#L.term("noMatchingOptions")}
                 </div>`))}
-
-            <footer
-              class=${classMap({footer:!0,visible:Boolean(this.addButtonLabel)})}
-            >
-              <button
-                class="add-button"
-                data-test="add-button"
-                type="button"
-                @click=${this.#st}
-                @focusin=${this.#ot}
-                @mouseover=${this.#lt}
-                ${ref(this.#nt)}
-              >
-                ${icons.plus} ${this.addButtonLabel}
-              </button>
-            </footer>
           </div>
         </div>
 
         <div id="description" slot="description">
           <slot
-            class=${classMap({description:!0,hidden:Boolean(this.#y&&this.validityMessage)})}
+            class=${classMap({description:!0,hidden:Boolean(this.#A&&this.validityMessage)})}
             name="description"
           >
             <!--
@@ -297,24 +309,9 @@ var __decorate=this&&this.__decorate||function(t,e,i,s){var o,l=arguments.length
             -->
           </slot>
 
-          ${when(this.#y&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
+          ${when(this.#A&&this.validityMessage,(()=>html`<span class="validity-message" data-test="validity-message"
                 >${unsafeHTML(this.validityMessage)}</span
               >`))}
         </div>
       </glide-core-private-label>
-    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#u.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?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(t,e){this.validityMessage=e,this.#u.setValidity(t," ",this.filterable||this.isFilterable?this.#o.value:this.#v.value)}constructor(){super(),this.hideLabel=!1,this.loading=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.version=packageJson.version,this.ariaActivedescendant="",this.hasNoAvailableOptions=!1,this.hasNoMatchingOptions=!1,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.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#nt=createRef(),this.#E=createRef(),this.#it=createRef(),this.#D=createRef(),this.#x=createRef(),this.#o=createRef(),this.#j=createRef(),this.#at=!1,this.#t=!1,this.#rt=!1,this.#s=!1,this.#pt=!0,this.#r=!1,this.#n=!1,this.#dt=!1,this.#ht=!1,this.#ct=!1,this.#h=!1,this.#ut=!1,this.#M=new LocalizeController(this),this.#b=createRef(),this.#v=createRef(),this.#Z=createRef(),this.#I=createRef(),this.#d=[],this.#m=()=>{this.#at?setTimeout((()=>{this.#at=!1})):this.open=!1},this.#g=({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,JSON.stringify(this.value))},this.#u=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#nt;#vt;#E;#it;#D;#x;#o;#j;#u;#at;#t;#rt;#s;#pt;#r;#n;#dt;#ht;#ct;#h;#ut;#M;#b;#mt;#v;#Z;#f;#I;#d;#m;#g;#e(){this.#vt?.(),this.#b.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#mt=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#y(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#st(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#ot(){this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.#mt=this.activeOption,this.activeOption.privateActive=!1)}#lt(){this.activeOption&&!this.#dt&&(this.#mt=this.activeOption,this.activeOption.privateActive=!1)}#O(){this.#at=!0}async#et(){this.#pt&&(this.isFilterable=this.#a.length>10,this.#pt=!1),this.tagOverflowLimit=this.selectedOptions.length,this.hasNoAvailableOptions=0===this.#a.length;for(const t of this.#a)t.privateMultiple=this.multiple;const t=this.#ft?.find((t=>!t.disabled));!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.#mt=this.lastSelectedOption,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&t&&(this.#mt=t,this.ariaActivedescendant=this.open?t.id:"",t.privateActive=!0),this.#Z.value&&(this.#Z.value.selected=this.isAllSelected),this.multiple?this.#d=this.selectedOptions.filter((t=>Boolean(t.value)&&!t.disabled)).map((({value:t})=>t)):this.lastSelectedOption?.value&&!this.lastSelectedOption.disabled&&(this.#d=[this.lastSelectedOption.value],this.isShowSingleSelectIcon=Boolean(this.selectedOptions.at(0)?.value)),this.requestUpdate(),await this.updateComplete,!this.multiple&&this.#o.value&&this.lastSelectedOption?.label?(this.#o.value.value=this.lastSelectedOption.label,this.inputValue=this.lastSelectedOption.label,this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth):this.multiple||!this.#o.value||this.isFiltering||(this.#o.value.value="",this.inputValue="",this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth)}#w(t){this.open&&this.#mt&&t.relatedTarget===this.#nt.value&&(this.#mt.privateActive=!0,this.#mt.privateIsTooltipOpen=!this.#mt.editable)}#R(t){(null===t.relatedTarget||t.relatedTarget instanceof Node&&!this.#f?.contains(t.relatedTarget)&&!this.contains(t.relatedTarget))&&!this.#rt&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#A(t){if(this.disabled||this.readonly)return;if(("Enter"===t.key||" "===t.key)&&t.target===this.#x.value)return void(this.#at=!0);if(!this.open&&"Enter"===t.key)return void this.form?.requestSubmit();if(this.open&&"ArrowUp"===t.key&&this.#f?.activeElement===this.#nt.value)return this.focus(),void(this.#mt&&(this.#mt.privateActive=!0,this.#mt.privateIsEditActive=this.#mt.editable,this.#mt.privateIsTooltipOpen=!this.#mt.privateIsEditActive));if(this.open&&"ArrowDown"===t.key&&this.#f?.activeElement===this.#nt.value)return void t.preventDefault();if(this.open&&"ArrowDown"===t.key&&this.addButtonLabel&&this.activeOption===this.#gt?.at(-1)&&(!this.activeOption?.editable||this.activeOption?.privateIsEditActive))return t.preventDefault(),this.activeOption&&(this.#mt=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),void this.#nt.value?.focus();if("Escape"===t.key)return t.preventDefault(),this.open=!1,void(this.#f?.activeElement===this.#nt.value&&this.focus());const e=t.target===this.#v.value||t.target===this.#o.value||t.target instanceof DropdownOption;if(!this.multiple||e){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(t.key))return t.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.activeOption&&this.open){if("Enter"===t.key||" "===t.key){if(this.activeOption.privateIsEditActive)return this.activeOption.privateEdit(),void(this.open=!1);if("Enter"===t.key&&this.#gt&&this.#gt.length>0||" "===t.key&&!this.filterable&&!this.isFilterable)return this.#ut=!0,t.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#Z.value&&this.#bt(),this.#ut=!1,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const e=this.#ft?.indexOf(this.activeOption);if("ArrowUp"===t.key&&!t.metaKey&&this.#ft&&"number"==typeof e){t.preventDefault();const i=this.#ft.findLast(((t,i)=>!t.disabled&&i<e));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&0!==e&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#mt=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===t.key&&!t.metaKey&&this.#ft&&"number"==typeof e){t.preventDefault();const i=this.#ft.find(((t,i)=>!t.disabled&&i>e));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.#mt=i,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===t.key&&t.metaKey||"Home"===t.key||"PageUp"===t.key)&&this.#ft){t.preventDefault();const e=[...this.#ft].reverse().findLast((t=>!t.disabled));return void(e&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.id,this.#mt=e,e.privateActive=!0,e.privateIsTooltipOpen=!0,e.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===t.key&&t.metaKey||"End"===t.key||"PageDown"===t.key)&&this.#ft){t.preventDefault();const e=[...this.#ft].findLast((t=>!t.disabled));return void(e&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.id,this.#mt=e,e.privateActive=!0,e.privateIsTooltipOpen=!0,e.scrollIntoView({block:"nearest"})))}}}}#S(t){if(this.disabled||this.readonly)return;if(this.#rt)return void(this.#rt=!1);if(t.target instanceof Node&&this.#x.value?.contains(t.target))return void this.selectedOptions[0]?.privateEdit();const e=this.filterable||this.isFilterable;if(this.#ut||!this.open||e&&!(t.target instanceof Element&&this.#v.value?.contains(t.target)))return 0!==t.detail?(this.open=!0,this.focus(),this.#dt=!0,void setTimeout((()=>{this.#dt=!1}))):void 0;this.open=!1}#$(t){const e=this.filterable||this.isFilterable,i=t.target instanceof Tag;e&&!i?t.target!==this.#o.value&&(t.preventDefault(),this.focus()):i||t.preventDefault()}#q(){this.open=!1}#T(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#_(){this.#o.value?.select(),this.isInputTooltipOpen=!0}async#L(t){let e;if(t.stopPropagation(),this.open=!0,this.isShowSingleSelectIcon=!1,this.#o.value?.value&&(this.inputValue=this.#o.value.value),this.multiple&&""!==this.#o.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#o.value?.value&&this.#o.value?.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1,this.#o.value)try{e=await this.filter(this.#o.value.value)}catch{}if(e){for(const t of this.#a)t.hidden=!e.includes(t);const t=this.#gt?.at(0);t&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#mt=t,this.ariaActivedescendant=t.id,t.privateActive=!0),this.hasNoMatchingOptions=!this.#gt||0===this.#gt.length,this.isCommunicateItemCountToScreenreaders=!0,this.#gt&&(this.itemCount=this.#gt.length)}}#B(t){const e=this.selectedOptions.findLast(((t,e)=>e<=this.tagOverflowLimit-1));if(e&&"Backspace"===t.key&&!t.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart)return this.#rt=!0,e.selected=!1,void(this.#rt=!1);const i=this.selectedOptions.filter(((t,e)=>e<=this.tagOverflowLimit-1));if(e&&"Backspace"===t.key&&t.metaKey&&this.multiple&&this.#o.value&&0===this.#o.value.selectionStart){this.#rt=!0;for(const t of i)t.selected=!1;this.#rt=!1}else;}#V(){this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth-1>this.#o.value.clientWidth)}#N(){this.#j.value&&(this.isInternalLabelOverflow=this.#j.value.scrollWidth>this.#j.value.clientWidth)}get#a(){return this.#it.value?.assignedElements().filter((t=>t instanceof DropdownOption))??[]}get#c(){const t=this.#it.value?.assignedElements().filter((t=>t instanceof DropdownOption));if(t&&this.#Z.value)return[this.#Z.value,...t]}get#gt(){return this.#it.value?.assignedElements().filter((t=>t instanceof DropdownOption&&!t.hidden))}get#ft(){const t=this.#it.value?.assignedElements().filter((t=>t instanceof DropdownOption&&!t.hidden));return this.#Z.value&&!this.#Z.value.hidden&&t?[this.#Z.value,...t]:t}#U(t){t.target instanceof DropdownOption&&(t.target.selected=!t.target.selected),t.target===this.#Z.value&&this.#bt(),this.#l()}#W(t){if(t.target instanceof Element){const e=t.target.closest("glide-core-dropdown-option");if(e instanceof DropdownOption&&e.disabled)return;if(e instanceof DropdownOption&&e.privateIsEditActive)return e.privateEdit(),void(this.open=!1);if(e&&!e.selected)return e.selected=!0,this.#l(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(e?.selected&&!this.multiple)return void(this.open=!1)}}#G(t){if(t.target instanceof DropdownOption&&t.target.disabled&&t.target.selected){const e=this.#d.lastIndexOf(t.target.value);this.#d.splice(e,e+1)}else this.multiple&&t.target instanceof DropdownOption&&t.target.selected&&t.target.value?this.#d.push(t.target.value):t.target instanceof DropdownOption&&t.target.selected&&t.target.value&&t.target===this.lastSelectedOption&&(this.#d=[t.target.value]);this.requestUpdate()}#Q(){this.requestUpdate()}#P(t){t.target instanceof DropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),t.target.privateActive=!0,this.#mt=t.target)}#X(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#p()}))):(this.filterable||this.isFilterable)&&this.#o.value&&this.selectedOptions[0]?.label?(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())}#K(t){(this.filterable||this.isFilterable)&&t.preventDefault()}#J(t){if(t.target instanceof DropdownOption&&this.#ft){if(t.target.disabled)return;this.activeOption&&(this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=t.target.id,this.#mt=t.target,t.target.privateActive=!0,t.target.privateIsEditActive=!1,this.#f?.activeElement===this.#nt.value&&this.focus()}}#tt(t){if(!this.#ct){if(this.#Z.value&&(this.#Z.value.selected=this.isAllSelected),t.target instanceof DropdownOption)if(this.multiple&&!this.#h)this.#d=t.target.selected&&t.target.value&&!t.target.disabled?[...this.value,t.target.value]:this.value.filter((e=>t.target instanceof DropdownOption&&e!==t.target.value)),this.#o.value&&!this.#rt&&(this.isFiltering=!1,this.#o.value.value="",this.inputValue="");else if(!this.multiple&&t.target.selected&&!t.target.disabled){for(const e of this.#a)e!==t.target&&t.target instanceof DropdownOption&&t.target.selected&&e.selected&&(e.selected=!1);this.#d=t.target.value?[t.target.value]:[],this.isShowSingleSelectIcon=Boolean(this.selectedOptions.at(0)?.value),this.#o.value&&t.target.label&&(this.isFiltering=!1,this.#o.value.value=t.target.label,this.inputValue=t.target.label)}this.#o.value&&(this.isInputOverflow=this.#o.value.scrollWidth>this.#o.value.clientWidth),this.requestUpdate(),this.updateComplete.then((()=>{this.#p()}))}}#Y(t){t.target instanceof DropdownOption&&this.multiple&&t.target.selected&&t.detail.new?this.#d=this.value.map((e=>e===t.detail.old?t.detail.new:e)):t.target instanceof DropdownOption&&this.multiple?this.#d=this.value.filter((e=>e!==t.detail.old)):t.target instanceof DropdownOption&&(this.#d=t.detail.new?[t.detail.new]:[])}#z(){this.isInternalLabelTooltipOpen=!0}#H(){this.isInternalLabelTooltipOpen=!1}#F(){this.#rt=!0,this.open=!1}async#k(t){this.#rt=!0;for(const e of this.#a)e.id===t&&(e.selected=!1,this.#d=this.value.filter((t=>t!==e.value)));const e=this.#I.value?.querySelectorAll("glide-core-tag");if(e&&this.selectedOptions.length>0){const i=[...e].findIndex((e=>e.dataset.id===t)),s=e[i<e.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#rt=!1}))}else setTimeout((()=>{this.focus(),this.#rt=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#C(t){t.stopPropagation()}#bt(){this.#ct=!0;for(const t of this.#a)!this.#Z.value?.selected||t.selected||t.disabled?!this.#Z.value?.selected&&t.selected&&(t.selected=!1):t.selected=!0;this.#d=this.#a.filter((({selected:t,value:e})=>t&&e)).map((({value:t})=>t)),this.#ct=!1}async#p(){if(this.#E.value){const t=this.#E.value.scrollWidth>this.#E.value.clientWidth;t&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#p()):!t&&!this.#ht&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#ht=!0,await this.updateComplete,this.#p()):this.#ht=!1}}#i(){this.#vt?.(),this.#mt&&(this.#mt.privateActive=!0,this.ariaActivedescendant=this.#mt.id),this.#D.value&&this.#b.value&&(this.#vt=autoUpdate(this.#D.value,this.#b.value,(()=>{(async()=>{if(this.#D.value&&this.#b.value){const{x:t,y:e,placement:i}=await computePosition(this.#D.value,this.#b.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#b.value.dataset.placement=i,Object.assign(this.#b.value.style,{left:`${t}px`,top:`${e}px`}),this.#b.value?.showPopover()}})()})))}#l(){if((this.filterable||this.isFilterable)&&this.#o.value){this.isFiltering=!1;for(const t of this.#a)t.hidden=!1}}};__decorate([property({reflect:!0}),required],Dropdown.prototype,"label",void 0),__decorate([property({attribute:"add-button-label",reflect:!0})],Dropdown.prototype,"addButtonLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],Dropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"loading",void 0),__decorate([property({reflect:!0,useDefault:!0})],Dropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"open",null),__decorate([property({reflect:!0,useDefault:!0})],Dropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],Dropdown.prototype,"placeholder",void 0),__decorate([property()],Dropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],Dropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"multiple",null),__decorate([property({reflect:!0})],Dropdown.prototype,"tooltip",void 0),__decorate([property({type:Array})],Dropdown.prototype,"value",null),__decorate([property({reflect:!0})],Dropdown.prototype,"variant",void 0),__decorate([property({reflect:!0})],Dropdown.prototype,"version",void 0),__decorate([state()],Dropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],Dropdown.prototype,"hasNoAvailableOptions",void 0),__decorate([state()],Dropdown.prototype,"hasNoMatchingOptions",void 0),__decorate([state()],Dropdown.prototype,"inputValue",void 0),__decorate([state()],Dropdown.prototype,"isBlurring",void 0),__decorate([state()],Dropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],Dropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],Dropdown.prototype,"isFilterable",void 0),__decorate([state()],Dropdown.prototype,"isFiltering",void 0),__decorate([state()],Dropdown.prototype,"isInputOverflow",void 0),__decorate([state()],Dropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],Dropdown.prototype,"isInternalLabelOverflow",void 0),__decorate([state()],Dropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],Dropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Dropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],Dropdown.prototype,"itemCount",void 0),__decorate([state()],Dropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],Dropdown.prototype,"validityMessage",void 0),Dropdown=__decorate([customElement("glide-core-dropdown"),final],Dropdown);export default Dropdown;const icons={plus:html`
-    <svg
-      aria-hidden="true"
-      viewBox="0 0 16 16"
-      fill="none"
-      style=${styleMap({height:"var(--private-size)",width:"var(--private-size)"})}
-    >
-      <path
-        d="M7.99998 3.33337V12.6667M3.33331 8.00004H12.6666"
-        stroke="currentColor"
-        stroke-width="1.3"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      />
-    </svg>
-  `};
+    </div>`}reportValidity(){this.isReportValidityOrSubmit=!0;const t=this.#u.reportValidity();return this.requestUpdate(),t}resetValidityFeedback(){this.isReportValidityOrSubmit=!1}setCustomValidity(t){this.validityMessage=t,""===t?this.#u.setValidity({customError:!1},"",this.filterable||this.isFilterable?this.#n.value:this.#v.value):this.#u.setValidity({customError:!0,valueMissing:this.#u.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#n.value:this.#v.value)}setValidity(t,e){this.validityMessage=e,this.#u.setValidity(t," ",this.filterable||this.isFilterable?this.#n.value:this.#v.value)}constructor(){super(),this.addButton=!1,this.hideLabel=!1,this.loading=!1,this.name="",this.orientation="horizontal",this.readonly=!1,this.selectAll=!1,this.required=!1,this.version=packageJson.version,this.ariaActivedescendant="",this.hasNoAvailableOptions=!1,this.hasNoMatchingOptions=!1,this.inputValue="",this.isAddButtonActive=!1,this.isAddButtonVisible=!1,this.isBlurring=!1,this.isCheckingValidity=!1,this.isCommunicateItemCountToScreenreaders=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInputOverflowing=!1,this.isInputTooltipOpen=!1,this.isInternalLabelOverflowing=!1,this.isInternalLabelTooltipOpen=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.itemCount=0,this.tagOverflowLimit=0,this.#lt=createRef(),this.#it=uniqueId(),this.#E=createRef(),this.#et=createRef(),this.#$=createRef(),this.#j=createRef(),this.#n=createRef(),this.#N=createRef(),this.#ot=!1,this.#t=!1,this.#at=!1,this.#s=!1,this.#dt=!0,this.#a=!1,this.#o=!1,this.#rt=!1,this.#pt=!1,this.#h=!1,this.#ht=!1,this.#L=new LocalizeController(this),this.#g=createRef(),this.#v=createRef(),this.#Y=createRef(),this.#I=createRef(),this.#p=[],this.#m=()=>{this.#ot?setTimeout((()=>{this.#ot=!1})):this.open=!1},this.#b=({formData:t})=>{this.name&&this.value.length>0&&!this.disabled&&t.append(this.name,JSON.stringify(this.value))},this.#u=this.attachInternals(),this.addEventListener("invalid",(t=>{if(t.preventDefault(),this.isCheckingValidity||this.isBlurring)return;this.isReportValidityOrSubmit=!0;this.form?.querySelector(":invalid")===this&&this.focus()}))}#lt;#it;#ct;#E;#et;#$;#j;#n;#N;#u;#ot;#t;#at;#s;#dt;#a;#o;#rt;#pt;#h;#ht;#L;#g;#ut;#v;#Y;#f;#I;#p;#m;#b;#e(){this.#ct?.(),this.#g.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1)}get#A(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#nt(){this.isAddButtonActive=!0,this.#lt.value&&(this.ariaActivedescendant=this.#lt.value.id),this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1)}#O(){this.#ot=!0}async#tt(){this.#dt&&(this.isFilterable=this.#d.length>10,this.#dt=!1),this.tagOverflowLimit=this.selectedOptions.length,this.hasNoAvailableOptions=0===this.#d.length;for(const t of this.#d)t.privateMultiple=this.multiple;if(this.open){const t=this.#vt?.find((t=>!t.disabled));this.activeOption&&!this.activeOption?.disabled||!t||(this.#ut=t,this.ariaActivedescendant=t.id,t.privateActive=!0)}if(this.#Y.value&&(this.#Y.value.selected=this.areAllOptionsSelected),this.multiple?this.#p=this.selectedOptions.filter((t=>Boolean(t.value)&&!t.disabled)).map((({value:t})=>t)):this.lastSelectedAndEnabledOption?.value&&(this.#p=[this.lastSelectedAndEnabledOption.value],this.isShowSingleSelectIcon=Boolean(this.lastSelectedAndEnabledOption?.value)),this.requestUpdate(),await this.updateComplete,!this.multiple)for(const t of this.#d)t.selected&&t.requestUpdate();!this.multiple&&this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.multiple||!this.#n.value||this.isFiltering||(this.#n.value.value="",this.inputValue="",this.isAddButtonVisible=!1,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth)}#y(t){(null===t.relatedTarget||t.relatedTarget instanceof Node&&!this.#f?.contains(t.relatedTarget)&&!this.contains(t.relatedTarget))&&!this.#at&&(this.open=!1,this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1)}#w(t){if(this.disabled||this.readonly)return;if(("Enter"===t.key||" "===t.key)&&t.target===this.#j.value)return void(this.#ot=!0);if(!this.open&&"Enter"===t.key)return void this.form?.requestSubmit();if("Escape"===t.key)return t.preventDefault(),void(this.open=!1);const e=t.target===this.#v.value||t.target===this.#n.value||t.target instanceof DropdownOption;if(!this.multiple||e){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(t.key))return t.preventDefault(),this.open=!0,void(this.activeOption&&(this.activeOption.privateIsTooltipOpen=!this.activeOption.privateIsEditActive));if(this.isAddButtonActive&&this.open){if("ArrowUp"===t.key&&t.metaKey||["Home","PageUp"].includes(t.key)){t.preventDefault();const e=this.#mt?.at(0);e&&(e.privateActive=!0,e.privateIsTooltipOpen=!e.editable,this.isAddButtonActive=!1,this.ariaActivedescendant=e.id,e.scrollIntoView())}if("ArrowUp"===t.key){t.preventDefault();const e=this.#ut&&!this.#ut.hidden?this.#ut:this.#mt?.at(-1);e&&(e.privateActive=!0,e.privateIsEditActive=e.editable,e.privateIsTooltipOpen=!e.editable,this.isAddButtonActive=!1,this.ariaActivedescendant=e.id)}"Enter"===t.key&&this.#st()}else if(this.activeOption&&this.open){if("Enter"===t.key||" "===t.key){if(this.activeOption.privateIsEditActive)return this.activeOption.privateEdit(),void(this.open=!1);if("Enter"===t.key&&this.#mt&&this.#mt.length>0||" "===t.key&&!this.filterable&&!this.isFilterable)return this.#ht=!0,t.preventDefault(),this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#Y.value&&this.#ft(),this.#ht=!1,this.#l(),this.multiple?(this.#n.value&&(this.#n.value.value=""),this.inputValue=""):(this.#n.value&&void 0!==this.activeOption.label&&(this.#n.value.value=this.activeOption.label,this.inputValue=this.activeOption.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth),this.open=!1,this.isInputTooltipOpen=!1),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}const e=this.#vt?.indexOf(this.activeOption);if("ArrowUp"===t.key&&!t.metaKey&&this.#vt&&"number"==typeof e){t.preventDefault();const i=this.#vt.findLast(((t,i)=>!t.disabled&&i<e));return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!0):i&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsTooltipOpen=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===t.key&&!t.metaKey&&this.#vt&&"number"==typeof e){t.preventDefault();const i=this.#vt.find(((t,i)=>!t.disabled&&i>e));return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsTooltipOpen=!1):i?(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsTooltipOpen=!0,i.scrollIntoView({block:"center"})):this.isAddButtonVisible&&this.#lt.value&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateActive=!1,this.isAddButtonActive=!0,this.ariaActivedescendant=this.#lt.value.id))}if(("ArrowUp"===t.key&&t.metaKey||"Home"===t.key||"PageUp"===t.key)&&this.#vt){t.preventDefault();const e=[...this.#vt].reverse().findLast((t=>!t.disabled));return void(e&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.id,e.privateActive=!0,e.privateIsTooltipOpen=!0,e.scrollIntoView()))}if(("ArrowDown"===t.key&&t.metaKey||"End"===t.key||"PageDown"===t.key)&&this.#vt){t.preventDefault();const e=[...this.#vt].findLast((t=>!t.disabled));return void(this.isAddButtonVisible&&this.#lt.value?(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.isAddButtonActive=!0,this.ariaActivedescendant=this.#lt.value.id):e&&this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.id,e.privateActive=!0,e.privateIsTooltipOpen=!0,e.scrollIntoView()))}}}}#R(t){if(this.disabled||this.readonly)return;if(this.#at)return void(this.#at=!1);if(t.target instanceof Node&&this.#j.value?.contains(t.target))return void this.lastSelectedAndEnabledOption?.privateEdit();const e=this.filterable||this.isFilterable;if(this.#ht||!this.open||e&&!(t.target instanceof Element&&this.#v.value?.contains(t.target)))return 0!==t.detail?(this.open=!0,void this.focus()):void 0;this.open=!1}#S(t){const e=this.filterable||this.isFilterable,i=t.target instanceof Tag;e&&!i?t.target!==this.#n.value&&(t.preventDefault(),this.focus()):i||t.preventDefault()}#q(){this.open=!1}#F(){this.isCommunicateItemCountToScreenreaders=!1,this.isInputTooltipOpen=!1}#C(){this.#n.value?.select(),this.isInputTooltipOpen=!0}async#_(t){let e;if(t.stopPropagation(),this.open=!0,this.#n.value&&(this.inputValue=this.#n.value.value),this.multiple&&""!==this.#n.value?.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#n.value?.value&&this.#n.value?.value!==this.lastSelectedAndEnabledOption?.label?(this.isFiltering=!0,this.isShowSingleSelectIcon=!1):(this.isFiltering=!1,this.isShowSingleSelectIcon=!1),this.#n.value){this.isAddButtonVisible=this.addButton&&this.#n.value?.value.trim().length>0&&!this.#d.some((({label:t})=>this.#n.value&&t?.toLowerCase()===this.#n.value.value.toLowerCase().trim()));try{e=await this.filter(this.#n.value.value)}catch{}}if(e)for(const t of this.#d)t.hidden=!e.includes(t);if(this.isCommunicateItemCountToScreenreaders=!0,this.#mt&&(this.itemCount=this.isAddButtonVisible?this.#mt.length+1:this.#mt.length),this.hasNoMatchingOptions=0===this.#mt?.length,this.hasNoMatchingOptions)return void(this.addButton?(this.isAddButtonActive=!0,this.activeOption&&this.#lt.value&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1,this.ariaActivedescendant=this.#lt.value.id)):(this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateActive=!1),this.ariaActivedescendant=""));const i=this.#mt?.find((({disabled:t})=>!t));if(this.isAddButtonActive&&!this.isAddButtonVisible&&this.#ut&&!this.#ut.hidden&&!this.#ut.disabled)return this.isAddButtonActive=!1,this.#ut.privateActive=!0,void(this.ariaActivedescendant=this.#ut.id);if(this.isAddButtonActive&&!this.isAddButtonVisible&&i)return i.privateActive=!0,this.isAddButtonActive=!1,void(this.ariaActivedescendant=i.id);if((!this.activeOption||this.activeOption?.hidden||this.activeOption?.disabled)&&this.#ut&&!this.#ut.hidden&&!this.#ut.disabled){const t=this.#ut;return this.activeOption&&(this.#ut=this.activeOption,this.#ut.privateActive=!1),t.privateActive=!0,void(this.ariaActivedescendant=t.id)}return this.activeOption?.hidden&&i?(this.#ut=this.activeOption,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,void(i.privateActive=!0)):void 0}#T(t){const e=this.selectedOptions.findLast(((t,e)=>e<=this.tagOverflowLimit-1));if(e&&"Backspace"===t.key&&!t.metaKey&&this.multiple&&this.#n.value&&0===this.#n.value.selectionStart)return this.#at=!0,e.selected=!1,void(this.#at=!1);const i=this.selectedOptions.filter(((t,e)=>e<=this.tagOverflowLimit-1));if(e&&"Backspace"===t.key&&t.metaKey&&this.multiple&&this.#n.value&&0===this.#n.value.selectionStart){this.#at=!0;for(const t of i)t.selected=!1;this.#at=!1}else;}#V(){this.#n.value&&(this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth)}#M(){this.#N.value&&(this.isInternalLabelOverflowing=this.#N.value.scrollWidth>this.#N.value.clientWidth)}get#d(){return this.#et.value?.assignedElements().filter((t=>t instanceof DropdownOption))??[]}get#c(){const t=this.#d;return this.#Y.value&&t.unshift(this.#Y.value),t}get#mt(){return this.#et.value?.assignedElements().filter((t=>t instanceof DropdownOption&&!t.hidden))}get#vt(){const t=this.#mt;return this.#Y.value&&!this.#Y.value.hidden&&t?.unshift(this.#Y.value),t}#x(t){t.target instanceof DropdownOption&&(t.target.selected=!t.target.selected),t.target===this.#Y.value&&this.#ft(),this.#n.value&&(this.#n.value.value=""),this.inputValue="",this.#l()}#z(t){if(t.target instanceof Element){const e=t.target.closest("glide-core-dropdown-option");if(e instanceof DropdownOption&&e.disabled)return;if(e instanceof DropdownOption&&e.privateIsEditActive)return e.privateEdit(),void(this.open=!1);if(e&&!e.selected)return e.selected=!0,this.#l(),this.open=!1,this.isInputTooltipOpen=!1,this.#n.value&&void 0!==e.label&&(this.#n.value.value=e.label,this.inputValue=e.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth),this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),void this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}));if(e?.selected&&!this.multiple)return void(this.open=!1)}}#J(t){if(this.multiple&&t.target instanceof DropdownOption&&t.target.disabled){if(t.target.selected){const e=this.#p.lastIndexOf(t.target.value);this.#p.splice(e,e+1)}if(t.target.privateActive){t.target.privateActive=!1;const e=this.#d.find((({disabled:t})=>!t));e&&(e.privateActive=!0,this.#ut=e,this.ariaActivedescendant=e.id)}}else if(t.target instanceof DropdownOption&&t.target.disabled){if(this.#p=this.lastSelectedAndEnabledOption?.value?[this.lastSelectedAndEnabledOption.value]:[],t.target.privateActive){t.target.privateActive=!1;const e=this.#d.find((({disabled:t})=>!t));e&&(e.privateActive=!0,this.#ut=e,this.ariaActivedescendant=e.id)}this.#n.value&&(this.#n.value.value=this.lastSelectedAndEnabledOption?.label??"",this.inputValue=this.lastSelectedAndEnabledOption?.label??"",this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth);for(const e of this.#d)e.selected&&e!==t.target&&e.requestUpdate()}else if(this.multiple&&t.target instanceof DropdownOption&&t.target.selected&&t.target.value)this.#p.push(t.target.value);else if(t.target instanceof DropdownOption&&t.target.selected&&t.target===this.lastSelectedAndEnabledOption&&void 0!==t.target.label){t.target.value&&(this.#p=[t.target.value]);for(const e of this.#d)e.selected&&e!==t.target&&e.requestUpdate();this.#n.value&&(this.#n.value.value=t.target.label,this.inputValue=t.target.label,this.isInputOverflowing=this.#n.value.scrollWidth-1>this.#n.value.clientWidth)}this.requestUpdate()}#G(){this.requestUpdate()}#W(t){t.target instanceof DropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),t.target.privateActive=!0,this.#ut=t.target)}#Q(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#r()}))):(this.filterable||this.isFilterable)&&this.#n.value&&this.lastSelectedAndEnabledOption?.label?(this.#n.value.value=this.lastSelectedAndEnabledOption.label,this.inputValue=this.lastSelectedAndEnabledOption.label,this.isInputOverflowing=this.#n.value.scrollWidth>this.#n.value.clientWidth):this.requestUpdate())}#P(t){(this.filterable||this.isFilterable)&&t.preventDefault()}#K(t){if(t.target instanceof DropdownOption&&this.#vt){if(t.target.disabled)return;this.activeOption&&(this.#ut=this.activeOption,this.activeOption.privateIsTooltipOpen=!1,this.activeOption.privateActive=!1),this.ariaActivedescendant=t.target.id,this.isAddButtonActive=!1,t.target.privateActive=!0,t.target.privateIsEditActive=!1}}#Z(t){if(!this.#pt){if(this.#Y.value&&(this.#Y.value.selected=this.areAllOptionsSelected),t.target instanceof DropdownOption)if(this.multiple&&!this.#h)this.#p=t.target.selected&&t.target.value&&!t.target.disabled?[...this.value,t.target.value]:this.value.filter((e=>t.target instanceof DropdownOption&&e!==t.target.value));else if(!this.multiple&&t.target.selected&&!t.target.disabled){for(const e of this.#d)e!==t.target&&t.target instanceof DropdownOption&&t.target.selected&&e.selected&&(e.selected=!1);this.#p=t.target.value?[t.target.value]:[]}this.requestUpdate(),this.multiple&&this.updateComplete.then((()=>{this.#r()}))}}#X(t){t.target instanceof DropdownOption&&this.multiple&&t.target.selected&&t.detail.new?this.#p=this.value.map((e=>e===t.detail.old?t.detail.new:e)):t.target instanceof DropdownOption&&this.multiple?this.#p=this.value.filter((e=>e!==t.detail.old)):t.target instanceof DropdownOption&&(this.#p=t.detail.new?[t.detail.new]:[])}#H(){this.isInternalLabelTooltipOpen=!0}#U(){this.isInternalLabelTooltipOpen=!1}#D(){this.#at=!0,this.open=!1}async#B(t){this.#at=!0;for(const e of this.#d)e.id===t&&(e.selected=!1,this.#p=this.value.filter((t=>t!==e.value)));const e=this.#I.value?.querySelectorAll("glide-core-tag");if(e&&this.selectedOptions.length>0){const i=[...e].findIndex((e=>e.dataset.id===t)),s=e[i<e.length-1?i+1:i-1];await this.updateComplete,setTimeout((()=>{s?.focus(),this.#at=!1}))}else setTimeout((()=>{this.focus(),this.#at=!1}));this.dispatchEvent(new Event("input",{bubbles:!0,composed:!0})),this.dispatchEvent(new Event("change",{bubbles:!0,composed:!0}))}#k(t){t.stopPropagation()}#st(){this.#n.value&&(this.dispatchEvent(new CustomEvent("add",{bubbles:!0,composed:!0,detail:this.#n.value.value})),this.#n.value.value="",this.inputValue="");const t=this.#d.at(0);t&&(t.privateActive=!0,t.scrollIntoView(),this.ariaActivedescendant=t.id),this.multiple||(this.open=!1,this.isInputTooltipOpen=!1),this.#l(),this.focus()}#ft(){this.#pt=!0;for(const t of this.#d)!this.#Y.value?.selected||t.selected||t.disabled?!this.#Y.value?.selected&&t.selected&&(t.selected=!1):t.selected=!0;this.#p=this.#d.filter((({selected:t,value:e})=>t&&e)).map((({value:t})=>t)),this.#pt=!1}async#r(){if(this.#E.value){const t=this.#E.value.scrollWidth>this.#E.value.clientWidth;t&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#r()):!t&&!this.#rt&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#rt=!0,await this.updateComplete,this.#r()):this.#rt=!1}}#i(){this.#ct?.(),this.#mt&&(this.itemCount=this.#mt.length),this.hasNoAvailableOptions=0===this.#d.length;const t=this.#vt?.find((t=>!t.disabled));this.#ut&&!this.#ut.disabled?(this.#ut.privateActive=!0,this.ariaActivedescendant=this.#ut.id):t&&(t.privateActive=!0,this.ariaActivedescendant=t.id,this.#ut=t),this.#$.value&&this.#g.value&&(this.#ct=autoUpdate(this.#$.value,this.#g.value,(()=>{(async()=>{if(this.#$.value&&this.#g.value){const{x:t,y:e,placement:i}=await computePosition(this.#$.value,this.#g.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-base-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#g.value.dataset.placement=i,Object.assign(this.#g.value.style,{left:`${t}px`,top:`${e}px`}),this.#g.value?.showPopover()}})()})))}#l(){for(const t of this.#d)t.hidden=!1;this.isFiltering=!1,this.isAddButtonActive=!1,this.isAddButtonVisible=!1,this.hasNoMatchingOptions=!1,this.isShowSingleSelectIcon=Boolean(this.lastSelectedAndEnabledOption?.value)}};__decorate([property({reflect:!0}),required],Dropdown.prototype,"label",void 0),__decorate([property({attribute:"add-button",reflect:!0,type:Boolean})],Dropdown.prototype,"addButton",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"filterable",null),__decorate([property({attribute:"hide-label",reflect:!0,type:Boolean})],Dropdown.prototype,"hideLabel",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"loading",void 0),__decorate([property({reflect:!0,useDefault:!0})],Dropdown.prototype,"name",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"open",null),__decorate([property({reflect:!0,useDefault:!0})],Dropdown.prototype,"orientation",void 0),__decorate([property({reflect:!0})],Dropdown.prototype,"placeholder",void 0),__decorate([property()],Dropdown.prototype,"privateSplit",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"readonly",void 0),__decorate([property({attribute:"select-all",reflect:!0,type:Boolean})],Dropdown.prototype,"selectAll",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"required",void 0),__decorate([property({reflect:!0,type:Boolean})],Dropdown.prototype,"multiple",null),__decorate([property({reflect:!0})],Dropdown.prototype,"tooltip",void 0),__decorate([property({type:Array})],Dropdown.prototype,"value",null),__decorate([property({reflect:!0})],Dropdown.prototype,"variant",void 0),__decorate([property({reflect:!0})],Dropdown.prototype,"version",void 0),__decorate([state()],Dropdown.prototype,"ariaActivedescendant",void 0),__decorate([state()],Dropdown.prototype,"hasNoAvailableOptions",void 0),__decorate([state()],Dropdown.prototype,"hasNoMatchingOptions",void 0),__decorate([state()],Dropdown.prototype,"inputValue",void 0),__decorate([state()],Dropdown.prototype,"isAddButtonActive",void 0),__decorate([state()],Dropdown.prototype,"isAddButtonVisible",void 0),__decorate([state()],Dropdown.prototype,"isBlurring",void 0),__decorate([state()],Dropdown.prototype,"isCheckingValidity",void 0),__decorate([state()],Dropdown.prototype,"isCommunicateItemCountToScreenreaders",void 0),__decorate([state()],Dropdown.prototype,"isFilterable",void 0),__decorate([state()],Dropdown.prototype,"isFiltering",void 0),__decorate([state()],Dropdown.prototype,"isInputOverflowing",void 0),__decorate([state()],Dropdown.prototype,"isInputTooltipOpen",void 0),__decorate([state()],Dropdown.prototype,"isInternalLabelOverflowing",void 0),__decorate([state()],Dropdown.prototype,"isInternalLabelTooltipOpen",void 0),__decorate([state()],Dropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],Dropdown.prototype,"isShowSingleSelectIcon",void 0),__decorate([state()],Dropdown.prototype,"itemCount",void 0),__decorate([state()],Dropdown.prototype,"tagOverflowLimit",void 0),__decorate([state()],Dropdown.prototype,"validityMessage",void 0),Dropdown=__decorate([customElement("glide-core-dropdown"),final],Dropdown);export default Dropdown;

package/dist/dropdown.option.d.ts

@@ -65,20 +65,21 @@ export default class DropdownOption extends LitElement {
     get selected(): boolean;
     set selected(isSelected: boolean);
     readonly tabIndex = -1;
+    /**
+     * @default ''
+     */
+    get value(): string;
+    set value(value: string);
     readonly version: string;
     private get isMultiple();
-    private get lastSelectedOption();
+    private get lastSelectedAndEnabledOption();
     click(): void;
     connectedCallback(): void;
     disconnectedCallback(): void;
     firstUpdated(): void;
-    /**
-     * @default ''
-     */
-    get value(): string;
-    set value(value: string);
     privateEdit(): void;
     privateUpdateCheckbox(): Promise<void>;
     render(): import("lit").TemplateResult<1>;
+    updated(): void;
     private isLabelOverflow;
 }

package/dist/dropdown.option.js

@@ -1 +1 @@
-var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,a=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)a=Reflect.decorate(e,t,i,o);else for(var n=e.length-1;n>=0;n--)(l=e[n])&&(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{html,LitElement}from"lit";import{ifDefined}from"lit/directives/if-defined.js";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{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import{LocalizeController}from"./library/localize.js";import styles from"./dropdown.option.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let DropdownOption=class DropdownOption extends LitElement{constructor(){super(...arguments),this.id=uniqueId(),this.privateActive=!1,this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateIsTooltipOpen=!1,this.privateMultiple=!1,this.role="option",this.tabIndex=-1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#l=createRef(),this.#s=new LocalizeController(this),this.#a=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#r}set label(e){this.#r=e,setTimeout((()=>{this.#c()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get disabled(){return this.#i}set disabled(e){this.#i=e,this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.ariaDisabled=e.toString(),this.ariaSelected=!e&&this.selected?"true":"false",this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#o}set editable(e){this.#o=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get selected(){return this.#a}set selected(e){this.#a=e,this.ariaSelected=!this.disabled&&e?"true":"false",this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.ariaDisabled=this.disabled.toString(),this.ariaSelected=!this.disabled&&this.selected?"true":"false",this.#d=new IntersectionObserver((()=>{this.checkVisibility()&&this.#c()})),this.#d.observe(this)}disconnectedCallback(){super.disconnectedCallback(),this.#d?.disconnect()}firstUpdated(){this.#e.value&&(this.#e.value.checked=this.selected&&!this.disabled)}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}privateEdit(){this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}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})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-variant="minimal" value="${this.value}" @click="${this.#p}" private-internally-inert ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="checkbox-icon-slot" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,multiple:Boolean(this.isMultiple)})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}`),(()=>html`<div class="${classMap({option:!0,count:Boolean(this.count),disabled:this.disabled,editable:this.editable})}"><slot class="${classMap({"icon-slot":!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" data-test="tooltip" label="${ifDefined(this.label)}" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" screenreader-hidden @toggle="${this.#u}"><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}</div>`))}</div>`}#e;#t;#d;#i;#o;#r;#l;#s;#a;#n;#p(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#h(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#c(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0}),required],DropdownOption.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],DropdownOption.prototype,"count",void 0),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"editable",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"id",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateActive",void 0),__decorate([property({attribute:"private-indeterminate",type:Boolean})],DropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],DropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"role",void 0),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"selected",null),__decorate([property({attribute:"tabindex",reflect:!0,type:Number})],DropdownOption.prototype,"tabIndex",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"version",void 0),__decorate([state()],DropdownOption.prototype,"isMultiple",null),__decorate([state()],DropdownOption.prototype,"lastSelectedOption",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"value",null),__decorate([state()],DropdownOption.prototype,"isLabelOverflow",void 0),DropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],DropdownOption);export default DropdownOption;
+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 n=e.length-1;n>=0;n--)(l=e[n])&&(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{html,LitElement}from"lit";import{ifDefined}from"lit/directives/if-defined.js";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{when}from"lit/directives/when.js";import packageJson from"../package.json"with{type:"json"};import checkedIcon from"./icons/checked.js";import pencilIcon from"./icons/pencil.js";import{LocalizeController}from"./library/localize.js";import styles from"./dropdown.option.styles.js";import shadowRootMode from"./library/shadow-root-mode.js";import final from"./library/final.js";import required from"./library/required.js";import uniqueId from"./library/unique-id.js";let DropdownOption=class DropdownOption extends LitElement{constructor(){super(...arguments),this.id=uniqueId(),this.privateActive=!1,this.privateIndeterminate=!1,this.privateIsEditActive=!1,this.privateIsTooltipOpen=!1,this.privateMultiple=!1,this.role="option",this.tabIndex=-1,this.version=packageJson.version,this.isLabelOverflow=!1,this.#e=createRef(),this.#t=createRef(),this.#i=!1,this.#o=!1,this.#l=createRef(),this.#s=new LocalizeController(this),this.#a=!1,this.#n=""}static{this.shadowRootOptions={...LitElement.shadowRootOptions,mode:shadowRootMode}}static{this.styles=styles}get label(){return this.#r}set label(e){this.#r=e,setTimeout((()=>{this.#d()})),this.dispatchEvent(new Event("private-label-change",{bubbles:!0}))}get disabled(){return this.#i}set disabled(e){this.#i=e,this.ariaDisabled=e.toString(),this.#e.value?.checked&&e?this.#e.value.checked=!1:this.#e.value&&this.selected&&!e&&(this.#e.value.checked=!0),this.dispatchEvent(new Event("private-disabled-change",{bubbles:!0}))}get editable(){return this.#o}set editable(e){this.#o=e,this.dispatchEvent(new Event("private-editable-change",{bubbles:!0}))}get selected(){return this.#a}set selected(e){this.#a=e,this.isMultiple&&this.#e.value&&(this.#e.value.checked=e),this.dispatchEvent(new Event("private-selected-change",{bubbles:!0}))}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}get isMultiple(){return this.privateMultiple||this.closest("glide-core-dropdown")?.multiple}get lastSelectedAndEnabledOption(){const e=this.parentElement?.querySelectorAll("glide-core-dropdown-option");if(e&&e.length>0)return[...e].findLast((e=>e.selected&&!e.disabled))}click(){this.privateMultiple?this.#e.value?.click():this.#t.value?.click()}connectedCallback(){super.connectedCallback(),this.ariaDisabled=this.disabled.toString(),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&&!this.disabled)}privateEdit(){this.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}))}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})}" data-test="component" ${ref(this.#t)}>${when(this.isMultiple,(()=>html`<glide-core-checkbox class="${classMap({checkbox:!0,editable:this.editable})}" data-test="checkbox" label="${this.label??""}" tabindex="-1" private-label-tooltip-offset="${12}" private-variant="minimal" value="${this.value}" @click="${this.#p}" private-internally-inert ?disabled="${this.disabled}" ?indeterminate="${this.privateIndeterminate}" ?private-show-label-tooltip="${this.privateIsTooltipOpen}" ?private-disable-label-tooltip="${this.disabled}" ${ref(this.#e)}><slot class="checkbox-icon-slot" name="icon" slot="private-icon"></slot></glide-core-checkbox>${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled,multiple:Boolean(this.isMultiple)})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}`),(()=>html`<div class="${classMap({option:!0,count:Boolean(this.count),disabled:this.disabled,editable:this.editable})}"><slot class="${classMap({"icon-slot":!0})}" name="icon"></slot><glide-core-tooltip class="tooltip" data-test="tooltip" label="${ifDefined(this.label)}" offset="${10}" ?disabled="${!this.isLabelOverflow||this.disabled}" ?open="${this.privateIsTooltipOpen}" screenreader-hidden @toggle="${this.#u}"><div class="label" data-test="label" slot="target" ${ref(this.#l)}>${this.label}</div></glide-core-tooltip>${when(this.selected&&this===this.lastSelectedAndEnabledOption&&!this.disabled,(()=>html`<div class="checked-icon-container" data-test="checked-icon-container">${checkedIcon}</div>`))} ${when(this.editable,(()=>html`<button aria-label="${this.#s.term("editOption",this.label)}" class="${classMap({"edit-button":!0,active:this.privateActive&&this.privateIsEditActive,count:Boolean(this.count),disabled:this.disabled})}" data-test="edit-button" type="button" @mouseover="${this.#h}" @mouseout="${this.#b}">${pencilIcon}</button>`))} ${when(this.count&&this.count>0,(()=>html`<div class="${classMap({"count-container":!0,disabled:this.disabled})}" data-test="count-container">${when(this.count>=1e3,(()=>"999+"),(()=>this.count))}</div>`))}</div>`))}</div>`}updated(){this.privateMultiple?this.ariaSelected=!this.disabled&&this.selected?"true":"false":this.ariaSelected=!this.disabled&&this.selected&&this===this.lastSelectedAndEnabledOption?"true":"false"}#e;#t;#c;#i;#o;#r;#l;#s;#a;#n;#p(e){e.stopPropagation()}#b(){this.privateIsEditActive=!1}#h(){this.privateIsEditActive=!0}#u(e){e.stopPropagation()}#d(){this.#l.value&&(this.isLabelOverflow=this.#l.value.scrollWidth>this.#l.value.clientWidth)}};__decorate([property({reflect:!0}),required],DropdownOption.prototype,"label",null),__decorate([property({reflect:!0,type:Number})],DropdownOption.prototype,"count",void 0),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"disabled",null),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"editable",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"id",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateActive",void 0),__decorate([property({attribute:"private-indeterminate",type:Boolean})],DropdownOption.prototype,"privateIndeterminate",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsEditActive",void 0),__decorate([property({type:Boolean})],DropdownOption.prototype,"privateIsTooltipOpen",void 0),__decorate([property({attribute:"private-multiple",type:Boolean})],DropdownOption.prototype,"privateMultiple",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"role",void 0),__decorate([property({reflect:!0,type:Boolean})],DropdownOption.prototype,"selected",null),__decorate([property({attribute:"tabindex",reflect:!0,type:Number})],DropdownOption.prototype,"tabIndex",void 0),__decorate([property({reflect:!0})],DropdownOption.prototype,"value",null),__decorate([property({reflect:!0})],DropdownOption.prototype,"version",void 0),__decorate([state()],DropdownOption.prototype,"isMultiple",null),__decorate([state()],DropdownOption.prototype,"lastSelectedAndEnabledOption",null),__decorate([state()],DropdownOption.prototype,"isLabelOverflow",void 0),DropdownOption=__decorate([customElement("glide-core-dropdown-option"),final],DropdownOption);export default DropdownOption;