@vonage/vivid 5.6.0 → 5.8.0

package/bundled/definition13.cjs

@@ -7,4 +7,4 @@
 			</button>
 			<slot></slot>
 		</${r}>
-	`},b=".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_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(--_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(--_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: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;
+	`},b=".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_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(--_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(--_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: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;

package/bundled/definition13.js

@@ -27,7 +27,7 @@ const g = (o) => m("control"), h = (o) => {
 			<slot></slot>
 		</${r}>
 	`;
-}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_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(--_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(--_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: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
+}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_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(--_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(--_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: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
   "contextual-help",
   c,
   h,

package/bundled/definition18.cjs

@@ -1,4 +1,4 @@
-"use strict";const r=require("./vivid-element.cjs"),v=require("./form-associated.cjs"),p=require("./with-error-text.cjs"),h=require("./form-element.cjs"),u=require("./key-codes.cjs"),b=require("./when.cjs"),m=require("./class-names.cjs"),f=':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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)}.base.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)}.base.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)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var y=Object.defineProperty,l=(a,e,o,i)=>{for(var t=void 0,c=a.length-1,s;c>=0;c--)(s=a[c])&&(t=s(e,o,t)||t);return t&&y(e,o,t),t};class n extends p.WithErrorText(h.FormElement(v.CheckableFormAssociated(r.VividElement))){constructor(){super(),this.initialValue="on",this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case u.keySpace:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement("input"),this.#o=()=>{const e=this.#e,o=this.#a;e&&e.length>1&&e.some(t=>t.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage="",o&&(o.errorValidationMessage=""))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){const e=this.#e,o=this.#a;e&&e.length>1&&e.forEach(i=>{i.elementInternals.setValidity({valueMissing:!1}),i.errorValidationMessage="",o&&(o.errorValidationMessage="")})}},this.proxy.setAttribute("type","radio"),this.proxy.setAttribute("name",this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}readOnlyChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){if(this.$fastController.isConnected&&!this.dirtyChecked){/* v8 ignore else -- @preserve */this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}}nameChanged(e,o){super.nameChanged(e,o),o!==null?this.proxy.setAttribute("name",this.name):this.proxy.removeAttribute("name"),r.Updates.enqueue(this.validate)}connectedCallback(){if(super.connectedCallback(),r.Updates.enqueue(this.validate),this.parentElement.getAttribute("data-vvd-component")!=="radio-group"&&this.getAttribute("tabindex")===null){/* v8 ignore else -- @preserve */this.disabled||this.setAttribute("tabindex","0")}if(this.defaultChecked){/* v8 ignore else -- @preserve */this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}}isInsideRadioGroup(){return this.closest('[data-vvd-component="radio-group"]')!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){const e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#a(){const e=this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);return e||null}#o;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||"",this.validity.valueMissing?this.#o():this.#r())}}l([r.attr],n.prototype,"connotation");l([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");l([r.observable],n.prototype,"defaultSlottedNodes");const _=({connotation:a,checked:e,readOnly:o,disabled:i})=>m.classNames("base",[`connotation-${a}`,!!a],["checked",!!e],["readonly",!!o],["disabled",!!i]),k=r.html`<template
+"use strict";const r=require("./vivid-element.cjs"),v=require("./form-associated.cjs"),p=require("./with-error-text.cjs"),h=require("./form-element.cjs"),u=require("./key-codes.cjs"),b=require("./when.cjs"),m=require("./class-names.cjs"),f=':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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)}.base.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)}.base.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)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';var y=Object.defineProperty,l=(a,e,o,i)=>{for(var t=void 0,c=a.length-1,s;c>=0;c--)(s=a[c])&&(t=s(e,o,t)||t);return t&&y(e,o,t),t};class n extends p.WithErrorText(h.FormElement(v.CheckableFormAssociated(r.VividElement))){constructor(){super(),this.initialValue="on",this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case u.keySpace:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement("input"),this.#o=()=>{const e=this.#e,o=this.#a;e&&e.length>1&&e.some(t=>t.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage="",o&&(o.errorValidationMessage=""))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){const e=this.#e,o=this.#a;e&&e.length>1&&e.forEach(i=>{i.elementInternals.setValidity({valueMissing:!1}),i.errorValidationMessage="",o&&(o.errorValidationMessage="")})}},this.proxy.setAttribute("type","radio"),this.proxy.setAttribute("name",this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}readOnlyChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){if(this.$fastController.isConnected&&!this.dirtyChecked){/* v8 ignore else -- @preserve */this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}}nameChanged(e,o){super.nameChanged(e,o),o!==null?this.proxy.setAttribute("name",this.name):this.proxy.removeAttribute("name"),r.Updates.enqueue(this.validate)}connectedCallback(){if(super.connectedCallback(),r.Updates.enqueue(this.validate),this.parentElement.getAttribute("data-vvd-component")!=="radio-group"&&this.getAttribute("tabindex")===null){/* v8 ignore else -- @preserve */this.disabled||this.setAttribute("tabindex","0")}if(this.defaultChecked){/* v8 ignore else -- @preserve */this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1)}}isInsideRadioGroup(){return this.closest('[data-vvd-component="radio-group"]')!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){const e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#a(){const e=this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);return e||null}#o;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||"",this.validity.valueMissing?this.#o():this.#r())}}l([r.attr],n.prototype,"connotation");l([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");l([r.observable],n.prototype,"defaultSlottedNodes");const _=({connotation:a,checked:e,readOnly:o,disabled:i})=>m.classNames("base",[`connotation-${a}`,!!a],["checked",!!e],["readonly",!!o],["disabled",!!i]),k=r.html`<template
 	aria-checked="${a=>a?.checked}"
 	aria-disabled="${a=>a?.disabled}"
 	aria-required="${a=>a?.required}"

package/bundled/definition18.js

@@ -3,9 +3,9 @@ import { C as b } from "./form-associated.js";
 import { W as f } from "./with-error-text.js";
 import { F as y } from "./form-element.js";
 import { l as _ } from "./key-codes.js";
-import { w as x } from "./when.js";
-import { c as k } from "./class-names.js";
-const g = ':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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)}.base.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)}.base.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)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';
+import { w as k } from "./when.js";
+import { c as x } from "./class-names.js";
+const g = ':host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary: var(--vvd-radio-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-radio-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-intermediate: var(--vvd-radio-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-firm: var(--vvd-radio-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-radio-cta-fierce, var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-radio-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-radio-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-radio-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-radio-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-radio-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-radio-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}@media (hover: hover){.base: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)}}.base.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)}.base:checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}@media (hover: hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: var(--_connotation-color-primary-increment)}.base: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)}.base.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)}.base.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)}.base{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color: transparent;position:relative}:host(:focus-visible) .control:before{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;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}';
 var C = Object.defineProperty, c = (a, e, o, t) => {
   for (var r = void 0, n = a.length - 1, l; n >= 0; n--)
     (l = a[n]) && (r = l(e, o, r) || r);
@@ -111,7 +111,7 @@ c([
 c([
   h
 ], i.prototype, "defaultSlottedNodes");
-const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => k(
+const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => x(
   "base",
   [`connotation-${a}`, !!a],
   ["checked", !!e],
@@ -127,7 +127,7 @@ const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => k(
 >
 	<div class="${w}">
 		<div class="control"></div>
-		${x(
+		${k(
   (a) => a?.label,
   d`<label class="label">${(a) => a?.label}</label>`
 )}

package/bundled/definition19.cjs

@@ -1,4 +1,4 @@
-"use strict";const g=require("./definition9.cjs"),$=require("./definition2.cjs"),m=require("./definition12.cjs"),r=require("./vivid-element.cjs"),y=require("./mixins.cjs"),k=require("./listbox.cjs"),_=require("./host-semantics.cjs"),C=require("./form-associated.cjs"),h=require("./numbers.cjs"),A=require("./with-contextual-help.cjs"),D=require("./with-error-text.cjs"),E=require("./with-success-text.cjs"),H=require("./form-element.cjs"),v=require("./affix.cjs"),V=require("./strings.cjs"),s=require("./key-codes.cjs"),q=require("./definition3.cjs"),F=require("./index.cjs"),x=require("./ref.cjs"),u=require("./when.cjs"),f=require("./slotted.cjs"),T=require("./class-names.cjs");var z=Object.defineProperty,L=Object.getOwnPropertyDescriptor,c=(n,e,t,o)=>{for(var a=o>1?void 0:o?L(e,t):e,l=n.length-1,d;l>=0;l--)(d=n[l])&&(a=(o?d(e,t,a):d(a))||a);return o&&a&&z(e,t,a),a};class i extends y.WithLightDOMFeedback(A.WithContextualHelp(D.WithErrorText(E.WithSuccessText(H.FormElement(_.HostSemantics(v.AffixIconWithTrailing(C.FormAssociated(k.Listbox)))))))){constructor(){super(...arguments),this.proxy=document.createElement("select"),this.activeIndex=-1,this.rangeStartIndex=-1,this.open=!1,this.listboxId=V.uniqueId("listbox-"),this.maxHeight=0,this.fixedDropdown=!1,this._feedbackWrapper=null}get activeOption(){return this.options[this.activeIndex]}get checkedOptions(){return this.options.filter(e=>e.checked)}get firstSelectedOptionIndex(){return this.options.indexOf(this.firstSelectedOption)}activeIndexChanged(e,t){this._activeDescendant=this.options[t]?.id??"",this.focusAndScrollOptionIntoView()}checkActiveIndex(){const e=this.activeOption;/* v8 ignore else -- @preserve */e&&(e.checked=!0)}checkFirstOption(e){if(e){/* v8 ignore else -- @preserve */this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex+1),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex)})}else this.uncheckAllOptions();this.activeIndex=0,this.checkActiveIndex()}checkLastOption(e){if(e){/* v8 ignore else -- @preserve */this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex,this.length)})}else this.uncheckAllOptions();this.activeIndex=this.length-1,this.checkActiveIndex()}checkNextOption(e){if(e){/* v8 ignore else -- @preserve */this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.rangeStartIndex,this.activeIndex+1)})}else this.uncheckAllOptions();this.activeIndex+=this.activeIndex<this.length-1?1:0,this.checkActiveIndex()}checkPreviousOption(e){if(e){/* v8 ignore else -- @preserve */this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex);/* v8 ignore else -- @preserve */this.checkedOptions.length===1&&(this.rangeStartIndex+=1),this.options.forEach((t,o)=>{t.checked=h.inRange(o,this.activeIndex,this.rangeStartIndex)})}else this.uncheckAllOptions();this.activeIndex-=this.activeIndex>0?1:0,this.checkActiveIndex()}focusAndScrollOptionIntoView(){super.focusAndScrollOptionIntoView(this.activeOption)}focusinHandler(e){if(!this.multiple)return super.focusinHandler(e);/* v8 ignore else -- @preserve */!this.shouldSkipFocus&&e.target===e.currentTarget&&(this.uncheckAllOptions(),this.activeIndex===-1&&(this.activeIndex=this.firstSelectedOptionIndex!==-1?this.firstSelectedOptionIndex:0),this.checkActiveIndex(),this.setSelectedOptions(),this.focusAndScrollOptionIntoView()),this.shouldSkipFocus=!1}setSelectedOptions(){if(!this.multiple){super.setSelectedOptions();return}/* v8 ignore else -- @preserve */this.$fastController.isConnected&&this.options&&(this.selectedOptions=this.options.filter(e=>e.selected),this.focusAndScrollOptionIntoView())}toggleSelectedForAllCheckedOptions(){const e=this.checkedOptions.filter(o=>!o.disabled),t=!e.every(o=>o.selected);e.forEach(o=>o.selected=t),this.selectedIndex=this.options.indexOf(e[e.length-1]),this.setSelectedOptions(),this.updateValue(!0)}typeaheadBufferChanged(e,t){if(!this.multiple){super.typeaheadBufferChanged(e,t);return}/* v8 ignore if -- @preserve */if(this.$fastController.isConnected){const o=this.getTypeaheadMatches(),a=this.options.indexOf(o[0]);a>-1&&(this.activeIndex=a,this.uncheckAllOptions(),this.checkActiveIndex()),this.typeaheadExpired=!1}}uncheckAllOptions(e=!1){this.options.forEach(t=>t.checked=!1);/* v8 ignore else -- @preserve */e||(this.rangeStartIndex=-1)}openChanged(e,t){if(!this.collapsible)return;if(this.open){this.focusAndScrollOptionIntoView(),this.indexWhenOpened=this.selectedIndex,r.Updates.enqueue(()=>this.focus());return}const o=e===!0&&t===!1,a=this.indexWhenOpened!==this.selectedIndex;o&&a&&this.updateValue(!0)}get collapsible(){return!this.multiple}valueChanged(e,t){const o=this.options.findIndex(d=>d.value===t),a=this._validSelectedIndex(o),l=this.options[a]?.value??"";this.selectedIndex!==a&&(this.selectedIndex=a),t===l&&(super.valueChanged(e,t),this.updateDisplayValue())}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.value??""),e&&(this.$emit("input"),this.$emit("change",this,{bubbles:!0,composed:void 0}))}selectedIndexChanged(e,t){super.selectedIndexChanged(e,t),this.updateValue()}clickHandler(e){if(this.disabled||this._isFromContextualHelp(e))return;const t=e.target.closest("option,[role=option],[data-vvd-component=option]");if(!(t&&t.disabled))return this.multiple?(this.uncheckAllOptions(),this.activeIndex=this.options.indexOf(t),this.checkActiveIndex(),this.toggleSelectedForAllCheckedOptions()):super.clickHandler(e),this.collapsible&&(this.open=!this.open),!0}focusoutHandler(e){if(this.multiple&&this.uncheckAllOptions(),!this.open)return!0;const t=e.relatedTarget;if(this.isSameNode(t)){this.focus();return}/* v8 ignore else -- @preserve */this.options.includes(t)||(this.open=!1,this.indexWhenOpened!==this.selectedIndex&&this.updateValue(!0))}handleChange(e,t){super.handleChange(e,t),t==="value"&&this.updateValue()}mousedownHandler(e){return e.offsetX>=0&&e.offsetX<=this.listbox.scrollWidth?super.mousedownHandler(e):this.collapsible}multipleChanged(e,t){this.options.forEach(o=>{o.checked=t?!1:void 0}),this.setSelectedOptions();/* v8 ignore if -- @preserve */this.proxy&&(this.proxy.multiple=t)}selectedOptionsChanged(e,t){super.selectedOptionsChanged(e,t),this.options.forEach((o,a)=>{const l=this.proxy.options.item(a);l&&(l.selected=o.selected)})}setProxyOptions(){/* v8 ignore else -- @preserve */this.proxy instanceof HTMLSelectElement&&this.options&&(this.proxy.length=0,this.options.forEach(e=>{const t=e.proxy||(e instanceof HTMLOptionElement?e.cloneNode():null);t&&this.proxy.options.add(t)}))}multipleKeydownHandler(e){if(this.disabled)return;const{key:t,shiftKey:o}=e;switch(this.shouldSkipFocus=!1,t){case s.keyHome:{this.checkFirstOption(o);return}case s.keyArrowDown:{this.checkNextOption(o);return}case s.keyArrowUp:{this.checkPreviousOption(o);return}case s.keyEnd:{this.checkLastOption(o);return}case s.keyTab:{this.focusAndScrollOptionIntoView();return}case s.keyEscape:{this.uncheckAllOptions(),this.checkActiveIndex();return}case s.keySpace:{e.preventDefault();/* v8 ignore else -- @preserve */if(this.typeaheadExpired){this.toggleSelectedForAllCheckedOptions();return}}default:{/* v8 ignore else -- @preserve */t.length===1&&this.handleTypeAhead(`${t}`);return}}}keydownHandler(e){const t=this.selectedIndex;switch(this.multiple?this.multipleKeydownHandler(e):super.keydownHandler(e),e.key){case s.keySpace:{e.preventDefault(),this.collapsible&&this.typeaheadExpired&&(this.open=!this.open);break}case s.keyHome:case s.keyEnd:{e.preventDefault();break}case s.keyEnter:{e.preventDefault(),this.open=!this.open;break}case s.keyEscape:{this.collapsible&&this.open&&(e.preventDefault(),this.open=!1);break}case s.keyTab:return this.collapsible&&this.open&&(e.preventDefault(),this.open=!1),!0}return this.collapsible&&!this.open&&this.selectedIndex!==t&&this.updateValue(!0),!(e.key===s.keyArrowDown||e.key===s.keyArrowUp)}connectedCallback(){super.connectedCallback(),this.addEventListener("focusout",this.focusoutHandler),this.addEventListener("contentchange",this.updateDisplayValue)}disconnectedCallback(){this.removeEventListener("focusout",this.focusoutHandler),this.removeEventListener("contentchange",this.updateDisplayValue),super.disconnectedCallback()}updateDisplayValue(){this.collapsible&&r.Observable.notify(this,"displayValue")}get displayValue(){return r.Observable.track(this,"displayValue"),this.firstSelectedOption?.getAttribute("label")??this.firstSelectedOption?.text??this.placeholder??""}_newDefaultSelectedIndex(e,t,o){const a=super._newDefaultSelectedIndex(e,t,o);if(a===null&&o===-1&&!this.placeholder){const l=this.getNextSelectableIndex(0);if(l!==-1)return l}return a}_isDefaultSelected(e){return super._isDefaultSelected(e)||e.value===this.initialValue}slottedOptionsChanged(e,t){this.options.forEach(a=>{r.Observable.getNotifier(a).unsubscribe(this,"value")}),super.slottedOptionsChanged(e,t),this.options.forEach(a=>{r.Observable.getNotifier(a).subscribe(this,"value")}),this.setProxyOptions(),this.updateValue();const o=this.getAttribute("scale")||this.scale;t.forEach(a=>{o&&(a.setAttribute("scale",o),a.scale=o)}),this.proxy.value=this.value,this.validate()}formResetCallback(){this.setProxyOptions(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1}}c([r.observable],i.prototype,"activeIndex",2);c([r.attr({mode:"boolean"})],i.prototype,"multiple",2);c([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open",2);c([r.volatile],i.prototype,"collapsible",1);c([r.observable],i.prototype,"control",2);c([r.observable],i.prototype,"maxHeight",2);c([r.observable],i.prototype,"_anchor",2);c([r.attr()],i.prototype,"scale",2);c([r.attr],i.prototype,"appearance",2);c([r.attr],i.prototype,"shape",2);c([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown",2);c([r.attr],i.prototype,"placeholder",2);c([r.observable],i.prototype,"_feedbackWrapper",2);c([r.observable],i.prototype,"metaSlottedContent",2);const 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)}: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(--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}",P=({shape:n,disabled:e,appearance:t,metaSlottedContent:o,errorValidationMessage:a,successText:l,placeholder:d,value:w,scale:b,_activeDescendant:O,open:S})=>T.classNames(["has-activedescendant",!!O&&S],["disabled",e],[`appearance-${t}`,!!t],[`shape-${n}`,!!n],["has-meta",!!o?.length],["error",!!a],["success",!!l],["shows-placeholder",!!d&&!w],[`size-${b}`,!!b]);function B(){return r.html` <label
+"use strict";const g=require("./definition9.cjs"),$=require("./definition2.cjs"),m=require("./definition12.cjs"),r=require("./vivid-element.cjs"),y=require("./mixins.cjs"),k=require("./listbox.cjs"),_=require("./host-semantics.cjs"),C=require("./form-associated.cjs"),h=require("./numbers.cjs"),A=require("./with-contextual-help.cjs"),D=require("./with-error-text.cjs"),E=require("./with-success-text.cjs"),H=require("./form-element.cjs"),v=require("./affix.cjs"),V=require("./strings.cjs"),s=require("./key-codes.cjs"),q=require("./definition3.cjs"),F=require("./index.cjs"),x=require("./ref.cjs"),u=require("./when.cjs"),f=require("./slotted.cjs"),T=require("./class-names.cjs");var z=Object.defineProperty,L=Object.getOwnPropertyDescriptor,c=(n,e,t,o)=>{for(var a=o>1?void 0:o?L(e,t):e,l=n.length-1,d;l>=0;l--)(d=n[l])&&(a=(o?d(e,t,a):d(a))||a);return o&&a&&z(e,t,a),a};class i extends y.WithLightDOMFeedback(A.WithContextualHelp(D.WithErrorText(E.WithSuccessText(H.FormElement(_.HostSemantics(v.AffixIconWithTrailing(C.FormAssociated(k.Listbox)))))))){constructor(){super(...arguments),this.proxy=document.createElement("select"),this.activeIndex=-1,this.rangeStartIndex=-1,this.open=!1,this.listboxId=V.uniqueId("listbox-"),this.maxHeight=0,this.fixedDropdown=!1,this._feedbackWrapper=null}get activeOption(){return this.options[this.activeIndex]}get checkedOptions(){return this.options.filter(e=>e.checked)}get firstSelectedOptionIndex(){return this.options.indexOf(this.firstSelectedOption)}activeIndexChanged(e,t){this._activeDescendant=this.options[t]?.id??"",this.focusAndScrollOptionIntoView()}checkActiveIndex(){const e=this.activeOption;/* v8 ignore else -- @preserve */e&&(e.checked=!0)}checkFirstOption(e){const t=this.getNextSelectableIndex(0);t!==-1&&(e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((o,a)=>{o.checked=h.inRange(a,t,this.rangeStartIndex+1)&&!o.disabled})):this.uncheckAllOptions(),this.activeIndex=t,this.checkActiveIndex())}checkLastOption(e){const t=this.getPreviousSelectableIndex(this.length-1);t!==-1&&(e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((o,a)=>{o.checked=h.inRange(a,this.rangeStartIndex,t+1)&&!o.disabled})):this.uncheckAllOptions(),this.activeIndex=t,this.checkActiveIndex())}checkNextOption(e){const t=this.getNextSelectableIndex(this.activeIndex+1);t!==-1&&(e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.options.forEach((o,a)=>{o.checked=h.inRange(a,this.rangeStartIndex,t+1)&&!o.disabled})):this.uncheckAllOptions(),this.activeIndex=t,this.checkActiveIndex())}checkPreviousOption(e){const t=this.getPreviousSelectableIndex(this.activeIndex-1);t!==-1&&(e?(this.rangeStartIndex===-1&&(this.rangeStartIndex=this.activeIndex),this.checkedOptions.length===1&&(this.rangeStartIndex+=1),this.options.forEach((o,a)=>{o.checked=h.inRange(a,t,this.rangeStartIndex+1)&&!o.disabled})):this.uncheckAllOptions(),this.activeIndex=t,this.checkActiveIndex())}focusAndScrollOptionIntoView(){super.focusAndScrollOptionIntoView(this.activeOption)}focusinHandler(e){if(!this.multiple)return super.focusinHandler(e);/* v8 ignore else -- @preserve */!this.shouldSkipFocus&&e.target===e.currentTarget&&(this.uncheckAllOptions(),this.activeIndex===-1&&(this.activeIndex=this.firstSelectedOptionIndex!==-1?this.firstSelectedOptionIndex:0),this.checkActiveIndex(),this.setSelectedOptions(),this.focusAndScrollOptionIntoView()),this.shouldSkipFocus=!1}setSelectedOptions(){if(!this.multiple){super.setSelectedOptions();return}/* v8 ignore else -- @preserve */this.$fastController.isConnected&&this.options&&(this.selectedOptions=this.options.filter(e=>e.selected),this.focusAndScrollOptionIntoView())}toggleSelectedForAllCheckedOptions(){const e=this.checkedOptions.filter(o=>!o.disabled),t=!e.every(o=>o.selected);e.forEach(o=>o.selected=t),this.selectedIndex=this.options.indexOf(e[e.length-1]),this.setSelectedOptions(),this.updateValue(!0)}typeaheadBufferChanged(e,t){if(!this.multiple){super.typeaheadBufferChanged(e,t);return}/* v8 ignore if -- @preserve */if(this.$fastController.isConnected){const o=this.getTypeaheadMatches(),a=this.options.indexOf(o[0]);a>-1&&(this.activeIndex=a,this.uncheckAllOptions(),this.checkActiveIndex()),this.typeaheadExpired=!1}}uncheckAllOptions(e=!1){this.options.forEach(t=>t.checked=!1);/* v8 ignore else -- @preserve */e||(this.rangeStartIndex=-1)}openChanged(e,t){if(!this.collapsible)return;if(this.open){this.focusAndScrollOptionIntoView(),this.indexWhenOpened=this.selectedIndex,r.Updates.enqueue(()=>this.focus());return}const o=e===!0&&t===!1,a=this.indexWhenOpened!==this.selectedIndex;o&&a&&this.updateValue(!0)}get collapsible(){return!this.multiple}valueChanged(e,t){const o=this.options.findIndex(d=>d.value===t),a=this._validSelectedIndex(o),l=this.options[a]?.value??"";this.selectedIndex!==a&&(this.selectedIndex=a),t===l&&(super.valueChanged(e,t),this.updateDisplayValue())}updateValue(e){this.$fastController.isConnected&&(this.value=this.firstSelectedOption?.value??""),e&&(this.$emit("input"),this.$emit("change",this,{bubbles:!0,composed:void 0}))}selectedIndexChanged(e,t){super.selectedIndexChanged(e,t),this.updateValue()}clickHandler(e){if(this.disabled||this._isFromContextualHelp(e))return;const t=e.target.closest("option,[role=option],[data-vvd-component=option]");if(!(t&&t.disabled))return this.multiple?(this.uncheckAllOptions(),this.activeIndex=this.options.indexOf(t),this.checkActiveIndex(),this.toggleSelectedForAllCheckedOptions()):super.clickHandler(e),this.collapsible&&(this.open=!this.open),!0}focusoutHandler(e){if(this.multiple&&this.uncheckAllOptions(),!this.open)return!0;const t=e.relatedTarget;if(this.isSameNode(t)){this.focus();return}/* v8 ignore else -- @preserve */this.options.includes(t)||(this.open=!1,this.indexWhenOpened!==this.selectedIndex&&this.updateValue(!0))}handleChange(e,t){super.handleChange(e,t),t==="value"&&this.updateValue()}mousedownHandler(e){return e.offsetX>=0&&e.offsetX<=this.listbox.scrollWidth?super.mousedownHandler(e):this.collapsible}multipleChanged(e,t){this.options.forEach(o=>{o.checked=t?!1:void 0}),this.setSelectedOptions();/* v8 ignore if -- @preserve */this.proxy&&(this.proxy.multiple=t)}selectedOptionsChanged(e,t){super.selectedOptionsChanged(e,t),this.options.forEach((o,a)=>{const l=this.proxy.options.item(a);l&&(l.selected=o.selected)})}setProxyOptions(){/* v8 ignore else -- @preserve */this.proxy instanceof HTMLSelectElement&&this.options&&(this.proxy.length=0,this.options.forEach(e=>{const t=e.proxy||(e instanceof HTMLOptionElement?e.cloneNode():null);t&&this.proxy.options.add(t)}))}multipleKeydownHandler(e){if(this.disabled)return;const{key:t,shiftKey:o}=e;switch(this.shouldSkipFocus=!1,t){case s.keyHome:{this.checkFirstOption(o);return}case s.keyArrowDown:{this.checkNextOption(o);return}case s.keyArrowUp:{this.checkPreviousOption(o);return}case s.keyEnd:{this.checkLastOption(o);return}case s.keyTab:{this.focusAndScrollOptionIntoView();return}case s.keyEscape:{this.uncheckAllOptions(),this.checkActiveIndex();return}case s.keySpace:{e.preventDefault();/* v8 ignore else -- @preserve */if(this.typeaheadExpired){this.toggleSelectedForAllCheckedOptions();return}}default:{/* v8 ignore else -- @preserve */t.length===1&&this.handleTypeAhead(`${t}`);return}}}keydownHandler(e){const t=this.selectedIndex;switch(this.multiple?this.multipleKeydownHandler(e):super.keydownHandler(e),e.key){case s.keySpace:{e.preventDefault(),this.collapsible&&this.typeaheadExpired&&(this.open=!this.open);break}case s.keyHome:case s.keyEnd:{e.preventDefault();break}case s.keyEnter:{e.preventDefault(),this.open=!this.open;break}case s.keyEscape:{this.collapsible&&this.open&&(e.preventDefault(),this.open=!1);break}case s.keyTab:return this.collapsible&&this.open&&(e.preventDefault(),this.open=!1),!0}return this.collapsible&&!this.open&&this.selectedIndex!==t&&this.updateValue(!0),!(e.key===s.keyArrowDown||e.key===s.keyArrowUp)}connectedCallback(){super.connectedCallback(),this.addEventListener("focusout",this.focusoutHandler),this.addEventListener("contentchange",this.updateDisplayValue)}disconnectedCallback(){this.removeEventListener("focusout",this.focusoutHandler),this.removeEventListener("contentchange",this.updateDisplayValue),super.disconnectedCallback()}updateDisplayValue(){this.collapsible&&r.Observable.notify(this,"displayValue")}get displayValue(){return r.Observable.track(this,"displayValue"),this.firstSelectedOption?.getAttribute("label")??this.firstSelectedOption?.text??this.placeholder??""}_newDefaultSelectedIndex(e,t,o){const a=super._newDefaultSelectedIndex(e,t,o);if(a===null&&o===-1&&!this.placeholder){const l=this.getNextSelectableIndex(0);if(l!==-1)return l}return a}_isDefaultSelected(e){return super._isDefaultSelected(e)||e.value===this.initialValue}slottedOptionsChanged(e,t){this.options.forEach(a=>{r.Observable.getNotifier(a).unsubscribe(this,"value")}),super.slottedOptionsChanged(e,t),this.options.forEach(a=>{r.Observable.getNotifier(a).subscribe(this,"value")}),this.setProxyOptions(),this.updateValue();const o=this.getAttribute("scale")||this.scale;t.forEach(a=>{o&&(a.setAttribute("scale",o),a.scale=o)}),this.proxy.value=this.value,this.validate()}formResetCallback(){this.setProxyOptions(),this.selectedIndex=this._newDefaultSelectedIndex([],this.options,-1)??-1}}c([r.observable],i.prototype,"activeIndex",2);c([r.attr({mode:"boolean"})],i.prototype,"multiple",2);c([r.attr({attribute:"open",mode:"boolean"})],i.prototype,"open",2);c([r.volatile],i.prototype,"collapsible",1);c([r.observable],i.prototype,"control",2);c([r.observable],i.prototype,"maxHeight",2);c([r.observable],i.prototype,"_anchor",2);c([r.attr()],i.prototype,"scale",2);c([r.attr],i.prototype,"appearance",2);c([r.attr],i.prototype,"shape",2);c([r.attr({mode:"boolean",attribute:"fixed-dropdown"})],i.prototype,"fixedDropdown",2);c([r.attr],i.prototype,"placeholder",2);c([r.observable],i.prototype,"_feedbackWrapper",2);c([r.observable],i.prototype,"metaSlottedContent",2);const P=".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}",W=({shape:n,disabled:e,appearance:t,metaSlottedContent:o,errorValidationMessage:a,successText:l,placeholder:d,value:w,scale:b,_activeDescendant:O,open:S})=>T.classNames(["has-activedescendant",!!O&&S],["disabled",e],[`appearance-${t}`,!!t],[`shape-${n}`,!!n],["has-meta",!!o?.length],["error",!!a],["success",!!l],["shows-placeholder",!!d&&!w],[`size-${b}`,!!b]);function B(){return r.html` <label
 		for="${n=>n.multiple?null:"control"}"
 		class="label"
 		id="label"
@@ -7,7 +7,7 @@
 	</label>`}function N(n){const e=n.tagFor(m.ListboxOption);return r.html`
 		<${e} text="${t=>t.placeholder}" hidden disabled>
 		</${e}>`}function M(n){const e=v.affixIconTemplateFactory(n),t=q.chevronTemplateFactory(n);return r.html` <div
-		class="control ${P}"
+		class="control ${W}"
 		${x.ref("_anchor")}
 		id="control"
 		?disabled="${o=>o.disabled}"
@@ -49,7 +49,6 @@
 			</div>
 		`}function p(n){return(e,t)=>t.event.composedPath().includes(e._feedbackWrapper)?!0:n(e,t.event)}const j=n=>r.html`
 		<template
-			class="base"
 			${_.applyHostSemantics({role:"combobox",ariaLabel:e=>e.ariaLabel??e.label,ariaHasPopup:e=>e.collapsible?"listbox":"false",ariaExpanded:e=>e.open,ariaDisabled:e=>e.disabled})}
 			aria-controls="${e=>e.listboxId}"
 			aria-activedescendant="${e=>e.open?e._activeDescendant:null}"
@@ -66,4 +65,4 @@
 				${e=>e._getFeedbackTemplate(n)}
 			</div>
 		</template>
-	`,I=r.defineVividComponent("select",i,j,[g.popupDefinition,$.iconDefinition,m.listboxOptionDefinition,y.feedbackMessageDefinition],{styles:W}),U=r.createRegisterFunction(I);exports.Select=i;exports.registerSelect=U;exports.selectDefinition=I;
+	`,I=r.defineVividComponent("select",i,j,[g.popupDefinition,$.iconDefinition,m.listboxOptionDefinition,y.feedbackMessageDefinition],{styles:P}),U=r.createRegisterFunction(I);exports.Select=i;exports.registerSelect=U;exports.selectDefinition=I;

package/bundled/definition19.js

@@ -1,7 +1,7 @@
 import { P as D, p as H } from "./definition9.js";
 import { i as E } from "./definition2.js";
 import { L as V, l as F } from "./definition12.js";
-import { U as z, O as u, o as p, a as c, v as T, h, c as W, d as L } from "./vivid-element.js";
+import { U as z, O as u, o as d, a as c, v as T, h, c as W, d as L } from "./vivid-element.js";
 import { a as P, f as B } from "./mixins.js";
 import { L as S } from "./listbox.js";
 import { H as N, a as M } from "./host-semantics.js";
@@ -20,12 +20,12 @@ import { r as b } from "./ref.js";
 import { w as f } from "./when.js";
 import { s as x } from "./slotted.js";
 import { c as te } from "./class-names.js";
-var oe = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, l = (r, e, t, o) => {
+var oe = Object.defineProperty, ae = Object.getOwnPropertyDescriptor, i = (r, e, t, o) => {
   for (var a = o > 1 ? void 0 : o ? ae(e, t) : e, n = r.length - 1, s; n >= 0; n--)
     (s = r[n]) && (a = (o ? s(e, t, a) : s(a)) || a);
   return o && a && oe(e, t, a), a;
 };
-class i extends P(
+class l extends P(
   R(
     j(
       U(
@@ -95,14 +95,10 @@ class i extends P(
    * @internal
    */
   checkFirstOption(e) {
-    if (e) {
-      /* v8 ignore else -- @preserve */
-      this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex + 1), this.options.forEach((t, o) => {
-        t.checked = v(o, this.rangeStartIndex);
-      });
-    } else
-      this.uncheckAllOptions();
-    this.activeIndex = 0, this.checkActiveIndex();
+    const t = this.getNextSelectableIndex(0);
+    t !== -1 && (e ? (this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((o, a) => {
+      o.checked = v(a, t, this.rangeStartIndex + 1) && !o.disabled;
+    })) : this.uncheckAllOptions(), this.activeIndex = t, this.checkActiveIndex());
   }
   /**
    * Decrements the active index and sets the matching option as checked.
@@ -115,14 +111,12 @@ class i extends P(
    * @internal
    */
   checkLastOption(e) {
-    if (e) {
-      /* v8 ignore else -- @preserve */
-      this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((t, o) => {
-        t.checked = v(o, this.rangeStartIndex, this.length);
-      });
-    } else
-      this.uncheckAllOptions();
-    this.activeIndex = this.length - 1, this.checkActiveIndex();
+    const t = this.getPreviousSelectableIndex(
+      this.length - 1
+    );
+    t !== -1 && (e ? (this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((o, a) => {
+      o.checked = v(a, this.rangeStartIndex, t + 1) && !o.disabled;
+    })) : this.uncheckAllOptions(), this.activeIndex = t, this.checkActiveIndex());
   }
   /**
    * Increments the active index and marks the matching option as checked.
@@ -135,14 +129,10 @@ class i extends P(
    * @internal
    */
   checkNextOption(e) {
-    if (e) {
-      /* v8 ignore else -- @preserve */
-      this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((t, o) => {
-        t.checked = v(o, this.rangeStartIndex, this.activeIndex + 1);
-      });
-    } else
-      this.uncheckAllOptions();
-    this.activeIndex += this.activeIndex < this.length - 1 ? 1 : 0, this.checkActiveIndex();
+    const t = this.getNextSelectableIndex(this.activeIndex + 1);
+    t !== -1 && (e ? (this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.options.forEach((o, a) => {
+      o.checked = v(a, this.rangeStartIndex, t + 1) && !o.disabled;
+    })) : this.uncheckAllOptions(), this.activeIndex = t, this.checkActiveIndex());
   }
   /**
    * Decrements the active index and marks the matching option as checked.
@@ -155,16 +145,10 @@ class i extends P(
    * @internal
    */
   checkPreviousOption(e) {
-    if (e) {
-      /* v8 ignore else -- @preserve */
-      this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex);
-      /* v8 ignore else -- @preserve */
-      this.checkedOptions.length === 1 && (this.rangeStartIndex += 1), this.options.forEach((t, o) => {
-        t.checked = v(o, this.activeIndex, this.rangeStartIndex);
-      });
-    } else
-      this.uncheckAllOptions();
-    this.activeIndex -= this.activeIndex > 0 ? 1 : 0, this.checkActiveIndex();
+    const t = this.getPreviousSelectableIndex(this.activeIndex - 1);
+    t !== -1 && (e ? (this.rangeStartIndex === -1 && (this.rangeStartIndex = this.activeIndex), this.checkedOptions.length === 1 && (this.rangeStartIndex += 1), this.options.forEach((o, a) => {
+      o.checked = v(a, t, this.rangeStartIndex + 1) && !o.disabled;
+    })) : this.uncheckAllOptions(), this.activeIndex = t, this.checkActiveIndex());
   }
   /**
    * @internal
@@ -511,49 +495,49 @@ class i extends P(
     this.setProxyOptions(), this.selectedIndex = this._newDefaultSelectedIndex([], this.options, -1) ?? -1;
   }
 }
-l([
-  p
-], i.prototype, "activeIndex", 2);
-l([
+i([
+  d
+], l.prototype, "activeIndex", 2);
+i([
   c({ mode: "boolean" })
-], i.prototype, "multiple", 2);
-l([
+], l.prototype, "multiple", 2);
+i([
   c({ attribute: "open", mode: "boolean" })
-], i.prototype, "open", 2);
-l([
+], l.prototype, "open", 2);
+i([
   T
-], i.prototype, "collapsible", 1);
-l([
-  p
-], i.prototype, "control", 2);
-l([
-  p
-], i.prototype, "maxHeight", 2);
-l([
-  p
-], i.prototype, "_anchor", 2);
-l([
+], l.prototype, "collapsible", 1);
+i([
+  d
+], l.prototype, "control", 2);
+i([
+  d
+], l.prototype, "maxHeight", 2);
+i([
+  d
+], l.prototype, "_anchor", 2);
+i([
   c()
-], i.prototype, "scale", 2);
-l([
+], l.prototype, "scale", 2);
+i([
   c
-], i.prototype, "appearance", 2);
-l([
+], l.prototype, "appearance", 2);
+i([
   c
-], i.prototype, "shape", 2);
-l([
+], l.prototype, "shape", 2);
+i([
   c({ mode: "boolean", attribute: "fixed-dropdown" })
-], i.prototype, "fixedDropdown", 2);
-l([
+], l.prototype, "fixedDropdown", 2);
+i([
   c
-], i.prototype, "placeholder", 2);
-l([
-  p
-], i.prototype, "_feedbackWrapper", 2);
-l([
-  p
-], i.prototype, "metaSlottedContent", 2);
-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)}: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(--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}", ne = ({
+], l.prototype, "placeholder", 2);
+i([
+  d
+], l.prototype, "_feedbackWrapper", 2);
+i([
+  d
+], l.prototype, "metaSlottedContent", 2);
+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)}: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}", ne = ({
   shape: r,
   disabled: e,
   appearance: t,
@@ -576,7 +560,7 @@ const re = ".label-wrapper{display:flex;flex-direction:row;align-items:center;ga
   ["shows-placeholder", !!s && !$],
   [`size-${m}`, !!m]
 );
-function ie() {
+function le() {
   return h` <label
 		for="${(r) => r.multiple ? null : "control"}"
 		class="label"
@@ -585,7 +569,7 @@ function ie() {
 		${(r) => r.label}
 	</label>`;
 }
-function le(r) {
+function ie(r) {
   const e = r.tagFor(V);
   return h`
 		<${e} text="${(t) => t.placeholder}" hidden disabled>
@@ -610,11 +594,11 @@ function se(r) {
 function ce(r) {
   return r.open && r.fixedDropdown ? `--_select-fixed-width: ${Math.round(r.getBoundingClientRect().width)}px` : null;
 }
-function pe(r) {
+function de(r) {
   const e = r.tagFor(D);
   return h`
 			<div class="label-wrapper" ?hidden=${(t) => !t.label && !t._hasContextualHelp}>
-				${f((t) => t.label, ie())}
+				${f((t) => t.label, le())}
 				<slot name="contextual-help" ${x("_contextualHelpSlottedContent")}></slot>
 			</div>
 			<div class="control-wrapper">
@@ -634,7 +618,7 @@ function pe(r) {
 						?disabled="${(t) => t.disabled}"
 						?hidden="${(t) => t.collapsible ? !t.open : !1}"
 						${b("listbox")}>
-						${f((t) => t.placeholder, le(r))}
+						${f((t) => t.placeholder, ie(r))}
 						<slot
 							${x({
     filter: S.slottedOptionFilter,
@@ -647,12 +631,11 @@ function pe(r) {
 			</div>
 		`;
 }
-function d(r) {
+function p(r) {
   return (e, t) => t.event.composedPath().includes(e._feedbackWrapper) ? !0 : r(e, t.event);
 }
-const de = (r) => h`
+const pe = (r) => h`
 		<template
-			class="base"
 			${M({
   role: "combobox",
   ariaLabel: (e) => e.ariaLabel ?? e.label,
@@ -664,25 +647,25 @@ const de = (r) => h`
 			aria-activedescendant="${(e) => e.open ? e._activeDescendant : null}"
 			aria-describedby="${(e) => e._feedbackDescribedBy}"
 			tabindex="${(e) => e.disabled ? null : "0"}"
-			@click="${d((e, t) => e.clickHandler(t))}"
-			@focusin="${d((e, t) => e.focusinHandler(t))}"
-			@focusout="${d(
+			@click="${p((e, t) => e.clickHandler(t))}"
+			@focusin="${p((e, t) => e.focusinHandler(t))}"
+			@focusout="${p(
   (e, t) => e.focusoutHandler(t)
 )}"
-			@keydown="${d((e, t) => (e.open && ee(t), e.keydownHandler(t)))}"
-			@mousedown="${d(
+			@keydown="${p((e, t) => (e.open && ee(t), e.keydownHandler(t)))}"
+			@mousedown="${p(
   (e, t) => e.mousedownHandler(t)
 )}"
 		>
-			${pe(r)}
+			${de(r)}
 			<div class="feedback-wrapper" ${b("_feedbackWrapper")}>
 				${(e) => e._getFeedbackTemplate(r)}
 			</div>
 		</template>
 	`, he = L(
   "select",
-  i,
-  de,
+  l,
+  pe,
   [
     H,
     E,
@@ -694,7 +677,7 @@ const de = (r) => h`
   }
 ), ze = W(he);
 export {
-  i as S,
+  l as S,
   ze as r,
   he as s
 };

package/bundled/definition20.cjs

@@ -1,4 +1,4 @@
-"use strict";const b=require("./definition2.cjs"),e=require("./vivid-element.cjs"),s=require("./affix.cjs"),p=require("./host-semantics.cjs"),f=require("./localized.cjs"),u=require("./class-names.cjs"),m=":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--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(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--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))}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";var _=Object.defineProperty,c=(t,o,a,i)=>{for(var r=void 0,l=t.length-1,v;l>=0;l--)(v=t[l])&&(r=v(o,a,r)||r);return r&&_(o,a,r),r};class n extends p.HostSemantics(s.AffixIconWithTrailing(f.Localized(e.VividElement))){constructor(){super(...arguments),this.removable=!1,this.tabIndex="-1",this.active=!1}_handleCloseClick(o){o.stopImmediatePropagation(),this.$emit("close")}_onKeyDown(o){return!this.removable||o.key!=="Delete"?!0:(o.stopImmediatePropagation(),this.$emit("close"),!1)}}c([e.attr({mode:"boolean"})],n.prototype,"disabled");c([e.attr],n.prototype,"connotation");c([e.attr],n.prototype,"shape");c([e.attr],n.prototype,"label");c([e.attr({mode:"boolean"})],n.prototype,"removable");c([e.attr({mode:"fromView"})],n.prototype,"tabIndex");c([e.observable],n.prototype,"active");const x=({connotation:t,disabled:o,active:a,iconTrailing:i,shape:r,removable:l})=>u.classNames("base",[`connotation-${t}`,!!t&&!!a],[`shape-${r}`,!!r],["disabled",!!o],["selected",!!a],["icon-trailing",i],["removable",l]);function h(t){const o=s.affixIconTemplateFactory(t);return e.html`<button
+"use strict";const b=require("./definition2.cjs"),e=require("./vivid-element.cjs"),s=require("./affix.cjs"),p=require("./host-semantics.cjs"),f=require("./localized.cjs"),u=require("./class-names.cjs"),m=":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--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(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;border:none;border-radius:4px;background:transparent;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close:focus-visible{--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))}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";var _=Object.defineProperty,c=(t,o,a,i)=>{for(var r=void 0,l=t.length-1,v;l>=0;l--)(v=t[l])&&(r=v(o,a,r)||r);return r&&_(o,a,r),r};class n extends p.HostSemantics(s.AffixIconWithTrailing(f.Localized(e.VividElement))){constructor(){super(...arguments),this.removable=!1,this.tabIndex="-1",this.active=!1}_handleCloseClick(o){o.stopImmediatePropagation(),this.$emit("close")}_onKeyDown(o){return!this.removable||o.key!=="Delete"?!0:(o.stopImmediatePropagation(),this.$emit("close"),!1)}}c([e.attr({mode:"boolean"})],n.prototype,"disabled");c([e.attr],n.prototype,"connotation");c([e.attr],n.prototype,"shape");c([e.attr],n.prototype,"label");c([e.attr({mode:"boolean"})],n.prototype,"removable");c([e.attr({mode:"fromView"})],n.prototype,"tabIndex");c([e.observable],n.prototype,"active");const x=({connotation:t,disabled:o,active:a,iconTrailing:i,shape:r,removable:l})=>u.classNames("base",[`connotation-${t}`,!!t&&!!a],[`shape-${r}`,!!r],["disabled",!!o],["selected",!!a],["icon-trailing",i],["removable",l]);function h(t){const o=s.affixIconTemplateFactory(t);return e.html`<button
 		aria-label="${a=>a.locale.tab.dismissButtonLabel}"
 		class="close"
 		id="close-btn"