@vonage/vivid 4.12.1 → 4.14.0

package/lib/text-field/text-field.d.ts

@@ -1,11 +1,32 @@
-import { TextField as FoundationTextfield } from '@microsoft/fast-foundation';
 import type { Appearance, Shape, Size } from '../enums';
 import { AffixIcon, type ErrorText, type FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
+import { ARIAGlobalStatesAndProperties } from '../../shared/foundation/patterns';
+import { FormAssociatedTextField } from './text-field.form-associated';
 export type TextFieldAppearance = Extract<Appearance, Appearance.Fieldset | Appearance.Ghost>;
 export type TextFieldShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 export type TextFieldSize = Extract<Size, Size.Condensed | Size.Normal>;
-export declare class TextField extends FoundationTextfield {
+export declare const TextFieldType: {
+    readonly email: "email";
+    readonly password: "password";
+    readonly tel: "tel";
+    readonly text: "text";
+    readonly url: "url";
+};
+export type TextFieldType = typeof TextFieldType[keyof typeof TextFieldType];
+export declare class TextField extends FormAssociatedTextField {
     #private;
+    readOnly: boolean;
+    autofocus: boolean;
+    placeholder: string;
+    type: TextFieldType;
+    list: string;
+    maxlength: number;
+    minlength: number;
+    pattern: string;
+    size: number;
+    spellcheck: boolean;
+    select(): void;
+    validate(): void;
     appearance?: TextFieldAppearance;
     shape?: TextFieldShape;
     autoComplete?: string;
@@ -16,5 +37,9 @@ export declare class TextField extends FoundationTextfield {
     disconnectedCallback(): void;
     focus(): void;
 }
-export interface TextField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText {
+export declare class DelegatesARIATextbox {
+}
+export interface DelegatesARIATextbox extends ARIAGlobalStatesAndProperties {
+}
+export interface TextField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, DelegatesARIATextbox {
 }

package/lib/text-field/text-field.form-associated.d.ts

@@ -0,0 +1,11 @@
+import { FormAssociated } from '../../shared/foundation/form-associated/form-associated';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+declare class _TextField extends VividElement {
+}
+interface _TextField extends FormAssociated {
+}
+declare const FormAssociatedTextField_base: typeof _TextField;
+export declare class FormAssociatedTextField extends FormAssociatedTextField_base {
+    proxy: HTMLInputElement;
+}
+export {};

package/lib/text-field/text-field.template.d.ts

@@ -1,4 +1,3 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import type { TextField } from './text-field';
-export declare const TextfieldTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<TextField>;
+export declare const TextfieldTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TextField, any>;

package/lib/time-picker/definition.d.ts

@@ -1,3 +1 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const timePickerDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerTimePicker: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+export declare const registerTimePicker: (prefix?: string) => void;

package/lib/time-picker/time-picker.form-associated.d.ts

@@ -1,5 +1,6 @@
-import { FormAssociated, FoundationElement } from '@microsoft/fast-foundation';
-declare class _TimePicker extends FoundationElement {
+import { FormAssociated } from '../../shared/foundation/form-associated/form-associated';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+declare class _TimePicker extends VividElement {
 }
 interface _TimePicker extends FormAssociated {
 }

package/lib/time-picker/time-picker.template.d.ts

@@ -1,4 +1,4 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import type { TimePicker } from './time-picker';
-export declare const TimePickerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<TimePicker>;
+export declare const TimePickerTemplate: (context: VividElementDefinitionContext) => ViewTemplate<TimePicker, any>;

package/lib/toggletip/definition.d.ts

@@ -1,3 +1 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const toggletipDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerToggletip: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+export declare const registerToggletip: (prefix?: string) => void;

package/lib/toggletip/toggletip.d.ts

@@ -1,7 +1,7 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Placement } from '@floating-ui/dom';
 import { type Anchored } from '../../shared/patterns/anchored';
-export declare class Toggletip extends FoundationElement {
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+export declare class Toggletip extends VividElement {
     #private;
     headline?: string;
     alternate: boolean;

package/lib/toggletip/toggletip.template.d.ts

@@ -1,4 +1,3 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import type { Toggletip } from './toggletip';
-export declare const ToggletipTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Toggletip>;
+export declare const ToggletipTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<Toggletip, any>;

package/lib/tooltip/definition.d.ts

@@ -1,3 +1 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const tooltipDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerTooltip: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+export declare const registerTooltip: (prefix?: string) => void;

package/lib/tooltip/tooltip.d.ts

@@ -1,7 +1,7 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Placement } from '@floating-ui/dom';
 import { type Anchored } from '../../shared/patterns/anchored';
-export declare class Tooltip extends FoundationElement {
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+export declare class Tooltip extends VividElement {
     #private;
     text?: string;
     placement?: Placement;

package/lib/tooltip/tooltip.template.d.ts

@@ -1,4 +1,3 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import type { Tooltip } from './tooltip';
-export declare const TooltipTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Tooltip>;
+export declare const TooltipTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<Tooltip, any>;

package/lib/tree-item/definition.d.ts

@@ -1,3 +1 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const treeItemDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerTreeItem: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+export declare const registerTreeItem: (prefix?: string) => void;

package/lib/tree-item/tree-item.d.ts

@@ -1,7 +1,16 @@
-import { TreeItem as FastTreeItem } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIcon } from '../../shared/patterns/affix';
-export declare class TreeItem extends FastTreeItem {
+export declare function isTreeItemElement(el: Element): el is HTMLElement;
+export declare class TreeItem extends FoundationElement {
     text?: string;
+    expanded: boolean;
+    expandedChanged(): void;
+    selected: boolean;
+    selectedChanged(): void;
+    disabled: boolean;
+    itemsChanged(): void;
+    static focusItem(el: HTMLElement): void;
+    readonly isNestedItem: () => boolean;
 }
 export interface TreeItem extends AffixIcon {
 }

package/lib/tree-item/tree-item.template.d.ts

@@ -1,4 +1,4 @@
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import { TreeItem } from './tree-item';
-export declare const expandCollapseButton: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
-export declare const TreeItemTemplate: (context: ElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
+export declare const expandCollapseButton: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;
+export declare const TreeItemTemplate: (context: VividElementDefinitionContext) => import("@microsoft/fast-element").ViewTemplate<TreeItem, any>;

package/lib/tree-view/definition.d.ts

@@ -1,3 +1 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const treeViewDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerTreeView: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+export declare const registerTreeView: (prefix?: string) => void;

package/lib/tree-view/tree-view.d.ts

@@ -1,3 +1,17 @@
-import { TreeView as FastTreeView } from '@microsoft/fast-foundation';
-export declare class TreeView extends FastTreeView {
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { TreeItem } from '../tree-item/tree-item.js';
+export declare function getDisplayedNodes(rootNode: HTMLElement, selector: string): HTMLElement[];
+export declare class TreeView extends FoundationElement {
+    renderCollapsedNodes: boolean;
+    currentSelected: HTMLElement | TreeItem | null;
+    slottedTreeItemsChanged(): void;
+    private nested;
+    connectedCallback(): void;
+    private focusNextNode;
+    private setItems;
+    private getValidFocusableItem;
+    private checkForNestedItems;
+    private isFocusableElement;
+    private isSelectedElement;
+    private getVisibleNodes;
 }

package/lib/tree-view/tree-view.template.d.ts

@@ -1,2 +1,2 @@
 import type { TreeView } from './tree-view';
-export declare const TreeViewTemplate: () => import("@microsoft/fast-element").ViewTemplate<TreeView, any>;
+export declare const TreeViewTemplate: import("@microsoft/fast-element").ViewTemplate<TreeView, any>;

package/lib/video-player/definition.d.ts

@@ -1,3 +1 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const videoPlayerDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
-export declare const registerVideoPlayer: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;
+export declare const registerVideoPlayer: (prefix?: string) => void;

package/lib/video-player/video-player.d.ts

@@ -1,8 +1,8 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { MediaSkipBy } from '../enums';
 import { Localized } from '../../shared/patterns';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare const DEFAULT_PLAYBACK_RATES = "0.5, 1, 1.5, 2";
-export declare class VideoPlayer extends FoundationElement {
+export declare class VideoPlayer extends VividElement {
     #private;
     poster?: string;
     src?: string;

package/lib/video-player/video-player.template.d.ts

@@ -1,4 +1,2 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import { VideoPlayer } from './video-player';
-export declare const VideoPlayerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<VideoPlayer>;
+export declare const VideoPlayerTemplate: import("@microsoft/fast-element").ViewTemplate<VideoPlayer, any>;

package/listbox/index.cjs

@@ -1,8 +1,8 @@
 'use strict';
 
-const index = require('../shared/index.cjs');
-const definition = require('../shared/definition36.cjs');
-const listbox = require('../shared/listbox.cjs');
+const definition = require('../shared/definition35.cjs');
+const defineVividComponent = require('../shared/defineVividComponent.cjs');
+const listbox = require('../shared/listbox2.cjs');
 const slotted = require('../shared/slotted.cjs');
 const classNames = require('../shared/class-names.cjs');
 
@@ -13,44 +13,42 @@ const getClasses = ({ appearance, shape, disabled, orientation }) => classNames.
   [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
   [`orientation-${orientation}`, Boolean(orientation)]
 );
-const ListboxTemplate = () => {
-  return index.html`
-		<template
-			aria-activedescendant="${(x) => x.ariaActiveDescendant}"
-			aria-multiselectable="${(x) => x.ariaMultiSelectable}"
-			aria-orientation="${(x) => x.ariaOrientation}"
-			aria-label="listbox"
-			role="listbox"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-			@focusin="${(x, c) => x.focusinHandler(c.event)}"
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-			tabindex="${(x) => !x.disabled ? "0" : null}"
-		>
-			<div class="${getClasses}">
-				<slot
-					${slotted.slotted({
-    filter: listbox.ListboxElement.slottedOptionFilter,
-    flatten: true,
-    property: "slottedOptions"
-  })}
-				></slot>
-			</div>
-		</template>
-	`;
-};
+const ListboxTemplate = defineVividComponent.html`
+	<template
+		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
+		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
+		aria-orientation="${(x) => x.ariaOrientation}"
+		aria-label="listbox"
+		role="listbox"
+		@click="${(x, c) => x.clickHandler(c.event)}"
+		@focusin="${(x, c) => x.focusinHandler(c.event)}"
+		@keydown="${(x, c) => x.keydownHandler(c.event)}"
+		@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
+		tabindex="${(x) => !x.disabled ? "0" : null}"
+	>
+		<div class="${getClasses}">
+			<slot
+				${slotted.slotted({
+  filter: listbox.ListboxElement.slottedOptionFilter,
+  flatten: true,
+  property: "slottedOptions"
+})}
+			></slot>
+		</div>
+	</template>
+`;
 
 const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
 
-const listboxDefinition = listbox.Listbox.compose({
-  baseName: "listbox",
-  template: ListboxTemplate,
-  styles
-});
-const listboxRegistries = [
-  listboxDefinition(),
-  ...definition.listboxOptionRegistries
-];
-const registerListbox = index.registerFactory(listboxRegistries);
+const listboxDefinition = defineVividComponent.defineVividComponent(
+  "listbox",
+  listbox.Listbox,
+  ListboxTemplate,
+  [definition.listboxOptionDefinition],
+  {
+    styles
+  }
+);
+const registerListbox = defineVividComponent.createRegisterFunction(listboxDefinition);
 
 registerListbox();

package/listbox/index.js

@@ -1,6 +1,6 @@
-import { h as html, r as registerFactory } from '../shared/index.js';
-import { a as listboxOptionRegistries } from '../shared/definition36.js';
-import { L as ListboxElement, a as Listbox } from '../shared/listbox.js';
+import { l as listboxOptionDefinition } from '../shared/definition35.js';
+import { h as html, f as createRegisterFunction, d as defineVividComponent } from '../shared/defineVividComponent.js';
+import { L as ListboxElement, a as Listbox } from '../shared/listbox2.js';
 import { s as slotted } from '../shared/slotted.js';
 import { c as classNames } from '../shared/class-names.js';
 
@@ -11,44 +11,42 @@ const getClasses = ({ appearance, shape, disabled, orientation }) => classNames(
   [`shape-${shape}`, Boolean(shape) && orientation === "horizontal"],
   [`orientation-${orientation}`, Boolean(orientation)]
 );
-const ListboxTemplate = () => {
-  return html`
-		<template
-			aria-activedescendant="${(x) => x.ariaActiveDescendant}"
-			aria-multiselectable="${(x) => x.ariaMultiSelectable}"
-			aria-orientation="${(x) => x.ariaOrientation}"
-			aria-label="listbox"
-			role="listbox"
-			@click="${(x, c) => x.clickHandler(c.event)}"
-			@focusin="${(x, c) => x.focusinHandler(c.event)}"
-			@keydown="${(x, c) => x.keydownHandler(c.event)}"
-			@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
-			tabindex="${(x) => !x.disabled ? "0" : null}"
-		>
-			<div class="${getClasses}">
-				<slot
-					${slotted({
-    filter: ListboxElement.slottedOptionFilter,
-    flatten: true,
-    property: "slottedOptions"
-  })}
-				></slot>
-			</div>
-		</template>
-	`;
-};
+const ListboxTemplate = html`
+	<template
+		aria-activedescendant="${(x) => x.ariaActiveDescendant}"
+		aria-multiselectable="${(x) => x.ariaMultiSelectable}"
+		aria-orientation="${(x) => x.ariaOrientation}"
+		aria-label="listbox"
+		role="listbox"
+		@click="${(x, c) => x.clickHandler(c.event)}"
+		@focusin="${(x, c) => x.focusinHandler(c.event)}"
+		@keydown="${(x, c) => x.keydownHandler(c.event)}"
+		@mousedown="${(x, c) => x.mousedownHandler(c.event)}"
+		tabindex="${(x) => !x.disabled ? "0" : null}"
+	>
+		<div class="${getClasses}">
+			<slot
+				${slotted({
+  filter: ListboxElement.slottedOptionFilter,
+  flatten: true,
+  property: "slottedOptions"
+})}
+			></slot>
+		</div>
+	</template>
+`;
 
 const styles = ":host{display:inline-block;inline-size:fit-content}:host(:focus-within){outline:none}:host([disabled]){cursor:not-allowed}.base{--_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base{display:inline-flex;box-sizing:border-box;padding:4px;border-radius:var(--_listbox-border-radius);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);contain:paint;gap:4px;inline-size:100%}.base:not(.orientation-horizontal){flex-direction:column}.base:not(.shape-pill){--_listbox-border-radius: 8px}.base.shape-pill{--_listbox-border-radius: 24px}:host(:focus-within) .base{--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))}::slotted([role=option]){border-radius:var(--_listbox-border-radius);contain:content}.base.disabled ::slotted([role=option]){--_option-appearance-color-text: var(--_appearance-color-outline);pointer-events:none}";
 
-const listboxDefinition = Listbox.compose({
-  baseName: "listbox",
-  template: ListboxTemplate,
-  styles
-});
-const listboxRegistries = [
-  listboxDefinition(),
-  ...listboxOptionRegistries
-];
-const registerListbox = registerFactory(listboxRegistries);
+const listboxDefinition = defineVividComponent(
+  "listbox",
+  Listbox,
+  ListboxTemplate,
+  [listboxOptionDefinition],
+  {
+    styles
+  }
+);
+const registerListbox = createRegisterFunction(listboxDefinition);
 
 registerListbox();

package/menu/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition30.cjs');
+const definition = require('../shared/definition29.cjs');
 
 definition.registerMenu();

package/menu/index.js

@@ -1,3 +1,3 @@
-import { r as registerMenu } from '../shared/definition30.js';
+import { c as registerMenu } from '../shared/definition29.js';
 
 registerMenu();

package/nav/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition33.cjs');
+const definition = require('../shared/definition32.cjs');
 
 definition.registerNav();

package/nav/index.js

@@ -1,3 +1,3 @@
-import { r as registerNav } from '../shared/definition33.js';
+import { r as registerNav } from '../shared/definition32.js';
 
 registerNav();

package/nav-disclosure/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition31.cjs');
+const definition = require('../shared/definition30.cjs');
 
 definition.registerNavDisclosure();

package/nav-disclosure/index.js

@@ -1,3 +1,3 @@
-import { r as registerNavDisclosure } from '../shared/definition31.js';
+import { r as registerNavDisclosure } from '../shared/definition30.js';
 
 registerNavDisclosure();

package/nav-item/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition32.cjs');
+const definition = require('../shared/definition31.cjs');
 
 definition.registerNavItem();

package/nav-item/index.js

@@ -1,3 +1,3 @@
-import { r as registerNavItem } from '../shared/definition32.js';
+import { r as registerNavItem } from '../shared/definition31.js';
 
 registerNavItem();

package/note/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition34.cjs');
+const definition = require('../shared/definition33.cjs');
 
 definition.registerNote();

package/note/index.js

@@ -1,3 +1,3 @@
-import { r as registerNote } from '../shared/definition34.js';
+import { r as registerNote } from '../shared/definition33.js';
 
 registerNote();

package/number-field/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition35.cjs');
+const definition = require('../shared/definition34.cjs');
 
 definition.registerNumberField();

package/number-field/index.js

@@ -1,3 +1,3 @@
-import { r as registerNumberField } from '../shared/definition35.js';
+import { r as registerNumberField } from '../shared/definition34.js';
 
 registerNumberField();

package/option/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition36.cjs');
+const definition = require('../shared/definition35.cjs');
 
 definition.registerOption();

package/option/index.js

@@ -1,3 +1,3 @@
-import { r as registerOption } from '../shared/definition36.js';
+import { r as registerOption } from '../shared/definition35.js';
 
 registerOption();

package/package.json

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

package/pagination/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition37.cjs');
+const definition = require('../shared/definition36.cjs');
 
 definition.registerPagination();

package/pagination/index.js

@@ -1,3 +1,3 @@
-import { r as registerPagination } from '../shared/definition37.js';
+import { r as registerPagination } from '../shared/definition36.js';
 
 registerPagination();

package/popup/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition64.cjs');
+const definition = require('../shared/definition63.cjs');
 
 definition.registerPopup();

package/popup/index.js

@@ -1,3 +1,3 @@
-import { r as registerPopup } from '../shared/definition64.js';
+import { r as registerPopup } from '../shared/definition63.js';
 
 registerPopup();

package/progress/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition39.cjs');
+const definition = require('../shared/definition38.cjs');
 
 definition.registerProgress();

package/progress/index.js

@@ -1,3 +1,3 @@
-import { r as registerProgress } from '../shared/definition39.js';
+import { r as registerProgress } from '../shared/definition38.js';
 
 registerProgress();

package/progress-ring/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition38.cjs');
+const definition = require('../shared/definition37.cjs');
 
 definition.registerProgressRing();

package/progress-ring/index.js

@@ -1,3 +1,3 @@
-import { r as registerProgressRing } from '../shared/definition38.js';
+import { r as registerProgressRing } from '../shared/definition37.js';
 
 registerProgressRing();

package/radio/index.cjs

@@ -1,5 +1,5 @@
 'use strict';
 
-const definition = require('../shared/definition41.cjs');
+const definition = require('../shared/definition40.cjs');
 
 definition.registerRadio();

package/radio/index.js

@@ -1,3 +1,3 @@
-import { b as registerRadio } from '../shared/definition41.js';
+import { a as registerRadio } from '../shared/definition40.js';
 
 registerRadio();