@crowdstrike/glide-core 0.12.2 → 0.12.3

package/dist/checkbox-group.styles.js

@@ -7,7 +7,7 @@ import{css}from"lit";export default[css`
       }
     }
 
-    glide-core-private-label::part(tooltips-and-label) {
+    glide-core-private-label::part(private-tooltips) {
       align-items: flex-start;
     }
 

package/dist/dropdown.d.ts

@@ -24,6 +24,7 @@ export default class GlideCoreDropdown extends LitElement {
     static formAssociated: boolean;
     static shadowRootOptions: ShadowRootInit;
     static styles: import("lit").CSSResult[];
+    addButtonLabel?: string;
     get disabled(): boolean;
     set disabled(isDisabled: boolean);
     get filterable(): boolean;
@@ -74,7 +75,9 @@ export default class GlideCoreDropdown extends LitElement {
     private isCheckingValidity;
     private isFilterable;
     private isFiltering;
-    private isOptionsHidden;
+    private isInternalLabelOverflow;
+    private isInternalLabelTooltipOpen;
+    private isOptionsAndFooterHidden;
     private isReportValidityOrSubmit;
     private isShowSingleSelectIcon;
     private tagOverflowLimit;

package/dist/dropdown.js

@@ -1,7 +1,7 @@
-var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length,n=o<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--)(l=e[a])&&(n=(o<3?l(n):o>3?l(t,i,n):l(t,i))||n);return o>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.#l.value&&this.selectedOptions.length>0&&(this.#l.value.value=this.selectedOptions[0].label)}))})):this.#s!==e&&this.#o(),this.#s=e}get open(){return this.#n}set open(e){this.#n=e,!e||this.disabled?(!this.multiple&&this.#l.value&&this.selectedOptions.length>0&&(this.#l.value.value=this.selectedOptions[0].label,this.isFiltering=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value)),this.#t(),this.activeOption&&(this.activeOption.privateIsOpenTooltip=!1)):this.#i()}get size(){return this.#a}set size(e){if(this.#a=e,this.#r)for(const t of this.#r)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.#p)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.#p)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#r?.find((({privateActive:e})=>e))}checkValidity(){this.isCheckingValidity=!0;const e=this.#u.checkValidity();return this.isCheckingValidity=!1,e}click(){this.#l.value?(this.#l.value.click(),this.#l.value.select()):this.#v.value?.click()}get selectedOptions(){return this.#p.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#p.findLast((e=>e.selected))}get isAllSelected(){return this.#p.filter((({selected:e})=>e)).length===this.#p.length}get isSomeSelected(){return this.#p.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})}firstUpdated(){owSlotType(this.#b.value,[GlideCoreDropdownOption,Text]),this.#E.value&&(this.#E.value.popover="manual"),this.open&&!this.disabled&&this.#i();const e=new ResizeObserver((()=>{this.#h()}));this.#w.value&&(e.observe(this.#w.value),this.#w.value.addEventListener("mouseup",(()=>{this.#O=!0})))}focus(e){this.filterable||this.isFilterable?this.#l.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.#l.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.#p){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#p.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?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){this.#n=e,!e||this.disabled?(!this.multiple&&this.#o.value&&this.selectedOptions.length>0&&(this.#o.value.value=this.selectedOptions[0].label,this.isFiltering=!1,this.isShowSingleSelectIcon=!this.multiple&&this.selectedOptions.length>0&&Boolean(this.selectedOptions.at(0)?.value)),this.#t()):this.#i()}get size(){return this.#a}set size(e){if(this.#a=e,this.#r)for(const t of this.#r)t.privateSize=e}get multiple(){return this.#p}set multiple(e){const t=this.#p&&!e,i=!this.#p&&e;this.#p=e,this.isShowSingleSelectIcon=!1;for(const i of this.#d)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.#d)t.selected=e.some((e=>e&&e===t.value))}get activeOption(){return this.#r?.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.#d.filter((e=>e instanceof GlideCoreDropdownOption&&e.selected))}get lastSelectedOption(){return this.#d.findLast((e=>e.selected))}get isAllSelected(){return this.#d.filter((({selected:e})=>e)).length===this.#d.length}get isSomeSelected(){return this.#d.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})}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.#d){e.hasAttribute("selected")||(e.selected=!1)}const e=this.#d.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})}
-      @blur=${this.#y}
-      ${ref(this.#w)}
+      @mouseup=${this.#y}
+      ${ref(this.#E)}
     >
       <glide-core-private-label
         orientation=${this.orientation}
@@ -10,7 +10,6 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
         ?error=${this.#R}
         ?hide=${this.hideLabel}
         ?required=${this.required}
-        @blur=${this.#y}
       >
         <label id="label"> ${this.label} </label>
         <slot name="tooltip" slot="tooltip"></slot>
@@ -18,30 +17,31 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
         <div
           class="dropdown-and-options"
           slot="control"
-          @focusout=${this.#S}
-          @keydown=${this.#C}
+          @focusin=${this.#A}
+          @focusout=${this.#C}
+          @keydown=${this.#S}
         >
           <div
             class=${classMap({dropdown:!0,quiet:"quiet"===this.variant,disabled:this.disabled,error:this.#R,readonly:this.readonly,multiple:this.multiple})}
-            @click=${this.#A}
-            @mousedown=${this.#$}
-            ${ref(this.#D)}
+            @click=${this.#$}
+            @mousedown=${this.#D}
+            ${ref(this.#k)}
           >
             <span class="selected-option-labels" id="selected-option-labels">
-              ${this.selectedOptions.filter((({label:e})=>"string"==typeof e)).map((({label:e})=>html`<span data-test="selected-option-label">
-                      ${e},
-                    </span>`))}
+              ${this.selectedOptions.map((({label:e})=>html`<span data-test="selected-option-label">
+                    ${e},
+                  </span>`))}
             </span>
 
             ${when(this.multiple&&this.selectedOptions.length>0,(()=>html`<ul
                 aria-describedby="tag-overflow-text"
                 class="tags"
-                ${ref(this.#k)}
+                ${ref(this.#F)}
               >
-                ${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,editable:t,label:i,value:s},l)=>html`<li
-                      class=${classMap({"tag-container":!0,hidden:l>this.tagOverflowLimit-1})}
+                ${repeat(this.selectedOptions,(({id:e})=>e),(({id:e,editable:t,label:i,value:s},o)=>html`<li
+                      class=${classMap({"tag-container":!0,hidden:o>this.tagOverflowLimit-1})}
                       data-test="tag-container"
-                      data-test-hidden=${l>this.tagOverflowLimit-1}
+                      data-test-hidden=${o>this.tagOverflowLimit-1}
                     >
                       <glide-core-tag
                         data-test="tag"
@@ -52,7 +52,7 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
                         ?disabled=${this.disabled||this.readonly}
                         ?private-editable=${t}
                         @edit=${this.#I}
-                        @remove=${this.#F.bind(this,e)}
+                        @remove=${this.#L.bind(this,e)}
                       >
                         ${when(s,(()=>html`
                             <slot
@@ -86,21 +86,34 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
                 tabindex=${this.disabled?"-1":"0"}
                 ?disabled=${this.disabled}
                 ?readonly=${this.readonly}
-                @focusin=${this.#_}
-                @input=${this.#T}
-                @keydown=${this.#G}
-                ${ref(this.#l)}
+                @focusin=${this.#T}
+                @input=${this.#B}
+                @keydown=${this.#_}
+                ${ref(this.#o)}
               />`))}
-            ${when(this.internalLabel,(()=>html`<div
+
+            <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}
+              ?open=${!this.open&&this.isInternalLabelTooltipOpen}
+            >
+              <div aria-hidden="true">${this.internalLabel}</div>
+
+              <div
                 class="internal-label"
                 data-test="internal-label"
+                slot="target"
+                ${ref(this.#w)}
               >
                 ${when(this.internalLabel===this.placeholder,(()=>html`<span
                       class=${classMap({placeholder:!0,disabled:this.disabled,quiet:"quiet"===this.variant})}
                     >
                       ${this.internalLabel}
                     </span>`),(()=>this.internalLabel))}
-              </div>`))}
+              </div>
+            </glide-core-tooltip>
 
             <div class="tag-overflow-and-buttons">
               ${when(this.multiple&&this.selectedOptions.length>this.tagOverflowLimit,(()=>html`<div
@@ -118,11 +131,11 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=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.#L.term("editOption",this.selectedOptions[0].label)}
+                    label=${this.#G.term("editOption",this.selectedOptions[0].label)}
                     tabindex=${this.disabled||this.readonly?"-1":"0"}
                     variant="tertiary"
                     ?disabled=${this.disabled||this.readonly}
-                    @click=${this.#B}
+                    @click=${this.#M}
                     ${ref(this.#V)}
                   >
                     ${pencilIcon}
@@ -140,12 +153,14 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
                 id="primary-button"
                 tabindex=${this.filterable||this.isFilterable||this.disabled?"-1":"0"}
                 type="button"
+                @focusin=${this.#z}
+                @focusout=${this.#x}
                 ${ref(this.#v)}
               >
                 ${when(this.isFiltering,(()=>html`<div data-test="magnifying-glass-icon">
                       ${magnifyingGlassIcon}
                     </div>`),(()=>html`<svg
-                      aria-label=${this.#L.term("open")}
+                      aria-label=${this.#G.term("open")}
                       width="16"
                       height="16"
                       viewBox="0 0 24 24"
@@ -165,36 +180,73 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=arguments.length
 
           <div
             aria-labelledby=${this.filterable||this.isFilterable?"input":"primary-button"}
-            class=${classMap({options:!0,hidden:this.isOptionsHidden,[this.size]:!0})}
-            data-test="options"
-            id="options"
-            role="listbox"
-            @click=${this.#M}
-            @input=${this.#z}
-            @focusin=${this.#x}
-            @mousedown=${this.#j}
-            @mouseover=${this.#H}
-            @private-editable-change=${this.#N}
-            @private-label-change=${this.#U}
-            @private-selected-change=${this.#q}
-            @private-value-change=${this.#P}
-            ${ref(this.#E)}
+            class=${classMap({"options-and-footer":!0,hidden:this.isOptionsAndFooterHidden})}
+            ${ref(this.#O)}
           >
-            <glide-core-dropdown-option
-              class="select-all"
-              data-test="select-all"
-              label=${this.#L.term("selectAll")}
-              private-size=${this.size}
-              private-multiple
-              ?hidden=${!this.selectAll||!this.multiple||this.isFiltering}
-              ?private-indeterminate=${this.isSomeSelected&&!this.isAllSelected}
-              ${ref(this.#K)}
-            ></glide-core-dropdown-option>
+            <div
+              aria-labelledby=${this.filterable||this.isFilterable?"input":"button"}
+              class=${classMap({options:!0,[this.size]:!0})}
+              data-test="options"
+              id="options"
+              role="listbox"
+              tabindex="-1"
+              @click=${this.#H}
+              @input=${this.#j}
+              @focusin=${this.#N}
+              @mousedown=${this.#U}
+              @mouseover=${this.#q}
+              @private-editable-change=${this.#P}
+              @private-label-change=${this.#K}
+              @private-selected-change=${this.#W}
+              @private-value-change=${this.#J}
+            >
+              <glide-core-dropdown-option
+                class="select-all"
+                data-test="select-all"
+                label=${this.#G.term("selectAll")}
+                private-size=${this.size}
+                private-multiple
+                ?hidden=${!this.selectAll||!this.multiple||this.isFiltering}
+                ?private-indeterminate=${this.isSomeSelected&&!this.isAllSelected}
+                ${ref(this.#Q)}
+              ></glide-core-dropdown-option>
 
-            <slot
-              @slotchange=${this.#W}
-              ${ref(this.#b)}
-            ></slot>
+              <slot
+                @slotchange=${this.#X}
+                ${ref(this.#b)}
+              ></slot>
+            </div>
+
+            <footer
+              class=${classMap({footer:!0,visible:Boolean(this.addButtonLabel)})}
+            >
+              <button
+                class=${classMap({"add-button":!0,[this.size]:!0})}
+                data-test="add-button"
+                type="button"
+                @click=${this.#Y}
+                @focusin=${this.#Z}
+                @mouseover=${this.#ee}
+                ${ref(this.#te)}
+              >
+                <svg
+                  aria-hidden="true"
+                  viewBox="0 0 16 16"
+                  fill="none"
+                  style="height: var(--size); width: var(--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>
+
+                ${this.addButtonLabel}
+              </button>
+            </footer>
           </div>
         </div>
 
@@ -208,4 +260,4 @@ var __decorate=this&&this.__decorate||function(e,t,i,s){var l,o=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.#l.value:this.#v.value):this.#u.setValidity({customError:!0,valueMissing:this.#u.validity.valueMissing}," ",this.filterable||this.isFilterable?this.#l.value:this.#v.value)}setValidity(e,t){this.validityMessage=t,this.#u.setValidity(e," ",this.filterable||this.isFilterable?this.#l.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.isFilterable=!1,this.isFiltering=!1,this.isOptionsHidden=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.tagOverflowLimit=0,this.#w=createRef(),this.#b=createRef(),this.#D=createRef(),this.#V=createRef(),this.#l=createRef(),this.#O=!1,this.#e=!1,this.#J=!1,this.#s=!1,this.#d=!1,this.#n=!1,this.#Q=!1,this.#X=!1,this.#Y=!1,this.#L=new LocalizeController(this),this.#E=createRef(),this.#v=createRef(),this.#K=createRef(),this.#a="large",this.#k=createRef(),this.#c=[],this.#m=()=>{this.#O?setTimeout((()=>{this.#O=!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()}))}#Z;#w;#b;#D;#V;#l;#u;#O;#e;#J;#s;#d;#n;#Q;#X;#Y;#L;#E;#v;#K;#f;#a;#k;#c;#m;#g;#t(){this.#Z?.(),this.#E.value?.hidePopover(),this.ariaActivedescendant=""}get#R(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#y(){this.isBlurring=!0,this.reportValidity(),this.isBlurring=!1}#W(){owSlotType(this.#b.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#p.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#p)e.privateSize=this.size,e.privateMultiple=this.multiple;const e=this.#ee?.at(0);!this.activeOption&&this.lastSelectedOption?(this.lastSelectedOption.privateActive=!0,this.ariaActivedescendant=this.open?this.lastSelectedOption.id:""):!this.activeOption&&e&&(e.privateActive=!0,this.ariaActivedescendant=this.open?e.id:""),this.#K.value&&(this.#K.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.#l.value&&this.lastSelectedOption?.value&&(this.#l.value.value=this.lastSelectedOption.label)}))}#S(e){(null===e.relatedTarget||e.relatedTarget instanceof Node&&!this.#f?.contains(e.relatedTarget)&&!this.contains(e.relatedTarget))&&!this.#J&&(this.open=!1),this.#y()}#C(e){if(this.disabled||this.readonly)return;if(("Enter"===e.key||" "===e.key)&&e.target===this.#V.value)return void(this.#O=!0);if(!this.open&&"Enter"===e.key&&!this.#J)return void this.form?.requestSubmit();if("Escape"===e.key)return this.open=!1,void this.focus();const t=e.target===this.#v.value||e.target===this.#l.value||e.target instanceof GlideCoreDropdownOption;if(!this.multiple||t){if(!this.open&&[" ","ArrowUp","ArrowDown"].includes(e.key)&&this.activeOption)return e.preventDefault(),this.open=!0,void(this.activeOption.privateIsOpenTooltip=!0);if(this.activeOption&&this.open){if("Enter"===e.key||" "===e.key){if(this.#Y=!0,this.activeOption.privateIsEditActive)return this.activeOption.dispatchEvent(new Event("edit",{bubbles:!0,composed:!0})),void(this.open=!1);if("Enter"===e.key&&this.#te&&this.#te.length>0||" "===e.key&&!this.filterable&&!this.isFilterable)return e.preventDefault(),this.isFiltering=!1,this.activeOption.selected=!this.multiple||!this.activeOption.selected,this.activeOption===this.#K.value&&this.#ie(),this.#Y=!1,this.#o(),this.multiple||(this.open=!1),this.dispatchEvent(new Event("change",{bubbles:!0})),void this.dispatchEvent(new Event("input",{bubbles:!0}))}const t=this.#ee?.indexOf(this.activeOption);if("ArrowUp"===e.key&&!e.metaKey&&this.#ee&&"number"==typeof t){e.preventDefault();const i=this.#ee.at(t-1);return void(this.activeOption?.privateIsEditActive?(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsOpenTooltip=!0):i&&0!==t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsOpenTooltip=!i.editable,i.scrollIntoView({block:"center"})))}if("ArrowDown"===e.key&&!e.metaKey&&this.#ee&&"number"==typeof t){e.preventDefault();const i=this.#ee.at(t+1);return void(this.activeOption.editable&&!this.activeOption.privateIsEditActive?(this.activeOption.privateIsEditActive=!0,this.activeOption.privateIsOpenTooltip=!1):i&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,i.privateActive=!0,i.privateIsOpenTooltip=!0,i.scrollIntoView({block:"center"})))}if(("ArrowUp"===e.key&&e.metaKey||"Home"===e.key||"PageUp"===e.key)&&this.#ee){e.preventDefault();const t=this.#ee.at(0);return void(t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,t.privateActive=!0,t.privateIsOpenTooltip=!0,t.scrollIntoView({block:"nearest"})))}if(("ArrowDown"===e.key&&e.metaKey||"End"===e.key||"PageDown"===e.key)&&this.#ee){e.preventDefault();const t=this.#ee.at(-1);return void(t&&this.activeOption&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,t.privateActive=!0,t.privateIsOpenTooltip=!0,t.scrollIntoView({block:"nearest"})))}}}}#A(e){if(!this.disabled&&!this.readonly)if(this.#J)this.#J=!1;else if(e.target instanceof Node&&this.#V.value?.contains(e.target))this.selectedOptions[0].dispatchEvent(new Event("edit",{bubbles:!0,composed:!0}));else{if(this.#Y||!this.open)return 0!==e.detail?(this.open=!0,void this.focus()):void 0;this.open=!1}}#$(e){const t=this.filterable||this.isFilterable,i=e.target instanceof GlideCoreTag;t&&!i?e.target!==this.#l.value&&(e.preventDefault(),this.focus()):i||e.preventDefault()}#B(){this.open=!1}get#p(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#r(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#K.value)return[this.#K.value,...e]}get#te(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden))}get#ee(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption&&!e.hidden));return this.#K.value&&!this.#K.value.hidden&&e?[this.#K.value,...e]:e}#_(){this.#l.value?.select()}#T(e){if(ow(this.#l.value,ow.object.instanceOf(HTMLInputElement)),e.stopPropagation(),this.multiple&&""!==this.#l.value.value?this.isFiltering=!0:this.multiple?this.isFiltering=!1:""!==this.#l.value.value&&this.#l.value.value!==this.selectedOptions.at(0)?.label?this.isFiltering=!0:this.isFiltering=!1,this.isShowSingleSelectIcon=!1,this.activeOption){this.ariaActivedescendant=this.activeOption.id;for(const e of this.#p)e.hidden=!e.label?.toLowerCase().includes(this.#l.value?.value.toLowerCase().trim());const e=this.#te?.at(0);e&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,e.privateActive=!0),this.open=!0,this.isOptionsHidden=!this.#te||0===this.#te.length}this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,detail:this.#l.value.value}))}#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.#l.value&&0===this.#l.value.selectionStart)return void(t.selected=!1);const i=this.selectedOptions.filter(((e,t)=>t<=this.tagOverflowLimit-1));if(t&&"Backspace"===e.key&&e.metaKey&&this.multiple&&this.#l.value&&0===this.#l.value.selectionStart)for(const e of i)e.selected=!1;else;}#M(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.#o(),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)}}#N(){this.requestUpdate()}#x(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0)}#z(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#K.value&&this.#ie(),this.#o(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#U(){this.selectedOptions.length>0&&(this.multiple?(this.requestUpdate(),this.updateComplete.then((()=>{this.#h()}))):this.#l.value?this.#l.value.value=this.selectedOptions[0].label:this.requestUpdate())}#j(e){(this.filterable||this.isFilterable)&&e.preventDefault()}#H(e){e.target instanceof GlideCoreDropdownOption&&this.#ee&&this.activeOption&&(this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=e.target.id,e.target.privateActive=!0,e.target.privateIsEditActive=!1)}#q(e){e.target!==this.#K.value&&!this.#X&&this.#K.value&&(this.#K.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.#l.value&&(this.#l.value.value=""),this.#h()):!this.multiple&&e.target.selected&&(this.#c=e.target.value?[e.target.value]:[],this.#l.value&&(this.#l.value.value=e.target.label))),this.requestUpdate()}#P(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]:[])}#I(){this.#J=!0,this.open=!1}async#F(e){this.#J=!0;for(const t of this.#p)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.value.length>0){const i=[...t].findIndex((t=>t.dataset.id===e));await this.updateComplete,setTimeout((()=>{t[i<t.length-1?i+1:i-1]?.focus(),this.#J=!1}))}else setTimeout((()=>{this.focus(),this.#J=!1}));this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#ie(){ow(this.#K.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#X=!0;for(const e of this.#p)e.selected=this.#K.value.selected;this.#X=!1}async#h(){if(this.#w.value){const e=this.#w.value.scrollWidth>this.#w.value.clientWidth;e&&this.tagOverflowLimit>1?(this.tagOverflowLimit=this.tagOverflowLimit-1,await this.updateComplete,this.#h()):!e&&!this.#Q&&this.tagOverflowLimit<this.selectedOptions.length?(this.tagOverflowLimit=this.tagOverflowLimit+1,this.#Q=!0,await this.updateComplete,this.#h()):this.#Q=!1}}#i(){this.#Z?.(),this.#D.value&&this.#E.value&&(this.#Z=autoUpdate(this.#D.value,this.#E.value,(()=>{(async()=>{if(this.#D.value&&this.#E.value){const{x:e,y:t,placement:i}=await computePosition(this.#D.value,this.#E.value,{placement:"bottom-start",middleware:[offset({mainAxis:Number.parseFloat(window.getComputedStyle(document.body).getPropertyValue("--glide-core-spacing-xxs"))*Number.parseFloat(window.getComputedStyle(document.documentElement).fontSize)}),flip()]});this.#E.value.dataset.placement=i,Object.assign(this.#E.value.style,{left:`${e}px`,top:`${t}px`}),this.#E.value?.showPopover(),this.activeOption&&(this.ariaActivedescendant=this.activeOption.id)}})()})))}#o(){if((this.filterable||this.isFilterable)&&this.#l.value){this.isFiltering=!1;for(const e of this.#p)e.hidden=!1}}};__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,"isFilterable",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isFiltering",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isOptionsHidden",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isShowSingleSelectIcon",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.isBlurring=!1,this.isCheckingValidity=!1,this.isFilterable=!1,this.isFiltering=!1,this.isInternalLabelOverflow=!1,this.isInternalLabelTooltipOpen=!1,this.isOptionsAndFooterHidden=!1,this.isReportValidityOrSubmit=!1,this.isShowSingleSelectIcon=!1,this.tagOverflowLimit=0,this.#te=createRef(),this.#ie=createRef(),this.#E=createRef(),this.#b=createRef(),this.#k=createRef(),this.#V=createRef(),this.#o=createRef(),this.#w=createRef(),this.#se=!1,this.#e=!1,this.#oe=!1,this.#s=!1,this.#p=!1,this.#n=!1,this.#le=!1,this.#ne=!1,this.#ae=!1,this.#re=!1,this.#G=new LocalizeController(this),this.#O=createRef(),this.#v=createRef(),this.#Q=createRef(),this.#a="large",this.#F=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()}))}#te;#ie;#pe;#E;#b;#k;#V;#o;#w;#u;#se;#e;#oe;#s;#p;#n;#le;#ne;#ae;#re;#G;#O;#de;#v;#Q;#f;#a;#F;#c;#m;#g;#t(){this.#pe?.(),this.#O.value?.hidePopover(),this.ariaActivedescendant="",this.activeOption&&(this.#de=this.activeOption,this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1)}get#R(){return!this.disabled&&!this.validity.valid&&this.isReportValidityOrSubmit}#Y(){this.open=!1,this.dispatchEvent(new Event("add",{bubbles:!0,composed:!0}))}#Z(){this.activeOption&&(this.activeOption.privateIsOpenTooltip=!1,this.#de=this.activeOption,this.activeOption.privateActive=!1)}#ee(){this.activeOption&&!this.#le&&(this.#de=this.activeOption,this.activeOption.privateActive=!1)}#y(){this.#se=!0}#X(){owSlotType(this.#b.value,[GlideCoreDropdownOption,Text]),this.isFilterable=this.#d.length>10,this.tagOverflowLimit=this.selectedOptions.length;for(const e of this.#d)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.#Q.value&&(this.#Q.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.#te.value&&(this.#de.privateActive=!0,this.#de.privateIsOpenTooltip=!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.#V.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.#te.value)return this.focus(),void(this.#de&&(this.#de.privateActive=!0,this.#de.privateIsEditActive=this.#de.editable,this.#de.privateIsOpenTooltip=!this.#de.privateIsEditActive));if(this.open&&"ArrowDown"===e.key&&this.#f?.activeElement===this.#te.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.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1),void this.#te.value?.focus();if("Escape"===e.key)return e.preventDefault(),this.open=!1,void(this.#f?.activeElement===this.#te.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.privateIsOpenTooltip=!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.#Q.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.privateIsOpenTooltip=!0):i&&0!==t&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#de=i,i.privateActive=!0,i.privateIsEditActive=i.editable,i.privateIsOpenTooltip=!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.privateIsOpenTooltip=!1):i&&(this.activeOption.privateIsEditActive=!1,this.activeOption.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=i.id,this.#de=i,i.privateActive=!0,i.privateIsOpenTooltip=!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.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#de=t,t.privateActive=!0,t.privateIsOpenTooltip=!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.privateIsOpenTooltip=!1,this.activeOption.privateActive=!1,this.ariaActivedescendant=t.id,this.#de=t,t.privateActive=!0,t.privateIsOpenTooltip=!0,t.scrollIntoView({block:"nearest"})))}}}}#$(e){if(!this.disabled&&!this.readonly)if(this.#oe)this.#oe=!1;else if(e.target instanceof Node&&this.#V.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()}#M(){this.open=!1}get#d(){return this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption))??[]}get#r(){const e=this.#b.value?.assignedElements().filter((e=>e instanceof GlideCoreDropdownOption));if(e&&this.#Q.value)return[this.#Q.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.#Q.value&&!this.#Q.value.hidden&&e?[this.#Q.value,...e]:e}#T(){this.#o.value?.select()}#B(e){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;for(const e of this.#d)e.hidden=!e.label?.toLowerCase().includes(this.#o.value?.value.toLowerCase().trim());const t=this.#ce?.at(0);t&&this.activeOption?.hidden&&(this.activeOption.privateActive=!1,this.#de=t,this.ariaActivedescendant=t.id,t.privateActive=!0),this.isOptionsAndFooterHidden=!this.#ce||0===this.#ce.length,this.dispatchEvent(new CustomEvent("filter",{bubbles:!0,composed:!0,detail:this.#o.value.value}))}#_(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;}#H(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)}}#P(){this.requestUpdate()}#N(e){e.target instanceof GlideCoreDropdownOption&&(this.activeOption&&(this.activeOption.privateActive=!1),e.target.privateActive=!0,this.#de=e.target)}#j(e){e.stopPropagation(),e.target instanceof GlideCoreDropdownOption&&(e.target.selected=!e.target.selected),e.target===this.#Q.value&&this.#ue(),this.#l(),this.dispatchEvent(new Event("change",{bubbles:!0})),this.dispatchEvent(new Event("input",{bubbles:!0}))}#K(){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()}#q(e){e.target instanceof GlideCoreDropdownOption&&this.#he&&(this.activeOption&&(this.activeOption.privateIsOpenTooltip=!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.#te.value&&this.focus())}#W(e){e.target!==this.#Q.value&&!this.#ae&&this.#Q.value&&(this.#Q.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()}))}#J(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]:[])}#z(){this.isInternalLabelTooltipOpen=!0}#x(){this.isInternalLabelTooltipOpen=!1}#I(){this.#oe=!0,this.open=!1}async#L(e){this.#oe=!0;for(const t of this.#d)t.id===e&&(t.selected=!1,this.#c=this.value.filter((e=>e!==t.value)));const t=this.#F.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.#Q.value,ow.object.instanceOf(GlideCoreDropdownOption)),this.#ae=!0;for(const e of this.#d)e.selected=this.#Q.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.#k.value&&this.#O.value&&(this.#pe=autoUpdate(this.#k.value,this.#O.value,(()=>{(async()=>{if(this.#k.value&&this.#O.value){const{x:e,y:t,placement:i}=await computePosition(this.#k.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.#d)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,"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,"isOptionsAndFooterHidden",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isReportValidityOrSubmit",void 0),__decorate([state()],GlideCoreDropdown.prototype,"isShowSingleSelectIcon",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.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.privateIsOpenTooltip=!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.privateIsOpenTooltip}" ${ref(this.#e)}><slot class="checkbox-icon-slot" 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="icon-slot" name="icon"></slot><glide-core-tooltip class="tooltip" offset="${10}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateIsOpenTooltip}"><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.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,"privateIsOpenTooltip",void 0),__decorate([property({reflect:!0})],GlideCoreDropdownOption.prototype,"value",null),__decorate([state()],GlideCoreDropdownOption.prototype,"isLabelOverflow",void 0),GlideCoreDropdownOption=__decorate([customElement("glide-core-dropdown-option")],GlideCoreDropdownOption);export default GlideCoreDropdownOption;
+var __decorate=this&&this.__decorate||function(e,t,i,o){var l,s=arguments.length,r=s<3?t:null===o?o=Object.getOwnPropertyDescriptor(t,i):o;if("object"==typeof Reflect&&"function"==typeof Reflect.decorate)r=Reflect.decorate(e,t,i,o);else for(var a=e.length-1;a>=0;a--)(l=e[a])&&(r=(s<3?l(r):s>3?l(t,i,r):l(t,i))||r);return s>3&&r&&Object.defineProperty(t,i,r),r};import"./checkbox.js";import"./tooltip.js";import{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.privateIsOpenTooltip=!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.privateIsOpenTooltip}" ${ref(this.#e)}><slot class="checkbox-icon-slot" 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="icon-slot" name="icon"></slot><glide-core-tooltip class="tooltip" offset="${10}" ?disabled="${!this.isLabelOverflow}" ?open="${this.privateIsOpenTooltip}"><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,"privateIsOpenTooltip",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

@@ -86,8 +86,10 @@ import{css}from"lit";export default[css`
     }
 
     .icon-slot {
-      display: block;
-      padding-inline-end: var(--glide-core-spacing-xs);
+      &::slotted(*) {
+        display: block;
+        padding-inline-end: var(--glide-core-spacing-xs);
+      }
     }
 
     .checkbox-icon-slot {

package/dist/dropdown.option.test.interactions.multiple.js

@@ -35,8 +35,8 @@ it('sets `privateIsEditActive`', async () => {
       private-multiple
     ></glide-core-dropdown-option>`);
     const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
-    button?.dispatchEvent(new Event('mouseover'));
+    button?.dispatchEvent(new MouseEvent('mouseover'));
     expect(component.privateIsEditActive).to.be.true;
-    button?.dispatchEvent(new Event('mouseout'));
+    button?.dispatchEvent(new MouseEvent('mouseout'));
     expect(component.privateIsEditActive).to.be.false;
 });

package/dist/dropdown.option.test.interactions.single.js

@@ -69,8 +69,8 @@ it('sets `privateIsEditActive`', async () => {
       editable
     ></glide-core-dropdown-option>`);
     const button = component.shadowRoot?.querySelector('[data-test="edit-button"]');
-    button?.dispatchEvent(new Event('mouseover'));
+    button?.dispatchEvent(new MouseEvent('mouseover'));
     expect(component.privateIsEditActive).to.be.true;
-    button?.dispatchEvent(new Event('mouseout'));
+    button?.dispatchEvent(new MouseEvent('mouseout'));
     expect(component.privateIsEditActive).to.be.false;
 });

package/dist/dropdown.styles.js

@@ -1,6 +1,6 @@
 import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import opacityAndScaleAnimation from"./styles/opacity-and-scale-animation.js";import visuallyHidden from"./styles/visually-hidden.js";export default[css`
-    ${focusOutline(".edit-button:focus-visible")}
-    ${opacityAndScaleAnimation(".options:popover-open")}
+    ${focusOutline(".add-button:focus-visible")}
+    ${opacityAndScaleAnimation(".options-and-footer:popover-open")}
     ${visuallyHidden(".selected-option-labels")}
   `,css`
     .component {
@@ -14,6 +14,19 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       position: relative;
     }
 
+    glide-core-private-label {
+      &::part(private-control-and-summary) {
+        /* 
+          The Label component's grid column styling combined with the fact that 
+          ".dropdown-and-options" isn't a direct descendant of that grid means that 
+          Dropdown's label won't shrink when space constrained without a minimum 
+          width on Label's ".control-and-summary". It's not clear to me why Grid 
+          behaves this way.
+        */
+        min-inline-size: var(--min-inline-size);
+      }
+    }
+
     .dropdown {
       --button-and-input-height: 1.25rem;
 
@@ -38,7 +51,6 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
         background-color 200ms ease-in-out,
         border-color 200ms ease-in-out;
       user-select: none;
-      white-space: nowrap;
 
       &.quiet:not(.multiple) {
         background-color: transparent;
@@ -91,30 +103,35 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
-    .options {
+    .options-and-footer {
       --border-width: 1px;
-      --padding: var(--glide-core-spacing-xxxs);
 
       background-color: var(--glide-core-surface-modal);
-      border: var(--border-width) solid var(--glide-core-surface-modal);
+      border: var(--border-width) solid var(--glide-core-border-base-lighter);
       border-radius: var(--glide-core-spacing-xs);
       box-shadow: var(--glide-core-shadow-lg);
-      box-sizing: border-box;
       inset: unset;
+      min-inline-size: var(--min-inline-size);
+      padding: 0;
+      position: absolute;
+
+      &.hidden {
+        display: none;
+      }
+    }
+
+    .options {
+      --padding: var(--glide-core-spacing-xxxs);
+
+      box-sizing: border-box;
       max-block-size: calc(
         var(--private-option-height) * 9 + var(--padding) * 2 +
           var(--border-width) * 2
       );
-      min-inline-size: var(--min-inline-size);
       overflow: auto;
       padding: var(--padding);
-      position: absolute;
       scroll-behavior: smooth;
 
-      &.hidden {
-        display: none;
-      }
-
       &.large {
         --private-option-height: 1.75rem;
       }
@@ -124,6 +141,71 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
+    .footer {
+      background-color: var(--glide-core-surface-page);
+      border-block-start: 1px solid var(--glide-core-border-base);
+      box-shadow: 0 -8px 8px -8px
+        var(--glide-core-surface-base-gray, rgb(0 0 0 / 40%));
+      display: none;
+      inline-size: calc(100% - var(--glide-core-spacing-xxxs) * 2);
+      inset-block-end: 0;
+      padding: var(--glide-core-spacing-xxxs);
+
+      /* 
+        "sticky" is a little hack so that footer is absolutely positioned but 
+        its space in layout is preserved, so it doesn't overlap the last option.
+      */
+      position: sticky;
+
+      &.visible {
+        display: block;
+      }
+    }
+
+    .add-button {
+      align-items: center;
+      background-color: transparent;
+      border: none;
+      border-radius: 0.75rem;
+      display: flex;
+      font-family: var(--glide-core-body-sm-font-family);
+      font-weight: var(--glide-core-body-sm-font-weight);
+      inline-size: 100%;
+      line-height: 100%;
+      text-align: start;
+
+      &.large {
+        --size: 1rem;
+
+        column-gap: 0.625rem;
+        font-size: var(--glide-core-body-sm-font-size);
+        padding-block: 0.375rem;
+        padding-inline: var(--glide-core-spacing-sm);
+      }
+
+      &.small {
+        --size: 0.875rem;
+
+        column-gap: var(--glide-core-spacing-xs);
+        font-size: var(--glide-core-body-xs-font-size);
+        padding-block: var(--glide-core-spacing-xxxs);
+        padding-inline: var(--glide-core-spacing-xs);
+      }
+
+      &:focus {
+        outline: none;
+      }
+
+      &:focus-visible {
+        outline-offset: -2px;
+      }
+
+      &:focus,
+      &:hover {
+        background-color: var(--glide-core-surface-hover);
+      }
+    }
+
     .select-all {
       border-block-end: 1px solid var(--glide-core-border-base-light);
       margin-block-end: var(--glide-core-spacing-xxxs);
@@ -195,12 +277,25 @@ import{css}from"lit";import focusOutline from"./styles/focus-outline.js";import
       }
     }
 
+    .internal-label-tooltip {
+      display: none;
+      overflow: hidden;
+
+      &.visible {
+        display: block;
+      }
+    }
+
     .internal-label {
+      overflow: hidden;
+
       /*
         2px so the label is vertically aligned. "vertical-align: middle" has no
         effect on flex children.
       */
       padding-block-start: 0.125rem;
+      text-overflow: ellipsis;
+      white-space: nowrap;
     }
 
     .primary-button {