@vonage/vivid 4.6.0 → 4.7.0

package/shared/definition43.js

@@ -18,9 +18,9 @@ import { r as repeat } from './repeat.js';
 import { c as classNames } from './class-names.js';
 import { I as Icon } from './icon.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,: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(--_connotation-color-fierce)}.fieldset:where(.hover,: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:where(.disabled,: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:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.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:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.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:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.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:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:100px;outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:100%}slot[name=icon]{font-size:20px}";
+const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:host(:focus-visible){outline:none}:host{display:inline-block;inline-size:300px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.control-wrapper{display:flex;flex-direction:column;gap:4px}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.hover,: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(--_connotation-color-fierce)}.fieldset:where(.hover,: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:where(.disabled,: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:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.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:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.fieldset:where(.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:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.fieldset:where(.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:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.fieldset{display:flex;align-items:center;justify-content:space-between;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-block:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.fieldset:focus-within{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}:host(:not([shape=pill])) .fieldset{border-radius:8px}:host([shape=pill]) .fieldset{border-radius:24px}.popup-wrapper{position:relative}.content-area{display:flex;overflow:hidden;flex:1;flex-direction:column;gap:8px;min-block-size:24px}.tag-row{display:flex;gap:8px;inline-size:100%}.tag-row.contains-only-input:not(:focus-within){display:contents}.tag-wrapper{overflow:hidden}.tag{max-inline-size:100%}input{box-sizing:border-box;flex:1;border:none;background:none;block-size:24px;font:var(--vvd-typography-base);max-inline-size:100%;min-inline-size:100px;outline:none}.contains-only-input input:not(:focus){position:absolute;block-size:0;inline-size:0;min-inline-size:0;opacity:0;pointer-events:none}.listbox{display:flex;flex-direction:column;padding:4px;gap:2px;max-block-size:var(--searchable-select-height, 408px);overflow-y:auto}.empty-message{display:flex;align-items:center;justify-content:center;color:var(--vvd-color-neutral-300);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:100%}slot[name=icon]{font-size:20px}.visually-hidden{position:absolute;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
 
-const optionTagStyles = ".base{--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-soft: var(--vvd-option-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-option-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-option-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-option-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-option-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
+const optionTagStyles = ".base{--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--fill-color);block-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--outline-color);color:var(--text-color);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;user-select:none;vertical-align:middle}.base:not(.disabled){--text-color: var(--_connotation-color-contrast);--fill-color: color-mix( in srgb, var(--_connotation-color-contrast), transparent 87.5% );--outline-color: transparent}.base.disabled{--text-color: var(--vvd-color-neutral-300);--fill-color: color-mix( in srgb, var(--vvd-color-neutral-800), transparent 87.5% );--outline-color: transparent}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5);line-height:1}.icon-placeholder{inline-size:calc(calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 1.5)}.remove-button{display:flex;align-items:center;border-radius:inherit;cursor:pointer;outline:none}.disabled .remove-button{pointer-events:none}.remove-button:focus-visible:before{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
 class _SearchableSelect extends FoundationElement {
 }
@@ -87,13 +87,8 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
     this._filteredOptions = [];
     this._filteredEnabledOptions = [];
     __privateAdd(this, _suppressFilter, false);
-    // --- Highlighted option (visual focus) ---
-    /**
-     * Currently visually highlighted option as an index into _filteredEnabledOptions
-     * @internal
-     */
     this._highlightedOptionIndex = null;
-    this._numEllidedTags = 0;
+    this._numElidedTags = 0;
     this._tagRows = [];
     this._lastTagRow = [];
     this.clearable = false;
@@ -103,11 +98,20 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
       }
       super.setFormValue(value, state);
     };
+    this._changeDescription = "";
     // --- Core ---
     __privateAdd(this, _resizeObserver, new ResizeObserver(() => {
       __privateMethod(this, _SearchableSelect_instances, updateTagLayout_fn).call(this);
     }));
   }
+  /**
+   * @internal
+   */
+  openChanged() {
+    if (!this.open) {
+      __privateMethod(this, _SearchableSelect_instances, transitionHighlightedOptionTo_fn).call(this, null);
+    }
+  }
   /**
    * @internal
    */
@@ -217,6 +221,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
         this._inputValue = __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.values[0]);
       }
     }
+    this._changeDescription = "";
   }
   /**
    * @internal
@@ -480,22 +485,24 @@ updateSelectedOnSlottedOptions_fn = function() {
 handleOptionInteraction_fn = function(option) {
   const value = option.value;
   let newValues;
+  const isSelection = !this.values.includes(value);
   if (this.multiple) {
-    if (!this.values.includes(value)) {
+    if (isSelection) {
       newValues = [...this.values, value];
     } else {
       newValues = this.values.filter((option2) => option2 !== value);
     }
     this._inputValue = "";
   } else {
-    if (this.values.includes(value)) {
-      newValues = [];
-    } else {
+    if (isSelection) {
       newValues = [value];
       this._inputValue = option.text;
+    } else {
+      newValues = [];
     }
     this.open = false;
   }
+  this._changeDescription = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
   __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, newValues);
 };
 _clonedTagIcons = new WeakMap();
@@ -561,6 +568,11 @@ transitionHighlightedOptionTo_fn = function(index) {
     const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
     highlightedOption._highlighted = true;
     scrollIntoView(highlightedOption, this._listbox, "nearest");
+    this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
+      highlightedOption.text,
+      this._highlightedOptionIndex + 1,
+      this._filteredEnabledOptions.length
+    );
   }
 };
 selectHighlightedOption_fn = function() {
@@ -609,13 +621,13 @@ measureTagWidth_fn = function(label, removable, hasIcon) {
 };
 updateTagLayout_fn = function() {
   if (!this.multiple) {
-    this._numEllidedTags = 0;
+    this._numElidedTags = 0;
     this._tagRows = [];
     this._lastTagRow = [];
     return;
   }
   if (this.externalTags) {
-    this._numEllidedTags = this.values.length;
+    this._numElidedTags = this.values.length;
     this._tagRows = [];
     this._lastTagRow = [];
     return;
@@ -659,12 +671,12 @@ updateTagLayout_fn = function() {
     rows[currentRowIndex].unshift(entry);
     currentRowWidth += TagGapPx + tagWidth;
   }
-  this._numEllidedTags = i + 1;
+  this._numElidedTags = i + 1;
   rows.reverse();
   for (let i2 = 0; i2 < rows.length - 1; i2++) {
     let lineWidth = rows[i2].map((e) => e.width).reduce((a, b) => a + b, 0) + (rows[i2].length - 1) * TagGapPx;
-    if (i2 === 0 && this._numEllidedTags) {
-      lineWidth += TagGapPx + __privateMethod(this, _SearchableSelect_instances, measureTagWidth_fn).call(this, this._numEllidedTags.toString(), false, false);
+    if (i2 === 0 && this._numElidedTags) {
+      lineWidth += TagGapPx + __privateMethod(this, _SearchableSelect_instances, measureTagWidth_fn).call(this, this._numElidedTags.toString(), false, false);
     }
     while (rows[i2 + 1].length && lineWidth + TagGapPx + rows[i2 + 1][0].width <= rowWidth) {
       const nextTag = rows[i2 + 1].shift();
@@ -680,7 +692,7 @@ moveTagFocusTo_fn = function(index) {
   if (index === null) {
     this._input.focus();
   } else {
-    this.shadowRoot.querySelector(`[data-index="${index}"]`).focus();
+    this.shadowRoot.querySelector(`[data-index="${index}"]`)?.focus();
   }
 };
 nextTagIndexLeft_fn = function(index) {
@@ -769,12 +781,15 @@ __decorateClass$1([
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
+__decorateClass$1([
+  observable
+], SearchableSelect.prototype, "_highlightedOptionIndex", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_contentArea", 2);
 __decorateClass$1([
   observable
-], SearchableSelect.prototype, "_numEllidedTags", 2);
+], SearchableSelect.prototype, "_numElidedTags", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_tagRows", 2);
@@ -787,6 +802,9 @@ __decorateClass$1([
 __decorateClass$1([
   attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "clearable", 2);
+__decorateClass$1([
+  observable
+], SearchableSelect.prototype, "_changeDescription", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_anchor", 2);
@@ -873,13 +891,13 @@ const tagTemplateFactory = (context, getComponent) => {
 		</div>
 	`;
 };
-const ellidedTagTemplateFactory = (context, getComponent) => {
+const elidedTagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
   return html`
 		<${optionTagTag}
 			class="tag"
 			tabindex="-1"
-			:label="${(x, c) => getComponent(x, c)._numEllidedTags.toString()}"
+			:label="${(x, c) => getComponent(x, c)._numElidedTags.toString()}"
 			:shape="${(x, c) => getComponent(x, c).shape}"
 			?disabled="${(x, c) => getComponent(x, c).disabled}"
 			@mousedown="${() => false}">
@@ -895,8 +913,8 @@ function renderFieldset(context) {
     context,
     (c) => c.parentContext.parent
   );
-  const ellidedTagTemplate = ellidedTagTemplateFactory(context, (x, _) => x);
-  const nestedEllidedTagTemplate = ellidedTagTemplateFactory(
+  const elidedTagTemplate = elidedTagTemplateFactory(context, (x, _) => x);
+  const nestedElidedTagTemplate = elidedTagTemplateFactory(
     context,
     (_, c) => c.parent
   );
@@ -913,8 +931,8 @@ function renderFieldset(context) {
     html`
 						<div class="tag-row">
 							${when(
-      (_, c) => c.isFirst && c.parent._numEllidedTags,
-      nestedEllidedTagTemplate
+      (_, c) => c.isFirst && c.parent._numElidedTags,
+      nestedElidedTagTemplate
     )}
 							${repeat((x) => x, nestedTagTemplate)}
 						</div>
@@ -928,8 +946,8 @@ function renderFieldset(context) {
   ])}"
 				>
 					${when(
-    (x) => x._tagRows.length === 0 && x._numEllidedTags,
-    ellidedTagTemplate
+    (x) => x._tagRows.length === 0 && x._numElidedTags,
+    elidedTagTemplate
   )}
 					${repeat((x) => x._lastTagRow, tagTemplate)}
 					<input
@@ -937,10 +955,10 @@ function renderFieldset(context) {
 						class="control"
 						autofocus
 						autocomplete="off"
-						aria-autocomplete="${(x) => x.ariaAutoComplete}"
-						aria-disabled="${(x) => x.ariaDisabled}"
-						aria-expanded="${(x) => x.ariaExpanded}"
+						aria-autocomplete="list"
+						aria-expanded="${(x) => x.open}"
 						aria-haspopup="listbox"
+						aria-controls="listbox"
 						placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
 						role="combobox"
 						type="text"
@@ -965,7 +983,7 @@ function renderFieldset(context) {
 					:shape="${(x) => x.shape}"
 					size="super-condensed"
 					icon="close-line"
-					variant="ghost"
+					appearance="ghost-light"
 					tabindex="-1"
 				></${buttonTag}>`
   )}
@@ -977,6 +995,9 @@ function renderControl(context) {
   const popupTag = context.tagFor(Popup);
   return html`
 		${when((x) => x.label, renderLabel())}
+		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
+			${(x) => x._changeDescription}
+		</span>
 		<div>
 			${renderFieldset(context)}
 			<div class="popup-wrapper">
@@ -989,6 +1010,8 @@ function renderControl(context) {
 					<div
 						class="listbox"
 						role="listbox"
+						aria-multiselectable="${(x) => x.multiple}"
+						aria-required="${(x) => x.required}"
 						${ref("_listbox")}
 						@click="${(x, c) => x._onListboxClick(c.event)}"
 						@mousedown="${() => false}"

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Thu, 03 Oct 2024 10:57:19 GMT
+ * Generated on Mon, 07 Oct 2024 13:48:37 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {