kanto-ds 1.0.0

package/dist/components/data/kt-timeline/kt-timeline.js

@@ -0,0 +1,252 @@
+import { css as h, html as s, nothing as m } from "lit";
+import { property as a } from "lit/decorators.js";
+import { classMap as k } from "lit/directives/class-map.js";
+import { K as c, d as f } from "../../../chunks/kt-element-CcMLO5e8.js";
+import "../../core/kt-icon/kt-icon.js";
+var v = Object.defineProperty, i = (l, r, o, n) => {
+  for (var e = void 0, p = l.length - 1, d; p >= 0; p--)
+    (d = l[p]) && (e = d(r, o, e) || e);
+  return e && v(r, o, e), e;
+};
+class g extends c {
+  constructor() {
+    super(...arguments), this.compact = !1, this.#r = () => {
+      const r = this.shadowRoot?.querySelector("slot");
+      if (!r) return;
+      const o = r.assignedElements({ flatten: !0 }).filter((n) => n instanceof t);
+      o.forEach((n, e) => {
+        n.last = e === o.length - 1, n.compact = this.compact;
+      });
+    };
+  }
+  static {
+    this.styles = [
+      c.styles,
+      h`
+      :host {
+        display: block;
+      }
+
+      .timeline {
+        display: flex;
+        flex-direction: column;
+      }
+    `
+    ];
+  }
+  render() {
+    return s`<div part="base" class="timeline" role="list">
+      <slot @slotchange=${this.#r}></slot>
+    </div>`;
+  }
+  /**
+   * The first `slotchange` is a microtask that can land after `updateComplete`,
+   * so a caller that awaits the element would read stale items. Sync once the
+   * shadow root exists as well as on every later change.
+   */
+  firstUpdated() {
+    this.#r();
+  }
+  updated(r) {
+    r.has("compact") && this.#r();
+  }
+  #r;
+}
+i([
+  a({ type: Boolean, reflect: !0 })
+], g.prototype, "compact");
+class t extends c {
+  constructor() {
+    super(...arguments), this.heading = "", this.time = "", this.icon = "", this.variant = "neutral", this.last = !1, this.compact = !1;
+  }
+  static {
+    this.styles = [
+      c.styles,
+      h`
+      :host {
+        display: block;
+      }
+
+      .item {
+        display: grid;
+        grid-template-columns: 26px 1fr;
+        gap: 12px;
+        padding-bottom: 20px;
+      }
+
+      :host([compact]) .item {
+        padding-bottom: 12px;
+      }
+
+      :host([last]) .item {
+        padding-bottom: 0;
+      }
+
+      /* The rail. It hangs below the marker, so the last item drops it. */
+      .rail {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        gap: 6px;
+      }
+
+      .rail::after {
+        flex: 1;
+        width: 1px;
+        min-height: 8px;
+        background: var(--border-subtle);
+        content: '';
+      }
+
+      :host([last]) .rail::after {
+        content: none;
+      }
+
+      /* Hairline, wash, ink — the same three parts a chip and a badge wear, so
+         a marker beside them reads as the same system. A soft fill with no
+         border is a different one's idea of a timeline. */
+      .marker {
+        display: flex;
+        flex-shrink: 0;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        width: 26px;
+        height: 26px;
+        color: var(--marker-ink, var(--text-muted));
+        background: var(--marker-wash, var(--surface-raised));
+        border: var(--border-width) solid var(--marker-line, var(--border-subtle));
+        border-radius: var(--radius-full);
+      }
+
+      /* Without an icon the marker is a dot, not an empty ring — but it keeps
+         the ring, so the rail reads as one line of marks rather than two. */
+      .marker.dot {
+        width: 11px;
+        height: 11px;
+        margin-top: 7px;
+        background: var(--marker-ink, var(--text-disabled));
+        border-color: color-mix(
+          in srgb,
+          var(--marker-ink, var(--text-disabled)) 45%,
+          var(--surface-page)
+        );
+      }
+
+      .marker.primary {
+        --marker-ink: var(--color-primary-base);
+        --marker-wash: var(--color-primary-soft);
+        --marker-line: color-mix(in srgb, var(--color-primary-base) 45%, transparent);
+      }
+      .marker.success {
+        --marker-ink: var(--color-success-base);
+        --marker-wash: var(--color-success-soft);
+        --marker-line: color-mix(in srgb, var(--color-success-base) 45%, transparent);
+      }
+      .marker.warning {
+        --marker-ink: var(--color-warning-base);
+        --marker-wash: var(--color-warning-soft);
+        --marker-line: color-mix(in srgb, var(--color-warning-base) 45%, transparent);
+      }
+      .marker.danger {
+        --marker-ink: var(--color-danger-base);
+        --marker-wash: var(--color-danger-soft);
+        --marker-line: color-mix(in srgb, var(--color-danger-base) 45%, transparent);
+      }
+      .marker.info {
+        --marker-ink: var(--color-info-base);
+        --marker-wash: var(--color-info-soft);
+        --marker-line: color-mix(in srgb, var(--color-info-base) 45%, transparent);
+      }
+
+      .content {
+        display: flex;
+        flex-direction: column;
+        gap: 2px;
+        min-width: 0;
+        padding-top: 2px;
+      }
+
+      .top {
+        display: flex;
+        align-items: baseline;
+        gap: 8px;
+      }
+
+      .heading {
+        color: var(--text-body);
+        font: var(--font-medium-regular);
+      }
+
+      .time {
+        margin-left: auto;
+        color: var(--text-muted);
+        font: var(--font-normal-small);
+        font-variant-numeric: tabular-nums;
+        white-space: nowrap;
+      }
+
+      .body {
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        line-height: 1.6;
+      }
+
+      ::slotted(*) {
+        margin: 0;
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("role", "listitem");
+  }
+  render() {
+    const r = k({
+      marker: !0,
+      dot: !this.icon,
+      [this.variant]: !0
+    });
+    return s`<div part="base" class="item">
+      <div class="rail">
+        <span part="marker" class=${r}>
+          ${this.icon ? s`<kt-icon name=${this.icon} size="14"></kt-icon>` : m}
+        </span>
+      </div>
+
+      <div class="content">
+        ${this.heading || this.time ? s`<div class="top">
+                ${this.heading ? s`<span class="heading">${this.heading}</span>` : m}
+                <slot name="actions"></slot>
+                ${this.time ? s`<span class="time">${this.time}</span>` : m}
+              </div>` : m}
+        <div class="body"><slot></slot></div>
+      </div>
+    </div>`;
+  }
+}
+i([
+  a({ type: String })
+], t.prototype, "heading");
+i([
+  a({ type: String })
+], t.prototype, "time");
+i([
+  a({ type: String })
+], t.prototype, "icon");
+i([
+  a({ type: String, reflect: !0 })
+], t.prototype, "variant");
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "last");
+i([
+  a({ type: Boolean, reflect: !0 })
+], t.prototype, "compact");
+f("kt-timeline", g);
+f("kt-timeline-item", t);
+export {
+  g as KtTimeline,
+  t as KtTimelineItem
+};
+//# sourceMappingURL=kt-timeline.js.map

package/dist/components/data/kt-timeline/kt-timeline.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-timeline.js","sources":["../../../../src/components/data/kt-timeline/kt-timeline.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtTimelineVariant = 'neutral' | 'primary' | 'success' | 'warning' | 'danger' | 'info';\n\n/**\n * An ordered run of events on a rail.\n *\n * The same shape keeps reappearing — an activity feed, an audit log, a\n * changelog, the stages of a delivery, a résumé — and every time it gets\n * rebuilt out of a list, a pseudo-element line and a hand-placed dot. The\n * fiddly part is the rail: it must start at the first dot and stop at the\n * last, which a border on the list cannot do. Here each item draws its own\n * segment and the last one is told to stop.\n *\n * `<kt-timeline>` is the semantic list; `<kt-timeline-item>` is one event.\n *\n * @element kt-timeline\n *\n * @slot - The `<kt-timeline-item>` children.\n *\n * @csspart base - The list.\n *\n * @example\n * ```html\n * <kt-timeline>\n *   <kt-timeline-item heading=\"Deployed\" time=\"09:24\" variant=\"success\" icon=\"rocket\">\n *     Build 4210 went to production.\n *   </kt-timeline-item>\n *   <kt-timeline-item heading=\"Review requested\" time=\"09:02\" icon=\"eye\"></kt-timeline-item>\n * </kt-timeline>\n * ```\n */\nexport class KtTimeline extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .timeline {\n        display: flex;\n        flex-direction: column;\n      }\n    `,\n  ];\n\n  /** Tighter rhythm, for a feed in a side panel. */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  override render(): TemplateResult {\n    return html`<div part=\"base\" class=\"timeline\" role=\"list\">\n      <slot @slotchange=${this.#markLast}></slot>\n    </div>`;\n  }\n\n  /**\n   * The first `slotchange` is a microtask that can land after `updateComplete`,\n   * so a caller that awaits the element would read stale items. Sync once the\n   * shadow root exists as well as on every later change.\n   */\n  override firstUpdated(): void {\n    this.#markLast();\n  }\n\n  override updated(changed: Map<string, unknown>): void {\n    if (changed.has('compact')) this.#markLast();\n  }\n\n  /**\n   * The rail has to stop at the last dot rather than run past it, and CSS\n   * cannot select \"last slotted element\" from inside the shadow root —\n   * `:last-child` matches in the light tree, which the item's own styles\n   * cannot see. So the parent tells it.\n   */\n  #markLast = (): void => {\n    const slot = this.shadowRoot?.querySelector('slot');\n    if (!slot) return;\n\n    const items = slot\n      .assignedElements({ flatten: true })\n      .filter((el): el is KtTimelineItem => el instanceof KtTimelineItem);\n\n    items.forEach((item, index) => {\n      item.last = index === items.length - 1;\n      item.compact = this.compact;\n    });\n  };\n}\n\n/**\n * One event on a `<kt-timeline>`.\n *\n * @element kt-timeline-item\n *\n * @slot - The body of the event.\n * @slot actions - Trailing controls, aligned with the heading.\n *\n * @csspart base - The row.\n * @csspart marker - The dot or icon.\n */\nexport class KtTimelineItem extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .item {\n        display: grid;\n        grid-template-columns: 26px 1fr;\n        gap: 12px;\n        padding-bottom: 20px;\n      }\n\n      :host([compact]) .item {\n        padding-bottom: 12px;\n      }\n\n      :host([last]) .item {\n        padding-bottom: 0;\n      }\n\n      /* The rail. It hangs below the marker, so the last item drops it. */\n      .rail {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        gap: 6px;\n      }\n\n      .rail::after {\n        flex: 1;\n        width: 1px;\n        min-height: 8px;\n        background: var(--border-subtle);\n        content: '';\n      }\n\n      :host([last]) .rail::after {\n        content: none;\n      }\n\n      /* Hairline, wash, ink — the same three parts a chip and a badge wear, so\n         a marker beside them reads as the same system. A soft fill with no\n         border is a different one's idea of a timeline. */\n      .marker {\n        display: flex;\n        flex-shrink: 0;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        width: 26px;\n        height: 26px;\n        color: var(--marker-ink, var(--text-muted));\n        background: var(--marker-wash, var(--surface-raised));\n        border: var(--border-width) solid var(--marker-line, var(--border-subtle));\n        border-radius: var(--radius-full);\n      }\n\n      /* Without an icon the marker is a dot, not an empty ring — but it keeps\n         the ring, so the rail reads as one line of marks rather than two. */\n      .marker.dot {\n        width: 11px;\n        height: 11px;\n        margin-top: 7px;\n        background: var(--marker-ink, var(--text-disabled));\n        border-color: color-mix(\n          in srgb,\n          var(--marker-ink, var(--text-disabled)) 45%,\n          var(--surface-page)\n        );\n      }\n\n      .marker.primary {\n        --marker-ink: var(--color-primary-base);\n        --marker-wash: var(--color-primary-soft);\n        --marker-line: color-mix(in srgb, var(--color-primary-base) 45%, transparent);\n      }\n      .marker.success {\n        --marker-ink: var(--color-success-base);\n        --marker-wash: var(--color-success-soft);\n        --marker-line: color-mix(in srgb, var(--color-success-base) 45%, transparent);\n      }\n      .marker.warning {\n        --marker-ink: var(--color-warning-base);\n        --marker-wash: var(--color-warning-soft);\n        --marker-line: color-mix(in srgb, var(--color-warning-base) 45%, transparent);\n      }\n      .marker.danger {\n        --marker-ink: var(--color-danger-base);\n        --marker-wash: var(--color-danger-soft);\n        --marker-line: color-mix(in srgb, var(--color-danger-base) 45%, transparent);\n      }\n      .marker.info {\n        --marker-ink: var(--color-info-base);\n        --marker-wash: var(--color-info-soft);\n        --marker-line: color-mix(in srgb, var(--color-info-base) 45%, transparent);\n      }\n\n      .content {\n        display: flex;\n        flex-direction: column;\n        gap: 2px;\n        min-width: 0;\n        padding-top: 2px;\n      }\n\n      .top {\n        display: flex;\n        align-items: baseline;\n        gap: 8px;\n      }\n\n      .heading {\n        color: var(--text-body);\n        font: var(--font-medium-regular);\n      }\n\n      .time {\n        margin-left: auto;\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n        font-variant-numeric: tabular-nums;\n        white-space: nowrap;\n      }\n\n      .body {\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        line-height: 1.6;\n      }\n\n      ::slotted(*) {\n        margin: 0;\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  heading = '';\n\n  /** Shown right-aligned on the heading row. Any string — \"09:24\", \"2 days ago\". */\n  @property({ type: String })\n  time = '';\n\n  /** Lucide icon name. Without one the marker is a plain dot. */\n  @property({ type: String })\n  icon = '';\n\n  @property({ type: String, reflect: true })\n  variant: KtTimelineVariant = 'neutral';\n\n  /** Set by the parent `<kt-timeline>`: drops the trailing rail segment. */\n  @property({ type: Boolean, reflect: true })\n  last = false;\n\n  /** Set by the parent `<kt-timeline>`. */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.setAttribute('role', 'listitem');\n  }\n\n  override render(): TemplateResult {\n    const marker = classMap({\n      marker: true,\n      dot: !this.icon,\n      [this.variant]: true,\n    });\n\n    return html`<div part=\"base\" class=\"item\">\n      <div class=\"rail\">\n        <span part=\"marker\" class=${marker}>\n          ${this.icon ? html`<kt-icon name=${this.icon} size=\"14\"></kt-icon>` : nothing}\n        </span>\n      </div>\n\n      <div class=\"content\">\n        ${\n          this.heading || this.time\n            ? html`<div class=\"top\">\n                ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n                <slot name=\"actions\"></slot>\n                ${this.time ? html`<span class=\"time\">${this.time}</span>` : nothing}\n              </div>`\n            : nothing\n        }\n        <div class=\"body\"><slot></slot></div>\n      </div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-timeline', KtTimeline);\ndefineElement('kt-timeline-item', KtTimelineItem);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-timeline': KtTimeline;\n    'kt-timeline-item': KtTimelineItem;\n  }\n}\n"],"names":["KtTimeline","KtElement","#markLast","slot","items","el","KtTimelineItem","item","index","css","html","changed","__decorateClass","property","marker","classMap","nothing","defineElement"],"mappings":"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"}

package/dist/components/feedback/kt-alert/kt-alert.d.ts

@@ -0,0 +1,46 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export type KtAlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';
+/**
+ * A message that stays on the page.
+ *
+ * Against a toast: a toast is transient and interrupts; an alert sits in the
+ * layout and waits. Use an alert when the message belongs to the page — a form
+ * that failed to save, a trial about to expire, a consent notice — and a toast
+ * when it belongs to the moment.
+ *
+ * @element kt-alert
+ *
+ * @slot - Body text, when `description` is not used.
+ * @slot actions - Buttons, at the end.
+ *
+ * @csspart base - The alert.
+ * @csspart close - The dismiss button.
+ *
+ * @fires kt-close - The dismiss button was pressed.
+ *
+ * @example
+ * ```html
+ * <kt-alert variant="warning" heading="Storage almost full"
+ *           description="You are using 88% of your quota."></kt-alert>
+ * ```
+ */
+export declare class KtAlert extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    variant: KtAlertVariant;
+    heading: string;
+    description: string;
+    /** Adds a dismiss button. Removing the alert is the caller's job. */
+    dismissible: boolean;
+    /** Hides the leading icon. */
+    noIcon: boolean;
+    /** Overrides the icon the variant would pick. */
+    icon: string;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-alert': KtAlert;
+    }
+}

package/dist/components/feedback/kt-alert/kt-alert.js

@@ -0,0 +1,180 @@
+import { css as v, nothing as s, html as e } from "lit";
+import { property as a } from "lit/decorators.js";
+import { K as p, d as h } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-icon/kt-icon.js";
+var f = Object.defineProperty, t = (n, i, c, b) => {
+  for (var r = void 0, l = n.length - 1, d; l >= 0; l--)
+    (d = n[l]) && (r = d(i, c, r) || r);
+  return r && f(i, c, r), r;
+};
+const u = {
+  info: "info",
+  success: "circle-check",
+  warning: "triangle-alert",
+  danger: "circle-alert",
+  neutral: "info"
+};
+class o extends p {
+  constructor() {
+    super(...arguments), this.variant = "info", this.heading = "", this.description = "", this.dismissible = !1, this.noIcon = !1, this.icon = "";
+  }
+  static {
+    this.styles = [
+      p.styles,
+      v`
+      :host {
+        display: block;
+      }
+
+      .alert {
+        display: flex;
+        align-items: flex-start;
+        gap: var(--gap-form);
+        padding: var(--padding-form);
+        color: var(--text-body);
+        background: var(--surface-card);
+        border: var(--border-width) solid var(--border-subtle);
+        border-radius: var(--border-radius);
+      }
+
+      /* A tinted fill plus a matching border, rather than a coloured bar: the
+         whole block should read as the message's temperature. */
+      :host([variant='info']) .alert {
+        background: var(--color-info-soft);
+        border-color: var(--color-info-base);
+      }
+      :host([variant='success']) .alert {
+        background: var(--color-success-soft);
+        border-color: var(--color-success-base);
+      }
+      :host([variant='warning']) .alert {
+        background: var(--color-warning-soft);
+        border-color: var(--color-warning-base);
+      }
+      :host([variant='danger']) .alert {
+        background: var(--color-danger-soft);
+        border-color: var(--color-danger-base);
+      }
+
+      .icon {
+        display: flex;
+        flex: none;
+        padding-top: 1px;
+      }
+
+      :host([variant='info']) .icon {
+        color: var(--color-info-base);
+      }
+      :host([variant='success']) .icon {
+        color: var(--color-success-base);
+      }
+      :host([variant='warning']) .icon {
+        color: var(--color-warning-base);
+      }
+      :host([variant='danger']) .icon {
+        color: var(--color-danger-base);
+      }
+      :host([variant='neutral']) .icon {
+        color: var(--text-muted);
+      }
+
+      .content {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        gap: var(--gap-element);
+        min-width: 0;
+      }
+
+      .heading {
+        font: var(--font-normal-medium);
+      }
+
+      .description {
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button);
+        margin-top: 4px;
+      }
+
+      .actions:not(:has(*)) {
+        display: none;
+      }
+
+      .close {
+        display: flex;
+        flex: none;
+        align-items: center;
+        padding: 2px;
+        color: currentcolor;
+        background: none;
+        border: none;
+        border-radius: 4px;
+        cursor: pointer;
+        opacity: 0.7;
+      }
+
+      .close:hover {
+        opacity: 1;
+      }
+
+      .close:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+      }
+    `
+    ];
+  }
+  render() {
+    const i = this.variant === "danger" ? "assertive" : "polite";
+    return e`<div part="base" class="alert" role="alert" aria-live=${i}>
+      ${this.noIcon ? s : e`<span class="icon">
+              <kt-icon name=${this.icon || u[this.variant]} size="20"></kt-icon>
+            </span>`}
+
+      <div class="content">
+        ${this.heading ? e`<span class="heading">${this.heading}</span>` : s}
+        ${this.description ? e`<span class="description">${this.description}</span>` : s}
+        <slot></slot>
+        <div class="actions"><slot name="actions"></slot></div>
+      </div>
+
+      ${this.dismissible ? e`<button
+              part="close"
+              class="close"
+              aria-label="Dismiss"
+              @click=${() => g(this, "kt-close")}
+            >
+              <kt-icon name="x" size="16"></kt-icon>
+            </button>` : s}
+    </div>`;
+  }
+}
+t([
+  a({ type: String, reflect: !0 })
+], o.prototype, "variant");
+t([
+  a({ type: String })
+], o.prototype, "heading");
+t([
+  a({ type: String })
+], o.prototype, "description");
+t([
+  a({ type: Boolean })
+], o.prototype, "dismissible");
+t([
+  a({ type: Boolean, attribute: "no-icon" })
+], o.prototype, "noIcon");
+t([
+  a({ type: String })
+], o.prototype, "icon");
+h("kt-alert", o);
+export {
+  o as KtAlert
+};
+//# sourceMappingURL=kt-alert.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-alert.js","sources":["../../../../src/components/feedback/kt-alert/kt-alert.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtAlertVariant = 'info' | 'success' | 'warning' | 'danger' | 'neutral';\n\nconst ICONS: Record<KtAlertVariant, string> = {\n  info: 'info',\n  success: 'circle-check',\n  warning: 'triangle-alert',\n  danger: 'circle-alert',\n  neutral: 'info',\n};\n\n/**\n * A message that stays on the page.\n *\n * Against a toast: a toast is transient and interrupts; an alert sits in the\n * layout and waits. Use an alert when the message belongs to the page — a form\n * that failed to save, a trial about to expire, a consent notice — and a toast\n * when it belongs to the moment.\n *\n * @element kt-alert\n *\n * @slot - Body text, when `description` is not used.\n * @slot actions - Buttons, at the end.\n *\n * @csspart base - The alert.\n * @csspart close - The dismiss button.\n *\n * @fires kt-close - The dismiss button was pressed.\n *\n * @example\n * ```html\n * <kt-alert variant=\"warning\" heading=\"Storage almost full\"\n *           description=\"You are using 88% of your quota.\"></kt-alert>\n * ```\n */\nexport class KtAlert extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .alert {\n        display: flex;\n        align-items: flex-start;\n        gap: var(--gap-form);\n        padding: var(--padding-form);\n        color: var(--text-body);\n        background: var(--surface-card);\n        border: var(--border-width) solid var(--border-subtle);\n        border-radius: var(--border-radius);\n      }\n\n      /* A tinted fill plus a matching border, rather than a coloured bar: the\n         whole block should read as the message's temperature. */\n      :host([variant='info']) .alert {\n        background: var(--color-info-soft);\n        border-color: var(--color-info-base);\n      }\n      :host([variant='success']) .alert {\n        background: var(--color-success-soft);\n        border-color: var(--color-success-base);\n      }\n      :host([variant='warning']) .alert {\n        background: var(--color-warning-soft);\n        border-color: var(--color-warning-base);\n      }\n      :host([variant='danger']) .alert {\n        background: var(--color-danger-soft);\n        border-color: var(--color-danger-base);\n      }\n\n      .icon {\n        display: flex;\n        flex: none;\n        padding-top: 1px;\n      }\n\n      :host([variant='info']) .icon {\n        color: var(--color-info-base);\n      }\n      :host([variant='success']) .icon {\n        color: var(--color-success-base);\n      }\n      :host([variant='warning']) .icon {\n        color: var(--color-warning-base);\n      }\n      :host([variant='danger']) .icon {\n        color: var(--color-danger-base);\n      }\n      :host([variant='neutral']) .icon {\n        color: var(--text-muted);\n      }\n\n      .content {\n        display: flex;\n        flex: 1;\n        flex-direction: column;\n        gap: var(--gap-element);\n        min-width: 0;\n      }\n\n      .heading {\n        font: var(--font-normal-medium);\n      }\n\n      .description {\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n      }\n\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button);\n        margin-top: 4px;\n      }\n\n      .actions:not(:has(*)) {\n        display: none;\n      }\n\n      .close {\n        display: flex;\n        flex: none;\n        align-items: center;\n        padding: 2px;\n        color: currentcolor;\n        background: none;\n        border: none;\n        border-radius: 4px;\n        cursor: pointer;\n        opacity: 0.7;\n      }\n\n      .close:hover {\n        opacity: 1;\n      }\n\n      .close:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n      }\n    `,\n  ];\n\n  @property({ type: String, reflect: true })\n  variant: KtAlertVariant = 'info';\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Adds a dismiss button. Removing the alert is the caller's job. */\n  @property({ type: Boolean })\n  dismissible = false;\n\n  /** Hides the leading icon. */\n  @property({ type: Boolean, attribute: 'no-icon' })\n  noIcon = false;\n\n  /** Overrides the icon the variant would pick. */\n  @property({ type: String })\n  icon = '';\n\n  override render(): TemplateResult {\n    // Danger interrupts; the rest wait their turn.\n    const live = this.variant === 'danger' ? 'assertive' : 'polite';\n\n    return html`<div part=\"base\" class=\"alert\" role=\"alert\" aria-live=${live}>\n      ${\n        this.noIcon\n          ? nothing\n          : html`<span class=\"icon\">\n              <kt-icon name=${this.icon || ICONS[this.variant]} size=\"20\"></kt-icon>\n            </span>`\n      }\n\n      <div class=\"content\">\n        ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n        ${this.description ? html`<span class=\"description\">${this.description}</span>` : nothing}\n        <slot></slot>\n        <div class=\"actions\"><slot name=\"actions\"></slot></div>\n      </div>\n\n      ${\n        this.dismissible\n          ? html`<button\n              part=\"close\"\n              class=\"close\"\n              aria-label=\"Dismiss\"\n              @click=${() => emit(this, 'kt-close')}\n            >\n              <kt-icon name=\"x\" size=\"16\"></kt-icon>\n            </button>`\n          : nothing\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-alert', KtAlert);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-alert': KtAlert;\n  }\n}\n"],"names":["ICONS","KtAlert","KtElement","css","live","html","nothing","emit","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;AAQA,MAAMA,IAAwC;AAAA,EAC5C,MAAM;AAAA,EACN,SAAS;AAAA,EACT,SAAS;AAAA,EACT,QAAQ;AAAA,EACR,SAAS;AACX;AA0BO,MAAMC,UAAgBC,EAAU;AAAA,EAAhC,cAAA;AAAA,UAAA,GAAA,SAAA,GAgHL,KAAA,UAA0B,QAG1B,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,cAAc,IAId,KAAA,SAAS,IAIT,KAAA,OAAO;AAAA,EAAA;AAAA,EAjIP,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EA0GF;AAAA,EAuBS,SAAyB;AAEhC,UAAMC,IAAO,KAAK,YAAY,WAAW,cAAc;AAEvD,WAAOC,0DAA6DD,CAAI;AAAA,QAEpE,KAAK,SACDE,IACAD;AAAA,8BACkB,KAAK,QAAQL,EAAM,KAAK,OAAO,CAAC;AAAA,oBAExD;AAAA;AAAA;AAAA,UAGI,KAAK,UAAUK,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA,UAC3E,KAAK,cAAcD,8BAAiC,KAAK,WAAW,YAAYC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,QAMzF,KAAK,cACDD;AAAA;AAAA;AAAA;AAAA,uBAIW,MAAME,EAAK,MAAM,UAAU,CAAC;AAAA;AAAA;AAAA,yBAIvCD,CACN;AAAA;AAAA,EAEJ;AACF;AAtDEE,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GA/G9BR,EAgHX,WAAA,SAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAlHfR,EAmHX,WAAA,SAAA;AAGAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GArHfR,EAsHX,WAAA,aAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAzHhBR,EA0HX,WAAA,aAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,WAAW,WAAW;AAAA,GA7HtCR,EA8HX,WAAA,QAAA;AAIAO,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAjIfR,EAkIX,WAAA,MAAA;AAsCFS,EAAc,YAAYT,CAAO;"}

package/dist/components/feedback/kt-empty-state/kt-empty-state.d.ts

@@ -0,0 +1,40 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+/**
+ * What a screen shows when it has nothing to show.
+ *
+ * Worth a component because the empty case is where products are usually
+ * thinnest, and where they most need to say what to do next. An icon, a
+ * sentence and an action beat a blank panel every time.
+ *
+ * @element kt-empty-state
+ *
+ * @slot - Extra content between the description and the actions.
+ * @slot actions - Buttons.
+ *
+ * @csspart base - The container.
+ *
+ * @example
+ * ```html
+ * <kt-empty-state icon="inbox" heading="Nothing here"
+ *                 description="New messages will appear in this list.">
+ *   <kt-button slot="actions" icon="plus">Compose</kt-button>
+ * </kt-empty-state>
+ * ```
+ */
+export declare class KtEmptyState extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Lucide icon name, kebab-case. */
+    icon: string;
+    heading: string;
+    description: string;
+    /** Tighter padding, for an empty state inside a card or a panel. */
+    compact: boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-empty-state': KtEmptyState;
+    }
+}

package/dist/components/feedback/kt-empty-state/kt-empty-state.js

@@ -0,0 +1,100 @@
+import { css as h, nothing as r, html as i } from "lit";
+import { property as n } from "lit/decorators.js";
+import { K as d, d as m } from "../../../chunks/kt-element-CcMLO5e8.js";
+import "../../core/kt-icon/kt-icon.js";
+var g = Object.defineProperty, o = (s, p, c, f) => {
+  for (var t = void 0, a = s.length - 1, l; a >= 0; a--)
+    (l = s[a]) && (t = l(p, c, t) || t);
+  return t && g(p, c, t), t;
+};
+class e extends d {
+  constructor() {
+    super(...arguments), this.icon = "inbox", this.heading = "", this.description = "", this.compact = !1;
+  }
+  static {
+    this.styles = [
+      d.styles,
+      h`
+      :host {
+        display: block;
+      }
+
+      .empty {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        gap: var(--gap-button);
+        padding: 48px 24px;
+        text-align: center;
+      }
+
+      :host([compact]) .empty {
+        padding: 24px 16px;
+      }
+
+      .icon {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 48px;
+        height: 48px;
+        margin-bottom: 4px;
+        color: var(--text-muted);
+        background: var(--surface-raised);
+        border-radius: var(--radius-full);
+      }
+
+      .heading {
+        color: var(--text-body);
+        font: var(--font-title-h6);
+      }
+
+      .description {
+        max-width: 42ch;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        line-height: 1.6;
+      }
+
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: center;
+        gap: var(--gap-button);
+        margin-top: 8px;
+      }
+
+      .actions:not(:has(*)) {
+        display: none;
+      }
+    `
+    ];
+  }
+  render() {
+    return i`<div part="base" class="empty">
+      ${this.icon ? i`<span class="icon"><kt-icon name=${this.icon} size="22"></kt-icon></span>` : r}
+      ${this.heading ? i`<span class="heading">${this.heading}</span>` : r}
+      ${this.description ? i`<p class="description">${this.description}</p>` : r}
+      <slot></slot>
+      <div class="actions"><slot name="actions"></slot></div>
+    </div>`;
+  }
+}
+o([
+  n({ type: String })
+], e.prototype, "icon");
+o([
+  n({ type: String })
+], e.prototype, "heading");
+o([
+  n({ type: String })
+], e.prototype, "description");
+o([
+  n({ type: Boolean, reflect: !0 })
+], e.prototype, "compact");
+m("kt-empty-state", e);
+export {
+  e as KtEmptyState
+};
+//# sourceMappingURL=kt-empty-state.js.map

package/dist/components/feedback/kt-empty-state/kt-empty-state.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-empty-state.js","sources":["../../../../src/components/feedback/kt-empty-state/kt-empty-state.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport '../../core/kt-icon/kt-icon.js';\n\n/**\n * What a screen shows when it has nothing to show.\n *\n * Worth a component because the empty case is where products are usually\n * thinnest, and where they most need to say what to do next. An icon, a\n * sentence and an action beat a blank panel every time.\n *\n * @element kt-empty-state\n *\n * @slot - Extra content between the description and the actions.\n * @slot actions - Buttons.\n *\n * @csspart base - The container.\n *\n * @example\n * ```html\n * <kt-empty-state icon=\"inbox\" heading=\"Nothing here\"\n *                 description=\"New messages will appear in this list.\">\n *   <kt-button slot=\"actions\" icon=\"plus\">Compose</kt-button>\n * </kt-empty-state>\n * ```\n */\nexport class KtEmptyState extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .empty {\n        display: flex;\n        flex-direction: column;\n        align-items: center;\n        justify-content: center;\n        gap: var(--gap-button);\n        padding: 48px 24px;\n        text-align: center;\n      }\n\n      :host([compact]) .empty {\n        padding: 24px 16px;\n      }\n\n      .icon {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        width: 48px;\n        height: 48px;\n        margin-bottom: 4px;\n        color: var(--text-muted);\n        background: var(--surface-raised);\n        border-radius: var(--radius-full);\n      }\n\n      .heading {\n        color: var(--text-body);\n        font: var(--font-title-h6);\n      }\n\n      .description {\n        max-width: 42ch;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        line-height: 1.6;\n      }\n\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        justify-content: center;\n        gap: var(--gap-button);\n        margin-top: 8px;\n      }\n\n      .actions:not(:has(*)) {\n        display: none;\n      }\n    `,\n  ];\n\n  /** Lucide icon name, kebab-case. */\n  @property({ type: String })\n  icon = 'inbox';\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** Tighter padding, for an empty state inside a card or a panel. */\n  @property({ type: Boolean, reflect: true })\n  compact = false;\n\n  override render(): TemplateResult {\n    return html`<div part=\"base\" class=\"empty\">\n      ${\n        this.icon\n          ? html`<span class=\"icon\"><kt-icon name=${this.icon} size=\"22\"></kt-icon></span>`\n          : nothing\n      }\n      ${this.heading ? html`<span class=\"heading\">${this.heading}</span>` : nothing}\n      ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n      <slot></slot>\n      <div class=\"actions\"><slot name=\"actions\"></slot></div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-empty-state', KtEmptyState);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-empty-state': KtEmptyState;\n  }\n}\n"],"names":["KtEmptyState","KtElement","css","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;AA2BO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GA8DL,KAAA,OAAO,SAGP,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,UAAU;AAAA,EAAA;AAAA,EAvEV,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAuDF;AAAA,EAgBS,SAAyB;AAChC,WAAOC;AAAA,QAEH,KAAK,OACDA,qCAAwC,KAAK,IAAI,iCACjDC,CACN;AAAA,QACE,KAAK,UAAUD,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA,QAC3E,KAAK,cAAcD,2BAA8B,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA,EAIvF;AACF;AAzBEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7DfN,EA8DX,WAAA,MAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhEfN,EAiEX,WAAA,SAAA;AAGAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEfN,EAoEX,WAAA,aAAA;AAIAK,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvE/BN,EAwEX,WAAA,SAAA;AAiBFO,EAAc,kBAAkBP,CAAY;"}