mdui 2.1.4 → 2.1.5

package/components/radio/radio.js

@@ -3,11 +3,11 @@ import { html } from 'lit';
 import { customElement, property, state } from 'lit/decorators.js';
 import { classMap } from 'lit/directives/class-map.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import '@mdui/icons-shared/circle.js';
+import '@mdui/icons-shared/radio-button-unchecked.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
-import '@mdui/shared/icons/circle.js';
-import '@mdui/shared/icons/radio-button-unchecked.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
 import '../icon.js';

package/components/range-slider/index.d.ts

@@ -40,7 +40,7 @@ export declare class RangeSlider extends SliderBase<RangeSliderEventMap> impleme
     private readonly formController;
     private _value;
     /**
-     * 滑块的值，为数组格式，将于表单数据一起提交。
+     * 滑块的值，为数组格式，将与表单数据一起提交。
      *
      * **NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
      */

package/components/range-slider/index.js

@@ -55,7 +55,7 @@ let RangeSlider = class RangeSlider extends SliderBase {
         };
     }
     /**
-     * 滑块的值，为数组格式，将于表单数据一起提交。
+     * 滑块的值，为数组格式，将与表单数据一起提交。
      *
      * **NOTE**：该属性无法通过 HTML 属性设置初始值，如果要修改该值，只能通过修改 JavaScript 属性值实现。
      */

package/components/segmented-button/segmented-button-group.d.ts

@@ -19,7 +19,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  *
  * @slot - `<mdui-segmented-button>` 组件
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class SegmentedButtonGroup extends MduiElement<SegmentedButtonGroupEventMap> implements FormControl {
     static styles: CSSResultGroup;

package/components/segmented-button/segmented-button-group.js

@@ -34,7 +34,7 @@ import { segmentedButtonGroupStyle } from './segmented-button-group-style.js';
  *
  * @slot - `<mdui-segmented-button>` 组件
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 let SegmentedButtonGroup = class SegmentedButtonGroup extends MduiElement {
     constructor() {
@@ -342,7 +342,6 @@ __decorate([
 ], SegmentedButtonGroup.prototype, "fullWidth", void 0);
 __decorate([
     property({ reflect: true })
-    // eslint-disable-next-line prettier/prettier
 ], SegmentedButtonGroup.prototype, "selects", void 0);
 __decorate([
     property({

package/components/segmented-button/segmented-button.d.ts

@@ -1,4 +1,4 @@
-import '@mdui/shared/icons/check.js';
+import '@mdui/icons-shared/check.js';
 import { ButtonBase } from '../button/button-base.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';

package/components/segmented-button/segmented-button.js

@@ -2,12 +2,12 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import '@mdui/icons-shared/check.js';
 import cc from 'classcat';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
 import { uniqueId } from '@mdui/shared/helpers/uniqueId.js';
-import '@mdui/shared/icons/check.js';
 import { ButtonBase } from '../button/button-base.js';
 import '../icon.js';
 import { segmentedButtonStyle } from './segmented-button-style.js';

package/components/select/index.d.ts

@@ -37,7 +37,7 @@ declare const Select_base: import("@lit/reactive-element/decorators/base.js").Co
  * @csspart chip__button - chip 内部的 `<button>` 元素
  * @csspart chip__label - chip 内部的文本
  * @csspart chip__delete-icon - chip 内部的删除图标
- * @csspart text-field - 文本框，即 [`<mdui-text-field>`](/docs/2/components/text-field) 元素
+ * @csspart text-field - 文本框，即 [`<mdui-text-field>`](/zh-cn/docs/2/components/text-field) 元素
  * @csspart text-field__container - text-field 内部的文本框容器
  * @csspart text-field__icon - text-field 内部的左侧图标
  * @csspart text-field__end-icon - text-field 内部的右侧图标
@@ -51,7 +51,7 @@ declare const Select_base: import("@lit/reactive-element/decorators/base.js").Co
  * @csspart text-field__supporting - text-field 内部的底部辅助信息容器，包括 helper 和 error
  * @csspart text-field__helper - text-field 内部的底部帮助文本
  * @csspart text-field__error - text-field 内部的底部错误描述文本
- * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/docs/2/components/menu) 元素
+ * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/zh-cn/docs/2/components/menu) 元素
  */
 export declare class Select extends Select_base<SelectEventMap> implements FormControl {
     static styles: CSSResultGroup;

package/components/select/index.js

@@ -51,7 +51,7 @@ import { style } from './style.js';
  * @csspart chip__button - chip 内部的 `<button>` 元素
  * @csspart chip__label - chip 内部的文本
  * @csspart chip__delete-icon - chip 内部的删除图标
- * @csspart text-field - 文本框，即 [`<mdui-text-field>`](/docs/2/components/text-field) 元素
+ * @csspart text-field - 文本框，即 [`<mdui-text-field>`](/zh-cn/docs/2/components/text-field) 元素
  * @csspart text-field__container - text-field 内部的文本框容器
  * @csspart text-field__icon - text-field 内部的左侧图标
  * @csspart text-field__end-icon - text-field 内部的右侧图标
@@ -65,7 +65,7 @@ import { style } from './style.js';
  * @csspart text-field__supporting - text-field 内部的底部辅助信息容器，包括 helper 和 error
  * @csspart text-field__helper - text-field 内部的底部帮助文本
  * @csspart text-field__error - text-field 内部的底部错误描述文本
- * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/docs/2/components/menu) 元素
+ * @csspart menu - 下拉菜单，即 [`<mdui-menu>`](/zh-cn/docs/2/components/menu) 元素
  */
 let Select = class Select extends FocusableMixin(MduiElement) {
     constructor() {

package/components/slider/index.d.ts

@@ -24,7 +24,7 @@ import type { CSSResultGroup, PropertyValues, TemplateResult } from 'lit';
 export declare class Slider extends SliderBase<SliderEventMap> implements FormControl {
     static styles: CSSResultGroup;
     /**
-     * 滑块的值，将于表单数据一起提交
+     * 滑块的值，将与表单数据一起提交
      */
     value: number;
     /**

package/components/slider/index.js

@@ -35,7 +35,7 @@ let Slider = class Slider extends SliderBase {
     constructor() {
         super(...arguments);
         /**
-         * 滑块的值，将于表单数据一起提交
+         * 滑块的值，将与表单数据一起提交
          */
         this.value = 0;
         /**

package/components/snackbar/index.d.ts

@@ -1,5 +1,5 @@
+import '@mdui/icons-shared/clear.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
-import '@mdui/shared/icons/clear.js';
 import '../button-icon.js';
 import '../button.js';
 import '../icon.js';
@@ -27,7 +27,7 @@ import type { CSSResultGroup, TemplateResult } from 'lit';
  * @csspart close-button - 关闭按钮
  * @csspart close-icon - 关闭按钮中的图标
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class Snackbar extends MduiElement<SnackbarEventMap> {

package/components/snackbar/index.js

@@ -2,6 +2,7 @@ import { __decorate } from "tslib";
 import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { when } from 'lit/directives/when.js';
+import '@mdui/icons-shared/clear.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { animateTo, stopAnimations } from '@mdui/shared/helpers/animate.js';
@@ -10,7 +11,6 @@ import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { getDuration, getEasing } from '@mdui/shared/helpers/motion.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
-import '@mdui/shared/icons/clear.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import '../button-icon.js';
 import '../button.js';
@@ -43,7 +43,7 @@ let reordering = false;
  * @csspart close-button - 关闭按钮
  * @csspart close-icon - 关闭按钮中的图标
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let Snackbar = class Snackbar extends MduiElement {
@@ -312,7 +312,6 @@ __decorate([
 ], Snackbar.prototype, "closeIcon", void 0);
 __decorate([
     property({ type: Number, reflect: true, attribute: 'message-line' })
-    // eslint-disable-next-line prettier/prettier
 ], Snackbar.prototype, "messageLine", void 0);
 __decorate([
     property({ type: Number, reflect: true, attribute: 'auto-close-delay' })

package/components/switch/index.d.ts

@@ -1,5 +1,5 @@
+import '@mdui/icons-shared/check.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
-import '@mdui/shared/icons/check.js';
 import '../icon.js';
 import type { Ripple } from '../ripple/index.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';
@@ -26,8 +26,8 @@ declare const Switch_base: import("@lit/reactive-element/decorators/base.js").Co
  * @csspart unchecked-icon - 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
  *
- * @cssprop --shape-corner - 组件轨道的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-thumb - 组件图标容器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件轨道的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-thumb - 组件图标容器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 export declare class Switch extends Switch_base<SwitchEventMap> implements FormControl {
     static styles: CSSResultGroup;
@@ -68,7 +68,7 @@ export declare class Switch extends Switch_base<SwitchEventMap> implements FormC
      */
     name: string;
     /**
-     * 开关的值，将于表单数据一起提交
+     * 开关的值，将与表单数据一起提交
      */
     value: string;
     /**

package/components/switch/index.js

@@ -5,6 +5,7 @@ import { classMap } from 'lit/directives/class-map.js';
 import { ifDefined } from 'lit/directives/if-defined.js';
 import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
+import '@mdui/icons-shared/check.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
 import { FormController, formResets } from '@mdui/shared/controllers/form.js';
 import { HasSlotController } from '@mdui/shared/controllers/has-slot.js';
@@ -12,7 +13,6 @@ import { defaultValue } from '@mdui/shared/decorators/default-value.js';
 import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
-import '@mdui/shared/icons/check.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
 import '../icon.js';
@@ -39,8 +39,8 @@ import { style } from './style.js';
  * @csspart unchecked-icon - 未选中状态的图标
  * @csspart checked-icon 选中状态的图标
  *
- * @cssprop --shape-corner - 组件轨道的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-thumb - 组件图标容器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件轨道的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-thumb - 组件图标容器的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  */
 let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
     constructor() {
@@ -66,7 +66,7 @@ let Switch = class Switch extends RippleMixin(FocusableMixin(MduiElement)) {
          */
         this.name = '';
         /**
-         * 开关的值，将于表单数据一起提交
+         * 开关的值，将与表单数据一起提交
          */
         this.value = 'on';
         /**

package/components/text-field/index.d.ts

@@ -1,9 +1,9 @@
+import '@mdui/icons-shared/cancel--outlined.js';
+import '@mdui/icons-shared/error.js';
+import '@mdui/icons-shared/visibility-off.js';
+import '@mdui/icons-shared/visibility.js';
 import '@mdui/jq/methods/css.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
-import '@mdui/shared/icons/cancel--outlined.js';
-import '@mdui/shared/icons/error.js';
-import '@mdui/shared/icons/visibility-off.js';
-import '@mdui/shared/icons/visibility.js';
 import '../button-icon.js';
 import '../icon.js';
 import type { FormControl } from '@mdui/jq/shared/form.js';

package/components/text-field/index.js

@@ -7,6 +7,10 @@ import { live } from 'lit/directives/live.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
 import { msg } from '@lit/localize';
+import '@mdui/icons-shared/cancel--outlined.js';
+import '@mdui/icons-shared/error.js';
+import '@mdui/icons-shared/visibility-off.js';
+import '@mdui/icons-shared/visibility.js';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
 import { MduiElement } from '@mdui/shared/base/mdui-element.js';
@@ -17,10 +21,6 @@ import { watch } from '@mdui/shared/decorators/watch.js';
 import { booleanConverter } from '@mdui/shared/helpers/decorator.js';
 import { observeResize } from '@mdui/shared/helpers/observeResize.js';
 import { nothingTemplate } from '@mdui/shared/helpers/template.js';
-import '@mdui/shared/icons/cancel--outlined.js';
-import '@mdui/shared/icons/error.js';
-import '@mdui/shared/icons/visibility-off.js';
-import '@mdui/shared/icons/visibility.js';
 import { componentStyle } from '@mdui/shared/lit-styles/component-style.js';
 import { FocusableMixin } from '@mdui/shared/mixins/focusable.js';
 import { onLocaleReady, offLocaleReady } from '../../internal/localize.js';
@@ -521,7 +521,7 @@ let TextField = class TextField extends FocusableMixin(MduiElement) {
             ? 'text'
             : this.type}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue
             ? this.placeholder
-            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${this.autocomplete}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
+            : undefined)}" ?readonly="${this.readonly}" ?disabled="${this.disabled}" ?required="${this.required}" minlength="${ifDefined(this.minlength)}" maxlength="${ifDefined(this.maxlength)}" min="${ifDefined(this.min)}" max="${ifDefined(this.max)}" step="${ifDefined(this.step)}" autocapitalize="${ifDefined(this.type === 'password' ? 'off' : this.autocapitalize)}" autocomplete="${ifDefined(this.autocomplete)}" autocorrect="${ifDefined(this.type === 'password' ? 'off' : this.autocorrect)}" spellcheck="${ifDefined(this.spellcheck)}" pattern="${ifDefined(this.pattern)}" enterkeyhint="${ifDefined(this.enterkeyhint)}" inputmode="${ifDefined(this.inputmode)}" @change="${this.onChange}" @input="${this.onInput}" @invalid="${this.onInvalid}" @keydown="${this.onKeyDown}">`;
     }
     renderTextArea(hasInputSlot) {
         return html `<textarea ${ref(this.inputRef)} part="input" class="input ${classMap({ 'hide-input': hasInputSlot })}" name="${ifDefined(this.name)}" .value="${live(this.value)}" placeholder="${ifDefined(!this.label || this.isFocusedStyle || this.hasValue

package/components/tooltip/index.d.ts

@@ -29,8 +29,8 @@ import type { CSSResultGroup, TemplateResult, PropertyValues } from 'lit';
  * @csspart content - 正文
  * @csspart action - 操作按钮
  *
- * @cssprop --shape-corner-plain - 当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-rich - 当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-plain - 当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rich - 当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class Tooltip extends MduiElement<TooltipEventMap> {

package/components/tooltip/index.js

@@ -3,6 +3,7 @@ import { html } from 'lit';
 import { customElement, property } from 'lit/decorators.js';
 import { createRef, ref } from 'lit/directives/ref.js';
 import { when } from 'lit/directives/when.js';
+// eslint-disable-next-line import/extensions
 import { getOverflowAncestors } from '@floating-ui/utils/dom';
 import { $ } from '@mdui/jq/$.js';
 import '@mdui/jq/methods/css.js';
@@ -45,8 +46,8 @@ import { style } from './style.js';
  * @csspart content - 正文
  * @csspart action - 操作按钮
  *
- * @cssprop --shape-corner-plain - 当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
- * @cssprop --shape-corner-rich - 当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-plain - 当 variant="plain" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner-rich - 当 variant="rich" 时，组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let Tooltip = class Tooltip extends MduiElement {

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

@@ -1,2 +1,2 @@
 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]:not([hide=false i])){transition-duration:var(--mdui-motion-duration-short4);top:-4.625rem}:host([hide][variant=medium]:not([hide=false i])){top:-7.625rem}:host([hide][variant=large]:not([hide=false i])){top:-10.125rem}:host([shrink][variant=large]:not([shrink=false i])),:host([shrink][variant=medium]:not([shrink=false i])){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:transform 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]:not([hide=false i])){transition-duration:var(--mdui-motion-duration-short4);transform:translateY(-4.625rem)}:host([hide][variant=medium]:not([hide=false i])){transform:translateY(-7.625rem)}:host([hide][variant=large]:not([hide=false i])){transform:translateY(-10.125rem)}:host([shrink][variant=large]:not([shrink=false i])),:host([shrink][variant=medium]:not([shrink=false i])){transition-duration:var(--mdui-motion-duration-short4);height:4rem}`;

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

@@ -22,7 +22,7 @@ declare const TopAppBar_base: import("@lit/reactive-element/decorators/base.js")
  *
  * @slot - 顶部应用栏内部的元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 export declare class TopAppBar extends TopAppBar_base<TopAppBarEventMap> {

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

@@ -27,7 +27,7 @@ import { topAppBarStyle } from './top-app-bar-style.js';
  *
  * @slot - 顶部应用栏内部的元素
  *
- * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/docs/2/styles/design-tokens#shape-corner)
+ * @cssprop --shape-corner - 组件的圆角大小。可以指定一个具体的像素值；但更推荐引用[设计令牌](/zh-cn/docs/2/styles/design-tokens#shape-corner)
  * @cssprop --z-index - 组件的 CSS `z-index` 值
  */
 let TopAppBar = class TopAppBar extends ScrollBehaviorMixin(LayoutItemBase) {