@vonage/vivid 3.53.0 → 3.55.0

package/shared/definition29.js

@@ -400,7 +400,7 @@ let Menu$1 = class Menu extends FoundationElement {
                 item.setAttribute("tabindex", index === 0 ? "0" : "-1");
                 item.addEventListener("expanded-change", this.handleExpandedChanged);
                 item.addEventListener("focus", this.handleItemFocus);
-                if (item instanceof MenuItem$1) {
+                if (item instanceof MenuItem$1 || "startColumnCount" in item) {
                     item.startColumnCount = indent;
                 }
             });
@@ -568,12 +568,12 @@ __decorate([
     observable
 ], Menu$1.prototype, "items", void 0);
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}.base.two-lines:not(.disabled).selected .text-secondary{color:var(--vvd-color-neutral-800)}\n";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){pointer-events:none}.base{display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);inline-size:100%}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-menu-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-menu-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-firm: var(--vvd-menu-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-menu-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-soft: var(--vvd-menu-item-cta-soft, var(--vvd-color-cta-100));--_connotation-color-pale: var(--vvd-menu-item-cta-pale, var(--vvd-color-cta-300));--_connotation-color-dim: var(--vvd-menu-item-cta-dim, var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-menu-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-menu-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-menu-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-menu-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-menu-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-menu-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-menu-item-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-menu-item-accent-dim, var(--vvd-color-neutral-200))}.base:not(.two-lines){gap:12px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:8px;padding-inline:12px}.base.two-lines{padding:12px;gap:16px;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)) + 1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}:host(:not([role=presentation]):focus-visible) .base{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));--focus-stroke-gap-color: transparent;border-radius:8px}.icon{flex-shrink:0;font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.action,.decorative{display:flex;place-content:center}.action{color:var(--_appearance-color-text)}:host(:not([check-appearance],[aria-checked=true])) .action{color:var(--vvd-color-neutral-500)}.base.trailing .action,.base.has-meta .action{order:2}.base:not(.disabled) .decorative{color:var(--vvd-color-neutral-600)}.base.disabled .decorative{color:var(--vvd-color-neutral-200)}.base.has-meta .decorative{order:1}.chevron{order:3}.text{display:flex;overflow:hidden;flex-direction:column;gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base);-webkit-line-clamp:var(--text-primary-line-clamp, 1)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{font:var(--vvd-typography-base-condensed);-webkit-line-clamp:var(--text-secondary-line-clamp, 1)}.base.two-lines:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-600)}.base.two-lines:not(.disabled).selected .text-secondary{color:var(--vvd-color-neutral-800)}";
 
 var __defProp$1 = Object.defineProperty;
-var __getOwnPropDesc$1 = Object.getOwnPropertyDescriptor;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass$1 = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc$1(target, key) : target;
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
       result = (kind ? decorator(target, key, result) : decorator(result)) || result;
@@ -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;
 let Menu = class extends Menu$1 {
   constructor() {
     super();
+    __privateAdd(this, _triggerBehaviour);
     __privateAdd(this, _setupAnchor);
     __privateAdd(this, _updateAnchor);
     __privateAdd(this, _cleanupAnchor);
@@ -609,43 +610,39 @@ 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, _updateClickOutsideListeners, () => {
-      document.removeEventListener("click", __privateGet(this, _onClickOutsideCapture), true);
-      document.removeEventListener("click", __privateGet(this, _onClickOutside));
-      if (this.autoDismiss && this.isConnected) {
-        document.addEventListener("click", __privateGet(this, _onClickOutsideCapture), true);
-        document.addEventListener("click", __privateGet(this, _onClickOutside));
+    __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, _wasOpenBeforeClick, /* @__PURE__ */ new WeakMap());
-    __privateAdd(this, _onClickOutsideCapture, (e) => {
-      __privateGet(this, _wasOpenBeforeClick).set(e, this.open);
-    });
-    __privateAdd(this, _onClickOutside, (e) => {
-      if (!this.contains(e.target) && __privateGet(this, _wasOpenBeforeClick).get(e)) {
+    this._onFocusout = (e) => {
+      const focusTarget = e.relatedTarget;
+      const focusMovedAway = !this.contains(focusTarget) && !this._anchorEl?.contains(focusTarget);
+      if (this.autoDismiss && focusMovedAway) {
         this.open = false;
       }
-    });
+    };
     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);
     };
-  }
-  autoDismissChanged(oldValue) {
-    if (oldValue === void 0)
-      return;
-    __privateGet(this, _updateClickOutsideListeners).call(this);
+    const privates = this;
+    const domChildren = privates.domChildren;
+    privates.domChildren = () => {
+      return domChildren.call(this).filter((child) => !child.hasAttribute("slot"));
+    };
   }
   openChanged(_, newValue) {
     newValue ? this.$emit("open", void 0, { bubbles: false }) : this.$emit("close", void 0, { bubbles: false });
@@ -653,14 +650,6 @@ let Menu = class extends Menu$1 {
       __privateMethod(this, _updateAnchor, updateAnchor_fn).call(this, this._anchorEl);
     }
   }
-  connectedCallback() {
-    super.connectedCallback();
-    __privateGet(this, _updateClickOutsideListeners).call(this);
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    __privateGet(this, _updateClickOutsideListeners).call(this);
-  }
   /**
    * @internal
    */
@@ -670,10 +659,25 @@ 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.addEventListener("focusout", this._onFocusout);
   a.setAttribute("aria-haspopup", "menu");
   __privateMethod(this, _updateAnchor, updateAnchor_fn).call(this, a);
 };
@@ -683,21 +687,21 @@ 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.removeEventListener("focusout", this._onFocusout);
   a.removeAttribute("aria-hasPopup");
   a.removeAttribute("aria-expanded");
 };
-_openIfClosed = new WeakMap();
-_updateClickOutsideListeners = new WeakMap();
-_wasOpenBeforeClick = new WeakMap();
-_onClickOutsideCapture = new WeakMap();
-_onClickOutside = new WeakMap();
+_onAnchorClick = new WeakMap();
 __decorateClass$1([
   attr({ attribute: "aria-label" })
 ], Menu.prototype, "ariaLabel", 2);
 __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);
@@ -715,13 +719,12 @@ Menu = __decorateClass$1([
 ], Menu);
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -771,28 +774,28 @@ class MenuItem extends MenuItem$1 {
 }
 __decorateClass([
   attr
-], MenuItem.prototype, "text", 2);
+], MenuItem.prototype, "text");
 __decorateClass([
   attr({ attribute: "text-secondary" })
-], MenuItem.prototype, "textSecondary", 2);
+], MenuItem.prototype, "textSecondary");
 __decorateClass([
   attr
-], MenuItem.prototype, "connotation", 2);
+], MenuItem.prototype, "connotation");
 __decorateClass([
   attr({ mode: "boolean", attribute: "check-trailing" })
-], MenuItem.prototype, "checkTrailing", 2);
+], MenuItem.prototype, "checkTrailing");
 __decorateClass([
   attr({ attribute: "check-appearance" })
-], MenuItem.prototype, "checkedAppearance", 2);
+], MenuItem.prototype, "checkedAppearance");
 __decorateClass([
   observable
-], MenuItem.prototype, "metaSlottedContent", 2);
+], MenuItem.prototype, "metaSlottedContent");
 __decorateClass([
   observable
-], MenuItem.prototype, "trailingMetaSlottedContent", 2);
+], MenuItem.prototype, "trailingMetaSlottedContent");
 __decorateClass([
   observable
-], MenuItem.prototype, "slottedSubmenu", 2);
+], MenuItem.prototype, "slottedSubmenu");
 applyMixins(MenuItem, AffixIcon);
 
 const getIndicatorIcon = (x) => {

package/shared/definition3.cjs

@@ -3,16 +3,15 @@
 const index = require('./index.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:inline-block}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}\n";
+const styles = ":host{display:inline-block}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -26,21 +25,21 @@ class ActionGroup extends index.FoundationElement {
 }
 __decorateClass([
   index.attr
-], ActionGroup.prototype, "shape", 2);
+], ActionGroup.prototype, "shape");
 __decorateClass([
   index.attr
-], ActionGroup.prototype, "appearance", 2);
+], ActionGroup.prototype, "appearance");
 __decorateClass([
   index.attr({
     mode: "boolean"
   })
-], ActionGroup.prototype, "tight", 2);
+], ActionGroup.prototype, "tight");
 __decorateClass([
   index.attr()
-], ActionGroup.prototype, "role", 2);
+], ActionGroup.prototype, "role");
 __decorateClass([
   index.attr({ attribute: "aria-label" })
-], ActionGroup.prototype, "ariaLabel", 2);
+], ActionGroup.prototype, "ariaLabel");
 
 const getClasses = ({ appearance, shape, tight }) => classNames.classNames(
   "base",

package/shared/definition3.js

@@ -1,16 +1,15 @@
 import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:inline-block}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}\n";
+const styles = ":host{display:inline-block}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([role=separator]){align-self:stretch;margin-block:4px}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -24,21 +23,21 @@ class ActionGroup extends FoundationElement {
 }
 __decorateClass([
   attr
-], ActionGroup.prototype, "shape", 2);
+], ActionGroup.prototype, "shape");
 __decorateClass([
   attr
-], ActionGroup.prototype, "appearance", 2);
+], ActionGroup.prototype, "appearance");
 __decorateClass([
   attr({
     mode: "boolean"
   })
-], ActionGroup.prototype, "tight", 2);
+], ActionGroup.prototype, "tight");
 __decorateClass([
   attr()
-], ActionGroup.prototype, "role", 2);
+], ActionGroup.prototype, "role");
 __decorateClass([
   attr({ attribute: "aria-label" })
-], ActionGroup.prototype, "ariaLabel", 2);
+], ActionGroup.prototype, "ariaLabel");
 
 const getClasses = ({ appearance, shape, tight }) => classNames(
   "base",

package/shared/definition30.cjs

@@ -7,7 +7,7 @@ const anchored = require('./anchored.cjs');
 const slotted = require('./slotted.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}";
 
 const getClasses = ({
   headerSlottedContent,
@@ -33,7 +33,9 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return index.html`
-		<template role="presentation">
+		<template role="presentation"
+							@change="${(x, c) => x._onChange(c.event)}"
+							@focusout="${(x, c) => x._onFocusout(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
 				:placement=${(x) => x.placement}

package/shared/definition30.js

@@ -5,7 +5,7 @@ import { a as anchorSlotTemplateFactory } from './anchored.js';
 import { s as slotted } from './slotted.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}\n";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.base{display:flex;overflow:hidden auto;box-sizing:border-box;flex-direction:column;gap:8px;inline-size:max-content;max-block-size:var(--menu-block-size, 408px);max-inline-size:var(--menu-max-inline-size);min-inline-size:var(--menu-min-inline-size);padding-block:8px}::slotted(a){color:var(--vvd-color-canvas-text);text-decoration:none}::slotted(a[role=menuitem]: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));--focus-stroke-gap-color: transparent;display:block;border-radius:8px}.header{padding-block-start:8px;padding-inline:16px}.hide-header .header{display:none}.body{display:flex;flex-direction:column;row-gap:1px}.hide-body .body{display:none}.action-items{display:flex;justify-content:flex-end;gap:8px;padding-inline:8px}.hide-actions .action-items{display:none}";
 
 const getClasses = ({
   headerSlottedContent,
@@ -31,7 +31,9 @@ const MenuTemplate = (context) => {
     x.open = state;
   }
   return html`
-		<template role="presentation">
+		<template role="presentation"
+							@change="${(x, c) => x._onChange(c.event)}"
+							@focusout="${(x, c) => x._onFocusout(c.event)}">
 			${anchorSlotTemplate}
 			<${popupTag}
 				:placement=${(x) => x.placement}

package/shared/definition31.cjs

@@ -6,17 +6,17 @@ 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}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -49,23 +49,34 @@ class NavDisclosure extends index.FoundationElement {
 }
 __decorateClass([
   index.attr
-], NavDisclosure.prototype, "label", 2);
+], NavDisclosure.prototype, "label");
+__decorateClass([
+  index.attr
+], NavDisclosure.prototype, "appearance");
+__decorateClass([
+  index.attr
+], NavDisclosure.prototype, "connotation");
 __decorateClass([
   index.attr({ mode: "boolean" })
-], NavDisclosure.prototype, "open", 2);
+], NavDisclosure.prototype, "open");
 __decorateClass([
   index.attr({ attribute: "aria-current" })
-], NavDisclosure.prototype, "ariaCurrent", 2);
+], NavDisclosure.prototype, "ariaCurrent");
 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}"

package/shared/definition31.js

@@ -4,17 +4,17 @@ import { A as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from
 import { a as applyMixins } from './apply-mixins.js';
 import { I as Icon } from './icon.js';
 import { r as ref } from './ref.js';
+import { c as classNames } from './class-names.js';
 
-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}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -47,23 +47,34 @@ class NavDisclosure extends FoundationElement {
 }
 __decorateClass([
   attr
-], NavDisclosure.prototype, "label", 2);
+], NavDisclosure.prototype, "label");
+__decorateClass([
+  attr
+], NavDisclosure.prototype, "appearance");
+__decorateClass([
+  attr
+], NavDisclosure.prototype, "connotation");
 __decorateClass([
   attr({ mode: "boolean" })
-], NavDisclosure.prototype, "open", 2);
+], NavDisclosure.prototype, "open");
 __decorateClass([
   attr({ attribute: "aria-current" })
-], NavDisclosure.prototype, "ariaCurrent", 2);
+], NavDisclosure.prototype, "ariaCurrent");
 applyMixins(NavDisclosure, AffixIcon);
 
 function getAriaCurrent(ariaCurrent, open) {
   return ariaCurrent && !open;
 }
+const getClasses = ({ appearance, connotation }) => classNames(
+  "control",
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`connotation-${connotation}`, Boolean(connotation)]
+);
 const NavDisclosureTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const iconTag = context.tagFor(Icon);
   return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
-        <summary class="control"
+        <summary class="${getClasses}"
             role="button"
             aria-controls="disclosure-content"
 			aria-expanded="${(x) => x.open}"

package/shared/definition32.cjs

@@ -7,7 +7,7 @@ const textAnchor = require('./text-anchor.cjs');
 const applyMixins = require('./apply-mixins.cjs');
 const textAnchor_template = require('./text-anchor.template.cjs');
 
-const styles = ".control{display:inline-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);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)));text-decoration:none;vertical-align:middle}.control{--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-item-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.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.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(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}\n";
+const styles = ".control{display:inline-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);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)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-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.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.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(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
 
 class NavItem extends textAnchor.TextAnchor {
   getBodyTemplate() {

package/shared/definition32.js

@@ -5,7 +5,7 @@ import { T as TextAnchor } from './text-anchor.js';
 import { a as applyMixins } from './apply-mixins.js';
 import { t as textAnchorTemplate } from './text-anchor.template.js';
 
-const styles = ".control{display:inline-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);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)));text-decoration:none;vertical-align:middle}.control{--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-nav-item-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.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.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(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}\n";
+const styles = ".control{display:inline-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);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)));text-decoration:none;vertical-align:middle}.control[aria-current]{color:var(--_appearance-color-text)}.control:not([aria-current]){color:var(--vvd-color-canvas-text)}.control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-item-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-item-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-item-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-item-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-item-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-item-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-item-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-item-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-item-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-item-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-item-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.icon-only{display:flex;block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));place-content:center}.control:not(.icon-only){padding-block:10px;padding-inline:16px}.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(:not([aria-current=page])) .control{--focus-stroke-gap-color: transparent}slot[name=icon]{font-size:20px;line-height:1}";
 
 class NavItem extends TextAnchor {
   getBodyTemplate() {

package/shared/definition33.cjs

@@ -2,7 +2,7 @@
 
 const index = require('./index.cjs');
 
-const styles = "nav{display:flex;flex-direction:column;gap:4px}\n";
+const styles = "nav{display:flex;flex-direction:column;gap:4px}";
 
 class Nav extends index.FoundationElement {
 }

package/shared/definition33.js

@@ -1,6 +1,6 @@
 import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
 
-const styles = "nav{display:flex;flex-direction:column;gap:4px}\n";
+const styles = "nav{display:flex;flex-direction:column;gap:4px}";
 
 class Nav extends FoundationElement {
 }