@sbb-esta/lyne-elements 1.9.0 → 1.11.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 { hostAttributes as k } from "./decorators.js";
-import { preventScrollOnSpacebarPress as v, EventEmitter as w } from "./eventing.js";
-import { getLocalName as f } from "./dom.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 = (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);
-  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 C = (i) => {
-  class s extends i {
+const p = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._disabled = !1;
     }
@@ -28,24 +28,40 @@ const C = (i) => {
       return !1;
     }
   }
-  return P([
-    o({ reflect: !0, type: Boolean })
-  ], s.prototype, "disabled"), s;
-}, J = (i) => {
-  class s extends C(i) {
+  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") && !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;
+}, W = (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")));
+      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);
-  return t && e && $(s, r, e), e;
+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 && O(s, r, e), e;
 };
-const R = (i) => {
-  const r = class r extends i {
+const A = (n) => {
+  const r = class r extends n {
     constructor() {
       super(...arguments), this._value = null, this.internals = this.attachInternals(), this.formDisabled = !1;
     }
@@ -97,8 +113,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.
@@ -138,20 +154,20 @@ const R = (i) => {
   r.formAssociated = !0;
   let s = r;
   return h([
-    o()
+    l()
   ], s.prototype, "name", 1), h([
-    o()
+    l()
   ], 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 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 && D(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 +188,17 @@ const D = (i) => {
       return !1;
     }
   }
-  return A([
-    o({ reflect: !0, type: Boolean })
+  return M([
+    l({ 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);
-  return t && e && M(s, r, e), e;
+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 && U(s, r, e), e;
 };
-const Q = (i) => {
-  let s = class extends C(D(R(i))) {
+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();
@@ -199,10 +215,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 +247,40 @@ const Q = (i) => {
       this.checked ? this.internals.setFormValue(this.value, `${this.checked}`) : this.internals.setFormValue(null);
     }
   };
-  return m([
-    o({
+  return _([
+    l({
       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([
-    k({
+  ], s.prototype, "checked", 1), s = _([
+    w({
       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)
+        }, 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) => {
-            d.removeEventListener("slotchange", n, a), d.assignedNodes().length && d.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
+          () => o.forEach((d) => {
+            d.removeEventListener("slotchange", i, a), d.assignedNodes().length && d.dispatchEvent(new Event("slotchange", { bubbles: !0 }));
           })
         ));
       }
@@ -290,21 +306,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", Z = (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 +341,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 +373,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) => {
-        var l;
+      return (this.listChildren.length ? this.listChildren : Array.from({ length: +(this.getAttribute(g) ?? 0) })).map((i, a) => {
+        var o;
         return {
-          name: `${g}-${a}`,
-          ariaHidden: ((l = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : l.includes(n.localName)) ?? !1
+          name: `${y}-${a}`,
+          ariaHidden: ((o = t == null ? void 0 : t.localNameVisualOnly) == null ? void 0 : o.includes(i.localName)) ?? !1
         };
       });
     }
@@ -371,38 +387,38 @@ 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 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 = (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);
-  return e && I(s, r, e), e;
+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 && F(s, r, e), e;
 };
-const Z = (i) => {
+const te = (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(
+      super(...arguments), this.color = "white", this.borderless = !1, this._panelConnected = new S(
         this,
         t.events.panelConnected,
         { bubbles: !0 }
@@ -415,14 +431,14 @@ const Z = (i) => {
     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;
-}, ee = (i) => {
-  class s extends i {
+}, se = (n) => {
+  class s extends n {
     constructor() {
       super(...arguments), this._updatePromise = Promise.resolve(), this._updateResolve = () => {
       };
@@ -439,17 +455,19 @@ 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}`;
+}, 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 {
-  C as SbbDisabledMixin,
-  J as SbbDisabledTabIndexActionMixin,
-  Q as SbbFormAssociatedCheckboxMixin,
-  R as SbbFormAssociatedMixin,
+  P as SbbDisabledInteractiveMixin,
+  p as SbbDisabledMixin,
+  Q as SbbDisabledTabIndexActionMixin,
+  W as SbbFocusableDisabledActionMixin,
+  Y as SbbFormAssociatedCheckboxMixin,
+  A as SbbFormAssociatedMixin,
   N as SbbHydrationMixin,
-  W as SbbNamedSlotListMixin,
-  Y as SbbNegativeMixin,
-  Z as SbbPanelMixin,
-  D as SbbRequiredMixin,
-  ee as SbbUpdateSchedulerMixin,
-  te as panelCommonStyle
+  Z as SbbNamedSlotListMixin,
+  ee as SbbNegativeMixin,
+  te as SbbPanelMixin,
+  L as SbbRequiredMixin,
+  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/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;