@vonage/vivid-vue 5.23.1 → 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) => {
@@ -3711,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
@@ -3764,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 } : {}
@@ -3809,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 } : {},
@@ -3861,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
 		*/
@@ -3926,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 } : {}
@@ -3971,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 } : {},
@@ -4891,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: {
@@ -4981,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 } : {},
@@ -5036,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 } : {},
@@ -7934,6 +7970,79 @@ 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
 /**
 * Implements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .
@@ -15811,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) => {
@@ -3710,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
@@ -3763,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 } : {}
@@ -3808,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 } : {},
@@ -3860,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
 		*/
@@ -3925,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 } : {}
@@ -3970,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 } : {},
@@ -4890,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: {
@@ -4980,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 } : {},
@@ -5035,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 } : {},
@@ -7933,6 +7969,79 @@ 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
 /**
 * Implements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .
@@ -15764,4 +15873,4 @@ var vividVue = { install(app, options) {
 /** @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",
+  "version": "5.24.0",
   "description": "A Vue wrapper library for Vivid components.",
   "license": "ISC",
   "author": "Vonage",
@@ -20,7 +20,7 @@
     "web-types.json"
   ],
   "dependencies": {
-    "@vonage/vivid": "^5.23.1"
+    "@vonage/vivid": "^5.24.0"
   },
   "devDependencies": {
     "@types/node": "^20.19.40",
@@ -32,11 +32,11 @@
     "vitest": "^4.1.8",
     "vue": "^2.7.16",
     "vue3": "npm:vue@^3.5.34",
-    "@repo/styles": "1.0.0",
-    "@repo/tools": "1.0.0",
     "@repo/eslint-config": "1.0.0",
-    "@repo/vite-config": "1.0.0",
+    "@repo/styles": "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.1",
+ "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.",
@@ -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",
@@ -4294,6 +4326,27 @@
      },
      "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": "Implements https://www.w3.org/TR/wai-aria-1.1/#option | ARIA option .",