kanto-ds 1.0.0

package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js

@@ -0,0 +1,228 @@
+import { css as f, nothing as c, html as p } from "lit";
+import { queryAll as v, property as d } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { K as b, d as g } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as m } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-icon/kt-icon.js";
+var x = Object.defineProperty, l = (u, t, r, o) => {
+  for (var e = void 0, i = u.length - 1, a; i >= 0; i--)
+    (a = u[i]) && (e = a(t, r, e) || e);
+  return e && x(t, r, e), e;
+};
+const y = { small: 16, medium: 20, large: 24 };
+class n extends b {
+  constructor() {
+    super(...arguments), this.options = [], this.value = null, this.size = "medium", this.orientation = "horizontal", this.disabled = !1, this.label = "";
+  }
+  static {
+    this.styles = [
+      b.styles,
+      f`
+      :host {
+        display: inline-block;
+      }
+
+      .track {
+        display: inline-flex;
+        box-sizing: border-box;
+        gap: 4px;
+        padding: 4px;
+        background-color: var(--color-dark-14);
+        border-radius: var(--border-radius);
+      }
+
+      .track.small {
+        gap: 3px;
+        padding: 3px;
+      }
+      .track.large {
+        gap: 5px;
+        padding: 5px;
+      }
+
+      .track.vertical {
+        flex-direction: column;
+        width: fit-content;
+      }
+
+      :host([disabled]) .track {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+      .option {
+        display: flex;
+        flex: 1;
+        align-items: center;
+        justify-content: center;
+        box-sizing: border-box;
+        gap: var(--gap-button);
+        height: var(--button-height-small);
+        padding: 0 12px;
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        background-color: transparent;
+        border: none;
+        border-radius: calc(var(--border-radius) - 4px);
+        cursor: pointer;
+        transition:
+          background-color var(--duration-normal) var(--easing-standard),
+          color var(--duration-normal) var(--easing-standard);
+      }
+
+      .option:hover:not(:disabled) {
+        background-color: var(--color-dark-18);
+      }
+      .option:active:not(:disabled) {
+        background-color: var(--surface-card);
+      }
+
+      .option.selected {
+        color: var(--text-body);
+        background-color: var(--surface-raised);
+      }
+      .option.selected:hover:not(:disabled) {
+        background-color: var(--surface-hover);
+      }
+
+      .option:disabled {
+        color: var(--text-disabled);
+        background-color: transparent;
+        pointer-events: none;
+      }
+
+      .option:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: -2px;
+      }
+
+      .option.small {
+        height: 24px;
+        gap: 6px;
+        padding: 0 8px;
+        font: var(--font-normal-small);
+      }
+      .option.large {
+        height: var(--button-height);
+        padding: 0 16px;
+        font: var(--font-normal-medium);
+      }
+
+      .option.icon-only {
+        width: var(--button-height-small);
+        padding: 0;
+      }
+      .option.icon-only.small {
+        width: 24px;
+      }
+      .option.icon-only.large {
+        width: var(--button-height);
+      }
+
+      .text {
+        flex: 1;
+        text-align: center;
+      }
+    `
+    ];
+  }
+  get selectedIndex() {
+    return this.options.findIndex((t) => t.value === this.value);
+  }
+  choose(t) {
+    t.disabled || this.value === t.value || (this.value = t.value, m(this, "kt-change", { value: t.value, option: t }));
+  }
+  /**
+   * Radio-group semantics: the arrows move *and* select, wrapping at the ends
+   * and skipping disabled segments.
+   */
+  onKeyDown(t) {
+    const r = this.orientation === "vertical" ? "ArrowDown" : "ArrowRight", o = this.orientation === "vertical" ? "ArrowUp" : "ArrowLeft";
+    let e;
+    if (t.key === r) e = this.step(1);
+    else if (t.key === o) e = this.step(-1);
+    else if (t.key === "Home") e = this.options.findIndex((s) => !s.disabled);
+    else if (t.key === "End")
+      e = this.options.length - 1 - [...this.options].reverse().findIndex((s) => !s.disabled);
+    else return;
+    if (t.preventDefault(), e === void 0 || e < 0) return;
+    const i = this.options[e];
+    if (!i) return;
+    const a = e;
+    this.choose(i), this.updateComplete.then(() => this.segments[a]?.focus());
+  }
+  step(t) {
+    const r = this.options.length;
+    if (r === 0) return;
+    const o = this.selectedIndex < 0 ? t === 1 ? -1 : 0 : this.selectedIndex;
+    for (let e = 1; e <= r; e += 1) {
+      const i = ((o + t * e) % r + r) % r;
+      if (!this.options[i]?.disabled) return i;
+    }
+  }
+  render() {
+    const t = this.selectedIndex, r = t >= 0 ? t : this.options.findIndex((o) => !o.disabled);
+    return p`<div
+      part="base"
+      class=${h({
+      track: !0,
+      [this.size]: !0,
+      vertical: this.orientation === "vertical"
+    })}
+      role="radiogroup"
+      aria-label=${this.label || c}
+      aria-orientation=${this.orientation}
+      aria-disabled=${this.disabled ? "true" : c}
+      @keydown=${this.onKeyDown}
+    >
+      ${this.options.map((o, e) => {
+      const i = o.value === this.value, a = o.label ?? "", s = !!o.icon && a === "";
+      return p`<button
+          part="option"
+          type="button"
+          role="radio"
+          class=${h({
+        option: !0,
+        [this.size]: !0,
+        selected: i,
+        "icon-only": s
+      })}
+          aria-checked=${i ? "true" : "false"}
+          aria-label=${s ? o.icon ?? "" : c}
+          tabindex=${e === r ? 0 : -1}
+          ?disabled=${o.disabled}
+          @click=${() => this.choose(o)}
+        >
+          ${o.icon ? p`<kt-icon name=${o.icon} size=${y[this.size]}></kt-icon>` : c}
+          ${s ? c : p`<span class="text">${a}</span>`}
+        </button>`;
+    })}
+    </div>`;
+  }
+}
+l([
+  v(".option")
+], n.prototype, "segments");
+l([
+  d({ attribute: !1 })
+], n.prototype, "options");
+l([
+  d({ type: String })
+], n.prototype, "value");
+l([
+  d({ type: String, reflect: !0 })
+], n.prototype, "size");
+l([
+  d({ type: String, reflect: !0 })
+], n.prototype, "orientation");
+l([
+  d({ type: Boolean, reflect: !0 })
+], n.prototype, "disabled");
+l([
+  d({ type: String })
+], n.prototype, "label");
+g("kt-segmented-control", n);
+export {
+  n as KtSegmentedControl
+};
+//# sourceMappingURL=kt-segmented-control.js.map

package/dist/components/navigation/kt-segmented-control/kt-segmented-control.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-segmented-control.js","sources":["../../../../src/components/navigation/kt-segmented-control/kt-segmented-control.ts"],"sourcesContent":["import { css, html, nothing, type TemplateResult } from 'lit';\nimport { property, queryAll } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport type KtSegmentedSize = 'small' | 'medium' | 'large';\n\nexport interface KtSegmentedOption {\n  readonly value: string | number;\n  readonly label?: string;\n  readonly icon?: string;\n  readonly disabled?: boolean;\n}\n\nconst ICON_SIZE: Record<KtSegmentedSize, number> = { small: 16, medium: 20, large: 24 };\n\n/**\n * A small set of mutually exclusive choices, shown as one inset track with the\n * selected segment raised out of it.\n *\n * Use it for two to five options that all fit on screen — a view switch, a date\n * range. Past that, `<kt-select>`.\n *\n * Implemented as a radio group: one tab stop for the whole control, arrows to\n * move between segments. That is what a keyboard user expects here, and it\n * keeps a five-option control from adding five tab stops to the page.\n *\n * @element kt-segmented-control\n *\n * @csspart base - The track.\n * @csspart option - A segment.\n *\n * @fires kt-change - A segment was chosen. `detail: { value, option }`.\n *\n * @example\n * ```js\n * control.options = [\n *   { value: 'day', label: 'Day' },\n *   { value: 'week', label: 'Week' },\n *   { value: 'month', label: 'Month' },\n * ];\n * control.value = 'week';\n * ```\n */\nexport class KtSegmentedControl extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: inline-block;\n      }\n\n      .track {\n        display: inline-flex;\n        box-sizing: border-box;\n        gap: 4px;\n        padding: 4px;\n        background-color: var(--color-dark-14);\n        border-radius: var(--border-radius);\n      }\n\n      .track.small {\n        gap: 3px;\n        padding: 3px;\n      }\n      .track.large {\n        gap: 5px;\n        padding: 5px;\n      }\n\n      .track.vertical {\n        flex-direction: column;\n        width: fit-content;\n      }\n\n      :host([disabled]) .track {\n        opacity: 0.5;\n        pointer-events: none;\n      }\n\n      .option {\n        display: flex;\n        flex: 1;\n        align-items: center;\n        justify-content: center;\n        box-sizing: border-box;\n        gap: var(--gap-button);\n        height: var(--button-height-small);\n        padding: 0 12px;\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        background-color: transparent;\n        border: none;\n        border-radius: calc(var(--border-radius) - 4px);\n        cursor: pointer;\n        transition:\n          background-color var(--duration-normal) var(--easing-standard),\n          color var(--duration-normal) var(--easing-standard);\n      }\n\n      .option:hover:not(:disabled) {\n        background-color: var(--color-dark-18);\n      }\n      .option:active:not(:disabled) {\n        background-color: var(--surface-card);\n      }\n\n      .option.selected {\n        color: var(--text-body);\n        background-color: var(--surface-raised);\n      }\n      .option.selected:hover:not(:disabled) {\n        background-color: var(--surface-hover);\n      }\n\n      .option:disabled {\n        color: var(--text-disabled);\n        background-color: transparent;\n        pointer-events: none;\n      }\n\n      .option:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: -2px;\n      }\n\n      .option.small {\n        height: 24px;\n        gap: 6px;\n        padding: 0 8px;\n        font: var(--font-normal-small);\n      }\n      .option.large {\n        height: var(--button-height);\n        padding: 0 16px;\n        font: var(--font-normal-medium);\n      }\n\n      .option.icon-only {\n        width: var(--button-height-small);\n        padding: 0;\n      }\n      .option.icon-only.small {\n        width: 24px;\n      }\n      .option.icon-only.large {\n        width: var(--button-height);\n      }\n\n      .text {\n        flex: 1;\n        text-align: center;\n      }\n    `,\n  ];\n\n  @queryAll('.option')\n  private segments!: NodeListOf<HTMLButtonElement>;\n\n  @property({ attribute: false })\n  options: readonly KtSegmentedOption[] = [];\n\n  @property({ type: String })\n  value: string | number | null = null;\n\n  @property({ type: String, reflect: true })\n  size: KtSegmentedSize = 'medium';\n\n  @property({ type: String, reflect: true })\n  orientation: 'horizontal' | 'vertical' = 'horizontal';\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Accessible name for the group. */\n  @property({ type: String })\n  label = '';\n\n  private get selectedIndex(): number {\n    return this.options.findIndex((option) => option.value === this.value);\n  }\n\n  private choose(option: KtSegmentedOption): void {\n    if (option.disabled || this.value === option.value) return;\n    this.value = option.value;\n    emit(this, 'kt-change', { value: option.value, option });\n  }\n\n  /**\n   * Radio-group semantics: the arrows move *and* select, wrapping at the ends\n   * and skipping disabled segments.\n   */\n  private onKeyDown(event: KeyboardEvent): void {\n    const forward = this.orientation === 'vertical' ? 'ArrowDown' : 'ArrowRight';\n    const back = this.orientation === 'vertical' ? 'ArrowUp' : 'ArrowLeft';\n\n    let target: number | undefined;\n    if (event.key === forward) target = this.step(1);\n    else if (event.key === back) target = this.step(-1);\n    else if (event.key === 'Home') target = this.options.findIndex((o) => !o.disabled);\n    else if (event.key === 'End')\n      target = this.options.length - 1 - [...this.options].reverse().findIndex((o) => !o.disabled);\n    else return;\n\n    event.preventDefault();\n    if (target === undefined || target < 0) return;\n\n    const option = this.options[target];\n    if (!option) return;\n\n    const index = target;\n    this.choose(option);\n    void this.updateComplete.then(() => this.segments[index]?.focus());\n  }\n\n  private step(direction: 1 | -1): number | undefined {\n    const count = this.options.length;\n    if (count === 0) return undefined;\n\n    const from = this.selectedIndex < 0 ? (direction === 1 ? -1 : 0) : this.selectedIndex;\n    for (let offset = 1; offset <= count; offset += 1) {\n      const index = (((from + direction * offset) % count) + count) % count;\n      if (!this.options[index]?.disabled) return index;\n    }\n    return undefined;\n  }\n\n  override render(): TemplateResult {\n    const selectedIndex = this.selectedIndex;\n    // One tab stop for the whole group: the selected segment holds it, or the\n    // first selectable one when nothing is chosen yet.\n    const tabStop = selectedIndex >= 0 ? selectedIndex : this.options.findIndex((o) => !o.disabled);\n\n    return html`<div\n      part=\"base\"\n      class=${classMap({\n        track: true,\n        [this.size]: true,\n        vertical: this.orientation === 'vertical',\n      })}\n      role=\"radiogroup\"\n      aria-label=${this.label || nothing}\n      aria-orientation=${this.orientation}\n      aria-disabled=${this.disabled ? 'true' : nothing}\n      @keydown=${this.onKeyDown}\n    >\n      ${this.options.map((option, index) => {\n        const selected = option.value === this.value;\n        const text = option.label ?? '';\n        const iconOnly = Boolean(option.icon) && text === '';\n\n        return html`<button\n          part=\"option\"\n          type=\"button\"\n          role=\"radio\"\n          class=${classMap({\n            option: true,\n            [this.size]: true,\n            selected,\n            'icon-only': iconOnly,\n          })}\n          aria-checked=${selected ? 'true' : 'false'}\n          aria-label=${iconOnly ? (option.icon ?? '') : nothing}\n          tabindex=${index === tabStop ? 0 : -1}\n          ?disabled=${option.disabled}\n          @click=${() => this.choose(option)}\n        >\n          ${\n            option.icon\n              ? html`<kt-icon name=${option.icon} size=${ICON_SIZE[this.size]}></kt-icon>`\n              : nothing\n          }\n          ${iconOnly ? nothing : html`<span class=\"text\">${text}</span>`}\n        </button>`;\n      })}\n    </div>`;\n  }\n}\n\ndefineElement('kt-segmented-control', KtSegmentedControl);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-segmented-control': KtSegmentedControl;\n  }\n}\n"],"names":["ICON_SIZE","KtSegmentedControl","KtElement","css","option","emit","event","forward","back","target","o","index","direction","count","from","offset","selectedIndex","tabStop","html","classMap","nothing","selected","text","iconOnly","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}

package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.d.ts

@@ -0,0 +1,94 @@
+import { type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-icon/kt-icon.js';
+import '../../core/kt-badge/kt-badge.js';
+export interface KtNavItem {
+    readonly label: string;
+    readonly href?: string;
+    /** Lucide icon name. Conventionally only the top level carries one. */
+    readonly icon?: string;
+    /** A count or a short status, right-aligned. */
+    readonly badge?: string;
+    readonly active?: boolean;
+    readonly disabled?: boolean;
+    /** Nested items. Any depth: a branch is drawn exactly like the level above. */
+    readonly children?: readonly KtNavItem[];
+    /** Open on first render. A branch holding the active item opens regardless. */
+    readonly open?: boolean;
+}
+export interface KtNavSection {
+    readonly title?: string;
+    readonly items: readonly KtNavItem[];
+}
+/**
+ * The sidebar navigation: uppercase overline section titles over lists of
+ * links, to any depth.
+ *
+ * The recursion is the point. Every product grows a third level eventually —
+ * Settings holds Members holds Roles — and the usual answer is to hand-roll
+ * that one branch beside the component, which is how two navigation styles end
+ * up on one screen. Here a branch renders exactly like the level above it,
+ * indented by depth, and a branch containing the current page opens itself.
+ *
+ * @element kt-sub-menu-navigation
+ *
+ * @csspart nav - The `<nav>`.
+ * @csspart section - A section.
+ * @csspart title - A section title.
+ * @csspart item - A navigation link or branch button, at any depth.
+ *
+ * @fires kt-navigate - A link was activated. `detail: { item }`. Cancel it to
+ *   keep the browser from following the href, for client-side routing.
+ * @fires kt-toggle - A branch opened or closed. `detail: { item, open }`.
+ *
+ * @example
+ * ```js
+ * nav.sections = [
+ *   {
+ *     title: 'Workspace',
+ *     items: [
+ *       { label: 'Home', href: '#/home', icon: 'house' },
+ *       { label: 'Inbox', href: '#/inbox', icon: 'inbox', badge: '4' },
+ *       {
+ *         label: 'Settings',
+ *         icon: 'settings',
+ *         children: [
+ *           { label: 'General', href: '#/settings/general' },
+ *           { label: 'Members', href: '#/settings/members',
+ *             children: [{ label: 'Roles', href: '#/settings/members/roles' }] },
+ *         ],
+ *       },
+ *     ],
+ *   },
+ * ];
+ * nav.activeHref = '#/settings/members/roles';
+ * ```
+ */
+export declare class KtSubMenuNavigation extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    sections: readonly KtNavSection[];
+    /** The href of the current page. Marks the matching link active. */
+    activeHref: string;
+    label: string;
+    /** Drops the card background, for a sidebar that owns its own surface. */
+    flush: boolean;
+    /** Icons only. Labels, badges and branches are hidden rather than clipped. */
+    collapsed: boolean;
+    /** Branch paths the reader has opened or closed, overriding the default. */
+    private overrides;
+    private isActive;
+    /** True when this item, or anything under it, is the current page. */
+    private holdsActive;
+    private isOpen;
+    private onSelect;
+    private onToggle;
+    /** Opens every branch down to `activeHref`. Called on the section list. */
+    private renderItems;
+    private renderItem;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-sub-menu-navigation': KtSubMenuNavigation;
+    }
+}

package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js

@@ -0,0 +1,265 @@
+import { css as y, html as a, nothing as n } from "lit";
+import { property as c, state as x } from "lit/decorators.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { styleMap as $ } from "lit/directives/style-map.js";
+import { K as b, d as k } from "../../../chunks/kt-element-CcMLO5e8.js";
+import { e as g } from "../../../chunks/events-Bjl5Zmmq.js";
+import "../../core/kt-icon/kt-icon.js";
+import "../../core/kt-badge/kt-badge.js";
+var w = Object.defineProperty, d = (p, e, t, o) => {
+  for (var r = void 0, i = p.length - 1, l; i >= 0; i--)
+    (l = p[i]) && (r = l(e, t, r) || r);
+  return r && w(e, t, r), r;
+};
+class s extends b {
+  constructor() {
+    super(...arguments), this.sections = [], this.activeHref = "", this.label = "Secondary navigation", this.flush = !1, this.collapsed = !1, this.overrides = {};
+  }
+  static {
+    this.styles = [
+      b.styles,
+      y`
+      :host {
+        display: block;
+      }
+
+      nav {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-sub-menu);
+        padding: var(--padding-card);
+        background-color: var(--surface-card);
+        border-radius: var(--radius-sub-menu);
+      }
+
+      /* A full-height sidebar owns its own background; the card chrome would
+         be a panel inside a panel. */
+      :host([flush]) nav {
+        gap: 20px;
+        padding: 0;
+        background: none;
+        border-radius: 0;
+      }
+
+      .title {
+        margin: 0;
+        padding: 0 var(--nav-inset, 0) 6px;
+        color: var(--color-text-500);
+        font: var(--font-title-overline);
+        letter-spacing: var(--letter-spacing-overline);
+        text-transform: uppercase;
+      }
+
+      ul {
+        display: flex;
+        flex-direction: column;
+        gap: var(--gap-element);
+        margin: 0;
+        padding: 0;
+        list-style: none;
+      }
+
+      /* width: 100% matters on the branch rows: a <button> sizes to its content
+         even as a flex container, so a branch's hover and active fill stopped
+         at the end of its label while a link's ran the full row. */
+      .item {
+        position: relative;
+        display: flex;
+        box-sizing: border-box;
+        align-items: center;
+        width: 100%;
+        gap: 10px;
+        padding: var(--padding-sub-menu-item);
+        padding-left: calc(var(--nav-pad-left, 16px) + var(--depth, 0) * 20px);
+        color: var(--text-muted);
+        font: var(--font-normal-regular);
+        text-align: left;
+        text-decoration: none;
+        background: none;
+        border: none;
+        border-radius: var(--radius-input);
+        cursor: pointer;
+      }
+
+      .item:hover {
+        color: var(--text-body);
+        background-color: var(--surface-hover);
+        text-decoration: none;
+      }
+
+      .item:focus-visible {
+        outline: var(--outline-width) solid var(--color-primary-base);
+        outline-offset: -2px;
+      }
+
+      .item[aria-disabled='true'] {
+        color: var(--text-disabled);
+        pointer-events: none;
+      }
+
+      .active {
+        color: var(--color-primary-base);
+        background-color: var(--color-primary-soft);
+      }
+
+      .active:hover {
+        color: var(--color-primary-base);
+        background-color: var(--color-primary-soft);
+      }
+
+      /* The accent bar marks the current page without relying on the tint
+         alone, which is the part that survives a forced-colors mode. */
+      .active::before {
+        position: absolute;
+        top: 50%;
+        left: 0;
+        width: 3px;
+        height: 18px;
+        background: var(--color-primary-base);
+        border-radius: 0 var(--radius-full) var(--radius-full) 0;
+        transform: translateY(-50%);
+        content: '';
+      }
+
+      /* A branch is highlighted, not marked current: the page is below it. */
+      .within {
+        color: var(--text-body);
+      }
+
+      .label {
+        flex: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+      }
+
+      .chevron {
+        flex: none;
+        color: var(--color-text-500);
+        transition: transform var(--duration-fast) var(--ease-standard);
+      }
+
+      .chevron.open {
+        transform: rotate(90deg);
+      }
+
+      kt-icon {
+        flex: none;
+      }
+
+      /* Collapsed: icons only. Hidden rather than clipped — a label sliced in
+         half at 48px reads as a bug, not as a narrow sidebar. */
+      :host([collapsed]) .title,
+      :host([collapsed]) .label,
+      :host([collapsed]) .chevron,
+      :host([collapsed]) kt-badge,
+      :host([collapsed]) .children {
+        display: none;
+      }
+
+      :host([collapsed]) .item {
+        justify-content: center;
+        padding-right: 0;
+        padding-left: 0;
+      }
+    `
+    ];
+  }
+  isActive(e) {
+    return e.active === !0 || this.activeHref !== "" && e.href === this.activeHref;
+  }
+  /** True when this item, or anything under it, is the current page. */
+  holdsActive(e) {
+    return this.isActive(e) ? !0 : (e.children ?? []).some((t) => this.holdsActive(t));
+  }
+  isOpen(e, t) {
+    return this.holdsActive(e) ? !0 : this.overrides[t] ?? e.open === !0;
+  }
+  onSelect(e, t) {
+    if (e.metaKey || e.ctrlKey || e.shiftKey || e.button !== 0) return;
+    g(this, "kt-navigate", { item: t }).defaultPrevented && e.preventDefault();
+  }
+  onToggle(e, t) {
+    const o = !this.isOpen(e, t);
+    this.overrides = { ...this.overrides, [t]: o }, g(this, "kt-toggle", { item: e, open: o });
+  }
+  /** Opens every branch down to `activeHref`. Called on the section list. */
+  renderItems(e, t, o) {
+    return a`<ul>
+      ${e.map((r, i) => this.renderItem(r, t, `${o}.${i}`))}
+    </ul>`;
+  }
+  renderItem(e, t, o) {
+    const r = (e.children ?? []).length > 0, i = this.isActive(e), l = r && this.isOpen(e, o), h = f({
+      item: !0,
+      active: i,
+      within: r && !i && this.holdsActive(e)
+    }), u = $({ "--depth": String(t) }), v = a`
+      ${e.icon ? a`<kt-icon name=${e.icon} size="16"></kt-icon>` : n}
+      <span class="label">${e.label}</span>
+      ${e.badge ? a`<kt-badge variant="count">${e.badge}</kt-badge>` : n}
+      ${r ? a`<kt-icon
+              class=${f({ chevron: !0, open: l })}
+              name="chevron-right"
+              size="14"
+            ></kt-icon>` : n}
+    `;
+    return a`<li>
+      ${r ? a`<button
+              part="item"
+              type="button"
+              class=${h}
+              style=${u}
+              aria-expanded=${l ? "true" : "false"}
+              aria-disabled=${e.disabled ? "true" : n}
+              @click=${() => this.onToggle(e, o)}
+            >
+              ${v}
+            </button>` : a`<a
+              part="item"
+              class=${h}
+              style=${u}
+              href=${e.href ?? "#"}
+              aria-current=${i ? "page" : n}
+              aria-disabled=${e.disabled ? "true" : n}
+              @click=${(m) => this.onSelect(m, e)}
+            >
+              ${v}
+            </a>`}
+      ${r && l ? a`<div class="children">${this.renderItems(e.children, t + 1, o)}</div>` : n}
+    </li>`;
+  }
+  render() {
+    return a`<nav part="nav" aria-label=${this.label}>
+      ${this.sections.map(
+      (e, t) => a`<div part="section">
+            ${e.title ? a`<h6 part="title" class="title">${e.title}</h6>` : n}
+            ${this.renderItems(e.items, 0, String(t))}
+          </div>`
+    )}
+    </nav>`;
+  }
+}
+d([
+  c({ attribute: !1 })
+], s.prototype, "sections");
+d([
+  c({ type: String, attribute: "active-href" })
+], s.prototype, "activeHref");
+d([
+  c({ type: String })
+], s.prototype, "label");
+d([
+  c({ type: Boolean, reflect: !0 })
+], s.prototype, "flush");
+d([
+  c({ type: Boolean, reflect: !0 })
+], s.prototype, "collapsed");
+d([
+  x()
+], s.prototype, "overrides");
+k("kt-sub-menu-navigation", s);
+export {
+  s as KtSubMenuNavigation
+};
+//# sourceMappingURL=kt-sub-menu-navigation.js.map

package/dist/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"kt-sub-menu-navigation.js","sources":["../../../../src/components/navigation/kt-sub-menu-navigation/kt-sub-menu-navigation.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';\nimport '../../core/kt-badge/kt-badge.js';\n\nexport interface KtNavItem {\n  readonly label: string;\n  readonly href?: string;\n  /** Lucide icon name. Conventionally only the top level carries one. */\n  readonly icon?: string;\n  /** A count or a short status, right-aligned. */\n  readonly badge?: string;\n  readonly active?: boolean;\n  readonly disabled?: boolean;\n  /** Nested items. Any depth: a branch is drawn exactly like the level above. */\n  readonly children?: readonly KtNavItem[];\n  /** Open on first render. A branch holding the active item opens regardless. */\n  readonly open?: boolean;\n}\n\nexport interface KtNavSection {\n  readonly title?: string;\n  readonly items: readonly KtNavItem[];\n}\n\n/**\n * The sidebar navigation: uppercase overline section titles over lists of\n * links, to any depth.\n *\n * The recursion is the point. Every product grows a third level eventually —\n * Settings holds Members holds Roles — and the usual answer is to hand-roll\n * that one branch beside the component, which is how two navigation styles end\n * up on one screen. Here a branch renders exactly like the level above it,\n * indented by depth, and a branch containing the current page opens itself.\n *\n * @element kt-sub-menu-navigation\n *\n * @csspart nav - The `<nav>`.\n * @csspart section - A section.\n * @csspart title - A section title.\n * @csspart item - A navigation link or branch button, at any depth.\n *\n * @fires kt-navigate - A link was activated. `detail: { item }`. Cancel it to\n *   keep the browser from following the href, for client-side routing.\n * @fires kt-toggle - A branch opened or closed. `detail: { item, open }`.\n *\n * @example\n * ```js\n * nav.sections = [\n *   {\n *     title: 'Workspace',\n *     items: [\n *       { label: 'Home', href: '#/home', icon: 'house' },\n *       { label: 'Inbox', href: '#/inbox', icon: 'inbox', badge: '4' },\n *       {\n *         label: 'Settings',\n *         icon: 'settings',\n *         children: [\n *           { label: 'General', href: '#/settings/general' },\n *           { label: 'Members', href: '#/settings/members',\n *             children: [{ label: 'Roles', href: '#/settings/members/roles' }] },\n *         ],\n *       },\n *     ],\n *   },\n * ];\n * nav.activeHref = '#/settings/members/roles';\n * ```\n */\nexport class KtSubMenuNavigation extends KtElement {\n  static override styles = [\n    KtElement.styles,\n    css`\n      :host {\n        display: block;\n      }\n\n      nav {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-sub-menu);\n        padding: var(--padding-card);\n        background-color: var(--surface-card);\n        border-radius: var(--radius-sub-menu);\n      }\n\n      /* A full-height sidebar owns its own background; the card chrome would\n         be a panel inside a panel. */\n      :host([flush]) nav {\n        gap: 20px;\n        padding: 0;\n        background: none;\n        border-radius: 0;\n      }\n\n      .title {\n        margin: 0;\n        padding: 0 var(--nav-inset, 0) 6px;\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      ul {\n        display: flex;\n        flex-direction: column;\n        gap: var(--gap-element);\n        margin: 0;\n        padding: 0;\n        list-style: none;\n      }\n\n      /* width: 100% matters on the branch rows: a <button> sizes to its content\n         even as a flex container, so a branch's hover and active fill stopped\n         at the end of its label while a link's ran the full row. */\n      .item {\n        position: relative;\n        display: flex;\n        box-sizing: border-box;\n        align-items: center;\n        width: 100%;\n        gap: 10px;\n        padding: var(--padding-sub-menu-item);\n        padding-left: calc(var(--nav-pad-left, 16px) + var(--depth, 0) * 20px);\n        color: var(--text-muted);\n        font: var(--font-normal-regular);\n        text-align: left;\n        text-decoration: none;\n        background: none;\n        border: none;\n        border-radius: var(--radius-input);\n        cursor: pointer;\n      }\n\n      .item:hover {\n        color: var(--text-body);\n        background-color: var(--surface-hover);\n        text-decoration: none;\n      }\n\n      .item:focus-visible {\n        outline: var(--outline-width) solid var(--color-primary-base);\n        outline-offset: -2px;\n      }\n\n      .item[aria-disabled='true'] {\n        color: var(--text-disabled);\n        pointer-events: none;\n      }\n\n      .active {\n        color: var(--color-primary-base);\n        background-color: var(--color-primary-soft);\n      }\n\n      .active:hover {\n        color: var(--color-primary-base);\n        background-color: var(--color-primary-soft);\n      }\n\n      /* The accent bar marks the current page without relying on the tint\n         alone, which is the part that survives a forced-colors mode. */\n      .active::before {\n        position: absolute;\n        top: 50%;\n        left: 0;\n        width: 3px;\n        height: 18px;\n        background: var(--color-primary-base);\n        border-radius: 0 var(--radius-full) var(--radius-full) 0;\n        transform: translateY(-50%);\n        content: '';\n      }\n\n      /* A branch is highlighted, not marked current: the page is below it. */\n      .within {\n        color: var(--text-body);\n      }\n\n      .label {\n        flex: 1;\n        overflow: hidden;\n        white-space: nowrap;\n        text-overflow: ellipsis;\n      }\n\n      .chevron {\n        flex: none;\n        color: var(--color-text-500);\n        transition: transform var(--duration-fast) var(--ease-standard);\n      }\n\n      .chevron.open {\n        transform: rotate(90deg);\n      }\n\n      kt-icon {\n        flex: none;\n      }\n\n      /* Collapsed: icons only. Hidden rather than clipped — a label sliced in\n         half at 48px reads as a bug, not as a narrow sidebar. */\n      :host([collapsed]) .title,\n      :host([collapsed]) .label,\n      :host([collapsed]) .chevron,\n      :host([collapsed]) kt-badge,\n      :host([collapsed]) .children {\n        display: none;\n      }\n\n      :host([collapsed]) .item {\n        justify-content: center;\n        padding-right: 0;\n        padding-left: 0;\n      }\n    `,\n  ];\n\n  @property({ attribute: false })\n  sections: readonly KtNavSection[] = [];\n\n  /** The href of the current page. Marks the matching link active. */\n  @property({ type: String, attribute: 'active-href' })\n  activeHref = '';\n\n  @property({ type: String })\n  label = 'Secondary navigation';\n\n  /** Drops the card background, for a sidebar that owns its own surface. */\n  @property({ type: Boolean, reflect: true })\n  flush = false;\n\n  /** Icons only. Labels, badges and branches are hidden rather than clipped. */\n  @property({ type: Boolean, reflect: true })\n  collapsed = false;\n\n  /** Branch paths the reader has opened or closed, overriding the default. */\n  @state()\n  private overrides: Record<string, boolean> = {};\n\n  private isActive(item: KtNavItem): boolean {\n    return item.active === true || (this.activeHref !== '' && item.href === this.activeHref);\n  }\n\n  /** True when this item, or anything under it, is the current page. */\n  private holdsActive(item: KtNavItem): boolean {\n    if (this.isActive(item)) return true;\n    return (item.children ?? []).some((child) => this.holdsActive(child));\n  }\n\n  private isOpen(item: KtNavItem, path: string): boolean {\n    // A branch holding the current page opens regardless of what was clicked:\n    // navigating to a page that is not visible is worse than losing a fold.\n    if (this.holdsActive(item)) return true;\n    return this.overrides[path] ?? item.open === true;\n  }\n\n  private onSelect(event: MouseEvent, item: KtNavItem): void {\n    if (event.metaKey || event.ctrlKey || event.shiftKey || event.button !== 0) return;\n\n    const proceed = emit(this, 'kt-navigate', { item });\n    if (proceed.defaultPrevented) event.preventDefault();\n  }\n\n  private onToggle(item: KtNavItem, path: string): void {\n    const open = !this.isOpen(item, path);\n    this.overrides = { ...this.overrides, [path]: open };\n    emit(this, 'kt-toggle', { item, open });\n  }\n\n  /** Opens every branch down to `activeHref`. Called on the section list. */\n  private renderItems(items: readonly KtNavItem[], depth: number, prefix: string): TemplateResult {\n    return html`<ul>\n      ${items.map((item, index) => this.renderItem(item, depth, `${prefix}.${index}`))}\n    </ul>`;\n  }\n\n  private renderItem(item: KtNavItem, depth: number, path: string): TemplateResult {\n    const branch = (item.children ?? []).length > 0;\n    const active = this.isActive(item);\n    const open = branch && this.isOpen(item, path);\n    const classes = classMap({\n      item: true,\n      active,\n      within: branch && !active && this.holdsActive(item),\n    });\n    const inset = styleMap({ '--depth': String(depth) });\n\n    const body = html`\n      ${item.icon ? html`<kt-icon name=${item.icon} size=\"16\"></kt-icon>` : nothing}\n      <span class=\"label\">${item.label}</span>\n      ${item.badge ? html`<kt-badge variant=\"count\">${item.badge}</kt-badge>` : nothing}\n      ${\n        branch\n          ? html`<kt-icon\n              class=${classMap({ chevron: true, open })}\n              name=\"chevron-right\"\n              size=\"14\"\n            ></kt-icon>`\n          : nothing\n      }\n    `;\n\n    return html`<li>\n      ${\n        branch\n          ? html`<button\n              part=\"item\"\n              type=\"button\"\n              class=${classes}\n              style=${inset}\n              aria-expanded=${open ? 'true' : 'false'}\n              aria-disabled=${item.disabled ? 'true' : nothing}\n              @click=${() => this.onToggle(item, path)}\n            >\n              ${body}\n            </button>`\n          : html`<a\n              part=\"item\"\n              class=${classes}\n              style=${inset}\n              href=${item.href ?? '#'}\n              aria-current=${active ? 'page' : nothing}\n              aria-disabled=${item.disabled ? 'true' : nothing}\n              @click=${(event: MouseEvent) => this.onSelect(event, item)}\n            >\n              ${body}\n            </a>`\n      }\n      ${\n        branch && open\n          ? html`<div class=\"children\">${this.renderItems(item.children!, depth + 1, path)}</div>`\n          : nothing\n      }\n    </li>`;\n  }\n\n  override render(): TemplateResult {\n    return html`<nav part=\"nav\" aria-label=${this.label}>\n      ${this.sections.map(\n        (section, index) =>\n          html`<div part=\"section\">\n            ${section.title ? html`<h6 part=\"title\" class=\"title\">${section.title}</h6>` : nothing}\n            ${this.renderItems(section.items, 0, String(index))}\n          </div>`,\n      )}\n    </nav>`;\n  }\n}\n\ndefineElement('kt-sub-menu-navigation', KtSubMenuNavigation);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'kt-sub-menu-navigation': KtSubMenuNavigation;\n  }\n}\n"],"names":["KtSubMenuNavigation","KtElement","css","item","child","path","event","emit","open","items","depth","prefix","html","index","branch","active","classes","classMap","inset","styleMap","body","nothing","section","__decorateClass","property","state","defineElement"],"mappings":"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"}