kanto-ds 1.0.1 → 1.2.0

package/dist/components/forms/kt-drag-drop/kt-drag-drop.js

@@ -1,26 +1,30 @@
 import { css as g, nothing as d, html as p } from "lit";
-import { query as v, state as u, property as l } from "lit/decorators.js";
+import { query as v, state as u, property as o } from "lit/decorators.js";
 import { classMap as y } from "lit/directives/class-map.js";
-import { K as f, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as f, d as b } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { e as c } from "../../../chunks/events-Bjl5Zmmq.js";
+import { a as x, s as k, b as $ } from "../../../chunks/form-control-CxjBTt1c.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-button/kt-button.js";
 const m = ["B", "KB", "MB", "GB", "TB"];
-function x(o) {
-  if (!Number.isFinite(o) || o < 0) return "";
-  let e = o, t = 0;
+function w(l) {
+  if (!Number.isFinite(l) || l < 0) return "";
+  let e = l, t = 0;
   for (; e >= 1024 && t < m.length - 1; )
     e /= 1024, t += 1;
   return `${t === 0 ? String(Math.round(e)) : e.toFixed(1)} ${m[t]}`;
 }
-var $ = Object.defineProperty, s = (o, e, t, n) => {
-  for (var r = void 0, a = o.length - 1, h; a >= 0; a--)
-    (h = o[a]) && (r = h(e, t, r) || r);
-  return r && $(e, t, r), r;
+var z = Object.defineProperty, r = (l, e, t, a) => {
+  for (var s = void 0, n = l.length - 1, h; n >= 0; n--)
+    (h = l[n]) && (s = h(e, t, s) || s);
+  return s && z(e, t, s), s;
 };
 class i extends f {
   constructor() {
-    super(...arguments), this.dragging = !1, this.files = [], this.heading = "Drag and drop or", this.linkText = "browse your files", this.recommendedSize = "", this.multiple = !0, this.accept = "", this.maxSize = 0, this.disabled = !1;
+    super(...arguments), this.internals = null, this.dragging = !1, this.files = [], this.heading = "Drag and drop or", this.linkText = "browse your files", this.recommendedSize = "", this.multiple = !0, this.accept = "", this.maxSize = 0, this.disabled = !1, this.name = "", this.required = !1;
+  }
+  static {
+    this.formAssociated = !0;
   }
   static {
     this.styles = [
@@ -74,7 +78,7 @@ class i extends f {
 
       .title {
         margin: 0;
-        color: var(--color-primary-base);
+        color: var(--color-primary-text);
         font: var(--font-normal-medium);
       }
 
@@ -120,7 +124,7 @@ class i extends f {
         width: 48px;
         height: 48px;
         overflow: hidden;
-        color: var(--color-info-base);
+        color: var(--color-info-text);
         background: var(--color-dark-14);
         border-radius: 6px;
       }
@@ -151,6 +155,29 @@ class i extends f {
     `
     ];
   }
+  connectedCallback() {
+    super.connectedCallback(), this.internals ??= x(this);
+  }
+  // Untyped: `files` is private state, which PropertyValues<this> cannot name.
+  willUpdate(e) {
+    (e.has("files") || e.has("name") || e.has("required")) && this.syncFormValue();
+  }
+  syncFormValue() {
+    let e = null;
+    if (this.name && this.files.length > 0) {
+      e = new FormData();
+      for (const a of this.files) e.append(this.name, a);
+    }
+    k(this.internals, e);
+    const t = this.required && this.files.length === 0;
+    $(this.internals, { valueMissing: t }, t ? "Select a file." : "");
+  }
+  formResetCallback() {
+    this.files = [], this.dragging = !1;
+  }
+  formStateRestoreCallback(e) {
+    !(e instanceof FormData) || !this.name || (this.files = e.getAll(this.name).filter((t) => t instanceof File));
+  }
   /** The files currently held, newest last. */
   get selectedFiles() {
     return this.files;
@@ -168,14 +195,14 @@ class i extends f {
   }
   addFiles(e) {
     if (!e || e.length === 0) return;
-    const t = this.multiple ? [...e] : [...e].slice(0, 1), n = t.filter((a) => this.accepts(a)), r = t.filter((a) => !this.accepts(a));
-    r.length > 0 && c(this, "kt-files-rejected", {
-      files: r,
-      reason: this.maxSize > 0 && r.some((a) => a.size > this.maxSize) ? "size" : "type"
-    }), n.length !== 0 && (this.files = this.multiple ? [...this.files, ...n] : n, c(this, "kt-files-change", { files: this.files }));
+    const t = this.multiple ? [...e] : [...e].slice(0, 1), a = t.filter((n) => this.accepts(n)), s = t.filter((n) => !this.accepts(n));
+    s.length > 0 && c(this, "kt-files-rejected", {
+      files: s,
+      reason: this.maxSize > 0 && s.some((n) => n.size > this.maxSize) ? "size" : "type"
+    }), a.length !== 0 && (this.files = this.multiple ? [...this.files, ...a] : a, c(this, "kt-files-change", { files: this.files }));
   }
   removeAt(e) {
-    this.files = this.files.filter((t, n) => n !== e), c(this, "kt-files-change", { files: this.files });
+    this.files = this.files.filter((t, a) => a !== e), c(this, "kt-files-change", { files: this.files });
   }
   browse() {
     this.disabled || this.fileInput?.click();
@@ -233,7 +260,7 @@ class i extends f {
                     <span class="info">
                       <span class="name" title=${e.name}>${e.name}</span>
                       <span class="details">
-                        <span>${x(e.size)}</span>
+                        <span>${w(e.size)}</span>
                         ${e.type ? p`<span>•</span><span>${e.type}</span>` : d}
                       </span>
                     </span>
@@ -250,36 +277,42 @@ class i extends f {
     </div>`;
   }
 }
-s([
+r([
   v('input[type="file"]')
 ], i.prototype, "fileInput");
-s([
+r([
   u()
 ], i.prototype, "dragging");
-s([
+r([
   u()
 ], i.prototype, "files");
-s([
-  l({ type: String })
+r([
+  o({ type: String })
 ], i.prototype, "heading");
-s([
-  l({ type: String, attribute: "link-text" })
+r([
+  o({ type: String, attribute: "link-text" })
 ], i.prototype, "linkText");
-s([
-  l({ type: String, attribute: "recommended-size" })
+r([
+  o({ type: String, attribute: "recommended-size" })
 ], i.prototype, "recommendedSize");
-s([
-  l({ type: Boolean })
+r([
+  o({ type: Boolean })
 ], i.prototype, "multiple");
-s([
-  l({ type: String })
+r([
+  o({ type: String })
 ], i.prototype, "accept");
-s([
-  l({ type: Number, attribute: "max-size" })
+r([
+  o({ type: Number, attribute: "max-size" })
 ], i.prototype, "maxSize");
-s([
-  l({ type: Boolean, reflect: !0 })
+r([
+  o({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled");
+r([
+  o({ type: String })
+], i.prototype, "name");
+r([
+  o({ type: Boolean, reflect: !0 })
+], i.prototype, "required");
 b("kt-drag-drop", i);
 export {
   i as KtDragDrop

package/dist/components/forms/kt-drag-drop/kt-drag-drop.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-drag-drop.js","sources":["../../../../src/internal/format.ts","../../../../src/components/forms/kt-drag-drop/kt-drag-drop.ts"],"sourcesContent":["/** Formatting helpers shared by elements that display data. */\n\nconst UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;\n\n/**\n * A human-readable file size.\n *\n * Uses 1024 steps, matching what every desktop file manager shows, and one\n * decimal above a kilobyte — \"1.4 MB\" reads; \"1468006 B\" does not.\n */\nexport function formatFileSize(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return '';\n\n  let value = bytes;\n  let unit = 0;\n  while (value >= 1024 && unit < UNITS.length - 1) {\n    value /= 1024;\n    unit += 1;\n  }\n\n  const rounded = unit === 0 ? String(Math.round(value)) : value.toFixed(1);\n  return `${rounded} ${UNITS[unit]}`;\n}\n","import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { formatFileSize } from '#internal/format';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../core/kt-button/kt-button.js';\n\n/**\n * A file drop zone.\n *\n * Accepts a drop or a click, lists what was picked with sizes and types, and\n * lets each entry be removed. It holds the files in memory and reports them —\n * uploading is the application's business.\n *\n * @element kt-drag-drop\n *\n * @csspart base - The dashed drop zone.\n * @csspart list - The list of chosen files.\n *\n * @fires kt-files-change - The selection changed. `detail: { files }`.\n * @fires kt-files-rejected - Files were refused. `detail: { files, reason }`.\n *\n * @example\n * ```html\n * <kt-drag-drop accept=\"image/*\" recommended-size=\"800×400px\"></kt-drag-drop>\n * ```\n */\nexport class KtDragDrop extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        user-select: none;\n      }\n\n      .zone {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: var(--gap-drag-drop);\n        padding: var(--padding-drag-drop);\n        border: var(--border-width) dashed var(--color-dark-24);\n        border-radius: var(--border-radius);\n        cursor: pointer;\n        transition:\n          border-color var(--duration-instant),\n          box-shadow var(--duration-instant);\n      }\n\n      .zone:hover {\n        border-color: var(--text-muted);\n      }\n\n      .zone:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .dragover {\n        border-color: var(--color-primary-base);\n        box-shadow: 0 0 0 6px var(--color-primary-soft);\n      }\n\n      .prompt {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--gap-button);\n        text-align: center;\n      }\n\n      .prompt-icon {\n        color: var(--text-muted);\n      }\n\n      .title {\n        margin: 0;\n        color: var(--color-primary-base);\n        font: var(--font-normal-medium);\n      }\n\n      .hint {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n\n      input[type='file'] {\n        display: none;\n      }\n\n      .list {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        width: 100%;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      .item {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        width: 100%;\n        padding: 12px;\n        background: var(--surface-raised);\n        border-radius: var(--border-radius);\n        cursor: default;\n        transition: background var(--duration-normal) var(--easing-standard);\n      }\n      .item:hover {\n        background: var(--surface-hover);\n      }\n\n      .preview {\n        display: flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n        width: 48px;\n        height: 48px;\n        overflow: hidden;\n        color: var(--color-info-base);\n        background: var(--color-dark-14);\n        border-radius: 6px;\n      }\n\n      .info {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 0;\n      }\n\n      .name {\n        overflow: hidden;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .details {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  @query('input[type=\"file\"]')\n  private fileInput!: HTMLInputElement;\n\n  @state()\n  private dragging = false;\n\n  @state()\n  private files: File[] = [];\n\n  /**\n   * The prompt above the browse link.\n   *\n   * Named `heading`, not `title`: an element already has a `title`, and\n   * reusing it would put the prompt in a native tooltip on the whole zone.\n   */\n  @property({ type: String })\n  heading = 'Drag and drop or';\n\n  /** The clickable-looking part of the prompt. */\n  @property({ type: String, attribute: 'link-text' })\n  linkText = 'browse your files';\n\n  /** Optional hint, e.g. `800×400px`. */\n  @property({ type: String, attribute: 'recommended-size' })\n  recommendedSize = '';\n\n  @property({ type: Boolean })\n  multiple = true;\n\n  /** Same syntax as the native `accept`: `image/*`, `.pdf,.docx`. */\n  @property({ type: String })\n  accept = '';\n\n  /** Largest accepted file, in bytes. Zero means no limit. */\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize = 0;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** The files currently held, newest last. */\n  get selectedFiles(): readonly File[] {\n    return this.files;\n  }\n\n  /** Empties the selection without firing a rejection. */\n  clear(): void {\n    this.files = [];\n    emit(this, 'kt-files-change', { files: this.files });\n  }\n\n  /**\n   * `accept` is advisory on a native input — the OS dialog filters, but a\n   * dropped file bypasses it entirely — so the same rules are enforced here.\n   */\n  private accepts(file: File): boolean {\n    if (this.maxSize > 0 && file.size > this.maxSize) return false;\n    if (!this.accept) return true;\n\n    return this.accept\n      .split(',')\n      .map((pattern) => pattern.trim().toLowerCase())\n      .filter(Boolean)\n      .some((pattern) => {\n        if (pattern.startsWith('.')) return file.name.toLowerCase().endsWith(pattern);\n        if (pattern.endsWith('/*')) return file.type.startsWith(pattern.slice(0, -1));\n        return file.type.toLowerCase() === pattern;\n      });\n  }\n\n  private addFiles(incoming: FileList | null): void {\n    if (!incoming || incoming.length === 0) return;\n\n    const candidates = this.multiple ? [...incoming] : [...incoming].slice(0, 1);\n    const accepted = candidates.filter((file) => this.accepts(file));\n    const rejected = candidates.filter((file) => !this.accepts(file));\n\n    if (rejected.length > 0) {\n      emit(this, 'kt-files-rejected', {\n        files: rejected,\n        reason: this.maxSize > 0 && rejected.some((f) => f.size > this.maxSize) ? 'size' : 'type',\n      });\n    }\n    if (accepted.length === 0) return;\n\n    this.files = this.multiple ? [...this.files, ...accepted] : accepted;\n    emit(this, 'kt-files-change', { files: this.files });\n  }\n\n  private removeAt(index: number): void {\n    this.files = this.files.filter((_, position) => position !== index);\n    emit(this, 'kt-files-change', { files: this.files });\n  }\n\n  private browse(): void {\n    if (this.disabled) return;\n    this.fileInput?.click();\n  }\n\n  private onZoneKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    event.preventDefault();\n    this.browse();\n  }\n\n  private onDragOver(event: DragEvent): void {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.dragging = true;\n  }\n\n  private onDrop(event: DragEvent): void {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.dragging = false;\n    this.addFiles(event.dataTransfer?.files ?? null);\n  }\n\n  override render(): TemplateResult {\n    return html`<div\n      part=\"base\"\n      class=${classMap({ zone: true, dragover: this.dragging })}\n      role=\"button\"\n      tabindex=${this.disabled ? -1 : 0}\n      aria-disabled=${this.disabled ? 'true' : nothing}\n      aria-label=${`${this.heading} ${this.linkText}`}\n      @click=${this.browse}\n      @keydown=${this.onZoneKeyDown}\n      @dragover=${this.onDragOver}\n      @dragleave=${() => {\n        this.dragging = false;\n      }}\n      @drop=${this.onDrop}\n    >\n      <input\n        type=\"file\"\n        ?multiple=${this.multiple}\n        accept=${this.accept || nothing}\n        @click=${(event: Event) => event.stopPropagation()}\n        @change=${(event: Event) => this.addFiles((event.target as HTMLInputElement).files)}\n      />\n\n      <div class=\"prompt\">\n        <span class=\"prompt-icon\"><kt-icon name=\"file-up\" size=\"24\"></kt-icon></span>\n        <div>\n          <p class=\"title\">${this.heading} ${this.linkText}</p>\n          ${\n            this.recommendedSize\n              ? html`<div class=\"hint\">Recommended image size: ${this.recommendedSize}</div>`\n              : nothing\n          }\n        </div>\n      </div>\n\n      ${\n        this.files.length > 0\n          ? html`<ul\n              part=\"list\"\n              class=\"list\"\n              aria-label=\"Selected files\"\n              @click=${(event: Event) => event.stopPropagation()}\n            >\n              ${this.files.map(\n                (file, index) =>\n                  html`<li class=\"item\">\n                    <span class=\"preview\"><kt-icon name=\"file\" size=\"24\"></kt-icon></span>\n                    <span class=\"info\">\n                      <span class=\"name\" title=${file.name}>${file.name}</span>\n                      <span class=\"details\">\n                        <span>${formatFileSize(file.size)}</span>\n                        ${file.type ? html`<span>•</span><span>${file.type}</span>` : nothing}\n                      </span>\n                    </span>\n                    <kt-button\n                      variant=\"danger\"\n                      size=\"small\"\n                      icon=\"trash-2\"\n                      label=${`Remove ${file.name}`}\n                      @click=${() => this.removeAt(index)}\n                    ></kt-button>\n                  </li>`,\n              )}\n            </ul>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-drag-drop', KtDragDrop);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-drag-drop': KtDragDrop;\n  }\n}\n"],"names":["UNITS","formatFileSize","bytes","value","unit","KtDragDrop","KtElement","css","emit","file","pattern","incoming","candidates","accepted","rejected","f","index","_","position","event","html","classMap","nothing","__decorateClass","query","state","property","defineElement"],"mappings":"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"}
+{"version":3,"file":"kt-drag-drop.js","sources":["../../../../src/internal/format.ts","../../../../src/components/forms/kt-drag-drop/kt-drag-drop.ts"],"sourcesContent":["/** Formatting helpers shared by elements that display data. */\n\nconst UNITS = ['B', 'KB', 'MB', 'GB', 'TB'] as const;\n\n/**\n * A human-readable file size.\n *\n * Uses 1024 steps, matching what every desktop file manager shows, and one\n * decimal above a kilobyte — \"1.4 MB\" reads; \"1468006 B\" does not.\n */\nexport function formatFileSize(bytes: number): string {\n  if (!Number.isFinite(bytes) || bytes < 0) return '';\n\n  let value = bytes;\n  let unit = 0;\n  while (value >= 1024 && unit < UNITS.length - 1) {\n    value /= 1024;\n    unit += 1;\n  }\n\n  const rounded = unit === 0 ? String(Math.round(value)) : value.toFixed(1);\n  return `${rounded} ${UNITS[unit]}`;\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 { 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 { formatFileSize } from '#internal/format';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../core/kt-button/kt-button.js';\n\n/**\n * A file drop zone.\n *\n * Accepts a drop or a click, lists what was picked with sizes and types, and\n * lets each entry be removed. It holds the files in memory and reports them —\n * uploading is the application's business.\n *\n * @element kt-drag-drop\n *\n * @csspart base - The dashed drop zone.\n * @csspart list - The list of chosen files.\n *\n * @fires kt-files-change - The selection changed. `detail: { files }`.\n * @fires kt-files-rejected - Files were refused. `detail: { files, reason }`.\n *\n * @example\n * ```html\n * <kt-drag-drop accept=\"image/*\" recommended-size=\"800×400px\"></kt-drag-drop>\n * ```\n */\nexport class KtDragDrop extends KtElement {\n  static readonly formAssociated = true;\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        user-select: none;\n      }\n\n      .zone {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: var(--gap-drag-drop);\n        padding: var(--padding-drag-drop);\n        border: var(--border-width) dashed var(--color-dark-24);\n        border-radius: var(--border-radius);\n        cursor: pointer;\n        transition:\n          border-color var(--duration-instant),\n          box-shadow var(--duration-instant);\n      }\n\n      .zone:hover {\n        border-color: var(--text-muted);\n      }\n\n      .zone:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .dragover {\n        border-color: var(--color-primary-base);\n        box-shadow: 0 0 0 6px var(--color-primary-soft);\n      }\n\n      .prompt {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: var(--gap-button);\n        text-align: center;\n      }\n\n      .prompt-icon {\n        color: var(--text-muted);\n      }\n\n      .title {\n        margin: 0;\n        color: var(--color-primary-text);\n        font: var(--font-normal-medium);\n      }\n\n      .hint {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n\n      input[type='file'] {\n        display: none;\n      }\n\n      .list {\n        display: flex;\n        flex-direction: column;\n        gap: 8px;\n        width: 100%;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      .item {\n        display: flex;\n        align-items: center;\n        gap: 12px;\n        width: 100%;\n        padding: 12px;\n        background: var(--surface-raised);\n        border-radius: var(--border-radius);\n        cursor: default;\n        transition: background var(--duration-normal) var(--easing-standard);\n      }\n      .item:hover {\n        background: var(--surface-hover);\n      }\n\n      .preview {\n        display: flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n        width: 48px;\n        height: 48px;\n        overflow: hidden;\n        color: var(--color-info-text);\n        background: var(--color-dark-14);\n        border-radius: 6px;\n      }\n\n      .info {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 0;\n      }\n\n      .name {\n        overflow: hidden;\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .details {\n        display: flex;\n        align-items: center;\n        gap: 6px;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  @query('input[type=\"file\"]')\n  private fileInput!: HTMLInputElement;\n\n  private internals: UsableInternals | null = null;\n\n  @state()\n  private dragging = false;\n\n  @state()\n  private files: File[] = [];\n\n  /**\n   * The prompt above the browse link.\n   *\n   * Named `heading`, not `title`: an element already has a `title`, and\n   * reusing it would put the prompt in a native tooltip on the whole zone.\n   */\n  @property({ type: String })\n  heading = 'Drag and drop or';\n\n  /** The clickable-looking part of the prompt. */\n  @property({ type: String, attribute: 'link-text' })\n  linkText = 'browse your files';\n\n  /** Optional hint, e.g. `800×400px`. */\n  @property({ type: String, attribute: 'recommended-size' })\n  recommendedSize = '';\n\n  @property({ type: Boolean })\n  multiple = true;\n\n  /** Same syntax as the native `accept`: `image/*`, `.pdf,.docx`. */\n  @property({ type: String })\n  accept = '';\n\n  /** Largest accepted file, in bytes. Zero means no limit. */\n  @property({ type: Number, attribute: 'max-size' })\n  maxSize = 0;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** The files are submitted under this name, as by `<input type=\"file\">`. */\n  @property({ type: String })\n  name = '';\n\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.internals ??= attachFormInternals(this);\n  }\n\n  // Untyped: `files` is private state, which PropertyValues<this> cannot name.\n  override willUpdate(changed: PropertyValues): void {\n    if (changed.has('files') || changed.has('name') || changed.has('required')) {\n      this.syncFormValue();\n    }\n  }\n\n  private syncFormValue(): void {\n    // Like a native file input: nothing is submitted without a name or without\n    // a file, and each file is its own entry under the one name.\n    let value: FormData | null = null;\n    if (this.name && this.files.length > 0) {\n      value = new FormData();\n      for (const file of this.files) value.append(this.name, file);\n    }\n    setFormValue(this.internals, value);\n\n    const missing = this.required && this.files.length === 0;\n    setValidity(this.internals, { valueMissing: missing }, missing ? 'Select a file.' : '');\n  }\n\n  formResetCallback(): void {\n    this.files = [];\n    this.dragging = false;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null): void {\n    if (!(state instanceof FormData) || !this.name) return;\n    this.files = state.getAll(this.name).filter((entry): entry is File => entry instanceof File);\n  }\n\n  /** The files currently held, newest last. */\n  get selectedFiles(): readonly File[] {\n    return this.files;\n  }\n\n  /** Empties the selection without firing a rejection. */\n  clear(): void {\n    this.files = [];\n    emit(this, 'kt-files-change', { files: this.files });\n  }\n\n  /**\n   * `accept` is advisory on a native input — the OS dialog filters, but a\n   * dropped file bypasses it entirely — so the same rules are enforced here.\n   */\n  private accepts(file: File): boolean {\n    if (this.maxSize > 0 && file.size > this.maxSize) return false;\n    if (!this.accept) return true;\n\n    return this.accept\n      .split(',')\n      .map((pattern) => pattern.trim().toLowerCase())\n      .filter(Boolean)\n      .some((pattern) => {\n        if (pattern.startsWith('.')) return file.name.toLowerCase().endsWith(pattern);\n        if (pattern.endsWith('/*')) return file.type.startsWith(pattern.slice(0, -1));\n        return file.type.toLowerCase() === pattern;\n      });\n  }\n\n  private addFiles(incoming: FileList | null): void {\n    if (!incoming || incoming.length === 0) return;\n\n    const candidates = this.multiple ? [...incoming] : [...incoming].slice(0, 1);\n    const accepted = candidates.filter((file) => this.accepts(file));\n    const rejected = candidates.filter((file) => !this.accepts(file));\n\n    if (rejected.length > 0) {\n      emit(this, 'kt-files-rejected', {\n        files: rejected,\n        reason: this.maxSize > 0 && rejected.some((f) => f.size > this.maxSize) ? 'size' : 'type',\n      });\n    }\n    if (accepted.length === 0) return;\n\n    this.files = this.multiple ? [...this.files, ...accepted] : accepted;\n    emit(this, 'kt-files-change', { files: this.files });\n  }\n\n  private removeAt(index: number): void {\n    this.files = this.files.filter((_, position) => position !== index);\n    emit(this, 'kt-files-change', { files: this.files });\n  }\n\n  private browse(): void {\n    if (this.disabled) return;\n    this.fileInput?.click();\n  }\n\n  private onZoneKeyDown(event: KeyboardEvent): void {\n    if (event.key !== 'Enter' && event.key !== ' ') return;\n    event.preventDefault();\n    this.browse();\n  }\n\n  private onDragOver(event: DragEvent): void {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.dragging = true;\n  }\n\n  private onDrop(event: DragEvent): void {\n    if (this.disabled) return;\n    event.preventDefault();\n    this.dragging = false;\n    this.addFiles(event.dataTransfer?.files ?? null);\n  }\n\n  override render(): TemplateResult {\n    return html`<div\n      part=\"base\"\n      class=${classMap({ zone: true, dragover: this.dragging })}\n      role=\"button\"\n      tabindex=${this.disabled ? -1 : 0}\n      aria-disabled=${this.disabled ? 'true' : nothing}\n      aria-label=${`${this.heading} ${this.linkText}`}\n      @click=${this.browse}\n      @keydown=${this.onZoneKeyDown}\n      @dragover=${this.onDragOver}\n      @dragleave=${() => {\n        this.dragging = false;\n      }}\n      @drop=${this.onDrop}\n    >\n      <input\n        type=\"file\"\n        ?multiple=${this.multiple}\n        accept=${this.accept || nothing}\n        @click=${(event: Event) => event.stopPropagation()}\n        @change=${(event: Event) => this.addFiles((event.target as HTMLInputElement).files)}\n      />\n\n      <div class=\"prompt\">\n        <span class=\"prompt-icon\"><kt-icon name=\"file-up\" size=\"24\"></kt-icon></span>\n        <div>\n          <p class=\"title\">${this.heading} ${this.linkText}</p>\n          ${\n            this.recommendedSize\n              ? html`<div class=\"hint\">Recommended image size: ${this.recommendedSize}</div>`\n              : nothing\n          }\n        </div>\n      </div>\n\n      ${\n        this.files.length > 0\n          ? html`<ul\n              part=\"list\"\n              class=\"list\"\n              aria-label=\"Selected files\"\n              @click=${(event: Event) => event.stopPropagation()}\n            >\n              ${this.files.map(\n                (file, index) =>\n                  html`<li class=\"item\">\n                    <span class=\"preview\"><kt-icon name=\"file\" size=\"24\"></kt-icon></span>\n                    <span class=\"info\">\n                      <span class=\"name\" title=${file.name}>${file.name}</span>\n                      <span class=\"details\">\n                        <span>${formatFileSize(file.size)}</span>\n                        ${file.type ? html`<span>•</span><span>${file.type}</span>` : nothing}\n                      </span>\n                    </span>\n                    <kt-button\n                      variant=\"danger\"\n                      size=\"small\"\n                      icon=\"trash-2\"\n                      label=${`Remove ${file.name}`}\n                      @click=${() => this.removeAt(index)}\n                    ></kt-button>\n                  </li>`,\n              )}\n            </ul>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-drag-drop', KtDragDrop);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-drag-drop': KtDragDrop;\n  }\n}\n"],"names":["UNITS","formatFileSize","bytes","value","unit","KtDragDrop","KtElement","css","attachFormInternals","changed","file","setFormValue","missing","setValidity","state","entry","emit","pattern","incoming","candidates","accepted","rejected","f","index","_","position","event","html","classMap","nothing","__decorateClass","query","property","defineElement"],"mappings":";;;;;;;;AAEA,MAAMA,IAAQ,CAAC,KAAK,MAAM,MAAM,MAAM,IAAI;AAQnC,SAASC,EAAeC,GAAuB;AACpD,MAAI,CAAC,OAAO,SAASA,CAAK,KAAKA,IAAQ,EAAG,QAAO;AAEjD,MAAIC,IAAQD,GACRE,IAAO;AACX,SAAOD,KAAS,QAAQC,IAAOJ,EAAM,SAAS;AAC5C,IAAAG,KAAS,MACTC,KAAQ;AAIV,SAAO,GADSA,MAAS,IAAI,OAAO,KAAK,MAAMD,CAAK,CAAC,IAAIA,EAAM,QAAQ,CAAC,CACvD,IAAIH,EAAMI,CAAI,CAAC;AAClC;;;;;;ACaO,MAAMC,UAAmBC,EAAU;AAAA,EAAnC,cAAA;AAAA,UAAA,GAAA,SAAA,GAqIL,KAAQ,YAAoC,MAG5C,KAAQ,WAAW,IAGnB,KAAQ,QAAgB,CAAA,GASxB,KAAA,UAAU,oBAIV,KAAA,WAAW,qBAIX,KAAA,kBAAkB,IAGlB,KAAA,WAAW,IAIX,KAAA,SAAS,IAIT,KAAA,UAAU,GAGV,KAAA,WAAW,IAIX,KAAA,OAAO,IAGP,KAAA,WAAW;AAAA,EAAA;AAAA,EAhLX,OAAA;AAAA,SAAgB,iBAAiB;AAAA,EAAA;AAAA,EACjC,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA4HF;AAAA,EAmDS,oBAA0B;AACjC,UAAM,kBAAA,GACN,KAAK,cAAcC,EAAoB,IAAI;AAAA,EAC7C;AAAA;AAAA,EAGS,WAAWC,GAA+B;AACjD,KAAIA,EAAQ,IAAI,OAAO,KAAKA,EAAQ,IAAI,MAAM,KAAKA,EAAQ,IAAI,UAAU,MACvE,KAAK,cAAA;AAAA,EAET;AAAA,EAEQ,gBAAsB;AAG5B,QAAIN,IAAyB;AAC7B,QAAI,KAAK,QAAQ,KAAK,MAAM,SAAS,GAAG;AACtC,MAAAA,IAAQ,IAAI,SAAA;AACZ,iBAAWO,KAAQ,KAAK,SAAa,OAAO,KAAK,MAAMA,CAAI;AAAA,IAC7D;AACA,IAAAC,EAAa,KAAK,WAAWR,CAAK;AAElC,UAAMS,IAAU,KAAK,YAAY,KAAK,MAAM,WAAW;AACvD,IAAAC,EAAY,KAAK,WAAW,EAAE,cAAcD,KAAWA,IAAU,mBAAmB,EAAE;AAAA,EACxF;AAAA,EAEA,oBAA0B;AACxB,SAAK,QAAQ,CAAA,GACb,KAAK,WAAW;AAAA,EAClB;AAAA,EAEA,yBAAyBE,GAA8C;AACrE,IAAI,EAAEA,aAAiB,aAAa,CAAC,KAAK,SAC1C,KAAK,QAAQA,EAAM,OAAO,KAAK,IAAI,EAAE,OAAO,CAACC,MAAyBA,aAAiB,IAAI;AAAA,EAC7F;AAAA;AAAA,EAGA,IAAI,gBAAiC;AACnC,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,QAAc;AACZ,SAAK,QAAQ,CAAA,GACbC,EAAK,MAAM,mBAAmB,EAAE,OAAO,KAAK,OAAO;AAAA,EACrD;AAAA;AAAA;AAAA;AAAA;AAAA,EAMQ,QAAQN,GAAqB;AACnC,WAAI,KAAK,UAAU,KAAKA,EAAK,OAAO,KAAK,UAAgB,KACpD,KAAK,SAEH,KAAK,OACT,MAAM,GAAG,EACT,IAAI,CAACO,MAAYA,EAAQ,OAAO,YAAA,CAAa,EAC7C,OAAO,OAAO,EACd,KAAK,CAACA,MACDA,EAAQ,WAAW,GAAG,IAAUP,EAAK,KAAK,YAAA,EAAc,SAASO,CAAO,IACxEA,EAAQ,SAAS,IAAI,IAAUP,EAAK,KAAK,WAAWO,EAAQ,MAAM,GAAG,EAAE,CAAC,IACrEP,EAAK,KAAK,YAAA,MAAkBO,CACpC,IAVsB;AAAA,EAW3B;AAAA,EAEQ,SAASC,GAAiC;AAChD,QAAI,CAACA,KAAYA,EAAS,WAAW,EAAG;AAExC,UAAMC,IAAa,KAAK,WAAW,CAAC,GAAGD,CAAQ,IAAI,CAAC,GAAGA,CAAQ,EAAE,MAAM,GAAG,CAAC,GACrEE,IAAWD,EAAW,OAAO,CAACT,MAAS,KAAK,QAAQA,CAAI,CAAC,GACzDW,IAAWF,EAAW,OAAO,CAACT,MAAS,CAAC,KAAK,QAAQA,CAAI,CAAC;AAQhE,IANIW,EAAS,SAAS,KACpBL,EAAK,MAAM,qBAAqB;AAAA,MAC9B,OAAOK;AAAA,MACP,QAAQ,KAAK,UAAU,KAAKA,EAAS,KAAK,CAACC,MAAMA,EAAE,OAAO,KAAK,OAAO,IAAI,SAAS;AAAA,IAAA,CACpF,GAECF,EAAS,WAAW,MAExB,KAAK,QAAQ,KAAK,WAAW,CAAC,GAAG,KAAK,OAAO,GAAGA,CAAQ,IAAIA,GAC5DJ,EAAK,MAAM,mBAAmB,EAAE,OAAO,KAAK,OAAO;AAAA,EACrD;AAAA,EAEQ,SAASO,GAAqB;AACpC,SAAK,QAAQ,KAAK,MAAM,OAAO,CAACC,GAAGC,MAAaA,MAAaF,CAAK,GAClEP,EAAK,MAAM,mBAAmB,EAAE,OAAO,KAAK,OAAO;AAAA,EACrD;AAAA,EAEQ,SAAe;AACrB,IAAI,KAAK,YACT,KAAK,WAAW,MAAA;AAAA,EAClB;AAAA,EAEQ,cAAcU,GAA4B;AAChD,IAAIA,EAAM,QAAQ,WAAWA,EAAM,QAAQ,QAC3CA,EAAM,eAAA,GACN,KAAK,OAAA;AAAA,EACP;AAAA,EAEQ,WAAWA,GAAwB;AACzC,IAAI,KAAK,aACTA,EAAM,eAAA,GACN,KAAK,WAAW;AAAA,EAClB;AAAA,EAEQ,OAAOA,GAAwB;AACrC,IAAI,KAAK,aACTA,EAAM,eAAA,GACN,KAAK,WAAW,IAChB,KAAK,SAASA,EAAM,cAAc,SAAS,IAAI;AAAA,EACjD;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA;AAAA,cAEGC,EAAS,EAAE,MAAM,IAAM,UAAU,KAAK,UAAU,CAAC;AAAA;AAAA,iBAE9C,KAAK,WAAW,KAAK,CAAC;AAAA,sBACjB,KAAK,WAAW,SAASC,CAAO;AAAA,mBACnC,GAAG,KAAK,OAAO,IAAI,KAAK,QAAQ,EAAE;AAAA,eACtC,KAAK,MAAM;AAAA,iBACT,KAAK,aAAa;AAAA,kBACjB,KAAK,UAAU;AAAA,mBACd,MAAM;AACjB,WAAK,WAAW;AAAA,IAClB,CAAC;AAAA,cACO,KAAK,MAAM;AAAA;AAAA;AAAA;AAAA,oBAIL,KAAK,QAAQ;AAAA,iBAChB,KAAK,UAAUA,CAAO;AAAA,iBACtB,CAACH,MAAiBA,EAAM,gBAAA,CAAiB;AAAA,kBACxC,CAACA,MAAiB,KAAK,SAAUA,EAAM,OAA4B,KAAK,CAAC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,6BAM9D,KAAK,OAAO,IAAI,KAAK,QAAQ;AAAA,YAE9C,KAAK,kBACDC,8CAAiD,KAAK,eAAe,WACrEE,CACN;AAAA;AAAA;AAAA;AAAA,QAKF,KAAK,MAAM,SAAS,IAChBF;AAAA;AAAA;AAAA;AAAA,uBAIW,CAACD,MAAiBA,EAAM,gBAAA,CAAiB;AAAA;AAAA,gBAEhD,KAAK,MAAM;AAAA,MACX,CAAChB,GAAMa,MACLI;AAAA;AAAA;AAAA,iDAG+BjB,EAAK,IAAI,IAAIA,EAAK,IAAI;AAAA;AAAA,gCAEvCT,EAAeS,EAAK,IAAI,CAAC;AAAA,0BAC/BA,EAAK,OAAOiB,wBAA2BjB,EAAK,IAAI,YAAYmB,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,8BAO/D,UAAUnB,EAAK,IAAI,EAAE;AAAA,+BACpB,MAAM,KAAK,SAASa,CAAK,CAAC;AAAA;AAAA;AAAA,IAAA,CAG1C;AAAA,qBAEHM,CACN;AAAA;AAAA,EAEJ;AACF;AAvOUC,EAAA;AAAA,EADPC,EAAM,oBAAoB;AAAA,GAlIhB1B,EAmIH,WAAA,WAAA;AAKAyB,EAAA;AAAA,EADPhB,EAAA;AAAM,GAvIIT,EAwIH,WAAA,UAAA;AAGAyB,EAAA;AAAA,EADPhB,EAAA;AAAM,GA1IIT,EA2IH,WAAA,OAAA;AASRyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnJf3B,EAoJX,WAAA,SAAA;AAIAyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,aAAa;AAAA,GAvJvC3B,EAwJX,WAAA,UAAA;AAIAyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,oBAAoB;AAAA,GA3J9C3B,EA4JX,WAAA,iBAAA;AAGAyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GA9JhB3B,EA+JX,WAAA,UAAA;AAIAyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlKf3B,EAmKX,WAAA,QAAA;AAIAyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,WAAW,YAAY;AAAA,GAtKtC3B,EAuKX,WAAA,SAAA;AAGAyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAzK/B3B,EA0KX,WAAA,UAAA;AAIAyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7Kf3B,EA8KX,WAAA,MAAA;AAGAyB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAhL/B3B,EAiLX,WAAA,UAAA;AA2LF4B,EAAc,gBAAgB5B,CAAU;"}

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

@@ -1,6 +1,6 @@
 import { css as f, nothing as h, html as r } from "lit";
 import { queryAssignedElements as c, state as g, property as a } from "lit/decorators.js";
-import { K as p, d as m } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { K as p, d as m } from "../../../chunks/kt-element-B_jjQDhg.js";
 import { h as y } from "../../../chunks/slots-BPbIdxAJ.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";
 var b = Object.defineProperty, s = (l, e, o, u) => {

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

@@ -1,9 +1,9 @@
-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 { css as v, nothing as n, html as l } from "lit";
+import { query as w, state as p, property as a } 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 { K as m, d as $ } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { e as u } 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 = [
@@ -32,9 +32,9 @@ function z(s, e) {
     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]) {
+    for (const d of [3, 3, 4]) {
       if (!t) break;
-      r.push(t.slice(0, u)), t = t.slice(u);
+      r.push(t.slice(0, d)), t = t.slice(d);
     }
     t && r.push(t);
   } else
@@ -48,13 +48,13 @@ function E(s, e) {
     (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;
+var A = Object.defineProperty, o = (s, e, r, t) => {
+  for (var d = void 0, h = s.length - 1, y; h >= 0; h--)
+    (y = s[h]) && (d = y(e, r, d) || d);
+  return d && A(e, r, d), d;
 };
 const c = 18;
-class o extends m {
+class i 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);
@@ -122,7 +122,7 @@ class o extends m {
         outline: var(--outline-width) solid var(--color-danger-base);
       }
       .error input {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
 
       .disabled {
@@ -145,7 +145,7 @@ class o extends m {
       }
 
       input::placeholder {
-        color: var(--color-text-500);
+        color: var(--text-muted);
       }
 
       /* The clear button is ours; the browser's is redundant. */
@@ -190,7 +190,7 @@ class o extends m {
       }
 
       .error-icon {
-        color: var(--color-danger-base);
+        color: var(--color-danger-text);
       }
 
       /* === PHONE MODE === */
@@ -356,13 +356,13 @@ class o extends m {
   }
   onInput(e) {
     const r = e.target.value;
-    this.value = this.isPhone ? V(r) : r, d(this, "kt-input", { value: this.value });
+    this.value = this.isPhone ? V(r) : r, u(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();
+    this.country = e.id, this.countryOpen = !1, this.countryQuery = "", u(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());
@@ -408,13 +408,13 @@ class o extends m {
                           </li>`
     )}
               </ul>
-            </div>` : a}`;
+            </div>` : n}`;
   }
   onChange(e) {
-    e.stopPropagation(), d(this, "kt-change", { value: this.value });
+    e.stopPropagation(), u(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();
+    this.value = "", u(this, "kt-clear"), u(this, "kt-input", { value: "" }), u(this, "kt-change", { value: "" }), this.focus();
   }
   togglePassword() {
     this.passwordVisible = !this.passwordVisible;
@@ -436,20 +436,24 @@ class o extends m {
       @pointerdown=${this.onFieldPointerDown}
       @keydown=${this.onCountryKeyDown}
     >
-      ${this.isPhone ? this.renderCountryPicker() : a}
+      ${// 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}
 
       <input
         part="control"
         type=${this.resolvedType}
-        name=${this.name || a}
+        name=${this.name || n}
         .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}
+        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}
         ?readonly=${this.readonly}
         ?required=${this.required}
@@ -469,13 +473,13 @@ class o extends m {
                         name=${this.passwordVisible ? "eye-off" : "eye"}
                         size=${c}
                       ></kt-icon>
-                    </button>` : a}
+                    </button>` : n}
               ${this.icon ? l`<span class="adornment">
                       <kt-icon name=${this.icon} size=${c}></kt-icon>
-                    </span>` : a}
+                    </span>` : n}
               ${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}
+                    </span>` : n}
               ${this.showClear ? l`<button
                       type="button"
                       class="icon-button clear"
@@ -484,73 +488,73 @@ class o extends m {
                       @click=${this.clear}
                     >
                       <kt-icon name="x" size=${c}></kt-icon>
-                    </button>` : a}
-            </div>` : a}
+                    </button>` : n}
+            </div>` : n}
     </div>`;
   }
 }
-i([
+o([
   w("input")
-], o.prototype, "input");
-i([
+], i.prototype, "input");
+o([
   p()
-], o.prototype, "passwordVisible");
-i([
+], i.prototype, "passwordVisible");
+o([
   p()
-], o.prototype, "countryOpen");
-i([
+], i.prototype, "countryOpen");
+o([
   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);
+], 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");
+$("kt-input", i);
 export {
-  o as KtInput
+  i as KtInput
 };
 //# sourceMappingURL=kt-input.js.map