@sken-ds/primitives 0.4.1 → 0.4.2

package/dist/sken-layout.js

@@ -16,28 +16,52 @@ var c = {
 	footer: "var(--sken-muted)"
 }, u = class extends t {
 	constructor(...e) {
-		super(...e), this.variant = "header-content", this.topbarMode = "fixed", this.sidebarPosition = "start", this.sidebarSize = "md", this.density = "none", this.#e = null;
+		super(...e), this.variant = "header-content", this.topbarMode = "fixed", this.sidebarPosition = "start", this.sidebarSize = "md", this.density = "none", this.#e = null, this.#n = this.#t, this.#i = [];
 	}
 	#e;
 	get #t() {
 		return s[this.variant];
 	}
-	get #n() {
-		return this.#t.includes("sidebar");
+	#n;
+	#r() {
+		let e = [];
+		for (let t of this.#t) Array.from(this.children).some((e) => e.getAttribute && e.getAttribute("slot") === t) && e.push(t);
+		e.length === this.#n.length && e.every((e, t) => e === this.#n[t]) || (this.#n = e, this.requestUpdate());
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.#r(), this.#e = new MutationObserver(() => this.#r()), this.#e.observe(this, {
+		super.connectedCallback(), this.#s(), this.#e = new MutationObserver(() => {
+			this.#s(), this.#r();
+		}), this.#e.observe(this, {
 			childList: !0,
 			subtree: !1
 		});
 	}
 	firstUpdated(e) {
-		super.firstUpdated(e), this.#r();
+		super.firstUpdated(e), this.#s(), this.#r(), this.#a();
+	}
+	updated(e) {
+		super.updated(e), e.has("variant") && this.#r();
+	}
+	#i;
+	#a() {
+		this.#o();
+		let e = this.shadowRoot;
+		if (e) for (let t of Array.from(e.querySelectorAll("slot"))) {
+			let e = () => this.#r();
+			t.addEventListener("slotchange", e), this.#i.push({
+				slot: t,
+				handler: e
+			});
+		}
+	}
+	#o() {
+		for (let { slot: e, handler: t } of this.#i) e.removeEventListener("slotchange", t);
+		this.#i = [];
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#e?.disconnect(), this.#e = null;
+		super.disconnectedCallback(), this.#e?.disconnect(), this.#e = null, this.#o();
 	}
-	#r() {
+	#s() {
 		for (let e of Array.from(this.children)) {
 			if (!(e instanceof HTMLElement) || e.tagName.toLowerCase() !== "sken-layout-region") continue;
 			let t = e.getAttribute("name");
@@ -51,18 +75,49 @@ var c = {
        / footer sit in their own rows; the body is a sub-grid that
        holds the sidebar (when present) and the content. */
     :host {
-      display: grid;
+      display: block;
       block-size: 100dvh;
-      grid-template-columns: 1fr;
-      grid-template-rows: auto 1fr;
-      grid-template-areas:
-        'topbar'
-        'body';
       background: var(--sken-background, Canvas);
       color: var(--sken-foreground, CanvasText);
       font-family: var(--sken-family-sans, system-ui, sans-serif);
     }
 
+    /* The actual grid is a child <div class="grid">. We use a
+       child rather than the host itself for two reasons:
+
+       1. The grid template is computed per-render based on
+          which roles have content (see #visibleRoles and
+          render()). Setting grid-template-areas on the host
+          via an inline style would work, but the host has a
+          handful of other responsibilities (background, color,
+          font) and keeping the grid in a child makes the
+          separation cleaner.
+
+       2. CSS grid in shadow DOM: putting the grid on a child
+          avoids any quirks of the host element's display
+          behaviour (the host is a custom element with its own
+          display semantics). */
+    .grid {
+      display: grid;
+      block-size: 100%;
+      grid-template-columns: 1fr;
+      /* The grid template is set per-render via inline style
+         using the --sken-layout-grid-areas and
+         --sken-layout-grid-rows custom properties (set by the
+         render() function). The default values below match
+         the header-content variant; the inline style overrides
+         them for variants with more or fewer roles, and for
+         consumers that have unfilled regions. */
+      grid-template-areas: var(
+        --sken-layout-grid-areas,
+        'topbar' 'body'
+      );
+      grid-template-rows: var(
+        --sken-layout-grid-rows,
+        'auto 1fr'
+      );
+    }
+
     /* ── Per-cell grid items ─────────────────────────────────────
        Each named slot sits inside a wrapper element that is the
        actual grid item. The wrapper's class matches the role
@@ -189,43 +244,14 @@ var c = {
     }
 
     /* ── Grid templates per variant ───────────────────────────────
-       Each variant declares which rows the host grid reserves.
-       The default host grid is 2 rows (topbar + body); variants
-       that include primary-nav or footer add more rows. Rows
-       with no rendered content (e.g. footer on a variant that
-       does not include a footer) collapse to 0 because the
-       variant does not render the matching wrapper, and an
-       empty 'auto' row in a grid takes the height of its
-       content (which is 0). */
-    :host([variant='full-bleed']) {
-      grid-template-areas: 'body';
-      grid-template-rows: 1fr;
-    }
-    :host([variant='header-content']) {
-      grid-template-areas:
-        'topbar'
-        'body';
-      grid-template-rows: auto 1fr;
-    }
-    :host([variant='sidebar-content']) {
-      grid-template-rows: 1fr;
-      grid-template-areas: 'body';
-    }
-    :host([variant='header-sidebar']) {
-      grid-template-rows: auto auto 1fr;
-      grid-template-areas:
-        'topbar'
-        'primary-nav'
-        'body';
-    }
-    :host([variant='header-sidebar-footer']) {
-      grid-template-rows: auto auto 1fr auto;
-      grid-template-areas:
-        'topbar'
-        'primary-nav'
-        'body'
-        'footer';
-    }
+       The grid template is set per-render as an inline style
+       (via --sken-layout-grid-areas and
+       --sken-layout-grid-rows) based on the visible roles (the
+       intersection of the active variant and the roles whose
+       slot has content). See render() for the computation.
+       The default values on the .grid selector above cover
+       header-content (the default variant) when no inline
+       style is set (e.g. before the first render completes). */
 
     /* ── Topbar mode ──────────────────────────────────────────────
        'fixed': the host is 100dvh and the body scrolls under the
@@ -260,29 +286,31 @@ var c = {
   `;
 	}
 	render() {
-		let e = this.#t, t = this.#n, n = [
+		let e = this.#n, t = e.includes("content"), n = e.includes("sidebar"), i = e.map((e) => e === "content" ? "\"body\"" : `"${e}"`).join("\n      "), a = e.map((e) => e === "content" ? "1fr" : "auto").join(" "), o = [
 			"body",
-			t ? "with-sidebar" : "",
-			t && this.sidebarPosition === "end" ? "sidebar-end" : ""
-		].filter(Boolean).join(" ");
+			n ? "with-sidebar" : "",
+			n && this.sidebarPosition === "end" ? "sidebar-end" : ""
+		].filter(Boolean).join(" "), s = `--sken-layout-grid-areas: '${i}'; --sken-layout-grid-rows: ${a};`;
 		return r`
-      ${e.includes("topbar") ? r`<div class="topbar" part="topbar">
-              <slot name="topbar"></slot>
-            </div>` : ""}
-      ${e.includes("primary-nav") ? r`<div class="primary-nav" part="primary-nav">
-              <slot name="primary-nav"></slot>
-            </div>` : ""}
-      <div class=${n} part="body">
-        ${t ? r`<div class="sidebar" part="sidebar">
-                <slot name="sidebar"></slot>
+      <div class="grid" style=${s} part="grid">
+        ${e.includes("topbar") ? r`<div class="topbar" part="topbar">
+                <slot name="topbar"></slot>
+              </div>` : ""}
+        ${e.includes("primary-nav") ? r`<div class="primary-nav" part="primary-nav">
+                <slot name="primary-nav"></slot>
+              </div>` : ""}
+        ${t ? r`<div class=${o} part="body">
+                ${n ? r`<div class="sidebar" part="sidebar">
+                        <slot name="sidebar"></slot>
+                      </div>` : ""}
+                <div class="content" part="content">
+                  <slot name="content"></slot>
+                </div>
+              </div>` : ""}
+        ${e.includes("footer") ? r`<div class="footer" part="footer">
+                <slot name="footer"></slot>
               </div>` : ""}
-        <div class="content" part="content">
-          <slot name="content"></slot>
-        </div>
       </div>
-      ${e.includes("footer") ? r`<div class="footer" part="footer">
-              <slot name="footer"></slot>
-            </div>` : ""}
     `;
 	}
 };

package/dist/sken-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"sken-layout.js","names":["#activeRoles","#hasSidebar","#syncRegionSlotAttributes","#regionSlotObserver"],"sources":["../src/components/sken-layout.ts"],"sourcesContent":["// ── <sken-layout> — structural layout primitive ────────────────────\n// Defines the page-level structure of a multi-region interface\n// (topbar, primary nav, sidebar, content, footer) without imposing\n// what lives inside each region. Composition by contract:\n//\n//   <sken-layout variant=\"header-sidebar\">\n//     <sken-layout-region name=\"topbar\">…</sken-layout-region>\n//     <sken-layout-region name=\"primary-nav\">…</sken-layout-region>\n//     <sken-layout-region name=\"sidebar\">…</sken-layout-region>\n//     <sken-layout-region name=\"content\">…</sken-layout-region>\n//   </sken-layout>\n//\n// Design notes (v0.3.10 — fix for SKEN-LAYOUT-REGIONS-RENDERING.md):\n// - The shadow root projects the consumer's light-DOM regions via\n//   NAMED slots, one per role (topbar, primary-nav, sidebar,\n//   content, footer). Each named slot sits inside a wrapper\n//   element (e.g. <div class=\"topbar\">…</div>) that is the actual\n//   grid item of the host's CSS grid. The wrapper is needed\n//   because the consumer's <sken-layout-region> is `display:\n//   contents` and would otherwise collapse the grid item away.\n// - Only the slots the active variant includes are rendered.\n//   The single source of truth is SkenLayoutVariantRoles in\n//   @sken-ds/contracts. Roles the variant does not include\n//   simply do not appear in the shadow root, so the host's\n//   grid template (which is fixed per variant) renders the\n//   remaining rows at the height of their content.\n// - This is a behavioural fix over the previous design (single\n//   unnamed slot + variant-aware `display: none` rules on\n//   `::slotted()`), which placed every region inside the\n//   `.body` sub-grid and therefore prevented the host's\n//   `grid-template-areas` from placing them in the correct\n//   row (the footer ended up next to the topbar in row 0).\n//\n// See ADR-0006 for the substrate decision. See the\n// @sken-ds/contracts types `SkenLayoutProps`, `SkenLayoutSlots`,\n// `SkenLayoutVariant`, `SkenLayoutVariantRoles` for the contract\n// surface.\n\nimport type {\n  SkenLayoutDensity,\n  SkenLayoutRegionRole,\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\n/**\n * Sidebar width in `rem` per size concept. The product can\n * override with `--sken-layout-sidebar-width` (CSS custom\n * property) if it needs a different value.\n */\nconst SIDEBAR_WIDTH: Record<SkenLayoutSidebarSize, string> = {\n  sm: '12rem',\n  md: '16rem',\n  lg: '20rem',\n}\n\n/**\n * Per-cell background tokens. The values reference the\n * Sken color tokens, not raw colors, so a theme switch\n * (`data-theme=\"dark\"`) recolors every cell without the\n * primitive knowing about it.\n *\n * Mapping rationale:\n *  - topbar is on `--sken-card` (white) because it is the\n *    \"elevated\" chrome; the border-bottom separates it from\n *    the page below.\n *  - primary-nav is on `--sken-background` (page colour) so\n *    it sits flush with the page; the border-bottom separates\n *    it from the workspace.\n *  - sidebar is on `--sken-muted` (subtle off-white) with a\n *    border-inline-end; it is a \"rail\", not a \"page\".\n *  - content is on `--sken-background`; no border (the\n *    workspace is unbounded).\n *  - footer is on `--sken-muted` with a border-top; it is\n *    the same role as the sidebar (chrome).\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({ reflect: true }) density: SkenLayoutDensity = 'none'\n\n  /**\n   * MutationObserver that watches the host's light DOM for\n   * `<sken-layout-region>` children. For each region, if the\n   * consumer (or a framework adapter) did not set the HTML\n   * `slot=\"<role>\"` attribute, we set it ourselves. This is\n   * defense-in-depth: the host's shadow root uses 5 named\n   * `<slot>` elements (one per role) and the browser's\n   * slot-projection mechanism only projects a light-DOM child\n   * into a named slot if the child carries the matching\n   * `slot=\"<name>\"` attribute. Without it, every named slot\n   * receives zero assigned elements and the regions render\n   * as empty wrappers — the page looks almost empty.\n   *\n   * A future framework adapter (React, Svelte, plain HTML) can\n   * either set the `slot` attribute on its own (the documented\n   * contract) or rely on this observer to do it. Setting it\n   * explicitly is still preferred for clarity, but the\n   * observer is the safety net that prevents the silent\n   * \"everything renders empty\" failure mode that v0.4.0\n   * shipped with.\n   */\n  #regionSlotObserver: MutationObserver | null = null\n\n  /**\n   * Roles the active variant renders in the shadow root. Sourced\n   * from {@link SkenLayoutVariantRoles}. Used to drive the\n   * template (only the slots the variant includes are projected)\n   * and to apply the per-variant `with-sidebar` class on the\n   * body sub-grid wrapper.\n   */\n  get #activeRoles(): readonly SkenLayoutRegionRole[] {\n    return (SkenLayoutVariantRoles as SkenLayoutVariantRolesMap)[this.variant]\n  }\n\n  /** True if the active variant renders a sidebar region. */\n  get #hasSidebar(): boolean {\n    return this.#activeRoles.includes('sidebar')\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    // Walk the current children synchronously (so the first\n    // render after connection already has the slot= attribute\n    // in place), then attach the observer to catch future\n    // mutations (the consumer can add or remove regions\n    // dynamically, e.g. when switching the active variant in\n    // a shared layout component).\n    this.#syncRegionSlotAttributes()\n    this.#regionSlotObserver = new MutationObserver(() => this.#syncRegionSlotAttributes())\n    this.#regionSlotObserver.observe(this, { childList: true, subtree: false })\n  }\n\n  /**\n   * Lit lifecycle hook called after the first render. We use\n   * it as a second-pass sync point because some regions may\n   * have been added to the host before the host was\n   * connected, with their `name` property set programmatically\n   * (e.g. via the Vue adapter setting `region.name = 'topbar'`\n   * before the region is upgraded to a custom element). The\n   * `name` property is `reflect: true`, so the attribute is\n   * written only after the region is connected and Lit runs\n   * its first render — which is exactly what `firstUpdated`\n   * gives us. Without this second pass, a region whose `name`\n   * was set as a property (not as an attribute) would not\n   * have its `slot` attribute set by the time the browser\n   * tries to project it.\n   */\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties)\n    this.#syncRegionSlotAttributes()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.#regionSlotObserver?.disconnect()\n    this.#regionSlotObserver = null\n  }\n\n  /**\n   * For each direct `<sken-layout-region>` child of the host,\n   * set the `slot=\"<name>\"` HTML attribute if it is missing\n   * or does not match the region's role. The browser's\n   * slot-projection mechanism reads this attribute to project\n   * the child into the matching named `<slot>` inside the\n   * shadow root.\n   *\n   * We only touch direct children (not the entire subtree)\n   * because the contract is that `<sken-layout-region>` lives\n   * as a direct child of `<sken-layout>`; nested regions\n   * are not a supported pattern.\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: grid;\n      block-size: 100dvh;\n      grid-template-columns: 1fr;\n      grid-template-rows: auto 1fr;\n      grid-template-areas:\n        'topbar'\n        'body';\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    /* ── 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      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      display: grid;\n      grid-template-columns: 1fr;\n      grid-template-areas: 'content';\n      min-block-size: 0; /* allow children to shrink + scroll */\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      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    .content {\n      grid-area: 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       Each variant declares which rows the host grid reserves.\n       The default host grid is 2 rows (topbar + body); variants\n       that include primary-nav or footer add more rows. Rows\n       with no rendered content (e.g. footer on a variant that\n       does not include a footer) collapse to 0 because the\n       variant does not render the matching wrapper, and an\n       empty 'auto' row in a grid takes the height of its\n       content (which is 0). */\n    :host([variant='full-bleed']) {\n      grid-template-areas: 'body';\n      grid-template-rows: 1fr;\n    }\n    :host([variant='header-content']) {\n      grid-template-areas:\n        'topbar'\n        'body';\n      grid-template-rows: auto 1fr;\n    }\n    :host([variant='sidebar-content']) {\n      grid-template-rows: 1fr;\n      grid-template-areas: 'body';\n    }\n    :host([variant='header-sidebar']) {\n      grid-template-rows: auto auto 1fr;\n      grid-template-areas:\n        'topbar'\n        'primary-nav'\n        'body';\n    }\n    :host([variant='header-sidebar-footer']) {\n      grid-template-rows: auto auto 1fr auto;\n      grid-template-areas:\n        'topbar'\n        'primary-nav'\n        'body'\n        'footer';\n    }\n\n    /* ── Topbar mode ──────────────────────────────────────────────\n       'fixed': the host is 100dvh and the body scrolls under the\n       topbar. This is the default for admin consoles.\n       'auto': the topbar scrolls away with the page (marketing,\n       landing). */\n    :host([topbar-mode='auto']) {\n      block-size: auto;\n      min-block-size: 100dvh;\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 roles = this.#activeRoles\n    const hasSidebar = this.#hasSidebar\n    const bodyClasses = [\n      'body',\n      hasSidebar ? 'with-sidebar' : '',\n      hasSidebar && this.sidebarPosition === 'end' ? 'sidebar-end' : '',\n    ]\n      .filter(Boolean)\n      .join(' ')\n\n    return html`\n      ${\n        roles.includes('topbar')\n          ? html`<div class=\"topbar\" part=\"topbar\">\n              <slot name=\"topbar\"></slot>\n            </div>`\n          : ''\n      }\n      ${\n        roles.includes('primary-nav')\n          ? html`<div class=\"primary-nav\" part=\"primary-nav\">\n              <slot name=\"primary-nav\"></slot>\n            </div>`\n          : ''\n      }\n      <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        roles.includes('footer')\n          ? html`<div class=\"footer\" part=\"footer\">\n              <slot name=\"footer\"></slot>\n            </div>`\n          : ''\n      }\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-layout': SkenLayout\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"sken-layout.js","names":["#activeRoles","#visibleRoles","#syncRegionSlotAttributes","#regionSlotObserver","#recomputeVisibleRoles","#wireSlotChangeListeners","#unwireSlotChangeListeners","#slotChangeHandlers"],"sources":["../src/components/sken-layout.ts"],"sourcesContent":["// ── <sken-layout> — structural layout primitive ────────────────────\n// Defines the page-level structure of a multi-region interface\n// (topbar, primary nav, sidebar, content, footer) without imposing\n// what lives inside each region. Composition by contract:\n//\n//   <sken-layout variant=\"header-sidebar\">\n//     <sken-layout-region name=\"topbar\">…</sken-layout-region>\n//     <sken-layout-region name=\"primary-nav\">…</sken-layout-region>\n//     <sken-layout-region name=\"sidebar\">…</sken-layout-region>\n//     <sken-layout-region name=\"content\">…</sken-layout-region>\n//   </sken-layout>\n//\n// Design notes (v0.4.2 — fix for SKEN-LAYOUT-EMPTY-REGIONS.md):\n// - The shadow root projects the consumer's light-DOM regions via\n//   NAMED slots, one per role. Each named slot sits inside a wrapper\n//   element (e.g. <div class=\"topbar\">…</div>) that is the actual\n//   grid item of the host's CSS grid.\n// - Roles the active variant does not include are not rendered at\n//   all (the variant drives which slots exist in the shadow root).\n// - Roles the active variant includes but the consumer did not\n//   fill are also not rendered. The host's `grid-template-areas`\n//   is computed dynamically to exclude the empty rows/columns, so\n//   the grid re-flows to fill the available space. This is the\n//   third in a series of layout-rendering fixes:\n//     - 0.4.0: variant-aware region rendering (only roles the\n//       variant includes are emitted).\n//     - 0.4.1: slot= attribute on the regions, so the browser\n//       projects them to the named slots.\n//     - 0.4.2 (this): content-aware grid template, so empty\n//       rows/columns collapse.\n// - We detect which slots have content via `slot.assignedElements()`\n//   on first render (after the browser has projected the\n//   consumer's regions) and on every `slotchange` event (for\n//   dynamic content — e.g. a sidebar the consumer can empty at\n//   runtime). The result is stored in `#visibleRoles`, which\n//   drives both the shadow template and the host's inline\n//   `grid-template-areas` style.\n//\n// See ADR-0006 for the substrate decision. See the\n// @sken-ds/contracts types `SkenLayoutProps`, `SkenLayoutSlots`,\n// `SkenLayoutVariant`, `SkenLayoutVariantRoles` for the contract\n// surface.\n\nimport type {\n  SkenLayoutDensity,\n  SkenLayoutRegionRole,\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\n/**\n * Sidebar width in `rem` per size concept. The product can\n * override with `--sken-layout-sidebar-width` (CSS custom\n * property) if it needs a different value.\n */\nconst SIDEBAR_WIDTH: Record<SkenLayoutSidebarSize, string> = {\n  sm: '12rem',\n  md: '16rem',\n  lg: '20rem',\n}\n\n/**\n * Per-cell background tokens. The values reference the\n * Sken color tokens, not raw colors, so a theme switch\n * (`data-theme=\"dark\"`) recolors every cell without the\n * primitive knowing about it.\n *\n * Mapping rationale:\n *  - topbar is on `--sken-card` (white) because it is the\n *    \"elevated\" chrome; the border-bottom separates it from\n *    the page below.\n *  - primary-nav is on `--sken-background` (page colour) so\n *    it sits flush with the page; the border-bottom separates\n *    it from the workspace.\n *  - sidebar is on `--sken-muted` (subtle off-white) with a\n *    border-inline-end; it is a \"rail\", not a \"page\".\n *  - content is on `--sken-background`; no border (the\n *    workspace is unbounded).\n *  - footer is on `--sken-muted` with a border-top; it is\n *    the same role as the sidebar (chrome).\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({ reflect: true }) density: SkenLayoutDensity = 'none'\n\n  /**\n   * MutationObserver that watches the host's light DOM for\n   * `<sken-layout-region>` children. For each region, if the\n   * consumer (or a framework adapter) did not set the HTML\n   * `slot=\"<role>\"` attribute, we set it ourselves. This is\n   * defense-in-depth: the host's shadow root uses 5 named\n   * `<slot>` elements (one per role) and the browser's\n   * slot-projection mechanism only projects a light-DOM child\n   * into a named slot if the child carries the matching\n   * `slot=\"<name>\"` attribute. Without it, every named slot\n   * receives zero assigned elements and the regions render\n   * as empty wrappers — the page looks almost empty.\n   *\n   * A future framework adapter (React, Svelte, plain HTML) can\n   * either set the `slot` attribute on its own (the documented\n   * contract) or rely on this observer to do it. Setting it\n   * explicitly is still preferred for clarity, but the\n   * observer is the safety net that prevents the silent\n   * \"everything renders empty\" failure mode that v0.4.0\n   * shipped with.\n   */\n  #regionSlotObserver: MutationObserver | null = null\n\n  /**\n   * Roles the active variant renders in the shadow root. Sourced\n   * from {@link SkenLayoutVariantRoles}. Used to drive the\n   * template (only the slots the variant includes are projected)\n   * and to apply the per-variant `with-sidebar` class on the\n   * body sub-grid wrapper.\n   */\n  get #activeRoles(): readonly SkenLayoutRegionRole[] {\n    return (SkenLayoutVariantRoles as SkenLayoutVariantRolesMap)[this.variant]\n  }\n\n  /**\n   * Roles the host grid should render in the shadow root AND\n   * reserve space for in the grid template. This is the\n   * intersection of the active variant's roles and the roles\n   * whose slot actually has content (i.e. the consumer filled\n   * the corresponding `<sken-layout-region>`). When a role is\n   * in the variant but the consumer did not fill the slot, the\n   * role is excluded — the wrapper is not rendered, and the\n   * corresponding row/column in `grid-template-areas` is removed\n   * so the surrounding regions re-flow.\n   *\n   * Updated on `firstUpdated` (after the browser has projected\n   * the initial set of regions into the named slots) and on\n   * every `slotchange` event (for dynamic content).\n   */\n  #visibleRoles: readonly SkenLayoutRegionRole[] = this.#activeRoles\n\n  /**\n   * Compute the current set of visible roles by walking the\n   * host's light-DOM children and checking which ones carry\n   * a `slot=\"<role>\"` attribute that matches one of the active\n   * variant's roles.\n   *\n   * We deliberately do NOT use `slot.assignedElements()` (which\n   * requires the browser to have done the slot projection and\n   * is therefore timing-sensitive in shadow-DOM tests) — we\n   * read the slot attribute directly on the children. This is\n   * observable at any point, including during the first\n   * `firstUpdated` call.\n   *\n   * The `#syncRegionSlotAttributes` method (called from\n   * `connectedCallback` and again in `firstUpdated`) ensures\n   * that the slot attribute is in place on every child region\n   * before this method runs. The slotchange listener is\n   * responsible for re-running this method when the consumer\n   * mutates the slot attribute at runtime.\n   */\n  #recomputeVisibleRoles(): void {\n    const visible: SkenLayoutRegionRole[] = []\n    for (const role of this.#activeRoles) {\n      // A role is \"filled\" if at least one direct child of\n      // the host has slot=\"<role>\". We do not care about the\n      // child's own children (an empty region is still a\n      // filled region — the consumer can render a placeholder\n      // inside an otherwise empty slot).\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    // Avoid re-renders if nothing changed.\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    // Walk the current children synchronously (so the first\n    // render after connection already has the slot= attribute\n    // in place), then attach the observer to catch future\n    // mutations (the consumer can add or remove regions\n    // dynamically, e.g. when switching the active variant in\n    // a shared layout component).\n    //\n    // The observer also re-runs `#recomputeVisibleRoles`. The\n    // MutationObserver fires on every add/remove of a direct\n    // child, which is exactly the signal we need to refresh\n    // the visible-roles set (the slotchange event is a poor\n    // substitute because it only fires for slots that already\n    // exist in the shadow root — a region the consumer adds\n    // for a slot that the previous render omitted will not\n    // fire slotchange because the slot does not exist yet).\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  /**\n   * Lit lifecycle hook called after the first render. Three\n   * things happen here, in order:\n   *\n   * 1. `#syncRegionSlotAttributes()` — second-pass sync point\n   *    for regions whose `name` was set as a property (not as\n   *    an attribute) before the region was connected. The\n   *    `name` property is `reflect: true`, so the attribute is\n   *    written only after the region is connected and Lit runs\n   *    its first render. Without this second pass, a region\n   *    whose `name` was set as a property (not as an attribute)\n   *    would not have its `slot` attribute set by the time the\n   *    browser tries to project it.\n   *\n   * 2. `#recomputeVisibleRoles()` — first pass at discovering\n   *    which slots have content. This MUST happen after the\n   *    browser has done its first slot projection, which is\n   *    exactly what `firstUpdated` is. Without this, the\n   *    initial render would assume all variant roles are\n   *    visible, and the grid template would reserve rows for\n   *    empty regions. The render that follows this call\n   *    produces the correct (collapsed) grid template.\n   *\n   * 3. Wire up `slotchange` listeners on the named slots, so\n   *    dynamic content (a consumer emptying or filling a slot\n   *    at runtime) re-triggers the same re-computation.\n   */\n  protected override firstUpdated(_changedProperties: PropertyValues): void {\n    super.firstUpdated(_changedProperties)\n    this.#syncRegionSlotAttributes()\n    this.#recomputeVisibleRoles()\n    this.#wireSlotChangeListeners()\n  }\n\n  /**\n   * Lit lifecycle hook called after every render (including the\n   * first). We re-run `#recomputeVisibleRoles` when the variant\n   * changes because the set of valid roles (`#activeRoles`)\n   * depends on the variant, and a region that was visible under\n   * the previous variant may no longer be a member of the new\n   * variant. Without this, switching the variant prop would\n   * leave stale roles in `#visibleRoles` until the next\n   * `slotchange` event.\n   *\n   * We do NOT call `requestUpdate` here — `#recomputeVisibleRoles`\n   * already does that when the visible set actually changed. If\n   * the set did not change, no extra render is needed.\n   */\n  protected override updated(_changedProperties: PropertyValues): void {\n    super.updated(_changedProperties)\n    if (_changedProperties.has('variant')) {\n      this.#recomputeVisibleRoles()\n    }\n  }\n\n  /**\n   * Attach a `slotchange` listener to every named slot in the\n   * shadow root. The browser fires `slotchange` on a slot\n   * whenever the set of light-DOM children projected into it\n   * changes (add, remove, or replace). This is a defense in\n   * depth alongside the `MutationObserver` (which is the\n   * primary signal for adds/removes): the slotchange listener\n   * catches a consumer who replaces a region's content with\n   * another consumer-defined element while keeping the same\n   * `slot=\"<role>\"` attribute (the MutationObserver on\n   * childList would not fire for a same-tag-name replacement\n   * that swaps the element in place, though in practice the\n   * browser usually fires childList anyway for new nodes).\n   *\n   * The listeners are attached in `firstUpdated` (so the slots\n   * exist) and torn down in `disconnectedCallback`.\n   */\n  #slotChangeHandlers: Array<{ slot: HTMLSlotElement; handler: () => void }> = []\n\n  #wireSlotChangeListeners(): void {\n    // Tear down the previous batch first (in case the variant\n    // changed and the shadow root was re-rendered, replacing\n    // the old slot elements with new ones).\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 = null\n    this.#unwireSlotChangeListeners()\n  }\n\n  /**\n   * For each direct `<sken-layout-region>` child of the host,\n   * set the `slot=\"<name>\"` HTML attribute if it is missing\n   * or does not match the region's role. The browser's\n   * slot-projection mechanism reads this attribute to project\n   * the child into the matching named `<slot>` inside the\n   * shadow root.\n   *\n   * We only touch direct children (not the entire subtree)\n   * because the contract is that `<sken-layout-region>` lives\n   * as a direct child of `<sken-layout>`; nested regions\n   * are not a supported pattern.\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    /* The actual grid is a child <div class=\"grid\">. We use a\n       child rather than the host itself for two reasons:\n\n       1. The grid template is computed per-render based on\n          which roles have content (see #visibleRoles and\n          render()). Setting grid-template-areas on the host\n          via an inline style would work, but the host has a\n          handful of other responsibilities (background, color,\n          font) and keeping the grid in a child makes the\n          separation cleaner.\n\n       2. CSS grid in shadow DOM: putting the grid on a child\n          avoids any quirks of the host element's display\n          behaviour (the host is a custom element with its own\n          display semantics). */\n    .grid {\n      display: grid;\n      block-size: 100%;\n      grid-template-columns: 1fr;\n      /* The grid template is set per-render via inline style\n         using the --sken-layout-grid-areas and\n         --sken-layout-grid-rows custom properties (set by the\n         render() function). The default values below match\n         the header-content variant; the inline style overrides\n         them for variants with more or fewer roles, and for\n         consumers that have unfilled regions. */\n      grid-template-areas: var(\n        --sken-layout-grid-areas,\n        'topbar' 'body'\n      );\n      grid-template-rows: var(\n        --sken-layout-grid-rows,\n        'auto 1fr'\n      );\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      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      display: grid;\n      grid-template-columns: 1fr;\n      grid-template-areas: 'content';\n      min-block-size: 0; /* allow children to shrink + scroll */\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      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    .content {\n      grid-area: 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 host is 100dvh and the body scrolls under the\n       topbar. This is the default for admin consoles.\n       'auto': the topbar scrolls away with the page (marketing,\n       landing). */\n    :host([topbar-mode='auto']) {\n      block-size: auto;\n      min-block-size: 100dvh;\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    // Use #visibleRoles (not #activeRoles) so empty regions\n    // are not emitted. #visibleRoles is the active variant\n    // intersected with the roles whose slot has content; it\n    // is updated by firstUpdated and slotchange handlers.\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    // We declare the area names in the order they should appear\n    // in the grid (top to bottom). The browser uses this\n    // template to lay out the wrappers: each wrapper has\n    // `grid-area: <role>`, and the template maps that area to a\n    // row. Excluded roles do not appear in the template, and\n    // the corresponding wrapper is not rendered, so the row\n    // simply does not exist.\n    //\n    // The order is the same as #activeRoles (which is the\n    // order from SkenLayoutVariantRoles). That order is the\n    // structural shape of the variant — the consumer picks the\n    // variant, we project the order.\n    //\n    // For the row that holds the main content, the area name\n    // is \"body\" (because the wrapper that owns that row is the\n    // .body sub-grid, not a .content div). The SSoT for\n    // \"which row is the body\" is \"the row whose role is\n    // 'content'\" — the wrapper .body is rendered whenever\n    // 'content' is visible, and it lives in the row we name\n    // \"body\" in the template. This keeps the wrapper\n    // structure (one .body that holds sidebar+content) in sync\n    // with the grid template (one row named \"body\" that\n    // stretches to fill the remaining space).\n    const gridTemplateAreas = visibleRoles\n      .map((r) => (r === 'content' ? '\"body\"' : `\"${r}\"`))\n      .join('\\n      ')\n\n    // Compute grid-template-rows to match. We need one row per\n    // visible role. The \"1fr\" row is the body (it stretches to\n    // fill the remaining space); the others are \"auto\" (they\n    // take the height of their content). The body row is the\n    // one whose role in #visibleRoles is 'content'.\n    const gridTemplateRows = visibleRoles\n      .map((r) => (r === 'content' ? '1fr' : 'auto'))\n      .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    // The grid template is applied as an inline style because\n    // it is computed per render (the visible roles change when\n    // the consumer adds or removes regions). The CSS in\n    // `static styles` sets the default per-variant template, but\n    // the inline style overrides it when the visible set\n    // differs from the variant's full set.\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sken-ds/primitives",
-  "version": "0.4.1",
+  "version": "0.4.2",
   "publishConfig": {
     "registry": "https://registry.npmjs.org",
     "access": "public"
@@ -92,7 +92,7 @@
     "@tanstack/match-sorter-utils": "^9.0.0",
     "@tanstack/table-core": "^9.0.0",
     "lit": "^3.3.3",
-    "@sken-ds/contracts": "0.4.1"
+    "@sken-ds/contracts": "0.4.2"
   },
   "devDependencies": {
     "@vitest/coverage-v8": "^4.1.10",