@sbb-esta/lyne-elements 2.5.1 → 2.7.0

package/container/container.js

@@ -1,71 +1,4 @@
-var I = (t) => {
-  throw TypeError(t);
-};
-var D = (t, a, r) => a.has(t) || I("Cannot " + r);
-var p = (t, a, r) => (D(t, a, "read from private field"), r ? r.call(t) : a.get(t)), u = (t, a, r) => a.has(t) ? I("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), h = (t, a, r, s) => (D(t, a, "write to private field"), s ? s.call(t, r) : a.set(t, r), r);
-import { __esDecorate as g, __runInitializers as c } from "tslib";
-import { css as U, LitElement as j, html as B } from "lit";
-import { customElement as O, property as m } from "lit/decorators.js";
-import { slotState as q, forceType as T } from "../core/decorators.js";
-const A = U`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-container-background-border-radius: 0;--sbb-container-color: inherit;display:block}:host([color=white]){--sbb-container-background-color: var(--sbb-color-white)}:host([color=milk]){--sbb-container-background-color: var(--sbb-color-milk)}:host([color=midnight]),:host([color=charcoal]){--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-container-color: var(--sbb-color-white)}:host([color=midnight]){--sbb-container-background-color: var(--sbb-color-midnight)}:host([color=charcoal]){--sbb-container-background-color: var(--sbb-color-charcoal)}:host([data-slot-names~=image]){--sbb-container-background-color: transparent;--sbb-container-padding: var(--sbb-spacing-responsive-xxl)}:host([background-expanded]:not([expanded])){background-color:var(--sbb-container-background-color)}:host([data-slot-names~=image][background-expanded]){position:relative}@media (min-width: 90rem){:host(:not([expanded],[background-expanded])){--sbb-container-background-border-radius: var(--sbb-border-radius-4x)}}.sbb-container{color:var(--sbb-container-color);background-color:var(--sbb-container-background-color);padding:var(--sbb-container-padding)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0;overflow:hidden}:host([color=transparent]) .sbb-container{background-color:transparent}:host(:not([expanded])) .sbb-container{padding-inline:var(--sbb-layout-base-offset-responsive);margin-inline:auto;width:100%}@media (min-width: 90rem){:host(:not([expanded])) .sbb-container{max-width:calc(var(--sbb-layout-base-page-max-width) + 2 * var(--sbb-layout-base-offset-responsive))}}:host([expanded]) .sbb-container{padding-inline:var(--sbb-spacing-responsive-xxs)}:host([data-slot-names~=image]:not([background-expanded])) .sbb-container{position:relative}:host([data-slot-names~=image]) .sbb-container__content{position:relative}::slotted([slot=image]){position:absolute;top:0;right:0;bottom:0;left:0;height:100%;width:100%}`;
-let K = (() => {
-  var d, l, b, n;
-  let t = [O("sbb-container"), q()], a, r = [], s, x = j, k, _ = [], v = [], f, y = [], w = [], E, z = [], S = [];
-  return n = class extends x {
-    constructor() {
-      super(...arguments);
-      u(this, d, c(this, _, !1));
-      u(this, l, (c(this, v), c(this, y, !1)));
-      u(this, b, (c(this, w), c(this, z, "white")));
-      c(this, S);
-    }
-    /** Whether the container is expanded. */
-    get expanded() {
-      return p(this, d);
-    }
-    set expanded(o) {
-      h(this, d, o);
-    }
-    /** Whether the background color is shown on full container width on large screens. */
-    get backgroundExpanded() {
-      return p(this, l);
-    }
-    set backgroundExpanded(o) {
-      h(this, l, o);
-    }
-    /** Color of the container, like transparent, white etc. */
-    get color() {
-      return p(this, b);
-    }
-    set color(o) {
-      h(this, b, o);
-    }
-    willUpdate(o) {
-      var e, i;
-      super.willUpdate(o), o.has("expanded") && ((i = (e = this.querySelector) == null ? void 0 : e.call(this, "sbb-sticky-bar")) == null || i.toggleAttribute("data-expanded", this.expanded));
-    }
-    render() {
-      return B`
-      <div class="sbb-container">
-        <slot name="image"></slot>
-        <div class="sbb-container__content">
-          <slot></slot>
-        </div>
-      </div>
-      <slot name="sticky-bar"></slot>
-    `;
-    }
-  }, d = new WeakMap(), l = new WeakMap(), b = new WeakMap(), s = n, (() => {
-    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(x[Symbol.metadata] ?? null) : void 0;
-    k = [T(), m({ type: Boolean, reflect: !0 })], f = [T(), m({ type: Boolean, reflect: !0, attribute: "background-expanded" })], E = [m({ reflect: !0 })], g(n, null, k, { kind: "accessor", name: "expanded", static: !1, private: !1, access: { has: (e) => "expanded" in e, get: (e) => e.expanded, set: (e, i) => {
-      e.expanded = i;
-    } }, metadata: o }, _, v), g(n, null, f, { kind: "accessor", name: "backgroundExpanded", static: !1, private: !1, access: { has: (e) => "backgroundExpanded" in e, get: (e) => e.backgroundExpanded, set: (e, i) => {
-      e.backgroundExpanded = i;
-    } }, metadata: o }, y, w), g(n, null, E, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (e) => "color" in e, get: (e) => e.color, set: (e, i) => {
-      e.color = i;
-    } }, metadata: o }, z, S), g(null, a = { value: s }, t, { kind: "class", name: s.name, metadata: o }, null, r), s = a.value, o && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
-  })(), n.styles = A, c(s, r), s;
-})();
+import { SbbContainerElement as o } from "./container/container.js";
 export {
-  K as SbbContainerElement
+  o as SbbContainerElement
 };

package/container/sticky-bar/sticky-bar.js

@@ -0,0 +1,111 @@
+var _ = (a) => {
+  throw TypeError(a);
+};
+var g = (a, i, s) => i.has(a) || _("Cannot " + s);
+var p = (a, i, s) => (g(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) => (g(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 A, LitElement as C, html as E } from "lit";
+import { customElement as U, property as z } from "lit/decorators.js";
+import { hostAttributes as R } from "../../core/decorators.js";
+import { isZeroAnimationDuration as D } from "../../core/dom.js";
+import { EventEmitter as c } from "../../core/eventing.js";
+import { SbbUpdateSchedulerMixin as I } from "../../core/mixins.js";
+const T = A`*,: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-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-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([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal)}: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 P = (() => {
+  var b, r;
+  let a = [U("sbb-sticky-bar"), R({
+    slot: "sticky-bar"
+  })], i, s = [], e, u = I(C), y, h = [], v = [];
+  var n = (r = class extends u {
+    constructor() {
+      super(...arguments);
+      f(this, b);
+      d(this, b, k(this, h, null)), this._willStick = (k(this, v), new c(this, n.events.willStick, {
+        cancelable: !0
+      })), this._didStick = new c(this, n.events.didStick, {
+        cancelable: !0
+      }), this._willUnstick = new c(this, n.events.willUnstick, { cancelable: !0 }), this._didUnstick = new c(this, n.events.didUnstick, { cancelable: !0 }), 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._detectStickyState(t[0])
+      });
+    }
+    /** Color of the container, like transparent, white etc. */
+    get color() {
+      return p(this, b);
+    }
+    set color(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(), 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);
+    }
+    _isZeroAnimationDuration() {
+      return D(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
+    }
+    _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._isZeroAnimationDuration()) && 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._isZeroAnimationDuration()) && 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 E`
+      <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
+        <div class="sbb-sticky-bar">
+          <slot></slot>
+        </div>
+      </div>
+      <div class="sbb-sticky-bar__intersector"></div>
+    `;
+    }
+  }, b = new WeakMap(), e = r, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    y = [z({ reflect: !0 })], w(r, null, y, { 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 {
+  P as SbbStickyBarElement
+};

package/container/sticky-bar.d.ts

@@ -1,2 +1,5 @@
+/**
+ * @entrypoint
+ */
 export * from './sticky-bar/sticky-bar.js';
 //# sourceMappingURL=sticky-bar.d.ts.map

package/container/sticky-bar.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"sticky-bar.d.ts","sourceRoot":"","sources":["../../../src/elements/container/sticky-bar.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"sticky-bar.d.ts","sourceRoot":"","sources":["../../../src/elements/container/sticky-bar.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,4BAA4B,CAAC"}

package/container/sticky-bar.js

@@ -1,111 +1,4 @@
-var _ = (a) => {
-  throw TypeError(a);
-};
-var g = (a, i, s) => i.has(a) || _("Cannot " + s);
-var p = (a, i, s) => (g(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) => (g(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 A, LitElement as C, html as E } from "lit";
-import { customElement as U, property as z } from "lit/decorators.js";
-import { hostAttributes as R } from "../core/decorators.js";
-import { isZeroAnimationDuration as D } from "../core/dom.js";
-import { EventEmitter as c } from "../core/eventing.js";
-import { SbbUpdateSchedulerMixin as I } from "../core/mixins.js";
-const T = A`*,: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-duration, var(--sbb-animation-duration-5x) );--sbb-sticky-bar-fade-out-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );--sbb-sticky-bar-slide-vertically-animation-duration: var( --sbb-disable-animation-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([data-sticking]:not([data-state=unsticky])[color=midnight]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-midnight)}:host([data-sticking]:not([data-state=unsticky])[color=charcoal]){--sbb-sticky-bar-sticky-background-color: var(--sbb-color-charcoal)}: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 P = (() => {
-  var b, r;
-  let a = [U("sbb-sticky-bar"), R({
-    slot: "sticky-bar"
-  })], i, s = [], e, u = I(C), y, h = [], v = [];
-  var n = (r = class extends u {
-    constructor() {
-      super(...arguments);
-      f(this, b);
-      d(this, b, k(this, h, null)), this._willStick = (k(this, v), new c(this, n.events.willStick, {
-        cancelable: !0
-      })), this._didStick = new c(this, n.events.didStick, {
-        cancelable: !0
-      }), this._willUnstick = new c(this, n.events.willUnstick, { cancelable: !0 }), this._didUnstick = new c(this, n.events.didUnstick, { cancelable: !0 }), 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._detectStickyState(t[0])
-      });
-    }
-    /** Color of the container, like transparent, white etc. */
-    get color() {
-      return p(this, b);
-    }
-    set color(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(), 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);
-    }
-    _isZeroAnimationDuration() {
-      return D(this, "--sbb-sticky-bar-slide-vertically-animation-duration");
-    }
-    _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._isZeroAnimationDuration()) && 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._isZeroAnimationDuration()) && 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 E`
-      <div class="sbb-sticky-bar__wrapper" @animationend=${this._onAnimationEnd}>
-        <div class="sbb-sticky-bar">
-          <slot></slot>
-        </div>
-      </div>
-      <div class="sbb-sticky-bar__intersector"></div>
-    `;
-    }
-  }, b = new WeakMap(), e = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    y = [z({ reflect: !0 })], w(r, null, y, { 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;
-})();
+import { SbbStickyBarElement as t } from "./sticky-bar/sticky-bar.js";
 export {
-  P as SbbStickyBarElement
+  t as SbbStickyBarElement
 };

package/container.d.ts

@@ -1,3 +1,6 @@
+/**
+ * @entrypoint
+ */
 export * from './container/container.js';
 export * from './container/sticky-bar.js';
 //# sourceMappingURL=container.d.ts.map

package/container.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/elements/container.ts"],"names":[],"mappings":"AAAA,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC"}
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../src/elements/container.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,0BAA0B,CAAC;AACzC,cAAc,2BAA2B,CAAC"}

package/container.js

@@ -1,2 +1,6 @@
-export * from "./container/container.js";
-export * from "./container/sticky-bar.js";
+import { SbbContainerElement as t } from "./container/container/container.js";
+import { SbbStickyBarElement as b } from "./container/sticky-bar/sticky-bar.js";
+export {
+  t as SbbContainerElement,
+  b as SbbStickyBarElement
+};

package/core/a11y/arrow-navigation.js

@@ -0,0 +1,33 @@
+function t() {
+  return document.documentElement.matches(":dir(rtl)") ? { prevKey: "ArrowRight", nextKey: "ArrowLeft" } : { prevKey: "ArrowLeft", nextKey: "ArrowRight" };
+}
+function u(e) {
+  return ["ArrowRight", "ArrowLeft", "ArrowUp", "ArrowDown"].includes(e.key);
+}
+function A(e) {
+  return e.key === "ArrowUp" || e.key === t().prevKey;
+}
+function f(e) {
+  return e.key === "ArrowDown" || e.key === t().nextKey;
+}
+function d(e) {
+  return u(e) || ["PageUp", "PageDown", "Home", "End"].includes(e.key);
+}
+function o(e, r, n) {
+  return (e + n + r) % r;
+}
+function w(e) {
+  return e - 1;
+}
+const y = 0;
+function K(e, r, n) {
+  const { prevKey: s, nextKey: i } = t();
+  return e.key === s || e.key === "ArrowUp" ? r < y ? w(n) : o(r, n, -1) : e.key === i || e.key === "ArrowDown" ? r >= n ? y : o(r, n, 1) : r;
+}
+export {
+  K as getNextElementIndex,
+  d as isArrowKeyOrPageKeysPressed,
+  u as isArrowKeyPressed,
+  f as isNextArrowKeyPressed,
+  A as isPreviousArrowKeyPressed
+};

package/core/a11y/fake-event-detection.js

@@ -0,0 +1,11 @@
+function e(u) {
+  return u.buttons === 0 || u.detail === 0;
+}
+function o(u) {
+  const r = u.touches && u.touches[0] || u.changedTouches && u.changedTouches[0];
+  return !!r && r.identifier === -1 && (r.radiusX == null || r.radiusX === 1) && (r.radiusY == null || r.radiusY === 1);
+}
+export {
+  e as isFakeMousedownFromScreenReader,
+  o as isFakeTouchstartFromScreenReader
+};

package/core/a11y/focus-trap-controller.d.ts

@@ -0,0 +1,35 @@
+import { ReactiveController, ReactiveControllerHost } from 'lit';
+export declare class SbbFocusTrapController implements ReactiveController {
+    private _host;
+    /**
+     * Whether the focus is trap is enabled.
+     * @param enabled
+     */
+    set enabled(enabled: boolean);
+    get enabled(): boolean;
+    private _abortController;
+    constructor(_host: ReactiveControllerHost & HTMLElement);
+    hostDisconnected(): void;
+    /**
+     * Focuses the element that should be focused when the focus trap is initialized.
+     * @returns Whether focus was moved successfully.
+     */
+    focusInitialElement(options?: FocusOptions): boolean;
+    /**
+     * Focuses the first tabbable element within the focus trap region.
+     * @returns Whether focus was moved successfully.
+     */
+    focusFirstTabbableElement(options?: FocusOptions): boolean;
+    /**
+     * Focuses the last tabbable element within the focus trap region.
+     * @returns Whether focus was moved successfully.
+     */
+    focusLastTabbableElement(options?: FocusOptions): boolean;
+    private _trap;
+    /** Get the first tabbable element from a DOM subtree (inclusive). */
+    private _getFirstTabbableElement;
+    /** Get the last tabbable element from a DOM subtree (inclusive). */
+    private _getLastTabbableElement;
+    private _untrap;
+}
+//# sourceMappingURL=focus-trap-controller.d.ts.map

package/core/a11y/focus-trap-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"focus-trap-controller.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus-trap-controller.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,kBAAkB,EAAE,sBAAsB,EAAE,MAAM,KAAK,CAAC;AAItE,qBAAa,sBAAuB,YAAW,kBAAkB;IAkB5C,OAAO,CAAC,KAAK;IAjBhC;;;OAGG;IACH,IAAW,OAAO,CAAC,OAAO,EAAE,OAAO,EAMlC;IACD,IAAW,OAAO,IAAI,OAAO,CAE5B;IAED,OAAO,CAAC,gBAAgB,CAAgC;gBAE7B,KAAK,EAAE,sBAAsB,GAAG,WAAW;IAI/D,gBAAgB,IAAI,IAAI;IAI/B;;;OAGG;IACI,mBAAmB,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO;IAuB3D;;;OAGG;IACI,yBAAyB,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO;IAUjE;;;OAGG;IACI,wBAAwB,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,OAAO;IAUhE,OAAO,CAAC,KAAK;IA2Bb,qEAAqE;IACrE,OAAO,CAAC,wBAAwB;IA6BhC,oEAAoE;IACpE,OAAO,CAAC,uBAAuB;IA8B/B,OAAO,CAAC,OAAO;CAIhB"}

package/core/a11y/focus-trap-controller.js

@@ -0,0 +1,95 @@
+import { interactivityChecker as n } from "./interactivity-checker.js";
+class r {
+  /**
+   * Whether the focus is trap is enabled.
+   * @param enabled
+   */
+  set enabled(t) {
+    t ? this._trap() : this._untrap();
+  }
+  get enabled() {
+    return !!this._abortController;
+  }
+  constructor(t) {
+    var e, s;
+    this._host = t, this._abortController = null, (s = (e = this._host).addController) == null || s.call(e, this);
+  }
+  hostDisconnected() {
+    this._untrap();
+  }
+  /**
+   * Focuses the element that should be focused when the focus trap is initialized.
+   * @returns Whether focus was moved successfully.
+   */
+  focusInitialElement(t) {
+    const e = this._host.querySelector("[sbb-focus-initial]");
+    if (e) {
+      if (!n.isFocusable(e)) {
+        const s = this._getFirstTabbableElement(e);
+        return s == null || s.focus(t), !!s;
+      }
+      return e.focus(t), !0;
+    }
+    return this.focusFirstTabbableElement(t);
+  }
+  /**
+   * Focuses the first tabbable element within the focus trap region.
+   * @returns Whether focus was moved successfully.
+   */
+  focusFirstTabbableElement(t) {
+    const e = this._getFirstTabbableElement(this._host);
+    return e && e.focus(t), !!e;
+  }
+  /**
+   * Focuses the last tabbable element within the focus trap region.
+   * @returns Whether focus was moved successfully.
+   */
+  focusLastTabbableElement(t) {
+    const e = this._getLastTabbableElement(this._host);
+    return e && e.focus(t), !!e;
+  }
+  _trap() {
+    this._abortController = new AbortController(), this._host.addEventListener("keydown", (t) => {
+      var e, s;
+      if (t.key === "Tab")
+        if (t.shiftKey) {
+          const l = this._getFirstTabbableElement(this._host);
+          l && t.composedPath().includes(l) && ((s = this._getLastTabbableElement(this._host)) == null || s.focus(), t.preventDefault());
+        } else {
+          const l = this._getLastTabbableElement(this._host);
+          l && t.composedPath().includes(l) && ((e = this._getFirstTabbableElement(this._host)) == null || e.focus(), t.preventDefault());
+        }
+    }, { signal: this._abortController.signal });
+  }
+  /** Get the first tabbable element from a DOM subtree (inclusive). */
+  _getFirstTabbableElement(t) {
+    if (t !== this._host && n.isFocusable(t) && n.isTabbable(t))
+      return t;
+    const e = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
+    for (let s = 0; s < e.length; s++) {
+      const l = e[s].nodeType === document.ELEMENT_NODE ? this._getFirstTabbableElement(e[s]) : null;
+      if (l)
+        return l;
+    }
+    return null;
+  }
+  /** Get the last tabbable element from a DOM subtree (inclusive). */
+  _getLastTabbableElement(t) {
+    if (t !== this._host && n.isFocusable(t) && n.isTabbable(t))
+      return t;
+    const e = t.shadowRoot ? t.shadowRoot.children : t.localName === "slot" ? t.assignedElements() : t.children;
+    for (let s = e.length - 1; s >= 0; s--) {
+      const l = e[s].nodeType === document.ELEMENT_NODE ? this._getLastTabbableElement(e[s]) : null;
+      if (l)
+        return l;
+    }
+    return null;
+  }
+  _untrap() {
+    var t;
+    (t = this._abortController) == null || t.abort(), this._abortController = null;
+  }
+}
+export {
+  r as SbbFocusTrapController
+};

package/core/a11y/focus-visible-within-controller.js

@@ -0,0 +1,19 @@
+import { sbbInputModalityDetector as s } from "./input-modality-detector.js";
+class i {
+  constructor(t) {
+    this._host = t, this._focusinHandler = () => {
+      this._host.toggleAttribute("data-has-visible-focus-within", s.mostRecentModality === "keyboard");
+    }, this._focusoutHandler = () => {
+      this._host.removeAttribute("data-has-visible-focus-within");
+    }, this._host.addController(this);
+  }
+  hostConnected() {
+    this._host.addEventListener("focusin", this._focusinHandler), this._host.addEventListener("focusout", this._focusoutHandler);
+  }
+  hostDisconnected() {
+    this._host.removeEventListener("focusin", this._focusinHandler), this._host.removeEventListener("focusout", this._focusoutHandler);
+  }
+}
+export {
+  i as SbbFocusVisibleWithinController
+};

package/core/a11y/focus.d.ts

@@ -1,10 +1,21 @@
 export declare const IS_FOCUSABLE_QUERY: string;
+/**
+ * @deprecated will be removed with next major version. Use methods of FocusTrapController.
+ *
+ * Note: the use of this function for more complex scenarios (with many nested elements) may be expensive.
+ */
 export declare function getFocusableElements(elements: HTMLElement[], properties?: {
     filter?: (el: HTMLElement) => boolean;
     findFirstFocusable?: boolean;
     includeInvisibleElements?: boolean;
 }): HTMLElement[];
+/**
+ * @deprecated will be removed with next major version. Use methods of FocusTrapController.
+ */
 export declare function getFirstFocusableElement(elements: HTMLElement[], filter?: (el: HTMLElement) => boolean): HTMLElement | null;
+/**
+ * @deprecated Will be removed with next major release. Use SbbFocusTrapController.
+ */
 export declare class SbbFocusHandler {
     private _controller;
     /**
@@ -17,6 +28,7 @@ export declare class SbbFocusHandler {
         filter?: (el: HTMLElement) => boolean;
         postFilter?: (el: HTMLElement) => boolean;
     }): void;
+    isTrapped(): boolean;
     disconnect(): void;
 }
 //# sourceMappingURL=focus.d.ts.map

package/core/a11y/focus.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,QAWnB,CAAC;AAGb,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,WAAW,EAAE,EACvB,UAAU,CAAC,EAAE;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,GACA,WAAW,EAAE,CAuCf;AAED,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,WAAW,EAAE,EACvB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,GACpC,WAAW,GAAG,IAAI,CAMpB;AAGD,qBAAa,eAAe;IAC1B,OAAO,CAAC,WAAW,CAAyB;IAE5C;;;;;OAKG;IACI,IAAI,CACT,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;QACtC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;KAC3C,GACA,IAAI;IA4CA,UAAU,IAAI,IAAI;CAI1B"}
+{"version":3,"file":"focus.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/focus.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,kBAAkB,QAWnB,CAAC;AAEb;;;;GAIG;AACH,wBAAgB,oBAAoB,CAClC,QAAQ,EAAE,WAAW,EAAE,EACvB,UAAU,CAAC,EAAE;IACX,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;IACtC,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B,wBAAwB,CAAC,EAAE,OAAO,CAAC;CACpC,GACA,WAAW,EAAE,CAuCf;AAED;;GAEG;AACH,wBAAgB,wBAAwB,CACtC,QAAQ,EAAE,WAAW,EAAE,EACvB,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,GACpC,WAAW,GAAG,IAAI,CAMpB;AAED;;GAEG;AACH,qBAAa,eAAe;IAC1B,OAAO,CAAC,WAAW,CAAgC;IAEnD;;;;;OAKG;IACI,IAAI,CACT,OAAO,EAAE,WAAW,EACpB,OAAO,CAAC,EAAE;QACR,MAAM,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;QACtC,UAAU,CAAC,EAAE,CAAC,EAAE,EAAE,WAAW,KAAK,OAAO,CAAC;KAC3C,GACA,IAAI;IA8CA,SAAS,IAAI,OAAO;IAIpB,UAAU,IAAI,IAAI;CAI1B"}