@sken-ds/primitives 0.3.7 → 0.4.0

package/dist/sken-layout.js

@@ -2,22 +2,34 @@ import { t as e } from "./decorate-D4FKzyDw.js";
 import "./sken-layout-region.js";
 import { LitElement as t, css as n, html as r, unsafeCSS as i } from "lit";
 import { customElement as a, property as o } from "lit/decorators.js";
+import { SkenLayoutVariantRoles as s } from "@sken-ds/contracts";
 //#region src/components/sken-layout.ts
-var s = {
+var c = {
 	sm: "12rem",
 	md: "16rem",
 	lg: "20rem"
-}, c = class extends t {
+}, l = {
+	topbar: "var(--sken-card)",
+	"primary-nav": "var(--sken-background)",
+	sidebar: "var(--sken-muted)",
+	content: "var(--sken-background)",
+	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";
+		super(...e), this.variant = "header-content", this.topbarMode = "fixed", this.sidebarPosition = "start", this.sidebarSize = "md", this.density = "none";
+	}
+	get #e() {
+		return s[this.variant];
+	}
+	get #t() {
+		return this.#e.includes("sidebar");
 	}
 	static {
 		this.styles = n`
     /* ── The host ────────────────────────────────────────────────
-       The host owns the page-level grid. The body row is a
-       sub-grid; the topbar / primary-nav / footer sit in their
-       own rows. The shadow DOM owns the layout; the slot inside
-       projects the consumer's regions into the grid cells. */
+       The host owns the page-level grid. The topbar / primary-nav
+       / footer sit in their own rows; the body is a sub-grid that
+       holds the sidebar (when present) and the content. */
     :host {
       display: grid;
       block-size: 100dvh;
@@ -31,13 +43,40 @@ var s = {
       font-family: var(--sken-family-sans, system-ui, sans-serif);
     }
 
+    /* ── 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
+       (topbar, primary-nav, body, footer). The variant rules
+       below assign the right 'grid-area' to each role. The
+       'display: contents' <sken-layout-region> is projected
+       through the named <slot> and inherits the wrapper's
+       background, border, and padding. */
+    .topbar {
+      grid-area: topbar;
+      background: var(
+        --sken-layout-region-topbar-background,
+        ${i(l.topbar)}
+      );
+      padding-block: var(--sken-layout-region-topbar-padding-block, 0);
+      padding-inline: var(--sken-layout-region-topbar-padding-inline, 0);
+      border-bottom: 1px solid var(--sken-border);
+    }
+    .primary-nav {
+      grid-area: primary-nav;
+      background: var(
+        --sken-layout-region-primary-nav-background,
+        ${i(l["primary-nav"])}
+      );
+      padding-block: var(--sken-layout-region-primary-nav-padding-block, 0);
+      padding-inline: var(--sken-layout-region-primary-nav-padding-inline, 0);
+      border-bottom: 1px solid var(--sken-border);
+    }
     .body {
       display: grid;
       grid-template-columns: 1fr;
       grid-template-areas: 'content';
       min-block-size: 0; /* allow children to shrink + scroll */
     }
-
     .body.with-sidebar {
       grid-template-columns: var(--sken-layout-sidebar-width, 16rem) 1fr;
       grid-template-areas: 'sidebar content';
@@ -46,36 +85,98 @@ var s = {
       grid-template-columns: 1fr var(--sken-layout-sidebar-width, 16rem);
       grid-template-areas: 'content sidebar';
     }
-
-    /* ── Per-region grid placement ───────────────────────────────
-       The light-DOM <sken-layout-region> children are projected
-       here through the unnamed <slot>. The grid-area rule per
-       name positions each one in the right cell. We select the
-       slotted custom elements by attribute, which works
-       transparently across the shadow boundary. */
-    ::slotted(sken-layout-region[name='topbar']) {
-      grid-area: topbar;
-    }
-    ::slotted(sken-layout-region[name='primary-nav']) {
-      grid-area: primary-nav;
-    }
-    ::slotted(sken-layout-region[name='sidebar']) {
+    .sidebar {
       grid-area: sidebar;
       min-block-size: 0;
-      border-inline-end: 1px solid
-        var(--sken-border, color-mix(in srgb, currentColor 12%, transparent));
+      background: var(
+        --sken-layout-region-sidebar-background,
+        ${i(l.sidebar)}
+      );
+      padding-block: var(--sken-layout-region-sidebar-padding-block, 0);
+      padding-inline: var(--sken-layout-region-sidebar-padding-inline, 0);
+      border-inline-end: 1px solid var(--sken-border);
     }
-    ::slotted(sken-layout-region[name='content']) {
+    .content {
       grid-area: content;
       min-block-size: 0;
+      background: var(
+        --sken-layout-region-content-background,
+        ${i(l.content)}
+      );
+      padding-block: var(--sken-layout-region-content-padding-block, 0);
+      padding-inline: var(--sken-layout-region-content-padding-inline, 0);
     }
-    ::slotted(sken-layout-region[name='footer']) {
+    .footer {
       grid-area: footer;
-      border-top: 1px solid
-        var(--sken-border, color-mix(in srgb, currentColor 12%, transparent));
+      background: var(
+        --sken-layout-region-footer-background,
+        ${i(l.footer)}
+      );
+      padding-block: var(--sken-layout-region-footer-padding-block, 0);
+      padding-inline: var(--sken-layout-region-footer-padding-inline, 0);
+      border-top: 1px solid var(--sken-border);
+    }
+
+    /* ── Density: comfortable ─────────────────────────────────────
+       When density=comfortable, the layout applies the Sken
+       default rhythm: 8/16px on chrome cells, 16/24px on the
+       content area, 12/16px on the footer. The values come
+       from the spacing scale (--sken-2, --sken-3, --sken-4,
+       --sken-6) so a single token change ripples through
+       every cell. A consumer override on any
+       --sken-layout-region-{role}-padding-{block|inline}
+       always wins over the density preset. */
+    :host([density='comfortable']) .topbar,
+    :host([density='comfortable']) .primary-nav,
+    :host([density='comfortable']) .content,
+    :host([density='comfortable']) .sidebar,
+    :host([density='comfortable']) .footer {
+      --sken-layout-region-topbar-padding-block: var(--sken-2);
+      --sken-layout-region-topbar-padding-inline: var(--sken-4);
+      --sken-layout-region-primary-nav-padding-block: var(--sken-2);
+      --sken-layout-region-primary-nav-padding-inline: var(--sken-4);
+      --sken-layout-region-sidebar-padding-block: var(--sken-4);
+      --sken-layout-region-sidebar-padding-inline: var(--sken-4);
+      --sken-layout-region-content-padding-block: var(--sken-6);
+      --sken-layout-region-content-padding-inline: var(--sken-6);
+      --sken-layout-region-footer-padding-block: var(--sken-3);
+      --sken-layout-region-footer-padding-inline: var(--sken-4);
     }
 
-    /* ── Grid templates per variant ─────────────────────────────── */
+    /* ── Density: compact ────────────────────────────────────────
+       When density=compact, every per-cell padding is halved
+       from the comfortable value. We use calc(var(--sken-N) *
+       0.5) instead of hardcoded half-values so a future
+       token change automatically cascades. As with
+       comfortable, a consumer override on any
+       --sken-layout-region-{role}-padding-{block|inline}
+       always wins. */
+    :host([density='compact']) .topbar,
+    :host([density='compact']) .primary-nav,
+    :host([density='compact']) .content,
+    :host([density='compact']) .sidebar,
+    :host([density='compact']) .footer {
+      --sken-layout-region-topbar-padding-block: calc(var(--sken-2) * 0.5);
+      --sken-layout-region-topbar-padding-inline: calc(var(--sken-4) * 0.5);
+      --sken-layout-region-primary-nav-padding-block: calc(var(--sken-2) * 0.5);
+      --sken-layout-region-primary-nav-padding-inline: calc(var(--sken-4) * 0.5);
+      --sken-layout-region-sidebar-padding-block: calc(var(--sken-4) * 0.5);
+      --sken-layout-region-sidebar-padding-inline: calc(var(--sken-4) * 0.5);
+      --sken-layout-region-content-padding-block: calc(var(--sken-6) * 0.5);
+      --sken-layout-region-content-padding-inline: calc(var(--sken-6) * 0.5);
+      --sken-layout-region-footer-padding-block: calc(var(--sken-3) * 0.5);
+      --sken-layout-region-footer-padding-inline: calc(var(--sken-4) * 0.5);
+    }
+
+    /* ── 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;
@@ -90,10 +191,6 @@ var s = {
       grid-template-rows: 1fr;
       grid-template-areas: 'body';
     }
-    :host([variant='sidebar-content']) .body {
-      grid-template-columns: var(--sken-layout-sidebar-width, 16rem) 1fr;
-      grid-template-areas: 'sidebar content';
-    }
     :host([variant='header-sidebar']) {
       grid-template-rows: auto auto 1fr;
       grid-template-areas:
@@ -121,85 +218,65 @@ var s = {
     }
 
     /* ── Sidebar position ─────────────────────────────────────────
-       The 'with-sidebar' class is applied via JS in render() so
-       we can include the 'sidebar-end' modifier in the same
-       selector chain. (You cannot combine the [sidebar-position]
-       attribute with the '.with-sidebar' class in a single
-       selector, because the class is conditional.) */
-    :host([sidebar-position='end']) ::slotted(sken-layout-region[name='sidebar']) {
+       When the sidebar sits on the inline-end side, the border
+       moves to the inline-start side. The default rule above
+       already paints the border on the inline-end; here we
+       swap it. */
+    :host([sidebar-position='end']) .sidebar {
       border-inline-end: none;
-      border-inline-start: 1px solid
-        var(--sken-border, color-mix(in srgb, currentColor 12%, transparent));
+      border-inline-start: 1px solid var(--sken-border);
     }
 
     /* ── Sidebar width override ─────────────────────────────────── */
     :host([sidebar-size='sm']) {
-      --sken-layout-sidebar-width: ${i(s.sm)};
+      --sken-layout-sidebar-width: ${i(c.sm)};
     }
     :host([sidebar-size='md']) {
-      --sken-layout-sidebar-width: ${i(s.md)};
+      --sken-layout-sidebar-width: ${i(c.md)};
     }
     :host([sidebar-size='lg']) {
-      --sken-layout-sidebar-width: ${i(s.lg)};
-    }
-
-    /* ── Variant-aware region hiding ─────────────────────────────
-       Roles the active variant does not include are hidden
-       outright. This way a consumer that always renders the
-       same set of regions (e.g. a shared layout component) does
-       not get phantom space when a page uses a different
-       variant. */
-    :host([variant='full-bleed']) ::slotted(sken-layout-region[name='topbar']),
-    :host([variant='full-bleed']) ::slotted(sken-layout-region[name='primary-nav']),
-    :host([variant='full-bleed']) ::slotted(sken-layout-region[name='sidebar']),
-    :host([variant='full-bleed']) ::slotted(sken-layout-region[name='footer']) {
-      display: none;
-    }
-
-    :host([variant='header-content']) ::slotted(sken-layout-region[name='primary-nav']),
-    :host([variant='header-content']) ::slotted(sken-layout-region[name='sidebar']),
-    :host([variant='header-content']) ::slotted(sken-layout-region[name='footer']) {
-      display: none;
-    }
-
-    :host([variant='sidebar-content']) ::slotted(sken-layout-region[name='topbar']),
-    :host([variant='sidebar-content']) ::slotted(sken-layout-region[name='primary-nav']),
-    :host([variant='sidebar-content']) ::slotted(sken-layout-region[name='footer']) {
-      display: none;
-    }
-
-    :host([variant='header-sidebar']) ::slotted(sken-layout-region[name='footer']) {
-      display: none;
+      --sken-layout-sidebar-width: ${i(c.lg)};
     }
   `;
 	}
 	render() {
-		let e = this.#e(this.variant), t = [
+		let e = this.#e, t = this.#t, n = [
 			"body",
-			e ? "with-sidebar" : "",
-			e && this.sidebarPosition === "end" ? "sidebar-end" : ""
+			t ? "with-sidebar" : "",
+			t && this.sidebarPosition === "end" ? "sidebar-end" : ""
 		].filter(Boolean).join(" ");
 		return r`
-      <div class=${t} part="body">
-        <slot></slot>
+      ${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>` : ""}
+        <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>` : ""}
     `;
 	}
-	#e(e) {
-		return e === "sidebar-content" || e === "header-sidebar" || e === "header-sidebar-footer";
-	}
 };
-e([o({ reflect: !0 })], c.prototype, "variant", void 0), e([o({
+e([o({ reflect: !0 })], u.prototype, "variant", void 0), e([o({
 	attribute: "topbar-mode",
 	reflect: !0
-})], c.prototype, "topbarMode", void 0), e([o({
+})], u.prototype, "topbarMode", void 0), e([o({
 	attribute: "sidebar-position",
 	reflect: !0
-})], c.prototype, "sidebarPosition", void 0), e([o({
+})], u.prototype, "sidebarPosition", void 0), e([o({
 	attribute: "sidebar-size",
 	reflect: !0
-})], c.prototype, "sidebarSize", void 0), c = e([a("sken-layout")], c);
+})], u.prototype, "sidebarSize", void 0), e([o({ reflect: !0 })], u.prototype, "density", void 0), u = e([a("sken-layout")], u);
 //#endregion
-export { c as SkenLayout };
+export { u as SkenLayout };
 
 //# sourceMappingURL=sken-layout.js.map

package/dist/sken-layout.js.map

@@ -1 +1 @@
-{"version":3,"file":"sken-layout.js","names":["#variantHasSidebar"],"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:\n// - We project the light-DOM regions into a shadow-DOM grid via\n//   a single <slot>. Inside the shadow we own the grid template\n//   + per-name `grid-area` CSS rules; the consumer's regions\n//   sit in the slot. Empty regions (no consumer region for a\n//   name) simply do not project; the grid still has the area\n//   declared but the slot stays empty, so no space is reserved.\n// - We DO NOT use named <slot name=\"topbar\"> etc. because that\n//   would force the consumer to keep the regions in a fixed\n//   order. A single unnamed <slot> lets the consumer arrange\n//   the regions in any order; the grid-area CSS rule per name\n//   is what places them in the layout. (A Vue adapter that\n//   renders regions via <template v-for> is therefore free.)\n// - For roles the active variant does not include, we hide\n//   the region via `display: none` so a consumer that always\n//   renders the same set of regions (e.g. from a layout\n//   component shared across pages) does not get phantom space.\n//   The CSS rule uses `:host([variant=…])` so it does not\n//   depend on JS state.\n//\n// See ADR-0006 for the substrate decision. See the\n// @sken-ds/contracts types `SkenLayoutProps`, `SkenLayoutSlots`,\n// `SkenLayoutVariant` for the contract surface.\n\nimport { LitElement, html, css, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport type {\n  SkenLayoutVariant,\n  SkenLayoutTopbarMode,\n  SkenLayoutSidebarPosition,\n  SkenLayoutSidebarSize,\n} from '@sken-ds/contracts'\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@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\n  static styles = css`\n    /* ── The host ────────────────────────────────────────────────\n       The host owns the page-level grid. The body row is a\n       sub-grid; the topbar / primary-nav / footer sit in their\n       own rows. The shadow DOM owns the layout; the slot inside\n       projects the consumer's regions into the grid cells. */\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    .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\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\n    /* ── Per-region grid placement ───────────────────────────────\n       The light-DOM <sken-layout-region> children are projected\n       here through the unnamed <slot>. The grid-area rule per\n       name positions each one in the right cell. We select the\n       slotted custom elements by attribute, which works\n       transparently across the shadow boundary. */\n    ::slotted(sken-layout-region[name='topbar']) {\n      grid-area: topbar;\n    }\n    ::slotted(sken-layout-region[name='primary-nav']) {\n      grid-area: primary-nav;\n    }\n    ::slotted(sken-layout-region[name='sidebar']) {\n      grid-area: sidebar;\n      min-block-size: 0;\n      border-inline-end: 1px solid\n        var(--sken-border, color-mix(in srgb, currentColor 12%, transparent));\n    }\n    ::slotted(sken-layout-region[name='content']) {\n      grid-area: content;\n      min-block-size: 0;\n    }\n    ::slotted(sken-layout-region[name='footer']) {\n      grid-area: footer;\n      border-top: 1px solid\n        var(--sken-border, color-mix(in srgb, currentColor 12%, transparent));\n    }\n\n    /* ── Grid templates per variant ─────────────────────────────── */\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='sidebar-content']) .body {\n      grid-template-columns: var(--sken-layout-sidebar-width, 16rem) 1fr;\n      grid-template-areas: 'sidebar content';\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       The 'with-sidebar' class is applied via JS in render() so\n       we can include the 'sidebar-end' modifier in the same\n       selector chain. (You cannot combine the [sidebar-position]\n       attribute with the '.with-sidebar' class in a single\n       selector, because the class is conditional.) */\n    :host([sidebar-position='end']) ::slotted(sken-layout-region[name='sidebar']) {\n      border-inline-end: none;\n      border-inline-start: 1px solid\n        var(--sken-border, color-mix(in srgb, currentColor 12%, transparent));\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    /* ── Variant-aware region hiding ─────────────────────────────\n       Roles the active variant does not include are hidden\n       outright. This way a consumer that always renders the\n       same set of regions (e.g. a shared layout component) does\n       not get phantom space when a page uses a different\n       variant. */\n    :host([variant='full-bleed']) ::slotted(sken-layout-region[name='topbar']),\n    :host([variant='full-bleed']) ::slotted(sken-layout-region[name='primary-nav']),\n    :host([variant='full-bleed']) ::slotted(sken-layout-region[name='sidebar']),\n    :host([variant='full-bleed']) ::slotted(sken-layout-region[name='footer']) {\n      display: none;\n    }\n\n    :host([variant='header-content']) ::slotted(sken-layout-region[name='primary-nav']),\n    :host([variant='header-content']) ::slotted(sken-layout-region[name='sidebar']),\n    :host([variant='header-content']) ::slotted(sken-layout-region[name='footer']) {\n      display: none;\n    }\n\n    :host([variant='sidebar-content']) ::slotted(sken-layout-region[name='topbar']),\n    :host([variant='sidebar-content']) ::slotted(sken-layout-region[name='primary-nav']),\n    :host([variant='sidebar-content']) ::slotted(sken-layout-region[name='footer']) {\n      display: none;\n    }\n\n    :host([variant='header-sidebar']) ::slotted(sken-layout-region[name='footer']) {\n      display: none;\n    }\n  `\n\n  override render() {\n    const hasSidebar = this.#variantHasSidebar(this.variant)\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      <div class=${bodyClasses} part=\"body\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  /**\n   * Single source of truth for which variants include a sidebar.\n   * Used to apply the `.with-sidebar` class on the body grid\n   * wrapper. Mirrors the per-variant CSS templates above.\n   */\n  #variantHasSidebar(variant: SkenLayoutVariant): boolean {\n    return variant === 'sidebar-content' || variant === 'header-sidebar' || variant === 'header-sidebar-footer'\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-layout': SkenLayout\n  }\n}\n"],"mappings":";;;;;AAmDA,IAAM,IAAuD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGa,IAAN,cAAyB,EAAW;;EAKoD,aAJnC,KAAA,UAAA,kBACgC,KAAA,aAAA,SAE7C,KAAA,kBAAA,SACgD,KAAA,cAAA;;;EAE7E,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA0HgB,EAAU,EAAc,EAAE,EAAE;;;qCAG5B,EAAU,EAAc,EAAE,EAAE;;;qCAG5B,EAAU,EAAc,EAAE,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiC/D,SAAkB;EAChB,IAAM,IAAa,KAAKA,GAAmB,KAAK,OAAO,GACjD,IAAc;GAClB;GACA,IAAa,iBAAiB;GAC9B,KAAc,KAAK,oBAAoB,QAAQ,gBAAgB;EACjE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEX,OAAO,CAAI;mBACI,EAAY;;;;CAI7B;CAOA,GAAmB,GAAqC;EACtD,OAAO,MAAY,qBAAqB,MAAY,oBAAoB,MAAY;CACtF;AACF;AAhMG,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAC1B,EAAA,CAAA,EAAS;CAAE,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GACpD,EAAA,CAAA,EAAS;CAAE,WAAW;CAAoB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAEzD,EAAA,CAAA,EAAS;CAAE,WAAW;CAAgB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GANvD,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}
+{"version":3,"file":"sken-layout.js","names":["#activeRoles","#hasSidebar"],"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 } 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   * 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  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":";;;;;;AAyDA,IAAM,IAAuD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAsBM,IAA0D;CAC9D,QAAQ;CACR,eAAe;CACf,SAAS;CACT,SAAS;CACT,QAAQ;AACV,GAGa,IAAN,cAAyB,EAAW;;EAMiB,aALA,KAAA,UAAA,kBACgC,KAAA,aAAA,SAE7C,KAAA,kBAAA,SACgD,KAAA,cAAA,MACnC,KAAA,UAAA;;CAS1D,IAAIA,KAAgD;EAClD,OAAQ,EAAqD,KAAK;CACpE;CAGA,IAAIC,KAAuB;EACzB,OAAO,KAAKD,GAAa,SAAS,SAAS;CAC7C;;EAEgB,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;UA8BX,EAAU,EAAkB,MAAM,EAAE;;;;;;;;;;UAUpC,EAAU,EAAkB,cAAc,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;UAyB5C,EAAU,EAAkB,OAAO,EAAE;;;;;;;;;;;UAWrC,EAAU,EAAkB,OAAO,EAAE;;;;;;;;;UASrC,EAAU,EAAkB,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCAuHT,EAAU,EAAc,EAAE,EAAE;;;qCAG5B,EAAU,EAAc,EAAE,EAAE;;;qCAG5B,EAAU,EAAc,EAAE,EAAE;;;;CAI/D,SAAkB;EAChB,IAAM,IAAQ,KAAKA,IACb,IAAa,KAAKC,IAClB,IAAc;GAClB;GACA,IAAa,iBAAiB;GAC9B,KAAc,KAAK,oBAAoB,QAAQ,gBAAgB;EACjE,CAAC,CACE,OAAO,OAAO,CAAC,CACf,KAAK,GAAG;EAEX,OAAO,CAAI;QAEP,EAAM,SAAS,QAAQ,IACnB,CAAI;;sBAGJ,GACL;QAEC,EAAM,SAAS,aAAa,IACxB,CAAI;;sBAGJ,GACL;mBACY,EAAY;UAErB,IACI,CAAI;;wBAGJ,GACL;;;;;QAMD,EAAM,SAAS,QAAQ,IACnB,CAAI;;sBAGJ,GACL;;CAEL;AACF;AA5RG,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAC1B,EAAA,CAAA,EAAS;CAAE,WAAW;CAAe,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,cAAA,KAAA,CAAA,GACpD,EAAA,CAAA,EAAS;CAAE,WAAW;CAAoB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAEzD,EAAA,CAAA,EAAS;CAAE,WAAW;CAAgB,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GACrD,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAP5B,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}

package/dist/sken-number-input.js

@@ -208,7 +208,9 @@ var s = 1, c = !0, l = class extends t {
          buttons from being squashed when the host's vertical
          rhythm is tight (sm). The explicit block-size wins. */
       flex-shrink: 0;
-      transition: color 120ms ease, background-color 120ms ease;
+      transition:
+        color 120ms ease,
+        background-color 120ms ease;
     }
 
     .stepper:hover:not(:disabled) {
@@ -408,10 +410,10 @@ var s = 1, c = !0, l = class extends t {
 		return r`
       <div class="field" part="field">
         ${this.label ? r`
-              <label class="label" part="label" data-required=${this.required}>
-                ${this.label}
-              </label>
-            ` : i}
+                <label class="label" part="label" data-required=${this.required}>
+                  ${this.label}
+                </label>
+              ` : i}
         <div class="input-wrapper" part="wrapper">
           <div class="slot slot-start" part="slot-start">
             <slot name="start"></slot>
@@ -441,49 +443,37 @@ var s = 1, c = !0, l = class extends t {
             <slot name="end"></slot>
           </div>
           ${this.showStepperButtons ? r`
-                <div class="steppers" part="steppers">
-                  <button
-                    class="stepper"
-                    part="stepper stepper-up"
-                    type="button"
-                    aria-label="Increment"
-                    ?disabled=${this.disabled || this.readonly || this.value !== void 0 && this.max !== void 0 && this.value >= this.max}
-                    @click=${this.#p}
-                  >
-                    +
-                  </button>
-                  <button
-                    class="stepper"
-                    part="stepper stepper-down"
-                    type="button"
-                    aria-label="Decrement"
-                    ?disabled=${this.disabled || this.readonly || this.value !== void 0 && this.min !== void 0 && this.value <= this.min}
-                    @click=${this.#m}
-                  >
-                    −
-                  </button>
-                </div>
-              ` : i}
+                  <div class="steppers" part="steppers">
+                    <button
+                      class="stepper"
+                      part="stepper stepper-up"
+                      type="button"
+                      aria-label="Increment"
+                      ?disabled=${this.disabled || this.readonly || this.value !== void 0 && this.max !== void 0 && this.value >= this.max}
+                      @click=${this.#p}
+                    >
+                      +
+                    </button>
+                    <button
+                      class="stepper"
+                      part="stepper stepper-down"
+                      type="button"
+                      aria-label="Decrement"
+                      ?disabled=${this.disabled || this.readonly || this.value !== void 0 && this.min !== void 0 && this.value <= this.min}
+                      @click=${this.#m}
+                    >
+                      −
+                    </button>
+                  </div>
+                ` : i}
         </div>
-        ${e.length > 0 ? r`
-              <div class="messages" part="messages">${e}</div>
-            ` : i}
+        ${e.length > 0 ? r` <div class="messages" part="messages">${e}</div> ` : i}
       </div>
     `;
 	}
 	#s() {
 		let e = [];
-		return this.invalidText && e.push(r`<p class="message" data-tone="invalid" part="message-invalid">
-          ${this.invalidText}
-        </p>`), this.warningText && e.push(r`<p class="message" data-tone="warning" part="message-warning">
-          ${this.warningText}
-        </p>`), this.infoText && e.push(r`<p class="message" data-tone="info" part="message-info">
-          ${this.infoText}
-        </p>`), this.validText && e.push(r`<p class="message" data-tone="valid" part="message-valid">
-          ${this.validText}
-        </p>`), this.helperText && e.length === 0 && e.push(r`<p class="message" data-tone="helper" part="message-helper">
-          ${this.helperText}
-        </p>`), e;
+		return this.invalidText && e.push(r`<p class="message" data-tone="invalid" part="message-invalid">${this.invalidText}</p>`), this.warningText && e.push(r`<p class="message" data-tone="warning" part="message-warning">${this.warningText}</p>`), this.infoText && e.push(r`<p class="message" data-tone="info" part="message-info">${this.infoText}</p>`), this.validText && e.push(r`<p class="message" data-tone="valid" part="message-valid">${this.validText}</p>`), this.helperText && e.length === 0 && e.push(r`<p class="message" data-tone="helper" part="message-helper">${this.helperText}</p>`), e;
 	}
 	#c;
 	#l;