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

package/sidebar/sidebar-container/sidebar-container.component.js

@@ -1,81 +1,77 @@
-import { __esDecorate as S, __runInitializers as g } from "tslib";
-import { css as C, LitElement as k, isServer as b, html as A } from "lit";
-import { customElement as E } from "lit/decorators.js";
+import { __esDecorate as _, __runInitializers as S } from "tslib";
+import { css as C, LitElement as y, isServer as d, html as g } from "lit";
+import { customElement as k } from "lit/decorators.js";
 import { sidebarContainerCommonStyle as O } from "../common.js";
-const W = C`:host{display:block;overflow:hidden;--sbb-sidebar-container-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sidebar-container-animation-easing: var(--sbb-animation-easing);--sbb-sidebar-container-backdrop-opacity: 0;--sbb-sidebar-container__backdrop-visibility: hidden;--sbb-sidebar-container-backdrop-animation-duration: var( --sbb-sidebar-container-animation-duration )}@media (forced-colors: active){:host{--sbb-sidebar-container-backdrop-opacity: .5}}.sbb-sidebar-container-backdrop{position:absolute;top:0;right:0;bottom:0;left:0;visibility:var(--sbb-sidebar-container__backdrop-visibility);opacity:var(--sbb-sidebar-container-backdrop-opacity);background-color:var(--sbb-color-black);z-index:3;transition-duration:var(--sbb-sidebar-container-backdrop-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:opacity,visibility}`, o = /* @__PURE__ */ new Set();
-let s;
-const w = 320;
-let L = (() => {
+const A = C`:host{display:block;overflow:hidden;--sbb-sidebar-container-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-sidebar-container-animation-easing: var(--sbb-animation-easing);--sbb-sidebar-container-backdrop-opacity: 0;--sbb-sidebar-container__backdrop-visibility: hidden;--sbb-sidebar-container-backdrop-animation-duration: var( --sbb-sidebar-container-animation-duration )}@media (forced-colors: active){:host{--sbb-sidebar-container-backdrop-opacity: .5}}.sbb-sidebar-container-backdrop{position:absolute;inset:0;visibility:var(--sbb-sidebar-container__backdrop-visibility);opacity:var(--sbb-sidebar-container-backdrop-opacity);background-color:var(--sbb-color-black);z-index:3;transition-duration:var(--sbb-sidebar-container-backdrop-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);transition-property:opacity,visibility}`, r = /* @__PURE__ */ new Set();
+let c;
+const E = 320;
+let D = (() => {
   var i;
-  let _ = [E("sbb-sidebar-container")], l, m = [], a, u = k;
-  return i = class extends u {
+  let f = [k("sbb-sidebar-container")], b, l = [], a, m = y;
+  return i = class extends m {
     constructor() {
       super(...arguments), this._forcedClosedSidebars = /* @__PURE__ */ new WeakSet();
     }
     /** The sidebar children. */
     get sidebars() {
-      var t;
-      return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, ":scope > sbb-sidebar")) ?? []);
+      return Array.from(this.querySelectorAll?.(":scope > sbb-sidebar") ?? []);
     }
     /** The sidebar child with the `start` position. */
     get start() {
-      var t;
-      return (t = this.querySelector) == null ? void 0 : t.call(this, ":scope > sbb-sidebar:not([position='end'])");
+      return this.querySelector?.(":scope > sbb-sidebar:not([position='end'])");
     }
     /** The sidebar child with the `end` position. */
     get end() {
-      var t;
-      return (t = this.querySelector) == null ? void 0 : t.call(this, ":scope > sbb-sidebar[position='end']");
+      return this.querySelector?.(":scope > sbb-sidebar[position='end']");
     }
     connectedCallback() {
-      super.connectedCallback(), s ?? (s = !b && new ResizeObserver(() => this._handleWidthChange())), !b && o.size === 0 && s.observe(document == null ? void 0 : document.documentElement), o.add(this), this._handleWidthChange();
+      super.connectedCallback(), c ??= !d && new ResizeObserver(() => this._handleWidthChange()), !d && r.size === 0 && c.observe(document?.documentElement), r.add(this), this._handleWidthChange();
     }
     disconnectedCallback() {
-      super.disconnectedCallback(), o.delete(this), o.size === 0 && (s == null || s.disconnect());
+      super.disconnectedCallback(), r.delete(this), r.size === 0 && c?.disconnect();
     }
     firstUpdated(t) {
       super.firstUpdated(t), this._handleWidthChange();
     }
     _handleWidthChange() {
-      Array.from(o).sort((t, r) => t.compareDocumentPosition(r) & Node.DOCUMENT_POSITION_FOLLOWING).forEach((t) => t._calculateSpaceState());
+      Array.from(r).sort((t, s) => t.compareDocumentPosition(s) & Node.DOCUMENT_POSITION_FOLLOWING).forEach((t) => t._calculateSpaceState());
     }
     /**
      * Closes and opens sidebars depending on available width
      * of the container and its parent container.
      */
     async _calculateSpaceState() {
-      var n, v;
-      if (b)
+      if (d)
         return;
-      const t = (v = (n = this.parentElement) == null ? void 0 : n.closest) == null ? void 0 : v.call(n, "sbb-sidebar-container"), r = (t == null ? void 0 : t.sidebars) ?? [];
-      for (const e of r)
+      const s = this.parentElement?.closest?.("sbb-sidebar-container")?.sidebars ?? [];
+      for (const e of s)
         await e.updateComplete.then(() => e.animationComplete);
-      const h = this.offsetWidth ?? 0;
-      if (h === 0)
+      const u = this.offsetWidth ?? 0;
+      if (u === 0)
         return;
-      const p = this.sidebars, f = r.some((e) => e.hasAttribute("data-mode-over-forced")) ?? !1, y = p.filter((e) => e.mode === "side").reduce((e, c) => e + (c.offsetWidth ?? 0), 0), d = h - y < w;
+      const p = this.sidebars, h = s.some((e) => e.hasAttribute("data-mode-over-forced")) ?? !1, v = p.filter((e) => e.mode === "side").reduce((e, n) => e + (n.offsetWidth ?? 0), 0), o = u - v < E;
       for (const e of p) {
-        const c = e.hasAttribute("data-mode-over-forced");
-        e.toggleAttribute("data-mode-over-forced", d), e.mode === "side" && ((d || f) && e.opened && !c ? (e.isOpen && !e.hasAttribute("data-skip-animation") && e.toggleAttribute("data-mode-over-forced-closing", !0), e.opened = !1, this._forcedClosedSidebars.add(e), e.hasAttribute("data-mode-over-forced-closing") && e.updateComplete.then(() => e.animationComplete).then(() => e.removeAttribute("data-mode-over-forced-closing"))) : (
+        const n = e.hasAttribute("data-mode-over-forced");
+        e.toggleAttribute("data-mode-over-forced", o), e.mode === "side" && ((o || h) && e.opened && !n ? (e.isOpen && !e.hasAttribute("data-skip-animation") && e.toggleAttribute("data-mode-over-forced-closing", !0), e.opened = !1, this._forcedClosedSidebars.add(e), e.hasAttribute("data-mode-over-forced-closing") && e.updateComplete.then(() => e.animationComplete).then(() => e.removeAttribute("data-mode-over-forced-closing"))) : (
           // We have to open the sidebar when the remaining width of the sidebar and the parent container
           // is above the minimum.
           // We only programmatically open the sidebar when the cause of closing was this logic.
-          !d && !f && this._forcedClosedSidebars.has(e) && (e.cedeFocus(), e.opened = !0, this._forcedClosedSidebars.delete(e))
+          !o && !h && this._forcedClosedSidebars.has(e) && (e.cedeFocus(), e.opened = !0, this._forcedClosedSidebars.delete(e))
         ));
       }
     }
     render() {
-      return A`<div
+      return g`<div
         class="sbb-sidebar-container-backdrop"
         @click=${() => this.sidebars.forEach((t) => t.close())}
       ></div>
       <slot @slotchange=${() => this._handleWidthChange()}></slot>`;
     }
   }, a = i, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    S(null, l = { value: a }, _, { kind: "class", name: a.name, metadata: t }, null, m), a = l.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.styles = [O, W], g(a, m), a;
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(m[Symbol.metadata] ?? null) : void 0;
+    _(null, b = { value: a }, f, { kind: "class", name: a.name, metadata: t }, null, l), a = b.value, t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), i.styles = [O, A], S(a, l), a;
 })();
 export {
-  L as SbbSidebarContainerElement
+  D as SbbSidebarContainerElement
 };

package/sidebar/sidebar-title/sidebar-title.component.d.ts

@@ -2,6 +2,8 @@ import { CSSResultGroup } from 'lit';
 import { SbbTitleBase, SbbTitleLevel } from '../../title.js';
 /**
  * It displays the title of the sidebar. It has to be placed inside an `sbb-sidebar` element.
+ *
+ * @slot - Use the unnamed slot for the content of the sidebar-title.
  */
 export declare class SbbSidebarTitleElement extends SbbTitleBase {
     static styles: CSSResultGroup;

package/sidebar/sidebar-title/sidebar-title.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sidebar-title.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/sidebar/sidebar-title/sidebar-title.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIlE;;GAEG;AACH,qBAEM,sBAAuB,SAAQ,YAAY;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAgC;IAE7E,kBAAkB;IAClB,SAAsD,KAAK,EAAE,aAAa,CAAO;;IAOjE,iBAAiB,IAAI,IAAI;CAI1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"sidebar-title.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/sidebar/sidebar-title/sidebar-title.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAG1C,OAAO,EAAE,YAAY,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAC;AAIlE;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,YAAY;IAC/C,OAAuB,MAAM,EAAE,cAAc,CAAgC;IAE7E,kBAAkB;IAClB,SAAsD,KAAK,EAAE,aAAa,CAAO;;IAOjE,iBAAiB,IAAI,IAAI;CAI1C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/sidebar/sidebar-title/sidebar-title.component.js

@@ -1,38 +1,38 @@
-var d = (e) => {
+var _ = (e) => {
   throw TypeError(e);
 };
-var _ = (e, t, l) => t.has(e) || d("Cannot " + l);
-var v = (e, t, l) => (_(e, t, "read from private field"), l ? l.call(e) : t.get(e)), h = (e, t, l) => t.has(e) ? d("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, l), p = (e, t, l, s) => (_(e, t, "write to private field"), s ? s.call(e, l) : t.set(e, l), l);
-import { __esDecorate as f, __runInitializers as c } from "tslib";
-import { customElement as k, property as S } from "lit/decorators.js";
+var v = (e, t, l) => t.has(e) || _("Cannot " + l);
+var d = (e, t, l) => (v(e, t, "read from private field"), l ? l.call(e) : t.get(e)), h = (e, t, l) => t.has(e) ? _("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(e) : t.set(e, l), p = (e, t, l, s) => (v(e, t, "write to private field"), s ? s.call(e, l) : t.set(e, l), l);
+import { __esDecorate as f, __runInitializers as o } from "tslib";
+import { customElement as g, property as z } from "lit/decorators.js";
 import { SbbTitleBase as y } from "../../title.js";
-import { css as z } from "lit";
-const x = z`:host{display:block}.sbb-title{display:flex;-webkit-hyphens:auto;hyphens:auto;padding-block-start:calc(.5 * (var(--sbb-sidebar__close-button-size) - var(--sbb-title-font-size) * var(--sbb-title-line-height)));min-height:var(--sbb-sidebar__close-button-size);margin-block:0!important}`;
+import { css as k } from "lit";
+const x = k`:host{-webkit-hyphens:auto;hyphens:auto;padding-block-start:calc(.5 * (var(--sbb-sidebar__close-button-size) - var(--sbb-title-font-size) * var(--sbb-title-line-height)));min-height:var(--sbb-sidebar__close-button-size)}`;
 let C = (() => {
   var r, a;
-  let e = [k("sbb-sidebar-title")], t, l = [], s, n = y, b, m = [], u = [];
+  let e = [g("sbb-sidebar-title")], t, l = [], s, n = y, b, u = [], m = [];
   return a = class extends n {
     constructor() {
       super();
-      h(this, r, c(this, m, "2"));
-      c(this, u), this.visualLevel ?? (this.visualLevel = "5");
+      h(this, r, o(this, u, "2"));
+      o(this, m), this.visualLevel ??= "5";
     }
     /** Title level */
     get level() {
-      return v(this, r);
+      return d(this, r);
     }
     set level(i) {
       p(this, r, i);
     }
     connectedCallback() {
-      super.connectedCallback(), this.slot || (this.slot = "title-section");
+      super.connectedCallback(), this.slot ||= "title-section";
     }
   }, r = new WeakMap(), s = a, (() => {
     const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
-    b = [S({ reflect: !0 })], f(a, null, b, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (o) => "level" in o, get: (o) => o.level, set: (o, g) => {
-      o.level = g;
-    } }, metadata: i }, m, u), f(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: i }, null, l), s = t.value, i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), a.styles = [y.styles, x], c(s, l), s;
+    b = [z({ reflect: !0 })], f(a, null, b, { kind: "accessor", name: "level", static: !1, private: !1, access: { has: (c) => "level" in c, get: (c) => c.level, set: (c, S) => {
+      c.level = S;
+    } }, metadata: i }, u, m), f(null, t = { value: s }, e, { kind: "class", name: s.name, metadata: i }, null, l), s = t.value, i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), a.styles = [y.styles, x], o(s, l), s;
 })();
 export {
   C as SbbSidebarTitleElement

package/sidebar.js

@@ -1,4 +1,4 @@
-import { i as t, s as r, a as n } from "./icon-sidebar-button-common-DG8bnrBu.js";
+import { i as t, s as r, a as n } from "./icon-sidebar-button-common-CM-ueEhH.js";
 import { SbbIconSidebarElement as m } from "./sidebar/icon-sidebar/icon-sidebar.component.js";
 import { SbbIconSidebarButtonElement as a } from "./sidebar/icon-sidebar-button/icon-sidebar-button.component.js";
 import { SbbIconSidebarContainerElement as l } from "./sidebar/icon-sidebar-container/icon-sidebar-container.component.js";

package/skiplink-list/skiplink-list.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"skiplink-list.component.d.ts","sourceRoot":"","sources":["../../../src/elements/skiplink-list/skiplink-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EAEV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;;AAErB;;;;;;;;GAQG;AACH,qBAEM,sBAAuB,SAAQ,2BAGxB;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAA+C;IAE9F,uDAAuD;IACvD,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,oDAAoD;IACpD,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAW3E,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"skiplink-list.component.d.ts","sourceRoot":"","sources":["../../../src/elements/skiplink-list/skiplink-list.component.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,cAAc,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAMhG,OAAO,EAAyB,KAAK,gBAAgB,EAAE,MAAM,mBAAmB,CAAC;AACjF,OAAO,KAAK,EAAE,yBAAyB,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AACjF,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;;;;;GAQG;AACH,qBAEM,sBAAuB,SAAQ,2BAGxB;IACX,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,mBAA4B,mBAAmB,WAA+C;IAE9F,uDAAuD;IACvD,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,oDAAoD;IACpD,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,gBAAgB,CAAC,IAAI,CAAC,CAAC,GAAG,IAAI;cAW3E,MAAM,IAAI,cAAc;CAiB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/skiplink-list/skiplink-list.component.js

@@ -1,70 +1,67 @@
-var x = (t) => {
+var g = (t) => {
   throw TypeError(t);
 };
-var y = (t, e, s) => e.has(t) || x("Cannot " + s);
-var c = (t, e, s) => (y(t, e, "read from private field"), s ? s.call(t) : e.get(t)), h = (t, e, s) => e.has(t) ? x("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), b = (t, e, s, a) => (y(t, e, "write to private field"), a ? a.call(t, s) : e.set(t, s), s);
-import { __esDecorate as p, __runInitializers as d } from "tslib";
-import { css as C, LitElement as z, nothing as S, html as E } from "lit";
-import { customElement as I, property as L } from "lit/decorators.js";
-import { forceType as D, omitEmptyConverter as $ } from "../core/decorators.js";
-import { isLean as j } from "../core/dom.js";
+var L = (t, e, l) => e.has(t) || g("Cannot " + l);
+var v = (t, e, l) => (L(t, e, "read from private field"), l ? l.call(t) : e.get(t)), p = (t, e, l) => e.has(t) ? g("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, l), b = (t, e, l, a) => (L(t, e, "write to private field"), a ? a.call(t, l) : e.set(t, l), l);
+import { __esDecorate as h, __runInitializers as d } from "tslib";
+import { css as z, LitElement as S } from "lit";
+import { customElement as E, property as y } from "lit/decorators.js";
+import { unsafeStatic as C, html as I } from "lit/static-html.js";
+import { forceType as T, omitEmptyConverter as $ } from "../core/decorators.js";
+import { isLean as D } from "../core/dom.js";
 import { SbbNamedSlotListMixin as N } from "../core/mixins.js";
-import "../title.js";
-const O = C`*,:before,:after{box-sizing:border-box}:host{--sbb-skiplink-list-height: 0;--sbb-skiplink-list-overflow: hidden;--sbb-skiplink-list-background: transparent;--sbb-skiplink-list-border: unset;display:block}.sbb-skiplink-list__wrapper{position:fixed;inset-block-start:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-4x);z-index:calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-skiplink-list{list-style:none;margin:0;padding:0;font-size:inherit}.sbb-skiplink-list>:is(li,span){box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:list-item;height:var(--sbb-skiplink-list-height);overflow:var(--sbb-skiplink-list-overflow);border-radius:var(--sbb-border-radius-4x);background-color:var(--sbb-skiplink-list-background);border:var(--sbb-skiplink-list-border);width:fit-content}.sbb-skiplink-list>:is(li,span):focus-within{--sbb-skiplink-list-height: auto;--sbb-skiplink-list-overflow: visible;--sbb-skiplink-list-background: var(--sbb-color-black);--sbb-skiplink-list-border: var(--sbb-border-width-2x) solid var(--sbb-color-white)}::slotted([data-sbb-link]){--sbb-focus-outline-color: transparent;--sbb-link-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xxs)}`;
+const j = z`*,:before,:after{box-sizing:border-box}:host{--sbb-skiplink-list-height: 0;--sbb-skiplink-list-overflow: hidden;--sbb-skiplink-list-background: transparent;--sbb-skiplink-list-border: unset;display:block}.sbb-skiplink-list__wrapper{position:fixed;inset-block-start:var(--sbb-spacing-fixed-4x);inset-inline-start:var(--sbb-spacing-fixed-4x);z-index:calc(var(--sbb-skiplink-list-z-index, var(--sbb-overlay-default-z-index)) + 1)}.sbb-skiplink-list-title{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-skiplink-list{list-style:none;margin:0;padding:0;font-size:inherit}.sbb-skiplink-list>:is(li,span){box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);display:list-item;height:var(--sbb-skiplink-list-height);overflow:var(--sbb-skiplink-list-overflow);border-radius:var(--sbb-border-radius-4x);background-color:var(--sbb-skiplink-list-background);border:var(--sbb-skiplink-list-border);width:fit-content}.sbb-skiplink-list>:is(li,span):focus-within{--sbb-skiplink-list-height: auto;--sbb-skiplink-list-overflow: visible;--sbb-skiplink-list-background: var(--sbb-color-black);--sbb-skiplink-list-border: var(--sbb-border-width-2x) solid var(--sbb-color-white)}::slotted([data-sbb-link]){--sbb-focus-outline-color: transparent;--sbb-link-padding: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-responsive-xxs)}`;
 let J = (() => {
   var o, n, r;
-  let t = [I("sbb-skiplink-list")], e, s = [], a, k = N(z), u, f = [], m = [], w, _ = [], g = [];
+  let t = [E("sbb-skiplink-list")], e, l = [], a, k = N(S), f, u = [], m = [], w, _ = [], x = [];
   return r = class extends k {
     constructor() {
       super(...arguments);
-      h(this, o);
-      h(this, n);
-      this.listChildLocalNames = ["sbb-block-link", "sbb-block-link-button"], b(this, o, d(this, f, "")), b(this, n, (d(this, m), d(this, _, "2"))), d(this, g);
+      p(this, o);
+      p(this, n);
+      this.listChildLocalNames = ["sbb-block-link", "sbb-block-link-button"], b(this, o, d(this, u, "")), b(this, n, (d(this, m), d(this, _, "2"))), d(this, x);
     }
     /** The title text we want to place before the list. */
     get titleContent() {
-      return c(this, o);
+      return v(this, o);
     }
-    set titleContent(l) {
-      b(this, o, l);
+    set titleContent(i) {
+      b(this, o, i);
     }
     /** The semantic level of the title, e.g. 2 = h2. */
     get titleLevel() {
-      return c(this, n);
+      return v(this, n);
     }
-    set titleLevel(l) {
-      b(this, n, l);
+    set titleLevel(i) {
+      b(this, n, i);
     }
-    willUpdate(l) {
-      if (super.willUpdate(l), l.has("listChildren"))
-        for (const i of this.listChildren)
-          i.size = j() ? "xs" : "m", i.negative = !0;
+    willUpdate(i) {
+      if (super.willUpdate(i), i.has("listChildren"))
+        for (const s of this.listChildren)
+          s.size = D() ? "xs" : "m", s.negative = !0;
     }
     render() {
-      return E`
+      const i = `h${this.titleLevel || "2"}`;
+      return I`
       <div class="sbb-skiplink-list__wrapper">
-        <sbb-title
-          class="sbb-link-list-title"
-          level=${this.titleLevel || S}
-          visual-level="5"
-          visually-hidden
-          negative
+        <${C(i)}
+          class="sbb-skiplink-list-title"
           id="sbb-skiplink-list-title-id"
         >
           <slot name="title">${this.titleContent}</slot>
-        </sbb-title>
+        </${C(i)}>
         ${this.renderList({ ariaLabelledby: "sbb-skiplink-list-title-id" })}
       </div>
     `;
     }
   }, o = new WeakMap(), n = new WeakMap(), a = r, (() => {
-    const l = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    u = [D(), L({ attribute: "title-content", reflect: !0, converter: $ })], w = [L({ attribute: "title-level" })], p(r, null, u, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (i) => "titleContent" in i, get: (i) => i.titleContent, set: (i, v) => {
-      i.titleContent = v;
-    } }, metadata: l }, f, m), p(r, null, w, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (i) => "titleLevel" in i, get: (i) => i.titleLevel, set: (i, v) => {
-      i.titleLevel = v;
-    } }, metadata: l }, _, g), p(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: l }, null, s), a = e.value, l && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: l });
-  })(), r.styles = O, d(a, s), a;
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
+    f = [T(), y({ attribute: "title-content", reflect: !0, converter: $ })], w = [y({ attribute: "title-level" })], h(r, null, f, { kind: "accessor", name: "titleContent", static: !1, private: !1, access: { has: (s) => "titleContent" in s, get: (s) => s.titleContent, set: (s, c) => {
+      s.titleContent = c;
+    } }, metadata: i }, u, m), h(r, null, w, { kind: "accessor", name: "titleLevel", static: !1, private: !1, access: { has: (s) => "titleLevel" in s, get: (s) => s.titleLevel, set: (s, c) => {
+      s.titleLevel = c;
+    } }, metadata: i }, _, x), h(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: i }, null, l), a = e.value, i && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), r.styles = j, d(a, l), a;
 })();
 export {
   J as SbbSkiplinkListElement

package/slider/slider.component.js

@@ -2,7 +2,7 @@ var $ = (t) => {
   throw TypeError(t);
 };
 var C = (t, i, r) => i.has(t) || $("Cannot " + r);
-var _ = (t, i, r) => (C(t, i, "read from private field"), r ? r.call(t) : i.get(t)), f = (t, i, r) => i.has(t) ? $("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, r), m = (t, i, r, n) => (C(t, i, "write to private field"), n ? n.call(t, r) : i.set(t, r), r);
+var _ = (t, i, r) => (C(t, i, "read from private field"), r ? r.call(t) : i.get(t)), f = (t, i, r) => i.has(t) ? $("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(t) : i.set(t, r), v = (t, i, r, n) => (C(t, i, "write to private field"), n ? n.call(t, r) : i.set(t, r), r);
 import { __esDecorate as o, __runInitializers as c } from "tslib";
 import { css as T, LitElement as O, nothing as p, html as g } from "lit";
 import { customElement as U, property as h } from "lit/decorators.js";
@@ -11,22 +11,21 @@ import { hostAttributes as F, forceType as D } from "../core/decorators.js";
 import { EventEmitter as R, forwardEvent as G } from "../core/eventing.js";
 import { SbbDisabledMixin as L, SbbReadonlyMixin as P, SbbFormAssociatedMixin as j, SbbElementInternalsMixin as H } from "../core/mixins.js";
 import "../icon.js";
-const K = T`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;top:0;right:0;bottom:0;left:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible) .sbb-slider__knob{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-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
+const K = T`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{outline:none!important;display:inline-block;min-width:9.375rem;width:min(25rem,100%);--sbb-slider-line-height: .25rem;--sbb-slider-value-fraction: 0;--sbb-slider-knob-size: 1.75rem;--sbb-slider-knob-size-active: 1.9375rem;--sbb-slider-knob-border-size: .1875rem;--sbb-slider-knob-border-style: solid;--sbb-slider-knob-color: var(--sbb-color-white);--sbb-slider-knob-border-color: var(--sbb-color-red);--sbb-slider-icon-color: var(--sbb-color-black);--sbb-slider-selected-line-color: var(--sbb-color-red);--sbb-slider-selected-line-disabled-color: var(--sbb-color-smoke);--sbb-slider-line-color: var(--sbb-color-smoke);--sbb-slider-line-disabled-color: var(--sbb-color-graphite)}@media (forced-colors: active){:host{--sbb-slider-selected-line-color: Highlight;--sbb-slider-line-color: CanvasText}}:host(:disabled){--sbb-slider-icon-color: var(--sbb-color-graphite);--sbb-slider-knob-border-color: var(--sbb-color-smoke);--sbb-slider-knob-border-size: var(--sbb-border-width-2x);--sbb-slider-knob-border-style: dashed}:host([readonly]){--sbb-slider-icon-color: var(--sbb-color-smoke);--sbb-slider-knob-border-color: var(--sbb-slider-selected-line-disabled-color)}:host(:disabled),:host([readonly]){--sbb-slider-line-color: var(--sbb-slider-line-disabled-color);--sbb-slider-selected-line-color: var(--sbb-slider-selected-line-disabled-color)}@media (forced-colors: active){:host(:disabled),:host([readonly]){--sbb-slider-icon-color: GrayText;--sbb-slider-selected-line-disabled-color: GrayText;--sbb-slider-line-disabled-color: GrayText}}.sbb-slider__height-container{display:flex;flex-direction:column}.sbb-slider__height-container:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-slider__wrapper{display:flex;gap:var(--sbb-spacing-fixed-2x);padding-block:calc(var(--sbb-spacing-fixed-1x) / 2);color:var(--sbb-slider-icon-color)}.sbb-slider__container{position:relative;min-height:var(--sbb-size-icon-ui-small);flex-grow:1}.sbb-slider__range-input{position:absolute;width:100%;inset:0;opacity:0;margin:0}.sbb-slider__line{position:absolute;top:50%;transform:translateY(-50%);height:var(--sbb-slider-line-height);width:100%;background-color:var(--sbb-slider-line-color);border-radius:var(--sbb-slider-line-height);overflow:hidden;pointer-events:none}.sbb-slider__selected-line{position:relative;height:100%;background-color:var(--sbb-slider-selected-line-color);width:calc(var(--sbb-slider-value-fraction) * 100%)}.sbb-slider__knob{position:absolute;top:50%;transform:translateY(-50%);box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color);width:var(--sbb-slider-knob-size);height:var(--sbb-slider-knob-size);inset-inline-start:calc(var(--sbb-slider-value-fraction) * 100% - var(--sbb-slider-knob-size) * var(--sbb-slider-value-fraction));transition-property:width,height;transition-duration:var(--sbb-disable-animation-duration, var(--sbb-animation-duration-1x));transition-timing-function:ease-in;background-color:var(--sbb-slider-knob-color);border:var(--sbb-slider-knob-border-size) var(--sbb-slider-knob-border-style) var(--sbb-slider-knob-border-color);border-radius:50%;pointer-events:none}:host(:focus-visible) .sbb-slider__knob{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-slider-knob-size: var(--sbb-slider-knob-size-active)}:host(:not(:is(:disabled,[readonly]))) .sbb-slider__range-input:active~.sbb-slider__knob{--sbb-slider-knob-size: var(--sbb-slider-knob-size-active)}`;
 let ie = (() => {
   var b, d, a;
   let t = [U("sbb-slider"), F({
     tabindex: "0"
   })], i, r = [], n, x = L(P(j(H(O)))), u = [], w, k, y, I, z, N = [], S = [], M, E = [], A = [];
-  var v = (a = class extends x {
+  var m = (a = class extends x {
     constructor() {
-      var e;
       super();
       f(this, b);
       f(this, d);
-      this._value = (c(this, u), null), this._min = "0", this._max = "100", m(this, b, c(this, N, "")), m(this, d, (c(this, S), c(this, E, ""))), this._didChange = (c(this, A), new R(this, v.events.didChange, {
+      this._value = (c(this, u), null), this._min = "0", this._max = "100", v(this, b, c(this, N, "")), v(this, d, (c(this, S), c(this, E, ""))), this._didChange = (c(this, A), new R(this, m.events.didChange, {
         bubbles: !0,
         cancelable: !0
-      })), (e = this.addEventListener) == null || e.call(this, "keydown", (s) => this._handleKeydown(s));
+      })), this.addEventListener?.("keydown", (e) => this._handleKeydown(e));
     }
     /**
      * Value of the form element.
@@ -40,7 +39,7 @@ let ie = (() => {
     }
     /** Numeric value for the inner HTMLInputElement. */
     set valueAsNumber(e) {
-      this.value = (e == null ? void 0 : e.toString()) ?? null;
+      this.value = e?.toString() ?? null;
     }
     get valueAsNumber() {
       return Number(this.value);
@@ -72,14 +71,14 @@ let ie = (() => {
       return _(this, b);
     }
     set startIcon(e) {
-      m(this, b, e);
+      v(this, b, e);
     }
     /** Name of the icon at component's end, which will be forward to the nested `sbb-icon`. */
     get endIcon() {
       return _(this, d);
     }
     set endIcon(e) {
-      m(this, d, e);
+      v(this, d, e);
     }
     /**
      * Form type of element.
@@ -89,8 +88,7 @@ let ie = (() => {
       return "range";
     }
     willUpdate(e) {
-      var s;
-      super.willUpdate(e), e.has("readOnly") && (this.internals.ariaReadOnly = (!!this.readOnly).toString()), (s = this.style) == null || s.setProperty("--sbb-slider-value-fraction", this._valueFraction().toString());
+      super.willUpdate(e), e.has("readOnly") && (this.internals.ariaReadOnly = (!!this.readOnly).toString()), this.style?.setProperty("--sbb-slider-value-fraction", this._valueFraction().toString());
     }
     /**
      * The reset value is the attribute value (the setup value). If not present, calculates the default.
@@ -194,11 +192,11 @@ let ie = (() => {
       s.startIcon = l;
     } }, metadata: e }, N, S), o(a, null, M, { kind: "accessor", name: "endIcon", static: !1, private: !1, access: { has: (s) => "endIcon" in s, get: (s) => s.endIcon, set: (s, l) => {
       s.endIcon = l;
-    } }, metadata: e }, E, A), o(null, i = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, r), v = n = i.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+    } }, metadata: e }, E, A), o(null, i = { value: n }, t, { kind: "class", name: n.name, metadata: e }, null, r), m = n = i.value, e && Object.defineProperty(n, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
   })(), a.role = "slider", a.styles = K, a.events = {
     didChange: "didChange"
   }, c(n, r), a);
-  return v = n;
+  return m = n;
 })();
 export {
   ie as SbbSliderElement

package/standard-theme.css

@@ -1444,6 +1444,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,
@@ -1458,6 +1459,7 @@ sbb-toast):not(:defined) {
 
 [popover]:where(sbb-autocomplete,
 sbb-autocomplete-grid,
+sbb-datepicker,
 sbb-dialog,
 sbb-menu,
 sbb-navigation,
@@ -1689,6 +1691,33 @@ sbb-toggle:has(:focus-visible) {
   --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);
+}
+
 sub {
   bottom: -0.36em;
 }
@@ -2317,7 +2346,6 @@ sup {
 .sbb-table-xs {
   --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;
@@ -2343,18 +2371,6 @@ sup {
 .sbb-table-xs thead > tr:first-of-type > th {
   border-block-start: var(--sbb-table-border);
 }
-.sbb-table thead > tr:first-of-type > th:first-of-type,
-.sbb-table-m thead > tr:first-of-type > th:first-of-type,
-.sbb-table-s thead > tr:first-of-type > th:first-of-type,
-.sbb-table-xs thead > tr:first-of-type > th:first-of-type {
-  border-start-start-radius: var(--sbb-table-border-radius);
-}
-.sbb-table thead > tr:first-of-type > th:last-of-type,
-.sbb-table-m thead > tr:first-of-type > th:last-of-type,
-.sbb-table-s thead > tr:first-of-type > th:last-of-type,
-.sbb-table-xs thead > tr:first-of-type > th:last-of-type {
-  border-start-end-radius: var(--sbb-table-border-radius);
-}
 .sbb-table thead > tr > th,
 .sbb-table-m thead > tr > th,
 .sbb-table-s thead > tr > th,
@@ -2400,18 +2416,6 @@ sup {
 .sbb-table-xs tbody > tr > td:first-of-type {
   border-inline-start: var(--sbb-table-border);
 }
-.sbb-table tbody > tr:last-of-type > td:first-of-type,
-.sbb-table-m tbody > tr:last-of-type > td:first-of-type,
-.sbb-table-s tbody > tr:last-of-type > td:first-of-type,
-.sbb-table-xs tbody > tr:last-of-type > td:first-of-type {
-  border-end-start-radius: var(--sbb-table-border-radius);
-}
-.sbb-table tbody > tr:last-of-type > td:last-of-type,
-.sbb-table-m tbody > tr:last-of-type > td:last-of-type,
-.sbb-table-s tbody > tr:last-of-type > td:last-of-type,
-.sbb-table-xs tbody > tr:last-of-type > td:last-of-type {
-  border-end-end-radius: var(--sbb-table-border-radius);
-}
 .sbb-table caption,
 .sbb-table-m caption,
 .sbb-table-s caption,

package/status/status.component.d.ts

@@ -1,13 +1,12 @@
 import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
-import { SbbTitleLevel } from '../title.js';
 export type SbbStatusType = 'info' | 'success' | 'warning' | 'error' | 'pending' | 'incomplete' | 'not-started' | 'in-progress';
 declare const SbbStatusElement_base: import('../core/mixins.js').AbstractConstructor<import('../icon.js').SbbIconNameMixinType> & typeof LitElement;
 /**
  * Displays a message to the user's attention.
  *
- * @slot - Use the unnamed slot to add content to the status message.
- * @slot title - Use this to provide a title for the status (optional).
+ * @slot - Use the unnamed slot to add an optional `sbb-title` and content to the status message.
  * @slot icon - Use this slot to override the default status icon.
+ * @slot title - Slot for the title. For the standard `sbb-title` element, the slot is automatically assigned when slotted in the unnamed slot.
  * @cssprop [--sbb-status-color=var(--sbb-color-iron)] - Specify a custom color,
  * which will override the predefined color for any type.
  * @cssprop [--sbb-status-text-color=var(--sbb-status-color)] - Specify a custom text color,
@@ -18,10 +17,8 @@ export declare class SbbStatusElement extends SbbStatusElement_base {
     private readonly _statusTypes;
     /** The type of the status. */
     accessor type: SbbStatusType;
-    /** Content of title. */
-    accessor titleContent: string;
-    /** Level of title, it will be rendered as heading tag (e.g. h3). Defaults to level 3. */
-    accessor titleLevel: SbbTitleLevel;
+    private _handleSlotchange;
+    private _configureTitle;
     protected renderIconSlot(): TemplateResult;
     protected render(): TemplateResult;
 }

package/status/status.component.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"status.component.d.ts","sourceRoot":"","sources":["../../../src/elements/status/status.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;AAIjD,OAAO,aAAa,CAAC;AAErB,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;;;;;GAUG;AACH,qBAGM,gBAAiB,SAAQ,qBAA4B;IACzD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IAC9B,SAA6C,IAAI,EAAE,aAAa,CAAU;IAE1E,wBAAwB;IACxB,SAEgB,YAAY,EAAE,MAAM,CAAM;IAE1C,yFAAyF;IACzF,SAAwD,UAAU,EAAE,aAAa,CAAO;cAErE,cAAc,IAAI,cAAc;cAQhC,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"status.component.d.ts","sourceRoot":"","sources":["../../../src/elements/status/status.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAQvC,MAAM,MAAM,aAAa,GACrB,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,GACT,YAAY,GACZ,aAAa,GACb,aAAa,CAAC;;AAElB;;;;;;;;;;GAUG;AACH,qBAEM,gBAAiB,SAAQ,qBAA4B;IACzD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,QAAQ,CAAC,YAAY,CAS1B;IAEH,8BAA8B;IAC9B,SAA6C,IAAI,EAAE,aAAa,CAAU;IAE1E,OAAO,CAAC,iBAAiB;IAOzB,OAAO,CAAC,eAAe;cAUJ,cAAc,IAAI,cAAc;cAQhC,MAAM,IAAI,cAAc;CAa5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}