@sken-ds/primitives 0.4.6 → 0.6.0

package/dist/sken-filter-chip.js.map

@@ -1 +1 @@
-{"version":3,"file":"sken-filter-chip.js","names":[],"sources":["../src/components/sken-filter-chip.ts"],"sourcesContent":["/**\n * `<sken-filter-chip>` — Sken removable label primitive.\n *\n * A compact, removable label used to represent a selected value\n * inside a parent control. The pattern is the same one\n * `<nord-tag>` uses inside `<nord-combobox multiple>`: a\n * pill-shaped label with a close button on the right. The chip\n * is independent of the parent — it does not know which control\n * selected it, it only knows how to render its label and emit\n * a `sken-close` event when the user activates the close button.\n *\n *   <sken-filter-chip @sken-close=${this._onRemove}>\n *     Detector de humo\n *   </sken-filter-chip>\n *\n * Reusability:\n *\n * - `<sken-combobox>` in `mode=\"multiple\"` + `display=\"chips\"`\n *   renders one chip per selected item in its trigger.\n * - `<sken-tag-input>` (future) renders chips for typed tags.\n * - A filter bar can render chips for each applied filter.\n *\n * In all of these the parent owns the state, the chip owns the\n * visual + the close affordance, and the parent listens for\n * `sken-close` to mutate its state and re-render. The chip\n * never removes itself from the DOM — that is the parent's job.\n *\n * Why a real Shadow DOM (not the marker pattern):\n *\n * `<sken-combobox-item>` is a marker (renders nothing, parent\n * introspects it). The filter chip is the opposite: it has a\n * visual presence in the light DOM consumer's layout. Putting\n * the visual in light DOM would mean the consumer's CSS bleeds\n * in (Tailwind resets, global box-sizing). Shadow DOM scopes\n * the visual; the parent sets `--sken-*` tokens on a common\n * ancestor and the chip inherits.\n *\n * A11y:\n *\n * - The close button is a real `<button type=\"button\">` so it\n *   is keyboard-activatable (Space / Enter) without extra work.\n * - The chip's accessible name is built from the visible label\n *   plus the close button's `aria-label`, which defaults to\n *   `Remove {label}` so a screen reader announces both pieces.\n * - The chip itself is not a focus stop; focus stays on the\n *   parent control. The chip is purely visual + the close\n *   button is focusable when the parent moves focus into it\n *   (e.g. via the parent control's keyboard model).\n */\nimport { LitElement, css, html, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('sken-filter-chip')\nexport class SkenFilterChip extends LitElement {\n  /** Visible text on the chip. Falls back to the slot content. */\n  @property() label = ''\n\n  /** Disabled state. Hides the close button. @default false */\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  /**\n   * Hide the close button. Use this for read-only \"applied\n   * filter\" chips that the user can see but not remove from\n   * this control.\n   * @default false\n   */\n  @property({ attribute: 'hide-close-button', type: Boolean })\n  hideCloseButton = false\n\n  /**\n   * Accessible name for the close button. Defaults to\n   * `Remove {label}` so the user knows which chip they are\n   * removing when chips are read in sequence.\n   */\n  @property({ attribute: 'close-aria-label' }) closeAriaLabel = ''\n\n  @query('.close') private _closeButton!: HTMLButtonElement\n\n  // ── render ───────────────────────────────────────────────────────\n\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.25rem;\n      max-inline-size: 100%;\n      padding-inline: 0.5rem;\n      block-size: 1.5rem;\n      border-radius: 999px;\n      /* Token-driven, so the chip inherits the brand without\n       * the primitive having to know the palette. The defaults\n       * here match the Figma reference for the \"applied filter\"\n       * pill in the Legrand Care system. */\n      background: var(--sken-muted, #f4f4f5);\n      color: var(--sken-foreground, #152b48);\n      font-family: var(--sken-family-sans, inherit);\n      font-size: 0.75rem;\n      line-height: 1;\n      white-space: nowrap;\n      user-select: none;\n    }\n    :host([disabled]) {\n      opacity: var(--sken-disabled, 0.5);\n      cursor: not-allowed;\n    }\n    .label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-inline-size: 0;\n    }\n    .close {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      inline-size: 1rem;\n      block-size: 1rem;\n      flex-shrink: 0;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      border-radius: 999px;\n      background: transparent;\n      color: var(--sken-muted-foreground, #4f6076);\n      font: inherit;\n      line-height: 1;\n      cursor: pointer;\n      /* Same font fix as the combobox trigger icons: without\n       * an explicit font-family the close glyph renders in\n       * whatever Inter decides, which inflates block glyphs\n       * like the multiplication sign. The system sans keeps\n       * the × proportional to the rest of the chip. */\n      font-family:\n        ui-sans-serif,\n        system-ui,\n        -apple-system,\n        'Segoe UI',\n        Roboto,\n        sans-serif;\n      font-size: 0.75rem;\n    }\n    .close:hover {\n      background: var(--sken-border, #dfdfe3);\n      color: var(--sken-foreground, #152b48);\n    }\n    .close:focus-visible {\n      outline: 2px solid var(--sken-ring, #2e6fc6);\n      outline-offset: 1px;\n    }\n  `\n\n  protected override render() {\n    // Visible label: the prop wins if set, else we fall back to\n    // the default slot. The slot wins only if the prop is empty.\n    // We use a conditional template instead of `labelText || slot`\n    // because lit-html will skip a falsy interpolation but the\n    // slot template is itself a valid TemplateResult — using the\n    // short-circuit OR discards the slot entirely.\n    const labelText = this.label\n    const closeLabel = this.closeAriaLabel || (labelText ? `Remove ${labelText}` : 'Remove')\n    return html`\n      <span class=\"label\" part=\"label\"> ${labelText ? labelText : html`<slot></slot>`} </span>\n      ${\n        !this.disabled && !this.hideCloseButton\n          ? html`<button\n              type=\"button\"\n              class=\"close\"\n              part=\"close\"\n              aria-label=${closeLabel}\n              @click=${this._onClose}\n            >\n              ×\n            </button>`\n          : null\n      }\n    `\n  }\n\n  protected override updated(_changed: PropertyValues): void {\n    // After every render, mirror the rendered text into the\n    // host's `title` so the browser tooltip matches the chip\n    // label (mirrors iX 5's `<ix-filter-chip title=\"…\">`).\n    // Cheap O(1) read of the slot/label that just rendered.\n    if (this._closeButton || this.hideCloseButton || this.disabled) {\n      const text = this.label || this.textContent?.trim() || ''\n      if (text) this.title = text\n    }\n  }\n\n  // ── events ───────────────────────────────────────────────────────\n\n  /** User clicked the close button. Parent must update its state. */\n  private _onClose = (e: MouseEvent): void => {\n    e.stopPropagation()\n    // No `detail` option: that leaves `event.detail` as\n    // `undefined` (the contract), instead of `null` (which it\n    // would be if we passed `detail: undefined` explicitly).\n    this.dispatchEvent(\n      new CustomEvent('sken-close', {\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-filter-chip': SkenFilterChip\n  }\n}\n"],"mappings":";;;;AAqDO,IAAM,IAAN,cAA6B,EAAW;;EA2IzB,aAzIA,KAAA,QAAA,IAIT,KAAA,WAAA,IASO,KAAA,kBAAA,IAO4C,KAAA,iBAAA,IAqH1C,KAAA,YAAA,MAAwB;GAK1C,AAJA,EAAE,gBAAgB,GAIlB,KAAK,cACH,IAAI,YAAY,cAAc;IAC5B,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF;;;EA1HyB,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE5B,SAA4B;EAO1B,IAAM,IAAY,KAAK,OACjB,IAAa,KAAK,mBAAmB,IAAY,UAAU,MAAc;EAC/E,OAAO,CAAI;0CAC2B,KAAwB,CAAI,gBAAgB;QAE9E,CAAC,KAAK,YAAY,CAAC,KAAK,kBACpB,CAAI;;;;2BAIW,EAAW;uBACf,KAAK,SAAS;;;yBAIzB,KACL;;CAEL;CAEA,QAA2B,GAAgC;EAKzD,IAAI,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,UAAU;GAC9D,IAAM,IAAO,KAAK,SAAS,KAAK,aAAa,KAAK,KAAK;GACvD,AAAI,MAAM,KAAK,QAAQ;EACzB;CACF;AAiBF;AArJG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAGT,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GASzC,EAAA,CAAA,EAAS;CAAE,WAAW;CAAqB,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAQ1D,EAAA,CAAA,EAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAE1C,EAAA,CAAA,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAzBhB,IAAA,EAAA,CAAA,EAAc,kBAAkB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"sken-filter-chip.js","names":[],"sources":["../src/components/sken-filter-chip.ts"],"sourcesContent":["import { LitElement, css, html, type PropertyValues } from 'lit'\nimport { customElement, property, query } from 'lit/decorators.js'\n\n@customElement('sken-filter-chip')\nexport class SkenFilterChip extends LitElement {\n  @property() label = ''\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false\n\n  @property({ attribute: 'hide-close-button', type: Boolean })\n  hideCloseButton = false\n\n  @property({ attribute: 'close-aria-label' }) closeAriaLabel = ''\n\n  @query('.close') private _closeButton!: HTMLButtonElement\n\n  // ── render ───────────────────────────────────────────────────────\n\n  static override styles = css`\n    :host {\n      display: inline-flex;\n      align-items: center;\n      gap: 0.25rem;\n      max-inline-size: 100%;\n      padding-inline: 0.5rem;\n      block-size: 1.5rem;\n      border-radius: 999px;\n      /* Token-driven, so the chip inherits the brand without\n       * the primitive having to know the palette. The defaults\n       * here match the Figma reference for the \"applied filter\"\n       * pill in the Legrand Care system. */\n      background: var(--sken-muted, #f4f4f5);\n      color: var(--sken-foreground, #152b48);\n      font-family: var(--sken-family-sans, inherit);\n      font-size: 0.75rem;\n      line-height: 1;\n      white-space: nowrap;\n      user-select: none;\n    }\n    :host([disabled]) {\n      opacity: var(--sken-disabled, 0.5);\n      cursor: not-allowed;\n    }\n    .label {\n      overflow: hidden;\n      text-overflow: ellipsis;\n      min-inline-size: 0;\n    }\n    .close {\n      display: inline-flex;\n      align-items: center;\n      justify-content: center;\n      inline-size: 1rem;\n      block-size: 1rem;\n      flex-shrink: 0;\n      padding: 0;\n      margin: 0;\n      border: 0;\n      border-radius: 999px;\n      background: transparent;\n      color: var(--sken-muted-foreground, #4f6076);\n      font: inherit;\n      line-height: 1;\n      cursor: pointer;\n      /* Same font fix as the combobox trigger icons: without\n       * an explicit font-family the close glyph renders in\n       * whatever Inter decides, which inflates block glyphs\n       * like the multiplication sign. The system sans keeps\n       * the × proportional to the rest of the chip. */\n      font-family:\n        ui-sans-serif,\n        system-ui,\n        -apple-system,\n        'Segoe UI',\n        Roboto,\n        sans-serif;\n      font-size: 0.75rem;\n    }\n    .close:hover {\n      background: var(--sken-border, #dfdfe3);\n      color: var(--sken-foreground, #152b48);\n    }\n    .close:focus-visible {\n      outline: 2px solid var(--sken-ring, #2e6fc6);\n      outline-offset: 1px;\n    }\n  `\n\n  protected override render() {\n    const labelText = this.label\n    const closeLabel = this.closeAriaLabel || (labelText ? `Remove ${labelText}` : 'Remove')\n    return html`\n      <span class=\"label\" part=\"label\"> ${labelText ? labelText : html`<slot></slot>`} </span>\n      ${\n        !this.disabled && !this.hideCloseButton\n          ? html`<button\n              type=\"button\"\n              class=\"close\"\n              part=\"close\"\n              aria-label=${closeLabel}\n              @click=${this._onClose}\n            >\n              ×\n            </button>`\n          : null\n      }\n    `\n  }\n\n  protected override updated(_changed: PropertyValues): void {\n    if (this._closeButton || this.hideCloseButton || this.disabled) {\n      const text = this.label || this.textContent?.trim() || ''\n      if (text) this.title = text\n    }\n  }\n\n  // ── events ───────────────────────────────────────────────────────\n\n  private _onClose = (e: MouseEvent): void => {\n    e.stopPropagation()\n    this.dispatchEvent(\n      new CustomEvent('sken-close', {\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-filter-chip': SkenFilterChip\n  }\n}\n"],"mappings":";;;;AAIO,IAAM,IAAN,cAA6B,EAAW;;EAmHzB,aAlHA,KAAA,QAAA,IAGT,KAAA,WAAA,IAGO,KAAA,kBAAA,IAE4C,KAAA,iBAAA,IA0G1C,KAAA,YAAA,MAAwB;GAE1C,AADA,EAAE,gBAAgB,GAClB,KAAK,cACH,IAAI,YAAY,cAAc;IAC5B,SAAS;IACT,UAAU;GACZ,CAAC,CACH;EACF;;;EA5GyB,KAAA,SAAA,CAAG;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsE5B,SAA4B;EAC1B,IAAM,IAAY,KAAK,OACjB,IAAa,KAAK,mBAAmB,IAAY,UAAU,MAAc;EAC/E,OAAO,CAAI;0CAC2B,KAAwB,CAAI,gBAAgB;QAE9E,CAAC,KAAK,YAAY,CAAC,KAAK,kBACpB,CAAI;;;;2BAIW,EAAW;uBACf,KAAK,SAAS;;;yBAIzB,KACL;;CAEL;CAEA,QAA2B,GAAgC;EACzD,IAAI,KAAK,gBAAgB,KAAK,mBAAmB,KAAK,UAAU;GAC9D,IAAM,IAAO,KAAK,SAAS,KAAK,aAAa,KAAK,KAAK;GACvD,AAAI,MAAM,KAAK,QAAQ;EACzB;CACF;AAaF;AA3HG,EAAA,CAAA,EAAS,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAET,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAGzC,EAAA,CAAA,EAAS;CAAE,WAAW;CAAqB,MAAM;AAAQ,CAAC,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GAG1D,EAAA,CAAA,EAAS,EAAE,WAAW,mBAAmB,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAE1C,EAAA,CAAA,EAAM,QAAQ,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAZhB,IAAA,EAAA,CAAA,EAAc,kBAAkB,CAAA,GAAA,CAAA"}

package/dist/sken-input.js

@@ -1,26 +1,26 @@
-import { t as e } from "./decorate-D4FKzyDw.js";
-import { LitElement as t, css as n, html as r } from "lit";
-import { customElement as i, property as a } from "lit/decorators.js";
+import { t as e } from "./decorate-C1e2sg49.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
 //#region src/components/sken-input.ts
-var o, s = class extends t {
+var s, c = class extends t {
 	static {
-		o = this;
+		s = this;
 	}
 	static {
 		this.formAssociated = !0;
 	}
 	#e;
 	constructor() {
-		super(), this.#e = null, this.type = "text", this.size = "md", this.value = void 0, this.defaultValue = void 0, this.placeholder = void 0, this.disabled = !1, this.readonly = !1, this.required = !1, this.invalid = !1, this.describedById = void 0, this.name = void 0, this.autocomplete = void 0, this.maxLength = void 0, this.minLength = void 0, this.pattern = void 0, this.#t = "", this.#r = () => {
+		super(), this.#e = void 0, this.type = "text", this.size = "md", this.label = void 0, this.value = void 0, this.defaultValue = void 0, this.placeholder = void 0, this.disabled = !1, this.readonly = !1, this.required = !1, this.invalid = !1, this.describedById = void 0, this.name = void 0, this.autocomplete = void 0, this.maxLength = void 0, this.minLength = void 0, this.pattern = void 0, this.ariaLabel = null, this.#t = "", this._inputId = `sken-input-${crypto.randomUUID()}`, this.#r = () => {
 			requestAnimationFrame(() => {
 				requestAnimationFrame(() => {
 					let e = this.renderRoot.querySelector("input");
 					if (!e) return;
 					let t = this.renderRoot.querySelector(".slot-start"), n = this.renderRoot.querySelector(".slot-end"), r = t?.getBoundingClientRect().width ?? 0, i = n?.getBoundingClientRect().width ?? 0;
-					e.style.paddingInlineStart = r > 0 ? `calc(${r}px + ${o.SLOT_AIR})` : "", e.style.paddingInlineEnd = i > 0 ? `calc(${i}px + ${o.SLOT_AIR})` : "";
+					e.style.paddingInlineStart = r > 0 ? `calc(${r}px + ${s.SLOT_AIR})` : "", e.style.paddingInlineEnd = i > 0 ? `calc(${i}px + ${s.SLOT_AIR})` : "";
 				});
 			});
-		}, this.#i = null, this.#a = null, this.#o = null, this.#s = (e) => {
+		}, this.#i = void 0, this.#a = void 0, this.#o = void 0, this.#s = (e) => {
 			let t = e.target.value;
 			this.value === void 0 && (this.#t = t), this.#n(), this.dispatchEvent(new CustomEvent("sken-input", {
 				detail: t,
@@ -55,7 +55,7 @@ var o, s = class extends t {
 		try {
 			this.#e = this.attachInternals();
 		} catch {
-			this.#e = null;
+			this.#e = void 0;
 		}
 	}
 	#t;
@@ -66,6 +66,26 @@ var o, s = class extends t {
       inline-size: 100%;
     }
 
+    .field {
+      display: grid;
+      gap: var(--sken-1, 0.25rem);
+    }
+
+    .label {
+      font-size: var(--sken-size-xs, 0.75rem);
+      font-weight: 500;
+      color: var(--sken-foreground);
+    }
+
+    :host([required]) .label::after {
+      content: ' *';
+    }
+
+    :host([required][invalid]) .label,
+    :host([required][invalid]) .label::after {
+      color: var(--sken-destructive);
+    }
+
     .input-wrapper {
       position: relative;
       display: flex;
@@ -215,33 +235,38 @@ var o, s = class extends t {
 	render() {
 		let e = this.value ?? this.#t;
 		return r`
-      <div class="input-wrapper" part="wrapper">
-        <div class="slot slot-start" part="slot-start">
-          <slot name="start"></slot>
-        </div>
-        <input
-          part="input"
-          .value=${e}
-          type=${this.type}
-          placeholder=${this.placeholder ?? ""}
-          ?disabled=${this.disabled}
-          ?readonly=${this.readonly}
-          ?required=${this.required}
-          aria-invalid=${this.invalid ? "true" : "false"}
-          aria-describedby=${this.describedById ?? ""}
-          name=${this.name ?? ""}
-          autocomplete=${this.autocomplete ?? "off"}
-          maxlength=${this.maxLength ?? ""}
-          minlength=${this.minLength ?? ""}
-          pattern=${this.pattern ?? ""}
-          @input=${this.#s}
-          @change=${this.#c}
-          @focus=${this.#l}
-          @blur=${this.#u}
-          @keydown=${this.#d}
-        />
-        <div class="slot slot-end" part="slot-end">
-          <slot name="end"></slot>
+      <div class="field" part="field">
+        ${this.label ? r`<label class="label" part="label" for=${this._inputId}>${this.label}</label>` : i}
+        <div class="input-wrapper" part="wrapper">
+          <div class="slot slot-start" part="slot-start">
+            <slot name="start"></slot>
+          </div>
+          <input
+            id=${this._inputId}
+            part="input"
+            .value=${e}
+            type=${this.type}
+            placeholder=${this.placeholder ?? ""}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            aria-invalid=${this.invalid ? "true" : "false"}
+            aria-describedby=${this.describedById ?? ""}
+            aria-label=${this.ariaLabel ?? ""}
+            name=${this.name ?? ""}
+            autocomplete=${this.autocomplete ?? "off"}
+            maxlength=${this.maxLength ?? ""}
+            minlength=${this.minLength ?? ""}
+            pattern=${this.pattern ?? ""}
+            @input=${this.#s}
+            @change=${this.#c}
+            @focus=${this.#l}
+            @blur=${this.#u}
+            @keydown=${this.#d}
+          />
+          <div class="slot slot-end" part="slot-end">
+            <slot name="end"></slot>
+          </div>
         </div>
       </div>
     `;
@@ -252,26 +277,26 @@ var o, s = class extends t {
 	#u;
 	#d;
 };
-e([a({ reflect: !0 })], s.prototype, "type", void 0), e([a({ reflect: !0 })], s.prototype, "size", void 0), e([a()], s.prototype, "value", void 0), e([a({ attribute: "default-value" })], s.prototype, "defaultValue", void 0), e([a()], s.prototype, "placeholder", void 0), e([a({
+e([o({ reflect: !0 })], c.prototype, "type", void 0), e([o({ reflect: !0 })], c.prototype, "size", void 0), e([o()], c.prototype, "label", void 0), e([o()], c.prototype, "value", void 0), e([o({ attribute: "default-value" })], c.prototype, "defaultValue", void 0), e([o()], c.prototype, "placeholder", void 0), e([o({
 	reflect: !0,
 	type: Boolean
-})], s.prototype, "disabled", void 0), e([a({
+})], c.prototype, "disabled", void 0), e([o({
 	reflect: !0,
 	type: Boolean
-})], s.prototype, "readonly", void 0), e([a({
+})], c.prototype, "readonly", void 0), e([o({
 	reflect: !0,
 	type: Boolean
-})], s.prototype, "required", void 0), e([a({
+})], c.prototype, "required", void 0), e([o({
 	reflect: !0,
 	type: Boolean
-})], s.prototype, "invalid", void 0), e([a({ attribute: "described-by-id" })], s.prototype, "describedById", void 0), e([a()], s.prototype, "name", void 0), e([a()], s.prototype, "autocomplete", void 0), e([a({
+})], c.prototype, "invalid", void 0), e([o({ attribute: "described-by-id" })], c.prototype, "describedById", void 0), e([o()], c.prototype, "name", void 0), e([o()], c.prototype, "autocomplete", void 0), e([o({
 	attribute: "max-length",
 	type: Number
-})], s.prototype, "maxLength", void 0), e([a({
+})], c.prototype, "maxLength", void 0), e([o({
 	attribute: "min-length",
 	type: Number
-})], s.prototype, "minLength", void 0), e([a()], s.prototype, "pattern", void 0), s = o = e([i("sken-input")], s);
+})], c.prototype, "minLength", void 0), e([o()], c.prototype, "pattern", void 0), e([o({ attribute: "aria-label" })], c.prototype, "ariaLabel", void 0), c = s = e([a("sken-input")], c);
 //#endregion
-export { s as SkenInput };
+export { c as SkenInput };
 
 //# sourceMappingURL=sken-input.js.map

package/dist/sken-input.js.map

@@ -1 +1 @@
-{"version":3,"file":"sken-input.js","names":["#internalValue","#syncFormValue","#internals","#slotStartObserver","#slotEndObserver","#visibilityObserver","#adjustPaddings","#handleInput","#handleChange","#handleFocus","#handleBlur","#handleKeydown"],"sources":["../src/components/sken-input.ts"],"sourcesContent":["// ── <sken-input> — framework-ready Web Component ─────────────────────\n// Wraps a native <input> with token-driven styles. Controlled and\n// uncontrolled value, every standard <input> type, free form\n// integration. Requires @sken-ds/theme/css (ADR-0006).\n\nimport type { SkenInputSize, SkenInputType } from '@sken-ds/contracts'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-input')\nexport class SkenInput extends LitElement {\n  // Form-associated custom element: opt in to the ElementInternals\n  // API so this primitive can participate in a surrounding\n  // <form>'s submit/reset lifecycle. Without this flag, the\n  // browser treats the host as an opaque element that does not\n  // contribute to FormData and does not block Enter-to-submit\n  // (the implicit submission rule for single text-like input\n  // does not match against opaque elements). Lit docs:\n  // https://lit.dev/docs/components/form/\n  static formAssociated = true\n\n  // The ElementInternals instance. Created in the constructor\n  // via attachInternals(), which the browser only makes\n  // available because `formAssociated` is true. We use it for:\n  //   - setFormValue() so the form picks up the current value.\n  //   - form reset (formResetCallback) for uncontrolled mode.\n  //   - reflecting `disabled` to the form's :disabled selector\n  //     (formDisabledCallback).\n  // Nullable because some test environments (older happy-dom\n  // versions, jsdom) do not implement ElementInternals. In\n  // those environments form association is a no-op.\n  #internals: ElementInternals | null = null\n\n  constructor() {\n    super()\n    // attachInternals() is only callable when formAssociated is\n    // true. The static flag is set above, so this resolves to a\n    // real ElementInternals in any spec-compliant browser\n    // (Chrome 77+, Firefox 98+, Safari 16.4+). If the host\n    // environment does not implement it, the call throws — we\n    // catch and degrade gracefully so SSR / tests that do not\n    // need form association still work.\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = null\n    }\n  }\n\n  @property({ reflect: true }) type: SkenInputType = 'text'\n  @property({ reflect: true }) size: SkenInputSize = 'md'\n  @property() value: string | undefined = undefined\n  @property({ attribute: 'default-value' }) defaultValue: string | undefined = undefined\n  @property() placeholder: string | undefined = undefined\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ reflect: true, type: Boolean }) required = false\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  @property() autocomplete: AutoFill | undefined = undefined\n  @property({ attribute: 'max-length', type: Number }) maxLength: number | undefined = undefined\n  @property({ attribute: 'min-length', type: Number }) minLength: number | undefined = undefined\n  @property() pattern: string | undefined = undefined\n\n  // Internal value for uncontrolled mode. Seeded from\n  // `defaultValue` on first connection; from then on the DOM\n  // input keeps the source of truth.\n  #internalValue: string = ''\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      inline-size: 100%;\n    }\n\n    .input-wrapper {\n      position: relative;\n      display: flex;\n      align-items: center;\n      inline-size: 100%;\n      block-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      min-block-size: 2.25rem;\n      transition:\n        border-color 120ms ease,\n        box-shadow 120ms ease;\n    }\n\n    input::placeholder {\n      color: var(--sken-muted-foreground);\n      opacity: 1; /* Firefox placeholder is <1 by default */\n    }\n\n    /* ── Slot containers ──────────────────────────────────────\n       Position: absolute so the slotted content floats over the\n       input without consuming flex space. The input's padding is\n       auto-adjusted in JS to keep the value text from overlapping.\n       pointer-events: none on the wrapper, auto on the slotted\n       content, so only the visible icon/button receives clicks. */\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    .slot-end {\n      inset-inline-end: 0.5rem;\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      min-block-size: 1.75rem;\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      min-block-size: 2.75rem;\n    }\n\n    /* ── States ───────────────────────────────────────────────── */\n    .input-wrapper:hover input:not(:disabled):not(:read-only) {\n      border-color: var(--sken-foreground);\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    input:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n    input:read-only {\n      background: var(--sken-muted);\n    }\n    :host([invalid]) input {\n      border-color: var(--sken-destructive);\n    }\n    :host([invalid]) .input-wrapper:focus-within input {\n      outline-color: var(--sken-destructive);\n    }\n  `\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (this.value === undefined) {\n      this.#internalValue = this.defaultValue ?? ''\n    }\n    // Publish the initial value to the surrounding form so that\n    // FormData(form) and the implicit-submit-on-Enter rule see\n    // the primitive as a real text input from the very first\n    // render. Cheap (no allocation in the hot path after this).\n    this.#syncFormValue()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.#slotStartObserver?.disconnect()\n    this.#slotEndObserver?.disconnect()\n    this.#visibilityObserver?.disconnect()\n  }\n\n  // ── Form-association callbacks ─────────────────────────────────\n  // Called by the browser when the form this primitive is\n  // associated with is reset (either via form.reset() or by\n  // clicking a <button type=\"reset\">). For uncontrolled mode we\n  // restore the seed value; for controlled mode the consumer's\n  // prop is the source of truth, so we re-render and let\n  // Lit's render path re-publish the controlled value.\n  formResetCallback(): void {\n    if (this.value === undefined) {\n      this.#internalValue = this.defaultValue ?? ''\n      const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n      if (inputEl) inputEl.value = this.#internalValue\n      this.#syncFormValue()\n    } else {\n      this.requestUpdate()\n    }\n  }\n\n  // Called by the browser when the form's :disabled state\n  // changes (e.g. a fieldset ancestor is disabled, or the\n  // primitive gets associated with a disabled form). Mirrors\n  // the `disabled` state onto the inner <input> so the visual\n  // and the form submission are consistent.\n  formDisabledCallback(isDisabled: boolean): void {\n    // Reflect onto the prop so Lit re-renders and the\n    // :host([disabled]) CSS rule kicks in. The inner <input>\n    // picks up `?disabled=${this.disabled}` in the template.\n    this.disabled = isDisabled\n  }\n\n  // Publish the current value to the form via ElementInternals.\n  // Called on every change so FormData and submit/reset are\n  // always in sync with the visible state.\n  #syncFormValue(): void {\n    if (!this.#internals) return\n    const value = this.value ?? this.#internalValue\n    // If the primitive has no `name`, FormData(form) skips it\n    // anyway, so setFormValue is harmless but pointless. We\n    // still call it to keep the implicit-submit rule consistent\n    // (the spec checks the existence of a single text-like\n    // submitter, not the name).\n    this.#internals.setFormValue(value)\n  }\n\n  protected override firstUpdated(): void {\n    const startEl = this.renderRoot.querySelector('.slot-start') as HTMLElement | null\n    const endEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    if (!startEl || !endEl || !inputEl) return\n\n    // MutationObserver on each slot container watches for\n    // children being added/removed/attributes-changed. Cheap\n    // because the subtree is just one or two nodes.\n    this.#slotStartObserver = new MutationObserver(() => this.#adjustPaddings())\n    this.#slotStartObserver.observe(startEl, { childList: true, subtree: true, attributes: true })\n    this.#slotEndObserver = new MutationObserver(() => this.#adjustPaddings())\n    this.#slotEndObserver.observe(endEl, { childList: true, subtree: true, attributes: true })\n\n    // IntersectionObserver catches the case where the input is\n    // hidden at first connect (e.g. inside a closed <details> or\n    // an off-screen tab). The slot's bounding rect is 0 in that\n    // case, so the padding would be wrong until the user opens\n    // the parent. Re-measure when the host becomes visible.\n    this.#visibilityObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) this.#adjustPaddings()\n      }\n    })\n    this.#visibilityObserver.observe(this)\n\n    // Also listen for the native slotchange event as a belt-and-\n    // braces in case the MutationObserver misses something\n    // (e.g. text node changes inside the slotted element).\n    const startSlot = this.renderRoot.querySelector('slot[name=\"start\"]') as HTMLSlotElement | null\n    const endSlot = this.renderRoot.querySelector('slot[name=\"end\"]') as HTMLSlotElement | null\n    startSlot?.addEventListener('slotchange', this.#adjustPaddings)\n    endSlot?.addEventListener('slotchange', this.#adjustPaddings)\n\n    // First measurement.\n    this.#adjustPaddings()\n  }\n\n  // The gap between a slot's edge and the input's text. iX uses\n  // 0.5rem; we keep that because it balances the visual weight of\n  // a 16px icon against the input's 0.75rem default padding-inline.\n  // Module-scoped (not class-scoped) because TS forbids static\n  // private fields on classes that use the legacy decorators.\n  static SLOT_AIR = '0.5rem'\n\n  // Two rAFs: the first lets Lit finish painting the slot, the\n  // second lets the browser compute the slotted element's box.\n  // Without the second, getBoundingClientRect() on a freshly-\n  // assigned icon returns 0.\n  #adjustPaddings = (): void => {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n        if (!inputEl) return\n        const startEl = this.renderRoot.querySelector('.slot-start') as HTMLElement | null\n        const endEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n        // iX rule: padding = slot width + half a rem of air.\n        // If the slot is empty, reset to the CSS default (no\n        // inline style).\n        const startWidth = startEl?.getBoundingClientRect().width ?? 0\n        const endWidth = endEl?.getBoundingClientRect().width ?? 0\n        inputEl.style.paddingInlineStart =\n          startWidth > 0 ? `calc(${startWidth}px + ${SkenInput.SLOT_AIR})` : ''\n        inputEl.style.paddingInlineEnd =\n          endWidth > 0 ? `calc(${endWidth}px + ${SkenInput.SLOT_AIR})` : ''\n      })\n    })\n  }\n\n  // Observer handles. Nullable because they are not created until\n  // firstUpdated (which only runs in the browser, not during\n  // server-side rendering or unit tests that don't mount).\n  #slotStartObserver: MutationObserver | null = null\n  #slotEndObserver: MutationObserver | null = null\n  #visibilityObserver: IntersectionObserver | null = null\n\n  protected override render() {\n    const value = this.value ?? this.#internalValue\n    return html`\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          .value=${value}\n          type=${this.type}\n          placeholder=${this.placeholder ?? ''}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          aria-invalid=${this.invalid ? 'true' : 'false'}\n          aria-describedby=${this.describedById ?? ''}\n          name=${this.name ?? ''}\n          autocomplete=${this.autocomplete ?? 'off'}\n          maxlength=${this.maxLength ?? ''}\n          minlength=${this.minLength ?? ''}\n          pattern=${this.pattern ?? ''}\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      </div>\n    `\n  }\n\n  // composed: true on every event so the framework adapter outside\n  // the shadow boundary can listen.\n  #handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const newValue = target.value\n    if (this.value === undefined) this.#internalValue = newValue\n    // Publish to the surrounding form so the new value is\n    // included in FormData and submit-on-Enter sees the latest\n    // text. Per-keystroke is fine: setFormValue is cheap.\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<string>('sken-input', { detail: newValue, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    // Commit path: re-publish in case the browser mutated the\n    // value (autofill, paste) without an intermediate input\n    // event.\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<string>('sken-change', {\n        detail: target.value,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #handleFocus = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-focus', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleBlur = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-blur', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  // Wire Enter-on-the-inner-input to the host's associated form.\n  //\n  // The browser's implicit submission algorithm only sees the host\n  // (the form-associated custom element), not the inner <input>\n  // inside the shadow root. So pressing Enter in the inner input\n  // reaches the form's submit algorithm via the host's keydown\n  // listener but does NOT trigger a submit unless the form has a\n  // default submit button. We bridge the shadow boundary here:\n  // when the user presses Enter on the inner input, we call\n  // `internals.form.requestSubmit()` ourselves. This dispatches\n  // the form's submit event with the host as submitter, exactly\n  // as if a native <input> had triggered it.\n  //\n  // We also `preventDefault()` so the browser's own handling of\n  // Enter (which would otherwise insert a newline, in textarea,\n  // or do nothing useful in input) does not double-dispatch.\n  // `isComposing` guards against IME composition — pressing Enter\n  // to confirm a kanji candidate should NOT submit the form.\n  // `shiftKey` is allowed through for textareas (newline); single-\n  // line inputs ignore it.\n  #handleKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter' || event.isComposing) return\n    if (this.disabled || this.readonly) return\n    // preventDefault runs even if `internals.form` is null\n    // (e.g. older test environments without ElementInternals\n    // support, or the host is detached from a form). This keeps\n    // the observable behaviour consistent: pressing Enter on\n    // the inner input of a form-associated host is \"consumed\"\n    // by the primitive, regardless of whether the surrounding\n    // form machinery is available.\n    event.preventDefault()\n    const form = this.#internals?.form\n    if (!form) return\n    // requestSubmit() is the modern, non-deprecated way to\n    // dispatch submit. It runs the form's submit handlers and\n    // runs constraint validation. submitter defaults to the\n    // form itself; consumers that need a specific submitter\n    // can pass it explicitly.\n    form.requestSubmit()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-input': SkenInput\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"sken-input.js","names":[],"sources":["../src/components/sken-input.ts"],"sourcesContent":["// ── <sken-input> — framework-ready Web Component ─────────────────────\n\nimport type { SkenInputSize, SkenInputType } from '@sken-ds/contracts'\nimport { LitElement, css, html, nothing } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-input')\nexport class SkenInput extends LitElement {\n  static formAssociated = true\n\n  #internals: ElementInternals | undefined = undefined\n\n  constructor() {\n    super()\n    try {\n      this.#internals = this.attachInternals()\n    } catch {\n      this.#internals = undefined\n    }\n  }\n\n  @property({ reflect: true }) type: SkenInputType = 'text'\n  @property({ reflect: true }) size: SkenInputSize = 'md'\n  @property() label: string | undefined = undefined\n  @property() value: string | undefined = undefined\n  @property({ attribute: 'default-value' }) defaultValue: string | undefined = undefined\n  @property() placeholder: string | undefined = undefined\n  @property({ reflect: true, type: Boolean }) disabled = false\n  @property({ reflect: true, type: Boolean }) readonly = false\n  @property({ reflect: true, type: Boolean }) required = false\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  @property() autocomplete: AutoFill | undefined = undefined\n  @property({ attribute: 'max-length', type: Number }) maxLength: number | undefined = undefined\n  @property({ attribute: 'min-length', type: Number }) minLength: number | undefined = undefined\n  @property() pattern: string | undefined = undefined\n  @property({ attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n  #internalValue: string = ''\n\n  private readonly _inputId = `sken-input-${crypto.randomUUID()}`\n\n  static styles = css`\n    :host {\n      display: inline-block;\n      inline-size: 100%;\n    }\n\n    .field {\n      display: grid;\n      gap: var(--sken-1, 0.25rem);\n    }\n\n    .label {\n      font-size: var(--sken-size-xs, 0.75rem);\n      font-weight: 500;\n      color: var(--sken-foreground);\n    }\n\n    :host([required]) .label::after {\n      content: ' *';\n    }\n\n    :host([required][invalid]) .label,\n    :host([required][invalid]) .label::after {\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      block-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      min-block-size: 2.25rem;\n      transition:\n        border-color 120ms ease,\n        box-shadow 120ms ease;\n    }\n\n    input::placeholder {\n      color: var(--sken-muted-foreground);\n      opacity: 1; /* Firefox placeholder is <1 by default */\n    }\n\n    /* ── Slot containers ──────────────────────────────────────\n       Position: absolute so the slotted content floats over the\n       input without consuming flex space. The input's padding is\n       auto-adjusted in JS to keep the value text from overlapping.\n       pointer-events: none on the wrapper, auto on the slotted\n       content, so only the visible icon/button receives clicks. */\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    .slot-end {\n      inset-inline-end: 0.5rem;\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      min-block-size: 1.75rem;\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      min-block-size: 2.75rem;\n    }\n\n    /* ── States ───────────────────────────────────────────────── */\n    .input-wrapper:hover input:not(:disabled):not(:read-only) {\n      border-color: var(--sken-foreground);\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    input:disabled {\n      cursor: not-allowed;\n      opacity: var(--sken-disabled);\n    }\n    input:read-only {\n      background: var(--sken-muted);\n    }\n    :host([invalid]) input {\n      border-color: var(--sken-destructive);\n    }\n    :host([invalid]) .input-wrapper:focus-within input {\n      outline-color: var(--sken-destructive);\n    }\n  `\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    if (this.value === undefined) {\n      this.#internalValue = this.defaultValue ?? ''\n    }\n    this.#syncFormValue()\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback()\n    this.#slotStartObserver?.disconnect()\n    this.#slotEndObserver?.disconnect()\n    this.#visibilityObserver?.disconnect()\n  }\n\n  // ── Form-association callbacks ─────────────────────────────────\n  formResetCallback(): void {\n    if (this.value === undefined) {\n      this.#internalValue = this.defaultValue ?? ''\n      const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n      if (inputEl) inputEl.value = this.#internalValue\n      this.#syncFormValue()\n    } else {\n      this.requestUpdate()\n    }\n  }\n\n  formDisabledCallback(isDisabled: boolean): void {\n    this.disabled = isDisabled\n  }\n\n  #syncFormValue(): void {\n    if (!this.#internals) return\n    const value = this.value ?? this.#internalValue\n    this.#internals.setFormValue(value)\n  }\n\n  protected override firstUpdated(): void {\n    const startEl = this.renderRoot.querySelector('.slot-start') as HTMLElement | null\n    const endEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n    const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n    if (!startEl || !endEl || !inputEl) return\n\n    this.#slotStartObserver = new MutationObserver(() => this.#adjustPaddings())\n    this.#slotStartObserver.observe(startEl, { childList: true, subtree: true, attributes: true })\n    this.#slotEndObserver = new MutationObserver(() => this.#adjustPaddings())\n    this.#slotEndObserver.observe(endEl, { childList: true, subtree: true, attributes: true })\n\n    this.#visibilityObserver = new IntersectionObserver((entries) => {\n      for (const entry of entries) {\n        if (entry.isIntersecting) this.#adjustPaddings()\n      }\n    })\n    this.#visibilityObserver.observe(this)\n\n    const startSlot = this.renderRoot.querySelector('slot[name=\"start\"]') as HTMLSlotElement | null\n    const endSlot = this.renderRoot.querySelector('slot[name=\"end\"]') as HTMLSlotElement | null\n    startSlot?.addEventListener('slotchange', this.#adjustPaddings)\n    endSlot?.addEventListener('slotchange', this.#adjustPaddings)\n\n    this.#adjustPaddings()\n  }\n\n  static SLOT_AIR = '0.5rem'\n\n  #adjustPaddings = (): void => {\n    requestAnimationFrame(() => {\n      requestAnimationFrame(() => {\n        const inputEl = this.renderRoot.querySelector('input') as HTMLInputElement | null\n        if (!inputEl) return\n        const startEl = this.renderRoot.querySelector('.slot-start') as HTMLElement | null\n        const endEl = this.renderRoot.querySelector('.slot-end') as HTMLElement | null\n        const startWidth = startEl?.getBoundingClientRect().width ?? 0\n        const endWidth = endEl?.getBoundingClientRect().width ?? 0\n        inputEl.style.paddingInlineStart =\n          startWidth > 0 ? `calc(${startWidth}px + ${SkenInput.SLOT_AIR})` : ''\n        inputEl.style.paddingInlineEnd =\n          endWidth > 0 ? `calc(${endWidth}px + ${SkenInput.SLOT_AIR})` : ''\n      })\n    })\n  }\n\n  #slotStartObserver: MutationObserver | undefined = undefined\n  #slotEndObserver: MutationObserver | undefined = undefined\n  #visibilityObserver: IntersectionObserver | undefined = undefined\n\n  protected override render() {\n    const value = this.value ?? this.#internalValue\n    return html`\n      <div class=\"field\" part=\"field\">\n        ${\n          this.label\n            ? html`<label class=\"label\" part=\"label\" for=${this._inputId}>${this.label}</label>`\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            id=${this._inputId}\n            part=\"input\"\n            .value=${value}\n            type=${this.type}\n            placeholder=${this.placeholder ?? ''}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            aria-invalid=${this.invalid ? 'true' : 'false'}\n            aria-describedby=${this.describedById ?? ''}\n            aria-label=${this.ariaLabel ?? ''}\n            name=${this.name ?? ''}\n            autocomplete=${this.autocomplete ?? 'off'}\n            maxlength=${this.maxLength ?? ''}\n            minlength=${this.minLength ?? ''}\n            pattern=${this.pattern ?? ''}\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        </div>\n      </div>\n    `\n  }\n\n  #handleInput = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    const newValue = target.value\n    if (this.value === undefined) this.#internalValue = newValue\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<string>('sken-input', { detail: newValue, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleChange = (event: Event) => {\n    const target = event.target as HTMLInputElement\n    this.#syncFormValue()\n    this.dispatchEvent(\n      new CustomEvent<string>('sken-change', {\n        detail: target.value,\n        bubbles: true,\n        composed: true,\n      }),\n    )\n  }\n\n  #handleFocus = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-focus', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleBlur = (event: FocusEvent) => {\n    this.dispatchEvent(\n      new CustomEvent<FocusEvent>('sken-blur', { detail: event, bubbles: true, composed: true }),\n    )\n  }\n\n  #handleKeydown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter' || event.isComposing) return\n    if (this.disabled || this.readonly) return\n    event.preventDefault()\n    const form = this.#internals?.form\n    if (!form) return\n    form.requestSubmit()\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-input': SkenInput\n  }\n}\n"],"mappings":"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"}

package/dist/sken-layout-region.js

@@ -1,4 +1,4 @@
-import { t as e } from "./decorate-D4FKzyDw.js";
+import { t as e } from "./decorate-C1e2sg49.js";
 import { LitElement as t, css as n, html as r } from "lit";
 import { customElement as i, property as a } from "lit/decorators.js";
 //#region src/components/sken-layout-region.ts

package/dist/sken-layout-region.js.map

@@ -1 +1 @@
-{"version":3,"file":"sken-layout-region.js","names":[],"sources":["../src/components/sken-layout-region.ts"],"sourcesContent":["// ── <sken-layout-region> — single cell of a <sken-layout> ──────────\n// The host element <sken-layout> places its light-DOM\n// <sken-layout-region> children into the page-level grid via the\n// `name` attribute (and CSS grid-area rules keyed off that name).\n// A region does not impose what lives inside it; it just gives\n// the grid a target to project into and lets the consumer style\n// the contents.\n//\n// Why this exists as a custom element (not a plain <div>):\n// - It lets the host's CSS select the slotted regions by tag +\n//   attribute name across the shadow boundary (`::slotted(\n//   sken-layout-region[name='topbar'])`), which is more robust\n//   than relying on class names that the consumer might forget.\n// - It gives framework adapters a stable tag name to render\n//   (Vue's <SkenLayoutRegion> resolves to <sken-layout-region>)\n//   so the layout's CSS does not break if the consumer\n//   re-organises their template.\n//\n// What the region does NOT do:\n// - It does not impose a default background, padding, or\n//   typography. The product (or a future Sken layout pattern)\n//   provides those via slot styling.\n// - It does not provide landmark roles. The consumer is\n//   responsible for wrapping the contents in <header>, <nav>,\n//   <main>, or <footer> as appropriate. A region called\n//   `topbar` is *not* implicitly <header role=\"banner\">; the\n//   product decides whether the topbar deserves the banner\n//   landmark or whether that is reserved for a different layer.\n//\n// See ADR-0006 for the substrate decision. See\n// @sken-ds/contracts `SkenLayoutRegionProps` for the contract\n// surface.\n\nimport type { SkenLayoutRegionRole } from '@sken-ds/contracts'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-layout-region')\nexport class SkenLayoutRegion extends LitElement {\n  @property({ reflect: true }) name: SkenLayoutRegionRole = 'content'\n\n  static styles = css`\n    /* 'display: contents' makes the region transparent in the\n       layout: it does not introduce a wrapper box, so the\n       consumer's children are sized and positioned as if they\n       were direct children of the host grid. The product can\n       override with 'display: block' (or anything else) if it\n       wants the region to be a real box. */\n    :host {\n      display: contents;\n    }\n  `\n\n  override render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-layout-region': SkenLayoutRegion\n  }\n}\n"],"mappings":";;;;AAsCO,IAAM,IAAN,cAA+B,EAAW;;EACW,aAAA,KAAA,OAAA;;;EAE1C,KAAA,SAAA,CAAG;;;;;;;;;;;;CAYnB,SAAkB;EAChB,OAAO,CAAI;CACb;AACF;AAjBG,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAF5B,IAAA,EAAA,CAAA,EAAc,oBAAoB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"sken-layout-region.js","names":[],"sources":["../src/components/sken-layout-region.ts"],"sourcesContent":["// ── <sken-layout-region> — single cell of a <sken-layout> ──────────\n\nimport type { SkenLayoutRegionRole } from '@sken-ds/contracts'\nimport { LitElement, css, html } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n@customElement('sken-layout-region')\nexport class SkenLayoutRegion extends LitElement {\n  @property({ reflect: true }) name: SkenLayoutRegionRole = 'content'\n\n  static styles = css`\n    /* 'display: contents' makes the region transparent in the\n       layout: it does not introduce a wrapper box, so the\n       consumer's children are sized and positioned as if they\n       were direct children of the host grid. The product can\n       override with 'display: block' (or anything else) if it\n       wants the region to be a real box. */\n    :host {\n      display: contents;\n    }\n  `\n\n  override render() {\n    return html`<slot></slot>`\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'sken-layout-region': SkenLayoutRegion\n  }\n}\n"],"mappings":";;;;AAOO,IAAM,IAAN,cAA+B,EAAW;;EACW,aAAA,KAAA,OAAA;;;EAE1C,KAAA,SAAA,CAAG;;;;;;;;;;;;CAYnB,SAAkB;EAChB,OAAO,CAAI;CACb;AACF;AAjBG,EAAA,CAAA,EAAS,EAAE,SAAS,GAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAF5B,IAAA,EAAA,CAAA,EAAc,oBAAoB,CAAA,GAAA,CAAA"}

package/dist/sken-layout.js

@@ -1,4 +1,4 @@
-import { t as e } from "./decorate-D4FKzyDw.js";
+import { t as e } from "./decorate-C1e2sg49.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";
@@ -16,7 +16,7 @@ var c = {
 	footer: "var(--sken-muted)"
 }, u = class extends t {
 	constructor(...e) {
-		super(...e), this.variant = "header-content", this.topbarMode = "fixed", this.sidebarPosition = "start", this.sidebarSize = "md", this.density = "none", this.#e = null, this.#n = this.#t, this.#i = [];
+		super(...e), this.variant = "header-content", this.topbarMode = "fixed", this.sidebarPosition = "start", this.sidebarSize = "md", this.sidebarMode = "static", this.density = "none", this.#e = void 0, this.#n = this.#t, this.#i = [];
 	}
 	#e;
 	get #t() {
@@ -59,7 +59,7 @@ var c = {
 		this.#i = [];
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.#e?.disconnect(), this.#e = null, this.#o();
+		super.disconnectedCallback(), this.#e?.disconnect(), this.#e = void 0, this.#o();
 	}
 	#s() {
 		for (let e of Array.from(this.children)) {
@@ -76,38 +76,16 @@ var c = {
        holds the sidebar (when present) and the content. */
     :host {
       display: block;
-      block-size: 100dvh;
+      min-block-size: 100dvh;
       background: var(--sken-background, Canvas);
       color: var(--sken-foreground, CanvasText);
       font-family: var(--sken-family-sans, system-ui, sans-serif);
     }
 
-    /* The actual grid is a child <div class="grid">. We use a
-       child rather than the host itself for two reasons:
-
-       1. The grid template is computed per-render based on
-          which roles have content (see #visibleRoles and
-          render()). Setting grid-template-areas on the host
-          via an inline style would work, but the host has a
-          handful of other responsibilities (background, color,
-          font) and keeping the grid in a child makes the
-          separation cleaner.
-
-       2. CSS grid in shadow DOM: putting the grid on a child
-          avoids any quirks of the host element's display
-          behaviour (the host is a custom element with its own
-          display semantics). */
     .grid {
       display: grid;
       block-size: 100%;
       grid-template-columns: 1fr;
-      /* The grid template is set per-render via inline style
-         using the --sken-layout-grid-areas and
-         --sken-layout-grid-rows custom properties (set by the
-         render() function). The default values below match
-         the header-content variant; the inline style overrides
-         them for variants with more or fewer roles, and for
-         consumers that have unfilled regions. */
       grid-template-areas: var(--sken-layout-grid-areas, 'topbar' 'body');
       grid-template-rows: var(--sken-layout-grid-rows, 'auto 1fr');
     }
@@ -122,6 +100,11 @@ var c = {
        background, border, and padding. */
     .topbar {
       grid-area: topbar;
+      box-sizing: border-box;
+      position: sticky;
+      top: 0;
+      z-index: 1;
+      block-size: var(--sken-layout-topbar-height);
       background: var(
         --sken-layout-region-topbar-background,
         ${i(l.topbar)}
@@ -145,7 +128,7 @@ var c = {
       display: grid;
       grid-template-columns: 1fr;
       grid-template-areas: 'content';
-      min-block-size: 0; /* allow children to shrink + scroll */
+      min-block-size: 0;
     }
     .body.with-sidebar {
       grid-template-columns: var(--sken-layout-sidebar-width, 16rem) 1fr;
@@ -157,6 +140,7 @@ var c = {
     }
     .sidebar {
       grid-area: sidebar;
+      box-sizing: border-box;
       min-block-size: 0;
       background: var(
         --sken-layout-region-sidebar-background,
@@ -166,6 +150,17 @@ var c = {
       padding-inline: var(--sken-layout-region-sidebar-padding-inline, 0);
       border-inline-end: 1px solid var(--sken-border);
     }
+    :host([sidebar-mode='sticky']) .sidebar {
+      align-self: start;
+      position: sticky;
+      top: 0;
+      block-size: 100dvh;
+      overflow-y: auto;
+    }
+    :host([sidebar-mode='sticky']) .grid:has(.topbar) .sidebar {
+      top: var(--sken-layout-topbar-height);
+      block-size: calc(100dvh - var(--sken-layout-topbar-height));
+    }
     .content {
       min-block-size: 0;
       background: var(
@@ -248,13 +243,18 @@ var c = {
        style is set (e.g. before the first render completes). */
 
     /* ── Topbar mode ──────────────────────────────────────────────
-       'fixed': the host is 100dvh and the body scrolls under the
-       topbar. This is the default for admin consoles.
+       'fixed': the topbar is position: sticky and stays pinned
+       at the top while the page scrolls under it. This is the
+       default for admin consoles.
        'auto': the topbar scrolls away with the page (marketing,
        landing). */
-    :host([topbar-mode='auto']) {
+    :host([topbar-mode='auto']) .topbar {
+      position: static;
+    }
+    :host([sidebar-mode='sticky'][topbar-mode='auto']) .sidebar {
+      position: static;
       block-size: auto;
-      min-block-size: 100dvh;
+      overflow-y: visible;
     }
 
     /* ── Sidebar position ─────────────────────────────────────────
@@ -317,7 +317,10 @@ e([o({ reflect: !0 })], u.prototype, "variant", void 0), e([o({
 })], u.prototype, "sidebarPosition", void 0), e([o({
 	attribute: "sidebar-size",
 	reflect: !0
-})], u.prototype, "sidebarSize", void 0), e([o({ reflect: !0 })], u.prototype, "density", void 0), u = e([a("sken-layout")], u);
+})], u.prototype, "sidebarSize", void 0), e([o({
+	attribute: "sidebar-mode",
+	reflect: !0
+})], u.prototype, "sidebarMode", void 0), e([o({ reflect: !0 })], u.prototype, "density", void 0), u = e([a("sken-layout")], u);
 //#endregion
 export { u as SkenLayout };
 

package/dist/sken-layout.js.map

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