@sken-ds/primitives 0.6.2 → 0.6.3

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 (11) hide show
  1. package/dist/catalog-BqTy2wun-C9pZWAhC.js +188 -0
  2. package/dist/catalog-BqTy2wun-C9pZWAhC.js.map +1 -0
  3. package/dist/sken-layout.js +10 -8
  4. package/dist/sken-layout.js.map +1 -1
  5. package/dist/sken-nav-group.js +4 -4
  6. package/dist/sken-nav-group.js.map +1 -1
  7. package/dist/sken-nav-item.js +28 -34
  8. package/dist/sken-nav-item.js.map +1 -1
  9. package/package.json +2 -2
  10. package/dist/catalog-y40FMic1-DY2BFupW.js +0 -153
  11. package/dist/catalog-y40FMic1-DY2BFupW.js.map +0 -1
package/dist/sken-layout.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sken-layout.js","names":[],"sources":["../src/components/sken-layout.ts"],"sourcesContent":["// ── <sken-layout> — structural layout primitive ────────────────────\n\nimport type {\n SkenLayoutDensity,\n SkenLayoutRegionRole,\n SkenLayoutSidebarMode,\n SkenLayoutSidebarPosition,\n SkenLayoutSidebarSize,\n SkenLayoutTopbarMode,\n SkenLayoutVariant,\n SkenLayoutVariantRolesMap,\n} from '@sken-ds/contracts'\nimport { SkenLayoutVariantRoles } from '@sken-ds/contracts'\nimport { LitElement, css, html, unsafeCSS, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport './sken-layout-region.js'\n\nconst SIDEBAR_WIDTH: Record<SkenLayoutSidebarSize, string> = {\n sm: '12rem',\n md: '16rem',\n lg: '20rem',\n}\n\nconst REGION_BACKGROUND: Record<SkenLayoutRegionRole, string> = {\n topbar: 'var(--sken-card)',\n 'primary-nav': 'var(--sken-background)',\n sidebar: 'var(--sken-muted)',\n content: 'var(--sken-background)',\n footer: 'var(--sken-muted)',\n}\n\n@customElement('sken-layout')\nexport class SkenLayout extends LitElement {\n @property({ reflect: true }) variant: SkenLayoutVariant = 'header-content'\n @property({ attribute: 'topbar-mode', reflect: true }) topbarMode: SkenLayoutTopbarMode = 'fixed'\n @property({ attribute: 'sidebar-position', reflect: true })\n sidebarPosition: SkenLayoutSidebarPosition = 'start'\n @property({ attribute: 'sidebar-size', reflect: true }) sidebarSize: SkenLayoutSidebarSize = 'md'\n @property({ attribute: 'sidebar-mode', reflect: true })\n sidebarMode: SkenLayoutSidebarMode = 'static'\n @property({ reflect: true }) density: SkenLayoutDensity = 'none'\n\n #regionSlotObserver: MutationObserver | undefined = undefined\n\n get #activeRoles(): readonly SkenLayoutRegionRole[] {\n return (SkenLayoutVariantRoles as SkenLayoutVariantRolesMap)[this.variant]\n }\n\n #visibleRoles: readonly SkenLayoutRegionRole[] = this.#activeRoles\n\n #recomputeVisibleRoles(): void {\n const visible: SkenLayoutRegionRole[] = []\n for (const role of this.#activeRoles) {\n const filled = Array.from(this.children).some(\n (c) => c.getAttribute && c.getAttribute('slot') === role,\n )\n if (filled) visible.push(role)\n }\n if (\n visible.length === this.#visibleRoles.length &&\n visible.every((r, i) => r === this.#visibleRoles[i])\n ) {\n return\n }\n this.#visibleRoles = visible\n this.requestUpdate()\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.#syncRegionSlotAttributes()\n this.#regionSlotObserver = new MutationObserver(() => {\n this.#syncRegionSlotAttributes()\n this.#recomputeVisibleRoles()\n })\n this.#regionSlotObserver.observe(this, { childList: true, subtree: false })\n }\n\n protected override firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties)\n this.#syncRegionSlotAttributes()\n this.#recomputeVisibleRoles()\n this.#wireSlotChangeListeners()\n }\n\n protected override updated(_changedProperties: PropertyValues): void {\n super.updated(_changedProperties)\n if (_changedProperties.has('variant')) {\n this.#recomputeVisibleRoles()\n }\n }\n\n #slotChangeHandlers: Array<{ slot: HTMLSlotElement; handler: () => void }> = []\n\n #wireSlotChangeListeners(): void {\n this.#unwireSlotChangeListeners()\n const shadow = this.shadowRoot\n if (!shadow) return\n for (const slot of Array.from(shadow.querySelectorAll('slot'))) {\n const handler = () => this.#recomputeVisibleRoles()\n slot.addEventListener('slotchange', handler)\n this.#slotChangeHandlers.push({ slot, handler })\n }\n }\n\n #unwireSlotChangeListeners(): void {\n for (const { slot, handler } of this.#slotChangeHandlers) {\n slot.removeEventListener('slotchange', handler)\n }\n this.#slotChangeHandlers = []\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n this.#regionSlotObserver?.disconnect()\n this.#regionSlotObserver = undefined\n this.#unwireSlotChangeListeners()\n }\n\n #syncRegionSlotAttributes(): void {\n for (const child of Array.from(this.children)) {\n if (!(child instanceof HTMLElement)) continue\n if (child.tagName.toLowerCase() !== 'sken-layout-region') continue\n const role = child.getAttribute('name')\n if (!role) continue\n if (child.getAttribute('slot') === role) continue\n child.setAttribute('slot', role)\n }\n }\n\n static styles = css`\n /* ── The host ────────────────────────────────────────────────\n The host owns the page-level grid. The topbar / primary-nav\n / footer sit in their own rows; the body is a sub-grid that\n holds the sidebar (when present) and the content. */\n :host {\n display: block;\n min-block-size: 100dvh;\n background: var(--sken-background, Canvas);\n color: var(--sken-foreground, CanvasText);\n font-family: var(--sken-family-sans, system-ui, sans-serif);\n }\n\n .grid {\n display: grid;\n block-size: 100%;\n grid-template-columns: 1fr;\n grid-template-areas: var(--sken-layout-grid-areas, 'topbar' 'body');\n grid-template-rows: var(--sken-layout-grid-rows, 'auto 1fr');\n }\n\n /* ── Per-cell grid items ─────────────────────────────────────\n Each named slot sits inside a wrapper element that is the\n actual grid item. The wrapper's class matches the role\n (topbar, primary-nav, body, footer). The variant rules\n below assign the right 'grid-area' to each role. The\n 'display: contents' <sken-layout-region> is projected\n through the named <slot> and inherits the wrapper's\n background, border, and padding. */\n .topbar {\n grid-area: topbar;\n box-sizing: border-box;\n position: sticky;\n top: 0;\n z-index: 1;\n block-size: var(--sken-layout-topbar-height);\n background: var(\n --sken-layout-region-topbar-background,\n ${unsafeCSS(REGION_BACKGROUND.topbar)}\n );\n padding-block: var(--sken-layout-region-topbar-padding-block, 0);\n padding-inline: var(--sken-layout-region-topbar-padding-inline, 0);\n border-bottom: 1px solid var(--sken-border);\n }\n .primary-nav {\n grid-area: primary-nav;\n background: var(\n --sken-layout-region-primary-nav-background,\n ${unsafeCSS(REGION_BACKGROUND['primary-nav'])}\n );\n padding-block: var(--sken-layout-region-primary-nav-padding-block, 0);\n padding-inline: var(--sken-layout-region-primary-nav-padding-inline, 0);\n border-bottom: 1px solid var(--sken-border);\n }\n .body {\n grid-area: body;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: 'content';\n min-block-size: 0;\n }\n .body.with-sidebar {\n grid-template-columns: var(--sken-layout-sidebar-width, 16rem) 1fr;\n grid-template-areas: 'sidebar content';\n }\n .body.with-sidebar.sidebar-end {\n grid-template-columns: 1fr var(--sken-layout-sidebar-width, 16rem);\n grid-template-areas: 'content sidebar';\n }\n .sidebar {\n grid-area: sidebar;\n box-sizing: border-box;\n min-block-size: 0;\n background: var(\n --sken-layout-region-sidebar-background,\n ${unsafeCSS(REGION_BACKGROUND.sidebar)}\n );\n padding-block: var(--sken-layout-region-sidebar-padding-block, 0);\n padding-inline: var(--sken-layout-region-sidebar-padding-inline, 0);\n border-inline-end: 1px solid var(--sken-border);\n }\n :host([sidebar-mode='sticky']) .sidebar {\n align-self: start;\n position: sticky;\n top: 0;\n block-size: 100dvh;\n overflow-y: auto;\n }\n :host([sidebar-mode='sticky']) .grid:has(.topbar) .sidebar {\n top: var(--sken-layout-topbar-height);\n block-size: calc(100dvh - var(--sken-layout-topbar-height));\n }\n .content {\n min-block-size: 0;\n background: var(\n --sken-layout-region-content-background,\n ${unsafeCSS(REGION_BACKGROUND.content)}\n );\n padding-block: var(--sken-layout-region-content-padding-block, 0);\n padding-inline: var(--sken-layout-region-content-padding-inline, 0);\n }\n .footer {\n grid-area: footer;\n background: var(\n --sken-layout-region-footer-background,\n ${unsafeCSS(REGION_BACKGROUND.footer)}\n );\n padding-block: var(--sken-layout-region-footer-padding-block, 0);\n padding-inline: var(--sken-layout-region-footer-padding-inline, 0);\n border-top: 1px solid var(--sken-border);\n }\n\n /* ── Density: comfortable ─────────────────────────────────────\n When density=comfortable, the layout applies the Sken\n default rhythm: 8/16px on chrome cells, 16/24px on the\n content area, 12/16px on the footer. The values come\n from the spacing scale (--sken-2, --sken-3, --sken-4,\n --sken-6) so a single token change ripples through\n every cell. A consumer override on any\n --sken-layout-region-{role}-padding-{block|inline}\n always wins over the density preset. */\n :host([density='comfortable']) .topbar,\n :host([density='comfortable']) .primary-nav,\n :host([density='comfortable']) .content,\n :host([density='comfortable']) .sidebar,\n :host([density='comfortable']) .footer {\n --sken-layout-region-topbar-padding-block: var(--sken-2);\n --sken-layout-region-topbar-padding-inline: var(--sken-4);\n --sken-layout-region-primary-nav-padding-block: var(--sken-2);\n --sken-layout-region-primary-nav-padding-inline: var(--sken-4);\n --sken-layout-region-sidebar-padding-block: var(--sken-4);\n --sken-layout-region-sidebar-padding-inline: var(--sken-4);\n --sken-layout-region-content-padding-block: var(--sken-6);\n --sken-layout-region-content-padding-inline: var(--sken-6);\n --sken-layout-region-footer-padding-block: var(--sken-3);\n --sken-layout-region-footer-padding-inline: var(--sken-4);\n }\n\n /* ── Density: compact ────────────────────────────────────────\n When density=compact, every per-cell padding is halved\n from the comfortable value. We use calc(var(--sken-N) *\n 0.5) instead of hardcoded half-values so a future\n token change automatically cascades. As with\n comfortable, a consumer override on any\n --sken-layout-region-{role}-padding-{block|inline}\n always wins. */\n :host([density='compact']) .topbar,\n :host([density='compact']) .primary-nav,\n :host([density='compact']) .content,\n :host([density='compact']) .sidebar,\n :host([density='compact']) .footer {\n --sken-layout-region-topbar-padding-block: calc(var(--sken-2) * 0.5);\n --sken-layout-region-topbar-padding-inline: calc(var(--sken-4) * 0.5);\n --sken-layout-region-primary-nav-padding-block: calc(var(--sken-2) * 0.5);\n --sken-layout-region-primary-nav-padding-inline: calc(var(--sken-4) * 0.5);\n --sken-layout-region-sidebar-padding-block: calc(var(--sken-4) * 0.5);\n --sken-layout-region-sidebar-padding-inline: calc(var(--sken-4) * 0.5);\n --sken-layout-region-content-padding-block: calc(var(--sken-6) * 0.5);\n --sken-layout-region-content-padding-inline: calc(var(--sken-6) * 0.5);\n --sken-layout-region-footer-padding-block: calc(var(--sken-3) * 0.5);\n --sken-layout-region-footer-padding-inline: calc(var(--sken-4) * 0.5);\n }\n\n /* ── Grid templates per variant ───────────────────────────────\n The grid template is set per-render as an inline style\n (via --sken-layout-grid-areas and\n --sken-layout-grid-rows) based on the visible roles (the\n intersection of the active variant and the roles whose\n slot has content). See render() for the computation.\n The default values on the .grid selector above cover\n header-content (the default variant) when no inline\n style is set (e.g. before the first render completes). */\n\n /* ── Topbar mode ──────────────────────────────────────────────\n 'fixed': the topbar is position: sticky and stays pinned\n at the top while the page scrolls under it. This is the\n default for admin consoles.\n 'auto': the topbar scrolls away with the page (marketing,\n landing). */\n :host([topbar-mode='auto']) .topbar {\n position: static;\n }\n :host([sidebar-mode='sticky'][topbar-mode='auto']) .sidebar {\n position: static;\n block-size: auto;\n overflow-y: visible;\n }\n\n /* ── Sidebar position ─────────────────────────────────────────\n When the sidebar sits on the inline-end side, the border\n moves to the inline-start side. The default rule above\n already paints the border on the inline-end; here we\n swap it. */\n :host([sidebar-position='end']) .sidebar {\n border-inline-end: none;\n border-inline-start: 1px solid var(--sken-border);\n }\n\n /* ── Sidebar width override ─────────────────────────────────── */\n :host([sidebar-size='sm']) {\n --sken-layout-sidebar-width: ${unsafeCSS(SIDEBAR_WIDTH.sm)};\n }\n :host([sidebar-size='md']) {\n --sken-layout-sidebar-width: ${unsafeCSS(SIDEBAR_WIDTH.md)};\n }\n :host([sidebar-size='lg']) {\n --sken-layout-sidebar-width: ${unsafeCSS(SIDEBAR_WIDTH.lg)};\n }\n `\n\n override render() {\n const visibleRoles = this.#visibleRoles\n const hasContent = visibleRoles.includes('content')\n const hasSidebar = visibleRoles.includes('sidebar')\n\n // ── Compute the host's grid template ───────────────────────\n const gridTemplateAreas = visibleRoles\n .map((r) => (r === 'content' ? '\"body\"' : `\"${r}\"`))\n .join('\\n')\n\n const gridTemplateRows = visibleRoles.map((r) => (r === 'content' ? '1fr' : 'auto')).join(' ')\n\n const bodyClasses = [\n 'body',\n hasSidebar ? 'with-sidebar' : '',\n hasSidebar && this.sidebarPosition === 'end' ? 'sidebar-end' : '',\n ]\n .filter(Boolean)\n .join(' ')\n\n const hostStyle =\n `--sken-layout-grid-areas: ${gridTemplateAreas}; ` +\n `--sken-layout-grid-rows: ${gridTemplateRows};`\n\n return html`\n <div class=\"grid\" style=${hostStyle} part=\"grid\">\n ${\n visibleRoles.includes('topbar')\n ? html`<div class=\"topbar\" part=\"topbar\">\n <slot name=\"topbar\"></slot>\n </div>`\n : ''\n }\n ${\n visibleRoles.includes('primary-nav')\n ? html`<div class=\"primary-nav\" part=\"primary-nav\">\n <slot name=\"primary-nav\"></slot>\n </div>`\n : ''\n }\n ${\n hasContent\n ? html`<div class=${bodyClasses} part=\"body\">\n ${\n hasSidebar\n ? html`<div class=\"sidebar\" part=\"sidebar\">\n <slot name=\"sidebar\"></slot>\n </div>`\n : ''\n }\n <div class=\"content\" part=\"content\">\n <slot name=\"content\"></slot>\n </div>\n </div>`\n : ''\n }\n ${\n visibleRoles.includes('footer')\n ? html`<div class=\"footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>`\n : ''\n }\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-layout': SkenLayout\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"sken-layout.js","names":[],"sources":["../src/components/sken-layout.ts"],"sourcesContent":["// ── <sken-layout> — structural layout primitive ────────────────────\n\nimport type {\n SkenLayoutDensity,\n SkenLayoutRegionRole,\n SkenLayoutSidebarMode,\n SkenLayoutSidebarPosition,\n SkenLayoutSidebarSize,\n SkenLayoutTopbarMode,\n SkenLayoutVariant,\n SkenLayoutVariantRolesMap,\n} from '@sken-ds/contracts'\nimport { SkenLayoutVariantRoles } from '@sken-ds/contracts'\nimport { LitElement, css, html, unsafeCSS, type PropertyValues } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport './sken-layout-region.js'\n\nconst SIDEBAR_WIDTH: Record<SkenLayoutSidebarSize, string> = {\n sm: '12rem',\n md: '16rem',\n lg: '20rem',\n}\n\nconst REGION_BACKGROUND: Record<SkenLayoutRegionRole, string> = {\n topbar: 'var(--sken-card)',\n 'primary-nav': 'var(--sken-background)',\n sidebar: 'var(--sken-muted)',\n content: 'var(--sken-background)',\n footer: 'var(--sken-muted)',\n}\n\n@customElement('sken-layout')\nexport class SkenLayout extends LitElement {\n @property({ reflect: true }) variant: SkenLayoutVariant = 'header-content'\n @property({ attribute: 'topbar-mode', reflect: true }) topbarMode: SkenLayoutTopbarMode = 'fixed'\n @property({ attribute: 'sidebar-position', reflect: true })\n sidebarPosition: SkenLayoutSidebarPosition = 'start'\n @property({ attribute: 'sidebar-size', reflect: true }) sidebarSize: SkenLayoutSidebarSize = 'md'\n @property({ attribute: 'sidebar-mode', reflect: true })\n sidebarMode: SkenLayoutSidebarMode = 'static'\n @property({ reflect: true }) density: SkenLayoutDensity = 'none'\n\n #regionSlotObserver: MutationObserver | undefined = undefined\n\n get #activeRoles(): readonly SkenLayoutRegionRole[] {\n return (SkenLayoutVariantRoles as SkenLayoutVariantRolesMap)[this.variant]\n }\n\n #visibleRoles: readonly SkenLayoutRegionRole[] = this.#activeRoles\n\n #recomputeVisibleRoles(): boolean {\n const visible: SkenLayoutRegionRole[] = []\n for (const role of this.#activeRoles) {\n const filled = Array.from(this.children).some(\n (c) => c.getAttribute && c.getAttribute('slot') === role,\n )\n if (filled) visible.push(role)\n }\n if (\n visible.length === this.#visibleRoles.length &&\n visible.every((r, i) => r === this.#visibleRoles[i])\n ) {\n return false\n }\n this.#visibleRoles = visible\n return true\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n this.#syncRegionSlotAttributes()\n this.#regionSlotObserver = new MutationObserver(() => {\n this.#syncRegionSlotAttributes()\n if (this.#recomputeVisibleRoles()) this.requestUpdate()\n })\n this.#regionSlotObserver.observe(this, { childList: true, subtree: false })\n }\n\n protected override willUpdate(_changedProperties: PropertyValues): void {\n if (_changedProperties.has('variant')) {\n this.#recomputeVisibleRoles()\n }\n }\n\n protected override firstUpdated(_changedProperties: PropertyValues): void {\n super.firstUpdated(_changedProperties)\n this.#syncRegionSlotAttributes()\n if (this.#recomputeVisibleRoles()) this.requestUpdate()\n this.#wireSlotChangeListeners()\n }\n\n #slotChangeHandlers: Array<{ slot: HTMLSlotElement; handler: () => void }> = []\n\n #wireSlotChangeListeners(): void {\n this.#unwireSlotChangeListeners()\n const shadow = this.shadowRoot\n if (!shadow) return\n for (const slot of Array.from(shadow.querySelectorAll('slot'))) {\n const handler = () => {\n if (this.#recomputeVisibleRoles()) this.requestUpdate()\n }\n slot.addEventListener('slotchange', handler)\n this.#slotChangeHandlers.push({ slot, handler })\n }\n }\n\n #unwireSlotChangeListeners(): void {\n for (const { slot, handler } of this.#slotChangeHandlers) {\n slot.removeEventListener('slotchange', handler)\n }\n this.#slotChangeHandlers = []\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n this.#regionSlotObserver?.disconnect()\n this.#regionSlotObserver = undefined\n this.#unwireSlotChangeListeners()\n }\n\n #syncRegionSlotAttributes(): void {\n for (const child of Array.from(this.children)) {\n if (!(child instanceof HTMLElement)) continue\n if (child.tagName.toLowerCase() !== 'sken-layout-region') continue\n const role = child.getAttribute('name')\n if (!role) continue\n if (child.getAttribute('slot') === role) continue\n child.setAttribute('slot', role)\n }\n }\n\n static styles = css`\n /* ── The host ────────────────────────────────────────────────\n The host owns the page-level grid. The topbar / primary-nav\n / footer sit in their own rows; the body is a sub-grid that\n holds the sidebar (when present) and the content. */\n :host {\n display: block;\n block-size: 100dvh;\n background: var(--sken-background, Canvas);\n color: var(--sken-foreground, CanvasText);\n font-family: var(--sken-family-sans, system-ui, sans-serif);\n }\n\n .grid {\n display: grid;\n block-size: 100%;\n grid-template-columns: 1fr;\n grid-template-areas: var(--sken-layout-grid-areas, 'topbar' 'body');\n grid-template-rows: var(--sken-layout-grid-rows, 'auto 1fr');\n }\n\n /* ── Per-cell grid items ─────────────────────────────────────\n Each named slot sits inside a wrapper element that is the\n actual grid item. The wrapper's class matches the role\n (topbar, primary-nav, body, footer). The variant rules\n below assign the right 'grid-area' to each role. The\n 'display: contents' <sken-layout-region> is projected\n through the named <slot> and inherits the wrapper's\n background, border, and padding. */\n .topbar {\n grid-area: topbar;\n box-sizing: border-box;\n position: sticky;\n top: 0;\n z-index: 1;\n block-size: var(--sken-layout-topbar-height);\n background: var(\n --sken-layout-region-topbar-background,\n ${unsafeCSS(REGION_BACKGROUND.topbar)}\n );\n padding-block: var(--sken-layout-region-topbar-padding-block, 0);\n padding-inline: var(--sken-layout-region-topbar-padding-inline, 0);\n border-bottom: 1px solid var(--sken-border);\n }\n .primary-nav {\n grid-area: primary-nav;\n background: var(\n --sken-layout-region-primary-nav-background,\n ${unsafeCSS(REGION_BACKGROUND['primary-nav'])}\n );\n padding-block: var(--sken-layout-region-primary-nav-padding-block, 0);\n padding-inline: var(--sken-layout-region-primary-nav-padding-inline, 0);\n border-bottom: 1px solid var(--sken-border);\n }\n .body {\n grid-area: body;\n display: grid;\n grid-template-columns: 1fr;\n grid-template-areas: 'content';\n min-block-size: 0;\n }\n .body.with-sidebar {\n grid-template-columns: var(--sken-layout-sidebar-width, 16rem) 1fr;\n grid-template-areas: 'sidebar content';\n }\n .body.with-sidebar.sidebar-end {\n grid-template-columns: 1fr var(--sken-layout-sidebar-width, 16rem);\n grid-template-areas: 'content sidebar';\n }\n .sidebar {\n grid-area: sidebar;\n box-sizing: border-box;\n min-block-size: 0;\n background: var(\n --sken-layout-region-sidebar-background,\n ${unsafeCSS(REGION_BACKGROUND.sidebar)}\n );\n padding-block: var(--sken-layout-region-sidebar-padding-block, 0);\n padding-inline: var(--sken-layout-region-sidebar-padding-inline, 0);\n border-inline-end: 1px solid var(--sken-border);\n }\n :host([sidebar-mode='sticky']) .sidebar {\n align-self: start;\n position: sticky;\n top: 0;\n block-size: 100dvh;\n overflow-y: auto;\n }\n :host([sidebar-mode='sticky']) .grid:has(.topbar) .sidebar {\n top: var(--sken-layout-topbar-height);\n block-size: calc(100dvh - var(--sken-layout-topbar-height));\n }\n .content {\n min-block-size: 0;\n background: var(\n --sken-layout-region-content-background,\n ${unsafeCSS(REGION_BACKGROUND.content)}\n );\n padding-block: var(--sken-layout-region-content-padding-block, 0);\n padding-inline: var(--sken-layout-region-content-padding-inline, 0);\n }\n .footer {\n grid-area: footer;\n background: var(\n --sken-layout-region-footer-background,\n ${unsafeCSS(REGION_BACKGROUND.footer)}\n );\n padding-block: var(--sken-layout-region-footer-padding-block, 0);\n padding-inline: var(--sken-layout-region-footer-padding-inline, 0);\n border-top: 1px solid var(--sken-border);\n }\n\n /* ── Density: comfortable ─────────────────────────────────────\n When density=comfortable, the layout applies the Sken\n default rhythm: 8/16px on chrome cells, 16/24px on the\n content area, 12/16px on the footer. The values come\n from the spacing scale (--sken-2, --sken-3, --sken-4,\n --sken-6) so a single token change ripples through\n every cell. A consumer override on any\n --sken-layout-region-{role}-padding-{block|inline}\n always wins over the density preset. */\n :host([density='comfortable']) .topbar,\n :host([density='comfortable']) .primary-nav,\n :host([density='comfortable']) .content,\n :host([density='comfortable']) .sidebar,\n :host([density='comfortable']) .footer {\n --sken-layout-region-topbar-padding-block: var(--sken-2);\n --sken-layout-region-topbar-padding-inline: var(--sken-4);\n --sken-layout-region-primary-nav-padding-block: var(--sken-2);\n --sken-layout-region-primary-nav-padding-inline: var(--sken-4);\n --sken-layout-region-sidebar-padding-block: var(--sken-4);\n --sken-layout-region-sidebar-padding-inline: var(--sken-4);\n --sken-layout-region-content-padding-block: var(--sken-6);\n --sken-layout-region-content-padding-inline: var(--sken-6);\n --sken-layout-region-footer-padding-block: var(--sken-3);\n --sken-layout-region-footer-padding-inline: var(--sken-4);\n }\n\n /* ── Density: compact ────────────────────────────────────────\n When density=compact, every per-cell padding is halved\n from the comfortable value. We use calc(var(--sken-N) *\n 0.5) instead of hardcoded half-values so a future\n token change automatically cascades. As with\n comfortable, a consumer override on any\n --sken-layout-region-{role}-padding-{block|inline}\n always wins. */\n :host([density='compact']) .topbar,\n :host([density='compact']) .primary-nav,\n :host([density='compact']) .content,\n :host([density='compact']) .sidebar,\n :host([density='compact']) .footer {\n --sken-layout-region-topbar-padding-block: calc(var(--sken-2) * 0.5);\n --sken-layout-region-topbar-padding-inline: calc(var(--sken-4) * 0.5);\n --sken-layout-region-primary-nav-padding-block: calc(var(--sken-2) * 0.5);\n --sken-layout-region-primary-nav-padding-inline: calc(var(--sken-4) * 0.5);\n --sken-layout-region-sidebar-padding-block: calc(var(--sken-4) * 0.5);\n --sken-layout-region-sidebar-padding-inline: calc(var(--sken-4) * 0.5);\n --sken-layout-region-content-padding-block: calc(var(--sken-6) * 0.5);\n --sken-layout-region-content-padding-inline: calc(var(--sken-6) * 0.5);\n --sken-layout-region-footer-padding-block: calc(var(--sken-3) * 0.5);\n --sken-layout-region-footer-padding-inline: calc(var(--sken-4) * 0.5);\n }\n\n /* ── Grid templates per variant ───────────────────────────────\n The grid template is set per-render as an inline style\n (via --sken-layout-grid-areas and\n --sken-layout-grid-rows) based on the visible roles (the\n intersection of the active variant and the roles whose\n slot has content). See render() for the computation.\n The default values on the .grid selector above cover\n header-content (the default variant) when no inline\n style is set (e.g. before the first render completes). */\n\n /* ── Topbar mode ──────────────────────────────────────────────\n 'fixed': the topbar is position: sticky and stays pinned\n at the top while the page scrolls under it. This is the\n default for admin consoles.\n 'auto': the topbar scrolls away with the page (marketing,\n landing). */\n :host([topbar-mode='auto']) .topbar {\n position: static;\n }\n :host([sidebar-mode='sticky'][topbar-mode='auto']) .sidebar {\n position: static;\n block-size: auto;\n overflow-y: visible;\n }\n\n /* ── Sidebar position ─────────────────────────────────────────\n When the sidebar sits on the inline-end side, the border\n moves to the inline-start side. The default rule above\n already paints the border on the inline-end; here we\n swap it. */\n :host([sidebar-position='end']) .sidebar {\n border-inline-end: none;\n border-inline-start: 1px solid var(--sken-border);\n }\n\n /* ── Sidebar width override ─────────────────────────────────── */\n :host([sidebar-size='sm']) {\n --sken-layout-sidebar-width: ${unsafeCSS(SIDEBAR_WIDTH.sm)};\n }\n :host([sidebar-size='md']) {\n --sken-layout-sidebar-width: ${unsafeCSS(SIDEBAR_WIDTH.md)};\n }\n :host([sidebar-size='lg']) {\n --sken-layout-sidebar-width: ${unsafeCSS(SIDEBAR_WIDTH.lg)};\n }\n `\n\n override render() {\n const visibleRoles = this.#visibleRoles\n const hasContent = visibleRoles.includes('content')\n const hasSidebar = visibleRoles.includes('sidebar')\n\n // ── Compute the host's grid template ───────────────────────\n const gridTemplateAreas = visibleRoles\n .map((r) => (r === 'content' ? '\"body\"' : `\"${r}\"`))\n .join('\\n')\n\n const gridTemplateRows = visibleRoles.map((r) => (r === 'content' ? '1fr' : 'auto')).join(' ')\n\n const bodyClasses = [\n 'body',\n hasSidebar ? 'with-sidebar' : '',\n hasSidebar && this.sidebarPosition === 'end' ? 'sidebar-end' : '',\n ]\n .filter(Boolean)\n .join(' ')\n\n const hostStyle =\n `--sken-layout-grid-areas: ${gridTemplateAreas}; ` +\n `--sken-layout-grid-rows: ${gridTemplateRows};`\n\n return html`\n <div class=\"grid\" style=${hostStyle} part=\"grid\">\n ${\n visibleRoles.includes('topbar')\n ? html`<div class=\"topbar\" part=\"topbar\">\n <slot name=\"topbar\"></slot>\n </div>`\n : ''\n }\n ${\n visibleRoles.includes('primary-nav')\n ? html`<div class=\"primary-nav\" part=\"primary-nav\">\n <slot name=\"primary-nav\"></slot>\n </div>`\n : ''\n }\n ${\n hasContent\n ? html`<div class=${bodyClasses} part=\"body\">\n ${\n hasSidebar\n ? html`<div class=\"sidebar\" part=\"sidebar\">\n <slot name=\"sidebar\"></slot>\n </div>`\n : ''\n }\n <div class=\"content\" part=\"content\">\n <slot name=\"content\"></slot>\n </div>\n </div>`\n : ''\n }\n ${\n visibleRoles.includes('footer')\n ? html`<div class=\"footer\" part=\"footer\">\n <slot name=\"footer\"></slot>\n </div>`\n : ''\n }\n </div>\n `\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-layout': SkenLayout\n }\n}\n"],"mappings":"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"}
package/dist/sken-nav-group.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { t as e } from "./decorate-C1e2sg49.js";
2
- import { n as t, t as n } from "./catalog-y40FMic1-DY2BFupW.js";
2
+ import { n as t, t as n } from "./catalog-BqTy2wun-C9pZWAhC.js";
3
3
  import { LitElement as r, css as i, html as a, nothing as o } from "lit";
4
4
  import { customElement as s, property as c, query as l } from "lit/decorators.js";
5
5
  //#region src/components/sken-nav-group.ts
@@ -76,7 +76,7 @@ var u = class extends r {
76
76
  }
77
77
 
78
78
  :host([data-child-current]) summary {
79
- background: var(--sken-muted, #f6f7f9);
79
+ background: var(--sken-sidebar-accent, #edeff3);
80
80
  color: var(--sken-primary, #2e6fc6);
81
81
  font-weight: var(--sken-weight-semibold, 600);
82
82
  }
@@ -284,8 +284,8 @@ var u = class extends r {
284
284
  #d;
285
285
  #f() {
286
286
  if (!this.iconName) return o;
287
- if (!n(this.iconName)) return globalThis.console?.warn(`[sken-nav-group] icon "${this.iconName}" not in Sken catalog`), a`<span class="icon" aria-hidden="true"></span>`;
288
- let e = t(this.iconName, "regular");
287
+ if (!t(this.iconName)) return globalThis.console?.warn(`[sken-nav-group] icon "${this.iconName}" not in Sken catalog`), a`<span class="icon" aria-hidden="true"></span>`;
288
+ let e = n(this.iconName, "regular");
289
289
  return a`<span class="icon" aria-hidden="true" .innerHTML=${e}></span>`;
290
290
  }
291
291
  };
package/dist/sken-nav-group.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sken-nav-group.js","names":[],"sources":["../src/components/sken-nav-group.ts"],"sourcesContent":["import { getSkenIconSvg, isSkenIconName, type SkenIconName } from '@sken-ds/icons/catalog'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport type { SkenNavItem } from './sken-nav-item.js'\n\n@customElement('sken-nav-group')\nexport class SkenNavGroup extends LitElement {\n @property({ attribute: 'icon-name' })\n iconName: SkenIconName | '' = ''\n\n @property() label = ''\n\n @property({ type: Boolean, attribute: 'default-expanded' })\n defaultExpanded = false\n\n @property({ type: Boolean, reflect: true })\n expanded = false\n\n @property({ type: Boolean, reflect: true, attribute: 'expanded-nav' })\n expandedNav = true\n\n @query('details') private detailsEl?: HTMLDetailsElement\n\n static override styles = css`\n :host {\n display: block;\n }\n\n details {\n display: block;\n }\n\n summary {\n display: flex;\n align-items: center;\n gap: var(--sken-2, 0.5rem);\n padding-block: var(--sken-2, 0.25rem);\n padding-inline: var(--sken-3, 0.75rem);\n border-radius: var(--sken-radius-md, 0.5rem);\n list-style: none;\n cursor: pointer;\n user-select: none;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n summary::-webkit-details-marker {\n display: none;\n }\n summary::marker {\n content: '';\n }\n summary:hover {\n background: var(--sken-muted, #f6f7f9);\n }\n summary:focus-visible {\n outline: 2px solid var(--sken-primary, #2e6fc6);\n outline-offset: -2px;\n }\n\n details[open] > summary {\n color: var(--sken-primary, #2e6fc6);\n font-weight: var(--sken-weight-semibold, 600);\n }\n\n :host([data-child-current]) summary {\n background: var(--sken-muted, #f6f7f9);\n color: var(--sken-primary, #2e6fc6);\n font-weight: var(--sken-weight-semibold, 600);\n }\n\n .icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n inline-size: var(--sken-5, 1.25rem);\n block-size: var(--sken-5, 1.25rem);\n color: inherit;\n }\n .icon svg {\n inline-size: 100%;\n block-size: 100%;\n display: block;\n fill: currentColor;\n }\n\n .label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .chevron {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n inline-size: var(--sken-4, 1rem);\n block-size: var(--sken-4, 1rem);\n color: inherit;\n transition: transform 120ms ease;\n }\n .chevron svg {\n inline-size: 100%;\n block-size: 100%;\n display: block;\n fill: currentColor;\n }\n details[open] > summary > .chevron {\n transform: rotate(180deg);\n }\n\n .children {\n list-style: none;\n margin: 0;\n padding: 0;\n padding-block-start: var(--sken-2, 0.5rem);\n display: flex;\n flex-direction: column;\n gap: var(--sken-1, 0.25rem);\n }\n\n :host([expanded-nav]) .children {\n border-inline-start: 1px solid var(--sken-nav-rail-color, var(--sken-primary-hover, #3785d9));\n padding-inline-start: var(--sken-3, 1rem);\n margin-inline-start: var(--sken-5, 1.25rem);\n gap: var(--sken-1, 0.25rem);\n }\n\n :host([expanded-nav]) .children {\n --sken-nav-child-padding-inline-start: var(--sken-2, 0.5rem);\n --sken-nav-child-padding-inline-end: var(--sken-3, 0.75rem);\n }\n\n :host(:not([expanded-nav])) .label,\n :host(:not([expanded-nav])) .chevron {\n display: none;\n }\n :host(:not([expanded-nav])) summary {\n justify-content: center;\n padding-inline: var(--sken-2, 0.5rem);\n gap: 0;\n inline-size: auto;\n }\n :host(:not([expanded-nav])) {\n display: inline-block;\n inline-size: max-content;\n position: relative;\n }\n\n :host(:not([expanded-nav])) details {\n position: relative;\n }\n :host(:not([expanded-nav])) .children {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n min-inline-size: 12rem;\n padding: 0;\n background: var(--sken-card, #ffffff);\n border: 1px solid var(--sken-border, #dfdfe3);\n border-radius: var(--sken-radius-md, 0.5rem);\n box-shadow:\n 0 4px 12px rgb(0 0 0 / 0.08),\n 0 1px 2px rgb(0 0 0 / 0.04);\n z-index: 10;\n list-style: none;\n margin: 0;\n }\n :host(:not([expanded-nav])) .flyout-header {\n padding: var(--sken-3, 0.75rem) var(--sken-4, 1rem);\n font-weight: var(--sken-weight-semibold, 600);\n color: var(--sken-foreground, #152b48);\n border-bottom: 1px solid var(--sken-border, #dfdfe3);\n white-space: nowrap;\n }\n :host(:not([expanded-nav])) .flyout-items {\n display: flex;\n flex-direction: column;\n gap: var(--sken-1, 0.25rem);\n padding: var(--sken-2, 0.5rem);\n }\n :host(:not([expanded-nav])) .children {\n visibility: hidden;\n opacity: 0;\n transform: translateX(-4px);\n transition:\n opacity 120ms ease,\n transform 120ms ease,\n visibility 0s linear 120ms;\n pointer-events: none;\n }\n :host(:not([expanded-nav])[data-flyout-open]) .children {\n visibility: visible;\n opacity: 1;\n transform: translateX(0);\n transition:\n opacity 120ms ease,\n transform 120ms ease,\n visibility 0s linear 0s;\n pointer-events: auto;\n }\n `\n\n toggle(force?: boolean): void {\n if (!this.detailsEl) return\n this.detailsEl.open = force ?? !this.detailsEl.open\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('expanded')) {\n this.expanded = this.defaultExpanded\n }\n this.addEventListener('pointerenter', this.#onPointerEnter)\n this.addEventListener('pointerleave', this.#onPointerLeave)\n this.addEventListener('focusin', this.#onFocusIn)\n this.addEventListener('focusout', this.#onFocusOut)\n this.addEventListener('click', this.#onHostClick)\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n this.removeEventListener('pointerenter', this.#onPointerEnter)\n this.removeEventListener('pointerleave', this.#onPointerLeave)\n this.removeEventListener('focusin', this.#onFocusIn)\n this.removeEventListener('focusout', this.#onFocusOut)\n this.removeEventListener('click', this.#onHostClick)\n }\n\n #openFlyout(): void {\n if (this.expandedNav) return\n this.setAttribute('data-flyout-open', '')\n for (const item of this.#slottedItems()) {\n item.inFlyout = true\n }\n if (this.detailsEl && !this.detailsEl.open) {\n this.detailsEl.open = true\n }\n }\n\n #closeFlyout(): void {\n this.removeAttribute('data-flyout-open')\n for (const item of this.#slottedItems()) {\n item.inFlyout = false\n }\n }\n\n #slottedItems(): SkenNavItem[] {\n return Array.from(this.querySelectorAll<SkenNavItem>('sken-nav-item'))\n }\n\n #onPointerEnter = (): void => {\n this.#openFlyout()\n }\n #onPointerLeave = (event: PointerEvent): void => {\n const next = event.relatedTarget as Node | null\n if (next && this.contains(next)) return\n this.#closeFlyout()\n }\n #onFocusIn = (): void => {\n this.#openFlyout()\n }\n #onFocusOut = (event: FocusEvent): void => {\n const next = event.relatedTarget as Node | null\n if (next && this.contains(next)) return\n this.#closeFlyout()\n }\n\n #onHostClick = (event: MouseEvent): void => {\n if (this.expandedNav) return\n const target = event.target as HTMLElement\n const summary = this.shadowRoot?.querySelector('summary')\n if (summary && (target === summary || summary.contains(target))) {\n event.preventDefault()\n this.#toggleFlyout()\n }\n }\n\n #toggleFlyout(): void {\n if (this.expandedNav) return\n const isOpen = this.hasAttribute('data-flyout-open')\n if (isOpen) {\n this.#closeFlyout()\n } else {\n this.#openFlyout()\n }\n }\n\n protected override updated(changed: Map<string, unknown>): void {\n if (changed.has('expanded') && this.detailsEl) {\n this.detailsEl.open = this.expanded\n }\n this.#syncChildCurrent()\n }\n\n #syncChildCurrent(): void {\n const hasCurrent = this.#slottedItems().some((item) => item.current === true)\n if (hasCurrent) {\n this.setAttribute('data-child-current', '')\n } else {\n this.removeAttribute('data-child-current')\n }\n }\n\n protected override render() {\n const isExpanded = this.expanded\n const iconMarkup = this.#renderIcon()\n return html`\n <details part=\"group-details\" ?open=${isExpanded} @toggle=${this.#onToggle}>\n <summary part=\"group-summary\">\n ${iconMarkup}\n <span class=\"label\">${this.label}</span>\n <span class=\"chevron\" aria-hidden=\"true\" .innerHTML=${this.#chevronSvg}></span>\n </summary>\n ${\n this.expandedNav\n ? html`\n <ul class=\"children\" part=\"group-list\" role=\"list\">\n <slot></slot>\n </ul>\n `\n : html`\n <div class=\"children\" part=\"group-list\">\n <div class=\"flyout-header\" part=\"flyout-header\" role=\"presentation\">\n ${this.label}\n </div>\n <ul class=\"flyout-items\" part=\"flyout-items\" role=\"list\">\n <slot></slot>\n </ul>\n </div>\n `\n }\n </details>\n `\n }\n\n #chevronSvg = `<svg viewBox=\"0 0 256 256\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"/></svg>`\n\n #onToggle = (): void => {\n if (!this.detailsEl) return\n const next = this.detailsEl.open\n this.expanded = next\n this.dispatchEvent(\n new CustomEvent('sken-nav-group-native-toggle', {\n detail: { group: this, expanded: next },\n bubbles: true,\n composed: true,\n }),\n )\n }\n\n #renderIcon() {\n if (!this.iconName) return nothing\n if (!isSkenIconName(this.iconName)) {\n globalThis.console?.warn(`[sken-nav-group] icon \"${this.iconName}\" not in Sken catalog`)\n return html`<span class=\"icon\" aria-hidden=\"true\"></span>`\n }\n const raw = getSkenIconSvg(this.iconName, 'regular')\n return html`<span class=\"icon\" aria-hidden=\"true\" .innerHTML=${raw}></span>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-nav-group': SkenNavGroup\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"sken-nav-group.js","names":[],"sources":["../src/components/sken-nav-group.ts"],"sourcesContent":["import { getSkenIconSvg, isSkenIconName, type SkenIconName } from '@sken-ds/icons/catalog'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\nimport type { SkenNavItem } from './sken-nav-item.js'\n\n@customElement('sken-nav-group')\nexport class SkenNavGroup extends LitElement {\n @property({ attribute: 'icon-name' })\n iconName: SkenIconName | '' = ''\n\n @property() label = ''\n\n @property({ type: Boolean, attribute: 'default-expanded' })\n defaultExpanded = false\n\n @property({ type: Boolean, reflect: true })\n expanded = false\n\n @property({ type: Boolean, reflect: true, attribute: 'expanded-nav' })\n expandedNav = true\n\n @query('details') private detailsEl?: HTMLDetailsElement\n\n static override styles = css`\n :host {\n display: block;\n }\n\n details {\n display: block;\n }\n\n summary {\n display: flex;\n align-items: center;\n gap: var(--sken-2, 0.5rem);\n padding-block: var(--sken-2, 0.25rem);\n padding-inline: var(--sken-3, 0.75rem);\n border-radius: var(--sken-radius-md, 0.5rem);\n list-style: none;\n cursor: pointer;\n user-select: none;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n summary::-webkit-details-marker {\n display: none;\n }\n summary::marker {\n content: '';\n }\n summary:hover {\n background: var(--sken-muted, #f6f7f9);\n }\n summary:focus-visible {\n outline: 2px solid var(--sken-primary, #2e6fc6);\n outline-offset: -2px;\n }\n\n details[open] > summary {\n color: var(--sken-primary, #2e6fc6);\n font-weight: var(--sken-weight-semibold, 600);\n }\n\n :host([data-child-current]) summary {\n background: var(--sken-sidebar-accent, #edeff3);\n color: var(--sken-primary, #2e6fc6);\n font-weight: var(--sken-weight-semibold, 600);\n }\n\n .icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n inline-size: var(--sken-5, 1.25rem);\n block-size: var(--sken-5, 1.25rem);\n color: inherit;\n }\n .icon svg {\n inline-size: 100%;\n block-size: 100%;\n display: block;\n fill: currentColor;\n }\n\n .label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .chevron {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n inline-size: var(--sken-4, 1rem);\n block-size: var(--sken-4, 1rem);\n color: inherit;\n transition: transform 120ms ease;\n }\n .chevron svg {\n inline-size: 100%;\n block-size: 100%;\n display: block;\n fill: currentColor;\n }\n details[open] > summary > .chevron {\n transform: rotate(180deg);\n }\n\n .children {\n list-style: none;\n margin: 0;\n padding: 0;\n padding-block-start: var(--sken-2, 0.5rem);\n display: flex;\n flex-direction: column;\n gap: var(--sken-1, 0.25rem);\n }\n\n :host([expanded-nav]) .children {\n border-inline-start: 1px solid var(--sken-nav-rail-color, var(--sken-primary-hover, #3785d9));\n padding-inline-start: var(--sken-3, 1rem);\n margin-inline-start: var(--sken-5, 1.25rem);\n gap: var(--sken-1, 0.25rem);\n }\n\n :host([expanded-nav]) .children {\n --sken-nav-child-padding-inline-start: var(--sken-2, 0.5rem);\n --sken-nav-child-padding-inline-end: var(--sken-3, 0.75rem);\n }\n\n :host(:not([expanded-nav])) .label,\n :host(:not([expanded-nav])) .chevron {\n display: none;\n }\n :host(:not([expanded-nav])) summary {\n justify-content: center;\n padding-inline: var(--sken-2, 0.5rem);\n gap: 0;\n inline-size: auto;\n }\n :host(:not([expanded-nav])) {\n display: inline-block;\n inline-size: max-content;\n position: relative;\n }\n\n :host(:not([expanded-nav])) details {\n position: relative;\n }\n :host(:not([expanded-nav])) .children {\n position: absolute;\n inset-block-start: 0;\n inset-inline-start: 100%;\n min-inline-size: 12rem;\n padding: 0;\n background: var(--sken-card, #ffffff);\n border: 1px solid var(--sken-border, #dfdfe3);\n border-radius: var(--sken-radius-md, 0.5rem);\n box-shadow:\n 0 4px 12px rgb(0 0 0 / 0.08),\n 0 1px 2px rgb(0 0 0 / 0.04);\n z-index: 10;\n list-style: none;\n margin: 0;\n }\n :host(:not([expanded-nav])) .flyout-header {\n padding: var(--sken-3, 0.75rem) var(--sken-4, 1rem);\n font-weight: var(--sken-weight-semibold, 600);\n color: var(--sken-foreground, #152b48);\n border-bottom: 1px solid var(--sken-border, #dfdfe3);\n white-space: nowrap;\n }\n :host(:not([expanded-nav])) .flyout-items {\n display: flex;\n flex-direction: column;\n gap: var(--sken-1, 0.25rem);\n padding: var(--sken-2, 0.5rem);\n }\n :host(:not([expanded-nav])) .children {\n visibility: hidden;\n opacity: 0;\n transform: translateX(-4px);\n transition:\n opacity 120ms ease,\n transform 120ms ease,\n visibility 0s linear 120ms;\n pointer-events: none;\n }\n :host(:not([expanded-nav])[data-flyout-open]) .children {\n visibility: visible;\n opacity: 1;\n transform: translateX(0);\n transition:\n opacity 120ms ease,\n transform 120ms ease,\n visibility 0s linear 0s;\n pointer-events: auto;\n }\n `\n\n toggle(force?: boolean): void {\n if (!this.detailsEl) return\n this.detailsEl.open = force ?? !this.detailsEl.open\n }\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.hasAttribute('expanded')) {\n this.expanded = this.defaultExpanded\n }\n this.addEventListener('pointerenter', this.#onPointerEnter)\n this.addEventListener('pointerleave', this.#onPointerLeave)\n this.addEventListener('focusin', this.#onFocusIn)\n this.addEventListener('focusout', this.#onFocusOut)\n this.addEventListener('click', this.#onHostClick)\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n this.removeEventListener('pointerenter', this.#onPointerEnter)\n this.removeEventListener('pointerleave', this.#onPointerLeave)\n this.removeEventListener('focusin', this.#onFocusIn)\n this.removeEventListener('focusout', this.#onFocusOut)\n this.removeEventListener('click', this.#onHostClick)\n }\n\n #openFlyout(): void {\n if (this.expandedNav) return\n this.setAttribute('data-flyout-open', '')\n for (const item of this.#slottedItems()) {\n item.inFlyout = true\n }\n if (this.detailsEl && !this.detailsEl.open) {\n this.detailsEl.open = true\n }\n }\n\n #closeFlyout(): void {\n this.removeAttribute('data-flyout-open')\n for (const item of this.#slottedItems()) {\n item.inFlyout = false\n }\n }\n\n #slottedItems(): SkenNavItem[] {\n return Array.from(this.querySelectorAll<SkenNavItem>('sken-nav-item'))\n }\n\n #onPointerEnter = (): void => {\n this.#openFlyout()\n }\n #onPointerLeave = (event: PointerEvent): void => {\n const next = event.relatedTarget as Node | null\n if (next && this.contains(next)) return\n this.#closeFlyout()\n }\n #onFocusIn = (): void => {\n this.#openFlyout()\n }\n #onFocusOut = (event: FocusEvent): void => {\n const next = event.relatedTarget as Node | null\n if (next && this.contains(next)) return\n this.#closeFlyout()\n }\n\n #onHostClick = (event: MouseEvent): void => {\n if (this.expandedNav) return\n const target = event.target as HTMLElement\n const summary = this.shadowRoot?.querySelector('summary')\n if (summary && (target === summary || summary.contains(target))) {\n event.preventDefault()\n this.#toggleFlyout()\n }\n }\n\n #toggleFlyout(): void {\n if (this.expandedNav) return\n const isOpen = this.hasAttribute('data-flyout-open')\n if (isOpen) {\n this.#closeFlyout()\n } else {\n this.#openFlyout()\n }\n }\n\n protected override updated(changed: Map<string, unknown>): void {\n if (changed.has('expanded') && this.detailsEl) {\n this.detailsEl.open = this.expanded\n }\n this.#syncChildCurrent()\n }\n\n #syncChildCurrent(): void {\n const hasCurrent = this.#slottedItems().some((item) => item.current === true)\n if (hasCurrent) {\n this.setAttribute('data-child-current', '')\n } else {\n this.removeAttribute('data-child-current')\n }\n }\n\n protected override render() {\n const isExpanded = this.expanded\n const iconMarkup = this.#renderIcon()\n return html`\n <details part=\"group-details\" ?open=${isExpanded} @toggle=${this.#onToggle}>\n <summary part=\"group-summary\">\n ${iconMarkup}\n <span class=\"label\">${this.label}</span>\n <span class=\"chevron\" aria-hidden=\"true\" .innerHTML=${this.#chevronSvg}></span>\n </summary>\n ${\n this.expandedNav\n ? html`\n <ul class=\"children\" part=\"group-list\" role=\"list\">\n <slot></slot>\n </ul>\n `\n : html`\n <div class=\"children\" part=\"group-list\">\n <div class=\"flyout-header\" part=\"flyout-header\" role=\"presentation\">\n ${this.label}\n </div>\n <ul class=\"flyout-items\" part=\"flyout-items\" role=\"list\">\n <slot></slot>\n </ul>\n </div>\n `\n }\n </details>\n `\n }\n\n #chevronSvg = `<svg viewBox=\"0 0 256 256\" xmlns=\"http://www.w3.org/2000/svg\"><path d=\"M213.66,101.66l-80,80a8,8,0,0,1-11.32,0l-80-80A8,8,0,0,1,53.66,90.34L128,164.69l74.34-74.35a8,8,0,0,1,11.32,11.32Z\"/></svg>`\n\n #onToggle = (): void => {\n if (!this.detailsEl) return\n const next = this.detailsEl.open\n this.expanded = next\n this.dispatchEvent(\n new CustomEvent('sken-nav-group-native-toggle', {\n detail: { group: this, expanded: next },\n bubbles: true,\n composed: true,\n }),\n )\n }\n\n #renderIcon() {\n if (!this.iconName) return nothing\n if (!isSkenIconName(this.iconName)) {\n globalThis.console?.warn(`[sken-nav-group] icon \"${this.iconName}\" not in Sken catalog`)\n return html`<span class=\"icon\" aria-hidden=\"true\"></span>`\n }\n const raw = getSkenIconSvg(this.iconName, 'regular')\n return html`<span class=\"icon\" aria-hidden=\"true\" .innerHTML=${raw}></span>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-nav-group': SkenNavGroup\n }\n}\n"],"mappings":"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"}
package/dist/sken-nav-item.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { t as e } from "./decorate-C1e2sg49.js";
2
- import { n as t, t as n } from "./catalog-y40FMic1-DY2BFupW.js";
2
+ import { n as t, t as n } from "./catalog-BqTy2wun-C9pZWAhC.js";
3
3
  import { LitElement as r, css as i, html as a, nothing as o } from "lit";
4
4
  import { customElement as s, property as c, query as l } from "lit/decorators.js";
5
5
  //#region src/components/sken-nav-item.ts
@@ -8,12 +8,12 @@ function u() {
8
8
  }
9
9
  var d = class extends r {
10
10
  constructor(...e) {
11
- super(...e), this.iconName = "", this.href = "", this.label = "", this.current = !1, this.currentStyle = "solid", this.disabled = !1, this.tooltip = "", this.expanded = !0, this.inFlyout = !1, this._hostId = `sken-nav-item-${u()}`, this.tabIndex = 0, this.#t = (e) => {
11
+ super(...e), this.iconName = "", this.href = "", this.label = "", this.current = !1, this.currentStyle = "soft", this.disabled = !1, this.tooltip = "", this.expanded = !0, this.inFlyout = !1, this._hostId = `sken-nav-item-${u()}`, this.tabIndex = 0, this.#e = (e) => {
12
12
  if (this.disabled) {
13
13
  e.preventDefault(), e.stopPropagation();
14
14
  return;
15
15
  }
16
- e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 0 && this.href && (e.preventDefault(), this.dispatchEvent(new CustomEvent("sken-nav-item-navigate", {
16
+ e.metaKey || e.ctrlKey || e.shiftKey || e.altKey || e.button === 0 && this.href && (e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("sken-nav-item-navigate", {
17
17
  detail: {
18
18
  href: this.href,
19
19
  item: this
@@ -21,8 +21,8 @@ var d = class extends r {
21
21
  bubbles: !0,
22
22
  composed: !0
23
23
  })));
24
- }, this.#n = (e) => {
25
- this.disabled || (e.key === "Enter" || e.key === " ") && this.href && (e.preventDefault(), this.dispatchEvent(new CustomEvent("sken-nav-item-navigate", {
24
+ }, this.#t = (e) => {
25
+ this.disabled || (e.key === "Enter" || e.key === " ") && this.href && (e.preventDefault(), e.stopPropagation(), this.dispatchEvent(new CustomEvent("sken-nav-item-navigate", {
26
26
  detail: {
27
27
  href: this.href,
28
28
  item: this
@@ -33,18 +33,10 @@ var d = class extends r {
33
33
  };
34
34
  }
35
35
  connectedCallback() {
36
- super.connectedCallback(), this.id ||= this._hostId, this.hasAttribute("current-style") || (this.currentStyle = this.#e()), this.addEventListener("click", this.#t), this.addEventListener("keydown", this.#n);
36
+ super.connectedCallback(), this.id ||= this._hostId, this.addEventListener("click", this.#e), this.addEventListener("keydown", this.#t);
37
37
  }
38
38
  disconnectedCallback() {
39
- super.disconnectedCallback(), this.removeEventListener("click", this.#t), this.removeEventListener("keydown", this.#n);
40
- }
41
- #e() {
42
- let e = this.parentElement;
43
- for (; e;) {
44
- if (e.tagName.toLowerCase() === "sken-nav-group") return "soft";
45
- e = e.parentElement;
46
- }
47
- return "solid";
39
+ super.disconnectedCallback(), this.removeEventListener("click", this.#e), this.removeEventListener("keydown", this.#t);
48
40
  }
49
41
  static {
50
42
  this.styles = i`
@@ -73,11 +65,13 @@ var d = class extends r {
73
65
  user-select: none;
74
66
  inline-size: 100%;
75
67
  box-sizing: border-box;
76
- pointer-events: none;
77
68
  transition:
78
69
  background-color 120ms ease,
79
70
  color 120ms ease;
80
71
  }
72
+ button {
73
+ pointer-events: none;
74
+ }
81
75
 
82
76
  a:hover:not([aria-disabled='true']):not([aria-current='page']),
83
77
  button:hover:not([aria-disabled='true']):not([aria-current='page']) {
@@ -90,31 +84,31 @@ var d = class extends r {
90
84
  }
91
85
 
92
86
  [aria-current='page'] {
87
+ background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 12%, var(--sken-card, #ffffff));
88
+ color: var(--sken-primary, #2e6fc6);
89
+ }
90
+ [aria-current='page']:hover {
91
+ background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 18%, var(--sken-card, #ffffff));
92
+ }
93
+ [aria-current='page']:focus-visible {
94
+ outline-color: var(--sken-primary, #2e6fc6);
95
+ }
96
+
97
+ :host([current-style='solid']) [aria-current='page'] {
93
98
  background: var(--sken-primary, #2e6fc6);
94
99
  color: var(--sken-primary-foreground, #fcfcfc);
95
100
  }
96
- [aria-current='page']:hover {
101
+ :host([current-style='solid']) [aria-current='page']:hover {
97
102
  background: color-mix(
98
103
  in srgb,
99
104
  var(--sken-primary, #2e6fc6) 88%,
100
105
  var(--sken-foreground, #152b48)
101
106
  );
102
107
  }
103
- [aria-current='page']:focus-visible {
108
+ :host([current-style='solid']) [aria-current='page']:focus-visible {
104
109
  outline-color: var(--sken-primary-foreground, #fcfcfc);
105
110
  }
106
111
 
107
- :host([current-style='soft']) [aria-current='page'] {
108
- background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 12%, var(--sken-card, #ffffff));
109
- color: var(--sken-primary, #2e6fc6);
110
- }
111
- :host([current-style='soft']) [aria-current='page']:hover {
112
- background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 18%, var(--sken-card, #ffffff));
113
- }
114
- :host([current-style='soft']) [aria-current='page']:focus-visible {
115
- outline-color: var(--sken-primary, #2e6fc6);
116
- }
117
-
118
112
  [aria-disabled='true'] {
119
113
  cursor: not-allowed;
120
114
  opacity: 0.5;
@@ -159,10 +153,10 @@ var d = class extends r {
159
153
  focus(e) {
160
154
  super.focus(e);
161
155
  }
156
+ #e;
162
157
  #t;
163
- #n;
164
158
  render() {
165
- let e = this.tooltip || this.label, t = this.#r(), n = !this.expanded && !this.inFlyout ? o : this.label ? a`<span class="label">${this.label}</span>` : o, r = !this.expanded && !this.inFlyout && this.label ? this.label : o;
159
+ let e = this.tooltip || this.label, t = this.#n(), n = !this.expanded && !this.inFlyout ? o : this.label ? a`<span class="label">${this.label}</span>` : o, r = !this.expanded && !this.inFlyout && this.label ? this.label : o;
166
160
  return this.href ? a`
167
161
  <a
168
162
  part="item-link"
@@ -189,10 +183,10 @@ var d = class extends r {
189
183
  `;
190
184
  }
191
185
  updated() {}
192
- #r() {
186
+ #n() {
193
187
  if (!this.iconName) return o;
194
- if (!n(this.iconName)) return globalThis.console?.warn(`[sken-nav-item] icon "${this.iconName}" not in Sken catalog`), a`<span class="icon" aria-hidden="true"></span>`;
195
- let e = t(this.iconName, "regular");
188
+ if (!t(this.iconName)) return globalThis.console?.warn(`[sken-nav-item] icon "${this.iconName}" not in Sken catalog`), a`<span class="icon" aria-hidden="true"></span>`;
189
+ let e = n(this.iconName, "regular");
196
190
  return a`<span class="icon" aria-hidden="true" .innerHTML=${e}></span>`;
197
191
  }
198
192
  };
package/dist/sken-nav-item.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"sken-nav-item.js","names":[],"sources":["../src/components/sken-nav-item.ts"],"sourcesContent":["import { getSkenIconSvg, isSkenIconName, type SkenIconName } from '@sken-ds/icons/catalog'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nfunction generateUniqueId(): string {\n if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n return crypto.randomUUID()\n }\n return Math.random().toString(36).slice(2)\n}\n\n@customElement('sken-nav-item')\nexport class SkenNavItem extends LitElement {\n @property({ attribute: 'icon-name' })\n iconName: SkenIconName | '' = ''\n\n @property() href = ''\n\n @property() label = ''\n\n @property({ type: Boolean, reflect: true })\n current = false\n\n @property({ reflect: true, attribute: 'current-style' })\n currentStyle: 'solid' | 'soft' = 'solid'\n\n @property({ type: Boolean, reflect: true })\n disabled = false\n\n @property() tooltip = ''\n\n @property({ type: Boolean, reflect: true, attribute: 'expanded' })\n expanded = true\n\n @property({ type: Boolean, reflect: true, attribute: 'in-flyout' })\n inFlyout = false\n\n @query(':scope > sken-tooltip') private _tooltipChild?: HTMLElement | null\n\n private readonly _hostId = `sken-nav-item-${generateUniqueId()}`\n\n @property({ type: Number, reflect: true, attribute: 'tabindex' })\n override tabIndex = 0\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.id) this.id = this._hostId\n if (!this.hasAttribute('current-style')) {\n this.currentStyle = this.#detectCurrentStyle()\n }\n this.addEventListener('click', this.#onHostClick)\n this.addEventListener('keydown', this.#onHostKeydown)\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n this.removeEventListener('click', this.#onHostClick)\n this.removeEventListener('keydown', this.#onHostKeydown)\n }\n\n #detectCurrentStyle(): 'solid' | 'soft' {\n let parent = this.parentElement\n while (parent) {\n if (parent.tagName.toLowerCase() === 'sken-nav-group') {\n return 'soft'\n }\n parent = parent.parentElement\n }\n return 'solid'\n }\n\n static override styles = css`\n :host {\n cursor: pointer;\n display: inline-block;\n }\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n a,\n button {\n display: flex;\n align-items: center;\n gap: var(--sken-2, 0.5rem);\n padding-block: var(--sken-nav-child-padding-block, var(--sken-2, 0.25rem));\n padding-inline-start: var(--sken-nav-child-padding-inline-start, var(--sken-3, 0.75rem));\n padding-inline-end: var(--sken-nav-child-padding-inline-end, var(--sken-3, 0.75rem));\n border-radius: var(--sken-nav-child-radius, var(--sken-radius-md, 0.5rem));\n background: transparent;\n color: inherit;\n text-decoration: none;\n font: inherit;\n font-size: var(--sken-nav-child-font-size, inherit);\n user-select: none;\n inline-size: 100%;\n box-sizing: border-box;\n pointer-events: none;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n\n a:hover:not([aria-disabled='true']):not([aria-current='page']),\n button:hover:not([aria-disabled='true']):not([aria-current='page']) {\n background: var(--sken-muted, #f6f7f9);\n }\n a:focus-visible,\n button:focus-visible {\n outline: 2px solid var(--sken-primary, #2e6fc6);\n outline-offset: -2px;\n }\n\n [aria-current='page'] {\n background: var(--sken-primary, #2e6fc6);\n color: var(--sken-primary-foreground, #fcfcfc);\n }\n [aria-current='page']:hover {\n background: color-mix(\n in srgb,\n var(--sken-primary, #2e6fc6) 88%,\n var(--sken-foreground, #152b48)\n );\n }\n [aria-current='page']:focus-visible {\n outline-color: var(--sken-primary-foreground, #fcfcfc);\n }\n\n :host([current-style='soft']) [aria-current='page'] {\n background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 12%, var(--sken-card, #ffffff));\n color: var(--sken-primary, #2e6fc6);\n }\n :host([current-style='soft']) [aria-current='page']:hover {\n background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 18%, var(--sken-card, #ffffff));\n }\n :host([current-style='soft']) [aria-current='page']:focus-visible {\n outline-color: var(--sken-primary, #2e6fc6);\n }\n\n [aria-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n inline-size: var(--sken-5, 1.25rem);\n block-size: var(--sken-5, 1.25rem);\n color: inherit;\n }\n .icon svg {\n inline-size: 100%;\n block-size: 100%;\n display: block;\n fill: currentColor;\n }\n\n .label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n :host(:not([expanded]):not([in-flyout])) {\n inline-size: max-content;\n }\n :host(:not([expanded]):not([in-flyout])) a,\n :host(:not([expanded]):not([in-flyout])) button {\n inline-size: auto;\n padding-inline: var(--sken-2, 0.5rem);\n line-height: 1;\n justify-content: center;\n }\n `\n\n override focus(options?: FocusOptions): void {\n super.focus(options)\n }\n\n #onHostClick = (event: MouseEvent): void => {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n return\n }\n if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return\n if (event.button !== 0) return\n if (!this.href) return\n event.preventDefault()\n this.dispatchEvent(\n new CustomEvent('sken-nav-item-navigate', {\n detail: { href: this.href, item: this },\n bubbles: true,\n composed: true,\n }),\n )\n }\n\n #onHostKeydown = (event: KeyboardEvent): void => {\n if (this.disabled) return\n if (event.key !== 'Enter' && event.key !== ' ') return\n if (!this.href) return\n event.preventDefault()\n this.dispatchEvent(\n new CustomEvent('sken-nav-item-navigate', {\n detail: { href: this.href, item: this },\n bubbles: true,\n composed: true,\n }),\n )\n }\n\n protected override render() {\n const tooltipText = this.tooltip || this.label\n const iconMarkup = this.#renderIcon()\n const labelSlot =\n !this.expanded && !this.inFlyout\n ? nothing\n : this.label\n ? html`<span class=\"label\">${this.label}</span>`\n : nothing\n const collapsedAria = !this.expanded && !this.inFlyout && this.label ? this.label : nothing\n if (this.href) {\n return html`\n <a\n part=\"item-link\"\n href=${this.disabled ? nothing : this.href}\n aria-label=${collapsedAria}\n aria-current=${this.current ? 'page' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n data-tooltip=${tooltipText || nothing}\n >\n ${iconMarkup} ${labelSlot}\n </a>\n `\n }\n return html`\n <button\n part=\"item-link\"\n type=\"button\"\n ?disabled=${this.disabled}\n aria-label=${collapsedAria}\n aria-current=${this.current ? 'page' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n data-tooltip=${tooltipText || nothing}\n >\n ${iconMarkup} ${labelSlot}\n </button>\n `\n }\n\n protected override updated(): void {}\n\n #renderIcon() {\n if (!this.iconName) return nothing\n if (!isSkenIconName(this.iconName)) {\n globalThis.console?.warn(`[sken-nav-item] icon \"${this.iconName}\" not in Sken catalog`)\n return html`<span class=\"icon\" aria-hidden=\"true\"></span>`\n }\n const raw = getSkenIconSvg(this.iconName, 'regular')\n return html`<span class=\"icon\" aria-hidden=\"true\" .innerHTML=${raw}></span>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-nav-item': SkenNavItem\n }\n}\n"],"mappings":"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"}
1
+ {"version":3,"file":"sken-nav-item.js","names":[],"sources":["../src/components/sken-nav-item.ts"],"sourcesContent":["import { getSkenIconSvg, isSkenIconName, type SkenIconName } from '@sken-ds/icons/catalog'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\nfunction generateUniqueId(): string {\n if (typeof crypto !== 'undefined' && typeof crypto.randomUUID === 'function') {\n return crypto.randomUUID()\n }\n return Math.random().toString(36).slice(2)\n}\n\n@customElement('sken-nav-item')\nexport class SkenNavItem extends LitElement {\n @property({ attribute: 'icon-name' })\n iconName: SkenIconName | '' = ''\n\n @property() href = ''\n\n @property() label = ''\n\n @property({ type: Boolean, reflect: true })\n current = false\n\n @property({ reflect: true, attribute: 'current-style' })\n currentStyle: 'solid' | 'soft' = 'soft'\n\n @property({ type: Boolean, reflect: true })\n disabled = false\n\n @property() tooltip = ''\n\n @property({ type: Boolean, reflect: true, attribute: 'expanded' })\n expanded = true\n\n @property({ type: Boolean, reflect: true, attribute: 'in-flyout' })\n inFlyout = false\n\n @query(':scope > sken-tooltip') private _tooltipChild?: HTMLElement | null\n\n private readonly _hostId = `sken-nav-item-${generateUniqueId()}`\n\n @property({ type: Number, reflect: true, attribute: 'tabindex' })\n override tabIndex = 0\n\n override connectedCallback(): void {\n super.connectedCallback()\n if (!this.id) this.id = this._hostId\n this.addEventListener('click', this.#onHostClick)\n this.addEventListener('keydown', this.#onHostKeydown)\n }\n\n override disconnectedCallback(): void {\n super.disconnectedCallback()\n this.removeEventListener('click', this.#onHostClick)\n this.removeEventListener('keydown', this.#onHostKeydown)\n }\n\n static override styles = css`\n :host {\n cursor: pointer;\n display: inline-block;\n }\n :host([disabled]) {\n cursor: not-allowed;\n }\n\n a,\n button {\n display: flex;\n align-items: center;\n gap: var(--sken-2, 0.5rem);\n padding-block: var(--sken-nav-child-padding-block, var(--sken-2, 0.25rem));\n padding-inline-start: var(--sken-nav-child-padding-inline-start, var(--sken-3, 0.75rem));\n padding-inline-end: var(--sken-nav-child-padding-inline-end, var(--sken-3, 0.75rem));\n border-radius: var(--sken-nav-child-radius, var(--sken-radius-md, 0.5rem));\n background: transparent;\n color: inherit;\n text-decoration: none;\n font: inherit;\n font-size: var(--sken-nav-child-font-size, inherit);\n user-select: none;\n inline-size: 100%;\n box-sizing: border-box;\n transition:\n background-color 120ms ease,\n color 120ms ease;\n }\n button {\n pointer-events: none;\n }\n\n a:hover:not([aria-disabled='true']):not([aria-current='page']),\n button:hover:not([aria-disabled='true']):not([aria-current='page']) {\n background: var(--sken-muted, #f6f7f9);\n }\n a:focus-visible,\n button:focus-visible {\n outline: 2px solid var(--sken-primary, #2e6fc6);\n outline-offset: -2px;\n }\n\n [aria-current='page'] {\n background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 12%, var(--sken-card, #ffffff));\n color: var(--sken-primary, #2e6fc6);\n }\n [aria-current='page']:hover {\n background: color-mix(in srgb, var(--sken-primary, #2e6fc6) 18%, var(--sken-card, #ffffff));\n }\n [aria-current='page']:focus-visible {\n outline-color: var(--sken-primary, #2e6fc6);\n }\n\n :host([current-style='solid']) [aria-current='page'] {\n background: var(--sken-primary, #2e6fc6);\n color: var(--sken-primary-foreground, #fcfcfc);\n }\n :host([current-style='solid']) [aria-current='page']:hover {\n background: color-mix(\n in srgb,\n var(--sken-primary, #2e6fc6) 88%,\n var(--sken-foreground, #152b48)\n );\n }\n :host([current-style='solid']) [aria-current='page']:focus-visible {\n outline-color: var(--sken-primary-foreground, #fcfcfc);\n }\n\n [aria-disabled='true'] {\n cursor: not-allowed;\n opacity: 0.5;\n }\n\n .icon {\n display: inline-flex;\n flex: 0 0 auto;\n align-items: center;\n justify-content: center;\n inline-size: var(--sken-5, 1.25rem);\n block-size: var(--sken-5, 1.25rem);\n color: inherit;\n }\n .icon svg {\n inline-size: 100%;\n block-size: 100%;\n display: block;\n fill: currentColor;\n }\n\n .label {\n flex: 1 1 auto;\n min-inline-size: 0;\n overflow: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n :host(:not([expanded]):not([in-flyout])) {\n inline-size: max-content;\n }\n :host(:not([expanded]):not([in-flyout])) a,\n :host(:not([expanded]):not([in-flyout])) button {\n inline-size: auto;\n padding-inline: var(--sken-2, 0.5rem);\n line-height: 1;\n justify-content: center;\n }\n `\n\n override focus(options?: FocusOptions): void {\n super.focus(options)\n }\n\n #onHostClick = (event: MouseEvent): void => {\n if (this.disabled) {\n event.preventDefault()\n event.stopPropagation()\n return\n }\n if (event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) return\n if (event.button !== 0) return\n if (!this.href) return\n event.preventDefault()\n event.stopPropagation()\n this.dispatchEvent(\n new CustomEvent('sken-nav-item-navigate', {\n detail: { href: this.href, item: this },\n bubbles: true,\n composed: true,\n }),\n )\n }\n\n #onHostKeydown = (event: KeyboardEvent): void => {\n if (this.disabled) return\n if (event.key !== 'Enter' && event.key !== ' ') return\n if (!this.href) return\n event.preventDefault()\n event.stopPropagation()\n this.dispatchEvent(\n new CustomEvent('sken-nav-item-navigate', {\n detail: { href: this.href, item: this },\n bubbles: true,\n composed: true,\n }),\n )\n }\n\n protected override render() {\n const tooltipText = this.tooltip || this.label\n const iconMarkup = this.#renderIcon()\n const labelSlot =\n !this.expanded && !this.inFlyout\n ? nothing\n : this.label\n ? html`<span class=\"label\">${this.label}</span>`\n : nothing\n const collapsedAria = !this.expanded && !this.inFlyout && this.label ? this.label : nothing\n if (this.href) {\n return html`\n <a\n part=\"item-link\"\n href=${this.disabled ? nothing : this.href}\n aria-label=${collapsedAria}\n aria-current=${this.current ? 'page' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n data-tooltip=${tooltipText || nothing}\n >\n ${iconMarkup} ${labelSlot}\n </a>\n `\n }\n return html`\n <button\n part=\"item-link\"\n type=\"button\"\n ?disabled=${this.disabled}\n aria-label=${collapsedAria}\n aria-current=${this.current ? 'page' : nothing}\n aria-disabled=${this.disabled ? 'true' : nothing}\n data-tooltip=${tooltipText || nothing}\n >\n ${iconMarkup} ${labelSlot}\n </button>\n `\n }\n\n protected override updated(): void {}\n\n #renderIcon() {\n if (!this.iconName) return nothing\n if (!isSkenIconName(this.iconName)) {\n globalThis.console?.warn(`[sken-nav-item] icon \"${this.iconName}\" not in Sken catalog`)\n return html`<span class=\"icon\" aria-hidden=\"true\"></span>`\n }\n const raw = getSkenIconSvg(this.iconName, 'regular')\n return html`<span class=\"icon\" aria-hidden=\"true\" .innerHTML=${raw}></span>`\n }\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'sken-nav-item': SkenNavItem\n }\n}\n"],"mappings":"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"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sken-ds/primitives",
3
- "version": "0.6.2",
3
+ "version": "0.6.3",
4
4
  "publishConfig": {
5
5
  "registry": "https://registry.npmjs.org",
6
6
  "access": "public"
@@ -115,7 +115,7 @@
115
115
  "@siemens/ix": "^5.2.0",
116
116
  "@siemens/ix-icons": "^3.5.0",
117
117
  "@sken-ds/contracts": "^0.6.0",
118
- "@sken-ds/icons": "^0.6.2",
118
+ "@sken-ds/icons": "^0.6.3",
119
119
  "@tanstack/lit-table": "^9.1.2",
120
120
  "@tanstack/match-sorter-utils": "^9.0.0",
121
121
  "@tanstack/table-core": "^9.0.0",