@vonage/vivid 5.15.1 → 5.16.0

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;

package/action-group/definition.js

@@ -1,63 +1,2 @@
-import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
-import { attr, html } from '@microsoft/fast-element';
-import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
-import { classNames } from '@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(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.tight = false;
-  }
-}
-__decorateClass([
-  attr
-], ActionGroup.prototype, "shape");
-__decorateClass([
-  attr
-], ActionGroup.prototype, "appearance");
-__decorateClass([
-  attr({
-    mode: "boolean"
-  })
-], ActionGroup.prototype, "tight");
-
-const getClasses = ({ appearance, shape, tight }) => classNames(
-  "base",
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`shape-${shape}`, Boolean(shape)],
-  ["tight", tight]
-);
-const ActionGroupTemplate = html`<div
-	class="${getClasses}"
-	${delegateAria({
-  role: (x) => x.role ? x.role : "group"
-})}
->
-	<slot></slot>
-</div>`;
-
-const actionGroupDefinition = defineVividComponent(
-  "action-group",
-  ActionGroup,
-  ActionGroupTemplate,
-  [],
-  {
-    styles
-  }
-);
-const registerActionGroup = createRegisterFunction(
-  actionGroupDefinition
-);
-
+import { n as registerActionGroup, r as ActionGroup, t as actionGroupDefinition } from "../unbundled/definition5.js";
 export { ActionGroup as VwcActionGroupElement, actionGroupDefinition, registerActionGroup };

package/action-group/index.cjs

@@ -1,6 +1,6 @@
-"use strict";const o=require("../bundled/vivid-element.cjs"),s=require("../bundled/delegates-aria.cjs"),p=require("../bundled/class-names.cjs"),v=':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 d=Object.defineProperty,l=(e,t,r,f)=>{for(var a=void 0,i=e.length-1,c;i>=0;i--)(c=e[i])&&(a=c(t,r,a)||a);return a&&d(t,r,a),a};class n extends s.DelegatesAria(o.VividElement){constructor(){super(...arguments),this.tight=!1}}l([o.attr],n.prototype,"shape");l([o.attr],n.prototype,"appearance");l([o.attr({mode:"boolean"})],n.prototype,"tight");const u=({appearance:e,shape:t,tight:r})=>p.classNames("base",[`appearance-${e}`,!!e],[`shape-${t}`,!!t],["tight",r]),g=o.html`<div
-	class="${u}"
-	${s.delegateAria({role:e=>e.role?e.role:"group"})}
+const e=require(`../bundled/vivid-element.cjs`),t=require(`../bundled/decorate.cjs`),n=require(`../bundled/class-names.cjs`),r=require(`../bundled/delegates-aria.cjs`);var i=`: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));--_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{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:"";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding: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}`,a=class extends r.t(e.t){constructor(...e){super(...e),this.tight=!1}};t.t([e.l],a.prototype,`shape`,void 0),t.t([e.l],a.prototype,`appearance`,void 0),t.t([e.l({mode:`boolean`})],a.prototype,`tight`,void 0);var o=e.d`<div
+	class="${({appearance:e,shape:t,tight:r})=>n.t(`base`,[`appearance-${e}`,!!e],[`shape-${t}`,!!t],[`tight`,r])}"
+	${r.n({role:e=>e.role?e.role:`group`})}
 >
 	<slot></slot>
-</div>`,b=o.defineVividComponent("action-group",n,g,[],{styles:v}),m=o.createRegisterFunction(b);m();
+</div>`,s=e.o(`action-group`,a,o,[],{styles:i});e.s(s)();

package/action-group/index.js

@@ -1,49 +1,19 @@
-import { V as c, a as i, h as p, c as v, d } from "../bundled/vivid-element.js";
-import { D as u, d as g } from "../bundled/delegates-aria.js";
-import { c as b } from "../bundled/class-names.js";
-const m = ':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 f = Object.defineProperty, s = (o, e, r, A) => {
-  for (var a = void 0, n = o.length - 1, l; n >= 0; n--)
-    (l = o[n]) && (a = l(e, r, a) || a);
-  return a && f(e, r, a), a;
+import { d as e, l as t, o as n, s as r, t as i } from "../bundled/vivid-element.js";
+import { t as a } from "../bundled/decorate.js";
+import { t as o } from "../bundled/class-names.js";
+import { n as s, t as c } from "../bundled/delegates-aria.js";
+//#region src/lib/action-group/action-group.scss?inline
+var l = ":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));--_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{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding: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}", u = class extends c(i) {
+	constructor(...e) {
+		super(...e), this.tight = !1;
+	}
 };
-class t extends u(c) {
-  constructor() {
-    super(...arguments), this.tight = !1;
-  }
-}
-s([
-  i
-], t.prototype, "shape");
-s([
-  i
-], t.prototype, "appearance");
-s([
-  i({
-    mode: "boolean"
-  })
-], t.prototype, "tight");
-const h = ({ appearance: o, shape: e, tight: r }) => b(
-  "base",
-  [`appearance-${o}`, !!o],
-  [`shape-${e}`, !!e],
-  ["tight", r]
-), _ = p`<div
-	class="${h}"
-	${g({
-  role: (o) => o.role ? o.role : "group"
-})}
+//#endregion
+//#region src/lib/action-group/index.ts
+a([t], u.prototype, "shape", void 0), a([t], u.prototype, "appearance", void 0), a([t({ mode: "boolean" })], u.prototype, "tight", void 0), r(n("action-group", u, e`<div
+	class="${({ appearance: e, shape: t, tight: n }) => o("base", [`appearance-${e}`, !!e], [`shape-${t}`, !!t], ["tight", n])}"
+	${s({ role: (e) => e.role ? e.role : "group" })}
 >
 	<slot></slot>
-</div>`, x = d(
-  "action-group",
-  t,
-  _,
-  [],
-  {
-    styles: m
-  }
-), y = v(
-  x
-);
-y();
+</div>`, [], { styles: l }))();
+//#endregion