@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sbb-esta/lyne-elements",
-  "version": "0.52.1",
+  "version": "0.53.0",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
@@ -244,6 +244,16 @@
       "development": "./development/checkbox/checkbox-group.js",
       "default": "./checkbox/checkbox-group.js"
     },
+    "./checkbox/checkbox-panel.js": {
+      "types": "./development/checkbox/checkbox-panel.d.ts",
+      "development": "./development/checkbox/checkbox-panel.js",
+      "default": "./checkbox/checkbox-panel.js"
+    },
+    "./checkbox/common.js": {
+      "types": "./development/checkbox/common.d.ts",
+      "development": "./development/checkbox/common.js",
+      "default": "./checkbox/common.js"
+    },
     "./chip.js": {
       "types": "./development/chip.d.ts",
       "development": "./development/chip.js",
@@ -669,6 +679,11 @@
       "development": "./development/radio-button.js",
       "default": "./radio-button.js"
     },
+    "./radio-button/common.js": {
+      "types": "./development/radio-button/common.d.ts",
+      "development": "./development/radio-button/common.js",
+      "default": "./radio-button/common.js"
+    },
     "./radio-button/radio-button.js": {
       "types": "./development/radio-button/radio-button.d.ts",
       "development": "./development/radio-button/radio-button.js",
@@ -679,6 +694,11 @@
       "development": "./development/radio-button/radio-button-group.js",
       "default": "./radio-button/radio-button-group.js"
     },
+    "./radio-button/radio-button-panel.js": {
+      "types": "./development/radio-button/radio-button-panel.d.ts",
+      "development": "./development/radio-button/radio-button-panel.js",
+      "default": "./radio-button/radio-button-panel.js"
+    },
     "./screen-reader-only.js": {
       "types": "./development/screen-reader-only.d.ts",
       "development": "./development/screen-reader-only.js",
@@ -689,10 +709,10 @@
       "development": "./development/select.js",
       "default": "./select.js"
     },
-    "./selection-panel.js": {
-      "types": "./development/selection-panel.d.ts",
-      "development": "./development/selection-panel.js",
-      "default": "./selection-panel.js"
+    "./selection-expansion-panel.js": {
+      "types": "./development/selection-expansion-panel.d.ts",
+      "development": "./development/selection-expansion-panel.js",
+      "default": "./selection-expansion-panel.js"
     },
     "./signet.js": {
       "types": "./development/signet.d.ts",
@@ -739,15 +759,20 @@
       "development": "./development/tabs.js",
       "default": "./tabs.js"
     },
+    "./tabs/tab.js": {
+      "types": "./development/tabs/tab.d.ts",
+      "development": "./development/tabs/tab.js",
+      "default": "./tabs/tab.js"
+    },
     "./tabs/tab-group.js": {
       "types": "./development/tabs/tab-group.d.ts",
       "development": "./development/tabs/tab-group.js",
       "default": "./tabs/tab-group.js"
     },
-    "./tabs/tab-title.js": {
-      "types": "./development/tabs/tab-title.d.ts",
-      "development": "./development/tabs/tab-title.js",
-      "default": "./tabs/tab-title.js"
+    "./tabs/tab-label.js": {
+      "types": "./development/tabs/tab-label.d.ts",
+      "development": "./development/tabs/tab-label.js",
+      "default": "./tabs/tab-label.js"
     },
     "./tag.js": {
       "types": "./development/tag.d.ts",
@@ -769,16 +794,6 @@
       "development": "./development/teaser.js",
       "default": "./teaser.js"
     },
-    "./teaser-hero.js": {
-      "types": "./development/teaser-hero.d.ts",
-      "development": "./development/teaser-hero.js",
-      "default": "./teaser-hero.js"
-    },
-    "./teaser-paid.js": {
-      "types": "./development/teaser-paid.d.ts",
-      "development": "./development/teaser-paid.js",
-      "default": "./teaser-paid.js"
-    },
     "./time-input.js": {
       "types": "./development/time-input.d.ts",
       "development": "./development/time-input.js",

package/popover/popover.js

@@ -1,190 +1,190 @@
-import { css as f, html as h, nothing as u } from "lit";
-import { property as b, customElement as m } from "lit/decorators.js";
-import { ref as g } from "lit/directives/ref.js";
-import { SbbFocusHandler as w, IS_FOCUSABLE_QUERY as y, setModalityOnNextFocus as p, getFirstFocusableElement as x } from "../core/a11y.js";
+import { css as u, html as d, nothing as g } from "lit";
+import { property as l, customElement as f } from "lit/decorators.js";
+import { ref as m } from "lit/directives/ref.js";
+import { SbbFocusHandler as _, IS_FOCUSABLE_QUERY as w, setModalityOnNextFocus as b, getFirstFocusableElement as y } from "../core/a11y.js";
 import { SbbOpenCloseBaseElement as E } from "../core/base-elements.js";
-import { SbbLanguageController as C } from "../core/controllers.js";
-import { findReferencedElement as _ } from "../core/dom.js";
-import { EventEmitter as v, composedPathHasAttribute as T } from "../core/eventing.js";
+import { SbbLanguageController as x } from "../core/controllers.js";
+import { findReferencedElement as C } from "../core/dom.js";
+import { EventEmitter as h, composedPathHasAttribute as T } from "../core/eventing.js";
 import { i18nClosePopover as k } from "../core/i18n.js";
-import { isEventOnElement as c, removeAriaOverlayTriggerAttributes as A, setAriaOverlayTriggerAttributes as L, getElementPosition as z } from "../core/overlay.js";
+import { isEventOnElement as c, removeAriaOverlayTriggerAttributes as P, setAriaOverlayTriggerAttributes as L, getElementPosition as O } from "../core/overlay.js";
 import "../button/secondary-button.js";
-const O = f`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}:host(:not([data-state=closed])){--sbb-popover-inset: 0}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{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:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}.sbb-popover:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{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);z-index:-1}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`;
-var S = Object.defineProperty, P = Object.getOwnPropertyDescriptor, n = (e, t, o, i) => {
-  for (var a = i > 1 ? void 0 : i ? P(t, o) : t, r = e.length - 1, l; r >= 0; r--)
-    (l = e[r]) && (a = (i ? l(t, o, a) : l(a)) || a);
-  return i && a && S(t, o, a), a;
+const S = u`*,:before,:after{box-sizing:border-box}:host{--sbb-popover-position: absolute;--sbb-popover-position-x: 0;--sbb-popover-position-y: 0;--sbb-popover-arrow-size: var(--sbb-spacing-fixed-4x);--sbb-popover-arrow-position-x: 0;--sbb-popover-max-width: calc(100% - var(--sbb-spacing-fixed-2x));--sbb-popover-inset: 0 auto auto 0;--sbb-popover-border-radius: var(--sbb-border-radius-8x);--sbb-popover-padding: var(--sbb-spacing-fixed-4x);--sbb-popover-background: var(--sbb-color-white);--sbb-popover-color: var(--sbb-color-charcoal);--sbb-popover-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-popover-animation-easing: ease-out;--sbb-popover-transform: translateY(var(--sbb-spacing-fixed-2x));--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:block}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}:host(:not([data-state=closed])){--sbb-popover-inset: 0}.sbb-popover:after,.sbb-popover__content:before{content:"";position:absolute;display:block;width:var(--sbb-popover-arrow-size);height:var(--sbb-popover-arrow-size);left:var(--sbb-popover-arrow-position-x);bottom:calc(100% - var(--sbb-popover-arrow-size) / 2);background-color:var(--sbb-popover-background);border-radius:var(--sbb-border-radius-2x) 0;transform:rotate(45deg)}.sbb-popover__container{position:fixed;inset:var(--sbb-popover-inset);pointer-events:none;z-index:var(--sbb-popover-z-index, var(--sbb-overlay-default-z-index));color:var(--sbb-popover-color)}.sbb-popover{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:none;position:var(--sbb-popover-position);pointer-events:all;top:var(--sbb-popover-position-y);bottom:unset;left:var(--sbb-popover-position-x);right:unset;border:none;border-radius:var(--sbb-popover-border-radius);padding:0;max-width:var(--sbb-popover-max-width);width:max-content;background-color:var(--sbb-popover-background);outline:none}.sbb-popover:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width)}:host([data-state]:not([data-state=closed])) .sbb-popover{display:block;animation-name:open;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}:host([data-state][data-state=closing]) .sbb-popover{pointer-events:none;animation-name:close;animation-duration:var(--sbb-popover-animation-duration);animation-timing-function:var(--sbb-popover-animation-easing)}.sbb-popover:after{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);z-index:-1}@media (forced-colors: active){.sbb-popover:after{outline:var(--sbb-border-width-1x) solid CanvasText}}:host([data-position=above]) .sbb-popover:after{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@media (forced-colors: active){.sbb-popover{outline:var(--sbb-border-width-1x) solid CanvasText}}.sbb-popover:before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;background-color:transparent}:host([data-position=below]) .sbb-popover:before{inset-block-start:calc(-1 * var(--sbb-spacing-fixed-6x))}:host([data-position=above]) .sbb-popover:before{inset-block-end:calc(-1 * var(--sbb-spacing-fixed-6x))}.sbb-popover__content{display:flex;gap:var(--sbb-spacing-fixed-4x);border-radius:var(--sbb-popover-border-radius);padding:var(--sbb-popover-padding);outline:none;background-color:var(--sbb-popover-background);overflow:hidden;flex-direction:row-reverse}:host([data-position=above]) .sbb-popover__content:before{top:calc(100% - var(--sbb-popover-arrow-size) / 2)}@keyframes open{0%{opacity:0;transform:var(--sbb-popover-transform)}to{opacity:1;transform:translateY(0)}}@keyframes close{0%{opacity:1;transform:translateY(0)}to{opacity:0;transform:var(--sbb-popover-transform)}}`;
+var A = Object.defineProperty, F = Object.getOwnPropertyDescriptor, n = (e, o, t, i) => {
+  for (var r = i > 1 ? void 0 : i ? F(o, t) : o, a = e.length - 1, p; a >= 0; a--)
+    (p = e[a]) && (r = (i ? p(o, t, r) : p(r)) || r);
+  return i && r && A(o, t, r), r;
 };
-const F = 16, B = 32;
-let D = 0;
-const d = /* @__PURE__ */ new Set();
+const z = 16, D = 32;
+let M = 0;
+const v = /* @__PURE__ */ new Set();
 let s = class extends E {
   constructor() {
-    super(...arguments), this.hideCloseButton = !1, this.hoverTrigger = !1, this.openDelay = 0, this.closeDelay = 0, this.willClose = new v(
+    super(...arguments), this.hideCloseButton = !1, this.hoverTrigger = !1, this.openDelay = 0, this.closeDelay = 0, this.willClose = new h(
       this,
       s.events.willClose
-    ), this.didClose = new v(
+    ), this.didClose = new h(
       this,
       s.events.didClose
-    ), this.h = !1, this.i = new w(), this.f = !1, this.o = new C(this), this.w = (e) => {
-      this.m = c(this.a, e);
-    }, this.x = (e) => {
-      !this.m && !c(this.a, e) && (this.g = e.composedPath().filter((t) => t instanceof window.HTMLElement).find((t) => t.matches(y)), clearTimeout(this.e), this.close());
-    }, this.t = () => {
-      this.state === "closed" || this.state === "closing" ? this.n = setTimeout(() => this.open(), this.openDelay) : clearTimeout(this.e);
-    }, this.u = () => {
-      this.state === "opened" || this.state === "opening" ? this.e = setTimeout(() => this.close(), this.closeDelay) : clearTimeout(this.n);
-    }, this.r = () => {
-      this.state !== "opening" && clearTimeout(this.e);
-    }, this.s = () => {
-      this.state !== "opening" && (this.e = setTimeout(() => this.close(), this.closeDelay));
+    ), this._skipCloseFocus = !1, this._focusHandler = new _(), this._hoverTrigger = !1, this._language = new x(this), this._pointerDownListener = (e) => {
+      this._isPointerDownEventOnPopover = c(this._overlay, e);
+    }, this._closeOnBackdropClick = (e) => {
+      !this._isPointerDownEventOnPopover && !c(this._overlay, e) && (this._nextFocusedElement = e.composedPath().filter((o) => o instanceof window.HTMLElement).find((o) => o.matches(w)), clearTimeout(this._closeTimeout), this.close());
+    }, this._onTriggerMouseEnter = () => {
+      this.state === "closed" || this.state === "closing" ? this._openTimeout = setTimeout(() => this.open(), this.openDelay) : clearTimeout(this._closeTimeout);
+    }, this._onTriggerMouseLeave = () => {
+      this.state === "opened" || this.state === "opening" ? this._closeTimeout = setTimeout(() => this.close(), this.closeDelay) : clearTimeout(this._openTimeout);
+    }, this._onOverlayMouseEnter = () => {
+      this.state !== "opening" && clearTimeout(this._closeTimeout);
+    }, this._onOverlayMouseLeave = () => {
+      this.state !== "opening" && (this._closeTimeout = setTimeout(() => this.close(), this.closeDelay));
     };
   }
   /** Opens the popover on trigger click. */
   open() {
     var e;
-    if (!(this.state !== "closed" && this.state !== "closing" || !this.a) && this.willOpen.emit()) {
-      for (const t of Array.from(d)) {
-        const o = t.getAttribute("data-state");
-        o && (o === "opened" || o === "opening") && t.close();
+    if (!(this.state !== "closed" && this.state !== "closing" || !this._overlay) && this.willOpen.emit()) {
+      for (const o of Array.from(v)) {
+        const t = o.getAttribute("data-state");
+        t && (t === "opened" || t === "opening") && o.close();
       }
-      this.state = "opening", this.inert = !0, this.j(), (e = this.b) == null || e.setAttribute("aria-expanded", "true"), this.g = void 0, this.h = !1;
+      this.state = "opening", this.inert = !0, this._setPopoverPosition(), (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "true"), this._nextFocusedElement = void 0, this._skipCloseFocus = !1;
     }
   }
   /** Closes the popover. */
   close(e) {
-    var t;
-    this.state !== "opened" && this.state !== "opening" || (this.l = e, this.willClose.emit({ closeTarget: e }) && (this.state = "closing", this.inert = !0, (t = this.b) == null || t.setAttribute("aria-expanded", "false")));
+    var o;
+    this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = e, this.willClose.emit({ closeTarget: e }) && (this.state = "closing", this.inert = !0, (o = this._triggerElement) == null || o.setAttribute("aria-expanded", "false")));
   }
   // Closes the popover on "Esc" key pressed and traps focus within the popover.
-  p(e) {
+  _onKeydownEvent(e) {
     if (this.state === "opened" && e.key === "Escape") {
       this.close();
       return;
     }
   }
   // Removes trigger click listener on trigger change.
-  q(e, t) {
-    var o, i;
-    e !== t && ((o = this.d) == null || o.abort(), (i = this.c) == null || i.abort(), this.k());
+  _removeTriggerClickListener(e, o) {
+    var t, i;
+    e !== o && ((t = this._popoverController) == null || t.abort(), (i = this._openStateController) == null || i.abort(), this._configure());
   }
   connectedCallback() {
-    super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++D}`), this.k(), this.state = "closed", d.add(this);
+    super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++M}`), this._configure(), this.state = "closed", v.add(this);
   }
   willUpdate(e) {
-    super.willUpdate(e), e.has("trigger") && this.q(this.trigger, e.get("trigger")), e.has("hoverTrigger") && this.k();
+    super.willUpdate(e), e.has("trigger") && this._removeTriggerClickListener(this.trigger, e.get("trigger")), e.has("hoverTrigger") && this._configure();
   }
   firstUpdated(e) {
-    super.firstUpdated(e), this.f && (this.a.addEventListener("mouseenter", () => this.r()), this.a.addEventListener("mouseleave", () => this.s()));
+    super.firstUpdated(e), this._hoverTrigger && (this._overlay.addEventListener("mouseenter", () => this._onOverlayMouseEnter()), this._overlay.addEventListener("mouseleave", () => this._onOverlayMouseLeave()));
   }
   disconnectedCallback() {
-    var e, t;
-    super.disconnectedCallback(), (e = this.d) == null || e.abort(), (t = this.c) == null || t.abort(), this.i.disconnect(), d.delete(this);
+    var e, o;
+    super.disconnectedCallback(), (e = this._popoverController) == null || e.abort(), (o = this._openStateController) == null || o.abort(), this._focusHandler.disconnect(), v.delete(this);
   }
   // Check if the trigger is valid and attach click event listeners.
-  k() {
+  _configure() {
     var e;
-    A(this.b), this.trigger && (this.b = _(this.trigger), this.b && (L(this.b, "dialog", this.id, this.state), this.f = this.hoverTrigger && !window.matchMedia("(pointer: coarse)").matches, (e = this.d) == null || e.abort(), this.d = new AbortController(), this.f ? (this.b.addEventListener("mouseenter", this.t, {
-      signal: this.d.signal
-    }), this.b.addEventListener("mouseleave", this.u, {
-      signal: this.d.signal
-    }), this.b.addEventListener(
+    P(this._triggerElement), this.trigger && (this._triggerElement = C(this.trigger), this._triggerElement && (L(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !window.matchMedia("(pointer: coarse)").matches, (e = this._popoverController) == null || e.abort(), this._popoverController = new AbortController(), this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, {
+      signal: this._popoverController.signal
+    }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, {
+      signal: this._popoverController.signal
+    }), this._triggerElement.addEventListener(
       "keydown",
-      (t) => {
-        (t.code === "Space" || t.code === "Enter") && this.open();
+      (o) => {
+        (o.code === "Space" || o.code === "Enter") && this.open();
       },
       {
-        signal: this.d.signal
+        signal: this._popoverController.signal
       }
-    )) : this.b.addEventListener(
+    )) : this._triggerElement.addEventListener(
       "click",
       () => {
         this.state === "closed" && this.open();
       },
       {
-        signal: this.d.signal
+        signal: this._popoverController.signal
       }
     )));
   }
-  v() {
-    this.c = new AbortController(), document.addEventListener("scroll", () => this.j(), {
+  _attachWindowEvents() {
+    this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
       passive: !0,
-      signal: this.c.signal
-    }), window.addEventListener("resize", () => this.j(), {
+      signal: this._openStateController.signal
+    }), window.addEventListener("resize", () => this._setPopoverPosition(), {
       passive: !0,
-      signal: this.c.signal
-    }), window.addEventListener("keydown", (e) => this.p(e), {
-      signal: this.c.signal
-    }), window.addEventListener("pointerdown", this.w, {
-      signal: this.c.signal
-    }), window.addEventListener("pointerup", this.x, {
-      signal: this.c.signal
+      signal: this._openStateController.signal
+    }), window.addEventListener("keydown", (e) => this._onKeydownEvent(e), {
+      signal: this._openStateController.signal
+    }), window.addEventListener("pointerdown", this._pointerDownListener, {
+      signal: this._openStateController.signal
+    }), window.addEventListener("pointerup", this._closeOnBackdropClick, {
+      signal: this._openStateController.signal
     });
   }
   // Close the popover on click of any element that has the 'sbb-popover-close' attribute.
-  y(e) {
-    const t = T(e, "sbb-popover-close", this);
-    t && !t.hasAttribute("disabled") && (clearTimeout(this.e), this.close(t));
+  _closeOnSbbPopoverCloseClick(e) {
+    const o = T(e, "sbb-popover-close", this);
+    o && !o.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(o));
   }
   // Set popover position (x, y) to '0' once the popover is closed and the transition ended to prevent the
   // viewport from overflowing. And set the focus to the first focusable element once the popover is open.
   // In rare cases it can be that the animationEnd event is triggered twice.
   // To avoid entering a corrupt state, exit when state is not expected.
-  z(e) {
-    var t, o, i, a;
+  _onPopoverAnimationEnd(e) {
+    var o, t, i, r;
     if (e.animationName === "open" && this.state === "opening")
-      this.state = "opened", this.didOpen.emit(), this.inert = !1, this.v(), this.A(), this.i.trap(this, {
-        postFilter: (r) => r !== this.a
+      this.state = "opened", this.didOpen.emit(), this.inert = !1, this._attachWindowEvents(), this._setPopoverFocus(), this._focusHandler.trap(this, {
+        postFilter: (a) => a !== this._overlay
       });
     else if (e.animationName === "close" && this.state === "closing") {
-      if (this.state = "closed", (o = (t = this.a) == null ? void 0 : t.firstElementChild) == null || o.scrollTo(0, 0), (i = this.a) == null || i.removeAttribute("tabindex"), !this.h) {
-        const r = this.g || this.b;
-        p(r), r == null || r.focus();
+      if (this.state = "closed", (t = (o = this._overlay) == null ? void 0 : o.firstElementChild) == null || t.scrollTo(0, 0), (i = this._overlay) == null || i.removeAttribute("tabindex"), !this._skipCloseFocus) {
+        const a = this._nextFocusedElement || this._triggerElement;
+        b(a), a == null || a.focus();
       }
-      this.didClose.emit({ closeTarget: this.l }), (a = this.c) == null || a.abort(), this.i.disconnect();
+      this.didClose.emit({ closeTarget: this._popoverCloseElement }), (r = this._openStateController) == null || r.abort(), this._focusHandler.disconnect();
     }
   }
   // Set focus on the first focusable element.
-  A() {
-    const e = this.shadowRoot.querySelector("[sbb-popover-close]") || x(
-      Array.from(this.children).filter((t) => t instanceof window.HTMLElement)
+  _setPopoverFocus() {
+    const e = this.shadowRoot.querySelector("[sbb-popover-close]") || y(
+      Array.from(this.children).filter((o) => o instanceof window.HTMLElement)
     );
-    e ? (p(e), e.focus()) : (this.a.setAttribute("tabindex", "0"), p(this.a), this.a.focus(), this.a.addEventListener(
+    e ? (b(e), e.focus()) : (this._overlay.setAttribute("tabindex", "0"), b(this._overlay), this._overlay.focus(), this._overlay.addEventListener(
       "blur",
       () => {
         setTimeout(() => {
-          var t;
-          document.visibilityState !== "hidden" && ((t = this.a) == null || t.removeAttribute("tabindex"), (this.state === "opened" || this.state === "opening") && (this.h = !0), this.close());
+          var o;
+          document.visibilityState !== "hidden" && ((o = this._overlay) == null || o.removeAttribute("tabindex"), (this.state === "opened" || this.state === "opening") && (this._skipCloseFocus = !0), this.close());
         });
       },
       {
-        signal: this.c.signal
+        signal: this._openStateController.signal
       }
     ));
   }
-  j() {
-    if (!this.a || !this.b)
+  _setPopoverPosition() {
+    if (!this._overlay || !this._triggerElement)
       return;
-    const e = z(
-      this.a,
-      this.b,
+    const e = O(
+      this._overlay,
+      this._triggerElement,
       this.shadowRoot.querySelector(".sbb-popover__container"),
       {
-        verticalOffset: F,
-        horizontalOffset: B,
+        verticalOffset: z,
+        horizontalOffset: D,
         centered: !0,
         responsiveHeight: !0
       }
     );
     this.setAttribute("data-position", e.alignment.vertical);
-    const t = this.b.getBoundingClientRect().left - e.left + this.b.clientWidth / 2 - 8;
-    this.style.setProperty("--sbb-popover-position-x", `${e.left}px`), this.style.setProperty("--sbb-popover-position-y", `${e.top}px`), this.style.setProperty("--sbb-popover-arrow-position-x", `${t}px`);
+    const o = this._triggerElement.getBoundingClientRect().left - e.left + this._triggerElement.clientWidth / 2 - 8;
+    this.style.setProperty("--sbb-popover-position-x", `${e.left}px`), this.style.setProperty("--sbb-popover-position-y", `${e.top}px`), this.style.setProperty("--sbb-popover-arrow-position-x", `${o}px`);
   }
   render() {
-    const e = h`
+    const e = d`
       <span class="sbb-popover__close">
         <sbb-secondary-button
-          aria-label=${this.accessibilityCloseLabel || k[this.o.current]}
+          aria-label=${this.accessibilityCloseLabel || k[this._language.current]}
           size="s"
           type="button"
           icon-name="cross-small"
@@ -192,19 +192,19 @@ let s = class extends E {
         ></sbb-secondary-button>
       </span>
     `;
-    return h`
+    return d`
       <div class="sbb-popover__container">
         <div
-          @animationend=${(t) => this.z(t)}
+          @animationend=${(o) => this._onPopoverAnimationEnd(o)}
           class="sbb-popover"
           role="tooltip"
-          ${g((t) => this.a = t)}
+          ${m((o) => this._overlay = o)}
         >
           <div
-            @click=${(t) => this.y(t)}
+            @click=${(o) => this._closeOnSbbPopoverCloseClick(o)}
             class="sbb-popover__content"
           >
-            ${!this.hideCloseButton && !this.f ? e : u}
+            ${!this.hideCloseButton && !this._hoverTrigger ? e : g}
             <span>
               <slot>No content</slot>
             </span>
@@ -214,27 +214,27 @@ let s = class extends E {
     `;
   }
 };
-s.styles = O;
+s.styles = S;
 n([
-  b()
+  l()
 ], s.prototype, "trigger", 2);
 n([
-  b({ attribute: "hide-close-button", type: Boolean })
+  l({ attribute: "hide-close-button", type: Boolean })
 ], s.prototype, "hideCloseButton", 2);
 n([
-  b({ attribute: "hover-trigger", type: Boolean })
+  l({ attribute: "hover-trigger", type: Boolean })
 ], s.prototype, "hoverTrigger", 2);
 n([
-  b({ attribute: "open-delay", type: Number })
+  l({ attribute: "open-delay", type: Number })
 ], s.prototype, "openDelay", 2);
 n([
-  b({ attribute: "close-delay", type: Number })
+  l({ attribute: "close-delay", type: Number })
 ], s.prototype, "closeDelay", 2);
 n([
-  b({ attribute: "accessibility-close-label" })
+  l({ attribute: "accessibility-close-label" })
 ], s.prototype, "accessibilityCloseLabel", 2);
 s = n([
-  m("sbb-popover")
+  f("sbb-popover")
 ], s);
 export {
   s as SbbPopoverElement

package/radio-button/common/radio-button-common.d.ts

@@ -0,0 +1,22 @@
+import { LitElement } from 'lit';
+import { SbbCheckedStateChange, SbbDisabledStateChange, SbbStateChange } from '../../core/interfaces.js';
+import { AbstractConstructor } from '../../core/mixins.js';
+import { SbbRadioButtonGroupElement } from '../radio-button-group.js';
+
+export type SbbRadioButtonSize = 's' | 'm';
+export type SbbRadioButtonStateChange = Extract<SbbStateChange, SbbDisabledStateChange | SbbCheckedStateChange>;
+export declare class SbbRadioButtonCommonElementMixinType {
+    get allowEmptySelection(): boolean;
+    set allowEmptySelection(boolean: boolean);
+    value?: string;
+    get disabled(): boolean;
+    set disabled(boolean: boolean);
+    get required(): boolean;
+    set required(boolean: boolean);
+    get group(): SbbRadioButtonGroupElement | null;
+    get checked(): boolean;
+    set checked(boolean: boolean);
+    select(): void;
+}
+export declare const SbbRadioButtonCommonElementMixin: <T extends AbstractConstructor<LitElement>>(superClass: T) => AbstractConstructor<SbbRadioButtonCommonElementMixinType> & T;
+//# sourceMappingURL=radio-button-common.d.ts.map

package/radio-button/common/radio-button-common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/common/radio-button-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAOtD,OAAO,KAAK,EACV,qBAAqB,EACrB,sBAAsB,EACtB,cAAc,EACf,MAAM,0BAA0B,CAAC;AAClC,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,sBAAsB,CAAC;AAChE,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,GAAG,GAAG,GAAG,CAAC;AAE3C,MAAM,MAAM,yBAAyB,GAAG,OAAO,CAC7C,cAAc,EACd,sBAAsB,GAAG,qBAAqB,CAC/C,CAAC;AAEF,MAAM,CAAC,OAAO,OAAO,oCAAoC;IACvD,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACjC,KAAK,CAAC,EAAE,MAAM,CAAC;IACtB,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,QAAQ,IAAI,OAAO,CAAC;IAC/B,IAAW,QAAQ,CAAC,OAAO,EADJ,OACI,EAAE;IAC7B,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IACtD,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,OAAO,EADJ,OACI,EAAE;IACrB,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,0DAC/B,CAAC,KACZ,oBAAoB,oCAAoC,CAAC,GAAG,CAmK9D,CAAC"}

package/radio-button/common.d.ts

@@ -0,0 +1,2 @@
+export * from './common/radio-button-common.js';
+//# sourceMappingURL=common.d.ts.map

package/radio-button/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/radio-button/common.ts"],"names":[],"mappings":"AAAA,cAAc,iCAAiC,CAAC;AAEhD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,8CAA8C,CAAC"}

package/radio-button/common.js

@@ -0,0 +1,105 @@
+import { property as b } from "lit/decorators.js";
+import { SbbConnectedAbortController as l } from "../core/controllers.js";
+import { hostAttributes as d } from "../core/decorators.js";
+import { setOrRemoveAttribute as c } from "../core/dom.js";
+import { HandlerRepository as h, formElementHandlerAspect as u, EventEmitter as p } from "../core/eventing.js";
+import { css as f } from "lit";
+var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, i = (s, e, t, o) => {
+  for (var r = o > 1 ? void 0 : o ? v(e, t) : e, a = s.length - 1, n; a >= 0; a--)
+    (n = s[a]) && (r = (o ? n(e, t, r) : n(r)) || r);
+  return o && r && m(e, t, r), r;
+};
+const z = (s) => {
+  let e = class extends s {
+    constructor() {
+      super(...arguments), this._allowEmptySelection = !1, this._disabled = !1, this._required = !1, this._group = null, this._checked = !1, this._size = "m", this._abort = new l(this), this._handlerRepository = new h(this, u), this._stateChange = new p(
+        this,
+        e.events.stateChange,
+        { bubbles: !0 }
+      );
+    }
+    set allowEmptySelection(t) {
+      this._allowEmptySelection = !!t;
+    }
+    get allowEmptySelection() {
+      var t;
+      return this._allowEmptySelection || (((t = this.group) == null ? void 0 : t.allowEmptySelection) ?? !1);
+    }
+    set disabled(t) {
+      this._disabled = !!t;
+    }
+    get disabled() {
+      var t;
+      return this._disabled || (((t = this.group) == null ? void 0 : t.disabled) ?? !1);
+    }
+    set required(t) {
+      this._required = !!t;
+    }
+    get required() {
+      var t;
+      return this._required || (((t = this.group) == null ? void 0 : t.required) ?? !1);
+    }
+    /**
+     * Reference to the connected radio button group.
+     */
+    get group() {
+      return this._group;
+    }
+    set checked(t) {
+      this._checked = !!t;
+    }
+    get checked() {
+      return this._checked;
+    }
+    set size(t) {
+      this._size = t;
+    }
+    get size() {
+      var t;
+      return ((t = this.group) == null ? void 0 : t.size) ?? this._size;
+    }
+    select() {
+      this.disabled || (this.allowEmptySelection ? this.checked = !this.checked : this.checked || (this.checked = !0));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._group = this.closest("sbb-radio-button-group");
+      const t = this._abort.signal;
+      this.addEventListener("click", (o) => this._handleClick(o), { signal: t }), this.addEventListener("keydown", (o) => this._handleKeyDown(o), { signal: t }), this._handlerRepository.connect(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._handlerRepository.disconnect();
+    }
+    willUpdate(t) {
+      super.willUpdate(t), t.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this.checked !== t.get("checked") && this._stateChange.emit({ type: "checked", checked: this.checked })), t.has("disabled") && (c(this, "aria-disabled", this.disabled ? "true" : null), this.disabled !== t.get("disabled") && this._stateChange.emit({ type: "disabled", disabled: this.disabled })), t.has("required") && this.setAttribute("aria-required", `${this.required}`);
+    }
+    _handleClick(t) {
+      t.preventDefault(), this.select();
+    }
+    _handleKeyDown(t) {
+      t.code === "Space" && this.select();
+    }
+  };
+  return e.events = {
+    stateChange: "stateChange"
+  }, i([
+    b({ attribute: "allow-empty-selection", type: Boolean })
+  ], e.prototype, "allowEmptySelection", 1), i([
+    b()
+  ], e.prototype, "value", 2), i([
+    b({ reflect: !0, type: Boolean })
+  ], e.prototype, "disabled", 1), i([
+    b({ reflect: !0, type: Boolean })
+  ], e.prototype, "required", 1), i([
+    b({ reflect: !0, type: Boolean })
+  ], e.prototype, "checked", 1), i([
+    b({ reflect: !0 })
+  ], e.prototype, "size", 1), e = i([
+    d({
+      role: "radio"
+    })
+  ], e), e;
+}, C = f`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 )}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host([checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host([disabled]){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}.sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}`;
+export {
+  z as SbbRadioButtonCommonElementMixin,
+  C as radioButtonCommonStyle
+};