@vonage/vivid-react 3.5.2 → 5.19.0

package/v3/VwcAccordion/index.js

@@ -20,7 +20,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AccordionExpandMode"
    },
-   "description": "Controls the expand mode of the Accordion, either allowing\nsingle or multiple item expansion.",
+   "description": "Determines if multiple items or a single item can opened at once",
    "privacy": "public"
   },
   {
@@ -204,7 +204,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "AccordionExpandMode"
    },
-   "description": "Controls the expand mode of the Accordion, either allowing\nsingle or multiple item expansion.",
+   "description": "Determines if multiple items or a single item can opened at once",
    "fieldName": "expandmode"
   }
  ],
@@ -218,7 +218,7 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerAccordion } from '@vonage/vivid'
 
 registerAccordion('vvd3')

package/v3/VwcAccordion/package.json

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

package/v3/VwcAccordionItem/index.d.ts

@@ -3,6 +3,7 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/accordion-item
 * @param {1 | 2 | 3 | 4 | 5 | 6} headinglevel - Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the
 heading element. **attribute** `heading-level`
+* @param {AccordionItemAppearance | undefined} appearance - The appearance the button should have. **attribute** `appearance`
 * @param {boolean} expanded - Expands or collapses the item. **attribute** `expanded`
 * @param {string} id - The item ID **attribute** `id`
 * @param {string | undefined} heading  **attribute** `heading`
@@ -10,7 +11,8 @@ heading element. **attribute** `heading-level`
 * @param {string | undefined} meta  **attribute** `meta`
 * @param {AccordionItemSize | undefined} size - The size the accordion-item should have. **attribute** `size`
 * @param {boolean} iconTrailing - Indicates the icon affix alignment. **attribute** `icon-trailing`
-* @param {string | undefined} icon - A decorative icon the custom element should have. **attribute** `icon`
+* @param {string | undefined} icon - A decorative icon the custom element should have. See the [Vivid Icon
+Gallery](/icons/icons-gallery/) for available icons and `icon-name`s **attribute** `icon`
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
 It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 * @param {string} componentName - Core component name, without prefix
@@ -18,21 +20,23 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcAccordionItem: {
     (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;
-        headinglevel?: any;
-        expanded?: boolean | undefined;
-        heading?: string | undefined;
-        noIndicator?: boolean | undefined;
-        meta?: string | undefined;
-        size?: any;
-        iconTrailing?: boolean | undefined;
-        icon?: string | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onChange?: (event: SyntheticEvent) => void;
+        "headinglevel"?: any;
+        "appearance"?: any;
+        "expanded"?: boolean;
+        "id"?: string;
+        "heading"?: string | undefined;
+        "noIndicator"?: boolean;
+        "meta"?: string | undefined;
+        "size"?: any;
+        "iconTrailing"?: boolean;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcAccordionItem/index.js

@@ -8,6 +8,22 @@ Code in this file were generated using following JSON:
  "description": "",
  "name": "AccordionItem",
  "cssProperties": [
+  {
+   "name": "--vvd-accordion-item-accent-primary",
+   "default": "var(--vvd-color-canvas-text)"
+  },
+  {
+   "name": "--vvd-accordion-item-accent-primary-text",
+   "default": "var(--vvd-color-canvas)"
+  },
+  {
+   "name": "--vvd-accordion-item-accent-primary-increment",
+   "default": "var(--vvd-color-neutral-800)"
+  },
+  {
+   "name": "--vvd-accordion-item-accent-fierce",
+   "default": "var(--vvd-color-neutral-700)"
+  },
   {
    "name": "--vvd-accordion-item-accent-faint",
    "default": "var(--vvd-color-neutral-50)"
@@ -50,6 +66,15 @@ Code in this file were generated using following JSON:
    "description": "Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the\nheading element.",
    "privacy": "public"
   },
+  {
+   "kind": "field",
+   "name": "appearance",
+   "type": {
+    "text": "AccordionItemAppearance | undefined"
+   },
+   "description": "The appearance the button should have.",
+   "privacy": "public"
+  },
   {
    "kind": "field",
    "name": "expanded",
@@ -131,7 +156,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "privacy": "public",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -185,6 +210,14 @@ Code in this file were generated using following JSON:
    "description": "Configures the https://www.w3.org/TR/wai-aria-1.1/#aria-level | level of the\nheading element.",
    "fieldName": "headinglevel"
   },
+  {
+   "name": "appearance",
+   "type": {
+    "text": "AccordionItemAppearance | undefined"
+   },
+   "description": "The appearance the button should have.",
+   "fieldName": "appearance"
+  },
   {
    "name": "expanded",
    "type": {
@@ -251,7 +284,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "fieldName": "icon",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -272,10 +305,61 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "accordion-item"
+ },
+ "vividTesting": {
+  "selectors": [
+   {
+    "name": "byHeading",
+    "args": [
+     "byHeading"
+    ]
+   }
+  ],
+  "actions": [
+   {
+    "name": "expand",
+    "args": [
+     "toggleAccordionItem",
+     "true"
+    ]
+   },
+   {
+    "name": "collapse",
+    "args": [
+     "toggleAccordionItem",
+     "false"
+    ]
+   }
+  ],
+  "queries": [
+   {
+    "name": "expanded",
+    "args": [
+     "expanded",
+     "true"
+    ]
+   },
+   {
+    "name": "collapsed",
+    "args": [
+     "expanded",
+     "false"
+    ]
+   }
+  ],
+  "refs": [
+   {
+    "name": "button",
+    "args": [
+     "shadow",
+     ".heading-button"
+    ]
+   }
+  ]
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerAccordionItem } from '@vonage/vivid'
 
 registerAccordionItem('vvd3')
@@ -283,7 +367,7 @@ registerAccordionItem('vvd3')
 const VwcAccordionItem = wrapper(`vvd3-accordion-item`,  {
     events: [{"name":"change","propName":"onChange"}],
     attributes: [],
-    properties: ['headinglevel', 'expanded', 'id', 'heading', 'noIndicator', 'meta', 'size', 'iconTrailing', 'icon', 'VIVID_VERSION', 'componentName']
+    properties: ['headinglevel', 'appearance', 'expanded', 'id', 'heading', 'noIndicator', 'meta', 'size', 'iconTrailing', 'icon', 'VIVID_VERSION', 'componentName']
 })
 
 VwcAccordionItem.displayName = 'VwcAccordionItem'

package/v3/VwcAccordionItem/package.json

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

package/v3/VwcActionGroup/index.d.ts

@@ -1,10 +1,9 @@
 import React, { ReactNode } from 'react';
 /** VwcActionGroup
 * For more info on this Vivid element please visit https://vivid.deno.dev/components/action-group
-* @param {ActionGroupShape | undefined} shape - The shape the ActionGroup should have. **attribute** `shape`
-* @param {ActionGroupAppearance | undefined} appearance - The appearance the ActionGroup should have. **attribute** `appearance`
+* @param {ActionGroupShape | undefined} shape - Sets the element's border-radius **attribute** `shape`
+* @param {ActionGroupAppearance | undefined} appearance - Sets the element's appearance **attribute** `appearance`
 * @param {boolean} tight - Indicates whether action group should have padding. **attribute** `tight`
-* @param {'delegate'} _vividAriaBehaviour
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
 It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 * @param {string} componentName - Core component name, without prefix
@@ -12,16 +11,15 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcActionGroup: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        shape?: any;
-        appearance?: any;
-        tight?: boolean | undefined;
-        _vividAriaBehaviour?: any;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "shape"?: any;
+        "appearance"?: any;
+        "tight"?: boolean;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcActionGroup/index.js

@@ -34,7 +34,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ActionGroupShape | undefined"
    },
-   "description": "The shape the ActionGroup should have.",
+   "description": "Sets the element's border-radius",
    "privacy": "public"
   },
   {
@@ -43,7 +43,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ActionGroupAppearance | undefined"
    },
-   "description": "The appearance the ActionGroup should have.",
+   "description": "Sets the element's appearance",
    "privacy": "public"
   },
   {
@@ -56,18 +56,6 @@ Code in this file were generated using following JSON:
    "description": "Indicates whether action group should have padding.",
    "privacy": "public"
   },
-  {
-   "kind": "field",
-   "name": "_vividAriaBehaviour",
-   "default": "'delegate'",
-   "type": {
-    "text": "'delegate'"
-   },
-   "inheritedFrom": {
-    "name": "DelegatesAria",
-    "module": "src/shared/aria/delegates-aria.ts"
-   }
-  },
   {
    "kind": "field",
    "name": "VIVID_VERSION",
@@ -102,7 +90,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ActionGroupShape | undefined"
    },
-   "description": "The shape the ActionGroup should have.",
+   "description": "Sets the element's border-radius",
    "fieldName": "shape"
   },
   {
@@ -110,7 +98,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "ActionGroupAppearance | undefined"
    },
-   "description": "The appearance the ActionGroup should have.",
+   "description": "Sets the element's appearance",
    "fieldName": "appearance"
   },
   {
@@ -139,7 +127,7 @@ Code in this file were generated using following JSON:
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerActionGroup } from '@vonage/vivid'
 
 registerActionGroup('vvd3')
@@ -147,7 +135,7 @@ registerActionGroup('vvd3')
 const VwcActionGroup = wrapper(`vvd3-action-group`,  {
     events: [],
     attributes: [],
-    properties: ['shape', 'appearance', 'tight', '_vividAriaBehaviour', 'VIVID_VERSION', 'componentName']
+    properties: ['shape', 'appearance', 'tight', 'VIVID_VERSION', 'componentName']
 })
 
 VwcActionGroup.displayName = 'VwcActionGroup'

package/v3/VwcActionGroup/package.json

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

package/v3/VwcAlert/index.d.ts

@@ -11,7 +11,8 @@ import React, { ReactNode, SyntheticEvent } from 'react';
 * @param {AlertConnotation | undefined} connotation - Sets an appropriate icon / icon color for the connotation. **attribute** `connotation`
 * @param {AlertStrategy | undefined} strategy - Controls the `position` of the Alert. **attribute** `strategy`
 * @param {boolean} open - Open state of the Alert. **attribute** `open`
-* @param {string | undefined} icon - A decorative icon the custom element should have. **attribute** `icon`
+* @param {string | undefined} icon - A decorative icon the custom element should have. See the [Vivid Icon
+Gallery](/icons/icons-gallery/) for available icons and `icon-name`s **attribute** `icon`
 * @param {string} VIVID_VERSION - The current version of the Vivid library, which is useful for debugging.
 It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 * @param {string} componentName - Core component name, without prefix
@@ -19,24 +20,24 @@ It can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.
 declare const VwcAlert: {
     (props: {
         children?: ReactNode;
-        slot?: string | undefined;
-        id?: string | undefined;
-        style?: React.CSSProperties | undefined;
-        ref?: React.RefObject<HTMLDivElement> | ((instance: HTMLDivElement | null) => void) | null | undefined;
-        onOpen?: ((event: SyntheticEvent) => void) | undefined;
-        onClose?: ((event: SyntheticEvent) => void) | undefined;
-        dismissButtonAriaLabel?: any;
-        removable?: boolean | undefined;
-        placement?: any;
-        headline?: string | undefined;
-        text?: string | undefined;
-        timeoutms?: number | undefined;
-        connotation?: any;
-        strategy?: any;
-        open?: boolean | undefined;
-        icon?: string | undefined;
-        VIVID_VERSION?: string | undefined;
-        componentName?: string | undefined;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        onOpen?: (event: SyntheticEvent) => void;
+        onClose?: (event: SyntheticEvent) => void;
+        "dismissButtonAriaLabel"?: any;
+        "removable"?: boolean;
+        "placement"?: any;
+        "headline"?: string | undefined;
+        "text"?: string | undefined;
+        "timeoutms"?: number;
+        "connotation"?: any;
+        "strategy"?: any;
+        "open"?: boolean;
+        "icon"?: string | undefined;
+        "VIVID_VERSION"?: string;
+        "componentName"?: string;
     }): JSX.Element;
     displayName: string;
 };

package/v3/VwcAlert/index.js

@@ -87,7 +87,7 @@ Code in this file were generated using following JSON:
    "name": "#timeoutID",
    "privacy": "private",
    "type": {
-    "text": "NodeJS.Timeout | undefined"
+    "text": "ReturnType<typeof setTimeout> | undefined"
    }
   },
   {
@@ -166,29 +166,6 @@ Code in this file were generated using following JSON:
    "description": "Open state of the Alert.",
    "privacy": "public"
   },
-  {
-   "kind": "method",
-   "name": "openChanged",
-   "return": {
-    "type": {
-     "text": "void"
-    }
-   },
-   "parameters": [
-    {
-     "name": "oldValue",
-     "type": {
-      "text": "boolean"
-     }
-    },
-    {
-     "name": "newValue",
-     "type": {
-      "text": "boolean"
-     }
-    }
-   ]
-  },
   {
    "kind": "field",
    "name": "conditionedIcon",
@@ -214,7 +191,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "privacy": "public",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -348,7 +325,7 @@ Code in this file were generated using following JSON:
    "type": {
     "text": "string | undefined"
    },
-   "description": "A decorative icon the custom element should have.",
+   "description": "A decorative icon the custom element should have. See the [Vivid Icon\nGallery](/icons/icons-gallery/) for available icons and `icon-name`s",
    "fieldName": "icon",
    "inheritedFrom": {
     "name": "AffixIcon",
@@ -373,10 +350,38 @@ Code in this file were generated using following JSON:
  "vividComponent": {
   "public": true,
   "name": "alert"
+ },
+ "vividTesting": {
+  "selectors": [
+   {
+    "name": "byHeadline",
+    "args": [
+     "byHeadline"
+    ]
+   }
+  ],
+  "actions": [],
+  "queries": [
+   {
+    "name": "open",
+    "args": [
+     "open",
+     "true"
+    ]
+   },
+   {
+    "name": "closed",
+    "args": [
+     "open",
+     "false"
+    ]
+   }
+  ],
+  "refs": []
  }
 }
 */
-import wrapper from '@vonage/vivid-react-wrapper'
+import wrapper from '@repo/react-component-wrapper'
 import { registerAlert } from '@vonage/vivid'
 
 registerAlert('vvd3')

package/v3/VwcAlert/package.json

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

package/v3/VwcAriaBindingDirective/index.d.ts

@@ -0,0 +1,19 @@
+import React, { ReactNode } from 'react';
+/** Directive for both delegate and host semantics.
+* For more info on this Vivid element please visit https://vivid.deno.dev/components/aria-binding-directive
+* @param {string | undefined} targetNodeId
+* @param {DOMPolicy | undefined} policy
+*/
+declare const VwcAriaBindingDirective: {
+    (props: {
+        children?: ReactNode;
+        slot?: string;
+        id?: string;
+        style?: React.CSSProperties;
+        ref?: ((instance: HTMLDivElement | null) => void) | React.RefObject<HTMLDivElement> | null | undefined;
+        "targetNodeId"?: string | undefined;
+        "policy"?: any;
+    }): JSX.Element;
+    displayName: string;
+};
+export default VwcAriaBindingDirective;

package/v3/VwcAriaBindingDirective/index.js

@@ -0,0 +1,71 @@
+/*
+* DO NOT EDIT THIS FILE. IT IS GENERATED
+*/
+/*
+Code in this file were generated using following JSON:
+{
+ "kind": "class",
+ "description": "Directive for both delegate and host semantics.",
+ "name": "AriaBindingDirective",
+ "members": [
+  {
+   "kind": "field",
+   "name": "targetNodeId",
+   "type": {
+    "text": "string | undefined"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "policy",
+   "type": {
+    "text": "DOMPolicy | undefined"
+   }
+  },
+  {
+   "kind": "field",
+   "name": "_propertyBindingBehaviours",
+   "type": {
+    "text": "ViewBehavior[] | undefined"
+   },
+   "privacy": "private"
+  },
+  {
+   "kind": "field",
+   "name": "propertyBindingBehaviours",
+   "privacy": "private",
+   "readonly": true
+  },
+  {
+   "kind": "method",
+   "name": "bind",
+   "parameters": [
+    {
+     "name": "controller",
+     "type": {
+      "text": "ViewController<DelegatesAriaElement>"
+     }
+    }
+   ]
+  }
+ ],
+ "superclass": {
+  "name": "StatelessAttachedAttributeDirective",
+  "package": "@microsoft/fast-element"
+ }
+}
+*/
+import wrapper from '@repo/react-component-wrapper'
+import { registerAriaBindingDirective } from '@vonage/vivid'
+
+registerAriaBindingDirective('vvd3')
+
+const VwcAriaBindingDirective = wrapper(`vvd3-aria-binding-directive`,  {
+    events: [],
+    attributes: [],
+    properties: ['targetNodeId', 'policy']
+})
+
+VwcAriaBindingDirective.displayName = 'VwcAriaBindingDirective'
+
+export default VwcAriaBindingDirective

package/v3/{VwcDelegateAriaBehavior → VwcAriaBindingDirective}/package.json

@@ -1,11 +1,11 @@
 {
-  "name": "@vonage/vivid-react-vvd3-delegate-aria-behavior",
-  "version": "4.29.0",
+  "name": "@vonage/vivid-react-vvd3-aria-binding-directive",
+  "version": "5.19.0",
   "main": "index.js",
   "types": "index.d.ts",
   "private": true,
   "license": "MIT",
   "dependencies": {
-    "@vonage/vivid": "4.29.0"
+    "@vonage/vivid": "5.19.0"
   }
 }