mdui 2.0.3 → 2.0.5

package/components/top-app-bar/top-app-bar-style.js

@@ -1,2 +1,79 @@
 import { css } from 'lit';
-export const topAppBarStyle = css `:host{--shape-corner:var(--mdui-shape-corner-none);--z-index:2000;position:fixed;top:0;right:0;left:0;display:flex;flex:0 0 auto;align-items:flex-start;justify-content:flex-start;border-bottom-left-radius:var(--shape-corner);border-bottom-right-radius:var(--shape-corner);z-index:var(--z-index);transition:top var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),height var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),box-shadow var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear),background-color var(--mdui-motion-duration-short4) var(--mdui-motion-easing-linear);padding:.75rem .5rem;height:4rem;background-color:rgb(var(--mdui-color-surface))}:host([scroll-target]:not([scroll-target=''])){position:absolute}:host([scroll-behavior~=shrink]){transition-duration:var(--mdui-motion-duration-short4)}:host([scrolling]){background-color:rgb(var(--mdui-color-surface-container));box-shadow:var(--mdui-elevation-level2)}::slotted(mdui-button-icon){color:rgb(var(--mdui-color-on-surface-variant));font-size:1.5rem}::slotted(mdui-button-icon:first-child){color:rgb(var(--mdui-color-on-surface))}::slotted(mdui-avatar){width:1.875rem;height:1.875rem;margin-top:.3125rem;margin-bottom:.3125rem}::slotted(*){flex-shrink:0}::slotted(:not(:last-child)){margin-right:.5rem}:host([variant=medium]){height:7rem}:host([variant=large]){height:9.5rem}:host([hide]){transition-duration:var(--mdui-motion-duration-short4);top:-4.625rem}:host([hide][variant=medium]){top:-7.625rem}:host([hide][variant=large]){top:-10.125rem}:host([shrink][variant=large]),:host([shrink][variant=medium]){transition-duration:var(--mdui-motion-duration-short4);height:4rem}`;
+export const topAppBarStyle = css `
+  :host {
+    --shape-corner: var(--mdui-shape-corner-none);
+    --z-index: 2000;
+    position: fixed;
+    top: 0;
+    right: 0;
+    left: 0;
+    display: flex;
+    flex: 0 0 auto;
+    align-items: flex-start;
+    justify-content: flex-start;
+    border-bottom-left-radius: var(--shape-corner);
+    border-bottom-right-radius: var(--shape-corner);
+    z-index: var(--z-index);
+    transition:
+      top var(--mdui-motion-duration-long2) var(--mdui-motion-easing-standard),
+      height var(--mdui-motion-duration-long2)
+        var(--mdui-motion-easing-standard),
+      box-shadow var(--mdui-motion-duration-short4)
+        var(--mdui-motion-easing-linear),
+      background-color var(--mdui-motion-duration-short4)
+        var(--mdui-motion-easing-linear);
+    padding: 0.75rem 0.5rem;
+    height: 4rem;
+    background-color: rgb(var(--mdui-color-surface));
+  }
+  :host([scroll-target]:not([scroll-target=''])) {
+    position: absolute;
+  }
+  :host([scroll-behavior~='shrink']) {
+    transition-duration: var(--mdui-motion-duration-short4);
+  }
+  :host([scrolling]) {
+    background-color: rgb(var(--mdui-color-surface-container));
+    box-shadow: var(--mdui-elevation-level2);
+  }
+  ::slotted(mdui-button-icon) {
+    color: rgb(var(--mdui-color-on-surface-variant));
+    font-size: 1.5rem;
+  }
+  ::slotted(mdui-button-icon:first-child) {
+    color: rgb(var(--mdui-color-on-surface));
+  }
+  ::slotted(mdui-avatar) {
+    width: 1.875rem;
+    height: 1.875rem;
+    margin-top: 0.3125rem;
+    margin-bottom: 0.3125rem;
+  }
+  ::slotted(*) {
+    flex-shrink: 0;
+  }
+  ::slotted(:not(:last-child)) {
+    margin-right: 0.5rem;
+  }
+  :host([variant='medium']) {
+    height: 7rem;
+  }
+  :host([variant='large']) {
+    height: 9.5rem;
+  }
+  :host([hide]) {
+    transition-duration: var(--mdui-motion-duration-short4);
+    top: -4.625rem;
+  }
+  :host([hide][variant='medium']) {
+    top: -7.625rem;
+  }
+  :host([hide][variant='large']) {
+    top: -10.125rem;
+  }
+  :host([shrink][variant='medium']),
+  :host([shrink][variant='large']) {
+    transition-duration: var(--mdui-motion-duration-short4);
+    height: 4rem;
+  }
+`;

package/components/top-app-bar/top-app-bar-title-style.js

@@ -1,2 +1,82 @@
 import { css } from 'lit';
-export const topAppBarTitleStyle = css `:host{display:block;width:100%;flex-shrink:initial!important;overflow:hidden;color:rgb(var(--mdui-color-on-surface));font-size:var(--mdui-typescale-title-large-size);font-weight:var(--mdui-typescale-title-large-weight);letter-spacing:var(--mdui-typescale-title-large-tracking);line-height:var(--mdui-typescale-title-large-line-height);line-height:2.5rem}.label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;opacity:1;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear)}.label.variant-center-aligned{text-align:center}.label.variant-large:not(.shrink),.label.variant-medium:not(.shrink){opacity:0}.label.variant-large.shrink,.label.variant-medium.shrink{transition-delay:var(--mdui-motion-duration-short2)}.label-large{display:none;position:absolute;width:100%;left:0;margin-right:0;padding:0 1rem;transition:opacity var(--mdui-motion-duration-short2) var(--mdui-motion-easing-linear)}.label-large.variant-large,.label-large.variant-medium{display:block}.label-large.variant-medium{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;bottom:.75rem;font-size:var(--mdui-typescale-headline-small-size);font-weight:var(--mdui-typescale-headline-small-weight);letter-spacing:var(--mdui-typescale-headline-small-tracking);line-height:var(--mdui-typescale-headline-small-line-height)}.label-large.variant-large{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2;bottom:1.25rem;font-size:var(--mdui-typescale-headline-medium-size);font-weight:var(--mdui-typescale-headline-medium-weight);letter-spacing:var(--mdui-typescale-headline-medium-tracking);line-height:var(--mdui-typescale-headline-medium-line-height)}.label-large.variant-large:not(.shrink),.label-large.variant-medium:not(.shrink){opacity:1;transition-delay:var(--mdui-motion-duration-short2)}.label-large.variant-large.shrink,.label-large.variant-medium.shrink{opacity:0;z-index:-1}`;
+export const topAppBarTitleStyle = css `
+  :host {
+    display: block;
+    width: 100%;
+    flex-shrink: initial !important;
+    overflow: hidden;
+    color: rgb(var(--mdui-color-on-surface));
+    font-size: var(--mdui-typescale-title-large-size);
+    font-weight: var(--mdui-typescale-title-large-weight);
+    letter-spacing: var(--mdui-typescale-title-large-tracking);
+    line-height: var(--mdui-typescale-title-large-line-height);
+    line-height: 2.5rem;
+  }
+  .label {
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    opacity: 1;
+    transition: opacity var(--mdui-motion-duration-short2)
+      var(--mdui-motion-easing-linear);
+  }
+  .label.variant-center-aligned {
+    text-align: center;
+  }
+  .label.variant-medium:not(.shrink),
+  .label.variant-large:not(.shrink) {
+    opacity: 0;
+  }
+  .label.variant-medium.shrink,
+  .label.variant-large.shrink {
+    transition-delay: var(--mdui-motion-duration-short2);
+  }
+  .label-large {
+    display: none;
+    position: absolute;
+    width: 100%;
+    left: 0;
+    margin-right: 0;
+    padding: 0rem 1rem;
+    transition: opacity var(--mdui-motion-duration-short2)
+      var(--mdui-motion-easing-linear);
+  }
+  .label-large.variant-medium,
+  .label-large.variant-large {
+    display: block;
+  }
+  .label-large.variant-medium {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    bottom: 0.75rem;
+    font-size: var(--mdui-typescale-headline-small-size);
+    font-weight: var(--mdui-typescale-headline-small-weight);
+    letter-spacing: var(--mdui-typescale-headline-small-tracking);
+    line-height: var(--mdui-typescale-headline-small-line-height);
+  }
+  .label-large.variant-large {
+    display: -webkit-box;
+    /* stylelint-disable-line value-no-vendor-prefix */
+    overflow: hidden;
+    white-space: normal;
+    -webkit-box-orient: vertical;
+    -webkit-line-clamp: 2;
+    bottom: 1.25rem;
+    font-size: var(--mdui-typescale-headline-medium-size);
+    font-weight: var(--mdui-typescale-headline-medium-weight);
+    letter-spacing: var(--mdui-typescale-headline-medium-tracking);
+    line-height: var(--mdui-typescale-headline-medium-line-height);
+  }
+  .label-large.variant-medium:not(.shrink),
+  .label-large.variant-large:not(.shrink) {
+    opacity: 1;
+    transition-delay: var(--mdui-motion-duration-short2);
+  }
+  .label-large.variant-medium.shrink,
+  .label-large.variant-large.shrink {
+    opacity: 0;
+    z-index: -1;
+  }
+`;

package/components/top-app-bar/top-app-bar-title.d.ts

@@ -1,7 +1,7 @@
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import type { CSSResultGroup, TemplateResult } from 'lit';
 /**
- * @summary 顶部应用栏标题组件。需与 `<mdui-top-app-bar>` 组件配合使用
+ * @summary 顶部应用栏标题组件。需配合 `<mdui-top-app-bar>` 组件使用
  *
  * ```html
  * <mdui-top-app-bar>
@@ -13,10 +13,10 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * ```
  *
  * @slot - 顶部应用栏的标题文本
- * @slot label-large - 展开状态的标题文本
+ * @slot label-large - 展开状态下的标题文本
  *
- * @csspart label 文本内容
- * @csspart label-large 展开状态的文本内容
+ * @csspart label 标题文本
+ * @csspart label-large 展开状态下的标题文本
  */
 export declare class TopAppBarTitle extends MduiElement<TopAppBarTitleEventMap> {
     static styles: CSSResultGroup;

package/components/top-app-bar/top-app-bar-title.js

@@ -9,7 +9,7 @@ import { getInnerHtmlFromSlot } from '@mdui/shared/helpers/slot.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { topAppBarTitleStyle } from './top-app-bar-title-style.js';
 /**
- * @summary 顶部应用栏标题组件。需与 `<mdui-top-app-bar>` 组件配合使用
+ * @summary 顶部应用栏标题组件。需配合 `<mdui-top-app-bar>` 组件使用
  *
  * ```html
  * <mdui-top-app-bar>
@@ -21,10 +21,10 @@ import { topAppBarTitleStyle } from './top-app-bar-title-style.js';
  * ```
  *
  * @slot - 顶部应用栏的标题文本
- * @slot label-large - 展开状态的标题文本
+ * @slot label-large - 展开状态下的标题文本
  *
- * @csspart label 文本内容
- * @csspart label-large 展开状态的文本内容
+ * @csspart label 标题文本
+ * @csspart label-large 展开状态下的标题文本
  */
 let TopAppBarTitle = class TopAppBarTitle extends MduiElement {
     constructor() {
@@ -50,9 +50,23 @@ let TopAppBarTitle = class TopAppBarTitle extends MduiElement {
             'variant-medium': this.variant === 'medium',
             'variant-large': this.variant === 'large',
         });
-        return html `<slot part="label" class="label ${className}" ${ref(this.defaultSlotRef)} @slotchange="${() => this.onSlotChange(hasLabelLargeSlot)}"></slot>${hasLabelLargeSlot
-            ? html `<slot name="label-large" part="label-large" class="label-large ${className}"></slot>`
-            : html `<div ${ref(this.labelLargeRef)} part="label-large" class="label-large ${className}"></div>`}`;
+        return html `<slot
+        part="label"
+        class="label ${className}"
+        ${ref(this.defaultSlotRef)}
+        @slotchange="${() => this.onSlotChange(hasLabelLargeSlot)}"
+      ></slot>
+      ${hasLabelLargeSlot
+            ? html `<slot
+            name="label-large"
+            part="label-large"
+            class="label-large ${className}"
+          ></slot>`
+            : html `<div
+            ${ref(this.labelLargeRef)}
+            part="label-large"
+            class="label-large ${className}"
+          ></div>`}`;
     }
     /**
      * default slot 变化时，同步到 label-large 中

package/components/top-app-bar/top-app-bar.d.ts

@@ -22,13 +22,13 @@ declare const TopAppBar_base: import("@open-wc/dedupe-mixin").Constructor<import
  *
  * @slot - 顶部应用栏内部的元素
  *
- * @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 TopAppBar extends TopAppBar_base<TopAppBarEventMap> {
     static styles: CSSResultGroup;
     /**
-     * 顶部应用栏形状。默认为 `small`。可选值为：
+     * 顶部应用栏的形状。默认为 `small`。可选值包括：
      *
      * * `center-aligned`：小型应用栏，标题居中
      * * `small`：小型应用栏
@@ -41,11 +41,11 @@ export declare class TopAppBar extends TopAppBar_base<TopAppBarEventMap> {
      */
     hide: boolean;
     /**
-     * 是否缩小成 `variant="small"` 的样式，仅在 `variant="medium"` 或 `variant="large"` 时生效
+     * 是否缩小为 `variant="small"` 的样式，仅在 `variant="medium"` 或 `variant="large"` 时生效
      */
     shrink: boolean;
     /**
-     * 滚动行为。可同时使用多个值，多个值之间用空格分割。可选值为：
+     * 滚动行为。可同时使用多个值，用空格分隔。可选值包括：
      *
      * * `hide`：滚动时隐藏
      * * `shrink`：在中型、大型应用栏中可使用，滚动时缩小成小型应用栏的样式

package/components/top-app-bar/top-app-bar.js

@@ -26,14 +26,14 @@ import { topAppBarStyle } from './top-app-bar-style.js';
  *
  * @slot - 顶部应用栏内部的元素
  *
- * @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 TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
     constructor() {
         super(...arguments);
         /**
-         * 顶部应用栏形状。默认为 `small`。可选值为：
+         * 顶部应用栏的形状。默认为 `small`。可选值包括：
          *
          * * `center-aligned`：小型应用栏，标题居中
          * * `small`：小型应用栏
@@ -46,7 +46,7 @@ let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {
          */
         this.hide = false;
         /**
-         * 是否缩小成 `variant="small"` 的样式，仅在 `variant="medium"` 或 `variant="large"` 时生效
+         * 是否缩小为 `variant="small"` 的样式，仅在 `variant="medium"` 或 `variant="large"` 时生效
          */
         this.shrink = false;
         /**