npm - kanto-ds - Versions diffs - 1.7.0 → 1.9.0 - Mend

kanto-ds 1.7.0 → 1.9.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (251) hide show

package/dist/components/navigation/kt-steps/kt-steps.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"kt-steps.js","sources":["../../../../src/components/navigation/kt-steps/kt-steps.ts"],"sourcesContent":["import { css, html, nothing, type PropertyValues, type TemplateResult } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { KtElement, defineElement } from '#internal/kt-element';\nimport { emit } from '#internal/events';\nimport { strings } from '#internal/strings';\nimport '../../core/kt-icon/kt-icon.js';\n\nexport interface KtStep {\n readonly id: string;\n readonly label: string;\n /** A line under the label. */\n readonly description?: string;\n /** Something on this step needs fixing — a field it holds failed. */\n readonly error?: boolean;\n}\n\nexport type KtStepsOrientation = 'horizontal' | 'vertical';\n\ntype StepState = 'complete' | 'current' | 'upcoming' | 'error';\n\n/**\n * The steps of a flow — sign-up, checkout, onboarding — and where the reader\n * is in it.\n *\n * Steps before `current` are complete, `current` is current, the rest are to\n * come — all of them, while `current` names no step; a step with `error` shows as needing attention wherever it is. With\n * `navigable`, a completed step is a button that goes back to it; going\n * forward is the flow's job, not the stepper's.\n *\n * An ordered list: the number is the step's place, `aria-current=\"step\"`\n * marks the current one, and each state is said in words, not only shown.\n *\n * @element kt-steps\n *\n * @csspart list - The `<ol>`.\n * @csspart step - A step.\n * @csspart marker - A step's number, tick or alert.\n * @csspart connector - The line from a step to the next.\n *\n * @fires kt-change - A completed step was picked, with `navigable`. `detail: { id }`.\n *\n * @example\n * ```html\n * <kt-steps label=\"Sign-up\" current=\"billing\"></kt-steps>\n * <script>\n * steps.steps = [\n * { id: 'account', label: 'Account' },\n * { id: 'billing', label: 'Billing', description: 'Card or invoice' },\n * { id: 'team', label: 'Team' },\n * ];\n * </script>\n * ```\n */\nexport class KtSteps extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n --kt-steps-marker: calc(28px * var(--density-scale, 1));\n }\n\n ol {\n display: flex;\n margin: 0;\n padding: 0;\n list-style: none;\n }\n :host([orientation='vertical']) ol {\n flex-direction: column;\n }\n\n /* Across, the steps share the width evenly: a column each, the marker\n on top and the text centred under it. */\n li {\n position: relative;\n flex: 1 1 0;\n min-width: 0;\n }\n .step {\n display: flex;\n flex-direction: column;\n gap: 8px;\n align-items: center;\n text-align: center;\n }\n :host([orientation='vertical']) li {\n flex: none;\n padding-bottom: 24px;\n }\n :host([orientation='vertical']) li:last-child {\n padding-bottom: 0;\n }\n :host([orientation='vertical']) .step {\n flex-direction: row;\n gap: 12px;\n align-items: flex-start;\n text-align: start;\n }\n\n /* The line to the next step, from marker to marker through their\n middle, clear of each: 8px across, 6px down. */\n .connector {\n position: absolute;\n top: calc(var(--kt-steps-marker) / 2 - 1px);\n left: calc(50% + var(--kt-steps-marker) / 2 + 8px);\n width: calc(100% - var(--kt-steps-marker) - 16px);\n height: 2px;\n background: var(--border-field);\n border-radius: var(--radius-full);\n }\n /* The fill runs from this step to the next as it is completed, and\n back as it is undone. */\n .fill {\n display: block;\n width: 100%;\n height: 100%;\n background: var(--color-primary-base);\n border-radius: inherit;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform var(--duration-slow) var(--easing-standard);\n }\n li[data-state='complete'] .fill {\n transform: none;\n }\n :host([orientation='vertical']) .fill {\n transform: scaleY(0);\n transform-origin: top;\n }\n :host([orientation='vertical']) li[data-state='complete'] .fill {\n transform: none;\n }\n :host([orientation='vertical']) .connector {\n top: calc(var(--kt-steps-marker) + 6px);\n left: calc(var(--kt-steps-marker) / 2 - 1px);\n width: 2px;\n height: calc(100% - var(--kt-steps-marker) - 12px);\n }\n\n /* A filled circle: the tick when done, the number otherwise. */\n .marker {\n display: grid;\n flex: none;\n place-items: center;\n width: var(--kt-steps-marker);\n height: var(--kt-steps-marker);\n color: var(--text-body);\n font: var(--font-normal-small);\n font-weight: 600;\n /* A field's border colour: a grey that reads on a card and a page,\n in both themes. */\n background: var(--border-field);\n border-radius: 50%;\n transition:\n background-color var(--duration-fast) var(--easing-standard),\n color var(--duration-fast) var(--easing-standard);\n }\n li[data-state='complete'] .marker,\n li[data-state='current'] .marker {\n color: var(--color-white);\n background: var(--color-primary-base);\n }\n li[data-state='error'] .marker {\n color: var(--color-white);\n background: var(--color-danger-base);\n }\n /* Trimmed to the digits' height, so the grid centres the ink, not a\n line box padded by the font's ascent and descent. */\n .number {\n display: block;\n line-height: 1;\n font-variant-numeric: tabular-nums;\n text-box: trim-both cap alphabetic;\n }\n /* Lucide's tick sits high in its square; this puts its ink on the\n marker's middle. */\n .marker kt-icon[name='check'] {\n translate: 0 0.5px;\n }\n /* A step just completed: its tick comes in as the line reaches the\n next step. Never on the first render — a page opens still. */\n .marker kt-icon.enter {\n animation: kt-steps-tick var(--duration-normal) var(--easing-standard) backwards;\n }\n @keyframes kt-steps-tick {\n from {\n opacity: 0;\n scale: 0.4;\n }\n }\n\n .text {\n display: grid;\n gap: 2px;\n min-width: 0;\n padding: 0 4px;\n }\n :host([orientation='vertical']) .text {\n gap: 0;\n padding: 0;\n }\n .label {\n color: var(--text-muted);\n font: var(--font-normal-medium);\n }\n /* Down, as tall as the marker, so the label sits on its middle. */\n :host([orientation='vertical']) .label {\n display: flex;\n align-items: center;\n min-height: var(--kt-steps-marker);\n }\n li[data-state='current'] .label,\n li[data-state='complete'] .label {\n color: var(--text-body);\n }\n li[data-state='error'] .label {\n color: var(--color-danger-text);\n }\n .description {\n color: var(--text-muted);\n font: var(--font-normal-small);\n }\n\n button.step {\n width: 100%;\n margin: 0;\n padding: 0;\n color: inherit;\n font: inherit;\n background: none;\n border: none;\n border-radius: var(--radius-input);\n cursor: pointer;\n }\n button.step:hover .label {\n color: var(--color-primary-text);\n }\n button.step:hover .marker {\n background: var(--color-primary-hover);\n }\n button.step:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 4px;\n }\n\n .visually-hidden {\n position: absolute;\n width: 1px;\n height: 1px;\n overflow: hidden;\n clip-path: inset(50%);\n white-space: nowrap;\n }\n `,\n ];\n\n /** The steps, in order. Set as a property. */\n @property({ attribute: false })\n steps: readonly KtStep[] = [];\n\n /** The id of the step the reader is on. */\n @property({ type: String, reflect: true })\n current = '';\n\n /** Accessible name of the list: what the flow is. */\n @property({ type: String })\n label = '';\n\n @property({ type: String, reflect: true })\n orientation: KtStepsOrientation = 'horizontal';\n\n /** Completed steps become buttons that go back to them. */\n @property({ type: Boolean, reflect: true })\n navigable = false;\n\n /** Steps completed by the last change of `current`, whose tick comes in. */\n private entering = new Set<number>();\n\n override willUpdate(changed: PropertyValues<this>): void {\n if (!changed.has('current') || !this.hasUpdated) return;\n const index = (id: string | undefined) => this.steps.findIndex((step) => step.id === id);\n const before = index(changed.get('current'));\n const now = index(this.current);\n this.entering = new Set();\n for (let step = Math.max(before, 0); step < now; step += 1) this.entering.add(step);\n }\n\n private stateOf(step: KtStep, index: number, currentIndex: number): StepState {\n if (step.error) return 'error';\n if (index < currentIndex) return 'complete';\n return index === currentIndex ? 'current' : 'upcoming';\n }\n\n private goTo(step: KtStep): void {\n this.current = step.id;\n emit(this, 'kt-change', { id: step.id });\n }\n\n override render(): TemplateResult {\n const s = strings();\n const currentIndex = this.steps.findIndex((step) => step.id === this.current);\n const said: Record<StepState, string> = {\n complete: s.stepComplete,\n current: s.stepCurrent,\n upcoming: s.stepUpcoming,\n error: s.stepError,\n };\n\n return html`<ol part=\"list\" aria-label=${this.label || nothing}>\n ${this.steps.map((step, index) => {\n const state = this.stateOf(step, index, currentIndex);\n const marker =\n state === 'complete'\n ? html`<kt-icon\n class=${this.entering.has(index) ? 'enter' : ''}\n name=\"check\"\n size=\"14\"\n ></kt-icon>`\n : state === 'error'\n ? html`<kt-icon name=\"circle-alert\" size=\"14\"></kt-icon>`\n : html`<span class=\"number\">${index + 1}</span>`;\n const body = html`<span part=\"marker\" class=\"marker\" aria-hidden=\"true\">${marker}</span>\n <span class=\"text\">\n <span class=\"label\">${step.label}</span>\n ${step.description ? html`<span class=\"description\">${step.description}</span>` : nothing}\n <span class=\"visually-hidden\">${said[state]}</span>\n </span>`;\n const back = this.navigable && index < currentIndex;\n\n return html`<li\n part=\"step\"\n data-state=${state}\n aria-current=${index === currentIndex ? 'step' : nothing}\n >\n ${\n back\n ? html`<button class=\"step\" type=\"button\" @click=${() => this.goTo(step)}>\n ${body}\n </button>`\n : html`<span class=\"step\">${body}</span>`\n }\n ${\n index < this.steps.length - 1\n ? html`<span part=\"connector\" class=\"connector\" aria-hidden=\"true\"\n ><span class=\"fill\"></span\n ></span>`\n : nothing\n }\n </li>`;\n })}\n </ol>`;\n }\n}\n\ndefineElement('kt-steps', KtSteps);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-steps': KtSteps;\n }\n}\n"],"names":["KtSteps","KtElement","css","changed","index","id","step","before","now","currentIndex","emit","s","strings","said","html","nothing","state","marker","body","back","__decorateClass","property","defineElement"],"mappings":"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"}

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

@@ -2,9 +2,9 @@ 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-T0VbIBNp.js";
+import { K as b, d as k } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 import { e as g } from "../../../chunks/events-r51msXNf.js";
-import { s as w } from "../../../chunks/index-TWJzttLX.js";
+import { s as w } from "../../../chunks/index-1ZFgagWW.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../core/kt-badge/kt-badge.js";
 var A = Object.defineProperty, d = (p, e, t, o) => {
@@ -137,7 +137,7 @@ class s extends b {
       .chevron {
         flex: none;
         color: var(--text-muted);
-        transition: transform var(--duration-fast) var(--ease-standard);
+        transition: transform var(--duration-fast) var(--easing-standard);
       }
       .chevron.open {

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

	@@ -1 +1 @@
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 { strings } from '#internal/strings';\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(--text-muted);\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-text);\n background-color: var(--color-primary-soft);\n }\n\n .active:hover {\n color: var(--color-primary-text);\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(--text-muted);\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: string \| undefined = undefined;\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 ?? strings().secondaryNavigation}>\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","strings","section","__decorateClass","property","state","defineElement"],"mappings":"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"}
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 { strings } from '#internal/strings';\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(--text-muted);\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-text);\n background-color: var(--color-primary-soft);\n }\n\n .active:hover {\n color: var(--color-primary-text);\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(--text-muted);\n transition: transform var(--duration-fast) var(--easing-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: string \| undefined = undefined;\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 ?? strings().secondaryNavigation}>\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","strings","section","__decorateClass","property","state","defineElement"],"mappings":";;;;;;;;;;;;;;AA0EO,MAAMA,UAA4BC,EAAU;AAAA,EAA5C,cAAA;AAAA,UAAA,GAAA,SAAA,GAuJL,KAAA,WAAoC,CAAA,GAIpC,KAAA,aAAa,IAGb,KAAA,QAA4B,QAI5B,KAAA,QAAQ,IAIR,KAAA,YAAY,IAIZ,KAAQ,YAAqC,CAAA;AAAA,EAAC;AAAA,EAzK9C,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;AAAA;AAAA;AAAA;AAAA;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,EAiJF;AAAA,EAwBQ,SAASC,GAA0B;AACzC,WAAOA,EAAK,WAAW,MAAS,KAAK,eAAe,MAAMA,EAAK,SAAS,KAAK;AAAA,EAC/E;AAAA;AAAA,EAGQ,YAAYA,GAA0B;AAC5C,WAAI,KAAK,SAASA,CAAI,IAAU,MACxBA,EAAK,YAAY,IAAI,KAAK,CAACC,MAAU,KAAK,YAAYA,CAAK,CAAC;AAAA,EACtE;AAAA,EAEQ,OAAOD,GAAiBE,GAAuB;AAGrD,WAAI,KAAK,YAAYF,CAAI,IAAU,KAC5B,KAAK,UAAUE,CAAI,KAAKF,EAAK,SAAS;AAAA,EAC/C;AAAA,EAEQ,SAASG,GAAmBH,GAAuB;AACzD,QAAIG,EAAM,WAAWA,EAAM,WAAWA,EAAM,YAAYA,EAAM,WAAW,EAAG;AAG5E,IADgBC,EAAK,MAAM,eAAe,EAAE,MAAAJ,GAAM,EACtC,oBAAkBG,EAAM,eAAA;AAAA,EACtC;AAAA,EAEQ,SAASH,GAAiBE,GAAoB;AACpD,UAAMG,IAAO,CAAC,KAAK,OAAOL,GAAME,CAAI;AACpC,SAAK,YAAY,EAAE,GAAG,KAAK,WAAW,CAACA,CAAI,GAAGG,EAAA,GAC9CD,EAAK,MAAM,aAAa,EAAE,MAAAJ,GAAM,MAAAK,GAAM;AAAA,EACxC;AAAA;AAAA,EAGQ,YAAYC,GAA6BC,GAAeC,GAAgC;AAC9F,WAAOC;AAAA,QACHH,EAAM,IAAI,CAACN,GAAMU,MAAU,KAAK,WAAWV,GAAMO,GAAO,GAAGC,CAAM,IAAIE,CAAK,EAAE,CAAC,CAAC;AAAA;AAAA,EAEpF;AAAA,EAEQ,WAAWV,GAAiBO,GAAeL,GAA8B;AAC/E,UAAMS,KAAUX,EAAK,YAAY,CAAA,GAAI,SAAS,GACxCY,IAAS,KAAK,SAASZ,CAAI,GAC3BK,IAAOM,KAAU,KAAK,OAAOX,GAAME,CAAI,GACvCW,IAAUC,EAAS;AAAA,MACvB,MAAM;AAAA,MACN,QAAAF;AAAA,MACA,QAAQD,KAAU,CAACC,KAAU,KAAK,YAAYZ,CAAI;AAAA,IAAA,CACnD,GACKe,IAAQC,EAAS,EAAE,WAAW,OAAOT,CAAK,GAAG,GAE7CU,IAAOR;AAAA,QACTT,EAAK,OAAOS,kBAAqBT,EAAK,IAAI,0BAA0BkB,CAAO;AAAA,4BACvDlB,EAAK,KAAK;AAAA,QAC9BA,EAAK,QAAQS,8BAAiCT,EAAK,KAAK,gBAAgBkB,CAAO;AAAA,QAE/EP,IACIF;AAAA,sBACUK,EAAS,EAAE,SAAS,IAAM,MAAAT,EAAA,CAAM,CAAC;AAAA;AAAA;AAAA,2BAI3Ca,CACN;AAAA;AAGF,WAAOT;AAAA,QAEHE,IACIF;AAAA;AAAA;AAAA,sBAGUI,CAAO;AAAA,sBACPE,CAAK;AAAA,8BACGV,IAAO,SAAS,OAAO;AAAA,8BACvBL,EAAK,WAAW,SAASkB,CAAO;AAAA,uBACvC,MAAM,KAAK,SAASlB,GAAME,CAAI,CAAC;AAAA;AAAA,gBAEtCe,CAAI;AAAA,yBAERR;AAAA;AAAA,sBAEUI,CAAO;AAAA,sBACPE,CAAK;AAAA,qBACNf,EAAK,QAAQ,GAAG;AAAA,6BACRY,IAAS,SAASM,CAAO;AAAA,8BACxBlB,EAAK,WAAW,SAASkB,CAAO;AAAA,uBACvC,CAACf,MAAsB,KAAK,SAASA,GAAOH,CAAI,CAAC;AAAA;AAAA,gBAExDiB,CAAI;AAAA,iBAEd;AAAA,QAEEN,KAAUN,IACNI,0BAA6B,KAAK,YAAYT,EAAK,UAAWO,IAAQ,GAAGL,CAAI,CAAC,WAC9EgB,CACN;AAAA;AAAA,EAEJ;AAAA,EAES,SAAyB;AAChC,WAAOT,+BAAkC,KAAK,SAASU,EAAA,EAAU,mBAAmB;AAAA,QAChF,KAAK,SAAS;AAAA,MACd,CAACC,GAASV,MACRD;AAAA,cACIW,EAAQ,QAAQX,mCAAsCW,EAAQ,KAAK,UAAUF,CAAO;AAAA,cACpF,KAAK,YAAYE,EAAQ,OAAO,GAAG,OAAOV,CAAK,CAAC,CAAC;AAAA;AAAA,IAAA,CAExD;AAAA;AAAA,EAEL;AACF;AAjIEW,EAAA;AAAA,EADCC,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GAtJnBzB,EAuJX,WAAA,UAAA;AAIAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,QAAQ,WAAW,eAAe;AAAA,GA1JzCzB,EA2JX,WAAA,YAAA;AAGAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA7JfzB,EA8JX,WAAA,OAAA;AAIAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAjK/BzB,EAkKX,WAAA,OAAA;AAIAwB,EAAA;AAAA,EADCC,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GArK/BzB,EAsKX,WAAA,WAAA;AAIQwB,EAAA;AAAA,EADPE,EAAA;AAAM,GAzKI1B,EA0KH,WAAA,WAAA;AAgHV2B,EAAc,0BAA0B3B,CAAmB;"}

package/dist/components/navigation/kt-tabs/kt-tabs.d.ts CHANGED Viewed

@@ -41,6 +41,7 @@ export interface KtTab {
 export declare class KtTabs extends KtElement {
     static styles: import("lit").CSSResultGroup[];
     private tabElements;
+    constructor();
     /** The tabs to show. A property: this is data. */
     tabs: readonly KtTab[];
     /** The selected tab's value. */

package/dist/components/navigation/kt-tabs/kt-tabs.js CHANGED Viewed

@@ -1,28 +1,33 @@
-import { css as u, html as l, nothing as p } from "lit";
-import { queryAll as h, property as n } from "lit/decorators.js";
-import { classMap as f } from "lit/directives/class-map.js";
-import { K as c, d as v } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { css as h, html as n, nothing as c } from "lit";
+import { queryAll as u, property as l } from "lit/decorators.js";
+import { classMap as v } from "lit/directives/class-map.js";
+import { K as b, d as f } from "../../../chunks/kt-element-DvWtPQ1Y.js";
+import { I as y } from "../../../chunks/indicator-B_Rs8F92.js";
 import { e as m } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 import "../../feedback/kt-skeleton/kt-skeleton.js";
-var x = Object.defineProperty, i = (d, e, t, r) => {
-  for (var s = void 0, a = d.length - 1, b; a >= 0; a--)
-    (b = d[a]) && (s = b(e, t, s) || s);
-  return s && x(e, t, s), s;
+var x = Object.defineProperty, s = (d, t, e, a) => {
+  for (var r = void 0, i = d.length - 1, p; i >= 0; i--)
+    (p = d[i]) && (r = p(t, e, r) || r);
+  return r && x(t, e, r), r;
 };
-class o extends c {
+class o extends b {
   constructor() {
-    super(...arguments), this.tabs = [], this.value = null, this.disabled = !1, this.loading = !1, this.label = "";
+    super(), this.tabs = [], this.value = null, this.disabled = !1, this.loading = !1, this.label = "", new y(this, {
+      container: () => this.renderRoot.querySelector(".tablist"),
+      selected: () => this.renderRoot.querySelector(".tab.selected")
+    });
   }
   static {
     this.styles = [
-      c.styles,
-      u`
+      b.styles,
+      h`
       :host {
         display: block;
       }
       .tablist {
+        position: relative;
         display: flex;
         gap: var(--gap-drag-drop);
         border-bottom: var(--border-width) solid var(--border-subtle);
@@ -63,9 +68,31 @@ class o extends c {
         color: var(--text-body);
       }
+      /* Underlined by the indicator below, not by its own border. */
       .tab.selected {
         color: var(--text-body);
-        border-bottom-color: var(--color-primary-base);
+      }
+      /* One underline that slides from tab to tab, placed by
+         IndicatorController before the first paint. */
+      .indicator {
+        position: absolute;
+        top: calc(var(--kt-indicator-y) + var(--kt-indicator-height) - 2px);
+        left: 0;
+        display: none;
+        width: var(--kt-indicator-width);
+        height: 2px;
+        background: var(--color-primary-base);
+        translate: var(--kt-indicator-x) 0;
+        pointer-events: none;
+      }
+      .tablist[data-indicator] .indicator {
+        display: block;
+      }
+      .tablist[data-indicator='ready'] .indicator {
+        transition:
+          translate var(--duration-normal) var(--easing-standard),
+          width var(--duration-normal) var(--easing-standard);
       }
       .tab:disabled {
@@ -88,87 +115,88 @@ class o extends c {
     ];
   }
   get selectedIndex() {
-    return this.tabs.findIndex((e) => e.value === this.value);
+    return this.tabs.findIndex((t) => t.value === this.value);
   }
-  select(e) {
-    e.disabled || this.value === e.value || (this.value = e.value, m(this, "kt-change", { value: e.value, tab: e }));
+  select(t) {
+    t.disabled || this.value === t.value || (this.value = t.value, m(this, "kt-change", { value: t.value, tab: t }));
   }
   /** Moves to the next selectable tab in `direction`, wrapping at both ends. */
-  step(e) {
-    const t = this.tabs.length;
-    if (t === 0) return;
-    const r = this.selectedIndex < 0 ? e === 1 ? -1 : 0 : this.selectedIndex;
-    for (let s = 1; s <= t; s += 1) {
-      const a = ((r + e * s) % t + t) % t;
-      if (!this.tabs[a]?.disabled) return a;
+  step(t) {
+    const e = this.tabs.length;
+    if (e === 0) return;
+    const a = this.selectedIndex < 0 ? t === 1 ? -1 : 0 : this.selectedIndex;
+    for (let r = 1; r <= e; r += 1) {
+      const i = ((a + t * r) % e + e) % e;
+      if (!this.tabs[i]?.disabled) return i;
     }
   }
-  onKeyDown(e) {
-    let t;
-    if (e.key === "ArrowRight") t = this.step(1);
-    else if (e.key === "ArrowLeft") t = this.step(-1);
-    else if (e.key === "Home") t = this.tabs.findIndex((a) => !a.disabled);
-    else if (e.key === "End")
-      t = this.tabs.length - 1 - [...this.tabs].reverse().findIndex((a) => !a.disabled);
+  onKeyDown(t) {
+    let e;
+    if (t.key === "ArrowRight") e = this.step(1);
+    else if (t.key === "ArrowLeft") e = this.step(-1);
+    else if (t.key === "Home") e = this.tabs.findIndex((i) => !i.disabled);
+    else if (t.key === "End")
+      e = this.tabs.length - 1 - [...this.tabs].reverse().findIndex((i) => !i.disabled);
     else return;
-    if (e.preventDefault(), t === void 0 || t < 0) return;
-    const r = this.tabs[t];
-    if (!r) return;
-    const s = t;
-    this.select(r), this.updateComplete.then(() => this.tabElements[s]?.focus());
+    if (t.preventDefault(), e === void 0 || e < 0) return;
+    const a = this.tabs[e];
+    if (!a) return;
+    const r = e;
+    this.select(a), this.updateComplete.then(() => this.tabElements[r]?.focus());
   }
   render() {
     if (this.loading)
-      return l`<div class="loading" aria-hidden="true">
-        ${[0, 1, 2].map(() => l`<kt-skeleton variant="rect" width="64px" height="22px"></kt-skeleton>`)}
+      return n`<div class="loading" aria-hidden="true">
+        ${[0, 1, 2].map(() => n`<kt-skeleton variant="rect" width="64px" height="22px"></kt-skeleton>`)}
       </div>`;
-    const e = this.selectedIndex, t = e >= 0 ? e : this.tabs.findIndex((r) => !r.disabled);
-    return l`<div
+    const t = this.selectedIndex, e = t >= 0 ? t : this.tabs.findIndex((a) => !a.disabled);
+    return n`<div
       part="base"
       class="tablist"
       role="tablist"
-      aria-label=${this.label || p}
+      aria-label=${this.label || c}
       @keydown=${this.onKeyDown}
     >
-      ${this.tabs.map((r, s) => {
-      const a = r.value === this.value;
-      return l`<button
+      ${this.tabs.map((a, r) => {
+      const i = a.value === this.value;
+      return n`<button
           part="tab"
           type="button"
           role="tab"
-          class=${f({ tab: !0, selected: a })}
-          aria-selected=${a ? "true" : "false"}
-          aria-controls=${r.panel ?? p}
-          tabindex=${s === t ? 0 : -1}
-          ?disabled=${this.disabled || r.disabled}
-          @click=${() => this.select(r)}
+          class=${v({ tab: !0, selected: i })}
+          aria-selected=${i ? "true" : "false"}
+          aria-controls=${a.panel ?? c}
+          tabindex=${r === e ? 0 : -1}
+          ?disabled=${this.disabled || a.disabled}
+          @click=${() => this.select(a)}
         >
-          ${r.icon ? l`<kt-icon name=${r.icon} size="16"></kt-icon>` : p}
-          ${r.label ?? String(r.value)}
+          ${a.icon ? n`<kt-icon name=${a.icon} size="16"></kt-icon>` : c}
+          ${a.label ?? String(a.value)}
         </button>`;
     })}
+      <span class="indicator" aria-hidden="true"></span>
     </div>`;
   }
 }
-i([
-  h(".tab")
+s([
+  u(".tab")
 ], o.prototype, "tabElements");
-i([
-  n({ attribute: !1 })
+s([
+  l({ attribute: !1 })
 ], o.prototype, "tabs");
-i([
-  n({ type: String })
+s([
+  l({ type: String })
 ], o.prototype, "value");
-i([
-  n({ type: Boolean, reflect: !0 })
+s([
+  l({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled");
-i([
-  n({ type: Boolean, reflect: !0 })
+s([
+  l({ type: Boolean, reflect: !0 })
 ], o.prototype, "loading");
-i([
-  n({ type: String })
+s([
+  l({ type: String })
 ], o.prototype, "label");
-v("kt-tabs", o);
+f("kt-tabs", o);
 export {
   o as KtTabs
 };

package/dist/components/navigation/kt-tabs/kt-tabs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"kt-tabs.js","sources":["../../../../src/components/navigation/kt-tabs/kt-tabs.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';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport interface KtTab {\n readonly value: string \| number;\n readonly label?: string;\n /** Lucide icon name, kebab-case. /\n readonly icon?: string;\n readonly disabled?: boolean;\n /* id of the element this tab controls, for `aria-controls`. /\n readonly panel?: string;\n}\n\n/\n An underlined tab bar.\n \n Against `<kt-segmented-control>`: a segmented control picks a value — a\n * date range, a unit — and sits inside a form or a toolbar. Tabs switch which\n * region of the page you are looking at, and read as part of the page\n * structure rather than as a control on it. The shapes say so: an inset track\n * with a raised pill, versus a rule with one segment underlined.\n \n Like the segmented control, this only manages selection. Swapping the panel\n * is the consumer's business.\n \n @element kt-tabs\n \n @csspart base - The tablist.\n * @csspart tab - One tab.\n \n @fires kt-change - A tab was selected. `detail: { value, tab }`.\n \n @example\n * ```js\n * tabs.tabs = [\n * { value: 'usage', label: 'Usage' },\n * { value: 'api', label: 'API', icon: 'code' },\n * ];\n * ```\n /\nexport class KtTabs extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .tablist {\n display: flex;\n gap: var(--gap-drag-drop);\n border-bottom: var(--border-width) solid var(--border-subtle);\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n .tablist::-webkit-scrollbar {\n display: none;\n }\n\n :host([disabled]) .tablist {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n / The -1px pulls the active underline over the container's rule so the\n two read as one line rather than two stacked ones. /\n margin-bottom: calc(var(--border-width) -1);\n padding: 10px 2px;\n color: var(--text-muted);\n font: var(--font-normal-medium);\n white-space: nowrap;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n transition:\n color var(--duration-instant),\n border-color var(--duration-instant);\n }\n\n .tab:hover:not(:disabled) {\n color: var(--text-body);\n }\n\n .tab.selected {\n color: var(--text-body);\n border-bottom-color: var(--color-primary-base);\n }\n\n .tab:disabled {\n color: var(--text-disabled);\n cursor: not-allowed;\n }\n\n .tab:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n border-radius: calc(4px * var(--radius-scale, 1));\n }\n\n .loading {\n display: flex;\n gap: var(--gap-drag-drop);\n padding: 10px 0;\n }\n `,\n ];\n\n @queryAll('.tab')\n private tabElements!: NodeListOf<HTMLButtonElement>;\n\n /** The tabs to show. A property: this is data. /\n @property({ attribute: false })\n tabs: readonly KtTab[] = [];\n\n /* The selected tab's value. /\n @property({ type: String })\n value: string \| number \| null = null;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Renders placeholder tabs instead of the real ones. /\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /* Accessible name for the tablist. /\n @property({ type: String })\n label = '';\n\n private get selectedIndex(): number {\n return this.tabs.findIndex((tab) => tab.value === this.value);\n }\n\n private select(tab: KtTab): void {\n if (tab.disabled \|\| this.value === tab.value) return;\n this.value = tab.value;\n emit(this, 'kt-change', { value: tab.value, tab });\n }\n\n /* Moves to the next selectable tab in `direction`, wrapping at both ends. /\n private step(direction: 1 \| -1): number \| undefined {\n const count = this.tabs.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.tabs[index]?.disabled) return index;\n }\n return undefined;\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n let target: number \| undefined;\n\n if (event.key === 'ArrowRight') target = this.step(1);\n else if (event.key === 'ArrowLeft') target = this.step(-1);\n else if (event.key === 'Home') target = this.tabs.findIndex((tab) => !tab.disabled);\n else if (event.key === 'End')\n target = this.tabs.length - 1 - [...this.tabs].reverse().findIndex((tab) => !tab.disabled);\n else return;\n\n event.preventDefault();\n if (target === undefined \|\| target < 0) return;\n\n const tab = this.tabs[target];\n if (!tab) return;\n\n const index = target;\n this.select(tab);\n void this.updateComplete.then(() => this.tabElements[index]?.focus());\n }\n\n override render(): TemplateResult {\n if (this.loading) {\n return html`<div class=\"loading\" aria-hidden=\"true\">\n ${[0, 1, 2].map(() => html`<kt-skeleton variant=\"rect\" width=\"64px\" height=\"22px\"></kt-skeleton>`)}\n </div>`;\n }\n\n const selectedIndex = this.selectedIndex;\n // One tab stop for the whole bar, as a tablist should have.\n const tabStop = selectedIndex >= 0 ? selectedIndex : this.tabs.findIndex((t) => !t.disabled);\n\n return html`<div\n part=\"base\"\n class=\"tablist\"\n role=\"tablist\"\n aria-label=${this.label \|\| nothing}\n @keydown=${this.onKeyDown}\n >\n ${this.tabs.map((tab, index) => {\n const selected = tab.value === this.value;\n\n return html`<button\n part=\"tab\"\n type=\"button\"\n role=\"tab\"\n class=${classMap({ tab: true, selected })}\n aria-selected=${selected ? 'true' : 'false'}\n aria-controls=${tab.panel ?? nothing}\n tabindex=${index === tabStop ? 0 : -1}\n ?disabled=${this.disabled \|\| tab.disabled}\n @click=${() => this.select(tab)}\n >\n ${tab.icon ? html`<kt-icon name=${tab.icon} size=\"16\"></kt-icon>` : nothing}\n ${tab.label ?? String(tab.value)}\n </button>`;\n })}\n </div>`;\n }\n}\n\ndefineElement('kt-tabs', KtTabs);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-tabs': KtTabs;\n }\n}\n"],"names":["KtTabs","KtElement","css","tab","emit","direction","count","from","offset","index","event","target","html","selectedIndex","tabStop","t","nothing","selected","classMap","__decorateClass","queryAll","property","defineElement"],"mappings":"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"}
1	+ {"version":3,"file":"kt-tabs.js","sources":["../../../../src/components/navigation/kt-tabs/kt-tabs.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 { IndicatorController } from '#internal/indicator';\nimport { emit } from '#internal/events';\nimport '../../core/kt-icon/kt-icon.js';\nimport '../../feedback/kt-skeleton/kt-skeleton.js';\n\nexport interface KtTab {\n readonly value: string \| number;\n readonly label?: string;\n /** Lucide icon name, kebab-case. /\n readonly icon?: string;\n readonly disabled?: boolean;\n /* id of the element this tab controls, for `aria-controls`. /\n readonly panel?: string;\n}\n\n/\n An underlined tab bar.\n \n Against `<kt-segmented-control>`: a segmented control picks a value — a\n * date range, a unit — and sits inside a form or a toolbar. Tabs switch which\n * region of the page you are looking at, and read as part of the page\n * structure rather than as a control on it. The shapes say so: an inset track\n * with a raised pill, versus a rule with one segment underlined.\n \n Like the segmented control, this only manages selection. Swapping the panel\n * is the consumer's business.\n \n @element kt-tabs\n \n @csspart base - The tablist.\n * @csspart tab - One tab.\n \n @fires kt-change - A tab was selected. `detail: { value, tab }`.\n \n @example\n * ```js\n * tabs.tabs = [\n * { value: 'usage', label: 'Usage' },\n * { value: 'api', label: 'API', icon: 'code' },\n * ];\n * ```\n /\nexport class KtTabs extends KtElement {\n static override styles = [\n KtElement.styles,\n css`\n :host {\n display: block;\n }\n\n .tablist {\n position: relative;\n display: flex;\n gap: var(--gap-drag-drop);\n border-bottom: var(--border-width) solid var(--border-subtle);\n overflow-x: auto;\n scrollbar-width: none;\n }\n\n .tablist::-webkit-scrollbar {\n display: none;\n }\n\n :host([disabled]) .tablist {\n opacity: 0.5;\n pointer-events: none;\n }\n\n .tab {\n display: inline-flex;\n align-items: center;\n gap: 6px;\n / The -1px pulls the active underline over the container's rule so the\n two read as one line rather than two stacked ones. /\n margin-bottom: calc(var(--border-width) -1);\n padding: 10px 2px;\n color: var(--text-muted);\n font: var(--font-normal-medium);\n white-space: nowrap;\n background: transparent;\n border: none;\n border-bottom: 2px solid transparent;\n cursor: pointer;\n transition:\n color var(--duration-instant),\n border-color var(--duration-instant);\n }\n\n .tab:hover:not(:disabled) {\n color: var(--text-body);\n }\n\n /* Underlined by the indicator below, not by its own border. /\n .tab.selected {\n color: var(--text-body);\n }\n\n / One underline that slides from tab to tab, placed by\n IndicatorController before the first paint. /\n .indicator {\n position: absolute;\n top: calc(var(--kt-indicator-y) + var(--kt-indicator-height) - 2px);\n left: 0;\n display: none;\n width: var(--kt-indicator-width);\n height: 2px;\n background: var(--color-primary-base);\n translate: var(--kt-indicator-x) 0;\n pointer-events: none;\n }\n .tablist[data-indicator] .indicator {\n display: block;\n }\n .tablist[data-indicator='ready'] .indicator {\n transition:\n translate var(--duration-normal) var(--easing-standard),\n width var(--duration-normal) var(--easing-standard);\n }\n\n .tab:disabled {\n color: var(--text-disabled);\n cursor: not-allowed;\n }\n\n .tab:focus-visible {\n outline: var(--outline-width) solid var(--color-primary-base);\n outline-offset: 2px;\n border-radius: calc(4px var(--radius-scale, 1));\n }\n\n .loading {\n display: flex;\n gap: var(--gap-drag-drop);\n padding: 10px 0;\n }\n `,\n ];\n\n @queryAll('.tab')\n private tabElements!: NodeListOf<HTMLButtonElement>;\n\n constructor() {\n super();\n new IndicatorController(this, {\n container: () => this.renderRoot.querySelector<HTMLElement>('.tablist'),\n selected: () => this.renderRoot.querySelector<HTMLElement>('.tab.selected'),\n });\n }\n\n /** The tabs to show. A property: this is data. /\n @property({ attribute: false })\n tabs: readonly KtTab[] = [];\n\n /* The selected tab's value. /\n @property({ type: String })\n value: string \| number \| null = null;\n\n @property({ type: Boolean, reflect: true })\n disabled = false;\n\n /* Renders placeholder tabs instead of the real ones. /\n @property({ type: Boolean, reflect: true })\n loading = false;\n\n /* Accessible name for the tablist. /\n @property({ type: String })\n label = '';\n\n private get selectedIndex(): number {\n return this.tabs.findIndex((tab) => tab.value === this.value);\n }\n\n private select(tab: KtTab): void {\n if (tab.disabled \|\| this.value === tab.value) return;\n this.value = tab.value;\n emit(this, 'kt-change', { value: tab.value, tab });\n }\n\n /* Moves to the next selectable tab in `direction`, wrapping at both ends. /\n private step(direction: 1 \| -1): number \| undefined {\n const count = this.tabs.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.tabs[index]?.disabled) return index;\n }\n return undefined;\n }\n\n private onKeyDown(event: KeyboardEvent): void {\n let target: number \| undefined;\n\n if (event.key === 'ArrowRight') target = this.step(1);\n else if (event.key === 'ArrowLeft') target = this.step(-1);\n else if (event.key === 'Home') target = this.tabs.findIndex((tab) => !tab.disabled);\n else if (event.key === 'End')\n target = this.tabs.length - 1 - [...this.tabs].reverse().findIndex((tab) => !tab.disabled);\n else return;\n\n event.preventDefault();\n if (target === undefined \|\| target < 0) return;\n\n const tab = this.tabs[target];\n if (!tab) return;\n\n const index = target;\n this.select(tab);\n void this.updateComplete.then(() => this.tabElements[index]?.focus());\n }\n\n override render(): TemplateResult {\n if (this.loading) {\n return html`<div class=\"loading\" aria-hidden=\"true\">\n ${[0, 1, 2].map(() => html`<kt-skeleton variant=\"rect\" width=\"64px\" height=\"22px\"></kt-skeleton>`)}\n </div>`;\n }\n\n const selectedIndex = this.selectedIndex;\n // One tab stop for the whole bar, as a tablist should have.\n const tabStop = selectedIndex >= 0 ? selectedIndex : this.tabs.findIndex((t) => !t.disabled);\n\n return html`<div\n part=\"base\"\n class=\"tablist\"\n role=\"tablist\"\n aria-label=${this.label \|\| nothing}\n @keydown=${this.onKeyDown}\n >\n ${this.tabs.map((tab, index) => {\n const selected = tab.value === this.value;\n\n return html`<button\n part=\"tab\"\n type=\"button\"\n role=\"tab\"\n class=${classMap({ tab: true, selected })}\n aria-selected=${selected ? 'true' : 'false'}\n aria-controls=${tab.panel ?? nothing}\n tabindex=${index === tabStop ? 0 : -1}\n ?disabled=${this.disabled \|\| tab.disabled}\n @click=${() => this.select(tab)}\n >\n ${tab.icon ? html`<kt-icon name=${tab.icon} size=\"16\"></kt-icon>` : nothing}\n ${tab.label ?? String(tab.value)}\n </button>`;\n })}\n <span class=\"indicator\" aria-hidden=\"true\"></span>\n </div>`;\n }\n}\n\ndefineElement('kt-tabs', KtTabs);\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'kt-tabs': KtTabs;\n }\n}\n"],"names":["KtTabs","KtElement","IndicatorController","css","tab","emit","direction","count","from","offset","index","event","target","html","selectedIndex","tabStop","t","nothing","selected","classMap","__decorateClass","queryAll","property","defineElement"],"mappings":";;;;;;;;;;;;;AA8CO,MAAMA,UAAeC,EAAU;AAAA,EAmGpC,cAAc;AACZ,UAAA,GASF,KAAA,OAAyB,CAAA,GAIzB,KAAA,QAAgC,MAGhC,KAAA,WAAW,IAIX,KAAA,UAAU,IAIV,KAAA,QAAQ,IAvBN,IAAIC,EAAoB,MAAM;AAAA,MAC5B,WAAW,MAAM,KAAK,WAAW,cAA2B,UAAU;AAAA,MACtE,UAAU,MAAM,KAAK,WAAW,cAA2B,eAAe;AAAA,IAAA,CAC3E;AAAA,EACH;AAAA,EAxGA,OAAA;AAAA,SAAgB,SAAS;AAAA,MACvBD,EAAU;AAAA,MACVE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;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,EA2FF;AAAA,EAgCA,IAAY,gBAAwB;AAClC,WAAO,KAAK,KAAK,UAAU,CAACC,MAAQA,EAAI,UAAU,KAAK,KAAK;AAAA,EAC9D;AAAA,EAEQ,OAAOA,GAAkB;AAC/B,IAAIA,EAAI,YAAY,KAAK,UAAUA,EAAI,UACvC,KAAK,QAAQA,EAAI,OACjBC,EAAK,MAAM,aAAa,EAAE,OAAOD,EAAI,OAAO,KAAAA,GAAK;AAAA,EACnD;AAAA;AAAA,EAGQ,KAAKE,GAAuC;AAClD,UAAMC,IAAQ,KAAK,KAAK;AACxB,QAAIA,MAAU,EAAG;AAEjB,UAAMC,IAAO,KAAK,gBAAgB,IAAKF,MAAc,IAAI,KAAK,IAAK,KAAK;AACxE,aAASG,IAAS,GAAGA,KAAUF,GAAOE,KAAU,GAAG;AACjD,YAAMC,MAAWF,IAAOF,IAAYG,KAAUF,IAASA,KAASA;AAChE,UAAI,CAAC,KAAK,KAAKG,CAAK,GAAG,SAAU,QAAOA;AAAA,IAC1C;AAAA,EAEF;AAAA,EAEQ,UAAUC,GAA4B;AAC5C,QAAIC;AAEJ,QAAID,EAAM,QAAQ,aAAc,CAAAC,IAAS,KAAK,KAAK,CAAC;AAAA,aAC3CD,EAAM,QAAQ,YAAa,CAAAC,IAAS,KAAK,KAAK,EAAE;AAAA,aAChDD,EAAM,QAAQ,OAAQ,CAAAC,IAAS,KAAK,KAAK,UAAU,CAACR,MAAQ,CAACA,EAAI,QAAQ;AAAA,aACzEO,EAAM,QAAQ;AACrB,MAAAC,IAAS,KAAK,KAAK,SAAS,IAAI,CAAC,GAAG,KAAK,IAAI,EAAE,QAAA,EAAU,UAAU,CAACR,MAAQ,CAACA,EAAI,QAAQ;AAAA,QACtF;AAGL,QADAO,EAAM,eAAA,GACFC,MAAW,UAAaA,IAAS,EAAG;AAExC,UAAMR,IAAM,KAAK,KAAKQ,CAAM;AAC5B,QAAI,CAACR,EAAK;AAEV,UAAMM,IAAQE;AACd,SAAK,OAAOR,CAAG,GACV,KAAK,eAAe,KAAK,MAAM,KAAK,YAAYM,CAAK,GAAG,OAAO;AAAA,EACtE;AAAA,EAES,SAAyB;AAChC,QAAI,KAAK;AACP,aAAOG;AAAA,UACH,CAAC,GAAG,GAAG,CAAC,EAAE,IAAI,MAAMA,wEAA2E,CAAC;AAAA;AAItG,UAAMC,IAAgB,KAAK,eAErBC,IAAUD,KAAiB,IAAIA,IAAgB,KAAK,KAAK,UAAU,CAACE,MAAM,CAACA,EAAE,QAAQ;AAE3F,WAAOH;AAAA;AAAA;AAAA;AAAA,mBAIQ,KAAK,SAASI,CAAO;AAAA,iBACvB,KAAK,SAAS;AAAA;AAAA,QAEvB,KAAK,KAAK,IAAI,CAACb,GAAKM,MAAU;AAC9B,YAAMQ,IAAWd,EAAI,UAAU,KAAK;AAEpC,aAAOS;AAAA;AAAA;AAAA;AAAA,kBAIGM,EAAS,EAAE,KAAK,IAAM,UAAAD,EAAA,CAAU,CAAC;AAAA,0BACzBA,IAAW,SAAS,OAAO;AAAA,0BAC3Bd,EAAI,SAASa,CAAO;AAAA,qBACzBP,MAAUK,IAAU,IAAI,EAAE;AAAA,sBACzB,KAAK,YAAYX,EAAI,QAAQ;AAAA,mBAChC,MAAM,KAAK,OAAOA,CAAG,CAAC;AAAA;AAAA,YAE7BA,EAAI,OAAOS,kBAAqBT,EAAI,IAAI,0BAA0Ba,CAAO;AAAA,YACzEb,EAAI,SAAS,OAAOA,EAAI,KAAK,CAAC;AAAA;AAAA,IAEpC,CAAC,CAAC;AAAA;AAAA;AAAA,EAGN;AACF;AAhHUgB,EAAA;AAAA,EADPC,EAAS,MAAM;AAAA,GAhGLrB,EAiGH,WAAA,aAAA;AAYRoB,EAAA;AAAA,EADCE,EAAS,EAAE,WAAW,GAAA,CAAO;AAAA,GA5GnBtB,EA6GX,WAAA,MAAA;AAIAoB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GAhHftB,EAiHX,WAAA,OAAA;AAGAoB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAnH/BtB,EAoHX,WAAA,UAAA;AAIAoB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,SAAS,SAAS,IAAM;AAAA,GAvH/BtB,EAwHX,WAAA,SAAA;AAIAoB,EAAA;AAAA,EADCE,EAAS,EAAE,MAAM,OAAA,CAAQ;AAAA,GA3HftB,EA4HX,WAAA,OAAA;AAuFFuB,EAAc,WAAWvB,CAAM;"}

package/dist/components/navigation/kt-toggle-button/kt-toggle-button.js CHANGED Viewed

@@ -1,7 +1,7 @@
 import { css as p, html as c, nothing as n } from "lit";
 import { property as o } from "lit/decorators.js";
 import { classMap as b } from "lit/directives/class-map.js";
-import { K as u, d as g } from "../../../chunks/kt-element-T0VbIBNp.js";
+import { K as u, d as g } from "../../../chunks/kt-element-DvWtPQ1Y.js";
 import { e as v } from "../../../chunks/events-r51msXNf.js";
 import "../../core/kt-icon/kt-icon.js";
 var m = Object.defineProperty, r = (l, e, i, s) => {

package/dist/components/navigation/kt-toggle-button-group/kt-toggle-button-group.js CHANGED Viewed

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

package/dist/components/navigation/kt-user-menu/kt-user-menu.d.ts ADDED Viewed

@@ -0,0 +1,86 @@
+import { type PropertyValues, type TemplateResult } from 'lit';
+import { KtElement } from '#internal/kt-element';
+import '../../core/kt-avatar/kt-avatar.js';
+import '../../core/kt-icon/kt-icon.js';
+export interface KtUserMenuItem {
+    readonly id: string;
+    readonly label: string;
+    /** A Lucide icon name, before the label. */
+    readonly icon?: string;
+    /** A rule above it, setting it apart from the items before. */
+    readonly separator?: boolean;
+    /** Drawn in the danger colour: sign out, delete the account. */
+    readonly danger?: boolean;
+    readonly disabled?: boolean;
+}
+/**
+ * The account menu at the end of an application's header: the person's
+ * avatar, and under it who is signed in and what they can do — their profile,
+ * their settings, switching workspace, signing out.
+ *
+ * A menu button, as the WAI-ARIA pattern describes: Enter, Space or the down
+ * arrow open it on the first item, the up arrow on the last; the arrows, Home
+ * and End move between items; Escape closes it and gives the focus back; Tab
+ * or a click outside close it too. The panel is drawn in the top layer, so no
+ * overflow clips it.
+ *
+ * @element kt-user-menu
+ *
+ * @slot - Under the items: a workspace switcher, a theme toggle, a plan badge.
+ *
+ * @csspart trigger - The button.
+ * @csspart panel - The menu's panel.
+ * @csspart item - One item.
+ *
+ * @fires kt-select - An item was chosen. `detail: { id, item }`.
+ * @fires kt-open - The menu opened.
+ * @fires kt-close - The menu closed.
+ *
+ * @example
+ * ```html
+ * <kt-user-menu name="Dana Whitfield" email="dana@northwind.io"></kt-user-menu>
+ * <script>
+ *   menu.items = [
+ *     { id: 'profile', label: 'Profile', icon: 'user' },
+ *     { id: 'signout', label: 'Sign out', separator: true, danger: true },
+ *   ];
+ * </script>
+ * ```
+ */
+export declare class KtUserMenu extends KtElement {
+    static styles: import("lit").CSSResultGroup[];
+    /** The person signed in: names the button, draws the avatar's initials. */
+    name: string;
+    /** Under the name in the panel. */
+    email: string;
+    /** A picture for the avatar. */
+    avatar: string;
+    /** The menu's items. Set as a property: `menu.items = [...]`. */
+    items: readonly KtUserMenuItem[];
+    /** Shows the name beside the avatar on the button. */
+    showName: boolean;
+    /** Whether the menu is open. */
+    open: boolean;
+    private trigger;
+    private readonly menuId;
+    private readonly floating;
+    disconnectedCallback(): void;
+    private listen;
+    private onDocumentPointerDown;
+    private get menuItems();
+    /** Opens the menu, focusing its first item, or its last with `from: 'end'`. */
+    show(from?: 'start' | 'end'): void;
+    /** Closes the menu; the focus goes back to the button unless told otherwise. */
+    hide(refocus?: boolean): void;
+    updated(changed: PropertyValues): void;
+    private choose;
+    private onTriggerKeyDown;
+    private onMenuKeyDown;
+    private renderItem;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'kt-user-menu': KtUserMenu;
+    }
+}