@jsekulowicz/ds-components 0.18.1 → 0.19.0

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

@@ -8,9 +8,13 @@ import { html } from 'lit';
 import { property, state } from 'lit/decorators.js';
 import { DsElement } from '@jsekulowicz/ds-core';
 import { pageShellStyles } from './page-shell.styles.js';
+import { scrollFadeStyles } from '../../shared/scroll-fade.styles.js';
+import { ScrollFadeController } from '../../shared/scroll-fade-controller.js';
 import '../../atoms/button/define.js';
 import '../../atoms/icon/define.js';
 import '../../atoms/icon/icons/bars-3.js';
+import '../../atoms/icon/icons/chevron-left.js';
+import '../../atoms/icon/icons/chevron-right.js';
 import '../../molecules/drawer/define.js';
 import '../../organisms/top-bar/define.js';
 /**
@@ -26,6 +30,8 @@ import '../../organisms/top-bar/define.js';
  * @cssprop --ds-page-shell-max-width - Outer cap for the shell's content column. Header inner
  *   content and the aside + main row centre at this width and align vertically. Defaults to `none`.
  *   Header chrome remains full-bleed.
+ * @event ds-aside-state-change - Emitted when an opt-in desktop aside toggle changes state.
+ *   Detail: `{ side, state, previousState }`.
  */
 export class DsPageShell extends DsElement {
     constructor() {
@@ -33,6 +39,10 @@ export class DsPageShell extends DsElement {
         this.brand = '';
         this.menuLabel = 'Navigation menu';
         this.endLabel = 'Secondary navigation';
+        this.asideToggle = false;
+        this.asideEndToggle = false;
+        this.asideState = 'visible';
+        this.asideEndState = 'visible';
         this._mobileLayout = false;
         this._mobileNavOpen = false;
         this._hasAside = false;
@@ -40,6 +50,8 @@ export class DsPageShell extends DsElement {
         this._hasFooter = false;
         this.#resizeObserver = null;
         this.#slotObserver = null;
+        this._asideScrollFade = new ScrollFadeController(this, () => this.shadowRoot?.querySelector('aside[part="aside"]'));
+        this._asideEndScrollFade = new ScrollFadeController(this, () => this.shadowRoot?.querySelector('aside[part="aside-end"]'));
         this.#syncSlotPresence = () => {
             const aside = this.shadowRoot?.querySelector('slot[name="aside"]');
             const asideEnd = this.shadowRoot?.querySelector('slot[name="aside-end"]');
@@ -89,6 +101,7 @@ export class DsPageShell extends DsElement {
             const slot = event.target;
             this._hasAside = hasAssignedContent(slot);
             this.toggleAttribute('aside-empty', !this._hasAside);
+            this.#syncSlottedAsideCollapsed();
         };
         this.#onAsideEndSlotChange = (event) => {
             const slot = event.target;
@@ -100,8 +113,14 @@ export class DsPageShell extends DsElement {
             this._hasFooter = hasAssignedContent(slot);
             this.toggleAttribute('footer-empty', !this._hasFooter);
         };
+        this.#toggleAsideState = () => {
+            this.#setAsideState(this.#nextAsideState());
+        };
+        this.#toggleAsideEndState = () => {
+            this.#setAsideEndState(this.#nextAsideEndState());
+        };
     }
-    static { this.styles = [...DsElement.styles, pageShellStyles]; }
+    static { this.styles = [...DsElement.styles, scrollFadeStyles, pageShellStyles]; }
     #resizeObserver;
     #slotObserver;
     connectedCallback() {
@@ -135,6 +154,13 @@ export class DsPageShell extends DsElement {
     firstUpdated() {
         this.#syncSlotPresence();
     }
+    updated(changed) {
+        if (changed.has('asideState') ||
+            changed.has('_mobileLayout') ||
+            changed.has('_hasAside')) {
+            this.#syncSlottedAsideCollapsed();
+        }
+    }
     #syncSlotPresence;
     #syncLayout;
     #setMobileNav;
@@ -144,6 +170,56 @@ export class DsPageShell extends DsElement {
     #onAsideSlotChange;
     #onAsideEndSlotChange;
     #onFooterSlotChange;
+    #syncSlottedAsideCollapsed() {
+        const aside = this.querySelector('[slot="aside"]');
+        if (!aside || this._mobileLayout) {
+            return;
+        }
+        if (!this.asideToggle && this.asideState === 'visible') {
+            return;
+        }
+        aside.toggleAttribute('collapsed', this.asideState !== 'visible');
+    }
+    #showStartToggle() {
+        return this.asideToggle && this._hasAside && !this._mobileLayout;
+    }
+    #showEndToggle() {
+        return this.asideEndToggle && this._hasAsideEnd && !this._mobileLayout;
+    }
+    #nextAsideState() {
+        if (this.asideState === 'visible') {
+            return 'compact';
+        }
+        if (this.asideState === 'compact') {
+            return 'hidden';
+        }
+        return 'visible';
+    }
+    #nextAsideEndState() {
+        return this.asideEndState === 'visible' ? 'hidden' : 'visible';
+    }
+    #setAsideState(state) {
+        const previousState = this.asideState;
+        if (state === previousState) {
+            return;
+        }
+        this.asideState = state;
+        this.emit('ds-aside-state-change', {
+            detail: { side: 'start', state, previousState },
+        });
+    }
+    #setAsideEndState(state) {
+        const previousState = this.asideEndState;
+        if (state === previousState) {
+            return;
+        }
+        this.asideEndState = state;
+        this.emit('ds-aside-state-change', {
+            detail: { side: 'end', state, previousState },
+        });
+    }
+    #toggleAsideState;
+    #toggleAsideEndState;
     render() {
         const ariaExpanded = this._mobileNavOpen ? 'true' : 'false';
         const hasFooter = this._hasFooter || hasNamedSlotContent(this, 'footer');
@@ -169,17 +245,11 @@ export class DsPageShell extends DsElement {
         </ds-top-bar>
       </header>
       <div class="shell-body" part="body">
-        ${this._mobileLayout ? this.#renderMobileAside() : this.#renderDesktopAside()}
+        ${this._mobileLayout ? this.#renderMobileAside() : this.#renderDesktopStartCluster()}
         <main part="main">
           <slot></slot>
         </main>
-        <aside
-          part="aside-end"
-          aria-label=${this.endLabel}
-          ?hidden=${!this._hasAsideEnd}
-        >
-          <slot name="aside-end" @slotchange=${this.#onAsideEndSlotChange}></slot>
-        </aside>
+        ${this._mobileLayout ? this.#renderMobileAsideEnd() : this.#renderDesktopEndCluster()}
       </div>
       ${hasFooter
             ? html `<footer part="footer">
@@ -187,15 +257,94 @@ export class DsPageShell extends DsElement {
           </footer>`
             : null}`;
     }
-    #renderDesktopAside() {
-        return html `<aside
-      id="mobile-aside"
-      part="aside"
-      aria-label=${this.menuLabel}
-      @click=${this.#onAsideClick}
-    >
-      <slot name="aside" @slotchange=${this.#onAsideSlotChange}></slot>
-    </aside>`;
+    #renderDesktopStartCluster() {
+        if (!this._hasAside && !this.#showStartToggle()) {
+            return html `<slot name="aside" class="presence-slot" @slotchange=${this.#onAsideSlotChange}></slot>`;
+        }
+        return html `<div class="aside-start-cluster" part="aside-start-cluster">
+      <aside
+        id="desktop-aside"
+        class="scroll-fade"
+        part="aside"
+        aria-label=${this.menuLabel}
+        aria-hidden=${this.asideState === 'hidden' ? 'true' : 'false'}
+        ?hidden=${!this._hasAside}
+        ?inert=${this.asideState === 'hidden'}
+        @click=${this.#onAsideClick}
+      >
+        <slot name="aside" @slotchange=${this.#onAsideSlotChange}></slot>
+      </aside>
+      ${this.#renderStartToggle()}
+    </div>`;
+    }
+    #renderDesktopEndCluster() {
+        if (!this._hasAsideEnd && !this.#showEndToggle()) {
+            return html `<slot name="aside-end" class="presence-slot" @slotchange=${this.#onAsideEndSlotChange}></slot>`;
+        }
+        return html `<div class="aside-end-cluster" part="aside-end-cluster">
+      ${this.#renderEndToggle()}
+      <aside
+        id="desktop-aside-end"
+        class="scroll-fade"
+        part="aside-end"
+        aria-label=${this.endLabel}
+        aria-hidden=${this.asideEndState === 'hidden' ? 'true' : 'false'}
+        ?hidden=${!this._hasAsideEnd}
+        ?inert=${this.asideEndState === 'hidden'}
+      >
+        <slot name="aside-end" @slotchange=${this.#onAsideEndSlotChange}></slot>
+      </aside>
+    </div>`;
+    }
+    #renderStartToggle() {
+        if (!this.#showStartToggle()) {
+            return null;
+        }
+        const hidden = this.asideState === 'hidden';
+        const label = this.asideState === 'visible'
+            ? 'Collapse primary navigation'
+            : hidden
+                ? 'Show primary navigation'
+                : 'Hide primary navigation';
+        return html `<div class="aside-toggle-rail aside-toggle-start-rail" part="aside-toggle-rail aside-toggle-start-rail">
+      <ds-button
+        class="aside-toggle aside-toggle-start"
+        part="aside-toggle aside-toggle-start"
+        variant="secondary"
+        size="sm"
+        square
+        label=${label}
+        aria-label=${label}
+        aria-controls="desktop-aside"
+        aria-expanded=${hidden ? 'false' : 'true'}
+        @click=${this.#toggleAsideState}
+      >
+        <ds-icon slot="leading" name=${hidden ? 'chevron-right' : 'chevron-left'} size="lg"></ds-icon>
+      </ds-button>
+    </div>`;
+    }
+    #renderEndToggle() {
+        if (!this.#showEndToggle()) {
+            return null;
+        }
+        const hidden = this.asideEndState === 'hidden';
+        const label = hidden ? 'Show secondary navigation' : 'Hide secondary navigation';
+        return html `<div class="aside-toggle-rail aside-toggle-end-rail" part="aside-toggle-rail aside-toggle-end-rail">
+      <ds-button
+        class="aside-toggle aside-toggle-end"
+        part="aside-toggle aside-toggle-end"
+        variant="secondary"
+        size="sm"
+        square
+        label=${label}
+        aria-label=${label}
+        aria-controls="desktop-aside-end"
+        aria-expanded=${hidden ? 'false' : 'true'}
+        @click=${this.#toggleAsideEndState}
+      >
+        <ds-icon slot="leading" name=${hidden ? 'chevron-left' : 'chevron-right'} size="lg"></ds-icon>
+      </ds-button>
+    </div>`;
     }
     #renderMobileAside() {
         return html `<ds-drawer
@@ -213,6 +362,15 @@ export class DsPageShell extends DsElement {
       <slot name="aside" @slotchange=${this.#onAsideSlotChange}></slot>
     </ds-drawer>`;
     }
+    #renderMobileAsideEnd() {
+        return html `<aside
+      part="aside-end"
+      aria-label=${this.endLabel}
+      ?hidden=${!this._hasAsideEnd}
+    >
+      <slot name="aside-end" @slotchange=${this.#onAsideEndSlotChange}></slot>
+    </aside>`;
+    }
 }
 __decorate([
     property()
@@ -223,6 +381,18 @@ __decorate([
 __decorate([
     property({ attribute: 'end-label' })
 ], DsPageShell.prototype, "endLabel", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'aside-toggle' })
+], DsPageShell.prototype, "asideToggle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true, attribute: 'aside-end-toggle' })
+], DsPageShell.prototype, "asideEndToggle", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'aside-state' })
+], DsPageShell.prototype, "asideState", void 0);
+__decorate([
+    property({ reflect: true, attribute: 'aside-end-state' })
+], DsPageShell.prototype, "asideEndState", void 0);
 __decorate([
     state()
 ], DsPageShell.prototype, "_mobileLayout", void 0);

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

@@ -1 +1 @@
-{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"page-shell.js","sourceRoot":"","sources":["../../../src/templates/page-shell/page-shell.ts"],"names":[],"mappings":"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"}

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.1",
+  "version": "0.19.0",
   "description": "Lit web components for the Design System Library (atoms, molecules, organisms, templates, pages).",
   "license": "UNLICENSED",
   "repository": {