@vonage/vivid 5.15.0 → 5.16.0

package/accordion/index.js

@@ -1,140 +1,95 @@
-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;
+import { T as e, d as t, l as n, o as r, s as i, t as a } from "../bundled/vivid-element.js";
+import { r as o, t as s } from "../bundled/slotted.js";
+import "../bundled/definition2.js";
+import { t as c } from "../bundled/decorate.js";
+import { t as l } from "../bundled/class-names.js";
+import { i as u, s as d, t as f } from "../bundled/key-codes.js";
+import { r as p } from "../bundled/numbers.js";
+import { r as m, t as h } from "../bundled/definition4.js";
+//#region src/lib/accordion/accordion.scss?inline
+var g = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}", _ = {
+	single: "single",
+	multi: "multi"
+}, v = class extends a {
+	constructor(...e) {
+		super(...e), this.expandmode = _.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) => {
+				/* v8 ignore else -- @preserve */
+				e instanceof m && (e.addEventListener("change", this.activeItemChange), this.isSingleExpandMode() && (this.findExpandedItem() === null && t === 0 || e === this.findExpandedItem() ? e.expanded = !0 : e.expanded = !1));
+				let n = this.accordionIds[t];
+				e.setAttribute("id", typeof n == "string" ? n : `accordion-${t + 1}`), e.addEventListener("keydown", this.handleItemKeyDown);
+			}), this.isSingleExpandMode() && (this.findExpandedItem() ?? this.accordionItems[0]).setAttribute("aria-disabled", "true"));
+		}, this.removeItemListeners = (e) => {
+			e.forEach((e) => {
+				e.removeEventListener("change", this.activeItemChange), e.removeEventListener("keydown", this.handleItemKeyDown);
+			});
+		}, this.activeItemChange = (e) => {
+			if (e.defaultPrevented || e.target !== e.currentTarget) return;
+			e.preventDefault();
+			let t = e.target;
+			this.activeid = t.getAttribute("id"), this.isSingleExpandMode() && (this.resetItems(), t.expanded = !0, t.setAttribute("aria-disabled", "true"), this.accordionItems.forEach((e) => {
+				!e.hasAttribute("disabled") && e.id !== this.activeid && e.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 u:
+					e.preventDefault(), this.adjust(e.target, -1);
+					break;
+				case f:
+					e.preventDefault(), this.adjust(e.target, 1);
+					break;
+				case d:
+					this.focusItem(0);
+					break;
+				case "End":
+					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 !== _.multi;
+	}
+	adjust(e, t) {
+		this.focusItem(p(0, this.accordionItems.length - 1, this.accordionItems.indexOf(e) + t));
+	}
+	focusItem(e) {
+		let t = this.accordionItems[e];
+		/* v8 ignore else -- @preserve */
+		t instanceof m && t.expandbutton.focus();
+	}
+	closeAll() {
+		/* v8 ignore else -- @preserve */
+		this.expandmode === _.multi && this.accordionItems.forEach((e) => {
+			e.expanded = !1;
+		});
+	}
 };
-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 = () => {
-      if (this.accordionItems.length === 0)
-        return;
-      this.accordionIds = this.getItemIds(), this.activeid = this.accordionIds[this.activeItemIndex], this.accordionItems.forEach((e, t) => {
-        /* v8 ignore else -- @preserve */
-        if (e instanceof c) {
-          e.addEventListener("change", this.activeItemChange);
-          /* v8 ignore else -- @preserve */
-          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);
-      });
-      /* v8 ignore else -- @preserve */
-      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];
-    /* v8 ignore else -- @preserve */
-    t instanceof c && t.expandbutton.focus();
-  }
-  closeAll() {
-    /* v8 ignore else -- @preserve */
-    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>
+//#endregion
+//#region src/lib/accordion/index.ts
+c([n({ attribute: "expand-mode" })], v.prototype, "expandmode", void 0), c([e], v.prototype, "accordionItems", void 0), i(r("accordion", v, t`
+	<div class="${(e) => l("base")}">
+		<slot ${s({
+	property: "accordionItems",
+	filter: o()
+})}></slot>
 	</div>
-`, _ = u(
-  "accordion",
-  r,
-  M,
-  [g],
-  {
-    styles: C
-  }
-), $ = p(_);
-$();
+`, [h], { styles: g }))();
+//#endregion

package/accordion-item/definition.cjs

@@ -1,146 +1,6 @@
-'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(--focus-stroke-color, 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, hTagName) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const hTag = fastElement.html.partial(hTagName);
-  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;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+require("../unbundled/definition2.cjs");
+const require_definition$1 = require("../unbundled/definition3.cjs");
+exports.VwcAccordionItemElement = require_definition$1.AccordionItem;
+exports.accordionItemDefinition = require_definition$1.accordionItemDefinition;
+exports.registerAccordionItem = require_definition$1.registerAccordionItem;

package/accordion-item/definition.js

@@ -1,140 +1,3 @@
-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 { b 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(--focus-stroke-color, 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, hTagName) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const hTag = html.partial(hTagName);
-  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
-);
-
+import "../unbundled/definition2.js";
+import { n as registerAccordionItem, r as AccordionItem, t as accordionItemDefinition } from "../unbundled/definition3.js";
 export { AccordionItem as VwcAccordionItemElement, accordionItemDefinition, registerAccordionItem };

package/accordion-item/index.cjs

@@ -1 +1 @@
-"use strict";const e=require("../bundled/definition.cjs");e.registerAccordionItem();
+require(`../bundled/vivid-element.cjs`),require(`../bundled/definition2.cjs`),require(`../bundled/definition4.cjs`).n();

package/accordion-item/index.js

@@ -1,2 +1,6 @@
-import { r } from "../bundled/definition.js";
-r();
+import "../bundled/vivid-element.js";
+import "../bundled/definition2.js";
+import { n as e } from "../bundled/definition4.js";
+//#region src/lib/accordion-item/index.ts
+e();
+//#endregion

package/action-group/definition.cjs

@@ -1,69 +1,5 @@
-'use strict';
-
-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}";
-
-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 ActionGroup extends delegatesAria.DelegatesAria(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.tight = false;
-  }
-}
-__decorateClass([
-  fastElement.attr
-], ActionGroup.prototype, "shape");
-__decorateClass([
-  fastElement.attr
-], ActionGroup.prototype, "appearance");
-__decorateClass([
-  fastElement.attr({
-    mode: "boolean"
-  })
-], ActionGroup.prototype, "tight");
-
-const getClasses = ({ appearance, shape, tight }) => fastWebUtilities.classNames(
-  "base",
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["tight", tight]
-);
-const ActionGroupTemplate = fastElement.html`<div
-	class="${getClasses}"
-	${delegatesAria.delegateAria({
-  role: (x) => x.role ? x.role : "group"
-})}
->
-	<slot></slot>
-</div>`;
-
-const actionGroupDefinition = vividElement.defineVividComponent(
-  "action-group",
-  ActionGroup,
-  ActionGroupTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerActionGroup = vividElement.createRegisterFunction(
-  actionGroupDefinition
-);
-
-exports.VwcActionGroupElement = ActionGroup;
-exports.actionGroupDefinition = actionGroupDefinition;
-exports.registerActionGroup = registerActionGroup;
+Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+const require_definition = require("../unbundled/definition5.cjs");
+exports.VwcActionGroupElement = require_definition.ActionGroup;
+exports.actionGroupDefinition = require_definition.actionGroupDefinition;
+exports.registerActionGroup = require_definition.registerActionGroup;