@jsekulowicz/ds-components 0.18.2 → 0.19.0

package/dist/templates/page-shell/page-shell.styles.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAsJ3B,CAAC"}
+{"version":3,"file":"page-shell.styles.d.ts","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.styles.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,eAAe,yBAoP3B,CAAC"}

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

@@ -4,6 +4,8 @@ const belowDesktopBreakpoint = unsafeCSS(`calc(${breakpoint.lg} - 0.02px)`);
 export const pageShellStyles = css `
   :host {
     --ds-page-shell-max-width: none;
+    --ds-page-shell-aside-toggle-clearance:
+      calc(var(--ds-size-sm) / 2);
 
     display: flex;
     flex-direction: column;
@@ -54,33 +56,62 @@ export const pageShellStyles = css `
     max-width: var(--ds-page-shell-max-width);
     margin-inline: auto;
     display: grid;
-    grid-template-columns: auto 1fr auto;
+    grid-template-columns: auto minmax(0, 1fr) auto;
     min-height: 0;
   }
 
-  :host([aside-empty]) .shell-body {
-    grid-template-columns: 1fr auto;
+  .presence-slot {
+    display: none;
+  }
+
+  .aside-start-cluster,
+  .aside-end-cluster {
+    display: grid;
+    grid-template-columns: 1fr;
+    position: relative;
+    min-width: 0;
+    min-height: 0;
+    transition: grid-template-columns var(--ds-duration-slow) var(--ds-easing-standard);
   }
 
-  :host([aside-end-empty]) .shell-body {
-    grid-template-columns: auto 1fr;
+  .aside-start-cluster {
+    grid-column: 1;
+    border-inline-end: 1px solid var(--ds-color-border);
   }
 
-  :host([aside-empty][aside-end-empty]) .shell-body {
-    grid-template-columns: 1fr;
+  .aside-end-cluster {
+    grid-column: 3;
+    border-inline-start: 1px solid var(--ds-color-border);
+  }
+
+  main {
+    grid-column: 2;
   }
 
   aside {
     display: flex;
+    box-sizing: border-box;
     overflow-x: clip;
     overflow-y: auto;
     overflow-clip-margin-inline: var(--ds-space-2);
+    min-width: 0;
     min-height: 0;
-    scrollbar-color: var(--ds-color-fg-subtle) transparent;
-    scrollbar-width: thin;
-    /* No scrollbar-gutter reservation: the aside sits flush with its column
-       edge so the consumer's <main> solely owns the gap. The scrollbar
-       appears on demand when the aside genuinely overflows. */
+    --ds-scroll-fade-depth: var(--ds-space-12, 3rem);
+    scrollbar-width: none;
+    mask-image: var(--ds-scroll-fade-mask);
+    transition: opacity var(--ds-duration-slow) var(--ds-easing-standard);
+  }
+
+  aside::-webkit-scrollbar {
+    display: none;
+  }
+
+  :host([aside-toggle]) aside[part="aside"] {
+    padding-inline-end: var(--ds-page-shell-aside-toggle-clearance);
+  }
+
+  :host([aside-end-toggle]) aside[part="aside-end"] {
+    padding-inline-start: var(--ds-page-shell-aside-toggle-clearance);
   }
 
   :host([aside-empty]) aside[part="aside"],
@@ -92,6 +123,66 @@ export const pageShellStyles = css `
     display: none;
   }
 
+  aside[hidden] {
+    display: none;
+  }
+
+  /* Collapsing to 0fr animates the grid track from its content width to zero
+     without measuring it in JS; the aside clips via overflow + min-width: 0.
+     The cluster keeps a small min-width so the toggle button that straddles
+     its edge never touches the viewport edge. */
+  :host([aside-state='hidden']) .aside-start-cluster,
+  :host([aside-end-state='hidden']) .aside-end-cluster {
+    grid-template-columns: 0fr;
+    min-width: calc(var(--ds-size-sm) / 2 + var(--ds-space-2));
+  }
+
+  :host([aside-state='hidden']) aside[part="aside"],
+  :host([aside-end-state='hidden']) aside[part="aside-end"] {
+    padding-inline: 0;
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  :host([aside-state='compact']) aside[part="aside"] ::slotted(ds-sidenav) {
+    width: var(--ds-sidenav-collapsed-width, var(--ds-space-14, 3.5rem)) !important;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .aside-start-cluster,
+    .aside-end-cluster,
+    aside {
+      transition: none;
+    }
+  }
+
+  .aside-toggle-rail {
+    position: absolute;
+    inset-block-start: var(--ds-space-5);
+    z-index: 1;
+    width: var(--ds-size-sm);
+    min-width: var(--ds-size-sm);
+    height: var(--ds-size-sm);
+  }
+
+  .aside-toggle-start-rail {
+    inset-inline-end: calc(var(--ds-size-sm) / -2);
+  }
+
+  .aside-toggle-end-rail {
+    inset-inline-start: calc(var(--ds-size-sm) / -2);
+  }
+
+  .aside-toggle::part(button) {
+    flex-shrink: 0;
+    background: var(--ds-color-bg);
+    border-color: var(--ds-color-border);
+  }
+
+  .aside-toggle:hover::part(button) {
+    background: var(--ds-color-bg-subtle);
+  }
+
   main {
     padding: var(--ds-space-5);
     overflow-x: clip;
@@ -129,6 +220,9 @@ export const pageShellStyles = css `
   :host([mobile-layout]) .shell-body {
     grid-template-columns: 1fr;
   }
+  :host([mobile-layout]) main {
+    grid-column: 1;
+  }
   :host([mobile-layout]) aside[part="aside-end"] {
     display: none;
   }

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4C5C,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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;uBAqMX,sBAAsB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+C5C,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jsekulowicz/ds-components",
-  "version": "0.18.2",
+  "version": "0.19.0",
   "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
   "license": "UNLICENSED",
   "repository": {