kanto-ds 1.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-form.js","sources":["../../../../src/components/forms/kt-form/kt-form.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, queryAssignedElements, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { hasAssignedContent } from '#internal/slots';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\n/** Anything the panel can switch off along with itself. */\ninterface Disableable extends HTMLElement {\n  disabled?: boolean;\n}\n\n/**\n * A panel grouping related fields.\n *\n * It sits one step above the page on `--surface-form`, so the fields inside —\n * filled at `--surface-field` — read as wells recessed into it rather than as\n * boxes floating on it.\n *\n * **Put it inside your own `<form>`.** It renders a `<fieldset>`, not a form:\n * Kanto fields are form-associated custom elements, and a control finds its\n * form by walking its *own* tree. A `<form>` inside this element's shadow root\n * would not own anything slotted into it, and `new FormData(form)` would come\n * back empty. The `<form>` above stays in charge of submission, validation and\n * reset; this owns the grouping and the look.\n *\n * @element kt-form\n *\n * @slot - The fields.\n * @slot heading - Replaces the `heading` attribute, for markup.\n * @slot footer - Actions, right-aligned. Hidden when empty.\n *\n * @csspart base - The `<fieldset>`.\n * @csspart header - The heading and description.\n * @csspart fields - The field column.\n * @csspart footer - The action row.\n *\n * @example\n * ```html\n * <form>\n *   <kt-form heading=\"Identity\" description=\"How we address you.\">\n *     <kt-label-input label=\"Company\" required>\n *       <kt-input name=\"company\" required></kt-input>\n *     </kt-label-input>\n *     <kt-button slot=\"footer\" type=\"submit\">Save</kt-button>\n *   </kt-form>\n * </form>\n * ```\n */\nexport class KtForm extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      fieldset {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-form);\n        min-width: 0;\n        margin: 0;\n        padding: var(--padding-card);\n        background-color: var(--surface-form);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius-card);\n      }\n\n      .header {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n      }\n\n      /* A legend is the accessible name for the group, so it stays in the\n         accessibility tree even when there is nothing to show. */\n      legend {\n        padding: 0;\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      legend.visually-hidden {\n        position: absolute;\n        width: 1px;\n        height: 1px;\n        overflow: hidden;\n        clip-path: inset(50%);\n        white-space: nowrap;\n      }\n\n      .description {\n        margin: 0;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .fields {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-form);\n        min-width: 0;\n      }\n\n      .placeholder {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n      }\n\n      .footer {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: flex-end;\n        gap: var(--gap-button);\n      }\n\n      /* Collapsed from JS: a wrapper around a <slot> always has the slot as a\n         child, so :has(*) cannot tell an empty slot from a filled one. */\n      .footer.empty {\n        display: none;\n      }\n\n      /* While loading, the real fields stay in the DOM — and keep their state\n         — but step aside for the placeholders. */\n      :host([loading]) ::slotted(*) {\n        display: none;\n      }\n\n      :host([disabled]) fieldset {\n        opacity: 0.6;\n      }\n    `,\n  ];\n\n  @queryAssignedElements()\n  private fields!: HTMLElement[];\n\n  @state()\n  private hasFooter = false;\n\n  /** Group heading. Also the fieldset's accessible name. */\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Replaces the fields with placeholders. */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /** Switches off every field in the panel. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** How many placeholder fields `loading` draws. */\n  @property({ type: Number, attribute: 'loading-fields' })\n  loadingFields = 3;\n\n  override updated(changed: PropertyValues<this>): void {\n    if (changed.has('disabled')) this.syncDisabled();\n  }\n\n  /**\n   * A native `<fieldset disabled>` switches off its descendants, but slotted\n   * fields are not descendants of the fieldset in their own tree — the shadow\n   * boundary sits between them — so the platform never reaches them. Walk the\n   * slotted controls and set it directly.\n   */\n  /**\n   * The initial `slotchange` is queued as a microtask and can land after the\n   * first render has settled, so read the slots once directly as well.\n   */\n  override firstUpdated(): void {\n    this.readSlots();\n    this.syncDisabled();\n  }\n\n  private readSlots(): void {\n    this.hasFooter = hasAssignedContent(\n      this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"footer\"]'),\n    );\n  }\n\n  private onFooterSlotChange(): void {\n    this.readSlots();\n  }\n\n  private syncDisabled(): void {\n    for (const field of this.fields ?? []) {\n      if ('disabled' in field) (field as Disableable).disabled = this.disabled;\n      for (const nested of field.querySelectorAll<Disableable>('*')) {\n        if ('disabled' in nested) nested.disabled = this.disabled;\n      }\n    }\n  }\n\n  override render(): TemplateResult {\n    const hasHeader = Boolean(this.heading) || Boolean(this.description);\n\n    return html`<fieldset part=\"base\" ?disabled=${this.disabled}>\n      <legend class=${this.heading ? '' : 'visually-hidden'}>\n        <slot name=\"heading\">${this.heading || 'Form section'}</slot>\n      </legend>\n\n      ${\n        hasHeader && this.description\n          ? html`<div part=\"header\" class=\"header\">\n              <p class=\"description\">${this.description}</p>\n            </div>`\n          : nothing\n      }\n\n      <div part=\"fields\" class=\"fields\">\n        ${\n          this.loading\n            ? Array.from(\n                { length: this.loadingFields },\n                () =>\n                  html`<div class=\"placeholder\" aria-hidden=\"true\">\n                    <kt-skeleton width=\"30%\" height=\"14px\"></kt-skeleton>\n                    <kt-skeleton variant=\"rect\" height=\"40px\"></kt-skeleton>\n                  </div>`,\n              )\n            : nothing\n        }\n        <slot @slotchange=${this.syncDisabled}></slot>\n      </div>\n\n      <div part=\"footer\" class=${this.hasFooter ? 'footer' : 'footer empty'}>\n        <slot name=\"footer\" @slotchange=${this.onFooterSlotChange}></slot>\n      </div>\n    </fieldset>`;\n  }\n}\n\ndefineElement('kt-form', KtForm);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-form': KtForm;\n  }\n}\n"],"names":["KtForm","KtElement","css","changed","hasAssignedContent","field","nested","hasHeader","html","nothing","__decorateClass","queryAssignedElements","state","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,112 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import { type KtCountry } from '#internal/countries';
+import '../../core/kt-icon/kt-icon.js';
+export type KtInputSize = 'small' | 'medium' | 'large';
+/**
+ * A single-line text field.
+ *
+ * Borderless by design: the field is a fill on `--color-dark-12` that gains a
+ * 2px *outline* — grey on hover, primary on focus, danger on error. An outline
+ * sits outside the box, so nothing reflows when the state changes.
+ *
+ * The element is form-associated: it serialises into `FormData` under its
+ * `name`, resets with the form, and reports validity like a native input.
+ *
+ * @element kt-input
+ *
+ * @csspart base - The field container.
+ * @csspart control - The native `<input>`.
+ * @csspart actions - The trailing icon row.
+ *
+ * @fires kt-input - On every keystroke. `detail: { value }`.
+ * @fires kt-change - When the value is committed (blur or Enter). `detail: { value }`.
+ * @fires kt-clear - The clear button was pressed.
+ *
+ * @example
+ * ```html
+ * <kt-input placeholder="Search everything..." icon="search"></kt-input>
+ * <kt-input type="password" name="password"></kt-input>
+ * <kt-input error="Invalid email address" value="not-an-address"></kt-input>
+ * ```
+ */
+export declare class KtInput extends KtElement {
+    static readonly formAssociated = true;
+    static styles: import("lit").CSSResultGroup[];
+    private input;
+    private internals;
+    /** True while a `password` field is showing its contents. */
+    private passwordVisible;
+    private countryOpen;
+    private countryQuery;
+    /** The field's value. The `value` attribute seeds it and acts as the reset value. */
+    value: string;
+    name: string;
+    /** Any native input type. `password` adds the reveal toggle. */
+    type: string;
+    placeholder: string;
+    /** Field height: 32 / 40 / 48px at the desktop scale. */
+    size: KtInputSize;
+    disabled: boolean;
+    readonly: boolean;
+    required: boolean;
+    /** Trailing Lucide icon, kebab-case. */
+    icon: string;
+    /** Error message. A non-empty value puts the field in its error state. */
+    error: string;
+    /** Shows the clear button once there is something to clear. */
+    clearable: boolean;
+    /** Accessible name, when no `<kt-label-input>` wraps the field. */
+    label: string;
+    autocomplete: string;
+    maxlength?: number;
+    /**
+     * Countries offered in phone mode. Replace it to widen the list.
+     */
+    countries: readonly KtCountry[];
+    /** Selected country in phone mode, as an ISO 3166-1 alpha-2 code. */
+    country: string;
+    /** The value the enclosing form resets to. */
+    private defaultValue;
+    connectedCallback(): void;
+    willUpdate(changed: PropertyValues<this>): void;
+    private refreshValidity;
+    disconnectedCallback(): void;
+    /** Called by the platform when the enclosing form is reset. */
+    formResetCallback(): void;
+    /** Called by the platform when the browser restores a session. */
+    formStateRestoreCallback(state: string): void;
+    focus(options?: FocusOptions): void;
+    blur(): void;
+    /** Selects the field's contents, as `HTMLInputElement.select()` does. */
+    select(): void;
+    /** Phone mode: the country picker, digit-only storage and grouped display. */
+    private get isPhone();
+    private get selectedCountry();
+    /**
+     * What the form receives. In phone mode that is the full international
+     * number — submitting national digits alone would throw away the country
+     * the user picked.
+     */
+    private get formValue();
+    private get displayValue();
+    private get showClear();
+    private get resolvedType();
+    private onInput;
+    private toggleCountryPanel;
+    private selectCountry;
+    private closeCountryPanel;
+    private onCountryKeyDown;
+    private renderCountryPicker;
+    private onChange;
+    private clear;
+    private togglePassword;
+    /** Clicking the padding around the input should focus it, as on a native field. */
+    private onFieldPointerDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-input': KtInput;
+    }
+}

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

@@ -0,0 +1,556 @@
+import { css as v, nothing as a, html as l } from "lit";
+import { query as w, state as p, property as n } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { live as x } from "lit/directives/live.js";
+import { K as m, d as $ } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as d } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as C, s as b, b as k } from "../../../chunks/form-control-CxjBTt1c.js";
+import "../../core/kt-icon/kt-icon.js";
+const P = [
+  { id: "us", name: "United States", dialCode: "1", format: "123-456-7890" },
+  { id: "gb", name: "United Kingdom", dialCode: "44", format: "7123 456789" },
+  { id: "de", name: "Germany", dialCode: "49", format: "1234 567890" },
+  { id: "fr", name: "France", dialCode: "33", format: "1 23 45 67 89" },
+  { id: "be", name: "Belgium", dialCode: "32", format: "1 23 45 67 89" },
+  { id: "ch", name: "Switzerland", dialCode: "41", format: "12 345 67 89" }
+], O = 127462, S = 65;
+function g(s) {
+  return /^[a-z]{2}$/i.test(s) ? String.fromCodePoint(
+    ...[...s.toUpperCase()].map(
+      (e) => O + e.charCodeAt(0) - S
+    )
+  ) : "";
+}
+function V(s) {
+  return s.replace(/\D/g, "");
+}
+function z(s, e) {
+  if (!s) return "";
+  const r = [];
+  let t = s;
+  if (e?.id === "fr")
+    for (r.push(t.slice(0, 1)), t = t.slice(1); t; )
+      r.push(t.slice(0, 2)), t = t.slice(2);
+  else if (e?.id === "us" || e?.id === "ca") {
+    for (const u of [3, 3, 4]) {
+      if (!t) break;
+      r.push(t.slice(0, u)), t = t.slice(u);
+    }
+    t && r.push(t);
+  } else
+    for (; t; )
+      r.push(t.slice(0, 3)), t = t.slice(3);
+  return r.filter(Boolean).join(" ");
+}
+function E(s, e) {
+  const r = e.trim().toLowerCase();
+  return r ? s.filter(
+    (t) => t.name.toLowerCase().includes(r) || t.dialCode.includes(r.replace(/^\+/, "")) || t.id === r
+  ) : s;
+}
+var A = Object.defineProperty, i = (s, e, r, t) => {
+  for (var u = void 0, h = s.length - 1, y; h >= 0; h--)
+    (y = s[h]) && (u = y(e, r, u) || u);
+  return u && A(e, r, u), u;
+};
+const c = 18;
+class o extends m {
+  constructor() {
+    super(...arguments), this.internals = null, this.passwordVisible = !1, this.countryOpen = !1, this.countryQuery = "", this.value = "", this.name = "", this.type = "text", this.placeholder = "", this.size = "medium", this.disabled = !1, this.readonly = !1, this.required = !1, this.icon = "", this.error = "", this.clearable = !0, this.label = "", this.autocomplete = "", this.countries = P, this.country = "us", this.defaultValue = "", this.closeCountryPanel = (e) => {
+      e.composedPath().includes(this) || (this.countryOpen = !1);
+    };
+  }
+  static {
+    this.formAssociated = !0;
+  }
+  static {
+    this.styles = [
+      m.styles,
+      v`
+      :host {
+        display: block;
+      }
+
+      .field {
+        position: relative;
+        display: inline-flex;
+        align-items: center;
+        width: 100%;
+        height: var(--button-height);
+        padding: 0 var(--button-padding-x);
+        gap: var(--gap-button);
+        background-color: var(--surface-field);
+        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;
+        transition: outline-color var(--duration-instant);
+      }
+
+      /* Outline, never border: it sits outside the box, so hover and focus
+         change nothing about the layout. */
+      .field:hover {
+        outline: var(--outline-width) solid var(--color-text-700);
+      }
+      .field:focus-within {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+
+      .small {
+        height: var(--button-height-small);
+      }
+      .large {
+        height: var(--button-height-large);
+      }
+
+      .error,
+      .error:hover,
+      .error:focus-within {
+        outline: var(--outline-width) solid var(--color-danger-base);
+      }
+      .error input {
+        color: var(--color-danger-base);
+      }
+
+      .disabled {
+        background-color: var(--color-dark-14);
+        pointer-events: none;
+      }
+      .disabled input {
+        color: var(--text-disabled);
+      }
+
+      input {
+        width: 100%;
+        min-width: 0;
+        padding: 0;
+        color: var(--text-body);
+        font: var(--font-input);
+        background: transparent;
+        border: none;
+        outline: none;
+      }
+
+      input::placeholder {
+        color: var(--color-text-500);
+      }
+
+      /* The clear button is ours; the browser's is redundant. */
+      input::-webkit-search-cancel-button {
+        display: none;
+      }
+
+      .actions {
+        display: flex;
+        flex: none;
+        align-items: center;
+        gap: var(--gap-button);
+      }
+
+      .icon-button {
+        display: inline-flex;
+        align-items: center;
+        padding: 0;
+        color: var(--text-body);
+        background: none;
+        border: none;
+        cursor: pointer;
+      }
+
+      .icon-button:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+        border-radius: 2px;
+      }
+
+      .clear {
+        transition: transform var(--duration-instant) ease-in-out;
+      }
+      .clear:hover {
+        transform: rotate(90deg);
+      }
+
+      .adornment {
+        display: flex;
+        align-items: center;
+        color: var(--text-muted);
+      }
+
+      .error-icon {
+        color: var(--color-danger-base);
+      }
+
+      /* === PHONE MODE === */
+      .country {
+        display: inline-flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        gap: var(--gap-element);
+        height: 100%;
+        margin-right: var(--button-padding-x);
+        padding: 0 var(--button-padding-x) 0 0;
+        color: var(--text-body);
+        background: none;
+        border: none;
+        border-right: var(--border-width) solid var(--color-dark-16);
+        cursor: pointer;
+        font: var(--font-normal-regular);
+        user-select: none;
+      }
+
+      .country:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: -2px;
+      }
+
+      .chevron {
+        display: inline-flex;
+        transform-origin: 50% 50%;
+        transition: transform var(--duration-fast) ease-in-out;
+      }
+      .chevron.open {
+        transform: scaleY(-1);
+      }
+
+      .dial {
+        color: var(--text-muted);
+      }
+
+      .country-panel {
+        position: absolute;
+        top: calc(100% + 6px);
+        left: 0;
+        z-index: var(--z-dropdown);
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+        width: 280px;
+        max-height: 225px;
+        padding: var(--padding-expand);
+        background: var(--color-dark-20);
+        border-radius: var(--radius-input);
+      }
+
+      .country-search {
+        width: 100%;
+        height: var(--button-height-small);
+        padding: 0 12px;
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        background: var(--color-dark-12);
+        border: none;
+        border-radius: var(--radius-input);
+        outline: none;
+      }
+
+      .country-list {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--gap-element);
+        margin: 0;
+        padding: 0;
+        overflow-y: auto;
+        list-style: none;
+        scrollbar-width: thin;
+      }
+
+      .country-item {
+        display: flex;
+        align-items: center;
+        gap: 8px;
+        padding: 8px 12px;
+        border-radius: var(--radius-input);
+        cursor: pointer;
+        font: var(--font-normal-regular);
+      }
+      .country-item:hover,
+      .country-item[aria-selected='true'] {
+        background: var(--color-dark-23);
+      }
+
+      .country-name {
+        flex: 1;
+      }
+
+      .country-empty {
+        padding: 8px 12px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), document.addEventListener("pointerdown", this.closeCountryPanel), this.internals ??= C(this), this.defaultValue = this.value, b(this.internals, this.formValue);
+  }
+  willUpdate(e) {
+    (e.has("value") || e.has("required") || e.has("error") || e.has("country")) && (b(this.internals, this.value), this.refreshValidity());
+  }
+  refreshValidity() {
+    const e = this.required && this.value.length === 0, r = this.error || (e ? "This field is required." : "");
+    k(
+      this.internals,
+      { valueMissing: e, customError: !!this.error },
+      r
+    );
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), document.removeEventListener("pointerdown", this.closeCountryPanel);
+  }
+  /** Called by the platform when the enclosing form is reset. */
+  formResetCallback() {
+    this.value = this.defaultValue, this.passwordVisible = !1;
+  }
+  /** Called by the platform when the browser restores a session. */
+  formStateRestoreCallback(e) {
+    this.value = e;
+  }
+  focus(e) {
+    this.input?.focus(e);
+  }
+  blur() {
+    this.input?.blur();
+  }
+  /** Selects the field's contents, as `HTMLInputElement.select()` does. */
+  select() {
+    this.input?.select();
+  }
+  /** Phone mode: the country picker, digit-only storage and grouped display. */
+  get isPhone() {
+    return this.type === "tel";
+  }
+  get selectedCountry() {
+    return this.countries.find((e) => e.id === this.country);
+  }
+  /**
+   * What the form receives. In phone mode that is the full international
+   * number — submitting national digits alone would throw away the country
+   * the user picked.
+   */
+  get formValue() {
+    return !this.isPhone || !this.value ? this.value : `+${this.selectedCountry?.dialCode ?? ""}${this.value}`;
+  }
+  get displayValue() {
+    return this.isPhone ? z(this.value, this.selectedCountry) : this.value;
+  }
+  get showClear() {
+    return this.clearable && this.value.length > 0 && !this.readonly && !this.disabled;
+  }
+  get resolvedType() {
+    return this.isPhone ? "text" : this.type !== "password" ? this.type : this.passwordVisible ? "text" : "password";
+  }
+  onInput(e) {
+    const r = e.target.value;
+    this.value = this.isPhone ? V(r) : r, d(this, "kt-input", { value: this.value });
+  }
+  toggleCountryPanel() {
+    this.countryOpen = !this.countryOpen, this.countryQuery = "";
+  }
+  selectCountry(e) {
+    this.country = e.id, this.countryOpen = !1, this.countryQuery = "", d(this, "kt-country-change", { country: e.id, dialCode: e.dialCode }), this.focus();
+  }
+  onCountryKeyDown(e) {
+    e.key === "Escape" && this.countryOpen && (e.stopPropagation(), this.countryOpen = !1, this.shadowRoot?.querySelector(".country")?.focus());
+  }
+  renderCountryPicker() {
+    const e = this.selectedCountry, r = E(this.countries, this.countryQuery);
+    return l`<button
+        type="button"
+        class="country"
+        aria-haspopup="listbox"
+        aria-expanded=${this.countryOpen ? "true" : "false"}
+        aria-label=${`Country code: ${e?.name ?? "none"}`}
+        ?disabled=${this.disabled || this.readonly}
+        @click=${this.toggleCountryPanel}
+      >
+        <span aria-hidden="true">${g(this.country)}</span>
+        <span class="dial">+${e?.dialCode ?? ""}</span>
+        <span class=${f({ chevron: !0, open: this.countryOpen })}>
+          <kt-icon name="chevron-down" size="14"></kt-icon>
+        </span>
+      </button>
+      ${this.countryOpen ? l`<div class="country-panel" @pointerdown=${(t) => t.stopPropagation()}>
+              <input
+                class="country-search"
+                placeholder="Search country or dial code"
+                .value=${this.countryQuery}
+                aria-label="Search country or dial code"
+                @input=${(t) => {
+      this.countryQuery = t.target.value;
+    }}
+              />
+              <ul class="country-list" role="listbox">
+                ${r.length === 0 ? l`<li class="country-empty">No country found</li>` : r.map(
+      (t) => l`<li
+                            class="country-item"
+                            role="option"
+                            aria-selected=${t.id === this.country ? "true" : "false"}
+                            @click=${() => this.selectCountry(t)}
+                          >
+                            <span aria-hidden="true">${g(t.id)}</span>
+                            <span class="country-name">${t.name}</span>
+                            <span class="dial">+${t.dialCode}</span>
+                          </li>`
+    )}
+              </ul>
+            </div>` : a}`;
+  }
+  onChange(e) {
+    e.stopPropagation(), d(this, "kt-change", { value: this.value });
+  }
+  clear() {
+    this.value = "", d(this, "kt-clear"), d(this, "kt-input", { value: "" }), d(this, "kt-change", { value: "" }), this.focus();
+  }
+  togglePassword() {
+    this.passwordVisible = !this.passwordVisible;
+  }
+  /** Clicking the padding around the input should focus it, as on a native field. */
+  onFieldPointerDown(e) {
+    e.target !== this.input && (e.target.closest("button") || (e.preventDefault(), this.focus()));
+  }
+  render() {
+    const e = this.type === "password" || !!this.icon || !!this.error || this.showClear;
+    return l`<div
+      part="base"
+      class=${f({
+      field: !0,
+      [this.size]: !0,
+      error: !!this.error,
+      disabled: this.disabled
+    })}
+      @pointerdown=${this.onFieldPointerDown}
+      @keydown=${this.onCountryKeyDown}
+    >
+      ${this.isPhone ? this.renderCountryPicker() : a}
+
+      <input
+        part="control"
+        type=${this.resolvedType}
+        name=${this.name || a}
+        .value=${x(this.displayValue)}
+        placeholder=${this.placeholder || this.selectedCountry?.format || a}
+        autocomplete=${this.autocomplete || a}
+        inputmode=${this.isPhone ? "tel" : a}
+        maxlength=${this.maxlength ?? a}
+        aria-label=${this.label || a}
+        aria-invalid=${this.error ? "true" : a}
+        aria-errormessage=${this.error || a}
+        ?disabled=${this.disabled}
+        ?readonly=${this.readonly}
+        ?required=${this.required}
+        @input=${this.onInput}
+        @change=${this.onChange}
+      />
+
+      ${e ? l`<div part="actions" class="actions">
+              ${this.type === "password" ? l`<button
+                      type="button"
+                      class="icon-button"
+                      tabindex="-1"
+                      aria-label=${this.passwordVisible ? "Hide password" : "Show password"}
+                      @click=${this.togglePassword}
+                    >
+                      <kt-icon
+                        name=${this.passwordVisible ? "eye-off" : "eye"}
+                        size=${c}
+                      ></kt-icon>
+                    </button>` : a}
+              ${this.icon ? l`<span class="adornment">
+                      <kt-icon name=${this.icon} size=${c}></kt-icon>
+                    </span>` : a}
+              ${this.error ? l`<span class="adornment error-icon" title=${this.error}>
+                      <kt-icon name="circle-alert" size=${c} label=${this.error}></kt-icon>
+                    </span>` : a}
+              ${this.showClear ? l`<button
+                      type="button"
+                      class="icon-button clear"
+                      tabindex="-1"
+                      aria-label="Clear"
+                      @click=${this.clear}
+                    >
+                      <kt-icon name="x" size=${c}></kt-icon>
+                    </button>` : a}
+            </div>` : a}
+    </div>`;
+  }
+}
+i([
+  w("input")
+], o.prototype, "input");
+i([
+  p()
+], o.prototype, "passwordVisible");
+i([
+  p()
+], o.prototype, "countryOpen");
+i([
+  p()
+], o.prototype, "countryQuery");
+i([
+  n({ type: String })
+], o.prototype, "value");
+i([
+  n({ type: String })
+], o.prototype, "name");
+i([
+  n({ type: String })
+], o.prototype, "type");
+i([
+  n({ type: String })
+], o.prototype, "placeholder");
+i([
+  n({ type: String, reflect: !0 })
+], o.prototype, "size");
+i([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled");
+i([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "readonly");
+i([
+  n({ type: Boolean, reflect: !0 })
+], o.prototype, "required");
+i([
+  n({ type: String })
+], o.prototype, "icon");
+i([
+  n({ type: String, reflect: !0 })
+], o.prototype, "error");
+i([
+  n({ type: Boolean })
+], o.prototype, "clearable");
+i([
+  n({ type: String })
+], o.prototype, "label");
+i([
+  n({ type: String })
+], o.prototype, "autocomplete");
+i([
+  n({ type: Number })
+], o.prototype, "maxlength");
+i([
+  n({ attribute: !1 })
+], o.prototype, "countries");
+i([
+  n({ type: String })
+], o.prototype, "country");
+$("kt-input", o);
+export {
+  o as KtInput
+};
+//# sourceMappingURL=kt-input.js.map