@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/checkbox/checkbox.js

@@ -0,0 +1,132 @@
+import { css as h, LitElement as d, html as p } from "lit";
+import { property as c, state as u, customElement as x } from "lit/decorators.js";
+import { SbbLanguageController as f, SbbSlotStateController as m } from "../core/controllers.js";
+import { EventEmitter as r } from "../core/eventing.js";
+import { i18nExpanded as g, i18nCollapsed as k } from "../core/i18n.js";
+import { SbbUpdateSchedulerMixin as _, SbbFormAssociatedCheckboxMixin as v, SbbHydrationMixin as y } from "../core/mixins.js";
+import { SbbIconNameMixin as w } from "../icon.js";
+import "../screen-reader-only.js";
+import "../visual-checkbox.js";
+const E = 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 z = Object.defineProperty, C = Object.getOwnPropertyDescriptor, a = (e, s, o, n) => {
+  for (var i = n > 1 ? void 0 : n ? C(s, o) : s, b = e.length - 1, l; b >= 0; b--)
+    (l = e[b]) && (i = (n ? l(s, o, i) : l(i)) || i);
+  return n && i && z(s, o, i), i;
+};
+let t = class extends _(
+  v(w(y(d)))
+) {
+  constructor() {
+    super(), this.indeterminate = !1, this.iconPlacement = "end", this._size = "m", this._group = null, this._language = new f(this), this._selectionPanelElement = null, this._stateChange = new r(
+      this,
+      t.events.stateChange,
+      { bubbles: !0 }
+    ), this._checkboxLoaded = new r(
+      this,
+      t.events.checkboxLoaded,
+      { bubbles: !0 }
+    ), new m(this);
+  }
+  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;
+  }
+  /**
+   * 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._group = this.closest("sbb-checkbox-group"), this._selectionPanelElement = (e = this.closest) == null ? void 0 : e.call(this, "sbb-selection-panel"), this.toggleAttribute("data-is-inside-selection-panel", !!this._selectionPanelElement), this.toggleAttribute(
+      "data-is-selection-panel-input",
+      !!this._selectionPanelElement && !((s = this.closest) != null && s.call(this, 'sbb-selection-panel [slot="content"]'))
+    ), this._checkboxLoaded.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._stateChange.emit({ type: "checked", checked: this.checked }), this._updateExpandedLabel()), e.has("disabled") && this.isSelectionPanelInput && this.disabled !== e.get("disabled") && this._stateChange.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._updateExpandedLabel(), 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 _updateExpandedLabel() {
+    var e;
+    if (await this.hydrationComplete, !((e = this._selectionPanelElement) != null && e.hasContent)) {
+      this._selectionPanelExpandedLabel = "", this.removeAttribute("data-has-selection-panel-label");
+      return;
+    }
+    this._selectionPanelExpandedLabel = this.checked ? ", " + g[this._language.current] : ", " + k[this._language.current], this.toggleAttribute("data-has-selection-panel-label", !0);
+  }
+  render() {
+    return p`
+      <span class="sbb-checkbox-wrapper">
+        <span class="sbb-checkbox">
+          <span class="sbb-checkbox__inner">
+            <span class="sbb-checkbox__aligner">
+              <sbb-visual-checkbox
+                ?checked=${this.checked}
+                ?indeterminate=${this.indeterminate}
+                ?disabled=${this.disabled || this.formDisabled}
+              ></sbb-visual-checkbox>
+            </span>
+            <span class="sbb-checkbox__label">
+              <slot></slot>
+              <span class="sbb-checkbox__label--icon">${this.renderIconSlot()}</span>
+              <slot name="suffix"></slot>
+            </span>
+          </span>
+          <slot name="subtext"></slot>
+          <sbb-screen-reader-only class="sbb-checkbox__expanded-label">
+            ${this._selectionPanelExpandedLabel}
+          </sbb-screen-reader-only>
+        </span>
+      </span>
+    `;
+  }
+};
+t.styles = E;
+t.events = {
+  didChange: "didChange",
+  stateChange: "stateChange",
+  checkboxLoaded: "checkboxLoaded"
+};
+a([
+  c({ type: Boolean })
+], t.prototype, "indeterminate", 2);
+a([
+  c({ attribute: "icon-placement", reflect: !0 })
+], t.prototype, "iconPlacement", 2);
+a([
+  c({ reflect: !0 })
+], t.prototype, "size", 1);
+a([
+  u()
+], t.prototype, "_selectionPanelExpandedLabel", 2);
+t = a([
+  x("sbb-checkbox")
+], t);
+export {
+  t as SbbCheckboxElement
+};

package/checkbox.d.ts

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

package/checkbox.d.ts.map

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

package/checkbox.js

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

package/chip/chip.d.ts

@@ -0,0 +1,21 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+/**
+ * It displays brief and compact information.
+ *
+ * @slot - Use the unnamed slot to add content to the `sbb-chip`.
+ */
+export declare class SbbChipElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Size of the chip. */
+    size: 'xxs' | 'xs' | 's';
+    /** Color of the chip. */
+    color: 'milk' | 'charcoal' | 'white' | 'granite';
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-chip': SbbChipElement;
+    }
+}
+//# sourceMappingURL=chip.d.ts.map

package/chip/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../../src/elements/chip/chip.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,cAAe,SAAQ,UAAU;IAC5C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wBAAwB;IAEjB,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,GAAG,CAAS;IAExC,yBAAyB;IAElB,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAU;cAE9C,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,UAAU,EAAE,cAAc,CAAC;KAC5B;CACF"}

package/chip.d.ts

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

package/chip.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip.d.ts","sourceRoot":"","sources":["../../src/elements/chip.ts"],"names":[],"mappings":"AAAA,cAAc,gBAAgB,CAAC"}

package/chip.js

@@ -0,0 +1,35 @@
+import { css as n, LitElement as p, html as h } from "lit";
+import { property as l, customElement as d } from "lit/decorators.js";
+const x = n`*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([color=milk]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-milk)}:host([color=charcoal]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-charcoal)}:host([color=white]){--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-background-color: var(--sbb-color-white)}:host([color=granite]){--sbb-chip-color: var(--sbb-color-white);--sbb-chip-background-color: var(--sbb-color-granite)}:host([size=xxs]){--sbb-chip-padding-block: 0em;--sbb-chip-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-text-font-size: var(--sbb-font-size-text-xxs)}:host([size=xs]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-3x);--sbb-text-font-size: var(--sbb-font-size-text-xs)}:host([size=s]){--sbb-chip-padding-block: var(--sbb-spacing-fixed-1x);--sbb-chip-padding-inline: var(--sbb-spacing-fixed-4x);--sbb-text-font-size: var(--sbb-font-size-text-s)}.sbb-chip{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);line-height:2;display:inline-flex;align-items:center;justify-content:center;height:calc(var(--sbb-typo-line-height-body-text) * var(--sbb-text-font-size) + var(--sbb-chip-padding-block) * 2);background-color:var(--sbb-chip-background-color);padding-inline:var(--sbb-chip-padding-inline);border-radius:var(--sbb-border-radius-infinity);color:var(--sbb-chip-color);overflow:hidden;display:flex}@media (forced-colors: active){.sbb-chip{outline:var(--sbb-border-width-1x) solid CanvasText;outline-offset:calc(-1 * var(--sbb-border-width-1x))}}.sbb-chip__text-wrapper{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block}`;
+var f = Object.defineProperty, v = Object.getOwnPropertyDescriptor, c = (a, b, i, e) => {
+  for (var o = e > 1 ? void 0 : e ? v(b, i) : b, r = a.length - 1, t; r >= 0; r--)
+    (t = a[r]) && (o = (e ? t(b, i, o) : t(o)) || o);
+  return e && o && f(b, i, o), o;
+};
+let s = class extends p {
+  constructor() {
+    super(...arguments), this.size = "xxs", this.color = "milk";
+  }
+  render() {
+    return h`
+      <span class="sbb-chip">
+        <span class="sbb-chip__text-wrapper">
+          <slot></slot>
+        </span>
+      </span>
+    `;
+  }
+};
+s.styles = x;
+c([
+  l({ reflect: !0 })
+], s.prototype, "size", 2);
+c([
+  l({ reflect: !0 })
+], s.prototype, "color", 2);
+s = c([
+  d("sbb-chip")
+], s);
+export {
+  s as SbbChipElement
+};

package/clock/clock.d.ts

@@ -0,0 +1,62 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbTime } from '../core/interfaces.js';
+
+/**
+ * It displays an analog clock with the classic SBB face.
+ */
+export declare class SbbClockElement extends LitElement {
+    static styles: CSSResultGroup;
+    /**
+     * Define a specific time which the clock should show statically.
+     * @param value HH:MM:ss
+     */
+    now: SbbTime | null;
+    /** Reference to the hour hand. */
+    private _clockHandHours;
+    /** Reference to the minute hand. */
+    private _clockHandMinutes;
+    /** Reference to the second hand. */
+    private _clockHandSeconds;
+    /** Hours value for the current date. */
+    private _hours;
+    /** Minutes value for the current date. */
+    private _minutes;
+    /** Seconds value for the current date. */
+    private _seconds;
+    /** Callback function for hours hand. */
+    private _moveHoursHandFn;
+    /** Callback function for minutes hand. */
+    private _moveMinutesHandFn;
+    /** Move the minutes hand every minute. */
+    private _handMovement?;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _handlePageVisibilityChange;
+    private _addEventListeners;
+    private _removeEventListeners;
+    private _removeHoursAnimationStyles;
+    private _removeSecondsAnimationStyles;
+    /** Given the current date, calculates the hh/mm/ss values and the hh/mm/ss left to the next midnight. */
+    private _assignCurrentTime;
+    /** Set the starting position for the three hands on the clock face. */
+    private _setHandsStartingPosition;
+    /** Set the starting position for the minutes hand. */
+    private _setMinutesHand;
+    /** Move the hours hand to the next value. */
+    private _moveHoursHand;
+    /** Move the minutes hand to the next value. */
+    private _moveMinutesHand;
+    private _addMinutesAndSetHands;
+    /** Stops the clock by removing all the animations. */
+    private _stopClock;
+    /** Starts the clock by defining the hands starting position then starting the animations. */
+    private _startClock;
+    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-clock': SbbClockElement;
+    }
+}
+//# sourceMappingURL=clock.d.ts.map

package/clock/clock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAIvC,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA2CrD;;GAEG;AACH,qBACa,eAAgB,SAAQ,UAAU;IAC7C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACgB,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAE9C,kCAAkC;IAClC,OAAO,CAAC,eAAe,CAAe;IAEtC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,oCAAoC;IACpC,OAAO,CAAC,iBAAiB,CAAe;IAExC,wCAAwC;IACxC,OAAO,CAAC,MAAM,CAAU;IAExB,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,0CAA0C;IAC1C,OAAO,CAAC,QAAQ,CAAU;IAE1B,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjE,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;cAEpC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;YAc9D,2BAA2B;IAQzC,OAAO,CAAC,kBAAkB;IAI1B,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;IAOrC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA6CjC,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B,sDAAsD;YACxC,UAAU;IAyBxB,6FAA6F;YAC/E,WAAW;cAiBA,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAY7E,oBAAoB,IAAI,IAAI;cAKzB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/clock.d.ts

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

package/clock.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clock.d.ts","sourceRoot":"","sources":["../../src/elements/clock.ts"],"names":[],"mappings":"AAAA,cAAc,kBAAkB,CAAC"}

package/clock.js

@@ -0,0 +1,156 @@
+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 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 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 c = class extends b {
+  constructor() {
+    super(...arguments), this.now = null, this._moveHoursHandFn = () => this._moveHoursHand(), this._moveMinutesHandFn = () => this._moveMinutesHand();
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("now") && (this.now ? (this._removeSecondsAnimationStyles(), this._removeHoursAnimationStyles(), this._stopClock()) : this._startClock());
+  }
+  async _handlePageVisibilityChange() {
+    document.visibilityState === "hidden" ? await this._stopClock() : this.now || await this._startClock();
+  }
+  _addEventListeners() {
+    document.addEventListener("visibilitychange", () => this._handlePageVisibilityChange(), !1);
+  }
+  _removeEventListeners() {
+    var t, s;
+    document.removeEventListener(
+      "visibilitychange",
+      () => this._handlePageVisibilityChange(),
+      !1
+    ), (t = this._clockHandHours) == null || t.removeEventListener("animationend", this._moveHoursHandFn), (s = this._clockHandSeconds) == null || s.removeEventListener("animationend", this._moveMinutesHandFn), clearInterval(this._handMovement);
+  }
+  _removeHoursAnimationStyles() {
+    var t;
+    (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");
+  }
+  _removeSecondsAnimationStyles() {
+    var t, s;
+    (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. */
+  _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. */
+  _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._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._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. */
+  _setMinutesHand() {
+    var t;
+    (t = this._clockHandMinutes) == null || t.style.setProperty(
+      "transform",
+      `rotateZ(${Math.ceil(this._minutes * C)}deg)`
+    );
+  }
+  /** Move the hours hand to the next value. */
+  _moveHoursHand() {
+    var s;
+    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. */
+  _moveMinutesHand() {
+    var t;
+    (t = this._clockHandSeconds) == null || t.removeEventListener("animationend", this._moveMinutesHandFn), this._removeSecondsAnimationStyles(), this._addMinutesAndSetHands(), this._handMovement = setInterval(
+      () => this._addMinutesAndSetHands(),
+      r * 1e3
+    );
+  }
+  _addMinutesAndSetHands() {
+    this._minutes++, this._setMinutesHand();
+  }
+  /** Stops the clock by removing all the animations. */
+  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 _startClock() {
+    var t, s;
+    (t = this._clockHandHours) == null || t.addEventListener(
+      "animationend",
+      this._moveHoursHandFn,
+      m
+    ), (s = this._clockHandSeconds) == null || s.addEventListener(
+      "animationend",
+      this._moveMinutesHandFn,
+      m
+    ), await new Promise(
+      () => setTimeout(() => this._setHandsStartingPosition(), E)
+    );
+  }
+  async firstUpdated(t) {
+    super.firstUpdated(t), this._addEventListeners(), this.now ? await this._stopClock() : await this._startClock();
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._removeEventListeners();
+  }
+  render() {
+    return v`
+      <div class="sbb-clock">
+        <span class="sbb-clock__face" .innerHTML=${p}></span>
+        <span
+          class="sbb-clock__hand-hours"
+          .innerHTML=${H}
+          ${l((t) => {
+      this._clockHandHours = t;
+    })}
+        ></span>
+        <span
+          class="sbb-clock__hand-minutes sbb-clock__hand-minutes--no-transition"
+          .innerHTML=${g}
+          ${l((t) => {
+      this._clockHandMinutes = t;
+    })}
+        ></span>
+        <span
+          class="sbb-clock__hand-seconds"
+          .innerHTML=${z}
+          ${l((t) => {
+      this._clockHandSeconds = t;
+    })}
+        ></span>
+      </div>
+    `;
+  }
+};
+c.styles = y;
+_([
+  M()
+], c.prototype, "now", 2);
+c = _([
+  k("sbb-clock")
+], c);
+export {
+  c as SbbClockElement
+};

package/container/container/container.d.ts

@@ -0,0 +1,25 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+
+/**
+ * It displays its content with the default page spacing.
+ *
+ * @slot - Use the unnamed slot to add anything to the container.
+ * @slot sticky-bar - The slot used by the sbb-sticky-bar component.
+ */
+export declare class SbbContainerElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Whether the container is expanded. */
+    expanded: boolean;
+    /** Whether the background color is shown on full container width on large screens. */
+    backgroundExpanded: boolean;
+    /** Color of the container, like transparent, white etc. */
+    color: 'transparent' | 'white' | 'milk';
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-container': SbbContainerElement;
+    }
+}
+//# sourceMappingURL=container.d.ts.map

package/container/container/container.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"container.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/container/container.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAKb;;;;;GAKG;AACH,qBACa,mBAAoB,SAAQ,UAAU;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,yCAAyC;IACU,QAAQ,UAAS;IAEpE,sFAAsF;IAE/E,kBAAkB,UAAS;IAElC,2DAA2D;IACvB,KAAK,EAAE,aAAa,GAAG,OAAO,GAAG,MAAM,CAAW;cAEnE,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAQ5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/container/container.d.ts

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

package/container/container.d.ts.map

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

package/container/container.js

@@ -0,0 +1,41 @@
+import { css as l, LitElement as d, html as p } from "lit";
+import { property as c, customElement as u } from "lit/decorators.js";
+const h = l`@charset "UTF-8";*,:before,:after{box-sizing:border-box}:host{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(:not([expanded])[background-expanded]){background-color:var(--sbb-container-background-color)}.sbb-container{background-color:var(--sbb-container-background-color)}.sbb-container:after,.sbb-container:before{content:" ";display:block;visibility:hidden;height:0}: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)}`;
+var f = Object.defineProperty, x = Object.getOwnPropertyDescriptor, s = (n, e, t, a) => {
+  for (var o = a > 1 ? void 0 : a ? x(e, t) : e, b = n.length - 1, i; b >= 0; b--)
+    (i = n[b]) && (o = (a ? i(e, t, o) : i(o)) || o);
+  return a && o && f(e, t, o), o;
+};
+let r = class extends d {
+  constructor() {
+    super(...arguments), this.expanded = !1, this.backgroundExpanded = !1, this.color = "white";
+  }
+  willUpdate(n) {
+    var e, t;
+    super.willUpdate(n), n.has("expanded") && ((t = (e = this.querySelector) == null ? void 0 : e.call(this, "sbb-sticky-bar")) == null || t.toggleAttribute("data-expanded", this.expanded));
+  }
+  render() {
+    return p`
+      <div class="sbb-container">
+        <slot></slot>
+      </div>
+      <slot name="sticky-bar"></slot>
+    `;
+  }
+};
+r.styles = h;
+s([
+  c({ type: Boolean, reflect: !0 })
+], r.prototype, "expanded", 2);
+s([
+  c({ type: Boolean, reflect: !0, attribute: "background-expanded" })
+], r.prototype, "backgroundExpanded", 2);
+s([
+  c({ reflect: !0 })
+], r.prototype, "color", 2);
+r = s([
+  u("sbb-container")
+], r);
+export {
+  r as SbbContainerElement
+};

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

@@ -0,0 +1,31 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+
+/**
+ * A container that sticks to the bottom of the page if slotted into `sbb-container`.
+ *
+ * @slot - Use the unnamed slot to add content to the sticky bar.
+ * @cssprop [--sbb-sticky-bar-padding-block=var(--sbb-spacing-responsive-xs)] - Block padding of the sticky bar.
+ * @cssprop [--sbb-sticky-bar-bottom-overlapping-height=0px] - Define an additional area where
+ * the sticky bar overlaps the following content on the bottom.
+ * This area becomes visible when the sticky bar transitions from sticky to the normal document flow.
+ * @cssprop [--sbb-sticky-bar-z-index] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable.
+ */
+export declare class SbbStickyBarElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Color of the container, like transparent, white etc. */
+    color?: 'white' | 'milk';
+    private _intersector?;
+    private _observer;
+    connectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _toggleShadowVisibility;
+    disconnectedCallback(): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-sticky-bar': SbbStickyBarElement;
+    }
+}
+//# sourceMappingURL=sticky-bar.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-bar.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAQb;;;;;;;;;;GAUG;AACH,qBAIa,mBAAoB,SAAQ,UAAU;IACjD,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,2DAA2D;IACvB,KAAK,CAAC,EAAE,OAAO,GAAG,MAAM,CAAC;IAE7D,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAEf;IAEc,iBAAiB,IAAI,IAAI;cAYtB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,uBAAuB;IAOf,oBAAoB,IAAI,IAAI;cAKzB,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/container/sticky-bar.d.ts

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

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

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