@vonage/vivid 4.22.0 → 4.24.0

package/shared/definition44.cjs

@@ -7,6 +7,7 @@ const definition$2 = require('./definition38.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const scrollIntoView = require('./scrollIntoView.cjs');
+const delegatesAria = require('./delegates-aria.cjs');
 const formAssociated = require('./form-associated.cjs');
 const affix = require('./affix.cjs');
 const localized = require('./localized.cjs');
@@ -18,7 +19,7 @@ const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 const repeat = require('./repeat.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)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}: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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}: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);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 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 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)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}: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)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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(--vvd-color-neutral-700)}.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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}: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);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 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-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
@@ -50,13 +51,13 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _SearchableSelect_instances, updateValuesThroughUserInteraction_fn, updateValuesWhileMaintainingOrder_fn, isValidValue_fn, _slottedOptionsChangeHandler, updateSelectedOnSlottedOptions_fn, handleOptionInteraction_fn, _clonedTagIcons, tagIconOfOption_fn, updateClonedTagIconOfOption_fn, updateFilteredOptions_fn, transitionHighlightedOptionTo_fn, selectHighlightedOption_fn, highlightFirstOption_fn, highlightLastOption_fn, highlightPrevPage_fn, highlightNextPage_fn, highlightPreviousOption_fn, highlightNextOption_fn, textForValue_fn, measureTagWidth_fn, updateTagLayout_fn, moveTagFocusTo_fn, nextTagIndexLeft_fn, nextTagIndexRight_fn, nextTagIndexForRemoved_fn, determineInitialValues_fn, updateFormValue_fn, _resizeObserver;
+var _SearchableSelect_instances, updateValuesThroughUserInteraction_fn, updateValuesWhileMaintainingOrder_fn, isValidValue_fn, _slottedOptionsChangeHandler, updateSelectedOnSlottedOptions_fn, handleOptionInteraction_fn, _clonedTagIcons, tagIconOfOption_fn, updateClonedTagIconOfOption_fn, updateFilteredOptions_fn, transitionHighlightedOptionTo_fn, selectHighlightedOption_fn, highlightFirstOption_fn, highlightLastOption_fn, highlightPrevPage_fn, highlightNextPage_fn, highlightPreviousOption_fn, highlightNextOption_fn, textForValue_fn, measureTagWidth_fn, updateTagLayout_fn, moveTagFocusTo_fn, nextTagIndexLeft_fn, nextTagIndexRight_fn, nextTagIndexForRemoved_fn, updateSelectionLimit_fn, determineInitialValues_fn, updateFormValue_fn, _resizeObserver;
 const TagGapPx = 8;
 const InputMinWidthPx = 100;
 const PageSize = 10;
 const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
-exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTrailing(
-  localized.Localized(FormAssociatedSearchableSelect)
+exports.SearchableSelect = class SearchableSelect extends delegatesAria.DelegatesAria(
+  affix.AffixIconWithTrailing(localized.Localized(FormAssociatedSearchableSelect))
 ) {
   constructor() {
     super(...arguments);
@@ -93,6 +94,8 @@ exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTra
     this._tagRows = [];
     this._lastTagRow = [];
     this.clearable = false;
+    this.maxSelected = null;
+    this._slottedDisabledOptions = [];
     this.setFormValue = (value, state) => {
       if (isFormAssociatedTryingToSetFormValue(value)) {
         return;
@@ -129,6 +132,7 @@ exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTra
       return;
     }
     this.value = this.values.length ? this.values[0] : "";
+    __privateMethod(this, _SearchableSelect_instances, updateSelectionLimit_fn).call(this);
     __privateMethod(this, _SearchableSelect_instances, updateSelectedOnSlottedOptions_fn).call(this);
     if (this.$fastController.isConnected) {
       __privateMethod(this, _SearchableSelect_instances, updateTagLayout_fn).call(this);
@@ -310,6 +314,7 @@ exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTra
     }
     this._areOptionsInitialized = true;
     if (oldValue) {
+      this._slottedDisabledOptions = [];
       for (const option of oldValue) {
         const notifier = vividElement.Observable.getNotifier(option);
         notifier.unsubscribe(__privateGet(this, _slottedOptionsChangeHandler), "selected");
@@ -327,9 +332,13 @@ exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTra
       if (option.selected || option.value === this.value || this.values.includes(option.value)) {
         values.push(option.value);
       }
+      if (option.disabled) {
+        this._slottedDisabledOptions.push(option);
+      }
     }
     __privateMethod(this, _SearchableSelect_instances, updateValuesWhileMaintainingOrder_fn).call(this, values);
     __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+    __privateMethod(this, _SearchableSelect_instances, updateSelectionLimit_fn).call(this);
   }
   /**
    * @internal
@@ -428,6 +437,12 @@ exports.SearchableSelect = class SearchableSelect extends affix.AffixIconWithTra
   _onClearButtonClick() {
     __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, this.selectedOptions.filter((option) => option.disabled).map((option) => option.value));
   }
+  /**
+   * @internal
+   */
+  maxSelectedChanged() {
+    __privateMethod(this, _SearchableSelect_instances, updateSelectionLimit_fn).call(this);
+  }
   /**
    * @internal
    */
@@ -545,8 +560,13 @@ handleOptionInteraction_fn = function(option) {
     }
     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);
+  const optionMessage = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
+  const maxSelectedMessage = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(
+    this.values.length,
+    this.maxSelected
+  ) : "";
+  this._changeDescription = `${optionMessage} ${maxSelectedMessage}`;
   if (shouldClearSearchText) {
     this._currentSearchText = null;
   }
@@ -757,6 +777,26 @@ nextTagIndexRight_fn = function(index) {
 nextTagIndexForRemoved_fn = function(index) {
   return __privateMethod(this, _SearchableSelect_instances, nextTagIndexRight_fn).call(this, index - 1) ?? __privateMethod(this, _SearchableSelect_instances, nextTagIndexLeft_fn).call(this, index);
 };
+updateSelectionLimit_fn = function() {
+  if (!this.multiple || typeof this.maxSelected !== "number" || this.maxSelected <= 0) {
+    return;
+  }
+  const options = this._slottedOptions.filter(
+    (option) => !this._slottedDisabledOptions.includes(option)
+  );
+  if (this.values.length >= this.maxSelected) {
+    const unselectedOptions = options.filter(
+      (option) => !this.selectedOptions.includes(option)
+    );
+    for (const option of unselectedOptions) {
+      option.disabled = true;
+    }
+  } else {
+    for (const option of options) {
+      option.disabled = false;
+    }
+  }
+};
 // --- Form handling ---
 determineInitialValues_fn = function() {
   return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
@@ -847,6 +887,12 @@ __decorateClass$1([
 __decorateClass$1([
   vividElement.attr({ mode: "boolean" })
 ], exports.SearchableSelect.prototype, "clearable", 2);
+__decorateClass$1([
+  vividElement.attr({ attribute: "max-selected", converter: vividElement.nullableNumberConverter })
+], exports.SearchableSelect.prototype, "maxSelected", 2);
+__decorateClass$1([
+  vividElement.observable
+], exports.SearchableSelect.prototype, "_slottedDisabledOptions", 2);
 __decorateClass$1([
   vividElement.observable
 ], exports.SearchableSelect.prototype, "_changeDescription", 2);
@@ -916,6 +962,19 @@ function renderLabel() {
 		<label for="control" class="label" id="label"> ${(x) => x.label} </label>
 	`;
 }
+function renderSelectionCount() {
+  return vividElement.html`
+		<span
+			id="selection-count"
+			class="selection-count"
+			aria-label="${(x) => x.locale.searchableSelect.maxSelectedMessage(
+    x.values.length,
+    x.maxSelected
+  )}"
+			>(${(x) => `${x.values.length}/${x.maxSelected}`})</span
+		>
+	`;
+}
 const tagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
   return vividElement.html`
@@ -1001,12 +1060,15 @@ function renderFieldset(context) {
 						id="control"
 						class="control"
 						autocomplete="off"
-						aria-autocomplete="list"
-						aria-expanded="${(x) => x.open}"
-						aria-haspopup="listbox"
 						aria-controls="listbox"
+						aria-describedby="${(x) => x.multiple && x.maxSelected && x.maxSelected >= 1 ? "selection-count" : null}"
+						${delegatesAria.delegateAria({
+    role: "combobox",
+    ariaAutoComplete: "list",
+    ariaHasPopup: "listbox",
+    ariaExpanded: (x) => x.open
+  })}
 						placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
-						role="combobox"
 						type="text"
 						?disabled="${(x) => x.disabled}"
 						:value="${(x) => x._inputValue}"
@@ -1057,7 +1119,18 @@ function setFixedDropdownVarWidth(x) {
 function renderControl(context) {
   const popupTag = context.tagFor(definition.Popup);
   return vividElement.html`
-		${when.when((x) => x.label, renderLabel())}
+		${when.when(
+    (x) => x.label || x.multiple && x.maxSelected && x.maxSelected >= 1,
+    vividElement.html`
+				<div>
+					${when.when((x) => x.label, renderLabel())}
+					${when.when(
+      (x) => x.multiple && x.maxSelected && x.maxSelected >= 1,
+      renderSelectionCount()
+    )}
+				</div>
+			`
+  )}
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(x) => x._changeDescription}
 		</span>

package/shared/definition44.js

@@ -2,9 +2,10 @@ import { B as Button, c as chevronTemplateFactory, b as buttonDefinition } from
 import { P as Popup, p as popupDefinition } from './definition65.js';
 import { I as Icon, i as iconDefinition } from './definition28.js';
 import { P as ProgressRing, p as progressRingDefinition } from './definition38.js';
-import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { V as VividElement, O as Observable, D as DOM, a as attr, n as nullableNumberConverter, o as observable, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { s as scrollIntoView } from './scrollIntoView.js';
+import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
 import { F as FormAssociated } from './form-associated.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { L as Localized } from './localized.js';
@@ -16,7 +17,7 @@ import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 import { r as repeat } from './repeat.js';
 
-const styles = ".chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}: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(--vvd-color-neutral-500)}.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(--vvd-color-neutral-700)}.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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}: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);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 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 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)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}: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)}.selection-count{color:var(--_low-ink-color);font:var(--vvd-typography-base)}.fieldset{--_connotation-color-primary: var(--vvd-searchable-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-searchable-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-searchable-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-searchable-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-searchable-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-searchable-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-searchable-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-searchable-select-accent-fierce, var(--vvd-color-neutral-700))}.fieldset{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.fieldset.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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(--vvd-color-neutral-700)}.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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}: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);font:var(--vvd-typography-base);min-block-size:40px;text-align:center}::part(popup-base){inline-size:max-content;min-inline-size:var(--_searchable-select-fixed-width, 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-cta{--_connotation-color-contrast: var(--vvd-option-tag-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-contrast: var(--vvd-option-tag-accent-contrast, var(--vvd-color-neutral-800))}.base{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:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;z-index:1;display:block;border-radius:inherit;content:\"\";inset:0;pointer-events:none}";
 
@@ -48,13 +49,13 @@ var __accessCheck = (obj, member, msg) => member.has(obj) || __typeError("Cannot
 var __privateGet = (obj, member, getter) => (__accessCheck(obj, member, "read from private field"), getter ? getter.call(obj) : member.get(obj));
 var __privateAdd = (obj, member, value) => member.has(obj) ? __typeError("Cannot add the same private member more than once") : member instanceof WeakSet ? member.add(obj) : member.set(obj, value);
 var __privateMethod = (obj, member, method) => (__accessCheck(obj, member, "access private method"), method);
-var _SearchableSelect_instances, updateValuesThroughUserInteraction_fn, updateValuesWhileMaintainingOrder_fn, isValidValue_fn, _slottedOptionsChangeHandler, updateSelectedOnSlottedOptions_fn, handleOptionInteraction_fn, _clonedTagIcons, tagIconOfOption_fn, updateClonedTagIconOfOption_fn, updateFilteredOptions_fn, transitionHighlightedOptionTo_fn, selectHighlightedOption_fn, highlightFirstOption_fn, highlightLastOption_fn, highlightPrevPage_fn, highlightNextPage_fn, highlightPreviousOption_fn, highlightNextOption_fn, textForValue_fn, measureTagWidth_fn, updateTagLayout_fn, moveTagFocusTo_fn, nextTagIndexLeft_fn, nextTagIndexRight_fn, nextTagIndexForRemoved_fn, determineInitialValues_fn, updateFormValue_fn, _resizeObserver;
+var _SearchableSelect_instances, updateValuesThroughUserInteraction_fn, updateValuesWhileMaintainingOrder_fn, isValidValue_fn, _slottedOptionsChangeHandler, updateSelectedOnSlottedOptions_fn, handleOptionInteraction_fn, _clonedTagIcons, tagIconOfOption_fn, updateClonedTagIconOfOption_fn, updateFilteredOptions_fn, transitionHighlightedOptionTo_fn, selectHighlightedOption_fn, highlightFirstOption_fn, highlightLastOption_fn, highlightPrevPage_fn, highlightNextPage_fn, highlightPreviousOption_fn, highlightNextOption_fn, textForValue_fn, measureTagWidth_fn, updateTagLayout_fn, moveTagFocusTo_fn, nextTagIndexLeft_fn, nextTagIndexRight_fn, nextTagIndexForRemoved_fn, updateSelectionLimit_fn, determineInitialValues_fn, updateFormValue_fn, _resizeObserver;
 const TagGapPx = 8;
 const InputMinWidthPx = 100;
 const PageSize = 10;
 const isFormAssociatedTryingToSetFormValue = (value) => typeof value === "string";
-let SearchableSelect = class extends AffixIconWithTrailing(
-  Localized(FormAssociatedSearchableSelect)
+let SearchableSelect = class extends DelegatesAria(
+  AffixIconWithTrailing(Localized(FormAssociatedSearchableSelect))
 ) {
   constructor() {
     super(...arguments);
@@ -91,6 +92,8 @@ let SearchableSelect = class extends AffixIconWithTrailing(
     this._tagRows = [];
     this._lastTagRow = [];
     this.clearable = false;
+    this.maxSelected = null;
+    this._slottedDisabledOptions = [];
     this.setFormValue = (value, state) => {
       if (isFormAssociatedTryingToSetFormValue(value)) {
         return;
@@ -127,6 +130,7 @@ let SearchableSelect = class extends AffixIconWithTrailing(
       return;
     }
     this.value = this.values.length ? this.values[0] : "";
+    __privateMethod(this, _SearchableSelect_instances, updateSelectionLimit_fn).call(this);
     __privateMethod(this, _SearchableSelect_instances, updateSelectedOnSlottedOptions_fn).call(this);
     if (this.$fastController.isConnected) {
       __privateMethod(this, _SearchableSelect_instances, updateTagLayout_fn).call(this);
@@ -308,6 +312,7 @@ let SearchableSelect = class extends AffixIconWithTrailing(
     }
     this._areOptionsInitialized = true;
     if (oldValue) {
+      this._slottedDisabledOptions = [];
       for (const option of oldValue) {
         const notifier = Observable.getNotifier(option);
         notifier.unsubscribe(__privateGet(this, _slottedOptionsChangeHandler), "selected");
@@ -325,9 +330,13 @@ let SearchableSelect = class extends AffixIconWithTrailing(
       if (option.selected || option.value === this.value || this.values.includes(option.value)) {
         values.push(option.value);
       }
+      if (option.disabled) {
+        this._slottedDisabledOptions.push(option);
+      }
     }
     __privateMethod(this, _SearchableSelect_instances, updateValuesWhileMaintainingOrder_fn).call(this, values);
     __privateMethod(this, _SearchableSelect_instances, updateFilteredOptions_fn).call(this);
+    __privateMethod(this, _SearchableSelect_instances, updateSelectionLimit_fn).call(this);
   }
   /**
    * @internal
@@ -426,6 +435,12 @@ let SearchableSelect = class extends AffixIconWithTrailing(
   _onClearButtonClick() {
     __privateMethod(this, _SearchableSelect_instances, updateValuesThroughUserInteraction_fn).call(this, this.selectedOptions.filter((option) => option.disabled).map((option) => option.value));
   }
+  /**
+   * @internal
+   */
+  maxSelectedChanged() {
+    __privateMethod(this, _SearchableSelect_instances, updateSelectionLimit_fn).call(this);
+  }
   /**
    * @internal
    */
@@ -543,8 +558,13 @@ handleOptionInteraction_fn = function(option) {
     }
     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);
+  const optionMessage = isSelection ? this.locale.searchableSelect.optionSelectedMessage(option.text) : this.locale.searchableSelect.optionDeselectedMessage(option.text);
+  const maxSelectedMessage = this.multiple && this.maxSelected && this.maxSelected >= 1 ? this.locale.searchableSelect.maxSelectedMessage(
+    this.values.length,
+    this.maxSelected
+  ) : "";
+  this._changeDescription = `${optionMessage} ${maxSelectedMessage}`;
   if (shouldClearSearchText) {
     this._currentSearchText = null;
   }
@@ -755,6 +775,26 @@ nextTagIndexRight_fn = function(index) {
 nextTagIndexForRemoved_fn = function(index) {
   return __privateMethod(this, _SearchableSelect_instances, nextTagIndexRight_fn).call(this, index - 1) ?? __privateMethod(this, _SearchableSelect_instances, nextTagIndexLeft_fn).call(this, index);
 };
+updateSelectionLimit_fn = function() {
+  if (!this.multiple || typeof this.maxSelected !== "number" || this.maxSelected <= 0) {
+    return;
+  }
+  const options = this._slottedOptions.filter(
+    (option) => !this._slottedDisabledOptions.includes(option)
+  );
+  if (this.values.length >= this.maxSelected) {
+    const unselectedOptions = options.filter(
+      (option) => !this.selectedOptions.includes(option)
+    );
+    for (const option of unselectedOptions) {
+      option.disabled = true;
+    }
+  } else {
+    for (const option of options) {
+      option.disabled = false;
+    }
+  }
+};
 // --- Form handling ---
 determineInitialValues_fn = function() {
   return this.initialValues.length ? this.initialValues : this.initialValue ? [this.initialValue] : [];
@@ -845,6 +885,12 @@ __decorateClass$1([
 __decorateClass$1([
   attr({ mode: "boolean" })
 ], SearchableSelect.prototype, "clearable", 2);
+__decorateClass$1([
+  attr({ attribute: "max-selected", converter: nullableNumberConverter })
+], SearchableSelect.prototype, "maxSelected", 2);
+__decorateClass$1([
+  observable
+], SearchableSelect.prototype, "_slottedDisabledOptions", 2);
 __decorateClass$1([
   observable
 ], SearchableSelect.prototype, "_changeDescription", 2);
@@ -914,6 +960,19 @@ function renderLabel() {
 		<label for="control" class="label" id="label"> ${(x) => x.label} </label>
 	`;
 }
+function renderSelectionCount() {
+  return html`
+		<span
+			id="selection-count"
+			class="selection-count"
+			aria-label="${(x) => x.locale.searchableSelect.maxSelectedMessage(
+    x.values.length,
+    x.maxSelected
+  )}"
+			>(${(x) => `${x.values.length}/${x.maxSelected}`})</span
+		>
+	`;
+}
 const tagTemplateFactory = (context, getComponent) => {
   const optionTagTag = context.tagFor(OptionTag);
   return html`
@@ -999,12 +1058,15 @@ function renderFieldset(context) {
 						id="control"
 						class="control"
 						autocomplete="off"
-						aria-autocomplete="list"
-						aria-expanded="${(x) => x.open}"
-						aria-haspopup="listbox"
 						aria-controls="listbox"
+						aria-describedby="${(x) => x.multiple && x.maxSelected && x.maxSelected >= 1 ? "selection-count" : null}"
+						${delegateAria({
+    role: "combobox",
+    ariaAutoComplete: "list",
+    ariaHasPopup: "listbox",
+    ariaExpanded: (x) => x.open
+  })}
 						placeholder="${(x) => x.multiple && x.values.length ? "" : x.placeholder}"
-						role="combobox"
 						type="text"
 						?disabled="${(x) => x.disabled}"
 						:value="${(x) => x._inputValue}"
@@ -1055,7 +1117,18 @@ function setFixedDropdownVarWidth(x) {
 function renderControl(context) {
   const popupTag = context.tagFor(Popup);
   return html`
-		${when((x) => x.label, renderLabel())}
+		${when(
+    (x) => x.label || x.multiple && x.maxSelected && x.maxSelected >= 1,
+    html`
+				<div>
+					${when((x) => x.label, renderLabel())}
+					${when(
+      (x) => x.multiple && x.maxSelected && x.maxSelected >= 1,
+      renderSelectionCount()
+    )}
+				</div>
+			`
+  )}
 		<span aria-live="assertive" aria-relevant="text" class="visually-hidden">
 			${(x) => x._changeDescription}
 		</span>

package/shared/definition45.cjs

@@ -6,15 +6,16 @@ const definition$3 = require('./definition36.cjs');
 const vividElement = require('./vivid-element.cjs');
 const applyMixinsWithObservables = require('./applyMixinsWithObservables.cjs');
 const listbox = require('./listbox.cjs');
+const hostSemantics = require('./host-semantics.cjs');
 const formAssociated = require('./form-associated.cjs');
 const numbers = require('./numbers.cjs');
 const affix = require('./affix.cjs');
 const strings = require('./strings.cjs');
 const keyCodes = require('./key-codes.cjs');
 const formElements = require('./form-elements.cjs');
-const index = require('./index.cjs');
-const definition$1 = require('./definition11.cjs');
 const option = require('./option.cjs');
+const definition$1 = require('./definition11.cjs');
+const index = require('./index.cjs');
 const ref = require('./ref.cjs');
 const when = require('./when.cjs');
 const slotted = require('./slotted.cjs');
@@ -41,7 +42,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-exports.Select = class Select extends affix.AffixIconWithTrailing(FormAssociatedSelect) {
+exports.Select = class Select extends hostSemantics.HostSemantics(
+  affix.AffixIconWithTrailing(FormAssociatedSelect)
+) {
   constructor() {
     super(...arguments);
     this.activeIndex = -1;
@@ -777,7 +780,11 @@ const getStateClasses = ({
   [`size-${scale}`, Boolean(scale)]
 );
 function renderLabel() {
-  return vividElement.html` <label for="control" class="label" id="label">
+  return vividElement.html` <label
+		for="${(x) => x.multiple ? null : "control"}"
+		class="label"
+		id="label"
+	>
 		${(x) => x.label}
 	</label>`;
 }
@@ -824,6 +831,8 @@ function renderControl(context) {
 						id="${(x) => x.listboxId}"
 						role="listbox"
 						aria-multiselectable="${(x) => x.multiple}"
+						aria-label="${(x) => x.multiple && !x.label && x.ariaLabel ? x.ariaLabel : null}"
+						aria-labelledby="${(x) => x.multiple && x.label ? "label" : null}"
 						?disabled="${(x) => x.disabled}"
 						?hidden="${(x) => x.collapsible ? !x.open : false}"
 						${ref.ref("listbox")}>
@@ -852,11 +861,14 @@ const SelectTemplate = (context) => {
   return vividElement.html`
 		<template
 			class="base"
-			role="combobox"
-			aria-haspopup="${(x) => x.collapsible ? "listbox" : "false"}"
+			${hostSemantics.applyHostSemantics({
+    role: "combobox",
+    ariaLabel: (x) => x.ariaLabel ?? x.label,
+    ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
+    ariaExpanded: (x) => x.open,
+    ariaDisabled: (x) => x.disabled
+  })}
 			aria-controls="${(x) => x.listboxId}"
-			aria-expanded="${(x) => x.open}"
-			aria-disabled="${(x) => x.disabled}"
 			aria-activedescendant="${(x) => x._activeDescendant}"
 			tabindex="${(x) => !x.disabled ? "0" : null}"
 			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"

package/shared/definition45.js

@@ -1,18 +1,19 @@
 import { P as Popup, p as popupDefinition } from './definition65.js';
 import { i as iconDefinition } from './definition28.js';
 import { l as listboxOptionDefinition } from './definition36.js';
-import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { D as DOM, O as Observable, o as observable, a as attr, v as volatile, h as html, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
 import { a as applyMixinsWithObservables } from './applyMixinsWithObservables.js';
 import { L as Listbox } from './listbox.js';
+import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
 import { F as FormAssociated } from './form-associated.js';
 import { i as inRange } from './numbers.js';
 import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
 import { u as uniqueId } from './strings.js';
 import { a as keySpace, b as keyEscape, c as keyTab, d as keyEnd, e as keyArrowUp, f as keyArrowDown, g as keyHome, k as keyEnter } from './key-codes.js';
 import { F as FormElementSuccessText, a as FormElementHelperText, e as errorText, f as formElements, g as getFeedbackTemplate } from './form-elements.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { c as chevronTemplateFactory } from './definition11.js';
 import { L as ListboxOption } from './option.js';
+import { c as chevronTemplateFactory } from './definition11.js';
+import { h as handleEscapeKeyAndStopPropogation } from './index.js';
 import { r as ref } from './ref.js';
 import { w as when } from './when.js';
 import { s as slotted } from './slotted.js';
@@ -39,7 +40,9 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (kind && result) __defProp(target, key, result);
   return result;
 };
-let Select = class extends AffixIconWithTrailing(FormAssociatedSelect) {
+let Select = class extends HostSemantics(
+  AffixIconWithTrailing(FormAssociatedSelect)
+) {
   constructor() {
     super(...arguments);
     this.activeIndex = -1;
@@ -775,7 +778,11 @@ const getStateClasses = ({
   [`size-${scale}`, Boolean(scale)]
 );
 function renderLabel() {
-  return html` <label for="control" class="label" id="label">
+  return html` <label
+		for="${(x) => x.multiple ? null : "control"}"
+		class="label"
+		id="label"
+	>
 		${(x) => x.label}
 	</label>`;
 }
@@ -822,6 +829,8 @@ function renderControl(context) {
 						id="${(x) => x.listboxId}"
 						role="listbox"
 						aria-multiselectable="${(x) => x.multiple}"
+						aria-label="${(x) => x.multiple && !x.label && x.ariaLabel ? x.ariaLabel : null}"
+						aria-labelledby="${(x) => x.multiple && x.label ? "label" : null}"
 						?disabled="${(x) => x.disabled}"
 						?hidden="${(x) => x.collapsible ? !x.open : false}"
 						${ref("listbox")}>
@@ -850,11 +859,14 @@ const SelectTemplate = (context) => {
   return html`
 		<template
 			class="base"
-			role="combobox"
-			aria-haspopup="${(x) => x.collapsible ? "listbox" : "false"}"
+			${applyHostSemantics({
+    role: "combobox",
+    ariaLabel: (x) => x.ariaLabel ?? x.label,
+    ariaHasPopup: (x) => x.collapsible ? "listbox" : "false",
+    ariaExpanded: (x) => x.open,
+    ariaDisabled: (x) => x.disabled
+  })}
 			aria-controls="${(x) => x.listboxId}"
-			aria-expanded="${(x) => x.open}"
-			aria-disabled="${(x) => x.disabled}"
 			aria-activedescendant="${(x) => x._activeDescendant}"
 			tabindex="${(x) => !x.disabled ? "0" : null}"
 			@click="${ifNotFromFeedback((x, e) => x.clickHandler(e))}"

package/shared/definition46.cjs

@@ -86,7 +86,12 @@ function checkbox(context) {
     (x) => x.controlType !== "radio",
     vividElement.html`
 		<${checkboxTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			${delegatesAria.delegateAria(
+      {
+        ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
+      },
+      { onlySpecified: true }
+    )}
 			@change="${(x) => handleControlChange(x)}"
 			class="control checkbox"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
@@ -101,7 +106,12 @@ function radio(context) {
     (x) => x.controlType === "radio",
     vividElement.html`
 		<${radioTag}
-			aria-label="${(x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null}"
+			${delegatesAria.delegateAria(
+      {
+        ariaLabel: (x) => !x.clickableBox && !x.clickable && x.ariaLabel ? x.ariaLabel : null
+      },
+      { onlySpecified: true }
+    )}
 			@change="${(x) => handleControlChange(x)}"
 			class="control radio"
 			connotation="${(x) => x.connotation === "cta" ? enums.Connotation.CTA : enums.Connotation.Accent}"
@@ -111,13 +121,15 @@ function radio(context) {
   )} `;
 }
 const SelectableBoxTemplate = (context) => {
-  return vividElement.html`<template role="presentation">
+  return vividElement.html`<template>
 		<div
 			class="${getClasses}"
 			tabindex="${(x) => x.clickableBox || x.clickable ? "0" : null}"
-			role="${(x) => x.clickableBox || x.clickable ? "button" : null}"
-			aria-pressed="${(x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null}"
-			aria-label="${(x) => x.clickableBox || x.clickable ? x.ariaLabel : null}"
+			${delegatesAria.delegateAria({
+    role: (x) => x.clickableBox || x.clickable ? "button" : null,
+    ariaPressed: (x) => x.clickableBox || x.clickable ? x.checked ? "true" : "false" : null,
+    ariaLabel: (x) => x.clickableBox || x.clickable ? x.ariaLabel : null
+  })}
 			@keydown="${(x, c) => x._handleKeydown(c.event)}"
 			@click="${(x) => x.clickableBox || x.clickable ? x._handleCheckedChange() : null}"
 		>