@vonage/vivid 3.0.0-next.42 → 3.0.0-next.45

package/README.md

@@ -1,52 +1,110 @@
-<div class="home-page-hero">
-  <a href="https://github.com/vonage/vivid-3">
-    <img src="/vivid-logo.svg" style="" alt="Vivid Logo" width="120">
-  </a>
-  <h1>Welcome to Vivid</h1>
-
-[![codecov][codecov-shield]][codecov-url]
-[![Contributors][contributors-shield]][contributors-url]
-[![Forks][forks-shield]][forks-url]
-[![Stargazers][stars-shield]][stars-url]
-[![Issues][issues-shield]][issues-url]
-[![Apache 2.0 License][license-shield]][license-url]
-
-
-  <h6>
-    Vonage's design system platform targeted to provide </br>incorporated, battery-charged web components.
-  </h6>
-  <a class="home-page-hero-docs-btn" href="https://vivid.deno.dev"><strong>Explore the docs</strong></a>
-  <div class="home-page-hero-docs-links">
-    <a href="https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=bug_report.md&title=">Report Bug</a>
-    <span>|</span>    
-    <a href="https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=feature_request.md&title=">Request Feature</a>
-  </div>
-</div>
-
-### Installation
-
-run:
+
+# Vivid UI
+
+Essential UI **web components** for building modern web applications, bound to provide a **safe**, **simple** and **intuitive** interface.
+
+<!-- ! TODO add visual - GIF or image reflecting an easy integration of vivid in code and page result -->
+![the Vivid logo](/assets/images/vivid-cover-wide.avif)
+
+## Installation
+
+To integrate Vivid components into your project, run:
 
 ```bash
-npm install @vonage/vivid
+npm install @vonage/vivid # or yarn add @vonage/vivid
 ```
 
-use:
+## Usage
+
+Import components in your project via [side effect imports](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_a_module_for_its_side_effects_only):
 
 ```js
 import '@vonage/vivid/button';
 ```
 
+And include in HTML:
+
 ```html
 <vwc-button label="Click me"></vwc-button>
 ```
 
+For a full list of components and API, explore the [components docs](https://vivid.deno.dev/components/accordion/) 📚.
+
+### Prerequisites
+
+The Vivid components library rely on a set of **core styles** to:
+
+- Be present in the DOM
+
+- Be shared across all components
+
+- Apply common design identities (such as colors, typography, spacing etc')
+
+- Ensure the components look as intended.
+
+As the task of loading css is not trivial, and may vary from project to project, this library does not provide any way to load the css. It is up to the author to load the css in the most appropriate manner for their project.
+
+To **include the styles**, css files must be loaded into the project from the `node_modules/@vonage/vivid/styles` folder.
+
+The folder contains the following files:
+
+- Fonts
+
+  - `fonts/spezia.css` - Loads the *Spezia* variable font and specifies its font face definition. *Spezia* is Vonage's branded font and is required by most Vivid components
+
+- Themes - only one theme can apply at a time. thus, only one is required to be loaded
+
+  - `themes/light.css` - Light theme
+
+  - `themes/dark.css` - Dark theme
+
+Note: scss users can simply [forward](https://sass-lang.com/documentation/at-rules/forward) the styles to their scss project:
+
+```css
+@forward 'node_modules/@vonage/vivid/styles/fonts/spezia';
+@forward 'node_modules/@vonage/vivid/styles/themes/light';
+```
+
+## Support
+
+This library is open source, developed and maintained by the [Vonage Vivid team](Vonage/vivid).
+
+For any questions, please open a [bug report](https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=bug_report.md&title=) or [feature request](https://github.com/Vonage/vivid-3/issues/new?assignees=&labels=&template=feature_request.md&title=).
+
 ## Roadmap
 
-[view components status](https://github.com/orgs/Vonage/projects/6)
+- View [components status](https://github.com/orgs/Vonage/projects/6)
+
+- [What's on our plate](https://github.com/orgs/Vonage/projects/3/views/7)
+
+- See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
+
+We publish a *next* release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.
+
+## Contributing
+
+Please read [CONTRIBUTING.md](.github/CONTRIBUTING.md) for details on our code of conduct, and the process for submitting pull requests to us.
+
+## Versioning
+
+We use [SemVer](http://semver.org/) for versioning. For the versions available, see the [npm page](https://www.npmjs.com/package/@vonage/vivid).
+
+## Authors
+
+See also the list of [contributors](https://github.com/your/project/contributors) who participated in this project.
+
+## License
+
+This project is licensed under the Apache 2.0 License - see the [LICENSE.md](LICENSE.md) file for details
+
+<!-- ## Acknowledgments
 
-Follow our API planning on the [Vivid project components' view](https://github.com/orgs/Vonage/projects/3/views/13)
+- Hat tip to anyone whose code was used
+- Inspiration
+- etc -->
 
-We publish a _next_ release on every successful merge to main, so you never need to wait for a new stable version to make use of any updates.
+## Built With
 
-See the [open issues](https://github.com/vonage/vivid-3/issues) for a full list of proposed features (and known issues).
+- [Fast](https://www.fast.design) - to extend element classes and compile code to native web components
+- [Typescript](https://www.typescriptlang.org) - for ergonomic and type-safe code
+- [Sass](https://sass-lang.com) - for styles authoring extensibility and consistency

package/dialog/index.js

@@ -243,31 +243,33 @@ function content() {
 
 const DialogTemplate = () => html(_t5 || (_t5 = _2`
 	<vwc-elevation dp="12">
-		<dialog class="${0}"
-				@keydown="${0}"
-				returnValue="${0}"
-				aria-labelledby="${0}"
-				aria-label="${0}"
-				aria-describedby="${0}"
-		>
-			<slot name="main">
-				<div class="main-wrapper">
-					<div class="header">
-						<div class="headline-wrapper">
-							<slot name="graphic">
+		<div>
+			<dialog class="${0}"
+					@keydown="${0}"
+					returnValue="${0}"
+					aria-labelledby="${0}"
+					aria-label="${0}"
+					aria-describedby="${0}"
+			>
+				<slot name="main">
+					<div class="main-wrapper">
+						<div class="header">
+							<div class="headline-wrapper">
+								<slot name="graphic">
+									${0}
+								</slot>
 								${0}
-							</slot>
-							${0}
+							</div>
+						${0}
 						</div>
-			  		${0}
+						<slot name="content">
+							${0}
+						</slot>
+						<slot name="footer"></slot>
 					</div>
-					<slot name="content">
-						${0}
-					</slot>
-					<slot name="footer"></slot>
-				</div>
-			</slot>
-		</dialog>
+				</slot>
+			</dialog>
+		</div>
 	</vwc-elevation>`), getClasses, (x, c) => handleEscapeKey(x, c.event), x => x.returnValue, x => x.ariaLabelledBy, x => x.ariaLabel, x => x.ariaDescribedBy, when(x => x.icon, icon()), when(x => x.headline, headline()), renderDismissButton(), when(x => x.text, content()));
 
 const vividDialog = Dialog.compose({

package/index.js

@@ -18,8 +18,9 @@ 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 { vividSidenav } from './sidenav/index.js';
-export { vividSidenavItem } from './sidenav-item/index.js';
+export { vividNav } from './nav/index.js';
+export { vividNavItem } from './nav-item/index.js';
+export { vividNavDisclosure } from './nav-disclosure/index.js';
 export { vividText } from './text/index.js';
 export { vividTextfield } from './text-field/index.js';
 export { vividTooltip } from './tooltip/index.js';

package/lib/components.d.ts

@@ -18,8 +18,9 @@ export * from './popup';
 export * from './progress';
 export * from './progress-ring';
 export * from './side-drawer';
-export * from './sidenav';
-export * from './sidenav-item';
+export * from './nav';
+export * from './nav-item';
+export * from './nav-disclosure';
 export * from './text';
 export * from './text-field';
 export * from './tooltip';

package/lib/nav/index.d.ts

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

@@ -1,3 +1,3 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
-export declare class Sidenav extends FoundationElement {
+export declare class Nav extends FoundationElement {
 }

package/lib/nav/nav.template.d.ts

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

package/lib/nav-disclosure/index.d.ts

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

@@ -1,10 +1,10 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 import { AffixIcon } from '../../shared/patterns/affix';
-export declare class SidenavDisclosure extends FoundationElement {
+export declare class NavDisclosure extends FoundationElement {
     #private;
     details: HTMLDetailsElement;
     label?: string;
     open: boolean;
 }
-export interface SidenavDisclosure extends AffixIcon {
+export interface NavDisclosure extends AffixIcon {
 }

package/lib/nav-disclosure/nav-disclosure.template.d.ts

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

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

@@ -1,2 +1,4 @@
+import '../icon';
+import '../focus';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const vividSidenav: (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 vividNavItem: (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/{sidenav-item/sidenav-item.d.ts → nav-item/nav-item.d.ts}

@@ -1,6 +1,6 @@
 import { AffixIcon } from '../../shared/patterns/affix';
 import { TextAnchor } from '../text-anchor/text-anchor';
-export declare class SidenavItem extends TextAnchor {
+export declare class NavItem extends TextAnchor {
 }
-export interface SidenavItem extends AffixIcon {
+export interface NavItem extends AffixIcon {
 }

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

@@ -1,4 +1,4 @@
 import type { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Sidenav } from './sidenav';
-export declare const SidenavTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Sidenav>;
+import type { NavItem } from './nav-item';
+export declare const NavItemTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<NavItem>;

package/nav/index.js

@@ -0,0 +1,17 @@
+import { F as FoundationElement, h as html, d as designSystem } from '../shared/index.js';
+
+class Nav extends FoundationElement {}
+
+let _ = t => t,
+    _t;
+const NavTemplate = () => html(_t || (_t = _`
+		<nav><slot></slot></nav>
+    `));
+
+const vividNav = Nav.compose({
+  baseName: 'nav',
+  template: NavTemplate
+});
+designSystem.register(vividNav());
+
+export { vividNav };

package/{sidenav-disclosure → nav-disclosure}/index.js

@@ -20,13 +20,13 @@ import '../shared/object-keys.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: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .control {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n.content {\n  border-inline-start: 1px solid var(--vvd-color-neutral-30);\n  margin-inline-start: 20px;\n  padding-inline-start: 12px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
 styleInject(css_248z);
 
-var _SidenavDisclosure_onToggle;
-class SidenavDisclosure extends FoundationElement {
+var _NavDisclosure_onToggle;
+class NavDisclosure extends FoundationElement {
   constructor() {
     super(...arguments);
     this.open = false;
 
-    _SidenavDisclosure_onToggle.set(this, () => {
+    _NavDisclosure_onToggle.set(this, () => {
       this.open = this.details.open;
       this.$emit('toggle');
     });
@@ -34,31 +34,31 @@ class SidenavDisclosure extends FoundationElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.details.addEventListener('toggle', __classPrivateFieldGet(this, _SidenavDisclosure_onToggle, "f"));
+    this.details.addEventListener('toggle', __classPrivateFieldGet(this, _NavDisclosure_onToggle, "f"));
     this.details.open = this.open;
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.details.removeEventListener('toggle', __classPrivateFieldGet(this, _SidenavDisclosure_onToggle, "f"));
+    this.details.removeEventListener('toggle', __classPrivateFieldGet(this, _NavDisclosure_onToggle, "f"));
   }
 
 }
-_SidenavDisclosure_onToggle = new WeakMap();
+_NavDisclosure_onToggle = new WeakMap();
 
-__decorate([attr, __metadata("design:type", String)], SidenavDisclosure.prototype, "label", void 0);
+__decorate([attr, __metadata("design:type", String)], NavDisclosure.prototype, "label", void 0);
 
 __decorate([attr({
   mode: 'boolean'
-}), __metadata("design:type", Object)], SidenavDisclosure.prototype, "open", void 0);
+}), __metadata("design:type", Object)], NavDisclosure.prototype, "open", void 0);
 
-applyMixins(SidenavDisclosure, AffixIcon);
+applyMixins(NavDisclosure, AffixIcon);
 
 let _ = t => t,
     _t,
     _t2,
     _t3;
-const SidenavDisclosureTemplate = context => {
+const NavDisclosureTemplate = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const focusTemplate = focusTemplateFactory(context);
   return html(_t || (_t = _`<details class="base" ${0} ?open=${0}>
@@ -80,11 +80,11 @@ const SidenavDisclosureTemplate = context => {
 	`), ref('details'), x => x.open, x => x.open, x => affixIconTemplate(x.icon), x => x.label, when(x => x.open, html(_t2 || (_t2 = _`<vwc-icon class="toggleIcon" type='chevron-up-solid'></vwc-icon>`))), when(x => !x.open, html(_t3 || (_t3 = _`<vwc-icon class="toggleIcon" type='chevron-down-solid'></vwc-icon>`))), () => focusTemplate);
 };
 
-const vividSidenavDisclosure = SidenavDisclosure.compose({
-  baseName: 'sidenav-disclosure',
-  template: SidenavDisclosureTemplate,
+const vividNavDisclosure = NavDisclosure.compose({
+  baseName: 'nav-disclosure',
+  template: NavDisclosureTemplate,
   styles: css_248z
 });
-designSystem.register(vividSidenavDisclosure());
+designSystem.register(vividNavDisclosure());
 
-export { vividSidenavDisclosure };
+export { vividNavDisclosure };

package/{sidenav-item → nav-item}/index.js

@@ -24,20 +24,20 @@ import '../shared/focus2.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: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control.icon-only {\n  display: flex;\n  block-size: 40px;\n  inline-size: 40px;\n  place-content: center;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}";
 styleInject(css_248z);
 
-class SidenavItem extends TextAnchor {}
-applyMixins(SidenavItem, AffixIcon);
+class NavItem extends TextAnchor {}
+applyMixins(NavItem, AffixIcon);
 
 let _ = t => t,
     _t;
-const SidenavItemTemplate = (context, definition) => html(_t || (_t = _`
+const NavItemTemplate = (context, definition) => html(_t || (_t = _`
       ${0}
     `), textAnchorTemplate(context));
 
-const vividSidenavItem = SidenavItem.compose({
-  baseName: 'sidenav-item',
-  template: SidenavItemTemplate,
+const vividNavItem = NavItem.compose({
+  baseName: 'nav-item',
+  template: NavItemTemplate,
   styles: css_248z
 });
-designSystem.register(vividSidenavItem());
+designSystem.register(vividNavItem());
 
-export { vividSidenavItem };
+export { vividNavItem };

package/package.json

@@ -1,9 +1,19 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.42",
+  "version": "3.0.0-next.45",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
+  "homepage": "https://vivid.deno.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vonage/vivid-3",
+    "directory": "libs/components"
+  },
+  "bugs": {
+    "url": "https://github.com/Vonage/vivid-3/issues"
+  },
+  "license": "Apache-2.0",
   "exports": {
     "./accordion": "./accordion",
     "./accordion-item": "./accordion-item",
@@ -25,9 +35,9 @@
     "./progress": "./progress",
     "./progress-ring": "./progress-ring",
     "./side-drawer": "./side-drawer",
-    "./sidenav": "./sidenav",
-    "./sidenav-item": "./sidenav-item",
-    "./sidenav-disclosure": "./sidenav-disclosure",
+    "./nav": "./nav",
+    "./nav-item": "./nav-item",
+    "./nav-disclosure": "./nav-disclosure",
     "./text": "./text",
     "./text-field": "./text-field",
     "./tooltip": "./tooltip",

package/popup/index.js

@@ -1944,27 +1944,35 @@ class Popup extends FoundationElement {
     this.arrow = false;
     this.alternate = false;
     this.placement = 'left';
+
+    _Popup_handleKeydown.set(this, event => {
+      if (event.key === keyEscape) {
+        this.open = false;
+      }
+    });
   }
 
   disconnectedCallback() {
     var _a, _b;
 
     super.disconnectedCallback();
-    (_a = __classPrivateFieldGet(this, _Popup_anchorEl, "f")) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', e => __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_handleKeydown).call(this, e));
+    (_a = __classPrivateFieldGet(this, _Popup_anchorEl, "f")) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', __classPrivateFieldGet(this, _Popup_handleKeydown, "f"));
     (_b = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _b === void 0 ? void 0 : _b.call(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    var _a, _b;
+    var _a, _b, _c;
 
     super.attributeChangedCallback(name, oldValue, newValue);
 
     switch (name) {
       case 'anchor':
         {
+          (_a = __classPrivateFieldGet(this, _Popup_anchorEl, "f")) === null || _a === void 0 ? void 0 : _a.removeEventListener('keydown', __classPrivateFieldGet(this, _Popup_handleKeydown, "f"));
+
           __classPrivateFieldSet(this, _Popup_anchorEl, __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_getAnchorById).call(this), "f");
 
-          (_a = __classPrivateFieldGet(this, _Popup_anchorEl, "f")) === null || _a === void 0 ? void 0 : _a.addEventListener('keydown', e => __classPrivateFieldGet(this, _Popup_instances, "m", _Popup_handleKeydown).call(this, e));
+          (_b = __classPrivateFieldGet(this, _Popup_anchorEl, "f")) === null || _b === void 0 ? void 0 : _b.addEventListener('keydown', __classPrivateFieldGet(this, _Popup_handleKeydown, "f"));
           break;
         }
     }
@@ -1972,7 +1980,7 @@ class Popup extends FoundationElement {
     if (__classPrivateFieldGet(this, _Popup_anchorEl, "f") && this.popupEl) {
       __classPrivateFieldSet(this, _Popup_cleanup, autoUpdate(__classPrivateFieldGet(this, _Popup_anchorEl, "f"), this.popupEl, () => this.updatePosition()), "f");
     } else {
-      (_b = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _b === void 0 ? void 0 : _b.call(this);
+      (_c = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _c === void 0 ? void 0 : _c.call(this);
     }
   }
 
@@ -1995,7 +2003,7 @@ class Popup extends FoundationElement {
   }
 
 }
-_Popup_cleanup = new WeakMap(), _Popup_anchorEl = new WeakMap(), _Popup_instances = new WeakSet(), _Popup_arrowPosition_get = function _Popup_arrowPosition_get() {
+_Popup_cleanup = new WeakMap(), _Popup_anchorEl = new WeakMap(), _Popup_handleKeydown = new WeakMap(), _Popup_instances = new WeakSet(), _Popup_arrowPosition_get = function _Popup_arrowPosition_get() {
   return {
     top: 'bottom',
     right: 'left',
@@ -2049,12 +2057,6 @@ _Popup_cleanup = new WeakMap(), _Popup_anchorEl = new WeakMap(), _Popup_instance
   });
 }, _Popup_getAnchorById = function _Popup_getAnchorById() {
   return document.getElementById(this.anchor);
-}, _Popup_handleKeydown = function _Popup_handleKeydown({
-  key
-}) {
-  if (key === keyEscape) {
-    this.open = false;
-  }
 };
 
 __decorate([attr({

package/progress-ring/index.js

@@ -4,7 +4,7 @@ import { B as BaseProgress } from '../shared/base-progress.js';
 import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 
-var css_248z = ".base {\n  align-items: center;\n  block-size: var(--_density);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_density);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base.density-4 {\n  --_density: calc(4 * 4px);\n}\n.base.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-10 {\n  --_density: calc(10 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base:not(.density-4, .density-5, .density-6, .density-7, .density-8, .density-10, .density-11, .density-12) {\n  --_density: calc(9 * 4px);\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
+var css_248z = ".base {\n  align-items: center;\n  block-size: var(--_density);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_density);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-9 {\n  --_density: calc(9 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base.density-13 {\n  --_density: calc(13 * 4px);\n}\n.base:not(.density-5, .density-6, .density-7, .density-8, .density-9, .density-11, .density-12, .density-13) {\n  --_density: calc(10 * 4px);\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
 styleInject(css_248z);
 
 class ProgressRing extends BaseProgress {}
@@ -22,7 +22,7 @@ const getClasses = ({
   connotation,
   density,
   paused
-}) => classNames('base', ['disabled', !!paused], [`connotation-${connotation}`, !!connotation], [`density-${(density ? Number(density) : 0) + 9}`, !!density]);
+}) => classNames('base', ['disabled', !!paused], [`connotation-${connotation}`, !!connotation], [`density-${(density ? Number(density) : 0) + 10}`, !!density]);
 
 const progressSegments = 44;
 const ProgressRingTemplate = _ => html(_t || (_t = _2`

package/lib/sidenav-disclosure/index.d.ts

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

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

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

@@ -1,4 +0,0 @@
-import '../icon';
-import '../focus';
-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>>;

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

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

package/sidenav/index.js

@@ -1,17 +0,0 @@
-import { F as FoundationElement, h as html, d as designSystem } from '../shared/index.js';
-
-class Sidenav extends FoundationElement {}
-
-let _ = t => t,
-    _t;
-const SidenavTemplate = () => html(_t || (_t = _`
-		<nav><slot></slot></nav>
-    `));
-
-const vividSidenav = Sidenav.compose({
-  baseName: 'sidenav',
-  template: SidenavTemplate
-});
-designSystem.register(vividSidenav());
-
-export { vividSidenav };