@f-ewald/components 0.5.0 → 0.7.0

package/dist/dropdown-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dropdown-button.js","sourceRoot":"","sources":["../src/dropdown-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,YAAY,CAAC;AAC9C,OAAO,EAAE,MAAM,EAAE,MAAM,aAAa,CAAC;AAQrC;;;;;;;;GAQG;AAEI,IAAM,cAAc,GAApB,MAAM,cAAe,SAAQ,UAAU;IAAvC;;QAuEL,kCAAkC;QACtB,UAAK,GAAG,EAAE,CAAC;QACvB,0BAA0B;QACM,YAAO,GAAqB,EAAE,CAAC;QAC/D,8DAA8D;QACjC,aAAQ,GAAG,KAAK,CAAC;QAE7B,UAAK,GAAG,KAAK,CAAC;QACd,iBAAY,GAAG,CAAC,CAAC,CAAC;QAiBnC,uBAAkB,GAAG,CAAC,CAAa,EAAQ,EAAE;YAC3C,IAAI,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,QAAQ,CAAC,IAAI,CAAC;gBAAE,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QAC3D,CAAC,CAAC;IA+EJ,CAAC;aAhLiB,WAAM,GAAG;QACvB,MAAM;QACN,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAiEF;KACF,AApEqB,CAoEpB;IAYO,oBAAoB;QAC3B,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;IACzE,CAAC;IAEkB,OAAO,CAAC,OAAuB;QAChD,IAAI,CAAC,OAAO,CAAC,GAAG,CAAC,OAAO,CAAC;YAAE,OAAO;QAClC,IAAI,CAAC,eAAe,CAAC,MAAM,EAAE,IAAI,CAAC,KAAK,CAAC,CAAC;QACzC,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YACf,MAAM,CAAC,gBAAgB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACtE,CAAC;aAAM,CAAC;YACN,MAAM,CAAC,mBAAmB,CAAC,WAAW,EAAE,IAAI,CAAC,kBAAkB,EAAE,IAAI,CAAC,CAAC;QACzE,CAAC;IACH,CAAC;IAED,kBAAkB,CAEhB;IAEF,OAAO;QACL,IAAI,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC1B,IAAI,CAAC,KAAK,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC;QACzB,IAAI,IAAI,CAAC,KAAK;YAAE,IAAI,CAAC,YAAY,GAAG,CAAC,CAAC;IACxC,CAAC;IAED,OAAO,CAAC,MAAsB;QAC5B,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACnB,IAAI,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,MAAM,EAAE,EAAE,KAAK,EAAE,MAAM,CAAC,KAAK,EAAE,EAAE,CAAC,CAAC,CAAC;IACrF,CAAC;IAED,iBAAiB,CAAC,CAAgB;QAChC,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,IAAI,CAAC,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YACvF,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,IAAI,CAAC,KAAK,EAAE,CAAC;gBAChB,IAAI,CAAC,OAAO,EAAE,CAAC;gBACf,OAAO;YACT,CAAC;YACD,IAAI,CAAC,CAAC,GAAG,KAAK,WAAW;gBAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC;iBAC1C,IAAI,CAAC,CAAC,GAAG,KAAK,SAAS;gBAAE,IAAI,CAAC,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC;;gBAC9C,IAAI,CAAC,cAAc,EAAE,CAAC;QAC7B,CAAC;aAAM,IAAI,CAAC,CAAC,GAAG,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,EAAE,CAAC;YAC5C,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,KAAK,GAAG,KAAK,CAAC;QACrB,CAAC;IACH,CAAC;IAED,WAAW,CAAC,KAAa;QACvB,IAAI,IAAI,CAAC,OAAO,CAAC,MAAM,KAAK,CAAC;YAAE,OAAO;QACtC,MAAM,CAAC,GAAG,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC;QAC9B,IAAI,CAAC,YAAY,GAAG,CAAC,IAAI,CAAC,YAAY,GAAG,KAAK,GAAG,CAAC,CAAC,GAAG,CAAC,CAAC;IAC1D,CAAC;IAED,cAAc;QACZ,MAAM,MAAM,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;QAC/C,IAAI,MAAM;YAAE,IAAI,CAAC,OAAO,CAAC,MAAM,CAAC,CAAC;IACnC,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,KAAK;YAAE,OAAO,OAAO,CAAC;QAChC,OAAO,IAAI,CAAA;;UAEL,IAAI,CAAC,OAAO,CAAC,GAAG,CAChB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,IAAI,CAAA;;;sBAGF,CAAC,KAAK,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,EAAE;2BAClC,CAAC,CAAa,EAAE,EAAE;YAC7B,CAAC,CAAC,cAAc,EAAE,CAAC;YACnB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,CAAC;QAClB,CAAC;;gBAEC,CAAC,CAAC,KAAK;;WAEZ,CACF;;KAEJ,CAAC;IACJ,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;wBAKS,IAAI,CAAC,KAAK;oBACd,IAAI,CAAC,QAAQ;iBAChB,GAAG,EAAE,CAAC,IAAI,CAAC,OAAO,EAAE;mBAClB,CAAC,CAAgB,EAAE,EAAE,CAAC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC;;gBAElD,IAAI,CAAC,KAAK;gCACM,gBAAgB,CAAC,EAAE,CAAC;;QAE5C,IAAI,CAAC,UAAU,EAAE;KACpB,CAAC;IACJ,CAAC;CACF,CAAA;AAzGa;IAAX,QAAQ,EAAE;6CAAY;AAES;IAA/B,QAAQ,CAAC,EAAE,SAAS,EAAE,KAAK,EAAE,CAAC;+CAAgC;AAElC;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;gDAAkB;AAE7B;IAAhB,KAAK,EAAE;6CAAuB;AACd;IAAhB,KAAK,EAAE;oDAA2B;AA/ExB,cAAc;IAD1B,aAAa,CAAC,iBAAiB,CAAC;GACpB,cAAc,CAiL1B","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** A single menu action. */\nexport interface DropdownOption {\n  value: string;\n  label: string;\n}\n\n/**\n * A primary-styled button with a label and chevron that opens an anchored\n * menu of actions — essentially `form-select` minus \"current value\"\n * semantics: a menu, not a select. Use for a set of mutually exclusive\n * next-step actions (e.g. a failed task's Retry / Close / Backlog).\n *\n * @element dropdown-button\n * @fires select - Fired with `{ value: string }` when a menu item is picked.\n */\n@customElement(\"dropdown-button\")\nexport class DropdownButton extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n      }\n      button.trigger {\n        display: flex;\n        align-items: center;\n        gap: 0.35rem;\n        font: inherit;\n        font-size: var(--ui-font-size-sm, 0.75rem);\n        font-weight: 500;\n        color: #fff;\n        background: var(--ui-primary, #4f46e5);\n        border: 1px solid transparent;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.5rem 0.9rem;\n        cursor: pointer;\n      }\n      button.trigger:hover:not(:disabled) {\n        background: var(--ui-primary-hover, #4338ca);\n      }\n      button.trigger:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      button.trigger:focus-visible {\n        outline: none;\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .chevron {\n        display: flex;\n        transform: rotate(90deg);\n        transition: transform 0.1s ease;\n      }\n      :host([open]) .chevron {\n        transform: rotate(-90deg);\n      }\n      ul.options {\n        position: absolute;\n        top: 100%;\n        right: 0;\n        z-index: 10;\n        min-width: 100%;\n        max-height: 40vh;\n        overflow-y: auto;\n        margin: 2px 0 0;\n        padding: 4px 0;\n        list-style: none;\n        white-space: nowrap;\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n      }\n      li {\n        padding: 0.35rem 0.6rem;\n        cursor: pointer;\n        color: var(--ui-text, #0f172a);\n      }\n      li.active,\n      li:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n    `,\n  ];\n\n  /** The trigger button's label. */\n  @property() label = \"\";\n  /** The menu's actions. */\n  @property({ attribute: false }) options: DropdownOption[] = [];\n  /** Disables the trigger, preventing the menu from opening. */\n  @property({ type: Boolean }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _activeIndex = -1;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (!changed.has(\"_open\")) return;\n    this.toggleAttribute(\"open\", this._open);\n    if (this._open) {\n      window.addEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    } else {\n      window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    }\n  }\n\n  #onWindowMousedown = (e: MouseEvent): void => {\n    if (!e.composedPath().includes(this)) this._open = false;\n  };\n\n  #toggle(): void {\n    if (this.disabled) return;\n    this._open = !this._open;\n    if (this._open) this._activeIndex = 0;\n  }\n\n  #select(option: DropdownOption): void {\n    this._open = false;\n    this.dispatchEvent(new CustomEvent(\"select\", { detail: { value: option.value } }));\n  }\n\n  #onTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (!this._open) {\n        this.#toggle();\n        return;\n      }\n      if (e.key === \"ArrowDown\") this.#moveActive(1);\n      else if (e.key === \"ArrowUp\") this.#moveActive(-1);\n      else this.#confirmActive();\n    } else if (e.key === \"Escape\" && this._open) {\n      e.preventDefault();\n      this._open = false;\n    }\n  }\n\n  #moveActive(delta: number): void {\n    if (this.options.length === 0) return;\n    const n = this.options.length;\n    this._activeIndex = (this._activeIndex + delta + n) % n;\n  }\n\n  #confirmActive(): void {\n    const option = this.options[this._activeIndex];\n    if (option) this.#select(option);\n  }\n\n  private renderMenu() {\n    if (!this._open) return nothing;\n    return html`\n      <ul class=\"options\" role=\"menu\">\n        ${this.options.map(\n          (o, i) => html`\n            <li\n              role=\"menuitem\"\n              class=${i === this._activeIndex ? \"active\" : \"\"}\n              @mousedown=${(e: MouseEvent) => {\n                e.preventDefault();\n                this.#select(o);\n              }}\n            >\n              ${o.label}\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  override render() {\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        aria-haspopup=\"menu\"\n        aria-expanded=${this._open}\n        ?disabled=${this.disabled}\n        @click=${() => this.#toggle()}\n        @keydown=${(e: KeyboardEvent) => this.#onTriggerKeydown(e)}\n      >\n        <span>${this.label}</span>\n        <span class=\"chevron\">${iconChevronRight(14)}</span>\n      </button>\n      ${this.renderMenu()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"dropdown-button\": DropdownButton;\n  }\n}\n"]}

package/dist/editable-text.d.ts

@@ -0,0 +1,52 @@
+import { LitElement } from "lit";
+/**
+ * Jira/GitHub-style click-to-edit text: a display span that turns into an
+ * `<input>` (or auto-growing `<textarea>` when `multiline`) on click. The
+ * input/textarea inherits the host's font, so a title wrapped in an `<h1>`
+ * edits at title size.
+ *
+ * @element editable-text
+ * @fires change - Fired with `{ value: string }` when the committed value differs from the previous one.
+ */
+export declare class EditableText extends LitElement {
+    static styles: import("lit").CSSResult[];
+    /** Current text. */
+    value: string;
+    /** `false` renders an `<input>`, `true` an auto-growing `<textarea>`. */
+    multiline: boolean;
+    /** Muted placeholder text shown when `value` is empty, and as the input's placeholder. */
+    placeholder: string;
+    /** Disables entering edit mode. */
+    readonly: boolean;
+    /** `aria-label` applied to the input/textarea. */
+    label: string;
+    private _editing;
+    private _draft;
+    private _field?;
+    /** Enters edit mode, seeding the draft from the current value. */
+    private _startEdit;
+    /** Commits the draft (reverting an empty single-line commit) and exits edit mode.
+     *
+     * Guarded on `_editing`: removing the focused input/textarea from the DOM
+     * (which happens as soon as `_editing` flips to false) makes the browser
+     * fire a native `blur` on it, re-invoking this handler a second time after
+     * a cancel already ran — the guard makes that second call a no-op instead
+     * of re-committing the stale draft.
+     */
+    private _commit;
+    /** Discards the draft and exits edit mode without committing. */
+    private _cancel;
+    private _onInput;
+    private _onSingleLineKeydown;
+    private _onMultilineKeydown;
+    /** Grows the textarea's height to fit its content. */
+    private _resize;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "editable-text": EditableText;
+    }
+}
+//# sourceMappingURL=editable-text.d.ts.map

package/dist/editable-text.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-text.d.ts","sourceRoot":"","sources":["../src/editable-text.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,MAAM,KAAK,CAAC;AAIrD;;;;;;;;GAQG;AACH,qBACa,YAAa,SAAQ,UAAU;IAC1C,OAAgB,MAAM,4BAuDpB;IAEF,oBAAoB;IACR,KAAK,SAAM;IACvB,yEAAyE;IAC5C,SAAS,UAAS;IAC/C,0FAA0F;IAC9E,WAAW,SAAM;IAC7B,mCAAmC;IACN,QAAQ,UAAS;IAC9C,kDAAkD;IACtC,KAAK,SAAM;IAEd,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAM;IAEH,OAAO,CAAC,MAAM,CAAC,CAAyC;IAElF,kEAAkE;IAClE,OAAO,CAAC,UAAU;IAMlB;;;;;;;OAOG;IACH,OAAO,CAAC,OAAO;IAUf,iEAAiE;IACjE,OAAO,CAAC,OAAO;IAIf,OAAO,CAAC,QAAQ;IAKhB,OAAO,CAAC,oBAAoB;IAU5B,OAAO,CAAC,mBAAmB;IAU3B,sDAAsD;IACtD,OAAO,CAAC,OAAO;IAOf,UAAmB,OAAO,CAAC,OAAO,EAAE,GAAG,CAAC,MAAM,EAAE,OAAO,CAAC,QASvD;IAEQ,MAAM,yCA4Bd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,eAAe,EAAE,YAAY,CAAC;KAC/B;CACF"}

package/dist/editable-text.js

@@ -0,0 +1,224 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, query, state } from "lit/decorators.js";
+import { tokens } from "./tokens.js";
+/**
+ * Jira/GitHub-style click-to-edit text: a display span that turns into an
+ * `<input>` (or auto-growing `<textarea>` when `multiline`) on click. The
+ * input/textarea inherits the host's font, so a title wrapped in an `<h1>`
+ * edits at title size.
+ *
+ * @element editable-text
+ * @fires change - Fired with `{ value: string }` when the committed value differs from the previous one.
+ */
+let EditableText = class EditableText extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** Current text. */
+        this.value = "";
+        /** `false` renders an `<input>`, `true` an auto-growing `<textarea>`. */
+        this.multiline = false;
+        /** Muted placeholder text shown when `value` is empty, and as the input's placeholder. */
+        this.placeholder = "";
+        /** Disables entering edit mode. */
+        this.readonly = false;
+        /** `aria-label` applied to the input/textarea. */
+        this.label = "";
+        this._editing = false;
+        this._draft = "";
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: block;
+        font-family: inherit;
+        font-size: inherit;
+        font-weight: inherit;
+        line-height: inherit;
+      }
+      .display {
+        cursor: text;
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.1rem 0.3rem;
+        margin: -0.1rem -0.3rem;
+      }
+      .display.multiline {
+        white-space: pre-wrap;
+      }
+      .display:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      .display.empty {
+        color: var(--ui-text-muted, #64748b);
+      }
+      .display.readonly {
+        cursor: inherit;
+      }
+      .display.readonly:hover {
+        background: none;
+      }
+      input,
+      textarea {
+        display: block;
+        width: 100%;
+        box-sizing: border-box;
+        font: inherit;
+        color: inherit;
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.1rem 0.3rem;
+        margin: -0.1rem -0.3rem;
+        outline: none;
+      }
+      input:focus,
+      textarea:focus {
+        border-color: var(--ui-primary, #4f46e5);
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      textarea {
+        resize: none;
+        overflow: hidden;
+      }
+    `,
+    ]; }
+    /** Enters edit mode, seeding the draft from the current value. */
+    _startEdit() {
+        if (this.readonly)
+            return;
+        this._draft = this.value;
+        this._editing = true;
+    }
+    /** Commits the draft (reverting an empty single-line commit) and exits edit mode.
+     *
+     * Guarded on `_editing`: removing the focused input/textarea from the DOM
+     * (which happens as soon as `_editing` flips to false) makes the browser
+     * fire a native `blur` on it, re-invoking this handler a second time after
+     * a cancel already ran — the guard makes that second call a no-op instead
+     * of re-committing the stale draft.
+     */
+    _commit() {
+        if (!this._editing)
+            return;
+        const next = this._draft;
+        this._editing = false;
+        if (!this.multiline && next.trim() === "")
+            return;
+        if (next === this.value)
+            return;
+        this.value = next;
+        this.dispatchEvent(new CustomEvent("change", { detail: { value: next } }));
+    }
+    /** Discards the draft and exits edit mode without committing. */
+    _cancel() {
+        this._editing = false;
+    }
+    _onInput(e) {
+        this._draft = e.target.value;
+        if (this.multiline)
+            this._resize();
+    }
+    _onSingleLineKeydown(e) {
+        if (e.key === "Enter") {
+            e.preventDefault();
+            this._commit();
+        }
+        else if (e.key === "Escape") {
+            e.preventDefault();
+            this._cancel();
+        }
+    }
+    _onMultilineKeydown(e) {
+        if (e.key === "Escape") {
+            e.preventDefault();
+            this._cancel();
+        }
+        else if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+            e.preventDefault();
+            this._commit();
+        }
+    }
+    /** Grows the textarea's height to fit its content. */
+    _resize() {
+        const field = this._field;
+        if (!field)
+            return;
+        field.style.height = "auto";
+        field.style.height = `${field.scrollHeight}px`;
+    }
+    updated(changed) {
+        if (changed.has("_editing") && this._editing) {
+            const field = this._field;
+            if (!field)
+                return;
+            field.focus();
+            const end = field.value.length;
+            field.setSelectionRange(end, end);
+            if (this.multiline)
+                this._resize();
+        }
+    }
+    render() {
+        if (this._editing) {
+            return this.multiline
+                ? html `<textarea
+            rows="3"
+            .value=${this._draft}
+            placeholder=${this.placeholder}
+            aria-label=${this.label || nothing}
+            @input=${this._onInput}
+            @keydown=${this._onMultilineKeydown}
+            @blur=${this._commit}
+          ></textarea>`
+                : html `<input
+            type="text"
+            .value=${this._draft}
+            placeholder=${this.placeholder}
+            aria-label=${this.label || nothing}
+            @input=${this._onInput}
+            @keydown=${this._onSingleLineKeydown}
+            @blur=${this._commit}
+          />`;
+        }
+        const isEmpty = this.value.trim() === "";
+        const classes = `display ${this.multiline ? "multiline" : ""} ${isEmpty ? "empty" : ""} ${this.readonly ? "readonly" : ""}`;
+        return html `<span class=${classes} @click=${this._startEdit}
+      >${isEmpty ? this.placeholder : this.value}</span
+    >`;
+    }
+};
+__decorate([
+    property()
+], EditableText.prototype, "value", void 0);
+__decorate([
+    property({ type: Boolean })
+], EditableText.prototype, "multiline", void 0);
+__decorate([
+    property()
+], EditableText.prototype, "placeholder", void 0);
+__decorate([
+    property({ type: Boolean })
+], EditableText.prototype, "readonly", void 0);
+__decorate([
+    property()
+], EditableText.prototype, "label", void 0);
+__decorate([
+    state()
+], EditableText.prototype, "_editing", void 0);
+__decorate([
+    state()
+], EditableText.prototype, "_draft", void 0);
+__decorate([
+    query("input, textarea")
+], EditableText.prototype, "_field", void 0);
+EditableText = __decorate([
+    customElement("editable-text")
+], EditableText);
+export { EditableText };
+//# sourceMappingURL=editable-text.js.map

package/dist/editable-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"editable-text.js","sourceRoot":"","sources":["../src/editable-text.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing } from \"lit\";\nimport { customElement, property, query, state } from \"lit/decorators.js\";\nimport { tokens } from \"./tokens.js\";\n\n/**\n * Jira/GitHub-style click-to-edit text: a display span that turns into an\n * `<input>` (or auto-growing `<textarea>` when `multiline`) on click. The\n * input/textarea inherits the host's font, so a title wrapped in an `<h1>`\n * edits at title size.\n *\n * @element editable-text\n * @fires change - Fired with `{ value: string }` when the committed value differs from the previous one.\n */\n@customElement(\"editable-text\")\nexport class EditableText extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: block;\n        font-family: inherit;\n        font-size: inherit;\n        font-weight: inherit;\n        line-height: inherit;\n      }\n      .display {\n        cursor: text;\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.1rem 0.3rem;\n        margin: -0.1rem -0.3rem;\n      }\n      .display.multiline {\n        white-space: pre-wrap;\n      }\n      .display:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      .display.empty {\n        color: var(--ui-text-muted, #64748b);\n      }\n      .display.readonly {\n        cursor: inherit;\n      }\n      .display.readonly:hover {\n        background: none;\n      }\n      input,\n      textarea {\n        display: block;\n        width: 100%;\n        box-sizing: border-box;\n        font: inherit;\n        color: inherit;\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.1rem 0.3rem;\n        margin: -0.1rem -0.3rem;\n        outline: none;\n      }\n      input:focus,\n      textarea:focus {\n        border-color: var(--ui-primary, #4f46e5);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      textarea {\n        resize: none;\n        overflow: hidden;\n      }\n    `,\n  ];\n\n  /** Current text. */\n  @property() value = \"\";\n  /** `false` renders an `<input>`, `true` an auto-growing `<textarea>`. */\n  @property({ type: Boolean }) multiline = false;\n  /** Muted placeholder text shown when `value` is empty, and as the input's placeholder. */\n  @property() placeholder = \"\";\n  /** Disables entering edit mode. */\n  @property({ type: Boolean }) readonly = false;\n  /** `aria-label` applied to the input/textarea. */\n  @property() label = \"\";\n\n  @state() private _editing = false;\n  @state() private _draft = \"\";\n\n  @query(\"input, textarea\") private _field?: HTMLInputElement | HTMLTextAreaElement;\n\n  /** Enters edit mode, seeding the draft from the current value. */\n  private _startEdit() {\n    if (this.readonly) return;\n    this._draft = this.value;\n    this._editing = true;\n  }\n\n  /** Commits the draft (reverting an empty single-line commit) and exits edit mode.\n   *\n   * Guarded on `_editing`: removing the focused input/textarea from the DOM\n   * (which happens as soon as `_editing` flips to false) makes the browser\n   * fire a native `blur` on it, re-invoking this handler a second time after\n   * a cancel already ran — the guard makes that second call a no-op instead\n   * of re-committing the stale draft.\n   */\n  private _commit() {\n    if (!this._editing) return;\n    const next = this._draft;\n    this._editing = false;\n    if (!this.multiline && next.trim() === \"\") return;\n    if (next === this.value) return;\n    this.value = next;\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: { value: next } }));\n  }\n\n  /** Discards the draft and exits edit mode without committing. */\n  private _cancel() {\n    this._editing = false;\n  }\n\n  private _onInput(e: Event) {\n    this._draft = (e.target as HTMLInputElement | HTMLTextAreaElement).value;\n    if (this.multiline) this._resize();\n  }\n\n  private _onSingleLineKeydown(e: KeyboardEvent) {\n    if (e.key === \"Enter\") {\n      e.preventDefault();\n      this._commit();\n    } else if (e.key === \"Escape\") {\n      e.preventDefault();\n      this._cancel();\n    }\n  }\n\n  private _onMultilineKeydown(e: KeyboardEvent) {\n    if (e.key === \"Escape\") {\n      e.preventDefault();\n      this._cancel();\n    } else if (e.key === \"Enter\" && (e.metaKey || e.ctrlKey)) {\n      e.preventDefault();\n      this._commit();\n    }\n  }\n\n  /** Grows the textarea's height to fit its content. */\n  private _resize() {\n    const field = this._field;\n    if (!field) return;\n    field.style.height = \"auto\";\n    field.style.height = `${field.scrollHeight}px`;\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has(\"_editing\") && this._editing) {\n      const field = this._field;\n      if (!field) return;\n      field.focus();\n      const end = field.value.length;\n      field.setSelectionRange(end, end);\n      if (this.multiline) this._resize();\n    }\n  }\n\n  override render() {\n    if (this._editing) {\n      return this.multiline\n        ? html`<textarea\n            rows=\"3\"\n            .value=${this._draft}\n            placeholder=${this.placeholder}\n            aria-label=${this.label || nothing}\n            @input=${this._onInput}\n            @keydown=${this._onMultilineKeydown}\n            @blur=${this._commit}\n          ></textarea>`\n        : html`<input\n            type=\"text\"\n            .value=${this._draft}\n            placeholder=${this.placeholder}\n            aria-label=${this.label || nothing}\n            @input=${this._onInput}\n            @keydown=${this._onSingleLineKeydown}\n            @blur=${this._commit}\n          />`;\n    }\n\n    const isEmpty = this.value.trim() === \"\";\n    const classes = `display ${this.multiline ? \"multiline\" : \"\"} ${isEmpty ? \"empty\" : \"\"} ${this.readonly ? \"readonly\" : \"\"}`;\n    return html`<span class=${classes} @click=${this._startEdit}\n      >${isEmpty ? this.placeholder : this.value}</span\n    >`;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"editable-text\": EditableText;\n  }\n}\n"]}

package/dist/form-select.d.ts

@@ -0,0 +1,46 @@
+import { LitElement, type PropertyValues } from "lit";
+/** A single selectable option. */
+export interface SelectOption {
+    value: string;
+    label: string;
+}
+/**
+ * A styled dropdown select: a trigger button showing the current option's
+ * label, opening a listbox popover on click. Drop-in generic replacement for
+ * a native `<select>` wherever consistent cross-browser styling and a
+ * `change` event carrying `{ value }` are wanted (e.g. a task's status
+ * picker).
+ *
+ * The trigger fills its host's width (`justify-content: space-between`
+ * pushes the chevron to the far edge), but the host itself stays
+ * `display: inline-block` — so usages that never size the host (a filter
+ * bar, a status picker) keep shrink-to-fit auto-width unchanged. To make an
+ * instance full-width, size the host itself: `form-select { width: 100%; }`.
+ *
+ * @element form-select
+ * @fires change - Fired with `{ value: string }` when a different option is picked.
+ */
+export declare class FormSelect extends LitElement {
+    #private;
+    static styles: import("lit").CSSResult[];
+    /** The full list of selectable options. */
+    options: SelectOption[];
+    /** Currently selected value; must match one of `options[].value`. */
+    value: string;
+    /** `aria-label` applied to the trigger button. */
+    label: string;
+    /** Disables the trigger, preventing the popover from opening. */
+    disabled: boolean;
+    private _open;
+    private _activeIndex;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues): void;
+    private renderListbox;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "form-select": FormSelect;
+    }
+}
+//# sourceMappingURL=form-select.d.ts.map

package/dist/form-select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-select.d.ts","sourceRoot":"","sources":["../src/form-select.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK1E,kCAAkC;AAClC,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;;;;;GAeG;AACH,qBACa,UAAW,SAAQ,UAAU;;IACxC,OAAgB,MAAM,4BA2EpB;IAEF,2CAA2C;IACX,OAAO,EAAE,YAAY,EAAE,CAAM;IAC7D,qEAAqE;IACzD,KAAK,SAAM;IACvB,kDAAkD;IACtC,KAAK,SAAM;IACvB,iEAAiE;IACpC,QAAQ,UAAS;IAErC,OAAO,CAAC,KAAK,CAAS;IACtB,OAAO,CAAC,YAAY,CAAM;IAE1B,oBAAoB,IAAI,IAAI,CAGpC;IAED,UAAmB,OAAO,CAAC,OAAO,EAAE,cAAc,GAAG,IAAI,CAQxD;IAmDD,OAAO,CAAC,aAAa;IAuBZ,MAAM,yCAkBd;CACF;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,aAAa,EAAE,UAAU,CAAC;KAC3B;CACF"}

package/dist/form-select.js

@@ -0,0 +1,245 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, css, html, nothing } from "lit";
+import { customElement, property, state } from "lit/decorators.js";
+import { iconChevronRight } from "./icons.js";
+import { tokens } from "./tokens.js";
+/**
+ * A styled dropdown select: a trigger button showing the current option's
+ * label, opening a listbox popover on click. Drop-in generic replacement for
+ * a native `<select>` wherever consistent cross-browser styling and a
+ * `change` event carrying `{ value }` are wanted (e.g. a task's status
+ * picker).
+ *
+ * The trigger fills its host's width (`justify-content: space-between`
+ * pushes the chevron to the far edge), but the host itself stays
+ * `display: inline-block` — so usages that never size the host (a filter
+ * bar, a status picker) keep shrink-to-fit auto-width unchanged. To make an
+ * instance full-width, size the host itself: `form-select { width: 100%; }`.
+ *
+ * @element form-select
+ * @fires change - Fired with `{ value: string }` when a different option is picked.
+ */
+let FormSelect = class FormSelect extends LitElement {
+    constructor() {
+        super(...arguments);
+        /** The full list of selectable options. */
+        this.options = [];
+        /** Currently selected value; must match one of `options[].value`. */
+        this.value = "";
+        /** `aria-label` applied to the trigger button. */
+        this.label = "";
+        /** Disables the trigger, preventing the popover from opening. */
+        this.disabled = false;
+        this._open = false;
+        this._activeIndex = -1;
+        this.#onWindowMousedown = (e) => {
+            if (!e.composedPath().includes(this))
+                this._open = false;
+        };
+    }
+    static { this.styles = [
+        tokens,
+        css `
+      :host {
+        display: inline-block;
+        position: relative;
+        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);
+        font-size: var(--ui-font-size-sm, 0.75rem);
+      }
+      button.trigger {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: 0.35rem;
+        width: 100%;
+        box-sizing: border-box;
+        font: inherit;
+        color: var(--ui-text, #0f172a);
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        padding: 0.3rem 0.5rem;
+        cursor: pointer;
+      }
+      button.trigger:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      button.trigger:disabled {
+        cursor: not-allowed;
+        opacity: 0.6;
+      }
+      button.trigger:focus-visible {
+        outline: none;
+        border-color: var(--ui-primary, #4f46e5);
+        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));
+      }
+      .chevron {
+        display: flex;
+        color: var(--ui-text-muted, #64748b);
+        transform: rotate(90deg);
+        transition: transform 0.1s ease;
+      }
+      :host([open]) .chevron {
+        transform: rotate(-90deg);
+      }
+      ul.options {
+        position: absolute;
+        top: 100%;
+        left: 0;
+        z-index: 10;
+        min-width: 100%;
+        max-height: 40vh;
+        overflow-y: auto;
+        margin: 2px 0 0;
+        padding: 4px 0;
+        list-style: none;
+        white-space: nowrap;
+        background: var(--ui-surface, #fff);
+        border: 1px solid var(--ui-border, #e2e8f0);
+        border-radius: var(--ui-radius-sm, 0.25rem);
+        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));
+      }
+      li {
+        padding: 0.35rem 0.6rem;
+        cursor: pointer;
+      }
+      li.active,
+      li:hover {
+        background: var(--ui-surface-muted, #f8fafc);
+      }
+      li[aria-selected="true"] {
+        font-weight: 600;
+        color: var(--ui-primary, #4f46e5);
+      }
+    `,
+    ]; }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        window.removeEventListener("mousedown", this.#onWindowMousedown, true);
+    }
+    updated(changed) {
+        if (!changed.has("_open"))
+            return;
+        this.toggleAttribute("open", this._open);
+        if (this._open) {
+            window.addEventListener("mousedown", this.#onWindowMousedown, true);
+        }
+        else {
+            window.removeEventListener("mousedown", this.#onWindowMousedown, true);
+        }
+    }
+    #onWindowMousedown;
+    #toggle() {
+        if (this.disabled)
+            return;
+        this._open = !this._open;
+        if (this._open) {
+            this._activeIndex = Math.max(0, this.options.findIndex((o) => o.value === this.value));
+        }
+    }
+    #select(option) {
+        this._open = false;
+        if (option.value === this.value)
+            return;
+        this.value = option.value;
+        this.dispatchEvent(new CustomEvent("change", { detail: { value: option.value } }));
+    }
+    #onTriggerKeydown(e) {
+        if (e.key === "ArrowDown" || e.key === "ArrowUp" || e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            if (!this._open) {
+                this.#toggle();
+                return;
+            }
+            if (e.key === "ArrowDown")
+                this.#moveActive(1);
+            else if (e.key === "ArrowUp")
+                this.#moveActive(-1);
+            else
+                this.#confirmActive();
+        }
+        else if (e.key === "Escape" && this._open) {
+            e.preventDefault();
+            this._open = false;
+        }
+    }
+    #moveActive(delta) {
+        if (this.options.length === 0)
+            return;
+        const n = this.options.length;
+        this._activeIndex = (this._activeIndex + delta + n) % n;
+    }
+    #confirmActive() {
+        const option = this.options[this._activeIndex];
+        if (option)
+            this.#select(option);
+    }
+    renderListbox() {
+        if (!this._open)
+            return nothing;
+        return html `
+      <ul class="options" role="listbox">
+        ${this.options.map((o, i) => html `
+            <li
+              role="option"
+              aria-selected=${o.value === this.value}
+              class=${i === this._activeIndex ? "active" : ""}
+              @mousedown=${(e) => {
+            e.preventDefault();
+            this.#select(o);
+        }}
+            >
+              ${o.label}
+            </li>
+          `)}
+      </ul>
+    `;
+    }
+    render() {
+        const current = this.options.find((o) => o.value === this.value);
+        return html `
+      <button
+        type="button"
+        class="trigger"
+        aria-haspopup="listbox"
+        aria-expanded=${this._open}
+        aria-label=${this.label || nothing}
+        ?disabled=${this.disabled}
+        @click=${() => this.#toggle()}
+        @keydown=${(e) => this.#onTriggerKeydown(e)}
+      >
+        <span>${current?.label ?? this.value}</span>
+        <span class="chevron">${iconChevronRight(14)}</span>
+      </button>
+      ${this.renderListbox()}
+    `;
+    }
+};
+__decorate([
+    property({ attribute: false })
+], FormSelect.prototype, "options", void 0);
+__decorate([
+    property()
+], FormSelect.prototype, "value", void 0);
+__decorate([
+    property()
+], FormSelect.prototype, "label", void 0);
+__decorate([
+    property({ type: Boolean })
+], FormSelect.prototype, "disabled", void 0);
+__decorate([
+    state()
+], FormSelect.prototype, "_open", void 0);
+__decorate([
+    state()
+], FormSelect.prototype, "_activeIndex", void 0);
+FormSelect = __decorate([
+    customElement("form-select")
+], FormSelect);
+export { FormSelect };
+//# sourceMappingURL=form-select.js.map

package/dist/form-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-select.js","sourceRoot":"","sources":["../src/form-select.ts"],"names":[],"mappings":"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","sourcesContent":["import { LitElement, css, html, nothing, type PropertyValues } from \"lit\";\nimport { customElement, property, state } from \"lit/decorators.js\";\nimport { iconChevronRight } from \"./icons.js\";\nimport { tokens } from \"./tokens.js\";\n\n/** A single selectable option. */\nexport interface SelectOption {\n  value: string;\n  label: string;\n}\n\n/**\n * A styled dropdown select: a trigger button showing the current option's\n * label, opening a listbox popover on click. Drop-in generic replacement for\n * a native `<select>` wherever consistent cross-browser styling and a\n * `change` event carrying `{ value }` are wanted (e.g. a task's status\n * picker).\n *\n * The trigger fills its host's width (`justify-content: space-between`\n * pushes the chevron to the far edge), but the host itself stays\n * `display: inline-block` — so usages that never size the host (a filter\n * bar, a status picker) keep shrink-to-fit auto-width unchanged. To make an\n * instance full-width, size the host itself: `form-select { width: 100%; }`.\n *\n * @element form-select\n * @fires change - Fired with `{ value: string }` when a different option is picked.\n */\n@customElement(\"form-select\")\nexport class FormSelect extends LitElement {\n  static override styles = [\n    tokens,\n    css`\n      :host {\n        display: inline-block;\n        position: relative;\n        font-family: var(--ui-font, ui-sans-serif, system-ui, sans-serif);\n        font-size: var(--ui-font-size-sm, 0.75rem);\n      }\n      button.trigger {\n        display: flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: 0.35rem;\n        width: 100%;\n        box-sizing: border-box;\n        font: inherit;\n        color: var(--ui-text, #0f172a);\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        padding: 0.3rem 0.5rem;\n        cursor: pointer;\n      }\n      button.trigger:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      button.trigger:disabled {\n        cursor: not-allowed;\n        opacity: 0.6;\n      }\n      button.trigger:focus-visible {\n        outline: none;\n        border-color: var(--ui-primary, #4f46e5);\n        box-shadow: var(--ui-focus-ring, 0 0 0 3px rgb(79 70 229 / 0.35));\n      }\n      .chevron {\n        display: flex;\n        color: var(--ui-text-muted, #64748b);\n        transform: rotate(90deg);\n        transition: transform 0.1s ease;\n      }\n      :host([open]) .chevron {\n        transform: rotate(-90deg);\n      }\n      ul.options {\n        position: absolute;\n        top: 100%;\n        left: 0;\n        z-index: 10;\n        min-width: 100%;\n        max-height: 40vh;\n        overflow-y: auto;\n        margin: 2px 0 0;\n        padding: 4px 0;\n        list-style: none;\n        white-space: nowrap;\n        background: var(--ui-surface, #fff);\n        border: 1px solid var(--ui-border, #e2e8f0);\n        border-radius: var(--ui-radius-sm, 0.25rem);\n        box-shadow: var(--ui-shadow, 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1));\n      }\n      li {\n        padding: 0.35rem 0.6rem;\n        cursor: pointer;\n      }\n      li.active,\n      li:hover {\n        background: var(--ui-surface-muted, #f8fafc);\n      }\n      li[aria-selected=\"true\"] {\n        font-weight: 600;\n        color: var(--ui-primary, #4f46e5);\n      }\n    `,\n  ];\n\n  /** The full list of selectable options. */\n  @property({ attribute: false }) options: SelectOption[] = [];\n  /** Currently selected value; must match one of `options[].value`. */\n  @property() value = \"\";\n  /** `aria-label` applied to the trigger button. */\n  @property() label = \"\";\n  /** Disables the trigger, preventing the popover from opening. */\n  @property({ type: Boolean }) disabled = false;\n\n  @state() private _open = false;\n  @state() private _activeIndex = -1;\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n  }\n\n  protected override updated(changed: PropertyValues): void {\n    if (!changed.has(\"_open\")) return;\n    this.toggleAttribute(\"open\", this._open);\n    if (this._open) {\n      window.addEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    } else {\n      window.removeEventListener(\"mousedown\", this.#onWindowMousedown, true);\n    }\n  }\n\n  #onWindowMousedown = (e: MouseEvent): void => {\n    if (!e.composedPath().includes(this)) this._open = false;\n  };\n\n  #toggle(): void {\n    if (this.disabled) return;\n    this._open = !this._open;\n    if (this._open) {\n      this._activeIndex = Math.max(\n        0,\n        this.options.findIndex((o) => o.value === this.value),\n      );\n    }\n  }\n\n  #select(option: SelectOption): void {\n    this._open = false;\n    if (option.value === this.value) return;\n    this.value = option.value;\n    this.dispatchEvent(new CustomEvent(\"change\", { detail: { value: option.value } }));\n  }\n\n  #onTriggerKeydown(e: KeyboardEvent): void {\n    if (e.key === \"ArrowDown\" || e.key === \"ArrowUp\" || e.key === \"Enter\" || e.key === \" \") {\n      e.preventDefault();\n      if (!this._open) {\n        this.#toggle();\n        return;\n      }\n      if (e.key === \"ArrowDown\") this.#moveActive(1);\n      else if (e.key === \"ArrowUp\") this.#moveActive(-1);\n      else this.#confirmActive();\n    } else if (e.key === \"Escape\" && this._open) {\n      e.preventDefault();\n      this._open = false;\n    }\n  }\n\n  #moveActive(delta: number): void {\n    if (this.options.length === 0) return;\n    const n = this.options.length;\n    this._activeIndex = (this._activeIndex + delta + n) % n;\n  }\n\n  #confirmActive(): void {\n    const option = this.options[this._activeIndex];\n    if (option) this.#select(option);\n  }\n\n  private renderListbox() {\n    if (!this._open) return nothing;\n    return html`\n      <ul class=\"options\" role=\"listbox\">\n        ${this.options.map(\n          (o, i) => html`\n            <li\n              role=\"option\"\n              aria-selected=${o.value === this.value}\n              class=${i === this._activeIndex ? \"active\" : \"\"}\n              @mousedown=${(e: MouseEvent) => {\n                e.preventDefault();\n                this.#select(o);\n              }}\n            >\n              ${o.label}\n            </li>\n          `,\n        )}\n      </ul>\n    `;\n  }\n\n  override render() {\n    const current = this.options.find((o) => o.value === this.value);\n    return html`\n      <button\n        type=\"button\"\n        class=\"trigger\"\n        aria-haspopup=\"listbox\"\n        aria-expanded=${this._open}\n        aria-label=${this.label || nothing}\n        ?disabled=${this.disabled}\n        @click=${() => this.#toggle()}\n        @keydown=${(e: KeyboardEvent) => this.#onTriggerKeydown(e)}\n      >\n        <span>${current?.label ?? this.value}</span>\n        <span class=\"chevron\">${iconChevronRight(14)}</span>\n      </button>\n      ${this.renderListbox()}\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"form-select\": FormSelect;\n  }\n}\n"]}