@vonage/vivid 5.15.1 → 5.17.0

package/bundled/definition13.js

@@ -1,44 +1,58 @@
-import { I as l, i } from "./definition2.js";
-import { T as s, t as p } from "./definition17.js";
-import { V as v, a as d, h as u, c as f, d as _ } from "./vivid-element.js";
-import { c as m } from "./class-names.js";
-var b = Object.defineProperty, x = (o, r, t, w) => {
-  for (var a = void 0, n = o.length - 1, e; n >= 0; n--)
-    (e = o[n]) && (a = e(r, t, a) || a);
-  return a && b(r, t, a), a;
+import { t as e } from "./localized.js";
+import { T as t, d as n, l as r, o as i, s as a, t as o } from "./vivid-element.js";
+import { t as s } from "./definition2.js";
+import { t as c } from "./decorate.js";
+import { a as l, i as u, n as d } from "./affix.js";
+import { t as f } from "./class-names.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(o))) {
+	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);
+	}
 };
-class c extends v {
-  constructor() {
-    super(...arguments), this.placement = "right";
-  }
+c([r({ mode: "boolean" })], g.prototype, "disabled", void 0), c([r], g.prototype, "connotation", void 0), c([r], g.prototype, "shape", void 0), c([r], g.prototype, "label", void 0), c([r({ mode: "boolean" })], g.prototype, "removable", void 0), c([r({ mode: "fromView" })], g.prototype, "tabIndex", void 0), c([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);
+	return n`<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)}
+	</button>`;
 }
-x([
-  d({ mode: "fromView" })
-], c.prototype, "placement");
-const g = (o) => m("control"), h = (o) => {
-  const r = o.tagFor(s), t = o.tagFor(l);
-  return u`
-		<${r} class="base" exportparts="vvd-theme-alternate">
-			<button class="${g}" slot="anchor">
-        <slot name="icon" slot="icon">
-          <${t} name="help-solid"></${t}>
-        </slot>
-			</button>
-			<slot></slot>
-		</${r}>
+//#endregion
+//#region src/lib/tab/definition.ts
+var y = i("tab", g, (e) => {
+	let t = l(e);
+	return n`
+		<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) => t(e.icon, u.Slot)} ${(e) => e.label}
+				${(t) => t.removable ? v(e) : null}
+			</div>
+		</template>
 	`;
-}, y = ".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))}.control{--_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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.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.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;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;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}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.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}", k = _(
-  "contextual-help",
-  c,
-  h,
-  [i, p],
-  {
-    styles: y
-  }
-), H = f(
-  k
-);
-export {
-  k as c,
-  H as r
-};
+}, [s], { styles: h }), b = a(y);
+//#endregion
+export { y as n, g as r, b as t };

package/bundled/definition14.cjs

@@ -1 +1,5 @@
-"use strict";const i=require("./vivid-element.cjs"),n=":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";class e extends i.VividElement{}const s=()=>i.html`<slot></slot>`,t=i.defineVividComponent("visually-hidden",e,s,[],{styles:n}),l=i.createRegisterFunction(t);exports.VisuallyHidden=e;exports.registerVisuallyHidden=l;exports.visuallyHiddenDefinition=t;
+const e=require(`./vivid-element.cjs`),t=require(`./host-semantics.cjs`);var n=class extends t.t(e.t){},r=e.d`
+	<template slot="tabpanel" ${t.n({role:`tabpanel`})}>
+		<slot></slot>
+	</template>
+`,i=e.o(`tab-panel`,n,r,[],{}),a=e.s(i);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return i}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return a}});

package/bundled/definition14.js

@@ -1,20 +1,11 @@
-import { V as i, h as s, c as e, d as t } from "./vivid-element.js";
-const n = ":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
-class l extends i {
-}
-const o = () => s`<slot></slot>`, a = t(
-  "visually-hidden",
-  l,
-  o,
-  [],
-  {
-    styles: n
-  }
-), p = e(
-  a
-);
-export {
-  l as V,
-  p as r,
-  a as v
-};
+import { d as e, o as t, s as n, t as r } from "./vivid-element.js";
+import { n as i, t as a } from "./host-semantics.js";
+//#endregion
+//#region src/lib/tab-panel/definition.ts
+var o = t("tab-panel", class extends a(r) {}, e`
+	<template slot="tabpanel" ${i({ role: "tabpanel" })}>
+		<slot></slot>
+	</template>
+`, [], {}), s = n(o);
+//#endregion
+export { o as n, s as t };

package/bundled/definition15.cjs

@@ -1,5 +1,19 @@
-"use strict";const o=require("./vivid-element.cjs"),t=require("./divider.cjs"),r=require("./host-semantics.cjs"),n=require("./class-names.cjs"),s=":host{display:block}.base{--_connotation-color-soft: var(--vvd-divider-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-divider-accent-dim, var(--vvd-color-neutral-200))}.base{display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}",c=({orientation:e,appearance:i})=>n.classNames("base",[`${e}`,!!e],[`appearance-${i}`,!!i]),l=({role:e,orientation:i})=>e===t.DividerRole.presentation?null:i,d=o.html`<template
-	${r.applyHostSemantics({role:e=>e.role||t.DividerRole.separator,ariaHidden:!0,ariaOrientation:l})}
->
-	<span class="${c}"></span
-></template>`,a=o.defineVividComponent("divider",t.Divider,d,[],{styles:s}),v=o.createRegisterFunction(a);exports.dividerDefinition=a;exports.registerDivider=v;
+const e=require(`./vivid-element.cjs`),t=require(`./when.cjs`),n=require(`./slotted.cjs`),r=require(`./definition2.cjs`),i=require(`./decorate.cjs`),a=require(`./form-element.cjs`),o=require(`./with-success-text.cjs`),s=require(`./with-error-text.cjs`),c=require(`./delegates-aria.cjs`),l=require(`./class-names.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-300);--_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 c.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==1?`true`:`false`,e!==void 0&&this.$emit(`input`)}};i.t([e.l({attribute:`tabindex`})],p.prototype,`tabindex`,void 0),i.t([e.l],p.prototype,`connotation`,void 0),i.t([e.l({attribute:`readonly`,mode:`boolean`})],p.prototype,`readOnly`,void 0),i.t([e.T],p.prototype,`defaultSlottedNodes`,void 0),i.t([e.l({attribute:`indeterminate`,mode:`boolean`})],p.prototype,`indeterminate`,void 0),i.t([e.T],p.prototype,`slottedContent`,void 0);var m=({connotation:e,readOnly:t,checked:n,disabled:r,indeterminate:i,errorValidationMessage:a,successText:o,label:s,slottedContent:c})=>l.t(`base`,[`connotation-${e}`,!!e],[`readonly`,!!t],[`checked`,!!n||!!i],[`disabled`,!!r],[`error connotation-alert`,!!a],[`success connotation-success`,!!o],[`hide-label`,!s&&!c?.length]),h=e.o(`checkbox`,p,i=>{let a=i.tagFor(r.r);return e.d`<template>
+		<div
+			class="${m}"
+			aria-describedby="${e=>e._feedbackDescribedBy}"
+			${c.n({role:`checkbox`,ariaChecked:e=>e.indeterminate?`mixed`:e.checked,ariaRequired:e=>e.required,ariaDisabled:e=>e.disabled,ariaReadOnly:e=>e.readOnly})}
+			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">
+				${t.t(e=>e.checked&&!e.indeterminate,e.d`<${a} name="check-solid" class="icon"></${a}>`)}
+				${t.t(e=>e.indeterminate,e.d`<${a} name="minus-solid" class="icon"></${a}>`)}
+			</div>
+			${e.d`<label
+				>${e=>e.label}<slot ${n.t(`slottedContent`)}></slot
+			></label>`}
+		</div>
+		${e=>e._getFeedbackTemplate(i)}
+	</template>`},[r.t,d.a],{styles:f,shadowOptions:{delegatesFocus:!0}}),g=e.s(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}});

package/bundled/definition15.js

@@ -1,29 +1,78 @@
-import { h as i, c as t, d as r } from "./vivid-element.js";
-import { a as e, D as s } from "./divider.js";
-import { a as n } from "./host-semantics.js";
-import { c } from "./class-names.js";
-const l = ":host{display:block}.base{--_connotation-color-soft: var(--vvd-divider-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-dim: var(--vvd-divider-accent-dim, var(--vvd-color-neutral-200))}.base{display:block}.base:not(.vertical){block-size:1px;inline-size:100%}.base.vertical{block-size:100%;inline-size:1px}.base.appearance-ghost{background-color:var(--_connotation-color-dim)}.base.appearance-subtle{background-color:var(--_connotation-color-soft)}", d = ({ orientation: o, appearance: a }) => c(
-  "base",
-  [`${o}`, !!o],
-  [`appearance-${a}`, !!a]
-), v = ({ role: o, orientation: a }) => o === e.presentation ? null : a, p = i`<template
-	${n({
-  role: (o) => o.role || e.separator,
-  ariaHidden: !0,
-  ariaOrientation: v
-})}
->
-	<span class="${d}"></span
-></template>`, m = r(
-  "divider",
-  s,
-  p,
-  [],
-  {
-    styles: l
-  }
-), k = t(m);
-export {
-  m as d,
-  k as r
+import { T as e, d as t, l as n, o as r, s as i, t as a } from "./vivid-element.js";
+import { t as o } from "./when.js";
+import { t as s } from "./slotted.js";
+import { r as c, t as l } from "./definition2.js";
+import { t as u } from "./decorate.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 { n as m, t as h } from "./delegates-aria.js";
+import { t as g } from "./class-names.js";
+import { t as _ } from "./form-associated.js";
+import { a as v, t as y } from "./mixins.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-300);--_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 h(y(p(f(d(_(a)))))) {
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		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 == 1 ? "true" : "false", e !== void 0 && this.$emit("input");
+	}
 };
+u([n({ attribute: "tabindex" })], x.prototype, "tabindex", void 0), u([n], x.prototype, "connotation", void 0), u([n({
+	attribute: "readonly",
+	mode: "boolean"
+})], x.prototype, "readOnly", void 0), u([e], x.prototype, "defaultSlottedNodes", void 0), u([n({
+	attribute: "indeterminate",
+	mode: "boolean"
+})], x.prototype, "indeterminate", void 0), u([e], x.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 }) => g("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 = r("checkbox", x, (e) => {
+	let n = e.tagFor(c);
+	return t`<template>
+		<div
+			class="${S}"
+			aria-describedby="${(e) => e._feedbackDescribedBy}"
+			${m({
+		role: "checkbox",
+		ariaChecked: (e) => e.indeterminate ? "mixed" : e.checked,
+		ariaRequired: (e) => e.required,
+		ariaDisabled: (e) => e.disabled,
+		ariaReadOnly: (e) => e.readOnly
+	})}
+			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">
+				${o((e) => e.checked && !e.indeterminate, t`<${n} name="check-solid" class="icon"></${n}>`)}
+				${o((e) => e.indeterminate, t`<${n} name="minus-solid" class="icon"></${n}>`)}
+			</div>
+			${t`<label
+				>${(e) => e.label}<slot ${s("slottedContent")}></slot
+			></label>`}
+		</div>
+		${(t) => t._getFeedbackTemplate(e)}
+	</template>`;
+}, [l, v], {
+	styles: b,
+	shadowOptions: { delegatesFocus: !0 }
+}), w = i(C);
+//#endregion
+export { w as n, x as r, C as t };

package/bundled/definition16.cjs

@@ -1,30 +1,13 @@
-"use strict";const e=require("./vivid-element.cjs"),g=require("./base-progress.cjs"),v=require("./delegates-aria.cjs"),c=require("./when.cjs"),m=require("./class-names.cjs"),f=":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";var z=Object.defineProperty,l=(r,a,i,b)=>{for(var s=void 0,t=r.length-1,o;t>=0;t--)(o=r[t])&&(s=o(a,i,s)||s);return s&&z(a,i,s),s};class n extends v.DelegatesAria(g.BaseProgress){}l([e.attr],n.prototype,"connotation");l([e.attr],n.prototype,"size");const x=({connotation:r,size:a,paused:i})=>m.classNames("base",["disabled",!!i],[`connotation-${r}`,!!r],[`size-${a}`,!!a]),p=44,u=e.html`<template>
-	<div
-		class="${r=>r.paused?"paused":""} ${x}"
-		${v.delegateAria({role:"progressbar",ariaValueNow:r=>r.value,ariaValueMin:r=>r.min,ariaValueMax:r=>r.max})}
-	>
-		${c.when(r=>typeof r.value=="number",e.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${r=>p*r.percentComplete/100}px ${p}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`)}
-		${c.when(r=>typeof r.value!="number",e.html`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="indeterminate-indicator-1"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`)}
+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-300);--_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.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.O.enqueue(this.validate)}connectedCallback(){super.connectedCallback(),e.O.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}"]`)||null}#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=``))};#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=``)})}};validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||``,this.validity.valueMissing?this.#n():this.#r())}};n.t([e.l],c.prototype,`connotation`,void 0),n.t([e.l({attribute:`readonly`,mode:`boolean`})],c.prototype,`readOnly`,void 0),n.t([e.T],c.prototype,`defaultSlottedNodes`,void 0);var l=e.d`<template
+	aria-checked="${e=>e?.checked}"
+	aria-disabled="${e=>e?.disabled}"
+	aria-required="${e=>e?.required}"
+	@keypress="${(e,t)=>e?.keypressHandler(t.event)}"
+	@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="control"></div>
+		${t.t(e=>e?.label,e.d`<label class="label">${e=>e?.label}</label>`)}
 	</div>
-</template>`,d=e.defineVividComponent("progress-ring",n,u,[],{styles:f}),_=e.createRegisterFunction(d);exports.ProgressRing=n;exports.progressRingDefinition=d;exports.registerProgressRing=_;
+</template>`,u=e.o(`radio`,c,l,[],{styles:s}),d=e.s(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}});

package/bundled/definition16.js

@@ -1,80 +1,82 @@
-import { a as v, h as o, c as d, d as g } from "./vivid-element.js";
-import { B as m } from "./base-progress.js";
-import { D as f, d as z } from "./delegates-aria.js";
-import { w as c } from "./when.js";
-import { c as x } from "./class-names.js";
-const _ = ":host{--_vvd-progress-ring-accent-firm-wrapper: var( --vvd-progress-ring-accent-firm );--_vvd-progress-ring-cta-firm-wrapper: var( --vvd-progress-ring-cta-firm );--_vvd-progress-ring-alert-firm-wrapper: var( --vvd-progress-ring-alert-firm );--_vvd-progress-ring-success-firm-wrapper: var( --vvd-progress-ring-success-firm )}.base{--vvd-progress-ring-accent-firm: var( --_vvd-progress-ring-accent-firm-wrapper, var(--vvd-progress-ring-accent-primary) );--vvd-progress-ring-cta-firm: var( --_vvd-progress-ring-cta-firm-wrapper, var(--vvd-progress-ring-cta-primary) );--vvd-progress-ring-alert-firm: var( --_vvd-progress-ring-alert-firm-wrapper, var(--vvd-progress-ring-alert-primary) );--vvd-progress-ring-success-firm: var( --_vvd-progress-ring-success-firm-wrapper, var(--vvd-progress-ring-success-primary) )}.base.connotation-cta{--_connotation-color-firm: var(--vvd-progress-ring-cta-firm, var(--vvd-color-cta-600))}.base.connotation-alert{--_connotation-color-firm: var(--vvd-progress-ring-alert-firm, var(--vvd-color-alert-600))}.base.connotation-success{--_connotation-color-firm: var(--vvd-progress-ring-success-firm, var(--vvd-color-success-600))}.base:not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-firm: var(--vvd-progress-ring-accent-firm, var(--vvd-color-canvas-text))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.size--6{--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)) - (1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))) }.base.size--5{--_size: calc(1px*(20 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--4{--_size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--3{--_size: calc(1px*(28 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--2{--_size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size--1{--_size: calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-1{--_size: calc(1px*(44 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-2{--_size: calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-3{--_size: calc(1px*(52 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-4{--_size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base.size-5{--_size: calc(1px*(60 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base:not(.size--6,.size--5,.size--4,.size--3,.size--2,.size--1,.size-1,.size-2,.size-3,.size-4,.size-5){--_size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.base{align-items:center;block-size:var(--_size);color:var(--_appearance-color-text);inline-size:var(--_size);outline:none}.progress{width:100%;height:100%}.background{fill:none;stroke:transparent;stroke-width:1px}.determinate{fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.indeterminate-indicator-1{animation:spin-infinite 2s linear infinite;fill:none;stroke:currentColor;stroke-linecap:round;stroke-width:1px;transform:rotate(-90deg);transform-origin:50% 50%;transition:all .2s ease-in-out}.base.paused .indeterminate-indicator-1{animation-play-state:paused}@keyframes spin-infinite{0%{stroke-dasharray:.01px 43.97px;transform:rotate(0)}50%{stroke-dasharray:21.99px 21.99px;transform:rotate(450deg)}to{stroke-dasharray:.01px 43.97px;transform:rotate(1080deg)}}";
-var u = Object.defineProperty, l = (r, a, s, w) => {
-  for (var e = void 0, i = r.length - 1, t; i >= 0; i--)
-    (t = r[i]) && (e = t(a, s, e) || e);
-  return e && u(a, s, e), e;
+import { O as e, T as t, d as n, l as r, o as i, s as a, t as o } from "./vivid-element.js";
+import { t as s } from "./when.js";
+import { t as c } from "./decorate.js";
+import { t as l } from "./form-element.js";
+import { t as u } from "./with-error-text.js";
+import { t as d } from "./class-names.js";
+import { t as f } from "./form-associated.js";
+//#region src/lib/radio/radio.scss?inline
+var p = ":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-300);--_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)}", m = class extends u(l(f(o))) {
+	readOnlyChanged() {
+		/* v8 ignore if -- @preserve */
+		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.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.enqueue(this.validate);
+	}
+	connectedCallback() {
+		super.connectedCallback(), e.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}"]`) || null;
+	}
+	#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 = ""));
+	};
+	#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 = "");
+			});
+		}
+	};
+	validate(e) {
+		super.validate(e), this.proxy && (this.errorValidationMessage = this.validationMessage || "", this.validity.valueMissing ? this.#n() : this.#r());
+	}
 };
-class n extends f(m) {
-}
-l([
-  v
-], n.prototype, "connotation");
-l([
-  v
-], n.prototype, "size");
-const b = ({ connotation: r, size: a, paused: s }) => x(
-  "base",
-  ["disabled", !!s],
-  [`connotation-${r}`, !!r],
-  [`size-${a}`, !!a]
-), p = 44, y = o`<template>
-	<div
-		class="${(r) => r.paused ? "paused" : ""} ${b}"
-		${z({
-  role: "progressbar",
-  ariaValueNow: (r) => r.value,
-  ariaValueMin: (r) => r.min,
-  ariaValueMax: (r) => r.max
-})}
-	>
-		${c(
-  (r) => typeof r.value == "number",
-  o`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="determinate"
-						style="stroke-dasharray: ${(r) => p * r.percentComplete / 100}px ${p}px"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
-		${c(
-  (r) => typeof r.value != "number",
-  o`
-				<svg class="progress" viewBox="0 0 16 16">
-					<circle class="background" cx="8px" cy="8px" r="7px"></circle>
-					<circle
-						class="indeterminate-indicator-1"
-						cx="8px"
-						cy="8px"
-						r="7px"
-					></circle>
-				</svg>
-			`
-)}
+c([r], m.prototype, "connotation", void 0), c([r({
+	attribute: "readonly",
+	mode: "boolean"
+})], m.prototype, "readOnly", void 0), c([t], m.prototype, "defaultSlottedNodes", void 0);
+//#endregion
+//#region src/lib/radio/definition.ts
+var h = i("radio", m, n`<template
+	aria-checked="${(e) => e?.checked}"
+	aria-disabled="${(e) => e?.disabled}"
+	aria-required="${(e) => e?.required}"
+	@keypress="${(e, t) => e?.keypressHandler(t.event)}"
+	@click="${(e, t) => e?.clickHandler(t.event)}"
+	role="radio"
+>
+	<div class="${({ connotation: e, checked: t, readOnly: n, disabled: r }) => d("base", [`connotation-${e}`, !!e], ["checked", !!t], ["readonly", !!n], ["disabled", !!r])}">
+		<div class="control"></div>
+		${s((e) => e?.label, n`<label class="label">${(e) => e?.label}</label>`)}
 	</div>
-</template>`, k = g(
-  "progress-ring",
-  n,
-  y,
-  [],
-  {
-    styles: _
-  }
-), B = d(
-  k
-);
-export {
-  n as P,
-  k as p,
-  B as r
-};
+</template>`, [], { styles: p }), g = a(h);
+//#endregion
+export { g as n, m as r, h as t };