@taprootio/espalier 2.0.0

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

@@ -0,0 +1,187 @@
+import { type PropertyValues } from "lit";
+import { EspalierElementBase } from "../shared/esp-element-base.js";
+import { type EspalierDialog } from "../dialog/esp-dialog.js";
+import "../toaster/esp-toaster.js";
+type HeaderPosition = "normal" | "sticky" | "fixed";
+/**
+ * Used to lay out standard page structure.
+ *
+ * @slot header - Global navigation content (typically an `esp-header`).
+ *
+ * ```html
+ * <esp-page class="docs">
+ *   <esp-header slot="header">
+ *     <a href="#" slot="brand" class="nav-logo">
+ *       <svg>
+ *         <use href="/assets/icons.svg#taproot-logo" />
+ *       </svg>
+ *     </a>
+ *     <esp-menu slot="menu" mode="horizontal">
+ *       <esp-menu-item label="Mammals" url="#"></esp-menu-item>
+ *       <esp-menu-item label="Reptiles" url="#"></esp-menu-item>
+ *       <esp-menu-item label="Amphibians" url="#"></esp-menu-item>
+ *     </esp-menu>
+ *     <esp-header-button slot="buttons" icon="cog" aria-label="Settings"></esp-header-button>
+ *   </esp-header>
+ *   <esp-menu slot="sidebar" mode="drawer"></esp-menu>
+ *   <div slot="right" style="background-color: purple;">right</div>
+ *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <div style="background-color: black; overflow: hidden;">
+ *     content
+ *   </div>
+ * </esp-page>
+ * ```
+ *
+ * @slot sidebar - Contextual navigation placed in the left aside.
+ * @slot right - Content to place in the right aside.
+ * @slot footer - Content to place in the footer.
+ * @slot - The main page content. The main content region applies
+ * `contain: inline-size` so child components cannot push the
+ * content well wider than its grid column. In `narrow` mode,
+ * slotted children are constrained to `max-inline-size: 66ch`
+ * for optimal reading measure.
+ *
+ * ```html
+ * <esp-page class="docs">
+ *   <esp-header slot="header">
+ *     <a href="#" slot="brand" class="nav-logo">
+ *       <svg>
+ *         <use href="/assets/icons.svg#taproot-logo" />
+ *       </svg>
+ *     </a>
+ *     <esp-menu slot="menu" mode="horizontal">
+ *       <esp-menu-item label="Mammals" url="#"></esp-menu-item>
+ *       <esp-menu-item label="Reptiles" url="#"></esp-menu-item>
+ *       <esp-menu-item label="Amphibians" url="#"></esp-menu-item>
+ *     </esp-menu>
+ *     <esp-header-button slot="buttons" icon="cog" aria-label="Settings"></esp-header-button>
+ *   </esp-header>
+ *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <section style="overflow: hidden;">
+ *     <h2>Long content</h2>
+ *     <p populate-from="longParagraph"></p>
+ *   </section>
+ * </esp-page>
+ * ```
+ *
+ * @csspart wrapper - The page wrapper. It defaults to a grid with a
+ * height of 100vh. For the demo page, the height is set to 400px by
+ * styling the CSS part:
+ *
+ * ```html
+ * <style>
+ * esp-page.docs {
+ *   &::part(wrapper) {
+ *     min-height: 400px;
+ *     height: 400px;
+ *   }
+ *   > div {
+ *     height: 100%;
+ *     color: yellow;
+ *     padding: var(--esp-size-padding);
+ *   }
+ * }
+ * .demo-wrapper {
+ *   border: 2px solid var(--esp-color-border);
+ * }
+ * </style>
+ * <esp-page class="docs">
+ *   <div slot="header" style="background-color: red;">header</div>
+ *   <div slot="sidebar" style="background-color: green;">sidebar</div>
+ *   <div slot="right" style="background-color: purple;">right</div>
+ *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <div style="background-color: black; overflow: hidden;">
+ *     content
+ *   </div>
+ * </esp-page>
+ * ```
+ *
+ * @cssprop --esp-page-background - The background color of the page.
+ * Defaults to `var(--esp-color-background)`.
+ * @cssprop --esp-page-max-width - The maximum width of the main content
+ * well. Set automatically by the `kind` attribute: `1536px` (wide),
+ * `768px` (narrow), or `none` (full).
+ * @cssprop --esp-page-background-image - The background image to
+ * display behind page content. Defaults to `none`.
+ * @cssprop --esp-page-background-image-opacity - The opacity of the
+ * background image layer. Defaults to `1`.
+ * @cssprop --esp-page-fixed-header-offset - Offset reserved for fixed
+ * headers. Defaults to `var(--esp-header-height)`.
+ * @cssprop --esp-page-sticky-header-top - Top inset for sticky headers.
+ * Defaults to `0`.
+ * @cssprop --esp-page-header-z-index - Z-index for fixed/sticky header
+ * regions. Defaults to `20`.
+ *
+ * ```html
+ * <style>
+ * esp-page.with-background {
+ *   --esp-page-background-image: url(/assets/espalier-paper-texture.png);
+ *   --esp-page-background-image-opacity: .5;
+ * }
+ * </style>
+ * <esp-page class="docs with-background">
+ *   <div slot="header" style="background-color: red;">header</div>
+ *   <div slot="sidebar" style="background-color: green;">sidebar</div>
+ *   <div slot="right" style="background-color: purple;">right</div>
+ *   <div slot="footer" style="background-color: blue;">footer</div>
+ *   <div style="overflow: hidden;">
+ *     <h2>With background image</h2>
+ *   </div>
+ * </esp-page>
+ * ```
+ *
+ * @docPageTitle Page
+ * @docUrl /components/page
+ * @menuGroup Structure
+ * @menuOrder 2
+ * @menuLabel Page
+ * @menuIcon layout
+ *
+ */
+export declare class EspalierPage extends EspalierElementBase {
+    constructor();
+    /**
+     * The layout mode of the page.
+     *
+     * - `wide` (default) — constrains the main content well to 1536px.
+     *   Optimized for high-density dashboards and complex data grids.
+     * - `narrow` — constrains the main content well to 768px and applies
+     *   a `max-inline-size: 66ch` reading measure. Optimized for
+     *   long-form reading content.
+     * - `full` — no max-width constraint; the content well spans the
+     *   full available space. Optimized for immersive canvases like
+     *   maps or design tools.
+     */
+    kind: "wide" | "narrow" | "full";
+    /**
+     * Header positioning behavior for the `header` slot.
+     *
+     * - `normal` lets the header scroll with content.
+     * - `sticky` keeps the header stuck to the top after it reaches it.
+     * - `fixed` pins the header to the viewport and offsets page content.
+     *
+     * `fixed-menus` remains as a compatibility alias for `fixed`.
+     */
+    headerPosition: HeaderPosition;
+    /**
+     * Compatibility alias for the original fixed header/sidebar behavior.
+     * Prefer `header-position="fixed"` for new code.
+     */
+    fixedMenus: boolean;
+    /**
+     * Inject an element into a div with the highest z-index so dialogs are
+     * rendered on top of everything else.
+     *
+     * @param dialog The EspalierDialog to show.
+     */
+    AddDialog(dialog: EspalierDialog | DocumentFragment | HTMLElement): void;
+    protected updated(changedProperties: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-page": EspalierPage;
+    }
+}
+export {};

package/dist/page/esp-page.js

@@ -0,0 +1,197 @@
+var n=function(s,e,i,o){var r=arguments.length,t=r<3?e:o===null?o=Object.getOwnPropertyDescriptor(e,i):o,p;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")t=Reflect.decorate(s,e,i,o);else for(var d=s.length-1;d>=0;d--)(p=s[d])&&(t=(r<3?p(t):r>3?p(e,i,t):p(e,i))||t);return r>3&&t&&Object.defineProperty(e,i,t),t};import{css as c,html as f}from"lit";import{customElement as m,property as l}from"lit/decorators.js";import{classMap as u}from"lit/directives/class-map.js";import{createRef as v,ref as x}from"lit/directives/ref.js";import{EspalierElementBase as g}from"../shared/esp-element-base.js";import{BiDirectionalStickyController as h}from"./bi-directional-sticky-controller.js";import{getEspBus as y}from"../shared/bus-events.js";import"../toaster/esp-toaster.js";let a=class extends g{constructor(){super(),this.dialogZone=v(),this.kind="wide",this.headerPosition="normal",this.fixedMenus=!1,new h(this,".esp-page-left > .sticky-wrapper"),new h(this,".esp-page-right > .sticky-wrapper")}AddDialog(e){this.dialogZone.value?.appendChild(e)}updated(e){super.updated(e),(e.has("fixedMenus")||e.has("headerPosition"))&&y().publish("fixed-menus-changed",{fixed:this.fixedMenus||this.headerPosition==="fixed"})}render(){const e=this.fixedMenus||this.headerPosition==="fixed",i=!e&&this.headerPosition==="sticky";return f`
+      <div part="wrapper" class="esp-page ${u({"fixed-menus":e,"fixed-header":e,"sticky-header":i})}">
+        <div class="esp-page-top">
+          <slot name="header"></slot>
+        </div>
+        <aside class="esp-page-left">
+          <div class="sticky-wrapper">
+            <slot name="sidebar"></slot>
+          </div>
+        </aside>
+        <div class="esp-page-main">
+          <slot></slot>
+        </div>
+        <aside class="esp-page-right">
+          <div class="sticky-wrapper">
+            <slot name="right"></slot>
+          </div>
+        </aside>
+        <footer>
+          <slot name="footer"></slot>
+        </footer>
+        <div id="dialog-drop-zone" ${x(this.dialogZone)}></div>
+        <esp-toaster></esp-toaster>
+      </div>
+    `}};a.styles=[...g.styles,c`
+      :host {
+        --_esp-page-resolved-max-width: var(--esp-page-max-width, 1536px);
+        --_esp-page-fixed-header-offset: var(
+          --esp-page-fixed-header-offset,
+          var(--esp-header-height, calc(4.5 * var(--esp-size-small)))
+        );
+
+        display: block;
+      }
+
+      :host([kind="narrow"]) {
+        --_esp-page-resolved-max-width: var(--esp-page-max-width, 768px);
+      }
+
+      :host([kind="full"]) {
+        --_esp-page-resolved-max-width: var(--esp-page-max-width, none);
+      }
+
+      :host([kind="narrow"]) .esp-page > div.esp-page-main {
+        
+        > ::slotted(*) {
+          max-inline-size: 66ch;
+        }
+      }
+
+      #dialog-drop-zone {
+        z-index: 4000;
+        position: absolute;
+      }
+
+      .esp-page {
+        min-height: 100vh;
+        display: grid;
+        grid-template-columns:
+          [full-start left-start] min-content
+          [left-end main-start] 1fr
+          [main-end right-start] min-content
+          [right-end full-end];
+        grid-template-rows:
+          [top-start] min-content
+          [top-end content-start] 1fr
+          [content-end footer-start] min-content
+          [footer-end];
+        overflow-x: clip;
+        background: var(--esp-page-background, var(--esp-color-background));
+        line-height: 1.5;
+        font-family: var(--esp-font-body);
+        font-size: var(--esp-type-normal);
+        color: var(--esp-color-text);
+        position: relative;
+
+        &:before {
+          content: " ";
+          display: block;
+          position: absolute;
+          left: 0;
+          top: 0;
+          right: 0;
+          bottom: 0;
+          opacity: var(--esp-page-background-image-opacity, 1);
+          background-image: var(--esp-page-background-image, none);
+          z-index: 1;
+        }
+
+        > div.esp-page-top {
+          z-index: var(--esp-page-header-z-index, 20);
+          grid-column: full;
+          grid-row: top;
+          position: relative;
+        }
+
+        
+        aside.esp-page-left,
+        aside.esp-page-right {
+          z-index: 5;
+          grid-row: content;
+          position: relative;
+          
+        }
+
+        > aside.esp-page-left {
+          grid-column: left;
+        }
+
+        > div.esp-page-main {
+          z-index: 5;
+          grid-column: main;
+          grid-row: content;
+          position: relative;
+          overflow: hidden;
+          max-width: var(--_esp-page-resolved-max-width);
+          contain: inline-size;
+        }
+
+        > aside.esp-page-right {
+          grid-column: right;
+        }
+
+        
+        .sticky-wrapper {
+          will-change: top;
+          display: block;
+          width: 100%;
+          position: sticky;
+          top: 0;
+        }
+
+        > footer {
+          grid-column: full;
+          grid-row: footer;
+          z-index: 10;
+          background: var(--esp-page-background, var(--esp-color-background));
+        }
+
+        &.sticky-header {
+          slot[name="header"]::slotted(esp-header),
+          slot[name="sidebar"]::slotted(esp-menu),
+          slot[name="right"]::slotted(esp-menu) {
+            --esp-menu-top-offset: var(--_esp-page-fixed-header-offset);
+          }
+
+          > div.esp-page-top {
+            position: sticky;
+            top: var(--esp-page-sticky-header-top, 0);
+          }
+        }
+
+        &.fixed-header {
+          slot[name="header"]::slotted(esp-header),
+          slot[name="sidebar"]::slotted(esp-menu),
+          slot[name="right"]::slotted(esp-menu) {
+            --esp-menu-top-offset: var(--_esp-page-fixed-header-offset);
+          }
+
+          > div.esp-page-top {
+            position: fixed;
+            top: 0;
+            left: 0;
+            right: 0;
+          }
+
+          > div.esp-page-main,
+          > aside.esp-page-left,
+          > aside.esp-page-right {
+            margin-top: var(--_esp-page-fixed-header-offset);
+          }
+        }
+
+        
+        input,
+        button,
+        textarea,
+        select {
+          font-family: inherit;
+          font-size: inherit;
+        }
+
+        
+        textarea:not([rows]) {
+          min-height: 10em;
+        }
+
+        
+        :target {
+          scroll-margin-block: 5ex;
+        }
+      }
+
+      .esp-page:has(esp-dialog[is-open="true"]) {
+        overflow: hidden;
+      }
+    `],n([l({reflect:!0})],a.prototype,"kind",void 0),n([l({attribute:"header-position",reflect:!0})],a.prototype,"headerPosition",void 0),n([l({attribute:"fixed-menus",type:Boolean,reflect:!0})],a.prototype,"fixedMenus",void 0),a=n([m("esp-page")],a);export{a as EspalierPage};

package/dist/pickers/esp-pick-one.d.ts

@@ -0,0 +1,188 @@
+import { type PropertyValues } from "lit";
+import "./esp-picker-item.js";
+import "./esp-picker-menu.js";
+import { EspalierPickerBase } from "./esp-picker-base.js";
+import type { TypeaheadFetchItems } from "./types.js";
+/**
+ * Component for selecting a single option from a list of
+ * options. For selecting multiple options, see
+ * [esp-pick-some](/components/pickers/pick-some/).
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-form-item label="Pick a fruit">
+ *     <esp-pick-one>
+ *       <esp-picker-item text="Apple" value="apple" icon="apple"></esp-picker-item>
+ *       <esp-picker-item text="Cherry" value="cherry" icon="cherry"></esp-picker-item>
+ *       <esp-picker-item text="Lemon" value="lemon" icon="lemon"></esp-picker-item>
+ *     </esp-pick-one>
+ *   </esp-form-item>
+ * </esp-box>
+ * ```
+ *
+ * ### Initial state
+ *
+ * Set the initially selected item using the `selected` attribute
+ * on the `esp-picker-item`:
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-form-item label="Pick a fruit">
+ *     <esp-pick-one>
+ *       <esp-picker-item text="Apple" value="apple" icon="apple"></esp-picker-item>
+ *       <esp-picker-item text="Cherry" value="cherry" icon="cherry"></esp-picker-item>
+ *       <esp-picker-item text="Lemon" value="lemon" icon="lemon" selected></esp-picker-item>
+ *     </esp-pick-one>
+ *   </esp-form-item>
+ * </esp-box>
+ * ```
+ *
+ * ### Variable-height items
+ *
+ * Items with longer text wrap naturally. The menu sizes itself
+ * to fit the actual content height of each item:
+ *
+ * ```html
+ * <div style="width: 260px">
+ *   <esp-box>
+ *     <esp-form-item label="Pick a plan">
+ *       <esp-pick-one>
+ *         <esp-picker-item
+ *           text="Basic - includes core features only"
+ *           value="basic">
+ *         </esp-picker-item>
+ *         <esp-picker-item
+ *           text="Pro - adds analytics, priority support, and advanced integrations for growing teams"
+ *           value="pro">
+ *         </esp-picker-item>
+ *         <esp-picker-item
+ *           text="Enterprise - everything in Pro plus SSO, audit logs, dedicated account management, and custom SLAs"
+ *           value="enterprise">
+ *         </esp-picker-item>
+ *         <esp-picker-item
+ *           text="Starter"
+ *           value="starter">
+ *         </esp-picker-item>
+ *       </esp-pick-one>
+ *     </esp-form-item>
+ *   </esp-box>
+ * </div>
+ * ```
+ *
+ * ### Typeahead (local filtering)
+ *
+ * Add the `typeahead` attribute to let the user type to filter
+ * the option list. The input becomes editable and the picker
+ * switches to a filter icon on focus:
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-form-item label="Pick a fruit">
+ *     <esp-pick-one typeahead>
+ *       <esp-picker-item text="Apple" value="apple"></esp-picker-item>
+ *       <esp-picker-item text="Cherry" value="cherry"></esp-picker-item>
+ *       <esp-picker-item text="Lemon" value="lemon"></esp-picker-item>
+ *     </esp-pick-one>
+ *   </esp-form-item>
+ * </esp-box>
+ * ```
+ *
+ * ### Typeahead (remote filtering)
+ *
+ * Set the `fetchItems` property to a callback that returns
+ * matching items from a server. The picker debounces input
+ * (300 ms by default) and shows a loading indicator while
+ * the request is in flight. Use the provided `AbortSignal`
+ * to cancel stale requests:
+ *
+ * ```html
+ * <esp-box>
+ *   <esp-form-item label="Search users">
+ *     <esp-pick-one typeahead placeholder="Type a name\u2026">
+ *     </esp-pick-one>
+ *   </esp-form-item>
+ * </esp-box>
+ * <script>
+ *   const picker = findByTagName("esp-pick-one")[0];
+ *   picker.fetchItems = async (query, signal) => {
+ *     const res = await fetch("/assets/data/grid-data.json", { signal });
+ *     const all = await res.json();
+ *     const q = query.toLowerCase();
+ *     return all
+ *       .filter(u =>
+ *         u.first_name.toLowerCase().includes(q) ||
+ *         u.last_name.toLowerCase().includes(q))
+ *       .slice(0, 20)
+ *       .map(u => ({
+ *         text: `${u.first_name} ${u.last_name}`,
+ *         value: String(u.id),
+ *       }));
+ *   };
+ * </script>
+ * ```
+ *
+ * @event {CustomEvent<PickerItem | undefined>} value-changed - Fired when
+ * the user selects a picker item.
+ *
+ * @docPageTitle Pick One
+ * @docUrl /components/pickers/pick-one
+ * @menuGroup Form Controls
+ * @menuLabel Pickers
+ * @menuIcon select
+ *
+ * @customElement esp-pick-one
+ */
+export declare class EspalierPickOne extends EspalierPickerBase {
+    /**
+     * The currently selected item value, or `undefined` when no item
+     * is selected.
+     *
+     * Setting this updates the selected state across the canonical
+     * picker items and any active filtered menu items.
+     */
+    get value(): string | undefined;
+    set value(val: string | undefined);
+    /**
+     * When true, the picker input becomes a typeahead search field.
+     * The user types to filter the option list. The match is
+     * constrained — the user must pick from the filtered results.
+     *
+     * @type {boolean}
+     */
+    typeahead: boolean;
+    /**
+     * Async callback for fetching items from a remote source.
+     * When set alongside `typeahead`, the picker delegates to this
+     * callback instead of filtering locally.
+     *
+     * The callback receives the current query string and an
+     * `AbortSignal` that the component will abort when a newer
+     * query arrives before the previous request completes.
+     */
+    fetchItems: TypeaheadFetchItems | null;
+    /**
+     * Debounce delay in milliseconds for typeahead input. Defaults
+     * to `0` for local filtering and `300` for remote fetching.
+     *
+     * @type {number}
+     */
+    debounceMs: number | undefined;
+    protected getPickerFormValue(): string | null;
+    protected getPickerValidity(): {
+        flags: ValidityStateFlags;
+        message: string;
+    } | null;
+    protected handlePickerReset(): void;
+    protected handlePickerRestore(state: string): void;
+    protected set showOptions(val: boolean);
+    protected get showOptions(): boolean;
+    protected willUpdate(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected render(): import("lit-html").TemplateResult<1>;
+    static styles: import("lit").CSSResult[];
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "esp-pick-one": EspalierPickOne;
+    }
+}

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

@@ -0,0 +1,75 @@
+var h=function(l,e,i,t){var s=arguments.length,a=s<3?e:t===null?t=Object.getOwnPropertyDescriptor(e,i):t,o;if(typeof Reflect=="object"&&typeof Reflect.decorate=="function")a=Reflect.decorate(l,e,i,t);else for(var u=l.length-1;u>=0;u--)(o=l[u])&&(a=(s<3?o(a):s>3?o(e,i,a):o(e,i))||a);return s>3&&a&&Object.defineProperty(e,i,a),a};import{css as c,html as f}from"lit";import{customElement as m,property as p,state as r}from"lit/decorators.js";import{classMap as y}from"lit/directives/class-map.js";import{ref as d}from"lit/directives/ref.js";import"./esp-picker-item.js";import"./esp-picker-menu.js";import{EspalierElementBase as I}from"../shared/esp-element-base.js";import{styleMap as w}from"lit/directives/style-map.js";import{caretUpDown as v}from"../shared/svgs/caret-up-down.js";import{filter as g}from"../shared/svgs/filter.js";import{EspalierPickerBase as b}from"./esp-picker-base.js";import{TypeaheadController as O}from"./typeahead-controller.js";let n=class extends b{constructor(){super(...arguments),this.typeaheadLoading=!1,this.filteredItems=[],this.inputFocused=!1,this.suppressAutoSelect=!1,this.lastMenuPointSelectionAt=Number.NEGATIVE_INFINITY,this.suppressNextHostClick=!1,this.typeaheadCtrl=new O({host:this,onFilteredItemsChanged:e=>{if(this.selectedItem){const i=this.selectedItem.value;this.filteredItems=e.map(t=>({...t,selected:t.value===i}))}else this.filteredItems=e.map(i=>({...i}))},onLoadingChanged:e=>{this.typeaheadLoading=e}}),this._hasPendingValue=!1,this.typeahead=!1,this.fetchItems=null,this.debounceMs=void 0,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 value(){return this.selectedItem?.value}set value(e){const i=this.pickerItems??[];for(const a of i)a.selected=a.value===e;const t=this.pickerMenu.value?.pickerItems;if(t&&t!==i)for(const a of t)a.selected=a.value===e;const s=i.find(a=>a.selected);this.selectedItem=s,s?(this._hasPendingValue=!1,this._pendingValue=void 0):(this._hasPendingValue=!0,this._pendingValue=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.selectedItem=void 0,this._hasPendingValue=!1,this._pendingValue=void 0}handlePickerRestore(e){this.value=e}set showOptions(e){const i=this.showOptions;super.showOptions=e,e&&!i&&this.typeahead&&this.typeaheadCtrl.isRemote&&this.filteredItems.length===0&&this.typeaheadCtrl.fetchInitial()}get showOptions(){return super.showOptions}willUpdate(e){if(super.willUpdate(e),e.has("pickerItems")){if(this._hasPendingValue)this.value=this._pendingValue;else if(!this.selectedItem){const i=this.pickerItems.find(t=>t.selected);i&&(this.selectedItem=i)}}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))}firstUpdated(e){if(super.firstUpdated(e),this.typeahead){const i=this.theInput.value;i&&(i.ariaAutoComplete="list")}}resetTypeaheadInput(){const e=this.theInput.value;e&&(e.value=this.selectedItem?.text??""),this.typeaheadCtrl.isRemote&&this.selectedItem?this.typeaheadCtrl.resetQuery():this.typeaheadCtrl.clearQuery()}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 f`
+      <div
+        tabindex="-1"
+        class=${y({"esp-field":!0,"show-options":e})}
+        @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()}}
+      >
+        <section>
+          <input
+            ${d(this.theInput)}
+            class="esp-input"
+            value=${this.selectedItem?.text??""}
+            style=${w(this.selectedItem?.styles??{})}
+            placeholder=${this.placeholder}
+            ?readonly=${!this.typeahead}
+            @input=${t=>{if(!this.typeahead)return;const s=t.target;this.typeaheadCtrl.setQuery(s.value),this.showOptions||(this.showOptions=!0)}}
+            @focus=${()=>{this.inputFocused=!0,this.typeahead&&!this.suppressAutoSelect&&this.theInput.value?.select(),this.suppressAutoSelect=!1}}
+            @blur=${t=>{this.inputFocused=!1;const s=t.relatedTarget;if(!(s&&(this.contains(s)||this.shadowRoot?.contains(s)))){if(!s&&this.showOptions){requestAnimationFrame(()=>{this.showOptions&&this.shadowRoot?.activeElement!==this.theInput.value&&(this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput())});return}this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput()}}}
+            @keydown=${t=>{if(this.pickerMenu.value)switch(t.key){case" ":this.typeahead||(this.showOptions=!this.showOptions);break;case"ArrowDown":case"ArrowUp":case"Enter":case"Home":case"End":t.preventDefault(),this.showOptions?(this.pickerMenu.value.doKeyboardNav(t.key),this.updateActiveDescendant()):this.showOptions=!0;break;case"Tab":this.showOptions&&(this.showOptions=!1),this.typeahead&&this.resetTypeaheadInput();break;case"Escape":this.showOptions=!1,this.typeahead&&this.resetTypeaheadInput();break}}}
+          />
+        </section>
+        <label>${this.typeahead&&this.inputFocused?g:v}</label>
+
+        <esp-picker-menu
+          .pickerItems=${this.typeahead?this.filteredItems:this.pickerItems}
+          .loading=${this.typeaheadLoading}
+          .emptyMessage=${this.typeahead?"No matches":""}
+          .label=${this.placeholder}
+          tabindex="-1"
+          ${d(this.pickerMenu)}
+          @selection-changed=${t=>{if(t.stopPropagation(),this.typeahead)return;const s=t.detail;let a=!1;s.length>0&&this.selectedItem!==s[0]&&(this.selectedItem=s[0],a=!0),s.length===0&&this.selectedItem&&(this.selectedItem=void 0,a=!0),a&&(this.showOptions&&(this._hasPendingValue=!1,this._pendingValue=void 0),this.formCtrl.syncValue(),this.dispatchEvent(new CustomEvent("value-changed",{detail:this.selectedItem,bubbles:!0,composed:!0})))}}
+          @close-menu=${t=>{if(this.showOptions=!1,this.clearActiveDescendant(),this.typeahead){const s=t.detail;if(s.length>0&&this.selectedItem?.value!==s[0].value){this.selectedItem=s[0];const a=this.selectedItem.value;for(const o of this.pickerItems)o.selected=o.value===a;this._hasPendingValue=!1,this._pendingValue=void 0,this.formCtrl.syncValue(),this.dispatchEvent(new CustomEvent("value-changed",{detail:this.selectedItem,bubbles:!0,composed:!0}))}else s.length===0&&this.selectedItem&&(this.selectedItem=void 0,this._hasPendingValue=!1,this._pendingValue=void 0,this.formCtrl.syncValue(),this.dispatchEvent(new CustomEvent("value-changed",{detail:this.selectedItem,bubbles:!0,composed:!0})));this.suppressAutoSelect=!0,this.theInput.value?.focus(),this.resetTypeaheadInput()}else this.theInput.value?.focus()}}
+        >
+        </esp-picker-menu>
+      </div>
+      <slot ${d(this.itemsSlot)}></slot>
+    `}};n.styles=[...I.styles,c`
+      :host([disabled]) {
+        pointer-events: none;
+        opacity: 0.5;
+      }
+
+      .esp-field {
+        display: grid;
+        grid-template-columns: auto min-content;
+        position: relative;
+
+        & input.esp-input {
+          width: 0;
+          flex-grow: 1;
+        }
+
+        > 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;
+      }
+    `],h([r()],n.prototype,"selectedItem",void 0),h([r()],n.prototype,"typeaheadLoading",void 0),h([r()],n.prototype,"filteredItems",void 0),h([r()],n.prototype,"inputFocused",void 0),h([p({type:String})],n.prototype,"value",null),h([p({type:Boolean,reflect:!0})],n.prototype,"typeahead",void 0),h([p({attribute:!1})],n.prototype,"fetchItems",void 0),h([p({type:Number,attribute:"debounce-ms"})],n.prototype,"debounceMs",void 0),n=h([m("esp-pick-one")],n);export{n as EspalierPickOne};