@vonage/vivid 4.31.0 → 5.1.0

package/combobox/index.js

@@ -1,3 +1,512 @@
-import { r as registerCombobox } from '../shared/definition16.js';
-
-registerCombobox();
+import { i as k } from "../bundled/definition2.js";
+import { P as I, p as $ } from "../bundled/definition9.js";
+import { l as O } from "../bundled/definition10.js";
+import { s as C } from "../bundled/text-field.js";
+import { D as S, O as f, a as l, o as v, h, c as A, d as V } from "../bundled/vivid-element.js";
+import { W as D, f as T } from "../bundled/mixins.js";
+import { L as b } from "../bundled/listbox.js";
+import { F } from "../bundled/form-associated.js";
+import { W as H } from "../bundled/with-error-text.js";
+import { W as B } from "../bundled/with-success-text.js";
+import { F as L } from "../bundled/form-element.js";
+import { b as E, a as R, I as W } from "../bundled/affix.js";
+import { u as P } from "../bundled/strings.js";
+import { l as z } from "../bundled/numbers.js";
+import { h as M } from "../bundled/index.js";
+import { c as q } from "../bundled/definition3.js";
+import { r as d } from "../bundled/ref.js";
+import { s as m } from "../bundled/slotted.js";
+import { c as K } from "../bundled/class-names.js";
+import { w as N } from "../bundled/when.js";
+const U = '.chevron{display:flex;flex-shrink:0;font:var(--vvd-typography-base-extended);transform:rotate(0);transition:transform .2s}:host([data-expanded=true]) .chevron,:host([open]) .chevron{transform:rotate(180deg)}:not(.disabled) .chevron{cursor:pointer}.disabled .chevron{color:var(--_low-ink-color);cursor:not-allowed}:host{position:relative;display:inline-flex;flex-direction:column;gap:4px;--_low-ink-color: var(--vvd-color-neutral-600)}:host([disabled]){--_low-ink-color: var(--vvd-color-neutral-400);cursor:not-allowed}.base{--_text-field-gutter-end: 8px}.base{--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-500)}.base.appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-canvas);--_appearance-color-outline: var(--vvd-color-neutral-700)}.base.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost{--_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: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base:disabled.appearance-ghost{--_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: var(--vvd-color-neutral-100);--_appearance-color-outline: var(--vvd-color-neutral-300)}.base.disabled.appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.readonly:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--vvd-color-canvas-text);--_appearance-color-fill: var(--vvd-color-neutral-200);--_appearance-color-outline: var(--vvd-color-neutral-400)}.base.readonly:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: var(--vvd-color-neutral-600);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.error:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: var(--vvd-color-alert-500)}.base.error:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-alert-50);--_appearance-color-outline: transparent}.base.success:where(:not(.disabled,:disabled)){--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: var(--vvd-color-success-500)}.base.success:where(:not(.disabled,:disabled)).appearance-ghost{--_appearance-color-text: notSet;--_appearance-color-fill: var(--vvd-color-success-50);--_appearance-color-outline: transparent}.base:not(.shape-pill) .base{border-radius:var(--_text-field-border-radius)}.base.shape-pill .base{border-radius:var(--_text-field-pill-border-radius)}.base slot[name=icon]{position:absolute;z-index:1;display:inline-block;color:var(--_low-ink-color);font-size:var(--_text-field-icon-size);inset-block-start:50%;inset-inline-start:var(--_text-field-gutter-start);line-height:1;pointer-events:none;transform:translateY(-50%)}.base.has-meta{padding-inline-end:16px}.control{text-overflow:ellipsis;white-space:nowrap}.fieldset .leading-items-wrapper{position:relative;display:flex;flex-shrink:0;align-items:center;gap:8px;padding-inline-end:16px}.listbox{display:flex;max-height:var(--combobox-height, 408px);flex-direction:column;padding:4px;border-radius:8px;contain:paint;gap:2px;overflow-y:auto}::part(popup-base){inline-size:max-content;min-inline-size:var(--_combobox-fixed-width, 100%)}@supports selector(:has(*)){.base:not(.has-activedescendant) .fieldset:has(.control:focus-within):after{--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))}}@supports not selector(:has(*)){.base:not(.has-activedescendant) .fieldset:focus-within:after{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));--focus-stroke-gap-color: transparent;position:absolute;z-index:1;display:block;border-radius:inherit;content:"";inset:0;pointer-events:none}}::slotted([data-vvd-component=option][current-selected]){border-radius:8px;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));--focus-stroke-gap-color: transparent}', p = {
+  inline: "inline",
+  list: "list",
+  both: "both",
+  none: "none"
+};
+var j = Object.defineProperty, s = (a, t, e, o) => {
+  for (var r = void 0, n = a.length - 1, c; n >= 0; n--)
+    (c = a[n]) && (r = c(t, e, r) || r);
+  return r && j(t, e, r), r;
+};
+class i extends D(
+  H(
+    B(L(E(F(b))))
+  )
+) {
+  constructor() {
+    super(...arguments), this.filteredOptions = [], this.filter = "", this.fixedDropdown = !1, this.listboxId = P("listbox-"), this.maxHeight = 0, this.open = !1, this.proxy = document.createElement("input");
+  }
+  /**
+   * Reset the element to its first selectable option when its parent form is reset.
+   *
+   * @internal
+   */
+  formResetCallback() {
+    super.formResetCallback(), this.setDefaultSelectedOption(), this.updateValue();
+  }
+  /** {@inheritDoc (FormAssociated:interface).validate} */
+  validate() {
+    super.validate(this.control);
+  }
+  get isAutocompleteInline() {
+    return this.autocomplete === p.inline || this.isAutocompleteBoth;
+  }
+  get isAutocompleteList() {
+    return this.autocomplete === p.list || this.isAutocompleteBoth;
+  }
+  get isAutocompleteBoth() {
+    return this.autocomplete === p.both;
+  }
+  /**
+   * Sets focus when the open property changes.
+   *
+   * @param prev - the previous open value
+   * @param next - the current open value
+   *
+   * @internal
+   */
+  openChanged() {
+    if (this.open) {
+      this.focusAndScrollOptionIntoView(), S.queueUpdate(() => this.control.focus());
+      return;
+    }
+  }
+  /**
+   * The list of options.
+   *
+   * @public
+   * @remarks
+   * Overrides `Listbox.options`.
+   */
+  get options() {
+    return f.track(this, "options"), this.filteredOptions.length ? this.filteredOptions : this._options;
+  }
+  set options(t) {
+    this._options = t, f.notify(this, "options");
+  }
+  /**
+   * Updates the placeholder on the proxy element.
+   * @internal
+   */
+  placeholderChanged() {
+    this.proxy instanceof HTMLInputElement && (this.proxy.placeholder = this.placeholder);
+  }
+  /**
+   * @internal
+   */
+  valueChanged(t, e) {
+    if (this.$fastController.isConnected && this.options) {
+      const o = this.options.findIndex(
+        (c) => c.text.toLowerCase() === e.toLowerCase()
+      ), r = this.options[this.selectedIndex]?.text, n = this.options[o]?.text;
+      this.selectedIndex = r !== n ? o : this.selectedIndex;
+    }
+    super.valueChanged(t, e);
+  }
+  /**
+   * Handle opening and closing the listbox when the combobox is clicked.
+   *
+   * @param e - the mouse event
+   * @internal
+   */
+  clickHandler(t) {
+    if (!this.disabled) {
+      if (this.open) {
+        const e = t.target.closest(
+          "option,[role=option],[data-vvd-component=option]"
+        );
+        if (!e || e.disabled)
+          return;
+        this.selectedOptions = [e], this.control.value = e.text, this.clearSelectionRange(), this.updateValue(!0);
+      }
+      return this.open = !this.open, this.open && this.control.focus(), !0;
+    }
+  }
+  /**
+   * Handle closing the listbox when the combobox is open and the chevron icon is clicked.
+   *
+   * @param e - the mouse event
+   * @internal
+   */
+  _chevronIconClickHandler(t) {
+    this.open && (t.stopPropagation(), this.open = !1);
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.value && (this.initialValue = this.value), this._popup.anchor = this._anchor;
+  }
+  /**
+   * Filter available options by text value.
+   *
+   * @public
+   */
+  filterOptions() {
+    (!this.autocomplete || this.autocomplete === p.none) && (this.filter = ""), this.filteredOptions = this._options.filter(
+      (t) => t.text.toLowerCase().startsWith(this.filter.toLowerCase())
+    ), this.isAutocompleteList && this._options.forEach((t) => {
+      t.hidden = !this.filteredOptions.includes(t);
+    });
+  }
+  /**
+   * Focus the control and scroll the first selected option into view.
+   *
+   * @internal
+   * @remarks
+   * Overrides: `Listbox.focusAndScrollOptionIntoView`
+   */
+  focusAndScrollOptionIntoView() {
+    if (this.contains(document.activeElement)) {
+      this.control.focus();
+      const t = this.firstSelectedOption;
+      t && requestAnimationFrame(() => {
+        t.scrollIntoView({ block: "nearest" });
+      });
+    }
+  }
+  /**
+   * Handle focus state when the element or its children lose focus.
+   *
+   * @param e - The focus event
+   * @internal
+   */
+  focusoutHandler(t) {
+    if (this.syncValue(), !this.open)
+      return !0;
+    const e = t.relatedTarget;
+    if (this.isSameNode(e)) {
+      this.focus();
+      return;
+    }
+    this.open = !1;
+  }
+  /**
+   * Handle content changes on the control input.
+   *
+   * @param e - the input event
+   * @internal
+   */
+  inputHandler(t) {
+    if (this.filter = this.control.value, this.filterOptions(), this.isAutocompleteInline || (this.selectedIndex = this.options.map((e) => e.text).indexOf(this.control.value)), t.inputType.includes("deleteContent") || !this.filter.length)
+      return !0;
+    this.isAutocompleteList && !this.open && (this.open = !0), this.isAutocompleteInline && (this.filteredOptions.length ? (this.selectedOptions = [this.filteredOptions[0]], this.selectedIndex = this.options.indexOf(this.firstSelectedOption), this.setInlineSelection()) : this.selectedIndex = -1);
+  }
+  /**
+   * Handle keydown actions for listbox navigation.
+   *
+   * @param e - the keyboard event
+   * @internal
+   */
+  keydownHandler(t) {
+    const e = t.key;
+    if (t.ctrlKey || t.shiftKey)
+      return !0;
+    switch (e) {
+      case "Enter": {
+        this.syncValue(), this.isAutocompleteInline && (this.filter = this.value), this.open = !1, this.clearSelectionRange();
+        break;
+      }
+      case "Escape": {
+        if (this.isAutocompleteInline || (this.selectedIndex = -1), this.open) {
+          this.open = !1;
+          break;
+        }
+        this.value = "", this.control.value = "", this.filter = "", this.filterOptions();
+        break;
+      }
+      case "Tab": {
+        if (this.setInputToSelection(), !this.open)
+          return !0;
+        t.preventDefault(), this.open = !1;
+        break;
+      }
+      case "ArrowUp":
+      case "ArrowDown": {
+        if (this.filterOptions(), !this.open) {
+          this.open = !0;
+          break;
+        }
+        this.filteredOptions.length > 0 && super.keydownHandler(t), this.isAutocompleteInline && this.setInlineSelection();
+        break;
+      }
+      default:
+        return !0;
+    }
+  }
+  /**
+   * Ensure that the selectedIndex is within the current allowable filtered range.
+   *
+   * @param prev - the previous selected index value
+   * @param next - the current selected index value
+   *
+   * @internal
+   */
+  selectedIndexChanged(t, e) {
+    if (this.$fastController.isConnected) {
+      if (e = z(-1, this.options.length - 1, e), e !== this.selectedIndex) {
+        this.selectedIndex = e;
+        return;
+      }
+      super.selectedIndexChanged(t, e);
+    }
+  }
+  /**
+   * Move focus to the previous selectable option.
+   *
+   * @internal
+   * @remarks
+   * Overrides `Listbox.selectPreviousOption`
+   */
+  selectPreviousOption() {
+    !this.disabled && this.selectedIndex >= 0 && (this.selectedIndex = this.selectedIndex - 1);
+  }
+  /**
+   * Set the default selected options at initialization or reset.
+   *
+   * @internal
+   * @remarks
+   * Overrides `Listbox.setDefaultSelectedOption`
+   */
+  setDefaultSelectedOption() {
+    if (this.$fastController.isConnected && this.options) {
+      const t = this.options.findIndex(
+        (e) => e.getAttribute("selected") !== null || e.selected
+      );
+      this.selectedIndex = t, !this.dirtyValue && this.firstSelectedOption && (this.value = this.firstSelectedOption.text), this.setSelectedOptions();
+    }
+  }
+  /**
+   * Focus and set the content of the control based on the first selected option.
+   *
+   * @internal
+   */
+  setInputToSelection() {
+    this.firstSelectedOption && (this.control.value = this.firstSelectedOption.text, this.control.focus());
+  }
+  /**
+   * Focus, set and select the content of the control based on the first selected option.
+   *
+   * @internal
+   */
+  setInlineSelection() {
+    this.firstSelectedOption && (this.setInputToSelection(), this.control.setSelectionRange(
+      this.filter.length,
+      this.control.value.length,
+      "backward"
+    ));
+  }
+  /**
+   * Determines if a value update should involve emitting a change event, then updates the value.
+   *
+   * @internal
+   */
+  syncValue() {
+    const t = this.firstSelectedOption?.text ?? this.control.value;
+    this.updateValue(this.value !== t);
+  }
+  /**
+   * Ensure that the entire list of options is used when setting the selected property.
+   *
+   * @param prev - the previous list of selected options
+   * @param next - the current list of selected options
+   *
+   * @internal
+   * @remarks
+   * Overrides: `Listbox.selectedOptionsChanged`
+   */
+  selectedOptionsChanged(t, e) {
+    this.$fastController.isConnected && this._options.forEach((o) => {
+      o.selected = e.includes(o);
+    });
+  }
+  /**
+   * Synchronize the form-associated proxy and update the value property of the element.
+   *
+   * @param prev - the previous collection of slotted option elements
+   * @param next - the next collection of slotted option elements
+   *
+   * @internal
+   */
+  slottedOptionsChanged(t, e) {
+    super.slottedOptionsChanged(t, e), this.updateValue();
+    const o = this.getAttribute("scale") || this.scale;
+    e.forEach((r) => {
+      o && (r.setAttribute("scale", o), r.scale = o);
+    });
+  }
+  /**
+   * Sets the value and to match the first selected option.
+   *
+   * @param shouldEmit - if true, the change event will be emitted
+   *
+   * @internal
+   */
+  updateValue(t) {
+    this.$fastController.isConnected && (this.value = this.firstSelectedOption?.text || this.control.value, this.control.value = this.value), t && this.$emit("change");
+  }
+  /**
+   * @internal
+   */
+  clearSelectionRange() {
+    const t = this.control.value.length;
+    this.control.setSelectionRange(t, t);
+  }
+}
+s([
+  l({ attribute: "autocomplete", mode: "fromView" })
+], i.prototype, "autocomplete");
+s([
+  l
+], i.prototype, "appearance");
+s([
+  l
+], i.prototype, "shape");
+s([
+  l()
+], i.prototype, "scale");
+s([
+  l
+], i.prototype, "placement");
+s([
+  l({ mode: "boolean", attribute: "fixed-dropdown" })
+], i.prototype, "fixedDropdown");
+s([
+  v
+], i.prototype, "metaSlottedContent");
+s([
+  v
+], i.prototype, "maxHeight");
+s([
+  l({ attribute: "open", mode: "boolean" })
+], i.prototype, "open");
+s([
+  l
+], i.prototype, "placeholder");
+const Y = ({
+  icon: a,
+  iconSlottedContent: t,
+  metaSlottedContent: e,
+  errorValidationMessage: o,
+  successText: r,
+  shape: n,
+  scale: c,
+  disabled: x,
+  placeholder: g,
+  label: _,
+  appearance: u,
+  open: w,
+  _activeDescendant: y
+}) => K(
+  "base",
+  ["disabled", x],
+  [`shape-${n}`, !!n],
+  [`size-${c}`, !!c],
+  ["placeholder", !!g],
+  [`appearance-${u}`, !!u],
+  ["no-label", !_],
+  ["has-icon", !!a || !!t?.length],
+  ["has-meta", !!e?.length],
+  ["has-activedescendant", !!y && w],
+  ["error", !!o],
+  ["success", !!r]
+);
+function G() {
+  return h` <label for="control" class="label">
+		${(a) => a.label}
+	</label>`;
+}
+function J(a) {
+  return a.open && a.fixedDropdown ? `--_combobox-fixed-width: ${Math.round(
+    a.getBoundingClientRect().width
+  )}px` : null;
+}
+function Q(a) {
+  const t = R(a), e = q(a);
+  return h` <div class="${Y}" ${d("_anchor")}>
+		${N((o) => o.label, G())}
+		<div class="fieldset">
+			${(o) => t(o.icon, W.Slot)}
+			<div class="wrapper">
+				<input
+					id="control"
+					autocomplete="off"
+					class="control"
+					aria-activedescendant="${(o) => o.open ? o._activeDescendant : null}"
+					aria-autocomplete="${(o) => o.autocomplete}"
+					aria-controls="${(o) => o.listboxId}"
+					aria-expanded="${(o) => o.open}"
+					aria-haspopup="listbox"
+					aria-describedby="${(o) => o._feedbackDescribedBy}"
+					placeholder="${(o) => o.placeholder}"
+					role="combobox"
+					type="text"
+					?disabled="${(o) => o.disabled}"
+					:value="${(o) => o.value}"
+					@input="${(o, r) => o.inputHandler(r.event)}"
+					${d("control")}
+				/>
+			</div>
+			<div class="leading-items-wrapper">
+				<slot name="meta" ${m("metaSlottedContent")}></slot>
+				<div
+					@click="${(o, r) => o._chevronIconClickHandler(r.event)}"
+				>
+					${e}
+				</div>
+			</div>
+		</div>
+	</div>`;
+}
+const X = (a) => {
+  const t = a.tagFor(I);
+  return h`
+		<template
+			tabindex="${(e) => e.disabled ? null : "0"}"
+			@click="${(e, o) => e.clickHandler(o.event)}"
+			@focusout="${(e, o) => e.focusoutHandler(o.event)}"
+			@keydown="${(e, { event: o }) => (e.open && M(o), e.keydownHandler(o))}"
+		>
+			<div class="control-wrapper">
+				${() => Q(a)}
+				<${t} class="popup"
+					style="${J}"
+					?open="${(e) => e.open}"
+					placement="${(e) => e.placement ?? "bottom-start"}"
+					strategy="${(e) => e.fixedDropdown ? "fixed" : "absolute"}"
+					${d("_popup")}>
+					<div id="${(e) => e.listboxId}"
+						class="listbox"
+						role="listbox"
+						?disabled="${(e) => e.disabled}"
+						${d("listbox")}>
+						<slot ${m({
+    filter: b.slottedOptionFilter,
+    flatten: !0,
+    property: "slottedOptions"
+  })}>
+						</slot>
+					</div>
+				</${t}>
+			</div>
+			<div class="feedback-wrapper" @click="${(e, o) => o.event.stopPropagation()}">
+				${(e) => e._getFeedbackTemplate(a)}
+			</div>
+    </template>
+	`;
+}, Z = V(
+  "combobox",
+  i,
+  X,
+  [
+    k,
+    $,
+    O,
+    T
+  ],
+  {
+    styles: [C, U],
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), ee = A(Z);
+ee();

package/contextual-help/definition.cjs

@@ -0,0 +1,62 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const toggletip_definition = require('../toggletip/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class ContextualHelp extends vividElement.VividElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "right";
+  }
+}
+__decorateClass([
+  fastElement.attr({ mode: "fromView" })
+], ContextualHelp.prototype, "placement");
+
+const getClasses = (_) => fastWebUtilities.classNames("control");
+const ContextualHelpTemplate = (context) => {
+  const toggletipTag = context.tagFor(toggletip_definition.VwcToggletipElement);
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
+		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
+			<button class="${getClasses}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${iconTag} name="help-solid"></${iconTag}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${toggletipTag}>
+	`;
+};
+
+const 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))}.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}";
+
+const contextualHelpDefinition = vividElement.defineVividComponent(
+  "contextual-help",
+  ContextualHelp,
+  ContextualHelpTemplate,
+  [icon_definition.iconDefinition, toggletip_definition.toggletipDefinition],
+  {
+    styles
+  }
+);
+const registerContextualHelp = vividElement.createRegisterFunction(
+  contextualHelpDefinition
+);
+
+exports.contextualHelpDefinition = contextualHelpDefinition;
+exports.registerContextualHelp = registerContextualHelp;

package/contextual-help/definition.js

@@ -0,0 +1,57 @@
+import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { VwcToggletipElement as Toggletip, toggletipDefinition } from '../toggletip/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, html } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+
+var __defProp = Object.defineProperty;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = void 0 ;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (decorator(target, key, result) ) || result;
+  if (result) __defProp(target, key, result);
+  return result;
+};
+class ContextualHelp extends VividElement {
+  constructor() {
+    super(...arguments);
+    this.placement = "right";
+  }
+}
+__decorateClass([
+  attr({ mode: "fromView" })
+], ContextualHelp.prototype, "placement");
+
+const getClasses = (_) => classNames("control");
+const ContextualHelpTemplate = (context) => {
+  const toggletipTag = context.tagFor(Toggletip);
+  const iconTag = context.tagFor(Icon);
+  return html`
+		<${toggletipTag} class="base" exportparts="vvd-theme-alternate">
+			<button class="${getClasses}" slot="anchor">
+        <slot name="icon" slot="icon">
+          <${iconTag} name="help-solid"></${iconTag}>
+        </slot>
+			</button>
+			<slot></slot>
+		</${toggletipTag}>
+	`;
+};
+
+const 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))}.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}";
+
+const contextualHelpDefinition = defineVividComponent(
+  "contextual-help",
+  ContextualHelp,
+  ContextualHelpTemplate,
+  [iconDefinition, toggletipDefinition],
+  {
+    styles
+  }
+);
+const registerContextualHelp = createRegisterFunction(
+  contextualHelpDefinition
+);
+
+export { contextualHelpDefinition, registerContextualHelp };

package/contextual-help/index.cjs

@@ -0,0 +1 @@
+"use strict";const e=require("../bundled/definition11.cjs");e.registerContextualHelp();

package/contextual-help/index.js

@@ -0,0 +1,2 @@
+import { r } from "../bundled/definition11.js";
+r();