scb-wc-test 0.1.11 → 0.1.13

package/scb-grid/scb-grid-item.js

@@ -1,65 +1,79 @@
-import { css as m, LitElement as f, html as b } from "lit";
-import { property as l, customElement as g } from "lit/decorators.js";
-var v = Object.defineProperty, S = Object.getOwnPropertyDescriptor, y = (e) => {
+import { css as d, LitElement as f, html as b } from "lit";
+import { property as a, customElement as S } from "lit/decorators.js";
+var g = Object.defineProperty, w = Object.getOwnPropertyDescriptor, m = (e) => {
   throw TypeError(e);
-}, a = (e, t, r, c) => {
-  for (var o = c > 1 ? void 0 : c ? S(t, r) : t, h = e.length - 1, u; h >= 0; h--)
-    (u = e[h]) && (o = (c ? u(t, r, o) : u(o)) || o);
-  return c && o && v(t, r, o), o;
-}, _ = (e, t, r) => t.has(e) || y("Cannot " + r), x = (e, t, r) => t.has(e) ? y("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), p = (e, t, r) => (_(e, t, "access private method"), r), i, d, n;
+}, i = (e, t, p, c) => {
+  for (var n = c > 1 ? void 0 : c ? w(t, p) : t, u = e.length - 1, h; u >= 0; u--)
+    (h = e[u]) && (n = (c ? h(t, p, n) : h(n)) || n);
+  return c && n && g(t, p, n), n;
+}, v = (e, t, p) => t.has(e) || m("Cannot " + p), _ = (e, t, p) => t.has(e) ? m("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, p), o = (e, t, p) => (v(e, t, "access private method"), p), r, y, l;
 let s = class extends f {
   constructor() {
-    super(...arguments), x(this, i), this.fit = !1;
+    super(...arguments), _(this, r), this.fit = !1;
   }
   firstUpdated() {
-    p(this, i, d).call(this);
+    o(this, r, y).call(this);
   }
   updated() {
-    p(this, i, d).call(this);
+    o(this, r, y).call(this);
   }
   render() {
     return b`<slot></slot>`;
   }
 };
-i = /* @__PURE__ */ new WeakSet();
-d = function() {
-  p(this, i, n).call(this, "--col-span", this.hasAttribute("col-span") ? String(this.colSpan) : null), p(this, i, n).call(this, "--col-span-compact", this.hasAttribute("col-span-compact") ? String(this.colSpanCompact) : null), p(this, i, n).call(this, "--col-span-medium", this.hasAttribute("col-span-medium") ? String(this.colSpanMedium) : null), p(this, i, n).call(this, "--col-span-expanded", this.hasAttribute("col-span-expanded") ? String(this.colSpanExpanded) : null), this.align ? this.style.setProperty("--scb-grid-item-align", this.align) : this.style.removeProperty("--scb-grid-item-align"), this.justify ? this.style.setProperty("--scb-grid-item-justify", this.justify) : this.style.removeProperty("--scb-grid-item-justify");
+r = /* @__PURE__ */ new WeakSet();
+y = function() {
+  o(this, r, l).call(this, "--col-span", this.hasAttribute("col-span") ? String(this.colSpan) : null), o(this, r, l).call(this, "--col-span-compact", this.hasAttribute("col-span-compact") ? String(this.colSpanCompact) : null), o(this, r, l).call(this, "--col-span-medium", this.hasAttribute("col-span-medium") ? String(this.colSpanMedium) : null), o(this, r, l).call(this, "--col-span-expanded", this.hasAttribute("col-span-expanded") ? String(this.colSpanExpanded) : null), o(this, r, l).call(this, "--row-rule", this.hasAttribute("row-span") ? `span ${this.rowSpan}` : null), o(this, r, l).call(this, "--row-rule-compact", this.hasAttribute("row-span-compact") ? `span ${this.rowSpanCompact}` : null), o(this, r, l).call(this, "--row-rule-medium", this.hasAttribute("row-span-medium") ? `span ${this.rowSpanMedium}` : null), o(this, r, l).call(this, "--row-rule-expanded", this.hasAttribute("row-span-expanded") ? `span ${this.rowSpanExpanded}` : null), this.align ? (this.style.setProperty("--scb-grid-item-align", this.align), this.style.setProperty("align-self", this.align)) : (this.style.removeProperty("--scb-grid-item-align"), this.style.removeProperty("align-self")), this.justify ? (this.style.setProperty("--scb-grid-item-justify", this.justify), this.style.setProperty("justify-self", this.justify)) : (this.style.removeProperty("--scb-grid-item-justify"), this.style.removeProperty("justify-self"));
 };
-n = function(e, t) {
+l = function(e, t) {
   t === null || t === "" ? this.style.removeProperty(e) : this.style.setProperty(e, t);
 };
-s.styles = m`
+s.styles = d`
     :host {
       box-sizing: border-box;
       display: block;
       align-self:  var(--scb-grid-item-align, auto);
       justify-self: var(--scb-grid-item-justify, auto);
+      block-size: auto;
     }
-    :host([fit]) { width: fit-content; max-width: 100%; }
+    :host([fit]) { block-size: 100%; }
+    :host([fit]) ::slotted(*) { block-size: 100%; }
   `;
-a([
-  l({ type: Number, attribute: "col-span", reflect: !0 })
+i([
+  a({ type: Number, attribute: "col-span", reflect: !0 })
 ], s.prototype, "colSpan", 2);
-a([
-  l({ type: Number, attribute: "col-span-compact", reflect: !0 })
+i([
+  a({ type: Number, attribute: "col-span-compact", reflect: !0 })
 ], s.prototype, "colSpanCompact", 2);
-a([
-  l({ type: Number, attribute: "col-span-medium", reflect: !0 })
+i([
+  a({ type: Number, attribute: "col-span-medium", reflect: !0 })
 ], s.prototype, "colSpanMedium", 2);
-a([
-  l({ type: Number, attribute: "col-span-expanded", reflect: !0 })
+i([
+  a({ type: Number, attribute: "col-span-expanded", reflect: !0 })
 ], s.prototype, "colSpanExpanded", 2);
-a([
-  l({ type: String, reflect: !0 })
+i([
+  a({ type: Number, attribute: "row-span", reflect: !0 })
+], s.prototype, "rowSpan", 2);
+i([
+  a({ type: Number, attribute: "row-span-compact", reflect: !0 })
+], s.prototype, "rowSpanCompact", 2);
+i([
+  a({ type: Number, attribute: "row-span-medium", reflect: !0 })
+], s.prototype, "rowSpanMedium", 2);
+i([
+  a({ type: Number, attribute: "row-span-expanded", reflect: !0 })
+], s.prototype, "rowSpanExpanded", 2);
+i([
+  a({ type: String, reflect: !0 })
 ], s.prototype, "align", 2);
-a([
-  l({ type: String, reflect: !0 })
+i([
+  a({ type: String, reflect: !0 })
 ], s.prototype, "justify", 2);
-a([
-  l({ type: Boolean, reflect: !0 })
+i([
+  a({ type: Boolean, reflect: !0 })
 ], s.prototype, "fit", 2);
-s = a([
-  g("scb-grid-item")
+s = i([
+  S("scb-grid-item")
 ], s);
 export {
   s as ScbGridItem

package/scb-grid/scb-grid.d.ts

@@ -3,9 +3,10 @@ import { LitElement } from 'lit';
  * <scb-grid>
  * Responsivt kolumn-grid enligt M3 window size classes.
  * Kolumner: 4 (compact) / 8 (medium) / 12 (expanded)
- * Gap: var(--spacing-7, 24px) om inget anges
- * Barnen (grid-items) styra span via CSS-var som sätts av <scb-grid-item>:
- *   --col-span, --col-span-compact, --col-span-medium, --col-span-expanded
+ * Default-gap: var(--spacing-7, 24px)
+ * Styrning via CSS-variabler som sätts av <scb-grid-item>:
+ *   Kolumner: --col-span, --col-span-compact, --col-span-medium, --col-span-expanded
+ *   Rader:    --row-rule, --row-rule-compact, --row-rule-medium, --row-rule-expanded  (t.ex. "span 2")
  */
 export declare class ScbGrid extends LitElement {
     #private;
@@ -20,9 +21,12 @@ export declare class ScbGrid extends LitElement {
     paddingInline: string;
     paddingBlock: string;
     maxWidth: string;
+    autoRows: string;
     static styles: import('lit').CSSResult;
     protected firstUpdated(): void;
     protected updated(): void;
+    private mapSpacingToken;
+    private parseGapShorthand;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/scb-grid/scb-grid.js

@@ -1,33 +1,49 @@
 import { css as h, LitElement as v, html as b } from "lit";
 import { property as a, customElement as y } from "lit/decorators.js";
-var x = Object.defineProperty, f = Object.getOwnPropertyDescriptor, u = (r) => {
+var w = Object.defineProperty, f = Object.getOwnPropertyDescriptor, u = (r) => {
   throw TypeError(r);
-}, s = (r, t, i, n) => {
-  for (var c = n > 1 ? void 0 : n ? f(t, i) : t, l = r.length - 1, m; l >= 0; l--)
-    (m = r[l]) && (c = (n ? m(t, i, c) : m(c)) || c);
-  return n && c && x(t, i, c), c;
-}, w = (r, t, i) => t.has(r) || u("Cannot " + i), _ = (r, t, i) => t.has(r) ? u("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, i), d = (r, t, i) => (w(r, t, "access private method"), i), o, g, p;
+}, s = (r, t, i, c) => {
+  for (var o = c > 1 ? void 0 : c ? f(t, i) : t, d = r.length - 1, m; d >= 0; d--)
+    (m = r[d]) && (o = (c ? m(t, i, o) : m(o)) || o);
+  return c && o && w(t, i, o), o;
+}, x = (r, t, i) => t.has(r) || u("Cannot " + i), S = (r, t, i) => t.has(r) ? u("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(r) : t.set(r, i), p = (r, t, i) => (x(r, t, "access private method"), i), n, g, l;
 let e = class extends v {
   constructor() {
-    super(...arguments), _(this, o), this.colsCompact = 4, this.colsMedium = 8, this.colsExpanded = 12, this.gap = "", this.rowGap = "", this.columnGap = "", this.alignItems = "stretch", this.justifyItems = "stretch", this.paddingInline = "", this.paddingBlock = "", this.maxWidth = "";
+    super(...arguments), S(this, n), this.colsCompact = 4, this.colsMedium = 8, this.colsExpanded = 12, this.gap = "", this.rowGap = "", this.columnGap = "", this.alignItems = "stretch", this.justifyItems = "stretch", this.paddingInline = "", this.paddingBlock = "", this.maxWidth = "", this.autoRows = "";
   }
   firstUpdated() {
-    d(this, o, g).call(this);
+    p(this, n, g).call(this);
   }
   updated() {
-    d(this, o, g).call(this);
+    p(this, n, g).call(this);
+  }
+  mapSpacingToken(r) {
+    if (!r) return;
+    const t = String(r).trim();
+    return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+  }
+  parseGapShorthand(r) {
+    if (!r) return {};
+    const t = r.trim().split(/\s+/);
+    if (t.length === 1) {
+      const i = this.mapSpacingToken(t[0]);
+      return { row: i, col: i };
+    }
+    return { row: this.mapSpacingToken(t[0]), col: this.mapSpacingToken(t[1]) };
   }
   render() {
     return b`<div class="grid"><slot></slot></div>`;
   }
 };
-o = /* @__PURE__ */ new WeakSet();
+n = /* @__PURE__ */ new WeakSet();
 g = function() {
   this.style.setProperty("--scb-grid-cols-compact", String(this.colsCompact)), this.style.setProperty("--scb-grid-cols-medium", String(this.colsMedium)), this.style.setProperty("--scb-grid-cols-expanded", String(this.colsExpanded));
-  const r = "var(--spacing-7, 24px)", t = this.rowGap || this.gap || r, i = this.columnGap || this.gap || r;
-  this.style.setProperty("--scb-grid-row-gap", t), this.style.setProperty("--scb-grid-column-gap", i), this.style.setProperty("--scb-grid-gap", `${t} ${i}`), this.style.setProperty("--scb-grid-align-items", this.alignItems), this.style.setProperty("--scb-grid-justify-items", this.justifyItems), d(this, o, p).call(this, "--scb-grid-max-width", this.maxWidth), d(this, o, p).call(this, "--scb-grid-padding-inline", this.paddingInline), d(this, o, p).call(this, "--scb-grid-padding-block", this.paddingBlock);
+  const r = "var(--spacing-7, 24px)", t = this.parseGapShorthand(this.gap), i = this.mapSpacingToken(this.rowGap) ?? t.row ?? r, c = this.mapSpacingToken(this.columnGap) ?? t.col ?? r;
+  this.style.setProperty("--scb-grid-row-gap", i), this.style.setProperty("--scb-grid-column-gap", c), this.style.setProperty("--scb-grid-gap", `${i} ${c}`), this.style.setProperty("--scb-grid-align-items", this.alignItems), this.style.setProperty("--scb-grid-justify-items", this.justifyItems);
+  const o = this.mapSpacingToken(this.paddingInline), d = this.mapSpacingToken(this.paddingBlock);
+  p(this, n, l).call(this, "--scb-grid-max-width", this.maxWidth), p(this, n, l).call(this, "--scb-grid-padding-inline", o ?? ""), p(this, n, l).call(this, "--scb-grid-padding-block", d ?? ""), p(this, n, l).call(this, "--scb-grid-auto-rows", this.autoRows);
 };
-p = function(r, t) {
+l = function(r, t) {
   t ? this.style.setProperty(r, t) : this.style.removeProperty(r);
 };
 e.styles = h`
@@ -38,14 +54,18 @@ e.styles = h`
     margin-inline: auto;
     padding-inline: var(--scb-grid-padding-inline, 0);
     padding-block:  var(--scb-grid-padding-block, 0);
-
     container-type: inline-size;
   }
 
   .grid {
     display: grid;
     width: 100%;
-    gap: var(--scb-grid-gap, var(--spacing-7, 24px));
+    grid-auto-rows: var(--scb-grid-auto-rows, auto);
+
+    /* Longhands med fallback till --scb-grid-gap och sedan token-default */
+    row-gap:    var(--scb-grid-row-gap,    var(--scb-grid-gap, var(--spacing-7, 24px)));
+    column-gap: var(--scb-grid-column-gap, var(--scb-grid-gap, var(--spacing-7, 24px)));
+
     grid-auto-flow: row dense;
     grid-auto-rows: var(--scb-grid-auto-rows, auto);
     align-items:   var(--scb-grid-align-items, stretch);
@@ -57,56 +77,69 @@ e.styles = h`
 
   .grid > slot { display: contents; }
 
+  /* Kolumn-span + rad-span (compact) */
   .grid ::slotted(*) {
-    grid-column: span var(--col-span-compact, var(--col-span, var(--scb-grid-cols-compact, 4)));
+    min-width: 0;
+    min-height: 0;
     grid-column: span min(
       max(1, var(--col-span-compact, var(--col-span, var(--scb-grid-cols-compact, 4)))) ,
       var(--scb-grid-cols-compact, 4)
     );
+    grid-row: var(--row-rule-compact, var(--row-rule, auto));
   }
 
-   @supports not (container-type: inline-size) {
+  /* Utan container queries -> media queries */
+  @supports not (container-type: inline-size) {
     @media (min-width: 600px) {
       .grid { grid-template-columns: repeat(var(--scb-grid-cols-medium, 8), minmax(0, 1fr)); }
       .grid ::slotted(*) {
-        grid-column: span var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)));
+        min-width: 0;
+        min-height: 0;
         grid-column: span min(
           max(1, var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)))) ,
           var(--scb-grid-cols-medium, 8)
         );
+        grid-row: var(--row-rule-medium, var(--row-rule, auto));
       }
     }
     @media (min-width: 840px) {
       .grid { grid-template-columns: repeat(var(--scb-grid-cols-expanded, 12), minmax(0, 1fr)); }
       .grid ::slotted(*) {
-        grid-column: span var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)));
+        min-width: 0;
+        min-height: 0;
         grid-column: span min(
           max(1, var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)))) ,
           var(--scb-grid-cols-expanded, 12)
         );
+        grid-row: var(--row-rule-expanded, var(--row-rule, auto));
       }
     }
   }
 
+  /* Med container queries */
   @supports (container-type: inline-size) {
     @container (min-width: 600px) {
       .grid { grid-template-columns: repeat(var(--scb-grid-cols-medium, 8), minmax(0, 1fr)); }
       .grid ::slotted(*) {
-        grid-column: span var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)));
+        min-width: 0;
+        min-height: 0;
         grid-column: span min(
           max(1, var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)))) ,
           var(--scb-grid-cols-medium, 8)
         );
+        grid-row: var(--row-rule-medium, var(--row-rule, auto));
       }
     }
     @container (min-width: 840px) {
       .grid { grid-template-columns: repeat(var(--scb-grid-cols-expanded, 12), minmax(0, 1fr)); }
       .grid ::slotted(*) {
-        grid-column: span var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)));
+        min-width: 0;
+        min-height: 0;
         grid-column: span min(
           max(1, var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)))) ,
           var(--scb-grid-cols-expanded, 12)
         );
+        grid-row: var(--row-rule-expanded, var(--row-rule, auto));
       }
     }
   }
@@ -144,6 +177,9 @@ s([
 s([
   a({ type: String, attribute: "max-width", reflect: !0 })
 ], e.prototype, "maxWidth", 2);
+s([
+  a({ type: String, attribute: "auto-rows", reflect: !0 })
+], e.prototype, "autoRows", 2);
 e = s([
   y("scb-grid")
 ], e);

package/scb-grid/scb-stack.d.ts

@@ -3,7 +3,7 @@ import { LitElement } from 'lit';
  * <scb-stack>
  * Minimal 1D-layout (flex) för innehåll inuti t.ex. <scb-grid-item>.
  * - direction: row | column
- * - gap: token-fallback (var(--spacing-5, 16px))
+ * - gap / row-gap / column-gap: kan vara spacing-siffra 0–14 (→ var(--spacing-N)) eller valfritt CSS-värde
  * - align (align-items) / justify (justify-content)
  * - wrap: bryt rad i row-läge
  * - inline: inline-flex istället för block
@@ -12,6 +12,8 @@ export declare class ScbStack extends LitElement {
     #private;
     direction: 'row' | 'column';
     gap: string;
+    rowGap: string;
+    columnGap: string;
     align: 'start' | 'center' | 'end' | 'stretch' | 'baseline';
     justify: 'start' | 'center' | 'end' | 'between' | 'around' | 'evenly';
     wrap: boolean;
@@ -19,6 +21,8 @@ export declare class ScbStack extends LitElement {
     static styles: import('lit').CSSResult;
     protected firstUpdated(): void;
     protected updated(): void;
+    private mapSpacingToken;
+    private parseGapShorthand;
     render(): import('lit-html').TemplateResult<1>;
 }
 declare global {

package/scb-grid/scb-stack.js

@@ -1,36 +1,52 @@
-import { css as d, LitElement as u, html as v } from "lit";
-import { property as c, customElement as g } from "lit/decorators.js";
-var b = Object.defineProperty, w = Object.getOwnPropertyDescriptor, f = (e) => {
+import { css as f, LitElement as g, html as d } from "lit";
+import { property as c, customElement as m } from "lit/decorators.js";
+var b = Object.defineProperty, v = Object.getOwnPropertyDescriptor, u = (e) => {
   throw TypeError(e);
-}, i = (e, t, s, n) => {
-  for (var a = n > 1 ? void 0 : n ? w(t, s) : t, o = e.length - 1, l; o >= 0; o--)
-    (l = e[o]) && (a = (n ? l(t, s, a) : l(a)) || a);
-  return n && a && b(t, s, a), a;
-}, x = (e, t, s) => t.has(e) || f("Cannot " + s), _ = (e, t, s) => t.has(e) ? f("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), y = (e, t, s) => (x(e, t, "access private method"), s), p, h;
-let r = class extends u {
+}, n = (e, t, s, i) => {
+  for (var a = i > 1 ? void 0 : i ? v(t, s) : t, p = e.length - 1, l; p >= 0; p--)
+    (l = e[p]) && (a = (i ? l(t, s, a) : l(a)) || a);
+  return i && a && b(t, s, a), a;
+}, k = (e, t, s) => t.has(e) || u("Cannot " + s), w = (e, t, s) => t.has(e) ? u("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, s), y = (e, t, s) => (k(e, t, "access private method"), s), o, h;
+let r = class extends g {
   constructor() {
-    super(...arguments), _(this, p), this.direction = "column", this.gap = "", this.align = "stretch", this.justify = "start", this.wrap = !1, this.inline = !1;
+    super(...arguments), w(this, o), this.direction = "column", this.gap = "", this.rowGap = "", this.columnGap = "", this.align = "stretch", this.justify = "start", this.wrap = !1, this.inline = !1;
   }
   firstUpdated() {
-    y(this, p, h).call(this);
+    y(this, o, h).call(this);
   }
   updated() {
-    y(this, p, h).call(this);
+    y(this, o, h).call(this);
+  }
+  mapSpacingToken(e) {
+    if (!e) return;
+    const t = String(e).trim();
+    return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+  }
+  parseGapShorthand(e) {
+    if (!e) return {};
+    const t = e.trim().split(/\s+/);
+    if (t.length === 1) {
+      const s = this.mapSpacingToken(t[0]);
+      return { row: s, col: s };
+    }
+    return { row: this.mapSpacingToken(t[0]), col: this.mapSpacingToken(t[1]) };
   }
   render() {
-    return v`<slot></slot>`;
+    return d`<slot></slot>`;
   }
 };
-p = /* @__PURE__ */ new WeakSet();
+o = /* @__PURE__ */ new WeakSet();
 h = function() {
-  this.style.setProperty("--scb-stack-direction", this.direction), this.style.setProperty("--scb-stack-gap", this.gap || "var(--spacing-5, 16px)");
-  const e = {
+  this.style.setProperty("--scb-stack-direction", this.direction);
+  const e = "var(--spacing-5, 16px)", t = this.parseGapShorthand(this.gap), s = this.mapSpacingToken(this.rowGap) ?? t.row ?? e, i = this.mapSpacingToken(this.columnGap) ?? t.col ?? e;
+  this.style.setProperty("--scb-stack-gap", `${s}`), this.style.setProperty("--scb-stack-row-gap", s), this.style.setProperty("--scb-stack-column-gap", i);
+  const a = {
     start: "flex-start",
     center: "center",
     end: "flex-end",
     stretch: "stretch",
     baseline: "baseline"
-  }, t = {
+  }, p = {
     start: "flex-start",
     center: "center",
     end: "flex-end",
@@ -38,44 +54,54 @@ h = function() {
     around: "space-around",
     evenly: "space-evenly"
   };
-  this.style.setProperty("--scb-stack-align", e[this.align] ?? "stretch"), this.style.setProperty("--scb-stack-justify", t[this.justify] ?? "flex-start"), this.style.setProperty("--scb-stack-wrap", this.wrap ? "wrap" : "nowrap");
+  this.style.setProperty("--scb-stack-align", a[this.align] ?? "stretch"), this.style.setProperty("--scb-stack-justify", p[this.justify] ?? "flex-start"), this.style.setProperty("--scb-stack-wrap", this.wrap ? "wrap" : "nowrap");
 };
-r.styles = d`
+r.styles = f`
     :host {
       box-sizing: border-box;
       display: var(--scb-stack-display, flex);
       flex-direction: var(--scb-stack-direction, column);
-      gap: var(--scb-stack-gap, var(--spacing-5, 16px));
+
+      /* Longhands med fallback till --scb-stack-gap och token-default */
+      row-gap:    var(--scb-stack-row-gap,    var(--scb-stack-gap, var(--spacing-5, 16px)));
+      column-gap: var(--scb-stack-column-gap, var(--scb-stack-gap, var(--spacing-5, 16px)));
+
       align-items: var(--scb-stack-align, stretch);
       justify-content: var(--scb-stack-justify, flex-start);
       flex-wrap: var(--scb-stack-wrap, nowrap);
+
       width: auto;
       max-width: 100%;
+      min-inline-size: 0;
     }
-    :host([inline]) {
-      --scb-stack-display: inline-flex;
-    }
+    :host([inline]) { --scb-stack-display: inline-flex; }
   `;
-i([
+n([
   c({ type: String, reflect: !0 })
 ], r.prototype, "direction", 2);
-i([
+n([
   c({ type: String, reflect: !0 })
 ], r.prototype, "gap", 2);
-i([
+n([
+  c({ type: String, attribute: "row-gap", reflect: !0 })
+], r.prototype, "rowGap", 2);
+n([
+  c({ type: String, attribute: "column-gap", reflect: !0 })
+], r.prototype, "columnGap", 2);
+n([
   c({ type: String, reflect: !0 })
 ], r.prototype, "align", 2);
-i([
+n([
   c({ type: String, reflect: !0 })
 ], r.prototype, "justify", 2);
-i([
+n([
   c({ type: Boolean, reflect: !0 })
 ], r.prototype, "wrap", 2);
-i([
+n([
   c({ type: Boolean, reflect: !0 })
 ], r.prototype, "inline", 2);
-r = i([
-  g("scb-stack")
+r = n([
+  m("scb-stack")
 ], r);
 export {
   r as ScbStack

package/scb-header/scb-header.d.ts

@@ -35,8 +35,8 @@ export declare class ScbHeader extends LitElement {
     includeUtilityInDrawer: boolean;
     searchMax?: string;
     searchMin?: string;
+    searchHeight?: string;
     private _drawerId;
-    private _paddingInline;
     private _drawerMounted;
     private _drawerExpanded;
     private _searchId;
@@ -79,7 +79,6 @@ export declare class ScbHeader extends LitElement {
     private _visible;
     private _overflows;
     private _measure;
-    private _updatePadding;
     firstUpdated(): void;
     protected updated(changed: Map<string, unknown>): void;
     disconnectedCallback(): void;