@vonage/vivid 4.14.0 → 4.14.2

package/custom-elements.json

@@ -2803,6 +2803,7 @@
               "type": {
                 "text": "string"
               },
+              "description": "Specifies extra information about the button. This information is typically used by browsers to display a tooltip.",
               "default": "''"
             },
             {
@@ -3226,7 +3227,7 @@
               "type": {
                 "text": "boolean"
               },
-              "description": "Determines if the element should receive document focus on page load.",
+              "description": "Specifies extra information about the button. This information is typically used by browsers to display a tooltip.",
               "fieldName": "title",
               "default": "''",
               "inheritedFrom": {
@@ -5832,6 +5833,10 @@
               "description": "When true the component will not add itself to the tab queue.\nDefault is false.",
               "privacy": "public"
             },
+            {
+              "kind": "method",
+              "name": "#setTabIndex"
+            },
             {
               "kind": "field",
               "name": "generateHeader",
@@ -8028,6 +8033,16 @@
       "kind": "javascript-module",
       "path": "libs/components/src/lib/divider/divider.ts",
       "declarations": [
+        {
+          "kind": "variable",
+          "name": "DividerRole",
+          "type": {
+            "text": "{\n\t/**\n\t * The divider semantically separates content\n\t */\n\tseparator: 'separator',\n\n\t/**\n\t * The divider has no semantic value and is for visual presentation only.\n\t */\n\tpresentation: 'presentation',\n}"
+          },
+          "default": "{\n\t/**\n\t * The divider semantically separates content\n\t */\n\tseparator: 'separator',\n\n\t/**\n\t * The divider has no semantic value and is for visual presentation only.\n\t */\n\tpresentation: 'presentation',\n}",
+          "description": "Divider roles",
+          "privacy": "public"
+        },
         {
           "kind": "class",
           "description": "",
@@ -8081,6 +8096,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "DividerRole",
+          "declaration": {
+            "name": "DividerRole",
+            "module": "libs/components/src/lib/divider/divider.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "Divider",
@@ -8150,6 +8173,13 @@
               },
               "description": "toggles the elevation's shadow.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "notRelative",
+              "type": {
+                "text": "boolean | undefined"
+              }
             }
           ],
           "attributes": [
@@ -8168,6 +8198,13 @@
               },
               "description": "toggles the elevation's shadow.",
               "fieldName": "noShadow"
+            },
+            {
+              "name": "not-relative",
+              "type": {
+                "text": "boolean | undefined"
+              },
+              "fieldName": "notRelative"
             }
           ],
           "superclass": {
@@ -10060,180 +10097,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/listbox/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "registerListbox",
-          "description": "Registers the listbox elements with the design system.",
-          "parameters": [
-            {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "LisboxAppearance",
-          "declaration": {
-            "name": "LisboxAppearance",
-            "module": "./listbox"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerListbox",
-          "declaration": {
-            "name": "registerListbox",
-            "module": "libs/components/src/lib/listbox/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/listbox/listbox.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "Listbox",
-          "cssProperties": [
-            {
-              "name": "--vvd-listbox-accent-intermediate",
-              "default": "var(--vvd-color-neutral-500)"
-            },
-            {
-              "name": "--vvd-listbox-accent-primary",
-              "default": "var(--vvd-color-canvas-text)"
-            },
-            {
-              "name": "--vvd-listbox-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
-            }
-          ],
-          "slots": [
-            {
-              "description": "Default slot.",
-              "name": ""
-            }
-          ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "appearance",
-              "type": {
-                "text": "LisboxAppearance | undefined"
-              },
-              "description": "The appearance the listbox should have.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical' | undefined"
-              },
-              "description": "The direction the listbox options should flow.",
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "orientationChanged",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            },
-            {
-              "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "ListboxShape | undefined"
-              },
-              "description": "The shape the listbox should have.",
-              "privacy": "public"
-            },
-            {
-              "kind": "method",
-              "name": "slottedOptionsChanged",
-              "parameters": [
-                {
-                  "name": "prev",
-                  "type": {
-                    "text": "Element[] | undefined"
-                  }
-                },
-                {
-                  "name": "next",
-                  "type": {
-                    "text": "Element[]"
-                  }
-                }
-              ]
-            },
-            {
-              "kind": "method",
-              "name": "#disableSlottedChildren",
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "appearance",
-              "type": {
-                "text": "LisboxAppearance | undefined"
-              },
-              "description": "The appearance the listbox should have.",
-              "fieldName": "appearance"
-            },
-            {
-              "name": "orientation",
-              "type": {
-                "text": "'horizontal' | 'vertical' | undefined"
-              },
-              "description": "The direction the listbox options should flow.",
-              "fieldName": "orientation"
-            },
-            {
-              "name": "shape",
-              "type": {
-                "text": "ListboxShape | undefined"
-              },
-              "description": "The shape the listbox should have.",
-              "fieldName": "shape"
-            }
-          ],
-          "superclass": {
-            "name": "FoundationListboxElement",
-            "package": "@microsoft/fast-foundation"
-          },
-          "vividComponent": {
-            "name": "listbox"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "Listbox",
-          "declaration": {
-            "name": "Listbox",
-            "module": "libs/components/src/lib/listbox/listbox.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/menu/definition.ts",
@@ -13583,6 +13446,29 @@
             {
               "kind": "field",
               "name": "proxy"
+            },
+            {
+              "kind": "field",
+              "name": "#radioSiblings",
+              "privacy": "private",
+              "type": {
+                "text": "_Radio[]"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "#validateValueMissingWithSiblings",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#syncSiblingsRequiredValidationStatus",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "validate"
             }
           ],
           "mixins": [
@@ -13727,6 +13613,45 @@
                 "name": "FormAssociatedRadio",
                 "module": "libs/components/src/lib/radio/radio.form-associated.ts"
               }
+            },
+            {
+              "kind": "field",
+              "name": "#radioSiblings",
+              "privacy": "private",
+              "type": {
+                "text": "_Radio[]"
+              },
+              "readonly": true,
+              "inheritedFrom": {
+                "name": "FormAssociatedRadio",
+                "module": "libs/components/src/lib/radio/radio.form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#validateValueMissingWithSiblings",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "FormAssociatedRadio",
+                "module": "libs/components/src/lib/radio/radio.form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "#syncSiblingsRequiredValidationStatus",
+              "privacy": "private",
+              "inheritedFrom": {
+                "name": "FormAssociatedRadio",
+                "module": "libs/components/src/lib/radio/radio.form-associated.ts"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "validate",
+              "inheritedFrom": {
+                "name": "FormAssociatedRadio",
+                "module": "libs/components/src/lib/radio/radio.form-associated.ts"
+              }
             }
           ],
           "events": [
@@ -13770,6 +13695,14 @@
               },
               "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
               "fieldName": "readOnly"
+            },
+            {
+              "name": "name",
+              "type": {
+                "text": "string"
+              },
+              "description": "The name of the radio. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname | name attribute for more info.",
+              "fieldName": "name"
             }
           ],
           "superclass": {
@@ -18374,6 +18307,11 @@
               "description": "The id of the active tab",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "#isLastTabSelectedAfterRemove",
+              "privacy": "private"
+            },
             {
               "kind": "field",
               "name": "activeindicator",
@@ -18505,18 +18443,13 @@
               "privacy": "private"
             },
             {
-              "kind": "method",
-              "name": "isHorizontal",
-              "privacy": "private",
-              "return": {
-                "type": {
-                  "text": "boolean"
-                }
-              }
+              "kind": "field",
+              "name": "#isHorizontal",
+              "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "handleTabKeyDown",
+              "name": "#handleTabKeyDown",
               "privacy": "private"
             },
             {
@@ -18562,7 +18495,7 @@
             },
             {
               "kind": "field",
-              "name": "moveToTabByIndex",
+              "name": "#moveToTabByIndex",
               "privacy": "private"
             },
             {
@@ -18623,6 +18556,16 @@
               "kind": "method",
               "name": "#updateScrollStatus"
             },
+            {
+              "kind": "field",
+              "name": "#shouldMoveIndicator",
+              "privacy": "private",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#patchIndicatorStyleTransition"
+            },
             {
               "kind": "field",
               "name": "#resizeObserver",
@@ -18663,13 +18606,25 @@
             },
             {
               "kind": "method",
-              "name": "handleActiveIndicatorPosition",
-              "privacy": "private"
+              "name": "#handleActiveIndicatorPosition",
+              "parameters": [
+                {
+                  "name": "animate",
+                  "default": "true"
+                }
+              ]
             },
             {
               "kind": "method",
-              "name": "animateActiveIndicator",
-              "privacy": "private"
+              "name": "#animateActiveIndicator",
+              "parameters": [
+                {
+                  "name": "animate",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
             }
           ],
           "events": [
@@ -19311,8 +19266,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           },
           "vividComponent": {
             "name": "text-anchor"
@@ -21382,8 +21337,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           },
           "vividComponent": {
             "public": true,
@@ -21596,8 +21551,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           },
           "vividComponent": {
             "public": true,
@@ -23596,8 +23551,8 @@
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
-            "package": "@microsoft/fast-foundation"
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
           }
         }
       ],

package/lib/divider/divider.d.ts

@@ -1,6 +1,6 @@
 import { Orientation } from '@microsoft/fast-web-utilities';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
-declare const DividerRole: {
+export declare const DividerRole: {
     readonly separator: "separator";
     readonly presentation: "presentation";
 };

package/lib/divider/divider.template.d.ts

@@ -1,2 +1,2 @@
-import type { Divider } from './divider';
+import { type Divider } from './divider';
 export declare const DividerTemplate: import("@microsoft/fast-element").ViewTemplate<Divider, any>;

package/lib/elevation/elevation.d.ts

@@ -2,4 +2,5 @@ import { VividElement } from '../../shared/foundation/vivid-element/vivid-elemen
 export declare class Elevation extends VividElement {
     dp?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
     noShadow?: boolean;
+    notRelative?: boolean;
 }

package/lib/radio/radio.form-associated.d.ts

@@ -6,6 +6,8 @@ interface _Radio extends CheckableFormAssociated {
 }
 declare const FormAssociatedRadio_base: typeof _Radio;
 export declare class FormAssociatedRadio extends FormAssociatedRadio_base {
+    #private;
     proxy: HTMLInputElement;
+    validate: (anchor?: HTMLElement) => void;
 }
 export {};

package/lib/tabs/tabs.d.ts

@@ -25,12 +25,9 @@ export declare class Tabs extends VividElement {
     private getTabPanelIds;
     private setComponent;
     private handleTabClick;
-    private isHorizontal;
-    private handleTabKeyDown;
     adjust(adjustment: number): void;
     private adjustForward;
     private adjustBackward;
-    private moveToTabByIndex;
     private focusTab;
     tablist?: HTMLElement;
     connotation?: TabsConnotation;
@@ -39,6 +36,4 @@ export declare class Tabs extends VividElement {
     tabsLayout?: 'align-start' | 'stretch';
     connectedCallback(): void;
     disconnectedCallback(): void;
-    private handleActiveIndicatorPosition;
-    private animateActiveIndicator;
 }

package/lib/text-anchor/text-anchor.d.ts

@@ -1,10 +1,10 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { Appearance, Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { Anchor } from '../../shared/foundation/anchor/anchor';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export type TextAnchorConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export type TextAnchorAppearance = Extract<Appearance, Appearance.Ghost | Appearance.GhostLight>;
-export declare class TextAnchor extends FoundationElement {
+export declare class TextAnchor extends VividElement {
     text?: string;
     connotation?: TextAnchorConnotation;
     appearance?: TextAnchorAppearance;

package/lib/tree-item/tree-item.d.ts

@@ -1,7 +1,7 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIcon } from '../../shared/patterns/affix';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare function isTreeItemElement(el: Element): el is HTMLElement;
-export declare class TreeItem extends FoundationElement {
+export declare class TreeItem extends VividElement {
     text?: string;
     expanded: boolean;
     expandedChanged(): void;

package/lib/tree-view/tree-view.d.ts

@@ -1,7 +1,7 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { TreeItem } from '../tree-item/tree-item.js';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 export declare function getDisplayedNodes(rootNode: HTMLElement, selector: string): HTMLElement[];
-export declare class TreeView extends FoundationElement {
+export declare class TreeView extends VividElement {
     renderCollapsedNodes: boolean;
     currentSelected: HTMLElement | TreeItem | null;
     slottedTreeItemsChanged(): void;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@vonage/vivid",
-	"version": "4.14.0",
+	"version": "4.14.2",
 	"type": "module",
 	"module": "./index.js",
 	"main": "./index.cjs",

package/shared/affix.cjs

@@ -2,7 +2,7 @@
 
 const definition = require('./definition27.cjs');
 const slotted = require('./slotted.cjs');
-const defineVividComponent = require('./defineVividComponent.cjs');
+const vividElement = require('./vivid-element.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -16,10 +16,10 @@ var __decorateClass = (decorators, target, key, kind) => {
 class AffixIcon {
 }
 __decorateClass([
-  defineVividComponent.attr
+  vividElement.attr
 ], AffixIcon.prototype, "icon");
 __decorateClass([
-  defineVividComponent.attr({ mode: "fromView" })
+  vividElement.attr({ mode: "fromView" })
 ], AffixIcon.prototype, "iconSlottedContent");
 class AffixIconWithTrailing extends AffixIcon {
   constructor() {
@@ -28,7 +28,7 @@ class AffixIconWithTrailing extends AffixIcon {
   }
 }
 __decorateClass([
-  defineVividComponent.attr({
+  vividElement.attr({
     mode: "boolean",
     attribute: "icon-trailing"
   })
@@ -45,7 +45,7 @@ const affixIconTemplateFactory = (context) => {
   const iconTag = context.tagFor(definition.Icon);
   return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden) => {
     if (!icon && !slottedState) {
-      return defineVividComponent.html`<slot
+      return vividElement.html`<slot
 				name="icon"
 				aria-hidden="${() => ariaHidden}"
 				${slotted.slotted("iconSlottedContent")}
@@ -54,10 +54,10 @@ const affixIconTemplateFactory = (context) => {
     if (!icon && slottedState) {
       return null;
     }
-    const iconTemplate = defineVividComponent.html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
-    return slottedState ? defineVividComponent.html`<span class="icon" aria-hidden="${() => ariaHidden}"
+    const iconTemplate = vividElement.html`<${iconTag} :name="${() => icon}"></${iconTag}>`;
+    return slottedState ? vividElement.html`<span class="icon" aria-hidden="${() => ariaHidden}"
 					>${iconTemplate}</span
-			  >` : defineVividComponent.html`<slot name="icon" aria-hidden="${() => ariaHidden}"
+			  >` : vividElement.html`<slot name="icon" aria-hidden="${() => ariaHidden}"
 					>${iconTemplate}</slot
 			  >`;
   };

package/shared/affix.js

@@ -1,6 +1,6 @@
 import { I as Icon } from './definition27.js';
 import { s as slotted } from './slotted.js';
-import { a as attr, h as html } from './defineVividComponent.js';
+import { a as attr, h as html } from './vivid-element.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -61,4 +61,4 @@ const affixIconTemplateFactory = (context) => {
   };
 };
 
-export { AffixIcon as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIconWithTrailing as b };
+export { AffixIconWithTrailing as A, IconWrapper as I, affixIconTemplateFactory as a, AffixIcon as b };