@vonage/vivid 5.2.0 → 5.4.0

package/bundled/definition13.js

@@ -1,359 +1,20 @@
-import { i as T } from "./definition2.js";
-import { V as _, D as k, E, a, n as h, o as C, h as p, c as M, d as H } from "./vivid-element.js";
-import { a as L, g as D, r as y, f as F } from "./mixins.js";
-import { v as W } from "./definition12.js";
-import { c as S } from "./definition11.js";
-import { D as w, d as O } from "./delegates-aria.js";
-import { F as B } from "./form-associated.js";
-import { W as A } from "./char-count.js";
-import { W as N } from "./with-contextual-help.js";
-import { W as z } from "./with-error-text.js";
-import { W as V } from "./with-success-text.js";
-import { F as q } from "./form-element.js";
-import { b as R, a as P } from "./affix.js";
-import { s as j } from "./text-field.js";
-import { c as U } from "./class-names.js";
-import { w as g } from "./when.js";
-import { s as d } from "./slotted.js";
-import { r as G } from "./ref.js";
-var J = Object.defineProperty, o = (i, s, e, c) => {
-  for (var n = void 0, l = i.length - 1, r; l >= 0; l--)
-    (r = i[l]) && (n = r(s, e, n) || n);
-  return n && J(s, e, n), n;
-};
-const K = {
-  /**
-   * A text TextField
-   */
-  text: "text"
-}, Q = "_vvd-3-text-field-safari-workaround", v = E.create([
-  `
-	.${Q}::placeholder {
-		opacity: 1 !important;
-		-webkit-text-fill-color: var(--_low-ink-color) !important;
-	}
-`
-]), X = (i) => {
-  const s = i.getRootNode();
-  v.isAttachedTo(s) || v.addStylesTo(s);
-};
-class t extends N(
-  L(
-    A(
-      z(
-        V(
-          q(R(w(B(_))))
-        )
-      )
-    )
-  )
-) {
-  constructor() {
-    super(...arguments), this.proxy = document.createElement("input"), this.type = K.text, this.#e = D();
-  }
-  /**
-   * @internal
-   */
-  readOnlyChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.readOnly = this.readOnly, this.validate());
-  }
-  /**
-   * @internal
-   */
-  autofocusChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.autofocus = this.autofocus, this.validate());
-  }
-  /**
-   * @internal
-   */
-  placeholderChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
-  }
-  /**
-   * @internal
-   */
-  typeChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.type = this.type, this.validate());
-  }
-  /**
-   * @internal
-   */
-  listChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.setAttribute("list", this.list), this.validate());
-  }
-  /**
-   * @internal
-   */
-  maxlengthChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.maxLength = this.maxlength, this.validate());
-  }
-  /**
-   * @internal
-   */
-  minlengthChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.minLength = this.minlength, this.validate());
-  }
-  /**
-   * @internal
-   */
-  patternChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.pattern = this.pattern, this.validate());
-  }
-  /**
-   * @internal
-   */
-  sizeChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.size = this.size);
-  }
-  /**
-   * @internal
-   */
-  spellcheckChanged() {
-    this.proxy instanceof HTMLInputElement && (this.proxy.spellcheck = this.spellcheck);
-  }
-  /**
-   * @internal
-   */
-  valueChanged(s, e) {
-    super.valueChanged(s, e), this._updateControlValueIfNeeded(), this.charCount && this.maxlength && this._updateCharCountRemaining();
-  }
-  /**
-   * Update the controls value only if it is actually different from the actual value.
-   * This is important as to not reset the browser's "dirtiness" flag on the input, which is used for min/maxlength
-   * constraints.
-   * @internal
-   */
-  _updateControlValueIfNeeded() {
-    this.control && this.control.value !== this.value && (this.control.value = this.value);
-  }
-  /**
-   * Selects all the text in the text field
-   *
-   * @public
-   */
-  select() {
-    this.control.select();
-  }
-  /**
-   * Handles the internal control's `input` event
-   * @internal
-   */
-  handleTextInput() {
-    this.value = this.control.value;
-  }
-  /**
-   * Change event handler for inner control.
-   * @remarks
-   * "Change" events are not `composable` so they will not
-   * permeate the shadow DOM boundary. This fn effectively proxies
-   * the change event, emitting a `change` event whenever the internal
-   * control emits a `change` event
-   * @internal
-   */
-  handleChange() {
-    this.$emit("change");
-  }
-  /** {@inheritDoc (FormAssociated:interface).validate} */
-  validate() {
-    super.validate(this.control);
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.proxy.setAttribute("type", this.type), this.validate(), this.autofocus && k.queueUpdate(() => {
-      this.focus();
-    }), this._updateControlValueIfNeeded(), X(this), this._renderCharCountRemaining();
-  }
-  focus() {
-    this.control?.focus();
-  }
-  #e;
-  /**
-   * @internal
-   */
-  get _uniqueId() {
-    return this.id || this.#e;
-  }
+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 {
 }
-o([
-  a({ attribute: "readonly", mode: "boolean" })
-], t.prototype, "readOnly");
-o([
-  a({ mode: "boolean" })
-], t.prototype, "autofocus");
-o([
-  a
-], t.prototype, "placeholder");
-o([
-  a
-], t.prototype, "type");
-o([
-  a
-], t.prototype, "list");
-o([
-  a({ converter: h })
-], t.prototype, "maxlength");
-o([
-  a({ converter: h })
-], t.prototype, "minlength");
-o([
-  a
-], t.prototype, "pattern");
-o([
-  a({ converter: h })
-], t.prototype, "size");
-o([
-  a({ mode: "boolean" })
-], t.prototype, "spellcheck");
-o([
-  a
-], t.prototype, "appearance");
-o([
-  a
-], t.prototype, "shape");
-o([
-  a
-], t.prototype, "autoComplete");
-o([
-  a()
-], t.prototype, "scale");
-o([
-  a({ attribute: "inputmode" })
-], t.prototype, "inputMode");
-o([
-  C
-], t.prototype, "actionItemsSlottedContent");
-o([
-  C
-], t.prototype, "leadingActionItemsSlottedContent");
-const x = (i) => `vvd-text-field-control-${i}`, Y = ({
-  errorValidationMessage: i,
-  disabled: s,
-  value: e,
-  readOnly: c,
-  placeholder: n,
-  appearance: l,
-  shape: r,
-  label: b,
-  successText: $,
-  actionItemsSlottedContent: I,
-  leadingActionItemsSlottedContent: u,
-  icon: m,
-  scale: f
-}) => U(
-  ["error", !!i],
-  ["disabled", s],
-  ["has-value", !!e],
-  ["readonly", c],
-  ["placeholder", !!n],
-  [`appearance-${l}`, !!l],
-  [`shape-${r}`, !!r],
-  ["no-label", !b],
-  ["has-icon", !!m],
-  ["success", !!$],
-  ["action-items", !!I?.length],
-  ["leading-action-items", !!u?.length],
-  ["no-leading", !(u?.length || m)],
-  [`size-${f}`, !!f]
-), Z = (i) => {
-  const s = P(i);
-  return p`
-		<div class="base ${Y}">
-			<div
-				class="label-suffix"
-				?hidden=${(e) => !(e.charCount && e.maxlength) && !e._hasContextualHelp}
-			>
-				${g(
-    (e) => e.charCount && e.maxlength,
-    (e) => e._getCharCountTemplate(i)
-  )}
-				<slot
-					name="contextual-help"
-					${d("_contextualHelpSlottedContent")}
-				></slot>
-			</div>
-			<slot class="label" name="_label"></slot>
-			${y(p`
-				${g(
-    (e) => e.label,
-    p`
-						<label slot="_label" for="${(e) => x(e._uniqueId)}">
-							${(e) => e.label}
-						</label>
-					`
-  )}
-			`)}
-			<div class="fieldset">
-				<div class="leading-items-wrapper">
-					<slot
-						name="leading-action-items"
-						${d("leadingActionItemsSlottedContent")}
-					></slot>
-					${(e) => s(e.icon)}
-				</div>
-				<div class="wrapper">
-					<slot class="control" name="_control"></slot>
-					${y(
-    p`<input
-							slot="_control"
-							id="${(e) => x(e._uniqueId)}"
-							class="_vvd-3-text-field-safari-workaround"
-							@input="${(e) => e.handleTextInput()}"
-							@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}"
-							aria-describedby="${(e) => e._feedbackDescribedBy} ${(e) => e.charCount && e.maxlength ? e._charCountDescribedBy : null}"
-							value="${(e) => e.initialValue}"
-							${O()}
-							${G("control")}
-						/>`
-  )}
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${d("actionItemsSlottedContent")}
-					></slot>
-				</div>
-			</div>
-			${(e) => e._getFeedbackTemplate(i)}
-		</div>
-	`;
-}, ee = H(
-  "text-field",
-  t,
-  Z,
-  [
-    T,
-    F,
-    W,
-    S
-  ],
+const o = () => s`<slot></slot>`, a = t(
+  "visually-hidden",
+  l,
+  o,
+  [],
   {
-    styles: j,
-    shadowOptions: {
-      delegatesFocus: !0
-    }
+    styles: n
   }
-), xe = M(ee);
+), p = e(
+  a
+);
 export {
-  t as T,
-  xe as r,
-  ee as t
+  l as V,
+  p as r,
+  a as v
 };

package/bundled/definition15.cjs

@@ -1,4 +1,4 @@
-"use strict";const e=require("./vivid-element.cjs"),g=require("./base-progress.cjs"),v=require("./delegates-aria.cjs"),m=require("./class-names.cjs"),c=require("./when.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>
+"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})}

package/bundled/definition15.js

@@ -1,8 +1,8 @@
 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 { c as x } from "./class-names.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--)

package/bundled/definition16.cjs

@@ -1,4 +1,4 @@
-"use strict";const p=require("./definition9.cjs"),n=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./localized.cjs"),g=require("./index.cjs"),m=require("./class-names.cjs"),v=require("./when.cjs"),f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";var b=Object.defineProperty,r=(s,e,i,t)=>{for(var o=void 0,l=s.length-1,c;l>=0;l--)(c=s[l])&&(o=c(e,i,o)||o);return o&&b(e,i,o),o};class a extends u.Localized(d.Anchored(n.VividElement)){constructor(){super(...arguments),this.#e=null,this.alternate=!1,this.placement="right",this.open=!1,this.#t=()=>{this.open||n.DOM.queueUpdate(()=>this.open=!0)},this.#n=e=>{const i=!this.contains(e.target),t=this._anchorEl?.contains(e.target);(i||t)&&(this.open=!1)},this.#o=e=>{e.key==="Escape"&&(this.open=!1)}}#e;openChanged(e,i){e!==void 0&&(i?this.setAttribute("role","status"):this.removeAttribute("role"),this.#i(),this._anchorEl&&this.#s(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#a(i)}#a(e){e.addEventListener("click",this.#t,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||"")}`,this.#s(e)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){e.removeEventListener("click",this.#t,!0),e.ariaLabel&&(e.ariaLabel=this.#e),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded")}#t;#i(){document.removeEventListener("click",this.#n),document.removeEventListener("keydown",this.#o),this.open&&this.isConnected&&(document.addEventListener("click",this.#n),document.addEventListener("keydown",this.#o))}#n;#o}r([n.attr],a.prototype,"headline");r([n.attr({mode:"boolean"})],a.prototype,"alternate");r([n.attr({mode:"fromView"})],a.prototype,"placement");r([n.attr({mode:"boolean"})],a.prototype,"open");const y=s=>m.classNames("control"),k=s=>{const e=s.tagFor(p.Popup),i=d.anchorSlotTemplateFactory();return n.html`
+"use strict";const p=require("./definition9.cjs"),n=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./localized.cjs"),g=require("./index.cjs"),m=require("./when.cjs"),v=require("./class-names.cjs"),f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";var b=Object.defineProperty,r=(s,e,i,t)=>{for(var o=void 0,l=s.length-1,c;l>=0;l--)(c=s[l])&&(o=c(e,i,o)||o);return o&&b(e,i,o),o};class a extends u.Localized(d.Anchored(n.VividElement)){constructor(){super(...arguments),this.#e=null,this.alternate=!1,this.placement="right",this.open=!1,this.#t=()=>{this.open||n.Updates.enqueue(()=>this.open=!0)},this.#n=e=>{const i=!this.contains(e.target),t=this._anchorEl?.contains(e.target);(i||t)&&(this.open=!1)},this.#o=e=>{e.key==="Escape"&&(this.open=!1)}}#e;openChanged(e,i){e!==void 0&&(i?this.setAttribute("role","status"):this.removeAttribute("role"),this.#i(),this._anchorEl&&this.#s(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#i()}disconnectedCallback(){super.disconnectedCallback(),this.#i()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#a(i)}#a(e){e.addEventListener("click",this.#t,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||"")}`,this.#s(e)}#s(e){e.setAttribute("aria-expanded",this.open.toString()),e.setAttribute("data-expanded",this.open.toString())}#r(e){e.removeEventListener("click",this.#t,!0),e.ariaLabel&&(e.ariaLabel=this.#e),e.removeAttribute("aria-expanded"),e.removeAttribute("data-expanded")}#t;#i(){document.removeEventListener("click",this.#n),document.removeEventListener("keydown",this.#o),this.open&&this.isConnected&&(document.addEventListener("click",this.#n),document.addEventListener("keydown",this.#o))}#n;#o}r([n.attr],a.prototype,"headline");r([n.attr({mode:"boolean"})],a.prototype,"alternate");r([n.attr({mode:"fromView"})],a.prototype,"placement");r([n.attr({mode:"boolean"})],a.prototype,"open");const y=s=>v.classNames("control"),k=s=>{const e=s.tagFor(p.Popup),i=d.anchorSlotTemplateFactory();return n.html`
 		${i}
 		<${e}
 			@keydown="${(t,{event:o})=>!(t.open&&g.handleEscapeKeyAndStopPropogation(o))}"
@@ -11,7 +11,7 @@
 			exportparts="vvd-theme-alternate"
 		>
 			<div class="content-wrapper">
-				${v.when(t=>t.headline,n.html`<h2 class="headline">${t=>t.headline}</h2>`)}
+				${m.when(t=>t.headline,n.html`<h2 class="headline">${t=>t.headline}</h2>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>

package/bundled/definition16.js

@@ -1,10 +1,10 @@
 import { P as d, p as h } from "./definition9.js";
-import { V as m, D as u, a, h as c, c as f, d as g } from "./vivid-element.js";
+import { V as m, U as u, a, h as c, c as f, d as g } from "./vivid-element.js";
 import { A as v, a as b } from "./anchored.js";
 import { L as y } from "./localized.js";
 import { h as k } from "./index.js";
-import { c as L } from "./class-names.js";
-import { w as E } from "./when.js";
+import { w as L } from "./when.js";
+import { c as E } from "./class-names.js";
 const x = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
 var A = Object.defineProperty, r = (n, e, i, t) => {
   for (var o = void 0, l = n.length - 1, p; l >= 0; l--)
@@ -14,7 +14,7 @@ var A = Object.defineProperty, r = (n, e, i, t) => {
 class s extends y(v(m)) {
   constructor() {
     super(...arguments), this.#e = null, this.alternate = !1, this.placement = "right", this.open = !1, this.#t = () => {
-      this.open || u.queueUpdate(() => this.open = !0);
+      this.open || u.enqueue(() => this.open = !0);
     }, this.#o = (e) => {
       const i = !this.contains(e.target), t = this._anchorEl?.contains(e.target);
       (i || t) && (this.open = !1);
@@ -66,7 +66,7 @@ r([
 r([
   a({ mode: "boolean" })
 ], s.prototype, "open");
-const C = (n) => L("control"), _ = (n) => {
+const C = (n) => E("control"), _ = (n) => {
   const e = n.tagFor(d), i = b();
   return c`
 		${i}
@@ -81,7 +81,7 @@ const C = (n) => L("control"), _ = (n) => {
 			exportparts="vvd-theme-alternate"
 		>
 			<div class="content-wrapper">
-				${E((t) => t.headline, c`<h2 class="headline">${(t) => t.headline}</h2>`)}
+				${L((t) => t.headline, c`<h2 class="headline">${(t) => t.headline}</h2>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
@@ -95,9 +95,9 @@ const C = (n) => L("control"), _ = (n) => {
   {
     styles: x
   }
-), F = f($);
+), j = f($);
 export {
   s as T,
-  F as r,
+  j as r,
   $ as t
 };

package/bundled/definition17.cjs

@@ -1,13 +1,13 @@
-"use strict";const r=require("./vivid-element.cjs"),v=require("./form-associated.cjs"),p=require("./with-error-text.cjs"),h=require("./form-element.cjs"),u=require("./key-codes.cjs"),b=require("./class-names.cjs"),m=require("./when.cjs"),f=':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)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-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{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.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(--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));position:absolute;display:block;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));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)}';var y=Object.defineProperty,l=(a,e,o,i)=>{for(var t=void 0,c=a.length-1,s;c>=0;c--)(s=a[c])&&(t=s(e,o,t)||t);return t&&y(e,o,t),t};class n extends p.WithErrorText(h.FormElement(v.CheckableFormAssociated(r.VividElement))){constructor(){super(),this.initialValue="on",this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case u.keySpace:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement("input"),this.#o=()=>{const e=this.#e,o=this.#a;e&&e.length>1&&e.some(t=>t.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage="",o&&(o.errorValidationMessage=""))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){const e=this.#e,o=this.#a;e&&e.length>1&&e.forEach(i=>{i.elementInternals.setValidity({valueMissing:!1}),i.errorValidationMessage="",o&&(o.errorValidationMessage="")})}},this.proxy.setAttribute("type","radio"),this.proxy.setAttribute("name",this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}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))}nameChanged(e,o){super.nameChanged(e,o),o!==null?this.proxy.setAttribute("name",this.name):this.proxy.removeAttribute("name"),r.DOM.queueUpdate(this.validate)}connectedCallback(){super.connectedCallback(),r.DOM.queueUpdate(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(){const e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#a(){const e=this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);return e||null}#o;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||"",this.validity.valueMissing?this.#o():this.#r())}}l([r.attr],n.prototype,"connotation");l([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");l([r.observable],n.prototype,"defaultSlottedNodes");const _=({connotation:a,checked:e,readOnly:o,disabled:i})=>b.classNames("base",[`connotation-${a}`,!!a],["checked",!!e],["readonly",!!o],["disabled",!!i]),k=r.html`<template
-	aria-checked="${a=>a.checked}"
-	aria-disabled="${a=>a.disabled}"
-	aria-required="${a=>a.required}"
-	@keypress="${(a,e)=>a.keypressHandler(e.event)}"
-	@click="${(a,e)=>a.clickHandler(e.event)}"
+"use strict";const r=require("./vivid-element.cjs"),v=require("./form-associated.cjs"),p=require("./with-error-text.cjs"),h=require("./form-element.cjs"),u=require("./key-codes.cjs"),b=require("./when.cjs"),m=require("./class-names.cjs"),f=':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)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-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{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.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(--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));position:absolute;display:block;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));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)}';var y=Object.defineProperty,l=(a,e,o,i)=>{for(var t=void 0,c=a.length-1,s;c>=0;c--)(s=a[c])&&(t=s(e,o,t)||t);return t&&y(e,o,t),t};class n extends p.WithErrorText(h.FormElement(v.CheckableFormAssociated(r.VividElement))){constructor(){super(),this.initialValue="on",this.defaultSlottedNodes=[],this.keypressHandler=e=>{switch(e.key){case u.keySpace:!this.checked&&!this.readOnly&&(this.checked=!0);return}return!0},this.proxy=document.createElement("input"),this.#o=()=>{const e=this.#e,o=this.#a;e&&e.length>1&&e.some(t=>t.checked)&&(this.setValidity({valueMissing:!1}),this.errorValidationMessage="",o&&(o.errorValidationMessage=""))},this.#r=()=>{if(this.elementInternals&&!this.validity.valueMissing){const e=this.#e,o=this.#a;e&&e.length>1&&e.forEach(i=>{i.elementInternals.setValidity({valueMissing:!1}),i.errorValidationMessage="",o&&(o.errorValidationMessage="")})}},this.proxy.setAttribute("type","radio"),this.proxy.setAttribute("name",this.name),this.checked=this.defaultChecked,this.dirtyChecked=!1}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))}nameChanged(e,o){super.nameChanged(e,o),o!==null?this.proxy.setAttribute("name",this.name):this.proxy.removeAttribute("name"),r.Updates.enqueue(this.validate)}connectedCallback(){super.connectedCallback(),r.Updates.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(){const e=this.parentElement?.querySelectorAll(`${this.tagName.toLocaleLowerCase()}[name="${this.name}"]`);return e?Array.from(e):[]}get#a(){const e=this.closest(`${this.tagName.toLocaleLowerCase()}-group[name="${this.name}"]`);return e||null}#o;#r;validate(e){super.validate(e),this.proxy&&(this.errorValidationMessage=this.validationMessage||"",this.validity.valueMissing?this.#o():this.#r())}}l([r.attr],n.prototype,"connotation");l([r.attr({attribute:"readonly",mode:"boolean"})],n.prototype,"readOnly");l([r.observable],n.prototype,"defaultSlottedNodes");const _=({connotation:a,checked:e,readOnly:o,disabled:i})=>m.classNames("base",[`connotation-${a}`,!!a],["checked",!!e],["readonly",!!o],["disabled",!!i]),k=r.html`<template
+	aria-checked="${a=>a?.checked}"
+	aria-disabled="${a=>a?.disabled}"
+	aria-required="${a=>a?.required}"
+	@keypress="${(a,e)=>a?.keypressHandler(e.event)}"
+	@click="${(a,e)=>a?.clickHandler(e.event)}"
 	role="radio"
 >
 	<div class="${_}">
 		<div class="control"></div>
-		${m.when(a=>a.label,r.html`<label class="label">${a=>a.label}</label>`)}
+		${b.when(a=>a?.label,r.html`<label class="label">${a=>a?.label}</label>`)}
 	</div>
 </template>`,d=r.defineVividComponent("radio",n,k,[],{styles:f}),x=r.createRegisterFunction(d);exports.Radio=n;exports.radioDefinition=d;exports.registerRadio=x;

package/bundled/definition17.js

@@ -1,10 +1,10 @@
-import { V as p, D as s, a as v, o as h, h as d, c as u, d as m } from "./vivid-element.js";
+import { V as p, U as s, a as v, o as h, h as d, c as u, d as m } from "./vivid-element.js";
 import { C as b } from "./form-associated.js";
 import { W as f } from "./with-error-text.js";
 import { F as y } from "./form-element.js";
 import { l as _ } from "./key-codes.js";
-import { c as x } from "./class-names.js";
-import { w as k } from "./when.js";
+import { w as x } from "./when.js";
+import { c as k } from "./class-names.js";
 const g = ':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)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: var(--_connotation-color-primary)}.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{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled{--_appearance-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{display:inline-flex;align-items:center;cursor:pointer;gap:8px}@supports (user-select: none){.base{user-select:none}}.base.disabled{pointer-events:none}.control{position:relative;flex-shrink:0;border-radius:50%;block-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)));box-shadow:inset 0 0 0 2px var(--_appearance-color-outline);inline-size:calc(1px*(20 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.base:not(.checked) .control{background-color:var(--_appearance-color-fill)}.control:after{position:absolute;border-radius:inherit;background-color:var(--_appearance-color-outline);content:"";inset:5px;opacity:1;transition:opacity .2s}.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(--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));position:absolute;display:block;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));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)}';
 var C = Object.defineProperty, c = (a, e, o, t) => {
   for (var r = void 0, n = a.length - 1, l; n >= 0; n--)
@@ -51,13 +51,13 @@ class i extends f(
    * @internal
    */
   nameChanged(e, o) {
-    super.nameChanged(e, o), o !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name"), s.queueUpdate(this.validate);
+    super.nameChanged(e, o), o !== null ? this.proxy.setAttribute("name", this.name) : this.proxy.removeAttribute("name"), s.enqueue(this.validate);
   }
   /**
    * @internal
    */
   connectedCallback() {
-    super.connectedCallback(), s.queueUpdate(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));
+    super.connectedCallback(), s.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(
@@ -100,28 +100,28 @@ c([
 c([
   h
 ], i.prototype, "defaultSlottedNodes");
-const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => x(
+const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => k(
   "base",
   [`connotation-${a}`, !!a],
   ["checked", !!e],
   ["readonly", !!o],
   ["disabled", !!t]
 ), $ = d`<template
-	aria-checked="${(a) => a.checked}"
-	aria-disabled="${(a) => a.disabled}"
-	aria-required="${(a) => a.required}"
-	@keypress="${(a, e) => a.keypressHandler(e.event)}"
-	@click="${(a, e) => a.clickHandler(e.event)}"
+	aria-checked="${(a) => a?.checked}"
+	aria-disabled="${(a) => a?.disabled}"
+	aria-required="${(a) => a?.required}"
+	@keypress="${(a, e) => a?.keypressHandler(e.event)}"
+	@click="${(a, e) => a?.clickHandler(e.event)}"
 	role="radio"
 >
 	<div class="${w}">
 		<div class="control"></div>
-		${k(
-  (a) => a.label,
-  d`<label class="label">${(a) => a.label}</label>`
+		${x(
+  (a) => a?.label,
+  d`<label class="label">${(a) => a?.label}</label>`
 )}
 	</div>
-</template>`, M = m(
+</template>`, V = m(
   "radio",
   i,
   $,
@@ -129,9 +129,9 @@ const w = ({ connotation: a, checked: e, readOnly: o, disabled: t }) => x(
   {
     styles: g
   }
-), q = u(M);
+), q = u(V);
 export {
   i as R,
-  M as a,
+  V as a,
   q as r
 };