kanto-ds 1.4.0 → 1.5.2

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

@@ -1,63 +1,169 @@
-import { css as w, nothing as n, html as l } from "lit";
-import { query as x, state as y, property as a } from "lit/decorators.js";
-import { classMap as m } from "lit/directives/class-map.js";
-import { live as $ } from "lit/directives/live.js";
-import { K as b, d as C } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as c } from "../../../chunks/events-Bjl5Zmmq.js";
-import { a as k, s as g, b as P } from "../../../chunks/form-control-CxjBTt1c.js";
-import { s as d } from "../../../chunks/index-DSSLJirw.js";
+import { css as v, nothing as s, html as d } from "lit";
+import { query as P, state as m, property as l } from "lit/decorators.js";
+import { classMap as y } from "lit/directives/class-map.js";
+import { live as w } from "lit/directives/live.js";
+import { K as g, d as $ } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { t as C, e as c } from "../../../chunks/events-r51msXNf.js";
+import { a as S, s as b, b as E } from "../../../chunks/form-control-B74_EHtG.js";
+import { F as O, f as z } from "../../../chunks/floating-B7_Dahpn.js";
+import { s as u } from "../../../chunks/index-STEEvEP7.js";
 import "../../core/kt-icon/kt-icon.js";
-const O = [
-  { 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" }
-], V = 127462, S = 65;
-function v(s) {
-  return /^[a-z]{2}$/i.test(s) ? String.fromCodePoint(
-    ...[...s.toUpperCase()].map(
-      (e) => V + e.charCodeAt(0) - S
+import "../../feedback/kt-tooltip/kt-tooltip.js";
+const D = [
+  { id: "al", name: "Albania", dialCode: "355", format: "67 212 3456", trunkPrefix: "0" },
+  { id: "dz", name: "Algeria", dialCode: "213", format: "551 23 45 67", trunkPrefix: "0" },
+  { id: "ao", name: "Angola", dialCode: "244", format: "923 123 456" },
+  { id: "ar", name: "Argentina", dialCode: "54", format: "11 2345 6789", trunkPrefix: "0" },
+  { id: "au", name: "Australia", dialCode: "61", format: "412 345 678", trunkPrefix: "0" },
+  { id: "at", name: "Austria", dialCode: "43", format: "664 1234567", trunkPrefix: "0" },
+  { id: "bd", name: "Bangladesh", dialCode: "880", format: "1812 345678", trunkPrefix: "0" },
+  { id: "be", name: "Belgium", dialCode: "32", format: "1 23 45 67 89", trunkPrefix: "0" },
+  { id: "bo", name: "Bolivia", dialCode: "591", format: "7123 4567", trunkPrefix: "0" },
+  { id: "br", name: "Brazil", dialCode: "55", format: "11 91234 5678", trunkPrefix: "0" },
+  { id: "bg", name: "Bulgaria", dialCode: "359", format: "87 123 4567", trunkPrefix: "0" },
+  { id: "cm", name: "Cameroon", dialCode: "237", format: "6 71 23 45 67" },
+  { id: "ca", name: "Canada", dialCode: "1", format: "506-234-5678", trunkPrefix: "1" },
+  { id: "cl", name: "Chile", dialCode: "56", format: "9 1234 5678" },
+  { id: "cn", name: "China", dialCode: "86", format: "131 2345 6789", trunkPrefix: "0" },
+  { id: "co", name: "Colombia", dialCode: "57", format: "321 123 4567", trunkPrefix: "0" },
+  { id: "cr", name: "Costa Rica", dialCode: "506", format: "8312 3456" },
+  { id: "ci", name: "Côte d'Ivoire", dialCode: "225", format: "01 23 45 67 89" },
+  { id: "hr", name: "Croatia", dialCode: "385", format: "91 234 5678", trunkPrefix: "0" },
+  { id: "cy", name: "Cyprus", dialCode: "357", format: "96 123456" },
+  { id: "cz", name: "Czechia", dialCode: "420", format: "601 123 456" },
+  { id: "dk", name: "Denmark", dialCode: "45", format: "32 12 34 56" },
+  { id: "cd", name: "DR Congo", dialCode: "243", format: "991 234 567", trunkPrefix: "0" },
+  { id: "ec", name: "Ecuador", dialCode: "593", format: "99 123 4567", trunkPrefix: "0" },
+  { id: "eg", name: "Egypt", dialCode: "20", format: "100 123 4567", trunkPrefix: "0" },
+  { id: "ee", name: "Estonia", dialCode: "372", format: "5123 4567" },
+  { id: "et", name: "Ethiopia", dialCode: "251", format: "91 123 4567", trunkPrefix: "0" },
+  { id: "fi", name: "Finland", dialCode: "358", format: "41 234 5678", trunkPrefix: "0" },
+  { id: "fr", name: "France", dialCode: "33", format: "1 23 45 67 89", trunkPrefix: "0" },
+  { id: "ge", name: "Georgia", dialCode: "995", format: "555 123 456", trunkPrefix: "0" },
+  { id: "de", name: "Germany", dialCode: "49", format: "1234 567890", trunkPrefix: "0" },
+  { id: "gh", name: "Ghana", dialCode: "233", format: "23 123 4567", trunkPrefix: "0" },
+  { id: "gr", name: "Greece", dialCode: "30", format: "691 234 5678" },
+  { id: "gt", name: "Guatemala", dialCode: "502", format: "5123 4567" },
+  { id: "hk", name: "Hong Kong", dialCode: "852", format: "5123 4567" },
+  { id: "hu", name: "Hungary", dialCode: "36", format: "20 123 4567", trunkPrefix: "06" },
+  { id: "is", name: "Iceland", dialCode: "354", format: "611 1234" },
+  { id: "in", name: "India", dialCode: "91", format: "81234 56789", trunkPrefix: "0" },
+  { id: "id", name: "Indonesia", dialCode: "62", format: "812 3456 7890", trunkPrefix: "0" },
+  { id: "ir", name: "Iran", dialCode: "98", format: "912 345 6789", trunkPrefix: "0" },
+  { id: "iq", name: "Iraq", dialCode: "964", format: "791 234 5678", trunkPrefix: "0" },
+  { id: "ie", name: "Ireland", dialCode: "353", format: "85 123 4567", trunkPrefix: "0" },
+  { id: "il", name: "Israel", dialCode: "972", format: "50 234 5678", trunkPrefix: "0" },
+  { id: "it", name: "Italy", dialCode: "39", format: "312 345 6789" },
+  { id: "jp", name: "Japan", dialCode: "81", format: "90 1234 5678", trunkPrefix: "0" },
+  { id: "jo", name: "Jordan", dialCode: "962", format: "7 9012 3456", trunkPrefix: "0" },
+  { id: "kz", name: "Kazakhstan", dialCode: "7", format: "771 000 9998" },
+  { id: "ke", name: "Kenya", dialCode: "254", format: "712 123456", trunkPrefix: "0" },
+  { id: "lv", name: "Latvia", dialCode: "371", format: "2123 4567" },
+  { id: "lb", name: "Lebanon", dialCode: "961", format: "71 123 456", trunkPrefix: "0" },
+  { id: "lt", name: "Lithuania", dialCode: "370", format: "612 34567", trunkPrefix: "0" },
+  { id: "lu", name: "Luxembourg", dialCode: "352", format: "628 123 456" },
+  { id: "my", name: "Malaysia", dialCode: "60", format: "12 345 6789", trunkPrefix: "0" },
+  { id: "mx", name: "Mexico", dialCode: "52", format: "55 1234 5678" },
+  { id: "ma", name: "Morocco", dialCode: "212", format: "650 123456", trunkPrefix: "0" },
+  { id: "np", name: "Nepal", dialCode: "977", format: "984 1234567", trunkPrefix: "0" },
+  { id: "nl", name: "Netherlands", dialCode: "31", format: "6 12345678", trunkPrefix: "0" },
+  { id: "nz", name: "New Zealand", dialCode: "64", format: "21 123 4567", trunkPrefix: "0" },
+  { id: "ng", name: "Nigeria", dialCode: "234", format: "802 123 4567", trunkPrefix: "0" },
+  { id: "mk", name: "North Macedonia", dialCode: "389", format: "72 345 678", trunkPrefix: "0" },
+  { id: "no", name: "Norway", dialCode: "47", format: "406 12 345" },
+  { id: "pk", name: "Pakistan", dialCode: "92", format: "301 2345678", trunkPrefix: "0" },
+  { id: "pa", name: "Panama", dialCode: "507", format: "6123 4567" },
+  { id: "pe", name: "Peru", dialCode: "51", format: "912 345 678", trunkPrefix: "0" },
+  { id: "ph", name: "Philippines", dialCode: "63", format: "905 123 4567", trunkPrefix: "0" },
+  { id: "pl", name: "Poland", dialCode: "48", format: "512 345 678" },
+  { id: "pt", name: "Portugal", dialCode: "351", format: "912 345 678" },
+  { id: "qa", name: "Qatar", dialCode: "974", format: "3312 3456" },
+  { id: "ro", name: "Romania", dialCode: "40", format: "712 034 567", trunkPrefix: "0" },
+  { id: "ru", name: "Russia", dialCode: "7", format: "912 345 67 89" },
+  { id: "sa", name: "Saudi Arabia", dialCode: "966", format: "51 234 5678", trunkPrefix: "0" },
+  { id: "sn", name: "Senegal", dialCode: "221", format: "70 123 45 67" },
+  { id: "rs", name: "Serbia", dialCode: "381", format: "60 123 4567", trunkPrefix: "0" },
+  { id: "sg", name: "Singapore", dialCode: "65", format: "8123 4567" },
+  { id: "sk", name: "Slovakia", dialCode: "421", format: "912 123 456", trunkPrefix: "0" },
+  { id: "si", name: "Slovenia", dialCode: "386", format: "31 234 567", trunkPrefix: "0" },
+  { id: "za", name: "South Africa", dialCode: "27", format: "71 123 4567", trunkPrefix: "0" },
+  { id: "kr", name: "South Korea", dialCode: "82", format: "10 1234 5678", trunkPrefix: "0" },
+  { id: "es", name: "Spain", dialCode: "34", format: "612 34 56 78" },
+  { id: "lk", name: "Sri Lanka", dialCode: "94", format: "71 234 5678", trunkPrefix: "0" },
+  { id: "se", name: "Sweden", dialCode: "46", format: "70 123 45 67", trunkPrefix: "0" },
+  { id: "ch", name: "Switzerland", dialCode: "41", format: "12 345 67 89", trunkPrefix: "0" },
+  { id: "tw", name: "Taiwan", dialCode: "886", format: "912 345 678", trunkPrefix: "0" },
+  { id: "tz", name: "Tanzania", dialCode: "255", format: "621 234 567", trunkPrefix: "0" },
+  { id: "th", name: "Thailand", dialCode: "66", format: "81 234 5678", trunkPrefix: "0" },
+  { id: "tn", name: "Tunisia", dialCode: "216", format: "20 123 456" },
+  { id: "tr", name: "Türkiye", dialCode: "90", format: "501 234 56 78", trunkPrefix: "0" },
+  { id: "ug", name: "Uganda", dialCode: "256", format: "712 345678", trunkPrefix: "0" },
+  { id: "ua", name: "Ukraine", dialCode: "380", format: "50 123 4567", trunkPrefix: "0" },
+  {
+    id: "ae",
+    name: "United Arab Emirates",
+    dialCode: "971",
+    format: "50 123 4567",
+    trunkPrefix: "0"
+  },
+  { id: "gb", name: "United Kingdom", dialCode: "44", format: "7123 456789", trunkPrefix: "0" },
+  { id: "us", name: "United States", dialCode: "1", format: "201-555-0123", trunkPrefix: "1" },
+  { id: "uy", name: "Uruguay", dialCode: "598", format: "94 231 234", trunkPrefix: "0" },
+  { id: "ve", name: "Venezuela", dialCode: "58", format: "412 123 4567", trunkPrefix: "0" },
+  { id: "vn", name: "Vietnam", dialCode: "84", format: "91 234 5678", trunkPrefix: "0" }
+], A = 127462, T = 65;
+function k(n) {
+  return /^[a-z]{2}$/i.test(n) ? String.fromCodePoint(
+    ...[...n.toUpperCase()].map(
+      (e) => A + e.charCodeAt(0) - T
     )
   ) : "";
 }
-function z(s) {
-  return s.replace(/\D/g, "");
+function V(n) {
+  return n.replace(/\D/g, "");
 }
-function E(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 I(n, e) {
+  if (!n) return "";
+  const t = e ? (e.format.match(/\d+/g) ?? []).map((h) => h.length) : [], o = [];
+  let a = n;
+  for (const h of t) {
+    if (!a) break;
+    o.push(a.slice(0, h)), a = a.slice(h);
+  }
+  if (t.length > 0)
+    a && o.push(a);
+  else
+    for (; a; )
+      o.push(a.slice(0, 3)), a = a.slice(3);
+  return o.join(" ");
+}
+function B(n, e) {
+  const t = e?.trunkPrefix;
+  return t && n.startsWith(t) ? t : void 0;
+}
+function x(n) {
+  return n.normalize("NFD").replace(/\p{Diacritic}/gu, "").toLowerCase();
 }
-function A(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;
+function N(n, e) {
+  const t = x(e.trim());
+  if (!t) return n;
+  const o = t.replace(/^\+/, "");
+  return n.filter(
+    (a) => x(a.name).includes(t) || o !== "" && a.dialCode.startsWith(o) || a.id === t
+  );
 }
-var B = Object.defineProperty, o = (s, e, r, t) => {
-  for (var u = void 0, p = s.length - 1, f; p >= 0; p--)
-    (f = s[p]) && (u = f(e, r, u) || u);
-  return u && B(e, r, u), u;
+var q = Object.defineProperty, i = (n, e, t, o) => {
+  for (var a = void 0, h = n.length - 1, p; h >= 0; h--)
+    (p = n[h]) && (a = p(e, t, a) || a);
+  return a && q(e, t, a), a;
 };
-const h = 18;
-class i extends b {
+const f = 18, F = /^([a-z]{2}):(\d*)$/;
+class r extends g {
   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 = O, this.country = "us", this.defaultValue = "", this.closeCountryPanel = (e) => {
+    super(...arguments), this.internals = null, this.passwordVisible = !1, this.countryOpen = !1, this.countryQuery = "", this.focused = !1, this.errorDismissed = !1, this.floating = new O(this, {
+      panel: () => this.shadowRoot?.querySelector(".country-panel"),
+      anchor: () => this.shadowRoot?.querySelector(".field")
+    }), this.value = "", this.name = "", this.type = "text", this.placeholder = "", this.size = "medium", this.disabled = !1, this.formDisabled = !1, this.readonly = !1, this.required = !1, this.icon = "", this.error = "", this.clearable = !0, this.label = "", this.autocomplete = "", this.countries = D, this.country = "us", this.defaultValue = "", this.closeCountryPanel = (e) => {
       e.composedPath().includes(this) || (this.countryOpen = !1);
     };
   }
@@ -66,8 +172,9 @@ class i extends b {
   }
   static {
     this.styles = [
-      b.styles,
-      w`
+      g.styles,
+      z,
+      v`
       :host {
         display: block;
       }
@@ -231,11 +338,8 @@ class i extends b {
         color: var(--text-muted);
       }
 
+      /* Placed from the field by FloatingController. */
       .country-panel {
-        position: absolute;
-        top: calc(100% + 6px);
-        left: 0;
-        z-index: var(--z-dropdown);
         display: flex;
         flex-direction: column;
         gap: var(--gap-element);
@@ -247,6 +351,9 @@ class i extends b {
       }
 
       .country-search {
+        /* Never shrunk by the list below it, which would otherwise take the
+           search box's height whenever there are more results than room. */
+        flex: none;
         width: 100%;
         height: var(--button-height-small);
         padding: 0 12px;
@@ -296,18 +403,30 @@ class i extends b {
     `
     ];
   }
+  /** Whether the control is off, by its own `disabled` or by its form. */
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
   connectedCallback() {
-    super.connectedCallback(), document.addEventListener("pointerdown", this.closeCountryPanel), this.internals ??= k(this), this.defaultValue = this.value, g(this.internals, this.formValue);
+    super.connectedCallback(), C(this.countryOpen, document, "pointerdown", this.closeCountryPanel), this.internals ??= S(this), this.defaultValue = this.value, b(this.internals, this.formValue, this.formState);
+  }
+  // Untyped: `countryOpen` is private, so not among the keys PropertyValues<this> knows.
+  updated(e) {
+    e.has("countryOpen") && C(this.countryOpen, document, "pointerdown", this.closeCountryPanel), this.floating.sync(this.countryOpen);
   }
   willUpdate(e) {
-    (e.has("value") || e.has("required") || e.has("error") || e.has("country") || this.stringsChanged(e)) && (g(this.internals, this.value), this.refreshValidity());
+    (e.has("value") || e.has("required") || e.has("error") || e.has("country") || e.has("countries") || e.has("type") || this.stringsChanged(e)) && (b(this.internals, this.formValue, this.formState), this.refreshValidity());
   }
   refreshValidity() {
-    const e = this.required && this.value.length === 0, r = this.error || (e ? d().required : "");
-    P(
+    const e = this.required && this.value.length === 0, t = this.phoneError, o = this.error || t || (e ? u().required : "");
+    E(
       this.internals,
-      { valueMissing: e, customError: !!this.error },
-      r
+      {
+        valueMissing: e,
+        patternMismatch: !!t,
+        customError: !!this.error
+      },
+      o
     );
   }
   disconnectedCallback() {
@@ -317,9 +436,17 @@ class i extends b {
   formResetCallback() {
     this.value = this.defaultValue, this.passwordVisible = !1;
   }
+  /**
+   * Called by the platform when the control's disabled state changes — its
+   * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+   */
+  formDisabledCallback(e) {
+    this.formDisabled = e;
+  }
   /** Called by the platform when the browser restores a session. */
   formStateRestoreCallback(e) {
-    this.value = e;
+    const t = F.exec(e);
+    this.isPhone && t ? (this.country = t[1], this.value = t[2]) : this.value = e;
   }
   focus(e) {
     this.input?.focus(e);
@@ -346,18 +473,36 @@ class i extends b {
   get formValue() {
     return !this.isPhone || !this.value ? this.value : `+${this.selectedCountry?.dialCode ?? ""}${this.value}`;
   }
+  /**
+   * What the browser saves for a restore. The international number cannot be
+   * split back into country and digits — `+1` is both the US and Canada — so
+   * phone mode saves the two apart.
+   */
+  get formState() {
+    return this.isPhone ? `${this.country}:${this.value}` : void 0;
+  }
+  /** Phone mode: a number typed with the prefix only dialled at home. */
+  get phoneError() {
+    if (!this.isPhone) return "";
+    const e = B(this.value, this.selectedCountry);
+    return e ? u().phoneTrunkPrefix(e) : "";
+  }
+  /** The message on show: the application's first, then the field's own. */
+  get shownError() {
+    return this.error || this.phoneError;
+  }
   get displayValue() {
-    return this.isPhone ? E(this.value, this.selectedCountry) : this.value;
+    return this.isPhone ? I(this.value, this.selectedCountry) : this.value;
   }
   get showClear() {
-    return this.clearable && this.value.length > 0 && !this.readonly && !this.disabled;
+    return this.clearable && this.value.length > 0 && !this.readonly && !this.inactive;
   }
   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 ? z(r) : r, c(this, "kt-input", { value: this.value });
+    const t = e.target.value;
+    this.value = this.isPhone ? V(t) : t, c(this, "kt-input", { value: this.value });
   }
   toggleCountryPanel() {
     this.countryOpen = !this.countryOpen, this.countryQuery = "";
@@ -369,47 +514,64 @@ class i extends b {
     e.key === "Escape" && this.countryOpen && (e.stopPropagation(), this.countryOpen = !1, this.shadowRoot?.querySelector(".country")?.focus());
   }
   renderCountryPicker() {
-    const e = this.selectedCountry, r = A(this.countries, this.countryQuery);
-    return l`<button
+    const e = this.selectedCountry, t = N(this.countries, this.countryQuery);
+    return d`<button
         type="button"
         class="country"
         aria-haspopup="listbox"
         aria-expanded=${this.countryOpen ? "true" : "false"}
-        aria-label=${d().countryCode(e?.name)}
-        ?disabled=${this.disabled || this.readonly}
+        aria-label=${u().countryCode(e?.name)}
+        ?disabled=${this.inactive || this.readonly}
         @click=${this.toggleCountryPanel}
       >
-        <span aria-hidden="true">${v(this.country)}</span>
+        <span aria-hidden="true">${k(this.country)}</span>
         <span class="dial">+${e?.dialCode ?? ""}</span>
-        <span class=${m({ chevron: !0, open: this.countryOpen })}>
+        <span class=${y({ 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()}>
+      ${this.countryOpen ? d`<div
+              class="country-panel floating"
+              popover="manual"
+              @pointerdown=${(o) => o.stopPropagation()}
+            >
               <input
                 class="country-search"
-                placeholder=${d().searchCountry}
+                placeholder=${u().searchCountry}
                 .value=${this.countryQuery}
-                aria-label=${d().searchCountry}
-                @input=${(t) => {
-      this.countryQuery = t.target.value;
+                aria-label=${u().searchCountry}
+                @input=${(o) => {
+      this.countryQuery = o.target.value;
     }}
               />
               <ul class="country-list" role="listbox">
-                ${r.length === 0 ? l`<li class="country-empty">${d().noCountry}</li>` : r.map(
-      (t) => l`<li
+                ${t.length === 0 ? d`<li class="country-empty">${u().noCountry}</li>` : t.map(
+      (o) => d`<li
                             class="country-item"
                             role="option"
-                            aria-selected=${t.id === this.country ? "true" : "false"}
-                            @click=${() => this.selectCountry(t)}
+                            aria-selected=${o.id === this.country ? "true" : "false"}
+                            @click=${() => this.selectCountry(o)}
                           >
-                            <span aria-hidden="true">${v(t.id)}</span>
-                            <span class="country-name">${t.name}</span>
-                            <span class="dial">+${t.dialCode}</span>
+                            <span aria-hidden="true">${k(o.id)}</span>
+                            <span class="country-name">${o.name}</span>
+                            <span class="dial">+${o.dialCode}</span>
                           </li>`
     )}
               </ul>
-            </div>` : n}`;
+            </div>` : s}`;
+  }
+  onFocus() {
+    this.focused = !0, this.errorDismissed = !1;
+  }
+  onBlur() {
+    this.focused = !1;
+  }
+  /** WCAG 1.4.13: content shown on focus can be dismissed without moving it. */
+  onControlKeyDown(e) {
+    e.key !== "Escape" || !this.errorTooltipOpen || (e.stopPropagation(), this.errorDismissed = !0);
+  }
+  get errorTooltipOpen() {
+    return this.focused && !this.errorDismissed && !!this.shownError;
   }
   onChange(e) {
     e.stopPropagation(), c(this, "kt-change", { value: this.value });
@@ -424,15 +586,30 @@ class i extends b {
   onFieldPointerDown(e) {
     e.target !== this.input && (e.target.closest("button") || (e.preventDefault(), this.focus()));
   }
+  /** Both buttons are out of the tab order, so their tooltips are for the pointer. */
+  renderPasswordToggle() {
+    const e = this.passwordVisible ? u().hidePassword : u().showPassword;
+    return d`<kt-tooltip text=${e}>
+      <button
+        type="button"
+        class="icon-button"
+        tabindex="-1"
+        aria-label=${e}
+        @click=${this.togglePassword}
+      >
+        <kt-icon name=${this.passwordVisible ? "eye-off" : "eye"} size=${f}></kt-icon>
+      </button>
+    </kt-tooltip>`;
+  }
   render() {
-    const e = this.type === "password" || !!this.icon || !!this.error || this.showClear;
-    return l`<div
+    const e = this.shownError, t = this.type === "password" || !!this.icon || !!e || this.showClear;
+    return d`<div
       part="base"
-      class=${m({
+      class=${y({
       field: !0,
       [this.size]: !0,
-      error: !!this.error,
-      disabled: this.disabled
+      error: !!e,
+      disabled: this.inactive
     })}
       @pointerdown=${this.onFieldPointerDown}
       @keydown=${this.onCountryKeyDown}
@@ -440,122 +617,131 @@ class i extends b {
       ${// The icon only shows that something is wrong; this is what gets read
     // out. aria-describedby rather than aria-errormessage, which most
     // screen readers still ignore.
-    this.error ? l`<span id="error-message" class="visually-hidden">${this.error}</span>` : n}
-      ${this.isPhone ? this.renderCountryPicker() : n}
+    e ? d`<span id="error-message" class="visually-hidden">${e}</span>` : s}
+      ${this.isPhone ? this.renderCountryPicker() : s}
 
       <input
         part="control"
         type=${this.resolvedType}
-        name=${this.name || n}
-        .value=${$(this.displayValue)}
-        placeholder=${this.placeholder || this.selectedCountry?.format || n}
-        autocomplete=${this.autocomplete || n}
-        inputmode=${this.isPhone ? "tel" : n}
-        maxlength=${this.maxlength ?? n}
-        aria-label=${this.label || n}
-        aria-invalid=${this.error ? "true" : n}
-        aria-describedby=${this.error ? "error-message" : n}
-        ?disabled=${this.disabled}
+        name=${this.name || s}
+        .value=${w(this.displayValue)}
+        placeholder=${this.placeholder || this.isPhone && this.selectedCountry?.format || s}
+        autocomplete=${this.autocomplete || s}
+        inputmode=${this.isPhone ? "tel" : s}
+        maxlength=${this.maxlength ?? s}
+        aria-label=${this.label || s}
+        aria-invalid=${e ? "true" : s}
+        aria-describedby=${e ? "error-message" : s}
+        ?disabled=${this.inactive}
         ?readonly=${this.readonly}
         ?required=${this.required}
         @input=${this.onInput}
         @change=${this.onChange}
+        @focus=${this.onFocus}
+        @blur=${this.onBlur}
+        @keydown=${this.onControlKeyDown}
       />
 
-      ${e ? l`<div part="actions" class="actions">
-              ${this.type === "password" ? l`<button
-                      type="button"
-                      class="icon-button"
-                      tabindex="-1"
-                      aria-label=${this.passwordVisible ? d().hidePassword : d().showPassword}
-                      @click=${this.togglePassword}
-                    >
-                      <kt-icon
-                        name=${this.passwordVisible ? "eye-off" : "eye"}
-                        size=${h}
-                      ></kt-icon>
-                    </button>` : n}
-              ${this.icon ? l`<span class="adornment">
-                      <kt-icon name=${this.icon} size=${h}></kt-icon>
-                    </span>` : n}
-              ${this.error ? l`<span class="adornment error-icon" title=${this.error}>
-                      <kt-icon name="circle-alert" size=${h} label=${this.error}></kt-icon>
-                    </span>` : n}
-              ${this.showClear ? l`<button
-                      type="button"
-                      class="icon-button clear"
-                      tabindex="-1"
-                      aria-label=${d().clear}
-                      @click=${this.clear}
+      ${t ? d`<div part="actions" class="actions">
+              ${this.type === "password" ? this.renderPasswordToggle() : s}
+              ${this.icon ? d`<span class="adornment">
+                      <kt-icon name=${this.icon} size=${f}></kt-icon>
+                    </span>` : s}
+              ${// The message on hover, and while the field has focus for whoever
+    // uses a keyboard; aria-describedby is what a screen reader reads.
+    e ? d`<kt-tooltip
+                      class="adornment error-icon"
+                      text=${e}
+                      ?open=${this.errorTooltipOpen}
                     >
-                      <kt-icon name="x" size=${h}></kt-icon>
-                    </button>` : n}
-            </div>` : n}
+                      <kt-icon name="circle-alert" size=${f}></kt-icon>
+                    </kt-tooltip>` : s}
+              ${this.showClear ? d`<kt-tooltip text=${u().clear}>
+                      <button
+                        type="button"
+                        class="icon-button clear"
+                        tabindex="-1"
+                        aria-label=${u().clear}
+                        @click=${this.clear}
+                      >
+                        <kt-icon name="x" size=${f}></kt-icon>
+                      </button>
+                    </kt-tooltip>` : s}
+            </div>` : s}
     </div>`;
   }
 }
-o([
-  x("input")
-], i.prototype, "input");
-o([
-  y()
-], i.prototype, "passwordVisible");
-o([
-  y()
-], i.prototype, "countryOpen");
-o([
-  y()
-], i.prototype, "countryQuery");
-o([
-  a({ type: String })
-], i.prototype, "value");
-o([
-  a({ type: String })
-], i.prototype, "name");
-o([
-  a({ type: String })
-], i.prototype, "type");
-o([
-  a({ type: String })
-], i.prototype, "placeholder");
-o([
-  a({ type: String, reflect: !0 })
-], i.prototype, "size");
-o([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "disabled");
-o([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "readonly");
-o([
-  a({ type: Boolean, reflect: !0 })
-], i.prototype, "required");
-o([
-  a({ type: String })
-], i.prototype, "icon");
-o([
-  a({ type: String, reflect: !0 })
-], i.prototype, "error");
-o([
-  a({ type: Boolean })
-], i.prototype, "clearable");
-o([
-  a({ type: String })
-], i.prototype, "label");
-o([
-  a({ type: String })
-], i.prototype, "autocomplete");
-o([
-  a({ type: Number })
-], i.prototype, "maxlength");
-o([
-  a({ attribute: !1 })
-], i.prototype, "countries");
-o([
-  a({ type: String })
-], i.prototype, "country");
-C("kt-input", i);
+i([
+  P("input")
+], r.prototype, "input");
+i([
+  m()
+], r.prototype, "passwordVisible");
+i([
+  m()
+], r.prototype, "countryOpen");
+i([
+  m()
+], r.prototype, "countryQuery");
+i([
+  m()
+], r.prototype, "focused");
+i([
+  m()
+], r.prototype, "errorDismissed");
+i([
+  l({ type: String })
+], r.prototype, "value");
+i([
+  l({ type: String })
+], r.prototype, "name");
+i([
+  l({ type: String })
+], r.prototype, "type");
+i([
+  l({ type: String })
+], r.prototype, "placeholder");
+i([
+  l({ type: String, reflect: !0 })
+], r.prototype, "size");
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "disabled");
+i([
+  m()
+], r.prototype, "formDisabled");
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "readonly");
+i([
+  l({ type: Boolean, reflect: !0 })
+], r.prototype, "required");
+i([
+  l({ type: String })
+], r.prototype, "icon");
+i([
+  l({ type: String, reflect: !0 })
+], r.prototype, "error");
+i([
+  l({ type: Boolean })
+], r.prototype, "clearable");
+i([
+  l({ type: String })
+], r.prototype, "label");
+i([
+  l({ type: String })
+], r.prototype, "autocomplete");
+i([
+  l({ type: Number })
+], r.prototype, "maxlength");
+i([
+  l({ attribute: !1 })
+], r.prototype, "countries");
+i([
+  l({ type: String })
+], r.prototype, "country");
+$("kt-input", r);
 export {
-  i as KtInput
+  r as KtInput
 };
 //# sourceMappingURL=kt-input.js.map