@vonage/vivid 4.6.0 → 4.7.0

package/custom-elements.json

@@ -6064,10 +6064,6 @@
       "kind": "javascript-module",
       "path": "libs/components/src/lib/dialog/dialog.ts",
       "declarations": [
-        {
-          "kind": "variable",
-          "name": "isDialogSupported"
-        },
         {
           "kind": "class",
           "description": "",
@@ -6342,14 +6338,6 @@
         }
       ],
       "exports": [
-        {
-          "kind": "js",
-          "name": "isDialogSupported",
-          "declaration": {
-            "name": "isDialogSupported",
-            "module": "libs/components/src/lib/dialog/dialog.ts"
-          }
-        },
         {
           "kind": "js",
           "name": "Dialog",
@@ -11992,30 +11980,6 @@
             {
               "name": "--vvd-option-tag-accent-contrast",
               "default": "var(--vvd-color-neutral-800)"
-            },
-            {
-              "name": "--vvd-option-tag-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
-            },
-            {
-              "name": "--vvd-option-tag-accent-pale",
-              "default": "var(--vvd-color-neutral-300)"
-            },
-            {
-              "name": "--vvd-option-tag-accent-fierce",
-              "default": "var(--vvd-color-neutral-700)"
-            },
-            {
-              "name": "--vvd-option-tag-accent-firm-all",
-              "default": "var(--vvd-color-neutral-600)"
-            },
-            {
-              "name": "--vvd-option-tag-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
-            },
-            {
-              "name": "--vvd-option-tag-accent-dim",
-              "default": "var(--vvd-color-neutral-200)"
             }
           ],
           "members": [

package/lib/dialog/dialog.d.ts

@@ -1,6 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { Localized } from '../../shared/patterns';
-export declare const isDialogSupported: boolean;
 export type IconPlacement = 'top' | 'side';
 export declare class Dialog extends FoundationElement {
     #private;

package/lib/searchable-select/locale.d.ts

@@ -3,4 +3,7 @@ export interface SearchableSelectLocale {
     noOptionsMessage: string;
     noMatchesMessage: string;
     removeTagButtonLabel: (label: string) => string;
+    optionSelectedMessage: (name: string) => string;
+    optionDeselectedMessage: (name: string) => string;
+    optionFocusedMessage: (name: string, position: number, total: number) => string;
 }

package/locales/de-DE.cjs

@@ -334,6 +334,18 @@ const deDE = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} entfernen`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} ausgewählt.`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} entfernt.`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `Option ${name} fokussiert, ${position} von ${total}.`
     )
   }
 };

package/locales/de-DE.js

@@ -332,6 +332,18 @@ const deDE = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} entfernen`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} ausgewählt.`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} entfernt.`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `Option ${name} fokussiert, ${position} von ${total}.`
     )
   }
 };

package/locales/en-GB.cjs

@@ -166,6 +166,18 @@ const enGB = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `Remove ${label}`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} selected.`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} deselected.`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `Option ${name} focused, ${position} of ${total}.`
     )
   }
 };

package/locales/en-GB.js

@@ -164,6 +164,18 @@ const enGB = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `Remove ${label}`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} selected.`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} deselected.`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `Option ${name} focused, ${position} of ${total}.`
     )
   }
 };

package/locales/en-US.cjs

@@ -334,6 +334,18 @@ const enUS = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `Remove ${label}`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} selected.`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} deselected.`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `Option ${name} focused, ${position} of ${total}.`
     )
   }
 };

package/locales/en-US.js

@@ -332,6 +332,18 @@ const enUS = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `Remove ${label}`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} selected.`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `Option ${name} deselected.`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `Option ${name} focused, ${position} of ${total}.`
     )
   }
 };

package/locales/ja-JP.cjs

@@ -333,6 +333,18 @@ const jaJP = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label}を削除`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `オプション ${name} が選択されました。`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `オプション ${name} が選択解除されました。`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `オプション ${name} がフォーカスされました。${position}/${total}`
     )
   }
 };

package/locales/ja-JP.js

@@ -331,6 +331,18 @@ const jaJP = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label}を削除`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `オプション ${name} が選択されました。`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `オプション ${name} が選択解除されました。`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `オプション ${name} がフォーカスされました。${position}/${total}`
     )
   }
 };

package/locales/zh-CN.cjs

@@ -335,6 +335,18 @@ const zhCN = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} 删除`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `选项 ${name} 已选择。`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `选项 ${name} 已取消选择。`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `选项 ${name} 已聚焦, ${position} 的 ${total}。`
     )
   }
 };

package/locales/zh-CN.js

@@ -333,6 +333,18 @@ const zhCN = {
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} 删除`
+    ),
+    optionSelectedMessage: (
+      /* istanbul ignore next */
+      (name) => `选项 ${name} 已选择。`
+    ),
+    optionDeselectedMessage: (
+      /* istanbul ignore next */
+      (name) => `选项 ${name} 已取消选择。`
+    ),
+    optionFocusedMessage: (
+      /* istanbul ignore next */
+      (name, position, total) => `选项 ${name} 已聚焦, ${position} 的 ${total}。`
     )
   }
 };

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.6.0",
+	"version": "4.7.0",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/definition21.cjs

@@ -12,8 +12,6 @@ const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:#0000001a}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}";
-
 const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{position:fixed;box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{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))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
@@ -25,16 +23,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const isDialogSupported = Boolean(
-  window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal
-);
-let dialogPolyfill;
-(async () => {
-  if (!isDialogSupported) {
-    delete window.HTMLDialogElement;
-    dialogPolyfill = await Promise.resolve().then(() => require('./dialog-polyfill.esm.cjs'));
-  }
-})();
 class Dialog extends index.FoundationElement {
   constructor() {
     super(...arguments);
@@ -86,11 +74,6 @@ class Dialog extends index.FoundationElement {
       this.#dialogElement = this.shadowRoot.querySelector(
         "dialog"
       );
-      if (this.#dialogElement) {
-        if (dialogPolyfill) {
-          dialogPolyfill.registerDialog(this.#dialogElement);
-        }
-      }
     }
     return this.#dialogElement;
   }
@@ -297,7 +280,7 @@ const DialogTemplate = (context) => {
 const dialogDefinition = Dialog.compose({
   baseName: "dialog",
   template: DialogTemplate,
-  styles: isDialogSupported ? [styles] : [styles, dialogPolyfillStyles]
+  styles
 });
 const dialogRegistries = [
   dialogDefinition(),

package/shared/definition21.js

@@ -10,8 +10,6 @@ import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const dialogPolyfillStyles = "dialog{position:absolute;left:0;right:0;width:-moz-fit-content;width:-webkit-fit-content;width:fit-content;height:-moz-fit-content;height:-webkit-fit-content;height:fit-content;margin:auto;border:solid;padding:1em;background:#fff;color:#000;display:block}dialog:not([open]){display:none}dialog+.backdrop{position:fixed;inset:0;background:#0000001a}._dialog_overlay{position:fixed;inset:0}dialog.fixed{position:fixed;top:50%;transform:translateY(-50%)}";
-
 const styles = ".base{white-space:initial;box-sizing:border-box;padding:0;border:none;border-radius:8px;background-color:transparent;color:var(--vvd-color-canvas-text);max-block-size:var(--dialog-max-block-size, calc(100vh - 64px) );max-inline-size:var(--dialog-max-inline-size, var(--_dialog-default-max-inline-size));min-inline-size:var(--dialog-min-inline-size, 280px)}@media not all and (width >= 600px){.base{--_dialog-default-max-inline-size: 90vw}}@media (width >= 600px){.base{--_dialog-default-max-inline-size: 560px}}.base:not(.modal){z-index:var(--dialog-z-index, 1)}.base.modal{position:fixed;box-shadow:0 4px 20px #00000059}.base.modal::backdrop{background-color:var(--vvd-color-canvas-text, currentColor);opacity:.5}.base:focus-visible{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))}.main-wrapper{display:flex;box-sizing:border-box;flex-direction:column;gap:24px;padding-block:24px}.main-wrapper>*{box-sizing:border-box}.header{display:grid;align-items:flex-start;justify-content:space-between;inline-size:100%;padding-inline:24px}.base:not(.icon-placement-side) .header{grid-template-columns:1fr auto;grid-template-rows:auto auto auto}.base:not(.icon-placement-side) .header .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));grid-column:1/2;grid-row:1/2;line-height:1;margin-block-end:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header{grid-template-columns:auto 1fr auto;grid-template-rows:auto auto}.base.icon-placement-side .header .icon{font-size:calc(1px*(28 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base.icon-placement-side .header ::slotted(*),.base.icon-placement-side .header .icon{grid-column:1/2;grid-row:1/-1;margin-inline-end:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.header.border{position:relative}.header.border:after{position:absolute;bottom:-24px;left:0;background-color:var(--vvd-color-neutral-200);block-size:1px;content:\"\";inline-size:100%}.base.hide-body .header.border:after{content:none}.body:not(.full-width){padding-inline:24px}.hide-body .body{display:none}.footer{display:flex;align-items:center;justify-content:space-between;gap:24px;padding-inline:24px}.hide-footer .footer{display:none}.footer .actions{display:flex;align-self:flex-end;gap:8px}.dismiss-button{flex-shrink:0;grid-column:-2/-1;grid-row:1/-1;margin-block-start:-8px;margin-inline:4px -8px}.headline{font:var(--vvd-typography-heading-4)}.subtitle{font:var(--vvd-typography-base)}slot[name=main]{display:block;overflow:hidden auto;max-width:inherit;max-height:inherit;border-radius:inherit}";
 
 var __defProp = Object.defineProperty;
@@ -23,16 +21,6 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-const isDialogSupported = Boolean(
-  window.HTMLDialogElement && window.HTMLDialogElement.prototype.showModal
-);
-let dialogPolyfill;
-(async () => {
-  if (!isDialogSupported) {
-    delete window.HTMLDialogElement;
-    dialogPolyfill = await import('./dialog-polyfill.esm.js');
-  }
-})();
 class Dialog extends FoundationElement {
   constructor() {
     super(...arguments);
@@ -84,11 +72,6 @@ class Dialog extends FoundationElement {
       this.#dialogElement = this.shadowRoot.querySelector(
         "dialog"
       );
-      if (this.#dialogElement) {
-        if (dialogPolyfill) {
-          dialogPolyfill.registerDialog(this.#dialogElement);
-        }
-      }
     }
     return this.#dialogElement;
   }
@@ -295,7 +278,7 @@ const DialogTemplate = (context) => {
 const dialogDefinition = Dialog.compose({
   baseName: "dialog",
   template: DialogTemplate,
-  styles: isDialogSupported ? [styles] : [styles, dialogPolyfillStyles]
+  styles
 });
 const dialogRegistries = [
   dialogDefinition(),

package/shared/definition43.cjs

@@ -20,9 +20,9 @@ const repeat = require('./repeat.cjs');
 const classNames = require('./class-names.cjs');
 const icon = require('./icon.cjs');
 
-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 index.FoundationElement {
 }
@@ -89,13 +89,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;
@@ -105,11 +100,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
    */
@@ -219,6 +223,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
         this._inputValue = __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.values[0]);
       }
     }
+    this._changeDescription = "";
   }
   /**
    * @internal
@@ -482,22 +487,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();
@@ -563,6 +570,11 @@ transitionHighlightedOptionTo_fn = function(index) {
     const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
     highlightedOption._highlighted = true;
     scrollIntoView.scrollIntoView(highlightedOption, this._listbox, "nearest");
+    this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
+      highlightedOption.text,
+      this._highlightedOptionIndex + 1,
+      this._filteredEnabledOptions.length
+    );
   }
 };
 selectHighlightedOption_fn = function() {
@@ -611,13 +623,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;
@@ -661,12 +673,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();
@@ -682,7 +694,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) {
@@ -771,12 +783,15 @@ __decorateClass$1([
 __decorateClass$1([
   index.observable
 ], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
+__decorateClass$1([
+  index.observable
+], SearchableSelect.prototype, "_highlightedOptionIndex", 2);
 __decorateClass$1([
   index.observable
 ], SearchableSelect.prototype, "_contentArea", 2);
 __decorateClass$1([
   index.observable
-], SearchableSelect.prototype, "_numEllidedTags", 2);
+], SearchableSelect.prototype, "_numElidedTags", 2);
 __decorateClass$1([
   index.observable
 ], SearchableSelect.prototype, "_tagRows", 2);
@@ -789,6 +804,9 @@ __decorateClass$1([
 __decorateClass$1([
   index.attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "clearable", 2);
+__decorateClass$1([
+  index.observable
+], SearchableSelect.prototype, "_changeDescription", 2);
 __decorateClass$1([
   index.observable
 ], SearchableSelect.prototype, "_anchor", 2);
@@ -875,13 +893,13 @@ const tagTemplateFactory = (context, getComponent) => {
 		</div>
 	`;
 };
-const ellidedTagTemplateFactory = (context, getComponent) => {
+const elidedTagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
   return index.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}">
@@ -897,8 +915,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
   );
@@ -915,8 +933,8 @@ function renderFieldset(context) {
     index.html`
 						<div class="tag-row">
 							${when.when(
-      (_, c) => c.isFirst && c.parent._numEllidedTags,
-      nestedEllidedTagTemplate
+      (_, c) => c.isFirst && c.parent._numElidedTags,
+      nestedElidedTagTemplate
     )}
 							${repeat.repeat((x) => x, nestedTagTemplate)}
 						</div>
@@ -930,8 +948,8 @@ function renderFieldset(context) {
   ])}"
 				>
 					${when.when(
-    (x) => x._tagRows.length === 0 && x._numEllidedTags,
-    ellidedTagTemplate
+    (x) => x._tagRows.length === 0 && x._numElidedTags,
+    elidedTagTemplate
   )}
 					${repeat.repeat((x) => x._lastTagRow, tagTemplate)}
 					<input
@@ -939,10 +957,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"
@@ -967,7 +985,7 @@ function renderFieldset(context) {
 					:shape="${(x) => x.shape}"
 					size="super-condensed"
 					icon="close-line"
-					variant="ghost"
+					appearance="ghost-light"
 					tabindex="-1"
 				></${buttonTag}>`
   )}
@@ -979,6 +997,9 @@ function renderControl(context) {
   const popupTag = context.tagFor(definition.Popup);
   return index.html`
 		${when.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">
@@ -991,6 +1012,8 @@ function renderControl(context) {
 					<div
 						class="listbox"
 						role="listbox"
+						aria-multiselectable="${(x) => x.multiple}"
+						aria-required="${(x) => x.required}"
 						${ref.ref("_listbox")}
 						@click="${(x, c) => x._onListboxClick(c.event)}"
 						@mousedown="${() => false}"