@sbb-esta/lyne-elements 1.14.1 → 1.15.0

package/container/sticky-bar.js

@@ -1,51 +1,83 @@
-var h = (a) => {
+var _ = (a) => {
   throw TypeError(a);
 };
-var p = (a, s, r) => s.has(a) || h("Cannot " + r);
-var u = (a, s, r) => (p(a, s, "read from private field"), r ? r.call(a) : s.get(a)), y = (a, s, r) => s.has(a) ? h("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(a) : s.set(a, r), n = (a, s, r, e) => (p(a, s, "write to private field"), e ? e.call(a, r) : s.set(a, r), r);
-import { __runInitializers as c, __esDecorate as m } from "tslib";
-import { IntersectionController as f } from "@lit-labs/observers/intersection-controller.js";
-import { css as _, html as w, LitElement as x } from "lit";
-import { customElement as z, property as S } from "lit/decorators.js";
-import { hostAttributes as C } from "../core/decorators.js";
-const I = _`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);display:contents}:host([data-sticking]){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) )}:host([data-sticking][color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking][color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}.sbb-sticky-bar__wrapper{position:sticky;inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index)}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);transition:background-color var(--sbb-sticky-bar-fade-out-animation-duration) var(--sbb-sticky-bar-animation-easing);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius)}:host([data-sticking]) .sbb-sticky-bar__wrapper:after{transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]) .sbb-sticky-bar__wrapper:after{border-block-start:var(--sbb-border-width-1x) solid CanvasText;border-radius:0}}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--sbb-sticky-bar-fade-out-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-elevation-level-11-soft-2-color),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-elevation-level-11-soft-1-color);transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:transparent;pointer-events:none;transition:background-color var(--sbb-sticky-bar-fade-out-animation-duration) var(--sbb-sticky-bar-animation-easing)}:host([data-sticking]) .sbb-sticky-bar__intersector:after{transition-duration:var(--sbb-sticky-bar-fade-in-animation-duration);background-color:var(--sbb-sticky-bar-sticky-background-color)}`;
-let U = (() => {
-  var o, i;
-  let a = [z("sbb-sticky-bar"), C({
+var p = (a, i, s) => i.has(a) || _("Cannot " + s);
+var g = (a, i, s) => (p(a, i, "read from private field"), s ? s.call(a) : i.get(a)), f = (a, i, s) => i.has(a) ? _("Cannot add the same private member more than once") : i instanceof WeakSet ? i.add(a) : i.set(a, s), d = (a, i, s, e) => (p(a, i, "write to private field"), e ? e.call(a, s) : i.set(a, s), s);
+import { __runInitializers as k, __esDecorate as w } from "tslib";
+import { IntersectionController as S } from "@lit-labs/observers/intersection-controller.js";
+import { css as C, LitElement as z, html as E } from "lit";
+import { customElement as U, property as A } from "lit/decorators.js";
+import { hostAttributes as R } from "../core/decorators.js";
+import { EventEmitter as c } from "../core/eventing.js";
+import { SbbUpdateSchedulerMixin as I } from "../core/mixins.js";
+const T = C`*,:before,:after{box-sizing:border-box}:host{--sbb-sticky-bar-position: sticky;--sbb-sticky-bar-padding-block: var(--sbb-spacing-responsive-xs);--sbb-sticky-bar-border-radius: var(--sbb-border-radius-8x);--sbb-sticky-bar-animation-easing: var(--sbb-animation-easing);--sbb-sticky-bar-fade-in-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-zero-duration, var(--sbb-animation-duration-4x) );--sbb-sticky-bar-slide-vertically-animation-easing: ease-out;--sbb-sticky-bar-slide-vertically-animation-delay: 0s;--sbb-sticky-bar-slide-vertically-animation-name: unset;--_sbb-sticky-bar-background-animation-duration: var( --sbb-sticky-bar-fade-out-animation-duration );--_sbb-sticky-bar-intersector-background-color: transparent;--_sbb-sticky-bar-forced-colors-border: none;display:contents}:host([data-sticking]:not([data-state=unsticky])){--sbb-sticky-bar-sticky-background-color: var( --sbb-container-background-color, var(--sbb-color-white) );--_sbb-sticky-bar-intersector-background-color: var(--sbb-sticky-bar-sticky-background-color);--_sbb-sticky-bar-background-animation-duration: var(--sbb-sticky-bar-fade-in-animation-duration)}@media (forced-colors: active){:host([data-sticking]:not([data-state=unsticky])){--_sbb-sticky-bar-forced-colors-border: var(--sbb-border-width-1x) solid CanvasText}}:host([data-sticking]:not([data-state=unsticky])[color=white]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-white)}:host([data-sticking]:not([data-state=unsticky])[color=milk]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-milk)}:host(:is([data-sticking]:is([data-slide-vertically],[data-state=sticking],[data-state=unsticking]),[data-state=unsticky])){--_sbb-sticky-bar-background-animation-duration: 0s}:host([data-sticking]:is([data-slide-vertically]:not([data-state=unsticky],[data-state=unsticking]),[data-state=sticking])){--sbb-sticky-bar-slide-vertically-animation-name: slide-in}:host([data-sticking][data-state=unsticking]){--sbb-sticky-bar-slide-vertically-animation-name: slide-out}:host(:is(:not([data-initialized]),[data-state=unsticky])){--sbb-sticky-bar-position: relative}.sbb-sticky-bar__wrapper{position:var(--sbb-sticky-bar-position);inset-block-end:0;display:block;z-index:var(--sbb-sticky-bar-z-index);animation-name:var(--sbb-sticky-bar-slide-vertically-animation-name);animation-duration:var(--sbb-sticky-bar-slide-vertically-animation-duration);animation-timing-function:var(--sbb-sticky-bar-slide-vertically-animation-easing);animation-delay:var(--sbb-sticky-bar-slide-vertically-animation-delay);animation-fill-mode:backwards}.sbb-sticky-bar__wrapper:after,.sbb-sticky-bar__wrapper:before{content:"";top:0;right:0;bottom:0;left:0;position:absolute;display:block;z-index:-1}.sbb-sticky-bar__wrapper:before{background-color:var(--sbb-container-background-color);padding:0!important}:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar__wrapper:before{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}.sbb-sticky-bar__wrapper:after{background-color:var(--sbb-sticky-bar-sticky-background-color, transparent);border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);border:var(--_sbb-sticky-bar-forced-colors-border)}.sbb-sticky-bar{display:flex;padding-block:var(--sbb-sticky-bar-padding-block);margin-block-end:-1px}.sbb-sticky-bar:before{content:"";position:absolute;top:0;right:0;bottom:0;left:0;z-index:-1;border-start-start-radius:var(--sbb-sticky-bar-border-radius);border-start-end-radius:var(--sbb-sticky-bar-border-radius);transition:box-shadow var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing);clip-path:polygon(-50% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% calc(-1 * var(--sbb-shadow-elevation-level-11-shadow-1-blur)),150% 50%,-50% 50%)}:host([data-sticking]:not([data-state=unsticky])) .sbb-sticky-bar:before{box-shadow:var(--sbb-shadow-elevation-level-11-shadow-2-offset-x) var(--sbb-shadow-elevation-level-11-shadow-2-offset-y) var(--sbb-shadow-elevation-level-11-shadow-2-blur) var(--sbb-shadow-elevation-level-11-shadow-2-spread) var(--sbb-shadow-elevation-level-11-soft-2-color),var(--sbb-shadow-elevation-level-11-shadow-1-offset-x) var(--sbb-shadow-elevation-level-11-shadow-1-offset-y) var(--sbb-shadow-elevation-level-11-shadow-1-blur) var(--sbb-shadow-elevation-level-11-shadow-1-spread) var(--sbb-shadow-elevation-level-11-soft-1-color)}:host(:not([data-expanded])) .sbb-sticky-bar{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([data-expanded])) .sbb-sticky-bar{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([data-expanded]) .sbb-sticky-bar{padding-inline:var(--sbb-spacing-responsive-xxs)}.sbb-sticky-bar__intersector{height:1px}.sbb-sticky-bar__intersector:after{content:"";display:block;position:absolute;width:100%;height:calc(var(--sbb-sticky-bar-bottom-overlapping-height, 0) + 1px);background-color:var(--_sbb-sticky-bar-intersector-background-color);pointer-events:none;transition:background-color var(--_sbb-sticky-bar-background-animation-duration) var(--sbb-sticky-bar-animation-easing)}@keyframes slide-in{0%{transform:translateY(100%)}to{transform:translateY(0)}}@keyframes slide-out{0%{transform:translateY(0)}to{transform:translateY(100%)}}`;
+let M = (() => {
+  var b, r;
+  let a = [U("sbb-sticky-bar"), R({
     slot: "sticky-bar"
-  })], s, r = [], e, l = x, d, v = [], k = [];
-  return i = class extends l {
+  })], i, s = [], e, y = I(z), u, h = [], v = [];
+  var n = (r = class extends y {
     constructor() {
       super(...arguments);
-      y(this, o);
-      n(this, o, c(this, v, null)), this._intersector = c(this, k), this._observer = new f(this, {
+      f(this, b);
+      d(this, b, k(this, h, null)), this._willStick = (k(this, v), new c(this, n.events.willStick)), this._didStick = new c(this, n.events.didStick), this._willUnstick = new c(this, n.events.willUnstick), this._didUnstick = new c(this, n.events.didUnstick), this._observer = new S(this, {
         // Although `this` is observed, we have to postpone observing
         // into firstUpdated() to achieve a correct initial state.
         target: null,
-        callback: (t) => this._toggleShadowVisibility(t[0])
+        callback: (t) => this._detectStickyState(t[0])
       });
     }
     /** Color of the container, like transparent, white etc. */
     get color() {
-      return u(this, o);
+      return g(this, b);
     }
     set color(t) {
-      n(this, o, t);
+      d(this, b, t);
+    }
+    /** The state of the component. */
+    set _state(t) {
+      this.setAttribute("data-state", t);
+    }
+    get _state() {
+      return this.getAttribute("data-state");
     }
     connectedCallback() {
-      super.connectedCallback();
+      super.connectedCallback(), this._state = "sticky", this.startUpdate();
       const t = this.closest("sbb-container");
       t && this.toggleAttribute("data-expanded", t.expanded), this._intersector && this._observer.observe(this._intersector);
     }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this.toggleAttribute("data-initialized", !1);
+    }
     firstUpdated(t) {
       super.firstUpdated(t), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
     }
-    _toggleShadowVisibility(t) {
-      this.toggleAttribute("data-sticking", !t.isIntersecting && t.boundingClientRect.top > 0);
+    _detectStickyState(t) {
+      var m;
+      this.toggleAttribute("data-initialized", !0);
+      const o = !t.isIntersecting && t.boundingClientRect.top > 0, l = (m = this._intersector) == null ? void 0 : m.getBoundingClientRect(), x = this.shadowRoot.querySelector(".sbb-sticky-bar__wrapper").getBoundingClientRect();
+      this.toggleAttribute("data-slide-vertically", o && this._intersector && Math.abs(l.bottom - x.bottom) > 30), this.toggleAttribute("data-sticking", o), this.completeUpdate();
+    }
+    /** Animates from normal content flow position to `position: sticky`. */
+    stick() {
+      this._state !== "unsticky" || !this._willStick.emit() || (this._state = "sticking", this.hasAttribute("data-sticking") || this._stickyCallback());
+    }
+    /** Animates `position: sticky` to normal content flow position. */
+    unstick() {
+      this._state !== "sticky" || !this._willUnstick.emit() || (this._state = "unsticking", this.hasAttribute("data-sticking") || this._unstickyCallback());
+    }
+    _stickyCallback() {
+      this._state = "sticky", this._didStick.emit();
+    }
+    _unstickyCallback() {
+      this._didUnstick.emit(), this._state = "unsticky";
+    }
+    _onAnimationEnd(t) {
+      (this._state === "sticking" || this._state === "sticky") && t.animationName === "slide-in" ? this._stickyCallback() : this._state === "unsticking" && t.animationName === "slide-out" && this._unstickyCallback();
     }
     render() {
-      return w`
-      <div class="sbb-sticky-bar__wrapper">
+      return E`
+      <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
         <div class="sbb-sticky-bar">
           <slot></slot>
         </div>
@@ -53,13 +85,19 @@ let U = (() => {
       <div class="sbb-sticky-bar__intersector"></div>
     `;
     }
-  }, o = new WeakMap(), e = i, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
-    d = [S({ reflect: !0 })], m(i, null, d, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (b) => "color" in b, get: (b) => b.color, set: (b, g) => {
-      b.color = g;
-    } }, metadata: t }, v, k), m(null, s = { value: e }, a, { kind: "class", name: e.name, metadata: t }, null, r), e = s.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.styles = I, c(e, r), e;
+  }, b = new WeakMap(), e = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    u = [A({ reflect: !0 })], w(r, null, u, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (o) => "color" in o, get: (o) => o.color, set: (o, l) => {
+      o.color = l;
+    } }, metadata: t }, h, v), w(null, i = { value: e }, a, { kind: "class", name: e.name, metadata: t }, null, s), n = e = i.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), r.styles = T, r.events = {
+    willStick: "willStick",
+    didStick: "didStick",
+    willUnstick: "willUnstick",
+    didUnstick: "didUnstick"
+  }, k(e, s), r);
+  return n = e;
 })();
 export {
-  U as SbbStickyBarElement
+  M as SbbStickyBarElement
 };

package/core/controllers/media-matchers-controller.d.ts

@@ -0,0 +1,32 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare const SbbMediaQueryForcedColors = "(forced-colors: active)";
+export declare const SbbMediaQueryHover = "(any-hover: hover)";
+export declare const SbbMediaQueryPointerCoarse = "(pointer: coarse)";
+export declare const SbbMediaQueryBreakpointMediumAndAbove: string;
+export declare const SbbMediaQueryBreakpointSmallAndBelow: string;
+/**
+ * A callback, which is invoked when the associated media query match
+ * status changes.
+ */
+export type SbbMediaMatcherHandler = (matches: boolean) => void;
+/**
+ * This controller allows listening to media query changes.
+ *
+ * @example
+ * new SbbMediaMatcherController(this, {
+ *   [SbbForcedColorsQuery]: (matches) => doSomething(matches),
+ * })
+ */
+export declare class SbbMediaMatcherController implements ReactiveController {
+    private _queries;
+    constructor(host: ReactiveControllerHost, _queries: Record<string, SbbMediaMatcherHandler>);
+    /**
+     * Returns whether the given query matches. Returns null with SSR.
+     * @param query The query to check against.
+     * @returns Whether the query matches or null with SSR.
+     */
+    matches(query: string): boolean | null;
+    hostConnected(): void;
+    hostDisconnected(): void;
+}
+//# sourceMappingURL=media-matchers-controller.d.ts.map

package/core/controllers/media-matchers-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"media-matchers-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/controllers/media-matchers-controller.ts"],"names":[],"mappings":"AAKA,OAAO,EAAY,KAAK,kBAAkB,EAAE,KAAK,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAKrF,eAAO,MAAM,yBAAyB,4BAA4B,CAAC;AACnE,eAAO,MAAM,kBAAkB,uBAAuB,CAAC;AACvD,eAAO,MAAM,0BAA0B,sBAAsB,CAAC;AAC9D,eAAO,MAAM,qCAAqC,QAAuD,CAAC;AAC1G,eAAO,MAAM,oCAAoC,QAAsD,CAAC;AAGxG;;;GAGG;AACH,MAAM,MAAM,sBAAsB,GAAG,CAAC,OAAO,EAAE,OAAO,KAAK,IAAI,CAAC;AAehE;;;;;;;GAOG;AACH,qBAAa,yBAA0B,YAAW,kBAAkB;IAGhE,OAAO,CAAC,QAAQ;gBADhB,IAAI,EAAE,sBAAsB,EACpB,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,sBAAsB,CAAC;IAK1D;;;;OAIG;IACI,OAAO,CAAC,KAAK,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI;IAYtC,aAAa,IAAI,IAAI;IAoBrB,gBAAgB,IAAI,IAAI;CAWhC"}

package/core/controllers.d.ts

@@ -1,5 +1,6 @@
 export * from './controllers/connected-abort-controller.js';
 export * from './controllers/inert-controller.js';
 export * from './controllers/language-controller.js';
+export * from './controllers/media-matchers-controller.js';
 export * from './controllers/slot-state-controller.js';
 //# sourceMappingURL=controllers.d.ts.map

package/core/controllers.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controllers.d.ts","sourceRoot":"","sources":["../../../src/elements/core/controllers.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,wCAAwC,CAAC"}
+{"version":3,"file":"controllers.d.ts","sourceRoot":"","sources":["../../../src/elements/core/controllers.ts"],"names":[],"mappings":"AAAA,cAAc,6CAA6C,CAAC;AAC5D,cAAc,mCAAmC,CAAC;AAClD,cAAc,sCAAsC,CAAC;AACrD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,wCAAwC,CAAC"}

package/core/controllers.js

@@ -1,6 +1,7 @@
 import { isServer as n } from "lit";
-import { readConfig as u } from "./config.js";
-class m {
+import { readConfig as b } from "./config.js";
+import { S as f, g as m, f as v } from "../sbb-tokens-Dx20OtVg.js";
+class S {
   get signal() {
     var t;
     return (t = this._abortController) == null ? void 0 : t.signal;
@@ -16,11 +17,11 @@ class m {
     (t = this._abortController) == null || t.abort(), this._abortController = void 0;
   }
 }
-const _ = ["script", "head", "template", "style"], b = /* @__PURE__ */ new Set(), f = /* @__PURE__ */ new Set();
-class A {
-  constructor(t, i = b, r = f) {
+const g = ["script", "head", "template", "style"], y = /* @__PURE__ */ new Set(), A = /* @__PURE__ */ new Set();
+class O {
+  constructor(t, e = y, i = A) {
     var s, o;
-    this._host = t, this._inertElements = i, this._inertOverlays = r, (o = (s = this._host).addController) == null || o.call(s, this);
+    this._host = t, this._inertElements = e, this._inertOverlays = i, (o = (s = this._host).addController) == null || o.call(s, this);
   }
   hostConnected() {
     this._host.isOpen && this.activate();
@@ -49,23 +50,23 @@ class A {
     }), this._inertElements.clear();
   }
   _addInertAttributes() {
-    var i, r;
+    var e, i;
     let t = this._currentOverlay();
     for (; t !== document.documentElement && t !== null; )
-      Array.from(((i = (t == null ? void 0 : t.parentElement) ?? (t == null ? void 0 : t.getRootNode())) == null ? void 0 : i.childNodes) ?? []).filter((s) => s !== t && s instanceof window.HTMLElement && !_.includes(s.localName)).forEach((s) => {
+      Array.from(((e = (t == null ? void 0 : t.parentElement) ?? (t == null ? void 0 : t.getRootNode())) == null ? void 0 : e.childNodes) ?? []).filter((s) => s !== t && s instanceof window.HTMLElement && !g.includes(s.localName)).forEach((s) => {
         this._inertElements.add(s), s.inert || (s.inert = !0, s.toggleAttribute("data-sbb-inert", !0)), s.hasAttribute("aria-hidden") || (s.setAttribute("aria-hidden", "true"), s.toggleAttribute("data-sbb-aria-hidden", !0));
-      }), t = (t == null ? void 0 : t.parentElement) ?? ((r = t == null ? void 0 : t.getRootNode()) == null ? void 0 : r.host) ?? null;
+      }), t = (t == null ? void 0 : t.parentElement) ?? ((i = t == null ? void 0 : t.getRootNode()) == null ? void 0 : i.host) ?? null;
   }
 }
-const e = class e {
+const r = class r {
   /** Get the current language. */
   static get current() {
-    const i = ((u().language ?? (n ? e._defaultLanguage : document.documentElement.getAttribute("lang"))) || e._defaultLanguage).split("-")[0];
-    return e._supportedLocales.includes(i) ? i : e._defaultLanguage;
+    const e = ((b().language ?? (n ? r._defaultLanguage : document.documentElement.getAttribute("lang"))) || r._defaultLanguage).split("-")[0];
+    return r._supportedLocales.includes(e) ? e : r._defaultLanguage;
   }
   /** Get the current language. */
   get current() {
-    return e.current;
+    return r.current;
   }
   constructor(t) {
     this._host = t, this._handlers = [], this._host.addController(this);
@@ -75,26 +76,61 @@ const e = class e {
     return this._handlers.unshift(t), this;
   }
   hostConnected() {
-    n || (e._listeners.size || e._observer.observe(document.documentElement, e._observerConfig), e._listeners.add(this), this._previousLanguage !== this.current && this._callHandlers(this._previousLanguage !== void 0));
+    n || (r._listeners.size || r._observer.observe(document.documentElement, r._observerConfig), r._listeners.add(this), this._previousLanguage !== this.current && this._callHandlers(this._previousLanguage !== void 0));
   }
   hostDisconnected() {
-    n || (this._previousLanguage = this.current, e._listeners.delete(this), e._listeners.size || e._observer.disconnect());
+    n || (this._previousLanguage = this.current, r._listeners.delete(this), r._listeners.size || r._observer.disconnect());
   }
   _callHandlers(t = !0) {
-    this._handlers.forEach((i) => i()), t && this._host.requestUpdate();
+    this._handlers.forEach((e) => e()), t && this._host.requestUpdate();
   }
 };
-e._defaultLanguage = "en", e._supportedLocales = ["en", "de", "fr", "it"], e._listeners = /* @__PURE__ */ new Set(), e._observer = n ? null : new MutationObserver((t) => {
-  t[0].oldValue !== document.documentElement.getAttribute("lang") && e._listeners.forEach((i) => i._callHandlers());
-}), e._observerConfig = {
+r._defaultLanguage = "en", r._supportedLocales = ["en", "de", "fr", "it"], r._listeners = /* @__PURE__ */ new Set(), r._observer = n ? null : new MutationObserver((t) => {
+  t[0].oldValue !== document.documentElement.getAttribute("lang") && r._listeners.forEach((e) => e._callHandlers());
+}), r._observerConfig = {
   attributeFilter: ["lang"],
   attributeOldValue: !0
 };
-let c = e;
-class C {
-  constructor(t, i = null) {
-    this._host = t, this._onChangeCallback = i, this.slots = /* @__PURE__ */ new Set(), this._slotchangeHandler = (r) => {
-      this._syncSlots(r.target);
+let u = r;
+const _ = (a) => a / f, w = "(forced-colors: active)", M = "(any-hover: hover)", N = "(pointer: coarse)", Q = `(min-width: ${_(m)}rem)`, H = `(max-width: ${_(v)}rem)`, l = /* @__PURE__ */ new Map();
+class L {
+  constructor(t, e) {
+    this._queries = e, t.addController(this);
+  }
+  /**
+   * Returns whether the given query matches. Returns null with SSR.
+   * @param query The query to check against.
+   * @returns Whether the query matches or null with SSR.
+   */
+  matches(t) {
+    if (n)
+      return null;
+    const e = l.get(t);
+    return e ? e.mediaQueryList.matches : matchMedia(t).matches;
+  }
+  hostConnected() {
+    if (!n)
+      for (const [t, e] of Object.entries(this._queries)) {
+        const i = l.get(t);
+        if (i)
+          i.handlers.add(e);
+        else {
+          const s = matchMedia(t), o = /* @__PURE__ */ new Set([e]), h = (d) => o.forEach((c) => c(d.matches));
+          s.addEventListener("change", h), l.set(t, { mediaQueryList: s, handlers: o, eventHandler: h });
+        }
+      }
+  }
+  hostDisconnected() {
+    for (const [t, e] of Object.entries(this._queries)) {
+      const i = l.get(t);
+      i && (i.handlers.delete(e), i.handlers.size || l.delete(t));
+    }
+  }
+}
+class I {
+  constructor(t, e = null) {
+    this._host = t, this._onChangeCallback = e, this.slots = /* @__PURE__ */ new Set(), this._slotchangeHandler = (i) => {
+      this._syncSlots(i.target);
     }, this._host.addController(this);
   }
   hostConnected() {
@@ -109,18 +145,24 @@ class C {
     var s;
     for (const o of t) {
       const h = o.name || "unnamed";
-      o.assignedNodes().some((l) => {
-        var d;
-        return "tagName" in l || ((d = l.textContent) == null ? void 0 : d.trim());
+      o.assignedNodes().some((d) => {
+        var c;
+        return "tagName" in d || ((c = d.textContent) == null ? void 0 : c.trim());
       }) ? this.slots.add(h) : this.slots.delete(h);
     }
-    const i = this._host.getAttribute("data-slot-names"), r = [...this.slots].sort().join(" ");
-    r ? this._host.getAttribute("data-slot-names") !== r && this._host.setAttribute("data-slot-names", r) : this._host.removeAttribute("data-slot-names"), r !== i && ((s = this._onChangeCallback) == null || s.call(this));
+    const e = this._host.getAttribute("data-slot-names"), i = [...this.slots].sort().join(" ");
+    i ? this._host.getAttribute("data-slot-names") !== i && this._host.setAttribute("data-slot-names", i) : this._host.removeAttribute("data-slot-names"), i !== e && ((s = this._onChangeCallback) == null || s.call(this));
   }
 }
 export {
-  m as SbbConnectedAbortController,
-  A as SbbInertController,
-  c as SbbLanguageController,
-  C as SbbSlotStateController
+  S as SbbConnectedAbortController,
+  O as SbbInertController,
+  u as SbbLanguageController,
+  L as SbbMediaMatcherController,
+  Q as SbbMediaQueryBreakpointMediumAndAbove,
+  H as SbbMediaQueryBreakpointSmallAndBelow,
+  w as SbbMediaQueryForcedColors,
+  M as SbbMediaQueryHover,
+  N as SbbMediaQueryPointerCoarse,
+  I as SbbSlotStateController
 };

package/core/dom/breakpoint.d.ts

@@ -6,9 +6,10 @@ export type Breakpoint = (typeof breakpoints)[number];
  *
  * @param from The breakpoint corresponding to the `min-width` value of the media query (optional).
  * @param to The breakpoint corresponding to the `max-width` value of the media query (optional).
+ * @param properties Whether the max breakpoint should be included
  * @returns A boolean indicating whether the window matches the breakpoint.
  */
 export declare function isBreakpoint(from?: Breakpoint, to?: Breakpoint, properties?: {
     includeMaxBreakpoint: boolean;
-}): boolean;
+}): boolean | null;
 //# sourceMappingURL=breakpoint.d.ts.map

package/core/dom/breakpoint.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/breakpoint.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yEAA0E,CAAC;AACnG,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD;;;;;;;GAOG;AACH,wBAAgB,YAAY,CAC1B,IAAI,CAAC,EAAE,UAAU,EACjB,EAAE,CAAC,EAAE,UAAU,EACf,UAAU,CAAC,EAAE;IAAE,oBAAoB,EAAE,OAAO,CAAA;CAAE,GAC7C,OAAO,CAuBT"}
+{"version":3,"file":"breakpoint.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/breakpoint.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,WAAW,yEAA0E,CAAC;AACnG,MAAM,MAAM,UAAU,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAEtD;;;;;;;;GAQG;AACH,wBAAgB,YAAY,CAC1B,IAAI,CAAC,EAAE,UAAU,EACjB,EAAE,CAAC,EAAE,UAAU,EACf,UAAU,CAAC,EAAE;IAAE,oBAAoB,EAAE,OAAO,CAAA;CAAE,GAC7C,OAAO,GAAG,IAAI,CAsBhB"}

package/core/dom.js

@@ -2,8 +2,8 @@ import { isServer as e } from "lit";
 const v = ["zero", "micro", "small", "medium", "wide", "large", "ultra"];
 function E(t, n, o) {
   if (e)
-    return !1;
-  const i = getComputedStyle(document.documentElement), s = t ? i.getPropertyValue(`--sbb-breakpoint-${t}-min`) : "", r = n ? `${parseFloat(i.getPropertyValue(`--sbb-breakpoint-${n}-${o != null && o.includeMaxBreakpoint ? "max" : "min"}`)) - (o != null && o.includeMaxBreakpoint ? 0 : 0.0625)}rem` : "", m = s && `(min-width: ${s})`, f = r && `(max-width: ${r})`, y = s && r && " and ";
+    return null;
+  const i = getComputedStyle(document.documentElement), r = t ? i.getPropertyValue(`--sbb-breakpoint-${t}-min`) : "", s = n ? `${parseFloat(i.getPropertyValue(`--sbb-breakpoint-${n}-${o != null && o.includeMaxBreakpoint ? "max" : "min"}`)) - (o != null && o.includeMaxBreakpoint ? 0 : 0.0625)}rem` : "", m = r && `(min-width: ${r})`, f = s && `(max-width: ${s})`, y = r && s && " and ";
   return window.matchMedia(`${m}${y}${f}`).matches;
 }
 function g(t) {
@@ -33,13 +33,13 @@ function x(t, n) {
 function k(t, n, o) {
   o ? t.setAttribute(n, o) : t.removeAttribute(n);
 }
-let a;
+let c;
 try {
-  a = typeof Intl < "u" && Intl.v8BreakIterator;
+  c = typeof Intl < "u" && Intl.v8BreakIterator;
 } catch {
-  a = !1;
+  c = !1;
 }
-const u = !e && /(edge)/i.test(navigator.userAgent), c = !e && /(msie|trident)/i.test(navigator.userAgent), b = !e && !!(window.chrome || a) && typeof CSS < "u" && !u && !c, h = !e && /AppleWebKit/i.test(navigator.userAgent) && !b && !u && !c, I = !e && /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window), $ = !e && /(firefox|minefield)/i.test(navigator.userAgent), M = !e && /android/i.test(navigator.userAgent) && !c, _ = !e && /safari/i.test(navigator.userAgent) && h, W = b, B = () => !!globalThis.next;
+const u = !e && /(edge)/i.test(navigator.userAgent), a = !e && /(msie|trident)/i.test(navigator.userAgent), b = !e && !!(window.chrome || c) && typeof CSS < "u" && !u && !a, h = !e && /AppleWebKit/i.test(navigator.userAgent) && !b && !u && !a, I = !e && /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window), $ = !e && /(firefox|minefield)/i.test(navigator.userAgent), M = !e && /android/i.test(navigator.userAgent) && !a, _ = !e && /safari/i.test(navigator.userAgent) && h, W = b, B = () => !!globalThis.next;
 function l() {
   return document.body.hasAttribute("data-sbb-scroll-disabled");
 }
@@ -86,7 +86,7 @@ export {
   I as isIOS,
   B as isNextjs,
   _ as isSafari,
-  c as isTrident,
+  a as isTrident,
   h as isWebkit,
   l as pageScrollDisabled,
   k as setOrRemoveAttribute

package/core/mixins/form-associated-checkbox-mixin.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form-associated-checkbox-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-checkbox-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAMxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAErB,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIlF,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAC5B,SAAQ,0BACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEvE,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE;IAEnC,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAExB,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,mBAAmB,CAAC,IAAI,IAAI;IACtC,SAAS,CAAC,eAAe,IAAI,IAAI;CAClC;AAED;;;;GAIG;AAEH,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAClE,CAAC,KACZ,WAAW,CAAC,kCAAkC,CAAC,GAAG,CA6IpD,CAAC"}
+{"version":3,"file":"form-associated-checkbox-mixin.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/mixins/form-associated-checkbox-mixin.ts"],"names":[],"mappings":"AAAA,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,KAAK,CAAC;AAMxD,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AACpD,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAClF,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAErB,KAAK,0BAA0B,EAChC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAoB,KAAK,oBAAoB,EAAE,MAAM,qBAAqB,CAAC;AAIlF,MAAM,CAAC,OAAO,CAAC,QAAQ,OAAO,kCAC5B,SAAQ,0BACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEvE,IAAW,OAAO,IAAI,OAAO,CAAC;IAC9B,IAAW,OAAO,CAAC,KAAK,EAAE,OAAO,EAAE;IAEnC,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAE/B,IAAW,QAAQ,CAAC,KAAK,EAAE,OAAO,EAAE;IACpC,IAAW,QAAQ,IAAI,OAAO,CAAC;IAExB,iBAAiB,IAAI,IAAI;IACzB,wBAAwB,CAAC,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAAE,MAAM,EAAE,iBAAiB,GAAG,IAAI;IAEhG,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,oBAAoB,IAAI,OAAO;IACzC,SAAS,CAAC,mBAAmB,CAAC,IAAI,IAAI;IACtC,SAAS,CAAC,eAAe,IAAI,IAAI;CAClC;AAED;;;;GAIG;AAEH,eAAO,MAAM,8BAA8B,GAAI,CAAC,SAAS,WAAW,CAAC,UAAU,CAAC,cAClE,CAAC,KACZ,WAAW,CAAC,kCAAkC,CAAC,GAAG,CAqJpD,CAAC"}

package/core/mixins.js

@@ -202,7 +202,7 @@ const D = (r) => (() => {
     get required() {
       return this._required || this.isRequiredExternally();
     }
-    async willUpdate(s) {
+    willUpdate(s) {
       super.willUpdate(s), s.has("required") && (this.internals.ariaRequired = `${this.required}`);
     }
     /**
@@ -232,6 +232,13 @@ const D = (r) => (() => {
     get checked() {
       return this._checked;
     }
+    /**
+     * Form type of element.
+     * @default 'checkbox'
+     */
+    get type() {
+      return "checkbox";
+    }
     constructor() {
       super(), this._attributeMutationBlocked = (v(this, s), !1), this._checked = !1, this._handleKeyboardInteraction = (e) => {
         e.key === " " && this._handleUserInteraction();

package/core/styles/core/mediaqueries.scss

@@ -21,8 +21,7 @@ $mq-breakpoints: (
   // 1280
   ultra: sbb-tokens.$sbb-breakpoint-ultra-min,
   // 1440
-  ultra--max-content:
-    (
+  ultra--max-content: (
       sbb-tokens.$sbb-breakpoint-ultra-min + (2 * sbb-tokens.$sbb-spacing-fixed-18x),
     ),
 ) !default;

package/core/styles/mixins/buttons.scss

@@ -34,11 +34,11 @@
   }
 
   :host(
-      :is(
-          [data-focus-visible],
-          :focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])
-        )
-    ) {
+    :is(
+      [data-focus-visible],
+      :focus-visible:not([data-focus-origin='mouse'], [data-focus-origin='touch'])
+    )
+  ) {
     @include icon-button-focus-visible(#{$button-selector});
   }
 

package/core/testing/event-spy.d.ts

@@ -1,19 +1,21 @@
 /**
  * This class exists to facilitate the test migration from stencil to lit.
  * It mimics the API that stencil provided to test events.
- *
- * TODO: Document me
  */
 export declare class EventSpy<T extends Event> {
     private _event;
     private readonly _target;
-    private _count;
     get count(): number;
-    private _events;
+    private _count;
     get events(): T[];
+    private _events;
     get firstEvent(): T | null;
     get lastEvent(): T | null;
+    private _promiseEventMap;
     constructor(_event: string, _target?: Node | null);
+    calledOnce(timeout?: number): Promise<T>;
+    calledTimes(count: number, timeout?: number): Promise<T>;
+    private _wrapPromiseWithTimeout;
     private _listenForEvent;
 }
 //# sourceMappingURL=event-spy.d.ts.map

package/core/testing/event-spy.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"event-spy.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/event-spy.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AACH,qBAAa,QAAQ,CAAC,CAAC,SAAS,KAAK;IAoBjC,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,QAAQ,CAAC,OAAO;IApB1B,OAAO,CAAC,MAAM,CAAa;IAC3B,IAAW,KAAK,IAAI,MAAM,CAEzB;IAED,OAAO,CAAC,OAAO,CAAW;IAC1B,IAAW,MAAM,IAAI,CAAC,EAAE,CAEvB;IAED,IAAW,UAAU,IAAI,CAAC,GAAG,IAAI,CAEhC;IAED,IAAW,SAAS,IAAI,CAAC,GAAG,IAAI,CAE/B;gBAGS,MAAM,EAAE,MAAM,EACL,OAAO,GAAE,IAAI,GAAG,IAAW;IAQ9C,OAAO,CAAC,eAAe;CAMxB"}
+{"version":3,"file":"event-spy.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/testing/event-spy.ts"],"names":[],"mappings":"AAMA;;;GAGG;AACH,qBAAa,QAAQ,CAAC,CAAC,SAAS,KAAK;IAsBjC,OAAO,CAAC,MAAM;IACd,OAAO,CAAC,QAAQ,CAAC,OAAO;IAtB1B,IAAW,KAAK,IAAI,MAAM,CAEzB;IACD,OAAO,CAAC,MAAM,CAAa;IAE3B,IAAW,MAAM,IAAI,CAAC,EAAE,CAEvB;IACD,OAAO,CAAC,OAAO,CAAW;IAE1B,IAAW,UAAU,IAAI,CAAC,GAAG,IAAI,CAEhC;IAED,IAAW,SAAS,IAAI,CAAC,GAAG,IAAI,CAE/B;IAED,OAAO,CAAC,gBAAgB,CAA6C;gBAG3D,MAAM,EAAE,MAAM,EACL,OAAO,GAAE,IAAI,GAAG,IAAW;IASvC,UAAU,CAAC,OAAO,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC,CAAC,CAAC;IAIxC,WAAW,CAAC,KAAK,EAAE,MAAM,EAAE,OAAO,SAAO,GAAG,OAAO,CAAC,CAAC,CAAC;IA6B7D,OAAO,CAAC,uBAAuB;IAa/B,OAAO,CAAC,eAAe;CAOxB"}