@sbb-esta/lyne-elements 2.8.0 → 2.10.0

package/chip/chip-group/chip-group.component.js

@@ -0,0 +1,226 @@
+var x = (s) => {
+  throw TypeError(s);
+};
+var k = (s, r, n) => r.has(s) || x("Cannot " + n);
+var A = (s, r, n) => (k(s, r, "read from private field"), n ? n.call(s) : r.get(s)), S = (s, r, n) => r.has(s) ? x("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(s) : r.set(s, n), b = (s, r, n, o) => (k(s, r, "write to private field"), o ? o.call(s, n) : r.set(s, n), n);
+import { __esDecorate as _, __runInitializers as d } from "tslib";
+import { css as K, LitElement as z, isServer as I, html as O } from "lit";
+import { customElement as T, property as D } from "lit/decorators.js";
+import { inputAutocompleteEvent as V } from "../../autocomplete.js";
+import { isArrowKeyPressed as q, getNextElementIndex as L } from "../../core/a11y.js";
+import { SbbLanguageController as M } from "../../core/controllers.js";
+import { isLean as R } from "../../core/dom.js";
+import { EventEmitter as f } from "../../core/eventing.js";
+import { i18nSelectionRequired as B, i18nChipGroupInputDescription as G } from "../../core/i18n.js";
+import { SbbRequiredMixin as N, SbbDisabledMixin as $, SbbNegativeMixin as j, SbbFormAssociatedMixin as U } from "../../core/mixins.js";
+import { SbbChipElement as H } from "../chip.js";
+const J = K`*,:before,:after{box-sizing:border-box}:host{--sbb-chip-group-input-min-width: 9.375rem;max-width:100%}:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .375rem .3125rem}@media (min-width: 52.5rem){:host([data-size=s]:not([data-empty])){--sbb-chip-group-margin-block: .3125rem .1875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width)}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
+let le = (() => {
+  var h, u;
+  let s = [T("sbb-chip-group")], r, n = [], o, v = N($(j(U(z)))), g = [], E, y, C = [], w = [];
+  var p = (u = class extends v {
+    constructor() {
+      var e, t;
+      super();
+      S(this, h);
+      b(this, h, (d(this, g), d(this, C, ["Enter"]))), this._change = (d(this, w), new f(this, p.events.change)), this._input = new f(this, p.events.input), this._chipInputTokenEnd = new f(this, p.events.chipInputTokenEnd), this._inputAttributeObserver = I ? null : new MutationObserver(() => this._reactToInputChanges()), this._formFieldAttributeObserver = I ? null : new MutationObserver(() => this._inheritSize()), this._language = new M(this), this.internals.role = "listbox", (e = this.addEventListener) == null || e.call(this, H.events.requestDelete, (i) => this._deleteChip(i.target)), (t = this.addEventListener) == null || t.call(this, "keydown", (i) => this._onChipKeyDown(i));
+    }
+    /** Value of the form element. */
+    set value(e) {
+      e = e ?? [], super.value = e;
+      const t = this.value, i = [...t];
+      for (const l of e)
+        i.includes(l) && i.splice(i.indexOf(l), 1);
+      i.forEach((l) => {
+        var c;
+        return (c = this._chipElements().find((m) => m.value === l)) == null ? void 0 : c.remove();
+      });
+      const a = [...e];
+      for (const l of t)
+        a.includes(l) && a.splice(a.indexOf(l), 1);
+      a.forEach((l) => this._createChipElement(l));
+    }
+    get value() {
+      return this._chipElements().map((e) => e.value);
+    }
+    /** The array of keys that will trigger a `chipInputTokenEnd` event. Default `['Enter']` */
+    get separatorKeys() {
+      return A(this, h);
+    }
+    set separatorKeys(e) {
+      b(this, h, e);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this._setupComponent();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), (e.has("disabled") || e.has("formDisabled") || e.has("negative")) && this._proxyStateToChips();
+    }
+    /** @internal */
+    formResetCallback() {
+      this.value = null;
+    }
+    /** @internal */
+    formStateRestoreCallback(e, t) {
+      if (!e) {
+        this.value = null;
+        return;
+      }
+      this.value = e.map((i) => i[1]);
+    }
+    updateFormValue() {
+      const e = new FormData();
+      this.value.forEach((t) => e.append(this.name, t)), this.internals.setFormValue(e), this.validate(), this._updateInputDescription();
+    }
+    shouldValidate(e) {
+      return super.shouldValidate(e) || e === "required";
+    }
+    validate() {
+      super.validate(), this.required && this.value.length === 0 ? this.setValidityFlag("valueMissing", B[this._language.current]) : this.removeValidityFlag("valueMissing");
+    }
+    /** Return the list of chip elements **/
+    _chipElements() {
+      var e;
+      return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-chip")) ?? []);
+    }
+    /** Return the list of enabled chip elements **/
+    _enabledChipElements() {
+      var e;
+      return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-chip:not([disabled])")) ?? []);
+    }
+    _setupComponent() {
+      var i, a, l, c, m;
+      const e = this.querySelector("input");
+      e && e !== this._inputElement && ((i = this._inputAbortController) == null || i.abort(), (a = this._inputAttributeObserver) == null || a.disconnect(), this._inputElement = e, this._inputAbortController = new AbortController(), this._inputElement.addEventListener("keydown", (F) => this._onInputKeyDown(F), {
+        signal: this._inputAbortController.signal
+      }), this._inputElement.addEventListener(V, () => this._createChipFromInput("autocomplete"), {
+        signal: this._inputAbortController.signal
+      }), (l = this._inputAttributeObserver) == null || l.observe(this._inputElement, {
+        attributes: !0,
+        attributeFilter: ["readonly", "disabled"]
+      })), this._inheritSize(), (c = this._formFieldAttributeObserver) == null || c.disconnect();
+      const t = this.closest("sbb-form-field");
+      t && ((m = this._formFieldAttributeObserver) == null || m.observe(t, {
+        attributes: !0,
+        attributeFilter: ["size"]
+      })), this.toggleAttribute("data-empty", this.value.length === 0), this._reactToInputChanges(), this.updateFormValue();
+    }
+    /**
+     * Listen for keyboard events on the chip elements
+     **/
+    _onChipKeyDown(e) {
+      const t = e.target;
+      if (t.localName === "sbb-chip") {
+        if (q(e)) {
+          const i = this._enabledChipElements(), a = L(e, i.indexOf(t), i.length);
+          i[a].focus();
+          return;
+        }
+        switch (e.key) {
+          case "Backspace":
+          case "Delete":
+            !t.readonly && !t.disabled && (e.preventDefault(), this._deleteChip(t));
+            break;
+        }
+      }
+    }
+    /**
+     * Listen for keyboard events on the input
+     **/
+    _onInputKeyDown(e) {
+      switch (e.key) {
+        case "Backspace":
+        case "ArrowLeft":
+          this._inputElement.value || this._focusChip();
+          break;
+        case "Enter":
+          e.preventDefault();
+          break;
+      }
+      this.separatorKeys.includes(e.key) && (e.preventDefault(), this._createChipFromInput("input"));
+    }
+    /**
+     * If the input is not empty, create a chip with its value
+     */
+    _createChipFromInput(e = "input") {
+      const t = this._inputElement.value.trim();
+      if (!t)
+        return;
+      const i = {
+        origin: e,
+        value: t,
+        label: void 0,
+        setValue: (a) => i.value = a,
+        setLabel: (a) => i.label = a
+      };
+      this._chipInputTokenEnd.emit(i) && (this._createChipElement(i.value, i.label), this._inputElement.value = "", this._emitInputEvents());
+    }
+    _deleteChip(e) {
+      const t = this._enabledChipElements();
+      e.remove(), this._emitInputEvents(), this._focusChip(t.indexOf(e));
+    }
+    /**
+     * Focus an enabled chip. If none are present, focus the input
+     * @param index The index of the enabled chip. If null, focus the last one.
+     */
+    _focusChip(e) {
+      var i;
+      const t = this._enabledChipElements();
+      if (e !== void 0 && t[e]) {
+        t[e].focus();
+        return;
+      }
+      if (t.length > 0) {
+        t[t.length - 1].focus();
+        return;
+      }
+      (i = this._inputElement) == null || i.focus();
+    }
+    _emitInputEvents() {
+      this._input.emit(), this._change.emit();
+    }
+    _createChipElement(e, t) {
+      const i = document.createElement("sbb-chip");
+      i.setAttribute("value", e), i.innerText = t ?? "", this.insertBefore(i, this._inputElement ?? this.querySelector("input"));
+    }
+    _reactToInputChanges() {
+      var e;
+      this.disabled = ((e = this._inputElement) == null ? void 0 : e.disabled) ?? !1, this._proxyStateToChips();
+    }
+    _proxyStateToChips() {
+      this._chipElements().forEach((e) => {
+        var t;
+        e.disabled = this.disabled || this.formDisabled, e.readonly = ((t = this._inputElement) == null ? void 0 : t.hasAttribute("readonly")) ?? !1, e.negative = this.negative;
+      });
+    }
+    _inheritSize() {
+      var e;
+      this.setAttribute("data-size", ((e = this.closest("sbb-form-field")) == null ? void 0 : e.size) ?? (R() ? "s" : "m"));
+    }
+    _updateInputDescription() {
+      this._inputElement && this._inputElement.setAttribute("aria-description", `${G[this._language.current]} ${this.value.length}`);
+    }
+    render() {
+      return O`
+      <div class="sbb-chip-group">
+        <slot @slotchange=${this._setupComponent}></slot>
+      </div>
+    `;
+    }
+  }, h = new WeakMap(), o = u, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(v[Symbol.metadata] ?? null) : void 0;
+    E = [D({ type: Array })], y = [D({ attribute: "separator-keys", type: Array })], _(u, null, E, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (t) => "value" in t, set: (t, i) => {
+      t.value = i;
+    } }, metadata: e }, null, g), _(u, null, y, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (t) => "separatorKeys" in t, get: (t) => t.separatorKeys, set: (t, i) => {
+      t.separatorKeys = i;
+    } }, metadata: e }, C, w), _(null, r = { value: o }, s, { kind: "class", name: o.name, metadata: e }, null, n), p = o = r.value, e && Object.defineProperty(o, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), u.styles = J, u.events = {
+    input: "input",
+    change: "change",
+    chipInputTokenEnd: "chipInputTokenEnd"
+  }, d(o, n), u);
+  return p = o;
+})();
+export {
+  le as SbbChipGroupElement
+};

package/chip/chip-group.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './chip-group/chip-group.js';
+export * from './chip-group/chip-group.component.js';
 //# sourceMappingURL=chip-group.d.ts.map

package/chip/chip-group.d.ts.map

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

package/chip/chip-group.js

@@ -1,4 +1,4 @@
-import { SbbChipGroupElement as p } from "./chip-group/chip-group.js";
+import { SbbChipGroupElement as p } from "./chip-group/chip-group.component.js";
 export {
   p as SbbChipGroupElement
 };

package/chip/chip.d.ts

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

package/chip/chip.d.ts.map

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

package/chip/chip.js

@@ -1,4 +1,4 @@
-import { SbbChipElement as m } from "./chip/chip.js";
+import { SbbChipElement as m } from "./chip/chip.component.js";
 export {
   m as SbbChipElement
 };

package/chip-label/chip-label.component.d.ts

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

package/chip-label/chip-label.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"chip-label.component.d.ts","sourceRoot":"","sources":["../../../src/elements/chip-label/chip-label.component.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,qBAEM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,wBAAwB;IACxB,SACgB,IAAI,EAAE,KAAK,GAAG,IAAI,GAAG,GAAG,CAAS;IAEjD,yBAAyB;IACzB,SACgB,KAAK,EAAE,MAAM,GAAG,UAAU,GAAG,OAAO,GAAG,SAAS,CAAU;cAEvD,MAAM,IAAI,cAAc;CAS5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,gBAAgB,EAAE,mBAAmB,CAAC;KACvC;CACF"}

package/chip-label.d.ts

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './chip-label/chip-label.js';
+export * from './chip-label/chip-label.component.js';
 //# sourceMappingURL=chip-label.d.ts.map

package/chip-label.d.ts.map

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

package/chip-label.js

@@ -1,4 +1,4 @@
-import { SbbChipLabelElement as l } from "./chip-label/chip-label.js";
+import { SbbChipLabelElement as l } from "./chip-label/chip-label.component.js";
 export {
   l as SbbChipLabelElement
 };

package/chip.js

@@ -1,5 +1,5 @@
-import { SbbChipElement as p } from "./chip/chip/chip.js";
-import { SbbChipGroupElement as b } from "./chip/chip-group/chip-group.js";
+import { SbbChipElement as p } from "./chip/chip/chip.component.js";
+import { SbbChipGroupElement as b } from "./chip/chip-group/chip-group.component.js";
 export {
   p as SbbChipElement,
   b as SbbChipGroupElement

package/clock/clock.component.d.ts

@@ -0,0 +1,75 @@
+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
+     */
+    accessor now: SbbTime | null;
+    /** Whether the clock is ticking or not */
+    private _state;
+    /** 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;
+    /** Move the minutes hand every minute. */
+    private _handMovement?;
+    private _resetIntervalId?;
+    /** Callback function for hours hand. */
+    private _moveHoursHandFn;
+    /** Callback function for minutes hand. */
+    private _moveMinutesHandFn;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): Promise<void>;
+    disconnectedCallback(): void;
+    private _handlePageVisibilityChange;
+    private _startOrConfigureClock;
+    /** Starts the clock by defining the hands starting position then starting the animations. */
+    private _startClock;
+    /** Stops the clock by removing all the animations. */
+    private _stopClock;
+    /**
+     * As a fallback measure to prevent de-sync, reset the clock to the system time.
+     */
+    private _resetClock;
+    /** Set the starting position for the three hands on the clock face. */
+    private _setHandsStartingPosition;
+    /** 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 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;
+    /**
+     * Removing animation by overriding with empty string,
+     * then triggering a reflow and re add original animation by removing override.
+     * @private
+     */
+    private _resetSecondsHandAnimation;
+    private _removeEventListeners;
+    private _removeHoursAnimationStyles;
+    private _removeSecondsAnimationStyles;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-clock': SbbClockElement;
+    }
+}
+//# sourceMappingURL=clock.component.d.ts.map

package/clock/clock.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"clock.component.d.ts","sourceRoot":"","sources":["../../../src/elements/clock/clock.component.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAkB,UAAU,EAAE,MAAM,KAAK,CAAC;AAIjD,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,uBAAuB,CAAC;AA8CrD;;GAEG;AACH,qBAEM,eAAgB,SAAQ,UAAU;IACtC,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,SAA4B,GAAG,EAAE,OAAO,GAAG,IAAI,CAAQ;IAEvD,0CAA0C;IAC1C,OAAO,CAAC,MAAM,CAAkC;IAEhD,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,0CAA0C;IAC1C,OAAO,CAAC,aAAa,CAAC,CAAiC;IAEvD,OAAO,CAAC,gBAAgB,CAAC,CAAiC;IAE1D,wCAAwC;IACxC,OAAO,CAAC,gBAAgB,CAAqC;IAE7D,0CAA0C;IAC1C,OAAO,CAAC,kBAAkB,CAAuC;IAEjD,iBAAiB,IAAI,IAAI;cAMtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQnD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;IAS7E,oBAAoB,IAAI,IAAI;IAM5C,OAAO,CAAC,2BAA2B,CAUjC;YAEY,sBAAsB;IAUpC,6FAA6F;YAC/E,WAAW;IAuBzB,sDAAsD;YACxC,UAAU;IAexB;;OAEG;YACW,WAAW;IAQzB,uEAAuE;IACvE,OAAO,CAAC,yBAAyB;IA4CjC,yGAAyG;IACzG,OAAO,CAAC,kBAAkB;IAW1B,sDAAsD;IACtD,OAAO,CAAC,eAAe;IAOvB,6CAA6C;IAC7C,OAAO,CAAC,cAAc;IAYtB,+CAA+C;IAC/C,OAAO,CAAC,gBAAgB;IAaxB,OAAO,CAAC,sBAAsB;IAK9B;;;;OAIG;IACH,OAAO,CAAC,0BAA0B;IAWlC,OAAO,CAAC,qBAAqB;IAO7B,OAAO,CAAC,2BAA2B;IAMnC,OAAO,CAAC,6BAA6B;cAOlB,MAAM,IAAI,cAAc;CA4B5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,WAAW,EAAE,eAAe,CAAC;KAC9B;CACF"}

package/clock.d.ts

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

package/clock.d.ts.map

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

package/clock.js

@@ -1,4 +1,4 @@
-import { SbbClockElement as b } from "./clock/clock.js";
+import { SbbClockElement as b } from "./clock/clock.component.js";
 export {
   b as SbbClockElement
 };

package/container/container/container.component.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.
+ * @slot image - The slot used to slot an `sbb-image` to use as background.
+ */
+export declare class SbbContainerElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Whether the container is expanded. */
+    accessor expanded: boolean;
+    /** Whether the background color is shown on full container width on large screens. */
+    accessor backgroundExpanded: boolean;
+    /** Color of the container, like transparent, white etc. */
+    accessor color: 'transparent' | 'white' | 'milk' | 'midnight' | 'charcoal';
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-container': SbbContainerElement;
+    }
+}
+//# sourceMappingURL=container.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"container.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/container/container.component.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;AAOb;;;;;;GAMG;AACH,qBAGM,mBAAoB,SAAQ,UAAU;IAC1C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,yCAAyC;IACzC,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,sFAAsF;IACtF,SAEgB,kBAAkB,EAAE,OAAO,CAAS;IAEpD,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,aAAa,GACb,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,CAAW;cAEN,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,MAAM,IAAI,cAAc;CAW5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/container/container.d.ts

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

package/container/container.d.ts.map

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

package/container/container.js

@@ -1,4 +1,4 @@
-import { SbbContainerElement as o } from "./container/container.js";
+import { SbbContainerElement as o } from "./container/container.component.js";
 export {
   o as SbbContainerElement
 };

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

@@ -0,0 +1,57 @@
+import { CSSResultGroup, LitElement, PropertyValues, TemplateResult } from 'lit';
+declare const SbbStickyBarElement_base: import('../../core/mixins.js').AbstractConstructor<import('../../core/mixins.js').SbbUpdateSchedulerMixinType> & typeof LitElement;
+/**
+ * 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.
+ * @event {CustomEvent<void>} willStick - Emits when the animation from normal content flow to `position: sticky` starts. Can be canceled.
+ * @event {CustomEvent<void>} didStick - Emits when the animation from normal content flow to `position: sticky` ends.
+ * @event {CustomEvent<void>} willUnstick - Emits when the animation from `position: sticky` to normal content flow starts. Can be canceled.
+ * @event {CustomEvent<void>} didUnstick - Emits when the animation from `position: sticky` to normal content flow ends.
+ * @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 SbbStickyBarElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly willStick: "willStick";
+        readonly didStick: "didStick";
+        readonly willUnstick: "willUnstick";
+        readonly didUnstick: "didUnstick";
+    };
+    /** Color of the container, like transparent, white etc. */
+    accessor color: 'white' | 'milk' | 'midnight' | 'charcoal' | null;
+    /** The state of the component. */
+    private set _state(value);
+    private get _state();
+    private _willStick;
+    private _didStick;
+    private _willUnstick;
+    private _didUnstick;
+    private _intersector?;
+    private _observer;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _isZeroAnimationDuration;
+    private _detectStickyState;
+    /** Animates from normal content flow position to `position: sticky`. */
+    stick(): void;
+    /** Animates `position: sticky` to normal content flow position. */
+    unstick(): void;
+    private _stickyCallback;
+    private _unstickyCallback;
+    private _onAnimationEnd;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-sticky-bar': SbbStickyBarElement;
+    }
+}
+export {};
+//# sourceMappingURL=sticky-bar.component.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"sticky-bar.component.d.ts","sourceRoot":"","sources":["../../../../src/elements/container/sticky-bar/sticky-bar.component.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAYb;;;;;;;;;;;;;;GAcG;AACH,qBAKM,mBAAoB,SAAQ,wBAAmC;IACnE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,gBAAuB,MAAM;;;;;MAKlB;IAEX,2DAA2D;IAC3D,SAA6C,KAAK,EAC9C,OAAO,GACP,MAAM,GACN,UAAU,GACV,UAAU,GACV,IAAI,CAAQ;IAEhB,kCAAkC;IAClC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,OAAO,CAAC,UAAU,CAEf;IACH,OAAO,CAAC,SAAS,CAEd;IACH,OAAO,CAAC,YAAY,CAIlB;IACF,OAAO,CAAC,WAAW,CAIjB;IAEF,OAAO,CAAC,YAAY,CAAC,CAAkB;IACvC,OAAO,CAAC,SAAS,CAKd;IAEa,iBAAiB,IAAI,IAAI;IAgBzB,oBAAoB,IAAI,IAAI;cAMzB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAU9E,OAAO,CAAC,wBAAwB;IAIhC,OAAO,CAAC,kBAAkB;IA+B1B,wEAAwE;IACjE,KAAK,IAAI,IAAI;IAWpB,mEAAmE;IAC5D,OAAO,IAAI,IAAI;IAYtB,OAAO,CAAC,eAAe;IAKvB,OAAO,CAAC,iBAAiB;IAKzB,OAAO,CAAC,eAAe;cAWJ,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

@@ -1,5 +1,5 @@
 /**
  * @entrypoint
  */
-export * from './sticky-bar/sticky-bar.js';
+export * from './sticky-bar/sticky-bar.component.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;;GAEG;AACH,cAAc,4BAA4B,CAAC"}
+{"version":3,"file":"sticky-bar.d.ts","sourceRoot":"","sources":["../../../src/elements/container/sticky-bar.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,cAAc,sCAAsC,CAAC"}

package/container/sticky-bar.js

@@ -1,4 +1,4 @@
-import { SbbStickyBarElement as t } from "./sticky-bar/sticky-bar.js";
+import { SbbStickyBarElement as t } from "./sticky-bar/sticky-bar.component.js";
 export {
   t as SbbStickyBarElement
 };

package/container.js

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

package/core/a11y/arrow-navigation.d.ts

@@ -20,7 +20,7 @@ export declare function isNextArrowKeyPressed(event: KeyboardEvent): boolean;
 export declare function isArrowKeyOrPageKeysPressed(event: KeyboardEvent): boolean;
 /**
  * Gets the index of the element to move to, based on the keyboard input, the current element in the list and the list size.
- * @param event The keyboard event to check.
+ * @param event The keyboard event to check. If null, will count as a 'next' step.
  * @param current The index of the current element in the list.
  * @param size The size of the list.
  * @returns if it is a 'previous' event, returns the index of the previous element,
@@ -28,5 +28,5 @@ export declare function isArrowKeyOrPageKeysPressed(event: KeyboardEvent): boole
  * if it is a 'next' event, returns the index of the next element,
  * or the index of the first one, if the current is the last in the list.
  */
-export declare function getNextElementIndex(event: KeyboardEvent, current: number, size: number): number;
+export declare function getNextElementIndex(event: KeyboardEvent | undefined, current: number, size: number): number;
 //# sourceMappingURL=arrow-navigation.d.ts.map

package/core/a11y/arrow-navigation.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"arrow-navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/arrow-navigation.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE/D;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEvE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEnE;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEzE;AAkBD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CAAC,KAAK,EAAE,aAAa,EAAE,OAAO,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,MAAM,CAS/F"}
+{"version":3,"file":"arrow-navigation.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/a11y/arrow-navigation.ts"],"names":[],"mappings":"AAaA;;;GAGG;AACH,wBAAgB,iBAAiB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAE/D;AAED;;;GAGG;AACH,wBAAgB,yBAAyB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEvE;AAED;;;GAGG;AACH,wBAAgB,qBAAqB,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEnE;AAED;;;GAGG;AACH,wBAAgB,2BAA2B,CAAC,KAAK,EAAE,aAAa,GAAG,OAAO,CAEzE;AAkBD;;;;;;;;;GASG;AACH,wBAAgB,mBAAmB,CACjC,KAAK,EAAE,aAAa,GAAG,SAAS,EAChC,OAAO,EAAE,MAAM,EACf,IAAI,EAAE,MAAM,GACX,MAAM,CASR"}

package/core/a11y/arrow-navigation.js

@@ -22,7 +22,7 @@ function w(e) {
 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;
+  return !e || e.key === i || e.key === "ArrowDown" ? r >= n ? y : o(r, n, 1) : e.key === s || e.key === "ArrowUp" ? r < y ? w(n) : o(r, n, -1) : r;
 }
 export {
   K as getNextElementIndex,

package/core/controllers/id-reference-controller.js

@@ -1,6 +1,6 @@
 import { isServer as d } from "lit";
 const h = /* @__PURE__ */ new WeakMap();
-class u {
+class _ {
   constructor(t, o, i = h) {
     this._host = t, this._idRef = o, this._observers = i, this._rootNode = null, this._host.addController(this);
   }
@@ -52,10 +52,10 @@ class u {
       return null;
     {
       const o = this._host[this._idRef];
-      return typeof o == "string" ? (t = this._rootNode) == null ? void 0 : t.querySelector(`#${o}`) : null;
+      return typeof o == "string" ? (t = this._rootNode) == null ? void 0 : t.getElementById(o) : null;
     }
   }
 }
 export {
-  u as SbbIdReferenceController
+  _ as SbbIdReferenceController
 };

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

@@ -1 +1 @@
-{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/platform.ts"],"names":[],"mappings":"AAmBA,qDAAqD;AACrD,eAAO,MAAM,MAAM,SAAmD,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,SAAS,SAA2D,CAAC;AAGlF,qDAAqD;AACrD,eAAO,MAAM,OAAO,SAKR,CAAC;AAIb,sDAAsD;AACtD,eAAO,MAAM,QAAQ,SACuE,CAAC;AAE7F,iDAAiD;AACjD,eAAO,MAAM,KAAK,SACoE,CAAC;AAEvF;;;GAGG;AACH,eAAO,MAAM,OAAO,SAAoC,CAAC;AAMzD,8CAA8C;AAC9C,eAAO,MAAM,SAAS,SAAgE,CAAC;AAEvF,+CAA+C;AAE/C,eAAO,MAAM,SAAS,SAAkE,CAAC;AAKzF,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,SAA+D,CAAC;AAErF;;GAEG;AACH,eAAO,MAAM,UAAU,SAAU,CAAC;AAElC,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,QAAO,OAAmD,CAAC"}
+{"version":3,"file":"platform.d.ts","sourceRoot":"","sources":["../../../../src/elements/core/dom/platform.ts"],"names":[],"mappings":"AAmBA,qDAAqD;AACrD,eAAO,MAAM,MAAM,SAAmD,CAAC;AAEvE,iEAAiE;AACjE,eAAO,MAAM,SAAS,SAA2D,CAAC;AAGlF,qDAAqD;AACrD,eAAO,MAAM,OAAO,SAKR,CAAC;AAIb,sDAAsD;AACtD,eAAO,MAAM,QAAQ,SACuE,CAAC;AAE7F,iDAAiD;AACjD,eAAO,MAAM,KAAK,SACoE,CAAC;AAEvF;;;GAGG;AACH,eAAO,MAAM,OAAO,SAAiD,CAAC;AAMtE,8CAA8C;AAC9C,eAAO,MAAM,SAAS,SAAgE,CAAC;AAEvF,+CAA+C;AAE/C,eAAO,MAAM,SAAS,SAAkE,CAAC;AAKzF,6CAA6C;AAC7C,eAAO,MAAM,QAAQ,SAA+D,CAAC;AAErF;;GAEG;AACH,eAAO,MAAM,UAAU,SAAU,CAAC;AAElC,0EAA0E;AAC1E,eAAO,MAAM,QAAQ,QAAO,OAAmD,CAAC"}

package/core/dom/platform.js

@@ -5,7 +5,7 @@ try {
 } catch {
   e = !1;
 }
-const s = !t && /(edge)/i.test(navigator.userAgent), i = !t && /(msie|trident)/i.test(navigator.userAgent), n = !t && !!(window.chrome || e) && typeof CSS < "u" && !s && !i, r = !t && /AppleWebKit/i.test(navigator.userAgent) && !n && !s && !i, a = !t && /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window), g = /(Mac)/i.test(navigator.platform), d = !t && /(firefox|minefield)/i.test(navigator.userAgent), c = !t && /android/i.test(navigator.userAgent) && !i, f = !t && /safari/i.test(navigator.userAgent) && r, l = n, u = () => !!globalThis.next;
+const s = !t && /(edge)/i.test(navigator.userAgent), i = !t && /(msie|trident)/i.test(navigator.userAgent), n = !t && !!(window.chrome || e) && typeof CSS < "u" && !s && !i, r = !t && /AppleWebKit/i.test(navigator.userAgent) && !n && !s && !i, a = !t && /iPad|iPhone|iPod/.test(navigator.userAgent) && !("MSStream" in window), g = !t && /(Mac)/i.test(navigator.platform), d = !t && /(firefox|minefield)/i.test(navigator.userAgent), c = !t && /android/i.test(navigator.userAgent) && !i, f = !t && /safari/i.test(navigator.userAgent) && r, l = n, u = () => !!globalThis.next;
 export {
   c as isAndroid,
   n as isBlink,