@vonage/vivid 5.5.0 → 5.6.0

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/definition14.js";
-import { c as k } from "../bundled/definition13.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/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/tooltip/definition.cjs

@@ -31,7 +31,10 @@ class Tooltip extends anchored.Anchored(vividElement.VividElement) {
       this.#updateAnchorExpanded();
     };
     this.#closeOnEscape = (e) => {
-      if (e.key === "Escape") this.#hide();
+      /* v8 ignore else -- @preserve */
+      if (e.key === "Escape") {
+        this.#hide();
+      }
     };
   }
   connectedCallback() {

package/tooltip/definition.js

@@ -27,7 +27,10 @@ class Tooltip extends Anchored(VividElement) {
       this.#updateAnchorExpanded();
     };
     this.#closeOnEscape = (e) => {
-      if (e.key === "Escape") this.#hide();
+      /* v8 ignore else -- @preserve */
+      if (e.key === "Escape") {
+        this.#hide();
+      }
     };
   }
   connectedCallback() {

package/tree-view/definition.cjs

@@ -53,11 +53,13 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
     this.handleFocus = (e) => {
       if (this.slottedTreeItems.length > 0) {
         if (e.target === this) {
+          /* v8 ignore else -- @preserve */
           if (this.currentFocused !== null) {
             treeItem_definition.TreeItem.focusItem(this.currentFocused);
           }
           return;
         }
+        /* v8 ignore else -- @preserve */
         if (this.contains(e.target)) {
           this.setAttribute("tabindex", "-1");
           this.currentFocused = e.target;
@@ -83,22 +85,29 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
       if (this.slottedTreeItems.length < 1) {
         return true;
       }
+      /* v8 ignore else -- @preserve */
       if (!e.defaultPrevented) {
         const treeItems = this.getVisibleNodes();
         switch (e.key) {
-          case fastWebUtilities.keyHome:
+          case fastWebUtilities.keyHome: {
+            /* v8 ignore else -- @preserve */
             if (treeItems.length) {
               treeItem_definition.TreeItem.focusItem(treeItems[0]);
             }
             return;
-          case fastWebUtilities.keyEnd:
+          }
+          case fastWebUtilities.keyEnd: {
+            /* v8 ignore else -- @preserve */
             if (treeItems.length) {
               treeItem_definition.TreeItem.focusItem(treeItems[treeItems.length - 1]);
             }
             return;
-          case fastWebUtilities.keyArrowLeft:
+          }
+          case fastWebUtilities.keyArrowLeft: {
+            /* v8 ignore else -- @preserve */
             if (e.target && this.isFocusableElement(e.target)) {
               const item = e.target;
+              /* v8 ignore else -- @preserve */
               if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0 && item.expanded) {
                 item.expanded = false;
               } else if (item instanceof treeItem_definition.TreeItem && item.parentElement instanceof treeItem_definition.TreeItem) {
@@ -106,9 +115,12 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
               }
             }
             return false;
-          case fastWebUtilities.keyArrowRight:
+          }
+          case fastWebUtilities.keyArrowRight: {
+            /* v8 ignore else -- @preserve */
             if (e.target && this.isFocusableElement(e.target)) {
               const item = e.target;
+              /* v8 ignore else -- @preserve */
               if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0 && !item.expanded) {
                 item.expanded = true;
               } else if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0) {
@@ -116,16 +128,21 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
               }
             }
             return;
-          case fastWebUtilities.keyArrowDown:
+          }
+          case fastWebUtilities.keyArrowDown: {
+            /* v8 ignore else -- @preserve */
             if (e.target && this.isFocusableElement(e.target)) {
               this.focusNextNode(1, e.target);
             }
             return;
-          case fastWebUtilities.keyArrowUp:
+          }
+          case fastWebUtilities.keyArrowUp: {
+            /* v8 ignore else -- @preserve */
             if (e.target && this.isFocusableElement(e.target)) {
               this.focusNextNode(-1, e.target);
             }
             return;
+          }
           case fastWebUtilities.keyEnter:
             this.handleClick(e);
             return;
@@ -140,11 +157,13 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
      *  @internal
      */
     this.handleSelectedChange = (e) => {
+      /* v8 ignore else -- @preserve */
       if (!e.defaultPrevented) {
         if (!(e.target instanceof Element) || !treeItem_definition.isTreeItemElement(e.target)) {
           return true;
         }
         const item = e.target;
+        /* v8 ignore else -- @preserve */
         if (item.selected) {
           if (this.currentSelected && this.currentSelected !== item) {
             this.currentSelected.selected = false;
@@ -168,6 +187,7 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
       this.nested = this.checkForNestedItems();
       const treeItems = this.getVisibleNodes();
       treeItems.forEach((node) => {
+        /* v8 ignore else -- @preserve */
         if (treeItem_definition.isTreeItemElement(node)) {
           node.nested = this.nested;
         }
@@ -217,8 +237,10 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
    */
   focusNextNode(delta, item) {
     const visibleNodes = this.getVisibleNodes();
+    /* v8 ignore else -- @preserve */
     if (visibleNodes) {
       const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
+      /* v8 ignore else -- @preserve */
       if (fastWebUtilities.isHTMLElement(focusItem)) {
         treeItem_definition.TreeItem.focusItem(focusItem);
       }

package/tree-view/definition.js

@@ -49,11 +49,13 @@ class TreeView extends HostSemantics(VividElement) {
     this.handleFocus = (e) => {
       if (this.slottedTreeItems.length > 0) {
         if (e.target === this) {
+          /* v8 ignore else -- @preserve */
           if (this.currentFocused !== null) {
             TreeItem.focusItem(this.currentFocused);
           }
           return;
         }
+        /* v8 ignore else -- @preserve */
         if (this.contains(e.target)) {
           this.setAttribute("tabindex", "-1");
           this.currentFocused = e.target;
@@ -79,22 +81,29 @@ class TreeView extends HostSemantics(VividElement) {
       if (this.slottedTreeItems.length < 1) {
         return true;
       }
+      /* v8 ignore else -- @preserve */
       if (!e.defaultPrevented) {
         const treeItems = this.getVisibleNodes();
         switch (e.key) {
-          case keyHome:
+          case keyHome: {
+            /* v8 ignore else -- @preserve */
             if (treeItems.length) {
               TreeItem.focusItem(treeItems[0]);
             }
             return;
-          case keyEnd:
+          }
+          case keyEnd: {
+            /* v8 ignore else -- @preserve */
             if (treeItems.length) {
               TreeItem.focusItem(treeItems[treeItems.length - 1]);
             }
             return;
-          case keyArrowLeft:
+          }
+          case keyArrowLeft: {
+            /* v8 ignore else -- @preserve */
             if (e.target && this.isFocusableElement(e.target)) {
               const item = e.target;
+              /* v8 ignore else -- @preserve */
               if (item instanceof TreeItem && item.childItemLength() > 0 && item.expanded) {
                 item.expanded = false;
               } else if (item instanceof TreeItem && item.parentElement instanceof TreeItem) {
@@ -102,9 +111,12 @@ class TreeView extends HostSemantics(VividElement) {
               }
             }
             return false;
-          case keyArrowRight:
+          }
+          case keyArrowRight: {
+            /* v8 ignore else -- @preserve */
             if (e.target && this.isFocusableElement(e.target)) {
               const item = e.target;
+              /* v8 ignore else -- @preserve */
               if (item instanceof TreeItem && item.childItemLength() > 0 && !item.expanded) {
                 item.expanded = true;
               } else if (item instanceof TreeItem && item.childItemLength() > 0) {
@@ -112,16 +124,21 @@ class TreeView extends HostSemantics(VividElement) {
               }
             }
             return;
-          case keyArrowDown:
+          }
+          case keyArrowDown: {
+            /* v8 ignore else -- @preserve */
             if (e.target && this.isFocusableElement(e.target)) {
               this.focusNextNode(1, e.target);
             }
             return;
-          case keyArrowUp:
+          }
+          case keyArrowUp: {
+            /* v8 ignore else -- @preserve */
             if (e.target && this.isFocusableElement(e.target)) {
               this.focusNextNode(-1, e.target);
             }
             return;
+          }
           case keyEnter:
             this.handleClick(e);
             return;
@@ -136,11 +153,13 @@ class TreeView extends HostSemantics(VividElement) {
      *  @internal
      */
     this.handleSelectedChange = (e) => {
+      /* v8 ignore else -- @preserve */
       if (!e.defaultPrevented) {
         if (!(e.target instanceof Element) || !isTreeItemElement(e.target)) {
           return true;
         }
         const item = e.target;
+        /* v8 ignore else -- @preserve */
         if (item.selected) {
           if (this.currentSelected && this.currentSelected !== item) {
             this.currentSelected.selected = false;
@@ -164,6 +183,7 @@ class TreeView extends HostSemantics(VividElement) {
       this.nested = this.checkForNestedItems();
       const treeItems = this.getVisibleNodes();
       treeItems.forEach((node) => {
+        /* v8 ignore else -- @preserve */
         if (isTreeItemElement(node)) {
           node.nested = this.nested;
         }
@@ -213,8 +233,10 @@ class TreeView extends HostSemantics(VividElement) {
    */
   focusNextNode(delta, item) {
     const visibleNodes = this.getVisibleNodes();
+    /* v8 ignore else -- @preserve */
     if (visibleNodes) {
       const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
+      /* v8 ignore else -- @preserve */
       if (isHTMLElement(focusItem)) {
         TreeItem.focusItem(focusItem);
       }