@vonage/vivid 3.0.0-next.29 → 3.0.0-next.31

package/accordion-item/index.js

@@ -16,7 +16,7 @@ import '../shared/_has.js';
 import '../shared/focus.js';
 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.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n.base:not(.open) .body {\n  display: none;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  margin: 0;\n  background: transparent;\n  cursor: pointer;\n}\n@supports selector(:focus-visible) {\n  .button:focus {\n    outline: none;\n  }\n}\n.button:hover {\n  background: var(--vvd-color-neutral-10);\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.body {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 32px 24px 16px;\n}\n.icon:not(.icon-trailing) .body {\n  padding-left: 48px;\n}\n\n.base {\n  display: flex;\n  flex-direction: column;\n}\n.base:not(.open) .body {\n  display: none;\n}\n\n.header {\n  padding: 0;\n  margin: 0;\n}\n\n.button {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: flex;\n  width: 100%;\n  align-items: center;\n  padding: 16px;\n  border: 0 none;\n  margin: 0;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  cursor: pointer;\n}\n.button {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.button: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.button: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.button {\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  .button:focus {\n    outline: none;\n  }\n}\n.button .heading-text {\n  flex-grow: 1;\n  margin-inline-end: auto;\n  text-align: left;\n}\n.button .meta {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  overflow: hidden;\n  max-width: 20%;\n  flex-shrink: 0;\n  color: var(--vvd-color-neutral-70);\n  margin-inline-start: 16px;\n  text-align: end;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n.button .indicator {\n  display: flex;\n}\n.button .indicator vwc-icon,\n.button .indicator slot[name=indicator i]::slotted(vwc-icon) {\n  margin-inline-start: 16px;\n}\n.button .icon {\n  margin-inline-end: 16px;\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n\n.button:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
 
 class AccordionItem extends FoundationElement {
@@ -116,7 +116,7 @@ const renderHeaderButton = context => {
 	</button>
 `), x => x.open = !x.open, x => x.open, PANEL, () => focusTemplate, x => affixIconTemplate(x.icon), x => x.heading, when(x => x.meta, html(_t4 || (_t4 = _`<span class="meta">${0}</span>`), x => x.meta)), when(x => !x.noIndicator && !x.iconTrailing, html(_t5 || (_t5 = _`
 				${0}
-				${0}	
+				${0}
 			`), when(x => !x.open, html(_t6 || (_t6 = _`<vwc-icon type='chevron-down-solid'></vwc-icon>`))), when(x => x.open, html(_t7 || (_t7 = _`<vwc-icon type='chevron-up-solid'></vwc-icon>`))))));
 };
 

package/action-group/index.js

@@ -6,7 +6,7 @@ import '../shared/export.js';
 import '../shared/object-keys.js';
 import '../shared/iterators.js';
 
-var css_248z = ":host {\n  display: inline-block;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--vvd-color-neutral-30);\n  margin-block: 4px;\n}";
+var css_248z = ":host {\n  display: inline-block;\n}\n\n.base {\n  position: relative;\n  display: flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  color: var(--_appearance-color-text);\n  inline-size: inherit;\n  vertical-align: middle;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base::before {\n  position: absolute;\n  z-index: 1;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  content: \"\";\n  inset: 0;\n  pointer-events: none;\n}\n.base:not(.tight) {\n  padding: 4px;\n  column-gap: 4px;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--vvd-color-neutral-30);\n  margin-block: 4px;\n}\n\n::slotted([vwc-divider]) {\n  align-self: stretch;\n  margin-block: 4px;\n}";
 styleInject(css_248z);
 
 class ActionGroup extends FoundationElement {

package/banner/index.js

@@ -18,7 +18,6 @@ import '../shared/focus.js';
 import '../shared/button.js';
 import '../shared/form-associated.js';
 import '../shared/aria-global.js';
-import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/object-keys.js';
 

package/breadcrumb/index.js

@@ -5,7 +5,6 @@ import { B as BreadcrumbItem } from '../shared/breadcrumb-item.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
-import '../shared/ref.js';
 
 /**
  * A Breadcrumb Custom HTML Element.

package/breadcrumb-item/index.js

@@ -15,7 +15,6 @@ import '../shared/focus.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
-import '../shared/ref.js';
 import '../shared/affix.js';
 import '../shared/web.dom-collections.iterator.js';
 import '../shared/object-keys.js';
@@ -53,10 +52,7 @@ const BreadcrumbItemTemplate = (context, definition) => html(_t || (_t = _2`
 const vividBreadcrumbItem = BreadcrumbItem.compose({
   baseName: 'breadcrumb-item',
   template: BreadcrumbItemTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles: css_248z
 });
 designSystem.register(vividBreadcrumbItem());
 

package/button/index.js

@@ -7,7 +7,7 @@ import { B as Button$1 } from '../shared/button.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { f as focusTemplateFactory } from '../shared/focus2.js';
-import { r as ref } from '../shared/ref.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/export.js';
@@ -18,7 +18,6 @@ import '../shared/when.js';
 import '../shared/focus.js';
 import '../shared/object-keys.js';
 import '../shared/form-associated.js';
-import '../shared/aria-global.js';
 
 class Button extends Button$1 {
   constructor() {

package/divider/index.js

@@ -0,0 +1,88 @@
+import { F as FoundationElement, _ as __decorate, a as attr, 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';
+
+/**
+ * Standard orientation values
+ */
+const Orientation = {
+    horizontal: "horizontal",
+    vertical: "vertical",
+};
+
+/**
+ * Divider roles
+ * @public
+ */
+const DividerRole = {
+    /**
+     * The divider semantically separates content
+     */
+    separator: "separator",
+    /**
+     * The divider has no semantic value and is for visual presentation only.
+     */
+    presentation: "presentation",
+};
+
+/**
+ * A Divider Custom HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#separator | ARIA separator } or {@link https://www.w3.org/TR/wai-aria-1.1/#presentation | ARIA presentation}.
+ *
+ * @public
+ */
+class Divider$1 extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * The role of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: role
+         */
+        this.role = DividerRole.separator;
+        /**
+         * The orientation of the divider.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: orientation
+         */
+        this.orientation = Orientation.horizontal;
+    }
+}
+__decorate([
+    attr
+], Divider$1.prototype, "role", void 0);
+__decorate([
+    attr
+], Divider$1.prototype, "orientation", void 0);
+
+var css_248z = ":host {\n  display: block;\n}\n\n.base {\n  display: block;\n  background-color: var(--vvd-color-neutral-30);\n}\n.base:not(.vertical) {\n  block-size: 1px;\n  inline-size: 100%;\n}\n.base.vertical {\n  block-size: 100%;\n  inline-size: 1px;\n}";
+styleInject(css_248z);
+
+class Divider extends Divider$1 {}
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  orientation
+}) => classNames('base', [`${orientation}`, Boolean(orientation)]);
+
+const DividerTemplate = () => html(_t || (_t = _` 
+  <span
+  class="${0}"
+  	orientation="${0}"
+  	role="${0}"
+  ></span>`), getClasses, x => x.orientation, x => x.role);
+
+const vividDivider = Divider.compose({
+  baseName: 'divider',
+  template: DividerTemplate,
+  styles: css_248z
+});
+designSystem.register(vividDivider());
+
+export { vividDivider };

package/fab/index.js

@@ -6,7 +6,7 @@ import { A as AffixIconWithTrailing, a as affixIconTemplateFactory } from '../sh
 import { B as Button } from '../shared/button.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
 import { f as focusTemplateFactory } from '../shared/focus2.js';
-import { r as ref } from '../shared/ref.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/export.js';
@@ -18,7 +18,6 @@ import '../shared/focus.js';
 import '../shared/web.dom-collections.iterator.js';
 import '../shared/object-keys.js';
 import '../shared/form-associated.js';
-import '../shared/aria-global.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 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  border: 0 none;\n  background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .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:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control.density-extended {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: 40px;\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):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n  font-size: 20px;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);

package/header/index.js

@@ -7,7 +7,7 @@ import '../shared/export.js';
 import '../shared/object-keys.js';
 import '../shared/iterators.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  --_header-block-size: 64px;\n  block-size: var(--_header-block-size);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  block-size: inherit;\n  color: var(--vvd-color-on-canvas);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n}\n\n.app-content {\n  --_header-block-size: 64px;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  --_header-block-size: 64px;\n  z-index: 1;\n  block-size: var(--_header-block-size);\n  inline-size: 100%;\n}\n.base .header-content {\n  display: inline-flex;\n  align-items: center;\n  column-gap: 4px;\n}\n\n.container {\n  display: flex;\n  box-sizing: border-box;\n  justify-content: space-between;\n  block-size: inherit;\n  color: var(--vvd-color-on-canvas);\n  column-gap: 12px;\n  padding-block: 8px;\n  padding-inline: 16px;\n}\n.container[part~=vvd-theme-alternate] {\n  background-color: var(--vvd-color-canvas);\n}\n\n.app-content {\n  --_header-block-size: 64px;\n}";
 styleInject(css_248z);
 
 class Header extends FoundationElement {

package/index.js

@@ -18,6 +18,7 @@ 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 { vividText } from './text/index.js';
 export { vividTextfield } from './text-field/index.js';
@@ -44,7 +45,6 @@ import './shared/enums.js';
 import './shared/button.js';
 import './shared/form-associated.js';
 import './shared/aria-global.js';
-import './shared/ref.js';
 import './shared/slotted.js';
 import './shared/breadcrumb-item.js';
 import './shared/anchor.js';

package/lib/components.d.ts

@@ -18,6 +18,7 @@ export * from './popup';
 export * from './progress';
 export * from './progress-ring';
 export * from './side-drawer';
+export * from './sidenav';
 export * from './sidenav-item';
 export * from './text';
 export * from './text-field';

package/lib/divider/divider.d.ts

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

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

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

package/lib/divider/index.d.ts

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

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

@@ -1,14 +1,7 @@
-import 'blocking-elements';
-import 'wicg-inert';
-import 'babel-polyfill';
 import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class SideDrawer extends FoundationElement {
-    #private;
-    asideEl: HTMLElement;
-    scrimEl: any;
     alternate: boolean;
     modal: boolean;
     open: boolean;
     position?: 'start' | 'end';
-    attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }

package/lib/sidenav/index.d.ts

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

package/lib/sidenav/sidenav.d.ts

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

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

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.29",
+  "version": "3.0.0-next.31",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
@@ -25,11 +25,13 @@
     "./progress": "./progress",
     "./progress-ring": "./progress-ring",
     "./side-drawer": "./side-drawer",
+    "./sidenav": "./sidenav",
     "./sidenav-item": "./sidenav-item",
     "./text": "./text",
     "./text-field": "./text-field",
     "./tooltip": "./tooltip",
-    "./checkbox": "./checkbox"
+    "./checkbox": "./checkbox",
+    "./divider": "./divider"
   },
   "typings": "./index.d.ts",
   "dependencies": {
@@ -37,10 +39,7 @@
     "@microsoft/fast-foundation": "^2.46.9",
     "@microsoft/fast-web-utilities": "^5.4.1",
     "ramda": "^0.27.2",
-    "@floating-ui/dom": "^0.5.2",
-    "blocking-elements": "^0.1.1",
-    "wicg-inert": "^3.1.2",
-    "babel-polyfill": "^6.26.0"
+    "@floating-ui/dom": "^0.5.2"
   },
   "peerDependencies": {}
 }

package/popup/index.js

@@ -6,9 +6,10 @@ import { o as objectCreate } from '../shared/web.dom-collections.iterator.js';
 import '../shared/es.object.assign.js';
 import { j as anObject$3, e as fails$5, g as global$3, v as functionCall, f as functionUncurryThis, Q as shared$1, y as internalState, _ as _export, w as wellKnownSymbol$2, u as defineBuiltIn$1, K as createNonEnumerableProperty$1, x as isObject$1, c as classofRaw, B as requireObjectCoercible$2, R as toIntegerOrInfinity$1, S as toPropertyKey$1, o as objectDefineProperty, J as createPropertyDescriptor$1, A as lengthOfArrayLike$1, T as toAbsoluteIndex$1, i as isCallable$1, U as toLength$1, z as getMethod$1 } from '../shared/export.js';
 import { t as toString$3 } from '../shared/to-string.js';
+import { a as keyEscape } from '../shared/form-associated.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { w as when } from '../shared/when.js';
-import { r as ref } from '../shared/ref.js';
+import { r as ref } from '../shared/aria-global.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../icon/index.js';
 import '../shared/iterators.js';
@@ -18,8 +19,6 @@ import '../shared/focus.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
-import '../shared/form-associated.js';
-import '../shared/aria-global.js';
 import '../shared/focus2.js';
 import '../shared/object-keys.js';
 
@@ -1928,7 +1927,7 @@ const computePosition = (reference, floating, options) => computePosition$1(refe
   ...options
 });
 
-var _Popup_instances, _Popup_arrowPosition_get, _Popup_padding_get, _Popup_distance_get, _Popup_strategy_get, _Popup_middleware_get, _Popup_cleanup, _Popup_anchorEl, _Popup_assignPopupPosition, _Popup_assignArrowPosition, _Popup_getAnchorById;
+var _Popup_instances, _Popup_arrowPosition_get, _Popup_padding_get, _Popup_distance_get, _Popup_strategy_get, _Popup_middleware_get, _Popup_cleanup, _Popup_anchorEl, _Popup_assignPopupPosition, _Popup_assignArrowPosition, _Popup_getAnchorById, _Popup_handleKeydown;
 class Popup extends FoundationElement {
   constructor() {
     super();
@@ -1947,14 +1946,15 @@ class Popup extends FoundationElement {
   }
 
   disconnectedCallback() {
-    var _a;
+    var _a, _b;
 
     super.disconnectedCallback();
-    (_a = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
+    (_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));
+    (_b = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _b === void 0 ? void 0 : _b.call(this);
   }
 
   attributeChangedCallback(name, oldValue, newValue) {
-    var _a;
+    var _a, _b;
 
     super.attributeChangedCallback(name, oldValue, newValue);
 
@@ -1963,6 +1963,7 @@ class Popup extends FoundationElement {
         {
           __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));
           break;
         }
     }
@@ -1970,7 +1971,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 {
-      (_a = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _a === void 0 ? void 0 : _a.call(this);
+      (_b = __classPrivateFieldGet(this, _Popup_cleanup, "f")) === null || _b === void 0 ? void 0 : _b.call(this);
     }
   }
 
@@ -2047,6 +2048,12 @@ _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/shared/aria-global.js

@@ -1,5 +1,42 @@
-import { h as html, _ as __decorate, a as attr } from './index.js';
-import { r as ref } from './ref.js';
+import { A as AttachedBehaviorHTMLDirective, h as html, _ as __decorate, a as attr } from './index.js';
+
+/**
+ * The runtime behavior for template references.
+ * @public
+ */
+class RefBehavior {
+    /**
+     * Creates an instance of RefBehavior.
+     * @param target - The element to reference.
+     * @param propertyName - The name of the property to assign the reference to.
+     */
+    constructor(target, propertyName) {
+        this.target = target;
+        this.propertyName = propertyName;
+    }
+    /**
+     * Bind this behavior to the source.
+     * @param source - The source to bind to.
+     * @param context - The execution context that the binding is operating within.
+     */
+    bind(source) {
+        source[this.propertyName] = this.target;
+    }
+    /**
+     * Unbinds this behavior from the source.
+     * @param source - The source to unbind from.
+     */
+    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
+    unbind() { }
+}
+/**
+ * A directive that observes the updates a property with a reference to the element.
+ * @param propertyName - The name of the property to assign the reference to.
+ * @public
+ */
+function ref(propertyName) {
+    return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
+}
 
 /**
  * A mixin class implementing start and end elements.
@@ -116,4 +153,4 @@ __decorate([
     attr({ attribute: "aria-roledescription" })
 ], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
 
-export { ARIAGlobalStatesAndProperties as A, StartEnd as S };
+export { ARIAGlobalStatesAndProperties as A, StartEnd as S, ref as r };

package/shared/export.js

@@ -969,4 +969,4 @@ var _export = function (options, source) {
   }
 };
 
-export { lengthOfArrayLike$1 as A, requireObjectCoercible$2 as B, functionName as C, v8PrototypeDefineBug as D, toIndexedObject$3 as E, hiddenKeys$3 as F, sharedKey$1 as G, enumBugKeys$1 as H, toObject$1 as I, createPropertyDescriptor$2 as J, createNonEnumerableProperty$3 as K, objectKeysInternal as L, indexedObject as M, objectGetOwnPropertySymbols as N, objectPropertyIsEnumerable as O, copyConstructorProperties$1 as P, shared$3 as Q, toIntegerOrInfinity$2 as R, toPropertyKey$2 as S, toAbsoluteIndex$1 as T, toLength$1 as U, commonjsGlobal as V, _export as _, getBuiltIn$3 as a, objectIsPrototypeOf as b, classofRaw as c, descriptors as d, fails$8 as e, functionUncurryThis as f, global$a as g, inspectSource$2 as h, isCallable$a as i, anObject$2 as j, functionBindNative as k, aCallable$1 as l, engineUserAgent as m, documentCreateElement as n, objectDefineProperty as o, hasOwnProperty_1 as p, objectGetOwnPropertyDescriptor as q, isForced_1 as r, engineV8Version as s, tryToString$1 as t, defineBuiltIn$1 as u, functionCall as v, wellKnownSymbol$1 as w, isObject$5 as x, internalState as y, getMethod$1 as z };
+export { lengthOfArrayLike$1 as A, requireObjectCoercible$2 as B, functionName as C, v8PrototypeDefineBug as D, toIndexedObject$3 as E, hiddenKeys$3 as F, sharedKey$1 as G, enumBugKeys$1 as H, toObject$1 as I, createPropertyDescriptor$2 as J, createNonEnumerableProperty$3 as K, objectKeysInternal as L, indexedObject as M, objectGetOwnPropertySymbols as N, objectPropertyIsEnumerable as O, copyConstructorProperties$1 as P, shared$3 as Q, toIntegerOrInfinity$2 as R, toPropertyKey$2 as S, toAbsoluteIndex$1 as T, toLength$1 as U, _export as _, getBuiltIn$3 as a, objectIsPrototypeOf as b, classofRaw as c, descriptors as d, fails$8 as e, functionUncurryThis as f, global$a as g, inspectSource$2 as h, isCallable$a as i, anObject$2 as j, functionBindNative as k, aCallable$1 as l, engineUserAgent as m, documentCreateElement as n, objectDefineProperty as o, hasOwnProperty_1 as p, objectGetOwnPropertyDescriptor as q, isForced_1 as r, engineV8Version as s, tryToString$1 as t, defineBuiltIn$1 as u, functionCall as v, wellKnownSymbol$1 as w, isObject$5 as x, internalState as y, getMethod$1 as z };

package/shared/form-associated.js

@@ -77,6 +77,7 @@ var KeyCodes;
     KeyCodes[KeyCodes["windowsRight"] = 92] = "windowsRight";
 })(KeyCodes || (KeyCodes = {}));
 const keyEnter = "Enter";
+const keyEscape = "Escape";
 const keySpace = " ";
 
 const proxySlotName = "form-associated-proxy";
@@ -544,4 +545,4 @@ function CheckableFormAssociated(BaseCtor) {
     return D;
 }
 
-export { CheckableFormAssociated as C, FormAssociated as F, keySpace as k };
+export { CheckableFormAssociated as C, FormAssociated as F, keyEscape as a, keySpace as k };

package/shared/text-anchor.template.js

@@ -1,7 +1,7 @@
 import { a as affixIconTemplateFactory } from './affix.js';
 import { f as focusTemplateFactory } from './focus2.js';
 import { h as html } from './index.js';
-import { r as ref } from './ref.js';
+import { r as ref } from './aria-global.js';
 import { c as classNames } from './class-names.js';
 
 let _ = t => t,