@sbb-esta/lyne-elements 4.1.0 → 4.3.0

package/chip/chip-group/chip-group.component.js

@@ -1,57 +1,64 @@
-var z = (s) => {
-  throw TypeError(s);
+var x = (i) => {
+  throw TypeError(i);
 };
-var I = (s, a, r) => a.has(s) || z("Cannot " + r);
-var b = (s, a, r) => (I(s, a, "read from private field"), r ? r.call(s) : a.get(s)), _ = (s, a, r) => a.has(s) ? z("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, r), d = (s, a, r, h) => (I(s, a, "write to private field"), h ? h.call(s, r) : a.set(s, r), r);
-import { __esDecorate as m, __runInitializers as c } from "tslib";
-import { css as O, LitElement as K, isServer as f, html as F } from "lit";
-import { customElement as W, property as v } from "lit/decorators.js";
+var I = (i, a, r) => a.has(i) || x("Cannot " + r);
+var d = (i, a, r) => (I(i, a, "read from private field"), r ? r.call(i) : a.get(i)), _ = (i, a, r) => a.has(i) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), m = (i, a, r, p) => (I(i, a, "write to private field"), p ? p.call(i, r) : a.set(i, r), r);
+import { __esDecorate as c, __runInitializers as b } from "tslib";
+import { css as K, LitElement as L, isServer as A, html as O } from "lit";
+import { customElement as W, property as g } from "lit/decorators.js";
 import { isArrowKeyPressed as T, getNextElementIndex as q } from "../../core/a11y.js";
-import { SbbLanguageController as L } from "../../core/controllers.js";
-import { isLean as M } from "../../core/dom.js";
-import { i18nSelectionRequired as V, i18nChipGroupInputDescription as R } from "../../core/i18n.js";
-import { SbbRequiredMixin as $, SbbDisabledMixin as B, SbbNegativeMixin as N, SbbFormAssociatedMixin as j, SbbElementInternalsMixin as G } from "../../core/mixins.js";
-import { boxSizingStyles as U } from "../../core/styles.js";
-import { SbbChipElement as J } from "../chip.js";
-const H = O`:host{--sbb-chip-group-input-min-width: 9.375rem;max-width:100%}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width)}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
-let lt = (() => {
-  var p, u, l;
-  let s = [W("sbb-chip-group")], a, r = [], h, y = $(B(N(j(G(K))))), g = [], E, C, S = [], w = [], x, k = [], A = [];
-  return l = class extends y {
+import { SbbLanguageController as F, SbbPropertyWatcherController as M } from "../../core/controllers.js";
+import { isLean as V } from "../../core/dom/lean-context.js";
+import { i18nSelectionRequired as R, i18nChipGroupInputDescription as $ } from "../../core/i18n.js";
+import { SbbRequiredMixin as B, SbbDisabledMixin as N, SbbNegativeMixin as j, SbbFormAssociatedMixin as G, SbbElementInternalsMixin as U } from "../../core/mixins.js";
+import { boxSizingStyles as J } from "../../core/styles.js";
+import { SbbChipElement as P } from "../chip.js";
+const H = K`:host{--sbb-chip-group-input-min-width: 9.375rem;--_sbb-chip-group-margin-block-start-default: .125rem;--_sbb-chip-group-margin-block-start-default-large: .21875rem;max-width:100%}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(0)}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(0)}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
+let ot = (() => {
+  var h, u, n;
+  let i = [W("sbb-chip-group")], a, r = [], p, f = B(N(j(G(U(L))))), y = [], v, w, E = [], z = [], k, C = [], S = [];
+  return n = class extends f {
     constructor() {
       super();
-      _(this, p);
+      _(this, h);
       _(this, u);
-      d(this, p, (c(this, g), c(this, S, null))), d(this, u, (c(this, w), c(this, k, ["Enter"]))), this._inputAttributeObserver = (c(this, A), f ? null : new MutationObserver(() => this._reactToInputChanges())), this._formFieldAttributeObserver = f ? null : new MutationObserver(() => this._inheritSize()), this._language = new L(this), this.addEventListener?.(J.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t));
+      m(this, h, (b(this, y), b(this, E, null))), m(this, u, (b(this, z), b(this, C, ["Enter"]))), this._inputAttributeObserver = (b(this, S), A ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new F(this), this.addEventListener?.(P.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new M(this, () => this.closest("sbb-form-field"), {
+        size: (t) => this._updateSize(t.size),
+        label: (t) => this._updateLabelState(t),
+        hiddenLabel: (t) => this._updateLabelState(t)
+      }));
     }
     /** Value of the form element. */
     set value(t) {
       t = t ?? [];
-      const e = this.value, i = [...e];
-      for (const n of t)
-        i.includes(n) && i.splice(i.indexOf(n), 1);
-      i.forEach((n) => this._chipElements().find((D) => D.value === n)?.remove());
+      const e = this.value, s = [...e];
+      for (const l of t)
+        s.includes(l) && s.splice(s.indexOf(l), 1);
+      s.forEach((l) => this._chipElements().find((D) => D.value === l)?.remove());
       const o = [...t];
-      for (const n of e)
-        o.includes(n) && o.splice(o.indexOf(n), 1);
-      o.forEach((n) => this._createChipElement(n));
+      for (const l of e)
+        o.includes(l) && o.splice(o.indexOf(l), 1);
+      o.forEach((l) => this._createChipElement(l));
     }
     get value() {
       return this._chipElements().map((t) => t.value);
     }
     /** Function that maps a chip's value to its display value. */
     get displayWith() {
-      return b(this, p);
+      return d(this, h);
     }
     set displayWith(t) {
-      d(this, p, t);
+      m(this, h, t);
     }
     /** The array of keys that will trigger a `chipinputtokenend` event. Default `['Enter']` */
     get separatorKeys() {
-      return b(this, u);
+      return d(this, u);
     }
     set separatorKeys(t) {
-      d(this, u, t);
+      m(this, u, t);
+    }
+    _updateLabelState(t) {
+      this.toggleState("without-label", !t.label || t.hiddenLabel);
     }
     connectedCallback() {
       super.connectedCallback(), this._setupComponent();
@@ -69,7 +76,7 @@ let lt = (() => {
         this.value = null;
         return;
       }
-      this._readFormData(t).then((i) => this.value = i);
+      this._readFormData(t).then((s) => this.value = s);
     }
     async _readFormData(t) {
       return Promise.all(t.getAll(this.name).map(async (e) => e instanceof Blob ? JSON.parse(await e.text()) : e));
@@ -78,7 +85,7 @@ let lt = (() => {
       return super.shouldValidate(t) || t === "required" || t === "value";
     }
     validate() {
-      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", V[this._language.current]) : this.removeValidityFlag("valueMissing");
+      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", R[this._language.current]) : this.removeValidityFlag("valueMissing");
     }
     /** Return the list of chip elements **/
     _chipElements() {
@@ -90,21 +97,16 @@ let lt = (() => {
     }
     _setupComponent() {
       const t = this.querySelector("input");
-      t && t !== this._inputElement && (this._inputAbortController?.abort(), this._inputAttributeObserver?.disconnect(), this._inputElement = t, this._inputAbortController = new AbortController(), this._inputElement.addEventListener("keydown", (i) => this._onInputKeyDown(i), {
+      t && t !== this._inputElement && (this._inputAbortController?.abort(), this._inputAttributeObserver?.disconnect(), this._inputElement = t, this._inputAbortController = new AbortController(), this._inputElement.addEventListener("keydown", (e) => this._onInputKeyDown(e), {
         signal: this._inputAbortController.signal
-      }), this._inputElement.addEventListener("inputAutocomplete", (i) => {
-        this._createChipFromInput("autocomplete", i.detail?.option.value);
+      }), this._inputElement.addEventListener("inputAutocomplete", (e) => {
+        this._createChipFromInput("autocomplete", e.detail?.option.value);
       }, {
         signal: this._inputAbortController.signal
       }), this._inputAttributeObserver?.observe(this._inputElement, {
         attributes: !0,
         attributeFilter: ["readonly", "disabled"]
-      })), this._inheritSize(), this._formFieldAttributeObserver?.disconnect();
-      const e = this.closest("sbb-form-field");
-      e && this._formFieldAttributeObserver?.observe(e, {
-        attributes: !0,
-        attributeFilter: ["size"]
-      }), this.toggleState("empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
+      })), (!this._previousSize || !this.closest("sbb-form-field")) && this._updateSize(V() ? "s" : "m"), this.toggleState("empty", this.value.length === 0), this._reactToInputChanges(), this._updateInputDescription(), this.updateFormValue();
     }
     /**
      * Listen for keyboard events on the chip elements
@@ -113,8 +115,8 @@ let lt = (() => {
       const e = t.target;
       if (e.localName === "sbb-chip") {
         if (T(t)) {
-          const i = this._enabledChipElements(), o = q(t, i.indexOf(e), i.length);
-          i[o].focus();
+          const s = this._enabledChipElements(), o = q(t, s.indexOf(e), s.length);
+          s[o].focus();
           return;
         }
         switch (t.key) {
@@ -144,15 +146,15 @@ let lt = (() => {
      * If the input is not empty, create a chip with its value
      */
     _createChipFromInput(t = "input", e) {
-      const i = e ?? this._inputElement.value.trim();
-      if (!i)
+      const s = e ?? this._inputElement.value.trim();
+      if (!s)
         return;
       const o = {
         origin: t,
-        value: i,
+        value: s,
         label: (e ? this.displayWith?.(e) : null) ?? void 0,
-        setValue: (n) => o.value = n,
-        setLabel: (n) => o.label = n
+        setValue: (l) => o.value = l,
+        setLabel: (l) => o.label = l
       };
       this._dispatchChipInputTokenEnd(o) && (this._createChipElement(o.value, o.label), this._inputElement.value = "", this._emitInputEvents());
     }
@@ -188,10 +190,10 @@ let lt = (() => {
       this.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this.dispatchEvent(new Event("change", { bubbles: !0 }));
     }
     _createChipElement(t, e) {
-      if (f)
+      if (A)
         return;
-      const i = document.createElement("sbb-chip");
-      i.value = t, i.innerText = e ?? (t ? this.displayWith?.(t) : null) ?? "", this.insertBefore(i, this._inputElement ?? this.querySelector("input"));
+      const s = document.createElement("sbb-chip");
+      s.value = t, s.innerText = e ?? (t ? this.displayWith?.(t) : null) ?? "", this.insertBefore(s, this._inputElement ?? this.querySelector("input"));
     }
     _reactToInputChanges() {
       this.disabled = this._inputElement?.disabled ?? !1, this._proxyStateToChips();
@@ -201,34 +203,34 @@ let lt = (() => {
         t.disabled = this.disabled || this.formDisabled, t.readOnly = this._inputElement?.hasAttribute("readonly") ?? !1, t.negative = this.negative;
       });
     }
-    _inheritSize() {
-      this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = this.closest("sbb-form-field")?.size ?? (M() ? "s" : "m"), this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+    _updateSize(t) {
+      this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = t, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
     }
     _updateInputDescription() {
-      this._inputElement && this._inputElement.setAttribute("aria-description", `${R[this._language.current]} ${this.value.length}`);
+      this._inputElement && this._inputElement.setAttribute("aria-description", `${$[this._language.current]} ${this.value.length}`);
     }
     render() {
-      return F`
+      return O`
       <div class="sbb-chip-group">
         <slot @slotchange=${this._setupComponent}></slot>
       </div>
     `;
     }
-  }, p = new WeakMap(), u = new WeakMap(), h = l, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
-    E = [v({ type: Array })], C = [v({ attribute: !1 })], x = [v({ attribute: "separator-keys", type: Array })], m(l, null, E, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, i) => {
-      e.value = i;
-    } }, metadata: t }, null, g), m(l, null, C, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
-      e.displayWith = i;
-    } }, metadata: t }, S, w), m(l, null, x, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, i) => {
-      e.separatorKeys = i;
-    } }, metadata: t }, k, A), m(null, a = { value: h }, s, { kind: "class", name: h.name, metadata: t }, null, r), h = a.value, t && Object.defineProperty(h, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), l.role = "listbox", l.styles = [U, H], l.events = {
+  }, h = new WeakMap(), u = new WeakMap(), p = n, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
+    v = [g({ type: Array })], w = [g({ attribute: !1 })], k = [g({ attribute: "separator-keys", type: Array })], c(n, null, v, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
+      e.value = s;
+    } }, metadata: t }, null, y), c(n, null, w, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
+      e.displayWith = s;
+    } }, metadata: t }, E, z), c(n, null, k, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, s) => {
+      e.separatorKeys = s;
+    } }, metadata: t }, C, S), c(null, a = { value: p }, i, { kind: "class", name: p.name, metadata: t }, null, r), p = a.value, t && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), n.role = "listbox", n.styles = [J, H], n.events = {
     input: "input",
     change: "change",
     chipinputtokenend: "chipinputtokenend"
-  }, c(h, r), h;
+  }, b(p, r), p;
 })();
 export {
-  lt as SbbChipGroupElement
+  ot as SbbChipGroupElement
 };

package/core/controllers/media-matchers-controller.js

@@ -1,7 +1,7 @@
-import { S as m, a as b, b as p, c as f, d as g, e as y } from "../../sbb-tokens-DruExozg.js";
+import { S as m, a as b, b as p, c as f, d as g, e as y } from "../../sbb-tokens-HiNSQasB.js";
 import { isServer as i } from "lit";
 import { ɵstateController as M } from "../mixins/element-internals-mixin.js";
-const L = "(forced-colors: active)", n = "(prefers-color-scheme: dark)", w = "(any-hover: hover)", A = "(pointer: coarse)", C = `(min-width: ${m})`, _ = `(min-width: ${b})`, q = `(min-width: ${p})`, U = `(min-width: ${f})`, x = `(max-width: ${g})`, E = `(max-width: ${y})`, a = /* @__PURE__ */ new Map();
+const L = "(forced-colors: active)", n = "(prefers-color-scheme: dark)", w = "(any-hover: hover)", A = "(pointer: coarse)", C = `(min-width: ${y})`, _ = `(min-width: ${p})`, q = `(min-width: ${m})`, U = `(min-width: ${g})`, x = `(max-width: ${f})`, E = `(max-width: ${b})`, a = /* @__PURE__ */ new Map();
 class S {
   constructor(e, t) {
     this._queries = t, e.addController(this);

package/core/interfaces/overlay-close-details.d.ts

@@ -1,3 +1,4 @@
+/** @deprecated */
 export type SbbOverlayCloseEventDetails = {
     returnValue?: any;
     closeTarget?: HTMLElement;

package/core/interfaces/overlay-close-details.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-close-details.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/interfaces/overlay-close-details.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC"}
+{"version":3,"file":"overlay-close-details.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/interfaces/overlay-close-details.ts"],"names":[],"mappings":"AAAA,kBAAkB;AAClB,MAAM,MAAM,2BAA2B,GAAG;IACxC,WAAW,CAAC,EAAE,GAAG,CAAC;IAClB,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B,CAAC"}

package/core/styles/core.scss

@@ -32,6 +32,20 @@ $theme: 'standard' !default;
 @use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
   $theme: $theme
 );
+@use '../../divider/divider.global' as divider with (
+  $theme: $theme
+);
+@use '../../expansion-panel/expansion-panel/expansion-panel.global' as expansion-panel with (
+  $theme: $theme
+);
+@use '../../expansion-panel/expansion-panel-content/expansion-panel-content.global' as
+  expansion-panel-content with (
+  $theme: $theme
+);
+@use '../../expansion-panel/expansion-panel-header/expansion-panel-header.global' as
+  expansion-panel-header with (
+  $theme: $theme
+);
 @use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
   $theme: $theme
 );
@@ -71,6 +85,10 @@ $theme: 'standard' !default;
   @include checkbox.base;
   @include checkbox-group.base;
   @include checkbox-common.base;
+  @include divider.base;
+  @include expansion-panel.base;
+  @include expansion-panel-content.base;
+  @include expansion-panel-header.base;
   @include radio-button-common.base;
   @include radio-button-group.base;
   @include selection-action-panel.base;
@@ -84,6 +102,7 @@ $theme: 'standard' !default;
 
     @include card.base-forced-colors;
     @include card-badge.base-forced-colors;
+    @include expansion-panel-header.base-forced-colors;
     @include visual-checkbox.base-forced-colors;
     @include radio-button-common.base-forced-colors;
   }

package/core/styles/mixins/buttons.scss

@@ -1,6 +1,5 @@
 @mixin button-reset {
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  appearance: none;
   box-sizing: border-box;
   margin: 0;
   outline: none;

package/core/styles/mixins/card.scss

@@ -13,21 +13,21 @@
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-easing: var(--sbb-animation-easing);
   --sbb-card-border-style: solid;
-  --sbb-card-padding-inline: #{functions.theme-pattern-select(
+  --sbb-card-padding-inline-default: #{functions.theme-pattern-select(
       (
         'standard': var(--sbb-spacing-responsive-s),
         'lean': var(--sbb-spacing-responsive-xxs),
       ),
       $theme
     )};
-  --sbb-card-padding-block: #{functions.theme-pattern-select(
+  --sbb-card-padding-block-default: #{functions.theme-pattern-select(
       (
         'standard': var(--sbb-spacing-responsive-xxxs),
         'lean': var(--sbb-spacing-fixed-3x),
       ),
       $theme
     )};
-  --sbb-card-with-badge-padding-block: #{functions.theme-pattern-select(
+  --sbb-card-with-badge-padding-block-default: #{functions.theme-pattern-select(
       (
         'standard': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs),
         'lean': var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x),
@@ -85,6 +85,12 @@
 }
 
 // Card sizing
+@mixin card-variables--spacing-default {
+  --sbb-card-padding-block: var(--sbb-card-padding-block-default);
+  --sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);
+  --sbb-card-padding-inline: var(--sbb-card-padding-inline-default);
+}
+
 @mixin card-variables--spacing-3x-xxs {
   --sbb-card-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);

package/core/styles/mixins/inputs.scss

@@ -7,5 +7,5 @@
   border: none;
   background-color: transparent;
   padding: 0;
-  -webkit-appearance: none;
+  appearance: none;
 }

package/core/styles/normalize.scss

@@ -8,8 +8,6 @@
 // 3. Use a more readable tab size (opinionated).
 html {
   // line-height: 1.15; // 1
-  -webkit-text-size-adjust: 100%; // 2
-  -moz-text-size-adjust: 100%; // 2
   text-size-adjust: 100%; // 2
   tab-size: 4; // 3
 }
@@ -94,7 +92,7 @@ select {
 // Correct the inability to style clickable types in iOS and Safari.
 button,
 :is(button, input):where([type='button'], [type='reset'], [type='submit']) {
-  -webkit-appearance: button;
+  appearance: auto;
 }
 
 // Remove the additional ':invalid' styles in Firefox.
@@ -122,19 +120,19 @@ progress {
 // 1. Correct the odd appearance in Chrome and Safari.
 // 2. Correct the outline style in Safari.
 [type='search'] {
-  -webkit-appearance: textfield; // 1
+  appearance: textfield; // 1
   outline-offset: -2px; // 2
 }
 
 // Remove the inner padding in Chrome and Safari on macOS.
 ::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 // 1. Correct the inability to style clickable types in iOS and Safari.
 // 2. Change font properties to 'inherit' in Safari.
 ::-webkit-file-upload-button {
-  -webkit-appearance: button; // 1
+  appearance: auto; // 1
   font: inherit; // 2
 }
 

package/core.css

@@ -1246,9 +1246,9 @@
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-easing: var(--sbb-animation-easing);
   --sbb-card-border-style: solid;
-  --sbb-card-padding-inline: var(--sbb-spacing-responsive-s);
-  --sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);
-  --sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-padding-inline-default: var(--sbb-spacing-responsive-s);
+  --sbb-card-padding-block-default: var(--sbb-spacing-responsive-xxxs);
+  --sbb-card-with-badge-padding-block-default: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);
 }
 :root.sbb-lean {
   --sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs);
@@ -1301,6 +1301,33 @@
   --sbb-checkbox-font-size: var(--sbb-text-font-size-m);
   --sbb-checkbox-label-color: var(--sbb-color-color-3);
   --sbb-checkbox-cursor: var(--sbb-cursor-pointer);
+  --sbb-divider-color: var(--sbb-background-color-4);
+  --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
+  --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
+  --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
+  --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-expansion-panel-icon-size: var(--sbb-size-icon-ui-medium);
+  --sbb-expansion-panel-title-gap-s: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-title-gap-l: var(--sbb-spacing-fixed-4x);
+  --sbb-expansion-panel-title-gap-default: var(--sbb-expansion-panel-title-gap-l);
+  --sbb-expansion-panel-content-padding-block-end: var(--sbb-spacing-responsive-s);
+  --sbb-expansion-panel-content-padding-inline-s: var(--sbb-spacing-fixed-5x);
+  --sbb-expansion-panel-content-padding-inline-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-content-padding-inline-default: var(--sbb-expansion-panel-content-padding-inline-l);
+  --sbb-expansion-panel-header-cursor: var(--sbb-cursor-pointer);
+  --sbb-expansion-panel-header-font-size: var(--sbb-text-font-size-l);
+  --sbb-expansion-panel-header-text-color: var(--sbb-color-2);
+  --sbb-expansion-panel-header-justify-content: space-between;
+  --sbb-expansion-panel-header-gap-s: var(--sbb-spacing-fixed-2x);
+  --sbb-expansion-panel-header-gap-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-header-gap-default: var(--sbb-expansion-panel-header-gap-l);
+  --sbb-expansion-panel-header-padding-block-s: var(--sbb-spacing-fixed-3x);
+  --sbb-expansion-panel-header-padding-block-l: var(--sbb-spacing-responsive-xs);
+  --sbb-expansion-panel-header-padding-block-default: var(--sbb-expansion-panel-header-padding-block-l);
+  --sbb-expansion-panel-header-padding-inline-s: var(--sbb-spacing-fixed-5x);
+  --sbb-expansion-panel-header-padding-inline-l: var(--sbb-spacing-fixed-6x);
+  --sbb-expansion-panel-header-padding-inline-default: var(--sbb-expansion-panel-header-padding-inline-l);
   --sbb-radio-button-label-color: var(--sbb-color-3);
   --sbb-radio-button-background-color: var(--sbb-background-color-1);
   --sbb-radio-button-border-width: var(--sbb-border-width-1x);
@@ -1379,6 +1406,7 @@
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-visual-checkbox-selection-color: Canvas;
     --sbb-visual-checkbox-selection-color-negative: Canvas;
     --sbb-visual-checkbox-selection-color-disabled: Canvas;
@@ -1573,7 +1601,7 @@ html {
   border: none;
   background-color: transparent;
   padding: 0;
-  -webkit-appearance: none;
+  appearance: none;
   outline: none !important;
   overflow: var(--sbb-form-field-overflow);
   width: 100%;