@sbb-esta/lyne-elements 3.7.0 → 3.8.0

package/core/dom/queue-dom-content-loaded.js

@@ -0,0 +1,7 @@
+function n(t) {
+  const e = () => queueMicrotask(t);
+  document.readyState === "loading" ? document.addEventListener("DOMContentLoaded", e) : e();
+}
+export {
+  n as queueDomContentLoaded
+};

package/core/dom/set-or-remove-attribute.d.ts

@@ -5,4 +5,18 @@
  * @param value The attribute value
  */
 export declare function setOrRemoveAttribute(element: HTMLElement, attribute: string, value?: any): void;
+/**
+ * Add `value` to an attribute that accept a list of values. If the attribute is not set, it will be set to `value`.
+ * @param element The element that will have the attribute
+ * @param attribute The attribute name
+ * @param value The value to add
+ */
+export declare function addToListAttribute(element: HTMLElement, attribute: string, value: string): void;
+/**
+ * Remove `value` from an attribute list of values. If the attribute results empty, it will be removed.
+ * @param element The element with the attribute
+ * @param attribute The attribute name
+ * @param value The value to remove from the list
+ */
+export declare function removeFromListAttribute(element: HTMLElement, attribute: string, value: string): void;
 //# sourceMappingURL=set-or-remove-attribute.d.ts.map

package/core/dom/set-or-remove-attribute.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"set-or-remove-attribute.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/set-or-remove-attribute.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAM/F"}
+{"version":3,"file":"set-or-remove-attribute.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/set-or-remove-attribute.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,wBAAgB,oBAAoB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAM/F;AAED;;;;;GAKG;AACH,wBAAgB,kBAAkB,CAAC,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,GAAG,IAAI,CAM/F;AAED;;;;;GAKG;AACH,wBAAgB,uBAAuB,CACrC,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,MAAM,EACjB,KAAK,EAAE,MAAM,GACZ,IAAI,CAMN"}

package/core/dom/set-or-remove-attribute.js

@@ -1,6 +1,14 @@
-function i(t, e, r) {
-  r ? t.setAttribute(e, r) : t.removeAttribute(e);
+function e(t, i, r) {
+  r ? t.setAttribute(i, r) : t.removeAttribute(i);
+}
+function o(t, i, r) {
+  e(t, i, `${t.getAttribute(i) ?? ""} ${r}`.trim());
+}
+function A(t, i, r) {
+  e(t, i, t.getAttribute(i)?.replace(r, "").trim());
 }
 export {
-  i as setOrRemoveAttribute
+  o as addToListAttribute,
+  A as removeFromListAttribute,
+  e as setOrRemoveAttribute
 };

package/core/dom.d.ts

@@ -3,9 +3,11 @@
  */
 export * from './dom/animation.js';
 export * from './dom/breakpoint.js';
+export * from './dom/contains-pierce-shadow-dom.js';
 export * from './dom/host-context.js';
 export * from './dom/lean-context.js';
 export * from './dom/set-or-remove-attribute.js';
 export * from './dom/platform.js';
+export * from './dom/queue-dom-content-loaded.js';
 export * from './dom/scroll.js';
 //# sourceMappingURL=dom.d.ts.map

package/core/dom.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/elements/core/dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC"}
+{"version":3,"file":"dom.d.ts","sourceRoot":"","sources":["../../../src/elements/core/dom.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,oBAAoB,CAAC;AACnC,cAAc,qBAAqB,CAAC;AACpC,cAAc,qCAAqC,CAAC;AACpD,cAAc,uBAAuB,CAAC;AACtC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kCAAkC,CAAC;AACjD,cAAc,mBAAmB,CAAC;AAClC,cAAc,mCAAmC,CAAC;AAClD,cAAc,iBAAiB,CAAC"}

package/core/dom.js

@@ -1,29 +1,35 @@
-import { isZeroAnimationDuration as o } from "./dom/animation.js";
+import { isZeroAnimationDuration as e } from "./dom/animation.js";
 import { breakpoints as t, isBreakpoint as s } from "./dom/breakpoint.js";
-import { ACTION_ELEMENTS as m, hostContext as n } from "./dom/host-context.js";
-import { isLean as x } from "./dom/lean-context.js";
-import { setOrRemoveAttribute as l } from "./dom/set-or-remove-attribute.js";
-import { isAndroid as b, isBlink as d, isChromium as k, isEdge as A, isFirefox as E, isIOS as O, isMacOS as c, isNextjs as u, isSafari as C, isTrident as N, isWebkit as T } from "./dom/platform.js";
-import { SbbScrollHandler as h, pageScrollDisabled as B } from "./dom/scroll.js";
+import { containsPierceShadowDom as a } from "./dom/contains-pierce-shadow-dom.js";
+import { ACTION_ELEMENTS as p, hostContext as x } from "./dom/host-context.js";
+import { isLean as f } from "./dom/lean-context.js";
+import { addToListAttribute as S, removeFromListAttribute as l, setOrRemoveAttribute as u } from "./dom/set-or-remove-attribute.js";
+import { isAndroid as c, isBlink as L, isChromium as k, isEdge as C, isFirefox as D, isIOS as E, isMacOS as O, isNextjs as T, isSafari as h, isTrident as N, isWebkit as g } from "./dom/platform.js";
+import { queueDomContentLoaded as B } from "./dom/queue-dom-content-loaded.js";
+import { SbbScrollHandler as I, pageScrollDisabled as M } from "./dom/scroll.js";
 export {
-  m as ACTION_ELEMENTS,
-  h as SbbScrollHandler,
+  p as ACTION_ELEMENTS,
+  I as SbbScrollHandler,
+  S as addToListAttribute,
   t as breakpoints,
-  n as hostContext,
-  b as isAndroid,
-  d as isBlink,
+  a as containsPierceShadowDom,
+  x as hostContext,
+  c as isAndroid,
+  L as isBlink,
   s as isBreakpoint,
   k as isChromium,
-  A as isEdge,
-  E as isFirefox,
-  O as isIOS,
-  x as isLean,
-  c as isMacOS,
-  u as isNextjs,
-  C as isSafari,
+  C as isEdge,
+  D as isFirefox,
+  E as isIOS,
+  f as isLean,
+  O as isMacOS,
+  T as isNextjs,
+  h as isSafari,
   N as isTrident,
-  T as isWebkit,
-  o as isZeroAnimationDuration,
-  B as pageScrollDisabled,
-  l as setOrRemoveAttribute
+  g as isWebkit,
+  e as isZeroAnimationDuration,
+  M as pageScrollDisabled,
+  B as queueDomContentLoaded,
+  l as removeFromListAttribute,
+  u as setOrRemoveAttribute
 };

package/core/images.d.ts

@@ -1,3 +1,7 @@
+/**
+ * This demo pictures must not be used in production code.
+ * Internally we should only use them in stories.
+ */
 declare const sampleImages: string[];
 export default sampleImages;
 //# sourceMappingURL=images.d.ts.map

package/core/images.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../../src/elements/core/images.ts"],"names":[],"mappings":"AAAA,QAAA,MAAM,YAAY,EAAE,MAAM,EAWzB,CAAC;AAEF,eAAe,YAAY,CAAC"}
+{"version":3,"file":"images.d.ts","sourceRoot":"","sources":["../../../src/elements/core/images.ts"],"names":[],"mappings":"AAAA;;;GAGG;AACH,QAAA,MAAM,YAAY,EAAE,MAAM,EAWzB,CAAC;AAEF,eAAe,YAAY,CAAC"}

package/core/images.js

@@ -1,15 +1,15 @@
-const n = [
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Billetkontrolle.jpg",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Hoehenrundweg-Gryden-Lenk.jpg",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Kaufmann-frau.jpg",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Corona-Schutzkonzept.jpg",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Digitale-Werbung-SBB.jpg",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Bahnhof-Luzern.jpg",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Einheitswagen-IV-EuroCity.jpg",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Einsatzstrecken_EW4-Eurocity.jpg",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Frau-No-Results.png",
-  "https://cdn.img.sbb.ch/content/dam/internet/lyne/Helpteaser-Background-Landscape.png"
+const e = [
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Billetkontrolle.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Hoehenrundweg-Gryden-Lenk.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Kaufmann-frau.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Corona-Schutzkonzept.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Digitale-Werbung-SBB.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Bahnhof-Luzern.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Einheitswagen-IV-EuroCity.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Einsatzstrecken_EW4-Eurocity.jpg",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Frau-No-Results.png",
+  "https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Helpteaser-Background-Landscape.png"
 ];
 export {
-  n as default
+  e as default
 };

package/core/mixins.js

@@ -1,10 +1,10 @@
-import { SbbAnimationCompleteMixin as i } from "./mixins/animation-complete-mixin.js";
+import { SbbAnimationCompleteMixin as b } from "./mixins/animation-complete-mixin.js";
 import { SbbDisabledInteractiveMixin as a, SbbDisabledMixin as t, SbbDisabledTabIndexActionMixin as l } from "./mixins/disabled-mixin.js";
-import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as x } from "./mixins/element-internals-mixin.js";
+import { SbbElementInternalsMixin as c, appendAriaElements as p, removeAriaElements as u } from "./mixins/element-internals-mixin.js";
 import { SbbFormAssociatedCheckboxMixin as v } from "./mixins/form-associated-checkbox-mixin.js";
 import { SbbFormAssociatedInputMixin as f } from "./mixins/form-associated-input-mixin.js";
-import { SbbFormAssociatedMixin as g } from "./mixins/form-associated-mixin.js";
-import { SbbFormAssociatedRadioButtonMixin as M, radioButtonRegistry as k } from "./mixins/form-associated-radio-button-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";
@@ -14,17 +14,17 @@ import { SbbReadonlyMixin as P } from "./mixins/readonly-mixin.js";
 import { SbbSelectionPanelMixin as q } from "./mixins/selection-panel-mixin.js";
 import { SbbUpdateSchedulerMixin as H } from "./mixins/update-scheduler-mixin.js";
 import { css as e } from "lit";
-const n = e`:host{--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-color-white) );--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-border-radius: var( --sbb-selection-expansion-panel-border-radius, var(--sbb-border-radius-4x) );--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-1x) );--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-4x) );--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-suffix-color: var(--sbb-color-charcoal);--sbb-selection-panel-subtext-color: var(--sbb-color-granite);display:block;outline:none!important}:host([size=s]){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxxs)}:host([color=milk]){--sbb-selection-panel-background: var( --sbb-selection-panel-inner-background, var(--sbb-color-milk) )}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host(:is([data-checked]):not(:disabled,[disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var( --sbb-selection-panel-inner-border-width, var(--sbb-border-width-2x) )}:host(:is(:disabled,[disabled])){--sbb-selection-panel-cursor: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
+const n = 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: 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: default}.sbb-selection-panel{display:block;cursor:var(--sbb-selection-panel-cursor);position:relative;border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);padding:var(--sbb-selection-panel-input-padding);background-color:var(--sbb-selection-panel-background);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;inset:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}:host(:focus-visible) .sbb-selection-panel{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;inset:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}slot[name=suffix]{color:var(--sbb-selection-panel-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-selection-panel-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}`;
 export {
-  i as SbbAnimationCompleteMixin,
+  b as SbbAnimationCompleteMixin,
   a as SbbDisabledInteractiveMixin,
   t as SbbDisabledMixin,
   l as SbbDisabledTabIndexActionMixin,
   c as SbbElementInternalsMixin,
   v as SbbFormAssociatedCheckboxMixin,
   f as SbbFormAssociatedInputMixin,
-  g as SbbFormAssociatedMixin,
-  M as SbbFormAssociatedRadioButtonMixin,
+  h as SbbFormAssociatedMixin,
+  k as SbbFormAssociatedRadioButtonMixin,
   y as SbbHydrationMixin,
   C as SbbNamedSlotListMixin,
   I as SbbNegativeMixin,
@@ -35,6 +35,6 @@ export {
   H as SbbUpdateSchedulerMixin,
   p as appendAriaElements,
   n as panelCommonStyle,
-  k as radioButtonRegistry,
-  x as removeAriaElements
+  M as radioButtonRegistry,
+  u as removeAriaElements
 };

package/core/overlay/overlay-outside-pointer-event-listener.d.ts

@@ -0,0 +1,26 @@
+/**
+ * Listens globally to pointer events that happen outside the overlay area.
+ *
+ * Ref: https://github.com/angular/components/blob/main/src/cdk/overlay/dispatchers/overlay-outside-click-dispatcher.ts
+ */
+export declare class SbbOverlayOutsidePointerEventListener {
+    private _overlays;
+    private _pointerDownEventTarget?;
+    private _abortController?;
+    private _cursorOriginalValue?;
+    connect(overlay: HTMLElement): void;
+    disconnect(overlay: HTMLElement): void;
+    private _addGlobalEventListeners;
+    /** Store pointerdown event target to track origin of click. */
+    private _pointerDownListener;
+    /** Click event listener that will be attached to the body propagate phase. */
+    private _clickListener;
+}
+/** The global instance for listening for outside pointer events. */
+export declare const sbbOverlayOutsidePointerEventListener: SbbOverlayOutsidePointerEventListener;
+declare global {
+    interface GlobalEventHandlersEventMap {
+        overlayOutsidePointer: CustomEvent;
+    }
+}
+//# sourceMappingURL=overlay-outside-pointer-event-listener.d.ts.map

package/core/overlay/overlay-outside-pointer-event-listener.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"overlay-outside-pointer-event-listener.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/overlay-outside-pointer-event-listener.ts"],"names":[],"mappings":"AAEA;;;;GAIG;AACH,qBAAa,qCAAqC;IAChD,OAAO,CAAC,SAAS,CAA0B;IAC3C,OAAO,CAAC,uBAAuB,CAAC,CAAc;IAC9C,OAAO,CAAC,gBAAgB,CAAC,CAAkB;IAC3C,OAAO,CAAC,oBAAoB,CAAC,CAAS;IAE/B,OAAO,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAiBnC,UAAU,CAAC,OAAO,EAAE,WAAW,GAAG,IAAI;IAW7C,OAAO,CAAC,wBAAwB;IAkBhC,+DAA+D;IAC/D,OAAO,CAAC,oBAAoB,CAE1B;IAEF,8EAA8E;IAC9E,OAAO,CAAC,cAAc,CAyBpB;CACH;AAED,oEAAoE;AACpE,eAAO,MAAM,qCAAqC,uCAA8C,CAAC;AAEjG,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,2BAA2B;QACnC,qBAAqB,EAAE,WAAW,CAAC;KACpC;CACF"}

package/core/overlay/overlay-outside-pointer-event-listener.js

@@ -0,0 +1,37 @@
+import { containsPierceShadowDom as r, isIOS as i, isAndroid as n } from "../dom.js";
+class a {
+  constructor() {
+    this._overlays = /* @__PURE__ */ new Set(), this._pointerDownListener = (t) => {
+      this._pointerDownEventTarget = t.composedPath()[0];
+    }, this._clickListener = (t) => {
+      const e = t.composedPath()[0], s = t.type === "click" && this._pointerDownEventTarget ? this._pointerDownEventTarget : e;
+      this._pointerDownEventTarget = void 0;
+      for (const o of Array.from(this._overlays).reverse()) {
+        if (r(o, e) || r(o, s))
+          break;
+        o.dispatchEvent(new CustomEvent("overlayOutsidePointer"));
+      }
+    };
+  }
+  connect(t) {
+    this._overlays.size || (this._addGlobalEventListeners(), i && (this._cursorOriginalValue = document.body.style.cursor, document.body.style.cursor = "pointer")), this._overlays.add(t);
+  }
+  disconnect(t) {
+    this._overlays.delete(t), this._overlays.size || (this._abortController?.abort(), this._abortController = void 0, i && (document.body.style.cursor = this._cursorOriginalValue));
+  }
+  _addGlobalEventListeners() {
+    const t = document.body;
+    this._abortController = new AbortController();
+    const e = {
+      capture: !0,
+      passive: !0,
+      signal: this._abortController.signal
+    };
+    t.addEventListener("click", this._clickListener, e), !n && !i && (t.addEventListener("pointerdown", this._pointerDownListener, e), t.addEventListener("auxclick", this._clickListener, e), t.addEventListener("contextmenu", this._clickListener, e));
+  }
+}
+const d = new a();
+export {
+  a as SbbOverlayOutsidePointerEventListener,
+  d as sbbOverlayOutsidePointerEventListener
+};

package/core/overlay.d.ts

@@ -3,6 +3,7 @@
  */
 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';
 //# sourceMappingURL=overlay.d.ts.map

package/core/overlay.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/core/overlay.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,yCAAyC,CAAC;AACxD,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"overlay.d.ts","sourceRoot":"","sources":["../../../src/elements/core/overlay.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sBAAsB,CAAC;AACrC,cAAc,mCAAmC,CAAC;AAClD,cAAc,qDAAqD,CAAC;AACpE,cAAc,yCAAyC,CAAC;AACxD,cAAc,uBAAuB,CAAC"}

package/core/overlay.js

@@ -1,15 +1,18 @@
-import { overlayGapFixCorners as t } from "./overlay/overlay.js";
+import { overlayGapFixCorners as r } from "./overlay/overlay.js";
 import { setOverlayPosition as i } from "./overlay/overlay-option-panel.js";
-import { removeAriaComboBoxAttributes as s, removeAriaOverlayTriggerAttributes as a, setAriaComboBoxAttributes as n, setAriaOverlayTriggerAttributes as l } from "./overlay/overlay-trigger-attributes.js";
-import { getElementPosition as g, getElementRectangle as v, isEventOnElement as x } from "./overlay/position.js";
+import { SbbOverlayOutsidePointerEventListener as n, sbbOverlayOutsidePointerEventListener as a } from "./overlay/overlay-outside-pointer-event-listener.js";
+import { removeAriaComboBoxAttributes as v, removeAriaOverlayTriggerAttributes as b, setAriaComboBoxAttributes as l, setAriaOverlayTriggerAttributes as x } from "./overlay/overlay-trigger-attributes.js";
+import { getElementPosition as O, getElementRectangle as g, isEventOnElement as p } from "./overlay/position.js";
 export {
-  g as getElementPosition,
-  v as getElementRectangle,
-  x as isEventOnElement,
-  t as overlayGapFixCorners,
-  s as removeAriaComboBoxAttributes,
-  a as removeAriaOverlayTriggerAttributes,
-  n as setAriaComboBoxAttributes,
-  l as setAriaOverlayTriggerAttributes,
+  n as SbbOverlayOutsidePointerEventListener,
+  O as getElementPosition,
+  g as getElementRectangle,
+  p as isEventOnElement,
+  r as overlayGapFixCorners,
+  v as removeAriaComboBoxAttributes,
+  b as removeAriaOverlayTriggerAttributes,
+  a as sbbOverlayOutsidePointerEventListener,
+  l as setAriaComboBoxAttributes,
+  x as setAriaOverlayTriggerAttributes,
   i as setOverlayPosition
 };

package/core/styles/core.scss

@@ -1,4 +1,8 @@
-@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as sbb-css-tokens;
+$theme: 'standard' !default;
+
+@use 'node_modules_@sbb-esta_lyne-design-tokens_dist_scss_sbb-variables_css--mixin.scss' as sbb-css-tokens with (
+  $theme: $theme
+);
 @use './core/mediaqueries';
 @use './core/functions';
 @use './mixins/a11y';
@@ -98,10 +102,24 @@
 
 @include font-face.font-declarations;
 
+// TODO: discuss where to add these classes
+.sbb-dark {
+  color-scheme: dark;
+}
+
+.sbb-light {
+  color-scheme: light;
+}
+
+.sbb-light-dark {
+  color-scheme: light dark;
+}
+
 html {
   @include typo.text;
 
   color: var(--sbb-font-default-color);
+  background-color: var(--sbb-background-color-1);
 }
 
 // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
@@ -153,8 +171,8 @@ html {
 
   // TODO: Remove if webkit bug is resolved: https://bugs.webkit.org/show_bug.cgi?id=223814
   &:not([floating-label]) :where(input, select, textarea, sbb-select):disabled::placeholder {
-    color: var(--sbb-color-granite);
-    -webkit-text-fill-color: var(--sbb-color-granite);
+    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
+    -webkit-text-fill-color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   }
 
   // Fix positioning issue for select which occurs in Safari
@@ -211,12 +229,12 @@ html {
     )
   ),
   :is(.ng-submitted, .sbb-show-errors) &:has(:is(:invalid, .ng-invalid)) {
-    --sbb-form-field-border-color: var(--sbb-color-red125);
-    --sbb-form-field-text-color: var(--sbb-color-red125);
+    --sbb-form-field-border-color: var(--sbb-color-error);
+    --sbb-form-field-text-color: var(--sbb-color-error);
 
     &[negative] {
-      --sbb-form-field-border-color: var(--sbb-color-red-mode-dark);
-      --sbb-form-field-text-color: var(--sbb-color-red-mode-dark);
+      --sbb-form-field-border-color: var(--sbb-color-red85);
+      --sbb-form-field-text-color: var(--sbb-color-red85);
     }
 
     @include a11y.if-forced-colors {
@@ -239,7 +257,8 @@ html {
   sbb-popover,
   sbb-select,
   sbb-skiplink-list,
-  sbb-toast
+  sbb-toast,
+  sbb-tooltip
 ):not(:defined) {
   display: none;
 }
@@ -254,7 +273,8 @@ html {
   sbb-navigation,
   sbb-overlay,
   sbb-popover,
-  sbb-toast
+  sbb-toast,
+  sbb-tooltip
 ) {
   @include popover.popover-reset;
 }
@@ -280,10 +300,11 @@ sbb-breadcrumb-group:not(:defined) {
   padding-inline: var(--sbb-spacing-fixed-4x);
   gap: var(--sbb-spacing-fixed-1x);
   align-items: baseline;
+  color: var(--sbb-color-1);
 
   strong + * {
     font-size: var(--sbb-font-size-text-xxs);
-    color: var(--sbb-color-granite);
+    color: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   }
 }
 
@@ -560,7 +581,7 @@ sbb-toggle:has(:focus-visible) {
 
 sbb-dialog-actions {
   sbb-dialog[negative] & {
-    --sbb-dialog-actions-border-color: var(--sbb-color-iron);
+    --sbb-dialog-actions-border-color: var(--sbb-background-color-4-negative);
   }
 
   sbb-dialog:state(overflows) & {
@@ -616,7 +637,13 @@ sbb-notification:has(sbb-title) {
 
 sbb-status:has(sbb-title) {
   --sbb-status-gap: var(--sbb-spacing-responsive-xxxs);
-  --_sbb-status-text-color-override: var(--sbb-color-granite);
+  --_sbb-status-text-color-override: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --_sbb-status-title-font-size: var(--sbb-font-size-title-5);
   --_sbb-status-title-line-height: var(--sbb-typo-line-height-titles);
 }
+
+.sbb-overlay-outlet {
+  position: fixed;
+  inset: 0;
+  pointer-events: none;
+}

package/core/styles/mixins/badge.scss

@@ -8,8 +8,8 @@
   justify-content: center;
   padding-inline: var(--sbb-spacing-fixed-1x);
   border-radius: var(--sbb-border-radius-infinity);
-  background-color: var(--sbb-color-red);
-  color: var(--sbb-color-white);
+  background-color: var(--sbb-color-primary);
+  color: var(--sbb-color-1-negative);
   min-width: var(--sbb-spacing-fixed-4x);
   max-height: var(--sbb-spacing-fixed-4x);
 }

package/core/styles/mixins/buttons.scss

@@ -57,13 +57,13 @@ $active: ':active, [data-active]';
 
 // Variables used in the icon-button
 @mixin icon-button-variables {
-  --sbb-button-color-text: var(--sbb-color-charcoal);
-  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
-  --sbb-button-color-hover-background: var(--sbb-color-milk);
-  --sbb-button-color-active-background: var(--sbb-color-cloud);
-  --sbb-button-color-disabled-background: var(--sbb-color-milk);
-  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
-  --sbb-button-color-disabled-text: var(--sbb-color-granite);
+  --sbb-button-color-text: var(--sbb-color-3);
+  --sbb-button-color-default-background: transparent;
+  --sbb-button-color-hover-background: var(--sbb-background-color-3);
+  --sbb-button-color-active-background: var(--sbb-background-color-4);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: light-dark(var(--sbb-color-granite), var(--sbb-color-smoke));
   --sbb-button-border-disabled-width: var(--sbb-border-width-1x);
   --sbb-button-border-disabled-style: dashed;
   --sbb-button-border-radius: var(--sbb-border-radius-infinity);
@@ -85,13 +85,13 @@ $active: ':active, [data-active]';
 
 // Variables used in the icon-button negative variant
 @mixin icon-button-variables-negative {
-  --sbb-button-color-text: var(--sbb-color-milk);
-  --sbb-button-color-default-background: var(--sbb-color-black-alpha-0);
-  --sbb-button-color-hover-background: var(--sbb-color-charcoal);
-  --sbb-button-color-active-background: var(--sbb-color-iron);
-  --sbb-button-color-disabled-background: var(--sbb-color-charcoal);
-  --sbb-button-color-disabled-border: var(--sbb-color-smoke);
-  --sbb-button-color-disabled-text: var(--sbb-color-smoke);
+  --sbb-button-color-text: var(--sbb-color-3-negative);
+  --sbb-button-color-default-background: transparent;
+  --sbb-button-color-hover-background: var(--sbb-background-color-3-negative);
+  --sbb-button-color-active-background: var(--sbb-background-color-4-negative);
+  --sbb-button-color-disabled-background: var(--sbb-background-color-3-negative);
+  --sbb-button-color-disabled-border: var(--sbb-border-color-5);
+  --sbb-button-color-disabled-text: var(--sbb-color-5);
 }
 
 // Default state for icon-button in form-field

package/core/styles/mixins/card.scss

@@ -10,7 +10,7 @@
 // -----------------------------------------------------------------------------
 
 @mixin card-variables {
-  --sbb-card-background-color: var(--sbb-color-white);
+  --sbb-card-background-color: var(--sbb-background-color-1);
   --sbb-card-border-radius: var(--sbb-border-radius-4x);
   --sbb-card-animation-duration: var(
     --sbb-disable-animation-duration,
@@ -23,7 +23,10 @@
 
   // As the card has always a white/milk background, we have to fix the focus outline color
   // to default color for cases where the card is used in a negative context.
-  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);
+  --sbb-focus-outline-color: light-dark(
+    var(--sbb-focus-outline-color-default),
+    var(--sbb-focus-outline-color-dark)
+  );
 
   @include a11y.if-forced-colors {
     --sbb-card-border-color: CanvasText;
@@ -32,27 +35,27 @@
 }
 
 @mixin card-variables--milk {
-  --sbb-card-background-color: var(--sbb-color-milk);
+  --sbb-card-background-color: var(--sbb-background-color-3);
   --sbb-card-border-color: transparent;
 }
 
 @mixin card-variables--transparent-bordered {
   --sbb-card-background-color: transparent;
-  --sbb-card-border-color: var(--sbb-color-cloud);
+  --sbb-card-border-color: var(--sbb-border-color-4-inverted);
   --sbb-card-border-width: var(--sbb-border-width-1x);
   --sbb-focus-outline-color: inherit;
 }
 
 @mixin card-variables--transparent-bordered-dashed {
   --sbb-card-background-color: transparent;
-  --sbb-card-border-color: var(--sbb-color-cement);
+  --sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));
   --sbb-card-border-width: var(--sbb-border-width-1x);
   --sbb-card-border-style: dashed;
   --sbb-focus-outline-color: inherit;
 }
 
 @mixin card-variables--active {
-  --sbb-card-border-color: var(--sbb-color-charcoal);
+  --sbb-card-border-color: var(--sbb-border-color-3);
   --sbb-card-border-width: var(--sbb-border-width-2x);
   --sbb-card-border-style: solid;
 

package/core/styles/mixins/chip.scss

@@ -3,23 +3,23 @@
 @use './typo';
 
 @mixin chip-label-variables--color-milk {
-  --sbb-chip-label-color: var(--sbb-color-granite);
-  --sbb-chip-label-background-color: var(--sbb-color-milk);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-3);
 }
 
 @mixin chip-label-variables--color-charcoal {
-  --sbb-chip-label-color: var(--sbb-color-white);
-  --sbb-chip-label-background-color: var(--sbb-color-charcoal);
+  --sbb-chip-label-color: var(--sbb-color-2-inverted);
+  --sbb-chip-label-background-color: var(--sbb-background-color-2-inverted);
 }
 
 @mixin chip-label-variables--color-white {
-  --sbb-chip-label-color: var(--sbb-color-granite);
-  --sbb-chip-label-background-color: var(--sbb-color-white);
+  --sbb-chip-label-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));
+  --sbb-chip-label-background-color: var(--sbb-background-color-1);
 }
 
 @mixin chip-label-variables--color-granite {
-  --sbb-chip-label-color: var(--sbb-color-white);
-  --sbb-chip-label-background-color: var(--sbb-color-granite);
+  --sbb-chip-label-color: var(--sbb-color-2-inverted);
+  --sbb-chip-label-background-color: light-dark(var(--sbb-color-granite), var(--sbb-color-storm));
 }
 
 @mixin chip-label-variables--size-xxs {

package/core/styles/mixins/image.scss

@@ -18,10 +18,13 @@
   grid-row: 2;
   grid-column: 1;
   padding-block-start: var(--sbb-spacing-fixed-4x);
+  color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
   @include typo.text-xs--regular;
 }
 
 @mixin figure-overlap-base {
+  // Chips or other image overlaying element should stay in light mode as the image stays in light mode as well.
+  color-scheme: only light;
   position: relative;
   order: 1; // Alternative to z-index
   grid-row: 1;