@vonage/vivid 3.29.0 → 3.31.0

package/custom-elements.json

@@ -4926,7 +4926,7 @@
           "type": {
             "text": "string"
           },
-          "default": "'4.2.2'"
+          "default": "'4.2.3'"
         },
         {
           "kind": "class",
@@ -5966,6 +5966,10 @@
               "name": "--vvd-nav-disclosure-accent-primary-text",
               "default": "var(--vvd-color-canvas)"
             },
+            {
+              "name": "--vvd-nav-disclosure-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
             {
               "name": "--vvd-nav-disclosure-accent-faint",
               "default": "var(--vvd-color-neutral-50)"
@@ -6012,6 +6016,14 @@
               "description": "Indicates whether the nav-disclosure is open",
               "privacy": "public"
             },
+            {
+              "kind": "field",
+              "name": "ariaCurrent",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
             {
               "kind": "field",
               "name": "#onToggle",
@@ -6039,6 +6051,14 @@
               "default": "false",
               "description": "Indicates whether the nav-disclosure is open",
               "fieldName": "open"
+            },
+            {
+              "name": "aria-current",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaCurrent"
             }
           ],
           "superclass": {
@@ -6744,6 +6764,22 @@
         }
       ],
       "exports": [
+        {
+          "kind": "js",
+          "name": "PaginationShape",
+          "declaration": {
+            "name": "PaginationShape",
+            "module": "./pagination"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "PaginationSize",
+          "declaration": {
+            "name": "PaginationSize",
+            "module": "./pagination"
+          }
+        },
         {
           "kind": "js",
           "name": "paginationDefinition",
@@ -6776,7 +6812,18 @@
               "name": "size",
               "type": {
                 "text": "PaginationSize | undefined"
-              }
+              },
+              "description": "The size the pagination should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "PaginationShape | undefined"
+              },
+              "description": "The shape the pagination should have.",
+              "privacy": "public"
             },
             {
               "kind": "field",
@@ -6889,8 +6936,17 @@
               "type": {
                 "text": "PaginationSize | undefined"
               },
+              "description": "The size the pagination should have.",
               "fieldName": "size"
             },
+            {
+              "name": "shape",
+              "type": {
+                "text": "PaginationShape | undefined"
+              },
+              "description": "The shape the pagination should have.",
+              "fieldName": "shape"
+            },
             {
               "name": "nav-icons",
               "type": {
@@ -8269,6 +8325,372 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/split-button/definition.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "registerSplitButton",
+          "description": "Registers the button elements with the design system.",
+          "parameters": [
+            {
+              "description": "the prefix to use for the component name",
+              "name": "prefix"
+            }
+          ]
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SplitButtonAppearance",
+          "declaration": {
+            "name": "SplitButtonAppearance",
+            "module": "./split-button"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SplitButtonConnotation",
+          "declaration": {
+            "name": "SplitButtonConnotation",
+            "module": "./split-button"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SplitButtonShape",
+          "declaration": {
+            "name": "SplitButtonShape",
+            "module": "./split-button"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "SplitButtonSize",
+          "declaration": {
+            "name": "SplitButtonSize",
+            "module": "./split-button"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerSplitButton",
+          "declaration": {
+            "name": "registerSplitButton",
+            "module": "libs/components/src/lib/split-button/definition.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "libs/components/src/lib/split-button/split-button.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for split button",
+          "name": "SplitButton",
+          "cssProperties": [
+            {
+              "name": "--vvd-split-button-cta-primary",
+              "default": "var(--vvd-color-cta-500)"
+            },
+            {
+              "name": "--vvd-split-button-cta-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-split-button-cta-primary-increment",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-split-button-cta-contrast",
+              "default": "var(--vvd-color-cta-800)"
+            },
+            {
+              "name": "--vvd-split-button-cta-fierce",
+              "default": "var(--vvd-color-cta-700)"
+            },
+            {
+              "name": "--vvd-split-button-cta-firm",
+              "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-split-button-cta-soft",
+              "default": "var(--vvd-color-cta-100)"
+            },
+            {
+              "name": "--vvd-split-button-cta-faint",
+              "default": "var(--vvd-color-cta-50)"
+            },
+            {
+              "name": "--vvd-split-button-accent-primary",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-split-button-accent-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-split-button-accent-primary-increment",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-split-button-accent-contrast",
+              "default": "var(--vvd-color-neutral-800)"
+            },
+            {
+              "name": "--vvd-split-button-accent-fierce",
+              "default": "var(--vvd-color-neutral-700)"
+            },
+            {
+              "name": "--vvd-split-button-accent-firm",
+              "default": "var(--vvd-color-canvas-text)"
+            },
+            {
+              "name": "--vvd-split-button-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
+            },
+            {
+              "name": "--vvd-split-button-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
+            }
+          ],
+          "slots": [
+            {
+              "description": "Default slot.",
+              "name": ""
+            }
+          ],
+          "members": [
+            {
+              "kind": "field",
+              "name": "_action",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "description": "Action HTML button element",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "action",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "_indicator",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "description": "Indicator HTML button element",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "indicator",
+              "type": {
+                "text": "HTMLButtonElement"
+              },
+              "readonly": true
+            },
+            {
+              "kind": "field",
+              "name": "connotation",
+              "type": {
+                "text": "SplitButtonConnotation | undefined"
+              },
+              "description": "The connotation the split button should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "shape",
+              "type": {
+                "text": "SplitButtonShape | undefined"
+              },
+              "description": "The shape the split button should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "SplitButtonAppearance | undefined"
+              },
+              "description": "The appearance the split button should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "size",
+              "type": {
+                "text": "SplitButtonSize | undefined"
+              },
+              "description": "The size the split button should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the split button's label.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the split button's icon.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "splitIndicator",
+              "type": {
+                "text": "string"
+              },
+              "default": "'chevron-down-line'",
+              "description": "Indicates the split button's icon indicator.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates if the button is disabled.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "ariaLabel",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            },
+            {
+              "kind": "field",
+              "name": "ariaExpanded",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null"
+            }
+          ],
+          "attributes": [
+            {
+              "name": "connotation",
+              "type": {
+                "text": "SplitButtonConnotation | undefined"
+              },
+              "description": "The connotation the split button should have.",
+              "fieldName": "connotation"
+            },
+            {
+              "name": "shape",
+              "type": {
+                "text": "SplitButtonShape | undefined"
+              },
+              "description": "The shape the split button should have.",
+              "fieldName": "shape"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "SplitButtonAppearance | undefined"
+              },
+              "description": "The appearance the split button should have.",
+              "fieldName": "appearance"
+            },
+            {
+              "name": "size",
+              "type": {
+                "text": "SplitButtonSize | undefined"
+              },
+              "description": "The size the split button should have.",
+              "fieldName": "size"
+            },
+            {
+              "name": "label",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the split button's label.",
+              "fieldName": "label"
+            },
+            {
+              "name": "icon",
+              "type": {
+                "text": "string | undefined"
+              },
+              "description": "Indicates the split button's icon.",
+              "fieldName": "icon"
+            },
+            {
+              "name": "split-indicator",
+              "type": {
+                "text": "string"
+              },
+              "default": "'chevron-down-line'",
+              "description": "Indicates the split button's icon indicator.",
+              "fieldName": "splitIndicator"
+            },
+            {
+              "name": "disabled",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "description": "Indicates if the button is disabled.",
+              "fieldName": "disabled"
+            },
+            {
+              "name": "aria-label",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaLabel"
+            },
+            {
+              "name": "aria-expanded",
+              "type": {
+                "text": "string | null"
+              },
+              "default": "null",
+              "fieldName": "ariaExpanded"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@microsoft/fast-foundation"
+          }
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "SplitButton",
+          "declaration": {
+            "name": "SplitButton",
+            "module": "libs/components/src/lib/split-button/split-button.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "libs/components/src/lib/switch/definition.ts",

package/index.js

@@ -37,18 +37,19 @@ export { a as radioGroupDefinition, b as radioGroupRegistries, r as registerRadi
 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 { r as registerSplitButton, s as splitButtonDefinition, a as splitButtonRegistries } from './shared/definition44.js';
+export { r as registerSwitch, s as switchDefinition, a as switchRegistries } from './shared/definition45.js';
+export { r as registerTextField, t as textFieldDefinition, a as textFieldRegistries } from './shared/definition52.js';
+export { r as registerTextArea, t as textAreaDefinition, a as textAreaRegistries } from './shared/definition51.js';
+export { r as registerToggletip, t as toggletipDefinition, a as toggletipRegistries } from './shared/definition53.js';
+export { r as registerTooltip, t as tooltipDefinition, a as tooltipRegistries } from './shared/definition54.js';
+export { r as registerTabs, t as tabsDefinition, a as tabsRegistries } from './shared/definition48.js';
+export { r as registerTab, a as tabDefinition, t as tabRegistries } from './shared/definition46.js';
+export { r as registerTabPanel, a as tabPanelDefinition, t as tabPanelRegistries } from './shared/definition47.js';
+export { r as registerTreeView, t as treeViewDefinition, a as treeViewRegistries } from './shared/definition56.js';
+export { r as registerTreeItem, t as treeItemDefinition, a as treeItemRegistries } from './shared/definition55.js';
+export { r as registerTag, t as tagDefinition } from './shared/definition49.js';
+export { r as registerTagGroup, t as tagGroupDefinition, a as tagGroupRegistries } from './shared/definition50.js';
 export { f as filePickerDefinition, a as filePickerRegistries, r as registerFilePicker } from './shared/definition27.js';
 export { j as designSystem, r as registerFactory } from './shared/index.js';
 import './shared/key-codes.js';

package/lib/components.d.ts

@@ -37,6 +37,7 @@ export * from './radio-group/definition';
 export * from './select/definition';
 export * from './side-drawer/definition';
 export * from './slider/definition';
+export * from './split-button/definition';
 export * from './switch/definition';
 export * from './text-field/definition';
 export * from './text-area/definition';

package/lib/icon/icon.d.ts

@@ -1,6 +1,6 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums';
-export declare const ICON_SET_VERSION = "4.2.2";
+export declare const ICON_SET_VERSION = "4.2.3";
 export type IconConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Announcement | Connotation.Success | Connotation.Alert | Connotation.Information>;
 export declare class Icon extends FoundationElement {
     connotation?: IconConnotation;

package/lib/nav-disclosure/nav-disclosure.d.ts

@@ -5,6 +5,7 @@ export declare class NavDisclosure extends FoundationElement {
     details: HTMLDetailsElement;
     label?: string;
     open: boolean;
+    ariaCurrent: string | null;
 }
 export interface NavDisclosure extends AffixIcon {
 }

package/lib/pagination/definition.d.ts

@@ -1,3 +1,4 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export type { PaginationShape, PaginationSize } from './pagination';
 export declare const paginationDefinition: (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 registerPagination: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;

package/lib/pagination/pagination.d.ts

@@ -1,9 +1,11 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import type { Size } from '../enums';
+import type { Shape, Size } from '../enums';
 import type { Button } from '../button/button';
 export type PaginationSize = Extract<Size, Size.SuperCondensed | Size.Condensed | Size.Normal>;
+export type PaginationShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
 export declare class Pagination extends FoundationElement {
     size?: PaginationSize;
+    shape?: PaginationShape;
     paginationButtons?: Button[];
     prevButton?: Button;
     nextButton?: Button;

package/lib/split-button/definition.d.ts

@@ -0,0 +1,2 @@
+export type { SplitButtonAppearance, SplitButtonConnotation, SplitButtonShape, SplitButtonSize } from './split-button';
+export declare const registerSplitButton: (prefix?: string) => import("@microsoft/fast-foundation").DesignSystem;

package/lib/split-button/index.d.ts

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

package/lib/split-button/split-button.d.ts

@@ -0,0 +1,25 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Connotation, Shape, Size } from '../enums.js';
+import { AffixIcon } from '../../shared/patterns/affix';
+export type SplitButtonConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
+export type SplitButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+export type SplitButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export type SplitButtonSize = Extract<Size, Size.SuperCondensed | Size.Condensed | Size.Normal | Size.Expanded>;
+export declare class SplitButton extends FoundationElement {
+    _action: HTMLButtonElement;
+    get action(): HTMLButtonElement;
+    _indicator: HTMLButtonElement;
+    get indicator(): HTMLButtonElement;
+    connotation?: SplitButtonConnotation;
+    shape?: SplitButtonShape;
+    appearance?: SplitButtonAppearance;
+    size?: SplitButtonSize;
+    label?: string;
+    icon?: string;
+    splitIndicator: string;
+    disabled: boolean;
+    ariaLabel: string | null;
+    ariaExpanded: string | null;
+}
+export interface SplitButton extends AffixIcon {
+}

package/lib/split-button/split-button.template.d.ts

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

package/listbox/index.js

@@ -57,7 +57,7 @@ const ListboxTemplate = context => {
 	`;
 };
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n:host {\n  display: block;\n  inline-size: fit-content;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n  gap: 4px;\n}\n.base {\n  /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n\n.focus-indicator {\n  pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n  display: none;\n}\n\n.base.disabled ::slotted([role=option]) {\n  --_option-appearance-color-text: var(--_appearance-color-outline);\n  cursor: not-allowed;\n  pointer-events: none;\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n:host {\n  display: block;\n  inline-size: fit-content;\n}\n\n:host(:focus-within) {\n  outline: none;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  contain: paint;\n  gap: 4px;\n}\n.base {\n  /* @cssprop [--vvd-listbox-accent-backdrop=var(--vvd-color-canvas)] */\n  --_connotation-color-backdrop: var(--vvd-listbox-accent-backdrop, var(--vvd-color-canvas));\n  /* @cssprop [--vvd-listbox-accent-intermediate=var(--vvd-color-neutral-500)] */\n  --_connotation-color-intermediate: var(--vvd-listbox-accent-intermediate, var(--vvd-color-neutral-500));\n  /* @cssprop [--vvd-listbox-accent-primary=var(--vvd-color-canvas-text)] */\n  --_connotation-color-primary: var(--vvd-listbox-accent-primary, var(--vvd-color-canvas-text));\n  /* @cssprop [--vvd-listbox-accent-soft=var(--vvd-color-neutral-100)] */\n  --_connotation-color-soft: var(--vvd-listbox-accent-soft, var(--vvd-color-neutral-100));\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--_connotation-color-backdrop);\n  --_appearance-color-outline: var(--_connotation-color-intermediate);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-300);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-300);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n\n.focus-indicator {\n  pointer-events: none;\n}\n:host(:not(:focus-within)) .focus-indicator {\n  display: none;\n}\n\n.base.disabled ::slotted([role=option]) {\n  --_option-appearance-color-text: var(--_appearance-color-outline);\n  cursor: not-allowed;\n  pointer-events: none;\n}";
 
 const listboxDefinition = Listbox.compose({
   baseName: 'listbox',

package/package.json

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

package/shared/definition.js

@@ -187,7 +187,7 @@ __decorate([
     observable
 ], Accordion$1.prototype, "accordionItems", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Wed, 09 Aug 2023 13:23:44 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 17 Aug 2023 11:13:18 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
 
 class Accordion extends Accordion$1 {
   constructor() {