@vonage/vivid 5.0.0 → 5.2.0

package/{shared/definition58.cjs → text-field/definition.cjs}

@@ -1,21 +1,23 @@
 'use strict';
 
-const definition = require('./definition28.cjs');
-const vividElement = require('./vivid-element.cjs');
-const mixins = require('./mixins.cjs');
-const definition$1 = require('./definition66.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const formAssociated = require('./form-associated.cjs');
-const charCount = require('./char-count.cjs');
-const withErrorText = require('./with-error-text.cjs');
-const withSuccessText = require('./with-success-text.cjs');
-const formElement = require('./form-element.cjs');
-const affix = require('./affix.cjs');
-const textField = require('./text-field.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
-const slotted = require('./slotted.cjs');
-const ref = require('./ref.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const mixins = require('../unbundled/mixins.cjs');
+const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
+const contextualHelp_definition = require('../contextual-help/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const formAssociated = require('../unbundled/form-associated.cjs');
+const charCount = require('../unbundled/char-count.cjs');
+const withContextualHelp = require('../unbundled/with-contextual-help.cjs');
+const withErrorText = require('../unbundled/with-error-text.cjs');
+const withSuccessText = require('../unbundled/with-success-text.cjs');
+const formElement = require('../unbundled/form-element.cjs');
+const affix = require('../unbundled/affix.cjs');
+const textField = require('../unbundled/text-field.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -32,7 +34,7 @@ const TextFieldType = {
    */
   text: "text"};
 const safariWorkaroundClassName = "_vvd-3-text-field-safari-workaround";
-const safariWorkaroundStyles = vividElement.ElementStyles.create([
+const safariWorkaroundStyles = fastElement.ElementStyles.create([
   `
 	.${safariWorkaroundClassName}::placeholder {
 		opacity: 1 !important;
@@ -46,11 +48,13 @@ const installSafariWorkaroundStyleIfNeeded = (forElement) => {
     safariWorkaroundStyles.addStylesTo(root);
   }
 };
-class TextField extends mixins.WithLightDOMFeedback(
-  charCount.WithCharCount(
-    withErrorText.WithErrorText(
-      withSuccessText.WithSuccessText(
-        formElement.FormElement(affix.AffixIcon(delegatesAria.DelegatesAria(formAssociated.FormAssociated(vividElement.VividElement))))
+class TextField extends withContextualHelp.WithContextualHelp(
+  mixins.WithLightDOMFeedback(
+    charCount.WithCharCount(
+      withErrorText.WithErrorText(
+        withSuccessText.WithSuccessText(
+          formElement.FormElement(affix.AffixIcon(delegatesAria.DelegatesAria(formAssociated.FormAssociated(vividElement.VividElement))))
+        )
       )
     )
   )
@@ -209,7 +213,7 @@ class TextField extends mixins.WithLightDOMFeedback(
     this.proxy.setAttribute("type", this.type);
     this.validate();
     if (this.autofocus) {
-      vividElement.DOM.queueUpdate(() => {
+      fastElement.DOM.queueUpdate(() => {
         this.focus();
       });
     }
@@ -229,55 +233,55 @@ class TextField extends mixins.WithLightDOMFeedback(
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "readonly", mode: "boolean" })
+  fastElement.attr({ attribute: "readonly", mode: "boolean" })
 ], TextField.prototype, "readOnly");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], TextField.prototype, "autofocus");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "placeholder");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "type");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "list");
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ converter: fastElement.nullableNumberConverter })
 ], TextField.prototype, "maxlength");
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ converter: fastElement.nullableNumberConverter })
 ], TextField.prototype, "minlength");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "pattern");
 __decorateClass([
-  vividElement.attr({ converter: vividElement.nullableNumberConverter })
+  fastElement.attr({ converter: fastElement.nullableNumberConverter })
 ], TextField.prototype, "size");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], TextField.prototype, "spellcheck");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "appearance");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "shape");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], TextField.prototype, "autoComplete");
 __decorateClass([
-  vividElement.attr()
+  fastElement.attr()
 ], TextField.prototype, "scale");
 __decorateClass([
-  vividElement.attr({ attribute: "inputmode" })
+  fastElement.attr({ attribute: "inputmode" })
 ], TextField.prototype, "inputMode");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], TextField.prototype, "actionItemsSlottedContent");
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], TextField.prototype, "leadingActionItemsSlottedContent");
 
 const getControlId = (id) => `vvd-text-field-control-${id}`;
@@ -295,7 +299,7 @@ const getStateClasses = ({
   leadingActionItemsSlottedContent,
   icon,
   scale
-}) => classNames.classNames(
+}) => fastWebUtilities.classNames(
   ["error", Boolean(errorValidationMessage)],
   ["disabled", disabled],
   ["has-value", Boolean(value)],
@@ -313,17 +317,26 @@ const getStateClasses = ({
 );
 const TextfieldTemplate = (context) => {
   const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return vividElement.html`
+  return fastElement.html`
 		<div class="base ${getStateClasses}">
-			${when.when(
+			<div
+				class="label-suffix"
+				?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
+			>
+				${fastElement.when(
     (x) => x.charCount && x.maxlength,
     (x) => x._getCharCountTemplate(context)
   )}
+				<slot
+					name="contextual-help"
+					${fastElement.slotted("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
 			<slot class="label" name="_label"></slot>
-			${mixins.renderInLightDOM(vividElement.html`
-				${when.when(
+			${mixins.renderInLightDOM(fastElement.html`
+				${fastElement.when(
     (x) => x.label,
-    vividElement.html`
+    fastElement.html`
 						<label slot="_label" for="${(x) => getControlId(x._uniqueId)}">
 							${(x) => x.label}
 						</label>
@@ -334,14 +347,14 @@ const TextfieldTemplate = (context) => {
 				<div class="leading-items-wrapper">
 					<slot
 						name="leading-action-items"
-						${slotted.slotted("leadingActionItemsSlottedContent")}
+						${fastElement.slotted("leadingActionItemsSlottedContent")}
 					></slot>
 					${(x) => affixIconTemplate(x.icon)}
 				</div>
 				<div class="wrapper">
 					<slot class="control" name="_control"></slot>
 					${mixins.renderInLightDOM(
-    vividElement.html`<input
+    fastElement.html`<input
 							slot="_control"
 							id="${(x) => getControlId(x._uniqueId)}"
 							class="_vvd-3-text-field-safari-workaround"
@@ -370,14 +383,14 @@ const TextfieldTemplate = (context) => {
 							aria-describedby="${(x) => x._feedbackDescribedBy} ${(x) => x.charCount && x.maxlength ? x._charCountDescribedBy : null}"
 							value="${(x) => x.initialValue}"
 							${delegatesAria.delegateAria()}
-							${ref.ref("control")}
+							${fastElement.ref("control")}
 						/>`
   )}
 				</div>
 				<div class="action-items-wrapper">
 					<slot
 						name="action-items"
-						${slotted.slotted("actionItemsSlottedContent")}
+						${fastElement.slotted("actionItemsSlottedContent")}
 					></slot>
 				</div>
 			</div>
@@ -390,7 +403,12 @@ const textFieldDefinition = vividElement.defineVividComponent(
   "text-field",
   TextField,
   TextfieldTemplate,
-  [definition.iconDefinition, mixins.feedbackMessageDefinition, definition$1.visuallyHiddenDefinition],
+  [
+    icon_definition.iconDefinition,
+    mixins.feedbackMessageDefinition,
+    visuallyHidden_definition.visuallyHiddenDefinition,
+    contextualHelp_definition.contextualHelpDefinition
+  ],
   {
     styles: textField.styles,
     shadowOptions: {
@@ -400,6 +418,6 @@ const textFieldDefinition = vividElement.defineVividComponent(
 );
 const registerTextField = vividElement.createRegisterFunction(textFieldDefinition);
 
-exports.TextField = TextField;
+exports.VwcTextFieldElement = TextField;
 exports.registerTextField = registerTextField;
 exports.textFieldDefinition = textFieldDefinition;

package/{shared/definition58.js → text-field/definition.js}

@@ -1,19 +1,19 @@
-import { i as iconDefinition } from './definition28.js';
-import { D as DOM, E as ElementStyles, V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { W as WithLightDOMFeedback, g as generateRandomId, r as renderInLightDOM, f as feedbackMessageDefinition } from './mixins.js';
-import { v as visuallyHiddenDefinition } from './definition66.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { F as FormAssociated } from './form-associated.js';
-import { W as WithCharCount } from './char-count.js';
-import { W as WithErrorText } from './with-error-text.js';
-import { W as WithSuccessText } from './with-success-text.js';
-import { F as FormElement } from './form-element.js';
-import { b as AffixIcon, a as affixIconTemplateFactory } from './affix.js';
-import { s as styles } from './text-field.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
-import { s as slotted } from './slotted.js';
-import { r as ref } from './ref.js';
+import { iconDefinition } from '../icon/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { W as WithLightDOMFeedback, g as generateRandomId, r as renderInLightDOM, f as feedbackMessageDefinition } from '../unbundled/mixins.js';
+import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
+import { contextualHelpDefinition } from '../contextual-help/definition.js';
+import { DOM, ElementStyles, attr, nullableNumberConverter, observable, when, slotted, html, ref } from '@microsoft/fast-element';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { F as FormAssociated } from '../unbundled/form-associated.js';
+import { W as WithCharCount } from '../unbundled/char-count.js';
+import { W as WithContextualHelp } from '../unbundled/with-contextual-help.js';
+import { W as WithErrorText } from '../unbundled/with-error-text.js';
+import { W as WithSuccessText } from '../unbundled/with-success-text.js';
+import { F as FormElement } from '../unbundled/form-element.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from '../unbundled/affix.js';
+import { s as styles } from '../unbundled/text-field.js';
+import { classNames } from '@microsoft/fast-web-utilities';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -44,11 +44,13 @@ const installSafariWorkaroundStyleIfNeeded = (forElement) => {
     safariWorkaroundStyles.addStylesTo(root);
   }
 };
-class TextField extends WithLightDOMFeedback(
-  WithCharCount(
-    WithErrorText(
-      WithSuccessText(
-        FormElement(AffixIcon(DelegatesAria(FormAssociated(VividElement))))
+class TextField extends WithContextualHelp(
+  WithLightDOMFeedback(
+    WithCharCount(
+      WithErrorText(
+        WithSuccessText(
+          FormElement(AffixIcon(DelegatesAria(FormAssociated(VividElement))))
+        )
       )
     )
   )
@@ -313,10 +315,19 @@ const TextfieldTemplate = (context) => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   return html`
 		<div class="base ${getStateClasses}">
-			${when(
+			<div
+				class="label-suffix"
+				?hidden=${(x) => !(x.charCount && x.maxlength) && !x._hasContextualHelp}
+			>
+				${when(
     (x) => x.charCount && x.maxlength,
     (x) => x._getCharCountTemplate(context)
   )}
+				<slot
+					name="contextual-help"
+					${slotted("_contextualHelpSlottedContent")}
+				></slot>
+			</div>
 			<slot class="label" name="_label"></slot>
 			${renderInLightDOM(html`
 				${when(
@@ -388,7 +399,12 @@ const textFieldDefinition = defineVividComponent(
   "text-field",
   TextField,
   TextfieldTemplate,
-  [iconDefinition, feedbackMessageDefinition, visuallyHiddenDefinition],
+  [
+    iconDefinition,
+    feedbackMessageDefinition,
+    visuallyHiddenDefinition,
+    contextualHelpDefinition
+  ],
   {
     styles,
     shadowOptions: {
@@ -398,4 +414,4 @@ const textFieldDefinition = defineVividComponent(
 );
 const registerTextField = createRegisterFunction(textFieldDefinition);
 
-export { TextField as T, registerTextField as r, textFieldDefinition as t };
+export { TextField as VwcTextFieldElement, registerTextField, textFieldDefinition };

package/text-field/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition58.cjs');
-
-definition.registerTextField();
+"use strict";const e=require("../bundled/definition13.cjs");e.registerTextField();

package/text-field/index.js

@@ -1,3 +1,2 @@
-import { r as registerTextField } from '../shared/definition58.js';
-
-registerTextField();
+import { r } from "../bundled/definition13.js";
+r();

package/time-picker/definition.cjs

@@ -0,0 +1,43 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const textField_definition = require('../text-field/definition.cjs');
+const popup_definition = require('../unbundled/definition4.cjs');
+const button_definition = require('../unbundled/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const pickerField_template = require('../unbundled/picker-field.template.cjs');
+const timeSelectionPicker_template = require('../unbundled/time-selection-picker.template.cjs');
+const visuallyHidden_definition = require('../visually-hidden/definition.cjs');
+require('@microsoft/fast-element');
+
+const TimePickerTemplate = (context) => {
+  return pickerField_template.PickerFieldTemplate(context, timeSelectionPicker_template.TimeSelectionPickerTemplate(context, 6), {
+    withSeparator: true,
+    padded: false
+  });
+};
+
+const timePickerDefinition = vividElement.defineVividComponent(
+  "time-picker",
+  timeSelectionPicker_template.TimePicker,
+  TimePickerTemplate,
+  [
+    textField_definition.textFieldDefinition,
+    popup_definition.popupDefinition,
+    button_definition.buttonDefinition,
+    timeSelectionPicker_template.inlineTimePickerDefinition,
+    visuallyHidden_definition.visuallyHiddenDefinition
+  ],
+  {
+    styles: pickerField_template.pickerFieldStyles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerTimePicker = vividElement.createRegisterFunction(timePickerDefinition);
+
+exports.VwcTimePickerElement = timeSelectionPicker_template.TimePicker;
+exports.registerTimePicker = registerTimePicker;
+exports.timePickerDefinition = timePickerDefinition;

package/{shared/definition59.js → time-picker/definition.js}

@@ -1,10 +1,11 @@
-import { t as textFieldDefinition } from './definition58.js';
-import { p as popupDefinition } from './definition67.js';
-import { b as buttonDefinition } from './definition11.js';
-import { d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { P as PickerFieldTemplate, p as pickerFieldStyles } from './picker-field.template.js';
-import { a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition, T as TimePicker } from './time-selection-picker.template.js';
-import { v as visuallyHiddenDefinition } from './definition66.js';
+import { textFieldDefinition } from '../text-field/definition.js';
+import { p as popupDefinition } from '../unbundled/definition4.js';
+import { b as buttonDefinition } from '../unbundled/definition.js';
+import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { P as PickerFieldTemplate, p as pickerFieldStyles } from '../unbundled/picker-field.template.js';
+import { a as TimeSelectionPickerTemplate, i as inlineTimePickerDefinition, T as TimePicker } from '../unbundled/time-selection-picker.template.js';
+import { visuallyHiddenDefinition } from '../visually-hidden/definition.js';
+import '@microsoft/fast-element';
 
 const TimePickerTemplate = (context) => {
   return PickerFieldTemplate(context, TimeSelectionPickerTemplate(context, 6), {
@@ -33,4 +34,4 @@ const timePickerDefinition = defineVividComponent(
 );
 const registerTimePicker = createRegisterFunction(timePickerDefinition);
 
-export { registerTimePicker as r, timePickerDefinition as t };
+export { TimePicker as VwcTimePickerElement, registerTimePicker, timePickerDefinition };

package/time-picker/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition59.cjs');
-
-definition.registerTimePicker();
+"use strict";const r=require("../bundled/definition13.cjs"),o=require("../bundled/definition9.cjs"),c=require("../bundled/definition3.cjs"),t=require("../bundled/vivid-element.cjs"),n=require("../bundled/picker-field.template.cjs"),e=require("../bundled/time-selection-picker.template.cjs"),s=require("../bundled/definition12.cjs"),l=i=>n.PickerFieldTemplate(i,e.TimeSelectionPickerTemplate(i,6),{withSeparator:!0,padded:!1}),d=t.defineVividComponent("time-picker",e.TimePicker,l,[r.textFieldDefinition,o.popupDefinition,c.buttonDefinition,e.inlineTimePickerDefinition,s.visuallyHiddenDefinition],{styles:n.pickerFieldStyles,shadowOptions:{delegatesFocus:!0}}),u=t.createRegisterFunction(d);u();

package/time-picker/index.js

@@ -1,3 +1,29 @@
-import { r as registerTimePicker } from '../shared/definition59.js';
-
-registerTimePicker();
+import { t as e } from "../bundled/definition13.js";
+import { p as t } from "../bundled/definition9.js";
+import { b as r } from "../bundled/definition3.js";
+import { c as o, d as n } from "../bundled/vivid-element.js";
+import { a as m, p as s } from "../bundled/picker-field.template.js";
+import { a, b as p, d as c } from "../bundled/time-selection-picker.template.js";
+import { v as f } from "../bundled/definition12.js";
+const d = (i) => m(i, a(i, 6), {
+  withSeparator: !0,
+  padded: !1
+}), l = n(
+  "time-picker",
+  c,
+  d,
+  [
+    e,
+    t,
+    r,
+    p,
+    f
+  ],
+  {
+    styles: s,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), k = o(l);
+k();

package/{shared/definition60.cjs → toggletip/definition.cjs}

@@ -1,12 +1,14 @@
 'use strict';
 
-const definition = require('./definition67.cjs');
-const vividElement = require('./vivid-element.cjs');
-const anchored = require('./anchored.cjs');
-const localized = require('./localized.cjs');
-const index = require('./index.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const popup_definition = require('../unbundled/definition4.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const anchored = require('../unbundled/anchored.cjs');
+const localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const index = require('../unbundled/index.cjs');
 
 const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
 
@@ -27,7 +29,7 @@ class Toggletip extends localized.Localized(anchored.Anchored(vividElement.Vivid
     this.placement = "right";
     this.open = false;
     this.#openIfClosed = () => {
-      if (!this.open) vividElement.DOM.queueUpdate(() => this.open = true);
+      if (!this.open) fastElement.DOM.queueUpdate(() => this.open = true);
     };
     this.#closeOnClickOutside = (e) => {
       const clickedOutside = !this.contains(e.target);
@@ -97,23 +99,23 @@ class Toggletip extends localized.Localized(anchored.Anchored(vividElement.Vivid
   #closeOnEscape;
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Toggletip.prototype, "headline");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Toggletip.prototype, "alternate");
 __decorateClass([
-  vividElement.attr({ mode: "fromView" })
+  fastElement.attr({ mode: "fromView" })
 ], Toggletip.prototype, "placement");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Toggletip.prototype, "open");
 
-const getClasses = (_) => classNames.classNames("control");
+const getClasses = (_) => fastWebUtilities.classNames("control");
 const ToggletipTemplate = (context) => {
-  const popup = context.tagFor(definition.Popup);
+  const popup = context.tagFor(popup_definition.Popup);
   const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
-  return vividElement.html`
+  return fastElement.html`
 		${anchorSlotTemplate}
 		<${popup}
 			@keydown="${(x, { event }) => {
@@ -131,7 +133,7 @@ const ToggletipTemplate = (context) => {
 			exportparts="vvd-theme-alternate"
 		>
 			<div class="content-wrapper">
-				${when.when((x) => x.headline, vividElement.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
+				${fastElement.when((x) => x.headline, fastElement.html`<h2 class="headline">${(x) => x.headline}</h2>`)}
 				<slot></slot>
 				<div class="action-items"><slot name="action-items"></slot></div>
 			</div>
@@ -143,13 +145,13 @@ const toggletipDefinition = vividElement.defineVividComponent(
   "toggletip",
   Toggletip,
   ToggletipTemplate,
-  [definition.popupDefinition],
+  [popup_definition.popupDefinition],
   {
     styles
   }
 );
 const registerToggletip = vividElement.createRegisterFunction(toggletipDefinition);
 
-exports.Toggletip = Toggletip;
+exports.VwcToggletipElement = Toggletip;
 exports.registerToggletip = registerToggletip;
 exports.toggletipDefinition = toggletipDefinition;

package/{shared/definition60.js → toggletip/definition.js}

@@ -1,10 +1,10 @@
-import { P as Popup, p as popupDefinition } from './definition67.js';
-import { D as DOM, V as VividElement, a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { A as Anchored, a as anchorSlotTemplateFactory } from './anchored.js';
-import { L as Localized } from './localized.js';
-import { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { P as Popup, p as popupDefinition } from '../unbundled/definition4.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { DOM, attr, when, html } from '@microsoft/fast-element';
+import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.js';
+import { L as Localized } from '../unbundled/localized.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { h as handleEscapeKeyAndStopPropogation } from '../unbundled/index.js';
 
 const styles = ":host :host{display:var(--_popup-display, inline)}:host :host([slotted-anchor]){--_popup-display: contents}.content-wrapper{width:var(--toggletip-inline-size, auto);padding:16px;max-inline-size:var(--toggletip-max-inline-size, 30ch)}.headline{margin:0;font:var(--vvd-typography-base-bold)}.action-items{display:flex;justify-content:flex-end;gap:10px}::slotted([slot=action-items]){margin-block-start:16px}";
 
@@ -148,4 +148,4 @@ const toggletipDefinition = defineVividComponent(
 );
 const registerToggletip = createRegisterFunction(toggletipDefinition);
 
-export { Toggletip as T, registerToggletip as r, toggletipDefinition as t };
+export { Toggletip as VwcToggletipElement, registerToggletip, toggletipDefinition };

package/toggletip/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition60.cjs');
-
-definition.registerToggletip();
+"use strict";const e=require("../bundled/definition16.cjs");e.registerToggletip();

package/toggletip/index.js

@@ -1,3 +1,2 @@
-import { r as registerToggletip } from '../shared/definition60.js';
-
-registerToggletip();
+import { r } from "../bundled/definition16.js";
+r();