@vonage/vivid 4.8.0 → 4.10.0

package/custom-elements.json

@@ -2168,6 +2168,66 @@
               "name": ""
             }
           ],
+          "members": [
+            {
+              "kind": "method",
+              "name": "setItemSeparator",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "isLastNode",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "findChildWithHref",
+              "privacy": "private",
+              "return": {
+                "type": {
+                  "text": "HTMLElement | null"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "node",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                }
+              ],
+              "description": "Finds href on childnodes in the light DOM or shadow DOM.\nWe look in the shadow DOM because we insert an anchor when breadcrumb-item has an href."
+            },
+            {
+              "kind": "method",
+              "name": "setAriaCurrent",
+              "privacy": "private",
+              "parameters": [
+                {
+                  "name": "item",
+                  "type": {
+                    "text": "HTMLElement"
+                  }
+                },
+                {
+                  "name": "isLastNode",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ],
+              "description": "Sets ARIA Current for the current node\nIf child node with an anchor tag and with href is found then set aria-current to correct value for the child node,\notherwise apply aria-current to the host element, with an href"
+            }
+          ],
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
@@ -2243,7 +2303,7 @@
             }
           ],
           "superclass": {
-            "name": "FastBreadcrumbItem",
+            "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
           },
           "vividComponent": {
@@ -3715,6 +3775,38 @@
               },
               "description": "The connotation the checklist should have.",
               "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "ariaChecked",
+              "type": {
+                "text": "AriaCheckedStates | null"
+              },
+              "default": "null",
+              "description": "The current checkbox state",
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "indeterminateChanged",
+              "parameters": [
+                {
+                  "name": "_",
+                  "type": {
+                    "text": "boolean"
+                  }
+                },
+                {
+                  "name": "next",
+                  "type": {
+                    "text": "boolean"
+                  }
+                }
+              ]
+            },
+            {
+              "kind": "method",
+              "name": "ariaCheckedChanged"
             }
           ],
           "events": [
@@ -3757,6 +3849,15 @@
               },
               "description": "The connotation the checklist should have.",
               "fieldName": "connotation"
+            },
+            {
+              "name": "aria-checked",
+              "type": {
+                "text": "AriaCheckedStates | null"
+              },
+              "default": "null",
+              "description": "The current checkbox state",
+              "fieldName": "ariaChecked"
             }
           ],
           "superclass": {
@@ -6159,7 +6260,35 @@
               "type": {
                 "text": "boolean"
               },
-              "default": "false"
+              "default": "false",
+              "description": "Prevents the dialog from being dismissed when clicking outside it."
+            },
+            {
+              "kind": "field",
+              "name": "noDismissOnEsc",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents the dialog from being dismissed when the escape key is pressed."
+            },
+            {
+              "kind": "field",
+              "name": "noDismissButton",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the dismiss button."
+            },
+            {
+              "kind": "field",
+              "name": "nonDismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables all means of dismissal for the dialog."
             },
             {
               "kind": "field",
@@ -6191,6 +6320,23 @@
               "privacy": "private",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "_showDismissButton",
+              "readonly": true
+            },
+            {
+              "kind": "method",
+              "name": "#isDismissibleVia",
+              "parameters": [
+                {
+                  "name": "method",
+                  "type": {
+                    "text": "DismissMethod"
+                  }
+                }
+              ]
+            },
             {
               "kind": "field",
               "name": "#handleScrimClick",
@@ -6236,6 +6382,13 @@
               },
               "description": "The `close` event fires when the dialog closes (either via user interaction or via the API). It returns the return value inside the event's details property.",
               "name": "close"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "The `cancel` event fires when the user requests to close the dialog. You can prevent the dialog from closing by calling `.preventDefault()` on the event.",
+              "name": "cancel"
             }
           ],
           "attributes": [
@@ -6305,8 +6458,36 @@
                 "text": "boolean"
               },
               "default": "false",
+              "description": "Prevents the dialog from being dismissed when clicking outside it.",
               "fieldName": "noLightDismiss"
             },
+            {
+              "name": "no-dismiss-on-esc",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Prevents the dialog from being dismissed when the escape key is pressed.",
+              "fieldName": "noDismissOnEsc"
+            },
+            {
+              "name": "no-dismiss-button",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Hides the dismiss button.",
+              "fieldName": "noDismissButton"
+            },
+            {
+              "name": "non-dismissible",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Disables all means of dismissal for the dialog.",
+              "fieldName": "nonDismissible"
+            },
             {
               "type": {
                 "text": "boolean"
@@ -6389,8 +6570,46 @@
           "kind": "class",
           "description": "",
           "name": "Divider",
+          "members": [
+            {
+              "kind": "field",
+              "name": "role",
+              "type": {
+                "text": "DividerRole"
+              },
+              "description": "The role of the element.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "orientation",
+              "type": {
+                "text": "Orientation"
+              },
+              "description": "The orientation of the divider.",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "role",
+              "type": {
+                "text": "DividerRole"
+              },
+              "description": "The role of the element.",
+              "fieldName": "role"
+            },
+            {
+              "name": "orientation",
+              "type": {
+                "text": "Orientation"
+              },
+              "description": "The orientation of the divider.",
+              "fieldName": "orientation"
+            }
+          ],
           "superclass": {
-            "name": "FoundationDivider",
+            "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
           },
           "vividComponent": {
@@ -7666,6 +7885,15 @@
               "name": "iconUrl",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "#abortController",
+              "privacy": "private",
+              "type": {
+                "text": "AbortController | null"
+              },
+              "default": "null"
+            },
             {
               "kind": "method",
               "name": "nameChanged",
@@ -13338,6 +13566,13 @@
               },
               "description": "Fired when the side drawer is opened.",
               "name": "open"
+            },
+            {
+              "type": {
+                "text": "CustomEvent<undefined>"
+              },
+              "description": "Fired when the user requests to close the side-drawer. You can prevent the side drawer from closing by calling `.preventDefault()` on the event.",
+              "name": "cancel"
             }
           ],
           "attributes": [
@@ -16004,6 +16239,15 @@
               "description": "The size the text-field should have.",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "inputMode",
+              "type": {
+                "text": "string"
+              },
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "leadingActionItemsSlottedContent",
@@ -16098,6 +16342,14 @@
               },
               "description": "The size the text-field should have.",
               "fieldName": "scale"
+            },
+            {
+              "name": "inputmode",
+              "type": {
+                "text": "string"
+              },
+              "description": "Hints at the type of data that might be entered by the user while editing the element or its contents.\nThis allows a browser to display an appropriate virtual keyboard.",
+              "fieldName": "inputMode"
             }
           ],
           "superclass": {

package/lib/breadcrumb/breadcrumb.d.ts

@@ -1,3 +1,6 @@
-import { Breadcrumb as FoundationElement } from '@microsoft/fast-foundation';
+import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class Breadcrumb extends FoundationElement {
+    private setItemSeparator;
+    private findChildWithHref;
+    private setAriaCurrent;
 }

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

@@ -1,5 +1,7 @@
-import { BreadcrumbItem as FastBreadcrumbItem } from '@microsoft/fast-foundation';
-export declare class BreadcrumbItem extends FastBreadcrumbItem {
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { Anchor } from '../../shared/patterns/anchor';
+export declare class BreadcrumbItem extends FoundationElement {
     text?: string;
-    constructor();
+}
+export interface BreadcrumbItem extends Anchor {
 }

package/lib/checkbox/checkbox.d.ts

@@ -3,10 +3,14 @@ import type { Connotation } from '../enums.js';
 import { type ErrorText, type FormElement, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
 export declare const keySpace: ' ';
 export type CheckboxConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
+export type AriaCheckedStates = 'false' | 'true' | 'mixed' | 'undefined';
 export declare class Checkbox extends FoundationCheckbox {
     ariaLabel: string | null;
     tabindex: string | null;
     connotation?: CheckboxConnotation;
+    ariaChecked: AriaCheckedStates | null;
+    indeterminateChanged(_: boolean, next: boolean): void;
+    ariaCheckedChanged(): void;
 }
 export interface Checkbox extends FormElement, FormElementHelperText, ErrorText, FormElementSuccessText {
 }

package/lib/dialog/dialog.d.ts

@@ -12,9 +12,13 @@ export declare class Dialog extends FoundationElement {
     ariaLabel: string | null;
     dismissButtonAriaLabel: string | null;
     noLightDismiss: boolean;
+    noDismissOnEsc: boolean;
+    noDismissButton: boolean;
+    nonDismissible: boolean;
     modal: boolean;
     set returnValue(value: string);
     get returnValue(): string;
+    get _showDismissButton(): boolean;
     close(): void;
     show(): void;
     showModal(): void;

package/lib/divider/divider.d.ts

@@ -1,3 +1,12 @@
-import { Divider as FoundationDivider } from '@microsoft/fast-foundation';
-export declare class Divider extends FoundationDivider {
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { Orientation } from '@microsoft/fast-web-utilities';
+declare const DividerRole: {
+    readonly separator: "separator";
+    readonly presentation: "presentation";
+};
+type DividerRole = typeof DividerRole[keyof typeof DividerRole];
+export declare class Divider extends FoundationElement {
+    role: DividerRole;
+    orientation: Orientation;
 }
+export {};

package/lib/icon/icon.d.ts

@@ -1,7 +1,8 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums';
-export type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information>;
+export type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information | Connotation.Announcement>;
 export declare class Icon extends FoundationElement {
+    #private;
     connotation?: IconConnotation;
     size?: -6 | -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3 | 4 | 5;
     iconLoaded: boolean;

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

@@ -10,6 +10,7 @@ export declare class TextField extends FoundationTextfield {
     shape?: TextFieldShape;
     autoComplete?: string;
     scale?: TextFieldSize;
+    inputMode: string;
     leadingActionItemsSlottedContent?: HTMLElement[];
     connectedCallback(): void;
     disconnectedCallback(): void;

package/package.json

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

package/shared/breadcrumb-item.cjs

@@ -1,27 +1,169 @@
 'use strict';
 
 const index = require('./index.cjs');
-const anchor = require('./anchor.cjs');
 const applyMixins = require('./apply-mixins.cjs');
-const startEnd = require('./start-end.cjs');
 
-/**
- * A Breadcrumb Item Custom HTML Element.
- *
- * @public
- */
-let BreadcrumbItem$1 = class BreadcrumbItem extends anchor.Anchor {
-    constructor() {
-        super(...arguments);
-        /**
-         * @internal
-         */
-        this.separator = true;
-    }
+var __defProp$2 = Object.defineProperty;
+var __decorateClass$2 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$2(target, key, result);
+  return result;
 };
-index.__decorate([
-    index.observable
-], BreadcrumbItem$1.prototype, "separator", void 0);
-applyMixins.applyMixins(BreadcrumbItem$1, startEnd.StartEnd, anchor.DelegatesARIALink);
+class ARIAGlobalStatesAndProperties {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-atomic" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-busy" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-controls" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-current" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-describedby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-details" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-disabled" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-errormessage" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-flowto" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-haspopup" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-hidden" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-invalid" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-keyshortcuts" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-label" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-labelledby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-live" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-owns" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-relevant" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$2([
+  index.attr({ attribute: "aria-roledescription" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription");
 
-exports.BreadcrumbItem = BreadcrumbItem$1;
+var __defProp$1 = Object.defineProperty;
+var __decorateClass$1 = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp$1(target, key, result);
+  return result;
+};
+class Anchor {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr
+], Anchor.prototype, "download");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr
+], Anchor.prototype, "href");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr
+], Anchor.prototype, "hreflang");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr
+], Anchor.prototype, "ping");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr
+], Anchor.prototype, "referrerpolicy");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr
+], Anchor.prototype, "rel");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr
+], Anchor.prototype, "target");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr
+], Anchor.prototype, "type");
+class DelegatesARIALink {
+}
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass$1([
+  index.attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded");
+applyMixins.applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+applyMixins.applyMixins(Anchor, DelegatesARIALink);
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class BreadcrumbItem extends index.FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.separator = true;
+  }
+}
+__decorateClass([
+  index.attr
+], BreadcrumbItem.prototype, "text");
+__decorateClass([
+  index.observable
+], BreadcrumbItem.prototype, "separator");
+applyMixins.applyMixins(BreadcrumbItem, Anchor);
+
+exports.BreadcrumbItem = BreadcrumbItem;