@sbb-esta/lyne-elements 3.0.1 → 3.2.0

package/core/a11y/live-announcer.js

@@ -1,4 +1,4 @@
-import { isServer as n } from "lit";
+import { isServer as o } from "lit";
 /**
  * @license
  * Copyright Google LLC All Rights Reserved.
@@ -9,15 +9,17 @@ import { isServer as n } from "lit";
 let l = 0;
 class u {
   constructor() {
-    n || (this._liveElement = this._createLiveElement());
+    o || (document.body ? this._liveElement = this._createLiveElement() : document.addEventListener("DOMContentLoaded", () => {
+      this._liveElement = this._createLiveElement();
+    }));
   }
-  announce(r, ...t) {
-    if (n)
+  announce(n, ...t) {
+    if (!this._liveElement)
       return Promise.resolve();
     const e = {};
     let i, s;
-    return t.length === 1 && typeof t[0] == "number" ? s = t[0] : [i, s] = t, this.clear(), clearTimeout(this._previousTimeout), i ??= e?.politeness ?? "polite", s ??= e?.duration, this._liveElement.setAttribute("aria-live", i), this._currentPromise || (this._currentPromise = new Promise((o) => this._currentResolve = o)), clearTimeout(this._previousTimeout), this._previousTimeout = setTimeout(() => {
-      this._liveElement.textContent = r, typeof s == "number" && (this._previousTimeout = setTimeout(() => this.clear(), s)), this._currentResolve?.(), this._currentPromise = this._currentResolve = void 0;
+    return t.length === 1 && typeof t[0] == "number" ? s = t[0] : [i, s] = t, this.clear(), clearTimeout(this._previousTimeout), i ??= e?.politeness ?? "polite", s ??= e?.duration, this._liveElement.setAttribute("aria-live", i), this._currentPromise ??= new Promise((r) => this._currentResolve = r), clearTimeout(this._previousTimeout), this._previousTimeout = setTimeout(() => {
+      this._liveElement.textContent = n, typeof s == "number" && (this._previousTimeout = setTimeout(() => this.clear(), s)), this._currentResolve?.(), this._currentPromise = this._currentResolve = void 0;
     }, 100), this._currentPromise;
   }
   /**
@@ -32,10 +34,10 @@ class u {
     clearTimeout(this._previousTimeout), this._liveElement?.remove(), this._liveElement = null, this._currentResolve?.(), this._currentPromise = this._currentResolve = void 0;
   }
   _createLiveElement() {
-    const r = "sbb-live-announcer-element", t = document.getElementsByClassName(r), e = document.createElement("div");
+    const n = "sbb-live-announcer-element", t = document.getElementsByClassName(n), e = document.createElement("div");
     for (let i = 0; i < t.length; i++)
       t[i].remove();
-    return e.classList.add(r), e.classList.add("sbb-screen-reader-only"), e.setAttribute("aria-atomic", "true"), e.setAttribute("aria-live", "polite"), e.id = `sbb-live-announcer-${l++}`, document.body.appendChild(e), e;
+    return e.classList.add(n), e.classList.add("sbb-screen-reader-only"), e.setAttribute("aria-atomic", "true"), e.setAttribute("aria-live", "polite"), e.id = `sbb-live-announcer-${l++}`, document.body.appendChild(e), e;
   }
 }
 const v = new u();

package/core/base-elements/link-base-element.d.ts

@@ -18,6 +18,7 @@ export declare abstract class SbbLinkBaseElement extends SbbActionBaseElement {
     /** This will be forwarded as aria-current to the inner anchor element. */
     accessor accessibilityCurrent: string;
     protected language: SbbLanguageController;
+    protected readonly anchorRole: string | null;
     constructor();
     /** @internal */
     focus(options?: FocusOptions | undefined): void;

package/core/base-elements/link-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/link-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,6BAA6B,CAAC;AAErC,0DAA0D;AAC1D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAErE,uBAAuB;AACvB,8BAIe,kBAAmB,SAAQ,oBAAoB;IAC5D,0CAA0C;IAC1C,SAEgB,IAAI,EAAE,MAAM,CAAM;IAElC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,cAAc,GAAG,MAAM,CAAM;IAErD,wEAAwE;IACxE,SAEgB,GAAG,EAAE,MAAM,CAAM;IAEjC,kEAAkE;IAClE,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,wEAAwE;IACxE,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,0EAA0E;IAC1E,SAEgB,oBAAoB,EAAE,MAAM,CAAM;IAElD,SAAS,CAAC,QAAQ,wBAAmC;;IASrD,gBAAgB;IACA,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;IAI/D,gBAAgB;IACA,IAAI,IAAI,IAAI;IAI5B,gBAAgB;IACA,KAAK,IAAI,IAAI;IAI7B,OAAO,CAAC,qBAAqB,CAE3B;IAEF,mHAAmH;cAChG,MAAM,IAAI,cAAc;IAI3C,SAAS,CAAC,UAAU,CAAC,aAAa,EAAE,cAAc,GAAG,cAAc;CAsBpE"}
+{"version":3,"file":"link-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/link-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,6BAA6B,CAAC;AAErC,0DAA0D;AAC1D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAErE,uBAAuB;AACvB,8BAIe,kBAAmB,SAAQ,oBAAoB;IAC5D,0CAA0C;IAC1C,SAEgB,IAAI,EAAE,MAAM,CAAM;IAElC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,cAAc,GAAG,MAAM,CAAM;IAErD,wEAAwE;IACxE,SAEgB,GAAG,EAAE,MAAM,CAAM;IAEjC,kEAAkE;IAClE,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,wEAAwE;IACxE,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,0EAA0E;IAC1E,SAEgB,oBAAoB,EAAE,MAAM,CAAM;IAElD,SAAS,CAAC,QAAQ,wBAAmC;IACrD,SAAS,CAAC,QAAQ,CAAC,UAAU,EAAE,MAAM,GAAG,IAAI,CAAQ;;IASpD,gBAAgB;IACA,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;IAI/D,gBAAgB;IACA,IAAI,IAAI,IAAI;IAI5B,gBAAgB;IACA,KAAK,IAAI,IAAI;IAI7B,OAAO,CAAC,qBAAqB,CAE3B;IAEF,mHAAmH;cAChG,MAAM,IAAI,cAAc;IAI3C,SAAS,CAAC,UAAU,CAAC,aAAa,EAAE,cAAc,GAAG,cAAc;CAuBpE"}

package/core/base-elements/link-base-element.js

@@ -2,8 +2,8 @@ var W = (s) => {
   throw TypeError(s);
 };
 var F = (s, a, i) => a.has(s) || W("Cannot " + i);
-var b = (s, a, i) => (F(s, a, "read from private field"), i ? i.call(s) : a.get(s)), d = (s, a, i) => a.has(s) ? W("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), r = (s, a, i, o) => (F(s, a, "write to private field"), o ? o.call(s, i) : a.set(s, i), i);
-import { __esDecorate as u, __runInitializers as l } from "tslib";
+var b = (s, a, i) => (F(s, a, "read from private field"), i ? i.call(s) : a.get(s)), u = (s, a, i) => a.has(s) ? W("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(s) : a.set(s, i), r = (s, a, i, o) => (F(s, a, "write to private field"), o ? o.call(s, i) : a.set(s, i), i);
+import { __esDecorate as d, __runInitializers as l } from "tslib";
 import { nothing as h, isServer as J, html as G } from "lit";
 import { property as w } from "lit/decorators.js";
 import { SbbLanguageController as K } from "../controllers.js";
@@ -15,17 +15,17 @@ let le = (() => {
   var _, m, f, y, g, p, c;
   let s = [M({
     "data-link": ""
-  })], a, i = [], o, L = U, z, C = [], S = [], $, x = [], I = [], D, E = [], R = [], A, B = [], T = [], q, O = [], j = [], N, H = [], P = [];
+  })], a, i = [], o, L = U, z, C = [], $ = [], S, x = [], I = [], R, D = [], E = [], A, B = [], T = [], q, O = [], j = [], N, H = [], P = [];
   return c = class extends L {
     constructor() {
       super();
-      d(this, _);
-      d(this, m);
-      d(this, f);
-      d(this, y);
-      d(this, g);
-      d(this, p);
-      r(this, _, l(this, C, "")), r(this, m, (l(this, S), l(this, x, ""))), r(this, f, (l(this, I), l(this, E, ""))), r(this, y, (l(this, R), l(this, B, !1))), r(this, g, (l(this, T), l(this, O, ""))), r(this, p, (l(this, j), l(this, H, ""))), this.language = (l(this, P), new K(this)), this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : h, J || this.setupBaseEventHandlers();
+      u(this, _);
+      u(this, m);
+      u(this, f);
+      u(this, y);
+      u(this, g);
+      u(this, p);
+      r(this, _, l(this, C, "")), r(this, m, (l(this, $), l(this, x, ""))), r(this, f, (l(this, I), l(this, D, ""))), r(this, y, (l(this, E), l(this, B, !1))), r(this, g, (l(this, T), l(this, O, ""))), r(this, p, (l(this, j), l(this, H, ""))), this.language = (l(this, P), new K(this)), this.anchorRole = null, this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : h, J || this.setupBaseEventHandlers();
     }
     /** The href value you want to link to. */
     get href() {
@@ -93,6 +93,7 @@ let le = (() => {
         ?download=${this.download}
         target=${this.target || h}
         rel=${this._evaluateRelAttribute()}
+        role=${this.anchorRole || h}
         aria-label=${this.accessibilityLabel || h}
         aria-current=${this.accessibilityCurrent || h}
         tabindex=${this.maybeDisabled && !this.maybeDisabledInteractive ? "-1" : h}
@@ -107,19 +108,19 @@ let le = (() => {
     }
   }, _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), y = new WeakMap(), g = new WeakMap(), p = new WeakMap(), o = c, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(L[Symbol.metadata] ?? null) : void 0;
-    z = [v(), w({ reflect: !0, converter: k })], $ = [v(), w({ reflect: !0, converter: k })], D = [v(), w({ reflect: !0, converter: k })], A = [v(), w({ type: Boolean, reflect: !0 })], q = [v(), w({ attribute: "accessibility-label" })], N = [v(), w({ attribute: "accessibility-current" })], u(c, null, z, { kind: "accessor", name: "href", static: !1, private: !1, access: { has: (e) => "href" in e, get: (e) => e.href, set: (e, n) => {
+    z = [v(), w({ reflect: !0, converter: k })], S = [v(), w({ reflect: !0, converter: k })], R = [v(), w({ reflect: !0, converter: k })], A = [v(), w({ type: Boolean, reflect: !0 })], q = [v(), w({ attribute: "accessibility-label" })], N = [v(), w({ attribute: "accessibility-current" })], d(c, null, z, { kind: "accessor", name: "href", static: !1, private: !1, access: { has: (e) => "href" in e, get: (e) => e.href, set: (e, n) => {
       e.href = n;
-    } }, metadata: t }, C, S), u(c, null, $, { kind: "accessor", name: "target", static: !1, private: !1, access: { has: (e) => "target" in e, get: (e) => e.target, set: (e, n) => {
+    } }, metadata: t }, C, $), d(c, null, S, { kind: "accessor", name: "target", static: !1, private: !1, access: { has: (e) => "target" in e, get: (e) => e.target, set: (e, n) => {
       e.target = n;
-    } }, metadata: t }, x, I), u(c, null, D, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (e) => "rel" in e, get: (e) => e.rel, set: (e, n) => {
+    } }, metadata: t }, x, I), d(c, null, R, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (e) => "rel" in e, get: (e) => e.rel, set: (e, n) => {
       e.rel = n;
-    } }, metadata: t }, E, R), u(c, null, A, { kind: "accessor", name: "download", static: !1, private: !1, access: { has: (e) => "download" in e, get: (e) => e.download, set: (e, n) => {
+    } }, metadata: t }, D, E), d(c, null, A, { kind: "accessor", name: "download", static: !1, private: !1, access: { has: (e) => "download" in e, get: (e) => e.download, set: (e, n) => {
       e.download = n;
-    } }, metadata: t }, B, T), u(c, null, q, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, n) => {
+    } }, metadata: t }, B, T), d(c, null, q, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (e) => "accessibilityLabel" in e, get: (e) => e.accessibilityLabel, set: (e, n) => {
       e.accessibilityLabel = n;
-    } }, metadata: t }, O, j), u(c, null, N, { kind: "accessor", name: "accessibilityCurrent", static: !1, private: !1, access: { has: (e) => "accessibilityCurrent" in e, get: (e) => e.accessibilityCurrent, set: (e, n) => {
+    } }, metadata: t }, O, j), d(c, null, N, { kind: "accessor", name: "accessibilityCurrent", static: !1, private: !1, access: { has: (e) => "accessibilityCurrent" in e, get: (e) => e.accessibilityCurrent, set: (e, n) => {
       e.accessibilityCurrent = n;
-    } }, metadata: t }, H, P), u(null, a = { value: o }, s, { kind: "class", name: o.name, metadata: t }, null, i), o = a.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), l(o, i);
+    } }, metadata: t }, H, P), d(null, a = { value: o }, s, { kind: "class", name: o.name, metadata: t }, null, i), o = a.value, t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t }), l(o, i);
   })(), o;
 })();
 export {

package/core/config/config.d.ts

@@ -11,10 +11,15 @@ export interface SbbIconConfig {
 export interface SbbDatetimeConfig {
     dateAdapter?: DateAdapter;
 }
+export interface SbbPopoverConfig {
+    openDelay?: number;
+    closeDelay?: number;
+}
 export interface SbbConfig {
     language?: string;
     icon?: SbbIconConfig;
     datetime?: SbbDatetimeConfig;
+    popover?: SbbPopoverConfig;
 }
 export declare function readConfig(): SbbConfig;
 export declare function mergeConfig(config: Partial<SbbConfig>): void;

package/core/config/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/config/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;KAChC,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,wBAAgB,UAAU,IAAI,SAAS,CAKtC;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAG5D;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,SAAS,EAAE,SAAS,CAAC;CAC1B"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/config/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;KAChC,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,gBAAgB;IAE/B,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;IAC7B,OAAO,CAAC,EAAE,gBAAgB,CAAC;CAC5B;AAED,wBAAgB,UAAU,IAAI,SAAS,CAKtC;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAG5D;AAED,OAAO,CAAC,MAAM,CAAC;IAEb,IAAI,SAAS,EAAE,SAAS,CAAC;CAC1B"}

package/core/mixins/selection-panel-mixin.d.ts

@@ -0,0 +1,23 @@
+import { LitElement } from 'lit';
+import { SbbCheckboxGroupElement } from '../../checkbox/checkbox-group.js';
+import { SbbRadioButtonGroupElement } from '../../radio-button/radio-button-group.js';
+import { SbbStateChange } from '../interfaces/types.js';
+import { AbstractConstructor } from './constructor.js';
+import { SbbElementInternalsMixinType } from './element-internals-mixin.js';
+export declare class SbbSelectionPanelMixinType {
+    accessor color: 'white' | 'milk';
+    accessor borderless: boolean;
+    protected set checked(checked: boolean);
+    protected get checked(): boolean;
+    protected set disabled(disabled: boolean);
+    protected get disabled(): boolean;
+    protected group: SbbRadioButtonGroupElement | SbbCheckboxGroupElement | null;
+    protected sizeAttributeObserver: MutationObserver | null;
+    protected initFromInput(event: Event): void;
+    protected onInputStateChange(event: CustomEvent<SbbStateChange>): void;
+}
+/**
+ * Mixin for common selection panel behaviors
+ */
+export declare const SbbSelectionPanelMixin: <T extends AbstractConstructor<LitElement>>(superClass: T) => AbstractConstructor<SbbSelectionPanelMixinType & SbbElementInternalsMixinType> & T;
+//# sourceMappingURL=selection-panel-mixin.d.ts.map

package/core/mixins/selection-panel-mixin.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-panel-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/selection-panel-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAY,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAGhD,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAEhF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0CAA0C,CAAC;AAG3F,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,wBAAwB,CAAC;AAE7D,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,8BAA8B,CAAC;AAEtC,MAAM,CAAC,OAAO,OAAO,0BAA0B;IAC7C,SAAgB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAC;IACxC,SAAgB,UAAU,EAAE,OAAO,CAAC;IAEpC,SAAS,KAAK,OAAO,CAAC,OAAO,EAAE,OAAO,EAAE;IACxC,SAAS,KAAK,OAAO,IAAI,OAAO,CAAC;IAEjC,SAAS,KAAK,QAAQ,CAAC,QAAQ,EAAE,OAAO,EAAE;IAC1C,SAAS,KAAK,QAAQ,IAAI,OAAO,CAAC;IAElC,SAAS,CAAC,KAAK,EAAE,0BAA0B,GAAG,uBAAuB,GAAG,IAAI,CAAC;IAC7E,SAAS,CAAC,qBAAqB,EAAE,gBAAgB,GAAG,IAAI,CAAC;IAEzD,SAAS,CAAC,aAAa,CAAC,KAAK,EAAE,KAAK,GAAG,IAAI;IAC3C,SAAS,CAAC,kBAAkB,CAAC,KAAK,EAAE,WAAW,CAAC,cAAc,CAAC,GAAG,IAAI;CACvE;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EAC9E,YAAY,CAAC,KACZ,mBAAmB,CAAC,0BAA0B,GAAG,4BAA4B,CAAC,GAAG,CA8FnF,CAAC"}

package/core/mixins/selection-panel-mixin.js

@@ -0,0 +1,87 @@
+var k = (s) => {
+  throw TypeError(s);
+};
+var S = (s, r, i) => r.has(s) || k("Cannot " + i);
+var h = (s, r, i) => (S(s, r, "read from private field"), i ? i.call(s) : r.get(s)), u = (s, r, i) => r.has(s) ? k("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, i), d = (s, r, i, n) => (S(s, r, "write to private field"), n ? n.call(s, i) : r.set(s, i), i);
+import { __esDecorate as y, __runInitializers as b } from "tslib";
+import { isServer as A } from "lit";
+import { property as v } from "lit/decorators.js";
+import { forceType as x } from "../decorators.js";
+import { SbbElementInternalsMixin as C } from "./element-internals-mixin.js";
+const P = (s) => (() => {
+  var o, l, a;
+  let i = C(s), n, p = [], m = [], g, f = [], _ = [];
+  return a = class extends i {
+    constructor(...e) {
+      super(e);
+      u(this, o);
+      u(this, l);
+      d(this, o, b(this, p, "white")), d(this, l, (b(this, m), b(this, f, !1))), this.group = (b(this, _), null), this.sizeAttributeObserver = A ? null : new MutationObserver((t) => this._onSizeAttributesChange(t)), this.addEventListener?.("panelconnected", (t) => this.initFromInput(t));
+    }
+    /** The background color of the panel. */
+    get color() {
+      return h(this, o);
+    }
+    set color(e) {
+      d(this, o, e);
+    }
+    /** Whether the unselected panel has a border. */
+    get borderless() {
+      return h(this, l);
+    }
+    set borderless(e) {
+      d(this, l, e);
+    }
+    /** Whether the selection panel is checked. */
+    set checked(e) {
+      this.toggleState("checked", e);
+    }
+    get checked() {
+      return this.internals.states.has("checked");
+    }
+    /** Whether the selection panel is disabled. */
+    set disabled(e) {
+      this.toggleState("disabled", e);
+    }
+    get disabled() {
+      return this.internals.states.has("disabled");
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.group = this.closest("sbb-radio-button-group, sbb-checkbox-group");
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.sizeAttributeObserver?.disconnect();
+    }
+    initFromInput(e) {
+      const t = e.target;
+      this.checked = t.checked, this.disabled = t.disabled, this.sizeAttributeObserver?.disconnect(), this.sizeAttributeObserver?.observe(t, { attributeFilter: ["size"] });
+    }
+    onInputStateChange(e) {
+      e.detail.type === "disabled" ? this.disabled = e.detail.disabled : e.detail.type === "checked" && (this.checked = e.detail.checked);
+    }
+    /**
+     * Set the data-size in two cases:
+     * - if there's no group, so the size change comes directly from a change on the inner panel;
+     * - if there's a wrapper group and its size changes, syncing it with the panel size.
+     *
+     * On the other hand, if there's a wrapper group and the size changes on the inner panel, the data-size doesn't change.
+     */
+    _onSizeAttributesChange(e) {
+      for (const t of e)
+        if (t.attributeName === "size") {
+          const c = this.group, z = t.target.getAttribute("size");
+          (!c || c.size === z) && this.setAttribute("data-size", z);
+        }
+    }
+  }, o = new WeakMap(), l = new WeakMap(), (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
+    n = [v({ reflect: !0 })], g = [x(), v({ reflect: !0, type: Boolean })], y(a, null, n, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (t) => "color" in t, get: (t) => t.color, set: (t, c) => {
+      t.color = c;
+    } }, metadata: e }, p, m), y(a, null, g, { kind: "accessor", name: "borderless", static: !1, private: !1, access: { has: (t) => "borderless" in t, get: (t) => t.borderless, set: (t, c) => {
+      t.borderless = c;
+    } }, metadata: e }, f, _), e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), a;
+})();
+export {
+  P as SbbSelectionPanelMixin
+};

package/core/mixins.d.ts

@@ -15,5 +15,6 @@ export * from './mixins/negative-mixin.js';
 export * from './mixins/panel-mixin.js';
 export * from './mixins/required-mixin.js';
 export * from './mixins/readonly-mixin.js';
+export * from './mixins/selection-panel-mixin.js';
 export * from './mixins/update-scheduler-mixin.js';
 //# sourceMappingURL=mixins.d.ts.map

package/core/mixins.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qCAAqC,CAAC;AACpD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}
+{"version":3,"file":"mixins.d.ts","sourceRoot":"","sources":["../../../src/elements/core/mixins.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC;AACrD,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qCAAqC,CAAC;AACpD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,6BAA6B,CAAC;AAC5C,cAAc,mCAAmC,CAAC;AAClD,cAAc,4BAA4B,CAAC;AAC3C,cAAc,yBAAyB,CAAC;AACxC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,mCAAmC,CAAC;AAClD,cAAc,oCAAoC,CAAC;AAEnD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,uCAAuC,CAAC"}

package/core/mixins.js

@@ -1,21 +1,22 @@
-import { SbbAnimationCompleteMixin as r } from "./mixins/animation-complete-mixin.js";
+import { SbbAnimationCompleteMixin as i } 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, 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 { SbbFormAssociatedRadioButtonMixin as M, radioButtonRegistry as k } 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 { SbbReadonlyMixin as P } from "./mixins/readonly-mixin.js";
+import { SbbSelectionPanelMixin as q } from "./mixins/selection-panel-mixin.js";
+import { SbbUpdateSchedulerMixin as H } 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;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}`;
+const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-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-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-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-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,
+  i as SbbAnimationCompleteMixin,
   a as SbbDisabledInteractiveMixin,
   t as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
@@ -23,16 +24,17 @@ export {
   v as SbbFormAssociatedCheckboxMixin,
   f as SbbFormAssociatedInputMixin,
   g as SbbFormAssociatedMixin,
-  k as SbbFormAssociatedRadioButtonMixin,
+  M as SbbFormAssociatedRadioButtonMixin,
   y as SbbHydrationMixin,
   C as SbbNamedSlotListMixin,
   I as SbbNegativeMixin,
   D as SbbPanelMixin,
-  _ as SbbReadonlyMixin,
+  P as SbbReadonlyMixin,
   B as SbbRequiredMixin,
-  z as SbbUpdateSchedulerMixin,
+  q as SbbSelectionPanelMixin,
+  H as SbbUpdateSchedulerMixin,
   p as appendAriaElements,
   n as panelCommonStyle,
-  M as radioButtonRegistry,
+  k as radioButtonRegistry,
   x as removeAriaElements
 };

package/core/styles/_index.scss

@@ -17,6 +17,7 @@
 @forward './mixins/overlay';
 @forward './mixins/panel';
 @forward './mixins/pearl-chain-bullet';
+@forward './mixins/popover';
 @forward './mixins/scrollbar';
 @forward './mixins/shadows';
 @forward './mixins/table';

package/core/styles/core.scss

@@ -5,6 +5,7 @@
 @use './mixins/font-face';
 @use './mixins/helpers';
 @use './mixins/inputs';
+@use './mixins/popover';
 @use './mixins/scrollbar';
 @use './mixins/shadows';
 @use './mixins/typo';
@@ -222,14 +223,7 @@ sbb-form-field {
   sbb-popover,
   sbb-toast
 ) {
-  margin: 0;
-  padding: 0;
-  border: none;
-  width: auto;
-  height: auto;
-  background-color: transparent;
-  color: inherit;
-  pointer-events: none;
+  @include popover.popover-reset;
 }
 
 // Ensure stable breadcrumb height during hydrating
@@ -515,15 +509,20 @@ sbb-toggle:has(:focus-visible) {
   @include a11y.focus-outline;
 }
 
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s']
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] {
   :where(sbb-option, sbb-autocomplete-grid-option) {
-  --sbb-option-min-height: var(--sbb-size-element-xxs);
-  --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
-  --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
-}
+    --sbb-option-min-height: var(--sbb-size-element-xxs);
+    --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
+    --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
+  }
 
-:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size='s'] sbb-optgroup {
-  --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+  sbb-optgroup {
+    --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
+  }
+
+  sbb-option-hint {
+    --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
+  }
 }
 
 sbb-dialog-actions {
@@ -542,6 +541,36 @@ sbb-dialog-actions {
   }
 }
 
+// If there is a title, remove top spacing for the content
+sbb-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
+  padding-block-start: 0;
+}
+
+// Hide margin on the right side. Distance to button is defined by flex gap already.
+sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title {
+  margin-inline-end: 0;
+}
+
+sbb-dialog-close-button {
+  // If there is no dialog title, the close button should be positioned absolute
+  sbb-dialog:not(:has(> sbb-dialog-title)) > & {
+    position: absolute;
+    z-index: 1;
+  }
+
+  // The close button positioning needs the current dialog title size
+  sbb-dialog:has(> sbb-dialog-title[visual-level='3']) > & {
+    // TODO: Adapt to lean size title
+    --_sbb-dialog-title-size: var(--sbb-font-size-title-3);
+  }
+
+  // The close button positioning needs the current dialog title size
+  sbb-dialog:has(> sbb-dialog-title[visual-level='5']) > & {
+    // TODO: Adapt to lean size title
+    --_sbb-dialog-title-size: var(--sbb-font-size-title-5);
+  }
+}
+
 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);

package/core/styles/mixins/popover.scss

@@ -0,0 +1,14 @@
+// ----------------------------------------------------------------------------------------------------
+// Popover Mixins
+// ----------------------------------------------------------------------------------------------------
+
+@mixin popover-reset {
+  margin: 0;
+  padding: 0;
+  border: none;
+  width: auto;
+  height: auto;
+  background-color: transparent;
+  color: inherit;
+  pointer-events: none;
+}

package/core.css

@@ -1580,10 +1580,12 @@ sbb-toggle:has(:focus-visible) {
   --sbb-focus-outline-offset: calc(-1 * var(--sbb-spacing-fixed-1x));
   --sbb-option-focus-outline-inset: 0 var(--sbb-spacing-fixed-1x);
 }
-
 :where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-optgroup {
   --sbb-optgroup-label-padding-end: var(--sbb-spacing-fixed-1x);
 }
+:where(sbb-select, sbb-autocomplete, sbb-autocomplete-grid)[size=s] sbb-option-hint {
+  --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-1x);
+}
 
 sbb-dialog[negative] sbb-dialog-actions {
   --sbb-dialog-actions-border-color: var(--sbb-color-iron);
@@ -1596,6 +1598,25 @@ sbb-dialog[negative]:is(:state(overflows), [state--overflows]) sbb-dialog-action
   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-dialog:has(> sbb-dialog-title) > sbb-dialog-content {
+  padding-block-start: 0;
+}
+
+sbb-dialog:has(> sbb-dialog-close-button) > sbb-dialog-title {
+  margin-inline-end: 0;
+}
+
+sbb-dialog:not(:has(> sbb-dialog-title)) > sbb-dialog-close-button {
+  position: absolute;
+  z-index: 1;
+}
+sbb-dialog:has(> sbb-dialog-title[visual-level="3"]) > sbb-dialog-close-button {
+  --_sbb-dialog-title-size: var(--sbb-font-size-title-3);
+}
+sbb-dialog:has(> sbb-dialog-title[visual-level="5"]) > sbb-dialog-close-button {
+  --_sbb-dialog-title-size: var(--sbb-font-size-title-5);
+}
+
 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);