@sbb-esta/lyne-elements 0.52.1 → 0.52.2

package/select.js

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