@taprootio/espalier 4.5.0 → 4.7.0

package/dist/pickers/esp-pick-one.js

@@ -1,14 +1,15 @@
-var h=function(a,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,n):t,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(a,e,n,t);else for(var l=a.length-1;l>=0;l--)(o=a[l])&&(s=(i<3?o(s):i>3?o(e,n,s):o(e,n))||s);return i>3&&s&&Object.defineProperty(e,n,s),s};import{css as d,html as m}from"lit";import{customElement as f,property as I,state as y}from"lit/decorators.js";import{classMap as g}from"lit/directives/class-map.js";import{ref as p}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as k}from"../shared/esp-element-base.js";import{styleMap as P}from"lit/directives/style-map.js";import{caretUpDown as w}from"../shared/svgs/caret-up-down.js";import{filter as v}from"../shared/svgs/filter.js";import{EspalierPickerBase as u}from"./esp-picker-base.js";import{PickOneSelection as r}from"./pick-one-selection.js";let c=class extends u{constructor(){super(...arguments),this.selection=r.empty(),this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.handleHostPointerDown=e=>{this.selectOpenMenuAtPoint(e)&&(this.lastMenuPointSelectionAt=performance.now())},this.handleHostMouseDown=e=>{if(performance.now()-this.lastMenuPointSelectionAt<500){e.preventDefault(),e.stopPropagation();return}this.selectOpenMenuAtPoint(e)}}get selectedItem(){return this.selection.item}decorateFilteredItems(e){if(!this.selectedItem)return e.map(t=>({...t}));const n=this.selectedItem.value;return e.map(t=>({...t,selected:t.value===n}))}get typeaheadRestoreText(){return this.selectedItem?.text??""}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote&&this.selectedItem!==void 0}get value(){return this.selectedItem?.value}set value(e){const n=this.pickerItems??[];for(const i of n)i.selected=i.value===e;const t=this.pickerMenu.value?.pickerItems;if(t&&t!==n)for(const i of t)i.selected=i.value===e;this.selection=r.resolve(n,e),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selection=r.empty()}handlePickerRestore(e){this.value=e}syncSelectionFromItems(e){if(e.has("pickerItems")){if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const n=this.pickerItems.find(t=>t.selected);n&&(this.selection=r.of(n))}}}selectOpenMenuAtPoint(e){return!this.showOptions||!(this.pickerMenu.value?.selectItemAtPoint(e.clientX,e.clientY)??!1)?!1:(this.suppressNextHostClick=!0,e.preventDefault(),e.stopPropagation(),!0)}render(){const{showOptions:e}=this;return m`
+var u=function(h,t,i,e){var n=arguments.length,s=n<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,i):e,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(h,t,i,e);else for(var l=h.length-1;l>=0;l--)(o=h[l])&&(s=(n<3?o(s):n>3?o(t,i,s):o(t,i))||s);return n>3&&s&&Object.defineProperty(t,i,s),s};import{css as d,html as m}from"lit";import{customElement as f,property as I,state as y}from"lit/decorators.js";import{classMap as k}from"lit/directives/class-map.js";import{ref as a}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{styleMap as P}from"lit/directives/style-map.js";import{caretUpDown as w}from"../shared/svgs/caret-up-down.js";import{filter as v}from"../shared/svgs/filter.js";import{EspalierPickerBase as p}from"./esp-picker-base.js";import{PickOneSelection as r}from"./pick-one-selection.js";let c=class extends p{constructor(){super(...arguments),this.selection=r.empty(),this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.handleHostPointerDown=t=>{this.selectOpenMenuAtPoint(t)&&(this.lastMenuPointSelectionAt=performance.now())},this.handleHostMouseDown=t=>{if(performance.now()-this.lastMenuPointSelectionAt<500){t.preventDefault(),t.stopPropagation();return}this.selectOpenMenuAtPoint(t)}}get selectedItem(){return this.selection.item}decorateFilteredItems(t){if(!this.selectedItem)return t.map(e=>({...e}));const i=this.selectedItem.value;return t.map(e=>({...e,selected:e.value===i}))}get typeaheadRestoreText(){return this.selectedItem?.text??""}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote&&this.selectedItem!==void 0}get value(){return this.selectedItem?.value}set value(t){const i=this.pickerItems??[];for(const n of i)n.selected=n.value===t;const e=this.pickerMenu.value?.pickerItems;if(e&&e!==i)for(const n of e)n.selected=n.value===t;this.selection=r.resolve(i,t),this.formCtrl.syncValue()}getPickerFormValue(){return this.selectedItem?.value??null}getPickerValidity(){return this.required&&!this.selectedItem?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select an option."}:null}handlePickerReset(){this.selection=r.empty()}handlePickerRestore(t){this.value=t}syncSelectionFromItems(t){if(t.has("pickerItems")){if(this.selection.hasPending){this.value=this.selection.pending;return}if(!this.selectedItem){const i=this.pickerItems.find(e=>e.selected);i&&(this.selection=r.of(i))}}}selectOpenMenuAtPoint(t){return!this.showOptions||!(this.pickerMenu.value?.selectItemAtPoint(t.clientX,t.clientY)??!1)?!1:(this.suppressNextHostClick=!0,t.preventDefault(),t.stopPropagation(),!0)}render(){const{showOptions:t}=this,i={"esp-field":!0,"show-options":t};return m`
       <div
+        ${a(this.pickerField)}
         tabindex="-1"
-        class=${g({"esp-field":!0,"show-options":e})}
+        class=${k(i)}
         @pointerdown=${this.handleHostPointerDown}
         @mousedown=${this.handleHostMouseDown}
-        @click=${t=>{if(this.suppressNextHostClick){this.suppressNextHostClick=!1,t.preventDefault(),t.stopPropagation();return}this.typeahead&&!this.showOptions&&(this.suppressAutoSelect=!0),this.theInput.value?.focus(),this.showOptions=!this.showOptions,t.stopPropagation()}}
+        @click=${e=>{if(this.suppressNextHostClick){this.suppressNextHostClick=!1,e.preventDefault(),e.stopPropagation();return}if(this.hasAttribute("data-picker-menu-fullscreen")&&this.theInput.value&&e.composedPath().includes(this.theInput.value)){e.stopPropagation();return}this.typeahead&&!this.showOptions&&(this.suppressAutoSelect=!0),this.theInput.value?.focus(),this.showOptions?this.closeAndResetTypeahead():this.showOptions=!0,e.stopPropagation()}}
       >
         <section>
           <input
-            ${p(this.theInput)}
+            ${a(this.theInput)}
             class="esp-input"
             value=${this.selectedItem?.text??""}
             style=${P(this.selectedItem?.styles??{})}
@@ -17,10 +18,11 @@ var h=function(a,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnP
             @input=${this.handleTypeaheadInput}
             @focus=${()=>{this.inputFocused=!0,this.typeahead&&!this.suppressAutoSelect&&this.theInput.value?.select(),this.suppressAutoSelect=!1}}
             @blur=${this.handleInputBlur}
-            @keydown=${t=>{if(this.pickerMenu.value&&!this.handleSharedPickerKeydown(t))switch(t.key){case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":this.handleMenuNavigationKey(t.key,t);break}}}
+            @keydown=${e=>{if(this.pickerMenu.value&&!this.handleSharedPickerKeydown(e))switch(e.key){case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":this.handleMenuNavigationKey(e.key,e);break}}}
           />
         </section>
         <label>${this.typeahead&&this.inputFocused?v:w}</label>
+        ${this.renderPickerMenuDismissButton()}
 
         <esp-picker-menu
           .pickerItems=${this.menuItems}
@@ -28,16 +30,17 @@ var h=function(a,e,n,t){var i=arguments.length,s=i<3?e:t===null?t=Object.getOwnP
           .emptyMessage=${this.typeahead?"No matches":""}
           .label=${this.placeholder}
           tabindex="-1"
-          ${p(this.pickerMenu)}
-          @esp-picker-menu-selection-changed=${t=>{if(t.stopPropagation(),this.typeahead)return;const i=t.detail,s=i.length>0?i[0]:void 0;(i.length>0?this.selectedItem!==s:this.selectedItem!==void 0)&&(this.selection=this.showOptions?r.of(s):this.selection.withProvisionalItem(s),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem))}}
-          @esp-picker-menu-close-requested=${t=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const i=t.detail,s=i.length>0?i[0]:void 0;if(s?this.selectedItem?.value!==s.value:this.selectedItem!==void 0){if(this.selection=r.of(s),s)for(const l of this.pickerItems)l.selected=l.value===s.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+          ${a(this.pickerMenu)}
+          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead)return;const n=e.detail,s=n.length>0?n[0]:void 0;(n.length>0?this.selectedItem!==s:this.selectedItem!==void 0)&&(this.selection=this.showOptions?r.of(s):this.selection.withProvisionalItem(s),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem))}}
+          @esp-picker-menu-close-requested=${e=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const n=e.detail,s=n.length>0?n[0]:void 0;if(s?this.selectedItem?.value!==s.value:this.selectedItem!==void 0){if(this.selection=r.of(s),s)for(const l of this.pickerItems)l.selected=l.value===s.value;this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItem)}this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+          @esp-picker-menu-dismiss-requested=${this.handleMenuDismissRequested}
         >
         </esp-picker-menu>
       </div>
-      <slot ${p(this.itemsSlot)}></slot>
-    `}};c.styles=[...k.styles,u.pickerFieldStyles,d`
+      <slot ${a(this.itemsSlot)}></slot>
+    `}};c.styles=[...g.styles,...p.pickerFieldStyles,d`
       .esp-field input.esp-input {
         width: 0;
         flex-grow: 1;
       }
-    `],h([y()],c.prototype,"selection",void 0),h([I({type:String})],c.prototype,"value",null),c=h([f("esp-pick-one")],c);export{c as EspalierPickOne};
+    `],u([y()],c.prototype,"selection",void 0),u([I({type:String})],c.prototype,"value",null),c=u([f("esp-pick-one")],c);export{c as EspalierPickOne};

package/dist/pickers/esp-pick-some.js

@@ -1,8 +1,9 @@
-var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,s):e,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,t,s,e);else for(var l=o.length-1;l>=0;l--)(n=o[l])&&(i=(a<3?n(i):a>3?n(t,s,i):n(t,s))||i);return a>3&&i&&Object.defineProperty(t,s,i),i};import{css as I,html as p}from"lit";import{customElement as k,property as u,state as v}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{ref as d}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";import{caretUpDown as b}from"../shared/svgs/caret-up-down.js";import{filter as $}from"../shared/svgs/filter.js";import{plus as V}from"../shared/svgs/plus.js";import{EspalierPickerBase as m}from"./esp-picker-base.js";import{arrayKeysMatch as f}from"../shared/utilities.js";let r=class extends m{constructor(){super(...arguments),this.selectedItems=[],this.initialSyncDone=!1,this.addNewValue=null}decorateFilteredItems(t){const s=new Set(this.selectedItems.map(e=>e.value));return t.map(e=>({...e,selected:s.has(e.value)}))}get typeaheadRestoreText(){return""}get values(){return this.selectedItems.map(t=>t.value)}getPickerFormValue(){const t=this.values;return t.length>0?t.join(","):null}getPickerValidity(){return this.required&&this.selectedItems.length===0?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select at least one option."}:null}handlePickerReset(){this.selectedItems=[],this.pickerItems=this.pickerItems.map(t=>({...t,selected:!1}))}handlePickerRestore(t){const s=t.split(",");this.pickerItems=this.pickerItems.map(e=>({...e,selected:s.includes(e.value)})),this.selectedItems=this.pickerItems.filter(e=>e.selected)}syncSelectionFromItems(t){if(this.initialSyncDone||!t.has("pickerItems")||this.selectedItems.length>0)return;const s=this.pickerItems.filter(e=>e.selected);s.length>0&&(this.selectedItems=s,this.initialSyncDone=!0)}setSelectedItems(t){this.initialSyncDone=!0,this.selectedItems=t,this.pickerItems=this.pickerItems.map(s=>({...s,selected:this.selectedItems.some(e=>e.value===s.value)})),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItems),this.focus()}get canAddNewValue(){if(!this.addNewValue||!this.typeahead)return!1;const t=this.theInput.value;if(!t||!t.value.trim())return!1;const s=t.value.trim().toLowerCase(),e=a=>a.text.toLowerCase()===s;return!(this.pickerItems.some(e)||this.typeaheadIsRemote&&this.filteredItems.some(e))}async handleAddNewValue(){if(!this.addNewValue)return;const t=this.theInput.value;if(!t||!t.value.trim())return;const s=t.value.trim();let e;try{e=await this.addNewValue(s)}catch{return}const a=this.pickerItems.find(i=>i.value===e.value);if(a){this.selectedItems.some(i=>i.value===a.value)||(a.selected=!0,this.setSelectedItems([...this.selectedItems,a])),this.resetTypeaheadInput();return}e.selected=!0,this.pickerItems=[...this.pickerItems,e],this.setSelectedItems([...this.selectedItems,e]),this.resetTypeaheadInput(),this.refreshTypeaheadItems(),this.typeaheadIsRemote&&this.fetchInitialTypeaheadItems()}get iconSvg(){return this.canAddNewValue?V:this.typeahead&&this.inputFocused?$:b}render(){const{showOptions:t}=this;return p`
+var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnPropertyDescriptor(t,s):e,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(o,t,s,e);else for(var l=o.length-1;l>=0;l--)(n=o[l])&&(i=(a<3?n(i):a>3?n(t,s,i):n(t,s))||i);return a>3&&i&&Object.defineProperty(t,s,i),i};import{css as I,html as p}from"lit";import{customElement as k,property as u,state as y}from"lit/decorators.js";import{classMap as v}from"lit/directives/class-map.js";import{ifDefined as g}from"lit/directives/if-defined.js";import{ref as h}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";import{caretUpDown as b}from"../shared/svgs/caret-up-down.js";import{filter as $}from"../shared/svgs/filter.js";import{plus as V}from"../shared/svgs/plus.js";import{EspalierPickerBase as m}from"./esp-picker-base.js";import{arrayKeysMatch as f}from"../shared/utilities.js";let r=class extends m{constructor(){super(...arguments),this.selectedItems=[],this.initialSyncDone=!1,this.addNewValue=null}decorateFilteredItems(t){const s=new Set(this.selectedItems.map(e=>e.value));return t.map(e=>({...e,selected:s.has(e.value)}))}get typeaheadRestoreText(){return""}get values(){return this.selectedItems.map(t=>t.value)}getPickerFormValue(){const t=this.values;return t.length>0?t.join(","):null}getPickerValidity(){return this.required&&this.selectedItems.length===0?{flags:{valueMissing:!0},message:this.requiredMessage||"Please select at least one option."}:null}handlePickerReset(){this.selectedItems=[],this.pickerItems=this.pickerItems.map(t=>({...t,selected:!1}))}handlePickerRestore(t){const s=t.split(",");this.pickerItems=this.pickerItems.map(e=>({...e,selected:s.includes(e.value)})),this.selectedItems=this.pickerItems.filter(e=>e.selected)}syncSelectionFromItems(t){if(this.initialSyncDone||!t.has("pickerItems")||this.selectedItems.length>0)return;const s=this.pickerItems.filter(e=>e.selected);s.length>0&&(this.selectedItems=s,this.initialSyncDone=!0)}setSelectedItems(t){this.initialSyncDone=!0,this.selectedItems=t,this.pickerItems=this.pickerItems.map(s=>({...s,selected:this.selectedItems.some(e=>e.value===s.value)})),this.formCtrl.syncValue(),this.emitValueChanged(this.selectedItems),this.focus()}get canAddNewValue(){if(!this.addNewValue||!this.typeahead)return!1;const t=this.theInput.value;if(!t||!t.value.trim())return!1;const s=t.value.trim().toLowerCase(),e=a=>a.text.toLowerCase()===s;return!(this.pickerItems.some(e)||this.typeaheadIsRemote&&this.filteredItems.some(e))}async handleAddNewValue(){if(!this.addNewValue)return;const t=this.theInput.value;if(!t||!t.value.trim())return;const s=t.value.trim();let e;try{e=await this.addNewValue(s)}catch{return}const a=this.pickerItems.find(i=>i.value===e.value);if(a){this.selectedItems.some(i=>i.value===a.value)||(a.selected=!0,this.setSelectedItems([...this.selectedItems,a])),this.resetTypeaheadInput();return}e.selected=!0,this.pickerItems=[...this.pickerItems,e],this.setSelectedItems([...this.selectedItems,e]),this.resetTypeaheadInput(),this.refreshTypeaheadItems(),this.typeaheadIsRemote&&this.fetchInitialTypeaheadItems()}get iconSvg(){return this.canAddNewValue?V:this.typeahead&&this.inputFocused?$:b}render(){const{showOptions:t}=this,s={"esp-field":!0,"show-options":t};return p`
       <div
+        ${h(this.pickerField)}
         tabindex="-1"
-        class=${y({"esp-field":!0,"show-options":t})}
-        @click=${e=>{this.theInput.value?.focus(),this.showOptions=!this.showOptions,e.stopPropagation()}}
+        class=${v(s)}
+        @click=${e=>{if(this.hasAttribute("data-picker-menu-fullscreen")&&this.theInput.value&&e.composedPath().includes(this.theInput.value)){e.stopPropagation();return}this.theInput.value?.focus(),this.showOptions?this.closeAndResetTypeahead():this.showOptions=!0,e.stopPropagation()}}
       >
         <section>
           ${this.selectedItems.map(e=>p`<span
@@ -11,7 +12,7 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
                 >${e.text}</span
               >`)}
           <input
-            ${d(this.theInput)}
+            ${h(this.theInput)}
             class="esp-input"
             placeholder=${this.placeholder}
             ?readonly=${!this.typeahead}
@@ -30,6 +31,7 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           aria-label=${g(this.canAddNewValue?"Add new value":void 0)}
           >${this.iconSvg}</label
         >
+        ${this.renderPickerMenuDismissButton()}
 
         <esp-picker-menu
           .pickerItems=${this.menuItems}
@@ -37,14 +39,15 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           .emptyMessage=${this.typeahead?"No matches":""}
           .label=${this.placeholder}
           tabindex="-1"
-          ${d(this.pickerMenu)}
+          ${h(this.pickerMenu)}
           multi-select
-          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead){const i=new Set(this.filteredItems.map(h=>h.value)),l=[...this.selectedItems.filter(h=>!i.has(h.value)),...e.detail];if(f(l,this.selectedItems,"value"))return;this.setSelectedItems(l),this.resetTypeaheadInput();return}f(e.detail,this.selectedItems,"value")||this.setSelectedItems(e.detail)}}
+          @esp-picker-menu-selection-changed=${e=>{if(e.stopPropagation(),this.typeahead){const i=new Set(this.filteredItems.map(d=>d.value)),l=[...this.selectedItems.filter(d=>!i.has(d.value)),...e.detail];if(f(l,this.selectedItems,"value"))return;this.setSelectedItems(l),this.resetTypeaheadInput();return}f(e.detail,this.selectedItems,"value")||this.setSelectedItems(e.detail)}}
+          @esp-picker-menu-dismiss-requested=${this.handleMenuDismissRequested}
         >
         </esp-picker-menu>
       </div>
-      <slot ${d(this.itemsSlot)}></slot>
-    `}};r.styles=[...w.styles,m.pickerFieldStyles,I`
+      <slot ${h(this.itemsSlot)}></slot>
+    `}};r.styles=[...w.styles,...m.pickerFieldStyles,I`
       :host {
         --_esp-pick-some-chip-hover-l: calc(var(--esp-l-raised-2) * 0.88);
         --_esp-pick-some-chip-focus-l: calc(var(--esp-l-raised-2) * 0.8);
@@ -99,4 +102,4 @@ var c=function(o,t,s,e){var a=arguments.length,i=a<3?t:e===null?e=Object.getOwnP
           color: var(--esp-color-primary);
         }
       }
-    `],c([v()],r.prototype,"selectedItems",void 0),c([u({type:Array})],r.prototype,"values",null),c([u({attribute:!1})],r.prototype,"addNewValue",void 0),r=c([k("esp-pick-some")],r);export{r as EspalierPickSome};
+    `],c([y()],r.prototype,"selectedItems",void 0),c([u({type:Array})],r.prototype,"values",null),c([u({attribute:!1})],r.prototype,"addNewValue",void 0),r=c([k("esp-pick-some")],r);export{r as EspalierPickSome};

package/dist/pickers/esp-picker-base.d.ts

@@ -2,7 +2,7 @@ import { type EspalierFormField } from "../form-item/esp-form-item.js";
 import { type EspalierPickerMenu } from "./esp-picker-menu.js";
 import { EspalierElementBase } from "../shared/esp-element-base.js";
 import { type PickerItem } from "./esp-picker-item.js";
-import { type PropertyValues } from "lit";
+import { type PropertyValues, type TemplateResult } from "lit";
 import { FormFieldController } from "../shared/form-field-controller.js";
 import type { TypeaheadFetchItems } from "./types.js";
 /** Keys that drive the picker menu rather than the input's text. */
@@ -32,6 +32,7 @@ export declare abstract class EspalierPickerBase extends EspalierElementBase imp
     protected itemsSlot: import("lit-html/directives/ref.js").Ref<HTMLSlotElement>;
     protected pickerMenu: import("lit-html/directives/ref.js").Ref<EspalierPickerMenu>;
     protected theInput: import("lit-html/directives/ref.js").Ref<HTMLInputElement>;
+    protected pickerField: import("lit-html/directives/ref.js").Ref<HTMLDivElement>;
     protected get showOptions(): boolean;
     protected set showOptions(val: boolean);
     protected typeaheadLoading: boolean;
@@ -97,6 +98,14 @@ export declare abstract class EspalierPickerBase extends EspalierElementBase imp
      * click has closed the menu itself, or focus really is gone.
      */
     protected handleInputBlur: (event: FocusEvent) => void;
+    protected closeAndResetTypeahead(): void;
+    /** Close without changing selection, then restore focus to the combobox. */
+    protected dismissMenu(): void;
+    /** Handle the public menu request while preserving owner-level state. */
+    protected readonly handleMenuDismissRequested: (ev: Event) => void;
+    /** Render compact-only chrome outside the listbox accessibility subtree. */
+    protected renderPickerMenuDismissButton(): TemplateResult;
+    disconnectedCallback(): void;
     /**
      * Handle the keys both pickers treat identically.
      *
@@ -203,5 +212,5 @@ export declare abstract class EspalierPickerBase extends EspalierElementBase imp
      * Subclasses spread this into their own `static styles` and add only what is
      * genuinely theirs (`esp-pick-some`'s selection chips, for example).
      */
-    static pickerFieldStyles: import("lit").CSSResult;
+    static pickerFieldStyles: import("lit").CSSResult[];
 }

package/dist/pickers/esp-picker-base.js

@@ -1,33 +1,89 @@
-var r=function(d,e,t,o){var a=arguments.length,s=a<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,t):o,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")s=Reflect.decorate(d,e,t,o);else for(var l=d.length-1;l>=0;l--)(n=d[l])&&(s=(a<3?n(s):a>3?n(e,t,s):n(e,t))||s);return a>3&&s&&Object.defineProperty(e,t,s),s};import{createRef as u}from"lit/directives/ref.js";import{EspalierElementBase as f}from"../shared/esp-element-base.js";import{property as h,state as p}from"lit/decorators.js";import{EspalierPickerItem as y}from"./esp-picker-item.js";import{css as v}from"lit";import{findContainingPopovers as g,PopoverController as I}from"../shared/popover-controller.js";import{scrollToContainAnchoredSurface as w,viewportSize as c}from"../shared/viewport.js";import{FormFieldController as C}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as k}from"../shared/form-field-description-controller.js";import{TypeaheadController as b}from"./typeahead-controller.js";class i extends f{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new C({host:this,internals:this.internals,getFormValue:()=>this.getPickerFormValue(),getValidity:()=>this.getPickerValidity(),onReset:()=>this.handlePickerReset(),onRestore:e=>this.handlePickerRestore(e),onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new k({host:this,getTarget:()=>this.theInput.value}),this._showOptions=!1,this.itemsSlot=u(),this.pickerMenu=u(),this.theInput=u(),this._lastViewportHeight=0,this.popoverCtrl=new I({host:this,closeStrategy:"source-identity",isOpen:()=>this._showOptions,onShouldClose:()=>{this.showOptions=!1},onPositionUpdate:()=>{this.pickerMenu.value?.updatePosition(this);const{height:e}=c();if(this._lastViewportHeight!==0&&e!==this._lastViewportHeight){const t=this._lastViewportHeight-e;t>=i.KEYBOARD_THRESHOLD?(this._scrollToContainPopover(),this._lastViewportHeight=e):t<0&&(this._lastViewportHeight=e)}},getInsideElements:()=>[this.pickerMenu.value??null],onOutsideClick:()=>{this.showOptions=!1}}),this.typeaheadLoading=!1,this.filteredItems=[],this.inputFocused=!1,this.typeaheadCtrl=new b({host:this,onFilteredItemsChanged:e=>{this.filteredItems=this.decorateFilteredItems(e)},onLoadingChanged:e=>{this.typeaheadLoading=e}}),this.typeahead=!1,this.fetchItems=null,this.debounceMs=void 0,this.handleTypeaheadInput=e=>{this.typeahead&&(this.typeaheadCtrl.setQuery(e.target.value),this.showOptions||(this.showOptions=!0))},this.handleInputBlur=e=>{this.inputFocused=!1;const t=e.relatedTarget;if(!(t&&(this.contains(t)||this.shadowRoot?.contains(t)))){if(!t&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.shadowRoot?.activeElement!==this.theInput.value&&this.closeAndResetTypeahead()});return}this.closeAndResetTypeahead()}},this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.pickerItems=[],this.placeholder="Choose...",this.width="",this._slotExtractPending=!1}getPickerFormValue(){return null}getPickerValidity(){return null}handlePickerReset(){}handlePickerRestore(e){}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}get showOptions(){return this._showOptions}set showOptions(e){if(e&&this.disabled)return;const t=this._showOptions;this._showOptions=e;const o=this.theInput.value;o&&(o.ariaExpanded=String(e)),e&&this.pickerMenu.value?(this.popoverCtrl.publishCloseOthers(g(this)),this.pickerMenu.value.positionSelf(this),this._lastViewportHeight=c().height,this.clearActiveDescendant(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick()):!e&&this.pickerMenu.value&&(this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.pickerMenu.value.hideMenu(),this.clearActiveDescendant(),this._lastViewportHeight=0),e&&!t&&this.typeahead&&this.typeaheadCtrl.isRemote&&this.filteredItems.length===0&&this.typeaheadCtrl.fetchInitial()}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote}get typeaheadIsRemote(){return this.typeaheadCtrl.isRemote}refreshTypeaheadItems(){this.typeaheadCtrl.setAllItems(this.pickerItems)}fetchInitialTypeaheadItems(){this.typeaheadCtrl.fetchInitial()}resetTypeaheadInput(){const e=this.theInput.value;e&&(e.value=this.typeaheadRestoreText),this.preservesRemoteResultsOnReset?this.typeaheadCtrl.resetQuery():this.typeaheadCtrl.clearQuery()}closeAndResetTypeahead(){this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput()}handleSharedPickerKeydown(e){switch(e.key){case" ":return this.typeahead||(this.showOptions=!this.showOptions),!0;case"Tab":return this.showOptions&&(this.showOptions=!1),this.typeahead&&this.resetTypeaheadInput(),!0;case"Escape":return this.closeAndResetTypeahead(),!0;default:return!1}}handleMenuNavigationKey(e,t){if(t.preventDefault(),!this.showOptions){this.showOptions=!0;return}this.pickerMenu.value?.doKeyboardNav(e),this.updateActiveDescendant()}get menuItems(){return this.typeahead?this.filteredItems:this.pickerItems}focus(){this.theInput.value?.focus()}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}updateActiveDescendant(){const e=this.theInput.value;if(!e||!this.pickerMenu.value)return;const t=this.pickerMenu.value.getHighlightedElement();e.ariaActiveDescendantElement=t}clearActiveDescendant(){const e=this.theInput.value;e&&(e.ariaActiveDescendantElement=null)}_scrollToContainPopover(){const e=this.pickerMenu.value;e&&w(this,e,()=>{this.pickerMenu.value?.updatePosition(this)})}syncSelectionFromItems(e){}willUpdate(e){super.willUpdate(e),this.syncSelectionFromItems(e),this.typeahead&&((e.has("pickerItems")||e.has("typeahead"))&&this.typeaheadCtrl.setAllItems(this.pickerItems),(e.has("fetchItems")||e.has("typeahead"))&&this.typeaheadCtrl.setFetchItems(this.fetchItems),(e.has("debounceMs")||e.has("typeahead"))&&this.debounceMs!==void 0&&this.typeaheadCtrl.setDebounceMs(this.debounceMs))}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.width=this.width:this.style.removeProperty("width"))}firstUpdated(e){super.firstUpdated(e);const t=this.theInput.value;if(t&&(t.role="combobox",t.ariaHasPopup="listbox",t.ariaExpanded="false",t.ariaAutoComplete=this.typeahead?"list":"none",this.pickerMenu.value)){const a=t;a.ariaControlsElements=[this.pickerMenu.value]}const o=this.itemsSlot.value;o&&(this.extractSlotItems(o),o.addEventListener("slotchange",()=>this.extractSlotItems(o)))}extractSlotItems(e){this._slotExtractPending||(this._slotExtractPending=!0,queueMicrotask(()=>{this._slotExtractPending=!1;const t=e.assignedElements();if(t.length===0)return;const o=[];for(const a of t){if(!(a instanceof y))throw new Error(`Picker items must be of type esp-picker-item, but got <${a.tagName.toLowerCase()}>`);const s=a,n=Array.from(s.childNodes),l=n.length>0?n.map(m=>m.cloneNode(!0)):void 0;o.push({text:s.text||s.getAttribute("text")||s.textContent?.trim()||"",value:s.value||s.getAttribute("value")||"",selected:s.selected||s.hasAttribute("selected"),icon:s.icon||s.getAttribute("icon")||"",styles:s.styles,slotNodes:l})}this.pickerItems=o;for(const a of t)a.remove()}))}}i.formAssociated=!0,i.KEYBOARD_THRESHOLD=150,i.pickerFieldStyles=v`
-    :host([disabled]) {
-      pointer-events: none;
-      opacity: 0.5;
-    }
-
-    .esp-field {
-      display: grid;
-      grid-template-columns: auto min-content;
-      position: relative;
-
-      > section {
-        cursor: pointer;
-        display: flex;
-        flex-wrap: wrap;
+var l=function(m,e,t,r){var o=arguments.length,i=o<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,n;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(m,e,t,r);else for(var h=m.length-1;h>=0;h--)(n=m[h])&&(i=(o<3?n(i):o>3?n(e,t,i):n(e,t))||i);return o>3&&i&&Object.defineProperty(e,t,i),i};import{createRef as u}from"lit/directives/ref.js";import{EspalierElementBase as w}from"../shared/esp-element-base.js";import{property as a,state as d}from"lit/decorators.js";import{EspalierPickerItem as I}from"./esp-picker-item.js";import{css as P,html as C,unsafeCSS as R}from"lit";import{findContainingPopovers as F,PopoverController as A}from"../shared/popover-controller.js";import{scrollToContainAnchoredSurface as S,viewportSize as y}from"../shared/viewport.js";import{FormFieldController as _}from"../shared/form-field-controller.js";import{FormFieldDescriptionController as O}from"../shared/form-field-description-controller.js";import{TypeaheadController as M}from"./typeahead-controller.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as z}from"../shared/responsive.js";import{cancelSVG as x}from"../shared/svgs/cancel.js";import{quietCloseButton as E}from"../shared/style-fragments.js";import{ScrollLock as g}from"../shared/overlay-controller.js";class s extends w{constructor(){super(...arguments),this.internals=this.attachInternals(),this.formCtrl=new _({host:this,internals:this.internals,getFormValue:()=>this.getPickerFormValue(),getValidity:()=>this.getPickerValidity(),onReset:()=>this.handlePickerReset(),onRestore:e=>this.handlePickerRestore(e),onDisabled:e=>{this.disabled=e}}),this.formItemDescription=new O({host:this,getTarget:()=>this.theInput.value}),this._showOptions=!1,this.itemsSlot=u(),this.pickerMenu=u(),this.theInput=u(),this.pickerField=u(),this._lastViewportHeight=0,this._containRepositionFrame=null,this.fullscreenPlaceholderInlineSize=0,this.fullscreenPlaceholderViewportWidth=0,this.fullscreenPlaceholderFieldHeight=0,this.fullscreenPlaceholderEntryInlineSize=0,this.fullscreenPlaceholderContentSized=!1,this.popoverCtrl=new A({host:this,closeStrategy:"source-identity",isOpen:()=>this._showOptions,onShouldClose:()=>{this.showOptions=!1},onPositionUpdate:()=>{this.pickerMenu.value?.updatePosition(this);const{height:e}=y();if(this.pickerMenu.value?.hasAttribute("data-fullscreen")){this._lastViewportHeight=e;return}if(this._lastViewportHeight!==0&&e!==this._lastViewportHeight){const t=this._lastViewportHeight-e;t>=s.KEYBOARD_THRESHOLD?(this._scrollToContainPopover(),this._lastViewportHeight=e):t<0&&(this._lastViewportHeight=e)}},getPositionElements:()=>this.hasAttribute("data-picker-menu-fullscreen")?[this.pickerField.value]:[this.pickerMenu.value],getInsideElements:()=>[this.pickerMenu.value??null],onOutsideClick:()=>{this.closeAndResetTypeahead(),requestAnimationFrame(()=>{const e=document.activeElement;!this.showOptions&&(e===null||e===document.body||e===this)&&this.theInput.value?.focus()})}}),this.typeaheadLoading=!1,this.filteredItems=[],this.inputFocused=!1,this.typeaheadCtrl=new M({host:this,onFilteredItemsChanged:e=>{this.filteredItems=this.decorateFilteredItems(e)},onLoadingChanged:e=>{this.typeaheadLoading=e}}),this.typeahead=!1,this.fetchItems=null,this.debounceMs=void 0,this.handleTypeaheadInput=e=>{this.typeahead&&(this.typeaheadCtrl.setQuery(e.target.value),this.showOptions||(this.showOptions=!0))},this.handleInputBlur=e=>{this.inputFocused=!1;const t=e.relatedTarget;if(!(t&&(this.contains(t)||this.shadowRoot?.contains(t)))){if(t&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.closeAndResetTypeahead()});return}if(!t&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.shadowRoot?.activeElement!==this.theInput.value&&this.closeAndResetTypeahead()});return}this.closeAndResetTypeahead()}},this.handleMenuDismissRequested=e=>{e.preventDefault(),e.stopPropagation(),this.dismissMenu()},this.name="",this.required=!1,this.requiredMessage="",this.disabled=!1,this.pickerItems=[],this.placeholder="Choose...",this.width="",this._slotExtractPending=!1}getPickerFormValue(){return null}getPickerValidity(){return null}handlePickerReset(){}handlePickerRestore(e){}formResetCallback(){this.formCtrl.handleFormReset()}formStateRestoreCallback(e){this.formCtrl.handleFormStateRestore(e)}formDisabledCallback(e){this.formCtrl.handleFormDisabled(e)}get showOptions(){return this._showOptions}set showOptions(e){if(e&&this.disabled)return;const t=this._showOptions;this._showOptions=e;const r=this.theInput.value;r&&(r.ariaExpanded=String(e)),e&&this.pickerMenu.value?(this.popoverCtrl.publishCloseOthers(F(this)),this.pickerMenu.value.positionSelf(this),this._lastViewportHeight=y().height,this.clearActiveDescendant(),this.popoverCtrl.startTracking(),this.popoverCtrl.startOutsideClick()):!e&&this.pickerMenu.value&&(this._containRepositionFrame!==null&&(cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=null),this.popoverCtrl.stopTracking(),this.popoverCtrl.stopOutsideClick(),this.pickerMenu.value.hideMenu(),this.clearActiveDescendant(),this._lastViewportHeight=0),e&&!t&&this.typeahead&&this.typeaheadCtrl.isRemote&&this.filteredItems.length===0&&this.typeaheadCtrl.fetchInitial()}get preservesRemoteResultsOnReset(){return this.typeaheadIsRemote}get typeaheadIsRemote(){return this.typeaheadCtrl.isRemote}refreshTypeaheadItems(){this.typeaheadCtrl.setAllItems(this.pickerItems)}fetchInitialTypeaheadItems(){this.typeaheadCtrl.fetchInitial()}resetTypeaheadInput(){const e=this.theInput.value;e&&(e.value=this.typeaheadRestoreText),this.preservesRemoteResultsOnReset?this.typeaheadCtrl.resetQuery():this.typeaheadCtrl.clearQuery()}closeAndResetTypeahead(){this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput()}dismissMenu(){this.closeAndResetTypeahead(),this.theInput.value?.focus()}renderPickerMenuDismissButton(){return C`<button
+      class="picker-mobile-dismiss"
+      type="button"
+      aria-label="Close options"
+      @click=${e=>{e.preventDefault(),e.stopPropagation(),this.pickerMenu.value?.requestDismiss()}}
+    >
+      ${x}
+    </button>`}enterPickerMenuFullscreen(){const e=this.pickerField.value;if(!e)return null;const t=y().width;if(!this.hasAttribute("data-picker-menu-fullscreen")){const c=this.getBoundingClientRect(),f=Number.isFinite(c.width)?c.width:0;this.fullscreenPlaceholderEntryInlineSize=Math.max(f,0),this.setAttribute("data-picker-menu-fullscreen",""),e.setAttribute("data-picker-menu-fullscreen-surface",""),e.setAttribute("popover","manual");try{e.matches(":popover-open")||e.showPopover()}catch{return e.removeAttribute("popover"),e.removeAttribute("data-picker-menu-fullscreen-surface"),this.removeAttribute("data-picker-menu-fullscreen"),this.fullscreenPlaceholderEntryInlineSize=0,null}this.fullscreenPlaceholderContentSized=!(this.getBoundingClientRect().width>0),g.lock(this,{preserveScrollPosition:!0}),this.popoverCtrl.refreshPositionElements()}const o=e.getBoundingClientRect(),i=o.height;let n;if(this.fullscreenPlaceholderContentSized)n=Math.min(this.fullscreenPlaceholderEntryInlineSize,t);else{const c=this.getBoundingClientRect().width;n=Number.isFinite(c)?Math.min(Math.max(c,0),t):this.fullscreenPlaceholderInlineSize}const h=n!==this.fullscreenPlaceholderInlineSize||t!==this.fullscreenPlaceholderViewportWidth||i!==this.fullscreenPlaceholderFieldHeight;if(h){const f=["inline-size","box-sizing","padding","margin","overflow"].map(p=>({name:p,value:e.style.getPropertyValue(p),priority:e.style.getPropertyPriority(p)}));this.removeAttribute("data-picker-menu-fullscreen"),e.style.setProperty("inline-size",`${n}px`),e.style.setProperty("box-sizing","border-box"),e.style.setProperty("padding","0"),e.style.setProperty("margin","0"),e.style.setProperty("overflow","visible");const k=e.getBoundingClientRect().height;this.setAttribute("data-picker-menu-fullscreen","");for(const{name:p,value:v,priority:b}of f)v?e.style.setProperty(p,v,b):e.style.removeProperty(p);this.fullscreenPlaceholderInlineSize=n,this.fullscreenPlaceholderViewportWidth=t,this.fullscreenPlaceholderFieldHeight=i,this.style.setProperty("--_esp-picker-fullscreen-placeholder-block-size",`${k}px`),this.fullscreenPlaceholderContentSized?this.style.setProperty("--_esp-picker-fullscreen-placeholder-inline-size",`${n}px`):this.style.removeProperty("--_esp-picker-fullscreen-placeholder-inline-size")}return h?e.getBoundingClientRect():o}exitPickerMenuFullscreen(){const e=this.hasAttribute("data-picker-menu-fullscreen"),t=this.pickerField.value;if(t?.matches(":popover-open"))try{t.hidePopover()}catch{}t?.removeAttribute("popover"),t?.removeAttribute("data-picker-menu-fullscreen-surface"),this.removeAttribute("data-picker-menu-fullscreen"),this.style.removeProperty("--_esp-picker-fullscreen-placeholder-block-size"),this.style.removeProperty("--_esp-picker-fullscreen-placeholder-inline-size"),this.fullscreenPlaceholderInlineSize=0,this.fullscreenPlaceholderViewportWidth=0,this.fullscreenPlaceholderFieldHeight=0,this.fullscreenPlaceholderEntryInlineSize=0,this.fullscreenPlaceholderContentSized=!1,g.unlock(this),e&&this.popoverCtrl.refreshPositionElements()}pickerMenuIsOpen(){return this.showOptions}disconnectedCallback(){this.showOptions=!1,this.exitPickerMenuFullscreen(),super.disconnectedCallback()}handleSharedPickerKeydown(e){switch(e.key){case" ":return this.typeahead||(this.showOptions=!this.showOptions),!0;case"Tab":return this.showOptions&&(this.showOptions=!1),this.typeahead&&this.resetTypeaheadInput(),!0;case"Escape":return this.closeAndResetTypeahead(),!0;default:return!1}}handleMenuNavigationKey(e,t){if(t.preventDefault(),!this.showOptions){this.showOptions=!0;return}this.pickerMenu.value?.doKeyboardNav(e),this.updateActiveDescendant()}get menuItems(){return this.typeahead?this.filteredItems:this.pickerItems}focus(){this.theInput.value?.focus()}setFormItemDescription(e){this.formItemDescription.setDescription(e)}setFormItemLabel(e){this.formItemDescription.setLabel(e)}validate(){this.formCtrl.validate()}checkValidity(){return this.formCtrl.checkValidity()}updateActiveDescendant(){const e=this.theInput.value;if(!e||!this.pickerMenu.value)return;const t=this.pickerMenu.value.getHighlightedElement();e.ariaActiveDescendantElement=t}clearActiveDescendant(){const e=this.theInput.value;e&&(e.ariaActiveDescendantElement=null)}_scrollToContainPopover(){const e=this.pickerMenu.value;e&&(this._containRepositionFrame!==null&&cancelAnimationFrame(this._containRepositionFrame),this._containRepositionFrame=S(this,e,()=>{this._containRepositionFrame=null,this.showOptions&&this.pickerMenu.value?.updatePosition(this)}))}syncSelectionFromItems(e){}willUpdate(e){super.willUpdate(e),this.syncSelectionFromItems(e),this.typeahead&&((e.has("pickerItems")||e.has("typeahead"))&&this.typeaheadCtrl.setAllItems(this.pickerItems),(e.has("fetchItems")||e.has("typeahead"))&&this.typeaheadCtrl.setFetchItems(this.fetchItems),(e.has("debounceMs")||e.has("typeahead"))&&this.debounceMs!==void 0&&this.typeaheadCtrl.setDebounceMs(this.debounceMs))}updated(e){super.updated(e),e.has("width")&&(this.width?this.style.width=this.width:this.style.removeProperty("width"))}firstUpdated(e){super.firstUpdated(e);const t=this.theInput.value;if(t&&(t.role="combobox",t.ariaHasPopup="listbox",t.ariaExpanded="false",t.ariaAutoComplete=this.typeahead?"list":"none",this.pickerMenu.value)){const o=t;o.ariaControlsElements=[this.pickerMenu.value]}const r=this.itemsSlot.value;r&&(this.extractSlotItems(r),r.addEventListener("slotchange",()=>this.extractSlotItems(r)))}extractSlotItems(e){this._slotExtractPending||(this._slotExtractPending=!0,queueMicrotask(()=>{this._slotExtractPending=!1;const t=e.assignedElements();if(t.length===0)return;const r=[];for(const o of t){if(!(o instanceof I))throw new Error(`Picker items must be of type esp-picker-item, but got <${o.tagName.toLowerCase()}>`);const i=o,n=Array.from(i.childNodes),h=n.length>0?n.map(c=>c.cloneNode(!0)):void 0;r.push({text:i.text||i.getAttribute("text")||i.textContent?.trim()||"",value:i.value||i.getAttribute("value")||"",selected:i.selected||i.hasAttribute("selected"),icon:i.icon||i.getAttribute("icon")||"",styles:i.styles,slotNodes:h})}this.pickerItems=r;for(const o of t)o.remove()}))}}s.formAssociated=!0,s.KEYBOARD_THRESHOLD=150,s.pickerFieldStyles=[...E(".esp-field > .picker-mobile-dismiss"),P`
+      :host([disabled]) {
+        pointer-events: none;
+        opacity: 0.5;
       }
 
-      > label {
+      .esp-field {
         display: grid;
-        place-content: center;
-        cursor: pointer;
+        grid-template-columns: auto min-content;
+        position: relative;
 
-        > svg {
-          height: var(--esp-size-normal-to-medium);
-          width: var(--esp-size-normal-to-medium);
+        > section {
+          cursor: pointer;
+          display: flex;
+          flex-wrap: wrap;
         }
+
+        > label {
+          display: grid;
+          place-content: center;
+          cursor: pointer;
+
+          > svg {
+            height: var(--esp-size-normal-to-medium);
+            width: var(--esp-size-normal-to-medium);
+          }
+        }
+      }
+
+      :host([typeahead]) .esp-field > section {
+        cursor: text;
       }
-    }
 
-    :host([typeahead]) .esp-field > section {
-      cursor: text;
-    }
-  `,r([p()],i.prototype,"showOptions",null),r([p()],i.prototype,"typeaheadLoading",void 0),r([p()],i.prototype,"filteredItems",void 0),r([p()],i.prototype,"inputFocused",void 0),r([h({type:Boolean,reflect:!0})],i.prototype,"typeahead",void 0),r([h({attribute:!1})],i.prototype,"fetchItems",void 0),r([h({type:Number,attribute:"debounce-ms"})],i.prototype,"debounceMs",void 0),r([h({type:String,reflect:!0})],i.prototype,"name",void 0),r([h({type:Boolean,reflect:!0})],i.prototype,"required",void 0),r([h({attribute:"required-message"})],i.prototype,"requiredMessage",void 0),r([h({type:Boolean,reflect:!0})],i.prototype,"disabled",void 0),r([h({type:Array})],i.prototype,"pickerItems",void 0),r([h({type:String})],i.prototype,"placeholder",void 0),r([h({type:String})],i.prototype,"width",void 0);export{i as EspalierPickerBase};
+      .esp-field > .picker-mobile-dismiss {
+        display: none;
+      }
+
+      @media ${R(z)} {
+        
+        :host([data-picker-menu-fullscreen]) {
+          min-block-size: var(--_esp-picker-fullscreen-placeholder-block-size, 2.75rem);
+          min-inline-size: var(--_esp-picker-fullscreen-placeholder-inline-size, 0);
+        }
+
+        :host([data-picker-menu-fullscreen]) .esp-field {
+          position: fixed;
+          inset: 0 0 auto 0;
+          box-sizing: border-box;
+          inline-size: 100vw;
+          max-inline-size: none;
+          min-block-size: 2.75rem;
+          margin: 0;
+          padding: 0;
+          overflow: visible;
+          grid-template-columns: minmax(0, 1fr) min-content min-content;
+          border-radius: 0;
+        }
+
+        :host([data-picker-menu-fullscreen]) .esp-field > section {
+          min-inline-size: 0;
+        }
+
+        :host([data-picker-menu-fullscreen]) .esp-field > label:not(.add-new) {
+          display: none;
+        }
+
+        :host([data-picker-menu-fullscreen]) .picker-mobile-dismiss {
+          display: grid;
+          grid-column: -2;
+          place-items: center;
+          box-sizing: border-box;
+          min-block-size: 2.75rem;
+          min-inline-size: 2.75rem;
+          margin: 0;
+          border-radius: var(--esp-size-border-radius);
+        }
+
+        :host([data-picker-menu-fullscreen]) .picker-mobile-dismiss:focus-visible {
+          box-shadow: inset 0 0 0 3px var(--esp-color-link, var(--esp-color-shadow));
+        }
+      }
+    `],l([d()],s.prototype,"showOptions",null),l([d()],s.prototype,"typeaheadLoading",void 0),l([d()],s.prototype,"filteredItems",void 0),l([d()],s.prototype,"inputFocused",void 0),l([a({type:Boolean,reflect:!0})],s.prototype,"typeahead",void 0),l([a({attribute:!1})],s.prototype,"fetchItems",void 0),l([a({type:Number,attribute:"debounce-ms"})],s.prototype,"debounceMs",void 0),l([a({type:String,reflect:!0})],s.prototype,"name",void 0),l([a({type:Boolean,reflect:!0})],s.prototype,"required",void 0),l([a({attribute:"required-message"})],s.prototype,"requiredMessage",void 0),l([a({type:Boolean,reflect:!0})],s.prototype,"disabled",void 0),l([a({type:Array})],s.prototype,"pickerItems",void 0),l([a({type:String})],s.prototype,"placeholder",void 0),l([a({type:String})],s.prototype,"width",void 0);export{s as EspalierPickerBase};

package/dist/pickers/esp-picker-menu.d.ts

@@ -7,9 +7,15 @@ import "../shared/virtualizer/lit-virtualizer.js";
  * @event {CustomEvent<Array<PickerItem>>} esp-picker-menu-selection-changed - Emitted when
  * the user changes the selected item(s). If there are initially selected items,
  * emitted on first update.
- * @event {CustomEvent<Array<PickerItem>>} esp-picker-menu-close-requested - Emitted in single-select mode when the menu should close after a selection is made. Bubbles and is composed so parent pickers can observe it across shadow boundaries.
+ * @event {CustomEvent<Array<PickerItem>>} esp-picker-menu-close-requested - Emitted when the menu should close after a single-select choice. Bubbles and is composed so parent pickers can observe it across shadow boundaries.
+ * @event {CustomEvent<void>} esp-picker-menu-dismiss-requested - Emitted when the mobile dismiss affordance requests a close without changing selection. Bubbles, is composed, and is cancelable so an owner can coordinate state before closing; an uncanceled request closes the standalone menu directly.
  * @event {CustomEvent<{ first: number; last: number; items: Array<PickerItem> }>} esp-picker-menu-range-changed - Emitted when the virtualized visible item range changes.
  *
+ * Standalone menus do not render owner chrome. Call the public
+ * `requestDismiss()` method from a consumer-provided close affordance.
+ * `updatePosition()` repositions an already-open standalone menu but does not
+ * open one; standalone consumers retain explicit ownership of that lifecycle.
+ *
  * ```html
  * <esp-box>
  *   <h4>No selected items</h4>
@@ -101,6 +107,8 @@ export declare class EspalierPickerMenu extends LitElement {
      */
     getHighlightedElement(): EspalierPickerItem | null;
     selectItemAtPoint(clientX: number, clientY: number): boolean;
+    /** Request an owner-coordinated close, with a standalone self-close fallback. */
+    requestDismiss(): void;
     /**
      * Position the picker menu above or below the given element depending
      * on whether or not there is more room above or below the element.
@@ -130,6 +138,7 @@ export declare class EspalierPickerMenu extends LitElement {
      * Hide the picker menu popover.
      */
     hideMenu(): void;
+    disconnectedCallback(): void;
     /**
      * Used to perform keyboard actions on the menu. `ArrowDown` and `ArrowUp`
      * change the focused item in the menu. `Enter` toggles selection of the

package/dist/pickers/esp-picker-menu.js

@@ -1,22 +1,24 @@
-var a=function(u,t,e,s){var l=arguments.length,i=l<3?t:s===null?s=Object.getOwnPropertyDescriptor(t,e):s,r;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(u,t,e,s);else for(var n=u.length-1;n>=0;n--)(r=u[n])&&(i=(l<3?r(i):l>3?r(t,e,i):r(t,e))||i);return l>3&&i&&Object.defineProperty(t,e,i),i};import{LitElement as I,css as P,html as d}from"lit";import{customElement as b,property as g,state as v}from"lit/decorators.js";import{createRef as x,ref as S}from"lit/directives/ref.js";import{styleMap as w}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as y,viewportSize as f}from"../shared/viewport.js";import{ESP_EVENTS as m}from"../shared/events.js";const p="highlighted";let h=class extends I{constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=x(),this.internalPoolClone=null,this.internalPoolFingerprint=null,this.internalPickScrollTop=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=t=>{this.selectItemFromPointerEvent(t)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(t,e)=>{const s={display:"block",cursor:"pointer",width:"100%",...t.styles};return d`<esp-picker-item
+var u=function(a,e,t,r){var s=arguments.length,i=s<3?e:r===null?r=Object.getOwnPropertyDescriptor(e,t):r,l;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")i=Reflect.decorate(a,e,t,r);else for(var n=a.length-1;n>=0;n--)(l=a[n])&&(i=(s<3?l(i):s>3?l(e,t,i):l(e,t))||i);return s>3&&i&&Object.defineProperty(e,t,i),i};import{LitElement as S,css as k,html as g,unsafeCSS as C}from"lit";import{customElement as T,property as P,state as w}from"lit/decorators.js";import{createRef as E,ref as H}from"lit/directives/ref.js";import{styleMap as A}from"lit/directives/style-map.js";import"../shared/virtualizer/lit-virtualizer.js";import{spaceAroundRect as I,viewportSize as m}from"../shared/viewport.js";import{ESP_EVENTS as f}from"../shared/events.js";import{COMPACT_VIEWPORT_MEDIA_QUERY as R,compactViewportMatches as z}from"../shared/responsive.js";import{findContainingPopovers as M}from"../shared/popover-controller.js";const y="highlighted",F=44;function x(a){if(!a)return null;const e=a;return typeof e.enterPickerMenuFullscreen=="function"&&typeof e.exitPickerMenuFullscreen=="function"&&typeof e.pickerMenuIsOpen=="function"?a:null}function $(a){if(M(a).some(t=>[...t.shadowRoot?.querySelectorAll("[popover]")??[]].some(r=>r.matches(":popover-open"))))return!0;let e=a;for(;e;){const t=e.getRootNode();if(e=e.assignedSlot??e.parentElement??(t instanceof ShadowRoot?t.host:null),!e)return!1;if(e.matches(":popover-open")||e.matches("dialog[open], esp-dialog[is-open], esp-flyout[open]"))return!0}return!1}let p=class extends S{get fullscreenPresentation(){return this.hasAttribute("data-fullscreen")}constructor(){super(),this.internals=this.attachInternals(),this.virtualizerRef=E(),this.internalPoolClone=null,this.internalPoolFingerprint=null,this.internalPickScrollTop=null,this.lastPoolFingerprint=null,this.preRenderScrollTop=null,this.openSessionGeneration=0,this.maxAvailableHeight=0,this.lastViewportHeight=0,this.positionTarget=null,this.label="",this.virtualizedItemsPool=[],this.highlightIndex=-1,this.multiSelect=!1,this.loading=!1,this.emptyMessage="",this.handleItemPointerDown=e=>{this.selectItemFromPointerEvent(e)},this.menuDirty=!1,this.settlerActive=!1,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.renderPickerItem=(e,t)=>{const r={display:"block",cursor:"pointer",width:"100%",...e.styles};return g`<esp-picker-item
       class="picker-item"
-      data-picker-index=${e}
-      .text=${t.text}
-      .value=${t.value}
-      .selected=${t.selected}
-      .icon=${t.icon??""}
-      .highlightRanges=${t.highlightRanges}
-      style=${w(s)}
+      data-picker-index=${t}
+      .text=${e.text}
+      .value=${e.value}
+      .selected=${e.selected}
+      .icon=${e.icon??""}
+      .highlightRanges=${e.highlightRanges}
+      style=${A(r)}
     >
-      ${t.slotNodes?.map(l=>l.cloneNode(!0))}
-    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(t){if(super.willUpdate(t),t.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const e=this.virtualizerRef.value?.scrollTop??0;e>0&&(this.preRenderScrollTop=e)}}updated(t){super.updated(t),t.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),t.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const e=t.has("virtualizedItemsPool");let s=!1;if(e){const l=this.virtualizedItemsPool.map(r=>`${r.value}\0${r.text}\0${r.selected===!0}`),i=this.virtualizedItemsPool===this.internalPoolClone||this.internalPoolFingerprint!==null&&this.internalPoolFingerprint.length===l.length&&this.internalPoolFingerprint.every((r,n)=>r===l[n]);this.internalPoolClone=null,i||(this.internalPoolFingerprint=null,this.internalPickScrollTop=null),s=!i&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==l.length||this.lastPoolFingerprint.some((r,n)=>r!==l[n])),this.lastPoolFingerprint=l}(e||t.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=s,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(t){const e=this.virtualizedItemsPool.filter(i=>i.selected).map(i=>i.value);this.virtualizedItemsPool=t;const s=t.filter(i=>i.selected),l=s.map(i=>i.value);(e.length!==l.length||e.some((i,r)=>i!==l[r]))&&this.dispatchEvent(new CustomEvent(m.PICKER_MENU_SELECTION_CHANGED,{detail:s,bubbles:!0,composed:!0}))}setHighlight(t){const e=this.virtualizedItemsPool;if(e.length===0)return;(this.highlightIndex<0||this.highlightIndex>e.length-1)&&(this.highlightIndex=t);const s=this.virtualizerRef.value;s&&s.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(t){const e=this.openSessionGeneration,s=()=>e!==this.openSessionGeneration||!this.isConnected,l=this.virtualizedItemsPool;if(l.length===0)return;(this.highlightIndex<0||this.highlightIndex>l.length-1)&&(this.highlightIndex=t);const i=this.virtualizerRef.value;if(i){if(await this.stableLayout(i),s())return;const r=i.scrollTop;for(let n=0;n<3;n+=1)try{i.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(i),s()||i.scrollTop!==r)return}if(await this.stableLayout(i),s())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const t=this.getHighlightedElement();t&&(this.clearHighlight(),t.classList.add(p))}clearHighlight(){const t=this.virtualizerRef.value;if(t)for(const e of t.querySelectorAll(`esp-picker-item.${p}`))e.classList.remove(p)}resetHighlight(){this.clearHighlight();const t=this.virtualizedItemsPool.find(e=>e.selected);this.highlightIndex=t?this.virtualizedItemsPool.indexOf(t):-1}applyHighlightWithRetry(t){if(!this.isConnected||!this.matches(":popover-open"))return;const e=this.getHighlightedElement();if(e){this.clearHighlight(),e.classList.add(p);return}t>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(t-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const t=this.virtualizerRef.value;if(!t)return null;const e=t.querySelectorAll("esp-picker-item");for(const s of e)if(this.virtualizedItemsPool.findIndex(i=>i.value===s.value&&i.text===s.text)===this.highlightIndex)return s;return null}pickItem(t){const e=this.virtualizerRef.value?.scrollTop??0;this.preRenderScrollTop===null&&e>0&&(this.preRenderScrollTop=e),e>0&&(this.internalPickScrollTop=e);for(const i of this.pickerItems)i===t?i.selected=!i.selected:this.multiSelect||(i.selected=!1);const s=this.virtualizedItemsPool.indexOf(t);if(s!==-1){this.highlightIndex=s;const i=this.getHighlightedElement();i&&(this.clearHighlight(),i.classList.add(p))}const l=[...this.pickerItems];this.internalPoolClone=l,this.internalPoolFingerprint=l.map(i=>`${i.value}\0${i.text}\0${i.selected===!0}`),this.pickerItems=l,this.dispatchEvent(new CustomEvent(m.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(m.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0}))}selectItemByIndex(t){const e=Number.isInteger(t)?this.virtualizedItemsPool[t]:void 0;return e?(this.pickItem(e),!0):!1}getPickerItemElementAtPoint(t,e){const s=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!s)return null;for(const l of s){const i=l.getBoundingClientRect();if(t>=i.left&&t<=i.right&&e>=i.top&&e<=i.bottom)return l}return null}selectPickerItemElement(t){return t?this.selectItemByIndex(Number(t.dataset.pickerIndex)):!1}selectItemAtPoint(t,e){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(t,e))}selectItemFromPointerEvent(t){const e=t.composedPath().find(l=>l instanceof HTMLElement&&l.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(e??this.getPickerItemElementAtPoint(t.clientX,t.clientY))?(t.preventDefault(),t.stopPropagation(),!0):!1}positionSelf(t){const e=t.getBoundingClientRect(),{height:s}=f(),{spaceAbove:l,spaceBelow:i}=y(e,s),r=Math.max(Math.max(l,i)-75,0);this.maxAvailableHeight=r,this.lastViewportHeight=s,this.style.setProperty("height",`${r}px`),this.style.setProperty("min-width",`${e.width}px`),this.style.setProperty("left",`${e.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),l>i?this.style.setProperty("bottom",`${s-e.top}px`):this.style.setProperty("top",`${e.bottom}px`),this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const n=this.pickerItems.find(c=>c.selected);this.highlightIndex=n?this.pickerItems.indexOf(n):0,this.openSessionGeneration+=1;const o=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{o!==this.openSessionGeneration||!this.isConnected||(this.shrinkToFit(r),this.widenToFitContent(e),this.classList.add("visible"))})})}async stableLayout(t){for(let e=0;e<20;e+=1){const s=t.layoutComplete;if(!s)return;const l=await Promise.race([s.then(()=>"settled",()=>"superseded"),new Promise(i=>setTimeout(()=>i("deadline"),250))]);if(l==="settled"||l==="deadline"||t.layoutComplete===s)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const t=()=>!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,!0):!1;try{for(let e=0;e<10&&this.menuDirty;e+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const s=this.virtualizerRef.value;if(!s){requestAnimationFrame(()=>{if(!this.isConnected)return;const o=this.shadowRoot?.querySelector(".status-message");if(o){const c=Math.min(o.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${c}px`)}});continue}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue;const l=this.preRenderScrollTop??0,i=l>0&&!this.pendingItemsChanged&&!this.retargetingSequence;if(s.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),i&&s.scrollTop<l){if(s.scrollTop=l,await this.stableLayout(s),t())return;if(this.menuDirty)continue}const r=this.virtualizedItemsPool;if(r.length===0)continue;if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const o=r.findIndex(c=>c.selected);o>=0?this.highlightIndex=o:this.highlightIndex>=r.length?this.highlightIndex=r.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{s.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3);const n=Math.max(i?l:0,this.internalPickScrollTop??0);if(n>0){if(s.scrollTop<n&&(s.scrollTop=n),await this.stableLayout(s),t())return;if(this.menuDirty)continue;if(await new Promise(o=>requestAnimationFrame(()=>o())),t())return;if(this.menuDirty)continue;s.scrollTop<n&&(s.scrollTop=n)}this.internalPickScrollTop=null,this.preRenderScrollTop=null,this.retargetingSequence=!1}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(t){const e=this.measureContentHeight();e>0&&this.style.setProperty("height",`${Math.min(e,t)}px`)}shrinkToFit(t){const e=this.measureContentHeight();e>2&&e<t&&this.style.setProperty("height",`${e}px`)}measureContentHeight(){const t=this.virtualizerRef.value;if(!t)return 0;const e=t.querySelectorAll("esp-picker-item");if(e.length===0)return 0;const s=getComputedStyle(this),l=(parseFloat(s.borderTopWidth)||0)+(parseFloat(s.borderBottomWidth)||0),i=this.virtualizedItemsPool.length;if(e.length<i)return t.scrollHeight+l;const r=t.scrollTop;t.scrollTop=0;const n=t.getBoundingClientRect(),o=e[e.length-1].getBoundingClientRect();return r>0&&(t.scrollTop=r),o.bottom-n.top+l}widenToFitContent(t){const e=this.virtualizerRef.value;if(!e)return;const s=e.querySelectorAll("esp-picker-item");let l=t.width;for(const i of s)l=Math.max(l,i.scrollWidth);if(l+=2,l>t.width){const{width:i}=f(),r=Math.min(l,i-t.left);this.style.setProperty("width",`${r}px`)}}updatePosition(t){const e=t.getBoundingClientRect(),{height:s}=f();if(s!==this.lastViewportHeight){const{spaceAbove:r,spaceBelow:n}=y(e,s),o=Math.max(Math.max(r,n)-75,0);this.maxAvailableHeight=o,this.lastViewportHeight=s,(parseFloat(this.style.getPropertyValue("height"))||0)>o&&this.style.setProperty("height",`${o}px`),this.sizeToContent(o)}this.style.setProperty("left",`${e.left}px`);const l=e.top,i=s-e.bottom;l>i?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${s-e.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${e.bottom}px`))}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,this.menuDirty=!1;try{this.hidePopover()}catch{}}doKeyboardNav(t){const e=this.virtualizedItemsPool;if(e.length!==0)switch(t){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(e.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=e.length-1,this.setHighlight(e.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(e[this.highlightIndex]);break}}render(){return this.loading?d`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?d`<div class="status-message">${this.emptyMessage}</div>`:d`<lit-virtualizer
-      ${S(this.virtualizerRef)}
-      scroller
-      .items=${this.virtualizedItemsPool}
-      .renderItem=${this.renderPickerItem}
-      @pointerdown=${this.handleItemPointerDown}
-      @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent(m.PICKER_MENU_RANGE_CHANGED,{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
-    ></lit-virtualizer>`}};h.styles=P`
+      ${e.slotNodes?.map(s=>s.cloneNode(!0))}
+    </esp-picker-item>`},this.internals.role="listbox"}connectedCallback(){super.connectedCallback(),this.setAttribute("popover","manual"),this.hasAttribute("role")||this.setAttribute("role","listbox")}willUpdate(e){if(super.willUpdate(e),e.has("virtualizedItemsPool")&&this.preRenderScrollTop===null&&!this.retargetingSequence&&this.matches(":popover-open")){const t=this.virtualizerRef.value?.scrollTop??0;t>0&&(this.preRenderScrollTop=t)}}updated(e){super.updated(e),e.has("multiSelect")&&(this.internals.ariaMultiSelectable=String(this.multiSelect),this.setAttribute("aria-multiselectable",String(this.multiSelect))),e.has("label")&&(this.internals.ariaLabel=this.label,this.label?this.setAttribute("aria-label",this.label):this.removeAttribute("aria-label"));const t=e.has("virtualizedItemsPool");let r=!1;if(t){const s=this.virtualizedItemsPool.map(l=>`${l.value}\0${l.text}\0${l.selected===!0}`),i=this.virtualizedItemsPool===this.internalPoolClone||this.internalPoolFingerprint!==null&&this.internalPoolFingerprint.length===s.length&&this.internalPoolFingerprint.every((l,n)=>l===s[n]);this.internalPoolClone=null,i||(this.internalPoolFingerprint=null,this.internalPickScrollTop=null),r=!i&&(this.lastPoolFingerprint===null||this.lastPoolFingerprint.length!==s.length||this.lastPoolFingerprint.some((l,n)=>l!==s[n])),this.lastPoolFingerprint=s}(t||e.has("loading"))&&this.maxAvailableHeight>0&&this.matches(":popover-open")&&(this.pendingItemsChanged||=r,this.menuDirty=!0,this.settleMenuAfterUpdate())}get pickerItems(){return this.virtualizedItemsPool}set pickerItems(e){const t=this.virtualizedItemsPool.filter(i=>i.selected).map(i=>i.value);this.virtualizedItemsPool=e;const r=e.filter(i=>i.selected),s=r.map(i=>i.value);(t.length!==s.length||t.some((i,l)=>i!==s[l]))&&this.dispatchEvent(new CustomEvent(f.PICKER_MENU_SELECTION_CHANGED,{detail:r,bubbles:!0,composed:!0}))}setHighlight(e){const t=this.virtualizedItemsPool;if(t.length===0)return;(this.highlightIndex<0||this.highlightIndex>t.length-1)&&(this.highlightIndex=e);const r=this.virtualizerRef.value;r&&r.scrollToIndex(this.highlightIndex,"nearest"),this.applyHighlightClass()}async setHighlightAsync(e){const t=this.openSessionGeneration,r=()=>t!==this.openSessionGeneration||!this.isConnected,s=this.virtualizedItemsPool;if(s.length===0)return;(this.highlightIndex<0||this.highlightIndex>s.length-1)&&(this.highlightIndex=e);const i=this.virtualizerRef.value;if(i){if(await this.stableLayout(i),r())return;const l=i.scrollTop;for(let n=0;n<3;n+=1)try{i.scrollToIndex(this.highlightIndex,"nearest");break}catch{if(await this.stableLayout(i),r()||i.scrollTop!==l)return}if(await this.stableLayout(i),r())return}this.applyHighlightWithRetry(3)}applyHighlightClass(){const e=this.getHighlightedElement();e&&(this.clearHighlight(),e.classList.add(y))}clearHighlight(){const e=this.virtualizerRef.value;if(e)for(const t of e.querySelectorAll(`esp-picker-item.${y}`))t.classList.remove(y)}resetHighlight(){this.clearHighlight();const e=this.virtualizedItemsPool.find(t=>t.selected);this.highlightIndex=e?this.virtualizedItemsPool.indexOf(e):-1}applyHighlightWithRetry(e){if(!this.isConnected||!this.matches(":popover-open"))return;const t=this.getHighlightedElement();if(t){this.clearHighlight(),t.classList.add(y);return}e>0&&requestAnimationFrame(()=>this.applyHighlightWithRetry(e-1))}getHighlightedElement(){if(this.highlightIndex<0)return null;const e=this.virtualizerRef.value;if(!e)return null;const t=e.querySelectorAll("esp-picker-item");for(const r of t)if(this.virtualizedItemsPool.findIndex(i=>i.value===r.value&&i.text===r.text)===this.highlightIndex)return r;return null}pickItem(e){const t=this.virtualizerRef.value?.scrollTop??0;this.preRenderScrollTop===null&&t>0&&(this.preRenderScrollTop=t),t>0&&(this.internalPickScrollTop=t);for(const i of this.pickerItems)i===e?i.selected=!i.selected:this.multiSelect||(i.selected=!1);const r=this.virtualizedItemsPool.indexOf(e);if(r!==-1){this.highlightIndex=r;const i=this.getHighlightedElement();i&&(this.clearHighlight(),i.classList.add(y))}const s=[...this.pickerItems];this.internalPoolClone=s,this.internalPoolFingerprint=s.map(i=>`${i.value}\0${i.text}\0${i.selected===!0}`),this.pickerItems=s,this.dispatchEvent(new CustomEvent(f.PICKER_MENU_SELECTION_CHANGED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0})),this.multiSelect||this.dispatchEvent(new CustomEvent(f.PICKER_MENU_CLOSE_REQUESTED,{detail:this.pickerItems.filter(i=>i.selected),bubbles:!0,composed:!0}))}selectItemByIndex(e){const t=Number.isInteger(e)?this.virtualizedItemsPool[e]:void 0;return t?(this.pickItem(t),!0):!1}getPickerItemElementAtPoint(e,t){const r=this.shadowRoot?.querySelectorAll("esp-picker-item[data-picker-index]");if(!r)return null;for(const s of r){const i=s.getBoundingClientRect();if(e>=i.left&&e<=i.right&&t>=i.top&&t<=i.bottom)return s}return null}selectPickerItemElement(e){return e?this.selectItemByIndex(Number(e.dataset.pickerIndex)):!1}selectItemAtPoint(e,t){return this.selectPickerItemElement(this.getPickerItemElementAtPoint(e,t))}selectItemFromPointerEvent(e){const t=e.composedPath().find(s=>s instanceof HTMLElement&&s.matches("esp-picker-item[data-picker-index]"));return this.selectPickerItemElement(t??this.getPickerItemElementAtPoint(e.clientX,e.clientY))?(e.preventDefault(),e.stopPropagation(),!0):!1}requestDismiss(){this.dispatchEvent(new CustomEvent(f.PICKER_MENU_DISMISS_REQUESTED,{bubbles:!0,composed:!0,cancelable:!0}))&&this.hideMenu()}clearFullscreenTarget(e=this.positionTarget){x(e)?.exitPickerMenuFullscreen()}syncPresentation(e){const t=this.positionTarget;t&&t!==e&&this.clearFullscreenTarget(t),this.positionTarget=e;const r=x(e),s=z()&&r!==null&&!$(e);if(!s)return this.clearFullscreenTarget(e),this.toggleAttribute("data-fullscreen",!1),{fullscreen:s,rect:e.getBoundingClientRect()};const i=r.enterPickerMenuFullscreen();return i?(this.toggleAttribute("data-fullscreen",!0),{fullscreen:s,rect:i}):(this.clearFullscreenTarget(e),this.toggleAttribute("data-fullscreen",!1),{fullscreen:!1,rect:e.getBoundingClientRect()})}applyFullscreenGeometry(e){const{height:t,width:r}=m(),s=Math.min(Math.max(e.bottom,F),t);this.maxAvailableHeight=Math.max(t-s,0),this.lastViewportHeight=t;const i={viewportWidth:r,viewportHeight:t,inputBottom:s};this.lastFullscreenGeometry?.viewportWidth===i.viewportWidth&&this.lastFullscreenGeometry.viewportHeight===i.viewportHeight&&this.lastFullscreenGeometry.inputBottom===i.inputBottom||(this.lastFullscreenGeometry=i,this.style.setProperty("height",`${t}px`),this.style.setProperty("width",`${r}px`),this.style.setProperty("min-width",`${r}px`),this.style.setProperty("left","0px"),this.style.setProperty("top","0px"),this.style.removeProperty("bottom"),this.style.setProperty("--_esp-picker-menu-input-bottom",`${s}px`))}clearFullscreenGeometry(){this.lastFullscreenGeometry=void 0,this.style.removeProperty("height"),this.style.removeProperty("width"),this.style.removeProperty("min-width"),this.style.removeProperty("left"),this.style.removeProperty("top"),this.style.removeProperty("bottom"),this.style.removeProperty("--_esp-picker-menu-input-bottom")}positionSelf(e){this.resetSettleState();const{fullscreen:t,rect:r}=this.syncPresentation(e),{height:s}=m();let i;if(t)this.applyFullscreenGeometry(r),i=this.maxAvailableHeight;else{this.clearFullscreenGeometry();const{spaceAbove:o,spaceBelow:h}=I(r,s);i=Math.max(Math.max(o,h)-75,0),this.maxAvailableHeight=i,this.lastViewportHeight=s,this.style.setProperty("height",`${i}px`),this.style.setProperty("min-width",`${r.width}px`),this.style.setProperty("left",`${r.left}px`),this.style.removeProperty("top"),this.style.removeProperty("bottom"),o>h?this.style.setProperty("bottom",`${s-r.top}px`):this.style.setProperty("top",`${r.bottom}px`)}this.classList.remove("visible"),this.matches(":popover-open")||this.showPopover();const l=this.pickerItems.find(o=>o.selected);this.highlightIndex=l?this.pickerItems.indexOf(l):0,this.openSessionGeneration+=1;const n=this.openSessionGeneration;this.setHighlightAsync(0).then(()=>{requestAnimationFrame(()=>{n!==this.openSessionGeneration||!this.isConnected||(this.fullscreenPresentation||(this.shrinkToFit(i),this.widenToFitContent(r)),this.classList.add("visible"))})})}async stableLayout(e){for(let t=0;t<20;t+=1){const r=e.layoutComplete;if(!r)return;const s=await Promise.race([r.then(()=>"settled",()=>"superseded"),new Promise(i=>setTimeout(()=>i("deadline"),250))]);if(s==="settled"||s==="deadline"||e.layoutComplete===r)return}}async settleMenuAfterUpdate(){if(this.settlerActive)return;this.settlerActive=!0;const e=this.openSessionGeneration,t=()=>e!==this.openSessionGeneration?!0:!this.isConnected||!this.matches(":popover-open")?(this.menuDirty=!1,this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,!0):!1;try{for(let r=0;r<10&&this.menuDirty;r+=1){this.menuDirty=!1;try{await this.updateComplete}catch{this.menuDirty=!1;return}if(t())return;const s=this.virtualizerRef.value;if(!s){requestAnimationFrame(()=>{if(t()||this.fullscreenPresentation)return;const h=this.shadowRoot?.querySelector(".status-message");if(h){const c=Math.min(h.scrollHeight,this.maxAvailableHeight);this.style.setProperty("height",`${c}px`)}});continue}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue;const i=this.preRenderScrollTop??0,l=i>0&&!this.pendingItemsChanged&&!this.retargetingSequence;if(s.scrollTop=0,this.sizeToContent(this.maxAvailableHeight),l&&s.scrollTop<i){if(s.scrollTop=i,await this.stableLayout(s),t())return;if(this.menuDirty)continue}const n=this.virtualizedItemsPool;if(n.length===0)continue;if(this.pendingItemsChanged){this.pendingItemsChanged=!1,this.retargetingSequence=!0,this.preRenderScrollTop=null;const h=n.findIndex(c=>c.selected);h>=0?this.highlightIndex=h:this.highlightIndex>=n.length?this.highlightIndex=n.length-1:this.highlightIndex<0&&(this.highlightIndex=0)}if(this.retargetingSequence){try{s.scrollToIndex(this.highlightIndex,"nearest")}catch{}if(await this.stableLayout(s),t())return;if(this.menuDirty)continue}this.applyHighlightWithRetry(3);const o=Math.max(l?i:0,this.internalPickScrollTop??0);if(o>0){if(s.scrollTop<o&&(s.scrollTop=o),await this.stableLayout(s),t())return;if(this.menuDirty)continue;if(await new Promise(h=>requestAnimationFrame(()=>h())),t())return;if(this.menuDirty)continue;s.scrollTop<o&&(s.scrollTop=o)}this.internalPickScrollTop=null,this.preRenderScrollTop=null,this.retargetingSequence=!1}}finally{this.settlerActive=!1,this.menuDirty&&this.settleMenuAfterUpdate()}}sizeToContent(e){if(this.fullscreenPresentation)return;const t=this.measureContentHeight();t>0&&this.style.setProperty("height",`${Math.min(t,e)}px`)}shrinkToFit(e){if(this.fullscreenPresentation)return;const t=this.measureContentHeight();t>2&&t<e&&this.style.setProperty("height",`${t}px`)}measureContentHeight(){const e=this.virtualizerRef.value;if(!e)return 0;const t=e.querySelectorAll("esp-picker-item");if(t.length===0)return 0;const r=getComputedStyle(this),s=(parseFloat(r.borderTopWidth)||0)+(parseFloat(r.borderBottomWidth)||0),i=this.virtualizedItemsPool.length;if(t.length<i)return e.scrollHeight+s;const l=e.scrollTop;e.scrollTop=0;const n=e.getBoundingClientRect(),o=t[t.length-1].getBoundingClientRect();return l>0&&(e.scrollTop=l),o.bottom-n.top+s}widenToFitContent(e){if(this.fullscreenPresentation)return;const t=this.virtualizerRef.value;if(!t)return;const r=t.querySelectorAll("esp-picker-item");let s=e.width;for(const i of r)s=Math.max(s,i.scrollWidth);if(s+=2,s>e.width){const{width:i}=m(),l=Math.min(s,i-e.left);this.style.setProperty("width",`${l}px`)}}updatePosition(e){const t=x(e);if(t&&!t.pickerMenuIsOpen())return;const r=this.fullscreenPresentation,{fullscreen:s,rect:i}=this.syncPresentation(e),l=r!==s;if(l){const c=this.virtualizerRef.value?.scrollTop??0;c>0&&this.preRenderScrollTop===null&&!this.pendingItemsChanged&&!this.retargetingSequence&&(this.preRenderScrollTop=c),this.openSessionGeneration+=1,this.menuDirty=!0}if(!this.matches(":popover-open")){if(!t?.pickerMenuIsOpen())return;try{this.showPopover()}catch{this.menuDirty=!1,this.clearFullscreenTarget(e),this.removeAttribute("data-fullscreen"),this.clearFullscreenGeometry(),this.requestDismiss();return}this.classList.add("visible")}if(l&&this.settleMenuAfterUpdate(),s){this.applyFullscreenGeometry(i),l&&this.classList.add("visible");return}if(r){this.clearFullscreenGeometry(),this.style.setProperty("min-width",`${i.width}px`);const{height:c}=m(),{spaceAbove:b,spaceBelow:d}=I(i,c),v=Math.max(Math.max(b,d)-75,0);this.maxAvailableHeight=v,this.lastViewportHeight=c,this.style.setProperty("height",`${v}px`),this.sizeToContent(v)}const{height:n}=m();if(n!==this.lastViewportHeight){const{spaceAbove:c,spaceBelow:b}=I(i,n),d=Math.max(Math.max(c,b)-75,0);this.maxAvailableHeight=d,this.lastViewportHeight=n,(parseFloat(this.style.getPropertyValue("height"))||0)>d&&this.style.setProperty("height",`${d}px`),this.sizeToContent(d)}this.style.setProperty("left",`${i.left}px`);const o=i.top,h=n-i.bottom;o>h?(this.style.removeProperty("top"),this.style.setProperty("bottom",`${n-i.top}px`)):(this.style.removeProperty("bottom"),this.style.setProperty("top",`${i.bottom}px`)),l&&this.classList.add("visible")}hideMenu(){this.openSessionGeneration+=1,this.classList.remove("visible"),this.resetSettleState(),this.clearFullscreenTarget(),this.positionTarget=null,this.removeAttribute("data-fullscreen"),this.clearFullscreenGeometry();try{this.hidePopover()}catch{}}resetSettleState(){this.preRenderScrollTop=null,this.pendingItemsChanged=!1,this.retargetingSequence=!1,this.internalPickScrollTop=null,this.menuDirty=!1}disconnectedCallback(){this.hideMenu(),super.disconnectedCallback()}doKeyboardNav(e){const t=this.virtualizedItemsPool;if(t.length!==0)switch(e){case"ArrowDown":this.highlightIndex+=1,this.setHighlight(0);break;case"ArrowUp":this.highlightIndex-=1,this.setHighlight(t.length-1);break;case"Home":this.highlightIndex=0,this.setHighlight(0);break;case"End":this.highlightIndex=t.length-1,this.setHighlight(t.length-1);break;case"Enter":if(this.highlightIndex===-1)return;this.pickItem(t[this.highlightIndex]);break}}render(){let e;return this.loading?e=g`<div class="status-message">Searching…</div>`:this.virtualizedItemsPool.length===0&&this.emptyMessage?e=g`<div class="status-message">${this.emptyMessage}</div>`:e=g`<lit-virtualizer
+        ${H(this.virtualizerRef)}
+        scroller
+        .items=${this.virtualizedItemsPool}
+        .renderItem=${this.renderPickerItem}
+        @pointerdown=${this.handleItemPointerDown}
+        @rangeChanged=${t=>{this.dispatchEvent(new CustomEvent(f.PICKER_MENU_RANGE_CHANGED,{detail:{first:t.first,last:t.last,items:this.virtualizedItemsPool},bubbles:!0,composed:!0}))}}
+      ></lit-virtualizer>`,g`<div class="menu-content" @click=${t=>t.stopPropagation()}>
+      ${e}
+    </div>`}};p.styles=k`
     :host {
       position: fixed;
       inset: unset;
@@ -35,6 +37,12 @@ var a=function(u,t,e,s){var l=arguments.length,i=l<3?t:s===null?s=Object.getOwnP
       opacity: 1;
     }
 
+    .menu-content {
+      height: 100%;
+      overflow: hidden;
+      width: 100%;
+    }
+
     lit-virtualizer {
       
       height: 100%;
@@ -54,4 +62,31 @@ var a=function(u,t,e,s){var l=arguments.length,i=l<3?t:s===null?s=Object.getOwnP
       font-style: italic;
       background: var(--esp-color-layer-2);
     }
-  `,a([g({type:String})],h.prototype,"label",void 0),a([v()],h.prototype,"virtualizedItemsPool",void 0),a([v()],h.prototype,"highlightIndex",void 0),a([g({attribute:"multi-select",type:Boolean})],h.prototype,"multiSelect",void 0),a([g({type:Boolean})],h.prototype,"loading",void 0),a([g({type:String,attribute:"empty-message"})],h.prototype,"emptyMessage",void 0),h=a([b("esp-picker-menu")],h);export{h as EspalierPickerMenu};
+
+    @media ${C(R)} {
+      :host([data-fullscreen]) {
+        display: grid;
+        grid-template-rows: var(--_esp-picker-menu-input-bottom, 2.75rem) minmax(0, 1fr);
+        border: 0;
+        border-radius: 0;
+        box-shadow: none;
+        background: transparent;
+        pointer-events: none;
+      }
+
+      :host([data-fullscreen]) .menu-content {
+        grid-row: 2;
+        box-sizing: border-box;
+        min-height: 0;
+        height: auto;
+        border-block-start: 1px solid var(--esp-color-border);
+        background: var(--esp-color-layer-2);
+        overscroll-behavior: contain;
+        pointer-events: auto;
+      }
+
+      :host([data-fullscreen]) lit-virtualizer {
+        overscroll-behavior: contain;
+      }
+    }
+  `,u([P({type:String})],p.prototype,"label",void 0),u([w()],p.prototype,"virtualizedItemsPool",void 0),u([w()],p.prototype,"highlightIndex",void 0),u([P({attribute:"multi-select",type:Boolean})],p.prototype,"multiSelect",void 0),u([P({type:Boolean})],p.prototype,"loading",void 0),u([P({type:String,attribute:"empty-message"})],p.prototype,"emptyMessage",void 0),p=u([T("esp-picker-menu")],p);export{p as EspalierPickerMenu};

package/dist/root/esp-root.d.ts

@@ -66,6 +66,8 @@ export type { SchemeEvents } from "../shared/bus-events.js";
  * @cssprop --esp-font-body - Always-emitted family for body and UI text. Defaults to `system-ui, sans-serif` when `fontBody` is omitted or empty.
  * @cssprop --esp-font-headings - Consumer-authored heading family. Emitted only when configured; heading recipes otherwise fall back to `--esp-font-body`.
  * @cssprop --esp-font-brand - Consumer-authored brand family. Emitted only when configured; brand recipes otherwise fall back through headings to `--esp-font-body`.
+ * @cssprop --esp-font-menu - Consumer-authored navigation family. Emitted only when configured; menu items otherwise fall back to `--esp-font-body`, never to headings.
+ * @cssprop --esp-font-weight-menu - Font weight for horizontal navigation menu items. Defaults to `bold`.
  * @cssprop --esp-font-monospace - Family for code and monospace text. Defaults to `monospace`.
  * @cssprop --esp-color-series-1 - First categorical data-series color.
  * @cssprop --esp-color-series-2 - Second categorical data-series color.