@sbb-esta/lyne-elements 4.3.1 → 4.5.0

package/autocomplete/autocomplete-base-element.js

@@ -1,25 +1,25 @@
-var Q = (o) => {
-  throw TypeError(o);
+var it = (n) => {
+  throw TypeError(n);
 };
-var X = (o, a, l) => a.has(o) || Q("Cannot " + l);
-var p = (o, a, l) => (X(o, a, "read from private field"), l ? l.call(o) : a.get(o)), b = (o, a, l) => a.has(o) ? Q("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(o) : a.set(o, l), s = (o, a, l, x) => (X(o, a, "write to private field"), x ? x.call(o, l) : a.set(o, l), l);
-import { __esDecorate as c, __runInitializers as n } from "tslib";
-import { ResizeController as st } from "@lit-labs/observers/resize-controller.js";
-import { css as ot, isServer as k, nothing as tt, html as nt } from "lit";
+var st = (n, r, l) => r.has(n) || it("Cannot " + l);
+var p = (n, r, l) => (st(n, r, "read from private field"), l ? l.call(n) : r.get(n)), b = (n, r, l) => r.has(n) ? it("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(n) : r.set(n, l), s = (n, r, l, w) => (st(n, r, "write to private field"), w ? w.call(n, l) : r.set(n, l), l);
+import { __esDecorate as c, __runInitializers as o } from "tslib";
+import { ResizeController as rt } from "@lit-labs/observers/resize-controller.js";
+import { css as lt, isServer as k, nothing as ot, html as pt } from "lit";
 import { property as h } from "lit/decorators.js";
-import { ref as et } from "lit/directives/ref.js";
-import { SbbOpenCloseBaseElement as rt } from "../core/base-elements.js";
-import { SbbEscapableOverlayController as at, SbbPropertyWatcherController as lt } from "../core/controllers.js";
-import { idReference as it, forceType as E } from "../core/decorators.js";
-import { isLean as pt, isZeroAnimationDuration as bt, isSafari as ct } from "../core/dom.js";
-import { SbbNegativeMixin as ht, SbbHydrationMixin as dt } from "../core/mixins.js";
-import { isEventOnElement as A, removeAriaComboBoxAttributes as gt, setOverlayPosition as ut, overlayGapFixCorners as vt } from "../core/overlay.js";
-import { boxSizingStyles as _t } from "../core/styles.js";
-const mt = ot`.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: 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-scrollbar-track-color: 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-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-duration, 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-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--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-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}: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-1-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(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) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__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-autocomplete__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-autocomplete__panel:before,.sbb-autocomplete__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-autocomplete__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-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-autocomplete__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-autocomplete__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-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-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-autocomplete__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-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__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-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__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-autocomplete__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-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media(forced-colors:active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top: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}}`, C = ct;
-let qt = (() => {
-  var d, g, u, v, _, m, f, y, w, r;
-  let o = ht(dt(rt)), a, l = [], x = [], S, z = [], I = [], P, F = [], q = [], D, L = [], U = [], N, W = [], R = [], M, T = [], V = [], $, j = [], H = [], Y, Z = [], K = [], B, G = [], J = [];
-  return r = class extends o {
+import { ref as nt } from "lit/directives/ref.js";
+import { SbbOpenCloseBaseElement as bt } from "../core/base-elements.js";
+import { SbbEscapableOverlayController as ct, SbbPropertyWatcherController as ht } from "../core/controllers.js";
+import { idReference as at, forceType as E } from "../core/decorators.js";
+import { isLean as dt, isZeroAnimationDuration as gt, isSafari as ut } from "../core/dom.js";
+import { SbbNegativeMixin as vt, SbbHydrationMixin as _t } from "../core/mixins.js";
+import { isEventOnElement as S, removeAriaComboBoxAttributes as mt, setOverlayPosition as ft, overlayGapFixCorners as Ot } from "../core/overlay.js";
+import { boxSizingStyles as yt } from "../core/styles.js";
+const xt = lt`.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: 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-scrollbar-track-color: 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-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-duration, 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-background-color-1);--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-2x);--sbb-options-panel-divider-margin-block: var(--sbb-spacing-fixed-3x);--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-pointer-events: all;--sbb-options-panel-internal-z-index: var( --sbb-autocomplete-z-index, var(--sbb-overlay-default-z-index) );display:none}:host([size=s]){--sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x)}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){display:block}: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-1-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(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) )}:host([preserve-icon-space]){--sbb-option-icon-container-display: block}::slotted(sbb-divider){margin-block:var(--sbb-options-panel-divider-margin-block)}.sbb-autocomplete__container{position:fixed;pointer-events:none;inset:0;z-index:var(--sbb-options-panel-internal-z-index)}.sbb-autocomplete__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-autocomplete__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-autocomplete__panel:before,.sbb-autocomplete__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-autocomplete__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-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard)}:host(:is(:is(:state(state-opened),[state--state-opened]),:is(:state(state-opening),[state--state-opening]))[negative]) .sbb-autocomplete__panel{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}:host(:is(:state(options-panel-position-below),[state--options-panel-position-below])) .sbb-autocomplete__panel:before{display:block}:host(:is(:state(options-panel-position-above),[state--options-panel-position-above])) .sbb-autocomplete__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-autocomplete__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-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-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-autocomplete__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-autocomplete__panel:after{box-shadow:var(--sbb-box-shadow-level-5-hard-negative)}.sbb-autocomplete__wrapper{overflow:hidden}.sbb-autocomplete__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-scrollbar-width: var(--sbb-spacing-fixed-3x)}.sbb-autocomplete__options::-webkit-scrollbar{width:var(--sbb-scrollbar-width);height:var(--sbb-scrollbar-width);background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__options::-webkit-scrollbar-corner{background-color:var(--sbb-scrollbar-track-color, transparent)}.sbb-autocomplete__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-autocomplete__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-autocomplete__options::-webkit-scrollbar-button,.sbb-autocomplete__options::-webkit-scrollbar-corner{display:none}@supports not selector(::-webkit-scrollbar){.sbb-autocomplete__options{scrollbar-width:var(--sbb-scrollbar-width-firefox);scrollbar-color:var(--sbb-scrollbar-color, currentcolor) var(--sbb-scrollbar-track-color, transparent)}}.sbb-autocomplete__options{pointer-events:var(--sbb-options-pointer-events)}@media(forced-colors:active){.sbb-autocomplete__options{border:var(--sbb-border-width-1x) solid CanvasText;border-top: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}}`, C = ut;
+let Bt = (() => {
+  var d, g, u, v, _, m, f, O, y, x, a;
+  let n = vt(_t(bt)), r, l = [], w = [], z, I = [], P = [], F, D = [], q = [], L, U = [], B = [], N, W = [], V = [], R, M = [], T = [], $, j = [], H = [], Y, Z = [], K = [], G, J = [], Q = [], X, tt = [], et = [];
+  return a = class extends n {
     constructor() {
       super();
       b(this, d);
@@ -29,9 +29,10 @@ let qt = (() => {
       b(this, _);
       b(this, m);
       b(this, f);
+      b(this, O);
       b(this, y);
-      b(this, w);
-      s(this, d, n(this, l, null)), s(this, g, (n(this, x), n(this, z, null))), s(this, u, (n(this, I), n(this, F, !1))), s(this, v, (n(this, q), n(this, L, !1))), s(this, _, (n(this, U), n(this, W, null))), s(this, m, (n(this, R), n(this, T, pt() ? "s" : "m"))), s(this, f, (n(this, V), n(this, j, !1))), s(this, y, (n(this, H), n(this, Z, !1))), s(this, w, (n(this, K), n(this, G, "auto"))), this._triggerElement = n(this, J), this.activeOption = null, this._originResizeObserver = new st(this, {
+      b(this, x);
+      s(this, d, o(this, l, null)), s(this, g, (o(this, w), o(this, I, null))), s(this, u, (o(this, P), o(this, D, !1))), s(this, v, (o(this, q), o(this, U, !1))), s(this, _, (o(this, B), o(this, W, null))), s(this, m, (o(this, V), o(this, M, dt() ? "s" : "m"))), s(this, f, (o(this, T), o(this, j, !1))), s(this, O, (o(this, H), o(this, Z, !1))), s(this, y, (o(this, K), o(this, J, !1))), s(this, x, (o(this, Q), o(this, tt, "auto"))), this._triggerElement = o(this, et), this.activeOption = null, this.pendingAutoSelectedOption = null, this._originResizeObserver = new rt(this, {
         target: null,
         skipInitial: !0,
         callback: () => {
@@ -40,11 +41,11 @@ let qt = (() => {
       }), this._triggerAttributeObserver = k ? null : new MutationObserver((t) => {
         const e = t[0].target;
         (e.hasAttribute("disabled") || e.hasAttribute("readonly")) && this.close();
-      }), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new at(this), this._optionsCount = 0, this._lastUserInput = null, this._pointerDownListener = (t) => {
-        this._isPointerDownEventOnMenu = A(this._overlay, t);
+      }), this._isPointerDownEventOnMenu = !1, this._escapableOverlayController = new ct(this), this._optionsCount = 0, this._lastUserInput = null, this._pointerDownListener = (t) => {
+        this._isPointerDownEventOnMenu = S(this._overlay, t);
       }, this._closeOnBackdropClick = (t) => {
-        !this._isPointerDownEventOnMenu && !A(this._overlay, t) && !A(this.originElement, t) && this.close();
-      }, this.addController(new lt(this, () => this.closest("sbb-form-field"), {
+        !this._isPointerDownEventOnMenu && !S(this._overlay, t) && !S(this.originElement, t) && this.close();
+      }, this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t)), this.addController(new ht(this, () => this.closest("sbb-form-field"), {
         negative: (t) => {
           this.negative = t.negative, this.syncNegative();
         },
@@ -116,6 +117,16 @@ let qt = (() => {
     set autoSelectActiveOption(t) {
       s(this, f, t);
     }
+    /**
+     * When enabled, the active option is automatically selected on blur.
+     * This is an experimental feature. It might be subject to changes.
+     */
+    get autoSelectActiveOptionOnBlur() {
+      return p(this, O);
+    }
+    set autoSelectActiveOptionOnBlur(t) {
+      s(this, O, t);
+    }
     /**
      * Whether the user is required to make a selection when they're interacting with the
      * autocomplete. If the user moves away from the autocomplete without selecting an option from
@@ -133,12 +144,12 @@ let qt = (() => {
      * @default 'auto'
      */
     get position() {
-      return p(this, w);
+      return p(this, x);
     }
     set position(t) {
-      s(this, w, t);
+      s(this, x, t);
     }
-    /** Returns the element where autocomplete overlay is attached to. */
+    /** Returns the element where the autocomplete overlay is attached to. */
     get originElement() {
       return this.origin ?? this.closest?.("sbb-form-field")?.shadowRoot?.querySelector?.("#overlay-anchor") ?? this.trigger ?? null;
     }
@@ -158,10 +169,10 @@ let qt = (() => {
     }
     /** Closes the autocomplete. */
     close() {
-      this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
+      this.state === "closing" || this.state === "closed" || !this.dispatchBeforeCloseEvent() || (this.pendingAutoSelectedOption && (this.pendingAutoSelectedOption.selected = !0, this._setValueAndDispatchEvents(this.pendingAutoSelectedOption)), this.state = "closing", this.triggerElement?.removeAttribute("data-expanded"), this._openPanelEventsController.abort(), this.originElement && this._originResizeObserver.unobserve(this.originElement), this._isZeroAnimationDuration() && this._handleClosing());
     }
     _isZeroAnimationDuration() {
-      return bt(this, "--sbb-options-panel-animation-duration");
+      return gt(this, "--sbb-options-panel-animation-duration");
     }
     connectedCallback() {
       this.popover = "manual", super.connectedCallback(), C && (this.id ||= this.overlayId), this.hasUpdated && this._componentSetup(), this.syncNegative();
@@ -183,17 +194,28 @@ let qt = (() => {
       const e = t.target;
       this._setValueAndDispatchEvents(e), this.close();
     }
-    /** When an option is selected, update the input value and close the autocomplete. */
+    /** @deprecated */
     onOptionArrowsSelected(t) {
-      t.selected = !0, this._setValueAndDispatchEvents(t);
+    }
+    /**
+     * A 'pending selection' sets the option value in the input element without emitting events.
+     * A 'pending selection' is confirmed when the panel closes. Any other user interaction
+     * will reset the pending value.
+     */
+    setPendingSelection(t) {
+      this.pendingAutoSelectedOption = t, this._setInputValue(t);
     }
     _setValueAndDispatchEvents(t) {
-      if (this.options.filter((e) => e.id !== t.id && e.selected).forEach((e) => e.selected = !1), this.triggerElement) {
-        const e = this.displayWith?.(t.value) ?? t.value;
-        Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this.triggerElement, e), this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._lastUserInput = null, this.triggerElement.dispatchEvent(new CustomEvent("inputAutocomplete", {
-          detail: { option: t }
-        })), this.triggerElement.focus();
-      }
+      this.options.filter((e) => e.id !== t.id && e.selected).forEach((e) => e.selected = !1), this.pendingAutoSelectedOption = null, this.triggerElement && (this._setInputValue(t), this.triggerElement.dispatchEvent(new Event("change", { bubbles: !0 })), this.triggerElement.dispatchEvent(new InputEvent("input", { bubbles: !0, composed: !0 })), this._lastUserInput = null, this.triggerElement.dispatchEvent(new CustomEvent("inputAutocomplete", {
+        detail: { option: t }
+      })), this.triggerElement.focus());
+    }
+    /** Set the option value within the input element */
+    _setInputValue(t) {
+      if (!this.triggerElement)
+        return;
+      const e = this.displayWith?.(t.value) ?? t.value;
+      Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value").set.call(this.triggerElement, e);
     }
     _handleSlotchange() {
       this._highlightOptions(this.triggerElement?.value), this.isOpen ? (this._setOverlayPosition(), this._setNextActiveOptionIfAutoActiveFirstOption(), this._optionsCount > 0 && this.options.length === 0 && this.close()) : (
@@ -214,7 +236,7 @@ let qt = (() => {
     }
     _configureTrigger() {
       const t = this.trigger ?? this.closest?.("sbb-form-field")?.querySelector("input");
-      if (t === this.triggerElement || (this._triggerAbortController?.abort(), gt(this.triggerElement), this.triggerElement?.removeAttribute("data-expanded"), this._triggerElement = t, !this.triggerElement))
+      if (t === this.triggerElement || (this._triggerAbortController?.abort(), mt(this.triggerElement), this.triggerElement?.removeAttribute("data-expanded"), this._triggerElement = t, !this.triggerElement))
         return;
       const e = this.originElement;
       this.triggerElement === e && this.isOpen && this._setOverlayPosition(e), this._triggerAttributeObserver?.observe(this.triggerElement, {
@@ -225,8 +247,8 @@ let qt = (() => {
       }), this.triggerElement.addEventListener("click", () => this.open(), {
         signal: this._triggerAbortController.signal
       }), this.triggerElement.addEventListener("input", (i) => {
-        const O = i.target.value;
-        O && this.open(), this._highlightOptions(O), this._lastUserInput = O;
+        const A = i.target.value;
+        A && this.open(), this._highlightOptions(A), this._lastUserInput = A, this.pendingAutoSelectedOption = null;
       }, { signal: this._triggerAbortController.signal }), this.triggerElement.addEventListener("keydown", (i) => this._closedPanelKeyboardInteraction(i), {
         signal: this._triggerAbortController.signal,
         // We need key event to run before any other subscription to guarantee a correct
@@ -236,7 +258,7 @@ let qt = (() => {
     }
     // Set overlay position, width and max height
     _setOverlayPosition(t = this.originElement) {
-      t && ut(this._overlay, t, this._optionContainer, this.shadowRoot.querySelector(".sbb-autocomplete__container"), this, this.position);
+      t && ft(this._overlay, t, this._optionContainer, this.shadowRoot.querySelector(".sbb-autocomplete__container"), this, this.position);
     }
     /**
      * On open/close animation end.
@@ -276,7 +298,7 @@ let qt = (() => {
         // interaction with other components (necessary for the 'sbb-chip-group' use case).
         capture: !0
       }), this.triggerElement?.addEventListener("blur", (t) => {
-        this.contains(t.relatedTarget) || this.close();
+        this.contains(t.relatedTarget) || (this.autoSelectActiveOptionOnBlur && this.activeOption && this.triggerElement?.value && (this.activeOption.selected = !0, this._setValueAndDispatchEvents(this.activeOption)), this.close());
       }, {
         signal: this._openPanelEventsController.signal
       });
@@ -295,22 +317,22 @@ let qt = (() => {
       t != null && this.options.forEach((e) => e.highlight(t));
     }
     render() {
-      return nt`
+      return pt`
       <div class="sbb-autocomplete__gap-fix"></div>
       <div class="sbb-autocomplete__container">
-        <div class="sbb-autocomplete__gap-fix">${vt()}</div>
+        <div class="sbb-autocomplete__gap-fix">${Ot()}</div>
         <div
           @animationend=${this._onAnimationEnd}
           class="sbb-autocomplete__panel"
-          ${et((t) => this._overlay = t)}
+          ${nt((t) => this._overlay = t)}
         >
           <div class="sbb-autocomplete__wrapper">
             <div
               class="sbb-autocomplete__options"
-              role=${C ? tt : this.panelRole}
-              id=${C ? tt : this.overlayId}
+              role=${C ? ot : this.panelRole}
+              id=${C ? ot : this.overlayId}
               tabindex="-1"
-              ${et((t) => this._optionContainer = t)}
+              ${nt((t) => this._optionContainer = t)}
             >
               <slot @slotchange=${this._handleSlotchange}></slot>
             </div>
@@ -319,29 +341,31 @@ let qt = (() => {
       </div>
     `;
     }
-  }, d = new WeakMap(), g = new WeakMap(), u = new WeakMap(), v = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), y = new WeakMap(), w = new WeakMap(), (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(o[Symbol.metadata] ?? null) : void 0;
-    a = [it(), h()], S = [it(), h()], P = [E(), h({ attribute: "preserve-icon-space", reflect: !0, type: Boolean })], D = [E(), h({ attribute: "auto-active-first-option", type: Boolean })], N = [h({ attribute: !1 })], M = [h({ reflect: !0 })], $ = [E(), h({ attribute: "auto-select-active-option", type: Boolean })], Y = [E(), h({ attribute: "require-selection", type: Boolean })], B = [h()], c(r, null, a, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (e) => "origin" in e, get: (e) => e.origin, set: (e, i) => {
+  }, d = new WeakMap(), g = new WeakMap(), u = new WeakMap(), v = new WeakMap(), _ = new WeakMap(), m = new WeakMap(), f = new WeakMap(), O = new WeakMap(), y = new WeakMap(), x = new WeakMap(), (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(n[Symbol.metadata] ?? null) : void 0;
+    r = [at(), h()], z = [at(), h()], F = [E(), h({ attribute: "preserve-icon-space", reflect: !0, type: Boolean })], L = [E(), h({ attribute: "auto-active-first-option", type: Boolean })], N = [h({ attribute: !1 })], R = [h({ reflect: !0 })], $ = [E(), h({ attribute: "auto-select-active-option", type: Boolean })], Y = [E(), h({ attribute: "auto-select-active-option-on-blur", type: Boolean })], G = [E(), h({ attribute: "require-selection", type: Boolean })], X = [h()], c(a, null, r, { kind: "accessor", name: "origin", static: !1, private: !1, access: { has: (e) => "origin" in e, get: (e) => e.origin, set: (e, i) => {
       e.origin = i;
-    } }, metadata: t }, l, x), c(r, null, S, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, i) => {
+    } }, metadata: t }, l, w), c(a, null, z, { kind: "accessor", name: "trigger", static: !1, private: !1, access: { has: (e) => "trigger" in e, get: (e) => e.trigger, set: (e, i) => {
       e.trigger = i;
-    } }, metadata: t }, z, I), c(r, null, P, { kind: "accessor", name: "preserveIconSpace", static: !1, private: !1, access: { has: (e) => "preserveIconSpace" in e, get: (e) => e.preserveIconSpace, set: (e, i) => {
+    } }, metadata: t }, I, P), c(a, null, F, { kind: "accessor", name: "preserveIconSpace", static: !1, private: !1, access: { has: (e) => "preserveIconSpace" in e, get: (e) => e.preserveIconSpace, set: (e, i) => {
       e.preserveIconSpace = i;
-    } }, metadata: t }, F, q), c(r, null, D, { kind: "accessor", name: "autoActiveFirstOption", static: !1, private: !1, access: { has: (e) => "autoActiveFirstOption" in e, get: (e) => e.autoActiveFirstOption, set: (e, i) => {
+    } }, metadata: t }, D, q), c(a, null, L, { kind: "accessor", name: "autoActiveFirstOption", static: !1, private: !1, access: { has: (e) => "autoActiveFirstOption" in e, get: (e) => e.autoActiveFirstOption, set: (e, i) => {
       e.autoActiveFirstOption = i;
-    } }, metadata: t }, L, U), c(r, null, N, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
+    } }, metadata: t }, U, B), c(a, null, N, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, i) => {
       e.displayWith = i;
-    } }, metadata: t }, W, R), c(r, null, M, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
+    } }, metadata: t }, W, V), c(a, null, R, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, i) => {
       e.size = i;
-    } }, metadata: t }, T, V), c(r, null, $, { kind: "accessor", name: "autoSelectActiveOption", static: !1, private: !1, access: { has: (e) => "autoSelectActiveOption" in e, get: (e) => e.autoSelectActiveOption, set: (e, i) => {
+    } }, metadata: t }, M, T), c(a, null, $, { kind: "accessor", name: "autoSelectActiveOption", static: !1, private: !1, access: { has: (e) => "autoSelectActiveOption" in e, get: (e) => e.autoSelectActiveOption, set: (e, i) => {
       e.autoSelectActiveOption = i;
-    } }, metadata: t }, j, H), c(r, null, Y, { kind: "accessor", name: "requireSelection", static: !1, private: !1, access: { has: (e) => "requireSelection" in e, get: (e) => e.requireSelection, set: (e, i) => {
+    } }, metadata: t }, j, H), c(a, null, Y, { kind: "accessor", name: "autoSelectActiveOptionOnBlur", static: !1, private: !1, access: { has: (e) => "autoSelectActiveOptionOnBlur" in e, get: (e) => e.autoSelectActiveOptionOnBlur, set: (e, i) => {
+      e.autoSelectActiveOptionOnBlur = i;
+    } }, metadata: t }, Z, K), c(a, null, G, { kind: "accessor", name: "requireSelection", static: !1, private: !1, access: { has: (e) => "requireSelection" in e, get: (e) => e.requireSelection, set: (e, i) => {
       e.requireSelection = i;
-    } }, metadata: t }, Z, K), c(r, null, B, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (e) => "position" in e, get: (e) => e.position, set: (e, i) => {
+    } }, metadata: t }, J, Q), c(a, null, X, { kind: "accessor", name: "position", static: !1, private: !1, access: { has: (e) => "position" in e, get: (e) => e.position, set: (e, i) => {
       e.position = i;
-    } }, metadata: t }, G, J), t && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = [_t, mt], r;
+    } }, metadata: t }, tt, et), t && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), a.styles = [yt, xt], a;
 })();
 export {
-  qt as SbbAutocompleteBaseElement
+  Bt as SbbAutocompleteBaseElement
 };

package/autocomplete/autocomplete.component.js

@@ -1,6 +1,6 @@
-import { __esDecorate as b, __runInitializers as h } from "tslib";
-import { customElement as d } from "lit/decorators.js";
-import { getNextElementIndex as u } from "../core/a11y.js";
+import { __esDecorate as u, __runInitializers as b } from "tslib";
+import { customElement as h } from "lit/decorators.js";
+import { getNextElementIndex as d } from "../core/a11y.js";
 import { isSafari as v } from "../core/dom.js";
 import { setAriaComboBoxAttributes as f } from "../core/overlay.js";
 import { SbbAutocompleteBaseElement as O } from "./autocomplete-base-element.js";
@@ -8,14 +8,14 @@ let A = 0;
 const n = v;
 let _ = (() => {
   var i;
-  let l = [d("sbb-autocomplete")], a, o = [], e, r = O;
+  let l = [h("sbb-autocomplete")], a, o = [], e, r = O;
   return i = class extends r {
+    constructor() {
+      super(...arguments), this.overlayId = `sbb-autocomplete-${++A}`, this.panelRole = "listbox";
+    }
     get options() {
       return Array.from(this.querySelectorAll?.("sbb-option") ?? []);
     }
-    constructor() {
-      super(), this.overlayId = `sbb-autocomplete-${++A}`, this.panelRole = "listbox", this.addEventListener?.("optionselected", (t) => this.onOptionSelected(t));
-    }
     syncNegative() {
       this.querySelectorAll?.("sbb-divider, sbb-option-hint").forEach((t) => t.negative = this.negative);
     }
@@ -35,13 +35,13 @@ let _ = (() => {
       this.activeOption && (t.preventDefault(), this.activeOption.selectViaUserInteraction(!0));
     }
     setNextActiveOption(t) {
-      const s = this.options.filter((m) => !m.matches(":is(:state(disabled),[state--disabled])"));
+      const s = this.options.filter((p) => !p.matches(":is(:state(disabled),[state--disabled])"));
       if (this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), !s.length) {
         this.activeOption = null;
         return;
       }
-      const c = this.activeOption ? s.indexOf(this.activeOption) : -1, p = u(t, c, s.length);
-      this.activeOption = s[p], this.activeOption.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", this.activeOption.id), this.activeOption.scrollIntoView({ block: "nearest" }), this.autoSelectActiveOption && t && this.onOptionArrowsSelected(this.activeOption);
+      const c = this.activeOption ? s.indexOf(this.activeOption) : -1, m = d(t, c, s.length);
+      this.activeOption = s[m], this.activeOption.setActive(!0), this.triggerElement?.setAttribute("aria-activedescendant", this.activeOption.id), this.activeOption.scrollIntoView({ block: "nearest" }), t && t.preventDefault(), this.autoSelectActiveOption && t && this.setPendingSelection(this.activeOption);
     }
     resetActiveElement() {
       this.activeOption?.setActive(!1), this.triggerElement?.removeAttribute("aria-activedescendant"), this.activeOption = null;
@@ -51,8 +51,8 @@ let _ = (() => {
     }
   }, e = i, (() => {
     const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(r[Symbol.metadata] ?? null) : void 0;
-    b(null, a = { value: e }, l, { kind: "class", name: e.name, metadata: t }, null, o), e = a.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), i.role = n ? "listbox" : null, h(e, o), e;
+    u(null, a = { value: e }, l, { kind: "class", name: e.name, metadata: t }, null, o), e = a.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), i.role = n ? "listbox" : null, b(e, o), e;
 })();
 export {
   _ as SbbAutocompleteElement

package/button/common.js

@@ -1,5 +1,5 @@
 import { SbbButtonCommonElementMixin as o } from "./common/button-common.js";
-import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-BOB7JQKi.js";
+import { a, b as m, p as b, s as l, t as r, m as s, c as y } from "../mini-button-label-common-Dx9JhmQ6.js";
 export {
   o as SbbButtonCommonElementMixin,
   a as buttonAccentStyle,

package/button/mini-button-group/mini-button-group.component.js

@@ -1,20 +1,20 @@
-var z = (i) => {
+var x = (i) => {
   throw TypeError(i);
 };
-var L = (i, t, s) => t.has(i) || z("Cannot " + s);
-var d = (i, t, s) => (L(i, t, "read from private field"), s ? s.call(i) : t.get(i)), m = (i, t, s) => t.has(i) ? z("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), l = (i, t, s, r) => (L(i, t, "write to private field"), r ? r.call(i, s) : t.set(i, s), s);
+var L = (i, t, s) => t.has(i) || x("Cannot " + s);
+var d = (i, t, s) => (L(i, t, "read from private field"), s ? s.call(i) : t.get(i)), m = (i, t, s) => t.has(i) ? x("Cannot add the same private member more than once") : t instanceof WeakSet ? t.add(i) : t.set(i, s), l = (i, t, s, a) => (L(i, t, "write to private field"), a ? a.call(i, s) : t.set(i, s), s);
 import { __esDecorate as g, __runInitializers as c } from "tslib";
-import { css as w, LitElement as S, html as N } from "lit";
+import { css as S, LitElement as w, html as N } from "lit";
 import { customElement as E, property as k } from "lit/decorators.js";
 import { forceType as I } from "../../core/decorators.js";
 import { isLean as D } from "../../core/dom.js";
 import { SbbNegativeMixin as M, SbbNamedSlotListMixin as O } from "../../core/mixins.js";
 import { boxSizingStyles as j } from "../../core/styles.js";
-const T = w`:host{display:block;--sbb-mini-button-group-background: var(--sbb-background-color-1);--sbb-mini-button-group-border-color: var(--sbb-border-color-4-inverted);--sbb-mini-button-group-border-width: var(--sbb-border-width-2x);--sbb-mini-button-group-border: var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);--sbb-mini-button-group-gap: var(--sbb-spacing-fixed-2x);--sbb-mini-button-group-min-height: var(--sbb-size-element-s);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x)}:host([negative]){--sbb-mini-button-group-background: var(--sbb-background-color-1-negative);--sbb-mini-button-group-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([size=s]){--sbb-mini-button-group-min-height: var(--sbb-size-element-xs);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-2x)}:host([size=l]){--sbb-mini-button-group-min-height: var(--sbb-size-element-m)}:host([size=xl]){--sbb-mini-button-group-min-height: var(--sbb-size-element-l);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-mini-button,sbb-mini-button-link,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width: var(--sbb-border-width-1x);padding-block:var(--sbb-spacing-fixed-1x);padding-inline:var(--sbb-spacing-fixed-1x);height:var(--sbb-size-icon-ui-small)}.sbb-mini-button-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sbb-mini-button-group-gap);width:fit-content;min-height:var(--sbb-mini-button-group-min-height);background-color:var(--sbb-mini-button-group-background);border:var(--sbb-mini-button-group-border);border-radius:var(--sbb-border-radius-infinity);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width))}`;
+const T = S`:host{display:block}:host([negative]){--sbb-mini-button-group-background: var(--sbb-background-color-1-negative);--sbb-mini-button-group-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}:host([size=s]){--sbb-mini-button-group-min-height: var(--sbb-size-element-xs);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-2x)}:host([size=m]){--sbb-mini-button-group-min-height: var(--sbb-size-element-s);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-3x)}:host([size=l]){--sbb-mini-button-group-min-height: var(--sbb-size-element-m)}:host([size=xl]){--sbb-mini-button-group-min-height: var(--sbb-size-element-l);--sbb-mini-button-group-padding-inline: var(--sbb-spacing-fixed-4x)}::slotted(:is(sbb-mini-button,sbb-mini-button-link,sbb-divider)){display:flex}::slotted(sbb-divider){--sbb-divider-border-width: var(--sbb-border-width-1x);padding:var(--sbb-mini-button-group-divider-padding);height:var(--sbb-mini-button-group-divider-height)}.sbb-mini-button-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:nowrap;align-items:center;gap:var(--sbb-mini-button-group-gap);width:fit-content;min-height:var(--sbb-mini-button-group-min-height);background-color:var(--sbb-mini-button-group-background);border:var(--sbb-mini-button-group-border-width) solid var(--sbb-mini-button-group-border-color);border-radius:var(--sbb-mini-button-group-border-radius);padding-inline:calc(var(--sbb-mini-button-group-padding-inline) - var(--sbb-mini-button-group-border-width))}`;
 let H = (() => {
-  var n, o, a;
-  let i = [E("sbb-mini-button-group")], t, s = [], r, p = M(O(S)), h, v = [], f = [], y, x = [], _ = [];
-  return a = class extends p {
+  var n, o, r;
+  let i = [E("sbb-mini-button-group")], t, s = [], a, p = M(O(w)), h, v = [], y = [], f, _ = [], z = [];
+  return r = class extends p {
     constructor() {
       super(...arguments);
       m(this, n);
@@ -23,7 +23,7 @@ let H = (() => {
         "sbb-mini-button",
         "sbb-mini-button-link",
         "sbb-divider"
-      ], l(this, n, c(this, v, "")), l(this, o, (c(this, f), c(this, x, D() ? "s" : "m"))), c(this, _);
+      ], l(this, n, c(this, v, "")), l(this, o, (c(this, y), c(this, _, D() ? "s" : "m"))), c(this, z);
     }
     /** This will be forwarded as aria-label to the list that contains the buttons. */
     get accessibilityLabel() {
@@ -53,14 +53,14 @@ let H = (() => {
       ${this.renderList({ ariaLabel: this.accessibilityLabel }, { localNameVisualOnly: ["sbb-divider"] })}
     `;
     }
-  }, n = new WeakMap(), o = new WeakMap(), r = a, (() => {
+  }, n = new WeakMap(), o = new WeakMap(), a = r, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(p[Symbol.metadata] ?? null) : void 0;
-    h = [I(), k({ attribute: "accessibility-label" })], y = [k({ reflect: !0 })], g(a, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (b) => "accessibilityLabel" in b, get: (b) => b.accessibilityLabel, set: (b, u) => {
+    h = [I(), k({ attribute: "accessibility-label" })], f = [k({ reflect: !0 })], g(r, null, h, { kind: "accessor", name: "accessibilityLabel", static: !1, private: !1, access: { has: (b) => "accessibilityLabel" in b, get: (b) => b.accessibilityLabel, set: (b, u) => {
       b.accessibilityLabel = u;
-    } }, metadata: e }, v, f), g(a, null, y, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (b) => "size" in b, get: (b) => b.size, set: (b, u) => {
+    } }, metadata: e }, v, y), g(r, null, f, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (b) => "size" in b, get: (b) => b.size, set: (b, u) => {
       b.size = u;
-    } }, metadata: e }, x, _), g(null, t = { value: r }, i, { kind: "class", name: r.name, metadata: e }, null, s), r = t.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), a.styles = [j, T], c(r, s), r;
+    } }, metadata: e }, _, z), g(null, t = { value: a }, i, { kind: "class", name: a.name, metadata: e }, null, s), a = t.value, e && Object.defineProperty(a, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), r.styles = [j, T], c(a, s), a;
 })();
 export {
   H as SbbMiniButtonGroupElement

package/button.js

@@ -14,7 +14,7 @@ import { SbbSecondaryButtonStaticElement as C } from "./button/secondary-button-
 import { SbbAccentButtonStaticElement as P } from "./button/accent-button-static/accent-button-static.component.js";
 import { SbbTransparentButtonStaticElement as h } from "./button/transparent-button-static/transparent-button-static.component.js";
 import { SbbButtonCommonElementMixin as q } from "./button/common/button-common.js";
-import { a as w, b as z, p as D, s as F, t as H, m as I, c as J } from "./mini-button-label-common-BOB7JQKi.js";
+import { a as w, b as z, p as D, s as F, t as H, m as I, c as J } from "./mini-button-label-common-Dx9JhmQ6.js";
 export {
   b as SbbAccentButtonElement,
   L as SbbAccentButtonLinkElement,

package/carousel/carousel/carousel.component.js

@@ -1,22 +1,22 @@
 var m = (t) => {
   throw TypeError(t);
 };
-var _ = (t, a, r) => a.has(t) || m("Cannot " + r);
-var f = (t, a, r) => (_(t, a, "read from private field"), r ? r.call(t) : a.get(t)), y = (t, a, r) => a.has(t) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, r), d = (t, a, r, s) => (_(t, a, "write to private field"), s ? s.call(t, r) : a.set(t, r), r);
-import { __esDecorate as v, __runInitializers as b } from "tslib";
-import { css as x, LitElement as w, html as P } from "lit";
+var _ = (t, a, s) => a.has(t) || m("Cannot " + s);
+var f = (t, a, s) => (_(t, a, "read from private field"), s ? s.call(t) : a.get(t)), y = (t, a, s) => a.has(t) ? m("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(t) : a.set(t, s), d = (t, a, s, r) => (_(t, a, "write to private field"), r ? r.call(t, s) : a.set(t, s), s);
+import { __esDecorate as x, __runInitializers as b } from "tslib";
+import { css as w, LitElement as v, html as P } from "lit";
 import { customElement as S, property as C } from "lit/decorators.js";
 import { SbbLanguageController as I } from "../../core/controllers/language-controller.js";
-import { forceType as k } from "../../core/decorators.js";
-import { i18nNextSlide as L, i18nPreviousSlide as q, i18nSlide as A, i18nCarouselArrowsNavigationHint as E } from "../../core/i18n/i18n.js";
+import { forceType as L } from "../../core/decorators.js";
+import { i18nNextSlide as k, i18nPreviousSlide as q, i18nSlide as A, i18nCarouselArrowsNavigationHint as E } from "../../core/i18n/i18n.js";
 import { SbbElementInternalsMixin as B } from "../../core/mixins.js";
 import { boxSizingStyles as z } from "../../core/styles.js";
 import "../../screen-reader-only.js";
-const N = x`:host{--sbb-carousel-border-radius: var(--sbb-border-radius-4x);--sbb-carousel-background-color: var(--sbb-background-color-1);display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-box-shadow-level-9-hard);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-spacing-responsive-xs)}`;
+const N = w`:host{display:inline-block;overflow:hidden;border-radius:var(--sbb-carousel-border-radius) var(--sbb-carousel-border-radius) 0 0}:host([shadow]){box-shadow:var(--sbb-carousel-box-shadow);border-radius:var(--sbb-carousel-border-radius)}:host(:not([shadow])) ::slotted(sbb-carousel-list){--sbb-carousel-inherit-border-radius: var(--sbb-carousel-border-radius)}.sbb-carousel{display:flex;flex-direction:column;justify-content:center;align-items:center;background-color:var(--sbb-carousel-background-color)}::slotted(sbb-compact-paginator){padding:var(--sbb-carousel-paginator-padding)}`;
 let G = (() => {
   var n, o;
-  let t = [S("sbb-carousel")], a, r = [], s, u = B(w), h, g = [], p = [];
-  return o = class extends u {
+  let t = [S("sbb-carousel")], a, s = [], r, h = B(v), u, g = [], p = [];
+  return o = class extends h {
     constructor() {
       super();
       y(this, n);
@@ -49,7 +49,7 @@ let G = (() => {
       if (!e || !i)
         return;
       const l = i.querySelectorAll("sbb-carousel-item");
-      l && l.length > 0 && (e.length = l.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= L[this._language.current], e.accessibilityPreviousPageLabel ||= q[this._language.current], e.accessibilityPageLabel ||= A[this._language.current], e !== this._paginator && (this._paginator = e, this._setupPaginator());
+      l && l.length > 0 && (e.length = l.length, e.pageSize = 1), e.accessibilityNextPageLabel ||= k[this._language.current], e.accessibilityPreviousPageLabel ||= q[this._language.current], e.accessibilityPageLabel ||= A[this._language.current], e !== this._paginator && (this._paginator = e, this._setupPaginator());
     }
     _setupPaginator() {
       this._abortController?.abort(), this._paginator && (this._abortController = new AbortController(), this._paginator.addEventListener("click", () => this._scrollAtPaginatorChange(), {
@@ -76,12 +76,12 @@ let G = (() => {
       </div>
     `;
     }
-  }, n = new WeakMap(), s = o, (() => {
-    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(u[Symbol.metadata] ?? null) : void 0;
-    h = [k(), C({ reflect: !0, type: Boolean })], v(o, null, h, { kind: "accessor", name: "shadow", static: !1, private: !1, access: { has: (i) => "shadow" in i, get: (i) => i.shadow, set: (i, l) => {
+  }, n = new WeakMap(), r = o, (() => {
+    const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(h[Symbol.metadata] ?? null) : void 0;
+    u = [L(), C({ reflect: !0, type: Boolean })], x(o, null, u, { kind: "accessor", name: "shadow", static: !1, private: !1, access: { has: (i) => "shadow" in i, get: (i) => i.shadow, set: (i, l) => {
       i.shadow = l;
-    } }, metadata: e }, g, p), v(null, a = { value: s }, t, { kind: "class", name: s.name, metadata: e }, null, r), s = a.value, e && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), o.styles = [z, N], b(s, r), s;
+    } }, metadata: e }, g, p), x(null, a = { value: r }, t, { kind: "class", name: r.name, metadata: e }, null, s), r = a.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), o.styles = [z, N], b(r, s), r;
 })();
 export {
   G as SbbCarouselElement

package/carousel/carousel-item/carousel-item.component.js

@@ -2,7 +2,7 @@ import { __esDecorate as i, __runInitializers as n } from "tslib";
 import { css as c, LitElement as m, html as u } from "lit";
 import { customElement as b } from "lit/decorators.js";
 import { SbbElementInternalsMixin as d } from "../../core/mixins.js";
-const p = c`:host{display:flex;scroll-snap-align:start;flex-shrink:0}`;
+const p = c`:host{display:flex;scroll-snap-align:start;flex-shrink:0}::slotted(sbb-image){border-radius:unset}`;
 let S = (() => {
   var e;
   let o = [b("sbb-carousel-item")], l, a = [], t, r = d(m);