@vonage/vivid-react 2.10.71 → 2.10.73

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid-react",
-  "version": "2.10.71",
+  "version": "2.10.73",
   "description": "Vivid wrapped for easy React usage & IDE autocomplete support & typescript typings",
   "main": "index.js",
   "types": "types/index.d.ts",
@@ -12,8 +12,7 @@
     "test:watch": "jest --watch",
     "preversion": "yarn updateDocs && git add README.md",
     "postversion": "git push --follow-tags",
-    "storybook": "start-storybook -p 6006",
-    "prestorybook": "yarn generateWrappers",
+    "storybook": "storybook dev -p 6006",
     "updateDocs": "node scripts/updateDocs.js",
     "updateVividPackages": "node scripts/updateVividPackages.js"
   },
@@ -27,65 +26,65 @@
     "CLI"
   ],
   "dependencies": {
-    "@vonage/vivid": "3.32.0",
+    "@vonage/vivid": "3.40.0",
     "@vonage/vivid-react-wrapper": "1.2.9",
-    "@vonage/vvd-context": "^2.44.0",
-    "@vonage/vvd-core": "^2.44.0",
-    "@vonage/vvd-fonts": "^2.44.0",
-    "@vonage/vwc-accordion": "2.43.2",
-    "@vonage/vwc-action-group": "2.43.2",
-    "@vonage/vwc-badge": "2.43.2",
-    "@vonage/vwc-banner": "^2.44.0",
-    "@vonage/vwc-button": "2.43.2",
-    "@vonage/vwc-button-toggle-group": "2.43.2",
-    "@vonage/vwc-calendar": "2.43.2",
-    "@vonage/vwc-card": "2.43.2",
-    "@vonage/vwc-carousel": "2.43.2",
-    "@vonage/vwc-checkbox": "2.43.2",
-    "@vonage/vwc-chips": "2.43.2",
-    "@vonage/vwc-circular-progress": "2.43.2",
-    "@vonage/vwc-data-grid": "2.43.2",
-    "@vonage/vwc-datepicker": "2.43.2",
-    "@vonage/vwc-dialog": "2.43.2",
-    "@vonage/vwc-drawer": "2.43.2",
-    "@vonage/vwc-dropdown": "2.43.2",
-    "@vonage/vwc-elevation": "2.43.2",
-    "@vonage/vwc-empty-state": "2.43.2",
-    "@vonage/vwc-expansion-panel": "2.43.2",
-    "@vonage/vwc-fab": "2.43.2",
-    "@vonage/vwc-file-picker": "^2.44.0",
-    "@vonage/vwc-formfield": "2.43.2",
-    "@vonage/vwc-helper-message": "2.43.2",
-    "@vonage/vwc-icon": "2.43.2",
-    "@vonage/vwc-icon-button": "2.43.2",
-    "@vonage/vwc-icon-button-toggle": "2.43.2",
-    "@vonage/vwc-keypad": "2.43.2",
-    "@vonage/vwc-layout": "2.43.2",
-    "@vonage/vwc-linear-progress": "2.43.2",
-    "@vonage/vwc-list": "2.43.2",
-    "@vonage/vwc-media-controller": "^2.44.0",
-    "@vonage/vwc-menu": "2.43.2",
-    "@vonage/vwc-notched-outline": "2.43.2",
-    "@vonage/vwc-note": "2.43.2",
-    "@vonage/vwc-pagination": "2.43.2",
-    "@vonage/vwc-popup": "2.43.2",
-    "@vonage/vwc-radio": "2.43.2",
-    "@vonage/vwc-scheme-select": "2.43.2",
-    "@vonage/vwc-select": "2.43.2",
-    "@vonage/vwc-side-drawer": "2.43.2",
-    "@vonage/vwc-slider": "2.43.2",
-    "@vonage/vwc-snackbar": "2.43.2",
-    "@vonage/vwc-surface": "2.43.2",
-    "@vonage/vwc-switch": "2.43.2",
-    "@vonage/vwc-tab-bar": "2.43.2",
-    "@vonage/vwc-tags": "2.43.2",
-    "@vonage/vwc-text": "2.43.2",
-    "@vonage/vwc-textarea": "2.43.2",
-    "@vonage/vwc-textfield": "2.43.2",
-    "@vonage/vwc-theme-switch": "2.43.2",
-    "@vonage/vwc-tooltip": "2.43.2",
-    "@vonage/vwc-top-app-bar": "2.43.2",
-    "@vonage/vwc-top-app-bar-fixed": "2.43.2"
+    "@vonage/vvd-context": "2.44.0",
+    "@vonage/vvd-core": "2.44.0",
+    "@vonage/vvd-fonts": "2.44.0",
+    "@vonage/vwc-accordion": "2.44.0",
+    "@vonage/vwc-action-group": "2.44.0",
+    "@vonage/vwc-badge": "2.44.0",
+    "@vonage/vwc-banner": "2.44.0",
+    "@vonage/vwc-button": "2.44.0",
+    "@vonage/vwc-button-toggle-group": "2.44.0",
+    "@vonage/vwc-calendar": "2.44.0",
+    "@vonage/vwc-card": "2.44.0",
+    "@vonage/vwc-carousel": "2.44.0",
+    "@vonage/vwc-checkbox": "2.44.0",
+    "@vonage/vwc-chips": "2.44.0",
+    "@vonage/vwc-circular-progress": "2.44.0",
+    "@vonage/vwc-data-grid": "2.44.0",
+    "@vonage/vwc-datepicker": "2.44.0",
+    "@vonage/vwc-dialog": "2.44.0",
+    "@vonage/vwc-drawer": "2.44.0",
+    "@vonage/vwc-dropdown": "2.44.0",
+    "@vonage/vwc-elevation": "2.44.0",
+    "@vonage/vwc-empty-state": "2.44.0",
+    "@vonage/vwc-expansion-panel": "2.44.0",
+    "@vonage/vwc-fab": "2.44.0",
+    "@vonage/vwc-file-picker": "2.44.0",
+    "@vonage/vwc-formfield": "2.44.0",
+    "@vonage/vwc-helper-message": "2.44.0",
+    "@vonage/vwc-icon": "2.44.0",
+    "@vonage/vwc-icon-button": "2.44.0",
+    "@vonage/vwc-icon-button-toggle": "2.44.0",
+    "@vonage/vwc-keypad": "2.44.0",
+    "@vonage/vwc-layout": "2.44.0",
+    "@vonage/vwc-linear-progress": "2.44.0",
+    "@vonage/vwc-list": "2.44.0",
+    "@vonage/vwc-media-controller": "2.44.0",
+    "@vonage/vwc-menu": "2.44.0",
+    "@vonage/vwc-notched-outline": "2.44.0",
+    "@vonage/vwc-note": "2.44.0",
+    "@vonage/vwc-pagination": "2.44.0",
+    "@vonage/vwc-popup": "2.44.0",
+    "@vonage/vwc-radio": "2.44.0",
+    "@vonage/vwc-scheme-select": "2.44.0",
+    "@vonage/vwc-select": "2.44.0",
+    "@vonage/vwc-side-drawer": "2.44.0",
+    "@vonage/vwc-slider": "2.44.0",
+    "@vonage/vwc-snackbar": "2.44.0",
+    "@vonage/vwc-surface": "2.44.0",
+    "@vonage/vwc-switch": "2.44.0",
+    "@vonage/vwc-tab-bar": "2.44.0",
+    "@vonage/vwc-tags": "2.44.0",
+    "@vonage/vwc-text": "2.44.0",
+    "@vonage/vwc-textarea": "2.44.0",
+    "@vonage/vwc-textfield": "2.44.0",
+    "@vonage/vwc-theme-switch": "2.44.0",
+    "@vonage/vwc-tooltip": "2.44.0",
+    "@vonage/vwc-top-app-bar": "2.44.0",
+    "@vonage/vwc-top-app-bar-fixed": "2.44.0"
   },
   "devDependencies": {
     "@babel/core": "^7.15.5",
@@ -97,12 +96,16 @@
     "@rollup/plugin-babel": "^5.2.2",
     "@rollup/plugin-commonjs": "^17.0.0",
     "@rollup/plugin-node-resolve": "^11.0.0",
-    "@storybook/addon-actions": "6.5.14",
-    "@storybook/addon-controls": "6.5.14",
-    "@storybook/addon-essentials": "6.5.14",
-    "@storybook/addon-links": "6.5.14",
-    "@storybook/addons": "6.5.14",
-    "@storybook/react": "6.5.14",
+    "@storybook/addon-actions": "7.5.3",
+    "@storybook/addon-controls": "7.5.3",
+    "@storybook/addon-essentials": "7.5.3",
+    "@storybook/addon-interactions": "7.5.3",
+    "@storybook/addon-links": "7.5.3",
+    "@storybook/addons": "7.5.3",
+    "@storybook/blocks": "7.5.3",
+    "@storybook/react": "7.5.3",
+    "@storybook/react-vite": "7.5.3",
+    "@storybook/testing-library": "0.2.2",
     "@types/react": "16.9.49",
     "@webcomponents/webcomponentsjs": "^2.5.0",
     "babel-jest": "^26.6.1",
@@ -117,7 +120,9 @@
     "rollup": "^2.35.0",
     "rollup-plugin-auto-external": "^2.0.0",
     "standard": "^16.0.4",
+    "storybook": "7.5.3",
     "typescript": "4.3.5",
+    "vite": "^4.5.0",
     "web-component-analyzer": "2.0.0-next.4"
   },
   "resolutions": {
@@ -125,6 +130,7 @@
     "trim": "^0.0.3",
     "trim-newlines": "^3.0.1",
     "terser": "^5.14.2",
+    "jackspeak": "2.1.1",
     "loader-utils": "2.0.4"
   },
   "peerDependencies": {

package/types/index.d.ts

@@ -93,6 +93,7 @@ declare namespace JSX {
             "elevation": 0 | 2 | 4 | 8 | 12 | 16 | 24 | undefined;
         }>;
         "vvd3-checkbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-label": string | null;
             "connotation": CheckboxConnotation | undefined;
         }>;
         "vvd3-combobox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
@@ -109,11 +110,19 @@ declare namespace JSX {
             "selection-mode": DataGridSelectionMode | undefined;
         }>;
         "vvd3-date-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-            "label": string | undefined;
-            "helper-text": string | undefined;
-            "error-text": string | undefined;
-            "value": DateStr | null;
-            "disabled": boolean;
+            "min": string;
+            "value": string;
+            "current-value": string;
+            "readonly": boolean;
+        }>;
+        "vvd3-date-range-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "start": string;
+            "end": string;
+            "current-start": string;
+            "current-end": string;
+            "min": string;
+            "value": string;
+            "current-value": string;
             "readonly": boolean;
         }>;
         "vvd3-dialog": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
@@ -126,6 +135,7 @@ declare namespace JSX {
             "aria-labelledby": string | null;
             "aria-label": string | null;
             "aria-describedby": string | null;
+            "dismiss-button-aria-label": string | null;
         }>;
         "vvd3-divider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
 
@@ -142,9 +152,11 @@ declare namespace JSX {
             "connotation": FabConnotation | undefined;
             "size": FABSize | undefined;
             "label": string | undefined;
+        }>;
+        "vvd3-form-associated-file-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+
         }>;
         "vvd3-file-picker": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-            "label": string | undefined;
             "max-files": number | undefined;
             "max-file-size": number;
             "accept": string | undefined;
@@ -171,6 +183,8 @@ declare namespace JSX {
         }>;
         "vvd3-listbox": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "appearance": LisboxAppearance | undefined;
+            "orientation": 'horizontal' | 'vertical' | undefined;
+            "shape": ListboxShape | undefined;
         }>;
         "vvd3-menu": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "placement": Placement | undefined;
@@ -181,6 +195,8 @@ declare namespace JSX {
         "vvd3-menu-item": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "text": string | undefined;
             "text-secondary": string | undefined;
+            "check-trailing": boolean;
+            "check-appearance": CheckAppearance | undefined;
         }>;
         "vvd3-nav": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
 
@@ -198,6 +214,8 @@ declare namespace JSX {
             "connotation": NoteConnotation | undefined;
         }>;
         "vvd3-number-field": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "increment-button-aria-label": string | null;
+            "decrement-button-aria-label": string | null;
             "appearance": NumberFieldAppearance | undefined;
             "shape": NumberFieldShape | undefined;
             "autoComplete": string | undefined;
@@ -223,15 +241,18 @@ declare namespace JSX {
             "anchor": string | HTMLElement | undefined;
         }>;
         "vvd3-progress": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-label": string | null;
             "shape": ProgressShape | undefined;
             "connotation": ProgressConnotation | undefined;
             "reverse": boolean;
         }>;
         "vvd3-progress-ring": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-label": string | null;
             "connotation": ProgressRingConnotation | undefined;
-            "size": -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined;
+            "size": -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5 | undefined;
         }>;
         "vvd3-radio": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-label": string | null;
             "label": string | undefined;
             "connotation": RadioConnotation | undefined;
         }>;
@@ -244,6 +265,15 @@ declare namespace JSX {
             "fixed-dropdown": boolean;
             "placeholder": string | undefined;
         }>;
+        "vvd3-selectable-box": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "checked": boolean;
+            "clickable": boolean;
+            "connotation": SelectableBoxConnotation | undefined;
+            "control-aria-label": string | null;
+            "control-aria-labelledby": string | null;
+            "control-type": SelectableBoxControlType | undefined;
+            "tight": boolean;
+        }>;
         "vvd3-side-drawer": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "alternate": boolean;
             "modal": boolean;
@@ -251,7 +281,10 @@ declare namespace JSX {
             "trailing": boolean;
         }>;
         "vvd3-slider": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "aria-label": string | null;
+            "aria-valuetext": string | null;
             "markers": boolean;
+            "connotation": SliderConnotation | undefined;
         }>;
         "vvd3-split-button": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "connotation": SplitButtonConnotation | undefined;
@@ -293,7 +326,7 @@ declare namespace JSX {
             "selected": boolean;
         }>;
         "vvd3-tag-group": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
-
+            "aria-label": string | null;
         }>;
         "vvd3-text-anchor": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
             "text": string | undefined;
@@ -325,5 +358,12 @@ declare namespace JSX {
         "vvd3-tree-view": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
 
         }>;
+        "vvd3-date-picker-base": React.DetailedHTMLProps<React.HTMLAttributes<HTMLElement>, HTMLElement> & Partial<{
+            "min": string;
+            "max": string;
+            "value": string;
+            "current-value": string;
+            "readonly": boolean;
+        }>;
     }
 }

package/v3/VwcAccordion/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-accordion",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcAccordionItem/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-accordion-item",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcActionGroup/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-action-group",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcAlert/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-alert",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcAvatar/index.js

@@ -28,6 +28,10 @@ Code in this file were generated using following JSON:
    "name": "--vvd-avatar-cta-pale",
    "default": "var(--vvd-color-cta-300)"
   },
+  {
+   "name": "--vvd-avatar-cta-soft",
+   "default": "var(--vvd-color-cta-100)"
+  },
   {
    "name": "--vvd-avatar-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
@@ -47,6 +51,10 @@ Code in this file were generated using following JSON:
   {
    "name": "--vvd-avatar-accent-pale",
    "default": "var(--vvd-color-neutral-300)"
+  },
+  {
+   "name": "--vvd-avatar-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
   }
  ],
  "slots": [

package/v3/VwcAvatar/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-avatar",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcBadge/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-badge",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcBanner/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-banner",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcBreadcrumb/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-breadcrumb",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcBreadcrumbItem/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-breadcrumb-item",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcButton/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-button",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcCalendar/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-calendar",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcCalendarEvent/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-calendar-event",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcCard/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-card",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcCheckbox/index.d.ts

@@ -1,6 +1,7 @@
 import React, { ReactNode } from 'react';
 /** Base class for checkbox
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/checkbox
+* @param {string | null} ariaLabel  **attribute** `aria-label`
 * @param {CheckboxConnotation | undefined} connotation - The connotation the checklist should have. **attribute** `connotation`
 */
 declare const VwcCheckbox: {
@@ -10,6 +11,7 @@ declare const VwcCheckbox: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        ariaLabel?: string | null | undefined;
         connotation?: any;
     }): JSX.Element;
     displayName: string;

package/v3/VwcCheckbox/index.js

@@ -58,6 +58,14 @@ Code in this file were generated using following JSON:
   }
  ],
  "members": [
+  {
+   "kind": "field",
+   "name": "ariaLabel",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null"
+  },
   {
    "kind": "field",
    "name": "connotation",
@@ -69,6 +77,14 @@ Code in this file were generated using following JSON:
   }
  ],
  "attributes": [
+  {
+   "name": "aria-label",
+   "type": {
+    "text": "string | null"
+   },
+   "default": "null",
+   "fieldName": "ariaLabel"
+  },
   {
    "name": "connotation",
    "type": {
@@ -92,7 +108,7 @@ registerCheckbox('vvd3')
 const VwcCheckbox = wrapper(`vvd3-checkbox`,  {
     events: [],
     attributes: [],
-    properties: ['connotation']
+    properties: ['ariaLabel', 'connotation']
 })
 
 VwcCheckbox.displayName = 'VwcCheckbox'

package/v3/VwcCheckbox/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-checkbox",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcCombobox/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@vonage/vivid-react-vvd3-combobox",
-  "version": "3.32.0",
+  "version": "3.40.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "3.32.0"
+    "@vonage/vivid": "3.40.0"
   }
 }

package/v3/VwcDataGrid/index.d.ts

@@ -1,7 +1,7 @@
 import React, { ReactNode } from 'react';
 /** Base class for data-grid
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/data-grid
-* @param {DataGridSelectionMode | undefined} selectionMode  **attribute** `selection-mode`
+* @param {DataGridSelectionMode | undefined} selectionMode - Indicates the selection mode. **attribute** `selection-mode`
 */
 declare const VwcDataGrid: {
     (props: {