@vonage/vivid 4.18.0 → 4.19.0

package/lib/tooltip/tooltip.d.ts

@@ -158,124 +158,6 @@ declare const Tooltip_base: {
         readonly DOCUMENT_POSITION_CONTAINS: 8;
         readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
         readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
-        pmViewDesc?: {
-            parent: any | undefined;
-            children: any[];
-            dom: Node;
-            contentDOM: HTMLElement | null;
-            dirty: number;
-            node: import("prosemirror-model").Node | null;
-            matchesWidget(widget: import("prosemirror-view").Decoration): boolean;
-            matchesMark(mark: import("prosemirror-model").Mark): boolean;
-            matchesNode(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource): boolean;
-            matchesHack(nodeName: string): boolean;
-            parseRule(): Omit<import("prosemirror-model").TagParseRule, "tag"> | null;
-            stopEvent(event: Event): boolean;
-            readonly size: number;
-            readonly border: number;
-            destroy(): void;
-            posBeforeChild(child: any): number;
-            readonly posBefore: number;
-            readonly posAtStart: number;
-            readonly posAfter: number;
-            readonly posAtEnd: number;
-            localPosFromDOM(dom: Node, offset: number, bias: number): number;
-            nearestDesc(dom: Node): any | undefined;
-            nearestDesc(dom: Node, onlyNodes: true): {
-                node: import("prosemirror-model").Node;
-                outerDeco: readonly import("prosemirror-view").Decoration[];
-                innerDeco: import("prosemirror-view").DecorationSource;
-                readonly nodeDOM: Node;
-                parseRule(): Omit<import("prosemirror-model").TagParseRule, "tag"> | null;
-                matchesNode(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource): boolean;
-                readonly size: number;
-                readonly border: 0 | 1;
-                updateChildren(view: import("prosemirror-view").EditorView, pos: number): void;
-                localCompositionInfo(view: import("prosemirror-view").EditorView, pos: number): {
-                    node: Text;
-                    pos: number;
-                    text: string;
-                } | null;
-                protectLocalComposition(view: import("prosemirror-view").EditorView, { node, pos, text }: {
-                    node: Text;
-                    pos: number;
-                    text: string;
-                }): void;
-                update(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource, view: import("prosemirror-view").EditorView): boolean;
-                updateInner(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource, view: import("prosemirror-view").EditorView): void;
-                updateOuterDeco(outerDeco: readonly import("prosemirror-view").Decoration[]): void;
-                selectNode(): void;
-                deselectNode(): void;
-                readonly domAtom: boolean;
-                parent: any | undefined;
-                children: any[];
-                dom: Node;
-                contentDOM: HTMLElement | null;
-                dirty: number;
-                matchesWidget(widget: import("prosemirror-view").Decoration): boolean;
-                matchesMark(mark: import("prosemirror-model").Mark): boolean;
-                matchesHack(nodeName: string): boolean;
-                stopEvent(event: Event): boolean;
-                destroy(): void;
-                posBeforeChild(child: any): number;
-                readonly posBefore: number;
-                readonly posAtStart: number;
-                readonly posAfter: number;
-                readonly posAtEnd: number;
-                localPosFromDOM(dom: Node, offset: number, bias: number): number;
-                nearestDesc(dom: Node): any | undefined;
-                nearestDesc(dom: Node, onlyNodes: true): any | undefined;
-                getDesc(dom: Node): any | undefined;
-                posFromDOM(dom: Node, offset: number, bias: number): number;
-                descAt(pos: number): any | undefined;
-                domFromPos(pos: number, side: number): {
-                    node: Node;
-                    offset: number;
-                    atom?: number | undefined;
-                };
-                parseRange(from: number, to: number, base?: number | undefined): {
-                    node: Node;
-                    from: number;
-                    to: number;
-                    fromOffset: number;
-                    toOffset: number;
-                };
-                emptyChildAt(side: number): boolean;
-                domAfterPos(pos: number): Node;
-                setSelection(anchor: number, head: number, view: import("prosemirror-view").EditorView, force?: boolean | undefined): void;
-                ignoreMutation(mutation: import("prosemirror-view").ViewMutationRecord): boolean;
-                readonly contentLost: boolean | null;
-                markDirty(from: number, to: number): void;
-                markParentsDirty(): void;
-                readonly ignoreForCoords: boolean;
-                isText(text: string): boolean;
-            } | undefined;
-            getDesc(dom: Node): any | undefined;
-            posFromDOM(dom: Node, offset: number, bias: number): number;
-            descAt(pos: number): any | undefined;
-            domFromPos(pos: number, side: number): {
-                node: Node;
-                offset: number;
-                atom?: number | undefined;
-            };
-            parseRange(from: number, to: number, base?: number | undefined): {
-                node: Node;
-                from: number;
-                to: number;
-                fromOffset: number;
-                toOffset: number;
-            };
-            emptyChildAt(side: number): boolean;
-            domAfterPos(pos: number): Node;
-            setSelection(anchor: number, head: number, view: import("prosemirror-view").EditorView, force?: boolean | undefined): void;
-            ignoreMutation(mutation: import("prosemirror-view").ViewMutationRecord): boolean;
-            readonly contentLost: boolean | null;
-            markDirty(from: number, to: number): void;
-            markParentsDirty(): void;
-            readonly domAtom: boolean;
-            readonly ignoreForCoords: boolean;
-            isText(text: string): boolean;
-        } | undefined;
         dispatchEvent(event: Event): boolean;
         ariaAtomic: string | null;
         ariaAutoComplete: string | null;

package/locales/de-DE.cjs

@@ -355,6 +355,7 @@ const deDE = {
     clearButtonLabel: "Löschen",
     noOptionsMessage: "Keine Optionen",
     noMatchesMessage: "Keine Optionen gefunden",
+    loadingOptionsMessage: "Laden...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} entfernen`

package/locales/de-DE.js

@@ -353,6 +353,7 @@ const deDE = {
     clearButtonLabel: "Löschen",
     noOptionsMessage: "Keine Optionen",
     noMatchesMessage: "Keine Optionen gefunden",
+    loadingOptionsMessage: "Laden...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} entfernen`

package/locales/en-GB.cjs

@@ -187,6 +187,7 @@ const enGB = {
     clearButtonLabel: "Clear",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `Remove ${label}`

package/locales/en-GB.js

@@ -185,6 +185,7 @@ const enGB = {
     clearButtonLabel: "Clear",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `Remove ${label}`

package/locales/en-US.cjs

@@ -355,6 +355,7 @@ const enUS = {
     clearButtonLabel: "Clear",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `Remove ${label}`

package/locales/en-US.js

@@ -353,6 +353,7 @@ const enUS = {
     clearButtonLabel: "Clear",
     noOptionsMessage: "No options",
     noMatchesMessage: "No options found",
+    loadingOptionsMessage: "Loading...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `Remove ${label}`

package/locales/ja-JP.cjs

@@ -354,6 +354,7 @@ const jaJP = {
     clearButtonLabel: "クリア",
     noOptionsMessage: "オプションがありません",
     noMatchesMessage: "オプションが見つかりません",
+    loadingOptionsMessage: "読み込み中...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label}を削除`

package/locales/ja-JP.js

@@ -352,6 +352,7 @@ const jaJP = {
     clearButtonLabel: "クリア",
     noOptionsMessage: "オプションがありません",
     noMatchesMessage: "オプションが見つかりません",
+    loadingOptionsMessage: "読み込み中...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label}を削除`

package/locales/zh-CN.cjs

@@ -356,6 +356,7 @@ const zhCN = {
     clearButtonLabel: "清除",
     noOptionsMessage: "没有选项",
     noMatchesMessage: "未找到选项",
+    loadingOptionsMessage: "加载中...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} 删除`

package/locales/zh-CN.js

@@ -354,6 +354,7 @@ const zhCN = {
     clearButtonLabel: "清除",
     noOptionsMessage: "没有选项",
     noMatchesMessage: "未找到选项",
+    loadingOptionsMessage: "加载中...",
     removeTagButtonLabel: (
       /* istanbul ignore next */
       (label) => `${label} 删除`

package/package.json

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

package/shared/aria/delegates-aria.d.ts

@@ -150,124 +150,6 @@ export declare const DelegatesAria: <T extends Constructor<VividElement>>(Base:
         readonly DOCUMENT_POSITION_CONTAINS: 8;
         readonly DOCUMENT_POSITION_CONTAINED_BY: 16;
         readonly DOCUMENT_POSITION_IMPLEMENTATION_SPECIFIC: 32;
-        pmViewDesc?: {
-            parent: any | undefined;
-            children: any[];
-            dom: Node;
-            contentDOM: HTMLElement | null;
-            dirty: number;
-            node: import("prosemirror-model").Node | null;
-            matchesWidget(widget: import("prosemirror-view").Decoration): boolean;
-            matchesMark(mark: import("prosemirror-model").Mark): boolean;
-            matchesNode(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource): boolean;
-            matchesHack(nodeName: string): boolean;
-            parseRule(): Omit<import("prosemirror-model").TagParseRule, "tag"> | null;
-            stopEvent(event: Event): boolean;
-            readonly size: number;
-            readonly border: number;
-            destroy(): void;
-            posBeforeChild(child: any): number;
-            readonly posBefore: number;
-            readonly posAtStart: number;
-            readonly posAfter: number;
-            readonly posAtEnd: number;
-            localPosFromDOM(dom: Node, offset: number, bias: number): number;
-            nearestDesc(dom: Node): any | undefined;
-            nearestDesc(dom: Node, onlyNodes: true): {
-                node: import("prosemirror-model").Node;
-                outerDeco: readonly import("prosemirror-view").Decoration[];
-                innerDeco: import("prosemirror-view").DecorationSource;
-                readonly nodeDOM: Node;
-                parseRule(): Omit<import("prosemirror-model").TagParseRule, "tag"> | null;
-                matchesNode(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource): boolean;
-                readonly size: number;
-                readonly border: 0 | 1;
-                updateChildren(view: import("prosemirror-view").EditorView, pos: number): void;
-                localCompositionInfo(view: import("prosemirror-view").EditorView, pos: number): {
-                    node: Text;
-                    pos: number;
-                    text: string;
-                } | null;
-                protectLocalComposition(view: import("prosemirror-view").EditorView, { node, pos, text }: {
-                    node: Text;
-                    pos: number;
-                    text: string;
-                }): void;
-                update(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource, view: import("prosemirror-view").EditorView): boolean;
-                updateInner(node: import("prosemirror-model").Node, outerDeco: readonly import("prosemirror-view").Decoration[], innerDeco: import("prosemirror-view").DecorationSource, view: import("prosemirror-view").EditorView): void;
-                updateOuterDeco(outerDeco: readonly import("prosemirror-view").Decoration[]): void;
-                selectNode(): void;
-                deselectNode(): void;
-                readonly domAtom: boolean;
-                parent: any | undefined;
-                children: any[];
-                dom: Node;
-                contentDOM: HTMLElement | null;
-                dirty: number;
-                matchesWidget(widget: import("prosemirror-view").Decoration): boolean;
-                matchesMark(mark: import("prosemirror-model").Mark): boolean;
-                matchesHack(nodeName: string): boolean;
-                stopEvent(event: Event): boolean;
-                destroy(): void;
-                posBeforeChild(child: any): number;
-                readonly posBefore: number;
-                readonly posAtStart: number;
-                readonly posAfter: number;
-                readonly posAtEnd: number;
-                localPosFromDOM(dom: Node, offset: number, bias: number): number;
-                nearestDesc(dom: Node): any | undefined;
-                nearestDesc(dom: Node, onlyNodes: true): any | undefined;
-                getDesc(dom: Node): any | undefined;
-                posFromDOM(dom: Node, offset: number, bias: number): number;
-                descAt(pos: number): any | undefined;
-                domFromPos(pos: number, side: number): {
-                    node: Node;
-                    offset: number;
-                    atom?: number | undefined;
-                };
-                parseRange(from: number, to: number, base?: number | undefined): {
-                    node: Node;
-                    from: number;
-                    to: number;
-                    fromOffset: number;
-                    toOffset: number;
-                };
-                emptyChildAt(side: number): boolean;
-                domAfterPos(pos: number): Node;
-                setSelection(anchor: number, head: number, view: import("prosemirror-view").EditorView, force?: boolean | undefined): void;
-                ignoreMutation(mutation: import("prosemirror-view").ViewMutationRecord): boolean;
-                readonly contentLost: boolean | null;
-                markDirty(from: number, to: number): void;
-                markParentsDirty(): void;
-                readonly ignoreForCoords: boolean;
-                isText(text: string): boolean;
-            } | undefined;
-            getDesc(dom: Node): any | undefined;
-            posFromDOM(dom: Node, offset: number, bias: number): number;
-            descAt(pos: number): any | undefined;
-            domFromPos(pos: number, side: number): {
-                node: Node;
-                offset: number;
-                atom?: number | undefined;
-            };
-            parseRange(from: number, to: number, base?: number | undefined): {
-                node: Node;
-                from: number;
-                to: number;
-                fromOffset: number;
-                toOffset: number;
-            };
-            emptyChildAt(side: number): boolean;
-            domAfterPos(pos: number): Node;
-            setSelection(anchor: number, head: number, view: import("prosemirror-view").EditorView, force?: boolean | undefined): void;
-            ignoreMutation(mutation: import("prosemirror-view").ViewMutationRecord): boolean;
-            readonly contentLost: boolean | null;
-            markDirty(from: number, to: number): void;
-            markParentsDirty(): void;
-            readonly domAtom: boolean;
-            readonly ignoreForCoords: boolean;
-            isText(text: string): boolean;
-        } | undefined;
         dispatchEvent(event: Event): boolean;
         ariaAtomic: string | null;
         ariaAutoComplete: string | null;

package/shared/definition20.cjs

@@ -57,7 +57,7 @@ const ValidDateTimeFilter = {
     return value;
   }
 };
-let DateTimePicker = class extends timeSelectionPicker_template.TimeSelectionPicker(
+exports.DateTimePicker = class DateTimePicker extends timeSelectionPicker_template.TimeSelectionPicker(
   singleDatePicker.SingleDatePickerMixin(singleValuePicker.SingleValuePicker(calendarPicker_template.CalendarPicker(pickerField_template.PickerField)))
 ) {
   constructor() {
@@ -220,26 +220,26 @@ let DateTimePicker = class extends timeSelectionPicker_template.TimeSelectionPic
 };
 __decorateClass([
   vividElement.attr({ converter: ValidDateTimeFilter })
-], DateTimePicker.prototype, "min", 2);
+], exports.DateTimePicker.prototype, "min", 2);
 __decorateClass([
   vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "min-time" })
-], DateTimePicker.prototype, "minTime", 2);
+], exports.DateTimePicker.prototype, "minTime", 2);
 __decorateClass([
   vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "min-date" })
-], DateTimePicker.prototype, "minDate", 2);
+], exports.DateTimePicker.prototype, "minDate", 2);
 __decorateClass([
   vividElement.attr({ converter: ValidDateTimeFilter })
-], DateTimePicker.prototype, "max", 2);
+], exports.DateTimePicker.prototype, "max", 2);
 __decorateClass([
   vividElement.attr({ converter: timeSelectionPicker_template.ValidTimeFilter, attribute: "max-time" })
-], DateTimePicker.prototype, "maxTime", 2);
+], exports.DateTimePicker.prototype, "maxTime", 2);
 __decorateClass([
   vividElement.attr({ converter: calendarPicker_template.ValidDateFilter, attribute: "max-date" })
-], DateTimePicker.prototype, "maxDate", 2);
-DateTimePicker = __decorateClass([
+], exports.DateTimePicker.prototype, "maxDate", 2);
+exports.DateTimePicker = __decorateClass([
   formElements.errorText,
   formElements.formElements
-], DateTimePicker);
+], exports.DateTimePicker);
 
 const DateTimePickerTemplate = (context) => {
   return pickerField_template.PickerFieldTemplate(
@@ -261,7 +261,7 @@ const DateTimePickerTemplate = (context) => {
 
 const dateTimePickerDefinition = vividElement.defineVividComponent(
   "date-time-picker",
-  DateTimePicker,
+  exports.DateTimePicker,
   DateTimePickerTemplate,
   [
     definition.buttonDefinition,

package/shared/definition20.js

@@ -279,4 +279,4 @@ const registerDateTimePicker = createRegisterFunction(
   dateTimePickerDefinition
 );
 
-export { dateTimePickerDefinition as d, registerDateTimePicker as r };
+export { DateTimePicker as D, dateTimePickerDefinition as d, registerDateTimePicker as r };

package/shared/definition30.cjs

@@ -16,7 +16,7 @@ const classNames = require('./class-names.cjs');
 const slotted = require('./slotted.cjs');
 const when = require('./when.cjs');
 
-const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.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.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
+const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.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.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size, var--vvd-typography-base)}";
 
 const MenuItemRole = {
   menuitem: "menuitem",

package/shared/definition30.js

@@ -14,7 +14,7 @@ import { c as classNames } from './class-names.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { w as when } from './when.js';
 
-const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.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.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}";
+const styles$1 = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.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.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px));--focus-stroke-gap-color: transparent}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}.base.trailing .action,.base.has-meta .action{order:2}:host(:not([check-appearance],[aria-checked=true],[disabled])) .action{color:var(--vvd-color-neutral-500)}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}:host([internal-part]) .text-primary{font:var(--_text-primary-custom-size, var--vvd-typography-base)}";
 
 const MenuItemRole = {
   menuitem: "menuitem",

package/shared/definition36.cjs

@@ -24,6 +24,7 @@ const ListboxOptionTemplate = (context) => {
 			aria-checked="${(x) => x.checked}"
 			aria-selected="${(x) => x.selected}"
 			aria-disabled="${(x) => x.disabled}"
+			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
 			<div class="${getClasses}">
 				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
@@ -31,14 +32,14 @@ const ListboxOptionTemplate = (context) => {
     (x) => x.text,
     vividElement.html`<div class="text">
 						${when.when(
-      (x) => x._matchedRange,
-      vividElement.html`${(x) => x.text.slice(0, x._matchedRangeSafe.from)}<span class="match"
+      (x) => x._hasMatchedText,
+      vividElement.html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
 									>${(x) => x.text.slice(
-        x._matchedRangeSafe.from,
-        x._matchedRangeSafe.to
+        x._matchedRange.from,
+        x._matchedRange.to
       )}</span
 								>`
-    )}${(x) => x.text.slice(x._matchedRangeSafe.to)}
+    )}${(x) => x.text.slice(x._matchedRange.to)}
 					</div>`
   )}
 				${when.when(
@@ -50,7 +51,7 @@ const ListboxOptionTemplate = (context) => {
 	`;
 };
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
+const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
 
 const listboxOptionDefinition = vividElement.defineVividComponent(
   "option",

package/shared/definition36.js

@@ -22,6 +22,7 @@ const ListboxOptionTemplate = (context) => {
 			aria-checked="${(x) => x.checked}"
 			aria-selected="${(x) => x.selected}"
 			aria-disabled="${(x) => x.disabled}"
+			style="${(x) => x._isNotMatching ? "display: none" : ""}"
 		>
 			<div class="${getClasses}">
 				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
@@ -29,14 +30,14 @@ const ListboxOptionTemplate = (context) => {
     (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._hasMatchedText,
+      html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
 									>${(x) => x.text.slice(
-        x._matchedRangeSafe.from,
-        x._matchedRangeSafe.to
+        x._matchedRange.from,
+        x._matchedRange.to
       )}</span
 								>`
-    )}${(x) => x.text.slice(x._matchedRangeSafe.to)}
+    )}${(x) => x.text.slice(x._matchedRange.to)}
 					</div>`
   )}
 				${when(
@@ -48,7 +49,7 @@ const ListboxOptionTemplate = (context) => {
 	`;
 };
 
-const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
+const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([aria-checked=true]) .base{--focus-stroke-color: var(--vvd-color-neutral-500);--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{font:var(--vvd-typography-base)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{margin-left:auto;font-size:var(--_option-icon-size)}";
 
 const listboxOptionDefinition = defineVividComponent(
   "option",

package/shared/definition37.cjs

@@ -75,8 +75,9 @@ class Pagination extends vividElement.VividElement {
   totalChanged(_, newValue) {
     if (newValue < 0) {
       this.total = 0;
+      return;
     }
-    this.selectedIndex = 0;
+    this.#constrainSelectedIndex();
   }
   selectedIndexChanged(oldValue, newValue) {
     if (oldValue === void 0) return;
@@ -85,12 +86,25 @@ class Pagination extends vividElement.VividElement {
       total: this.total,
       oldIndex: oldValue
     });
+    this.#constrainSelectedIndex();
   }
   paginationButtonsChanged(_, newValue) {
     newValue.forEach((button) => {
       button.shadowRoot.querySelector("button").setAttribute("part", "button");
     });
   }
+  get #constrainedSelectedIndex() {
+    return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
+  }
+  #constrainSelectedIndex() {
+    if (this.selectedIndex !== this.#constrainedSelectedIndex) {
+      window.queueMicrotask(() => {
+        if (this.selectedIndex !== this.#constrainedSelectedIndex) {
+          this.selectedIndex = this.#constrainedSelectedIndex;
+        }
+      });
+    }
+  }
 }
 __decorateClass([
   vividElement.attr