kanto-ds 1.4.0 → 1.5.2

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

@@ -1 +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 { strings } from '#internal/strings';\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-text);\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(--text-muted);\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-text);\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      this.stringsChanged(changed)\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 ? strings().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=${strings().countryCode(selected?.name)}\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=${strings().searchCountry}\n                .value=${this.countryQuery}\n                aria-label=${strings().searchCountry}\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\">${strings().noCountry}</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      ${\n        // The icon only shows that something is wrong; this is what gets read\n        // out. aria-describedby rather than aria-errormessage, which most\n        // screen readers still ignore.\n        this.error\n          ? html`<span id=\"error-message\" class=\"visually-hidden\">${this.error}</span>`\n          : nothing\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-describedby=${this.error ? 'error-message' : 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 ? strings().hidePassword : strings().showPassword}\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=${strings().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","strings","setValidity","state","options","candidate","raw","emit","selected","matches","html","classMap","e","nothing","hasActions","live","__decorateClass","property","defineElement"],"mappings":"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"}
+{"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 * Most of the planet by population rather than all 195 — the panel has a\n * search box, and the long tail of microstates mostly adds scrolling.\n * Applications that need a different set 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  /**\n   * A national number as it is written without the trunk prefix, used as the\n   * placeholder. Its digit groups are also how a typed number is grouped.\n   */\n  readonly format: string;\n  /**\n   * What a number starts with when dialled from inside the country — the `0`\n   * of `06 12 34 56 78` — and never after the dial code. Absent where no such\n   * prefix exists, or where it can also begin a number: an Italian landline\n   * keeps its 0 after +39.\n   */\n  readonly trunkPrefix?: string;\n}\n\nexport const DEFAULT_COUNTRIES: readonly KtCountry[] = [\n  { id: 'al', name: 'Albania', dialCode: '355', format: '67 212 3456', trunkPrefix: '0' },\n  { id: 'dz', name: 'Algeria', dialCode: '213', format: '551 23 45 67', trunkPrefix: '0' },\n  { id: 'ao', name: 'Angola', dialCode: '244', format: '923 123 456' },\n  { id: 'ar', name: 'Argentina', dialCode: '54', format: '11 2345 6789', trunkPrefix: '0' },\n  { id: 'au', name: 'Australia', dialCode: '61', format: '412 345 678', trunkPrefix: '0' },\n  { id: 'at', name: 'Austria', dialCode: '43', format: '664 1234567', trunkPrefix: '0' },\n  { id: 'bd', name: 'Bangladesh', dialCode: '880', format: '1812 345678', trunkPrefix: '0' },\n  { id: 'be', name: 'Belgium', dialCode: '32', format: '1 23 45 67 89', trunkPrefix: '0' },\n  { id: 'bo', name: 'Bolivia', dialCode: '591', format: '7123 4567', trunkPrefix: '0' },\n  { id: 'br', name: 'Brazil', dialCode: '55', format: '11 91234 5678', trunkPrefix: '0' },\n  { id: 'bg', name: 'Bulgaria', dialCode: '359', format: '87 123 4567', trunkPrefix: '0' },\n  { id: 'cm', name: 'Cameroon', dialCode: '237', format: '6 71 23 45 67' },\n  { id: 'ca', name: 'Canada', dialCode: '1', format: '506-234-5678', trunkPrefix: '1' },\n  { id: 'cl', name: 'Chile', dialCode: '56', format: '9 1234 5678' },\n  { id: 'cn', name: 'China', dialCode: '86', format: '131 2345 6789', trunkPrefix: '0' },\n  { id: 'co', name: 'Colombia', dialCode: '57', format: '321 123 4567', trunkPrefix: '0' },\n  { id: 'cr', name: 'Costa Rica', dialCode: '506', format: '8312 3456' },\n  { id: 'ci', name: \"Côte d'Ivoire\", dialCode: '225', format: '01 23 45 67 89' },\n  { id: 'hr', name: 'Croatia', dialCode: '385', format: '91 234 5678', trunkPrefix: '0' },\n  { id: 'cy', name: 'Cyprus', dialCode: '357', format: '96 123456' },\n  { id: 'cz', name: 'Czechia', dialCode: '420', format: '601 123 456' },\n  { id: 'dk', name: 'Denmark', dialCode: '45', format: '32 12 34 56' },\n  { id: 'cd', name: 'DR Congo', dialCode: '243', format: '991 234 567', trunkPrefix: '0' },\n  { id: 'ec', name: 'Ecuador', dialCode: '593', format: '99 123 4567', trunkPrefix: '0' },\n  { id: 'eg', name: 'Egypt', dialCode: '20', format: '100 123 4567', trunkPrefix: '0' },\n  { id: 'ee', name: 'Estonia', dialCode: '372', format: '5123 4567' },\n  { id: 'et', name: 'Ethiopia', dialCode: '251', format: '91 123 4567', trunkPrefix: '0' },\n  { id: 'fi', name: 'Finland', dialCode: '358', format: '41 234 5678', trunkPrefix: '0' },\n  { id: 'fr', name: 'France', dialCode: '33', format: '1 23 45 67 89', trunkPrefix: '0' },\n  { id: 'ge', name: 'Georgia', dialCode: '995', format: '555 123 456', trunkPrefix: '0' },\n  { id: 'de', name: 'Germany', dialCode: '49', format: '1234 567890', trunkPrefix: '0' },\n  { id: 'gh', name: 'Ghana', dialCode: '233', format: '23 123 4567', trunkPrefix: '0' },\n  { id: 'gr', name: 'Greece', dialCode: '30', format: '691 234 5678' },\n  { id: 'gt', name: 'Guatemala', dialCode: '502', format: '5123 4567' },\n  { id: 'hk', name: 'Hong Kong', dialCode: '852', format: '5123 4567' },\n  { id: 'hu', name: 'Hungary', dialCode: '36', format: '20 123 4567', trunkPrefix: '06' },\n  { id: 'is', name: 'Iceland', dialCode: '354', format: '611 1234' },\n  { id: 'in', name: 'India', dialCode: '91', format: '81234 56789', trunkPrefix: '0' },\n  { id: 'id', name: 'Indonesia', dialCode: '62', format: '812 3456 7890', trunkPrefix: '0' },\n  { id: 'ir', name: 'Iran', dialCode: '98', format: '912 345 6789', trunkPrefix: '0' },\n  { id: 'iq', name: 'Iraq', dialCode: '964', format: '791 234 5678', trunkPrefix: '0' },\n  { id: 'ie', name: 'Ireland', dialCode: '353', format: '85 123 4567', trunkPrefix: '0' },\n  { id: 'il', name: 'Israel', dialCode: '972', format: '50 234 5678', trunkPrefix: '0' },\n  { id: 'it', name: 'Italy', dialCode: '39', format: '312 345 6789' },\n  { id: 'jp', name: 'Japan', dialCode: '81', format: '90 1234 5678', trunkPrefix: '0' },\n  { id: 'jo', name: 'Jordan', dialCode: '962', format: '7 9012 3456', trunkPrefix: '0' },\n  { id: 'kz', name: 'Kazakhstan', dialCode: '7', format: '771 000 9998' },\n  { id: 'ke', name: 'Kenya', dialCode: '254', format: '712 123456', trunkPrefix: '0' },\n  { id: 'lv', name: 'Latvia', dialCode: '371', format: '2123 4567' },\n  { id: 'lb', name: 'Lebanon', dialCode: '961', format: '71 123 456', trunkPrefix: '0' },\n  { id: 'lt', name: 'Lithuania', dialCode: '370', format: '612 34567', trunkPrefix: '0' },\n  { id: 'lu', name: 'Luxembourg', dialCode: '352', format: '628 123 456' },\n  { id: 'my', name: 'Malaysia', dialCode: '60', format: '12 345 6789', trunkPrefix: '0' },\n  { id: 'mx', name: 'Mexico', dialCode: '52', format: '55 1234 5678' },\n  { id: 'ma', name: 'Morocco', dialCode: '212', format: '650 123456', trunkPrefix: '0' },\n  { id: 'np', name: 'Nepal', dialCode: '977', format: '984 1234567', trunkPrefix: '0' },\n  { id: 'nl', name: 'Netherlands', dialCode: '31', format: '6 12345678', trunkPrefix: '0' },\n  { id: 'nz', name: 'New Zealand', dialCode: '64', format: '21 123 4567', trunkPrefix: '0' },\n  { id: 'ng', name: 'Nigeria', dialCode: '234', format: '802 123 4567', trunkPrefix: '0' },\n  { id: 'mk', name: 'North Macedonia', dialCode: '389', format: '72 345 678', trunkPrefix: '0' },\n  { id: 'no', name: 'Norway', dialCode: '47', format: '406 12 345' },\n  { id: 'pk', name: 'Pakistan', dialCode: '92', format: '301 2345678', trunkPrefix: '0' },\n  { id: 'pa', name: 'Panama', dialCode: '507', format: '6123 4567' },\n  { id: 'pe', name: 'Peru', dialCode: '51', format: '912 345 678', trunkPrefix: '0' },\n  { id: 'ph', name: 'Philippines', dialCode: '63', format: '905 123 4567', trunkPrefix: '0' },\n  { id: 'pl', name: 'Poland', dialCode: '48', format: '512 345 678' },\n  { id: 'pt', name: 'Portugal', dialCode: '351', format: '912 345 678' },\n  { id: 'qa', name: 'Qatar', dialCode: '974', format: '3312 3456' },\n  { id: 'ro', name: 'Romania', dialCode: '40', format: '712 034 567', trunkPrefix: '0' },\n  { id: 'ru', name: 'Russia', dialCode: '7', format: '912 345 67 89' },\n  { id: 'sa', name: 'Saudi Arabia', dialCode: '966', format: '51 234 5678', trunkPrefix: '0' },\n  { id: 'sn', name: 'Senegal', dialCode: '221', format: '70 123 45 67' },\n  { id: 'rs', name: 'Serbia', dialCode: '381', format: '60 123 4567', trunkPrefix: '0' },\n  { id: 'sg', name: 'Singapore', dialCode: '65', format: '8123 4567' },\n  { id: 'sk', name: 'Slovakia', dialCode: '421', format: '912 123 456', trunkPrefix: '0' },\n  { id: 'si', name: 'Slovenia', dialCode: '386', format: '31 234 567', trunkPrefix: '0' },\n  { id: 'za', name: 'South Africa', dialCode: '27', format: '71 123 4567', trunkPrefix: '0' },\n  { id: 'kr', name: 'South Korea', dialCode: '82', format: '10 1234 5678', trunkPrefix: '0' },\n  { id: 'es', name: 'Spain', dialCode: '34', format: '612 34 56 78' },\n  { id: 'lk', name: 'Sri Lanka', dialCode: '94', format: '71 234 5678', trunkPrefix: '0' },\n  { id: 'se', name: 'Sweden', dialCode: '46', format: '70 123 45 67', trunkPrefix: '0' },\n  { id: 'ch', name: 'Switzerland', dialCode: '41', format: '12 345 67 89', trunkPrefix: '0' },\n  { id: 'tw', name: 'Taiwan', dialCode: '886', format: '912 345 678', trunkPrefix: '0' },\n  { id: 'tz', name: 'Tanzania', dialCode: '255', format: '621 234 567', trunkPrefix: '0' },\n  { id: 'th', name: 'Thailand', dialCode: '66', format: '81 234 5678', trunkPrefix: '0' },\n  { id: 'tn', name: 'Tunisia', dialCode: '216', format: '20 123 456' },\n  { id: 'tr', name: 'Türkiye', dialCode: '90', format: '501 234 56 78', trunkPrefix: '0' },\n  { id: 'ug', name: 'Uganda', dialCode: '256', format: '712 345678', trunkPrefix: '0' },\n  { id: 'ua', name: 'Ukraine', dialCode: '380', format: '50 123 4567', trunkPrefix: '0' },\n  {\n    id: 'ae',\n    name: 'United Arab Emirates',\n    dialCode: '971',\n    format: '50 123 4567',\n    trunkPrefix: '0',\n  },\n  { id: 'gb', name: 'United Kingdom', dialCode: '44', format: '7123 456789', trunkPrefix: '0' },\n  { id: 'us', name: 'United States', dialCode: '1', format: '201-555-0123', trunkPrefix: '1' },\n  { id: 'uy', name: 'Uruguay', dialCode: '598', format: '94 231 234', trunkPrefix: '0' },\n  { id: 've', name: 'Venezuela', dialCode: '58', format: '412 123 4567', trunkPrefix: '0' },\n  { id: 'vn', name: 'Vietnam', dialCode: '84', format: '91 234 5678', trunkPrefix: '0' },\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, the way the country's `format` groups them:\n * `1 23 45 67 89` makes `6 12 34 56 78`. Digits past the format go in one\n * last group rather than being dropped, and a country with no format falls\n * back to threes.\n */\nexport function formatNationalNumber(digits: string, country: KtCountry | undefined): string {\n  if (!digits) return '';\n\n  const sizes = country ? (country.format.match(/\\d+/g) ?? []).map((run) => run.length) : [];\n  const groups: string[] = [];\n  let rest = digits;\n\n  for (const size of sizes) {\n    if (!rest) break;\n    groups.push(rest.slice(0, size));\n    rest = rest.slice(size);\n  }\n  if (sizes.length > 0) {\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.join(' ');\n}\n\n/**\n * The trunk prefix a number was typed with, if any. Someone used to dialling\n * `06 12 34 56 78` types the 0 after +33 too, and the result is not a number\n * that exists.\n */\nexport function leadingTrunkPrefix(\n  digits: string,\n  country: KtCountry | undefined,\n): string | undefined {\n  const prefix = country?.trunkPrefix;\n  return prefix && digits.startsWith(prefix) ? prefix : undefined;\n}\n\n/** Lowercase, without accents: \"Côte\" is found by typing \"cote\". */\nfunction fold(text: string): string {\n  return text\n    .normalize('NFD')\n    .replace(/\\p{Diacritic}/gu, '')\n    .toLowerCase();\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 = fold(query.trim());\n  if (!needle) return countries;\n\n  // From the start: \"44\" is the UK, not also Angola's 244.\n  const dial = needle.replace(/^\\+/, '');\n  return countries.filter(\n    (country) =>\n      fold(country.name).includes(needle) ||\n      (dial !== '' && country.dialCode.startsWith(dial)) ||\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, toggleListener } 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  leadingTrunkPrefix,\n  searchCountries,\n  type KtCountry,\n} from '#internal/countries';\nimport { FloatingController, floatingStyles } from '#internal/floating';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../feedback/kt-tooltip/kt-tooltip.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/** A phone-mode restore state, `fr:612345678`: see `formState`. */\nconst PHONE_STATE = /^([a-z]{2}):(\\d*)$/;\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    floatingStyles,\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-text);\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(--text-muted);\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-text);\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      /* Placed from the field by FloatingController. */\n      .country-panel {\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        /* Never shrunk by the list below it, which would otherwise take the\n           search box's height whenever there are more results than room. */\n        flex: none;\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 has focus: the error tooltip shows for keyboard users too. */\n  @state()\n  private focused = false;\n\n  /** Escape put the error tooltip away until the field is focused again. */\n  @state()\n  private errorDismissed = false;\n\n  private floating = new FloatingController(this, {\n    panel: () => this.shadowRoot?.querySelector<HTMLElement>('.country-panel'),\n    anchor: () => this.shadowRoot?.querySelector('.field'),\n  });\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  /** 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  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  /**\n   * Error message. A non-empty value puts the field in its error state, and\n   * wins over the field's own checks.\n   */\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    // Back on the document if it was reconnected while open.\n    toggleListener(this.countryOpen, document, 'pointerdown', this.closeCountryPanel);\n    this.internals ??= attachFormInternals(this);\n    this.defaultValue = this.value;\n    setFormValue(this.internals, this.formValue, this.formState);\n  }\n\n  // Untyped: `countryOpen` is private, so not among the keys PropertyValues<this> knows.\n  override updated(changed: PropertyValues): void {\n    // Only an open panel closes on an outside click, so only an open one listens.\n    if (changed.has('countryOpen')) {\n      toggleListener(this.countryOpen, document, 'pointerdown', this.closeCountryPanel);\n    }\n    this.floating.sync(this.countryOpen);\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      changed.has('countries') ||\n      changed.has('type') ||\n      this.stringsChanged(changed)\n    ) {\n      setFormValue(this.internals, this.formValue, this.formState);\n      this.refreshValidity();\n    }\n  }\n\n  private refreshValidity(): void {\n    const missing = this.required && this.value.length === 0;\n    const phoneError = this.phoneError;\n    const message = this.error || phoneError || (missing ? strings().required : '');\n    setValidity(\n      this.internals,\n      {\n        valueMissing: missing,\n        patternMismatch: Boolean(phoneError),\n        customError: Boolean(this.error),\n      },\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  /**\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  /** Called by the platform when the browser restores a session. */\n  formStateRestoreCallback(state: string): void {\n    const phone = PHONE_STATE.exec(state);\n    if (this.isPhone && phone) {\n      this.country = phone[1]!;\n      this.value = phone[2]!;\n    } else {\n      this.value = state;\n    }\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  /**\n   * What the browser saves for a restore. The international number cannot be\n   * split back into country and digits — `+1` is both the US and Canada — so\n   * phone mode saves the two apart.\n   */\n  private get formState(): string | undefined {\n    return this.isPhone ? `${this.country}:${this.value}` : undefined;\n  }\n\n  /** Phone mode: a number typed with the prefix only dialled at home. */\n  private get phoneError(): string {\n    if (!this.isPhone) return '';\n    const prefix = leadingTrunkPrefix(this.value, this.selectedCountry);\n    return prefix ? strings().phoneTrunkPrefix(prefix) : '';\n  }\n\n  /** The message on show: the application's first, then the field's own. */\n  private get shownError(): string {\n    return this.error || this.phoneError;\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.inactive;\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=${strings().countryCode(selected?.name)}\n        ?disabled=${this.inactive || 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\n              class=\"country-panel floating\"\n              popover=\"manual\"\n              @pointerdown=${(e: Event) => e.stopPropagation()}\n            >\n              <input\n                class=\"country-search\"\n                placeholder=${strings().searchCountry}\n                .value=${this.countryQuery}\n                aria-label=${strings().searchCountry}\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\">${strings().noCountry}</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 onFocus(): void {\n    this.focused = true;\n    this.errorDismissed = false;\n  }\n\n  private onBlur(): void {\n    this.focused = false;\n  }\n\n  /** WCAG 1.4.13: content shown on focus can be dismissed without moving it. */\n  private onControlKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Escape' || !this.errorTooltipOpen) return;\n    event.stopPropagation();\n    this.errorDismissed = true;\n  }\n\n  private get errorTooltipOpen(): boolean {\n    return this.focused && !this.errorDismissed && Boolean(this.shownError);\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  /** Both buttons are out of the tab order, so their tooltips are for the pointer. */\n  private renderPasswordToggle(): TemplateResult {\n    const label = this.passwordVisible ? strings().hidePassword : strings().showPassword;\n    return html`<kt-tooltip text=${label}>\n      <button\n        type=\"button\"\n        class=\"icon-button\"\n        tabindex=\"-1\"\n        aria-label=${label}\n        @click=${this.togglePassword}\n      >\n        <kt-icon name=${this.passwordVisible ? 'eye-off' : 'eye'} size=${ICON_SIZE}></kt-icon>\n      </button>\n    </kt-tooltip>`;\n  }\n\n  override render(): TemplateResult {\n    const error = this.shownError;\n    const hasActions =\n      this.type === 'password' || Boolean(this.icon) || Boolean(error) || this.showClear;\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        field: true,\n        [this.size]: true,\n        error: Boolean(error),\n        disabled: this.inactive,\n      })}\n      @pointerdown=${this.onFieldPointerDown}\n      @keydown=${this.onCountryKeyDown}\n    >\n      ${\n        // The icon only shows that something is wrong; this is what gets read\n        // out. aria-describedby rather than aria-errormessage, which most\n        // screen readers still ignore.\n        error ? html`<span id=\"error-message\" class=\"visually-hidden\">${error}</span>` : nothing\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.isPhone && 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=${error ? 'true' : nothing}\n        aria-describedby=${error ? 'error-message' : nothing}\n        ?disabled=${this.inactive}\n        ?readonly=${this.readonly}\n        ?required=${this.required}\n        @input=${this.onInput}\n        @change=${this.onChange}\n        @focus=${this.onFocus}\n        @blur=${this.onBlur}\n        @keydown=${this.onControlKeyDown}\n      />\n\n      ${\n        hasActions\n          ? html`<div part=\"actions\" class=\"actions\">\n              ${this.type === 'password' ? this.renderPasswordToggle() : nothing}\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                // The message on hover, and while the field has focus for whoever\n                // uses a keyboard; aria-describedby is what a screen reader reads.\n                error\n                  ? html`<kt-tooltip\n                      class=\"adornment error-icon\"\n                      text=${error}\n                      ?open=${this.errorTooltipOpen}\n                    >\n                      <kt-icon name=\"circle-alert\" size=${ICON_SIZE}></kt-icon>\n                    </kt-tooltip>`\n                  : nothing\n              }\n              ${\n                this.showClear\n                  ? html`<kt-tooltip text=${strings().clear}>\n                      <button\n                        type=\"button\"\n                        class=\"icon-button clear\"\n                        tabindex=\"-1\"\n                        aria-label=${strings().clear}\n                        @click=${this.clear}\n                      >\n                        <kt-icon name=\"x\" size=${ICON_SIZE}></kt-icon>\n                      </button>\n                    </kt-tooltip>`\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","sizes","run","groups","rest","size","leadingTrunkPrefix","prefix","fold","text","searchCountries","countries","query","needle","dial","ICON_SIZE","PHONE_STATE","KtInput","KtElement","FloatingController","event","floatingStyles","css","toggleListener","attachFormInternals","setFormValue","changed","missing","phoneError","message","strings","setValidity","disabled","state","phone","options","candidate","raw","emit","selected","matches","html","classMap","e","nothing","label","error","hasActions","live","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -26,6 +26,9 @@ export declare class KtInputMenu 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;
     private query;
     private activeIndex;
     options: readonly KtOption[];
@@ -33,14 +36,24 @@ export declare class KtInputMenu extends KtElement {
     placeholder: string;
     name: 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;
     error: string;
     label: string;
     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;
     get selectedOption(): KtOption | undefined;

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

@@ -1,21 +1,29 @@
-import { css as g, nothing as a, html as h } from "lit";
-import { query as x, state as f, property as n } from "lit/decorators.js";
-import { classMap as p } from "lit/directives/class-map.js";
-import { live as w } from "lit/directives/live.js";
-import { K as m, d as k } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { u as $, e as c } from "../../../chunks/events-Bjl5Zmmq.js";
-import { a as I, s as q, b as D } from "../../../chunks/form-control-CxjBTt1c.js";
-import { a as O, b as E, o as y, f as v, l as L, n as C } from "../../../chunks/listbox-Sm3nvsC6.js";
-import { s as l } from "../../../chunks/index-DSSLJirw.js";
+import { css as w, nothing as a, html as p } from "lit";
+import { query as x, state as h, property as n } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { live as k } from "lit/directives/live.js";
+import { K as m, d as $ } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { u as I, t as y, e as f } from "../../../chunks/events-r51msXNf.js";
+import { a as D, s as q, b as O } from "../../../chunks/form-control-B74_EHtG.js";
+import { a as S, b as C, o as g, f as v, l as P, n as E } from "../../../chunks/listbox-llcUu_V-.js";
+import { F as L, f as A } from "../../../chunks/floating-B7_Dahpn.js";
+import { s as l } from "../../../chunks/index-STEEvEP7.js";
 import "../../core/kt-icon/kt-icon.js";
-var P = Object.defineProperty, i = (d, t, o, r) => {
-  for (var s = void 0, u = d.length - 1, b; u >= 0; u--)
-    (b = d[u]) && (s = b(t, o, s) || s);
-  return s && P(t, o, s), s;
+var V = Object.defineProperty, i = (u, t, o, r) => {
+  for (var s = void 0, c = u.length - 1, b; c >= 0; c--)
+    (b = u[c]) && (s = b(t, o, s) || s);
+  return s && V(t, o, s), s;
 };
 class e extends m {
   constructor() {
-    super(...arguments), this.internals = null, this.defaultValue = null, this.listId = $("kt-input-menu-list"), this.open = !1, this.query = "", this.activeIndex = -1, this.options = [], this.value = null, this.placeholder = "", this.name = "", this.disabled = !1, this.required = !1, this.error = "", this.label = "", this.emptyText = void 0, this.onDocumentPointerDown = (t) => {
+    super(...arguments), this.internals = null, this.defaultValue = null, this.listId = I("kt-input-menu-list"), this.open = !1, this.placement = "bottom", this.floating = new L(this, {
+      panel: () => this.shadowRoot?.querySelector(".popup"),
+      anchor: () => this.shadowRoot?.querySelector(".control"),
+      matchWidth: !0,
+      onPlace: (t) => {
+        this.placement = t;
+      }
+    }), this.query = "", this.activeIndex = -1, this.options = [], this.value = null, this.placeholder = "", this.name = "", this.disabled = !1, this.formDisabled = !1, this.required = !1, this.error = "", this.label = "", this.emptyText = void 0, this.onDocumentPointerDown = (t) => {
       t.composedPath().includes(this) || this.close();
     };
   }
@@ -25,8 +33,9 @@ class e extends m {
   static {
     this.styles = [
       m.styles,
-      O,
-      g`
+      A,
+      S,
+      w`
       :host {
         position: relative;
         display: block;
@@ -82,7 +91,7 @@ class e extends m {
         outline: var(--outline-width) solid var(--color-danger-base);
       }
 
-      :host([disabled]) {
+      :host(:disabled) {
         pointer-events: none;
         opacity: 0.6;
       }
@@ -128,17 +137,25 @@ class e extends m {
     `
     ];
   }
+  /** 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 ??= I(this), this.defaultValue = this.value, document.addEventListener("pointerdown", this.onDocumentPointerDown);
+    super.connectedCallback(), this.internals ??= D(this), this.defaultValue = this.value, y(this.open, document, "pointerdown", this.onDocumentPointerDown);
   }
   disconnectedCallback() {
     super.disconnectedCallback(), document.removeEventListener("pointerdown", this.onDocumentPointerDown);
   }
+  // Untyped: `open` is private, so not among the keys PropertyValues<this> knows.
+  updated(t) {
+    t.has("open") && y(this.open, document, "pointerdown", this.onDocumentPointerDown), this.floating.sync(this.open);
+  }
   willUpdate(t) {
     if (t.has("value") || t.has("required") || t.has("error") || this.stringsChanged(t)) {
       q(this.internals, this.value === null ? null : String(this.value));
       const o = this.required && this.value === null;
-      D(
+      O(
         this.internals,
         { valueMissing: o, customError: !!this.error },
         this.error || (o ? l().selectOption : "")
@@ -148,6 +165,13 @@ class e extends m {
   formResetCallback() {
     this.value = this.defaultValue, this.close();
   }
+  /**
+   * Called by the platform when the control's disabled state changes — its
+   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+   */
+  formDisabledCallback(t) {
+    this.formDisabled = t;
+  }
   formStateRestoreCallback(t) {
     this.value = t;
   }
@@ -159,7 +183,7 @@ class e extends m {
   }
   /** Options after the current query, which is what the keyboard walks. */
   get visibleOptions() {
-    return E(this.options, this.query);
+    return C(this.options, this.query);
   }
   /**
    * While filtering, the field shows the query; otherwise it shows the chosen
@@ -169,22 +193,22 @@ class e extends m {
   get displayValue() {
     if (this.open && this.query) return this.query;
     const t = this.selectedOption;
-    return t ? y(t) : this.query;
+    return t ? g(t) : this.query;
   }
   openList() {
-    this.disabled || this.open || (this.open = !0, this.activeIndex = v(this.visibleOptions));
+    this.inactive || this.open || (this.open = !0, this.activeIndex = v(this.visibleOptions));
   }
   close() {
     this.open = !1, this.query = "", this.activeIndex = -1;
   }
   onInput(t) {
-    this.query = t.target.value, this.open = !0, this.activeIndex = v(this.visibleOptions), c(this, "kt-filter", { query: this.query });
+    this.query = t.target.value, this.open = !0, this.activeIndex = v(this.visibleOptions), f(this, "kt-filter", { query: this.query });
   }
   choose(t) {
-    t.disabled || (this.value = t.id, this.close(), c(this, "kt-change", { value: t.id, option: t }));
+    t.disabled || (this.value = t.id, this.close(), f(this, "kt-change", { value: t.id, option: t }));
   }
   clear(t) {
-    t.stopPropagation(), this.value = null, this.query = "", c(this, "kt-change", { value: null, option: null }), this.input?.focus();
+    t.stopPropagation(), this.value = null, this.query = "", f(this, "kt-change", { value: null, option: null }), this.input?.focus();
   }
   onKeyDown(t) {
     const o = this.visibleOptions;
@@ -192,7 +216,7 @@ class e extends m {
       case "ArrowDown":
       case "ArrowUp":
         if (t.preventDefault(), !this.open) return this.openList();
-        this.activeIndex = C(
+        this.activeIndex = E(
           o,
           this.activeIndex,
           t.key === "ArrowDown" ? 1 : -1
@@ -204,7 +228,7 @@ class e extends m {
         return;
       case "End":
         if (!this.open) return;
-        t.preventDefault(), this.activeIndex = L(o);
+        t.preventDefault(), this.activeIndex = P(o);
         return;
       case "Enter": {
         if (!this.open) return;
@@ -225,9 +249,9 @@ class e extends m {
     return `${this.listId}-option-${t}`;
   }
   render() {
-    const t = this.visibleOptions, o = this.selectedOption !== void 0 && !this.disabled;
-    return h`<div
-      class=${p({ open: this.open, error: !!this.error })}
+    const t = this.visibleOptions, o = this.selectedOption !== void 0 && !this.inactive;
+    return p`<div
+      class=${d({ open: this.open, error: !!this.error })}
       @keydown=${this.onKeyDown}
     >
       <div part="control" class="control" @click=${this.openList}>
@@ -241,13 +265,13 @@ class e extends m {
           aria-label=${this.label || a}
           aria-invalid=${this.error ? "true" : a}
           placeholder=${this.placeholder || a}
-          .value=${w(this.displayValue)}
-          ?disabled=${this.disabled}
+          .value=${k(this.displayValue)}
+          ?disabled=${this.inactive}
           @focus=${this.openList}
           @input=${this.onInput}
         />
 
-        ${o ? h`<button
+        ${o ? p`<button
                 type="button"
                 class="icon-button clear"
                 aria-label=${l().clear}
@@ -273,15 +297,16 @@ class e extends m {
       <ul
         part="popup"
         id=${this.listId}
-        class=${p({ popup: !0, open: this.open })}
+        popover="manual"
+        class=${d({ popup: !0, floating: !0, open: this.open, top: this.placement === "top" })}
         role="listbox"
         aria-label=${this.label || this.placeholder}
       >
-        ${t.length === 0 ? h`<li class="empty">${this.emptyText ?? l().noOptions}</li>` : t.map(
-      (r, s) => h`<li
+        ${t.length === 0 ? p`<li class="empty">${this.emptyText ?? l().noOptions}</li>` : t.map(
+      (r, s) => p`<li
                     part="option"
                     id=${this.optionId(s)}
-                    class=${p({
+                    class=${d({
         option: !0,
         selected: r.id === this.value,
         active: s === this.activeIndex,
@@ -291,7 +316,7 @@ class e extends m {
                     aria-selected=${r.id === this.value ? "true" : "false"}
                     @click=${() => this.choose(r)}
                   >
-                    ${y(r)}
+                    ${g(r)}
                   </li>`
     )}
       </ul>
@@ -302,13 +327,16 @@ i([
   x("input")
 ], e.prototype, "input");
 i([
-  f()
+  h()
 ], e.prototype, "open");
 i([
-  f()
+  h()
+], e.prototype, "placement");
+i([
+  h()
 ], e.prototype, "query");
 i([
-  f()
+  h()
 ], e.prototype, "activeIndex");
 i([
   n({ attribute: !1 })
@@ -325,6 +353,9 @@ i([
 i([
   n({ type: Boolean, reflect: !0 })
 ], e.prototype, "disabled");
+i([
+  h()
+], e.prototype, "formDisabled");
 i([
   n({ type: Boolean, reflect: !0 })
 ], e.prototype, "required");
@@ -337,7 +368,7 @@ i([
 i([
   n({ type: String, attribute: "empty-text" })
 ], e.prototype, "emptyText");
-k("kt-input-menu", e);
+$("kt-input-menu", e);
 export {
   e as KtInputMenu
 };