@vonage/vivid 4.6.0 → 4.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (38) hide show
  1. package/custom-elements.json +0 -36
  2. package/lib/dialog/dialog.d.ts +0 -1
  3. package/lib/searchable-select/locale.d.ts +3 -0
  4. package/locales/de-DE.cjs +12 -0
  5. package/locales/de-DE.js +12 -0
  6. package/locales/en-GB.cjs +12 -0
  7. package/locales/en-GB.js +12 -0
  8. package/locales/en-US.cjs +12 -0
  9. package/locales/en-US.js +12 -0
  10. package/locales/ja-JP.cjs +12 -0
  11. package/locales/ja-JP.js +12 -0
  12. package/locales/zh-CN.cjs +12 -0
  13. package/locales/zh-CN.js +12 -0
  14. package/package.json +1 -1
  15. package/shared/definition11.cjs +1 -1
  16. package/shared/definition11.js +1 -1
  17. package/shared/definition17.cjs +1 -1
  18. package/shared/definition17.js +1 -1
  19. package/shared/definition21.cjs +1 -18
  20. package/shared/definition21.js +1 -18
  21. package/shared/definition36.cjs +1 -1
  22. package/shared/definition36.js +1 -1
  23. package/shared/definition43.cjs +54 -31
  24. package/shared/definition43.js +54 -31
  25. package/shared/definition44.cjs +7 -0
  26. package/shared/definition44.js +7 -0
  27. package/shared/definition48.cjs +1 -1
  28. package/shared/definition48.js +1 -1
  29. package/shared/definition6.cjs +1 -1
  30. package/shared/definition6.js +1 -1
  31. package/styles/core/all.css +1 -1
  32. package/styles/core/theme.css +1 -1
  33. package/styles/core/typography.css +1 -1
  34. package/styles/tokens/theme-dark.css +4 -4
  35. package/styles/tokens/theme-light.css +4 -4
  36. package/styles/tokens/vivid-2-compat.css +1 -1
  37. package/shared/dialog-polyfill.esm.cjs +0 -862
  38. package/shared/dialog-polyfill.esm.js +0 -858
package/shared/definition36.cjs CHANGED
@@ -111,7 +111,7 @@ const ListboxOptionTemplate = (context) => {
111
111
  `;
112
112
  };
113
113
 
114
- const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--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))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:20px}";
114
+ const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--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))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
115
115
 
116
116
  const listboxOptionDefinition = ListboxOption.compose({
117
117
  baseName: "option",
package/shared/definition36.js CHANGED
@@ -109,7 +109,7 @@ const ListboxOptionTemplate = (context) => {
109
109
  `;
110
110
  };
111
111
 
112
- const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;vertical-align:middle;word-break:break-word}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--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))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:20px}";
112
+ const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--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))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
113
113
 
114
114
  const listboxOptionDefinition = ListboxOption.compose({
115
115
  baseName: "option",
package/shared/definition43.cjs CHANGED
@@ -20,9 +20,9 @@ const repeat = require('./repeat.cjs');
20
20
  const classNames = require('./class-names.cjs');
21
21
  const icon = require('./icon.cjs');
22
22
 
23
- 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}";
23
+ 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}";
24
24
 
25
- 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}";
25
+ 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}";
26
26
 
27
27
  class _SearchableSelect extends index.FoundationElement {
28
28
  }
@@ -89,13 +89,8 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
89
89
  this._filteredOptions = [];
90
90
  this._filteredEnabledOptions = [];
91
91
  __privateAdd(this, _suppressFilter, false);
92
- // --- Highlighted option (visual focus) ---
93
- /**
94
- * Currently visually highlighted option as an index into _filteredEnabledOptions
95
- * @internal
96
- */
97
92
  this._highlightedOptionIndex = null;
98
- this._numEllidedTags = 0;
93
+ this._numElidedTags = 0;
99
94
  this._tagRows = [];
100
95
  this._lastTagRow = [];
101
96
  this.clearable = false;
@@ -105,11 +100,20 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
105
100
  }
106
101
  super.setFormValue(value, state);
107
102
  };
103
+ this._changeDescription = "";
108
104
  // --- Core ---
109
105
  __privateAdd(this, _resizeObserver, new ResizeObserver(() => {
110
106
  __privateMethod(this, _SearchableSelect_instances, updateTagLayout_fn).call(this);
111
107
  }));
112
108
  }
109
+ /**
110
+ * @internal
111
+ */
112
+ openChanged() {
113
+ if (!this.open) {
114
+ __privateMethod(this, _SearchableSelect_instances, transitionHighlightedOptionTo_fn).call(this, null);
115
+ }
116
+ }
113
117
  /**
114
118
  * @internal
115
119
  */
@@ -219,6 +223,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
219
223
  this._inputValue = __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.values[0]);
220
224
  }
221
225
  }
226
+ this._changeDescription = "";
222
227
  }
223
228
  /**
224
229
  * @internal
@@ -482,22 +487,24 @@ updateSelectedOnSlottedOptions_fn = function() {
482
487
  handleOptionInteraction_fn = function(option) {
483
488
  const value = option.value;
484
489
  let newValues;
490
+ const isSelection = !this.values.includes(value);
485
491
  if (this.multiple) {
486
- if (!this.values.includes(value)) {
492
+ if (isSelection) {
487
493
  newValues = [...this.values, value];
488
494
  } else {
489
495
  newValues = this.values.filter((option2) => option2 !== value);
490
496
  }
491
497
  this._inputValue = "";
492
498
  } else {
493
- if (this.values.includes(value)) {
494
- newValues = [];
495
- } else {
499
+ if (isSelection) {
496
500
  newValues = [value];
497
501
  this._inputValue = option.text;
502
+ } else {
503
+ newValues = [];
498
504
  }
499
505
  this.open = false;
500
506
  }
507
+ this._changeDescription = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
501
508
  __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, newValues);
502
509
  };
503
510
  _clonedTagIcons = new WeakMap();
@@ -563,6 +570,11 @@ transitionHighlightedOptionTo_fn = function(index) {
563
570
  const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
564
571
  highlightedOption._highlighted = true;
565
572
  scrollIntoView.scrollIntoView(highlightedOption, this._listbox, "nearest");
573
+ this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
574
+ highlightedOption.text,
575
+ this._highlightedOptionIndex + 1,
576
+ this._filteredEnabledOptions.length
577
+ );
566
578
  }
567
579
  };
568
580
  selectHighlightedOption_fn = function() {
@@ -611,13 +623,13 @@ measureTagWidth_fn = function(label, removable, hasIcon) {
611
623
  };
612
624
  updateTagLayout_fn = function() {
613
625
  if (!this.multiple) {
614
- this._numEllidedTags = 0;
626
+ this._numElidedTags = 0;
615
627
  this._tagRows = [];
616
628
  this._lastTagRow = [];
617
629
  return;
618
630
  }
619
631
  if (this.externalTags) {
620
- this._numEllidedTags = this.values.length;
632
+ this._numElidedTags = this.values.length;
621
633
  this._tagRows = [];
622
634
  this._lastTagRow = [];
623
635
  return;
@@ -661,12 +673,12 @@ updateTagLayout_fn = function() {
661
673
  rows[currentRowIndex].unshift(entry);
662
674
  currentRowWidth += TagGapPx + tagWidth;
663
675
  }
664
- this._numEllidedTags = i + 1;
676
+ this._numElidedTags = i + 1;
665
677
  rows.reverse();
666
678
  for (let i2 = 0; i2 < rows.length - 1; i2++) {
667
679
  let lineWidth = rows[i2].map((e) => e.width).reduce((a, b) => a + b, 0) + (rows[i2].length - 1) * TagGapPx;
668
- if (i2 === 0 && this._numEllidedTags) {
669
- lineWidth += TagGapPx + __privateMethod(this, _SearchableSelect_instances, measureTagWidth_fn).call(this, this._numEllidedTags.toString(), false, false);
680
+ if (i2 === 0 && this._numElidedTags) {
681
+ lineWidth += TagGapPx + __privateMethod(this, _SearchableSelect_instances, measureTagWidth_fn).call(this, this._numElidedTags.toString(), false, false);
670
682
  }
671
683
  while (rows[i2 + 1].length && lineWidth + TagGapPx + rows[i2 + 1][0].width <= rowWidth) {
672
684
  const nextTag = rows[i2 + 1].shift();
@@ -682,7 +694,7 @@ moveTagFocusTo_fn = function(index) {
682
694
  if (index === null) {
683
695
  this._input.focus();
684
696
  } else {
685
- this.shadowRoot.querySelector(`[data-index="${index}"]`).focus();
697
+ this.shadowRoot.querySelector(`[data-index="${index}"]`)?.focus();
686
698
  }
687
699
  };
688
700
  nextTagIndexLeft_fn = function(index) {
@@ -771,12 +783,15 @@ __decorateClass$1([
771
783
  __decorateClass$1([
772
784
  index.observable
773
785
  ], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
786
+ __decorateClass$1([
787
+ index.observable
788
+ ], SearchableSelect.prototype, "_highlightedOptionIndex", 2);
774
789
  __decorateClass$1([
775
790
  index.observable
776
791
  ], SearchableSelect.prototype, "_contentArea", 2);
777
792
  __decorateClass$1([
778
793
  index.observable
779
- ], SearchableSelect.prototype, "_numEllidedTags", 2);
794
+ ], SearchableSelect.prototype, "_numElidedTags", 2);
780
795
  __decorateClass$1([
781
796
  index.observable
782
797
  ], SearchableSelect.prototype, "_tagRows", 2);
@@ -789,6 +804,9 @@ __decorateClass$1([
789
804
  __decorateClass$1([
790
805
  index.attr({ mode: "boolean" })
791
806
  ], SearchableSelect.prototype, "clearable", 2);
807
+ __decorateClass$1([
808
+ index.observable
809
+ ], SearchableSelect.prototype, "_changeDescription", 2);
792
810
  __decorateClass$1([
793
811
  index.observable
794
812
  ], SearchableSelect.prototype, "_anchor", 2);
@@ -875,13 +893,13 @@ const tagTemplateFactory = (context, getComponent) => {
875
893
  </div>
876
894
  `;
877
895
  };
878
- const ellidedTagTemplateFactory = (context, getComponent) => {
896
+ const elidedTagTemplateFactory = (context, getComponent) => {
879
897
  const optionTagTag = context.tagFor(OptionTag);
880
898
  return index.html`
881
899
  <${optionTagTag}
882
900
  class="tag"
883
901
  tabindex="-1"
884
- :label="${(x, c) => getComponent(x, c)._numEllidedTags.toString()}"
902
+ :label="${(x, c) => getComponent(x, c)._numElidedTags.toString()}"
885
903
  :shape="${(x, c) => getComponent(x, c).shape}"
886
904
  ?disabled="${(x, c) => getComponent(x, c).disabled}"
887
905
  @mousedown="${() => false}">
@@ -897,8 +915,8 @@ function renderFieldset(context) {
897
915
  context,
898
916
  (c) => c.parentContext.parent
899
917
  );
900
- const ellidedTagTemplate = ellidedTagTemplateFactory(context, (x, _) => x);
901
- const nestedEllidedTagTemplate = ellidedTagTemplateFactory(
918
+ const elidedTagTemplate = elidedTagTemplateFactory(context, (x, _) => x);
919
+ const nestedElidedTagTemplate = elidedTagTemplateFactory(
902
920
  context,
903
921
  (_, c) => c.parent
904
922
  );
@@ -915,8 +933,8 @@ function renderFieldset(context) {
915
933
  index.html`
916
934
  <div class="tag-row">
917
935
  ${when.when(
918
- (_, c) => c.isFirst && c.parent._numEllidedTags,
919
- nestedEllidedTagTemplate
936
+ (_, c) => c.isFirst && c.parent._numElidedTags,
937
+ nestedElidedTagTemplate
920
938
  )}
921
939
  ${repeat.repeat((x) => x, nestedTagTemplate)}
922
940
  </div>
@@ -930,8 +948,8 @@ function renderFieldset(context) {
930
948
  ])}"
931
949
  >
932
950
  ${when.when(
933
- (x) => x._tagRows.length === 0 && x._numEllidedTags,
934
- ellidedTagTemplate
951
+ (x) => x._tagRows.length === 0 && x._numElidedTags,
952
+ elidedTagTemplate
935
953
  )}
936
954
  ${repeat.repeat((x) => x._lastTagRow, tagTemplate)}
937
955
  <input
@@ -939,10 +957,10 @@ function renderFieldset(context) {
939
957
  class="control"
940
958
  autofocus
941
959
  autocomplete="off"
942
- aria-autocomplete="${(x) => x.ariaAutoComplete}"
943
- aria-disabled="${(x) => x.ariaDisabled}"
944
- aria-expanded="${(x) => x.ariaExpanded}"
960
+ aria-autocomplete="list"
961
+ aria-expanded="${(x) => x.open}"
945
962
  aria-haspopup="listbox"
963
+ aria-controls="listbox"
946
964
  placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
947
965
  role="combobox"
948
966
  type="text"
@@ -967,7 +985,7 @@ function renderFieldset(context) {
967
985
  :shape="${(x) => x.shape}"
968
986
  size="super-condensed"
969
987
  icon="close-line"
970
- variant="ghost"
988
+ appearance="ghost-light"
971
989
  tabindex="-1"
972
990
  ></${buttonTag}>`
973
991
  )}
@@ -979,6 +997,9 @@ function renderControl(context) {
979
997
  const popupTag = context.tagFor(definition.Popup);
980
998
  return index.html`
981
999
  ${when.when((x) => x.label, renderLabel())}
1000
+ <span aria-live="assertive" aria-relevant="text" class="visually-hidden">
1001
+ ${(x) => x._changeDescription}
1002
+ </span>
982
1003
  <div>
983
1004
  ${renderFieldset(context)}
984
1005
  <div class="popup-wrapper">
@@ -991,6 +1012,8 @@ function renderControl(context) {
991
1012
  <div
992
1013
  class="listbox"
993
1014
  role="listbox"
1015
+ aria-multiselectable="${(x) => x.multiple}"
1016
+ aria-required="${(x) => x.required}"
994
1017
  ${ref.ref("_listbox")}
995
1018
  @click="${(x, c) => x._onListboxClick(c.event)}"
996
1019
  @mousedown="${() => false}"
package/shared/definition43.js CHANGED
@@ -18,9 +18,9 @@ import { r as repeat } from './repeat.js';
18
18
  import { c as classNames } from './class-names.js';
19
19
  import { I as Icon } from './icon.js';
20
20
 
21
- 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}";
21
+ 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}";
22
22
 
23
- 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}";
23
+ 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}";
24
24
 
25
25
  class _SearchableSelect extends FoundationElement {
26
26
  }
@@ -87,13 +87,8 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
87
87
  this._filteredOptions = [];
88
88
  this._filteredEnabledOptions = [];
89
89
  __privateAdd(this, _suppressFilter, false);
90
- // --- Highlighted option (visual focus) ---
91
- /**
92
- * Currently visually highlighted option as an index into _filteredEnabledOptions
93
- * @internal
94
- */
95
90
  this._highlightedOptionIndex = null;
96
- this._numEllidedTags = 0;
91
+ this._numElidedTags = 0;
97
92
  this._tagRows = [];
98
93
  this._lastTagRow = [];
99
94
  this.clearable = false;
@@ -103,11 +98,20 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
103
98
  }
104
99
  super.setFormValue(value, state);
105
100
  };
101
+ this._changeDescription = "";
106
102
  // --- Core ---
107
103
  __privateAdd(this, _resizeObserver, new ResizeObserver(() => {
108
104
  __privateMethod(this, _SearchableSelect_instances, updateTagLayout_fn).call(this);
109
105
  }));
110
106
  }
107
+ /**
108
+ * @internal
109
+ */
110
+ openChanged() {
111
+ if (!this.open) {
112
+ __privateMethod(this, _SearchableSelect_instances, transitionHighlightedOptionTo_fn).call(this, null);
113
+ }
114
+ }
111
115
  /**
112
116
  * @internal
113
117
  */
@@ -217,6 +221,7 @@ let SearchableSelect = class extends FormAssociatedSearchableSelect {
217
221
  this._inputValue = __privateMethod(this, _SearchableSelect_instances, textForValue_fn).call(this, this.values[0]);
218
222
  }
219
223
  }
224
+ this._changeDescription = "";
220
225
  }
221
226
  /**
222
227
  * @internal
@@ -480,22 +485,24 @@ updateSelectedOnSlottedOptions_fn = function() {
480
485
  handleOptionInteraction_fn = function(option) {
481
486
  const value = option.value;
482
487
  let newValues;
488
+ const isSelection = !this.values.includes(value);
483
489
  if (this.multiple) {
484
- if (!this.values.includes(value)) {
490
+ if (isSelection) {
485
491
  newValues = [...this.values, value];
486
492
  } else {
487
493
  newValues = this.values.filter((option2) => option2 !== value);
488
494
  }
489
495
  this._inputValue = "";
490
496
  } else {
491
- if (this.values.includes(value)) {
492
- newValues = [];
493
- } else {
497
+ if (isSelection) {
494
498
  newValues = [value];
495
499
  this._inputValue = option.text;
500
+ } else {
501
+ newValues = [];
496
502
  }
497
503
  this.open = false;
498
504
  }
505
+ this._changeDescription = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
499
506
  __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, newValues);
500
507
  };
501
508
  _clonedTagIcons = new WeakMap();
@@ -561,6 +568,11 @@ transitionHighlightedOptionTo_fn = function(index) {
561
568
  const highlightedOption = this._filteredEnabledOptions[this._highlightedOptionIndex];
562
569
  highlightedOption._highlighted = true;
563
570
  scrollIntoView(highlightedOption, this._listbox, "nearest");
571
+ this._changeDescription = this.locale.searchableSelect.optionFocusedMessage(
572
+ highlightedOption.text,
573
+ this._highlightedOptionIndex + 1,
574
+ this._filteredEnabledOptions.length
575
+ );
564
576
  }
565
577
  };
566
578
  selectHighlightedOption_fn = function() {
@@ -609,13 +621,13 @@ measureTagWidth_fn = function(label, removable, hasIcon) {
609
621
  };
610
622
  updateTagLayout_fn = function() {
611
623
  if (!this.multiple) {
612
- this._numEllidedTags = 0;
624
+ this._numElidedTags = 0;
613
625
  this._tagRows = [];
614
626
  this._lastTagRow = [];
615
627
  return;
616
628
  }
617
629
  if (this.externalTags) {
618
- this._numEllidedTags = this.values.length;
630
+ this._numElidedTags = this.values.length;
619
631
  this._tagRows = [];
620
632
  this._lastTagRow = [];
621
633
  return;
@@ -659,12 +671,12 @@ updateTagLayout_fn = function() {
659
671
  rows[currentRowIndex].unshift(entry);
660
672
  currentRowWidth += TagGapPx + tagWidth;
661
673
  }
662
- this._numEllidedTags = i + 1;
674
+ this._numElidedTags = i + 1;
663
675
  rows.reverse();
664
676
  for (let i2 = 0; i2 < rows.length - 1; i2++) {
665
677
  let lineWidth = rows[i2].map((e) => e.width).reduce((a, b) => a + b, 0) + (rows[i2].length - 1) * TagGapPx;
666
- if (i2 === 0 && this._numEllidedTags) {
667
- lineWidth += TagGapPx + __privateMethod(this, _SearchableSelect_instances, measureTagWidth_fn).call(this, this._numEllidedTags.toString(), false, false);
678
+ if (i2 === 0 && this._numElidedTags) {
679
+ lineWidth += TagGapPx + __privateMethod(this, _SearchableSelect_instances, measureTagWidth_fn).call(this, this._numElidedTags.toString(), false, false);
668
680
  }
669
681
  while (rows[i2 + 1].length && lineWidth + TagGapPx + rows[i2 + 1][0].width <= rowWidth) {
670
682
  const nextTag = rows[i2 + 1].shift();
@@ -680,7 +692,7 @@ moveTagFocusTo_fn = function(index) {
680
692
  if (index === null) {
681
693
  this._input.focus();
682
694
  } else {
683
- this.shadowRoot.querySelector(`[data-index="${index}"]`).focus();
695
+ this.shadowRoot.querySelector(`[data-index="${index}"]`)?.focus();
684
696
  }
685
697
  };
686
698
  nextTagIndexLeft_fn = function(index) {
@@ -769,12 +781,15 @@ __decorateClass$1([
769
781
  __decorateClass$1([
770
782
  observable
771
783
  ], SearchableSelect.prototype, "_filteredEnabledOptions", 2);
784
+ __decorateClass$1([
785
+ observable
786
+ ], SearchableSelect.prototype, "_highlightedOptionIndex", 2);
772
787
  __decorateClass$1([
773
788
  observable
774
789
  ], SearchableSelect.prototype, "_contentArea", 2);
775
790
  __decorateClass$1([
776
791
  observable
777
- ], SearchableSelect.prototype, "_numEllidedTags", 2);
792
+ ], SearchableSelect.prototype, "_numElidedTags", 2);
778
793
  __decorateClass$1([
779
794
  observable
780
795
  ], SearchableSelect.prototype, "_tagRows", 2);
@@ -787,6 +802,9 @@ __decorateClass$1([
787
802
  __decorateClass$1([
788
803
  attr({ mode: "boolean" })
789
804
  ], SearchableSelect.prototype, "clearable", 2);
805
+ __decorateClass$1([
806
+ observable
807
+ ], SearchableSelect.prototype, "_changeDescription", 2);
790
808
  __decorateClass$1([
791
809
  observable
792
810
  ], SearchableSelect.prototype, "_anchor", 2);
@@ -873,13 +891,13 @@ const tagTemplateFactory = (context, getComponent) => {
873
891
  </div>
874
892
  `;
875
893
  };
876
- const ellidedTagTemplateFactory = (context, getComponent) => {
894
+ const elidedTagTemplateFactory = (context, getComponent) => {
877
895
  const optionTagTag = context.tagFor(OptionTag);
878
896
  return html`
879
897
  <${optionTagTag}
880
898
  class="tag"
881
899
  tabindex="-1"
882
- :label="${(x, c) => getComponent(x, c)._numEllidedTags.toString()}"
900
+ :label="${(x, c) => getComponent(x, c)._numElidedTags.toString()}"
883
901
  :shape="${(x, c) => getComponent(x, c).shape}"
884
902
  ?disabled="${(x, c) => getComponent(x, c).disabled}"
885
903
  @mousedown="${() => false}">
@@ -895,8 +913,8 @@ function renderFieldset(context) {
895
913
  context,
896
914
  (c) => c.parentContext.parent
897
915
  );
898
- const ellidedTagTemplate = ellidedTagTemplateFactory(context, (x, _) => x);
899
- const nestedEllidedTagTemplate = ellidedTagTemplateFactory(
916
+ const elidedTagTemplate = elidedTagTemplateFactory(context, (x, _) => x);
917
+ const nestedElidedTagTemplate = elidedTagTemplateFactory(
900
918
  context,
901
919
  (_, c) => c.parent
902
920
  );
@@ -913,8 +931,8 @@ function renderFieldset(context) {
913
931
  html`
914
932
  <div class="tag-row">
915
933
  ${when(
916
- (_, c) => c.isFirst && c.parent._numEllidedTags,
917
- nestedEllidedTagTemplate
934
+ (_, c) => c.isFirst && c.parent._numElidedTags,
935
+ nestedElidedTagTemplate
918
936
  )}
919
937
  ${repeat((x) => x, nestedTagTemplate)}
920
938
  </div>
@@ -928,8 +946,8 @@ function renderFieldset(context) {
928
946
  ])}"
929
947
  >
930
948
  ${when(
931
- (x) => x._tagRows.length === 0 && x._numEllidedTags,
932
- ellidedTagTemplate
949
+ (x) => x._tagRows.length === 0 && x._numElidedTags,
950
+ elidedTagTemplate
933
951
  )}
934
952
  ${repeat((x) => x._lastTagRow, tagTemplate)}
935
953
  <input
@@ -937,10 +955,10 @@ function renderFieldset(context) {
937
955
  class="control"
938
956
  autofocus
939
957
  autocomplete="off"
940
- aria-autocomplete="${(x) => x.ariaAutoComplete}"
941
- aria-disabled="${(x) => x.ariaDisabled}"
942
- aria-expanded="${(x) => x.ariaExpanded}"
958
+ aria-autocomplete="list"
959
+ aria-expanded="${(x) => x.open}"
943
960
  aria-haspopup="listbox"
961
+ aria-controls="listbox"
944
962
  placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
945
963
  role="combobox"
946
964
  type="text"
@@ -965,7 +983,7 @@ function renderFieldset(context) {
965
983
  :shape="${(x) => x.shape}"
966
984
  size="super-condensed"
967
985
  icon="close-line"
968
- variant="ghost"
986
+ appearance="ghost-light"
969
987
  tabindex="-1"
970
988
  ></${buttonTag}>`
971
989
  )}
@@ -977,6 +995,9 @@ function renderControl(context) {
977
995
  const popupTag = context.tagFor(Popup);
978
996
  return html`
979
997
  ${when((x) => x.label, renderLabel())}
998
+ <span aria-live="assertive" aria-relevant="text" class="visually-hidden">
999
+ ${(x) => x._changeDescription}
1000
+ </span>
980
1001
  <div>
981
1002
  ${renderFieldset(context)}
982
1003
  <div class="popup-wrapper">
@@ -989,6 +1010,8 @@ function renderControl(context) {
989
1010
  <div
990
1011
  class="listbox"
991
1012
  role="listbox"
1013
+ aria-multiselectable="${(x) => x.multiple}"
1014
+ aria-required="${(x) => x.required}"
992
1015
  ${ref("_listbox")}
993
1016
  @click="${(x, c) => x._onListboxClick(c.event)}"
994
1017
  @mousedown="${() => false}"
package/shared/definition44.cjs CHANGED
@@ -570,6 +570,13 @@ let Select = class extends Select$1 {
570
570
  */
571
571
  slottedOptionsChanged(prev, next) {
572
572
  super.slottedOptionsChanged(prev, next);
573
+ const scale = this.getAttribute("scale") || this.scale;
574
+ next.forEach((element) => {
575
+ if (scale) {
576
+ element.setAttribute("scale", scale);
577
+ element.scale = scale;
578
+ }
579
+ });
573
580
  this.proxy.value = this.value;
574
581
  this.validate();
575
582
  }
package/shared/definition44.js CHANGED
@@ -568,6 +568,13 @@ let Select = class extends Select$1 {
568
568
  */
569
569
  slottedOptionsChanged(prev, next) {
570
570
  super.slottedOptionsChanged(prev, next);
571
+ const scale = this.getAttribute("scale") || this.scale;
572
+ next.forEach((element) => {
573
+ if (scale) {
574
+ element.setAttribute("scale", scale);
575
+ element.scale = scale;
576
+ }
577
+ });
571
578
  this.proxy.value = this.value;
572
579
  this.validate();
573
580
  }