mtrl 0.8.0-next.42 → 0.8.0-next.43

package/dist/components/navigation-rail/config.js

@@ -1,10 +1,11 @@
 import { createComponentConfig } from "../../core/config/component.js";
-import { NAVIGATION_RAIL_DEFAULTS as defaults } from "./constants.js";
+import { NAVIGATION_RAIL_DEFAULTS as defaults, NAVIGATION_RAIL_ICONS as icons } from "./constants.js";
 export const createBaseConfig = (config) => {
     const result = createComponentConfig({
         expanded: defaults.EXPANDED, expandedWidth: defaults.EXPANDED_WIDTH,
         showToggle: defaults.SHOW_TOGGLE, ripple: true, items: [],
         expandLabel: 'Expand navigation', collapseLabel: 'Collapse navigation',
+        expandIcon: icons.EXPAND, collapseIcon: icons.COLLAPSE,
     }, config, 'navigation-rail');
     const width = result.expandedWidth;
     result.expandedWidth = Number.isFinite(width)

package/dist/components/navigation-rail/constants.d.ts

@@ -7,3 +7,8 @@ export declare const NAVIGATION_RAIL_DEFAULTS: {
     readonly MAX_EXPANDED_WIDTH: 360;
     readonly SHOW_TOGGLE: true;
 };
+/** Material Symbols `menu` and `menu_open`, the M3 rail menu button in each state. */
+export declare const NAVIGATION_RAIL_ICONS: {
+    readonly EXPAND: "<svg viewBox=\"0 -960 960 960\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z\"/></svg>";
+    readonly COLLAPSE: "<svg viewBox=\"0 -960 960 960\" aria-hidden=\"true\" focusable=\"false\"><path d=\"M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z\"/></svg>";
+};

package/dist/components/navigation-rail/constants.js

@@ -6,3 +6,7 @@ export const NAVIGATION_RAIL_DEFAULTS = {
     MAX_EXPANDED_WIDTH: 360,
     SHOW_TOGGLE: true,
 };
+export const NAVIGATION_RAIL_ICONS = {
+    EXPAND: '<svg viewBox="0 -960 960 960" aria-hidden="true" focusable="false"><path d="M120-240v-80h720v80H120Zm0-200v-80h720v80H120Zm0-200v-80h720v80H120Z"/></svg>',
+    COLLAPSE: '<svg viewBox="0 -960 960 960" aria-hidden="true" focusable="false"><path d="M120-240v-80h520v80H120Zm664-40L584-480l200-200 56 56-144 144 144 144-56 56ZM120-440v-80h400v80H120Zm0-200v-80h520v80H120Z"/></svg>',
+};

package/dist/components/navigation-rail/navigation-rail.js

@@ -27,6 +27,19 @@ export default function createNavigationRail(config = {}) {
     const emitter = createEmitter();
     let expanded = !!options.expanded;
     let destroyed = false;
+    let switching = null;
+    const SWITCH_DURATION = 450;
+    const endSwitch = () => {
+        if (switching !== null)
+            clearTimeout(switching);
+        switching = null;
+        root.classList.remove(cls('--switching'));
+    };
+    const startSwitch = () => {
+        endSwitch();
+        root.classList.add(cls('--switching'));
+        switching = setTimeout(endSwitch, SWITCH_DURATION);
+    };
     let connectionObserver = null;
     const dialog = options.layout === 'modal' ? root : null;
     if (dialog)
@@ -43,7 +56,6 @@ export default function createNavigationRail(config = {}) {
         toggle = document.createElement('button');
         toggle.type = 'button';
         toggle.className = cls('__toggle');
-        toggle.innerHTML = '<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false"><path d="M3 6h18v2H3zm0 5h18v2H3zm0 5h18v2H3z"/></svg>';
         header.append(toggle);
     }
     if (options.header)
@@ -57,6 +69,7 @@ export default function createNavigationRail(config = {}) {
         const visible = item.badge !== undefined && item.badge !== false && item.badge !== '';
         if (!visible) {
             badge?.remove();
+            element.classList.remove(cls('__item--badged'));
             element.setAttribute('aria-label', item.label);
             return;
         }
@@ -68,6 +81,7 @@ export default function createNavigationRail(config = {}) {
         }
         badge.classList.toggle(cls('__badge--dot'), item.badge === true);
         badge.textContent = item.badge === true ? '' : String(item.badge);
+        element.classList.toggle(cls('__item--badged'), item.badge !== true);
         element.setAttribute('aria-label', `${item.label}, ${item.badgeLabel || (item.badge === true ? 'New activity' : String(item.badge))}`);
     };
     const updateSelection = () => {
@@ -147,6 +161,8 @@ export default function createNavigationRail(config = {}) {
         root.classList.toggle(cls('--expanded'), expanded);
         toggle?.setAttribute('aria-expanded', String(expanded));
         toggle?.setAttribute('aria-label', (expanded ? options.collapseLabel : options.expandLabel));
+        if (toggle)
+            toggle.innerHTML = (expanded ? options.collapseIcon : options.expandIcon);
         if (dialog) {
             if (expanded)
                 showModal();
@@ -166,6 +182,7 @@ export default function createNavigationRail(config = {}) {
         if (destroyed || expanded === value)
             return api;
         expanded = value;
+        startSwitch();
         synchronize();
         emitter.emit(value ? 'expand' : 'collapse', { expanded: value });
         if (!destroyed) {
@@ -264,6 +281,7 @@ export default function createNavigationRail(config = {}) {
         if (destroyed)
             return;
         destroyed = true;
+        endSwitch();
         connectionObserver?.disconnect();
         connectionObserver = null;
         dialog?.removeEventListener('keydown', modalTab);

package/dist/components/navigation-rail/types.d.ts

@@ -40,6 +40,10 @@ export interface NavigationRailConfig extends BaseComponentConfig {
     showToggle?: boolean;
     expandLabel?: string;
     collapseLabel?: string;
+    /** Menu button icon while collapsed. Default: Material Symbols `menu`. */
+    expandIcon?: string;
+    /** Menu button icon while expanded. Default: Material Symbols `menu_open`. */
+    collapseIcon?: string;
     /** Optional application-owned header, such as a FAB. Its lifecycle stays with its owner. */
     header?: HTMLElement;
     ripple?: boolean;