kanto-ds 1.0.0

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

@@ -0,0 +1,67 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-button/kt-button.js';
+/**
+ * The application header: a banner landmark holding the brand, the primary
+ * navigation and a row of actions.
+ *
+ * Below `--kt-header-breakpoint` (900px by default) the navigation collapses
+ * behind a menu button and reappears as a panel under the bar. That threshold
+ * is a token rather than a hard-coded media query, because how much navigation
+ * fits depends on how much navigation you put in.
+ *
+ * @element kt-header
+ *
+ * @slot brand - Logo or wordmark, at the start.
+ * @slot - Primary navigation, in the middle.
+ * @slot actions - Buttons and links, at the end. Stays visible on mobile.
+ * @slot menu - What the menu button reveals below the breakpoint. Separate
+ *   from the default slot because a node can only be assigned to one slot; put
+ *   a compact copy of the navigation here.
+ * @slot bottom - A second row under the bar — sub-navigation, a breadcrumb.
+ *
+ * @csspart base - The `<header>`.
+ * @csspart bar - The main row.
+ * @csspart bottom - The second row.
+ *
+ * The bar is a three-column grid whose outer columns are equal, so the
+ * navigation is centred in the bar rather than in whatever the brand and the
+ * actions left over. Set `nav-align="start"` to butt it against the brand
+ * instead.
+ *
+ * @cssproperty --kt-header-breakpoint - Where the navigation collapses. 900px.
+ * @cssproperty --kt-header-height - Height of the main row. 64px.
+ *
+ * @fires kt-menu-toggle - The mobile menu opened or closed. `detail: { open }`.
+ *
+ * @example
+ * ```html
+ * <kt-header sticky>
+ *   <a slot="brand" href="/">KANTO</a>
+ *   <nav><a href="/docs">Docs</a><a href="/components">Components</a></nav>
+ *   <kt-button slot="actions" size="small" icon="github" label="GitHub"></kt-button>
+ * </kt-header>
+ * ```
+ */
+export declare class KtHeader extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private menuOpen;
+    /** Pins the header to the top of the viewport. */
+    sticky: boolean;
+    /** Where the navigation sits: centred in the bar, or against the brand. */
+    navAlign: 'center' | 'start';
+    bordered: boolean;
+    /** Accessible name for the banner, when a page has more than one. */
+    label: string;
+    /** Whether the collapsed navigation panel is showing. */
+    get isMenuOpen(): boolean;
+    /** Closes the collapsed navigation — call it after routing. */
+    closeMenu(): void;
+    private toggleMenu;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-header': KtHeader;
+    }
+}

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

@@ -0,0 +1,195 @@
+import { css as h, nothing as c, html as u } from "lit";
+import { state as m, property as n } from "lit/decorators.js";
+import { K as d, d as b } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as p } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-button/kt-button.js";
+var f = Object.defineProperty, a = (r, o, s, g) => {
+  for (var e = void 0, i = r.length - 1, l; i >= 0; i--)
+    (l = r[i]) && (e = l(o, s, e) || e);
+  return e && f(o, s, e), e;
+};
+class t extends d {
+  constructor() {
+    super(...arguments), this.menuOpen = !1, this.sticky = !1, this.navAlign = "center", this.bordered = !0, this.label = "";
+  }
+  static {
+    this.styles = [
+      d.styles,
+      h`
+      :host {
+        display: block;
+        --kt-header-height: 64px;
+        --kt-header-breakpoint: 900px;
+      }
+
+      :host([sticky]) {
+        position: sticky;
+        top: 0;
+        z-index: var(--z-dropdown);
+      }
+
+      header {
+        background-color: var(--surface-page);
+      }
+
+      /* Translucent only where the browser can actually blur; an unblurred
+         semi-transparent bar is just hard to read. */
+      @supports (backdrop-filter: blur(1px)) {
+        :host([sticky]) header {
+          background-color: color-mix(in srgb, var(--surface-page) 80%, transparent);
+          backdrop-filter: blur(12px);
+        }
+      }
+
+      :host([bordered]) header {
+        border-bottom: var(--border-width) solid var(--border-subtle);
+      }
+
+      /* Three columns rather than a flex row, and the outer two share what is
+         left equally: with flex:1 on the middle, the navigation is centred in
+         the leftover space, so it sits off-centre by half the difference
+         between the brand and the actions — which is exactly how far off it
+         looked. Equal outer columns centre it in the bar itself. */
+      .bar {
+        display: grid;
+        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
+        align-items: center;
+        gap: var(--gap-card);
+        min-height: var(--kt-header-height);
+        padding: 0 var(--padding-card);
+      }
+
+      :host([nav-align='start']) .bar {
+        grid-template-columns: auto minmax(0, 1fr) auto;
+      }
+
+      .brand {
+        display: flex;
+        align-items: center;
+        gap: var(--gap-button);
+        color: var(--text-body);
+        font: var(--font-title-h6);
+        line-height: 1;
+      }
+
+      /* A wordmark is capitals, and capitals use none of a font's descent — so
+         centring the *line box* parks the letters half a descent high, which is
+         about 1.5px at 18px in Manrope and reads as a misalignment rather than
+         as a font. Trimming the box to the cap height and the baseline centres
+         what the eye actually sees. */
+      @supports (text-box: trim-both cap alphabetic) {
+        .brand ::slotted(*) {
+          text-box: trim-both cap alphabetic;
+        }
+      }
+
+      .nav {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        min-width: 0;
+      }
+
+      :host([nav-align='start']) .nav {
+        justify-content: flex-start;
+      }
+
+      .actions {
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        gap: var(--gap-button);
+      }
+
+      .bottom {
+        padding: 0 var(--padding-card);
+      }
+
+      /* Hidden above the breakpoint; the container query cannot help here
+         because the header spans the viewport by definition. */
+      .menu-button {
+        display: none;
+        flex: none;
+      }
+
+      .panel {
+        display: none;
+      }
+
+      @media (max-width: 899px) {
+        .menu-button {
+          display: inline-flex;
+        }
+
+        .nav {
+          display: none;
+        }
+
+        .panel.open {
+          display: block;
+          padding: 0 var(--padding-card) var(--padding-form);
+          border-top: var(--border-width) solid var(--border-subtle);
+        }
+      }
+    `
+    ];
+  }
+  /** Whether the collapsed navigation panel is showing. */
+  get isMenuOpen() {
+    return this.menuOpen;
+  }
+  /** Closes the collapsed navigation — call it after routing. */
+  closeMenu() {
+    this.menuOpen && (this.menuOpen = !1, p(this, "kt-menu-toggle", { open: !1 }));
+  }
+  toggleMenu() {
+    this.menuOpen = !this.menuOpen, p(this, "kt-menu-toggle", { open: this.menuOpen });
+  }
+  render() {
+    return u`<header part="base" role="banner" aria-label=${this.label || c}>
+      <div part="bar" class="bar">
+        <div class="brand"><slot name="brand"></slot></div>
+
+        <div class="nav"><slot></slot></div>
+
+        <div class="actions"><slot name="actions"></slot></div>
+
+        <kt-button
+          class="menu-button"
+          variant="secondary-no-bg"
+          size="small"
+          icon=${this.menuOpen ? "x" : "menu"}
+          label=${this.menuOpen ? "Close menu" : "Open menu"}
+          aria-expanded=${this.menuOpen ? "true" : "false"}
+          @click=${this.toggleMenu}
+        ></kt-button>
+      </div>
+
+      <div class="panel ${this.menuOpen ? "open" : ""}">
+        <slot name="menu"></slot>
+      </div>
+
+      <div part="bottom" class="bottom"><slot name="bottom"></slot></div>
+    </header>`;
+  }
+}
+a([
+  m()
+], t.prototype, "menuOpen");
+a([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "sticky");
+a([
+  n({ type: String, reflect: !0, attribute: "nav-align" })
+], t.prototype, "navAlign");
+a([
+  n({ type: Boolean, reflect: !0 })
+], t.prototype, "bordered");
+a([
+  n({ type: String })
+], t.prototype, "label");
+b("kt-header", t);
+export {
+  t as KtHeader
+};
+//# sourceMappingURL=kt-header.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"kt-header.js","sources":["../../../../src/components/navigation/kt-header/kt-header.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-button/kt-button.js';\n\n/**\n * The application header: a banner landmark holding the brand, the primary\n * navigation and a row of actions.\n *\n * Below `--kt-header-breakpoint` (900px by default) the navigation collapses\n * behind a menu button and reappears as a panel under the bar. That threshold\n * is a token rather than a hard-coded media query, because how much navigation\n * fits depends on how much navigation you put in.\n *\n * @element kt-header\n *\n * @slot brand - Logo or wordmark, at the start.\n * @slot - Primary navigation, in the middle.\n * @slot actions - Buttons and links, at the end. Stays visible on mobile.\n * @slot menu - What the menu button reveals below the breakpoint. Separate\n *   from the default slot because a node can only be assigned to one slot; put\n *   a compact copy of the navigation here.\n * @slot bottom - A second row under the bar — sub-navigation, a breadcrumb.\n *\n * @csspart base - The `<header>`.\n * @csspart bar - The main row.\n * @csspart bottom - The second row.\n *\n * The bar is a three-column grid whose outer columns are equal, so the\n * navigation is centred in the bar rather than in whatever the brand and the\n * actions left over. Set `nav-align=\"start\"` to butt it against the brand\n * instead.\n *\n * @cssproperty --kt-header-breakpoint - Where the navigation collapses. 900px.\n * @cssproperty --kt-header-height - Height of the main row. 64px.\n *\n * @fires kt-menu-toggle - The mobile menu opened or closed. `detail: { open }`.\n *\n * @example\n * ```html\n * <kt-header sticky>\n *   <a slot=\"brand\" href=\"/\">KANTO</a>\n *   <nav><a href=\"/docs\">Docs</a><a href=\"/components\">Components</a></nav>\n *   <kt-button slot=\"actions\" size=\"small\" icon=\"github\" label=\"GitHub\"></kt-button>\n * </kt-header>\n * ```\n */\nexport class KtHeader extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n        --kt-header-height: 64px;\n        --kt-header-breakpoint: 900px;\n      }\n\n      :host([sticky]) {\n        position: sticky;\n        top: 0;\n        z-index: var(--z-dropdown);\n      }\n\n      header {\n        background-color: var(--surface-page);\n      }\n\n      /* Translucent only where the browser can actually blur; an unblurred\n         semi-transparent bar is just hard to read. */\n      @supports (backdrop-filter: blur(1px)) {\n        :host([sticky]) header {\n          background-color: color-mix(in srgb, var(--surface-page) 80%, transparent);\n          backdrop-filter: blur(12px);\n        }\n      }\n\n      :host([bordered]) header {\n        border-bottom: var(--border-width) solid var(--border-subtle);\n      }\n\n      /* Three columns rather than a flex row, and the outer two share what is\n         left equally: with flex:1 on the middle, the navigation is centred in\n         the leftover space, so it sits off-centre by half the difference\n         between the brand and the actions — which is exactly how far off it\n         looked. Equal outer columns centre it in the bar itself. */\n      .bar {\n        display: grid;\n        grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);\n        align-items: center;\n        gap: var(--gap-card);\n        min-height: var(--kt-header-height);\n        padding: 0 var(--padding-card);\n      }\n\n      :host([nav-align='start']) .bar {\n        grid-template-columns: auto minmax(0, 1fr) auto;\n      }\n\n      .brand {\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\n      /* A wordmark is capitals, and capitals use none of a font's descent — so\n         centring the *line box* parks the letters half a descent high, which is\n         about 1.5px at 18px in Manrope and reads as a misalignment rather than\n         as a font. Trimming the box to the cap height and the baseline centres\n         what the eye actually sees. */\n      @supports (text-box: trim-both cap alphabetic) {\n        .brand ::slotted(*) {\n          text-box: trim-both cap alphabetic;\n        }\n      }\n\n      .nav {\n        display: flex;\n        align-items: center;\n        justify-content: center;\n        min-width: 0;\n      }\n\n      :host([nav-align='start']) .nav {\n        justify-content: flex-start;\n      }\n\n      .actions {\n        display: flex;\n        align-items: center;\n        justify-content: flex-end;\n        gap: var(--gap-button);\n      }\n\n      .bottom {\n        padding: 0 var(--padding-card);\n      }\n\n      /* Hidden above the breakpoint; the container query cannot help here\n         because the header spans the viewport by definition. */\n      .menu-button {\n        display: none;\n        flex: none;\n      }\n\n      .panel {\n        display: none;\n      }\n\n      @media (max-width: 899px) {\n        .menu-button {\n          display: inline-flex;\n        }\n\n        .nav {\n          display: none;\n        }\n\n        .panel.open {\n          display: block;\n          padding: 0 var(--padding-card) var(--padding-form);\n          border-top: var(--border-width) solid var(--border-subtle);\n        }\n      }\n    `,\n  ];\n\n  @state()\n  private menuOpen = false;\n\n  /** Pins the header to the top of the viewport. */\n  @property({ type: Boolean, reflect: true })\n  sticky = false;\n\n  /** Where the navigation sits: centred in the bar, or against the brand. */\n  @property({ type: String, reflect: true, attribute: 'nav-align' })\n  navAlign: 'center' | 'start' = 'center';\n\n  @property({ type: Boolean, reflect: true })\n  bordered = true;\n\n  /** Accessible name for the banner, when a page has more than one. */\n  @property({ type: String })\n  label = '';\n\n  /** Whether the collapsed navigation panel is showing. */\n  get isMenuOpen(): boolean {\n    return this.menuOpen;\n  }\n\n  /** Closes the collapsed navigation — call it after routing. */\n  closeMenu(): void {\n    if (!this.menuOpen) return;\n    this.menuOpen = false;\n    emit(this, 'kt-menu-toggle', { open: false });\n  }\n\n  private toggleMenu(): void {\n    this.menuOpen = !this.menuOpen;\n    emit(this, 'kt-menu-toggle', { open: this.menuOpen });\n  }\n\n  override render(): TemplateResult {\n    return html`<header part=\"base\" role=\"banner\" aria-label=${this.label || nothing}>\n      <div part=\"bar\" class=\"bar\">\n        <div class=\"brand\"><slot name=\"brand\"></slot></div>\n\n        <div class=\"nav\"><slot></slot></div>\n\n        <div class=\"actions\"><slot name=\"actions\"></slot></div>\n\n        <kt-button\n          class=\"menu-button\"\n          variant=\"secondary-no-bg\"\n          size=\"small\"\n          icon=${this.menuOpen ? 'x' : 'menu'}\n          label=${this.menuOpen ? 'Close menu' : 'Open menu'}\n          aria-expanded=${this.menuOpen ? 'true' : 'false'}\n          @click=${this.toggleMenu}\n        ></kt-button>\n      </div>\n\n      <div class=\"panel ${this.menuOpen ? 'open' : ''}\">\n        <slot name=\"menu\"></slot>\n      </div>\n\n      <div part=\"bottom\" class=\"bottom\"><slot name=\"bottom\"></slot></div>\n    </header>`;\n  }\n}\n\ndefineElement('kt-header', KtHeader);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-header': KtHeader;\n  }\n}\n"],"names":["KtHeader","KtElement","css","emit","html","nothing","__decorateClass","state","property","defineElement"],"mappings":";;;;;;;;;;AAgDO,MAAMA,UAAiBC,EAAU;AAAA,EAAjC,cAAA;AAAA,UAAA,GAAA,SAAA,GA2HL,KAAQ,WAAW,IAInB,KAAA,SAAS,IAIT,KAAA,WAA+B,UAG/B,KAAA,WAAW,IAIX,KAAA,QAAQ;AAAA,EAAA;AAAA,EAzIR,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBA,EAAU;AAAA,MACVC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAAA;AAAA,EAqHF;AAAA;AAAA,EAqBA,IAAI,aAAsB;AACxB,WAAO,KAAK;AAAA,EACd;AAAA;AAAA,EAGA,YAAkB;AAChB,IAAK,KAAK,aACV,KAAK,WAAW,IAChBC,EAAK,MAAM,kBAAkB,EAAE,MAAM,IAAO;AAAA,EAC9C;AAAA,EAEQ,aAAmB;AACzB,SAAK,WAAW,CAAC,KAAK,UACtBA,EAAK,MAAM,kBAAkB,EAAE,MAAM,KAAK,UAAU;AAAA,EACtD;AAAA,EAES,SAAyB;AAChC,WAAOC,iDAAoD,KAAK,SAASC,CAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,iBAYnE,KAAK,WAAW,MAAM,MAAM;AAAA,kBAC3B,KAAK,WAAW,eAAe,WAAW;AAAA,0BAClC,KAAK,WAAW,SAAS,OAAO;AAAA,mBACvC,KAAK,UAAU;AAAA;AAAA;AAAA;AAAA,0BAIR,KAAK,WAAW,SAAS,EAAE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,EAMnD;AACF;AA7DUC,EAAA;AAAA,EADPC,EAAA;AAAM,GA1HIP,EA2HH,WAAA,UAAA;AAIRM,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GA9H/BR,EA+HX,WAAA,QAAA;AAIAM,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,QAAQ,SAAS,IAAM,WAAW,aAAa;AAAA,GAlItDR,EAmIX,WAAA,UAAA;AAGAM,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArI/BR,EAsIX,WAAA,UAAA;AAIAM,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAzIfR,EA0IX,WAAA,OAAA;AAgDFS,EAAc,aAAaT,CAAQ;"}

package/dist/components/navigation/kt-page-header/kt-page-header.d.ts

@@ -0,0 +1,48 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+/**
+ * The block every screen opens with: an overline, a title, a sentence, and the
+ * actions that belong to the page rather than to anything on it.
+ *
+ * It exists because it was being rebuilt on every screen, and the copies drifted
+ * — different heading levels, different gaps, actions sometimes above and
+ * sometimes beside. Those are not decisions worth making twice.
+ *
+ * At `level="section"` the same block introduces a region inside a page: a
+ * smaller heading, and the action is usually a link onward rather than a button.
+ *
+ * @element kt-page-header
+ *
+ * @slot - Extra content under the description.
+ * @slot actions - Buttons or a link, trailing on wide screens.
+ *
+ * @csspart base - The container.
+ * @csspart heading - The heading element.
+ *
+ * @example
+ * ```html
+ * <kt-page-header eyebrow="Dashboard" heading="Good evening"
+ *                 description="Recent files, integrations and activity.">
+ *   <kt-button slot="actions" icon="plus">New document</kt-button>
+ * </kt-page-header>
+ *
+ * <kt-page-header level="section" heading="Recently opened">
+ *   <a slot="actions" href="#/files">See all files</a>
+ * </kt-page-header>
+ * ```
+ */
+export declare class KtPageHeader extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** Small uppercase label above the heading — "Dashboard", "Settings". */
+    eyebrow: string;
+    heading: string;
+    description: string;
+    /** `page` renders an `<h1>`; `section` an `<h2>` at body scale. */
+    level: 'page' | 'section';
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-page-header': KtPageHeader;
+    }
+}

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

@@ -0,0 +1,111 @@
+import { css as d, html as t, nothing as l } from "lit";
+import { property as o } from "lit/decorators.js";
+import { K as c, d as g } from "../../../chunks/kt-element-CcMLO5e8.js";
+var f = Object.defineProperty, s = (a, r, p, v) => {
+  for (var e = void 0, n = a.length - 1, h; n >= 0; n--)
+    (h = a[n]) && (e = h(r, p, e) || e);
+  return e && f(r, p, e), e;
+};
+class i extends c {
+  constructor() {
+    super(...arguments), this.eyebrow = "", this.heading = "", this.description = "", this.level = "page";
+  }
+  static {
+    this.styles = [
+      c.styles,
+      d`
+      :host {
+        display: block;
+      }
+
+      .header {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: flex-end;
+        justify-content: space-between;
+        gap: 16px;
+      }
+
+      .copy {
+        display: flex;
+        flex: 1 1 320px;
+        flex-direction: column;
+        gap: 4px;
+        min-width: 0;
+      }
+
+      .eyebrow {
+        color: var(--color-text-500);
+        font: var(--font-title-overline);
+        letter-spacing: var(--letter-spacing-overline);
+        text-transform: uppercase;
+      }
+
+      h1 {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h1);
+      }
+
+      h2 {
+        margin: 0;
+        color: var(--text-body);
+        font: var(--font-title-h5);
+      }
+
+      .description {
+        max-width: 72ch;
+        margin: 0;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        line-height: 1.6;
+      }
+
+      .actions {
+        display: flex;
+        flex: none;
+        flex-wrap: wrap;
+        align-items: center;
+        gap: var(--gap-button);
+      }
+
+      /* A section header sits tight against what it introduces. */
+      :host([level='section']) .header {
+        align-items: center;
+      }
+
+      :host([level='section']) .description {
+        font: var(--font-normal-small);
+      }
+    `
+    ];
+  }
+  render() {
+    const r = this.heading ? this.level === "section" ? t`<h2 part="heading">${this.heading}</h2>` : t`<h1 part="heading">${this.heading}</h1>` : l;
+    return t`<div part="base" class="header">
+      <div class="copy">
+        ${this.eyebrow ? t`<span class="eyebrow">${this.eyebrow}</span>` : l} ${r}
+        ${this.description ? t`<p class="description">${this.description}</p>` : l}
+        <slot></slot>
+      </div>
+      <div class="actions"><slot name="actions"></slot></div>
+    </div>`;
+  }
+}
+s([
+  o({ type: String })
+], i.prototype, "eyebrow");
+s([
+  o({ type: String })
+], i.prototype, "heading");
+s([
+  o({ type: String })
+], i.prototype, "description");
+s([
+  o({ type: String, reflect: !0 })
+], i.prototype, "level");
+g("kt-page-header", i);
+export {
+  i as KtPageHeader
+};
+//# sourceMappingURL=kt-page-header.js.map

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

@@ -0,0 +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(--color-text-500);\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;"}

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

@@ -0,0 +1,63 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+export type KtSegmentedSize = 'small' | 'medium' | 'large';
+export interface KtSegmentedOption {
+    readonly value: string | number;
+    readonly label?: string;
+    readonly icon?: string;
+    readonly disabled?: boolean;
+}
+/**
+ * A small set of mutually exclusive choices, shown as one inset track with the
+ * selected segment raised out of it.
+ *
+ * Use it for two to five options that all fit on screen — a view switch, a date
+ * range. Past that, `<kt-select>`.
+ *
+ * Implemented as a radio group: one tab stop for the whole control, arrows to
+ * move between segments. That is what a keyboard user expects here, and it
+ * keeps a five-option control from adding five tab stops to the page.
+ *
+ * @element kt-segmented-control
+ *
+ * @csspart base - The track.
+ * @csspart option - A segment.
+ *
+ * @fires kt-change - A segment was chosen. `detail: { value, option }`.
+ *
+ * @example
+ * ```js
+ * control.options = [
+ *   { value: 'day', label: 'Day' },
+ *   { value: 'week', label: 'Week' },
+ *   { value: 'month', label: 'Month' },
+ * ];
+ * control.value = 'week';
+ * ```
+ */
+export declare class KtSegmentedControl extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    private segments;
+    options: readonly KtSegmentedOption[];
+    value: string | number | null;
+    size: KtSegmentedSize;
+    orientation: 'horizontal' | 'vertical';
+    disabled: boolean;
+    /** Accessible name for the group. */
+    label: string;
+    private get selectedIndex();
+    private choose;
+    /**
+     * Radio-group semantics: the arrows move *and* select, wrapping at the ends
+     * and skipping disabled segments.
+     */
+    private onKeyDown;
+    private step;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-segmented-control': KtSegmentedControl;
+    }
+}