@sbb-esta/lyne-elements 0.0.0 → 0.52.0

package/radio-button/radio-button-group.d.ts.map

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

package/radio-button/radio-button-group.js

@@ -0,0 +1,161 @@
+import { css as u, LitElement as c, html as p } from "lit";
+import { property as l, customElement as m } from "lit/decorators.js";
+import { isArrowKeyPressed as g, getNextElementIndex as f } from "../core/a11y.js";
+import { SbbConnectedAbortController as _, SbbSlotStateController as v } from "../core/controllers.js";
+import { hostAttributes as w } from "../core/decorators.js";
+import { EventEmitter as b } from "../core/eventing.js";
+import { SbbDisabledMixin as x } from "../core/mixins.js";
+const y = u`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-group-orientation: row;--sbb-radio-button-group-width: max-content;--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);display:block}:host([orientation=vertical]){--sbb-radio-button-group-orientation: column;--sbb-radio-button-group-width: 100%}:host([data-has-selection-panel]){--sbb-radio-button-group-width: 100%}:host([data-has-selection-panel][orientation=vertical]){--sbb-radio-button-group-gap: var(--sbb-spacing-fixed-2x) var(--sbb-spacing-fixed-4x)}@media (min-width: 0rem){:host([orientation=vertical][horizontal-from=zero]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=zero]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 22.5rem){:host([orientation=vertical][horizontal-from=micro]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=micro]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 37.5rem){:host([orientation=vertical][horizontal-from=small]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=small]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 52.5rem){:host([orientation=vertical][horizontal-from=medium]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=medium]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 64rem){:host([orientation=vertical][horizontal-from=large]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=large]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 80rem){:host([orientation=vertical][horizontal-from=wide]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=wide]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}@media (min-width: 90rem){:host([orientation=vertical][horizontal-from=ultra]){--sbb-radio-button-group-orientation: row}:host([orientation=vertical][horizontal-from=ultra]:not([data-has-selection-panel])){--sbb-radio-button-group-width: max-content}}.sbb-radio-group{display:flex;flex-direction:var(--sbb-radio-button-group-orientation);gap:var(--sbb-radio-button-group-gap);align-items:flex-start;width:var(--sbb-radio-button-group-width)}.sbb-radio-group__error{display:inline-block;margin-block-start:var(--sbb-spacing-fixed-1x)}:host(:not([data-slot-names~=error])) .sbb-radio-group__error{display:none}`;
+var C = Object.defineProperty, S = Object.getOwnPropertyDescriptor, r = (t, e, o, i) => {
+  for (var n = i > 1 ? void 0 : i ? S(e, o) : e, s = t.length - 1, d; s >= 0; s--)
+    (d = t[s]) && (n = (i ? d(e, o, n) : d(n)) || n);
+  return i && n && C(e, o, n), n;
+};
+let a = class extends x(c) {
+  constructor() {
+    super(), this.allowEmptySelection = !1, this.required = !1, this.size = "m", this.orientation = "horizontal", this._hasSelectionPanel = !1, this._didLoad = !1, this._abort = new _(this), this._didChange = new b(
+      this,
+      a.events.didChange
+    ), this._change = new b(
+      this,
+      a.events.change
+    ), this._input = new b(
+      this,
+      a.events.input
+    ), new v(this);
+  }
+  /**
+   * List of contained radio buttons.
+   */
+  get radioButtons() {
+    var t;
+    return Array.from(((t = this.querySelectorAll) == null ? void 0 : t.call(this, "sbb-radio-button")) ?? []).filter((e) => {
+      var o;
+      return ((o = e.closest) == null ? void 0 : o.call(e, "sbb-radio-button-group")) === this;
+    });
+  }
+  get _enabledRadios() {
+    if (!this.disabled)
+      return this.radioButtons.filter((t) => !t.disabled);
+  }
+  _valueChanged(t) {
+    for (const e of this.radioButtons)
+      e.checked = e.value === t, e.tabIndex = this._getRadioTabIndex(e);
+    this._setFocusableRadio();
+  }
+  connectedCallback() {
+    var e;
+    super.connectedCallback();
+    const t = this._abort.signal;
+    this.addEventListener(
+      "stateChange",
+      (o) => this._onRadioButtonSelect(o),
+      {
+        signal: t,
+        passive: !0
+      }
+    ), this.addEventListener("keydown", (o) => this._handleKeyDown(o), { signal: t }), this._hasSelectionPanel = !!((e = this.querySelector) != null && e.call(this, "sbb-selection-panel")), this.toggleAttribute("data-has-selection-panel", this._hasSelectionPanel), this._updateRadios(this.value);
+  }
+  willUpdate(t) {
+    var e;
+    if (super.willUpdate(t), t.has("value") && this._valueChanged(this.value), t.has("disabled")) {
+      for (const o of this.radioButtons)
+        o.tabIndex = this._getRadioTabIndex(o), (e = o.requestUpdate) == null || e.call(o, "disabled");
+      this._setFocusableRadio();
+    }
+    t.has("required") && this.radioButtons.forEach((o) => {
+      var i;
+      return (i = o.requestUpdate) == null ? void 0 : i.call(o, "required");
+    }), t.has("size") && this.radioButtons.forEach((o) => {
+      var i;
+      return (i = o.requestUpdate) == null ? void 0 : i.call(o, "size");
+    });
+  }
+  firstUpdated(t) {
+    super.firstUpdated(t), this._didLoad = !0, this._updateRadios(this.value);
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+  }
+  _onRadioButtonSelect(t) {
+    var o;
+    if (t.stopPropagation(), t.detail.type !== "checked" || !this._didLoad)
+      return;
+    const e = t.target;
+    t.detail.checked ? (this.value = e.value, this._emitChange(e, this.value)) : this.allowEmptySelection && (this.value = (o = this.radioButtons.find((i) => i.checked)) == null ? void 0 : o.value, this.value || this._emitChange(e));
+  }
+  _emitChange(t, e) {
+    this._change.emit({ value: e, radioButton: t }), this._input.emit({ value: e, radioButton: t }), this._didChange.emit({ value: e, radioButton: t });
+  }
+  _updateRadios(t) {
+    var o;
+    if (!this._didLoad)
+      return;
+    const e = this.radioButtons;
+    this.value = t ?? ((o = e.find((i) => i.checked)) == null ? void 0 : o.value) ?? this.value;
+    for (const i of e)
+      i.checked = i.value === this.value, i.tabIndex = this._getRadioTabIndex(i);
+    this._setFocusableRadio();
+  }
+  _setFocusableRadio() {
+    const t = this.radioButtons.find((o) => o.checked && !o.disabled), e = this._enabledRadios;
+    !t && (e != null && e.length) && (e[0].tabIndex = 0);
+  }
+  _getRadioTabIndex(t) {
+    var i;
+    const e = t.checked && !t.disabled && !this.disabled, o = ((i = t.parentElement) == null ? void 0 : i.nodeName) === "SBB-SELECTION-PANEL" && t.parentElement.hasContent;
+    return e || this._hasSelectionPanel && o ? 0 : -1;
+  }
+  _handleKeyDown(t) {
+    var s, d;
+    const e = this._enabledRadios;
+    if (!e || !e.length || // don't trap nested handling
+    t.target !== this && t.target.parentElement !== this && ((s = t.target.parentElement) == null ? void 0 : s.nodeName) !== "SBB-SELECTION-PANEL" || !g(t))
+      return;
+    const o = e.findIndex((h) => h === t.target), i = f(t, o, e.length), n = (Array.from((d = this.querySelectorAll) == null ? void 0 : d.call(this, "sbb-selection-panel")) || []).every((h) => !h.hasContent);
+    (!this._hasSelectionPanel || this._hasSelectionPanel && n) && e[i].select(), e[i].focus(), t.preventDefault();
+  }
+  render() {
+    return p`
+      <div class="sbb-radio-group">
+        <slot @slotchange=${() => this._updateRadios()}></slot>
+      </div>
+      <div class="sbb-radio-group__error">
+        <slot name="error"></slot>
+      </div>
+    `;
+  }
+};
+a.styles = y;
+a.events = {
+  didChange: "didChange",
+  change: "change",
+  input: "input"
+};
+r([
+  l({ attribute: "allow-empty-selection", type: Boolean })
+], a.prototype, "allowEmptySelection", 2);
+r([
+  l({ type: Boolean })
+], a.prototype, "required", 2);
+r([
+  l()
+], a.prototype, "value", 2);
+r([
+  l()
+], a.prototype, "size", 2);
+r([
+  l({ attribute: "horizontal-from", reflect: !0 })
+], a.prototype, "horizontalFrom", 2);
+r([
+  l({ reflect: !0 })
+], a.prototype, "orientation", 2);
+a = r([
+  m("sbb-radio-button-group"),
+  w({
+    role: "radiogroup"
+  })
+], a);
+export {
+  a as SbbRadioButtonGroupElement
+};

package/radio-button/radio-button.d.ts

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

package/radio-button/radio-button.d.ts.map

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

package/radio-button/radio-button.js

@@ -0,0 +1,167 @@
+import { css as p, LitElement as f, html as n, nothing as b } from "lit";
+import { property as r, state as h, customElement as v } from "lit/decorators.js";
+import { SbbConnectedAbortController as m, SbbLanguageController as g, SbbSlotStateController as _ } from "../core/controllers.js";
+import { hostAttributes as y } from "../core/decorators.js";
+import { setOrRemoveAttribute as x } from "../core/dom.js";
+import { EventEmitter as u, HandlerRepository as k, formElementHandlerAspect as w } from "../core/eventing.js";
+import { i18nExpanded as E, i18nCollapsed as S } from "../core/i18n.js";
+import { SbbUpdateSchedulerMixin as z } from "../core/mixins.js";
+const C = p`*,:before,:after{box-sizing:border-box}:host{--sbb-radio-button-label-color: var(--sbb-color-charcoal);--sbb-radio-button-background-color: var(--sbb-color-white);--sbb-radio-button-inner-circle-color: var(--sbb-color-white);--sbb-radio-button-border-width: var(--sbb-border-width-1x);--sbb-radio-button-border-style: solid;--sbb-radio-button-border-color: var(--sbb-color-smoke);--sbb-radio-button-dimension: var(--sbb-size-icon-ui-small);--sbb-radio-button-inner-circle-dimension: .625rem;--sbb-radio-button-suffix-color: var(--sbb-color-charcoal);--sbb-radio-button-subtext-color: var(--sbb-color-granite);--sbb-radio-button-cursor: pointer;--sbb-radio-button-background-fake-border-width: calc(var(--sbb-radio-button-dimension) / 2);--sbb-radio-button-icon-align: calc( (1em * var(--sbb-typo-line-height-body-text) - var(--sbb-radio-button-dimension)) / 2 );display:block;outline:none!important}@media (forced-colors: active){:host{--sbb-radio-button-background-color: Canvas !important;--sbb-radio-button-border-width: var(--sbb-border-width-2x);--sbb-radio-button-border-color: ButtonBorder}}:host(:focus-visible[data-is-selection-panel-input]){outline:none!important}:host(:focus-visible[data-is-selection-panel-input]) .sbb-radio-button:after{content:"";position:absolute;display:block;inset-block:calc(var(--sbb-spacing-responsive-xs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);inset-inline:calc(var(--sbb-spacing-responsive-xxs) * -1 + var(--sbb-focus-outline-width) - var(--sbb-focus-outline-offset) * 2);border:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-focus-outline-offset))}:host([checked]){--sbb-radio-button-inner-circle-color: var(--sbb-color-red);--sbb-radio-button-background-fake-border-width: calc( (var(--sbb-radio-button-dimension) - var(--sbb-radio-button-inner-circle-dimension)) / 2 )}@media (forced-colors: active){:host([checked]){--sbb-radio-button-inner-circle-color: Highlight;--sbb-radio-button-border-color: Highlight}}:host([disabled]){--sbb-radio-button-label-color: var(--sbb-color-granite);--sbb-radio-button-background-color: var(--sbb-color-milk);--sbb-radio-button-border-style: dashed;--sbb-radio-button-inner-circle-color: var(--sbb-color-charcoal);--sbb-radio-button-cursor: default}@media (forced-colors: active){:host([disabled]){--sbb-radio-button-inner-circle-color: GrayText;--sbb-radio-button-border-color: GrayText;--sbb-radio-button-border-style: solid}}.sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-m);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size);display:block;cursor:var(--sbb-radio-button-cursor);-webkit-user-select:none;user-select:none;position:relative;color:var(--sbb-radio-button-label-color);-webkit-tap-highlight-color:transparent}:host([size=s]) .sbb-radio-button{--sbb-text-font-size: var(--sbb-font-size-text-s);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-body-text);letter-spacing:var(--sbb-typo-letter-spacing-body-text);font-size:var(--sbb-text-font-size)}:host(:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch],[data-is-selection-panel-input])) .sbb-radio-button{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}slot[name=suffix]{color:var(--sbb-radio-button-suffix-color)}slot[name=subtext]{display:block;color:var(--sbb-radio-button-subtext-color);padding-inline-start:var(--sbb-spacing-fixed-8x)}:host(:not([data-slot-names~=subtext])) slot[name=subtext]{display:none}.sbb-radio-button__label-slot{display:flex;align-items:flex-start;overflow:hidden}.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{content:"";flex-shrink:0;width:var(--sbb-radio-button-dimension);height:var(--sbb-radio-button-dimension);border-radius:50%;margin-block-start:var(--sbb-radio-button-icon-align);transition-duration:var(--sbb-disable-animation-zero-time, var(--sbb-animation-duration-4x));transition-timing-function:ease;transition-property:background-color,border}@media (forced-colors: active){.sbb-radio-button__label-slot:before,.sbb-radio-button__label-slot:after{transition:none}}.sbb-radio-button__label-slot:before{background:var(--sbb-radio-button-inner-circle-color);border:var(--sbb-radio-button-background-fake-border-width) solid var(--sbb-radio-button-background-color);margin-inline-end:var(--sbb-spacing-fixed-2x)}.sbb-radio-button__label-slot:after{position:absolute;border:var(--sbb-radio-button-border-width) var(--sbb-radio-button-border-style) var(--sbb-radio-button-border-color)}.sbb-screen-reader-only{border:0;clip:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}`;
+var P = Object.defineProperty, L = Object.getOwnPropertyDescriptor, i = (e, o, l, a) => {
+  for (var s = a > 1 ? void 0 : a ? L(o, l) : o, d = e.length - 1, c; d >= 0; d--)
+    (c = e[d]) && (s = (a ? c(o, l, s) : c(s)) || s);
+  return a && s && P(o, l, s), s;
+};
+let t = class extends z(f) {
+  constructor() {
+    super(), this._allowEmptySelection = !1, this._disabled = !1, this._required = !1, this._group = null, this._checked = !1, this._size = "m", this._isSelectionPanelInput = !1, this._selectionPanelElement = null, this._abort = new m(this), this._language = new g(this), this._stateChange = new u(
+      this,
+      t.events.stateChange,
+      { bubbles: !0 }
+    ), this._radioButtonLoaded = new u(
+      this,
+      t.events.radioButtonLoaded,
+      { bubbles: !0 }
+    ), this._handlerRepository = new k(this, w), new _(this);
+  }
+  set allowEmptySelection(e) {
+    this._allowEmptySelection = !!e;
+  }
+  get allowEmptySelection() {
+    var e;
+    return this._allowEmptySelection || (((e = this.group) == null ? void 0 : e.allowEmptySelection) ?? !1);
+  }
+  set disabled(e) {
+    this._disabled = !!e;
+  }
+  get disabled() {
+    var e;
+    return this._disabled || (((e = this.group) == null ? void 0 : e.disabled) ?? !1);
+  }
+  set required(e) {
+    this._required = !!e;
+  }
+  get required() {
+    var e;
+    return this._required || (((e = this.group) == null ? void 0 : e.required) ?? !1);
+  }
+  /**
+   * Reference to the connected radio button group.
+   */
+  get group() {
+    return this._group;
+  }
+  set checked(e) {
+    this._checked = !!e;
+  }
+  get checked() {
+    return this._checked;
+  }
+  set size(e) {
+    this._size = e;
+  }
+  get size() {
+    var e;
+    return ((e = this.group) == null ? void 0 : e.size) ?? this._size;
+  }
+  /**
+   * Whether the input is the main input of a selection panel.
+   * @internal
+   */
+  get isSelectionPanelInput() {
+    return this._isSelectionPanelInput;
+  }
+  _handleClick(e) {
+    e.preventDefault(), this.select();
+  }
+  select() {
+    this.disabled || (this.allowEmptySelection ? this.checked = !this.checked : this.checked || (this.checked = !0));
+  }
+  connectedCallback() {
+    super.connectedCallback(), this._group = this.closest("sbb-radio-button-group"), this._selectionPanelElement = this.closest("sbb-selection-panel"), this._isSelectionPanelInput = !!this._selectionPanelElement && !this.closest('sbb-selection-panel [slot="content"]'), this.toggleAttribute("data-is-selection-panel-input", this._isSelectionPanelInput);
+    const e = this._abort.signal;
+    this.addEventListener("click", (o) => this._handleClick(o), { signal: e }), this.addEventListener("keydown", (o) => this._handleKeyDown(o), { signal: e }), this._handlerRepository.connect(), this._radioButtonLoaded.emit(), ["disabled", "required", "size"].forEach((o) => this.requestUpdate(o));
+  }
+  willUpdate(e) {
+    super.willUpdate(e), e.has("checked") && (this.setAttribute("aria-checked", `${this.checked}`), this.checked !== e.get("checked") && (this._stateChange.emit({ type: "checked", checked: this.checked }), this.isSelectionPanelInput && this._updateExpandedLabel())), e.has("disabled") && (x(this, "aria-disabled", this.disabled ? "true" : null), this.disabled !== e.get("disabled") && this._stateChange.emit({ type: "disabled", disabled: this.disabled })), e.has("required") && this.setAttribute("aria-required", `${this.required}`);
+  }
+  firstUpdated(e) {
+    super.firstUpdated(e), this.startUpdate(), setTimeout(() => {
+      this.isSelectionPanelInput && this._updateExpandedLabel(), this.completeUpdate();
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback(), this._handlerRepository.disconnect();
+  }
+  _handleKeyDown(e) {
+    e.code === "Space" && this.select();
+  }
+  _updateExpandedLabel() {
+    var e;
+    if (!((e = this._selectionPanelElement) != null && e.hasContent)) {
+      this._selectionPanelExpandedLabel = "";
+      return;
+    }
+    this._selectionPanelExpandedLabel = this.checked ? ", " + E[this._language.current] : ", " + S[this._language.current];
+  }
+  render() {
+    return n`
+      <label class="sbb-radio-button">
+        <input
+          type="radio"
+          aria-hidden="true"
+          tabindex="-1"
+          ?disabled=${this.disabled}
+          ?required=${this.required}
+          ?checked=${this.checked}
+          value=${this.value || b}
+          class="sbb-screen-reader-only"
+        />
+        <span class="sbb-radio-button__label-slot">
+          <slot></slot>
+          ${this._selectionPanelElement ? n`<slot name="suffix"></slot>` : b}
+        </span>
+        ${this._selectionPanelElement ? n`<slot name="subtext"></slot>` : b}
+        ${this.isSelectionPanelInput && this._selectionPanelExpandedLabel ? n`<span class="sbb-screen-reader-only"> ${this._selectionPanelExpandedLabel} </span>` : b}
+      </label>
+    `;
+  }
+};
+t.styles = C;
+t.events = {
+  stateChange: "stateChange",
+  radioButtonLoaded: "radioButtonLoaded"
+};
+i([
+  r({ attribute: "allow-empty-selection", type: Boolean })
+], t.prototype, "allowEmptySelection", 1);
+i([
+  r()
+], t.prototype, "value", 2);
+i([
+  r({ reflect: !0, type: Boolean })
+], t.prototype, "disabled", 1);
+i([
+  r({ reflect: !0, type: Boolean })
+], t.prototype, "required", 1);
+i([
+  r({ reflect: !0, type: Boolean })
+], t.prototype, "checked", 1);
+i([
+  r({ reflect: !0 })
+], t.prototype, "size", 1);
+i([
+  h()
+], t.prototype, "_isSelectionPanelInput", 2);
+i([
+  h()
+], t.prototype, "_selectionPanelExpandedLabel", 2);
+t = i([
+  v("sbb-radio-button"),
+  y({
+    role: "radio"
+  })
+], t);
+export {
+  t as SbbRadioButtonElement
+};

package/radio-button.d.ts

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

package/radio-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"radio-button.d.ts","sourceRoot":"","sources":["../../src/elements/radio-button.ts"],"names":[],"mappings":"AAAA,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC"}

package/radio-button.js

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

package/screen-reader-only/screen-reader-only.d.ts

@@ -0,0 +1,17 @@
+import { CSSResultGroup, TemplateResult, LitElement } from 'lit';
+
+/**
+ * This component can be used to visually hide content but present it to screen readers.
+ *
+ * @slot - Use the unnamed slot to provide content.
+ */
+export declare class SbbScreenReaderOnlyElement extends LitElement {
+    static styles: CSSResultGroup;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-screen-reader-only': SbbScreenReaderOnlyElement;
+    }
+}
+//# sourceMappingURL=screen-reader-only.d.ts.map

package/screen-reader-only/screen-reader-only.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"screen-reader-only.d.ts","sourceRoot":"","sources":["../../../src/elements/screen-reader-only/screen-reader-only.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1D,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAKvC;;;;GAIG;AACH,qBACa,0BAA2B,SAAQ,UAAU;IACxD,OAAuB,MAAM,EAAE,cAAc,CAAS;cAEnC,MAAM,IAAI,cAAc;CAG5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

package/screen-reader-only.d.ts

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

package/screen-reader-only.d.ts.map

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

package/screen-reader-only.js

@@ -0,0 +1,20 @@
+import { css as i, LitElement as c, html as m } from "lit";
+import { customElement as a } from "lit/decorators.js";
+const b = i`: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 d = Object.defineProperty, f = Object.getOwnPropertyDescriptor, h = (p, r, s, t) => {
+  for (var e = t > 1 ? void 0 : t ? f(r, s) : r, o = p.length - 1, l; o >= 0; o--)
+    (l = p[o]) && (e = (t ? l(r, s, e) : l(e)) || e);
+  return t && e && d(r, s, e), e;
+};
+let n = class extends c {
+  render() {
+    return m`<slot></slot>`;
+  }
+};
+n.styles = b;
+n = h([
+  a("sbb-screen-reader-only")
+], n);
+export {
+  n as SbbScreenReaderOnlyElement
+};

package/select/select.d.ts

@@ -0,0 +1,140 @@
+import { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
+import { SbbOpenCloseBaseElement } from '../core/base-elements.js';
+
+export interface SelectChange {
+    type: 'value';
+    value: string | string[];
+}
+declare const SbbSelectElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbUpdateSchedulerMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbNegativeMixinType> & typeof SbbOpenCloseBaseElement;
+/**
+ * It displays a panel with selectable options.
+ *
+ * @slot - Use the unnamed slot to add options.
+ * @event {CustomEvent<void>} didChange - Deprecated. used for React. Will probably be removed once React 19 is available.
+ * @event {CustomEvent<void>} change - Notifies that the component's value has changed.
+ * @event {CustomEvent<void>} input - Notifies that an option value has been selected.
+ * @event {CustomEvent<void>} willOpen - Emits whenever the `sbb-select` starts the opening transition. Can be canceled.
+ * @event {CustomEvent<void>} didOpen - Emits whenever the `sbb-select` is opened.
+ * @event {CustomEvent<void>} willClose - Emits whenever the `sbb-select` begins the closing transition. Can be canceled.
+ * @event {CustomEvent<void>} didClose - Emits whenever the `sbb-select` is closed.
+ * @cssprop [--sbb-select-z-index=var(--sbb-overlay-default-z-index)] - To specify a custom stack order,
+ * the `z-index` can be overridden by defining this CSS variable. The default `z-index` of the
+ * component is set to `var(--sbb-overlay-default-z-index)` with a value of `1000`.
+ */
+export declare class SbbSelectElement extends SbbSelectElement_base {
+    static styles: CSSResultGroup;
+    static readonly events: {
+        readonly didChange: "didChange";
+        readonly change: "change";
+        readonly input: "input";
+        readonly stateChange: "stateChange";
+        readonly willOpen: "willOpen";
+        readonly didOpen: "didOpen";
+        readonly willClose: "willClose";
+        readonly didClose: "didClose";
+    };
+    /** The value of the select component. If `multiple` is true, it's an array. */
+    value?: string | string[];
+    /** The placeholder used if no value has been selected. */
+    placeholder?: string;
+    /** Whether the select allows for multiple selection. */
+    multiple: boolean;
+    /** Whether the select is required. */
+    required: boolean;
+    /** Whether the select is readonly. */
+    readonly: boolean;
+    /** The value displayed by the component. */
+    private _displayValue;
+    /**
+     * @deprecated only used for React. Will probably be removed once React 19 is available.
+     */
+    private _didChange;
+    /** Notifies that the component's value has changed. */
+    private _change;
+    /** Notifies that an option value has been selected. */
+    private _input;
+    /** @internal */
+    private _stateChange;
+    private _overlay;
+    private _optionContainer;
+    private _originElement;
+    private _triggerElement;
+    private _openPanelEventsController;
+    private _overlayId;
+    private _activeItemIndex;
+    private _searchTimeout?;
+    private _searchString;
+    private _didLoad;
+    private _isPointerDownEventOnMenu;
+    private _abort;
+    /**
+     * The 'combobox' input element
+     * @internal
+     */
+    get inputElement(): HTMLElement;
+    /** Gets all the SbbOptionElement projected in the select. */
+    private get _options();
+    private get _filteredOptions();
+    /** Opens the selection panel. */
+    open(): void;
+    /** Closes the selection panel. */
+    close(): void;
+    /** Gets the current displayed value. */
+    getDisplayValue(): string;
+    /** Listens to option changes. */
+    private _onOptionChanged;
+    private _onOptionClick;
+    /** Sets the _displayValue by checking the internal sbb-options and setting the correct `selected` value on them. */
+    private _onValueChanged;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
+    /**
+     * 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(qualifiedName: string): void;
+    connectedCallback(): void;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
+    disconnectedCallback(): void;
+    private _syncProperties;
+    private _setupSelect;
+    /** Sets the originElement; if the component is used in a sbb-form-field uses it, otherwise uses the parentElement. */
+    private _setupOrigin;
+    /**
+     * 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
+     */
+    private _setupTrigger;
+    private _setOverlayPosition;
+    private _onAnimationEnd;
+    private _onOpenAnimationEnd;
+    private _onCloseAnimationEnd;
+    /** When an option is selected, updates the displayValue; it also closes the select if not `multiple`. */
+    private _onOptionSelected;
+    /** When an option is unselected in `multiple`, removes it from value and updates displayValue. */
+    private _onOptionDeselected;
+    private _attachOpenPanelEvents;
+    private _onKeyDown;
+    private _closedPanelKeyboardInteraction;
+    private _openedPanelKeyboardInteraction;
+    private _checkForLetterSelection;
+    private _setNextActiveOptionByText;
+    private _selectByKeyboard;
+    private _setNextActiveOption;
+    private _setActiveElement;
+    private _setSelectedElement;
+    private _resetActiveElement;
+    private _pointerDownListener;
+    private _closeOnBackdropClick;
+    private _setValueFromSelectedOption;
+    private _toggleOpening;
+    protected render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'sbb-select': SbbSelectElement;
+    }
+}
+export {};
+//# sourceMappingURL=select.d.ts.map

package/select/select.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../../../src/elements/select/select.ts"],"names":[],"mappings":"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"}

package/select.d.ts

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

package/select.d.ts.map

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