scb-wc-test 0.1.11 → 0.1.13

package/scb-checkbox/scb-checkbox.js

@@ -1,12 +1,12 @@
-import { css as x, LitElement as v, nothing as b, html as g } from "lit";
-import { property as n, customElement as f } from "lit/decorators.js";
+import { css as x, LitElement as y, nothing as b, html as u } from "lit";
+import { property as d, customElement as v } from "lit/decorators.js";
 import "@material/web/checkbox/checkbox.js";
-var y = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (t, s, a, o) => {
-  for (var e = o > 1 ? void 0 : o ? k(s, a) : s, d = t.length - 1, p; d >= 0; d--)
-    (p = t[d]) && (e = (o ? p(s, a, e) : p(e)) || e);
-  return o && e && y(s, a, e), e;
+var f = Object.defineProperty, k = Object.getOwnPropertyDescriptor, l = (e, s, r, o) => {
+  for (var t = o > 1 ? void 0 : o ? k(s, r) : s, a = e.length - 1, p; a >= 0; a--)
+    (p = e[a]) && (t = (o ? p(s, r, t) : p(t)) || t);
+  return o && t && f(s, r, t), t;
 };
-let r = class extends v {
+let i = class extends y {
   constructor() {
     super(...arguments), this.disabled = !1, this.indeterminate = !1, this.checked = !1, this.label = "", this.supportingText = "", this._checkboxId = "";
   }
@@ -14,61 +14,68 @@ let r = class extends v {
     super.connectedCallback(), this._checkboxId = this.id || `scb-checkbox-${Math.random().toString(36).slice(2, 11)}`;
   }
   firstUpdated() {
-    var a, o;
-    const t = (a = this.shadowRoot) == null ? void 0 : a.querySelector("md-checkbox");
-    t && t.addEventListener("change", () => {
-      const e = t.checked;
-      this.checked = e, this.dispatchEvent(
+    var r, o;
+    const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("md-checkbox");
+    e && e.addEventListener("change", () => {
+      const t = e.checked;
+      this.checked = t, this.dispatchEvent(
         new CustomEvent("change", {
-          detail: { checked: e },
+          detail: { checked: t },
           bubbles: !0,
           composed: !0
         })
       );
     });
     const s = (o = this.shadowRoot) == null ? void 0 : o.querySelector("label.wrap");
-    s == null || s.addEventListener("click", (e) => {
+    s == null || s.addEventListener("click", (t) => {
       if (this.disabled) return;
-      if (!e.composedPath().some((i) => {
-        var h, u, m;
-        const c = i;
-        return ((u = (h = c == null ? void 0 : c.tagName) == null ? void 0 : h.toLowerCase) == null ? void 0 : u.call(h)) === "md-checkbox" || ((m = c == null ? void 0 : c.classList) == null ? void 0 : m.contains("box-wrap"));
+      if (!t.composedPath().some((c) => {
+        var h, m, g;
+        const n = c;
+        return ((m = (h = n == null ? void 0 : n.tagName) == null ? void 0 : h.toLowerCase) == null ? void 0 : m.call(h)) === "md-checkbox" || ((g = n == null ? void 0 : n.classList) == null ? void 0 : g.contains("box-wrap"));
       })) {
-        e.preventDefault();
-        const i = this.shadowRoot.querySelector("md-checkbox");
-        i && (i.checked = !i.checked, i.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })));
+        t.preventDefault();
+        const c = this.shadowRoot.querySelector("md-checkbox");
+        c && (c.checked = !c.checked, c.dispatchEvent(new Event("change", { bubbles: !0, composed: !0 })));
       }
-    });
+    }), this.__syncInnerAria();
+  }
+  updated(e) {
+    super.updated(e), e.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled), (e.has("label") || e.has("supportingText")) && this.__syncInnerAria();
   }
-  updated(t) {
-    super.updated(t), t.has("disabled") && this.toggleAttribute("aria-disabled", this.disabled);
+  __syncInnerAria() {
+    var a;
+    const e = (a = this.shadowRoot) == null ? void 0 : a.querySelector("md-checkbox"), s = e == null ? void 0 : e.shadowRoot;
+    if (!s) return;
+    const r = s.querySelector('[role="checkbox"]') || s.querySelector('input[type="checkbox"]');
+    if (!r) return;
+    const o = this.label ? `${this._checkboxId}-label` : "", t = this.supportingText ? `${this._checkboxId}-supporting-text` : "";
+    o ? r.setAttribute("aria-labelledby", o) : r.removeAttribute("aria-labelledby"), t ? r.setAttribute("aria-describedby", t) : r.removeAttribute("aria-describedby");
   }
   render() {
-    const t = this.supportingText ? `${this._checkboxId}-supporting-text` : void 0;
-    return g`
+    const e = this.supportingText ? `${this._checkboxId}-supporting-text` : void 0;
+    return u`
       <label class="wrap">
         <div class="box-wrap">
           <md-checkbox
             id="${this._checkboxId}"
-            touch-target="wrapper"
             ?disabled=${this.disabled}
             ?indeterminate=${this.indeterminate}
             ?checked=${this.checked}
-            aria-describedby=${t || b}
-            aria-label=${this.label || b}
+            ${b}
           ></md-checkbox>
         </div>
-        ${this.label ? g`<span class="lbl">${this.label}</span>` : b}
+        ${this.label ? u`<span class="lbl" id="${this._checkboxId}-label">${this.label}</span>` : b}
       </label>
 
-      ${this.supportingText ? g`<div id="${this._checkboxId}-supporting-text" class="supporting-text">
+      ${this.supportingText ? u`<div id="${e}" class="supporting-text">
             ${this.supportingText}
           </div>` : b}
       <slot></slot>
     `;
   }
 };
-r.styles = x`
+i.styles = x`
     :host {
       display: inline-grid;
       grid-template-columns: auto;
@@ -105,10 +112,10 @@ r.styles = x`
     .lbl {
       color: var(--md-sys-color-on-surface);
       font-family: var(--brand-font);
-      font-size: var(--md-sys-typescale-body-large-size);
-      line-height: var(--md-sys-typescale-body-large-line-height);
+      font-size: var(--md-sys-typescale-body-medium-size);
+      line-height: var(--md-sys-typescale-body-medium-line-height);
       font-weight: var(--weight-regular, 400);
-      letter-spacing: var(--md-sys-typescale-body-large-tracking);
+      letter-spacing: var(--md-sys-typescale-body-medium-tracking);
     }
     :host([disabled]) .lbl { color: var(--n-60); }
 
@@ -125,23 +132,23 @@ r.styles = x`
     }
   `;
 l([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled", 2);
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "disabled", 2);
 l([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "indeterminate", 2);
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "indeterminate", 2);
 l([
-  n({ type: Boolean, reflect: !0 })
-], r.prototype, "checked", 2);
+  d({ type: Boolean, reflect: !0 })
+], i.prototype, "checked", 2);
 l([
-  n({ type: String })
-], r.prototype, "label", 2);
+  d({ type: String })
+], i.prototype, "label", 2);
 l([
-  n({ type: String, attribute: "supporting-text" })
-], r.prototype, "supportingText", 2);
-r = l([
-  f("scb-checkbox")
-], r);
+  d({ type: String, attribute: "supporting-text" })
+], i.prototype, "supportingText", 2);
+i = l([
+  v("scb-checkbox")
+], i);
 export {
-  r as ScbCheckbox
+  i as ScbCheckbox
 };

package/scb-divider/scb-divider.d.ts

@@ -1,8 +1,20 @@
 import { LitElement } from 'lit';
+type Variant = 'thin' | 'bold';
+type Direction = 'horizontal' | 'vertical';
+type Inset = 'none' | 'both' | 'start' | 'end';
+type Anchor = 'start' | 'end';
 export declare class ScbDivider extends LitElement {
-    variant: 'thin' | 'bold';
-    direction: 'horizontal' | 'vertical';
-    inset: 'both' | 'start' | 'end';
-    static styles: import('lit').CSSResult[];
+    variant: Variant;
+    direction: Direction;
+    inset: Inset;
+    overlay: boolean;
+    anchor: Anchor;
+    static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-divider': ScbDivider;
+    }
+}
+export {};

package/scb-divider/scb-divider.js

@@ -1,84 +1,78 @@
-import { css as d, LitElement as p, html as v } from "lit";
-import { property as c, customElement as h } from "lit/decorators.js";
-var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, o = (l, i, n, e) => {
-  for (var t = e > 1 ? void 0 : e ? b(i, n) : i, s = l.length - 1, a; s >= 0; s--)
-    (a = l[s]) && (t = (e ? a(i, n, t) : a(t)) || t);
-  return e && t && m(i, n, t), t;
+import { css as v, LitElement as d, html as p } from "lit";
+import { property as i, customElement as b } from "lit/decorators.js";
+var h = Object.defineProperty, g = Object.getOwnPropertyDescriptor, e = (l, o, s, n) => {
+  for (var t = n > 1 ? void 0 : n ? g(o, s) : o, c = l.length - 1, a; c >= 0; c--)
+    (a = l[c]) && (t = (n ? a(o, s, t) : a(t)) || t);
+  return n && t && h(o, s, t), t;
 };
-let r = class extends p {
+let r = class extends d {
   constructor() {
-    super(...arguments), this.variant = "thin", this.direction = "horizontal", this.inset = "both";
+    super(...arguments), this.variant = "thin", this.direction = "horizontal", this.inset = "none", this.overlay = !1, this.anchor = "end";
   }
   render() {
-    return v`
-      <div class="scb-divider"
-        variant=${this.variant}
-        direction=${this.direction}
-      ></div>
-    `;
+    return p``;
   }
 };
-r.styles = [
-  d`
-      :host {
-        content: '';
-        display: block;
-        border-top: 1px solid var(--md-sys-color-outline-variant);
-        width: 100%;
-      }
+r.styles = v`
+    :host {
+      --scb-divider-color: var(--md-sys-color-outline-variant);
+      --scb-divider-thickness: 1px;
+      --scb-divider-gap: var(--scb-grid-column-gap, var(--spacing-6, 24px));
+      display: block;
+      box-sizing: border-box;
+      pointer-events: none; 
+    }
+    :host([variant="bold"]) {
+      --scb-divider-color: var(--md-sys-color-outline);
+    }
 
-      :host([variant="bold"]) {
-        border-top: 1px solid var(--md-sys-color-outline);
-      }
-      :host([direction="vertical"]) {
-        border-top: none;
-        border-left: 1px solid var(--md-sys-color-outline-variant);
-        height: calc(100% - 20px);
-        margin: 10px;
-        width: 2px;
-      }
+    :host(:not([direction="vertical"])) {
+      inline-size: 100%;
+      block-size: var(--scb-divider-thickness);
+      background: var(--scb-divider-color);
+    }
+    :host([inset="both"]:not([direction="vertical"]))   { margin-inline: var(--spacing-8, 32px); }
+    :host([inset="start"]:not([direction="vertical"]))  { margin-inline-start: var(--spacing-8, 32px); }
+    :host([inset="end"]:not([direction="vertical"]))    { margin-inline-end: var(--spacing-8, 32px); }
 
-      :host([variant="bold"][direction="vertical"]) {
-        border-left: 1px solid var(--md-sys-color-outline);
-      }
+    :host([direction="vertical"]) {
+      inline-size: var(--scb-divider-thickness);
+      block-size: 100%;
+      background: var(--scb-divider-color);
+      align-self: stretch;
+      justify-self: center;
+    }
+    :host([direction="vertical"][inset="both"]:not([overlay]))  { margin-block: var(--spacing-8, 32px); }
+    :host([direction="vertical"][inset="start"]:not([overlay])) { margin-block-start: var(--spacing-8, 32px); }
+    :host([direction="vertical"][inset="end"]:not([overlay]))   { margin-block-end: var(--spacing-8, 32px); }
 
-
-      // // // :host([inset="both"]:not([direction="vertical"])) {
-      // // //   margin: 0 32px;
-      // // // }
-
-      // // // :host([inset="start"]:not([direction="vertical"])) {
-      // // //   margin-left: 32px;
-      // // // }
-
-      // // // :host([inset="end"]:not([direction="vertical"])) {
-      // // //   margin-right: 32px;
-      // // // }
-
-      // // // :host([inset="both"][direction="vertical"]) {
-      // // //   margin: 32px 0;
-      // // // }
-
-      // // // :host([inset="start"][direction="vertical"]) {
-      // // //   margin-top: 32px;
-      // // // }
-
-      // // // :host([inset="end"][direction="vertical"]) {
-      // // //   margin-bottom: 32px;
-      // // // }
-    `
-];
-o([
-  c({ type: String, reflect: !0 })
+    :host([overlay][direction="vertical"]) {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      inline-size: var(--scb-divider-thickness);
+      background: var(--scb-divider-color);
+    }
+    :host([overlay][direction="vertical"][anchor="end"])  { right: calc(var(--scb-divider-gap) / -2); }
+    :host([overlay][direction="vertical"][anchor="start"]){ left:  calc(var(--scb-divider-gap) / -2); }
+  `;
+e([
+  i({ type: String, reflect: !0 })
 ], r.prototype, "variant", 2);
-o([
-  c({ type: String, reflect: !0 })
+e([
+  i({ type: String, reflect: !0 })
 ], r.prototype, "direction", 2);
-o([
-  c({ type: String, reflect: !0 })
+e([
+  i({ type: String, reflect: !0 })
 ], r.prototype, "inset", 2);
-r = o([
-  h("scb-divider")
+e([
+  i({ type: Boolean, reflect: !0 })
+], r.prototype, "overlay", 2);
+e([
+  i({ type: String, reflect: !0 })
+], r.prototype, "anchor", 2);
+r = e([
+  b("scb-divider")
 ], r);
 export {
   r as ScbDivider

package/scb-fact-card/scb-fact-card.d.ts

@@ -1,7 +1,4 @@
 import { LitElement } from 'lit';
-/**
- * Enkel faktakort-komponent för SCB-designsystemet
- */
 export declare class ScbFactCard extends LitElement {
     private __onCloseClick;
     variant: 'filled' | 'outlined';
@@ -10,12 +7,11 @@ export declare class ScbFactCard extends LitElement {
     supportingText: string;
     icon: string;
     showCloseButton: boolean;
-    /**
-     * Gör det möjligt att öppna/stänga kortet via aria-controls eller data-fact-card-toggle
-     * (precis som scb-dialog). Hanterar även aria-expanded på triggern.
-     */
     open: boolean;
     __lastTriggerEl: HTMLElement | null;
+    fullHeight: boolean;
+    fullWidth: boolean;
+    stretch: boolean;
     private __getActionFromEvent;
     private __onDocumentClick;
     connectedCallback(): void;
@@ -26,3 +22,8 @@ export declare class ScbFactCard extends LitElement {
     static styles: import('lit').CSSResult;
     render(): import('lit-html').TemplateResult<1>;
 }
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-fact-card': ScbFactCard;
+    }
+}

package/scb-fact-card/scb-fact-card.js

@@ -1,19 +1,19 @@
-import { css as p, LitElement as u, html as n } from "lit";
-import { property as i, customElement as h } from "lit/decorators.js";
+import { css as d, LitElement as u, html as a } from "lit";
+import { property as s, customElement as h } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
 import "@material/web/ripple/ripple.js";
 import "../scb-icon-button/scb-icon-button.js";
 import "./scb-fact-card-content.js";
-var b = Object.defineProperty, f = Object.getOwnPropertyDescriptor, r = (t, e, c, a) => {
-  for (var s = a > 1 ? void 0 : a ? f(e, c) : e, l = t.length - 1, d; l >= 0; l--)
-    (d = t[l]) && (s = (a ? d(e, c, s) : d(s)) || s);
-  return a && s && b(e, c, s), s;
+var f = Object.defineProperty, b = Object.getOwnPropertyDescriptor, i = (t, e, l, n) => {
+  for (var r = n > 1 ? void 0 : n ? b(e, l) : e, c = t.length - 1, p; c >= 0; c--)
+    (p = t[c]) && (r = (n ? p(e, l, r) : p(r)) || r);
+  return n && r && f(e, l, r), r;
 };
 let o = class extends u {
   constructor() {
     super(...arguments), this.__onCloseClick = (t) => {
       t.stopPropagation(), this.__setOpen(!1);
-    }, this.variant = "filled", this.label = "", this.subLabel = "", this.supportingText = "", this.icon = "", this.showCloseButton = !1, this.open = !0, this.__lastTriggerEl = null, this.__onDocumentClick = (t) => {
+    }, this.variant = "filled", this.label = "", this.subLabel = "", this.supportingText = "", this.icon = "", this.showCloseButton = !1, this.open = !0, this.__lastTriggerEl = null, this.fullHeight = !1, this.fullWidth = !1, this.stretch = !1, this.__onDocumentClick = (t) => {
       this.__getActionFromEvent(t) === "toggle" && (this.__setOpen(!this.open), t.stopPropagation());
     };
   }
@@ -47,100 +47,122 @@ let o = class extends u {
     this.open = t, t && !e ? this.dispatchEvent(new CustomEvent("open", { bubbles: !0, composed: !0 })) : !t && e && this.dispatchEvent(new CustomEvent("close", { bubbles: !0, composed: !0 }));
   }
   render() {
-    if (!this.open) return n``;
+    if (!this.open) return a``;
     const t = this.variant === "outlined" ? "outlined" : "filled";
-    return n`
-            ${this.icon ? n`<div class="icon-wrapper ${t}"><md-icon>${this.icon}</md-icon></div>` : ""}
-            <div class="scb-fact-card ${t} ${this.icon ? "no-topleft-radius" : ""} ${this.showCloseButton ? "has-close" : ""}">
-                ${this.showCloseButton ? n`<scb-icon-button variant="standard" icon="close" @click=${this.__onCloseClick}></scb-icon-button>` : ""}
-                <div class="content">
-                    <slot></slot>
-                </div>
-            </div>
-        `;
+    return a`
+      ${this.icon ? a`<div class="icon-wrapper ${t}"><md-icon>${this.icon}</md-icon></div>` : ""}
+      <div class="scb-fact-card ${t} ${this.icon ? "no-topleft-radius" : ""} ${this.showCloseButton ? "has-close" : ""}">
+        ${this.showCloseButton ? a`<scb-icon-button variant="standard" icon="close" @click=${this.__onCloseClick}></scb-icon-button>` : ""}
+        <div class="content">
+          <slot></slot>
+        </div>
+      </div>
+    `;
   }
 };
-o.styles = p`
-    :host{ --scb-fact-card-max-w:  580px; }
+o.styles = d`
     :host {
-        max-width: var(--scb-fact-card-max-w);
-        width: fit-content;
-        display: block;
-        position: relative;
+      --scb-fact-card-max-w: 580px;
+      display: block;
+      position: relative;
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      max-inline-size: var(--scb-fact-card-max-w);
+      height: auto;
     }
+
+    :host([full-width]) { max-inline-size: none; }
+
+    :host([stretch]),
+    :host([full-height]) { block-size: 100%; }
+
+    :host([stretch]) .scb-fact-card,
+    :host([full-height]) .scb-fact-card { block-size: 100%; }
+
     .scb-fact-card {
-        color: var(--md-sys-color-on-surface);
-        max-width: var(--scb-fact-card-max-w);
-        width: fit-content;
-        position: relative;
-        border-radius: var(--md-sys-shape-corner-large);
-        background: var(--md-sys-color-surface-dim);
-        padding: var(--spacing-7);
-    }
-    .scb-fact-card.has-close {
-        padding-right: var(--spacing-12);
-    }
-    .scb-fact-card.no-topleft-radius {
-        border-top-left-radius: 0;
-        margin-top: var(--spacing-9);
-    }
-    .scb-fact-card.outlined {
-        border: 1px solid var(--md-sys-color-outline);
-        background: var(--md-sys-color-surface);
+      color: var(--md-sys-color-on-surface);
+      position: relative;
+      border-radius: var(--md-sys-shape-corner-large);
+      background: var(--md-sys-color-surface-dim);
+      padding: var(--spacing-7);
+      box-sizing: border-box;
+      inline-size: 100%;
+      max-inline-size: 100%;
+      min-inline-size: 0;
+      overflow: hidden;
     }
+
+    .scb-fact-card.has-close { padding-right: var(--spacing-12); }
+    .scb-fact-card.no-topleft-radius { border-top-left-radius: 0; margin-top: var(--spacing-9); }
+    .scb-fact-card.outlined { border: 1px solid var(--md-sys-color-outline); background: var(--md-sys-color-surface); }
+
     .icon-wrapper {
-        top: -40px;
-        position: absolute;
-        z-index: 1;
-        padding: var(--spacing-5) var(--spacing-7);
-        padding-bottom: 0;
-        width: fit-content;
-        border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0 / var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0; /* halvmåne upptill */
-        background: var(--md-sys-color-surface-dim);
-        line-height: 0;
+      position: absolute;
+      z-index: 1;
+      top: -40px;
+      left: 0;
+      padding: var(--spacing-5) var(--spacing-7);
+      padding-bottom: 0;
+      width: fit-content;
+      border-radius: var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0 /
+                     var(--md-sys-shape-corner-full) var(--md-sys-shape-corner-full) 0 0;
+      background: var(--md-sys-color-surface-dim);
+      line-height: 0;
     }
     .icon-wrapper.outlined {
-        border: var(--stroke-border) solid var(--md-sys-color-outline);
-        border-bottom: none;
-        background: var(--md-sys-color-surface);
+      border: var(--stroke-border) solid var(--md-sys-color-outline);
+      border-bottom: none;
+      background: var(--md-sys-color-surface);
     }
+
     scb-icon-button {
-        position: absolute;
-        right: var(--scale-01);
-        top: var(--scale-01 );
-    }
-    .scb-fact-card.clickable {
-        cursor: pointer;
+      position: absolute;
+      right: var(--scale-01);
+      top: var(--scale-01);
     }
+
+    .scb-fact-card.clickable { cursor: pointer; }
+
     .content {
-        display: flex;
-        flex-direction: column;
-        gap: var(--spacing-8);
-        width: 100%;
+      display: flex;
+      flex-direction: column;
+      gap: var(--spacing-8);
+      inline-size: 100%;
+      min-inline-size: 0;
     }
   `;
-r([
-  i({ type: String })
+i([
+  s({ type: String })
 ], o.prototype, "variant", 2);
-r([
-  i({ type: String })
+i([
+  s({ type: String })
 ], o.prototype, "label", 2);
-r([
-  i({ type: String, attribute: "sub-label" })
+i([
+  s({ type: String, attribute: "sub-label" })
 ], o.prototype, "subLabel", 2);
-r([
-  i({ type: String, attribute: "supporting-text" })
+i([
+  s({ type: String, attribute: "supporting-text" })
 ], o.prototype, "supportingText", 2);
-r([
-  i({ type: String })
+i([
+  s({ type: String })
 ], o.prototype, "icon", 2);
-r([
-  i({ type: Boolean, attribute: "show-close-button" })
+i([
+  s({ type: Boolean, attribute: "show-close-button" })
 ], o.prototype, "showCloseButton", 2);
-r([
-  i({ type: Boolean, reflect: !0 })
+i([
+  s({ type: Boolean, reflect: !0 })
 ], o.prototype, "open", 2);
-o = r([
+i([
+  s({ type: Boolean, reflect: !0, attribute: "full-height" })
+], o.prototype, "fullHeight", 2);
+i([
+  s({ type: Boolean, reflect: !0, attribute: "full-width" })
+], o.prototype, "fullWidth", 2);
+i([
+  s({ type: Boolean, reflect: !0 })
+], o.prototype, "stretch", 2);
+o = i([
   h("scb-fact-card")
 ], o);
 export {

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

@@ -2,9 +2,10 @@ import { LitElement } from 'lit';
 /**
   <scb-grid-item>
   Styr enskilda celler i <scb-grid>.
-  - Span-attribut (reflectas som CSS-variabler) → läses av <scb-grid>
+  - Kolumn-span: col-span*, reflectas som CSS-variabler
+  - Rad-span:    row-span*, omvandlas till "span N" och läses av <scb-grid>
   - Per-item justering: align/justify (align-self/justify-self)
-  - fit (width: fit-content)
+  - fit: fyll radens höjd samt låt första slottade barnet sträcka sig
  */
 export declare class ScbGridItem extends LitElement {
     #private;
@@ -12,6 +13,10 @@ export declare class ScbGridItem extends LitElement {
     colSpanCompact?: number;
     colSpanMedium?: number;
     colSpanExpanded?: number;
+    rowSpan?: number;
+    rowSpanCompact?: number;
+    rowSpanMedium?: number;
+    rowSpanExpanded?: number;
     align?: 'start' | 'center' | 'end' | 'stretch';
     justify?: 'start' | 'center' | 'end' | 'stretch';
     fit: boolean;