@vonage/vivid 5.15.0 → 5.16.0

package/bundled/definition12.js

@@ -1,226 +1,131 @@
-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;
-};
-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() {
-    /* v8 ignore if -- @preserve */
-    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);
-  }
+import { E as e, T as t, d as n, l as r, o as i, s as a, t as o } from "./vivid-element.js";
+import { t as s } from "./when.js";
+import { r as c, t as l } from "./definition2.js";
+import { t as u } from "./decorate.js";
+import { t as d } from "./class-names.js";
+import { t as f } from "./dom.js";
+import { a as p, i as m, n as h } from "./affix.js";
+import { n as g, t as _ } from "./host-semantics.js";
+//#region src/lib/option/option.ts
+function v(e) {
+	return f(e) && (e.getAttribute("role") === "option" || e instanceof HTMLOptionElement || e instanceof y);
 }
-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"
+var y = class extends _(h(o)) {
+	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() {
+		/* v8 ignore if -- @preserve */
+		this.proxy instanceof HTMLOptionElement && (this.proxy.disabled = this.disabled);
+	}
+	get selectedAttribute() {
+		return this.defaultSelected;
+	}
+	set selectedAttribute(e) {
+		this.defaultSelected = e;
+	}
+	selectedChanged() {
+		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(e) {
+		this._label = e;
+	}
+	set text(e) {
+		this._text = e;
+	}
+	get text() {
+		return this._text ?? "";
+	}
+	_getAccessibleName() {
+		return this.ariaLabel || `${this.text}${this.textSecondary ? ` ${this.textSecondary}` : ""}`;
+	}
+	get form() {
+		return null;
+	}
+	get _hasMatchedText() {
+		return !!(this.matchedText ?? this._vvdSearchText);
+	}
+	get _matchedRange() {
+		let e = this.matchedText ?? this._vvdSearchText;
+		if (e) {
+			let t = this.text.toLowerCase().indexOf(e.toLowerCase());
+			return t === -1 ? {
+				from: 0,
+				to: 0
+			} : {
+				from: t,
+				to: t + e.length
+			};
+		}
+		return {
+			from: 0,
+			to: 0
+		};
+	}
+	constructor(e, t, n, r) {
+		super(), this.defaultSelected = !1, this.dirtySelected = !1, this.value = "", this._highlighted = !1, this._displayCheckmark = !1, this._vvdSearchText = "", this._isNotMatching = !1, e && (this.text = e), t && (this.value = t), n && (this.defaultSelected = n), r && (this.selected = r), this.proxy = new Option(this.text, this.value, this.defaultSelected, this.selected), this.proxy.disabled = this.disabled;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.dirtySelected ||= (this.selected = this.defaultSelected, !1);
+	}
+};
+u([r({ converter: {
+	fromView: (e) => {
+		if (e === !0 || e === "true") return !0;
+		if (e === !1 || e === "false") return !1;
+	},
+	toView: (e) => e
+} })], y.prototype, "checked", void 0), u([r({
+	attribute: "selected",
+	mode: "boolean"
+})], y.prototype, "defaultSelected", void 0), u([r({ mode: "boolean" })], y.prototype, "disabled", void 0), u([r({
+	attribute: "current-selected",
+	mode: "boolean"
+})], y.prototype, "selected", void 0), u([r({ attribute: "value" })], y.prototype, "value", void 0), u([r({ attribute: "label" })], y.prototype, "_label", void 0), u([r({ attribute: "text" })], y.prototype, "_text", void 0), u([r({ attribute: "text-secondary" })], y.prototype, "textSecondary", void 0), u([t], y.prototype, "_highlighted", void 0), u([t], y.prototype, "_displayCheckmark", void 0), u([r({ attribute: "matched-text" })], y.prototype, "matchedText", void 0), u([t], y.prototype, "_vvdSearchText", void 0), u([e], y.prototype, "_hasMatchedText", null), u([t], y.prototype, "_isNotMatching", void 0), u([e], y.prototype, "_matchedRange", null), u([r], y.prototype, "connotation", void 0), u([r({ attribute: "tag-connotation" })], y.prototype, "tagConnotation", void 0);
+//#endregion
+//#region src/lib/option/option.template.ts
+var b = (e) => d("base", [`connotation-${e.connotation}`, !!e.connotation], ["disabled", e.disabled], ["selected", !!e.selected], ["hover", !!e._highlighted], ["active", !!e.checked], ["icon", !!e.icon], ["two-lines", !!e.text?.length && !!e.textSecondary?.length]);
+function x() {
+	return n`${s((e) => e.text || e.textSecondary, n`<span class="text">
+			${s((e) => e.text, n`<span class="text-primary">
+					${s((e) => e._hasMatchedText, n`${(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>`
-  )}`;
+							>`)}${(e) => e.text.slice(e._matchedRange.to)}
+				</span>`)}
+			${s((e) => e.textSecondary, n`<span class="text-secondary">${(e) => e.textSecondary}</span>`)}
+		</span>`)}`;
 }
-const L = (e) => {
-  const a = u(e), n = e.tagFor(b);
-  return l`
+//#endregion
+//#region src/lib/option/definition.ts
+var S = i("option", y, (e) => {
+	let t = p(e), r = e.tagFor(c);
+	return n`
 		<template
-			${k({
-    role: "option",
-    ariaChecked: (t) => t.checked,
-    ariaSelected: (t) => t.selected,
-    ariaDisabled: (t) => t.disabled
-  })}
-			style="${(t) => t._isNotMatching ? "display: none" : ""}"
+			${g({
+		role: "option",
+		ariaChecked: (e) => e.checked,
+		ariaSelected: (e) => e.selected,
+		ariaDisabled: (e) => e.disabled
+	})}
+			style="${(e) => e._isNotMatching ? "display: none" : ""}"
 		>
-			<div class="${C}">
-				${(t) => a(t.icon, g.Slot)} ${O()}
+			<div class="${b}">
+				${(e) => t(e.icon, m.Slot)} ${x()}
 				<slot name="trailing-meta"></slot>
-				${s(
-    (t) => t._displayCheckmark && t.selected,
-    l`<${n} class="checkmark" name="check-line"></${n}>`
-  )}
+				${s((e) => e._displayCheckmark && e.selected, n`<${r} class="checkmark" name="check-line"></${r}>`)}
 			</div>
 		</template>
 	`;
-}, 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(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.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: M
-  }
-), P = x(H);
-export {
-  o as L,
-  V as i,
-  H as l,
-  P as r
-};
+}, [l], { styles: ":host([disabled]){cursor:not-allowed}.base.connotation-cta{--_connotation-color-primary:var(--vvd-option-cta-primary,var(--vvd-color-cta-500));--_connotation-color-primary-text:var(--vvd-option-cta-primary-text,var(--vvd-color-canvas));--_connotation-color-primary-increment:var(--vvd-option-cta-primary-increment,var(--vvd-color-cta-600));--_connotation-color-firm:var(--vvd-option-cta-firm,var(--vvd-color-cta-600));--_connotation-color-faint:var(--vvd-option-cta-faint,var(--vvd-color-cta-50));--_connotation-color-soft:var(--vvd-option-cta-soft,var(--vvd-color-cta-100));--_connotation-color-pale:var(--vvd-option-cta-pale,var(--vvd-color-cta-300));--_connotation-color-dim:var(--vvd-option-cta-dim,var(--vvd-color-cta-200))}.base:not(.connotation-cta){--_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,.base.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base:active:where(:not(.disabled,:disabled)),.base.active:where(:not(.disabled,:disabled)),.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{box-sizing:border-box;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);align-items:center;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;--_option-min-block-size:calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2)));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2);border-radius:8px;display:flex}.base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 4)}.base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 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 * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8));--_option-padding-inline:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 16)) / 2);--_option-icon-size:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 2.5)}:host([scale=condensed]) .base:not(.two-lines){--_option-gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2))) / 5);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 4)) / 3);padding-block:calc(calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density,0), 2) - 8)) / 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(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}.base.hidden{display:none}.text{font:var(--vvd-typography-base);flex-direction:column;gap:4px;margin-inline-end:auto;display:flex}.text-primary,.text-secondary{font:var(--vvd-typography-base);display:block}.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)}" }), C = a(S);
+//#endregion
+export { v as i, C as n, y as r, S as t };

package/bundled/definition13.cjs

@@ -1,10 +1,19 @@
-"use strict";const l=require("./definition2.cjs"),i=require("./definition17.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>
+const e=require(`./localized.cjs`),t=require(`./vivid-element.cjs`),n=require(`./when.cjs`),r=require(`./decorate.cjs`),i=require(`./class-names.cjs`),a=require(`./dialog.cjs`),o=require(`./definition8.cjs`),s=require(`./anchored.cjs`);var c=`:host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}`,l=class extends e.t(s.t(t.t)){constructor(...e){super(...e),this.alternate=!1,this.placement=`right`,this.open=!1}#e=null;openChanged(e,t){e!==void 0&&(t?this.setAttribute(`role`,`status`):this.removeAttribute(`role`),this.#a(),this._anchorEl&&this.#n(this._anchorEl))}connectedCallback(){super.connectedCallback(),this.#a()}disconnectedCallback(){super.disconnectedCallback(),this.#a()}_anchorElChanged(e,t){e&&this.#r(e),t&&this.#t(t)}#t(e){e.addEventListener(`click`,this.#i,!0),this.#e=e.ariaLabel,e.ariaLabel=`${this.locale.toggletip.anchorLabel(e.ariaLabel||``)}`,this.#n(e)}#n(e){e.setAttribute(`aria-expanded`,this.open.toString()),e.setAttribute(`data-expanded`,this.open.toString())}#r(e){e.removeEventListener(`click`,this.#i,!0),e.removeAttribute(`aria-expanded`),e.removeAttribute(`data-expanded`),e.ariaLabel&&=this.#e}#i=()=>{this.open||t.O.enqueue(()=>this.open=!0)};#a(){document.removeEventListener(`click`,this.#o),document.removeEventListener(`keydown`,this.#s),this.open&&this.isConnected&&(document.addEventListener(`click`,this.#o),document.addEventListener(`keydown`,this.#s))}#o=e=>{let t=!this.contains(e.target),n=this._anchorEl?.contains(e.target);(t||n)&&(this.open=!1)};#s=e=>{e.key===`Escape`&&(this.open=!1)}};r.t([t.l],l.prototype,`headline`,void 0),r.t([t.l({mode:`boolean`})],l.prototype,`alternate`,void 0),r.t([t.l({mode:`fromView`})],l.prototype,`placement`,void 0),r.t([t.l({mode:`boolean`})],l.prototype,`open`,void 0);var u=e=>i.t(`control`),d=t.o(`toggletip`,l,e=>{let r=e.tagFor(o.i);return t.d`
+		${s.n()}
+		<${r}
+			@keydown="${(e,{event:t})=>!(e.open&&a.t(t))}"
+			class="${u}"
+			arrow
+			:anchor="${e=>e._anchorEl}"
+			:open="${e=>e.open}"
+			?alternate="${e=>!e.alternate}"
+			placement="${e=>e.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${n.t(e=>e.headline,t.d`<h2 class="headline">${e=>e.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
 		</${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(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}",p=n.defineVividComponent("contextual-help",s,_,[l.iconDefinition,i.toggletipDefinition],{styles:b}),m=n.createRegisterFunction(p);exports.contextualHelpDefinition=p;exports.registerContextualHelp=m;
+	`},[o.t],{styles:c}),f=t.s(d);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return d}}),Object.defineProperty(exports,`r`,{enumerable:!0,get:function(){return l}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return f}});

package/bundled/definition13.js

@@ -1,44 +1,78 @@
-import { I as l, i } from "./definition2.js";
-import { T as s, t as p } from "./definition17.js";
-import { V as v, a as d, h as u, c as f, d as _ } from "./vivid-element.js";
-import { c as m } from "./class-names.js";
-var b = Object.defineProperty, x = (o, r, t, w) => {
-  for (var a = void 0, n = o.length - 1, e; n >= 0; n--)
-    (e = o[n]) && (a = e(r, t, a) || a);
-  return a && b(r, t, a), a;
+import { t as e } from "./localized.js";
+import { O as t, d as n, l as r, o as i, s as a, t as o } from "./vivid-element.js";
+import { t as s } from "./when.js";
+import { t as c } from "./decorate.js";
+import { t as l } from "./class-names.js";
+import { t as u } from "./dialog.js";
+import { i as d, t as f } from "./definition8.js";
+import { n as p, t as m } from "./anchored.js";
+//#region src/lib/toggletip/toggletip.scss?inline
+var h = ":host :host{display:var(--_popup-display,inline)}:host :host([slotted-anchor]){--_popup-display:contents}.content-wrapper{width:var(--toggletip-inline-size,auto);max-inline-size:var(--toggletip-max-inline-size,30ch);padding:16px}.headline{font:var(--vvd-typography-base-bold);margin:0}.action-items{justify-content:flex-end;gap:10px;display:flex}::slotted([slot=action-items]){margin-block-start:16px}", g = class extends e(m(o)) {
+	constructor(...e) {
+		super(...e), this.alternate = !1, this.placement = "right", this.open = !1;
+	}
+	#e = null;
+	openChanged(e, t) {
+		e !== void 0 && (t ? this.setAttribute("role", "status") : this.removeAttribute("role"), this.#a(), this._anchorEl && this.#n(this._anchorEl));
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.#a();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.#a();
+	}
+	_anchorElChanged(e, t) {
+		e && this.#r(e), t && this.#t(t);
+	}
+	#t(e) {
+		e.addEventListener("click", this.#i, !0), this.#e = e.ariaLabel, e.ariaLabel = `${this.locale.toggletip.anchorLabel(e.ariaLabel || "")}`, this.#n(e);
+	}
+	#n(e) {
+		e.setAttribute("aria-expanded", this.open.toString()), e.setAttribute("data-expanded", this.open.toString());
+	}
+	#r(e) {
+		/* v8 ignore else -- @preserve */
+		e.removeEventListener("click", this.#i, !0), e.removeAttribute("aria-expanded"), e.removeAttribute("data-expanded"), e.ariaLabel &&= this.#e;
+	}
+	#i = () => {
+		this.open || t.enqueue(() => this.open = !0);
+	};
+	#a() {
+		document.removeEventListener("click", this.#o), document.removeEventListener("keydown", this.#s), this.open && this.isConnected && (document.addEventListener("click", this.#o), document.addEventListener("keydown", this.#s));
+	}
+	#o = (e) => {
+		let t = !this.contains(e.target), n = this._anchorEl?.contains(e.target);
+		(t || n) && (this.open = !1);
+	};
+	#s = (e) => {
+		/* v8 ignore else -- @preserve */
+		e.key === "Escape" && (this.open = !1);
+	};
 };
-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}>
+c([r], g.prototype, "headline", void 0), c([r({ mode: "boolean" })], g.prototype, "alternate", void 0), c([r({ mode: "fromView" })], g.prototype, "placement", void 0), c([r({ mode: "boolean" })], g.prototype, "open", void 0);
+//#endregion
+//#region src/lib/toggletip/toggletip.template.ts
+var _ = (e) => l("control"), v = i("toggletip", g, (e) => {
+	let t = e.tagFor(d);
+	return n`
+		${p()}
+		<${t}
+			@keydown="${(e, { event: t }) => !(e.open && u(t))}"
+			class="${_}"
+			arrow
+			:anchor="${(e) => e._anchorEl}"
+			:open="${(e) => e.open}"
+			?alternate="${(e) => !e.alternate}"
+			placement="${(e) => e.placement}"
+			exportparts="vvd-theme-alternate"
+		>
+			<div class="content-wrapper">
+				${s((e) => e.headline, n`<h2 class="headline">${(e) => e.headline}</h2>`)}
+				<slot></slot>
+				<div class="action-items"><slot name="action-items"></slot></div>
+			</div>
+		</${t}>
 	`;
-}, y = ".control{--_connotation-color-primary: var(--vvd-button-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-button-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-button-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-button-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-button-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-button-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-button-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-faint: var(--vvd-button-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce-primary: var(--vvd-button-accent-fierce-primary, var(--vvd-color-canvas-text))}.control{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.control{--focus-stroke-gap-color: transparent;display:inline-flex;box-sizing:border-box;align-items:center;justify-content:center;border:0 none;border-radius:50%;margin:0;background-color:var(--_appearance-color-fill);block-size:var(--_button-block-size, 24px);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);cursor:pointer;padding-inline:calc(var(--_button-block-size, 24px) / 6);vertical-align:middle}@supports (aspect-ratio: auto){.control{padding:0;aspect-ratio:1/1}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb,var(--focus-stroke-color, var(--vvd-color-cta-500)),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}slot[name=icon]{font-size:var(--_button-icon-size, 16px);line-height:1}", k = _(
-  "contextual-help",
-  c,
-  h,
-  [i, p],
-  {
-    styles: y
-  }
-), H = f(
-  k
-);
-export {
-  k as c,
-  H as r
-};
+}, [f], { styles: h }), y = a(v);
+//#endregion
+export { v as n, g as r, y as t };

package/bundled/definition14.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;
+const e=require(`./vivid-element.cjs`),t=require(`./definition2.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./definition13.cjs`);var a=class extends e.t{constructor(...e){super(...e),this.placement=`right`}};n.t([e.l({mode:`fromView`})],a.prototype,`placement`,void 0);var o=e=>r.t(`control`),s=e.o(`contextual-help`,a,n=>{let r=n.tagFor(i.r),a=n.tagFor(t.r);return e.d`
+		<${r} class="base" exportparts="vvd-theme-alternate">
+			<button class="${o}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${a} name="help-solid"></${a}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${r}>
+	`},[t.t,i.n],{styles:`.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));--_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,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.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;box-sizing:border-box;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;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}`}),c=e.s(s);Object.defineProperty(exports,`n`,{enumerable:!0,get:function(){return c}}),Object.defineProperty(exports,`t`,{enumerable:!0,get:function(){return s}});

package/bundled/definition14.js

@@ -1,20 +1,29 @@
-import { V as i, h as s, c as e, d as t } from "./vivid-element.js";
-const n = ":host{display:contents}slot:not(:focus-within){position:absolute;display:inline;overflow:hidden;width:1px;height:1px;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}";
-class l extends i {
-}
-const o = () => s`<slot></slot>`, a = t(
-  "visually-hidden",
-  l,
-  o,
-  [],
-  {
-    styles: n
-  }
-), p = e(
-  a
-);
-export {
-  l as V,
-  p as r,
-  a as v
+import { d as e, l as t, o as n, s as r, t as i } from "./vivid-element.js";
+import { r as a, t as o } from "./definition2.js";
+import { t as s } from "./decorate.js";
+import { t as c } from "./class-names.js";
+import { n as l, r as u } from "./definition13.js";
+//#region src/lib/contextual-help/contextual-help.ts
+var d = class extends i {
+	constructor(...e) {
+		super(...e), this.placement = "right";
+	}
 };
+s([t({ mode: "fromView" })], d.prototype, "placement", void 0);
+//#endregion
+//#region src/lib/contextual-help/contextual-help.template.ts
+var f = (e) => c("control"), p = n("contextual-help", d, (t) => {
+	let n = t.tagFor(u), r = t.tagFor(a);
+	return e`
+		<${n} class="base" exportparts="vvd-theme-alternate">
+			<button class="${f}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${r} name="help-solid"></${r}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${n}>
+	`;
+}, [o, l], { styles: ".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));--_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,.control.disabled{--_appearance-color-text:var(--vvd-color-neutral-300);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.control:active:where(:not(.disabled,:disabled)),.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;box-sizing:border-box;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;border:0;border-radius:50%;justify-content:center;align-items:center;margin:0;display:inline-flex}@supports (aspect-ratio:auto){.control{aspect-ratio:1;padding:0}}.control:focus-visible{box-shadow:0 0 0 4px color-mix(in srgb, var(--focus-stroke-color,var(--vvd-color-cta-500)), transparent 85%), inset 0 0 0 3px var(--focus-stroke-gap-color,currentColor);outline:1px solid var(--focus-stroke-color,var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset,0px))}slot[name=icon]{font-size:var(--_button-icon-size,16px);line-height:1}" }), m = r(p);
+//#endregion
+export { m as n, p as t };