scb-wc-test 0.1.106 → 0.1.108

package/scb-datepicker/scb-datepicker.js

@@ -0,0 +1,404 @@
+import { css as g, LitElement as m, html as n } from "lit";
+import { state as h, property as p, customElement as w } from "lit/decorators.js";
+import "../scb-icon-button/scb-icon-button.js";
+import "../scb-button/scb-button.js";
+import "@material/web/icon/icon.js";
+import "@material/web/ripple/ripple.js";
+import "@material/web/focus/md-focus-ring.js";
+import "../scb-divider/scb-divider.js";
+var v = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, d = (e, t, c, l) => {
+  for (var i = l > 1 ? void 0 : l ? _(t, c) : t, o = e.length - 1, s; o >= 0; o--)
+    (s = e[o]) && (i = (l ? s(t, c, i) : s(i)) || i);
+  return l && i && v(t, c, i), i;
+};
+let a = class extends m {
+  constructor() {
+    super(...arguments), this._currentDate = /* @__PURE__ */ new Date(), this._selectedDate = null, this._showMonthDropdown = !1, this._showYearDropdown = !1, this.variant = "static", this.lang = "sv", this.selectedValue = "", this.open = !0, this._monthNames = [
+      this.lang == "sv" ? "Januari" : "January",
+      this.lang == "sv" ? "Februari" : "February",
+      this.lang == "sv" ? "Mars" : "March",
+      (this.lang == "sv", "April"),
+      this.lang == "sv" ? "Maj" : "May",
+      this.lang == "sv" ? "Juni" : "June",
+      this.lang == "sv" ? "Juli" : "July",
+      this.lang == "sv" ? "Augusti" : "August",
+      (this.lang == "sv", "September"),
+      this.lang == "sv" ? "Oktober" : "October",
+      (this.lang == "sv", "November"),
+      (this.lang == "sv", "December")
+    ], this._prevYear = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      this._currentDate = new Date(e - 1, t, 1);
+    }, this._nextYear = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      this._currentDate = new Date(e + 1, t, 1);
+    }, this._prevMonth = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      this._currentDate = new Date(e, t - 1, 1);
+    }, this._nextMonth = () => {
+      const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth();
+      this._currentDate = new Date(e, t + 1, 1);
+    }, this._close = () => {
+      this.open = !1, this.dispatchEvent(new CustomEvent("datepicker-closed", {
+        bubbles: !0,
+        composed: !0
+      }));
+    };
+  }
+  updated(e) {
+    if (super.updated(e), e.has("selectedValue") && this.selectedValue) {
+      const t = new Date(this.selectedValue);
+      isNaN(t.getTime()) || (this._selectedDate = t, this._currentDate = new Date(t.getFullYear(), t.getMonth(), 1));
+    }
+  }
+  _getMonthDays(e, t) {
+    const c = new Date(e, t, 1), l = new Date(e, t + 1, 0), i = [];
+    let o = [], s = (c.getDay() + 6) % 7;
+    for (let r = 0; r < s; r++) o.push(null);
+    for (let r = 1; r <= l.getDate(); r++) {
+      const u = new Date(e, t, r);
+      o.push(u), o.length === 7 && (i.push(o), o = []);
+    }
+    if (o.length) {
+      for (; o.length < 7; ) o.push(null);
+      i.push(o);
+    }
+    return i;
+  }
+  render() {
+    if (!this.open) return n``;
+    const e = this._currentDate.getFullYear(), t = this._currentDate.getMonth(), c = /* @__PURE__ */ new Date(), l = this._getMonthDays(e, t), i = Array.from({ length: 101 }, (o, s) => c.getFullYear() - 50 + s);
+    return n`
+      <div class="datepicker-popup ${this.variant === "popup" ? "popup" : "static"}">
+        <div class="header">
+            <div class="month-selector ${this._showMonthDropdown ? "open" : ""} ${this._showYearDropdown ? "disable" : ""}">
+                <scb-icon-button icon="chevron_left" @click=${this._prevMonth} aria-label=${this.lang == "sv" ? "Föregående månad" : "Previous month"}></scb-icon-button>
+                <div class="custom-dropdown month-dropdown">
+                    <div 
+                    @keydown=${(o) => {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._toggleMonthDropdown());
+    }}
+                    tabindex="0" class="dropdown-selected" @click=${() => this._toggleMonthDropdown()}>
+                        ${this._monthNames[t].slice(0, 3)}
+                        <md-icon>arrow_drop_down</md-icon>
+                        <md-focus-ring></md-focus-ring>
+                        <md-ripple></md-ripple>
+                    </div>
+                </div>
+                <scb-icon-button icon="chevron_right" @click=${this._nextMonth} aria-label=${this.lang == "sv" ? "Nästa månad" : "Next month"}></scb-icon-button>
+            </div>
+            <div class="year-selector ${this._showMonthDropdown ? "disable" : ""} ${this._showYearDropdown ? "open" : ""}">
+                <scb-icon-button icon="chevron_left" @click=${this._prevYear} aria-label=${this.lang == "sv" ? "Föregående år" : "Previous year"}></scb-icon-button>
+                    <div class="custom-dropdown year-dropdown">
+                        <div 
+                        @keydown=${(o) => {
+      (o.key === "Enter" || o.key === " ") && (o.preventDefault(), this._toggleYearDropdown());
+    }}
+                        tabindex="0" class="dropdown-selected" @click=${() => this._toggleYearDropdown()}>
+                            ${e}
+                            <md-icon>arrow_drop_down</md-icon>
+                            <md-focus-ring></md-focus-ring>
+                            <md-ripple></md-ripple>
+                        </div>
+                    </div>
+                <scb-icon-button icon="chevron_right" @click=${this._nextYear} aria-label=${this.lang == "sv" ? "Nästa år" : "Next year"}></scb-icon-button>
+            </div>
+        </div>
+                ${this._showMonthDropdown || this._showYearDropdown ? n`<scb-divider></scb-divider>` : ""}
+        <div class="datepicker-content" style="position:relative;">
+          ${this._showMonthDropdown ? n`
+            <div class="dropdown-list">
+              ${this._monthNames.map((o, s) => n`
+                <div
+                    @keydown=${(r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._onMonthChangeCustom(s));
+    }}
+                  tabindex="0"
+                  class="dropdown-item${s === t ? " selected" : ""}"
+                  @click=${() => this._onMonthChangeCustom(s)}
+                  id=${s === t ? "selected-month" : ""}
+                >
+                ${s === t ? n`<md-icon>check</md-icon>` : ""}
+                  ${o}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          ` : ""}
+          ${this._showYearDropdown ? n`
+            <div class="dropdown-list">
+              ${i.map((o) => n`
+                <div
+                @keydown=${(s) => {
+      (s.key === "Enter" || s.key === " ") && (s.preventDefault(), this._onYearChangeCustom(o));
+    }}
+                  tabindex="0"
+                  class="dropdown-item${o === e ? " selected" : ""}"
+                  @click=${() => this._onYearChangeCustom(o)}
+                  id=${o === e ? "selected-year" : ""}
+                >
+                ${o === e ? n`<md-icon>check</md-icon>` : ""}
+                  ${o}
+                  <md-ripple></md-ripple><md-focus-ring inward></md-focus-ring>
+                </div>
+              `)}
+            </div>
+          ` : ""}
+          ${!this._showMonthDropdown && !this._showYearDropdown ? n`
+            <div class="datepicker-calendar">
+            <table>
+              <thead>
+                <tr>
+                  <th>${this.lang == "sv" ? "Må" : "Mo"}</th><th>${this.lang == "sv" ? "Ti" : "Tu"}</th><th>${this.lang == "sv" ? "On" : "We"}</th><th>${this.lang == "sv" ? "To" : "Th"}</th><th>${this.lang == "sv", "Fr"}</th><th>${this.lang == "sv" ? "Lö" : "Sa"}</th><th>${this.lang == "sv" ? "Sö" : "Su"}</th>
+                </tr>
+              </thead>
+              <tbody>
+                ${l.map((o) => n`
+                  <tr>
+                    ${o.map((s) => s ? n`
+                      <td>
+                        <div
+                        @keydown=${(r) => {
+      (r.key === "Enter" || r.key === " ") && (r.preventDefault(), this._selectDate(s));
+    }}
+                            role="button"
+                            tabindex="0"
+                          class="day${this._isToday(s, c) ? " today" : ""}${this._isSelected(s) ? " selected" : ""}"
+                          @click=${() => this._selectDate(s)}
+                        >${s.getDate()}<md-ripple></md-ripple><md-focus-ring></md-focus-ring></div>
+                      </td>
+                    ` : n`<td></td>`)}
+                  </tr>
+                `)}
+              </tbody>
+            </table>
+            </div>
+          ` : ""}
+        </div>
+        <div class="datepicker-footer">
+        ${!this._showMonthDropdown && !this._showYearDropdown ? n`
+            <scb-button variant="text" label=${this.lang == "sv" ? "Stäng" : "Close"} @click=${this._close}></scb-button>
+        ` : ""}
+        </div>
+         </div>
+    `;
+  }
+  _toggleMonthDropdown() {
+    this._showMonthDropdown = !this._showMonthDropdown, this._showMonthDropdown && (this._showYearDropdown = !1, setTimeout(() => {
+      const e = this.renderRoot.querySelector("#selected-month");
+      e && e.scrollIntoView({ block: "center" });
+    }, 0));
+  }
+  _toggleYearDropdown() {
+    this._showYearDropdown = !this._showYearDropdown, this._showYearDropdown && (this._showMonthDropdown = !1, setTimeout(() => {
+      const e = this.renderRoot.querySelector("#selected-year");
+      e && e.scrollIntoView({ block: "center" });
+    }, 0));
+  }
+  _onMonthChangeCustom(e) {
+    const t = this._currentDate.getFullYear();
+    this._currentDate = new Date(t, e, 1), this._showMonthDropdown = !1;
+  }
+  _onYearChangeCustom(e) {
+    const t = this._currentDate.getMonth();
+    this._currentDate = new Date(e, t, 1), this._showYearDropdown = !1;
+  }
+  _isToday(e, t) {
+    return e.getDate() === t.getDate() && e.getMonth() === t.getMonth() && e.getFullYear() === t.getFullYear();
+  }
+  _isSelected(e) {
+    return this._selectedDate && e.getDate() === this._selectedDate.getDate() && e.getMonth() === this._selectedDate.getMonth() && e.getFullYear() === this._selectedDate.getFullYear();
+  }
+  _selectDate(e) {
+    this._selectedDate = e;
+    const t = e.toISOString().slice(0, 10);
+    this.dispatchEvent(new CustomEvent("date-selected", {
+      detail: { value: t },
+      bubbles: !0,
+      composed: !0
+    }));
+  }
+};
+a.styles = [
+  g`
+    :host {
+        --scb-datepicker-width: 380px;
+        width: var(--scb-datepicker-width);
+        font-family: var(--brand-font);
+        color: var(--md-sys-color-on-surface);
+    }
+    .month-selector, .year-selector {
+      display: flex;
+      align-items: center;
+      &.disable{
+        pointer-events: none;
+        opacity: 0.3;
+        scb-icon-button{
+            visibility: hidden;
+        }
+      }
+        &.open{
+            scb-icon-button{
+                visibility: hidden;
+            }
+            .dropdown-selected{
+                background: var(--md-sys-color-secondary-container);
+            }
+        }
+    }
+    .dropdown-selected {
+        position: relative;
+        border-radius: 8px;
+        font-size: 16px;
+        cursor: pointer;
+        text-align: left;
+        display: flex;
+        gap: 8px;
+        align-items: center;
+        padding: 4px 8px;
+    }
+    .dropdown-selected:focus {
+      outline: none;
+    }
+    .dropdown-selected md-focus-ring {
+        border-radius: 8px;
+    }
+    .dropdown-list {
+      position: relative;
+      background: var(--md-sys-color-surface);
+      padding: 4px 0;
+    }
+    .dropdown-item {
+        display: flex;
+        position: relative;
+        cursor: pointer;
+        padding: var(--spacing-3) 56px;
+        min-height: 40px;
+        align-items: center;
+    }
+    .dropdown-item:focus-within {
+      outline: none;
+    }
+    .dropdown-item md-focus-ring {
+        border-radius: var(--md-sys-shape-corner-small);
+    }
+    .dropdown-item.selected {
+      background: var(--md-sys-color-secondary-container, #e3f2fd);
+      font-weight: 500;
+      padding-left: 16px;
+        gap: 16px;
+    }
+      .datepicker-popup {
+        background: var(--md-sys-color-surface);
+        border-radius: var(--md-sys-shape-corner-small);
+        box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.30), 0 2px 6px 2px rgba(0, 0, 0, 0.15);
+        max-width: var(--scb-datepicker-width);
+        width: 100%;
+        font-family: var(--brand-font);
+      }
+      .datepicker-content{
+         overflow-y: auto;
+         max-height: 260px;
+      }
+      .popup {
+        position:absolute;
+        top:110%;
+        left:0;
+        z-index:10;
+      }
+      .header {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 12px;
+        padding: 16px 24px 0 16px;
+        flex-wrap: wrap;
+      }
+      .datepicker-footer{
+        padding: 8px 16px 24px 16px;
+      }
+      .month-label {
+        font-size: 18px;
+        font-weight: 500;
+      }
+      .datepicker-calendar{
+        padding: 0 16px;
+      }
+      table {
+        width: 100%;
+        border-collapse: collapse;
+        margin-bottom: 8px;
+      }
+      th {
+        color: var(--md-sys-color-on-surface-variant, #757575);
+        font-size: 16px;
+        font-weight: 600;
+        padding: 4px;
+      }
+      td {
+        text-align: center;
+      }
+
+      .day:focus-within{
+        outline: none;
+      }
+      .day {
+        position: relative;
+        width: 40px;
+        height: 40px;
+        border-radius: 50%;
+        border: none;
+        background: none;
+        font-size: 16px;
+        cursor: pointer;
+        font-family: 'Inter';
+        align-content: center;
+      }
+      .day.selected {
+        background: var(--md-sys-color-secondary-container);
+      }
+      .close-datepicker {
+        margin-top: 8px;
+        background: none;
+        border-color: none;
+        color: var(--md-sys-color-primary, #0057b8);
+        font-size: 16px;
+        cursor: pointer;
+        padding: 4px 12px;
+        border-radius: 8px;
+      }
+      .close-datepicker:hover {
+        background: var(--md-sys-color-primary-container, #e3f2fd);
+      }
+    `
+];
+d([
+  h()
+], a.prototype, "_currentDate", 2);
+d([
+  h()
+], a.prototype, "_selectedDate", 2);
+d([
+  h()
+], a.prototype, "_showMonthDropdown", 2);
+d([
+  h()
+], a.prototype, "_showYearDropdown", 2);
+d([
+  p({ type: String })
+], a.prototype, "variant", 2);
+d([
+  p({ type: String })
+], a.prototype, "lang", 2);
+d([
+  p({ type: String })
+], a.prototype, "selectedValue", 2);
+d([
+  p({ type: Boolean })
+], a.prototype, "open", 2);
+a = d([
+  w("scb-datepicker")
+], a);
+export {
+  a as ScbDatepicker
+};

package/scb-icon-button/scb-icon-button.d.ts

@@ -22,6 +22,10 @@ export declare class ScbIconButton extends LitElement {
     disabled: boolean;
     /** Vertikalt avstånd till omgivande innehåll. "N" mappar till var(--spacing-N). */
     spacing: string;
+    /** Överkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars CSS-värde. */
+    spacingTop: string;
+    /** Nederkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars CSS-värde. */
+    spacingBottom: string;
     private __loadedVariants;
     private __iconLoaded;
     private __lastMdHost;

package/scb-icon-button/scb-icon-button.js

@@ -1,16 +1,16 @@
-import { css as b, LitElement as g, html as a } from "lit";
-import { property as r, customElement as f } from "lit/decorators.js";
+import { css as g, LitElement as _, html as r } from "lit";
+import { property as n, customElement as m } from "lit/decorators.js";
 import "@material/web/icon/icon.js";
-var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, _ = (t) => {
+var f = Object.defineProperty, y = Object.getOwnPropertyDescriptor, b = (t) => {
   throw TypeError(t);
 }, o = (t, e, i, l) => {
-  for (var n = l > 1 ? void 0 : l ? v(e, i) : e, d = t.length - 1, h; d >= 0; d--)
-    (h = t[d]) && (n = (l ? h(e, i, n) : h(n)) || n);
-  return l && n && m(e, i, n), n;
-}, y = (t, e, i) => e.has(t) || _("Cannot " + i), $ = (t, e, i) => e.has(t) ? _("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), p = (t, e, i) => (y(t, e, "access private method"), i), c, u;
-let s = class extends g {
+  for (var a = l > 1 ? void 0 : l ? y(e, i) : e, d = t.length - 1, h; d >= 0; d--)
+    (h = t[d]) && (a = (l ? h(e, i, a) : h(a)) || a);
+  return l && a && f(e, i, a), a;
+}, v = (t, e, i) => e.has(t) || b("Cannot " + i), $ = (t, e, i) => e.has(t) ? b("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, i), u = (t, e, i) => (v(t, e, "access private method"), i), c, p;
+let s = class extends _ {
   constructor() {
-    super(...arguments), $(this, c), this.icon = "home", this.tooltip = "", this.ariaLabel = "", this.variant = "standard", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.spacing = "", this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
+    super(...arguments), $(this, c), this.icon = "home", this.tooltip = "", this.ariaLabel = "", this.variant = "standard", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.spacing = "", this.spacingTop = "", this.spacingBottom = "", this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
       const t = this.__getMdHost(), e = !!(t != null && t.selected);
       this.toggle && (this.selected = e), this.dispatchEvent(
         new CustomEvent("change", {
@@ -22,10 +22,10 @@ let s = class extends g {
     };
   }
   async firstUpdated() {
-    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria(), p(this, c, u).call(this);
+    await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria(), u(this, c, p).call(this);
   }
   updated(t) {
-    if (super.updated(t), t.has("spacing") && p(this, c, u).call(this), t.has("variant")) {
+    if (super.updated(t), (t.has("spacing") || t.has("spacingTop") || t.has("spacingBottom")) && u(this, c, p).call(this), t.has("variant")) {
       this.__ensureDepsLoaded().then(() => {
         queueMicrotask(() => {
           this.__attachChangeListener(), this.__syncTitleAndAria();
@@ -79,10 +79,10 @@ let s = class extends g {
   __syncTitleAndAria() {
     const t = this.__getMdHost();
     if (!t) return;
-    const e = (this.tooltip || this.getAttribute("title") || "").trim(), i = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), l = this.getAttribute("aria-controls"), n = this.getAttribute("aria-expanded");
+    const e = (this.tooltip || this.getAttribute("title") || "").trim(), i = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), l = this.getAttribute("aria-controls"), a = this.getAttribute("aria-expanded");
     this.tooltip && this.setAttribute("title", e);
     const d = i || e || this.icon.trim() || void 0;
-    d ? t.setAttribute("aria-label", d) : t.removeAttribute("aria-label"), e ? t.setAttribute("title", e) : t.removeAttribute("title"), l !== null ? t.setAttribute("aria-controls", l) : t.removeAttribute("aria-controls"), n !== null ? t.setAttribute("aria-expanded", n) : t.removeAttribute("aria-expanded");
+    d ? t.setAttribute("aria-label", d) : t.removeAttribute("aria-label"), e ? t.setAttribute("title", e) : t.removeAttribute("title"), l !== null ? t.setAttribute("aria-controls", l) : t.removeAttribute("aria-controls"), a !== null ? t.setAttribute("aria-expanded", a) : t.removeAttribute("aria-expanded");
   }
   mapSpacingToken(t) {
     if (!t) return;
@@ -91,20 +91,20 @@ let s = class extends g {
       return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
   }
   __renderToggleIcons() {
-    return a`
+    return r`
       <md-icon aria-hidden="true">${this.toggleofficon}</md-icon>
       <md-icon slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
     `;
   }
   __renderSingleIcon() {
-    return a`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
+    return r`<md-icon aria-hidden="true">${this.icon}</md-icon>`;
   }
   __renderMd() {
     const t = this.toggle ? this.__renderToggleIcons() : this.__renderSingleIcon();
     if (this.toggle)
       switch (this.variant) {
         case "filled":
-          return a`
+          return r`
             <md-filled-icon-button
               toggle
               ?selected=${this.selected}
@@ -114,7 +114,7 @@ let s = class extends g {
             </md-filled-icon-button>
           `;
         case "outlined":
-          return a`
+          return r`
             <md-outlined-icon-button
               toggle
               ?selected=${this.selected}
@@ -124,7 +124,7 @@ let s = class extends g {
             </md-outlined-icon-button>
           `;
         case "filled-tonal":
-          return a`
+          return r`
             <md-filled-tonal-icon-button
               toggle
               ?selected=${this.selected}
@@ -134,7 +134,7 @@ let s = class extends g {
             </md-filled-tonal-icon-button>
           `;
         default:
-          return a`
+          return r`
             <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled}>
               ${t}
             </md-icon-button>
@@ -142,25 +142,25 @@ let s = class extends g {
       }
     switch (this.variant) {
       case "filled":
-        return a`
+        return r`
           <md-filled-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-filled-icon-button>
         `;
       case "outlined":
-        return a`
+        return r`
           <md-outlined-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-outlined-icon-button>
         `;
       case "filled-tonal":
-        return a`
+        return r`
           <md-filled-tonal-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-filled-tonal-icon-button>
         `;
       default:
-        return a`
+        return r`
           <md-icon-button ?disabled=${this.disabled}>
             ${t}
           </md-icon-button>
@@ -172,48 +172,55 @@ let s = class extends g {
   }
 };
 c = /* @__PURE__ */ new WeakSet();
-u = function() {
-  const t = this.mapSpacingToken(this.spacing);
-  t ? this.style.setProperty("--scb-icon-button-spacing-block", t) : this.style.removeProperty("--scb-icon-button-spacing-block");
+p = function() {
+  const t = this.mapSpacingToken(this.spacing), e = this.mapSpacingToken(this.spacingTop) ?? t, i = this.mapSpacingToken(this.spacingBottom) ?? t;
+  e ? this.style.setProperty("--scb-icon-button-spacing-block-start", e) : this.style.removeProperty("--scb-icon-button-spacing-block-start"), i ? this.style.setProperty("--scb-icon-button-spacing-block-end", i) : this.style.removeProperty("--scb-icon-button-spacing-block-end");
 };
-s.styles = b`
+s.styles = g`
     :host {
       display: inline-flex;
-      margin-block: var(--scb-icon-button-spacing-block, 0);
+      margin-block-start: var(--scb-icon-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-icon-button-spacing-block-end, 0);
     }
   `;
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "icon", 2);
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "tooltip", 2);
 o([
-  r({ type: String, attribute: "aria-label" })
+  n({ type: String, attribute: "aria-label" })
 ], s.prototype, "ariaLabel", 2);
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "variant", 2);
 o([
-  r({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "toggle", 2);
 o([
-  r({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "selected", 2);
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "toggleofficon", 2);
 o([
-  r({ type: String })
+  n({ type: String })
 ], s.prototype, "toggleonicon", 2);
 o([
-  r({ type: Boolean, reflect: !0 })
+  n({ type: Boolean, reflect: !0 })
 ], s.prototype, "disabled", 2);
 o([
-  r({ type: String, reflect: !0 })
+  n({ type: String, reflect: !0 })
 ], s.prototype, "spacing", 2);
+o([
+  n({ type: String, attribute: "spacing-top", reflect: !0 })
+], s.prototype, "spacingTop", 2);
+o([
+  n({ type: String, attribute: "spacing-bottom", reflect: !0 })
+], s.prototype, "spacingBottom", 2);
 s = o([
-  f("scb-icon-button")
+  m("scb-icon-button")
 ], s);
 export {
   s as ScbIconButton

package/scb-segmented-button/scb-segmented-button.d.ts

@@ -30,6 +30,10 @@ export declare class ScbSegmentedButton extends LitElement {
      * "N" (0–14) mappar till var(--spacing-N), annars valfritt CSS-värde.
      */
     spacing: string;
+    /** Överkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars valfritt CSS-värde. */
+    spacingTop: string;
+    /** Nederkantens avstånd. Om satt går före spacing. 0–14 mappar till var(--spacing-N), annars valfritt CSS-värde. */
+    spacingBottom: string;
     private _form;
     private _formResetHandler;
     private _initialValue;