@sbb-esta/lyne-elements 1.8.0 → 1.10.0

package/core/mixins.js

@@ -1,16 +1,16 @@
-import { property as o, state as y } from "lit/decorators.js";
-import { defaultConverter as p, html as c, nothing as b, css as x } from "lit";
+import { property as o, state as x } from "lit/decorators.js";
+import { defaultConverter as v, html as b, nothing as c, css as C } from "lit";
 import { hostAttributes as k } from "./decorators.js";
-import { preventScrollOnSpacebarPress as v, EventEmitter as w } from "./eventing.js";
-import { getLocalName as f } from "./dom.js";
+import { preventScrollOnSpacebarPress as f, EventEmitter as w } from "./eventing.js";
+import { getLocalName as m } from "./dom.js";
 import "../screen-reader-only.js";
-var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (i, s, r, t) => {
-  for (var e = E(s, r), n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (e = a(s, r, e) || e);
+var S = Object.defineProperty, E = Object.getOwnPropertyDescriptor, P = (n, s, r, t) => {
+  for (var e = E(s, r), i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
   return e && S(s, r, e), e;
 };
-const C = (i) => {
-  class s extends i {
+const p = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._disabled = !1;
     }
@@ -31,21 +31,28 @@ const C = (i) => {
   return P([
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "disabled"), s;
-}, J = (i) => {
-  class s extends C(i) {
+}, J = (n) => {
+  class s extends p(n) {
     willUpdate(t) {
       super.willUpdate(t), t.has("disabled") && (this.disabled ? (this.setAttribute("aria-disabled", "true"), this.removeAttribute("tabindex")) : (this.removeAttribute("aria-disabled"), this.setAttribute("tabindex", "0")));
     }
   }
   return s;
+}, Q = (n) => {
+  class s extends p(n) {
+    willUpdate(t) {
+      super.willUpdate(t), t.has("disabled") && (this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
+    }
+  }
+  return s;
 };
-var $ = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (i, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? O(s, r) : s, n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (e = (t ? a(s, r, e) : a(e)) || e);
+var $ = Object.defineProperty, O = Object.getOwnPropertyDescriptor, h = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? O(s, r) : s, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
   return t && e && $(s, r, e), e;
 };
-const R = (i) => {
-  const r = class r extends i {
+const R = (n) => {
+  const r = class r extends n {
     constructor() {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
     }
@@ -97,8 +104,8 @@ const R = (i) => {
     get willValidate() {
       return this.internals.willValidate;
     }
-    attributeChangedCallback(e, n, a) {
-      (e !== "name" || n !== a) && super.attributeChangedCallback(e, n, a);
+    attributeChangedCallback(e, i, a) {
+      (e !== "name" || i !== a) && super.attributeChangedCallback(e, i, a);
     }
     /**
      * Returns true if internals target element has no validity problems; false otherwise.
@@ -142,16 +149,16 @@ const R = (i) => {
   ], s.prototype, "name", 1), h([
     o()
   ], s.prototype, "value", 1), h([
-    y()
+    x()
   ], s.prototype, "formDisabled", 2), s;
 };
-var q = Object.defineProperty, L = Object.getOwnPropertyDescriptor, A = (i, s, r, t) => {
-  for (var e = L(s, r), n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (e = a(s, r, e) || e);
-  return e && q(s, r, e), e;
+var A = Object.defineProperty, q = Object.getOwnPropertyDescriptor, D = (n, s, r, t) => {
+  for (var e = q(s, r), i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
+  return e && A(s, r, e), e;
 };
-const D = (i) => {
-  class s extends i {
+const L = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._required = !1;
     }
@@ -172,17 +179,17 @@ const D = (i) => {
       return !1;
     }
   }
-  return A([
+  return D([
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "required"), s;
 };
-var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, m = (i, s, r, t) => {
-  for (var e = t > 1 ? void 0 : t ? U(s, r) : s, n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (e = (t ? a(s, r, e) : a(e)) || e);
+var M = Object.defineProperty, U = Object.getOwnPropertyDescriptor, _ = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? U(s, r) : s, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = (t ? a(s, r, e) : a(e)) || e);
   return t && e && M(s, r, e), e;
 };
-const Q = (i) => {
-  let s = class extends C(D(R(i))) {
+const W = (n) => {
+  let s = class extends p(L(R(n))) {
     constructor() {
       super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (r) => {
         r.key === " " && this._handleUserInteraction();
@@ -199,10 +206,10 @@ const Q = (i) => {
       return this._checked;
     }
     connectedCallback() {
-      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", v), this.addEventListener("keyup", this._handleKeyboardInteraction);
+      super.connectedCallback(), this.addEventListener("click", this._handleUserInteraction), this.addEventListener("keydown", f), this.addEventListener("keyup", this._handleKeyboardInteraction);
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", v), this.removeEventListener("keyup", this._handleKeyboardInteraction);
+      super.disconnectedCallback(), this.removeEventListener("click", this._handleUserInteraction), this.removeEventListener("keydown", f), this.removeEventListener("keyup", this._handleKeyboardInteraction);
     }
     attributeChangedCallback(r, t, e) {
       (r !== "checked" || !this._attributeMutationBlocked) && super.attributeChangedCallback(r, t, e);
@@ -231,40 +238,40 @@ const Q = (i) => {
       this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
     }
   };
-  return m([
+  return _([
     o({
       type: Boolean,
       converter: {
-        ...p,
+        ...v,
         // We need to pass information to the setter so that we know it was called by attribute change.
         fromAttribute: (r, t) => {
-          var n, a;
-          return { value: (a = (n = p).fromAttribute) == null ? void 0 : a.call(n, r, t), attribute: !0 };
+          var i, a;
+          return { value: (a = (i = v).fromAttribute) == null ? void 0 : a.call(i, r, t), attribute: !0 };
         }
       }
     })
-  ], s.prototype, "checked", 1), s = m([
+  ], s.prototype, "checked", 1), s = _([
     k({
       tabindex: "0"
     })
   ], s), s;
-}, N = (i) => {
-  class s extends i {
+}, N = (n) => {
+  class s extends n {
     constructor(...t) {
       var e;
       if (super(...t), this._hydrationComplete = new Promise(
-        (n) => this._resolveHydration = n
+        (i) => this._resolveHydration = i
       ), this._hydrationRequired = !!this.shadowRoot, !this._hydrationRequired)
         this._resolveHydration(!1);
       else {
-        const n = (d) => {
+        const i = (d) => {
           this._hydrationRequired && d.stopImmediatePropagation();
         }, a = { capture: !0 }, l = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
         l != null && l.length && (l.forEach(
-          (d) => d.addEventListener("slotchange", n, a)
+          (d) => d.addEventListener("slotchange", i, a)
         ), this.hydrationComplete.then(
           () => l.forEach((d) => {
-            d.removeEventListener("slotchange", n, a), d.assignedNodes().length && d.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+            d.removeEventListener("slotchange", i, a), d.assignedNodes().length && d.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
           })
         ));
       }
@@ -290,21 +297,21 @@ const Q = (i) => {
   }
   return s;
 };
-var B = Object.defineProperty, V = (i, s, r, t) => {
-  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (e = a(s, r, e) || e);
+var B = Object.defineProperty, V = (n, s, r, t) => {
+  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
   return e && B(s, r, e), e;
 };
-const _ = "data-ssr-child-count", g = "li", W = (i) => {
-  class s extends N(i) {
+const g = "data-ssr-child-count", y = "li", Y = (n) => {
+  class s extends N(n) {
     constructor() {
       super(...arguments), this.listChildren = [], this._handleSlotchange = () => {
         const t = Array.from(this.children ?? []).filter(
           (e) => this.listChildLocalNames.includes(e.localName)
         );
-        t.length === this.listChildren.length && this.listChildren.every((e, n) => t[n] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
-          (e, n) => e.setAttribute("slot", `${g}-${n}`)
-        ), this.removeAttribute(_));
+        t.length === this.listChildren.length && this.listChildren.every((e, i) => t[i] === e) || (this.listChildren.filter((e) => !t.includes(e)).forEach((e) => e.removeAttribute("slot")), this.listChildren = t, this.listChildren.forEach(
+          (e, i) => e.setAttribute("slot", `${y}-${i}`)
+        ), this.removeAttribute(g));
       };
     }
     connectedCallback() {
@@ -325,25 +332,25 @@ const _ = "data-ssr-child-count", g = "li", W = (i) => {
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
     renderList(t = {}, e = {}) {
-      const n = this.listSlotEntries(e);
-      return n.length >= 2 ? c`
+      const i = this.listSlotEntries(e);
+      return i.length >= 2 ? b`
           <ul
-            class=${t.class || (this.localName ?? f(this))}
-            aria-label=${t.ariaLabel || b}
-            aria-labelledby=${t.ariaLabelledby || b}
+            class=${t.class || (this.localName ?? m(this))}
+            aria-label=${t.ariaLabel || c}
+            aria-labelledby=${t.ariaLabelledby || c}
           >
-            ${n.map(
-        (a) => c`
-                <li aria-hidden=${a.ariaHidden || b}>
+            ${i.map(
+        (a) => b`
+                <li aria-hidden=${a.ariaHidden || c}>
                   <slot name=${a.name}></slot>
                 </li>
               `
       )}
           </ul>
           ${this.renderHiddenSlot()}
-        ` : n.length === 1 ? c`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
-          <span class=${t.class || (this.localName ?? f(this))}>
-            <span><slot name=${n[0].name}></slot></span>
+        ` : i.length === 1 ? b`<sbb-screen-reader-only>${t.ariaLabel}</sbb-screen-reader-only>
+          <span class=${t.class || (this.localName ?? m(this))}>
+            <span><slot name=${i[0].name}></slot></span>
           </span>
           ${this.renderHiddenSlot()} ` : this.renderHiddenSlot();
     }
@@ -357,11 +364,11 @@ const _ = "data-ssr-child-count", g = "li", W = (i) => {
      * children to be passed via the `data-ssr-child-count` attribute value.
      */
     listSlotEntries(t) {
-      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(_) ?? 0) })).map((n, a) => {
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(g) ?? 0) })).map((i, a) => {
         var l;
         return {
-          name: `${g}-${a}`,
-          ariaHidden: ((l = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : l.includes(n.localName)) ?? !1
+          name: `${y}-${a}`,
+          ariaHidden: ((l = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : l.includes(i.localName)) ?? !1
         };
       });
     }
@@ -371,20 +378,20 @@ const _ = "data-ssr-child-count", g = "li", W = (i) => {
      * the slotchange event, which can be used to assign it to the appropriate named slot.
      */
     renderHiddenSlot() {
-      return c`<span hidden><slot></slot></span>`;
+      return b`<span hidden><slot></slot></span>`;
     }
   }
   return V([
-    y()
+    x()
   ], s.prototype, "listChildren"), s;
 };
-var j = Object.defineProperty, H = (i, s, r, t) => {
-  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (e = a(s, r, e) || e);
+var j = Object.defineProperty, H = (n, s, r, t) => {
+  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
   return e && j(s, r, e), e;
 };
-const Y = (i) => {
-  class s extends i {
+const Z = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this.negative = !1;
     }
@@ -393,14 +400,14 @@ const Y = (i) => {
     o({ reflect: !0, type: Boolean })
   ], s.prototype, "negative"), s;
 };
-var I = Object.defineProperty, u = (i, s, r, t) => {
-  for (var e = void 0, n = i.length - 1, a; n >= 0; n--)
-    (a = i[n]) && (e = a(s, r, e) || e);
+var I = Object.defineProperty, u = (n, s, r, t) => {
+  for (var e = void 0, i = n.length - 1, a; i >= 0; i--)
+    (a = n[i]) && (e = a(s, r, e) || e);
   return e && I(s, r, e), e;
 };
-const Z = (i) => {
+const ee = (n) => {
   var t;
-  const s = (t = class extends i {
+  const s = (t = class extends n {
     constructor() {
       super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new w(
         this,
@@ -421,8 +428,8 @@ const Z = (i) => {
   ], s.prototype, "borderless"), u([
     o()
   ], s.prototype, "expansionState"), s;
-}, ee = (i) => {
-  class s extends i {
+}, te = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
@@ -439,17 +446,18 @@ const Z = (i) => {
     }
   }
   return s;
-}, te = x`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+}, se = C`:host{--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-expansion-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-expansion-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
-  C as SbbDisabledMixin,
+  p as SbbDisabledMixin,
   J as SbbDisabledTabIndexActionMixin,
-  Q as SbbFormAssociatedCheckboxMixin,
+  Q as SbbFocusableDisabledActionMixin,
+  W as SbbFormAssociatedCheckboxMixin,
   R as SbbFormAssociatedMixin,
   N as SbbHydrationMixin,
-  W as SbbNamedSlotListMixin,
-  Y as SbbNegativeMixin,
-  Z as SbbPanelMixin,
-  D as SbbRequiredMixin,
-  ee as SbbUpdateSchedulerMixin,
-  te as panelCommonStyle
+  Y as SbbNamedSlotListMixin,
+  Z as SbbNegativeMixin,
+  ee as SbbPanelMixin,
+  L as SbbRequiredMixin,
+  te as SbbUpdateSchedulerMixin,
+  se as panelCommonStyle
 };

package/core/styles/core.scss

@@ -27,6 +27,7 @@
 
     // Time Input
     --sbb-time-input-max-width: #{functions.px-to-rem-build(58)};
+    --sbb-time-input-s-max-width: #{functions.px-to-rem-build(51)};
 
     // Overlay
     --sbb-overlay-default-z-index: 1000;
@@ -41,6 +42,7 @@
 
       // Time Input
       --sbb-time-input-max-width: #{functions.px-to-rem-build(65)};
+      --sbb-time-input-s-max-width: #{functions.px-to-rem-build(58)};
     }
   }
 }
@@ -123,4 +125,8 @@ sbb-title + p {
 
 input[data-sbb-time-input] {
   max-width: var(--sbb-time-input-max-width);
+
+  sbb-form-field[size='s'] & {
+    max-width: var(--sbb-time-input-s-max-width);
+  }
 }

package/core/styles/mixins/lists.scss

@@ -81,6 +81,7 @@
   --sbb-step-list-padding-block: var(--sbb-spacing-fixed-3x);
   --sbb-step-list-padding-inline: var(--sbb-spacing-responsive-xxs);
   --sbb-step-list-marker-to-text-gap: var(--sbb-spacing-responsive-xxxs);
+  --sbb-step-list-border-radius: var(--sbb-border-radius-4x);
 
   // Additional space from overall li padding to the text because text
   // has to be centered to marker number.
@@ -117,7 +118,6 @@
     position: relative;
     counter-increment: steps;
     background-color: var(--sbb-color-milk);
-    border-radius: var(--sbb-border-radius-4x);
     padding-block: calc(
         var(--sbb-step-list-padding-block) + var(--sbb-step-list-text-to-marker-block-offset)
       )
@@ -131,6 +131,16 @@
       var(--sbb-step-list-marker-dimensions) + 2 * var(--sbb-step-list-padding-block)
     );
 
+    &:first-of-type {
+      border-start-start-radius: var(--sbb-step-list-border-radius);
+      border-start-end-radius: var(--sbb-step-list-border-radius);
+    }
+
+    &:last-of-type {
+      border-end-start-radius: var(--sbb-step-list-border-radius);
+      border-end-end-radius: var(--sbb-step-list-border-radius);
+    }
+
     &::before {
       @include typo.text-xxs--bold;
 

package/core/styles/mixins/panel.scss

@@ -67,8 +67,6 @@
 }
 
 @mixin panel-text {
-  @include typo.font-smoothing;
-
   font-family: var(--sbb-typo-font-family);
   font-size: var(--sbb-panel-font-size);
   font-weight: 300;

package/core/styles/mixins/table.scss

@@ -137,6 +137,17 @@
   }
 }
 
+@mixin table--xs {
+  --sbb-table-header-padding-block: 0;
+  --sbb-table-header-padding-inline: var(--sbb-spacing-fixed-1x);
+  --sbb-table-cell-padding-block: 0;
+  --sbb-table-cell-padding-inline: var(--sbb-spacing-fixed-1x);
+
+  tbody > tr > td {
+    @include typo.text-xs--regular;
+  }
+}
+
 @mixin table--theme-iron {
   --sbb-table-cell-color: var(--sbb-color-iron);
 

package/core/styles/mixins/typo.scss

@@ -12,8 +12,6 @@
     --sbb-title-margin-block-end: var(--sbb-spacing-responsive-s);
   }
 
-  @include font-smoothing;
-
   margin: 0;
   margin-block: var(--sbb-title-margin-block-start) var(--sbb-title-margin-block-end);
   font-family: var(--sbb-typo-font-family);
@@ -169,34 +167,6 @@
   text-align: inherit;
 }
 
-// ----------------------------------------------------------------------------------------------------
-// Typo: Font Smoothing Mixins
-// ----------------------------------------------------------------------------------------------------
-
-/**
- * Better font rendering (on OS X)
- * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
- *
- * Usage:
- *
- * .var_dark_on_light {
- * 	@include font-smoothing;
- * }
- * .var_light_on_dark {
- * 	@include font-smoothing-reset;
- * }
- */
-
-@mixin font-smoothing {
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-}
-
-@mixin font-smoothing-reset {
-  -webkit-font-smoothing: subpixel-antialiased;
-  -moz-osx-font-smoothing: auto;
-}
-
 @mixin placeholder {
   color: var(--sbb-color-metal);
   -webkit-text-fill-color: var(--sbb-color-metal);

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss

@@ -117,6 +117,7 @@ $sbb-color-green: #008a36;
 $sbb-color-turquoise: #00a59b;
 /// Original Value: 3px
 $sbb-focus-outline-offset: 0.1875rem;
+$sbb-hover-image-brightness: 1.075;
 $sbb-layout-base-grid-columns-zero: 4;
 $sbb-layout-base-grid-columns-micro: 4;
 $sbb-layout-base-grid-columns-small: 4;

package/core/styles/node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 15 Jul 2024 09:40:16 GMT
+ * Generated on Mon, 02 Sep 2024 15:45:11 GMT
  */
 
 @mixin lyne-design-tokens-css-variables {
@@ -171,6 +171,7 @@
    * Original Value: 3px
    */
   --sbb-focus-outline-offset: 0.1875rem;
+  --sbb-hover-image-brightness: 1.075;
   --sbb-layout-base-grid-columns-zero: 4;
   --sbb-layout-base-grid-columns-micro: 4;
   --sbb-layout-base-grid-columns-small: 4;

package/core/styles/table.scss

@@ -2,7 +2,8 @@
 
 .sbb-table,
 .sbb-table-m,
-.sbb-table-s {
+.sbb-table-s,
+.sbb-table-xs {
   @include table.table;
 }
 
@@ -14,6 +15,10 @@
   @include table.table--s;
 }
 
+.sbb-table-xs {
+  @include table.table--xs;
+}
+
 sbb-table-wrapper[negative] .sbb-table,
 .sbb-table--negative {
   @include table.table--negative;

package/core/testing/wait-for-image-ready.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAEtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAcf"}
+{"version":3,"file":"wait-for-image-ready.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/wait-for-image-ready.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,gBAAgB,CAAC;AAGtD,wBAAsB,iBAAiB,CACrC,OAAO,EAAE,gBAAgB,GAAG,eAAe,EAC3C,qBAAqB,SAAW,GAC/B,OAAO,CAAC,IAAI,CAAC,CAkCf"}