@vonage/vivid 5.16.0 → 5.17.0

package/rich-text-view/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/slottable-request.cjs`);var i=`:host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}`,a=class extends e.t{constructor(...e){super(...e),this._slotCounter=0,this._slottedChildren=new Set,this._slotRequests=new Set,this._contentElement=null}viewChanged(e,t){e&&this._removeStyles(),t&&this._addStyles(t),this._updateView()}_addStyles(t){let n=t[r.r].config[r.r];this._styles=new e.y(r.c(n.features.flatMap(e=>e.getStyles()))),this._styles.addStylesTo(this.shadowRoot)}_removeStyles(){this._styles&&=(this._styles.removeStylesFrom(this.shadowRoot),void 0)}_cleanupLightDom(){for(let e of this._slottedChildren)this.removeChild(e);for(let e of this._slotRequests)r.t(this,`child`,e,r.n);this._slottedChildren.clear(),this._slotRequests.clear(),this._slotCounter=0}_updateView(){this._contentElement&&(this._contentElement.innerHTML=``,this._cleanupLightDom(),this.view&&this._contentElement.appendChild(this._renderView(this.view)))}_renderView(e){let t=e[r.r];if(e.type===`node`&&e.node.type===`doc`&&(e=e.children),e.type===`fragment`){let t=document.createDocumentFragment();for(let n of e.content)t.appendChild(this._renderView(n));return t}let n=t.options.renderChildView?.(e)??!1;return n?this._handleCustomRender(e,n):this._renderDefault(e)}_handleCustomRender(e,t){let n=`child-view-${this._slotCounter++}`,i=document.createElement(`slot`);if(i.setAttribute(`name`,n),t===!0)this._slotRequests.add(n),r.t(this,`child`,n,{view:e});else{let{dom:r,contentDom:i=r}=t,a=document.createElement(this.tagName);a.view=e.children,i.appendChild(a),r.setAttribute(`slot`,n),this.appendChild(r),this._slottedChildren.add(r)}return i}_renderDefault(e){let t=e[r.r].config[r.r].schema;if(e.type===`node`&&e.node.type===`text`)return document.createTextNode(e.node.text);let n=e.type===`node`?e.node:e.mark,i=e.type===`node`?r.g.fromJSON(t,n):r.m.fromJSON(t,n),a=i instanceof r.g?i.type.spec.toDOM(i):i.type.spec.toDOM(i,!0),{dom:o,contentDOM:s=o}=r.f.renderSpec(document,a),c=this._renderView(e.children);return s.appendChild(c),o}connectedCallback(){super.connectedCallback(),this._updateView()}disconnectedCallback(){super.disconnectedCallback(),this._removeStyles(),this._cleanupLightDom()}};n.t([e.T],a.prototype,`view`,void 0);var o=e.o(`rich-text-view`,a,()=>e.d`<div class="content rich-text" ${t.t(`_contentElement`)}></div>`,[],{styles:i,shadowOptions:{delegatesFocus:!0}}),s=e.s(o);s(),exports.RichTextView=a,exports.registerRichTextView=s;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/ref.cjs`),n=require(`../bundled/decorate.cjs`),r=require(`../bundled/slottable-request.cjs`);var i=`:host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}`,a=class extends e.t{constructor(...e){super(...e),this._slotCounter=0,this._slottedChildren=new Set,this._slotRequests=new Set,this._contentElement=null}viewChanged(e,t){e&&this._removeStyles(),t&&this._addStyles(t),this._updateView()}_addStyles(t){let n=t[r.c].config[r.c];this._styles=new e.y(r.s(n.features.flatMap(e=>e.getStyles()))),this._styles.addStylesTo(this.shadowRoot)}_removeStyles(){this._styles&&=(this._styles.removeStylesFrom(this.shadowRoot),void 0)}_cleanupLightDom(){for(let e of this._slottedChildren)this.removeChild(e);for(let e of this._slotRequests)r.t(this,`child`,e,r.n);this._slottedChildren.clear(),this._slotRequests.clear(),this._slotCounter=0}_updateView(){this._contentElement&&(this._contentElement.innerHTML=``,this._cleanupLightDom(),this.view&&this._contentElement.appendChild(this._renderView(this.view)))}_renderView(e){let t=e[r.c];if(e.type===`node`&&e.node.type===`doc`&&(e=e.children),e.type===`fragment`){let t=document.createDocumentFragment();for(let n of e.content)t.appendChild(this._renderView(n));return t}let n=t.options.renderChildView?.(e)??!1;return n?this._handleCustomRender(e,n):this._renderDefault(e)}_handleCustomRender(e,t){let n=`child-view-${this._slotCounter++}`,i=document.createElement(`slot`);if(i.setAttribute(`name`,n),t===!0)this._slotRequests.add(n),r.t(this,`child`,n,{view:e});else{let{dom:r,contentDom:i=r}=t,a=document.createElement(this.tagName);a.view=e.children,i.appendChild(a),r.setAttribute(`slot`,n),this.appendChild(r),this._slottedChildren.add(r)}return i}_renderDefault(e){let t=e[r.c].config[r.c].schema;if(e.type===`node`&&e.node.type===`text`)return document.createTextNode(e.node.text);let n=e.type===`node`?e.node:e.mark,i=e.type===`node`?r.m.fromJSON(t,n):r.f.fromJSON(t,n),a=i instanceof r.m?i.type.spec.toDOM(i):i.type.spec.toDOM(i,!0),{dom:o,contentDOM:s=o}=r.u.renderSpec(document,a),c=this._renderView(e.children);return s.appendChild(c),o}connectedCallback(){super.connectedCallback(),this._updateView()}disconnectedCallback(){super.disconnectedCallback(),this._removeStyles(),this._cleanupLightDom()}};n.t([e.T],a.prototype,`view`,void 0);var o=e.o(`rich-text-view`,a,()=>e.d`<div class="content rich-text" ${t.t(`_contentElement`)}></div>`,[],{styles:i,shadowOptions:{delegatesFocus:!0}}),s=e.s(o);s(),exports.RichTextView=a,exports.registerRichTextView=s;

package/rich-text-view/index.js

@@ -1,7 +1,7 @@
 import { T as e, d as t, o as n, s as r, t as i, y as a } from "../bundled/vivid-element.js";
 import { t as o } from "../bundled/ref.js";
 import { t as s } from "../bundled/decorate.js";
-import { c, f as l, g as u, m as d, n as f, r as p, t as m } from "../bundled/slottable-request.js";
+import { c, f as l, m as u, n as d, s as f, t as p, u as m } from "../bundled/slottable-request.js";
 //#region src/lib/rich-text-view/rich-text-view.scss?inline
 var h = ":host{display:contents}.content{overflow-wrap:break-word;white-space:break-spaces;display:contents}", g = class extends i {
 	constructor(...e) {
@@ -11,22 +11,22 @@ var h = ":host{display:contents}.content{overflow-wrap:break-word;white-space:br
 		e && this._removeStyles(), t && this._addStyles(t), this._updateView();
 	}
 	_addStyles(e) {
-		let t = e[p].config[p];
-		this._styles = new a(c(t.features.flatMap((e) => e.getStyles()))), this._styles.addStylesTo(this.shadowRoot);
+		let t = e[c].config[c];
+		this._styles = new a(f(t.features.flatMap((e) => e.getStyles()))), this._styles.addStylesTo(this.shadowRoot);
 	}
 	_removeStyles() {
 		this._styles &&= (this._styles.removeStylesFrom(this.shadowRoot), void 0);
 	}
 	_cleanupLightDom() {
 		for (let e of this._slottedChildren) this.removeChild(e);
-		for (let e of this._slotRequests) m(this, "child", e, f);
+		for (let e of this._slotRequests) p(this, "child", e, d);
 		this._slottedChildren.clear(), this._slotRequests.clear(), this._slotCounter = 0;
 	}
 	_updateView() {
 		this._contentElement && (this._contentElement.innerHTML = "", this._cleanupLightDom(), this.view && this._contentElement.appendChild(this._renderView(this.view)));
 	}
 	_renderView(e) {
-		let t = e[p];
+		let t = e[c];
 		if (e.type === "node" && e.node.type === "doc" && (e = e.children), e.type === "fragment") {
 			let t = document.createDocumentFragment();
 			for (let n of e.content) t.appendChild(this._renderView(n));
@@ -37,7 +37,7 @@ var h = ":host{display:contents}.content{overflow-wrap:break-word;white-space:br
 	}
 	_handleCustomRender(e, t) {
 		let n = `child-view-${this._slotCounter++}`, r = document.createElement("slot");
-		if (r.setAttribute("name", n), t === !0) this._slotRequests.add(n), m(this, "child", n, { view: e });
+		if (r.setAttribute("name", n), t === !0) this._slotRequests.add(n), p(this, "child", n, { view: e });
 		else {
 			let { dom: r, contentDom: i = r } = t, a = document.createElement(this.tagName);
 			a.view = e.children, i.appendChild(a), r.setAttribute("slot", n), this.appendChild(r), this._slottedChildren.add(r);
@@ -45,9 +45,9 @@ var h = ":host{display:contents}.content{overflow-wrap:break-word;white-space:br
 		return r;
 	}
 	_renderDefault(e) {
-		let t = e[p].config[p].schema;
+		let t = e[c].config[c].schema;
 		if (e.type === "node" && e.node.type === "text") return document.createTextNode(e.node.text);
-		let n = e.type === "node" ? e.node : e.mark, r = e.type === "node" ? u.fromJSON(t, n) : d.fromJSON(t, n), i = r instanceof u ? r.type.spec.toDOM(r) : r.type.spec.toDOM(r, !0), { dom: a, contentDOM: o = a } = l.renderSpec(document, i), s = this._renderView(e.children);
+		let n = e.type === "node" ? e.node : e.mark, r = e.type === "node" ? u.fromJSON(t, n) : l.fromJSON(t, n), i = r instanceof u ? r.type.spec.toDOM(r) : r.type.spec.toDOM(r, !0), { dom: a, contentDOM: o = a } = m.renderSpec(document, i), s = this._renderView(e.children);
 		return o.appendChild(s), a;
 	}
 	connectedCallback() {

package/searchable-select/index.cjs

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

package/searchable-select/index.js

@@ -6,24 +6,24 @@ import { t as f } from "../bundled/when.js";
 import { t as p } from "../bundled/slotted.js";
 import { r as m, t as h } from "../bundled/definition2.js";
 import { t as g } from "../bundled/decorate.js";
-import { t as _ } from "../bundled/class-names.js";
-import { a as ee, i as v, n as y } from "../bundled/affix.js";
-import { n as b, t as x } from "../bundled/delegates-aria.js";
-import { r as S, t as C } from "../bundled/definition5.js";
-import { n as w } from "../bundled/form-associated.js";
-import { t as T } from "../bundled/form-element.js";
-import { t as E } from "../bundled/with-success-text.js";
-import { t as D } from "../bundled/with-error-text.js";
-import { t as O } from "../bundled/with-contextual-help.js";
+import { a as _, i as ee, n as v } from "../bundled/affix.js";
+import { t as y } from "../bundled/form-element.js";
+import { t as b } from "../bundled/with-success-text.js";
+import { t as x } from "../bundled/with-error-text.js";
+import { t as S } from "../bundled/with-contextual-help.js";
+import { n as C, t as w } from "../bundled/delegates-aria.js";
+import { t as T } from "../bundled/class-names.js";
+import { r as E, t as D } from "../bundled/definition5.js";
+import { n as O } from "../bundled/form-associated.js";
 import { i as k, r as A, t as j } from "../bundled/definition6.js";
 import { i as M, t as N } from "../bundled/definition8.js";
-import { t as P } from "../bundled/divider.js";
-import { a as F, t as I } from "../bundled/mixins.js";
-import { i as L, r as R, t as te } from "../bundled/definition12.js";
-import { t as z } from "../bundled/definition16.js";
-import { t as B } from "../bundled/scrollIntoView.js";
+import { a as P, t as F } from "../bundled/mixins.js";
+import { t as I } from "../bundled/scrollIntoView.js";
+import { i as L, r as R, t as te } from "../bundled/definition17.js";
+import { t as z } from "../bundled/definition19.js";
+import { t as B } from "../bundled/divider.js";
 //#region src/lib/searchable-select/searchable-select.scss?inline
-var V = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{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);justify-content:space-between;align-items:center;gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s;display:flex}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{flex-direction:column;flex:1;gap:8px;min-block-size:24px;display:flex;overflow:hidden}.tag-row{gap:8px;inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:24px;font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:20px}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{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;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}", H = ".base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{box-sizing:border-box;background-color:var(--fill-color);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;vertical-align:middle;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in srgb, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in srgb, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}", U = 8, W = 100, G = 10, K = (e) => typeof e == "string", q = class extends O(I(D(E(T(x(y(e(w(s))))))))) {
+var V = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex-direction:row;display:flex}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 auto}.chevron{font:var(--vvd-typography-base-extended);flex-shrink:0;transition:transform .2s;display:flex;transform:rotate(0)}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host(:focus-visible){outline:none}:host{--_low-ink-color:var(--vvd-color-neutral-600);inline-size:300px;display:inline-block}:host([disabled]){--_low-ink-color:var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{flex-direction:column;gap:4px;display:flex}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary:var(--vvd-searchable-select-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-searchable-select-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-searchable-select-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-searchable-select-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-searchable-select-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-searchable-select-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-firm:var(--vvd-searchable-select-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-searchable-select-accent-fierce,var(--vvd-color-neutral-700));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.fieldset:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.fieldset.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.fieldset:disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset:disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.fieldset.disabled.appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-neutral-200);--_appearance-color-outline:var(--vvd-color-neutral-400)}.fieldset.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.fieldset.error:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:var(--vvd-color-alert-500)}.fieldset.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-alert-50);--_appearance-color-outline:transparent}.fieldset.success:where(:not(.disabled,:disabled)){--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:var(--vvd-color-success-500)}.fieldset.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text:notSet;--_appearance-color-fill:var(--vvd-color-success-50);--_appearance-color-outline:transparent}.fieldset{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);justify-content:space-between;align-items:center;gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s;display:flex}@supports selector(:has(*)){.fieldset:not(.has-highlighted-option):has(input:focus){box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}@supports not selector(:has(*)){.fieldset:not(.has-highlighted-option):focus-within{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));--focus-stroke-gap-color:transparent}}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{flex-direction:column;flex:1;gap:8px;min-block-size:24px;display:flex;overflow:hidden}.tag-row{gap:8px;inline-size:100%;display:flex}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;block-size:24px;font:var(--vvd-typography-base);background:0 0;border:none;outline:none;flex:1;min-inline-size:min(100px,40%);max-inline-size:100%}.contains-only-input input:not(:focus){opacity:0;pointer-events:none;block-size:0;inline-size:0;min-inline-size:0;position:absolute}.listbox{max-block-size:var(--searchable-select-height,408px);flex-direction:column;gap:2px;padding:4px;display:flex;overflow-y:auto}.empty-message{color:var(--vvd-color-neutral-300);font:var(--vvd-typography-base);text-align:center;justify-content:center;align-items:center;min-block-size:40px;display:flex}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width,100%)}slot[name=icon]{font-size:20px}.visually-hidden{clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;width:1px;height:1px;position:absolute;overflow:hidden}::slotted([data-vvd-component=option][data-highlighted]),[data-select-all][data-highlighted]{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;border-radius:8px}.divider{margin-block:10px;margin-inline:12px}", H = ".base.connotation-cta{--_connotation-color-contrast:var(--vvd-option-tag-cta-contrast,var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast:var(--vvd-option-tag-accent-contrast,var(--vvd-color-neutral-800))}.base{box-sizing:border-box;background-color:var(--fill-color);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);font:var(--vvd-typography-base-bold);user-select:none;vertical-align:middle;align-items:center;column-gap:8px;max-inline-size:100%;padding-inline:8px;display:inline-flex;position:relative}.base:not(.disabled){--text-color:var(--_connotation-color-contrast);--fill-color:var(--_connotation-color-soft);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base:not(.disabled){--fill-color:color-mix(in srgb, var(--_connotation-color-contrast), transparent 87.5%)}}.base.disabled{--text-color:var(--vvd-color-neutral-300);--fill-color:var(--vvd-color-neutral-200);--outline-color:transparent}@supports (background-color:color-mix(in srgb, black 50%, white)){.base.disabled{--fill-color:color-mix(in srgb, var(--vvd-color-neutral-800), transparent 87.5%)}}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{text-overflow:ellipsis;white-space:nowrap;max-inline-size:100%;overflow:hidden}slot[name=icon]{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 1.5)}.remove-button{border-radius:inherit;cursor:pointer;outline:none;align-items:center;display:flex}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color:transparent;box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px));z-index:1;border-radius:inherit;content:\"\";pointer-events:none;display:block;position:absolute;inset:0}", U = 8, W = 100, G = 10, K = (e) => typeof e == "string", q = class extends S(F(x(b(y(w(v(e(O(s))))))))) {
 	constructor(...e) {
 		super(...e), this.fixedDropdown = !1, this.open = !1, this.multiple = !1, this.externalTags = !1, this.maxLines = null, this.values = [], this.initialValues = [], this._currentSearchText = null, this._areOptionsInitialized = !1, this._filteredOptions = [], this._filteredEnabledOptions = [], this.loading = !1, this._highlightedOptionIndex = null, this._numElidedTags = 0, this._tagRows = [], this._lastTagRow = [], this.clearable = !1, this.maxSelected = null, this._slottedDisabledOptions = [], this.enableSelectAll = !1, this.proxy = document.createElement("input"), this.setFormValue = (e, t) => {
 			K(e) || super.setFormValue(e, t);
@@ -208,7 +208,7 @@ var V = ".label-wrapper{align-items:center;gap:var(--label-wrapper-gap,4px);flex
 		}
 		if (typeof e == "number" && (e = this._filteredEnabledOptions.length ? Math.max(0, Math.min(this._filteredEnabledOptions.length - 1, e)) : null), this._highlightedOptionIndex = e, typeof this._highlightedOptionIndex == "number") {
 			let e = this._filteredEnabledOptions[this._highlightedOptionIndex];
-			e._highlighted = !0, e.setAttribute("data-highlighted", ""), B(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, e.selected);
+			e._highlighted = !0, e.setAttribute("data-highlighted", ""), I(e, this._listbox, "nearest"), this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(e._getAccessibleName(), this._highlightedOptionIndex + 1, this._filteredEnabledOptions.length, e.selected);
 		}
 	}
 	#d() {
@@ -457,7 +457,7 @@ var J = class extends e(s) {
 g([i], J.prototype, "shape", void 0), g([n], J.prototype, "connotation", void 0), g([i], J.prototype, "label", void 0), g([i({ mode: "boolean" })], J.prototype, "removable", void 0), g([i({ mode: "boolean" })], J.prototype, "disabled", void 0), g([n], J.prototype, "hasIconPlaceholder", void 0);
 //#endregion
 //#region src/lib/searchable-select/searchable-select.template.ts
-var Y = (e) => _(["disabled", e.disabled], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], ["error", !!e.errorValidationMessage], ["success", !!e.successText], ["has-highlighted-option", e._highlightedOptionIndex !== null]);
+var Y = (e) => T(["disabled", e.disabled], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], ["error", !!e.errorValidationMessage], ["success", !!e.successText], ["has-highlighted-option", e._highlightedOptionIndex !== null]);
 function X() {
 	return r`
 		<label for="control" class="label" id="label"> ${(e) => e.label} </label>
@@ -507,14 +507,14 @@ var Q = (e, t) => {
 	`;
 };
 function ne(e) {
-	let t = e.tagFor(k), n = e.tagFor(S), i = ee(e), a = A(e), o = Q(e, (e) => e.parent), s = Q(e, (e) => e.parentContext.parent), c = $(e, (e, t) => e), l = $(e, (e, t) => t.parent);
+	let t = e.tagFor(k), n = e.tagFor(E), i = _(e), a = A(e), o = Q(e, (e) => e.parent), s = Q(e, (e) => e.parentContext.parent), c = $(e, (e, t) => e), l = $(e, (e, t) => t.parent);
 	return r`
 		<div
 			class="fieldset ${Y}"
 			@click="${(e, t) => e._onFieldsetClick(t.event)}"
 			${d("_anchor")}
 		>
-			${(e) => i(e.icon, v.Slot)}
+			${(e) => i(e.icon, ee.Slot)}
 			<div class="content-area" ${d("_contentArea")}>
 				${u((e) => e._tagRows, r`
 						<div class="tag-row">
@@ -523,7 +523,7 @@ function ne(e) {
 						</div>
 					`, { positioning: !0 })}
 				<div
-					class="tag-row ${(e) => _(["contains-only-input", e._tagRows.length > 0 && e._lastTagRow.length === 0])}"
+					class="tag-row ${(e) => T(["contains-only-input", e._tagRows.length > 0 && e._lastTagRow.length === 0])}"
 				>
 					${f((e) => e._tagRows.length === 0 && e._numElidedTags, c)}
 					${u((e) => e._lastTagRow, o)}
@@ -533,7 +533,7 @@ function ne(e) {
 						autocomplete="off"
 						aria-controls="listbox"
 						aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.multiple && e.maxSelected && e.maxSelected >= 1 ? "selection-count" : null}"
-						${b({
+						${C({
 		role: "combobox",
 		ariaAutoComplete: "list",
 		ariaHasPopup: "listbox",
@@ -579,7 +579,7 @@ function re(e) {
 	return e.open && e.fixedDropdown ? `--_searchable-select-fixed-width: ${Math.round(e.getBoundingClientRect().width)}px` : null;
 }
 function ie(e) {
-	let t = e.tagFor(R), n = e.tagFor(P);
+	let t = e.tagFor(R), n = e.tagFor(B);
 	return r`
     <${t}
       data-select-all
@@ -664,7 +664,7 @@ var oe = (e) => {
 			</div>
 		</template>
 	`;
-}, se = ({ shape: e, connotation: t, disabled: n, removable: r }) => _("base", ["disabled", n], ["removable", r], [`shape-${e}`, !!e], [`connotation-${t}`, !!t]);
+}, se = ({ shape: e, connotation: t, disabled: n, removable: r }) => T("base", ["disabled", n], ["removable", r], [`shape-${e}`, !!e], [`connotation-${t}`, !!t]);
 function ce(e) {
 	return r`
 		<span
@@ -697,8 +697,8 @@ o(a("searchable-select", q, oe, [
 		styles: [H],
 		shadowOptions: { delegatesFocus: !0 }
 	}),
-	C,
-	F,
+	D,
+	P,
 	te,
 	z
 ], { styles: V }))();

package/select/index.cjs

@@ -1 +1 @@
-require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition19.cjs`).t();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition18.cjs`).t();

package/select/index.js

@@ -1,6 +1,6 @@
 import "../bundled/vivid-element.js";
 import "../bundled/definition2.js";
-import { t as e } from "../bundled/definition19.js";
+import { t as e } from "../bundled/definition18.js";
 //#region src/lib/select/index.ts
 e();
 //#endregion

package/selectable-box/index.cjs

@@ -1,22 +1,22 @@
-const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`);require(`../bundled/definition2.cjs`);const n=require(`../bundled/decorate.cjs`),r=require(`../bundled/class-names.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/enums.cjs`),o=require(`../bundled/definition11.cjs`),s=require(`../bundled/definition17.cjs`);var c=`:host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base: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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}`,l=class extends i.t(e.t){constructor(...e){super(...e),this.checked=!1,this.clickableBox=!1,this.controlPlacement=`end-stacked`,this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType===`radio`&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit(`change`))}_handleKeydown(e){return this.disabled?!0:(e.code===`Space`||e.code===`Enter`)&&this.clickableBox?this._handleCheckedChange():!0}};n.t([e.l({mode:`boolean`})],l.prototype,`checked`,void 0),n.t([e.l({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),n.t([e.l],l.prototype,`connotation`,void 0),n.t([e.l({attribute:`control-type`})],l.prototype,`controlType`,void 0),n.t([e.l({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),n.t([e.l({mode:`boolean`})],l.prototype,`tight`,void 0),n.t([e.l({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:i,controlPlacement:a,disabled:o})=>r.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,i],[`readonly`,!i],[`control-placement-${a}`,!!a],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(n){let r=n.tagFor(o.r);return e.d`${t.t(e=>e.controlType!==`radio`,e.d`
-		<${r}
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/when.cjs`),n=require(`../bundled/enums.cjs`);require(`../bundled/definition2.cjs`);const r=require(`../bundled/decorate.cjs`),i=require(`../bundled/delegates-aria.cjs`),a=require(`../bundled/class-names.cjs`),o=require(`../bundled/definition15.cjs`),s=require(`../bundled/definition16.cjs`);var c=`:host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base: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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}`,l=class extends i.t(e.t){constructor(...e){super(...e),this.checked=!1,this.clickableBox=!1,this.controlPlacement=`end-stacked`,this.tight=!1,this.disabled=!1}_handleCheckedChange(){this.disabled||this.controlType===`radio`&&this.checked||(this.checked=!this.checked,this.clickableBox&&this.$emit(`change`))}_handleKeydown(e){return this.disabled?!0:(e.code===`Space`||e.code===`Enter`)&&this.clickableBox?this._handleCheckedChange():!0}};r.t([e.l({mode:`boolean`})],l.prototype,`checked`,void 0),r.t([e.l({attribute:`clickable-box`,mode:`boolean`})],l.prototype,`clickableBox`,void 0),r.t([e.l],l.prototype,`connotation`,void 0),r.t([e.l({attribute:`control-type`})],l.prototype,`controlType`,void 0),r.t([e.l({attribute:`control-placement`,mode:`fromView`})],l.prototype,`controlPlacement`,void 0),r.t([e.l({mode:`boolean`})],l.prototype,`tight`,void 0),r.t([e.l({mode:`boolean`})],l.prototype,`disabled`,void 0);var u=({connotation:e,tight:t,checked:n,clickableBox:r,controlPlacement:i,disabled:o})=>a.t(`base`,[`connotation-${e}`,!!e],[`tight`,t],[`selected`,n],[`clickable`,r],[`readonly`,!r],[`control-placement-${i}`,!!i],[`disabled`,o]);function d(e){e.clickableBox||e._handleCheckedChange()}function f(r){let a=r.tagFor(o.r);return e.d`${t.t(e=>e.controlType!==`radio`,e.d`
+		<${a}
 			${i.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>d(e)}"
 			class="control checkbox ${e=>e.controlPlacement}"
-			connotation="${e=>e.connotation===`cta`?a.n.CTA:a.n.Accent}"
+			connotation="${e=>e.connotation===`cta`?n.n.CTA:n.n.Accent}"
 			:checked="${e=>e.checked}"
 			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${r}>`)} `}function p(n){let r=n.tagFor(s.r);return e.d`${t.t(e=>e.controlType===`radio`,e.d`
-		<${r}
+		></${a}>`)} `}function p(r){let a=r.tagFor(s.r);return e.d`${t.t(e=>e.controlType===`radio`,e.d`
+		<${a}
 			${i.n({ariaLabel:e=>!e.clickableBox&&e.ariaLabel?e.ariaLabel:null},{onlySpecified:!0})}
 			@change="${e=>d(e)}"
 			class="control radio ${e=>e.controlPlacement}"
-			connotation="${e=>e.connotation===`cta`?a.n.CTA:a.n.Accent}"
+			connotation="${e=>e.connotation===`cta`?n.n.CTA:n.n.Accent}"
 			:checked="${e=>e.checked}"
 			?disabled="${e=>e.disabled}"
 			inert="${e=>e.clickableBox?!0:null}"
-		></${r}>`)} `}var m=e.o(`selectable-box`,l,t=>e.d`<template>
+		></${a}>`)} `}var m=e.o(`selectable-box`,l,t=>e.d`<template>
 		<div
 			class="${u}"
 			tabindex="${e=>e.clickableBox&&!e.disabled?`0`:null}"

package/selectable-box/index.js

@@ -1,12 +1,12 @@
 import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
 import { t as a } from "../bundled/when.js";
+import { n as o } from "../bundled/enums.js";
 import "../bundled/definition2.js";
-import { t as o } from "../bundled/decorate.js";
-import { t as s } from "../bundled/class-names.js";
+import { t as s } from "../bundled/decorate.js";
 import { n as c, t as l } from "../bundled/delegates-aria.js";
-import { n as u } from "../bundled/enums.js";
-import { r as d, t as f } from "../bundled/definition11.js";
-import { r as p, t as m } from "../bundled/definition17.js";
+import { t as u } from "../bundled/class-names.js";
+import { r as d, t as f } from "../bundled/definition15.js";
+import { r as p, t as m } from "../bundled/definition16.js";
 //#region src/lib/selectable-box/selectable-box.scss?inline
 var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:var(--vvd-selectable-box-cta-firm-all,var(--vvd-color-cta-600));--_connotation-color-pale:var(--vvd-selectable-box-cta-pale,var(--vvd-color-cta-300));--_connotation-color-fierce:var(--vvd-selectable-box-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-faint:var(--vvd-selectable-box-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-selectable-box-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-firm-all:var(--vvd-selectable-box-accent-firm-all,var(--vvd-color-neutral-600));--_connotation-color-pale:var(--vvd-selectable-box-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-fierce:var(--vvd-selectable-box-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-faint:var(--vvd-selectable-box-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-soft:var(--vvd-selectable-box-accent-soft,var(--vvd-color-neutral-100))}.base{--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--_connotation-color-firm-all)}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:var(--_connotation-color-pale)}@media (hover:hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm-all);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:var(--_connotation-color-firm-all)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:var(--vvd-color-neutral-100)}.base{--control-offset:calc(var(--selectable-box-spacing,16px) + 36px);padding:var(--selectable-box-spacing,16px);border:1px solid var(--_appearance-color-outline);background-color:var(--_appearance-color-fill);text-align:start;border-radius:8px;inline-size:100%;position:relative}.base.control-placement-end-stacked,.base.control-placement-start-stacked{padding-block-start:var(--control-offset)}.base.control-placement-start{padding-inline-start:var(--control-offset)}.base.control-placement-end{padding-inline-end:var(--control-offset)}.base: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))}.base.tight{min-height:calc(var(--selectable-box-spacing,16px) * 2 + 22px);padding:0;overflow:hidden}.base.selected{background-color:var(--selectable-box-checked-bg,var(--_appearance-color-fill))}.base.clickable{cursor:pointer}.control{position:absolute;inset-block-start:var(--selectable-box-spacing,16px)}.control.start-stacked,.control.start{inset-inline-start:var(--selectable-box-spacing,16px)}.control.end-stacked,.control.end{inset-inline-end:var(--selectable-box-spacing,16px)}", g = class extends l(i) {
 	constructor(...e) {
@@ -19,16 +19,16 @@ var h = ":host{display:flex}.base.connotation-cta{--_connotation-color-firm-all:
 		return this.disabled ? !0 : (e.code === "Space" || e.code === "Enter") && this.clickableBox ? this._handleCheckedChange() : !0;
 	}
 };
-o([t({ mode: "boolean" })], g.prototype, "checked", void 0), o([t({
+s([t({ mode: "boolean" })], g.prototype, "checked", void 0), s([t({
 	attribute: "clickable-box",
 	mode: "boolean"
-})], g.prototype, "clickableBox", void 0), o([t], g.prototype, "connotation", void 0), o([t({ attribute: "control-type" })], g.prototype, "controlType", void 0), o([t({
+})], g.prototype, "clickableBox", void 0), s([t], g.prototype, "connotation", void 0), s([t({ attribute: "control-type" })], g.prototype, "controlType", void 0), s([t({
 	attribute: "control-placement",
 	mode: "fromView"
-})], g.prototype, "controlPlacement", void 0), o([t({ mode: "boolean" })], g.prototype, "tight", void 0), o([t({ mode: "boolean" })], g.prototype, "disabled", void 0);
+})], g.prototype, "controlPlacement", void 0), s([t({ mode: "boolean" })], g.prototype, "tight", void 0), s([t({ mode: "boolean" })], g.prototype, "disabled", void 0);
 //#endregion
 //#region src/lib/selectable-box/selectable-box.template.ts
-var _ = ({ connotation: e, tight: t, checked: n, clickableBox: r, controlPlacement: i, disabled: a }) => s("base", [`connotation-${e}`, !!e], ["tight", t], ["selected", n], ["clickable", r], ["readonly", !r], [`control-placement-${i}`, !!i], ["disabled", a]);
+var _ = ({ connotation: e, tight: t, checked: n, clickableBox: r, controlPlacement: i, disabled: a }) => u("base", [`connotation-${e}`, !!e], ["tight", t], ["selected", n], ["clickable", r], ["readonly", !r], [`control-placement-${i}`, !!i], ["disabled", a]);
 function v(e) {
 	e.clickableBox || e._handleCheckedChange();
 }
@@ -39,7 +39,7 @@ function y(t) {
 			${c({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
 			@change="${(e) => v(e)}"
 			class="control checkbox ${(e) => e.controlPlacement}"
-			connotation="${(e) => e.connotation === "cta" ? u.CTA : u.Accent}"
+			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
 			:checked="${(e) => e.checked}"
 			?disabled="${(e) => e.disabled}"
 			inert="${(e) => e.clickableBox ? !0 : null}"
@@ -52,7 +52,7 @@ function b(t) {
 			${c({ ariaLabel: (e) => !e.clickableBox && e.ariaLabel ? e.ariaLabel : null }, { onlySpecified: !0 })}
 			@change="${(e) => v(e)}"
 			class="control radio ${(e) => e.controlPlacement}"
-			connotation="${(e) => e.connotation === "cta" ? u.CTA : u.Accent}"
+			connotation="${(e) => e.connotation === "cta" ? o.CTA : o.Accent}"
 			:checked="${(e) => e.checked}"
 			?disabled="${(e) => e.disabled}"
 			inert="${(e) => e.clickableBox ? !0 : null}"

package/shared/foundation/test-utilities/fixture.d.ts

@@ -1,4 +1,4 @@
-import { ExecutionContext, HTMLView, ViewTemplate } from '@microsoft/fast-element';
+import { HTMLView, ExecutionContext, ViewTemplate } from '@microsoft/fast-element';
 export interface FixtureOptions {
     document?: Document;
     parent?: HTMLElement;

package/shared/patterns/linkable.d.ts

@@ -1,4 +1,4 @@
-import { TemplateValue, ViewTemplate } from '@microsoft/fast-element';
+import { ViewTemplate, TemplateValue } from '@microsoft/fast-element';
 import { VividElement } from '../foundation/vivid-element/vivid-element';
 import { Constructor, MixinType } from '../utils/mixins';
 import { BoundAriaProperties } from '../aria/delegate-aria-behavior';