@sbb-esta/lyne-elements-dev 0.0.0 → 4.5.1-dev.1771849268

package/calendar.js

@@ -0,0 +1,4 @@
+import { SbbCalendarElement as a } from "./calendar/calendar.component.js";
+export {
+  a as SbbCalendarElement
+};

package/card/card/card.component.js

@@ -0,0 +1,48 @@
+var v = (a) => {
+  throw TypeError(a);
+};
+var g = (a, r, s) => r.has(a) || v("Cannot " + s);
+var h = (a, r, s) => (g(a, r, "read from private field"), s ? s.call(a) : r.get(a)), x = (a, r, s) => r.has(a) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(a) : r.set(a, s), u = (a, r, s, b) => (g(a, r, "write to private field"), b ? b.call(a, s) : r.set(a, s), s);
+import { __esDecorate as m, __runInitializers as d } from "tslib";
+import { css as f, LitElement as w, html as _ } from "lit";
+import { customElement as y, property as S } from "lit/decorators.js";
+import { SbbElementInternalsMixin as z } from "../../core/mixins.js";
+import { boxSizingStyles as E } from "../../core/styles.js";
+const I = f`:host{--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-title-text-color-normal-override: var(--sbb-card-color);--sbb-card-animation-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-1x) );display:block;position:relative;padding-inline:var(--sbb-card-padding-inline);padding-block:var(--sbb-card-padding-block);border-radius:var(--sbb-card-border-radius);background-color:var(--sbb-card-background-color);box-shadow:none;transition:box-shadow var(--sbb-card-animation-duration) var(--sbb-card-animation-easing);color:var(--sbb-card-color)}:host:after{content:"";position:absolute;inset:0;background-color:transparent;border:var(--sbb-card-border-width) var(--sbb-card-border-style) var(--sbb-card-border-color);border-radius:var(--sbb-card-border-radius);pointer-events:none}:host{--sbb-card-padding-block: var(--sbb-card-padding-block-default);--sbb-card-with-badge-padding-block: var(--sbb-card-with-badge-padding-block-default);--sbb-card-padding-inline: var(--sbb-card-padding-inline-default)}:host(:where([color=white])){--sbb-card-background-color: var(--sbb-background-color-1);--sbb-card-border-color: transparent}:host(:where([color=milk])){--sbb-card-background-color: var(--sbb-background-color-3);--sbb-card-border-color: transparent}:host(:where([color=transparent-bordered])){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-border-color-4-inverted);--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-focus-outline-color: inherit}:host(:where([color=transparent-bordered-dashed])){--sbb-card-background-color: transparent;--sbb-card-border-color: var(--sbb-color-cement);--sbb-card-border-color: light-dark(var(--sbb-color-cement), var(--sbb-color-granite));--sbb-card-border-width: var(--sbb-border-width-1x);--sbb-card-border-style: dashed;--sbb-focus-outline-color: inherit}:host(:where(:not([color]))){--sbb-card-background-color: var(--sbb-background-color-1);--sbb-card-border-color: transparent}:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color: var(--sbb-border-color-3);--sbb-card-border-width: var(--sbb-border-width-2x);--sbb-card-border-style: solid}@media(forced-colors:active){:host(:is(:state(has-active-action),[state--has-active-action])){--sbb-card-border-color: Highlight}}:host(:is(:state(has-action),[state--has-action])){--sbb-card-pointer-events: none}@media(any-hover:hover){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-hover-shift: -.125rem;box-shadow:var(--sbb-box-shadow-level-9-hard)}}@media(any-hover:hover)and (forced-colors:active){:host(:is(:state(has-action),[state--has-action]):not(:is(:state(has-active-action),[state--has-active-action])):hover){--sbb-card-border-color: Highlight}}@media(forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-button),[state--action-role-button]))){--sbb-card-color: ButtonText}}@media(forced-colors:active){:host(:where(:is(:state(has-action),[state--has-action]):is(:state(action-role-link),[state--action-role-link]))){--sbb-card-color: LinkText;--sbb-card-border-color: CanvasText}}:host(.sbb-card-spacing-3x-xxs){--sbb-card-padding-block: var(--sbb-spacing-fixed-3x);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-3x);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-xxs){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxxs-s){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-4x-xxs){--sbb-card-padding-block: var(--sbb-spacing-fixed-4x);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-fixed-4x);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-xxs){--sbb-card-padding-block: var(--sbb-spacing-responsive-xxs);--sbb-card-with-badge-padding-block: var(--sbb-spacing-fixed-6x) var(--sbb-spacing-responsive-xxs);--sbb-card-padding-inline: var(--sbb-spacing-responsive-xxs)}:host(.sbb-card-spacing-s){--sbb-card-padding-block: var(--sbb-spacing-responsive-s);--sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-s);--sbb-card-padding-inline: var(--sbb-spacing-responsive-s)}:host(.sbb-card-spacing-l){--sbb-card-padding-block: var(--sbb-spacing-responsive-l);--sbb-card-with-badge-padding-block: var(--sbb-spacing-responsive-l);--sbb-card-padding-inline: var(--sbb-spacing-responsive-l)}:host(:is(:state(slotted-badge),[state--slotted-badge])){--sbb-card-padding-block: var(--sbb-card-with-badge-padding-block);--sbb-card-badge-display: block}.sbb-card__wrapper{display:block;height:100%;pointer-events:var(--sbb-card-pointer-events, auto);translate:0 var(--sbb-card-hover-shift, 0);transition:translate var(--sbb-card-animation-duration) var(--sbb-card-animation-easing)}.sbb-card__badge-wrapper{display:var(--sbb-card-badge-display, none);overflow:hidden;position:absolute;inset:0;inset-block-end:unset;border-start-start-radius:var(--sbb-card-border-radius);border-start-end-radius:var(--sbb-card-border-radius);pointer-events:var(--sbb-card-pointer-events, auto)}::slotted(sbb-title){margin-block-start:0}`;
+let B = (() => {
+  var t, o;
+  let a = [y("sbb-card")], r, s = [], b, c = z(w), n, l = [], p = [];
+  return o = class extends c {
+    constructor() {
+      super(...arguments);
+      x(this, t, d(this, l, "white"));
+      d(this, p);
+    }
+    /** Option to set the component's background color. */
+    get color() {
+      return h(this, t);
+    }
+    set color(e) {
+      u(this, t, e);
+    }
+    render() {
+      return _`
+      <slot name="action"></slot>
+      <span class="sbb-card__wrapper">
+        <slot></slot>
+      </span>
+      <span class="sbb-card__badge-wrapper">
+        <slot name="badge"></slot>
+      </span>
+    `;
+    }
+  }, t = new WeakMap(), b = o, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    n = [S({ reflect: !0 })], m(o, null, n, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, k) => {
+      i.color = k;
+    } }, metadata: e }, l, p), m(null, r = { value: b }, a, { kind: "class", name: b.name, metadata: e }, null, s), b = r.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.styles = [E, I], d(b, s), b;
+})();
+export {
+  B as SbbCardElement
+};

package/card/card-badge/card-badge.component.js

@@ -0,0 +1,48 @@
+var u = (r) => {
+  throw TypeError(r);
+};
+var m = (r, a, e) => a.has(r) || u("Cannot " + e);
+var p = (r, a, e) => (m(r, a, "read from private field"), e ? e.call(r) : a.get(r)), v = (r, a, e) => a.has(r) ? u("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(r) : a.set(r, e), h = (r, a, e, t) => (m(r, a, "write to private field"), t ? t.call(r, e) : a.set(r, e), e);
+import { __esDecorate as f, __runInitializers as d } from "tslib";
+import { css as y, LitElement as _, html as x } from "lit";
+import { customElement as w, property as S } from "lit/decorators.js";
+import { SbbElementInternalsMixin as z } from "../../core/mixins.js";
+import { boxSizingStyles as E } from "../../core/styles.js";
+const C = y`:host{display:flex;position:relative;height:fit-content;width:fit-content;margin-inline-start:auto}:host:after{content:"";display:var(--sbb-card-badge-border-display, none);position:absolute;inset:0;border:var(--sbb-border-width-1x) solid CanvasText}:host{inset-block-start:0;inset-inline-end:0;padding-inline:var(--sbb-card-badge-padding-inline)}:host([color=white]){--sbb-card-badge-color: var(--sbb-color-3);--sbb-card-badge-background-color: var(--sbb-background-color-1);--sbb-card-badge-border-color: var(--sbb-color-aluminium);--sbb-card-badge-border-color: light-dark( var(--sbb-color-aluminium), var(--sbb-color-anthracite) )}:host(:dir(rtl)){--sbb-card-badge-skew: skew(-16deg, 0deg)}.sbb-card-badge-content{font-weight:700;font-size:var(--sbb-text-font-size-xxs);letter-spacing:var(--sbb-typo-letter-spacing-text);position:relative;display:flex;align-items:center;gap:var(--sbb-card-badge-gap);color:var(--sbb-card-badge-color)}.sbb-card-badge-background{display:block;position:absolute;inset:0;background-color:var(--sbb-card-badge-background-color);border-end-start-radius:var(--sbb-card-badge-border-radius);margin-inline-end:calc(var(--sbb-spacing-fixed-3x) * -1);transform:var(--sbb-card-badge-skew)}.sbb-card-badge-background:before{content:"";display:var(--sbb-card-badge-inline-border-display, block);position:absolute;inset:0;border-block-end:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-inline-start:var(--sbb-card-badge-border-width) solid var(--sbb-card-badge-border-color);border-end-start-radius:var(--sbb-card-badge-border-radius)}`;
+let M = (() => {
+  var b, s;
+  let r = [w("sbb-card-badge")], a, e = [], t, l = z(_), c, n = [], g = [];
+  return s = class extends l {
+    constructor() {
+      super(...arguments);
+      v(this, b, d(this, n, "charcoal"));
+      d(this, g);
+    }
+    /** Color of the card badge. */
+    get color() {
+      return p(this, b);
+    }
+    set color(o) {
+      h(this, b, o);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.slot ||= "badge";
+    }
+    render() {
+      return x`
+      <span class="sbb-card-badge-background" aria-hidden="true"></span>
+      <span class="sbb-card-badge-content">
+        <slot></slot>
+      </span>
+    `;
+    }
+  }, b = new WeakMap(), t = s, (() => {
+    const o = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    c = [S({ reflect: !0 })], f(s, null, c, { kind: "accessor", name: "color", static: !1, private: !1, access: { has: (i) => "color" in i, get: (i) => i.color, set: (i, k) => {
+      i.color = k;
+    } }, metadata: o }, n, g), f(null, a = { value: t }, r, { kind: "class", name: t.name, metadata: o }, null, e), t = a.value, o && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: o });
+  })(), s.role = "text", s.styles = [E, C], d(t, e), t;
+})();
+export {
+  M as SbbCardBadgeElement
+};

package/card/card-badge.js

@@ -0,0 +1,4 @@
+import { SbbCardBadgeElement as a } from "./card-badge/card-badge.component.js";
+export {
+  a as SbbCardBadgeElement
+};

package/card/card-button/card-button.component.js

@@ -0,0 +1,19 @@
+import { __esDecorate as n, __runInitializers as m } from "tslib";
+import { customElement as i } from "lit/decorators.js";
+import { SbbButtonBaseElement as c } from "../../core/base-elements.js";
+import { SbbCardActionCommonElementMixin as u } from "../common.js";
+let f = (() => {
+  var e;
+  let s = [i("sbb-card-button")], r, l = [], t, o = u(c);
+  return e = class extends o {
+    constructor() {
+      super(...arguments), this.actionRole = "button";
+    }
+  }, t = e, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
+    n(null, r = { value: t }, s, { kind: "class", name: t.name, metadata: a }, null, l), t = r.value, a && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), m(t, l);
+  })(), t;
+})();
+export {
+  f as SbbCardButtonElement
+};

package/card/card-button.js

@@ -0,0 +1,4 @@
+import { SbbCardButtonElement as o } from "./card-button/card-button.component.js";
+export {
+  o as SbbCardButtonElement
+};

package/card/card-link/card-link.component.js

@@ -0,0 +1,19 @@
+import { __esDecorate as n, __runInitializers as o } from "tslib";
+import { customElement as m } from "lit/decorators.js";
+import { SbbLinkBaseElement as c } from "../../core/base-elements.js";
+import { SbbCardActionCommonElementMixin as u } from "../common.js";
+let f = (() => {
+  var t;
+  let i = [m("sbb-card-link")], l, r = [], e, s = u(c);
+  return t = class extends s {
+    constructor() {
+      super(...arguments), this.actionRole = "link";
+    }
+  }, e = t, (() => {
+    const a = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    n(null, l = { value: e }, i, { kind: "class", name: e.name, metadata: a }, null, r), e = l.value, a && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: a }), o(e, r);
+  })(), e;
+})();
+export {
+  f as SbbCardLinkElement
+};

package/card/card-link.js

@@ -0,0 +1,4 @@
+import { SbbCardLinkElement as b } from "./card-link/card-link.component.js";
+export {
+  b as SbbCardLinkElement
+};

package/card/card.js

@@ -0,0 +1,4 @@
+import { SbbCardElement as b } from "./card/card.component.js";
+export {
+  b as SbbCardElement
+};

package/card/common/card-action-common.js

@@ -0,0 +1,63 @@
+import { __runInitializers as n, __esDecorate as b } from "tslib";
+import { MutationController as d } from "@lit-labs/observers/mutation-controller.js";
+import { property as u } from "lit/decorators.js";
+import { html as h } from "lit/static-html.js";
+import { IS_FOCUSABLE_QUERY as m } from "../../core/a11y.js";
+import { ɵstateController as o } from "../../core/mixins.js";
+import { boxSizingStyles as f } from "../../core/styles.js";
+import { css as p } from "lit";
+const v = p`:host{display:block;outline:none!important;position:absolute;inset:0}:is(.sbb-card-button,.sbb-card-link){display:block;position:absolute;inset:0;border-radius:var(--sbb-card-border-radius);cursor:var(--sbb-cursor-pointer);outline:none}:host(:focus-visible) :is(.sbb-card-button,.sbb-card-link),:is(.sbb-card-button,.sbb-card-link):focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}.sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`, E = (c) => (() => {
+  var e;
+  let s = c, a = [], r;
+  return e = class extends s {
+    constructor() {
+      super(...arguments), this._active = (n(this, a), !1), this._card = null, this._cardMutationObserver = new d(this, {
+        target: null,
+        config: {
+          childList: !0,
+          subtree: !0,
+          attributes: !0,
+          attributeFilter: ["href", "tabindex", "disabled", "inert"]
+        },
+        callback: () => this._checkForSlottedActions()
+      });
+    }
+    /** Whether the card is active. */
+    set active(t) {
+      this._active = t, this._onActiveChange();
+    }
+    get active() {
+      return this._active;
+    }
+    _onActiveChange() {
+      this._card && o(this._card).toggle("has-active-action", this.active);
+    }
+    _checkForSlottedActions() {
+      Array.from(this._card?.querySelectorAll?.(m) ?? []).filter((t) => t.localName !== "sbb-card-link" && t.localName !== "sbb-card-button" && !t.classList.contains("sbb-action")).forEach((t) => t.classList.toggle("sbb-action", !0));
+    }
+    connectedCallback() {
+      if (super.connectedCallback(), this._card = this.closest?.("sbb-card"), this._card) {
+        this.slot ||= "action";
+        const t = o(this._card);
+        t.add("has-action"), t.toggle("has-active-action", this.active), t.add(`action-role-${this.actionRole}`), t.delete(`action-role-${this.actionRole === "button" ? "link" : "button"}`), this._checkForSlottedActions(), this._cardMutationObserver.observe(this._card);
+      }
+    }
+    disconnectedCallback() {
+      if (super.disconnectedCallback(), this._card) {
+        const t = o(this._card);
+        t.delete("has-action"), t.delete("has-active-action"), t.delete("action-role-button"), t.delete("action-role-link"), this._card.querySelectorAll(".sbb-action").forEach((i) => i.classList.remove("sbb-action")), this._card = null;
+      }
+    }
+    renderTemplate() {
+      return h`<span class="sbb-screen-reader-only"><slot></slot></span>`;
+    }
+  }, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(s[Symbol.metadata] ?? null) : void 0;
+    r = [u({ reflect: !0, type: Boolean })], b(e, null, r, { kind: "setter", name: "active", static: !1, private: !1, access: { has: (i) => "active" in i, set: (i, l) => {
+      i.active = l;
+    } }, metadata: t }, null, a), t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), e.styles = [f, v], e;
+})();
+export {
+  E as SbbCardActionCommonElementMixin
+};

package/card/common.js

@@ -0,0 +1,4 @@
+import { SbbCardActionCommonElementMixin as n } from "./common/card-action-common.js";
+export {
+  n as SbbCardActionCommonElementMixin
+};

package/card.js

@@ -0,0 +1,12 @@
+import { SbbCardElement as o } from "./card/card/card.component.js";
+import { SbbCardBadgeElement as m } from "./card/card-badge/card-badge.component.js";
+import { SbbCardButtonElement as n } from "./card/card-button/card-button.component.js";
+import { SbbCardLinkElement as d } from "./card/card-link/card-link.component.js";
+import { SbbCardActionCommonElementMixin as C } from "./card/common/card-action-common.js";
+export {
+  C as SbbCardActionCommonElementMixin,
+  m as SbbCardBadgeElement,
+  n as SbbCardButtonElement,
+  o as SbbCardElement,
+  d as SbbCardLinkElement
+};

package/carousel/carousel/carousel.component.js

@@ -0,0 +1,88 @@
+var m = (t) => {
+  throw TypeError(t);
+};
+var _ = (t, a, s) => a.has(t) || m("Cannot " + s);
+var f = (t, a, s) => (_(t, a, "read from private field"), s ? s.call(t) : a.get(t)), y = (t, a, s) => a.has(t) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), d = (t, a, s, r) => (_(t, a, "write to private field"), r ? r.call(t, s) : a.set(t, s), s);
+import { __esDecorate as x, __runInitializers as b } from "tslib";
+import { css as w, LitElement as v, html as P } from "lit";
+import { customElement as S, property as C } from "lit/decorators.js";
+import { SbbLanguageController as I } from "../../core/controllers/language-controller.js";
+import { forceType as L } from "../../core/decorators.js";
+import { i18nNextSlide as k, i18nPreviousSlide as q, i18nSlide as A, i18nCarouselArrowsNavigationHint as E } from "../../core/i18n/i18n.js";
+import { SbbElementInternalsMixin as B } from "../../core/mixins.js";
+import { boxSizingStyles as z } from "../../core/styles.js";
+import "../../screen-reader-only.js";
+const N = w`:host{display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-carousel-box-shadow);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-carousel-paginator-padding)}`;
+let G = (() => {
+  var n, o;
+  let t = [S("sbb-carousel")], a, s = [], r, h = B(v), u, g = [], p = [];
+  return o = class extends h {
+    constructor() {
+      super();
+      y(this, n);
+      d(this, n, b(this, g, !1)), this._paginator = (b(this, p), null), this._abortController = null, this._language = new I(this), this._requestedPageIndexByPaginator = -1, this.addEventListener?.("show", (e) => {
+        this._requestedPageIndexByPaginator !== -1 && this._requestedPageIndexByPaginator !== e.detail.index || (this._paginator && e.detail.index !== this._paginator.pageIndex && (this._paginator.pageIndex = e.detail.index), this._requestedPageIndexByPaginator = -1);
+      });
+    }
+    /**
+     * Used to display a box-shadow around the component.
+     */
+    get shadow() {
+      return f(this, n);
+    }
+    set shadow(e) {
+      d(this, n, e);
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.internals.role = "region", this.internals.ariaLabel = "carousel", this._setupPaginator();
+    }
+    firstUpdated(e) {
+      super.firstUpdated(e), this.internals.ariaDescribedByElements = [
+        this.shadowRoot.querySelector("#sbb-carousel-arrows-navigation-hint")
+      ];
+    }
+    disconnectedCallback() {
+      super.disconnectedCallback(), this._abortController?.abort();
+    }
+    _handleSlotchange() {
+      const e = Array.from(this.children).find((c) => c.localName === "sbb-compact-paginator"), i = Array.from(this.children).find((c) => c.localName === "sbb-carousel-list");
+      if (!e || !i)
+        return;
+      const l = i.querySelectorAll("sbb-carousel-item");
+      l && l.length > 0 && (e.length = l.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= k[this._language.current], e.accessibilityPreviousPageLabel ||= q[this._language.current], e.accessibilityPageLabel ||= A[this._language.current], e !== this._paginator && (this._paginator = e, this._setupPaginator());
+    }
+    _setupPaginator() {
+      this._abortController?.abort(), this._paginator && (this._abortController = new AbortController(), this._paginator.addEventListener("click", () => this._scrollAtPaginatorChange(), {
+        signal: this._abortController.signal
+      }));
+    }
+    _scrollAtPaginatorChange() {
+      if (!this._paginator)
+        return;
+      this._requestedPageIndexByPaginator = this._paginator.pageIndex;
+      const e = this.querySelector("sbb-carousel-list");
+      if (e) {
+        const l = e.querySelectorAll("sbb-carousel-item")[this._paginator.pageIndex].offsetLeft - this.offsetLeft;
+        (e.clientWidth <= 100 || Math.abs(e.scrollLeft - l) > 50) && e.scrollTo({ left: l });
+      }
+    }
+    render() {
+      return P`
+      <div class="sbb-carousel">
+        <sbb-screen-reader-only id="sbb-carousel-arrows-navigation-hint"
+          >${E[this._language.current]}</sbb-screen-reader-only
+        >
+        <slot @slotchange=${this._handleSlotchange}></slot>
+      </div>
+    `;
+    }
+  }, n = new WeakMap(), r = o, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    u = [L(), C({ reflect: !0, type: Boolean })], x(o, null, u, { kind: "accessor", name: "shadow", static: !1, private: !1, access: { has: (i) => "shadow" in i, get: (i) => i.shadow, set: (i, l) => {
+      i.shadow = l;
+    } }, metadata: e }, g, p), x(null, a = { value: r }, t, { kind: "class", name: r.name, metadata: e }, null, s), r = a.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.styles = [z, N], b(r, s), r;
+})();
+export {
+  G as SbbCarouselElement
+};

package/carousel/carousel-item/carousel-item.component.js

@@ -0,0 +1,26 @@
+import { __esDecorate as i, __runInitializers as n } from "tslib";
+import { css as c, LitElement as m, html as u } from "lit";
+import { customElement as b } from "lit/decorators.js";
+import { SbbElementInternalsMixin as d } from "../../core/mixins.js";
+const p = c`:host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb-image){border-radius:unset}`;
+let S = (() => {
+  var e;
+  let o = [b("sbb-carousel-item")], l, a = [], t, r = d(m);
+  return e = class extends r {
+    connectedCallback() {
+      super.connectedCallback(), this.internals.role = "group", this.internals.ariaRoleDescription = "slide";
+    }
+    render() {
+      return u`<slot></slot>`;
+    }
+  }, t = e, (() => {
+    const s = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
+    i(null, l = { value: t }, o, { kind: "class", name: t.name, metadata: s }, null, a), t = l.value, s && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: s });
+  })(), e.styles = p, e.events = {
+    beforeshow: "beforeshow",
+    show: "show"
+  }, n(t, a), t;
+})();
+export {
+  S as SbbCarouselItemElement
+};

package/carousel/carousel-item.js

@@ -0,0 +1,4 @@
+import { SbbCarouselItemElement as o } from "./carousel-item/carousel-item.component.js";
+export {
+  o as SbbCarouselItemElement
+};

package/carousel/carousel-list/carousel-list.component.js

@@ -0,0 +1,98 @@
+import { __esDecorate as b, __runInitializers as d } from "tslib";
+import { IntersectionController as c } from "@lit-labs/observers/intersection-controller.js";
+import { ResizeController as m } from "@lit-labs/observers/resize-controller.js";
+import { css as f, LitElement as _, html as v } from "lit";
+import { customElement as g } from "lit/decorators.js";
+import { isArrowKeyPressed as I } from "../../core/a11y.js";
+import { SbbLanguageController as p } from "../../core/controllers.js";
+import { i18nCarouselItemAriaLabel as w } from "../../core/i18n.js";
+import { SbbElementInternalsMixin as y } from "../../core/mixins.js";
+const x = f`:host{--sbb-carousel-list-border-radius: var(--sbb-border-radius-4x);display:flex;height:var(--sbb-carousel-list-height);width:var(--sbb-carousel-list-width, 0);overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth;scrollbar-width:none;outline:none;border-radius:var(--sbb-carousel-inherit-border-radius)}:host(:focus-visible):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);content:"";position:absolute;height:inherit;width:inherit;border-start-start-radius:var(--sbb-carousel-list-border-radius);border-start-end-radius:var(--sbb-carousel-list-border-radius);border-end-start-radius:var(--sbb-carousel-inherit-border-radius);border-end-end-radius:var(--sbb-carousel-inherit-border-radius)}`;
+let H = (() => {
+  var i;
+  let u = [g("sbb-carousel-list")], n, a = [], s, l = y(_);
+  return i = class extends l {
+    constructor() {
+      super(), this._currentIndex = 0, this._language = new p(this), this._observedCarouselItems = [], this._beforeShowObserver = new c(this, {
+        target: null,
+        callback: (e) => {
+          e.filter((r) => r.isIntersecting && r.target !== this).forEach((r) => {
+            const o = r.target;
+            o.dispatchEvent(new CustomEvent("beforeshow", {
+              detail: { index: this._carouselItems().findIndex((h) => h === o) },
+              bubbles: !0,
+              composed: !0
+            }));
+          });
+        },
+        config: { threshold: 0.01, root: this, rootMargin: "100% 0% 100% 0%" }
+      }), this._showObserver = new c(this, {
+        target: null,
+        callback: (e) => {
+          for (const t of e) {
+            if (t.target === this)
+              continue;
+            const r = t.target;
+            t.isIntersecting ? (r.ariaHidden = null, this._currentIndex = this._carouselItems().findIndex((o) => o === r), r.dispatchEvent(new CustomEvent("show", {
+              detail: { index: this._currentIndex },
+              bubbles: !0,
+              composed: !0
+            }))) : r.ariaHidden = "true";
+          }
+        },
+        config: { threshold: 0.99, root: this, rootMargin: "100% 0% 100% 0%" }
+      }), this._resizeObserverController = new m(this, {
+        skipInitial: !0,
+        callback: () => this._readDimensions()
+      }), this.addEventListener?.("keydown", (e) => this._onKeyDown(e));
+    }
+    /** Gets the slotted items. */
+    _carouselItems() {
+      return Array.from(this.querySelectorAll?.("sbb-carousel-item") ?? []);
+    }
+    _handleSlotchange() {
+      this._observedCarouselItems.forEach((t) => {
+        this._beforeShowObserver.unobserve(t), this._showObserver.unobserve(t);
+      });
+      const e = this._carouselItems();
+      e.forEach((t, r) => {
+        t.ariaLabel ||= w(r + 1, e.length)[this._language.current], t.ariaHidden = r === this._currentIndex ? null : "true";
+      }), this._readDimensions();
+    }
+    /**
+     * Reads the dimensions of the first carousel item and sets the CSS properties accordingly.
+     * Should set the dimensions only once, when the first item becomes visible and if the value is non-zero.
+     */
+    _readDimensions() {
+      const e = this._carouselItems();
+      if (e.length === 0)
+        return;
+      const t = e[0];
+      t.clientHeight > 0 && this.style.setProperty("--sbb-carousel-list-height", `${t.clientHeight}px`), t.clientWidth > 0 && (this.style.setProperty("--sbb-carousel-list-width", `${t.clientWidth}px`), e.forEach((r) => {
+        this._beforeShowObserver.observe(r), this._showObserver.observe(r);
+      }), this._observedCarouselItems = e, this._resizeObserverController.unobserve(this));
+    }
+    _onKeyDown(e) {
+      if (!I(e))
+        return;
+      e.preventDefault();
+      let t = this._currentIndex;
+      const r = e.key === "ArrowUp" || e.key === "ArrowLeft", o = e.key === "ArrowDown" || e.key === "ArrowRight";
+      r ? t = Math.max(0, this._currentIndex - 1) : o && (t = Math.min(this._carouselItems().length - 1, this._currentIndex + 1)), t !== this._currentIndex && (this._currentIndex = t, this.scrollTo({
+        left: this._carouselItems()[this._currentIndex].offsetLeft - this.offsetLeft
+      }));
+    }
+    connectedCallback() {
+      super.connectedCallback(), this.internals.ariaLive = "polite", this.internals.ariaAtomic = "true";
+    }
+    render() {
+      return v`<slot @slotchange=${this._handleSlotchange}></slot>`;
+    }
+  }, s = i, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(l[Symbol.metadata] ?? null) : void 0;
+    b(null, n = { value: s }, u, { kind: "class", name: s.name, metadata: e }, null, a), s = n.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), i.styles = x, d(s, a), s;
+})();
+export {
+  H as SbbCarouselListElement
+};

package/carousel/carousel-list.js

@@ -0,0 +1,4 @@
+import { SbbCarouselListElement as r } from "./carousel-list/carousel-list.component.js";
+export {
+  r as SbbCarouselListElement
+};

package/carousel/carousel.js

@@ -0,0 +1,4 @@
+import { SbbCarouselElement as r } from "./carousel/carousel.component.js";
+export {
+  r as SbbCarouselElement
+};

package/carousel.js

@@ -0,0 +1,8 @@
+import { SbbCarouselElement as r } from "./carousel/carousel/carousel.component.js";
+import { SbbCarouselItemElement as m } from "./carousel/carousel-item/carousel-item.component.js";
+import { SbbCarouselListElement as l } from "./carousel/carousel-list/carousel-list.component.js";
+export {
+  r as SbbCarouselElement,
+  m as SbbCarouselItemElement,
+  l as SbbCarouselListElement
+};

package/checkbox/checkbox/checkbox.component.js

@@ -0,0 +1,90 @@
+var I = (t) => {
+  throw TypeError(t);
+};
+var j = (t, s, a) => s.has(t) || I("Cannot " + a);
+var h = (t, s, a) => (j(t, s, "read from private field"), a ? a.call(t) : s.get(t)), u = (t, s, a) => s.has(t) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, a), d = (t, s, a, l) => (j(t, s, "write to private field"), l ? l.call(t, a) : s.set(t, a), a);
+import { __esDecorate as f, __runInitializers as n } from "tslib";
+import { css as E, LitElement as $, html as C } from "lit";
+import { customElement as D, property as p } from "lit/decorators.js";
+import { getOverride as O } from "../../core/decorators.js";
+import { isLean as L } from "../../core/dom.js";
+import { boxSizingStyles as M } from "../../core/styles.js";
+import { SbbIconNameMixin as N } from "../../icon.js";
+import { SbbCheckboxCommonElementMixin as T, checkboxCommonStyle as q } from "../common.js";
+import "../../visual-checkbox.js";
+const A = E`:host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-checkbox__label{display:none}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}`;
+let X = (() => {
+  var r, b, m, c;
+  let t = [D("sbb-checkbox")], s, a = [], l, _ = N(T($)), x, v = [], k = [], g, z = [], y = [], S, P = [], w = [];
+  return c = class extends _ {
+    constructor() {
+      super(...arguments);
+      u(this, r, n(this, v, null));
+      u(this, b, (n(this, k), n(this, z, L() ? "xs" : "m")));
+      u(this, m, (n(this, y), n(this, P, "end")));
+      n(this, w);
+    }
+    /** Value of the form element. */
+    get value() {
+      return h(this, r);
+    }
+    set value(i) {
+      d(this, r, i);
+    }
+    /**
+     * Size variant, either xs, s or m.
+     * @default 'm' / 'xs' (lean)
+     */
+    get size() {
+      return h(this, b);
+    }
+    set size(i) {
+      d(this, b, i);
+    }
+    /** The label position relative to the labelIcon. Defaults to end */
+    get iconPlacement() {
+      return h(this, m);
+    }
+    set iconPlacement(i) {
+      d(this, m, i);
+    }
+    render() {
+      return C`
+      <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}
+                .size=${this.size}
+              ></sbb-visual-checkbox>
+            </span>
+            <span class="sbb-checkbox__label">
+              <slot></slot>
+              ${this.renderIconSlot()}
+            </span>
+          </span>
+        </span>
+      </span>
+    `;
+    }
+  }, r = new WeakMap(), b = new WeakMap(), m = new WeakMap(), l = c, (() => {
+    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
+    x = [p()], g = [p({ reflect: !0 }), O((e, o) => e.group?.size ?? o)], S = [p({ attribute: "icon-placement", reflect: !0 })], f(c, null, x, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, get: (e) => e.value, set: (e, o) => {
+      e.value = o;
+    } }, metadata: i }, v, k), f(c, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, o) => {
+      e.size = o;
+    } }, metadata: i }, z, y), f(c, null, S, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (e) => "iconPlacement" in e, get: (e) => e.iconPlacement, set: (e, o) => {
+      e.iconPlacement = o;
+    } }, metadata: i }, P, w), f(null, s = { value: l }, t, { kind: "class", name: l.name, metadata: i }, null, a), l = s.value, i && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+  })(), c.styles = [
+    M,
+    q,
+    A
+  ], n(l, a), l;
+})();
+export {
+  X as SbbCheckboxElement
+};