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

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

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

@@ -10,6 +10,5 @@ export declare class SideDrawer extends FoundationElement {
     modal: boolean;
     open: boolean;
     position?: 'start' | 'end';
-    headerSlottedContent?: HTMLElement[];
     attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.28",
+  "version": "3.0.0-next.29",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",

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

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

@@ -1,10 +1,9 @@
-import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, o as observable, h as html$2, d as designSystem } from '../shared/index.js';
+import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html$2, d as designSystem } from '../shared/index.js';
 import '../shared/web.dom-collections.iterator.js';
 import { V as commonjsGlobal } from '../shared/export.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 { s as slotted } from '../shared/slotted.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/object-keys.js';
 import '../shared/iterators.js';
@@ -8599,9 +8598,7 @@ __decorate([attr({
 
 __decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
 
-__decorate([observable, __metadata("design:type", Array)], SideDrawer.prototype, "headerSlottedContent", void 0);
-
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: flex;\n  block-size: 100vh;\n}\n\n:host([position=end]) {\n  flex-direction: row-reverse;\n}\n\n.control {\n  position: fixed;\n  z-index: var(--side-drawer-z-index, 6);\n  top: auto;\n  bottom: 0;\n  display: flex;\n  overflow: auto;\n  flex-direction: column;\n  flex-shrink: 0;\n  background-color: var(--side-drawer-background-color, var(--vvd-color-canvas));\n  block-size: inherit;\n  color: var(--side-drawer-color, var(--vvd-color-on-canvas));\n  inline-size: var(--side-drawer-inline-size, 280px);\n}\n.control.alternate {\n  background-color: var(--vvd-color-canvas);\n}\n.control:not(.open).end {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.end) {\n  transform: translateX(-100%);\n}\n.control.control.open:not(.modal) + .side-drawer-app-content {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  margin-inline-start: var(--side-drawer-inline-size, 280px);\n}\n.control.control.open:not(.modal).end + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-inline-size, 280px);\n  margin-inline-start: 0;\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.side-drawer-header {\n  font: 500 condensed 26px / 36px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  display: flex;\n  height: 64px;\n  flex-shrink: 0;\n  align-items: center;\n  padding-inline-end: var(--side-drawer-padding-header, 16px);\n  padding-inline-start: var(--side-drawer-padding-header, 16px);\n}\n:not(.withHeader) .side-drawer-header {\n  display: none;\n}\n\n.side-drawer-content {\n  background-color: inherit;\n  margin-block: 12px;\n  overflow-y: auto;\n  padding-inline-end: var(--side-drawer-padding-body, 16px);\n  padding-inline-start: var(--side-drawer-padding-body, 16px);\n}\n\n.modal:not(.end) {\n  inset-inline-start: 0;\n}\n.modal.end {\n  inset-inline-end: 0;\n}\n\n.scrim {\n  background-color: var(--vvd-color-on-canvas);\n  opacity: 0.5;\n  position: fixed;\n  z-index: calc(--side-drawer-z-index - 1);\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
+var css_248z = ".control {\n  position: fixed;\n  background-color: var(--vvd-color-canvas);\n  color: var(--vvd-color-on-canvas);\n  inline-size: 280px;\n  inset-block: 0;\n  overflow-y: auto;\n}\n.control.modal {\n  z-index: 1;\n}\n.control.alternate {\n  background-color: var(--vvd-color-canvas);\n}\n.control.position-end {\n  inset-inline-end: 0;\n}\n.control:not(.open).position-end {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.position-end) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).position-end + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.position-end) + .side-drawer-app-content {\n  margin-inline-start: var(--side-drawer-app-content-offset, 280px);\n}\n@media (prefers-reduced-motion: no-preference) {\n  .control {\n    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1);\n  }\n}\n\n.scrim {\n  background-color: var(--vvd-color-on-canvas);\n  opacity: 0.5;\n  position: fixed;\n  top: 0;\n  right: 0;\n  bottom: 0;\n  left: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 styleInject(css_248z);
 
 let _ = t => t,
@@ -8612,25 +8609,19 @@ const getClasses = ({
   alternate,
   modal,
   open,
-  position,
-  headerSlottedContent
-}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['end', position === 'end'], ['withHeader', Boolean(headerSlottedContent === null || headerSlottedContent === void 0 ? void 0 : headerSlottedContent.length)]);
+  position
+}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], [`position-${position}`, Boolean(position)]);
 
 const getScrimClasses = ({
   open
 }) => classNames('scrim', ['open', open]);
 
 const sideDrawerTemplate = () => html$2(_t || (_t = _`
-	<aside class="${0}" part="${0}"
+	<aside class="${0}" part="base ${0}"
 	 @keydown="${0}" ${0}>
 
-	 	<header class="side-drawer-header" part="side-drawer-header">
-	 		<slot name="header" ${0}></slot>
- 		</header>
+    <slot></slot>
 
-		<div class="side-drawer-content">
-			<slot></slot>
-		</div>
 	</aside>
 
 	<div class="side-drawer-app-content">
@@ -8638,7 +8629,7 @@ const sideDrawerTemplate = () => html$2(_t || (_t = _`
 	</div>
 
 	${0}
-`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), ref('asideEl'), slotted('headerSlottedContent'), when(x => x.modal, html$2(_t2 || (_t2 = _`<div class="${0}" ${0} @click="${0}"></div>`), getScrimClasses, ref('scrimEl'), x => x.open = false)));
+`), getClasses, x => x.alternate ? 'vvd-theme-alternate' : '', (x, c) => handleKeydown(x, c.event), ref('asideEl'), when(x => x.modal, html$2(_t2 || (_t2 = _`<div class="${0}" ${0} @click="${0}"></div>`), getScrimClasses, ref('scrimEl'), x => x.open = false)));
 
 const handleKeydown = (x, {
   key

package/tooltip/index.js

@@ -3,7 +3,7 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h
 import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../elevation/index.js';
+import '../shared/index2.js';
 import '../button/index.js';
 import '../icon/index.js';
 import '../shared/icon.js';