@vonage/vivid 3.0.0-next.13 → 3.0.0-next.16

package/card/index.js

@@ -9,9 +9,11 @@ import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
 import '../shared/object-set-prototype-of.js';
 import '../shared/_has.js';
-import '../shared/index2.js';
+import '../focus/index.js';
+import '../shared/focus2.js';
 import '../shared/web.dom-collections.iterator.js';
 import '../shared/affix.js';
+import '../shared/focus.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
 

package/elevation/index.js

@@ -6,7 +6,7 @@ class Elevation extends FoundationElement {}
 
 __decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
 
-var css_248z = ".control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-2 {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  background-color: var(--_elevation-fill);\n  filter: var(--_elevation-shadow);\n}";
+var css_248z = ".control.dp-0 {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n}\n.control.dp-4 {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n}\n.control.dp-8 {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n.control.dp-12 {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control.dp-16 {\n  --_elevation-fill: var(--vvd-color-surface-16dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-16dp);\n}\n.control.dp-24 {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n.control:not(.dp-0, .dp-4, .dp-8, .dp-12, .dp-16, .dp-24) {\n  --_elevation-fill: var(--vvd-color-surface-2dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-2dp);\n}\n.control ::slotted(*) {\n  background-color: var(--_elevation-fill);\n  filter: var(--_elevation-shadow);\n}";
 styleInject(css_248z);
 
 let _ = t => t,
@@ -21,11 +21,11 @@ const elevationTemplate = () => html(_t || (_t = _`
 			<slot></slot>
 		</div>`), getClasses);
 
-const VIVIDElevation = Elevation.compose({
+const vividElevation = Elevation.compose({
   baseName: 'elevation',
   template: elevationTemplate,
   styles: css_248z
 });
-designSystem.register(VIVIDElevation());
+designSystem.register(vividElevation());
 
-export { VIVIDElevation };
+export { vividElevation };

package/fab/index.js

@@ -0,0 +1,93 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import { _ 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 { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../shared/affix.js';
+import { B as Button, f as focusTemplateFactory } from '../shared/focus.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import { r as ref } from '../shared/aria-global.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/object-set-prototype-of.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/focus2.js';
+import '../shared/web.dom-collections.iterator.js';
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  --_fab-block-size: 48px;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: var(--_fab-block-size);\n  border-radius: 24px;\n  color: var(--_appearance-color-text);\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  outline: 0 none;\n  vertical-align: middle;\n}\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n  --connotation-basis: var(--vvd-color-cta);\n  --connotation-basis-increment: var(--vvd-color-cta-70);\n  --connotation-contrast: var(--vvd-color-cta-90);\n  --connotation-fierce: var(--vvd-color-cta-80);\n  --connotation-firm: var(--vvd-color-cta-70);\n}\n.control.connotation-primary {\n  --connotation: var(--vvd-color-primary);\n  --on-connotation: var(--vvd-color-on-primary);\n  --connotation-basis: var(--vvd-color-neutral);\n  --connotation-basis-increment: var(--vvd-color-neutral-90);\n  --connotation-contrast: var(--vvd-color-neutral-90);\n  --connotation-fierce: var(--vvd-color-neutral-80);\n  --connotation-firm: var(--vvd-color-primary);\n}\n.control:not(.connotation-cta, .connotation-primary) {\n  --connotation: var(--vvd-color-canvas);\n  --on-connotation: var(--vvd-color-on-canvas);\n  --connotation-basis: var(--vvd-color-canvas);\n  --connotation-basis-increment: var(--vvd-color-neutral-20);\n  --connotation-contrast: var(--vvd-color-on-canvas);\n  --connotation-fierce: var(--vvd-color-neutral-30);\n  --connotation-firm: var(--vvd-color-primary);\n}\n.control {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation);\n  --_appearance-color-outline: transaprent;\n}\n.control:hover:not(:disabled, .disabled), .control.hovered:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-basis-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:disabled, .control.disabled {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:active:not(:disabled, .disabled), .control.active:not(:disabled, .disabled) {\n  --_appearance-color-text: var(--on-connotation);\n  --_appearance-color-fill: var(--connotation-fierce);\n  --_appearance-color-outline: transaprent;\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-8dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-8dp);\n}\n\n/* Icon */\n.icon {\n  font-size: 24px;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus) .focus-indicator {\n  display: none;\n}";
+styleInject(css_248z);
+
+class Fab extends Button {}
+
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Fab.prototype, "label", void 0);
+
+applyMixins(Fab, AffixIconWithTrailing);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  connotation,
+  icon,
+  label,
+  iconTrailing,
+  disabled
+}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], ['icon-only', !label && !!icon], ['icon-trailing', iconTrailing], ['disabled', disabled]);
+
+const FabTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`
+        <button
+            class="${0} "
+            ?autofocus="${0}"
+            ?disabled="${0}"
+            form="${0}"
+            formaction="${0}"
+            formenctype="${0}"
+            formmethod="${0}"
+            formnovalidate="${0}"
+            formtarget="${0}"
+            name="${0}"
+            type="${0}"
+            value="${0}"
+            aria-atomic="${0}"
+            aria-busy="${0}"
+            aria-controls="${0}"
+            aria-current="${0}"
+            aria-describedby="${0}"
+            aria-details="${0}"
+            aria-disabled="${0}"
+            aria-errormessage="${0}"
+            aria-expanded="${0}"
+            aria-flowto="${0}"
+            aria-haspopup="${0}"
+            aria-hidden="${0}"
+            aria-invalid="${0}"
+            aria-keyshortcuts="${0}"
+            aria-label="${0}"
+            aria-labelledby="${0}"
+            aria-live="${0}"
+            aria-owns="${0}"
+            aria-pressed="${0}"
+            aria-relevant="${0}"
+            aria-roledescription="${0}"		
+            ${0}
+        >
+            ${0}
+            ${0}
+            ${0}
+        </button>
+`), getClasses, x => x.autofocus, x => x.disabled, x => x.formId, x => x.formaction, x => x.formenctype, x => x.formmethod, x => x.formnovalidate, x => x.formtarget, x => x.name, x => x.type, x => x.value, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaExpanded, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaPressed, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, x => affixIconTemplate(x.icon), x => x.label);
+};
+
+const vividFab = Fab.compose({
+  baseName: 'fab',
+  template: FabTemplate,
+  styles: css_248z
+});
+designSystem.register(vividFab());
+
+export { vividFab };

package/focus/index.js

@@ -1,3 +1,20 @@
-import '../shared/index.js';
-export { V as VIVIDFocus } from '../shared/index2.js';
-import '../shared/style-inject.es.js';
+import { h as html, d as designSystem } from '../shared/index.js';
+import { F as Focus } from '../shared/focus2.js';
+import { s as styleInject } from '../shared/style-inject.es.js';
+
+var css_248z = ":host {\n  display: contents;\n  border-radius: inherit;\n}\n\n.control {\n  position: absolute;\n  box-sizing: border-box;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 2px var(--focus-stroke-color, var(--vvd-color-on-canvas)), inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);\n  inset: 0;\n}";
+styleInject(css_248z);
+
+let _ = t => t,
+    _t;
+const focusTemplate = () => html(_t || (_t = _`
+        <span class="control"></span>`));
+
+const vividFocus = Focus.compose({
+  baseName: 'focus',
+  template: focusTemplate,
+  styles: css_248z
+});
+designSystem.register(vividFocus());
+
+export { vividFocus };

package/icon/index.js

@@ -6,7 +6,7 @@ import { c as classNames } from '../shared/class-names.js';
 import '../shared/object-set-prototype-of.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-small):not(.size-medium):not(.size-large) {\n  block-size: 1em;\n  inline-size: 1em;\n}\n\n.control.size-small {\n  block-size: 16px;\n  inline-size: 16px;\n}\n\n.control.size-medium {\n  block-size: 24px;\n  inline-size: 24px;\n}\n\n.control.size-large {\n  block-size: 32px;\n  inline-size: 32px;\n}";
+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.control.connotation-announcement {\n  --connotation: var(--vvd-color-announcement);\n  --on-connotation: var(--vvd-color-on-announcement);\n}\n.control.connotation-cta {\n  --connotation: var(--vvd-color-cta);\n  --on-connotation: var(--vvd-color-on-cta);\n}\n.control.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n.control.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\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-small):not(.size-medium):not(.size-large) {\n  block-size: 1em;\n  inline-size: 1em;\n}\n\n.control.size-small {\n  block-size: 16px;\n  inline-size: 16px;\n}\n\n.control.size-medium {\n  block-size: 24px;\n  inline-size: 24px;\n}\n\n.control.size-large {\n  block-size: 32px;\n  inline-size: 32px;\n}";
 styleInject(css_248z);
 
 let _ = t => t,

package/index.js

@@ -1,33 +1,44 @@
-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 { 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 { vividButton } from './button/index.js';
 export { vividCalendar } from './calendar/index.js';
-export { VIVIDPopup } from './popup/index.js';
+export { vividCard } from './card/index.js';
+export { vividElevation } from './elevation/index.js';
+export { vividFab } from './fab/index.js';
+export { vividIcon } from './icon/index.js';
+export { vividLayout } from './layout/index.js';
+export { vividNote } from './note/index.js';
+export { vividPopup } from './popup/index.js';
+export { vividProgress } from './progress/index.js';
+export { vividProgressRing } from './progress-ring/index.js';
+export { vividSideDrawer } from './side-drawer/index.js';
+export { vividSidenavItem } from './sidenav-item/index.js';
+export { vividText } from './text/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/affix.js';
+import './shared/style-inject.es.js';
+import './shared/class-names.js';
 import './shared/web.dom-collections.iterator.js';
 import './shared/object-set-prototype-of.js';
+import './shared/affix.js';
 import './shared/icon.js';
 import './shared/_has.js';
-import './shared/anchor.js';
 import './shared/apply-mixins.js';
+import './shared/when.js';
+import './shared/enums.js';
+import './text-anchor/index.js';
+import './shared/text-anchor.js';
+import './shared/anchor.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/when.js';
+import './focus/index.js';
+import './shared/focus2.js';
+import './shared/focus.js';
 import './shared/breadcrumb-item.js';
 import './shared/slotted.js';
 import './shared/es.object.assign.js';
+import './shared/base-progress.js';

package/layout/index.js

@@ -43,11 +43,11 @@ const layoutTemplate = () => html(_t || (_t = _`
 			<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/badge/badge.d.ts

@@ -1,15 +1,15 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIconWithTrailing } from '../../shared/patterns/affix';
-import type { Appearance, BlockSize, Connotation, Shape } from '../enums.js';
+import type { Appearance, Connotation, Density, Shape } 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.Duotone | Appearance.Subtle>;
 declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
-declare type BadgeSize = Extract<BlockSize, BlockSize.Condensed | BlockSize.Normal | BlockSize.Extended>;
+declare type BadgeDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
 export declare class Badge extends FoundationElement {
     connotation?: BadgeConnotation;
     shape?: BadgeShape;
     appearance?: BadgeAppearance;
-    size?: BadgeSize;
+    density?: BadgeDensity;
     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/button/button.d.ts

@@ -1,15 +1,15 @@
 import { Button as FoundationButton } from '@microsoft/fast-foundation';
-import type { Appearance, BlockSize, Connotation, Shape } 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>;
 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<BlockSize, BlockSize.Condensed | BlockSize.Normal | BlockSize.Extended>;
+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;
+    density?: ButtonDensity;
     stacked: boolean;
     label?: string;
 }

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/components.d.ts

@@ -1,16 +1,21 @@
-export * from './text-anchor';
+export * from './accordion';
+export * from './accordion-item';
 export * from './badge';
+export * from './banner';
+export * from './breadcrumb';
+export * from './breadcrumb-item';
 export * from './button';
-export * from './focus';
+export * from './calendar';
+export * from './card';
+export * from './elevation';
+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 './note';
 export * from './popup';
+export * from './progress';
+export * from './progress-ring';
+export * from './side-drawer';
+export * from './sidenav-item';
+export * from './text';
 export * from './tooltip';
-export * from './banner';
-export * from './accordion-item';
-export * from './accordion';

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>>;

package/lib/enums.d.ts

@@ -1,4 +1,5 @@
 export declare enum Connotation {
+    Canvas = "canvas",
     Primary = "primary",
     CTA = "cta",
     Success = "success",
@@ -24,7 +25,7 @@ export declare enum Appearance {
     Subtle = "subtle",
     Ghost = "ghost"
 }
-export declare enum BlockSize {
+export declare enum Density {
     Condensed = "condensed",
     Normal = "normal",
     Extended = "extended"

package/lib/fab/fab.d.ts

@@ -0,0 +1,10 @@
+import { Button as FoundationButton } from '@microsoft/fast-foundation';
+import type { Connotation } from '../enums.js';
+import { AffixIconWithTrailing } from '../../shared/patterns/affix';
+export declare type FabConnotation = Extract<Connotation, Connotation.Canvas | Connotation.CTA | Connotation.Primary>;
+export declare class Fab extends FoundationButton {
+    connotation?: FabConnotation;
+    label?: string;
+}
+export interface Fab extends AffixIconWithTrailing {
+}

package/lib/fab/fab.template.d.ts

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

package/lib/fab/index.d.ts

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

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

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

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

@@ -0,0 +1,10 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Connotation } from '../enums';
+import { AffixIcon } from '../../shared/patterns';
+export declare type NoteConnotation = Connotation.Info | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
+export declare class Note extends FoundationElement {
+    heading?: string;
+    connotation?: NoteConnotation;
+}
+export interface Note extends AffixIcon {
+}

package/lib/note/note.template.d.ts

@@ -0,0 +1,5 @@
+import type { ViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+import '../icon/index';
+import type { Note } from './note';
+export declare const NoteTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Note>;

package/lib/popup/index.d.ts

@@ -1,4 +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>>;
+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/progress-ring/progress-ring.d.ts

@@ -3,4 +3,5 @@ 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;
+    density?: -5 | -4 | -3 | -2 | -1 | 0 | 1 | 2 | 3;
 }

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

@@ -1,2 +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>>;
+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/note/index.js

@@ -0,0 +1,65 @@
+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 { b as AffixIcon } from '../shared/affix.js';
+import '../shared/focus2.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../icon/index.js';
+import { C as Connotation } from '../shared/enums.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/object-set-prototype-of.js';
+import '../shared/_has.js';
+
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  display: flex;\n  align-items: stretch;\n  padding: 20px;\n  border-left: 8px solid var(--connotation);\n  background-color: var(--vvd-color-canvas);\n  border-radius: 6px;\n  box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-40), inset -1px 0 0 0 var(--vvd-color-neutral-40), inset 0 -1px 0 0 var(--vvd-color-neutral-40);\n  color: var(--vvd-color-on-canvas);\n}\n.base.connotation-success {\n  --connotation: var(--vvd-color-success);\n  --on-connotation: var(--vvd-color-on-success);\n}\n.base.connotation-info {\n  --connotation: var(--vvd-color-info);\n  --on-connotation: var(--vvd-color-on-info);\n}\n.base.connotation-alert {\n  --connotation: var(--vvd-color-alert);\n  --on-connotation: var(--vvd-color-on-alert);\n}\n.base.connotation-warning {\n  --connotation: var(--vvd-color-warning);\n  --on-connotation: var(--vvd-color-on-warning);\n}\n.base:not(.connotation-success, .connotation-info, .connotation-alert, .connotation-warning) {\n  --connotation: var(--vvd-color-announcement);\n  --on-connotation: var(--vvd-color-on-announcement);\n}\n@supports (contain: content) {\n  .base {\n    contain: content;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n\n.icon {\n  --connotation: currentColor;\n  align-self: flex-start;\n  font-size: 24px;\n  margin-inline-end: 16px;\n}\n\n.text {\n  display: flex;\n  min-height: 24px;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  text-align: start;\n}\n.text .heading {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.text .message {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}";
+styleInject(css_248z);
+
+class Note extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", String)], Note.prototype, "heading", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Note.prototype, "connotation", void 0);
+
+applyMixins(Note, AffixIcon);
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3;
+const connotationIconMap = new Map([[Connotation.Info, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
+
+const getClasses = ({
+  connotation
+}) => classNames('base', `connotation-${connotation}`);
+
+function getHeaderTemplate() {
+  return html(_t || (_t = _`<div class="heading">${0}</div>`), x => x.heading);
+}
+
+function getIconType(note) {
+  return note.icon ? note.icon : note.connotation ? connotationIconMap.get(note.connotation) : 'megaphone-solid';
+}
+
+function getIconTemplate() {
+  return html(_t2 || (_t2 = _`<vwc-icon class="icon" type="${0}"></vwc-icon>`), getIconType);
+}
+
+const NoteTemplate = () => html(_t3 || (_t3 = _`
+    <div class="${0}">
+      ${0}
+			<div class="text">
+	        ${0}
+			    <slot class="message"></slot>
+			</div>
+    </div>
+`), getClasses, getIconTemplate(), when(x => x.heading, getHeaderTemplate()));
+
+const vividNote = Note.compose({
+  baseName: 'note',
+  template: NoteTemplate,
+  styles: css_248z
+});
+designSystem.register(vividNote());
+
+export { vividNote };

package/package.json

@@ -1,11 +1,31 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.13",
+  "version": "3.0.0-next.16",
   "type": "module",
   "module": "./index.esm.js",
-  "main": "index.js",
+  "main": "./index.js",
   "exports": {
-    "import": "./index.js"
+    "./accordion": "./accordion",
+    "./accordion-item": "./accordion-item",
+    "./badge": "./badge",
+    "./banner": "./banner",
+    "./breadcrumb": "./breadcrumb",
+    "./breadcrumb-item": "./breadcrumb-item",
+    "./button": "./button",
+    "./calendar": "./calendar",
+    "./card": "./card",
+    "./elevation": "./elevation",
+    "./fab": "./fab",
+    "./icon": "./icon",
+    "./layout": "./layout",
+    "./note": "./note",
+    "./popup": "./popup",
+    "./progress": "./progress",
+    "./progress-ring": "./progress-ring",
+    "./side-drawer": "./side-drawer",
+    "./sidenav-item": "./sidenav-item",
+    "./text": "./text",
+    "./tooltip": "./tooltip"
   },
   "typings": "./index.d.ts",
   "dependencies": {
@@ -13,7 +33,7 @@
     "@microsoft/fast-foundation": "^2.41.1",
     "@microsoft/fast-web-utilities": "^5.2.0",
     "ramda": "^0.27.2",
-    "@floating-ui/dom": "^0.4.0"
+    "@floating-ui/dom": "^0.5.1"
   },
   "peerDependencies": {}
 }