@vonage/vivid 5.25.0 → 5.27.0

package/bundled/definition12.js

@@ -1,198 +1,60 @@
-import { A as e, M as t, d as n, h as r, m as i, p as a, t as o, u as s, w as c } from "./vivid-element.js";
-import { t as l } from "./slotted.js";
-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 "./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 = {
-	email: "email",
-	password: "password",
-	search: "search",
-	tel: "tel",
-	text: "text",
-	url: "url"
-}, 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 O(C(D(k(A(E(_(y(b(o))))))))) {
+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 "./class-names.js";
+import { t as l } from "./definition2.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";
+import { t as h } from "./component-enum.js";
+//#region src/lib/tab/tab.scss?inline
+var g = ":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{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}", _ = h(["accent", "cta"], "accent"), v = class extends m(f(e(a))) {
 	constructor(...e) {
-		super(...e), this.proxy = document.createElement("input"), this.type = M.text, this.#e = x();
+		super(...e), this.removable = !1, this.tabIndex = "-1", this.active = !1;
 	}
-	readOnlyChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
+	_handleCloseClick(e) {
+		e.stopImmediatePropagation(), this.$emit("close");
 	}
-	autofocusChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.autofocus = this.autofocus, this.validate());
-	}
-	placeholderChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
-	}
-	typeChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.type = this.type, this.validate());
-	}
-	listChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.setAttribute("list", this.list), this.validate());
-	}
-	maxlengthChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.maxLength = this.maxlength, this.validate());
-	}
-	minlengthChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.minLength = this.minlength, this.validate());
-	}
-	patternChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.pattern = this.pattern, this.validate());
-	}
-	sizeChanged() {
-		/* v8 ignore if -- @preserve */
-		this.proxy instanceof HTMLInputElement && (this.proxy.size = this.size);
-	}
-	spellcheckChanged() {
-		/* v8 ignore if -- @preserve */
-		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 && t.enqueue(() => {
-			this.focus();
-		}), this._updateControlValueIfNeeded(), P(this), this._renderCharCountRemaining();
-	}
-	focus() {
-		this.control?.focus();
-	}
-	#e;
-	get _uniqueId() {
-		return this.id || this.#e;
+	_onKeyDown(e) {
+		return !this.removable || e.key !== "Delete" || (e.stopImmediatePropagation(), this.$emit("close"), !1);
 	}
 };
-p([i({
-	attribute: "readonly",
-	mode: "boolean"
-})], 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);
+s([r({ mode: "boolean" })], v.prototype, "disabled", void 0), s([r], v.prototype, "connotation", void 0), s([r], v.prototype, "shape", void 0), s([r], v.prototype, "label", void 0), s([r({ mode: "boolean" })], v.prototype, "removable", void 0), s([r({ mode: "fromView" })], v.prototype, "tabIndex", void 0), s([t], v.prototype, "active", void 0);
 //#endregion
-//#region src/lib/text-field/text-field.template.ts
-var I = (e) => `vvd-text-field-control-${e}`, L = s("text-field", F, (e) => {
-	let t = g(e);
-	return a`
-		<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])}"
+//#region src/lib/tab/tab.template.ts
+function y(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", d.Span)}
+	</button>`;
+}
+//#endregion
+//#region src/lib/tab/definition.ts
+var b = o("tab", v, (e) => {
+	let t = u(e);
+	return i`
+		<template
+			slot="tab"
+			?active="${(e) => e.active}"
+			${p({
+		role: "tab",
+		ariaDisabled: (e) => e.disabled,
+		ariaSelected: (e) => e.active
+	})}
+			@keydown="${(e, t) => e._onKeyDown(t.event)}"
 		>
-			${d((e) => e.charCount && e.maxlength, (t) => t._getCharCountTemplate(e))}
 			<div
-				class="label-wrapper"
-				?hidden=${(e) => !e.label && !e._hasContextualHelp}
+				class="${(e) => c("base", `connotation-${e.active ? _.parse(e.connotation) : "accent"}`, "appearance-ghost", "with-idle", "with-hover", "with-active", "with-disabled", [`shape-${e.shape}`, !!e.shape], ["disabled", e.disabled], ["selected", e.active], ["icon-trailing", e.iconTrailing], ["removable", e.removable])}"
 			>
-				<slot class="label" name="_label"></slot>
-				<slot
-					name="contextual-help"
-					${l("_contextualHelpSlottedContent")}
-				></slot>
-			</div>
-			${S(a`
-				${d((e) => e.label, a`
-						<label slot="_label" for="${(e) => I(e._uniqueId)}">
-							${(e) => e.label}
-						</label>
-					`)}
-			`)}
-			<div class="fieldset">
-				<div class="leading-items-wrapper">
-					<slot
-						name="leading-action-items"
-						${l("leadingActionItemsSlottedContent")}
-					></slot>
-					${(e) => t(e.icon)}
-				</div>
-				<div class="wrapper">
-					<slot class="control" name="_control"></slot>
-					${S(a`<input
-							slot="_control"
-							id="${(e) => I(e._uniqueId)}"
-							class="_vvd-3-text-field-safari-workaround"
-							@input="${(e, t) => e.handleTextInput(t.event)}"
-							@change="${(e) => e.handleChange()}"
-							@blur="${(e) => {
-		e.$emit("blur", void 0, { bubbles: !1 });
-	}}"
-							@focus="${(e) => {
-		e.$emit("focus", void 0, { bubbles: !1 });
-	}}"
-							?autofocus="${(e) => e.autofocus}"
-							?disabled="${(e) => e.disabled}"
-							?readonly="${(e) => e.readOnly}"
-							?required="${(e) => e.required}"
-							?spellcheck="${(e) => e.spellcheck}"
-							list="${(e) => e.list}"
-							maxlength="${(e) => e.maxlength}"
-							minlength="${(e) => e.minlength}"
-							pattern="${(e) => e.pattern}"
-							placeholder="${(e) => e.placeholder}"
-							size="${(e) => e.size}"
-							autocomplete="${(e) => e.autoComplete}"
-							type="${(e) => e.type}"
-							inputmode="${(e) => e.inputMode}"
-							value="${(e) => e.initialValue}"
-							${v({ ariaDescribedBy: (e) => `${e._feedbackDescribedBy} ${e.charCount && e.maxlength ? e._charCountDescribedBy : null}` })}
-							${u("control")}
-						/>`)}
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${l("actionItemsSlottedContent")}
-					></slot>
-				</div>
+				${(e) => t(e.icon, d.Slot)} ${(e) => e.label}
+				${(t) => t.removable ? y(e) : null}
 			</div>
-			${(t) => t._getFeedbackTemplate(e)}
-		</div>
+		</template>
 	`;
-}, [
-	h,
-	w,
-	f,
-	T
-], {
-	styles: j,
-	shadowOptions: { delegatesFocus: !0 }
-}), R = n(L);
+}, [l], { styles: g }), x = n(b);
 //#endregion
-export { L as n, F as r, R as t };
+export { b as n, v as r, x as t };

package/bundled/definition13.cjs

@@ -1,22 +1,5 @@
-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`,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="${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>
-	`},[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}});
+const e=require("./vivid-element.cjs"),t=require("./host-semantics.cjs");var n=class extends t.t(e.t){},r=e.p`
+	<template slot="tabpanel" ${t.n({role:`tabpanel`})}>
+		<slot></slot>
+	</template>
+`,i=e.u(`tab-panel`,n,r,[],{}),a=e.d(i);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return a}});

package/bundled/definition13.js

@@ -1,59 +1,10 @@
-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 "./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;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;
-	}
-	_handleCloseClick(e) {
-		e.stopImmediatePropagation(), this.$emit("close");
-	}
-	_onKeyDown(e) {
-		return !this.removable || e.key !== "Delete" ? !0 : (e.stopImmediatePropagation(), this.$emit("close"), !1);
-	}
-};
-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);
+import { d as e, p as t, t as n, u as r } from "./vivid-element.js";
+import { n as i, t as a } from "./host-semantics.js";
+//#region src/lib/tab-panel/tab-panel.ts
+var o = class extends a(n) {}, s = t`
+	<template slot="tabpanel" ${i({ role: "tabpanel" })}>
+		<slot></slot>
+	</template>
+`, c = r("tab-panel", o, s, [], {}), l = e(c);
 //#endregion
-//#region src/lib/tab/tab.template.ts
-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", d.Span)}
-	</button>`;
-}
-//#endregion
-//#region src/lib/tab/definition.ts
-var v = o("tab", g, (e) => {
-	let t = u(e);
-	return i`
-		<template
-			slot="tab"
-			?active="${(e) => e.active}"
-			${p({
-		role: "tab",
-		ariaDisabled: (e) => e.disabled,
-		ariaSelected: (e) => e.active
-	})}
-			@keydown="${(e, t) => e._onKeyDown(t.event)}"
-		>
-			<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>
-	`;
-}, [l], { styles: h }), y = n(v);
-//#endregion
-export { v as n, g as r, y as t };
+export { c as n, l as t };

package/bundled/definition14.cjs

@@ -1,5 +1 @@
-const e=require(`./vivid-element.cjs`),t=require(`./host-semantics.cjs`);var n=class extends t.t(e.t){},r=e.p`
-	<template slot="tabpanel" ${t.n({role:`tabpanel`})}>
-		<slot></slot>
-	</template>
-`,i=e.u(`tab-panel`,n,r,[],{}),a=e.d(i);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});
+const e=require("./vivid-element.cjs"),t=require("./slider.template.cjs"),n=require("./definition7.cjs");var r=e.u(`slider`,t.r,t.t,[n.t],{styles:`:host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.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));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:"";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.thumb-container:before{transition:opacity .2s ease-out}}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:"";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0}@media (prefers-reduced-motion:no-preference){:host([internal-part]) .thumb-container{transition:opacity .2s}}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}`,shadowOptions:{delegatesFocus:!0}}),i=e.d(r);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return r}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return i}});

package/bundled/definition14.js

@@ -1,11 +1,11 @@
-import { d as e, p as t, t as n, u as r } from "./vivid-element.js";
-import { n as i, t as a } from "./host-semantics.js";
+import { d as e, u as t } from "./vivid-element.js";
+import { r as n, t as r } from "./slider.template.js";
+import { t as i } from "./definition7.js";
 //#endregion
-//#region src/lib/tab-panel/definition.ts
-var o = r("tab-panel", class extends a(n) {}, t`
-	<template slot="tabpanel" ${i({ role: "tabpanel" })}>
-		<slot></slot>
-	</template>
-`, [], {}), s = e(o);
+//#region src/lib/slider/definition.ts
+var a = t("slider", n, r, [i], {
+	styles: ":host{display:inline-block}:host(:not([orientation=vertical])){inline-size:100%}:host([orientation=vertical]){block-size:100%;min-block-size:calc(var(--_thumb-interaction-indicator-size) * 5)}:host([disabled]){cursor:not-allowed}.control{--_thumb-size:12px;--_thumb-interaction-indicator-size:36px;--_track-start-inset-inline-start:0;--_track-start-inset-block-start:0;cursor:pointer;user-select:none;outline:none}.control .positioning-region{position:relative}.control .track{background:var(--_track-background-color);border-radius:4px;position:absolute}.control .track-start{border-radius:inherit;background:var(--_track-start-background-color);block-size:100%;position:absolute;inset-inline-start:var(--_track-start-inset-inline-start)}.control.horizontal{block-size:var(--_thumb-interaction-indicator-size);inline-size:calc(100% - var(--_thumb-size));min-inline-size:var(--_thumb-size);margin-inline-start:calc(var(--_thumb-size) / 2)}.control.horizontal .track{top:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:2px;left:0;right:0}:host([markers]) .control.horizontal .track-start{--_track-start-inset-inline-start:1px;border-top-left-radius:0;border-bottom-left-radius:0}.control.horizontal .track .mark{block-size:6px;inline-size:100%;position:absolute;inset-block-start:-2px;inset-inline-start:0}.control.vertical{margin-top:calc(var(--_thumb-interaction-indicator-size) / 2);block-size:calc(100% - var(--_thumb-interaction-indicator-size));inline-size:var(--_thumb-interaction-indicator-size);min-block-size:var(--_thumb-interaction-indicator-size)}.control.vertical .positioning-region{block-size:100%}.control.vertical .track{left:calc((var(--_thumb-interaction-indicator-size) - 2px) / 2);block-size:100%;inline-size:2px}.control.vertical .track .mark{block-size:100%;inline-size:6px;position:absolute;inset-block-start:0;inset-inline-start:-2px}.control.vertical .track-start{block-size:auto;inline-size:100%;inset-block-start:var(--_track-start-inset-block-start)}:host([markers]) .control.vertical .track-start{--_track-start-inset-block-start:1px;border-radius:0}.control.disabled{--_track-background-color:var(--vvd-color-neutral-100);--_track-start-background-color:var(--vvd-color-neutral-300);pointer-events:none}.control:not(.disabled){--_track-background-color:var(--vvd-color-neutral-300);--_track-start-background-color:var(--_appearance-color-fill)}.control:not(.disabled) .mark{color:var(--vvd-color-neutral-950)}.control.disabled .mark{color:var(--_track-start-background-color)}.thumb-container{block-size:var(--_thumb-interaction-indicator-size);cursor:inherit;inline-size:var(--_thumb-interaction-indicator-size);touch-action:none;border-radius:50%;outline:none;position:absolute}.thumb-container.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));--focus-stroke-gap-color:transparent;--_thumb-interaction-indicator-alpha:.05;border-radius:50%}.control.horizontal .thumb-container{transform:translateX(calc(var(--_thumb-interaction-indicator-size) / 2))}.control.vertical .thumb-container{transform:translateY(calc(var(--_thumb-interaction-indicator-size) / 2))}@media (hover:hover){.control:not(.disabled) .thumb-container:hover{--_thumb-interaction-indicator-alpha:.12}}.control:not(.disabled) .thumb-container:active{--_thumb-interaction-indicator-alpha:.25}.thumb-container:before{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-interaction-indicator-size);content:\"\";inline-size:var(--_thumb-interaction-indicator-size);opacity:var(--_thumb-interaction-indicator-alpha,0);display:block;position:absolute}@media (prefers-reduced-motion:no-preference){.thumb-container:before{transition:opacity .2s ease-out}}.thumb-container:after{border-radius:inherit;background-color:var(--_track-start-background-color);block-size:var(--_thumb-size);content:\"\";inline-size:var(--_thumb-size);inset:calc((var(--_thumb-interaction-indicator-size) - var(--_thumb-size)) / 2);display:block;position:absolute}.popup{pointer-events:none}.tooltip{width:auto;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);padding:8px 12px}:host([internal-part]) .thumb-container{opacity:0}@media (prefers-reduced-motion:no-preference){:host([internal-part]) .thumb-container{transition:opacity .2s}}:host([internal-part]) .control.horizontal .track{block-size:4px;top:16px;overflow:hidden}:host([internal-part]) .control:focus .thumb-container{opacity:1}@media (hover:hover){:host([internal-part]) .control:hover .thumb-container{opacity:1}}",
+	shadowOptions: { delegatesFocus: !0 }
+}), o = e(a);
 //#endregion
-export { o as n, s as t };
+export { a as n, o as t };

package/bundled/definition15.cjs

@@ -1,7 +1,7 @@
-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(`./icon.cjs`),c=require(`./delegates-aria.cjs`),l=require(`./form-associated.cjs`),u=require(`./mixins.cjs`),d=require(`./form-element.cjs`),f=require(`./with-error-text.cjs`),p=require(`./with-success-text.cjs`);var m=`: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}`,h=class extends c.t(u.t(f.t(p.t(d.t(l.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`})],h.prototype,`tabindex`,void 0),i.t([e.m],h.prototype,`connotation`,void 0),i.t([e.m({attribute:`readonly`,mode:`boolean`})],h.prototype,`readOnly`,void 0),i.t([e.A],h.prototype,`defaultSlottedNodes`,void 0),i.t([e.m({attribute:`indeterminate`,mode:`boolean`})],h.prototype,`indeterminate`,void 0),i.t([e.A],h.prototype,`slottedContent`,void 0);var g=e.u(`checkbox`,h,i=>{let o=i.tagFor(s.t);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("./definition2.cjs"),s=require("./icon.cjs"),c=require("./delegates-aria.cjs"),l=require("./component-enum.cjs"),u=require("./form-associated.cjs"),d=require("./feedback-message.cjs"),f=require("./form-element.cjs"),p=require("./with-error-text.cjs"),m=require("./with-success-text.cjs"),h=require("./mixins.cjs");var g=`: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{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}`,_=l.t([`accent`,`cta`],`accent`),v=class extends c.t(h.t(p.t(m.t(f.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}return!1},this.clickHandler=e=>e.target instanceof HTMLAnchorElement||(!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`})],v.prototype,`tabindex`,void 0),i.t([e.m],v.prototype,`connotation`,void 0),i.t([e.m({attribute:`readonly`,mode:`boolean`})],v.prototype,`readOnly`,void 0),i.t([e.A],v.prototype,`defaultSlottedNodes`,void 0),i.t([e.m({attribute:`indeterminate`,mode:`boolean`})],v.prototype,`indeterminate`,void 0),i.t([e.A],v.prototype,`slottedContent`,void 0);var y=e.u(`checkbox`,v,i=>{let o=i.tagFor(s.t),l=e=>e.errorValidationMessage?`alert`:e.successText?`success`:_.parse(e.connotation);return e.p`<template>
 		<div
 			${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])}"
+			class="${e=>a.t(`base`,`connotation-${l(e)}`,`appearance-fieldset`,`with-idle`,`with-hover`,`with-checked`,`with-checkedAndHover`,`with-disabled`,`with-readonly`,[`readonly`,e.readOnly],[`checked`,e.checked||e.indeterminate],[`disabled`,e.disabled],[`error`,!!e.errorValidationMessage],[`success`,!!e.successText],[`hide-label`,!e.label&&!e.slottedContent?.length])}"
 			${c.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)}"
@@ -16,4 +16,4 @@ const e=require(`./vivid-element.cjs`),t=require(`./slotted.cjs`),n=require(`./r
 			></label>`}
 		</div>
 		${e=>e._getFeedbackTemplate(i)}
-	</template>`},[o.t,u.r],{styles:m,shadowOptions:{delegatesFocus:!0}}),_=e.d(g);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return _}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return h}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return g}});
+	</template>`},[o.t,d.n],{styles:g,shadowOptions:{delegatesFocus:!0}}),b=e.d(y);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return b}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return v}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return y}});

package/bundled/definition15.js

@@ -4,16 +4,18 @@ 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 { t as d } from "./definition3.js";
+import { t as d } from "./definition2.js";
 import { t as f } from "./icon.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 h } from "./component-enum.js";
+import { t as g } from "./form-associated.js";
+import { n as _ } from "./feedback-message.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";
+import { t as x } from "./mixins.js";
 //#region src/lib/checkbox/checkbox.scss?inline
-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)))))) {
+var S = ":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{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}", C = h(["accent", "cta"], "accent"), w = class extends m(x(y(b(v(g(i)))))) {
 	readOnlyChanged() {
 		/* v8 ignore if -- @preserve */
 		this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly);
@@ -22,12 +24,10 @@ var x = ":host{vertical-align:middle;--_low-ink-color:var(--vvd-color-neutral-60
 		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;
+				case " ": this.indeterminate &&= !1, this.checked = !this.checked;
 			}
 			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");
+		}, this.clickHandler = (e) => e.target instanceof HTMLAnchorElement || (!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");
@@ -36,21 +36,21 @@ var x = ":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");
 	}
 };
-l([n({ attribute: "tabindex" })], S.prototype, "tabindex", void 0), l([n], S.prototype, "connotation", void 0), l([n({
+l([n({ attribute: "tabindex" })], w.prototype, "tabindex", void 0), l([n], w.prototype, "connotation", void 0), l([n({
 	attribute: "readonly",
 	mode: "boolean"
-})], S.prototype, "readOnly", void 0), l([e], S.prototype, "defaultSlottedNodes", void 0), l([n({
+})], w.prototype, "readOnly", void 0), l([e], w.prototype, "defaultSlottedNodes", void 0), l([n({
 	attribute: "indeterminate",
 	mode: "boolean"
-})], S.prototype, "indeterminate", void 0), l([e], S.prototype, "slottedContent", void 0);
+})], w.prototype, "indeterminate", void 0), l([e], w.prototype, "slottedContent", void 0);
 //#endregion
 //#region src/lib/checkbox/definition.ts
-var C = a("checkbox", S, (e) => {
-	let t = e.tagFor(f);
+var T = a("checkbox", w, (e) => {
+	let t = e.tagFor(f), n = (e) => e.errorValidationMessage ? "alert" : e.successText ? "success" : C.parse(e.connotation);
 	return r`<template>
 		<div
 			${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])}"
+			class="${(e) => u("base", `connotation-${n(e)}`, "appearance-fieldset", "with-idle", "with-hover", "with-checked", "with-checkedAndHover", "with-disabled", "with-readonly", ["readonly", e.readOnly], ["checked", e.checked || e.indeterminate], ["disabled", e.disabled], ["error", !!e.errorValidationMessage], ["success", !!e.successText], ["hide-label", !e.label && !e.slottedContent?.length])}"
 			${p({
 		role: "checkbox",
 		ariaChecked: (e) => e.indeterminate ? "mixed" : e.checked,
@@ -73,9 +73,9 @@ var C = a("checkbox", S, (e) => {
 		</div>
 		${(t) => t._getFeedbackTemplate(e)}
 	</template>`;
-}, [d, g], {
-	styles: x,
+}, [d, _], {
+	styles: S,
 	shadowOptions: { delegatesFocus: !0 }
-}), w = t(C);
+}), E = t(T);
 //#endregion
-export { w as n, S as r, C as t };
+export { E as n, w as r, T 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(`./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
+const e=require("./vivid-element.cjs"),t=require("./when.cjs"),n=require("./decorate.cjs"),r=require("./class-names.cjs"),i=require("./component-enum.cjs"),a=require("./form-associated.cjs"),o=require("./form-element.cjs"),s=require("./with-error-text.cjs");var c=`:host(:focus-visible){outline:none}:host([disabled]){cursor:not-allowed}.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)}`,l=i.t([`accent`,`cta`],`accent`),u=class extends s.t(o.t(a.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=>{if(e.key===` `){!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],u.prototype,`connotation`,void 0),n.t([e.m({attribute:`readonly`,mode:`boolean`})],u.prototype,`readOnly`,void 0),n.t([e.A],u.prototype,`defaultSlottedNodes`,void 0);var d=e.p`<template
 	aria-checked="${e=>e?.checked}"
 	aria-disabled="${e=>e?.disabled}"
 	aria-required="${e=>e?.required}"
@@ -7,9 +7,9 @@ const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./deco
 	role="radio"
 >
 	<div
-		class="${e=>r.t(`base`,[`connotation-${e.connotation}`,!!e.connotation],[`checked`,e.checked],[`readonly`,e.readOnly],[`disabled`,e.disabled])}"
+		class="${e=>r.t(`base`,`connotation-${l.parse(e.connotation)}`,`appearance-fieldset`,`with-idle`,`with-hover`,`with-checked`,`with-checkedAndHover`,`with-disabled`,`with-readonly`,[`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>
-</template>`,u=e.u(`radio`,c,l,[],{styles:s}),d=e.d(u);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 u}});
+</template>`,f=e.u(`radio`,u,d,[],{styles:c}),p=e.d(f);Object.defineProperty(exports,"n",{enumerable:!0,get:function(){return p}}),Object.defineProperty(exports,"r",{enumerable:!0,get:function(){return u}}),Object.defineProperty(exports,"t",{enumerable:!0,get:function(){return f}});