@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/popover/popover.js

@@ -1,265 +1,4 @@
-var W = (s) => {
-  throw TypeError(s);
-};
-var j = (s, i, r) => i.has(s) || W("Cannot " + r);
-var p = (s, i, r) => (j(s, i, "read from private field"), r ? r.call(s) : i.get(s)), c = (s, i, r) => i.has(s) ? W("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(s) : i.set(s, r), n = (s, i, r, b) => (j(s, i, "write to private field"), b ? b.call(s, r) : i.set(s, r), r);
-import { __runInitializers as l, __esDecorate as h } from "tslib";
-import { css as J, isServer as G, html as Q, nothing as K } from "lit";
-import { customElement as ee, property as y } from "lit/decorators.js";
-import { ref as te } from "lit/directives/ref.js";
-import { SbbFocusHandler as oe, IS_FOCUSABLE_QUERY as se, setModalityOnNextFocus as E, getFirstFocusableElement as ie } from "../core/a11y.js";
-import { SbbOpenCloseBaseElement as re } from "../core/base-elements.js";
-import { SbbMediaQueryPointerCoarse as ae, SbbEscapableOverlayController as ne, SbbLanguageController as le } from "../core/controllers.js";
-import { hostAttributes as be, forceType as w } from "../core/decorators.js";
-import { isZeroAnimationDuration as pe, findReferencedElement as ce } from "../core/dom.js";
-import { EventEmitter as V, composedPathHasAttribute as he } from "../core/eventing.js";
-import { i18nClosePopover as de } from "../core/i18n.js";
-import { SbbHydrationMixin as ve } from "../core/mixins.js";
-import { isEventOnElement as X, removeAriaOverlayTriggerAttributes as ue, setAriaOverlayTriggerAttributes as ge, getElementPosition as _e } from "../core/overlay.js";
-import "../button/secondary-button.js";
-const me = J`*,: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-duration, 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:none}:host([data-state]:not([data-state=closed])){display:block;--sbb-popover-inset: 0}:host([data-position=above]){--sbb-popover-transform: translateY(calc(var(--sbb-spacing-fixed-2x) * -1))}.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{z-index:-1;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)}@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)}}`, fe = 16, ye = 32;
-let we = 0;
-const T = /* @__PURE__ */ new Set(), Ce = G ? !1 : matchMedia(ae).matches;
-let Re = (() => {
-  var d, v, u, g, _, m, a;
-  let s = [ee("sbb-popover"), be({ popover: "manual" })], i, r = [], b, k = ve(re), D, L = [], S = [], O, P = [], z = [], A, B = [], F = [], M, I = [], H = [], R, $ = [], N = [], U, Y = [], Z = [];
-  var C = (a = class extends k {
-    constructor() {
-      super(...arguments);
-      c(this, d);
-      c(this, v);
-      c(this, u);
-      c(this, g);
-      c(this, _);
-      c(this, m);
-      n(this, d, l(this, L, null)), n(this, v, (l(this, S), l(this, P, !1))), n(this, u, (l(this, z), l(this, B, !1))), n(this, g, (l(this, F), l(this, I, 0))), n(this, _, (l(this, H), l(this, $, 0))), n(this, m, (l(this, N), l(this, Y, ""))), this.willClose = (l(this, Z), new V(this, C.events.willClose, { cancelable: !0 })), this.didClose = new V(this, C.events.didClose, { cancelable: !0 }), this._skipCloseFocus = !1, this._sbbEscapableOverlayController = new ne(this), this._focusHandler = new oe(), this._hoverTrigger = !1, this._language = new le(this), this._pointerDownListener = (t) => {
-        this._isPointerDownEventOnPopover = X(this._overlay, t);
-      }, this._closeOnBackdropClick = (t) => {
-        !this._isPointerDownEventOnPopover && !X(this._overlay, t) && (this._nextFocusedElement = t.composedPath().filter((e) => e instanceof window.HTMLElement).find((e) => e.matches(se)), 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));
-      };
-    }
-    /**
-     * The element that will trigger the popover overlay.
-     * Accepts both a string (id of an element) or an HTML element.
-     */
-    get trigger() {
-      return p(this, d);
-    }
-    set trigger(t) {
-      n(this, d, t);
-    }
-    /** Whether the close button should be hidden. */
-    get hideCloseButton() {
-      return p(this, v);
-    }
-    set hideCloseButton(t) {
-      n(this, v, t);
-    }
-    /** Whether the popover should be triggered on hover. */
-    get hoverTrigger() {
-      return p(this, u);
-    }
-    set hoverTrigger(t) {
-      n(this, u, t);
-    }
-    /** Open the popover after a certain delay. */
-    get openDelay() {
-      return p(this, g);
-    }
-    set openDelay(t) {
-      n(this, g, t);
-    }
-    /** Close the popover after a certain delay. */
-    get closeDelay() {
-      return p(this, _);
-    }
-    set closeDelay(t) {
-      n(this, _, t);
-    }
-    /** This will be forwarded as aria-label to the close button element. */
-    get accessibilityCloseLabel() {
-      return p(this, m);
-    }
-    set accessibilityCloseLabel(t) {
-      n(this, m, t);
-    }
-    /** Opens the popover on trigger click. */
-    open() {
-      var t, e;
-      if (!(this.state !== "closed" && this.state !== "closing" || !this._overlay) && this.willOpen.emit()) {
-        for (const o of Array.from(T)) {
-          const f = o.getAttribute("data-state");
-          f && (f === "opened" || f === "opening") && o.close();
-        }
-        (t = this.showPopover) == null || t.call(this), this.state = "opening", this.inert = !0, this._setPopoverPosition(), (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "true"), this._nextFocusedElement = void 0, this._skipCloseFocus = !1, this._isZeroAnimationDuration() && this._handleOpening();
-      }
-    }
-    /** Closes the popover. */
-    close(t) {
-      var e;
-      this.state !== "opened" && this.state !== "opening" || (this._popoverCloseElement = t, this.willClose.emit({ closeTarget: t }) && (this.state = "closing", this.inert = !0, (e = this._triggerElement) == null || e.setAttribute("aria-expanded", "false"), this._isZeroAnimationDuration() && this._handleClosing()));
-    }
-    _isZeroAnimationDuration() {
-      return pe(this, "--sbb-popover-animation-duration");
-    }
-    _handleClosing() {
-      var t, e, o, f, q;
-      if (this.state = "closed", (t = this.hidePopover) == null || t.call(this), (o = (e = this._overlay) == null ? void 0 : e.firstElementChild) == null || o.scrollTo(0, 0), (f = this._overlay) == null || f.removeAttribute("tabindex"), !this._skipCloseFocus) {
-        const x = this._nextFocusedElement || this._triggerElement;
-        E(x), x == null || x.focus();
-      }
-      this._sbbEscapableOverlayController.disconnect(), this.didClose.emit({ closeTarget: this._popoverCloseElement }), (q = this._openStateController) == null || q.abort(), this._focusHandler.disconnect();
-    }
-    _handleOpening() {
-      this.state = "opened", this.inert = !1, this._attachWindowEvents(), this._sbbEscapableOverlayController.connect(), this._setPopoverFocus(), this._focusHandler.trap(this, {
-        postFilter: (t) => t !== this._overlay
-      }), this.didOpen.emit();
-    }
-    connectedCallback() {
-      super.connectedCallback(), this.id || (this.id = this.id || `sbb-popover-${++we}`), this._configure(), this.state = "closed", T.add(this);
-    }
-    willUpdate(t) {
-      var e, o;
-      super.willUpdate(t), t.has("trigger") && this.trigger !== t.get("trigger") && ((e = this._popoverController) == null || e.abort(), (o = this._openStateController) == null || o.abort(), this._configure()), t.has("hoverTrigger") && this._configure();
-    }
-    firstUpdated(t) {
-      super.firstUpdated(t), this._hoverTrigger && (this._overlay.addEventListener("mouseenter", () => this._onOverlayMouseEnter()), this._overlay.addEventListener("mouseleave", () => this._onOverlayMouseLeave()));
-    }
-    disconnectedCallback() {
-      var t, e;
-      super.disconnectedCallback(), (t = this._popoverController) == null || t.abort(), (e = this._openStateController) == null || e.abort(), this._focusHandler.disconnect(), T.delete(this);
-    }
-    // Check if the trigger is valid and attach click event listeners.
-    _configure() {
-      var e;
-      if (G)
-        return;
-      if (this.hydrationRequired) {
-        this.hydrationComplete.then(() => this._configure());
-        return;
-      }
-      if (ue(this._triggerElement), !this.trigger || (this._triggerElement = ce(this.trigger), !this._triggerElement))
-        return;
-      ge(this._triggerElement, "dialog", this.id, this.state), this._hoverTrigger = this.hoverTrigger && !Ce, (e = this._popoverController) == null || e.abort();
-      const { signal: t } = this._popoverController = new AbortController();
-      this._hoverTrigger ? (this._triggerElement.addEventListener("mouseenter", this._onTriggerMouseEnter, { signal: t }), this._triggerElement.addEventListener("mouseleave", this._onTriggerMouseLeave, { signal: t }), this._triggerElement.addEventListener("keydown", (o) => {
-        (o.code === "Space" || o.code === "Enter") && this.open();
-      }, { signal: t })) : this._triggerElement.addEventListener("click", () => {
-        this.state === "closed" && this.open();
-      }, { signal: t });
-    }
-    _attachWindowEvents() {
-      this._openStateController = new AbortController(), document.addEventListener("scroll", () => this._setPopoverPosition(), {
-        passive: !0,
-        signal: this._openStateController.signal,
-        // Without capture, other scroll contexts would not bubble to this event listener.
-        // Capture allows us to react to all scroll contexts in this DOM.
-        capture: !0
-      }), window.addEventListener("resize", () => this._setPopoverPosition(), {
-        passive: !0,
-        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.
-    _closeOnSbbPopoverCloseClick(t) {
-      const e = he(t, "sbb-popover-close", this);
-      e && !e.hasAttribute("disabled") && (clearTimeout(this._closeTimeout), this.close(e));
-    }
-    // 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.
-    _onPopoverAnimationEnd(t) {
-      t.animationName === "open" && this.state === "opening" ? this._handleOpening() : t.animationName === "close" && this.state === "closing" && this._handleClosing();
-    }
-    // Set focus on the first focusable element.
-    _setPopoverFocus() {
-      const t = this.shadowRoot.querySelector("[sbb-popover-close]") || ie(Array.from(this.children).filter((e) => e instanceof window.HTMLElement));
-      t ? (E(t), t.focus()) : (this._overlay.setAttribute("tabindex", "0"), E(this._overlay), this._overlay.focus(), this._overlay.addEventListener("blur", () => {
-        setTimeout(() => {
-          var e;
-          document.visibilityState !== "hidden" && ((e = this._overlay) == null || e.removeAttribute("tabindex"), (this.state === "opened" || this.state === "opening") && (this._skipCloseFocus = !0), this.close());
-        });
-      }, {
-        signal: this._openStateController.signal
-      }));
-    }
-    _setPopoverPosition() {
-      if (!this._overlay || !this._triggerElement)
-        return;
-      const t = _e(this._overlay, this._triggerElement, this.shadowRoot.querySelector(".sbb-popover__container"), {
-        verticalOffset: fe,
-        horizontalOffset: ye,
-        centered: !0,
-        responsiveHeight: !0
-      });
-      this.setAttribute("data-position", t.alignment.vertical);
-      const e = this._triggerElement.getBoundingClientRect().left - t.left + this._triggerElement.clientWidth / 2 - 8;
-      this.style.setProperty("--sbb-popover-position-x", `${t.left}px`), this.style.setProperty("--sbb-popover-position-y", `${t.top}px`), this.style.setProperty("--sbb-popover-arrow-position-x", `${e}px`);
-    }
-    render() {
-      const t = Q`
-      <span class="sbb-popover__close">
-        <sbb-secondary-button
-          aria-label=${this.accessibilityCloseLabel || de[this._language.current]}
-          size="s"
-          type="button"
-          icon-name="cross-small"
-          sbb-popover-close
-        ></sbb-secondary-button>
-      </span>
-    `;
-      return Q`
-      <div class="sbb-popover__container">
-        <div
-          @animationend=${this._onPopoverAnimationEnd}
-          class="sbb-popover"
-          role="tooltip"
-          ${te((e) => this._overlay = e)}
-        >
-          <div
-            @click=${(e) => this._closeOnSbbPopoverCloseClick(e)}
-            class="sbb-popover__content"
-          >
-            ${!this.hideCloseButton && !this._hoverTrigger ? t : K}
-            <span>
-              <slot>No content</slot>
-            </span>
-          </div>
-        </div>
-      </div>
-    `;
-    }
-  }, d = new WeakMap(), v = new WeakMap(), u = new WeakMap(), g = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), b = a, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(k[Symbol.metadata] ?? null) : void 0;
-    D = [y()], O = [w(), y({ attribute: "hide-close-button", type: Boolean })], A = [w(), y({ attribute: "hover-trigger", type: Boolean })], M = [w(), y({ attribute: "open-delay", type: Number })], R = [w(), y({ attribute: "close-delay", type: Number })], U = [w(), y({ attribute: "accessibility-close-label" })], h(a, null, D, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, o) => {
-      e.trigger = o;
-    } }, metadata: t }, L, S), h(a, null, O, { kind: "accessor", name: "hideCloseButton", static: !1, private: !1, access: { has: (e) => "hideCloseButton" in e, get: (e) => e.hideCloseButton, set: (e, o) => {
-      e.hideCloseButton = o;
-    } }, metadata: t }, P, z), h(a, null, A, { kind: "accessor", name: "hoverTrigger", static: !1, private: !1, access: { has: (e) => "hoverTrigger" in e, get: (e) => e.hoverTrigger, set: (e, o) => {
-      e.hoverTrigger = o;
-    } }, metadata: t }, B, F), h(a, null, M, { kind: "accessor", name: "openDelay", static: !1, private: !1, access: { has: (e) => "openDelay" in e, get: (e) => e.openDelay, set: (e, o) => {
-      e.openDelay = o;
-    } }, metadata: t }, I, H), h(a, null, R, { kind: "accessor", name: "closeDelay", static: !1, private: !1, access: { has: (e) => "closeDelay" in e, get: (e) => e.closeDelay, set: (e, o) => {
-      e.closeDelay = o;
-    } }, metadata: t }, $, N), h(a, null, U, { kind: "accessor", name: "accessibilityCloseLabel", static: !1, private: !1, access: { has: (e) => "accessibilityCloseLabel" in e, get: (e) => e.accessibilityCloseLabel, set: (e, o) => {
-      e.accessibilityCloseLabel = o;
-    } }, metadata: t }, Y, Z), h(null, i = { value: b }, s, { kind: "class", name: b.name, metadata: t }, null, r), C = b = i.value, t && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), a.styles = me, l(b, r), a);
-  return C = b;
-})();
+import { SbbPopoverElement as r } from "./popover/popover.js";
 export {
-  Re as SbbPopoverElement
+  r as SbbPopoverElement
 };

package/popover.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './popover/popover.js';
 export * from './popover/popover-trigger.js';
 //# sourceMappingURL=popover.d.ts.map

package/popover.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/elements/popover.ts"],"names":[],"mappings":"AAAA,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"popover.d.ts","sourceRoot":"","sources":["../../src/elements/popover.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sBAAsB,CAAC;AACrC,cAAc,8BAA8B,CAAC"}

package/popover.js

@@ -1,2 +1,6 @@
-export * from "./popover/popover.js";
-export * from "./popover/popover-trigger.js";
+import { SbbPopoverElement as r } from "./popover/popover/popover.js";
+import { SbbPopoverTriggerElement as m } from "./popover/popover-trigger/popover-trigger.js";
+export {
+  r as SbbPopoverElement,
+  m as SbbPopoverTriggerElement
+};

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

@@ -1 +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,EAAE,MAAM,KAAK,CAAC;AAItC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAEhB,KAAK,qCAAqC,EAC3C,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,oCAAqC,SAAQ,qCAAqC;IACrG,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACxC,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAChF,YAAY,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CA6F9D,CAAC"}
+{"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,EAAE,MAAM,KAAK,CAAC;AAGtC,OAAO,EACL,KAAK,mBAAmB,EACxB,KAAK,WAAW,EAEhB,KAAK,qCAAqC,EAC3C,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAE3E,MAAM,MAAM,kBAAkB,GAAG,IAAI,GAAG,GAAG,GAAG,GAAG,CAAC;AAElD,MAAM,CAAC,OAAO,OAAO,oCAAqC,SAAQ,qCAAqC;IACrG,IAAW,mBAAmB,IAAI,OAAO,CAAC;IAC1C,IAAW,mBAAmB,CAAC,OAAO,EADJ,OACI,EAAE;IACxC,IAAW,KAAK,IAAI,0BAA0B,GAAG,IAAI,CAAC;IAC/C,MAAM,IAAI,IAAI;CACtB;AAGD,eAAO,MAAM,gCAAgC,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,EAChF,YAAY,CAAC,KACZ,mBAAmB,CAAC,oCAAoC,CAAC,GAAG,CA4F9D,CAAC"}

package/radio-button/common/radio-button-common.js

@@ -0,0 +1,64 @@
+import { __esDecorate as r, __runInitializers as c } from "tslib";
+import { property as h } from "lit/decorators.js";
+import { SbbFormAssociatedRadioButtonMixin as u } from "../../core/mixins.js";
+const b = (n) => (() => {
+  var t;
+  let a = u(n), s = [], o;
+  return t = class extends a {
+    /**
+     * Whether the radio can be deselected.
+     */
+    set allowEmptySelection(e) {
+      this._allowEmptySelection = !!e;
+    }
+    get allowEmptySelection() {
+      var e;
+      return this._allowEmptySelection || (((e = this.group) == null ? void 0 : e.allowEmptySelection) ?? !1);
+    }
+    /**
+     * Reference to the connected radio button group.
+     */
+    get group() {
+      return this._group;
+    }
+    constructor() {
+      var e, i;
+      super(), this._allowEmptySelection = (c(this, s), !1), this._group = null, (e = this.addEventListener) == null || e.call(this, "click", (l) => this._handleClick(l)), (i = this.addEventListener) == null || i.call(this, "keydown", (l) => this._handleKeyDown(l));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._group = this.closest("sbb-radio-button-group"), ["disabled", "required", "size"].forEach((e) => this.requestUpdate(e));
+    }
+    /**
+     * Set the radio-button as 'checked'; if 'allowEmptySelection', toggle the checked property.
+     * In both cases it emits the change events.
+     */
+    select() {
+      this.disabled || this.formDisabled || (this.allowEmptySelection ? (this.checked = !this.checked, this.emitChangeEvents()) : this.checked || (this.checked = !0, this.emitChangeEvents()));
+    }
+    isDisabledExternally() {
+      var e;
+      return ((e = this.group) == null ? void 0 : e.disabled) ?? !1;
+    }
+    isRequiredExternally() {
+      var e;
+      return ((e = this.group) == null ? void 0 : e.required) ?? !1;
+    }
+    async _handleClick(e) {
+      e.preventDefault(), this.select(), await this.updateComplete, this.focus();
+    }
+    _handleKeyDown(e) {
+      e.code === "Space" && (e.preventDefault(), this.select());
+    }
+  }, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    o = [h({ attribute: "allow-empty-selection", type: Boolean })], r(t, null, o, { kind: "setter", name: "allowEmptySelection", static: !1, private: !1, access: { has: (i) => "allowEmptySelection" in i, set: (i, l) => {
+      i.allowEmptySelection = l;
+    } }, metadata: e }, null, s), e && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), t.events = {
+    change: "change",
+    input: "input"
+  }, t;
+})();
+export {
+  b as SbbRadioButtonCommonElementMixin
+};

package/radio-button/common.d.ts

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

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

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

package/radio-button/common.js

@@ -1,67 +1,6 @@
-import { __esDecorate as n, __runInitializers as l } from "tslib";
-import { property as d } from "lit/decorators.js";
-import { setModalityOnNextFocus as c } from "../core/a11y.js";
-import { SbbFormAssociatedRadioButtonMixin as u } from "../core/mixins.js";
-import { css as h } from "lit";
-const x = (s) => (() => {
-  var o;
-  let i = u(s), b = [], a;
-  return o = class extends i {
-    /**
-     * Whether the radio can be deselected.
-     */
-    set allowEmptySelection(t) {
-      this._allowEmptySelection = !!t;
-    }
-    get allowEmptySelection() {
-      var t;
-      return this._allowEmptySelection || (((t = this.group) == null ? void 0 : t.allowEmptySelection) ?? !1);
-    }
-    /**
-     * Reference to the connected radio button group.
-     */
-    get group() {
-      return this._group;
-    }
-    constructor() {
-      var t, e;
-      super(), this._allowEmptySelection = (l(this, b), !1), this._group = null, (t = this.addEventListener) == null || t.call(this, "click", (r) => this._handleClick(r)), (e = this.addEventListener) == null || e.call(this, "keydown", (r) => this._handleKeyDown(r));
-    }
-    connectedCallback() {
-      super.connectedCallback(), this._group = this.closest("sbb-radio-button-group"), ["disabled", "required", "size"].forEach((t) => this.requestUpdate(t));
-    }
-    /**
-     * Set the radio-button as 'checked'; if 'allowEmptySelection', toggle the checked property.
-     * In both cases it emits the change events.
-     */
-    select() {
-      this.disabled || this.formDisabled || (this.allowEmptySelection ? (this.checked = !this.checked, this.emitChangeEvents()) : this.checked || (this.checked = !0, this.emitChangeEvents()));
-    }
-    isDisabledExternally() {
-      var t;
-      return ((t = this.group) == null ? void 0 : t.disabled) ?? !1;
-    }
-    isRequiredExternally() {
-      var t;
-      return ((t = this.group) == null ? void 0 : t.required) ?? !1;
-    }
-    async _handleClick(t) {
-      t.preventDefault(), this.select(), await this.updateComplete, c(this), this.focus();
-    }
-    _handleKeyDown(t) {
-      t.code === "Space" && (t.preventDefault(), this.select());
-    }
-  }, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(i[Symbol.metadata] ?? null) : void 0;
-    a = [d({ attribute: "allow-empty-selection", type: Boolean })], n(o, null, a, { kind: "setter", name: "allowEmptySelection", static: !1, private: !1, access: { has: (e) => "allowEmptySelection" in e, set: (e, r) => {
-      e.allowEmptySelection = r;
-    } }, metadata: t }, null, b), t && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), o.events = {
-    change: "change",
-    input: "input"
-  }, o;
-})(), w = h`*,: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([data-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([data-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}}:host([size=xs]){--sbb-radio-button-dimension: 1.25rem}.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{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;--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)}: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)}:host([size=xs]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-xs);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-duration, 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)}`;
+import { SbbRadioButtonCommonElementMixin as m } from "./common/radio-button-common.js";
+import { r } from "../radio-button-common-DJKWrKor.js";
 export {
-  x as SbbRadioButtonCommonElementMixin,
-  w as radioButtonCommonStyle
+  m as SbbRadioButtonCommonElementMixin,
+  r as radioButtonCommonStyle
 };

package/radio-button/radio-button/radio-button.js

@@ -0,0 +1,57 @@
+var p = (t) => {
+  throw TypeError(t);
+};
+var _ = (t, e, s) => e.has(t) || p("Cannot " + s);
+var h = (t, e, s) => (_(t, e, "read from private field"), s ? s.call(t) : e.get(t)), z = (t, e, s) => e.has(t) ? p("Cannot add the same private member more than once") : e instanceof WeakSet ? e.add(t) : e.set(t, s), v = (t, e, s, a) => (_(t, e, "write to private field"), a ? a.call(t, s) : e.set(t, s), s);
+import { __esDecorate as y, __runInitializers as b } from "tslib";
+import { css as g, LitElement as S, html as x } from "lit";
+import { customElement as E, property as k } from "lit/decorators.js";
+import { slotState as B, getOverride as C } from "../../core/decorators.js";
+import { isLean as D } from "../../core/dom.js";
+import { SbbRadioButtonCommonElementMixin as I, radioButtonCommonStyle as O } from "../common.js";
+const j = g`*,:before,:after{box-sizing:border-box}:host{display:block;outline:none!important}.sbb-radio-button{display:block}:host(:focus-visible) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}`;
+let F = (() => {
+  var l, o;
+  let t = [E("sbb-radio-button"), B()], e, s = [], a, u = I(S), c, m = [], d = [];
+  return o = class extends u {
+    constructor() {
+      super(...arguments);
+      z(this, l, b(this, m, D() ? "xs" : "m"));
+      b(this, d);
+    }
+    /**
+     * Size variant, either xs, s or m.
+     * @default 'm' / 'xs' (lean)
+     */
+    get size() {
+      return h(this, l);
+    }
+    set size(r) {
+      v(this, l, r);
+    }
+    render() {
+      return x`
+      <label class="sbb-radio-button">
+        <span class="sbb-radio-button__label-slot">
+          <slot></slot>
+        </span>
+      </label>
+    `;
+    }
+  }, l = new WeakMap(), a = o, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    c = [k({ reflect: !0 }), C((i, n) => {
+      var f;
+      return ((f = i.group) == null ? void 0 : f.size) ?? n;
+    })], y(o, null, c, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (i) => "size" in i, get: (i) => i.size, set: (i, n) => {
+      i.size = n;
+    } }, metadata: r }, m, d), y(null, e = { value: a }, t, { kind: "class", name: a.name, metadata: r }, null, s), a = e.value, r && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), o.styles = [O, j], o.events = {
+    stateChange: "stateChange",
+    change: "change",
+    input: "input"
+  }, b(a, s), a;
+})();
+export {
+  F as SbbRadioButtonElement
+};