@vonage/vivid 3.56.0 → 3.57.0

package/custom-elements.json

@@ -94,137 +94,149 @@
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/accordion-item/accordion-item.ts",
+      "path": "libs/components/src/lib/action-group/action-group.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "AccordionItem",
+          "name": "ActionGroup",
           "cssProperties": [
             {
-              "name": "--vvd-accordion-item-accent-primary",
+              "name": "--vvd-action-group-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
             },
             {
-              "name": "--vvd-accordion-item-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
+              "name": "--vvd-action-group-accent-intermediate",
+              "default": "var(--vvd-color-neutral-500)"
             },
             {
-              "name": "--vvd-accordion-item-accent-soft",
-              "default": "var(--vvd-color-neutral-100)"
+              "name": "--vvd-action-group-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
             }
           ],
           "slots": [
             {
               "description": "Default slot.",
               "name": ""
-            },
-            {
-              "description": "Add an icon to the component.",
-              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "heading",
+              "name": "shape",
               "type": {
-                "text": "string | undefined"
+                "text": "ActionGroupShape | undefined"
               },
-              "privacy": "public",
-              "description": ""
+              "description": "The shape the ActionGroup should have.",
+              "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "noIndicator",
+              "name": "appearance",
+              "type": {
+                "text": "ActionGroupAppearance | undefined"
+              },
+              "description": "The appearance the ActionGroup should have.",
+              "privacy": "public"
+            },
+            {
+              "kind": "field",
+              "name": "tight",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether the accordion-item has indicator",
+              "description": "Indicates whether action group should have padding.",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "meta",
+              "name": "role",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "privacy": "public",
-              "description": ""
+              "default": "null"
             },
             {
               "kind": "field",
-              "name": "size",
+              "name": "ariaLabel",
               "type": {
-                "text": "AccordionItemSize | undefined"
+                "text": "string | null"
               },
-              "description": "The size the accordion-item should have.",
-              "privacy": "public"
+              "default": "null"
             }
           ],
           "attributes": [
             {
-              "name": "heading",
+              "name": "shape",
               "type": {
-                "text": "string | undefined"
+                "text": "ActionGroupShape | undefined"
               },
-              "fieldName": "heading"
+              "description": "The shape the ActionGroup should have.",
+              "fieldName": "shape"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "ActionGroupAppearance | undefined"
+              },
+              "description": "The appearance the ActionGroup should have.",
+              "fieldName": "appearance"
             },
             {
-              "name": "no-indicator",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether the accordion-item has indicator",
-              "fieldName": "noIndicator"
+              "description": "Indicates whether action group should have padding.",
+              "fieldName": "tight"
             },
             {
-              "name": "meta",
+              "name": "role",
               "type": {
-                "text": "string | undefined"
+                "text": "string | null"
               },
-              "fieldName": "meta"
+              "default": "null",
+              "fieldName": "role"
             },
             {
-              "name": "size",
+              "name": "aria-label",
               "type": {
-                "text": "AccordionItemSize | undefined"
+                "text": "string | null"
               },
-              "description": "The size the accordion-item should have.",
-              "fieldName": "size"
+              "default": "null",
+              "fieldName": "ariaLabel"
             }
           ],
           "superclass": {
-            "name": "FASTAccordionItem",
+            "name": "FoundationElement",
             "package": "@microsoft/fast-foundation"
           },
           "vividComponent": {
             "public": true,
-            "name": "accordion-item"
+            "name": "action-group"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "AccordionItem",
+          "name": "ActionGroup",
           "declaration": {
-            "name": "AccordionItem",
-            "module": "libs/components/src/lib/accordion-item/accordion-item.ts"
+            "name": "ActionGroup",
+            "module": "libs/components/src/lib/action-group/action-group.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/accordion-item/definition.ts",
+      "path": "libs/components/src/lib/action-group/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerAccordionItem",
-          "description": "Registers the accordion item elements with the design system.",
+          "name": "registerActionGroup",
+          "description": "Registers the action-group elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -236,159 +248,163 @@
       "exports": [
         {
           "kind": "js",
-          "name": "registerAccordionItem",
+          "name": "ActionGroupShape",
           "declaration": {
-            "name": "registerAccordionItem",
-            "module": "libs/components/src/lib/accordion-item/definition.ts"
+            "name": "ActionGroupShape",
+            "module": "./action-group"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "ActionGroupAppearance",
+          "declaration": {
+            "name": "ActionGroupAppearance",
+            "module": "./action-group"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "registerActionGroup",
+          "declaration": {
+            "name": "registerActionGroup",
+            "module": "libs/components/src/lib/action-group/definition.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/action-group/action-group.ts",
+      "path": "libs/components/src/lib/accordion-item/accordion-item.ts",
       "declarations": [
         {
           "kind": "class",
           "description": "",
-          "name": "ActionGroup",
+          "name": "AccordionItem",
           "cssProperties": [
             {
-              "name": "--vvd-action-group-accent-primary",
+              "name": "--vvd-accordion-item-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
             },
             {
-              "name": "--vvd-action-group-accent-intermediate",
-              "default": "var(--vvd-color-neutral-500)"
+              "name": "--vvd-accordion-item-accent-faint",
+              "default": "var(--vvd-color-neutral-50)"
             },
             {
-              "name": "--vvd-action-group-accent-faint",
-              "default": "var(--vvd-color-neutral-50)"
+              "name": "--vvd-accordion-item-accent-soft",
+              "default": "var(--vvd-color-neutral-100)"
             }
           ],
           "slots": [
             {
               "description": "Default slot.",
               "name": ""
+            },
+            {
+              "description": "Add an icon to the component.",
+              "name": "icon"
             }
           ],
           "members": [
             {
               "kind": "field",
-              "name": "shape",
-              "type": {
-                "text": "ActionGroupShape | undefined"
-              },
-              "description": "The shape the ActionGroup should have.",
-              "privacy": "public"
-            },
-            {
-              "kind": "field",
-              "name": "appearance",
+              "name": "heading",
               "type": {
-                "text": "ActionGroupAppearance | undefined"
+                "text": "string | undefined"
               },
-              "description": "The appearance the ActionGroup should have.",
-              "privacy": "public"
+              "privacy": "public",
+              "description": ""
             },
             {
               "kind": "field",
-              "name": "tight",
+              "name": "noIndicator",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether action group should have padding.",
+              "description": "Indicates whether the accordion-item has indicator",
               "privacy": "public"
             },
             {
               "kind": "field",
-              "name": "role",
+              "name": "meta",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null"
+              "privacy": "public",
+              "description": ""
             },
             {
               "kind": "field",
-              "name": "ariaLabel",
+              "name": "size",
               "type": {
-                "text": "string | null"
+                "text": "AccordionItemSize | undefined"
               },
-              "default": "null"
+              "description": "The size the accordion-item should have.",
+              "privacy": "public"
             }
           ],
           "attributes": [
             {
-              "name": "shape",
-              "type": {
-                "text": "ActionGroupShape | undefined"
-              },
-              "description": "The shape the ActionGroup should have.",
-              "fieldName": "shape"
-            },
-            {
-              "name": "appearance",
+              "name": "heading",
               "type": {
-                "text": "ActionGroupAppearance | undefined"
+                "text": "string | undefined"
               },
-              "description": "The appearance the ActionGroup should have.",
-              "fieldName": "appearance"
+              "fieldName": "heading"
             },
             {
+              "name": "no-indicator",
               "type": {
                 "text": "boolean"
               },
               "default": "false",
-              "description": "Indicates whether action group should have padding.",
-              "fieldName": "tight"
+              "description": "Indicates whether the accordion-item has indicator",
+              "fieldName": "noIndicator"
             },
             {
-              "name": "role",
+              "name": "meta",
               "type": {
-                "text": "string | null"
+                "text": "string | undefined"
               },
-              "default": "null",
-              "fieldName": "role"
+              "fieldName": "meta"
             },
             {
-              "name": "aria-label",
+              "name": "size",
               "type": {
-                "text": "string | null"
+                "text": "AccordionItemSize | undefined"
               },
-              "default": "null",
-              "fieldName": "ariaLabel"
+              "description": "The size the accordion-item should have.",
+              "fieldName": "size"
             }
           ],
           "superclass": {
-            "name": "FoundationElement",
+            "name": "FASTAccordionItem",
             "package": "@microsoft/fast-foundation"
           },
           "vividComponent": {
             "public": true,
-            "name": "action-group"
+            "name": "accordion-item"
           }
         }
       ],
       "exports": [
         {
           "kind": "js",
-          "name": "ActionGroup",
+          "name": "AccordionItem",
           "declaration": {
-            "name": "ActionGroup",
-            "module": "libs/components/src/lib/action-group/action-group.ts"
+            "name": "AccordionItem",
+            "module": "libs/components/src/lib/accordion-item/accordion-item.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "libs/components/src/lib/action-group/definition.ts",
+      "path": "libs/components/src/lib/accordion-item/definition.ts",
       "declarations": [
         {
           "kind": "variable",
-          "name": "registerActionGroup",
-          "description": "Registers the action-group elements with the design system.",
+          "name": "registerAccordionItem",
+          "description": "Registers the accordion item elements with the design system.",
           "parameters": [
             {
               "description": "the prefix to use for the component name",
@@ -400,26 +416,10 @@
       "exports": [
         {
           "kind": "js",
-          "name": "ActionGroupShape",
-          "declaration": {
-            "name": "ActionGroupShape",
-            "module": "./action-group"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "ActionGroupAppearance",
-          "declaration": {
-            "name": "ActionGroupAppearance",
-            "module": "./action-group"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "registerActionGroup",
+          "name": "registerAccordionItem",
           "declaration": {
-            "name": "registerActionGroup",
-            "module": "libs/components/src/lib/action-group/definition.ts"
+            "name": "registerAccordionItem",
+            "module": "libs/components/src/lib/accordion-item/definition.ts"
           }
         }
       ]
@@ -6907,6 +6907,30 @@
             {
               "name": "--vvd-fab-cta-firm",
               "default": "var(--vvd-color-cta-600)"
+            },
+            {
+              "name": "--vvd-fab-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
+            },
+            {
+              "name": "--vvd-fab-announcement-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
+            {
+              "name": "--vvd-fab-announcement-primary-increment",
+              "default": "var(--vvd-color-announcement-600)"
+            },
+            {
+              "name": "--vvd-fab-announcement-contrast",
+              "default": "var(--vvd-color-announcement-800)"
+            },
+            {
+              "name": "--vvd-fab-announcement-fierce",
+              "default": "var(--vvd-color-announcement-700)"
+            },
+            {
+              "name": "--vvd-fab-announcement-firm",
+              "default": "var(--vvd-color-announcement-600)"
             }
           ],
           "slots": [

package/lib/fab/fab.d.ts

@@ -1,7 +1,7 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
 import type { Connotation, Size } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-export type FabConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent>;
+export type FabConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent | Connotation.Announcement>;
 export type FABSize = Extract<Size, Size.Normal | Size.Expanded>;
 export declare class Fab extends FoundationButton {
     connotation?: FabConnotation;

package/package.json

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

package/shared/definition24.cjs

@@ -8,7 +8,7 @@ const button = require('./button.cjs');
 const ref = require('./ref.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
+const styles = ".control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition24.js

@@ -6,7 +6,7 @@ import { B as Button$1 } from './button.js';
 import { r as ref } from './ref.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
+const styles = ".control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control:not(.connotation-accent,.connotation-cta){--focus-stroke-gap-color: transparent}.control:focus-visible{box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control:not(.size-expanded){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control:disabled{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp);cursor:not-allowed}.control:not(:disabled){--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp);cursor:pointer}.control:not(:disabled):hover{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control:not(:disabled):active{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/icon.cjs

@@ -141,7 +141,7 @@ _has._curry2(function memoizeWith(mFn, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.5.7";
+const ICONS_VERSION = "4.5.8";
 
 const numberConverter = {
   toView(value) {

package/shared/icon.js

@@ -139,7 +139,7 @@ _curry2(function memoizeWith(mFn, fn) {
 });
 
 const ICONS_BASE_URL = "https://icon.resources.vonage.com";
-const ICONS_VERSION = "4.5.7";
+const ICONS_VERSION = "4.5.8";
 
 const numberConverter = {
   toView(value) {

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:30 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/vivid-2-compat.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Mon, 20 May 2024 13:37:53 GMT
+ * Generated on Wed, 22 May 2024 12:12:29 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -2978,6 +2978,15 @@
               "text": "Connotation.Accent",
               "canonicalReference": "@vonage/vivid!Connotation.Accent:member"
             },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
+            {
+              "kind": "Reference",
+              "text": "Connotation.Announcement",
+              "canonicalReference": "@vonage/vivid!Connotation.Announcement:member"
+            },
             {
               "kind": "Content",
               "text": ">"
@@ -2992,7 +3001,7 @@
           "name": "FabConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 9
+            "endIndex": 11
           }
         },
         {