@sbb-esta/lyne-elements 1.11.3 → 1.12.1

package/paginator.js

@@ -0,0 +1,263 @@
+import { css as d, LitElement as u, html as r, nothing as h } from "lit";
+import { property as p, customElement as m } from "lit/decorators.js";
+import { repeat as c } from "lit/directives/repeat.js";
+import { sbbInputModalityDetector as _ } from "./core/a11y.js";
+import { SbbLanguageController as v } from "./core/controllers.js";
+import { hostAttributes as f } from "./core/decorators.js";
+import { EventEmitter as x } from "./core/eventing.js";
+import { i18nSelectedPage as y, i18nPreviousPage as z, i18nNextPage as w, i18nItemsPerPage as P, i18nPage as I } from "./core/i18n.js";
+import { SbbNegativeMixin as S } from "./core/mixins.js";
+import "./button/mini-button.js";
+import "./button/mini-button-group.js";
+import "./divider.js";
+import "./form-field.js";
+import "./select.js";
+import "./option.js";
+import "./screen-reader-only.js";
+const $ = d`*,:before,:after{box-sizing:border-box}:host{display:block;--sbb-paginator-height: var(--sbb-size-element-m);--sbb-paginator-page-color: var(--sbb-color-metal);--sbb-paginator-page-background-color: transparent;--sbb-paginator-page-border-width: 0;--sbb-paginator-page-border-style: none;--sbb-paginator-page-border-color: none;--sbb-paginator-page-inset: 0;--sbb-paginator-animation-easing: var(--sbb-animation-easing);--sbb-paginator-animation-duration: var( --sbb-disable-animation-zero-time, var(--sbb-animation-duration-2x) );--sbb-paginator-justify-content: start;--sbb-paginator-wrapping-group-wrap: wrap-reverse;--sbb-paginator-wrap: wrap}:host([size=s]){--sbb-paginator-height: var(--sbb-size-element-xs)}:host([negative]){--sbb-paginator-page-color: var(--sbb-color-smoke);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([pager-position=end]){--sbb-paginator-justify-content: end;--sbb-paginator-wrapping-group-wrap: wrap;--sbb-paginator-wrap: wrap-reverse}.sbb-paginator,.sbb-paginator__wrapping-group{display:flex;gap:var(--sbb-spacing-fixed-3x) var(--sbb-spacing-fixed-6x);justify-content:var(--sbb-paginator-justify-content)}.sbb-paginator{flex-wrap:var(--sbb-paginator-wrap);min-height:var(--sbb-paginator-height)}.sbb-paginator__wrapping-group{flex-wrap:var(--sbb-paginator-wrapping-group-wrap)}.sbb-paginator__page-size-options{--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);display:flex;align-items:center;gap:var(--sbb-spacing-fixed-2x);white-space:nowrap;color:var(--sbb-paginator-page-color)}.sbb-paginator__pages{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;align-items:center;justify-content:center;gap:var(--sbb-spacing-fixed-1x);-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}.sbb-paginator__page--ellipsis,.sbb-paginator__page--number{--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);position:relative;color:var(--sbb-paginator-page-color)}.sbb-paginator__page--ellipsis-item,.sbb-paginator__page--number-item{display:flex;justify-content:center;align-items:center;width:var(--sbb-size-element-xxs);height:var(--sbb-size-element-xxs)}.sbb-paginator__page--number-item{-webkit-appearance:none;-moz-appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;border-radius:0;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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);position:relative;cursor:pointer;outline:none!important;color:var(--sbb-paginator-page-color);transition:color var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:before{content:"";position:absolute;background-color:var(--sbb-paginator-page-background-color);border:var(--sbb-paginator-page-border-width) var(--sbb-paginator-page-border-style) var(--sbb-paginator-page-border-color);border-radius:var(--sbb-border-radius-infinity);inset:var(--sbb-paginator-page-inset);transition-property:background-color,border,inset;transition-duration:var(--sbb-paginator-animation-duration);transition-timing-function:var(--sbb-paginator-animation-easing)}.sbb-paginator__page--number-item:focus-visible:not([data-focus-origin=mouse],[data-focus-origin=touch]):before{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) solid var(--sbb-focus-outline-width);outline-offset:var(--sbb-border-width-2x)}.sbb-paginator__page--number-item[data-selected]{font-weight:700;--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-charcoal)}:host([negative]) .sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-border-width: var(--sbb-border-width-2x);--sbb-paginator-page-border-style: solid;--sbb-paginator-page-border-color: var(--sbb-color-white)}@media (forced-colors: active){.sbb-paginator__page--number-item[data-selected]{--sbb-paginator-page-border-color: Highlight !important}}@media (any-hover: hover){.sbb-paginator__page--number-item:hover{--sbb-paginator-page-background-color: var(--sbb-color-milk);--sbb-paginator-page-inset: calc(var(--sbb-border-width-2x) * -1);--sbb-paginator-translate-y-content-hover: -.0625rem}:host([negative]) .sbb-paginator__page--number-item:hover{--sbb-paginator-page-background-color: var(--sbb-color-charcoal)}}@media (any-hover: hover) and (forced-colors: active){.sbb-paginator__page--number-item:hover{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item:active{--sbb-paginator-page-color: var(--sbb-color-charcoal);--sbb-paginator-page-background-color: var(--sbb-color-cloud);--sbb-paginator-page-inset: 0;--sbb-paginator-translate-y-content-hover: 0}:host([negative]) .sbb-paginator__page--number-item:active{--sbb-paginator-page-color: var(--sbb-color-milk);--sbb-paginator-page-background-color: var(--sbb-color-iron)}@media (forced-colors: active){.sbb-paginator__page--number-item:active{--sbb-paginator-page-background-color: Highlight !important}}.sbb-paginator__page--number-item-label{transition:transform var(--sbb-paginator-animation-duration) var(--sbb-paginator-animation-easing);transform:translateY(var(--sbb-paginator-translate-y-content-hover, 0rem))}.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 k = Object.defineProperty, O = Object.getOwnPropertyDescriptor, n = (e, t, a, s) => {
+  for (var o = s > 1 ? void 0 : s ? O(t, a) : t, g = e.length - 1, l; g >= 0; g--)
+    (l = e[g]) && (o = (s ? l(t, a, o) : l(o)) || o);
+  return s && o && k(t, a, o), o;
+};
+const b = 3;
+let N = 0, i = class extends S(u) {
+  constructor() {
+    super(...arguments), this._length = 0, this._pageSize = 10, this._pageIndex = 0, this.pagerPosition = "start", this.size = "m", this._page = new x(
+      this,
+      i.events.page,
+      { composed: !0, bubbles: !0 }
+    ), this._paginatorOptionsLabel = `sbb-paginator-options-label-${++N}`, this._language = new v(this), this._markForFocus = null, this._updateSelectAriaLabelledBy = !1;
+  }
+  set length(e) {
+    this._length = isNaN(e) || e < 0 ? 0 : e, this.pageIndex = this.pageIndex;
+  }
+  get length() {
+    return this._length;
+  }
+  set pageSize(e) {
+    const t = this.pageSize;
+    this._pageSize = Math.max(e, 0), this.pageIndex = Math.floor(this.pageIndex * t / this.pageSize) || 0;
+  }
+  get pageSize() {
+    return this._pageSize;
+  }
+  set pageIndex(e) {
+    this._pageIndex = this._coercePageIndexInRange(e);
+  }
+  get pageIndex() {
+    return this._pageIndex;
+  }
+  set pageSizeOptions(e) {
+    this._pageSizeOptions = e, this._updateSelectAriaLabelledBy = !0;
+  }
+  get pageSizeOptions() {
+    return this._pageSizeOptions;
+  }
+  updated(e) {
+    if (super.updated(e), this._markForFocus && _.mostRecentModality === "keyboard") {
+      const a = this._getVisiblePages().find(
+        (s) => this.pageIndex === +s.getAttribute("data-index")
+      );
+      a && a.focus(), this._markForFocus = null;
+    }
+    const t = this.shadowRoot.querySelector("sbb-select");
+    t && this._updateSelectAriaLabelledBy && (t.setAttribute("aria-labelledby", this._paginatorOptionsLabel), this._updateSelectAriaLabelledBy = !1), this.shadowRoot.querySelector("sbb-screen-reader-only").textContent = this._currentPageLabel();
+  }
+  /**
+   * Calculates the current number of pages based on the `length` and the `pageSize`;
+   * value must be rounded up (e.g. `length = 21` and `pageSize = 10` means 3 pages).
+   */
+  _numberOfPages() {
+    return this.pageSize ? Math.ceil(this.length / this.pageSize) : 0;
+  }
+  /**
+   * If the `pageSize` changes due to user interaction with the `pageSizeOptions` select,
+   * emit the `page` event and then update the `pageSize` value.
+   */
+  _pageSizeChanged(e) {
+    const t = this.pageSize, a = this.pageIndex;
+    this.pageSize = e, t !== this.pageSize && this._emitPageEvent(a);
+  }
+  /**
+   * If the `pageIndex` changes due to user interaction,
+   * emit the `page` event and then update the `pageIndex` value.
+   */
+  _pageIndexChanged(e) {
+    const t = this.pageIndex;
+    this.pageIndex = e, t !== this.pageIndex && this._emitPageEvent(t);
+  }
+  _emitPageEvent(e) {
+    this._page.emit({
+      previousPageIndex: e,
+      pageIndex: this.pageIndex,
+      length: this.length,
+      pageSize: this.pageSize
+    });
+  }
+  /** Returns the displayed page elements. */
+  _getVisiblePages() {
+    return Array.from(this.shadowRoot.querySelectorAll(".sbb-paginator__page--number-item"));
+  }
+  /** Evaluate `pageIndex` by excluding edge cases. */
+  _coercePageIndexInRange(e) {
+    return Math.max(
+      Math.min(Math.max(isNaN(e) ? 0 : e, 0), this._numberOfPages() - 1),
+      0
+    );
+  }
+  /**
+   * Calculate the pages set based on the following rules:
+   *  - the first page must always be visible;
+   *  - the last page must always be visible;
+   *  - if there are more than `MAX_PAGE_NUMBERS_DISPLAYED` other pages, ellipsis button must be used.
+   */
+  _getVisiblePagesIndex() {
+    const e = this._numberOfPages(), t = this.pageIndex;
+    return e <= b + 2 ? this._range(e) : t < b ? [...this._range(b + 1), "ellipsis", e - 1] : t >= e - b ? [
+      0,
+      "ellipsis",
+      ...this._range(b + 1, e - 1 - b)
+    ] : [
+      0,
+      "ellipsis",
+      t - 1,
+      t,
+      t + 1,
+      "ellipsis",
+      e - 1
+    ];
+  }
+  /** Creates an array of consecutive numbers given the length and the starting value. */
+  _range(e, t = 0) {
+    return Array.from({ length: e }, (a, s) => s + t);
+  }
+  _handleKeyUp(e) {
+    if (e.key !== " " && e.key !== "Enter")
+      return;
+    this._getVisiblePages().find((a) => a === e.target) && (this._markForFocus = this.pageIndex);
+  }
+  _currentPageLabel() {
+    return y(this.pageIndex + 1)[this._language.current];
+  }
+  _renderPrevNextButtons() {
+    return r`
+      <sbb-mini-button-group ?negative=${this.negative} size=${this.size === "s" ? "s" : "l"}>
+        <sbb-mini-button
+          id="sbb-paginator-prev-page"
+          aria-label=${z[this._language.current]}
+          icon-name="chevron-small-left-small"
+          ?disabled=${this.pageIndex === 0}
+          @click=${() => this._pageIndexChanged(this._pageIndex - 1)}
+        ></sbb-mini-button>
+        <sbb-divider orientation="vertical"></sbb-divider>
+        <sbb-mini-button
+          id="sbb-paginator-next-page"
+          aria-label=${w[this._language.current]}
+          icon-name="chevron-small-right-small"
+          ?disabled=${this.pageIndex === this._numberOfPages() - 1}
+          @click=${() => this._pageIndexChanged(this._pageIndex + 1)}
+        ></sbb-mini-button>
+      </sbb-mini-button-group>
+    `;
+  }
+  _renderItemPerPageTemplate() {
+    var e;
+    return this.pageSizeOptions && this.pageSizeOptions.length > 0 ? r`
+          <div class="sbb-paginator__page-size-options">
+            <label id=${this._paginatorOptionsLabel}>
+              ${P[this._language.current]}
+            </label>
+            <sbb-form-field
+              borderless
+              width="collapse"
+              ?negative=${this.negative}
+              size=${this.size}
+            >
+              <sbb-select
+                value=${((e = this.pageSizeOptions) == null ? void 0 : e.find((t) => t === this.pageSize)) ?? this.pageSizeOptions[0]}
+                @change=${(t) => this._pageSizeChanged(+t.target.value)}
+              >
+                ${c(
+      this.pageSizeOptions,
+      (t) => r`<sbb-option value=${t}>${t}</sbb-option>`
+    )}
+              </sbb-select>
+            </sbb-form-field>
+          </div>
+        ` : h;
+  }
+  _renderPageNumbers() {
+    return r`
+      <ul class="sbb-paginator__pages">
+        ${c(
+      this._getVisiblePagesIndex(),
+      (e) => e === "ellipsis" ? r`
+                  <li class="sbb-paginator__page--ellipsis">
+                    <span class="sbb-paginator__page--ellipsis-item">…</span>
+                  </li>
+                ` : r`
+                  <li class="sbb-paginator__page--number">
+                    <button
+                      ?data-selected=${this.pageIndex === e}
+                      class="sbb-paginator__page--number-item"
+                      data-index=${e}
+                      aria-label="${I[this._language.current]} ${e + 1}"
+                      aria-current=${this.pageIndex === e ? "true" : h}
+                      @click=${() => this._pageIndexChanged(e)}
+                      @keyup=${this._handleKeyUp}
+                    >
+                      <span class="sbb-paginator__page--number-item-label">${e + 1}</span>
+                    </button>
+                  </li>
+                `
+    )}
+      </ul>
+    `;
+  }
+  render() {
+    return r`
+      <div class="sbb-paginator">
+        ${this.pagerPosition === "start" ? r`<span class="sbb-paginator__wrapping-group">
+                  ${this._renderPrevNextButtons()} ${this._renderPageNumbers()}
+                </span>
+                ${this._renderItemPerPageTemplate()}` : r`${this._renderItemPerPageTemplate()}
+                <span class="sbb-paginator__wrapping-group">
+                  ${this._renderPageNumbers()} ${this._renderPrevNextButtons()}
+                </span>`}</span>
+      </div>
+      <sbb-screen-reader-only role='status'></sbb-screen-reader-only>
+    `;
+  }
+};
+i.styles = $;
+i.events = {
+  page: "page"
+};
+n([
+  p({ type: Number })
+], i.prototype, "length", 1);
+n([
+  p({ attribute: "page-size", type: Number })
+], i.prototype, "pageSize", 1);
+n([
+  p({ attribute: "page-index", type: Number })
+], i.prototype, "pageIndex", 1);
+n([
+  p({ attribute: "page-size-options", type: Array })
+], i.prototype, "pageSizeOptions", 1);
+n([
+  p({ attribute: "pager-position", reflect: !0 })
+], i.prototype, "pagerPosition", 2);
+n([
+  p({ reflect: !0 })
+], i.prototype, "size", 2);
+i = n([
+  m("sbb-paginator"),
+  f({
+    role: "group"
+  })
+], i);
+export {
+  i as SbbPaginatorElement
+};

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

@@ -74,7 +74,7 @@ export declare class SbbRadioButtonGroupElement extends SbbRadioButtonGroupEleme
     private _valueChanged;
     protected firstUpdated(changedProperties: PropertyValues<this>): void;
     disconnectedCallback(): void;
-    private _onRadioButtonSelect;
+    private _onRadioButtonChange;
     private _emitChange;
     private _updateRadios;
     private _setFocusableRadio;

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

@@ -1 +1 @@
-{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAkB,MAAM,0BAA0B,CAAC;AAElG,OAAO,KAAK,EAA6B,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAIhE,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,qBAAqB,GAAG,0BAA0B,CAAC;CACjE,CAAC;;AAEF;;;;;;;;GAQG;AACH,qBAKa,0BAA2B,SAAQ,+BAA4B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACiC,QAAQ,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACgB,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACgB,IAAI,EAAE,kBAAkB,CAAO;IAElD;;OAEG;IAEI,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,GAAG,0BAA0B,CAAC,EAAE,CAOhF;IAED,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,CAAC,kCAAkC,CAAkB;IAC5D,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAyC;IAEvD;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,OAAO,CAGb;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAGZ;IAEc,iBAAiB,IAAI,IAAI;IAuBzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAqBzE,OAAO,CAAC,aAAa;cAQF,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAI5C,OAAO,CAAC,oBAAoB;IAmB5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;cA+BH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}
+{"version":3,"file":"radio-button-group.d.ts","sourceRoot":"","sources":["../../../../src/elements/radio-button/radio-button-group/radio-button-group.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAOvC,OAAO,KAAK,EAAE,iBAAiB,EAAE,cAAc,EAAkB,MAAM,0BAA0B,CAAC;AAElG,OAAO,KAAK,EAA6B,kBAAkB,EAAE,MAAM,cAAc,CAAC;AAClF,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,0BAA0B,CAAC;AAC3E,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAIhE,MAAM,MAAM,8BAA8B,GAAG;IAC3C,KAAK,EAAE,GAAG,GAAG,IAAI,CAAC;IAClB,WAAW,EAAE,qBAAqB,GAAG,0BAA0B,CAAC;CACjE,CAAC;;AAEF;;;;;;;;GAQG;AACH,qBAKa,0BAA2B,SAAQ,+BAA4B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;;;MAIlB;IAEX;;OAEG;IAEI,mBAAmB,EAAE,OAAO,CAAS;IAE5C;;OAEG;IACiC,QAAQ,EAAE,OAAO,CAAS;IAE9D;;OAEG;IACgB,KAAK,CAAC,EAAE,GAAG,GAAG,IAAI,CAAC;IAEtC;;OAEG;IACgB,IAAI,EAAE,kBAAkB,CAAO;IAElD;;OAEG;IAEI,cAAc,CAAC,EAAE,iBAAiB,CAAC;IAE1C;;OAEG;IAEI,WAAW,EAAE,cAAc,CAAgB;IAElD;;OAEG;IACH,IAAW,YAAY,IAAI,CAAC,qBAAqB,GAAG,0BAA0B,CAAC,EAAE,CAOhF;IAED,OAAO,KAAK,cAAc,GAIzB;IAED,OAAO,CAAC,kCAAkC,CAAkB;IAC5D,OAAO,CAAC,QAAQ,CAAS;IACzB,OAAO,CAAC,MAAM,CAAyC;IAEvD;;;OAGG;IACH,OAAO,CAAC,UAAU,CAGhB;IAEF;;OAEG;IACH,OAAO,CAAC,OAAO,CAGb;IAEF;;OAEG;IACH,OAAO,CAAC,MAAM,CAGZ;IAEc,iBAAiB,IAAI,IAAI;IAuBzB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAqBzE,OAAO,CAAC,aAAa;cAQF,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAO9D,oBAAoB,IAAI,IAAI;IAI5C,OAAO,CAAC,oBAAoB;IAwB5B,OAAO,CAAC,WAAW;IAMnB,OAAO,CAAC,aAAa;IAiBrB,OAAO,CAAC,kBAAkB;IAS1B,OAAO,CAAC,iBAAiB;IAMzB,OAAO,CAAC,cAAc;cA+BH,MAAM,IAAI,cAAc;CAU5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,wBAAwB,EAAE,0BAA0B,CAAC;KACtD;CACF"}

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

@@ -44,7 +44,7 @@ let a = class extends _(u) {
     const t = this._abort.signal;
     this.addEventListener(
       "stateChange",
-      (i) => this._onRadioButtonSelect(i),
+      (i) => this._onRadioButtonChange(i),
       {
         signal: t,
         passive: !0
@@ -83,12 +83,16 @@ let a = class extends _(u) {
   disconnectedCallback() {
     super.disconnectedCallback();
   }
-  _onRadioButtonSelect(t) {
-    var e;
-    if (t.stopPropagation(), t.detail.type !== "checked" || !this._didLoad)
-      return;
-    const o = t.target;
-    t.detail.checked ? (this.value = o.value, this._emitChange(o, this.value)) : this.allowEmptySelection && (this.value = (e = this.radioButtons.find((i) => i.checked)) == null ? void 0 : e.value, this.value || this._emitChange(o));
+  _onRadioButtonChange(t) {
+    var o;
+    if (t.stopPropagation(), !!this._didLoad) {
+      if (t.detail.type === "disabled")
+        this._updateRadios(this.value);
+      else if (t.detail.type === "checked") {
+        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, o) {
     this._change.emit({ value: o, radioButton: t }), this._input.emit({ value: o, radioButton: t }), this._didChange.emit({ value: o, radioButton: t });
@@ -108,7 +112,8 @@ let a = class extends _(u) {
     !t && (o != null && o.length) && (o[0].tabIndex = 0);
   }
   _getRadioTabIndex(t) {
-    return t.checked && !t.disabled && !this.disabled || this._hasSelectionExpansionPanelElement ? 0 : -1;
+    const o = !t.disabled && !this.disabled;
+    return (t.checked || this._hasSelectionExpansionPanelElement) && o ? 0 : -1;
   }
   _handleKeyDown(t) {
     var n;

package/select/select.d.ts

@@ -74,6 +74,12 @@ export declare class SbbSelectElement extends SbbSelectElement_base {
     /** Gets all the SbbOptionElement projected in the select. */
     private get _options();
     private get _filteredOptions();
+    constructor();
+    /**
+     * TODO: Accessibility fix required to correctly read the label;
+     * can be possibly removed after the merge of https://github.com/sbb-design-systems/lyne-components/issues/3062
+     */
+    private _onSelectAttributesChange;
     /** Opens the selection panel. */
     open(): void;
     /** Closes the selection panel. */

package/select/select.d.ts.map

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

package/select.js

@@ -1,37 +1,41 @@
-import { css as g, html as d, nothing as c } from "lit";
-import { property as b, state as m, customElement as w } from "lit/decorators.js";
+import { MutationController as g } from "@lit-labs/observers/mutation-controller.js";
+import { css as m, html as d, nothing as c } from "lit";
+import { property as b, state as w, customElement as y } from "lit/decorators.js";
 import { ref as v } from "lit/directives/ref.js";
 import { until as u } from "lit/directives/until.js";
-import { getNextElementIndex as y } from "./core/a11y.js";
-import { SbbOpenCloseBaseElement as x } from "./core/base-elements.js";
-import { SbbConnectedAbortController as E } from "./core/controllers.js";
+import { getNextElementIndex as x } from "./core/a11y.js";
+import { SbbOpenCloseBaseElement as E } from "./core/base-elements.js";
+import { SbbConnectedAbortController as k } from "./core/controllers.js";
 import { hostAttributes as O } from "./core/decorators.js";
-import { isNextjs as f, isSafari as k } from "./core/dom.js";
+import { isNextjs as f, isSafari as C } from "./core/dom.js";
 import { EventEmitter as p } from "./core/eventing.js";
-import { SbbUpdateSchedulerMixin as C, SbbDisabledMixin as A, SbbNegativeMixin as S, SbbHydrationMixin as I } from "./core/mixins.js";
-import { isEventOnElement as _, setOverlayPosition as D, overlayGapFixCorners as P } from "./core/overlay.js";
-const $ = g`*,: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{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);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.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)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@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 L = Object.defineProperty, V = Object.getOwnPropertyDescriptor, n = (e, t, i, s) => {
-  for (var o = s > 1 ? void 0 : s ? V(t, i) : t, r = e.length - 1, l; r >= 0; r--)
+import { SbbUpdateSchedulerMixin as A, SbbDisabledMixin as S, SbbNegativeMixin as I, SbbHydrationMixin as D } from "./core/mixins.js";
+import { isEventOnElement as _, setOverlayPosition as P, overlayGapFixCorners as $ } from "./core/overlay.js";
+const L = m`*,: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{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);--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x)}.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)}}.sbb-select__options{padding-block:var(--sbb-spacing-fixed-2x)}@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 V = Object.defineProperty, T = Object.getOwnPropertyDescriptor, n = (e, t, i, s) => {
+  for (var o = s > 1 ? void 0 : s ? T(t, i) : t, r = e.length - 1, l; r >= 0; r--)
     (l = e[r]) && (o = (s ? l(t, i, o) : l(o)) || o);
-  return s && o && L(t, i, o), o;
+  return s && o && V(t, i, o), o;
 };
-const h = k;
-let T = 0, a = class extends C(
-  A(S(I(x)))
+const h = C;
+let N = 0, a = class extends A(
+  S(I(D(E)))
 ) {
   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(
+    super(), 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 E(this), this._pointerDownListener = (e) => {
+    ), this._overlayId = `sbb-select-${++N}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new k(this), this._pointerDownListener = (e) => {
       this._isPointerDownEventOnMenu = _(this._overlay, e);
     }, this._closeOnBackdropClick = (e) => {
       !this._isPointerDownEventOnMenu && !_(this._overlay, e) && this.close();
-    };
+    }, new g(this, {
+      config: { attributeFilter: ["aria-labelledby"] },
+      callback: (e) => this._onSelectAttributesChange(e)
+    });
   }
   /**
    * The 'combobox' input element
@@ -50,6 +54,18 @@ let T = 0, a = class extends C(
       (e) => !e.disabled && !e.hasAttribute("data-group-disabled")
     );
   }
+  /**
+   * TODO: Accessibility fix required to correctly read the label;
+   * can be possibly removed after the merge of https://github.com/sbb-design-systems/lyne-components/issues/3062
+   */
+  _onSelectAttributesChange(e) {
+    var t;
+    for (const i of e)
+      i.attributeName === "aria-labelledby" && ((t = this._triggerElement) == null || t.setAttribute(
+        "aria-labelledby",
+        this.getAttribute("aria-labelledby")
+      ));
+  }
   /** Opens the selection panel. */
   open() {
     this.state !== "closed" || !this._overlay || this._options.length === 0 || this.willOpen.emit() && (this.state = "opening", this._setOverlayPosition());
@@ -153,7 +169,7 @@ let T = 0, a = class extends C(
     this._triggerElement.style.top = "0px", this._triggerElement.style.height = `${e.offsetHeight}px`, this._triggerElement.style.width = `${e.offsetWidth}px`;
   }
   _setOverlayPosition() {
-    D(
+    P(
       this._overlay,
       this._originElement,
       this._optionContainer,
@@ -270,7 +286,7 @@ let T = 0, a = class extends C(
     this.multiple ? e.setSelectedViaUserInteraction(!e.selected) : this.close();
   }
   _setNextActiveOption(e, t) {
-    const i = t ?? y(e, this._activeItemIndex, this._filteredOptions.length), s = this._filteredOptions[i], o = this._filteredOptions[this._activeItemIndex];
+    const i = t ?? x(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 && s.setSelectedViaUserInteraction(!s.selected) : this._setSelectedElement(s, o), this._activeItemIndex = i;
   }
   _setActiveElement(e, t = null, i = !0) {
@@ -350,7 +366,7 @@ let T = 0, a = class extends C(
 
       <div class="sbb-select__gap-fix"></div>
       <div class="sbb-select__container">
-        <div class="sbb-select__gap-fix">${P()}</div>
+        <div class="sbb-select__gap-fix">${$()}</div>
         <div
           @animationend=${this._onAnimationEnd}
           class="sbb-select__panel"
@@ -372,7 +388,7 @@ let T = 0, a = class extends C(
     `;
   }
 };
-a.styles = $;
+a.styles = L;
 a.events = {
   didChange: "didChange",
   change: "change",
@@ -399,10 +415,10 @@ n([
   b({ type: Boolean })
 ], a.prototype, "readonly", 2);
 n([
-  m()
+  w()
 ], a.prototype, "_displayValue", 2);
 a = n([
-  w("sbb-select"),
+  y("sbb-select"),
   O({
     role: h ? "listbox" : null
   })

package/slider/slider.d.ts

@@ -1,5 +1,6 @@
 import { CSSResultGroup, PropertyValues, TemplateResult, LitElement } from 'lit';
-declare const SbbSliderElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & typeof LitElement;
+import { FormRestoreReason, FormRestoreState } from '../core/mixins.js';
+declare const SbbSliderElement_base: import('../core/mixins.js').AbstractConstructor<import('../core/mixins.js').SbbDisabledMixinType> & import('../core/mixins.js').Constructor<import('../core/mixins.js').SbbFormAssociatedMixinType> & typeof LitElement;
 /**
  * It displays an input knob that can be moved in a range.
  *
@@ -12,18 +13,23 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
     static readonly events: {
         readonly didChange: "didChange";
     };
-    /** Value for the inner HTMLInputElement. */
-    value?: string;
+    /**
+     * Value of the form element.
+     * If no value is provided, default is the middle point between min and max.
+     */
+    set value(value: string | null);
+    get value(): string;
     /** Numeric value for the inner HTMLInputElement. */
-    valueAsNumber?: number;
-    /** Name of the inner HTMLInputElement. */
-    name?: string;
-    /** The <form> element to associate the inner HTMLInputElement with. */
-    form?: string;
+    set valueAsNumber(value: number);
+    get valueAsNumber(): number | null;
     /** Minimum acceptable value for the inner HTMLInputElement. */
-    min?: string;
+    set min(value: string);
+    get min(): string;
+    private _min;
     /** Maximum acceptable value for the inner HTMLInputElement. */
-    max?: string;
+    set max(value: string);
+    get max(): string;
+    private _max;
     /**
      * Readonly state for the inner HTMLInputElement.
      * Since the input range does not allow this attribute, it will be merged with the `disabled` one.
@@ -45,16 +51,29 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
     /** Reference to the inner HTMLInputElement with type='range'. */
     private _rangeInput;
     private _abort;
+    constructor();
     connectedCallback(): void;
     protected willUpdate(changedProperties: PropertyValues<this>): void;
-    private _syncValues;
     /**
-     * Recalculates the `_valueFraction` on change to correctly display the slider knob and lines.
-     * The first calculation happens in connectedCallback(...), so since `_rangeInput` is not yet available,
-     * the `min` and `max` values are used; if `value` is not provided, the default value is halfway between min and max
-     * (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value).
+     * The reset value is the attribute value (the setup value). If not present, calculates the default.
+     * @internal
+     */
+    formResetCallback(): void;
+    /**
+     * @internal
+     */
+    formStateRestoreCallback(state: FormRestoreState | null, _reason: FormRestoreReason): void;
+    /**
+     *  If no value is provided, default is the middle point between min and max
+     *  (see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range#value)
+     */
+    private _getDefaultValue;
+    private _isValidNumber;
+    /**
+     * Restrains the value between the min and max
      */
-    private _handleChange;
+    private _boundBetweenMinMax;
+    private _calculateValueFraction;
     private _handleKeydown;
     /** Emits the change event. */
     private _emitChange;

package/slider/slider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAahD,OAAO,YAAY,CAAC;;AAEpB;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,qBAA4B;IAChE,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,4CAA4C;IACzB,KAAK,CAAC,EAAE,MAAM,CAAM;IAEvC,oDAAoD;IACa,aAAa,CAAC,EAAE,MAAM,CAAC;IAExF,0CAA0C;IACN,IAAI,CAAC,EAAE,MAAM,CAAM;IAEvD,uEAAuE;IACpD,IAAI,CAAC,EAAE,MAAM,CAAC;IAEjC,+DAA+D;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAO;IAEtC,+DAA+D;IAC5C,GAAG,CAAC,EAAE,MAAM,CAAS;IAExC;;;OAGG;IACiC,QAAQ,CAAC,EAAE,OAAO,CAAS;IAE/D,6FAA6F;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEjE,2FAA2F;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IAE7D;;;OAGG;IACM,OAAO,CAAC,cAAc,CAAK;IAEpC;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,iEAAiE;IACjE,OAAO,CAAC,WAAW,CAAoB;IAEvC,OAAO,CAAC,MAAM,CAAyC;IAEvC,iBAAiB,IAAI,IAAI;cAOtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IA8B5E,OAAO,CAAC,WAAW;IAYnB;;;;;OAKG;IACH,OAAO,CAAC,aAAa;YAqBP,cAAc;IAgC5B,8BAA8B;IAC9B,OAAO,CAAC,WAAW;cAKA,MAAM,IAAI,cAAc;CAqC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}
+{"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../../../src/elements/slider/slider.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAW,MAAM,KAAK,CAAC;AAQhD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,YAAY,CAAC;;AAEpB;;;;;;GAMG;AACH,qBAIa,gBAAiB,SAAQ,qBAAoD;IACxF,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX;;;OAGG;IACH,IACoB,KAAK,CAAC,KAAK,EAAE,MAAM,GAAG,IAAI,EAQ7C;IACD,IAAoB,KAAK,IAAI,MAAM,CAElC;IAED,oDAAoD;IACpD,IACW,aAAa,CAAC,KAAK,EAAE,MAAM,EAErC;IACD,IAAW,aAAa,IAAI,MAAM,GAAG,IAAI,CAExC;IAED,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAe;IAE3B,+DAA+D;IAC/D,IACW,GAAG,CAAC,KAAK,EAAE,MAAM,EAO3B;IACD,IAAW,GAAG,IAAI,MAAM,CAEvB;IACD,OAAO,CAAC,IAAI,CAAiB;IAE7B;;;OAGG;IACiC,QAAQ,CAAC,EAAE,OAAO,CAAS;IAE/D,6FAA6F;IAC/C,SAAS,CAAC,EAAE,MAAM,CAAC;IAEjE,2FAA2F;IAC/C,OAAO,CAAC,EAAE,MAAM,CAAC;IAE7D;;;OAGG;IACM,OAAO,CAAC,cAAc,CAAK;IAEpC;;OAEG;IACH,OAAO,CAAC,UAAU,CAGf;IAEH,iEAAiE;IACjE,OAAO,CAAC,WAAW,CAAoB;IAEvC,OAAO,CAAC,MAAM,CAAyC;;IAQvC,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAc5E;;;OAGG;IACI,iBAAiB,IAAI,IAAI;IAIhC;;OAEG;IACI,wBAAwB,CAC7B,KAAK,EAAE,gBAAgB,GAAG,IAAI,EAC9B,OAAO,EAAE,iBAAiB,GACzB,IAAI;IAIP;;;OAGG;IACH,OAAO,CAAC,gBAAgB;IAIxB,OAAO,CAAC,cAAc;IAItB;;OAEG;IACH,OAAO,CAAC,mBAAmB;IAI3B,OAAO,CAAC,uBAAuB;YASjB,cAAc;IAgC5B,8BAA8B;IAC9B,OAAO,CAAC,WAAW;cAKA,MAAM,IAAI,cAAc;CAmC5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,YAAY,EAAE,gBAAgB,CAAC;KAChC;CACF"}