@vonage/vivid 5.5.0 → 5.7.0

package/searchable-select/definition.cjs

@@ -23,9 +23,9 @@ const localized = require('../unbundled/localized.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 const divider = require('../unbundled/divider.cjs');
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
+const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}";
 
-const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
+const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
 var __defProp$1 = Object.defineProperty;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -312,11 +312,13 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
           return false;
         }
         return true;
-      default:
+      default: {
+        /* v8 ignore next -- @preserve */
         if (!this.open) {
           this.open = true;
         }
         return true;
+      }
     }
     return true;
   }
@@ -338,6 +340,7 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
         notifier.unsubscribe(this.#slottedOptionsChangeHandler, "selected");
       }
     }
+    /* v8 ignore else -- @preserve */
     if (newValue) {
       for (const option of newValue) {
         option._displayCheckmark = true;
@@ -414,6 +417,7 @@ class SearchableSelect extends withContextualHelp.WithContextualHelp(
   #updateClonedTagIconOfOption(option) {
     if (option.selected && this.#tagIconOfOption(option)) {
       let clone = this.#clonedTagIcons.get(option);
+      /* v8 ignore else -- @preserve */
       if (!clone) {
         clone = this.#tagIconOfOption(option).cloneNode(true);
         this.#clonedTagIcons.set(option, clone);

package/searchable-select/definition.js

@@ -19,9 +19,9 @@ import { L as Localized } from '../unbundled/localized.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { D as Divider } from '../unbundled/divider.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
+const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}";
 
-const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
+const optionTagStyles = ".base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
 var __defProp$1 = Object.defineProperty;
 var __decorateClass$1 = (decorators, target, key, kind) => {
@@ -308,11 +308,13 @@ class SearchableSelect extends WithContextualHelp(
           return false;
         }
         return true;
-      default:
+      default: {
+        /* v8 ignore next -- @preserve */
         if (!this.open) {
           this.open = true;
         }
         return true;
+      }
     }
     return true;
   }
@@ -334,6 +336,7 @@ class SearchableSelect extends WithContextualHelp(
         notifier.unsubscribe(this.#slottedOptionsChangeHandler, "selected");
       }
     }
+    /* v8 ignore else -- @preserve */
     if (newValue) {
       for (const option of newValue) {
         option._displayCheckmark = true;
@@ -410,6 +413,7 @@ class SearchableSelect extends WithContextualHelp(
   #updateClonedTagIconOfOption(option) {
     if (option.selected && this.#tagIconOfOption(option)) {
       let clone = this.#clonedTagIcons.get(option);
+      /* v8 ignore else -- @preserve */
       if (!clone) {
         clone = this.#tagIconOfOption(option).cloneNode(true);
         this.#clonedTagIcons.set(option, clone);

package/searchable-select/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const x=require("../bundled/definition3.cjs"),F=require("../bundled/definition9.cjs"),y=require("../bundled/definition2.cjs"),$=require("../bundled/definition12.cjs"),A=require("../bundled/definition16.cjs"),i=require("../bundled/vivid-element.cjs"),D=require("../bundled/mixins.cjs"),E=require("../bundled/definition15.cjs"),z=require("../bundled/scrollIntoView.cjs"),V=require("../bundled/delegates-aria.cjs"),L=require("../bundled/form-associated.cjs"),q=require("../bundled/with-contextual-help.cjs"),M=require("../bundled/with-error-text.cjs"),P=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),w=require("../bundled/affix.cjs"),R=require("../bundled/localized.cjs"),B=require("../bundled/divider.cjs"),p=require("../bundled/when.cjs"),S=require("../bundled/slotted.cjs"),_=require("../bundled/ref.cjs"),m=require("../bundled/repeat.cjs"),O=require("../bundled/class-names.cjs"),W=".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}",H='.base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}';var K=Object.defineProperty,c=(s,t,e,o)=>{for(var a=void 0,n=s.length-1,v;n>=0;n--)(v=s[n])&&(a=v(t,e,a)||a);return a&&K(t,e,a),a};const f=8,j=100,k=10,U=s=>typeof s=="string";class r extends q.WithContextualHelp(D.WithFeedback(M.WithErrorText(P.WithSuccessText(N.FormElement(V.DelegatesAria(w.AffixIconWithTrailing(R.Localized(L.FormAssociated(i.VividElement))))))))){constructor(){super(...arguments),this.fixedDropdown=!1,this.open=!1,this.multiple=!1,this.externalTags=!1,this.maxLines=null,this.values=[],this.initialValues=[],this._currentSearchText=null,this._areOptionsInitialized=!1,this.#i={handleChange:(t,e)=>{t.selected&&!this.values.includes(t.value)?this.values=[...this.values,t.value]:!t.selected&&this.values.includes(t.value)&&(this.values=this.values.filter(o=>o!==t.value))}},this.#a=new Map,this._filteredOptions=[],this._filteredEnabledOptions=[],this.loading=!1,this._highlightedOptionIndex=null,this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[],this.clearable=!1,this.maxSelected=null,this._slottedDisabledOptions=[],this.enableSelectAll=!1,this.proxy=document.createElement("input"),this.setFormValue=(t,e)=>{U(t)||super.setFormValue(t,e)},this._changeDescription="",this.#d=new ResizeObserver(()=>{this.#u()})}openChanged(){this.open||this.#e(null)}valuesChanged(){if(this._areOptionsInitialized){if(!this.multiple&&this.values.length>1){this.values=[this.values[0]];return}if(this.values.some(t=>!this.#h(t))){this.values=this.values.filter(t=>this.#h(t));return}this.value=this.values.length?this.values[0]:"",this.#c(),this.#_(),this.$fastController.isConnected&&this.#u(),this.#f()}}#t(t){this.values=t,this.$emit("change",void 0,{bubbles:!1}),this.$emit("input",void 0,{bubbles:!1})}#b(t){const e=new Set(this.values),o=new Set(t);this.values=[...this.values].filter(a=>o.has(a)).concat([...t].filter(a=>!e.has(a)))}initialValuesChanged(){this.dirtyValue||(this.values=this.initialValues,this.dirtyValue=!1)}#h(t){return this._slottedOptions.some(e=>e.value===t)}valueChanged(t,e){if(super.valueChanged(t,e),!this._areOptionsInitialized)return;const o=this._slottedOptions.some(a=>a.value===e);this.values[0]!==e&&(this.values=o?[e]:[])}get selectedIndex(){return this.values.length?this._slottedOptions.findIndex(t=>t.value===this.values[0]):-1}set selectedIndex(t){this.value=this._slottedOptions[t]?.value??""}get options(){return[...this._slottedOptions]}get selectedOptions(){return this._slottedOptions.filter(t=>this.values.includes(t.value))}_currentSearchTextChanged(){this.#o(),this.$emit("search-text-change",void 0,{bubbles:!1,composed:!1})}get searchText(){return this._currentSearchText??""}get _inputValue(){return this._currentSearchText??(!this.multiple&&this.value!==""?this.#k(this.value)??"":"")}_onInputInput(t){this._currentSearchText=t.target.value}_onInputFocus(t){this.#o()}_onInputBlur(t){this.open=!1,this._currentSearchText=null,this._changeDescription=""}_onInputKeydown(t){if(t.ctrlKey||t.shiftKey)return!0;switch(t.key){case"Enter":return this.#x(),this._inputValue===""&&(this.open=!this.open),!1;case"Escape":this.open=!1;break;case"Home":if(!this.open){this.open=!0;break}return this.#w(),!1;case"End":if(!this.open){this.open=!0;break}return this.#y(),!1;case"PageUp":if(!this.open){this.open=!0;break}return this.#$(),!1;case"PageDown":if(!this.open){this.open=!0;break}return this.#O(),!1;case"ArrowUp":if(!this.open){this.open=!0;break}return this.#T(),!1;case"ArrowDown":if(!this.open){this.open=!0;break}return this.#S(),!1;case"ArrowLeft":return this.multiple&&this._inputValue===""&&this.values.length&&!this.externalTags?(this.#l(this.#r(this.values.length)),!1):!0;case"Backspace":return this.multiple&&this._inputValue===""&&this.values.length?(this._onTagRemoved(this.values[this.values.length-1]),!1):!0;default:return this.open||(this.open=!0),!0}return!0}_slottedOptionsChanged(t,e){const o=!!this.querySelectorAll(":not([slot])").length;if(!e.length&&o)return;if(this._areOptionsInitialized=!0,t){this._slottedDisabledOptions=[];for(const n of t)i.Observable.getNotifier(n).unsubscribe(this.#i,"selected")}if(e)for(const n of e)n._displayCheckmark=!0,i.Observable.getNotifier(n).subscribe(this.#i,"selected");const a=[];for(const n of this._slottedOptions)(n.selected||n.value===this.value||this.values.includes(n.value))&&a.push(n.value),n.disabled&&this._slottedDisabledOptions.push(n);this.#b(a),this.#o(),this.#c()}#i;#_(){for(const t of this._slottedOptions)t.selected=this.values.includes(t.value),this.#m(t)}#p(t){const e=t.value;let o,a=!1;const n=!this.values.includes(e);this.multiple?(n?o=[...this.values,e]:o=this.values.filter(u=>u!==e),a=!0):(n?(o=[e],a=!0):o=[],this.open=!1),this.#t(o);const v=n?this.locale.searchableSelect.optionSelectedMessage(t._getAccessibleName()):this.locale.searchableSelect.optionDeselectedMessage(t._getAccessibleName()),h=this.multiple&&this.maxSelected&&this.maxSelected>=1?this.locale.searchableSelect.maxSelectedMessage(this.values.length,this.maxSelected):"";this._changeDescription=`${v} ${h}`,a&&(this._currentSearchText=null)}#a;#s(t){return t.querySelector('[slot="tag-icon"]')}_tagIconSlotName(t){return`_tag-icon-${this.values.indexOf(t)}`}#m(t){if(t.selected&&this.#s(t)){let e=this.#a.get(t);e||(e=this.#s(t).cloneNode(!0),this.#a.set(t,e)),e.slot=this._tagIconSlotName(t.value),this.appendChild(e)}else{const e=this.#a.get(t);e&&(e.remove(),this.#a.delete(t))}}optionFilterChanged(){this.#o()}loadingChanged(t,e){this._changeDescription=this.locale.searchableSelect.loadingOptionsMessage,t&&!e&&(this._changeDescription="")}#o(){const t=[],e=this.optionFilter??((a,n)=>a.text.toLowerCase().includes(n.toLowerCase()));for(const a of this._slottedOptions??[]){a._vvdSearchText=this.searchText;const n=!this.searchText||e(a,this.searchText);a._isNotMatching=!n,!a.hidden&&n&&t.push(a)}this.#e(null),this._filteredOptions=t;const o=t.filter(a=>!a.disabled);this._selectAllOption?this._filteredEnabledOptions=[this._selectAllOption,...o]:this._filteredEnabledOptions=o}#e(t){if(typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!1,e.removeAttribute("data-highlighted")}if(typeof t=="number"&&(this._filteredEnabledOptions.length?t=Math.max(0,Math.min(this._filteredEnabledOptions.length-1,t)):t=null),this._highlightedOptionIndex=t,typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!0,e.setAttribute("data-highlighted",""),z.scrollIntoView(e,this._listbox,"nearest"),this._changeDescription=this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(),this._highlightedOptionIndex+1,this._filteredEnabledOptions.length,e.selected)}}#x(){if(this._highlightedOptionIndex===null)return;const t=this._filteredEnabledOptions[this._highlightedOptionIndex];if(t.getAttribute("data-select-all")!==null){this._toggleSelectAll();return}this.#p(t)}#w(){this.#e(0)}#y(){this.#e(this._filteredEnabledOptions.length-1)}#$(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-k)}#O(){this.#e((this._highlightedOptionIndex??-1)+k)}#T(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-1)}#S(){this.#e((this._highlightedOptionIndex??-1)+1)}_tagLabelForValue(t){return this._slottedOptions.find(o=>o.value===t).label}_tagConnotationForValue(t){return this._slottedOptions.find(o=>o.value===t).tagConnotation}_isTagDisabled(t){const e=this._slottedOptions.find(o=>o.value===t);return this.disabled||e.disabled}#k(t){return this._slottedOptions?.find(o=>o.value===t)?.label}#n(t,e,o){const a=document.createElement(this._optionTagTagName);a.label=t,a.removable=e,a.style.cssText="position: absolute; visibility: hidden;",a.hasIconPlaceholder=o,this.shadowRoot.appendChild(a);const n=a.getBoundingClientRect().width;return a.remove(),n}#u(){if(!this.multiple){this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[];return}if(this.externalTags){this._numElidedTags=this.values.length,this._tagRows=[],this._lastTagRow=[];return}const t=this._contentArea.getBoundingClientRect().width,e=[[]];let o=0,a=j,n;for(n=this.values.length-1;n>=0;n--){const h=this.maxLines&&o===this.maxLines-1,u=this.#n(this._tagLabelForValue(this.values[n]),!0,this.#s(this.selectedOptions[n])!==null),l={value:this.values[n],width:u};let d=0;if(h){const T=n;T&&(d=f+this.#n(T.toString(),!1,!1))}if(a+f+u+d>t){if(h)if(n===this.values.length-1)e[o].unshift(l),a+=f+u;else break;else e.push([]),o++,e[o].unshift(l),a=u;continue}e[o].unshift(l),a+=f+u}this._numElidedTags=n+1,e.reverse();for(let h=0;h<e.length-1;h++){let u=e[h].map(l=>l.width).reduce((l,d)=>l+d,0)+(e[h].length-1)*f;for(h===0&&this._numElidedTags&&(u+=f+this.#n(this._numElidedTags.toString(),!1,!1));e[h+1].length&&u+f+e[h+1][0].width<=t;){const l=e[h+1].shift();e[h].push(l),u+=f+l.width}}const v=e.map(h=>h.map(u=>u.value));this._tagRows=v.slice(0,-1),this._lastTagRow=v.slice(-1)[0]}_onTagRemoved(t){this.#t(this.values.filter(e=>e!==t)),this.#o()}_onTagKeydown(t){const e=parseInt(t.target.dataset.index);switch(t.key){case"Backspace":case"Delete":case"Enter":case" ":{this._onTagRemoved(this.values[e]),i.Updates.process(),this.#l(this.#C(e));break}case"ArrowLeft":this.#l(this.#r(e)??e);break;case"ArrowRight":this.#l(this.#v(e));break}return!0}#l(t){t===null?this._input.focus():this.shadowRoot.querySelector(`[data-index="${t}"]`)?.focus()}#r(t){if(!this.values.length)return null;for(let e=t-1;e>=0;e--)if(!this._isTagDisabled(this.values[e]))return e;return null}#v(t){if(!this.values.length)return null;for(let e=t+1;e<this.values.length;e++)if(!this._isTagDisabled(this.values[e]))return e;return null}#C(t){return this.#v(t-1)??this.#r(t)}_onListboxClick(t){if(this.disabled)return;const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(e?.getAttribute("data-select-all")!==null){this._toggleSelectAll();return}e&&!e.disabled&&this.#p(e)}get _shouldShowClearButton(){return this.clearable&&this.values.length>0}_onClearButtonClick(){this.#t(this.selectedOptions.filter(t=>t.disabled).map(t=>t.value))}maxSelectedChanged(){this.#c()}#c(){if(!this.multiple||!this._slottedOptions||typeof this.maxSelected!="number"||this.maxSelected<=0)return;const t=this._slottedOptions.filter(e=>!this._slottedDisabledOptions.includes(e));if(this.values.length>=this.maxSelected){const e=t.filter(o=>!this.selectedOptions.includes(o));for(const o of e)o.disabled=!0}else for(const e of t)e.disabled=!1}get _hasSelectionCount(){return this.multiple&&this.maxSelected&&this.maxSelected>=1}get _selectableOptions(){return this._slottedOptions?.filter(t=>!this._slottedDisabledOptions.includes(t)&&!t.disabled)??[]}get _selectAllLabel(){return this._isAllSelected?this.deselectAllText??this.locale.searchableSelect.deselectAllLabel:this.selectAllText??this.locale.searchableSelect.selectAllLabel}get _isAllSelected(){const t=this.values;if(!this.multiple||!this._slottedOptions)return!1;const e=this._selectableOptions;if(e.length===0)return!1;const o=new Set(t);return e.every(a=>o.has(a.value))}_toggleSelectAll(){const t=this._selectableOptions.map(a=>a.value);if(this._isAllSelected){const a=this.values.filter(n=>!t.includes(n));this.#t(a),this._changeDescription=this.locale.searchableSelect.deselectedAllMessage;return}const e=t.filter(a=>!this.values.includes(a)),o=[...this.values,...e];this.#t(o),this._changeDescription=this.locale.searchableSelect.selectedAllMessage}#g(){return this.initialValues.length?this.initialValues:this.initialValue?[this.initialValue]:[]}nameChanged(t,e){super.nameChanged(t,e),this.#f()}#f(){if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of this.values)t.append(this.name,e);this.setFormValue(t)}}formResetCallback(){super.formResetCallback(),this.#t(this.#g())}#d;_onFieldsetClick(t){this.disabled||t.defaultPrevented||(this._input.focus(),this.open=!0)}_onChevronClick(){return this.open?(this.open=!1,!1):!0}connectedCallback(){super.connectedCallback(),this.values.length||(this.values=this.#g()),this.#d.observe(this._contentArea)}disconnectedCallback(){super.disconnectedCallback(),this.#d.disconnect()}validate(){super.validate(this._input??void 0)}focus(t){this._input?.focus(t)}_onMouseDown(t){const e=t.composedPath()[0];return!t.defaultPrevented&&e!==this._input&&!this._isFromContextualHelp(t)?(this._input.focus(),!1):!0}}c([i.attr],r.prototype,"appearance");c([i.attr],r.prototype,"shape");c([i.attr({mode:"boolean",attribute:"fixed-dropdown"})],r.prototype,"fixedDropdown");c([i.attr],r.prototype,"placeholder");c([i.attr({mode:"boolean"})],r.prototype,"open");c([i.attr({mode:"boolean"})],r.prototype,"multiple");c([i.attr({attribute:"external-tags",mode:"boolean"})],r.prototype,"externalTags");c([i.attr({attribute:"max-lines",converter:i.nullableNumberConverter})],r.prototype,"maxLines");c([i.observable],r.prototype,"values");c([i.observable],r.prototype,"initialValues");c([i.observable],r.prototype,"_input");c([i.observable],r.prototype,"_currentSearchText");c([i.observable],r.prototype,"_slottedOptions");c([i.observable],r.prototype,"optionFilter");c([i.observable],r.prototype,"_filteredOptions");c([i.observable],r.prototype,"_filteredEnabledOptions");c([i.attr({mode:"boolean"})],r.prototype,"loading");c([i.observable],r.prototype,"_highlightedOptionIndex");c([i.observable],r.prototype,"_contentArea");c([i.observable],r.prototype,"_numElidedTags");c([i.observable],r.prototype,"_tagRows");c([i.observable],r.prototype,"_lastTagRow");c([i.observable],r.prototype,"_listbox");c([i.attr({mode:"boolean"})],r.prototype,"clearable");c([i.attr({attribute:"max-selected",converter:i.nullableNumberConverter})],r.prototype,"maxSelected");c([i.observable],r.prototype,"_slottedDisabledOptions");c([i.attr({attribute:"enable-select-all",mode:"boolean"})],r.prototype,"enableSelectAll");c([i.attr({attribute:"select-all-text"})],r.prototype,"selectAllText");c([i.attr({attribute:"deselect-all-text"})],r.prototype,"deselectAllText");c([i.observable],r.prototype,"_selectAllOption");c([i.observable],r.prototype,"_changeDescription");c([i.observable],r.prototype,"_anchor");var G=Object.defineProperty,b=(s,t,e,o)=>{for(var a=void 0,n=s.length-1,v;n>=0;n--)(v=s[n])&&(a=v(t,e,a)||a);return a&&G(t,e,a),a};class g extends R.Localized(i.VividElement){constructor(){super(...arguments),this.removable=!1,this.disabled=!1,this.hasIconPlaceholder=!1}_onClickRemove(){this.$emit("remove",void 0,{bubbles:!1})}}b([i.attr],g.prototype,"shape");b([i.observable],g.prototype,"connotation");b([i.attr],g.prototype,"label");b([i.attr({mode:"boolean"})],g.prototype,"removable");b([i.attr({mode:"boolean"})],g.prototype,"disabled");b([i.observable],g.prototype,"hasIconPlaceholder");const J=s=>O.classNames(["disabled",s.disabled],[`appearance-${s.appearance}`,!!s.appearance],[`shape-${s.shape}`,!!s.shape],["error",!!s.errorValidationMessage],["success",!!s.successText],["has-highlighted-option",s._highlightedOptionIndex!==null]);function Q(){return i.html`
+"use strict";const x=require("../bundled/definition3.cjs"),F=require("../bundled/definition9.cjs"),y=require("../bundled/definition2.cjs"),$=require("../bundled/definition12.cjs"),A=require("../bundled/definition16.cjs"),i=require("../bundled/vivid-element.cjs"),D=require("../bundled/mixins.cjs"),E=require("../bundled/definition15.cjs"),z=require("../bundled/scrollIntoView.cjs"),V=require("../bundled/delegates-aria.cjs"),L=require("../bundled/form-associated.cjs"),q=require("../bundled/with-contextual-help.cjs"),M=require("../bundled/with-error-text.cjs"),P=require("../bundled/with-success-text.cjs"),N=require("../bundled/form-element.cjs"),w=require("../bundled/affix.cjs"),R=require("../bundled/localized.cjs"),B=require("../bundled/divider.cjs"),p=require("../bundled/when.cjs"),S=require("../bundled/slotted.cjs"),_=require("../bundled/ref.cjs"),m=require("../bundled/repeat.cjs"),O=require("../bundled/class-names.cjs"),W=".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}",H='.base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}';var K=Object.defineProperty,c=(s,t,e,o)=>{for(var a=void 0,n=s.length-1,v;n>=0;n--)(v=s[n])&&(a=v(t,e,a)||a);return a&&K(t,e,a),a};const g=8,j=100,k=10,U=s=>typeof s=="string";class r extends q.WithContextualHelp(D.WithFeedback(M.WithErrorText(P.WithSuccessText(N.FormElement(V.DelegatesAria(w.AffixIconWithTrailing(R.Localized(L.FormAssociated(i.VividElement))))))))){constructor(){super(...arguments),this.fixedDropdown=!1,this.open=!1,this.multiple=!1,this.externalTags=!1,this.maxLines=null,this.values=[],this.initialValues=[],this._currentSearchText=null,this._areOptionsInitialized=!1,this.#i={handleChange:(t,e)=>{t.selected&&!this.values.includes(t.value)?this.values=[...this.values,t.value]:!t.selected&&this.values.includes(t.value)&&(this.values=this.values.filter(o=>o!==t.value))}},this.#a=new Map,this._filteredOptions=[],this._filteredEnabledOptions=[],this.loading=!1,this._highlightedOptionIndex=null,this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[],this.clearable=!1,this.maxSelected=null,this._slottedDisabledOptions=[],this.enableSelectAll=!1,this.proxy=document.createElement("input"),this.setFormValue=(t,e)=>{U(t)||super.setFormValue(t,e)},this._changeDescription="",this.#d=new ResizeObserver(()=>{this.#u()})}openChanged(){this.open||this.#e(null)}valuesChanged(){if(this._areOptionsInitialized){if(!this.multiple&&this.values.length>1){this.values=[this.values[0]];return}if(this.values.some(t=>!this.#h(t))){this.values=this.values.filter(t=>this.#h(t));return}this.value=this.values.length?this.values[0]:"",this.#c(),this.#_(),this.$fastController.isConnected&&this.#u(),this.#g()}}#t(t){this.values=t,this.$emit("change",void 0,{bubbles:!1}),this.$emit("input",void 0,{bubbles:!1})}#b(t){const e=new Set(this.values),o=new Set(t);this.values=[...this.values].filter(a=>o.has(a)).concat([...t].filter(a=>!e.has(a)))}initialValuesChanged(){this.dirtyValue||(this.values=this.initialValues,this.dirtyValue=!1)}#h(t){return this._slottedOptions.some(e=>e.value===t)}valueChanged(t,e){if(super.valueChanged(t,e),!this._areOptionsInitialized)return;const o=this._slottedOptions.some(a=>a.value===e);this.values[0]!==e&&(this.values=o?[e]:[])}get selectedIndex(){return this.values.length?this._slottedOptions.findIndex(t=>t.value===this.values[0]):-1}set selectedIndex(t){this.value=this._slottedOptions[t]?.value??""}get options(){return[...this._slottedOptions]}get selectedOptions(){return this._slottedOptions.filter(t=>this.values.includes(t.value))}_currentSearchTextChanged(){this.#o(),this.$emit("search-text-change",void 0,{bubbles:!1,composed:!1})}get searchText(){return this._currentSearchText??""}get _inputValue(){return this._currentSearchText??(!this.multiple&&this.value!==""?this.#k(this.value)??"":"")}_onInputInput(t){this._currentSearchText=t.target.value}_onInputFocus(t){this.#o()}_onInputBlur(t){this.open=!1,this._currentSearchText=null,this._changeDescription=""}_onInputKeydown(t){if(t.ctrlKey||t.shiftKey)return!0;switch(t.key){case"Enter":return this.#x(),this._inputValue===""&&(this.open=!this.open),!1;case"Escape":this.open=!1;break;case"Home":if(!this.open){this.open=!0;break}return this.#w(),!1;case"End":if(!this.open){this.open=!0;break}return this.#y(),!1;case"PageUp":if(!this.open){this.open=!0;break}return this.#$(),!1;case"PageDown":if(!this.open){this.open=!0;break}return this.#O(),!1;case"ArrowUp":if(!this.open){this.open=!0;break}return this.#T(),!1;case"ArrowDown":if(!this.open){this.open=!0;break}return this.#S(),!1;case"ArrowLeft":return this.multiple&&this._inputValue===""&&this.values.length&&!this.externalTags?(this.#l(this.#r(this.values.length)),!1):!0;case"Backspace":return this.multiple&&this._inputValue===""&&this.values.length?(this._onTagRemoved(this.values[this.values.length-1]),!1):!0;default:{/* v8 ignore next -- @preserve */return this.open||(this.open=!0),!0}}return!0}_slottedOptionsChanged(t,e){const o=!!this.querySelectorAll(":not([slot])").length;if(!e.length&&o)return;if(this._areOptionsInitialized=!0,t){this._slottedDisabledOptions=[];for(const n of t)i.Observable.getNotifier(n).unsubscribe(this.#i,"selected")}/* v8 ignore else -- @preserve */if(e)for(const n of e)n._displayCheckmark=!0,i.Observable.getNotifier(n).subscribe(this.#i,"selected");const a=[];for(const n of this._slottedOptions)(n.selected||n.value===this.value||this.values.includes(n.value))&&a.push(n.value),n.disabled&&this._slottedDisabledOptions.push(n);this.#b(a),this.#o(),this.#c()}#i;#_(){for(const t of this._slottedOptions)t.selected=this.values.includes(t.value),this.#m(t)}#p(t){const e=t.value;let o,a=!1;const n=!this.values.includes(e);this.multiple?(n?o=[...this.values,e]:o=this.values.filter(u=>u!==e),a=!0):(n?(o=[e],a=!0):o=[],this.open=!1),this.#t(o);const v=n?this.locale.searchableSelect.optionSelectedMessage(t._getAccessibleName()):this.locale.searchableSelect.optionDeselectedMessage(t._getAccessibleName()),h=this.multiple&&this.maxSelected&&this.maxSelected>=1?this.locale.searchableSelect.maxSelectedMessage(this.values.length,this.maxSelected):"";this._changeDescription=`${v} ${h}`,a&&(this._currentSearchText=null)}#a;#s(t){return t.querySelector('[slot="tag-icon"]')}_tagIconSlotName(t){return`_tag-icon-${this.values.indexOf(t)}`}#m(t){if(t.selected&&this.#s(t)){let e=this.#a.get(t);/* v8 ignore else -- @preserve */e||(e=this.#s(t).cloneNode(!0),this.#a.set(t,e)),e.slot=this._tagIconSlotName(t.value),this.appendChild(e)}else{const e=this.#a.get(t);e&&(e.remove(),this.#a.delete(t))}}optionFilterChanged(){this.#o()}loadingChanged(t,e){this._changeDescription=this.locale.searchableSelect.loadingOptionsMessage,t&&!e&&(this._changeDescription="")}#o(){const t=[],e=this.optionFilter??((a,n)=>a.text.toLowerCase().includes(n.toLowerCase()));for(const a of this._slottedOptions??[]){a._vvdSearchText=this.searchText;const n=!this.searchText||e(a,this.searchText);a._isNotMatching=!n,!a.hidden&&n&&t.push(a)}this.#e(null),this._filteredOptions=t;const o=t.filter(a=>!a.disabled);this._selectAllOption?this._filteredEnabledOptions=[this._selectAllOption,...o]:this._filteredEnabledOptions=o}#e(t){if(typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!1,e.removeAttribute("data-highlighted")}if(typeof t=="number"&&(this._filteredEnabledOptions.length?t=Math.max(0,Math.min(this._filteredEnabledOptions.length-1,t)):t=null),this._highlightedOptionIndex=t,typeof this._highlightedOptionIndex=="number"){const e=this._filteredEnabledOptions[this._highlightedOptionIndex];e._highlighted=!0,e.setAttribute("data-highlighted",""),z.scrollIntoView(e,this._listbox,"nearest"),this._changeDescription=this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(),this._highlightedOptionIndex+1,this._filteredEnabledOptions.length,e.selected)}}#x(){if(this._highlightedOptionIndex===null)return;const t=this._filteredEnabledOptions[this._highlightedOptionIndex];if(t.getAttribute("data-select-all")!==null){this._toggleSelectAll();return}this.#p(t)}#w(){this.#e(0)}#y(){this.#e(this._filteredEnabledOptions.length-1)}#$(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-k)}#O(){this.#e((this._highlightedOptionIndex??-1)+k)}#T(){this.#e((this._highlightedOptionIndex??this._filteredEnabledOptions.length)-1)}#S(){this.#e((this._highlightedOptionIndex??-1)+1)}_tagLabelForValue(t){return this._slottedOptions.find(o=>o.value===t).label}_tagConnotationForValue(t){return this._slottedOptions.find(o=>o.value===t).tagConnotation}_isTagDisabled(t){const e=this._slottedOptions.find(o=>o.value===t);return this.disabled||e.disabled}#k(t){return this._slottedOptions?.find(o=>o.value===t)?.label}#n(t,e,o){const a=document.createElement(this._optionTagTagName);a.label=t,a.removable=e,a.style.cssText="position: absolute; visibility: hidden;",a.hasIconPlaceholder=o,this.shadowRoot.appendChild(a);const n=a.getBoundingClientRect().width;return a.remove(),n}#u(){if(!this.multiple){this._numElidedTags=0,this._tagRows=[],this._lastTagRow=[];return}if(this.externalTags){this._numElidedTags=this.values.length,this._tagRows=[],this._lastTagRow=[];return}const t=this._contentArea.getBoundingClientRect().width,e=[[]];let o=0,a=j,n;for(n=this.values.length-1;n>=0;n--){const h=this.maxLines&&o===this.maxLines-1,u=this.#n(this._tagLabelForValue(this.values[n]),!0,this.#s(this.selectedOptions[n])!==null),l={value:this.values[n],width:u};let d=0;if(h){const T=n;T&&(d=g+this.#n(T.toString(),!1,!1))}if(a+g+u+d>t){if(h)if(n===this.values.length-1)e[o].unshift(l),a+=g+u;else break;else e.push([]),o++,e[o].unshift(l),a=u;continue}e[o].unshift(l),a+=g+u}this._numElidedTags=n+1,e.reverse();for(let h=0;h<e.length-1;h++){let u=e[h].map(l=>l.width).reduce((l,d)=>l+d,0)+(e[h].length-1)*g;for(h===0&&this._numElidedTags&&(u+=g+this.#n(this._numElidedTags.toString(),!1,!1));e[h+1].length&&u+g+e[h+1][0].width<=t;){const l=e[h+1].shift();e[h].push(l),u+=g+l.width}}const v=e.map(h=>h.map(u=>u.value));this._tagRows=v.slice(0,-1),this._lastTagRow=v.slice(-1)[0]}_onTagRemoved(t){this.#t(this.values.filter(e=>e!==t)),this.#o()}_onTagKeydown(t){const e=parseInt(t.target.dataset.index);switch(t.key){case"Backspace":case"Delete":case"Enter":case" ":{this._onTagRemoved(this.values[e]),i.Updates.process(),this.#l(this.#C(e));break}case"ArrowLeft":this.#l(this.#r(e)??e);break;case"ArrowRight":this.#l(this.#v(e));break}return!0}#l(t){t===null?this._input.focus():this.shadowRoot.querySelector(`[data-index="${t}"]`)?.focus()}#r(t){if(!this.values.length)return null;for(let e=t-1;e>=0;e--)if(!this._isTagDisabled(this.values[e]))return e;return null}#v(t){if(!this.values.length)return null;for(let e=t+1;e<this.values.length;e++)if(!this._isTagDisabled(this.values[e]))return e;return null}#C(t){return this.#v(t-1)??this.#r(t)}_onListboxClick(t){if(this.disabled)return;const e=t.target.closest("option,[role=option],[data-vvd-component=option]");if(e?.getAttribute("data-select-all")!==null){this._toggleSelectAll();return}e&&!e.disabled&&this.#p(e)}get _shouldShowClearButton(){return this.clearable&&this.values.length>0}_onClearButtonClick(){this.#t(this.selectedOptions.filter(t=>t.disabled).map(t=>t.value))}maxSelectedChanged(){this.#c()}#c(){if(!this.multiple||!this._slottedOptions||typeof this.maxSelected!="number"||this.maxSelected<=0)return;const t=this._slottedOptions.filter(e=>!this._slottedDisabledOptions.includes(e));if(this.values.length>=this.maxSelected){const e=t.filter(o=>!this.selectedOptions.includes(o));for(const o of e)o.disabled=!0}else for(const e of t)e.disabled=!1}get _hasSelectionCount(){return this.multiple&&this.maxSelected&&this.maxSelected>=1}get _selectableOptions(){return this._slottedOptions?.filter(t=>!this._slottedDisabledOptions.includes(t)&&!t.disabled)??[]}get _selectAllLabel(){return this._isAllSelected?this.deselectAllText??this.locale.searchableSelect.deselectAllLabel:this.selectAllText??this.locale.searchableSelect.selectAllLabel}get _isAllSelected(){const t=this.values;if(!this.multiple||!this._slottedOptions)return!1;const e=this._selectableOptions;if(e.length===0)return!1;const o=new Set(t);return e.every(a=>o.has(a.value))}_toggleSelectAll(){const t=this._selectableOptions.map(a=>a.value);if(this._isAllSelected){const a=this.values.filter(n=>!t.includes(n));this.#t(a),this._changeDescription=this.locale.searchableSelect.deselectedAllMessage;return}const e=t.filter(a=>!this.values.includes(a)),o=[...this.values,...e];this.#t(o),this._changeDescription=this.locale.searchableSelect.selectedAllMessage}#f(){return this.initialValues.length?this.initialValues:this.initialValue?[this.initialValue]:[]}nameChanged(t,e){super.nameChanged(t,e),this.#g()}#g(){if(!this.name)this.setFormValue(null);else{const t=new FormData;for(const e of this.values)t.append(this.name,e);this.setFormValue(t)}}formResetCallback(){super.formResetCallback(),this.#t(this.#f())}#d;_onFieldsetClick(t){this.disabled||t.defaultPrevented||(this._input.focus(),this.open=!0)}_onChevronClick(){return this.open?(this.open=!1,!1):!0}connectedCallback(){super.connectedCallback(),this.values.length||(this.values=this.#f()),this.#d.observe(this._contentArea)}disconnectedCallback(){super.disconnectedCallback(),this.#d.disconnect()}validate(){super.validate(this._input??void 0)}focus(t){this._input?.focus(t)}_onMouseDown(t){const e=t.composedPath()[0];return!t.defaultPrevented&&e!==this._input&&!this._isFromContextualHelp(t)?(this._input.focus(),!1):!0}}c([i.attr],r.prototype,"appearance");c([i.attr],r.prototype,"shape");c([i.attr({mode:"boolean",attribute:"fixed-dropdown"})],r.prototype,"fixedDropdown");c([i.attr],r.prototype,"placeholder");c([i.attr({mode:"boolean"})],r.prototype,"open");c([i.attr({mode:"boolean"})],r.prototype,"multiple");c([i.attr({attribute:"external-tags",mode:"boolean"})],r.prototype,"externalTags");c([i.attr({attribute:"max-lines",converter:i.nullableNumberConverter})],r.prototype,"maxLines");c([i.observable],r.prototype,"values");c([i.observable],r.prototype,"initialValues");c([i.observable],r.prototype,"_input");c([i.observable],r.prototype,"_currentSearchText");c([i.observable],r.prototype,"_slottedOptions");c([i.observable],r.prototype,"optionFilter");c([i.observable],r.prototype,"_filteredOptions");c([i.observable],r.prototype,"_filteredEnabledOptions");c([i.attr({mode:"boolean"})],r.prototype,"loading");c([i.observable],r.prototype,"_highlightedOptionIndex");c([i.observable],r.prototype,"_contentArea");c([i.observable],r.prototype,"_numElidedTags");c([i.observable],r.prototype,"_tagRows");c([i.observable],r.prototype,"_lastTagRow");c([i.observable],r.prototype,"_listbox");c([i.attr({mode:"boolean"})],r.prototype,"clearable");c([i.attr({attribute:"max-selected",converter:i.nullableNumberConverter})],r.prototype,"maxSelected");c([i.observable],r.prototype,"_slottedDisabledOptions");c([i.attr({attribute:"enable-select-all",mode:"boolean"})],r.prototype,"enableSelectAll");c([i.attr({attribute:"select-all-text"})],r.prototype,"selectAllText");c([i.attr({attribute:"deselect-all-text"})],r.prototype,"deselectAllText");c([i.observable],r.prototype,"_selectAllOption");c([i.observable],r.prototype,"_changeDescription");c([i.observable],r.prototype,"_anchor");var G=Object.defineProperty,b=(s,t,e,o)=>{for(var a=void 0,n=s.length-1,v;n>=0;n--)(v=s[n])&&(a=v(t,e,a)||a);return a&&G(t,e,a),a};class f extends R.Localized(i.VividElement){constructor(){super(...arguments),this.removable=!1,this.disabled=!1,this.hasIconPlaceholder=!1}_onClickRemove(){this.$emit("remove",void 0,{bubbles:!1})}}b([i.attr],f.prototype,"shape");b([i.observable],f.prototype,"connotation");b([i.attr],f.prototype,"label");b([i.attr({mode:"boolean"})],f.prototype,"removable");b([i.attr({mode:"boolean"})],f.prototype,"disabled");b([i.observable],f.prototype,"hasIconPlaceholder");const J=s=>O.classNames(["disabled",s.disabled],[`appearance-${s.appearance}`,!!s.appearance],[`shape-${s.shape}`,!!s.shape],["error",!!s.errorValidationMessage],["success",!!s.successText],["has-highlighted-option",s._highlightedOptionIndex!==null]);function Q(){return i.html`
 		<label for="control" class="label" id="label"> ${s=>s.label} </label>
 	`}function X(){return i.html`
 		<span
@@ -7,7 +7,7 @@
 			aria-label="${s=>s.locale.searchableSelect.maxSelectedMessage(s.values.length,s.maxSelected)}"
 			>(${s=>`${s.values.length}/${s.maxSelected}`})</span
 		>
-	`}const C=(s,t)=>{const e=s.tagFor(g);return i.html`
+	`}const C=(s,t)=>{const e=s.tagFor(f);return i.html`
 		<div class="tag-wrapper">
 			<${e}
 				class="tag"
@@ -24,7 +24,7 @@
 				<slot slot="icon" name="${(o,a)=>t(a)._tagIconSlotName(o)}"></slot>
 			</${e}>
 		</div>
-	`},I=(s,t)=>{const e=s.tagFor(g);return i.html`
+	`},I=(s,t)=>{const e=s.tagFor(f);return i.html`
 		<${e}
 			class="tag"
 			tabindex="-1"
@@ -151,7 +151,7 @@
 				</${t}>
 			</div>
 		</div>
-	`}const ae=s=>{const t=s.tagFor(g,!0);return i.html`
+	`}const ae=s=>{const t=s.tagFor(f,!0);return i.html`
 		<template
 			:_optionTagTagName="${()=>t}"
 			@mousedown="${(e,o)=>e._onMouseDown(o.event)}"
@@ -176,4 +176,4 @@
 		</slot>
 		${p.when(e=>e.label,e=>i.html`<span class="label">${e.label}</span>`)}
 		${p.when(e=>e.removable,le(t))}
-	</span>`},se=i.defineVividComponent("option-tag",g,ie,[y.iconDefinition],{styles:[H],shadowOptions:{delegatesFocus:!0}}),ne=i.defineVividComponent("searchable-select",r,ae,[x.buttonDefinition,F.popupDefinition,y.iconDefinition,se,A.progressRingDefinition,D.feedbackMessageDefinition,$.listboxOptionDefinition,E.dividerDefinition],{styles:W}),re=i.createRegisterFunction(ne);re();
+	</span>`},se=i.defineVividComponent("option-tag",f,ie,[y.iconDefinition],{styles:[H],shadowOptions:{delegatesFocus:!0}}),ne=i.defineVividComponent("searchable-select",r,ae,[x.buttonDefinition,F.popupDefinition,y.iconDefinition,se,A.progressRingDefinition,D.feedbackMessageDefinition,$.listboxOptionDefinition,E.dividerDefinition],{styles:W}),re=i.createRegisterFunction(ne);re();

package/searchable-select/index.js

@@ -3,8 +3,8 @@ import { P as L, p as P } from "../bundled/definition9.js";
 import { I as M, i as I } from "../bundled/definition2.js";
 import { i as B, L as W, l as N } from "../bundled/definition12.js";
 import { P as H, p as K } from "../bundled/definition16.js";
-import { V as F, O, U as j, a as u, n as A, o as p, h as d, c as q, d as D } from "../bundled/vivid-element.js";
-import { W as U, f as G } from "../bundled/mixins.js";
+import { V as F, O, U as q, a as u, n as A, o as p, h as d, c as U, d as D } from "../bundled/vivid-element.js";
+import { W as j, f as G } from "../bundled/mixins.js";
 import { d as J } from "../bundled/definition15.js";
 import { s as Q } from "../bundled/scrollIntoView.js";
 import { D as X, d as Y } from "../bundled/delegates-aria.js";
@@ -21,7 +21,7 @@ import { s as T } from "../bundled/slotted.js";
 import { r as x } from "../bundled/ref.js";
 import { r as y } from "../bundled/repeat.js";
 import { c as w } from "../bundled/class-names.js";
-const re = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}", ce = '.base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}';
+const re = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.fieldset:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:min(100px,40%);outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 100%)}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.divider{margin-block:10px;margin-inline:12px}", ce = '.base.connotation-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: var(--_connotation-color-soft);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base:not(.disabled){--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% )}}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: var(--vvd-color-neutral-200);--outline-color: transparent}@supports (background-color: color-mix(in srgb,black 50%,white)){.base.disabled{--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% )}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}';
 var de = Object.defineProperty, r = (s, t, e, o) => {
   for (var a = void 0, i = s.length - 1, g; i >= 0; i--)
     (g = s[i]) && (a = g(t, e, a) || a);
@@ -29,7 +29,7 @@ var de = Object.defineProperty, r = (s, t, e, o) => {
 };
 const _ = 8, pe = 100, S = 10, he = (s) => typeof s == "string";
 class n extends ee(
-  U(
+  j(
     te(
       ae(
         oe(
@@ -212,8 +212,10 @@ class n extends ee(
         return this.multiple && this._inputValue === "" && this.values.length && !this.externalTags ? (this.#l(this.#r(this.values.length)), !1) : !0;
       case "Backspace":
         return this.multiple && this._inputValue === "" && this.values.length ? (this._onTagRemoved(this.values[this.values.length - 1]), !1) : !0;
-      default:
+      default: {
+        /* v8 ignore next -- @preserve */
         return this.open || (this.open = !0), !0;
+      }
     }
     return !0;
   }
@@ -229,6 +231,7 @@ class n extends ee(
       for (const i of t)
         O.getNotifier(i).unsubscribe(this.#s, "selected");
     }
+    /* v8 ignore else -- @preserve */
     if (e)
       for (const i of e)
         i._displayCheckmark = !0, O.getNotifier(i).subscribe(this.#s, "selected");
@@ -270,6 +273,7 @@ class n extends ee(
   #m(t) {
     if (t.selected && this.#i(t)) {
       let e = this.#a.get(t);
+      /* v8 ignore else -- @preserve */
       e || (e = this.#i(t).cloneNode(!0), this.#a.set(t, e)), e.slot = this._tagIconSlotName(t.value), this.appendChild(e);
     } else {
       const e = this.#a.get(t);
@@ -461,7 +465,7 @@ class n extends ee(
       case "Delete":
       case "Enter":
       case " ": {
-        this._onTagRemoved(this.values[e]), j.process(), this.#l(this.#C(e));
+        this._onTagRemoved(this.values[e]), q.process(), this.#l(this.#C(e));
         break;
       }
       case "ArrowLeft":
@@ -1114,7 +1118,7 @@ const Oe = (s) => {
   {
     styles: re
   }
-), ke = q(
+), ke = U(
   Se
 );
 ke();

package/select/definition.cjs

@@ -20,8 +20,6 @@ const affix = require('../unbundled/affix.cjs');
 const button_definition = require('../unbundled/definition.cjs');
 const index = require('../unbundled/index.cjs');
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}:host(:focus-within) .control:not(.has-activedescendant){--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(:not([multiple])) ::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.label-wrapper{display:flex;flex-direction:row;align-items:center;justify-content:space-between;gap:var(--label-wrapper-gap, 8px)}.label-wrapper[hidden]{display:none}.label-wrapper .label{flex:1 1 auto}.label-wrapper slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){margin-inline-start:auto}";
-
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -110,6 +108,7 @@ class Select extends mixins.WithLightDOMFeedback(
    */
   checkActiveIndex() {
     const activeItem = this.activeOption;
+    /* v8 ignore else -- @preserve */
     if (activeItem) {
       activeItem.checked = true;
     }
@@ -126,6 +125,7 @@ class Select extends mixins.WithLightDOMFeedback(
    */
   checkFirstOption(preserveChecked) {
     if (preserveChecked) {
+      /* v8 ignore else -- @preserve */
       if (this.rangeStartIndex === -1) {
         this.rangeStartIndex = this.activeIndex + 1;
       }
@@ -150,6 +150,7 @@ class Select extends mixins.WithLightDOMFeedback(
    */
   checkLastOption(preserveChecked) {
     if (preserveChecked) {
+      /* v8 ignore else -- @preserve */
       if (this.rangeStartIndex === -1) {
         this.rangeStartIndex = this.activeIndex;
       }
@@ -174,6 +175,7 @@ class Select extends mixins.WithLightDOMFeedback(
    */
   checkNextOption(preserveChecked) {
     if (preserveChecked) {
+      /* v8 ignore else -- @preserve */
       if (this.rangeStartIndex === -1) {
         this.rangeStartIndex = this.activeIndex;
       }
@@ -198,9 +200,11 @@ class Select extends mixins.WithLightDOMFeedback(
    */
   checkPreviousOption(preserveChecked) {
     if (preserveChecked) {
+      /* v8 ignore else -- @preserve */
       if (this.rangeStartIndex === -1) {
         this.rangeStartIndex = this.activeIndex;
       }
+      /* v8 ignore else -- @preserve */
       if (this.checkedOptions.length === 1) {
         this.rangeStartIndex += 1;
       }
@@ -231,6 +235,7 @@ class Select extends mixins.WithLightDOMFeedback(
     if (!this.multiple) {
       return super.focusinHandler(e);
     }
+    /* v8 ignore else -- @preserve */
     if (!this.shouldSkipFocus && e.target === e.currentTarget) {
       this.uncheckAllOptions();
       if (this.activeIndex === -1) {
@@ -252,6 +257,7 @@ class Select extends mixins.WithLightDOMFeedback(
       super.setSelectedOptions();
       return;
     }
+    /* v8 ignore else -- @preserve */
     if (this.$fastController.isConnected && this.options) {
       this.selectedOptions = this.options.filter((o) => o.selected);
       this.focusAndScrollOptionIntoView();
@@ -284,6 +290,7 @@ class Select extends mixins.WithLightDOMFeedback(
       super.typeaheadBufferChanged(prev, next);
       return;
     }
+    /* v8 ignore if -- @preserve */
     if (this.$fastController.isConnected) {
       const typeaheadMatches = this.getTypeaheadMatches();
       const activeIndex = this.options.indexOf(typeaheadMatches[0]);
@@ -307,6 +314,7 @@ class Select extends mixins.WithLightDOMFeedback(
    */
   uncheckAllOptions(preserveChecked = false) {
     this.options.forEach((o) => o.checked = false);
+    /* v8 ignore else -- @preserve */
     if (!preserveChecked) {
       this.rangeStartIndex = -1;
     }
@@ -429,6 +437,7 @@ class Select extends mixins.WithLightDOMFeedback(
       this.focus();
       return;
     }
+    /* v8 ignore else -- @preserve */
     if (!this.options.includes(focusTarget)) {
       this.open = false;
       if (this.indexWhenOpened !== this.selectedIndex) {
@@ -471,6 +480,7 @@ class Select extends mixins.WithLightDOMFeedback(
       o.checked = next ? false : void 0;
     });
     this.setSelectedOptions();
+    /* v8 ignore if -- @preserve */
     if (this.proxy) {
       this.proxy.multiple = next;
     }
@@ -498,6 +508,7 @@ class Select extends mixins.WithLightDOMFeedback(
    * @internal
    */
   setProxyOptions() {
+    /* v8 ignore else -- @preserve */
     if (this.proxy instanceof HTMLSelectElement && this.options) {
       this.proxy.length = 0;
       this.options.forEach((option) => {
@@ -547,12 +558,14 @@ class Select extends mixins.WithLightDOMFeedback(
       }
       case fastWebUtilities.keySpace: {
         e.preventDefault();
+        /* v8 ignore else -- @preserve */
         if (this.typeaheadExpired) {
           this.toggleSelectedForAllCheckedOptions();
           return;
         }
       }
       default: {
+        /* v8 ignore else -- @preserve */
         if (key.length === 1) {
           this.handleTypeAhead(`${key}`);
         }
@@ -726,6 +739,8 @@ __decorateClass([
   fastElement.observable
 ], Select.prototype, "metaSlottedContent", 2);
 
+const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.control.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.control.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control{border-radius:var(--_select-control-border-radius);block-size:var(--_select-block-size);padding-inline:var(--_select-padding-inline)}.control{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_select-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;transition:box-shadow .2s,background-color .2s}.control.size-condensed{--_select-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_select-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_select-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.control.size-condensed:not(.shape-pill){--_select-control-border-radius: 4px}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));border-radius:8px}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 var(--_select-icon-size);font-size:var(--_select-icon-size);line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}:host(:focus-within) .control:not(.has-activedescendant){--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host(:not([multiple])) ::slotted([data-vvd-component=option][current-selected]){border-radius:8px;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}";
+
 const getStateClasses = ({
   shape,
   disabled,