@jsekulowicz/ds-components 0.9.13 → 0.11.0

package/dist/templates/page-shell/page-shell.styles.js

@@ -3,7 +3,7 @@ import { breakpoint } from '@jsekulowicz/ds-tokens';
 const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
 export const pageShellStyles = css `
   :host {
-    --ds-page-shell-max-width: 90rem;
+    --ds-page-shell-max-width: none;
 
     display: flex;
     flex-direction: column;
@@ -84,7 +84,7 @@ export const pageShellStyles = css `
   }
 
   :host([aside-empty]) aside[part="aside"],
-  :host([aside-empty]) .mobile-backdrop {
+  :host([aside-empty]) ds-drawer[part="aside"] {
     display: none;
   }
 
@@ -117,8 +117,7 @@ export const pageShellStyles = css `
   .menu-toggle {
     display: none;
   }
-  .menu-toggle::part(button),
-  .drawer-close::part(button) {
+  .menu-toggle::part(button) {
     min-width: var(--ds-size-sm);
     width: var(--ds-size-sm);
     padding: 0;
@@ -127,72 +126,22 @@ export const pageShellStyles = css `
     display: inline-flex;
   }
 
-  .mobile-backdrop {
-    display: none;
-  }
-  .drawer-header {
-    display: none;
-  }
-  .drawer-brand {
-    display: none;
-  }
-  .drawer-close {
-    display: none;
-  }
-
   :host([mobile-layout]) .shell-body {
     grid-template-columns: 1fr;
   }
   :host([mobile-layout]) aside[part="aside-end"] {
-    /* Secondary inline-end region is not surfaced in the mobile drawer in v1.
-       Consumers can opt back in by overriding via ::part(aside-end). */
     display: none;
   }
-  :host([mobile-layout]) aside[part="aside"] {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 16rem;
-    display: flex;
-    flex-direction: column;
-    height: 100%;
-    background: var(--ds-color-bg);
-    border-right: 0;
-    z-index: var(--ds-z-index-modal);
-    transform: translateX(-100%);
-    transition: transform var(--ds-duration-slow) var(--ds-easing-standard);
-    scrollbar-gutter: auto;
-    overflow: hidden;
-    box-sizing: border-box;
-  }
-  :host([mobile-layout][data-mobile-nav-open]) aside[part="aside"] {
-    transform: translateX(0);
-  }
-  :host([mobile-layout]) .drawer-header {
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    gap: var(--ds-space-3);
-    padding: var(--ds-space-2) var(--ds-space-4);
-  }
-  :host([mobile-layout]) .drawer-brand {
-    display: inline-flex;
-    align-items: center;
-    flex: 1;
-    min-width: 0;
-    font-family: var(--ds-font-display);
-    font-size: var(--ds-font-size-lg);
-    letter-spacing: var(--ds-letter-spacing-display);
-  }
-  :host([mobile-layout]) slot[name='drawer-brand']::slotted(*) {
-    max-width: 100%;
-  }
-  :host([mobile-layout]) .drawer-close {
-    display: inline-flex;
-    flex: 0 0 auto;
-    margin: 0;
+  :host([mobile-layout]) ds-drawer[part="aside"] {
+    /* Top-layer modal; don't reserve a grid column when closed. */
+    display: contents;
+    --ds-drawer-card-padding: 0;
+    --ds-drawer-title-padding: var(--ds-space-3) var(--ds-space-4);
+    --ds-drawer-title-bg: var(--ds-page-shell-drawer-header-bg, transparent);
+    --ds-drawer-title-fg: var(--ds-page-shell-drawer-header-fg, inherit);
+    --ds-drawer-title-border-color: var(--ds-page-shell-drawer-header-border-color, transparent);
   }
-  :host([mobile-layout]) aside[part="aside"] ::slotted(ds-sidenav) {
+  :host([mobile-layout]) ds-drawer[part="aside"] ::slotted(ds-sidenav) {
     width: 100% !important;
     max-width: 100% !important;
     flex: 1 1 auto;
@@ -200,15 +149,5 @@ export const pageShellStyles = css `
     min-height: 0;
     height: auto !important;
   }
-  :host([mobile-layout][data-mobile-nav-open]) .mobile-backdrop {
-    display: block;
-    position: absolute;
-    inset: 0;
-    border: 0;
-    margin: 0;
-    padding: 0;
-    background: color-mix(in oklab, var(--ds-color-fg) 26%, transparent);
-    z-index: var(--ds-z-index-overlay);
-  }
 `;
 //# sourceMappingURL=page-shell.styles.js.map

package/dist/templates/page-shell/page-shell.styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"page-shell.styles.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0GX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuG5C,CAAC"}
+{"version":3,"file":"page-shell.styles.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,MAAM,KAAK,CAAC;AACrC,OAAO,EAAE,UAAU,EAAE,MAAM,wBAAwB,CAAC;AAEpD,MAAM,sBAAsB,GAAG,SAAS,CAAC,QAAQ,UAAU,CAAC,EAAE,YAAY,CAAC,CAAC;AAE5E,MAAM,CAAC,MAAM,eAAe,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBA0GX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0C5C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsekulowicz/ds-components",
-  "version": "0.9.13",
+  "version": "0.11.0",
   "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
   "license": "UNLICENSED",
   "repository": {
@@ -207,6 +207,13 @@
     "./dialog/define": {
       "import": "./dist/molecules/dialog/define.js"
     },
+    "./drawer": {
+      "types": "./dist/molecules/drawer/index.d.ts",
+      "import": "./dist/molecules/drawer/index.js"
+    },
+    "./drawer/define": {
+      "import": "./dist/molecules/drawer/define.js"
+    },
     "./toast": {
       "types": "./dist/molecules/toast/index.d.ts",
       "import": "./dist/molecules/toast/index.js"