@vonage/vivid 4.31.0 → 5.1.0

package/bundled/char-count.cjs

@@ -0,0 +1,13 @@
+"use strict";const o=require("./definition12.cjs"),u=require("./localized.cjs"),s=require("./vivid-element.cjs"),c=require("./ref.cjs");var l=Object.defineProperty,d=(i,n,a,r)=>{for(var e=void 0,t=i.length-1,h;t>=0;t--)(h=i[t])&&(e=h(n,a,e)||e);return e&&l(n,a,e),e};const C=i=>{class n extends u.Localized(i){constructor(){super(...arguments),this.charCount=!1,this.#t=null,this._charCountDescribedBy="char-count-description",this._renderCharCountRemaining=()=>{!this.charCount||!this.maxlength||(this.charCountRemaining.textContent=this.locale.charCount.charactersRemainingMessage(this.maxlength-this.value.length))},this._updateCharCountRemaining=()=>{this.#t!==null&&clearTimeout(this.#t),this.#t=setTimeout(()=>this._renderCharCountRemaining(),1e3)},this._getCharCountTemplate=r=>{const e=r.tagFor(o.VisuallyHidden);return s.html`
+				<div class="char-count">
+					<span aria-hidden="true"
+						> ${t=>t.value?t.value.length:0} / ${t=>t.maxlength}</span
+					>
+					<${e} id="${t=>t._charCountDescribedBy}"
+						>${t=>t.locale.charCount.charactersLimitMessage(t.maxlength)}</${e}
+					>
+					<${e} id="char-count-remaining" aria-live="polite" ${c.ref("charCountRemaining")}
+						></${e}
+					>
+				</div>
+			`}}#t}return d([s.attr({attribute:"char-count",mode:"boolean"})],n.prototype,"charCount"),n};exports.WithCharCount=C;

package/bundled/char-count.js

@@ -0,0 +1,54 @@
+import { V as o } from "./definition12.js";
+import { L as s } from "./localized.js";
+import { a as u, h as l } from "./vivid-element.js";
+import { r as c } from "./ref.js";
+var m = Object.defineProperty, d = (r, a, n, i) => {
+  for (var e = void 0, t = r.length - 1, h; t >= 0; t--)
+    (h = r[t]) && (e = h(a, n, e) || e);
+  return e && m(a, n, e), e;
+};
+const v = (r) => {
+  class a extends s(r) {
+    constructor() {
+      super(...arguments), this.charCount = !1, this.#t = null, this._charCountDescribedBy = "char-count-description", this._renderCharCountRemaining = () => {
+        !this.charCount || !this.maxlength || (this.charCountRemaining.textContent = this.locale.charCount.charactersRemainingMessage(
+          this.maxlength - this.value.length
+        ));
+      }, this._updateCharCountRemaining = () => {
+        this.#t !== null && clearTimeout(this.#t), this.#t = setTimeout(
+          () => this._renderCharCountRemaining(),
+          1e3
+        );
+      }, this._getCharCountTemplate = (i) => {
+        const e = i.tagFor(o);
+        return l`
+				<div class="char-count">
+					<span aria-hidden="true"
+						> ${(t) => t.value ? t.value.length : 0} / ${(t) => t.maxlength}</span
+					>
+					<${e} id="${(t) => t._charCountDescribedBy}"
+						>${(t) => t.locale.charCount.charactersLimitMessage(
+          t.maxlength
+        )}</${e}
+					>
+					<${e} id="char-count-remaining" aria-live="polite" ${c(
+          "charCountRemaining"
+        )}
+						></${e}
+					>
+				</div>
+			`;
+      };
+    }
+    #t;
+  }
+  return d([
+    u({
+      attribute: "char-count",
+      mode: "boolean"
+    })
+  ], a.prototype, "charCount"), a;
+};
+export {
+  v as W
+};

package/bundled/children.cjs

@@ -0,0 +1 @@
+"use strict";const i=require("./vivid-element.cjs"),s=require("./slotted.cjs");class n extends s.NodeObservationBehavior{constructor(r,t){super(r,t),this.observer=null,t.childList=!0}observe(){this.observer===null&&(this.observer=new MutationObserver(this.handleEvent.bind(this))),this.observer.observe(this.target,this.options)}disconnect(){this.observer.disconnect()}getNodes(){return"subtree"in this.options?Array.from(this.target.querySelectorAll(this.options.selector)):Array.from(this.target.childNodes)}}function o(e){return typeof e=="string"&&(e={property:e}),new i.AttachedBehaviorHTMLDirective("fast-children",n,e)}exports.children=o;

package/bundled/children.js

@@ -0,0 +1,38 @@
+import { A as s } from "./vivid-element.js";
+import { N as i } from "./slotted.js";
+class o extends i {
+  /**
+   * Creates an instance of ChildrenBehavior.
+   * @param target - The element target to observe children on.
+   * @param options - The options to use when observing the element children.
+   */
+  constructor(t, r) {
+    super(t, r), this.observer = null, r.childList = !0;
+  }
+  /**
+   * Begins observation of the nodes.
+   */
+  observe() {
+    this.observer === null && (this.observer = new MutationObserver(this.handleEvent.bind(this))), this.observer.observe(this.target, this.options);
+  }
+  /**
+   * Disconnects observation of the nodes.
+   */
+  disconnect() {
+    this.observer.disconnect();
+  }
+  /**
+   * Retrieves the nodes that should be assigned to the target.
+   */
+  getNodes() {
+    return "subtree" in this.options ? Array.from(this.target.querySelectorAll(this.options.selector)) : Array.from(this.target.childNodes);
+  }
+}
+function a(e) {
+  return typeof e == "string" && (e = {
+    property: e
+  }), new s("fast-children", o, e);
+}
+export {
+  a as c
+};

package/bundled/class-names.cjs

@@ -0,0 +1 @@
+"use strict";function s(...e){return e.reduce((r,n)=>{const i=r.length?" ":"",t=Array.isArray(n)&&n[1]?s.call(null,n[0]):typeof n=="function"?n():typeof n=="string"?n:"";return t.length?r+i+t:r},"")}exports.classNames=s;

package/bundled/class-names.js

@@ -0,0 +1,9 @@
+function e(...o) {
+  return o.reduce((r, n) => {
+    const s = r.length ? " " : "", t = Array.isArray(n) && n[1] ? e.call(null, n[0]) : typeof n == "function" ? n() : typeof n == "string" ? n : "";
+    return t.length ? r + s + t : r;
+  }, "");
+}
+export {
+  e as c
+};

package/bundled/definition.cjs

@@ -0,0 +1,39 @@
+"use strict";const a=require("./vivid-element.cjs"),m=require("./definition2.cjs"),d=require("./affix.cjs"),g=require("./ref.cjs"),f=require("./class-names.cjs"),s=require("./slotted.cjs"),v=require("./when.cjs"),_=":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-accordion-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-accordion-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-accordion-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";var b=Object.defineProperty,r=(t,e,i,o)=>{for(var c=void 0,l=t.length-1,p;l>=0;l--)(p=t[l])&&(c=p(e,i,c)||c);return c&&b(e,i,c),c};class n extends d.AffixIconWithTrailing(a.VividElement){constructor(){super(...arguments),this.headinglevel=2,this.expanded=!1,this.noIndicator=!1,this.clickHandler=()=>{this.expanded=!this.expanded,this.change()},this.change=()=>{this.$emit("change")}}}r([a.attr({attribute:"heading-level",mode:"fromView",converter:a.nullableNumberConverter})],n.prototype,"headinglevel");r([a.attr],n.prototype,"appearance");r([a.attr({mode:"boolean"})],n.prototype,"expanded");r([a.attr],n.prototype,"id");r([a.attr],n.prototype,"heading");r([a.observable],n.prototype,"_headingSlottedContent");r([a.attr({mode:"boolean",attribute:"no-indicator"})],n.prototype,"noIndicator");r([a.attr],n.prototype,"meta");r([a.observable],n.prototype,"_metaSlottedContent");r([a.attr],n.prototype,"size");const u=({appearance:t,size:e})=>f.classNames("heading-button",[`appearance-${t}`,!!t],[`size-${e}`,!!e]),x=(t,e)=>{const i=d.affixIconTemplateFactory(t);return a.html`
+		<${e} class="heading-container">
+			<button
+				class="${u}"
+				id="${o=>o.id}"
+				aria-expanded="${o=>o.expanded}"
+				aria-controls="${o=>o.id}-panel"
+				@click="${o=>o.clickHandler()}"
+				${g.ref("expandbutton")}
+			>
+
+				${o=>o.iconTrailing?null:i(o.icon,d.IconWrapper.Slot)}
+
+				<span class="heading-content">
+					<slot name="heading" ${s.slotted("_headingSlottedContent")}></slot>
+					${v.when(o=>o.heading&&!o._headingSlottedContent?.length,a.html`${o=>o.heading}`)}
+				</span>
+
+				<span class="meta">
+					<slot name="meta" ${s.slotted("_metaSlottedContent")}></slot>
+					${v.when(o=>o.meta&&!o._metaSlottedContent?.length,a.html`${o=>o.meta}`)}
+				</span>
+
+				${o=>o.icon&&o.iconTrailing?i(o.icon):null}
+				${o=>!(o.icon&&o.iconTrailing)&&!o.noIndicator?i(o.expanded?"chevron-up-line":"chevron-down-line"):null}
+
+			</button>
+		</${e}>
+	`},y=t=>a.html`
+	${e=>x(t,"h"+e.headinglevel)}
+	<div
+		id="${e=>e.id}-panel"
+		aria-labelledby="${e=>e.id}"
+		role="region"
+		class="region ${e=>e.icon&&!e.iconTrailing?"padded":""} ${e=>e.size?`size-${e.size}`:""}"
+	>
+		<slot></slot>
+	</div>
+`,h=a.defineVividComponent("accordion-item",n,y,[m.iconDefinition],{styles:_}),w=a.createRegisterFunction(h);exports.AccordionItem=n;exports.accordionItemDefinition=h;exports.registerAccordionItem=w;

package/bundled/definition.js

@@ -0,0 +1,122 @@
+import { V as h, a as t, n as g, o as m, h as l, c as f, d as _ } from "./vivid-element.js";
+import { i as b } from "./definition2.js";
+import { A as u, a as x, I as y } from "./affix.js";
+import { r as $ } from "./ref.js";
+import { c as w } from "./class-names.js";
+import { s } from "./slotted.js";
+import { w as v } from "./when.js";
+const z = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-accordion-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-accordion-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-accordion-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+var I = Object.defineProperty, r = (n, a, i, o) => {
+  for (var c = void 0, d = n.length - 1, p; d >= 0; d--)
+    (p = n[d]) && (c = p(a, i, c) || c);
+  return c && I(a, i, c), c;
+};
+class e extends u(h) {
+  constructor() {
+    super(...arguments), this.headinglevel = 2, this.expanded = !1, this.noIndicator = !1, this.clickHandler = () => {
+      this.expanded = !this.expanded, this.change();
+    }, this.change = () => {
+      this.$emit("change");
+    };
+  }
+}
+r([
+  t({
+    attribute: "heading-level",
+    mode: "fromView",
+    converter: g
+  })
+], e.prototype, "headinglevel");
+r([
+  t
+], e.prototype, "appearance");
+r([
+  t({ mode: "boolean" })
+], e.prototype, "expanded");
+r([
+  t
+], e.prototype, "id");
+r([
+  t
+], e.prototype, "heading");
+r([
+  m
+], e.prototype, "_headingSlottedContent");
+r([
+  t({ mode: "boolean", attribute: "no-indicator" })
+], e.prototype, "noIndicator");
+r([
+  t
+], e.prototype, "meta");
+r([
+  m
+], e.prototype, "_metaSlottedContent");
+r([
+  t
+], e.prototype, "size");
+const C = ({ appearance: n, size: a }) => w(
+  "heading-button",
+  [`appearance-${n}`, !!n],
+  [`size-${a}`, !!a]
+), k = (n, a) => {
+  const i = x(n);
+  return l`
+		<${a} class="heading-container">
+			<button
+				class="${C}"
+				id="${(o) => o.id}"
+				aria-expanded="${(o) => o.expanded}"
+				aria-controls="${(o) => o.id}-panel"
+				@click="${(o) => o.clickHandler()}"
+				${$("expandbutton")}
+			>
+
+				${(o) => o.iconTrailing ? null : i(o.icon, y.Slot)}
+
+				<span class="heading-content">
+					<slot name="heading" ${s("_headingSlottedContent")}></slot>
+					${v(
+    (o) => o.heading && !o._headingSlottedContent?.length,
+    l`${(o) => o.heading}`
+  )}
+				</span>
+
+				<span class="meta">
+					<slot name="meta" ${s("_metaSlottedContent")}></slot>
+					${v((o) => o.meta && !o._metaSlottedContent?.length, l`${(o) => o.meta}`)}
+				</span>
+
+				${(o) => o.icon && o.iconTrailing ? i(o.icon) : null}
+				${(o) => !(o.icon && o.iconTrailing) && !o.noIndicator ? i(
+    o.expanded ? "chevron-up-line" : "chevron-down-line"
+  ) : null}
+
+			</button>
+		</${a}>
+	`;
+}, S = (n) => l`
+	${(a) => k(n, "h" + a.headinglevel)}
+	<div
+		id="${(a) => a.id}-panel"
+		aria-labelledby="${(a) => a.id}"
+		role="region"
+		class="region ${(a) => a.icon && !a.iconTrailing ? "padded" : ""} ${(a) => a.size ? `size-${a.size}` : ""}"
+	>
+		<slot></slot>
+	</div>
+`, T = _(
+  "accordion-item",
+  e,
+  S,
+  [b],
+  {
+    styles: z
+  }
+), P = f(
+  T
+);
+export {
+  e as A,
+  T as a,
+  P as r
+};

package/bundled/definition10.cjs

@@ -0,0 +1,19 @@
+"use strict";const c=require("./definition2.cjs"),e=require("./vivid-element.cjs"),s=require("./option.cjs"),r=require("./affix.cjs"),p=require("./host-semantics.cjs"),d=require("./class-names.cjs"),n=require("./when.cjs"),v=a=>d.classNames("base",["disabled",a.disabled],["selected",!!a.selected],["hover",!!a._highlighted],["active",!!a.checked],["icon",!!a.icon],["two-lines",!!a.text?.length&&!!a.textSecondary?.length]);function b(){return e.html`${n.when(a=>a.text||a.textSecondary,e.html`<span class="text">
+			${n.when(a=>a.text,e.html`<span class="text-primary">
+					${n.when(a=>a._hasMatchedText,e.html`${a=>a.text.slice(0,a._matchedRange.from)}<span class="match"
+								>${a=>a.text.slice(a._matchedRange.from,a._matchedRange.to)}</span
+							>`)}${a=>a.text.slice(a._matchedRange.to)}
+				</span>`)}
+			${n.when(a=>a.textSecondary,e.html`<span class="text-secondary">${a=>a.textSecondary}</span>`)}
+		</span>`)}`}const m=a=>{const i=r.affixIconTemplateFactory(a),t=a.tagFor(c.Icon);return e.html`
+		<template
+			${p.applyHostSemantics({role:"option",ariaChecked:o=>o.checked,ariaSelected:o=>o.selected,ariaDisabled:o=>o.disabled})}
+			style="${o=>o._isNotMatching?"display: none":""}"
+		>
+			<div class="${v}">
+				${o=>i(o.icon,r.IconWrapper.Slot)} ${b()}
+				<slot name="trailing-meta"></slot>
+				${n.when(o=>o._displayCheckmark&&o.selected,e.html`<${t} class="checkmark" name="check-line"></${t}>`)}
+			</div>
+		</template>
+	`},_=":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)}",l=e.defineVividComponent("option",s.ListboxOption,m,[c.iconDefinition],{styles:_}),h=e.createRegisterFunction(l);exports.listboxOptionDefinition=l;exports.registerOption=h;

package/bundled/definition10.js

@@ -0,0 +1,73 @@
+import { I as c, i as l } from "./definition2.js";
+import { h as e, c as i, d as s } from "./vivid-element.js";
+import { L as p } from "./option.js";
+import { a as d, I as v } from "./affix.js";
+import { a as m } from "./host-semantics.js";
+import { c as b } from "./class-names.js";
+import { w as t } from "./when.js";
+const _ = (a) => b(
+  "base",
+  ["disabled", a.disabled],
+  ["selected", !!a.selected],
+  ["hover", !!a._highlighted],
+  ["active", !!a.checked],
+  ["icon", !!a.icon],
+  ["two-lines", !!a.text?.length && !!a.textSecondary?.length]
+);
+function x() {
+  return e`${t(
+    (a) => a.text || a.textSecondary,
+    e`<span class="text">
+			${t(
+      (a) => a.text,
+      e`<span class="text-primary">
+					${t(
+        (a) => a._hasMatchedText,
+        e`${(a) => a.text.slice(0, a._matchedRange.from)}<span class="match"
+								>${(a) => a.text.slice(a._matchedRange.from, a._matchedRange.to)}</span
+							>`
+      )}${(a) => a.text.slice(a._matchedRange.to)}
+				</span>`
+    )}
+			${t(
+      (a) => a.textSecondary,
+      e`<span class="text-secondary">${(a) => a.textSecondary}</span>`
+    )}
+		</span>`
+  )}`;
+}
+const f = (a) => {
+  const r = d(a), n = a.tagFor(c);
+  return e`
+		<template
+			${m({
+    role: "option",
+    ariaChecked: (o) => o.checked,
+    ariaSelected: (o) => o.selected,
+    ariaDisabled: (o) => o.disabled
+  })}
+			style="${(o) => o._isNotMatching ? "display: none" : ""}"
+		>
+			<div class="${_}">
+				${(o) => r(o.icon, v.Slot)} ${x()}
+				<slot name="trailing-meta"></slot>
+				${t(
+    (o) => o._displayCheckmark && o.selected,
+    e`<${n} class="checkmark" name="check-line"></${n}>`
+  )}
+			</div>
+		</template>
+	`;
+}, y = ":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 = s(
+  "option",
+  p,
+  f,
+  [l],
+  {
+    styles: y
+  }
+), B = i(h);
+export {
+  h as l,
+  B as r
+};

package/bundled/definition11.cjs

@@ -0,0 +1,10 @@
+"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/definition11.js

@@ -0,0 +1,44 @@
+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";
+  }
+}
+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: y
+  }
+), H = f(
+  k
+);
+export {
+  k as c,
+  H as r
+};

package/bundled/definition12.cjs

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

package/bundled/definition12.js

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

package/bundled/definition13.cjs

@@ -0,0 +1,73 @@
+"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("./with-contextual-help.cjs"),M=require("./char-count.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 E.WithContextualHelp(d.WithLightDOMFeedback(M.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;