kanto-ds 1.0.0

package/dist/components/feedback/kt-tooltip/kt-tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-tooltip.js","sources":["../../../../src/components/feedback/kt-tooltip/kt-tooltip.ts"],"sourcesContent":["import { css, html, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { uniqueId } from '#internal/events';\n\nexport type KtTooltipPlacement = 'top' | 'bottom' | 'left' | 'right';\n\n/** Marks the description node so it is never assigned to the default slot. */\nconst DESCRIPTION_SLOT = 'kt-tooltip-description';\n\n/**\n * A short label that appears on hover or focus.\n *\n * Wrap the thing it describes:\n *\n * ```html\n * <kt-tooltip text=\"Refresh the data\">\n *   <kt-button icon=\"refresh-cw\" label=\"Refresh\"></kt-button>\n * </kt-tooltip>\n * ```\n *\n * A tooltip is a *description*, never the only name of a control. If the\n * trigger has no visible text, give it its own `label` too — a tooltip that has\n * to be hovered to be read leaves touch and screen-reader users with nothing.\n *\n * @element kt-tooltip\n *\n * @slot - The trigger.\n *\n * @csspart bubble - The tooltip bubble.\n */\nexport class KtTooltip extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        position: relative;\n        display: inline-flex;\n        align-items: center;\n        justify-content: center;\n      }\n\n      .bubble {\n        position: absolute;\n        z-index: var(--z-tooltip);\n        max-width: 260px;\n        padding: var(--padding-chip);\n        /* Inverted against the page, so the bubble reads as floating in\n           both themes — the raw ramp step this used to name is pure white\n           under data-theme=\"light\". */\n        color: var(--text-inverted);\n        font: var(--font-code-regular);\n        white-space: nowrap;\n        background: var(--surface-inverted);\n        border-radius: var(--radius-input);\n        opacity: 0;\n        pointer-events: none;\n        transition: opacity 150ms var(--easing-standard);\n      }\n\n      .bubble.visible {\n        opacity: 1;\n      }\n\n      .top {\n        bottom: calc(100% + 6px);\n        left: 50%;\n        transform: translateX(-50%);\n      }\n      .bottom {\n        top: calc(100% + 6px);\n        left: 50%;\n        transform: translateX(-50%);\n      }\n      .left {\n        top: 50%;\n        right: calc(100% + 6px);\n        transform: translateY(-50%);\n      }\n      .right {\n        top: 50%;\n        left: calc(100% + 6px);\n        transform: translateY(-50%);\n      }\n\n      @media (prefers-reduced-motion: reduce) {\n        .bubble {\n          transition: none;\n        }\n      }\n    `,\n  ];\n\n  private readonly descriptionId = uniqueId('kt-tooltip');\n  private description: HTMLElement | undefined;\n\n  @state()\n  private visible = false;\n\n  @property({ type: String })\n  text = '';\n\n  @property({ type: String, reflect: true })\n  placement: KtTooltipPlacement = 'top';\n\n  /** Suppresses the tooltip without removing it from the markup. */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('pointerenter', this.show);\n    this.addEventListener('pointerleave', this.hide);\n    this.addEventListener('focusin', this.show);\n    this.addEventListener('focusout', this.hide);\n    this.addEventListener('keydown', this.onKeyDown);\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('pointerenter', this.show);\n    this.removeEventListener('pointerleave', this.hide);\n    this.removeEventListener('focusin', this.show);\n    this.removeEventListener('focusout', this.hide);\n    this.removeEventListener('keydown', this.onKeyDown);\n    this.description?.remove();\n  }\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('text')) this.syncDescription();\n  }\n\n  /**\n   * `aria-describedby` cannot reach across a shadow boundary: an id inside this\n   * element's shadow root is invisible to a trigger sitting in the light DOM.\n   *\n   * So the description also exists as a light-DOM node, addressed to a slot\n   * that does not exist — which keeps it out of the rendered output while\n   * leaving it referenceable, since an explicit aria-describedby target is read\n   * even when it is not displayed.\n   */\n  private syncDescription(): void {\n    if (!this.text) {\n      this.description?.remove();\n      this.description = undefined;\n      return;\n    }\n\n    if (!this.description) {\n      this.description = document.createElement('span');\n      this.description.id = this.descriptionId;\n      this.description.slot = DESCRIPTION_SLOT;\n      this.append(this.description);\n    }\n    this.description.textContent = this.text;\n\n    for (const trigger of this.children) {\n      if (trigger !== this.description)\n        trigger.setAttribute('aria-describedby', this.descriptionId);\n    }\n  }\n\n  private show = (): void => {\n    if (!this.disabled && this.text) this.visible = true;\n  };\n\n  private hide = (): void => {\n    this.visible = false;\n  };\n\n  /** WCAG 1.4.13: a pointer-triggered overlay must be dismissible from the keyboard. */\n  private onKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.visible) {\n      event.stopPropagation();\n      this.visible = false;\n    }\n  };\n\n  override render(): TemplateResult {\n    return html`<slot @slotchange=${this.syncDescription}></slot>\n      <span\n        part=\"bubble\"\n        class=${classMap({ bubble: true, [this.placement]: true, visible: this.visible })}\n        role=\"tooltip\"\n        aria-hidden=${this.visible ? 'false' : 'true'}\n        >${this.text}</span\n      >`;\n  }\n}\n\ndefineElement('kt-tooltip', KtTooltip);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-tooltip': KtTooltip;\n  }\n}\n"],"names":["DESCRIPTION_SLOT","KtTooltip","KtElement","uniqueId","event","css","changed","trigger","html","classMap","__decorateClass","state","property","defineElement"],"mappings":"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"}

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

@@ -0,0 +1,68 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+import '../../core/kt-button/kt-button.js';
+/**
+ * A file drop zone.
+ *
+ * Accepts a drop or a click, lists what was picked with sizes and types, and
+ * lets each entry be removed. It holds the files in memory and reports them —
+ * uploading is the application's business.
+ *
+ * @element kt-drag-drop
+ *
+ * @csspart base - The dashed drop zone.
+ * @csspart list - The list of chosen files.
+ *
+ * @fires kt-files-change - The selection changed. `detail: { files }`.
+ * @fires kt-files-rejected - Files were refused. `detail: { files, reason }`.
+ *
+ * @example
+ * ```html
+ * <kt-drag-drop accept="image/*" recommended-size="800×400px"></kt-drag-drop>
+ * ```
+ */
+export declare class KtDragDrop extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private fileInput;
+    private dragging;
+    private files;
+    /**
+     * The prompt above the browse link.
+     *
+     * 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;
+    /** The clickable-looking part of the prompt. */
+    linkText: string;
+    /** Optional hint, e.g. `800×400px`. */
+    recommendedSize: string;
+    multiple: boolean;
+    /** Same syntax as the native `accept`: `image/*`, `.pdf,.docx`. */
+    accept: string;
+    /** Largest accepted file, in bytes. Zero means no limit. */
+    maxSize: number;
+    disabled: boolean;
+    /** The files currently held, newest last. */
+    get selectedFiles(): readonly File[];
+    /** Empties the selection without firing a rejection. */
+    clear(): void;
+    /**
+     * `accept` is advisory on a native input — the OS dialog filters, but a
+     * dropped file bypasses it entirely — so the same rules are enforced here.
+     */
+    private accepts;
+    private addFiles;
+    private removeAt;
+    private browse;
+    private onZoneKeyDown;
+    private onDragOver;
+    private onDrop;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-drag-drop': KtDragDrop;
+    }
+}

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

@@ -0,0 +1,287 @@
+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 { classMap as y } from "lit/directives/class-map.js";
+import { K as f, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as c } from "../../../chunks/events-Bjl5Zmmq.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;
+  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;
+};
+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;
+  }
+  static {
+    this.styles = [
+      f.styles,
+      g`
+      :host {
+        display: block;
+        user-select: none;
+      }
+
+      .zone {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--gap-drag-drop);
+        padding: var(--padding-drag-drop);
+        border: var(--border-width) dashed var(--color-dark-24);
+        border-radius: var(--border-radius);
+        cursor: pointer;
+        transition:
+          border-color var(--duration-instant),
+          box-shadow var(--duration-instant);
+      }
+
+      .zone:hover {
+        border-color: var(--text-muted);
+      }
+
+      .zone:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .dragover {
+        border-color: var(--color-primary-base);
+        box-shadow: 0 0 0 6px var(--color-primary-soft);
+      }
+
+      .prompt {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: var(--gap-button);
+        text-align: center;
+      }
+
+      .prompt-icon {
+        color: var(--text-muted);
+      }
+
+      .title {
+        margin: 0;
+        color: var(--color-primary-base);
+        font: var(--font-normal-medium);
+      }
+
+      .hint {
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+
+      input[type='file'] {
+        display: none;
+      }
+
+      .list {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+        width: 100%;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .item {
+        display: flex;
+        align-items: center;
+        gap: 12px;
+        width: 100%;
+        padding: 12px;
+        background: var(--surface-raised);
+        border-radius: var(--border-radius);
+        cursor: default;
+        transition: background var(--duration-normal) var(--easing-standard);
+      }
+      .item:hover {
+        background: var(--surface-hover);
+      }
+
+      .preview {
+        display: flex;
+        flex: none;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        overflow: hidden;
+        color: var(--color-info-base);
+        background: var(--color-dark-14);
+        border-radius: 6px;
+      }
+
+      .info {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+      }
+
+      .name {
+        overflow: hidden;
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .details {
+        display: flex;
+        align-items: center;
+        gap: 6px;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+      }
+    `
+    ];
+  }
+  /** The files currently held, newest last. */
+  get selectedFiles() {
+    return this.files;
+  }
+  /** Empties the selection without firing a rejection. */
+  clear() {
+    this.files = [], c(this, "kt-files-change", { files: this.files });
+  }
+  /**
+   * `accept` is advisory on a native input — the OS dialog filters, but a
+   * dropped file bypasses it entirely — so the same rules are enforced here.
+   */
+  accepts(e) {
+    return this.maxSize > 0 && e.size > this.maxSize ? !1 : this.accept ? this.accept.split(",").map((t) => t.trim().toLowerCase()).filter(Boolean).some((t) => t.startsWith(".") ? e.name.toLowerCase().endsWith(t) : t.endsWith("/*") ? e.type.startsWith(t.slice(0, -1)) : e.type.toLowerCase() === t) : !0;
+  }
+  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 }));
+  }
+  removeAt(e) {
+    this.files = this.files.filter((t, n) => n !== e), c(this, "kt-files-change", { files: this.files });
+  }
+  browse() {
+    this.disabled || this.fileInput?.click();
+  }
+  onZoneKeyDown(e) {
+    e.key !== "Enter" && e.key !== " " || (e.preventDefault(), this.browse());
+  }
+  onDragOver(e) {
+    this.disabled || (e.preventDefault(), this.dragging = !0);
+  }
+  onDrop(e) {
+    this.disabled || (e.preventDefault(), this.dragging = !1, this.addFiles(e.dataTransfer?.files ?? null));
+  }
+  render() {
+    return p`<div
+      part="base"
+      class=${y({ zone: !0, dragover: this.dragging })}
+      role="button"
+      tabindex=${this.disabled ? -1 : 0}
+      aria-disabled=${this.disabled ? "true" : d}
+      aria-label=${`${this.heading} ${this.linkText}`}
+      @click=${this.browse}
+      @keydown=${this.onZoneKeyDown}
+      @dragover=${this.onDragOver}
+      @dragleave=${() => {
+      this.dragging = !1;
+    }}
+      @drop=${this.onDrop}
+    >
+      <input
+        type="file"
+        ?multiple=${this.multiple}
+        accept=${this.accept || d}
+        @click=${(e) => e.stopPropagation()}
+        @change=${(e) => this.addFiles(e.target.files)}
+      />
+
+      <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}
+        </div>
+      </div>
+
+      ${this.files.length > 0 ? p`<ul
+              part="list"
+              class="list"
+              aria-label="Selected files"
+              @click=${(e) => e.stopPropagation()}
+            >
+              ${this.files.map(
+      (e, t) => p`<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>${x(e.size)}</span>
+                        ${e.type ? p`<span>•</span><span>${e.type}</span>` : d}
+                      </span>
+                    </span>
+                    <kt-button
+                      variant="danger"
+                      size="small"
+                      icon="trash-2"
+                      label=${`Remove ${e.name}`}
+                      @click=${() => this.removeAt(t)}
+                    ></kt-button>
+                  </li>`
+    )}
+            </ul>` : d}
+    </div>`;
+  }
+}
+s([
+  v('input[type="file"]')
+], i.prototype, "fileInput");
+s([
+  u()
+], i.prototype, "dragging");
+s([
+  u()
+], i.prototype, "files");
+s([
+  l({ type: String })
+], i.prototype, "heading");
+s([
+  l({ type: String, attribute: "link-text" })
+], i.prototype, "linkText");
+s([
+  l({ type: String, attribute: "recommended-size" })
+], i.prototype, "recommendedSize");
+s([
+  l({ type: Boolean })
+], i.prototype, "multiple");
+s([
+  l({ type: String })
+], i.prototype, "accept");
+s([
+  l({ type: Number, attribute: "max-size" })
+], i.prototype, "maxSize");
+s([
+  l({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled");
+b("kt-drag-drop", i);
+export {
+  i as KtDragDrop
+};
+//# sourceMappingURL=kt-drag-drop.js.map

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

@@ -0,0 +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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"}

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

@@ -0,0 +1,75 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../feedback/kt-skeleton/kt-skeleton.js';
+/**
+ * A panel grouping related fields.
+ *
+ * It sits one step above the page on `--surface-form`, so the fields inside —
+ * filled at `--surface-field` — read as wells recessed into it rather than as
+ * boxes floating on it.
+ *
+ * **Put it inside your own `<form>`.** It renders a `<fieldset>`, not a form:
+ * Kanto fields are form-associated custom elements, and a control finds its
+ * form by walking its *own* tree. A `<form>` inside this element's shadow root
+ * would not own anything slotted into it, and `new FormData(form)` would come
+ * back empty. The `<form>` above stays in charge of submission, validation and
+ * reset; this owns the grouping and the look.
+ *
+ * @element kt-form
+ *
+ * @slot - The fields.
+ * @slot heading - Replaces the `heading` attribute, for markup.
+ * @slot footer - Actions, right-aligned. Hidden when empty.
+ *
+ * @csspart base - The `<fieldset>`.
+ * @csspart header - The heading and description.
+ * @csspart fields - The field column.
+ * @csspart footer - The action row.
+ *
+ * @example
+ * ```html
+ * <form>
+ *   <kt-form heading="Identity" description="How we address you.">
+ *     <kt-label-input label="Company" required>
+ *       <kt-input name="company" required></kt-input>
+ *     </kt-label-input>
+ *     <kt-button slot="footer" type="submit">Save</kt-button>
+ *   </kt-form>
+ * </form>
+ * ```
+ */
+export declare class KtForm extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private fields;
+    private hasFooter;
+    /** Group heading. Also the fieldset's accessible name. */
+    heading: string;
+    description: string;
+    /** Replaces the fields with placeholders. */
+    loading: boolean;
+    /** Switches off every field in the panel. */
+    disabled: boolean;
+    /** How many placeholder fields `loading` draws. */
+    loadingFields: number;
+    updated(changed: PropertyValues<this>): void;
+    /**
+     * A native `<fieldset disabled>` switches off its descendants, but slotted
+     * fields are not descendants of the fieldset in their own tree — the shadow
+     * boundary sits between them — so the platform never reaches them. Walk the
+     * slotted controls and set it directly.
+     */
+    /**
+     * The initial `slotchange` is queued as a microtask and can land after the
+     * first render has settled, so read the slots once directly as well.
+     */
+    firstUpdated(): void;
+    private readSlots;
+    private onFooterSlotChange;
+    private syncDisabled;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-form': KtForm;
+    }
+}

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

@@ -0,0 +1,187 @@
+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 { h as y } from "../../../chunks/slots-BPbIdxAJ.js";
+import "../../feedback/kt-skeleton/kt-skeleton.js";
+var b = Object.defineProperty, s = (l, e, o, u) => {
+  for (var i = void 0, d = l.length - 1, n; d >= 0; d--)
+    (n = l[d]) && (i = n(e, o, i) || i);
+  return i && b(e, o, i), i;
+};
+class t extends p {
+  constructor() {
+    super(...arguments), this.hasFooter = !1, this.heading = "", this.description = "", this.loading = !1, this.disabled = !1, this.loadingFields = 3;
+  }
+  static {
+    this.styles = [
+      p.styles,
+      f`
+      :host {
+        display: block;
+      }
+
+      fieldset {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-form);
+        min-width: 0;
+        margin: 0;
+        padding: var(--padding-card);
+        background-color: var(--surface-form);
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius-card);
+      }
+
+      .header {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+      }
+
+      /* A legend is the accessible name for the group, so it stays in the
+         accessibility tree even when there is nothing to show. */
+      legend {
+        padding: 0;
+        color: var(--text-body);
+        font: var(--font-title-h6);
+      }
+
+      legend.visually-hidden {
+        position: absolute;
+        width: 1px;
+        height: 1px;
+        overflow: hidden;
+        clip-path: inset(50%);
+        white-space: nowrap;
+      }
+
+      .description {
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+      }
+
+      .fields {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-form);
+        min-width: 0;
+      }
+
+      .placeholder {
+        display: flex;
+        flex-direction: column;
+        gap: 8px;
+      }
+
+      .footer {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--gap-button);
+      }
+
+      /* Collapsed from JS: a wrapper around a <slot> always has the slot as a
+         child, so :has(*) cannot tell an empty slot from a filled one. */
+      .footer.empty {
+        display: none;
+      }
+
+      /* While loading, the real fields stay in the DOM — and keep their state
+         — but step aside for the placeholders. */
+      :host([loading]) ::slotted(*) {
+        display: none;
+      }
+
+      :host([disabled]) fieldset {
+        opacity: 0.6;
+      }
+    `
+    ];
+  }
+  updated(e) {
+    e.has("disabled") && this.syncDisabled();
+  }
+  /**
+   * A native `<fieldset disabled>` switches off its descendants, but slotted
+   * fields are not descendants of the fieldset in their own tree — the shadow
+   * boundary sits between them — so the platform never reaches them. Walk the
+   * slotted controls and set it directly.
+   */
+  /**
+   * The initial `slotchange` is queued as a microtask and can land after the
+   * first render has settled, so read the slots once directly as well.
+   */
+  firstUpdated() {
+    this.readSlots(), this.syncDisabled();
+  }
+  readSlots() {
+    this.hasFooter = y(
+      this.shadowRoot?.querySelector('slot[name="footer"]')
+    );
+  }
+  onFooterSlotChange() {
+    this.readSlots();
+  }
+  syncDisabled() {
+    for (const e of this.fields ?? []) {
+      "disabled" in e && (e.disabled = this.disabled);
+      for (const o of e.querySelectorAll("*"))
+        "disabled" in o && (o.disabled = this.disabled);
+    }
+  }
+  render() {
+    const e = !!this.heading || !!this.description;
+    return r`<fieldset part="base" ?disabled=${this.disabled}>
+      <legend class=${this.heading ? "" : "visually-hidden"}>
+        <slot name="heading">${this.heading || "Form section"}</slot>
+      </legend>
+
+      ${e && this.description ? r`<div part="header" class="header">
+              <p class="description">${this.description}</p>
+            </div>` : h}
+
+      <div part="fields" class="fields">
+        ${this.loading ? Array.from(
+      { length: this.loadingFields },
+      () => r`<div class="placeholder" aria-hidden="true">
+                    <kt-skeleton width="30%" height="14px"></kt-skeleton>
+                    <kt-skeleton variant="rect" height="40px"></kt-skeleton>
+                  </div>`
+    ) : h}
+        <slot @slotchange=${this.syncDisabled}></slot>
+      </div>
+
+      <div part="footer" class=${this.hasFooter ? "footer" : "footer empty"}>
+        <slot name="footer" @slotchange=${this.onFooterSlotChange}></slot>
+      </div>
+    </fieldset>`;
+  }
+}
+s([
+  c()
+], t.prototype, "fields");
+s([
+  g()
+], t.prototype, "hasFooter");
+s([
+  a({ type: String })
+], t.prototype, "heading");
+s([
+  a({ type: String })
+], t.prototype, "description");
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "loading");
+s([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled");
+s([
+  a({ type: Number, attribute: "loading-fields" })
+], t.prototype, "loadingFields");
+m("kt-form", t);
+export {
+  t as KtForm
+};
+//# sourceMappingURL=kt-form.js.map