@sken-ds/primitives 0.3.6 → 0.3.8

package/dist/sken-layout.js

@@ -0,0 +1,295 @@
+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";
+//#region src/components/sken-layout.ts
+var s = {
+	sm: "12rem",
+	md: "16rem",
+	lg: "20rem"
+}, c = {
+	topbar: "var(--sken-card)",
+	"primary-nav": "var(--sken-background)",
+	sidebar: "var(--sken-muted)",
+	content: "var(--sken-background)",
+	footer: "var(--sken-muted)"
+}, l = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "header-content", this.topbarMode = "fixed", this.sidebarPosition = "start", this.sidebarSize = "md", this.density = "none";
+	}
+	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. */
+    :host {
+      display: grid;
+      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);
+    }
+
+    .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';
+    }
+    .body.with-sidebar.sidebar-end {
+      grid-template-columns: 1fr var(--sken-layout-sidebar-width, 16rem);
+      grid-template-areas: 'content sidebar';
+    }
+
+    /* ── Per-region grid placement + DS-driven surfaces ──────────
+       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.
+
+       For each cell we apply:
+       - background color: the Sken surface token that matches
+         the cell's role (see REGION_BACKGROUND above). The
+         product can override per cell via
+         --sken-layout-region-{role}-background.
+       - padding: ZERO by default. The consumer decides
+         whether the topbar / sidebar / content / etc. need
+         padding and how much. This matches the iX
+         convention: the layout owns the grid + chrome
+         (background, border), and the cell contents own
+         the padding. Set density=comfortable or
+         density=compact to opt into the Sken default
+         padding scale. Per-cell override via
+         --sken-layout-region-{role}-padding-{block|inline}
+         (always wins over density).
+       - border: a single edge in the role's expected
+         direction (border-bottom for chrome above the
+         workspace, border-top for chrome below,
+         border-inline-end for the sidebar on the start
+         side). The sidebar swap for sidebar-position="end"
+         is below.
+       - min-block-size: 0 so a long content area can scroll
+         inside the host's 100dvh viewport instead of pushing
+         the layout out. */
+    ::slotted(sken-layout-region[name='topbar']) {
+      grid-area: topbar;
+      background: var(--sken-layout-region-topbar-background, ${i(c.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);
+    }
+    ::slotted(sken-layout-region[name='primary-nav']) {
+      grid-area: primary-nav;
+      background: var(
+        --sken-layout-region-primary-nav-background,
+        ${i(c["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);
+    }
+    ::slotted(sken-layout-region[name='sidebar']) {
+      grid-area: sidebar;
+      min-block-size: 0;
+      background: var(--sken-layout-region-sidebar-background, ${i(c.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']) {
+      grid-area: content;
+      min-block-size: 0;
+      background: var(--sken-layout-region-content-background, ${i(c.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']) {
+      grid-area: footer;
+      background: var(--sken-layout-region-footer-background, ${i(c.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']) ::slotted(sken-layout-region) {
+      --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);
+    }
+
+    /* ── 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']) ::slotted(sken-layout-region) {
+      --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 ─────────────────────────────── */
+    :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='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:
+        'topbar'
+        'primary-nav'
+        'body';
+    }
+    :host([variant='header-sidebar-footer']) {
+      grid-template-rows: auto auto 1fr auto;
+      grid-template-areas:
+        'topbar'
+        'primary-nav'
+        'body'
+        'footer';
+    }
+
+    /* ── Topbar mode ──────────────────────────────────────────────
+       'fixed': the host is 100dvh and the body scrolls under the
+       topbar. This is the default for admin consoles.
+       'auto': the topbar scrolls away with the page (marketing,
+       landing). */
+    :host([topbar-mode='auto']) {
+      block-size: auto;
+      min-block-size: 100dvh;
+    }
+
+    /* ── Sidebar position ─────────────────────────────────────────
+       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']) ::slotted(sken-layout-region[name='sidebar']) {
+      border-inline-end: none;
+      border-inline-start: 1px solid var(--sken-border);
+    }
+
+    /* ── Sidebar width override ─────────────────────────────────── */
+    :host([sidebar-size='sm']) {
+      --sken-layout-sidebar-width: ${i(s.sm)};
+    }
+    :host([sidebar-size='md']) {
+      --sken-layout-sidebar-width: ${i(s.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;
+    }
+  `;
+	}
+	render() {
+		let e = this.#e(this.variant), t = [
+			"body",
+			e ? "with-sidebar" : "",
+			e && this.sidebarPosition === "end" ? "sidebar-end" : ""
+		].filter(Boolean).join(" ");
+		return r`
+      <div class=${t} part="body">
+        <slot></slot>
+      </div>
+    `;
+	}
+	#e(e) {
+		return e === "sidebar-content" || e === "header-sidebar" || e === "header-sidebar-footer";
+	}
+};
+e([o({ reflect: !0 })], l.prototype, "variant", void 0), e([o({
+	attribute: "topbar-mode",
+	reflect: !0
+})], l.prototype, "topbarMode", void 0), e([o({
+	attribute: "sidebar-position",
+	reflect: !0
+})], l.prototype, "sidebarPosition", void 0), e([o({
+	attribute: "sidebar-size",
+	reflect: !0
+})], l.prototype, "sidebarSize", void 0), e([o({ reflect: !0 })], l.prototype, "density", void 0), l = e([a("sken-layout")], l);
+//#endregion
+export { l as SkenLayout };
+
+//# sourceMappingURL=sken-layout.js.map

package/dist/sken-layout.js.map

@@ -0,0 +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  SkenLayoutDensity,\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/**\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<string, 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  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 + DS-driven surfaces ──────────\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\n       For each cell we apply:\n       - background color: the Sken surface token that matches\n         the cell's role (see REGION_BACKGROUND above). The\n         product can override per cell via\n         --sken-layout-region-{role}-background.\n       - padding: ZERO by default. The consumer decides\n         whether the topbar / sidebar / content / etc. need\n         padding and how much. This matches the iX\n         convention: the layout owns the grid + chrome\n         (background, border), and the cell contents own\n         the padding. Set density=comfortable or\n         density=compact to opt into the Sken default\n         padding scale. Per-cell override via\n         --sken-layout-region-{role}-padding-{block|inline}\n         (always wins over density).\n       - border: a single edge in the role's expected\n         direction (border-bottom for chrome above the\n         workspace, border-top for chrome below,\n         border-inline-end for the sidebar on the start\n         side). The sidebar swap for sidebar-position=\"end\"\n         is below.\n       - min-block-size: 0 so a long content area can scroll\n         inside the host's 100dvh viewport instead of pushing\n         the layout out. */\n    ::slotted(sken-layout-region[name='topbar']) {\n      grid-area: topbar;\n      background: var(--sken-layout-region-topbar-background, ${unsafeCSS(REGION_BACKGROUND.topbar)});\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    ::slotted(sken-layout-region[name='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    ::slotted(sken-layout-region[name='sidebar']) {\n      grid-area: sidebar;\n      min-block-size: 0;\n      background: var(--sken-layout-region-sidebar-background, ${unsafeCSS(REGION_BACKGROUND.sidebar)});\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    ::slotted(sken-layout-region[name='content']) {\n      grid-area: content;\n      min-block-size: 0;\n      background: var(--sken-layout-region-content-background, ${unsafeCSS(REGION_BACKGROUND.content)});\n      padding-block: var(--sken-layout-region-content-padding-block, 0);\n      padding-inline: var(--sken-layout-region-content-padding-inline, 0);\n    }\n    ::slotted(sken-layout-region[name='footer']) {\n      grid-area: footer;\n      background: var(--sken-layout-region-footer-background, ${unsafeCSS(REGION_BACKGROUND.footer)});\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']) ::slotted(sken-layout-region) {\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']) ::slotted(sken-layout-region) {\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    :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       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']) ::slotted(sken-layout-region[name='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    /* ── 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":";;;;;AAoDA,IAAM,IAAuD;CAC3D,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAsBM,IAA4C;CAChD,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;;;EAE1C,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;gEAoE2C,EAAU,EAAkB,MAAM,EAAE;;;;;;;;;UAS1F,EAAU,EAAkB,cAAc,EAAE;;;;;;;;;iEASW,EAAU,EAAkB,OAAO,EAAE;;;;;;;;iEAQrC,EAAU,EAAkB,OAAO,EAAE;;;;;;gEAMtC,EAAU,EAAkB,MAAM,EAAE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qCA0G/D,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;AArRG,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;

package/dist/sken-number-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sken-number-input.js","names":["#rawText","#parseNumber","#syncFormValue","#clamp","#step","#commitValue","#internals","#slotEndObserver","#visibilityObserver","#adjustLayout","#renderMessages","#handleInput","#handleChange","#handleFocus","#handleBlur","#handleKeydown","#handleStepUp","#handleStepDown"],"sources":["../src/components/sken-number-input.ts"],"sourcesContent":["// ── <sken-number-input> — Sken-owned Web Component ─────────────────\n// Lit 3 primitive for numeric input with visible ± stepper buttons,\n// min/max clamping, and the same start/end slot system as\n// <sken-input>. Promoted from the SkenNumberInput PoC story (which\n// was a thin wrap of <ix-number-input>). The PoC proved the UX;\n// this primitive owns the contract.\n\nimport { LitElement, html, css, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport type { SkenNumberInputSize } from '@sken-ds/contracts'\n\n/**\n * Default step when the consumer does not pass one. Matches the\n * native `<input type=\"number\" step>` default.\n */\nconst DEFAULT_STEP = 1\n\n/**\n * Default value for `showStepperButtons`. The PoC validated that\n * the iX default of `false` is wrong for our use case: consumers\n * expect ± buttons for the numeric fields they use most (Alma\n * demo: quantity, temperature, score). The Sken primitive flips\n * the default to `true`; consumers who want a bare input pass\n * `showStepperButtons={false}` explicitly.\n */\nconst DEFAULT_SHOW_STEPPER_BUTTONS = true\n\n@customElement('sken-number-input')\nexport class SkenNumberInput extends LitElement {\n  // Form-associated custom element. Same pattern as SkenInput /\n  // SkenTextarea. The numeric value is stringified for\n  // FormData (FormData is text-only); undefined becomes the\n  // empty string. The implicit-submit-on-Enter rule still\n  // applies, so a form with a single number input and a\n  // submit button will submit on Enter.\n  // https://lit.dev/docs/components/form/\n  static formAssociated = true\n\n  // ElementInternals handle. Created in the constructor.\n  // Nullable to gracefully degrade in test environments.\n  #internals: ElementInternals | null = null\n\n  constructor() {\n    super()\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = null\n    }\n  }\n\n  // ── Props ─────────────────────────────────────────────────────\n  @property({ attribute: 'default-value', type: Number }) defaultValue: number | undefined = undefined\n  @property({ type: Number }) value: number | undefined = undefined\n  @property({ type: Number }) min: number | undefined = undefined\n  @property({ type: Number }) max: number | undefined = undefined\n  @property({ type: Number }) step: number = DEFAULT_STEP\n  @property({ attribute: 'show-stepper-buttons', reflect: true, type: Boolean }) showStepperButtons =\n    DEFAULT_SHOW_STEPPER_BUTTONS\n  @property() placeholder: string | undefined = undefined\n  @property() label: string | undefined = undefined\n  @property({ reflect: true, type: Boolean }) required = false\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ attribute: 'helper-text' }) helperText: string | undefined = undefined\n  @property({ attribute: 'info-text' }) infoText: string | undefined = undefined\n  @property({ attribute: 'warning-text' }) warningText: string | undefined = undefined\n  @property({ attribute: 'valid-text' }) validText: string | undefined = undefined\n  @property({ attribute: 'invalid-text' }) invalidText: string | undefined = undefined\n  @property({ attribute: 'text-alignment' }) textAlignment: 'start' | 'end' = 'end'\n  @property({ reflect: true }) size: SkenNumberInputSize = 'md'\n  @property({ reflect: true, type: Boolean }) invalid = false\n  @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n  @property() name: string | undefined = undefined\n\n  // ── Internal state ────────────────────────────────────────────\n  /**\n   * The raw text in the input. The DOM input is the source of\n   * truth for the text (so the user can type a partial value like\n   * \"-\", which is not a valid number yet). The numeric `value` is\n   * derived from this on commit (blur, Enter, stepper).\n   */\n  #rawText: string = ''\n\n  // ── DOM refs (queried on demand) ────────────────────────────\n\n  // ── Lifecycle ─────────────────────────────────────────────────\n  override connectedCallback(): void {\n    super.connectedCallback()\n    // Seed the raw text from the controlled value or the default.\n    // We do NOT trigger a re-render here; the property is only\n    // set after Lit has applied the host attributes, and the\n    // first render will read the right value through this.value.\n    if (this.value === undefined) {\n      this.#rawText = this.defaultValue !== undefined ? String(this.defaultValue) : ''\n    } else {\n      this.#rawText = String(this.value)\n    }\n    // Publish the initial value to the surrounding form.\n    this.#syncFormValue()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.#slotEndObserver?.disconnect()\n    this.#visibilityObserver?.disconnect()\n  }\n\n  // ── Form-association callbacks ─────────────────────────────\n  // formResetCallback: restore uncontrolled seed; re-render\n  // controlled so Lit re-publishes the controlled value.\n  formResetCallback(): void {\n    if (this.value === undefined) {\n      this.#rawText = this.defaultValue !== undefined ? String(this.defaultValue) : ''\n      const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n      if (inputEl) inputEl.value = this.#rawText\n      this.#syncFormValue()\n    } else {\n      this.requestUpdate()\n    }\n  }\n\n  // formDisabledCallback: mirror the form's :disabled state\n  // onto the prop. Lit re-renders; the inner <input> picks up\n  // ?disabled=${this.disabled} in the template.\n  formDisabledCallback(isDisabled: boolean): void {\n    this.disabled = isDisabled\n  }\n\n  // Publish the current value to the form. FormData is\n  // text-only, so we stringify the number (or empty string\n  // for undefined). The string roundtrip preserves precision\n  // for integers and finite decimals; consumers that need\n  // BigInt or arbitrary precision should re-parse on the\n  // server side.\n  #syncFormValue(): void {\n    if (!this.#internals) return\n    const value = this.value !== undefined ? String(this.value) : ''\n    this.#internals.setFormValue(value)\n  }\n\n  /**\n   * Set up the dynamic layout once the shadow root has the\n   * element children we need to measure. Same pattern as\n   * SkenInput: MutationObserver on the slot container to\n   * catch children being added/removed, IntersectionObserver\n   * to catch the case where the input is hidden at first\n   * connect (e.g. inside a closed <details> or an off-screen\n   * tab), and slotchange as belt-and-braces.\n   */\n  protected override firstUpdated(): void {\n    const endContainer = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    const endSlot = this.renderRoot.querySelector('slot[name=\"end\"]') as HTMLSlotElement | null\n    if (endContainer && endSlot) {\n      this.#slotEndObserver = new MutationObserver(() => this.#adjustLayout())\n      this.#slotEndObserver.observe(endContainer, { childList: true, subtree: true, attributes: true })\n      endSlot.addEventListener('slotchange', this.#adjustLayout)\n    }\n    this.#visibilityObserver = new IntersectionObserver(entries => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) this.#adjustLayout()\n      }\n    })\n    this.#visibilityObserver.observe(this)\n    this.#adjustLayout()\n  }\n\n  /**\n   * The gap between a slot's edge and the input's text. 0.5rem\n   * is what the SkenInput primitive uses (mirrors the iX rule).\n   * The number input needs an extra \"air\" margin because the\n   * stepper column is also on the right edge and we don't want\n   * the value text to crash into the slot.\n   */\n  #SLOT_AIR = '0.5rem'\n\n  /**\n   * Measure the stepper column width and the end slot width, then\n   * apply:\n   * - The input's padding-inline-end so the value text never\n   *   overlaps the slot OR the stepper.\n   * - The end slot's inset-inline-end so it sits to the LEFT of\n   *   the stepper (or at the right edge when no stepper).\n   *\n   * The math:\n   *   endInset      = stepperReserve + air      (slot's right edge)\n   *   paddingInline = max(endInset, stepperReserve) + air\n   * If the end slot is empty, its width is 0 and the calc\n   * falls back to the stepper-only reservation.\n   */\n  #adjustLayout = (): void => {\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    const stepperEl = this.renderRoot.querySelector('.steppers') as HTMLElement | null\n    const slotEndEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    if (!inputEl || !slotEndEl) return\n\n    requestAnimationFrame(() => {\n      if (!inputEl.isConnected) return\n      const stepperWidth = stepperEl && this.showStepperButtons\n        ? stepperEl.getBoundingClientRect().width\n        : 0\n      const endWidth = slotEndEl.getBoundingClientRect().width\n      const air = parseFloat(getComputedStyle(inputEl).fontSize) * 0.5 // 0.5em in px\n      const stepperReserve = stepperWidth\n      // The slot's right edge sits at stepperReserve + air from\n      // the input's right edge, so it never overlaps the stepper\n      // column.\n      const endInset = stepperReserve + air\n      slotEndEl.style.insetInlineEnd = endInset > 0 ? `${endInset}px` : '0.5rem'\n      // The input's padding-inline-end has to be at least the\n      // wider of (stepperReserve, endInset + endWidth) so the\n      // value text never overlaps either.\n      const textReserve = endInset + endWidth\n      const padEnd = Math.max(stepperReserve, textReserve) + air\n      inputEl.style.paddingInlineEnd = `${padEnd}px`\n    })\n  }\n\n  #slotEndObserver: MutationObserver | null = null\n  #visibilityObserver: IntersectionObserver | null = null\n\n  // ── Styles ────────────────────────────────────────────────────\n  static styles = css`\n    :host {\n      display: inline-block;\n      inline-size: 100%;\n    }\n\n    .field {\n      display: grid;\n      gap: 0.375rem;\n    }\n\n    .label {\n      font-size: 0.8125rem;\n      font-weight: 500;\n      color: var(--sken-foreground);\n    }\n\n    .label[data-required='true']::after {\n      content: ' *';\n      color: var(--sken-destructive);\n    }\n\n    .input-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      inline-size: 100%;\n    }\n\n    input {\n      box-sizing: border-box;\n      inline-size: 100%;\n      border: 1px solid var(--sken-border);\n      border-radius: var(--sken-md);\n      background: var(--sken-input);\n      color: var(--sken-foreground);\n      font-family: var(--sken-family-sans);\n      font-size: var(--sken-size-md);\n      line-height: 1.25;\n      text-overflow: ellipsis;\n      padding-block: var(--sken-2);\n      padding-inline: var(--sken-3);\n      /* When the ± steppers are visible, reserve the right edge\n         for them so the value text never overlaps. 1.5rem (button)\n         + 2 * 0.25rem (insets) + 0.25rem (air) = 2.25rem. */\n      padding-inline-end: var(--sken-3);\n      min-block-size: 2.25rem;\n      transition:\n        border-color 120ms ease,\n        box-shadow 120ms ease;\n      /* Hide the native steppers: we render our own. */\n      -moz-appearance: textfield;\n    }\n\n    input::-webkit-outer-spin-button,\n    input::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    input::placeholder {\n      color: var(--sken-muted-foreground);\n      opacity: 1;\n    }\n\n    /* ── Stepper buttons ───────────────────────────────────── */\n    /*\n     * The stepper column is a vertical pair of + and − buttons\n     * anchored to the right edge of the input. Sizes scale with\n     * the host's [size] attribute (sm / md / lg) so the buttons\n     * match the input's vertical rhythm. Default (md) is 24x20\n     * per button. Glyph color is --sken-foreground; hover swaps\n     * to --sken-primary. Disabled state uses --sken-disabled.\n     */\n    .steppers {\n      position: absolute;\n      inset-block: 0.25rem;\n      inset-inline-end: 0.25rem;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .stepper {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      inline-size: 1.5rem;\n      block-size: 1.25rem;\n      background: transparent;\n      border: 0;\n      padding: 0;\n      color: var(--sken-foreground);\n      cursor: pointer;\n      font-family: inherit;\n      font-size: 1rem;\n      line-height: 1;\n      font-weight: 600;\n      border-radius: var(--sken-sm, 0.25rem);\n      /* The parent .steppers is a flex column; prevent the\n         buttons from being squashed when the host's vertical\n         rhythm is tight (sm). The explicit block-size wins. */\n      flex-shrink: 0;\n      transition: color 120ms ease, background-color 120ms ease;\n    }\n\n    .stepper:hover:not(:disabled) {\n      color: var(--sken-primary);\n      /* No background fill on hover. A background would paint\n         over the input's right border, hiding it. The color\n         change to --sken-primary is enough affordance for a\n         20x24px icon button. */\n      background: transparent;\n    }\n\n    .stepper:focus-visible {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 1px;\n    }\n\n    .stepper:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n\n    /* When the ± steppers are visible, reserve the right edge\n       of the input so the value text never overlaps. The\n       reservation is 2rem for the md size (default): 1.5rem\n       (button) + 2 * 0.25rem (column insets). The sm / lg\n       variants below override the button size, so the\n       reservation needs to scale too. */\n    :host([show-stepper-buttons]) input {\n      padding-inline-end: 2rem;\n    }\n\n    /* ── Stepper sizes ─────────────────────────────────────── */\n    :host([size='sm']) .steppers {\n      inset-block: 0.125rem;\n      inset-inline-end: 0.125rem;\n      gap: 1px;\n    }\n    :host([size='sm']) .stepper {\n      inline-size: 1.125rem;\n      block-size: 0.875rem;\n      font-size: 0.75rem;\n    }\n    /* sm: 1.125rem (button) + 2 * 0.125rem (insets) = 1.375rem,\n       plus 0.125rem of breathing air = 1.5rem. */\n    :host([size='sm'][show-stepper-buttons]) input {\n      padding-inline-end: 1.5rem;\n    }\n\n    :host([size='lg']) .steppers {\n      inset-block: 0.375rem;\n      inset-inline-end: 0.375rem;\n      gap: 3px;\n    }\n    :host([size='lg']) .stepper {\n      inline-size: 1.75rem;\n      block-size: 1.5rem;\n      font-size: 1.125rem;\n    }\n    /* lg: 1.75rem (button) + 2 * 0.375rem (insets) = 2.5rem,\n       plus 0.25rem of breathing air = 2.75rem. */\n    :host([size='lg'][show-stepper-buttons]) input {\n      padding-inline-end: 2.75rem;\n    }\n\n    /* Hide steppers on touch devices where they would be hard\n       to hit accurately. The user can still use ↑/↓ keys or\n       type directly. */\n    @media (hover: none) {\n      .steppers {\n        display: none;\n      }\n      input {\n        padding-inline-end: var(--sken-3);\n      }\n      :host([size='sm']) input {\n        padding-inline-end: var(--sken-2);\n      }\n      :host([size='lg']) input {\n        padding-inline-end: var(--sken-4);\n      }\n    }\n\n    /* ── Slot containers ────────────────────────────────────── */\n    .slot {\n      position: absolute;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n      pointer-events: none;\n      color: var(--sken-muted-foreground);\n    }\n\n    .slot ::slotted(*) {\n      pointer-events: auto;\n    }\n\n    .slot-start {\n      inset-inline-start: 0.5rem;\n    }\n\n    /*\n     * The end slot's position is set in JS via the inline style\n     * (see #adjustLayout). The rule below is a fallback for the\n     * initial render before JS has measured the slot, and a\n     * sensible default when the slot is empty.\n     */\n    .slot-end {\n      inset-inline-end: 0.5rem;\n    }\n\n    /* ── States ─────────────────────────────────────────────── */\n    .input-wrapper:hover input:not(:disabled):not(:read-only) {\n      border-color: var(--sken-foreground);\n    }\n\n    .input-wrapper:focus-within input {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 2px;\n      border-color: var(--sken-primary);\n    }\n\n    input:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n\n    input:read-only {\n      background: var(--sken-muted);\n    }\n\n    :host([invalid]) input {\n      border-color: var(--sken-destructive);\n    }\n\n    :host([invalid]) .input-wrapper:focus-within input {\n      outline-color: var(--sken-destructive);\n    }\n\n    /* ── Sizes ──────────────────────────────────────────────── */\n    :host([size='sm']) input {\n      padding-block: var(--sken-1);\n      padding-inline: var(--sken-2);\n      font-size: var(--sken-size-sm);\n      /* 2 × 0.875rem (buttons) + 1px (gap) + 2 × 0.125rem\n         (insets) = ~2.0625rem. Round up to 2.25rem for visual\n         breathing room. */\n      min-block-size: 2.25rem;\n    }\n    :host([size='md']) input {\n      /* Default styles above. */\n    }\n    :host([size='lg']) input {\n      padding-block: var(--sken-3);\n      padding-inline: var(--sken-4);\n      font-size: var(--sken-size-lg);\n      /* 2 × 1.5rem (buttons) + 3px (gap) + 2 × 0.375rem\n         (insets) = ~3.9375rem. Round up to 4rem. */\n      min-block-size: 4rem;\n    }\n\n    /* ── Validation messages ─────────────────────────────────── */\n    .messages {\n      display: grid;\n      gap: 0.25rem;\n    }\n\n    .message {\n      margin: 0;\n      font-size: 0.75rem;\n      line-height: 1.4;\n    }\n\n    .message[data-tone='info'] {\n      color: var(--sken-info, #0082ff);\n    }\n\n    .message[data-tone='warning'] {\n      color: var(--sken-warning, #f59e0b);\n    }\n\n    .message[data-tone='valid'] {\n      color: var(--sken-success, #10b981);\n    }\n\n    .message[data-tone='invalid'] {\n      color: var(--sken-destructive, #dc2626);\n    }\n\n    .message[data-tone='helper'] {\n      color: var(--sken-muted-foreground);\n    }\n  `\n\n  // ── Render ────────────────────────────────────────────────────\n  protected override render() {\n    const messages = this.#renderMessages()\n    return html`\n      <div class=\"field\" part=\"field\">\n        ${this.label\n          ? html`\n              <label class=\"label\" part=\"label\" data-required=${this.required}>\n                ${this.label}\n              </label>\n            `\n          : nothing}\n        <div class=\"input-wrapper\" part=\"wrapper\">\n          <div class=\"slot slot-start\" part=\"slot-start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <input\n            part=\"input\"\n            type=\"number\"\n            .value=${this.#rawText}\n            placeholder=${this.placeholder ?? ''}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            min=${this.min ?? ''}\n            max=${this.max ?? ''}\n            step=${this.step}\n            aria-invalid=${this.invalid ? 'true' : 'false'}\n            aria-describedby=${this.describedById ?? ''}\n            name=${this.name ?? ''}\n            style=\"text-align: ${this.textAlignment}\"\n            @input=${this.#handleInput}\n            @change=${this.#handleChange}\n            @focus=${this.#handleFocus}\n            @blur=${this.#handleBlur}\n            @keydown=${this.#handleKeydown}\n          />\n          <div class=\"slot slot-end\" part=\"slot-end\">\n            <slot name=\"end\"></slot>\n          </div>\n          ${this.showStepperButtons\n            ? html`\n                <div class=\"steppers\" part=\"steppers\">\n                  <button\n                    class=\"stepper\"\n                    part=\"stepper stepper-up\"\n                    type=\"button\"\n                    aria-label=\"Increment\"\n                    ?disabled=${this.disabled || this.readonly ||\n                      (this.value !== undefined && this.max !== undefined && this.value >= this.max)}\n                    @click=${this.#handleStepUp}\n                  >\n                    +\n                  </button>\n                  <button\n                    class=\"stepper\"\n                    part=\"stepper stepper-down\"\n                    type=\"button\"\n                    aria-label=\"Decrement\"\n                    ?disabled=${this.disabled || this.readonly ||\n                      (this.value !== undefined && this.min !== undefined && this.value <= this.min)}\n                    @click=${this.#handleStepDown}\n                  >\n                    −\n                  </button>\n                </div>\n              `\n            : nothing}\n        </div>\n        ${messages.length > 0\n          ? html`\n              <div class=\"messages\" part=\"messages\">${messages}</div>\n            `\n          : nothing}\n      </div>\n    `\n  }\n\n  #renderMessages() {\n    const messages: ReturnType<typeof html>[] = []\n    if (this.invalidText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"invalid\" part=\"message-invalid\">\n          ${this.invalidText}\n        </p>`,\n      )\n    }\n    if (this.warningText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"warning\" part=\"message-warning\">\n          ${this.warningText}\n        </p>`,\n      )\n    }\n    if (this.infoText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"info\" part=\"message-info\">\n          ${this.infoText}\n        </p>`,\n      )\n    }\n    if (this.validText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"valid\" part=\"message-valid\">\n          ${this.validText}\n        </p>`,\n      )\n    }\n    if (this.helperText && messages.length === 0) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"helper\" part=\"message-helper\">\n          ${this.helperText}\n        </p>`,\n      )\n    }\n    return messages\n  }\n\n  // ── Event handlers ───────────────────────────────────────────\n  #handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    this.#rawText = target.value\n    // Emit the parsed number (or undefined if empty / invalid).\n    const parsed = this.#parseNumber(target.value)\n    if (this.value === undefined) {\n      // Uncontrolled: store internally, do not mutate this.value\n      // because the contract is \"controlled by the consumer\".\n      this.#syncFormValue()\n      this.dispatchEvent(\n        new CustomEvent<number | undefined>('sken-input', {\n          detail: parsed,\n          bubbles: true,\n          composed: true,\n        }),\n      )\n    } else {\n      this.#syncFormValue()\n      this.dispatchEvent(\n        new CustomEvent<number | undefined>('sken-input', {\n          detail: parsed,\n          bubbles: true,\n          composed: true,\n        }),\n      )\n    }\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const parsed = this.#parseNumber(target.value)\n    // Clamp on commit. If the user typed 150 with max=100, we\n    // commit 100 and update the input text.\n    const clamped = this.#clamp(parsed)\n    if (clamped !== parsed) {\n      this.#rawText = clamped !== undefined ? String(clamped) : ''\n      target.value = this.#rawText\n    }\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-change', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #handleFocus = (_event: FocusEvent) => {\n    this.dispatchEvent(new CustomEvent('sken-focus', { bubbles: true, composed: true }))\n  }\n\n  #handleBlur = (_event: FocusEvent) => {\n    this.dispatchEvent(new CustomEvent('sken-blur', { bubbles: true, composed: true }))\n  }\n\n  #handleKeydown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n    // Shift+Arrow and PageUp/PageDown apply a 10x multiplier to\n    // the step. This is the standard \"fast forward\" pattern in\n    // numeric inputs across Mature DS (iX, Material, AntD). It\n    // lets the consumer reach the target faster when the step\n    // is small relative to the typical range.\n    const multiplier = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this.#step(+1, multiplier)\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      this.#step(-1, multiplier)\n    } else if (event.key === 'PageUp') {\n      event.preventDefault()\n      this.#step(+1, 10)\n    } else if (event.key === 'PageDown') {\n      event.preventDefault()\n      this.#step(-1, 10)\n    } else if (event.key === 'Home' && this.min !== undefined) {\n      event.preventDefault()\n      this.#commitValue(this.min)\n    } else if (event.key === 'End' && this.max !== undefined) {\n      event.preventDefault()\n      this.#commitValue(this.max)\n    } else if (event.key === 'Enter') {\n      // The browser fires a `change` event on Enter for\n      // <input type=\"number\">, so we don't need to commit\n      // anything manually. We DO need to bridge the shadow\n      // boundary so the surrounding <form> receives a submit\n      // event — the browser's implicit submission algorithm\n      // does not see the inner input. Mirrors SkenInput and\n      // SkenTextarea. `isComposing` guards IME composition.\n      if (event.isComposing) return\n      // preventDefault runs even without ElementInternals,\n      // keeping the observable behaviour consistent.\n      event.preventDefault()\n      const form = this.#internals?.form\n      if (!form) return\n      form.requestSubmit()\n    }\n  }\n\n  #handleStepUp = () => this.#step(+1)\n  #handleStepDown = () => this.#step(-1)\n\n  // ── Helpers ───────────────────────────────────────────────────\n  /**\n   * Increment / decrement the value by `step * multiplier`,\n   * clamped at [min, max]. Emits `sken-input` and `sken-change`\n   * (we treat the stepper as a commit, not a keystroke). The\n   * `multiplier` defaults to 1; the keyboard handler passes 10\n   * for Shift+Arrow and PageUp/PageDown (the \"fast forward\"\n   * pattern).\n   *\n   * The current value is read from the rendered <input>, NOT\n   * from `this.value`. Reading from the input is robust for\n   * both modes:\n   * - Controlled: the consumer is async (Vue's reactive update\n   *   applies on the next tick). By the time the second click\n   *   arrives, the consumer's `value` prop may still be the\n   *   pre-click value, but the input's `.value` is already\n   *   updated by #commitValue from the first click.\n   * - Uncontrolled: the primitive owns the value. The input's\n   *   `.value` is the source of truth; `this.value` is the\n   *   initial seed and not maintained by the primitive in this\n   *   mode.\n   */\n  #step(direction: 1 | -1, multiplier: number = 1) {\n    if (this.disabled || this.readonly) return\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    const text = inputEl?.value ?? ''\n    const current = text === '' ? (this.value ?? 0) : Number(text)\n    if (!Number.isFinite(current)) return\n    const next = current + direction * this.step * multiplier\n    this.#commitValue(next)\n  }\n\n  /**\n   * Commit a value: clamp, update internal state, emit events.\n   * Same path used by the stepper buttons and the keyboard\n   * Home / End shortcuts.\n   */\n  #commitValue(raw: number) {\n    const clamped = this.#clamp(raw)\n    this.#rawText = clamped !== undefined ? String(clamped) : ''\n    // Update the DOM input so the next @input sees the new value\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    if (inputEl) inputEl.value = this.#rawText\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-input', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-change', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #clamp(value: number | undefined): number | undefined {\n    if (value === undefined || Number.isNaN(value)) return undefined\n    let v = value\n    if (this.min !== undefined && v < this.min) v = this.min\n    if (this.max !== undefined && v > this.max) v = this.max\n    return v\n  }\n\n  #parseNumber(text: string): number | undefined {\n    if (text === '' || text === '-') return undefined\n    const n = Number(text)\n    if (Number.isNaN(n)) return undefined\n    return n\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-number-input': SkenNumberInput\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"sken-number-input.js","names":["#rawText","#parseNumber","#syncFormValue","#clamp","#step","#commitValue","#internals","#slotEndObserver","#visibilityObserver","#adjustLayout","#renderMessages","#handleInput","#handleChange","#handleFocus","#handleBlur","#handleKeydown","#handleStepUp","#handleStepDown"],"sources":["../src/components/sken-number-input.ts"],"sourcesContent":["// ── <sken-number-input> — Sken-owned Web Component ─────────────────\n// Lit 3 primitive for numeric input with visible ± stepper buttons,\n// min/max clamping, and the same start/end slot system as\n// <sken-input>. Promoted from the SkenNumberInput PoC story (which\n// was a thin wrap of <ix-number-input>). The PoC proved the UX;\n// this primitive owns the contract.\n\nimport type { SkenNumberInputSize } from '@sken-ds/contracts'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n/**\n * Default step when the consumer does not pass one. Matches the\n * native `<input type=\"number\" step>` default.\n */\nconst DEFAULT_STEP = 1\n\n/**\n * Default value for `showStepperButtons`. The PoC validated that\n * the iX default of `false` is wrong for our use case: consumers\n * expect ± buttons for the numeric fields they use most (Alma\n * demo: quantity, temperature, score). The Sken primitive flips\n * the default to `true`; consumers who want a bare input pass\n * `showStepperButtons={false}` explicitly.\n */\nconst DEFAULT_SHOW_STEPPER_BUTTONS = true\n\n@customElement('sken-number-input')\nexport class SkenNumberInput extends LitElement {\n  // Form-associated custom element. Same pattern as SkenInput /\n  // SkenTextarea. The numeric value is stringified for\n  // FormData (FormData is text-only); undefined becomes the\n  // empty string. The implicit-submit-on-Enter rule still\n  // applies, so a form with a single number input and a\n  // submit button will submit on Enter.\n  // https://lit.dev/docs/components/form/\n  static formAssociated = true\n\n  // ElementInternals handle. Created in the constructor.\n  // Nullable to gracefully degrade in test environments.\n  #internals: ElementInternals | null = null\n\n  constructor() {\n    super()\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = null\n    }\n  }\n\n  // ── Props ─────────────────────────────────────────────────────\n  @property({ attribute: 'default-value', type: Number }) defaultValue: number | undefined =\n    undefined\n  @property({ type: Number }) value: number | undefined = undefined\n  @property({ type: Number }) min: number | undefined = undefined\n  @property({ type: Number }) max: number | undefined = undefined\n  @property({ type: Number }) step: number = DEFAULT_STEP\n  @property({ attribute: 'show-stepper-buttons', reflect: true, type: Boolean })\n  showStepperButtons = DEFAULT_SHOW_STEPPER_BUTTONS\n  @property() placeholder: string | undefined = undefined\n  @property() label: string | undefined = undefined\n  @property({ reflect: true, type: Boolean }) required = false\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ attribute: 'helper-text' }) helperText: string | undefined = undefined\n  @property({ attribute: 'info-text' }) infoText: string | undefined = undefined\n  @property({ attribute: 'warning-text' }) warningText: string | undefined = undefined\n  @property({ attribute: 'valid-text' }) validText: string | undefined = undefined\n  @property({ attribute: 'invalid-text' }) invalidText: string | undefined = undefined\n  @property({ attribute: 'text-alignment' }) textAlignment: 'start' | 'end' = 'end'\n  @property({ reflect: true }) size: SkenNumberInputSize = 'md'\n  @property({ reflect: true, type: Boolean }) invalid = false\n  @property({ attribute: 'described-by-id' }) describedById: string | undefined = undefined\n  @property() name: string | undefined = undefined\n\n  // ── Internal state ────────────────────────────────────────────\n  /**\n   * The raw text in the input. The DOM input is the source of\n   * truth for the text (so the user can type a partial value like\n   * \"-\", which is not a valid number yet). The numeric `value` is\n   * derived from this on commit (blur, Enter, stepper).\n   */\n  #rawText: string = ''\n\n  // ── DOM refs (queried on demand) ────────────────────────────\n\n  // ── Lifecycle ─────────────────────────────────────────────────\n  override connectedCallback(): void {\n    super.connectedCallback()\n    // Seed the raw text from the controlled value or the default.\n    // We do NOT trigger a re-render here; the property is only\n    // set after Lit has applied the host attributes, and the\n    // first render will read the right value through this.value.\n    if (this.value === undefined) {\n      this.#rawText = this.defaultValue !== undefined ? String(this.defaultValue) : ''\n    } else {\n      this.#rawText = String(this.value)\n    }\n    // Publish the initial value to the surrounding form.\n    this.#syncFormValue()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.#slotEndObserver?.disconnect()\n    this.#visibilityObserver?.disconnect()\n  }\n\n  // ── Form-association callbacks ─────────────────────────────\n  // formResetCallback: restore uncontrolled seed; re-render\n  // controlled so Lit re-publishes the controlled value.\n  formResetCallback(): void {\n    if (this.value === undefined) {\n      this.#rawText = this.defaultValue !== undefined ? String(this.defaultValue) : ''\n      const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n      if (inputEl) inputEl.value = this.#rawText\n      this.#syncFormValue()\n    } else {\n      this.requestUpdate()\n    }\n  }\n\n  // formDisabledCallback: mirror the form's :disabled state\n  // onto the prop. Lit re-renders; the inner <input> picks up\n  // ?disabled=${this.disabled} in the template.\n  formDisabledCallback(isDisabled: boolean): void {\n    this.disabled = isDisabled\n  }\n\n  // Publish the current value to the form. FormData is\n  // text-only, so we stringify the number (or empty string\n  // for undefined). The string roundtrip preserves precision\n  // for integers and finite decimals; consumers that need\n  // BigInt or arbitrary precision should re-parse on the\n  // server side.\n  #syncFormValue(): void {\n    if (!this.#internals) return\n    const value = this.value !== undefined ? String(this.value) : ''\n    this.#internals.setFormValue(value)\n  }\n\n  /**\n   * Set up the dynamic layout once the shadow root has the\n   * element children we need to measure. Same pattern as\n   * SkenInput: MutationObserver on the slot container to\n   * catch children being added/removed, IntersectionObserver\n   * to catch the case where the input is hidden at first\n   * connect (e.g. inside a closed <details> or an off-screen\n   * tab), and slotchange as belt-and-braces.\n   */\n  protected override firstUpdated(): void {\n    const endContainer = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    const endSlot = this.renderRoot.querySelector('slot[name=\"end\"]') as HTMLSlotElement | null\n    if (endContainer && endSlot) {\n      this.#slotEndObserver = new MutationObserver(() => this.#adjustLayout())\n      this.#slotEndObserver.observe(endContainer, {\n        childList: true,\n        subtree: true,\n        attributes: true,\n      })\n      endSlot.addEventListener('slotchange', this.#adjustLayout)\n    }\n    this.#visibilityObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) this.#adjustLayout()\n      }\n    })\n    this.#visibilityObserver.observe(this)\n    this.#adjustLayout()\n  }\n\n  /**\n   * The gap between a slot's edge and the input's text. 0.5rem\n   * is what the SkenInput primitive uses (mirrors the iX rule).\n   * The number input needs an extra \"air\" margin because the\n   * stepper column is also on the right edge and we don't want\n   * the value text to crash into the slot.\n   */\n  #SLOT_AIR = '0.5rem'\n\n  /**\n   * Measure the stepper column width and the end slot width, then\n   * apply:\n   * - The input's padding-inline-end so the value text never\n   *   overlaps the slot OR the stepper.\n   * - The end slot's inset-inline-end so it sits to the LEFT of\n   *   the stepper (or at the right edge when no stepper).\n   *\n   * The math:\n   *   endInset      = stepperReserve + air      (slot's right edge)\n   *   paddingInline = max(endInset, stepperReserve) + air\n   * If the end slot is empty, its width is 0 and the calc\n   * falls back to the stepper-only reservation.\n   */\n  #adjustLayout = (): void => {\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    const stepperEl = this.renderRoot.querySelector('.steppers') as HTMLElement | null\n    const slotEndEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    if (!inputEl || !slotEndEl) return\n\n    requestAnimationFrame(() => {\n      if (!inputEl.isConnected) return\n      const stepperWidth =\n        stepperEl && this.showStepperButtons ? stepperEl.getBoundingClientRect().width : 0\n      const endWidth = slotEndEl.getBoundingClientRect().width\n      const air = parseFloat(getComputedStyle(inputEl).fontSize) * 0.5 // 0.5em in px\n      const stepperReserve = stepperWidth\n      // The slot's right edge sits at stepperReserve + air from\n      // the input's right edge, so it never overlaps the stepper\n      // column.\n      const endInset = stepperReserve + air\n      slotEndEl.style.insetInlineEnd = endInset > 0 ? `${endInset}px` : '0.5rem'\n      // The input's padding-inline-end has to be at least the\n      // wider of (stepperReserve, endInset + endWidth) so the\n      // value text never overlaps either.\n      const textReserve = endInset + endWidth\n      const padEnd = Math.max(stepperReserve, textReserve) + air\n      inputEl.style.paddingInlineEnd = `${padEnd}px`\n    })\n  }\n\n  #slotEndObserver: MutationObserver | null = null\n  #visibilityObserver: IntersectionObserver | null = null\n\n  // ── Styles ────────────────────────────────────────────────────\n  static styles = css`\n    :host {\n      display: inline-block;\n      inline-size: 100%;\n    }\n\n    .field {\n      display: grid;\n      gap: 0.375rem;\n    }\n\n    .label {\n      font-size: 0.8125rem;\n      font-weight: 500;\n      color: var(--sken-foreground);\n    }\n\n    .label[data-required='true']::after {\n      content: ' *';\n      color: var(--sken-destructive);\n    }\n\n    .input-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      inline-size: 100%;\n    }\n\n    input {\n      box-sizing: border-box;\n      inline-size: 100%;\n      border: 1px solid var(--sken-border);\n      border-radius: var(--sken-md);\n      background: var(--sken-input);\n      color: var(--sken-foreground);\n      font-family: var(--sken-family-sans);\n      font-size: var(--sken-size-md);\n      line-height: 1.25;\n      text-overflow: ellipsis;\n      padding-block: var(--sken-2);\n      padding-inline: var(--sken-3);\n      /* When the ± steppers are visible, reserve the right edge\n         for them so the value text never overlaps. 1.5rem (button)\n         + 2 * 0.25rem (insets) + 0.25rem (air) = 2.25rem. */\n      padding-inline-end: var(--sken-3);\n      min-block-size: 2.25rem;\n      transition:\n        border-color 120ms ease,\n        box-shadow 120ms ease;\n      /* Hide the native steppers: we render our own. */\n      -moz-appearance: textfield;\n    }\n\n    input::-webkit-outer-spin-button,\n    input::-webkit-inner-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n\n    input::placeholder {\n      color: var(--sken-muted-foreground);\n      opacity: 1;\n    }\n\n    /* ── Stepper buttons ───────────────────────────────────── */\n    /*\n     * The stepper column is a vertical pair of + and − buttons\n     * anchored to the right edge of the input. Sizes scale with\n     * the host's [size] attribute (sm / md / lg) so the buttons\n     * match the input's vertical rhythm. Default (md) is 24x20\n     * per button. Glyph color is --sken-foreground; hover swaps\n     * to --sken-primary. Disabled state uses --sken-disabled.\n     */\n    .steppers {\n      position: absolute;\n      inset-block: 0.25rem;\n      inset-inline-end: 0.25rem;\n      display: flex;\n      flex-direction: column;\n      gap: 2px;\n      align-items: center;\n      justify-content: center;\n    }\n\n    .stepper {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      inline-size: 1.5rem;\n      block-size: 1.25rem;\n      background: transparent;\n      border: 0;\n      padding: 0;\n      color: var(--sken-foreground);\n      cursor: pointer;\n      font-family: inherit;\n      font-size: 1rem;\n      line-height: 1;\n      font-weight: 600;\n      border-radius: var(--sken-sm, 0.25rem);\n      /* The parent .steppers is a flex column; prevent the\n         buttons from being squashed when the host's vertical\n         rhythm is tight (sm). The explicit block-size wins. */\n      flex-shrink: 0;\n      transition:\n        color 120ms ease,\n        background-color 120ms ease;\n    }\n\n    .stepper:hover:not(:disabled) {\n      color: var(--sken-primary);\n      /* No background fill on hover. A background would paint\n         over the input's right border, hiding it. The color\n         change to --sken-primary is enough affordance for a\n         20x24px icon button. */\n      background: transparent;\n    }\n\n    .stepper:focus-visible {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 1px;\n    }\n\n    .stepper:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n\n    /* When the ± steppers are visible, reserve the right edge\n       of the input so the value text never overlaps. The\n       reservation is 2rem for the md size (default): 1.5rem\n       (button) + 2 * 0.25rem (column insets). The sm / lg\n       variants below override the button size, so the\n       reservation needs to scale too. */\n    :host([show-stepper-buttons]) input {\n      padding-inline-end: 2rem;\n    }\n\n    /* ── Stepper sizes ─────────────────────────────────────── */\n    :host([size='sm']) .steppers {\n      inset-block: 0.125rem;\n      inset-inline-end: 0.125rem;\n      gap: 1px;\n    }\n    :host([size='sm']) .stepper {\n      inline-size: 1.125rem;\n      block-size: 0.875rem;\n      font-size: 0.75rem;\n    }\n    /* sm: 1.125rem (button) + 2 * 0.125rem (insets) = 1.375rem,\n       plus 0.125rem of breathing air = 1.5rem. */\n    :host([size='sm'][show-stepper-buttons]) input {\n      padding-inline-end: 1.5rem;\n    }\n\n    :host([size='lg']) .steppers {\n      inset-block: 0.375rem;\n      inset-inline-end: 0.375rem;\n      gap: 3px;\n    }\n    :host([size='lg']) .stepper {\n      inline-size: 1.75rem;\n      block-size: 1.5rem;\n      font-size: 1.125rem;\n    }\n    /* lg: 1.75rem (button) + 2 * 0.375rem (insets) = 2.5rem,\n       plus 0.25rem of breathing air = 2.75rem. */\n    :host([size='lg'][show-stepper-buttons]) input {\n      padding-inline-end: 2.75rem;\n    }\n\n    /* Hide steppers on touch devices where they would be hard\n       to hit accurately. The user can still use ↑/↓ keys or\n       type directly. */\n    @media (hover: none) {\n      .steppers {\n        display: none;\n      }\n      input {\n        padding-inline-end: var(--sken-3);\n      }\n      :host([size='sm']) input {\n        padding-inline-end: var(--sken-2);\n      }\n      :host([size='lg']) input {\n        padding-inline-end: var(--sken-4);\n      }\n    }\n\n    /* ── Slot containers ────────────────────────────────────── */\n    .slot {\n      position: absolute;\n      display: flex;\n      align-items: center;\n      justify-content: center;\n      z-index: 1;\n      pointer-events: none;\n      color: var(--sken-muted-foreground);\n    }\n\n    .slot ::slotted(*) {\n      pointer-events: auto;\n    }\n\n    .slot-start {\n      inset-inline-start: 0.5rem;\n    }\n\n    /*\n     * The end slot's position is set in JS via the inline style\n     * (see #adjustLayout). The rule below is a fallback for the\n     * initial render before JS has measured the slot, and a\n     * sensible default when the slot is empty.\n     */\n    .slot-end {\n      inset-inline-end: 0.5rem;\n    }\n\n    /* ── States ─────────────────────────────────────────────── */\n    .input-wrapper:hover input:not(:disabled):not(:read-only) {\n      border-color: var(--sken-foreground);\n    }\n\n    .input-wrapper:focus-within input {\n      outline: 2px solid var(--sken-ring, currentColor);\n      outline-offset: 2px;\n      border-color: var(--sken-primary);\n    }\n\n    input:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n\n    input:read-only {\n      background: var(--sken-muted);\n    }\n\n    :host([invalid]) input {\n      border-color: var(--sken-destructive);\n    }\n\n    :host([invalid]) .input-wrapper:focus-within input {\n      outline-color: var(--sken-destructive);\n    }\n\n    /* ── Sizes ──────────────────────────────────────────────── */\n    :host([size='sm']) input {\n      padding-block: var(--sken-1);\n      padding-inline: var(--sken-2);\n      font-size: var(--sken-size-sm);\n      /* 2 × 0.875rem (buttons) + 1px (gap) + 2 × 0.125rem\n         (insets) = ~2.0625rem. Round up to 2.25rem for visual\n         breathing room. */\n      min-block-size: 2.25rem;\n    }\n    :host([size='md']) input {\n      /* Default styles above. */\n    }\n    :host([size='lg']) input {\n      padding-block: var(--sken-3);\n      padding-inline: var(--sken-4);\n      font-size: var(--sken-size-lg);\n      /* 2 × 1.5rem (buttons) + 3px (gap) + 2 × 0.375rem\n         (insets) = ~3.9375rem. Round up to 4rem. */\n      min-block-size: 4rem;\n    }\n\n    /* ── Validation messages ─────────────────────────────────── */\n    .messages {\n      display: grid;\n      gap: 0.25rem;\n    }\n\n    .message {\n      margin: 0;\n      font-size: 0.75rem;\n      line-height: 1.4;\n    }\n\n    .message[data-tone='info'] {\n      color: var(--sken-info, #0082ff);\n    }\n\n    .message[data-tone='warning'] {\n      color: var(--sken-warning, #f59e0b);\n    }\n\n    .message[data-tone='valid'] {\n      color: var(--sken-success, #10b981);\n    }\n\n    .message[data-tone='invalid'] {\n      color: var(--sken-destructive, #dc2626);\n    }\n\n    .message[data-tone='helper'] {\n      color: var(--sken-muted-foreground);\n    }\n  `\n\n  // ── Render ────────────────────────────────────────────────────\n  protected override render() {\n    const messages = this.#renderMessages()\n    return html`\n      <div class=\"field\" part=\"field\">\n        ${\n          this.label\n            ? html`\n                <label class=\"label\" part=\"label\" data-required=${this.required}>\n                  ${this.label}\n                </label>\n              `\n            : nothing\n        }\n        <div class=\"input-wrapper\" part=\"wrapper\">\n          <div class=\"slot slot-start\" part=\"slot-start\">\n            <slot name=\"start\"></slot>\n          </div>\n          <input\n            part=\"input\"\n            type=\"number\"\n            .value=${this.#rawText}\n            placeholder=${this.placeholder ?? ''}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            min=${this.min ?? ''}\n            max=${this.max ?? ''}\n            step=${this.step}\n            aria-invalid=${this.invalid ? 'true' : 'false'}\n            aria-describedby=${this.describedById ?? ''}\n            name=${this.name ?? ''}\n            style=\"text-align: ${this.textAlignment}\"\n            @input=${this.#handleInput}\n            @change=${this.#handleChange}\n            @focus=${this.#handleFocus}\n            @blur=${this.#handleBlur}\n            @keydown=${this.#handleKeydown}\n          />\n          <div class=\"slot slot-end\" part=\"slot-end\">\n            <slot name=\"end\"></slot>\n          </div>\n          ${\n            this.showStepperButtons\n              ? html`\n                  <div class=\"steppers\" part=\"steppers\">\n                    <button\n                      class=\"stepper\"\n                      part=\"stepper stepper-up\"\n                      type=\"button\"\n                      aria-label=\"Increment\"\n                      ?disabled=${\n                      this.disabled ||\n                      this.readonly ||\n                      (this.value !== undefined && this.max !== undefined && this.value >= this.max)\n                    }\n                      @click=${this.#handleStepUp}\n                    >\n                      +\n                    </button>\n                    <button\n                      class=\"stepper\"\n                      part=\"stepper stepper-down\"\n                      type=\"button\"\n                      aria-label=\"Decrement\"\n                      ?disabled=${\n                      this.disabled ||\n                      this.readonly ||\n                      (this.value !== undefined && this.min !== undefined && this.value <= this.min)\n                    }\n                      @click=${this.#handleStepDown}\n                    >\n                      −\n                    </button>\n                  </div>\n                `\n              : nothing\n          }\n        </div>\n        ${\n          messages.length > 0\n            ? html` <div class=\"messages\" part=\"messages\">${messages}</div> `\n            : nothing\n        }\n      </div>\n    `\n  }\n\n  #renderMessages() {\n    const messages: ReturnType<typeof html>[] = []\n    if (this.invalidText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"invalid\" part=\"message-invalid\">${this.invalidText}</p>`,\n      )\n    }\n    if (this.warningText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"warning\" part=\"message-warning\">${this.warningText}</p>`,\n      )\n    }\n    if (this.infoText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"info\" part=\"message-info\">${this.infoText}</p>`,\n      )\n    }\n    if (this.validText) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"valid\" part=\"message-valid\">${this.validText}</p>`,\n      )\n    }\n    if (this.helperText && messages.length === 0) {\n      messages.push(\n        html`<p class=\"message\" data-tone=\"helper\" part=\"message-helper\">${this.helperText}</p>`,\n      )\n    }\n    return messages\n  }\n\n  // ── Event handlers ───────────────────────────────────────────\n  #handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    this.#rawText = target.value\n    // Emit the parsed number (or undefined if empty / invalid).\n    const parsed = this.#parseNumber(target.value)\n    if (this.value === undefined) {\n      // Uncontrolled: store internally, do not mutate this.value\n      // because the contract is \"controlled by the consumer\".\n      this.#syncFormValue()\n      this.dispatchEvent(\n        new CustomEvent<number | undefined>('sken-input', {\n          detail: parsed,\n          bubbles: true,\n          composed: true,\n        }),\n      )\n    } else {\n      this.#syncFormValue()\n      this.dispatchEvent(\n        new CustomEvent<number | undefined>('sken-input', {\n          detail: parsed,\n          bubbles: true,\n          composed: true,\n        }),\n      )\n    }\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const parsed = this.#parseNumber(target.value)\n    // Clamp on commit. If the user typed 150 with max=100, we\n    // commit 100 and update the input text.\n    const clamped = this.#clamp(parsed)\n    if (clamped !== parsed) {\n      this.#rawText = clamped !== undefined ? String(clamped) : ''\n      target.value = this.#rawText\n    }\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-change', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #handleFocus = (_event: FocusEvent) => {\n    this.dispatchEvent(new CustomEvent('sken-focus', { bubbles: true, composed: true }))\n  }\n\n  #handleBlur = (_event: FocusEvent) => {\n    this.dispatchEvent(new CustomEvent('sken-blur', { bubbles: true, composed: true }))\n  }\n\n  #handleKeydown = (event: KeyboardEvent) => {\n    if (this.disabled || this.readonly) return\n    // Shift+Arrow and PageUp/PageDown apply a 10x multiplier to\n    // the step. This is the standard \"fast forward\" pattern in\n    // numeric inputs across Mature DS (iX, Material, AntD). It\n    // lets the consumer reach the target faster when the step\n    // is small relative to the typical range.\n    const multiplier = event.shiftKey || event.key === 'PageUp' || event.key === 'PageDown' ? 10 : 1\n    if (event.key === 'ArrowUp') {\n      event.preventDefault()\n      this.#step(+1, multiplier)\n    } else if (event.key === 'ArrowDown') {\n      event.preventDefault()\n      this.#step(-1, multiplier)\n    } else if (event.key === 'PageUp') {\n      event.preventDefault()\n      this.#step(+1, 10)\n    } else if (event.key === 'PageDown') {\n      event.preventDefault()\n      this.#step(-1, 10)\n    } else if (event.key === 'Home' && this.min !== undefined) {\n      event.preventDefault()\n      this.#commitValue(this.min)\n    } else if (event.key === 'End' && this.max !== undefined) {\n      event.preventDefault()\n      this.#commitValue(this.max)\n    } else if (event.key === 'Enter') {\n      // The browser fires a `change` event on Enter for\n      // <input type=\"number\">, so we don't need to commit\n      // anything manually. We DO need to bridge the shadow\n      // boundary so the surrounding <form> receives a submit\n      // event — the browser's implicit submission algorithm\n      // does not see the inner input. Mirrors SkenInput and\n      // SkenTextarea. `isComposing` guards IME composition.\n      if (event.isComposing) return\n      // preventDefault runs even without ElementInternals,\n      // keeping the observable behaviour consistent.\n      event.preventDefault()\n      const form = this.#internals?.form\n      if (!form) return\n      form.requestSubmit()\n    }\n  }\n\n  #handleStepUp = () => this.#step(+1)\n  #handleStepDown = () => this.#step(-1)\n\n  // ── Helpers ───────────────────────────────────────────────────\n  /**\n   * Increment / decrement the value by `step * multiplier`,\n   * clamped at [min, max]. Emits `sken-input` and `sken-change`\n   * (we treat the stepper as a commit, not a keystroke). The\n   * `multiplier` defaults to 1; the keyboard handler passes 10\n   * for Shift+Arrow and PageUp/PageDown (the \"fast forward\"\n   * pattern).\n   *\n   * The current value is read from the rendered <input>, NOT\n   * from `this.value`. Reading from the input is robust for\n   * both modes:\n   * - Controlled: the consumer is async (Vue's reactive update\n   *   applies on the next tick). By the time the second click\n   *   arrives, the consumer's `value` prop may still be the\n   *   pre-click value, but the input's `.value` is already\n   *   updated by #commitValue from the first click.\n   * - Uncontrolled: the primitive owns the value. The input's\n   *   `.value` is the source of truth; `this.value` is the\n   *   initial seed and not maintained by the primitive in this\n   *   mode.\n   */\n  #step(direction: 1 | -1, multiplier: number = 1) {\n    if (this.disabled || this.readonly) return\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    const text = inputEl?.value ?? ''\n    const current = text === '' ? (this.value ?? 0) : Number(text)\n    if (!Number.isFinite(current)) return\n    const next = current + direction * this.step * multiplier\n    this.#commitValue(next)\n  }\n\n  /**\n   * Commit a value: clamp, update internal state, emit events.\n   * Same path used by the stepper buttons and the keyboard\n   * Home / End shortcuts.\n   */\n  #commitValue(raw: number) {\n    const clamped = this.#clamp(raw)\n    this.#rawText = clamped !== undefined ? String(clamped) : ''\n    // Update the DOM input so the next @input sees the new value\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    if (inputEl) inputEl.value = this.#rawText\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-input', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n    this.dispatchEvent(\n      new CustomEvent<number | undefined>('sken-change', {\n        detail: clamped,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #clamp(value: number | undefined): number | undefined {\n    if (value === undefined || Number.isNaN(value)) return undefined\n    let v = value\n    if (this.min !== undefined && v < this.min) v = this.min\n    if (this.max !== undefined && v > this.max) v = this.max\n    return v\n  }\n\n  #parseNumber(text: string): number | undefined {\n    if (text === '' || text === '-') return undefined\n    const n = Number(text)\n    if (Number.isNaN(n)) return undefined\n    return n\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-number-input': SkenNumberInput\n  }\n}\n"],"mappings":"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"}