@vonage/vivid-react 2.10.98 → 3.0.0

package/v3/VwcSelect/index.js

@@ -24,6 +24,14 @@ Code in this file were generated using following JSON:
    "name": "--vvd-select-accent-intermediate",
    "default": "var(--vvd-color-neutral-500)"
   },
+  {
+   "name": "--vvd-select-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-select-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
   {
    "name": "--vvd-select-accent-firm",
    "default": "var(--vvd-color-canvas-text)"
@@ -105,6 +113,44 @@ Code in this file were generated using following JSON:
      "text": "void"
     }
    }
+  },
+  {
+   "kind": "method",
+   "name": "slottedOptionsChanged",
+   "parameters": [
+    {
+     "name": "prev",
+     "type": {
+      "text": "Element[] | undefined"
+     }
+    },
+    {
+     "name": "next",
+     "type": {
+      "text": "Element[]"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "method",
+   "name": "formResetCallback"
+  }
+ ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires a custom 'input' event when the value updates",
+   "name": "input"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<HTMLElement>"
+   },
+   "description": "Fires a custom 'change' event when the value updates",
+   "name": "change"
   }
  ],
  "attributes": [
@@ -152,7 +198,7 @@ Code in this file were generated using following JSON:
   "vueModels": [
    {
     "name": "modelValue",
-    "attributeName": "current-value",
+    "attributeName": "value",
     "eventName": "input",
     "valueMapping": "(event.target as HTMLInputElement).value"
    }
@@ -166,7 +212,7 @@ import { registerSelect } from '@vonage/vivid'
 registerSelect('vvd3')
 
 const VwcSelect = wrapper(`vvd3-select`,  {
-    events: [{"name":"change","propName":"onChange"}],
+    events: [{"name":"change","propName":"onChange"},{"name":"input","propName":"onInput"}],
     attributes: [],
     properties: ['appearance', 'shape', 'fixedDropdown', 'placeholder']
 })

package/v3/VwcSelect/package.json

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

package/v3/VwcSelectableBox/index.js

@@ -125,6 +125,9 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Fired when the checked state changes",
    "name": "change"
   }

package/v3/VwcSelectableBox/package.json

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

package/v3/VwcSideDrawer/index.js

@@ -79,10 +79,16 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Fired when the side drawer is closed.",
    "name": "close"
   },
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Fired when the side drawer is opened.",
    "name": "open"
   }

package/v3/VwcSideDrawer/package.json

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

package/v3/VwcSlider/index.d.ts

@@ -1,10 +1,11 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcSlider
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/slider
 * @param {string | null} ariaLabel  **attribute** `aria-label`
 * @param {string | null} ariaValuetext  **attribute** `aria-valuetext`
 * @param {boolean} markers - Display markers on/off **attribute** `markers`
 * @param {SliderConnotation | undefined} connotation - slider connotation **attribute** `connotation`
+* @param {(value: string) => string} valueTextFormatter - Custom function that generates a string for the component's "aria-valuetext" attribute based on the current value.
 */
 declare const VwcSlider: {
     (props: {
@@ -13,10 +14,12 @@ declare const VwcSlider: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onChange?: ((event: SyntheticEvent) => void) | undefined;
         ariaLabel?: string | null | undefined;
         ariaValuetext?: string | null | undefined;
         markers?: boolean | undefined;
         connotation?: any;
+        valueTextFormatter?: any;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcSlider/index.js

@@ -52,6 +52,24 @@ Code in this file were generated using following JSON:
    },
    "description": "slider connotation",
    "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "valueTextFormatter",
+   "type": {
+    "text": "(value: string) => string"
+   },
+   "description": "Custom function that generates a string for the component's \"aria-valuetext\" attribute based on the current value.",
+   "privacy": "public"
+  }
+ ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires a custom 'change' event when the slider value changes",
+   "name": "change"
   }
  ],
  "attributes": [
@@ -98,7 +116,7 @@ Code in this file were generated using following JSON:
   "vueModels": [
    {
     "name": "modelValue",
-    "attributeName": "current-value",
+    "attributeName": "value",
     "eventName": "change",
     "valueMapping": "(event.target as HTMLInputElement).value"
    }
@@ -112,9 +130,9 @@ import { registerSlider } from '@vonage/vivid'
 registerSlider('vvd3')
 
 const VwcSlider = wrapper(`vvd3-slider`,  {
-    events: [],
+    events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['ariaLabel', 'ariaValuetext', 'markers', 'connotation']
+    properties: ['ariaLabel', 'ariaValuetext', 'markers', 'connotation', 'valueTextFormatter']
 })
 
 VwcSlider.displayName = 'VwcSlider'

package/v3/VwcSlider/package.json

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

package/v3/VwcSplitButton/index.js

@@ -104,6 +104,38 @@ Code in this file were generated using following JSON:
    "name": "--vvd-split-button-alert-faint",
    "default": "var(--vvd-color-alert-50)"
   },
+  {
+   "name": "--vvd-split-button-announcement-primary",
+   "default": "var(--vvd-color-announcement-500)"
+  },
+  {
+   "name": "--vvd-split-button-announcement-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-split-button-announcement-primary-increment",
+   "default": "var(--vvd-color-announcement-600)"
+  },
+  {
+   "name": "--vvd-split-button-announcement-contrast",
+   "default": "var(--vvd-color-announcement-800)"
+  },
+  {
+   "name": "--vvd-split-button-announcement-fierce",
+   "default": "var(--vvd-color-announcement-700)"
+  },
+  {
+   "name": "--vvd-split-button-announcement-firm",
+   "default": "var(--vvd-color-announcement-600)"
+  },
+  {
+   "name": "--vvd-split-button-announcement-soft",
+   "default": "var(--vvd-color-announcement-100)"
+  },
+  {
+   "name": "--vvd-split-button-announcement-faint",
+   "default": "var(--vvd-color-announcement-50)"
+  },
   {
    "name": "--vvd-split-button-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
@@ -285,10 +317,16 @@ Code in this file were generated using following JSON:
  ],
  "events": [
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Event emitted when the action button is clicked",
    "name": "action-click"
   },
   {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
    "description": "Event emitted when the indicator button is clicked",
    "name": "indicator-click"
   }

package/v3/VwcSplitButton/package.json

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

package/v3/VwcSwitch/index.d.ts

@@ -16,8 +16,8 @@ declare const VwcSwitch: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onClick?: ((event: SyntheticEvent) => void) | undefined;
         onChange?: ((event: SyntheticEvent) => void) | undefined;
+        onClick?: ((event: SyntheticEvent) => void) | undefined;
         label?: string | undefined;
         connotation?: any;
         checked?: boolean | undefined;

package/v3/VwcSwitch/index.js

@@ -125,6 +125,15 @@ Code in this file were generated using following JSON:
    "privacy": "public"
   }
  ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Emits a custom change event when the checked state changes",
+   "name": "change"
+  }
+ ],
  "attributes": [
   {
    "name": "label",
@@ -153,7 +162,7 @@ Code in this file were generated using following JSON:
   "vueModels": [
    {
     "name": "modelValue",
-    "attributeName": "current-checked",
+    "attributeName": "checked",
     "eventName": "change",
     "valueMapping": "(event.target as HTMLInputElement).checked"
    }

package/v3/VwcSwitch/package.json

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

package/v3/VwcTab/index.d.ts

@@ -4,7 +4,7 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {TabConnotation | undefined} connotation - The connotation the tab should have. **attribute** `connotation`
 * @param {TabShape | undefined} shape - The shape the tab should have. **attribute** `shape`
 * @param {string | undefined} label - Indicates the tab's label. **attribute** `label`
-* @param {any} tabIndex  **attribute** `tabIndex`
+* @param {number} tabIndex  **attribute** `tabIndex`
 * @param {string | null} ariaSelected  **attribute** `aria-selected`
 */
 declare const VwcTab: {
@@ -18,7 +18,7 @@ declare const VwcTab: {
         connotation?: any;
         shape?: any;
         label?: string | undefined;
-        tabIndex?: any;
+        tabIndex?: number | undefined;
         ariaSelected?: string | null | undefined;
     }): JSX.Element;
     displayName: string;

package/v3/VwcTab/index.js

@@ -8,10 +8,6 @@ Code in this file were generated using following JSON:
  "description": "",
  "name": "Tab",
  "cssProperties": [
-  {
-   "name": "--vvd-tab-cta-primary",
-   "default": "var(--vvd-color-cta-500)"
-  },
   {
    "name": "--vvd-tab-cta-primary-text",
    "default": "var(--vvd-color-canvas)"
@@ -33,8 +29,8 @@ Code in this file were generated using following JSON:
    "default": "var(--vvd-color-cta-300)"
   },
   {
-   "name": "--vvd-tab-accent-primary",
-   "default": "var(--vvd-color-canvas-text)"
+   "name": "--vvd-tab-cta-soft",
+   "default": "var(--vvd-color-cta-100)"
   },
   {
    "name": "--vvd-tab-accent-primary-text",
@@ -55,6 +51,10 @@ Code in this file were generated using following JSON:
   {
    "name": "--vvd-tab-accent-pale",
    "default": "var(--vvd-color-neutral-300)"
+  },
+  {
+   "name": "--vvd-tab-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
   }
  ],
  "slots": [
@@ -95,9 +95,9 @@ Code in this file were generated using following JSON:
    "kind": "field",
    "name": "tabIndex",
    "type": {
-    "text": "any"
+    "text": "number"
    },
-   "default": "'-1'"
+   "default": "'-1' as unknown"
   },
   {
    "kind": "field",
@@ -135,9 +135,9 @@ Code in this file were generated using following JSON:
   },
   {
    "type": {
-    "text": "any"
+    "text": "number"
    },
-   "default": "'-1'",
+   "default": "'-1' as unknown",
    "fieldName": "tabIndex"
   },
   {

package/v3/VwcTab/package.json

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

package/v3/VwcTabPanel/package.json

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

package/v3/VwcTabs/index.js

@@ -9,11 +9,11 @@ Code in this file were generated using following JSON:
  "name": "Tabs",
  "cssProperties": [
   {
-   "name": "--vvd-tabs-cta-primary",
-   "default": "var(--vvd-color-cta-500)"
+   "name": "--vvd-tabs-cta-firm",
+   "default": "var(--vvd-color-cta-600)"
   },
   {
-   "name": "--vvd-tabs-accent-primary",
+   "name": "--vvd-tabs-accent-firm",
    "default": "var(--vvd-color-canvas-text)"
   }
  ],
@@ -144,6 +144,15 @@ Code in this file were generated using following JSON:
    "name": "#patchActiveID"
   }
  ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<HTMLElement>"
+   },
+   "description": "Fires a custom 'change' event when a tab is clicked or during keyboard navigation",
+   "name": "change"
+  }
+ ],
  "attributes": [
   {
    "name": "connotation",

package/v3/VwcTabs/package.json

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

package/v3/VwcTag/index.d.ts

@@ -1,4 +1,4 @@
-import React, { ReactNode } from 'react';
+import React, { ReactNode, SyntheticEvent } from 'react';
 /** VwcTag
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/tag
 * @param {TagConnotation | undefined} connotation - The connotation the tag should have. **attribute** `connotation`
@@ -17,6 +17,8 @@ declare const VwcTag: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onSelectedChange?: ((event: SyntheticEvent) => void) | undefined;
+        onRemoved?: ((event: SyntheticEvent) => void) | undefined;
         connotation?: any;
         shape?: any;
         appearance?: any;

package/v3/VwcTag/index.js

@@ -184,6 +184,22 @@ Code in this file were generated using following JSON:
    }
   }
  ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires when the selected state changes",
+   "name": "selected-change"
+  },
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Fires when the tag is removed",
+   "name": "removed"
+  }
+ ],
  "attributes": [
   {
    "name": "connotation",
@@ -266,7 +282,7 @@ import { registerTag } from '@vonage/vivid'
 registerTag('vvd3')
 
 const VwcTag = wrapper(`vvd3-tag`,  {
-    events: [],
+    events: [{"name":"removed","propName":"onRemoved"},{"name":"selected-change","propName":"onSelectedChange"}],
     attributes: [],
     properties: ['connotation', 'shape', 'appearance', 'label', 'removable', 'disabled', 'selectable', 'selected']
 })

package/v3/VwcTag/package.json

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

package/v3/VwcTagGroup/package.json

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

package/v3/VwcTextAnchor/package.json

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

package/v3/VwcTextArea/index.d.ts

@@ -10,6 +10,7 @@ declare const VwcTextArea: {
         id?: string | undefined;
         style?: React.CSSProperties | undefined;
         ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onChange?: ((event: SyntheticEvent) => void) | undefined;
         onInput?: ((event: SyntheticEvent) => void) | undefined;
         wrap?: any;
     }): JSX.Element;

package/v3/VwcTextArea/index.js

@@ -130,6 +130,15 @@ Code in this file were generated using following JSON:
    }
   }
  ],
+ "events": [
+  {
+   "type": {
+    "text": "CustomEvent<undefined>"
+   },
+   "description": "Emits a custom 'change' event when the textarea emits a change event",
+   "name": "change"
+  }
+ ],
  "attributes": [
   {
    "name": "wrap",
@@ -150,7 +159,7 @@ Code in this file were generated using following JSON:
   "vueModels": [
    {
     "name": "modelValue",
-    "attributeName": "current-value",
+    "attributeName": "value",
     "eventName": "input",
     "valueMapping": "(event.target as HTMLInputElement).value"
    }
@@ -164,7 +173,7 @@ import { registerTextArea } from '@vonage/vivid'
 registerTextArea('vvd3')
 
 const VwcTextArea = wrapper(`vvd3-text-area`,  {
-    events: [{"name":"input","propName":"onInput"}],
+    events: [{"name":"input","propName":"onInput"},{"name":"change","propName":"onChange"}],
     attributes: [],
     properties: ['wrap']
 })

package/v3/VwcTextArea/package.json

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