@vonage/vivid 5.15.0 → 5.15.1

package/tag/index.cjs

@@ -1,4 +1,4 @@
-"use strict";const _=require("../bundled/definition2.cjs"),r=require("../bundled/vivid-element.cjs"),d=require("../bundled/affix.cjs"),p=require("../bundled/delegates-aria.cjs"),f=require("../bundled/localized.cjs"),v=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs");var b=Object.defineProperty,l=(n,a,t,i)=>{for(var o=void 0,e=n.length-1,s;e>=0;e--)(s=n[e])&&(o=s(a,t,o)||o);return o&&b(a,t,o),o};class c extends f.Localized(p.DelegatesAria(d.AffixIcon(r.VividElement))){constructor(){super(...arguments),this.removable=!1,this.disabled=!1,this.selectable=!1,this.selected=!1,this.#o=()=>{!this.selectable||this.disabled||(this.selected=!this.selected,this.$emit("selected-change"))}}remove(){!this.removable||this.selectable||(this.$emit("removed"),this.parentElement&&this.parentElement.removeChild(this))}#o;handleKeydown(a){return(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),this.#o()),(a.key==="Delete"||a.key==="Backspace")&&(a.preventDefault(),this.remove()),!0}handleClick(){this.#o()}}l([r.attr],c.prototype,"connotation");l([r.attr],c.prototype,"shape");l([r.attr],c.prototype,"appearance");l([r.attr],c.prototype,"label");l([r.attr({mode:"boolean"})],c.prototype,"removable");l([r.attr({mode:"boolean"})],c.prototype,"disabled");l([r.attr({mode:"boolean"})],c.prototype,"selectable");l([r.attr({mode:"boolean"})],c.prototype,"selected");const g=".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary: var(--vvd-tag-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-tag-success-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-tag-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-tag-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-tag-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-tag-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-tag-success-firm-all, var(--vvd-color-success-600));--_connotation-color-faint: var(--vvd-tag-success-faint, var(--vvd-color-success-50));--_connotation-color-dim: var(--vvd-tag-success-dim, var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-tag-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-tag-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-tag-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-tag-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-tag-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-tag-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-tag-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-faint: var(--vvd-tag-alert-faint, var(--vvd-color-alert-50));--_connotation-color-dim: var(--vvd-tag-alert-dim, var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-tag-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-tag-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-tag-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-tag-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-tag-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-tag-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm: var(--vvd-tag-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-tag-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-faint: var(--vvd-tag-warning-faint, var(--vvd-color-warning-50));--_connotation-color-dim: var(--vvd-tag-warning-dim, var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary: var(--vvd-tag-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-tag-information-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-tag-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-tag-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-tag-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-tag-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-tag-information-firm-all, var(--vvd-color-information-600));--_connotation-color-faint: var(--vvd-tag-information-faint, var(--vvd-color-information-50));--_connotation-color-dim: var(--vvd-tag-information-dim, var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-tag-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-tag-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-tag-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-tag-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-tag-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-tag-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-tag-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-faint: var(--vvd-tag-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-dim: var(--vvd-tag-announcement-dim, var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_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: transparent}.base:disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_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: transparent}.base.disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border:none;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}",m=({connotation:n,appearance:a,shape:t,disabled:i,selectable:o,removable:e,selected:s})=>u.classNames("base",["disabled",i],["selectable",o],["selected",o&&s],["removable",e&&!o],[`connotation-${n}`,!!n],[`appearance-${a}`,!!a],[`shape-${t}`,!!t]);function h(n){return r.html`
+"use strict";const _=require("../bundled/definition2.cjs"),r=require("../bundled/vivid-element.cjs"),d=require("../bundled/affix.cjs"),p=require("../bundled/delegates-aria.cjs"),f=require("../bundled/localized.cjs"),v=require("../bundled/when.cjs"),u=require("../bundled/class-names.cjs");var b=Object.defineProperty,l=(n,a,t,i)=>{for(var o=void 0,e=n.length-1,s;e>=0;e--)(s=n[e])&&(o=s(a,t,o)||o);return o&&b(a,t,o),o};class c extends f.Localized(p.DelegatesAria(d.AffixIcon(r.VividElement))){constructor(){super(...arguments),this.removable=!1,this.disabled=!1,this.selectable=!1,this.selected=!1,this.#o=()=>{!this.selectable||this.disabled||(this.selected=!this.selected,this.$emit("selected-change"))}}remove(){!this.removable||this.selectable||(this.$emit("removed"),this.parentElement&&this.parentElement.removeChild(this))}#o;handleKeydown(a){return(a.key==="Enter"||a.key===" ")&&(a.preventDefault(),this.#o()),(a.key==="Delete"||a.key==="Backspace")&&(a.preventDefault(),this.remove()),!0}handleClick(){this.#o()}}l([r.attr],c.prototype,"connotation");l([r.attr],c.prototype,"shape");l([r.attr],c.prototype,"appearance");l([r.attr],c.prototype,"label");l([r.attr({mode:"boolean"})],c.prototype,"removable");l([r.attr({mode:"boolean"})],c.prototype,"disabled");l([r.attr({mode:"boolean"})],c.prototype,"selectable");l([r.attr({mode:"boolean"})],c.prototype,"selected");const g=".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary: var(--vvd-tag-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-tag-success-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-tag-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-tag-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-tag-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-tag-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-tag-success-firm-all, var(--vvd-color-success-600));--_connotation-color-faint: var(--vvd-tag-success-faint, var(--vvd-color-success-50));--_connotation-color-dim: var(--vvd-tag-success-dim, var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-tag-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-tag-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-tag-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-tag-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-tag-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-tag-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-tag-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-faint: var(--vvd-tag-alert-faint, var(--vvd-color-alert-50));--_connotation-color-dim: var(--vvd-tag-alert-dim, var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-tag-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-tag-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-tag-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-tag-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-tag-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-tag-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm: var(--vvd-tag-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-tag-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-faint: var(--vvd-tag-warning-faint, var(--vvd-color-warning-50));--_connotation-color-dim: var(--vvd-tag-warning-dim, var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary: var(--vvd-tag-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-tag-information-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-tag-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-tag-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-tag-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-tag-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-tag-information-firm-all, var(--vvd-color-information-600));--_connotation-color-faint: var(--vvd-tag-information-faint, var(--vvd-color-information-50));--_connotation-color-dim: var(--vvd-tag-information-dim, var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-tag-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-tag-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-tag-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-tag-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-tag-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-tag-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-tag-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-faint: var(--vvd-tag-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-dim: var(--vvd-tag-announcement-dim, var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_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: transparent}.base:disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_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: transparent}.base.disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border:none;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}",m=({connotation:n,appearance:a,shape:t,disabled:i,selectable:o,removable:e,selected:s})=>u.classNames("base",["disabled",i],["selectable",o],["selected",o&&s],["removable",e&&!o],[`connotation-${n}`,!!n],[`appearance-${a}`,!!a],[`shape-${t}`,!!t]);function h(n){return r.html`
 	<button
 		class="dismiss-button"
 		aria-label="${a=>a.locale.tag.remove(a.label)}"

package/tag/index.js

@@ -51,7 +51,7 @@ l([
 l([
   c({ mode: "boolean" })
 ], e.prototype, "selected");
-const C = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary: var(--vvd-tag-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-tag-success-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-tag-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-tag-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-tag-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-tag-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-tag-success-firm-all, var(--vvd-color-success-600));--_connotation-color-faint: var(--vvd-tag-success-faint, var(--vvd-color-success-50));--_connotation-color-dim: var(--vvd-tag-success-dim, var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-tag-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-tag-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-tag-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-tag-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-tag-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-tag-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-tag-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-faint: var(--vvd-tag-alert-faint, var(--vvd-color-alert-50));--_connotation-color-dim: var(--vvd-tag-alert-dim, var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-tag-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-tag-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-tag-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-tag-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-tag-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-tag-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm: var(--vvd-tag-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-tag-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-faint: var(--vvd-tag-warning-faint, var(--vvd-color-warning-50));--_connotation-color-dim: var(--vvd-tag-warning-dim, var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary: var(--vvd-tag-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-tag-information-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-tag-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-tag-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-tag-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-tag-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-tag-information-firm-all, var(--vvd-color-information-600));--_connotation-color-faint: var(--vvd-tag-information-faint, var(--vvd-color-information-50));--_connotation-color-dim: var(--vvd-tag-information-dim, var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-tag-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-tag-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-tag-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-tag-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-tag-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-tag-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-tag-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-faint: var(--vvd-tag-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-dim: var(--vvd-tag-announcement-dim, var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_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: transparent}.base:disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_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: transparent}.base.disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border:none;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}", m = ({
+const C = ".base.connotation-cta{--_connotation-color-primary: var(--vvd-tag-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-tag-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-tag-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-pale: var(--vvd-tag-cta-pale, var(--vvd-color-cta-300));--_connotation-color-fierce: var(--vvd-tag-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-tag-cta-firm, var(--vvd-color-cta-600));--_connotation-color-firm-all: var(--vvd-tag-cta-firm-all, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tag-cta-faint, var(--vvd-color-cta-50));--_connotation-color-dim: var(--vvd-tag-cta-dim, var(--vvd-color-cta-200))}.base.connotation-success{--_connotation-color-primary: var(--vvd-tag-success-primary, var(--vvd-color-success-500));--_connotation-color-primary-text: var(--vvd-tag-success-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-success-soft, var(--vvd-color-success-100));--_connotation-color-contrast: var(--vvd-tag-success-contrast, var(--vvd-color-success-800));--_connotation-color-pale: var(--vvd-tag-success-pale, var(--vvd-color-success-300));--_connotation-color-fierce: var(--vvd-tag-success-fierce, var(--vvd-color-success-700));--_connotation-color-firm: var(--vvd-tag-success-firm, var(--vvd-color-success-600));--_connotation-color-firm-all: var(--vvd-tag-success-firm-all, var(--vvd-color-success-600));--_connotation-color-faint: var(--vvd-tag-success-faint, var(--vvd-color-success-50));--_connotation-color-dim: var(--vvd-tag-success-dim, var(--vvd-color-success-200))}.base.connotation-alert{--_connotation-color-primary: var(--vvd-tag-alert-primary, var(--vvd-color-alert-500));--_connotation-color-primary-text: var(--vvd-tag-alert-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-alert-soft, var(--vvd-color-alert-100));--_connotation-color-contrast: var(--vvd-tag-alert-contrast, var(--vvd-color-alert-800));--_connotation-color-pale: var(--vvd-tag-alert-pale, var(--vvd-color-alert-300));--_connotation-color-fierce: var(--vvd-tag-alert-fierce, var(--vvd-color-alert-700));--_connotation-color-firm: var(--vvd-tag-alert-firm, var(--vvd-color-alert-600));--_connotation-color-firm-all: var(--vvd-tag-alert-firm-all, var(--vvd-color-alert-600));--_connotation-color-faint: var(--vvd-tag-alert-faint, var(--vvd-color-alert-50));--_connotation-color-dim: var(--vvd-tag-alert-dim, var(--vvd-color-alert-200))}.base.connotation-warning{--_connotation-color-primary: var(--vvd-tag-warning-primary, var(--vvd-color-warning-300));--_connotation-color-primary-text: var(--vvd-tag-warning-primary-text, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-tag-warning-soft, var(--vvd-color-warning-100));--_connotation-color-contrast: var(--vvd-tag-warning-contrast, var(--vvd-color-warning-800));--_connotation-color-pale: var(--vvd-tag-warning-pale, var(--vvd-color-warning-300));--_connotation-color-fierce: var(--vvd-tag-warning-fierce, var(--vvd-color-warning-700));--_connotation-color-firm: var(--vvd-tag-warning-firm, var(--vvd-color-warning-600));--_connotation-color-firm-all: var(--vvd-tag-warning-firm-all, var(--vvd-color-warning-600));--_connotation-color-faint: var(--vvd-tag-warning-faint, var(--vvd-color-warning-50));--_connotation-color-dim: var(--vvd-tag-warning-dim, var(--vvd-color-warning-200))}.base.connotation-information{--_connotation-color-primary: var(--vvd-tag-information-primary, var(--vvd-color-information-500));--_connotation-color-primary-text: var(--vvd-tag-information-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-information-soft, var(--vvd-color-information-100));--_connotation-color-contrast: var(--vvd-tag-information-contrast, var(--vvd-color-information-800));--_connotation-color-pale: var(--vvd-tag-information-pale, var(--vvd-color-information-300));--_connotation-color-fierce: var(--vvd-tag-information-fierce, var(--vvd-color-information-700));--_connotation-color-firm: var(--vvd-tag-information-firm, var(--vvd-color-information-600));--_connotation-color-firm-all: var(--vvd-tag-information-firm-all, var(--vvd-color-information-600));--_connotation-color-faint: var(--vvd-tag-information-faint, var(--vvd-color-information-50));--_connotation-color-dim: var(--vvd-tag-information-dim, var(--vvd-color-information-200))}.base.connotation-announcement{--_connotation-color-primary: var(--vvd-tag-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-tag-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-announcement-soft, var(--vvd-color-announcement-100));--_connotation-color-contrast: var(--vvd-tag-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-pale: var(--vvd-tag-announcement-pale, var(--vvd-color-announcement-300));--_connotation-color-fierce: var(--vvd-tag-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-tag-announcement-firm, var(--vvd-color-announcement-600));--_connotation-color-firm-all: var(--vvd-tag-announcement-firm-all, var(--vvd-color-announcement-600));--_connotation-color-faint: var(--vvd-tag-announcement-faint, var(--vvd-color-announcement-50));--_connotation-color-dim: var(--vvd-tag-announcement-dim, var(--vvd-color-announcement-200))}.base:not(.connotation-cta,.connotation-success,.connotation-alert,.connotation-warning,.connotation-information,.connotation-announcement){--_connotation-color-primary: var(--vvd-tag-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-tag-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-soft: var(--vvd-tag-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-tag-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-pale: var(--vvd-tag-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-fierce: var(--vvd-tag-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-tag-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-firm-all: var(--vvd-tag-accent-firm-all, var(--vvd-color-neutral-600));--_connotation-color-faint: var(--vvd-tag-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-dim: var(--vvd-tag-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 85%);--_appearance-color-outline: transparent}@media(hover:hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm-all)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 75%);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base:active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-pale);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: var(--_connotation-color-pale)}.base.active:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 65%);--_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: transparent}.base:disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base:disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_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: transparent}.base.disabled.appearance-duotone{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--vvd-color-neutral-100)}.base.disabled.appearance-subtle-light{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)).appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm-all);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: var(--_connotation-color-pale)}.base.selected:where(:not(.disabled,:disabled)).appearance-subtle-light{--_appearance-color-text: var(--vvd-color-canvas);--_appearance-color-fill: var(--_connotation-color-firm);--_appearance-color-outline: transparent}.base{--tag-block-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;position:relative;display:inline-flex;box-sizing:border-box;align-items:center;border:none;background-color:var(--_appearance-color-fill);block-size:var(--tag-block-size);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);column-gap:8px;font:var(--vvd-typography-base-bold);max-inline-size:100%;padding-inline:8px;vertical-align:middle}.base:not(.shape-pill){border-radius:4px}.base.shape-pill{border-radius:16px}.base:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{cursor:not-allowed;pointer-events:none}.base.removable{cursor:auto;padding-inline:8px 1px}.label{overflow:hidden;max-inline-size:100%;text-overflow:ellipsis;white-space:nowrap}slot[name=icon]{font-size:calc(var(--tag-block-size) / 1.5);line-height:1}.dismiss-button{position:relative;display:flex;align-items:center;padding:4px;border:none;border-radius:inherit;background-color:var(--_appearance-color-fill);cursor:pointer;inset-inline-start:-4px}.dismiss-button:focus-visible{--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, 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))}", m = ({
   connotation: r,
   appearance: a,
   shape: n,

package/tag-group/definition.js

@@ -1,4 +1,4 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
 import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
 import { html } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';

package/text-area/definition.cjs

@@ -16,7 +16,7 @@ const withSuccessText = require('../unbundled/with-success-text.cjs');
 const formElement = require('../unbundled/form-element.cjs');
 const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
-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(--focus-stroke-color, 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}";
+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(--focus-stroke-color, 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();
@@ -129,7 +129,6 @@ class TextArea extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   readOnlyChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -138,7 +137,6 @@ class TextArea extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   autofocusChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.autofocus = this.autofocus;
     }
@@ -147,7 +145,6 @@ class TextArea extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   listChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.setAttribute("list", this.list);
     }
@@ -156,7 +153,6 @@ class TextArea extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   maxlengthChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.maxLength = this.maxlength;
     }
@@ -165,7 +161,6 @@ class TextArea extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   minlengthChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.minLength = this.minlength;
     }
@@ -174,7 +169,6 @@ class TextArea extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   spellcheckChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.spellcheck = this.spellcheck;
     }

package/text-area/definition.js

@@ -1,4 +1,4 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { V as VividElement, c as createRegisterFunction, d as defineVividComponent } from '../unbundled/vivid-element.js';
 import { a as WithFeedback, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
 import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
 import { contextualHelpDefinition } from '../contextual-help/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 = ".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(--focus-stroke-color, 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}";
+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(--focus-stroke-color, 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,7 +125,6 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   readOnlyChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.readOnly = this.readOnly;
     }
@@ -134,7 +133,6 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   autofocusChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.autofocus = this.autofocus;
     }
@@ -143,7 +141,6 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   listChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.setAttribute("list", this.list);
     }
@@ -152,7 +149,6 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   maxlengthChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.maxLength = this.maxlength;
     }
@@ -161,7 +157,6 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   minlengthChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.minLength = this.minlength;
     }
@@ -170,7 +165,6 @@ class TextArea extends WithContextualHelp(
    * @internal
    */
   spellcheckChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLTextAreaElement) {
       this.proxy.spellcheck = this.spellcheck;
     }

package/text-area/index.cjs

@@ -1,4 +1,4 @@
-"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(--focus-stroke-color, 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">
+"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(--focus-stroke-color, 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(){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">
 		${c=>c.label}
 	</label>`}const E=c=>r.html`
 		<div class="${A}">

package/text-area/index.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 = ".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(--focus-stroke-color, 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}";
+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(--focus-stroke-color, 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;
@@ -103,42 +103,36 @@ 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);
   }
   /**

package/text-field/definition.cjs

@@ -73,7 +73,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   readOnlyChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.readOnly = this.readOnly;
       this.validate();
@@ -83,7 +82,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   autofocusChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.autofocus = this.autofocus;
       this.validate();
@@ -93,7 +91,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   placeholderChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.placeholder = this.placeholder;
     }
@@ -102,7 +99,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   typeChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.type = this.type;
       this.validate();
@@ -112,7 +108,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   listChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.setAttribute("list", this.list);
       this.validate();
@@ -122,7 +117,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   maxlengthChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.maxLength = this.maxlength;
       this.validate();
@@ -132,7 +126,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   minlengthChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.minLength = this.minlength;
       this.validate();
@@ -142,7 +135,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   patternChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.pattern = this.pattern;
       this.validate();
@@ -152,7 +144,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   sizeChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.size = this.size;
     }
@@ -161,7 +152,6 @@ class TextField extends withContextualHelp.WithContextualHelp(
    * @internal
    */
   spellcheckChanged() {
-    /* v8 ignore if -- @preserve */
     if (this.proxy instanceof HTMLInputElement) {
       this.proxy.spellcheck = this.spellcheck;
     }