@vonage/vivid 4.31.0 → 5.1.0

package/bundled/definition13.js

@@ -0,0 +1,359 @@
+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 "./with-contextual-help.js";
+import { W as N } from "./char-count.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 A(
+  L(
+    N(
+      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;
+  }
+}
+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
+  ],
+  {
+    styles: j,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), xe = M(ee);
+export {
+  t as T,
+  xe as r,
+  ee as t
+};

package/bundled/definition14.cjs

@@ -0,0 +1,5 @@
+"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;

package/bundled/definition14.js

@@ -0,0 +1,29 @@
+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
+};

package/bundled/definition15.cjs

@@ -0,0 +1,30 @@
+"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>
+	<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>
+			`)}
+	</div>
+</template>`,d=e.defineVividComponent("progress-ring",n,u,[],{styles:f}),_=e.createRegisterFunction(d);exports.ProgressRing=n;exports.progressRingDefinition=d;exports.registerProgressRing=_;

package/bundled/definition15.js

@@ -0,0 +1,80 @@
+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";
+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;
+};
+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>
+			`
+)}
+	</div>
+</template>`, k = g(
+  "progress-ring",
+  n,
+  y,
+  [],
+  {
+    styles: _
+  }
+), B = d(
+  k
+);
+export {
+  n as P,
+  k as p,
+  B as r
+};

package/bundled/definition16.cjs

@@ -0,0 +1,19 @@
+"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`
+		${i}
+		<${e}
+			@keydown="${(t,{event:o})=>!(t.open&&g.handleEscapeKeyAndStopPropogation(o))}"
+			class="${y}"
+			arrow
+			:anchor="${t=>t._anchorEl}"
+			:open="${t=>t.open}"
+			?alternate="${t=>!t.alternate}"
+			placement="${t=>t.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${v.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>
+		</${e}>
+	`},h=n.defineVividComponent("toggletip",a,k,[p.popupDefinition],{styles:f}),E=n.createRegisterFunction(h);exports.Toggletip=a;exports.registerToggletip=E;exports.toggletipDefinition=h;

package/bundled/definition16.js

@@ -0,0 +1,103 @@
+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 { 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";
+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--)
+    (p = n[l]) && (o = p(e, i, o) || o);
+  return o && A(e, i, o), o;
+};
+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.#o = (e) => {
+      const i = !this.contains(e.target), t = this._anchorEl?.contains(e.target);
+      (i || t) && (this.open = !1);
+    }, this.#n = (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();
+  }
+  /**
+   * @internal
+   */
+  _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.#o), document.removeEventListener("keydown", this.#n), this.open && this.isConnected && (document.addEventListener("click", this.#o), document.addEventListener("keydown", this.#n));
+  }
+  #o;
+  #n;
+}
+r([
+  a
+], s.prototype, "headline");
+r([
+  a({ mode: "boolean" })
+], s.prototype, "alternate");
+r([
+  a({ mode: "fromView" })
+], s.prototype, "placement");
+r([
+  a({ mode: "boolean" })
+], s.prototype, "open");
+const C = (n) => L("control"), _ = (n) => {
+  const e = n.tagFor(d), i = b();
+  return c`
+		${i}
+		<${e}
+			@keydown="${(t, { event: o }) => !(t.open && k(o))}"
+			class="${C}"
+			arrow
+			:anchor="${(t) => t._anchorEl}"
+			:open="${(t) => t.open}"
+			?alternate="${(t) => !t.alternate}"
+			placement="${(t) => t.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${E((t) => t.headline, c`<h2 class="headline">${(t) => t.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${e}>
+	`;
+}, $ = g(
+  "toggletip",
+  s,
+  _,
+  [h],
+  {
+    styles: x
+  }
+), F = f($);
+export {
+  s as T,
+  F as r,
+  $ as t
+};

package/bundled/definition17.cjs

@@ -0,0 +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)}"
+	role="radio"
+>
+	<div class="${_}">
+		<div class="control"></div>
+		${m.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;