kanto-ds 1.0.0

package/dist/components/forms/kt-select/kt-select.d.ts

@@ -0,0 +1,80 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import { type KtOption } from '#internal/listbox';
+import '../../core/kt-icon/kt-icon.js';
+export type KtSelectSize = 'small' | 'medium' | 'large';
+export type { KtOption };
+/**
+ * A single-choice dropdown.
+ *
+ * Unlike the trigger-plus-div it replaces, this is a real listbox: arrow keys
+ * move an active descendant, Home and End jump to the ends, Enter commits,
+ * Escape closes without changing anything, and disabled options are skipped
+ * rather than merely unclickable.
+ *
+ * @element kt-select
+ *
+ * @csspart trigger - The button that opens the list.
+ * @csspart popup - The option list.
+ * @csspart option - An option row.
+ *
+ * @fires kt-change - An option was chosen or cleared.
+ *   `detail: { value, option }`.
+ *
+ * @example
+ * ```html
+ * <kt-select placeholder="Select a region"></kt-select>
+ * ```
+ * ```js
+ * select.options = [{ id: 'ne', label: 'North East' }, { id: 'sw', label: 'South West' }];
+ * ```
+ */
+export declare class KtSelect extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    private internals;
+    private defaultValue;
+    private readonly listId;
+    private open;
+    /** Index of the active descendant while the list is open; -1 for none. */
+    private activeIndex;
+    /** The options to choose from. A property: this is data, not an attribute. */
+    options: readonly KtOption[];
+    /** The selected option's id, or `null`. */
+    value: string | number | null;
+    placeholder: string;
+    name: string;
+    size: KtSelectSize;
+    disabled: boolean;
+    required: boolean;
+    /** Error message. A non-empty value puts the control in its error state. */
+    error: string;
+    /** Shows the clear button once something is selected. */
+    clearable: boolean;
+    /** Accessible name, when no `<kt-label-input>` wraps the control. */
+    label: string;
+    /** Shown when `options` is empty. */
+    emptyText: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    focus(options?: FocusOptions): void;
+    /** The currently selected option, if the id still matches one. */
+    get selectedOption(): KtOption | undefined;
+    private onDocumentPointerDown;
+    private openList;
+    private closeList;
+    private toggleList;
+    private choose;
+    private clear;
+    private onKeyDown;
+    private optionId;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-select': KtSelect;
+    }
+}

package/dist/components/forms/kt-select/kt-select.js

@@ -0,0 +1,334 @@
+import { css as m, nothing as n, html as l } from "lit";
+import { state as g, property as r } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { K as u, d as y } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { u as x, e as v } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as w, s as k, b as $ } from "../../../chunks/form-control-CxjBTt1c.js";
+import { l as I, a as f, b as D, n as L, o as b } from "../../../chunks/listbox-CUXYn_3S.js";
+import "../../core/kt-icon/kt-icon.js";
+var S = Object.defineProperty, i = (h, e, o, a) => {
+  for (var s = void 0, c = h.length - 1, p; c >= 0; c--)
+    (p = h[c]) && (s = p(e, o, s) || s);
+  return s && S(e, o, s), s;
+};
+class t extends u {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.listId = x("kt-select-list"), this.open = !1, this.activeIndex = -1, this.options = [], this.value = null, this.placeholder = "Select", this.name = "", this.size = "medium", this.disabled = !1, this.required = !1, this.error = "", this.clearable = !0, this.label = "", this.emptyText = "No options available", this.onDocumentPointerDown = (e) => {
+      e.composedPath().includes(this) || (this.open = !1);
+    };
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      u.styles,
+      I,
+      m`
+      :host {
+        position: relative;
+        display: block;
+        --field-height: var(--button-height);
+      }
+
+      :host([size='small']) {
+        --field-height: var(--button-height-small);
+      }
+      :host([size='large']) {
+        --field-height: var(--button-height-large);
+      }
+
+      .trigger {
+        display: grid;
+        grid-template-columns: 1fr auto;
+        align-items: center;
+        gap: var(--gap-element);
+        width: 100%;
+        height: var(--field-height);
+        padding: 0 var(--button-padding-x);
+        color: var(--text-body);
+        font: var(--font-input);
+        text-align: left;
+        background-color: var(--color-dark-20);
+        border: none;
+        border-radius: var(--radius-input);
+        /* A resting hairline. A field is a fill on --surface-field, which is
+           one ramp step from the page in dark and almost the same colour in
+           light — so on a card or inside a modal it simply disappeared and
+           read as a bare native control.
+
+           A border rather than an outline, because the control inside fills
+           the field exactly and a coincident outline is painted over by the
+           native widget. A border insets the control by its own width, so it
+           cannot be covered. box-sizing: border-box keeps the outer size.
+
+           The hover and focus rings stay outlines on top of it, and the
+           transparent resting outline is what they animate from: without it
+           outline-color starts at the initial value, which resolves to the
+           text colour, and hover flashed near-white before settling. */
+        border: var(--border-width) solid var(--border-field);
+        outline: var(--outline-width) solid transparent;
+        cursor: pointer;
+        transition:
+          background-color var(--duration-instant),
+          outline-color var(--duration-instant);
+      }
+
+      .trigger:hover {
+        outline: var(--outline-width) solid var(--color-text-700);
+      }
+      .trigger:focus-visible,
+      .open .trigger {
+        background-color: var(--color-dark-12);
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      .error .trigger,
+      .error .trigger:hover {
+        outline: var(--outline-width) solid var(--color-danger-base);
+      }
+
+      :host([disabled]) {
+        pointer-events: none;
+      }
+      :host([disabled]) .trigger {
+        color: var(--text-disabled);
+        background-color: var(--color-dark-14);
+      }
+
+      .value {
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .placeholder {
+        color: var(--color-text-500);
+      }
+
+      .icons {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--gap-element);
+      }
+
+      .clear {
+        display: inline-flex;
+        padding: 0;
+        color: inherit;
+        background: none;
+        border: none;
+        cursor: pointer;
+        transition: transform var(--duration-instant) ease-in-out;
+      }
+      .clear:hover {
+        transform: rotate(90deg);
+      }
+
+      .chevron {
+        display: inline-flex;
+        align-items: center;
+        transition: transform var(--duration-fast) ease-in-out;
+      }
+      .open .chevron {
+        transform: scaleY(-1);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= w(this), this.defaultValue = this.value, document.addEventListener("pointerdown", this.onDocumentPointerDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("pointerdown", this.onDocumentPointerDown);
+  }
+  willUpdate(e) {
+    if (e.has("value") || e.has("required") || e.has("error")) {
+      k(this.internals, this.value === null ? null : String(this.value));
+      const o = this.required && this.value === null;
+      $(
+        this.internals,
+        { valueMissing: o, customError: !!this.error },
+        this.error || (o ? "Select an option." : "")
+      );
+    }
+  }
+  formResetCallback() {
+    this.value = this.defaultValue, this.open = !1;
+  }
+  formStateRestoreCallback(e) {
+    this.value = e;
+  }
+  focus(e) {
+    this.shadowRoot?.querySelector(".trigger")?.focus(e);
+  }
+  /** The currently selected option, if the id still matches one. */
+  get selectedOption() {
+    return this.options.find((e) => e.id === this.value);
+  }
+  openList() {
+    if (this.disabled) return;
+    this.open = !0;
+    const e = this.options.findIndex((o) => o.id === this.value);
+    this.activeIndex = e >= 0 ? e : f(this.options);
+  }
+  closeList() {
+    this.open = !1, this.activeIndex = -1;
+  }
+  toggleList() {
+    this.open ? this.closeList() : this.openList();
+  }
+  choose(e) {
+    e.disabled || (this.value = e.id, this.closeList(), this.focus(), v(this, "kt-change", { value: e.id, option: e }));
+  }
+  clear(e) {
+    e.stopPropagation(), this.value = null, v(this, "kt-change", { value: null, option: null });
+  }
+  onKeyDown(e) {
+    switch (e.key) {
+      case "ArrowDown":
+      case "ArrowUp": {
+        if (e.preventDefault(), !this.open) return this.openList();
+        this.activeIndex = L(
+          this.options,
+          this.activeIndex,
+          e.key === "ArrowDown" ? 1 : -1
+        );
+        return;
+      }
+      case "Home":
+        if (!this.open) return;
+        e.preventDefault(), this.activeIndex = f(this.options);
+        return;
+      case "End":
+        if (!this.open) return;
+        e.preventDefault(), this.activeIndex = D(this.options);
+        return;
+      case "Enter":
+      case " ": {
+        if (e.preventDefault(), !this.open) return this.openList();
+        const o = this.options[this.activeIndex];
+        o && this.choose(o);
+        return;
+      }
+      case "Escape":
+        if (!this.open) return;
+        e.stopPropagation(), this.closeList();
+        return;
+      case "Tab":
+        this.closeList();
+    }
+  }
+  optionId(e) {
+    return `${this.listId}-option-${e}`;
+  }
+  render() {
+    const e = this.selectedOption, o = this.clearable && e !== void 0 && !this.disabled;
+    return l`<div
+      class=${d({ open: this.open, error: !!this.error })}
+      @keydown=${this.onKeyDown}
+    >
+      <button
+        part="trigger"
+        type="button"
+        class="trigger"
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded=${this.open ? "true" : "false"}
+        aria-controls=${this.listId}
+        aria-activedescendant=${this.open && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : n}
+        aria-label=${this.label || n}
+        aria-invalid=${this.error ? "true" : n}
+        ?disabled=${this.disabled}
+        @click=${this.toggleList}
+      >
+        <span class=${d({ value: !0, placeholder: !e })}>
+          ${e ? b(e) : this.placeholder}
+        </span>
+        <span class="icons">
+          ${o ? l`<span
+                  class="clear"
+                  role="button"
+                  tabindex="-1"
+                  aria-label="Clear"
+                  @click=${this.clear}
+                >
+                  <kt-icon name="x" size="18"></kt-icon>
+                </span>` : n}
+          <span class="chevron"><kt-icon name="chevron-down" size="18"></kt-icon></span>
+        </span>
+      </button>
+
+      <ul
+        part="popup"
+        id=${this.listId}
+        class=${d({ popup: !0, open: this.open })}
+        role="listbox"
+        aria-label=${this.label || this.placeholder}
+      >
+        ${this.options.length === 0 ? l`<li class="empty">${this.emptyText}</li>` : this.options.map(
+      (a, s) => l`<li
+                    part="option"
+                    id=${this.optionId(s)}
+                    class=${d({
+        option: !0,
+        selected: a.id === this.value,
+        active: s === this.activeIndex,
+        disabled: !!a.disabled
+      })}
+                    role="option"
+                    aria-selected=${a.id === this.value ? "true" : "false"}
+                    aria-disabled=${a.disabled ? "true" : n}
+                    @click=${() => this.choose(a)}
+                  >
+                    ${b(a)}
+                  </li>`
+    )}
+      </ul>
+    </div>`;
+  }
+}
+i([
+  g()
+], t.prototype, "open");
+i([
+  g()
+], t.prototype, "activeIndex");
+i([
+  r({ attribute: !1 })
+], t.prototype, "options");
+i([
+  r({ type: String })
+], t.prototype, "value");
+i([
+  r({ type: String })
+], t.prototype, "placeholder");
+i([
+  r({ type: String })
+], t.prototype, "name");
+i([
+  r({ type: String, reflect: !0 })
+], t.prototype, "size");
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+i([
+  r({ type: Boolean, reflect: !0 })
+], t.prototype, "required");
+i([
+  r({ type: String, reflect: !0 })
+], t.prototype, "error");
+i([
+  r({ type: Boolean })
+], t.prototype, "clearable");
+i([
+  r({ type: String })
+], t.prototype, "label");
+i([
+  r({ type: String, attribute: "empty-text" })
+], t.prototype, "emptyText");
+y("kt-select", t);
+export {
+  t as KtSelect
+};
+//# sourceMappingURL=kt-select.js.map

package/dist/components/forms/kt-select/kt-select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-select.js","sources":["../../../../src/components/forms/kt-select/kt-select.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.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  firstEnabledIndex,\n  lastEnabledIndex,\n  listboxStyles,\n  nextEnabledIndex,\n  optionLabel,\n  type KtOption,\n} from '#internal/listbox';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtSelectSize = 'small' | 'medium' | 'large';\nexport type { KtOption };\n\n/**\n * A single-choice dropdown.\n *\n * Unlike the trigger-plus-div it replaces, this is a real listbox: arrow keys\n * move an active descendant, Home and End jump to the ends, Enter commits,\n * Escape closes without changing anything, and disabled options are skipped\n * rather than merely unclickable.\n *\n * @element kt-select\n *\n * @csspart trigger - The button that opens the list.\n * @csspart popup - The option list.\n * @csspart option - An option row.\n *\n * @fires kt-change - An option was chosen or cleared.\n *   `detail: { value, option }`.\n *\n * @example\n * ```html\n * <kt-select placeholder=\"Select a region\"></kt-select>\n * ```\n * ```js\n * select.options = [{ id: 'ne', label: 'North East' }, { id: 'sw', label: 'South West' }];\n * ```\n */\nexport class KtSelect 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      :host([size='small']) {\n        --field-height: var(--button-height-small);\n      }\n      :host([size='large']) {\n        --field-height: var(--button-height-large);\n      }\n\n      .trigger {\n        display: grid;\n        grid-template-columns: 1fr auto;\n        align-items: center;\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        text-align: left;\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: pointer;\n        transition:\n          background-color var(--duration-instant),\n          outline-color var(--duration-instant);\n      }\n\n      .trigger:hover {\n        outline: var(--outline-width) solid var(--color-text-700);\n      }\n      .trigger:focus-visible,\n      .open .trigger {\n        background-color: var(--color-dark-12);\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .error .trigger,\n      .error .trigger:hover {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n\n      :host([disabled]) {\n        pointer-events: none;\n      }\n      :host([disabled]) .trigger {\n        color: var(--text-disabled);\n        background-color: var(--color-dark-14);\n      }\n\n      .value {\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .placeholder {\n        color: var(--color-text-500);\n      }\n\n      .icons {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--gap-element);\n      }\n\n      .clear {\n        display: inline-flex;\n        padding: 0;\n        color: inherit;\n        background: none;\n        border: none;\n        cursor: pointer;\n        transition: transform var(--duration-instant) ease-in-out;\n      }\n      .clear:hover {\n        transform: rotate(90deg);\n      }\n\n      .chevron {\n        display: inline-flex;\n        align-items: center;\n        transition: transform var(--duration-fast) ease-in-out;\n      }\n      .open .chevron {\n        transform: scaleY(-1);\n      }\n    `,\n  ];\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | number | null = null;\n  private readonly listId = uniqueId('kt-select-list');\n\n  @state()\n  private open = false;\n\n  /** Index of the active descendant while the list is open; -1 for none. */\n  @state()\n  private activeIndex = -1;\n\n  /** The options to choose from. A property: this is data, not an attribute. */\n  @property({ attribute: false })\n  options: readonly KtOption[] = [];\n\n  /** The selected option's id, or `null`. */\n  @property({ type: String })\n  value: string | number | null = null;\n\n  @property({ type: String })\n  placeholder = 'Select';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String, reflect: true })\n  size: KtSelectSize = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /** Error message. A non-empty value puts the control in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  /** Shows the clear button once something is selected. */\n  @property({ type: Boolean })\n  clearable = true;\n\n  /** Accessible name, when no `<kt-label-input>` wraps the control. */\n  @property({ type: String })\n  label = '';\n\n  /** Shown when `options` is empty. */\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      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.open = false;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLButtonElement>('.trigger')?.focus(options);\n  }\n\n  /** The currently selected option, if the id still matches one. */\n  get selectedOption(): KtOption | undefined {\n    return this.options.find((option) => option.id === this.value);\n  }\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (event.composedPath().includes(this)) return;\n    this.open = false;\n  };\n\n  private openList(): void {\n    if (this.disabled) return;\n    this.open = true;\n    const selected = this.options.findIndex((option) => option.id === this.value);\n    this.activeIndex = selected >= 0 ? selected : firstEnabledIndex(this.options);\n  }\n\n  private closeList(): void {\n    this.open = false;\n    this.activeIndex = -1;\n  }\n\n  private toggleList(): void {\n    if (this.open) this.closeList();\n    else this.openList();\n  }\n\n  private choose(option: KtOption): void {\n    if (option.disabled) return;\n    this.value = option.id;\n    this.closeList();\n    this.focus();\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    emit(this, 'kt-change', { value: null, option: null });\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\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          this.options,\n          this.activeIndex,\n          event.key === 'ArrowDown' ? 1 : -1,\n        );\n        return;\n      }\n      case 'Home':\n        if (!this.open) return;\n        event.preventDefault();\n        this.activeIndex = firstEnabledIndex(this.options);\n        return;\n      case 'End':\n        if (!this.open) return;\n        event.preventDefault();\n        this.activeIndex = lastEnabledIndex(this.options);\n        return;\n      case 'Enter':\n      case ' ': {\n        event.preventDefault();\n        if (!this.open) return this.openList();\n        const option = this.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.closeList();\n        return;\n      case 'Tab':\n        this.closeList();\n    }\n  }\n\n  private optionId(index: number): string {\n    return `${this.listId}-option-${index}`;\n  }\n\n  override render(): TemplateResult {\n    const selected = this.selectedOption;\n    const showClear = this.clearable && selected !== undefined && !this.disabled;\n\n    return html`<div\n      class=${classMap({ open: this.open, error: Boolean(this.error) })}\n      @keydown=${this.onKeyDown}\n    >\n      <button\n        part=\"trigger\"\n        type=\"button\"\n        class=\"trigger\"\n        role=\"combobox\"\n        aria-haspopup=\"listbox\"\n        aria-expanded=${this.open ? 'true' : 'false'}\n        aria-controls=${this.listId}\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        ?disabled=${this.disabled}\n        @click=${this.toggleList}\n      >\n        <span class=${classMap({ value: true, placeholder: !selected })}>\n          ${selected ? optionLabel(selected) : this.placeholder}\n        </span>\n        <span class=\"icons\">\n          ${\n            showClear\n              ? html`<span\n                  class=\"clear\"\n                  role=\"button\"\n                  tabindex=\"-1\"\n                  aria-label=\"Clear\"\n                  @click=${this.clear}\n                >\n                  <kt-icon name=\"x\" size=\"18\"></kt-icon>\n                </span>`\n              : nothing\n          }\n          <span class=\"chevron\"><kt-icon name=\"chevron-down\" size=\"18\"></kt-icon></span>\n        </span>\n      </button>\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          this.options.length === 0\n            ? html`<li class=\"empty\">${this.emptyText}</li>`\n            : this.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                    aria-disabled=${option.disabled ? 'true' : nothing}\n                    @click=${() => this.choose(option)}\n                  >\n                    ${optionLabel(option)}\n                  </li>`,\n              )\n        }\n      </ul>\n    </div>`;\n  }\n}\n\ndefineElement('kt-select', KtSelect);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-select': KtSelect;\n  }\n}\n"],"names":["KtSelect","KtElement","uniqueId","event","listboxStyles","css","attachFormInternals","changed","setFormValue","missing","setValidity","state","options","option","selected","firstEnabledIndex","emit","nextEnabledIndex","lastEnabledIndex","index","showClear","html","classMap","nothing","optionLabel","__decorateClass","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-textarea/kt-textarea.d.ts

@@ -0,0 +1,62 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+/**
+ * A multi-line text field, with the same borderless fill and outline states as
+ * `<kt-input>`.
+ *
+ * A character counter appears whenever `maxlength` is set — the field tells
+ * the user where the limit is before the browser silently stops accepting
+ * keystrokes.
+ *
+ * @element kt-textarea
+ *
+ * @csspart base - The field container.
+ * @csspart control - The native `<textarea>`.
+ * @csspart counter - The character counter.
+ *
+ * @fires kt-input - On every keystroke. `detail: { value }`.
+ * @fires kt-change - When the value is committed. `detail: { value }`.
+ */
+export declare class KtTextarea extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    private control;
+    private internals;
+    private defaultValue;
+    value: string;
+    name: string;
+    placeholder: string;
+    rows: number;
+    maxlength?: number;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    /** Error message. A non-empty value puts the field in its error state. */
+    error: string;
+    /** Accessible name, when no `<kt-label-input>` wraps the field. */
+    label: string;
+    /**
+     * Whether the reader may drag the field taller.
+     *
+     * Off by default, as in the rest of Kanto: the grip is drawn by the operating
+     * system, lands on the field's rounded corner and belongs to no design
+     * system — and a field the layout sized is not usually the reader's to
+     * resize. Turn it on where the content genuinely varies.
+     */
+    resize: 'vertical' | 'none';
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    private onInput;
+    private onChange;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-textarea': KtTextarea;
+    }
+}