kanto-ds 1.7.0 → 1.9.0

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

@@ -1 +1 @@
-{"version":3,"file":"kt-stat.js","sources":["../../../../src/components/data/kt-stat/kt-stat.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';\nimport '../../core/kt-badge/kt-badge.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport type KtStatTrend = 'up' | 'down' | 'flat';\n\n/**\n * One headline figure: a label, a value, and how it moved.\n *\n * Worth its own element because every dashboard rebuilds this tile, and every\n * rebuild makes the same two mistakes — the delta coloured by sign rather than\n * by meaning, and the label competing with the number.\n *\n * **The colour comes from `trend`, not from the sign.** Falling costs are good\n * news; rising churn is not. Pass `trend` to say which, and `inverted` when\n * down is the direction you want.\n *\n * @element kt-stat\n *\n * @slot - Extra content under the value — a sparkline, a caption.\n *\n * @csspart base - The tile.\n * @csspart value - The figure.\n *\n * @example\n * ```html\n * <kt-stat label=\"Revenue\" value=\"$292,342\" delta=\"-3%\" trend=\"down\"></kt-stat>\n * <kt-stat label=\"Customers\" value=\"712\" delta=\"+12%\" trend=\"up\" icon=\"users\"></kt-stat>\n * ```\n */\nexport class KtStat extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .stat {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        padding: var(--padding-card);\n      }\n\n      .head {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n\n      /* A tinted disc rather than a bare glyph: at this size an icon on its\n         own reads as noise beside the figure. */\n      .icon {\n        display: inline-flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n        width: 34px;\n        height: 34px;\n        color: var(--color-primary-text);\n        background: var(--color-primary-soft);\n        border-radius: var(--radius-full);\n      }\n\n      .label {\n        color: var(--text-muted);\n        font: var(--font-title-overline);\n        letter-spacing: var(--letter-spacing-overline);\n        text-transform: uppercase;\n      }\n\n      .figure {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 10px;\n      }\n\n      .value {\n        color: var(--text-body);\n        font: var(--font-title-h1);\n        font-variant-numeric: tabular-nums;\n        line-height: 1.1;\n      }\n\n      :host([size='small']) .value {\n        font: var(--font-title-h4);\n      }\n\n      .caption {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  value = '';\n\n  /** The movement, shown as a badge: `+12%`, `-3%`, `+2`. */\n  @property({ type: String })\n  delta = '';\n\n  /**\n   * What the movement means. Drives the badge colour.\n   * `flat` — and the default — stay neutral.\n   */\n  @property({ type: String, reflect: true })\n  trend: KtStatTrend = 'flat';\n\n  /**\n   * Down is the good direction here — churn, cost, latency.\n   * Swaps which trend reads as success.\n   */\n  @property({ type: Boolean })\n  inverted = false;\n\n  /** Lucide icon name, kebab-case. */\n  @property({ type: String })\n  icon = '';\n\n  /** Small print under the figure — \"vs last month\". */\n  @property({ type: String })\n  caption = '';\n\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  private get deltaVariant(): 'success' | 'danger' | 'neutral' {\n    if (this.trend === 'flat') return 'neutral';\n    const good = this.inverted ? 'down' : 'up';\n    return this.trend === good ? 'success' : 'danger';\n  }\n\n  override render(): TemplateResult {\n    return html`<div part=\"base\" class=\"stat\">\n      <div class=\"head\">\n        ${\n          this.icon\n            ? html`<span class=\"icon\"><kt-icon name=${this.icon} size=\"18\"></kt-icon></span>`\n            : nothing\n        }\n        <span class=\"label\">${this.label}</span>\n      </div>\n\n      ${\n        this.loading\n          ? html`<kt-skeleton variant=\"rect\" height=\"38px\" width=\"60%\"></kt-skeleton>`\n          : html`<div class=\"figure\">\n              <span part=\"value\" class=\"value\">${this.value}</span>\n              ${\n                this.delta\n                  ? html`<kt-badge variant=\"count\" tone=${this.deltaVariant}\n                      >${this.delta}</kt-badge\n                    >`\n                  : nothing\n              }\n            </div>`\n      }\n      ${this.caption ? html`<span class=\"caption\">${this.caption}</span>` : nothing}\n      <slot></slot>\n    </div>`;\n  }\n}\n\ndefineElement('kt-stat', KtStat);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-stat': KtStat;\n  }\n}\n"],"names":["KtStat","KtElement","css","good","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;;;;AAiCO,MAAMA,UAAeC,EAAU;AAAA,EAA/B,cAAA;AAAA,UAAA,GAAA,SAAA,GAoEL,KAAA,QAAQ,IAGR,KAAA,QAAQ,IAIR,KAAA,QAAQ,IAOR,KAAA,QAAqB,QAOrB,KAAA,WAAW,IAIX,KAAA,OAAO,IAIP,KAAA,UAAU,IAGV,KAAA,OAA2B,UAG3B,KAAA,UAAU;AAAA,EAAA;AAAA,EAtGV,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,IAAA;AAAA,EA8DF;AAAA,EAwCA,IAAY,eAAiD;AAC3D,QAAI,KAAK,UAAU,OAAQ,QAAO;AAClC,UAAMC,IAAO,KAAK,WAAW,SAAS;AACtC,WAAO,KAAK,UAAUA,IAAO,YAAY;AAAA,EAC3C;AAAA,EAES,SAAyB;AAChC,WAAOC;AAAA;AAAA,UAGD,KAAK,OACDA,qCAAwC,KAAK,IAAI,iCACjDC,CACN;AAAA,8BACsB,KAAK,KAAK;AAAA;AAAA;AAAA,QAIhC,KAAK,UACDD,0EACAA;AAAA,iDACqC,KAAK,KAAK;AAAA,gBAE3C,KAAK,QACDA,mCAAsC,KAAK,YAAY;AAAA,yBAClD,KAAK,KAAK;AAAA,yBAEfC,CACN;AAAA,mBAER;AAAA,QACE,KAAK,UAAUD,0BAA6B,KAAK,OAAO,YAAYC,CAAO;AAAA;AAAA;AAAA,EAGjF;AACF;AAxEEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAnEfP,EAoEX,WAAA,OAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAtEfP,EAuEX,WAAA,OAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfP,EA2EX,WAAA,OAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BP,EAkFX,WAAA,OAAA;AAOAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAA,CAAS;AAAA,GAxFhBP,EAyFX,WAAA,UAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA5FfP,EA6FX,WAAA,MAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhGfP,EAiGX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAnG9BP,EAoGX,WAAA,MAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAtG/BP,EAuGX,WAAA,SAAA;AAuCFQ,EAAc,WAAWR,CAAM;"}
+{"version":3,"file":"kt-stat.js","sources":["../../../../src/components/data/kt-stat/kt-stat.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { play } from '#internal/motion';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../core/kt-badge/kt-badge.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport type KtStatTrend = 'up' | 'down' | 'flat';\n\n/**\n * One headline figure: a label, a value, and how it moved.\n *\n * Worth its own element because every dashboard rebuilds this tile, and every\n * rebuild makes the same two mistakes — the delta coloured by sign rather than\n * by meaning, and the label competing with the number.\n *\n * **The colour comes from `trend`, not from the sign.** Falling costs are good\n * news; rising churn is not. Pass `trend` to say which, and `inverted` when\n * down is the direction you want.\n *\n * @element kt-stat\n *\n * @slot - Extra content under the value — a sparkline, a caption.\n *\n * @csspart base - The tile.\n * @csspart value - The figure.\n *\n * @example\n * ```html\n * <kt-stat label=\"Revenue\" value=\"$292,342\" delta=\"-3%\" trend=\"down\"></kt-stat>\n * <kt-stat label=\"Customers\" value=\"712\" delta=\"+12%\" trend=\"up\" icon=\"users\"></kt-stat>\n * ```\n */\nexport class KtStat extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .stat {\n        display: flex;\n        flex-direction: column;\n        gap: 10px;\n        padding: var(--padding-card);\n      }\n\n      .head {\n        display: flex;\n        align-items: center;\n        gap: 10px;\n      }\n\n      /* A tinted disc rather than a bare glyph: at this size an icon on its\n         own reads as noise beside the figure. */\n      .icon {\n        display: inline-flex;\n        flex: none;\n        align-items: center;\n        justify-content: center;\n        width: 34px;\n        height: 34px;\n        color: var(--color-primary-text);\n        background: var(--color-primary-soft);\n        border-radius: var(--radius-full);\n      }\n\n      .label {\n        color: var(--text-muted);\n        font: var(--font-title-overline);\n        letter-spacing: var(--letter-spacing-overline);\n        text-transform: uppercase;\n      }\n\n      .figure {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: 10px;\n      }\n\n      .value {\n        color: var(--text-body);\n        font: var(--font-title-h1);\n        font-variant-numeric: tabular-nums;\n        line-height: 1.1;\n      }\n\n      :host([size='small']) .value {\n        font: var(--font-title-h4);\n      }\n\n      .caption {\n        color: var(--text-muted);\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  @property({ type: String })\n  label = '';\n\n  @property({ type: String })\n  value = '';\n\n  /** The movement, shown as a badge: `+12%`, `-3%`, `+2`. */\n  @property({ type: String })\n  delta = '';\n\n  /**\n   * What the movement means. Drives the badge colour.\n   * `flat` — and the default — stay neutral.\n   */\n  @property({ type: String, reflect: true })\n  trend: KtStatTrend = 'flat';\n\n  /**\n   * Down is the good direction here — churn, cost, latency.\n   * Swaps which trend reads as success.\n   */\n  @property({ type: Boolean })\n  inverted = false;\n\n  /** Lucide icon name, kebab-case. */\n  @property({ type: String })\n  icon = '';\n\n  /** Small print under the figure — \"vs last month\". */\n  @property({ type: String })\n  caption = '';\n\n  @property({ type: String, reflect: true })\n  size: 'small' | 'medium' = 'medium';\n\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  private get deltaVariant(): 'success' | 'danger' | 'neutral' {\n    if (this.trend === 'flat') return 'neutral';\n    const good = this.inverted ? 'down' : 'up';\n    return this.trend === good ? 'success' : 'danger';\n  }\n\n  /** A new figure comes up into place — never the first one. */\n  override updated(changed: PropertyValues<this>): void {\n    super.updated(changed);\n    if (!changed.has('value') || changed.get('value') === undefined) return;\n    const value = this.renderRoot.querySelector('.value');\n    if (!value) return;\n    play(\n      value,\n      [\n        { translate: '0 0.35em', opacity: 0 },\n        { translate: '0 0', opacity: 1 },\n      ],\n      '--duration-normal',\n      'kt-stat-value',\n    );\n  }\n\n  override render(): TemplateResult {\n    return html`<div part=\"base\" class=\"stat\">\n      <div class=\"head\">\n        ${\n          this.icon\n            ? html`<span class=\"icon\"><kt-icon name=${this.icon} size=\"18\"></kt-icon></span>`\n            : nothing\n        }\n        <span class=\"label\">${this.label}</span>\n      </div>\n\n      ${\n        this.loading\n          ? html`<kt-skeleton variant=\"rect\" height=\"38px\" width=\"60%\"></kt-skeleton>`\n          : html`<div class=\"figure\">\n              <span part=\"value\" class=\"value\">${this.value}</span>\n              ${\n                this.delta\n                  ? html`<kt-badge variant=\"count\" tone=${this.deltaVariant}\n                      >${this.delta}</kt-badge\n                    >`\n                  : nothing\n              }\n            </div>`\n      }\n      ${this.caption ? html`<span class=\"caption\">${this.caption}</span>` : nothing}\n      <slot></slot>\n    </div>`;\n  }\n}\n\ndefineElement('kt-stat', KtStat);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-stat': KtStat;\n  }\n}\n"],"names":["KtStat","KtElement","css","good","changed","value","play","html","nothing","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -2,10 +2,10 @@ import { css as k, nothing as d, html as h } from "lit";
 import { property as n, state as f } from "lit/decorators.js";
 import { classMap as S } from "lit/directives/class-map.js";
 import { styleMap as v } from "lit/directives/style-map.js";
-import { K as w, d as R } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as w, d as R } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 import { e as g } from "../../../chunks/events-r51msXNf.js";
 import { r as M } from "../../../chunks/locale-C5xLkGx5.js";
-import { s as u } from "../../../chunks/index-TWJzttLX.js";
+import { s as u } from "../../../chunks/index-1ZFgagWW.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../kt-pagination/kt-pagination.js";
 const H = 50;

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

@@ -1,7 +1,7 @@
 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-T0VbIBNp.js";
+import { K as c, d as f } from "../../../chunks/kt-element-DvWtPQ1Y.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--)
@@ -175,7 +175,7 @@ class t extends c {
 
       .heading {
         color: var(--text-body);
-        font: var(--font-medium-regular);
+        font: var(--font-normal-medium);
       }
 
       .time {

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

@@ -1 +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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"}
+{"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-normal-medium);\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/data/kt-tree/kt-tree.d.ts

@@ -0,0 +1,69 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export interface KtTreeItem {
+    readonly id: string;
+    readonly label: string;
+    /** A Lucide icon name, before the label. */
+    readonly icon?: string;
+    readonly children?: readonly KtTreeItem[];
+}
+/**
+ * Things inside things — folders and files, an organisation's teams, nested
+ * pages — as a tree to open and walk.
+ *
+ * The nodes are data: `tree.items = [{ id, label, icon, children }]`;
+ * `expanded` lists the open ones and `selected` the chosen one. A click on a
+ * node selects it, a click on its chevron opens or closes it.
+ *
+ * The keyboard is the WAI-ARIA tree view's: Up and Down move through the
+ * visible nodes; Right opens a node, then moves to its first child; Left closes
+ * it, or moves to its parent; Home and End go to the first and last; Enter and
+ * Space select. The tree is one tab stop.
+ *
+ * @element kt-tree
+ *
+ * @csspart tree - The tree.
+ * @csspart item - One node's row.
+ *
+ * @fires kt-select - A node was selected. `detail: { id, item }`.
+ * @fires kt-toggle - A node opened or closed. `detail: { id, expanded }`.
+ *
+ * @example
+ * ```html
+ * <kt-tree label="Files"></kt-tree>
+ * <script>
+ *   tree.items = [
+ *     { id: 'src', label: 'src', icon: 'folder', children: [{ id: 'index', label: 'index.ts', icon: 'file' }] },
+ *   ];
+ *   tree.expanded = ['src'];
+ * </script>
+ * ```
+ */
+export declare class KtTree extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The nodes. Set as a property: `tree.items = [...]`. */
+    items: readonly KtTreeItem[];
+    /** The ids of the open nodes. */
+    expanded: readonly string[];
+    /** The id of the selected node. */
+    selected: string;
+    /** Accessible name for the tree. */
+    label: string;
+    /** The node holding the tab stop, as the keyboard moves it. */
+    private active;
+    /** The visible nodes, in order: a node's children follow it while it is open. */
+    private get rows();
+    private isOpen;
+    /** Opens or closes a node, and says so. */
+    toggle(id: string, expanded?: boolean): void;
+    private select;
+    private focusRow;
+    private onKeyDown;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-tree': KtTree;
+    }
+}

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

@@ -0,0 +1,208 @@
+import { css as v, nothing as m, html as l } from "lit";
+import { property as p, state as g } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
+import { styleMap as y } from "lit/directives/style-map.js";
+import { K as u, d as x } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { e as f } from "../../../chunks/events-r51msXNf.js";
+import "../../core/kt-icon/kt-icon.js";
+var k = Object.defineProperty, c = (h, t, i, e) => {
+  for (var s = void 0, a = h.length - 1, r; a >= 0; a--)
+    (r = h[a]) && (s = r(t, i, s) || s);
+  return s && k(t, i, s), s;
+};
+class o extends u {
+  constructor() {
+    super(...arguments), this.items = [], this.expanded = [], this.selected = "", this.label = "", this.active = "";
+  }
+  static {
+    this.styles = [
+      u.styles,
+      v`
+      :host {
+        display: block;
+      }
+
+      [role='tree'] {
+        display: grid;
+        gap: 1px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      .row {
+        display: flex;
+        gap: 6px;
+        align-items: center;
+        min-height: var(--button-height-small);
+        padding: 0 8px 0 calc(8px + (var(--level) - 1) * 20px);
+        color: var(--text-body);
+        font: var(--font-normal-regular);
+        border-radius: var(--radius-input);
+        outline: none;
+        cursor: pointer;
+        user-select: none;
+      }
+      .row:hover {
+        background: var(--surface-hover);
+      }
+      .row:focus-visible {
+        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);
+      }
+      .row[aria-selected='true'] {
+        color: var(--color-primary-text);
+        background: var(--color-primary-soft);
+      }
+
+      .chevron,
+      .spacer {
+        display: inline-grid;
+        flex: none;
+        place-items: center;
+        width: 18px;
+        height: 18px;
+        color: var(--text-muted);
+      }
+      .chevron {
+        border-radius: var(--radius-sub-menu);
+        transition: transform var(--duration-fast) var(--easing-standard);
+      }
+      .chevron:hover {
+        color: var(--text-body);
+      }
+      .row[aria-expanded='true'] .chevron {
+        transform: rotate(90deg);
+      }
+
+      .icon {
+        flex: none;
+        color: var(--text-muted);
+      }
+      .row[aria-selected='true'] .icon {
+        color: var(--color-primary-text);
+      }
+      .label {
+        min-width: 0;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+    `
+    ];
+  }
+  /** The visible nodes, in order: a node's children follow it while it is open. */
+  get rows() {
+    const t = new Set(this.expanded), i = [], e = (s, a, r) => {
+      s.forEach((n, d) => {
+        i.push({ item: n, level: a, position: d + 1, size: s.length, parent: r }), n.children?.length && t.has(n.id) && e(n.children, a + 1, n.id);
+      });
+    };
+    return e(this.items, 1, null), i;
+  }
+  isOpen(t) {
+    return this.expanded.includes(t);
+  }
+  /** Opens or closes a node, and says so. */
+  toggle(t, i = !this.isOpen(t)) {
+    i !== this.isOpen(t) && (this.expanded = i ? [...this.expanded, t] : this.expanded.filter((e) => e !== t), f(this, "kt-toggle", { id: t, expanded: i }));
+  }
+  select(t) {
+    this.selected = t.item.id, this.active = t.item.id, f(this, "kt-select", { id: t.item.id, item: t.item });
+  }
+  focusRow(t) {
+    this.active = t, this.updateComplete.then(() => {
+      this.shadowRoot?.querySelector(`[data-id="${CSS.escape(t)}"]`)?.focus();
+    });
+  }
+  onKeyDown(t, i, e) {
+    const s = this.rows, a = !!i.item.children?.length, r = (n) => {
+      const d = s[Math.max(0, Math.min(s.length - 1, n))];
+      d && this.focusRow(d.item.id);
+    };
+    switch (t.key) {
+      case "ArrowDown":
+        r(e + 1);
+        break;
+      case "ArrowUp":
+        r(e - 1);
+        break;
+      case "Home":
+        r(0);
+        break;
+      case "End":
+        r(s.length - 1);
+        break;
+      case "ArrowRight":
+        if (!a) return;
+        this.isOpen(i.item.id) ? r(e + 1) : this.toggle(i.item.id, !0);
+        break;
+      case "ArrowLeft":
+        if (a && this.isOpen(i.item.id)) this.toggle(i.item.id, !1);
+        else if (i.parent) this.focusRow(i.parent);
+        else return;
+        break;
+      case "Enter":
+      case " ":
+        this.select(i);
+        break;
+      default:
+        return;
+    }
+    t.preventDefault();
+  }
+  render() {
+    const t = this.rows, i = t.find((e) => e.item.id === this.active) ?? t.find((e) => e.item.id === this.selected) ?? t[0];
+    return l`<ul part="tree" role="tree" aria-label=${this.label || m}>
+      ${t.map((e, s) => {
+      const a = !!e.item.children?.length;
+      return l`<li
+          part="item"
+          class=${b({ row: !0 })}
+          role="treeitem"
+          data-id=${e.item.id}
+          style=${y({ "--level": String(e.level) })}
+          tabindex=${e === i ? 0 : -1}
+          aria-level=${e.level}
+          aria-setsize=${e.size}
+          aria-posinset=${e.position}
+          aria-expanded=${a ? String(this.isOpen(e.item.id)) : m}
+          aria-selected=${e.item.id === this.selected ? "true" : "false"}
+          @click=${() => this.select(e)}
+          @focus=${() => this.active = e.item.id}
+          @keydown=${(r) => this.onKeyDown(r, e, s)}
+        >
+          ${a ? l`<span
+                  class="chevron"
+                  aria-hidden="true"
+                  @click=${(r) => {
+        r.stopPropagation(), this.toggle(e.item.id);
+      }}
+                  ><kt-icon name="chevron-right" size="14"></kt-icon
+                ></span>` : l`<span class="spacer" aria-hidden="true"></span>`}
+          ${e.item.icon ? l`<kt-icon class="icon" name=${e.item.icon} size="16"></kt-icon>` : m}
+          <span class="label">${e.item.label}</span>
+        </li>`;
+    })}
+    </ul>`;
+  }
+}
+c([
+  p({ attribute: !1 })
+], o.prototype, "items");
+c([
+  p({ attribute: !1 })
+], o.prototype, "expanded");
+c([
+  p({ type: String })
+], o.prototype, "selected");
+c([
+  p({ type: String })
+], o.prototype, "label");
+c([
+  g()
+], o.prototype, "active");
+x("kt-tree", o);
+export {
+  o as KtTree
+};
+//# sourceMappingURL=kt-tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-tree.js","sources":["../../../../src/components/data/kt-tree/kt-tree.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { styleMap } from 'lit/directives/style-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtTreeItem {\n  readonly id: string;\n  readonly label: string;\n  /** A Lucide icon name, before the label. */\n  readonly icon?: string;\n  readonly children?: readonly KtTreeItem[];\n}\n\n/** A node as drawn: where it sits, and among how many. */\ninterface Row {\n  readonly item: KtTreeItem;\n  readonly level: number;\n  readonly position: number;\n  readonly size: number;\n  readonly parent: string | null;\n}\n\n/**\n * Things inside things — folders and files, an organisation's teams, nested\n * pages — as a tree to open and walk.\n *\n * The nodes are data: `tree.items = [{ id, label, icon, children }]`;\n * `expanded` lists the open ones and `selected` the chosen one. A click on a\n * node selects it, a click on its chevron opens or closes it.\n *\n * The keyboard is the WAI-ARIA tree view's: Up and Down move through the\n * visible nodes; Right opens a node, then moves to its first child; Left closes\n * it, or moves to its parent; Home and End go to the first and last; Enter and\n * Space select. The tree is one tab stop.\n *\n * @element kt-tree\n *\n * @csspart tree - The tree.\n * @csspart item - One node's row.\n *\n * @fires kt-select - A node was selected. `detail: { id, item }`.\n * @fires kt-toggle - A node opened or closed. `detail: { id, expanded }`.\n *\n * @example\n * ```html\n * <kt-tree label=\"Files\"></kt-tree>\n * <script>\n *   tree.items = [\n *     { id: 'src', label: 'src', icon: 'folder', children: [{ id: 'index', label: 'index.ts', icon: 'file' }] },\n *   ];\n *   tree.expanded = ['src'];\n * </script>\n * ```\n */\nexport class KtTree extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      [role='tree'] {\n        display: grid;\n        gap: 1px;\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      .row {\n        display: flex;\n        gap: 6px;\n        align-items: center;\n        min-height: var(--button-height-small);\n        padding: 0 8px 0 calc(8px + (var(--level) - 1) * 20px);\n        color: var(--text-body);\n        font: var(--font-normal-regular);\n        border-radius: var(--radius-input);\n        outline: none;\n        cursor: pointer;\n        user-select: none;\n      }\n      .row:hover {\n        background: var(--surface-hover);\n      }\n      .row:focus-visible {\n        box-shadow: inset 0 0 0 var(--outline-width) var(--color-primary-base);\n      }\n      .row[aria-selected='true'] {\n        color: var(--color-primary-text);\n        background: var(--color-primary-soft);\n      }\n\n      .chevron,\n      .spacer {\n        display: inline-grid;\n        flex: none;\n        place-items: center;\n        width: 18px;\n        height: 18px;\n        color: var(--text-muted);\n      }\n      .chevron {\n        border-radius: var(--radius-sub-menu);\n        transition: transform var(--duration-fast) var(--easing-standard);\n      }\n      .chevron:hover {\n        color: var(--text-body);\n      }\n      .row[aria-expanded='true'] .chevron {\n        transform: rotate(90deg);\n      }\n\n      .icon {\n        flex: none;\n        color: var(--text-muted);\n      }\n      .row[aria-selected='true'] .icon {\n        color: var(--color-primary-text);\n      }\n      .label {\n        min-width: 0;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n    `,\n  ];\n\n  /** The nodes. Set as a property: `tree.items = [...]`. */\n  @property({ attribute: false })\n  items: readonly KtTreeItem[] = [];\n\n  /** The ids of the open nodes. */\n  @property({ attribute: false })\n  expanded: readonly string[] = [];\n\n  /** The id of the selected node. */\n  @property({ type: String })\n  selected = '';\n\n  /** Accessible name for the tree. */\n  @property({ type: String })\n  label = '';\n\n  /** The node holding the tab stop, as the keyboard moves it. */\n  @state() private active = '';\n\n  /** The visible nodes, in order: a node's children follow it while it is open. */\n  private get rows(): Row[] {\n    const open = new Set(this.expanded);\n    const out: Row[] = [];\n    const walk = (items: readonly KtTreeItem[], level: number, parent: string | null) => {\n      items.forEach((item, index) => {\n        out.push({ item, level, position: index + 1, size: items.length, parent });\n        if (item.children?.length && open.has(item.id)) walk(item.children, level + 1, item.id);\n      });\n    };\n    walk(this.items, 1, null);\n    return out;\n  }\n\n  private isOpen(id: string): boolean {\n    return this.expanded.includes(id);\n  }\n\n  /** Opens or closes a node, and says so. */\n  toggle(id: string, expanded = !this.isOpen(id)): void {\n    if (expanded === this.isOpen(id)) return;\n    this.expanded = expanded ? [...this.expanded, id] : this.expanded.filter((open) => open !== id);\n    emit(this, 'kt-toggle', { id, expanded });\n  }\n\n  private select(row: Row): void {\n    this.selected = row.item.id;\n    this.active = row.item.id;\n    emit(this, 'kt-select', { id: row.item.id, item: row.item });\n  }\n\n  private focusRow(id: string): void {\n    this.active = id;\n    void this.updateComplete.then(() => {\n      this.shadowRoot?.querySelector<HTMLElement>(`[data-id=\"${CSS.escape(id)}\"]`)?.focus();\n    });\n  }\n\n  private onKeyDown(event: KeyboardEvent, row: Row, index: number): void {\n    const rows = this.rows;\n    const branch = Boolean(row.item.children?.length);\n    const go = (to: number) => {\n      const target = rows[Math.max(0, Math.min(rows.length - 1, to))];\n      if (target) this.focusRow(target.item.id);\n    };\n    switch (event.key) {\n      case 'ArrowDown':\n        go(index + 1);\n        break;\n      case 'ArrowUp':\n        go(index - 1);\n        break;\n      case 'Home':\n        go(0);\n        break;\n      case 'End':\n        go(rows.length - 1);\n        break;\n      case 'ArrowRight':\n        if (!branch) return;\n        if (!this.isOpen(row.item.id)) this.toggle(row.item.id, true);\n        else go(index + 1);\n        break;\n      case 'ArrowLeft':\n        if (branch && this.isOpen(row.item.id)) this.toggle(row.item.id, false);\n        else if (row.parent) this.focusRow(row.parent);\n        else return;\n        break;\n      case 'Enter':\n      case ' ':\n        this.select(row);\n        break;\n      default:\n        return;\n    }\n    event.preventDefault();\n  }\n\n  override render(): TemplateResult {\n    const rows = this.rows;\n    const stop =\n      rows.find((row) => row.item.id === this.active) ??\n      rows.find((row) => row.item.id === this.selected) ??\n      rows[0];\n    return html`<ul part=\"tree\" role=\"tree\" aria-label=${this.label || nothing}>\n      ${rows.map((row, index) => {\n        const branch = Boolean(row.item.children?.length);\n        return html`<li\n          part=\"item\"\n          class=${classMap({ row: true })}\n          role=\"treeitem\"\n          data-id=${row.item.id}\n          style=${styleMap({ '--level': String(row.level) })}\n          tabindex=${row === stop ? 0 : -1}\n          aria-level=${row.level}\n          aria-setsize=${row.size}\n          aria-posinset=${row.position}\n          aria-expanded=${branch ? String(this.isOpen(row.item.id)) : nothing}\n          aria-selected=${row.item.id === this.selected ? 'true' : 'false'}\n          @click=${() => this.select(row)}\n          @focus=${() => (this.active = row.item.id)}\n          @keydown=${(event: KeyboardEvent) => this.onKeyDown(event, row, index)}\n        >\n          ${\n            branch\n              ? html`<span\n                  class=\"chevron\"\n                  aria-hidden=\"true\"\n                  @click=${(event: Event) => {\n                    event.stopPropagation();\n                    this.toggle(row.item.id);\n                  }}\n                  ><kt-icon name=\"chevron-right\" size=\"14\"></kt-icon\n                ></span>`\n              : html`<span class=\"spacer\" aria-hidden=\"true\"></span>`\n          }\n          ${\n            row.item.icon\n              ? html`<kt-icon class=\"icon\" name=${row.item.icon} size=\"16\"></kt-icon>`\n              : nothing\n          }\n          <span class=\"label\">${row.item.label}</span>\n        </li>`;\n      })}\n    </ul>`;\n  }\n}\n\ndefineElement('kt-tree', KtTree);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-tree': KtTree;\n  }\n}\n"],"names":["KtTree","KtElement","css","open","out","walk","items","level","parent","item","index","id","expanded","emit","row","event","rows","branch","go","to","target","stop","html","nothing","classMap","styleMap","__decorateClass","property","state","defineElement"],"mappings":"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"}

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

@@ -1,8 +1,8 @@
 import { css as v, nothing as s, html as e } from "lit";
 import { property as t } from "lit/decorators.js";
-import { K as p, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as p, d as g } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 import { e as h } from "../../../chunks/events-r51msXNf.js";
-import { s as f } from "../../../chunks/index-TWJzttLX.js";
+import { s as f } from "../../../chunks/index-1ZFgagWW.js";
 import "../../core/kt-icon/kt-icon.js";
 var u = Object.defineProperty, a = (n, i, c, b) => {
   for (var o = void 0, l = n.length - 1, d; l >= 0; l--)

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

@@ -1,6 +1,6 @@
 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-T0VbIBNp.js";
+import { K as d, d as m } from "../../../chunks/kt-element-DvWtPQ1Y.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--)

package/dist/components/feedback/kt-progress-bar/kt-progress-bar.js

@@ -2,7 +2,7 @@ import { css as v, nothing as p, html as o } from "lit";
 import { property as t } from "lit/decorators.js";
 import { classMap as d } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as u, d as b } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as u, d as b } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 var f = Object.defineProperty, r = (n, e, i, c) => {
   for (var s = void 0, l = n.length - 1, h; l >= 0; l--)
     (h = n[l]) && (s = h(e, i, s) || s);

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

@@ -2,7 +2,7 @@ import { css as u, html as c } from "lit";
 import { property as s } from "lit/decorators.js";
 import { classMap as h } from "lit/directives/class-map.js";
 import { styleMap as m } from "lit/directives/style-map.js";
-import { K as d, d as f } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as d, d as f } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 var y = Object.defineProperty, a = (n, i, t, l) => {
   for (var e = void 0, o = n.length - 1, p; o >= 0; o--)
     (p = n[o]) && (e = p(i, t, e) || e);

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

@@ -1,8 +1,8 @@
 import { css as v, nothing as n, html as a } from "lit";
 import { state as u, property as s } from "lit/decorators.js";
-import { K as p, d as m } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as p, d as m } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 import { e as b } from "../../../chunks/events-r51msXNf.js";
-import { s as h } from "../../../chunks/index-TWJzttLX.js";
+import { s as h } from "../../../chunks/index-1ZFgagWW.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../kt-progress-bar/kt-progress-bar.js";
 var f = Object.defineProperty, o = (c, i, e, w) => {

package/dist/components/feedback/kt-toast-container/kt-toast-container.d.ts

@@ -41,10 +41,17 @@ export declare class KtToastContainer extends KtElement {
     get toasts(): KtToast[];
     /** Raises a toast and returns it, so a caller can close it early. */
     show(options?: KtToastOptions): KtToast;
-    /** Removes one toast. */
+    /** Removes one toast: it fades and folds away, then leaves the page. */
     dismiss(toast: KtToast): void;
     /** Removes every toast. */
     clear(): void;
+    /**
+     * Slides a toast in from the screen edge, or out towards it, while its
+     * height opens or folds — so the rest of the stack moves smoothly rather
+     * than jumping. Null when the theme gives no time to move in: reduced
+     * motion, or no theme at all.
+     */
+    private move;
     private enforceLimit;
     /** Hovering the stack freezes every countdown; leaving it resumes them. */
     private pauseAll;