mdui 2.0.3 → 2.0.5

package/components/navigation-bar/navigation-bar-item.js

@@ -15,7 +15,7 @@ import '../icon.js';
 import { RippleMixin } from '../ripple/ripple-mixin.js';
 import { navigationBarItemStyle } from './navigation-bar-item-style.js';
 /**
- * @summary 底部导航栏项组件。需与 `<mdui-navigation-bar>` 组件配合使用
+ * @summary 底部导航栏项组件。需配合 `<mdui-navigation-bar>` 组件使用
  *
  * ```html
  * <mdui-navigation-bar>
@@ -25,7 +25,7 @@ import { navigationBarItemStyle } from './navigation-bar-item-style.js';
  * </mdui-navigation-bar>
  * ```
  *
- * @slot - 文本
+ * @slot - 导航项文本
  * @slot icon - 图标
  * @slot active-icon - 激活状态的图标元素
  * @slot badge - 徽标
@@ -38,9 +38,9 @@ import { navigationBarItemStyle } from './navigation-bar-item-style.js';
  * @csspart badge - 徽标
  * @csspart icon - 图标
  * @csspart active-icon - 激活状态的图标
- * @csspart label - 文本
+ * @csspart label - 导航项文本
  *
- * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-indicator - 指示器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
  */
 let NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(FocusableMixin(MduiElement))) {
     constructor() {
@@ -86,20 +86,36 @@ let NavigationBarItem = class NavigationBarItem extends AnchorMixin(RippleMixin(
             },
             labelVisibilityClassName,
         ]);
-        return html `<mdui-ripple .noRipple="${!this.active || this.noRipple}" class="${labelVisibilityClassName}" ${ref(this.rippleRef)}></mdui-ripple>${this.href
+        return html `<mdui-ripple
+        .noRipple=${!this.active || this.noRipple}
+        class=${labelVisibilityClassName}
+        ${ref(this.rippleRef)}
+      ></mdui-ripple>
+      ${this.href
             ? this.renderAnchor({
                 part: 'container',
                 className,
                 content: this.renderInner(),
             })
-            : html `<div part="container" class="${className}">${this.renderInner()}</div>`}`;
+            : html `<div part="container" class=${className}>
+            ${this.renderInner()}
+          </div>`} `;
     }
     renderInner() {
-        return html `<div part="indicator" class="indicator"><slot name="badge" part="badge" class="badge"></slot><slot name="active-icon" part="active-icon" class="active-icon">${this.activeIcon
-            ? html `<mdui-icon name="${this.activeIcon}"></mdui-icon>`
-            : nothingTemplate}</slot><slot name="icon" part="icon" class="icon">${this.icon
-            ? html `<mdui-icon name="${this.icon}"></mdui-icon>`
-            : nothingTemplate}</slot></div><slot part="label" class="label"></slot>`;
+        return html `<div part="indicator" class="indicator">
+        <slot name="badge" part="badge" class="badge"></slot>
+        <slot name="active-icon" part="active-icon" class="active-icon">
+          ${this.activeIcon
+            ? html `<mdui-icon name=${this.activeIcon}></mdui-icon>`
+            : nothingTemplate}
+        </slot>
+        <slot name="icon" part="icon" class="icon">
+          ${this.icon
+            ? html `<mdui-icon name=${this.icon}></mdui-icon>`
+            : nothingTemplate}
+        </slot>
+      </div>
+      <slot part="label" class="label"></slot>`;
     }
 };
 NavigationBarItem.styles = [

package/components/navigation-bar/navigation-bar-style.js

@@ -1,2 +1,29 @@
 import { css } from 'lit';
-export const navigationBarStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;right:0;bottom:0;left:0;display:flex;flex:0 0 auto;overflow:hidden;border-radius:var(--shape-corner) var(--shape-corner) 0 0;z-index:var(--z-index);transition-property:transform;transition-duration:var(--mdui-motion-duration-long2);transition-timing-function:var(--mdui-motion-easing-emphasized);height:5rem;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level2)}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([hide]){transform:translateY(5.625rem);transition-duration:var(--mdui-motion-duration-short4)}`;
+export const navigationBarStyle = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-none);
+    --z-index: 2000;
+    position: fixed;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    flex: 0 0 auto;
+    overflow: hidden;
+    border-radius: var(--shape-corner) var(--shape-corner) 0 0;
+    z-index: var(--z-index);
+    transition-property: transform;
+    transition-duration: var(--mdui-motion-duration-long2);
+    transition-timing-function: var(--mdui-motion-easing-emphasized);
+    height: 5rem;
+    background-color: rgb(var(--mdui-color-surface));
+    box-shadow: var(--mdui-elevation-level2);
+  }
+  :host([scroll-target]:not([scroll-target=''])) {
+    position: absolute;
+  }
+  :host([hide]) {
+    transform: translateY(5.625rem);
+    transition-duration: var(--mdui-motion-duration-short4);
+  }
+`;

package/components/navigation-bar/navigation-bar.d.ts

@@ -5,7 +5,7 @@ import type { ScrollPaddingPosition } from '@mdui/shared/mixins/scrollBehavior.j
 import type { CSSResultGroup, TemplateResult } from 'lit';
 declare const NavigationBar_base: import("@open-wc/dedupe-mixin").Constructor<import("@mdui/shared/mixins/scrollBehavior.js").ScrollBehaviorMixinInterface> & typeof LayoutItemBase;
 /**
- * @summary 底部导航栏组件。需与 `<mdui-navigation-bar-item>` 组件配合使用
+ * @summary 底部导航栏组件。需配合 `<mdui-navigation-bar-item>` 组件使用
  *
  * ```html
  * <mdui-navigation-bar>
@@ -23,8 +23,8 @@ declare const NavigationBar_base: import("@open-wc/dedupe-mixin").Constructor<im
  *
  * @slot - `<mdui-navigation-bar-item>` 组件
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class NavigationBar extends NavigationBar_base<NavigationBarEventMap> {
     static styles: CSSResultGroup;
@@ -33,20 +33,21 @@ export declare class NavigationBar extends NavigationBar_base<NavigationBarEvent
      */
     hide: boolean;
     /**
-     * 文本的可视状态。可选值为：
+     * 文本的可视状态。可选值包括：
      *
-     * * `auto`：小于等于3个选项时，始终显示；大于3个选项时，仅显示选中状态的文本
-     * * `selected`：仅选中状态显示文本
+     * * `auto`：当选项小于等于3个时，始终显示文本；当选项大于3个时，仅显示选中状态的文本
+     * * `selected`：仅在选中状态显示文本
      * * `labeled`：始终显示文本
      * * `unlabeled`：始终不显示文本
      */
-    labelVisibility: /*小于等于3个选项时，始终显示；大于3个选项时，仅显示选中状态的文本*/ 'auto' | /*仅选中状态显示文本*/ 'selected' | /*始终显示文本*/ 'labeled' | /*始终不显示文本*/ 'unlabeled';
+    labelVisibility: /*当选项小于等于3个时，始终显示文本；当选项大于3个时，仅显示选中状态的文本*/ 'auto' | /*仅在选中状态显示文本*/ 'selected' | /*始终显示文本*/ 'labeled' | /*始终不显示文本*/ 'unlabeled';
     /**
      * 当前选中的 `<mdui-navigation-bar-item>` 的值
      */
     value?: string;
     /**
-     * 滚动行为。可选值为：
+     * 滚动行为。可选值包括：
+     *
      * * `hide`：滚动时隐藏
      */
     scrollBehavior?: 'hide';

package/components/navigation-bar/navigation-bar.js

@@ -9,7 +9,7 @@ import { ScrollBehaviorMixin } from '@mdui/shared/mixins/scrollBehavior.js';
 import { LayoutItemBase } from '../layout/layout-item-base.js';
 import { navigationBarStyle } from './navigation-bar-style.js';
 /**
- * @summary 底部导航栏组件。需与 `<mdui-navigation-bar-item>` 组件配合使用
+ * @summary 底部导航栏组件。需配合 `<mdui-navigation-bar-item>` 组件使用
  *
  * ```html
  * <mdui-navigation-bar>
@@ -27,8 +27,8 @@ import { navigationBarStyle } from './navigation-bar-style.js';
  *
  * @slot - `<mdui-navigation-bar-item>` 组件
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBase) {
     constructor() {
@@ -38,10 +38,10 @@ let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBa
          */
         this.hide = false;
         /**
-         * 文本的可视状态。可选值为：
+         * 文本的可视状态。可选值包括：
          *
-         * * `auto`：小于等于3个选项时，始终显示；大于3个选项时，仅显示选中状态的文本
-         * * `selected`：仅选中状态显示文本
+         * * `auto`：当选项小于等于3个时，始终显示文本；当选项大于3个时，仅显示选中状态的文本
+         * * `selected`：仅在选中状态显示文本
          * * `labeled`：始终显示文本
          * * `unlabeled`：始终不显示文本
          */
@@ -89,7 +89,10 @@ let NavigationBar = class NavigationBar extends ScrollBehaviorMixin(LayoutItemBa
         });
     }
     render() {
-        return html `<slot @slotchange="${this.onSlotChange}" @click="${this.onClick}"></slot>`;
+        return html `<slot
+      @slotchange=${this.onSlotChange}
+      @click=${this.onClick}
+    ></slot>`;
     }
     /**
      * 滚动行为

package/components/navigation-drawer/index.d.ts

@@ -12,52 +12,51 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
  * <mdui-navigation-drawer>content</mdui-navigation-drawer>
  * ```
  *
- * @event open - 在抽屉导航打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航打开
- * @event opened - 在抽屉导航打开之后触发
- * @event close - 在抽屉导航关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航关闭
- * @event closed - 在抽屉导航关闭之后触发
+ * @event open - 抽屉栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏打开
+ * @event opened - 抽屉栏打开动画完成之后触发
+ * @event close - 抽屉栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏关闭
+ * @event closed - 抽屉栏关闭动画完成之后触发
  * @event overlay-click - 点击遮罩层时触发
  *
- * @slot - 抽屉导航中的内容
+ * @slot - 抽屉栏中的内容
  *
  * @csspart overlay - 遮罩层
- * @csspart panel - 抽屉导航容器
+ * @csspart panel - 抽屉栏容器
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class NavigationDrawer extends LayoutItemBase<NavigationDrawerEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 是否打开抽屉导航
+     * 是否打开抽屉栏
      */
     open: boolean;
     /**
-     * 打开时，是否显示遮罩层
+     * 抽屉栏打开时，是否显示遮罩层
      *
-     * 较窄的设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint) 时），会无视该参数，始终显示遮罩层
+     * 在窄屏设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint)），会始终显示遮罩层，无视该参数
      */
     modal: boolean;
     /**
-     * 在含遮罩层时，是否在按下 ESC 键时，关闭抽屉导航
+     * 在有遮罩层的情况下，按下 ESC 键是否关闭抽屉栏
      */
     closeOnEsc: boolean;
     /**
-     * 是否在点击遮罩时，关闭抽屉导航
+     * 点击遮罩层时，是否关闭抽屉栏
      */
     closeOnOverlayClick: boolean;
     /**
-     * 抽屉导航的显示位置。可选值为：
+     * 抽屉栏的位置。可选值包括：
      *
-     * * `left`：显示在左侧
-     * * `right`：显示在右侧
+     * * `left`：左侧
+     * * `right`：右侧
      */
-    placement: /*显示在左侧*/ 'left' | /*显示在右侧*/ 'right';
+    placement: /*左侧*/ 'left' | /*右侧*/ 'right';
     /**
-     * 默认抽屉导航相对于 `body` 元素显示，该参数设置为 `true` 时，抽屉导航将相对于它的父元素显示
+     * 默认情况下，抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时，抽屉栏将相对于其父元素显示。
      *
-     * Note:
-     * 设置了该属性时，必须手动在父元素上设置样式 `position: relative; overflow: hidden;`
+     * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。
      */
     contained: boolean;
     private mobile;

package/components/navigation-drawer/index.js

@@ -28,53 +28,52 @@ import { style } from './style.js';
  * <mdui-navigation-drawer>content</mdui-navigation-drawer>
  * ```
  *
- * @event open - 在抽屉导航打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航打开
- * @event opened - 在抽屉导航打开之后触发
- * @event close - 在抽屉导航关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉导航关闭
- * @event closed - 在抽屉导航关闭之后触发
+ * @event open - 抽屉栏打开之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏打开
+ * @event opened - 抽屉栏打开动画完成之后触发
+ * @event close - 抽屉栏关闭之前触发。可以通过调用 `event.preventDefault()` 阻止抽屉栏关闭
+ * @event closed - 抽屉栏关闭动画完成之后触发
  * @event overlay-click - 点击遮罩层时触发
  *
- * @slot - 抽屉导航中的内容
+ * @slot - 抽屉栏中的内容
  *
  * @csspart overlay - 遮罩层
- * @csspart panel - 抽屉导航容器
+ * @csspart panel - 抽屉栏容器
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐[引用设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --z-index - 组件的 CSS 的 `z-index` 值
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
     constructor() {
         super(...arguments);
         /**
-         * 是否打开抽屉导航
+         * 是否打开抽屉栏
          */
         this.open = false;
         /**
-         * 打开时，是否显示遮罩层
+         * 抽屉栏打开时，是否显示遮罩层
          *
-         * 较窄的设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint) 时），会无视该参数，始终显示遮罩层
+         * 在窄屏设备上（屏幕宽度小于 [`--mdui-breakpoint-md`](/docs/2/styles/design-tokens#breakpoint)），会始终显示遮罩层，无视该参数
          */
         this.modal = false;
         /**
-         * 在含遮罩层时，是否在按下 ESC 键时，关闭抽屉导航
+         * 在有遮罩层的情况下，按下 ESC 键是否关闭抽屉栏
          */
         this.closeOnEsc = false;
         /**
-         * 是否在点击遮罩时，关闭抽屉导航
+         * 点击遮罩层时，是否关闭抽屉栏
          */
         this.closeOnOverlayClick = false;
         /**
-         * 抽屉导航的显示位置。可选值为：
+         * 抽屉栏的位置。可选值包括：
          *
-         * * `left`：显示在左侧
-         * * `right`：显示在右侧
+         * * `left`：左侧
+         * * `right`：右侧
          */
         this.placement = 'left';
         /**
-         * 默认抽屉导航相对于 `body` 元素显示，该参数设置为 `true` 时，抽屉导航将相对于它的父元素显示
+         * 默认情况下，抽屉栏相对于 `body` 元素显示。当该参数设置为 `true` 时，抽屉栏将相对于其父元素显示。
          *
-         * Note:
-         * 设置了该属性时，必须手动在父元素上设置样式 `position: relative; overflow: hidden;`
+         * **Note**：设置该属性时，必须在父元素上手动设置样式 `position: relative; overflow: hidden;`。
          */
         this.contained = false;
         // 断点为 mobile 时为 `true` 时，强制使用遮罩层
@@ -91,7 +90,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
     get lockTarget() {
         return this.contained || this.isParentLayout
             ? this.parentElement
-            : document.body;
+            : document.documentElement;
     }
     get isModal() {
         return this.mobile || this.modal;
@@ -100,7 +99,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
     async onContainedChange() {
         await this.definedController.whenDefined();
         this.observeResize?.unobserve();
-        this.observeResize = observeResize(this.contained ? this.parentElement : document.body, () => {
+        this.observeResize = observeResize(this.contained ? this.parentElement : document.documentElement, () => {
             const target = this.contained ? this.parentElement : undefined;
             this.mobile = breakpoint(target).down('md');
             // 若位于 layout 中，且为模态化，则重新布局时，占据的宽度为 0
@@ -142,14 +141,22 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
         };
         // 停止原有动画
         const stopOldAnimations = async () => {
-            await Promise.all([
-                this.isModal
-                    ? stopAnimations(overlay)
-                    : !this.isParentLayout
-                        ? stopAnimations(this.lockTarget)
-                        : Promise.resolve(),
-                this.isModal ? stopAnimations(panel) : stopAnimations(this),
-            ]);
+            const elements = [];
+            if (this.isModal) {
+                elements.push(overlay, panel);
+            }
+            else if (!this.isParentLayout) {
+                elements.push(this.lockTarget);
+            }
+            if (this.isParentLayout) {
+                const layoutItems = this.layoutManager.getItemsAndMain();
+                const layoutIndex = layoutItems.indexOf(this);
+                elements.push(...layoutItems.slice(layoutIndex));
+            }
+            if (!this.isModal && !elements.includes(this)) {
+                elements.push(this);
+            }
+            await Promise.all(elements.map((element) => stopAnimations(element)));
         };
         // 打开
         // 要区分是否首次渲染，首次渲染时不触发事件，不执行动画；非首次渲染，触发事件，执行动画
@@ -203,6 +210,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
             // 但首次渲染不执行动画
             if (this.isParentLayout && hasUpdated) {
                 setLayoutTransition(duration, easingEmphasized);
+                this.layoutManager.updateLayout(this);
             }
             // drawer 显示动画
             animations.push(animateTo(this.isModal ? panel : this, [
@@ -213,6 +221,9 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
                 easing: easingEmphasized,
             }));
             await Promise.all(animations);
+            if (!this.open) {
+                return;
+            }
             // 若位于 layout 中，则 drawer 动画完成后，移除 layout-main 的动画
             if (this.isParentLayout && hasUpdated) {
                 setLayoutTransition(null);
@@ -258,6 +269,9 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
                 { transform: `translateX(${isRight ? '' : '-'}100%)` },
             ], { duration, easing: easingEmphasized }));
             await Promise.all(animations);
+            if (this.open) {
+                return;
+            }
             // 若位于 layout 中，则 drawer 动画结束后，移除 layout-main 的动画
             if (this.isParentLayout) {
                 setLayoutTransition(null);
@@ -266,7 +280,7 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
             if (this.isModal && !this.contained) {
                 unlockScreen(this, this.lockTarget);
             }
-            // 抽屉导航关闭后，恢复焦点到原有的元素上
+            // 抽屉栏关闭后，恢复焦点到原有的元素上
             const trigger = this.originalTrigger;
             if (isFunction(trigger?.focus)) {
                 setTimeout(() => trigger.focus());
@@ -296,7 +310,18 @@ let NavigationDrawer = class NavigationDrawer extends LayoutItemBase {
         });
     }
     render() {
-        return html `${when(this.isModal, () => html `<div ${ref(this.overlayRef)} part="overlay" class="overlay" @click="${this.onOverlayClick}"></div>`)}<slot ${ref(this.panelRef)} part="panel" class="panel" tabindex="0"></slot>`;
+        return html `${when(this.isModal, () => html `<div
+            ${ref(this.overlayRef)}
+            part="overlay"
+            class="overlay"
+            @click=${this.onOverlayClick}
+          ></div>`)}
+      <slot
+        ${ref(this.panelRef)}
+        part="panel"
+        class="panel"
+        tabindex="0"
+      ></slot>`;
     }
     onOverlayClick() {
         this.emit('overlay-click');

package/components/navigation-drawer/style.js

@@ -1,2 +1,67 @@
 import { css } from 'lit';
-export const style = css `:host{--shape-corner:var(--mdui-shape-corner-large);--z-index:2200;display:none;position:fixed;top:0;bottom:0;left:0;z-index:1;width:22.5rem}:host([placement=right]){left:initial;right:0}:host([mobile]),:host([modal]){top:0!important;right:0;bottom:0!important;width:initial;z-index:var(--z-index)}:host([placement=right][mobile]),:host([placement=right][modal]){left:0}:host([contained]){position:absolute}.overlay{position:absolute;inset:0;z-index:inherit;background-color:rgba(var(--mdui-color-scrim),.4)}.panel{display:block;position:absolute;top:0;bottom:0;left:0;width:100%;overflow:auto;z-index:inherit;background-color:rgb(var(--mdui-color-surface));box-shadow:var(--mdui-elevation-level0)}:host([mobile]) .panel,:host([modal]) .panel{border-radius:0 var(--shape-corner) var(--shape-corner) 0;max-width:80%;width:22.5rem;background-color:rgb(var(--mdui-color-surface-container-low));box-shadow:var(--mdui-elevation-level1)}:host([placement=right]) .panel{left:initial;right:0}:host([placement=right][mobile]) .panel,:host([placement=right][modal]) .panel{border-radius:var(--shape-corner) 0 0 var(--shape-corner)}`;
+export const style = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-large);
+    --z-index: 2200;
+    display: none;
+    position: fixed;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    z-index: 1;
+    width: 22.5rem;
+  }
+  :host([placement='right']) {
+    left: initial;
+    right: 0;
+  }
+  :host([modal]),
+  :host([mobile]) {
+    top: 0 !important;
+    right: 0;
+    bottom: 0 !important;
+    width: initial;
+    z-index: var(--z-index);
+  }
+  :host([placement='right'][modal]),
+  :host([placement='right'][mobile]) {
+    left: 0;
+  }
+  :host([contained]) {
+    position: absolute;
+  }
+  .overlay {
+    position: absolute;
+    inset: 0;
+    z-index: inherit;
+    background-color: rgba(var(--mdui-color-scrim), 0.4);
+  }
+  .panel {
+    display: block;
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    overflow: auto;
+    z-index: inherit;
+    background-color: rgb(var(--mdui-color-surface));
+    box-shadow: var(--mdui-elevation-level0);
+  }
+  :host([modal]) .panel,
+  :host([mobile]) .panel {
+    border-radius: 0 var(--shape-corner) var(--shape-corner) 0;
+    max-width: 80%;
+    width: 22.5rem;
+    background-color: rgb(var(--mdui-color-surface-container-low));
+    box-shadow: var(--mdui-elevation-level1);
+  }
+  :host([placement='right']) .panel {
+    left: initial;
+    right: 0;
+  }
+  :host([placement='right'][modal]) .panel,
+  :host([placement='right'][mobile]) .panel {
+    border-radius: var(--shape-corner) 0 0 var(--shape-corner);
+  }
+`;

package/components/navigation-rail/navigation-rail-item-style.js

@@ -1,2 +1,123 @@
 import { css } from 'lit';
-export const navigationRailItemStyle = css `:host{--shape-corner-indicator:var(--mdui-shape-corner-full);position:relative;z-index:0;width:100%;--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface-variant)}.container{display:flex;flex-direction:column;align-items:center;justify-content:center;text-decoration:none;cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent;height:3.5rem}.container:not(.initial){transition:padding var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}mdui-ripple{z-index:1;width:3.5rem;height:2rem;border-radius:var(--mdui-shape-corner-full)}.container:not(.has-label)+mdui-ripple{height:3.5rem}.indicator{position:relative;display:flex;align-items:center;justify-content:center;background-color:transparent;border-radius:var(--shape-corner-indicator);height:2rem;width:2rem}:not(.initial) .indicator{transition:background-color var(--mdui-motion-duration-short1) var(--mdui-motion-easing-standard),width var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-short4) var(--mdui-motion-easing-standard)}::slotted([slot=badge]){position:absolute;transform:translate(50%,-50%)}.placement-right::slotted([slot=badge]){transform:translate(-50%,-50%)}::slotted([slot=badge][variant=small]){transform:translate(.5625rem,-.5625rem)}.placement-right::slotted([slot=badge][variant=small]){transform:translate(-.5625rem,-.5625rem)}.active-icon,.icon{color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}.active-icon mdui-icon,.icon mdui-icon,::slotted([slot=active-icon]),::slotted([slot=icon]){font-size:inherit}.icon{display:flex}.active-icon{display:none}.label{display:flex;align-items:center;height:1rem;color:rgb(var(--mdui-color-on-surface-variant));margin-top:.25rem;margin-bottom:.25rem;font-size:var(--mdui-typescale-label-medium-size);font-weight:var(--mdui-typescale-label-medium-weight);letter-spacing:var(--mdui-typescale-label-medium-tracking);line-height:var(--mdui-typescale-label-medium-line-height)}:not(.initial) .label{transition:opacity var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear)}:host([active]){--mdui-comp-ripple-state-layer-color:var(--mdui-color-on-surface)}:host([active]) .indicator{width:3.5rem;background-color:rgb(var(--mdui-color-secondary-container))}:host([active]) :not(.has-label) .indicator{height:3.5rem}:host([active]) .active-icon,:host([active]) .icon{color:rgb(var(--mdui-color-on-secondary-container))}:host([active]) .has-active-icon .active-icon{display:flex}:host([active]) .has-active-icon .icon{display:none}:host([active]) .label{color:rgb(var(--mdui-color-on-surface))}`;
+export const navigationRailItemStyle = css `
+  :host {
+    --shape-corner-indicator: var(--mdui-shape-corner-full);
+    position: relative;
+    z-index: 0;
+    width: 100%;
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface-variant);
+  }
+  .container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    text-decoration: none;
+    cursor: pointer;
+    -webkit-user-select: none;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+    height: 3.5rem;
+  }
+  .container:not(.initial) {
+    transition: padding var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-standard);
+  }
+  mdui-ripple {
+    z-index: 1;
+    width: 3.5rem;
+    height: 2rem;
+    border-radius: var(--mdui-shape-corner-full);
+  }
+  .container:not(.has-label) + mdui-ripple {
+    height: 3.5rem;
+  }
+  .indicator {
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    background-color: transparent;
+    border-radius: var(--shape-corner-indicator);
+    height: 2rem;
+    width: 2rem;
+  }
+  :not(.initial) .indicator {
+    transition:
+      background-color var(--mdui-motion-duration-short1)
+        var(--mdui-motion-easing-standard),
+      width var(--mdui-motion-duration-short4)
+        var(--mdui-motion-easing-standard),
+      height var(--mdui-motion-duration-short4)
+        var(--mdui-motion-easing-standard);
+  }
+  ::slotted([slot='badge']) {
+    position: absolute;
+    transform: translate(50%, -50%);
+  }
+  .placement-right::slotted([slot='badge']) {
+    transform: translate(-50%, -50%);
+  }
+  ::slotted([slot='badge'][variant='small']) {
+    transform: translate(0.5625rem, -0.5625rem);
+  }
+  .placement-right::slotted([slot='badge'][variant='small']) {
+    transform: translate(-0.5625rem, -0.5625rem);
+  }
+  .icon,
+  .active-icon {
+    color: rgb(var(--mdui-color-on-surface-variant));
+    font-size: 1.5rem;
+  }
+  .icon mdui-icon,
+  .active-icon mdui-icon,
+  ::slotted([slot='icon']),
+  ::slotted([slot='active-icon']) {
+    font-size: inherit;
+  }
+  .icon {
+    display: flex;
+  }
+  .active-icon {
+    display: none;
+  }
+  .label {
+    display: flex;
+    align-items: center;
+    height: 1rem;
+    color: rgb(var(--mdui-color-on-surface-variant));
+    margin-top: 0.25rem;
+    margin-bottom: 0.25rem;
+    font-size: var(--mdui-typescale-label-medium-size);
+    font-weight: var(--mdui-typescale-label-medium-weight);
+    letter-spacing: var(--mdui-typescale-label-medium-tracking);
+    line-height: var(--mdui-typescale-label-medium-line-height);
+  }
+  :not(.initial) .label {
+    transition: opacity var(--mdui-motion-duration-short4)
+      var(--mdui-motion-easing-linear);
+  }
+  :host([active]) {
+    --mdui-comp-ripple-state-layer-color: var(--mdui-color-on-surface);
+  }
+  :host([active]) .indicator {
+    width: 3.5rem;
+    background-color: rgb(var(--mdui-color-secondary-container));
+  }
+  :host([active]) :not(.has-label) .indicator {
+    height: 3.5rem;
+  }
+  :host([active]) .icon,
+  :host([active]) .active-icon {
+    color: rgb(var(--mdui-color-on-secondary-container));
+  }
+  :host([active]) .has-active-icon .active-icon {
+    display: flex;
+  }
+  :host([active]) .has-active-icon .icon {
+    display: none;
+  }
+  :host([active]) .label {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+`;