@sbb-esta/lyne-elements 1.10.0 → 1.11.0

package/core/mixins.js

@@ -1,13 +1,13 @@
-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 f, EventEmitter as w } from "./eventing.js";
+import { property as l, state as x } from "lit/decorators.js";
+import { defaultConverter as v, html as b, nothing as c, css as k } from "lit";
+import { hostAttributes as w } from "./decorators.js";
+import { preventScrollOnSpacebarPress as f, EventEmitter as S } from "./eventing.js";
 import { getLocalName as m } from "./dom.js";
 import "../screen-reader-only.js";
-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;
+var E = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, C = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? $(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 && E(s, r, e), e;
 };
 const p = (n) => {
   class s extends n {
@@ -28,17 +28,26 @@ const p = (n) => {
       return !1;
     }
   }
-  return P([
-    o({ reflect: !0, type: Boolean })
-  ], s.prototype, "disabled"), s;
-}, J = (n) => {
-  class s extends p(n) {
+  return C([
+    l({ reflect: !0, type: Boolean })
+  ], s.prototype, "disabled", 1), s;
+}, P = (n) => {
+  class s extends n {
+    constructor() {
+      super(...arguments), this.disabledInteractive = !1;
+    }
+  }
+  return C([
+    l({ attribute: "disabled-interactive", type: Boolean })
+  ], s.prototype, "disabledInteractive", 2), s;
+}, Q = (n) => {
+  class s extends P(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")));
+      super.willUpdate(t), !(!t.has("disabled") && !t.has("disabledInteractive")) && (!this.disabled || this.disabledInteractive ? this.setAttribute("tabindex", "0") : this.removeAttribute("tabindex"), this.disabled ? this.setAttribute("aria-disabled", "true") : this.removeAttribute("aria-disabled"));
     }
   }
   return s;
-}, Q = (n) => {
+}, W = (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"));
@@ -46,12 +55,12 @@ const p = (n) => {
   }
   return s;
 };
-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--)
+var O = Object.defineProperty, R = Object.getOwnPropertyDescriptor, h = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? R(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;
+  return t && e && O(s, r, e), e;
 };
-const R = (n) => {
+const A = (n) => {
   const r = class r extends n {
     constructor() {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
@@ -145,17 +154,17 @@ const R = (n) => {
   r.formAssociated = !0;
   let s = r;
   return h([
-    o()
+    l()
   ], s.prototype, "name", 1), h([
-    o()
+    l()
   ], s.prototype, "value", 1), h([
     x()
   ], s.prototype, "formDisabled", 2), s;
 };
-var A = Object.defineProperty, q = Object.getOwnPropertyDescriptor, D = (n, s, r, t) => {
+var D = Object.defineProperty, q = Object.getOwnPropertyDescriptor, M = (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;
+  return e && D(s, r, e), e;
 };
 const L = (n) => {
   class s extends n {
@@ -179,17 +188,17 @@ const L = (n) => {
       return !1;
     }
   }
-  return D([
-    o({ reflect: !0, type: Boolean })
+  return M([
+    l({ reflect: !0, type: Boolean })
   ], s.prototype, "required"), s;
 };
-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--)
+var U = Object.defineProperty, I = Object.getOwnPropertyDescriptor, _ = (n, s, r, t) => {
+  for (var e = t > 1 ? void 0 : t ? I(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;
+  return t && e && U(s, r, e), e;
 };
-const W = (n) => {
-  let s = class extends p(L(R(n))) {
+const Y = (n) => {
+  let s = class extends p(L(A(n))) {
     constructor() {
       super(), this._attributeMutationBlocked = !1, this._checked = !1, this._handleKeyboardInteraction = (r) => {
         r.key === " " && this._handleUserInteraction();
@@ -239,7 +248,7 @@ const W = (n) => {
     }
   };
   return _([
-    o({
+    l({
       type: Boolean,
       converter: {
         ...v,
@@ -251,7 +260,7 @@ const W = (n) => {
       }
     })
   ], s.prototype, "checked", 1), s = _([
-    k({
+    w({
       tabindex: "0"
     })
   ], s), s;
@@ -266,11 +275,11 @@ const W = (n) => {
       else {
         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(
+        }, a = { capture: !0 }, o = (e = this.shadowRoot) == null ? void 0 : e.querySelectorAll("slot");
+        o != null && o.length && (o.forEach(
           (d) => d.addEventListener("slotchange", i, a)
         ), this.hydrationComplete.then(
-          () => l.forEach((d) => {
+          () => o.forEach((d) => {
             d.removeEventListener("slotchange", i, a), d.assignedNodes().length && d.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
           })
         ));
@@ -302,7 +311,7 @@ var B = Object.defineProperty, V = (n, s, r, t) => {
     (a = n[i]) && (e = a(s, r, e) || e);
   return e && B(s, r, e), e;
 };
-const g = "data-ssr-child-count", y = "li", Y = (n) => {
+const g = "data-ssr-child-count", y = "li", Z = (n) => {
   class s extends N(n) {
     constructor() {
       super(...arguments), this.listChildren = [], this._handleSlotchange = () => {
@@ -365,10 +374,10 @@ const g = "data-ssr-child-count", y = "li", Y = (n) => {
      */
     listSlotEntries(t) {
       return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(g) ?? 0) })).map((i, a) => {
-        var l;
+        var o;
         return {
           name: `${y}-${a}`,
-          ariaHidden: ((l = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : l.includes(i.localName)) ?? !1
+          ariaHidden: ((o = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : o.includes(i.localName)) ?? !1
         };
       });
     }
@@ -390,26 +399,26 @@ var j = Object.defineProperty, H = (n, s, r, t) => {
     (a = n[i]) && (e = a(s, r, e) || e);
   return e && j(s, r, e), e;
 };
-const Z = (n) => {
+const ee = (n) => {
   class s extends n {
     constructor() {
       super(...arguments), this.negative = !1;
     }
   }
   return H([
-    o({ reflect: !0, type: Boolean })
+    l({ reflect: !0, type: Boolean })
   ], s.prototype, "negative"), s;
 };
-var I = Object.defineProperty, u = (n, s, r, t) => {
+var F = 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;
+  return e && F(s, r, e), e;
 };
-const ee = (n) => {
+const te = (n) => {
   var t;
   const s = (t = class extends n {
     constructor() {
-      super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new w(
+      super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new S(
         this,
         t.events.panelConnected,
         { bubbles: !0 }
@@ -422,13 +431,13 @@ const ee = (n) => {
     panelConnected: "panelConnected"
   }, t);
   return u([
-    o()
+    l()
   ], s.prototype, "color"), u([
-    o({ reflect: !0, type: Boolean })
+    l({ reflect: !0, type: Boolean })
   ], s.prototype, "borderless"), u([
-    o()
+    l()
   ], s.prototype, "expansionState"), s;
-}, te = (n) => {
+}, se = (n) => {
   class s extends n {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
@@ -446,18 +455,19 @@ const ee = (n) => {
     }
   }
   return s;
-}, 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}`;
+}, re = k`: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 {
+  P as SbbDisabledInteractiveMixin,
   p as SbbDisabledMixin,
-  J as SbbDisabledTabIndexActionMixin,
-  Q as SbbFocusableDisabledActionMixin,
-  W as SbbFormAssociatedCheckboxMixin,
-  R as SbbFormAssociatedMixin,
+  Q as SbbDisabledTabIndexActionMixin,
+  W as SbbFocusableDisabledActionMixin,
+  Y as SbbFormAssociatedCheckboxMixin,
+  A as SbbFormAssociatedMixin,
   N as SbbHydrationMixin,
-  Y as SbbNamedSlotListMixin,
-  Z as SbbNegativeMixin,
-  ee as SbbPanelMixin,
+  Z as SbbNamedSlotListMixin,
+  ee as SbbNegativeMixin,
+  te as SbbPanelMixin,
   L as SbbRequiredMixin,
-  te as SbbUpdateSchedulerMixin,
-  se as panelCommonStyle
+  se as SbbUpdateSchedulerMixin,
+  re as panelCommonStyle
 };

package/core/observers/intersection-observer.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @deprecated use lit observers, will be removed with next major version
+ */
 export declare class NodeIntersectionObserver implements IntersectionObserver {
     root: Element | Document | null;
     rootMargin: string;
@@ -7,6 +10,9 @@ export declare class NodeIntersectionObserver implements IntersectionObserver {
     takeRecords(): any;
     unobserve(): void;
 }
+/**
+ * @deprecated use lit observers, will be removed with next major version
+ */
 export declare const AgnosticIntersectionObserver: typeof NodeIntersectionObserver | {
     new (callback: IntersectionObserverCallback, options?: IntersectionObserverInit): IntersectionObserver;
     prototype: IntersectionObserver;

package/core/observers/intersection-observer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"intersection-observer.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/observers/intersection-observer.ts"],"names":[],"mappings":"AAAA,qBAAa,wBAAyB,YAAW,oBAAoB;IAC5D,IAAI,EAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IACjC,UAAU,EAAG,MAAM,CAAC;IACpB,UAAU,EAAG,MAAM,EAAE,CAAC;IAEtB,UAAU,IAAI,IAAI;IAIlB,OAAO,IAAI,IAAI;IAIf,WAAW,IAAI,GAAG;IAIlB,SAAS,IAAI,IAAI;CAGzB;AAGD,eAAO,MAAM,4BAA4B;;;CACsD,CAAC"}
+{"version":3,"file":"intersection-observer.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/observers/intersection-observer.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,wBAAyB,YAAW,oBAAoB;IAC5D,IAAI,EAAG,OAAO,GAAG,QAAQ,GAAG,IAAI,CAAC;IACjC,UAAU,EAAG,MAAM,CAAC;IACpB,UAAU,EAAG,MAAM,EAAE,CAAC;IAEtB,UAAU,IAAI,IAAI;IAIlB,OAAO,IAAI,IAAI;IAIf,WAAW,IAAI,GAAG;IAIlB,SAAS,IAAI,IAAI;CAGzB;AAED;;GAEG;AAEH,eAAO,MAAM,4BAA4B;;;CACsD,CAAC"}

package/core/observers/mutation-observer.d.ts

@@ -1,7 +1,13 @@
+/**
+ * @deprecated use lit observers, will be removed with next major version
+ */
 export declare class NodeMutationObserver implements MutationObserver {
     disconnect(): void;
     observe(_target: Node, _options?: MutationObserverInit): void;
     takeRecords(): MutationRecord[];
 }
+/**
+ * @deprecated use lit observers, will be removed with next major version
+ */
 export declare const AgnosticMutationObserver: typeof MutationObserver;
 //# sourceMappingURL=mutation-observer.d.ts.map

package/core/observers/mutation-observer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mutation-observer.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/observers/mutation-observer.ts"],"names":[],"mappings":"AAAA,qBAAa,oBAAqB,YAAW,gBAAgB;IACpD,UAAU,IAAI,IAAI;IAIlB,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,oBAAoB,GAAG,IAAI;IAI7D,WAAW,IAAI,cAAc,EAAE;CAGvC;AAGD,eAAO,MAAM,wBAAwB,EAAE,OAAO,gBACqC,CAAC"}
+{"version":3,"file":"mutation-observer.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/observers/mutation-observer.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,oBAAqB,YAAW,gBAAgB;IACpD,UAAU,IAAI,IAAI;IAIlB,OAAO,CAAC,OAAO,EAAE,IAAI,EAAE,QAAQ,CAAC,EAAE,oBAAoB,GAAG,IAAI;IAI7D,WAAW,IAAI,cAAc,EAAE;CAGvC;AAED;;GAEG;AAEH,eAAO,MAAM,wBAAwB,EAAE,OAAO,gBACqC,CAAC"}

package/core/observers/resize-observer.d.ts

@@ -1,8 +1,14 @@
+/**
+ * @deprecated use lit observers, will be removed with next major version
+ */
 export declare class NodeResizeObserver implements ResizeObserver {
     disconnect(): any;
     observe(): any;
     unobserve(): any;
 }
+/**
+ * @deprecated use lit observers, will be removed with next major version
+ */
 export declare const AgnosticResizeObserver: {
     new (callback: ResizeObserverCallback): ResizeObserver;
     prototype: ResizeObserver;

package/core/observers/resize-observer.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"resize-observer.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/observers/resize-observer.ts"],"names":[],"mappings":"AAAA,qBAAa,kBAAmB,YAAW,cAAc;IAChD,UAAU,IAAI,GAAG;IAIjB,OAAO,IAAI,GAAG;IAId,SAAS,IAAI,GAAG;CAGxB;AAGD,eAAO,MAAM,sBAAsB;;;CAC0C,CAAC"}
+{"version":3,"file":"resize-observer.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/observers/resize-observer.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,qBAAa,kBAAmB,YAAW,cAAc;IAChD,UAAU,IAAI,GAAG;IAIjB,OAAO,IAAI,GAAG;IAId,SAAS,IAAI,GAAG;CAGxB;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB;;;CAC0C,CAAC"}

package/core/styles/core.scss

@@ -36,6 +36,10 @@
     // TODO: Check if infinity is supported by all browsers (e.g. Firefox) -> calc(1em * infinity);
     --sbb-border-radius-infinity: 10000000em;
 
+    &:has(sbb-header[size='s']) {
+      --sbb-header-height: #{functions.px-to-rem-build(52)};
+    }
+
     @include mediaqueries.mq($from: medium) {
       // Header
       --sbb-header-height: var(--sbb-spacing-fixed-24x);
@@ -43,6 +47,10 @@
       // 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)};
+
+      &:has(sbb-header[size='s']) {
+        --sbb-header-height: var(--sbb-spacing-fixed-14x);
+      }
     }
   }
 }
@@ -116,6 +124,21 @@ sbb-breadcrumb-group:not(:defined) {
   pointer-events: all;
 }
 
+// Helper class for the application name and version in sbb-header.
+.sbb-header-info {
+  @include typo.text-xs--regular;
+
+  display: flex;
+  padding-inline: var(--sbb-spacing-fixed-4x);
+  gap: var(--sbb-spacing-fixed-1x);
+  align-items: baseline;
+
+  strong + * {
+    font-size: var(--sbb-font-size-text-xxs);
+    color: var(--sbb-color-granite);
+  }
+}
+
 // In smaller title font-sizes, the space after the title is smaller than the default paragraph space before.
 // Due to margin collapsing, the wrong paragraph space wins.
 // To prevent the mistakenly large gap, we reset the paragraph space.

package/core/styles/mixins/overlay.scss

@@ -137,7 +137,7 @@
   .sbb-gap-fix-corner#left {
     left: calc(($radius / 2) * -1);
 
-    :host([dir='rtl']) & {
+    :host(:dir(rtl)) & {
       right: calc(($radius / 2) * -1);
       left: unset;
     }
@@ -146,7 +146,7 @@
   .sbb-gap-fix-corner#right {
     right: calc(($radius / 2) * -1);
 
-    :host([dir='rtl']) & {
+    :host(:dir(rtl)) & {
       left: calc(($radius / 2) * -1);
       right: unset;
     }

package/core.css

@@ -1109,12 +1109,18 @@
   --sbb-overlay-default-z-index: 1000;
   --sbb-border-radius-infinity: 10000000em;
 }
+:root:has(sbb-header[size=s]) {
+  --sbb-header-height: 3.25rem;
+}
 @media (min-width: calc(52.5rem)) {
   :root {
     --sbb-header-height: var(--sbb-spacing-fixed-24x);
     --sbb-time-input-max-width: 4.0625rem;
     --sbb-time-input-s-max-width: 3.625rem;
   }
+  :root:has(sbb-header[size=s]) {
+    --sbb-header-height: var(--sbb-spacing-fixed-14x);
+  }
 }
 
 @font-face {
@@ -1265,6 +1271,23 @@ sbb-breadcrumb-group:not(:defined) {
   pointer-events: all;
 }
 
+.sbb-header-info {
+  --sbb-text-font-size: var(--sbb-font-size-text-xs);
+  font-family: var(--sbb-typo-font-family);
+  font-weight: normal;
+  line-height: var(--sbb-typo-line-height-body-text);
+  letter-spacing: var(--sbb-typo-letter-spacing-body-text);
+  font-size: var(--sbb-text-font-size);
+  display: flex;
+  padding-inline: var(--sbb-spacing-fixed-4x);
+  gap: var(--sbb-spacing-fixed-1x);
+  align-items: baseline;
+}
+.sbb-header-info strong + * {
+  font-size: var(--sbb-font-size-text-xxs);
+  color: var(--sbb-color-granite);
+}
+
 sbb-title + p {
   margin-block-start: 0;
 }