kanto-ds 1.2.0 → 1.4.0

package/dist/components/forms/kt-input-menu/kt-input-menu.js

@@ -1,20 +1,21 @@
-import { css as y, nothing as a, html as l } from "lit";
-import { query as g, state as v, property as s } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
-import { live as x } from "lit/directives/live.js";
-import { K as f, d as w } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { u as k, e as p } from "../../../chunks/events-Bjl5Zmmq.js";
-import { a as $, s as I, b as q } from "../../../chunks/form-control-CxjBTt1c.js";
-import { a as D, b as E, o as m, f as c, l as O, n as C } from "../../../chunks/listbox-Sm3nvsC6.js";
+import { css as g, nothing as a, html as h } from "lit";
+import { query as x, state as f, property as n } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { live as w } from "lit/directives/live.js";
+import { K as m, d as k } from "../../../chunks/kt-element-E-tfJpGQ.js";
+import { u as $, e as c } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as I, s as q, b as D } from "../../../chunks/form-control-CxjBTt1c.js";
+import { a as O, b as E, o as y, f as v, l as L, n as C } from "../../../chunks/listbox-Sm3nvsC6.js";
+import { s as l } from "../../../chunks/index-DSSLJirw.js";
 import "../../core/kt-icon/kt-icon.js";
-var S = Object.defineProperty, i = (h, t, o, r) => {
-  for (var n = void 0, u = h.length - 1, b; u >= 0; u--)
-    (b = h[u]) && (n = b(t, o, n) || n);
-  return n && S(t, o, n), n;
+var P = Object.defineProperty, i = (d, t, o, r) => {
+  for (var s = void 0, u = d.length - 1, b; u >= 0; u--)
+    (b = d[u]) && (s = b(t, o, s) || s);
+  return s && P(t, o, s), s;
 };
-class e extends f {
+class e extends m {
   constructor() {
-    super(...arguments), this.internals = null, this.defaultValue = null, this.listId = k("kt-input-menu-list"), this.open = !1, this.query = "", this.activeIndex = -1, this.options = [], this.value = null, this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this.error = "", this.label = "", this.emptyText = "No options available", this.onDocumentPointerDown = (t) => {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.listId = $("kt-input-menu-list"), this.open = !1, this.query = "", this.activeIndex = -1, this.options = [], this.value = null, this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this.error = "", this.label = "", this.emptyText = void 0, this.onDocumentPointerDown = (t) => {
       t.composedPath().includes(this) || this.close();
     };
   }
@@ -23,9 +24,9 @@ class e extends f {
   }
   static {
     this.styles = [
-      f.styles,
-      D,
-      y`
+      m.styles,
+      O,
+      g`
       :host {
         position: relative;
         display: block;
@@ -128,19 +129,19 @@ class e extends f {
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.internals ??= $(this), this.defaultValue = this.value, document.addEventListener("pointerdown", this.onDocumentPointerDown);
+    super.connectedCallback(), this.internals ??= I(this), this.defaultValue = this.value, document.addEventListener("pointerdown", this.onDocumentPointerDown);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("pointerdown", this.onDocumentPointerDown);
   }
   willUpdate(t) {
-    if (t.has("value") || t.has("required") || t.has("error")) {
-      I(this.internals, this.value === null ? null : String(this.value));
+    if (t.has("value") || t.has("required") || t.has("error") || this.stringsChanged(t)) {
+      q(this.internals, this.value === null ? null : String(this.value));
       const o = this.required && this.value === null;
-      q(
+      D(
         this.internals,
         { valueMissing: o, customError: !!this.error },
-        this.error || (o ? "Select an option." : "")
+        this.error || (o ? l().selectOption : "")
       );
     }
   }
@@ -168,22 +169,22 @@ class e extends f {
   get displayValue() {
     if (this.open && this.query) return this.query;
     const t = this.selectedOption;
-    return t ? m(t) : this.query;
+    return t ? y(t) : this.query;
   }
   openList() {
-    this.disabled || this.open || (this.open = !0, this.activeIndex = c(this.visibleOptions));
+    this.disabled || this.open || (this.open = !0, this.activeIndex = v(this.visibleOptions));
   }
   close() {
     this.open = !1, this.query = "", this.activeIndex = -1;
   }
   onInput(t) {
-    this.query = t.target.value, this.open = !0, this.activeIndex = c(this.visibleOptions), p(this, "kt-filter", { query: this.query });
+    this.query = t.target.value, this.open = !0, this.activeIndex = v(this.visibleOptions), c(this, "kt-filter", { query: this.query });
   }
   choose(t) {
-    t.disabled || (this.value = t.id, this.close(), p(this, "kt-change", { value: t.id, option: t }));
+    t.disabled || (this.value = t.id, this.close(), c(this, "kt-change", { value: t.id, option: t }));
   }
   clear(t) {
-    t.stopPropagation(), this.value = null, this.query = "", p(this, "kt-change", { value: null, option: null }), this.input?.focus();
+    t.stopPropagation(), this.value = null, this.query = "", c(this, "kt-change", { value: null, option: null }), this.input?.focus();
   }
   onKeyDown(t) {
     const o = this.visibleOptions;
@@ -199,11 +200,11 @@ class e extends f {
         return;
       case "Home":
         if (!this.open) return;
-        t.preventDefault(), this.activeIndex = c(o);
+        t.preventDefault(), this.activeIndex = v(o);
         return;
       case "End":
         if (!this.open) return;
-        t.preventDefault(), this.activeIndex = O(o);
+        t.preventDefault(), this.activeIndex = L(o);
         return;
       case "Enter": {
         if (!this.open) return;
@@ -225,8 +226,8 @@ class e extends f {
   }
   render() {
     const t = this.visibleOptions, o = this.selectedOption !== void 0 && !this.disabled;
-    return l`<div
-      class=${d({ open: this.open, error: !!this.error })}
+    return h`<div
+      class=${p({ open: this.open, error: !!this.error })}
       @keydown=${this.onKeyDown}
     >
       <div part="control" class="control" @click=${this.openList}>
@@ -240,16 +241,16 @@ class e extends f {
           aria-label=${this.label || a}
           aria-invalid=${this.error ? "true" : a}
           placeholder=${this.placeholder || a}
-          .value=${x(this.displayValue)}
+          .value=${w(this.displayValue)}
           ?disabled=${this.disabled}
           @focus=${this.openList}
           @input=${this.onInput}
         />
 
-        ${o ? l`<button
+        ${o ? h`<button
                 type="button"
                 class="icon-button clear"
-                aria-label="Clear"
+                aria-label=${l().clear}
                 tabindex="-1"
                 @click=${this.clear}
               >
@@ -259,7 +260,7 @@ class e extends f {
         <button
           type="button"
           class="icon-button toggle"
-          aria-label=${this.open ? "Close list" : "Open list"}
+          aria-label=${this.open ? l().closeList : l().openList}
           tabindex="-1"
           @click=${(r) => {
       r.stopPropagation(), this.open ? this.close() : this.openList();
@@ -272,25 +273,25 @@ class e extends f {
       <ul
         part="popup"
         id=${this.listId}
-        class=${d({ popup: !0, open: this.open })}
+        class=${p({ popup: !0, open: this.open })}
         role="listbox"
         aria-label=${this.label || this.placeholder}
       >
-        ${t.length === 0 ? l`<li class="empty">${this.emptyText}</li>` : t.map(
-      (r, n) => l`<li
+        ${t.length === 0 ? h`<li class="empty">${this.emptyText ?? l().noOptions}</li>` : t.map(
+      (r, s) => h`<li
                     part="option"
-                    id=${this.optionId(n)}
-                    class=${d({
+                    id=${this.optionId(s)}
+                    class=${p({
         option: !0,
         selected: r.id === this.value,
-        active: n === this.activeIndex,
+        active: s === this.activeIndex,
         disabled: !!r.disabled
       })}
                     role="option"
                     aria-selected=${r.id === this.value ? "true" : "false"}
                     @click=${() => this.choose(r)}
                   >
-                    ${m(r)}
+                    ${y(r)}
                   </li>`
     )}
       </ul>
@@ -298,45 +299,45 @@ class e extends f {
   }
 }
 i([
-  g("input")
+  x("input")
 ], e.prototype, "input");
 i([
-  v()
+  f()
 ], e.prototype, "open");
 i([
-  v()
+  f()
 ], e.prototype, "query");
 i([
-  v()
+  f()
 ], e.prototype, "activeIndex");
 i([
-  s({ attribute: !1 })
+  n({ attribute: !1 })
 ], e.prototype, "options");
 i([
-  s({ type: String })
+  n({ type: String })
 ], e.prototype, "value");
 i([
-  s({ type: String })
+  n({ type: String })
 ], e.prototype, "placeholder");
 i([
-  s({ type: String })
+  n({ type: String })
 ], e.prototype, "name");
 i([
-  s({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
 i([
-  s({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], e.prototype, "required");
 i([
-  s({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], e.prototype, "error");
 i([
-  s({ type: String })
+  n({ type: String })
 ], e.prototype, "label");
 i([
-  s({ type: String, attribute: "empty-text" })
+  n({ type: String, attribute: "empty-text" })
 ], e.prototype, "emptyText");
-w("kt-input-menu", e);
+k("kt-input-menu", e);
 export {
   e as KtInputMenu
 };

package/dist/components/forms/kt-input-menu/kt-input-menu.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-input-menu.js","sources":["../../../../src/components/forms/kt-input-menu/kt-input-menu.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, uniqueId } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport {\n  filterOptions,\n  firstEnabledIndex,\n  lastEnabledIndex,\n  listboxStyles,\n  nextEnabledIndex,\n  optionLabel,\n  type KtOption,\n} from '#internal/listbox';\nimport '../../core/kt-icon/kt-icon.js';\n\n/**\n * A combobox: type to narrow the list, then pick.\n *\n * Reach for it over `<kt-select>` once the list is long enough that scanning it\n * is slower than typing three letters — somewhere around twenty options.\n *\n * @element kt-input-menu\n *\n * @csspart control - The field.\n * @csspart input - The native `<input>`.\n * @csspart popup - The option list.\n * @csspart option - An option row.\n *\n * @fires kt-change - An option was chosen or cleared. `detail: { value, option }`.\n * @fires kt-filter - The query changed. `detail: { query }`.\n */\nexport class KtInputMenu extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    listboxStyles,\n    css`\n      :host {\n        position: relative;\n        display: block;\n        --field-height: var(--button-height);\n      }\n\n      .control {\n        display: inline-flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--gap-element);\n        width: 100%;\n        height: var(--field-height);\n        padding: 0 var(--button-padding-x);\n        color: var(--text-body);\n        font: var(--font-input);\n        background-color: var(--color-dark-20);\n        border: none;\n        border-radius: var(--radius-input);\n        /* A resting hairline. A field is a fill on --surface-field, which is\n           one ramp step from the page in dark and almost the same colour in\n           light — so on a card or inside a modal it simply disappeared and\n           read as a bare native control.\n\n           A border rather than an outline, because the control inside fills\n           the field exactly and a coincident outline is painted over by the\n           native widget. A border insets the control by its own width, so it\n           cannot be covered. box-sizing: border-box keeps the outer size.\n\n           The hover and focus rings stay outlines on top of it, and the\n           transparent resting outline is what they animate from: without it\n           outline-color starts at the initial value, which resolves to the\n           text colour, and hover flashed near-white before settling. */\n        border: var(--border-width) solid var(--border-field);\n        outline: var(--outline-width) solid transparent;\n        cursor: text;\n        transition:\n          background-color var(--duration-instant),\n          outline-color var(--duration-instant);\n      }\n\n      .control:hover {\n        outline: var(--outline-width) solid var(--color-text-700);\n      }\n      .control:focus-within {\n        background-color: var(--color-dark-12);\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .error .control,\n      .error .control:hover,\n      .error .control:focus-within {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n\n      :host([disabled]) {\n        pointer-events: none;\n        opacity: 0.6;\n      }\n\n      input {\n        width: 100%;\n        min-width: 0;\n        color: var(--text-body);\n        font: var(--font-input);\n        background: transparent;\n        border: none;\n        outline: none;\n      }\n\n      input::placeholder {\n        color: var(--text-muted);\n      }\n\n      .icon-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0;\n        color: inherit;\n        background: transparent;\n        border: none;\n        cursor: pointer;\n      }\n\n      .clear {\n        transition: transform var(--duration-instant) ease-in-out;\n      }\n      .clear:hover {\n        transform: rotate(90deg);\n      }\n\n      .toggle {\n        transition: transform var(--duration-fast) ease-in-out;\n      }\n      .open .toggle {\n        transform: scaleY(-1);\n      }\n    `,\n  ];\n\n  @query('input')\n  private input!: HTMLInputElement;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | number | null = null;\n  private readonly listId = uniqueId('kt-input-menu-list');\n\n  @state()\n  private open = false;\n\n  @state()\n  private query = '';\n\n  @state()\n  private activeIndex = -1;\n\n  @property({ attribute: false })\n  options: readonly KtOption[] = [];\n\n  @property({ type: String })\n  value: string | number | null = null;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  @property({ type: String, reflect: true })\n  error = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText = 'No options available';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    document.addEventListener('pointerdown', this.onDocumentPointerDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('pointerdown', this.onDocumentPointerDown);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('value') || changed.has('required') || changed.has('error')) {\n      // The option id is what is submitted, never the label the field shows:\n      // the label is for people, the id is for the server.\n      setFormValue(this.internals, this.value === null ? null : String(this.value));\n\n      const missing = this.required && this.value === null;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? 'Select an option.' : ''),\n      );\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n    this.close();\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.input?.focus(options);\n  }\n\n  get selectedOption(): KtOption | undefined {\n    return this.options.find((option) => option.id === this.value);\n  }\n\n  /** Options after the current query, which is what the keyboard walks. */\n  private get visibleOptions(): readonly KtOption[] {\n    return filterOptions(this.options, this.query);\n  }\n\n  /**\n   * While filtering, the field shows the query; otherwise it shows the chosen\n   * option. Keeping the two in one input is what makes it a combobox rather\n   * than a search box that happens to sit above a list.\n   */\n  private get displayValue(): string {\n    if (this.open && this.query) return this.query;\n    const selected = this.selectedOption;\n    return selected ? optionLabel(selected) : this.query;\n  }\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (event.composedPath().includes(this)) return;\n    this.close();\n  };\n\n  private openList(): void {\n    if (this.disabled || this.open) return;\n    this.open = true;\n    this.activeIndex = firstEnabledIndex(this.visibleOptions);\n  }\n\n  private close(): void {\n    this.open = false;\n    this.query = '';\n    this.activeIndex = -1;\n  }\n\n  private onInput(event: Event): void {\n    this.query = (event.target as HTMLInputElement).value;\n    this.open = true;\n    this.activeIndex = firstEnabledIndex(this.visibleOptions);\n    emit(this, 'kt-filter', { query: this.query });\n  }\n\n  private choose(option: KtOption): void {\n    if (option.disabled) return;\n    this.value = option.id;\n    this.close();\n    emit(this, 'kt-change', { value: option.id, option });\n  }\n\n  private clear(event: Event): void {\n    event.stopPropagation();\n    this.value = null;\n    this.query = '';\n    emit(this, 'kt-change', { value: null, option: null });\n    this.input?.focus();\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    const options = this.visibleOptions;\n\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!this.open) return this.openList();\n        this.activeIndex = nextEnabledIndex(\n          options,\n          this.activeIndex,\n          event.key === 'ArrowDown' ? 1 : -1,\n        );\n        return;\n      case 'Home':\n        if (!this.open) return;\n        event.preventDefault();\n        this.activeIndex = firstEnabledIndex(options);\n        return;\n      case 'End':\n        if (!this.open) return;\n        event.preventDefault();\n        this.activeIndex = lastEnabledIndex(options);\n        return;\n      case 'Enter': {\n        if (!this.open) return;\n        event.preventDefault();\n        const option = options[this.activeIndex];\n        if (option) this.choose(option);\n        return;\n      }\n      case 'Escape':\n        if (!this.open) return;\n        event.stopPropagation();\n        this.close();\n        return;\n      case 'Tab':\n        this.close();\n    }\n  }\n\n  private optionId(index: number): string {\n    return `${this.listId}-option-${index}`;\n  }\n\n  override render(): TemplateResult {\n    const options = this.visibleOptions;\n    const showClear = this.selectedOption !== undefined && !this.disabled;\n\n    return html`<div\n      class=${classMap({ open: this.open, error: Boolean(this.error) })}\n      @keydown=${this.onKeyDown}\n    >\n      <div part=\"control\" class=\"control\" @click=${this.openList}>\n        <input\n          part=\"input\"\n          role=\"combobox\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-controls=${this.listId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant=${\n            this.open && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : nothing\n          }\n          aria-label=${this.label || nothing}\n          aria-invalid=${this.error ? 'true' : nothing}\n          placeholder=${this.placeholder || nothing}\n          .value=${live(this.displayValue)}\n          ?disabled=${this.disabled}\n          @focus=${this.openList}\n          @input=${this.onInput}\n        />\n\n        ${\n          showClear\n            ? html`<button\n                type=\"button\"\n                class=\"icon-button clear\"\n                aria-label=\"Clear\"\n                tabindex=\"-1\"\n                @click=${this.clear}\n              >\n                <kt-icon name=\"x\" size=\"18\"></kt-icon>\n              </button>`\n            : nothing\n        }\n\n        <button\n          type=\"button\"\n          class=\"icon-button toggle\"\n          aria-label=${this.open ? 'Close list' : 'Open list'}\n          tabindex=\"-1\"\n          @click=${(event: Event) => {\n            event.stopPropagation();\n            if (this.open) this.close();\n            else this.openList();\n          }}\n        >\n          <kt-icon name=\"chevron-down\" size=\"18\"></kt-icon>\n        </button>\n      </div>\n\n      <ul\n        part=\"popup\"\n        id=${this.listId}\n        class=${classMap({ popup: true, open: this.open })}\n        role=\"listbox\"\n        aria-label=${this.label || this.placeholder}\n      >\n        ${\n          options.length === 0\n            ? html`<li class=\"empty\">${this.emptyText}</li>`\n            : options.map(\n                (option, index) =>\n                  html`<li\n                    part=\"option\"\n                    id=${this.optionId(index)}\n                    class=${classMap({\n                      option: true,\n                      selected: option.id === this.value,\n                      active: index === this.activeIndex,\n                      disabled: Boolean(option.disabled),\n                    })}\n                    role=\"option\"\n                    aria-selected=${option.id === this.value ? 'true' : 'false'}\n                    @click=${() => this.choose(option)}\n                  >\n                    ${optionLabel(option)}\n                  </li>`,\n              )\n        }\n      </ul>\n    </div>`;\n  }\n}\n\ndefineElement('kt-input-menu', KtInputMenu);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-input-menu': KtInputMenu;\n  }\n}\n"],"names":["KtInputMenu","KtElement","uniqueId","event","listboxStyles","css","attachFormInternals","changed","setFormValue","missing","setValidity","state","options","option","filterOptions","selected","optionLabel","firstEnabledIndex","emit","nextEnabledIndex","lastEnabledIndex","index","showClear","html","classMap","nothing","live","__decorateClass","query","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-input-menu.js","sources":["../../../../src/components/forms/kt-input-menu/kt-input-menu.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { live } from 'lit/directives/live.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, uniqueId } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport {\n  filterOptions,\n  firstEnabledIndex,\n  lastEnabledIndex,\n  listboxStyles,\n  nextEnabledIndex,\n  optionLabel,\n  type KtOption,\n} from '#internal/listbox';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\n/**\n * A combobox: type to narrow the list, then pick.\n *\n * Reach for it over `<kt-select>` once the list is long enough that scanning it\n * is slower than typing three letters — somewhere around twenty options.\n *\n * @element kt-input-menu\n *\n * @csspart control - The field.\n * @csspart input - The native `<input>`.\n * @csspart popup - The option list.\n * @csspart option - An option row.\n *\n * @fires kt-change - An option was chosen or cleared. `detail: { value, option }`.\n * @fires kt-filter - The query changed. `detail: { query }`.\n */\nexport class KtInputMenu extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    listboxStyles,\n    css`\n      :host {\n        position: relative;\n        display: block;\n        --field-height: var(--button-height);\n      }\n\n      .control {\n        display: inline-flex;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--gap-element);\n        width: 100%;\n        height: var(--field-height);\n        padding: 0 var(--button-padding-x);\n        color: var(--text-body);\n        font: var(--font-input);\n        background-color: var(--color-dark-20);\n        border: none;\n        border-radius: var(--radius-input);\n        /* A resting hairline. A field is a fill on --surface-field, which is\n           one ramp step from the page in dark and almost the same colour in\n           light — so on a card or inside a modal it simply disappeared and\n           read as a bare native control.\n\n           A border rather than an outline, because the control inside fills\n           the field exactly and a coincident outline is painted over by the\n           native widget. A border insets the control by its own width, so it\n           cannot be covered. box-sizing: border-box keeps the outer size.\n\n           The hover and focus rings stay outlines on top of it, and the\n           transparent resting outline is what they animate from: without it\n           outline-color starts at the initial value, which resolves to the\n           text colour, and hover flashed near-white before settling. */\n        border: var(--border-width) solid var(--border-field);\n        outline: var(--outline-width) solid transparent;\n        cursor: text;\n        transition:\n          background-color var(--duration-instant),\n          outline-color var(--duration-instant);\n      }\n\n      .control:hover {\n        outline: var(--outline-width) solid var(--color-text-700);\n      }\n      .control:focus-within {\n        background-color: var(--color-dark-12);\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .error .control,\n      .error .control:hover,\n      .error .control:focus-within {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n\n      :host([disabled]) {\n        pointer-events: none;\n        opacity: 0.6;\n      }\n\n      input {\n        width: 100%;\n        min-width: 0;\n        color: var(--text-body);\n        font: var(--font-input);\n        background: transparent;\n        border: none;\n        outline: none;\n      }\n\n      input::placeholder {\n        color: var(--text-muted);\n      }\n\n      .icon-button {\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n        padding: 0;\n        color: inherit;\n        background: transparent;\n        border: none;\n        cursor: pointer;\n      }\n\n      .clear {\n        transition: transform var(--duration-instant) ease-in-out;\n      }\n      .clear:hover {\n        transform: rotate(90deg);\n      }\n\n      .toggle {\n        transition: transform var(--duration-fast) ease-in-out;\n      }\n      .open .toggle {\n        transform: scaleY(-1);\n      }\n    `,\n  ];\n\n  @query('input')\n  private input!: HTMLInputElement;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | number | null = null;\n  private readonly listId = uniqueId('kt-input-menu-list');\n\n  @state()\n  private open = false;\n\n  @state()\n  private query = '';\n\n  @state()\n  private activeIndex = -1;\n\n  @property({ attribute: false })\n  options: readonly KtOption[] = [];\n\n  @property({ type: String })\n  value: string | number | null = null;\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  @property({ type: String, reflect: true })\n  error = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText: string | undefined = undefined;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    document.addEventListener('pointerdown', this.onDocumentPointerDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('pointerdown', this.onDocumentPointerDown);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      this.stringsChanged(changed)\n    ) {\n      // The option id is what is submitted, never the label the field shows:\n      // the label is for people, the id is for the server.\n      setFormValue(this.internals, this.value === null ? null : String(this.value));\n\n      const missing = this.required && this.value === null;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().selectOption : ''),\n      );\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n    this.close();\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.input?.focus(options);\n  }\n\n  get selectedOption(): KtOption | undefined {\n    return this.options.find((option) => option.id === this.value);\n  }\n\n  /** Options after the current query, which is what the keyboard walks. */\n  private get visibleOptions(): readonly KtOption[] {\n    return filterOptions(this.options, this.query);\n  }\n\n  /**\n   * While filtering, the field shows the query; otherwise it shows the chosen\n   * option. Keeping the two in one input is what makes it a combobox rather\n   * than a search box that happens to sit above a list.\n   */\n  private get displayValue(): string {\n    if (this.open && this.query) return this.query;\n    const selected = this.selectedOption;\n    return selected ? optionLabel(selected) : this.query;\n  }\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (event.composedPath().includes(this)) return;\n    this.close();\n  };\n\n  private openList(): void {\n    if (this.disabled || this.open) return;\n    this.open = true;\n    this.activeIndex = firstEnabledIndex(this.visibleOptions);\n  }\n\n  private close(): void {\n    this.open = false;\n    this.query = '';\n    this.activeIndex = -1;\n  }\n\n  private onInput(event: Event): void {\n    this.query = (event.target as HTMLInputElement).value;\n    this.open = true;\n    this.activeIndex = firstEnabledIndex(this.visibleOptions);\n    emit(this, 'kt-filter', { query: this.query });\n  }\n\n  private choose(option: KtOption): void {\n    if (option.disabled) return;\n    this.value = option.id;\n    this.close();\n    emit(this, 'kt-change', { value: option.id, option });\n  }\n\n  private clear(event: Event): void {\n    event.stopPropagation();\n    this.value = null;\n    this.query = '';\n    emit(this, 'kt-change', { value: null, option: null });\n    this.input?.focus();\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    const options = this.visibleOptions;\n\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!this.open) return this.openList();\n        this.activeIndex = nextEnabledIndex(\n          options,\n          this.activeIndex,\n          event.key === 'ArrowDown' ? 1 : -1,\n        );\n        return;\n      case 'Home':\n        if (!this.open) return;\n        event.preventDefault();\n        this.activeIndex = firstEnabledIndex(options);\n        return;\n      case 'End':\n        if (!this.open) return;\n        event.preventDefault();\n        this.activeIndex = lastEnabledIndex(options);\n        return;\n      case 'Enter': {\n        if (!this.open) return;\n        event.preventDefault();\n        const option = options[this.activeIndex];\n        if (option) this.choose(option);\n        return;\n      }\n      case 'Escape':\n        if (!this.open) return;\n        event.stopPropagation();\n        this.close();\n        return;\n      case 'Tab':\n        this.close();\n    }\n  }\n\n  private optionId(index: number): string {\n    return `${this.listId}-option-${index}`;\n  }\n\n  override render(): TemplateResult {\n    const options = this.visibleOptions;\n    const showClear = this.selectedOption !== undefined && !this.disabled;\n\n    return html`<div\n      class=${classMap({ open: this.open, error: Boolean(this.error) })}\n      @keydown=${this.onKeyDown}\n    >\n      <div part=\"control\" class=\"control\" @click=${this.openList}>\n        <input\n          part=\"input\"\n          role=\"combobox\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-controls=${this.listId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant=${\n            this.open && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : nothing\n          }\n          aria-label=${this.label || nothing}\n          aria-invalid=${this.error ? 'true' : nothing}\n          placeholder=${this.placeholder || nothing}\n          .value=${live(this.displayValue)}\n          ?disabled=${this.disabled}\n          @focus=${this.openList}\n          @input=${this.onInput}\n        />\n\n        ${\n          showClear\n            ? html`<button\n                type=\"button\"\n                class=\"icon-button clear\"\n                aria-label=${strings().clear}\n                tabindex=\"-1\"\n                @click=${this.clear}\n              >\n                <kt-icon name=\"x\" size=\"18\"></kt-icon>\n              </button>`\n            : nothing\n        }\n\n        <button\n          type=\"button\"\n          class=\"icon-button toggle\"\n          aria-label=${this.open ? strings().closeList : strings().openList}\n          tabindex=\"-1\"\n          @click=${(event: Event) => {\n            event.stopPropagation();\n            if (this.open) this.close();\n            else this.openList();\n          }}\n        >\n          <kt-icon name=\"chevron-down\" size=\"18\"></kt-icon>\n        </button>\n      </div>\n\n      <ul\n        part=\"popup\"\n        id=${this.listId}\n        class=${classMap({ popup: true, open: this.open })}\n        role=\"listbox\"\n        aria-label=${this.label || this.placeholder}\n      >\n        ${\n          options.length === 0\n            ? html`<li class=\"empty\">${this.emptyText ?? strings().noOptions}</li>`\n            : options.map(\n                (option, index) =>\n                  html`<li\n                    part=\"option\"\n                    id=${this.optionId(index)}\n                    class=${classMap({\n                      option: true,\n                      selected: option.id === this.value,\n                      active: index === this.activeIndex,\n                      disabled: Boolean(option.disabled),\n                    })}\n                    role=\"option\"\n                    aria-selected=${option.id === this.value ? 'true' : 'false'}\n                    @click=${() => this.choose(option)}\n                  >\n                    ${optionLabel(option)}\n                  </li>`,\n              )\n        }\n      </ul>\n    </div>`;\n  }\n}\n\ndefineElement('kt-input-menu', KtInputMenu);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-input-menu': KtInputMenu;\n  }\n}\n"],"names":["KtInputMenu","KtElement","uniqueId","event","listboxStyles","css","attachFormInternals","changed","setFormValue","missing","setValidity","strings","state","options","option","filterOptions","selected","optionLabel","firstEnabledIndex","emit","nextEnabledIndex","lastEnabledIndex","index","showClear","html","classMap","nothing","live","__decorateClass","query","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-label-input/kt-label-input.js

@@ -1,6 +1,6 @@
 import { css as p, html as i } from "lit";
 import { query as d, property as f } from "lit/decorators.js";
-import { K as u, d as c } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as u, d as c } from "../../../chunks/kt-element-E-tfJpGQ.js";
 var b = Object.defineProperty, a = (r, t, s, h) => {
   for (var e = void 0, o = r.length - 1, n; o >= 0; o--)
     (n = r[o]) && (e = n(t, s, e) || e);

package/dist/components/forms/kt-radio-group/kt-radio-group.d.ts

@@ -0,0 +1,103 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+export type KtRadioGroupOrientation = 'vertical' | 'horizontal';
+/**
+ * One option of a `<kt-radio-group>`.
+ *
+ * It draws itself and carries `role="radio"`; the group owns the selection,
+ * the tab stop and the keyboard. A `<kt-radio>` outside a group does nothing
+ * useful.
+ *
+ * @element kt-radio
+ *
+ * @slot - The label.
+ *
+ * @csspart base - The `role="radio"` row.
+ * @csspart circle - The drawn circle.
+ */
+export declare class KtRadio extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Submitted by the group when this option is chosen. */
+    value: string;
+    disabled: boolean;
+    /** Set by the group. */
+    checked: boolean;
+    /** Set by the group: whether this option holds the group's one tab stop. */
+    tabbable: boolean;
+    /** Set by the group while it reports an error. */
+    invalid: boolean;
+    /** Set by the group while the whole group is disabled. */
+    groupDisabled: boolean;
+    private get inactive();
+    focus(options?: FocusOptions): void;
+    render(): TemplateResult;
+}
+/**
+ * One choice among a few, all visible at once.
+ *
+ * Reach for it over `<kt-select>` when there are few enough options to show
+ * them all — seeing every option is the point — and over
+ * `<kt-segmented-control>` when the options need a sentence each, or the
+ * choice belongs in a form rather than a toolbar.
+ *
+ * Native radios cannot form a group across shadow roots, so this is the ARIA
+ * radio group pattern: one tab stop for the whole group, arrow keys move and
+ * select, disabled options are skipped.
+ *
+ * @element kt-radio-group
+ *
+ * @slot - The `<kt-radio>` options.
+ *
+ * @csspart base - The `role="radiogroup"` container.
+ *
+ * @fires kt-change - An option was chosen. `detail: { value }`.
+ *
+ * @example
+ * ```html
+ * <kt-radio-group label="Billing" name="billing" value="monthly">
+ *   <kt-radio value="monthly">Monthly</kt-radio>
+ *   <kt-radio value="yearly">Yearly — two months free</kt-radio>
+ * </kt-radio-group>
+ * ```
+ */
+export declare class KtRadioGroup extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    private radios;
+    private internals;
+    private defaultValue;
+    /** The chosen option's value, or `null`. */
+    value: string | null;
+    name: string;
+    /** Accessible name of the group. */
+    label: string;
+    disabled: boolean;
+    required: boolean;
+    orientation: KtRadioGroupOrientation;
+    /** Error message. A non-empty value puts the group in its error state. */
+    error: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    updated(): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string | null): void;
+    focus(options?: FocusOptions): void;
+    private enabled;
+    /**
+     * Pushes the group's state down; the radios are the display, not the truth.
+     * The tab stop sits on the chosen option, or the first enabled one.
+     */
+    private syncRadios;
+    private choose;
+    private onClick;
+    /** Arrows move and select, wrapping; Space selects the focused option. */
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-radio': KtRadio;
+        'kt-radio-group': KtRadioGroup;
+    }
+}