@sbb-esta/lyne-elements 3.7.0 → 3.9.0

package/core/controllers/media-matchers-controller.js

@@ -1,9 +1,9 @@
-import { S as m, a as h, b as u, c as M } from "../../sbb-tokens-B3Eka-Tz.js";
-import { isServer as c } from "lit";
-const a = (n) => n / m, f = "(forced-colors: active)", p = "(any-hover: hover)", Q = "(pointer: coarse)", v = `(min-width: ${a(M)}rem)`, B = `(max-width: ${a(h)}rem)`, w = `(max-width: ${a(u)}rem)`, o = /* @__PURE__ */ new Map();
-class k {
-  constructor(e, r) {
-    this._queries = r, e.addController(this);
+import { S as p, a as b, b as g, c as y } from "../../sbb-tokens-B3Eka-Tz.js";
+import { isServer as n } from "lit";
+const c = (d) => d / p, k = "(forced-colors: active)", i = "(prefers-color-scheme: dark)", Q = "(any-hover: hover)", w = "(pointer: coarse)", L = `(min-width: ${c(y)}rem)`, B = `(max-width: ${c(b)}rem)`, C = `(max-width: ${c(g)}rem)`, a = /* @__PURE__ */ new Map();
+class M {
+  constructor(e, t) {
+    this._queries = t, e.addController(this);
   }
   /**
    * Returns whether the given query matches. Returns null with SSR.
@@ -11,33 +11,83 @@ class k {
    * @returns Whether the query matches or null with SSR.
    */
   matches(e) {
-    return c ? null : matchMedia(e).matches;
+    return n ? null : matchMedia(e).matches;
   }
   hostConnected() {
-    if (!c)
-      for (const [e, r] of Object.entries(this._queries)) {
-        const t = o.get(e);
-        if (t)
-          t.handlers.add(r);
+    if (!n)
+      for (const [e, t] of Object.entries(this._queries)) {
+        const r = a.get(e);
+        if (r)
+          r.handlers.add(t);
         else {
-          const i = matchMedia(e), s = /* @__PURE__ */ new Set([r]), d = (l) => s.forEach((b) => b(l.matches));
-          i.addEventListener("change", d), o.set(e, { mediaQueryList: i, handlers: s, eventHandler: d });
+          const o = matchMedia(e), h = /* @__PURE__ */ new Set([t]), u = (m) => h.forEach((f) => f(m.matches));
+          o.addEventListener("change", u), a.set(e, { mediaQueryList: o, handlers: h, eventHandler: u });
         }
       }
   }
   hostDisconnected() {
-    for (const [e, r] of Object.entries(this._queries)) {
-      const t = o.get(e);
-      t && (t.handlers.delete(r), t.handlers.size || o.delete(e));
+    for (const [e, t] of Object.entries(this._queries)) {
+      const r = a.get(e);
+      r && (r.handlers.delete(t), r.handlers.size || a.delete(e));
     }
   }
 }
+const s = class s extends M {
+  constructor(e, t) {
+    const r = () => {
+      t(this.matches()), this._host.toggleState("dark", this.matches());
+    };
+    super(e, {
+      [i]: r
+    }), this._host = e, this._onChangeWithStateUpdater = r;
+  }
+  static _readLightDarkClass() {
+    if (n)
+      return null;
+    const e = document.documentElement.classList;
+    return ["light-dark", "dark", "light"].find((t) => e.contains(`sbb-${t}`)) ?? null;
+  }
+  /**
+   * Requests an update of the dark mode state. This is needed when the color-scheme
+   * CSS property changes, as the media query does not pick this up automatically.
+   */
+  // eslint-disable-next-line lyne/needs-super-call-rule
+  static requestUpdate() {
+    const e = a.get(i);
+    e && e.handlers.forEach((t) => t(e.mediaQueryList.matches));
+  }
+  hostConnected() {
+    const e = (a.get(i)?.handlers.size ?? 0) === 0;
+    super.hostConnected(), e && s._observer.observe(document.documentElement, s._observerConfig), this._onChangeWithStateUpdater();
+  }
+  hostDisconnected() {
+    super.hostDisconnected(), (a.get(i)?.handlers.size ?? 0) === 0 && s._observer.disconnect();
+  }
+  matches() {
+    if (n)
+      return !1;
+    const e = getComputedStyle(this._host).getPropertyValue("color-scheme"), t = e.includes("dark"), r = e.trim() === "dark";
+    return super.matches(i) && t || r;
+  }
+};
+s._currentMode = s._readLightDarkClass(), s._observer = n ? null : new MutationObserver((e) => {
+  if (e[0].oldValue !== document.documentElement.getAttribute("class")) {
+    const t = s._readLightDarkClass();
+    s._currentMode !== t && (s.requestUpdate(), s._currentMode = t);
+  }
+}), s._observerConfig = {
+  attributeFilter: ["class"],
+  attributeOldValue: !0
+};
+let l = s;
 export {
-  k as SbbMediaMatcherController,
-  v as SbbMediaQueryBreakpointMediumAndAbove,
+  l as SbbDarkModeController,
+  M as SbbMediaMatcherController,
+  L as SbbMediaQueryBreakpointMediumAndAbove,
   B as SbbMediaQueryBreakpointMediumAndBelow,
-  w as SbbMediaQueryBreakpointSmallAndBelow,
-  f as SbbMediaQueryForcedColors,
-  p as SbbMediaQueryHover,
-  Q as SbbMediaQueryPointerCoarse
+  C as SbbMediaQueryBreakpointSmallAndBelow,
+  i as SbbMediaQueryDarkMode,
+  k as SbbMediaQueryForcedColors,
+  Q as SbbMediaQueryHover,
+  w as SbbMediaQueryPointerCoarse
 };

package/core/controllers.js

@@ -1,20 +1,22 @@
 import { SbbEscapableOverlayController as o } from "./controllers/escapable-overlay-controller.js";
-import { SbbIdReferenceController as t } from "./controllers/id-reference-controller.js";
-import { SbbInertController as a } from "./controllers/inert-controller.js";
-import { SbbLanguageController as S } from "./controllers/language-controller.js";
-import { SbbMediaMatcherController as i, SbbMediaQueryBreakpointMediumAndAbove as p, SbbMediaQueryBreakpointMediumAndBelow as M, SbbMediaQueryBreakpointSmallAndBelow as m, SbbMediaQueryForcedColors as u, SbbMediaQueryHover as C, SbbMediaQueryPointerCoarse as f } from "./controllers/media-matchers-controller.js";
-import { SbbSlotStateController as x } from "./controllers/slot-state-controller.js";
+import { SbbIdReferenceController as a } from "./controllers/id-reference-controller.js";
+import { SbbInertController as t } from "./controllers/inert-controller.js";
+import { SbbLanguageController as n } from "./controllers/language-controller.js";
+import { SbbDarkModeController as i, SbbMediaMatcherController as M, SbbMediaQueryBreakpointMediumAndAbove as p, SbbMediaQueryBreakpointMediumAndBelow as u, SbbMediaQueryBreakpointSmallAndBelow as m, SbbMediaQueryDarkMode as C, SbbMediaQueryForcedColors as y, SbbMediaQueryHover as f, SbbMediaQueryPointerCoarse as Q } from "./controllers/media-matchers-controller.js";
+import { SbbSlotStateController as k } from "./controllers/slot-state-controller.js";
 export {
+  i as SbbDarkModeController,
   o as SbbEscapableOverlayController,
-  t as SbbIdReferenceController,
-  a as SbbInertController,
-  S as SbbLanguageController,
-  i as SbbMediaMatcherController,
+  a as SbbIdReferenceController,
+  t as SbbInertController,
+  n as SbbLanguageController,
+  M as SbbMediaMatcherController,
   p as SbbMediaQueryBreakpointMediumAndAbove,
-  M as SbbMediaQueryBreakpointMediumAndBelow,
+  u as SbbMediaQueryBreakpointMediumAndBelow,
   m as SbbMediaQueryBreakpointSmallAndBelow,
-  u as SbbMediaQueryForcedColors,
-  C as SbbMediaQueryHover,
-  f as SbbMediaQueryPointerCoarse,
-  x as SbbSlotStateController
+  C as SbbMediaQueryDarkMode,
+  y as SbbMediaQueryForcedColors,
+  f as SbbMediaQueryHover,
+  Q as SbbMediaQueryPointerCoarse,
+  k as SbbSlotStateController
 };

package/core/dom/contains-pierce-shadow-dom.d.ts

@@ -0,0 +1,3 @@
+/** Equivalent to `Element.contains` while piercing shadow DOM. */
+export declare function containsPierceShadowDom(root: HTMLElement, child: HTMLElement | null): boolean;
+//# sourceMappingURL=contains-pierce-shadow-dom.d.ts.map

package/core/dom/contains-pierce-shadow-dom.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"contains-pierce-shadow-dom.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/contains-pierce-shadow-dom.ts"],"names":[],"mappings":"AAAA,kEAAkE;AAClE,wBAAgB,uBAAuB,CAAC,IAAI,EAAE,WAAW,EAAE,KAAK,EAAE,WAAW,GAAG,IAAI,GAAG,OAAO,CAY7F"}

package/core/dom/contains-pierce-shadow-dom.js

@@ -0,0 +1,12 @@
+function n(t, o) {
+  let e = o;
+  for (; e; ) {
+    if (e === t)
+      return !0;
+    e = e instanceof ShadowRoot ? e.host : e.parentNode;
+  }
+  return !1;
+}
+export {
+  n as containsPierceShadowDom
+};

package/core/dom/queue-dom-content-loaded.d.ts

@@ -0,0 +1,5 @@
+/**
+ * Postpone 'action' after the DOM is loaded.
+ */
+export declare function queueDomContentLoaded(action: () => void): void;
+//# sourceMappingURL=queue-dom-content-loaded.d.ts.map

package/core/dom/queue-dom-content-loaded.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"queue-dom-content-loaded.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/queue-dom-content-loaded.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,wBAAgB,qBAAqB,CAAC,MAAM,EAAE,MAAM,IAAI,GAAG,IAAI,CAO9D"}

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/position.d.ts

@@ -38,4 +38,24 @@ export declare function getElementPosition(element: HTMLElement, trigger: HTMLEl
     centered?: boolean;
     responsiveHeight?: boolean;
 }): SbbElementPositionInfos;
+/**
+ * Determines the position of an element relative to a trigger element by evaluating
+ * the optimal position based on the available space.
+ *
+ * @param element The element of which to calculate the position.
+ * @param trigger The element relative to which to calculate the position.
+ * @param container The element which has the position:fixed applied.
+ * @param properties Properties to take into account in calculations (optional).
+ * @param properties.verticalOffset The distance to be added between the element and the trigger (optional).
+ * @param properties.horizontalOffset The horizontal offset to be applied to the element (optional).
+ * @param properties.responsiveHeight Whether the element calculates its height based on its content (optional).
+ * @returns Returns an object containing the left position, the top position, the maximum height
+ * of the element and the current alignment object.
+ */
+export declare function getElementPositionHorizontal(element: HTMLElement, trigger: HTMLElement, container: HTMLElement, properties?: {
+    verticalOffset?: number;
+    horizontalOffset?: number;
+    responsiveHeight?: boolean;
+    contentSelector?: string;
+}): SbbElementPositionInfos;
 //# sourceMappingURL=position.d.ts.map

package/core/overlay/position.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,WAAW,EACX,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAoCrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,KAAK,EAAE,UAAU,GAAG,YAAY,GAC/B,OAAO,CAYT;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACA,uBAAuB,CAqGzB"}
+{"version":3,"file":"position.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/overlay/position.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,gBAAgB,GAAG,IAAI,CACjC,WAAW,EACX,cAAc,GAAG,cAAc,GAAG,cAAc,GAAG,aAAa,GAAG,aAAa,GAAG,aAAa,CACjG,CAAC;AAEF,MAAM,WAAW,YAAY;IAC3B,UAAU,EAAE,OAAO,GAAG,QAAQ,GAAG,KAAK,CAAC;IACvC,QAAQ,EAAE,OAAO,GAAG,OAAO,CAAC;CAC7B;AAED,MAAM,WAAW,uBAAuB;IACtC,GAAG,EAAE,MAAM,CAAC;IACZ,IAAI,EAAE,MAAM,CAAC;IACb,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,EAAE,YAAY,CAAC;CACzB;AAED;;GAEG;AACH,wBAAgB,mBAAmB,CAAC,EAAE,EAAE,WAAW,GAAG,gBAAgB,CAoCrE;AAED;;GAEG;AACH,wBAAgB,gBAAgB,CAC9B,OAAO,EAAE,WAAW,GAAG,IAAI,EAC3B,KAAK,EAAE,UAAU,GAAG,YAAY,GAC/B,OAAO,CAYT;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,kBAAkB,CAChC,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,OAAO,CAAC;CAC5B,GACA,uBAAuB,CAqGzB;AAED;;;;;;;;;;;;;GAaG;AACH,wBAAgB,4BAA4B,CAC1C,OAAO,EAAE,WAAW,EACpB,OAAO,EAAE,WAAW,EACpB,SAAS,EAAE,WAAW,EACtB,UAAU,CAAC,EAAE;IACX,cAAc,CAAC,EAAE,MAAM,CAAC;IACxB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,gBAAgB,CAAC,EAAE,OAAO,CAAC;IAC3B,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B,GACA,uBAAuB,CAgEzB"}

package/core/overlay/position.js

@@ -1,6 +1,6 @@
-function b(t) {
-  const o = window.getComputedStyle(t), l = o.display, h = parseInt(o.maxHeight, 10).toString();
-  if (l !== "none" && h !== "0")
+function R(t) {
+  const o = window.getComputedStyle(t), c = o.display, h = parseInt(o.maxHeight, 10).toString();
+  if (c !== "none" && h !== "0")
     return {
       scrollHeight: t.scrollHeight,
       clientHeight: t.clientHeight,
@@ -10,31 +10,42 @@ function b(t) {
       offsetWidth: t.offsetWidth
     };
   t.style.position = "absolute", t.style.visibility = "hidden", t.style.display = "block";
-  const y = t.scrollHeight, e = t.clientHeight, g = t.offsetHeight, a = t.scrollWidth, n = t.clientWidth, i = t.offsetWidth;
-  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: y, clientHeight: e, offsetHeight: g, scrollWidth: a, clientWidth: n, offsetWidth: i };
+  const v = t.scrollHeight, n = t.clientHeight, g = t.offsetHeight, r = t.scrollWidth, e = t.clientWidth, i = t.offsetWidth;
+  return t.style.display = "", t.style.position = "", t.style.visibility = "", { scrollHeight: v, clientHeight: n, offsetHeight: g, scrollWidth: r, clientWidth: e, offsetWidth: i };
 }
-function w(t, o) {
+function x(t, o) {
   if (!t || !o)
     return !1;
-  const l = t.getBoundingClientRect();
-  return l.top <= o.clientY && o.clientY <= l.top + l.height && l.left <= o.clientX && o.clientX <= l.left + l.width;
+  const c = t.getBoundingClientRect();
+  return c.top <= o.clientY && o.clientY <= c.top + c.height && c.left <= o.clientX && o.clientX <= c.left + c.width;
 }
-function x(t, o, l, h) {
-  const e = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, a = h?.responsiveHeight || !1, n = o.getBoundingClientRect(), i = b(t), d = n.left, m = n.top, p = document.documentElement.clientWidth - (d + n.width), r = m - e, H = document.documentElement.clientHeight - (m + n.height + e);
-  let c = d, W = m + n.height + e, s = i.offsetWidth - n.width;
-  const f = { horizontal: "start", vertical: "below" };
-  let v = `${H - e}px`;
-  h?.centered && d - 16 + n.width / 2 > i.offsetWidth / 2 && p - 16 > s / 2 && (c -= s /= 2, f.horizontal = "center"), p < s && d > s && (c = c - s, f.horizontal = "end"), g && f.horizontal !== "center" && n.width / 2 < g && (c += g * (f.horizontal === "start" ? -1 : 1)), (d < s && p < s || document.documentElement.clientWidth < i.offsetWidth) && (c = document.documentElement.clientWidth / 2 - i.offsetWidth / 2), (H - e < i.scrollHeight && r - e > (a ? i.clientHeight : i.scrollHeight) || r > H && H - e < i.clientHeight && !a) && (W = r < i.scrollHeight ? W - n.height - r - e : m - i.clientHeight - e, v = `${r - e}px`, f.vertical = "above");
-  const u = l.getBoundingClientRect();
-  return u.left < 0 && (c -= u.left), u.top < 0 && (W -= u.top), {
-    top: W,
-    left: c,
-    maxHeight: v,
-    alignment: f
+function y(t, o, c, h) {
+  const n = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, r = h?.responsiveHeight || !1, e = o.getBoundingClientRect(), i = R(t), f = e.left, H = e.top, W = document.documentElement.clientWidth - (f + e.width), d = H - n, u = document.documentElement.clientHeight - (H + e.height + n);
+  let s = f, m = H + e.height + n, l = i.offsetWidth - e.width;
+  const a = { horizontal: "start", vertical: "below" };
+  let O = `${u - n}px`;
+  h?.centered && f - 16 + e.width / 2 > i.offsetWidth / 2 && W - 16 > l / 2 && (s -= l /= 2, a.horizontal = "center"), W < l && f > l && (s = s - l, a.horizontal = "end"), g && a.horizontal !== "center" && e.width / 2 < g && (s += g * (a.horizontal === "start" ? -1 : 1)), (f < l && W < l || document.documentElement.clientWidth < i.offsetWidth) && (s = document.documentElement.clientWidth / 2 - i.offsetWidth / 2), (u - n < i.scrollHeight && d - n > (r ? i.clientHeight : i.scrollHeight) || d > u && u - n < i.clientHeight && !r) && (m = d < i.scrollHeight ? m - e.height - d - n : H - i.clientHeight - n, O = `${d - n}px`, a.vertical = "above");
+  const p = c.getBoundingClientRect();
+  return p.left < 0 && (s -= p.left), p.top < 0 && (m -= p.top), {
+    top: m,
+    left: s,
+    maxHeight: O,
+    alignment: a
+  };
+}
+function b(t, o, c, h) {
+  const n = h?.verticalOffset || 0, g = h?.horizontalOffset || 0, r = o.getBoundingClientRect(), e = R(t), i = o.parentElement.shadowRoot.querySelector(h?.contentSelector ?? `.${t.className}`).getBoundingClientRect(), f = c.getBoundingClientRect(), H = document.documentElement.clientWidth - i.right, W = document.documentElement.clientHeight - (r.top - n), d = document.documentElement.clientHeight, u = `${d - 32}px`, s = { horizontal: "end", vertical: "above" }, m = e.offsetWidth + g;
+  let l = i.right, a = r.top + n;
+  return H < m && r.left > m && (l = l - i.width - e.offsetWidth, s.horizontal = "start"), g && s.horizontal !== "center" && (l += g * (s.horizontal === "start" ? -1 : 1)), W < e.scrollHeight && (a = d - e.clientHeight - 16), f.left < 0 && (l -= f.left), f.top < 0 && (a -= f.top), {
+    top: a,
+    left: l,
+    maxHeight: u,
+    alignment: s
   };
 }
 export {
-  x as getElementPosition,
-  b as getElementRectangle,
-  w as isEventOnElement
+  y as getElementPosition,
+  b as getElementPositionHorizontal,
+  R as getElementRectangle,
+  x as isEventOnElement
 };

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"}