@vonage/vivid 5.0.0 → 5.2.0

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,12 +20,12 @@ 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 instanceof treeItem_definition.TreeItem) {
         if (node.parentElement.expanded) return true;
       } else {
         return true;
@@ -55,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;
         }
@@ -87,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;
         }
@@ -142,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;
@@ -169,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;
         }
       });
@@ -178,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;
@@ -192,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();
     });
   }
@@ -203,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;
@@ -220,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);
       }
     }
   }
@@ -244,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() {
@@ -253,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"
 })}
@@ -277,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>`;
 
@@ -285,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}";
 
@@ -290,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 };

package/tree-view/index.cjs

@@ -1,5 +1,13 @@
-'use strict';
-
-const definition = require('../shared/definition63.cjs');
-
-definition.registerTreeView();
+"use strict";const l=require("../bundled/vivid-element.cjs"),n=require("../bundled/definition22.cjs"),m=require("../bundled/host-semantics.cjs"),c=require("../bundled/key-codes.cjs"),h=require("../bundled/dom.cjs"),f=require("../bundled/ref.cjs"),g=require("../bundled/class-names.cjs"),I=require("../bundled/slotted.cjs"),p=".control{position:relative;display:flex;flex-direction:column;gap:4px}";var b=Object.defineProperty,d=(r,e,t,s)=>{for(var i=void 0,a=r.length-1,u;a>=0;a--)(u=r[a])&&(i=u(e,t,i)||i);return i&&b(e,t,i),i};function T(r,e){return h.isHTMLElement(r)?Array.from(r.querySelectorAll(e)).filter(i=>{if(i.parentElement instanceof n.TreeItem){if(i.parentElement.expanded)return!0}else return!0;return!1}):[]}class o extends m.HostSemantics(l.VividElement){constructor(){super(...arguments),this.currentFocused=null,this.handleFocus=e=>{if(this.slottedTreeItems.length>0){if(e.target===this){this.currentFocused!==null&&n.TreeItem.focusItem(this.currentFocused);return}this.contains(e.target)&&(this.setAttribute("tabindex","-1"),this.currentFocused=e.target)}},this.handleBlur=e=>{e.target instanceof HTMLElement&&(e.relatedTarget===null||!this.contains(e.relatedTarget))&&this.setAttribute("tabindex","0")},this.handleKeyDown=e=>{if(this.slottedTreeItems.length<1)return!0;if(!e.defaultPrevented){const t=this.getVisibleNodes();switch(e.key){case c.keyHome:t.length&&n.TreeItem.focusItem(t[0]);return;case c.keyEnd:t.length&&n.TreeItem.focusItem(t[t.length-1]);return;case c.keyArrowLeft:if(e.target&&this.isFocusableElement(e.target)){const s=e.target;s instanceof n.TreeItem&&s.childItemLength()>0&&s.expanded?s.expanded=!1:s instanceof n.TreeItem&&s.parentElement instanceof n.TreeItem&&n.TreeItem.focusItem(s.parentElement)}return!1;case c.keyArrowRight:if(e.target&&this.isFocusableElement(e.target)){const s=e.target;s instanceof n.TreeItem&&s.childItemLength()>0&&!s.expanded?s.expanded=!0:s instanceof n.TreeItem&&s.childItemLength()>0&&this.focusNextNode(1,e.target)}return;case c.keyArrowDown:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(1,e.target);return;case c.keyArrowUp:e.target&&this.isFocusableElement(e.target)&&this.focusNextNode(-1,e.target);return;case c.keyEnter:this.handleClick(e);return}}return!0},this.handleSelectedChange=e=>{if(!e.defaultPrevented){if(!(e.target instanceof Element)||!n.isTreeItemElement(e.target))return!0;const t=e.target;t.selected?(this.currentSelected&&this.currentSelected!==t&&(this.currentSelected.selected=!1),this.currentSelected=t):!t.selected&&this.currentSelected===t&&(this.currentSelected=null);return}},this.setItems=()=>{const e=this.treeView.querySelector("[selected]");this.currentSelected=e,(this.currentFocused===null||!this.contains(this.currentFocused))&&(this.currentFocused=this.getValidFocusableItem()),this.nested=this.checkForNestedItems(),this.getVisibleNodes().forEach(s=>{n.isTreeItemElement(s)&&(s.nested=this.nested)})},this.isFocusableElement=e=>n.isTreeItemElement(e),this.isSelectedElement=e=>e.selected}slottedTreeItemsChanged(){this.$fastController.isConnected&&this.setItems()}connectedCallback(){super.connectedCallback(),this.setAttribute("tabindex","0"),l.DOM.queueUpdate(()=>{this.setItems()})}handleClick(e){if(!e.defaultPrevented){if(!(e.target instanceof Element)||!n.isTreeItemElement(e.target))return!0;const t=e.target;t.disabled||(t.selected=!t.selected);return}}focusNextNode(e,t){const s=this.getVisibleNodes();if(s){const i=s[s.indexOf(t)+e];h.isHTMLElement(i)&&n.TreeItem.focusItem(i)}}getValidFocusableItem(){const e=this.getVisibleNodes();let t=e.findIndex(this.isSelectedElement);return t===-1&&(t=e.findIndex(this.isFocusableElement)),t!==-1?e[t]:null}checkForNestedItems(){return this.slottedTreeItems.some(e=>n.isTreeItemElement(e)&&e.querySelector("[data-vvd-component='tree-item']"))}getVisibleNodes(){return T(this,"[data-vvd-component='tree-item']")}}d([l.attr({attribute:"render-collapsed-nodes"})],o.prototype,"renderCollapsedNodes");d([l.observable],o.prototype,"currentSelected");d([l.observable],o.prototype,"slottedTreeItems");const v=r=>g.classNames("control"),E=l.html` <template
+	${f.ref("treeView")}
+	${m.applyHostSemantics({role:"tree"})}
+	@keydown="${(r,e)=>r.handleKeyDown(e.event)}"
+	@focusin="${(r,e)=>r.handleFocus(e.event)}"
+	@focusout="${(r,e)=>r.handleBlur(e.event)}"
+	@click="${(r,e)=>r.handleClick(e.event)}"
+	@selected-change="${(r,e)=>r.handleSelectedChange(e.event)}"
+>
+	<div class="${v}">
+		<slot ${I.slotted("slottedTreeItems")}></slot>
+	</div>
+</template>`,y=l.defineVividComponent("tree-view",o,E,[n.treeItemDefinition],{styles:p}),N=l.createRegisterFunction(y);N();

package/tree-view/index.js

@@ -1,3 +1,171 @@
-import { r as registerTreeView } from '../shared/definition63.js';
-
-registerTreeView();
+import { V as h, D as m, a as g, o as u, h as p, c as I, d as b } from "../bundled/vivid-element.js";
+import { T as n, i as l, t as v } from "../bundled/definition22.js";
+import { H as y, a as E } from "../bundled/host-semantics.js";
+import { f as x, c as F, b as N, g as k, h as S, k as T, a as w } from "../bundled/key-codes.js";
+import { i as f } from "../bundled/dom.js";
+import { r as V } from "../bundled/ref.js";
+import { c as C } from "../bundled/class-names.js";
+import { s as $ } from "../bundled/slotted.js";
+const A = ".control{position:relative;display:flex;flex-direction:column;gap:4px}";
+var D = Object.defineProperty, c = (r, e, t, s) => {
+  for (var i = void 0, o = r.length - 1, d; o >= 0; o--)
+    (d = r[o]) && (i = d(e, t, i) || i);
+  return i && D(e, t, i), i;
+};
+function H(r, e) {
+  return f(r) ? Array.from(
+    r.querySelectorAll(e)
+  ).filter((i) => {
+    if (i.parentElement instanceof n) {
+      if (i.parentElement.expanded) return !0;
+    } else
+      return !0;
+    return !1;
+  }) : [];
+}
+class a extends y(h) {
+  constructor() {
+    super(...arguments), this.currentFocused = null, this.handleFocus = (e) => {
+      if (this.slottedTreeItems.length > 0) {
+        if (e.target === this) {
+          this.currentFocused !== null && n.focusItem(this.currentFocused);
+          return;
+        }
+        this.contains(e.target) && (this.setAttribute("tabindex", "-1"), this.currentFocused = e.target);
+      }
+    }, this.handleBlur = (e) => {
+      e.target instanceof HTMLElement && (e.relatedTarget === null || !this.contains(e.relatedTarget)) && this.setAttribute("tabindex", "0");
+    }, this.handleKeyDown = (e) => {
+      if (this.slottedTreeItems.length < 1)
+        return !0;
+      if (!e.defaultPrevented) {
+        const t = this.getVisibleNodes();
+        switch (e.key) {
+          case w:
+            t.length && n.focusItem(t[0]);
+            return;
+          case T:
+            t.length && n.focusItem(t[t.length - 1]);
+            return;
+          case S:
+            if (e.target && this.isFocusableElement(e.target)) {
+              const s = e.target;
+              s instanceof n && s.childItemLength() > 0 && s.expanded ? s.expanded = !1 : s instanceof n && s.parentElement instanceof n && n.focusItem(s.parentElement);
+            }
+            return !1;
+          case k:
+            if (e.target && this.isFocusableElement(e.target)) {
+              const s = e.target;
+              s instanceof n && s.childItemLength() > 0 && !s.expanded ? s.expanded = !0 : s instanceof n && s.childItemLength() > 0 && this.focusNextNode(1, e.target);
+            }
+            return;
+          case N:
+            e.target && this.isFocusableElement(e.target) && this.focusNextNode(1, e.target);
+            return;
+          case F:
+            e.target && this.isFocusableElement(e.target) && this.focusNextNode(-1, e.target);
+            return;
+          case x:
+            this.handleClick(e);
+            return;
+        }
+      }
+      return !0;
+    }, this.handleSelectedChange = (e) => {
+      if (!e.defaultPrevented) {
+        if (!(e.target instanceof Element) || !l(e.target))
+          return !0;
+        const t = e.target;
+        t.selected ? (this.currentSelected && this.currentSelected !== t && (this.currentSelected.selected = !1), this.currentSelected = t) : !t.selected && this.currentSelected === t && (this.currentSelected = null);
+        return;
+      }
+    }, this.setItems = () => {
+      const e = this.treeView.querySelector("[selected]");
+      this.currentSelected = e, (this.currentFocused === null || !this.contains(this.currentFocused)) && (this.currentFocused = this.getValidFocusableItem()), this.nested = this.checkForNestedItems(), this.getVisibleNodes().forEach((s) => {
+        l(s) && (s.nested = this.nested);
+      });
+    }, this.isFocusableElement = (e) => l(e), this.isSelectedElement = (e) => e.selected;
+  }
+  slottedTreeItemsChanged() {
+    this.$fastController.isConnected && this.setItems();
+  }
+  connectedCallback() {
+    super.connectedCallback(), this.setAttribute("tabindex", "0"), m.queueUpdate(() => {
+      this.setItems();
+    });
+  }
+  /**
+   * Handles click events bubbling up
+   *
+   *  @internal
+   */
+  handleClick(e) {
+    if (!e.defaultPrevented) {
+      if (!(e.target instanceof Element) || !l(e.target))
+        return !0;
+      const t = e.target;
+      t.disabled || (t.selected = !t.selected);
+      return;
+    }
+  }
+  /**
+   * Move focus to a tree item based on its offset from the provided item
+   */
+  focusNextNode(e, t) {
+    const s = this.getVisibleNodes();
+    if (s) {
+      const i = s[s.indexOf(t) + e];
+      f(i) && n.focusItem(i);
+    }
+  }
+  /**
+   * checks if there are any nested tree items
+   */
+  getValidFocusableItem() {
+    const e = this.getVisibleNodes();
+    let t = e.findIndex(this.isSelectedElement);
+    return t === -1 && (t = e.findIndex(this.isFocusableElement)), t !== -1 ? e[t] : null;
+  }
+  /**
+   * checks if there are any nested tree items
+   */
+  checkForNestedItems() {
+    return this.slottedTreeItems.some((e) => l(e) && e.querySelector("[data-vvd-component='tree-item']"));
+  }
+  getVisibleNodes() {
+    return H(this, "[data-vvd-component='tree-item']");
+  }
+}
+c([
+  g({ attribute: "render-collapsed-nodes" })
+], a.prototype, "renderCollapsedNodes");
+c([
+  u
+], a.prototype, "currentSelected");
+c([
+  u
+], a.prototype, "slottedTreeItems");
+const L = (r) => C("control"), P = p` <template
+	${V("treeView")}
+	${E({
+  role: "tree"
+})}
+	@keydown="${(r, e) => r.handleKeyDown(e.event)}"
+	@focusin="${(r, e) => r.handleFocus(e.event)}"
+	@focusout="${(r, e) => r.handleBlur(e.event)}"
+	@click="${(r, e) => r.handleClick(e.event)}"
+	@selected-change="${(r, e) => r.handleSelectedChange(e.event)}"
+>
+	<div class="${L}">
+		<slot ${$("slottedTreeItems")}></slot>
+	</div>
+</template>`, _ = b(
+  "tree-view",
+  a,
+  P,
+  [v],
+  {
+    styles: A
+  }
+), q = I(_);
+q();

package/{shared → unbundled}/affix.cjs

@@ -1,8 +1,7 @@
 'use strict';
 
-const definition = require('./definition28.cjs');
-const slotted = require('./slotted.cjs');
-const vividElement = require('./vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const icon_definition = require('../icon/definition.cjs');
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {
@@ -17,10 +16,10 @@ const AffixIcon = (Base) => {
   class AffixIconElement extends Base {
   }
   __decorateClass([
-    vividElement.attr
+    fastElement.attr
   ], AffixIconElement.prototype, "icon");
   __decorateClass([
-    vividElement.observable
+    fastElement.observable
   ], AffixIconElement.prototype, "iconSlottedContent");
   return AffixIconElement;
 };
@@ -32,7 +31,7 @@ const AffixIconWithTrailing = (Base) => {
     }
   }
   __decorateClass([
-    vividElement.attr({
+    fastElement.attr({
       mode: "boolean",
       attribute: "icon-trailing"
     })
@@ -46,21 +45,21 @@ const IconWrapper = {
 const IconAriaHidden = {
   Hidden: "true"};
 const affixIconTemplateFactory = (context) => {
-  const iconTag = context.tagFor(definition.Icon);
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
   return (icon, slottedState = IconWrapper.Span, ariaHidden = IconAriaHidden.Hidden, announcement = { label: "", announceOnUpdate: false }) => {
     if (!icon && !slottedState) {
-      return vividElement.html`<slot
+      return fastElement.html`<slot
 				name="icon"
 				aria-hidden="${() => ariaHidden}"
-				${slotted.slotted("iconSlottedContent")}
+				${fastElement.slotted("iconSlottedContent")}
 			></slot>`;
     }
     if (!icon && slottedState) {
       return null;
     }
-    const iconTemplate = vividElement.html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
+    const iconTemplate = fastElement.html`<${iconTag} :name="${() => icon}" :label="${() => announcement?.label || void 0}"></${iconTag}>`;
     const wrapperTag = slottedState ? "span" : "slot";
-    return vividElement.html`<${wrapperTag}
+    return fastElement.html`<${wrapperTag}
 					class="${() => slottedState ? "icon" : void 0}"
 					:name="${() => slottedState ? void 0 : "icon"}"
 					aria-hidden="${() => announcement?.label ? false : ariaHidden}"

package/{shared → unbundled}/affix.js

@@ -1,6 +1,5 @@
-import { I as Icon } from './definition28.js';
-import { s as slotted } from './slotted.js';
-import { a as attr, o as observable, h as html } from './vivid-element.js';
+import { attr, observable, slotted, html } from '@microsoft/fast-element';
+import { VwcIconElement as Icon } from '../icon/definition.js';
 
 var __defProp = Object.defineProperty;
 var __decorateClass = (decorators, target, key, kind) => {