@vonage/vivid-react 2.10.80 → 2.10.83

package/v3/VwcTabPanel/package.json

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

package/v3/VwcTabs/index.d.ts

@@ -4,6 +4,7 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {HTMLElement | undefined} tablist
 * @param {TabsConnotation | undefined} connotation - The connotation the tabs should have. **attribute** `connotation`
 * @param {Gutters | undefined} gutters - sets the initial preferred margin from predefined available options **attribute** `gutters`
+* @param {boolean} scrollablePanel - sets overflow to the tab-panel **attribute** `scrollable-panel`
 */
 declare const VwcTabs: {
     (props: {
@@ -16,6 +17,7 @@ declare const VwcTabs: {
         tablist?: any;
         connotation?: any;
         gutters?: any;
+        scrollablePanel?: boolean | undefined;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcTabs/index.js

@@ -49,6 +49,16 @@ Code in this file were generated using following JSON:
    "description": "sets the initial preferred margin from predefined available options",
    "privacy": "public"
   },
+  {
+   "kind": "field",
+   "name": "scrollablePanel",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "sets overflow to the tab-panel",
+   "privacy": "public"
+  },
   {
    "kind": "method",
    "name": "connotationChanged"
@@ -150,6 +160,15 @@ Code in this file were generated using following JSON:
    },
    "description": "sets the initial preferred margin from predefined available options",
    "fieldName": "gutters"
+  },
+  {
+   "name": "scrollable-panel",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "sets overflow to the tab-panel",
+   "fieldName": "scrollablePanel"
   }
  ],
  "superclass": {
@@ -166,7 +185,7 @@ registerTabs('vvd3')
 const VwcTabs = wrapper(`vvd3-tabs`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['tablist', 'connotation', 'gutters']
+    properties: ['tablist', 'connotation', 'gutters', 'scrollablePanel']
 })
 
 VwcTabs.displayName = 'VwcTabs'

package/v3/VwcTabs/package.json

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

package/v3/VwcTag/index.js

@@ -65,6 +65,12 @@ Code in this file were generated using following JSON:
    "default": "var(--vvd-color-neutral-200)"
   }
  ],
+ "slots": [
+  {
+   "description": "Add an icon to the component.",
+   "name": "icon"
+  }
+ ],
  "members": [
   {
    "kind": "field",

package/v3/VwcTag/package.json

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

package/v3/VwcTagGroup/package.json

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

package/v3/VwcTextAnchor/index.js

@@ -7,6 +7,12 @@ Code in this file were generated using following JSON:
  "kind": "class",
  "description": "Base class for text-anchor",
  "name": "TextAnchor",
+ "slots": [
+  {
+   "description": "Add an icon to the component.",
+   "name": "icon"
+  }
+ ],
  "members": [
   {
    "kind": "field",

package/v3/VwcTextAnchor/package.json

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

package/v3/VwcTextArea/index.js

@@ -13,8 +13,12 @@ Code in this file were generated using following JSON:
    "default": "var(--vvd-color-success-500)"
   },
   {
-   "name": "--vvd-text-area-success-backdrop",
-   "default": "var(--vvd-color-success-50)"
+   "name": "--vvd-text-area-success-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-text-area-success-primary-increment",
+   "default": "var(--vvd-color-success-600)"
   },
   {
    "name": "--vvd-text-area-success-intermediate",
@@ -24,6 +28,10 @@ Code in this file were generated using following JSON:
    "name": "--vvd-text-area-success-firm",
    "default": "var(--vvd-color-success-600)"
   },
+  {
+   "name": "--vvd-text-area-success-fierce",
+   "default": "var(--vvd-color-success-700)"
+  },
   {
    "name": "--vvd-text-area-success-faint",
    "default": "var(--vvd-color-success-50)"
@@ -37,8 +45,12 @@ Code in this file were generated using following JSON:
    "default": "var(--vvd-color-alert-500)"
   },
   {
-   "name": "--vvd-text-area-alert-backdrop",
-   "default": "var(--vvd-color-alert-50)"
+   "name": "--vvd-text-area-alert-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-text-area-alert-primary-increment",
+   "default": "var(--vvd-color-alert-600)"
   },
   {
    "name": "--vvd-text-area-alert-intermediate",
@@ -48,6 +60,10 @@ Code in this file were generated using following JSON:
    "name": "--vvd-text-area-alert-firm",
    "default": "var(--vvd-color-alert-600)"
   },
+  {
+   "name": "--vvd-text-area-alert-fierce",
+   "default": "var(--vvd-color-alert-700)"
+  },
   {
    "name": "--vvd-text-area-alert-faint",
    "default": "var(--vvd-color-alert-50)"
@@ -61,9 +77,13 @@ Code in this file were generated using following JSON:
    "default": "var(--vvd-color-canvas-text)"
   },
   {
-   "name": "--vvd-text-area-accent-backdrop",
+   "name": "--vvd-text-area-accent-primary-text",
    "default": "var(--vvd-color-canvas)"
   },
+  {
+   "name": "--vvd-text-area-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
   {
    "name": "--vvd-text-area-accent-intermediate",
    "default": "var(--vvd-color-neutral-500)"
@@ -72,6 +92,10 @@ Code in this file were generated using following JSON:
    "name": "--vvd-text-area-accent-firm",
    "default": "var(--vvd-color-canvas-text)"
   },
+  {
+   "name": "--vvd-text-area-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
   {
    "name": "--vvd-text-area-accent-faint",
    "default": "var(--vvd-color-neutral-50)"

package/v3/VwcTextArea/package.json

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

package/v3/VwcTextField/index.js

@@ -8,62 +8,18 @@ Code in this file were generated using following JSON:
  "description": "Base class for text-field",
  "name": "TextField",
  "cssProperties": [
-  {
-   "name": "--vvd-text-field-success-primary",
-   "default": "var(--vvd-color-success-500)"
-  },
-  {
-   "name": "--vvd-text-field-success-backdrop",
-   "default": "var(--vvd-color-success-50)"
-  },
-  {
-   "name": "--vvd-text-field-success-intermediate",
-   "default": "var(--vvd-color-success-500)"
-  },
-  {
-   "name": "--vvd-text-field-success-firm",
-   "default": "var(--vvd-color-success-600)"
-  },
-  {
-   "name": "--vvd-text-field-success-faint",
-   "default": "var(--vvd-color-success-50)"
-  },
-  {
-   "name": "--vvd-text-field-success-soft",
-   "default": "var(--vvd-color-success-100)"
-  },
-  {
-   "name": "--vvd-text-field-alert-primary",
-   "default": "var(--vvd-color-alert-500)"
-  },
-  {
-   "name": "--vvd-text-field-alert-backdrop",
-   "default": "var(--vvd-color-alert-50)"
-  },
-  {
-   "name": "--vvd-text-field-alert-intermediate",
-   "default": "var(--vvd-color-alert-500)"
-  },
-  {
-   "name": "--vvd-text-field-alert-firm",
-   "default": "var(--vvd-color-alert-600)"
-  },
-  {
-   "name": "--vvd-text-field-alert-faint",
-   "default": "var(--vvd-color-alert-50)"
-  },
-  {
-   "name": "--vvd-text-field-alert-soft",
-   "default": "var(--vvd-color-alert-100)"
-  },
   {
    "name": "--vvd-text-field-accent-primary",
    "default": "var(--vvd-color-canvas-text)"
   },
   {
-   "name": "--vvd-text-field-accent-backdrop",
+   "name": "--vvd-text-field-accent-primary-text",
    "default": "var(--vvd-color-canvas)"
   },
+  {
+   "name": "--vvd-text-field-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
   {
    "name": "--vvd-text-field-accent-intermediate",
    "default": "var(--vvd-color-neutral-500)"
@@ -72,6 +28,10 @@ Code in this file were generated using following JSON:
    "name": "--vvd-text-field-accent-firm",
    "default": "var(--vvd-color-canvas-text)"
   },
+  {
+   "name": "--vvd-text-field-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
   {
    "name": "--vvd-text-field-accent-faint",
    "default": "var(--vvd-color-neutral-50)"

package/v3/VwcTextField/package.json

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

package/v3/VwcTimePicker/index.d.ts

@@ -0,0 +1,36 @@
+import React, { ReactNode, SyntheticEvent } from 'react';
+/** Base class for time-picker
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/time-picker
+* @param {boolean} readOnly - Whether the time-picker is readonly. **attribute** `readonly`
+* @param {number | null} minutesStep - Distance between presented minute options. **attribute** `minutes-step`
+* @param {number | null} secondsStep - Distance between presented seconds options. If null, seconds are not presented. **attribute** `seconds-step`
+* @param {'12h' | '24h' | undefined} clock - Forces the time-picker to use a 12h or 24h clock. **attribute** `clock`
+* @param {string} min - The earliest accepted time of the time-picker. **attribute** `min`
+* @param {string} max - The latest accepted time of the time-picker. **attribute** `max`
+* @param {string} value
+* @param {string} type
+* @param {string} step
+* @param  proxy
+*/
+declare const VwcTimePicker: {
+    (props: {
+        children?: ReactNode;
+        slot?: string | undefined;
+        id?: string | undefined;
+        style?: React.CSSProperties | undefined;
+        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
+        onChange?: ((event: SyntheticEvent) => void) | undefined;
+        readOnly?: boolean | undefined;
+        minutesStep?: number | undefined;
+        secondsStep?: number | undefined;
+        clock?: any;
+        min?: string | undefined;
+        max?: string | undefined;
+        value?: string | undefined;
+        type?: string | undefined;
+        step?: string | undefined;
+        proxy?: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcTimePicker;

package/v3/VwcTimePicker/index.js

@@ -0,0 +1,263 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Base class for time-picker",
+ "name": "TimePicker",
+ "cssProperties": [
+  {
+   "name": "--vvd-time-picker-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-faint",
+   "default": "var(--vvd-color-neutral-50)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-soft",
+   "default": "var(--vvd-color-neutral-100)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-dim",
+   "default": "var(--vvd-color-neutral-200)"
+  },
+  {
+   "name": "--vvd-time-picker-accent-pale",
+   "default": "var(--vvd-color-neutral-300)"
+  }
+ ],
+ "members": [
+  {
+   "kind": "field",
+   "name": "readOnly",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Whether the time-picker is readonly.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "minutesStep",
+   "type": {
+    "text": "number | null"
+   },
+   "default": "null",
+   "description": "Distance between presented minute options.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "secondsStep",
+   "type": {
+    "text": "number | null"
+   },
+   "default": "null",
+   "description": "Distance between presented seconds options. If null, seconds are not presented.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "clock",
+   "type": {
+    "text": "'12h' | '24h' | undefined"
+   },
+   "description": "Forces the time-picker to use a 12h or 24h clock.",
+   "privacy": "public"
+  },
+  {
+   "kind": "field",
+   "name": "min",
+   "type": {
+    "text": "string"
+   },
+   "description": "The earliest accepted time of the time-picker.",
+   "privacy": "public",
+   "default": "''"
+  },
+  {
+   "kind": "field",
+   "name": "max",
+   "type": {
+    "text": "string"
+   },
+   "description": "The latest accepted time of the time-picker.",
+   "privacy": "public",
+   "default": "''"
+  },
+  {
+   "kind": "field",
+   "name": "#getFocusableEls",
+   "privacy": "private"
+  },
+  {
+   "kind": "method",
+   "name": "#updateValueDueToUserInteraction",
+   "parameters": [
+    {
+     "name": "newValue",
+     "type": {
+      "text": "TimeStr"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "#onFocusIn",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "#onFocusOut",
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "#dismissOnClickOutside",
+   "privacy": "private"
+  },
+  {
+   "kind": "method",
+   "name": "#openPopupIfPossible"
+  },
+  {
+   "kind": "method",
+   "name": "#scrollToItem",
+   "parameters": [
+    {
+     "name": "picker",
+     "type": {
+      "text": "string"
+     }
+    },
+    {
+     "name": "selectedValue",
+     "type": {
+      "text": "string"
+     }
+    },
+    {
+     "name": "position",
+     "type": {
+      "text": "'nearest' | 'start'"
+     }
+    }
+   ]
+  },
+  {
+   "kind": "field",
+   "name": "value",
+   "type": {
+    "text": "string"
+   },
+   "default": "''"
+  },
+  {
+   "kind": "field",
+   "name": "type",
+   "type": {
+    "text": "string"
+   },
+   "default": "'time'"
+  },
+  {
+   "kind": "field",
+   "name": "step",
+   "type": {
+    "text": "string"
+   },
+   "default": "'1'"
+  },
+  {
+   "kind": "field",
+   "name": "proxy",
+   "inheritedFrom": {
+    "name": "FormAssociatedTimePicker",
+    "module": "libs/components/src/lib/time-picker/time-picker.form-associated.ts"
+   }
+  }
+ ],
+ "events": [
+  {
+   "description": "Emitted when the time is changed by the user.",
+   "name": "change"
+  }
+ ],
+ "attributes": [
+  {
+   "name": "readonly",
+   "type": {
+    "text": "boolean"
+   },
+   "default": "false",
+   "description": "Whether the time-picker is readonly.",
+   "fieldName": "readOnly"
+  },
+  {
+   "name": "minutes-step",
+   "type": {
+    "text": "number | null"
+   },
+   "default": "null",
+   "description": "Distance between presented minute options.",
+   "fieldName": "minutesStep"
+  },
+  {
+   "name": "seconds-step",
+   "type": {
+    "text": "number | null"
+   },
+   "default": "null",
+   "description": "Distance between presented seconds options. If null, seconds are not presented.",
+   "fieldName": "secondsStep"
+  },
+  {
+   "name": "clock",
+   "type": {
+    "text": "'12h' | '24h' | undefined"
+   },
+   "description": "Forces the time-picker to use a 12h or 24h clock.",
+   "fieldName": "clock"
+  },
+  {
+   "type": {
+    "text": "string"
+   },
+   "description": "The earliest accepted time of the time-picker.",
+   "default": "''",
+   "fieldName": "min"
+  },
+  {
+   "type": {
+    "text": "string"
+   },
+   "description": "The latest accepted time of the time-picker.",
+   "default": "''",
+   "fieldName": "max"
+  }
+ ],
+ "superclass": {
+  "name": "FormAssociatedTimePicker",
+  "module": "/libs/components/src/lib/time-picker/time-picker.form-associated"
+ }
+}
+*/
+import wrapper from '@vonage/vivid-react-wrapper'
+import { registerTimePicker } from '@vonage/vivid'
+
+registerTimePicker('vvd3')
+
+const VwcTimePicker = wrapper(`vvd3-time-picker`,  {
+    events: [{"name":"change","propName":"onChange"}],
+    attributes: [],
+    properties: ['readOnly', 'minutesStep', 'secondsStep', 'clock', 'min', 'max', 'value', 'type', 'step', 'proxy']
+})
+
+VwcTimePicker.displayName = 'VwcTimePicker'
+
+export default VwcTimePicker

package/v3/VwcTimePicker/package.json

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

package/v3/VwcToggletip/package.json

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