kanto-ds 1.7.0 → 1.9.0

package/dist/components/navigation/kt-app-shell/kt-app-shell.js

@@ -0,0 +1,220 @@
+import { css as c, nothing as m, html as s } from "lit";
+import { property as o, state as g, query as b } from "lit/decorators.js";
+import { K as p, d as v } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { u, e as h } from "../../../chunks/events-r51msXNf.js";
+import { s as f } from "../../../chunks/index-1ZFgagWW.js";
+import "../../core/kt-button/kt-button.js";
+var w = Object.defineProperty, a = (n, e, r, k) => {
+  for (var i = void 0, l = n.length - 1, d; l >= 0; l--)
+    (d = n[l]) && (i = d(e, r, i) || i);
+  return i && w(e, r, i), i;
+};
+class t extends p {
+  constructor() {
+    super(...arguments), this.collapsed = !1, this.sidebarOpen = !1, this.breakpoint = 900, this.noToggle = !1, this.noLandmarks = !1, this.label = "", this.narrow = !1, this.sidebarId = u("kt-app-shell-sidebar"), this.observer = null, this.onKeyDown = (e) => {
+      e.key === "Escape" && this.narrow && this.sidebarOpen && (e.preventDefault(), this.closeDrawer());
+    };
+  }
+  static {
+    this.styles = [
+      p.styles,
+      c`
+      :host {
+        display: block;
+        height: 100%;
+        --kt-app-shell-sidebar-width: 240px;
+        --kt-app-shell-rail-width: 64px;
+        --kt-app-shell-header-height: 56px;
+      }
+
+      .shell {
+        position: relative;
+        display: grid;
+        grid-template:
+          'header header' auto
+          'sidebar main' minmax(0, 1fr)
+          / var(--kt-app-shell-sidebar-width) minmax(0, 1fr);
+        height: 100%;
+        overflow: hidden;
+        color: var(--text-body);
+        background: var(--surface-page);
+        transition: grid-template-columns var(--duration-normal) var(--easing-standard);
+      }
+      :host([collapsed]:not([narrow])) .shell {
+        grid-template-columns: var(--kt-app-shell-rail-width) minmax(0, 1fr);
+      }
+
+      .header {
+        grid-area: header;
+        display: flex;
+        align-items: center;
+        gap: var(--gap-form);
+        min-height: var(--kt-app-shell-header-height);
+        padding: 0 var(--padding-form);
+        border-bottom: var(--border-width) solid var(--border-subtle);
+      }
+      .header-content {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        gap: var(--gap-form);
+        min-width: 0;
+      }
+
+      .sidebar {
+        grid-area: sidebar;
+        min-width: 0;
+        overflow: hidden auto;
+        background: var(--surface-page);
+        border-right: var(--border-width) solid var(--border-subtle);
+        outline: none;
+      }
+
+      .main {
+        grid-area: main;
+        min-width: 0;
+        overflow: auto;
+      }
+
+      .backdrop {
+        display: none;
+      }
+
+      /* === Narrow: the sidebar is a drawer over the content === */
+      :host([narrow]) .shell {
+        grid-template:
+          'header' auto
+          'main' minmax(0, 1fr)
+          / minmax(0, 1fr);
+      }
+      :host([narrow]) .sidebar {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        z-index: 2;
+        width: min(var(--kt-app-shell-sidebar-width), 85%);
+        box-shadow: var(--shadow-popover);
+        translate: -100% 0;
+        visibility: hidden;
+        transition:
+          translate var(--duration-normal) var(--easing-standard),
+          visibility 0s linear var(--duration-normal);
+      }
+      :host([narrow][sidebar-open]) .sidebar {
+        translate: 0 0;
+        visibility: visible;
+        transition: translate var(--duration-normal) var(--easing-standard);
+      }
+      :host([narrow][sidebar-open]) .backdrop {
+        position: absolute;
+        inset: 0;
+        z-index: 1;
+        display: block;
+        background: var(--color-backdrop);
+      }
+    `
+    ];
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.addEventListener("keydown", this.onKeyDown), typeof ResizeObserver == "function" && (this.observer = new ResizeObserver(([e]) => {
+      e && this.measure(e.contentRect.width);
+    }), this.observer.observe(this));
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this.removeEventListener("keydown", this.onKeyDown), this.observer?.disconnect(), this.observer = null;
+  }
+  measure(e) {
+    const r = e > 0 && e < this.breakpoint;
+    r !== this.narrow && (this.narrow = r, r || (this.sidebarOpen = !1));
+  }
+  /** Whether the sidebar shows: expanded when wide, open when narrow. */
+  get open() {
+    return this.narrow ? this.sidebarOpen : !this.collapsed;
+  }
+  /** Opens or closes the sidebar, as its toggle does. */
+  toggleSidebar() {
+    this.narrow ? this.sidebarOpen = !this.sidebarOpen : this.collapsed = !this.collapsed, h(this, "kt-sidebar-toggle", { open: this.open });
+  }
+  closeDrawer() {
+    !this.narrow || !this.sidebarOpen || (this.sidebarOpen = !1, h(this, "kt-sidebar-toggle", { open: !1 }));
+  }
+  willUpdate(e) {
+    e.has("breakpoint") && this.measure(this.getBoundingClientRect().width);
+  }
+  // `narrow` is private, so the map is read untyped.
+  updated(e) {
+    super.updated(e), this.toggleAttribute("narrow", this.narrow), !(!e.has("sidebarOpen") || !this.narrow) && (this.sidebarOpen ? this.aside.focus() : e.get("sidebarOpen") === !0 && this.toggle?.focus());
+  }
+  render() {
+    const e = this.label || f().sidebar;
+    return s`<div class="shell">
+      <div part="header" class="header">
+        ${this.noToggle ? m : s`<kt-button
+                part="toggle"
+                class="toggle"
+                variant="secondary-no-bg"
+                size="small"
+                icon=${this.narrow ? "menu" : "panel-left"}
+                label=${e}
+                aria-controls=${this.sidebarId}
+                aria-expanded=${this.open ? "true" : "false"}
+                @click=${() => this.toggleSidebar()}
+              ></kt-button>`}
+        <div class="header-content"><slot name="header"></slot></div>
+      </div>
+      ${this.noLandmarks ? s`<div
+              part="sidebar"
+              class="sidebar"
+              id=${this.sidebarId}
+              tabindex="-1"
+              ?inert=${this.narrow && !this.sidebarOpen}
+            >
+              <slot name="sidebar"></slot>
+            </div>` : s`<aside
+              part="sidebar"
+              class="sidebar"
+              id=${this.sidebarId}
+              aria-label=${e}
+              tabindex="-1"
+              ?inert=${this.narrow && !this.sidebarOpen}
+            >
+              <slot name="sidebar"></slot>
+            </aside>`}
+      <div class="backdrop" @click=${() => this.closeDrawer()}></div>
+      ${this.noLandmarks ? s`<div part="main" class="main"><slot></slot></div>` : s`<main part="main" class="main"><slot></slot></main>`}
+    </div>`;
+  }
+}
+a([
+  o({ type: Boolean, reflect: !0 })
+], t.prototype, "collapsed");
+a([
+  o({ type: Boolean, reflect: !0, attribute: "sidebar-open" })
+], t.prototype, "sidebarOpen");
+a([
+  o({ type: Number })
+], t.prototype, "breakpoint");
+a([
+  o({ type: Boolean, attribute: "no-toggle" })
+], t.prototype, "noToggle");
+a([
+  o({ type: Boolean, attribute: "no-landmarks" })
+], t.prototype, "noLandmarks");
+a([
+  o({ type: String })
+], t.prototype, "label");
+a([
+  g()
+], t.prototype, "narrow");
+a([
+  b(".sidebar")
+], t.prototype, "aside");
+a([
+  b(".toggle")
+], t.prototype, "toggle");
+v("kt-app-shell", t);
+export {
+  t as KtAppShell
+};
+//# sourceMappingURL=kt-app-shell.js.map

package/dist/components/navigation/kt-app-shell/kt-app-shell.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-app-shell.js","sources":["../../../../src/components/navigation/kt-app-shell/kt-app-shell.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property, query, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit, uniqueId } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-button/kt-button.js';\n\n/**\n * The frame of an application: a header along the top, a sidebar down the\n * side, and the content, which scrolls on its own.\n *\n * Wide, the sidebar sits beside the content, and its toggle narrows it to a\n * rail (`collapsed`). Narrower than `breakpoint` — measured on the shell\n * itself, not the viewport — the sidebar leaves the layout: the toggle opens\n * it as a drawer over the content, behind a backdrop, closed by Escape or a\n * click outside. A closed drawer is inert, so Tab never wanders into it.\n *\n * The shell fills its container's height; give the container one —\n * `height: 100dvh` on a page, a fixed height in a preview.\n *\n * @element kt-app-shell\n *\n * @slot header - The top bar: a wordmark, a search, an account menu.\n * @slot sidebar - Down the side: the application's navigation.\n * @slot - The content.\n *\n * @csspart header - The top bar.\n * @csspart sidebar - The `<aside>`.\n * @csspart main - The `<main>`.\n * @csspart toggle - The sidebar's toggle.\n *\n * @cssproperty --kt-app-shell-sidebar-width - The sidebar's width. 240px.\n * @cssproperty --kt-app-shell-rail-width - Its width when collapsed. 64px.\n * @cssproperty --kt-app-shell-header-height - The top bar's height. 56px.\n *\n * @fires kt-sidebar-toggle - The sidebar opened or closed — collapsed or\n *   expanded when wide, the drawer when narrow. `detail: { open }`.\n *\n * @example\n * ```html\n * <kt-app-shell style=\"height: 100dvh\">\n *   <a slot=\"header\" href=\"/\">Northwind</a>\n *   <kt-sub-menu-navigation slot=\"sidebar\"></kt-sub-menu-navigation>\n *   <h1>Overview</h1>\n * </kt-app-shell>\n * ```\n */\nexport class KtAppShell extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        height: 100%;\n        --kt-app-shell-sidebar-width: 240px;\n        --kt-app-shell-rail-width: 64px;\n        --kt-app-shell-header-height: 56px;\n      }\n\n      .shell {\n        position: relative;\n        display: grid;\n        grid-template:\n          'header header' auto\n          'sidebar main' minmax(0, 1fr)\n          / var(--kt-app-shell-sidebar-width) minmax(0, 1fr);\n        height: 100%;\n        overflow: hidden;\n        color: var(--text-body);\n        background: var(--surface-page);\n        transition: grid-template-columns var(--duration-normal) var(--easing-standard);\n      }\n      :host([collapsed]:not([narrow])) .shell {\n        grid-template-columns: var(--kt-app-shell-rail-width) minmax(0, 1fr);\n      }\n\n      .header {\n        grid-area: header;\n        display: flex;\n        align-items: center;\n        gap: var(--gap-form);\n        min-height: var(--kt-app-shell-header-height);\n        padding: 0 var(--padding-form);\n        border-bottom: var(--border-width) solid var(--border-subtle);\n      }\n      .header-content {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        gap: var(--gap-form);\n        min-width: 0;\n      }\n\n      .sidebar {\n        grid-area: sidebar;\n        min-width: 0;\n        overflow: hidden auto;\n        background: var(--surface-page);\n        border-right: var(--border-width) solid var(--border-subtle);\n        outline: none;\n      }\n\n      .main {\n        grid-area: main;\n        min-width: 0;\n        overflow: auto;\n      }\n\n      .backdrop {\n        display: none;\n      }\n\n      /* === Narrow: the sidebar is a drawer over the content === */\n      :host([narrow]) .shell {\n        grid-template:\n          'header' auto\n          'main' minmax(0, 1fr)\n          / minmax(0, 1fr);\n      }\n      :host([narrow]) .sidebar {\n        position: absolute;\n        top: 0;\n        bottom: 0;\n        left: 0;\n        z-index: 2;\n        width: min(var(--kt-app-shell-sidebar-width), 85%);\n        box-shadow: var(--shadow-popover);\n        translate: -100% 0;\n        visibility: hidden;\n        transition:\n          translate var(--duration-normal) var(--easing-standard),\n          visibility 0s linear var(--duration-normal);\n      }\n      :host([narrow][sidebar-open]) .sidebar {\n        translate: 0 0;\n        visibility: visible;\n        transition: translate var(--duration-normal) var(--easing-standard);\n      }\n      :host([narrow][sidebar-open]) .backdrop {\n        position: absolute;\n        inset: 0;\n        z-index: 1;\n        display: block;\n        background: var(--color-backdrop);\n      }\n    `,\n  ];\n\n  /** Wide: the sidebar narrowed to a rail. */\n  @property({ type: Boolean, reflect: true })\n  collapsed = false;\n\n  /** Narrow: the sidebar open as a drawer. */\n  @property({ type: Boolean, reflect: true, attribute: 'sidebar-open' })\n  sidebarOpen = false;\n\n  /** Below this width, in pixels of the shell itself, the sidebar becomes a drawer. */\n  @property({ type: Number })\n  breakpoint = 900;\n\n  /** Leaves the toggle out, for a header that brings its own. */\n  @property({ type: Boolean, attribute: 'no-toggle' })\n  noToggle = false;\n\n  /**\n   * Draws the sidebar and the content as plain boxes rather than an \\`<aside>\\`\n   * and a \\`<main>\\` — for a shell shown inside a page that has its own, a\n   * preview or a demo, where a second main landmark would be wrong.\n   */\n  @property({ type: Boolean, attribute: 'no-landmarks' })\n  noLandmarks = false;\n\n  /** Accessible name for the sidebar. Defaults to the translated \"Sidebar\". */\n  @property({ type: String })\n  label = '';\n\n  /** Narrower than `breakpoint`: reflected as the `narrow` attribute, for styling. */\n  @state() private narrow = false;\n\n  @query('.sidebar') private aside!: HTMLElement;\n  @query('.toggle') private toggle?: HTMLElement;\n\n  private readonly sidebarId = uniqueId('kt-app-shell-sidebar');\n  private observer: ResizeObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    this.addEventListener('keydown', this.onKeyDown);\n    if (typeof ResizeObserver === 'function') {\n      this.observer = new ResizeObserver(([entry]) => {\n        if (entry) this.measure(entry.contentRect.width);\n      });\n      this.observer.observe(this);\n    }\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.removeEventListener('keydown', this.onKeyDown);\n    this.observer?.disconnect();\n    this.observer = null;\n  }\n\n  private measure(width: number): void {\n    const narrow = width > 0 && width < this.breakpoint;\n    if (narrow === this.narrow) return;\n    this.narrow = narrow;\n    if (!narrow) this.sidebarOpen = false;\n  }\n\n  /** Whether the sidebar shows: expanded when wide, open when narrow. */\n  private get open(): boolean {\n    return this.narrow ? this.sidebarOpen : !this.collapsed;\n  }\n\n  /** Opens or closes the sidebar, as its toggle does. */\n  toggleSidebar(): void {\n    if (this.narrow) this.sidebarOpen = !this.sidebarOpen;\n    else this.collapsed = !this.collapsed;\n    emit(this, 'kt-sidebar-toggle', { open: this.open });\n  }\n\n  private closeDrawer(): void {\n    if (!this.narrow || !this.sidebarOpen) return;\n    this.sidebarOpen = false;\n    emit(this, 'kt-sidebar-toggle', { open: false });\n  }\n\n  private onKeyDown = (event: KeyboardEvent): void => {\n    if (event.key === 'Escape' && this.narrow && this.sidebarOpen) {\n      event.preventDefault();\n      this.closeDrawer();\n    }\n  };\n\n  override willUpdate(changed: PropertyValues<this>): void {\n    if (changed.has('breakpoint')) this.measure(this.getBoundingClientRect().width);\n  }\n\n  // `narrow` is private, so the map is read untyped.\n  override updated(changed: PropertyValues): void {\n    super.updated(changed);\n    this.toggleAttribute('narrow', this.narrow);\n    if (!changed.has('sidebarOpen') || !this.narrow) return;\n    // The drawer takes the focus as it opens, and gives it back as it closes.\n    if (this.sidebarOpen) this.aside.focus();\n    else if (changed.get('sidebarOpen') === true) this.toggle?.focus();\n  }\n\n  override render(): TemplateResult {\n    const label = this.label || strings().sidebar;\n    return html`<div class=\"shell\">\n      <div part=\"header\" class=\"header\">\n        ${\n          this.noToggle\n            ? nothing\n            : html`<kt-button\n                part=\"toggle\"\n                class=\"toggle\"\n                variant=\"secondary-no-bg\"\n                size=\"small\"\n                icon=${this.narrow ? 'menu' : 'panel-left'}\n                label=${label}\n                aria-controls=${this.sidebarId}\n                aria-expanded=${this.open ? 'true' : 'false'}\n                @click=${() => this.toggleSidebar()}\n              ></kt-button>`\n        }\n        <div class=\"header-content\"><slot name=\"header\"></slot></div>\n      </div>\n      ${\n        this.noLandmarks\n          ? html`<div\n              part=\"sidebar\"\n              class=\"sidebar\"\n              id=${this.sidebarId}\n              tabindex=\"-1\"\n              ?inert=${this.narrow && !this.sidebarOpen}\n            >\n              <slot name=\"sidebar\"></slot>\n            </div>`\n          : html`<aside\n              part=\"sidebar\"\n              class=\"sidebar\"\n              id=${this.sidebarId}\n              aria-label=${label}\n              tabindex=\"-1\"\n              ?inert=${this.narrow && !this.sidebarOpen}\n            >\n              <slot name=\"sidebar\"></slot>\n            </aside>`\n      }\n      <div class=\"backdrop\" @click=${() => this.closeDrawer()}></div>\n      ${\n        this.noLandmarks\n          ? html`<div part=\"main\" class=\"main\"><slot></slot></div>`\n          : html`<main part=\"main\" class=\"main\"><slot></slot></main>`\n      }\n    </div>`;\n  }\n}\n\ndefineElement('kt-app-shell', KtAppShell);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-app-shell': KtAppShell;\n  }\n}\n"],"names":["KtAppShell","KtElement","uniqueId","event","css","entry","width","narrow","emit","changed","label","strings","html","nothing","__decorateClass","property","state","query","defineElement"],"mappings":"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"}

package/dist/components/navigation/kt-breadcrumb/kt-breadcrumb.js

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

package/dist/components/navigation/kt-footer/kt-footer.d.ts

@@ -0,0 +1,82 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export interface KtFooterLink {
+    readonly label: string;
+    readonly href: string;
+    /** Leaves the site: marked with an icon, and given `rel="noopener"`. */
+    readonly external?: boolean;
+}
+export interface KtFooterColumn {
+    readonly heading: string;
+    readonly links: readonly KtFooterLink[];
+}
+export type KtFooterVariant = 'columns' | 'simple';
+/**
+ * The site footer: a contentinfo landmark holding the brand and a word about
+ * the product, columns of links, actions, and a legal line under them.
+ *
+ * The columns are data — `footer.columns = [{ heading, links }]` — so they are
+ * laid out, named and marked alike; the brand, the actions and the legal line
+ * are slots, for whatever a product puts there. It lays itself out from its
+ * own width, not the viewport's: in a narrow panel it stacks as on a phone.
+ *
+ * `variant="simple"` is a single row — the brand, the links run together, the
+ * actions — for a page that needs a footer rather than a site map.
+ *
+ * @element kt-footer
+ *
+ * @slot brand - Logo or wordmark.
+ * @slot - A word under the brand: what the product is.
+ * @slot actions - Buttons and links under it — social links, a newsletter form.
+ * @slot legal - The bottom line: copyright, terms, privacy. Its row is left out while empty.
+ *
+ * @csspart base - The `<footer>`.
+ * @csspart brand - The brand, its text and the actions.
+ * @csspart columns - The navigation holding the columns.
+ * @csspart column - One column.
+ * @csspart bottom - The legal row.
+ *
+ * @cssproperty --kt-footer-max-width - How wide the content runs. None by default.
+ * @cssproperty --kt-footer-padding-inline - The space at its sides. The card padding by default;
+ *   zero lines it up with a page's content when the page already has its own.
+ *
+ * @example
+ * ```html
+ * <kt-footer label="Site">
+ *   <a slot="brand" href="/">ACME</a>
+ *   Invoicing for small teams.
+ *   <span slot="legal">© 2026 Acme</span>
+ * </kt-footer>
+ * <script>
+ *   footer.columns = [
+ *     { heading: 'Product', links: [{ label: 'Pricing', href: '/pricing' }] },
+ *     { heading: 'Company', links: [{ label: 'GitHub', href: 'https://github.com/acme', external: true }] },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class KtFooter extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The columns of links. Set as a property: `footer.columns = [...]`. */
+    columns: readonly KtFooterColumn[];
+    /** `columns`: a heading over each list. `simple`: one row of links. */
+    variant: KtFooterVariant;
+    /** A rule along the top. */
+    bordered: boolean;
+    /** The level of the column headings, 2 to 6. */
+    headingLevel: number;
+    /** Accessible name for the footer and its navigation. */
+    label: string;
+    private hasLegal;
+    /** The first slotchange can land after the first render; read the slot once as well. */
+    firstUpdated(): void;
+    private readLegal;
+    private link;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-footer': KtFooter;
+    }
+}

package/dist/components/navigation/kt-footer/kt-footer.js

@@ -0,0 +1,220 @@
+import { css as g, nothing as i, html as n } from "lit";
+import { property as l, state as h } from "lit/decorators.js";
+import { K as c, d as v } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { h as u } from "../../../chunks/slots-BPbIdxAJ.js";
+import { h as f } from "../../../chunks/heading-DsnZsfg-.js";
+import "../../core/kt-icon/kt-icon.js";
+var b = Object.defineProperty, r = (s, a, o, p) => {
+  for (var e = void 0, d = s.length - 1, m; d >= 0; d--)
+    (m = s[d]) && (e = m(a, o, e) || e);
+  return e && b(a, o, e), e;
+};
+class t extends c {
+  constructor() {
+    super(...arguments), this.columns = [], this.variant = "columns", this.bordered = !0, this.headingLevel = 2, this.label = "", this.hasLegal = !1;
+  }
+  static {
+    this.styles = [
+      c.styles,
+      g`
+      :host {
+        display: block;
+        container-type: inline-size;
+        --kt-footer-max-width: none;
+        --kt-footer-padding-inline: var(--padding-card);
+      }
+
+      footer {
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        background-color: var(--surface-page);
+      }
+      :host([bordered]) footer {
+        border-top: var(--border-width) solid var(--border-subtle);
+      }
+
+      .inner {
+        max-width: var(--kt-footer-max-width);
+        margin: 0 auto;
+        padding: calc(var(--padding-card) * 2) var(--kt-footer-padding-inline);
+      }
+
+      /* Stacked by default — a phone, a narrow panel — and side by side once
+         the footer itself is wide enough. */
+      .top {
+        display: grid;
+        gap: calc(var(--gap-card) * 2);
+      }
+      @container (min-width: 720px) {
+        .top {
+          grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);
+        }
+      }
+
+      .brand {
+        display: grid;
+        gap: var(--gap-form);
+        align-content: start;
+      }
+      .brand-mark {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-button);
+        color: var(--text-body);
+        font: var(--font-title-h6);
+        line-height: 1;
+      }
+      .about {
+        max-width: 36ch;
+      }
+      .actions {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--gap-button);
+      }
+
+      .columns {
+        display: grid;
+        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
+        gap: var(--gap-card);
+      }
+      .heading {
+        margin: 0 0 var(--gap-form);
+        color: var(--text-body);
+        font: var(--font-normal-medium);
+      }
+      ul {
+        display: grid;
+        gap: var(--gap-button);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      a {
+        display: inline-flex;
+        align-items: center;
+        gap: 4px;
+        color: var(--text-muted);
+        text-decoration: none;
+        border-radius: var(--radius-sub-menu);
+        transition: color var(--duration-instant);
+      }
+      a:hover {
+        color: var(--text-body);
+      }
+      a:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: 2px;
+      }
+
+      .bottom {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+        justify-content: space-between;
+        gap: var(--gap-button) var(--gap-card);
+        margin-top: calc(var(--gap-card) * 2);
+        padding-top: var(--padding-card);
+        font: var(--font-normal-small);
+        border-top: var(--border-width) solid var(--border-subtle);
+      }
+      .bottom[hidden] {
+        display: none;
+      }
+
+      /* === Simple: one row, the links run together === */
+      :host([variant='simple']) .top {
+        grid-template-columns: none;
+        align-items: center;
+      }
+      @container (min-width: 720px) {
+        :host([variant='simple']) .top {
+          grid-template-columns: auto minmax(0, 1fr);
+        }
+      }
+      :host([variant='simple']) .about,
+      :host([variant='simple']) .heading {
+        display: none;
+      }
+      :host([variant='simple']) .columns,
+      :host([variant='simple']) [part='column'],
+      :host([variant='simple']) ul {
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--gap-button) var(--gap-card);
+      }
+      @container (min-width: 720px) {
+        :host([variant='simple']) .columns {
+          justify-content: flex-end;
+        }
+      }
+    `
+    ];
+  }
+  /** The first slotchange can land after the first render; read the slot once as well. */
+  firstUpdated() {
+    this.readLegal();
+  }
+  readLegal() {
+    this.hasLegal = u(this.shadowRoot?.querySelector('slot[name="legal"]'));
+  }
+  link(a) {
+    return n`<li>
+      <a href=${a.href} rel=${a.external ? "noopener" : i}
+        >${a.label}${a.external ? n`<kt-icon name="external-link" size="14" aria-hidden="true"></kt-icon>` : i}</a
+      >
+    </li>`;
+  }
+  render() {
+    const a = Math.max(2, this.headingLevel);
+    return n`<footer part="base" role="contentinfo" aria-label=${this.label || i}>
+      <div class="inner">
+        <div class="top">
+          <div part="brand" class="brand">
+            <div class="brand-mark"><slot name="brand"></slot></div>
+            <div class="about"><slot></slot></div>
+            <div class="actions"><slot name="actions"></slot></div>
+          </div>
+          ${this.columns.length ? n`<nav part="columns" class="columns" aria-label=${this.label || i}>
+                  ${this.columns.map(
+      (o) => n`<div part="column">
+                        ${f(a, o.heading, "heading")}
+                        <ul>
+                          ${o.links.map((p) => this.link(p))}
+                        </ul>
+                      </div>`
+    )}
+                </nav>` : i}
+        </div>
+        <div part="bottom" class="bottom" ?hidden=${!this.hasLegal}>
+          <slot name="legal" @slotchange=${this.readLegal}></slot>
+        </div>
+      </div>
+    </footer>`;
+  }
+}
+r([
+  l({ attribute: !1 })
+], t.prototype, "columns");
+r([
+  l({ type: String, reflect: !0 })
+], t.prototype, "variant");
+r([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "bordered");
+r([
+  l({ type: Number, attribute: "heading-level" })
+], t.prototype, "headingLevel");
+r([
+  l({ type: String })
+], t.prototype, "label");
+r([
+  h()
+], t.prototype, "hasLegal");
+v("kt-footer", t);
+export {
+  t as KtFooter
+};
+//# sourceMappingURL=kt-footer.js.map

package/dist/components/navigation/kt-footer/kt-footer.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-footer.js","sources":["../../../../src/components/navigation/kt-footer/kt-footer.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { hasAssignedContent } from '#internal/slots';\nimport { heading } from '#internal/heading';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtFooterLink {\n  readonly label: string;\n  readonly href: string;\n  /** Leaves the site: marked with an icon, and given `rel=\"noopener\"`. */\n  readonly external?: boolean;\n}\n\nexport interface KtFooterColumn {\n  readonly heading: string;\n  readonly links: readonly KtFooterLink[];\n}\n\nexport type KtFooterVariant = 'columns' | 'simple';\n\n/**\n * The site footer: a contentinfo landmark holding the brand and a word about\n * the product, columns of links, actions, and a legal line under them.\n *\n * The columns are data — `footer.columns = [{ heading, links }]` — so they are\n * laid out, named and marked alike; the brand, the actions and the legal line\n * are slots, for whatever a product puts there. It lays itself out from its\n * own width, not the viewport's: in a narrow panel it stacks as on a phone.\n *\n * `variant=\"simple\"` is a single row — the brand, the links run together, the\n * actions — for a page that needs a footer rather than a site map.\n *\n * @element kt-footer\n *\n * @slot brand - Logo or wordmark.\n * @slot - A word under the brand: what the product is.\n * @slot actions - Buttons and links under it — social links, a newsletter form.\n * @slot legal - The bottom line: copyright, terms, privacy. Its row is left out while empty.\n *\n * @csspart base - The `<footer>`.\n * @csspart brand - The brand, its text and the actions.\n * @csspart columns - The navigation holding the columns.\n * @csspart column - One column.\n * @csspart bottom - The legal row.\n *\n * @cssproperty --kt-footer-max-width - How wide the content runs. None by default.\n * @cssproperty --kt-footer-padding-inline - The space at its sides. The card padding by default;\n *   zero lines it up with a page's content when the page already has its own.\n *\n * @example\n * ```html\n * <kt-footer label=\"Site\">\n *   <a slot=\"brand\" href=\"/\">ACME</a>\n *   Invoicing for small teams.\n *   <span slot=\"legal\">© 2026 Acme</span>\n * </kt-footer>\n * <script>\n *   footer.columns = [\n *     { heading: 'Product', links: [{ label: 'Pricing', href: '/pricing' }] },\n *     { heading: 'Company', links: [{ label: 'GitHub', href: 'https://github.com/acme', external: true }] },\n *   ];\n * </script>\n * ```\n */\nexport class KtFooter extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        container-type: inline-size;\n        --kt-footer-max-width: none;\n        --kt-footer-padding-inline: var(--padding-card);\n      }\n\n      footer {\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        background-color: var(--surface-page);\n      }\n      :host([bordered]) footer {\n        border-top: var(--border-width) solid var(--border-subtle);\n      }\n\n      .inner {\n        max-width: var(--kt-footer-max-width);\n        margin: 0 auto;\n        padding: calc(var(--padding-card) * 2) var(--kt-footer-padding-inline);\n      }\n\n      /* Stacked by default — a phone, a narrow panel — and side by side once\n         the footer itself is wide enough. */\n      .top {\n        display: grid;\n        gap: calc(var(--gap-card) * 2);\n      }\n      @container (min-width: 720px) {\n        .top {\n          grid-template-columns: minmax(0, 2fr) minmax(0, 3fr);\n        }\n      }\n\n      .brand {\n        display: grid;\n        gap: var(--gap-form);\n        align-content: start;\n      }\n      .brand-mark {\n        display: flex;\n        align-items: center;\n        gap: var(--gap-button);\n        color: var(--text-body);\n        font: var(--font-title-h6);\n        line-height: 1;\n      }\n      .about {\n        max-width: 36ch;\n      }\n      .actions {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      .columns {\n        display: grid;\n        grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));\n        gap: var(--gap-card);\n      }\n      .heading {\n        margin: 0 0 var(--gap-form);\n        color: var(--text-body);\n        font: var(--font-normal-medium);\n      }\n      ul {\n        display: grid;\n        gap: var(--gap-button);\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      a {\n        display: inline-flex;\n        align-items: center;\n        gap: 4px;\n        color: var(--text-muted);\n        text-decoration: none;\n        border-radius: var(--radius-sub-menu);\n        transition: color var(--duration-instant);\n      }\n      a:hover {\n        color: var(--text-body);\n      }\n      a:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: 2px;\n      }\n\n      .bottom {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: center;\n        justify-content: space-between;\n        gap: var(--gap-button) var(--gap-card);\n        margin-top: calc(var(--gap-card) * 2);\n        padding-top: var(--padding-card);\n        font: var(--font-normal-small);\n        border-top: var(--border-width) solid var(--border-subtle);\n      }\n      .bottom[hidden] {\n        display: none;\n      }\n\n      /* === Simple: one row, the links run together === */\n      :host([variant='simple']) .top {\n        grid-template-columns: none;\n        align-items: center;\n      }\n      @container (min-width: 720px) {\n        :host([variant='simple']) .top {\n          grid-template-columns: auto minmax(0, 1fr);\n        }\n      }\n      :host([variant='simple']) .about,\n      :host([variant='simple']) .heading {\n        display: none;\n      }\n      :host([variant='simple']) .columns,\n      :host([variant='simple']) [part='column'],\n      :host([variant='simple']) ul {\n        display: flex;\n        flex-wrap: wrap;\n        gap: var(--gap-button) var(--gap-card);\n      }\n      @container (min-width: 720px) {\n        :host([variant='simple']) .columns {\n          justify-content: flex-end;\n        }\n      }\n    `,\n  ];\n\n  /** The columns of links. Set as a property: `footer.columns = [...]`. */\n  @property({ attribute: false })\n  columns: readonly KtFooterColumn[] = [];\n\n  /** `columns`: a heading over each list. `simple`: one row of links. */\n  @property({ type: String, reflect: true })\n  variant: KtFooterVariant = 'columns';\n\n  /** A rule along the top. */\n  @property({ type: Boolean, reflect: true })\n  bordered = true;\n\n  /** The level of the column headings, 2 to 6. */\n  @property({ type: Number, attribute: 'heading-level' })\n  headingLevel = 2;\n\n  /** Accessible name for the footer and its navigation. */\n  @property({ type: String })\n  label = '';\n\n  @state() private hasLegal = false;\n\n  /** The first slotchange can land after the first render; read the slot once as well. */\n  override firstUpdated(): void {\n    this.readLegal();\n  }\n\n  private readLegal(): void {\n    this.hasLegal = hasAssignedContent(this.shadowRoot?.querySelector('slot[name=\"legal\"]'));\n  }\n\n  private link(link: KtFooterLink): TemplateResult {\n    return html`<li>\n      <a href=${link.href} rel=${link.external ? 'noopener' : nothing}\n        >${link.label}${\n          link.external\n            ? html`<kt-icon name=\"external-link\" size=\"14\" aria-hidden=\"true\"></kt-icon>`\n            : nothing\n        }</a\n      >\n    </li>`;\n  }\n\n  override render(): TemplateResult {\n    const level = Math.max(2, this.headingLevel);\n    return html`<footer part=\"base\" role=\"contentinfo\" aria-label=${this.label || nothing}>\n      <div class=\"inner\">\n        <div class=\"top\">\n          <div part=\"brand\" class=\"brand\">\n            <div class=\"brand-mark\"><slot name=\"brand\"></slot></div>\n            <div class=\"about\"><slot></slot></div>\n            <div class=\"actions\"><slot name=\"actions\"></slot></div>\n          </div>\n          ${\n            this.columns.length\n              ? html`<nav part=\"columns\" class=\"columns\" aria-label=${this.label || nothing}>\n                  ${this.columns.map(\n                    (column) =>\n                      html`<div part=\"column\">\n                        ${heading(level, column.heading, 'heading')}\n                        <ul>\n                          ${column.links.map((link) => this.link(link))}\n                        </ul>\n                      </div>`,\n                  )}\n                </nav>`\n              : nothing\n          }\n        </div>\n        <div part=\"bottom\" class=\"bottom\" ?hidden=${!this.hasLegal}>\n          <slot name=\"legal\" @slotchange=${this.readLegal}></slot>\n        </div>\n      </div>\n    </footer>`;\n  }\n}\n\ndefineElement('kt-footer', KtFooter);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-footer': KtFooter;\n  }\n}\n"],"names":["KtFooter","KtElement","css","hasAssignedContent","link","html","nothing","level","column","heading","__decorateClass","property","state","defineElement"],"mappings":"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"}

package/dist/components/navigation/kt-header/kt-header.js

@@ -1,8 +1,8 @@
 import { css as c, nothing as u, html as m } from "lit";
 import { state as b, property as n } from "lit/decorators.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";
 import { e as p } 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-button/kt-button.js";
 var g = Object.defineProperty, a = (r, o, s, v) => {
   for (var e = void 0, i = r.length - 1, l; i >= 0; i--)

package/dist/components/navigation/kt-page-header/kt-page-header.js

@@ -1,6 +1,6 @@
 import { css as c, html as t, nothing as l } from "lit";
 import { property as s } from "lit/decorators.js";
-import { K as h, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as h, d as g } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 var f = Object.defineProperty, o = (a, r, p, v) => {
   for (var e = void 0, n = a.length - 1, d; n >= 0; n--)
     (d = a[n]) && (e = d(r, p, e) || e);
@@ -50,7 +50,7 @@ class i extends h {
       h2 {
         margin: 0;
         color: var(--text-body);
-        font: var(--font-title-h5);
+        font: var(--font-title-h4);
       }
 
       .description {

package/dist/components/navigation/kt-page-header/kt-page-header.js.map

@@ -1 +1 @@
-{"version":3,"file":"kt-page-header.js","sources":["../../../../src/components/navigation/kt-page-header/kt-page-header.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\n/**\n * The block every screen opens with: an overline, a title, a sentence, and the\n * actions that belong to the page rather than to anything on it.\n *\n * It exists because it was being rebuilt on every screen, and the copies drifted\n * — different heading levels, different gaps, actions sometimes above and\n * sometimes beside. Those are not decisions worth making twice.\n *\n * At `level=\"section\"` the same block introduces a region inside a page: a\n * smaller heading, and the action is usually a link onward rather than a button.\n *\n * @element kt-page-header\n *\n * @slot - Extra content under the description.\n * @slot actions - Buttons or a link, trailing on wide screens.\n *\n * @csspart base - The container.\n * @csspart heading - The heading element.\n *\n * @example\n * ```html\n * <kt-page-header eyebrow=\"Dashboard\" heading=\"Good evening\"\n *                 description=\"Recent files, integrations and activity.\">\n *   <kt-button slot=\"actions\" icon=\"plus\">New document</kt-button>\n * </kt-page-header>\n *\n * <kt-page-header level=\"section\" heading=\"Recently opened\">\n *   <a slot=\"actions\" href=\"#/files\">See all files</a>\n * </kt-page-header>\n * ```\n */\nexport class KtPageHeader extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .header {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: 16px;\n      }\n\n      .copy {\n        display: flex;\n        flex: 1 1 320px;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 0;\n      }\n\n      .eyebrow {\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      h1 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h1);\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h5);\n      }\n\n      .description {\n        max-width: 72ch;\n        margin: 0;\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: none;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      /* A section header sits tight against what it introduces. */\n      :host([level='section']) .header {\n        align-items: center;\n      }\n\n      :host([level='section']) .description {\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  /** Small uppercase label above the heading — \"Dashboard\", \"Settings\". */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** `page` renders an `<h1>`; `section` an `<h2>` at body scale. */\n  @property({ type: String, reflect: true })\n  level: 'page' | 'section' = 'page';\n\n  override render(): TemplateResult {\n    const title = this.heading\n      ? this.level === 'section'\n        ? html`<h2 part=\"heading\">${this.heading}</h2>`\n        : html`<h1 part=\"heading\">${this.heading}</h1>`\n      : nothing;\n\n    return html`<div part=\"base\" class=\"header\">\n      <div class=\"copy\">\n        ${this.eyebrow ? html`<span class=\"eyebrow\">${this.eyebrow}</span>` : nothing} ${title}\n        ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n        <slot></slot>\n      </div>\n      <div class=\"actions\"><slot name=\"actions\"></slot></div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-page-header', KtPageHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-page-header': KtPageHeader;\n  }\n}\n"],"names":["KtPageHeader","KtElement","css","title","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;AAmCO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwEL,KAAA,UAAU,IAGV,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,QAA4B;AAAA,EAAA;AAAA,EAjF5B,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,IAAA;AAAA,EAiEF;AAAA,EAgBS,SAAyB;AAChC,UAAMC,IAAQ,KAAK,UACf,KAAK,UAAU,YACbC,uBAA0B,KAAK,OAAO,UACtCA,uBAA0B,KAAK,OAAO,UACxCC;AAEJ,WAAOD;AAAA;AAAA,UAED,KAAK,UAAUA,0BAA6B,KAAK,OAAO,YAAYC,CAAO,IAAIF,CAAK;AAAA,UACpF,KAAK,cAAcC,2BAA8B,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzF;AACF;AA5BEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvEfP,EAwEX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfP,EA2EX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7EfP,EA8EX,WAAA,aAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BP,EAkFX,WAAA,OAAA;AAoBFQ,EAAc,kBAAkBR,CAAY;"}
+{"version":3,"file":"kt-page-header.js","sources":["../../../../src/components/navigation/kt-page-header/kt-page-header.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\n\n/**\n * The block every screen opens with: an overline, a title, a sentence, and the\n * actions that belong to the page rather than to anything on it.\n *\n * It exists because it was being rebuilt on every screen, and the copies drifted\n * — different heading levels, different gaps, actions sometimes above and\n * sometimes beside. Those are not decisions worth making twice.\n *\n * At `level=\"section\"` the same block introduces a region inside a page: a\n * smaller heading, and the action is usually a link onward rather than a button.\n *\n * @element kt-page-header\n *\n * @slot - Extra content under the description.\n * @slot actions - Buttons or a link, trailing on wide screens.\n *\n * @csspart base - The container.\n * @csspart heading - The heading element.\n *\n * @example\n * ```html\n * <kt-page-header eyebrow=\"Dashboard\" heading=\"Good evening\"\n *                 description=\"Recent files, integrations and activity.\">\n *   <kt-button slot=\"actions\" icon=\"plus\">New document</kt-button>\n * </kt-page-header>\n *\n * <kt-page-header level=\"section\" heading=\"Recently opened\">\n *   <a slot=\"actions\" href=\"#/files\">See all files</a>\n * </kt-page-header>\n * ```\n */\nexport class KtPageHeader extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      .header {\n        display: flex;\n        flex-wrap: wrap;\n        align-items: flex-end;\n        justify-content: space-between;\n        gap: 16px;\n      }\n\n      .copy {\n        display: flex;\n        flex: 1 1 320px;\n        flex-direction: column;\n        gap: 4px;\n        min-width: 0;\n      }\n\n      .eyebrow {\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      h1 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h1);\n      }\n\n      h2 {\n        margin: 0;\n        color: var(--text-body);\n        font: var(--font-title-h4);\n      }\n\n      .description {\n        max-width: 72ch;\n        margin: 0;\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: none;\n        flex-wrap: wrap;\n        align-items: center;\n        gap: var(--gap-button);\n      }\n\n      /* A section header sits tight against what it introduces. */\n      :host([level='section']) .header {\n        align-items: center;\n      }\n\n      :host([level='section']) .description {\n        font: var(--font-normal-small);\n      }\n    `,\n  ];\n\n  /** Small uppercase label above the heading — \"Dashboard\", \"Settings\". */\n  @property({ type: String })\n  eyebrow = '';\n\n  @property({ type: String })\n  heading = '';\n\n  @property({ type: String })\n  description = '';\n\n  /** `page` renders an `<h1>`; `section` an `<h2>` at body scale. */\n  @property({ type: String, reflect: true })\n  level: 'page' | 'section' = 'page';\n\n  override render(): TemplateResult {\n    const title = this.heading\n      ? this.level === 'section'\n        ? html`<h2 part=\"heading\">${this.heading}</h2>`\n        : html`<h1 part=\"heading\">${this.heading}</h1>`\n      : nothing;\n\n    return html`<div part=\"base\" class=\"header\">\n      <div class=\"copy\">\n        ${this.eyebrow ? html`<span class=\"eyebrow\">${this.eyebrow}</span>` : nothing} ${title}\n        ${this.description ? html`<p class=\"description\">${this.description}</p>` : nothing}\n        <slot></slot>\n      </div>\n      <div class=\"actions\"><slot name=\"actions\"></slot></div>\n    </div>`;\n  }\n}\n\ndefineElement('kt-page-header', KtPageHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-page-header': KtPageHeader;\n  }\n}\n"],"names":["KtPageHeader","KtElement","css","title","html","nothing","__decorateClass","property","defineElement"],"mappings":";;;;;;;;AAmCO,MAAMA,UAAqBC,EAAU;AAAA,EAArC,cAAA;AAAA,UAAA,GAAA,SAAA,GAwEL,KAAA,UAAU,IAGV,KAAA,UAAU,IAGV,KAAA,cAAc,IAId,KAAA,QAA4B;AAAA,EAAA;AAAA,EAjF5B,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,IAAA;AAAA,EAiEF;AAAA,EAgBS,SAAyB;AAChC,UAAMC,IAAQ,KAAK,UACf,KAAK,UAAU,YACbC,uBAA0B,KAAK,OAAO,UACtCA,uBAA0B,KAAK,OAAO,UACxCC;AAEJ,WAAOD;AAAA;AAAA,UAED,KAAK,UAAUA,0BAA6B,KAAK,OAAO,YAAYC,CAAO,IAAIF,CAAK;AAAA,UACpF,KAAK,cAAcC,2BAA8B,KAAK,WAAW,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKzF;AACF;AA5BEC,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAvEfP,EAwEX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA1EfP,EA2EX,WAAA,SAAA;AAGAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7EfP,EA8EX,WAAA,aAAA;AAIAM,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM;AAAA,GAjF9BP,EAkFX,WAAA,OAAA;AAoBFQ,EAAc,kBAAkBR,CAAY;"}

package/dist/components/navigation/kt-segmented-control/kt-segmented-control.d.ts

@@ -40,6 +40,7 @@ export declare class KtSegmentedControl extends KtElement {
     static readonly formAssociated = true;
     static styles: import("lit").CSSResultGroup[];
     private segments;
+    constructor();
     private internals;
     private defaultValue;
     options: readonly KtSegmentedOption[];