chore: resolves conflicts

libs/components/src/index.ts

@@ -1,4 +1,3 @@
 export * from './lib/components';
 export * from './lib/enums';
-export * from './shared/design-system';
 export { setLocale } from './shared/localization';

libs/components/src/lib/accordion-item/accordion-item.spec.ts

@@ -1,8 +1,6 @@
 import { axe, elementUpdated, fixture } from '@vivid-nx/shared';
-import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { AccordionItem } from './accordion-item';
 import '.';
-import { accordionItemDefinition } from './definition';
 
 const COMPONENT_TAG = 'vwc-accordion-item';
 
@@ -21,9 +19,6 @@ describe('vwc-accordion-item', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-accordion-item', async () => {
-			expect(accordionItemDefinition()).toBeInstanceOf(
-				FoundationElementRegistry
-			);
 			expect(element).toBeInstanceOf(AccordionItem);
 			expect(element.expanded).toBeFalsy();
 			expect(element.icon).toBeUndefined();

libs/components/src/lib/accordion-item/accordion-item.template.ts

@@ -1,12 +1,12 @@
-import { html, ref, ViewTemplate, when } from '@microsoft/fast-element';
-import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import { html, ref, when } from '@microsoft/fast-element';
 import {
 	affixIconTemplateFactory,
 	IconWrapper,
 } from '../../shared/patterns/affix';
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import type { AccordionItem } from './accordion-item.js';
 
-const header = (context: ElementDefinitionContext, hTag: string) => {
+const header = (context: VividElementDefinitionContext, hTag: string) => {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	/* eslint-disable @typescript-eslint/indent */
@@ -40,10 +40,8 @@ const header = (context: ElementDefinitionContext, hTag: string) => {
 	`;
 };
 
-export const AccordionItemTemplate: (
-	context: ElementDefinitionContext
-) => ViewTemplate<AccordionItem> = (
-	context: ElementDefinitionContext
+export const AccordionItemTemplate = (
+	context: VividElementDefinitionContext
 ) => html<AccordionItem>`
 	${(x) => header(context, 'h' + x.headinglevel)}
 	<div

libs/components/src/lib/accordion-item/accordion-item.ts

@@ -1,8 +1,8 @@
 import { attr, nullableNumberConverter } from '@microsoft/fast-element';
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import type { Size } from '../enums.js';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 
 /**
  * Types of accordion size.
@@ -18,7 +18,7 @@ export type AccordionItemSize = Extract<Size, Size.Condensed | Size.Normal>;
  * @slot icon - Add an icon to the component.
  * @event {CustomEvent<undefined>} change - Fires a custom 'change' event when the button is invoked
  */
-export class AccordionItem extends FoundationElement {
+export class AccordionItem extends VividElement {
 	/**
 	 * Configures the {@link https://www.w3.org/TR/wai-aria-1.1/#aria-level | level} of the
 	 * heading element.

libs/components/src/lib/accordion-item/definition.ts

@@ -1,33 +1,28 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { registerFactory } from '../../shared/design-system';
-import { iconRegistries } from '../icon/definition';
+import { createRegisterFunction } from '../../shared/design-system/createRegisterFunction';
+import { iconDefinition } from '../icon/definition';
+import { defineVividComponent } from '../../shared/design-system/defineVividComponent';
 import styles from './accordion-item.scss?inline';
-
 import { AccordionItem } from './accordion-item';
 import { AccordionItemTemplate as template } from './accordion-item.template';
 
 /**
- *
  * @internal
  */
-export const accordionItemDefinition =
-	AccordionItem.compose<FoundationElementDefinition>({
-		baseName: 'accordion-item',
-		template: template as any,
+export const accordionItemDefinition = defineVividComponent(
+	'accordion-item',
+	AccordionItem,
+	template,
+	[iconDefinition],
+	{
 		styles,
-	});
-
-/**
- * @internal
- */
-export const accordionItemRegistries = [
-	accordionItemDefinition(),
-	...iconRegistries,
-];
+	}
+);
 
 /**
  * Registers the accordion item elements with the design system.
  *
  * @param prefix - the prefix to use for the component name
  */
-export const registerAccordionItem = registerFactory(accordionItemRegistries);
+export const registerAccordionItem = createRegisterFunction(
+	accordionItemDefinition
+);

libs/components/src/lib/accordion/accordion.spec.ts

@@ -1,7 +1,5 @@
 import { axe, elementUpdated, fixture } from '@vivid-nx/shared';
-import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import type { AccordionItem } from '../accordion-item/accordion-item';
-import { accordionDefinition } from './definition';
 import { Accordion } from './accordion';
 import '../accordion-item';
 import '.';
@@ -48,7 +46,6 @@ describe('vwc-accordion', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-accordion', async () => {
-			expect(accordionDefinition()).toBeInstanceOf(FoundationElementRegistry);
 			expect(element).toBeInstanceOf(Accordion);
 			expect(element.expandmode).toBe('single');
 		});

libs/components/src/lib/accordion/accordion.template.ts

@@ -1,18 +1,11 @@
 import { elements, html, slotted } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { Accordion } from './accordion';
 
 const getClasses = (_: Accordion) => classNames('base');
 
-/**
- * @public
- */
-export const AccordionTemplate: () => ViewTemplate<Accordion> =
-	() => html<Accordion>`
-		<div class="${getClasses}">
-			<slot
-				${slotted({ property: 'accordionItems', filter: elements() })}
-			></slot>
-		</div>
-	`;
+export const AccordionTemplate = html<Accordion>`
+	<div class="${getClasses}">
+		<slot ${slotted({ property: 'accordionItems', filter: elements() })}></slot>
+	</div>
+`;

libs/components/src/lib/accordion/accordion.ts

@@ -6,8 +6,8 @@ import {
 	keyHome,
 	wrapInBounds,
 } from '@microsoft/fast-web-utilities';
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { AccordionItem } from '../accordion-item/accordion-item';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 
 /**
  * Expand mode for {@link Accordion}
@@ -38,7 +38,7 @@ export type AccordionExpandMode =
  * @event {CustomEvent<string | null>} change - Fires a custom 'change' event when the active item changes
  * @slot - Default slot.
  */
-export class Accordion extends FoundationElement {
+export class Accordion extends VividElement {
 	/**
 	 * Controls the expand mode of the Accordion, either allowing
 	 * single or multiple item expansion.

libs/components/src/lib/accordion/definition.ts

@@ -1,35 +1,28 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { registerFactory } from '../../shared/design-system';
-import { accordionItemRegistries } from '../accordion-item/definition'; // cf https://github.com/Vonage/vivid-3/discussions/929
+import { createRegisterFunction } from '../../shared/design-system/createRegisterFunction';
+import { accordionItemDefinition } from '../accordion-item/definition';
+import { defineVividComponent } from '../../shared/design-system/defineVividComponent';
 import styles from './accordion.scss?inline';
-
 import { Accordion } from './accordion';
 import { AccordionTemplate as template } from './accordion.template';
 
 export type { AccordionExpandMode } from '@microsoft/fast-foundation';
 
 /**
- *
  * @internal
  */
-export const accordionDefinition =
-	Accordion.compose<FoundationElementDefinition>({
-		baseName: 'accordion',
-		template: template as any,
+export const accordionDefinition = defineVividComponent(
+	'accordion',
+	Accordion,
+	template,
+	[accordionItemDefinition],
+	{
 		styles,
-	});
-
-/**
- * @internal
- */
-export const accordionRegistries = [
-	accordionDefinition(),
-	...accordionItemRegistries,
-];
+	}
+);
 
 /**
  * Registers the accordion elements with the design system.
  *
  * @param prefix - the prefix to use for the component name
  */
-export const registerAccordion = registerFactory(accordionRegistries);
+export const registerAccordion = createRegisterFunction(accordionDefinition);

libs/components/src/lib/action-group/action-group.spec.ts

@@ -1,7 +1,5 @@
 import { axe, elementUpdated, fixture, getBaseElement } from '@vivid-nx/shared';
-import { FoundationElementRegistry } from '@microsoft/fast-foundation';
 import { ActionGroup } from './action-group';
-import { actionGroupDefinition } from './definition';
 import '.';
 
 const COMPONENT_TAG = 'vwc-action-group';
@@ -17,7 +15,6 @@ describe('vwc-action-group', () => {
 
 	describe('basic', () => {
 		it('should be initialized as a vwc-action-group', async () => {
-			expect(actionGroupDefinition()).toBeInstanceOf(FoundationElementRegistry);
 			expect(element).toBeInstanceOf(ActionGroup);
 			expect(element.shape).toEqual(undefined);
 			expect(element.appearance).toEqual(undefined);

libs/components/src/lib/action-group/action-group.template.ts

@@ -1,9 +1,4 @@
 import { html } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type {
-	ElementDefinitionContext,
-	FoundationElementDefinition,
-} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import type { ActionGroup } from './action-group';
 
@@ -21,10 +16,7 @@ const getClasses = ({ appearance, shape, tight }: ActionGroup) =>
  * @param context - element definition context
  * @public
  */
-export const ActionGroupTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<ActionGroup> = () => html` <div
+export const ActionGroupTemplate = html<ActionGroup>`<div
 	class="${getClasses}"
 	role="${(x) => (x.role ? x.role : 'group')}"
 	aria-label="${(x) => x.ariaLabel}"

libs/components/src/lib/action-group/action-group.ts

@@ -1,8 +1,6 @@
-//import { rovingIndex } from 'roving-ux';      // npm es6/common modules
-import { FoundationElement } from '@microsoft/fast-foundation';
-
 import { attr } from '@microsoft/fast-element';
 import type { Appearance, Shape } from '../enums.js';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 
 /**
  * Types of button appearance.
@@ -26,7 +24,7 @@ export type ActionGroupShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
  * @component action-group
  * @slot - Default slot.
  */
-export class ActionGroup extends FoundationElement {
+export class ActionGroup extends VividElement {
 	/**
 	 * The shape the ActionGroup should have.
 	 *

libs/components/src/lib/action-group/definition.ts

@@ -1,31 +1,29 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-import { registerFactory } from '../../shared/design-system';
+import { createRegisterFunction } from '../../shared/design-system/createRegisterFunction';
+import { defineVividComponent } from '../../shared/design-system/defineVividComponent';
 import styles from './action-group.scss?inline';
-
 import { ActionGroup } from './action-group';
 import { ActionGroupTemplate as template } from './action-group.template';
 
 export type { ActionGroupShape, ActionGroupAppearance } from './action-group';
 
 /**
- *
  * @internal
  */
-export const actionGroupDefinition =
-	ActionGroup.compose<FoundationElementDefinition>({
-		baseName: 'action-group',
-		template: template as any,
+export const actionGroupDefinition = defineVividComponent(
+	'action-group',
+	ActionGroup,
+	template,
+	[],
+	{
 		styles,
-	});
-
-/**
- * @internal
- */
-export const actionGroupRegistries = [actionGroupDefinition()];
+	}
+);
 
 /**
  * Registers the action-group elements with the design system.
  *
  * @param prefix - the prefix to use for the component name
  */
-export const registerActionGroup = registerFactory(actionGroupRegistries);
+export const registerActionGroup = createRegisterFunction(
+	actionGroupDefinition
+);

libs/components/src/lib/alert/alert.template.ts

@@ -1,16 +1,12 @@
 import { html, when } from '@microsoft/fast-element';
-import type { ViewTemplate } from '@microsoft/fast-element';
-import {
-	Button,
-	type ElementDefinitionContext,
-	type FoundationElementDefinition,
-} from '@microsoft/fast-foundation';
 import { classNames } from '@microsoft/fast-web-utilities';
 import { Elevation } from '../elevation/elevation';
 import {
 	affixIconTemplateFactory,
 	IconWrapper,
 } from '../../shared/patterns/affix';
+import { Button } from '../button/button';
+import type { VividElementDefinitionContext } from '../../shared/design-system/defineVividComponent';
 import type { Alert } from './alert';
 
 const getClasses = ({ connotation }: Alert) =>
@@ -24,7 +20,7 @@ const getControlClasses = ({ open, placement, strategy }: Alert) =>
 		[`strategy-${strategy}`, Boolean(strategy)]
 	);
 
-function renderIcon(context: ElementDefinitionContext) {
+function renderIcon(context: VividElementDefinitionContext) {
 	const affixIconTemplate = affixIconTemplateFactory(context);
 
 	return html`${(x) => affixIconTemplate(x.conditionedIcon, IconWrapper.Slot)}`;
@@ -42,16 +38,7 @@ function renderDismissButton(buttonTag: string) {
 		</${buttonTag}>`;
 }
 
-/**
- * The template for the Alert component.
- *
- * @param context - element definition context
- * @public
- */
-export const AlertTemplate: (
-	context: ElementDefinitionContext,
-	definition: FoundationElementDefinition
-) => ViewTemplate<Alert> = (context: ElementDefinitionContext) => {
+export const AlertTemplate = (context: VividElementDefinitionContext) => {
 	const elevationTag = context.tagFor(Elevation);
 	const buttonTag = context.tagFor(Button);
 

libs/components/src/lib/alert/alert.ts

@@ -1,10 +1,10 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
 import { attr, nullableNumberConverter } from '@microsoft/fast-element';
 import { Connotation } from '../enums';
 import { Localized } from '../../shared/patterns';
 import { AffixIcon } from '../../shared/patterns/affix';
 import { applyMixins } from '../../shared/foundation/utilities/apply-mixins';
 import { handleEscapeKeyAndStopPropogation } from '../../shared/dialog/index';
+import { VividElement } from '../../shared/foundation/vivid-element/vivid-element';
 
 export type AlertConnotation =
 	| Connotation.Accent
@@ -42,7 +42,7 @@ export type AlertStrategy = 'fixed' | 'static';
  * @event {CustomEvent<undefined>} open - Fired when the Alert is opened
  * @event {CustomEvent<undefined>} close - Fired when the Alert is closed
  */
-export class Alert extends FoundationElement {
+export class Alert extends VividElement {
 	/**
 	 * Allows setting a custom aria-label for the dismiss button.
 	 *