@vonage/vivid 3.0.0-next.9 → 3.0.0-next.90

package/icon/index.js

@@ -1,28 +1,29 @@
 import { h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import { I as Icon } from '../shared/icon.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../shared/web.dom-collections.iterator.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
 import '../shared/_has.js';
 
-var css_248z = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  color: currentColor;\n  contain: strict;\n}\n.control.connotation-primary {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n}\n\n.control.connotation-announcement {\n  --connotation: var(--vvd-color-announcement);\n  --on-connotation: var(--vvd-color-on-announcement);\n}\n\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n\n.control.connotation-info {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n}\n\n.control[class*=connotation] {\n  color: var(--connotation);\n}\n\nsvg {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}\n\n/* Size */\n.control:not(.size-base-small):not(.size-base):not(.size-base-large) {\n  block-size: 1em;\n  inline-size: 1em;\n}\n\n.control.size-base-small {\n  block-size: 16px;\n  inline-size: 16px;\n}\n\n.control.size-base {\n  block-size: 24px;\n  inline-size: 24px;\n}\n\n.control.size-base-large {\n  block-size: 32px;\n  inline-size: 32px;\n}";
-styleInject(css_248z);
+var css_248z = ":host {\n  display: inline-block;\n  vertical-align: sub;\n}\n\n.control {\n  display: flex;\n  margin: unset;\n  block-size: var(--_icon-block-size);\n  color: currentColor;\n  contain: strict;\n  inline-size: var(--_icon-block-size);\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.control.connotation-information {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n}\n\n.control[class*=connotation] {\n  color: var(--_connotation-color-primary);\n}\n\nsvg {\n  margin: auto;\n  block-size: inherit;\n  inline-size: inherit;\n}\n\n/* Size */\n.control:not(.size-small):not(.size-medium):not(.size-large) {\n  --_icon-block-size: 1em;\n}\n\n.control.size-small {\n  --_icon-block-size: calc(calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1))) - calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 16)));\n}\n\n.control.size-medium {\n  --_icon-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 16));\n}\n\n.control.size-large {\n  --_icon-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1) - 8));\n}";
 
 let _ = t => t,
-    _t,
-    _t2;
-
+  _t,
+  _t2;
 const getClasses = ({
   connotation,
   size
 }) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`size-${size}`, Boolean(size)]);
-
 const iconTemplate = () => html(_t || (_t = _`
   <figure class="${0}">
 		${0}
   </figure>
-	`), getClasses, when(x => x.svg, x => html(_t2 || (_t2 = _`${0}`), x.svg)));
+	`), getClasses, when(x => isValidString(x.svg), x => html(_t2 || (_t2 = _`${0}`), x.svg)));
+function isValidString(value) {
+  return typeof value === 'string' && value.length > 0;
+}
 
 const vividIcon = Icon.compose({
   baseName: 'icon',

package/index.js

@@ -1,32 +1,69 @@
-export { vividTextAnchor } from './text-anchor/index.js';
-export { VIVIDBadge } from './badge/index.js';
-export { vividButton } from './button/index.js';
-export { V as VIVIDFocus } from './shared/index2.js';
-export { vividIcon } from './icon/index.js';
-export { VIVIDLayout } from './layout/index.js';
-export { VIVIDElevation } from './elevation/index.js';
-export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
+export { vividAccordion } from './accordion/index.js';
+export { vividAccordionItem } from './accordion-item/index.js';
+export { vividActionGroup } from './action-group/index.js';
+export { vividAvatar } from './avatar/index.js';
+export { vividBadge } from './badge/index.js';
+export { vividBanner } from './banner/index.js';
 export { vividBreadcrumb } from './breadcrumb/index.js';
-export { VIVIDSideDrawer } from './side-drawer/index.js';
+export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
+export { v as vividButton } from './shared/index2.js';
 export { vividCalendar } from './calendar/index.js';
-export { VIVIDPopup } from './popup/index.js';
+export { vividCalendarEvent } from './calendar-event/index.js';
+export { vividCard } from './card/index.js';
+export { vividCheckbox } from './checkbox/index.js';
+export { v as vividElevation } from './shared/index3.js';
+export { vividDialog } from './dialog/index.js';
+export { v as vividDivider } from './shared/index4.js';
+export { vividFab } from './fab/index.js';
+export { vividIcon } from './icon/index.js';
+export { vividLayout } from './layout/index.js';
+export { vividListboxOption } from './listbox-option/index.js';
+export { vividMenu } from './menu/index.js';
+export { v as vividMenuItem } from './shared/index6.js';
+export { vividNav } from './nav/index.js';
+export { vividNavDisclosure } from './nav-disclosure/index.js';
+export { vividNavItem } from './nav-item/index.js';
+export { vividNote } from './note/index.js';
+export { v as vividPopup } from './shared/index5.js';
+export { vividProgress } from './progress/index.js';
+export { vividProgressRing } from './progress-ring/index.js';
+export { vividRadio } from './radio/index.js';
+export { vividRadioGroup } from './radio-group/index.js';
+export { vividSideDrawer } from './side-drawer/index.js';
+export { vividTextfield } from './text-field/index.js';
+export { vividTextArea } from './text-area/index.js';
 export { vividTooltip } from './tooltip/index.js';
-export { vividBanner } from './banner/index.js';
-export { vividAccordionItem } from './accordion-item/index.js';
-export { vividAccordion } from './accordion/index.js';
 export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
-import './shared/text-anchor.js';
+import './shared/class-names.js';
+import './focus/index.js';
+import './shared/focus.js';
 import './shared/web.dom-collections.iterator.js';
+import './shared/export.js';
+import './shared/object-keys.js';
+import './shared/iterators.js';
 import './shared/affix.js';
 import './shared/icon.js';
+import './shared/to-string.js';
 import './shared/_has.js';
-import './shared/anchor.js';
 import './shared/apply-mixins.js';
-import './shared/aria-global.js';
-import './shared/text-anchor.template.js';
-import './shared/class-names.js';
-import './shared/style-inject.es.js';
+import './shared/focus2.js';
 import './shared/when.js';
-import './shared/breadcrumb-item.js';
+import './shared/enums.js';
+import './shared/button.js';
+import './shared/form-associated.js';
+import './shared/key-codes.js';
+import './shared/aria-global.js';
+import './shared/start-end.js';
+import './shared/ref.js';
 import './shared/slotted.js';
+import './shared/breadcrumb-item.js';
+import './shared/anchor.js';
+import './shared/text-anchor.template.js';
+import './shared/calendar-event.js';
 import './shared/es.object.assign.js';
+import './shared/aria.js';
+import './shared/direction.js';
+import './shared/text-anchor.js';
+import './shared/base-progress.js';
+import './shared/radio.js';
+import './shared/form-elements.js';

package/layout/index.js

@@ -1,53 +1,43 @@
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import { c as classNames } from '../shared/class-names.js';
 
 var AUTO_SIZING;
-
 (function (AUTO_SIZING) {
   AUTO_SIZING["Fit"] = "fit";
   AUTO_SIZING["Fill"] = "fill";
 })(AUTO_SIZING || (AUTO_SIZING = {}));
-
 class Layout extends FoundationElement {}
-
 __decorate([attr, __metadata("design:type", String)], Layout.prototype, "gutters", void 0);
-
 __decorate([attr({
   attribute: 'column-basis'
 }), __metadata("design:type", String)], Layout.prototype, "columnBasis", void 0);
-
 __decorate([attr({
   attribute: 'column-spacing'
 }), __metadata("design:type", String)], Layout.prototype, "columnSpacing", void 0);
-
 __decorate([attr({
   attribute: 'auto-sizing'
 }), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
 
-var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-base-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-base-small):not(.column-basis-base):not(.column-basis-base-large):not(.column-basis-block), .control.column-basis-base {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-base-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-base-small {\n  gap: 16px;\n}\n.control:not(.column-spacing-base-small):not(.column-spacing-base):not(.column-spacing-base-large), .control.column-spacing-base {\n  gap: 24px;\n}\n.control.column-spacing-base-large {\n  gap: 32px;\n}\n.control.gutters-base-small {\n  margin: 16px;\n}\n.control.gutters-base {\n  margin: 24px;\n}\n.control.gutters-base-large {\n  margin: 32px;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
-styleInject(css_248z);
+var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n  display: grid;\n  grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(160px, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(320px, 1fr)));\n}\n.control.column-basis-large {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(380px, 1fr)));\n}\n.control.column-basis-block {\n  grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n  gap: 16px;\n}\n.control.column-spacing-small-inline {\n  gap: 0 16px;\n}\n.control.column-spacing-small-block {\n  gap: 16px 0;\n}\n.control:not(.column-spacing-small):not(.column-spacing-small-inline):not(.column-spacing-small-block):not(.column-spacing-medium):not(.column-spacing-medium-inline):not(.column-spacing-medium-block):not(.column-spacing-large):not(.column-spacing-large-inline):not(.column-spacing-large-block), .control.column-spacing-medium {\n  gap: 24px;\n}\n.control.column-spacing-medium-inline {\n  gap: 0 24px;\n}\n.control.column-spacing-medium-block {\n  gap: 24px 0;\n}\n.control.column-spacing-large {\n  gap: 32px;\n}\n.control.column-spacing-large-inline {\n  gap: 0 32px;\n}\n.control.column-spacing-large-block {\n  gap: 32px 0;\n}\n.control.gutters-small {\n  margin: 16px;\n}\n.control.gutters-small-inline {\n  margin: 0 16px;\n}\n.control.gutters-small-block {\n  margin: 16px 0;\n}\n.control.gutters-medium {\n  margin: 24px;\n}\n.control.gutters-medium-inline {\n  margin: 0 24px;\n}\n.control.gutters-medium-block {\n  margin: 24px 0;\n}\n.control.gutters-large {\n  margin: 32px;\n}\n.control.gutters-large-inline {\n  margin: 0 32px;\n}\n.control.gutters-large-block {\n  margin: 32px 0;\n}\n.control.auto-sizing-fill {\n  --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n  --_auto-sizing: auto-fit;\n}";
 
 let _ = t => t,
-    _t;
-
+  _t;
 const getClasses = ({
   columnBasis,
   gutters,
   columnSpacing,
   autoSizing
 }) => classNames('control', [`column-basis-${columnBasis}`, Boolean(columnBasis)], [`gutters-${gutters}`, Boolean(gutters)], [`column-spacing-${columnSpacing}`, Boolean(columnSpacing)], [`auto-sizing-${autoSizing}`, Boolean(autoSizing)]);
-
 const layoutTemplate = () => html(_t || (_t = _`
         <div class="${0}">
 			<slot></slot>
 		</div>`), getClasses);
 
-const VIVIDLayout = Layout.compose({
+const vividLayout = Layout.compose({
   baseName: 'layout',
   template: layoutTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDLayout());
+designSystem.register(vividLayout());
 
-export { VIVIDLayout };
+export { vividLayout };

package/lib/accordion-item/accordion-item.d.ts

@@ -1,10 +1,10 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 export declare class AccordionItem extends FoundationElement {
-    heading: string;
+    heading?: string;
     headingLevel?: 2 | 3 | 4 | 5 | 6;
     noIndicator: boolean;
-    meta: string;
+    meta?: string;
     open: boolean;
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
     private emitEvent;

package/lib/accordion-item/index.d.ts

@@ -1,3 +1,4 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 import '../icon';
+import '../focus';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/action-group/action-group.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Shape } from '../enums.js';
+export declare type ActionGroupAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+declare type ActionGroupShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export declare class ActionGroup extends FoundationElement {
+    shape?: ActionGroupShape;
+    appearance?: ActionGroupAppearance;
+    tight: boolean;
+}
+export {};

package/lib/{sidenav-item/sidenav-item.template.d.ts → action-group/action-group.template.d.ts}

@@ -1,4 +1,4 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { SidenavItem } from './sidenav-item';
-export declare const SidenavItemTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<SidenavItem>;
+import type { ActionGroup } from './action-group';
+export declare const ActionGroupTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<ActionGroup>;

package/lib/{sidenav-item → action-group}/index.d.ts

@@ -1,3 +1,2 @@
-import '../icon';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const vividSidenavItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const vividActionGroup: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/avatar/avatar.d.ts

@@ -0,0 +1,15 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Connotation, Density, Shape } from '../enums.js';
+export declare type AvatarConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA>;
+export declare type AvatarAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined>;
+declare type AvatarShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+declare type AvatarDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
+export declare class Avatar extends FoundationElement {
+    connotation?: AvatarConnotation;
+    shape?: AvatarShape;
+    appearance?: AvatarAppearance;
+    density?: AvatarDensity;
+    icon?: string;
+    name?: string;
+}
+export {};

package/lib/avatar/avatar.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Avatar } from './avatar';
+export declare const AvatarTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Avatar>;

package/lib/avatar/index.d.ts

@@ -0,0 +1,3 @@
+import '../icon';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividAvatar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/badge/badge.d.ts

@@ -1,16 +1,14 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-import type { Appearance, Connotation, Shape, Size } from '../enums.js';
-declare type BadgeConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info>;
+import type { Appearance, Connotation, Shape } from '../enums.js';
+declare type BadgeConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information>;
 declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
 declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-declare type BadgeSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
 export declare class Badge extends FoundationElement {
     connotation?: BadgeConnotation;
     shape?: BadgeShape;
     appearance?: BadgeAppearance;
-    size?: BadgeSize;
-    text: string;
+    text?: string;
 }
 export interface Badge extends AffixIconWithTrailing {
 }

package/lib/badge/index.d.ts

@@ -1,3 +1,3 @@
 import '../icon';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const VIVIDBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const vividBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/banner/banner.d.ts

@@ -1,7 +1,7 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { Connotation } from '../enums';
 import { AffixIcon } from '../../shared/patterns/affix';
-export declare type BannerConnotation = Connotation.Info | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export declare type BannerConnotation = Connotation.Information | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
 export declare class Banner extends FoundationElement {
     #private;
     actionHref: string | undefined;

package/lib/banner/banner.template.d.ts

@@ -1,6 +1,4 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import '../button';
-import '../text-anchor';
 import type { Banner } from './banner';
 export declare const BannerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Banner>;

package/lib/banner/index.d.ts

@@ -1,2 +1,3 @@
+import '../button';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividBanner: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/breadcrumb/breadcrumb.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Breadcrumb } from './breadcrumb';
+export declare const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>>;

package/lib/breadcrumb-item/breadcrumb-item.d.ts

@@ -1,5 +1,5 @@
 import { BreadcrumbItem as FastBreadcrumbItem } from '@microsoft/fast-foundation';
 export declare class BreadcrumbItem extends FastBreadcrumbItem {
-    text: string;
+    text?: string;
     constructor();
 }

package/lib/breadcrumb-item/index.d.ts

@@ -1,3 +1,4 @@
 import '../icon';
+import '../focus';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/button/button.d.ts

@@ -1,16 +1,17 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
-import type { Appearance, Connotation, Shape, Size } from '../enums.js';
+import type { Appearance, Connotation, Density, Shape } from '../enums.js';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-declare type ButtonConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert>;
+declare type ButtonConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert>;
 export declare type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
 declare type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-declare type ButtonSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
+declare type ButtonDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
 export declare class Button extends FoundationButton {
     connotation?: ButtonConnotation;
     shape?: ButtonShape;
     appearance?: ButtonAppearance;
-    size?: ButtonSize;
-    label: string;
+    density?: ButtonDensity;
+    stacked: boolean;
+    label?: string;
 }
 export interface Button extends AffixIconWithTrailing {
 }

package/lib/button/index.d.ts

@@ -1,21 +1,4 @@
 import '../icon';
 import '../focus';
-import { Button as FastButton } from '@microsoft/fast-foundation';
-import { Button } from './button';
-export declare const vividButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
-    baseName: string;
-    baseClass: typeof FastButton;
-    template: any;
-    styles: import("@microsoft/fast-element").ComposableStyles;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
-    baseName: string;
-    baseClass: typeof FastButton;
-    template: any;
-    styles: import("@microsoft/fast-element").ComposableStyles;
-    shadowOptions: {
-        delegatesFocus: true;
-    };
-}, typeof Button>;
+import { type FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/calendar/calendar.d.ts

@@ -1,11 +1,13 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class Calendar extends FoundationElement {
+    #private;
     datetime?: Date | string;
     startDay?: 'sunday' | 'monday';
     locales?: string | string[] | undefined;
     hour12: boolean;
     getEventContext: (this: Calendar, e: KeyboardEvent | MouseEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
+    private getCalendarEventContainingCell;
     private arrowKeysInteractions;
-    private moveTo;
+    private activateElement;
     onKeydown({ key }: KeyboardEvent): boolean;
 }

package/lib/calendar/index.d.ts

@@ -1,3 +1,2 @@
-import '../elevation';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividCalendar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/calendar-event/calendar-event.d.ts

@@ -0,0 +1,14 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Connotation } from '../enums';
+declare type CalendarEventConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Information | Connotation.Announcement>;
+declare type CalendarEventAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
+export declare class CalendarEvent extends FoundationElement {
+    heading?: string;
+    description?: string;
+    connotation?: CalendarEventConnotation;
+    appearance?: CalendarEventAppearance;
+    overlapCount?: number;
+    start?: number;
+    duration?: number;
+}
+export {};

package/lib/calendar-event/calendar-event.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { CalendarEvent } from './calendar-event';
+export declare const CalendarEventTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<CalendarEvent>;

package/lib/calendar-event/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividCalendarEvent: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/card/card.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Card extends FoundationElement {
+    headline?: string;
+    subtitle?: string;
+    text?: string;
+    icon?: string;
+    elevation?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
+    graphicSlottedContent?: HTMLElement[];
+    hasMetaSlottedContent?: HTMLElement[];
+}

package/lib/{text/text.template.d.ts → card/card.template.d.ts}

@@ -1,4 +1,4 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Text } from './text';
-export declare const TextTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Text>;
+import type { Card } from './card';
+export declare const CardTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Card>;

package/lib/card/index.d.ts

@@ -0,0 +1,4 @@
+import '../elevation';
+import '../icon';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/checkbox/checkbox.d.ts

@@ -0,0 +1,5 @@
+import { Checkbox as FastCheckbox } from '@microsoft/fast-foundation';
+export declare const keySpace: ' ';
+export declare class Checkbox extends FastCheckbox {
+    label?: string;
+}

package/lib/checkbox/checkbox.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { CheckboxOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { Checkbox } from './checkbox';
+export declare const CheckboxTemplate: FoundationElementTemplate<ViewTemplate<Checkbox>, CheckboxOptions>;

package/lib/checkbox/index.d.ts

@@ -0,0 +1,4 @@
+import '../icon';
+import '../focus';
+import type { CheckboxOptions } from '@microsoft/fast-foundation';
+export declare const vividCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<CheckboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/components.d.ts

@@ -1,16 +1,35 @@
-export * from './text-anchor';
+export * from './accordion';
+export * from './accordion-item';
+export * from './action-group';
+export * from './avatar';
 export * from './badge';
+export * from './banner';
+export * from './breadcrumb';
+export * from './breadcrumb-item';
 export * from './button';
-export * from './focus';
+export * from './calendar';
+export * from './calendar-event';
+export * from './card';
+export * from './checkbox';
+export * from './elevation';
+export * from './dialog';
+export * from './divider';
+export * from './fab';
 export * from './icon';
 export * from './layout';
-export * from './elevation';
-export * from './breadcrumb-item';
-export * from './breadcrumb';
-export * from './side-drawer';
-export * from './calendar';
+export * from './listbox-option';
+export * from './menu';
+export * from './menu-item';
+export * from './nav';
+export * from './nav-disclosure';
+export * from './nav-item';
+export * from './note';
 export * from './popup';
+export * from './progress';
+export * from './progress-ring';
+export * from './radio';
+export * from './radio-group';
+export * from './side-drawer';
+export * from './text-field';
+export * from './text-area';
 export * from './tooltip';
-export * from './banner';
-export * from './accordion-item';
-export * from './accordion';

package/lib/dialog/dialog.d.ts

@@ -0,0 +1,20 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Dialog extends FoundationElement {
+    #private;
+    open: boolean;
+    icon?: string;
+    text?: string;
+    headline?: string;
+    ariaLabelledBy: string | null;
+    ariaLabel: string | null;
+    ariaDescribedBy: string | null;
+    set returnValue(value: string);
+    get returnValue(): string;
+    get modal(): boolean;
+    openChanged(oldValue: boolean, newValue: boolean): void;
+    close(): void;
+    show(): void;
+    showModal(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+}

package/lib/dialog/dialog.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Dialog } from './dialog';
+export declare const DialogTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Dialog>;

package/lib/dialog/index.d.ts

@@ -0,0 +1,5 @@
+import '../icon';
+import '../button';
+import '../elevation';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/divider/divider.d.ts

@@ -0,0 +1,3 @@
+import { Divider as FoundationDivider } from '@microsoft/fast-foundation';
+export declare class Divider extends FoundationDivider {
+}

package/lib/divider/divider.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import type { Divider } from './divider';
+export declare const DividerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Divider>;

package/lib/divider/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

package/lib/elevation/elevation.d.ts

@@ -1,4 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class Elevation extends FoundationElement {
     dp?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
+    noShadow?: boolean;
 }

package/lib/elevation/index.d.ts

@@ -1,2 +1,2 @@
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const VIVIDElevation: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
+export declare const vividElevation: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;