@vonage/vivid 3.0.0-next.34 → 3.0.0-next.37

package/dialog/index.js

@@ -24,7 +24,7 @@ import '../shared/object-keys.js';
 var css_248z$1 = "dialog {\n  position: absolute;\n  left: 0; right: 0;\n  width: -moz-fit-content;\n  width: fit-content;\n  height: -moz-fit-content;\n  height: fit-content;\n  margin: auto;\n  border: solid;\n  padding: 1em;\n  background: white;\n  color: black;\n  display: block;\n}\n\ndialog:not([open]) {\n  display: none;\n}\n\ndialog + .backdrop {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n  background: rgba(0,0,0,0.1);\n}\n\n._dialog_overlay {\n  position: fixed;\n  top: 0; right: 0; bottom: 0; left: 0;\n}\n\ndialog.fixed {\n  position: fixed;\n  top: 50%;\n  transform: translate(0, -50%);\n}";
 styleInject(css_248z$1);
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background-color: var(--_elevation-fill);\n  border-radius: 6px;\n  color: var(--vvd-color-on-canvas);\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n\n.main-wrapper {\n  padding: 24px;\n}\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 4px;\n  inline-size: 100%;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  margin-top: -8px;\n  margin-right: -8px;\n}\n\n.headline {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.headline-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  row-gap: 24px;\n}\n\n.content {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  margin-top: 8px;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.base {\n  box-sizing: border-box;\n  padding: 0;\n  border: none;\n  background-color: var(--_elevation-fill);\n  border-radius: 6px;\n  color: var(--vvd-color-on-canvas);\n  max-block-size: var(--dialog-max-block-size, calc(100vh - 64px));\n  max-inline-size: var(--dialog-max-inline-size);\n  min-inline-size: var(--dialog-min-inline-size, 280px);\n  overflow-x: hidden;\n  overflow-y: auto;\n}\n@media not all and (min-width: 600px) {\n  .base {\n    --dialog-max-inline-size: 90vw;\n  }\n}\n@media (min-width: 600px) {\n  .base {\n    --dialog-max-inline-size: 560px;\n  }\n}\n.base:not(.modal) {\n  z-index: var(--dialog-z-index, 1);\n}\n\n.main-wrapper {\n  display: flex;\n  flex-direction: column;\n  padding: 24px;\n  gap: 8px;\n}\n\n.header {\n  display: flex;\n  align-items: flex-start;\n  justify-content: space-between;\n  gap: 4px;\n  inline-size: 100%;\n}\n\n.dismiss-button {\n  flex-shrink: 0;\n  margin-top: -8px;\n  margin-right: -8px;\n}\n\n.headline {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.headline-wrapper {\n  display: flex;\n  flex-direction: column;\n  align-items: flex-start;\n  row-gap: 24px;\n}\n\n.content {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}";
 styleInject(css_248z);
 
 var _Dialog_instances, _Dialog_modal, _Dialog_dialogElement, _Dialog_dialog_get, _Dialog_handleScrimClick, _Dialog_handleInternalFormSubmit, _Dialog_handleModal;

package/header/index.js

@@ -47,7 +47,7 @@ const headerTemplate = context => {
             <slot></slot>
           </section>
           <section class="header-content" role="toolbar">
-            <slot name="actionItems"></slot>
+            <slot name="action-items"></slot>
           </section>
         </div>
       </header>

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

@@ -3,5 +3,5 @@ export declare class SideDrawer extends FoundationElement {
     alternate: boolean;
     modal: boolean;
     open: boolean;
-    position?: 'start' | 'end';
+    trailing: boolean;
 }

package/package.json

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

package/side-drawer/index.js

@@ -13,6 +13,7 @@ class SideDrawer extends FoundationElement {
     this.alternate = false;
     this.modal = false;
     this.open = false;
+    this.trailing = false;
   }
 
 }
@@ -29,9 +30,11 @@ __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], SideDrawer.prototype, "open", void 0);
 
-__decorate([attr, __metadata("design:type", String)], SideDrawer.prototype, "position", void 0);
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], SideDrawer.prototype, "trailing", void 0);
 
-var css_248z = ".control {\n  position: fixed;\n  z-index: 1;\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.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  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
+var css_248z = ".control {\n  position: fixed;\n  z-index: 1;\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.alternate {\n  background-color: var(--vvd-color-canvas);\n}\n.control.trailing {\n  inset-inline-end: 0;\n}\n.control:not(.open).trailing {\n  transform: translateX(100%);\n}\n.control:not(.open):not(.trailing) {\n  transform: translateX(-100%);\n}\n.control.open:not(.modal).trailing + .side-drawer-app-content {\n  margin-inline-end: var(--side-drawer-app-content-offset, 280px);\n}\n.control.open:not(.modal):not(.trailing) + .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  inset: 0;\n}\n.scrim:not(.open) {\n  display: none;\n}";
 styleInject(css_248z);
 
 let _ = t => t,
@@ -42,8 +45,8 @@ const getClasses = ({
   alternate,
   modal,
   open,
-  position
-}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], [`position-${position}`, Boolean(position)]);
+  trailing
+}) => classNames('control', ['alternate', alternate], ['modal', modal], ['open', open], ['trailing', trailing]);
 
 const getScrimClasses = ({
   open