npm - kanto-ds - Versions diffs - 1.4.0 → 1.5.2 - Mend

kanto-ds 1.4.0 → 1.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (130) hide show

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

@@ -1,35 +1,35 @@
 import { css as v, nothing as p, html as c } from "lit";
-import { query as y, state as g, property as n } from "lit/decorators.js";
+import { query as y, state as f, property as n } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { K as m, d as x } from "../../../chunks/kt-element-E-tfJpGQ.js";
-import { e as h } from "../../../chunks/events-Bjl5Zmmq.js";
-import { a as k, s as $, b as w } from "../../../chunks/form-control-CxjBTt1c.js";
-import { s as l } from "../../../chunks/index-DSSLJirw.js";
+import { K as u, d as x } from "../../../chunks/kt-element-Djx2JcGl.js";
+import { e as h } from "../../../chunks/events-r51msXNf.js";
+import { a as k, s as $, b as w } from "../../../chunks/form-control-B74_EHtG.js";
+import { s as l } from "../../../chunks/index-STEEvEP7.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-button/kt-button.js";
-const u = ["B", "KB", "MB", "GB", "TB"];
+const g = ["B", "KB", "MB", "GB", "TB"];
 function z(d) {
   if (!Number.isFinite(d) || d < 0) return "";
   let e = d, t = 0;
-  for (; e >= 1024 && t < u.length - 1; )
+  for (; e >= 1024 && t < g.length - 1; )
     e /= 1024, t += 1;
-  return `${t === 0 ? String(Math.round(e)) : e.toFixed(1)} ${u[t]}`;
+  return `${t === 0 ? String(Math.round(e)) : e.toFixed(1)} ${g[t]}`;
 }
-var S = Object.defineProperty, r = (d, e, t, a) => {
-  for (var s = void 0, o = d.length - 1, f; o >= 0; o--)
-    (f = d[o]) && (s = f(e, t, s) || s);
-  return s && S(e, t, s), s;
+var D = Object.defineProperty, r = (d, e, t, a) => {
+  for (var s = void 0, o = d.length - 1, m; o >= 0; o--)
+    (m = d[o]) && (s = m(e, t, s) || s);
+  return s && D(e, t, s), s;
 };
-class i extends m {
+class i extends u {
   constructor() {
-    super(...arguments), this.internals = null, this.dragging = !1, this.files = [], this.heading = void 0, this.linkText = void 0, this.recommendedSize = "", this.multiple = !0, this.accept = "", this.maxSize = 0, this.disabled = !1, this.name = "", this.required = !1;
+    super(...arguments), this.internals = null, this.dragging = !1, this.files = [], this.heading = void 0, this.linkText = void 0, this.recommendedSize = "", this.multiple = !0, this.accept = "", this.maxSize = 0, this.disabled = !1, this.formDisabled = !1, this.name = "", this.required = !1;
   }
   static {
     this.formAssociated = !0;
   }
   static {
     this.styles = [
-      m.styles,
+      u.styles,
       v`
       :host {
         display: block;
@@ -156,6 +156,10 @@ class i extends m {
     `
     ];
   }
+  /** Whether the control is off, by its own `disabled` or by its form. */
+  get inactive() {
+    return this.disabled || this.formDisabled;
+  }
   connectedCallback() {
     super.connectedCallback(), this.internals ??= k(this);
   }
@@ -176,6 +180,13 @@ class i extends m {
   formResetCallback() {
     this.files = [], this.dragging = !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;
+  }
   formStateRestoreCallback(e) {
     !(e instanceof FormData) || !this.name || (this.files = e.getAll(this.name).filter((t) => t instanceof File));
   }
@@ -206,24 +217,24 @@ class i extends m {
     this.files = this.files.filter((t, a) => a !== e), h(this, "kt-files-change", { files: this.files });
   }
   browse() {
-    this.disabled || this.fileInput?.click();
+    this.inactive || this.fileInput?.click();
   }
   onZoneKeyDown(e) {
     e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.browse());
   }
   onDragOver(e) {
-    this.disabled || (e.preventDefault(), this.dragging = !0);
+    this.inactive || (e.preventDefault(), this.dragging = !0);
   }
   onDrop(e) {
-    this.disabled || (e.preventDefault(), this.dragging = !1, this.addFiles(e.dataTransfer?.files ?? null));
+    this.inactive || (e.preventDefault(), this.dragging = !1, this.addFiles(e.dataTransfer?.files ?? null));
   }
   render() {
     return c`<div
       part="base"
       class=${b({ zone: !0, dragover: this.dragging })}
       role="button"
-      tabindex=${this.disabled ? -1 : 0}
-      aria-disabled=${this.disabled ? "true" : p}
+      tabindex=${this.inactive ? -1 : 0}
+      aria-disabled=${this.inactive ? "true" : p}
       aria-label=${`${this.heading ?? l().dragAndDrop} ${this.linkText ?? l().browseFiles}`}
       @click=${this.browse}
       @keydown=${this.onZoneKeyDown}
@@ -284,10 +295,10 @@ r([
   y('input[type="file"]')
 ], i.prototype, "fileInput");
 r([
-  g()
+  f()
 ], i.prototype, "dragging");
 r([
-  g()
+  f()
 ], i.prototype, "files");
 r([
   n({ type: String })
@@ -310,6 +321,9 @@ r([
 r([
   n({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled");
+r([
+  f()
+], i.prototype, "formDisabled");
 r([
   n({ type: String })
 ], i.prototype, "name");

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

	@@ -1 +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 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 { strings } from '#internal/strings';\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: string \| undefined = undefined;\n\n /* The clickable-looking part of the prompt. /\n @property({ type: String, attribute: 'link-text' })\n linkText: string \| undefined = undefined;\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 (\n changed.has('files') \|\|\n changed.has('name') \|\|\n changed.has('required') \|\|\n this.stringsChanged(changed)\n ) {\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 ? strings().selectFile : '');\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 ?? strings().dragAndDrop} ${this.linkText ?? strings().browseFiles}`}\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\">\n ${this.heading ?? strings().dragAndDrop} ${this.linkText ?? strings().browseFiles}\n </p>\n ${\n this.recommendedSize\n ? html`<div class=\"hint\">${strings().recommendedSize(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=${strings().selectedFiles}\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=${strings().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","strings","state","entry","emit","pattern","incoming","candidates","accepted","rejected","f","index","_","position","event","html","classMap","nothing","__decorateClass","query","property","defineElement"],"mappings":"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"}
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 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 { strings } from '#internal/strings';\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: string \| undefined = undefined;\n\n /* The clickable-looking part of the prompt. /\n @property({ type: String, attribute: 'link-text' })\n linkText: string \| undefined = undefined;\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 /* Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. /\n @state()\n private formDisabled = false;\n\n /* Whether the control is off, by its own `disabled` or by its form. /\n private get inactive(): boolean {\n return this.disabled \|\| this.formDisabled;\n }\n\n /* 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 (\n changed.has('files') \|\|\n changed.has('name') \|\|\n changed.has('required') \|\|\n this.stringsChanged(changed)\n ) {\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 ? strings().selectFile : '');\n }\n\n formResetCallback(): void {\n this.files = [];\n this.dragging = false;\n }\n\n /\n Called by the platform when the control's disabled state changes — its\n * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.\n /\n formDisabledCallback(disabled: boolean): void {\n this.formDisabled = disabled;\n }\n\n 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.inactive) 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.inactive) return;\n event.preventDefault();\n this.dragging = true;\n }\n\n private onDrop(event: DragEvent): void {\n if (this.inactive) 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.inactive ? -1 : 0}\n aria-disabled=${this.inactive ? 'true' : nothing}\n aria-label=${`${this.heading ?? strings().dragAndDrop} ${this.linkText ?? strings().browseFiles}`}\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\">\n ${this.heading ?? strings().dragAndDrop} ${this.linkText ?? strings().browseFiles}\n </p>\n ${\n this.recommendedSize\n ? html`<div class=\"hint\">${strings().recommendedSize(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=${strings().selectedFiles}\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=${strings().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","strings","disabled","state","entry","emit","pattern","incoming","candidates","accepted","rejected","f","index","_","position","event","html","classMap","nothing","__decorateClass","query","property","defineElement"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { css as f, nothing as h, html as d } 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-E-tfJpGQ.js";
+import { K as p, d as m } from "../../../chunks/kt-element-Djx2JcGl.js";
 import { h as y } from "../../../chunks/slots-BPbIdxAJ.js";
-import { s as b } from "../../../chunks/index-DSSLJirw.js";
+import { s as b } from "../../../chunks/index-STEEvEP7.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";
 var u = Object.defineProperty, s = (r, e, o, v) => {
   for (var i = void 0, l = r.length - 1, n; l >= 0; l--)

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

@@ -2,6 +2,7 @@ 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';
+import '../../feedback/kt-tooltip/kt-tooltip.js';
 export type KtInputSize = 'small' | 'medium' | 'large';
 /**
  * A single-line text field.
@@ -39,6 +40,11 @@ export declare class KtInput extends KtElement {
     private passwordVisible;
     private countryOpen;
     private countryQuery;
+    /** The field has focus: the error tooltip shows for keyboard users too. */
+    private focused;
+    /** Escape put the error tooltip away until the field is focused again. */
+    private errorDismissed;
+    private floating;
     /** The field's value. The `value` attribute seeds it and acts as the reset value. */
     value: string;
     name: string;
@@ -48,11 +54,18 @@ export declare class KtInput extends KtElement {
     /** Field height: 32 / 40 / 48px at the desktop scale. */
     size: KtInputSize;
     disabled: boolean;
+    /** Disabled by an enclosing `<fieldset>`, which leaves `disabled` alone. */
+    private formDisabled;
+    /** Whether the control is off, by its own `disabled` or by its form. */
+    private get inactive();
     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 message. A non-empty value puts the field in its error state, and
+     * wins over the field's own checks.
+     */
     error: string;
     /** Shows the clear button once there is something to clear. */
     clearable: boolean;
@@ -69,11 +82,17 @@ export declare class KtInput extends KtElement {
     /** The value the enclosing form resets to. */
     private defaultValue;
     connectedCallback(): void;
+    updated(changed: PropertyValues): 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 control's disabled state changes — its
+     * own `disabled`, or an ancestor `<fieldset disabled>` it cannot see.
+     */
+    formDisabledCallback(disabled: boolean): void;
     /** Called by the platform when the browser restores a session. */
     formStateRestoreCallback(state: string): void;
     focus(options?: FocusOptions): void;
@@ -89,6 +108,16 @@ export declare class KtInput extends KtElement {
      * the user picked.
      */
     private get formValue();
+    /**
+     * 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.
+     */
+    private get formState();
+    /** Phone mode: a number typed with the prefix only dialled at home. */
+    private get phoneError();
+    /** The message on show: the application's first, then the field's own. */
+    private get shownError();
     private get displayValue();
     private get showClear();
     private get resolvedType();
@@ -98,11 +127,18 @@ export declare class KtInput extends KtElement {
     private closeCountryPanel;
     private onCountryKeyDown;
     private renderCountryPicker;
+    private onFocus;
+    private onBlur;
+    /** WCAG 1.4.13: content shown on focus can be dismissed without moving it. */
+    private onControlKeyDown;
+    private get errorTooltipOpen();
     private onChange;
     private clear;
     private togglePassword;
     /** Clicking the padding around the input should focus it, as on a native field. */
     private onFieldPointerDown;
+    /** Both buttons are out of the tab order, so their tooltips are for the pointer. */
+    private renderPasswordToggle;
     render(): TemplateResult;
 }
 declare global {