@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/select.js

@@ -0,0 +1,402 @@
+import { css as _, html as b, nothing as c } from "lit";
+import { property as d, state as g, customElement as m } from "lit/decorators.js";
+import { ref as v } from "lit/directives/ref.js";
+import { getNextElementIndex as w } from "./core/a11y.js";
+import { SbbOpenCloseBaseElement as y } from "./core/base-elements.js";
+import { SbbConnectedAbortController as x } from "./core/controllers.js";
+import { hostAttributes as E } from "./core/decorators.js";
+import { isNextjs as u, getDocumentWritingMode as O, isSafari as k } from "./core/dom.js";
+import { EventEmitter as p } from "./core/eventing.js";
+import { SbbUpdateSchedulerMixin as C, SbbDisabledMixin as A, SbbNegativeMixin as S } from "./core/mixins.js";
+import { isEventOnElement as f, setOverlayPosition as I, overlayGapFixCorners as P } from "./core/overlay.js";
+const $ = _`*,:before,:after{box-sizing:border-box}.sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb-options-panel-border-radius);height:var(--sbb-options-panel-border-radius);background-color:transparent}.sbb-gap-fix-corner{position:absolute;border-radius:50%;border:calc(var(--sbb-options-panel-border-radius) / 2) solid var(--sbb-options-panel-background-color);width:calc(var(--sbb-options-panel-border-radius) * 3);height:calc(var(--sbb-options-panel-border-radius) * 3);bottom:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}.sbb-gap-fix-corner#left{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#left{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1);left:unset}.sbb-gap-fix-corner#right{right:calc(var(--sbb-options-panel-border-radius) / 2 * -1)}:host([dir=rtl]) .sbb-gap-fix-corner#right{left:calc(var(--sbb-options-panel-border-radius) / 2 * -1);right:unset}:host{--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: var(--sbb-color-black-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-black-alpha-60);--sbb-scrollbar-track-color: transparent;--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-panel-active-option-y: 0;--sbb-options-panel-max-height: calc(85vh - var(--sbb-spacing-fixed-8x));--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--sbb-options-panel-visibility: visible;--sbb-options-panel-width: fit-content;--sbb-options-panel-border-radius: var(--sbb-border-radius-4x);--sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius);--sbb-options-panel-animation-duration: var( --sbb-disable-animation-time, var(--sbb-animation-duration-4x) );--sbb-options-panel-animation-timing-function: ease;--sbb-options-panel-gap-fix-opacity: 0;--sbb-options-panel-gap-fix-transform: none;--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-options-panel-background-color: var(--sbb-color-white);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-scrollbar-color: var(--sbb-color-white-alpha-30);--sbb-scrollbar-color-hover: var(--sbb-color-white-alpha-60);--sbb-options-panel-background-color: var(--sbb-color-midnight);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not([data-state])),:host([data-state=closed]){--sbb-options-panel-visibility: hidden}:host([data-state=opening]){--sbb-options-panel-animation-name: open}:host([data-state=closing]){--sbb-options-panel-animation-name: close}:host([data-state=opened]),:host([data-state=opening]){--sbb-options-panel-gap-fix-opacity: 1}:host([data-options-panel-position=below]){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host([data-options-panel-position=above]){--sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius) var(--sbb-options-panel-border-radius) 0 0;--sbb-options-panel-gap-fix-top: var(--sbb-options-panel-max-height);--sbb-options-panel-gap-fix-transform: rotate(180deg);--sbb-options-panel-animation-transform: translateY( calc(var(--sbb-options-panel-origin-height) / 2) )}::slotted(sbb-divider){margin-block:var(--sbb-spacing-fixed-3x)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;height:calc(1em * var(--sbb-typo-line-height-body-text))}.sbb-select__trigger--placeholder{color:var(--sbb-select-placeholder-color, var(--sbb-color-metal));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-color-metal))}.sbb-select__container{position:fixed;pointer-events:none;top:0;right:0;bottom:0;left:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility);opacity:var(--sbb-options-panel-gap-fix-opacity);background-color:transparent;width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-gap-fix-top);left:var(--sbb-options-panel-position-x);transform:var(--sbb-options-panel-gap-fix-transform);transition:opacity var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility);overflow:hidden;background-color:transparent;border:none;border-radius:var(--sbb-options-panel-border-radius);top:var(--sbb-options-panel-position-y);left:var(--sbb-options-panel-position-x);width:var(--sbb-options-panel-width);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}.sbb-select__panel:before,.sbb-select__panel:after{content:"";display:none;position:relative;width:100%;height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);pointer-events:none;transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);z-index:1}:host([data-options-panel-position=below]) .sbb-select__panel{inset-block-start:calc(var(--sbb-options-panel-position-y) - var(--sbb-options-panel-origin-height))}:host(:is([data-state=opened],[data-state=opening])) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[negative]) .sbb-select__panel{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}:host([data-options-panel-position=below]) .sbb-select__panel:before{display:block}:host([data-options-panel-position=above]) .sbb-select__panel:after{display:block}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-1-color)}:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:before,:host(:is([data-state=opened],[data-state=opening])[data-option-panel-origin-borderless][negative]) .sbb-select__panel:after{box-shadow:var(--sbb-shadow-elevation-level-5-shadow-2-offset-x) var(--sbb-shadow-elevation-level-5-shadow-2-offset-y) var(--sbb-shadow-elevation-level-5-shadow-2-blur) var(--sbb-shadow-elevation-level-5-shadow-2-spread) var(--sbb-shadow-elevation-level-5-hard-negative-2-color),var(--sbb-shadow-elevation-level-5-shadow-1-offset-x) var(--sbb-shadow-elevation-level-5-shadow-1-offset-y) var(--sbb-shadow-elevation-level-5-shadow-1-blur) var(--sbb-shadow-elevation-level-5-shadow-1-spread) var(--sbb-shadow-elevation-level-5-hard-negative-1-color)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-spacing-fixed-3x);padding-inline:0;border-radius:var(--sbb-options-panel-options-border-radius);max-height:var(--sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:all;overflow-y:auto;animation-name:var(--sbb-options-panel-animation-name);animation-duration:var(--sbb-options-panel-animation-duration);animation-timing-function:var(--sbb-options-panel-animation-timing-function);padding-block:var(--sbb-spacing-fixed-2x)}.sbb-select__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-select__options::-webkit-scrollbar-thumb{background-color:var(--sbb-scrollbar-color, currentcolor);border:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;border-radius:var(--sbb-border-radius-4x);background-clip:padding-box}.sbb-select__options::-webkit-scrollbar-thumb:hover{background-color:var(--sbb-scrollbar-color-hover, currentcolor);border-width:calc(.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)))}.sbb-select__options::-webkit-scrollbar-button,.sbb-select__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-select__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}@media (forced-colors: active){.sbb-select__options{border:var(--sbb-border-width-1x) solid CanvasText;border-block-start:none}}@keyframes open{0%{transform:var(--sbb-options-panel-animation-transform);opacity:0}to{transform:translateY(0);opacity:1}}@keyframes close{0%{transform:translateY(0);opacity:1}to{transform:var(--sbb-options-panel-animation-transform);opacity:0}}`;
+var D = Object.defineProperty, L = Object.getOwnPropertyDescriptor, r = (e, t, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? L(t, i) : t, n = e.length - 1, l; n >= 0; n--)
+    (l = e[n]) && (o = (s ? l(t, i, o) : l(o)) || o);
+  return s && o && D(t, i, o), o;
+};
+const h = k;
+let T = 0, a = class extends C(
+  A(S(y))
+) {
+  constructor() {
+    super(...arguments), this.multiple = !1, this.required = !1, this.readonly = !1, this._displayValue = null, this._didChange = new p(this, a.events.didChange), this._change = new p(this, a.events.change), this._input = new p(this, a.events.input), this._stateChange = new p(
+      this,
+      a.events.stateChange,
+      {
+        composed: !1
+      }
+    ), this._overlayId = `sbb-select-${++T}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new x(this), this._pointerDownListener = (e) => {
+      this._isPointerDownEventOnMenu = f(this._overlay, e);
+    }, this._closeOnBackdropClick = async (e) => {
+      !this._isPointerDownEventOnMenu && !f(this._overlay, e) && await this.close();
+    };
+  }
+  /**
+   * The 'combobox' input element
+   * @internal
+   */
+  get inputElement() {
+    return this._triggerElement;
+  }
+  /** Gets all the SbbOptionElement projected in the select. */
+  get _options() {
+    var e;
+    return Array.from(((e = this.querySelectorAll) == null ? void 0 : e.call(this, "sbb-option")) ?? []);
+  }
+  get _filteredOptions() {
+    return this._options.filter(
+      (e) => !e.disabled && !e.hasAttribute("data-group-disabled")
+    );
+  }
+  /** Opens the selection panel. */
+  open() {
+    this.state !== "closed" || !this._overlay || this._options.length === 0 || this.willOpen.emit() && (this.state = "opening", this._setOverlayPosition());
+  }
+  /** Closes the selection panel. */
+  close() {
+    this.state === "opened" && this.willClose.emit() && (this.state = "closing", this._openPanelEventsController.abort());
+  }
+  /** Gets the current displayed value. */
+  getDisplayValue() {
+    return this._displayValue ? this._displayValue : "";
+  }
+  /** Listens to option changes. */
+  _onOptionChanged(e) {
+    const t = e.target;
+    t.selected ? this._onOptionSelected(t) : this._onOptionDeselected(t);
+  }
+  _onOptionClick(e) {
+    const t = e.target;
+    t.localName !== "sbb-option" || t.disabled || this.multiple || this.close();
+  }
+  /** Sets the _displayValue by checking the internal sbb-options and setting the correct `selected` value on them. */
+  _onValueChanged(e) {
+    const t = this._filteredOptions;
+    if (Array.isArray(e)) {
+      t.filter((s) => !e.includes(s.value ?? s.getAttribute("value"))).forEach((s) => s.selected = !1);
+      const i = t.filter(
+        (s) => e.includes(s.value ?? s.getAttribute("value"))
+      );
+      i.forEach((s) => s.selected = !0), this._displayValue = i.map((s) => s.textContent).join(", ") || null;
+    } else {
+      const i = t.find((s) => (s.value ?? s.getAttribute("value")) === e);
+      i && (i.selected = !0), t.filter((s) => (s.value ?? s.getAttribute("value")) !== e).forEach((s) => s.selected = !1), this._displayValue = (i == null ? void 0 : i.textContent) || null;
+    }
+    this._stateChange.emit({ type: "value", value: e });
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.focus = () => this._triggerElement.focus(), this.blur = () => this._triggerElement.blur(), u() || (this.startUpdate(), this._setupSelect());
+  }
+  /**
+   * Removes element's first attribute whose qualified name is qualifiedName.
+   *
+   * [MDN Reference](https://developer.mozilla.org/docs/Web/API/Element/removeAttribute)
+   * @internal We need to override this due to a hydration issue with Next.js.
+   */
+  removeAttribute(e) {
+    u() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
+  }
+  connectedCallback() {
+    var i, s;
+    super.connectedCallback(), h && (this.id || (this.id = this._overlayId));
+    const e = this._abort.signal, t = ((i = this.closest) == null ? void 0 : i.call(this, "sbb-form-field")) ?? ((s = this.closest) == null ? void 0 : s.call(this, "[data-form-field]"));
+    t && (this.negative = t.hasAttribute("negative")), this._syncProperties(), this._didLoad && (this._setupOrigin(), this._setupTrigger()), this.value && this._onValueChanged(this.value), this.addEventListener(
+      "optionSelectionChange",
+      (o) => this._onOptionChanged(o),
+      { signal: e }
+    ), this.addEventListener(
+      "click",
+      (o) => {
+        this._onOptionClick(o), this._toggleOpening();
+      },
+      { signal: e }
+    );
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("value") && this._onValueChanged(this.value), (e.has("negative") || e.has("multiple")) && this._syncProperties();
+  }
+  disconnectedCallback() {
+    var e;
+    super.disconnectedCallback(), this.prepend(this._triggerElement), (e = this._openPanelEventsController) == null || e.abort();
+  }
+  _syncProperties() {
+    var e, t;
+    (e = this.querySelectorAll) == null || e.call(this, "sbb-divider").forEach((i) => i.negative = this.negative), (t = this.querySelectorAll) == null || t.call(
+      this,
+      "sbb-option, sbb-optgroup"
+    ).forEach((i) => {
+      i.toggleAttribute("data-negative", this.negative), i.toggleAttribute("data-multiple", this.multiple);
+    });
+  }
+  _setupSelect() {
+    this._setupOrigin(), this._setupTrigger(), this._didLoad = !0, this.completeUpdate();
+  }
+  /** Sets the originElement; if the component is used in a sbb-form-field uses it, otherwise uses the parentElement. */
+  _setupOrigin() {
+    var t, i, s, o;
+    const e = (t = this.closest) == null ? void 0 : t.call(this, "sbb-form-field");
+    this._originElement = ((s = (i = e == null ? void 0 : e.shadowRoot) == null ? void 0 : i.querySelector) == null ? void 0 : s.call(i, "#overlay-anchor")) ?? this.parentElement, this._originElement && this.toggleAttribute(
+      "data-option-panel-origin-borderless",
+      !!((o = e == null ? void 0 : e.hasAttribute) != null && o.call(e, "borderless"))
+    );
+  }
+  /**
+   * To assess screen-readers problems caused by the interaction between aria patterns and shadow DOM,
+   * we are forced to move the 'combobox' trigger element to the light DOM
+   */
+  _setupTrigger() {
+    var t, i, s;
+    (i = (t = this.parentElement).insertBefore) == null || i.call(t, this._triggerElement, this);
+    const e = ((s = this.closest) == null ? void 0 : s.call(this, "sbb-form-field")) ?? this;
+    this._triggerElement.style.top = "0px", this._triggerElement.style.height = `${e.offsetHeight}px`, this._triggerElement.style.width = `${e.offsetWidth}px`;
+  }
+  _setOverlayPosition() {
+    I(
+      this._overlay,
+      this._originElement,
+      this._optionContainer,
+      this.shadowRoot.querySelector(".sbb-select__container"),
+      this
+    );
+  }
+  // In rare cases it can be that the animationEnd event is triggered twice.
+  // To avoid entering a corrupt state, exit when state is not expected.
+  _onAnimationEnd(e) {
+    e.animationName === "open" && this.state === "opening" ? this._onOpenAnimationEnd() : e.animationName === "close" && this.state === "closing" && this._onCloseAnimationEnd();
+  }
+  _onOpenAnimationEnd() {
+    this.state = "opened", this._attachOpenPanelEvents(), this._triggerElement.setAttribute("aria-expanded", "true"), this.didOpen.emit();
+  }
+  _onCloseAnimationEnd() {
+    this.state = "closed", this._triggerElement.setAttribute("aria-expanded", "false"), this._resetActiveElement(), this._optionContainer.scrollTop = 0, this.didClose.emit();
+  }
+  /** When an option is selected, updates the displayValue; it also closes the select if not `multiple`. */
+  _onOptionSelected(e) {
+    this.multiple ? this.value ? this.value.includes(e.value) || (this.value = [...this.value, e.value]) : this.value = [e.value] : (this._filteredOptions.filter((t) => t.id !== e.id).forEach((t) => t.selected = !1), this.value = e.value), this._input.emit(), this._change.emit(), this._didChange.emit();
+  }
+  /** When an option is unselected in `multiple`, removes it from value and updates displayValue. */
+  _onOptionDeselected(e) {
+    this.multiple && (this.value = this.value.filter(
+      (t) => t !== e.value
+    ), this._input.emit(), this._change.emit(), this._didChange.emit());
+  }
+  _attachOpenPanelEvents() {
+    this._openPanelEventsController = new AbortController(), document.addEventListener("scroll", () => this._setOverlayPosition(), {
+      passive: !0,
+      signal: this._openPanelEventsController.signal
+    }), window.addEventListener("resize", () => this._setOverlayPosition(), {
+      passive: !0,
+      signal: this._openPanelEventsController.signal
+    }), window.addEventListener("pointerdown", (e) => this._pointerDownListener(e), {
+      signal: this._openPanelEventsController.signal
+    }), window.addEventListener("pointerup", (e) => this._closeOnBackdropClick(e), {
+      signal: this._openPanelEventsController.signal
+    });
+  }
+  async _onKeyDown(e) {
+    this.disabled || this.readonly || (this.state === "opened" && await this._openedPanelKeyboardInteraction(e), this.state === "closed" && await this._closedPanelKeyboardInteraction(e));
+  }
+  async _closedPanelKeyboardInteraction(e) {
+    if (this._checkForLetterSelection(e))
+      return this._setNextActiveOptionByText(e);
+    switch (e.key) {
+      case "Enter":
+      case " ":
+      case "ArrowDown":
+      case "ArrowUp":
+        e.preventDefault(), await this.open();
+        break;
+    }
+  }
+  async _openedPanelKeyboardInteraction(e) {
+    if (!(this.disabled || this.readonly || this.state !== "opened")) {
+      if (this._checkForLetterSelection(e))
+        return this._setNextActiveOptionByText(e);
+      switch (e.key) {
+        case "Escape":
+        case "Tab":
+          await this.close();
+          break;
+        case "Enter":
+        case " ":
+          e.preventDefault(), await this._selectByKeyboard();
+          break;
+        case "ArrowDown":
+        case "ArrowUp":
+          e.preventDefault(), await this._setNextActiveOption(e);
+          break;
+        case "Home":
+        case "PageUp":
+          e.preventDefault(), await this._setNextActiveOption(e, 0);
+          break;
+        case "End":
+        case "PageDown":
+          e.preventDefault(), await this._setNextActiveOption(e, this._filteredOptions.length - 1);
+          break;
+      }
+    }
+  }
+  _checkForLetterSelection(e) {
+    return e.key === "Backspace" || e.key === "Clear" || e.key.length === 1 && e.key !== " " && !e.altKey && !e.ctrlKey && !e.metaKey;
+  }
+  async _setNextActiveOptionByText(e) {
+    typeof this._searchTimeout == typeof setTimeout && clearTimeout(this._searchTimeout), this._searchTimeout = setTimeout(() => this._searchString = "", 1e3), this._searchString += e.key;
+    const t = this._activeItemIndex + 1, i = [
+      ...this._filteredOptions.slice(t),
+      ...this._filteredOptions.slice(0, t)
+    ], s = i.find(
+      (o) => {
+        var n;
+        return ((n = o.textContent) == null ? void 0 : n.toLowerCase().indexOf(this._searchString.toLowerCase())) === 0;
+      }
+    );
+    if (s)
+      await this._setNextActiveOption(e, this._filteredOptions.indexOf(s));
+    else if (this._searchString.length > 1 && new RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)) {
+      const o = i.find(
+        (n) => {
+          var l;
+          return ((l = n.textContent) == null ? void 0 : l.toLowerCase().indexOf(this._searchString[0].toLowerCase())) === 0;
+        }
+      );
+      o && await this._setNextActiveOption(e, this._filteredOptions.indexOf(o));
+    } else
+      clearTimeout(this._searchTimeout), this._searchString = "";
+  }
+  async _selectByKeyboard() {
+    const e = this._filteredOptions[this._activeItemIndex];
+    this.multiple ? await e.setSelectedViaUserInteraction(!e.selected) : await this.close();
+  }
+  async _setNextActiveOption(e, t) {
+    const i = t ?? w(e, this._activeItemIndex, this._filteredOptions.length), s = this._filteredOptions[i], o = this._filteredOptions[this._activeItemIndex];
+    this._setActiveElement(s, o), this.multiple ? e != null && e.shiftKey && await s.setSelectedViaUserInteraction(!s.selected) : await this._setSelectedElement(s, o), this._activeItemIndex = i;
+  }
+  _setActiveElement(e, t = null, i = !0) {
+    e.active = !0, e.scrollIntoView({ block: "nearest" }), i && this._triggerElement.setAttribute("aria-activedescendant", e.id), t && t !== e && (t.active = !1);
+  }
+  async _setSelectedElement(e, t) {
+    await e.setSelectedViaUserInteraction(!0), t && t !== e && await t.setSelectedViaUserInteraction(!1);
+  }
+  _resetActiveElement() {
+    const e = this._filteredOptions[this._activeItemIndex];
+    e && (e.active = !1), this._activeItemIndex = -1, this._triggerElement.removeAttribute("aria-activedescendant");
+  }
+  _setValueFromSelectedOption() {
+    if (this.multiple) {
+      const e = this._filteredOptions.filter((t) => t.selected);
+      if (e && e.length > 0) {
+        const t = [];
+        for (const i of e)
+          t.push(i.value);
+        this.value = t;
+      }
+    } else {
+      const e = this._filteredOptions.find((t) => t.selected);
+      e && (this._activeItemIndex = this._filteredOptions.findIndex(
+        (t) => t === e
+      ), this.value = e.value);
+    }
+  }
+  _toggleOpening() {
+    var e;
+    if (!(this.disabled || this.readonly))
+      switch ((e = this._triggerElement) == null || e.focus(), this.state) {
+        case "opened": {
+          this.close();
+          break;
+        }
+        case "closed": {
+          this.open();
+          break;
+        }
+      }
+  }
+  render() {
+    return b`
+      <!-- This element is visually hidden and will be appended to the light DOM to allow screen
+      readers to work properly -->
+      <div
+        class="sbb-screen-reader-only"
+        tabindex=${this.disabled ? c : "0"}
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded="false"
+        aria-required=${this.required.toString()}
+        aria-controls=${this._overlayId}
+        aria-owns=${this._overlayId}
+        @keydown=${this._onKeyDown}
+        @click=${this._toggleOpening}
+        ${v((e) => this._triggerElement = e)}
+      >
+        ${this._displayValue ? b`${this._displayValue}` : b`<span>${this.placeholder}</span>`}
+      </div>
+
+      <!-- Visually display the value -->
+      <div class="sbb-select__trigger" aria-hidden="true">
+        ${this._displayValue ? b`${this._displayValue}` : b`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`}
+      </div>
+
+      <div class="sbb-select__gap-fix"></div>
+      <div class="sbb-select__container">
+        <div class="sbb-select__gap-fix">${P()}</div>
+        <div
+          @animationend=${this._onAnimationEnd}
+          class="sbb-select__panel"
+          ${v((e) => this._overlay = e)}
+        >
+          <div class="sbb-select__wrapper">
+            <div
+              id=${h ? c : this._overlayId}
+              class="sbb-select__options"
+              role=${h ? c : "listbox"}
+              ?aria-multiselectable=${this.multiple}
+              ${v((e) => this._optionContainer = e)}
+            >
+              <slot @slotchange=${this._setValueFromSelectedOption}></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+a.styles = $;
+a.events = {
+  didChange: "didChange",
+  change: "change",
+  input: "input",
+  stateChange: "stateChange",
+  willOpen: "willOpen",
+  didOpen: "didOpen",
+  willClose: "willClose",
+  didClose: "didClose"
+};
+r([
+  d()
+], a.prototype, "value", 2);
+r([
+  d()
+], a.prototype, "placeholder", 2);
+r([
+  d({ type: Boolean, reflect: !0 })
+], a.prototype, "multiple", 2);
+r([
+  d({ reflect: !0, type: Boolean })
+], a.prototype, "required", 2);
+r([
+  d({ type: Boolean })
+], a.prototype, "readonly", 2);
+r([
+  g()
+], a.prototype, "_displayValue", 2);
+a = r([
+  m("sbb-select"),
+  E({
+    dir: O(),
+    role: h ? "listbox" : null
+  })
+], a);
+export {
+  a as SbbSelectElement
+};

package/selection-panel/selection-panel.d.ts

@@ -0,0 +1,63 @@
+import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
+
+/**
+ * It displays an expandable panel connected to a `sbb-checkbox` or to a `sbb-radio-button`.
+ *
+ * @slot - Use the unnamed slot to add `sbb-checkbox` or `sbb-radio-button` elements to the `sbb-selection-panel`.
+ * @slot badge - Use this slot to provide a `sbb-card-badge` (optional).
+ * @slot content - Use this slot to provide custom content for the panel (optional).
+ * @event {CustomEvent<void>} willOpen - Emits whenever the content section starts the opening transition.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the content section is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the content section begins the closing transition.
+ * @event {CustomEvent<void>} didClose - Emits whenever the content section is closed.
+ */
+export declare class SbbSelectionPanelElement extends LitElement {
+    static styles: CSSResultGroup;
+    static readonly events: Record<string, string>;
+    /** The background color of the panel. */
+    color: 'white' | 'milk';
+    /** Whether the content section is always visible. */
+    forceOpen: boolean;
+    /** Whether the unselected panel has a border. */
+    borderless: boolean;
+    /** The state of the selection panel. */
+    private set _state(value);
+    private get _state();
+    /** Whether the selection panel is checked. */
+    private set _checked(value);
+    private get _checked();
+    /** Whether the selection panel is disabled. */
+    private set _disabled(value);
+    /** Emits whenever the content section starts the opening transition. */
+    private _willOpen;
+    /** Emits whenever the content section is opened. */
+    private _didOpen;
+    /** Emits whenever the content section begins the closing transition. */
+    private _willClose;
+    /** Emits whenever the content section is closed. */
+    private _didClose;
+    private _abort;
+    private _initialized;
+    /**
+     * Whether it has an expandable content
+     * @internal
+     */
+    get hasContent(): boolean;
+    constructor();
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    private _updateState;
+    private _open;
+    private _close;
+    private _initFromInput;
+    private _onInputStateChange;
+    private _onAnimationEnd;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-selection-panel': SbbSelectionPanelElement;
+    }
+}
+//# sourceMappingURL=selection-panel.d.ts.map

package/selection-panel/selection-panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"selection-panel.d.ts","sourceRoot":"","sources":["../../../src/elements/selection-panel/selection-panel.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAWvC,OAAO,eAAe,CAAC;AAEvB;;;;;;;;;;GAUG;AACH,qBACa,wBAAyB,SAAQ,UAAU;IAEtD,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,CAK1C;IAEX,yCAAyC;IACtB,KAAK,EAAE,OAAO,GAAG,MAAM,CAAW;IAErD,qDAAqD;IACQ,SAAS,UAAS;IAE/E,iDAAiD;IACE,UAAU,UAAS;IAEtE,wCAAwC;IAExC,OAAO,KAAK,MAAM,QAEjB;IACD,OAAO,KAAK,MAAM,GAEjB;IAED,8CAA8C;IAC9C,OAAO,KAAK,QAAQ,QAEnB;IACD,OAAO,KAAK,QAAQ,GAEnB;IAED,+CAA+C;IAC/C,OAAO,KAAK,SAAS,QAEpB;IAED,wEAAwE;IACxE,OAAO,CAAC,SAAS,CAGf;IAEF,oDAAoD;IACpD,OAAO,CAAC,QAAQ,CAGd;IAEF,wEAAwE;IACxE,OAAO,CAAC,UAAU,CAGhB;IAEF,oDAAoD;IACpD,OAAO,CAAC,SAAS,CAGf;IAEF,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,YAAY,CAAkB;IAEtC;;;OAGG;IACH,IAAW,UAAU,IAAI,OAAO,CAG/B;;IAOe,iBAAiB,IAAI,IAAI;cAStB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cAQzD,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,YAAY;IAQpB,OAAO,CAAC,KAAK;IAcb,OAAO,CAAC,MAAM;IASd,OAAO,CAAC,cAAc;IAYtB,OAAO,CAAC,mBAAmB;IAkB3B,OAAO,CAAC,eAAe;cAUJ,MAAM,IAAI,cAAc;CAuB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,qBAAqB,EAAE,wBAAwB,CAAC;KACjD;CACF"}

package/selection-panel.d.ts

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

package/selection-panel.d.ts.map

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

package/selection-panel.js

@@ -0,0 +1,138 @@
+import { css as p, LitElement as c, html as h } from "lit";
+import { property as d, state as u, customElement as v } from "lit/decorators.js";
+import { SbbConnectedAbortController as m, SbbSlotStateController as _ } from "./core/controllers.js";
+import { EventEmitter as o } from "./core/eventing.js";
+import "./divider.js";
+const g = p`*,:before,:after{box-sizing:border-box}:host{--sbb-selection-panel-cursor: pointer;--sbb-selection-panel-background: var(--sbb-color-white);--sbb-selection-panel-border-color: var(--sbb-color-cloud);--sbb-selection-panel-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x) );--sbb-selection-panel-border-width: var(--sbb-border-width-1x);--sbb-selection-panel-input-pointer-events: all;--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-content-visibility: hidden;--sbb-selection-panel-content-padding-inline: var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-border-radius: var(--sbb-border-radius-4x);--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);display:contents}:host([color=milk]){--sbb-selection-panel-background: var(--sbb-color-milk)}:host([data-checked]:not([data-disabled])){--sbb-selection-panel-border-color: var(--sbb-color-charcoal);--sbb-selection-panel-border-width: var(--sbb-border-width-2x)}:host([data-slot-names~=content][data-disabled]){--sbb-selection-panel-input-pointer-events: none;--sbb-selection-panel-border-color: var(--sbb-color-cloud)}:host([data-disabled]){--sbb-selection-panel-cursor: default}:host([borderless]:not([data-checked])){--sbb-selection-panel-border-color: transparent}:host([data-resize-disable-animation]){--sbb-disable-animation-time: .1ms;--sbb-disable-animation-zero-time: 0s}:host([data-slot-names~=content]:where([data-state=opening],[data-state=opened])){--sbb-selection-panel-input-padding: var(--sbb-spacing-responsive-xs) var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxs) var(--sbb-spacing-responsive-xxs);--sbb-selection-panel-content-visibility: visible;--sbb-selection-panel-content-grid-template-rows: 1fr;--sbb-selection-panel-content-opacity: 1;--sbb-selection-panel-content-padding-block-end: var(--sbb-spacing-responsive-xs);--sbb-selection-panel-content-transition: grid-template-rows var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-selection-panel-animation-duration) var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing)}.sbb-selection-panel{flex:auto;position:relative;width:100%;background-color:var(--sbb-selection-panel-background);border-radius:var(--sbb-selection-panel-border-radius);box-shadow:inset 0 0 0 var(--sbb-selection-panel-border-width) var(--sbb-selection-panel-border-color);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:box-shadow}@media (forced-colors: active){.sbb-selection-panel:after{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none;border:var(--sbb-selection-panel-border-width) solid var(--sbb-selection-panel-border-color);border-radius:var(--sbb-selection-panel-border-radius)}}.sbb-selection-panel__badge{-webkit-user-select:none;user-select:none;pointer-events:none;position:absolute;top:0;right:0;bottom:0;left:0;border-radius:var(--sbb-selection-panel-border-radius);overflow:hidden}.sbb-selection-panel__content--wrapper{display:grid;visibility:var(--sbb-selection-panel-content-visibility);grid-template-rows:0fr;opacity:0}:host([data-state=opened]) .sbb-selection-panel__content--wrapper{grid-template-rows:1fr;opacity:1}:host([data-state=opening]) .sbb-selection-panel__content--wrapper{animation-name:open,open-opacity;animation-fill-mode:forwards;animation-duration:var(--sbb-selection-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing);animation-delay:0s,var(--sbb-selection-panel-animation-duration)}:host([data-state=closing]) .sbb-selection-panel__content--wrapper{animation-name:close;animation-duration:var(--sbb-selection-panel-animation-duration);animation-timing-function:var(--sbb-animation-easing)}:host(:not([data-slot-names~=content])) .sbb-selection-panel__content--wrapper{display:none}.sbb-selection-panel__content{overflow:hidden;padding-inline:var(--sbb-selection-panel-content-padding-inline);padding-block-end:var(--sbb-selection-panel-content-padding-block-end);transition:padding var(--sbb-selection-panel-animation-duration) var(--sbb-animation-easing)}sbb-divider{margin-block-end:var(--sbb-spacing-responsive-xxs)}::slotted(sbb-radio-button),::slotted(sbb-checkbox){cursor:var(--sbb-selection-panel-cursor);pointer-events:var(--sbb-selection-panel-input-pointer-events);display:block;padding:var(--sbb-selection-panel-input-padding);transition-duration:var(--sbb-selection-panel-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:padding}@keyframes open{0%{grid-template-rows:0fr}to{grid-template-rows:1fr}}@keyframes open-opacity{0%{opacity:0}to{opacity:1}}@keyframes close{0%{grid-template-rows:1fr;opacity:1}to{grid-template-rows:0fr;opacity:0}}`;
+var f = Object.defineProperty, w = Object.getOwnPropertyDescriptor, s = (e, n, r, a) => {
+  for (var i = a > 1 ? void 0 : a ? w(n, r) : n, l = e.length - 1, b; l >= 0; l--)
+    (b = e[l]) && (i = (a ? b(n, r, i) : b(i)) || i);
+  return a && i && f(n, r, i), i;
+};
+let t = class extends c {
+  constructor() {
+    super(), this.color = "white", this.forceOpen = !1, this.borderless = !1, this._willOpen = new o(
+      this,
+      t.events.willOpen
+    ), this._didOpen = new o(
+      this,
+      t.events.didOpen
+    ), this._willClose = new o(
+      this,
+      t.events.willClose
+    ), this._didClose = new o(
+      this,
+      t.events.didClose
+    ), this._abort = new m(this), this._initialized = !1, new _(this);
+  }
+  set _state(e) {
+    this.setAttribute("data-state", e);
+  }
+  get _state() {
+    return this.getAttribute("data-state");
+  }
+  /** Whether the selection panel is checked. */
+  set _checked(e) {
+    this.toggleAttribute("data-checked", e);
+  }
+  get _checked() {
+    return this.hasAttribute("data-checked");
+  }
+  /** Whether the selection panel is disabled. */
+  set _disabled(e) {
+    this.toggleAttribute("data-disabled", e);
+  }
+  /**
+   * Whether it has an expandable content
+   * @internal
+   */
+  get hasContent() {
+    var e;
+    return ((e = this.querySelectorAll) == null ? void 0 : e.call(this, '[slot="content"]').length) > 0;
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._state || (this._state = "closed");
+    const e = this._abort.signal;
+    this.addEventListener("stateChange", this._onInputStateChange.bind(this), { signal: e }), this.addEventListener("checkboxLoaded", this._initFromInput.bind(this), { signal: e }), this.addEventListener("radioButtonLoaded", this._initFromInput.bind(this), { signal: e });
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("forceOpen") && this._updateState();
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this._initialized = !0;
+  }
+  _updateState() {
+    this.hasContent && (this.forceOpen || this._checked ? this._open(!this._initialized) : this._close());
+  }
+  _open(e = !1) {
+    this._state !== "closed" && this._state !== "closing" || (this._state = "opening", this._willOpen.emit(), e && (this._state = "opened", this._didOpen.emit()));
+  }
+  _close() {
+    this._state !== "opened" && this._state !== "opening" || (this._state = "closing", this._willClose.emit());
+  }
+  _initFromInput(e) {
+    const n = e.target;
+    n.isSelectionPanelInput && (this._checked = n.checked, this._disabled = n.disabled, this._updateState());
+  }
+  _onInputStateChange(e) {
+    if (e.target.isSelectionPanelInput) {
+      if (e.detail.type === "disabled") {
+        this._disabled = e.detail.disabled;
+        return;
+      } else if (e.detail.type !== "checked")
+        return;
+      this._checked = e.detail.checked, this._updateState();
+    }
+  }
+  _onAnimationEnd(e) {
+    e.animationName === "open-opacity" && this._state === "opening" ? (this._state = "opened", this._didOpen.emit()) : e.animationName === "close" && this._state === "closing" && (this._state = "closed", this._didClose.emit());
+  }
+  render() {
+    return h`
+      <div class="sbb-selection-panel">
+        <div class="sbb-selection-panel__badge">
+          <slot name="badge"></slot>
+        </div>
+
+        <div class="sbb-selection-panel__input">
+          <slot></slot>
+        </div>
+        <div
+          class="sbb-selection-panel__content--wrapper"
+          .inert=${this._state !== "opened"}
+          @animationend=${(e) => this._onAnimationEnd(e)}
+        >
+          <div class="sbb-selection-panel__content">
+            <sbb-divider></sbb-divider>
+            <slot name="content"></slot>
+          </div>
+        </div>
+      </div>
+    `;
+  }
+};
+t.styles = g;
+t.events = {
+  willOpen: "willOpen",
+  didOpen: "didOpen",
+  willClose: "willClose",
+  didClose: "didClose"
+};
+s([
+  d()
+], t.prototype, "color", 2);
+s([
+  d({ attribute: "force-open", type: Boolean })
+], t.prototype, "forceOpen", 2);
+s([
+  d({ reflect: !0, type: Boolean })
+], t.prototype, "borderless", 2);
+s([
+  u()
+], t.prototype, "_state", 1);
+t = s([
+  v("sbb-selection-panel")
+], t);
+export {
+  t as SbbSelectionPanelElement
+};

package/signet/signet.d.ts

@@ -0,0 +1,20 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+import { SbbProtectiveRoom } from '../core/interfaces.js';
+
+/**
+ * It displays the SBB signet.
+ */
+export declare class SbbSignetElement extends LitElement {
+    static styles: CSSResultGroup;
+    /** Visual protective room around signet. */
+    protectiveRoom?: SbbProtectiveRoom;
+    /** Accessibility label which will be forwarded to the inner SVG signet. */
+    accessibilityLabel: string;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-signet': SbbSignetElement;
+    }
+}
+//# sourceMappingURL=signet.d.ts.map

package/signet/signet.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"signet.d.ts","sourceRoot":"","sources":["../../../src/elements/signet/signet.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAGvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC;AAI/D;;GAEG;AACH,qBACa,gBAAiB,SAAQ,UAAU;IAC9C,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,4CAA4C;IAErC,cAAc,CAAC,EAAE,iBAAiB,CAAW;IAEpD,2EAA2E;IACpB,kBAAkB,SAAU;cAEhE,MAAM,IAAI,cAAc;CAe5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}