@sbb-esta/lyne-elements 1.14.0 → 1.15.0

package/select.js

@@ -1,45 +1,45 @@
-var F = (a) => {
+var R = (a) => {
   throw TypeError(a);
 };
-var q = (a, o, l) => o.has(a) || F("Cannot " + l);
-var f = (a, o, l) => (q(a, o, "read from private field"), l ? l.call(a) : o.get(a)), g = (a, o, l) => o.has(a) ? F("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, l), d = (a, o, l, b) => (q(a, o, "write to private field"), b ? b.call(a, l) : o.set(a, l), l);
+var q = (a, o, l) => o.has(a) || R("Cannot " + l);
+var f = (a, o, l) => (q(a, o, "read from private field"), l ? l.call(a) : o.get(a)), g = (a, o, l) => o.has(a) ? R("Cannot add the same private member more than once") : o instanceof WeakSet ? o.add(a) : o.set(a, l), d = (a, o, l, b) => (q(a, o, "write to private field"), b ? b.call(a, l) : o.set(a, l), l);
 import { __esDecorate as m, __runInitializers as h } from "tslib";
-import { MutationController as Y } from "@lit-labs/observers/mutation-controller.js";
-import { css as G, html as y, nothing as E } from "lit";
-import { customElement as W, property as O, state as J } from "lit/decorators.js";
+import { MutationController as G } from "@lit-labs/observers/mutation-controller.js";
+import { css as W, html as y, nothing as E } from "lit";
+import { customElement as J, property as O, state as Q } from "lit/decorators.js";
 import { ref as C } from "lit/directives/ref.js";
-import { until as R } from "lit/directives/until.js";
-import { getNextElementIndex as Q } from "./core/a11y.js";
-import { SbbOpenCloseBaseElement as X } from "./core/base-elements.js";
-import { SbbConnectedAbortController as Z } from "./core/controllers.js";
-import { hostAttributes as ee, forceType as A } from "./core/decorators.js";
-import { isNextjs as j, isSafari as te } from "./core/dom.js";
+import { until as j } from "lit/directives/until.js";
+import { getNextElementIndex as X } from "./core/a11y.js";
+import { SbbOpenCloseBaseElement as Z } from "./core/base-elements.js";
+import { SbbConnectedAbortController as ee, SbbLanguageController as te } from "./core/controllers.js";
+import { hostAttributes as se, forceType as A } from "./core/decorators.js";
+import { setOrRemoveAttribute as S, isNextjs as H, isSafari as ie } from "./core/dom.js";
 import { EventEmitter as x } from "./core/eventing.js";
-import { SbbUpdateSchedulerMixin as se, SbbDisabledMixin as ie, SbbNegativeMixin as ae, SbbHydrationMixin as oe, SbbRequiredMixin as re, SbbFormAssociatedMixin as le } from "./core/mixins.js";
-import { isEventOnElement as H, setOverlayPosition as ne, overlayGapFixCorners as be } from "./core/overlay.js";
-const de = 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}}`, k = te;
-let he = 0, Se = (() => {
+import { SbbUpdateSchedulerMixin as ae, SbbDisabledMixin as oe, SbbNegativeMixin as re, SbbHydrationMixin as le, SbbRequiredMixin as ne, SbbFormAssociatedMixin as be } from "./core/mixins.js";
+import { isEventOnElement as Y, setOverlayPosition as de, overlayGapFixCorners as he } from "./core/overlay.js";
+const pe = W`*,: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}}`, k = ie;
+let ce = 0, De = (() => {
   var c, v, u, _, n;
-  let a = [W("sbb-select"), ee({
+  let a = [J("sbb-select"), se({
     role: k ? "listbox" : null
-  })], o, l = [], b, S = se(ie(ae(oe(re(le(X)))))), I, D = [], V = [], $, P = [], L = [], T, z = [], N = [], U, B = [], K = [];
-  var p = (n = class extends S {
+  })], o, l = [], b, I = ae(oe(re(le(ne(be(Z)))))), D, V = [], L = [], $, P = [], T = [], z, N = [], U = [], B, K = [], M = [];
+  var p = (n = class extends I {
     constructor() {
       super();
       g(this, c);
       g(this, v);
       g(this, u);
       g(this, _);
-      d(this, c, h(this, D, "")), d(this, v, (h(this, V), h(this, P, !1))), d(this, u, (h(this, L), h(this, z, !1))), d(this, _, (h(this, N), h(this, B, null))), this._didChange = (h(this, K), new x(this, p.events.didChange)), this._change = new x(this, p.events.change), this._input = new x(this, p.events.input), this._stateChange = new x(this, p.events.stateChange, {
+      d(this, c, h(this, V, "")), d(this, v, (h(this, L), h(this, P, !1))), d(this, u, (h(this, T), h(this, N, !1))), d(this, _, (h(this, U), h(this, K, null))), this._didChange = (h(this, M), new x(this, p.events.didChange)), this._change = new x(this, p.events.change), this._input = new x(this, p.events.input), this._stateChange = new x(this, p.events.stateChange, {
         composed: !1
-      }), this._overlayId = `sbb-select-${++he}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new Z(this), this._pointerDownListener = (e) => {
-        this._isPointerDownEventOnMenu = H(this._overlay, e);
+      }), this._overlayId = `sbb-select-${++ce}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._abort = new ee(this), this._pointerDownListener = (e) => {
+        this._isPointerDownEventOnMenu = Y(this._overlay, e);
       }, this._closeOnBackdropClick = (e) => {
-        !this._isPointerDownEventOnMenu && !H(this._overlay, e) && this.close();
-      }, new Y(this, {
-        config: { attributeFilter: ["aria-labelledby"] },
-        callback: (e) => this._onSelectAttributesChange(e)
-      });
+        !this._isPointerDownEventOnMenu && !Y(this._overlay, e) && this.close();
+      }, new G(this, {
+        config: { attributeFilter: ["aria-labelledby", "aria-label", "aria-describedby"] },
+        callback: () => this._syncAriaLabels()
+      }), new te(this).withHandler(() => setTimeout(() => this._syncAriaLabels()));
     }
     /** The placeholder used if no value has been selected. */
     get placeholder() {
@@ -62,6 +62,13 @@ let he = 0, Se = (() => {
     set readonly(e) {
       d(this, u, e);
     }
+    /**
+     * Form type of element.
+     * @default 'select-one / select-multiple'
+     */
+    get type() {
+      return this.multiple ? "select-multiple" : "select-one";
+    }
     /** The value displayed by the component. */
     get _displayValue() {
       return f(this, _);
@@ -84,14 +91,9 @@ let he = 0, Se = (() => {
     get _filteredOptions() {
       return this._options.filter((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 s of e)
-        s.attributeName === "aria-labelledby" && ((t = this._triggerElement) == null || t.setAttribute("aria-labelledby", this.getAttribute("aria-labelledby")));
+    _syncAriaLabels() {
+      var e;
+      this._triggerElement && (S(this._triggerElement, "aria-labelledby", this.getAttribute("aria-labelledby")), S(this._triggerElement, "aria-label", this.getAttribute("aria-label")), S(this._triggerElement, "aria-describedby", this.getAttribute("aria-describedby")), !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && this.internals.labels.length && ((e = this._triggerElement) == null || e.setAttribute("aria-label", Array.from(this.internals.labels).map((t) => t.textContent).join(", "))));
     }
     /** Opens the selection panel. */
     open() {
@@ -128,7 +130,7 @@ let he = 0, Se = (() => {
       this._stateChange.emit({ type: "value", value: e });
     }
     firstUpdated(e) {
-      super.firstUpdated(e), this.focus = () => this._triggerElement.focus(), this.blur = () => this._triggerElement.blur(), j() || (this.startUpdate(), this._setupSelect());
+      super.firstUpdated(e), this.focus = () => this._triggerElement.focus(), this.blur = () => this._triggerElement.blur(), H() || (this.startUpdate(), this._setupSelect());
     }
     /**
      * Removes element's first attribute whose qualified name is qualifiedName.
@@ -137,13 +139,13 @@ let he = 0, Se = (() => {
      * @internal We need to override this due to a hydration issue with Next.js.
      */
     removeAttribute(e) {
-      j() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
+      H() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
     }
     connectedCallback() {
       var s, i;
       super.connectedCallback(), k && (this.id || (this.id = this._overlayId));
       const e = this._abort.signal, t = ((s = this.closest) == null ? void 0 : s.call(this, "sbb-form-field")) ?? ((i = this.closest) == null ? void 0 : i.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", (r) => this._onOptionChanged(r), { signal: e }), this.addEventListener("click", (r) => {
+      t && (this.negative = t.hasAttribute("negative")), this._syncProperties(), this._syncAriaLabels(), this._didLoad && (this._setupOrigin(), this._setupTrigger()), this.value && this._onValueChanged(this.value), this.addEventListener("optionSelectionChange", (r) => this._onOptionChanged(r), { signal: e }), this.addEventListener("click", (r) => {
         this._onOptionClick(r), this._toggleOpening();
       }, { signal: e });
     }
@@ -204,7 +206,7 @@ let he = 0, Se = (() => {
       this._triggerElement.style.top = "0px", this._triggerElement.style.height = `${e.offsetHeight}px`, this._triggerElement.style.width = `${e.offsetWidth}px`;
     }
     _setOverlayPosition() {
-      ne(this._overlay, this._originElement, this._optionContainer, this.shadowRoot.querySelector(".sbb-select__container"), this);
+      de(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.
@@ -297,8 +299,8 @@ let he = 0, Se = (() => {
         this._setNextActiveOption(e, this._filteredOptions.indexOf(i));
       else if (this._searchString.length > 1 && new RegExp(`^${this._searchString.charAt(0)}*$`).test(this._searchString)) {
         const r = s.find((w) => {
-          var M;
-          return ((M = w.textContent) == null ? void 0 : M.toLowerCase().indexOf(this._searchString[0].toLowerCase())) === 0;
+          var F;
+          return ((F = w.textContent) == null ? void 0 : F.toLowerCase().indexOf(this._searchString[0].toLowerCase())) === 0;
         });
         r && this._setNextActiveOption(e, this._filteredOptions.indexOf(r));
       } else
@@ -309,7 +311,7 @@ let he = 0, Se = (() => {
       this.multiple ? e.setSelectedViaUserInteraction(!e.selected) : this.close();
     }
     _setNextActiveOption(e, t) {
-      const s = t ?? Q(e, this._activeItemIndex, this._filteredOptions.length), i = this._filteredOptions[s], r = this._filteredOptions[this._activeItemIndex];
+      const s = t ?? X(e, this._activeItemIndex, this._filteredOptions.length), i = this._filteredOptions[s], r = this._filteredOptions[this._activeItemIndex];
       this._setActiveElement(i, r), this.multiple ? e != null && e.shiftKey && i.setSelectedViaUserInteraction(!i.selected) : this._setSelectedElement(i, r), this._activeItemIndex = s;
     }
     _setActiveElement(e, t = null, s = !0) {
@@ -373,17 +375,17 @@ let he = 0, Se = (() => {
         @click=${this._toggleOpening}
         ${C((e) => this._triggerElement = e)}
       >
-        ${R(...this._spreadDeferredDisplayValue(y`<span>${this.placeholder}</span>`))}
+        ${j(...this._spreadDeferredDisplayValue(y`<span>${this.placeholder}</span>`))}
       </div>
 
       <!-- Visually display the value -->
       <div class="sbb-select__trigger" aria-hidden="true">
-        ${R(...this._spreadDeferredDisplayValue(y`<span class="sbb-select__trigger--placeholder">${this.placeholder}</span>`))}
+        ${j(...this._spreadDeferredDisplayValue(y`<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">${be()}</div>
+        <div class="sbb-select__gap-fix">${he()}</div>
         <div
           @animationend=${this._onAnimationEnd}
           class="sbb-select__panel"
@@ -405,17 +407,17 @@ let he = 0, Se = (() => {
     `;
     }
   }, c = new WeakMap(), v = new WeakMap(), u = new WeakMap(), _ = new WeakMap(), b = n, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(S[Symbol.metadata] ?? null) : void 0;
-    I = [A(), O()], $ = [A(), O({ reflect: !0, type: Boolean })], T = [A(), O({ type: Boolean })], U = [J()], m(n, null, I, { kind: "accessor", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, get: (t) => t.placeholder, set: (t, s) => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(I[Symbol.metadata] ?? null) : void 0;
+    D = [A(), O()], $ = [A(), O({ reflect: !0, type: Boolean })], z = [A(), O({ type: Boolean })], B = [Q()], m(n, null, D, { kind: "accessor", name: "placeholder", static: !1, private: !1, access: { has: (t) => "placeholder" in t, get: (t) => t.placeholder, set: (t, s) => {
       t.placeholder = s;
-    } }, metadata: e }, D, V), m(n, null, $, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, s) => {
+    } }, metadata: e }, V, L), m(n, null, $, { kind: "accessor", name: "multiple", static: !1, private: !1, access: { has: (t) => "multiple" in t, get: (t) => t.multiple, set: (t, s) => {
       t.multiple = s;
-    } }, metadata: e }, P, L), m(n, null, T, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (t) => "readonly" in t, get: (t) => t.readonly, set: (t, s) => {
+    } }, metadata: e }, P, T), m(n, null, z, { kind: "accessor", name: "readonly", static: !1, private: !1, access: { has: (t) => "readonly" in t, get: (t) => t.readonly, set: (t, s) => {
       t.readonly = s;
-    } }, metadata: e }, z, N), m(n, null, U, { kind: "accessor", name: "_displayValue", static: !1, private: !1, access: { has: (t) => "_displayValue" in t, get: (t) => t._displayValue, set: (t, s) => {
+    } }, metadata: e }, N, U), m(n, null, B, { kind: "accessor", name: "_displayValue", static: !1, private: !1, access: { has: (t) => "_displayValue" in t, get: (t) => t._displayValue, set: (t, s) => {
       t._displayValue = s;
-    } }, metadata: e }, B, K), m(null, o = { value: b }, a, { kind: "class", name: b.name, metadata: e }, null, l), p = b = o.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), n.styles = de, n.events = {
+    } }, metadata: e }, K, M), m(null, o = { value: b }, a, { kind: "class", name: b.name, metadata: e }, null, l), p = b = o.value, e && Object.defineProperty(b, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), n.styles = pe, n.events = {
     didChange: "didChange",
     change: "change",
     input: "input",
@@ -428,5 +430,5 @@ let he = 0, Se = (() => {
   return p = b;
 })();
 export {
-  Se as SbbSelectElement
+  De as SbbSelectElement
 };

package/slider/slider.d.ts

@@ -40,6 +40,11 @@ export declare class SbbSliderElement extends SbbSliderElement_base {
     accessor startIcon: string;
     /** Name of the icon at component's end, which will be forward to the nested `sbb-icon`. */
     accessor endIcon: string;
+    /**
+     * Form type of element.
+     * @default 'range'
+     */
+    get type(): string;
     /**
      * The ratio between the absolute value and the validity interval.
      * E.g. given `min=0`, `max=100` and `value=50`, then `_valueFraction=0.5`

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;AAQhD,OAAO,EACL,KAAK,iBAAiB,EACtB,KAAK,gBAAgB,EAGtB,MAAM,mBAAmB,CAAC;AAI3B,OAAO,YAAY,CAAC;;AAEpB;;;;;;;GAOG;AACH,qBAKM,gBAAiB,SAAQ,qBAAoD;IACjF,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;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,6FAA6F;IAC7F,SAEgB,SAAS,EAAE,MAAM,CAAM;IAEvC,2FAA2F;IAC3F,SAEgB,OAAO,EAAE,MAAM,CAAM;IAErC;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAK;IAE7C;;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;cAIY,eAAe,IAAI,IAAI;IAI1C;;;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"}
+{"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;;;;;;;GAOG;AACH,qBAKM,gBAAiB,SAAQ,qBAAoD;IACjF,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;IACH,SAEgB,QAAQ,EAAE,OAAO,CAAS;IAE1C,6FAA6F;IAC7F,SAEgB,SAAS,EAAE,MAAM,CAAM;IAEvC,2FAA2F;IAC3F,SAEgB,OAAO,EAAE,MAAM,CAAM;IAErC;;;OAGG;IACH,IAAoB,IAAI,IAAI,MAAM,CAEjC;IAED;;;OAGG;IACM,OAAO,CAAC,QAAQ,CAAC,cAAc,CAAK;IAE7C;;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;cAIY,eAAe,IAAI,IAAI;IAI1C;;;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"}

package/slider.js

@@ -4,7 +4,7 @@ var H = (t) => {
 var L = (t, r, l) => r.has(t) || H("Cannot " + l);
 var f = (t, r, l) => (L(t, r, "read from private field"), l ? l.call(t) : r.get(t)), p = (t, r, l) => r.has(t) ? H("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(t) : r.set(t, l), b = (t, r, l, o) => (L(t, r, "write to private field"), o ? o.call(t, l) : r.set(t, l), l);
 import { __esDecorate as d, __runInitializers as n } from "tslib";
-import { css as O, LitElement as j, html as x, nothing as y } from "lit";
+import { css as O, LitElement as j, html as y, nothing as x } from "lit";
 import { customElement as K, property as c, state as Y } from "lit/decorators.js";
 import { ref as q } from "lit/directives/ref.js";
 import { styleMap as J } from "lit/directives/style-map.js";
@@ -86,6 +86,13 @@ let me = (() => {
     set endIcon(e) {
       b(this, m, e);
     }
+    /**
+     * Form type of element.
+     * @default 'range'
+     */
+    get type() {
+      return "range";
+    }
     /**
      * The ratio between the absolute value and the validity interval.
      * E.g. given `min=0`, `max=100` and `value=50`, then `_valueFraction=0.5`
@@ -164,11 +171,11 @@ let me = (() => {
       X(e, this), this._didChange.emit();
     }
     render() {
-      return x`
+      return y`
       <div class="sbb-slider__height-container">
         <div class="sbb-slider__wrapper">
           <slot name="prefix">
-            ${this.startIcon ? x`<sbb-icon name="${this.startIcon}"></sbb-icon>` : y}
+            ${this.startIcon ? y`<sbb-icon name="${this.startIcon}"></sbb-icon>` : x}
           </slot>
           <div
             class="sbb-slider__container"
@@ -179,7 +186,7 @@ let me = (() => {
               min=${this.min}
               max=${this.max}
               ?disabled=${this.disabled || this.formDisabled || this.readonly}
-              value=${this.value || y}
+              value=${this.value || x}
               class="sbb-slider__range-input"
               type="range"
               @change=${(e) => this._emitChange(e)}
@@ -192,7 +199,7 @@ let me = (() => {
             <div class="sbb-slider__knob"></div>
           </div>
           <slot name="suffix">
-            ${this.endIcon ? x`<sbb-icon name="${this.endIcon}"></sbb-icon>` : y}
+            ${this.endIcon ? y`<sbb-icon name="${this.endIcon}"></sbb-icon>` : x}
           </slot>
         </div>
       </div>

package/table/table-wrapper/table-wrapper.d.ts

@@ -9,7 +9,7 @@ export declare class SbbTableWrapperElement extends SbbTableWrapperElement_base
     static styles: CSSResultGroup;
     private _resizeObserver;
     private _tableWrapper;
-    protected firstUpdated(changedProperties: PropertyValues): void;
+    protected firstUpdated(changedProperties: PropertyValues<this>): void;
     private _checkHorizontalScrollbar;
     protected render(): TemplateResult;
 }

package/table/table-wrapper/table-wrapper.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAOb;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,aAAa,CAAe;cAEjB,YAAY,CAAC,iBAAiB,EAAE,cAAc,GAAG,IAAI;IAMxE,OAAO,CAAC,yBAAyB;cAOd,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}
+{"version":3,"file":"table-wrapper.d.ts","sourceRoot":"","sources":["../../../../src/elements/table/table-wrapper/table-wrapper.ts"],"names":[],"mappings":"AACA,OAAO,EACL,KAAK,cAAc,EAEnB,UAAU,EACV,KAAK,cAAc,EACnB,KAAK,cAAc,EACpB,MAAM,KAAK,CAAC;;AAOb;;;;GAIG;AACH,qBAEM,sBAAuB,SAAQ,2BAA4B;IAC/D,OAAuB,MAAM,EAAE,cAAc,CAAS;IAEtD,OAAO,CAAC,eAAe,CAIpB;IACH,OAAO,CAAC,aAAa,CAAe;cAEjB,YAAY,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;IAM9E,OAAO,CAAC,yBAAyB;cAOd,MAAM,IAAI,cAAc;CAK5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,mBAAmB,EAAE,sBAAsB,CAAC;KAC7C;CACF"}

package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts

@@ -9,8 +9,9 @@ export declare class SbbTimetableOccupancyIconElement extends SbbTimetableOccupa
     static styles: CSSResultGroup;
     /** Wagon occupancy. */
     accessor occupancy: SbbOccupancy;
-    private _abort;
     private _language;
+    private _mediaMatcher;
+    private _forcedColors;
     private _setNameAndAriaLabel;
     protected fetchSvgIcon(namespace: string, name: string): Promise<string>;
     private _setAriaLabel;

package/timetable-occupancy-icon/timetable-occupancy-icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy-icon/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAM1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;;AAIzC;;GAEG;AACH,qBAEM,gCAAiC,SAAQ,qCAA6B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAA+B;IAE5E,uBAAuB;IACvB,SAA4B,SAAS,EAAE,YAAY,CAAU;IAE7D,OAAO,CAAC,MAAM,CAAyC;IACvD,OAAO,CAAC,SAAS,CAA2E;YAE9E,oBAAoB;cAeT,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAKvF,OAAO,CAAC,aAAa;IAOL,iBAAiB,IAAI,IAAI;cAUtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}
+{"version":3,"file":"timetable-occupancy-icon.d.ts","sourceRoot":"","sources":["../../../src/elements/timetable-occupancy-icon/timetable-occupancy-icon.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAU1D,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,uBAAuB,CAAC;AAE1D,OAAO,EAAE,WAAW,EAAE,MAAM,YAAY,CAAC;;AAIzC;;GAEG;AACH,qBAEM,gCAAiC,SAAQ,qCAA6B;IAC1E,OAAuB,MAAM,EAAE,cAAc,CAA+B;IAE5E,uBAAuB;IACvB,SAA4B,SAAS,EAAE,YAAY,CAAU;IAE7D,OAAO,CAAC,SAAS,CAA2E;IAC5F,OAAO,CAAC,aAAa,CAKlB;IAEH,OAAO,CAAC,aAAa,CAA2E;YAElF,oBAAoB;cAeT,YAAY,CAAC,SAAS,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,OAAO,CAAC,MAAM,CAAC;IAKvF,OAAO,CAAC,aAAa;IAOL,iBAAiB,IAAI,IAAI;cAKtB,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;CAO7E;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,8BAA8B,EAAE,gCAAgC,CAAC;KAClE;CACF"}

package/timetable-occupancy-icon.js

@@ -1,63 +1,64 @@
-var p = (e) => {
-  throw TypeError(e);
+var b = (t) => {
+  throw TypeError(t);
 };
-var d = (e, a, c) => a.has(e) || p("Cannot " + c);
-var y = (e, a, c) => (d(e, a, "read from private field"), c ? c.call(e) : a.get(e)), _ = (e, a, c) => a.has(e) ? p("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(e) : a.set(e, c), r = (e, a, c, i) => (d(e, a, "write to private field"), i ? i.call(e, c) : a.set(e, c), c);
-import { __runInitializers as l, __esDecorate as f } from "tslib";
-import { customElement as A, property as S } from "lit/decorators.js";
-import { SbbConnectedAbortController as w, SbbLanguageController as L } from "./core/controllers.js";
-import { setOrRemoveAttribute as I } from "./core/dom.js";
-import { i18nOccupancy as x } from "./core/i18n.js";
-import { SbbNegativeMixin as z } from "./core/mixins.js";
-import { SbbIconBase as g } from "./icon.js";
-import { css as C } from "lit";
-const N = C`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
-let R = (() => {
-  var o, n;
-  let e = [A("sbb-timetable-occupancy-icon")], a, c = [], i, u = z(g), m, h = [], b = [];
-  return n = class extends u {
+var _ = (t, a, c) => a.has(t) || b("Cannot " + c);
+var d = (t, a, c) => (_(t, a, "read from private field"), c ? c.call(t) : a.get(t)), y = (t, a, c) => a.has(t) ? b("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, c), l = (t, a, c, s) => (_(t, a, "write to private field"), s ? s.call(t, c) : a.set(t, c), c);
+import { __runInitializers as n, __esDecorate as f } from "tslib";
+import { customElement as A, property as C } from "lit/decorators.js";
+import { SbbLanguageController as I, SbbMediaMatcherController as L, SbbMediaQueryForcedColors as g } from "./core/controllers.js";
+import { setOrRemoveAttribute as w } from "./core/dom.js";
+import { i18nOccupancy as M } from "./core/i18n.js";
+import { SbbNegativeMixin as x } from "./core/mixins.js";
+import { SbbIconBase as v } from "./icon.js";
+import { css as z } from "lit";
+const N = z`@media (forced-colors: active) and (prefers-color-scheme: light){:host svg{filter:invert(1)}}`;
+let Q = (() => {
+  var o, r;
+  let t = [A("sbb-timetable-occupancy-icon")], a, c = [], s, u = x(v), m, h = [], p = [];
+  return r = class extends u {
     constructor() {
       super(...arguments);
-      _(this, o);
-      r(this, o, l(this, h, "none")), this._abort = (l(this, b), new w(this)), this._language = new L(this).withHandler(() => this._setAriaLabel());
+      y(this, o);
+      l(this, o, n(this, h, "none")), this._language = (n(this, p), new I(this).withHandler(() => this._setAriaLabel())), this._mediaMatcher = new L(this, {
+        [g]: (e) => {
+          this._forcedColors = e, this._setNameAndAriaLabel();
+        }
+      }), this._forcedColors = this._mediaMatcher.matches(g) ?? !1;
     }
     /** Wagon occupancy. */
     get occupancy() {
-      return y(this, o);
+      return d(this, o);
     }
-    set occupancy(t) {
-      r(this, o, t);
+    set occupancy(e) {
+      l(this, o, e);
     }
     async _setNameAndAriaLabel() {
-      var s;
       if (!this.occupancy)
         return;
-      let t = `utilization-${this.occupancy}`;
-      (s = globalThis.window) != null && s.matchMedia("(forced-colors: active)").matches ? t += "-high-contrast" : this.negative && (t += "-negative"), await this.loadSvgIcon(t);
+      let e = `utilization-${this.occupancy}`;
+      this._forcedColors ? e += "-high-contrast" : this.negative && (e += "-negative"), await this.loadSvgIcon(e);
     }
-    async fetchSvgIcon(t, s) {
-      return this._setAriaLabel(), super.fetchSvgIcon(t, s);
+    async fetchSvgIcon(e, i) {
+      return this._setAriaLabel(), super.fetchSvgIcon(e, i);
     }
     _setAriaLabel() {
-      var s;
-      const t = (s = x[this.occupancy]) == null ? void 0 : s[this._language.current];
-      I(this, "aria-label", t);
+      var i;
+      const e = (i = M[this.occupancy]) == null ? void 0 : i[this._language.current];
+      w(this, "aria-label", e);
     }
     connectedCallback() {
-      super.connectedCallback(), window.matchMedia("(forced-colors: active)").addEventListener("change", () => this._setNameAndAriaLabel(), {
-        signal: this._abort.signal
-      }), this._setNameAndAriaLabel();
-    }
-    willUpdate(t) {
-      super.willUpdate(t), (t.has("occupancy") || t.has("negative")) && this._setNameAndAriaLabel();
-    }
-  }, o = new WeakMap(), i = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    m = [S()], f(n, null, m, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (s) => "occupancy" in s, get: (s) => s.occupancy, set: (s, v) => {
-      s.occupancy = v;
-    } }, metadata: t }, h, b), f(null, a = { value: i }, e, { kind: "class", name: i.name, metadata: t }, null, c), i = a.value, t && Object.defineProperty(i, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), n.styles = [g.styles, N], l(i, c), i;
+      super.connectedCallback(), this._setNameAndAriaLabel();
+    }
+    willUpdate(e) {
+      super.willUpdate(e), (e.has("occupancy") || e.has("negative")) && this._setNameAndAriaLabel();
+    }
+  }, o = new WeakMap(), s = r, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
+    m = [C()], f(r, null, m, { kind: "accessor", name: "occupancy", static: !1, private: !1, access: { has: (i) => "occupancy" in i, get: (i) => i.occupancy, set: (i, S) => {
+      i.occupancy = S;
+    } }, metadata: e }, h, p), f(null, a = { value: s }, t, { kind: "class", name: s.name, metadata: e }, null, c), s = a.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = [v.styles, N], n(s, c), s;
 })();
 export {
-  R as SbbTimetableOccupancyIconElement
+  Q as SbbTimetableOccupancyIconElement
 };

package/toggle-check/toggle-check.d.ts

@@ -21,7 +21,7 @@ export declare class SbbToggleCheckElement extends SbbToggleCheckElement_base {
     accessor iconName: string;
     /** The label position relative to the toggle. Defaults to 'after' */
     accessor labelPosition: 'before' | 'after';
-    protected willUpdate(changedProperties: PropertyValues<this>): Promise<void>;
+    protected willUpdate(changedProperties: PropertyValues<this>): void;
     protected render(): TemplateResult;
 }
 declare global {

package/toggle-check/toggle-check.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"toggle-check.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle-check/toggle-check.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;;;;;;GASG;AACH,qBAGM,qBAAsB,SAAQ,0BAA4D;IAC9F,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,uCAAuC;IACvC,SAA6C,IAAI,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAO;IAE1E,gEAAgE;IAChE,SAEyB,QAAQ,EAAE,MAAM,CAAgB;IAEzD,qEAAqE;IACrE,SACgB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAW;cAEnC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,OAAO,CAAC,IAAI,CAAC;cASxE,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}
+{"version":3,"file":"toggle-check.d.ts","sourceRoot":"","sources":["../../../src/elements/toggle-check/toggle-check.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,cAAc,EAAE,cAAc,EAAE,MAAM,KAAK,CAAC;AAC1E,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;;AASvC;;;;;;;;;GASG;AACH,qBAGM,qBAAsB,SAAQ,0BAA4D;IAC9F,OAAuB,MAAM,EAAE,cAAc,CAAS;IACtD,gBAAuB,MAAM;;MAElB;IAEX,uCAAuC;IACvC,SAA6C,IAAI,EAAE,IAAI,GAAG,GAAG,GAAG,GAAG,CAAO;IAE1E,gEAAgE;IAChE,SAEyB,QAAQ,EAAE,MAAM,CAAgB;IAEzD,qEAAqE;IACrE,SACgB,aAAa,EAAE,QAAQ,GAAG,OAAO,CAAW;cAEzC,UAAU,CAAC,iBAAiB,EAAE,cAAc,CAAC,IAAI,CAAC,GAAG,IAAI;cASzD,MAAM,IAAI,cAAc;CAgB5C;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAE7B,kBAAkB,EAAE,qBAAqB,CAAC;KAC3C;CACF"}

package/toggle-check.js

@@ -42,7 +42,7 @@ let J = (() => {
     set labelPosition(s) {
       k(this, n, s);
     }
-    async willUpdate(s) {
+    willUpdate(s) {
       super.willUpdate(s), s.has("checked") && (this.internals.ariaChecked = `${this.checked}`, this.toggleAttribute("data-checked", this.checked));
     }
     render() {