@vonage/vivid 5.4.0 → 5.6.0

package/text-area/definition.js

@@ -12,7 +12,7 @@ import { W as WithSuccessText } from '../unbundled/with-success-text.js';
 import { F as FormElement } from '../unbundled/form-element.js';
 import { classNames } from '@microsoft/fast-web-utilities';
 
-const styles = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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}}.base.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(--vvd-color-neutral-700)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;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);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
+const styles = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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}}.base.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(--vvd-color-neutral-700)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-column:1/2;grid-row:1}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;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);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
 
 class Reflector {
   #reflectedProperties = /* @__PURE__ */ new Map();
@@ -125,6 +125,7 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -133,6 +134,7 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   autofocusChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.autofocus = this.autofocus;
     }
@@ -141,6 +143,7 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   listChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.setAttribute("list", this.list);
     }
@@ -149,6 +152,7 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   maxlengthChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.maxLength = this.maxlength;
     }
@@ -157,6 +161,7 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   minlengthChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.minLength = this.minlength;
     }
@@ -165,6 +170,7 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   spellcheckChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.spellcheck = this.spellcheck;
     }
@@ -286,20 +292,20 @@ function renderLabel() {
 const TextAreaTemplate = (context) => {
   return html`
 		<div class="${getClasses}">
-			<div
-				class="label-suffix"
-				?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
-			>
-				${when(
+			${when(
     (x) => x.charCount && x.maxlength,
     (x) => x._getCharCountTemplate(context)
   )}
+			<div
+				class="label-wrapper"
+				?hidden=${(x) => !x.label && !x._hasContextualHelp}
+			>
+				${when((x) => x.label, renderLabel())}
 				<slot
 					name="contextual-help"
 					${slotted("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			${when((x) => x.label, renderLabel())}
 			<textarea
 				class="control"
 				id="control"

package/text-area/index.cjs

@@ -1,18 +1,18 @@
-"use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/mixins.cjs"),u=require("../bundled/definition13.cjs"),h=require("../bundled/definition12.cjs"),d=require("../bundled/delegates-aria.cjs"),b=require("../bundled/form-associated.cjs"),x=require("../bundled/with-contextual-help.cjs"),f=require("../bundled/char-count.cjs"),m=require("../bundled/with-error-text.cjs"),_=require("../bundled/with-success-text.cjs"),g=require("../bundled/form-element.cjs"),v=require("../bundled/when.cjs"),y=require("../bundled/slotted.cjs"),w=require("../bundled/ref.cjs"),k=require("../bundled/class-names.cjs"),C=":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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}}.base.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(--vvd-color-neutral-700)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;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);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";class ${#e=new Map;#a;#r;constructor(e,a){this.#a=e,this.#r=a}attribute(e,a){this.#o(e,{type:"attribute",destination:a})}booleanAttribute(e,a){this.#o(e,{type:"boolean-attribute",destination:a})}property(e,a,l=!1){this.#o(e,{type:"property",destination:a,skipIfEqual:l})}destroy(){const e=r.Observable.getNotifier(this.#a);for(const a of this.#e.keys())e.unsubscribe(this.#t,a);this.#e.clear()}#o(e,a){this.#e.set(e,a),r.Observable.getNotifier(this.#a).subscribe(this.#t,e),this.#t.handleChange(this.#a,e)}#t={handleChange:(e,a)=>{const l=this.#e.get(a),t=e[a];switch(l.type){case"boolean-attribute":r.DOM.setBooleanAttribute(this.#r,l.destination,!!t);break;case"attribute":r.DOM.setAttribute(this.#r,l.destination,t);break;case"property":if(l.skipIfEqual&&this.#r[l.destination]===t)return;this.#r[l.destination]=t;break}}}}var T=Object.defineProperty,n=(c,e,a,l)=>{for(var t=void 0,s=c.length-1,i;s>=0;s--)(i=c[s])&&(t=i(e,a,t)||t);return t&&T(e,a,t),t};const z={none:"none"};class o extends x.WithContextualHelp(p.WithFeedback(f.WithCharCount(m.WithErrorText(_.WithSuccessText(g.FormElement(d.DelegatesAria(b.FormAssociated(r.VividElement)))))))){constructor(){super(...arguments),this.proxy=document.createElement("textarea"),this.resize=z.none,this.cols=20,this.handleTextInput=()=>{this.value=this.control.value}}readOnlyChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.readOnly=this.readOnly)}autofocusChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.autofocus=this.autofocus)}listChanged(){this.proxy instanceof HTMLTextAreaElement&&this.proxy.setAttribute("list",this.list)}maxlengthChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.maxLength=this.maxlength)}minlengthChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.minLength=this.minlength)}spellcheckChanged(){this.proxy instanceof HTMLTextAreaElement&&(this.proxy.spellcheck=this.spellcheck)}select(){this.control.select()}valueChanged(e,a){super.valueChanged(e,a),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}handleChange(){this.$emit("change")}validate(){super.validate(this.control)}#e;connectedCallback(){super.connectedCallback(),this.#e=new $(this,this.control),this.#e.property("value","value",!0),this._renderCharCountRemaining()}disconnectedCallback(){super.disconnectedCallback(),this.#e.destroy()}}n([r.attr({mode:"boolean"})],o.prototype,"readOnly");n([r.attr],o.prototype,"resize");n([r.attr({mode:"boolean"})],o.prototype,"autofocus");n([r.attr({attribute:"form"})],o.prototype,"formId");n([r.attr],o.prototype,"list");n([r.attr({converter:r.nullableNumberConverter})],o.prototype,"maxlength");n([r.attr({converter:r.nullableNumberConverter})],o.prototype,"minlength");n([r.attr],o.prototype,"placeholder");n([r.attr({converter:r.nullableNumberConverter,mode:"fromView"})],o.prototype,"cols");n([r.attr({converter:r.nullableNumberConverter,mode:"fromView"})],o.prototype,"rows");n([r.attr({mode:"boolean"})],o.prototype,"spellcheck");n([r.observable],o.prototype,"defaultSlottedNodes");n([r.attr],o.prototype,"wrap");const A=({value:c,errorValidationMessage:e,disabled:a,placeholder:l,readOnly:t,successText:s})=>k.classNames("base",["readonly",t],["placeholder",!!l],["disabled",a],["error",!!e],["has-value",!!c],["success",!!s]);function q(){return r.html` <label for="control" class="label">
+"use strict";const r=require("../bundled/vivid-element.cjs"),p=require("../bundled/mixins.cjs"),u=require("../bundled/definition14.cjs"),h=require("../bundled/definition13.cjs"),d=require("../bundled/delegates-aria.cjs"),b=require("../bundled/form-associated.cjs"),x=require("../bundled/with-contextual-help.cjs"),f=require("../bundled/char-count.cjs"),m=require("../bundled/with-error-text.cjs"),_=require("../bundled/with-success-text.cjs"),y=require("../bundled/form-element.cjs"),v=require("../bundled/when.cjs"),g=require("../bundled/slotted.cjs"),w=require("../bundled/ref.cjs"),k=require("../bundled/class-names.cjs"),C=".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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}}.base.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(--vvd-color-neutral-700)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-column:1/2;grid-row:1}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;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);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";class ${#e=new Map;#a;#r;constructor(e,a){this.#a=e,this.#r=a}attribute(e,a){this.#o(e,{type:"attribute",destination:a})}booleanAttribute(e,a){this.#o(e,{type:"boolean-attribute",destination:a})}property(e,a,l=!1){this.#o(e,{type:"property",destination:a,skipIfEqual:l})}destroy(){const e=r.Observable.getNotifier(this.#a);for(const a of this.#e.keys())e.unsubscribe(this.#t,a);this.#e.clear()}#o(e,a){this.#e.set(e,a),r.Observable.getNotifier(this.#a).subscribe(this.#t,e),this.#t.handleChange(this.#a,e)}#t={handleChange:(e,a)=>{const l=this.#e.get(a),t=e[a];switch(l.type){case"boolean-attribute":r.DOM.setBooleanAttribute(this.#r,l.destination,!!t);break;case"attribute":r.DOM.setAttribute(this.#r,l.destination,t);break;case"property":if(l.skipIfEqual&&this.#r[l.destination]===t)return;this.#r[l.destination]=t;break}}}}var T=Object.defineProperty,n=(c,e,a,l)=>{for(var t=void 0,s=c.length-1,i;s>=0;s--)(i=c[s])&&(t=i(e,a,t)||t);return t&&T(e,a,t),t};const z={none:"none"};class o extends x.WithContextualHelp(p.WithFeedback(f.WithCharCount(m.WithErrorText(_.WithSuccessText(y.FormElement(d.DelegatesAria(b.FormAssociated(r.VividElement)))))))){constructor(){super(...arguments),this.proxy=document.createElement("textarea"),this.resize=z.none,this.cols=20,this.handleTextInput=()=>{this.value=this.control.value}}readOnlyChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.readOnly=this.readOnly)}autofocusChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.autofocus=this.autofocus)}listChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&this.proxy.setAttribute("list",this.list)}maxlengthChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.maxLength=this.maxlength)}minlengthChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.minLength=this.minlength)}spellcheckChanged(){/* v8 ignore if -- @preserve */this.proxy instanceof HTMLTextAreaElement&&(this.proxy.spellcheck=this.spellcheck)}select(){this.control.select()}valueChanged(e,a){super.valueChanged(e,a),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}handleChange(){this.$emit("change")}validate(){super.validate(this.control)}#e;connectedCallback(){super.connectedCallback(),this.#e=new $(this,this.control),this.#e.property("value","value",!0),this._renderCharCountRemaining()}disconnectedCallback(){super.disconnectedCallback(),this.#e.destroy()}}n([r.attr({mode:"boolean"})],o.prototype,"readOnly");n([r.attr],o.prototype,"resize");n([r.attr({mode:"boolean"})],o.prototype,"autofocus");n([r.attr({attribute:"form"})],o.prototype,"formId");n([r.attr],o.prototype,"list");n([r.attr({converter:r.nullableNumberConverter})],o.prototype,"maxlength");n([r.attr({converter:r.nullableNumberConverter})],o.prototype,"minlength");n([r.attr],o.prototype,"placeholder");n([r.attr({converter:r.nullableNumberConverter,mode:"fromView"})],o.prototype,"cols");n([r.attr({converter:r.nullableNumberConverter,mode:"fromView"})],o.prototype,"rows");n([r.attr({mode:"boolean"})],o.prototype,"spellcheck");n([r.observable],o.prototype,"defaultSlottedNodes");n([r.attr],o.prototype,"wrap");const A=({value:c,errorValidationMessage:e,disabled:a,placeholder:l,readOnly:t,successText:s})=>k.classNames("base",["readonly",t],["placeholder",!!l],["disabled",a],["error",!!e],["has-value",!!c],["success",!!s]);function q(){return r.html` <label for="control" class="label">
 		${c=>c.label}
 	</label>`}const E=c=>r.html`
 		<div class="${A}">
+			${v.when(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(c))}
 			<div
-				class="label-suffix"
-				?hidden=${e=>!(e.charCount&&e.maxlength)&&!e._hasContextualHelp}
+				class="label-wrapper"
+				?hidden=${e=>!e.label&&!e._hasContextualHelp}
 			>
-				${v.when(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(c))}
+				${v.when(e=>e.label,q())}
 				<slot
 					name="contextual-help"
-					${y.slotted("_contextualHelpSlottedContent")}
+					${g.slotted("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			${v.when(e=>e.label,q())}
 			<textarea
 				class="control"
 				id="control"

package/text-area/index.js

@@ -1,8 +1,8 @@
 import { O as p, D as d, V as b, a as l, n as i, o as x, h, c as m, d as f } from "../bundled/vivid-element.js";
-import { W as _, f as g } from "../bundled/mixins.js";
-import { v as y } from "../bundled/definition13.js";
-import { c as k } from "../bundled/definition12.js";
-import { D as w, d as C } from "../bundled/delegates-aria.js";
+import { W as _, f as y } from "../bundled/mixins.js";
+import { v as g } from "../bundled/definition14.js";
+import { c as w } from "../bundled/definition13.js";
+import { D as k, d as C } from "../bundled/delegates-aria.js";
 import { F as $ } from "../bundled/form-associated.js";
 import { W as T } from "../bundled/with-contextual-help.js";
 import { W as z } from "../bundled/char-count.js";
@@ -13,7 +13,7 @@ import { w as u } from "../bundled/when.js";
 import { s as D } from "../bundled/slotted.js";
 import { r as O } from "../bundled/ref.js";
 import { c as W } from "../bundled/class-names.js";
-const L = ":host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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}}.base.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(--vvd-color-neutral-700)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);contain:inline-size;font:var(--vvd-typography-base);grid-column:1/2;grid-row:1;line-height:20px}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;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);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}.label-suffix{display:flex;align-items:center;gap:var(--label-suffix-gap, 8px);grid-column-end:-1;grid-row:1}.label-suffix[hidden]{display:none}slot[name=contextual-help]::slotted([data-vvd-component=contextual-help]){grid-column-end:-1;grid-row:1}";
+const L = ".label-wrapper{display:flex;flex-direction:row;align-items:center;gap:var(--label-wrapper-gap, 4px)}.label-wrapper[hidden]{display:none}.label:not(slot),.label::slotted(label){flex:0 1 auto}:host{display:inline-block}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base: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(--vvd-color-neutral-700)}.base: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}}.base.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(--vvd-color-neutral-700)}.base.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}.base: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)}.base:disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.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)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.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)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base.connotation-success{--_connotation-color-primary: var(--vvd-text-area-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-text-area-success-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-success-primary-increment, var(--vvd-color-success-600));--_connotation-color-intermediate: var(--vvd-text-area-success-intermediate, var(--vvd-color-success-500));--_connotation-color-firm: var(--vvd-text-area-success-firm, var(--vvd-color-success-600));--_connotation-color-fierce: var(--vvd-text-area-success-fierce, var(--vvd-color-success-700));--_connotation-color-faint: var(--vvd-text-area-success-faint, var(--vvd-color-success-50));--_connotation-color-soft: var(--vvd-text-area-success-soft, var(--vvd-color-success-100))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-text-area-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-text-area-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-alert-primary-increment, var(--vvd-color-alert-600));--_connotation-color-intermediate: var(--vvd-text-area-alert-intermediate, var(--vvd-color-alert-500));--_connotation-color-firm: var(--vvd-text-area-alert-firm, var(--vvd-color-alert-600));--_connotation-color-fierce: var(--vvd-text-area-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-faint: var(--vvd-text-area-alert-faint, var(--vvd-color-alert-50));--_connotation-color-soft: var(--vvd-text-area-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-success,.connotation-alert){--_connotation-color-primary: var(--vvd-text-area-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-text-area-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-text-area-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-intermediate: var(--vvd-text-area-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-firm: var(--vvd-text-area-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-text-area-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-text-area-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-text-area-accent-soft, var(--vvd-color-neutral-100))}.base{display:inline-grid;grid-template-columns:1fr max-content;inline-size:100%;row-gap:4px}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){--_low-ink-color: var(--vvd-color-neutral-600)}.base.disabled{--_low-ink-color: var(--_appearance-color-text);cursor:not-allowed}.label{color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base);line-height:20px}.label-wrapper{grid-column:1/2;grid-row:1}.char-count{color:var(--_low-ink-color);font:var(--vvd-typography-base);grid-column:2/-1}.control{--scrollbar-track-color: transparent;--scrollbar-thumb-color: color-mix(in srgb, var(--vvd-color-neutral-950), transparent 70%)}.control{scrollbar-color:var(--scrollbar-thumb-color) var(--scrollbar-track-color);scrollbar-width:thin}.control ::-webkit-scrollbar{width:4px}.control ::-webkit-scrollbar-track{background:var(--scrollbar-track-color)}.control ::-webkit-scrollbar-thumb{border:0;border-radius:4px;background-color:var(--scrollbar-fallback-track-color, var(--scrollbar-thumb-color))}.control{box-sizing:border-box;padding:8px 16px;border:0 none;border-radius:8px;appearance:none;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);grid-column:1/-1;min-block-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)));resize:none;transition:box-shadow .2s,background-color .2s,color .2s}@supports selector(::-webkit-resizer){.control::-webkit-resizer{background-image:linear-gradient(315deg,transparent 0,transparent 2px,var(--vvd-color-canvas-text) 2px,var(--vvd-color-canvas-text) 3px,transparent 3px,transparent 5px,var(--vvd-color-canvas-text) 5px,var(--vvd-color-canvas-text) 6px,transparent 6px,transparent 8px,transparent 100%);background-repeat:no-repeat;background-size:10px 10px;block-size:10px;inline-size:10px}}.control:disabled{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_appearance-color-text)}.control::placeholder,.control:disabled::placeholder{opacity:1;pointer-events:none;-webkit-text-fill-color:var(--_low-ink-color)}.control:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}:host([resize=both]) .control{resize:both}:host([resize=horizontal]) .control{resize:horizontal}:host([resize=vertical]) .control{resize:vertical}";
 class M {
   #e = /* @__PURE__ */ new Map();
   #r;
@@ -88,7 +88,7 @@ class r extends T(
     z(
       A(
         H(
-          E(w($(b)))
+          E(k($(b)))
         )
       )
     )
@@ -103,36 +103,42 @@ class r extends T(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLTextAreaElement && (this.proxy.readOnly = this.readOnly);
   }
   /**
    * @internal
    */
   autofocusChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLTextAreaElement && (this.proxy.autofocus = this.autofocus);
   }
   /**
    * @internal
    */
   listChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLTextAreaElement && this.proxy.setAttribute("list", this.list);
   }
   /**
    * @internal
    */
   maxlengthChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLTextAreaElement && (this.proxy.maxLength = this.maxlength);
   }
   /**
    * @internal
    */
   minlengthChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLTextAreaElement && (this.proxy.minLength = this.minlength);
   }
   /**
    * @internal
    */
   spellcheckChanged() {
+    /* v8 ignore if -- @preserve */
     this.proxy instanceof HTMLTextAreaElement && (this.proxy.spellcheck = this.spellcheck);
   }
   /**
@@ -235,20 +241,20 @@ function R() {
 }
 const P = (c) => h`
 		<div class="${S}">
-			<div
-				class="label-suffix"
-				?hidden=${(e) => !(e.charCount && e.maxlength) && !e._hasContextualHelp}
-			>
-				${u(
+			${u(
   (e) => e.charCount && e.maxlength,
   (e) => e._getCharCountTemplate(c)
 )}
+			<div
+				class="label-wrapper"
+				?hidden=${(e) => !e.label && !e._hasContextualHelp}
+			>
+				${u((e) => e.label, R())}
 				<slot
 					name="contextual-help"
 					${D("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			${u((e) => e.label, R())}
 			<textarea
 				class="control"
 				id="control"
@@ -279,9 +285,9 @@ const P = (c) => h`
   r,
   P,
   [
-    g,
     y,
-    k
+    g,
+    w
   ],
   {
     styles: L,

package/text-field/definition.cjs

@@ -73,6 +73,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
       this.validate();
@@ -82,6 +83,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   autofocusChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.autofocus = this.autofocus;
       this.validate();
@@ -91,6 +93,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   placeholderChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.placeholder = this.placeholder;
     }
@@ -99,6 +102,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   typeChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.type = this.type;
       this.validate();
@@ -108,6 +112,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   listChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.setAttribute("list", this.list);
       this.validate();
@@ -117,6 +122,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   maxlengthChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.maxLength = this.maxlength;
       this.validate();
@@ -126,6 +132,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   minlengthChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.minLength = this.minlength;
       this.validate();
@@ -135,6 +142,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   patternChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.pattern = this.pattern;
       this.validate();
@@ -144,6 +152,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   sizeChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.size = this.size;
     }
@@ -152,6 +161,7 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   spellcheckChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.spellcheck = this.spellcheck;
     }
@@ -319,20 +329,20 @@ const TextfieldTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
   return fastElement.html`
 		<div class="base ${getStateClasses}">
-			<div
-				class="label-suffix"
-				?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
-			>
-				${fastElement.when(
+			${fastElement.when(
     (x) => x.charCount && x.maxlength,
     (x) => x._getCharCountTemplate(context)
   )}
+			<div
+				class="label-wrapper"
+				?hidden=${(x) => !x.label && !x._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
 				<slot
 					name="contextual-help"
 					${fastElement.slotted("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			<slot class="label" name="_label"></slot>
 			${mixins.renderInLightDOM(fastElement.html`
 				${fastElement.when(
     (x) => x.label,

package/text-field/definition.js

@@ -69,6 +69,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   readOnlyChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
       this.validate();
@@ -78,6 +79,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   autofocusChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.autofocus = this.autofocus;
       this.validate();
@@ -87,6 +89,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   placeholderChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.placeholder = this.placeholder;
     }
@@ -95,6 +98,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   typeChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.type = this.type;
       this.validate();
@@ -104,6 +108,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   listChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.setAttribute("list", this.list);
       this.validate();
@@ -113,6 +118,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   maxlengthChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.maxLength = this.maxlength;
       this.validate();
@@ -122,6 +128,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   minlengthChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.minLength = this.minlength;
       this.validate();
@@ -131,6 +138,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   patternChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.pattern = this.pattern;
       this.validate();
@@ -140,6 +148,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   sizeChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.size = this.size;
     }
@@ -148,6 +157,7 @@ class TextField extends WithContextualHelp(
    * @internal
    */
   spellcheckChanged() {
+    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.spellcheck = this.spellcheck;
     }
@@ -315,20 +325,20 @@ const TextfieldTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   return html`
 		<div class="base ${getStateClasses}">
-			<div
-				class="label-suffix"
-				?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
-			>
-				${when(
+			${when(
     (x) => x.charCount && x.maxlength,
     (x) => x._getCharCountTemplate(context)
   )}
+			<div
+				class="label-wrapper"
+				?hidden=${(x) => !x.label && !x._hasContextualHelp}
+			>
+				<slot class="label" name="_label"></slot>
 				<slot
 					name="contextual-help"
 					${slotted("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			<slot class="label" name="_label"></slot>
 			${renderInLightDOM(html`
 				${when(
     (x) => x.label,

package/time-picker/index.cjs

@@ -1 +1 @@
-"use strict";const r=require("../bundled/definition10.cjs"),o=require("../bundled/definition9.cjs"),c=require("../bundled/definition3.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/picker-field.template.cjs"),e=require("../bundled/time-selection-picker.template.cjs"),s=require("../bundled/definition13.cjs"),l=i=>n.PickerFieldTemplate(i,e.TimeSelectionPickerTemplate(i,6),{withSeparator:!0,padded:!1}),d=t.defineVividComponent("time-picker",e.TimePicker,l,[r.textFieldDefinition,o.popupDefinition,c.buttonDefinition,e.inlineTimePickerDefinition,s.visuallyHiddenDefinition],{styles:n.pickerFieldStyles,shadowOptions:{delegatesFocus:!0}}),u=t.createRegisterFunction(d);u();
+"use strict";const r=require("../bundled/definition10.cjs"),o=require("../bundled/definition9.cjs"),c=require("../bundled/definition3.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/picker-field.template.cjs"),e=require("../bundled/time-selection-picker.template.cjs"),s=require("../bundled/definition14.cjs"),l=i=>n.PickerFieldTemplate(i,e.TimeSelectionPickerTemplate(i,6),{withSeparator:!0,padded:!1}),d=t.defineVividComponent("time-picker",e.TimePicker,l,[r.textFieldDefinition,o.popupDefinition,c.buttonDefinition,e.inlineTimePickerDefinition,s.visuallyHiddenDefinition],{styles:n.pickerFieldStyles,shadowOptions:{delegatesFocus:!0}}),u=t.createRegisterFunction(d);u();

package/time-picker/index.js

@@ -4,7 +4,7 @@ import { b as r } from "../bundled/definition3.js";
 import { c as o, d as n } from "../bundled/vivid-element.js";
 import { a as m, p as s } from "../bundled/picker-field.template.js";
 import { a, b as p, d as c } from "../bundled/time-selection-picker.template.js";
-import { v as f } from "../bundled/definition13.js";
+import { v as f } from "../bundled/definition14.js";
 const d = (i) => m(i, a(i, 6), {
   withSeparator: !0,
   padded: !1

package/toggletip/definition.cjs

@@ -37,6 +37,7 @@ class Toggletip extends localized.Localized(anchored.Anchored(vividElement.Vivid
       if (clickedOutside || clickedOnAnchor) this.open = false;
     };
     this.#closeOnEscape = (e) => {
+      /* v8 ignore else -- @preserve */
       if (e.key === "Escape") {
         this.open = false;
       }
@@ -82,9 +83,12 @@ class Toggletip extends localized.Localized(anchored.Anchored(vividElement.Vivid
   }
   #cleanupAnchor(a) {
     a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
     a.removeAttribute("aria-expanded");
     a.removeAttribute("data-expanded");
+    /* v8 ignore else -- @preserve */
+    if (a.ariaLabel) {
+      a.ariaLabel = this.#originalAriaLabel;
+    }
   }
   #openIfClosed;
   #updateListeners() {

package/toggletip/definition.js

@@ -33,6 +33,7 @@ class Toggletip extends Localized(Anchored(VividElement)) {
       if (clickedOutside || clickedOnAnchor) this.open = false;
     };
     this.#closeOnEscape = (e) => {
+      /* v8 ignore else -- @preserve */
       if (e.key === "Escape") {
         this.open = false;
       }
@@ -78,9 +79,12 @@ class Toggletip extends Localized(Anchored(VividElement)) {
   }
   #cleanupAnchor(a) {
     a.removeEventListener("click", this.#openIfClosed, true);
-    if (a.ariaLabel) a.ariaLabel = this.#originalAriaLabel;
     a.removeAttribute("aria-expanded");
     a.removeAttribute("data-expanded");
+    /* v8 ignore else -- @preserve */
+    if (a.ariaLabel) {
+      a.ariaLabel = this.#originalAriaLabel;
+    }
   }
   #openIfClosed;
   #updateListeners() {

package/toggletip/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition16.cjs");e.registerToggletip();
+"use strict";const e=require("../bundled/definition17.cjs");e.registerToggletip();

package/toggletip/index.js

@@ -1,2 +1,2 @@
-import { r } from "../bundled/definition16.js";
+import { r } from "../bundled/definition17.js";
 r();