@awc-ui/core 1.0.0-beta.10 → 1.0.0-beta.11
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/bin/templates/astro/package.json +2 -2
- package/bin/templates/html/index.html +2 -2
- package/bin/templates/html/package.json +2 -2
- package/bin/templates/next/package.json +3 -3
- package/bin/templates/nuxt/package.json +2 -2
- package/bin/templates/sveltekit/package.json +2 -2
- package/custom-elements.json +8 -8
- package/dist/cjs/md-navigation-rail-tab.cjs.entry.js +185 -37
- package/dist/cjs/md-navigation-rail-tab.cjs.entry.js.map +1 -1
- package/dist/cjs/md-navigation-rail.cjs.entry.js +15 -16
- package/dist/cjs/md-navigation-rail.cjs.entry.js.map +1 -1
- package/dist/cjs/navigation-rail-motion-IOseZpRz.js +90 -0
- package/dist/cjs/navigation-rail-motion-IOseZpRz.js.map +1 -0
- package/dist/collection/components/md-navigation-rail/md-navigation-rail.css +90 -85
- package/dist/collection/components/md-navigation-rail/md-navigation-rail.js +14 -15
- package/dist/collection/components/md-navigation-rail/md-navigation-rail.js.map +1 -1
- package/dist/collection/components/md-navigation-rail-tab/md-navigation-rail-tab.css +8 -11
- package/dist/collection/components/md-navigation-rail-tab/md-navigation-rail-tab.js +184 -36
- package/dist/collection/components/md-navigation-rail-tab/md-navigation-rail-tab.js.map +1 -1
- package/dist/collection/utils/navigation-rail-motion.js +80 -0
- package/dist/collection/utils/navigation-rail-motion.js.map +1 -0
- package/dist/components/md-navigation-rail-tab.js +1 -1
- package/dist/components/md-navigation-rail-tab.js.map +1 -1
- package/dist/components/md-navigation-rail.js +1 -1
- package/dist/components/md-navigation-rail.js.map +1 -1
- package/dist/components/p-BTQOOQYQ.js +2 -0
- package/dist/components/p-BTQOOQYQ.js.map +1 -0
- package/dist/components-csr/md-navigation-rail-tab.js +1 -1
- package/dist/components-csr/md-navigation-rail-tab.js.map +1 -1
- package/dist/components-csr/md-navigation-rail.js +1 -1
- package/dist/components-csr/md-navigation-rail.js.map +1 -1
- package/dist/components-csr/p-BTQOOQYQ.js +2 -0
- package/dist/components-csr/p-BTQOOQYQ.js.map +1 -0
- package/dist/esm/md-navigation-rail-tab.entry.js +185 -37
- package/dist/esm/md-navigation-rail-tab.entry.js.map +1 -1
- package/dist/esm/md-navigation-rail.entry.js +15 -16
- package/dist/esm/md-navigation-rail.entry.js.map +1 -1
- package/dist/esm/navigation-rail-motion-BTQOOQYQ.js +84 -0
- package/dist/esm/navigation-rail-motion-BTQOOQYQ.js.map +1 -0
- package/dist/md3/md3.esm.js +1 -1
- package/dist/md3/p-88d49766.entry.js +2 -0
- package/dist/md3/p-88d49766.entry.js.map +1 -0
- package/dist/md3/p-BTQOOQYQ.js +2 -0
- package/dist/md3/p-BTQOOQYQ.js.map +1 -0
- package/dist/md3/p-c38e1473.entry.js +2 -0
- package/dist/md3/p-c38e1473.entry.js.map +1 -0
- package/dist/sources/{20812305a6a9bf6e0ac3bcaa49cf729c7e1f1d944f6467cc179222ebbfe7c036 → 0ff3480d9a3ad4d643358cd2d23546b2045fcacf8afbea2e0280ca4d1d7c2d09}/md-navigation-rail.tsx +12 -12
- package/dist/sources/{6c14a0a0c65f2aec64d62332f49f228b81d0cbbb288795543716266e9f70f444 → 2f4b6a7ed1aaf6a2a7b0e44123a4b5d30a18047aa5c2121896389bd6d11fcc66}/md-navigation-rail.css_tag_md-navigation-rail_encapsulation_shadow +90 -85
- package/dist/sources/{822acc654bb272fea6b5455c9869791448b125cae2c1eb1df0f97b27263a18f3 → 67e302a0ddf9f68ba82638d32533a0e69408184931f9f1268243f7246c714ae8}/md-navigation-rail-tab.css_tag_md-navigation-rail-tab_encapsulation_shadow +8 -11
- package/dist/sources/{4b1bf2d27bc87d12e416a1ae2bdc0f361033c40d13b252fe4c9f51a197ca95e1 → b3d606320b653bcbde553e6d61569edd0fc6cbdb1cb179f4d36ad796e76b133c}/md-navigation-rail-tab.tsx +208 -45
- package/dist/sources/f41e60167e8f17a6297648047951ef2d3dd96a3652adecfbe959df57bdef48dd/navigation-rail-motion.ts +97 -0
- package/dist/types/components/md-navigation-rail/md-navigation-rail.d.ts +3 -5
- package/dist/types/components/md-navigation-rail-tab/md-navigation-rail-tab.d.ts +17 -10
- package/dist/types/utils/navigation-rail-motion.d.ts +17 -0
- package/hydrate/index.js +278 -53
- package/hydrate/index.mjs +278 -53
- package/package.json +2 -2
- package/src/components/md-navigation-rail/readme.md +8 -0
- package/src/components/md-navigation-rail-tab/readme.md +6 -2
- package/dist/md3/p-7ca4c543.entry.js +0 -2
- package/dist/md3/p-7ca4c543.entry.js.map +0 -1
- package/dist/md3/p-9acadde5.entry.js +0 -2
- package/dist/md3/p-9acadde5.entry.js.map +0 -1
package/hydrate/index.mjs
CHANGED
|
@@ -35174,7 +35174,87 @@ class MdNavigationBar {
|
|
|
35174
35174
|
}; }
|
|
35175
35175
|
}
|
|
35176
35176
|
|
|
35177
|
-
const mdNavigationRailCss = () => `:host{--_container-color:var( --md-navigation-rail-container-color, var(--md-sys-color-surface, #FFFBFE) );--_container-width:var(--md-navigation-rail-container-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)));--_fab-size:var(--md-navigation-rail-fab-size, 56px);--_expanded-width:var(--md-navigation-rail-expanded-width, max(140px, calc(220px + var(--md-sys-density-scale, 0) * 20px)));--_expanded-max-width:var(--md-navigation-rail-expanded-max-width, 360px);--_container-shape:var(--md-navigation-rail-container-shape, 0px);--_container-elevation:var(--md-navigation-rail-container-elevation, none);--_padding-block:var(--md-navigation-rail-padding-block, max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px)));--_padding-inline:var(--md-navigation-rail-padding-inline, 0px);--_gap:var(--md-navigation-rail-gap, var(--md-sys-spacing-gap-md, 12px));--_header-space:var(--md-navigation-rail-header-space, max(20px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));--_destinations-gap:var(--md-navigation-rail-destinations-gap, max(0px, calc(8px + var(--md-sys-density-scale, 0) * 2px)));--_content-color:var( --md-navigation-rail-content-color, var(--md-sys-color-on-surface-variant, #49454F) );--_logo-icon-size:var(--md-navigation-rail-logo-icon-size, 24px);--_motion-duration:var(--md-sys-motion-duration-short4, 200ms);--_motion-easing:var( --md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1) );--_motion-effects-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_motion-effects-easing:var( --md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.8, 0.34, 1) );display:flex;flex-direction:column;box-sizing:border-box;inline-size:var(--_container-width);min-inline-size:var(--_container-width);max-inline-size:var(--_container-width);block-size:100%;min-block-size:100%;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);background-color:var(--_container-color);color:var(--_content-color);border-radius:var(--_container-shape);box-shadow:var(--_container-elevation);position:relative;isolation:isolate;transition:inline-size var(--_motion-duration) var(--_motion-easing), min-inline-size var(--_motion-duration) var(--_motion-easing), max-inline-size var(--_motion-duration) var(--_motion-easing), background-color var(--_motion-effects-duration) var(--_motion-effects-easing);font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif)}:host(.md-navigation-rail--full-height){block-size:100dvh;min-block-size:100dvh}:host(.md-navigation-rail--expanded){inline-size:var(--_expanded-width);min-inline-size:var(--_expanded-width);max-inline-size:var(--_expanded-max-width);--_padding-inline:var(--md-sys-spacing-inset-md, 12px)}:host(.md-navigation-rail--modal){position:static;isolation:auto;background-color:transparent;box-shadow:none;padding:0}:host(.md-navigation-rail--modal.md-navigation-rail--expanded){--_container-color:var( --md-navigation-rail-container-color, var(--md-sys-color-surface-container, #F3EDF7) );--_container-shape:var( --md-navigation-rail-container-shape, var(--md-sys-shape-corner-large, 16px) );--_container-elevation:var( --md-navigation-rail-container-elevation, var(--md-sys-elevation-3, 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15)) );inline-size:var(--_container-width);min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}.md-navigation-rail__scrim{position:absolute;inset:0;background-color:var(--md-sys-color-scrim, #000000);opacity:0;pointer-events:none;z-index:2;transition:opacity var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail--modal.md-navigation-rail--expanded) .md-navigation-rail__scrim{opacity:0.32;pointer-events:auto}:host(.md-navigation-rail--modal) .md-navigation-rail__container{position:absolute;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;inline-size:var(--_container-width);block-size:100%;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);background-color:var(--_container-color);box-shadow:var(--_container-elevation);border-start-end-radius:var(--_container-shape);border-end-end-radius:var(--_container-shape);z-index:3;overflow:hidden;transition:inline-size var(--_motion-duration) var(--_motion-easing), inset-block-start var(--_motion-duration) var(--_motion-easing), inset-inline-start var(--_motion-duration) var(--_motion-easing), block-size var(--_motion-duration) var(--_motion-easing), background-color var(--_motion-effects-duration) var(--_motion-effects-easing), box-shadow var(--_motion-effects-duration) var(--_motion-effects-easing), border-radius var(--_motion-effects-duration) var(--_motion-effects-easing)}:host(.md-navigation-rail--modal.md-navigation-rail--expanded) .md-navigation-rail__container{inline-size:var(--_expanded-width);max-inline-size:var(--_expanded-max-width);inset-block-start:16px;inset-inline-start:16px;block-size:calc(100% - 32px);border-radius:var(--_container-shape)}.md-navigation-rail__container{display:flex;flex-direction:column;block-size:100%;gap:var(--_gap);inline-size:100%}.md-navigation-rail__logo{position:relative;inline-size:100%;min-block-size:48px}.md-navigation-rail__logo[hidden]{display:none}.md-navigation-rail__logo-contracted,.md-navigation-rail__logo-expanded{position:absolute;inset-block:0;inset-inline-start:0;inset-inline-end:0;display:flex;align-items:center;justify-content:flex-start;padding-inline-start:calc((var(--_container-width) - var(--_logo-icon-size)) / 2);transition:opacity var(--_motion-effects-duration) var(--_motion-effects-easing)}:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-contracted,:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-expanded{margin-inline-start:calc(-1 * var(--_padding-inline))}.md-navigation-rail__logo-contracted{opacity:1}.md-navigation-rail__logo-expanded{opacity:0;pointer-events:none}:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-contracted{opacity:0;pointer-events:none}:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-expanded{opacity:1;pointer-events:auto}:host(.md-navigation-rail--expanded:not(.md-navigation-rail--with-logo-expanded)) .md-navigation-rail__logo-contracted{opacity:1;pointer-events:auto}.md-navigation-rail__toggle{display:flex;align-items:center;justify-content:flex-start;inline-size:100%;min-block-size:48px;padding-inline-start:calc((var(--_container-width) - 40px) / 2)}:host(.md-navigation-rail--expanded) .md-navigation-rail__toggle{padding-inline-start:var(--md-sys-spacing-inset-sm, 8px)}.md-navigation-rail__header{display:flex;flex-direction:column;align-items:center;justify-content:center;inline-size:100%;min-block-size:56px;padding-block-end:var(--md-sys-spacing-inset-xs, 4px)}:host(.md-navigation-rail--expanded) .md-navigation-rail__header{align-items:flex-start;padding-inline:var(--md-sys-spacing-inset-sm, 8px)}.md-navigation-rail__header[hidden]{display:none}.md-navigation-rail__fab{display:flex;align-items:center;justify-content:flex-start;inline-size:100%;padding-inline-start:max(0px, calc((var(--_container-width) - var(--_fab-size)) / 2));padding-block-end:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-navigation-rail--expanded) .md-navigation-rail__fab{padding-inline-start:0}.md-navigation-rail__fab[hidden]{display:none}.md-navigation-rail__destinations{display:flex;flex-direction:column;gap:var(--_destinations-gap);inline-size:100%;flex:1 1 auto;min-block-size:0;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;scrollbar-width:thin;padding-block:5px}:host(.md-navigation-rail--with-header) .md-navigation-rail__destinations,:host(.md-navigation-rail--with-fab) .md-navigation-rail__destinations{padding-block-start:calc(var(--_header-space) - var(--_gap))}:host(.md-navigation-rail--align-top) .md-navigation-rail__destinations{justify-content:flex-start}:host(.md-navigation-rail--align-middle) .md-navigation-rail__destinations{justify-content:center}:host(.md-navigation-rail--align-bottom) .md-navigation-rail__destinations{justify-content:flex-end}.md-navigation-rail__footer{flex-shrink:0;box-sizing:border-box;--_footer-padding-inline:0px;--_footer-leading-size:var(--md-navigation-rail-footer-leading-size, 32px);display:flex;flex-direction:column;align-items:stretch;inline-size:100%;gap:var(--_destinations-gap);padding-block-start:var(--md-sys-spacing-inset-sm, 8px);margin-block-start:auto;}.md-navigation-rail__footer ::slotted(md-icon-button){align-self:center}:host(.md-navigation-rail--expanded) .md-navigation-rail__footer ::slotted(md-icon-button){align-self:flex-start}:host(.md-navigation-rail--expanded) .md-navigation-rail__footer{--_footer-padding-inline:var(--md-sys-spacing-inset-sm, 8px);padding-inline-start:var(--_footer-padding-inline)}.md-navigation-rail__footer[hidden],.md-navigation-rail__footer-profile[hidden]{display:none}.md-navigation-rail__footer-profile{--_footer-leading-inset:calc((var(--_container-width) - var(--_footer-leading-size)) / 2 - var(--_padding-inline) - var(--_footer-padding-inline));display:flex;flex:0 0 auto;align-items:center;gap:var(--md-navigation-rail-footer-gap, var(--md-sys-spacing-gap-md, 12px));min-block-size:var(--_footer-leading-size);margin-inline-start:var(--_footer-leading-inset);min-inline-size:0}.md-navigation-rail__footer-leading{display:flex;flex:0 0 var(--_footer-leading-size);inline-size:var(--_footer-leading-size);align-items:center;justify-content:center}.md-navigation-rail__footer-content{flex:1 1 auto;min-inline-size:0;white-space:nowrap;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--_motion-duration) var(--_motion-easing), visibility 0s linear var(--_motion-duration)}:host(.md-navigation-rail--expanded) .md-navigation-rail__footer-content,:host(.md-navigation-rail--horizontal) .md-navigation-rail__footer-content{opacity:1;visibility:visible;transition-delay:0s}::slotted(md-navigation-rail-tab){inline-size:var(--_container-width)}:host(.md-navigation-rail--tabs-expanded) ::slotted(md-navigation-rail-tab){inline-size:fit-content}::slotted(md-fab),::slotted(md-icon-button){flex:0 0 auto}::slotted(md-fab){box-shadow:none}::slotted([data-section-header]){display:none}:host(.md-navigation-rail--tabs-expanded) ::slotted([data-section-header]){display:block;flex:0 0 auto;padding-block:var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-sm, 8px);padding-inline:var(--md-sys-spacing-inset-lg, 16px);margin:0;color:var(--md-sys-color-on-surface-variant, #49454F);font-family:var(--md-sys-typescale-title-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-title-small-font-size, 14px);font-weight:var(--md-sys-typescale-title-small-font-weight, 500);line-height:var(--md-sys-typescale-title-small-line-height, 20px);letter-spacing:var(--md-sys-typescale-title-small-letter-spacing, 0.1px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-reduced-motion: reduce){:host,.md-navigation-rail__toggle,.md-navigation-rail__fab,.md-navigation-rail__footer-content,.md-navigation-rail__scrim,:host(.md-navigation-rail--modal) .md-navigation-rail__container{transition:none}}:host([data-theme='dark']),:host-context([data-theme='dark']){--_container-color:var( --md-navigation-rail-container-color, var(--md-sys-color-surface, #1C1B1F) )}@media (forced-colors: active){:host{border-inline-end:1px solid CanvasText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}:host(.md-navigation-rail--horizontal){flex-direction:row;inline-size:100%;min-inline-size:0;max-inline-size:none;block-size:auto;min-block-size:var( --md-navigation-rail-horizontal-height, max(64px, calc(72px + var(--md-sys-density-scale, 0) * 4px)) );padding-block:var(--md-navigation-rail-horizontal-padding-block, 0px);padding-inline:var(--md-navigation-rail-horizontal-padding-inline, var(--md-sys-spacing-inset-md, 12px))}:host(.md-navigation-rail--horizontal) .md-navigation-rail__container{flex-direction:row;align-items:stretch;block-size:auto}:host(.md-navigation-rail--horizontal) .md-navigation-rail__destinations{flex-direction:row;align-items:stretch;inline-size:auto;min-inline-size:0;block-size:auto;min-block-size:0;overflow-x:auto;overflow-y:clip;padding-block:0;padding-inline:5px;justify-content:center}:host(.md-navigation-rail--horizontal.md-navigation-rail--with-header) .md-navigation-rail__destinations,:host(.md-navigation-rail--horizontal.md-navigation-rail--with-fab) .md-navigation-rail__destinations{padding-block-start:0;padding-inline-start:calc(var(--_header-space) - var(--_gap))}:host(.md-navigation-rail--horizontal) ::slotted(md-navigation-rail-tab){inline-size:auto;min-inline-size:var(--_container-width);flex-shrink:0}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo{inline-size:auto;min-block-size:0;flex:0 0 auto;display:flex;align-items:center}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-contracted,:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded{position:static;padding-inline:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded{display:none}:host(.md-navigation-rail--horizontal) .md-navigation-rail__fab{flex:0 0 auto}:host(.md-navigation-rail--horizontal) .md-navigation-rail__footer{flex-direction:row;align-items:center;inline-size:auto;padding-block-start:0;padding-inline-start:var(--md-sys-spacing-inset-sm, 8px);margin-block-start:0;margin-inline-start:auto}:host(.md-navigation-rail--horizontal) .md-navigation-rail__footer-profile{margin-inline-start:0}:host(.md-navigation-rail--horizontal) ::slotted([data-section-header]){display:none}:host(.md-navigation-rail--submenu-open){isolation:auto;z-index:3}::slotted(md-navigation-rail-tab[data-overflowed]){display:none}.md-navigation-rail__overflow{position:relative;display:flex;flex:0 0 auto;justify-content:center}.md-navigation-rail__overflow-trigger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;inline-size:100%;min-block-size:max(40px, calc(56px + var(--md-sys-density-scale, 0) * 2px));padding:0 var(--md-sys-spacing-inset-sm, 8px);border:none;background:none;color:var(--_content-color);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.md-navigation-rail__overflow-trigger:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px;border-radius:var(--md-sys-shape-corner-small, 8px)}.md-navigation-rail__overflow-icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));line-height:1}.md-navigation-rail__overflow-label{font:var(--md-sys-typescale-label-medium, 500 12px/16px Roboto, sans-serif);white-space:nowrap}:host(.md-navigation-rail--label-visibility-none) .md-navigation-rail__overflow-label{display:none}:host(.md-navigation-rail--horizontal) .md-navigation-rail__overflow-trigger{inline-size:auto;min-inline-size:var(--_container-width)}.md-navigation-rail__overflow md-menu-item .material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}::slotted(md-menu[slot='submenu']){position:absolute}:host([hidden]){display:none !important}`;
|
|
35177
|
+
/** Private bridge for capturing tab geometry before its rail changes layout. */
|
|
35178
|
+
const transitionPreparations = new WeakMap();
|
|
35179
|
+
function registerRailTabTransition(element, callback) {
|
|
35180
|
+
transitionPreparations.set(element, callback);
|
|
35181
|
+
return () => {
|
|
35182
|
+
// A disconnected instance must not unregister a newer connection's callback.
|
|
35183
|
+
if (transitionPreparations.get(element) === callback) {
|
|
35184
|
+
transitionPreparations.delete(element);
|
|
35185
|
+
}
|
|
35186
|
+
};
|
|
35187
|
+
}
|
|
35188
|
+
function prepareRailTabTransition(element) {
|
|
35189
|
+
transitionPreparations.get(element)?.();
|
|
35190
|
+
}
|
|
35191
|
+
function parseRailMotionDuration(raw, fallback = 200) {
|
|
35192
|
+
const value = raw.trim();
|
|
35193
|
+
if (!/^(?:\d*\.)?\d+(?:ms|s)?$/.test(value))
|
|
35194
|
+
return fallback;
|
|
35195
|
+
const duration = Number.parseFloat(value) * (value.endsWith('s') && !value.endsWith('ms') ? 1000 : 1);
|
|
35196
|
+
return Number.isFinite(duration) && duration >= 0 ? duration : fallback;
|
|
35197
|
+
}
|
|
35198
|
+
/**
|
|
35199
|
+
* CSS shortens a transition when it reverses. Reading the authored token alone
|
|
35200
|
+
* would restart a destination's animation for the full duration while its rail
|
|
35201
|
+
* had already finished closing. Use the browser's actual width-animation clock.
|
|
35202
|
+
*/
|
|
35203
|
+
function getRailTransitionTiming(destination, fallback) {
|
|
35204
|
+
const rail = destination.closest('md-navigation-rail');
|
|
35205
|
+
if (!rail)
|
|
35206
|
+
return fallback;
|
|
35207
|
+
const surface = rail.hasAttribute('modal')
|
|
35208
|
+
? rail.shadowRoot?.querySelector('[part="container"]') ?? rail
|
|
35209
|
+
: rail;
|
|
35210
|
+
// Flush the target layout before reading its generated CSS transitions.
|
|
35211
|
+
surface.getBoundingClientRect();
|
|
35212
|
+
const animations = typeof surface.getAnimations === 'function' ? surface.getAnimations() : [];
|
|
35213
|
+
const source = animations.find((animation) => {
|
|
35214
|
+
const property = animation.transitionProperty;
|
|
35215
|
+
return (property === 'width' || property === 'inline-size') && animation.playState !== 'finished';
|
|
35216
|
+
});
|
|
35217
|
+
if (source?.effect) {
|
|
35218
|
+
const effect = source.effect;
|
|
35219
|
+
const timing = effect.getTiming();
|
|
35220
|
+
const duration = effect.getComputedTiming().duration;
|
|
35221
|
+
if (typeof duration === 'number' && Number.isFinite(duration) && duration >= 0) {
|
|
35222
|
+
// CSS transitions may put their curve on the first keyframe instead of
|
|
35223
|
+
// the effect; preserve that curve instead of silently substituting linear.
|
|
35224
|
+
const keyframeEasing = effect.getKeyframes?.()[0]?.easing;
|
|
35225
|
+
return {
|
|
35226
|
+
duration,
|
|
35227
|
+
easing: keyframeEasing && keyframeEasing !== 'linear'
|
|
35228
|
+
? keyframeEasing : timing.easing || fallback.easing,
|
|
35229
|
+
source,
|
|
35230
|
+
};
|
|
35231
|
+
}
|
|
35232
|
+
}
|
|
35233
|
+
// A zero-duration transition does not appear in getAnimations().
|
|
35234
|
+
const css = getComputedStyle(surface);
|
|
35235
|
+
const properties = css.transitionProperty?.split(',').map((value) => value.trim()) ?? [];
|
|
35236
|
+
const index = properties.findIndex((value) => ['all', 'width', 'inline-size'].includes(value));
|
|
35237
|
+
const durations = css.transitionDuration?.split(',') ?? [];
|
|
35238
|
+
if (properties.includes('none') || (index >= 0 && durations.length && parseRailMotionDuration(durations[index % durations.length]) === 0)) {
|
|
35239
|
+
return { ...fallback, duration: 0 };
|
|
35240
|
+
}
|
|
35241
|
+
return fallback;
|
|
35242
|
+
}
|
|
35243
|
+
/** Align with a width transition that may still be waiting for its first frame. */
|
|
35244
|
+
function synchronizeRailAnimation(animation, source, isCurrent) {
|
|
35245
|
+
if (!source)
|
|
35246
|
+
return;
|
|
35247
|
+
const align = () => {
|
|
35248
|
+
if (isCurrent() && typeof source.startTime === 'number')
|
|
35249
|
+
animation.startTime = source.startTime;
|
|
35250
|
+
};
|
|
35251
|
+
align();
|
|
35252
|
+
if (source.startTime === null && source.ready) {
|
|
35253
|
+
void source.ready.then(align, () => undefined);
|
|
35254
|
+
}
|
|
35255
|
+
}
|
|
35256
|
+
|
|
35257
|
+
const mdNavigationRailCss = () => `:host{--_container-color:var( --md-navigation-rail-container-color, var(--md-sys-color-surface, #FFFBFE) );--_container-width:var(--md-navigation-rail-container-width, max(56px, calc(80px + var(--md-sys-density-scale, 0) * 4px)));--_fab-size:var(--md-navigation-rail-fab-size, 56px);--_expanded-width:var(--md-navigation-rail-expanded-width, max(140px, calc(220px + var(--md-sys-density-scale, 0) * 20px)));--_expanded-max-width:var(--md-navigation-rail-expanded-max-width, 360px);--_container-shape:var(--md-navigation-rail-container-shape, 0px);--_container-elevation:var(--md-navigation-rail-container-elevation, none);--_padding-block:var(--md-navigation-rail-padding-block, max(24px, calc(44px + var(--md-sys-density-scale, 0) * 4px)));--_padding-inline:var(--md-navigation-rail-padding-inline, 0px);--_rail-slot-axis:calc(var(--_container-width) / 2 - var(--_padding-inline));--_rail-slot-center-shift:-50%;--_rail-fab-size:var(--_fab-size);--_gap:var(--md-navigation-rail-gap, var(--md-sys-spacing-gap-md, 12px));--_header-space:var(--md-navigation-rail-header-space, max(20px, calc(40px + var(--md-sys-density-scale, 0) * 4px)));--_destinations-gap:var(--md-navigation-rail-destinations-gap, max(0px, calc(8px + var(--md-sys-density-scale, 0) * 2px)));--_content-color:var( --md-navigation-rail-content-color, var(--md-sys-color-on-surface-variant, #49454F) );--_logo-icon-size:var(--md-navigation-rail-logo-icon-size, 24px);--_motion-duration:var(--md-sys-motion-duration-short4, 200ms);--_motion-easing:var( --md-sys-motion-easing-standard, cubic-bezier(0.2, 0, 0, 1) );--_motion-effects-duration:var(--md-sys-motion-spring-effects-default-duration, 200ms);--_motion-effects-easing:var( --md-sys-motion-spring-effects-default-easing, cubic-bezier(0.34, 0.8, 0.34, 1) );display:flex;flex-direction:column;box-sizing:border-box;inline-size:var(--_container-width);min-inline-size:var(--_container-width);max-inline-size:var(--_container-width);block-size:100%;min-block-size:100%;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);background-color:var(--_container-color);color:var(--_content-color);border-radius:var(--_container-shape);box-shadow:var(--_container-elevation);position:relative;isolation:isolate;transition:inline-size var(--_motion-duration) var(--_motion-easing), min-inline-size var(--_motion-duration) var(--_motion-easing), max-inline-size var(--_motion-duration) var(--_motion-easing), background-color var(--_motion-effects-duration) var(--_motion-effects-easing);font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif)}:host(:dir(rtl)){--_rail-slot-center-shift:50%}:host(.md-navigation-rail--full-height){block-size:100dvh;min-block-size:100dvh}:host(.md-navigation-rail--expanded){inline-size:var(--_expanded-width);min-inline-size:var(--_expanded-width);max-inline-size:var(--_expanded-max-width);--_padding-inline:var(--md-sys-spacing-inset-md, 12px)}:host(.md-navigation-rail--modal){position:static;isolation:auto;background-color:transparent;box-shadow:none;padding:0}:host(.md-navigation-rail--modal.md-navigation-rail--expanded){--_container-color:var( --md-navigation-rail-container-color, var(--md-sys-color-surface-container, #F3EDF7) );--_container-shape:var( --md-navigation-rail-container-shape, var(--md-sys-shape-corner-large, 16px) );--_container-elevation:var( --md-navigation-rail-container-elevation, var(--md-sys-elevation-3, 0 1px 3px rgba(0, 0, 0, 0.3), 0 4px 8px 3px rgba(0, 0, 0, 0.15)) );inline-size:var(--_container-width);min-inline-size:var(--_container-width);max-inline-size:var(--_container-width)}.md-navigation-rail__scrim{position:absolute;inset:0;background-color:var(--md-sys-color-scrim, #000000);opacity:0;pointer-events:none;z-index:2;transition:opacity var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail--modal.md-navigation-rail--expanded) .md-navigation-rail__scrim{opacity:0.32;pointer-events:auto}:host(.md-navigation-rail--modal) .md-navigation-rail__container{position:absolute;inset-block-start:0;inset-inline-start:0;box-sizing:border-box;inline-size:var(--_container-width);block-size:100%;padding-block:var(--_padding-block);padding-inline:var(--_padding-inline);background-color:var(--_container-color);box-shadow:var(--_container-elevation);border-start-end-radius:var(--_container-shape);border-end-end-radius:var(--_container-shape);z-index:3;overflow:hidden;transition:inline-size var(--_motion-duration) var(--_motion-easing), inset-block-start var(--_motion-duration) var(--_motion-easing), inset-inline-start var(--_motion-duration) var(--_motion-easing), block-size var(--_motion-duration) var(--_motion-easing), background-color var(--_motion-effects-duration) var(--_motion-effects-easing), box-shadow var(--_motion-effects-duration) var(--_motion-effects-easing), border-radius var(--_motion-effects-duration) var(--_motion-effects-easing)}:host(.md-navigation-rail--modal.md-navigation-rail--expanded) .md-navigation-rail__container{inline-size:var(--_expanded-width);max-inline-size:var(--_expanded-max-width);inset-block-start:16px;inset-inline-start:16px;block-size:calc(100% - 32px);border-radius:var(--_container-shape)}.md-navigation-rail__container{display:flex;flex-direction:column;block-size:100%;gap:var(--_gap);inline-size:100%}.md-navigation-rail__logo{position:relative;inline-size:100%;min-block-size:48px}.md-navigation-rail__logo[hidden]{display:none}.md-navigation-rail__logo-contracted,.md-navigation-rail__logo-expanded{position:absolute;inset-block:0;inset-inline-start:0;inset-inline-end:0;display:flex;align-items:center;justify-content:flex-start;padding-inline-start:calc((var(--_container-width) - var(--_logo-icon-size)) / 2);margin-inline-start:calc(-1 * var(--_padding-inline));transition:opacity var(--_motion-duration) var(--_motion-easing)}.md-navigation-rail__logo-contracted{opacity:1}.md-navigation-rail__logo-expanded{opacity:0;pointer-events:none}:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-contracted{opacity:0;pointer-events:none}:host(.md-navigation-rail--expanded) .md-navigation-rail__logo-expanded{opacity:1;pointer-events:auto}:host(.md-navigation-rail--expanded:not(.md-navigation-rail--with-logo-expanded)) .md-navigation-rail__logo-contracted{opacity:1;pointer-events:auto}.md-navigation-rail__toggle{display:flex;align-items:center;justify-content:flex-start;inline-size:100%;min-block-size:48px;padding-inline-start:calc((var(--_container-width) - 40px) / 2 - var(--_padding-inline))}.md-navigation-rail__header{--_header-padding-inline:0px;--_rail-slot-axis:calc(var(--_container-width) / 2 - var(--_padding-inline) - var(--_header-padding-inline));display:flex;flex-direction:column;align-items:center;justify-content:center;inline-size:100%;min-block-size:56px;padding-block-end:var(--md-sys-spacing-inset-xs, 4px)}:host(.md-navigation-rail--expanded) .md-navigation-rail__header{--_header-padding-inline:var(--md-sys-spacing-inset-sm, 8px);align-items:flex-start;padding-inline:var(--_header-padding-inline)}.md-navigation-rail__header[hidden]{display:none}.md-navigation-rail__fab{--_fab-padding-inline:max(0px, calc((var(--_container-width) - var(--_fab-size)) / 2));--_rail-slot-axis:calc(var(--_container-width) / 2 - var(--_padding-inline) - var(--_fab-padding-inline));--md-sys-motion-spring-spatial-default-duration:var(--_motion-duration);--md-sys-motion-spring-spatial-default-easing:var(--_motion-easing);--md-sys-motion-spring-effects-default-duration:var(--_motion-duration);--md-sys-motion-spring-effects-default-easing:var(--_motion-easing);display:flex;align-items:center;justify-content:flex-start;inline-size:100%;padding-inline-start:var(--_fab-padding-inline);padding-block-end:var(--md-sys-spacing-inset-sm, 8px)}:host(.md-navigation-rail--expanded) .md-navigation-rail__fab{--_fab-padding-inline:0px}:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab){position:relative;inset-inline-start:var(--_rail-slot-axis);translate:var(--_rail-slot-center-shift) 0}:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--extended),:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--collapsed){inset-inline-start:calc(var(--_rail-slot-axis) - var(--_rail-fab-size) / 2);translate:none}:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--extended.md-fab--with-icon),:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--collapsed.md-fab--with-icon){justify-content:flex-start;padding-inline-start:calc((var(--_rail-fab-size) - var(--_icon-size)) / 2)}:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__fab ::slotted(md-fab.md-fab--collapsed.md-fab--with-icon){padding-inline-end:calc((var(--_rail-fab-size) - var(--_icon-size)) / 2)}.md-navigation-rail__fab[hidden]{display:none}.md-navigation-rail__destinations{display:flex;flex-direction:column;gap:var(--_destinations-gap);inline-size:100%;flex:1 1 auto;min-block-size:0;overflow-y:auto;overflow-x:clip;overscroll-behavior:contain;scrollbar-width:thin;padding-block:5px}:host(.md-navigation-rail--with-header) .md-navigation-rail__destinations,:host(.md-navigation-rail--with-fab) .md-navigation-rail__destinations{padding-block-start:calc(var(--_header-space) - var(--_gap))}:host(.md-navigation-rail--align-top) .md-navigation-rail__destinations{justify-content:flex-start}:host(.md-navigation-rail--align-middle) .md-navigation-rail__destinations{justify-content:center}:host(.md-navigation-rail--align-bottom) .md-navigation-rail__destinations{justify-content:flex-end}.md-navigation-rail__footer{flex-shrink:0;box-sizing:border-box;--_footer-padding-inline:0px;--_rail-slot-axis:calc(var(--_container-width) / 2 - var(--_padding-inline) - var(--_footer-padding-inline));--_footer-leading-size:var(--md-navigation-rail-footer-leading-size, 32px);display:flex;flex-direction:column;align-items:stretch;inline-size:100%;gap:var(--_destinations-gap);padding-block-start:var(--md-sys-spacing-inset-sm, 8px);margin-block-start:auto;}.md-navigation-rail__footer ::slotted(md-icon-button){align-self:center}:host(.md-navigation-rail--expanded) .md-navigation-rail__footer ::slotted(md-icon-button){align-self:flex-start}:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__header ::slotted(md-icon-button[slot='header']),:host(:not(.md-navigation-rail--horizontal)) .md-navigation-rail__footer ::slotted(md-icon-button[slot='footer']){align-self:flex-start;position:relative;inset-inline-start:var(--_rail-slot-axis);translate:var(--_rail-slot-center-shift) 0}:host(.md-navigation-rail--expanded) .md-navigation-rail__footer{--_footer-padding-inline:var(--md-sys-spacing-inset-sm, 8px);padding-inline-start:var(--_footer-padding-inline)}.md-navigation-rail__footer[hidden],.md-navigation-rail__footer-profile[hidden]{display:none}.md-navigation-rail__footer-profile{--_footer-leading-inset:calc((var(--_container-width) - var(--_footer-leading-size)) / 2 - var(--_padding-inline) - var(--_footer-padding-inline));display:flex;flex:0 0 auto;align-items:center;gap:var(--md-navigation-rail-footer-gap, var(--md-sys-spacing-gap-md, 12px));min-block-size:var(--_footer-leading-size);margin-inline-start:var(--_footer-leading-inset);min-inline-size:0}.md-navigation-rail__footer-leading{display:flex;flex:0 0 var(--_footer-leading-size);inline-size:var(--_footer-leading-size);align-items:center;justify-content:center}.md-navigation-rail__footer-content{flex:1 1 auto;min-inline-size:0;white-space:nowrap;overflow:hidden;opacity:0;visibility:hidden;transition:opacity var(--_motion-duration) var(--_motion-easing), visibility 0s linear var(--_motion-duration)}:host(.md-navigation-rail--expanded) .md-navigation-rail__footer-content,:host(.md-navigation-rail--horizontal) .md-navigation-rail__footer-content{opacity:1;visibility:visible;transition-delay:0s}::slotted(md-navigation-rail-tab){inline-size:var(--_container-width)}:host(:not(.md-navigation-rail--horizontal)) ::slotted(md-navigation-rail-tab){--_rail-icon-axis:calc(var(--_container-width) / 2 - var(--_padding-inline));inline-size:calc(var(--_container-width) - 2 * var(--_padding-inline))}:host(.md-navigation-rail--tabs-expanded) ::slotted(md-navigation-rail-tab){inline-size:fit-content}::slotted(md-fab),::slotted(md-icon-button){flex:0 0 auto}::slotted(md-fab){box-shadow:none}::slotted([data-section-header]){display:none}:host(.md-navigation-rail--tabs-expanded) ::slotted([data-section-header]){display:block;flex:0 0 auto;padding-block:var(--md-sys-spacing-inset-md, 12px) var(--md-sys-spacing-inset-sm, 8px);padding-inline:var(--md-sys-spacing-inset-lg, 16px);margin:0;color:var(--md-sys-color-on-surface-variant, #49454F);font-family:var(--md-sys-typescale-title-small-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-title-small-font-size, 14px);font-weight:var(--md-sys-typescale-title-small-font-weight, 500);line-height:var(--md-sys-typescale-title-small-line-height, 20px);letter-spacing:var(--md-sys-typescale-title-small-letter-spacing, 0.1px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}@media (prefers-reduced-motion: reduce){:host,.md-navigation-rail__toggle,.md-navigation-rail__fab,.md-navigation-rail__logo-contracted,.md-navigation-rail__logo-expanded,.md-navigation-rail__footer-content,.md-navigation-rail__scrim,:host(.md-navigation-rail--modal) .md-navigation-rail__container{transition:none}.md-navigation-rail__fab{--md-sys-motion-spring-spatial-default-duration:0ms;--md-sys-motion-spring-effects-default-duration:0ms}}:host([data-theme='dark']),:host-context([data-theme='dark']){--_container-color:var( --md-navigation-rail-container-color, var(--md-sys-color-surface, #1C1B1F) )}@media (forced-colors: active){:host{border-inline-end:1px solid CanvasText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}:host(.md-navigation-rail--horizontal){flex-direction:row;inline-size:100%;min-inline-size:0;max-inline-size:none;block-size:auto;min-block-size:var( --md-navigation-rail-horizontal-height, max(64px, calc(72px + var(--md-sys-density-scale, 0) * 4px)) );padding-block:var(--md-navigation-rail-horizontal-padding-block, 0px);padding-inline:var(--md-navigation-rail-horizontal-padding-inline, var(--md-sys-spacing-inset-md, 12px))}:host(.md-navigation-rail--horizontal) .md-navigation-rail__container{flex-direction:row;align-items:stretch;block-size:auto}:host(.md-navigation-rail--horizontal) .md-navigation-rail__destinations{flex-direction:row;align-items:stretch;inline-size:auto;min-inline-size:0;block-size:auto;min-block-size:0;overflow-x:auto;overflow-y:clip;padding-block:0;padding-inline:5px;justify-content:center}:host(.md-navigation-rail--horizontal.md-navigation-rail--with-header) .md-navigation-rail__destinations,:host(.md-navigation-rail--horizontal.md-navigation-rail--with-fab) .md-navigation-rail__destinations{padding-block-start:0;padding-inline-start:calc(var(--_header-space) - var(--_gap))}:host(.md-navigation-rail--horizontal) ::slotted(md-navigation-rail-tab){inline-size:auto;min-inline-size:var(--_container-width);flex-shrink:0}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo{inline-size:auto;min-block-size:0;flex:0 0 auto;display:flex;align-items:center}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-contracted,:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded{position:static;padding-inline:var(--md-sys-spacing-inset-sm, 8px);margin-inline-start:0}:host(.md-navigation-rail--horizontal) .md-navigation-rail__logo-expanded{display:none}:host(.md-navigation-rail--horizontal) .md-navigation-rail__fab{flex:0 0 auto}:host(.md-navigation-rail--horizontal) .md-navigation-rail__footer{flex-direction:row;align-items:center;inline-size:auto;padding-block-start:0;padding-inline-start:var(--md-sys-spacing-inset-sm, 8px);margin-block-start:0;margin-inline-start:auto}:host(.md-navigation-rail--horizontal) .md-navigation-rail__footer-profile{margin-inline-start:0}:host(.md-navigation-rail--horizontal) ::slotted([data-section-header]){display:none}:host(.md-navigation-rail--submenu-open){isolation:auto;z-index:3}::slotted(md-navigation-rail-tab[data-overflowed]){display:none}.md-navigation-rail__overflow{position:relative;display:flex;flex:0 0 auto;justify-content:center}.md-navigation-rail__overflow-trigger{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;inline-size:100%;min-block-size:max(40px, calc(56px + var(--md-sys-density-scale, 0) * 2px));padding:0 var(--md-sys-spacing-inset-sm, 8px);border:none;background:none;color:var(--_content-color);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}.md-navigation-rail__overflow-trigger:focus-visible{outline:3px solid var(--md-sys-color-secondary, #625B71);outline-offset:-3px;border-radius:var(--md-sys-shape-corner-small, 8px)}.md-navigation-rail__overflow-icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));line-height:1}.md-navigation-rail__overflow-label{font:var(--md-sys-typescale-label-medium, 500 12px/16px Roboto, sans-serif);white-space:nowrap}:host(.md-navigation-rail--label-visibility-none) .md-navigation-rail__overflow-label{display:none}:host(.md-navigation-rail--horizontal) .md-navigation-rail__overflow-trigger{inline-size:auto;min-inline-size:var(--_container-width)}.md-navigation-rail__overflow md-menu-item .material-symbols-outlined{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px));line-height:1;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24}::slotted(md-menu[slot='submenu']){position:absolute}:host([hidden]){display:none !important}`;
|
|
35178
35258
|
|
|
35179
35259
|
/**
|
|
35180
35260
|
* Material Design 3 — Navigation Rail
|
|
@@ -35279,11 +35359,9 @@ class MdNavigationRail {
|
|
|
35279
35359
|
* context so the fixed-position menu is not trapped inside it. */
|
|
35280
35360
|
this.submenuOpen = false;
|
|
35281
35361
|
/**
|
|
35282
|
-
*
|
|
35283
|
-
*
|
|
35284
|
-
*
|
|
35285
|
-
* animation has finished, then drops to the stacked resting layout — keeping
|
|
35286
|
-
* the label reveal/conceal in sync with the width instead of snapping.
|
|
35362
|
+
* Destination target layout, synchronized with the variant before rendering.
|
|
35363
|
+
* Tabs capture their current geometry before this changes, then animate to the
|
|
35364
|
+
* new layout while the rail changes width.
|
|
35287
35365
|
*/
|
|
35288
35366
|
this.tabsExpanded = false;
|
|
35289
35367
|
/**
|
|
@@ -35485,18 +35563,18 @@ class MdNavigationRail {
|
|
|
35485
35563
|
onVariantChange(newVal, oldVal) {
|
|
35486
35564
|
if (newVal === oldVal)
|
|
35487
35565
|
return;
|
|
35566
|
+
// Capture destinations before the rail's padding or target layout changes.
|
|
35567
|
+
// A child watcher alone can run after the parent has already moved its icon.
|
|
35568
|
+
this.getTabs().forEach(prepareRailTabTransition);
|
|
35569
|
+
this.tabsExpanded = newVal === 'expanded';
|
|
35570
|
+
this.syncTabs();
|
|
35571
|
+
this.syncFab();
|
|
35572
|
+
// Consumers can synchronously update label visibility in these listeners;
|
|
35573
|
+
// publish only after every destination and the FAB have the target state.
|
|
35488
35574
|
if (newVal === 'expanded')
|
|
35489
35575
|
this.mdExpand.emit();
|
|
35490
35576
|
else
|
|
35491
35577
|
this.mdCollapse.emit();
|
|
35492
|
-
// Switch the destination layout immediately in both directions (modal and
|
|
35493
|
-
// standard alike). Each tab glides its icon + label to the new layout, the
|
|
35494
|
-
// FAB morphs, and — for modal — the overlay container grows/shrinks and the
|
|
35495
|
-
// scrim fades, all driven by CSS transitions on the same spring (see the
|
|
35496
|
-
// modal section of the stylesheet). No JS deferral needed.
|
|
35497
|
-
this.tabsExpanded = newVal === 'expanded';
|
|
35498
|
-
this.syncTabs();
|
|
35499
|
-
this.syncFab();
|
|
35500
35578
|
}
|
|
35501
35579
|
/**
|
|
35502
35580
|
* Mirror the rail's expanded state onto a slotted FAB's `extended` prop so it
|
|
@@ -35692,7 +35770,7 @@ class MdNavigationRail {
|
|
|
35692
35770
|
render() {
|
|
35693
35771
|
const hasFooterProfile = this.hasFooterLeading || this.hasFooterContent;
|
|
35694
35772
|
const footerContentVisible = this.variant === 'expanded' || this.orientation === 'horizontal';
|
|
35695
|
-
return (hAsync(Host, { key: '
|
|
35773
|
+
return (hAsync(Host, { key: '124a40d796b9d1e55dceab1bd1f4bbec1c6f091d', class: {
|
|
35696
35774
|
'md-navigation-rail': true,
|
|
35697
35775
|
[`md-navigation-rail--${this.variant}`]: true,
|
|
35698
35776
|
'md-navigation-rail--tabs-expanded': this.tabsExpanded,
|
|
@@ -35707,7 +35785,7 @@ class MdNavigationRail {
|
|
|
35707
35785
|
'md-navigation-rail--with-header': this.hasHeader,
|
|
35708
35786
|
'md-navigation-rail--with-fab': this.hasFab,
|
|
35709
35787
|
'md-navigation-rail--with-footer': this.hasFooter || hasFooterProfile,
|
|
35710
|
-
}, role: "navigation", "aria-label": this.label, onKeyDown: this.handleKeyDown }, hAsync("div", { key: '
|
|
35788
|
+
}, role: "navigation", "aria-label": this.label, onKeyDown: this.handleKeyDown }, hAsync("div", { key: '199635ecb3a8c9d5086ad75928356fdeffddd7e9', class: "md-navigation-rail__scrim", part: "scrim", "aria-hidden": "true", onClick: this.handleScrimClick }), hAsync("div", { key: '3e8b5cacfdeb4e03a6a519803a5528bff0abf1b2', class: "md-navigation-rail__container", part: "container" }, hAsync("div", { key: '97a617545f61a420e2d7eb52285736a2242440c5', class: "md-navigation-rail__logo", part: "logo", hidden: !this.hasLogo && !this.hasLogoExpanded }, hAsync("span", { key: '8eaf0e0844d148b771e2e8707af1d5c1719fb509', class: "md-navigation-rail__logo-contracted", part: "logo-contracted" }, hAsync("slot", { key: '914af22463d76f8afa2193c0aa9ec1933cf68419', name: "logo", onSlotchange: this.handleLogoSlotChange })), hAsync("span", { key: '17948964885f8a51a49c12cb49413d1221f9fc12', class: "md-navigation-rail__logo-expanded", part: "logo-expanded" }, hAsync("slot", { key: 'cc57a2d8d159135928ae06b9edf333ebe8f325f7', name: "logo-expanded", onSlotchange: this.handleLogoExpandedSlotChange }))), this.expandable && this.orientation === 'vertical' && (hAsync("div", { key: 'aa3d876126108c2df82780b8ea3191664ec467ae', class: "md-navigation-rail__toggle", part: "toggle" }, hAsync("md-icon-button", { key: 'c49240aae0936ea1116869c0f77313fd989c9346', class: "md-navigation-rail__toggle-button", icon: this.variant === 'expanded' ? 'menu_open' : 'menu', "aria-label": this.toggleLabel, "aria-expanded": this.variant === 'expanded' ? 'true' : 'false', onClick: this.handleToggleClick }))), hAsync("div", { key: 'bd2063d3577edb1f465ee4e4d24cd8d62b50e9b8', class: "md-navigation-rail__header", part: "header", hidden: !this.hasHeader }, hAsync("slot", { key: 'e643f6b89614dc89b5213a58eaa0d96cc716f67c', name: "header", onSlotchange: this.handleHeaderSlotChange })), hAsync("div", { key: 'ed20b3cb8b06abe4f686c1602fefe32c8399849c', class: "md-navigation-rail__fab", part: "fab", hidden: !this.hasFab }, hAsync("slot", { key: 'ee9afa79830f836ae1887d423d07126ba0318f2e', name: "fab", onSlotchange: this.handleFabSlotChange })), hAsync("div", { key: '67e702ea8fb46698d111c9add2c43cf2ae0a395a', class: "md-navigation-rail__destinations", part: "destinations", role: this.hasLinkDestinations ? undefined : 'tablist', "aria-orientation": this.hasLinkDestinations ? undefined : this.orientation, "aria-label": this.hasLinkDestinations ? undefined : this.label }, hAsync("slot", { key: 'd5e766b9d463b249383b2ded2c07ba99601564dd', onSlotchange: this.handleSlotChange })), this.overflowCount > 0 && (hAsync("div", { key: 'f8b4fbc29eaeb93645357887f9bea1e4cad5b35b', class: "md-navigation-rail__overflow", part: "overflow" }, hAsync("button", { key: 'd719a52624b4ff5b1b157c5fecd7ae8f644c63b0', id: this.overflowId, type: "button", class: "md-navigation-rail__overflow-trigger", part: "overflow-trigger", "aria-haspopup": "menu", "aria-label": this.overflowLabel, onClick: this.toggleOverflow }, hAsync("span", { key: '9b7a74eb4bf099767b2d79177fa0d94c62ba62ed', class: "material-symbols-outlined md-navigation-rail__overflow-icon", "aria-hidden": "true" }, this.overflowIcon), hAsync("span", { key: 'a0c01b9f163fd8ff5a5b6f24c9d7171796cf45b5', class: "md-navigation-rail__overflow-label" }, this.overflowLabel)), hAsync("md-menu", { key: 'c185e6007ebfb4b5d0e6842ac2da24c4e35b346c', anchor: this.overflowId, placement: this.orientation === 'horizontal' ? 'bottom-end' : 'top-start' }, this.overflowedTabs.map((tab) => (hAsync("md-menu-item", { key: tab.getAttribute('value') || tab.getAttribute('label') || '', headline: tab.getAttribute('label') || '', onClick: () => this.selectOverflowed(tab) }, tab.getAttribute('icon') && (hAsync("span", { slot: "leading-icon", class: "material-symbols-outlined" }, tab.getAttribute('icon'))))))))), hAsync("div", { key: 'bebafd7a0737dba5d84f22c6374b3567a22fb480', class: "md-navigation-rail__footer", part: "footer", hidden: !this.hasFooter && !hasFooterProfile }, hAsync("div", { key: 'fa1c1f673e990a2ea08d3530b237a97b4a3acc3a', class: "md-navigation-rail__footer-profile", part: "footer-profile", hidden: !hasFooterProfile }, hAsync("div", { key: '3c85db5869bb530fbf88c334734d20d987396805', class: "md-navigation-rail__footer-leading", part: "footer-leading" }, hAsync("slot", { key: '7eb3b3ba3cd9c493e24eb7ba87ef304c435e2566', name: "footer-leading", onSlotchange: this.handleFooterProfileSlotChange })), hAsync("div", { key: 'd5922f5528d53c86943608b8f46048a3b209b377', class: "md-navigation-rail__footer-content", part: "footer-content", "aria-hidden": footerContentVisible ? undefined : 'true', inert: !footerContentVisible }, hAsync("slot", { key: 'f9b41f2a53f60259a734a00791dafbf5921f0d91', name: "footer-content", onSlotchange: this.handleFooterProfileSlotChange }))), hAsync("slot", { key: 'a43772a2b1e29c66009e2652b7f2fdf41f6658c5', name: "footer", onSlotchange: this.handleFooterSlotChange })))));
|
|
35711
35789
|
}
|
|
35712
35790
|
get el() { return getElement(this); }
|
|
35713
35791
|
static get watchers() { return {
|
|
@@ -35766,7 +35844,7 @@ class MdNavigationRail {
|
|
|
35766
35844
|
}; }
|
|
35767
35845
|
}
|
|
35768
35846
|
|
|
35769
|
-
const mdNavigationRailTabCss = () => `:host{--_icon-color:var( --md-navigation-rail-tab-icon-color, var(--md-sys-color-on-surface-variant, #49454F) );--_active-icon-color:var( --md-navigation-rail-tab-active-icon-color, var(--md-sys-color-on-secondary-container, #4A4458) );--_label-color:var( --md-navigation-rail-tab-label-color, var(--md-sys-color-on-surface-variant, #49454F) );--_active-label-color:var( --md-navigation-rail-tab-active-label-color, var(--md-sys-color-secondary, #625B71) );--_indicator-color:var( --md-navigation-rail-tab-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8) );--_indicator-shape:var( --md-navigation-rail-tab-indicator-shape, var(--md-sys-shape-corner-full, 9999px) );--_indicator-width:var(--md-navigation-rail-tab-indicator-width, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));--_indicator-height:var(--md-navigation-rail-tab-indicator-height, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_icon-size:var(--md-navigation-rail-tab-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_min-height:var(--md-navigation-rail-tab-min-height, 56px);--_badge-color:var( --md-navigation-rail-tab-badge-color, var(--md-sys-color-error, #B3261E) );--_badge-content-color:var( --md-navigation-rail-tab-badge-content-color, var(--md-sys-color-on-error, #FFFFFF) );--_focus-ring-color:var( --md-navigation-rail-tab-focus-ring-color, var(--md-sys-color-secondary, #625B71) );--_state-layer-color:var( --md-navigation-rail-tab-state-layer-color, var(--md-sys-color-on-secondary-container, #4A4458) );--_motion-duration:var(--md-sys-motion-spring-effects-fast-duration, 150ms);--_motion-easing:var( --md-sys-motion-spring-effects-fast-easing, cubic-bezier(0.31, 0.94, 0.34, 1) );--_motion-spatial-duration:var(--md-sys-motion-spring-spatial-fast-duration, 350ms);--_motion-spatial-easing:var( --md-sys-motion-spring-spatial-fast-easing, cubic-bezier(0.42, 1.67, 0.21, 0.9) );--_hover-opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08);--_focus-opacity:var(--md-navigation-rail-tab-focus-state-layer-opacity, 0.10);--_press-opacity:var(--md-navigation-rail-tab-press-state-layer-opacity, 0.10);--_disabled-opacity:var(--md-sys-state-disabled-content-opacity, 0.38);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:max(2px, calc(4px + var(--md-sys-density-scale, 0) * 1px));inline-size:100%;min-block-size:max(48px, calc(var(--_min-height) + var(--md-sys-density-scale, 0) * 4px));padding-block:max(0px, calc(2px + var(--md-sys-density-scale, 0) * 0.5px));padding-inline:0;box-sizing:border-box;cursor:pointer;user-select:none;position:relative;outline:none;-webkit-tap-highlight-color:transparent;color:var(--_icon-color);transition:color var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail-tab--active){color:var(--_active-icon-color)}:host(.md-navigation-rail-tab--disabled){cursor:default;pointer-events:none;color:color-mix( in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--_disabled-opacity) * 100%), transparent )}:host(:focus-visible){outline:none}:host(:focus-visible) .md-navigation-rail-tab__indicator{outline:3px solid var(--_focus-ring-color);outline-offset:2px}:host(.md-navigation-rail-tab--expanded:focus-visible) .md-navigation-rail-tab__indicator{outline-offset:-3px}md-ripple{border-radius:inherit}.md-navigation-rail-tab__indicator{position:absolute;inset-block-start:max(2px, calc(2px + var(--md-sys-density-scale, 0) * -0.5px));inset-inline:0;margin-inline:auto;inline-size:var(--_indicator-width);block-size:var(--_indicator-height);border-radius:var(--_indicator-shape);background-color:transparent;pointer-events:none;overflow:hidden;transition:background-color var(--_motion-duration) var(--_motion-easing), inline-size var(--_motion-spatial-duration) var(--_motion-spatial-easing);z-index:0}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__indicator{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--labels-none:not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__indicator,:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--active):not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__indicator{inset-block:0;margin-block:auto}.md-navigation-rail-tab__state-layer{position:absolute;inset:0;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_motion-duration) var(--_motion-easing);border-radius:inherit}:host(:hover:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_hover-opacity)}:host(:focus-visible:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_focus-opacity)}:host(:active:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_press-opacity)}.md-navigation-rail-tab__icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;inline-size:var(--_indicator-width);block-size:var(--_indicator-height);z-index:1;pointer-events:none}.md-navigation-rail-tab__icon-box{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size)}.md-navigation-rail-tab__icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;display:inline-flex;align-items:center;justify-content:center;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;transition:font-variation-settings var(--_motion-duration) var(--_motion-easing);color:inherit}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__icon{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}::slotted([slot='icon']){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size);font-size:var(--_icon-size);color:currentColor;fill:currentColor;pointer-events:none}.md-navigation-rail-tab__label{position:relative;z-index:1;font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-medium-font-weight, 500);line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));letter-spacing:var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);text-align:center;color:var(--_label-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;transition:color var(--_motion-duration) var(--_motion-easing), font-weight var(--_motion-duration) var(--_motion-easing), opacity var(--_motion-duration) var(--_motion-easing);padding-inline:var(--md-sys-spacing-inset-xs, 4px);box-sizing:border-box}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__label{color:var(--_active-label-color);font-weight:var(--md-sys-typescale-label-medium-prominent-font-weight, 700)}:host(.md-navigation-rail-tab--labels-none) .md-navigation-rail-tab__label{display:none}:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__label{max-block-size:1.25rem;transition:color var(--_motion-duration) var(--_motion-easing), font-weight var(--_motion-duration) var(--_motion-easing), opacity var(--_motion-duration) var(--_motion-easing), max-block-size var(--_motion-duration) var(--_motion-easing), margin-block-start var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--active):not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__label{opacity:0;max-block-size:0;margin-block-start:-4px}:host(.md-navigation-rail-tab--labels-selected.md-navigation-rail-tab--expanded:not(.md-navigation-rail-tab--active)) .md-navigation-rail-tab__label{display:none}:host(.md-navigation-rail-tab--expanded){flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--md-sys-spacing-gap-sm, 8px);padding-inline:var(--md-sys-spacing-inset-lg, 16px);padding-block:0;inline-size:fit-content;min-block-size:max(48px, calc(56px + var(--md-sys-density-scale, 0) * 4px));border-radius:var(--_indicator-shape)}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__indicator{position:absolute;inset:0;transform:none;inline-size:auto;block-size:auto;border-radius:var(--_indicator-shape)}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__icon-wrapper{inline-size:var(--_icon-size);block-size:var(--_icon-size);flex:0 0 auto}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__label{text-align:start;flex:1 1 auto;min-inline-size:0;display:inline-block;font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);letter-spacing:var(--md-sys-typescale-label-large-letter-spacing, 0.1px)}:host(.md-navigation-rail-tab--expanded.md-navigation-rail-tab--active) .md-navigation-rail-tab__label{font-weight:var(--md-sys-typescale-label-large-prominent-font-weight, 700)}:host(.md-navigation-rail-tab--expanded.md-navigation-rail-tab--labels-none) .md-navigation-rail-tab__label{display:none}.md-navigation-rail-tab__badge{position:absolute;background-color:var(--_badge-color);color:var(--_badge-content-color);border-radius:var(--md-sys-shape-corner-full, 9999px);line-height:1;box-sizing:border-box;pointer-events:none;z-index:2}.md-navigation-rail-tab__badge--dot{inline-size:6px;block-size:6px;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}.md-navigation-rail-tab__badge--large{min-inline-size:16px;block-size:16px;padding-inline:4px;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center}.md-navigation-rail-tab__anchor{display:contents;color:inherit;text-decoration:none;border-radius:inherit}.md-navigation-rail-tab__anchor::after{content:'';position:absolute;inset:0;z-index:0}@media (prefers-reduced-motion: reduce){:host,.md-navigation-rail-tab__indicator,.md-navigation-rail-tab__state-layer,.md-navigation-rail-tab__icon,.md-navigation-rail-tab__label{transition:none}}@media (forced-colors: active){:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__indicator{background-color:Highlight;forced-color-adjust:none}:host(.md-navigation-rail-tab--active){color:HighlightText}:host(:focus-visible) .md-navigation-rail-tab__indicator{outline:3px solid CanvasText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}:host([data-orientation='horizontal']){block-size:100%}:host([data-orientation='horizontal']) .md-navigation-rail-tab__indicator,:host([data-orientation='horizontal']) .md-navigation-rail-tab__state-layer{display:none}:host([data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper{border-radius:var(--_indicator-shape);background-color:transparent;transition:background-color var(--_motion-duration) var(--_motion-easing)}:host([data-orientation='horizontal'].md-navigation-rail-tab--active) .md-navigation-rail-tab__icon-wrapper{background-color:var(--_indicator-color)}:host([data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper::after{content:'';position:absolute;inset:0;border-radius:inherit;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_motion-duration) var(--_motion-easing)}:host([data-orientation='horizontal']:hover:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__icon-wrapper::after{opacity:var(--_hover-opacity)}:host([data-orientation='horizontal']:active:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__icon-wrapper::after{opacity:var(--_press-opacity)}:host([data-orientation='horizontal']:focus-visible) .md-navigation-rail-tab__icon-wrapper{outline:3px solid var(--_focus-ring-color);outline-offset:2px}.md-navigation-rail-tab__caret{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));line-height:1;vertical-align:middle;margin-inline-start:2px;transition:transform var(--md-navigation-rail-tab-caret-duration, var(--md-sys-motion-duration-medium2, 300ms)) var( --md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1) )}:host([aria-expanded='true']) .md-navigation-rail-tab__caret{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.md-navigation-rail-tab__caret{transition-duration:1ms}}:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__indicator{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--child-selected[data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__icon,:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__label{color:var(--_active-icon-color)}:host([hidden]){display:none !important}`;
|
|
35847
|
+
const mdNavigationRailTabCss = () => `:host{--_icon-color:var( --md-navigation-rail-tab-icon-color, var(--md-sys-color-on-surface-variant, #49454F) );--_active-icon-color:var( --md-navigation-rail-tab-active-icon-color, var(--md-sys-color-on-secondary-container, #4A4458) );--_label-color:var( --md-navigation-rail-tab-label-color, var(--md-sys-color-on-surface-variant, #49454F) );--_active-label-color:var( --md-navigation-rail-tab-active-label-color, var(--md-sys-color-secondary, #625B71) );--_indicator-color:var( --md-navigation-rail-tab-indicator-color, var(--md-sys-color-secondary-container, #E8DEF8) );--_indicator-shape:var( --md-navigation-rail-tab-indicator-shape, var(--md-sys-shape-corner-full, 9999px) );--_indicator-width:var(--md-navigation-rail-tab-indicator-width, max(40px, calc(56px + var(--md-sys-density-scale, 0) * 4px)));--_indicator-height:var(--md-navigation-rail-tab-indicator-height, max(24px, calc(32px + var(--md-sys-density-scale, 0) * 2px)));--_icon-size:var(--md-navigation-rail-tab-icon-size, max(18px, calc(24px + var(--md-sys-density-scale, 0) * 1px)));--_min-height:var(--md-navigation-rail-tab-min-height, 56px);--_badge-color:var( --md-navigation-rail-tab-badge-color, var(--md-sys-color-error, #B3261E) );--_badge-content-color:var( --md-navigation-rail-tab-badge-content-color, var(--md-sys-color-on-error, #FFFFFF) );--_focus-ring-color:var( --md-navigation-rail-tab-focus-ring-color, var(--md-sys-color-secondary, #625B71) );--_state-layer-color:var( --md-navigation-rail-tab-state-layer-color, var(--md-sys-color-on-secondary-container, #4A4458) );--_motion-duration:var(--md-sys-motion-spring-effects-fast-duration, 150ms);--_motion-easing:var( --md-sys-motion-spring-effects-fast-easing, cubic-bezier(0.31, 0.94, 0.34, 1) );--_hover-opacity:var(--md-sys-state-hover-state-layer-opacity, 0.08);--_focus-opacity:var(--md-navigation-rail-tab-focus-state-layer-opacity, 0.10);--_press-opacity:var(--md-navigation-rail-tab-press-state-layer-opacity, 0.10);--_disabled-opacity:var(--md-sys-state-disabled-content-opacity, 0.38);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:max(2px, calc(4px + var(--md-sys-density-scale, 0) * 1px));inline-size:100%;min-block-size:max(48px, calc(var(--_min-height) + var(--md-sys-density-scale, 0) * 4px));padding-block:max(0px, calc(2px + var(--md-sys-density-scale, 0) * 0.5px));padding-inline:0;box-sizing:border-box;cursor:pointer;user-select:none;position:relative;outline:none;-webkit-tap-highlight-color:transparent;color:var(--_icon-color);transition:color var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail-tab--active){color:var(--_active-icon-color)}:host(.md-navigation-rail-tab--disabled){cursor:default;pointer-events:none;color:color-mix( in srgb, var(--md-sys-color-on-surface, #1C1B1F) calc(var(--_disabled-opacity) * 100%), transparent )}:host(:focus-visible){outline:none}:host(:focus-visible) .md-navigation-rail-tab__indicator{outline:3px solid var(--_focus-ring-color);outline-offset:2px}:host(.md-navigation-rail-tab--expanded:focus-visible) .md-navigation-rail-tab__indicator{outline-offset:-3px}md-ripple{border-radius:inherit}.md-navigation-rail-tab__indicator{position:absolute;inset-block-start:max(2px, calc(2px + var(--md-sys-density-scale, 0) * -0.5px));inset-inline:0;margin-inline:auto;inline-size:var(--_indicator-width);block-size:var(--_indicator-height);border-radius:var(--_indicator-shape);background-color:transparent;pointer-events:none;overflow:hidden;transition:background-color var(--_motion-duration) var(--_motion-easing);z-index:0}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__indicator{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--labels-none:not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__indicator,:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--active):not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__indicator{inset-block:0;margin-block:auto}.md-navigation-rail-tab__state-layer{position:absolute;inset:0;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_motion-duration) var(--_motion-easing);border-radius:inherit}:host(:hover:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_hover-opacity)}:host(:focus-visible:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_focus-opacity)}:host(:active:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__state-layer{opacity:var(--_press-opacity)}.md-navigation-rail-tab__icon-wrapper{position:relative;display:flex;align-items:center;justify-content:center;inline-size:var(--_indicator-width);block-size:var(--_indicator-height);z-index:1;pointer-events:none}.md-navigation-rail-tab__icon-box{position:relative;display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size)}.md-navigation-rail-tab__icon{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:var(--_icon-size);inline-size:var(--_icon-size);block-size:var(--_icon-size);line-height:1;font-weight:normal;font-style:normal;letter-spacing:normal;text-transform:none;white-space:nowrap;overflow-wrap:normal;direction:ltr;-webkit-font-smoothing:antialiased;display:inline-flex;align-items:center;justify-content:center;font-variation-settings:'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;transition:font-variation-settings var(--_motion-duration) var(--_motion-easing);color:inherit}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__icon{font-variation-settings:'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24}::slotted([slot='icon']){display:inline-flex;align-items:center;justify-content:center;inline-size:var(--_icon-size);block-size:var(--_icon-size);font-size:var(--_icon-size);color:currentColor;fill:currentColor;pointer-events:none}.md-navigation-rail-tab__label{position:relative;z-index:1;font-family:var(--md-sys-typescale-label-medium-font-family, Roboto, sans-serif);font-size:max(10px, calc(12px + var(--md-sys-density-scale, 0) * 0.5px));font-weight:var(--md-sys-typescale-label-medium-font-weight, 500);line-height:max(14px, calc(16px + var(--md-sys-density-scale, 0) * 0.5px));letter-spacing:var(--md-sys-typescale-label-medium-letter-spacing, 0.5px);text-align:center;color:var(--_label-color);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-inline-size:100%;transition:color var(--_motion-duration) var(--_motion-easing), font-weight var(--_motion-duration) var(--_motion-easing), opacity var(--_motion-duration) var(--_motion-easing);padding-inline:var(--md-sys-spacing-inset-xs, 4px);box-sizing:border-box}:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__label{color:var(--_active-label-color);font-weight:var(--md-sys-typescale-label-medium-prominent-font-weight, 700)}:host(.md-navigation-rail-tab--labels-none) .md-navigation-rail-tab__label{display:none}:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__label{max-block-size:1.25rem;transition:color var(--_motion-duration) var(--_motion-easing), font-weight var(--_motion-duration) var(--_motion-easing), opacity var(--_motion-duration) var(--_motion-easing), max-block-size var(--_motion-duration) var(--_motion-easing), margin-block-start var(--_motion-duration) var(--_motion-easing)}:host(.md-navigation-rail-tab--labels-selected:not(.md-navigation-rail-tab--active):not(.md-navigation-rail-tab--expanded)) .md-navigation-rail-tab__label{opacity:0;max-block-size:0;margin-block-start:-4px}:host(.md-navigation-rail-tab--labels-selected.md-navigation-rail-tab--expanded:not(.md-navigation-rail-tab--active)) .md-navigation-rail-tab__label{display:none}:host(.md-navigation-rail-tab--expanded){flex-direction:row;align-items:center;justify-content:flex-start;gap:var(--md-sys-spacing-gap-sm, 8px);padding-inline:var(--md-sys-spacing-inset-lg, 16px);padding-inline-start:calc(var(--_rail-icon-axis, calc(var(--md-sys-spacing-inset-lg, 16px) + var(--_icon-size) / 2)) - var(--_icon-size) / 2);padding-block:0;inline-size:fit-content;min-block-size:max(48px, calc(56px + var(--md-sys-density-scale, 0) * 4px));border-radius:var(--_indicator-shape)}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__indicator{position:absolute;inset:0;transform:none;inline-size:auto;block-size:auto;border-radius:var(--_indicator-shape)}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__icon-wrapper{inline-size:var(--_icon-size);block-size:var(--_icon-size);flex:0 0 auto}:host(.md-navigation-rail-tab--expanded) .md-navigation-rail-tab__label{text-align:start;flex:1 1 auto;min-inline-size:0;display:inline-block;font-family:var(--md-sys-typescale-label-large-font-family, Roboto, sans-serif);font-size:var(--md-sys-typescale-label-large-font-size, 14px);font-weight:var(--md-sys-typescale-label-large-font-weight, 500);line-height:var(--md-sys-typescale-label-large-line-height, 20px);letter-spacing:var(--md-sys-typescale-label-large-letter-spacing, 0.1px)}:host(.md-navigation-rail-tab--expanded.md-navigation-rail-tab--active) .md-navigation-rail-tab__label{font-weight:var(--md-sys-typescale-label-large-prominent-font-weight, 700)}:host(.md-navigation-rail-tab--expanded.md-navigation-rail-tab--labels-none) .md-navigation-rail-tab__label{display:none}.md-navigation-rail-tab__badge{position:absolute;background-color:var(--_badge-color);color:var(--_badge-content-color);border-radius:var(--md-sys-shape-corner-full, 9999px);line-height:1;box-sizing:border-box;pointer-events:none;z-index:2}.md-navigation-rail-tab__badge--dot{inline-size:6px;block-size:6px;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%)}.md-navigation-rail-tab__badge--large{min-inline-size:16px;block-size:16px;padding-inline:4px;inset-block-start:0;inset-inline-end:0;transform:translate(50%, -50%);font-family:var(--md-sys-typescale-label-small-font-family, Roboto, sans-serif);font-size:11px;font-weight:500;display:flex;align-items:center;justify-content:center}.md-navigation-rail-tab__anchor{display:contents;color:inherit;text-decoration:none;border-radius:inherit}.md-navigation-rail-tab__anchor::after{content:'';position:absolute;inset:0;z-index:0}@media (prefers-reduced-motion: reduce){:host,.md-navigation-rail-tab__indicator,.md-navigation-rail-tab__state-layer,.md-navigation-rail-tab__icon,.md-navigation-rail-tab__label{transition:none}}@media (forced-colors: active){:host(.md-navigation-rail-tab--active) .md-navigation-rail-tab__indicator{background-color:Highlight;forced-color-adjust:none}:host(.md-navigation-rail-tab--active){color:HighlightText}:host(:focus-visible) .md-navigation-rail-tab__indicator{outline:3px solid CanvasText}}:host([density='-1']){--md-sys-density-scale:-1}:host([density='-2']){--md-sys-density-scale:-2}:host([density='-3']){--md-sys-density-scale:-3}:host([density='-4']){--md-sys-density-scale:-4}:host([data-orientation='horizontal']){block-size:100%}:host([data-orientation='horizontal']) .md-navigation-rail-tab__indicator,:host([data-orientation='horizontal']) .md-navigation-rail-tab__state-layer{display:none}:host([data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper{border-radius:var(--_indicator-shape);background-color:transparent;transition:background-color var(--_motion-duration) var(--_motion-easing)}:host([data-orientation='horizontal'].md-navigation-rail-tab--active) .md-navigation-rail-tab__icon-wrapper{background-color:var(--_indicator-color)}:host([data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper::after{content:'';position:absolute;inset:0;border-radius:inherit;background-color:var(--_state-layer-color);opacity:0;pointer-events:none;transition:opacity var(--_motion-duration) var(--_motion-easing)}:host([data-orientation='horizontal']:hover:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__icon-wrapper::after{opacity:var(--_hover-opacity)}:host([data-orientation='horizontal']:active:not(.md-navigation-rail-tab--disabled)) .md-navigation-rail-tab__icon-wrapper::after{opacity:var(--_press-opacity)}:host([data-orientation='horizontal']:focus-visible) .md-navigation-rail-tab__icon-wrapper{outline:3px solid var(--_focus-ring-color);outline-offset:2px}.md-navigation-rail-tab__caret{font-family:var(--md-sys-icon-font-family, 'Material Symbols Outlined', 'Material Icons');font-size:max(14px, calc(18px + var(--md-sys-density-scale, 0) * 1px));line-height:1;vertical-align:middle;margin-inline-start:2px;transition:transform var(--md-navigation-rail-tab-caret-duration, var(--md-sys-motion-duration-medium2, 300ms)) var( --md-sys-motion-easing-emphasized, cubic-bezier(0.2, 0, 0, 1) )}:host([aria-expanded='true']) .md-navigation-rail-tab__caret{transform:rotate(180deg)}@media (prefers-reduced-motion: reduce){.md-navigation-rail-tab__caret{transition-duration:1ms}}:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__indicator{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--child-selected[data-orientation='horizontal']) .md-navigation-rail-tab__icon-wrapper{background-color:var(--_indicator-color)}:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__icon,:host(.md-navigation-rail-tab--child-selected) .md-navigation-rail-tab__label{color:var(--_active-icon-color)}:host([hidden]){display:none !important}`;
|
|
35770
35848
|
|
|
35771
35849
|
/**
|
|
35772
35850
|
* Material Design 3 — Navigation Rail Destination (Tab)
|
|
@@ -35820,9 +35898,12 @@ class MdNavigationRailTab {
|
|
|
35820
35898
|
* inherited one. 0 = default, -4 = ultra-compact.
|
|
35821
35899
|
*/
|
|
35822
35900
|
this.density = 0;
|
|
35823
|
-
/**
|
|
35901
|
+
/** Rendered geometry captured before the rail or destination changes layout. */
|
|
35824
35902
|
this.iconFirst = null;
|
|
35903
|
+
this.indicatorFirst = null;
|
|
35904
|
+
this.labelFirst = null;
|
|
35825
35905
|
this.pendingTransition = false;
|
|
35906
|
+
this.transitionPrepared = false;
|
|
35826
35907
|
/** Mirrors the slotted submenu's open state for `aria-expanded`. */
|
|
35827
35908
|
this.submenuOpen = false;
|
|
35828
35909
|
/** True when a dropdown is slotted, so the label can show a disclosure caret. */
|
|
@@ -35888,6 +35969,21 @@ class MdNavigationRailTab {
|
|
|
35888
35969
|
}
|
|
35889
35970
|
};
|
|
35890
35971
|
}
|
|
35972
|
+
connectedCallback() {
|
|
35973
|
+
this.unregisterTransition = registerRailTabTransition(this.el, () => {
|
|
35974
|
+
this.captureTransition();
|
|
35975
|
+
this.transitionPrepared = true;
|
|
35976
|
+
});
|
|
35977
|
+
}
|
|
35978
|
+
disconnectedCallback() {
|
|
35979
|
+
this.unregisterTransition?.();
|
|
35980
|
+
this.cancelAnimations();
|
|
35981
|
+
this.iconFirst = null;
|
|
35982
|
+
this.indicatorFirst = null;
|
|
35983
|
+
this.labelFirst = null;
|
|
35984
|
+
this.pendingTransition = false;
|
|
35985
|
+
this.transitionPrepared = false;
|
|
35986
|
+
}
|
|
35891
35987
|
componentDidLoad() {
|
|
35892
35988
|
if (typeof window !== 'undefined' &&
|
|
35893
35989
|
window.__STENCIL_DEV_MODE__ !== false) {
|
|
@@ -35911,20 +36007,95 @@ class MdNavigationRailTab {
|
|
|
35911
36007
|
this.syncSubmenuSelection();
|
|
35912
36008
|
}
|
|
35913
36009
|
}
|
|
35914
|
-
/**
|
|
35915
|
-
*
|
|
35916
|
-
* slightly different spots. To avoid an abrupt snap we FLIP it: capture the
|
|
35917
|
-
* old centre before the layout flips, then (in componentDidRender) glide it
|
|
35918
|
-
* to the new centre with a smooth DECELERATE curve — deliberately not the
|
|
35919
|
-
* rail's springy/overshoot easing, which made the small move look like a
|
|
35920
|
-
* floaty wobble. The label can't slide cleanly (its path cuts through the
|
|
35921
|
-
* icon), so it cross-fades into its new position instead.
|
|
35922
|
-
*/
|
|
36010
|
+
/** The rail prepares before its own padding changes. Direct prop changes
|
|
36011
|
+
* still capture here, so a destination also behaves correctly in isolation. */
|
|
35923
36012
|
onExpandedChange() {
|
|
35924
|
-
if (this.
|
|
35925
|
-
|
|
36013
|
+
if (!this.transitionPrepared)
|
|
36014
|
+
this.captureTransition();
|
|
36015
|
+
this.transitionPrepared = false;
|
|
36016
|
+
}
|
|
36017
|
+
captureTransition() {
|
|
36018
|
+
const sr = this.el.shadowRoot;
|
|
36019
|
+
const indicator = sr?.querySelector('[part="indicator"]');
|
|
36020
|
+
const label = sr?.querySelector('[part="label"]');
|
|
36021
|
+
// Read the visible (possibly mid-animation) boxes BEFORE cancelling. A
|
|
36022
|
+
// reversal then starts at the pixels on screen, not the previous target.
|
|
35926
36023
|
this.iconFirst = this.iconCentre();
|
|
35927
|
-
this.
|
|
36024
|
+
this.indicatorFirst = indicator?.getBoundingClientRect() ?? null;
|
|
36025
|
+
const labelCss = label ? getComputedStyle(label) : null;
|
|
36026
|
+
this.labelFirst = label && labelCss ? {
|
|
36027
|
+
rect: label.getBoundingClientRect(),
|
|
36028
|
+
opacity: Number.parseFloat(labelCss.opacity) || 0,
|
|
36029
|
+
visible: labelCss.display !== 'none' && labelCss.visibility !== 'hidden',
|
|
36030
|
+
fontFamily: labelCss.fontFamily,
|
|
36031
|
+
fontSize: labelCss.fontSize,
|
|
36032
|
+
fontWeight: labelCss.fontWeight,
|
|
36033
|
+
lineHeight: labelCss.lineHeight,
|
|
36034
|
+
letterSpacing: labelCss.letterSpacing,
|
|
36035
|
+
paddingTop: labelCss.paddingTop,
|
|
36036
|
+
paddingRight: labelCss.paddingRight,
|
|
36037
|
+
paddingBottom: labelCss.paddingBottom,
|
|
36038
|
+
paddingLeft: labelCss.paddingLeft,
|
|
36039
|
+
textAlign: labelCss.textAlign,
|
|
36040
|
+
boxSizing: labelCss.boxSizing,
|
|
36041
|
+
} : null;
|
|
36042
|
+
this.cancelAnimations();
|
|
36043
|
+
this.pendingTransition = !this.prefersReducedMotion();
|
|
36044
|
+
if (!this.pendingTransition) {
|
|
36045
|
+
this.iconFirst = null;
|
|
36046
|
+
this.indicatorFirst = null;
|
|
36047
|
+
this.labelFirst = null;
|
|
36048
|
+
}
|
|
36049
|
+
}
|
|
36050
|
+
cancelAnimations() {
|
|
36051
|
+
this.iconAnimation?.cancel();
|
|
36052
|
+
this.indicatorAnimation?.cancel();
|
|
36053
|
+
this.labelAnimation?.cancel();
|
|
36054
|
+
this.iconAnimation = undefined;
|
|
36055
|
+
this.indicatorAnimation = undefined;
|
|
36056
|
+
this.labelAnimation = undefined;
|
|
36057
|
+
this.restoreLabelOverlay();
|
|
36058
|
+
}
|
|
36059
|
+
restoreLabelOverlay() {
|
|
36060
|
+
if (!this.labelOverlay)
|
|
36061
|
+
return;
|
|
36062
|
+
const { element, styles } = this.labelOverlay;
|
|
36063
|
+
for (const [name, previous] of styles) {
|
|
36064
|
+
if (previous.value)
|
|
36065
|
+
element.style.setProperty(name, previous.value, previous.priority);
|
|
36066
|
+
else
|
|
36067
|
+
element.style.removeProperty(name);
|
|
36068
|
+
}
|
|
36069
|
+
this.labelOverlay = undefined;
|
|
36070
|
+
}
|
|
36071
|
+
retainOutgoingLabel(label, first) {
|
|
36072
|
+
const host = this.el.getBoundingClientRect();
|
|
36073
|
+
const styles = new Map();
|
|
36074
|
+
const overlay = {
|
|
36075
|
+
display: 'inline-block', position: 'absolute',
|
|
36076
|
+
left: `${first.rect.left - host.left - this.el.clientLeft + this.el.scrollLeft}px`,
|
|
36077
|
+
top: `${first.rect.top - host.top - this.el.clientTop + this.el.scrollTop}px`,
|
|
36078
|
+
width: `${first.rect.width}px`, height: `${first.rect.height}px`,
|
|
36079
|
+
'max-inline-size': 'none', 'max-block-size': 'none',
|
|
36080
|
+
'margin-top': '0', 'margin-right': '0', 'margin-bottom': '0', 'margin-left': '0',
|
|
36081
|
+
transform: 'none', opacity: String(first.opacity), visibility: 'visible',
|
|
36082
|
+
'pointer-events': 'none', 'transition-property': 'none',
|
|
36083
|
+
// Longhands preserve authored font/margin/padding/transition values when
|
|
36084
|
+
// cleanup restores each property; clearing a shorthand would erase them.
|
|
36085
|
+
'font-family': first.fontFamily, 'font-size': first.fontSize,
|
|
36086
|
+
'font-weight': first.fontWeight, 'line-height': first.lineHeight,
|
|
36087
|
+
'letter-spacing': first.letterSpacing,
|
|
36088
|
+
'padding-top': first.paddingTop, 'padding-right': first.paddingRight,
|
|
36089
|
+
'padding-bottom': first.paddingBottom, 'padding-left': first.paddingLeft,
|
|
36090
|
+
'text-align': first.textAlign, 'box-sizing': first.boxSizing,
|
|
36091
|
+
};
|
|
36092
|
+
for (const [name, value] of Object.entries(overlay)) {
|
|
36093
|
+
if (!value)
|
|
36094
|
+
continue;
|
|
36095
|
+
styles.set(name, { value: label.style.getPropertyValue(name), priority: label.style.getPropertyPriority(name) });
|
|
36096
|
+
label.style.setProperty(name, value);
|
|
36097
|
+
}
|
|
36098
|
+
this.labelOverlay = { element: label, styles };
|
|
35928
36099
|
}
|
|
35929
36100
|
componentDidRender() {
|
|
35930
36101
|
if (!this.pendingTransition)
|
|
@@ -35954,43 +36125,97 @@ class MdNavigationRailTab {
|
|
|
35954
36125
|
const raw = getComputedStyle(this.el)
|
|
35955
36126
|
.getPropertyValue('--md-sys-motion-duration-short4')
|
|
35956
36127
|
.trim();
|
|
35957
|
-
|
|
35958
|
-
return parseFloat(raw) || 200;
|
|
35959
|
-
if (raw.endsWith('s'))
|
|
35960
|
-
return (parseFloat(raw) || 0.2) * 1000;
|
|
35961
|
-
return 200;
|
|
36128
|
+
return parseRailMotionDuration(raw);
|
|
35962
36129
|
}
|
|
35963
36130
|
playTransition() {
|
|
35964
36131
|
const sr = this.el.shadowRoot;
|
|
35965
36132
|
if (!sr)
|
|
35966
36133
|
return;
|
|
35967
|
-
const
|
|
35968
|
-
|
|
35969
|
-
|
|
36134
|
+
const fallbackEasing = getComputedStyle(this.el)
|
|
36135
|
+
.getPropertyValue('--md-sys-motion-easing-standard').trim()
|
|
36136
|
+
|| 'cubic-bezier(0.2, 0, 0, 1)';
|
|
36137
|
+
const { duration, easing, source } = getRailTransitionTiming(this.el, {
|
|
36138
|
+
duration: this.motionDuration(), easing: fallbackEasing,
|
|
36139
|
+
});
|
|
36140
|
+
if (duration === 0) {
|
|
36141
|
+
this.iconFirst = null;
|
|
36142
|
+
this.indicatorFirst = null;
|
|
36143
|
+
this.labelFirst = null;
|
|
36144
|
+
return;
|
|
36145
|
+
}
|
|
36146
|
+
const timing = { duration, easing, fill: 'none' };
|
|
36147
|
+
const icon = sr.querySelector('[part="icon-wrapper"]');
|
|
35970
36148
|
if (icon && this.iconFirst) {
|
|
35971
36149
|
const r = icon.getBoundingClientRect();
|
|
35972
36150
|
const dx = this.iconFirst.cx - (r.left + r.width / 2);
|
|
35973
36151
|
const dy = this.iconFirst.cy - (r.top + r.height / 2);
|
|
35974
36152
|
if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5) {
|
|
35975
|
-
icon.animate([
|
|
36153
|
+
this.iconAnimation = icon.animate([
|
|
35976
36154
|
{ transform: `translate(${dx}px, ${dy}px)` },
|
|
35977
36155
|
{ transform: 'translate(0, 0)' },
|
|
35978
|
-
],
|
|
35979
|
-
|
|
35980
|
-
|
|
35981
|
-
// the rail width morph and the button shape-morph feel.
|
|
35982
|
-
easing: getComputedStyle(this.el)
|
|
35983
|
-
.getPropertyValue('--md-sys-motion-easing-standard')
|
|
35984
|
-
.trim() || 'cubic-bezier(0.2, 0, 0, 1)',
|
|
35985
|
-
fill: 'none',
|
|
35986
|
-
});
|
|
36156
|
+
], timing);
|
|
36157
|
+
const animation = this.iconAnimation;
|
|
36158
|
+
synchronizeRailAnimation(animation, source, () => this.iconAnimation === animation);
|
|
35987
36159
|
}
|
|
35988
36160
|
}
|
|
35989
36161
|
this.iconFirst = null;
|
|
35990
|
-
//
|
|
35991
|
-
|
|
35992
|
-
|
|
35993
|
-
|
|
36162
|
+
// CSS cannot interpolate a content-sized expanded pill to a fixed collapsed
|
|
36163
|
+
// pill. Morph only its surface; scaling the whole destination distorts text.
|
|
36164
|
+
const indicator = sr.querySelector('[part="indicator"]');
|
|
36165
|
+
if (indicator && this.indicatorFirst) {
|
|
36166
|
+
const first = this.indicatorFirst;
|
|
36167
|
+
const last = indicator.getBoundingClientRect();
|
|
36168
|
+
if (first.width > 0 && first.height > 0 && last.width > 0 && last.height > 0) {
|
|
36169
|
+
this.indicatorAnimation = indicator.animate([
|
|
36170
|
+
{
|
|
36171
|
+
transform: `translate(${first.left - last.left}px, ${first.top - last.top}px) scale(${first.width / last.width}, ${first.height / last.height})`,
|
|
36172
|
+
transformOrigin: 'top left',
|
|
36173
|
+
},
|
|
36174
|
+
{ transform: 'translate(0, 0) scale(1, 1)', transformOrigin: 'top left' },
|
|
36175
|
+
], timing);
|
|
36176
|
+
const animation = this.indicatorAnimation;
|
|
36177
|
+
synchronizeRailAnimation(animation, source, () => this.indicatorAnimation === animation);
|
|
36178
|
+
}
|
|
36179
|
+
}
|
|
36180
|
+
this.indicatorFirst = null;
|
|
36181
|
+
const label = sr.querySelector('[part="label"]');
|
|
36182
|
+
const first = this.labelFirst;
|
|
36183
|
+
this.labelFirst = null;
|
|
36184
|
+
if (label && first) {
|
|
36185
|
+
const css = getComputedStyle(label);
|
|
36186
|
+
const targetOpacity = Number.parseFloat(css.opacity) || 0;
|
|
36187
|
+
const visible = css.display !== 'none' && css.visibility !== 'hidden' && targetOpacity > 0;
|
|
36188
|
+
if (!visible && first.visible && first.opacity > 0 && first.rect.width > 0 && first.rect.height > 0) {
|
|
36189
|
+
// Preserve only the outgoing label's painted box. It no longer takes
|
|
36190
|
+
// layout space, so the collapsed icon and pill can reach their targets.
|
|
36191
|
+
this.retainOutgoingLabel(label, first);
|
|
36192
|
+
this.labelAnimation = label.animate([
|
|
36193
|
+
{ opacity: first.opacity }, { opacity: 0 },
|
|
36194
|
+
], { ...timing, fill: 'forwards' });
|
|
36195
|
+
const animation = this.labelAnimation;
|
|
36196
|
+
synchronizeRailAnimation(animation, source, () => this.labelAnimation === animation);
|
|
36197
|
+
void animation.finished.then(() => {
|
|
36198
|
+
if (this.labelAnimation !== animation)
|
|
36199
|
+
return;
|
|
36200
|
+
this.restoreLabelOverlay();
|
|
36201
|
+
this.labelAnimation = undefined;
|
|
36202
|
+
animation.cancel();
|
|
36203
|
+
}, () => undefined);
|
|
36204
|
+
}
|
|
36205
|
+
else if (visible) {
|
|
36206
|
+
const last = label.getBoundingClientRect();
|
|
36207
|
+
const dx = first.visible ? first.rect.left - last.left : 0;
|
|
36208
|
+
const dy = first.visible ? first.rect.top - last.top : 0;
|
|
36209
|
+
const opacity = first.visible ? first.opacity : 0;
|
|
36210
|
+
if (Math.abs(dx) > 0.5 || Math.abs(dy) > 0.5 || Math.abs(opacity - targetOpacity) > 0.01) {
|
|
36211
|
+
this.labelAnimation = label.animate([
|
|
36212
|
+
{ transform: `translate(${dx}px, ${dy}px)`, opacity },
|
|
36213
|
+
{ transform: 'translate(0, 0)', opacity: targetOpacity },
|
|
36214
|
+
], timing);
|
|
36215
|
+
const animation = this.labelAnimation;
|
|
36216
|
+
synchronizeRailAnimation(animation, source, () => this.labelAnimation === animation);
|
|
36217
|
+
}
|
|
36218
|
+
}
|
|
35994
36219
|
}
|
|
35995
36220
|
}
|
|
35996
36221
|
warnMissingAccessibleName() {
|
|
@@ -36115,7 +36340,7 @@ class MdNavigationRailTab {
|
|
|
36115
36340
|
: !this.label
|
|
36116
36341
|
? authorAriaLabel
|
|
36117
36342
|
: undefined;
|
|
36118
|
-
return (hAsync(Host, { key: '
|
|
36343
|
+
return (hAsync(Host, { key: '8b029c97fbf564f9faf7926965bce751f1161ff5', class: {
|
|
36119
36344
|
'md-navigation-rail-tab': true,
|
|
36120
36345
|
'md-navigation-rail-tab--active': this.active,
|
|
36121
36346
|
'md-navigation-rail-tab--child-selected': this.submenuHasSelection && !this.active,
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@awc-ui/core",
|
|
3
|
-
"version": "1.0.0-beta.
|
|
3
|
+
"version": "1.0.0-beta.11",
|
|
4
4
|
"description": "Accessible Material Design 3 Web Components for React, Angular, Vue, and Svelte, with SSR, theming, RTL, forms, and custom elements",
|
|
5
5
|
"keywords": [
|
|
6
6
|
"material-design",
|
|
@@ -175,7 +175,7 @@
|
|
|
175
175
|
"puppeteer": "^24.0.0",
|
|
176
176
|
"size-limit": "^11.1.6",
|
|
177
177
|
"typescript": "^5.4.0",
|
|
178
|
-
"@awc-ui/tokens": "1.0.0-beta.
|
|
178
|
+
"@awc-ui/tokens": "1.0.0-beta.11"
|
|
179
179
|
},
|
|
180
180
|
"license": "MIT",
|
|
181
181
|
"author": "AWC UI",
|
|
@@ -180,6 +180,14 @@ children), `logo`, `logo-expanded`, `header`, `fab`, `footer-leading`,
|
|
|
180
180
|
|
|
181
181
|
---
|
|
182
182
|
|
|
183
|
+
Expansion synchronizes destination and FAB state before emitting `mdExpand` or
|
|
184
|
+
`mdCollapse`. Event handlers can change `label-visibility` without observing a
|
|
185
|
+
stale layout. The rail captures destination geometry before its padding changes,
|
|
186
|
+
so icons and selected indicators remain continuous when toggling or reversing.
|
|
187
|
+
Vertical destination icons and the built-in toggle share the collapsed rail's
|
|
188
|
+
centerline at every density, including custom rail padding and icon sizes.
|
|
189
|
+
Collapsed labels can still move icons vertically to make room for stacked text.
|
|
190
|
+
|
|
183
191
|
## Do / Don't
|
|
184
192
|
|
|
185
193
|
Sourced from [M3 · Navigation rail · Guidelines](https://m3.material.io/components/navigation-rail/guidelines).
|