@sbb-esta/lyne-elements 4.3.0 → 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/breadcrumb/breadcrumb/breadcrumb.component.js

@@ -1,28 +1,28 @@
 import { __esDecorate as l, __runInitializers as i } from "tslib";
-import { customElement as c } from "lit/decorators.js";
-import { html as n } from "lit/static-html.js";
+import { customElement as n } from "lit/decorators.js";
+import { html as c } from "lit/static-html.js";
 import { SbbLinkBaseElement as m } from "../../core/base-elements.js";
 import { SbbHydrationMixin as d } from "../../core/mixins.js";
 import { boxSizingStyles as u } from "../../core/styles.js";
 import { SbbIconNameMixin as f } from "../../icon.js";
 import { css as v } from "lit";
-const h = v`:host{display:flex;--sbb-breadcrumb-color: var(--sbb-color-granite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium))}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-color-charcoal);--sbb-breadcrumb-color: light-dark(var(--sbb-color-charcoal), var(--sbb-color-smoke))}}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-breadcrumb-color: var(--sbb-color-anthracite);--sbb-breadcrumb-color: light-dark(var(--sbb-color-anthracite), var(--sbb-color-cloud))}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;--sbb-text-font-size: var(--sbb-text-font-size-xs);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);color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-spacing-fixed-2x);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none}@media(forced-colors:active){.sbb-breadcrumb{--sbb-breadcrumb-color: ButtonText}}.sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
+const p = v`:host{display:flex}@media(any-hover:hover){:host(:hover){--sbb-breadcrumb-color: var(--sbb-breadcrumb-color-hover)}}:host(:is(:active,:is(:state(active),[state--active]))){--sbb-breadcrumb-color: var(--sbb-breadcrumb-color-active)}.sbb-breadcrumb{--sbb-link-text-decoration-line: none;color:var(--sbb-link-color-normal);text-decoration-line:var(--sbb-link-text-decoration-line, underline);text-decoration-thickness:.0625rem;text-underline-offset:.3125em}@media(forced-colors:active){.sbb-breadcrumb{text-decoration:underline}}.sbb-breadcrumb{display:flex;cursor:var(--sbb-cursor-pointer);gap:var(--sbb-breadcrumb-gap);color:var(--sbb-breadcrumb-color);align-items:center;overflow:hidden;outline:none;font-size:var(--sbb-breadcrumb-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text)}.sbb-breadcrumb:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:var(--sbb-border-radius-2x)}.sbb-breadcrumb__label{overflow:hidden;white-space:nowrap;text-overflow:ellipsis}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-breadcrumb__label{display:none}slot[name=icon] .sbb-breadcrumb__icon,slot[name=icon] ::slotted(*){flex-shrink:0}`;
 let z = (() => {
-  var r;
-  let s = [c("sbb-breadcrumb")], o, b = [], e, a = f(d(m));
-  return r = class extends a {
+  var t;
+  let b = [n("sbb-breadcrumb")], o, s = [], e, a = f(d(m));
+  return t = class extends a {
     renderTemplate() {
-      return n`
+      return c`
       ${this.renderIconSlot("sbb-breadcrumb__icon")}
       <span class="sbb-breadcrumb__label">
         <slot></slot>
       </span>
     `;
     }
-  }, e = r, (() => {
-    const t = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
-    l(null, o = { value: e }, s, { kind: "class", name: e.name, metadata: t }, null, b), e = o.value, t && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: t });
-  })(), r.styles = [u, h], i(e, b), e;
+  }, e = t, (() => {
+    const r = typeof Symbol == "function" && Symbol.metadata ? Object.create(a[Symbol.metadata] ?? null) : void 0;
+    l(null, o = { value: e }, b, { kind: "class", name: e.name, metadata: r }, null, s), e = o.value, r && Object.defineProperty(e, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: r });
+  })(), t.styles = [u, p], i(e, s), e;
 })();
 export {
   z as SbbBreadcrumbElement

package/breadcrumb/breadcrumb-group/breadcrumb-group.component.js

@@ -1,18 +1,18 @@
 import { __esDecorate as u, __runInitializers as h } from "tslib";
-import { ResizeController as _ } from "@lit-labs/observers/resize-controller.js";
+import { ResizeController as g } from "@lit-labs/observers/resize-controller.js";
 import { css as f, LitElement as v, html as a, nothing as x } from "lit";
 import { customElement as y, state as C } from "lit/decorators.js";
-import { isArrowKeyPressed as w, sbbInputModalityDetector as k, getNextElementIndex as S } from "../../core/a11y.js";
-import { SbbLanguageController as E } from "../../core/controllers.js";
-import { i18nBreadcrumbEllipsisButtonLabel as z } from "../../core/i18n.js";
+import { isArrowKeyPressed as w, sbbInputModalityDetector as S, getNextElementIndex as k } from "../../core/a11y.js";
+import { SbbLanguageController as z } from "../../core/controllers.js";
+import { i18nBreadcrumbEllipsisButtonLabel as E } from "../../core/i18n.js";
 import { SbbElementInternalsMixin as I, SbbNamedSlotListMixin as $ } from "../../core/mixins.js";
 import { boxSizingStyles as B } from "../../core/styles.js";
 import "../../icon.js";
-const D = f`:host{--sbb-breadcrumb-group-wrap: nowrap;--sbb-breadcrumb-group-visibility: hidden;--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-granite);--sbb-breadcrumb-group-ellipsis-color: light-dark( var(--sbb-color-granite), var(--sbb-color-cloud) );--sbb-breadcrumb-group-ellipsis-background-color: transparent;--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-1x);--sbb-breadcrumb-group-ellipsis-border-color: var(--sbb-color-silver);--sbb-breadcrumb-group-ellipsis-border-color: light-dark( var(--sbb-color-silver), var(--sbb-color-anthracite) );display:block}:host(:is(:state(loaded),[state--loaded])){--sbb-breadcrumb-group-visibility: visible}:host(:is(:is(:state(state-collapsed),[state--state-collapsed]),:is(:state(state-manually-expanded),[state--state-manually-expanded]))){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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);line-height:0;letter-spacing:.01em;width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, p = 3;
+const D = f`:host{display:block}:host(:is(:state(loaded),[state--loaded])){--sbb-breadcrumb-group-visibility: visible}:host(:is(:is(:state(state-collapsed),[state--state-collapsed]),:is(:state(state-manually-expanded),[state--state-manually-expanded]))){--sbb-breadcrumb-group-wrap: wrap}.sbb-breadcrumb-group{list-style:none;margin:0;padding:0;font-size:inherit;display:flex;flex-wrap:var(--sbb-breadcrumb-group-wrap);column-gap:var(--sbb-spacing-fixed-1x);visibility:var(--sbb-breadcrumb-group-visibility)}.sbb-breadcrumb-group__item{flex:0 0 auto;display:flex;column-gap:var(--sbb-spacing-fixed-1x)}.sbb-breadcrumb-group__divider-icon{color:var(--sbb-breadcrumb-group-ellipsis-color)}#sbb-breadcrumb-ellipsis{appearance:none;box-sizing:border-box;margin:0;outline:none;border:none;padding:0;background:none;-webkit-tap-highlight-color:transparent;color:inherit;--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);line-height:0;letter-spacing:.01em;font-size:var(--sbb-text-font-size-xxs);width:var(--sbb-size-icon-ui-small);height:var(--sbb-size-icon-ui-small);border:var(--sbb-breadcrumb-group-ellipsis-border-width) solid var(--sbb-breadcrumb-group-ellipsis-border-color);border-radius:50%;padding-block-end:.5em;cursor:var(--sbb-cursor-pointer);color:var(--sbb-breadcrumb-group-ellipsis-color);background-color:var(--sbb-breadcrumb-group-ellipsis-background-color);overflow:hidden}@media(forced-colors:active){#sbb-breadcrumb-ellipsis{--sbb-breadcrumb-group-ellipsis-border-width: var(--sbb-border-width-2x);--sbb-breadcrumb-group-ellipsis-border-color: CanvasText}}@media(any-hover:hover){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-color: var(--sbb-color-2);--sbb-breadcrumb-group-ellipsis-background-color: var(--sbb-background-color-3)}}@media(any-hover:hover)and (forced-colors:active){#sbb-breadcrumb-ellipsis:hover{--sbb-breadcrumb-group-ellipsis-border-color: Highlight}}#sbb-breadcrumb-ellipsis:focus-visible{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width)}`, m = 3;
 let j = (() => {
-  var t;
-  let m = [y("sbb-breadcrumb-group")], l, o = [], r, b = I($(v)), n = [], d;
-  return t = class extends b {
+  var s;
+  let p = [y("sbb-breadcrumb-group")], l, o = [], r, b = I($(v)), n = [], d;
+  return s = class extends b {
     /** The state of the breadcrumb group. */
     set _state(e) {
       this._stateInternal && this.internals.states.delete(`state-${this._stateInternal}`), this._stateInternal = e, this._stateInternal && this.internals.states.add(`state-${this._stateInternal}`);
@@ -21,11 +21,11 @@ let j = (() => {
       return this._stateInternal;
     }
     constructor() {
-      super(), this.listChildLocalNames = (h(this, n), ["sbb-breadcrumb"]), this._stateInternal = null, this._resizeObserver = new _(this, {
+      super(), this.listChildLocalNames = (h(this, n), ["sbb-breadcrumb"]), this._stateInternal = null, this._resizeObserver = new g(this, {
         target: null,
         skipInitial: !0,
         callback: () => this._evaluateCollapsedState()
-      }), this._language = new E(this), this._markForFocus = !1, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
+      }), this._language = new z(this), this._markForFocus = !1, this.addEventListener?.("keydown", (e) => this._handleKeyDown(e));
     }
     _handleKeyDown(e) {
       if (!(!this.listChildren.length || // don't trap nested handling
@@ -42,26 +42,26 @@ let j = (() => {
       super.willUpdate(e), e.has("listChildren") && this._syncBreadcrumbs();
     }
     updated(e) {
-      super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && k.mostRecentModality === "keyboard" && (this.listChildren[1]?.focus(), this._markForFocus = !1);
+      super.updated(e), e.has("listChildren") && Promise.resolve().then(() => this._evaluateCollapsedState()), this._markForFocus && S.mostRecentModality === "keyboard" && (this.listChildren[1]?.focus(), this._markForFocus = !1);
     }
     /** Apply the aria-current attribute to the last sbb-breadcrumb element. */
     _syncBreadcrumbs() {
-      this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length < p && (this._state = null);
+      this.listChildren.slice(0, -1).filter((e) => e.hasAttribute("accessibility-current")).forEach((e) => e.removeAttribute("accessibility-current")), this.listChildren[this.listChildren.length - 1]?.setAttribute("accessibility-current", "page"), this.listChildren.length < m && (this._state = null);
     }
     /**
      * Sets the focus on the correct element when the ellipsis breadcrumb is displayed and the user is navigating with keyboard's arrows.
      */
     _focusNextCollapsed(e) {
-      const s = [
+      const t = [
         this.listChildren[0],
         this.shadowRoot.querySelector("#sbb-breadcrumb-ellipsis"),
         this.listChildren[this.listChildren.length - 1]
       ];
-      this._focusNext(e, s);
+      this._focusNext(e, t);
     }
-    _focusNext(e, s = this.listChildren) {
-      const i = s.findIndex((c) => c === document.activeElement || c === this.shadowRoot.activeElement), g = S(e, i, s.length);
-      s[g]?.focus(), e.preventDefault();
+    _focusNext(e, t = this.listChildren) {
+      const i = t.findIndex((c) => c === document.activeElement || c === this.shadowRoot.activeElement), _ = k(e, i, t.length);
+      t[_]?.focus(), e.preventDefault();
     }
     /**
      * Note: due to @State annotation on _state, this method triggers a new render; as a consequence, the focus is moved
@@ -72,7 +72,7 @@ let j = (() => {
     }
     /** Evaluate if the expanded breadcrumb element fits in page width, otherwise it needs ellipsis */
     _evaluateCollapsedState() {
-      !this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= p && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
+      !this._state && this.scrollWidth > this.offsetWidth && this.listChildren.length >= m && (this._state = "collapsed", this._resizeObserver.hostDisconnected(), this.removeController(this._resizeObserver));
     }
     _renderCollapsed() {
       return a`
@@ -87,7 +87,7 @@ let j = (() => {
         <button
           type="button"
           id="sbb-breadcrumb-ellipsis"
-          aria-label=${z[this._language.current]}
+          aria-label=${E[this._language.current]}
           aria-expanded="false"
           @click=${() => this._expandBreadcrumbs()}
         >
@@ -104,10 +104,10 @@ let j = (() => {
     `;
     }
     _renderExpanded() {
-      return this.listSlotEntries().map((e, s, i) => a`
+      return this.listSlotEntries().map((e, t, i) => a`
         <li class="sbb-breadcrumb-group__item">
           <slot name=${e.name}></slot>
-          ${s !== i.length - 1 ? a`<sbb-icon
+          ${t !== i.length - 1 ? a`<sbb-icon
                 name="chevron-small-right-small"
                 class="sbb-breadcrumb-group__divider-icon"
               ></sbb-icon>` : x}
@@ -122,12 +122,12 @@ let j = (() => {
       ${this.renderHiddenSlot()}
     `;
     }
-  }, r = t, (() => {
+  }, r = s, (() => {
     const e = typeof Symbol == "function" && Symbol.metadata ? Object.create(b[Symbol.metadata] ?? null) : void 0;
-    d = [C()], u(t, null, d, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (s) => "_state" in s, set: (s, i) => {
-      s._state = i;
-    } }, metadata: e }, null, n), u(null, l = { value: r }, m, { kind: "class", name: r.name, metadata: e }, null, o), r = l.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
-  })(), t.role = "navigation", t.styles = [B, D], h(r, o), r;
+    d = [C()], u(s, null, d, { kind: "setter", name: "_state", static: !1, private: !1, access: { has: (t) => "_state" in t, set: (t, i) => {
+      t._state = i;
+    } }, metadata: e }, null, n), u(null, l = { value: r }, p, { kind: "class", name: r.name, metadata: e }, null, o), r = l.value, e && Object.defineProperty(r, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: e });
+  })(), s.role = "navigation", s.styles = [B, D], h(r, o), r;
 })();
 export {
   j as SbbBreadcrumbGroupElement

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-ps7PVXtB.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";
 export {
   o as SbbButtonCommonElementMixin,
   a as buttonAccentStyle,

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-ps7PVXtB.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";
 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);

package/checkbox/checkbox/checkbox.component.js

@@ -2,51 +2,51 @@ var I = (t) => {
   throw TypeError(t);
 };
 var j = (t, s, a) => s.has(t) || I("Cannot " + a);
-var u = (t, s, a) => (j(t, s, "read from private field"), a ? a.call(t) : s.get(t)), h = (t, s, a) => s.has(t) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, a), f = (t, s, a, l) => (j(t, s, "write to private field"), l ? l.call(t, a) : s.set(t, a), a);
-import { __esDecorate as p, __runInitializers as n } from "tslib";
+var h = (t, s, a) => (j(t, s, "read from private field"), a ? a.call(t) : s.get(t)), u = (t, s, a) => s.has(t) ? I("Cannot add the same private member more than once") : s instanceof WeakSet ? s.add(t) : s.set(t, a), d = (t, s, a, l) => (j(t, s, "write to private field"), l ? l.call(t, a) : s.set(t, a), a);
+import { __esDecorate as f, __runInitializers as n } from "tslib";
 import { css as E, LitElement as $, html as C } from "lit";
-import { customElement as D, property as d } from "lit/decorators.js";
+import { customElement as D, property as p } from "lit/decorators.js";
 import { getOverride as O } from "../../core/decorators.js";
 import { isLean as L } from "../../core/dom.js";
 import { boxSizingStyles as M } from "../../core/styles.js";
 import { SbbIconNameMixin as N } from "../../icon.js";
 import { SbbCheckboxCommonElementMixin as T, checkboxCommonStyle as q } from "../common.js";
 import "../../visual-checkbox.js";
-const A = E`:host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}`;
+const A = E`:host{outline:none!important;display:inline-block}:host([icon-placement=start]){--sbb-checkbox-label-icon-flex-direction: row-reverse;--sbb-checkbox-label-icon-justify-content: flex-end;--sbb-checkbox-label-icon-flex-grow: 0}:host(:focus-visible) .sbb-checkbox-wrapper{outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style, solid) var(--sbb-focus-outline-width);border-radius:calc(var(--sbb-border-radius-4x) - var(--sbb-focus-outline-offset))}.sbb-checkbox__label{flex-direction:var(--sbb-checkbox-label-icon-flex-direction);justify-content:var(--sbb-checkbox-label-icon-justify-content);flex-grow:var(--sbb-checkbox-label-icon-flex-grow);gap:var(--sbb-checkbox-label-gap)}:host(:not(:is(:state(slotted),[state--slotted]),:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-checkbox__label{display:none}sbb-icon,slot[name=icon] ::slotted(sbb-icon){display:flex;align-items:center;height:calc(1em * var(--sbb-typo-line-height-text))}`;
 let X = (() => {
   var r, b, m, c;
   let t = [D("sbb-checkbox")], s, a = [], l, _ = N(T($)), x, v = [], k = [], g, z = [], y = [], S, P = [], w = [];
   return c = class extends _ {
     constructor() {
       super(...arguments);
-      h(this, r, n(this, v, null));
-      h(this, b, (n(this, k), n(this, z, L() ? "xs" : "m")));
-      h(this, m, (n(this, y), n(this, P, "end")));
+      u(this, r, n(this, v, null));
+      u(this, b, (n(this, k), n(this, z, L() ? "xs" : "m")));
+      u(this, m, (n(this, y), n(this, P, "end")));
       n(this, w);
     }
     /** Value of the form element. */
     get value() {
-      return u(this, r);
+      return h(this, r);
     }
     set value(i) {
-      f(this, r, i);
+      d(this, r, i);
     }
     /**
      * Size variant, either xs, s or m.
      * @default 'm' / 'xs' (lean)
      */
     get size() {
-      return u(this, b);
+      return h(this, b);
     }
     set size(i) {
-      f(this, b, i);
+      d(this, b, i);
     }
     /** The label position relative to the labelIcon. Defaults to end */
     get iconPlacement() {
-      return u(this, m);
+      return h(this, m);
     }
     set iconPlacement(i) {
-      f(this, m, i);
+      d(this, m, i);
     }
     render() {
       return C`
@@ -62,9 +62,7 @@ let X = (() => {
               ></sbb-visual-checkbox>
             </span>
             <span class="sbb-checkbox__label">
-              <span class="sbb-checkbox__label--text">
-                <slot></slot>
-              </span>
+              <slot></slot>
               ${this.renderIconSlot()}
             </span>
           </span>
@@ -74,13 +72,13 @@ let X = (() => {
     }
   }, r = new WeakMap(), b = new WeakMap(), m = new WeakMap(), l = c, (() => {
     const i = typeof Symbol == "function" && Symbol.metadata ? Object.create(_[Symbol.metadata] ?? null) : void 0;
-    x = [d()], g = [d({ reflect: !0 }), O((e, o) => e.group?.size ?? o)], S = [d({ attribute: "icon-placement", reflect: !0 })], p(c, null, x, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, get: (e) => e.value, set: (e, o) => {
+    x = [p()], g = [p({ reflect: !0 }), O((e, o) => e.group?.size ?? o)], S = [p({ attribute: "icon-placement", reflect: !0 })], f(c, null, x, { kind: "accessor", name: "value", static: !1, private: !1, access: { has: (e) => "value" in e, get: (e) => e.value, set: (e, o) => {
       e.value = o;
-    } }, metadata: i }, v, k), p(c, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, o) => {
+    } }, metadata: i }, v, k), f(c, null, g, { kind: "accessor", name: "size", static: !1, private: !1, access: { has: (e) => "size" in e, get: (e) => e.size, set: (e, o) => {
       e.size = o;
-    } }, metadata: i }, z, y), p(c, null, S, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (e) => "iconPlacement" in e, get: (e) => e.iconPlacement, set: (e, o) => {
+    } }, metadata: i }, z, y), f(c, null, S, { kind: "accessor", name: "iconPlacement", static: !1, private: !1, access: { has: (e) => "iconPlacement" in e, get: (e) => e.iconPlacement, set: (e, o) => {
       e.iconPlacement = o;
-    } }, metadata: i }, P, w), p(null, s = { value: l }, t, { kind: "class", name: l.name, metadata: i }, null, a), l = s.value, i && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
+    } }, metadata: i }, P, w), f(null, s = { value: l }, t, { kind: "class", name: l.name, metadata: i }, null, a), l = s.value, i && Object.defineProperty(l, Symbol.metadata, { enumerable: !0, configurable: !0, writable: !0, value: i });
   })(), c.styles = [
     M,
     q,