@vonage/vivid 4.21.1 → 4.22.0

package/custom-elements.json

@@ -1309,7 +1309,7 @@
               "kind": "field",
               "name": "skipBy",
               "type": {
-                "text": "MediaSkipBy | undefined"
+                "text": "AudioPlayerMediaSkipBy | undefined"
               },
               "description": "Allows the audio to skip back or forward",
               "privacy": "public"
@@ -1504,7 +1504,7 @@
             {
               "name": "skip-by",
               "type": {
-                "text": "MediaSkipBy | undefined"
+                "text": "AudioPlayerMediaSkipBy | undefined"
               },
               "description": "Allows the audio to skip back or forward",
               "fieldName": "skipBy"
@@ -4047,7 +4047,7 @@
               "kind": "field",
               "name": "stickyMode",
               "type": {
-                "text": "Sticky"
+                "text": "CalendarSticky"
               },
               "description": "Sticky header and sticky column options",
               "privacy": "public"
@@ -4180,7 +4180,7 @@
             {
               "name": "sticky-mode",
               "type": {
-                "text": "Sticky"
+                "text": "CalendarSticky"
               },
               "description": "Sticky header and sticky column options",
               "fieldName": "stickyMode"
@@ -10589,6 +10589,16 @@
               "privacy": "public",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "rejectedFiles",
+              "type": {
+                "text": "File[]"
+              },
+              "description": "Files that have been rejected by the file picker for failing validation.",
+              "privacy": "public",
+              "readonly": true
+            },
             {
               "kind": "method",
               "name": "#syncSingleFileState"
@@ -12338,6 +12348,7 @@
               "type": {
                 "text": "boolean"
               },
+              "default": "false",
               "description": "The checked value of the element.",
               "privacy": "public"
             },
@@ -12510,6 +12521,7 @@
               "type": {
                 "text": "boolean"
               },
+              "default": "false",
               "description": "The checked value of the element.",
               "fieldName": "checked"
             },
@@ -14402,6 +14414,15 @@
               "name": "_hasMatchedText",
               "readonly": true
             },
+            {
+              "kind": "field",
+              "name": "tagConnotation",
+              "type": {
+                "text": "OptionTagConnotation | undefined"
+              },
+              "description": "When displayed as a tag, the connotation of the tag.",
+              "privacy": "public"
+            },
             {
               "kind": "field",
               "name": "proxy",
@@ -14496,6 +14517,14 @@
               "description": "Text to highlighted as matching a search query.",
               "fieldName": "matchedText"
             },
+            {
+              "name": "tag-connotation",
+              "type": {
+                "text": "OptionTagConnotation | undefined"
+              },
+              "description": "When displayed as a tag, the connotation of the tag.",
+              "fieldName": "tagConnotation"
+            },
             {
               "name": "icon-trailing",
               "type": {
@@ -17118,7 +17147,7 @@
       "declarations": [
         {
           "kind": "variable",
-          "name": "RichTextEditorTextSizes",
+          "name": "RichTextEditorTextBlocks",
           "type": {
             "text": "{\n\ttitle: 'h2',\n\tsubtitle: 'h3',\n\tbody: 'p',\n}"
           },
@@ -17184,15 +17213,6 @@
               "kind": "method",
               "name": "selectionEndChanged"
             },
-            {
-              "kind": "field",
-              "name": "#selectionChangedByUser",
-              "privacy": "private",
-              "type": {
-                "text": "boolean"
-              },
-              "default": "false"
-            },
             {
               "kind": "field",
               "name": "#handleSelectionChange",
@@ -17210,10 +17230,10 @@
             },
             {
               "kind": "method",
-              "name": "setTextSize",
+              "name": "setTextBlock",
               "parameters": [
                 {
-                  "name": "size",
+                  "name": "blockType",
                   "type": {
                     "text": "'title' | 'subtitle' | 'body'"
                   }
@@ -17232,6 +17252,10 @@
                 }
               ]
             },
+            {
+              "kind": "method",
+              "name": "focus"
+            },
             {
               "kind": "field",
               "name": "VIVID_VERSION",
@@ -17278,9 +17302,9 @@
       "exports": [
         {
           "kind": "js",
-          "name": "RichTextEditorTextSizes",
+          "name": "RichTextEditorTextBlocks",
           "declaration": {
-            "name": "RichTextEditorTextSizes",
+            "name": "RichTextEditorTextBlocks",
             "module": "libs/components/src/lib/rich-text-editor/rich-text-editor.ts"
           }
         },
@@ -17344,6 +17368,10 @@
           "description": "",
           "name": "OptionTag",
           "cssProperties": [
+            {
+              "name": "--vvd-option-tag-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
+            },
             {
               "name": "--vvd-option-tag-accent-contrast",
               "default": "var(--vvd-color-neutral-800)"
@@ -17357,6 +17385,13 @@
                 "text": "OptionTagShape | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "OptionTagConnotation | undefined"
+              }
+            },
             {
               "kind": "field",
               "name": "label",
@@ -21252,6 +21287,14 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "TabsGutters",
+          "declaration": {
+            "name": "TabsGutters",
+            "module": "./tabs"
+          }
+        },
         {
           "kind": "js",
           "name": "registerTabs",
@@ -21290,6 +21333,14 @@
           },
           "default": "'--_tabs-tablist-column'"
         },
+        {
+          "kind": "variable",
+          "name": "TabsGutters",
+          "type": {
+            "text": "{\n\tNone: 'none',\n\tSmall: 'small',\n}"
+          },
+          "default": "{\n\tNone: 'none',\n\tSmall: 'small',\n}"
+        },
         {
           "kind": "variable",
           "name": "TabsOrientation",
@@ -21766,6 +21817,14 @@
             "module": "libs/components/src/lib/tabs/tabs.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "TabsGutters",
+          "declaration": {
+            "name": "TabsGutters",
+            "module": "libs/components/src/lib/tabs/tabs.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "TabsOrientation",
@@ -25295,7 +25354,7 @@
               "kind": "field",
               "name": "skipBy",
               "type": {
-                "text": "MediaSkipBy"
+                "text": "VideoPlayerMediaSkipBy"
               },
               "description": "Allows the video to loop back to the beginning when finished",
               "privacy": "public"
@@ -25432,7 +25491,7 @@
             {
               "name": "skip-by",
               "type": {
-                "text": "MediaSkipBy"
+                "text": "VideoPlayerMediaSkipBy"
               },
               "description": "Allows the video to loop back to the beginning when finished",
               "fieldName": "skipBy"
@@ -25618,6 +25677,102 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/rich-text-editor/menubar/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "menuBarDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerMenuBar",
+          "description": "Registers the menubar element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "menuBarDefinition",
+          "declaration": {
+            "name": "menuBarDefinition",
+            "module": "libs/components/src/lib/rich-text-editor/menubar/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerMenuBar",
+          "declaration": {
+            "name": "registerMenuBar",
+            "module": "libs/components/src/lib/rich-text-editor/menubar/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/rich-text-editor/menubar/menubar.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "",
+          "name": "MenuBar",
+          "members": [
+            {
+              "kind": "field",
+              "name": "menuItems",
+              "type": {
+                "text": "string | undefined"
+              }
+            },
+            {
+              "kind": "field",
+              "name": "VIVID_VERSION",
+              "static": true,
+              "default": "__PACKAGE_VERSION__",
+              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
+              "type": {
+                "text": "string"
+              },
+              "inheritedFrom": {
+                "name": "VividElement",
+                "module": "libs/components/src/shared/foundation/vivid-element/vivid-element.ts"
+              }
+            }
+          ],
+          "attributes": [
+            {
+              "name": "menu-items",
+              "type": {
+                "text": "string | undefined"
+              },
+              "fieldName": "menuItems"
+            }
+          ],
+          "superclass": {
+            "name": "VividElement",
+            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "MenuBar",
+          "declaration": {
+            "name": "MenuBar",
+            "module": "libs/components/src/lib/rich-text-editor/menubar/menubar.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/rich-text-editor/facades/prose-mirror-vivid.schema.ts",
@@ -25792,102 +25947,6 @@
         }
       ]
     },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/rich-text-editor/menubar/definition.ts",
-      "declarations": [
-        {
-          "kind": "variable",
-          "name": "menuBarDefinition"
-        },
-        {
-          "kind": "variable",
-          "name": "registerMenuBar",
-          "description": "Registers the menubar element with the design system.",
-          "parameters": [
-            {
-              "description": "the prefix to use for the component name",
-              "name": "prefix"
-            }
-          ]
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "menuBarDefinition",
-          "declaration": {
-            "name": "menuBarDefinition",
-            "module": "libs/components/src/lib/rich-text-editor/menubar/definition.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerMenuBar",
-          "declaration": {
-            "name": "registerMenuBar",
-            "module": "libs/components/src/lib/rich-text-editor/menubar/definition.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "libs/components/src/lib/rich-text-editor/menubar/menubar.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "",
-          "name": "MenuBar",
-          "members": [
-            {
-              "kind": "field",
-              "name": "menuItems",
-              "type": {
-                "text": "string | undefined"
-              }
-            },
-            {
-              "kind": "field",
-              "name": "VIVID_VERSION",
-              "static": true,
-              "default": "__PACKAGE_VERSION__",
-              "description": "The current version of the Vivid library, which is useful for debugging.\nIt can be accessed from any Vivid element via `<el>.constructor.VIVID_VERSION`.",
-              "type": {
-                "text": "string"
-              },
-              "inheritedFrom": {
-                "name": "VividElement",
-                "module": "libs/components/src/shared/foundation/vivid-element/vivid-element.ts"
-              }
-            }
-          ],
-          "attributes": [
-            {
-              "name": "menu-items",
-              "type": {
-                "text": "string | undefined"
-              },
-              "fieldName": "menuItems"
-            }
-          ],
-          "superclass": {
-            "name": "VividElement",
-            "module": "/libs/components/src/shared/foundation/vivid-element/vivid-element"
-          }
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "MenuBar",
-          "declaration": {
-            "name": "MenuBar",
-            "module": "libs/components/src/lib/rich-text-editor/menubar/menubar.ts"
-          }
-        }
-      ]
-    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/shared/foundation/anchor/anchor.ts",

package/index.cjs

@@ -86,7 +86,6 @@ exports.Role = enums.Role;
 exports.Shape = enums.Shape;
 exports.Size = enums.Size;
 exports.Sticky = enums.Sticky;
-exports.TabsGutters = enums.TabsGutters;
 exports.setLocale = localized.setLocale;
 exports.VwcAccordionItemElement = definition.AccordionItem;
 exports.accordionItemDefinition = definition.accordionItemDefinition;
@@ -283,6 +282,7 @@ exports.tabPanelDefinition = definition$O.tabPanelDefinition;
 exports.VwcTabElement = definition$P.Tab;
 exports.registerTab = definition$P.registerTab;
 exports.tabDefinition = definition$P.tabDefinition;
+exports.TabsGutters = definition$Q.TabsGutters;
 exports.VwcTabsElement = definition$Q.Tabs;
 exports.registerTabs = definition$Q.registerTabs;
 exports.tabsDefinition = definition$Q.tabsDefinition;

package/index.js

@@ -1,4 +1,4 @@
-export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, I as IconDecoration, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, d as Sticky, T as TabsGutters } from './shared/enums.js';
+export { A as Appearance, c as AriaLive, C as Connotation, a as ConnotationDecorative, I as IconDecoration, L as LayoutSize, M as MediaSkipBy, P as Position, R as Role, S as Shape, b as Size, d as Sticky } from './shared/enums.js';
 export { s as setLocale } from './shared/localized.js';
 export { A as VwcAccordionItemElement, a as accordionItemDefinition, r as registerAccordionItem } from './shared/definition.js';
 export { A as AccordionExpandMode, b as VwcAccordionElement, a as accordionDefinition, r as registerAccordion } from './shared/definition2.js';
@@ -55,7 +55,7 @@ export { S as VwcSplitButtonElement, r as registerSplitButton, s as splitButtonD
 export { S as VwcSwitchElement, r as registerSwitch, s as switchDefinition } from './shared/definition50.js';
 export { T as VwcTabPanelElement, r as registerTabPanel, t as tabPanelDefinition } from './shared/definition51.js';
 export { T as VwcTabElement, r as registerTab, t as tabDefinition } from './shared/definition52.js';
-export { T as VwcTabsElement, r as registerTabs, t as tabsDefinition } from './shared/definition53.js';
+export { a as TabsGutters, T as VwcTabsElement, r as registerTabs, t as tabsDefinition } from './shared/definition53.js';
 export { T as VwcTagGroupElement, r as registerTagGroup, t as tagGroupDefinition } from './shared/definition54.js';
 export { T as VwcTagElement, r as registerTag, t as tagDefinition } from './shared/definition55.js';
 export { T as VwcTextAreaElement, r as registerTextArea, t as textAreaDefinition } from './shared/definition56.js';

package/lib/audio-player/audio-player.d.ts

@@ -3,6 +3,7 @@ import { MediaSkipBy } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
 export type AudioPlayerConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA>;
+export type AudioPlayerMediaSkipBy = ExtractFromEnum<MediaSkipBy, MediaSkipBy.Zero | MediaSkipBy.Five | MediaSkipBy.Ten | MediaSkipBy.Thirty>;
 export declare const SKIP_DIRECTIONS: {
     FORWARD: number;
     BACKWARD: number;
@@ -349,7 +350,7 @@ export declare class AudioPlayer extends AudioPlayer_base {
     srcChanged(): void;
     disabled: boolean;
     notime: boolean;
-    skipBy?: MediaSkipBy;
+    skipBy?: AudioPlayerMediaSkipBy;
     playbackRates: string | null;
     get paused(): boolean;
     set paused(_: boolean);

package/lib/calendar/calendar.d.ts

@@ -1,12 +1,14 @@
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import { Sticky } from '../enums';
+import type { ExtractFromEnum } from '../../shared/utils/enums';
+export type CalendarSticky = ExtractFromEnum<Sticky, Sticky.None | Sticky.Header | Sticky.Column | Sticky.All>;
 export declare class Calendar extends VividElement {
     #private;
     datetime?: Date | string;
     startDay?: 'sunday' | 'monday';
     locales?: string | string[] | undefined;
     hour12: boolean;
-    stickyMode: Sticky;
+    stickyMode: CalendarSticky;
     getEventContext: (this: Calendar, e: KeyboardEvent | MouseEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
     private getCalendarEventContainingCell;
     private arrowKeysInteractions;

package/lib/enums.d.ts

@@ -51,10 +51,6 @@ export declare enum LayoutSize {
     Medium = "medium",
     Large = "large"
 }
-export declare enum TabsGutters {
-    None = "none",
-    Small = "small"
-}
 export declare enum Position {
     Top = "TOP",
     Bottom = "BOTTOM",

package/lib/file-picker/file-picker.d.ts

@@ -1,8 +1,8 @@
 import Dropzone from 'dropzone';
-import type { Size } from '../enums';
-import { type ErrorText, type FormElement, FormElementHelperText } from '../../shared/patterns';
 import type { Locale } from '../../shared/localization/Locale';
+import { type ErrorText, type FormElement, FormElementHelperText } from '../../shared/patterns';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
+import type { Size } from '../enums';
 import { FormAssociatedFilePicker } from './file-picker.form-associated';
 export type FilePickerSize = ExtractFromEnum<Size, Size.Normal | Size.Expanded>;
 declare const FilePicker_base: {
@@ -334,6 +334,7 @@ declare const FilePicker_base: {
 export declare class FilePicker extends FilePicker_base {
     #private;
     get files(): File[];
+    get rejectedFiles(): File[];
     singleFile: boolean;
     singleFileChanged(): void;
     maxFiles?: number;

package/lib/option/option.d.ts

@@ -1,4 +1,5 @@
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+import type { OptionTagConnotation } from '../searchable-select/option-tag';
 export declare function isListboxOption(el: Element): el is ListboxOption;
 declare const ListboxOption_base: {
     new (...args: any[]): {
@@ -352,6 +353,7 @@ export declare class ListboxOption extends ListboxOption_base {
     get form(): HTMLFormElement | null;
     matchedText?: string;
     get _hasMatchedText(): boolean;
+    tagConnotation?: OptionTagConnotation;
     constructor(text?: string, value?: string, defaultSelected?: boolean, selected?: boolean);
 }
 export {};

package/lib/rich-text-editor/rich-text-editor.d.ts

@@ -3,12 +3,12 @@ export interface RichTextEditorSelection {
     start: number;
     end?: number;
 }
-export declare const RichTextEditorTextSizes: {
+export declare const RichTextEditorTextBlocks: {
     readonly title: "h2";
     readonly subtitle: "h3";
     readonly body: "p";
 };
-export type RichTextEditorTextSizes = keyof typeof RichTextEditorTextSizes;
+export type RichTextEditorTextBlocks = keyof typeof RichTextEditorTextBlocks;
 export declare class RichTextEditor extends VividElement {
     #private;
     get value(): string;
@@ -19,6 +19,7 @@ export declare class RichTextEditor extends VividElement {
     selectionEndChanged(): void;
     constructor();
     connectedCallback(): void;
-    setTextSize(size: 'title' | 'subtitle' | 'body'): void;
+    setTextBlock(blockType: 'title' | 'subtitle' | 'body'): void;
     setSelectionDecoration(decoration: string): void;
+    focus(): void;
 }

package/lib/searchable-select/option-tag.d.ts

@@ -1,7 +1,8 @@
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
-import { Shape } from '../enums';
+import { Connotation, Shape } from '../enums';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
 export type OptionTagShape = ExtractFromEnum<Shape, Shape.Rounded | Shape.Pill>;
+export type OptionTagConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA>;
 declare const OptionTag_base: {
     new (...args: any[]): {
         readonly locale: import("../shared/localization/Locale").Locale;
@@ -330,6 +331,7 @@ declare const OptionTag_base: {
 } & typeof VividElement;
 export declare class OptionTag extends OptionTag_base {
     shape?: OptionTagShape;
+    connotation?: OptionTagConnotation;
     label?: string;
     removable: boolean;
     disabled: boolean;

package/lib/tabs/definition.d.ts

@@ -1,3 +1,4 @@
 import { Tabs } from './tabs';
+export { TabsGutters } from './tabs';
 export declare const registerTabs: (prefix?: string) => void;
 export { Tabs as VwcTabsElement };

package/lib/tabs/tabs.d.ts

@@ -1,9 +1,14 @@
-import type { Connotation, TabsGutters } from '../enums.js';
+import type { Connotation } from '../enums.js';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 import type { ExtractFromEnum } from '../../shared/utils/enums';
 export declare const ACTIVE_TAB_WIDTH = "--_tabs-active-tab-inline-size";
 export declare const TABLIST_COLUMN = "--_tabs-tablist-column";
 export type TabsConnotation = ExtractFromEnum<Connotation, Connotation.Accent | Connotation.CTA>;
+export declare const TabsGutters: {
+    readonly None: "none";
+    readonly Small: "small";
+};
+export type TabsGutters = typeof TabsGutters[keyof typeof TabsGutters];
 export declare const TabsOrientation: {
     readonly vertical: "vertical";
     readonly horizontal: "horizontal";

package/lib/video-player/video-player.d.ts

@@ -1,5 +1,7 @@
 import { MediaSkipBy } from '../enums';
 import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
+import type { ExtractFromEnum } from '../../shared/utils/enums';
+export type VideoPlayerMediaSkipBy = ExtractFromEnum<MediaSkipBy, MediaSkipBy.Zero | MediaSkipBy.Five | MediaSkipBy.Ten | MediaSkipBy.Thirty>;
 export declare const DEFAULT_PLAYBACK_RATES = "0.5, 1, 1.5, 2";
 declare const VideoPlayer_base: {
     new (...args: any[]): {
@@ -334,7 +336,7 @@ export declare class VideoPlayer extends VideoPlayer_base {
     autoplay: boolean;
     loop: boolean;
     playbackRates: string;
-    skipBy: MediaSkipBy;
+    skipBy: VideoPlayerMediaSkipBy;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

package/package.json

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