@sbb-esta/lyne-elements 3.0.0-next.0 → 3.0.0-next.2

package/core/mixins/panel-mixin.js

@@ -1,60 +1,59 @@
-var k = (t) => {
-  throw TypeError(t);
+var k = (e) => {
+  throw TypeError(e);
 };
-var I = (t, a, r) => a.has(t) || k("Cannot " + r);
-var h = (t, a, r) => (I(t, a, "read from private field"), r ? r.call(t) : a.get(t)), b = (t, a, r) => a.has(t) ? k("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), i = (t, a, r, p) => (I(t, a, "write to private field"), p ? p.call(t, r) : a.set(t, r), r);
+var I = (e, s, a) => s.has(e) || k("Cannot " + a);
+var h = (e, s, a) => (I(e, s, "read from private field"), a ? a.call(e) : s.get(e)), b = (e, s, a) => s.has(e) ? k("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(e) : s.set(e, a), i = (e, s, a, p) => (I(e, s, "write to private field"), p ? p.call(e, a) : s.set(e, a), a);
 import { __runInitializers as d, __esDecorate as _ } from "tslib";
 import { property as m } from "lit/decorators.js";
 import { forceType as w } from "../decorators.js";
 import { EventEmitter as j } from "../eventing.js";
-const q = (t) => (() => {
-  var n, l, c, o;
-  let r = t, p, f = [], x = [], g, S = [], y = [], v, z = [], C = [];
-  return o = class extends r {
+const q = (e) => (() => {
+  var n, l, c, r;
+  let a = e, p, f = [], x = [], g, S = [], y = [], v, z = [], C = [];
+  return r = class extends a {
     constructor() {
       super(...arguments);
       b(this, n);
       b(this, l);
       b(this, c);
-      i(this, n, d(this, f, "white")), i(this, l, (d(this, x), d(this, S, !1))), i(this, c, (d(this, y), d(this, z, ""))), this._panelConnected = (d(this, C), new j(this, o.events.panelConnected, { bubbles: !0 }));
+      i(this, n, d(this, f, "white")), i(this, l, (d(this, x), d(this, S, !1))), i(this, c, (d(this, y), d(this, z, ""))), this._panelConnected = (d(this, C), new j(this, r.events.panelConnected, { bubbles: !0 }));
     }
     /** The background color of the panel. */
     get color() {
       return h(this, n);
     }
-    set color(s) {
-      i(this, n, s);
+    set color(o) {
+      i(this, n, o);
     }
     /** Whether the unselected panel has a border. */
     get borderless() {
       return h(this, l);
     }
-    set borderless(s) {
-      i(this, l, s);
+    set borderless(o) {
+      i(this, l, o);
     }
     /** @internal used for accessibility label when in expansion panel */
     get expansionState() {
       return h(this, c);
     }
-    set expansionState(s) {
-      i(this, c, s);
+    set expansionState(o) {
+      i(this, c, o);
     }
     connectedCallback() {
-      var s, e;
-      super.connectedCallback(), this._panelConnected.emit(), (e = (s = this.closest) == null ? void 0 : s.call(this, "sbb-radio-button-group, sbb-checkbox-group")) == null || e.toggleAttribute("data-has-panel", !0);
+      super.connectedCallback(), this._panelConnected.emit(), this.closest?.("sbb-radio-button-group, sbb-checkbox-group")?.toggleAttribute("data-has-panel", !0);
     }
   }, n = new WeakMap(), l = new WeakMap(), c = new WeakMap(), (() => {
-    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    p = [m({ reflect: !0 })], g = [w(), m({ reflect: !0, type: Boolean })], v = [w(), m()], _(o, null, p, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, u) => {
-      e.color = u;
-    } }, metadata: s }, f, x), _(o, null, g, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (e) => "borderless" in e, get: (e) => e.borderless, set: (e, u) => {
-      e.borderless = u;
-    } }, metadata: s }, S, y), _(o, null, v, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (e) => "expansionState" in e, get: (e) => e.expansionState, set: (e, u) => {
-      e.expansionState = u;
-    } }, metadata: s }, z, C), s && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
-  })(), o.events = {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    p = [m({ reflect: !0 })], g = [w(), m({ reflect: !0, type: Boolean })], v = [w(), m()], _(r, null, p, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (t) => "color" in t, get: (t) => t.color, set: (t, u) => {
+      t.color = u;
+    } }, metadata: o }, f, x), _(r, null, g, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, u) => {
+      t.borderless = u;
+    } }, metadata: o }, S, y), _(r, null, v, { kind: "accessor", name: "expansionState", static: !1, private: !1, access: { has: (t) => "expansionState" in t, get: (t) => t.expansionState, set: (t, u) => {
+      t.expansionState = u;
+    } }, metadata: o }, z, C), o && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), r.events = {
     panelConnected: "panelConnected"
-  }, o;
+  }, r;
 })();
 export {
   q as SbbPanelMixin

package/core/mixins/readonly-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"readonly-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/readonly-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAKtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,SAAgB,QAAQ,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACxE,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAiB9C,CAAC"}
+{"version":3,"file":"readonly-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/readonly-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAGtC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,oBAAoB;IACvC,SAAgB,QAAQ,EAAE,OAAO,CAAC;CACnC;AAED;;GAEG;AAEH,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EACxE,YAAY,CAAC,KACZ,mBAAmB,CAAC,oBAAoB,CAAC,GAAG,CAgB9C,CAAC"}

package/core/mixins/readonly-mixin.js

@@ -1,16 +1,15 @@
-import { __esDecorate as i, __runInitializers as d } from "tslib";
+import { __esDecorate as o, __runInitializers as d } from "tslib";
 import { property as u } from "lit/decorators.js";
-import { forceType as y } from "../decorators/force-type.js";
-const f = (s) => (() => {
+const b = (s) => (() => {
   var e;
   let r = s, l = [], n;
   return e = class extends r {
     /**
      * Whether the component is readonly.
+     * @default false
      */
-    set readOnly(a) {
-      var t;
-      this.toggleAttribute("readonly", a), (t = this.requestUpdate) == null || t.call(this);
+    set readOnly(t) {
+      this.toggleAttribute("readonly", !!t);
     }
     get readOnly() {
       return this.hasAttribute("readonly");
@@ -19,12 +18,12 @@ const f = (s) => (() => {
       super(...arguments), d(this, l);
     }
   }, (() => {
-    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    n = [y(), u({ type: Boolean, attribute: "readonly" })], i(e, null, n, { kind: "setter", name: "readOnly", static: !1, private: !1, access: { has: (t) => "readOnly" in t, set: (t, o) => {
-      t.readOnly = o;
-    } }, metadata: a }, null, l), a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a });
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    n = [u({ type: Boolean, attribute: "readonly" })], o(e, null, n, { kind: "setter", name: "readOnly", static: !1, private: !1, access: { has: (a) => "readOnly" in a, set: (a, i) => {
+      a.readOnly = i;
+    } }, metadata: t }, null, l), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), e;
 })();
 export {
-  f as SbbReadonlyMixin
+  b as SbbReadonlyMixin
 };

package/core/mixins.js

@@ -1,36 +1,38 @@
 import { SbbAnimationCompleteMixin as r } from "./mixins/animation-complete-mixin.js";
 import { SbbDisabledInteractiveMixin as a, SbbDisabledMixin as t, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
-import { SbbElementInternalsMixin as c } from "./mixins/element-internals-mixin.js";
-import { SbbFormAssociatedCheckboxMixin as x } from "./mixins/form-associated-checkbox-mixin.js";
-import { SbbFormAssociatedInputMixin as v } from "./mixins/form-associated-input-mixin.js";
-import { SbbFormAssociatedMixin as f } from "./mixins/form-associated-mixin.js";
-import { SbbFormAssociatedRadioButtonMixin as g, radioButtonRegistry as S } from "./mixins/form-associated-radio-button-mixin.js";
-import { SbbHydrationMixin as M } from "./mixins/hydration-mixin.js";
-import { SbbNamedSlotListMixin as y } from "./mixins/named-slot-list-mixin.js";
-import { SbbNegativeMixin as C } from "./mixins/negative-mixin.js";
-import { SbbPanelMixin as I } from "./mixins/panel-mixin.js";
-import { SbbRequiredMixin as D } from "./mixins/required-mixin.js";
-import { SbbReadonlyMixin as N } from "./mixins/readonly-mixin.js";
-import { SbbUpdateSchedulerMixin as q } from "./mixins/update-scheduler-mixin.js";
+import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as x } from "./mixins/element-internals-mixin.js";
+import { SbbFormAssociatedCheckboxMixin as v } from "./mixins/form-associated-checkbox-mixin.js";
+import { SbbFormAssociatedInputMixin as f } from "./mixins/form-associated-input-mixin.js";
+import { SbbFormAssociatedMixin as g } from "./mixins/form-associated-mixin.js";
+import { SbbFormAssociatedRadioButtonMixin as k, radioButtonRegistry as M } from "./mixins/form-associated-radio-button-mixin.js";
+import { SbbHydrationMixin as y } from "./mixins/hydration-mixin.js";
+import { SbbNamedSlotListMixin as C } from "./mixins/named-slot-list-mixin.js";
+import { SbbNegativeMixin as I } from "./mixins/negative-mixin.js";
+import { SbbPanelMixin as D } from "./mixins/panel-mixin.js";
+import { SbbRequiredMixin as B } from "./mixins/required-mixin.js";
+import { SbbReadonlyMixin as _ } from "./mixins/readonly-mixin.js";
+import { SbbUpdateSchedulerMixin as z } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const n = e`: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-duration, 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) var(--sbb-focus-outline-style, 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}`;
+const n = e`: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-duration, 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;inset: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) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset: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 {
   r as SbbAnimationCompleteMixin,
   a as SbbDisabledInteractiveMixin,
   t as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
   c as SbbElementInternalsMixin,
-  x as SbbFormAssociatedCheckboxMixin,
-  v as SbbFormAssociatedInputMixin,
-  f as SbbFormAssociatedMixin,
-  g as SbbFormAssociatedRadioButtonMixin,
-  M as SbbHydrationMixin,
-  y as SbbNamedSlotListMixin,
-  C as SbbNegativeMixin,
-  I as SbbPanelMixin,
-  N as SbbReadonlyMixin,
-  D as SbbRequiredMixin,
-  q as SbbUpdateSchedulerMixin,
+  v as SbbFormAssociatedCheckboxMixin,
+  f as SbbFormAssociatedInputMixin,
+  g as SbbFormAssociatedMixin,
+  k as SbbFormAssociatedRadioButtonMixin,
+  y as SbbHydrationMixin,
+  C as SbbNamedSlotListMixin,
+  I as SbbNegativeMixin,
+  D as SbbPanelMixin,
+  _ as SbbReadonlyMixin,
+  B as SbbRequiredMixin,
+  z as SbbUpdateSchedulerMixin,
+  p as appendAriaElements,
   n as panelCommonStyle,
-  S as radioButtonRegistry
+  M as radioButtonRegistry,
+  x as removeAriaElements
 };

package/core/overlay/position.js

@@ -1,6 +1,6 @@
-function w(t) {
-  const o = window.getComputedStyle(t), c = o.display, e = parseInt(o.maxHeight, 10).toString();
-  if (c !== "none" && e !== "0")
+function b(t) {
+  const o = window.getComputedStyle(t), l = o.display, h = parseInt(o.maxHeight, 10).toString();
+  if (l !== "none" && h !== "0")
     return {
       scrollHeight: t.scrollHeight,
       clientHeight: t.clientHeight,
@@ -10,31 +10,31 @@ function w(t) {
       offsetWidth: t.offsetWidth
     };
   t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const v = t.scrollHeight, i = t.clientHeight, g = t.offsetHeight, m = t.scrollWidth, l = t.clientWidth, n = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: v, clientHeight: i, offsetHeight: g, scrollWidth: m, clientWidth: l, offsetWidth: n };
+  const y = t.scrollHeight, e = t.clientHeight, g = t.offsetHeight, a = t.scrollWidth, n = t.clientWidth, i = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: y, clientHeight: e, offsetHeight: g, scrollWidth: a, clientWidth: n, offsetWidth: i };
 }
-function x(t, o) {
+function w(t, o) {
   if (!t || !o)
     return !1;
-  const c = t.getBoundingClientRect();
-  return c.top <= o.clientY && o.clientY <= c.top + c.height && c.left <= o.clientX && o.clientX <= c.left + c.width;
+  const l = t.getBoundingClientRect();
+  return l.top <= o.clientY && o.clientY <= l.top + l.height && l.left <= o.clientX && o.clientX <= l.left + l.width;
 }
-function O(t, o, c, e) {
-  const i = (e == null ? void 0 : e.verticalOffset) || 0, g = (e == null ? void 0 : e.horizontalOffset) || 0, m = (e == null ? void 0 : e.responsiveHeight) || !1, l = o.getBoundingClientRect(), n = w(t), d = l.left, H = l.top, r = document.documentElement.clientWidth - (d + l.width), a = H - i, W = document.documentElement.clientHeight - (H + l.height + i);
-  let h = d, u = H + l.height + i, f = n.offsetWidth - l.width;
-  const s = { horizontal: "start", vertical: "below" };
-  let b = `${W - i}px`;
-  e != null && e.centered && d - 16 + l.width / 2 > n.offsetWidth / 2 && r - 16 > f / 2 && (h -= f /= 2, s.horizontal = "center"), r < f && d > f && (h = h - f, s.horizontal = "end"), g && s.horizontal !== "center" && l.width / 2 < g && (h += g * (s.horizontal === "start" ? -1 : 1)), (d < f && r < f || document.documentElement.clientWidth < n.offsetWidth) && (h = document.documentElement.clientWidth / 2 - n.offsetWidth / 2), (W - i < n.scrollHeight && a - i > (m ? n.clientHeight : n.scrollHeight) || a > W && W - i < n.clientHeight && !m) && (u = a < n.scrollHeight ? u - l.height - a - i : H - n.clientHeight - i, b = `${a - i}px`, s.vertical = "above");
-  const y = c.getBoundingClientRect();
-  return y.left < 0 && (h -= y.left), y.top < 0 && (u -= y.top), {
-    top: u,
-    left: h,
-    maxHeight: b,
-    alignment: s
+function x(t, o, l, h) {
+  const e = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, a = h?.responsiveHeight || !1, n = o.getBoundingClientRect(), i = b(t), d = n.left, m = n.top, p = document.documentElement.clientWidth - (d + n.width), r = m - e, H = document.documentElement.clientHeight - (m + n.height + e);
+  let c = d, W = m + n.height + e, s = i.offsetWidth - n.width;
+  const f = { horizontal: "start", vertical: "below" };
+  let v = `${H - e}px`;
+  h?.centered && d - 16 + n.width / 2 > i.offsetWidth / 2 && p - 16 > s / 2 && (c -= s /= 2, f.horizontal = "center"), p < s && d > s && (c = c - s, f.horizontal = "end"), g && f.horizontal !== "center" && n.width / 2 < g && (c += g * (f.horizontal === "start" ? -1 : 1)), (d < s && p < s || document.documentElement.clientWidth < i.offsetWidth) && (c = document.documentElement.clientWidth / 2 - i.offsetWidth / 2), (H - e < i.scrollHeight && r - e > (a ? i.clientHeight : i.scrollHeight) || r > H && H - e < i.clientHeight && !a) && (W = r < i.scrollHeight ? W - n.height - r - e : m - i.clientHeight - e, v = `${r - e}px`, f.vertical = "above");
+  const u = l.getBoundingClientRect();
+  return u.left < 0 && (c -= u.left), u.top < 0 && (W -= u.top), {
+    top: W,
+    left: c,
+    maxHeight: v,
+    alignment: f
   };
 }
 export {
-  O as getElementPosition,
-  w as getElementRectangle,
-  x as isEventOnElement
+  x as getElementPosition,
+  b as getElementRectangle,
+  w as isEventOnElement
 };

package/core/styles/core/mediaqueries.scss

@@ -4,7 +4,7 @@
 @use 'sass:math';
 @use 'sass:meta';
 @use 'sass:string';
-@use '../node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables.scss' as sbb-tokens;
+@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables.scss' as sbb-tokens;
 
 $mq-breakpoints: (
   zero: sbb-tokens.$sbb-breakpoint-zero-min,

package/core/styles/core.scss

@@ -1,5 +1,4 @@
-@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as
-  sbb-css-tokens;
+@use '@sbb-esta/lyne-design-tokens/dist/scss/sbb-variables_css--mixin.scss' as sbb-css-tokens;
 @use './core/mediaqueries';
 @use './core/functions';
 @use './mixins/a11y';
@@ -7,6 +6,7 @@
 @use './mixins/helpers';
 @use './mixins/inputs';
 @use './mixins/scrollbar';
+@use './mixins/shadows';
 @use './mixins/typo';
 
 @include helpers.box-sizing;
@@ -169,13 +169,13 @@ sbb-form-field {
   }
 
   &:has(
-      :is(
-        :is(input, textarea, select):user-invalid,
-        :is(:state(interacted), [state--interacted]):invalid,
-        .ng-touched.ng-invalid,
-        .sbb-invalid
-      )
-    ),
+    :is(
+      :is(input, textarea, select):user-invalid,
+      :is(:state(interacted), [state--interacted]):invalid,
+      .ng-touched.ng-invalid,
+      .sbb-invalid
+    )
+  ),
   :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
     --sbb-form-field-border-color: var(--sbb-color-red125);
     --sbb-form-field-text-color: var(--sbb-color-red125);
@@ -194,32 +194,34 @@ sbb-form-field {
 
 // Hiding components until they are instantiated
 :is(
-    sbb-autocomplete,
-    sbb-autocomplete-grid,
-    sbb-dialog,
-    sbb-menu,
-    sbb-navigation,
-    sbb-navigation-section,
-    sbb-overlay,
-    sbb-popover,
-    sbb-select,
-    sbb-skiplink-list,
-    sbb-toast
-  ):not(:defined) {
+  sbb-autocomplete,
+  sbb-autocomplete-grid,
+  sbb-datepicker,
+  sbb-dialog,
+  sbb-menu,
+  sbb-navigation,
+  sbb-navigation-section,
+  sbb-overlay,
+  sbb-popover,
+  sbb-select,
+  sbb-skiplink-list,
+  sbb-toast
+):not(:defined) {
   display: none;
 }
 
 // Hide popover artifacts
 [popover]:where(
-    sbb-autocomplete,
-    sbb-autocomplete-grid,
-    sbb-dialog,
-    sbb-menu,
-    sbb-navigation,
-    sbb-overlay,
-    sbb-popover,
-    sbb-toast
-  ) {
+  sbb-autocomplete,
+  sbb-autocomplete-grid,
+  sbb-datepicker,
+  sbb-dialog,
+  sbb-menu,
+  sbb-navigation,
+  sbb-overlay,
+  sbb-popover,
+  sbb-toast
+) {
   margin: 0;
   padding: 0;
   border: none;
@@ -462,11 +464,11 @@ sbb-sidebar-container:is(
 
 // Toggles visibility of backdrop if there is an affected sidebar inside the container.
 sbb-sidebar-container:has(
-    > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
-        [data-state='opening'],
-        [data-state='opened']
-      )
-  ) {
+  > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
+      [data-state='opening'],
+      [data-state='opened']
+    )
+) {
   --sbb-sidebar-container__backdrop-visibility: visible;
   --sbb-sidebar-container-backdrop-opacity: 0.4;
 }
@@ -511,8 +513,6 @@ sbb-header + :where(sbb-sidebar-container, sbb-icon-sidebar-container) {
 
 sbb-toggle:has(:focus-visible) {
   @include a11y.focus-outline;
-
-  --sbb-focus-outline-offset: #{functions.px-to-rem-build(5)};
 }
 
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s']
@@ -525,3 +525,36 @@ sbb-toggle:has(:focus-visible) {
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] sbb-optgroup {
   --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
 }
+
+sbb-dialog-actions {
+  sbb-dialog[negative] & {
+    --sbb-dialog-actions-border-color: var(--sbb-color-iron);
+  }
+
+  sbb-dialog:is(:state(overflows), [state--overflows]) & {
+    --sbb-dialog-actions-border-color: transparent;
+
+    @include shadows.shadow-level-9-soft;
+  }
+
+  sbb-dialog[negative]:is(:state(overflows), [state--overflows]) & {
+    @include shadows.shadow-level-9-soft-negative;
+  }
+}
+
+sbb-notification:has(sbb-title) {
+  --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-5);
+  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-titles);
+
+  &[size='s'] {
+    --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-6);
+    --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-body-text);
+  }
+}
+
+sbb-status:has(sbb-title) {
+  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
+  --_sbb-status-text-color-override: var(--sbb-color-granite);
+  --_sbb-status-title-font-size: var(--sbb-font-size-title-5);
+  --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
+}

package/core/styles/mixins/table.scss

@@ -2,7 +2,7 @@
 
 // SBB table mixin
 // Notes:
-// We cannot use `border-collapse` because it is not compatible with the `border-radius` property.
+// We cannot use `border-collapse` because in sticky variants it gets visually broken.
 // Therefore, we have to build the grid avoiding double borders.
 @mixin table {
   @include table--m;
@@ -11,7 +11,6 @@
   & {
     --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
     --sbb-table-border-color: var(--sbb-color-cloud);
-    --sbb-table-border-radius: var(--sbb-border-radius-4x);
     --sbb-table-background-color: var(--sbb-color-white);
     --sbb-table-row-striped-color: var(--sbb-color-milk);
     --sbb-table-color: inherit;
@@ -35,16 +34,6 @@
         & > th {
           border-block-start: var(--sbb-table-border);
         }
-
-        // Border radius on top-left corner
-        & > th:first-of-type {
-          border-start-start-radius: var(--sbb-table-border-radius);
-        }
-
-        // Border radius on top-right corner
-        & > th:last-of-type {
-          border-start-end-radius: var(--sbb-table-border-radius);
-        }
       }
 
       & > th {
@@ -66,18 +55,6 @@
           border-inline-start: var(--sbb-table-border);
         }
       }
-
-      &:last-of-type {
-        // Border radius on bottom-left corner
-        & > td:first-of-type {
-          border-end-start-radius: var(--sbb-table-border-radius);
-        }
-
-        // Border radius on bottom-right corner
-        & > td:last-of-type {
-          border-end-end-radius: var(--sbb-table-border-radius);
-        }
-      }
     }
   }
 

package/core/styles/mixins/typo.scss

@@ -61,7 +61,6 @@
   @include title($exclude-spacing);
 
   --sbb-title-font-size: var(--sbb-font-size-title-5);
-  --sbb-title-line-height: var(--sbb-typo-line-height-body-text);
 
   @if not($exclude-spacing) {
     --sbb-title-margin-block-end: var(--sbb-spacing-fixed-2x);

package/core/testing/event-spy.js

@@ -41,10 +41,8 @@ class a {
     return e.promise.then(() => clearTimeout(i)), e.promise;
   }
   _listenForEvent() {
-    var e;
-    (e = this._target) == null || e.addEventListener(this._event, (s) => {
-      var t;
-      this._events.push(s), this._count++, (t = this._promiseEventMap.get(this.count)) == null || t.resolve(s);
+    this._target?.addEventListener(this._event, (e) => {
+      this._events.push(e), this._count++, this._promiseEventMap.get(this.count)?.resolve(e);
     }, this._options ?? void 0);
   }
 }

package/core/testing/wait-for-image-ready.js

@@ -1,18 +1,17 @@
-import { isSafari as m } from "../dom.js";
-async function s(o, n = 2 * 1e3) {
-  var i;
-  const e = o.localName === "sbb-image" ? ((i = o.shadowRoot) == null ? void 0 : i.querySelector(".sbb-image__img")) ?? null : o;
+import { isSafari as r } from "../dom.js";
+async function d(o, m = 2 * 1e3) {
+  const e = o.localName === "sbb-image" ? o.shadowRoot?.querySelector(".sbb-image__img") ?? null : o;
   if (!e)
     throw new Error("img tag not found");
-  e.complete ? m && await e.decode() : await new Promise((t, a) => {
-    const r = setTimeout(() => a("image loading timeout"), n);
+  e.complete ? r && await e.decode() : await new Promise((i, t) => {
+    const a = setTimeout(() => t("image loading timeout"), m);
     e.addEventListener("load", () => {
-      clearTimeout(r), !e.complete || m ? e.decode().then(() => t()) : t();
+      clearTimeout(a), !e.complete || r ? e.decode().then(() => i()) : i();
     }), e.addEventListener("error", () => {
-      clearTimeout(r), a("image error");
+      clearTimeout(a), t("image error");
     });
   });
 }
 export {
-  s as waitForImageReady
+  d as waitForImageReady
 };

package/core/testing/wait-for-render.js

@@ -1,15 +1,14 @@
-const n = (o) => !!o.updateComplete, i = Promise.resolve(), m = async (o) => {
-  var r, l;
+const l = (o) => !!o.updateComplete, a = Promise.resolve(), n = async (o) => {
   const e = await o;
-  (l = (r = e.parentElement ?? e).querySelectorAll) == null || l.call(r, "[defer-hydration]").forEach((t) => t.removeAttribute("defer-hydration"));
-  const a = [e, ...e.querySelectorAll("*")].filter(n).map((t) => [
+  (e.parentElement ?? e).querySelectorAll?.("[defer-hydration]").forEach((t) => t.removeAttribute("defer-hydration"));
+  const r = [e, ...e.querySelectorAll("*")].filter(l).map((t) => [
     t.updateComplete,
-    t.hydrationComplete ?? i,
-    m(t.renderRoot)
+    t.hydrationComplete ?? a,
+    n(t.renderRoot)
   ]).flat(1 / 0);
-  return await Promise.all(a), e;
+  return await Promise.all(r), e;
 };
 export {
-  n as isReactiveElement,
-  m as waitForLitRender
+  l as isReactiveElement,
+  n as waitForLitRender
 };

package/core.css

@@ -1338,6 +1338,7 @@ sbb-form-field:has(:is(:is(input, textarea, select):user-invalid,
 
 :is(sbb-autocomplete,
 sbb-autocomplete-grid,
+sbb-datepicker,
 sbb-dialog,
 sbb-menu,
 sbb-navigation,
@@ -1352,6 +1353,7 @@ sbb-toast):not(:defined) {
 
 [popover]:where(sbb-autocomplete,
 sbb-autocomplete-grid,
+sbb-datepicker,
 sbb-dialog,
 sbb-menu,
 sbb-navigation,
@@ -1571,7 +1573,6 @@ sbb-form-field .sbb-select-trigger {
 sbb-toggle:has(:focus-visible) {
   outline-offset: var(--sbb-focus-outline-offset);
   outline: var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);
-  --sbb-focus-outline-offset: 0.3125rem;
 }
 
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] :where(sbb-option, sbb-autocomplete-grid-option) {
@@ -1582,4 +1583,31 @@ sbb-toggle:has(:focus-visible) {
 
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
   --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+}
+
+sbb-dialog[negative] sbb-dialog-actions {
+  --sbb-dialog-actions-border-color: var(--sbb-color-iron);
+}
+sbb-dialog:is(:state(overflows), [state--overflows]) sbb-dialog-actions {
+  --sbb-dialog-actions-border-color: transparent;
+  box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-1-color);
+}
+sbb-dialog[negative]:is(:state(overflows), [state--overflows]) sbb-dialog-actions {
+  box-shadow: var(--sbb-shadow-elevation-level-9-shadow-2-offset-x) var(--sbb-shadow-elevation-level-9-shadow-2-offset-y) var(--sbb-shadow-elevation-level-9-shadow-2-blur) var(--sbb-shadow-elevation-level-9-shadow-2-spread) var(--sbb-shadow-elevation-level-9-soft-negative-2-color), var(--sbb-shadow-elevation-level-9-shadow-1-offset-x) var(--sbb-shadow-elevation-level-9-shadow-1-offset-y) var(--sbb-shadow-elevation-level-9-shadow-1-blur) var(--sbb-shadow-elevation-level-9-shadow-1-spread) var(--sbb-shadow-elevation-level-9-soft-negative-1-color);
+}
+
+sbb-notification:has(sbb-title) {
+  --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-5);
+  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-titles);
+}
+sbb-notification:has(sbb-title)[size=s] {
+  --_sbb-notification-icon-authoritative-font-size: var(--sbb-font-size-title-6);
+  --_sbb-notification-icon-authoritative-line-height: var(--sbb-typo-line-height-body-text);
+}
+
+sbb-status:has(sbb-title) {
+  --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
+  --_sbb-status-text-color-override: var(--sbb-color-granite);
+  --_sbb-status-title-font-size: var(--sbb-font-size-title-5);
+  --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
 }