@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/datepicker/datepicker-toggle.js

@@ -0,0 +1,147 @@
+import { css as _, LitElement as b, isServer as h, html as m, nothing as p } from "lit";
+import { property as g, state as d, customElement as E } from "lit/decorators.js";
+import { ref as c } from "lit/directives/ref.js";
+import { sbbInputModalityDetector as u } from "../core/a11y.js";
+import { SbbLanguageController as f } from "../core/controllers.js";
+import { hostAttributes as k } from "../core/decorators.js";
+import { i18nShowCalendar as P } from "../core/i18n.js";
+import { SbbNegativeMixin as C, SbbHydrationMixin as v } from "../core/mixins.js";
+import { getDatePicker as w, datepickerControlRegisteredEventFactory as y } from "./datepicker.js";
+import "../calendar.js";
+import "../popover.js";
+const x = _`*,:before,:after{box-sizing:border-box}:host{--sbb-datepicker-control-radius: var(--sbb-border-radius-4x);--sbb-datepicker-control-color: var(--sbb-color-black);display:inline-flex}sbb-popover-trigger{--sbb-button-display: flex;color:var(--sbb-datepicker-control-color);height:unset}sbb-icon{color:var(--sbb-color-graphite)}`;
+var $ = Object.defineProperty, D = Object.getOwnPropertyDescriptor, o = (e, t, i, n) => {
+  for (var a = n > 1 ? void 0 : n ? D(t, i) : t, l = e.length - 1, r; l >= 0; l--)
+    (r = e[l]) && (a = (n ? r(t, i, a) : r(a)) || a);
+  return n && a && $(t, i, a), a;
+};
+let s = class extends C(v(b)) {
+  constructor() {
+    super(), this._disabled = !1, this._min = null, this._max = null, this._renderCalendar = !1, this._language = new f(this), h || this.hydrationComplete.then(() => this._renderCalendar = !0);
+  }
+  /**
+   * Opens the calendar.
+   */
+  open() {
+    this._triggerElement || (this._triggerElement = this.shadowRoot.querySelector("sbb-popover-trigger")), this._triggerElement.click();
+  }
+  connectedCallback() {
+    var t, i;
+    super.connectedCallback(), this.datePicker || this._init();
+    const e = ((t = this.closest) == null ? void 0 : t.call(this, "sbb-form-field")) ?? ((i = this.closest) == null ? void 0 : i.call(this, "[data-form-field]"));
+    e && (this.negative = e.hasAttribute("negative"));
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("datePicker") && this._init(this.datePicker);
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), (e = this._datePickerController) == null || e.abort();
+  }
+  _init(e) {
+    var t, i, n, a, l;
+    if ((t = this._datePickerController) == null || t.abort(), this._datePickerController = new AbortController(), this._datePickerElement = w(this, e), !this._datePickerElement) {
+      (i = this.parentElement) == null || i.addEventListener(
+        "inputUpdated",
+        (r) => this._init(r.target),
+        { once: !0, signal: this._datePickerController.signal }
+      );
+      return;
+    }
+    (n = this._datePickerElement) == null || n.addEventListener(
+      "inputUpdated",
+      (r) => {
+        this._datePickerElement = r.target, this._disabled = !!(r.detail.disabled || r.detail.readonly), this._min = r.detail.min, this._max = r.detail.max;
+      },
+      { signal: this._datePickerController.signal }
+    ), (a = this._datePickerElement) == null || a.addEventListener(
+      "change",
+      (r) => this._datePickerChanged(r),
+      {
+        signal: this._datePickerController.signal
+      }
+    ), (l = this._datePickerElement) == null || l.addEventListener(
+      "datePickerUpdated",
+      (r) => this._configureCalendar(this._calendarElement, r.target),
+      { signal: this._datePickerController.signal }
+    ), this._datePickerElement.dispatchEvent(y());
+  }
+  _configureCalendar(e, t) {
+    !e || !t || (e.wide = t.wide, e.now = this._nowOrUndefined(), e.dateFilter = t.dateFilter);
+  }
+  _datePickerChanged(e) {
+    this._datePickerElement = e.target, this._calendarElement.selected = this._datePickerElement.getValueAsDate();
+  }
+  _assignCalendar(e) {
+    var t;
+    this._calendarElement && this._calendarElement === e || (this._calendarElement = e, !(!this._datePickerElement || !this._datePickerElement.getValueAsDate || !((t = this._calendarElement) != null && t.resetPosition)) && (this._calendarElement.selected = this._datePickerElement.getValueAsDate(), this._configureCalendar(this._calendarElement, this._datePickerElement), this._calendarElement.resetPosition()));
+  }
+  updated(e) {
+    super.updated(e), this._popoverElement.trigger = this._triggerElement;
+  }
+  _nowOrUndefined() {
+    var e;
+    return (e = this._datePickerElement) != null && e.hasCustomNow() ? this._datePickerElement.now : void 0;
+  }
+  render() {
+    var e, t;
+    return m`
+      <sbb-popover-trigger
+        icon-name="calendar-small"
+        aria-label=${P[this._language.current]}
+        ?disabled=${!h && (!this._datePickerElement || this._disabled)}
+        ?negative=${this.negative}
+        data-icon-small
+        ${c((i) => this._triggerElement = i)}
+      ></sbb-popover-trigger>
+      <sbb-popover
+        @willOpen=${() => this._calendarElement.resetPosition()}
+        @didOpen=${() => {
+      u.mostRecentModality === "keyboard" && this._calendarElement.focus();
+    }}
+        .trigger=${this._triggerElement}
+        hide-close-button
+        ${c((i) => this._popoverElement = i)}
+      >
+        ${this._renderCalendar ? m`<sbb-calendar
+              .min=${this._min}
+              .max=${this._max}
+              .now=${this._nowOrUndefined()}
+              ?wide=${(e = this._datePickerElement) == null ? void 0 : e.wide}
+              .dateFilter=${(t = this._datePickerElement) == null ? void 0 : t.dateFilter}
+              @dateSelected=${(i) => {
+      var a;
+      const n = new Date(i.detail);
+      this._calendarElement.selected = n, (a = this._datePickerElement) == null || a.setValueAsDate(n);
+    }}
+              ${c((i) => this._assignCalendar(i))}
+            ></sbb-calendar>` : p}
+      </sbb-popover>
+    `;
+  }
+};
+s.styles = x;
+o([
+  g({ attribute: "date-picker" })
+], s.prototype, "datePicker", 2);
+o([
+  d()
+], s.prototype, "_disabled", 2);
+o([
+  d()
+], s.prototype, "_min", 2);
+o([
+  d()
+], s.prototype, "_max", 2);
+o([
+  d()
+], s.prototype, "_renderCalendar", 2);
+s = o([
+  E("sbb-datepicker-toggle"),
+  k({
+    slot: "prefix"
+  })
+], s);
+export {
+  s as SbbDatepickerToggleElement
+};

package/datepicker/datepicker.d.ts

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

package/datepicker/datepicker.d.ts.map

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

package/datepicker/datepicker.js

@@ -0,0 +1,261 @@
+import { css as c, LitElement as b, html as f } from "lit";
+import { property as u, state as E, customElement as g } from "lit/decorators.js";
+import { readConfig as v } from "../core/config.js";
+import { SbbConnectedAbortController as C, SbbLanguageController as w } from "../core/controllers.js";
+import { defaultDateAdapter as m } from "../core/datetime.js";
+import { findReferencedElement as D, findInput as h } from "../core/dom.js";
+import { EventEmitter as d } from "../core/eventing.js";
+import { i18nDatePickerPlaceholder as p, i18nDateChangedTo as A } from "../core/i18n.js";
+import { AgnosticMutationObserver as y } from "../core/observers.js";
+const V = c`:host{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var x = Object.defineProperty, P = Object.getOwnPropertyDescriptor, l = (t, e, n, a) => {
+  for (var i = a > 1 ? void 0 : a ? P(e, n) : e, s = t.length - 1, o; s >= 0; s--)
+    (o = t[s]) && (i = (a ? o(e, n, i) : o(i)) || i);
+  return a && i && x(e, n, i), i;
+};
+const U = /(^0?[1-9]?|[12]?[0-9]?|3?[01]?)[.,\\/\-\s](0?[1-9]?|1?[0-2]?)?[.,\\/\-\s](\d{1,4}$)?/;
+function N(t, e) {
+  var n;
+  if (!e) {
+    const a = (n = t.closest) == null ? void 0 : n.call(t, "sbb-form-field");
+    return a == null ? void 0 : a.querySelector("sbb-datepicker");
+  }
+  return D(e);
+}
+function _(t, e, n, a) {
+  let i = a.addCalendarDays(t, e);
+  if (n)
+    for (; !n(i); )
+      i = a.addCalendarDays(i, e);
+  return i;
+}
+function $(t, e, n, a) {
+  const i = _(t, -1, e, n), s = n.deserialize(a);
+  return !s || n.isValid(s) && n.compareDate(i, s) >= 0 ? i : t;
+}
+function H(t, e, n, a) {
+  const i = _(t, 1, e, n), s = n.deserialize(a);
+  return !s || n.isValid(s) && n.compareDate(i, s) <= 0 ? i : t;
+}
+function k(t, e, n, a) {
+  const i = m, s = i.deserialize(n), o = i.deserialize(a);
+  return i.isValid(s) && i.compareDate(t, s) < 0 || i.isValid(o) && i.compareDate(t, o) > 0 ? !1 : e ? e(t) : !0;
+}
+const j = () => new CustomEvent("datepickerControlRegistered", {
+  bubbles: !1,
+  composed: !0
+});
+let r = class extends b {
+  constructor() {
+    var t;
+    super(...arguments), this.wide = !1, this.dateFilter = () => !0, this._now = null, this._didChange = new d(this, r.events.didChange, {
+      bubbles: !0,
+      cancelable: !0
+    }), this._change = new d(this, r.events.change, {
+      bubbles: !0
+    }), this._inputUpdated = new d(
+      this,
+      r.events.inputUpdated,
+      { bubbles: !0, cancelable: !0 }
+    ), this._datePickerUpdated = new d(
+      this,
+      r.events.datePickerUpdated,
+      {
+        bubbles: !0,
+        cancelable: !0
+      }
+    ), this._validationChange = new d(
+      this,
+      r.events.validationChange
+    ), this._inputElementState = null, this._inputObserver = new y(this._onInputPropertiesChange.bind(this)), this._dateAdapter = ((t = v().datetime) == null ? void 0 : t.dateAdapter) ?? m, this._abort = new C(this), this._language = new w(this).withHandler(() => {
+      if (this._inputElement) {
+        this._inputElement.placeholder = p[this._language.current];
+        const e = this.getValueAsDate();
+        e && (this._inputElement.value = this._format(e));
+      }
+    });
+  }
+  set now(t) {
+    this._now = this._dateAdapter.getValidDateOrNull(this._dateAdapter.deserialize(t));
+  }
+  get now() {
+    return this._now ?? this._dateAdapter.today();
+  }
+  get _inputElement() {
+    return this._inputElementState;
+  }
+  set _inputElement(t) {
+    const e = this._inputElementState;
+    this._inputElementState = t, this._registerInputElement(this._inputElementState, e);
+  }
+  _findInput(t, e) {
+    t !== e && (this._inputElement = h(this, this.input));
+  }
+  _registerInputElement(t, e) {
+    var n, a;
+    if (t !== e) {
+      if ((n = this._datePickerController) == null || n.abort(), this._datePickerController = new AbortController(), !this._inputElement)
+        return;
+      (a = this._inputObserver) == null || a.disconnect(), this._inputObserver.observe(this._inputElement, {
+        attributeFilter: ["disabled", "readonly", "min", "max", "value"]
+      }), this._inputElement.type = "text", this._inputElement.placeholder || (this._inputElement.placeholder = p[this._language.current]), this._inputElement.addEventListener(
+        "change",
+        (i) => {
+          i instanceof CustomEvent || this._valueChanged(i);
+        },
+        {
+          signal: this._datePickerController.signal
+        }
+      );
+    }
+  }
+  /** Gets the input value with the correct date format. */
+  getValueAsDate() {
+    if (this._inputElement && this._inputElement.value)
+      return this._parse(this._inputElement.value);
+  }
+  /** Set the input value to the correctly formatted value. */
+  setValueAsDate(t) {
+    const e = t instanceof Date ? t : new Date(t);
+    this._inputElement && (this._formatAndUpdateValue(this._inputElement.value, e), this._inputElement.dispatchEvent(new Event("blur", { composed: !0 })));
+  }
+  /**
+   * @internal
+   * Whether a custom now is configured.
+   */
+  hasCustomNow() {
+    return !!this._now;
+  }
+  _onInputPropertiesChange(t) {
+    var e, n, a, i;
+    this._inputUpdated.emit({
+      disabled: (e = this._inputElement) == null ? void 0 : e.disabled,
+      readonly: (n = this._inputElement) == null ? void 0 : n.readOnly,
+      min: (a = this._inputElement) == null ? void 0 : a.min,
+      max: (i = this._inputElement) == null ? void 0 : i.max
+    }), this._inputElement && t && Array.from(t).some((s) => s.attributeName === "value") && (this._inputElement.value = this._getValidValue(this._inputElement.getAttribute("value")));
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const t = this._abort.signal;
+    this.addEventListener("datepickerControlRegistered", () => this._onInputPropertiesChange(), {
+      signal: t
+    }), this._inputElement = h(this, this.input), this._inputElement && (this._inputElement.value = this._getValidValue(this._inputElement.value), this._inputUpdated.emit({
+      disabled: this._inputElement.disabled,
+      readonly: this._inputElement.readOnly,
+      min: this._inputElement.min,
+      max: this._inputElement.max
+    }));
+  }
+  willUpdate(t) {
+    super.willUpdate(t), t.has("input") && this._findInput(this.input, t.get("input")), (t.has("wide") || t.has("dateFilter") || t.has("now")) && this._datePickerUpdated.emit();
+  }
+  disconnectedCallback() {
+    var t, e;
+    super.disconnectedCallback(), (t = this._inputObserver) == null || t.disconnect(), (e = this._datePickerController) == null || e.abort();
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._setAriaLiveMessage(this.getValueAsDate());
+  }
+  _parseAndFormatValue(t) {
+    const e = this._parse(t);
+    return this._dateAdapter.isValid(e) ? this._format(e) : t;
+  }
+  _createAndComposeDate(t) {
+    const e = new Date(t);
+    return this._format(e);
+  }
+  _valueChanged(t) {
+    const e = t.target.value;
+    this._formatAndUpdateValue(e, this._parse(e));
+  }
+  /** Applies the correct format to values and triggers event dispatch. */
+  _formatAndUpdateValue(t, e) {
+    var n, a;
+    if (this._inputElement) {
+      this._inputElement.value = this._dateAdapter.isValid(e) ? this._format(e) : t;
+      const i = !t || !!e && k(
+        e,
+        this.dateFilter,
+        (n = this._inputElement) == null ? void 0 : n.min,
+        (a = this._inputElement) == null ? void 0 : a.max
+      ), s = !this._inputElement.hasAttribute("data-sbb-invalid");
+      this._inputElement.toggleAttribute("data-sbb-invalid", !i), s !== i && this._validationChange.emit({ valid: i }), this._emitChange(e);
+    }
+  }
+  /** Emits the change event. */
+  _emitChange(t) {
+    this._setAriaLiveMessage(t), this._change.emit(), this._didChange.emit(), this._inputElement && (this._inputElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._inputElement.dispatchEvent(
+      new CustomEvent("change", { bubbles: !0, composed: !0 })
+    ));
+  }
+  _getValidValue(t) {
+    if (!t)
+      return "";
+    const e = t.match(U);
+    return (e == null ? void 0 : e.index) === 0 ? this._parseAndFormatValue(t) : Number.isInteger(+t) ? this._createAndComposeDate(+t) : this._dateAdapter.isValid(new Date(t)) ? this._createAndComposeDate(t) : t;
+  }
+  _parse(t) {
+    return this.dateParser ? this.dateParser(t) : this._dateAdapter.parse(t, this.now);
+  }
+  _format(t) {
+    return this.format ? this.format(t) : this._dateAdapter.format(t);
+  }
+  _setAriaLiveMessage(t) {
+    var i, s;
+    const e = new Intl.DateTimeFormat(`${this._language.current}-CH`, {
+      weekday: "long"
+    }), n = new Intl.DateTimeFormat("de-CH", {
+      day: "2-digit",
+      month: "2-digit",
+      year: "numeric"
+    }), a = (s = (i = this.shadowRoot) == null ? void 0 : i.querySelector) == null ? void 0 : s.call(i, "#status-container");
+    a && (a.innerText = t ? `${A[this._language.current]} ${e.format(
+      t
+    )}, ${n.format(t)}` : "");
+  }
+  render() {
+    return f`<p id="status-container" role="status"></p>`;
+  }
+};
+r.styles = V;
+r.events = {
+  didChange: "didChange",
+  change: "change",
+  inputUpdated: "inputUpdated",
+  datePickerUpdated: "datePickerUpdated",
+  validationChange: "validationChange"
+};
+l([
+  u({ type: Boolean })
+], r.prototype, "wide", 2);
+l([
+  u({ attribute: "date-filter" })
+], r.prototype, "dateFilter", 2);
+l([
+  u({ attribute: "date-parser" })
+], r.prototype, "dateParser", 2);
+l([
+  u()
+], r.prototype, "format", 2);
+l([
+  u()
+], r.prototype, "input", 2);
+l([
+  u()
+], r.prototype, "now", 1);
+l([
+  E()
+], r.prototype, "_inputElement", 1);
+r = l([
+  g("sbb-datepicker")
+], r);
+export {
+  r as SbbDatepickerElement,
+  j as datepickerControlRegisteredEventFactory,
+  H as findNextAvailableDate,
+  $ as findPreviousAvailableDate,
+  _ as getAvailableDate,
+  N as getDatePicker,
+  k as isDateAvailable
+};

package/datepicker.d.ts

@@ -0,0 +1,6 @@
+export * from './datepicker/datepicker.js';
+export * from './datepicker/datepicker-next-day.js';
+export * from './datepicker/datepicker-previous-day.js';
+export * from './datepicker/datepicker-toggle.js';
+export * from './datepicker/common.js';
+//# sourceMappingURL=datepicker.d.ts.map

package/datepicker.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"datepicker.d.ts","sourceRoot":"","sources":["../../src/elements/datepicker.ts"],"names":[],"mappings":"AAAA,cAAc,4BAA4B,CAAC;AAC3C,cAAc,qCAAqC,CAAC;AACpD,cAAc,yCAAyC,CAAC;AACxD,cAAc,mCAAmC,CAAC;AAClD,cAAc,wBAAwB,CAAC"}

package/datepicker.js

@@ -0,0 +1,5 @@
+export * from "./datepicker/datepicker.js";
+export * from "./datepicker/datepicker-next-day.js";
+export * from "./datepicker/datepicker-previous-day.js";
+export * from "./datepicker/datepicker-toggle.js";
+export * from "./datepicker/common.js";

package/development/accordion/accordion.d.ts

@@ -0,0 +1,41 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+import { SbbTitleLevel } from '../title.js';
+
+declare const SbbAccordionElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbHydrationMixinType> & typeof LitElement;
+/**
+ * It can be used as a container for one or more `sbb-expansion-panel` component.
+ *
+ * @slot - Use the unnamed slot to add `sbb-expansion-panel` elements.
+ */
+export declare class SbbAccordionElement extends SbbAccordionElement_base {
+    static styles: CSSResultGroup;
+    /**
+     * The heading level for the sbb-expansion-panel-headers within the component.
+     * @controls SbbExpansionPanelElement.titleLevel
+     */
+    set titleLevel(value: SbbTitleLevel | null);
+    get titleLevel(): SbbTitleLevel | null;
+    private _titleLevel;
+    /** Whether more than one sbb-expansion-panel can be open at the same time. */
+    set multi(value: boolean);
+    get multi(): boolean;
+    private _multi;
+    /** Size variant, either l or s; overrides the size on any projected `sbb-expansion-panel`. `*/
+    size: 's' | 'l';
+    private _abort;
+    private _closePanels;
+    private _resetExpansionPanels;
+    private _setTitleLevelOnChildren;
+    private get _expansionPanels();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    private _handleSlotchange;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-accordion': SbbAccordionElement;
+    }
+}
+export {};
+//# sourceMappingURL=accordion.d.ts.map

package/development/accordion/accordion.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"accordion.d.ts","sourceRoot":"","sources":["../../../../src/elements/accordion/accordion.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAMvC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,aAAa,CAAC;;AAIjD;;;;GAIG;AACH,qBACa,mBAAoB,SAAQ,wBAA6B;IACpE,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD;;;OAGG;IACH,IACW,UAAU,CAAC,KAAK,EAAE,aAAa,GAAG,IAAI,EAGhD;IACD,IAAW,UAAU,IAAI,aAAa,GAAG,IAAI,CAE5C;IACD,OAAO,CAAC,WAAW,CAA8B;IAEjD,8EAA8E;IAC9E,IACW,KAAK,CAAC,KAAK,EAAE,OAAO,EAI9B;IACD,IAAW,KAAK,IAAI,OAAO,CAE1B;IACD,OAAO,CAAC,MAAM,CAAkB;IAEhC,+FAA+F;IAC3D,IAAI,EAAE,GAAG,GAAG,GAAG,CAAO;IAE1D,OAAO,CAAC,MAAM,CAAyC;IAEvD,OAAO,CAAC,YAAY;IAUpB,OAAO,CAAC,qBAAqB;IAW7B,OAAO,CAAC,wBAAwB;IAMhC,OAAO,KAAK,gBAAgB,GAE3B;IAEe,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAQ5E,OAAO,CAAC,iBAAiB;cAWN,MAAM,IAAI,cAAc;CAO5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,eAAe,EAAE,mBAAmB,CAAC;KACtC;CACF"}

package/development/accordion.d.ts

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

package/development/accordion.d.ts.map

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

package/development/accordion.js

@@ -0,0 +1,135 @@
+import { css, LitElement, html } from "lit";
+import { property, customElement } from "lit/decorators.js";
+import { SbbConnectedAbortController } from "./core/controllers.js";
+import { SbbHydrationMixin } from "./core/mixins.js";
+import { SbbExpansionPanelElement } from "./expansion-panel.js";
+const style = css`/**
+ * Better font rendering (on OS X)
+ * http://maximilianhoffmann.com/posts/better-font-rendering-on-osx
+ *
+ * Usage:
+ *
+ * .var_dark_on_light {
+ * 	@include font-smoothing;
+ * }
+ * .var_light_on_dark {
+ * 	@include font-smoothing-reset;
+ * }
+ */
+/** This mixin can be used to avoid spacing problems by inserting an invisible space as pseudo element. */
+*,
+::before,
+::after {
+  box-sizing: border-box;
+}
+
+:host {
+  display: block;
+}`;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+let SbbAccordionElement = class extends SbbHydrationMixin(LitElement) {
+  constructor() {
+    super(...arguments);
+    this._titleLevel = null;
+    this._multi = false;
+    this.size = "l";
+    this._abort = new SbbConnectedAbortController(this);
+  }
+  set titleLevel(value) {
+    this._titleLevel = value;
+    this._setTitleLevelOnChildren();
+  }
+  get titleLevel() {
+    return this._titleLevel;
+  }
+  set multi(value) {
+    const oldValue = this._multi;
+    this._multi = value;
+    this._resetExpansionPanels(this._multi, oldValue);
+  }
+  get multi() {
+    return this._multi;
+  }
+  _closePanels(e) {
+    var _a;
+    if (((_a = e.target) == null ? void 0 : _a.localName) !== "sbb-expansion-panel" || this.multi) {
+      return;
+    }
+    this._expansionPanels.filter((panel) => panel !== e.target).forEach((panel) => panel.expanded = false);
+  }
+  _resetExpansionPanels(newValue, oldValue) {
+    const expansionPanels = this._expansionPanels;
+    if (expansionPanels.length > 1 && oldValue && !newValue) {
+      expansionPanels[0].expanded = true;
+      expansionPanels.filter((_, index) => index > 0).forEach((panel) => panel.expanded = false);
+    }
+  }
+  _setTitleLevelOnChildren() {
+    this._expansionPanels.forEach(
+      (panel) => panel.titleLevel = this.titleLevel
+    );
+  }
+  get _expansionPanels() {
+    var _a;
+    return Array.from(((_a = this.querySelectorAll) == null ? void 0 : _a.call(this, "sbb-expansion-panel")) ?? []);
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    const signal = this._abort.signal;
+    this.addEventListener(
+      SbbExpansionPanelElement.events.willOpen,
+      (e) => this._closePanels(e),
+      { signal }
+    );
+  }
+  willUpdate(changedProperties) {
+    super.willUpdate(changedProperties);
+    if (changedProperties.has("size")) {
+      this._expansionPanels.forEach((panel) => panel.size = this.size);
+    }
+  }
+  _handleSlotchange() {
+    this._expansionPanels.forEach(
+      (panel, index, array) => {
+        panel.titleLevel = this.titleLevel;
+        panel.size = this.size;
+        panel.toggleAttribute("data-accordion-first", index === 0);
+        panel.toggleAttribute("data-accordion-last", index === array.length - 1);
+      }
+    );
+  }
+  render() {
+    return html`
+      <div class="sbb-accordion">
+        <slot @slotchange=${this._handleSlotchange}></slot>
+      </div>
+    `;
+  }
+};
+SbbAccordionElement.styles = style;
+__decorateClass([
+  property({ attribute: "title-level" })
+], SbbAccordionElement.prototype, "titleLevel", 1);
+__decorateClass([
+  property({ type: Boolean })
+], SbbAccordionElement.prototype, "multi", 1);
+__decorateClass([
+  property({ reflect: true })
+], SbbAccordionElement.prototype, "size", 2);
+SbbAccordionElement = __decorateClass([
+  customElement("sbb-accordion")
+], SbbAccordionElement);
+export {
+  SbbAccordionElement
+};
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYWNjb3JkaW9uLmpzIiwic291cmNlcyI6WyIuLi8uLi8uLi9zcmMvZWxlbWVudHMvYWNjb3JkaW9uL2FjY29yZGlvbi50cyJdLCJzb3VyY2VzQ29udGVudCI6WyJpbXBvcnQgdHlwZSB7IENTU1Jlc3VsdEdyb3VwLCBQcm9wZXJ0eVZhbHVlcywgVGVtcGxhdGVSZXN1bHQgfSBmcm9tICdsaXQnO1xuaW1wb3J0IHsgaHRtbCwgTGl0RWxlbWVudCB9IGZyb20gJ2xpdCc7XG5pbXBvcnQgeyBjdXN0b21FbGVtZW50LCBwcm9wZXJ0eSB9IGZyb20gJ2xpdC9kZWNvcmF0b3JzLmpzJztcblxuaW1wb3J0IHsgU2JiQ29ubmVjdGVkQWJvcnRDb250cm9sbGVyIH0gZnJvbSAnLi4vY29yZS9jb250cm9sbGVycy5qcyc7XG5pbXBvcnQgeyBTYmJIeWRyYXRpb25NaXhpbiB9IGZyb20gJy4uL2NvcmUvbWl4aW5zLmpzJztcbmltcG9ydCB7IFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudCB9IGZyb20gJy4uL2V4cGFuc2lvbi1wYW5lbC5qcyc7XG5pbXBvcnQgdHlwZSB7IFNiYlRpdGxlTGV2ZWwgfSBmcm9tICcuLi90aXRsZS5qcyc7XG5cbmltcG9ydCBzdHlsZSBmcm9tICcuL2FjY29yZGlvbi5zY3NzP2xpdCZpbmxpbmUnO1xuXG4vKipcbiAqIEl0IGNhbiBiZSB1c2VkIGFzIGEgY29udGFpbmVyIGZvciBvbmUgb3IgbW9yZSBgc2JiLWV4cGFuc2lvbi1wYW5lbGAgY29tcG9uZW50LlxuICpcbiAqIEBzbG90IC0gVXNlIHRoZSB1bm5hbWVkIHNsb3QgdG8gYWRkIGBzYmItZXhwYW5zaW9uLXBhbmVsYCBlbGVtZW50cy5cbiAqL1xuQGN1c3RvbUVsZW1lbnQoJ3NiYi1hY2NvcmRpb24nKVxuZXhwb3J0IGNsYXNzIFNiYkFjY29yZGlvbkVsZW1lbnQgZXh0ZW5kcyBTYmJIeWRyYXRpb25NaXhpbihMaXRFbGVtZW50KSB7XG4gIHB1YmxpYyBzdGF0aWMgb3ZlcnJpZGUgc3R5bGVzOiBDU1NSZXN1bHRHcm91cCA9IHN0eWxlO1xuXG4gIC8qKlxuICAgKiBUaGUgaGVhZGluZyBsZXZlbCBmb3IgdGhlIHNiYi1leHBhbnNpb24tcGFuZWwtaGVhZGVycyB3aXRoaW4gdGhlIGNvbXBvbmVudC5cbiAgICogQGNvbnRyb2xzIFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudC50aXRsZUxldmVsXG4gICAqL1xuICBAcHJvcGVydHkoeyBhdHRyaWJ1dGU6ICd0aXRsZS1sZXZlbCcgfSlcbiAgcHVibGljIHNldCB0aXRsZUxldmVsKHZhbHVlOiBTYmJUaXRsZUxldmVsIHwgbnVsbCkge1xuICAgIHRoaXMuX3RpdGxlTGV2ZWwgPSB2YWx1ZTtcbiAgICB0aGlzLl9zZXRUaXRsZUxldmVsT25DaGlsZHJlbigpO1xuICB9XG4gIHB1YmxpYyBnZXQgdGl0bGVMZXZlbCgpOiBTYmJUaXRsZUxldmVsIHwgbnVsbCB7XG4gICAgcmV0dXJuIHRoaXMuX3RpdGxlTGV2ZWw7XG4gIH1cbiAgcHJpdmF0ZSBfdGl0bGVMZXZlbDogU2JiVGl0bGVMZXZlbCB8IG51bGwgPSBudWxsO1xuXG4gIC8qKiBXaGV0aGVyIG1vcmUgdGhhbiBvbmUgc2JiLWV4cGFuc2lvbi1wYW5lbCBjYW4gYmUgb3BlbiBhdCB0aGUgc2FtZSB0aW1lLiAqL1xuICBAcHJvcGVydHkoeyB0eXBlOiBCb29sZWFuIH0pXG4gIHB1YmxpYyBzZXQgbXVsdGkodmFsdWU6IGJvb2xlYW4pIHtcbiAgICBjb25zdCBvbGRWYWx1ZSA9IHRoaXMuX211bHRpO1xuICAgIHRoaXMuX211bHRpID0gdmFsdWU7XG4gICAgdGhpcy5fcmVzZXRFeHBhbnNpb25QYW5lbHModGhpcy5fbXVsdGksIG9sZFZhbHVlKTtcbiAgfVxuICBwdWJsaWMgZ2V0IG11bHRpKCk6IGJvb2xlYW4ge1xuICAgIHJldHVybiB0aGlzLl9tdWx0aTtcbiAgfVxuICBwcml2YXRlIF9tdWx0aTogYm9vbGVhbiA9IGZhbHNlO1xuXG4gIC8qKiBTaXplIHZhcmlhbnQsIGVpdGhlciBsIG9yIHM7IG92ZXJyaWRlcyB0aGUgc2l6ZSBvbiBhbnkgcHJvamVjdGVkIGBzYmItZXhwYW5zaW9uLXBhbmVsYC4gYCovXG4gIEBwcm9wZXJ0eSh7IHJlZmxlY3Q6IHRydWUgfSkgcHVibGljIHNpemU6ICdzJyB8ICdsJyA9ICdsJztcblxuICBwcml2YXRlIF9hYm9ydCA9IG5ldyBTYmJDb25uZWN0ZWRBYm9ydENvbnRyb2xsZXIodGhpcyk7XG5cbiAgcHJpdmF0ZSBfY2xvc2VQYW5lbHMoZTogQ3VzdG9tRXZlbnQpOiB2b2lkIHtcbiAgICBpZiAoKGUudGFyZ2V0IGFzIEhUTUxFbGVtZW50KT8ubG9jYWxOYW1lICE9PSAnc2JiLWV4cGFuc2lvbi1wYW5lbCcgfHwgdGhpcy5tdWx0aSkge1xuICAgICAgcmV0dXJuO1xuICAgIH1cblxuICAgIHRoaXMuX2V4cGFuc2lvblBhbmVsc1xuICAgICAgLmZpbHRlcigocGFuZWwpID0+IHBhbmVsICE9PSBlLnRhcmdldClcbiAgICAgIC5mb3JFYWNoKChwYW5lbCkgPT4gKHBhbmVsLmV4cGFuZGVkID0gZmFsc2UpKTtcbiAgfVxuXG4gIHByaXZhdGUgX3Jlc2V0RXhwYW5zaW9uUGFuZWxzKG5ld1ZhbHVlOiBib29sZWFuLCBvbGRWYWx1ZTogYm9vbGVhbik6IHZvaWQge1xuICAgIC8vIElmIGl0J3MgY2hhbmdpbmcgZnJvbSBcIm11bHRpID0gdHJ1ZVwiIHRvIFwibXVsdGkgPSBmYWxzZVwiLCBvcGVuIHRoZSBmaXJzdCBwYW5lbCBhbmQgY2xvc2UgYWxsIHRoZSBvdGhlcnMuXG4gICAgY29uc3QgZXhwYW5zaW9uUGFuZWxzID0gdGhpcy5fZXhwYW5zaW9uUGFuZWxzO1xuICAgIGlmIChleHBhbnNpb25QYW5lbHMubGVuZ3RoID4gMSAmJiBvbGRWYWx1ZSAmJiAhbmV3VmFsdWUpIHtcbiAgICAgIGV4cGFuc2lvblBhbmVsc1swXS5leHBhbmRlZCA9IHRydWU7XG4gICAgICBleHBhbnNpb25QYW5lbHNcbiAgICAgICAgLmZpbHRlcigoXywgaW5kZXg6IG51bWJlcikgPT4gaW5kZXggPiAwKVxuICAgICAgICAuZm9yRWFjaCgocGFuZWwpID0+IChwYW5lbC5leHBhbmRlZCA9IGZhbHNlKSk7XG4gICAgfVxuICB9XG5cbiAgcHJpdmF0ZSBfc2V0VGl0bGVMZXZlbE9uQ2hpbGRyZW4oKTogdm9pZCB7XG4gICAgdGhpcy5fZXhwYW5zaW9uUGFuZWxzLmZvckVhY2goXG4gICAgICAocGFuZWw6IFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudCkgPT4gKHBhbmVsLnRpdGxlTGV2ZWwgPSB0aGlzLnRpdGxlTGV2ZWwpLFxuICAgICk7XG4gIH1cblxuICBwcml2YXRlIGdldCBfZXhwYW5zaW9uUGFuZWxzKCk6IFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudFtdIHtcbiAgICByZXR1cm4gQXJyYXkuZnJvbSh0aGlzLnF1ZXJ5U2VsZWN0b3JBbGw/Lignc2JiLWV4cGFuc2lvbi1wYW5lbCcpID8/IFtdKTtcbiAgfVxuXG4gIHB1YmxpYyBvdmVycmlkZSBjb25uZWN0ZWRDYWxsYmFjaygpOiB2b2lkIHtcbiAgICBzdXBlci5jb25uZWN0ZWRDYWxsYmFjaygpO1xuICAgIGNvbnN0IHNpZ25hbCA9IHRoaXMuX2Fib3J0LnNpZ25hbDtcbiAgICB0aGlzLmFkZEV2ZW50TGlzdGVuZXIoXG4gICAgICBTYmJFeHBhbnNpb25QYW5lbEVsZW1lbnQuZXZlbnRzLndpbGxPcGVuLFxuICAgICAgKGU6IEN1c3RvbUV2ZW50PHZvaWQ+KSA9PiB0aGlzLl9jbG9zZVBhbmVscyhlKSxcbiAgICAgIHsgc2lnbmFsIH0sXG4gICAgKTtcbiAgfVxuXG4gIHByb3RlY3RlZCBvdmVycmlkZSB3aWxsVXBkYXRlKGNoYW5nZWRQcm9wZXJ0aWVzOiBQcm9wZXJ0eVZhbHVlczx0aGlzPik6IHZvaWQge1xuICAgIHN1cGVyLndpbGxVcGRhdGUoY2hhbmdlZFByb3BlcnRpZXMpO1xuXG4gICAgaWYgKGNoYW5nZWRQcm9wZXJ0aWVzLmhhcygnc2l6ZScpKSB7XG4gICAgICB0aGlzLl9leHBhbnNpb25QYW5lbHMuZm9yRWFjaCgocGFuZWw6IFNiYkV4cGFuc2lvblBhbmVsRWxlbWVudCkgPT4gKHBhbmVsLnNpemUgPSB0aGlzLnNpemUpKTtcbiAgICB9XG4gIH1cblxuICBwcml2YXRlIF9oYW5kbGVTbG90Y2hhbmdlKCk6IHZvaWQge1xuICAgIHRoaXMuX2V4cGFuc2lvblBhbmVscy5mb3JFYWNoKFxuICAgICAgKHBhbmVsOiBTYmJFeHBhbnNpb25QYW5lbEVsZW1lbnQsIGluZGV4OiBudW1iZXIsIGFycmF5OiBTYmJFeHBhbnNpb25QYW5lbEVsZW1lbnRbXSkgPT4ge1xuICAgICAgICBwYW5lbC50aXRsZUxldmVsID0gdGhpcy50aXRsZUxldmVsO1xuICAgICAgICBwYW5lbC5zaXplID0gdGhpcy5zaXplO1xuICAgICAgICBwYW5lbC50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtYWNjb3JkaW9uLWZpcnN0JywgaW5kZXggPT09IDApO1xuICAgICAgICBwYW5lbC50b2dnbGVBdHRyaWJ1dGUoJ2RhdGEtYWNjb3JkaW9uLWxhc3QnLCBpbmRleCA9PT0gYXJyYXkubGVuZ3RoIC0gMSk7XG4gICAgICB9LFxuICAgICk7XG4gIH1cblxuICBwcm90ZWN0ZWQgb3ZlcnJpZGUgcmVuZGVyKCk6IFRlbXBsYXRlUmVzdWx0IHtcbiAgICByZXR1cm4gaHRtbGBcbiAgICAgIDxkaXYgY2xhc3M9XCJzYmItYWNjb3JkaW9uXCI+XG4gICAgICAgIDxzbG90IEBzbG90Y2hhbmdlPSR7dGhpcy5faGFuZGxlU2xvdGNoYW5nZX0+PC9zbG90PlxuICAgICAgPC9kaXY+XG4gICAgYDtcbiAgfVxufVxuXG5kZWNsYXJlIGdsb2JhbCB7XG4gIGludGVyZmFjZSBIVE1MRWxlbWVudFRhZ05hbWVNYXAge1xuICAgIC8vIGVzbGludC1kaXNhYmxlLW5leHQtbGluZSBAdHlwZXNjcmlwdC1lc2xpbnQvbmFtaW5nLWNvbnZlbnRpb25cbiAgICAnc2JiLWFjY29yZGlvbic6IFNiYkFjY29yZGlvbkVsZW1lbnQ7XG4gIH1cbn1cbiJdLCJuYW1lcyI6W10sIm1hcHBpbmdz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