@sbb-esta/lyne-elements 4.0.0-next.2 → 4.0.0-next.4

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

@@ -1 +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"}
+{"version":3,"file":"selection-panel-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/selection-panel-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAEtC,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,kCAAkC,CAAC;AAChF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0CAA0C,CAAC;AAC3F,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0CAA0C,CAAC;AAG3F,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,OAAO,EAEL,KAAK,4BAA4B,EAClC,MAAM,8BAA8B,CAAC;AAEtC,MAAM,CAAC,OAAO,OAAO,0BAA0B;IAC7C,IAAW,KAAK,IAAI,0BAA0B,GAAG,uBAAuB,GAAG,IAAI,CAAC;IAChF,IAAW,KAAK,IAAI,0BAA0B,GAAG,uBAAuB,GAAG,IAAI,CAAC;IAEhF,SAAS,CAAC,kBAAkB,CAAC,IAAI,IAAI;CACtC;AAED;;GAEG;AAEH,eAAO,MAAM,sBAAsB,GAAI,CAAC,SAAS,mBAAmB,CAAC,UAAU,CAAC,EAC9E,YAAY,CAAC,KACZ,mBAAmB,CAAC,0BAA0B,GAAG,4BAA4B,CAAC,GAAG,CA8DnF,CAAC"}

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

@@ -1,87 +1,39 @@
-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);
+import { SbbPropertyWatcherController as o } from "../controllers.js";
+import { SbbElementInternalsMixin as r } from "./element-internals-mixin.js";
+const h = (t) => {
+  class s extends r(t) {
+    /** Group element if present */
+    get group() {
+      return this.closest?.("sbb-radio-button-group, sbb-checkbox-group") ?? null;
+    }
+    /** Input panel element */
+    get panel() {
+      return this.querySelector?.("sbb-radio-button-panel, sbb-checkbox-panel") ?? null;
+    }
+    constructor(...i) {
+      super(i), this._propertyWatcher = new o(this, () => this.panel, {
+        checked: (e) => {
+          this.toggleState("checked", e.checked), this.onInputStateChange?.();
+        },
+        disabled: (e) => {
+          this.toggleState("disabled", e.disabled), this.onInputStateChange?.();
+        },
+        size: (e) => {
+          this._previousSize && this.internals.states.delete(`size-${this._previousSize}`), this._previousSize = e.size, this._previousSize && this.internals.states.add(`size-${this._previousSize}`);
+        },
+        borderless: (e) => {
+          this.toggleState("borderless", e.borderless);
+        },
+        color: (e) => {
+          this._previousColor && this.internals.states.delete(`color-${this._previousColor}`), this._previousColor = e.color, this._previousColor && this.internals.states.add(`color-${this._previousColor}`);
         }
+      }), this.addEventListener?.("panelconnected", () => this._propertyWatcher.connect());
     }
-  }, 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;
-})();
+    onInputStateChange() {
+    }
+  }
+  return s;
+};
 export {
-  P as SbbSelectionPanelMixin
+  h as SbbSelectionPanelMixin
 };

package/core/mixins/update-scheduler-mixin.d.ts

@@ -1,5 +1,5 @@
 import { LitElement } from 'lit';
-import { AbstractConstructor } from './constructor.js';
+import { AbstractConstructor } from './constructor.ts';
 export declare class SbbUpdateSchedulerMixinType {
     protected startUpdate(): void;
     protected completeUpdate(): void;

package/core/mixins.d.ts

@@ -1,20 +1,20 @@
 /**
  * @entrypoint
  */
-export * from './mixins/animation-complete-mixin.js';
-export * from './mixins/constructor.js';
-export * from './mixins/disabled-mixin.js';
-export * from './mixins/element-internals-mixin.js';
-export * from './mixins/form-associated-checkbox-mixin.js';
-export * from './mixins/form-associated-input-mixin.js';
-export * from './mixins/form-associated-mixin.js';
-export * from './mixins/form-associated-radio-button-mixin.js';
-export * from './mixins/hydration-mixin.js';
-export * from './mixins/named-slot-list-mixin.js';
-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';
+export * from './mixins/animation-complete-mixin.ts';
+export * from './mixins/constructor.ts';
+export * from './mixins/disabled-mixin.ts';
+export * from './mixins/element-internals-mixin.ts';
+export * from './mixins/form-associated-checkbox-mixin.ts';
+export * from './mixins/form-associated-input-mixin.ts';
+export * from './mixins/form-associated-mixin.ts';
+export * from './mixins/form-associated-radio-button-mixin.ts';
+export * from './mixins/hydration-mixin.ts';
+export * from './mixins/named-slot-list-mixin.ts';
+export * from './mixins/negative-mixin.ts';
+export * from './mixins/panel-mixin.ts';
+export * from './mixins/required-mixin.ts';
+export * from './mixins/readonly-mixin.ts';
+export * from './mixins/selection-panel-mixin.ts';
+export * from './mixins/update-scheduler-mixin.ts';
 //# sourceMappingURL=mixins.d.ts.map

package/core/mixins.js

@@ -1,40 +1,41 @@
 import { SbbAnimationCompleteMixin as b } from "./mixins/animation-complete-mixin.js";
-import { SbbDisabledInteractiveMixin as t, SbbDisabledMixin as a, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
-import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as u } from "./mixins/element-internals-mixin.js";
+import { SbbDisabledInteractiveMixin as a, SbbDisabledMixin as r, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
+import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as u, ɵstateController 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 h } from "./mixins/form-associated-mixin.js";
-import { SbbFormAssociatedRadioButtonMixin as k, radioButtonRegistry as M } from "./mixins/form-associated-radio-button-mixin.js";
-import { SbbHydrationMixin as y } from "./mixins/hydration-mixin.js";
-import { SbbNamedSlotListMixin as C } from "./mixins/named-slot-list-mixin.js";
-import { SbbNegativeMixin as I } from "./mixins/negative-mixin.js";
+import { SbbFormAssociatedInputMixin as h } from "./mixins/form-associated-input-mixin.js";
+import { SbbFormAssociatedMixin as g } from "./mixins/form-associated-mixin.js";
+import { SbbFormAssociatedRadioButtonMixin as M, radioButtonRegistry as w } from "./mixins/form-associated-radio-button-mixin.js";
+import { SbbHydrationMixin as A } from "./mixins/hydration-mixin.js";
+import { SbbNamedSlotListMixin as F } from "./mixins/named-slot-list-mixin.js";
+import { SbbNegativeMixin as R } 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 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 { SbbUpdateSchedulerMixin as L } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const s = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-background-color-1) );--sbb-selection-panel-border-color: var(--sbb-border-color-4-inverted);--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: var(--sbb-cursor-pointer);--sbb-selection-panel-suffix-color: var(--sbb-color-3);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);--sbb-selection-panel-subtext-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));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-background-color-3) )}: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-border-color-3);--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: var(--sbb-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(:is(:state(slotted-subtext),[state--slotted-subtext]))) slot[name=subtext]{display:none}`;
+const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-selection-panel-background-default) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-selection-panel-border-width-default) );--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );display:block;outline:none!important}:host([size=xs]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-xs);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-xs) var(--sbb-selection-panel-input-padding-inline-xs)}:host([size=s]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-s);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-s) var(--sbb-selection-panel-input-padding-inline-s)}:host([size=m]){--sbb-selection-panel-checkbox-dimension: var(--sbb-checkbox-dimension-m);--sbb-selection-panel-input-padding: var(--sbb-selection-panel-input-padding-block-m) var(--sbb-selection-panel-input-padding-inline-m)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-selection-panel-background-milk) )}:host([borderless]:not(:is(:state(checked),[state--checked]))){--sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-borderless)}:host(:is(:is(:state(checked),[state--checked])):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-selection-panel-border-color-checked);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-selection-panel-border-width-checked) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: var(--sbb-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:calc(var(--sbb-selection-panel-checkbox-dimension) + var(--sbb-spacing-fixed-2x))}:host(:not(:is(:state(slotted-subtext),[state--slotted-subtext]))) slot[name=subtext]{display:none}`;
 export {
   b as SbbAnimationCompleteMixin,
-  t as SbbDisabledInteractiveMixin,
-  a as SbbDisabledMixin,
+  a as SbbDisabledInteractiveMixin,
+  r as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
   c as SbbElementInternalsMixin,
   v as SbbFormAssociatedCheckboxMixin,
-  f as SbbFormAssociatedInputMixin,
-  h as SbbFormAssociatedMixin,
-  k as SbbFormAssociatedRadioButtonMixin,
-  y as SbbHydrationMixin,
-  C as SbbNamedSlotListMixin,
-  I as SbbNegativeMixin,
+  h as SbbFormAssociatedInputMixin,
+  g as SbbFormAssociatedMixin,
+  M as SbbFormAssociatedRadioButtonMixin,
+  A as SbbHydrationMixin,
+  F as SbbNamedSlotListMixin,
+  R as SbbNegativeMixin,
   D as SbbPanelMixin,
   P as SbbReadonlyMixin,
   B as SbbRequiredMixin,
   q as SbbSelectionPanelMixin,
-  H as SbbUpdateSchedulerMixin,
+  L as SbbUpdateSchedulerMixin,
   p as appendAriaElements,
-  s as panelCommonStyle,
-  M as radioButtonRegistry,
-  u as removeAriaElements
+  n as panelCommonStyle,
+  w as radioButtonRegistry,
+  u as removeAriaElements,
+  x as ɵstateController
 };

package/core/overlay/overlay-option-panel.d.ts

@@ -1,3 +1,4 @@
+import { SbbElementInternalsMixinType } from '../mixins.ts';
 /**
  * Places the overlay in the correct position.
  * @param dialog The reference to the dialog element.
@@ -7,5 +8,5 @@
  * @param element The reference to the component.
  * @param position The allowed position of the overlay relative to the origin.
  */
-export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement, position?: 'auto' | 'above' | 'below'): void;
+export declare function setOverlayPosition(dialog: HTMLElement, originElement: HTMLElement, optionContainer: HTMLElement, container: HTMLElement, element: HTMLElement & SbbElementInternalsMixinType, position?: 'auto' | 'above' | 'below'): void;
 //# sourceMappingURL=overlay-option-panel.d.ts.map

package/core/overlay/overlay-option-panel.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAEA;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,EACpB,QAAQ,GAAE,MAAM,GAAG,OAAO,GAAG,OAAgB,GAC5C,IAAI,CAsBN"}
+{"version":3,"file":"overlay-option-panel.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-option-panel.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,4BAA4B,EAAoB,MAAM,cAAc,CAAC;AAInF;;;;;;;;GAQG;AACH,wBAAgB,kBAAkB,CAChC,MAAM,EAAE,WAAW,EACnB,aAAa,EAAE,WAAW,EAC1B,eAAe,EAAE,WAAW,EAC5B,SAAS,EAAE,WAAW,EACtB,OAAO,EAAE,WAAW,GAAG,4BAA4B,EACnD,QAAQ,GAAE,MAAM,GAAG,OAAO,GAAG,OAAgB,GAC5C,IAAI,CA6BN"}

package/core/overlay/overlay-option-panel.js

@@ -1,14 +1,17 @@
+import { ɵstateController as l } from "../mixins.js";
 import { getElementPosition as r } from "./position.js";
-function b(e, o, i, a, t, p = "auto") {
-  if (!e || !o)
+function y(i, t, n, a, o, p = "auto") {
+  if (!i || !t)
     return;
-  t.style.setProperty("--sbb-options-panel-width", `${o.offsetWidth}px`), t.style.setProperty("--sbb-options-panel-origin-height", `${o.offsetHeight}px`);
-  const s = r(i, o, a, {
+  o.style.setProperty("--sbb-options-panel-width", `${t.offsetWidth}px`), o.style.setProperty("--sbb-options-panel-origin-height", `${t.offsetHeight}px`);
+  const e = r(n, t, a, {
     forceBelow: p === "below",
     forceAbove: p === "above"
   });
-  t.style.setProperty("--sbb-options-panel-position-x", `${s.left}px`), t.style.setProperty("--sbb-options-panel-position-y", `${s.top}px`), t.style.setProperty("--sbb-options-panel-max-height", s.maxHeight), t.setAttribute("data-options-panel-position", s.alignment.vertical), o.setAttribute("data-options-panel-position", s.alignment.vertical);
+  o.style.setProperty("--sbb-options-panel-position-x", `${e.left}px`), o.style.setProperty("--sbb-options-panel-position-y", `${e.top}px`), o.style.setProperty("--sbb-options-panel-max-height", e.maxHeight);
+  const s = l(o);
+  e.alignment.vertical === "above" ? (s.add("options-panel-position-above"), s.delete("options-panel-position-below")) : (s.add("options-panel-position-below"), s.delete("options-panel-position-above")), t.setAttribute("data-options-panel-position", e.alignment.vertical);
 }
 export {
-  b as setOverlayPosition
+  y as setOverlayPosition
 };

package/core/overlay.d.ts

@@ -1,9 +1,9 @@
 /**
  * @entrypoint
  */
-export * from './overlay/overlay.js';
-export * from './overlay/overlay-option-panel.js';
-export * from './overlay/overlay-outside-pointer-event-listener.js';
-export * from './overlay/overlay-trigger-attributes.js';
-export * from './overlay/position.js';
+export * from './overlay/overlay.ts';
+export * from './overlay/overlay-option-panel.ts';
+export * from './overlay/overlay-outside-pointer-event-listener.ts';
+export * from './overlay/overlay-trigger-attributes.ts';
+export * from './overlay/position.ts';
 //# sourceMappingURL=overlay.d.ts.map

package/core/styles/core/functions.scss

@@ -1,6 +1,26 @@
 @use 'sass:math';
+@use 'sass:map';
+@use 'sass:string';
+@use 'sass:list';
 
 @function px-to-rem-build($size) {
   // size: value in px (no unit)
   @return ((math.div($size, 16)) * 1rem);
 }
+
+@function theme-select($theme-values, $theme) {
+  @if map.has-key($theme-values, $theme) {
+    @return map.get($theme-values, $theme);
+  } @else {
+    @return map.get($theme-values, 'standard');
+  }
+}
+
+@function theme-pattern-select($theme-values, $theme) {
+  @each $sub-theme, $value in $theme-values {
+    @if string.index($theme, $sub-theme) {
+      @return $value;
+    }
+  }
+  @return list.nth(map.values($theme-values), 1);
+}

package/core/styles/core.scss

@@ -14,6 +14,41 @@ $theme: 'standard' !default;
 @use './mixins/scrollbar';
 @use './mixins/typo';
 
+@use '../../card/card/card.global' as card with (
+  $theme: $theme
+);
+@use '../../card/card-badge/card-badge.global' as card-badge with (
+  $theme: $theme
+);
+@use '../../core/mixins/panel-common.global' as panel-common with (
+  $theme: $theme
+);
+@use '../../checkbox/checkbox/checkbox.global' as checkbox with (
+  $theme: $theme
+);
+@use '../../checkbox/checkbox-group/checkbox-group.global' as checkbox-group with (
+  $theme: $theme
+);
+@use '../../checkbox/common/checkbox-common.global' as checkbox-common with (
+  $theme: $theme
+);
+@use '../../radio-button/common/radio-button-common.global' as radio-button-common with (
+  $theme: $theme
+);
+@use '../../radio-button/radio-button-group/radio-button-group.global' as radio-button-group with (
+  $theme: $theme
+);
+@use '../../selection-action-panel/selection-action-panel.global' as selection-action-panel with (
+  $theme: $theme
+);
+@use '../../selection-expansion-panel/selection-expansion-panel.global' as selection-expansion-panel
+  with (
+  $theme: $theme
+);
+@use '../../visual-checkbox/visual-checkbox.global' as visual-checkbox with (
+  $theme: $theme
+);
+
 @include helpers.box-sizing;
 
 // Core variables
@@ -21,10 +56,30 @@ $theme: 'standard' !default;
   // Grab CSS vars defined by `@sbb-esta/lyne-design-tokens` package
   @include sbb-css-tokens.base;
 
+  @include card.base;
+  @include card-badge.base;
+  @include panel-common.base;
+  @include checkbox.base;
+  @include checkbox-group.base;
+  @include checkbox-common.base;
+  @include radio-button-common.base;
+  @include radio-button-group.base;
+  @include selection-action-panel.base;
+  @include selection-expansion-panel.base;
+  @include visual-checkbox.base;
+
+  @include a11y.if-forced-colors {
+    @include sbb-css-tokens.forced-colors;
+
+    @include card.base-forced-colors;
+    @include card-badge.base-forced-colors;
+    @include visual-checkbox.base-forced-colors;
+    @include radio-button-common.base-forced-colors;
+  }
+
   // Train formation
   --sbb-train-formation-wagon-width: #{functions.px-to-rem-build(80)};
   --sbb-train-formation-wagon-height: #{functions.px-to-rem-build(40)};
-  --sbb-train-formation-wagon-border-radius: #{functions.px-to-rem-build(12)};
   --sbb-train-formation-wagon-gap: var(--sbb-spacing-fixed-1x);
 
   // Header
@@ -130,6 +185,7 @@ $theme: 'standard' !default;
 html {
   @include typo.text;
 
+  color-scheme: light dark;
   color: var(--sbb-font-color-default);
   background-color: var(--sbb-background-color-1);
 }
@@ -299,7 +355,7 @@ sbb-breadcrumb-group:not(:defined) {
 
 // Every element in the Light DOM of a sbb-card which is focusable should receive this attribute.
 // This style enables accessing focusable elements inside an sbb-card.
-[data-card-focusable] {
+:is(sbb-card, sbb-flip-card) .sbb-action {
   pointer-events: all;
 }
 
@@ -479,7 +535,7 @@ sbb-train-formation[view='top'] sbb-train-wagon {
 
 // Skip animation for the container, content and sidebars when a sidebar requests it
 // (during initialization or if animation is disabled, but only during transition)
-sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
+sbb-sidebar-container:has(> sbb-sidebar:state(skip-animation)) {
   --sbb-sidebar-container-animation-duration: 0s;
 }
 
@@ -490,10 +546,10 @@ sbb-sidebar-container:has(> sbb-sidebar[data-skip-animation]) {
 sbb-sidebar-container:is(
     :has(
       > sbb-sidebar:not([position='end']):is(
-          [data-state='closing'],
-          [data-state='closed'],
+          :state(state-closing),
+          :state(state-closed),
           [mode='over'],
-          [data-mode-over-forced]
+          :state(mode-over-forced)
         )
     ),
     :not(:has(> sbb-sidebar:not([position='end'])))
@@ -509,10 +565,10 @@ sbb-sidebar-container:is(
 sbb-sidebar-container:is(
     :has(
       > sbb-sidebar[position='end']:is(
-          [data-state='closing'],
-          [data-state='closed'],
+          :state(state-closing),
+          :state(state-closed),
           [mode='over'],
-          [data-mode-over-forced]
+          :state(mode-over-forced)
         )
     ),
     :not(:has(> sbb-sidebar[position='end']))
@@ -523,9 +579,9 @@ sbb-sidebar-container:is(
 
 // Toggles visibility of backdrop if there is an affected sidebar inside the container.
 sbb-sidebar-container:has(
-  > sbb-sidebar:is([mode='over'], [data-mode-over-forced]):is(
-      [data-state='opening'],
-      [data-state='opened']
+  > sbb-sidebar:is([mode='over'], :state(mode-over-forced)):is(
+      :state(state-opening),
+      :state(state-opened)
     )
 ) {
   --sbb-sidebar-container__backdrop-visibility: visible;

package/core/styles/lean-theme.scss

@@ -0,0 +1,3 @@
+@use './theme' with (
+  $theme: 'lean'
+);