kanto-ds 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-input.js","sources":["../../../../src/internal/countries.ts","../../../../src/components/forms/kt-input/kt-input.ts"],"sourcesContent":["/**\n * Country data for the phone mode of `<kt-input>`.\n *\n * Deliberately a short list rather than all 195: an exhaustive picker is a\n * worse experience than a handful of entries and a search box. Applications\n * that need more pass their own list to the element.\n */\n\nexport interface KtCountry {\n  /** ISO 3166-1 alpha-2, lowercase. */\n  readonly id: string;\n  readonly name: string;\n  /** International dialling code, without the leading `+`. */\n  readonly dialCode: string;\n  /** Placeholder showing the local format. */\n  readonly format: string;\n}\n\nexport const DEFAULT_COUNTRIES: readonly KtCountry[] = [\n  { id: 'us', name: 'United States', dialCode: '1', format: '123-456-7890' },\n  { id: 'gb', name: 'United Kingdom', dialCode: '44', format: '7123 456789' },\n  { id: 'de', name: 'Germany', dialCode: '49', format: '1234 567890' },\n  { id: 'fr', name: 'France', dialCode: '33', format: '1 23 45 67 89' },\n  { id: 'be', name: 'Belgium', dialCode: '32', format: '1 23 45 67 89' },\n  { id: 'ch', name: 'Switzerland', dialCode: '41', format: '12 345 67 89' },\n];\n\nconst REGIONAL_INDICATOR_A = 0x1f1e6;\nconst LETTER_A = 'A'.charCodeAt(0);\n\n/**\n * The flag emoji for a country code, built from regional indicator symbols.\n *\n * This is the one place emoji appear in a Kanto interface. They are here\n * because no flag icon set ships with the system, and a country picker without\n * flags is markedly slower to scan.\n */\nexport function flagEmoji(id: string): string {\n  if (!/^[a-z]{2}$/i.test(id)) return '';\n  return String.fromCodePoint(\n    ...[...id.toUpperCase()].map(\n      (letter) => REGIONAL_INDICATOR_A + letter.charCodeAt(0) - LETTER_A,\n    ),\n  );\n}\n\n/** Keeps only the digits — what gets stored and submitted. */\nexport function digitsOnly(value: string): string {\n  return value.replace(/\\D/g, '');\n}\n\n/**\n * Groups digits for display, per country.\n *\n * North American numbers read as `123 456 7890`, French ones as\n * `6 12 34 56 78` — a single leading digit, then pairs. Everything else falls\n * back to groups of three.\n */\nexport function formatNationalNumber(digits: string, country: KtCountry | undefined): string {\n  if (!digits) return '';\n\n  const groups: string[] = [];\n  let rest = digits;\n\n  if (country?.id === 'fr') {\n    groups.push(rest.slice(0, 1));\n    rest = rest.slice(1);\n    while (rest) {\n      groups.push(rest.slice(0, 2));\n      rest = rest.slice(2);\n    }\n  } else if (country?.id === 'us' || country?.id === 'ca') {\n    for (const size of [3, 3, 4]) {\n      if (!rest) break;\n      groups.push(rest.slice(0, size));\n      rest = rest.slice(size);\n    }\n    if (rest) groups.push(rest);\n  } else {\n    while (rest) {\n      groups.push(rest.slice(0, 3));\n      rest = rest.slice(3);\n    }\n  }\n\n  return groups.filter(Boolean).join(' ');\n}\n\n/** Filters by name, dial code or country code — whatever the user types. */\nexport function searchCountries(\n  countries: readonly KtCountry[],\n  query: string,\n): readonly KtCountry[] {\n  const needle = query.trim().toLowerCase();\n  if (!needle) return countries;\n\n  return countries.filter(\n    (country) =>\n      country.name.toLowerCase().includes(needle) ||\n      country.dialCode.includes(needle.replace(/^\\+/, '')) ||\n      country.id === needle,\n  );\n}\n","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 } from '#internal/events';\nimport {\n  attachFormInternals,\n  setFormValue,\n  setValidity,\n  type UsableInternals,\n} from '#internal/form-control';\nimport {\n  DEFAULT_COUNTRIES,\n  digitsOnly,\n  flagEmoji,\n  formatNationalNumber,\n  searchCountries,\n  type KtCountry,\n} from '#internal/countries';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtInputSize = 'small' | 'medium' | 'large';\n\n/** Icon size inside a field, at every field size. */\nconst ICON_SIZE = 18;\n\n/**\n * A single-line text field.\n *\n * Borderless by design: the field is a fill on `--color-dark-12` that gains a\n * 2px *outline* — grey on hover, primary on focus, danger on error. An outline\n * sits outside the box, so nothing reflows when the state changes.\n *\n * The element is form-associated: it serialises into `FormData` under its\n * `name`, resets with the form, and reports validity like a native input.\n *\n * @element kt-input\n *\n * @csspart base - The field container.\n * @csspart control - The native `<input>`.\n * @csspart actions - The trailing icon row.\n *\n * @fires kt-input - On every keystroke. `detail: { value }`.\n * @fires kt-change - When the value is committed (blur or Enter). `detail: { value }`.\n * @fires kt-clear - The clear button was pressed.\n *\n * @example\n * ```html\n * <kt-input placeholder=\"Search everything...\" icon=\"search\"></kt-input>\n * <kt-input type=\"password\" name=\"password\"></kt-input>\n * <kt-input error=\"Invalid email address\" value=\"not-an-address\"></kt-input>\n * ```\n */\nexport class KtInput 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        position: relative;\n        display: inline-flex;\n        align-items: center;\n        width: 100%;\n        height: var(--button-height);\n        padding: 0 var(--button-padding-x);\n        gap: var(--gap-button);\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      /* Outline, never border: it sits outside the box, so hover and focus\n         change nothing about the layout. */\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      .small {\n        height: var(--button-height-small);\n      }\n      .large {\n        height: var(--button-height-large);\n      }\n\n      .error,\n      .error:hover,\n      .error:focus-within {\n        outline: var(--outline-width) solid var(--color-danger-base);\n      }\n      .error input {\n        color: var(--color-danger-base);\n      }\n\n      .disabled {\n        background-color: var(--color-dark-14);\n        pointer-events: none;\n      }\n      .disabled input {\n        color: var(--text-disabled);\n      }\n\n      input {\n        width: 100%;\n        min-width: 0;\n        padding: 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(--color-text-500);\n      }\n\n      /* The clear button is ours; the browser's is redundant. */\n      input::-webkit-search-cancel-button {\n        display: none;\n      }\n\n      .actions {\n        display: flex;\n        flex: none;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      .icon-button {\n        display: inline-flex;\n        align-items: center;\n        padding: 0;\n        color: var(--text-body);\n        background: none;\n        border: none;\n        cursor: pointer;\n      }\n\n      .icon-button:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n        border-radius: 2px;\n      }\n\n      .clear {\n        transition: transform var(--duration-instant) ease-in-out;\n      }\n      .clear:hover {\n        transform: rotate(90deg);\n      }\n\n      .adornment {\n        display: flex;\n        align-items: center;\n        color: var(--text-muted);\n      }\n\n      .error-icon {\n        color: var(--color-danger-base);\n      }\n\n      /* === PHONE MODE === */\n      .country {\n        display: inline-flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n        gap: var(--gap-element);\n        height: 100%;\n        margin-right: var(--button-padding-x);\n        padding: 0 var(--button-padding-x) 0 0;\n        color: var(--text-body);\n        background: none;\n        border: none;\n        border-right: var(--border-width) solid var(--color-dark-16);\n        cursor: pointer;\n        font: var(--font-normal-regular);\n        user-select: none;\n      }\n\n      .country:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: -2px;\n      }\n\n      .chevron {\n        display: inline-flex;\n        transform-origin: 50% 50%;\n        transition: transform var(--duration-fast) ease-in-out;\n      }\n      .chevron.open {\n        transform: scaleY(-1);\n      }\n\n      .dial {\n        color: var(--text-muted);\n      }\n\n      .country-panel {\n        position: absolute;\n        top: calc(100% + 6px);\n        left: 0;\n        z-index: var(--z-dropdown);\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n        width: 280px;\n        max-height: 225px;\n        padding: var(--padding-expand);\n        background: var(--color-dark-20);\n        border-radius: var(--radius-input);\n      }\n\n      .country-search {\n        width: 100%;\n        height: var(--button-height-small);\n        padding: 0 12px;\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        background: var(--color-dark-12);\n        border: none;\n        border-radius: var(--radius-input);\n        outline: none;\n      }\n\n      .country-list {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        gap: var(--gap-element);\n        margin: 0;\n        padding: 0;\n        overflow-y: auto;\n        list-style: none;\n        scrollbar-width: thin;\n      }\n\n      .country-item {\n        display: flex;\n        align-items: center;\n        gap: 8px;\n        padding: 8px 12px;\n        border-radius: var(--radius-input);\n        cursor: pointer;\n        font: var(--font-normal-regular);\n      }\n      .country-item:hover,\n      .country-item[aria-selected='true'] {\n        background: var(--color-dark-23);\n      }\n\n      .country-name {\n        flex: 1;\n      }\n\n      .country-empty {\n        padding: 8px 12px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  @query('input')\n  private input!: HTMLInputElement;\n\n  private internals: UsableInternals | null = null;\n\n  /** True while a `password` field is showing its contents. */\n  @state()\n  private passwordVisible = false;\n\n  @state()\n  private countryOpen = false;\n\n  @state()\n  private countryQuery = '';\n\n  /** The field's value. The `value` attribute seeds it and acts as the reset value. */\n  @property({ type: String })\n  value = '';\n\n  @property({ type: String })\n  name = '';\n\n  /** Any native input type. `password` adds the reveal toggle. */\n  @property({ type: String })\n  type = 'text';\n\n  @property({ type: String })\n  placeholder = '';\n\n  /** Field height: 32 / 40 / 48px at the desktop scale. */\n  @property({ type: String, reflect: true })\n  size: KtInputSize = 'medium';\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  /** Trailing Lucide icon, kebab-case. */\n  @property({ type: String })\n  icon = '';\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  /** Shows the clear button once there is something to clear. */\n  @property({ type: Boolean })\n  clearable = true;\n\n  /** Accessible name, when no `<kt-label-input>` wraps the field. */\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  autocomplete = '';\n\n  @property({ type: Number })\n  maxlength?: number;\n\n  /**\n   * Countries offered in phone mode. Replace it to widen the list.\n   */\n  @property({ attribute: false })\n  countries: readonly KtCountry[] = DEFAULT_COUNTRIES;\n\n  /** Selected country in phone mode, as an ISO 3166-1 alpha-2 code. */\n  @property({ type: String })\n  country = 'us';\n\n  /** The value the enclosing form resets to. */\n  private defaultValue = '';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('pointerdown', this.closeCountryPanel);\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    setFormValue(this.internals, this.formValue);\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (\n      changed.has('value') ||\n      changed.has('required') ||\n      changed.has('error') ||\n      changed.has('country')\n    ) {\n      setFormValue(this.internals, this.value);\n      this.refreshValidity();\n    }\n  }\n\n  private refreshValidity(): void {\n    const missing = this.required && this.value.length === 0;\n    const message = this.error || (missing ? 'This field is required.' : '');\n    setValidity(\n      this.internals,\n      { valueMissing: missing, customError: Boolean(this.error) },\n      message,\n    );\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('pointerdown', this.closeCountryPanel);\n  }\n\n  /** Called by the platform when the enclosing form is reset. */\n  formResetCallback(): void {\n    this.value = this.defaultValue;\n    this.passwordVisible = false;\n  }\n\n  /** Called by the platform when the browser restores a session. */\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  override blur(): void {\n    this.input?.blur();\n  }\n\n  /** Selects the field's contents, as `HTMLInputElement.select()` does. */\n  select(): void {\n    this.input?.select();\n  }\n\n  /** Phone mode: the country picker, digit-only storage and grouped display. */\n  private get isPhone(): boolean {\n    return this.type === 'tel';\n  }\n\n  private get selectedCountry(): KtCountry | undefined {\n    return this.countries.find((candidate) => candidate.id === this.country);\n  }\n\n  /**\n   * What the form receives. In phone mode that is the full international\n   * number — submitting national digits alone would throw away the country\n   * the user picked.\n   */\n  private get formValue(): string {\n    if (!this.isPhone || !this.value) return this.value;\n    return `+${this.selectedCountry?.dialCode ?? ''}${this.value}`;\n  }\n\n  private get displayValue(): string {\n    return this.isPhone ? formatNationalNumber(this.value, this.selectedCountry) : this.value;\n  }\n\n  private get showClear(): boolean {\n    return this.clearable && this.value.length > 0 && !this.readonly && !this.disabled;\n  }\n\n  private get resolvedType(): string {\n    // Phone mode renders grouped digits, which type=\"tel\" would not accept\n    // back; the value is normalised to digits on input either way.\n    if (this.isPhone) return 'text';\n    if (this.type !== 'password') return this.type;\n    return this.passwordVisible ? 'text' : 'password';\n  }\n\n  private onInput(event: Event): void {\n    const raw = (event.target as HTMLInputElement).value;\n    this.value = this.isPhone ? digitsOnly(raw) : raw;\n    emit(this, 'kt-input', { value: this.value });\n  }\n\n  private toggleCountryPanel(): void {\n    this.countryOpen = !this.countryOpen;\n    this.countryQuery = '';\n  }\n\n  private selectCountry(country: KtCountry): void {\n    this.country = country.id;\n    this.countryOpen = false;\n    this.countryQuery = '';\n    emit(this, 'kt-country-change', { country: country.id, dialCode: country.dialCode });\n    this.focus();\n  }\n\n  private closeCountryPanel = (event: Event): void => {\n    if (event.composedPath().includes(this)) return;\n    this.countryOpen = false;\n  };\n\n  private onCountryKeyDown(event: KeyboardEvent): void {\n    if (event.key === 'Escape' && this.countryOpen) {\n      event.stopPropagation();\n      this.countryOpen = false;\n      this.shadowRoot?.querySelector<HTMLButtonElement>('.country')?.focus();\n    }\n  }\n\n  private renderCountryPicker(): TemplateResult {\n    const selected = this.selectedCountry;\n    const matches = searchCountries(this.countries, this.countryQuery);\n\n    return html`<button\n        type=\"button\"\n        class=\"country\"\n        aria-haspopup=\"listbox\"\n        aria-expanded=${this.countryOpen ? 'true' : 'false'}\n        aria-label=${`Country code: ${selected?.name ?? 'none'}`}\n        ?disabled=${this.disabled || this.readonly}\n        @click=${this.toggleCountryPanel}\n      >\n        <span aria-hidden=\"true\">${flagEmoji(this.country)}</span>\n        <span class=\"dial\">+${selected?.dialCode ?? ''}</span>\n        <span class=${classMap({ chevron: true, open: this.countryOpen })}>\n          <kt-icon name=\"chevron-down\" size=\"14\"></kt-icon>\n        </span>\n      </button>\n      ${\n        this.countryOpen\n          ? html`<div class=\"country-panel\" @pointerdown=${(e: Event) => e.stopPropagation()}>\n              <input\n                class=\"country-search\"\n                placeholder=\"Search country or dial code\"\n                .value=${this.countryQuery}\n                aria-label=\"Search country or dial code\"\n                @input=${(e: Event) => {\n                  this.countryQuery = (e.target as HTMLInputElement).value;\n                }}\n              />\n              <ul class=\"country-list\" role=\"listbox\">\n                ${\n                  matches.length === 0\n                    ? html`<li class=\"country-empty\">No country found</li>`\n                    : matches.map(\n                        (candidate) =>\n                          html`<li\n                            class=\"country-item\"\n                            role=\"option\"\n                            aria-selected=${candidate.id === this.country ? 'true' : 'false'}\n                            @click=${() => this.selectCountry(candidate)}\n                          >\n                            <span aria-hidden=\"true\">${flagEmoji(candidate.id)}</span>\n                            <span class=\"country-name\">${candidate.name}</span>\n                            <span class=\"dial\">+${candidate.dialCode}</span>\n                          </li>`,\n                      )\n                }\n              </ul>\n            </div>`\n          : nothing\n      }`;\n  }\n\n  private onChange(event: Event): void {\n    // The native change event does not cross the shadow boundary; re-emit it\n    // under a name consumers can actually listen for.\n    event.stopPropagation();\n    emit(this, 'kt-change', { value: this.value });\n  }\n\n  private clear(): void {\n    this.value = '';\n    emit(this, 'kt-clear');\n    emit(this, 'kt-input', { value: '' });\n    emit(this, 'kt-change', { value: '' });\n    this.focus();\n  }\n\n  private togglePassword(): void {\n    this.passwordVisible = !this.passwordVisible;\n  }\n\n  /** Clicking the padding around the input should focus it, as on a native field. */\n  private onFieldPointerDown(event: PointerEvent): void {\n    if (event.target === this.input) return;\n    if ((event.target as HTMLElement).closest('button')) return;\n    event.preventDefault();\n    this.focus();\n  }\n\n  override render(): TemplateResult {\n    const hasActions =\n      this.type === 'password' || Boolean(this.icon) || Boolean(this.error) || this.showClear;\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        field: true,\n        [this.size]: true,\n        error: Boolean(this.error),\n        disabled: this.disabled,\n      })}\n      @pointerdown=${this.onFieldPointerDown}\n      @keydown=${this.onCountryKeyDown}\n    >\n      ${this.isPhone ? this.renderCountryPicker() : nothing}\n\n      <input\n        part=\"control\"\n        type=${this.resolvedType}\n        name=${this.name || nothing}\n        .value=${live(this.displayValue)}\n        placeholder=${this.placeholder || this.selectedCountry?.format || nothing}\n        autocomplete=${this.autocomplete || nothing}\n        inputmode=${this.isPhone ? 'tel' : nothing}\n        maxlength=${this.maxlength ?? nothing}\n        aria-label=${this.label || nothing}\n        aria-invalid=${this.error ? 'true' : nothing}\n        aria-errormessage=${this.error || nothing}\n        ?disabled=${this.disabled}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        @input=${this.onInput}\n        @change=${this.onChange}\n      />\n\n      ${\n        hasActions\n          ? html`<div part=\"actions\" class=\"actions\">\n              ${\n                this.type === 'password'\n                  ? html`<button\n                      type=\"button\"\n                      class=\"icon-button\"\n                      tabindex=\"-1\"\n                      aria-label=${this.passwordVisible ? 'Hide password' : 'Show password'}\n                      @click=${this.togglePassword}\n                    >\n                      <kt-icon\n                        name=${this.passwordVisible ? 'eye-off' : 'eye'}\n                        size=${ICON_SIZE}\n                      ></kt-icon>\n                    </button>`\n                  : nothing\n              }\n              ${\n                this.icon\n                  ? html`<span class=\"adornment\">\n                      <kt-icon name=${this.icon} size=${ICON_SIZE}></kt-icon>\n                    </span>`\n                  : nothing\n              }\n              ${\n                this.error\n                  ? html`<span class=\"adornment error-icon\" title=${this.error}>\n                      <kt-icon name=\"circle-alert\" size=${ICON_SIZE} label=${this.error}></kt-icon>\n                    </span>`\n                  : nothing\n              }\n              ${\n                this.showClear\n                  ? html`<button\n                      type=\"button\"\n                      class=\"icon-button clear\"\n                      tabindex=\"-1\"\n                      aria-label=\"Clear\"\n                      @click=${this.clear}\n                    >\n                      <kt-icon name=\"x\" size=${ICON_SIZE}></kt-icon>\n                    </button>`\n                  : nothing\n              }\n            </div>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-input', KtInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-input': KtInput;\n  }\n}\n"],"names":["DEFAULT_COUNTRIES","REGIONAL_INDICATOR_A","LETTER_A","flagEmoji","id","letter","digitsOnly","value","formatNationalNumber","digits","country","groups","rest","size","searchCountries","countries","query","needle","ICON_SIZE","KtInput","KtElement","event","css","attachFormInternals","setFormValue","changed","missing","message","setValidity","state","options","candidate","raw","emit","selected","matches","html","classMap","e","nothing","hasActions","live","__decorateClass","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-input-menu/kt-input-menu.d.ts

@@ -0,0 +1,60 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import { type KtOption } from '#internal/listbox';
+import '../../core/kt-icon/kt-icon.js';
+/**
+ * A combobox: type to narrow the list, then pick.
+ *
+ * Reach for it over `<kt-select>` once the list is long enough that scanning it
+ * is slower than typing three letters — somewhere around twenty options.
+ *
+ * @element kt-input-menu
+ *
+ * @csspart control - The field.
+ * @csspart input - The native `<input>`.
+ * @csspart popup - The option list.
+ * @csspart option - An option row.
+ *
+ * @fires kt-change - An option was chosen or cleared. `detail: { value, option }`.
+ * @fires kt-filter - The query changed. `detail: { query }`.
+ */
+export declare class KtInputMenu extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private input;
+    private readonly listId;
+    private open;
+    private query;
+    private activeIndex;
+    options: readonly KtOption[];
+    value: string | number | null;
+    placeholder: string;
+    disabled: boolean;
+    error: string;
+    label: string;
+    emptyText: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    get selectedOption(): KtOption | undefined;
+    /** Options after the current query, which is what the keyboard walks. */
+    private get visibleOptions();
+    /**
+     * While filtering, the field shows the query; otherwise it shows the chosen
+     * option. Keeping the two in one input is what makes it a combobox rather
+     * than a search box that happens to sit above a list.
+     */
+    private get displayValue();
+    private onDocumentPointerDown;
+    private openList;
+    private close;
+    private onInput;
+    private choose;
+    private clear;
+    private onKeyDown;
+    private optionId;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-input-menu': KtInputMenu;
+    }
+}

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

@@ -0,0 +1,313 @@
+import { css as m, nothing as a, html as l } from "lit";
+import { query as g, state as v, property as s } from "lit/decorators.js";
+import { classMap as c } from "lit/directives/class-map.js";
+import { live as x } from "lit/directives/live.js";
+import { K as f, d as w } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { u as k, e as h } from "../../../chunks/events-Bjl5Zmmq.js";
+import { l as $, f as I, o as y, a as u, b as D, n as q } from "../../../chunks/listbox-CUXYn_3S.js";
+import "../../core/kt-icon/kt-icon.js";
+var O = Object.defineProperty, o = (d, t, n, i) => {
+  for (var r = void 0, p = d.length - 1, b; p >= 0; p--)
+    (b = d[p]) && (r = b(t, n, r) || r);
+  return r && O(t, n, r), r;
+};
+class e extends f {
+  constructor() {
+    super(...arguments), this.listId = k("kt-input-menu-list"), this.open = !1, this.query = "", this.activeIndex = -1, this.options = [], this.value = null, this.placeholder = "", this.disabled = !1, this.error = "", this.label = "", this.emptyText = "No options available", this.onDocumentPointerDown = (t) => {
+      t.composedPath().includes(this) || this.close();
+    };
+  }
+  static {
+    this.styles = [
+      f.styles,
+      $,
+      m`
+      :host {
+        position: relative;
+        display: block;
+        --field-height: var(--button-height);
+      }
+
+      .control {
+        display: inline-flex;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--gap-element);
+        width: 100%;
+        height: var(--field-height);
+        padding: 0 var(--button-padding-x);
+        color: var(--text-body);
+        font: var(--font-input);
+        background-color: var(--color-dark-20);
+        border: none;
+        border-radius: var(--radius-input);
+        /* A resting hairline. A field is a fill on --surface-field, which is
+           one ramp step from the page in dark and almost the same colour in
+           light — so on a card or inside a modal it simply disappeared and
+           read as a bare native control.
+
+           A border rather than an outline, because the control inside fills
+           the field exactly and a coincident outline is painted over by the
+           native widget. A border insets the control by its own width, so it
+           cannot be covered. box-sizing: border-box keeps the outer size.
+
+           The hover and focus rings stay outlines on top of it, and the
+           transparent resting outline is what they animate from: without it
+           outline-color starts at the initial value, which resolves to the
+           text colour, and hover flashed near-white before settling. */
+        border: var(--border-width) solid var(--border-field);
+        outline: var(--outline-width) solid transparent;
+        cursor: text;
+        transition:
+          background-color var(--duration-instant),
+          outline-color var(--duration-instant);
+      }
+
+      .control:hover {
+        outline: var(--outline-width) solid var(--color-text-700);
+      }
+      .control:focus-within {
+        background-color: var(--color-dark-12);
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      .error .control,
+      .error .control:hover,
+      .error .control:focus-within {
+        outline: var(--outline-width) solid var(--color-danger-base);
+      }
+
+      :host([disabled]) {
+        pointer-events: none;
+        opacity: 0.6;
+      }
+
+      input {
+        width: 100%;
+        min-width: 0;
+        color: var(--text-body);
+        font: var(--font-input);
+        background: transparent;
+        border: none;
+        outline: none;
+      }
+
+      input::placeholder {
+        color: var(--color-text-500);
+      }
+
+      .icon-button {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        padding: 0;
+        color: inherit;
+        background: transparent;
+        border: none;
+        cursor: pointer;
+      }
+
+      .clear {
+        transition: transform var(--duration-instant) ease-in-out;
+      }
+      .clear:hover {
+        transform: rotate(90deg);
+      }
+
+      .toggle {
+        transition: transform var(--duration-fast) ease-in-out;
+      }
+      .open .toggle {
+        transform: scaleY(-1);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("pointerdown", this.onDocumentPointerDown);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("pointerdown", this.onDocumentPointerDown);
+  }
+  get selectedOption() {
+    return this.options.find((t) => t.id === this.value);
+  }
+  /** Options after the current query, which is what the keyboard walks. */
+  get visibleOptions() {
+    return I(this.options, this.query);
+  }
+  /**
+   * While filtering, the field shows the query; otherwise it shows the chosen
+   * option. Keeping the two in one input is what makes it a combobox rather
+   * than a search box that happens to sit above a list.
+   */
+  get displayValue() {
+    if (this.open && this.query) return this.query;
+    const t = this.selectedOption;
+    return t ? y(t) : this.query;
+  }
+  openList() {
+    this.disabled || this.open || (this.open = !0, this.activeIndex = u(this.visibleOptions));
+  }
+  close() {
+    this.open = !1, this.query = "", this.activeIndex = -1;
+  }
+  onInput(t) {
+    this.query = t.target.value, this.open = !0, this.activeIndex = u(this.visibleOptions), h(this, "kt-filter", { query: this.query });
+  }
+  choose(t) {
+    t.disabled || (this.value = t.id, this.close(), h(this, "kt-change", { value: t.id, option: t }));
+  }
+  clear(t) {
+    t.stopPropagation(), this.value = null, this.query = "", h(this, "kt-change", { value: null, option: null }), this.input?.focus();
+  }
+  onKeyDown(t) {
+    const n = this.visibleOptions;
+    switch (t.key) {
+      case "ArrowDown":
+      case "ArrowUp":
+        if (t.preventDefault(), !this.open) return this.openList();
+        this.activeIndex = q(
+          n,
+          this.activeIndex,
+          t.key === "ArrowDown" ? 1 : -1
+        );
+        return;
+      case "Home":
+        if (!this.open) return;
+        t.preventDefault(), this.activeIndex = u(n);
+        return;
+      case "End":
+        if (!this.open) return;
+        t.preventDefault(), this.activeIndex = D(n);
+        return;
+      case "Enter": {
+        if (!this.open) return;
+        t.preventDefault();
+        const i = n[this.activeIndex];
+        i && this.choose(i);
+        return;
+      }
+      case "Escape":
+        if (!this.open) return;
+        t.stopPropagation(), this.close();
+        return;
+      case "Tab":
+        this.close();
+    }
+  }
+  optionId(t) {
+    return `${this.listId}-option-${t}`;
+  }
+  render() {
+    const t = this.visibleOptions, n = this.selectedOption !== void 0 && !this.disabled;
+    return l`<div
+      class=${c({ open: this.open, error: !!this.error })}
+      @keydown=${this.onKeyDown}
+    >
+      <div part="control" class="control" @click=${this.openList}>
+        <input
+          part="input"
+          role="combobox"
+          aria-expanded=${this.open ? "true" : "false"}
+          aria-controls=${this.listId}
+          aria-autocomplete="list"
+          aria-activedescendant=${this.open && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : a}
+          aria-label=${this.label || a}
+          aria-invalid=${this.error ? "true" : a}
+          placeholder=${this.placeholder || a}
+          .value=${x(this.displayValue)}
+          ?disabled=${this.disabled}
+          @focus=${this.openList}
+          @input=${this.onInput}
+        />
+
+        ${n ? l`<button
+                type="button"
+                class="icon-button clear"
+                aria-label="Clear"
+                tabindex="-1"
+                @click=${this.clear}
+              >
+                <kt-icon name="x" size="18"></kt-icon>
+              </button>` : a}
+
+        <button
+          type="button"
+          class="icon-button toggle"
+          aria-label=${this.open ? "Close list" : "Open list"}
+          tabindex="-1"
+          @click=${(i) => {
+      i.stopPropagation(), this.open ? this.close() : this.openList();
+    }}
+        >
+          <kt-icon name="chevron-down" size="18"></kt-icon>
+        </button>
+      </div>
+
+      <ul
+        part="popup"
+        id=${this.listId}
+        class=${c({ popup: !0, open: this.open })}
+        role="listbox"
+        aria-label=${this.label || this.placeholder}
+      >
+        ${t.length === 0 ? l`<li class="empty">${this.emptyText}</li>` : t.map(
+      (i, r) => l`<li
+                    part="option"
+                    id=${this.optionId(r)}
+                    class=${c({
+        option: !0,
+        selected: i.id === this.value,
+        active: r === this.activeIndex,
+        disabled: !!i.disabled
+      })}
+                    role="option"
+                    aria-selected=${i.id === this.value ? "true" : "false"}
+                    @click=${() => this.choose(i)}
+                  >
+                    ${y(i)}
+                  </li>`
+    )}
+      </ul>
+    </div>`;
+  }
+}
+o([
+  g("input")
+], e.prototype, "input");
+o([
+  v()
+], e.prototype, "open");
+o([
+  v()
+], e.prototype, "query");
+o([
+  v()
+], e.prototype, "activeIndex");
+o([
+  s({ attribute: !1 })
+], e.prototype, "options");
+o([
+  s({ type: String })
+], e.prototype, "value");
+o([
+  s({ type: String })
+], e.prototype, "placeholder");
+o([
+  s({ type: Boolean, reflect: !0 })
+], e.prototype, "disabled");
+o([
+  s({ type: String, reflect: !0 })
+], e.prototype, "error");
+o([
+  s({ type: String })
+], e.prototype, "label");
+o([
+  s({ type: String, attribute: "empty-text" })
+], e.prototype, "emptyText");
+w("kt-input-menu", e);
+export {
+  e as KtInputMenu
+};
+//# sourceMappingURL=kt-input-menu.js.map

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

@@ -0,0 +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 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  filterOptions,\n  firstEnabledIndex,\n  lastEnabledIndex,\n  listboxStyles,\n  nextEnabledIndex,\n  optionLabel,\n  type KtOption,\n} from '#internal/listbox';\nimport '../../core/kt-icon/kt-icon.js';\n\n/**\n * A combobox: type to narrow the list, then pick.\n *\n * Reach for it over `<kt-select>` once the list is long enough that scanning it\n * is slower than typing three letters — somewhere around twenty options.\n *\n * @element kt-input-menu\n *\n * @csspart control - The field.\n * @csspart input - The native `<input>`.\n * @csspart popup - The option list.\n * @csspart option - An option row.\n *\n * @fires kt-change - An option was chosen or cleared. `detail: { value, option }`.\n * @fires kt-filter - The query changed. `detail: { query }`.\n */\nexport class KtInputMenu extends KtElement {\n  static 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(--color-text-500);\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 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: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String, reflect: true })\n  error = '';\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String, attribute: 'empty-text' })\n  emptyText = 'No options available';\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    document.addEventListener('pointerdown', this.onDocumentPointerDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    document.removeEventListener('pointerdown', this.onDocumentPointerDown);\n  }\n\n  get selectedOption(): KtOption | undefined {\n    return this.options.find((option) => option.id === this.value);\n  }\n\n  /** Options after the current query, which is what the keyboard walks. */\n  private get visibleOptions(): readonly KtOption[] {\n    return filterOptions(this.options, this.query);\n  }\n\n  /**\n   * While filtering, the field shows the query; otherwise it shows the chosen\n   * option. Keeping the two in one input is what makes it a combobox rather\n   * than a search box that happens to sit above a list.\n   */\n  private get displayValue(): string {\n    if (this.open && this.query) return this.query;\n    const selected = this.selectedOption;\n    return selected ? optionLabel(selected) : this.query;\n  }\n\n  private onDocumentPointerDown = (event: Event): void => {\n    if (event.composedPath().includes(this)) return;\n    this.close();\n  };\n\n  private openList(): void {\n    if (this.disabled || this.open) return;\n    this.open = true;\n    this.activeIndex = firstEnabledIndex(this.visibleOptions);\n  }\n\n  private close(): void {\n    this.open = false;\n    this.query = '';\n    this.activeIndex = -1;\n  }\n\n  private onInput(event: Event): void {\n    this.query = (event.target as HTMLInputElement).value;\n    this.open = true;\n    this.activeIndex = firstEnabledIndex(this.visibleOptions);\n    emit(this, 'kt-filter', { query: this.query });\n  }\n\n  private choose(option: KtOption): void {\n    if (option.disabled) return;\n    this.value = option.id;\n    this.close();\n    emit(this, 'kt-change', { value: option.id, option });\n  }\n\n  private clear(event: Event): void {\n    event.stopPropagation();\n    this.value = null;\n    this.query = '';\n    emit(this, 'kt-change', { value: null, option: null });\n    this.input?.focus();\n  }\n\n  private onKeyDown(event: KeyboardEvent): void {\n    const options = this.visibleOptions;\n\n    switch (event.key) {\n      case 'ArrowDown':\n      case 'ArrowUp':\n        event.preventDefault();\n        if (!this.open) return this.openList();\n        this.activeIndex = nextEnabledIndex(\n          options,\n          this.activeIndex,\n          event.key === 'ArrowDown' ? 1 : -1,\n        );\n        return;\n      case 'Home':\n        if (!this.open) return;\n        event.preventDefault();\n        this.activeIndex = firstEnabledIndex(options);\n        return;\n      case 'End':\n        if (!this.open) return;\n        event.preventDefault();\n        this.activeIndex = lastEnabledIndex(options);\n        return;\n      case 'Enter': {\n        if (!this.open) return;\n        event.preventDefault();\n        const option = options[this.activeIndex];\n        if (option) this.choose(option);\n        return;\n      }\n      case 'Escape':\n        if (!this.open) return;\n        event.stopPropagation();\n        this.close();\n        return;\n      case 'Tab':\n        this.close();\n    }\n  }\n\n  private optionId(index: number): string {\n    return `${this.listId}-option-${index}`;\n  }\n\n  override render(): TemplateResult {\n    const options = this.visibleOptions;\n    const showClear = this.selectedOption !== undefined && !this.disabled;\n\n    return html`<div\n      class=${classMap({ open: this.open, error: Boolean(this.error) })}\n      @keydown=${this.onKeyDown}\n    >\n      <div part=\"control\" class=\"control\" @click=${this.openList}>\n        <input\n          part=\"input\"\n          role=\"combobox\"\n          aria-expanded=${this.open ? 'true' : 'false'}\n          aria-controls=${this.listId}\n          aria-autocomplete=\"list\"\n          aria-activedescendant=${\n            this.open && this.activeIndex >= 0 ? this.optionId(this.activeIndex) : nothing\n          }\n          aria-label=${this.label || nothing}\n          aria-invalid=${this.error ? 'true' : nothing}\n          placeholder=${this.placeholder || nothing}\n          .value=${live(this.displayValue)}\n          ?disabled=${this.disabled}\n          @focus=${this.openList}\n          @input=${this.onInput}\n        />\n\n        ${\n          showClear\n            ? html`<button\n                type=\"button\"\n                class=\"icon-button clear\"\n                aria-label=\"Clear\"\n                tabindex=\"-1\"\n                @click=${this.clear}\n              >\n                <kt-icon name=\"x\" size=\"18\"></kt-icon>\n              </button>`\n            : nothing\n        }\n\n        <button\n          type=\"button\"\n          class=\"icon-button toggle\"\n          aria-label=${this.open ? 'Close list' : 'Open list'}\n          tabindex=\"-1\"\n          @click=${(event: Event) => {\n            event.stopPropagation();\n            if (this.open) this.close();\n            else this.openList();\n          }}\n        >\n          <kt-icon name=\"chevron-down\" size=\"18\"></kt-icon>\n        </button>\n      </div>\n\n      <ul\n        part=\"popup\"\n        id=${this.listId}\n        class=${classMap({ popup: true, open: this.open })}\n        role=\"listbox\"\n        aria-label=${this.label || this.placeholder}\n      >\n        ${\n          options.length === 0\n            ? html`<li class=\"empty\">${this.emptyText}</li>`\n            : options.map(\n                (option, index) =>\n                  html`<li\n                    part=\"option\"\n                    id=${this.optionId(index)}\n                    class=${classMap({\n                      option: true,\n                      selected: option.id === this.value,\n                      active: index === this.activeIndex,\n                      disabled: Boolean(option.disabled),\n                    })}\n                    role=\"option\"\n                    aria-selected=${option.id === this.value ? 'true' : 'false'}\n                    @click=${() => this.choose(option)}\n                  >\n                    ${optionLabel(option)}\n                  </li>`,\n              )\n        }\n      </ul>\n    </div>`;\n  }\n}\n\ndefineElement('kt-input-menu', KtInputMenu);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-input-menu': KtInputMenu;\n  }\n}\n"],"names":["KtInputMenu","KtElement","uniqueId","event","listboxStyles","css","option","filterOptions","selected","optionLabel","firstEnabledIndex","emit","options","nextEnabledIndex","lastEnabledIndex","index","showClear","html","classMap","nothing","live","__decorateClass","query","state","property","defineElement"],"mappings":"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"}

package/dist/components/forms/kt-label-input/kt-label-input.d.ts

@@ -0,0 +1,42 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+/**
+ * A label above a form control, with a red asterisk when it is required.
+ *
+ * Native label association does not cross a shadow boundary — `for` and
+ * implicit wrapping both need the label and the control in the same tree — so
+ * this element passes its text down to the slotted control's `label` property
+ * instead, which becomes the control's `aria-label`. Clicking the label still
+ * focuses the control, as it would natively.
+ *
+ * @element kt-label-input
+ *
+ * @slot - The form control to label.
+ *
+ * @csspart label - The `<label>`.
+ *
+ * @example
+ * ```html
+ * <kt-label-input label="Adresse e-mail" required>
+ *   <kt-input name="email" type="email" required></kt-input>
+ * </kt-label-input>
+ * ```
+ */
+export declare class KtLabelInput extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private defaultSlot;
+    /** The label text. */
+    label: string;
+    /** Appends a red asterisk and marks the control required for screen readers. */
+    required: boolean;
+    private get control();
+    private labelControl;
+    updated(): void;
+    private focusControl;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-label-input': KtLabelInput;
+    }
+}

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

@@ -0,0 +1,69 @@
+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-CcMLO5e8.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);
+  return e && b(t, s, e), e;
+};
+class l extends u {
+  constructor() {
+    super(...arguments), this.label = "", this.required = !1;
+  }
+  static {
+    this.styles = [
+      u.styles,
+      p`
+      :host {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-button);
+      }
+
+      label {
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+        cursor: default;
+      }
+
+      .required {
+        margin-left: 2px;
+        color: var(--color-danger-base);
+      }
+    `
+    ];
+  }
+  get control() {
+    return this.defaultSlot?.assignedElements({ flatten: !0 }).find((t) => t instanceof HTMLElement);
+  }
+  labelControl() {
+    const t = this.control;
+    t && ("label" in t ? t.label = this.label : t.setAttribute("aria-label", this.label));
+  }
+  updated() {
+    this.labelControl();
+  }
+  focusControl() {
+    this.control?.focus();
+  }
+  render() {
+    return i`<label part="label" @click=${this.focusControl}>
+        ${this.label}${this.required ? i`<span class="required" aria-hidden="true">*</span>` : ""}
+      </label>
+      <slot @slotchange=${this.labelControl}></slot>`;
+  }
+}
+a([
+  d("slot")
+], l.prototype, "defaultSlot");
+a([
+  f({ type: String })
+], l.prototype, "label");
+a([
+  f({ type: Boolean, reflect: !0 })
+], l.prototype, "required");
+c("kt-label-input", l);
+export {
+  l as KtLabelInput
+};
+//# sourceMappingURL=kt-label-input.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-label-input.js","sources":["../../../../src/components/forms/kt-label-input/kt-label-input.ts"],"sourcesContent":["import { css, html, type TemplateResult } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\n/** Anything that can take an accessible name from the label. */\ninterface Labelable extends HTMLElement {\n  label?: string;\n  focus(): void;\n}\n\n/**\n * A label above a form control, with a red asterisk when it is required.\n *\n * Native label association does not cross a shadow boundary — `for` and\n * implicit wrapping both need the label and the control in the same tree — so\n * this element passes its text down to the slotted control's `label` property\n * instead, which becomes the control's `aria-label`. Clicking the label still\n * focuses the control, as it would natively.\n *\n * @element kt-label-input\n *\n * @slot - The form control to label.\n *\n * @csspart label - The `<label>`.\n *\n * @example\n * ```html\n * <kt-label-input label=\"Adresse e-mail\" required>\n *   <kt-input name=\"email\" type=\"email\" required></kt-input>\n * </kt-label-input>\n * ```\n */\nexport class KtLabelInput extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-button);\n      }\n\n      label {\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n        cursor: default;\n      }\n\n      .required {\n        margin-left: 2px;\n        color: var(--color-danger-base);\n      }\n    `,\n  ];\n\n  @query('slot')\n  private defaultSlot!: HTMLSlotElement;\n\n  /** The label text. */\n  @property({ type: String })\n  label = '';\n\n  /** Appends a red asterisk and marks the control required for screen readers. */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  private get control(): Labelable | undefined {\n    return this.defaultSlot\n      ?.assignedElements({ flatten: true })\n      .find((element): element is Labelable => element instanceof HTMLElement);\n  }\n\n  private labelControl(): void {\n    const control = this.control;\n    if (!control) return;\n\n    if ('label' in control) control.label = this.label;\n    else control.setAttribute('aria-label', this.label);\n  }\n\n  override updated(): void {\n    this.labelControl();\n  }\n\n  private focusControl(): void {\n    this.control?.focus();\n  }\n\n  override render(): TemplateResult {\n    return html`<label part=\"label\" @click=${this.focusControl}>\n        ${this.label}${\n          this.required ? html`<span class=\"required\" aria-hidden=\"true\">*</span>` : ''\n        }\n      </label>\n      <slot @slotchange=${this.labelControl}></slot>`;\n  }\n}\n\ndefineElement('kt-label-input', KtLabelInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-label-input': KtLabelInput;\n  }\n}\n"],"names":["KtLabelInput","KtElement","css","element","control","html","__decorateClass","query","property","defineElement"],"mappings":";;;;;;;;AAgCO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GA4BL,KAAA,QAAQ,IAIR,KAAA,WAAW;AAAA,EAAA;AAAA,EA/BX,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,IAAA;AAAA,EAkBF;AAAA,EAaA,IAAY,UAAiC;AAC3C,WAAO,KAAK,aACR,iBAAiB,EAAE,SAAS,IAAM,EACnC,KAAK,CAACC,MAAkCA,aAAmB,WAAW;AAAA,EAC3E;AAAA,EAEQ,eAAqB;AAC3B,UAAMC,IAAU,KAAK;AACrB,IAAKA,MAED,WAAWA,IAASA,EAAQ,QAAQ,KAAK,QACxCA,EAAQ,aAAa,cAAc,KAAK,KAAK;AAAA,EACpD;AAAA,EAES,UAAgB;AACvB,SAAK,aAAA;AAAA,EACP;AAAA,EAEQ,eAAqB;AAC3B,SAAK,SAAS,MAAA;AAAA,EAChB;AAAA,EAES,SAAyB;AAChC,WAAOC,+BAAkC,KAAK,YAAY;AAAA,UACpD,KAAK,KAAK,GACV,KAAK,WAAWA,wDAA2D,EAC7E;AAAA;AAAA,0BAEkB,KAAK,YAAY;AAAA,EACzC;AACF;AAxCUC,EAAA;AAAA,EADPC,EAAM,MAAM;AAAA,GAvBFP,EAwBH,WAAA,aAAA;AAIRM,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3BfR,EA4BX,WAAA,OAAA;AAIAM,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA/B/BR,EAgCX,WAAA,UAAA;AAkCFS,EAAc,kBAAkBT,CAAY;"}