@sbb-esta/lyne-elements 4.3.1 → 4.4.0

package/autocomplete/autocomplete-base-element.js

@@ -15,10 +15,10 @@ import { isLean as pt, isZeroAnimationDuration as bt, isSafari as ct } from "../
 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;
+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}}`, S = 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 = [];
+  let o = ht(dt(rt)), a, l = [], x = [], C, z = [], I = [], P, F = [], q = [], D, L = [], U = [], N, W = [], V = [], R, M = [], T = [], $, j = [], H = [], Y, Z = [], K = [], B, G = [], J = [];
   return r = class extends o {
     constructor() {
       super();
@@ -31,7 +31,7 @@ let qt = (() => {
       b(this, f);
       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, {
+      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, V), n(this, M, pt() ? "s" : "m"))), s(this, f, (n(this, T), 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.pendingAutoSelectedOption = null, this._originResizeObserver = new st(this, {
         target: null,
         skipInitial: !0,
         callback: () => {
@@ -44,7 +44,7 @@ let qt = (() => {
         this._isPointerDownEventOnMenu = A(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.addEventListener?.("optionselected", (t) => this.onOptionSelected(t)), this.addController(new lt(this, () => this.closest("sbb-form-field"), {
         negative: (t) => {
           this.negative = t.negative, this.syncNegative();
         },
@@ -158,13 +158,13 @@ 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");
     }
     connectedCallback() {
-      this.popover = "manual", super.connectedCallback(), C && (this.id ||= this.overlayId), this.hasUpdated && this._componentSetup(), this.syncNegative();
+      this.popover = "manual", super.connectedCallback(), S && (this.id ||= this.overlayId), this.hasUpdated && this._componentSetup(), this.syncNegative();
     }
     willUpdate(t) {
       super.willUpdate(t), t.has("negative") && this.syncNegative(), t.has("autoActiveFirstOption") && this.isOpen && this._setNextActiveOptionIfAutoActiveFirstOption();
@@ -183,17 +183,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()) : (
@@ -226,7 +237,7 @@ let qt = (() => {
         signal: this._triggerAbortController.signal
       }), this.triggerElement.addEventListener("input", (i) => {
         const O = i.target.value;
-        O && this.open(), this._highlightOptions(O), this._lastUserInput = O;
+        O && this.open(), this._highlightOptions(O), this._lastUserInput = O, 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
@@ -307,8 +318,8 @@ let qt = (() => {
           <div class="sbb-autocomplete__wrapper">
             <div
               class="sbb-autocomplete__options"
-              role=${C ? tt : this.panelRole}
-              id=${C ? tt : this.overlayId}
+              role=${S ? tt : this.panelRole}
+              id=${S ? tt : this.overlayId}
               tabindex="-1"
               ${et((t) => this._optionContainer = t)}
             >
@@ -321,9 +332,9 @@ let qt = (() => {
     }
   }, 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) => {
+    a = [it(), h()], C = [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 })], R = [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) => {
       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, x), c(r, null, C, { 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) => {
       e.preserveIconSpace = i;
@@ -331,9 +342,9 @@ let qt = (() => {
       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) => {
       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(r, 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(r, 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) => {
       e.requireSelection = i;

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/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);

package/chip/chip/chip.component.js

@@ -1,10 +1,10 @@
 var v = (e) => {
   throw TypeError(e);
 };
-var p = (e, r, b) => r.has(e) || v("Cannot " + b);
-var m = (e, r, b) => (p(e, r, "read from private field"), b ? b.call(e) : r.get(e)), g = (e, r, b) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, b), l = (e, r, b, t) => (p(e, r, "write to private field"), t ? t.call(e, b) : r.set(e, b), b);
-import { __runInitializers as n, __esDecorate as f } from "tslib";
-import { css as x, LitElement as y, html as k } from "lit";
+var p = (e, r, i) => r.has(e) || v("Cannot " + i);
+var m = (e, r, i) => (p(e, r, "read from private field"), i ? i.call(e) : r.get(e)), g = (e, r, i) => r.has(e) ? v("Cannot add the same private member more than once") : r instanceof WeakSet ? r.add(e) : r.set(e, i), l = (e, r, i, s) => (p(e, r, "write to private field"), s ? s.call(e, i) : r.set(e, i), i);
+import { __runInitializers as n, __esDecorate as _ } from "tslib";
+import { css as y, LitElement as x, html as k } from "lit";
 import { customElement as w, property as S } from "lit/decorators.js";
 import { SbbLanguageController as z } from "../../core/controllers.js";
 import { i18nChipDelete as D } from "../../core/i18n.js";
@@ -12,28 +12,28 @@ import { SbbNegativeMixin as E, SbbDisabledMixin as C, SbbReadonlyMixin as q, Sb
 import { boxSizingStyles as I } from "../../core/styles.js";
 import "../../button/mini-button.js";
 import "../../screen-reader-only.js";
-const M = x`:host{--sbb-chip-background-color: var(--sbb-background-color-3);--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-border-color: var(--sbb-border-color-4-inverted);--sbb-chip-border-radius: var(--sbb-border-radius-2x);--sbb-chip-color: var(--sbb-color-granite);--sbb-chip-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cloud));--sbb-chip-color-hover: var(--sbb-color-2);--sbb-chip-background-color-active: var(--sbb-background-color-1);--sbb-chip-background-color-hover: var(--sbb-background-color-1);--sbb-chip-height: 1.5rem;--sbb-chip-label-padding-inline: var(--sbb-spacing-fixed-2x);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );outline:none!important;display:inline-block}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip{background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);display:flex;align-items:stretch;height:var(--sbb-chip-height)}:host(:focus) .sbb-chip{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{--sbb-text-font-size: var(--sbb-text-font-size-xxs);font-family:var(--sbb-typo-font-family);font-weight:400;line-height:var(--sbb-typo-line-height-text);letter-spacing:var(--sbb-typo-letter-spacing-text);font-size:var(--sbb-text-font-size);overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--_sbb-mini-button-image-size: ;border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}`;
+const M = y`:host{--sbb-chip-border: var(--sbb-border-width-1x) solid var(--sbb-chip-border-color);--sbb-chip-transition-duration: var( --sbb-disable-animation-duration, var(--sbb-animation-duration-2x) );display:inline-flex;align-items:stretch;background-color:var(--sbb-chip-background-color);border-radius:var(--sbb-chip-border-radius);color:var(--sbb-chip-color);height:var(--sbb-chip-height)}:host(:focus){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);--sbb-focus-outline-offset: -.0625rem;--sbb-focus-outline-style: initial}:host([negative]){--sbb-chip-border-color: var(--sbb-border-color-4-negative-inverted);--sbb-chip-background-color: var(--sbb-background-color-3-negative);--sbb-chip-color: var(--sbb-color-4-negative);--sbb-chip-color-hover: var(--sbb-color-2-negative);--sbb-chip-background-color-active: var(--sbb-background-color-1-negative);--sbb-chip-background-color-hover: var(--sbb-background-color-1-negative);--sbb-focus-outline-color: var(--sbb-focus-outline-color-dark)}.sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-inline-end:none;border-radius:var(--sbb-chip-border-radius) 0 0 var(--sbb-chip-border-radius);display:flex;align-items:center;padding-inline:var(--sbb-chip-label-padding-inline);outline:none;overflow:hidden}:host(:is([disabled],[readonly])) .sbb-chip__label-wrapper{border:var(--sbb-chip-border);border-radius:var(--sbb-chip-border-radius)}.sbb-chip__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;display:inline-block;font-size:var(--sbb-chip-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);transition:transform var(--sbb-chip-transition-duration) var(--sbb-animation-easing)}.sbb-chip__delete{--sbb-mini-button-border-radius: 0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0;--sbb-mini-button-color-text: var(--sbb-chip-color);--sbb-mini-button-color-active-background: var(--sbb-chip-background-color-active);--sbb-mini-button-color-hover-background: var(--sbb-chip-background-color-hover);--sbb-icon-svg-width: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--sbb-icon-svg-height: calc(var(--sbb-size-icon-ui-small) - var(--sbb-border-width-1x) * 2);--_sbb-mini-button-image-size: ;border:var(--sbb-chip-border);border-radius:0 var(--sbb-chip-border-radius) var(--sbb-chip-border-radius) 0}:host(:is([disabled],[readonly])) .sbb-chip__delete{display:none}@media(any-hover:hover){:host(:not([disabled])) .sbb-chip__delete:hover{--sbb-mini-button-color-text: var(--sbb-chip-color-hover)}}`;
 let H = (() => {
-  var s, o;
-  let e = [w("sbb-chip")], r, b = [], t, c = E(C(q(B(y)))), d, u = [], h = [];
-  return o = class extends c {
+  var o, b;
+  let e = [w("sbb-chip")], r, i = [], s, c = E(C(q(B(x)))), d, u = [], h = [];
+  return b = class extends c {
     constructor() {
       super(...arguments);
-      g(this, s);
-      l(this, s, n(this, u, null)), this._language = (n(this, h), new z(this));
+      g(this, o);
+      l(this, o, n(this, u, null)), this._language = (n(this, h), new z(this));
     }
     /** The value of chip. Will be used as label if nothing is slotted. */
     get value() {
-      return m(this, s);
+      return m(this, o);
     }
-    set value(i) {
-      l(this, s, i);
+    set value(t) {
+      l(this, o, t);
     }
-    willUpdate(i) {
-      super.willUpdate(i), i.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
+    willUpdate(t) {
+      super.willUpdate(t), t.has("disabled") && (this.disabled ? this.removeAttribute("tabindex") : this.setAttribute("tabindex", "-1"));
     }
-    firstUpdated(i) {
-      super.firstUpdated(i), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
+    firstUpdated(t) {
+      super.firstUpdated(t), setTimeout(() => this._deleteButton().removeAttribute("tabindex"));
     }
     _deleteButton() {
       return this.shadowRoot.querySelector("sbb-mini-button");
@@ -43,31 +43,29 @@ let H = (() => {
     }
     render() {
       return k`
-      <div class="sbb-chip">
-        <div class="sbb-chip__label-wrapper">
-          <span class="sbb-chip__label">
-            <slot>${this.value ?? ""}</slot>
-          </span>
-        </div>
-        <sbb-mini-button
-          aria-hidden="true"
-          class="sbb-chip__delete"
-          icon-name="cross-tiny-small"
-          @click=${this._handleDeleteButtonClick}
-        >
-        </sbb-mini-button>
-        <sbb-screen-reader-only>, ${D[this._language.current]}</sbb-screen-reader-only>
+      <div class="sbb-chip__label-wrapper">
+        <span class="sbb-chip__label">
+          <slot>${this.value ?? ""}</slot>
+        </span>
       </div>
+      <sbb-mini-button
+        aria-hidden="true"
+        class="sbb-chip__delete"
+        icon-name="cross-tiny-small"
+        @click=${this._handleDeleteButtonClick}
+      >
+      </sbb-mini-button>
+      <sbb-screen-reader-only>, ${D[this._language.current]}</sbb-screen-reader-only>
     `;
     }
-  }, s = new WeakMap(), t = o, (() => {
-    const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
-    d = [S()], f(o, null, d, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, _) => {
-      a.value = _;
-    } }, metadata: i }, u, h), f(null, r = { value: t }, e, { kind: "class", name: t.name, metadata: i }, null, b), t = r.value, i && Object.defineProperty(t, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
-  })(), o.role = "option", o.styles = [I, M], o.events = {
+  }, o = new WeakMap(), s = b, (() => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(c[Symbol.metadata] ?? null) : void 0;
+    d = [S()], _(b, null, d, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (a) => "value" in a, get: (a) => a.value, set: (a, f) => {
+      a.value = f;
+    } }, metadata: t }, u, h), _(null, r = { value: s }, e, { kind: "class", name: s.name, metadata: t }, null, i), s = r.value, t && Object.defineProperty(s, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
+  })(), b.role = "option", b.styles = [I, M], b.events = {
     requestdelete: "requestdelete"
-  }, n(t, b), t;
+  }, n(s, i), s;
 })();
 export {
   H as SbbChipElement

package/chip/chip-group/chip-group.component.js

@@ -2,10 +2,10 @@ var x = (i) => {
   throw TypeError(i);
 };
 var I = (i, a, r) => a.has(i) || x("Cannot " + r);
-var d = (i, a, r) => (I(i, a, "read from private field"), r ? r.call(i) : a.get(i)), _ = (i, a, r) => a.has(i) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), m = (i, a, r, p) => (I(i, a, "write to private field"), p ? p.call(i, r) : a.set(i, r), r);
+var d = (i, a, r) => (I(i, a, "read from private field"), r ? r.call(i) : a.get(i)), g = (i, a, r) => a.has(i) ? x("Cannot add the same private member more than once") : a instanceof WeakSet ? a.add(i) : a.set(i, r), m = (i, a, r, p) => (I(i, a, "write to private field"), p ? p.call(i, r) : a.set(i, r), r);
 import { __esDecorate as c, __runInitializers as b } from "tslib";
 import { css as K, LitElement as L, isServer as A, html as O } from "lit";
-import { customElement as W, property as g } from "lit/decorators.js";
+import { customElement as W, property as _ } from "lit/decorators.js";
 import { isArrowKeyPressed as T, getNextElementIndex as q } from "../../core/a11y.js";
 import { SbbLanguageController as F, SbbPropertyWatcherController as M } from "../../core/controllers.js";
 import { isLean as V } from "../../core/dom/lean-context.js";
@@ -13,16 +13,16 @@ import { i18nSelectionRequired as R, i18nChipGroupInputDescription as $ } from "
 import { SbbRequiredMixin as B, SbbDisabledMixin as N, SbbNegativeMixin as j, SbbFormAssociatedMixin as G, SbbElementInternalsMixin as U } from "../../core/mixins.js";
 import { boxSizingStyles as J } from "../../core/styles.js";
 import { SbbChipElement as P } from "../chip.js";
-const H = K`:host{--sbb-chip-group-input-min-width: 9.375rem;--_sbb-chip-group-margin-block-start-default: .125rem;--_sbb-chip-group-margin-block-start-default-large: .21875rem;max-width:100%}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(0)}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(0)}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}.sbb-chip-group{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-spacing-fixed-1x);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}`;
+const H = K`:host{width:100%;display:flex;flex-wrap:wrap;gap:var(--sbb-chip-group-gap);align-items:center;margin-block:var(--sbb-chip-group-margin-block)}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .375rem .3125rem}@media(min-width:64rem){:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .3125rem .1875rem}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .4375rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: 0 .3125rem}}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 0}@media(min-width:64rem){:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 0}}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .6875rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: .1875rem .875rem}}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) var(--_sbb-chip-group-margin-block-start-default-large)}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) var(--_sbb-chip-group-margin-block-start-default-large)}}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block: var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) 1rem}@media(min-width:64rem){:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) 1.25rem}}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default) .46875rem}@media(min-width:64rem){:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block: var(--_sbb-chip-group-margin-block-start-default-large) .46875rem}}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}`;
 let ot = (() => {
   var h, u, n;
-  let i = [W("sbb-chip-group")], a, r = [], p, f = B(N(j(G(U(L))))), y = [], v, w, E = [], z = [], k, C = [], S = [];
-  return n = class extends f {
+  let i = [W("sbb-chip-group")], a, r = [], p, y = B(N(j(G(U(L))))), f = [], v, z, w = [], k = [], E, C = [], S = [];
+  return n = class extends y {
     constructor() {
       super();
-      _(this, h);
-      _(this, u);
-      m(this, h, (b(this, y), b(this, E, null))), m(this, u, (b(this, z), b(this, C, ["Enter"]))), this._inputAttributeObserver = (b(this, S), A ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new F(this), this.addEventListener?.(P.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new M(this, () => this.closest("sbb-form-field"), {
+      g(this, h);
+      g(this, u);
+      m(this, h, (b(this, f), b(this, w, null))), m(this, u, (b(this, k), b(this, C, ["Enter"]))), this._inputAttributeObserver = (b(this, S), A ? null : new MutationObserver(() => this._reactToInputChanges())), this._language = new F(this), this.addEventListener?.(P.events.requestdelete, (t) => this._deleteChip(t.target)), this.addEventListener?.("keydown", (t) => this._onChipKeyDown(t)), this.addController(new M(this, () => this.closest("sbb-form-field"), {
         size: (t) => this._updateSize(t.size),
         label: (t) => this._updateLabelState(t),
         hiddenLabel: (t) => this._updateLabelState(t)
@@ -210,19 +210,15 @@ let ot = (() => {
       this._inputElement && this._inputElement.setAttribute("aria-description", `${$[this._language.current]} ${this.value.length}`);
     }
     render() {
-      return O`
-      <div class="sbb-chip-group">
-        <slot @slotchange=${this._setupComponent}></slot>
-      </div>
-    `;
+      return O`<slot @slotchange=${this._setupComponent}></slot>`;
     }
   }, h = new WeakMap(), u = new WeakMap(), p = n, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(f[Symbol.metadata] ?? null) : void 0;
-    v = [g({ type: Array })], w = [g({ attribute: !1 })], k = [g({ attribute: "separator-keys", type: Array })], c(n, null, v, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
+    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(y[Symbol.metadata] ?? null) : void 0;
+    v = [_({ type: Array })], z = [_({ attribute: !1 })], E = [_({ attribute: "separator-keys", type: Array })], c(n, null, v, { kind: "setter", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, set: (e, s) => {
       e.value = s;
-    } }, metadata: t }, null, y), c(n, null, w, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
+    } }, metadata: t }, null, f), c(n, null, z, { kind: "accessor", name: "displayWith", static: !1, private: !1, access: { has: (e) => "displayWith" in e, get: (e) => e.displayWith, set: (e, s) => {
       e.displayWith = s;
-    } }, metadata: t }, E, z), c(n, null, k, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, s) => {
+    } }, metadata: t }, w, k), c(n, null, E, { kind: "accessor", name: "separatorKeys", static: !1, private: !1, access: { has: (e) => "separatorKeys" in e, get: (e) => e.separatorKeys, set: (e, s) => {
       e.separatorKeys = s;
     } }, metadata: t }, C, S), c(null, a = { value: p }, i, { kind: "class", name: p.name, metadata: t }, null, r), p = a.value, t && Object.defineProperty(p, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
   })(), n.role = "listbox", n.styles = [J, H], n.events = {