@vonage/vivid 5.23.1-preview.0 → 5.24.0

package/bundled/definition11.js

@@ -1,7 +1,7 @@
 import { d as e, m as t, p as n, t as r, u as i } from "./vivid-element.js";
 import { t as a } from "./decorate.js";
-import { r as o, t as s } from "./definition2.js";
-import { t as c } from "./class-names.js";
+import { t as o } from "./class-names.js";
+import { r as s, t as c } from "./definition3.js";
 import { n as l, r as u } from "./definition10.js";
 //#region src/lib/contextual-help/contextual-help.ts
 var d = class extends r {
@@ -12,8 +12,8 @@ var d = class extends r {
 a([t({ mode: "fromView" })], d.prototype, "placement", void 0);
 //#endregion
 //#region src/lib/contextual-help/contextual-help.template.ts
-var f = (e) => c("control"), p = i("contextual-help", d, (e) => {
-	let t = e.tagFor(u), r = e.tagFor(o);
+var f = (e) => o("control"), p = i("contextual-help", d, (e) => {
+	let t = e.tagFor(u), r = e.tagFor(s);
 	return n`
 		<${t} class="base" exportparts="vvd-theme-alternate">
 			<button class="${f}" slot="anchor">
@@ -24,6 +24,6 @@ var f = (e) => c("control"), p = i("contextual-help", d, (e) => {
 			<slot></slot>
 		</${t}>
 	`;
-}, [s, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
+}, [c, l], { styles: ".control{--_connotation-color-primary:var(--vvd-button-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-button-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-button-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-contrast:var(--vvd-button-accent-contrast,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-button-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-firm:var(--vvd-button-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-soft:var(--vvd-button-accent-soft,var(--vvd-color-neutral-100));--_connotation-color-faint:var(--vvd-button-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce-primary:var(--vvd-button-accent-fierce-primary,var(--vvd-color-canvas-text));--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}@media (hover:hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.control:disabled,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.control{--focus-stroke-gap-color:transparent;box-sizing:border-box;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size,24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size,24px) / 6);vertical-align:middle;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{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))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = e(p);
 //#endregion
 export { m as n, p as t };

package/bundled/definition12.cjs

@@ -1,10 +1,12 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./definition2.cjs`),s=require(`./affix.cjs`),c=require(`./form-element.cjs`),l=require(`./with-success-text.cjs`),u=require(`./with-error-text.cjs`),d=require(`./with-contextual-help.cjs`),f=require(`./class-names.cjs`),p=require(`./delegates-aria.cjs`),m=require(`./char-count.cjs`),h=require(`./form-associated.cjs`),g=require(`./render-in-light-dom.cjs`),_=require(`./mixins.cjs`),v=require(`./definition11.cjs`),y=require(`./text-field.cjs`);var b={email:`email`,password:`password`,tel:`tel`,text:`text`,url:`url`},x=new e.w([`
+const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./definition.cjs`),a=require(`./decorate.cjs`),o=require(`./class-names.cjs`),s=require(`./definition3.cjs`),c=require(`./affix.cjs`),l=require(`./delegates-aria.cjs`),u=require(`./form-associated.cjs`),d=require(`./render-in-light-dom.cjs`),f=require(`./mixins.cjs`),p=require(`./definition11.cjs`),m=require(`./form-element.cjs`),h=require(`./char-count.cjs`),g=require(`./with-contextual-help.cjs`),_=require(`./with-error-text.cjs`),v=require(`./with-success-text.cjs`),y=require(`./text-field.cjs`);var b={email:`email`,password:`password`,tel:`tel`,text:`text`,url:`url`},x=new e.w([`
 	._vvd-3-text-field-safari-workaround::placeholder {
 		opacity: 1 !important;
 		-webkit-text-fill-color: var(--_low-ink-color) !important;
 	}
-`]),S=e=>{let t=e.getRootNode();x.isAttachedTo(t)||x.addStylesTo(t)},C=class extends d.t(_.n(m.t(u.t(l.t(c.t(s.t(p.t(h.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=b.text,this.#e=g.n()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute(`list`,this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(e,t){super.valueChanged(e,t),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(e){this.value=this.control.value,e.stopPropagation(),this.$emit(`input`)}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.validate(),this.autofocus&&e.M.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),S(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}};a.t([e.m({attribute:`readonly`,mode:`boolean`})],C.prototype,`readOnly`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`autofocus`,void 0),a.t([e.m],C.prototype,`placeholder`,void 0),a.t([e.m],C.prototype,`type`,void 0),a.t([e.m],C.prototype,`list`,void 0),a.t([e.m({converter:e.h})],C.prototype,`maxlength`,void 0),a.t([e.m({converter:e.h})],C.prototype,`minlength`,void 0),a.t([e.m],C.prototype,`pattern`,void 0),a.t([e.m({converter:e.h})],C.prototype,`size`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`spellcheck`,void 0),a.t([e.m],C.prototype,`appearance`,void 0),a.t([e.m],C.prototype,`shape`,void 0),a.t([e.m],C.prototype,`autoComplete`,void 0),a.t([e.m()],C.prototype,`scale`,void 0),a.t([e.m({attribute:`inputmode`})],C.prototype,`inputMode`,void 0),a.t([e.A],C.prototype,`actionItemsSlottedContent`,void 0),a.t([e.A],C.prototype,`leadingActionItemsSlottedContent`,void 0);var w=e=>`vvd-text-field-control-${e}`,T=({errorValidationMessage:e,disabled:t,value:n,readOnly:r,placeholder:i,appearance:a,shape:o,label:s,successText:c,actionItemsSlottedContent:l,leadingActionItemsSlottedContent:u,icon:d,scale:p})=>f.t([`error`,!!e],[`disabled`,t],[`has-value`,!!n],[`readonly`,r],[`placeholder`,!!i],[`appearance-${a}`,!!a],[`shape-${o}`,!!o],[`no-label`,!s],[`has-icon`,!!d],[`success`,!!c],[`action-items`,!!l?.length],[`leading-action-items`,!!u?.length],[`no-leading`,!(u?.length||d)],[`size-${p}`,!!p]),E=e.u(`text-field`,C,i=>{let a=s.a(i);return e.p`
-		<div class="base ${T}">
+`]),S=e=>{let t=e.getRootNode();x.isAttachedTo(t)||x.addStylesTo(t)},C=class extends g.t(f.n(h.t(_.t(v.t(m.t(c.t(l.t(u.n(e.t))))))))){constructor(...e){super(...e),this.proxy=document.createElement(`input`),this.type=b.text,this.#e=d.n()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute(`list`,this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(e,t){super.valueChanged(e,t),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(e){this.value=this.control.value,e.stopPropagation(),this.$emit(`input`)}handleChange(){this.$emit(`change`)}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute(`type`,this.type),this.validate(),this.autofocus&&e.M.enqueue(()=>{this.focus()}),this._updateControlValueIfNeeded(),S(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}};a.t([e.m({attribute:`readonly`,mode:`boolean`})],C.prototype,`readOnly`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`autofocus`,void 0),a.t([e.m],C.prototype,`placeholder`,void 0),a.t([e.m],C.prototype,`type`,void 0),a.t([e.m],C.prototype,`list`,void 0),a.t([e.m({converter:e.h})],C.prototype,`maxlength`,void 0),a.t([e.m({converter:e.h})],C.prototype,`minlength`,void 0),a.t([e.m],C.prototype,`pattern`,void 0),a.t([e.m({converter:e.h})],C.prototype,`size`,void 0),a.t([e.m({mode:`boolean`})],C.prototype,`spellcheck`,void 0),a.t([e.m],C.prototype,`appearance`,void 0),a.t([e.m],C.prototype,`shape`,void 0),a.t([e.m],C.prototype,`autoComplete`,void 0),a.t([e.m()],C.prototype,`scale`,void 0),a.t([e.m({attribute:`inputmode`})],C.prototype,`inputMode`,void 0),a.t([e.A],C.prototype,`actionItemsSlottedContent`,void 0),a.t([e.A],C.prototype,`leadingActionItemsSlottedContent`,void 0);var w=e=>`vvd-text-field-control-${e}`,T=e.u(`text-field`,C,i=>{let a=c.a(i);return e.p`
+		<div
+			class="base ${e=>o.t([`error`,!!e.errorValidationMessage],[`disabled`,e.disabled],[`has-value`,!!e.value],[`readonly`,e.readOnly],[`placeholder`,!!e.placeholder],[`appearance-${e.appearance}`,!!e.appearance],[`shape-${e.shape}`,!!e.shape],[`no-label`,!e.label],[`has-icon`,!!e.icon],[`success`,!!e.successText],[`action-items`,!!e.actionItemsSlottedContent?.length],[`leading-action-items`,!!e.leadingActionItemsSlottedContent?.length],[`no-leading`,!(e.leadingActionItemsSlottedContent?.length||e.icon)],[`size-${e.scale}`,!!e.scale])}"
+		>
 			${r.t(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(i))}
 			<div
 				class="label-wrapper"
@@ -16,7 +18,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
 					${t.t(`_contextualHelpSlottedContent`)}
 				></slot>
 			</div>
-			${g.t(e.p`
+			${d.t(e.p`
 				${r.t(e=>e.label,e.p`
 						<label slot="_label" for="${e=>w(e._uniqueId)}">
 							${e=>e.label}
@@ -33,7 +35,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
 				</div>
 				<div class="wrapper">
 					<slot class="control" name="_control"></slot>
-					${g.t(e.p`<input
+					${d.t(e.p`<input
 							slot="_control"
 							id="${e=>w(e._uniqueId)}"
 							class="_vvd-3-text-field-safari-workaround"
@@ -56,7 +58,7 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
 							type="${e=>e.type}"
 							inputmode="${e=>e.inputMode}"
 							value="${e=>e.initialValue}"
-							${p.n({ariaDescribedBy:e=>`${e._feedbackDescribedBy} ${e.charCount&&e.maxlength?e._charCountDescribedBy:null}`})}
+							${l.n({ariaDescribedBy:e=>`${e._feedbackDescribedBy} ${e.charCount&&e.maxlength?e._charCountDescribedBy:null}`})}
 							${n.t(`control`)}
 						/>`)}
 				</div>
@@ -69,4 +71,4 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
 			</div>
 			${e=>e._getFeedbackTemplate(i)}
 		</div>
-	`},[o.t,_.r,i.n,v.t],{styles:y.t,shadowOptions:{delegatesFocus:!0}}),D=e.d(E);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return E}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return D}});
+	`},[s.t,f.r,i.n,p.t],{styles:y.t,shadowOptions:{delegatesFocus:!0}}),E=e.d(T);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return T}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return C}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return E}});

package/bundled/definition12.js

@@ -4,19 +4,19 @@ import { t as u } from "./ref.js";
 import { t as d } from "./when.js";
 import { n as f } from "./definition.js";
 import { t as p } from "./decorate.js";
-import { t as m } from "./definition2.js";
-import { a as h, t as g } from "./affix.js";
-import { t as _ } from "./form-element.js";
-import { t as v } from "./with-success-text.js";
-import { t as y } from "./with-error-text.js";
-import { t as b } from "./with-contextual-help.js";
-import { t as x } from "./class-names.js";
-import { n as S, t as C } from "./delegates-aria.js";
-import { t as w } from "./char-count.js";
-import { n as T } from "./form-associated.js";
-import { n as E, t as D } from "./render-in-light-dom.js";
-import { n as O, r as k } from "./mixins.js";
-import { t as A } from "./definition11.js";
+import { t as m } from "./class-names.js";
+import { t as h } from "./definition3.js";
+import { a as g, t as _ } from "./affix.js";
+import { n as v, t as y } from "./delegates-aria.js";
+import { n as b } from "./form-associated.js";
+import { n as x, t as S } from "./render-in-light-dom.js";
+import { n as C, r as w } from "./mixins.js";
+import { t as T } from "./definition11.js";
+import { t as E } from "./form-element.js";
+import { t as D } from "./char-count.js";
+import { t as O } from "./with-contextual-help.js";
+import { t as k } from "./with-error-text.js";
+import { t as A } from "./with-success-text.js";
 import { t as j } from "./text-field.js";
 //#region src/lib/text-field/text-field.ts
 var M = {
@@ -28,9 +28,9 @@ var M = {
 }, N = new c(["\n	._vvd-3-text-field-safari-workaround::placeholder {\n		opacity: 1 !important;\n		-webkit-text-fill-color: var(--_low-ink-color) !important;\n	}\n"]), P = (e) => {
 	let t = e.getRootNode();
 	N.isAttachedTo(t) || N.addStylesTo(t);
-}, F = class extends b(O(w(y(v(_(g(C(T(o))))))))) {
+}, F = class extends O(C(D(k(A(E(_(y(b(o))))))))) {
 	constructor(...e) {
-		super(...e), this.proxy = document.createElement("input"), this.type = M.text, this.#e = E();
+		super(...e), this.proxy = document.createElement("input"), this.type = M.text, this.#e = x();
 	}
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
@@ -109,10 +109,12 @@ p([i({
 })], F.prototype, "readOnly", void 0), p([i({ mode: "boolean" })], F.prototype, "autofocus", void 0), p([i], F.prototype, "placeholder", void 0), p([i], F.prototype, "type", void 0), p([i], F.prototype, "list", void 0), p([i({ converter: r })], F.prototype, "maxlength", void 0), p([i({ converter: r })], F.prototype, "minlength", void 0), p([i], F.prototype, "pattern", void 0), p([i({ converter: r })], F.prototype, "size", void 0), p([i({ mode: "boolean" })], F.prototype, "spellcheck", void 0), p([i], F.prototype, "appearance", void 0), p([i], F.prototype, "shape", void 0), p([i], F.prototype, "autoComplete", void 0), p([i()], F.prototype, "scale", void 0), p([i({ attribute: "inputmode" })], F.prototype, "inputMode", void 0), p([e], F.prototype, "actionItemsSlottedContent", void 0), p([e], F.prototype, "leadingActionItemsSlottedContent", void 0);
 //#endregion
 //#region src/lib/text-field/text-field.template.ts
-var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e, disabled: t, value: n, readOnly: r, placeholder: i, appearance: a, shape: o, label: s, successText: c, actionItemsSlottedContent: l, leadingActionItemsSlottedContent: u, icon: d, scale: f }) => x(["error", !!e], ["disabled", t], ["has-value", !!n], ["readonly", r], ["placeholder", !!i], [`appearance-${a}`, !!a], [`shape-${o}`, !!o], ["no-label", !s], ["has-icon", !!d], ["success", !!c], ["action-items", !!l?.length], ["leading-action-items", !!u?.length], ["no-leading", !(u?.length || d)], [`size-${f}`, !!f]), R = s("text-field", F, (e) => {
-	let t = h(e);
+var I = (e) => `vvd-text-field-control-${e}`, L = s("text-field", F, (e) => {
+	let t = g(e);
 	return a`
-		<div class="base ${L}">
+		<div
+			class="base ${(e) => m(["error", !!e.errorValidationMessage], ["disabled", e.disabled], ["has-value", !!e.value], ["readonly", e.readOnly], ["placeholder", !!e.placeholder], [`appearance-${e.appearance}`, !!e.appearance], [`shape-${e.shape}`, !!e.shape], ["no-label", !e.label], ["has-icon", !!e.icon], ["success", !!e.successText], ["action-items", !!e.actionItemsSlottedContent?.length], ["leading-action-items", !!e.leadingActionItemsSlottedContent?.length], ["no-leading", !(e.leadingActionItemsSlottedContent?.length || e.icon)], [`size-${e.scale}`, !!e.scale])}"
+		>
 			${d((e) => e.charCount && e.maxlength, (t) => t._getCharCountTemplate(e))}
 			<div
 				class="label-wrapper"
@@ -124,7 +126,7 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
 					${l("_contextualHelpSlottedContent")}
 				></slot>
 			</div>
-			${D(a`
+			${S(a`
 				${d((e) => e.label, a`
 						<label slot="_label" for="${(e) => I(e._uniqueId)}">
 							${(e) => e.label}
@@ -141,7 +143,7 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
 				</div>
 				<div class="wrapper">
 					<slot class="control" name="_control"></slot>
-					${D(a`<input
+					${S(a`<input
 							slot="_control"
 							id="${(e) => I(e._uniqueId)}"
 							class="_vvd-3-text-field-safari-workaround"
@@ -168,7 +170,7 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
 							type="${(e) => e.type}"
 							inputmode="${(e) => e.inputMode}"
 							value="${(e) => e.initialValue}"
-							${S({ ariaDescribedBy: (e) => `${e._feedbackDescribedBy} ${e.charCount && e.maxlength ? e._charCountDescribedBy : null}` })}
+							${v({ ariaDescribedBy: (e) => `${e._feedbackDescribedBy} ${e.charCount && e.maxlength ? e._charCountDescribedBy : null}` })}
 							${u("control")}
 						/>`)}
 				</div>
@@ -183,13 +185,13 @@ var I = (e) => `vvd-text-field-control-${e}`, L = ({ errorValidationMessage: e,
 		</div>
 	`;
 }, [
-	m,
-	k,
+	h,
+	w,
 	f,
-	A
+	T
 ], {
 	styles: j,
 	shadowOptions: { delegatesFocus: !0 }
-}), z = n(R);
+}), R = n(L);
 //#endregion
-export { R as n, F as r, z as t };
+export { L as n, F as r, R as t };

package/bundled/definition13.cjs

@@ -1,20 +1,22 @@
-const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./decorate.cjs`),r=require(`./definition2.cjs`),i=require(`./affix.cjs`),a=require(`./class-names.cjs`),o=require(`./host-semantics.cjs`);var s=`:host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@supports (user-select:none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--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(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close: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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}`,c=class extends o.t(i.n(e.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.tabIndex=`-1`,this.active=!1}_handleCloseClick(e){e.stopImmediatePropagation(),this.$emit(`close`)}_onKeyDown(e){return!this.removable||e.key!==`Delete`?!0:(e.stopImmediatePropagation(),this.$emit(`close`),!1)}};n.t([t.m({mode:`boolean`})],c.prototype,`disabled`,void 0),n.t([t.m],c.prototype,`connotation`,void 0),n.t([t.m],c.prototype,`shape`,void 0),n.t([t.m],c.prototype,`label`,void 0),n.t([t.m({mode:`boolean`})],c.prototype,`removable`,void 0),n.t([t.m({mode:`fromView`})],c.prototype,`tabIndex`,void 0),n.t([t.A],c.prototype,`active`,void 0);var l=({connotation:e,disabled:t,active:n,iconTrailing:r,shape:i,removable:o})=>a.t(`base`,[`connotation-${e}`,!!e&&n],[`shape-${i}`,!!i],[`disabled`,t],[`selected`,n],[`icon-trailing`,r],[`removable`,o]);function u(e){let n=i.a(e);return t.p`<button
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./definition3.cjs`),a=require(`./affix.cjs`),o=require(`./host-semantics.cjs`);var s=`:host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;user-select:none;min-block-size:40px;display:flex;position:relative}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--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(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close: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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}`,c=class extends o.t(a.n(e.t(t.t))){constructor(...e){super(...e),this.removable=!1,this.tabIndex=`-1`,this.active=!1}_handleCloseClick(e){e.stopImmediatePropagation(),this.$emit(`close`)}_onKeyDown(e){return!this.removable||e.key!==`Delete`?!0:(e.stopImmediatePropagation(),this.$emit(`close`),!1)}};n.t([t.m({mode:`boolean`})],c.prototype,`disabled`,void 0),n.t([t.m],c.prototype,`connotation`,void 0),n.t([t.m],c.prototype,`shape`,void 0),n.t([t.m],c.prototype,`label`,void 0),n.t([t.m({mode:`boolean`})],c.prototype,`removable`,void 0),n.t([t.m({mode:`fromView`})],c.prototype,`tabIndex`,void 0),n.t([t.A],c.prototype,`active`,void 0);function l(e){let n=a.a(e);return t.p`<button
 		aria-label="${e=>e.locale.tab.dismissButtonLabel}"
 		class="close"
 		id="close-btn"
 		@click="${(e,t)=>e._handleCloseClick(t.event)}"
 	>
-		${()=>n(`close-line`,i.i.Span)}
-	</button>`}var d=t.u(`tab`,c,e=>{let n=i.a(e);return t.p`
+		${()=>n(`close-line`,a.i.Span)}
+	</button>`}var u=t.u(`tab`,c,e=>{let n=a.a(e);return t.p`
 		<template
 			slot="tab"
 			?active="${e=>e.active}"
 			${o.n({role:`tab`,ariaDisabled:e=>e.disabled,ariaSelected:e=>e.active})}
 			@keydown="${(e,t)=>e._onKeyDown(t.event)}"
 		>
-			<div class="${l}">
-				${e=>n(e.icon,i.i.Slot)} ${e=>e.label}
-				${t=>t.removable?u(e):null}
+			<div
+				class="${e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation&&e.active],[`shape-${e.shape}`,!!e.shape],[`disabled`,e.disabled],[`selected`,e.active],[`icon-trailing`,e.iconTrailing],[`removable`,e.removable])}"
+			>
+				${e=>n(e.icon,a.i.Slot)} ${e=>e.label}
+				${t=>t.removable?l(e):null}
 			</div>
 		</template>
-	`},[r.t],{styles:s}),f=t.d(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});
+	`},[i.t],{styles:s}),d=t.d(u);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return d}});

package/bundled/definition13.js

@@ -1,12 +1,12 @@
 import { t as e } from "./localized.js";
 import { A as t, d as n, m as r, p as i, t as a, u as o } from "./vivid-element.js";
 import { t as s } from "./decorate.js";
-import { t as c } from "./definition2.js";
-import { a as l, i as u, n as d } from "./affix.js";
-import { t as f } from "./class-names.js";
+import { t as c } from "./class-names.js";
+import { t as l } from "./definition3.js";
+import { a as u, i as d, n as f } from "./affix.js";
 import { n as p, t as m } from "./host-semantics.js";
 //#region src/lib/tab/tab.scss?inline
-var h = ":host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;min-block-size:40px;display:flex;position:relative}@supports (user-select:none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--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(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close: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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}", g = class extends m(d(e(a))) {
+var h = ":host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-tab-cta-firm-wrapper:var(--vvd-tab-cta-firm)}.base{--vvd-tab-accent-firm:var(--_vvd-tab-accent-firm-wrapper,var(--vvd-tab-accent-primary));--vvd-tab-cta-firm:var(--_vvd-tab-cta-firm-wrapper,var(--vvd-tab-cta-primary))}:host(.vertical){grid-column:1;justify-content:end}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.base{--_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(--_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(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-faint);--_appearance-color-outline:transparent}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:var(--_connotation-color-soft);--_appearance-color-outline:transparent}.base.connotation-cta{--_connotation-color-primary-text:var(--vvd-tab-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-tab-cta-faint,var(--vvd-color-cta-50));--_connotation-color-fierce:var(--vvd-tab-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-pale:var(--vvd-tab-cta-pale,var(--vvd-color-cta-300));--_connotation-color-soft:var(--vvd-tab-cta-soft,var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text:var(--vvd-tab-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-firm:var(--vvd-tab-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-faint:var(--vvd-tab-accent-faint,var(--vvd-color-neutral-50));--_connotation-color-fierce:var(--vvd-tab-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-pale:var(--vvd-tab-accent-pale,var(--vvd-color-neutral-300));--_connotation-color-soft:var(--vvd-tab-accent-soft,var(--vvd-color-neutral-100))}.base{box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);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-bold);gap:var(--_tabs-tablist-gutter);vertical-align:middle;white-space:nowrap;user-select:none;min-block-size:40px;display:flex;position:relative}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--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(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{order:1;margin-inline-start:auto;display:inline-block}.close{background:0 0;border:none;border-radius:4px;justify-content:center;align-items:center;block-size:24px;inline-size:24px;display:flex;position:absolute;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close: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))}.close vwc-icon{font-size:12px}.close .icon{justify-content:center;align-items:center;display:flex}", g = class extends m(f(e(a))) {
 	constructor(...e) {
 		super(...e), this.removable = !1, this.tabIndex = "-1", this.active = !1;
 	}
@@ -20,22 +20,21 @@ var h = ":host{--_vvd-tab-accent-firm-wrapper:var(--vvd-tab-accent-firm);--_vvd-
 s([r({ mode: "boolean" })], g.prototype, "disabled", void 0), s([r], g.prototype, "connotation", void 0), s([r], g.prototype, "shape", void 0), s([r], g.prototype, "label", void 0), s([r({ mode: "boolean" })], g.prototype, "removable", void 0), s([r({ mode: "fromView" })], g.prototype, "tabIndex", void 0), s([t], g.prototype, "active", void 0);
 //#endregion
 //#region src/lib/tab/tab.template.ts
-var _ = ({ connotation: e, disabled: t, active: n, iconTrailing: r, shape: i, removable: a }) => f("base", [`connotation-${e}`, !!e && n], [`shape-${i}`, !!i], ["disabled", t], ["selected", n], ["icon-trailing", r], ["removable", a]);
-function v(e) {
-	let t = l(e);
+function _(e) {
+	let t = u(e);
 	return i`<button
 		aria-label="${(e) => e.locale.tab.dismissButtonLabel}"
 		class="close"
 		id="close-btn"
 		@click="${(e, t) => e._handleCloseClick(t.event)}"
 	>
-		${() => t("close-line", u.Span)}
+		${() => t("close-line", d.Span)}
 	</button>`;
 }
 //#endregion
 //#region src/lib/tab/definition.ts
-var y = o("tab", g, (e) => {
-	let t = l(e);
+var v = o("tab", g, (e) => {
+	let t = u(e);
 	return i`
 		<template
 			slot="tab"
@@ -47,12 +46,14 @@ var y = o("tab", g, (e) => {
 	})}
 			@keydown="${(e, t) => e._onKeyDown(t.event)}"
 		>
-			<div class="${_}">
-				${(e) => t(e.icon, u.Slot)} ${(e) => e.label}
-				${(t) => t.removable ? v(e) : null}
+			<div
+				class="${(e) => c("base", [`connotation-${e.connotation}`, !!e.connotation && e.active], [`shape-${e.shape}`, !!e.shape], ["disabled", e.disabled], ["selected", e.active], ["icon-trailing", e.iconTrailing], ["removable", e.removable])}"
+			>
+				${(e) => t(e.icon, d.Slot)} ${(e) => e.label}
+				${(t) => t.removable ? _(e) : null}
 			</div>
 		</template>
 	`;
-}, [c], { styles: h }), b = n(y);
+}, [l], { styles: h }), y = n(v);
 //#endregion
-export { y as n, g as r, b as t };
+export { v as n, g as r, y as t };

package/bundled/definition15.cjs

@@ -1,18 +1,19 @@
-const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./definition2.cjs`),a=require(`./form-element.cjs`),o=require(`./with-success-text.cjs`),s=require(`./with-error-text.cjs`),c=require(`./class-names.cjs`),l=require(`./delegates-aria.cjs`),u=require(`./form-associated.cjs`),d=require(`./mixins.cjs`);var f=`:host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@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-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}`,p=class extends l.t(d.t(s.t(o.t(a.t(u.t(e.t)))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}constructor(){super(),this.tabindex=null,this.proxy=document.createElement(`input`),this.initialValue=`on`,this.defaultSlottedNodes=[],this.indeterminate=!1,this.keypressHandler=e=>{if(e.target instanceof HTMLAnchorElement)return!0;if(!this.disabled&&!this.readOnly)switch(e.key){case` `:this.indeterminate&&=!1,this.checked=!this.checked;break}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement?!0:(!this.disabled&&!this.readOnly&&(this.indeterminate&&=!1,this.checked=!this.checked),!1),this.proxy.setAttribute(`type`,`checkbox`)}ariaCheckedChanged(e,t){super.ariaCheckedChanged(e,t),this.ariaChecked===`mixed`?this.indeterminate=!0:(this.indeterminate=!1,this.checked=this.ariaChecked===`true`)}checkedChanged(e,t){super.checkedChanged(e,t),this.ariaChecked=t?`true`:`false`,e!==void 0&&this.$emit(`input`)}};r.t([e.m({attribute:`tabindex`})],p.prototype,`tabindex`,void 0),r.t([e.m],p.prototype,`connotation`,void 0),r.t([e.m({attribute:`readonly`,mode:`boolean`})],p.prototype,`readOnly`,void 0),r.t([e.A],p.prototype,`defaultSlottedNodes`,void 0),r.t([e.m({attribute:`indeterminate`,mode:`boolean`})],p.prototype,`indeterminate`,void 0),r.t([e.A],p.prototype,`slottedContent`,void 0);var m=({connotation:e,readOnly:t,checked:n,disabled:r,indeterminate:i,errorValidationMessage:a,successText:o,label:s,slottedContent:l})=>c.t(`base`,[`connotation-${e}`,!!e],[`readonly`,t],[`checked`,n||i],[`disabled`,r],[`error connotation-alert`,!!a],[`success connotation-success`,!!o],[`hide-label`,!s&&!l?.length]),h=e.u(`checkbox`,p,r=>{let a=r.tagFor(i.r);return e.p`<template>
+const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./ref.cjs`),r=require(`./when.cjs`),i=require(`./decorate.cjs`),a=require(`./class-names.cjs`),o=require(`./definition3.cjs`),s=require(`./delegates-aria.cjs`),c=require(`./form-associated.cjs`),l=require(`./mixins.cjs`),u=require(`./form-element.cjs`),d=require(`./with-error-text.cjs`),f=require(`./with-success-text.cjs`);var p=`:host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@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-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}`,m=class extends s.t(l.t(d.t(f.t(u.t(c.t(e.t)))))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}constructor(){super(),this.tabindex=null,this.proxy=document.createElement(`input`),this.initialValue=`on`,this.defaultSlottedNodes=[],this.indeterminate=!1,this.keypressHandler=e=>{if(e.target instanceof HTMLAnchorElement)return!0;if(!this.disabled&&!this.readOnly)switch(e.key){case` `:this.indeterminate&&=!1,this.checked=!this.checked;break}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement?!0:(!this.disabled&&!this.readOnly&&(this.indeterminate&&=!1,this.checked=!this.checked),!1),this.proxy.setAttribute(`type`,`checkbox`)}ariaCheckedChanged(e,t){super.ariaCheckedChanged(e,t),this.ariaChecked===`mixed`?this.indeterminate=!0:(this.indeterminate=!1,this.checked=this.ariaChecked===`true`)}checkedChanged(e,t){super.checkedChanged(e,t),this.ariaChecked=t?`true`:`false`,e!==void 0&&this.$emit(`input`)}};i.t([e.m({attribute:`tabindex`})],m.prototype,`tabindex`,void 0),i.t([e.m],m.prototype,`connotation`,void 0),i.t([e.m({attribute:`readonly`,mode:`boolean`})],m.prototype,`readOnly`,void 0),i.t([e.A],m.prototype,`defaultSlottedNodes`,void 0),i.t([e.m({attribute:`indeterminate`,mode:`boolean`})],m.prototype,`indeterminate`,void 0),i.t([e.A],m.prototype,`slottedContent`,void 0);var h=e.u(`checkbox`,m,i=>{let c=i.tagFor(o.r);return e.p`<template>
 		<div
-			class="${m}"
-			${l.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly,ariaDescribedBy:e=>e._feedbackDescribedBy})}
+			${n.t(`control`)}
+			class="${e=>a.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`readonly`,e.readOnly],[`checked`,e.checked||e.indeterminate],[`disabled`,e.disabled],[`error connotation-alert`,!!e.errorValidationMessage],[`success connotation-success`,!!e.successText],[`hide-label`,!e.label&&!e.slottedContent?.length])}"
+			${s.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly,ariaDescribedBy:e=>e._feedbackDescribedBy})}
 			tabindex="${e=>e.tabindex===null?e.disabled?null:0:e.tabindex}"
 			@keypress="${(e,t)=>e.keypressHandler(t.event)}"
 			@click="${(e,t)=>e.clickHandler(t.event)}"
 		>
 			<div class="control">
-				${n.t(e=>e.checked&&!e.indeterminate,e.p`<${a} name="check-solid" class="icon"></${a}>`)}
-				${n.t(e=>e.indeterminate,e.p`<${a} name="minus-solid" class="icon"></${a}>`)}
+				${r.t(e=>e.checked&&!e.indeterminate,e.p`<${c} name="check-solid" class="icon"></${c}>`)}
+				${r.t(e=>e.indeterminate,e.p`<${c} name="minus-solid" class="icon"></${c}>`)}
 			</div>
 			${e.p`<label
 				>${e=>e.label}<slot ${t.t(`slottedContent`)}></slot
 			></label>`}
 		</div>
-		${e=>e._getFeedbackTemplate(r)}
-	</template>`},[i.t,d.r],{styles:f,shadowOptions:{delegatesFocus:!0}}),g=e.d(h);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});
+		${e=>e._getFeedbackTemplate(i)}
+	</template>`},[o.t,l.r],{styles:p,shadowOptions:{delegatesFocus:!0}}),g=e.d(h);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return g}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return m}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return h}});

package/bundled/definition15.js

@@ -1,17 +1,18 @@
 import { A as e, d as t, m as n, p as r, t as i, u as a } from "./vivid-element.js";
 import { t as o } from "./slotted.js";
-import { t as s } from "./when.js";
-import { t as c } from "./decorate.js";
-import { r as l, t as u } from "./definition2.js";
-import { t as d } from "./form-element.js";
-import { t as f } from "./with-success-text.js";
-import { t as p } from "./with-error-text.js";
-import { t as m } from "./class-names.js";
-import { n as h, t as g } from "./delegates-aria.js";
-import { t as _ } from "./form-associated.js";
-import { r as v, t as y } from "./mixins.js";
+import { t as s } from "./ref.js";
+import { t as c } from "./when.js";
+import { t as l } from "./decorate.js";
+import { t as u } from "./class-names.js";
+import { r as d, t as f } from "./definition3.js";
+import { n as p, t as m } from "./delegates-aria.js";
+import { t as h } from "./form-associated.js";
+import { r as g, t as _ } from "./mixins.js";
+import { t as v } from "./form-element.js";
+import { t as y } from "./with-error-text.js";
+import { t as b } from "./with-success-text.js";
 //#region src/lib/checkbox/checkbox.scss?inline
-var b = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@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-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}@supports (user-select:none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}", x = class extends g(y(p(f(d(_(i)))))) {
+var x = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-600);flex-direction:column;gap:4px;display:inline-flex}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-checkbox-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-checkbox-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-checkbox-cta-fierce,var(--vvd-color-cta-700));--_connotation-color-intermediate:var(--vvd-checkbox-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-checkbox-cta-firm,var(--vvd-color-cta-600))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-checkbox-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-checkbox-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-checkbox-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-fierce:var(--vvd-checkbox-accent-fierce,var(--vvd-color-neutral-700));--_connotation-color-intermediate:var(--vvd-checkbox-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-checkbox-accent-firm,var(--vvd-color-canvas-text))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@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-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{vertical-align:middle;align-items:start;gap:8px;display:inline-flex}.base:focus-visible{outline:none}.base{user-select:none}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.control{background-color:var(--_appearance-color-fill);block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:4px;flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative}.base:focus-visible .control{--focus-stroke-gap-color:transparent}.base:focus-visible .control:after{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}.base.error:not(.checked) .control{background-color:var(--vvd-color-canvas);box-shadow:inset 0 0 0 2px var(--vvd-color-alert-500)}.indicator{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) - 4px)}.base:not(.checked) .indicator.checkmark,.base.checked .indicator.minus,.base:not(.indeterminate) .indicator.minus{display:none}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base);flex-wrap:wrap;align-items:center;column-gap:4px;display:flex}.hide-label label{display:none}.icon{font-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20)) * .6);line-height:1}", S = class extends m(_(y(b(v(h(i)))))) {
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
 		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
@@ -34,21 +35,22 @@ var b = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-60
 		super.checkedChanged(e, t), this.ariaChecked = t ? "true" : "false", e !== void 0 && this.$emit("input");
 	}
 };
-c([n({ attribute: "tabindex" })], x.prototype, "tabindex", void 0), c([n], x.prototype, "connotation", void 0), c([n({
+l([n({ attribute: "tabindex" })], S.prototype, "tabindex", void 0), l([n], S.prototype, "connotation", void 0), l([n({
 	attribute: "readonly",
 	mode: "boolean"
-})], x.prototype, "readOnly", void 0), c([e], x.prototype, "defaultSlottedNodes", void 0), c([n({
+})], S.prototype, "readOnly", void 0), l([e], S.prototype, "defaultSlottedNodes", void 0), l([n({
 	attribute: "indeterminate",
 	mode: "boolean"
-})], x.prototype, "indeterminate", void 0), c([e], x.prototype, "slottedContent", void 0);
+})], S.prototype, "indeterminate", void 0), l([e], S.prototype, "slottedContent", void 0);
 //#endregion
-//#region src/lib/checkbox/checkbox.template.ts
-var S = ({ connotation: e, readOnly: t, checked: n, disabled: r, indeterminate: i, errorValidationMessage: a, successText: o, label: s, slottedContent: c }) => m("base", [`connotation-${e}`, !!e], ["readonly", t], ["checked", n || i], ["disabled", r], ["error connotation-alert", !!a], ["success connotation-success", !!o], ["hide-label", !s && !c?.length]), C = a("checkbox", x, (e) => {
-	let t = e.tagFor(l);
+//#region src/lib/checkbox/definition.ts
+var C = a("checkbox", S, (e) => {
+	let t = e.tagFor(d);
 	return r`<template>
 		<div
-			class="${S}"
-			${h({
+			${s("control")}
+			class="${(e) => u("base", [`connotation-${e.connotation}`, !!e.connotation], ["readonly", e.readOnly], ["checked", e.checked || e.indeterminate], ["disabled", e.disabled], ["error connotation-alert", !!e.errorValidationMessage], ["success connotation-success", !!e.successText], ["hide-label", !e.label && !e.slottedContent?.length])}"
+			${p({
 		role: "checkbox",
 		ariaChecked: (e) => e.indeterminate ? "mixed" : e.checked,
 		ariaRequired: (e) => e.required,
@@ -61,8 +63,8 @@ var S = ({ connotation: e, readOnly: t, checked: n, disabled: r, indeterminate:
 			@click="${(e, t) => e.clickHandler(t.event)}"
 		>
 			<div class="control">
-				${s((e) => e.checked && !e.indeterminate, r`<${t} name="check-solid" class="icon"></${t}>`)}
-				${s((e) => e.indeterminate, r`<${t} name="minus-solid" class="icon"></${t}>`)}
+				${c((e) => e.checked && !e.indeterminate, r`<${t} name="check-solid" class="icon"></${t}>`)}
+				${c((e) => e.indeterminate, r`<${t} name="minus-solid" class="icon"></${t}>`)}
 			</div>
 			${r`<label
 				>${(e) => e.label}<slot ${o("slottedContent")}></slot
@@ -70,9 +72,9 @@ var S = ({ connotation: e, readOnly: t, checked: n, disabled: r, indeterminate:
 		</div>
 		${(t) => t._getFeedbackTemplate(e)}
 	</template>`;
-}, [u, v], {
-	styles: b,
+}, [f, g], {
+	styles: x,
 	shadowOptions: { delegatesFocus: !0 }
 }), w = t(C);
 //#endregion
-export { w as n, x as r, C as t };
+export { w as n, S as r, C as t };

package/bundled/definition16.cjs

@@ -1,4 +1,4 @@
-const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./form-element.cjs`),i=require(`./with-error-text.cjs`),a=require(`./class-names.cjs`),o=require(`./form-associated.cjs`);var s=`:host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@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-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{cursor:pointer;align-items:center;gap:8px;display:inline-flex}@supports (user-select:none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}`,c=class extends i.t(r.t(o.t(e.t))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){this.$fastController.isConnected&&!this.dirtyChecked&&(this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}constructor(){super(),this.initialValue=`on`,this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case` `:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement(`input`),this.#n=()=>{let e=this.#e,t=this.#t;e&&e.length>1&&e.some(e=>e.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage=``,t&&(t.errorValidationMessage=``))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){let e=this.#e,t=this.#t;e&&e.length>1&&e.forEach(e=>{e.elementInternals.setValidity({valueMissing:!1}),e.errorValidationMessage=``,t&&(t.errorValidationMessage=``)})}},this.proxy.setAttribute(`type`,`radio`),this.proxy.setAttribute(`name`,this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}nameChanged(t,n){super.nameChanged(t,n),n===null?this.proxy.removeAttribute(`name`):this.proxy.setAttribute(`name`,this.name),e.M.enqueue(this.validate)}connectedCallback(){super.connectedCallback(),e.M.enqueue(this.validate),this.parentElement.getAttribute(`data-vvd-component`)!==`radio-group`&&this.getAttribute(`tabindex`)===null&&(this.disabled||this.setAttribute(`tabindex`,`0`)),this.defaultChecked&&(this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}isInsideRadioGroup(){return this.closest(`[data-vvd-component="radio-group"]`)!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){let e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#t(){return this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`)}#n;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||``,this.validity.valueMissing?this.#n():this.#r())}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({attribute:`readonly`,mode:`boolean`})],c.prototype,`readOnly`,void 0),n.t([e.A],c.prototype,`defaultSlottedNodes`,void 0);var l=e.p`<template
+const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./form-associated.cjs`),a=require(`./form-element.cjs`),o=require(`./with-error-text.cjs`);var s=`:host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-radio-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-radio-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-intermediate:var(--vvd-radio-cta-intermediate,var(--vvd-color-cta-500));--_connotation-color-firm:var(--vvd-radio-cta-firm,var(--vvd-color-cta-600));--_connotation-color-fierce:var(--vvd-radio-cta-fierce,var(--vvd-color-cta-700))}.base:not(.connotation-cta){--_connotation-color-primary:var(--vvd-radio-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-primary-text:var(--vvd-radio-accent-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-radio-accent-primary-increment,var(--vvd-color-neutral-800));--_connotation-color-intermediate:var(--vvd-radio-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-firm:var(--vvd-radio-accent-firm,var(--vvd-color-canvas-text));--_connotation-color-fierce:var(--vvd-radio-accent-fierce,var(--vvd-color-neutral-700))}.base{--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}@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-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-700)}.base:checked:where(:not(.disabled,:disabled)),.base.checked:where(:not(.disabled,:disabled)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary);--_appearance-color-outline:var(--_connotation-color-primary)}@media (hover:hover){.base:checked:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}}.base.checked.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text:var(--_connotation-color-primary-text);--_appearance-color-fill:var(--_connotation-color-primary-increment);--_appearance-color-outline:var(--_connotation-color-primary-increment)}.base:disabled,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-600);--_appearance-color-fill:var(--vvd-color-neutral-100);--_appearance-color-outline:var(--vvd-color-neutral-300)}.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{cursor:pointer;user-select:none;align-items:center;gap:8px;display:inline-flex}.base.disabled{pointer-events:none}.control{block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 20));border-radius:50%;flex-shrink:0;position:relative}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";opacity:1;transition:opacity .2s;position:absolute;inset:5px}.base:not(.checked) .control:after{opacity:0}:host(:focus-visible) .control{--focus-stroke-gap-color:transparent;position:relative}:host(:focus-visible) .control:before{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));border-radius:var(--focus-border-radius,inherit);block-size:calc(100% + var(--focus-block-size-addition,4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition,4px));display:block;position:absolute;inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}label{color:var(--vvd-color-canvas-text);cursor:pointer;font:var(--vvd-typography-base)}`,c=class extends o.t(a.t(i.t(e.t))){readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly)}defaultCheckedChanged(){this.$fastController.isConnected&&!this.dirtyChecked&&(this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}constructor(){super(),this.initialValue=`on`,this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case` `:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement(`input`),this.#n=()=>{let e=this.#e,t=this.#t;e&&e.length>1&&e.some(e=>e.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage=``,t&&(t.errorValidationMessage=``))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){let e=this.#e,t=this.#t;e&&e.length>1&&e.forEach(e=>{e.elementInternals.setValidity({valueMissing:!1}),e.errorValidationMessage=``,t&&(t.errorValidationMessage=``)})}},this.proxy.setAttribute(`type`,`radio`),this.proxy.setAttribute(`name`,this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}nameChanged(t,n){super.nameChanged(t,n),n===null?this.proxy.removeAttribute(`name`):this.proxy.setAttribute(`name`,this.name),e.M.enqueue(this.validate)}connectedCallback(){super.connectedCallback(),e.M.enqueue(this.validate),this.parentElement.getAttribute(`data-vvd-component`)!==`radio-group`&&this.getAttribute(`tabindex`)===null&&(this.disabled||this.setAttribute(`tabindex`,`0`)),this.defaultChecked&&(this.dirtyChecked||this.isInsideRadioGroup()||(this.checked=this.defaultChecked,this.dirtyChecked=!1))}isInsideRadioGroup(){return this.closest(`[data-vvd-component="radio-group"]`)!==null}clickHandler(e){!this.disabled&&!this.readOnly&&!this.checked&&(this.checked=!0)}get#e(){let e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#t(){return this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`)}#n;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||``,this.validity.valueMissing?this.#n():this.#r())}};n.t([e.m],c.prototype,`connotation`,void 0),n.t([e.m({attribute:`readonly`,mode:`boolean`})],c.prototype,`readOnly`,void 0),n.t([e.A],c.prototype,`defaultSlottedNodes`,void 0);var l=e.p`<template
 	aria-checked="${e=>e?.checked}"
 	aria-disabled="${e=>e?.disabled}"
 	aria-required="${e=>e?.required}"
@@ -6,7 +6,9 @@ const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./deco
 	@click="${(e,t)=>e?.clickHandler(t.event)}"
 	role="radio"
 >
-	<div class="${({connotation:e,checked:t,readOnly:n,disabled:r})=>a.t(`base`,[`connotation-${e}`,!!e],[`checked`,t],[`readonly`,n],[`disabled`,r])}">
+	<div
+		class="${e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`checked`,e.checked],[`readonly`,e.readOnly],[`disabled`,e.disabled])}"
+	>
 		<div class="control"></div>
 		${t.t(e=>e?.label,e.p`<label class="label">${e=>e?.label}</label>`)}
 	</div>