scb-wc-test 0.1.1

package/scb-calendar-card/scb-calendar-card.js

@@ -0,0 +1,191 @@
+import { css as c, LitElement as h, html as d } from "lit";
+import { property as s, customElement as g } from "lit/decorators.js";
+var v = Object.defineProperty, f = Object.getOwnPropertyDescriptor, a = (i, n, o, r) => {
+  for (var t = r > 1 ? void 0 : r ? f(n, o) : n, l = i.length - 1, p; l >= 0; l--)
+    (p = i[l]) && (t = (r ? p(n, o, t) : p(t)) || t);
+  return r && t && v(n, o, t), t;
+};
+let e = class extends h {
+  constructor() {
+    super(...arguments), this.variant = "default", this.direction = "horizontal", this.header = "", this.subtitle = "", this.supportingText = "", this.cardHref = "", this.showMedia = null;
+  }
+  // Ladda in md-icon + md-ripple on-demand (första gången komponenten mountas)
+  async firstUpdated() {
+    e.__iconLoaded || (await import("@material/web/icon/icon.js"), e.__iconLoaded = !0), e.__rippleLoaded || (await import("@material/web/ripple/ripple.js"), e.__rippleLoaded = !0);
+  }
+  render() {
+    const i = this.variant ? `${this.variant.toLowerCase()}` : "", n = this.direction ? `${this.direction.toLowerCase()}` : "", o = this.cardHref ? "clickable" : "", r = (/* @__PURE__ */ new Date()).getDate(), t = (/* @__PURE__ */ new Date()).toLocaleString("default", { month: "short" }).replace(".", "");
+    return d`
+    <div
+      class="calendar-card ${n} ${o} ${i}"
+      role="${this.cardHref ? "link" : "group"}"
+      aria-label="${this.header || "Kalenderkort"}"
+      tabindex="${this.cardHref ? "0" : "-1"}"
+      @click="${this.cardHref ? () => window.open(this.cardHref, "_self") : null}"
+      @keydown="${this.cardHref ? this._onKeyDown : null}"
+      style="cursor: ${this.cardHref ? "pointer" : "default"};"
+    >
+      ${this.cardHref ? d`<md-ripple></md-ripple>` : ""}
+      ${this.showMedia ? d`
+        <div class="media" aria-label="Datum: ${r} ${t}">
+          <div class="day">${r}</div>
+          <div class="month">${t}</div>
+        </div>` : ""}
+      <div class="container">
+        <div class="header-container">
+          <div class="header">${this.header}</div>
+          ${this.cardHref ? d`<md-icon>arrow_forward</md-icon>` : ""}
+        </div>
+        ${this.subtitle ? d`<div class="subtitle">${this.subtitle}</div>` : ""}
+        ${this.supportingText ? d`<div class="supporting-text">${this.supportingText}</div>` : ""}
+      </div>
+    </div>
+  `;
+  }
+  _onKeyDown(i) {
+    (i.key === "Enter" || i.key === " ") && this.cardHref && (window.open(this.cardHref, "_self"), i.preventDefault());
+  }
+};
+e.__iconLoaded = !1;
+e.__rippleLoaded = !1;
+e.styles = c`
+  /* Grundläggande stilar för kortet */
+    :host {     
+        .calendar-card {
+            position: relative;
+            display: flex;
+            color: var(--md-sys-color-on-surface, #0F0865);
+            font-family: var(--brand, Inter);
+            font-style: normal;
+            flex-direction: column;
+            align-items: flex-start;
+            gap: var(--spacing-spacing-3, 8px);
+            align-self: stretch;
+            cursor: pointer;
+
+            &.vertical {
+                max-width: 360px;
+            }
+
+            &.horizontal {
+                flex-direction: row;
+                max-width: 576px;
+                gap: var(--spacing-spacing-6, 20px);
+            }
+
+            &.outlined {
+                border-radius: var(--radius-large, 16px);
+                border: 1px solid var(--md-sys-color-outline-variant, #CCC);
+                background: var(--md-sys-color-surface, #FFF);
+                padding: var(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
+            }
+
+            &.filled {
+                border-radius: var(--radius-large, 16px);
+                background: var(--md-sys-color-surface-dim, #F9F8EF);
+                padding: var(--spacing-spacing-7, 24px) var(--spacing-spacing-6, 20px);
+                .media {
+                    background: var(--md-sys-color-surface, #FFF);
+                }
+            }           
+        }
+    }
+
+    /* Media-del */
+    .media {
+        display: flex;
+        width: var(--spacing-spacing-11, 64px);
+        min-width: var(--spacing-spacing-11, 64px);
+        max-width: var(--spacing-spacing-11, 64px);
+        height: var(--spacing-spacing-11, 64px);
+        padding: var(--spacing-spacing-0, 0) 0;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        gap: var(--spacing-spacing-2, 4px);
+        border-radius: var(--radius-small, 8px);
+        background: var(--md-sys-color-surface-dim, #F9F8EF);
+
+        .day {
+            font-size: var(--scale-07, 28px);
+            font-weight: var(--weight-bold, 700);
+            line-height: 100%;
+            letter-spacing: -0.6px;
+        }
+
+        .month {
+            font-size: var(--scale-02, 14px);
+            font-weight: var(--weight-regular, 400);
+            line-height: 100%; 
+        }
+    }
+
+     md-ripple {
+        border-radius: var(--radius-l, 16px);
+    }
+
+    /* Textstilar */
+    .header-container {
+        width: 100%;
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        gap: 10px;
+        padding-top: var(--spacing-pacing-1, 2px);
+        color:inherit;
+        text-decoration: none;
+    }
+
+    .header {
+        font-size: var(--md-sys-typescale-headline-small-size, 24px);
+        font-weight: var(--weight-bold, 700);
+        line-height: var(--md-sys-typescale-headline-small-line-height2, 30px);
+        letter-spacing: var(--md-sys-typescale-headline-small-tracking, -0.6px);
+        flex: 1 1 0;
+        min-width: 0;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .subtitle {
+        font-size: var(--md-sys-typescale-title-medium-size, 18px);
+        font-weight: var(--weight-semibold, 600);
+        line-height: var(--md-sys-typescale-title-medium-line-height, 26px); 
+        letter-spacing: var(--md-sys-typescale-title-medium-tracking, -0.3px);
+    }
+    
+    .supporting-text {
+        font-size: var(--md-sys-typescale-body-large-size, 18px);
+        font-weight: var(--weight-regular, 400);
+        line-height: var(--md-sys-typescale-body-large-line-height, 26px); 
+        letter-spacing: var(--md-sys-typescale-body-large-tracking, -0.3px);
+    }
+  `;
+a([
+  s({ type: String, reflect: !0 })
+], e.prototype, "variant", 2);
+a([
+  s({ type: String, reflect: !0 })
+], e.prototype, "direction", 2);
+a([
+  s({ type: String })
+], e.prototype, "header", 2);
+a([
+  s({ type: String })
+], e.prototype, "subtitle", 2);
+a([
+  s({ type: String, attribute: "supporting-text" })
+], e.prototype, "supportingText", 2);
+a([
+  s({ type: String, attribute: "card-href" })
+], e.prototype, "cardHref", 2);
+a([
+  s({ type: Boolean, reflect: !0, attribute: "show-media" })
+], e.prototype, "showMedia", 2);
+e = a([
+  g("scb-calendar-card")
+], e);
+export {
+  e as ScbCalendarCard
+};

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+
+/**
+ * Enkel kort-komponent för SCB-designsystemet
+ */
+export declare class ScbCard extends LitElement {
+    type: string;
+    variant: string;
+    direction: string;
+    mediaType: string;
+    mediaHref: string;
+    cardHref: string;
+    label: string;
+    subLabel: string;
+    supportingText: string;
+    date: Date;
+    commentsText: string;
+    comments: number;
+    likesText: string;
+    likes: number;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+    firstUpdated(): void;
+}

package/scb-card/scb-card.js

@@ -0,0 +1,345 @@
+import { css as p, LitElement as h, html as t } from "lit";
+import { property as e, customElement as v } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+import "../scb-list/scb-list.js";
+import "../scb-button/scb-button.js";
+var m = Object.defineProperty, b = Object.getOwnPropertyDescriptor, s = (a, r, l, d) => {
+  for (var c = d > 1 ? void 0 : d ? b(r, l) : r, n = a.length - 1, o; n >= 0; n--)
+    (o = a[n]) && (c = (d ? o(r, l, c) : o(c)) || c);
+  return d && c && m(r, l, c), c;
+};
+let i = class extends h {
+  constructor() {
+    super(...arguments), this.type = "", this.variant = "", this.direction = "", this.mediaType = "", this.mediaHref = "", this.cardHref = "", this.label = "", this.subLabel = "", this.supportingText = "", this.date = /* @__PURE__ */ new Date(), this.commentsText = "", this.comments = 0, this.likesText = "", this.likes = 0;
+  }
+  render() {
+    const a = this.variant ? `${this.variant.toLowerCase()}` : "", r = this.direction ? `${this.direction.toLowerCase()}` : "", l = this.cardHref ? "clickable" : "", d = this.mediaType ? `${this.mediaType.toLowerCase()}` : "";
+    switch (this.type) {
+      case "standard":
+        return t`
+                <div class="scb-card ${a} ${r} ${l}">
+                    ${this.cardHref ? t`<md-ripple></md-ripple>` : ""}
+                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />` : ""}
+                    <div class="full-content">
+                        <div class="top-content">
+                           ${this.label ? t`
+                            <div class="header">
+                                ${this.cardHref ? t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>` : this.label}
+                            </div>` : ""}
+                            ${this.subLabel ? t`<div class="sub-label">${this.subLabel}</div>` : ""}
+                            ${this.supportingText ? t`<div class="supporting-text">${this.supportingText}</div>` : ""}
+                            ${this.date ? t`<div class="date">${this.date}</div>` : ""}
+                        </div>
+                    </div>
+                </div>
+            `;
+      case "list":
+        return t`
+                <div class="scb-card ${a} vertical ${l}">
+                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />` : ""}
+                    <div class="full-content">
+                        <div class="top-content">
+                           ${this.label ? t`                            
+                            <div class="header">
+                                ${this.label}
+                            </div>` : ""}
+                            ${this.subLabel ? t`<div class="sub-label">${this.subLabel}</div>` : ""}
+                            ${this.supportingText ? t`<div class="supporting-text">${this.supportingText}</div>` : ""}
+                            ${this.date ? t`<div class="date">${this.date}</div>` : ""}
+                        </div>
+                        <div class="content list">
+                            <slot></slot>
+                        </div>
+                    </div>
+                </div>
+        `;
+      case "social":
+        return t`
+                <div class="scb-card ${a} ${r} ${l}">
+                    ${this.cardHref ? t`<md-ripple></md-ripple>` : ""}
+                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />` : ""}
+                    <div class="full-content">
+                        <div class="top-content">
+                           ${this.label ? t`
+                            <div class="header">
+                                ${this.cardHref ? t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>` : this.label}
+                            </div>` : ""}
+                            ${this.subLabel ? t`<div class="sub-label">${this.subLabel}</div>` : ""}
+                            ${this.supportingText ? t`<div class="supporting-text">${this.supportingText}</div>` : ""}
+                            ${this.date ? t`<div class="date">${this.date}</div>` : ""}
+                        </div>
+                        <div class="content">
+                            <div class="social-metrics">
+                                <span class="comments"><md-icon>mode_comment</md-icon> <span>${this.commentsText}: ${this.comments}</span></span>
+                                <span class="likes"><md-icon>thumb_up</md-icon> <span>${this.likesText}: ${this.likes}</span></span>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+        `;
+      case "link":
+        return t`
+                <div class="scb-card ${a} ${r} ${l}">
+                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />` : ""}
+                    <div class="full-content">
+                        <div class="top-content">
+                            ${this.label ? t`
+                            <div class="header">
+                                ${this.label}
+                            </div>` : ""}
+                            ${this.subLabel ? t`<div class="sub-label">${this.subLabel}</div>` : ""}
+                            ${this.supportingText ? t`<div class="supporting-text">${this.supportingText}</div>` : ""}
+                            ${this.date ? t`<div class="date">${this.date}</div>` : ""}
+                        </div>
+                        <div class="content links">
+                            <slot></slot>
+                        </div>
+                    </div>
+                </div>
+        `;
+      case "action":
+        return t`
+                <div class="scb-card ${a} ${r} ${l}">
+                    ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />` : ""}
+                    <div class="full-content">
+                        <div class="top-content">
+                            ${this.label ? t`
+                            <div class="header">
+                                ${this.label}
+                            </div>` : ""}
+                            ${this.subLabel ? t`
+                            <div class="sub-label">${this.subLabel}</div>` : ""}
+                            ${this.supportingText ? t`
+                            <div class="supporting-text">${this.supportingText}</div>` : ""}
+                            ${this.date ? t`
+                            <div class="date">${this.date}</div>` : ""}
+                        </div>
+                        <div class="content actions">
+                            <slot></slot>
+                        </div>
+                    </div>
+                </div>
+        `;
+      default:
+        return t`
+            <div class="scb-card ${a} ${r} ${l}">
+                ${this.cardHref ? t`<md-ripple></md-ripple>` : ""}
+                ${this.mediaHref ? t`<img src="${this.mediaHref}" class="${d}" alt="" ?hidden=${!this.mediaHref} />` : ""}
+                <div class="full-content">
+                    <div class="top-content">
+                        ${this.label ? t`
+                        <div class="header">
+                            ${this.cardHref ? t`<a href="${this.cardHref}" tabindex="0">${this.label}</a><md-icon>arrow_forward</md-icon>` : this.label}
+                        </div>` : ""}
+                        ${this.subLabel ? t`<div class="sub-label">${this.subLabel}</div>` : ""}
+                        ${this.supportingText ? t`<div class="supporting-text">${this.supportingText}</div>` : ""}
+                        ${this.date ? t`<div class="date">${this.date}</div>` : ""}
+                    </div>
+                </div>
+            </div>
+        `;
+    }
+  }
+  firstUpdated() {
+    if (this.cardHref) {
+      const a = this.renderRoot.querySelector(".scb-card");
+      a && a.addEventListener("click", (r) => {
+        r.target.closest("a") || (window.location.href = this.cardHref);
+      });
+    }
+  }
+};
+i.styles = p`
+    /* Min-bredder per variant (override-ningsbara via CSS custom props) */
+    :host{ --scb-card-min-w:  360px; }
+
+    :host {
+        max-width: var(--scb-card-min-w);
+        width: 100%;
+        display: block;
+    }
+    /* Grundläggande stilar för kortet */
+    .scb-card { 
+        color: var(--md-sys-color-on-surface);
+        display: flex;
+        max-width: var(--scb-card-min-w);
+        position: relative;
+        background: transparent;
+        border-radius: var(--md-sys-shape-corner-large);
+        background: var(--md-sys-color-surface);
+    }
+        .social-metrics md-icon {
+            width: var(--scale-05);
+            height: var(--scale-05);
+            font-size: var(--md-sys-typescale-title-large-size);
+            vertical-align: middle;
+        }
+        .social-metrics {
+            display: flex;
+            margin-top: var(--spacing-4);
+            gap: var(--spacing-5);
+            flex-wrap: wrap;
+        }
+        .comments, .likes {
+            display: flex;
+            align-items: center;
+            gap: var(--spacing-2);
+        }
+    .scb-card.outlined {
+        border: 1px solid var(--md-sys-color-outline-variant);
+    }
+    .scb-card.filled {
+      background: var(--md-sys-color-surface-dim);
+    }
+    .scb-card.vertical {
+        flex-direction: column;
+    }
+    .scb-card.clickable {
+        cursor: pointer;
+    }
+
+    /* Textstilar */
+    .header {
+        font-size: var(--md-sys-typescale-headline-small-size);
+        font-weight: var(--weight-bold);
+        line-height: var(--md-sys-typescale-headline-small-line-height);
+        letter-spacing: var(--md-sys-typescale-headline-small-Tracking);
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    .header a {
+        color: inherit;
+        text-decoration: none;
+    }
+    .sub-label {
+        font-size: var(--md-sys-typescale-title-medium-size);
+        font-weight: var(--weight-semibold);
+        line-height: var(--md-sys-typescale-title-medium-line-height);
+        letter-spacing: var(--md-sys-typescale-title-medium-tracking);
+    }
+    .supporting-text {
+        font-size: var(--md-sys-typescale-body-large-size);
+        line-height: var(--md-sys-typescale-body-large-line-height);
+        letter-spacing: var(--md-sys-typescale-body-large-tracking);
+    }
+    .date {
+        font-size: var(--md-sys-typescale-body-medium-size);
+        line-height: var(--md-sys-typescale-body-medium-line-height);
+        letter-spacing: var(--md-sys-typescale-body-medium-Tracking);
+    }
+    .full-content {
+        padding: var(--spacing-7) var(--spacing-6);
+    }
+    md-ripple {
+        border-radius: var(--md-sys-shape-corner-large);
+    }
+    .top-content {
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3);
+  
+    }
+    .scb-card img {
+        border-radius: var(--md-sys-shape-corner-large);
+        width: 100%;
+        object-fit: contain;
+    }
+    .scb-card img.avatar{
+        border-radius: var(--md-sys-shape-corner-full);
+        width: var(--icon-size-large);
+        height: var(--icon-size-large);
+        margin: var(--spacing-7) 0 0 var(--spacing-6);
+    }
+    .scb-card img.avatar + .full-content {
+        padding: var(--spacing-5) var(--spacing-6) var(--spacing-7) var(--spacing-6);
+    }
+
+    /* Horisontella kortspecifika stilar */
+    .scb-card.horizontal {
+        flex-direction: row;
+        width: 100%;
+        max-width: 576px;
+    }
+    .scb-card.horizontal .full-content {
+        padding: var(--spacing-6) var(--spacing-6) var(--spacing-6) 0;
+        width: 100%;
+    }
+    .scb-card.horizontal img{
+        width: auto;
+        height: 133px;
+        margin: var(--spacing-6);
+    }
+    .scb-card.horizontal img.avatar {
+        border-radius: var(--md-sys-shape-corner-full);
+        width: var(--icon-size-large);
+        height: var(--icon-size-large);
+        margin: var(--spacing-6) 0 var(--spacing-6) var(--spacing-6);
+    }
+
+    .scb-card .content.list{
+        margin-top: var(--spacing-7);
+    }
+    .scb-card .content.actions ::slotted(*) {
+        margin-top: var(--spacing-7);
+        display: flex;
+        flex-wrap: wrap;
+        gap: var(--spacing-3);
+    }
+    .scb-card .content.links ::slotted(*) {
+        margin-top: var(--spacing-3);
+        display: flex;
+        flex-direction: column;
+        gap: var(--spacing-3);
+    }
+
+  `;
+s([
+  e({ type: String })
+], i.prototype, "type", 2);
+s([
+  e({ type: String })
+], i.prototype, "variant", 2);
+s([
+  e({ type: String })
+], i.prototype, "direction", 2);
+s([
+  e({ type: String, attribute: "media-type" })
+], i.prototype, "mediaType", 2);
+s([
+  e({ type: String, attribute: "media-href" })
+], i.prototype, "mediaHref", 2);
+s([
+  e({ type: String, attribute: "card-href" })
+], i.prototype, "cardHref", 2);
+s([
+  e({ type: String })
+], i.prototype, "label", 2);
+s([
+  e({ type: String, attribute: "sub-label" })
+], i.prototype, "subLabel", 2);
+s([
+  e({ type: String, attribute: "supporting-text" })
+], i.prototype, "supportingText", 2);
+s([
+  e({ type: Date })
+], i.prototype, "date", 2);
+s([
+  e({ type: String, attribute: "social-comments-text" })
+], i.prototype, "commentsText", 2);
+s([
+  e({ type: Number, attribute: "social-comments", reflect: !0 })
+], i.prototype, "comments", 2);
+s([
+  e({ type: String, attribute: "social-likes-text" })
+], i.prototype, "likesText", 2);
+s([
+  e({ type: Number, attribute: "social-likes", reflect: !0 })
+], i.prototype, "likes", 2);
+i = s([
+  v("scb-card")
+], i);
+export {
+  i as ScbCard
+};

package/scb-checkbox/scb-checkbox-group.d.ts

@@ -0,0 +1,17 @@
+import { LitElement } from 'lit';
+
+export declare class ScbCheckboxGroup extends LitElement {
+    #private;
+    orientation: 'vertical' | 'horizontal';
+    disabled: boolean;
+    spacing: 'item' | 'group';
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+    firstUpdated(): void;
+    updated(changed: Map<string, unknown>): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-checkbox-group': ScbCheckboxGroup;
+    }
+}

package/scb-checkbox/scb-checkbox-group.js

@@ -0,0 +1,80 @@
+import { css as d, LitElement as b, html as u } from "lit";
+import { property as h, customElement as f } from "lit/decorators.js";
+var v = Object.defineProperty, x = Object.getOwnPropertyDescriptor, g = (e) => {
+  throw TypeError(e);
+}, n = (e, t, r, s) => {
+  for (var o = s > 1 ? void 0 : s ? x(t, r) : t, c = e.length - 1, l; c >= 0; c--)
+    (l = e[c]) && (o = (s ? l(t, r, o) : l(o)) || o);
+  return s && o && v(t, r, o), o;
+}, y = (e, t, r) => t.has(e) || g("Cannot " + r), p = (e, t, r) => (y(e, t, "read from private field"), r ? r.call(e) : t.get(e)), m = (e, t, r) => t.has(e) ? g("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, r), i;
+let a = class extends b {
+  constructor() {
+    super(...arguments), this.orientation = "vertical", this.disabled = !1, this.spacing = "group", m(this, i, () => {
+      var r;
+      const e = (r = this.shadowRoot) == null ? void 0 : r.querySelector("slot");
+      if (!e) return;
+      const t = e.assignedElements({ flatten: !0 }).filter((s) => s.tagName.toLowerCase() === "scb-checkbox");
+      for (const s of t)
+        this.disabled ? s.setAttribute("disabled", "") : s.removeAttribute("disabled"), this.orientation === "horizontal" ? s.setAttribute("orientation", "horizontal") : s.removeAttribute("orientation"), this.spacing === "group" ? s.style.setProperty("--scb-checkbox-gap", "0") : s.style.removeProperty("--scb-checkbox-gap");
+    });
+  }
+  render() {
+    const e = this.orientation === "horizontal" ? "row" : "column";
+    return u`
+      <div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${e}`}>
+        <slot @slotchange=${p(this, i)}></slot>
+      </div>
+    `;
+  }
+  firstUpdated() {
+    p(this, i).call(this);
+  }
+  updated(e) {
+    (e.has("disabled") || e.has("orientation") || e.has("spacing")) && p(this, i).call(this);
+  }
+};
+i = /* @__PURE__ */ new WeakMap();
+a.styles = d`
+    /* Standardgap när group äger spacing. Kan överskridas via --scb-checkbox-gap. */
+    :host {
+      display: block;
+      --scb-checkbox-gap: 12px;
+    }
+
+    .g {
+      display: flex;
+      flex-direction: var(--_dir, column);
+      align-items: flex-start;
+      gap: 0; /* om spacing="item" */
+    }
+
+    /* spacing="group" → använder gap-variabeln */
+    :host([spacing="group"]) .g {
+      gap: var(--scb-checkbox-gap);
+    }
+
+  /* Öka gap när gruppen är horisontell */
+  :host([orientation="horizontal"]) {
+    --scb-checkbox-gap: 32px; 
+  }
+
+    /* När gruppen äger spacing: nolla barnens egen högermarginal (horisontellt läge). */
+    :host([spacing="group"]) ::slotted(scb-checkbox) {
+      --scb-checkbox-gap: 0;
+    }
+  `;
+n([
+  h({ type: String, reflect: !0 })
+], a.prototype, "orientation", 2);
+n([
+  h({ type: Boolean, reflect: !0 })
+], a.prototype, "disabled", 2);
+n([
+  h({ type: String, reflect: !0 })
+], a.prototype, "spacing", 2);
+a = n([
+  f("scb-checkbox-group")
+], a);
+export {
+  a as ScbCheckboxGroup
+};

package/scb-checkbox/scb-checkbox.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, TemplateResult, PropertyValues } from 'lit';
+
+export declare class ScbCheckbox extends LitElement {
+    disabled: boolean;
+    indeterminate: boolean;
+    checked: boolean;
+    label: string;
+    supportingText: string;
+    private _checkboxId;
+    connectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: PropertyValues): void;
+    static styles: import('lit').CSSResult;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-checkbox': ScbCheckbox;
+    }
+}