@sbb-esta/lyne-elements-dev 5.0.0-next.2-dev.1778120187 → 5.0.0-next.2-dev.1778141158

package/development/select.js

@@ -1,4 +1,4 @@
-import { t as SbbSelectElement } from "./select.component-B8_tnz6D.js";
+import { t as SbbSelectElement } from "./select.component-VODtrUee.js";
 import "./select.pure.js";
 //#region src/elements/select.ts
 /** @entrypoint */

package/development/select.pure.js

@@ -1,2 +1,2 @@
-import { t as SbbSelectElement } from "./select.component-B8_tnz6D.js";
+import { t as SbbSelectElement } from "./select.component-VODtrUee.js";
 export { SbbSelectElement };

package/development/styles-CmwkvLqU.js

@@ -0,0 +1,22 @@
+import { unsafeCSS } from "lit";
+//#region src/elements/core/styles/host-scrollbar.scss?inline
+var host_scrollbar_default = ":host {\n  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);\n  --sbb-scrollbar-thumb-width: 0.125rem;\n  --sbb-scrollbar-thumb-width-hover: 0.25rem;\n  --sbb-scrollbar-width-firefox: thin;\n  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-scrollbar-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),\n    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)\n  );\n  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);\n  --sbb-scrollbar-color-hover: light-dark(\n    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),\n    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)\n  );\n}\n:host::-webkit-scrollbar {\n  width: var(--sbb-scrollbar-width);\n  height: var(--sbb-scrollbar-width);\n  background-color: var(--sbb-scrollbar-track-color, transparent);\n}\n:host::-webkit-scrollbar-corner {\n  background-color: var(--sbb-scrollbar-track-color, transparent);\n}\n:host::-webkit-scrollbar-thumb {\n  background-color: var(--sbb-scrollbar-color, currentcolor);\n  border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;\n  border-radius: var(--sbb-border-radius-4x);\n  background-clip: padding-box;\n}\n:host::-webkit-scrollbar-thumb:hover {\n  background-color: var(--sbb-scrollbar-color-hover, currentcolor);\n  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));\n}\n:host::-webkit-scrollbar-button, :host::-webkit-scrollbar-corner {\n  display: none;\n}\n@supports not selector(::-webkit-scrollbar) {\n  :host {\n    scrollbar-width: var(--sbb-scrollbar-width-firefox);\n    scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);\n  }\n}";
+//#endregion
+//#region src/elements/core/styles/option-panel-common.scss?inline
+var option_panel_common_default = ":host {\n  --sbb-options-panel-position-x: 0;\n  --sbb-options-panel-position-y: 0;\n  --sbb-options-pointer-events: all;\n  --_sbb-options-panel-max-height: min(\n    var(--sbb-options-panel-max-height-calculated),\n    var(--sbb-options-panel-max-height, 100000em)\n  );\n  --sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);\n  --sbb-options-panel-options-border-radius: 0 0 var(--sbb-options-panel-border-radius)\n    var(--sbb-options-panel-border-radius);\n  --sbb-options-panel-animation-duration: var(\n    --sbb-disable-animation-duration,\n    var(--sbb-animation-duration-4x)\n  );\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-default);\n  --sbb-focus-outline-color: light-dark(\n    var(--sbb-focus-outline-color-default),\n    var(--sbb-focus-outline-color-dark)\n  );\n  --sbb-options-panel-internal-z-index: var(\n    --sbb-select-z-index,\n    var(--sbb-overlay-default-z-index)\n  );\n  font-weight: normal;\n}\n\n:host([negative]) {\n  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard-negative);\n  --sbb-options-panel-background-color: var(--sbb-background-color-2-negative);\n  --sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);\n}\n\n:host(:not(:is(:state(state-opening),[state--state-opening]), :is(:state(state-opened),[state--state-opened]), :is(:state(state-closing),[state--state-closing]))),\n:host(:is(:state(state-closed),[state--state-closed])) {\n  --sbb-options-panel-visibility: hidden;\n  --sbb-options-pointer-events: none;\n}\n\n:host(:is(:state(state-opening),[state--state-opening])) {\n  --sbb-options-panel-animation-name: open;\n}\n\n:host(:is(:state(state-closing),[state--state-closing])) {\n  --sbb-options-panel-animation-name: close;\n}\n\n:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) {\n  --sbb-options-panel-animation-translate: var(--sbb-spacing-fixed-2x);\n}\n\n:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) {\n  --sbb-options-panel-options-border-radius: var(--sbb-options-panel-border-radius)\n    var(--sbb-options-panel-border-radius) 0 0;\n  --sbb-options-panel-animation-translate: calc(-1 * var(--sbb-spacing-fixed-2x));\n  --sbb-options-panel-margin-block-start: calc(-1 * var(--sbb-spacing-fixed-2x));\n}\n\n:host([preserve-icon-space]) {\n  --sbb-option-icon-container-display: block;\n}\n\n::slotted(sbb-divider) {\n  margin-block: var(--sbb-options-panel-divider-margin-block);\n}\n\n.sbb-option-panel__overlay-container {\n  position: fixed;\n  pointer-events: none;\n  inset: 0;\n  z-index: var(--sbb-options-panel-internal-z-index);\n}\n.sbb-option-panel__overlay-container::after {\n  content: \"\";\n  display: block;\n  position: absolute;\n  top: var(--sbb-options-panel-origin-position-y);\n  left: var(--sbb-options-panel-origin-position-x);\n  width: var(--sbb-options-panel-width);\n  height: var(--sbb-options-panel-origin-height);\n  background-color: transparent;\n  border-radius: var(--sbb-options-panel-border-radius);\n  transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n}\n:host(:is(:is(:state(state-opened),[state--state-opened]), :is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container::after {\n  box-shadow: var(--sbb-options-panel-box-shadow);\n}\n\n.sbb-option-panel__overlay {\n  display: block;\n  position: absolute;\n  visibility: var(--sbb-options-panel-visibility, \"visible\");\n  border: none;\n  border-radius: var(--sbb-options-panel-border-radius);\n  top: var(--sbb-options-panel-position-y);\n  left: var(--sbb-options-panel-position-x);\n  width: var(--sbb-options-panel-width, fit-content);\n  transition: box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);\n  box-shadow: var(--sbb-options-panel-box-shadow);\n  background-color: var(--sbb-options-panel-background-color);\n  margin-block-start: var(--sbb-options-panel-margin-block-start);\n  padding-block: var(--sbb-options-panel-padding-block);\n  padding-inline: 0;\n  max-height: var(--_sbb-options-panel-max-height);\n  min-height: var(--sbb-options-panel-min-height);\n  pointer-events: var(--sbb-options-pointer-events);\n  overflow: hidden auto;\n  animation-name: var(--sbb-options-panel-animation-name);\n  animation-duration: var(--sbb-options-panel-animation-duration);\n  animation-timing-function: var(--sbb-options-panel-animation-timing-function);\n}\n@media (forced-colors: active) {\n  .sbb-option-panel__overlay {\n    border: var(--sbb-border-width-1x) solid CanvasText;\n  }\n}\n\n@keyframes open {\n  from {\n    translate: 0 var(--sbb-options-panel-animation-translate);\n    opacity: 0;\n  }\n  to {\n    translate: 0;\n    opacity: 1;\n  }\n}\n@keyframes close {\n  from {\n    translate: 0;\n    opacity: 1;\n  }\n  to {\n    translate: 0 var(--sbb-options-panel-animation-translate);\n    opacity: 0;\n  }\n}";
+//#endregion
+//#region src/elements/core/styles/screen-reader-only.scss?inline
+var screen_reader_only_default = ".sbb-screen-reader-only {\n  border: 0;\n  clip-path: rect(0 0 0 0);\n  height: 1px;\n  margin: -1px;\n  overflow: hidden;\n  padding: 0;\n  position: absolute;\n  white-space: nowrap;\n  width: 1px;\n}";
+//#endregion
+//#region src/elements/core/styles/scrollbar.scss?inline
+var scrollbar_default = ":is(.sbb-scrollbar,\n.sbb-scrollbar-negative,\n.sbb-scrollbar-thick,\n.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-track-visible,\n.sbb-scrollbar-negative-track-visible,\n.sbb-scrollbar-thick-track-visible,\n.sbb-scrollbar-thick-negative-track-visible) {\n  --sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);\n  --sbb-scrollbar-thumb-width: 0.125rem;\n  --sbb-scrollbar-thumb-width-hover: 0.25rem;\n  --sbb-scrollbar-width-firefox: thin;\n  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);\n  --sbb-scrollbar-color: light-dark(\n    color-mix(in srgb, var(--sbb-color-black) 30%, transparent),\n    color-mix(in srgb, var(--sbb-color-white) 30%, transparent)\n  );\n  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);\n  --sbb-scrollbar-color-hover: light-dark(\n    color-mix(in srgb, var(--sbb-color-black) 60%, transparent),\n    color-mix(in srgb, var(--sbb-color-white) 60%, transparent)\n  );\n}\n:is(.sbb-scrollbar,\n.sbb-scrollbar-negative,\n.sbb-scrollbar-thick,\n.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-track-visible,\n.sbb-scrollbar-negative-track-visible,\n.sbb-scrollbar-thick-track-visible,\n.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar {\n  width: var(--sbb-scrollbar-width);\n  height: var(--sbb-scrollbar-width);\n  background-color: var(--sbb-scrollbar-track-color, transparent);\n}\n:is(.sbb-scrollbar,\n.sbb-scrollbar-negative,\n.sbb-scrollbar-thick,\n.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-track-visible,\n.sbb-scrollbar-negative-track-visible,\n.sbb-scrollbar-thick-track-visible,\n.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner {\n  background-color: var(--sbb-scrollbar-track-color, transparent);\n}\n:is(.sbb-scrollbar,\n.sbb-scrollbar-negative,\n.sbb-scrollbar-thick,\n.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-track-visible,\n.sbb-scrollbar-negative-track-visible,\n.sbb-scrollbar-thick-track-visible,\n.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-thumb {\n  background-color: var(--sbb-scrollbar-color, currentcolor);\n  border: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width))) solid transparent;\n  border-radius: var(--sbb-border-radius-4x);\n  background-clip: padding-box;\n}\n:is(.sbb-scrollbar,\n.sbb-scrollbar-negative,\n.sbb-scrollbar-thick,\n.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-track-visible,\n.sbb-scrollbar-negative-track-visible,\n.sbb-scrollbar-thick-track-visible,\n.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-thumb:hover {\n  background-color: var(--sbb-scrollbar-color-hover, currentcolor);\n  border-width: calc(0.5 * (var(--sbb-scrollbar-width) - var(--sbb-scrollbar-thumb-width-hover)));\n}\n:is(.sbb-scrollbar,\n.sbb-scrollbar-negative,\n.sbb-scrollbar-thick,\n.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-track-visible,\n.sbb-scrollbar-negative-track-visible,\n.sbb-scrollbar-thick-track-visible,\n.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-button, :is(.sbb-scrollbar,\n.sbb-scrollbar-negative,\n.sbb-scrollbar-thick,\n.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-track-visible,\n.sbb-scrollbar-negative-track-visible,\n.sbb-scrollbar-thick-track-visible,\n.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner {\n  display: none;\n}\n@supports not selector(::-webkit-scrollbar) {\n  :is(.sbb-scrollbar,\n  .sbb-scrollbar-negative,\n  .sbb-scrollbar-thick,\n  .sbb-scrollbar-thick-negative,\n  .sbb-scrollbar-track-visible,\n  .sbb-scrollbar-negative-track-visible,\n  .sbb-scrollbar-thick-track-visible,\n  .sbb-scrollbar-thick-negative-track-visible) {\n    scrollbar-width: var(--sbb-scrollbar-width-firefox);\n    scrollbar-color: var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent);\n  }\n}\n\n:is(.sbb-scrollbar-negative,\n.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-negative-track-visible,\n.sbb-scrollbar-thick-negative-track-visible) {\n  --sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);\n  --sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);\n}\n\n:is(.sbb-scrollbar-thick-negative,\n.sbb-scrollbar-thick,\n.sbb-scrollbar-thick-track-visible,\n.sbb-scrollbar-thick-negative-track-visible) {\n  --sbb-scrollbar-thumb-width: 0.5rem;\n  --sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);\n  --sbb-scrollbar-width-firefox: auto;\n}\n\n:is(.sbb-scrollbar-track-visible, .sbb-scrollbar-thick-track-visible) {\n  --sbb-scrollbar-track-color: var(--sbb-background-color-4);\n}\n\n:is(.sbb-scrollbar-negative-track-visible, .sbb-scrollbar-thick-negative-track-visible) {\n  --sbb-scrollbar-track-color: var(--sbb-background-color-4-negative);\n}";
+//#endregion
+//#region src/elements/core/styles/styles.ts
+var hostScrollbarStyles = unsafeCSS(host_scrollbar_default);
+var optionPanelStyles = unsafeCSS(option_panel_common_default);
+var screenReaderOnlyStyles = unsafeCSS(screen_reader_only_default);
+var scrollbarStyles = unsafeCSS(scrollbar_default);
+//#endregion
+export { scrollbarStyles as i, optionPanelStyles as n, screenReaderOnlyStyles as r, hostScrollbarStyles as t };
+
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoic3R5bGVzLUNtd2t2THFVLmpzIiwibmFtZXMiOltdLCJzb3VyY2VzIjpbIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9jb3JlL3N0eWxlcy9ob3N0LXNjcm9sbGJhci5zY3NzP2lubGluZSIsIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9jb3JlL3N0eWxlcy9vcHRpb24tcGFuZWwtY29tbW9uLnNjc3M/aW5saW5lIiwiLi4vLi4vLi4vc3JjL2VsZW1lbnRzL2NvcmUvc3R5bGVzL3NjcmVlbi1yZWFkZXItb25seS5zY3NzP2lubGluZSIsIi4uLy4uLy4uL3NyYy9lbGVtZW50cy9jb3JlL3N0eWxlcy9zY3JvbGxiYXIuc2Nzcz9pbmxpbmUiLCIuLi8uLi8uLi9zcmMvZWxlbWVudHMvY29yZS9zdHlsZXMvc3R5bGVzLnRzIl0sInNvdXJjZXNDb250ZW50IjpbIkB1c2UgJy4vbWl4aW5zL3Njcm9sbGJhcic7XG5cbjpob3N0IHtcbiAgQGluY2x1ZGUgc2Nyb2xsYmFyLnNjcm9sbGJhci12YXJpYWJsZXM7XG4gIEBpbmNsdWRlIHNjcm9sbGJhci5zY3JvbGxiYXItcnVsZXM7XG59XG4iLCJAdXNlICcuL21peGlucy9hMTF5JztcblxuOmhvc3Qge1xuICAtLXNiYi1vcHRpb25zLXBhbmVsLXBvc2l0aW9uLXg6IDA7XG4gIC0tc2JiLW9wdGlvbnMtcGFuZWwtcG9zaXRpb24teTogMDtcbiAgLS1zYmItb3B0aW9ucy1wb2ludGVyLWV2ZW50czogYWxsO1xuXG4gIC8vIEluIG9yZGVyIHRvIGhhdmUgYSB2YWxpZCB2YWx1ZSwgd2UgbmVlZCBhIGJpZyBpbnRlZ2VyIHRvIG5vdCBmYWxsIGludG8gdGhlIG1pbmltdW1cbiAgLS1fc2JiLW9wdGlvbnMtcGFuZWwtbWF4LWhlaWdodDogbWluKFxuICAgIHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLW1heC1oZWlnaHQtY2FsY3VsYXRlZCksXG4gICAgdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtbWF4LWhlaWdodCwgMTAwMDAwZW0pXG4gICk7XG4gIC0tc2JiLW9wdGlvbnMtcGFuZWwtbWluLWhlaWdodDogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtb3JpZ2luLWhlaWdodCk7XG4gIC0tc2JiLW9wdGlvbnMtcGFuZWwtb3B0aW9ucy1ib3JkZXItcmFkaXVzOiAwIDAgdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtYm9yZGVyLXJhZGl1cylcbiAgICB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1ib3JkZXItcmFkaXVzKTtcbiAgLS1zYmItb3B0aW9ucy1wYW5lbC1hbmltYXRpb24tZHVyYXRpb246IHZhcihcbiAgICAtLXNiYi1kaXNhYmxlLWFuaW1hdGlvbi1kdXJhdGlvbixcbiAgICB2YXIoLS1zYmItYW5pbWF0aW9uLWR1cmF0aW9uLTR4KVxuICApO1xuXG4gIC8vIEFzIHRoZSBvdmVybGF5cyBoYXZlIGFsd2F5cyBhIHdoaXRlIGJhY2tncm91bmQsIHdlIGhhdmUgdG8gZml4IHRoZSBmb2N1cyBvdXRsaW5lIGNvbG9yXG4gIC8vIHRvIGRlZmF1bHQgY29sb3IgZm9yIGNhc2VzIHdoZXJlIHRoZSBvdmVybGF5cyBhcmUgdXNlZCBpbiBhIG5lZ2F0aXZlIGNvbnRleHQuXG4gIC0tc2JiLWZvY3VzLW91dGxpbmUtY29sb3I6IGxpZ2h0LWRhcmsoXG4gICAgdmFyKC0tc2JiLWZvY3VzLW91dGxpbmUtY29sb3ItZGVmYXVsdCksXG4gICAgdmFyKC0tc2JiLWZvY3VzLW91dGxpbmUtY29sb3ItZGFyaylcbiAgKTtcbiAgLS1zYmItb3B0aW9ucy1wYW5lbC1pbnRlcm5hbC16LWluZGV4OiB2YXIoXG4gICAgLS1zYmItc2VsZWN0LXotaW5kZXgsXG4gICAgdmFyKC0tc2JiLW92ZXJsYXktZGVmYXVsdC16LWluZGV4KVxuICApO1xuXG4gIGZvbnQtd2VpZ2h0OiBub3JtYWw7XG59XG5cbjpob3N0KFtuZWdhdGl2ZV0pIHtcbiAgLS1zYmItb3B0aW9ucy1wYW5lbC1ib3gtc2hhZG93OiB2YXIoLS1zYmItYm94LXNoYWRvdy1sZXZlbC05LWhhcmQtbmVnYXRpdmUpO1xuICAtLXNiYi1vcHRpb25zLXBhbmVsLWJhY2tncm91bmQtY29sb3I6IHZhcigtLXNiYi1iYWNrZ3JvdW5kLWNvbG9yLTItbmVnYXRpdmUpO1xuXG4gIC8vIEFzIHRoZSBvdmVybGF5cyBoYXZlIGFsd2F5cyBhIHdoaXRlIGJhY2tncm91bmQsIHdlIGhhdmUgdG8gZml4IHRoZSBmb2N1cyBvdXRsaW5lIGNvbG9yXG4gIC8vIHRvIGRlZmF1bHQgY29sb3IgZm9yIGNhc2VzIHdoZXJlIHRoZSBvdmVybGF5cyBhcmUgdXNlZCBpbiBhIG5lZ2F0aXZlIGNvbnRleHQuXG4gIC0tc2JiLWZvY3VzLW91dGxpbmUtY29sb3I6IHZhcigtLXNiYi1mb2N1cy1vdXRsaW5lLWNvbG9yLWRhcmspO1xufVxuXG46aG9zdCg6bm90KDpzdGF0ZShzdGF0ZS1vcGVuaW5nKSwgOnN0YXRlKHN0YXRlLW9wZW5lZCksIDpzdGF0ZShzdGF0ZS1jbG9zaW5nKSkpLFxuOmhvc3QoOnN0YXRlKHN0YXRlLWNsb3NlZCkpIHtcbiAgLS1zYmItb3B0aW9ucy1wYW5lbC12aXNpYmlsaXR5OiBoaWRkZW47XG4gIC0tc2JiLW9wdGlvbnMtcG9pbnRlci1ldmVudHM6IG5vbmU7XG59XG5cbjpob3N0KDpzdGF0ZShzdGF0ZS1vcGVuaW5nKSkge1xuICAtLXNiYi1vcHRpb25zLXBhbmVsLWFuaW1hdGlvbi1uYW1lOiBvcGVuO1xufVxuXG46aG9zdCg6c3RhdGUoc3RhdGUtY2xvc2luZykpIHtcbiAgLS1zYmItb3B0aW9ucy1wYW5lbC1hbmltYXRpb24tbmFtZTogY2xvc2U7XG59XG5cbjpob3N0KDpzdGF0ZShvcHRpb25zLXBhbmVsLXBvc2l0aW9uLWJlbG93KSkge1xuICAtLXNiYi1vcHRpb25zLXBhbmVsLWFuaW1hdGlvbi10cmFuc2xhdGU6IHZhcigtLXNiYi1zcGFjaW5nLWZpeGVkLTJ4KTtcbn1cblxuOmhvc3QoOnN0YXRlKG9wdGlvbnMtcGFuZWwtcG9zaXRpb24tYWJvdmUpKSB7XG4gIC0tc2JiLW9wdGlvbnMtcGFuZWwtb3B0aW9ucy1ib3JkZXItcmFkaXVzOiB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1ib3JkZXItcmFkaXVzKVxuICAgIHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLWJvcmRlci1yYWRpdXMpIDAgMDtcbiAgLS1zYmItb3B0aW9ucy1wYW5lbC1hbmltYXRpb24tdHJhbnNsYXRlOiBjYWxjKC0xICogdmFyKC0tc2JiLXNwYWNpbmctZml4ZWQtMngpKTtcbiAgLS1zYmItb3B0aW9ucy1wYW5lbC1tYXJnaW4tYmxvY2stc3RhcnQ6IGNhbGMoLTEgKiB2YXIoLS1zYmItc3BhY2luZy1maXhlZC0yeCkpO1xufVxuXG46aG9zdChbcHJlc2VydmUtaWNvbi1zcGFjZV0pIHtcbiAgLS1zYmItb3B0aW9uLWljb24tY29udGFpbmVyLWRpc3BsYXk6IGJsb2NrO1xufVxuXG46OnNsb3R0ZWQoc2JiLWRpdmlkZXIpIHtcbiAgbWFyZ2luLWJsb2NrOiB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1kaXZpZGVyLW1hcmdpbi1ibG9jayk7XG59XG5cbi5zYmItb3B0aW9uLXBhbmVsX19vdmVybGF5LWNvbnRhaW5lciB7XG4gIHBvc2l0aW9uOiBmaXhlZDtcbiAgcG9pbnRlci1ldmVudHM6IG5vbmU7XG4gIGluc2V0OiAwO1xuICB6LWluZGV4OiB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1pbnRlcm5hbC16LWluZGV4KTtcblxuICAvLyBOZWVkZWQgdG8gYWRkIHRoZSBib3gtc2hhZG93IG9uIHRoZSBvcmlnaW4gZWxlbWVudCAob25seSBpZiBib3JkZXJsZXNzKVxuICAmOjphZnRlciB7XG4gICAgY29udGVudDogJyc7XG4gICAgZGlzcGxheTogYmxvY2s7XG4gICAgcG9zaXRpb246IGFic29sdXRlO1xuICAgIHRvcDogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtb3JpZ2luLXBvc2l0aW9uLXkpO1xuICAgIGxlZnQ6IHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLW9yaWdpbi1wb3NpdGlvbi14KTtcbiAgICB3aWR0aDogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtd2lkdGgpO1xuICAgIGhlaWdodDogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtb3JpZ2luLWhlaWdodCk7XG4gICAgYmFja2dyb3VuZC1jb2xvcjogdHJhbnNwYXJlbnQ7XG4gICAgYm9yZGVyLXJhZGl1czogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtYm9yZGVyLXJhZGl1cyk7XG4gICAgdHJhbnNpdGlvbjogYm94LXNoYWRvdyB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1hbmltYXRpb24tZHVyYXRpb24pXG4gICAgICB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1hbmltYXRpb24tdGltaW5nLWZ1bmN0aW9uKTtcblxuICAgIDpob3N0KDppcyg6c3RhdGUoc3RhdGUtb3BlbmVkKSwgOnN0YXRlKHN0YXRlLW9wZW5pbmcpKTpzdGF0ZShvcHRpb24tcGFuZWwtb3JpZ2luLWJvcmRlcmxlc3MpKVxuICAgICAgJiB7XG4gICAgICBib3gtc2hhZG93OiB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1ib3gtc2hhZG93KTtcbiAgICB9XG4gIH1cbn1cblxuLnNiYi1vcHRpb24tcGFuZWxfX292ZXJsYXkge1xuICBkaXNwbGF5OiBibG9jaztcbiAgcG9zaXRpb246IGFic29sdXRlO1xuICB2aXNpYmlsaXR5OiB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC12aXNpYmlsaXR5LCAndmlzaWJsZScpO1xuICBib3JkZXI6IG5vbmU7XG4gIGJvcmRlci1yYWRpdXM6IHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLWJvcmRlci1yYWRpdXMpO1xuICB0b3A6IHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLXBvc2l0aW9uLXkpO1xuICBsZWZ0OiB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1wb3NpdGlvbi14KTtcbiAgd2lkdGg6IHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLXdpZHRoLCBmaXQtY29udGVudCk7XG4gIHRyYW5zaXRpb246IGJveC1zaGFkb3cgdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtYW5pbWF0aW9uLWR1cmF0aW9uKVxuICAgIHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLWFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb24pO1xuICBib3gtc2hhZG93OiB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1ib3gtc2hhZG93KTtcbiAgYmFja2dyb3VuZC1jb2xvcjogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtYmFja2dyb3VuZC1jb2xvcik7XG4gIG1hcmdpbi1ibG9jay1zdGFydDogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtbWFyZ2luLWJsb2NrLXN0YXJ0KTtcbiAgcGFkZGluZy1ibG9jazogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtcGFkZGluZy1ibG9jayk7XG4gIHBhZGRpbmctaW5saW5lOiAwO1xuICBtYXgtaGVpZ2h0OiB2YXIoLS1fc2JiLW9wdGlvbnMtcGFuZWwtbWF4LWhlaWdodCk7XG4gIG1pbi1oZWlnaHQ6IHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLW1pbi1oZWlnaHQpO1xuICBwb2ludGVyLWV2ZW50czogdmFyKC0tc2JiLW9wdGlvbnMtcG9pbnRlci1ldmVudHMpO1xuICBvdmVyZmxvdzogaGlkZGVuIGF1dG87XG4gIGFuaW1hdGlvbjoge1xuICAgIG5hbWU6IHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLWFuaW1hdGlvbi1uYW1lKTtcbiAgICBkdXJhdGlvbjogdmFyKC0tc2JiLW9wdGlvbnMtcGFuZWwtYW5pbWF0aW9uLWR1cmF0aW9uKTtcbiAgICB0aW1pbmctZnVuY3Rpb246IHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLWFuaW1hdGlvbi10aW1pbmctZnVuY3Rpb24pO1xuICB9XG5cbiAgQGluY2x1ZGUgYTExeS5pZi1mb3JjZWQtY29sb3JzIHtcbiAgICBib3JkZXI6IHZhcigtLXNiYi1ib3JkZXItd2lkdGgtMXgpIHNvbGlkIENhbnZhc1RleHQ7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBvcGVuIHtcbiAgZnJvbSB7XG4gICAgdHJhbnNsYXRlOiAwIHZhcigtLXNiYi1vcHRpb25zLXBhbmVsLWFuaW1hdGlvbi10cmFuc2xhdGUpO1xuICAgIG9wYWNpdHk6IDA7XG4gIH1cblxuICB0byB7XG4gICAgdHJhbnNsYXRlOiAwO1xuICAgIG9wYWNpdHk6IDE7XG4gIH1cbn1cblxuQGtleWZyYW1lcyBjbG9zZSB7XG4gIGZyb20ge1xuICAgIHRyYW5zbGF0ZTogMDtcbiAgICBvcGFjaXR5OiAxO1xuICB9XG5cbiAgdG8ge1xuICAgIHRyYW5zbGF0ZTogMCB2YXIoLS1zYmItb3B0aW9ucy1wYW5lbC1hbmltYXRpb24tdHJhbnNsYXRlKTtcbiAgICBvcGFjaXR5OiAwO1xuICB9XG59XG4iLCJAdXNlICcuL21peGlucy9hMTF5JztcblxuLnNiYi1zY3JlZW4tcmVhZGVyLW9ubHkge1xuICBAaW5jbHVkZSBhMTF5LnNjcmVlbi1yZWFkZXItb25seTtcbn1cbiIsIkB1c2UgJy4vbWl4aW5zL3Njcm9sbGJhcic7XG5cbjppcyhcbiAgLnNiYi1zY3JvbGxiYXIsXG4gIC5zYmItc2Nyb2xsYmFyLW5lZ2F0aXZlLFxuICAuc2JiLXNjcm9sbGJhci10aGljayxcbiAgLnNiYi1zY3JvbGxiYXItdGhpY2stbmVnYXRpdmUsXG4gIC5zYmItc2Nyb2xsYmFyLXRyYWNrLXZpc2libGUsXG4gIC5zYmItc2Nyb2xsYmFyLW5lZ2F0aXZlLXRyYWNrLXZpc2libGUsXG4gIC5zYmItc2Nyb2xsYmFyLXRoaWNrLXRyYWNrLXZpc2libGUsXG4gIC5zYmItc2Nyb2xsYmFyLXRoaWNrLW5lZ2F0aXZlLXRyYWNrLXZpc2libGVcbikge1xuICBAaW5jbHVkZSBzY3JvbGxiYXIuc2Nyb2xsYmFyLXZhcmlhYmxlcztcbiAgQGluY2x1ZGUgc2Nyb2xsYmFyLnNjcm9sbGJhci1ydWxlcztcbn1cblxuOmlzKFxuICAuc2JiLXNjcm9sbGJhci1uZWdhdGl2ZSxcbiAgLnNiYi1zY3JvbGxiYXItdGhpY2stbmVnYXRpdmUsXG4gIC5zYmItc2Nyb2xsYmFyLW5lZ2F0aXZlLXRyYWNrLXZpc2libGUsXG4gIC5zYmItc2Nyb2xsYmFyLXRoaWNrLW5lZ2F0aXZlLXRyYWNrLXZpc2libGVcbikge1xuICBAaW5jbHVkZSBzY3JvbGxiYXIuc2Nyb2xsYmFyLXZhcmlhYmxlcy0tY29sb3ItbmVnYXRpdmU7XG59XG5cbjppcyhcbiAgLnNiYi1zY3JvbGxiYXItdGhpY2stbmVnYXRpdmUsXG4gIC5zYmItc2Nyb2xsYmFyLXRoaWNrLFxuICAuc2JiLXNjcm9sbGJhci10aGljay10cmFjay12aXNpYmxlLFxuICAuc2JiLXNjcm9sbGJhci10aGljay1uZWdhdGl2ZS10cmFjay12aXNpYmxlXG4pIHtcbiAgQGluY2x1ZGUgc2Nyb2xsYmFyLnNjcm9sbGJhci12YXJpYWJsZXMtLXNpemUtdGhpY2s7XG59XG5cbjppcyguc2JiLXNjcm9sbGJhci10cmFjay12aXNpYmxlLCAuc2JiLXNjcm9sbGJhci10aGljay10cmFjay12aXNpYmxlKSB7XG4gIEBpbmNsdWRlIHNjcm9sbGJhci5zY3JvbGxiYXItdmFyaWFibGVzLS1jb2xvci1wb3NpdGl2ZS10cmFjay12aXNpYmxlO1xufVxuXG46aXMoLnNiYi1zY3JvbGxiYXItbmVnYXRpdmUtdHJhY2stdmlzaWJsZSwgLnNiYi1zY3JvbGxiYXItdGhpY2stbmVnYXRpdmUtdHJhY2stdmlzaWJsZSkge1xuICBAaW5jbHVkZSBzY3JvbGxiYXIuc2Nyb2xsYmFyLXZhcmlhYmxlcy0tY29sb3ItbmVnYXRpdmUtdHJhY2stdmlzaWJsZTtcbn1cbiIsImltcG9ydCB7IHVuc2FmZUNTUyB9IGZyb20gJ2xpdCc7XG5cbmltcG9ydCBob3N0U2Nyb2xsYmFyU3R5bGVzU3RyaW5nIGZyb20gJy4vaG9zdC1zY3JvbGxiYXIuc2Nzcz9pbmxpbmUnO1xuaW1wb3J0IG9wdGlvblBhbmVsU3RyaW5nIGZyb20gJy4vb3B0aW9uLXBhbmVsLWNvbW1vbi5zY3NzP2lubGluZSc7XG5pbXBvcnQgc2NyZWVuUmVhZGVyT25seVN0eWxlc1N0cmluZyBmcm9tICcuL3NjcmVlbi1yZWFkZXItb25seS5zY3NzP2lubGluZSc7XG5pbXBvcnQgc2Nyb2xsYmFyU3R5bGVzU3RyaW5nIGZyb20gJy4vc2Nyb2xsYmFyLnNjc3M/aW5saW5lJztcblxuZXhwb3J0IGNvbnN0IGhvc3RTY3JvbGxiYXJTdHlsZXMgPSB1bnNhZmVDU1MoaG9zdFNjcm9sbGJhclN0eWxlc1N0cmluZyk7XG5leHBvcnQgY29uc3Qgb3B0aW9uUGFuZWxTdHlsZXMgPSB1bnNhZmVDU1Mob3B0aW9uUGFuZWxTdHJpbmcpO1xuZXhwb3J0IGNvbnN0IHNjcmVlblJlYWRlck9ubHlTdHlsZXMgPSB1bnNhZmVDU1Moc2NyZWVuUmVhZGVyT25seVN0eWxlc1N0cmluZyk7XG5leHBvcnQgY29uc3Qgc2Nyb2xsYmFyU3R5bGVzID0gdW5zYWZlQ1NTKHNjcm9sbGJhclN0eWxlc1N0cmluZyk7XG4iXSwibWFwcGluZ3MiOiI7Ozs7Ozs7Ozs7Ozs7O0FJT0EsSUFBYSxzQkFBc0IsVUFBVSx1QkFBMEI7QUFDdkUsSUFBYSxvQkFBb0IsVUFBVSw0QkFBa0I7QUFDN0QsSUFBYSx5QkFBeUIsVUFBVSwyQkFBNkI7QUFDN0UsSUFBYSxrQkFBa0IsVUFBVSxrQkFBc0IifQ==

package/off-brand-theme.css

@@ -1767,6 +1767,13 @@ slot[name=error]::slotted(*) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
   --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
   --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-background-color: var(--sbb-background-color-2);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
+  --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-optgroup-label-color: var(--sbb-color-metal);
   --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
@@ -1779,11 +1786,6 @@ slot[name=error]::slotted(*) {
   --sbb-overlay-animation-easing: ease;
   --sbb-overlay-pointer-events: none;
   --sbb-overlay-container-display: none;
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-2);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
   --sbb-paginator-height: var(--sbb-size-element-m);
   --sbb-paginator-page-color: var(--sbb-color-metal);
   --sbb-paginator-page-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.0.0-next.2-dev.1778120187",
+  "version": "5.0.0-next.2-dev.1778141158",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/b2d1ff50c276b9daafe622ebb64159360b99cfe2"
+    "https://github.com/sbb-design-systems/lyne-components/commit/35df8146d9f5dfd62323e0ae536bbec3ca1dfb89"
   ],
   "type": "module",
   "exports": {

package/safety-theme.css

@@ -1767,6 +1767,13 @@ slot[name=error]::slotted(*) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
   --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
   --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-background-color: var(--sbb-background-color-2);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
+  --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-optgroup-label-color: var(--sbb-color-metal);
   --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
@@ -1779,11 +1786,6 @@ slot[name=error]::slotted(*) {
   --sbb-overlay-animation-easing: ease;
   --sbb-overlay-pointer-events: none;
   --sbb-overlay-container-display: none;
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-2);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
   --sbb-paginator-height: var(--sbb-size-element-m);
   --sbb-paginator-page-color: var(--sbb-color-metal);
   --sbb-paginator-page-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));

package/select/select.component.js

@@ -1,2 +1,2 @@
-import { t as e } from "../select.component-PLjAiAA3.js";
+import { t as e } from "../select.component-CO-42jqH.js";
 export { e as SbbSelectElement };

package/{select.component-PLjAiAA3.js → select.component-CO-42jqH.js}

@@ -1,33 +1,33 @@
 import { __esDecorate as e, __runInitializers as t } from "tslib";
 import { html as n, isServer as r, nothing as i, unsafeCSS as a } from "lit";
-import { property as o, state as s } from "lit/decorators.js";
-import { SbbDisabledMixin as c, SbbEscapableOverlayController as l, SbbFormAssociatedMixin as u, SbbLanguageController as ee, SbbNegativeMixin as d, SbbOpenCloseBaseElement as f, SbbPropertyWatcherController as p, SbbReadonlyMixin as m, SbbRequiredMixin as h, SbbUpdateSchedulerMixin as g, forceType as _, getNextElementIndex as te, getOverride as v, handleDistinctChange as y, i18nSelectionRequired as b, isEventOnElement as x, isLean as S, isNextjs as C, isSafari as w, isZeroAnimationDuration as T, overlayGapFixCorners as E, setOrRemoveAttribute as D, setOverlayPosition as O } from "./core.js";
-import { ResizeController as k } from "@lit-labs/observers/resize-controller.js";
-import { ref as A } from "lit/directives/ref.js";
-import { MutationController as j } from "@lit-labs/observers/mutation-controller.js";
-import { until as M } from "lit/directives/until.js";
+import { property as o, state as ee } from "lit/decorators.js";
+import { SbbDisabledMixin as s, SbbEscapableOverlayController as c, SbbFormAssociatedMixin as l, SbbLanguageController as te, SbbNegativeMixin as u, SbbOpenCloseBaseElement as d, SbbPropertyWatcherController as ne, SbbReadonlyMixin as f, SbbRequiredMixin as p, SbbUpdateSchedulerMixin as m, forceType as h, getNextElementIndex as re, getOverride as g, handleDistinctChange as _, i18nSelectionRequired as v, isEventOnElement as y, isLean as b, isNextjs as x, isSafari as S, isZeroAnimationDuration as C, optionPanelStyles as w, scrollbarStyles as T, setOrRemoveAttribute as E, setOverlayPosition as D } from "./core.js";
+import { ResizeController as O } from "@lit-labs/observers/resize-controller.js";
+import { ref as k } from "lit/directives/ref.js";
+import { MutationController as A } from "@lit-labs/observers/mutation-controller.js";
+import { until as j } from "lit/directives/until.js";
 //#region src/elements/select/select.scss?inline
-var ne = ".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-width: var(--sbb-spacing-fixed-3x);--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) );--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--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-duration, var(--sbb-animation-duration-4x) );--sbb-options-panel-gap-fix-top: calc( var(--sbb-options-panel-position-y) - var(--sbb-options-panel-border-radius) );--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block;font-weight:400;line-height:var(--sbb-typo-line-height-text)}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host([size=m]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x)}:host([negative]){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent);--sbb-options-panel-background-color: var(--sbb-background-color-2-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark);--sbb-select-placeholder-fallback-color: var(--sbb-color-5)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(state-opened),[state--state-opened])),:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-gap-fix-opacity: 1}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-transform: translateY( calc((var(--sbb-options-panel-origin-height) / 2) * -1) )}:host(:is(:state(options-panel-position-above),[state--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-options-panel-divider-margin-block)}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text))}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color))}.sbb-select__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-select__container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}.sbb-select__gap-fix{display:flex;justify-content:space-between;position:fixed;visibility:var(--sbb-options-panel-visibility, visible);opacity:var(--sbb-options-panel-gap-fix-opacity, 0);background-color:transparent;width:var(--sbb-options-panel-width, fit-content);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, none);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, \"visible\");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, fit-content);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(:is(:state(options-panel-position-below),[state--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(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-9-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-select__panel{box-shadow:var(--sbb-box-shadow-level-9-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-select__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-select__panel:after{display:block}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-9-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:before,:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])[negative]) .sbb-select__panel:after{box-shadow:var(--sbb-box-shadow-level-9-hard-negative)}.sbb-select__wrapper{overflow:hidden}.sbb-select__options{background-color:var(--sbb-options-panel-background-color);padding-block:var(--sbb-options-panel-padding-block);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-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}}", N = w, re = 0, P = (() => {
-	let w = g(c(d(h(m(u(f)))))), P = [], F, I = [], L = [], R, z = [], B = [], V, H = [], U = [], W, G = [], K = [], q, J, Y = [], X = [], Z, Q = [], $ = [];
-	return class extends w {
+var ie = ":host{--sbb-select-placeholder-fallback-color: var(--sbb-color-metal);--sbb-select-placeholder-fallback-color: light-dark( var(--sbb-color-metal), var(--sbb-color-smoke) );--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );display:block}:host([negative]){--sbb-select-placeholder-fallback-color: var(--sbb-color-5)}.sbb-select__trigger{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;cursor:var(--sbb-cursor-default);height:calc(1em * var(--sbb-typo-line-height-text))}:host(:not(:is(:state(has-display-value),[state--has-display-value]))) .sbb-select__trigger{color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color));-webkit-text-fill-color:var(--sbb-select-placeholder-color, var(--sbb-select-placeholder-fallback-color))}.sbb-option-panel__overlay-container[popover]{margin:0;padding:0;border:none;width:auto;height:auto;background-color:transparent}", M = S, N = 0, P = (() => {
+	let S = m(s(u(p(f(l(d)))))), P = [], F, I = [], L = [], R, z = [], B = [], V, H = [], U = [], W, G = [], K = [], q, J, Y = [], X = [], Z, Q = [], $ = [];
+	return class extends S {
 		static {
-			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(w[Symbol.metadata] ?? null) : void 0;
-			F = [_(), o()], R = [
-				_(),
-				y((e, t) => e._onMultipleChanged(t)),
+			let t = typeof Symbol == "function" && Symbol.metadata ? Object.create(S[Symbol.metadata] ?? null) : void 0;
+			F = [h(), o()], R = [
+				h(),
+				_((e, t) => e._onMultipleChanged(t)),
 				o({
 					reflect: !0,
 					type: Boolean
 				})
 			], V = [o({ attribute: !1 })], W = [
-				_(),
-				y((e, t) => e._closeOnDisabledReadonlyChanged(t)),
+				h(),
+				_((e, t) => e._closeOnDisabledReadonlyChanged(t)),
 				o({
 					reflect: !0,
 					type: Boolean
 				}),
-				v((e, t) => t || e.isDisabledExternally())
-			], q = [o()], J = [o({ reflect: !0 })], Z = [s()], e(this, null, F, {
+				g((e, t) => t || e.isDisabledExternally())
+			], q = [o()], J = [o({ reflect: !0 })], Z = [ee()], e(this, null, F, {
 				kind: "accessor",
 				name: "placeholder",
 				static: !1,
@@ -128,10 +128,14 @@ var ne = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
 			this.elementName = "sbb-select";
 		}
 		static {
-			this.role = N ? "listbox" : null;
+			this.role = M ? "listbox" : null;
 		}
 		static {
-			this.styles = [a(ne)];
+			this.styles = [
+				T,
+				w,
+				a(ie)
+			];
 		}
 		static {
 			this.events = {
@@ -205,41 +209,46 @@ var ne = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
 			}), e;
 		}
 		constructor() {
-			super(), this.#e = (t(this, P), t(this, I, "")), this.#t = (t(this, L), t(this, z, !1)), this.#n = (t(this, B), t(this, H, (e, t) => e === t)), this.#r = (t(this, U), t(this, G, !1)), this._value = (t(this, K), null), this.#i = t(this, Y, S() ? "s" : "m"), this.#a = (t(this, X), t(this, Q, null)), this._originResizeObserver = (t(this, $), new k(this, {
+			super(), this.#e = (t(this, P), t(this, I, "")), this.#t = (t(this, L), t(this, z, !1)), this.#n = (t(this, B), t(this, H, (e, t) => e === t)), this.#r = (t(this, U), t(this, G, !1)), this._value = (t(this, K), null), this.#i = t(this, Y, b() ? "s" : "m"), this.#a = (t(this, X), t(this, Q, null)), this._resizeObserver = (t(this, $), new O(this, {
 				target: null,
 				skipInitial: !0,
-				callback: () => {
-					this.isOpen && this._setOverlayPosition();
-				}
-			})), this._originElement = null, this._triggerElement = null, this._escapableOverlayController = new l(this), this._overlayId = `sbb-select-${++re}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._languageController = new ee(this), this._isValueManuallyAssigned = !1, this._pointerDownListener = (e) => {
-				this._isPointerDownEventOnMenu = x(this._overlay, e);
+				callback: (() => {
+					let e;
+					return () => {
+						clearTimeout(e), e = setTimeout(() => {
+							this.state !== "closed" && this._setOverlayPosition();
+						}, 10);
+					};
+				})()
+			})), this._originElement = null, this._triggerElement = null, this._escapableOverlayController = new c(this), this._overlayId = `sbb-select-${++N}`, this._activeItemIndex = -1, this._searchString = "", this._didLoad = !1, this._isPointerDownEventOnMenu = !1, this._languageController = new te(this), this._isValueManuallyAssigned = !1, this._pointerDownListener = (e) => {
+				this._isPointerDownEventOnMenu = y(this._overlay, e);
 			}, this._closeOnBackdropClick = (e) => {
-				!this._isPointerDownEventOnMenu && !x(this._overlay, e) && this.close();
+				!this._isPointerDownEventOnMenu && !y(this._overlay, e) && !y(this._originElement, e) && this.close();
 			}, this.addEventListener?.("optionselectionchange", (e) => this._onOptionChanged(e)), this.addEventListener?.("optionLabelChanged", (e) => this._onOptionLabelChanged(e)), this.addEventListener?.("ɵoptionvaluechange", () => this._updateValueOptionState()), this.addEventListener?.("ɵoptgroupslotchange", () => this._updateValueOptionState(), { capture: !0 }), this.addEventListener?.("click", (e) => {
 				let t = e.target;
 				t.localName === "sbb-option" ? !this.multiple && !t.disabled && (this.close(), this.focus()) : this._toggleOpening();
-			}), this.addController(new j(this, {
+			}), this.addController(new A(this, {
 				config: { attributeFilter: [
 					"aria-labelledby",
 					"aria-label",
 					"aria-describedby"
 				] },
 				callback: () => this._syncAriaLabels()
-			})), this.addController(new p(this, () => this.closest("sbb-form-field"), { negative: (e) => {
+			})), this.addController(new ne(this, () => this.closest("sbb-form-field"), { negative: (e) => {
 				this.negative = e.negative, this._syncNegative();
 			} }));
 		}
 		_syncAriaLabels() {
-			!this._triggerElement || r || (D(this._triggerElement, "aria-labelledby", this.getAttribute("aria-labelledby")), D(this._triggerElement, "aria-label", this.getAttribute("aria-label")), D(this._triggerElement, "aria-describedby", this.getAttribute("aria-describedby")), !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && this.internals.labels.length && this._triggerElement?.setAttribute("aria-label", Array.from(this.internals.labels, (e) => e.textContent).join(", ")));
+			!this._triggerElement || r || (E(this._triggerElement, "aria-labelledby", this.getAttribute("aria-labelledby")), E(this._triggerElement, "aria-label", this.getAttribute("aria-label")), E(this._triggerElement, "aria-describedby", this.getAttribute("aria-describedby")), !this.getAttribute("aria-label") && !this.getAttribute("aria-labelledby") && this.internals.labels.length && this._triggerElement?.setAttribute("aria-label", Array.from(this.internals.labels, (e) => e.textContent).join(", ")));
 		}
 		open() {
-			this.state === "opening" || this.state === "opened" || !this._overlay || this.options.length === 0 || this.disabled || this.formDisabled || !this.dispatchBeforeOpenEvent() || (this.shadowRoot?.querySelector(".sbb-select__container")?.showPopover?.(), this.state = "opening", this.internals.states.add("expanded"), this._setOverlayPosition(), this._escapableOverlayController.connect(), this._attachOpenPanelEvents(), this._isZeroAnimationDuration() && this._handleOpening());
+			this.state === "opening" || this.state === "opened" || !this._overlay || this.options.length === 0 || this.disabled || this.formDisabled || !this.dispatchBeforeOpenEvent() || (this.shadowRoot?.querySelector("[popover]")?.showPopover?.(), this.state = "opening", this.internals.states.add("expanded"), this._setOverlayPosition(), this._escapableOverlayController.connect(), this._attachOpenPanelEvents(), this._isZeroAnimationDuration() && this._handleOpening());
 		}
 		close() {
-			this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.state = "closing", this.internals.states.delete("expanded"), this._openPanelEventsController?.abort(), this._originElement && this._originResizeObserver.unobserve(this._originElement), this._isZeroAnimationDuration() && this._handleClosing());
+			this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.state = "closing", this.internals.states.delete("expanded"), this._openPanelEventsController?.abort(), this._originElement && this._resizeObserver.unobserve(this._originElement), this._isZeroAnimationDuration() && this._handleClosing());
 		}
 		_isZeroAnimationDuration() {
-			return T(this, "--sbb-options-panel-animation-duration");
+			return C(this, "--sbb-options-panel-animation-duration");
 		}
 		getDisplayValue() {
 			return this._displayValue ?? "";
@@ -269,7 +278,7 @@ var ne = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
 			(this.state === "opening" || this.state === "opened") && e && this.close();
 		}
 		firstUpdated(e) {
-			super.firstUpdated(e), this._updateValueOptionState(), C() || (this.startUpdate(), this._setupSelect());
+			super.firstUpdated(e), this._updateValueOptionState(), x() || (this.startUpdate(), this._setupSelect());
 		}
 		focus() {
 			this._triggerElement?.focus();
@@ -278,10 +287,10 @@ var ne = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
 			this._triggerElement?.blur();
 		}
 		removeAttribute(e) {
-			C() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
+			x() && e === "defer-hydration" && !this._didLoad && this.updateComplete.then(() => this._setupSelect()), super.removeAttribute(e);
 		}
 		connectedCallback() {
-			super.connectedCallback(), N && (this.id ||= this._overlayId), this._syncNegative(), this._syncAriaLabels(), this._didLoad && (this._setupOrigin(), this._setupTrigger());
+			super.connectedCallback(), M && (this.id ||= this._overlayId), this._syncNegative(), this._syncAriaLabels(), this._didLoad && (this._setupOrigin(), this._setupTrigger());
 		}
 		requestUpdate(e, t, n) {
 			super.requestUpdate(e, t, n), !e && this.hasUpdated && setTimeout(() => this._syncAriaLabels());
@@ -318,29 +327,29 @@ var ne = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
 		validate() {
 			super.validate();
 			let e = Array.isArray(this.value) ? this.value : this.value === null ? [] : [this.value];
-			this.required && (this.options.every((t) => e.every((e) => !this.compareWith(e, t.value))) || !this._isValueManuallyAssigned && this.value == null) ? this.setValidityFlag("valueMissing", b[this._languageController.current]) : this.removeValidityFlag("valueMissing");
+			this.required && (this.options.every((t) => e.every((e) => !this.compareWith(e, t.value))) || !this._isValueManuallyAssigned && this.value == null) ? this.setValidityFlag("valueMissing", v[this._languageController.current]) : this.removeValidityFlag("valueMissing");
 		}
 		_setupSelect() {
 			this._setupOrigin(), this._setupTrigger(), this._didLoad = !0, this.completeUpdate();
 		}
 		_setupOrigin() {
 			let e = this.closest?.("sbb-form-field");
-			this._originElement && this._originResizeObserver.unobserve(this._originElement), this._originElement = e?.shadowRoot?.querySelector?.("#overlay-anchor") ?? this.parentElement, this._originElement && (this.toggleState("option-panel-origin-borderless", e?.hasAttribute?.("borderless")), this.isOpen && this._originResizeObserver.observe(this._originElement));
+			this._originElement && this._resizeObserver.unobserve(this._originElement), this._originElement = e?.shadowRoot?.querySelector?.("#overlay-anchor") ?? this.parentElement, this._originElement && (this.toggleState("option-panel-origin-borderless", e?.hasAttribute?.("borderless")), this.isOpen && this._resizeObserver.observe(this._originElement));
 		}
 		_setupTrigger() {
 			this.parentElement && this._triggerElement && this.parentElement.insertBefore?.(this._triggerElement, this);
 		}
 		_setOverlayPosition() {
-			this._originElement && O(this._overlay, this._originElement, this._optionContainer, this.shadowRoot.querySelector(".sbb-select__container"), this);
+			this._originElement && D(this._overlay, this._originElement, this._overlay, this.shadowRoot.querySelector(".sbb-option-panel__overlay-container"), this);
 		}
 		_onAnimationEnd(e) {
 			e.animationName === "open" && this.state === "opening" ? this._handleOpening() : e.animationName === "close" && this.state === "closing" && this._handleClosing();
 		}
 		_handleOpening() {
-			this.state = "opened", this._triggerElement?.setAttribute("aria-expanded", "true"), this._originElement && this._originResizeObserver.observe(this._originElement), this.dispatchOpenEvent();
+			this.state = "opened", this._triggerElement?.setAttribute("aria-expanded", "true"), this._originElement && this._resizeObserver.observe(this._originElement), this.dispatchOpenEvent();
 		}
 		_handleClosing() {
-			this.state = "closed", this.shadowRoot?.querySelector(".sbb-select__container")?.hidePopover?.(), this._triggerElement?.setAttribute("aria-expanded", "false"), this._resetActiveElement(), this._optionContainer.scrollTop = 0, this._escapableOverlayController.disconnect(), this.dispatchCloseEvent();
+			this.state = "closed", this.shadowRoot?.querySelector("[popover]")?.hidePopover?.(), this._triggerElement?.setAttribute("aria-expanded", "false"), this._resetActiveElement(), this._overlay.scrollTop = 0, this._escapableOverlayController.disconnect(), this.dispatchCloseEvent();
 		}
 		_onOptionSelected(e) {
 			this.multiple ? this.value ? Array.isArray(this.value) && !this.value.some((t) => this.compareWith(t, e.value)) && (this._value = [...this.value, e.value]) : this._value = [e.value] : this._value = e.value, this._updateOptionsFromValue(), this._dispatchInputEvents();
@@ -423,7 +432,7 @@ var ne = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
 		_setNextActiveOption(e, t) {
 			let n = this._selectableOptions();
 			if (n.length === 0) return;
-			let r = t ?? te(e, this._activeItemIndex, n.length), i = n[r], a = n[this._activeItemIndex];
+			let r = t ?? re(e, this._activeItemIndex, n.length), i = n[r], a = n[this._activeItemIndex];
 			this._setActiveElement(i, a), this.multiple ? e?.shiftKey && i.selectViaUserInteraction(!i.selected) : this._setSelectedElement(i, a), this._activeItemIndex = r;
 		}
 		_setActiveElement(e, t = null, n = !0) {
@@ -495,36 +504,27 @@ var ne = ".sbb-gap-fix-wrapper{position:relative;overflow:hidden;width:var(--sbb
         aria-owns=${this._overlayId}
         @keydown=${this._onKeyDown}
         @click=${this._toggleOpening}
-        ${A((e) => this._triggerElement = e)}
+        ${k((e) => this._triggerElement = e)}
       >
-        ${M(...this._spreadDeferredDisplayValue(n`${this.placeholder}`))}
+        ${j(...this._spreadDeferredDisplayValue(n`${this.placeholder}`))}
       </div>
 
       <!-- Visually display the value -->
       <div class="sbb-select__trigger" aria-hidden="true">
-        ${M(...this._spreadDeferredDisplayValue(n`${this.placeholder}`))}
+        ${j(...this._spreadDeferredDisplayValue(n`${this.placeholder}`))}
       </div>
 
-      <div class="sbb-select__gap-fix"></div>
-      <div class="sbb-select__container" popover="manual">
-        <div class="sbb-select__gap-fix">${E()}</div>
+      <div class="sbb-option-panel__overlay-container" popover="manual">
         <div
+          class="sbb-option-panel__overlay ${this.negative ? "sbb-scrollbar-negative" : "sbb-scrollbar"}"
+          id=${M ? i : this._overlayId}
+          role=${M ? i : "listbox"}
+          ?aria-multiselectable=${this.multiple}
+          tabindex="-1"
           @animationend=${this._onAnimationEnd}
-          class="sbb-select__panel"
-          ${A((e) => this._overlay = e)}
+          ${k((e) => this._overlay = e)}
         >
-          <div class="sbb-select__wrapper">
-            <div
-              id=${N ? i : this._overlayId}
-              class="sbb-select__options"
-              role=${N ? i : "listbox"}
-              ?aria-multiselectable=${this.multiple}
-              ${A((e) => this._optionContainer = e)}
-              tabindex="-1"
-            >
-              <slot @slotchange=${this._updateValueOptionState}></slot>
-            </div>
-          </div>
+          <slot @slotchange=${this._updateValueOptionState}></slot>
         </div>
       </div>
     `;

package/select.js

@@ -1,4 +1,4 @@
-import { t as e } from "./select.component-PLjAiAA3.js";
+import { t as e } from "./select.component-CO-42jqH.js";
 import "./select.pure.js";
 //#region src/elements/select.ts
 e.define();

package/select.pure.js

@@ -1,2 +1,2 @@
-import { t as e } from "./select.component-PLjAiAA3.js";
+import { t as e } from "./select.component-CO-42jqH.js";
 export { e as SbbSelectElement };

package/standard-theme.css

@@ -1767,6 +1767,13 @@ slot[name=error]::slotted(*) {
   --sbb-option-hint-padding-block-end: var(--sbb-spacing-fixed-2x);
   --sbb-option-hint-padding-inline: var(--sbb-spacing-responsive-xxxs);
   --sbb-option-hint-font-size: var(--sbb-text-font-size-xxs);
+  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
+  --sbb-options-panel-animation-timing-function: ease;
+  --sbb-options-panel-background-color: var(--sbb-background-color-2);
+  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
+  --sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard);
+  --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
+  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-optgroup-label-color: var(--sbb-color-metal);
   --sbb-optgroup-label-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-optgroup-label-font-size: var(--sbb-text-font-size-xxs);
@@ -1779,11 +1786,6 @@ slot[name=error]::slotted(*) {
   --sbb-overlay-animation-easing: ease;
   --sbb-overlay-pointer-events: none;
   --sbb-overlay-container-display: none;
-  --sbb-options-panel-border-radius: var(--sbb-border-radius-4x);
-  --sbb-options-panel-animation-timing-function: ease;
-  --sbb-options-panel-background-color: var(--sbb-background-color-2);
-  --sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);
-  --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);
   --sbb-paginator-height: var(--sbb-size-element-m);
   --sbb-paginator-page-color: var(--sbb-color-metal);
   --sbb-paginator-page-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));

package/styles-CgXa3TG9.js

@@ -0,0 +1,5 @@
+import { unsafeCSS as e } from "lit";
+//#region src/elements/core/styles/host-scrollbar.scss?inline
+var t = ":host{--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) )}:host::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:host::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:host::-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}:host::-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)))}:host::-webkit-scrollbar-button,:host::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:host{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}", n = ":host{--sbb-options-panel-position-x: 0;--sbb-options-panel-position-y: 0;--sbb-options-pointer-events: all;--_sbb-options-panel-max-height: min( var(--sbb-options-panel-max-height-calculated), var(--sbb-options-panel-max-height, 100000em) );--sbb-options-panel-min-height: var(--sbb-options-panel-origin-height);--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-duration, var(--sbb-animation-duration-4x) );--sbb-focus-outline-color: var(--sbb-focus-outline-color-default);--sbb-focus-outline-color: light-dark( var(--sbb-focus-outline-color-default), var(--sbb-focus-outline-color-dark) );--sbb-options-panel-internal-z-index: var( --sbb-select-z-index, var(--sbb-overlay-default-z-index) );font-weight:400}:host([negative]){--sbb-options-panel-box-shadow: var(--sbb-box-shadow-level-9-hard-negative);--sbb-options-panel-background-color: var(--sbb-background-color-2-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host(:not(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))),:host(:is(:state(state-closed),[state--state-closed])){--sbb-options-panel-visibility: hidden;--sbb-options-pointer-events: none}:host(:is(:state(state-opening),[state--state-opening])){--sbb-options-panel-animation-name: open}:host(:is(:state(state-closing),[state--state-closing])){--sbb-options-panel-animation-name: close}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])){--sbb-options-panel-animation-translate: var(--sbb-spacing-fixed-2x)}:host(:is(:state(options-panel-position-above),[state--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-animation-translate: calc(-1 * var(--sbb-spacing-fixed-2x));--sbb-options-panel-margin-block-start: calc(-1 * var(--sbb-spacing-fixed-2x))}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-option-panel__overlay-container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-option-panel__overlay-container:after{content:\"\";display:block;position:absolute;top:var(--sbb-options-panel-origin-position-y);left:var(--sbb-options-panel-origin-position-x);width:var(--sbb-options-panel-width);height:var(--sbb-options-panel-origin-height);background-color:transparent;border-radius:var(--sbb-options-panel-border-radius);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening])):is(:state(option-panel-origin-borderless),[state--option-panel-origin-borderless])) .sbb-option-panel__overlay-container:after{box-shadow:var(--sbb-options-panel-box-shadow)}.sbb-option-panel__overlay{display:block;position:absolute;visibility:var(--sbb-options-panel-visibility, \"visible\");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, fit-content);transition:box-shadow var(--sbb-options-panel-animation-duration) var(--sbb-options-panel-animation-timing-function);box-shadow:var(--sbb-options-panel-box-shadow);background-color:var(--sbb-options-panel-background-color);margin-block-start:var(--sbb-options-panel-margin-block-start);padding-block:var(--sbb-options-panel-padding-block);padding-inline:0;max-height:var(--_sbb-options-panel-max-height);min-height:var(--sbb-options-panel-min-height);pointer-events:var(--sbb-options-pointer-events);overflow:hidden 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)}@media(forced-colors:active){.sbb-option-panel__overlay{border:var(--sbb-border-width-1x) solid CanvasText}}@keyframes open{0%{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}to{translate:0;opacity:1}}@keyframes close{0%{translate:0;opacity:1}to{translate:0 var(--sbb-options-panel-animation-translate);opacity:0}}", r = ".sbb-screen-reader-only{border:0;clip-path:rect(0 0 0 0);height:1px;margin:-1px;overflow:hidden;padding:0;position:absolute;white-space:nowrap;width:1px}", i = ":is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-width: var(--sbb-spacing-fixed-3x);--sbb-scrollbar-thumb-width: .125rem;--sbb-scrollbar-thumb-width-hover: .25rem;--sbb-scrollbar-width-firefox: thin;--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-black) 30%, transparent);--sbb-scrollbar-color: light-dark( color-mix(in srgb, var(--sbb-color-black) 30%, transparent), color-mix(in srgb, var(--sbb-color-white) 30%, transparent) );--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-black) 60%, transparent);--sbb-scrollbar-color-hover: light-dark( color-mix(in srgb, var(--sbb-color-black) 60%, transparent), color-mix(in srgb, var(--sbb-color-white) 60%, transparent) )}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-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}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-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)))}:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-button,:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible)::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){:is(.sbb-scrollbar,.sbb-scrollbar-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-negative,.sbb-scrollbar-track-visible,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}:is(.sbb-scrollbar-negative,.sbb-scrollbar-thick-negative,.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-color: color-mix(in srgb, var(--sbb-color-white) 30%, transparent);--sbb-scrollbar-color-hover: color-mix(in srgb, var(--sbb-color-white) 60%, transparent)}:is(.sbb-scrollbar-thick-negative,.sbb-scrollbar-thick,.sbb-scrollbar-thick-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-thumb-width: .5rem;--sbb-scrollbar-thumb-width-hover: var(--sbb-scrollbar-thumb-width);--sbb-scrollbar-width-firefox: auto}:is(.sbb-scrollbar-track-visible,.sbb-scrollbar-thick-track-visible){--sbb-scrollbar-track-color: var(--sbb-background-color-4)}:is(.sbb-scrollbar-negative-track-visible,.sbb-scrollbar-thick-negative-track-visible){--sbb-scrollbar-track-color: var(--sbb-background-color-4-negative)}", a = e(t), o = e(n), s = e(r), c = e(i);
+//#endregion
+export { c as i, o as n, s as r, a as t };

package/core/overlay/overlay.js

@@ -1,14 +0,0 @@
-import { html as e } from "lit";
-//#region src/elements/core/overlay/overlay.ts
-function t() {
-	return e`
-    <div class="sbb-gap-fix-wrapper">
-      <div class="sbb-gap-fix-corner" id="left"></div>
-    </div>
-    <div class="sbb-gap-fix-wrapper">
-      <div class="sbb-gap-fix-corner" id="right"></div>
-    </div>
-  `;
-}
-//#endregion
-export { t as overlayGapFixCorners };