@vonage/vivid 3.53.0 → 3.55.0

package/shared/definition55.js

@@ -63,16 +63,6 @@ function v4(options, buf, offset) {
   rnds[6] = rnds[6] & 0x0f | 0x40;
   rnds[8] = rnds[8] & 0x3f | 0x80; // Copy bytes to buffer, if provided
 
-  if (buf) {
-    offset = offset || 0;
-
-    for (let i = 0; i < 16; ++i) {
-      buf[offset + i] = rnds[i];
-    }
-
-    return buf;
-  }
-
   return unsafeStringify(rnds);
 }
 
@@ -104,14 +94,14 @@ var __privateAdd = (obj, member, value) => {
 };
 var __privateSet = (obj, member, value, setter) => {
   __accessCheck(obj, member, "write to private field");
-  setter ? setter.call(obj, value) : member.set(obj, value);
+  member.set(obj, value);
   return value;
 };
 var __privateMethod = (obj, member, method) => {
   __accessCheck(obj, member, "access private method");
   return method;
 };
-var _handleLabelChange, handleLabelChange_fn, _reflectToInput;
+var _handleLabelChange, handleLabelChange_fn, _reflectToInput, _helperTextMirrorEl, _helperTextSlotMutationObserver, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn, _updateMirroredHelperText, updateMirroredHelperText_fn;
 const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
 const getSafariWorkaroundStyleSheet = memoizeWith(
   () => "",
@@ -146,11 +136,15 @@ let TextField = class extends TextField$1 {
   constructor() {
     super(...arguments);
     __privateAdd(this, _handleLabelChange);
+    __privateAdd(this, _updateHelperTextMutationObserver);
+    __privateAdd(this, _updateMirroredHelperText);
     /**
      * @internal
      */
     this._labelEl = null;
     __privateAdd(this, _reflectToInput, void 0);
+    __privateAdd(this, _helperTextMirrorEl, void 0);
+    __privateAdd(this, _helperTextSlotMutationObserver, void 0);
   }
   /**
    * @internal
@@ -165,42 +159,12 @@ let TextField = class extends TextField$1 {
     if (!this.control) {
       const uniqueId = this.id || generateRandomId();
       const controlId = `vvd-text-field-control-${uniqueId}`;
+      const helperTextId = `vvd-text-field-helper-text-${uniqueId}`;
       const input = document.createElement("input");
       input.slot = "_control";
       input.id = controlId;
       input.className = safariWorkaroundClassName;
       this.control = input;
-      __privateSet(this, _reflectToInput, new Reflector(this, input));
-      __privateGet(this, _reflectToInput).booleanAttribute("autofocus", "autofocus");
-      __privateGet(this, _reflectToInput).booleanAttribute("disabled", "disabled");
-      __privateGet(this, _reflectToInput).booleanAttribute("readOnly", "readonly");
-      __privateGet(this, _reflectToInput).booleanAttribute("required", "required");
-      __privateGet(this, _reflectToInput).booleanAttribute("spellcheck", "spellcheck");
-      __privateGet(this, _reflectToInput).attribute("list", "list");
-      __privateGet(this, _reflectToInput).attribute("maxlength", "maxlength");
-      __privateGet(this, _reflectToInput).attribute("minlength", "minlength");
-      __privateGet(this, _reflectToInput).attribute("pattern", "pattern");
-      __privateGet(this, _reflectToInput).attribute("placeholder", "placeholder");
-      __privateGet(this, _reflectToInput).attribute("size", "size");
-      __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
-      __privateGet(this, _reflectToInput).attribute("type", "type");
-      __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
-      __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
-      __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
-      __privateGet(this, _reflectToInput).attribute("ariaDetails", "aria-details");
-      __privateGet(this, _reflectToInput).attribute("ariaDisabled", "aria-disabled");
-      __privateGet(this, _reflectToInput).attribute("ariaHaspopup", "aria-haspopup");
-      __privateGet(this, _reflectToInput).attribute("ariaHidden", "aria-hidden");
-      __privateGet(this, _reflectToInput).attribute("ariaInvalid", "aria-invalid");
-      __privateGet(this, _reflectToInput).attribute("ariaKeyshortcuts", "aria-keyshortcuts");
-      __privateGet(this, _reflectToInput).attribute("ariaLabel", "aria-label");
-      __privateGet(this, _reflectToInput).attribute("ariaLive", "aria-live");
-      __privateGet(this, _reflectToInput).attribute("ariaRelevant", "aria-relevant");
-      __privateGet(this, _reflectToInput).attribute(
-        "ariaRoledescription",
-        "aria-roledescription"
-      );
-      __privateGet(this, _reflectToInput).property("value", "value", true);
       input.addEventListener("input", () => {
         this.handleTextInput();
       });
@@ -219,16 +183,68 @@ let TextField = class extends TextField$1 {
       label.htmlFor = controlId;
       this._labelEl = label;
       __privateMethod(this, _handleLabelChange, handleLabelChange_fn).call(this, label);
+      __privateSet(this, _helperTextMirrorEl, document.createElement("div"));
+      __privateGet(this, _helperTextMirrorEl).id = helperTextId;
+      __privateGet(this, _helperTextMirrorEl).slot = "_mirrored-helper-text";
+      __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+      this.appendChild(__privateGet(this, _helperTextMirrorEl));
       installSafariWorkaroundStyle(this);
     }
+    __privateSet(this, _reflectToInput, new Reflector(this, this.control));
+    __privateGet(this, _reflectToInput).booleanAttribute("autofocus", "autofocus");
+    __privateGet(this, _reflectToInput).booleanAttribute("disabled", "disabled");
+    __privateGet(this, _reflectToInput).booleanAttribute("readOnly", "readonly");
+    __privateGet(this, _reflectToInput).booleanAttribute("required", "required");
+    __privateGet(this, _reflectToInput).booleanAttribute("spellcheck", "spellcheck");
+    __privateGet(this, _reflectToInput).attribute("list", "list");
+    __privateGet(this, _reflectToInput).attribute("maxlength", "maxlength");
+    __privateGet(this, _reflectToInput).attribute("minlength", "minlength");
+    __privateGet(this, _reflectToInput).attribute("pattern", "pattern");
+    __privateGet(this, _reflectToInput).attribute("placeholder", "placeholder");
+    __privateGet(this, _reflectToInput).attribute("size", "size");
+    __privateGet(this, _reflectToInput).attribute("autoComplete", "autocomplete");
+    __privateGet(this, _reflectToInput).attribute("type", "type");
+    __privateGet(this, _reflectToInput).attribute("ariaAtomic", "aria-atomic");
+    __privateGet(this, _reflectToInput).attribute("ariaBusy", "aria-busy");
+    __privateGet(this, _reflectToInput).attribute("ariaCurrent", "aria-current");
+    __privateGet(this, _reflectToInput).attribute("ariaDetails", "aria-details");
+    __privateGet(this, _reflectToInput).attribute("ariaDisabled", "aria-disabled");
+    __privateGet(this, _reflectToInput).attribute("ariaHaspopup", "aria-haspopup");
+    __privateGet(this, _reflectToInput).attribute("ariaHidden", "aria-hidden");
+    __privateGet(this, _reflectToInput).attribute("ariaInvalid", "aria-invalid");
+    __privateGet(this, _reflectToInput).attribute("ariaKeyshortcuts", "aria-keyshortcuts");
+    __privateGet(this, _reflectToInput).attribute("ariaLabel", "aria-label");
+    __privateGet(this, _reflectToInput).attribute("ariaLive", "aria-live");
+    __privateGet(this, _reflectToInput).attribute("ariaRelevant", "aria-relevant");
+    __privateGet(this, _reflectToInput).attribute(
+      "ariaRoledescription",
+      "aria-roledescription"
+    );
+    __privateGet(this, _reflectToInput).property("value", "value", true);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
   }
   disconnectedCallback() {
     super.disconnectedCallback();
     __privateGet(this, _reflectToInput).destroy();
+    __privateSet(this, _reflectToInput, void 0);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
   }
   focus() {
     this.control?.focus();
   }
+  /**
+   * @internal
+   */
+  helperTextChanged() {
+    __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+  }
+  /**
+   * @internal
+   */
+  _helperTextSlottedContentChanged() {
+    __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+    __privateMethod(this, _updateHelperTextMutationObserver, updateHelperTextMutationObserver_fn).call(this);
+  }
 };
 _handleLabelChange = new WeakSet();
 handleLabelChange_fn = function(labelEl) {
@@ -242,6 +258,47 @@ handleLabelChange_fn = function(labelEl) {
   }
 };
 _reflectToInput = new WeakMap();
+_helperTextMirrorEl = new WeakMap();
+_helperTextSlotMutationObserver = new WeakMap();
+_updateHelperTextMutationObserver = new WeakSet();
+updateHelperTextMutationObserver_fn = function() {
+  const usesHelperTextSlot = this._helperTextSlottedContent.length;
+  const shouldHaveMutationObserver = usesHelperTextSlot && this.isConnected;
+  if (shouldHaveMutationObserver && !__privateGet(this, _helperTextSlotMutationObserver)) {
+    __privateSet(this, _helperTextSlotMutationObserver, new MutationObserver((records) => {
+      if (records.some((record) => record.target !== __privateGet(this, _helperTextMirrorEl))) {
+        __privateMethod(this, _updateMirroredHelperText, updateMirroredHelperText_fn).call(this);
+      }
+    }));
+    __privateGet(this, _helperTextSlotMutationObserver).observe(this, {
+      subtree: true,
+      childList: true,
+      characterData: true
+    });
+  }
+  if (!shouldHaveMutationObserver && __privateGet(this, _helperTextSlotMutationObserver)) {
+    __privateGet(this, _helperTextSlotMutationObserver).disconnect();
+    __privateSet(this, _helperTextSlotMutationObserver, void 0);
+  }
+};
+_updateMirroredHelperText = new WeakSet();
+updateMirroredHelperText_fn = function() {
+  let helperText = this.helperText ?? "";
+  if (this._helperTextSlottedContent?.length) {
+    helperText = this._helperTextSlottedContent.map((node) => node.innerText).join(" ");
+  }
+  if (__privateGet(this, _helperTextMirrorEl)) {
+    __privateGet(this, _helperTextMirrorEl).textContent = helperText;
+    if (helperText) {
+      this.control.setAttribute(
+        "aria-describedby",
+        __privateGet(this, _helperTextMirrorEl).id
+      );
+    } else {
+      this.control.removeAttribute("aria-describedby");
+    }
+  }
+};
 __decorateClass([
   attr
 ], TextField.prototype, "appearance", 2);
@@ -307,29 +364,30 @@ function renderCharCount() {
 const TextfieldTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   return html` <div class="base ${getStateClasses}">
-		${when((x) => x.charCount && x.maxlength, renderCharCount())}
-		<slot class="label" name="_label"></slot>
-		<div class="fieldset">
-			<div class="leading-items-wrapper">
-				<slot
-					name="leading-action-items"
-					${slotted("leadingActionItemsSlottedContent")}
-				></slot>
-				${(x) => affixIconTemplate(x.icon)}
-			</div>
+			${when((x) => x.charCount && x.maxlength, renderCharCount())}
+			<slot class="label" name="_label"></slot>
+			<div class="fieldset">
+				<div class="leading-items-wrapper">
+					<slot
+						name="leading-action-items"
+						${slotted("leadingActionItemsSlottedContent")}
+					></slot>
+					${(x) => affixIconTemplate(x.icon)}
+				</div>
 
-			<div class="wrapper">
-				<slot class="control" name="_control"></slot>
-			</div>
-			<div class="action-items-wrapper">
-				<slot
-					name="action-items"
-					${slotted("actionItemsSlottedContent")}
-				></slot>
+				<div class="wrapper">
+					<slot class="control" name="_control"></slot>
+				</div>
+				<div class="action-items-wrapper">
+					<slot
+						name="action-items"
+						${slotted("actionItemsSlottedContent")}
+					></slot>
+				</div>
 			</div>
+			${getFeedbackTemplate(context)}
 		</div>
-		${getFeedbackTemplate(context)}
-	</div>`;
+		<slot name="_mirrored-helper-text"></slot>`;
 };
 
 const textFieldDefinition = TextField.compose({

package/shared/definition56.cjs

@@ -16,7 +16,7 @@ const when = require('./when.cjs');
 const repeat = require('./repeat.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;padding:4px;block-size:188px;gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .item{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .item{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .item:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}\n";
+const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;padding:4px;block-size:188px;gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .item{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .item{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .item:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}";
 
 class _TimePicker extends index.FoundationElement {
 }

package/shared/definition56.js

@@ -14,7 +14,7 @@ import { w as when } from './when.js';
 import { r as repeat } from './repeat.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;padding:4px;block-size:188px;gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .item{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .item{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .item:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}\n";
+const styles = ":host{display:inline-block}.base,.control{inline-size:100%}.dialog{display:inline-flex;flex-direction:column}.dialog .footer{display:flex;align-items:center;justify-content:flex-end;padding:8px;border-top:1px solid var(--vvd-color-neutral-200);gap:8px}.time-pickers{display:flex;overflow:hidden;padding:4px;block-size:188px;gap:4px}.time-pickers .picker{position:relative;display:flex;overflow:hidden;flex-direction:column;padding:0;border-radius:4px;margin:0;gap:4px;inline-size:50px;list-style:none;scrollbar-width:thin}.time-pickers .picker:hover{overflow-y:auto}.time-pickers .picker:after{display:block;flex-shrink:0;block-size:156px;content:\"\"}.time-pickers .picker:focus-visible{--focus-stroke-gap-color: transparent;--focus-inset: -2px;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))}.time-pickers .item{display:flex;flex-shrink:0;align-items:center;justify-content:center;border-radius:4px;background-color:var(--_appearance-color-fill);block-size:28px;color:var(--_appearance-color-text);cursor:pointer;font:var(--vvd-typography-base);inline-size:50px}.time-pickers .item{--_connotation-color-primary: var(--vvd-time-picker-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-firm: var(--vvd-time-picker-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-time-picker-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-time-picker-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-time-picker-accent-dim, var(--vvd-color-neutral-200));--_connotation-color-pale: var(--vvd-time-picker-accent-pale, var(--vvd-color-neutral-300))}.time-pickers .item{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.time-pickers .item:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.time-pickers .item:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.time-pickers .item:where(.selected):where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: transparent}";
 
 class _TimePicker extends FoundationElement {
 }

package/shared/definition57.cjs

@@ -6,7 +6,7 @@ const anchored = require('./anchored.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}\n";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition57.js

@@ -4,7 +4,7 @@ import { b as anchored, a as anchorSlotTemplateFactory } from './anchored.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}\n";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px}.headline{font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition58.cjs

@@ -5,7 +5,7 @@ const definition = require('./definition63.cjs');
 const anchored = require('./anchored.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}\n";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition58.js

@@ -3,7 +3,7 @@ import { P as Popup, p as popupRegistries } from './definition63.js';
 import { b as anchored, a as anchorSlotTemplateFactory } from './anchored.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}\n";
+const styles = ":host{display:var(--_popup-display, inline)}:host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto)}.tooltip-text{padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold)}";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/shared/definition59.cjs

@@ -12,16 +12,15 @@ const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 const ref = require('./ref.cjs');
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}: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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}: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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -29,7 +28,7 @@ class TreeItem extends treeItem.TreeItem {
 }
 __decorateClass([
   index.attr
-], TreeItem.prototype, "text", 2);
+], TreeItem.prototype, "text");
 applyMixins.applyMixins(TreeItem, affix.AffixIcon);
 
 const getClasses = ({ disabled, selected }) => classNames.classNames(

package/shared/definition59.js

@@ -10,16 +10,15 @@ import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 import { r as ref } from './ref.js';
 
-const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}: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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}\n";
+const styles = ":host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.control{position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-inline:16px;text-decoration:none;vertical-align:middle;word-break:break-word}.control{--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.selected):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control{--_connotation-color-primary: var(--vvd-tree-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tree-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-tree-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-faint: var(--vvd-tree-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-tree-item-accent-soft, var(--vvd-color-neutral-100))}@supports (user-select: none){.control{user-select:none}}.control:not(.disabled){cursor:pointer}.control.disabled{pointer-events:none}: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))}:host(:focus-visible) .control:not(.selected){--focus-stroke-gap-color: transparent}.control .text{font:var(--vvd-typography-base)}.expandCollapseButton{display:flex;align-items:center;border-radius:8px;font-size:20px}.expandCollapseButton .expandCollapseIcon{margin:4px}.expandCollapseButton:hover{background-color:var(--vvd-color-neutral-100)}.selected .expandCollapseButton:hover{background-color:var(--vvd-color-neutral-700)}.items{display:flex;flex-direction:column;gap:4px;margin-block:4px;padding-inline-start:48px}slot[name=icon]{font-size:20px;line-height:1}.control:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -27,7 +26,7 @@ class TreeItem extends TreeItem$1 {
 }
 __decorateClass([
   attr
-], TreeItem.prototype, "text", 2);
+], TreeItem.prototype, "text");
 applyMixins(TreeItem, AffixIcon);
 
 const getClasses = ({ disabled, selected }) => classNames(

package/shared/definition6.cjs

@@ -6,16 +6,15 @@ const icon = require('./icon.cjs');
 const when = require('./when.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.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.size-condensed{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}\n";
+const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.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.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -23,22 +22,22 @@ class Avatar extends index.FoundationElement {
 }
 __decorateClass([
   index.attr
-], Avatar.prototype, "connotation", 2);
+], Avatar.prototype, "connotation");
 __decorateClass([
   index.attr
-], Avatar.prototype, "shape", 2);
+], Avatar.prototype, "shape");
 __decorateClass([
   index.attr
-], Avatar.prototype, "appearance", 2);
+], Avatar.prototype, "appearance");
 __decorateClass([
   index.attr
-], Avatar.prototype, "size", 2);
+], Avatar.prototype, "size");
 __decorateClass([
   index.attr
-], Avatar.prototype, "icon", 2);
+], Avatar.prototype, "icon");
 __decorateClass([
   index.attr
-], Avatar.prototype, "initials", 2);
+], Avatar.prototype, "initials");
 
 const getClasses = ({ appearance, connotation, shape, size }) => classNames.classNames(
   "base",

package/shared/definition6.js

@@ -4,16 +4,15 @@ import { I as Icon } from './icon.js';
 import { w as when } from './when.js';
 import { c as classNames } from './class-names.js';
 
-const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.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.size-condensed{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}\n";
+const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;border-radius:var(--_avatar-border-radius);background-color:var(--_appearance-color-fill);block-size:var(--_size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-avatar-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-avatar-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.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.size-condensed{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}";
 
 var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  var result = void 0 ;
   for (var i = decorators.length - 1, decorator; i >= 0; i--)
     if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result)
+      result = (decorator(target, key, result) ) || result;
+  if (result)
     __defProp(target, key, result);
   return result;
 };
@@ -21,22 +20,22 @@ class Avatar extends FoundationElement {
 }
 __decorateClass([
   attr
-], Avatar.prototype, "connotation", 2);
+], Avatar.prototype, "connotation");
 __decorateClass([
   attr
-], Avatar.prototype, "shape", 2);
+], Avatar.prototype, "shape");
 __decorateClass([
   attr
-], Avatar.prototype, "appearance", 2);
+], Avatar.prototype, "appearance");
 __decorateClass([
   attr
-], Avatar.prototype, "size", 2);
+], Avatar.prototype, "size");
 __decorateClass([
   attr
-], Avatar.prototype, "icon", 2);
+], Avatar.prototype, "icon");
 __decorateClass([
   attr
-], Avatar.prototype, "initials", 2);
+], Avatar.prototype, "initials");
 
 const getClasses = ({ appearance, connotation, shape, size }) => classNames(
   "base",

package/shared/definition60.cjs

@@ -272,7 +272,7 @@ index.__decorate([
     index.observable
 ], TreeView$1.prototype, "slottedTreeItems", void 0);
 
-const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}\n";
+const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
 
 class TreeView extends TreeView$1 {
 }

package/shared/definition60.js

@@ -270,7 +270,7 @@ __decorate([
     observable
 ], TreeView$1.prototype, "slottedTreeItems", void 0);
 
-const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}\n";
+const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
 
 class TreeView extends TreeView$1 {
 }