@vonage/vivid 4.0.0 → 4.2.0

package/custom-elements.json

@@ -483,6 +483,14 @@
               "name": "--vvd-alert-warning-primary-text",
               "default": "var(--vvd-color-canvas-text)"
             },
+            {
+              "name": "--vvd-alert-announcement-primary",
+              "default": "var(--vvd-color-announcement-500)"
+            },
+            {
+              "name": "--vvd-alert-announcement-primary-text",
+              "default": "var(--vvd-color-canvas)"
+            },
             {
               "name": "--vvd-alert-accent-primary",
               "default": "var(--vvd-color-canvas-text)"
@@ -9027,9 +9035,28 @@
               "kind": "method",
               "name": "#expandedChange"
             },
+            {
+              "kind": "field",
+              "name": "#handleMenuItemKeyDown",
+              "privacy": "private"
+            },
+            {
+              "kind": "field",
+              "name": "#syntheticClickEvents",
+              "privacy": "private",
+              "default": "new WeakSet<Event>()"
+            },
+            {
+              "kind": "method",
+              "name": "#emitSyntheticClick"
+            },
             {
               "kind": "field",
               "name": "updateSubmenu"
+            },
+            {
+              "kind": "field",
+              "name": "handleMenuItemKeyDown"
             }
           ],
           "events": [
@@ -9810,6 +9837,18 @@
               "name": "--vvd-note-warning-fierce",
               "default": "var(--vvd-color-warning-700)"
             },
+            {
+              "name": "--vvd-note-announcement-intermediate",
+              "default": "var(--vvd-color-announcement-500)"
+            },
+            {
+              "name": "--vvd-note-announcement-faint",
+              "default": "var(--vvd-color-announcement-50)"
+            },
+            {
+              "name": "--vvd-note-announcement-fierce",
+              "default": "var(--vvd-color-announcement-700)"
+            },
             {
               "name": "--vvd-note-accent-intermediate",
               "default": "var(--vvd-color-neutral-500)"
@@ -12325,6 +12364,10 @@
                   }
                 }
               ]
+            },
+            {
+              "kind": "method",
+              "name": "formResetCallback"
             }
           ],
           "events": [

package/lib/alert/alert.d.ts

@@ -2,7 +2,7 @@ import { FoundationElement } from '@microsoft/fast-foundation';
 import { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
 import { AffixIcon } from '../../shared/patterns/affix';
-export type AlertConnotation = Connotation.Accent | Connotation.Information | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export type AlertConnotation = Connotation.Accent | Connotation.Information | Connotation.Success | Connotation.Warning | Connotation.Announcement | Connotation.Alert;
 export type AlertPlacement = 'top' | 'top-start' | 'top-end' | 'bottom' | 'bottom-start' | 'bottom-end';
 export type AlertStrategy = 'fixed' | 'static';
 export declare class Alert extends FoundationElement {

package/lib/note/note.d.ts

@@ -1,7 +1,7 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import type { Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns';
-export type NoteConnotation = Connotation.Accent | Connotation.Information | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export type NoteConnotation = Connotation.Accent | Connotation.Information | Connotation.Success | Connotation.Warning | Connotation.Announcement | Connotation.Alert;
 export declare class Note extends FoundationElement {
     headline?: string;
     connotation?: NoteConnotation;

package/lib/number-field/number-field.d.ts

@@ -28,7 +28,6 @@ export declare class NumberField extends FormAssociatedNumberField {
     appearance?: NumberFieldAppearance;
     shape?: NumberFieldShape;
     autoComplete?: string;
-    attributeChangedCallback(name: string, previous: string, next: string): void;
 }
 export interface NumberField extends AffixIcon, ErrorText, FormElement, FormElementCharCount, FormElementHelperText, FormElementSuccessText, DelegatesARIATextbox, Localized {
 }

package/lib/select/select.d.ts

@@ -11,6 +11,7 @@ export declare class Select extends FoundationSelect {
     connectedCallback(): void;
     get displayValue(): string;
     setDefaultSelectedOption(): void;
+    formResetCallback(): void;
 }
 export interface Select extends AffixIconWithTrailing, FormElement, FormElementHelperText, ErrorText, FormElementSuccessText {
 }

package/package.json

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

package/shared/definition17.cjs

@@ -7,8 +7,8 @@ const repeat = require('./repeat.cjs');
 const slotted = require('./slotted.cjs');
 const children = require('./children.cjs');
 const icon = require('./icon.cjs');
-const keyCodes$1 = require('./key-codes2.cjs');
 const when = require('./when.cjs');
+const keyCodes$1 = require('./key-codes2.cjs');
 
 /**
  * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events

package/shared/definition17.js

@@ -5,8 +5,8 @@ import { R as RepeatDirective } from './repeat.js';
 import { s as slotted, e as elements } from './slotted.js';
 import { c as children } from './children.js';
 import { I as Icon } from './icon.js';
-import { b as keyEnter$1, g as keySpace } from './key-codes2.js';
 import { w as when } from './when.js';
+import { b as keyEnter$1, g as keySpace } from './key-codes2.js';
 
 /**
  * This set of exported strings reference https://developer.mozilla.org/en-US/docs/Web/Events

package/shared/definition29.cjs

@@ -2,6 +2,7 @@
 
 const index = require('./index.cjs');
 const definition = require('./definition27.cjs');
+const keyCodes$1 = require('./key-codes2.cjs');
 const affix = require('./affix.cjs');
 const anchored = require('./anchored.cjs');
 const startEnd = require('./start-end.cjs');
@@ -744,8 +745,38 @@ class MenuItem extends MenuItem$1 {
     super();
     this.checkTrailing = false;
     this.#submenuArray = [];
+    this.#handleMenuItemKeyDown = (e) => {
+      if (e.defaultPrevented) {
+        return false;
+      }
+      switch (e.key) {
+        case keyCodes$1.keyEnter:
+        case keyCodes$1.keySpace:
+          this.invoke();
+          if (!this.disabled) {
+            this.#emitSyntheticClick();
+          }
+          return false;
+        case keyCodes$1.keyArrowRight:
+          this.expandAndFocus();
+          if (this.hasSubmenu) {
+            this.#emitSyntheticClick();
+          }
+          return false;
+        case keyCodes$1.keyArrowLeft:
+          if (this.expanded) {
+            this.expanded = false;
+            this.focus();
+            this.#emitSyntheticClick();
+            return false;
+          }
+      }
+      return true;
+    };
+    this.#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
     this.updateSubmenu = () => this.#updateSubmenu();
     this.addEventListener("expanded-change", this.#expandedChange);
+    this.handleMenuItemKeyDown = this.#handleMenuItemKeyDown;
   }
   #submenuArray;
   /**
@@ -773,6 +804,22 @@ class MenuItem extends MenuItem$1 {
       this.submenu.open = this.expanded;
     }
   }
+  #handleMenuItemKeyDown;
+  #syntheticClickEvents;
+  /**
+   * @internal
+   */
+  _isSyntheticClickEvent(event) {
+    return this.#syntheticClickEvents.has(event);
+  }
+  #emitSyntheticClick() {
+    const mouseEvent = new MouseEvent("click", {
+      bubbles: true,
+      composed: true
+    });
+    this.#syntheticClickEvents.add(mouseEvent);
+    this.dispatchEvent(mouseEvent);
+  }
 }
 __decorateClass([
   index.attr
@@ -833,6 +880,9 @@ const getClasses = ({
   ["has-meta", Boolean(metaSlottedContent?.length)]
 );
 function handleClick(x, { event }) {
+  if (x._isSyntheticClickEvent(event)) {
+    return true;
+  }
   x.handleMenuItemClick(event);
   return x.role === MenuItemRole.presentation;
 }

package/shared/definition29.js

@@ -1,5 +1,6 @@
 import { F as FoundationElement, D as DOM, _ as __decorate, a as attr, o as observable, h as html, r as registerFactory } from './index.js';
 import { a as iconRegistries } from './definition27.js';
+import { k as keyArrowLeft$1, a as keyArrowRight$1, g as keySpace$1, b as keyEnter$1 } from './key-codes2.js';
 import { A as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
 import { b as anchored } from './anchored.js';
 import { S as StartEnd } from './start-end.js';
@@ -742,8 +743,38 @@ class MenuItem extends MenuItem$1 {
     super();
     this.checkTrailing = false;
     this.#submenuArray = [];
+    this.#handleMenuItemKeyDown = (e) => {
+      if (e.defaultPrevented) {
+        return false;
+      }
+      switch (e.key) {
+        case keyEnter$1:
+        case keySpace$1:
+          this.invoke();
+          if (!this.disabled) {
+            this.#emitSyntheticClick();
+          }
+          return false;
+        case keyArrowRight$1:
+          this.expandAndFocus();
+          if (this.hasSubmenu) {
+            this.#emitSyntheticClick();
+          }
+          return false;
+        case keyArrowLeft$1:
+          if (this.expanded) {
+            this.expanded = false;
+            this.focus();
+            this.#emitSyntheticClick();
+            return false;
+          }
+      }
+      return true;
+    };
+    this.#syntheticClickEvents = /* @__PURE__ */ new WeakSet();
     this.updateSubmenu = () => this.#updateSubmenu();
     this.addEventListener("expanded-change", this.#expandedChange);
+    this.handleMenuItemKeyDown = this.#handleMenuItemKeyDown;
   }
   #submenuArray;
   /**
@@ -771,6 +802,22 @@ class MenuItem extends MenuItem$1 {
       this.submenu.open = this.expanded;
     }
   }
+  #handleMenuItemKeyDown;
+  #syntheticClickEvents;
+  /**
+   * @internal
+   */
+  _isSyntheticClickEvent(event) {
+    return this.#syntheticClickEvents.has(event);
+  }
+  #emitSyntheticClick() {
+    const mouseEvent = new MouseEvent("click", {
+      bubbles: true,
+      composed: true
+    });
+    this.#syntheticClickEvents.add(mouseEvent);
+    this.dispatchEvent(mouseEvent);
+  }
 }
 __decorateClass([
   attr
@@ -831,6 +878,9 @@ const getClasses = ({
   ["has-meta", Boolean(metaSlottedContent?.length)]
 );
 function handleClick(x, { event }) {
+  if (x._isSyntheticClickEvent(event)) {
+    return true;
+  }
   x.handleMenuItemClick(event);
   return x.role === MenuItemRole.presentation;
 }

package/shared/definition34.cjs

@@ -8,7 +8,7 @@ const applyMixins = require('./apply-mixins.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
+const styles = ".base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition34.js

@@ -6,7 +6,7 @@ import { a as applyMixins } from './apply-mixins.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
+const styles = ".base{display:flex;align-items:flex-start;padding:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-intermediate: var(--vvd-note-success-intermediate, var(--vvd-color-success-500));--_connotation-color-faint: var(--vvd-note-success-faint, var(--vvd-color-success-50));--_connotation-color-fierce: var(--vvd-note-success-fierce, var(--vvd-color-success-700))}.base.connotation-information{--_connotation-color-intermediate: var(--vvd-note-information-intermediate, var(--vvd-color-information-500));--_connotation-color-faint: var(--vvd-note-information-faint, var(--vvd-color-information-50));--_connotation-color-fierce: var(--vvd-note-information-fierce, var(--vvd-color-information-700))}.base.connotation-alert{--_connotation-color-intermediate: var(--vvd-note-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-faint: var(--vvd-note-alert-faint, var(--vvd-color-alert-50));--_connotation-color-fierce: var(--vvd-note-alert-fierce, var(--vvd-color-alert-700))}.base.connotation-warning{--_connotation-color-intermediate: var(--vvd-note-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-faint: var(--vvd-note-warning-faint, var(--vvd-color-warning-50));--_connotation-color-fierce: var(--vvd-note-warning-fierce, var(--vvd-color-warning-700))}.base.connotation-announcement{--_connotation-color-intermediate: var(--vvd-note-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-faint: var(--vvd-note-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-fierce: var(--vvd-note-announcement-fierce, var(--vvd-color-announcement-700))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-intermediate: var(--vvd-note-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-note-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-note-accent-fierce, var(--vvd-color-neutral-700))}.base{--_appearance-color-text: var(--_connotation-color-fierce);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-intermediate)}@supports (contain: content){.base{contain:content}}@supports not (contain: content){.base{overflow:hidden}}slot[name=icon]{color:var(--_appearance-color-outline);font-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.text{display:flex;min-height:24px;flex-direction:column;flex-grow:1;align-items:flex-start;justify-content:center;gap:4px;text-align:start}.text .headline{font:var(--vvd-typography-base-bold)}.text .message{font:var(--vvd-typography-base)}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {

package/shared/definition35.cjs

@@ -55,10 +55,6 @@ const STEP_DIRECTION = {
   up: 1,
   down: -1
 };
-const PROXY_REFLECTED_ATTRIBUTES = {
-  max: true,
-  min: true
-};
 function makeStep(element, direction) {
   const value = parseFloat(element.value);
   const stepUpValue = !isNaN(value) ? value + direction * element.step : element.min > 0 ? element.min : element.max < 0 ? element.max : !element.min ? direction * element.step : 0;
@@ -109,6 +105,8 @@ let NumberField = class extends FormAssociatedNumberField {
    */
   maxChanged(_, next) {
     this.max = Math.max(next, this.min ?? next);
+    this.proxy.max = this.max.toString();
+    this.validate();
   }
   /**
    * Ensures that the min is less than the max and that the value
@@ -118,6 +116,8 @@ let NumberField = class extends FormAssociatedNumberField {
    */
   minChanged(_, next) {
     this.min = Math.min(next, this.max ?? next);
+    this.proxy.min = this.min.toString();
+    this.validate();
   }
   /**
    * The value property, typed as a number.
@@ -238,12 +238,6 @@ let NumberField = class extends FormAssociatedNumberField {
     }
     return true;
   }
-  attributeChangedCallback(name, previous, next) {
-    super.attributeChangedCallback(name, previous, next);
-    if (PROXY_REFLECTED_ATTRIBUTES[name]) {
-      this.proxy.setAttribute(name, next);
-    }
-  }
 };
 _valueToPresentationValue = new WeakSet();
 valueToPresentationValue_fn = function(value) {

package/shared/definition35.js

@@ -53,10 +53,6 @@ const STEP_DIRECTION = {
   up: 1,
   down: -1
 };
-const PROXY_REFLECTED_ATTRIBUTES = {
-  max: true,
-  min: true
-};
 function makeStep(element, direction) {
   const value = parseFloat(element.value);
   const stepUpValue = !isNaN(value) ? value + direction * element.step : element.min > 0 ? element.min : element.max < 0 ? element.max : !element.min ? direction * element.step : 0;
@@ -107,6 +103,8 @@ let NumberField = class extends FormAssociatedNumberField {
    */
   maxChanged(_, next) {
     this.max = Math.max(next, this.min ?? next);
+    this.proxy.max = this.max.toString();
+    this.validate();
   }
   /**
    * Ensures that the min is less than the max and that the value
@@ -116,6 +114,8 @@ let NumberField = class extends FormAssociatedNumberField {
    */
   minChanged(_, next) {
     this.min = Math.min(next, this.max ?? next);
+    this.proxy.min = this.min.toString();
+    this.validate();
   }
   /**
    * The value property, typed as a number.
@@ -236,12 +236,6 @@ let NumberField = class extends FormAssociatedNumberField {
     }
     return true;
   }
-  attributeChangedCallback(name, previous, next) {
-    super.attributeChangedCallback(name, previous, next);
-    if (PROXY_REFLECTED_ATTRIBUTES[name]) {
-      this.proxy.setAttribute(name, next);
-    }
-  }
 };
 _valueToPresentationValue = new WeakSet();
 valueToPresentationValue_fn = function(value) {

package/shared/definition4.cjs

@@ -13,7 +13,7 @@ const button = require('./button.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
+const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -30,6 +30,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [enums.Connotation.Information, "info-line"],
   [enums.Connotation.Success, "check-circle-line"],
   [enums.Connotation.Warning, "warning-line"],
+  [enums.Connotation.Announcement, "sparkles-line"],
   [enums.Connotation.Alert, "error-line"]
 ]);
 class Alert extends index.FoundationElement {

package/shared/definition4.js

@@ -11,7 +11,7 @@ import { B as Button$1 } from './button.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
+const styles = ".control{position:fixed;z-index:10;border-radius:8px;inline-size:max-content;inset-block-end:0;inset-inline:0 0;margin-block:16px;margin-inline:auto;max-inline-size:var(--alert-max-inline-size, fit-content);min-inline-size:var(--alert-min-inline-size, 420px);transition:opacity .15s cubic-bezier(0,0,.2,1) 0ms,transform .15s cubic-bezier(0,0,.2,1) 0ms}.control.placement-top,.control.placement-top-start,.control.placement-top-end{inset-block:0 auto}.control.placement-top-start,.control.placement-bottom-start{right:auto;inset-inline-end:auto;margin-inline:16px}.control.placement-top-end,.control.placement-bottom-end{inset-inline-start:auto;margin-inline:16px}.control:where(.strategy-static){position:static;margin:0;inline-size:auto}.control:not(.open){opacity:0;transform:scale(.8)}.control.open{opacity:1;transform:scale(1)}@media (width <= 768px){.control{min-inline-size:var(--alert-min-inline-size, auto)}}.base{display:flex;align-items:center;padding:16px;border-radius:8px;background-color:var(--vvd-color-neutral-50);color:var(--vvd-color-canvas-text);column-gap:16px}.base.connotation-success{--_connotation-color-primary: var(--vvd-alert-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-alert-success-primary-text, var(--vvd-color-canvas))}.base.connotation-information{--_connotation-color-primary: var(--vvd-alert-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-alert-information-primary-text, var(--vvd-color-canvas))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-alert-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-alert-alert-primary-text, var(--vvd-color-canvas))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-alert-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-alert-warning-primary-text, var(--vvd-color-canvas-text))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-alert-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-alert-announcement-primary-text, var(--vvd-color-canvas))}.base:not(.connotation-success,.connotation-information,.connotation-alert,.connotation-warning,.connotation-announcement){--_connotation-color-primary: var(--vvd-alert-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-alert-accent-primary-text, var(--vvd-color-canvas))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base .alert-text{margin-inline-end:auto}.base .alert-text .headline{font:var(--vvd-typography-base-bold);margin-block-end:4px}.base .alert-text .main-text{font:var(--vvd-typography-base)}.base slot[name=icon]{flex-shrink:0;color:var(--_appearance-color-fill);font-size:24px;line-height:1}.base .dismiss-button{border-left:1px solid var(--vvd-color-neutral-200);padding-inline-start:8px}";
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -28,6 +28,7 @@ const connotationIconMap = /* @__PURE__ */ new Map([
   [Connotation.Information, "info-line"],
   [Connotation.Success, "check-circle-line"],
   [Connotation.Warning, "warning-line"],
+  [Connotation.Announcement, "sparkles-line"],
   [Connotation.Alert, "error-line"]
 ]);
 class Alert extends FoundationElement {

package/shared/definition43.cjs

@@ -516,7 +516,7 @@ index.__decorate([
 applyMixins.applyMixins(DelegatesARIASelect, listbox.DelegatesARIAListbox);
 applyMixins.applyMixins(Select$1, startEnd.StartEnd, DelegatesARIASelect);
 
-const styles = ":host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;border-radius:var(--_select-control-border-radius);background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}:host([placeholder]) .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
+const styles = ":host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;border-radius:var(--_select-control-border-radius);background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -567,6 +567,12 @@ let Select = class extends Select$1 {
     this.proxy.value = this.value;
     this.validate();
   }
+  formResetCallback() {
+    super.formResetCallback();
+    if (this.placeholder) {
+      this.selectedIndex = -1;
+    }
+  }
 };
 __decorateClass([
   index.observable
@@ -609,7 +615,9 @@ const getStateClasses = ({
   appearance,
   metaSlottedContent,
   errorValidationMessage,
-  successText
+  successText,
+  placeholder,
+  value
 }) => classNames.classNames(
   ["disabled", disabled],
   [`appearance-${appearance}`, Boolean(appearance)],
@@ -617,7 +625,8 @@ const getStateClasses = ({
   ["has-meta", Boolean(metaSlottedContent?.length)],
   ["error", Boolean(errorValidationMessage)],
   ["success", !!successText],
-  ["has-meta", Boolean(metaSlottedContent?.length)]
+  ["has-meta", Boolean(metaSlottedContent?.length)],
+  ["shows-placeholder", Boolean(placeholder) && !value]
 );
 function renderLabel() {
   return index.html` <label for="control" class="label" id="label">

package/shared/definition43.js

@@ -514,7 +514,7 @@ __decorate([
 applyMixins(DelegatesARIASelect, DelegatesARIAListbox);
 applyMixins(Select$1, StartEnd, DelegatesARIASelect);
 
-const styles = ":host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;border-radius:var(--_select-control-border-radius);background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}:host([placeholder]) .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
+const styles = ":host(:focus-visible){outline:none}:host{display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600);--focus-stroke-gap-color: transparent}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base)}.control{display:flex;align-items:center;justify-content:space-between;border-radius:var(--_select-control-border-radius);background-color:var(--_appearance-color-fill);block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:8px;padding-inline:16px;transition:box-shadow .2s,background-color .2s}.control{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-intermediate)}.control.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--_connotation-color-fierce)}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.control:where(.disabled,:disabled).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.readonly):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.control:where(.readonly):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.error):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.control:where(.error):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.control:where(.success):where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.control:where(.success):where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-select-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-select-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-select-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-select-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-select-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-select-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-select-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-select-accent-fierce, var(--vvd-color-neutral-700))}.control-wrapper{position:relative}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}.control:not(.shape-pill){--_select-control-border-radius: 8px}.control.shape-pill{--_select-control-border-radius: 24px}:host(:focus-visible) .control{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))}.listbox{display:flex;max-height:var(--select-height, 408px);flex-direction:column;padding:4px;gap:2px;overflow-y:auto}:host([multiple]:focus-visible) .listbox{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));border-radius:8px}.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([aria-expanded=true]) .chevron{transform:rotate(180deg)}.selected-value{display:flex;overflow:hidden;flex-grow:1;align-items:center;column-gap:12px;white-space:nowrap}.selected-value .text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis}.control.shows-placeholder .selected-value .text{color:var(--vvd-color-neutral-600)}.selected-value slot[name=icon]{flex:0 0 20px;font-size:20px;line-height:1}.control.has-meta .selected-value{padding-inline-end:8px}.feedback-wrapper{display:contents}::part(popup-base){inline-size:max-content;min-inline-size:var(--_select-fixed-width, 100%)}:host([multiple]) ::part(popup-base){position:static}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -565,6 +565,12 @@ let Select = class extends Select$1 {
     this.proxy.value = this.value;
     this.validate();
   }
+  formResetCallback() {
+    super.formResetCallback();
+    if (this.placeholder) {
+      this.selectedIndex = -1;
+    }
+  }
 };
 __decorateClass([
   observable
@@ -607,7 +613,9 @@ const getStateClasses = ({
   appearance,
   metaSlottedContent,
   errorValidationMessage,
-  successText
+  successText,
+  placeholder,
+  value
 }) => classNames(
   ["disabled", disabled],
   [`appearance-${appearance}`, Boolean(appearance)],
@@ -615,7 +623,8 @@ const getStateClasses = ({
   ["has-meta", Boolean(metaSlottedContent?.length)],
   ["error", Boolean(errorValidationMessage)],
   ["success", !!successText],
-  ["has-meta", Boolean(metaSlottedContent?.length)]
+  ["has-meta", Boolean(metaSlottedContent?.length)],
+  ["shows-placeholder", Boolean(placeholder) && !value]
 );
 function renderLabel() {
   return html` <label for="control" class="label" id="label">

package/shared/definition5.cjs

@@ -318,10 +318,11 @@ const AudioPlayerTemplate = (context) => {
 				${when.when((x) => !x.notime, renderTimestamp())}
 			</div>
 			${renderSlider(context)}
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss>
-				${when.when(
+			${when.when(
     (x) => Boolean(x.playbackRates),
-    index.html`<${buttonTag} id="playback-open-button"
+    index.html`
+			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu">
+				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"
 							  icon="playback-speed-line"
@@ -329,18 +330,19 @@ const AudioPlayerTemplate = (context) => {
 							  size='condensed'
 							  connotation="${(x) => x.connotation}"
 							  ?disabled="${(x) => x.disabled || !x.duration}"
-				></${buttonTag}>`
-  )}
+				></${buttonTag}>
+
 				${repeat.repeat(
-    (x) => x.playbackRates ? videoPlayer.getPlaybackRatesArray(x.playbackRates) : [],
-    index.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
-                          role="menuitemradio"
-												 class="playback-rate"
-												 text="${(x) => x}"
-												 check-appearance="tick-only"
-												 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
+      (x) => videoPlayer.getPlaybackRatesArray(x.playbackRates),
+      index.html`<${menuItemTag} @click="${handlePlaybackRateClick}"
+																			 role="menuitemradio"
+																			 class="playback-rate"
+																			 text="${(x) => x}"
+																			 check-appearance="tick-only"
+																			 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
+    )}
+			</${menuTag}>`
   )}
-			</${menuTag}>
 		</div>
 	</div>`;
 };

package/shared/definition5.js

@@ -316,10 +316,11 @@ const AudioPlayerTemplate = (context) => {
 				${when((x) => !x.notime, renderTimestamp())}
 			</div>
 			${renderSlider(context)}
-			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss>
-				${when(
+			${when(
     (x) => Boolean(x.playbackRates),
-    html`<${buttonTag} id="playback-open-button"
+    html`
+			<${menuTag} class="playback-rates" trigger="auto" placement="top-start" auto-dismiss id="playback-menu">
+				<${buttonTag} id="playback-open-button"
 							  class="playback-button"
 							  slot="anchor"
 							  icon="playback-speed-line"
@@ -327,18 +328,19 @@ const AudioPlayerTemplate = (context) => {
 							  size='condensed'
 							  connotation="${(x) => x.connotation}"
 							  ?disabled="${(x) => x.disabled || !x.duration}"
-				></${buttonTag}>`
-  )}
+				></${buttonTag}>
+
 				${repeat(
-    (x) => x.playbackRates ? getPlaybackRatesArray(x.playbackRates) : [],
-    html`<${menuItemTag} @click="${handlePlaybackRateClick}"
-                          role="menuitemradio"
-												 class="playback-rate"
-												 text="${(x) => x}"
-												 check-appearance="tick-only"
-												 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
+      (x) => getPlaybackRatesArray(x.playbackRates),
+      html`<${menuItemTag} @click="${handlePlaybackRateClick}"
+																			 role="menuitemradio"
+																			 class="playback-rate"
+																			 text="${(x) => x}"
+																			 check-appearance="tick-only"
+																			 ?checked="${isMenuItemChekced}"></${menuItemTag}>`
+    )}
+			</${menuTag}>`
   )}
-			</${menuTag}>
 		</div>
 	</div>`;
 };

package/shared/definition7.cjs

@@ -33,7 +33,7 @@ __decorateClass([
 ], Badge.prototype, "text");
 applyMixins.applyMixins(Badge, affix.AffixIconWithTrailing);
 
-const styles = ":host{display:inline-block}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
+const styles = ":host{display:inline-block}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
 
 const getClasses = ({
   connotation,

package/shared/definition7.js

@@ -31,7 +31,7 @@ __decorateClass([
 ], Badge.prototype, "text");
 applyMixins(Badge, AffixIconWithTrailing);
 
-const styles = ":host{display:inline-block}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
+const styles = ":host{display:inline-block}.base{--_badge-block-size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_badge-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-condensed-bold);inline-size:100%;padding-inline:8px;vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-badge-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-badge-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-cta-intermediate, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-badge-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-badge-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-badge-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-badge-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm-all: var(--vvd-badge-cta-firm-all, var(--vvd-color-cta-600))}.base.connotation-success{--_connotation-color-primary: var(--vvd-badge-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-badge-success-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-success-intermediate, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-badge-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-badge-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-badge-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-badge-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm-all: var(--vvd-badge-success-firm-all, var(--vvd-color-success-600))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-badge-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-badge-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-badge-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-badge-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-badge-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-badge-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm-all: var(--vvd-badge-alert-firm-all, var(--vvd-color-alert-600))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-badge-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-badge-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-badge-warning-intermediate, var(--vvd-color-warning-300));--_connotation-color-soft: var(--vvd-badge-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-badge-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-badge-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-badge-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm-all: var(--vvd-badge-warning-firm-all, var(--vvd-color-warning-600))}.base.connotation-information{--_connotation-color-primary: var(--vvd-badge-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-badge-information-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-information-intermediate, var(--vvd-color-information-500));--_connotation-color-soft: var(--vvd-badge-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-badge-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-badge-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-badge-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm-all: var(--vvd-badge-information-firm-all, var(--vvd-color-information-600))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-badge-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-badge-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-announcement-intermediate, var(--vvd-color-announcement-500));--_connotation-color-soft: var(--vvd-badge-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-badge-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-badge-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-badge-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm-all: var(--vvd-badge-announcement-firm-all, var(--vvd-color-announcement-600))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-badge-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-badge-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-intermediate: var(--vvd-badge-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-soft: var(--vvd-badge-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-badge-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-badge-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-badge-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm-all: var(--vvd-badge-accent-firm-all, var(--vvd-color-neutral-600))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:not(.icon-only){max-inline-size:100%}.base.icon-only{contain:size;padding-inline:0;place-content:center}@supports (aspect-ratio: 1){.base.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.base.icon-only{inline-size:var(--_badge-block-size)}}.text{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}slot[name=icon]{flex-shrink:0;font-size:calc(var(--_badge-block-size) / 1.6667);line-height:1}.icon-trailing slot[name=icon]{display:flex;order:1}";
 
 const getClasses = ({
   connotation,

package/shared/index2.cjs

@@ -220,7 +220,7 @@ function errorText(constructor) {
       this.#blockValidateCalls = true;
     }
     #clearCustomErrorAndRevalidate() {
-      this.setValidity({ customError: false }, "", this.control);
+      this.setValidity({}, "", this.control);
       this.#blockValidateCalls = false;
       this.validate();
     }

package/shared/index2.js

@@ -218,7 +218,7 @@ function errorText(constructor) {
       this.#blockValidateCalls = true;
     }
     #clearCustomErrorAndRevalidate() {
-      this.setValidity({ customError: false }, "", this.control);
+      this.setValidity({}, "", this.control);
       this.#blockValidateCalls = false;
       this.validate();
     }

package/styles/core/all.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/theme.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 .vvd-root {
   color-scheme: var(--vvd-color-scheme);

package/styles/core/typography.css

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 .vvd-root:root {
   --vvd-size-font-scale-base: 1rem;

package/styles/tokens/theme-dark.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

package/styles/tokens/theme-light.css

@@ -1,18 +1,18 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 @property --vvd-size-density {
   syntax: "<integer>";

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

@@ -1,6 +1,6 @@
 /**
  * Do not edit directly
- * Generated on Tue, 02 Jul 2024 08:24:07 GMT
+ * Generated on Thu, 11 Jul 2024 10:35:07 GMT
  */
 .vvd-root, ::part(vvd-root),
 .vvd-theme-alternate, ::part(vvd-theme-alternate) {

package/vivid.api.json

@@ -356,6 +356,15 @@
               "kind": "Content",
               "text": " | "
             },
+            {
+              "kind": "Reference",
+              "text": "Connotation.Announcement",
+              "canonicalReference": "@vonage/vivid!Connotation.Announcement:member"
+            },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
             {
               "kind": "Reference",
               "text": "Connotation.Alert",
@@ -371,7 +380,7 @@
           "name": "AlertConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 10
+            "endIndex": 12
           }
         },
         {
@@ -4406,6 +4415,15 @@
               "kind": "Content",
               "text": " | "
             },
+            {
+              "kind": "Reference",
+              "text": "Connotation.Announcement",
+              "canonicalReference": "@vonage/vivid!Connotation.Announcement:member"
+            },
+            {
+              "kind": "Content",
+              "text": " | "
+            },
             {
               "kind": "Reference",
               "text": "Connotation.Alert",
@@ -4421,7 +4439,7 @@
           "name": "NoteConnotation",
           "typeTokenRange": {
             "startIndex": 1,
-            "endIndex": 10
+            "endIndex": 12
           }
         },
         {