kanto-ds 1.3.0 → 1.5.1

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

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

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

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

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

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

package/dist/components/forms/kt-radio-group/kt-radio-group.js

@@ -0,0 +1,279 @@
+import { css as b, nothing as d, html as p } from "lit";
+import { property as a, queryAssignedElements as y, state as m } from "lit/decorators.js";
+import { K as u, d as v } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as g } from "../../../chunks/events-r51msXNf.js";
+import { a as k, s as w, b as x } from "../../../chunks/form-control-B74_EHtG.js";
+import { s as f } from "../../../chunks/index-STEEvEP7.js";
+var D = Object.defineProperty, i = (c, e, t, l) => {
+  for (var r = void 0, o = c.length - 1, h; o >= 0; o--)
+    (h = c[o]) && (r = h(e, t, r) || r);
+  return r && D(e, t, r), r;
+};
+class n extends u {
+  constructor() {
+    super(...arguments), this.value = "", this.disabled = !1, this.checked = !1, this.tabbable = !1, this.invalid = !1, this.groupDisabled = !1;
+  }
+  static {
+    this.styles = [
+      u.styles,
+      b`
+      :host {
+        display: block;
+        --radio-size: calc(var(--button-height) * 0.45);
+      }
+
+      .radio {
+        display: inline-flex;
+        align-items: flex-start;
+        gap: var(--gap-button);
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        outline: none;
+        cursor: pointer;
+      }
+
+      .circle {
+        position: relative;
+        flex: none;
+        width: var(--radio-size);
+        height: var(--radio-size);
+        margin-top: calc((1lh - var(--radio-size)) / 2);
+        background-color: var(--surface-field);
+        border: var(--border-width) solid var(--border-field);
+        border-radius: var(--radius-full);
+        transition: border-color var(--duration-instant);
+      }
+
+      /* The dot: a fill inset by a third of the circle. */
+      .circle::after {
+        content: '';
+        position: absolute;
+        inset: 22%;
+        border-radius: var(--radius-full);
+        background-color: var(--color-primary-base);
+        transform: scale(0);
+        transition: transform var(--duration-fast);
+      }
+
+      .radio:hover .circle {
+        border-color: var(--text-muted);
+      }
+
+      .radio:focus-visible .circle {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .radio[aria-checked='true'] .circle {
+        border-color: var(--color-primary-base);
+      }
+      .radio[aria-checked='true'] .circle::after {
+        transform: scale(1);
+      }
+
+      :host([invalid]) .circle {
+        border-color: var(--color-danger-base);
+      }
+
+      :host([disabled]) .radio,
+      :host([group-disabled]) .radio {
+        color: var(--text-disabled);
+        cursor: not-allowed;
+      }
+      :host([disabled]) .circle,
+      :host([group-disabled]) .circle {
+        background-color: var(--color-dark-22);
+        border-color: var(--color-dark-24);
+      }
+      :host([disabled]) .circle::after,
+      :host([group-disabled]) .circle::after {
+        background-color: var(--text-disabled);
+      }
+    `
+    ];
+  }
+  get inactive() {
+    return this.disabled || this.groupDisabled;
+  }
+  focus(e) {
+    this.shadowRoot?.querySelector(".radio")?.focus(e);
+  }
+  render() {
+    return p`<div
+      part="base"
+      class="radio"
+      role="radio"
+      aria-checked=${this.checked ? "true" : "false"}
+      aria-disabled=${this.inactive ? "true" : d}
+      tabindex=${this.tabbable && !this.inactive ? 0 : -1}
+    >
+      <span part="circle" class="circle"></span>
+      <span class="text"><slot></slot></span>
+    </div>`;
+  }
+}
+i([
+  a({ type: String, reflect: !0 })
+], n.prototype, "value");
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled");
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "checked");
+i([
+  a({ type: Boolean, attribute: !1 })
+], n.prototype, "tabbable");
+i([
+  a({ type: Boolean, reflect: !0 })
+], n.prototype, "invalid");
+i([
+  a({ type: Boolean, reflect: !0, attribute: "group-disabled" })
+], n.prototype, "groupDisabled");
+class s extends u {
+  constructor() {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.value = null, this.name = "", this.label = "", this.disabled = !1, this.formDisabled = !1, this.required = !1, this.orientation = "vertical", this.error = "", this.syncRadios = () => {
+      const e = this.enabled(), l = e.find((r) => r.value === this.value) ?? e[0];
+      for (const r of this.radios)
+        r.checked = r.value === this.value, r.tabbable = r === l, r.invalid = !!this.error, r.groupDisabled = this.inactive;
+    }, this.onClick = (e) => {
+      const t = e.composedPath().find((l) => l instanceof n);
+      !t || !this.enabled().includes(t) || (this.choose(t), t.focus());
+    }, this.onKeyDown = (e) => {
+      const t = this.enabled();
+      if (t.length === 0) return;
+      const l = e.composedPath().find((h) => h instanceof n), r = l ? t.indexOf(l) : -1;
+      let o;
+      if (e.key === "ArrowDown" || e.key === "ArrowRight")
+        o = t[(r + 1) % t.length];
+      else if (e.key === "ArrowUp" || e.key === "ArrowLeft")
+        o = t[(r - 1 + t.length) % t.length];
+      else if (e.key === " " && l && r >= 0)
+        o = l;
+      else
+        return;
+      e.preventDefault(), o && (this.choose(o), this.updateComplete.then(() => o.focus()));
+    };
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      u.styles,
+      b`
+      :host {
+        display: block;
+      }
+
+      .group {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+      }
+
+      :host([orientation='horizontal']) .group {
+        flex-direction: row;
+        flex-wrap: wrap;
+        column-gap: var(--gap-card);
+      }
+    `
+    ];
+  }
+  /** Whether the control is off, by its own `disabled` or by its form. */
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= k(this), this.defaultValue = this.value, this.addEventListener("click", this.onClick), this.addEventListener("keydown", this.onKeyDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("click", this.onClick), this.removeEventListener("keydown", this.onKeyDown);
+  }
+  willUpdate(e) {
+    if (e.has("value") || e.has("required") || e.has("error") || this.stringsChanged(e)) {
+      w(this.internals, this.value);
+      const t = this.required && this.value === null;
+      x(
+        this.internals,
+        { valueMissing: t, customError: !!this.error },
+        this.error || (t ? f().selectOption : "")
+      );
+    }
+  }
+  updated() {
+    this.syncRadios();
+  }
+  formResetCallback() {
+    this.value = this.defaultValue;
+  }
+  /**
+   * Called by the platform when the control's disabled state changes — its
+   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+   */
+  formDisabledCallback(e) {
+    this.formDisabled = e;
+  }
+  formStateRestoreCallback(e) {
+    this.value = e;
+  }
+  focus(e) {
+    this.radios.find((t) => t.tabbable)?.focus(e);
+  }
+  enabled() {
+    return this.inactive ? [] : this.radios.filter((e) => !e.disabled);
+  }
+  choose(e) {
+    e.value !== this.value && (this.value = e.value, g(this, "kt-change", { value: this.value }));
+  }
+  render() {
+    return p`${this.error ? p`<span id="error-message" class="visually-hidden">${this.error}</span>` : d}
+      <div
+        part="base"
+        class="group"
+        role="radiogroup"
+        aria-label=${this.label || f().options}
+        aria-orientation=${this.orientation}
+        aria-required=${this.required ? "true" : d}
+        aria-invalid=${this.error ? "true" : d}
+        aria-disabled=${this.inactive ? "true" : d}
+        aria-describedby=${this.error ? "error-message" : d}
+      >
+        <slot @slotchange=${this.syncRadios}></slot>
+      </div>`;
+  }
+}
+i([
+  y({ selector: "kt-radio" })
+], s.prototype, "radios");
+i([
+  a({ type: String, reflect: !0 })
+], s.prototype, "value");
+i([
+  a({ type: String })
+], s.prototype, "name");
+i([
+  a({ type: String })
+], s.prototype, "label");
+i([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled");
+i([
+  m()
+], s.prototype, "formDisabled");
+i([
+  a({ type: Boolean, reflect: !0 })
+], s.prototype, "required");
+i([
+  a({ type: String, reflect: !0 })
+], s.prototype, "orientation");
+i([
+  a({ type: String, reflect: !0 })
+], s.prototype, "error");
+v("kt-radio", n);
+v("kt-radio-group", s);
+export {
+  n as KtRadio,
+  s as KtRadioGroup
+};
+//# sourceMappingURL=kt-radio-group.js.map

package/dist/components/forms/kt-radio-group/kt-radio-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-radio-group.js","sources":["../../../../src/components/forms/kt-radio-group/kt-radio-group.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.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 { strings } from '#internal/strings';\n\nexport type KtRadioGroupOrientation = 'vertical' | 'horizontal';\n\n/**\n * One option of a `<kt-radio-group>`.\n *\n * It draws itself and carries `role=\"radio\"`; the group owns the selection,\n * the tab stop and the keyboard. A `<kt-radio>` outside a group does nothing\n * useful.\n *\n * @element kt-radio\n *\n * @slot - The label.\n *\n * @csspart base - The `role=\"radio\"` row.\n * @csspart circle - The drawn circle.\n */\nexport class KtRadio extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        --radio-size: calc(var(--button-height) * 0.45);\n      }\n\n      .radio {\n        display: inline-flex;\n        align-items: flex-start;\n        gap: var(--gap-button);\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        outline: none;\n        cursor: pointer;\n      }\n\n      .circle {\n        position: relative;\n        flex: none;\n        width: var(--radio-size);\n        height: var(--radio-size);\n        margin-top: calc((1lh - var(--radio-size)) / 2);\n        background-color: var(--surface-field);\n        border: var(--border-width) solid var(--border-field);\n        border-radius: var(--radius-full);\n        transition: border-color var(--duration-instant);\n      }\n\n      /* The dot: a fill inset by a third of the circle. */\n      .circle::after {\n        content: '';\n        position: absolute;\n        inset: 22%;\n        border-radius: var(--radius-full);\n        background-color: var(--color-primary-base);\n        transform: scale(0);\n        transition: transform var(--duration-fast);\n      }\n\n      .radio:hover .circle {\n        border-color: var(--text-muted);\n      }\n\n      .radio:focus-visible .circle {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .radio[aria-checked='true'] .circle {\n        border-color: var(--color-primary-base);\n      }\n      .radio[aria-checked='true'] .circle::after {\n        transform: scale(1);\n      }\n\n      :host([invalid]) .circle {\n        border-color: var(--color-danger-base);\n      }\n\n      :host([disabled]) .radio,\n      :host([group-disabled]) .radio {\n        color: var(--text-disabled);\n        cursor: not-allowed;\n      }\n      :host([disabled]) .circle,\n      :host([group-disabled]) .circle {\n        background-color: var(--color-dark-22);\n        border-color: var(--color-dark-24);\n      }\n      :host([disabled]) .circle::after,\n      :host([group-disabled]) .circle::after {\n        background-color: var(--text-disabled);\n      }\n    `,\n  ];\n\n  /** Submitted by the group when this option is chosen. */\n  @property({ type: String, reflect: true })\n  value = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Set by the group. */\n  @property({ type: Boolean, reflect: true })\n  checked = false;\n\n  /** Set by the group: whether this option holds the group's one tab stop. */\n  @property({ type: Boolean, attribute: false })\n  tabbable = false;\n\n  /** Set by the group while it reports an error. */\n  @property({ type: Boolean, reflect: true })\n  invalid = false;\n\n  /** Set by the group while the whole group is disabled. */\n  @property({ type: Boolean, reflect: true, attribute: 'group-disabled' })\n  groupDisabled = false;\n\n  private get inactive(): boolean {\n    return this.disabled || this.groupDisabled;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.shadowRoot?.querySelector<HTMLElement>('.radio')?.focus(options);\n  }\n\n  override render(): TemplateResult {\n    return html`<div\n      part=\"base\"\n      class=\"radio\"\n      role=\"radio\"\n      aria-checked=${this.checked ? 'true' : 'false'}\n      aria-disabled=${this.inactive ? 'true' : nothing}\n      tabindex=${this.tabbable && !this.inactive ? 0 : -1}\n    >\n      <span part=\"circle\" class=\"circle\"></span>\n      <span class=\"text\"><slot></slot></span>\n    </div>`;\n  }\n}\n\n/**\n * One choice among a few, all visible at once.\n *\n * Reach for it over `<kt-select>` when there are few enough options to show\n * them all — seeing every option is the point — and over\n * `<kt-segmented-control>` when the options need a sentence each, or the\n * choice belongs in a form rather than a toolbar.\n *\n * Native radios cannot form a group across shadow roots, so this is the ARIA\n * radio group pattern: one tab stop for the whole group, arrow keys move and\n * select, disabled options are skipped.\n *\n * @element kt-radio-group\n *\n * @slot - The `<kt-radio>` options.\n *\n * @csspart base - The `role=\"radiogroup\"` container.\n *\n * @fires kt-change - An option was chosen. `detail: { value }`.\n *\n * @example\n * ```html\n * <kt-radio-group label=\"Billing\" name=\"billing\" value=\"monthly\">\n *   <kt-radio value=\"monthly\">Monthly</kt-radio>\n *   <kt-radio value=\"yearly\">Yearly — two months free</kt-radio>\n * </kt-radio-group>\n * ```\n */\nexport class KtRadioGroup 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      .group {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      :host([orientation='horizontal']) .group {\n        flex-direction: row;\n        flex-wrap: wrap;\n        column-gap: var(--gap-card);\n      }\n    `,\n  ];\n\n  @queryAssignedElements({ selector: 'kt-radio' })\n  private radios!: KtRadio[];\n\n  private internals: UsableInternals | null = null;\n  private defaultValue: string | null = null;\n\n  /** The chosen option's value, or `null`. */\n  @property({ type: String, reflect: true })\n  value: string | null = null;\n\n  @property({ type: String })\n  name = '';\n\n  /** Accessible name of the group. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */\n  @state()\n  private formDisabled = false;\n\n  /** Whether the control is off, by its own `disabled` or by its form. */\n  private get inactive(): boolean {\n    return this.disabled || this.formDisabled;\n  }\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  @property({ type: String, reflect: true })\n  orientation: KtRadioGroupOrientation = 'vertical';\n\n  /** Error message. A non-empty value puts the group in its error state. */\n  @property({ type: String, reflect: true })\n  error = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    // On the host: the radios are slotted light-DOM children.\n    this.addEventListener('click', this.onClick);\n    this.addEventListener('keydown', this.onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('click', this.onClick);\n    this.removeEventListener('keydown', this.onKeyDown);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      this.stringsChanged(changed)\n    ) {\n      setFormValue(this.internals, this.value);\n\n      const missing = this.required && this.value === null;\n      setValidity(\n        this.internals,\n        { valueMissing: missing, customError: Boolean(this.error) },\n        this.error || (missing ? strings().selectOption : ''),\n      );\n    }\n  }\n\n  override updated(): void {\n    this.syncRadios();\n  }\n\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n  }\n\n  /**\n   * Called by the platform when the control's disabled state changes — its\n   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n   */\n  formDisabledCallback(disabled: boolean): void {\n    this.formDisabled = disabled;\n  }\n\n  formStateRestoreCallback(state: string | null): void {\n    this.value = state;\n  }\n\n  override focus(options?: FocusOptions): void {\n    this.radios.find((radio) => radio.tabbable)?.focus(options);\n  }\n\n  private enabled(): KtRadio[] {\n    return this.inactive ? [] : this.radios.filter((radio) => !radio.disabled);\n  }\n\n  /**\n   * Pushes the group's state down; the radios are the display, not the truth.\n   * The tab stop sits on the chosen option, or the first enabled one.\n   */\n  private syncRadios = (): void => {\n    const enabled = this.enabled();\n    const chosen = enabled.find((radio) => radio.value === this.value);\n    const tabStop = chosen ?? enabled[0];\n\n    for (const radio of this.radios) {\n      radio.checked = radio.value === this.value;\n      radio.tabbable = radio === tabStop;\n      radio.invalid = Boolean(this.error);\n      radio.groupDisabled = this.inactive;\n    }\n  };\n\n  private choose(radio: KtRadio): void {\n    if (radio.value === this.value) return;\n    this.value = radio.value;\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  private onClick = (event: Event): void => {\n    const radio = event.composedPath().find((node): node is KtRadio => node instanceof KtRadio);\n    if (!radio || !this.enabled().includes(radio)) return;\n    this.choose(radio);\n    radio.focus();\n  };\n\n  /** Arrows move and select, wrapping; Space selects the focused option. */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    const enabled = this.enabled();\n    if (enabled.length === 0) return;\n\n    const focused = event.composedPath().find((node): node is KtRadio => node instanceof KtRadio);\n    const from = focused ? enabled.indexOf(focused) : -1;\n\n    let target: KtRadio | undefined;\n    if (event.key === 'ArrowDown' || event.key === 'ArrowRight') {\n      target = enabled[(from + 1) % enabled.length];\n    } else if (event.key === 'ArrowUp' || event.key === 'ArrowLeft') {\n      target = enabled[(from - 1 + enabled.length) % enabled.length];\n    } else if (event.key === ' ' && focused && from >= 0) {\n      target = focused;\n    } else {\n      return;\n    }\n\n    event.preventDefault();\n    if (!target) return;\n    this.choose(target);\n    void this.updateComplete.then(() => target.focus());\n  };\n\n  override render(): TemplateResult {\n    return html`${\n        this.error\n          ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n          : nothing\n      }\n      <div\n        part=\"base\"\n        class=\"group\"\n        role=\"radiogroup\"\n        aria-label=${this.label || strings().options}\n        aria-orientation=${this.orientation}\n        aria-required=${this.required ? 'true' : nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-disabled=${this.inactive ? 'true' : nothing}\n        aria-describedby=${this.error ? 'error-message' : nothing}\n      >\n        <slot @slotchange=${this.syncRadios}></slot>\n      </div>`;\n  }\n}\n\ndefineElement('kt-radio', KtRadio);\ndefineElement('kt-radio-group', KtRadioGroup);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-radio': KtRadio;\n    'kt-radio-group': KtRadioGroup;\n  }\n}\n"],"names":["KtRadio","KtElement","css","options","html","nothing","__decorateClass","property","KtRadioGroup","enabled","tabStop","radio","event","node","focused","from","target","attachFormInternals","changed","setFormValue","missing","setValidity","strings","disabled","state","emit","queryAssignedElements","defineElement"],"mappings":"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"}

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

@@ -36,6 +36,9 @@ export declare class KtSelect extends KtElement {
     private defaultValue;
     private readonly listId;
     private open;
+    /** The side the list opened on, for the direction of its entrance. */
+    private placement;
+    private floating;
     /** 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. */
@@ -46,6 +49,10 @@ export declare class KtSelect extends KtElement {
     name: string;
     size: KtSelectSize;
     disabled: boolean;
+    /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */
+    private formDisabled;
+    /** Whether the control is off, by its own `disabled` or by its form. */
+    private get inactive();
     required: boolean;
     /** Error message. A non-empty value puts the control in its error state. */
     error: string;
@@ -57,8 +64,14 @@ export declare class KtSelect extends KtElement {
     emptyText: string | undefined;
     connectedCallback(): void;
     disconnectedCallback(): void;
+    updated(changed: PropertyValues): void;
     willUpdate(changed: PropertyValues<this>): void;
     formResetCallback(): void;
+    /**
+     * Called by the platform when the control's disabled state changes — its
+     * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+     */
+    formDisabledCallback(disabled: boolean): void;
     formStateRestoreCallback(state: string): void;
     focus(options?: FocusOptions): void;
     /** The currently selected option, if the id still matches one. */