@vonage/vivid 3.14.0 → 3.15.0

package/checkbox/index.js

@@ -10,8 +10,11 @@ import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
+import '../shared/affix.js';
+import '../shared/form-elements.js';
 import '../shared/form-associated.js';
 import '../shared/key-codes.js';
+import '../shared/apply-mixins.js';
 import '../shared/focus2.js';
 
 registerCheckbox();

package/custom-elements.json

@@ -2749,29 +2749,8 @@
               "default": "var(--vvd-color-canvas-text)"
             }
           ],
-          "members": [
-            {
-              "kind": "field",
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Indicates the checkbox's label.",
-              "privacy": "public"
-            }
-          ],
-          "attributes": [
-            {
-              "name": "label",
-              "type": {
-                "text": "string | undefined"
-              },
-              "description": "Indicates the checkbox's label.",
-              "fieldName": "label"
-            }
-          ],
           "superclass": {
-            "name": "FastCheckbox",
+            "name": "FoundationCheckbox",
             "package": "@microsoft/fast-foundation"
           }
         }
@@ -3101,6 +3080,76 @@
           "kind": "class",
           "description": "Base class for data-grid",
           "name": "DataGridRow",
+          "cssProperties": [
+            {
+              "name": "--vvd-data-grid-row-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-data-grid-row-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-data-grid-row-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-data-grid-row-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-data-grid-row-cta-pale",
+              "default": "var(--vvd-color-cta-300)"
+            },
+            {
+              "name": "--vvd-data-grid-row-cta-dim",
+              "default": "var(--vvd-color-cta-200)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-pale",
+              "default": "var(--vvd-color-neutral-300)"
+            },
+            {
+              "name": "--vvd-data-grid-row-accent-dim",
+              "default": "var(--vvd-color-neutral-200)"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "ariaSelected",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "aria-selected",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaSelected"
+            }
+          ],
           "superclass": {
             "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
@@ -3246,6 +3295,15 @@
                 "text": "DataGridSelectionMode | undefined"
               }
             },
+            {
+              "kind": "field",
+              "name": "#selectedRows",
+              "privacy": "private",
+              "type": {
+                "text": "DataGridRow[]"
+              },
+              "readonly": true
+            },
             {
               "kind": "field",
               "name": "#selectedCells",
@@ -3271,12 +3329,17 @@
             },
             {
               "kind": "field",
-              "name": "#handleSelection",
+              "name": "#handleCellSelection",
               "privacy": "private"
             },
             {
               "kind": "field",
-              "name": "#setCellSelectedState",
+              "name": "#handleRowSelection",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#setSelectedState",
               "privacy": "private"
             },
             {
@@ -3859,6 +3922,122 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/empty-state/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "emptyStateDefinition"
+        },
+        {
+          "kind": "variable",
+          "name": "registerEmptyState",
+          "description": "Registers the empty-state element with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "emptyStateDefinition",
+          "declaration": {
+            "name": "emptyStateDefinition",
+            "module": "libs/components/src/lib/empty-state/definition.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerEmptyState",
+          "declaration": {
+            "name": "registerEmptyState",
+            "module": "libs/components/src/lib/empty-state/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/empty-state/empty-state.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An empty state element. Used when there is no data to display to the user.",
+          "name": "EmptyState",
+          "slots": [
+            {
+              "description": "The default slot controls the body text of the empty state",
+              "name": ""
+            },
+            {
+              "description": "The graphic slot allows overriding the icon with a custom illustration",
+              "name": "graphic"
+            },
+            {
+              "description": "Slot to add action items to the empty state",
+              "name": "action-items"
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An optional headline for the empty state.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icon for the empty state.",
+              "privacy": "public"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "headline",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "An optional headline for the empty state.",
+              "fieldName": "headline"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Icon for the empty state.",
+              "fieldName": "icon"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "EmptyState",
+          "declaration": {
+            "name": "EmptyState",
+            "module": "libs/components/src/lib/empty-state/empty-state.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/fab/definition.ts",

package/empty-state/index.js

@@ -0,0 +1,14 @@
+import { r as registerEmptyState } from '../shared/definition25.js';
+import '../shared/index.js';
+import '../shared/definition3.js';
+import '../shared/icon.js';
+import '../shared/engine-is-node.js';
+import '../shared/to-string.js';
+import '../shared/string-trim.js';
+import '../shared/_has.js';
+import '../shared/class-names.js';
+import '../shared/when.js';
+import '../shared/slotted.js';
+import '../shared/node-observation.js';
+
+registerEmptyState();

package/fab/index.js

@@ -1,4 +1,4 @@
-import { r as registerFab } from '../shared/definition25.js';
+import { r as registerFab } from '../shared/definition26.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/header/index.js

@@ -1,4 +1,4 @@
-import { r as registerHeader } from '../shared/definition26.js';
+import { r as registerHeader } from '../shared/definition27.js';
 import '../shared/index.js';
 import '../shared/definition8.js';
 import '../shared/class-names.js';

package/index.js

@@ -14,42 +14,44 @@ export { c as cardDefinition, a as cardRegistries, r as registerCard } from './s
 export { c as checkboxDefinition, a as checkboxRegistries, r as registerCheckbox } from './shared/definition18.js';
 export { c as combobox, a as comboboxRegistries, r as registerCombobox } from './shared/definition19.js';
 export { a as elevationDefinition, e as elevationRegistries, r as registerElevation } from './shared/definition8.js';
+export { e as emptyStateDefinition, a as emptyStateRegistries, r as registerEmptyState } from './shared/definition25.js';
 export { d as dialogDefinition, a as dialogRegistries, r as registerDialog } from './shared/definition23.js';
 export { a as dividerDefinition, d as dividerRegistries, r as registerDivider } from './shared/definition24.js';
 export { d as dataGrid, b as dataGridCell, c as dataGridElements, a as dataGridRow, r as registerDataGrid } from './shared/definition22.js';
-export { f as fabDefinition, a as fabRegistries, r as registerFab } from './shared/definition25.js';
-export { h as headerDefinition, a as headerRegistries, r as registerHeader } from './shared/definition26.js';
+export { f as fabDefinition, a as fabRegistries, r as registerFab } from './shared/definition26.js';
+export { h as headerDefinition, a as headerRegistries, r as registerHeader } from './shared/definition27.js';
 export { a as iconDefinition, i as iconRegistries, r as registerIcon } from './shared/definition3.js';
-export { l as layoutDefinition, a as layoutRegistries, r as registerLayout } from './shared/definition27.js';
-export { l as listboxDefinition, a as listboxRegistries, r as registerListbox } from './shared/definition28.js';
+export { l as layoutDefinition, a as layoutRegistries, r as registerLayout } from './shared/definition28.js';
+export { l as listboxDefinition, a as listboxRegistries, r as registerListbox } from './shared/definition29.js';
 export { a as listboxOptionDefinition, l as listboxOptionRegistries, r as registerOption } from './shared/definition21.js';
-export { m as menuDefinition, a as menuRegistries, r as registerMenu } from './shared/definition29.js';
-export { c as menuItemDefinition, m as menuItemRegistries, b as registerMenuItem } from './shared/definition30.js';
-export { n as navDefinition, a as navRegistries, r as registerNav } from './shared/definition31.js';
-export { n as navDisclosureDefinition, a as navDisclosureRegistries, r as registerNavDisclosure } from './shared/definition32.js';
-export { n as navItemDefinition, a as navItemRegistries, r as registerNavItem } from './shared/definition33.js';
-export { n as noteDefinition, a as noteRegistries, r as registerNote } from './shared/definition34.js';
-export { n as numberFieldDefinition, a as numberFieldRegistries, r as registerNumberField } from './shared/definition35.js';
+export { m as menuDefinition, a as menuRegistries, r as registerMenu } from './shared/definition30.js';
+export { c as menuItemDefinition, m as menuItemRegistries, b as registerMenuItem } from './shared/definition31.js';
+export { n as navDefinition, a as navRegistries, r as registerNav } from './shared/definition32.js';
+export { n as navDisclosureDefinition, a as navDisclosureRegistries, r as registerNavDisclosure } from './shared/definition33.js';
+export { n as navItemDefinition, a as navItemRegistries, r as registerNavItem } from './shared/definition34.js';
+export { n as noteDefinition, a as noteRegistries, r as registerNote } from './shared/definition35.js';
+export { n as numberFieldDefinition, a as numberFieldRegistries, r as registerNumberField } from './shared/definition36.js';
+export { p as paginationDefinition, a as paginationRegistries, r as registerPagination } from './shared/definition37.js';
 export { a as popupDefinition, p as popupRegistries, r as registerPopup } from './shared/definition20.js';
-export { p as progressDefinition, a as progressRegistries, r as registerProgress } from './shared/definition36.js';
+export { p as progressDefinition, a as progressRegistries, r as registerProgress } from './shared/definition38.js';
 export { a as progressRingDefinition, p as progressRingRegistries, r as registerProgressRing } from './shared/definition9.js';
-export { a as radioDefinition, b as radioRegistries, r as registerRadio } from './shared/definition37.js';
-export { a as radioGroupDefinition, b as radioGroupRegistries, r as registerRadioGroup } from './shared/definition38.js';
-export { r as registerSelect, s as selectDefinition, a as selectRegistries } from './shared/definition39.js';
-export { r as registerSideDrawer, s as sideDrawerDefinition, a as sideDrawerRegistries } from './shared/definition40.js';
-export { r as registerSlider, s as sliderDefinition, a as sliderRegistries } from './shared/definition41.js';
-export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition42.js';
-export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition49.js';
-export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition48.js';
-export { r as registerToggletip, t as toggletipDefinition, a as toggletipRegistries } from './shared/definition50.js';
-export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition51.js';
-export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition45.js';
-export { r as registerTab, a as tabDefinition, t as tabRegistries } from './shared/definition43.js';
-export { r as registerTabPanel, a as tabPanelDefinition, t as tabPanelRegistries } from './shared/definition44.js';
-export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition53.js';
-export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition52.js';
-export { r as registerTag, t as tagDefinition } from './shared/definition46.js';
-export { r as registerTagGroup, t as tagGroupDefinition, a as tagGroupRegistries } from './shared/definition47.js';
+export { a as radioDefinition, b as radioRegistries, r as registerRadio } from './shared/definition39.js';
+export { a as radioGroupDefinition, b as radioGroupRegistries, r as registerRadioGroup } from './shared/definition40.js';
+export { r as registerSelect, s as selectDefinition, a as selectRegistries } from './shared/definition41.js';
+export { r as registerSideDrawer, s as sideDrawerDefinition, a as sideDrawerRegistries } from './shared/definition42.js';
+export { r as registerSlider, s as sliderDefinition, a as sliderRegistries } from './shared/definition43.js';
+export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition44.js';
+export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition51.js';
+export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition50.js';
+export { r as registerToggletip, t as toggletipDefinition, a as toggletipRegistries } from './shared/definition52.js';
+export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition53.js';
+export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition47.js';
+export { r as registerTab, a as tabDefinition, t as tabRegistries } from './shared/definition45.js';
+export { r as registerTabPanel, a as tabPanelDefinition, t as tabPanelRegistries } from './shared/definition46.js';
+export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition55.js';
+export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition54.js';
+export { r as registerTag, t as tagDefinition } from './shared/definition48.js';
+export { r as registerTagGroup, t as tagGroupDefinition, a as tagGroupRegistries } from './shared/definition49.js';
 export { A as Appearance, c as AriaLive, C as Connotation, b as ConnotationDecorative, L as LayoutSize, P as Position, R as Role, S as Shape, a as Size } from './shared/enums.js';
 export { ae as designSystem, r as registerFactory } from './shared/index.js';
 import './shared/key-codes.js';

package/layout/index.js

@@ -1,4 +1,4 @@
-import { r as registerLayout } from '../shared/definition27.js';
+import { r as registerLayout } from '../shared/definition28.js';
 import '../shared/index.js';
 import '../shared/class-names.js';
 

package/lib/checkbox/checkbox.d.ts

@@ -1,5 +1,8 @@
-import { Checkbox as FastCheckbox } from '@microsoft/fast-foundation';
+import { Checkbox as FoundationCheckbox } from '@microsoft/fast-foundation';
+import { FormElement, FormElementHelperText, FormElementSuccessText } from '../../shared/patterns';
+import { ErrorText } from '../../shared/patterns';
 export declare const keySpace: ' ';
-export declare class Checkbox extends FastCheckbox {
-    label?: string;
+export declare class Checkbox extends FoundationCheckbox {
+}
+export interface Checkbox extends FormElement, FormElementHelperText, ErrorText, FormElementSuccessText {
 }

package/lib/components.d.ts

@@ -14,6 +14,7 @@ export * from './card/definition';
 export * from './checkbox/definition';
 export * from './combobox/definition';
 export * from './elevation/definition';
+export * from './empty-state/definition';
 export * from './dialog/definition';
 export * from './divider/definition';
 export * from './data-grid/definition';
@@ -30,6 +31,7 @@ export * from './nav-disclosure/definition';
 export * from './nav-item/definition';
 export * from './note/definition';
 export * from './number-field/definition';
+export * from './pagination/definition';
 export * from './popup/definition';
 export * from './progress/definition';
 export * from './progress-ring/definition';

package/lib/data-grid/data-grid-row.d.ts

@@ -1,3 +1,4 @@
 import { DataGridRow as FoundationElement } from '@microsoft/fast-foundation';
 export declare class DataGridRow extends FoundationElement {
+    ariaSelected: string | null;
 }

package/lib/empty-state/definition.d.ts

@@ -0,0 +1,3 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const emptyStateDefinition: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const registerEmptyState: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;

package/lib/empty-state/empty-state.d.ts

@@ -0,0 +1,5 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class EmptyState extends FoundationElement {
+    headline?: string;
+    icon?: string;
+}

package/lib/empty-state/empty-state.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { EmptyState } from './empty-state';
+export declare const EmptyStateTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<EmptyState>;

package/lib/empty-state/index.d.ts

@@ -0,0 +1 @@
+export {};

package/listbox/index.js

@@ -1,4 +1,4 @@
-import { r as registerListbox } from '../shared/definition28.js';
+import { r as registerListbox } from '../shared/definition29.js';
 import '../shared/index.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';

package/menu/index.js

@@ -1,4 +1,4 @@
-import { r as registerMenu } from '../shared/definition29.js';
+import { r as registerMenu } from '../shared/definition30.js';
 import '../shared/index.js';
 import '../shared/definition20.js';
 import '../shared/definition7.js';
@@ -25,7 +25,7 @@ import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/definition8.js';
 import '../shared/es.object.assign.js';
-import '../shared/definition30.js';
+import '../shared/definition31.js';
 import '../shared/direction.js';
 import '../shared/slotted.js';
 import '../shared/node-observation.js';

package/menu-item/index.js

@@ -1,4 +1,4 @@
-import { b as registerMenuItem } from '../shared/definition30.js';
+import { b as registerMenuItem } from '../shared/definition31.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/nav/index.js

@@ -1,4 +1,4 @@
-import { r as registerNav } from '../shared/definition31.js';
+import { r as registerNav } from '../shared/definition32.js';
 import '../shared/index.js';
 
 registerNav();

package/nav-disclosure/index.js

@@ -1,4 +1,4 @@
-import { r as registerNavDisclosure } from '../shared/definition32.js';
+import { r as registerNavDisclosure } from '../shared/definition33.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/nav-item/index.js

@@ -1,4 +1,4 @@
-import { r as registerNavItem } from '../shared/definition33.js';
+import { r as registerNavItem } from '../shared/definition34.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/note/index.js

@@ -1,4 +1,4 @@
-import { r as registerNote } from '../shared/definition34.js';
+import { r as registerNote } from '../shared/definition35.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/number-field/index.js

@@ -1,4 +1,4 @@
-import { r as registerNumberField } from '../shared/definition35.js';
+import { r as registerNumberField } from '../shared/definition36.js';
 import '../shared/index.js';
 import '../shared/definition7.js';
 import '../shared/definition3.js';

package/package.json

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