@vonage/vivid 4.31.0 → 5.1.0

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();

package/{shared/definition61.cjs → tooltip/definition.cjs}

@@ -1,10 +1,13 @@
 'use strict';
 
-const definition = require('./definition67.cjs');
-const vividElement = require('./vivid-element.cjs');
-const anchored = require('./anchored.cjs');
-const index = require('./index.cjs');
-const classNames = require('./class-names.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 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}.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)}";
 
@@ -87,20 +90,20 @@ class Tooltip extends anchored.Anchored(vividElement.VividElement) {
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Tooltip.prototype, "text");
 __decorateClass([
-  vividElement.attr({ mode: "fromView" })
+  fastElement.attr({ mode: "fromView" })
 ], Tooltip.prototype, "placement");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Tooltip.prototype, "open");
 
-const getClasses = ({ open }) => classNames.classNames("control", ["open", Boolean(open)]);
+const getClasses = ({ open }) => fastWebUtilities.classNames("control", ["open", Boolean(open)]);
 const TooltipTemplate = (context) => {
-  const popupTag = context.tagFor(definition.Popup);
+  const popupTag = context.tagFor(popup_definition.Popup);
   const anchorSlotTemplate = anchored.anchorSlotTemplateFactory();
-  return vividElement.html`
+  return fastElement.html`
 ${anchorSlotTemplate}
 <${popupTag} class="${getClasses}" arrow alternate
 	:placement=${(x) => x.placement}
@@ -122,13 +125,13 @@ const tooltipDefinition = vividElement.defineVividComponent(
   "tooltip",
   Tooltip,
   TooltipTemplate,
-  [definition.popupDefinition],
+  [popup_definition.popupDefinition],
   {
     styles
   }
 );
 const registerTooltip = vividElement.createRegisterFunction(tooltipDefinition);
 
-exports.Tooltip = Tooltip;
+exports.VwcTooltipElement = Tooltip;
 exports.registerTooltip = registerTooltip;
 exports.tooltipDefinition = tooltipDefinition;

package/{shared/definition61.js → tooltip/definition.js}

@@ -1,8 +1,9 @@
-import { P as Popup, p as popupDefinition } from './definition67.js';
-import { 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 { h as handleEscapeKeyAndStopPropogation } from './index.js';
-import { c as classNames } from './class-names.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 { attr, html } from '@microsoft/fast-element';
+import { A as Anchored, a as anchorSlotTemplateFactory } from '../unbundled/anchored.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}.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)}";
 
@@ -127,4 +128,4 @@ const tooltipDefinition = defineVividComponent(
 );
 const registerTooltip = createRegisterFunction(tooltipDefinition);
 
-export { Tooltip as T, registerTooltip as r, tooltipDefinition as t };
+export { Tooltip as VwcTooltipElement, registerTooltip, tooltipDefinition };

package/tooltip/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition61.cjs');
-
-definition.registerTooltip();
+"use strict";const i=require("../bundled/definition18.cjs");i.registerTooltip();

package/tooltip/index.js

@@ -1,3 +1,2 @@
-import { r as registerTooltip } from '../shared/definition61.js';
-
-registerTooltip();
+import { r } from "../bundled/definition18.js";
+r();

package/tree-item/definition.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('../icon/definition.cjs');
+require('../unbundled/vivid-element.cjs');
+const treeItem_definition = require('../unbundled/definition3.cjs');
+
+
+
+exports.VwcTreeItemElement = treeItem_definition.TreeItem;
+exports.registerTreeItem = treeItem_definition.registerTreeItem;
+exports.treeItemDefinition = treeItem_definition.treeItemDefinition;

package/tree-item/definition.js

@@ -0,0 +1,3 @@
+import '../icon/definition.js';
+import '../unbundled/vivid-element.js';
+export { T as VwcTreeItemElement, r as registerTreeItem, t as treeItemDefinition } from '../unbundled/definition3.js';

package/tree-item/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition62.cjs');
-
-definition.registerTreeItem();
+"use strict";const e=require("../bundled/definition22.cjs");e.registerTreeItem();

package/tree-item/index.js

@@ -1,3 +1,2 @@
-import { r as registerTreeItem } from '../shared/definition62.js';
-
-registerTreeItem();
+import { r } from "../bundled/definition22.js";
+r();

package/{shared/definition63.cjs → tree-view/definition.cjs}

@@ -1,13 +1,12 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition62.cjs');
-const hostSemantics = require('./host-semantics.cjs');
-const keyCodes = require('./key-codes.cjs');
-const dom = require('./dom.cjs');
-const ref = require('./ref.cjs');
-const classNames = require('./class-names.cjs');
-const slotted = require('./slotted.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const treeItem_definition = require('../unbundled/definition3.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const hostSemantics = require('../unbundled/host-semantics.cjs');
 
 const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
 
@@ -21,14 +20,13 @@ var __decorateClass = (decorators, target, key, kind) => {
   return result;
 };
 function getDisplayedNodes(rootNode, selector) {
-  if (dom.isHTMLElement(rootNode)) {
+  if (fastWebUtilities.isHTMLElement(rootNode)) {
     const nodes = Array.from(
       rootNode.querySelectorAll(selector)
     );
     const visibleNodes = nodes.filter((node) => {
-      if (node.parentElement instanceof definition.TreeItem) {
-        if (node.parentElement.getAttribute("aria-expanded") === "true")
-          return true;
+      if (node.parentElement instanceof treeItem_definition.TreeItem) {
+        if (node.parentElement.expanded) return true;
       } else {
         return true;
       }
@@ -56,7 +54,7 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
       if (this.slottedTreeItems.length > 0) {
         if (e.target === this) {
           if (this.currentFocused !== null) {
-            definition.TreeItem.focusItem(this.currentFocused);
+            treeItem_definition.TreeItem.focusItem(this.currentFocused);
           }
           return;
         }
@@ -88,47 +86,47 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
       if (!e.defaultPrevented) {
         const treeItems = this.getVisibleNodes();
         switch (e.key) {
-          case keyCodes.keyHome:
+          case fastWebUtilities.keyHome:
             if (treeItems.length) {
-              definition.TreeItem.focusItem(treeItems[0]);
+              treeItem_definition.TreeItem.focusItem(treeItems[0]);
             }
             return;
-          case keyCodes.keyEnd:
+          case fastWebUtilities.keyEnd:
             if (treeItems.length) {
-              definition.TreeItem.focusItem(treeItems[treeItems.length - 1]);
+              treeItem_definition.TreeItem.focusItem(treeItems[treeItems.length - 1]);
             }
             return;
-          case keyCodes.keyArrowLeft:
+          case fastWebUtilities.keyArrowLeft:
             if (e.target && this.isFocusableElement(e.target)) {
               const item = e.target;
-              if (item instanceof definition.TreeItem && item.childItemLength() > 0 && item.expanded) {
+              if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0 && item.expanded) {
                 item.expanded = false;
-              } else if (item instanceof definition.TreeItem && item.parentElement instanceof definition.TreeItem) {
-                definition.TreeItem.focusItem(item.parentElement);
+              } else if (item instanceof treeItem_definition.TreeItem && item.parentElement instanceof treeItem_definition.TreeItem) {
+                treeItem_definition.TreeItem.focusItem(item.parentElement);
               }
             }
             return false;
-          case keyCodes.keyArrowRight:
+          case fastWebUtilities.keyArrowRight:
             if (e.target && this.isFocusableElement(e.target)) {
               const item = e.target;
-              if (item instanceof definition.TreeItem && item.childItemLength() > 0 && !item.expanded) {
+              if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0 && !item.expanded) {
                 item.expanded = true;
-              } else if (item instanceof definition.TreeItem && item.childItemLength() > 0) {
+              } else if (item instanceof treeItem_definition.TreeItem && item.childItemLength() > 0) {
                 this.focusNextNode(1, e.target);
               }
             }
             return;
-          case keyCodes.keyArrowDown:
+          case fastWebUtilities.keyArrowDown:
             if (e.target && this.isFocusableElement(e.target)) {
               this.focusNextNode(1, e.target);
             }
             return;
-          case keyCodes.keyArrowUp:
+          case fastWebUtilities.keyArrowUp:
             if (e.target && this.isFocusableElement(e.target)) {
               this.focusNextNode(-1, e.target);
             }
             return;
-          case keyCodes.keyEnter:
+          case fastWebUtilities.keyEnter:
             this.handleClick(e);
             return;
         }
@@ -143,7 +141,7 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
      */
     this.handleSelectedChange = (e) => {
       if (!e.defaultPrevented) {
-        if (!(e.target instanceof Element) || !definition.isTreeItemElement(e.target)) {
+        if (!(e.target instanceof Element) || !treeItem_definition.isTreeItemElement(e.target)) {
           return true;
         }
         const item = e.target;
@@ -170,7 +168,7 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
       this.nested = this.checkForNestedItems();
       const treeItems = this.getVisibleNodes();
       treeItems.forEach((node) => {
-        if (definition.isTreeItemElement(node)) {
+        if (treeItem_definition.isTreeItemElement(node)) {
           node.nested = this.nested;
         }
       });
@@ -179,7 +177,7 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
      * check if the item is focusable
      */
     this.isFocusableElement = (el) => {
-      return definition.isTreeItemElement(el);
+      return treeItem_definition.isTreeItemElement(el);
     };
     this.isSelectedElement = (el) => {
       return el.selected;
@@ -193,7 +191,7 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
   connectedCallback() {
     super.connectedCallback();
     this.setAttribute("tabindex", "0");
-    vividElement.DOM.queueUpdate(() => {
+    fastElement.DOM.queueUpdate(() => {
       this.setItems();
     });
   }
@@ -204,7 +202,7 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
    */
   handleClick(e) {
     if (!e.defaultPrevented) {
-      if (!(e.target instanceof Element) || !definition.isTreeItemElement(e.target)) {
+      if (!(e.target instanceof Element) || !treeItem_definition.isTreeItemElement(e.target)) {
         return true;
       }
       const item = e.target;
@@ -221,8 +219,8 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
     const visibleNodes = this.getVisibleNodes();
     if (visibleNodes) {
       const focusItem = visibleNodes[visibleNodes.indexOf(item) + delta];
-      if (dom.isHTMLElement(focusItem)) {
-        definition.TreeItem.focusItem(focusItem);
+      if (fastWebUtilities.isHTMLElement(focusItem)) {
+        treeItem_definition.TreeItem.focusItem(focusItem);
       }
     }
   }
@@ -245,7 +243,7 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
    */
   checkForNestedItems() {
     return this.slottedTreeItems.some((node) => {
-      return definition.isTreeItemElement(node) && node.querySelector("[data-vvd-component='tree-item']");
+      return treeItem_definition.isTreeItemElement(node) && node.querySelector("[data-vvd-component='tree-item']");
     });
   }
   getVisibleNodes() {
@@ -254,20 +252,20 @@ class TreeView extends hostSemantics.HostSemantics(vividElement.VividElement) {
 }
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.attr({ attribute: "render-collapsed-nodes" })
+  fastElement.attr({ attribute: "render-collapsed-nodes" })
 ], TreeView.prototype, "renderCollapsedNodes");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], TreeView.prototype, "currentSelected");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], TreeView.prototype, "slottedTreeItems");
 
-const getClasses = (_) => classNames.classNames("control");
-const TreeViewTemplate = vividElement.html` <template
-	${ref.ref("treeView")}
+const getClasses = (_) => fastWebUtilities.classNames("control");
+const TreeViewTemplate = fastElement.html` <template
+	${fastElement.ref("treeView")}
 	${hostSemantics.applyHostSemantics({
   role: "tree"
 })}
@@ -278,7 +276,7 @@ const TreeViewTemplate = vividElement.html` <template
 	@selected-change="${(x, c) => x.handleSelectedChange(c.event)}"
 >
 	<div class="${getClasses}">
-		<slot ${slotted.slotted("slottedTreeItems")}></slot>
+		<slot ${fastElement.slotted("slottedTreeItems")}></slot>
 	</div>
 </template>`;
 
@@ -286,13 +284,13 @@ const treeViewDefinition = vividElement.defineVividComponent(
   "tree-view",
   TreeView,
   TreeViewTemplate,
-  [definition.treeItemDefinition],
+  [treeItem_definition.treeItemDefinition],
   {
     styles
   }
 );
 const registerTreeView = vividElement.createRegisterFunction(treeViewDefinition);
 
-exports.TreeView = TreeView;
+exports.VwcTreeViewElement = TreeView;
 exports.registerTreeView = registerTreeView;
 exports.treeViewDefinition = treeViewDefinition;

package/{shared/definition63.js → tree-view/definition.js}

@@ -1,11 +1,8 @@
-import { D as DOM, V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { T as TreeItem, i as isTreeItemElement, t as treeItemDefinition } from './definition62.js';
-import { H as HostSemantics, a as applyHostSemantics } from './host-semantics.js';
-import { k as keyEnter, e as keyArrowUp, f as keyArrowDown, h as keyArrowRight, i as keyArrowLeft, d as keyEnd, g as keyHome } from './key-codes.js';
-import { i as isHTMLElement } from './dom.js';
-import { r as ref } from './ref.js';
-import { c as classNames } from './class-names.js';
-import { s as slotted } from './slotted.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { T as TreeItem, i as isTreeItemElement, t as treeItemDefinition } from '../unbundled/definition3.js';
+import { DOM, attr, observable, ref, slotted, html } from '@microsoft/fast-element';
+import { keyEnter, keyArrowUp, keyArrowDown, keyArrowRight, keyArrowLeft, keyEnd, keyHome, isHTMLElement, classNames } from '@microsoft/fast-web-utilities';
+import { H as HostSemantics, a as applyHostSemantics } from '../unbundled/host-semantics.js';
 
 const styles = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
 
@@ -25,8 +22,7 @@ function getDisplayedNodes(rootNode, selector) {
     );
     const visibleNodes = nodes.filter((node) => {
       if (node.parentElement instanceof TreeItem) {
-        if (node.parentElement.getAttribute("aria-expanded") === "true")
-          return true;
+        if (node.parentElement.expanded) return true;
       } else {
         return true;
       }
@@ -291,4 +287,4 @@ const treeViewDefinition = defineVividComponent(
 );
 const registerTreeView = createRegisterFunction(treeViewDefinition);
 
-export { TreeView as T, registerTreeView as r, treeViewDefinition as t };
+export { TreeView as VwcTreeViewElement, registerTreeView, treeViewDefinition };