@vonage/vivid 3.0.0-next.3 → 3.0.0-next.6

package/elevation/index.js

@@ -1,19 +1,12 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
-import '../shared/web.dom-collections.iterator.js';
+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';
 
-class Elevation extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.dp = 2;
-  }
+class Elevation extends FoundationElement {}
 
-}
+__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
 
-__decorate([attr, __metadata("design:type", Object)], Elevation.prototype, "dp", void 0);
-
-var css_248z = ".dp-0:not(.dp-2):not(.dp-4):not(.dp-8):not(.dp-12):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-0dp);\n  filter: var(--vvd-shadow-surface-0dp);\n}\n\n.dp-2:not(.dp-0):not(.dp-4):not(.dp-8):not(.dp-12):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-2dp);\n  filter: var(--vvd-shadow-surface-2dp);\n}\n\n.dp-4:not(.dp-0):not(.dp-2):not(.dp-8):not(.dp-12):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-4dp);\n  filter: var(--vvd-shadow-surface-4dp);\n}\n\n.dp-8:not(.dp-0):not(.dp-2):not(.dp-4):not(.dp-12):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-8dp);\n  filter: var(--vvd-shadow-surface-8dp);\n}\n\n.dp-12:not(.dp-0):not(.dp-2):not(.dp-4):not(.dp-8):not(.dp-16):not(.dp-24) {\n  background-color: var(--vvd-color-surface-12dp);\n  filter: var(--vvd-shadow-surface-12dp);\n}\n\n.dp-16:not(.dp-0):not(.dp-2):not(.dp-4):not(.dp-8):not(.dp-12):not(.dp-24) {\n  background-color: var(--vvd-color-surface-16dp);\n  filter: var(--vvd-shadow-surface-16dp);\n}\n\n.dp-24:not(.dp-0):not(.dp-2):not(.dp-4):not(.dp-8):not(.dp-12):not(.dp-16) {\n  background-color: var(--vvd-color-surface-24dp);\n  filter: var(--vvd-shadow-surface-24dp);\n}\n\n.control {\n  --elevation-border-radius: 6px;\n  border-radius: var(--elevation-border-radius);\n}";
+var css_248z = ".control.dp-0 ::slotted(*) {\n  background-color: var(--vvd-color-surface-0dp);\n  filter: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-2 ::slotted(*) {\n  background-color: var(--vvd-color-surface-2dp);\n  filter: var(--vvd-shadow-surface-2dp);\n}\n.control.dp-4 ::slotted(*) {\n  background-color: var(--vvd-color-surface-4dp);\n  filter: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 ::slotted(*) {\n  background-color: var(--vvd-color-surface-8dp);\n  filter: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 ::slotted(*) {\n  background-color: var(--vvd-color-surface-12dp);\n  filter: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 ::slotted(*) {\n  background-color: var(--vvd-color-surface-16dp);\n  filter: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 ::slotted(*) {\n  background-color: var(--vvd-color-surface-24dp);\n  filter: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) ::slotted(*) {\n  background-color: var(--vvd-color-surface-2dp);\n  filter: var(--vvd-shadow-surface-2dp);\n}";
 styleInject(css_248z);
 
 let _ = t => t,
@@ -24,7 +17,7 @@ const getClasses = ({
 }) => classNames('control', [`dp-${dp}`, Boolean(dp)]);
 
 const elevationTemplate = () => html(_t || (_t = _`
-        <div class="${0}">
+        <div class="${0}" part="base">
 			<slot></slot>
 		</div>`), getClasses);
 

package/focus/index.js

@@ -1,3 +1,3 @@
-import '../shared/index2.js';
-export { V as VIVIDFocus } from '../shared/index3.js';
+import '../shared/index.js';
+export { V as VIVIDFocus } from '../shared/index2.js';
 import '../shared/style-inject.es.js';

package/icon/index.js

@@ -1,5 +1,34 @@
-import '../shared/index2.js';
-export { v as vividIcon } from '../shared/index.js';
-import '../shared/style-inject.es.js';
+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/class-names.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);
+
+let _ = t => t,
+    _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)));
+
+const vividIcon = Icon.compose({
+  baseName: 'icon',
+  template: iconTemplate,
+  styles: css_248z
+});
+designSystem.register(vividIcon());
+
+export { vividIcon };

package/index.d.ts

@@ -1 +1,2 @@
 export * from './lib/components';
+export * from './shared/design-system';

package/index.js

@@ -1,19 +1,32 @@
 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/index3.js';
-export { v as vividIcon } from './shared/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 { vividBreadcrumb } from './breadcrumb/index.js';
-import './shared/index2.js';
+export { VIVIDSideDrawer } from './side-drawer/index.js';
+export { vividCalendar } from './calendar/index.js';
+export { VIVIDPopup } from './popup/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/web.dom-collections.iterator.js';
+import './shared/affix.js';
+import './shared/icon.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/affix.js';
 import './shared/style-inject.es.js';
+import './shared/when.js';
 import './shared/breadcrumb-item.js';
+import './shared/slotted.js';
+import './shared/es.object.assign.js';

package/layout/index.js

@@ -1,4 +1,4 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
+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';
 

package/lib/accordion/accordion.d.ts

@@ -0,0 +1,9 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Accordion extends FoundationElement {
+    private accordionItems;
+    multi: boolean;
+    constructor();
+    connectedCallback(): void;
+    private handleOpened;
+    closeAll(): void;
+}

package/lib/accordion/accordion.template.d.ts

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

package/lib/accordion/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividAccordion: (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/accordion-item/accordion-item.d.ts

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

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

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

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

@@ -0,0 +1,3 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+import '../icon';
+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/badge/badge.d.ts

@@ -1,8 +1,8 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-import { PrefixOrSuffix } from '../../shared/patterns/affix';
+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>;
-declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Soft>;
+declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | 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 {
@@ -12,6 +12,6 @@ export declare class Badge extends FoundationElement {
     size?: BadgeSize;
     text: string;
 }
-export interface Badge extends PrefixOrSuffix {
+export interface Badge extends AffixIconWithTrailing {
 }
 export {};

package/lib/banner/banner.d.ts

@@ -0,0 +1,20 @@
+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 class Banner extends FoundationElement {
+    #private;
+    actionHref: string | undefined;
+    actionText: string | undefined;
+    removable: boolean;
+    ariaLive: any;
+    role: string | undefined;
+    text: string | undefined;
+    connotation: BannerConnotation | undefined;
+    get conditionedIcon(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    remove(): void;
+}
+export interface Banner extends AffixIcon {
+}

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

@@ -0,0 +1,6 @@
+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

@@ -0,0 +1,2 @@
+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-item/breadcrumb-item.template.d.ts

@@ -1,5 +1,4 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import type { BreadcrumbItem } from './breadcrumb-item';
-import '../icon';
 export declare const BreadcrumbItemTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<BreadcrumbItem>;

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

@@ -1,2 +1,3 @@
+import '../icon';
 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,8 +1,8 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
 import type { Appearance, Connotation, Shape, Size } from '../enums.js';
-import { PrefixOrSuffix } from '../../shared/patterns/affix';
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
 declare type ButtonConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert>;
-export declare type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Soft>;
+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>;
 export declare class Button extends FoundationButton {
@@ -12,6 +12,6 @@ export declare class Button extends FoundationButton {
     size?: ButtonSize;
     label: string;
 }
-export interface Button extends PrefixOrSuffix {
+export interface Button extends AffixIconWithTrailing {
 }
 export {};

package/lib/calendar/calendar.d.ts

@@ -0,0 +1,11 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+export declare class Calendar extends FoundationElement {
+    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 arrowKeysInteractions;
+    private moveTo;
+    onKeydown({ key }: KeyboardEvent): boolean;
+}

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

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

package/lib/calendar/helpers/calendar.date-functions.d.ts

@@ -0,0 +1,2 @@
+export declare function getValidDateString(date: Date): string;
+export declare function getFirstDateOfTheWeek(date: Date | undefined, startDay: 'sunday' | 'monday'): Date;

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

@@ -0,0 +1,6 @@
+import type { Calendar } from '../calendar';
+export interface CalendarEventContext {
+    day?: number;
+    hour?: number;
+}
+export declare const getEventContext: (this: Calendar, e: KeyboardEvent | MouseEvent) => CalendarEventContext | null;

package/lib/calendar/helpers/calendar.keyboard-interactions.d.ts

@@ -0,0 +1,9 @@
+import type { Calendar } from '../calendar';
+export declare const ARROW_UP = "ArrowUp";
+export declare const ARROW_RIGHT = "ArrowRight";
+export declare const ARROW_DOWN = "ArrowDown";
+export declare const ARROW_LEFT = "ArrowLeft";
+export declare type PredefindKeys = typeof ARROW_UP | typeof ARROW_RIGHT | typeof ARROW_DOWN | typeof ARROW_LEFT;
+export declare function isCellOrHeader(el: unknown): el is HTMLElement;
+export declare function getNextFocusableGridElement(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | void;
+export declare function getHeaderDescendantGridCell(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | undefined;

package/lib/calendar/index.d.ts

@@ -0,0 +1,3 @@
+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/components.d.ts

@@ -7,3 +7,10 @@ export * from './layout';
 export * from './elevation';
 export * from './breadcrumb-item';
 export * from './breadcrumb';
+export * from './side-drawer';
+export * from './calendar';
+export * from './popup';
+export * from './tooltip';
+export * from './banner';
+export * from './accordion-item';
+export * from './accordion';

package/lib/elevation/elevation.d.ts

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

package/lib/enums.d.ts

@@ -13,13 +13,14 @@ export declare enum ConnotationDecorative {
 export declare enum Shape {
     Rounded = "rounded",
     Pill = "pill",
-    Circled = "circled"
+    Circled = "circled",
+    Sharp = "sharp"
 }
 export declare enum Appearance {
     Text = "text",
     Filled = "filled",
     Outlined = "outlined",
-    Soft = "soft",
+    Subtle = "subtle",
     Ghost = "ghost"
 }
 export declare enum Size {

package/lib/icon/icon.d.ts

@@ -4,9 +4,7 @@ declare type IconConnotation = Extract<Connotation, Connotation.Primary | Connot
 export declare class Icon extends FoundationElement {
     connotation?: IconConnotation;
     size?: Size;
-    state: 'idle' | 'loading' | 'loaded' | 'fail';
-    svg: any;
-    placeholder: any;
+    svg: string;
     type?: string;
     typeChanged(): Promise<void>;
 }

package/lib/popup/index.d.ts

@@ -0,0 +1,4 @@
+import '../elevation';
+import '../button';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const VIVIDPopup: (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/popup/popup.d.ts

@@ -0,0 +1,29 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import { Placement } from '@floating-ui/dom';
+export declare class Popup extends FoundationElement {
+    private static ARROW_POSITION;
+    private get PADDING();
+    private get DISTANCE();
+    private get STRATEGY();
+    popupEl: HTMLElement;
+    arrowEl: HTMLElement;
+    private cleanup?;
+    private get middleware();
+    open: boolean;
+    dismissible: boolean;
+    arrow: boolean;
+    alternate: boolean;
+    corner?: Placement;
+    anchor: string;
+    private anchorEl;
+    constructor();
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
+    updatePosition(): Promise<void>;
+    show(): void;
+    hide(): void;
+    handleDismissClick(): void;
+    private assignPopupPosition;
+    private assignArrowPosition;
+    private getAnchorById;
+}

package/lib/popup/popup.template.d.ts

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

package/lib/progress/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividProgress: (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/progress/progress.d.ts

@@ -0,0 +1,9 @@
+import { BaseProgress } from '@microsoft/fast-foundation';
+import type { Connotation, ConnotationDecorative, Shape } from '../enums';
+export declare type ProgressConnotation = Connotation.Primary | Connotation.Success | Connotation.Alert | Connotation.CTA | ConnotationDecorative.Pacific;
+export declare type ProgressShape = Shape.Rounded | Shape.Sharp;
+export declare class Progress extends BaseProgress {
+    shape?: ProgressShape;
+    connotation?: ProgressConnotation;
+    reverse: boolean;
+}

package/lib/progress/progress.template.d.ts

@@ -0,0 +1,5 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext } from '@microsoft/fast-foundation';
+import type { ProgressOptions } from '@microsoft/fast-foundation';
+import type { Progress } from './progress';
+export declare const ProgressTemplate: (context: ElementDefinitionContext, definition: ProgressOptions) => ViewTemplate<Progress>;

package/lib/progress-ring/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividProgressRing: (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/progress-ring/progress-ring.d.ts

@@ -0,0 +1,6 @@
+import { BaseProgress } from '@microsoft/fast-foundation';
+import type { Connotation } from '../enums';
+export declare type ProgressRingConnotation = Connotation.Primary | Connotation.Success | Connotation.Alert | Connotation.CTA;
+export declare class ProgressRing extends BaseProgress {
+    connotation?: ProgressRingConnotation;
+}

package/lib/progress-ring/progress-ring.template.d.ts

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

package/lib/side-drawer/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const VIVIDSideDrawer: (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/side-drawer/side-drawer.d.ts

@@ -0,0 +1,12 @@
+import { FoundationElement, FoundationElementDefinition, StartEndOptions } from '@microsoft/fast-foundation';
+export declare type SideDrawerOptions = FoundationElementDefinition & StartEndOptions;
+export declare class SideDrawer extends FoundationElement {
+    alternate: boolean;
+    modal: boolean;
+    open: boolean;
+    position?: 'start' | 'end';
+    show(): void;
+    hide(): void;
+    handleScrimClick: () => void;
+    handleKeydown({ key }: KeyboardEvent): void;
+}

package/lib/side-drawer/side-drawer.template.d.ts

@@ -0,0 +1,4 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { SideDrawer, SideDrawerOptions } from './side-drawer';
+export declare const sideDrawerTemplate: FoundationElementTemplate<ViewTemplate<SideDrawer>, SideDrawerOptions>;

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

@@ -1,7 +1,6 @@
-import { Anchor } from '@microsoft/fast-foundation';
-import { Prefix } from '../../shared/patterns/affix';
-export declare class SidenavItem extends Anchor {
-    text: string;
+import { AffixIcon } from '../../shared/patterns/affix';
+import { TextAnchor } from '../text-anchor/text-anchor';
+export declare class SidenavItem extends TextAnchor {
 }
-export interface SidenavItem extends Prefix {
+export interface SidenavItem extends AffixIcon {
 }

package/lib/text/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividText: (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/text/text.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Connotation } from '../enums.js';
+import type { VVDFontFace } from '../../../../../node_modules/@vonage/vivid-tokens/dist/types/typography/font-faces';
+declare type TextConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Announcement | Connotation.Info>;
+export declare class Text extends FoundationElement {
+    connotation?: TextConnotation;
+    fontFace?: VVDFontFace;
+    tight: boolean;
+}
+export {};

package/lib/text/text.template.d.ts

@@ -0,0 +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>;

package/lib/text-anchor/text-anchor.d.ts

@@ -1,4 +1,7 @@
 import { Anchor } from '@microsoft/fast-foundation';
+import { AffixIcon } from '../../shared/patterns/affix';
 export declare class TextAnchor extends Anchor {
     text: string;
 }
+export interface TextAnchor extends AffixIcon {
+}

package/lib/tooltip/index.d.ts

@@ -0,0 +1,3 @@
+import '../popup';
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividTooltip: (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/tooltip/tooltip.d.ts

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Placement } from '@floating-ui/dom';
+export declare class Tooltip extends FoundationElement {
+    text: string;
+    open: boolean;
+    corner?: Placement;
+    anchor?: string;
+    show(): void;
+    hide(): void;
+}

package/lib/tooltip/tooltip.template.d.ts

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

package/package.json

@@ -1,14 +1,19 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.3",
+  "version": "3.0.0-next.6",
+  "type": "module",
+  "exports": {
+    "import": "./index.js"
+  },
   "main": "./index.umd.js",
   "module": "./index.esm.js",
   "typings": "./index.d.ts",
   "dependencies": {
-    "@microsoft/fast-element": "^1.7.0",
-    "@microsoft/fast-foundation": "^2.33.3",
-    "@microsoft/fast-web-utilities": "^5.1.0",
-    "ramda": "^0.27.2"
+    "@microsoft/fast-element": "^1.9.0",
+    "@microsoft/fast-foundation": "^2.41.1",
+    "@microsoft/fast-web-utilities": "^5.2.0",
+    "ramda": "^0.27.2",
+    "@floating-ui/dom": "^0.4.0"
   },
   "peerDependencies": {}
 }