@vonage/vivid - npm Package Compare versions

Comparing version 3.0.0-next.34 to 3.0.0-next.35

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

@@ -6,3 +6,3 @@ import { FoundationElement } from '@microsoft/fast-foundation';
     open: boolean;
-    position?: 'start' | 'end';
+    trailing: boolean;
 }

package.json

 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.34",
+  "version": "3.0.0-next.35",
   "type": "module",
@@ -5,0 +5,0 @@ "module": "./index.esm.js",

side-drawer/index.js

@@ -16,2 +16,3 @@ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
     this.open = false;
+    this.trailing = false;
   }
@@ -33,5 +34,7 @@
 
-__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);
@@ -47,4 +50,4 @@
   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]);
 
@@ -51,0 +54,0 @@ const getScrimClasses = ({

No alert changes

Improved metrics

Lines of code

16914

increased by0.02%

No dependency changes