@sbb-esta/lyne-elements 0.52.1 → 0.53.0

package/checkbox/checkbox.js

@@ -1,86 +1,23 @@
-import { css as h, LitElement as d, html as p } from "lit";
-import { property as c, state as u, customElement as f } from "lit/decorators.js";
-import { SbbLanguageController as x, SbbSlotStateController as m } from "../core/controllers.js";
-import { EventEmitter as r } from "../core/eventing.js";
-import { i18nExpanded as k, i18nCollapsed as v } from "../core/i18n.js";
-import { SbbUpdateSchedulerMixin as g, SbbFormAssociatedCheckboxMixin as y, SbbHydrationMixin as _ } from "../core/mixins.js";
-import { SbbIconNameMixin as w } from "../icon.js";
-import "../screen-reader-only.js";
+import { css as i, LitElement as r, html as h } from "lit";
+import { property as p, customElement as m } from "lit/decorators.js";
+import { SbbSlotStateController as f } from "../core/controllers.js";
+import { SbbIconNameMixin as u } from "../icon.js";
+import { SbbCheckboxCommonElementMixin as d, checkboxCommonStyle as x } from "./common.js";
 import "../visual-checkbox.js";
-const z = h`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer;--sbb-checkbox-suffix-color: var(--sbb-color-charcoal);--sbb-checkbox-subtext-color: var(--sbb-color-granite);--sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x);display:inline-block;outline:none!important}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}:host([data-is-selection-panel-input]){--sbb-checkbox-label-gap: 0}:host(:not([data-is-inside-selection-panel])) :is(slot[name=subtext],slot[name=suffix]){display:none}slot[name=suffix]{color:var(--sbb-checkbox-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-checkbox-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch],[data-is-selection-panel-input])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=m]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}:host([data-is-selection-panel-input]:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox__inner:before{content:"";position:absolute;display:block;inset-block:calc(var(--sbb-spacing-responsive-xs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);inset-inline:calc(var(--sbb-spacing-responsive-xxs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);border:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-focus-outline-offset))}.sbb-checkbox__aligner,.sbb-checkbox__label--icon{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:is(:not([icon-name],[data-slot-names~=icon]),[data-is-selection-panel-input])) .sbb-checkbox__label--icon{display:none}.sbb-checkbox__label{display:flex;gap:var(--sbb-checkbox-label-gap);color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}:host(:not([data-is-selection-panel-input][data-has-selection-panel-label])) .sbb-checkbox__expanded-label{display:none}`;
-var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, b = (e, s, o, a) => {
-  for (var i = a > 1 ? void 0 : a ? S(s, o) : s, n = e.length - 1, l; n >= 0; n--)
-    (l = e[n]) && (i = (a ? l(s, o, i) : l(i)) || i);
-  return a && i && C(s, o, i), i;
+const _ = i`:host{outline:none!important;display:inline-block}.sbb-checkbox__label--icon{color:var(--sbb-checkbox-label-icon-color)}:host([icon-placement=end]) .sbb-checkbox__label--icon{margin-inline-start:auto}:host(:not([icon-name],[data-slot-names~=icon])) .sbb-checkbox__label--icon{display:none}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch])) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}:host([icon-placement=start]) .sbb-checkbox__label{flex-direction:row-reverse;justify-content:flex-end}:host([icon-placement=end]) .sbb-checkbox__label{justify-content:flex-start;flex-grow:1}`;
+var k = Object.defineProperty, v = Object.getOwnPropertyDescriptor, a = (l, s, c, t) => {
+  for (var e = t > 1 ? void 0 : t ? v(s, c) : s, n = l.length - 1, b; n >= 0; n--)
+    (b = l[n]) && (e = (t ? b(s, c, e) : b(e)) || e);
+  return t && e && k(s, c, e), e;
 };
-let t = class extends g(
-  y(w(_(d)))
+let o = class extends d(
+  u(r)
 ) {
   constructor() {
-    super(), this.indeterminate = !1, this.iconPlacement = "end", this.c = "m", this.d = null, this.e = new x(this), this.a = null, this.f = new r(
-      this,
-      t.events.stateChange,
-      { bubbles: !0 }
-    ), this.h = new r(
-      this,
-      t.events.checkboxLoaded,
-      { bubbles: !0 }
-    ), new m(this);
-  }
-  set size(e) {
-    this.c = e;
-  }
-  get size() {
-    var e;
-    return ((e = this.group) == null ? void 0 : e.size) ?? this.c;
-  }
-  /** Reference to the connected checkbox group. */
-  get group() {
-    return this.d;
-  }
-  /**
-   * Whether the input is the main input of a selection panel.
-   * @internal
-   */
-  get isSelectionPanelInput() {
-    return this.hasAttribute("data-is-selection-panel-input");
-  }
-  connectedCallback() {
-    var e, s;
-    super.connectedCallback(), this.d = this.closest("sbb-checkbox-group"), this.a = (e = this.closest) == null ? void 0 : e.call(this, "sbb-selection-panel"), this.toggleAttribute("data-is-inside-selection-panel", !!this.a), this.toggleAttribute(
-      "data-is-selection-panel-input",
-      !!this.a && !((s = this.closest) != null && s.call(this, 'sbb-selection-panel [slot="content"]'))
-    ), this.h.emit(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
-  }
-  async willUpdate(e) {
-    super.willUpdate(e), e.has("checked") && this.isSelectionPanelInput && this.checked !== e.get("checked") && (this.f.emit({ type: "checked", checked: this.checked }), this.g()), e.has("disabled") && this.isSelectionPanelInput && this.disabled !== e.get("disabled") && this.f.emit({ type: "disabled", disabled: this.disabled }), (e.has("checked") || e.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
-  }
-  firstUpdated(e) {
-    super.firstUpdated(e), this.startUpdate(), setTimeout(() => {
-      this.isSelectionPanelInput && this.g(), this.completeUpdate();
-    });
-  }
-  isDisabledExternally() {
-    var e;
-    return ((e = this.group) == null ? void 0 : e.disabled) ?? !1;
-  }
-  isRequiredExternally() {
-    var e;
-    return ((e = this.group) == null ? void 0 : e.required) ?? !1;
-  }
-  withUserInteraction() {
-    this.indeterminate && (this.indeterminate = !1);
-  }
-  async g() {
-    var e;
-    if (await this.hydrationComplete, !((e = this.a) != null && e.hasContent)) {
-      this.b = "", this.removeAttribute("data-has-selection-panel-label");
-      return;
-    }
-    this.b = this.checked ? ", " + k[this.e.current] : ", " + v[this.e.current], this.toggleAttribute("data-has-selection-panel-label", !0);
+    super(), this.iconPlacement = "end", new f(this);
   }
   render() {
-    return p`
+    return h`
       <span class="sbb-checkbox-wrapper">
         <span class="sbb-checkbox">
           <span class="sbb-checkbox__inner">
@@ -93,40 +30,26 @@ let t = class extends g(
             </span>
             <span class="sbb-checkbox__label">
               <slot></slot>
-              <span class="sbb-checkbox__label--icon">${this.renderIconSlot()}</span>
-              <slot name="suffix"></slot>
+              <span class="sbb-checkbox__label--icon sbb-checkbox__aligner"
+                >${this.renderIconSlot()}</span
+              >
             </span>
           </span>
-          <slot name="subtext"></slot>
-          <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
-            ${this.b}
-          </sbb-screen-reader-only>
         </span>
       </span>
     `;
   }
 };
-t.styles = z;
-t.events = {
-  didChange: "didChange",
-  stateChange: "stateChange",
-  checkboxLoaded: "checkboxLoaded"
+o.styles = [x, _];
+o.events = {
+  didChange: "didChange"
 };
-b([
-  c({ type: Boolean })
-], t.prototype, "indeterminate", 2);
-b([
-  c({ attribute: "icon-placement", reflect: !0 })
-], t.prototype, "iconPlacement", 2);
-b([
-  c({ reflect: !0 })
-], t.prototype, "size", 1);
-b([
-  u()
-], t.prototype, "b", 2);
-t = b([
-  f("sbb-checkbox")
-], t);
+a([
+  p({ attribute: "icon-placement", reflect: !0 })
+], o.prototype, "iconPlacement", 2);
+o = a([
+  m("sbb-checkbox")
+], o);
 export {
-  t as SbbCheckboxElement
+  o as SbbCheckboxElement
 };

package/checkbox/common/checkbox-common.d.ts

@@ -0,0 +1,13 @@
+import { LitElement } from 'lit';
+import { Constructor, SbbDisabledMixinType, SbbFormAssociatedCheckboxMixinType, SbbRequiredMixinType } from '../../core/mixins.js';
+import { SbbCheckboxGroupElement } from '../checkbox-group.js';
+
+export type SbbCheckboxSize = 's' | 'm';
+export declare class SbbCheckboxCommonElementMixinType extends SbbFormAssociatedCheckboxMixinType implements Partial<SbbDisabledMixinType>, Partial<SbbRequiredMixinType> {
+    indeterminate: boolean;
+    set size(value: SbbCheckboxSize);
+    get size(): SbbCheckboxSize;
+    get group(): SbbCheckboxGroupElement | null;
+}
+export declare const SbbCheckboxCommonElementMixin: <T extends Constructor<LitElement>>(superClass: T) => Constructor<SbbCheckboxCommonElementMixinType> & T;
+//# sourceMappingURL=checkbox-common.d.ts.map

package/checkbox/common/checkbox-common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-common.d.ts","sourceRoot":"","sources":["../../../../src/elements/checkbox/common/checkbox-common.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,UAAU,EAAkB,MAAM,KAAK,CAAC;AAGtD,OAAO,EACL,KAAK,WAAW,EAChB,KAAK,oBAAoB,EAEzB,KAAK,kCAAkC,EACvC,KAAK,oBAAoB,EAC1B,MAAM,sBAAsB,CAAC;AAC9B,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,sBAAsB,CAAC;AAEpE,MAAM,MAAM,eAAe,GAAG,GAAG,GAAG,GAAG,CAAC;AAExC,MAAM,CAAC,OAAO,OAAO,iCACnB,SAAQ,kCACR,YAAW,OAAO,CAAC,oBAAoB,CAAC,EAAE,OAAO,CAAC,oBAAoB,CAAC;IAEhE,aAAa,EAAE,OAAO,CAAC;IAE9B,IAAW,IAAI,CAAC,KAAK,EAAE,eAAe,EAAE;IACxC,IAAW,IAAI,IAAI,eAAe,CAAC;IAEnC,IAAW,KAAK,IAAI,uBAAuB,GAAG,IAAI,CAAC;CACpD;AAGD,eAAO,MAAM,6BAA6B,kDAC5B,CAAC,KACZ,YAAY,iCAAiC,CAAC,GAAG,CAuDnD,CAAC"}

package/checkbox/common.d.ts

@@ -0,0 +1,2 @@
+export * from './common/checkbox-common.js';
+//# sourceMappingURL=common.d.ts.map

package/checkbox/common.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"common.d.ts","sourceRoot":"","sources":["../../../src/elements/checkbox/common.ts"],"names":[],"mappings":"AAAA,cAAc,6BAA6B,CAAC;AAE5C,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,0CAA0C,CAAC"}

package/checkbox/common.js

@@ -0,0 +1,52 @@
+import { property as a } from "lit/decorators.js";
+import { SbbFormAssociatedCheckboxMixin as n } from "../core/mixins.js";
+import { css as l } from "lit";
+var h = Object.defineProperty, p = Object.getOwnPropertyDescriptor, c = (o, t, b, e) => {
+  for (var s = e > 1 ? void 0 : e ? p(t, b) : t, i = o.length - 1, r; i >= 0; i--)
+    (r = o[i]) && (s = (e ? r(t, b, s) : r(s)) || s);
+  return e && s && h(t, b, s), s;
+};
+const m = (o) => {
+  class t extends n(o) {
+    constructor() {
+      super(...arguments), this.indeterminate = !1, this._size = "m", this._group = null;
+    }
+    set size(e) {
+      this._size = e;
+    }
+    get size() {
+      var e;
+      return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
+    }
+    /** Reference to the connected checkbox group. */
+    get group() {
+      return this._group;
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._group = this.closest("sbb-checkbox-group"), ["disabled", "required", "size"].forEach((e) => this.requestUpdate(e));
+    }
+    async willUpdate(e) {
+      super.willUpdate(e), (e.has("checked") || e.has("indeterminate")) && (this.internals.ariaChecked = this.indeterminate ? "mixed" : `${this.checked}`);
+    }
+    isDisabledExternally() {
+      var e;
+      return ((e = this.group) == null ? void 0 : e.disabled) ?? !1;
+    }
+    isRequiredExternally() {
+      var e;
+      return ((e = this.group) == null ? void 0 : e.required) ?? !1;
+    }
+    withUserInteraction() {
+      this.indeterminate && (this.indeterminate = !1);
+    }
+  }
+  return c([
+    a({ type: Boolean })
+  ], t.prototype, "indeterminate", 2), c([
+    a({ reflect: !0 })
+  ], t.prototype, "size", 1), t;
+}, g = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{--sbb-checkbox-dimension: var(--sbb-size-icon-ui-small);--sbb-checkbox-label-color: var(--sbb-color-charcoal);--sbb-checkbox-label-icon-color: var(--sbb-color-charcoal);--sbb-checkbox-cursor: pointer;--sbb-checkbox-label-gap: var(--sbb-spacing-fixed-2x)}:host(:disabled){--sbb-checkbox-cursor: default;--sbb-checkbox-label-color: var(--sbb-color-granite)}.sbb-checkbox-wrapper{display:flex}.sbb-checkbox-wrapper:before{content:"​";-webkit-user-select:none;user-select:none;width:0;height:0}.sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);position:relative;display:block;width:100%;cursor:var(--sbb-checkbox-cursor);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-checkbox{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}.sbb-checkbox__inner{display:flex;align-items:start;gap:var(--sbb-spacing-fixed-2x)}.sbb-checkbox__label{display:flex;gap:var(--sbb-checkbox-label-gap);flex-grow:1;color:var(--sbb-checkbox-label-color);line-height:max(1em * var(--sbb-typo-line-height-body-text),var(--sbb-checkbox-dimension))}.sbb-checkbox__aligner{display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-body-text))}`;
+export {
+  m as SbbCheckboxCommonElementMixin,
+  g as checkboxCommonStyle
+};

package/checkbox.d.ts

@@ -1,3 +1,5 @@
 export * from './checkbox/checkbox.js';
 export * from './checkbox/checkbox-group.js';
+export * from './checkbox/checkbox-panel.js';
+export * from './checkbox/common.js';
 //# sourceMappingURL=checkbox.d.ts.map

package/checkbox.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/elements/checkbox.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC"}
+{"version":3,"file":"checkbox.d.ts","sourceRoot":"","sources":["../../src/elements/checkbox.ts"],"names":[],"mappings":"AAAA,cAAc,wBAAwB,CAAC;AACvC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,sBAAsB,CAAC"}

package/checkbox.js

@@ -1,2 +1,4 @@
 export * from "./checkbox/checkbox.js";
 export * from "./checkbox/checkbox-group.js";
+export * from "./checkbox/checkbox-panel.js";
+export * from "./checkbox/common.js";

package/clock.js

@@ -1,156 +1,156 @@
-import { css as u, LitElement as _, html as M } from "lit";
-import { property as p, customElement as v } from "lit/decorators.js";
-import { ref as c } from "lit/directives/ref.js";
-const f = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="#FFF" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
-`, k = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path id="mod_clock_svg_hours" d="M55.7 64.5h-6.4l.6-44h5.2z"/></svg>
-`, z = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
-`, g = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
+import { css as u, LitElement as b, html as v } from "lit";
+import { property as M, customElement as k } from "lit/decorators.js";
+import { ref as l } from "lit/directives/ref.js";
+const p = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><g class="face"><circle fill="#FFF" cx="52.5" cy="52.5" r="52.5"/><path d="M50.75 4h3.5v12h-3.5zM50.75 89h3.5v12h-3.5zM75.233 9.623l3.03 1.75-6 10.392-3.03-1.75zM32.734 83.233l3.03 1.75-6 10.392-3.03-1.75zM93.628 26.732l1.75 3.031-10.392 6-1.75-3.03zM20.017 69.234l1.75 3.031-10.392 6-1.75-3.03zM101 50.75v3.5H89v-3.5zM16 50.75v3.5H4v-3.5zM95.379 75.232l-1.75 3.031-10.392-6 1.75-3.03zM21.766 32.734l-1.75 3.031-10.392-6 1.75-3.03zM78.267 93.63l-3.03 1.75-6-10.393 3.03-1.75zM35.766 20.015l-3.03 1.75-6-10.392 3.03-1.75z"/><g><path d="M56.873 4.19l1.392.147-.366 3.48-1.392-.145zM47.101 97.177l1.393.146-.366 3.481-1.392-.146zM61.896 4.914l1.37.29-.728 3.424-1.37-.29zM42.458 96.366l1.37.29-.728 3.424-1.37-.291zM66.825 6.157l1.332.432-1.082 3.33-1.331-.434zM37.931 95.085l1.332.432-1.082 3.33-1.331-.433zM71.584 7.906l1.28.569-1.424 3.197-1.28-.57zM33.56 93.32l1.278.569-1.423 3.197-1.28-.57zM80.44 12.852l1.133.823-2.058 2.831-1.132-.823zM25.481 88.494l1.133.822-2.057 2.832-1.133-.823zM84.43 15.986l1.04.937-2.342 2.6-1.04-.936zM21.87 85.469l1.04.936-2.341 2.601-1.04-.937zM88.072 19.522l.937 1.04-2.6 2.343-.937-1.04zM18.593 82.088l.937 1.04-2.601 2.342-.937-1.04zM91.328 23.425l.823 1.133-2.832 2.057-.823-1.132zM15.684 78.385l.823 1.132-2.832 2.058-.822-1.133zM96.52 32.128l.57 1.279-3.198 1.423-.57-1.278zM11.109 70.161l.569 1.279-3.197 1.423-.57-1.279zM98.407 36.85l.433 1.332-3.33 1.081-.432-1.331zM9.483 65.74l.432 1.33-3.329 1.082-.432-1.331zM99.795 41.726l.291 1.37-3.423.727-.29-1.37zM8.34 61.17l.292 1.37-3.424.728-.29-1.37zM100.66 46.73l.146 1.393-3.48.366-.147-1.392zM7.674 56.506l.146 1.392-3.48.366-.147-1.392zM100.811 56.873l-.146 1.392-3.48-.365.145-1.393zM7.821 47.101l-.146 1.392-3.48-.365.145-1.393zM100.09 61.895l-.291 1.369-3.424-.728.291-1.369zM8.631 42.46l-.291 1.37-3.423-.728.29-1.37zM98.84 66.827l-.432 1.331-3.329-1.081.433-1.332zM9.918 37.93l-.433 1.331-3.329-1.082.433-1.331zM97.098 71.585l-.569 1.28-3.197-1.424.57-1.28zM11.677 33.558l-.57 1.28-3.197-1.424.57-1.279zM92.149 80.439l-.823 1.133-2.832-2.058.823-1.132zM16.506 25.482l-.823 1.133-2.831-2.057.823-1.133zM89.017 84.431l-.937 1.04-2.6-2.341.936-1.04zM19.528 21.869l-.936 1.04-2.601-2.342.936-1.04zM85.48 88.076l-1.041.936-2.342-2.6 1.04-.937zM22.91 18.59l-1.04.937-2.341-2.601 1.04-.937zM81.574 91.328l-1.133.823-2.057-2.831 1.132-.823zM26.617 15.684l-1.133.823-2.057-2.832 1.132-.823zM72.873 96.524l-1.279.57-1.423-3.198 1.278-.57zM34.838 11.105l-1.279.57-1.423-3.198 1.279-.57zM68.151 98.405l-1.331.432-1.082-3.329 1.332-.432zM39.259 9.485l-1.332.433-1.081-3.33 1.331-.432zM63.272 99.799l-1.369.29-.728-3.422 1.37-.291zM43.83 8.337l-1.369.291-.727-3.423 1.37-.291zM58.27 100.662l-1.393.146-.366-3.48 1.393-.147zM48.494 7.672l-1.392.147-.366-3.481 1.392-.147z"/></g></g></svg>
+`, H = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path id="mod_clock_svg_hours" d="M55.7 64.5h-6.4l.6-44h5.2z"/></svg>
+`, g = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M55.1,64.5h-5.2l0.8-58h3.6L55.1,64.5z"/></svg>
+`, z = `<svg focusable="false" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 105 105"><path d="M57.8,21.3c0-2.9-2.4-5.2-5.2-5.2s-5.3,2.3-5.3,5.2c0,2.7,2,4.8,4.5,5.2V69h1.5V26.5C55.8,26.2,57.8,24,57.8,21.3z"/></svg>
 `, y = u`*,:before,:after{box-sizing:border-box}:host{--sbb-clock-hours-animation-start-angle: 0deg;--sbb-clock-seconds-animation-start-angle: 0deg;--sbb-clock-hours-animation-duration: 0s;--sbb-clock-seconds-animation-duration: 0s;--sbb-clock-animation-play-state: paused;--sbb-clock-seconds-hand-color: var(--sbb-color-red);display:block}.sbb-clock{position:relative;width:100%;height:100%;aspect-ratio:1/1;overflow:hidden;contain:content}.sbb-clock__face,.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds{position:absolute;top:0;right:0;bottom:0;left:0;transform-origin:center center;transform:rotate(0);transform-style:preserve-3d;backface-visibility:hidden}.sbb-clock__hand-minutes{transition:transform .2s cubic-bezier(.4,2.08,.55,.44)}@supports not (aspect-ratio: 1/1){.sbb-clock__hand-minutes{transform-origin:50% 49.625%}}.sbb-clock__hand-hours{animation-name:rotate;animation-duration:43200s;animation-iteration-count:infinite;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state)}.sbb-clock__hand-hours--initial-hour{animation-name:hand-hours-animation-initial-hour;animation-duration:var(--sbb-clock-hours-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}.sbb-clock__hand-minutes--no-transition{transition:none}.sbb-clock__hand-seconds{animation-name:hand-seconds-animation;animation-duration:60s;animation-timing-function:linear;animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:infinite;fill:var(--sbb-clock-seconds-hand-color)}.sbb-clock__hand-seconds--initial-minute{animation-name:hand-seconds-animation-initial-minute;animation-duration:var(--sbb-clock-seconds-animation-duration);animation-play-state:var(--sbb-clock-animation-play-state);animation-iteration-count:1}:host(:not([data-initialized])) :is(.sbb-clock__hand-hours,.sbb-clock__hand-minutes,.sbb-clock__hand-seconds){display:none}@keyframes rotate{to{transform:rotate(360deg)}}@keyframes hand-hours-animation-initial-hour{0%{transform:rotate(var(--sbb-clock-hours-animation-start-angle))}to{transform:rotate(360deg)}}@keyframes hand-seconds-animation{0%{transform:rotate(0)}97.5%,to{transform:rotate(360deg)}}@keyframes hand-seconds-animation-initial-minute{0%{transform:rotate(var(--sbb-clock-seconds-animation-start-angle))}97.5%,to{transform:rotate(360deg)}}`;
-var w = Object.defineProperty, L = Object.getOwnPropertyDescriptor, m = (t, s, a, n) => {
-  for (var i = n > 1 ? void 0 : n ? L(s, a) : s, o = t.length - 1, e; o >= 0; o--)
-    (e = t[o]) && (i = (n ? e(s, a, i) : e(i)) || i);
-  return n && i && w(s, a, i), i;
+var f = Object.defineProperty, S = Object.getOwnPropertyDescriptor, _ = (t, s, o, i) => {
+  for (var n = i > 1 ? void 0 : i ? S(s, o) : s, e = t.length - 1, a; e >= 0; e--)
+    (a = t[e]) && (n = (i ? a(s, o, n) : a(n)) || n);
+  return i && n && f(s, o, n), n;
 };
-const E = 12, O = 60, r = 60, S = 50, h = 360, d = 30, N = 6, T = 360 / 58.5, A = 60, C = 3600, b = {
+const w = 12, L = 60, r = 60, E = 50, d = 360, h = 30, C = 6, A = 360 / 58.5, O = 60, P = 3600, m = {
   once: !0,
   passive: !0
 };
-let l = class extends _ {
+let c = class extends b {
   constructor() {
-    super(...arguments), this.now = null, this.h = () => this.r(), this.f = () => this.s();
+    super(...arguments), this.now = null, this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand();
   }
   willUpdate(t) {
-    super.willUpdate(t), t.has("now") && (this.now ? (this.j(), this.k(), this.l()) : this.m());
+    super.willUpdate(t), t.has("now") && (this.now ? (this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), this._stopClock()) : this._startClock());
   }
-  async n() {
-    document.visibilityState === "hidden" ? await this.l() : this.now || await this.m();
+  async _handlePageVisibilityChange() {
+    document.visibilityState === "hidden" ? await this._stopClock() : this.now || await this._startClock();
   }
-  t() {
-    document.addEventListener("visibilitychange", () => this.n(), !1);
+  _addEventListeners() {
+    document.addEventListener("visibilitychange", () => this._handlePageVisibilityChange(), !1);
   }
-  u() {
+  _removeEventListeners() {
     var t, s;
     document.removeEventListener(
       "visibilitychange",
-      () => this.n(),
+      () => this._handlePageVisibilityChange(),
       !1
-    ), (t = this.a) == null || t.removeEventListener("animationend", this.h), (s = this.b) == null || s.removeEventListener("animationend", this.f), clearInterval(this.i);
+    ), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (s = this._clockHandSeconds) == null || s.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
   }
-  k() {
+  _removeHoursAnimationStyles() {
     var t;
-    (t = this.a) == null || t.classList.remove("sbb-clock__hand-hours--initial-hour"), this.style.removeProperty("--sbb-clock-hours-animation-start-angle"), this.style.removeProperty("--sbb-clock-hours-animation-duration");
+    (t = this._clockHandHours) == null || t.classList.remove("sbb-clock__hand-hours--initial-hour"), this.style.removeProperty("--sbb-clock-hours-animation-start-angle"), this.style.removeProperty("--sbb-clock-hours-animation-duration");
   }
-  j() {
+  _removeSecondsAnimationStyles() {
     var t, s;
-    (t = this.b) == null || t.classList.remove("sbb-clock__hand-seconds--initial-minute"), (s = this.d) == null || s.classList.remove("sbb-clock__hand-minutes--no-transition"), this.style.removeProperty("--sbb-clock-seconds-animation-start-angle"), this.style.removeProperty("--sbb-clock-seconds-animation-duration");
+    (t = this._clockHandSeconds) == null || t.classList.remove("sbb-clock__hand-seconds--initial-minute"), (s = this._clockHandMinutes) == null || s.classList.remove("sbb-clock__hand-minutes--no-transition"), this.style.removeProperty("--sbb-clock-seconds-animation-start-angle"), this.style.removeProperty("--sbb-clock-seconds-animation-duration");
   }
   /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
-  v() {
-    const t = this.now ? null : /* @__PURE__ */ new Date(), [s, a, n] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((i) => +i);
-    this.e = s % 12, this.c = a, this.g = n;
+  _assignCurrentTime() {
+    const t = this.now ? null : /* @__PURE__ */ new Date(), [s, o, i] = t ? [t.getHours(), t.getMinutes(), t.getSeconds()] : this.now.split(":").map((n) => +n);
+    this._hours = s % 12, this._minutes = o, this._seconds = i;
   }
   /** Set the starting position for the three hands on the clock face. */
-  o() {
-    var o, e;
-    this.v();
-    const t = r - this.g, s = O - this.c, a = E - this.e;
-    let n = 0, i = 0;
-    t > 0 && (n += t, i = 1), s > 0 && (n += (s - i) * A, i = 1), a > 0 && (n += (a - i) * C), this.style.setProperty(
+  _setHandsStartingPosition() {
+    var e, a;
+    this._assignCurrentTime();
+    const t = r - this._seconds, s = L - this._minutes, o = w - this._hours;
+    let i = 0, n = 0;
+    t > 0 && (i += t, n = 1), s > 0 && (i += (s - n) * O, n = 1), o > 0 && (i += (o - n) * P), this.style.setProperty(
       "--sbb-clock-hours-animation-start-angle",
-      `${Math.ceil(this.e * d + this.c / 2)}deg`
-    ), this.style.setProperty("--sbb-clock-hours-animation-duration", `${n}s`), this.style.setProperty(
+      `${Math.ceil(this._hours * h + this._minutes / 2)}deg`
+    ), this.style.setProperty("--sbb-clock-hours-animation-duration", `${i}s`), this.style.setProperty(
       "--sbb-clock-seconds-animation-start-angle",
-      `${Math.ceil(this.g * T)}deg`
-    ), this.style.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this.p(), (o = this.b) == null || o.classList.add("sbb-clock__hand-seconds--initial-minute"), (e = this.a) == null || e.classList.add("sbb-clock__hand-hours--initial-hour"), this.style.setProperty("--sbb-clock-animation-play-state", "running"), this.toggleAttribute("data-initialized", !0);
+      `${Math.ceil(this._seconds * A)}deg`
+    ), this.style.setProperty("--sbb-clock-seconds-animation-duration", `${t}s`), this._setMinutesHand(), (e = this._clockHandSeconds) == null || e.classList.add("sbb-clock__hand-seconds--initial-minute"), (a = this._clockHandHours) == null || a.classList.add("sbb-clock__hand-hours--initial-hour"), this.style.setProperty("--sbb-clock-animation-play-state", "running"), this.toggleAttribute("data-initialized", !0);
   }
   /** Set the starting position for the minutes hand. */
-  p() {
+  _setMinutesHand() {
     var t;
-    (t = this.d) == null || t.style.setProperty(
+    (t = this._clockHandMinutes) == null || t.style.setProperty(
       "transform",
-      `rotateZ(${Math.ceil(this.c * N)}deg)`
+      `rotateZ(${Math.ceil(this._minutes * C)}deg)`
     );
   }
   /** Move the hours hand to the next value. */
-  r() {
+  _moveHoursHand() {
     var s;
-    this.k();
-    let t = Math.ceil(this.e * d + this.c / 2);
-    t >= h && (t -= h), (s = this.a) == null || s.style.setProperty("transform", `rotateZ(${t}deg)`);
+    this._removeHoursAnimationStyles();
+    let t = Math.ceil(this._hours * h + this._minutes / 2);
+    t >= d && (t -= d), (s = this._clockHandHours) == null || s.style.setProperty("transform", `rotateZ(${t}deg)`);
   }
   /** Move the minutes hand to the next value. */
-  s() {
+  _moveMinutesHand() {
     var t;
-    (t = this.b) == null || t.removeEventListener("animationend", this.f), this.j(), this.q(), this.i = setInterval(
-      () => this.q(),
+    (t = this._clockHandSeconds) == null || t.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(
+      () => this._addMinutesAndSetHands(),
       r * 1e3
     );
   }
-  q() {
-    this.c++, this.p();
+  _addMinutesAndSetHands() {
+    this._minutes++, this._setMinutesHand();
   }
   /** Stops the clock by removing all the animations. */
-  async l() {
-    var t, s, a, n, i;
-    clearInterval(this.i), this.now ? (this.o(), await new Promise((o) => setTimeout(o)), (t = this.b) == null || t.classList.add("sbb-clock__hand-seconds--initial-minute"), (s = this.a) == null || s.classList.add("sbb-clock__hand-hours--initial-hour")) : (this.j(), this.k()), (a = this.a) == null || a.removeEventListener("animationend", this.h), (n = this.b) == null || n.removeEventListener("animationend", this.f), (i = this.d) == null || i.classList.add("sbb-clock__hand-minutes--no-transition"), this.style.setProperty("--sbb-clock-animation-play-state", "paused");
+  async _stopClock() {
+    var t, s, o, i, n;
+    clearInterval(this._handMovement), this.now ? (this._setHandsStartingPosition(), await new Promise((e) => setTimeout(e)), (t = this._clockHandSeconds) == null || t.classList.add("sbb-clock__hand-seconds--initial-minute"), (s = this._clockHandHours) == null || s.classList.add("sbb-clock__hand-hours--initial-hour")) : (this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles()), (o = this._clockHandHours) == null || o.removeEventListener("animationend", this._moveHoursHandFn), (i = this._clockHandSeconds) == null || i.removeEventListener("animationend", this._moveMinutesHandFn), (n = this._clockHandMinutes) == null || n.classList.add("sbb-clock__hand-minutes--no-transition"), this.style.setProperty("--sbb-clock-animation-play-state", "paused");
   }
   /** Starts the clock by defining the hands starting position then starting the animations. */
-  async m() {
+  async _startClock() {
     var t, s;
-    (t = this.a) == null || t.addEventListener(
+    (t = this._clockHandHours) == null || t.addEventListener(
       "animationend",
-      this.h,
-      b
-    ), (s = this.b) == null || s.addEventListener(
+      this._moveHoursHandFn,
+      m
+    ), (s = this._clockHandSeconds) == null || s.addEventListener(
       "animationend",
-      this.f,
-      b
+      this._moveMinutesHandFn,
+      m
     ), await new Promise(
-      () => setTimeout(() => this.o(), S)
+      () => setTimeout(() => this._setHandsStartingPosition(), E)
     );
   }
   async firstUpdated(t) {
-    super.firstUpdated(t), this.t(), this.now ? await this.l() : await this.m();
+    super.firstUpdated(t), this._addEventListeners(), this.now ? await this._stopClock() : await this._startClock();
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.u();
+    super.disconnectedCallback(), this._removeEventListeners();
   }
   render() {
-    return M`
+    return v`
       <div class="sbb-clock">
-        <span class="sbb-clock__face" .innerHTML=${f}></span>
+        <span class="sbb-clock__face" .innerHTML=${p}></span>
         <span
           class="sbb-clock__hand-hours"
-          .innerHTML=${k}
-          ${c((t) => {
-      this.a = t;
+          .innerHTML=${H}
+          ${l((t) => {
+      this._clockHandHours = t;
     })}
         ></span>
         <span
           class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
-          .innerHTML=${z}
-          ${c((t) => {
-      this.d = t;
+          .innerHTML=${g}
+          ${l((t) => {
+      this._clockHandMinutes = t;
     })}
         ></span>
         <span
           class="sbb-clock__hand-seconds"
-          .innerHTML=${g}
-          ${c((t) => {
-      this.b = t;
+          .innerHTML=${z}
+          ${l((t) => {
+      this._clockHandSeconds = t;
     })}
         ></span>
       </div>
     `;
   }
 };
-l.styles = y;
-m([
-  p()
-], l.prototype, "now", 2);
-l = m([
-  v("sbb-clock")
-], l);
+c.styles = y;
+_([
+  M()
+], c.prototype, "now", 2);
+c = _([
+  k("sbb-clock")
+], c);
 export {
-  l as SbbClockElement
+  c as SbbClockElement
 };

package/container/sticky-bar.js

@@ -3,33 +3,33 @@ import { property as v, customElement as p } from "lit/decorators.js";
 import { hostAttributes as k } from "../core/decorators.js";
 import { AgnosticIntersectionObserver as h } from "../core/observers.js";
 const y = d`*,: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))}}:host([data-expanded]) .sbb-sticky-bar__wrapper:before{padding-inline:var(--sbb-spacing-responsive-xxs)}.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)}`;
-var u = Object.defineProperty, f = Object.getOwnPropertyDescriptor, n = (a, t, i, r) => {
-  for (var s = r > 1 ? void 0 : r ? f(t, i) : t, o = a.length - 1, e; o >= 0; o--)
-    (e = a[o]) && (s = (r ? e(t, i, s) : e(s)) || s);
-  return r && s && u(t, i, s), s;
+var u = Object.defineProperty, g = Object.getOwnPropertyDescriptor, n = (a, s, e, r) => {
+  for (var t = r > 1 ? void 0 : r ? g(s, e) : s, o = a.length - 1, b; o >= 0; o--)
+    (b = a[o]) && (t = (r ? b(s, e, t) : b(t)) || t);
+  return r && t && u(s, e, t), t;
 };
-let b = class extends c {
+let i = class extends c {
   constructor() {
-    super(...arguments), this.b = new h(
-      (a) => this.c(a[0])
+    super(...arguments), this._observer = new h(
+      (a) => this._toggleShadowVisibility(a[0])
     );
   }
   connectedCallback() {
     super.connectedCallback();
     const a = this.closest("sbb-container");
-    a && this.toggleAttribute("data-expanded", a.expanded), this.a && this.b.observe(this.a);
+    a && this.toggleAttribute("data-expanded", a.expanded), this._intersector && this._observer.observe(this._intersector);
   }
   firstUpdated(a) {
-    super.firstUpdated(a), this.a || (this.a = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this.b.observe(this.a)), this.b.observe(this);
+    super.firstUpdated(a), this._intersector || (this._intersector = this.shadowRoot.querySelector(".sbb-sticky-bar__intersector"), this._observer.observe(this._intersector)), this._observer.observe(this);
   }
-  c(a) {
+  _toggleShadowVisibility(a) {
     this.toggleAttribute(
       "data-sticking",
       !a.isIntersecting && a.boundingClientRect.top > 0
     );
   }
   disconnectedCallback() {
-    super.disconnectedCallback(), this.b.disconnect();
+    super.disconnectedCallback(), this._observer.disconnect();
   }
   render() {
     return l`
@@ -42,16 +42,16 @@ let b = class extends c {
     `;
   }
 };
-b.styles = y;
+i.styles = y;
 n([
   v({ reflect: !0 })
-], b.prototype, "color", 2);
-b = n([
+], i.prototype, "color", 2);
+i = n([
   p("sbb-sticky-bar"),
   k({
     slot: "sticky-bar"
   })
-], b);
+], i);
 export {
-  b as SbbStickyBarElement
+  i as SbbStickyBarElement
 };