@vonage/vivid 3.0.0-next.28 → 3.0.0-next.30

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/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/card/index.js

@@ -1,4 +1,4 @@
-import '../elevation/index.js';
+import '../shared/index2.js';
 import '../icon/index.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, o as observable, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';

package/elevation/index.js

@@ -1,31 +1,4 @@
-import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
-import { c as classNames } from '../shared/class-names.js';
-
-class Elevation extends FoundationElement {}
-
-__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
-
-var css_248z = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.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,
-    _t;
-
-const getClasses = ({
-  dp
-}) => classNames('control', [`dp-${dp}`, Boolean(dp)]);
-
-const elevationTemplate = () => html(_t || (_t = _`
-        <div class="${0}" part="base">
-			<slot></slot>
-		</div>`), getClasses);
-
-const vividElevation = Elevation.compose({
-  baseName: 'elevation',
-  template: elevationTemplate,
-  styles: css_248z
-});
-designSystem.register(vividElevation());
-
-export { vividElevation };
+import '../shared/index.js';
+export { v as vividElevation } from '../shared/index2.js';
+import '../shared/style-inject.es.js';
+import '../shared/class-names.js';

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

@@ -1,84 +1,61 @@
-import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, o as observable, v as volatile, h as html, d as designSystem } from '../shared/index.js';
+import { E as Elevation } from '../shared/index2.js';
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
-import { w as when } from '../shared/when.js';
 import { c as classNames } from '../shared/class-names.js';
 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:host {\n  --header-z-index: 7;\n}\n\n.control {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  z-index: var(--header-z-index);\n  display: flex;\n  width: 100%;\n  height: 64px;\n  box-sizing: border-box;\n  justify-content: space-between;\n  padding: 8px 12px;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-on-canvas);\n  column-gap: 12px;\n}\n.control.fixed {\n  position: fixed;\n}\n.control.fixed.elevated {\n  box-shadow: 0 0 10px rgba(0, 0, 0, 0.4);\n  transition: all 0.15s linear;\n}\n.control .header-content {\n  display: inline-flex;\n  flex: 1;\n  align-items: center;\n}\n.control .start {\n  justify-content: flex-start;\n}\n.control .start .heading {\n  padding-left: 20px;\n}\n.control .end {\n  justify-content: flex-end;\n}\n\n.control.fixed + .app-content {\n  padding-top: 64px;\n}\n.control.fixed + .app-content ::slotted(vwc-side-drawer) {\n  block-size: calc(100vh - 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);
 
-var _Header_updateElevatedState;
 class Header extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.fixed = false;
+    this.elevationShadow = false;
     this.alternate = false;
-    this._elevated = false;
-
-    _Header_updateElevatedState.set(this, () => {
-      this._elevated = !this._elevated;
-    });
-  }
-
-  connectedCallback() {
-    super.connectedCallback();
-    window.addEventListener('scroll', __classPrivateFieldGet(this, _Header_updateElevatedState, "f"));
-  }
-
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    window.removeEventListener('scroll', __classPrivateFieldGet(this, _Header_updateElevatedState, "f"));
-  }
-
-  get elevated() {
-    return this._elevated && false || this.fixed && window.pageYOffset > 0;
   }
 
 }
-_Header_updateElevatedState = new WeakMap();
-
-__decorate([attr, __metadata("design:type", String)], Header.prototype, "heading", void 0);
 
 __decorate([attr({
+  attribute: 'elevation-shadow',
   mode: 'boolean'
-}), __metadata("design:type", Object)], Header.prototype, "fixed", void 0);
+}), __metadata("design:type", Object)], Header.prototype, "elevationShadow", void 0);
 
 __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], Header.prototype, "alternate", void 0);
 
-__decorate([observable, __metadata("design:type", Object)], Header.prototype, "_elevated", void 0);
-
-__decorate([volatile, __metadata("design:type", Object), __metadata("design:paramtypes", [])], Header.prototype, "elevated", null);
-
 let _ = t => t,
-    _t,
-    _t2;
+    _t;
 
-const getClasses = ({
-  fixed,
-  alternate,
-  elevated
-}) => classNames('control', ['fixed', Boolean(fixed)], ['alternate', Boolean(alternate)], ['elevated', Boolean(elevated)]);
+const getPartAlternate = ({
+  alternate
+}) => classNames(['vvd-theme-alternate', Boolean(alternate)]);
 
-const headerTemplate = () => {
+const headerTemplate = context => {
+  const elevationTag = context.tagFor(Elevation);
   return html(_t || (_t = _`
-    <header class="${0}" part="${0}">
-        <section class="header-content start" id="navigation">
-          <slot></slot>
-          ${0}
-        </section>
-        <section class="header-content end" id="actions" role="toolbar">
-          <slot name="actionItems"></slot>
-        </section>
-    </header>
+    <${0} dp="4" ?no-shadow=${0}>
+      <header class="base" part="base">
+        <!-- a container is needed to distinguish the surface background color of the
+        element from its shadow when applying elevation with alternate -->
+        <div class="container" part="${0}">
+          <section class="header-content">
+            <slot></slot>
+          </section>
+          <section class="header-content" role="toolbar">
+            <slot name="actionItems"></slot>
+          </section>
+        </div>
+      </header>
+    </${0}>
     <div class="app-content">
-		<slot name="app-content"></slot>
-	</div>
-	`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', when(x => x.heading, html(_t2 || (_t2 = _`<span class="heading">${0}</span>`), x => x.heading)));
+      <slot name="app-content"></slot>
+    </div>
+	`), elevationTag, x => !x.elevationShadow, getPartAlternate, elevationTag);
 };
 
 const vividHeader = Header.compose({

package/index.js

@@ -9,7 +9,7 @@ export { vividButton } from './button/index.js';
 export { vividCalendar } from './calendar/index.js';
 export { vividCalendarEvent } from './calendar-event/index.js';
 export { vividCard } from './card/index.js';
-export { vividElevation } from './elevation/index.js';
+export { v as vividElevation } from './shared/index2.js';
 export { vividFab } from './fab/index.js';
 export { vividIcon } from './icon/index.js';
 export { vividLayout } from './layout/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/elevation/elevation.d.ts

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

package/lib/header/header.d.ts

@@ -1,11 +1,5 @@
 import { FoundationElement } from '@microsoft/fast-foundation';
 export declare class Header extends FoundationElement {
-    #private;
-    heading?: string;
-    fixed: boolean;
+    elevationShadow: boolean;
     alternate: boolean;
-    _elevated: boolean;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    get elevated(): boolean;
 }

package/lib/header/index.d.ts

@@ -1,2 +1,3 @@
+import '../elevation';
 import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
 export declare const vividHeader: (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,15 +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';
-    headerSlottedContent?: HTMLElement[];
-    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.28",
+  "version": "3.0.0-next.30",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
@@ -25,6 +25,7 @@
     "./progress": "./progress",
     "./progress-ring": "./progress-ring",
     "./side-drawer": "./side-drawer",
+    "./sidenav": "./sidenav",
     "./sidenav-item": "./sidenav-item",
     "./text": "./text",
     "./text-field": "./text-field",
@@ -37,10 +38,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

@@ -1,4 +1,4 @@
-import '../elevation/index.js';
+import '../shared/index2.js';
 import '../button/index.js';
 import { F as FoundationElement, c as __classPrivateFieldGet, i as __classPrivateFieldSet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
 import { s as speciesConstructor$1, f as functionApply } from '../shared/icon.js';
@@ -8,7 +8,7 @@ import { j as anObject$3, e as fails$5, g as global$3, v as functionCall, f as f
 import { t as toString$3 } from '../shared/to-string.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';
@@ -19,7 +19,6 @@ 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';
 

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/index2.js

@@ -0,0 +1,37 @@
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from './index.js';
+import { s as styleInject } from './style-inject.es.js';
+import { c as classNames } from './class-names.js';
+
+class Elevation extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", Number)], Elevation.prototype, "dp", void 0);
+
+__decorate([attr({
+  attribute: 'no-shadow',
+  mode: 'boolean'
+}), __metadata("design:type", Boolean)], Elevation.prototype, "noShadow", void 0);
+
+var css_248z = ":host {\n  display: contents;\n}\n\n.control {\n  display: contents;\n}\n.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  transition: background-color 0.15s linear, filter 0.15s linear;\n}\n.control.no-shadow ::slotted(*) {\n  filter: none;\n}";
+styleInject(css_248z);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  dp,
+  noShadow
+}) => classNames('control', [`dp-${dp}`, Boolean(dp)], ['no-shadow', Boolean(noShadow)]);
+
+const elevationTemplate = () => html(_t || (_t = _`
+        <div class="${0}" part="base">
+			<slot></slot>
+		</div>`), getClasses);
+
+const vividElevation = Elevation.compose({
+  baseName: 'elevation',
+  template: elevationTemplate,
+  styles: css_248z
+});
+designSystem.register(vividElevation());
+
+export { Elevation as E, vividElevation as v };

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,