@vonage/vivid 5.15.1 → 5.17.0

package/bundled/definition10.js

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

package/bundled/definition11.cjs

@@ -1,12 +1,10 @@
-"use strict";const l=require("./definition9.cjs"),s=require("./vivid-element.cjs"),d=require("./anchored.cjs"),u=require("./index.cjs"),v=require("./class-names.cjs");var m=Object.defineProperty,p=(n,e,i,t)=>{for(var o=void 0,a=n.length-1,c;a>=0;a--)(c=n[a])&&(o=c(e,i,o)||o);return o&&m(e,i,o),o};class r extends d.Anchored(s.VividElement){constructor(){super(...arguments),this.open=!1,this.#t=()=>{this.open=!0,this.#i()},this.#e=()=>{this.open=!1,this.#i()},this.#n=e=>{e.key==="Escape"&&this.#e()}}connectedCallback(){super.connectedCallback(),this.#o()}disconnectedCallback(){super.disconnectedCallback(),this.#o()}_anchorElChanged(e,i){e&&this.#r(e),i&&this.#s(i)}#s(e){e.addEventListener("mouseover",this.#t),e.addEventListener("mouseout",this.#e),e.addEventListener("focusin",this.#t),e.addEventListener("focusout",this.#e),e.setAttribute("aria-haspopup","true"),e.setAttribute("aria-expanded",String(this.open))}#r(e){e.removeEventListener("mouseover",this.#t),e.removeEventListener("mouseout",this.#e),e.removeEventListener("focusin",this.#t),e.removeEventListener("focusout",this.#e),e.removeAttribute("aria-haspopup"),e.removeAttribute("aria-expanded")}#t;#e;#i(){this._anchorEl&&this._anchorEl.setAttribute("aria-expanded",String(this.open))}#o(){document.removeEventListener("keydown",this.#n),this.open&&this.isConnected&&document.addEventListener("keydown",this.#n)}#n;openChanged(e){e!==void 0&&this.#o()}}p([s.attr],r.prototype,"text");p([s.attr({mode:"fromView"})],r.prototype,"placement");p([s.attr({mode:"boolean"})],r.prototype,"open");const f=":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);box-sizing:border-box;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size, 30ch)}",E=({open:n})=>v.classNames("control",["open",!!n]),b=n=>{const e=n.tagFor(l.Popup),i=d.anchorSlotTemplateFactory();return s.html`
-${i}
-<${e} class="${E}" arrow alternate
-	:placement=${t=>t.placement}
-	:anchor="${t=>t._anchorEl}"
-	:open="${t=>t.open}"
-	@keydown="${(t,o)=>{t.open&&u.handleEscapeKeyAndStopPropogation(o.event)&&(t.open=!1)}}"
-  exportparts="vvd-theme-alternate">
-  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
-		${t=>t.text}
-  </div>
-</${e}>`},h=s.defineVividComponent("tooltip",r,b,[l.popupDefinition],{styles:f}),g=s.createRegisterFunction(h);exports.Tooltip=r;exports.registerTooltip=g;exports.tooltipDefinition=h;
+const e=require(`./vivid-element.cjs`),t=require(`./definition2.cjs`),n=require(`./decorate.cjs`),r=require(`./class-names.cjs`),i=require(`./definition10.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/definition11.js

@@ -1,93 +1,29 @@
-import { P as d, p as l } from "./definition9.js";
-import { V as h, a, h as v, c as m, d as u } from "./vivid-element.js";
-import { A as f, a as E } from "./anchored.js";
-import { h as b } from "./index.js";
-import { c as x } from "./class-names.js";
-var y = Object.defineProperty, p = (n, e, s, t) => {
-  for (var o = void 0, r = n.length - 1, c; r >= 0; r--)
-    (c = n[r]) && (o = c(e, s, o) || o);
-  return o && y(e, s, o), o;
-};
-class i extends f(h) {
-  constructor() {
-    super(...arguments), this.open = !1, this.#t = () => {
-      this.open = !0, this.#s();
-    }, this.#e = () => {
-      this.open = !1, this.#s();
-    }, this.#n = (e) => {
-      e.key === "Escape" && this.#e();
-    };
-  }
-  connectedCallback() {
-    super.connectedCallback(), this.#o();
-  }
-  disconnectedCallback() {
-    super.disconnectedCallback(), this.#o();
-  }
-  /**
-   * @internal
-   */
-  _anchorElChanged(e, s) {
-    e && this.#r(e), s && this.#i(s);
-  }
-  #i(e) {
-    e.addEventListener("mouseover", this.#t), e.addEventListener("mouseout", this.#e), e.addEventListener("focusin", this.#t), e.addEventListener("focusout", this.#e), e.setAttribute("aria-haspopup", "true"), e.setAttribute("aria-expanded", String(this.open));
-  }
-  #r(e) {
-    e.removeEventListener("mouseover", this.#t), e.removeEventListener("mouseout", this.#e), e.removeEventListener("focusin", this.#t), e.removeEventListener("focusout", this.#e), e.removeAttribute("aria-haspopup"), e.removeAttribute("aria-expanded");
-  }
-  #t;
-  #e;
-  #s() {
-    this._anchorEl && this._anchorEl.setAttribute("aria-expanded", String(this.open));
-  }
-  #o() {
-    document.removeEventListener("keydown", this.#n), this.open && this.isConnected && document.addEventListener("keydown", this.#n);
-  }
-  #n;
-  /**
-   * @internal
-   */
-  openChanged(e) {
-    e !== void 0 && this.#o();
-  }
-}
-p([
-  a
-], i.prototype, "text");
-p([
-  a({ mode: "fromView" })
-], i.prototype, "placement");
-p([
-  a({ mode: "boolean" })
-], i.prototype, "open");
-const g = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.control{pointer-events:none}.tooltip{width:var(--tooltip-inline-size, auto);box-sizing:border-box;padding:8px 12px;color:var(--vvd-color-canvas-text);font:var(--vvd-typography-base-bold);max-inline-size:var(--tooltip-max-inline-size, 30ch)}", A = ({ open: n }) => x("control", ["open", !!n]), L = (n) => {
-  const e = n.tagFor(d), s = E();
-  return v`
-${s}
-<${e} class="${A}" arrow alternate
-	:placement=${(t) => t.placement}
-	:anchor="${(t) => t._anchorEl}"
-	:open="${(t) => t.open}"
-	@keydown="${(t, o) => {
-    t.open && b(o.event) && (t.open = !1);
-  }}"
-  exportparts="vvd-theme-alternate">
-  <div part="vvd-theme-alternate" class="tooltip" role="tooltip">
-		${(t) => t.text}
-  </div>
-</${e}>`;
-}, C = u(
-  "tooltip",
-  i,
-  L,
-  [l],
-  {
-    styles: g
-  }
-), P = m(C);
-export {
-  i as T,
-  P as r,
-  C as t
+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 "./definition10.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 };