@vonage/vivid 4.31.0 → 5.1.0

package/{shared/definition2.cjs → accordion/definition.cjs}

@@ -1,11 +1,11 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition.cjs');
-const keyCodes = require('./key-codes.cjs');
-const numbers = require('./numbers.cjs');
-const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const accordionItem_definition = require('../accordion-item/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 
@@ -44,7 +44,7 @@ class Accordion extends vividElement.VividElement {
       this.accordionIds = this.getItemIds();
       this.activeid = this.accordionIds[this.activeItemIndex];
       this.accordionItems.forEach((item, index) => {
-        if (item instanceof definition.AccordionItem) {
+        if (item instanceof accordionItem_definition.VwcAccordionItemElement) {
           item.addEventListener("change", this.activeItemChange);
           if (this.isSingleExpandMode()) {
             const expandedItem = this.findExpandedItem();
@@ -101,18 +101,18 @@ class Accordion extends vividElement.VividElement {
       }
       this.accordionIds = this.getItemIds();
       switch (event.key) {
-        case keyCodes.keyArrowUp:
+        case fastWebUtilities.keyArrowUp:
           event.preventDefault();
           this.adjust(event.target, -1);
           break;
-        case keyCodes.keyArrowDown:
+        case fastWebUtilities.keyArrowDown:
           event.preventDefault();
           this.adjust(event.target, 1);
           break;
-        case keyCodes.keyHome:
+        case fastWebUtilities.keyHome:
           this.focusItem(0);
           break;
-        case keyCodes.keyEnd:
+        case fastWebUtilities.keyEnd:
           this.focusItem(this.accordionItems.length - 1);
           break;
       }
@@ -150,7 +150,7 @@ class Accordion extends vividElement.VividElement {
   }
   adjust(item, adjustment) {
     this.focusItem(
-      numbers.wrapInBounds(
+      fastWebUtilities.wrapInBounds(
         0,
         this.accordionItems.length - 1,
         this.accordionItems.indexOf(item) + adjustment
@@ -159,7 +159,7 @@ class Accordion extends vividElement.VividElement {
   }
   focusItem(index) {
     const element = this.accordionItems[index];
-    if (element instanceof definition.AccordionItem) {
+    if (element instanceof accordionItem_definition.VwcAccordionItemElement) {
       element.expandbutton.focus();
     }
   }
@@ -172,17 +172,17 @@ class Accordion extends vividElement.VividElement {
   }
 }
 __decorateClass([
-  vividElement.attr({ attribute: "expand-mode" })
+  fastElement.attr({ attribute: "expand-mode" })
 ], Accordion.prototype, "expandmode");
 // @ts-expect-error Type is incorrectly non-optional
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Accordion.prototype, "accordionItems");
 
-const getClasses = (_) => classNames.classNames("base");
-const AccordionTemplate = vividElement.html`
+const getClasses = (_) => fastWebUtilities.classNames("base");
+const AccordionTemplate = fastElement.html`
 	<div class="${getClasses}">
-		<slot ${slotted.slotted({ property: "accordionItems", filter: slotted.elements() })}></slot>
+		<slot ${fastElement.slotted({ property: "accordionItems", filter: fastElement.elements() })}></slot>
 	</div>
 `;
 
@@ -194,14 +194,14 @@ const accordionDefinition = vividElement.defineVividComponent(
   "accordion",
   Accordion,
   AccordionTemplate,
-  [definition.accordionItemDefinition],
+  [accordionItem_definition.accordionItemDefinition],
   {
     styles
   }
 );
 const registerAccordion = vividElement.createRegisterFunction(accordionDefinition);
 
-exports.Accordion = Accordion;
 exports.AccordionExpandMode = AccordionExpandMode;
+exports.VwcAccordionElement = Accordion;
 exports.accordionDefinition = accordionDefinition;
 exports.registerAccordion = registerAccordion;

package/{shared/definition2.js → accordion/definition.js}

@@ -1,9 +1,7 @@
-import { V as VividElement, a as attr, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { A as AccordionItem, a as accordionItemDefinition } from './definition.js';
-import { d as keyEnd, g as keyHome, f as keyArrowDown, e as keyArrowUp } from './key-codes.js';
-import { w as wrapInBounds } from './numbers.js';
-import { s as slotted, e as elements } from './slotted.js';
-import { c as classNames } from './class-names.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { VwcAccordionItemElement as AccordionItem, accordionItemDefinition } from '../accordion-item/definition.js';
+import { attr, observable, slotted, elements, html } from '@microsoft/fast-element';
+import { keyEnd, keyHome, keyArrowDown, keyArrowUp, wrapInBounds, classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
 
@@ -199,4 +197,4 @@ const accordionDefinition = defineVividComponent(
 );
 const registerAccordion = createRegisterFunction(accordionDefinition);
 
-export { AccordionExpandMode as A, accordionDefinition as a, Accordion as b, registerAccordion as r };
+export { AccordionExpandMode, Accordion as VwcAccordionElement, accordionDefinition, registerAccordion };

package/accordion/index.cjs

@@ -1,5 +1,5 @@
-'use strict';
-
-const definition = require('../shared/definition2.cjs');
-
-definition.registerAccordion();
+"use strict";const n=require("../bundled/vivid-element.cjs"),c=require("../bundled/definition.cjs"),r=require("../bundled/key-codes.cjs"),u=require("../bundled/numbers.cjs"),l=require("../bundled/slotted.cjs"),f=require("../bundled/class-names.cjs"),p=".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";var g=Object.defineProperty,I=(o,e,t,i)=>{for(var s=void 0,d=o.length-1,m;d>=0;d--)(m=o[d])&&(s=m(e,t,s)||s);return s&&g(e,t,s),s};const a={single:"single",multi:"multi"};class h extends n.VividElement{constructor(){super(...arguments),this.expandmode=a.single,this.activeItemIndex=0,this.change=()=>{this.$emit("change",this.activeid)},this.setItems=()=>{this.accordionItems.length!==0&&(this.accordionIds=this.getItemIds(),this.activeid=this.accordionIds[this.activeItemIndex],this.accordionItems.forEach((e,t)=>{e instanceof c.AccordionItem&&(e.addEventListener("change",this.activeItemChange),this.isSingleExpandMode()&&(this.findExpandedItem()===null&&t===0?e.expanded=!0:e!==this.findExpandedItem()?e.expanded=!1:e.expanded=!0));const i=this.accordionIds[t];e.setAttribute("id",typeof i!="string"?`accordion-${t+1}`:i),e.addEventListener("keydown",this.handleItemKeyDown)}),this.isSingleExpandMode()&&(this.findExpandedItem()??this.accordionItems[0]).setAttribute("aria-disabled","true"))},this.removeItemListeners=e=>{e.forEach(t=>{t.removeEventListener("change",this.activeItemChange),t.removeEventListener("keydown",this.handleItemKeyDown)})},this.activeItemChange=e=>{if(e.defaultPrevented||e.target!==e.currentTarget)return;e.preventDefault();const t=e.target;this.activeid=t.getAttribute("id"),this.isSingleExpandMode()&&(this.resetItems(),t.expanded=!0,t.setAttribute("aria-disabled","true"),this.accordionItems.forEach(i=>{!i.hasAttribute("disabled")&&i.id!==this.activeid&&i.removeAttribute("aria-disabled")})),this.activeItemIndex=Array.from(this.accordionItems).indexOf(t),this.change()},this.handleItemKeyDown=e=>{if(e.target===e.currentTarget)switch(this.accordionIds=this.getItemIds(),e.key){case r.keyArrowUp:e.preventDefault(),this.adjust(e.target,-1);break;case r.keyArrowDown:e.preventDefault(),this.adjust(e.target,1);break;case r.keyHome:this.focusItem(0);break;case r.keyEnd:this.focusItem(this.accordionItems.length-1);break}}}accordionItemsChanged(e){this.$fastController.isConnected&&(this.removeItemListeners(e),this.setItems())}findExpandedItem(){for(let e=0;e<this.accordionItems.length;e++)if(this.accordionItems[e].hasAttribute("expanded")===!0)return this.accordionItems[e];return null}resetItems(){this.accordionItems.forEach(e=>{e.expanded=!1})}getItemIds(){return this.accordionItems.map(e=>e.getAttribute("id"))}isSingleExpandMode(){return this.expandmode!==a.multi}adjust(e,t){this.focusItem(u.wrapInBounds(0,this.accordionItems.length-1,this.accordionItems.indexOf(e)+t))}focusItem(e){const t=this.accordionItems[e];t instanceof c.AccordionItem&&t.expandbutton.focus()}closeAll(){this.expandmode===a.multi&&this.accordionItems.forEach(e=>{e.expanded=!1})}}I([n.attr({attribute:"expand-mode"})],h.prototype,"expandmode");I([n.observable],h.prototype,"accordionItems");const x=o=>f.classNames("base"),b=n.html`
+	<div class="${x}">
+		<slot ${l.slotted({property:"accordionItems",filter:l.elements()})}></slot>
+	</div>
+`,v=n.defineVividComponent("accordion",h,b,[c.accordionItemDefinition],{styles:p}),E=n.createRegisterFunction(v);E();

package/accordion/index.js

@@ -1,3 +1,129 @@
-import { r as registerAccordion } from '../shared/definition2.js';
-
-registerAccordion();
+import { V as m, a as l, o as I, h as f, c as p, d as u } from "../bundled/vivid-element.js";
+import { A as c, a as g } from "../bundled/definition.js";
+import { k as x, a as b, b as v, c as E } from "../bundled/key-codes.js";
+import { w as y } from "../bundled/numbers.js";
+import { s as A, e as k } from "../bundled/slotted.js";
+import { c as w } from "../bundled/class-names.js";
+const C = ".base{display:flex;box-sizing:border-box;flex-direction:column}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
+var D = Object.defineProperty, h = (o, e, t, s) => {
+  for (var i = void 0, a = o.length - 1, d; a >= 0; a--)
+    (d = o[a]) && (i = d(e, t, i) || i);
+  return i && D(e, t, i), i;
+};
+const n = {
+  /**
+   * Designates only a single AccordionItem can be open a time.
+   */
+  single: "single",
+  /**
+   * Designates multiple AccordionItems can be open simultaneously.
+   */
+  multi: "multi"
+};
+class r extends m {
+  constructor() {
+    super(...arguments), this.expandmode = n.single, this.activeItemIndex = 0, this.change = () => {
+      this.$emit("change", this.activeid);
+    }, this.setItems = () => {
+      this.accordionItems.length !== 0 && (this.accordionIds = this.getItemIds(), this.activeid = this.accordionIds[this.activeItemIndex], this.accordionItems.forEach((e, t) => {
+        e instanceof c && (e.addEventListener("change", this.activeItemChange), this.isSingleExpandMode() && (this.findExpandedItem() === null && t === 0 ? e.expanded = !0 : e !== this.findExpandedItem() ? e.expanded = !1 : e.expanded = !0));
+        const s = this.accordionIds[t];
+        e.setAttribute(
+          "id",
+          typeof s != "string" ? `accordion-${t + 1}` : s
+        ), e.addEventListener("keydown", this.handleItemKeyDown);
+      }), this.isSingleExpandMode() && (this.findExpandedItem() ?? this.accordionItems[0]).setAttribute("aria-disabled", "true"));
+    }, this.removeItemListeners = (e) => {
+      e.forEach((t) => {
+        t.removeEventListener("change", this.activeItemChange), t.removeEventListener("keydown", this.handleItemKeyDown);
+      });
+    }, this.activeItemChange = (e) => {
+      if (e.defaultPrevented || e.target !== e.currentTarget)
+        return;
+      e.preventDefault();
+      const t = e.target;
+      this.activeid = t.getAttribute("id"), this.isSingleExpandMode() && (this.resetItems(), t.expanded = !0, t.setAttribute("aria-disabled", "true"), this.accordionItems.forEach((s) => {
+        !s.hasAttribute("disabled") && s.id !== this.activeid && s.removeAttribute("aria-disabled");
+      })), this.activeItemIndex = Array.from(this.accordionItems).indexOf(
+        t
+      ), this.change();
+    }, this.handleItemKeyDown = (e) => {
+      if (e.target === e.currentTarget)
+        switch (this.accordionIds = this.getItemIds(), e.key) {
+          case E:
+            e.preventDefault(), this.adjust(e.target, -1);
+            break;
+          case v:
+            e.preventDefault(), this.adjust(e.target, 1);
+            break;
+          case b:
+            this.focusItem(0);
+            break;
+          case x:
+            this.focusItem(this.accordionItems.length - 1);
+            break;
+        }
+    };
+  }
+  /**
+   * @internal
+   */
+  accordionItemsChanged(e) {
+    this.$fastController.isConnected && (this.removeItemListeners(e), this.setItems());
+  }
+  findExpandedItem() {
+    for (let e = 0; e < this.accordionItems.length; e++)
+      if (this.accordionItems[e].hasAttribute("expanded") === !0)
+        return this.accordionItems[e];
+    return null;
+  }
+  resetItems() {
+    this.accordionItems.forEach((e) => {
+      e.expanded = !1;
+    });
+  }
+  getItemIds() {
+    return this.accordionItems.map((e) => e.getAttribute("id"));
+  }
+  isSingleExpandMode() {
+    return this.expandmode !== n.multi;
+  }
+  adjust(e, t) {
+    this.focusItem(
+      y(
+        0,
+        this.accordionItems.length - 1,
+        this.accordionItems.indexOf(e) + t
+      )
+    );
+  }
+  focusItem(e) {
+    const t = this.accordionItems[e];
+    t instanceof c && t.expandbutton.focus();
+  }
+  closeAll() {
+    this.expandmode === n.multi && this.accordionItems.forEach((e) => {
+      e.expanded = !1;
+    });
+  }
+}
+h([
+  l({ attribute: "expand-mode" })
+], r.prototype, "expandmode");
+h([
+  I
+], r.prototype, "accordionItems");
+const L = (o) => w("base"), M = f`
+	<div class="${L}">
+		<slot ${A({ property: "accordionItems", filter: k() })}></slot>
+	</div>
+`, _ = u(
+  "accordion",
+  r,
+  M,
+  [g],
+  {
+    styles: C
+  }
+), $ = p(_);
+$();

package/accordion-item/definition.cjs

@@ -0,0 +1,145 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const icon_definition = require('../icon/definition.cjs');
+const fastElement = require('@microsoft/fast-element');
+const affix = require('../unbundled/affix.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+
+const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-accordion-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-accordion-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-accordion-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+
+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 AccordionItem extends affix.AffixIconWithTrailing(vividElement.VividElement) {
+  constructor() {
+    super(...arguments);
+    this.headinglevel = 2;
+    this.expanded = false;
+    this.noIndicator = false;
+    /**
+     * @internal
+     */
+    this.clickHandler = () => {
+      this.expanded = !this.expanded;
+      this.change();
+    };
+    this.change = () => {
+      this.$emit("change");
+    };
+  }
+}
+__decorateClass([
+  fastElement.attr({
+    attribute: "heading-level",
+    mode: "fromView",
+    converter: fastElement.nullableNumberConverter
+  })
+], AccordionItem.prototype, "headinglevel");
+__decorateClass([
+  fastElement.attr
+], AccordionItem.prototype, "appearance");
+__decorateClass([
+  fastElement.attr({ mode: "boolean" })
+], AccordionItem.prototype, "expanded");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  fastElement.attr
+], AccordionItem.prototype, "id");
+__decorateClass([
+  fastElement.attr
+], AccordionItem.prototype, "heading");
+__decorateClass([
+  fastElement.observable
+], AccordionItem.prototype, "_headingSlottedContent");
+__decorateClass([
+  fastElement.attr({ mode: "boolean", attribute: "no-indicator" })
+], AccordionItem.prototype, "noIndicator");
+__decorateClass([
+  fastElement.attr
+], AccordionItem.prototype, "meta");
+__decorateClass([
+  fastElement.observable
+], AccordionItem.prototype, "_metaSlottedContent");
+__decorateClass([
+  fastElement.attr
+], AccordionItem.prototype, "size");
+
+const getClasses = ({ appearance, size }) => fastWebUtilities.classNames(
+  "heading-button",
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`size-${size}`, Boolean(size)]
+);
+const header = (context, hTag) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return fastElement.html`
+		<${hTag} class="heading-container">
+			<button
+				class="${getClasses}"
+				id="${(x) => x.id}"
+				aria-expanded="${(x) => x.expanded}"
+				aria-controls="${(x) => x.id}-panel"
+				@click="${(x) => x.clickHandler()}"
+				${fastElement.ref("expandbutton")}
+			>
+
+				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, affix.IconWrapper.Slot) : null}
+
+				<span class="heading-content">
+					<slot name="heading" ${fastElement.slotted("_headingSlottedContent")}></slot>
+					${fastElement.when(
+    (x) => x.heading && !x._headingSlottedContent?.length,
+    fastElement.html`${(x) => x.heading}`
+  )}
+				</span>
+
+				<span class="meta">
+					<slot name="meta" ${fastElement.slotted("_metaSlottedContent")}></slot>
+					${fastElement.when((x) => x.meta && !x._metaSlottedContent?.length, fastElement.html`${(x) => x.meta}`)}
+				</span>
+
+				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
+				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(
+    x.expanded ? "chevron-up-line" : "chevron-down-line"
+  ) : null}
+
+			</button>
+		</${hTag}>
+	`;
+};
+const AccordionItemTemplate = (context) => fastElement.html`
+	${(x) => header(context, "h" + x.headinglevel)}
+	<div
+		id="${(x) => x.id}-panel"
+		aria-labelledby="${(x) => x.id}"
+		role="region"
+		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
+	>
+		<slot></slot>
+	</div>
+`;
+
+const accordionItemDefinition = vividElement.defineVividComponent(
+  "accordion-item",
+  AccordionItem,
+  AccordionItemTemplate,
+  [icon_definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerAccordionItem = vividElement.createRegisterFunction(
+  accordionItemDefinition
+);
+
+exports.VwcAccordionItemElement = AccordionItem;
+exports.accordionItemDefinition = accordionItemDefinition;
+exports.registerAccordionItem = registerAccordionItem;

package/accordion-item/definition.js

@@ -0,0 +1,139 @@
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { iconDefinition } from '../icon/definition.js';
+import { attr, nullableNumberConverter, observable, html, ref, slotted, when } from '@microsoft/fast-element';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+
+const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.heading-button:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button:hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.heading-button.hover:where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button:active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.heading-button.active:where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-accordion-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-accordion-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-accordion-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
+
+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 AccordionItem extends AffixIconWithTrailing(VividElement) {
+  constructor() {
+    super(...arguments);
+    this.headinglevel = 2;
+    this.expanded = false;
+    this.noIndicator = false;
+    /**
+     * @internal
+     */
+    this.clickHandler = () => {
+      this.expanded = !this.expanded;
+      this.change();
+    };
+    this.change = () => {
+      this.$emit("change");
+    };
+  }
+}
+__decorateClass([
+  attr({
+    attribute: "heading-level",
+    mode: "fromView",
+    converter: nullableNumberConverter
+  })
+], AccordionItem.prototype, "headinglevel");
+__decorateClass([
+  attr
+], AccordionItem.prototype, "appearance");
+__decorateClass([
+  attr({ mode: "boolean" })
+], AccordionItem.prototype, "expanded");
+// @ts-expect-error Type is incorrectly non-optional
+__decorateClass([
+  attr
+], AccordionItem.prototype, "id");
+__decorateClass([
+  attr
+], AccordionItem.prototype, "heading");
+__decorateClass([
+  observable
+], AccordionItem.prototype, "_headingSlottedContent");
+__decorateClass([
+  attr({ mode: "boolean", attribute: "no-indicator" })
+], AccordionItem.prototype, "noIndicator");
+__decorateClass([
+  attr
+], AccordionItem.prototype, "meta");
+__decorateClass([
+  observable
+], AccordionItem.prototype, "_metaSlottedContent");
+__decorateClass([
+  attr
+], AccordionItem.prototype, "size");
+
+const getClasses = ({ appearance, size }) => classNames(
+  "heading-button",
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`size-${size}`, Boolean(size)]
+);
+const header = (context, hTag) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html`
+		<${hTag} class="heading-container">
+			<button
+				class="${getClasses}"
+				id="${(x) => x.id}"
+				aria-expanded="${(x) => x.expanded}"
+				aria-controls="${(x) => x.id}-panel"
+				@click="${(x) => x.clickHandler()}"
+				${ref("expandbutton")}
+			>
+
+				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
+
+				<span class="heading-content">
+					<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
+					${when(
+    (x) => x.heading && !x._headingSlottedContent?.length,
+    html`${(x) => x.heading}`
+  )}
+				</span>
+
+				<span class="meta">
+					<slot name="meta" ${slotted("_metaSlottedContent")}></slot>
+					${when((x) => x.meta && !x._metaSlottedContent?.length, html`${(x) => x.meta}`)}
+				</span>
+
+				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
+				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(
+    x.expanded ? "chevron-up-line" : "chevron-down-line"
+  ) : null}
+
+			</button>
+		</${hTag}>
+	`;
+};
+const AccordionItemTemplate = (context) => html`
+	${(x) => header(context, "h" + x.headinglevel)}
+	<div
+		id="${(x) => x.id}-panel"
+		aria-labelledby="${(x) => x.id}"
+		role="region"
+		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
+	>
+		<slot></slot>
+	</div>
+`;
+
+const accordionItemDefinition = defineVividComponent(
+  "accordion-item",
+  AccordionItem,
+  AccordionItemTemplate,
+  [iconDefinition],
+  {
+    styles
+  }
+);
+const registerAccordionItem = createRegisterFunction(
+  accordionItemDefinition
+);
+
+export { AccordionItem as VwcAccordionItemElement, accordionItemDefinition, registerAccordionItem };

package/accordion-item/index.cjs

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

package/accordion-item/index.js

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

package/{shared/definition3.cjs → action-group/definition.cjs}

@@ -1,8 +1,11 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const classNames = require('./class-names.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 const styles = ":host{display:inline-block}.base{--_connotation-color-primary: var(--vvd-action-group-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-intermediate: var(--vvd-action-group-accent-intermediate, var(--vvd-color-neutral-500));--_connotation-color-faint: var(--vvd-action-group-accent-faint, var(--vvd-color-neutral-50))}.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}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle}.base:before{position:absolute;z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";inset:0;pointer-events:none}.base:not(.tight){padding:4px;column-gap:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 
@@ -22,24 +25,24 @@ class ActionGroup extends delegatesAria.DelegatesAria(vividElement.VividElement)
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], ActionGroup.prototype, "shape");
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], ActionGroup.prototype, "appearance");
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     mode: "boolean"
   })
 ], ActionGroup.prototype, "tight");
 
-const getClasses = ({ appearance, shape, tight }) => classNames.classNames(
+const getClasses = ({ appearance, shape, tight }) => fastWebUtilities.classNames(
   "base",
   [`appearance-${appearance}`, Boolean(appearance)],
   [`shape-${shape}`, Boolean(shape)],
   ["tight", tight]
 );
-const ActionGroupTemplate = vividElement.html`<div
+const ActionGroupTemplate = fastElement.html`<div
 	class="${getClasses}"
 	${delegatesAria.delegateAria({
   role: (x) => x.role ? x.role : "group"
@@ -61,6 +64,6 @@ const registerActionGroup = vividElement.createRegisterFunction(
   actionGroupDefinition
 );
 
-exports.ActionGroup = ActionGroup;
+exports.VwcActionGroupElement = ActionGroup;
 exports.actionGroupDefinition = actionGroupDefinition;
 exports.registerActionGroup = registerActionGroup;