@sbb-esta/lyne-elements 1.14.1 → 1.15.1

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/base-elements/link-base-element.d.ts

@@ -26,5 +26,6 @@ export declare abstract class SbbLinkBaseElement extends SbbActionBaseElement {
     private _evaluateRelAttribute;
     /** Default render method for link-like components. Can be overridden if the LinkRenderVariables are not needed. */
     protected render(): TemplateResult;
+    protected renderLink(renderContent: TemplateResult): TemplateResult;
 }
 //# sourceMappingURL=link-base-element.d.ts.map

package/core/base-elements/link-base-element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"link-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/link-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,6BAA6B,CAAC;AAErC,0DAA0D;AAC1D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAErE,uBAAuB;AACvB,8BAIe,kBAAmB,SAAQ,oBAAoB;IAC5D,0CAA0C;IAC1C,SAEgB,IAAI,EAAE,MAAM,CAAM;IAElC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,cAAc,GAAG,MAAM,CAAM;IAErD,wEAAwE;IACxE,SAEgB,GAAG,EAAE,MAAM,CAAM;IAEjC,kEAAkE;IAClE,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,wEAAwE;IACxE,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,SAAS,CAAC,QAAQ,wBAAmC;;IASrD,gBAAgB;IACA,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;IAI/D,gBAAgB;IACA,IAAI,IAAI,IAAI;IAI5B,gBAAgB;IACA,KAAK,IAAI,IAAI;IAI7B,OAAO,CAAC,qBAAqB,CAE3B;IAEF,mHAAmH;cAChG,MAAM,IAAI,cAAc;CAqB5C"}
+{"version":3,"file":"link-base-element.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/base-elements/link-base-element.ts"],"names":[],"mappings":"AAAA,OAAO,EAA2B,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAGnE,OAAO,EAAE,qBAAqB,EAAE,MAAM,mBAAmB,CAAC;AAI1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,0BAA0B,CAAC;AAEhE,OAAO,6BAA6B,CAAC;AAErC,0DAA0D;AAC1D,MAAM,MAAM,cAAc,GAAG,QAAQ,GAAG,OAAO,GAAG,SAAS,GAAG,MAAM,CAAC;AAErE,uBAAuB;AACvB,8BAIe,kBAAmB,SAAQ,oBAAoB;IAC5D,0CAA0C;IAC1C,SAEgB,IAAI,EAAE,MAAM,CAAM;IAElC,uCAAuC;IACvC,SAEgB,MAAM,EAAE,cAAc,GAAG,MAAM,CAAM;IAErD,wEAAwE;IACxE,SAEgB,GAAG,EAAE,MAAM,CAAM;IAEjC,kEAAkE;IAClE,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,wEAAwE;IACxE,SAEgB,kBAAkB,EAAE,MAAM,CAAM;IAEhD,SAAS,CAAC,QAAQ,wBAAmC;;IASrD,gBAAgB;IACA,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,SAAS,GAAG,IAAI;IAI/D,gBAAgB;IACA,IAAI,IAAI,IAAI;IAI5B,gBAAgB;IACA,KAAK,IAAI,IAAI;IAI7B,OAAO,CAAC,qBAAqB,CAE3B;IAEF,mHAAmH;cAChG,MAAM,IAAI,cAAc;IAI3C,SAAS,CAAC,UAAU,CAAC,aAAa,EAAE,cAAc,GAAG,cAAc;CAqBpE"}

package/core/base-elements.js

@@ -2,7 +2,7 @@ var H = (l) => {
   throw TypeError(l);
 };
 var M = (l, r, n) => r.has(l) || H("Cannot " + n);
-var S = (l, r, n) => (M(l, r, "read from private field"), n ? n.call(l) : r.get(l)), E = (l, r, n) => r.has(l) ? H("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(l) : r.set(l, n), h = (l, r, n, s) => (M(l, r, "write to private field"), s ? s.call(l, n) : r.set(l, n), n);
+var S = (l, r, n) => (M(l, r, "read from private field"), n ? n.call(l) : r.get(l)), E = (l, r, n) => r.has(l) ? H("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(l) : r.set(l, n), h = (l, r, n, i) => (M(l, r, "write to private field"), i ? i.call(l, n) : r.set(l, n), n);
 import { __esDecorate as b, __runInitializers as o } from "tslib";
 import { html as P, LitElement as W, isServer as F, nothing as C } from "lit";
 import { hostAttributes as q, forceType as x } from "./decorators.js";
@@ -15,7 +15,7 @@ let G = (() => {
   var u;
   let l = [q({
     "data-action": ""
-  })], r, n = [], s, g = W;
+  })], r, n = [], i, g = W;
   return u = class extends g {
     get maybeDisabled() {
       const d = this;
@@ -46,17 +46,17 @@ let G = (() => {
     render() {
       return P` <span class="sbb-action-base ${this.localName}">${this.renderTemplate()}</span> `;
     }
-  }, s = u, (() => {
+  }, i = u, (() => {
     const d = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
-    b(null, r = { value: s }, l, { kind: "class", name: s.name, metadata: d }, null, n), s = r.value, d && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: d }), o(s, n);
-  })(), s;
+    b(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: d }, null, n), i = r.value, d && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: d }), o(i, n);
+  })(), i;
 })(), le = (() => {
   var _, f, m;
   let l = [q({
     role: "button",
     tabindex: "0",
     "data-button": ""
-  })], r, n = [], s, g = G, u = [], z, d = [], D = [], O, $, A, T = [], B = [];
+  })], r, n = [], i, g = G, u = [], z, d = [], D = [], O, $, A, T = [], B = [];
   return m = class extends g {
     constructor() {
       super();
@@ -138,7 +138,7 @@ let G = (() => {
     attributeChangedCallback(e, t, c) {
       (!["name", "value"].includes(e) || t !== c) && super.attributeChangedCallback(e, t, c);
     }
-  }, _ = new WeakMap(), f = new WeakMap(), s = m, (() => {
+  }, _ = new WeakMap(), f = new WeakMap(), i = m, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
     z = [v()], O = [v()], $ = [v()], A = [x(), v()], b(m, null, z, { kind: "accessor", name: "type", static: !1, private: !1, access: { has: (t) => "type" in t, get: (t) => t.type, set: (t, c) => {
       t.type = c;
@@ -148,13 +148,13 @@ let G = (() => {
       t.value = c;
     } }, metadata: e }, null, u), b(m, null, A, { kind: "accessor", name: "form", static: !1, private: !1, access: { has: (t) => "form" in t, get: (t) => t.form, set: (t, c) => {
       t.form = c;
-    } }, metadata: e }, T, B), b(null, r = { value: s }, l, { kind: "class", name: s.name, metadata: e }, null, n), s = r.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), o(s, n);
-  })(), s;
+    } }, metadata: e }, T, B), b(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: e }, null, n), i = r.value, e && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e }), o(i, n);
+  })(), i;
 })(), ne = (() => {
-  var t, c, k, w, L, p;
+  var t, c, k, w, I, p;
   let l = [q({
     "data-link": ""
-  })], r, n = [], s, g = G, u, z = [], d = [], D, O = [], $ = [], A, T = [], B = [], _, f = [], m = [], j, R = [], e = [];
+  })], r, n = [], i, g = G, u, z = [], d = [], D, O = [], $ = [], A, T = [], B = [], _, f = [], m = [], j, R = [], e = [];
   return p = class extends g {
     constructor() {
       super();
@@ -162,61 +162,64 @@ let G = (() => {
       E(this, c);
       E(this, k);
       E(this, w);
-      E(this, L);
-      h(this, t, o(this, z, "")), h(this, c, (o(this, d), o(this, O, ""))), h(this, k, (o(this, $), o(this, T, ""))), h(this, w, (o(this, B), o(this, f, !1))), h(this, L, (o(this, m), o(this, R, ""))), this.language = (o(this, e), new Q(this)), this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : C, F || this.setupBaseEventHandlers();
+      E(this, I);
+      h(this, t, o(this, z, "")), h(this, c, (o(this, d), o(this, O, ""))), h(this, k, (o(this, $), o(this, T, ""))), h(this, w, (o(this, B), o(this, f, !1))), h(this, I, (o(this, m), o(this, R, ""))), this.language = (o(this, e), new Q(this)), this._evaluateRelAttribute = () => this.rel ? this.rel : this.target === "_blank" ? "external noopener nofollow" : C, F || this.setupBaseEventHandlers();
     }
     /** The href value you want to link to. */
     get href() {
       return S(this, t);
     }
-    set href(i) {
-      h(this, t, i);
+    set href(s) {
+      h(this, t, s);
     }
     /** Where to display the linked URL. */
     get target() {
       return S(this, c);
     }
-    set target(i) {
-      h(this, c, i);
+    set target(s) {
+      h(this, c, s);
     }
     /** The relationship of the linked URL as space-separated link types. */
     get rel() {
       return S(this, k);
     }
-    set rel(i) {
-      h(this, k, i);
+    set rel(s) {
+      h(this, k, s);
     }
     /** Whether the browser will show the download dialog on click. */
     get download() {
       return S(this, w);
     }
-    set download(i) {
-      h(this, w, i);
+    set download(s) {
+      h(this, w, s);
     }
     /** This will be forwarded as aria-label to the inner anchor element. */
     get accessibilityLabel() {
-      return S(this, L);
+      return S(this, I);
     }
-    set accessibilityLabel(i) {
-      h(this, L, i);
+    set accessibilityLabel(s) {
+      h(this, I, s);
     }
     /** @internal */
-    focus(i) {
+    focus(s) {
       var a;
-      (a = this.shadowRoot.querySelector("a")) == null || a.focus(i);
+      (a = this.shadowRoot.querySelector("a")) == null || a.focus(s);
     }
     /** @internal */
     blur() {
-      var i;
-      (i = this.shadowRoot.querySelector("a")) == null || i.blur();
+      var s;
+      (s = this.shadowRoot.querySelector("a")) == null || s.blur();
     }
     /** @internal */
     click() {
-      var i;
-      (i = this.shadowRoot.querySelector("a")) == null || i.click();
+      var s;
+      (s = this.shadowRoot.querySelector("a")) == null || s.click();
     }
     /** Default render method for link-like components. Can be overridden if the LinkRenderVariables are not needed. */
     render() {
+      return this.renderLink(this.renderTemplate());
+    }
+    renderLink(s) {
       return P`
       <a
         class="sbb-action-base ${this.localName}"
@@ -228,31 +231,31 @@ let G = (() => {
         tabindex=${this.maybeDisabled && !this.maybeDisabledInteractive ? "-1" : C}
         aria-disabled=${this.maybeDisabled ? "true" : C}
       >
-        ${this.renderTemplate()}
+        ${s}
         ${this.href && this.target === "_blank" ? P`<sbb-screen-reader-only
               >. ${U[this.language.current]}</sbb-screen-reader-only
             >` : C}
       </a>
     `;
     }
-  }, t = new WeakMap(), c = new WeakMap(), k = new WeakMap(), w = new WeakMap(), L = new WeakMap(), s = p, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
+  }, t = new WeakMap(), c = new WeakMap(), k = new WeakMap(), w = new WeakMap(), I = new WeakMap(), i = p, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(g[Symbol.metadata] ?? null) : void 0;
     u = [x(), v()], D = [x(), v()], A = [x(), v()], _ = [x(), v({ type: Boolean })], j = [x(), v({ attribute: "accessibility-label" })], b(p, null, u, { kind: "accessor", name: "href", static: !1, private: !1, access: { has: (a) => "href" in a, get: (a) => a.href, set: (a, y) => {
       a.href = y;
-    } }, metadata: i }, z, d), b(p, null, D, { kind: "accessor", name: "target", static: !1, private: !1, access: { has: (a) => "target" in a, get: (a) => a.target, set: (a, y) => {
+    } }, metadata: s }, z, d), b(p, null, D, { kind: "accessor", name: "target", static: !1, private: !1, access: { has: (a) => "target" in a, get: (a) => a.target, set: (a, y) => {
       a.target = y;
-    } }, metadata: i }, O, $), b(p, null, A, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (a) => "rel" in a, get: (a) => a.rel, set: (a, y) => {
+    } }, metadata: s }, O, $), b(p, null, A, { kind: "accessor", name: "rel", static: !1, private: !1, access: { has: (a) => "rel" in a, get: (a) => a.rel, set: (a, y) => {
       a.rel = y;
-    } }, metadata: i }, T, B), b(p, null, _, { kind: "accessor", name: "download", static: !1, private: !1, access: { has: (a) => "download" in a, get: (a) => a.download, set: (a, y) => {
+    } }, metadata: s }, T, B), b(p, null, _, { kind: "accessor", name: "download", static: !1, private: !1, access: { has: (a) => "download" in a, get: (a) => a.download, set: (a, y) => {
       a.download = y;
-    } }, metadata: i }, f, m), b(p, null, j, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (a) => "accessibilityLabel" in a, get: (a) => a.accessibilityLabel, set: (a, y) => {
+    } }, metadata: s }, f, m), b(p, null, j, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (a) => "accessibilityLabel" in a, get: (a) => a.accessibilityLabel, set: (a, y) => {
       a.accessibilityLabel = y;
-    } }, metadata: i }, R, e), b(null, r = { value: s }, l, { kind: "class", name: s.name, metadata: i }, null, n), s = r.value, i && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i }), o(s, n);
-  })(), s;
+    } }, metadata: s }, R, e), b(null, r = { value: i }, l, { kind: "class", name: i.name, metadata: s }, null, n), i = r.value, s && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s }), o(i, n);
+  })(), i;
 })();
-const I = class I extends W {
+const L = class L extends W {
   constructor() {
-    super(...arguments), this.willOpen = new K(this, I.events.willOpen), this.didOpen = new K(this, I.events.didOpen), this.willClose = new K(this, I.events.willClose), this.didClose = new K(this, I.events.didClose);
+    super(...arguments), this.willOpen = new K(this, L.events.willOpen), this.didOpen = new K(this, L.events.didOpen), this.willClose = new K(this, L.events.willClose), this.didClose = new K(this, L.events.didClose);
   }
   /** The state of the component. */
   set state(r) {
@@ -269,13 +272,13 @@ const I = class I extends W {
     super.connectedCallback(), this.state || (this.state = "closed");
   }
 };
-I.events = {
+L.events = {
   willOpen: "willOpen",
   didOpen: "didOpen",
   willClose: "willClose",
   didClose: "didClose"
 };
-let N = I;
+let N = L;
 export {
   G as SbbActionBaseElement,
   le as SbbButtonBaseElement,

package/core/config/config.d.ts

@@ -18,4 +18,7 @@ export interface SbbConfig {
 }
 export declare function readConfig(): SbbConfig;
 export declare function mergeConfig(config: Partial<SbbConfig>): void;
+declare global {
+    var sbbConfig: SbbConfig;
+}
 //# sourceMappingURL=config.d.ts.map

package/core/config/config.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/config/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;KAChC,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,wBAAgB,UAAU,IAAI,SAAS,CAKtC;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAG5D"}
+{"version":3,"file":"config.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/config/config.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAElD,MAAM,WAAW,aAAa;IAC5B,WAAW,CAAC,EAAE,CAAC,UAAU,EAAE;QACzB,SAAS,EAAE,MAAM,CAAC;QAClB,IAAI,EAAE,MAAM,CAAC;QACb,GAAG,EAAE,MAAM,CAAC;QACZ,OAAO,EAAE,MAAM,OAAO,CAAC,MAAM,CAAC,CAAC;KAChC,KAAK,OAAO,CAAC,MAAM,CAAC,CAAC;IACtB,UAAU,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;CAClC;AAED,MAAM,WAAW,iBAAiB;IAChC,WAAW,CAAC,EAAE,WAAW,CAAC;CAC3B;AAED,MAAM,WAAW,SAAS;IACxB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,IAAI,CAAC,EAAE,aAAa,CAAC;IACrB,QAAQ,CAAC,EAAE,iBAAiB,CAAC;CAC9B;AAED,wBAAgB,UAAU,IAAI,SAAS,CAKtC;AAED,wBAAgB,WAAW,CAAC,MAAM,EAAE,OAAO,CAAC,SAAS,CAAC,GAAG,IAAI,CAG5D;AAED,OAAO,CAAC,MAAM,CAAC;IAGb,IAAI,SAAS,EAAE,SAAS,CAAC;CAC1B"}

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