@vonage/vivid 5.2.0 → 5.4.0

package/bundled/definition11.js

@@ -1,44 +1,225 @@
-import { I as l, i } from "./definition2.js";
-import { T as s, t as p } from "./definition16.js";
-import { V as v, a as d, h as u, c as f, d as _ } from "./vivid-element.js";
-import { c as m } from "./class-names.js";
-var b = Object.defineProperty, x = (o, r, t, w) => {
-  for (var a = void 0, n = o.length - 1, e; n >= 0; n--)
-    (e = o[n]) && (a = e(r, t, a) || a);
-  return a && b(r, t, a), a;
+import { I as b, i as f } from "./definition2.js";
+import { V as m, a as c, o as d, v as h, h as l, c as x, d as _ } from "./vivid-element.js";
+import { A as y, a as u, I as g } from "./affix.js";
+import { H as S, a as k } from "./host-semantics.js";
+import { i as w } from "./dom.js";
+import { w as s } from "./when.js";
+import { c as z } from "./class-names.js";
+var T = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, r = (e, a, n, t) => {
+  for (var i = t > 1 ? void 0 : t ? $(a, n) : a, p = e.length - 1, v; p >= 0; p--)
+    (v = e[p]) && (i = (t ? v(a, n, i) : v(i)) || i);
+  return t && i && T(a, n, i), i;
 };
-class c extends v {
-  constructor() {
-    super(...arguments), this.placement = "right";
+function V(e) {
+  return w(e) && (e.getAttribute("role") === "option" || e instanceof HTMLOptionElement || e instanceof o);
+}
+class o extends S(
+  y(m)
+) {
+  constructor(a, n, t, i) {
+    super(), this.defaultSelected = !1, this.dirtySelected = !1, this.value = "", this._highlighted = !1, this._displayCheckmark = !1, this._vvdSearchText = "", this._isNotMatching = !1, a && (this.text = a), n && (this.value = n), t && (this.defaultSelected = t), i && (this.selected = i), this.proxy = new Option(
+      this.text,
+      this.value,
+      this.defaultSelected,
+      this.selected
+    ), this.proxy.disabled = this.disabled;
+  }
+  defaultSelectedChanged() {
+    this.dirtySelected || (this.selected = this.defaultSelected, this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.defaultSelected)), this.proxy instanceof HTMLOptionElement && (this.proxy.defaultSelected = this.defaultSelected);
+  }
+  disabledChanged() {
+    this.proxy instanceof HTMLOptionElement && (this.proxy.disabled = this.disabled);
+  }
+  /**
+   * @deprecated Use `defaultSelected` instead.
+   */
+  get selectedAttribute() {
+    return this.defaultSelected;
+  }
+  set selectedAttribute(a) {
+    this.defaultSelected = a;
+  }
+  selectedChanged() {
+    this.dirtySelected || (this.dirtySelected = !0), this.proxy instanceof HTMLOptionElement && (this.proxy.selected = this.selected);
+  }
+  valueChanged() {
+    if (typeof this.value != "string") {
+      this.value = "";
+      return;
+    }
+    this.proxy instanceof HTMLOptionElement && (this.proxy.value = this.value);
+  }
+  get label() {
+    return this._label ?? this.text;
+  }
+  set label(a) {
+    this._label = a;
+  }
+  set text(a) {
+    this._text = a;
   }
+  get text() {
+    return this._text ?? "";
+  }
+  /**
+   * Provides an accessible name for use by parent components.
+   * Note: Does not implement full accessible name computation, e.g. slotted content is missed.
+   * @internal
+   */
+  _getAccessibleName() {
+    return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+  }
+  get form() {
+    return null;
+  }
+  get _hasMatchedText() {
+    return !!(this.matchedText ?? this._vvdSearchText);
+  }
+  get _matchedRange() {
+    const a = this.matchedText ?? this._vvdSearchText;
+    if (a) {
+      const n = this.text.toLowerCase().indexOf(a.toLowerCase());
+      return n === -1 ? { from: 0, to: 0 } : {
+        from: n,
+        to: n + a.length
+      };
+    }
+    return { from: 0, to: 0 };
+  }
+  /**
+   * @internal
+   */
+  connectedCallback() {
+    super.connectedCallback(), this.dirtySelected || (this.selected = this.defaultSelected, this.dirtySelected = !1);
+  }
+}
+r([
+  c({
+    converter: {
+      fromView: (e) => {
+        if (e === !0 || e === "true")
+          return !0;
+        if (e === !1 || e === "false")
+          return !1;
+      },
+      toView: (e) => e
+    }
+  })
+], o.prototype, "checked", 2);
+r([
+  c({ attribute: "selected", mode: "boolean" })
+], o.prototype, "defaultSelected", 2);
+r([
+  c({ mode: "boolean" })
+], o.prototype, "disabled", 2);
+r([
+  c({ attribute: "current-selected", mode: "boolean" })
+], o.prototype, "selected", 2);
+r([
+  c({ attribute: "value" })
+], o.prototype, "value", 2);
+r([
+  c({
+    attribute: "label"
+  })
+], o.prototype, "_label", 2);
+r([
+  c({
+    attribute: "text"
+  })
+], o.prototype, "_text", 2);
+r([
+  c({ attribute: "text-secondary" })
+], o.prototype, "textSecondary", 2);
+r([
+  d
+], o.prototype, "_highlighted", 2);
+r([
+  d
+], o.prototype, "_displayCheckmark", 2);
+r([
+  c({ attribute: "matched-text" })
+], o.prototype, "matchedText", 2);
+r([
+  d
+], o.prototype, "_vvdSearchText", 2);
+r([
+  h
+], o.prototype, "_hasMatchedText", 1);
+r([
+  d
+], o.prototype, "_isNotMatching", 2);
+r([
+  h
+], o.prototype, "_matchedRange", 1);
+r([
+  c({ attribute: "tag-connotation" })
+], o.prototype, "tagConnotation", 2);
+const C = (e) => z(
+  "base",
+  ["disabled", e.disabled],
+  ["selected", !!e.selected],
+  ["hover", !!e._highlighted],
+  ["active", !!e.checked],
+  ["icon", !!e.icon],
+  ["two-lines", !!e.text?.length && !!e.textSecondary?.length]
+);
+function O() {
+  return l`${s(
+    (e) => e.text || e.textSecondary,
+    l`<span class="text">
+			${s(
+      (e) => e.text,
+      l`<span class="text-primary">
+					${s(
+        (e) => e._hasMatchedText,
+        l`${(e) => e.text.slice(0, e._matchedRange.from)}<span class="match"
+								>${(e) => e.text.slice(e._matchedRange.from, e._matchedRange.to)}</span
+							>`
+      )}${(e) => e.text.slice(e._matchedRange.to)}
+				</span>`
+    )}
+			${s(
+      (e) => e.textSecondary,
+      l`<span class="text-secondary">${(e) => e.textSecondary}</span>`
+    )}
+		</span>`
+  )}`;
 }
-x([
-  d({ mode: "fromView" })
-], c.prototype, "placement");
-const g = (o) => m("control"), h = (o) => {
-  const r = o.tagFor(s), t = o.tagFor(l);
-  return u`
-		<${r} class="base" exportparts="vvd-theme-alternate">
-			<button class="${g}" slot="anchor">
-        <slot name="icon" slot="icon">
-          <${t} name="help-solid"></${t}>
-        </slot>
-			</button>
-			<slot></slot>
-		</${r}>
+const L = (e) => {
+  const a = u(e), n = e.tagFor(b);
+  return l`
+		<template
+			${k({
+    role: "option",
+    ariaChecked: (t) => t.checked,
+    ariaSelected: (t) => t.selected,
+    ariaDisabled: (t) => t.disabled
+  })}
+			style="${(t) => t._isNotMatching ? "display: none" : ""}"
+		>
+			<div class="${C}">
+				${(t) => a(t.icon, g.Slot)} ${O()}
+				<slot name="trailing-meta"></slot>
+				${s(
+    (t) => t._displayCheckmark && t.selected,
+    l`<${n} class="checkmark" name="check-line"></${n}>`
+  )}
+			</div>
+		</template>
 	`;
-}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
-  "contextual-help",
-  c,
-  h,
-  [i, p],
+}, M = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_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:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;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))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}", H = _(
+  "option",
+  o,
+  L,
+  [f],
   {
-    styles: y
+    styles: M
   }
-), H = f(
-  k
-);
+), P = x(H);
 export {
-  k as c,
-  H as r
+  o as L,
+  V as i,
+  H as l,
+  P as r
 };

package/bundled/definition12.cjs

@@ -1 +1,10 @@
-"use strict";const i=require("./vivid-element.cjs"),n=":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";class e extends i.VividElement{}const s=()=>i.html`<slot></slot>`,t=i.defineVividComponent("visually-hidden",e,s,[],{styles:n}),l=i.createRegisterFunction(t);exports.VisuallyHidden=e;exports.registerVisuallyHidden=l;exports.visuallyHiddenDefinition=t;
+"use strict";const l=require("./definition2.cjs"),i=require("./definition16.cjs"),n=require("./vivid-element.cjs"),v=require("./class-names.cjs");var d=Object.defineProperty,u=(o,r,a,x)=>{for(var t=void 0,e=o.length-1,c;e>=0;e--)(c=o[e])&&(t=c(r,a,t)||t);return t&&d(r,a,t),t};class s extends n.VividElement{constructor(){super(...arguments),this.placement="right"}}u([n.attr({mode:"fromView"})],s.prototype,"placement");const f=o=>v.classNames("control"),_=o=>{const r=o.tagFor(i.Toggletip),a=o.tagFor(l.Icon);return n.html`
+		<${r} class="base" exportparts="vvd-theme-alternate">
+			<button class="${f}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${a} name="help-solid"></${a}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${r}>
+	`},b=".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;

package/bundled/definition12.js

@@ -1,20 +1,44 @@
-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 {
+import { I as l, i } from "./definition2.js";
+import { T as s, t as p } from "./definition16.js";
+import { V as v, a as d, h as u, c as f, d as _ } from "./vivid-element.js";
+import { c as m } from "./class-names.js";
+var b = Object.defineProperty, x = (o, r, t, w) => {
+  for (var a = void 0, n = o.length - 1, e; n >= 0; n--)
+    (e = o[n]) && (a = e(r, t, a) || a);
+  return a && b(r, t, a), a;
+};
+class c extends v {
+  constructor() {
+    super(...arguments), this.placement = "right";
+  }
 }
-const o = () => s`<slot></slot>`, a = t(
-  "visually-hidden",
-  l,
-  o,
-  [],
+x([
+  d({ mode: "fromView" })
+], c.prototype, "placement");
+const g = (o) => m("control"), h = (o) => {
+  const r = o.tagFor(s), t = o.tagFor(l);
+  return u`
+		<${r} class="base" exportparts="vvd-theme-alternate">
+			<button class="${g}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${t} name="help-solid"></${t}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${r}>
+	`;
+}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
+  "contextual-help",
+  c,
+  h,
+  [i, p],
   {
-    styles: n
+    styles: y
   }
-), p = e(
-  a
+), H = f(
+  k
 );
 export {
-  l as V,
-  p as r,
-  a as v
+  k as c,
+  H as r
 };

package/bundled/definition13.cjs

@@ -1,73 +1 @@
-"use strict";const T=require("./definition2.cjs"),t=require("./vivid-element.cjs"),d=require("./mixins.cjs"),_=require("./definition12.cjs"),q=require("./definition11.cjs"),x=require("./delegates-aria.cjs"),k=require("./form-associated.cjs"),E=require("./char-count.cjs"),M=require("./with-contextual-help.cjs"),H=require("./with-error-text.cjs"),F=require("./with-success-text.cjs"),L=require("./form-element.cjs"),v=require("./affix.cjs"),w=require("./text-field.cjs"),D=require("./class-names.cjs"),m=require("./when.cjs"),c=require("./slotted.cjs"),S=require("./ref.cjs");var N=Object.defineProperty,i=(n,a,e,h)=>{for(var l=void 0,s=n.length-1,r;s>=0;s--)(r=n[s])&&(l=r(a,e,l)||l);return l&&N(a,e,l),l};const O={text:"text"},A="_vvd-3-text-field-safari-workaround",y=t.ElementStyles.create([`
-	.${A}::placeholder {
-		opacity: 1 !important;
-		-webkit-text-fill-color: var(--_low-ink-color) !important;
-	}
-`]),B=n=>{const a=n.getRootNode();y.isAttachedTo(a)||y.addStylesTo(a)};class o extends M.WithContextualHelp(d.WithLightDOMFeedback(E.WithCharCount(H.WithErrorText(F.WithSuccessText(L.FormElement(v.AffixIcon(x.DelegatesAria(k.FormAssociated(t.VividElement))))))))){constructor(){super(...arguments),this.proxy=document.createElement("input"),this.type=O.text,this.#e=d.generateRandomId()}readOnlyChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.readOnly=this.readOnly,this.validate())}autofocusChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.autofocus=this.autofocus,this.validate())}placeholderChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.placeholder=this.placeholder)}typeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.type=this.type,this.validate())}listChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.setAttribute("list",this.list),this.validate())}maxlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.maxLength=this.maxlength,this.validate())}minlengthChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.minLength=this.minlength,this.validate())}patternChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.pattern=this.pattern,this.validate())}sizeChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.size=this.size)}spellcheckChanged(){this.proxy instanceof HTMLInputElement&&(this.proxy.spellcheck=this.spellcheck)}valueChanged(a,e){super.valueChanged(a,e),this._updateControlValueIfNeeded(),this.charCount&&this.maxlength&&this._updateCharCountRemaining()}_updateControlValueIfNeeded(){this.control&&this.control.value!==this.value&&(this.control.value=this.value)}select(){this.control.select()}handleTextInput(){this.value=this.control.value}handleChange(){this.$emit("change")}validate(){super.validate(this.control)}connectedCallback(){super.connectedCallback(),this.proxy.setAttribute("type",this.type),this.validate(),this.autofocus&&t.DOM.queueUpdate(()=>{this.focus()}),this._updateControlValueIfNeeded(),B(this),this._renderCharCountRemaining()}focus(){this.control?.focus()}#e;get _uniqueId(){return this.id||this.#e}}i([t.attr({attribute:"readonly",mode:"boolean"})],o.prototype,"readOnly");i([t.attr({mode:"boolean"})],o.prototype,"autofocus");i([t.attr],o.prototype,"placeholder");i([t.attr],o.prototype,"type");i([t.attr],o.prototype,"list");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"maxlength");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"minlength");i([t.attr],o.prototype,"pattern");i([t.attr({converter:t.nullableNumberConverter})],o.prototype,"size");i([t.attr({mode:"boolean"})],o.prototype,"spellcheck");i([t.attr],o.prototype,"appearance");i([t.attr],o.prototype,"shape");i([t.attr],o.prototype,"autoComplete");i([t.attr()],o.prototype,"scale");i([t.attr({attribute:"inputmode"})],o.prototype,"inputMode");i([t.observable],o.prototype,"actionItemsSlottedContent");i([t.observable],o.prototype,"leadingActionItemsSlottedContent");const g=n=>`vvd-text-field-control-${n}`,W=({errorValidationMessage:n,disabled:a,value:e,readOnly:h,placeholder:l,appearance:s,shape:r,label:C,successText:$,actionItemsSlottedContent:I,leadingActionItemsSlottedContent:p,icon:u,scale:f})=>D.classNames(["error",!!n],["disabled",a],["has-value",!!e],["readonly",h],["placeholder",!!l],[`appearance-${s}`,!!s],[`shape-${r}`,!!r],["no-label",!C],["has-icon",!!u],["success",!!$],["action-items",!!I?.length],["leading-action-items",!!p?.length],["no-leading",!(p?.length||u)],[`size-${f}`,!!f]),z=n=>{const a=v.affixIconTemplateFactory(n);return t.html`
-		<div class="base ${W}">
-			<div
-				class="label-suffix"
-				?hidden=${e=>!(e.charCount&&e.maxlength)&&!e._hasContextualHelp}
-			>
-				${m.when(e=>e.charCount&&e.maxlength,e=>e._getCharCountTemplate(n))}
-				<slot
-					name="contextual-help"
-					${c.slotted("_contextualHelpSlottedContent")}
-				></slot>
-			</div>
-			<slot class="label" name="_label"></slot>
-			${d.renderInLightDOM(t.html`
-				${m.when(e=>e.label,t.html`
-						<label slot="_label" for="${e=>g(e._uniqueId)}">
-							${e=>e.label}
-						</label>
-					`)}
-			`)}
-			<div class="fieldset">
-				<div class="leading-items-wrapper">
-					<slot
-						name="leading-action-items"
-						${c.slotted("leadingActionItemsSlottedContent")}
-					></slot>
-					${e=>a(e.icon)}
-				</div>
-				<div class="wrapper">
-					<slot class="control" name="_control"></slot>
-					${d.renderInLightDOM(t.html`<input
-							slot="_control"
-							id="${e=>g(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}"
-							${x.delegateAria()}
-							${S.ref("control")}
-						/>`)}
-				</div>
-				<div class="action-items-wrapper">
-					<slot
-						name="action-items"
-						${c.slotted("actionItemsSlottedContent")}
-					></slot>
-				</div>
-			</div>
-			${e=>e._getFeedbackTemplate(n)}
-		</div>
-	`},b=t.defineVividComponent("text-field",o,z,[T.iconDefinition,d.feedbackMessageDefinition,_.visuallyHiddenDefinition,q.contextualHelpDefinition],{styles:w.styles,shadowOptions:{delegatesFocus:!0}}),V=t.createRegisterFunction(b);exports.TextField=o;exports.registerTextField=V;exports.textFieldDefinition=b;
+"use strict";const i=require("./vivid-element.cjs"),n=":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";class e extends i.VividElement{}const s=()=>i.html`<slot></slot>`,t=i.defineVividComponent("visually-hidden",e,s,[],{styles:n}),l=i.createRegisterFunction(t);exports.VisuallyHidden=e;exports.registerVisuallyHidden=l;exports.visuallyHiddenDefinition=t;