kanto-ds 1.0.1 → 1.2.0

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

@@ -1,7 +1,7 @@
 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 { K as u, d as y } from "../../../chunks/kt-element-B_jjQDhg.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 { a as I, f, l as D, n as L, o as b } from "../../../chunks/listbox-Sm3nvsC6.js";
@@ -103,7 +103,7 @@ class t extends u {
       }
 
       .placeholder {
-        color: var(--color-text-500);
+        color: var(--text-muted);
       }
 
       .icons {

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

@@ -1 +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":";;;;;;;;;;;;;AAiDO,MAAMA,UAAiBC,EAAU;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GAsHL,KAAQ,YAAoC,MAC5C,KAAQ,eAAuC,MAC/C,KAAiB,SAASC,EAAS,gBAAgB,GAGnD,KAAQ,OAAO,IAIf,KAAQ,cAAc,IAItB,KAAA,UAA+B,CAAA,GAI/B,KAAA,QAAgC,MAGhC,KAAA,cAAc,UAGd,KAAA,OAAO,IAGP,KAAA,OAAqB,UAGrB,KAAA,WAAW,IAGX,KAAA,WAAW,IAIX,KAAA,QAAQ,IAIR,KAAA,YAAY,IAIZ,KAAA,QAAQ,IAIR,KAAA,YAAY,wBA6CZ,KAAQ,wBAAwB,CAACC,MAAuB;AACtD,MAAIA,EAAM,aAAA,EAAe,SAAS,IAAI,MACtC,KAAK,OAAO;AAAA,IACd;AAAA,EAAA;AAAA,EArNA,OAAA;AAAA,SAAgB,iBAAiB;AAAA,EAAA;AAAA,EAEjC,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBF,EAAU;AAAA,MACVG;AAAA,MACAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA8GF;AAAA,EAoDS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,cAAcC,EAAoB,IAAI,GAC3C,KAAK,eAAe,KAAK,OACzB,SAAS,iBAAiB,eAAe,KAAK,qBAAqB;AAAA,EACrE;AAAA,EAES,uBAA6B;AACpC,UAAM,qBAAA,GACN,SAAS,oBAAoB,eAAe,KAAK,qBAAqB;AAAA,EACxE;AAAA,EAES,WAAWC,GAAqC;AACvD,QAAIA,EAAQ,IAAI,OAAO,KAAKA,EAAQ,IAAI,UAAU,KAAKA,EAAQ,IAAI,OAAO,GAAG;AAC3E,MAAAC,EAAa,KAAK,WAAW,KAAK,UAAU,OAAO,OAAO,OAAO,KAAK,KAAK,CAAC;AAE5E,YAAMC,IAAU,KAAK,YAAY,KAAK,UAAU;AAChD,MAAAC;AAAA,QACE,KAAK;AAAA,QACL,EAAE,cAAcD,GAAS,aAAa,EAAQ,KAAK,MAAK;AAAA,QACxD,KAAK,UAAUA,IAAU,sBAAsB;AAAA,MAAA;AAAA,IAEnD;AAAA,EACF;AAAA,EAEA,oBAA0B;AACxB,SAAK,QAAQ,KAAK,cAClB,KAAK,OAAO;AAAA,EACd;AAAA,EAEA,yBAAyBE,GAAqB;AAC5C,SAAK,QAAQA;AAAAA,EACf;AAAA,EAES,MAAMC,GAA8B;AAC3C,SAAK,YAAY,cAAiC,UAAU,GAAG,MAAMA,CAAO;AAAA,EAC9E;AAAA;AAAA,EAGA,IAAI,iBAAuC;AACzC,WAAO,KAAK,QAAQ,KAAK,CAACC,MAAWA,EAAO,OAAO,KAAK,KAAK;AAAA,EAC/D;AAAA,EAOQ,WAAiB;AACvB,QAAI,KAAK,SAAU;AACnB,SAAK,OAAO;AACZ,UAAMC,IAAW,KAAK,QAAQ,UAAU,CAACD,MAAWA,EAAO,OAAO,KAAK,KAAK;AAC5E,SAAK,cAAcC,KAAY,IAAIA,IAAWC,EAAkB,KAAK,OAAO;AAAA,EAC9E;AAAA,EAEQ,YAAkB;AACxB,SAAK,OAAO,IACZ,KAAK,cAAc;AAAA,EACrB;AAAA,EAEQ,aAAmB;AACzB,IAAI,KAAK,OAAM,KAAK,UAAA,SACV,SAAA;AAAA,EACZ;AAAA,EAEQ,OAAOF,GAAwB;AACrC,IAAIA,EAAO,aACX,KAAK,QAAQA,EAAO,IACpB,KAAK,UAAA,GACL,KAAK,MAAA,GACLG,EAAK,MAAM,aAAa,EAAE,OAAOH,EAAO,IAAI,QAAAA,GAAQ;AAAA,EACtD;AAAA,EAEQ,MAAMV,GAAoB;AAChC,IAAAA,EAAM,gBAAA,GACN,KAAK,QAAQ,MACba,EAAK,MAAM,aAAa,EAAE,OAAO,MAAM,QAAQ,MAAM;AAAA,EACvD;AAAA,EAEQ,UAAUb,GAA4B;AAC5C,YAAQA,EAAM,KAAA;AAAA,MACZ,KAAK;AAAA,MACL,KAAK,WAAW;AAEd,YADAA,EAAM,eAAA,GACF,CAAC,KAAK,KAAM,QAAO,KAAK,SAAA;AAC5B,aAAK,cAAcc;AAAA,UACjB,KAAK;AAAA,UACL,KAAK;AAAA,UACLd,EAAM,QAAQ,cAAc,IAAI;AAAA,QAAA;AAElC;AAAA,MACF;AAAA,MACA,KAAK;AACH,YAAI,CAAC,KAAK,KAAM;AAChB,QAAAA,EAAM,eAAA,GACN,KAAK,cAAcY,EAAkB,KAAK,OAAO;AACjD;AAAA,MACF,KAAK;AACH,YAAI,CAAC,KAAK,KAAM;AAChB,QAAAZ,EAAM,eAAA,GACN,KAAK,cAAce,EAAiB,KAAK,OAAO;AAChD;AAAA,MACF,KAAK;AAAA,MACL,KAAK,KAAK;AAER,YADAf,EAAM,eAAA,GACF,CAAC,KAAK,KAAM,QAAO,KAAK,SAAA;AAC5B,cAAMU,IAAS,KAAK,QAAQ,KAAK,WAAW;AAC5C,QAAIA,KAAQ,KAAK,OAAOA,CAAM;AAC9B;AAAA,MACF;AAAA,MACA,KAAK;AACH,YAAI,CAAC,KAAK,KAAM;AAChB,QAAAV,EAAM,gBAAA,GACN,KAAK,UAAA;AACL;AAAA,MACF,KAAK;AACH,aAAK,UAAA;AAAA,IAAU;AAAA,EAErB;AAAA,EAEQ,SAASgB,GAAuB;AACtC,WAAO,GAAG,KAAK,MAAM,WAAWA,CAAK;AAAA,EACvC;AAAA,EAES,SAAyB;AAChC,UAAML,IAAW,KAAK,gBAChBM,IAAY,KAAK,aAAaN,MAAa,UAAa,CAAC,KAAK;AAEpE,WAAOO;AAAA,cACGC,EAAS,EAAE,MAAM,KAAK,MAAM,OAAO,EAAQ,KAAK,OAAQ,CAAC;AAAA,iBACtD,KAAK,SAAS;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,wBAQP,KAAK,OAAO,SAAS,OAAO;AAAA,wBAC5B,KAAK,MAAM;AAAA,gCAEzB,KAAK,QAAQ,KAAK,eAAe,IAAI,KAAK,SAAS,KAAK,WAAW,IAAIC,CACzE;AAAA,qBACa,KAAK,SAASA,CAAO;AAAA,uBACnB,KAAK,QAAQ,SAASA,CAAO;AAAA,oBAChC,KAAK,QAAQ;AAAA,iBAChB,KAAK,UAAU;AAAA;AAAA,sBAEVD,EAAS,EAAE,OAAO,IAAM,aAAa,CAACR,EAAA,CAAU,CAAC;AAAA,YAC3DA,IAAWU,EAAYV,CAAQ,IAAI,KAAK,WAAW;AAAA;AAAA;AAAA,YAInDM,IACIC;AAAA;AAAA;AAAA;AAAA;AAAA,2BAKW,KAAK,KAAK;AAAA;AAAA;AAAA,2BAIrBE,CACN;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,aAOG,KAAK,MAAM;AAAA,gBACRD,EAAS,EAAE,OAAO,IAAM,MAAM,KAAK,MAAM,CAAC;AAAA;AAAA,qBAErC,KAAK,SAAS,KAAK,WAAW;AAAA;AAAA,UAGzC,KAAK,QAAQ,WAAW,IACpBD,sBAAyB,KAAK,SAAS,UACvC,KAAK,QAAQ;AAAA,MACX,CAACR,GAAQM,MACPE;AAAA;AAAA,yBAEO,KAAK,SAASF,CAAK,CAAC;AAAA,4BACjBG,EAAS;AAAA,QACf,QAAQ;AAAA,QACR,UAAUT,EAAO,OAAO,KAAK;AAAA,QAC7B,QAAQM,MAAU,KAAK;AAAA,QACvB,UAAU,EAAQN,EAAO;AAAA,MAAQ,CAClC,CAAC;AAAA;AAAA,oCAEcA,EAAO,OAAO,KAAK,QAAQ,SAAS,OAAO;AAAA,oCAC3CA,EAAO,WAAW,SAASU,CAAO;AAAA,6BACzC,MAAM,KAAK,OAAOV,CAAM,CAAC;AAAA;AAAA,sBAEhCW,EAAYX,CAAM,CAAC;AAAA;AAAA,IAAA,CAGjC;AAAA;AAAA;AAAA,EAGN;AACF;AAvPUY,EAAA;AAAA,EADPd,EAAA;AAAM,GA1HIX,EA2HH,WAAA,MAAA;AAIAyB,EAAA;AAAA,EADPd,EAAA;AAAM,GA9HIX,EA+HH,WAAA,aAAA;AAIRyB,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAlInB1B,EAmIX,WAAA,SAAA;AAIAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtIf1B,EAuIX,WAAA,OAAA;AAGAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzIf1B,EA0IX,WAAA,aAAA;AAGAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5If1B,EA6IX,WAAA,MAAA;AAGAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/I9B1B,EAgJX,WAAA,MAAA;AAGAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAlJ/B1B,EAmJX,WAAA,UAAA;AAGAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArJ/B1B,EAsJX,WAAA,UAAA;AAIAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAzJ9B1B,EA0JX,WAAA,OAAA;AAIAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA7JhB1B,EA8JX,WAAA,WAAA;AAIAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjKf1B,EAkKX,WAAA,OAAA;AAIAyB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,cAAc;AAAA,GArKxC1B,EAsKX,WAAA,WAAA;AA8MF2B,EAAc,aAAa3B,CAAQ;"}
+{"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(--text-muted);\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.js

@@ -1,15 +1,15 @@
-import { css as m, nothing as i, html as s } from "lit";
+import { css as m, nothing as i, html as l } from "lit";
 import { query as f, property as a } from "lit/decorators.js";
 import { classMap as u } from "lit/directives/class-map.js";
 import { live as b } from "lit/directives/live.js";
-import { K as c, d as g } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as c, d as g } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as y, s as v, b as x } from "../../../chunks/form-control-CxjBTt1c.js";
 import "../../core/kt-icon/kt-icon.js";
 var w = Object.defineProperty, r = (n, e, o, $) => {
-  for (var l = void 0, h = n.length - 1, d; h >= 0; h--)
-    (d = n[h]) && (l = d(e, o, l) || l);
-  return l && w(e, o, l), l;
+  for (var s = void 0, h = n.length - 1, d; h >= 0; h--)
+    (d = n[h]) && (s = d(e, o, s) || s);
+  return s && w(e, o, s), s;
 };
 class t extends c {
   constructor() {
@@ -65,7 +65,7 @@ class t extends c {
         outline: var(--outline-width) solid var(--color-danger-base);
       }
       .error textarea {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
 
       .disabled {
@@ -93,7 +93,7 @@ class t extends c {
       }
 
       textarea::placeholder {
-        color: var(--color-text-500);
+        color: var(--text-muted);
       }
 
       .meta {
@@ -113,12 +113,12 @@ class t extends c {
       }
 
       .counter.at-limit {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
 
       .error-icon {
         display: flex;
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
     `
     ];
@@ -157,7 +157,7 @@ class t extends c {
   }
   render() {
     const e = this.maxlength !== void 0, o = this.maxlength !== void 0 && this.value.length >= this.maxlength;
-    return s`<div
+    return l`<div
       part="base"
       class=${u({
       field: !0,
@@ -165,6 +165,7 @@ class t extends c {
       disabled: this.disabled
     })}
     >
+      ${this.error ? l`<span id="error-message" class="visually-hidden">${this.error}</span>` : i}
       <textarea
         part="control"
         name=${this.name || i}
@@ -173,6 +174,7 @@ class t extends c {
         placeholder=${this.placeholder || i}
         aria-label=${this.label || i}
         aria-invalid=${this.error ? "true" : i}
+        aria-describedby=${this.error ? "error-message" : i}
         .value=${b(this.value)}
         ?disabled=${this.disabled}
         ?readonly=${this.readonly}
@@ -181,11 +183,11 @@ class t extends c {
         @change=${this.onChange}
       ></textarea>
 
-      ${this.error || e ? s`<div class="meta">
-              ${this.error ? s`<span class="error-icon" title=${this.error}>
+      ${this.error || e ? l`<div class="meta">
+              ${this.error ? l`<span class="error-icon" title=${this.error}>
                       <kt-icon name="circle-alert" size="18" label=${this.error}></kt-icon>
                     </span>` : i}
-              ${e ? s`<span
+              ${e ? l`<span
                       part="counter"
                       class=${u({ counter: !0, "at-limit": o })}
                       aria-live="polite"

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

@@ -1 +1 @@
-{"version":3,"file":"kt-textarea.js","sources":["../../../../src/components/forms/kt-textarea/kt-textarea.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } 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 } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport '../../core/kt-icon/kt-icon.js';\n\n/**\n * A multi-line text field, with the same borderless fill and outline states as\n * `<kt-input>`.\n *\n * A character counter appears whenever `maxlength` is set — the field tells\n * the user where the limit is before the browser silently stops accepting\n * keystrokes.\n *\n * @element kt-textarea\n *\n * @csspart base - The field container.\n * @csspart control - The native `<textarea>`.\n * @csspart counter - The character counter.\n *\n * @fires kt-input - On every keystroke. `detail: { value }`.\n * @fires kt-change - When the value is committed. `detail: { value }`.\n */\nexport class KtTextarea extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .field {\n        display: flex;\n        align-items: flex-start;\n        width: 100%;\n        min-height: var(--button-height);\n        background-color: var(--surface-field);\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        transition: outline-color var(--duration-instant);\n      }\n\n      .field:hover {\n        outline: var(--outline-width) solid var(--color-text-700);\n      }\n      .field:focus-within {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .error,\n      .error:hover,\n      .error:focus-within {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n      .error textarea {\n        color: var(--color-danger-base);\n      }\n\n      .disabled {\n        background-color: var(--color-dark-14);\n        pointer-events: none;\n      }\n      .disabled textarea {\n        color: var(--text-disabled);\n      }\n\n      textarea {\n        width: 100%;\n        min-height: calc(var(--button-height) - var(--gap-element) * 2);\n        padding: var(--text-area-padding);\n        color: var(--text-body);\n        font: var(--font-input);\n        background: transparent;\n        border: none;\n        outline: none;\n        resize: none;\n      }\n\n      :host([resize='vertical']) textarea {\n        resize: vertical;\n      }\n\n      textarea::placeholder {\n        color: var(--color-text-500);\n      }\n\n      .meta {\n        display: flex;\n        flex: none;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--gap-element);\n        margin: 10px var(--button-padding-x) 0 0;\n      }\n\n      .counter {\n        color: var(--color-text-700);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n        white-space: nowrap;\n      }\n\n      .counter.at-limit {\n        color: var(--color-danger-base);\n      }\n\n      .error-icon {\n        display: flex;\n        color: var(--color-danger-base);\n      }\n    `,\n  ];\n\n  @query('textarea')\n  private control!: HTMLTextAreaElement;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: Number })\n  rows = 3;\n\n  @property({ type: Number })\n  maxlength?: number;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /** Error message. A non-empty value puts the field in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  /** Accessible name, when no `<kt-label-input>` wraps the field. */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the reader may drag the field taller.\n   *\n   * Off by default, as in the rest of Kanto: the grip is drawn by the operating\n   * system, lands on the field's rounded corner and belongs to no design\n   * system — and a field the layout sized is not usually the reader's to\n   * resize. Turn it on where the content genuinely varies.\n   */\n  @property({ type: String, reflect: true })\n  resize: 'vertical' | 'none' = 'none';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    setFormValue(this.internals, this.value);\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);\n\n      const missing = this.required && this.value.length === 0;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? 'This field is required.' : ''),\n      );\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.control?.focus(options);\n  }\n\n  override blur(): void {\n    this.control?.blur();\n  }\n\n  private onInput(event: Event): void {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    emit(this, 'kt-input', { value: this.value });\n  }\n\n  private onChange(event: Event): void {\n    event.stopPropagation();\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  override render(): TemplateResult {\n    const showCounter = this.maxlength !== undefined;\n    const atLimit = this.maxlength !== undefined && this.value.length >= this.maxlength;\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        field: true,\n        error: Boolean(this.error),\n        disabled: this.disabled,\n      })}\n    >\n      <textarea\n        part=\"control\"\n        name=${this.name || nothing}\n        rows=${this.rows}\n        maxlength=${this.maxlength ?? nothing}\n        placeholder=${this.placeholder || nothing}\n        aria-label=${this.label || nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        @input=${this.onInput}\n        @change=${this.onChange}\n      ></textarea>\n\n      ${\n        this.error || showCounter\n          ? html`<div class=\"meta\">\n              ${\n                this.error\n                  ? html`<span class=\"error-icon\" title=${this.error}>\n                      <kt-icon name=\"circle-alert\" size=\"18\" label=${this.error}></kt-icon>\n                    </span>`\n                  : nothing\n              }\n              ${\n                showCounter\n                  ? html`<span\n                      part=\"counter\"\n                      class=${classMap({ counter: true, 'at-limit': atLimit })}\n                      aria-live=\"polite\"\n                    >\n                      ${this.value.length} / ${this.maxlength}\n                    </span>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-textarea', KtTextarea);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-textarea': KtTextarea;\n  }\n}\n"],"names":["KtTextarea","KtElement","css","attachFormInternals","setFormValue","changed","missing","setValidity","state","options","event","emit","showCounter","atLimit","html","classMap","nothing","live","__decorateClass","query","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-textarea.js","sources":["../../../../src/components/forms/kt-textarea/kt-textarea.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query } 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 } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport '../../core/kt-icon/kt-icon.js';\n\n/**\n * A multi-line text field, with the same borderless fill and outline states as\n * `<kt-input>`.\n *\n * A character counter appears whenever `maxlength` is set — the field tells\n * the user where the limit is before the browser silently stops accepting\n * keystrokes.\n *\n * @element kt-textarea\n *\n * @csspart base - The field container.\n * @csspart control - The native `<textarea>`.\n * @csspart counter - The character counter.\n *\n * @fires kt-input - On every keystroke. `detail: { value }`.\n * @fires kt-change - When the value is committed. `detail: { value }`.\n */\nexport class KtTextarea extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .field {\n        display: flex;\n        align-items: flex-start;\n        width: 100%;\n        min-height: var(--button-height);\n        background-color: var(--surface-field);\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        transition: outline-color var(--duration-instant);\n      }\n\n      .field:hover {\n        outline: var(--outline-width) solid var(--color-text-700);\n      }\n      .field:focus-within {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n\n      .error,\n      .error:hover,\n      .error:focus-within {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n      .error textarea {\n        color: var(--color-danger-text);\n      }\n\n      .disabled {\n        background-color: var(--color-dark-14);\n        pointer-events: none;\n      }\n      .disabled textarea {\n        color: var(--text-disabled);\n      }\n\n      textarea {\n        width: 100%;\n        min-height: calc(var(--button-height) - var(--gap-element) * 2);\n        padding: var(--text-area-padding);\n        color: var(--text-body);\n        font: var(--font-input);\n        background: transparent;\n        border: none;\n        outline: none;\n        resize: none;\n      }\n\n      :host([resize='vertical']) textarea {\n        resize: vertical;\n      }\n\n      textarea::placeholder {\n        color: var(--text-muted);\n      }\n\n      .meta {\n        display: flex;\n        flex: none;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--gap-element);\n        margin: 10px var(--button-padding-x) 0 0;\n      }\n\n      .counter {\n        color: var(--color-text-700);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n        white-space: nowrap;\n      }\n\n      .counter.at-limit {\n        color: var(--color-danger-text);\n      }\n\n      .error-icon {\n        display: flex;\n        color: var(--color-danger-text);\n      }\n    `,\n  ];\n\n  @query('textarea')\n  private control!: HTMLTextAreaElement;\n\n  private internals: UsableInternals | null = null;\n  private defaultValue = '';\n\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  name = '';\n\n  @property({ type: String })\n  placeholder = '';\n\n  @property({ type: Number })\n  rows = 3;\n\n  @property({ type: Number })\n  maxlength?: number;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /** Error message. A non-empty value puts the field in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  /** Accessible name, when no `<kt-label-input>` wraps the field. */\n  @property({ type: String })\n  label = '';\n\n  /**\n   * Whether the reader may drag the field taller.\n   *\n   * Off by default, as in the rest of Kanto: the grip is drawn by the operating\n   * system, lands on the field's rounded corner and belongs to no design\n   * system — and a field the layout sized is not usually the reader's to\n   * resize. Turn it on where the content genuinely varies.\n   */\n  @property({ type: String, reflect: true })\n  resize: 'vertical' | 'none' = 'none';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    setFormValue(this.internals, this.value);\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);\n\n      const missing = this.required && this.value.length === 0;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? 'This field is required.' : ''),\n      );\n    }\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.control?.focus(options);\n  }\n\n  override blur(): void {\n    this.control?.blur();\n  }\n\n  private onInput(event: Event): void {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    emit(this, 'kt-input', { value: this.value });\n  }\n\n  private onChange(event: Event): void {\n    event.stopPropagation();\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  override render(): TemplateResult {\n    const showCounter = this.maxlength !== undefined;\n    const atLimit = this.maxlength !== undefined && this.value.length >= this.maxlength;\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        field: true,\n        error: Boolean(this.error),\n        disabled: this.disabled,\n      })}\n    >\n      ${\n        this.error\n          ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n          : nothing\n      }\n      <textarea\n        part=\"control\"\n        name=${this.name || nothing}\n        rows=${this.rows}\n        maxlength=${this.maxlength ?? nothing}\n        placeholder=${this.placeholder || nothing}\n        aria-label=${this.label || nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-describedby=${this.error ? 'error-message' : nothing}\n        .value=${live(this.value)}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        @input=${this.onInput}\n        @change=${this.onChange}\n      ></textarea>\n\n      ${\n        this.error || showCounter\n          ? html`<div class=\"meta\">\n              ${\n                this.error\n                  ? html`<span class=\"error-icon\" title=${this.error}>\n                      <kt-icon name=\"circle-alert\" size=\"18\" label=${this.error}></kt-icon>\n                    </span>`\n                  : nothing\n              }\n              ${\n                showCounter\n                  ? html`<span\n                      part=\"counter\"\n                      class=${classMap({ counter: true, 'at-limit': atLimit })}\n                      aria-live=\"polite\"\n                    >\n                      ${this.value.length} / ${this.maxlength}\n                    </span>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-textarea', KtTextarea);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-textarea': KtTextarea;\n  }\n}\n"],"names":["KtTextarea","KtElement","css","attachFormInternals","setFormValue","changed","missing","setValidity","state","options","event","emit","showCounter","atLimit","html","classMap","nothing","live","__decorateClass","query","property","defineElement"],"mappings":"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"}

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

@@ -1,6 +1,6 @@
-import { css as n, nothing as d, html as u } from "lit";
+import { css as d, nothing as h, html as u } from "lit";
 import { property as r } from "lit/decorators.js";
-import { K as h, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as n, d as b } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
 import { a as m, s as g } from "../../../chunks/form-control-CxjBTt1c.js";
 var k = Object.defineProperty, s = (i, t, l, v) => {
@@ -8,7 +8,7 @@ var k = Object.defineProperty, s = (i, t, l, v) => {
     (c = i[o]) && (a = c(t, l, a) || a);
   return a && k(t, l, a), a;
 };
-class e extends h {
+class e extends n {
   constructor() {
     super(...arguments), this.internals = null, this.defaultChecked = !1, this.checked = !1, this.disabled = !1, this.size = "medium", this.name = "", this.value = "on", this.label = "";
   }
@@ -17,8 +17,8 @@ class e extends h {
   }
   static {
     this.styles = [
-      h.styles,
-      n`
+      n.styles,
+      d`
       :host {
         display: inline-flex;
         align-items: center;
@@ -134,7 +134,8 @@ class e extends h {
         type="button"
         role="switch"
         aria-checked=${this.checked ? "true" : "false"}
-        aria-label=${this.label || d}
+        aria-label=${this.label || h}
+        aria-labelledby=${this.label ? h : "label"}
         ?disabled=${this.disabled}
         @click=${this.toggle}
       >
@@ -142,7 +143,7 @@ class e extends h {
           <span part="thumb" class="thumb"></span>
         </span>
       </button>
-      <span class="label" @click=${this.toggle}><slot></slot></span>`;
+      <span id="label" class="label" @click=${this.toggle}><slot></slot></span>`;
   }
 }
 s([

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

@@ -1 +1 @@
-{"version":3,"file":"kt-toggle.js","sources":["../../../../src/components/forms/kt-toggle/kt-toggle.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { attachFormInternals, setFormValue, type UsableInternals } from '#internal/form-control';\n\nexport type KtToggleSize = 'small' | 'medium' | 'large';\n\n/**\n * An on/off switch.\n *\n * Sized off the button heights so a toggle lines up with the controls beside\n * it: the track is 1.8× the field height, the thumb is inset by 12% of it.\n * Change `--button-height` and the switch follows.\n *\n * @element kt-toggle\n *\n * @slot - Optional label, rendered beside the switch and clickable.\n *\n * @csspart base - The button carrying `role=\"switch\"`.\n * @csspart track - The track.\n * @csspart thumb - The sliding thumb.\n *\n * @fires kt-change - The state changed. `detail: { checked }`.\n *\n * @example\n * ```html\n * <kt-toggle checked>Notifications</kt-toggle>\n * <kt-toggle size=\"small\" disabled></kt-toggle>\n * ```\n */\nexport class KtToggle extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--gap-button);\n\n        /* The whole switch derives from the field height, so it keeps its\n           proportions at every breakpoint and every size. */\n        --switch-height: var(--button-height);\n        --switch-inset: calc(var(--switch-height) * 0.12);\n        --thumb-size: calc(var(--switch-height) - var(--switch-inset) * 2);\n      }\n\n      :host([size='small']) {\n        --switch-height: var(--button-height-small);\n      }\n      :host([size='large']) {\n        --switch-height: var(--button-height-large);\n      }\n\n      button {\n        display: inline-flex;\n        margin: 0;\n        padding: 0;\n        background: transparent;\n        border: none;\n        outline: none;\n        appearance: none;\n        cursor: pointer;\n      }\n\n      button:disabled {\n        cursor: not-allowed;\n      }\n\n      button:focus-visible .track {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .track {\n        position: relative;\n        display: inline-block;\n        width: calc(var(--switch-height) * 1.8);\n        height: var(--switch-height);\n        background-color: var(--color-dark-24);\n        border-radius: var(--radius-full);\n        transition: background-color var(--duration-instant);\n      }\n\n      button[aria-checked='true'] .track {\n        background-color: var(--color-primary-base);\n      }\n\n      .thumb {\n        position: absolute;\n        top: var(--switch-inset);\n        left: var(--switch-inset);\n        width: var(--thumb-size);\n        height: var(--thumb-size);\n        background-color: var(--color-white);\n        border-radius: var(--radius-full);\n        transition: left var(--duration-normal);\n      }\n\n      button[aria-checked='true'] .thumb {\n        left: calc(100% - var(--switch-inset) - var(--thumb-size));\n      }\n\n      :host([disabled]) .track {\n        background-color: var(--color-dark-22);\n      }\n      :host([disabled]) .thumb {\n        background-color: var(--color-text-500);\n      }\n\n      .label {\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        cursor: pointer;\n      }\n\n      :host([disabled]) .label {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  private internals: UsableInternals | null = null;\n  private defaultChecked = false;\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, reflect: true })\n  size: KtToggleSize = 'medium';\n\n  @property({ type: String })\n  name = '';\n\n  /** Submitted when checked, as for a native checkbox. */\n  @property({ type: String })\n  value = 'on';\n\n  /** Accessible name, when nothing is slotted. */\n  @property({ type: String })\n  label = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('checked') || changed.has('value')) this.syncFormValue();\n  }\n\n  private syncFormValue(): void {\n    // An unchecked checkbox contributes nothing to a submission, not an empty\n    // string — null is how ElementInternals says \"leave me out\".\n    setFormValue(this.internals, this.checked ? this.value : null);\n  }\n\n  formResetCallback(): void {\n    this.checked = this.defaultChecked;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.checked = state === this.value;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector('button')?.focus(options);\n  }\n\n  private toggle(): void {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    emit(this, 'kt-change', { checked: this.checked });\n  }\n\n  override render(): TemplateResult {\n    return html`<button\n        part=\"base\"\n        type=\"button\"\n        role=\"switch\"\n        aria-checked=${this.checked ? 'true' : 'false'}\n        aria-label=${this.label || nothing}\n        ?disabled=${this.disabled}\n        @click=${this.toggle}\n      >\n        <span part=\"track\" class=\"track\">\n          <span part=\"thumb\" class=\"thumb\"></span>\n        </span>\n      </button>\n      <span class=\"label\" @click=${this.toggle}><slot></slot></span>`;\n  }\n}\n\ndefineElement('kt-toggle', KtToggle);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toggle': KtToggle;\n  }\n}\n"],"names":["KtToggle","KtElement","css","attachFormInternals","changed","setFormValue","state","options","emit","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AA+BO,MAAMA,UAAiBC,EAAU;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8FL,KAAQ,YAAoC,MAC5C,KAAQ,iBAAiB,IAGzB,KAAA,UAAU,IAGV,KAAA,WAAW,IAGX,KAAA,OAAqB,UAGrB,KAAA,OAAO,IAIP,KAAA,QAAQ,MAIR,KAAA,QAAQ;AAAA,EAAA;AAAA,EAlHR,OAAA;AAAA,SAAgB,iBAAiB;AAAA,EAAA;AAAA,EAEjC,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAuFF;AAAA,EAyBS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,cAAcC,EAAoB,IAAI,GAC3C,KAAK,iBAAiB,KAAK,SAC3B,KAAK,cAAA;AAAA,EACP;AAAA,EAES,WAAWC,GAAqC;AACvD,KAAIA,EAAQ,IAAI,SAAS,KAAKA,EAAQ,IAAI,OAAO,MAAG,KAAK,cAAA;AAAA,EAC3D;AAAA,EAEQ,gBAAsB;AAG5B,IAAAC,EAAa,KAAK,WAAW,KAAK,UAAU,KAAK,QAAQ,IAAI;AAAA,EAC/D;AAAA,EAEA,oBAA0B;AACxB,SAAK,UAAU,KAAK;AAAA,EACtB;AAAA,EAEA,yBAAyBC,GAAqB;AAC5C,SAAK,UAAUA,MAAU,KAAK;AAAA,EAChC;AAAA,EAES,MAAMC,GAA8B;AAC3C,SAAK,YAAY,cAAc,QAAQ,GAAG,MAAMA,CAAO;AAAA,EACzD;AAAA,EAEQ,SAAe;AACrB,IAAI,KAAK,aACT,KAAK,UAAU,CAAC,KAAK,SACrBC,EAAK,MAAM,aAAa,EAAE,SAAS,KAAK,SAAS;AAAA,EACnD;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA;AAAA;AAAA;AAAA,uBAIY,KAAK,UAAU,SAAS,OAAO;AAAA,qBACjC,KAAK,SAASC,CAAO;AAAA,oBACtB,KAAK,QAAQ;AAAA,iBAChB,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,mCAMO,KAAK,MAAM;AAAA,EAC5C;AACF;AAtEEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjG/BZ,EAkGX,WAAA,SAAA;AAGAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GApG/BZ,EAqGX,WAAA,UAAA;AAGAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAvG9BZ,EAwGX,WAAA,MAAA;AAGAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1GfZ,EA2GX,WAAA,MAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA9GfZ,EA+GX,WAAA,OAAA;AAIAW,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlHfZ,EAmHX,WAAA,OAAA;AAuDFa,EAAc,aAAab,CAAQ;"}
+{"version":3,"file":"kt-toggle.js","sources":["../../../../src/components/forms/kt-toggle/kt-toggle.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { attachFormInternals, setFormValue, type UsableInternals } from '#internal/form-control';\n\nexport type KtToggleSize = 'small' | 'medium' | 'large';\n\n/**\n * An on/off switch.\n *\n * Sized off the button heights so a toggle lines up with the controls beside\n * it: the track is 1.8× the field height, the thumb is inset by 12% of it.\n * Change `--button-height` and the switch follows.\n *\n * @element kt-toggle\n *\n * @slot - Optional label, rendered beside the switch and clickable.\n *\n * @csspart base - The button carrying `role=\"switch\"`.\n * @csspart track - The track.\n * @csspart thumb - The sliding thumb.\n *\n * @fires kt-change - The state changed. `detail: { checked }`.\n *\n * @example\n * ```html\n * <kt-toggle checked>Notifications</kt-toggle>\n * <kt-toggle size=\"small\" disabled></kt-toggle>\n * ```\n */\nexport class KtToggle extends KtElement {\n  static readonly formAssociated = true;\n\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-flex;\n        align-items: center;\n        gap: var(--gap-button);\n\n        /* The whole switch derives from the field height, so it keeps its\n           proportions at every breakpoint and every size. */\n        --switch-height: var(--button-height);\n        --switch-inset: calc(var(--switch-height) * 0.12);\n        --thumb-size: calc(var(--switch-height) - var(--switch-inset) * 2);\n      }\n\n      :host([size='small']) {\n        --switch-height: var(--button-height-small);\n      }\n      :host([size='large']) {\n        --switch-height: var(--button-height-large);\n      }\n\n      button {\n        display: inline-flex;\n        margin: 0;\n        padding: 0;\n        background: transparent;\n        border: none;\n        outline: none;\n        appearance: none;\n        cursor: pointer;\n      }\n\n      button:disabled {\n        cursor: not-allowed;\n      }\n\n      button:focus-visible .track {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .track {\n        position: relative;\n        display: inline-block;\n        width: calc(var(--switch-height) * 1.8);\n        height: var(--switch-height);\n        background-color: var(--color-dark-24);\n        border-radius: var(--radius-full);\n        transition: background-color var(--duration-instant);\n      }\n\n      button[aria-checked='true'] .track {\n        background-color: var(--color-primary-base);\n      }\n\n      .thumb {\n        position: absolute;\n        top: var(--switch-inset);\n        left: var(--switch-inset);\n        width: var(--thumb-size);\n        height: var(--thumb-size);\n        background-color: var(--color-white);\n        border-radius: var(--radius-full);\n        transition: left var(--duration-normal);\n      }\n\n      button[aria-checked='true'] .thumb {\n        left: calc(100% - var(--switch-inset) - var(--thumb-size));\n      }\n\n      :host([disabled]) .track {\n        background-color: var(--color-dark-22);\n      }\n      :host([disabled]) .thumb {\n        background-color: var(--color-text-500);\n      }\n\n      .label {\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        cursor: pointer;\n      }\n\n      :host([disabled]) .label {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n    `,\n  ];\n\n  private internals: UsableInternals | null = null;\n  private defaultChecked = false;\n\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, reflect: true })\n  size: KtToggleSize = 'medium';\n\n  @property({ type: String })\n  name = '';\n\n  /** Submitted when checked, as for a native checkbox. */\n  @property({ type: String })\n  value = 'on';\n\n  /** Accessible name, when nothing is slotted. */\n  @property({ type: String })\n  label = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultChecked = this.checked;\n    this.syncFormValue();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('checked') || changed.has('value')) this.syncFormValue();\n  }\n\n  private syncFormValue(): void {\n    // An unchecked checkbox contributes nothing to a submission, not an empty\n    // string — null is how ElementInternals says \"leave me out\".\n    setFormValue(this.internals, this.checked ? this.value : null);\n  }\n\n  formResetCallback(): void {\n    this.checked = this.defaultChecked;\n  }\n\n  formStateRestoreCallback(state: string): void {\n    this.checked = state === this.value;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector('button')?.focus(options);\n  }\n\n  private toggle(): void {\n    if (this.disabled) return;\n    this.checked = !this.checked;\n    emit(this, 'kt-change', { checked: this.checked });\n  }\n\n  override render(): TemplateResult {\n    return html`<button\n        part=\"base\"\n        type=\"button\"\n        role=\"switch\"\n        aria-checked=${this.checked ? 'true' : 'false'}\n        aria-label=${this.label || nothing}\n        aria-labelledby=${this.label ? nothing : 'label'}\n        ?disabled=${this.disabled}\n        @click=${this.toggle}\n      >\n        <span part=\"track\" class=\"track\">\n          <span part=\"thumb\" class=\"thumb\"></span>\n        </span>\n      </button>\n      <span id=\"label\" class=\"label\" @click=${this.toggle}><slot></slot></span>`;\n  }\n}\n\ndefineElement('kt-toggle', KtToggle);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-toggle': KtToggle;\n  }\n}\n"],"names":["KtToggle","KtElement","css","attachFormInternals","changed","setFormValue","state","options","emit","html","nothing","__decorateClass","property","defineElement"],"mappings":"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"}

package/dist/components/navigation/kt-breadcrumb/kt-breadcrumb.js

@@ -1,6 +1,6 @@
 import { css as d, nothing as f, html as s } from "lit";
 import { property as c } from "lit/decorators.js";
-import { K as p, d as u } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as p, d as u } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as h } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../../core/kt-icon/kt-icon.js";
 var b = Object.defineProperty, m = (o, t, e, a) => {

package/dist/components/navigation/kt-header/kt-header.js

@@ -1,6 +1,6 @@
 import { css as h, nothing as c, html as u } from "lit";
 import { state as m, property as n } from "lit/decorators.js";
-import { K as d, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as d, d as b } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
 import "../../core/kt-button/kt-button.js";
 var f = Object.defineProperty, a = (r, o, s, g) => {

package/dist/components/navigation/kt-page-header/kt-page-header.js

@@ -1,19 +1,19 @@
-import { css as d, html as t, nothing as l } from "lit";
-import { property as o } from "lit/decorators.js";
-import { K as c, d as g } from "../../../chunks/kt-element-CcMLO5e8.js";
-var f = Object.defineProperty, s = (a, r, p, v) => {
-  for (var e = void 0, n = a.length - 1, h; n >= 0; n--)
-    (h = a[n]) && (e = h(r, p, e) || e);
+import { css as c, html as t, nothing as l } from "lit";
+import { property as s } from "lit/decorators.js";
+import { K as h, d as g } from "../../../chunks/kt-element-B_jjQDhg.js";
+var f = Object.defineProperty, o = (a, r, p, v) => {
+  for (var e = void 0, n = a.length - 1, d; n >= 0; n--)
+    (d = a[n]) && (e = d(r, p, e) || e);
   return e && f(r, p, e), e;
 };
-class i extends c {
+class i extends h {
   constructor() {
     super(...arguments), this.eyebrow = "", this.heading = "", this.description = "", this.level = "page";
   }
   static {
     this.styles = [
-      c.styles,
-      d`
+      h.styles,
+      c`
       :host {
         display: block;
       }
@@ -35,7 +35,7 @@ class i extends c {
       }
 
       .eyebrow {
-        color: var(--color-text-500);
+        color: var(--text-muted);
         font: var(--font-title-overline);
         letter-spacing: var(--letter-spacing-overline);
         text-transform: uppercase;
@@ -92,17 +92,17 @@ class i extends c {
     </div>`;
   }
 }
-s([
-  o({ type: String })
+o([
+  s({ type: String })
 ], i.prototype, "eyebrow");
-s([
-  o({ type: String })
+o([
+  s({ type: String })
 ], i.prototype, "heading");
-s([
-  o({ type: String })
+o([
+  s({ type: String })
 ], i.prototype, "description");
-s([
-  o({ type: String, reflect: !0 })
+o([
+  s({ type: String, reflect: !0 })
 ], i.prototype, "level");
 g("kt-page-header", i);
 export {

package/dist/components/navigation/kt-page-header/kt-page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-page-header.js","sources":["../../../../src/components/navigation/kt-page-header/kt-page-header.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\n/**\n * The block every screen opens with: an overline, a title, a sentence, and the\n * actions that belong to the page rather than to anything on it.\n *\n * It exists because it was being rebuilt on every screen, and the copies drifted\n * — different heading levels, different gaps, actions sometimes above and\n * sometimes beside. Those are not decisions worth making twice.\n *\n * At `level=\"section\"` the same block introduces a region inside a page: a\n * smaller heading, and the action is usually a link onward rather than a button.\n *\n * @element kt-page-header\n *\n * @slot - Extra content under the description.\n * @slot actions - Buttons or a link, trailing on wide screens.\n *\n * @csspart base - The container.\n * @csspart heading - The heading element.\n *\n * @example\n * ```html\n * <kt-page-header eyebrow=\"Dashboard\" heading=\"Good evening\"\n *                 description=\"Recent files, integrations and activity.\">\n *   <kt-button slot=\"actions\" icon=\"plus\">New document</kt-button>\n * </kt-page-header>\n *\n * <kt-page-header level=\"section\" heading=\"Recently opened\">\n *   <a slot=\"actions\" href=\"#/files\">See all files</a>\n * </kt-page-header>\n * ```\n */\nexport class KtPageHeader extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .header {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: 16px;\n      }\n\n      .copy {\n        display: flex;\n        flex: 1 1 320px;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 0;\n      }\n\n      .eyebrow {\n        color: var(--color-text-500);\n        font: var(--font-title-overline);\n        letter-spacing: var(--letter-spacing-overline);\n        text-transform: uppercase;\n      }\n\n      h1 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h1);\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h5);\n      }\n\n      .description {\n        max-width: 72ch;\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        line-height: 1.6;\n      }\n\n      .actions {\n        display: flex;\n        flex: none;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      /* A section header sits tight against what it introduces. */\n      :host([level='section']) .header {\n        align-items: center;\n      }\n\n      :host([level='section']) .description {\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  /** Small uppercase label above the heading — \"Dashboard\", \"Settings\". */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** `page` renders an `<h1>`; `section` an `<h2>` at body scale. */\n  @property({ type: String, reflect: true })\n  level: 'page' | 'section' = 'page';\n\n  override render(): TemplateResult {\n    const title = this.heading\n      ? this.level === 'section'\n        ? html`<h2 part=\"heading\">${this.heading}</h2>`\n        : html`<h1 part=\"heading\">${this.heading}</h1>`\n      : nothing;\n\n    return html`<div part=\"base\" class=\"header\">\n      <div class=\"copy\">\n        ${this.eyebrow ? html`<span class=\"eyebrow\">${this.eyebrow}</span>` : nothing} ${title}\n        ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n        <slot></slot>\n      </div>\n      <div class=\"actions\"><slot name=\"actions\"></slot></div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-page-header', KtPageHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-page-header': KtPageHeader;\n  }\n}\n"],"names":["KtPageHeader","KtElement","css","title","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;AAmCO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwEL,KAAA,UAAU,IAGV,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,QAA4B;AAAA,EAAA;AAAA,EAjF5B,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAiEF;AAAA,EAgBS,SAAyB;AAChC,UAAMC,IAAQ,KAAK,UACf,KAAK,UAAU,YACbC,uBAA0B,KAAK,OAAO,UACtCA,uBAA0B,KAAK,OAAO,UACxCC;AAEJ,WAAOD;AAAA;AAAA,UAED,KAAK,UAAUA,0BAA6B,KAAK,OAAO,YAAYC,CAAO,IAAIF,CAAK;AAAA,UACpF,KAAK,cAAcC,2BAA8B,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzF;AACF;AA5BEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvEfP,EAwEX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfP,EA2EX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7EfP,EA8EX,WAAA,aAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BP,EAkFX,WAAA,OAAA;AAoBFQ,EAAc,kBAAkBR,CAAY;"}
+{"version":3,"file":"kt-page-header.js","sources":["../../../../src/components/navigation/kt-page-header/kt-page-header.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\n/**\n * The block every screen opens with: an overline, a title, a sentence, and the\n * actions that belong to the page rather than to anything on it.\n *\n * It exists because it was being rebuilt on every screen, and the copies drifted\n * — different heading levels, different gaps, actions sometimes above and\n * sometimes beside. Those are not decisions worth making twice.\n *\n * At `level=\"section\"` the same block introduces a region inside a page: a\n * smaller heading, and the action is usually a link onward rather than a button.\n *\n * @element kt-page-header\n *\n * @slot - Extra content under the description.\n * @slot actions - Buttons or a link, trailing on wide screens.\n *\n * @csspart base - The container.\n * @csspart heading - The heading element.\n *\n * @example\n * ```html\n * <kt-page-header eyebrow=\"Dashboard\" heading=\"Good evening\"\n *                 description=\"Recent files, integrations and activity.\">\n *   <kt-button slot=\"actions\" icon=\"plus\">New document</kt-button>\n * </kt-page-header>\n *\n * <kt-page-header level=\"section\" heading=\"Recently opened\">\n *   <a slot=\"actions\" href=\"#/files\">See all files</a>\n * </kt-page-header>\n * ```\n */\nexport class KtPageHeader extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .header {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: 16px;\n      }\n\n      .copy {\n        display: flex;\n        flex: 1 1 320px;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 0;\n      }\n\n      .eyebrow {\n        color: var(--text-muted);\n        font: var(--font-title-overline);\n        letter-spacing: var(--letter-spacing-overline);\n        text-transform: uppercase;\n      }\n\n      h1 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h1);\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h5);\n      }\n\n      .description {\n        max-width: 72ch;\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        line-height: 1.6;\n      }\n\n      .actions {\n        display: flex;\n        flex: none;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      /* A section header sits tight against what it introduces. */\n      :host([level='section']) .header {\n        align-items: center;\n      }\n\n      :host([level='section']) .description {\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  /** Small uppercase label above the heading — \"Dashboard\", \"Settings\". */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** `page` renders an `<h1>`; `section` an `<h2>` at body scale. */\n  @property({ type: String, reflect: true })\n  level: 'page' | 'section' = 'page';\n\n  override render(): TemplateResult {\n    const title = this.heading\n      ? this.level === 'section'\n        ? html`<h2 part=\"heading\">${this.heading}</h2>`\n        : html`<h1 part=\"heading\">${this.heading}</h1>`\n      : nothing;\n\n    return html`<div part=\"base\" class=\"header\">\n      <div class=\"copy\">\n        ${this.eyebrow ? html`<span class=\"eyebrow\">${this.eyebrow}</span>` : nothing} ${title}\n        ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n        <slot></slot>\n      </div>\n      <div class=\"actions\"><slot name=\"actions\"></slot></div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-page-header', KtPageHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-page-header': KtPageHeader;\n  }\n}\n"],"names":["KtPageHeader","KtElement","css","title","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;AAmCO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwEL,KAAA,UAAU,IAGV,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,QAA4B;AAAA,EAAA;AAAA,EAjF5B,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAiEF;AAAA,EAgBS,SAAyB;AAChC,UAAMC,IAAQ,KAAK,UACf,KAAK,UAAU,YACbC,uBAA0B,KAAK,OAAO,UACtCA,uBAA0B,KAAK,OAAO,UACxCC;AAEJ,WAAOD;AAAA;AAAA,UAED,KAAK,UAAUA,0BAA6B,KAAK,OAAO,YAAYC,CAAO,IAAIF,CAAK;AAAA,UACpF,KAAK,cAAcC,2BAA8B,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzF;AACF;AA5BEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvEfP,EAwEX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfP,EA2EX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7EfP,EA8EX,WAAA,aAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BP,EAkFX,WAAA,OAAA;AAoBFQ,EAAc,kBAAkBR,CAAY;"}

package/dist/components/navigation/kt-segmented-control/kt-segmented-control.d.ts

@@ -1,4 +1,4 @@
-import { type TemplateResult } from 'lit';
+import { type PropertyValues, type TemplateResult } from 'lit';
 import { KtElement } from '#internal/kt-element';
 import '../../core/kt-icon/kt-icon.js';
 export type KtSegmentedSize = 'small' | 'medium' | 'large';
@@ -37,8 +37,11 @@ export interface KtSegmentedOption {
  * ```
  */
 export declare class KtSegmentedControl extends KtElement {
+    static readonly formAssociated = true;
     static styles: import("lit").CSSResultGroup[];
     private segments;
+    private internals;
+    private defaultValue;
     options: readonly KtSegmentedOption[];
     value: string | number | null;
     size: KtSegmentedSize;
@@ -46,6 +49,12 @@ export declare class KtSegmentedControl extends KtElement {
     disabled: boolean;
     /** Accessible name for the group. */
     label: string;
+    name: string;
+    required: boolean;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    formResetCallback(): void;
+    formStateRestoreCallback(state: string): void;
     private get selectedIndex();
     private choose;
     /**