@vonage/vivid 3.53.0 → 3.54.0

package/lib/appearance-ui/appearance-ui.d.ts

@@ -1,6 +1,6 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Appearance } from '../enums.js';
-export type AppearanceUIAppearance = Extract<Appearance, Appearance.Filled | Appearance.Ghost | Appearance.Outlined | Appearance.Duotone | Appearance.Fieldset | Appearance.Subtle | Appearance.Listitem>;
+export type AppearanceUIAppearance = Extract<Appearance, Appearance.Filled | Appearance.Ghost | Appearance.GhostLight | Appearance.Outlined | Appearance.Duotone | Appearance.Fieldset | Appearance.Subtle | Appearance.Listitem>;
 export declare class AppearanceUi extends FoundationElement {
     appearance?: AppearanceUIAppearance;
     hovered: boolean;

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

@@ -1,15 +1,19 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums';
+import { MediaSkipBy } from '../enums';
 import { Localized } from '../../shared/patterns';
 export type AudioPlayerConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export declare class AudioPlayer extends FoundationElement {
     playButtonAriaLabel: string | null;
     pauseButtonAriaLabel: string | null;
     sliderAriaLabel: string | null;
+    skipForwardButtonAriaLabel: string | null;
+    skipBackwardButtonAriaLabel: string | null;
     connotation?: AudioPlayerConnotation;
     src?: string;
     disabled: boolean;
     notime: boolean;
+    skipBy?: MediaSkipBy;
     connectedCallback(): void;
     disconnectedCallback(): void;
 }

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

@@ -2,4 +2,6 @@ export interface AudioPlayerLocale {
     playButtonLabel: string;
     pauseButtonLabel: string;
     sliderLabel: string;
+    skipForwardButton: string;
+    skipBackwardButton: string;
 }

package/lib/dial-pad/dial-pad.d.ts

@@ -7,8 +7,11 @@ export declare class DialPad extends FoundationElement {
     valueChanged(_oldValue: string, newValue: string): void;
     pattern: string;
     disabled: boolean;
+    pending: boolean;
     callActive: boolean;
     noCall: boolean;
+    endCallButtonLabel: string | null;
+    callButtonLabel: string | null;
 }
 export interface DialPad extends Localized {
 }

package/lib/enums.d.ts

@@ -23,6 +23,7 @@ export declare enum Appearance {
     Fieldset = "fieldset",
     Subtle = "subtle",
     Ghost = "ghost",
+    GhostLight = "ghost-light",
     Listitem = "listitem",
     Elevated = "elevated"
 }

package/lib/menu/menu.d.ts

@@ -5,6 +5,7 @@ export declare class Menu extends FastMenu {
     #private;
     ariaLabel: string | null;
     placement?: Placement;
+    trigger?: 'auto' | 'legacy' | 'off';
     autoDismiss: boolean;
     autoDismissChanged(oldValue?: boolean): void;
     open: boolean;

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

@@ -1,9 +1,14 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
+import { Appearance, Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns/affix';
+export type NavDisclosureAppearance = Extract<Appearance, Appearance.Ghost | Appearance.GhostLight>;
+export type NavDisclosureConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
 export declare class NavDisclosure extends FoundationElement {
     #private;
     details: HTMLDetailsElement;
     label?: string;
+    appearance?: NavDisclosureAppearance;
+    connotation?: NavDisclosureConnotation;
     open: boolean;
     ariaCurrent: string | null;
 }

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

@@ -2,7 +2,7 @@ import { Anchor } from '@microsoft/fast-foundation';
 import { Appearance, Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns/affix';
 export type TextAnchorConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
-export type TextAnchorAppearance = Extract<Appearance, Appearance.Ghost>;
+export type TextAnchorAppearance = Extract<Appearance, Appearance.Ghost | Appearance.GhostLight>;
 export declare class TextAnchor extends Anchor {
     text?: string;
     connotation?: TextAnchorConnotation;

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

@@ -0,0 +1 @@
+export declare function renderSvgIcons(): import("@microsoft/fast-element").ViewTemplate<any, any>;

package/locales/en-GB.cjs

@@ -109,7 +109,9 @@ const enGB = {
   audioPlayer: {
     playButtonLabel: "Play",
     pauseButtonLabel: "Pause",
-    sliderLabel: "Audio progress bar"
+    sliderLabel: "Audio progress bar",
+    skipForwardButton: "Skip Forward",
+    skipBackwardButton: "Skip Backward"
   },
   alert: {
     dismissButtonLabel: "Close"

package/locales/en-GB.js

@@ -107,7 +107,9 @@ const enGB = {
   audioPlayer: {
     playButtonLabel: "Play",
     pauseButtonLabel: "Pause",
-    sliderLabel: "Audio progress bar"
+    sliderLabel: "Audio progress bar",
+    skipForwardButton: "Skip Forward",
+    skipBackwardButton: "Skip Backward"
   },
   alert: {
     dismissButtonLabel: "Close"

package/locales/en-US.cjs

@@ -277,7 +277,9 @@ const enUS = {
   audioPlayer: {
     playButtonLabel: "Play",
     pauseButtonLabel: "Pause",
-    sliderLabel: "Audio progress bar"
+    sliderLabel: "Audio progress bar",
+    skipForwardButton: "Skip Forward",
+    skipBackwardButton: "Skip Backward"
   },
   alert: {
     dismissButtonLabel: "Close"

package/locales/en-US.js

@@ -275,7 +275,9 @@ const enUS = {
   audioPlayer: {
     playButtonLabel: "Play",
     pauseButtonLabel: "Pause",
-    sliderLabel: "Audio progress bar"
+    sliderLabel: "Audio progress bar",
+    skipForwardButton: "Skip Forward",
+    skipBackwardButton: "Skip Backward"
   },
   alert: {
     dismissButtonLabel: "Close"

package/locales/ja-JP.cjs

@@ -276,7 +276,9 @@ const jaJP = {
   audioPlayer: {
     playButtonLabel: "開始",
     pauseButtonLabel: "休止",
-    sliderLabel: "オーディオプログレスバー"
+    sliderLabel: "オーディオプログレスバー",
+    skipForwardButton: "前にスキップ",
+    skipBackwardButton: "後方にスキップ"
   },
   alert: {
     dismissButtonLabel: "閉じる"

package/locales/ja-JP.js

@@ -274,7 +274,9 @@ const jaJP = {
   audioPlayer: {
     playButtonLabel: "開始",
     pauseButtonLabel: "休止",
-    sliderLabel: "オーディオプログレスバー"
+    sliderLabel: "オーディオプログレスバー",
+    skipForwardButton: "前にスキップ",
+    skipBackwardButton: "後方にスキップ"
   },
   alert: {
     dismissButtonLabel: "閉じる"

package/locales/zh-CN.cjs

@@ -278,7 +278,9 @@ const zhCN = {
   audioPlayer: {
     playButtonLabel: "草創",
     pauseButtonLabel: "停",
-    sliderLabel: "音訊進度條"
+    sliderLabel: "音訊進度條",
+    skipForwardButton: "向前跳",
+    skipBackwardButton: "向后跳"
   },
   alert: {
     dismissButtonLabel: "关"

package/locales/zh-CN.js

@@ -276,7 +276,9 @@ const zhCN = {
   audioPlayer: {
     playButtonLabel: "草創",
     pauseButtonLabel: "停",
-    sliderLabel: "音訊進度條"
+    sliderLabel: "音訊進度條",
+    skipForwardButton: "向前跳",
+    skipBackwardButton: "向后跳"
   },
   alert: {
     dismissButtonLabel: "关"

package/package.json

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

package/shared/definition20.cjs

@@ -34,8 +34,11 @@ class DialPad extends index.FoundationElement {
     this.value = "";
     this.pattern = "^[0-9#*]*$";
     this.disabled = false;
+    this.pending = false;
     this.callActive = false;
     this.noCall = false;
+    this.endCallButtonLabel = null;
+    this.callButtonLabel = null;
     /**
      *
      * @internal
@@ -113,17 +116,26 @@ __decorateClass([
 __decorateClass([
   index.attr({ mode: "boolean" })
 ], DialPad.prototype, "disabled", 2);
+__decorateClass([
+  index.attr({ mode: "boolean" })
+], DialPad.prototype, "pending", 2);
 __decorateClass([
   index.attr({ attribute: "call-active", mode: "boolean" })
 ], DialPad.prototype, "callActive", 2);
 __decorateClass([
   index.attr({ mode: "boolean", attribute: "no-call" })
 ], DialPad.prototype, "noCall", 2);
+__decorateClass([
+  index.attr({ attribute: "end-call-button-label" })
+], DialPad.prototype, "endCallButtonLabel", 2);
+__decorateClass([
+  index.attr({ attribute: "call-button-label" })
+], DialPad.prototype, "callButtonLabel", 2);
 applyMixins.applyMixins(DialPad, localized.Localized);
 
 const getClasses = (_) => classNames.classNames("base");
 function handleKeyDown(x, e) {
-  if (e.key === keyCodes.keyEnter) {
+  if (e.key === keyCodes.keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
   } else {
     const key = e.key === "*" ? "Asterisk" : e.key === "#" ? "Hashtag" : e.key;
@@ -203,8 +215,9 @@ function renderDialButton(buttonTag) {
         icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
         connotation="${(x) => x.callActive ? "alert" : "cta"}"
         ?disabled="${(x) => x.disabled}"
+		?pending="${(x) => x.pending}"
         @click="${(x) => x._onDial()}"
-        label="${(x) => x.callActive ? x.locale.dialPad.endCallButtonLabel : x.locale.dialPad.callButtonLabel}">
+        label="${(x) => x.callActive ? x.endCallButtonLabel || x.locale.dialPad.endCallButtonLabel : x.callButtonLabel || x.locale.dialPad.callButtonLabel}">
     </${buttonTag}>`;
 }
 const DialPadTemplate = (context) => {

package/shared/definition20.js

@@ -32,8 +32,11 @@ class DialPad extends FoundationElement {
     this.value = "";
     this.pattern = "^[0-9#*]*$";
     this.disabled = false;
+    this.pending = false;
     this.callActive = false;
     this.noCall = false;
+    this.endCallButtonLabel = null;
+    this.callButtonLabel = null;
     /**
      *
      * @internal
@@ -111,17 +114,26 @@ __decorateClass([
 __decorateClass([
   attr({ mode: "boolean" })
 ], DialPad.prototype, "disabled", 2);
+__decorateClass([
+  attr({ mode: "boolean" })
+], DialPad.prototype, "pending", 2);
 __decorateClass([
   attr({ attribute: "call-active", mode: "boolean" })
 ], DialPad.prototype, "callActive", 2);
 __decorateClass([
   attr({ mode: "boolean", attribute: "no-call" })
 ], DialPad.prototype, "noCall", 2);
+__decorateClass([
+  attr({ attribute: "end-call-button-label" })
+], DialPad.prototype, "endCallButtonLabel", 2);
+__decorateClass([
+  attr({ attribute: "call-button-label" })
+], DialPad.prototype, "callButtonLabel", 2);
 applyMixins(DialPad, Localized);
 
 const getClasses = (_) => classNames("base");
 function handleKeyDown(x, e) {
-  if (e.key === keyEnter) {
+  if (e.key === keyEnter && !x.pending && !x.disabled && !x.callActive && !x.noCall && x.value.length > 0 && e.target instanceof HTMLInputElement) {
     x._onDial();
   } else {
     const key = e.key === "*" ? "Asterisk" : e.key === "#" ? "Hashtag" : e.key;
@@ -201,8 +213,9 @@ function renderDialButton(buttonTag) {
         icon="${(x) => x.callActive ? "disable-call-line" : "call-line"}"
         connotation="${(x) => x.callActive ? "alert" : "cta"}"
         ?disabled="${(x) => x.disabled}"
+		?pending="${(x) => x.pending}"
         @click="${(x) => x._onDial()}"
-        label="${(x) => x.callActive ? x.locale.dialPad.endCallButtonLabel : x.locale.dialPad.callButtonLabel}">
+        label="${(x) => x.callActive ? x.endCallButtonLabel || x.locale.dialPad.endCallButtonLabel : x.callButtonLabel || x.locale.dialPad.callButtonLabel}">
     </${buttonTag}>`;
 }
 const DialPadTemplate = (context) => {

package/shared/definition27.cjs

@@ -10,7 +10,7 @@ const styles = ":host{display:inline-block;vertical-align:sub}.control{display:f
 const getClasses = ({ connotation, size }) => classNames.classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
-  [`size-${size}`, Boolean(size)]
+  [`size-${size}`, typeof size === "number"]
 );
 const iconTemplate = () => index.html`
 	<figure class="${getClasses}">

package/shared/definition27.js

@@ -8,7 +8,7 @@ const styles = ":host{display:inline-block;vertical-align:sub}.control{display:f
 const getClasses = ({ connotation, size }) => classNames(
   "control",
   [`connotation-${connotation}`, Boolean(connotation)],
-  [`size-${size}`, Boolean(size)]
+  [`size-${size}`, typeof size === "number"]
 );
 const iconTemplate = () => html`
 	<figure class="${getClasses}">

package/shared/definition29.cjs

@@ -600,10 +600,11 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _setupAnchor, setupAnchor_fn, _updateAnchor, updateAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _openIfClosed, _updateClickOutsideListeners, _wasOpenBeforeClick, _onClickOutsideCapture, _onClickOutside;
+var _triggerBehaviour, triggerBehaviour_get, _setupAnchor, setupAnchor_fn, _updateAnchor, updateAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _onAnchorClick, _updateClickOutsideListeners, _wasOpenBeforeClick, _onClickOutsideCapture, _onClickOutside;
 exports.Menu = class Menu extends Menu$1 {
   constructor() {
     super();
+    __privateAdd(this, _triggerBehaviour);
     __privateAdd(this, _setupAnchor);
     __privateAdd(this, _updateAnchor);
     __privateAdd(this, _cleanupAnchor);
@@ -611,9 +612,15 @@ exports.Menu = class Menu extends Menu$1 {
     this.placement = "bottom";
     this.autoDismiss = false;
     this.open = false;
-    __privateAdd(this, _openIfClosed, () => {
-      if (!this.open)
-        index.DOM.queueUpdate(() => this.open = true);
+    __privateAdd(this, _onAnchorClick, () => {
+      if (__privateGet(this, _triggerBehaviour, triggerBehaviour_get) === "off") {
+        return;
+      }
+      if (__privateGet(this, _triggerBehaviour, triggerBehaviour_get) === "legacy" && this.open) {
+        return;
+      }
+      const newValue = !this.open;
+      index.DOM.queueUpdate(() => this.open = newValue);
     });
     __privateAdd(this, _updateClickOutsideListeners, () => {
       document.removeEventListener("click", __privateGet(this, _onClickOutsideCapture), true);
@@ -634,15 +641,20 @@ exports.Menu = class Menu extends Menu$1 {
     });
     const handleFocusOut = this.handleFocusOut;
     this.handleFocusOut = (e) => {
-      const privates = this;
-      const isSafeToCallSuper = privates.menuItems.some(
-        privates.isFocusableElement
+      const privates2 = this;
+      const isSafeToCallSuper = privates2.menuItems.some(
+        privates2.isFocusableElement
       );
       if (!isSafeToCallSuper) {
         return;
       }
       handleFocusOut(e);
     };
+    const privates = this;
+    const domChildren = privates.domChildren;
+    privates.domChildren = () => {
+      return domChildren.call(this).filter((child) => !child.hasAttribute("slot"));
+    };
   }
   autoDismissChanged(oldValue) {
     if (oldValue === void 0)
@@ -672,10 +684,24 @@ exports.Menu = class Menu extends Menu$1 {
     if (newValue)
       __privateMethod(this, _setupAnchor, setupAnchor_fn).call(this, newValue);
   }
+  /**
+   * @internal
+   */
+  _onChange(e) {
+    const clickedOnNonCheckboxMenuItem = e.target instanceof HTMLElement && (e.target.role === "menuitem" || e.target.role === "menuitemradio");
+    if (__privateGet(this, _triggerBehaviour, triggerBehaviour_get) === "auto" && clickedOnNonCheckboxMenuItem) {
+      this.open = false;
+    }
+    return true;
+  }
+};
+_triggerBehaviour = new WeakSet();
+triggerBehaviour_get = function() {
+  return this.trigger ?? "legacy";
 };
 _setupAnchor = new WeakSet();
 setupAnchor_fn = function(a) {
-  a.addEventListener("click", __privateGet(this, _openIfClosed), true);
+  a.addEventListener("click", __privateGet(this, _onAnchorClick), true);
   a.setAttribute("aria-haspopup", "menu");
   __privateMethod(this, _updateAnchor, updateAnchor_fn).call(this, a);
 };
@@ -685,11 +711,11 @@ updateAnchor_fn = function(a) {
 };
 _cleanupAnchor = new WeakSet();
 cleanupAnchor_fn = function(a) {
-  a.removeEventListener("click", __privateGet(this, _openIfClosed), true);
+  a.removeEventListener("click", __privateGet(this, _onAnchorClick), true);
   a.removeAttribute("aria-hasPopup");
   a.removeAttribute("aria-expanded");
 };
-_openIfClosed = new WeakMap();
+_onAnchorClick = new WeakMap();
 _updateClickOutsideListeners = new WeakMap();
 _wasOpenBeforeClick = new WeakMap();
 _onClickOutsideCapture = new WeakMap();
@@ -700,6 +726,9 @@ __decorateClass$1([
 __decorateClass$1([
   index.attr({ mode: "fromView" })
 ], exports.Menu.prototype, "placement", 2);
+__decorateClass$1([
+  index.attr
+], exports.Menu.prototype, "trigger", 2);
 __decorateClass$1([
   index.attr({ mode: "boolean", attribute: "auto-dismiss" })
 ], exports.Menu.prototype, "autoDismiss", 2);

package/shared/definition29.js

@@ -598,10 +598,11 @@ var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _setupAnchor, setupAnchor_fn, _updateAnchor, updateAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _openIfClosed, _updateClickOutsideListeners, _wasOpenBeforeClick, _onClickOutsideCapture, _onClickOutside;
+var _triggerBehaviour, triggerBehaviour_get, _setupAnchor, setupAnchor_fn, _updateAnchor, updateAnchor_fn, _cleanupAnchor, cleanupAnchor_fn, _onAnchorClick, _updateClickOutsideListeners, _wasOpenBeforeClick, _onClickOutsideCapture, _onClickOutside;
 let Menu = class extends Menu$1 {
   constructor() {
     super();
+    __privateAdd(this, _triggerBehaviour);
     __privateAdd(this, _setupAnchor);
     __privateAdd(this, _updateAnchor);
     __privateAdd(this, _cleanupAnchor);
@@ -609,9 +610,15 @@ let Menu = class extends Menu$1 {
     this.placement = "bottom";
     this.autoDismiss = false;
     this.open = false;
-    __privateAdd(this, _openIfClosed, () => {
-      if (!this.open)
-        DOM.queueUpdate(() => this.open = true);
+    __privateAdd(this, _onAnchorClick, () => {
+      if (__privateGet(this, _triggerBehaviour, triggerBehaviour_get) === "off") {
+        return;
+      }
+      if (__privateGet(this, _triggerBehaviour, triggerBehaviour_get) === "legacy" && this.open) {
+        return;
+      }
+      const newValue = !this.open;
+      DOM.queueUpdate(() => this.open = newValue);
     });
     __privateAdd(this, _updateClickOutsideListeners, () => {
       document.removeEventListener("click", __privateGet(this, _onClickOutsideCapture), true);
@@ -632,15 +639,20 @@ let Menu = class extends Menu$1 {
     });
     const handleFocusOut = this.handleFocusOut;
     this.handleFocusOut = (e) => {
-      const privates = this;
-      const isSafeToCallSuper = privates.menuItems.some(
-        privates.isFocusableElement
+      const privates2 = this;
+      const isSafeToCallSuper = privates2.menuItems.some(
+        privates2.isFocusableElement
       );
       if (!isSafeToCallSuper) {
         return;
       }
       handleFocusOut(e);
     };
+    const privates = this;
+    const domChildren = privates.domChildren;
+    privates.domChildren = () => {
+      return domChildren.call(this).filter((child) => !child.hasAttribute("slot"));
+    };
   }
   autoDismissChanged(oldValue) {
     if (oldValue === void 0)
@@ -670,10 +682,24 @@ let Menu = class extends Menu$1 {
     if (newValue)
       __privateMethod(this, _setupAnchor, setupAnchor_fn).call(this, newValue);
   }
+  /**
+   * @internal
+   */
+  _onChange(e) {
+    const clickedOnNonCheckboxMenuItem = e.target instanceof HTMLElement && (e.target.role === "menuitem" || e.target.role === "menuitemradio");
+    if (__privateGet(this, _triggerBehaviour, triggerBehaviour_get) === "auto" && clickedOnNonCheckboxMenuItem) {
+      this.open = false;
+    }
+    return true;
+  }
+};
+_triggerBehaviour = new WeakSet();
+triggerBehaviour_get = function() {
+  return this.trigger ?? "legacy";
 };
 _setupAnchor = new WeakSet();
 setupAnchor_fn = function(a) {
-  a.addEventListener("click", __privateGet(this, _openIfClosed), true);
+  a.addEventListener("click", __privateGet(this, _onAnchorClick), true);
   a.setAttribute("aria-haspopup", "menu");
   __privateMethod(this, _updateAnchor, updateAnchor_fn).call(this, a);
 };
@@ -683,11 +709,11 @@ updateAnchor_fn = function(a) {
 };
 _cleanupAnchor = new WeakSet();
 cleanupAnchor_fn = function(a) {
-  a.removeEventListener("click", __privateGet(this, _openIfClosed), true);
+  a.removeEventListener("click", __privateGet(this, _onAnchorClick), true);
   a.removeAttribute("aria-hasPopup");
   a.removeAttribute("aria-expanded");
 };
-_openIfClosed = new WeakMap();
+_onAnchorClick = new WeakMap();
 _updateClickOutsideListeners = new WeakMap();
 _wasOpenBeforeClick = new WeakMap();
 _onClickOutsideCapture = new WeakMap();
@@ -698,6 +724,9 @@ __decorateClass$1([
 __decorateClass$1([
   attr({ mode: "fromView" })
 ], Menu.prototype, "placement", 2);
+__decorateClass$1([
+  attr
+], Menu.prototype, "trigger", 2);
 __decorateClass$1([
   attr({ mode: "boolean", attribute: "auto-dismiss" })
 ], Menu.prototype, "autoDismiss", 2);

package/shared/definition30.cjs

@@ -33,7 +33,7 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return index.html`
-		<template role="presentation">
+		<template role="presentation" @change="${(x, c) => x._onChange(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
 				:placement=${(x) => x.placement}

package/shared/definition30.js

@@ -31,7 +31,7 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return html`
-		<template role="presentation">
+		<template role="presentation" @change="${(x, c) => x._onChange(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
 				:placement=${(x) => x.placement}

package/shared/definition31.cjs

@@ -6,8 +6,9 @@ const affix = require('./affix.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const icon = require('./icon.cjs');
 const ref = require('./ref.cjs');
+const classNames = require('./class-names.cjs');
 
-const styles = ".control{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control{--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):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: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))}:host(:where([aria-current=true][open])) .control,:host(:not([aria-current=true])) .control{--focus-stroke-gap-color: transparent}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}\n";
+const styles = ".control{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-disclosure-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-disclosure-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-disclosure-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-disclosure-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-disclosure-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-disclosure-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-disclosure-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-disclosure-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where([aria-current]):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where([aria-current]):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([aria-current]):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control[aria-current]{color:var(--_appearance-color-text)}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.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))}:host(:where([aria-current=true][open])) .control,:host(:not([aria-current=true])) .control{--focus-stroke-gap-color: transparent}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -50,6 +51,12 @@ class NavDisclosure extends index.FoundationElement {
 __decorateClass([
   index.attr
 ], NavDisclosure.prototype, "label", 2);
+__decorateClass([
+  index.attr
+], NavDisclosure.prototype, "appearance", 2);
+__decorateClass([
+  index.attr
+], NavDisclosure.prototype, "connotation", 2);
 __decorateClass([
   index.attr({ mode: "boolean" })
 ], NavDisclosure.prototype, "open", 2);
@@ -61,11 +68,16 @@ applyMixins.applyMixins(NavDisclosure, affix.AffixIcon);
 function getAriaCurrent(ariaCurrent, open) {
   return ariaCurrent && !open;
 }
+const getClasses = ({ appearance, connotation }) => classNames.classNames(
+  "control",
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`connotation-${connotation}`, Boolean(connotation)]
+);
 const NavDisclosureTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   const iconTag = context.tagFor(icon.Icon);
   return index.html`<details class="base" ${ref.ref("details")} ?open=${(x) => x.open}>
-        <summary class="control"
+        <summary class="${getClasses}"
             role="button"
             aria-controls="disclosure-content"
 			aria-expanded="${(x) => x.open}"