@vonage/vivid-vue 5.23.1-preview.0 → 5.24.0

package/dist/generated/components/VAccordionItem.types.d.ts

@@ -33,6 +33,7 @@ export interface VAccordionItemProps {
     id?: string;
     meta?: string;
     noIndicator?: boolean;
+    secondaryText?: string;
     size?: 'condensed' | 'normal';
     'onBlur'?: (event: VAccordionItemEvents['blur']) => void;
     'onChange'?: (event: VAccordionItemEvents['change']) => void;

package/dist/generated/components/VAccordionItem.vue2.d.ts

@@ -38,6 +38,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean>;
         default: undefined;
     };
+    secondaryText: {
+        type: PropType<string>;
+        default: undefined;
+    };
     size: {
         type: PropType<"condensed" | "normal">;
         default: undefined;
@@ -82,6 +86,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean>;
         default: undefined;
     };
+    secondaryText: {
+        type: PropType<string>;
+        default: undefined;
+    };
     size: {
         type: PropType<"condensed" | "normal">;
         default: undefined;
@@ -97,5 +105,6 @@ declare const _default: import("vue").DefineComponent<{
     id: string;
     meta: string;
     noIndicator: boolean;
+    secondaryText: string;
 }>;
 export default _default;

package/dist/generated/components/VAccordionItem.vue3.d.ts

@@ -39,6 +39,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<boolean>;
         default: undefined;
     };
+    secondaryText: {
+        type: PropType<string>;
+        default: undefined;
+    };
     size: {
         type: PropType<"condensed" | "normal">;
         default: undefined;
@@ -105,6 +109,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<boolean>;
         default: undefined;
     };
+    secondaryText: {
+        type: PropType<string>;
+        default: undefined;
+    };
     size: {
         type: PropType<"condensed" | "normal">;
         default: undefined;
@@ -142,6 +150,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     id: string;
     meta: string;
     noIndicator: boolean;
+    secondaryText: string;
 }, SlotsType<{
     default: Record<string, never>;
     heading: Record<string, never>;

package/dist/generated/components/VDataGridCell.types.d.ts

@@ -53,6 +53,7 @@ export interface VDataGridCellProps {
         cellFocusTargetCallback?: ((cell: VwcDataGridCellElement) => HTMLElement);
         isRowHeader?: false | true;
     };
+    connotation?: 'accent' | 'cta';
     gridColumn?: string;
     rowData?: object;
     selected?: boolean;

package/dist/generated/components/VDataGridCell.vue2.d.ts

@@ -22,6 +22,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: undefined;
     };
+    connotation: {
+        type: PropType<"accent" | "cta">;
+        default: undefined;
+    };
     gridColumn: {
         type: PropType<string>;
         default: undefined;
@@ -63,6 +67,10 @@ declare const _default: import("vue").DefineComponent<{
         }>;
         default: undefined;
     };
+    connotation: {
+        type: PropType<"accent" | "cta">;
+        default: undefined;
+    };
     gridColumn: {
         type: PropType<string>;
         default: undefined;
@@ -80,6 +88,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    connotation: "accent" | "cta";
     cellType: "default" | "columnheader" | "rowheader";
     columnDefinition: {
         sortDirection?: null | "none" | "ascending" | "descending" | "other";

package/dist/generated/components/VDataGridCell.vue3.d.ts

@@ -23,6 +23,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>;
         default: undefined;
     };
+    connotation: {
+        type: PropType<"accent" | "cta">;
+        default: undefined;
+    };
     gridColumn: {
         type: PropType<string>;
         default: undefined;
@@ -101,6 +105,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }>;
         default: undefined;
     };
+    connotation: {
+        type: PropType<"accent" | "cta">;
+        default: undefined;
+    };
     gridColumn: {
         type: PropType<string>;
         default: undefined;
@@ -155,6 +163,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         currentTarget: VwcDataGridCellElement;
     }) => any) | undefined;
 }>, {
+    connotation: "accent" | "cta";
     cellType: "default" | "columnheader" | "rowheader";
     columnDefinition: {
         sortDirection?: null | "none" | "ascending" | "descending" | "other";

package/dist/generated/components/VDataGridRow.types.d.ts

@@ -44,6 +44,7 @@ export interface VDataGridRowProps {
         cellFocusTargetCallback?: ((cell: VwcDataGridCellElement) => HTMLElement);
         isRowHeader?: false | true;
     }[];
+    connotation?: 'accent' | 'cta';
     gridTemplateColumns?: string;
     headerCellItemTemplate?: any;
     rowData?: object;

package/dist/generated/components/VDataGridRow.vue2.d.ts

@@ -20,6 +20,10 @@ declare const _default: import("vue").DefineComponent<{
         }[]>;
         default: undefined;
     };
+    connotation: {
+        type: PropType<"accent" | "cta">;
+        default: undefined;
+    };
     gridTemplateColumns: {
         type: PropType<string>;
         default: undefined;
@@ -67,6 +71,10 @@ declare const _default: import("vue").DefineComponent<{
         }[]>;
         default: undefined;
     };
+    connotation: {
+        type: PropType<"accent" | "cta">;
+        default: undefined;
+    };
     gridTemplateColumns: {
         type: PropType<string>;
         default: undefined;
@@ -92,6 +100,7 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
 }>>, {
+    connotation: "accent" | "cta";
     cellItemTemplate: any;
     columnDefinitions: {
         columnDataKey: string;

package/dist/generated/components/VDataGridRow.vue3.d.ts

@@ -21,6 +21,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }[]>;
         default: undefined;
     };
+    connotation: {
+        type: PropType<"accent" | "cta">;
+        default: undefined;
+    };
     gridTemplateColumns: {
         type: PropType<string>;
         default: undefined;
@@ -98,6 +102,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         }[]>;
         default: undefined;
     };
+    connotation: {
+        type: PropType<"accent" | "cta">;
+        default: undefined;
+    };
     gridTemplateColumns: {
         type: PropType<string>;
         default: undefined;
@@ -153,6 +161,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         currentTarget: VwcDataGridRowElement;
     }) => any) | undefined;
 }>, {
+    connotation: "accent" | "cta";
     cellItemTemplate: any;
     columnDefinitions: {
         columnDataKey: string;

package/dist/generated/components/VDialPad.types.d.ts

@@ -42,6 +42,7 @@ export interface VDialPadProps {
     helperText?: string;
     noCall?: boolean;
     noInput?: boolean;
+    noLetters?: boolean;
     pattern?: string;
     pending?: boolean;
     placeholder?: string;

package/dist/generated/components/VDialPad.vue2.d.ts

@@ -37,6 +37,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean>;
         default: undefined;
     };
+    noLetters: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
     pattern: {
         type: PropType<string>;
         default: undefined;
@@ -108,6 +112,10 @@ declare const _default: import("vue").DefineComponent<{
         type: PropType<boolean>;
         default: undefined;
     };
+    noLetters: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
     pattern: {
         type: PropType<string>;
         default: undefined;
@@ -152,6 +160,7 @@ declare const _default: import("vue").DefineComponent<{
     endCallButtonLabel: string;
     noCall: boolean;
     noInput: boolean;
+    noLetters: boolean;
     pattern: string;
 }>;
 export default _default;

package/dist/generated/components/VDialPad.vue3.d.ts

@@ -38,6 +38,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<boolean>;
         default: undefined;
     };
+    noLetters: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
     pattern: {
         type: PropType<string>;
         default: undefined;
@@ -141,6 +145,10 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         type: PropType<boolean>;
         default: undefined;
     };
+    noLetters: {
+        type: PropType<boolean>;
+        default: undefined;
+    };
     pattern: {
         type: PropType<string>;
         default: undefined;
@@ -217,6 +225,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     endCallButtonLabel: string;
     noCall: boolean;
     noInput: boolean;
+    noLetters: boolean;
     pattern: string;
 }, SlotsType<Record<string, never>>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 export default _default;

package/dist/generated/components/VOptgroup.d.ts

@@ -0,0 +1,7 @@
+import { VNode } from 'vue';
+import VOptgroupVue2 from './VOptgroup.vue2';
+import VOptgroupVue3 from './VOptgroup.vue3';
+
+type IsVue2 = "data" extends keyof VNode ? true : false;
+declare const _default: IsVue2 extends true ? typeof VOptgroupVue2 : typeof VOptgroupVue3;
+export default _default;

package/dist/generated/components/VOptgroup.types.d.ts

@@ -0,0 +1,29 @@
+import type { VwcOptgroupElement } from '@vonage/vivid';
+export interface VOptgroupEvents {
+    'blur': FocusEvent & {
+        currentTarget: VwcOptgroupElement;
+    };
+    'click': MouseEvent & {
+        currentTarget: VwcOptgroupElement;
+    };
+    'focus': FocusEvent & {
+        currentTarget: VwcOptgroupElement;
+    };
+    'input': Event & {
+        currentTarget: VwcOptgroupElement;
+    };
+    'keydown': KeyboardEvent & {
+        currentTarget: VwcOptgroupElement;
+    };
+    'keyup': KeyboardEvent & {
+        currentTarget: VwcOptgroupElement;
+    };
+}
+export interface VOptgroupProps {
+    'onBlur'?: (event: VOptgroupEvents['blur']) => void;
+    'onClick'?: (event: VOptgroupEvents['click']) => void;
+    'onFocus'?: (event: VOptgroupEvents['focus']) => void;
+    'onInput'?: (event: VOptgroupEvents['input']) => void;
+    'onKeydown'?: (event: VOptgroupEvents['keydown']) => void;
+    'onKeyup'?: (event: VOptgroupEvents['keyup']) => void;
+}

package/dist/generated/components/VOptgroup.vue2.d.ts

@@ -0,0 +1,6 @@
+import type { VwcOptgroupElement } from '@vonage/vivid';
+declare const _default: import("vue").DefineComponent<{}, {
+    componentName: import("vue").Ref<string>;
+    element: import("vue").Ref<VwcOptgroupElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "click" | "focus" | "input" | "keydown" | "keyup")[], string, Readonly<import("vue").ExtractPropTypes<{}>>, {}>;
+export default _default;

package/dist/generated/components/VOptgroup.vue3.d.ts

@@ -0,0 +1,48 @@
+import type { VwcOptgroupElement } from '@vonage/vivid';
+import type { SlotsType } from 'vue';
+declare const _default: import("vue").DefineComponent<{}, {
+    componentName: import("vue").Ref<string>;
+    element: import("vue").Ref<VwcOptgroupElement | null, VwcOptgroupElement | null>;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    blur(event: FocusEvent & {
+        currentTarget: VwcOptgroupElement;
+    }): true;
+    click(event: MouseEvent & {
+        currentTarget: VwcOptgroupElement;
+    }): true;
+    focus(event: FocusEvent & {
+        currentTarget: VwcOptgroupElement;
+    }): true;
+    input(event: Event & {
+        currentTarget: VwcOptgroupElement;
+    }): true;
+    keydown(event: KeyboardEvent & {
+        currentTarget: VwcOptgroupElement;
+    }): true;
+    keyup(event: KeyboardEvent & {
+        currentTarget: VwcOptgroupElement;
+    }): true;
+}, string, import("vue").PublicProps, Readonly<{}> & Readonly<{
+    onBlur?: ((event: FocusEvent & {
+        currentTarget: VwcOptgroupElement;
+    }) => any) | undefined;
+    onClick?: ((event: MouseEvent & {
+        currentTarget: VwcOptgroupElement;
+    }) => any) | undefined;
+    onFocus?: ((event: FocusEvent & {
+        currentTarget: VwcOptgroupElement;
+    }) => any) | undefined;
+    onInput?: ((event: Event & {
+        currentTarget: VwcOptgroupElement;
+    }) => any) | undefined;
+    onKeydown?: ((event: KeyboardEvent & {
+        currentTarget: VwcOptgroupElement;
+    }) => any) | undefined;
+    onKeyup?: ((event: KeyboardEvent & {
+        currentTarget: VwcOptgroupElement;
+    }) => any) | undefined;
+}>, {}, SlotsType<{
+    default: Record<string, never>;
+    label: Record<string, never>;
+}>, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/generated/components/index.d.ts

@@ -43,6 +43,7 @@ export { default as VNavDisclosure } from './VNavDisclosure';
 export { default as VNavItem } from './VNavItem';
 export { default as VNote } from './VNote';
 export { default as VNumberField } from './VNumberField';
+export { default as VOptgroup } from './VOptgroup';
 export { default as VOption } from './VOption';
 export { default as VPagination } from './VPagination';
 export { default as VPlatformSwitch } from './VPlatformSwitch';

package/dist/generated/types.d.ts

@@ -88,6 +88,8 @@ import type { VNote } from './components';
 import type { VNoteEvents, VNoteProps } from './components/VNote.types';
 import type { VNumberField } from './components';
 import type { VNumberFieldEvents, VNumberFieldProps } from './components/VNumberField.types';
+import type { VOptgroup } from './components';
+import type { VOptgroupEvents, VOptgroupProps } from './components/VOptgroup.types';
 import type { VOption } from './components';
 import type { VOptionEvents, VOptionProps } from './components/VOption.types';
 import type { VPagination } from './components';
@@ -215,6 +217,7 @@ export type VProps = {
     VNavItem: VNavItemProps;
     VNote: VNoteProps;
     VNumberField: VNumberFieldProps;
+    VOptgroup: VOptgroupProps;
     VOption: VOptionProps;
     VPagination: VPaginationProps;
     VPlatformSwitch: VPlatformSwitchProps;
@@ -302,6 +305,7 @@ export type VEvents = {
     VNavItem: VNavItemEvents;
     VNote: VNoteEvents;
     VNumberField: VNumberFieldEvents;
+    VOptgroup: VOptgroupEvents;
     VOption: VOptionEvents;
     VPagination: VPaginationEvents;
     VPlatformSwitch: VPlatformSwitchEvents;
@@ -389,6 +393,7 @@ export type VSlots = {
     VNavItem: ComponentSlots<typeof VNavItem>;
     VNote: ComponentSlots<typeof VNote>;
     VNumberField: ComponentSlots<typeof VNumberField>;
+    VOptgroup: ComponentSlots<typeof VOptgroup>;
     VOption: ComponentSlots<typeof VOption>;
     VPagination: ComponentSlots<typeof VPagination>;
     VPlatformSwitch: ComponentSlots<typeof VPlatformSwitch>;

package/dist/index.cjs

@@ -239,6 +239,13 @@ var VAccordionItem_default = (0, vue.defineComponent)({
 			default: void 0
 		},
 		/**
+		* Optional supporting text shown below the heading text.
+		*/
+		secondaryText: {
+			type: String,
+			default: void 0
+		},
+		/**
 		* The size the accordion-item should have.
 		*/
 		size: {
@@ -275,6 +282,7 @@ var VAccordionItem_default = (0, vue.defineComponent)({
 				...this.id !== void 0 ? { "id": this.id } : {},
 				...this.meta !== void 0 ? { "meta": this.meta } : {},
 				...this.noIndicator !== void 0 ? { "no-indicator": this.noIndicator } : {},
+				...this.secondaryText !== void 0 ? { "secondary-text": this.secondaryText } : {},
 				...this.size !== void 0 ? { "size": this.size } : {}
 			},
 			class: "vvd-component",
@@ -320,6 +328,7 @@ var VAccordionItem_default = (0, vue.defineComponent)({
 				...this.id !== void 0 ? { "^id": this.id } : {},
 				...this.meta !== void 0 ? { "^meta": this.meta } : {},
 				...this.noIndicator !== void 0 && this.noIndicator !== false ? { "^no-indicator": this.noIndicator } : {},
+				...this.secondaryText !== void 0 ? { "^secondary-text": this.secondaryText } : {},
 				...this.size !== void 0 ? { "^size": this.size } : {}
 			}),
 			"onBlur": (event) => {
@@ -3023,6 +3032,7 @@ var VCombobox_default = (0, vue.defineComponent)({
 		},
 		/**
 		* Sets the placeholder value of the element, generally used to provide a hint to the user.
+		* Using this attribute is not a valid substitute for a labeling element.
 		*/
 		placeholder: {
 			type: String,
@@ -3030,8 +3040,6 @@ var VCombobox_default = (0, vue.defineComponent)({
 		},
 		/**
 		* the placement of the combobox
-		* 
-		* HTML Attribute: string
 		*/
 		placement: {
 			type: String,
@@ -3712,6 +3720,13 @@ var VDataGridCell_default = (0, vue.defineComponent)({
 			default: void 0
 		},
 		/**
+		* The connotation of the cell, affecting hover and selected colors.
+		*/
+		connotation: {
+			type: String,
+			default: void 0
+		},
+		/**
 		* The column index of the cell.
 		* This will be applied to the css grid-column-index value
 		* applied to the cell
@@ -3765,6 +3780,7 @@ var VDataGridCell_default = (0, vue.defineComponent)({
 			ref: "element",
 			attrs: {
 				...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
+				...this.connotation !== void 0 ? { "connotation": this.connotation } : {},
 				...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
 				...this.selected !== void 0 ? { "selected": this.selected } : {},
 				...this.sortDirection !== void 0 ? { "sort-direction": this.sortDirection } : {}
@@ -3810,6 +3826,7 @@ var VDataGridCell_default = (0, vue.defineComponent)({
 			...handleVue3Props({
 				...this.cellType !== void 0 ? { "^cell-type": this.cellType } : {},
 				...this.columnDefinition !== void 0 ? { ".columnDefinition": this.columnDefinition } : {},
+				...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
 				...this.gridColumn !== void 0 ? { "^grid-column": this.gridColumn } : {},
 				...this.rowData !== void 0 ? { ".rowData": this.rowData } : {},
 				...this.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
@@ -3862,6 +3879,13 @@ var VDataGridRow_default = (0, vue.defineComponent)({
 			default: void 0
 		},
 		/**
+		* The connotation of the row, affecting hover and selected colors.
+		*/
+		connotation: {
+			type: String,
+			default: void 0
+		},
+		/**
 		* String that gets applied to the the css gridTemplateColumns attribute for the row
 		* x
 		*/
@@ -3927,6 +3951,7 @@ var VDataGridRow_default = (0, vue.defineComponent)({
 		if (isVue2) return (0, vue.h)(this.componentName, {
 			ref: "element",
 			attrs: {
+				...this.connotation !== void 0 ? { "connotation": this.connotation } : {},
 				...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
 				...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
 				...this.selected !== void 0 ? { "selected": this.selected } : {}
@@ -3972,6 +3997,7 @@ var VDataGridRow_default = (0, vue.defineComponent)({
 			...handleVue3Props({
 				...this.cellItemTemplate !== void 0 ? { ".cellItemTemplate": this.cellItemTemplate } : {},
 				...this.columnDefinitions !== void 0 ? { ".columnDefinitions": this.columnDefinitions } : {},
+				...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
 				...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
 				...this.headerCellItemTemplate !== void 0 ? { ".headerCellItemTemplate": this.headerCellItemTemplate } : {},
 				...this.rowData !== void 0 ? { ".rowData": this.rowData } : {},
@@ -4892,6 +4918,13 @@ var VDialPad_default = (0, vue.defineComponent)({
 			default: void 0
 		},
 		/**
+		* Hides the letter labels shown below digit buttons
+		*/
+		noLetters: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
 		* Regular expression to validate the value of the input element
 		*/
 		pattern: {
@@ -4982,6 +5015,7 @@ var VDialPad_default = (0, vue.defineComponent)({
 				...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
 				...this.noCall !== void 0 ? { "no-call": this.noCall } : {},
 				...this.noInput !== void 0 ? { "no-input": this.noInput } : {},
+				...this.noLetters !== void 0 ? { "no-letters": this.noLetters } : {},
 				...this.pattern !== void 0 ? { "pattern": this.pattern } : {},
 				...this.pending !== void 0 ? { "pending": this.pending } : {},
 				...this.placeholder !== void 0 ? { "placeholder": this.placeholder } : {},
@@ -5037,6 +5071,7 @@ var VDialPad_default = (0, vue.defineComponent)({
 				...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
 				...this.noCall !== void 0 && this.noCall !== false ? { "^no-call": this.noCall } : {},
 				...this.noInput !== void 0 && this.noInput !== false ? { "^no-input": this.noInput } : {},
+				...this.noLetters !== void 0 && this.noLetters !== false ? { "^no-letters": this.noLetters } : {},
 				...this.pattern !== void 0 ? { "^pattern": this.pattern } : {},
 				...this.pending !== void 0 && this.pending !== false ? { "^pending": this.pending } : {},
 				...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
@@ -7244,7 +7279,6 @@ var VNavDisclosure_default = (0, vue.defineComponent)({
 //#endregion
 //#region src/generated/components/VNavItem.ts
 /**
-* A Nav Item Custom HTML Element.
 * Based largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .
 */
 var VNavItem_default = (0, vue.defineComponent)({
@@ -7665,6 +7699,7 @@ var VNumberField_default = (0, vue.defineComponent)({
 		},
 		/**
 		* Sets the placeholder value of the element, generally used to provide a hint to the user.
+		* Using this attribute does is not a valid substitute for a labeling element.
 		*/
 		placeholder: {
 			type: String,
@@ -7935,9 +7970,81 @@ var VNumberField_default = (0, vue.defineComponent)({
 	}
 });
 //#endregion
+//#region src/generated/components/VOptgroup.ts
+/**
+* Groups options within Select, Searchable Select, or Combobox components
+*/
+var VOptgroup_default = (0, vue.defineComponent)({
+	name: "VOptgroup",
+	emits: [
+		"blur",
+		"click",
+		"focus",
+		"input",
+		"keydown",
+		"keyup"
+	],
+	methods: {},
+	setup(props, ctx) {
+		return {
+			componentName: registerComponent("optgroup", _vonage_vivid.registerOptgroup),
+			element: (0, vue.ref)(null)
+		};
+	},
+	render() {
+		if (isVue2) return (0, vue.h)(this.componentName, {
+			ref: "element",
+			attrs: {},
+			class: "vvd-component",
+			on: {
+				"blur": (event) => {
+					this.$emit("blur", event);
+				},
+				"click": (event) => {
+					this.$emit("click", event);
+				},
+				"focus": (event) => {
+					this.$emit("focus", event);
+				},
+				"input": (event) => {
+					this.$emit("input", event);
+				},
+				"keydown": (event) => {
+					this.$emit("keydown", event);
+				},
+				"keyup": (event) => {
+					this.$emit("keyup", event);
+				}
+			}
+		}, [this.$slots.default, handleNamedSlotV2("label", this.$slots["label"])]);
+		return (0, vue.h)(this.componentName, {
+			ref: "element",
+			class: "vvd-component",
+			...handleVue3Props({}),
+			"onBlur": (event) => {
+				this.$emit("blur", event);
+			},
+			"onClick": (event) => {
+				this.$emit("click", event);
+			},
+			"onFocus": (event) => {
+				this.$emit("focus", event);
+			},
+			"onInput": (event) => {
+				this.$emit("input", event);
+			},
+			"onKeydown": (event) => {
+				this.$emit("keydown", event);
+			},
+			"onKeyup": (event) => {
+				this.$emit("keyup", event);
+			}
+		}, [this.$slots.default?.(), handleNamedSlotV3("label", this.$slots["label"]?.())]);
+	}
+});
+//#endregion
 //#region src/generated/components/VOption.ts
 /**
-* An Option Custom HTML Element.
 * Implements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .
 */
 var VOption_default = (0, vue.defineComponent)({
@@ -12901,6 +13008,7 @@ var VTextArea_default = (0, vue.defineComponent)({
 		},
 		/**
 		* Sets the placeholder value of the element, generally used to provide a hint to the user.
+		* Using this attribute does is not a valid substitute for a labeling element.
 		*/
 		placeholder: {
 			type: String,
@@ -13259,6 +13367,8 @@ var VTextField_default = (0, vue.defineComponent)({
 		},
 		/**
 		* Text that appears in the input element when it has no value set
+		* 
+		* Using this attribute does is not a valid substitute for a labeling element.
 		*/
 		placeholder: {
 			type: String,
@@ -15688,15 +15798,15 @@ var spezia_variable_default = "@font-face {\n  font-display: block;\n  font-fami
 var optionalStyles = {
 	theme: {
 		name: "core/theme",
-		css: "/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n.vvd-root {\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n:root.vvd-root {\n  background-color: var(--vvd-color-canvas);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  	--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  	--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  	--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n"
+		css: ".vvd-root {\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n:root.vvd-root {\n  background-color: var(--vvd-color-canvas);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(\n  	in sRGB,\n  	var(--vvd-color-neutral-950),\n  	transparent 70%\n  );\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  	--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  	--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  	--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n"
 	},
 	typography: {
 		name: "core/typography",
-		css: "/**\n * Do not edit directly, this file was auto-generated.\n */\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root h5,\n.vvd-root .heading5 {\n  font: var(--vvd-typography-heading-5);\n  margin-block: 16px;\n}\n.vvd-root h6,\n.vvd-root .heading6 {\n  font: var(--vvd-typography-heading-6);\n  margin-block: 14px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong,\n.vvd-root h5 b,\n.vvd-root h5 strong,\n.vvd-root .heading5 b,\n.vvd-root .heading5 strong,\n.vvd-root h6 b,\n.vvd-root h6 strong,\n.vvd-root .heading6 b,\n.vvd-root .heading6 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight,\n.vvd-root h5.tight,\n.vvd-root .heading5.tight,\n.vvd-root h6.tight,\n.vvd-root .heading6.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  position: relative;\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n"
+		css: ".vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root h5,\n.vvd-root .heading5 {\n  font: var(--vvd-typography-heading-5);\n  margin-block: 16px;\n}\n.vvd-root h6,\n.vvd-root .heading6 {\n  font: var(--vvd-typography-heading-6);\n  margin-block: 14px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong,\n.vvd-root h5 b,\n.vvd-root h5 strong,\n.vvd-root .heading5 b,\n.vvd-root .heading5 strong,\n.vvd-root h6 b,\n.vvd-root h6 strong,\n.vvd-root .heading6 b,\n.vvd-root .heading6 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight,\n.vvd-root h5.tight,\n.vvd-root .heading5.tight,\n.vvd-root h6.tight,\n.vvd-root .heading6.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  position: relative;\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n"
 	},
 	vivid2Compat: {
 		name: "tokens/vivid-2-compat",
-		css: "/**\n * Do not edit directly, this file was auto-generated.\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  	--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n"
+		css: ".vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(--vvd-color-neutral-50);\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n"
 	}
 };
 //#endregion
@@ -15761,9 +15871,7 @@ var vividVue = { install(app, options) {
 	}
 	if (options.customComponentPrefix) setCustomComponentPrefix(options.customComponentPrefix);
 } };
-/**
-* @deprecated Use vividVue instead.
-*/
+/** @deprecated Use vividVue instead. */
 var vivid3 = vividVue;
 //#endregion
 exports.Icon = Icon;
@@ -15812,6 +15920,7 @@ exports.VNavDisclosure = VNavDisclosure_default;
 exports.VNavItem = VNavItem_default;
 exports.VNote = VNote_default;
 exports.VNumberField = VNumberField_default;
+exports.VOptgroup = VOptgroup_default;
 exports.VOption = VOption_default;
 exports.VPagination = VPagination_default;
 exports.VPlatformSwitch = VPlatformSwitch_default;

package/dist/index.js

@@ -1,5 +1,5 @@
 import { defineComponent, h, onBeforeMount, ref, version } from "vue";
-import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerColorPicker, registerCombobox, registerContextualHelp, registerCountry, registerCountryGroup, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDateTimePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerFlag, registerHeader, registerIcon, registerKbdKey, registerKbdShortcut, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOption, registerPagination, registerPlatformSwitch, registerPopover, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerRichTextView, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerStatus, registerSwitch, registerTab, registerTabPanel, registerTable, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from "@vonage/vivid";
+import { registerAccordion, registerAccordionItem, registerActionGroup, registerAlert, registerAudioPlayer, registerAvatar, registerBadge, registerBanner, registerBreadcrumb, registerBreadcrumbItem, registerButton, registerCalendar, registerCalendarEvent, registerCard, registerCheckbox, registerColorPicker, registerCombobox, registerContextualHelp, registerCountry, registerCountryGroup, registerDataGrid, registerDatePicker, registerDateRangePicker, registerDateTimePicker, registerDialPad, registerDialog, registerDivider, registerEmptyState, registerFab, registerFilePicker, registerFlag, registerHeader, registerIcon, registerKbdKey, registerKbdShortcut, registerLayout, registerMenu, registerMenuItem, registerNav, registerNavDisclosure, registerNavItem, registerNote, registerNumberField, registerOptgroup, registerOption, registerPagination, registerPlatformSwitch, registerPopover, registerProgress, registerProgressRing, registerRadio, registerRadioGroup, registerRangeSlider, registerRichTextEditor, registerRichTextView, registerSearchableSelect, registerSelect, registerSelectableBox, registerSideDrawer, registerSimpleColorPicker, registerSlider, registerSplitButton, registerStatus, registerSwitch, registerTab, registerTabPanel, registerTable, registerTabs, registerTag, registerTagGroup, registerTextArea, registerTextField, registerTimePicker, registerToggletip, registerTooltip, registerTreeItem, registerTreeView, registerVideoPlayer } from "@vonage/vivid";
 //#region src/init/prefix.ts
 var CustomComponentPrefix = ref("vvd3");
 /**
@@ -238,6 +238,13 @@ var VAccordionItem_default = defineComponent({
 			default: void 0
 		},
 		/**
+		* Optional supporting text shown below the heading text.
+		*/
+		secondaryText: {
+			type: String,
+			default: void 0
+		},
+		/**
 		* The size the accordion-item should have.
 		*/
 		size: {
@@ -274,6 +281,7 @@ var VAccordionItem_default = defineComponent({
 				...this.id !== void 0 ? { "id": this.id } : {},
 				...this.meta !== void 0 ? { "meta": this.meta } : {},
 				...this.noIndicator !== void 0 ? { "no-indicator": this.noIndicator } : {},
+				...this.secondaryText !== void 0 ? { "secondary-text": this.secondaryText } : {},
 				...this.size !== void 0 ? { "size": this.size } : {}
 			},
 			class: "vvd-component",
@@ -319,6 +327,7 @@ var VAccordionItem_default = defineComponent({
 				...this.id !== void 0 ? { "^id": this.id } : {},
 				...this.meta !== void 0 ? { "^meta": this.meta } : {},
 				...this.noIndicator !== void 0 && this.noIndicator !== false ? { "^no-indicator": this.noIndicator } : {},
+				...this.secondaryText !== void 0 ? { "^secondary-text": this.secondaryText } : {},
 				...this.size !== void 0 ? { "^size": this.size } : {}
 			}),
 			"onBlur": (event) => {
@@ -3022,6 +3031,7 @@ var VCombobox_default = defineComponent({
 		},
 		/**
 		* Sets the placeholder value of the element, generally used to provide a hint to the user.
+		* Using this attribute is not a valid substitute for a labeling element.
 		*/
 		placeholder: {
 			type: String,
@@ -3029,8 +3039,6 @@ var VCombobox_default = defineComponent({
 		},
 		/**
 		* the placement of the combobox
-		* 
-		* HTML Attribute: string
 		*/
 		placement: {
 			type: String,
@@ -3711,6 +3719,13 @@ var VDataGridCell_default = defineComponent({
 			default: void 0
 		},
 		/**
+		* The connotation of the cell, affecting hover and selected colors.
+		*/
+		connotation: {
+			type: String,
+			default: void 0
+		},
+		/**
 		* The column index of the cell.
 		* This will be applied to the css grid-column-index value
 		* applied to the cell
@@ -3764,6 +3779,7 @@ var VDataGridCell_default = defineComponent({
 			ref: "element",
 			attrs: {
 				...this.cellType !== void 0 ? { "cell-type": this.cellType } : {},
+				...this.connotation !== void 0 ? { "connotation": this.connotation } : {},
 				...this.gridColumn !== void 0 ? { "grid-column": this.gridColumn } : {},
 				...this.selected !== void 0 ? { "selected": this.selected } : {},
 				...this.sortDirection !== void 0 ? { "sort-direction": this.sortDirection } : {}
@@ -3809,6 +3825,7 @@ var VDataGridCell_default = defineComponent({
 			...handleVue3Props({
 				...this.cellType !== void 0 ? { "^cell-type": this.cellType } : {},
 				...this.columnDefinition !== void 0 ? { ".columnDefinition": this.columnDefinition } : {},
+				...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
 				...this.gridColumn !== void 0 ? { "^grid-column": this.gridColumn } : {},
 				...this.rowData !== void 0 ? { ".rowData": this.rowData } : {},
 				...this.selected !== void 0 && this.selected !== false ? { "^selected": this.selected } : {},
@@ -3861,6 +3878,13 @@ var VDataGridRow_default = defineComponent({
 			default: void 0
 		},
 		/**
+		* The connotation of the row, affecting hover and selected colors.
+		*/
+		connotation: {
+			type: String,
+			default: void 0
+		},
+		/**
 		* String that gets applied to the the css gridTemplateColumns attribute for the row
 		* x
 		*/
@@ -3926,6 +3950,7 @@ var VDataGridRow_default = defineComponent({
 		if (isVue2) return h(this.componentName, {
 			ref: "element",
 			attrs: {
+				...this.connotation !== void 0 ? { "connotation": this.connotation } : {},
 				...this.gridTemplateColumns !== void 0 ? { "grid-template-columns": this.gridTemplateColumns } : {},
 				...this.rowType !== void 0 ? { "row-type": this.rowType } : {},
 				...this.selected !== void 0 ? { "selected": this.selected } : {}
@@ -3971,6 +3996,7 @@ var VDataGridRow_default = defineComponent({
 			...handleVue3Props({
 				...this.cellItemTemplate !== void 0 ? { ".cellItemTemplate": this.cellItemTemplate } : {},
 				...this.columnDefinitions !== void 0 ? { ".columnDefinitions": this.columnDefinitions } : {},
+				...this.connotation !== void 0 ? { "^connotation": this.connotation } : {},
 				...this.gridTemplateColumns !== void 0 ? { "^grid-template-columns": this.gridTemplateColumns } : {},
 				...this.headerCellItemTemplate !== void 0 ? { ".headerCellItemTemplate": this.headerCellItemTemplate } : {},
 				...this.rowData !== void 0 ? { ".rowData": this.rowData } : {},
@@ -4891,6 +4917,13 @@ var VDialPad_default = defineComponent({
 			default: void 0
 		},
 		/**
+		* Hides the letter labels shown below digit buttons
+		*/
+		noLetters: {
+			type: Boolean,
+			default: void 0
+		},
+		/**
 		* Regular expression to validate the value of the input element
 		*/
 		pattern: {
@@ -4981,6 +5014,7 @@ var VDialPad_default = defineComponent({
 				...this.helperText !== void 0 ? { "helper-text": this.helperText } : {},
 				...this.noCall !== void 0 ? { "no-call": this.noCall } : {},
 				...this.noInput !== void 0 ? { "no-input": this.noInput } : {},
+				...this.noLetters !== void 0 ? { "no-letters": this.noLetters } : {},
 				...this.pattern !== void 0 ? { "pattern": this.pattern } : {},
 				...this.pending !== void 0 ? { "pending": this.pending } : {},
 				...this.placeholder !== void 0 ? { "placeholder": this.placeholder } : {},
@@ -5036,6 +5070,7 @@ var VDialPad_default = defineComponent({
 				...this.helperText !== void 0 ? { "^helper-text": this.helperText } : {},
 				...this.noCall !== void 0 && this.noCall !== false ? { "^no-call": this.noCall } : {},
 				...this.noInput !== void 0 && this.noInput !== false ? { "^no-input": this.noInput } : {},
+				...this.noLetters !== void 0 && this.noLetters !== false ? { "^no-letters": this.noLetters } : {},
 				...this.pattern !== void 0 ? { "^pattern": this.pattern } : {},
 				...this.pending !== void 0 && this.pending !== false ? { "^pending": this.pending } : {},
 				...this.placeholder !== void 0 ? { "^placeholder": this.placeholder } : {},
@@ -7243,7 +7278,6 @@ var VNavDisclosure_default = defineComponent({
 //#endregion
 //#region src/generated/components/VNavItem.ts
 /**
-* A Nav Item Custom HTML Element.
 * Based largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .
 */
 var VNavItem_default = defineComponent({
@@ -7664,6 +7698,7 @@ var VNumberField_default = defineComponent({
 		},
 		/**
 		* Sets the placeholder value of the element, generally used to provide a hint to the user.
+		* Using this attribute does is not a valid substitute for a labeling element.
 		*/
 		placeholder: {
 			type: String,
@@ -7934,9 +7969,81 @@ var VNumberField_default = defineComponent({
 	}
 });
 //#endregion
+//#region src/generated/components/VOptgroup.ts
+/**
+* Groups options within Select, Searchable Select, or Combobox components
+*/
+var VOptgroup_default = defineComponent({
+	name: "VOptgroup",
+	emits: [
+		"blur",
+		"click",
+		"focus",
+		"input",
+		"keydown",
+		"keyup"
+	],
+	methods: {},
+	setup(props, ctx) {
+		return {
+			componentName: registerComponent("optgroup", registerOptgroup),
+			element: ref(null)
+		};
+	},
+	render() {
+		if (isVue2) return h(this.componentName, {
+			ref: "element",
+			attrs: {},
+			class: "vvd-component",
+			on: {
+				"blur": (event) => {
+					this.$emit("blur", event);
+				},
+				"click": (event) => {
+					this.$emit("click", event);
+				},
+				"focus": (event) => {
+					this.$emit("focus", event);
+				},
+				"input": (event) => {
+					this.$emit("input", event);
+				},
+				"keydown": (event) => {
+					this.$emit("keydown", event);
+				},
+				"keyup": (event) => {
+					this.$emit("keyup", event);
+				}
+			}
+		}, [this.$slots.default, handleNamedSlotV2("label", this.$slots["label"])]);
+		return h(this.componentName, {
+			ref: "element",
+			class: "vvd-component",
+			...handleVue3Props({}),
+			"onBlur": (event) => {
+				this.$emit("blur", event);
+			},
+			"onClick": (event) => {
+				this.$emit("click", event);
+			},
+			"onFocus": (event) => {
+				this.$emit("focus", event);
+			},
+			"onInput": (event) => {
+				this.$emit("input", event);
+			},
+			"onKeydown": (event) => {
+				this.$emit("keydown", event);
+			},
+			"onKeyup": (event) => {
+				this.$emit("keyup", event);
+			}
+		}, [this.$slots.default?.(), handleNamedSlotV3("label", this.$slots["label"]?.())]);
+	}
+});
+//#endregion
 //#region src/generated/components/VOption.ts
 /**
-* An Option Custom HTML Element.
 * Implements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .
 */
 var VOption_default = defineComponent({
@@ -12900,6 +13007,7 @@ var VTextArea_default = defineComponent({
 		},
 		/**
 		* Sets the placeholder value of the element, generally used to provide a hint to the user.
+		* Using this attribute does is not a valid substitute for a labeling element.
 		*/
 		placeholder: {
 			type: String,
@@ -13258,6 +13366,8 @@ var VTextField_default = defineComponent({
 		},
 		/**
 		* Text that appears in the input element when it has no value set
+		* 
+		* Using this attribute does is not a valid substitute for a labeling element.
 		*/
 		placeholder: {
 			type: String,
@@ -15687,15 +15797,15 @@ var spezia_variable_default = "@font-face {\n  font-display: block;\n  font-fami
 var optionalStyles = {
 	theme: {
 		name: "core/theme",
-		css: "/**\n * Do not edit directly, this file was auto-generated.\n */\n/**\n * Do not edit directly, this file was auto-generated.\n */\n.vvd-root {\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n:root.vvd-root {\n  background-color: var(--vvd-color-canvas);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%);\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  	--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  	--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  	--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n"
+		css: ".vvd-root {\n  color: var(--vvd-color-canvas-text);\n  color-scheme: var(--vvd-color-scheme);\n}\n\n:root.vvd-root {\n  background-color: var(--vvd-color-canvas);\n}\n\n.vvd-scrollbar {\n  --scrollbar-track-color: transparent;\n  --scrollbar-thumb-color: color-mix(\n  	in sRGB,\n  	var(--vvd-color-neutral-950),\n  	transparent 70%\n  );\n}\n.vvd-scrollbar {\n  scrollbar-color: var(--scrollbar-thumb-color) var(--scrollbar-track-color);\n  scrollbar-width: thin;\n}\n.vvd-scrollbar ::-webkit-scrollbar {\n  width: 4px;\n}\n.vvd-scrollbar ::-webkit-scrollbar-track {\n  background: var(--scrollbar-track-color);\n}\n.vvd-scrollbar ::-webkit-scrollbar-thumb {\n  border: 0;\n  border-radius: 4px;\n  background-color: var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color));\n}\n\n.vvd-neutral-tint-elevation {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-neutral-tint-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-neutral-tint-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-neutral-tint-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-neutral-tint-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-neutral-tint-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-neutral-tint-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-neutral-tint-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-neutral-tint-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-neutral-tint-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-neutral-tint-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-neutral-tint-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(\n  	--vvd-neutral-tint-shadow-surface-12dp\n  );\n  --_vvd-tinted-shadow-surface-16dp: var(\n  	--vvd-neutral-tint-shadow-surface-16dp\n  );\n  --_vvd-tinted-shadow-surface-24dp: var(\n  	--vvd-neutral-tint-shadow-surface-24dp\n  );\n}\n.vvd-neutral-tint-elevation > * {\n  --_vvd-tinted-color-surface-0dp: var(--vvd-color-surface-0dp);\n  --_vvd-tinted-color-surface-2dp: var(--vvd-color-surface-2dp);\n  --_vvd-tinted-color-surface-4dp: var(--vvd-color-surface-4dp);\n  --_vvd-tinted-color-surface-8dp: var(--vvd-color-surface-8dp);\n  --_vvd-tinted-color-surface-12dp: var(--vvd-color-surface-12dp);\n  --_vvd-tinted-color-surface-16dp: var(--vvd-color-surface-16dp);\n  --_vvd-tinted-color-surface-24dp: var(--vvd-color-surface-24dp);\n  --_vvd-tinted-shadow-surface-0dp: var(--vvd-shadow-surface-0dp);\n  --_vvd-tinted-shadow-surface-2dp: var(--vvd-shadow-surface-2dp);\n  --_vvd-tinted-shadow-surface-4dp: var(--vvd-shadow-surface-4dp);\n  --_vvd-tinted-shadow-surface-8dp: var(--vvd-shadow-surface-8dp);\n  --_vvd-tinted-shadow-surface-12dp: var(--vvd-shadow-surface-12dp);\n  --_vvd-tinted-shadow-surface-16dp: var(--vvd-shadow-surface-16dp);\n  --_vvd-tinted-shadow-surface-24dp: var(--vvd-shadow-surface-24dp);\n}\n"
 	},
 	typography: {
 		name: "core/typography",
-		css: "/**\n * Do not edit directly, this file was auto-generated.\n */\n.vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root h5,\n.vvd-root .heading5 {\n  font: var(--vvd-typography-heading-5);\n  margin-block: 16px;\n}\n.vvd-root h6,\n.vvd-root .heading6 {\n  font: var(--vvd-typography-heading-6);\n  margin-block: 14px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong,\n.vvd-root h5 b,\n.vvd-root h5 strong,\n.vvd-root .heading5 b,\n.vvd-root .heading5 strong,\n.vvd-root h6 b,\n.vvd-root h6 strong,\n.vvd-root .heading6 b,\n.vvd-root .heading6 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight,\n.vvd-root h5.tight,\n.vvd-root .heading5.tight,\n.vvd-root h6.tight,\n.vvd-root .heading6.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  position: relative;\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n"
+		css: ".vvd-root:root {\n  --vvd-size-font-scale-base: 1rem;\n  font-size: unset;\n}\n.vvd-root:root > body {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root:not(:root) {\n  font: var(--vvd-typography-base);\n  font-feature-settings: \"kern\"; /* turns on kerning */\n  -webkit-font-smoothing: antialiased; /* apply font anti-aliasing for Webkit on OSX */\n  -moz-osx-font-smoothing: grayscale; /* apply font anti-aliasing for Firefox on OSX */\n  text-rendering: optimizeLegibility; /* emphasise on legibility when rendering, turns on ligatures and kerning */\n}\n.vvd-root p,\n.vvd-root .font-base {\n  font: var(--vvd-typography-base);\n  margin-block: 16px;\n}\n.vvd-root p.tight,\n.vvd-root .font-base.tight {\n  margin-block: 0;\n}\n.vvd-root .font-base-bold {\n  font: var(--vvd-typography-base-bold);\n}\n.vvd-root .font-base-condensed {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root .font-base-condensed-bold {\n  font: var(--vvd-typography-base-condensed-bold);\n}\n.vvd-root .font-base-extended {\n  font: var(--vvd-typography-base-extended);\n}\n.vvd-root .font-base-extended-bold {\n  font: var(--vvd-typography-base-extended-bold);\n}\n.vvd-root .font-base-code {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root b, .vvd-root strong {\n  font-weight: 600;\n}\n.vvd-root pre, .vvd-root var, .vvd-root code, .vvd-root kbd, .vvd-root samp {\n  font: var(--vvd-typography-base-code);\n}\n.vvd-root .headline {\n  font: var(--vvd-typography-headline);\n  margin-block: 40px;\n}\n.vvd-root .subtitle {\n  font: var(--vvd-typography-subtitle);\n  margin-block: 40px;\n}\n.vvd-root h1,\n.vvd-root .heading1 {\n  font: var(--vvd-typography-heading-1);\n  margin-block: 32px;\n}\n.vvd-root h2,\n.vvd-root .heading2 {\n  font: var(--vvd-typography-heading-2);\n  margin-block: 32px;\n}\n.vvd-root h3,\n.vvd-root .heading3 {\n  font: var(--vvd-typography-heading-3);\n  margin-block: 24px;\n}\n.vvd-root h4,\n.vvd-root .heading4 {\n  font: var(--vvd-typography-heading-4);\n  margin-block: 24px;\n}\n.vvd-root h5,\n.vvd-root .heading5 {\n  font: var(--vvd-typography-heading-5);\n  margin-block: 16px;\n}\n.vvd-root h6,\n.vvd-root .heading6 {\n  font: var(--vvd-typography-heading-6);\n  margin-block: 14px;\n}\n.vvd-root .headline b, .vvd-root .headline strong,\n.vvd-root .subtitle b,\n.vvd-root .subtitle strong,\n.vvd-root h1 b,\n.vvd-root h1 strong,\n.vvd-root .heading1 b,\n.vvd-root .heading1 strong,\n.vvd-root h2 b,\n.vvd-root h2 strong,\n.vvd-root .heading2 b,\n.vvd-root .heading2 strong,\n.vvd-root h3 b,\n.vvd-root h3 strong,\n.vvd-root .heading3 b,\n.vvd-root .heading3 strong,\n.vvd-root h4 b,\n.vvd-root h4 strong,\n.vvd-root .heading4 b,\n.vvd-root .heading4 strong,\n.vvd-root h5 b,\n.vvd-root h5 strong,\n.vvd-root .heading5 b,\n.vvd-root .heading5 strong,\n.vvd-root h6 b,\n.vvd-root h6 strong,\n.vvd-root .heading6 b,\n.vvd-root .heading6 strong {\n  font-weight: 500;\n}\n.vvd-root .headline.tight,\n.vvd-root .subtitle.tight,\n.vvd-root h1.tight,\n.vvd-root .heading1.tight,\n.vvd-root h2.tight,\n.vvd-root .heading2.tight,\n.vvd-root h3.tight,\n.vvd-root .heading3.tight,\n.vvd-root h4.tight,\n.vvd-root .heading4.tight,\n.vvd-root h5.tight,\n.vvd-root .heading5.tight,\n.vvd-root h6.tight,\n.vvd-root .heading6.tight {\n  margin-block: 0;\n}\n.vvd-root small,\n.vvd-root figcaption {\n  font: var(--vvd-typography-base-condensed);\n}\n.vvd-root sub,\n.vvd-root sup {\n  position: relative;\n  font: var(--vvd-typography-base-condensed);\n  font-size: 75%;\n  line-height: 0;\n  vertical-align: baseline;\n}\n.vvd-root sub {\n  bottom: -0.25em;\n}\n.vvd-root sup {\n  top: -0.5em;\n}\n"
 	},
 	vivid2Compat: {
 		name: "tokens/vivid-2-compat",
-		css: "/**\n * Do not edit directly, this file was auto-generated.\n */\n.vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(\n  	--vvd-color-neutral-50\n  );\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n"
+		css: ".vvd-root, ::part(vvd-root),\n.vvd-theme-alternate, ::part(vvd-theme-alternate) {\n  --_vvd3--vvd-color-neutral-50: var(--vvd-color-neutral-50);\n}\n\n.vvd-component:not(.vvd-theme-alternate) {\n  --vvd-color-neutral-50: var(--_vvd3--vvd-color-neutral-50);\n}\n"
 	}
 };
 //#endregion
@@ -15760,9 +15870,7 @@ var vividVue = { install(app, options) {
 	}
 	if (options.customComponentPrefix) setCustomComponentPrefix(options.customComponentPrefix);
 } };
-/**
-* @deprecated Use vividVue instead.
-*/
+/** @deprecated Use vividVue instead. */
 var vivid3 = vividVue;
 //#endregion
-export { Icon, VAccordion_default as VAccordion, VAccordionItem_default as VAccordionItem, VActionGroup_default as VActionGroup, VAlert_default as VAlert, VAudioPlayer_default as VAudioPlayer, VAvatar_default as VAvatar, VBadge_default as VBadge, VBanner_default as VBanner, VBreadcrumb_default as VBreadcrumb, VBreadcrumbItem_default as VBreadcrumbItem, VButton_default as VButton, VCalendar_default as VCalendar, VCalendarEvent_default as VCalendarEvent, VCard_default as VCard, VCheckbox_default as VCheckbox, VColorPicker_default as VColorPicker, VCombobox_default as VCombobox, VContextualHelp_default as VContextualHelp, VCountry_default as VCountry, VCountryGroup_default as VCountryGroup, VDataGrid_default as VDataGrid, VDataGridCell_default as VDataGridCell, VDataGridRow_default as VDataGridRow, VDatePicker_default as VDatePicker, VDateRangePicker_default as VDateRangePicker, VDateTimePicker_default as VDateTimePicker, VDialPad_default as VDialPad, VDialog_default as VDialog, VDivider_default as VDivider, VEmptyState_default as VEmptyState, VFab_default as VFab, VFilePicker_default as VFilePicker, VFlag_default as VFlag, VHeader_default as VHeader, VIcon_default as VIcon, VKbdKey_default as VKbdKey, VKbdShortcut_default as VKbdShortcut, VLayout_default as VLayout, VMenu_default as VMenu, VMenuItem_default as VMenuItem, VNav_default as VNav, VNavDisclosure_default as VNavDisclosure, VNavItem_default as VNavItem, VNote_default as VNote, VNumberField_default as VNumberField, VOption_default as VOption, VPagination_default as VPagination, VPlatformSwitch_default as VPlatformSwitch, VPopover_default as VPopover, VProgress_default as VProgress, VProgressRing_default as VProgressRing, VRadio_default as VRadio, VRadioGroup_default as VRadioGroup, VRangeSlider_default as VRangeSlider, VRichTextEditor_default as VRichTextEditor, VRichTextView_default as VRichTextView, VSearchableSelect_default as VSearchableSelect, VSelect_default as VSelect, VSelectableBox_default as VSelectableBox, VSideDrawer_default as VSideDrawer, VSimpleColorPicker_default as VSimpleColorPicker, VSlider_default as VSlider, VSplitButton_default as VSplitButton, VStatus_default as VStatus, VSwitch_default as VSwitch, VTab_default as VTab, VTabPanel_default as VTabPanel, VTable_default as VTable, VTableBody_default as VTableBody, VTableCell_default as VTableCell, VTableHead_default as VTableHead, VTableHeaderCell_default as VTableHeaderCell, VTableRow_default as VTableRow, VTableSortingButton_default as VTableSortingButton, VTabs_default as VTabs, VTag_default as VTag, VTagGroup_default as VTagGroup, VTextArea_default as VTextArea, VTextField_default as VTextField, VTimePicker_default as VTimePicker, VToggletip_default as VToggletip, VTooltip_default as VTooltip, VTreeItem_default as VTreeItem, VTreeView_default as VTreeView, VVideoPlayer_default as VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3, vividVue };
+export { Icon, VAccordion_default as VAccordion, VAccordionItem_default as VAccordionItem, VActionGroup_default as VActionGroup, VAlert_default as VAlert, VAudioPlayer_default as VAudioPlayer, VAvatar_default as VAvatar, VBadge_default as VBadge, VBanner_default as VBanner, VBreadcrumb_default as VBreadcrumb, VBreadcrumbItem_default as VBreadcrumbItem, VButton_default as VButton, VCalendar_default as VCalendar, VCalendarEvent_default as VCalendarEvent, VCard_default as VCard, VCheckbox_default as VCheckbox, VColorPicker_default as VColorPicker, VCombobox_default as VCombobox, VContextualHelp_default as VContextualHelp, VCountry_default as VCountry, VCountryGroup_default as VCountryGroup, VDataGrid_default as VDataGrid, VDataGridCell_default as VDataGridCell, VDataGridRow_default as VDataGridRow, VDatePicker_default as VDatePicker, VDateRangePicker_default as VDateRangePicker, VDateTimePicker_default as VDateTimePicker, VDialPad_default as VDialPad, VDialog_default as VDialog, VDivider_default as VDivider, VEmptyState_default as VEmptyState, VFab_default as VFab, VFilePicker_default as VFilePicker, VFlag_default as VFlag, VHeader_default as VHeader, VIcon_default as VIcon, VKbdKey_default as VKbdKey, VKbdShortcut_default as VKbdShortcut, VLayout_default as VLayout, VMenu_default as VMenu, VMenuItem_default as VMenuItem, VNav_default as VNav, VNavDisclosure_default as VNavDisclosure, VNavItem_default as VNavItem, VNote_default as VNote, VNumberField_default as VNumberField, VOptgroup_default as VOptgroup, VOption_default as VOption, VPagination_default as VPagination, VPlatformSwitch_default as VPlatformSwitch, VPopover_default as VPopover, VProgress_default as VProgress, VProgressRing_default as VProgressRing, VRadio_default as VRadio, VRadioGroup_default as VRadioGroup, VRangeSlider_default as VRangeSlider, VRichTextEditor_default as VRichTextEditor, VRichTextView_default as VRichTextView, VSearchableSelect_default as VSearchableSelect, VSelect_default as VSelect, VSelectableBox_default as VSelectableBox, VSideDrawer_default as VSideDrawer, VSimpleColorPicker_default as VSimpleColorPicker, VSlider_default as VSlider, VSplitButton_default as VSplitButton, VStatus_default as VStatus, VSwitch_default as VSwitch, VTab_default as VTab, VTabPanel_default as VTabPanel, VTable_default as VTable, VTableBody_default as VTableBody, VTableCell_default as VTableCell, VTableHead_default as VTableHead, VTableHeaderCell_default as VTableHeaderCell, VTableRow_default as VTableRow, VTableSortingButton_default as VTableSortingButton, VTabs_default as VTabs, VTag_default as VTag, VTagGroup_default as VTagGroup, VTextArea_default as VTextArea, VTextField_default as VTextField, VTimePicker_default as VTimePicker, VToggletip_default as VToggletip, VTooltip_default as VTooltip, VTreeItem_default as VTreeItem, VTreeView_default as VTreeView, VVideoPlayer_default as VVideoPlayer, optionalStyles, setCustomComponentPrefix, vivid3, vividVue };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid-vue",
-  "version": "5.23.1-preview.0",
+  "version": "5.24.0",
   "description": "A Vue wrapper library for Vivid components.",
   "license": "ISC",
   "author": "Vonage",
@@ -20,22 +20,23 @@
     "web-types.json"
   ],
   "dependencies": {
-    "@vonage/vivid": "^5.23.0"
+    "@vonage/vivid": "^5.24.0"
   },
   "devDependencies": {
     "@types/node": "^20.19.40",
     "eslint": "^10.3.0",
-    "eslint-plugin-unused-imports": "^4.4.1",
     "glob": "^13.0.6",
     "tsx": "^4.21.0",
-    "vitest": "^4.1.5",
+    "typescript": "5.9.3",
+    "vite": "^8.0.12",
+    "vitest": "^4.1.8",
     "vue": "^2.7.16",
     "vue3": "npm:vue@^3.5.34",
     "@repo/eslint-config": "1.0.0",
     "@repo/styles": "1.0.0",
-    "@repo/tools": "1.0.0",
     "@repo/typescript-config": "1.0.0",
     "@repo/vite-config": "1.0.0",
+    "@repo/tools": "1.0.0",
     "@repo/vitest-config": "1.0.0",
     "@repo/wrapper-gen": "1.0.0"
   },

package/web-types.json

@@ -1,7 +1,7 @@
 {
  "framework": "vue",
  "name": "@vonage/vivid-vue",
- "version": "5.23.0",
+ "version": "5.24.0",
  "contributions": {
   "html": {
    "description-markup": "markdown",
@@ -107,6 +107,14 @@
         "type": "boolean"
        }
       },
+      {
+       "name": "secondaryText",
+       "description": "Optional supporting text shown below the heading text.",
+       "value": {
+        "kind": "expression",
+        "type": "string"
+       }
+      },
       {
        "name": "size",
        "description": "The size the accordion-item should have.",
@@ -1784,7 +1792,7 @@
       },
       {
        "name": "placeholder",
-       "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.",
+       "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.\nUsing this attribute is not a valid substitute for a labeling element.",
        "value": {
         "kind": "expression",
         "type": "string"
@@ -1792,7 +1800,7 @@
       },
       {
        "name": "placement",
-       "description": "the placement of the combobox\n\nHTML Attribute: string",
+       "description": "the placement of the combobox",
        "value": {
         "kind": "expression",
         "type": "'top' | 'bottom'"
@@ -2107,6 +2115,14 @@
         "type": "any"
        }
       },
+      {
+       "name": "connotation",
+       "description": "The connotation of the cell, affecting hover and selected colors.",
+       "value": {
+        "kind": "expression",
+        "type": "'accent' | 'cta'"
+       }
+      },
       {
        "name": "gridColumn",
        "description": "The column index of the cell.\nThis will be applied to the css grid-column-index value\napplied to the cell",
@@ -2177,6 +2193,14 @@
         "type": "any"
        }
       },
+      {
+       "name": "connotation",
+       "description": "The connotation of the row, affecting hover and selected colors.",
+       "value": {
+        "kind": "expression",
+        "type": "'accent' | 'cta'"
+       }
+      },
       {
        "name": "gridTemplateColumns",
        "description": "String that gets applied to the the css gridTemplateColumns attribute for the row\nx",
@@ -2757,6 +2781,14 @@
         "type": "boolean"
        }
       },
+      {
+       "name": "noLetters",
+       "description": "Hides the letter labels shown below digit buttons",
+       "value": {
+        "kind": "expression",
+        "type": "boolean"
+       }
+      },
       {
        "name": "pattern",
        "description": "Regular expression to validate the value of the input element",
@@ -3892,7 +3924,7 @@
     },
     {
      "name": "VNavItem",
-     "description": "A Nav Item Custom HTML Element.\nBased largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .",
+     "description": "Based largely on the https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element .",
      "attributes": [
       {
        "name": "appearance",
@@ -4199,7 +4231,7 @@
       },
       {
        "name": "placeholder",
-       "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.",
+       "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.\nUsing this attribute does is not a valid substitute for a labeling element.",
        "value": {
         "kind": "expression",
         "type": "string"
@@ -4294,9 +4326,30 @@
      },
      "priority": "highest"
     },
+    {
+     "name": "VOptgroup",
+     "description": "Groups options within Select, Searchable Select, or Combobox components",
+     "attributes": [],
+     "events": [],
+     "slots": [
+      {
+       "name": "default",
+       "description": "Default slot for options."
+      },
+      {
+       "name": "label",
+       "description": "Label for the option group."
+      }
+     ],
+     "source": {
+      "module": "@vonage/vivid-vue",
+      "symbol": "VOptgroup"
+     },
+     "priority": "highest"
+    },
     {
      "name": "VOption",
-     "description": "An Option Custom HTML Element.\nImplements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .",
+     "description": "Implements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .",
      "attributes": [
       {
        "name": "checked",
@@ -6789,7 +6842,7 @@
       },
       {
        "name": "placeholder",
-       "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.",
+       "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.\nUsing this attribute does is not a valid substitute for a labeling element.",
        "value": {
         "kind": "expression",
         "type": "string"
@@ -7009,7 +7062,7 @@
       },
       {
        "name": "placeholder",
-       "description": "Text that appears in the input element when it has no value set",
+       "description": "Text that appears in the input element when it has no value set\n\nUsing this attribute does is not a valid substitute for a labeling element.",
        "value": {
         "kind": "expression",
         "type": "string"