@vonage/vivid 4.5.0 → 4.7.0

package/shared/definition36.cjs

@@ -3,207 +3,12 @@
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
 const affix = require('./affix.cjs');
-const ariaGlobal = require('./aria-global.cjs');
-const startEnd = require('./start-end.cjs');
+const listboxOption = require('./listbox-option.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const dom = require('./dom.cjs');
+const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-/**
- * Determines if the element is a {@link (ListboxOption:class)}
- *
- * @param element - the element to test.
- * @public
- */
-function isListboxOption(el) {
-    return (dom.isHTMLElement(el) &&
-        (el.getAttribute("role") === "option" ||
-            el instanceof HTMLOptionElement));
-}
-/**
- * An Option Custom HTML Element.
- * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
- *
- * @slot start - Content which can be provided before the listbox option content
- * @slot end - Content which can be provided after the listbox option content
- * @slot - The default slot for listbox option content
- * @csspart content - Wraps the listbox option content
- *
- * @public
- */
-let ListboxOption$1 = class ListboxOption extends index.FoundationElement {
-    constructor(text, value, defaultSelected, selected) {
-        super();
-        /**
-         * The defaultSelected state of the option.
-         * @public
-         */
-        this.defaultSelected = false;
-        /**
-         * Tracks whether the "selected" property has been changed.
-         * @internal
-         */
-        this.dirtySelected = false;
-        /**
-         * The checked state of the control.
-         *
-         * @public
-         */
-        this.selected = this.defaultSelected;
-        /**
-         * Track whether the value has been changed from the initial value
-         */
-        this.dirtyValue = false;
-        if (text) {
-            this.textContent = text;
-        }
-        if (value) {
-            this.initialValue = value;
-        }
-        if (defaultSelected) {
-            this.defaultSelected = defaultSelected;
-        }
-        if (selected) {
-            this.selected = selected;
-        }
-        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
-        this.proxy.disabled = this.disabled;
-    }
-    /**
-     * Updates the ariaChecked property when the checked property changes.
-     *
-     * @param prev - the previous checked value
-     * @param next - the current checked value
-     *
-     * @public
-     */
-    checkedChanged(prev, next) {
-        if (typeof next === "boolean") {
-            this.ariaChecked = next ? "true" : "false";
-            return;
-        }
-        this.ariaChecked = null;
-    }
-    /**
-     * Updates the proxy's text content when the default slot changes.
-     * @param prev - the previous content value
-     * @param next - the current content value
-     *
-     * @internal
-     */
-    contentChanged(prev, next) {
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.textContent = this.textContent;
-        }
-        this.$emit("contentchange", null, { bubbles: true });
-    }
-    defaultSelectedChanged() {
-        if (!this.dirtySelected) {
-            this.selected = this.defaultSelected;
-            if (this.proxy instanceof HTMLOptionElement) {
-                this.proxy.selected = this.defaultSelected;
-            }
-        }
-    }
-    disabledChanged(prev, next) {
-        this.ariaDisabled = this.disabled ? "true" : "false";
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.disabled = this.disabled;
-        }
-    }
-    selectedAttributeChanged() {
-        this.defaultSelected = this.selectedAttribute;
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.defaultSelected = this.defaultSelected;
-        }
-    }
-    selectedChanged() {
-        this.ariaSelected = this.selected ? "true" : "false";
-        if (!this.dirtySelected) {
-            this.dirtySelected = true;
-        }
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.selected = this.selected;
-        }
-    }
-    initialValueChanged(previous, next) {
-        // If the value is clean and the component is connected to the DOM
-        // then set value equal to the attribute value.
-        if (!this.dirtyValue) {
-            this.value = this.initialValue;
-            this.dirtyValue = false;
-        }
-    }
-    get label() {
-        var _a;
-        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
-    }
-    get text() {
-        var _a, _b;
-        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
-    }
-    set value(next) {
-        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
-        this._value = newValue;
-        this.dirtyValue = true;
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.value = newValue;
-        }
-        index.Observable.notify(this, "value");
-    }
-    get value() {
-        var _a;
-        index.Observable.track(this, "value");
-        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
-    }
-    get form() {
-        return this.proxy ? this.proxy.form : null;
-    }
-};
-index.__decorate([
-    index.observable
-], ListboxOption$1.prototype, "checked", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption$1.prototype, "content", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption$1.prototype, "defaultSelected", void 0);
-index.__decorate([
-    index.attr({ mode: "boolean" })
-], ListboxOption$1.prototype, "disabled", void 0);
-index.__decorate([
-    index.attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption$1.prototype, "selectedAttribute", void 0);
-index.__decorate([
-    index.observable
-], ListboxOption$1.prototype, "selected", void 0);
-index.__decorate([
-    index.attr({ attribute: "value", mode: "fromView" })
-], ListboxOption$1.prototype, "initialValue", void 0);
-/**
- * States and properties relating to the ARIA `option` role.
- *
- * @public
- */
-class DelegatesARIAListboxOption {
-}
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
-index.__decorate([
-    index.observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
-applyMixins.applyMixins(DelegatesARIAListboxOption, ariaGlobal.ARIAGlobalStatesAndProperties);
-applyMixins.applyMixins(ListboxOption$1, startEnd.StartEnd, DelegatesARIAListboxOption);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -213,7 +18,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   if (result) __defProp(target, key, result);
   return result;
 };
-class ListboxOption extends ListboxOption$1 {
+class ListboxOption extends listboxOption.ListboxOption {
+  constructor() {
+    super(...arguments);
+    this._highlighted = false;
+    this._displayCheckmark = false;
+    this._matchedRange = null;
+  }
   // #region overrides base class accessor
   set text(value) {
     this._text = value;
@@ -227,7 +38,12 @@ class ListboxOption extends ListboxOption$1 {
   set label(value) {
     this._label = value;
   }
-  // #endregion overrides
+  /**
+   * @internal
+   */
+  get _matchedRangeSafe() {
+    return this._matchedRange ?? { from: 0, to: 0 };
+  }
 }
 __decorateClass([
   index.attr({
@@ -239,17 +55,28 @@ __decorateClass([
     attribute: "label"
   })
 ], ListboxOption.prototype, "_label");
+__decorateClass([
+  index.observable
+], ListboxOption.prototype, "_highlighted");
+__decorateClass([
+  index.observable
+], ListboxOption.prototype, "_displayCheckmark");
+__decorateClass([
+  index.observable
+], ListboxOption.prototype, "_matchedRange");
 applyMixins.applyMixins(ListboxOption, affix.AffixIconWithTrailing);
 
-const getClasses = ({ icon, disabled, selected, checked }) => classNames.classNames(
+const getClasses = (x) => classNames.classNames(
   "base",
-  ["disabled", disabled],
-  ["selected", Boolean(selected)],
-  ["active", Boolean(checked)],
-  ["icon", Boolean(icon)]
+  ["disabled", x.disabled],
+  ["selected", Boolean(x.selected)],
+  ["hover", Boolean(x._highlighted)],
+  ["active", Boolean(x.checked)],
+  ["icon", Boolean(x.icon)]
 );
 const ListboxOptionTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(icon.Icon);
   return index.html`
 		<template
 			aria-checked="${(x) => x.ariaChecked}"
@@ -261,13 +88,30 @@ const ListboxOptionTemplate = (context) => {
 		>
 			<div class="${getClasses}">
 				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-				${when.when((x) => x.text, index.html`<div class="text">${(x) => x.text}</div>`)}
+				${when.when(
+    (x) => x.text,
+    index.html`<div class="text">
+						${when.when(
+      (x) => x._matchedRange,
+      index.html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
+									>${(x) => x.text.slice(
+        x._matchedRangeSafe.from,
+        x._matchedRangeSafe.to
+      )}</span
+								>`
+    )}${(x) => x.text.slice(x._matchedRangeSafe.to)}
+					</div>`
+  )}
+				${when.when(
+    (x) => x._displayCheckmark && x.selected,
+    index.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+  )}
 			</div>
 		</template>
 	`;
 };
 
-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}.base .text{font:var(--vvd-typography-base)}: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))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
+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}";
 
 const listboxOptionDefinition = ListboxOption.compose({
   baseName: "option",
@@ -281,7 +125,6 @@ const listboxOptionRegistries = [
 const registerOption = index.registerFactory(listboxOptionRegistries);
 
 exports.ListboxOption = ListboxOption;
-exports.isListboxOption = isListboxOption;
 exports.listboxOptionDefinition = listboxOptionDefinition;
 exports.listboxOptionRegistries = listboxOptionRegistries;
 exports.registerOption = registerOption;

package/shared/definition36.js

@@ -1,207 +1,12 @@
-import { F as FoundationElement, O as Observable, _ as __decorate, o as observable, a as attr, h as html, r as registerFactory } from './index.js';
+import { a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
 import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
-import { S as StartEnd } from './start-end.js';
+import { L as ListboxOption$1 } from './listbox-option.js';
 import { a as applyMixins } from './apply-mixins.js';
-import { i as isHTMLElement } from './dom.js';
+import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-/**
- * Determines if the element is a {@link (ListboxOption:class)}
- *
- * @param element - the element to test.
- * @public
- */
-function isListboxOption(el) {
-    return (isHTMLElement(el) &&
-        (el.getAttribute("role") === "option" ||
-            el instanceof HTMLOptionElement));
-}
-/**
- * An Option Custom HTML Element.
- * Implements {@link https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option }.
- *
- * @slot start - Content which can be provided before the listbox option content
- * @slot end - Content which can be provided after the listbox option content
- * @slot - The default slot for listbox option content
- * @csspart content - Wraps the listbox option content
- *
- * @public
- */
-let ListboxOption$1 = class ListboxOption extends FoundationElement {
-    constructor(text, value, defaultSelected, selected) {
-        super();
-        /**
-         * The defaultSelected state of the option.
-         * @public
-         */
-        this.defaultSelected = false;
-        /**
-         * Tracks whether the "selected" property has been changed.
-         * @internal
-         */
-        this.dirtySelected = false;
-        /**
-         * The checked state of the control.
-         *
-         * @public
-         */
-        this.selected = this.defaultSelected;
-        /**
-         * Track whether the value has been changed from the initial value
-         */
-        this.dirtyValue = false;
-        if (text) {
-            this.textContent = text;
-        }
-        if (value) {
-            this.initialValue = value;
-        }
-        if (defaultSelected) {
-            this.defaultSelected = defaultSelected;
-        }
-        if (selected) {
-            this.selected = selected;
-        }
-        this.proxy = new Option(`${this.textContent}`, this.initialValue, this.defaultSelected, this.selected);
-        this.proxy.disabled = this.disabled;
-    }
-    /**
-     * Updates the ariaChecked property when the checked property changes.
-     *
-     * @param prev - the previous checked value
-     * @param next - the current checked value
-     *
-     * @public
-     */
-    checkedChanged(prev, next) {
-        if (typeof next === "boolean") {
-            this.ariaChecked = next ? "true" : "false";
-            return;
-        }
-        this.ariaChecked = null;
-    }
-    /**
-     * Updates the proxy's text content when the default slot changes.
-     * @param prev - the previous content value
-     * @param next - the current content value
-     *
-     * @internal
-     */
-    contentChanged(prev, next) {
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.textContent = this.textContent;
-        }
-        this.$emit("contentchange", null, { bubbles: true });
-    }
-    defaultSelectedChanged() {
-        if (!this.dirtySelected) {
-            this.selected = this.defaultSelected;
-            if (this.proxy instanceof HTMLOptionElement) {
-                this.proxy.selected = this.defaultSelected;
-            }
-        }
-    }
-    disabledChanged(prev, next) {
-        this.ariaDisabled = this.disabled ? "true" : "false";
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.disabled = this.disabled;
-        }
-    }
-    selectedAttributeChanged() {
-        this.defaultSelected = this.selectedAttribute;
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.defaultSelected = this.defaultSelected;
-        }
-    }
-    selectedChanged() {
-        this.ariaSelected = this.selected ? "true" : "false";
-        if (!this.dirtySelected) {
-            this.dirtySelected = true;
-        }
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.selected = this.selected;
-        }
-    }
-    initialValueChanged(previous, next) {
-        // If the value is clean and the component is connected to the DOM
-        // then set value equal to the attribute value.
-        if (!this.dirtyValue) {
-            this.value = this.initialValue;
-            this.dirtyValue = false;
-        }
-    }
-    get label() {
-        var _a;
-        return (_a = this.value) !== null && _a !== void 0 ? _a : this.text;
-    }
-    get text() {
-        var _a, _b;
-        return (_b = (_a = this.textContent) === null || _a === void 0 ? void 0 : _a.replace(/\s+/g, " ").trim()) !== null && _b !== void 0 ? _b : "";
-    }
-    set value(next) {
-        const newValue = `${next !== null && next !== void 0 ? next : ""}`;
-        this._value = newValue;
-        this.dirtyValue = true;
-        if (this.proxy instanceof HTMLOptionElement) {
-            this.proxy.value = newValue;
-        }
-        Observable.notify(this, "value");
-    }
-    get value() {
-        var _a;
-        Observable.track(this, "value");
-        return (_a = this._value) !== null && _a !== void 0 ? _a : this.text;
-    }
-    get form() {
-        return this.proxy ? this.proxy.form : null;
-    }
-};
-__decorate([
-    observable
-], ListboxOption$1.prototype, "checked", void 0);
-__decorate([
-    observable
-], ListboxOption$1.prototype, "content", void 0);
-__decorate([
-    observable
-], ListboxOption$1.prototype, "defaultSelected", void 0);
-__decorate([
-    attr({ mode: "boolean" })
-], ListboxOption$1.prototype, "disabled", void 0);
-__decorate([
-    attr({ attribute: "selected", mode: "boolean" })
-], ListboxOption$1.prototype, "selectedAttribute", void 0);
-__decorate([
-    observable
-], ListboxOption$1.prototype, "selected", void 0);
-__decorate([
-    attr({ attribute: "value", mode: "fromView" })
-], ListboxOption$1.prototype, "initialValue", void 0);
-/**
- * States and properties relating to the ARIA `option` role.
- *
- * @public
- */
-class DelegatesARIAListboxOption {
-}
-__decorate([
-    observable
-], DelegatesARIAListboxOption.prototype, "ariaChecked", void 0);
-__decorate([
-    observable
-], DelegatesARIAListboxOption.prototype, "ariaPosInSet", void 0);
-__decorate([
-    observable
-], DelegatesARIAListboxOption.prototype, "ariaSelected", void 0);
-__decorate([
-    observable
-], DelegatesARIAListboxOption.prototype, "ariaSetSize", void 0);
-applyMixins(DelegatesARIAListboxOption, ARIAGlobalStatesAndProperties);
-applyMixins(ListboxOption$1, StartEnd, DelegatesARIAListboxOption);
-
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
   var result = void 0 ;
@@ -212,6 +17,12 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 class ListboxOption extends ListboxOption$1 {
+  constructor() {
+    super(...arguments);
+    this._highlighted = false;
+    this._displayCheckmark = false;
+    this._matchedRange = null;
+  }
   // #region overrides base class accessor
   set text(value) {
     this._text = value;
@@ -225,7 +36,12 @@ class ListboxOption extends ListboxOption$1 {
   set label(value) {
     this._label = value;
   }
-  // #endregion overrides
+  /**
+   * @internal
+   */
+  get _matchedRangeSafe() {
+    return this._matchedRange ?? { from: 0, to: 0 };
+  }
 }
 __decorateClass([
   attr({
@@ -237,17 +53,28 @@ __decorateClass([
     attribute: "label"
   })
 ], ListboxOption.prototype, "_label");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "_highlighted");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "_displayCheckmark");
+__decorateClass([
+  observable
+], ListboxOption.prototype, "_matchedRange");
 applyMixins(ListboxOption, AffixIconWithTrailing);
 
-const getClasses = ({ icon, disabled, selected, checked }) => classNames(
+const getClasses = (x) => classNames(
   "base",
-  ["disabled", disabled],
-  ["selected", Boolean(selected)],
-  ["active", Boolean(checked)],
-  ["icon", Boolean(icon)]
+  ["disabled", x.disabled],
+  ["selected", Boolean(x.selected)],
+  ["hover", Boolean(x._highlighted)],
+  ["active", Boolean(x.checked)],
+  ["icon", Boolean(x.icon)]
 );
 const ListboxOptionTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(Icon);
   return html`
 		<template
 			aria-checked="${(x) => x.ariaChecked}"
@@ -259,13 +86,30 @@ const ListboxOptionTemplate = (context) => {
 		>
 			<div class="${getClasses}">
 				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-				${when((x) => x.text, html`<div class="text">${(x) => x.text}</div>`)}
+				${when(
+    (x) => x.text,
+    html`<div class="text">
+						${when(
+      (x) => x._matchedRange,
+      html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
+									>${(x) => x.text.slice(
+        x._matchedRangeSafe.from,
+        x._matchedRangeSafe.to
+      )}</span
+								>`
+    )}${(x) => x.text.slice(x._matchedRangeSafe.to)}
+					</div>`
+  )}
+				${when(
+    (x) => x._displayCheckmark && x.selected,
+    html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+  )}
 			</div>
 		</template>
 	`;
 };
 
-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}.base .text{font:var(--vvd-typography-base)}: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))}slot[name=icon]{font-size:20px;line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
+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}";
 
 const listboxOptionDefinition = ListboxOption.compose({
   baseName: "option",
@@ -278,4 +122,4 @@ const listboxOptionRegistries = [
 ];
 const registerOption = registerFactory(listboxOptionRegistries);
 
-export { ListboxOption as L, listboxOptionRegistries as a, isListboxOption as i, listboxOptionDefinition as l, registerOption as r };
+export { ListboxOption as L, listboxOptionRegistries as a, listboxOptionDefinition as l, registerOption as r };

package/shared/definition4.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 const definition$2 = require('./definition11.cjs');
-const definition = require('./definition62.cjs');
+const definition = require('./definition63.cjs');
 const definition$1 = require('./definition27.cjs');
 const enums = require('./enums.cjs');
 const affix = require('./affix.cjs');

package/shared/definition4.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
 import { a as buttonRegistries } from './definition11.js';
-import { E as Elevation, e as elevationRegistries } from './definition62.js';
+import { E as Elevation, e as elevationRegistries } from './definition63.js';
 import { a as iconRegistries } from './definition27.js';
 import { C as Connotation } from './enums.js';
 import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';

package/shared/definition42.cjs

@@ -1,7 +1,7 @@
 'use strict';
 
 const index = require('./index.cjs');
-const definition = require('./definition63.cjs');
+const definition = require('./definition64.cjs');
 const keyCodes = require('./key-codes2.cjs');
 const formAssociated = require('./form-associated.cjs');
 const slider_template = require('./slider.template.cjs');

package/shared/definition42.js

@@ -1,5 +1,5 @@
 import { F as FoundationElement, o as observable, a as attr, n as nullableNumberConverter, h as html, r as registerFactory } from './index.js';
-import { P as Popup, a as PlacementStrategy, p as popupRegistries } from './definition63.js';
+import { P as Popup, a as PlacementStrategy, p as popupRegistries } from './definition64.js';
 import { e as keyHome, f as keyEnd, d as keyArrowUp, k as keyArrowLeft, c as keyArrowDown, a as keyArrowRight } from './key-codes2.js';
 import { F as FormAssociated } from './form-associated.js';
 import { l as limit, g as getMarkersTemplate } from './slider.template.js';