npm - kanto-ds - Versions diffs - 1.2.0 → 1.3.0 - Mend

kanto-ds 1.2.0 → 1.3.0

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 (95) hide show

package/dist/components/feedback/kt-toast/kt-toast.js CHANGED Viewed

@@ -1,28 +1,29 @@
-import { css as g, nothing as n, html as a } from "lit";
-import { state as u, property as e } from "lit/decorators.js";
-import { K as h, d as v } from "../../../chunks/kt-element-B_jjQDhg.js";
-import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
+import { css as u, nothing as n, html as a } from "lit";
+import { state as v, property as e } from "lit/decorators.js";
+import { K as p, d as m } from "../../../chunks/kt-element-mdd5cXZX.js";
+import { e as f } from "../../../chunks/events-Bjl5Zmmq.js";
+import { s as h } from "../../../chunks/index-fzPIgxe2.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../kt-progress-bar/kt-progress-bar.js";
-var f = Object.defineProperty, i = (c, o, s, w) => {
+var b = Object.defineProperty, i = (c, o, s, x) => {
   for (var r = void 0, d = c.length - 1, l; d >= 0; d--)
     (l = c[d]) && (r = l(o, s, r) || r);
-  return r && f(o, s, r), r;
+  return r && b(o, s, r), r;
 };
-const b = {
+const w = {
   success: { icon: "circle-check", progress: "success" },
   information: { icon: "info", progress: "info" },
   warning: { icon: "triangle-alert", progress: "warning" },
   error: { icon: "circle-alert", progress: "danger" }
-}, p = 50;
-class t extends h {
+}, g = 50;
+class t extends p {
   constructor() {
     super(...arguments), this.remaining = 0, this.variant = "information", this.heading = "", this.description = "", this.dismissible = !1, this.duration = 0;
   }
   static {
     this.styles = [
-      h.styles,
-      g`
+      p.styles,
+      u`
       :host {
         display: block;
       }
@@ -155,8 +156,8 @@ class t extends h {
   /** Runs the countdown from whatever `remaining` currently is. */
   tick() {
     this.timer = setInterval(() => {
-      this.remaining -= p, !(this.remaining > 0) && (this.stopCountdown(), this.close());
-    }, p);
+      this.remaining -= g, !(this.remaining > 0) && (this.stopCountdown(), this.close());
+    }, g);
   }
   stopCountdown() {
     this.timer !== void 0 && clearInterval(this.timer), this.timer = void 0;
@@ -171,10 +172,10 @@ class t extends h {
   }
   /** Asks to be removed. The container is what actually removes it. */
   close() {
-    this.stopCountdown(), m(this, "kt-toast-close");
+    this.stopCountdown(), f(this, "kt-toast-close");
   }
   render() {
-    const o = b[this.variant], s = this.duration > 0;
+    const o = w[this.variant], s = this.duration > 0;
     return a`<div
       part="base"
       class="toast"
@@ -189,7 +190,12 @@ class t extends h {
         </div>
       </div>
-      ${this.dismissible ? a`<button part="close" class="close" aria-label="Close" @click=${this.close}>
+      ${this.dismissible ? a`<button
+              part="close"
+              class="close"
+              aria-label=${h().close}
+              @click=${this.close}
+            >
               <kt-icon name="x" size="18"></kt-icon>
             </button>` : n}
       ${s ? a`<div class="countdown">
@@ -200,14 +206,14 @@ class t extends h {
                 animated
                 .value=${this.remaining}
                 .max=${this.duration}
-                label="Time remaining"
+                label=${h().timeRemaining}
               ></kt-progress-bar>
             </div>` : n}
     </div>`;
   }
 }
 i([
-  u()
+  v()
 ], t.prototype, "remaining");
 i([
   e({ type: String, reflect: !0 })
@@ -224,7 +230,7 @@ i([
 i([
   e({ type: Number })
 ], t.prototype, "duration");
-v("kt-toast", t);
+m("kt-toast", t);
 export {
   t as KtToast
 };

package/dist/components/feedback/kt-toast/kt-toast.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' \| 'information' \| 'warning' \| 'error';\n\ninterface VariantMeta {\n readonly icon: string;\n readonly progress: 'success' \| 'info' \| 'warning' \| 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n success: { icon: 'circle-check', progress: 'success' },\n information: { icon: 'info', progress: 'info' },\n warning: { icon: 'triangle-alert', progress: 'warning' },\n error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. /\nconst TICK_MS = 50;\n\n/\n A transient notification.\n \n The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n \n @element kt-toast\n \n @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n \n @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n * dismiss button. `<kt-toast-container>` listens for this.\n /\nexport class KtToast extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .toast {\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--gap-form);\n max-width: 480px;\n padding: var(--padding-form);\n overflow: hidden;\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid rgba(255, 255, 255, 0.1);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow-toast);\n backdrop-filter: blur(10px);\n }\n\n / A wash of the variant's hue over the card surface, rather than a\n solid fill: the text stays on a neutral background and keeps its\n contrast. /\n :host([variant='success']) .toast {\n background:\n linear-gradient(135deg, rgba(53, 221, 131, 0.25), rgba(53, 221, 131, 0.15)),\n var(--surface-card);\n }\n :host([variant='information']) .toast {\n background:\n linear-gradient(135deg, rgba(53, 175, 243, 0.25), rgba(53, 175, 243, 0.15)),\n var(--surface-card);\n }\n :host([variant='warning']) .toast {\n background:\n linear-gradient(135deg, rgba(245, 171, 61, 0.25), rgba(245, 171, 61, 0.15)),\n var(--surface-card);\n }\n :host([variant='error']) .toast {\n background:\n linear-gradient(135deg, rgba(245, 61, 92, 0.25), rgba(245, 61, 92, 0.15)),\n var(--surface-card);\n }\n\n :host([variant='success']) .heading {\n color: var(--color-success-text);\n }\n :host([variant='information']) .heading {\n color: var(--color-info-text);\n }\n :host([variant='warning']) .heading {\n color: var(--color-warning-text);\n }\n :host([variant='error']) .heading {\n color: var(--color-danger-text);\n }\n\n :host([variant='success']) .icon {\n color: var(--color-success-text);\n }\n :host([variant='information']) .icon {\n color: var(--color-info-text);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-text);\n }\n :host([variant='error']) .icon {\n color: var(--color-danger-text);\n }\n\n .body {\n display: flex;\n align-items: center;\n gap: var(--gap-form);\n }\n\n .icon {\n display: flex;\n align-items: center;\n }\n\n .content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--gap-element);\n }\n\n .heading {\n font: var(--font-normal-medium);\n }\n\n .description {\n font: var(--font-normal-regular);\n }\n\n .close {\n display: flex;\n align-items: center;\n padding: 4px;\n color: currentcolor;\n background: transparent;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n .close:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n\n .countdown {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n }\n `,\n ];\n\n private timer: ReturnType<typeof setInterval> \| undefined;\n\n @state()\n private remaining = 0;\n\n @property({ type: String, reflect: true })\n variant: KtToastVariant = 'information';\n\n /\n The toast's title.\n \n Named `heading` because every element already has a `title`, and shadowing\n * it would turn the toast into its own tooltip.\n /\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n @property({ type: Boolean })\n dismissible = false;\n\n /\n Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n * keeps the toast until something removes it.\n /\n @property({ type: Number })\n duration = 0;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.startCountdown();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.stopCountdown();\n }\n\n private startCountdown(): void {\n this.stopCountdown();\n if (this.duration <= 0) return;\n\n this.remaining = this.duration;\n this.tick();\n }\n\n /* Runs the countdown from whatever `remaining` currently is. /\n private tick(): void {\n this.timer = setInterval(() => {\n this.remaining -= TICK_MS;\n if (this.remaining > 0) return;\n\n this.stopCountdown();\n this.close();\n }, TICK_MS);\n }\n\n private stopCountdown(): void {\n if (this.timer !== undefined) clearInterval(this.timer);\n this.timer = undefined;\n }\n\n /* Pauses the countdown. The container calls this while the pointer is over the stack. /\n pause(): void {\n if (this.timer !== undefined) this.stopCountdown();\n }\n\n /* Resumes a paused countdown from where it stopped. /\n resume(): void {\n if (this.duration <= 0 \|\| this.timer !== undefined \|\| this.remaining <= 0) return;\n this.tick();\n }\n\n /* Asks to be removed. The container is what actually removes it. */\n close(): void {\n this.stopCountdown();\n emit(this, 'kt-toast-close');\n }\n\n override render(): TemplateResult {\n const meta = META[this.variant];\n const showCountdown = this.duration > 0;\n\n return html`<div\n part=\"base\"\n class=\"toast\"\n role=${this.variant === 'error' ? 'alert' : 'status'}\n aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n >\n <div class=\"body\">\n <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n <div class=\"content\">\n ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n </div>\n </div>\n\n ${\n this.dismissible\n ? html`<button part=\"close\" class=\"close\" aria-label=\"Close\" @click=${this.close}>\n <kt-icon name=\"x\" size=\"18\"></kt-icon>\n </button>`\n : nothing\n }\n ${\n showCountdown\n ? html`<div class=\"countdown\">\n <kt-progress-bar\n size=\"small\"\n variant=${meta.progress}\n striped\n animated\n .value=${this.remaining}\n .max=${this.duration}\n label=\"Time remaining\"\n ></kt-progress-bar>\n </div>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-toast': KtToast;\n }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","__decorateClass","state","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-toast.js","sources":["../../../../src/components/feedback/kt-toast/kt-toast.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../kt-progress-bar/kt-progress-bar.js';\n\nexport type KtToastVariant = 'success' \| 'information' \| 'warning' \| 'error';\n\ninterface VariantMeta {\n readonly icon: string;\n readonly progress: 'success' \| 'info' \| 'warning' \| 'danger';\n}\n\nconst META: Record<KtToastVariant, VariantMeta> = {\n success: { icon: 'circle-check', progress: 'success' },\n information: { icon: 'info', progress: 'info' },\n warning: { icon: 'triangle-alert', progress: 'warning' },\n error: { icon: 'circle-alert', progress: 'danger' },\n};\n\n/** Countdown refresh interval. 50ms is smooth without being a busy loop. /\nconst TICK_MS = 50;\n\n/\n A transient notification.\n \n The only element in Kanto with a real shadow, and the only one that blurs\n * what is behind it: a toast floats above the page, so it has to say so.\n \n @element kt-toast\n \n @csspart base - The toast surface.\n * @csspart close - The dismiss button.\n \n @fires kt-toast-close - The toast asked to be removed, by timeout or by the\n * dismiss button. `<kt-toast-container>` listens for this.\n /\nexport class KtToast extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .toast {\n position: relative;\n display: flex;\n align-items: flex-start;\n justify-content: space-between;\n gap: var(--gap-form);\n max-width: 480px;\n padding: var(--padding-form);\n overflow: hidden;\n color: var(--text-body);\n background: var(--surface-card);\n border: var(--border-width) solid rgba(255, 255, 255, 0.1);\n border-radius: var(--border-radius);\n box-shadow: var(--shadow-toast);\n backdrop-filter: blur(10px);\n }\n\n / A wash of the variant's hue over the card surface, rather than a\n solid fill: the text stays on a neutral background and keeps its\n contrast. /\n :host([variant='success']) .toast {\n background:\n linear-gradient(135deg, rgba(53, 221, 131, 0.25), rgba(53, 221, 131, 0.15)),\n var(--surface-card);\n }\n :host([variant='information']) .toast {\n background:\n linear-gradient(135deg, rgba(53, 175, 243, 0.25), rgba(53, 175, 243, 0.15)),\n var(--surface-card);\n }\n :host([variant='warning']) .toast {\n background:\n linear-gradient(135deg, rgba(245, 171, 61, 0.25), rgba(245, 171, 61, 0.15)),\n var(--surface-card);\n }\n :host([variant='error']) .toast {\n background:\n linear-gradient(135deg, rgba(245, 61, 92, 0.25), rgba(245, 61, 92, 0.15)),\n var(--surface-card);\n }\n\n :host([variant='success']) .heading {\n color: var(--color-success-text);\n }\n :host([variant='information']) .heading {\n color: var(--color-info-text);\n }\n :host([variant='warning']) .heading {\n color: var(--color-warning-text);\n }\n :host([variant='error']) .heading {\n color: var(--color-danger-text);\n }\n\n :host([variant='success']) .icon {\n color: var(--color-success-text);\n }\n :host([variant='information']) .icon {\n color: var(--color-info-text);\n }\n :host([variant='warning']) .icon {\n color: var(--color-warning-text);\n }\n :host([variant='error']) .icon {\n color: var(--color-danger-text);\n }\n\n .body {\n display: flex;\n align-items: center;\n gap: var(--gap-form);\n }\n\n .icon {\n display: flex;\n align-items: center;\n }\n\n .content {\n display: flex;\n flex: 1 1 auto;\n flex-direction: column;\n gap: var(--gap-element);\n }\n\n .heading {\n font: var(--font-normal-medium);\n }\n\n .description {\n font: var(--font-normal-regular);\n }\n\n .close {\n display: flex;\n align-items: center;\n padding: 4px;\n color: currentcolor;\n background: transparent;\n border: none;\n border-radius: 4px;\n cursor: pointer;\n }\n .close:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n }\n\n .countdown {\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n }\n `,\n ];\n\n private timer: ReturnType<typeof setInterval> \| undefined;\n\n @state()\n private remaining = 0;\n\n @property({ type: String, reflect: true })\n variant: KtToastVariant = 'information';\n\n /\n The toast's title.\n \n Named `heading` because every element already has a `title`, and shadowing\n * it would turn the toast into its own tooltip.\n /\n @property({ type: String })\n heading = '';\n\n @property({ type: String })\n description = '';\n\n @property({ type: Boolean })\n dismissible = false;\n\n /\n Auto-dismiss after this many milliseconds, with a countdown bar. Zero\n * keeps the toast until something removes it.\n /\n @property({ type: Number })\n duration = 0;\n\n override connectedCallback(): void {\n super.connectedCallback();\n this.startCountdown();\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback();\n this.stopCountdown();\n }\n\n private startCountdown(): void {\n this.stopCountdown();\n if (this.duration <= 0) return;\n\n this.remaining = this.duration;\n this.tick();\n }\n\n /* Runs the countdown from whatever `remaining` currently is. /\n private tick(): void {\n this.timer = setInterval(() => {\n this.remaining -= TICK_MS;\n if (this.remaining > 0) return;\n\n this.stopCountdown();\n this.close();\n }, TICK_MS);\n }\n\n private stopCountdown(): void {\n if (this.timer !== undefined) clearInterval(this.timer);\n this.timer = undefined;\n }\n\n /* Pauses the countdown. The container calls this while the pointer is over the stack. /\n pause(): void {\n if (this.timer !== undefined) this.stopCountdown();\n }\n\n /* Resumes a paused countdown from where it stopped. /\n resume(): void {\n if (this.duration <= 0 \|\| this.timer !== undefined \|\| this.remaining <= 0) return;\n this.tick();\n }\n\n /* Asks to be removed. The container is what actually removes it. */\n close(): void {\n this.stopCountdown();\n emit(this, 'kt-toast-close');\n }\n\n override render(): TemplateResult {\n const meta = META[this.variant];\n const showCountdown = this.duration > 0;\n\n return html`<div\n part=\"base\"\n class=\"toast\"\n role=${this.variant === 'error' ? 'alert' : 'status'}\n aria-live=${this.variant === 'error' ? 'assertive' : 'polite'}\n >\n <div class=\"body\">\n <span class=\"icon\"><kt-icon name=${meta.icon} size=\"24\"></kt-icon></span>\n <div class=\"content\">\n ${this.heading ? html`<div class=\"heading\">${this.heading}</div>` : nothing}\n ${this.description ? html`<div class=\"description\">${this.description}</div>` : nothing}\n </div>\n </div>\n\n ${\n this.dismissible\n ? html`<button\n part=\"close\"\n class=\"close\"\n aria-label=${strings().close}\n @click=${this.close}\n >\n <kt-icon name=\"x\" size=\"18\"></kt-icon>\n </button>`\n : nothing\n }\n ${\n showCountdown\n ? html`<div class=\"countdown\">\n <kt-progress-bar\n size=\"small\"\n variant=${meta.progress}\n striped\n animated\n .value=${this.remaining}\n .max=${this.duration}\n label=${strings().timeRemaining}\n ></kt-progress-bar>\n </div>`\n : nothing\n }\n </div>`;\n }\n}\n\ndefineElement('kt-toast', KtToast);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-toast': KtToast;\n }\n}\n"],"names":["META","TICK_MS","KtToast","KtElement","css","emit","meta","showCountdown","html","nothing","strings","__decorateClass","state","property","defineElement"],"mappings":"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"}

package/dist/components/feedback/kt-toast-container/kt-toast-container.js CHANGED Viewed

@@ -1,6 +1,6 @@
 import { css as c, html as m } from "lit";
 import { property as p } from "lit/decorators.js";
-import { K as l, d } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as l, d } from "../../../chunks/kt-element-mdd5cXZX.js";
 import "../kt-toast/kt-toast.js";
 var f = Object.defineProperty, h = (i, t, e, n) => {
   for (var s = void 0, o = i.length - 1, a; o >= 0; o--)

package/dist/components/feedback/kt-tooltip/kt-tooltip.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css as h, html as l } from "lit";
 import { state as c, property as n } from "lit/decorators.js";
 import { classMap as v } from "lit/directives/class-map.js";
-import { K as d, d as b } from "../../../chunks/kt-element-B_jjQDhg.js";
+import { K as d, d as b } from "../../../chunks/kt-element-mdd5cXZX.js";
 import { u as f } from "../../../chunks/events-Bjl5Zmmq.js";
 var u = Object.defineProperty, s = (r, t, a, y) => {
   for (var e = void 0, o = r.length - 1, p; o >= 0; o--)

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

@@ -35,9 +35,9 @@ export declare class KtDragDrop extends KtElement {
      * Named `heading`, not `title`: an element already has a `title`, and
      * reusing it would put the prompt in a native tooltip on the whole zone.
      */
-    heading: string;
+    heading: string | undefined;
     /** The clickable-looking part of the prompt. */
-    linkText: string;
+    linkText: string | undefined;
     /** Optional hint, e.g. `800×400px`. */
     recommendedSize: string;
     multiple: boolean;

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

@@ -1,35 +1,36 @@
-import { css as g, nothing as d, html as p } from "lit";
-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-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 { 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 { classMap as b } from "lit/directives/class-map.js";
+import { K as m, d as x } from "../../../chunks/kt-element-mdd5cXZX.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-fzPIgxe2.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-button/kt-button.js";
-const m = ["B", "KB", "MB", "GB", "TB"];
-function w(l) {
-  if (!Number.isFinite(l) || l < 0) return "";
-  let e = l, t = 0;
-  for (; e >= 1024 && t < m.length - 1; )
+const u = ["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; )
     e /= 1024, t += 1;
-  return `${t === 0 ? String(Math.round(e)) : e.toFixed(1)} ${m[t]}`;
+  return `${t === 0 ? String(Math.round(e)) : e.toFixed(1)} ${u[t]}`;
 }
-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;
+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;
 };
-class i extends f {
+class i extends m {
   constructor() {
-    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;
+    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;
   }
   static {
     this.formAssociated = !0;
   }
   static {
     this.styles = [
-      f.styles,
-      g`
+      m.styles,
+      v`
       :host {
         display: block;
         user-select: none;
@@ -156,11 +157,11 @@ class i extends f {
     ];
   }
   connectedCallback() {
-    super.connectedCallback(), this.internals ??= x(this);
+    super.connectedCallback(), this.internals ??= k(this);
   }
   // Untyped: `files` is private state, which PropertyValues<this> cannot name.
   willUpdate(e) {
-    (e.has("files") || e.has("name") || e.has("required")) && this.syncFormValue();
+    (e.has("files") || e.has("name") || e.has("required") || this.stringsChanged(e)) && this.syncFormValue();
   }
   syncFormValue() {
     let e = null;
@@ -168,9 +169,9 @@ class i extends f {
       e = new FormData();
       for (const a of this.files) e.append(this.name, a);
     }
-    k(this.internals, e);
+    $(this.internals, e);
     const t = this.required && this.files.length === 0;
-    $(this.internals, { valueMissing: t }, t ? "Select a file." : "");
+    w(this.internals, { valueMissing: t }, t ? l().selectFile : "");
   }
   formResetCallback() {
     this.files = [], this.dragging = !1;
@@ -184,7 +185,7 @@ class i extends f {
   }
   /** Empties the selection without firing a rejection. */
   clear() {
-    this.files = [], c(this, "kt-files-change", { files: this.files });
+    this.files = [], h(this, "kt-files-change", { files: this.files });
   }
   /**
    * `accept` is advisory on a native input — the OS dialog filters, but a
@@ -195,14 +196,14 @@ class i extends f {
   }
   addFiles(e) {
     if (!e || e.length === 0) return;
-    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", {
+    const t = this.multiple ? [...e] : [...e].slice(0, 1), a = t.filter((o) => this.accepts(o)), s = t.filter((o) => !this.accepts(o));
+    s.length > 0 && h(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 }));
+      reason: this.maxSize > 0 && s.some((o) => o.size > this.maxSize) ? "size" : "type"
+    }), a.length !== 0 && (this.files = this.multiple ? [...this.files, ...a] : a, h(this, "kt-files-change", { files: this.files }));
   }
   removeAt(e) {
-    this.files = this.files.filter((t, a) => a !== e), c(this, "kt-files-change", { files: this.files });
+    this.files = this.files.filter((t, a) => a !== e), h(this, "kt-files-change", { files: this.files });
   }
   browse() {
     this.disabled || this.fileInput?.click();
@@ -217,13 +218,13 @@ class i extends f {
     this.disabled || (e.preventDefault(), this.dragging = !1, this.addFiles(e.dataTransfer?.files ?? null));
   }
   render() {
-    return p`<div
+    return c`<div
       part="base"
-      class=${y({ zone: !0, dragover: this.dragging })}
+      class=${b({ zone: !0, dragover: this.dragging })}
       role="button"
       tabindex=${this.disabled ? -1 : 0}
-      aria-disabled=${this.disabled ? "true" : d}
-      aria-label=${`${this.heading} ${this.linkText}`}
+      aria-disabled=${this.disabled ? "true" : p}
+      aria-label=${`${this.heading ?? l().dragAndDrop} ${this.linkText ?? l().browseFiles}`}
       @click=${this.browse}
       @keydown=${this.onZoneKeyDown}
       @dragover=${this.onDragOver}
@@ -235,7 +236,7 @@ class i extends f {
       <input
         type="file"
         ?multiple=${this.multiple}
-        accept=${this.accept || d}
+        accept=${this.accept || p}
         @click=${(e) => e.stopPropagation()}
         @change=${(e) => this.addFiles(e.target.files)}
       />
@@ -243,77 +244,79 @@ class i extends f {
       <div class="prompt">
         <span class="prompt-icon"><kt-icon name="file-up" size="24"></kt-icon></span>
         <div>
-          <p class="title">${this.heading} ${this.linkText}</p>
-          ${this.recommendedSize ? p`<div class="hint">Recommended image size: ${this.recommendedSize}</div>` : d}
+          <p class="title">
+            ${this.heading ?? l().dragAndDrop} ${this.linkText ?? l().browseFiles}
+          </p>
+          ${this.recommendedSize ? c`<div class="hint">${l().recommendedSize(this.recommendedSize)}</div>` : p}
         </div>
       </div>
-      ${this.files.length > 0 ? p`<ul
+      ${this.files.length > 0 ? c`<ul
               part="list"
               class="list"
-              aria-label="Selected files"
+              aria-label=${l().selectedFiles}
               @click=${(e) => e.stopPropagation()}
             >
               ${this.files.map(
-      (e, t) => p`<li class="item">
+      (e, t) => c`<li class="item">
                     <span class="preview"><kt-icon name="file" size="24"></kt-icon></span>
                     <span class="info">
                       <span class="name" title=${e.name}>${e.name}</span>
                       <span class="details">
-                        <span>${w(e.size)}</span>
-                        ${e.type ? p`<span>•</span><span>${e.type}</span>` : d}
+                        <span>${z(e.size)}</span>
+                        ${e.type ? c`<span>•</span><span>${e.type}</span>` : p}
                       </span>
                     </span>
                     <kt-button
                       variant="danger"
                       size="small"
                       icon="trash-2"
-                      label=${`Remove ${e.name}`}
+                      label=${l().remove(e.name)}
                       @click=${() => this.removeAt(t)}
                     ></kt-button>
                   </li>`
     )}
-            </ul>` : d}
+            </ul>` : p}
     </div>`;
   }
 }
 r([
-  v('input[type="file"]')
+  y('input[type="file"]')
 ], i.prototype, "fileInput");
 r([
-  u()
+  g()
 ], i.prototype, "dragging");
 r([
-  u()
+  g()
 ], i.prototype, "files");
 r([
-  o({ type: String })
+  n({ type: String })
 ], i.prototype, "heading");
 r([
-  o({ type: String, attribute: "link-text" })
+  n({ type: String, attribute: "link-text" })
 ], i.prototype, "linkText");
 r([
-  o({ type: String, attribute: "recommended-size" })
+  n({ type: String, attribute: "recommended-size" })
 ], i.prototype, "recommendedSize");
 r([
-  o({ type: Boolean })
+  n({ type: Boolean })
 ], i.prototype, "multiple");
 r([
-  o({ type: String })
+  n({ type: String })
 ], i.prototype, "accept");
 r([
-  o({ type: Number, attribute: "max-size" })
+  n({ type: Number, attribute: "max-size" })
 ], i.prototype, "maxSize");
 r([
-  o({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], i.prototype, "disabled");
 r([
-  o({ type: String })
+  n({ type: String })
 ], i.prototype, "name");
 r([
-  o({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], i.prototype, "required");
-b("kt-drag-drop", i);
+x("kt-drag-drop", i);
 export {
   i as KtDragDrop
 };

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 '../../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":"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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 /* 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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"}

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

@@ -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-B_jjQDhg.js";
+import { K as p, d as m } from "../../../chunks/kt-element-mdd5cXZX.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) => {