@greypan/web-ui 8.1.0 → 9.1.0

package/dist/components/empty/index.js

@@ -1,65 +1,70 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/index.js";
 import t from "../../icons/generated/lucide-inbox.js";
-import { normalizeLiteral as n } from "../../shared/normalize/index.js";
-import r from "./style.js";
-import { LitElement as i, html as a, unsafeCSS as o } from "lit";
-import { customElement as s, property as c, state as l } from "lit/decorators.js";
-import { classMap as u } from "lit/directives/class-map.js";
+import n from "./style.js";
+import { LitElement as r, html as i, unsafeCSS as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+import { classMap as l } from "lit/directives/class-map.js";
 //#region src/components/empty/index.ts
-var d = [
-	"small",
-	"medium",
-	"large"
-], f = class extends i {
+var u = 56, d = 7, f = 3, p = 30, m = 4, h = 3, g = 56, _ = 14, v = 13, y = 16, b = 14, x = (e) => Number.isFinite(e) && e > 0 ? e : u, S = class extends r {
 	constructor(...e) {
-		super(...e), this.title = "", this.description = "", this._size = "medium", this._hasTitleSlot = !1, this._hasDescriptionSlot = !1, this._hasActionSlot = !1, this._syncSlotContent = () => {
+		super(...e), this.title = "", this.description = "", this._size = u, this._hasTitleSlot = !1, this._hasDescriptionSlot = !1, this._hasActionSlot = !1, this._syncSlotContent = () => {
 			this._hasTitleSlot = this._hasAssignedContent(), this._hasDescriptionSlot = this._hasAssignedContent("description"), this._hasActionSlot = this._hasAssignedContent("action");
 		};
 	}
 	static {
-		this.styles = [o(r)];
+		this.styles = [a(n)];
 	}
-	get _iconSize() {
-		return this._size === "small" ? 16 : this._size === "large" ? 32 : 24;
+	get size() {
+		return this._size;
 	}
 	set size(e) {
-		let t = n(e, d, "medium");
-		if (this._size !== t) {
-			let e = this._size;
-			this._size = t, this.requestUpdate("size", e);
-		}
-		this.getAttribute("size") !== t && this.setAttribute("size", t);
+		let t = this._size, n = x(e);
+		n !== t && (this._size = n, this.requestUpdate("size", t));
 	}
-	get size() {
-		return this._size;
+	get _iconSize() {
+		return Math.round(this.size * f / d);
+	}
+	get _sizeStyle() {
+		let e = this.size, t = e < g, n = (t) => `${Math.round(e * t / d)}px`;
+		return {
+			"--wui-internal-empty-size": `${e}px`,
+			"--wui-internal-empty-min-height": n(p),
+			"--wui-internal-empty-padding-block": n(m),
+			"--wui-internal-empty-padding-inline": n(h),
+			"--wui-internal-empty-title-font-size": `${t ? _ : y}px`,
+			"--wui-internal-empty-description-font-size": `${t ? v : b}px`
+		};
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._syncSlotContent();
 	}
+	updated() {
+		for (let [e, t] of Object.entries(this._sizeStyle)) this.style.setProperty(e, t);
+	}
 	_hasAssignedContent(e) {
 		return [...this.childNodes].some((t) => t instanceof HTMLElement && (t.getAttribute("slot") ?? "") === (e ?? "") || !e && t.nodeType === Node.TEXT_NODE && !!t.textContent?.trim());
 	}
 	render() {
 		let e = this._hasTitleSlot || !!this.title, n = this._hasDescriptionSlot || !!this.description;
-		return a`
+		return i`
       <section class="empty">
         <div class="empty-icon" aria-hidden="true">
           <slot name="icon"><web-ui-icon .icon=${t} .size=${this._iconSize}></web-ui-icon></slot>
         </div>
-        <div class=${u({
+        <div class=${l({
 			"empty-title": !0,
 			"is-hidden": !e
 		})}>
           <slot @slotchange=${this._syncSlotContent}>${this.title}</slot>
         </div>
-        <div class=${u({
+        <div class=${l({
 			"empty-description": !0,
 			"is-hidden": !n
 		})}>
           <slot name="description" @slotchange=${this._syncSlotContent}>${this.description}</slot>
         </div>
-        <div class=${u({
+        <div class=${l({
 			"empty-action": !0,
 			"is-hidden": !this._hasActionSlot
 		})}>
@@ -69,17 +74,17 @@ var d = [
     `;
 	}
 };
-e([c({
+e([s({
 	type: String,
 	reflect: !0
-})], f.prototype, "title", void 0), e([c({
+})], S.prototype, "title", void 0), e([s({
 	type: String,
 	reflect: !0
-})], f.prototype, "description", void 0), e([c({
-	type: String,
+})], S.prototype, "description", void 0), e([s({
+	type: Number,
 	reflect: !0
-})], f.prototype, "size", null), e([l()], f.prototype, "_hasTitleSlot", void 0), e([l()], f.prototype, "_hasDescriptionSlot", void 0), e([l()], f.prototype, "_hasActionSlot", void 0), f = e([s("web-ui-empty")], f);
+})], S.prototype, "size", null), e([c()], S.prototype, "_hasTitleSlot", void 0), e([c()], S.prototype, "_hasDescriptionSlot", void 0), e([c()], S.prototype, "_hasActionSlot", void 0), S = e([o("web-ui-empty")], S);
 //#endregion
-export { f as WebUiEmpty };
+export { S as WebUiEmpty };
 
 //# sourceMappingURL=index.js.map

package/dist/components/empty/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/empty/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport '@/components/icon'\nimport { lucideInbox } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nexport type EmptySize = 'small' | 'medium' | 'large'\n\nconst ALLOWED_SIZES = ['small', 'medium', 'large'] as const\n\n@customElement('web-ui-empty')\nexport class WebUiEmpty extends LitElement {\n  static override styles = [unsafeCSS(style)]\n\n  @property({ type: String, reflect: true }) override title = ''\n\n  @property({ type: String, reflect: true }) description = ''\n\n  private get _iconSize(): number {\n    return this._size === 'small' ? 16 : this._size === 'large' ? 32 : 24\n  }\n\n  @property({ type: String, reflect: true })\n  set size(value: string) {\n    const normalized = normalizeLiteral(value, ALLOWED_SIZES, 'medium')\n    if (this._size !== normalized) {\n      const old = this._size\n      this._size = normalized\n      this.requestUpdate('size', old)\n    }\n    if (this.getAttribute('size') !== normalized) {\n      this.setAttribute('size', normalized)\n    }\n  }\n\n  get size(): EmptySize {\n    return this._size\n  }\n\n  private _size: EmptySize = 'medium'\n\n  @state() private _hasTitleSlot = false\n  @state() private _hasDescriptionSlot = false\n  @state() private _hasActionSlot = false\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._syncSlotContent()\n  }\n\n  private _syncSlotContent = () => {\n    this._hasTitleSlot = this._hasAssignedContent()\n    this._hasDescriptionSlot = this._hasAssignedContent('description')\n    this._hasActionSlot = this._hasAssignedContent('action')\n  }\n\n  private _hasAssignedContent(slotName?: string): boolean {\n    return [...this.childNodes].some(node => {\n      if (node instanceof HTMLElement && (node.getAttribute('slot') ?? '') === (slotName ?? '')) return true\n      return !slotName && node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())\n    })\n  }\n\n  override render() {\n    const showTitle = this._hasTitleSlot || Boolean(this.title)\n    const showDescription = this._hasDescriptionSlot || Boolean(this.description)\n\n    return html`\n      <section class=\"empty\">\n        <div class=\"empty-icon\" aria-hidden=\"true\">\n          <slot name=\"icon\"><web-ui-icon .icon=${lucideInbox} .size=${this._iconSize}></web-ui-icon></slot>\n        </div>\n        <div class=${classMap({ 'empty-title': true, 'is-hidden': !showTitle })}>\n          <slot @slotchange=${this._syncSlotContent}>${this.title}</slot>\n        </div>\n        <div class=${classMap({ 'empty-description': true, 'is-hidden': !showDescription })}>\n          <slot name=\"description\" @slotchange=${this._syncSlotContent}>${this.description}</slot>\n        </div>\n        <div class=${classMap({ 'empty-action': true, 'is-hidden': !this._hasActionSlot })}>\n          <slot name=\"action\" @slotchange=${this._syncSlotContent}></slot>\n        </div>\n      </section>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-empty': WebUiEmpty\n  }\n}\n"],"mappings":";;;;;;;;;AAYA,IAAM,IAAgB;CAAC;CAAS;CAAU;AAAO,GAGpC,IAAN,cAAyB,EAAW;;EAuCR,aApC2B,KAAA,QAAA,IAEH,KAAA,cAAA,IAuB9B,KAAA,QAAA,UAEM,KAAA,gBAAA,IACM,KAAA,sBAAA,IACL,KAAA,iBAAA,IAOD,KAAA,yBAAA;GAG/B,AAFA,KAAK,gBAAgB,KAAK,oBAAoB,GAC9C,KAAK,sBAAsB,KAAK,oBAAoB,aAAa,GACjE,KAAK,iBAAiB,KAAK,oBAAoB,QAAQ;EACzD;;;EA1CyB,KAAA,SAAA,CAAC,EAAU,CAAK,CAAC;;CAM1C,IAAY,YAAoB;EAC9B,OAAO,KAAK,UAAU,UAAU,KAAK,KAAK,UAAU,UAAU,KAAK;CACrE;CAEA,IACI,KAAK,GAAe;EACtB,IAAM,IAAa,EAAiB,GAAO,GAAe,QAAQ;EAClE,IAAI,KAAK,UAAU,GAAY;GAC7B,IAAM,IAAM,KAAK;GAEjB,AADA,KAAK,QAAQ,GACb,KAAK,cAAc,QAAQ,CAAG;EAChC;EACA,AAAI,KAAK,aAAa,MAAM,MAAM,KAChC,KAAK,aAAa,QAAQ,CAAU;CAExC;CAEA,IAAI,OAAkB;EACpB,OAAO,KAAK;CACd;CAQA,oBAA6B;EAE3B,AADA,MAAM,kBAAkB,GACxB,KAAK,iBAAiB;CACxB;CAQA,oBAA4B,GAA4B;EACtD,OAAO,CAAC,GAAG,KAAK,UAAU,CAAC,CAAC,MAAK,MAC3B,aAAgB,gBAAgB,EAAK,aAAa,MAAM,KAAK,SAAS,KAAY,OAC/E,CAAC,KAAY,EAAK,aAAa,KAAK,aAAa,EAAQ,EAAK,aAAa,KAAK,CACxF;CACH;CAEA,SAAkB;EAChB,IAAM,IAAY,KAAK,iBAAiB,EAAQ,KAAK,OAC/C,IAAkB,KAAK,uBAAuB,EAAQ,KAAK;EAEjE,OAAO,CAAI;;;iDAGkC,EAAY,SAAS,KAAK,UAAU;;qBAEhE,EAAS;GAAE,eAAe;GAAM,aAAa,CAAC;EAAU,CAAC,EAAE;8BAClD,KAAK,iBAAiB,GAAG,KAAK,MAAM;;qBAE7C,EAAS;GAAE,qBAAqB;GAAM,aAAa,CAAC;EAAgB,CAAC,EAAE;iDAC3C,KAAK,iBAAiB,GAAG,KAAK,YAAY;;qBAEtE,EAAS;GAAE,gBAAgB;GAAM,aAAa,CAAC,KAAK;EAAe,CAAC,EAAE;4CAC/C,KAAK,iBAAiB;;;;CAIhE;AACF;AAtEG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAExC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAMxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,IAAA,GAmBxC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,uBAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAjCR,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/empty/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport '@/components/icon'\nimport { lucideInbox } from '@/icons'\n\nimport style from './style.css?inline'\n\n/**\n * 图标容器边长默认值（px），也是非法输入的回退目标。\n */\nconst DEFAULT_SIZE = 56\n\n/**\n * 派生度量统一除以 7。取 7 是为了让默认档 56 整除出改前 medium 的四个值：字形 3/7 → 24、\n * min-height 30/7 → 240、padding 块 4/7 → 32、padding 行 3/7 → 24。40 与 72 因此落到\n * 171 / 23 / 17 与 309 / 41 / 31，字形 17 与 31。\n */\nconst DERIVED_DENOMINATOR = 7\nconst GLYPH_NUMERATOR = 3\nconst MIN_HEIGHT_NUMERATOR = 30\nconst PADDING_BLOCK_NUMERATOR = 4\nconst PADDING_INLINE_NUMERATOR = 3\n\n/**\n * 字号只有两档，阈值与默认边长同为 56：低于阈值取改前 small 的字号，其余取改前 medium 的\n * 字号。大尺寸靠留白撑开而不是靠字变大，所以 72 与 56 同档。\n */\nconst COMPACT_SIZE_THRESHOLD = 56\nconst COMPACT_TITLE_FONT_SIZE = 14\nconst COMPACT_DESCRIPTION_FONT_SIZE = 13\nconst DEFAULT_TITLE_FONT_SIZE = 16\nconst DEFAULT_DESCRIPTION_FONT_SIZE = 14\n\n/**\n * 只做数值合法性判断，不做枚举映射：有限正数原样采用，其余输入（NaN、±Infinity、0、负数）\n * 回退默认边长。\n *\n * 这一层是必要的：`size` 会同时写进 `--wui-internal-empty-size`，未守卫时\n * `size=\"abc\"` 会产出失效的 `NaNpx`（盒退回 unset 而涨成 300×300），\n * `size=\"\"` 会产出 `0px`（图标不可见）。回退的是边长本身，整套派生度量因此一起回到默认档\n * 56，而不是按 `NaN` 算出垃圾值。\n */\nconst normalizeSize = (value: number): number => (Number.isFinite(value) && value > 0 ? value : DEFAULT_SIZE)\n\n@customElement('web-ui-empty')\nexport class WebUiEmpty extends LitElement {\n  static override styles = [unsafeCSS(style)]\n\n  @property({ type: String, reflect: true }) override title = ''\n\n  @property({ type: String, reflect: true }) description = ''\n\n  /**\n   * 版面缩放基准，单位 px，默认 56。驱动图标盒、min-height、padding 与标题/描述字号，\n   * 使大图标不再配 medium 留白。\n   *\n   * 派生规则：图标容器边长即 `size`，默认字形边长 `round(size * 3 / 7)`，min-height\n   * `round(size * 30 / 7)`，padding 块 `round(size * 4 / 7)`、行 `round(size * 3 / 7)`；\n   * 字号在 56 处分两档，低于 56 为 14px / 13px，56 及以上为 16px / 14px。段间距与内容宽度\n   * 不随它变化。\n   *\n   * 派生值全部落在 `--wui-internal-empty-*` 上，`--wui-empty-*` 仍压在其上，所以逐项覆盖\n   * 优先于本属性。非法输入（非有限数、0、负数）回退默认边长 56。\n   */\n  @property({ type: Number, reflect: true })\n  get size(): number {\n    return this._size\n  }\n\n  set size(value: number) {\n    const old = this._size\n    const normalized = normalizeSize(value)\n    if (normalized === old) return\n    this._size = normalized\n    this.requestUpdate('size', old)\n  }\n\n  private _size = DEFAULT_SIZE\n\n  private get _iconSize(): number {\n    return Math.round((this.size * GLYPH_NUMERATOR) / DERIVED_DENOMINATOR)\n  }\n\n  /**\n   * `size` 派生的整套度量。CSS 侧按 `var(--wui-empty-*, var(--wui-internal-empty-*, 默认值))`\n   * 消费，公开 token 因此始终压在派生值之上。\n   */\n  private get _sizeStyle(): Record<string, string> {\n    const size = this.size\n    const compact = size < COMPACT_SIZE_THRESHOLD\n    const scaled = (numerator: number) => `${Math.round((size * numerator) / DERIVED_DENOMINATOR)}px`\n    return {\n      '--wui-internal-empty-size': `${size}px`,\n      '--wui-internal-empty-min-height': scaled(MIN_HEIGHT_NUMERATOR),\n      '--wui-internal-empty-padding-block': scaled(PADDING_BLOCK_NUMERATOR),\n      '--wui-internal-empty-padding-inline': scaled(PADDING_INLINE_NUMERATOR),\n      '--wui-internal-empty-title-font-size': `${compact ? COMPACT_TITLE_FONT_SIZE : DEFAULT_TITLE_FONT_SIZE}px`,\n      '--wui-internal-empty-description-font-size': `${\n        compact ? COMPACT_DESCRIPTION_FONT_SIZE : DEFAULT_DESCRIPTION_FONT_SIZE\n      }px`\n    }\n  }\n\n  @state() private _hasTitleSlot = false\n  @state() private _hasDescriptionSlot = false\n  @state() private _hasActionSlot = false\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._syncSlotContent()\n  }\n\n  protected override updated() {\n    // 无条件写：条件写同样覆盖得到默认实例（实测首次 changedProperties 里带 size）。\n    // 这里换来的不变量是「派生 token 永远与当前 size 一致」——将来新增派生 token 不必\n    // 再补一处 changed 判断，而同值 setProperty 不触发样式失效，代价可忽略。\n    for (const [token, value] of Object.entries(this._sizeStyle)) {\n      this.style.setProperty(token, value)\n    }\n  }\n\n  private _syncSlotContent = () => {\n    this._hasTitleSlot = this._hasAssignedContent()\n    this._hasDescriptionSlot = this._hasAssignedContent('description')\n    this._hasActionSlot = this._hasAssignedContent('action')\n  }\n\n  private _hasAssignedContent(slotName?: string): boolean {\n    return [...this.childNodes].some(node => {\n      if (node instanceof HTMLElement && (node.getAttribute('slot') ?? '') === (slotName ?? '')) return true\n      return !slotName && node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())\n    })\n  }\n\n  override render() {\n    const showTitle = this._hasTitleSlot || Boolean(this.title)\n    const showDescription = this._hasDescriptionSlot || Boolean(this.description)\n\n    return html`\n      <section class=\"empty\">\n        <div class=\"empty-icon\" aria-hidden=\"true\">\n          <slot name=\"icon\"><web-ui-icon .icon=${lucideInbox} .size=${this._iconSize}></web-ui-icon></slot>\n        </div>\n        <div class=${classMap({ 'empty-title': true, 'is-hidden': !showTitle })}>\n          <slot @slotchange=${this._syncSlotContent}>${this.title}</slot>\n        </div>\n        <div class=${classMap({ 'empty-description': true, 'is-hidden': !showDescription })}>\n          <slot name=\"description\" @slotchange=${this._syncSlotContent}>${this.description}</slot>\n        </div>\n        <div class=${classMap({ 'empty-action': true, 'is-hidden': !this._hasActionSlot })}>\n          <slot name=\"action\" @slotchange=${this._syncSlotContent}></slot>\n        </div>\n      </section>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-empty': WebUiEmpty\n  }\n}\n"],"mappings":"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"}

package/dist/components/empty/style.js

@@ -1,5 +1,5 @@
 //#region src/components/empty/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.empty{width:100%;min-block-size:var(--wui-empty-min-height,240px);padding:var(--wui-empty-padding,32px 24px);text-align:center;flex-direction:column;align-items:center;display:flex}.empty-icon{width:var(--wui-empty-icon-size,56px);height:var(--wui-empty-icon-size,56px);border-radius:var(--wui-internal-empty-icon-radius,16px);color:var(--wui-color-text-secondary,#6a6a6a);background-color:var(--wui-color-surface-track,#e5e5ea);box-shadow:none;flex:none;justify-content:center;align-items:center;display:flex}.empty-title,.empty-description,.empty-action{max-inline-size:var(--wui-empty-content-width,480px)}.empty-title{margin-top:var(--wui-empty-title-margin-top,16px);font-size:var(--wui-empty-title-font-size,16px);color:var(--wui-color-text,#1b1b1b);overflow-wrap:anywhere;font-weight:600;line-height:1.5}.empty-description{font-size:var(--wui-empty-description-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);overflow-wrap:anywhere;margin-top:6px;line-height:1.6}.empty-action{margin-top:var(--wui-empty-action-margin-top,20px)}.is-hidden{display:none}:host([size=small]){--wui-empty-min-height:160px;--wui-empty-padding:20px 16px;--wui-empty-icon-size:40px;--wui-empty-title-margin-top:12px;--wui-empty-title-font-size:14px;--wui-empty-description-font-size:13px;--wui-empty-action-margin-top:16px}:host([size=large]){--wui-empty-min-height:320px;--wui-empty-padding:48px 32px;--wui-empty-icon-size:72px;--wui-empty-title-margin-top:20px;--wui-empty-title-font-size:18px;--wui-empty-action-margin-top:24px}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:block}.empty{width:100%;min-block-size:var(--wui-empty-min-height,var(--wui-internal-empty-min-height,240px));padding:var(--wui-empty-padding,var(--wui-internal-empty-padding-block,32px) var(--wui-internal-empty-padding-inline,24px));text-align:center;flex-direction:column;align-items:center;display:flex}.empty-icon{width:var(--wui-empty-icon-size,var(--wui-internal-empty-size,56px));height:var(--wui-empty-icon-size,var(--wui-internal-empty-size,56px));border-radius:var(--wui-internal-empty-icon-radius,18px);color:var(--wui-color-text-secondary,#6a6a6a);background-color:var(--wui-color-surface-track,#e5e5ea);box-shadow:none;flex:none;justify-content:center;align-items:center;display:flex}.empty-title,.empty-description,.empty-action{max-inline-size:var(--wui-empty-content-width,480px)}.empty-title{margin-top:var(--wui-empty-title-margin-top,var(--wui-space-4,16px));font-size:var(--wui-empty-title-font-size,var(--wui-internal-empty-title-font-size,16px));font-weight:var(--wui-font-weight-semibold,600);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);overflow-wrap:anywhere}.empty-description{font-size:var(--wui-empty-description-font-size,var(--wui-internal-empty-description-font-size,14px));line-height:var(--wui-line-height-relaxed,1.6);color:var(--wui-color-text-secondary,#6a6a6a);overflow-wrap:anywhere;margin-top:6px}.empty-action{margin-top:var(--wui-empty-action-margin-top,var(--wui-space-5,20px))}.is-hidden{display:none}";
 //#endregion
 export { e as default };
 

package/dist/components/empty/style.js.map

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/empty/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  width: 100%;\n  min-block-size: var(--wui-empty-min-height, 240px);\n  padding: var(--wui-empty-padding, 32px 24px);\n\n  text-align: center;\n}\n\n.empty-icon {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--wui-empty-icon-size, 56px);\n  height: var(--wui-empty-icon-size, 56px);\n  border-radius: var(--wui-internal-empty-icon-radius, 16px);\n\n  color: var(--wui-color-text-secondary, #6a6a6a);\n\n  background-color: var(--wui-color-surface-track, #e5e5ea);\n  box-shadow: none;\n}\n\n.empty-title,\n.empty-description,\n.empty-action {\n  max-inline-size: var(--wui-empty-content-width, 480px);\n}\n\n.empty-title {\n  margin-top: var(--wui-empty-title-margin-top, 16px);\n\n  font-size: var(--wui-empty-title-font-size, 16px);\n  font-weight: 600;\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n  overflow-wrap: anywhere;\n}\n\n.empty-description {\n  margin-top: 6px;\n\n  font-size: var(--wui-empty-description-font-size, 14px);\n  line-height: 1.6;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  overflow-wrap: anywhere;\n}\n\n.empty-action {\n  margin-top: var(--wui-empty-action-margin-top, 20px);\n}\n\n.is-hidden {\n  display: none;\n}\n\n:host([size='small']) {\n  --wui-empty-min-height: 160px;\n  --wui-empty-padding: 20px 16px;\n  --wui-empty-icon-size: 40px;\n  --wui-empty-title-margin-top: 12px;\n  --wui-empty-title-font-size: 14px;\n  --wui-empty-description-font-size: 13px;\n  --wui-empty-action-margin-top: 16px;\n}\n\n:host([size='large']) {\n  --wui-empty-min-height: 320px;\n  --wui-empty-padding: 48px 32px;\n  --wui-empty-icon-size: 72px;\n  --wui-empty-title-margin-top: 20px;\n  --wui-empty-title-font-size: 18px;\n  --wui-empty-action-margin-top: 24px;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/empty/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.empty {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n\n  width: 100%;\n  min-block-size: var(--wui-empty-min-height, var(--wui-internal-empty-min-height, 240px));\n  padding: var(\n    --wui-empty-padding,\n    var(--wui-internal-empty-padding-block, 32px) var(--wui-internal-empty-padding-inline, 24px)\n  );\n\n  text-align: center;\n}\n\n.empty-icon {\n  display: flex;\n  flex: none;\n  align-items: center;\n  justify-content: center;\n\n  width: var(--wui-empty-icon-size, var(--wui-internal-empty-size, 56px));\n  height: var(--wui-empty-icon-size, var(--wui-internal-empty-size, 56px));\n  border-radius: var(--wui-internal-empty-icon-radius, 18px);\n\n  color: var(--wui-color-text-secondary, #6a6a6a);\n\n  background-color: var(--wui-color-surface-track, #e5e5ea);\n  box-shadow: none;\n}\n\n.empty-title,\n.empty-description,\n.empty-action {\n  max-inline-size: var(--wui-empty-content-width, 480px);\n}\n\n.empty-title {\n  margin-top: var(--wui-empty-title-margin-top, var(--wui-space-4, 16px));\n\n  font-size: var(--wui-empty-title-font-size, var(--wui-internal-empty-title-font-size, 16px));\n  font-weight: var(--wui-font-weight-semibold, 600);\n  line-height: var(--wui-line-height-normal, 1.5);\n  color: var(--wui-color-text, #1b1b1b);\n  overflow-wrap: anywhere;\n}\n\n.empty-description {\n  margin-top: 6px;\n\n  font-size: var(--wui-empty-description-font-size, var(--wui-internal-empty-description-font-size, 14px));\n  line-height: var(--wui-line-height-relaxed, 1.6);\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  overflow-wrap: anywhere;\n}\n\n.empty-action {\n  margin-top: var(--wui-empty-action-margin-top, var(--wui-space-5, 20px));\n}\n\n.is-hidden {\n  display: none;\n}\n"],"mappings":""}

package/dist/components/image-preview/index.js

@@ -12,28 +12,29 @@ import { defineOpenOverlay as c } from "../../shared/overlay/open-overlay.js";
 import { getFallbackOverlayRoot as l } from "../../shared/overlay/overlay-root.js";
 import { findNearestTheme as u, findRootTheme as d } from "../../shared/overlay/theme-overlay-scope.js";
 import { defineScrollLockLease as f } from "../../shared/scroll-lock/scroll-lock.js";
-import { defineNativeDialogPresence as p } from "../../shared/overlay/native-dialog-presence.js";
-import { attachDragGesture as m } from "../../shared/gesture/drag-gesture.js";
-import { clamp as h } from "../../shared/gesture/physics.js";
-import { attachPinchGesture as g } from "../../shared/gesture/pinch-gesture.js";
-import _ from "./style.js";
-import { LitElement as v, html as y, nothing as b, unsafeCSS as x } from "lit";
-import { customElement as S, property as C, state as w } from "lit/decorators.js";
-import { classMap as T } from "lit/directives/class-map.js";
-import { styleMap as E } from "lit/directives/style-map.js";
+import p from "../../assets/modal-surface.js";
+import { defineNativeDialogPresence as m } from "../../shared/overlay/native-dialog-presence.js";
+import { attachDragGesture as h } from "../../shared/gesture/drag-gesture.js";
+import { clamp as g } from "../../shared/gesture/physics.js";
+import { attachPinchGesture as _ } from "../../shared/gesture/pinch-gesture.js";
+import v from "./style.js";
+import { LitElement as y, html as b, nothing as x, unsafeCSS as S } from "lit";
+import { customElement as C, property as w, state as T } from "lit/decorators.js";
+import { classMap as E } from "lit/directives/class-map.js";
+import { styleMap as D } from "lit/directives/style-map.js";
 //#region src/components/image-preview/index.ts
-var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I = 320, L = class extends v {
+var O = 1, k = 4, A = .5, j = .002, M = 3, N = .15, P = 320, F = 16, I = 160, L = 320, R = class extends y {
 	constructor(...e) {
-		super(...e), this.images = [], this.loop = !0, this.nav = !1, this.toolbar = !1, this.closable = !1, this.indicator = !1, this.swipe = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._open = !1, this._index = 0, this._scale = D, this._offsetX = 0, this._offsetY = 0, this._swipeOffset = 0, this._swipeSettling = !1, this._dragging = !1, this._loadedSources = /* @__PURE__ */ new Set(), this._swipeDir = 0, this._swipeStartTime = 0, this._swipeSettleCommit = !1, this._swipeSettleDir = 1, this._scrollLock = f().make(), this._overlay = c().make({
+		super(...e), this.images = [], this.loop = !0, this.nav = !1, this.toolbar = !1, this.closable = !1, this.indicator = !1, this.swipe = !1, this.noScrollLock = !1, this.noBackdropClose = !1, this._open = !1, this._index = 0, this._scale = O, this._offsetX = 0, this._offsetY = 0, this._swipeOffset = 0, this._swipeSettling = !1, this._dragging = !1, this._loadedSources = /* @__PURE__ */ new Set(), this._swipeDir = 0, this._swipeStartTime = 0, this._swipeSettleCommit = !1, this._swipeSettleDir = 1, this._scrollLock = f().make(), this._overlay = c().make({
 			requestClose: () => this.close(),
 			isConnected: () => this.isConnected
-		}), this._handle = null, this._presence = p().make({
+		}), this._handle = null, this._presence = m().make({
 			getDialog: () => this.dialog,
 			isConnected: () => this.isConnected,
 			isOpen: () => this._open
-		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = D, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
+		}), this._dismissed = !1, this._swipeGesture = !1, this._panOriginX = 0, this._panOriginY = 0, this._dragged = !1, this._blankPointerDown = !1, this._pinchScale = O, this._pinchLocalX = 0, this._pinchLocalY = 0, this._handleImageSettled = (e) => {
 			let t = e.currentTarget;
-			t && (this._loadedSources.add(t.src), this.requestUpdate());
+			t && (this._markLoaded(t), this.requestUpdate());
 		}, this._handleCancel = (e) => {
 			e.preventDefault(), this.close();
 		}, this._handleNativeClose = () => {
@@ -62,7 +63,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			if (!this._open) return;
 			e.preventDefault();
 			let t = e.deltaMode === 1 ? e.deltaY * 16 : e.deltaY, n = this._stageOrigin();
-			this._zoomAt(this._scale * Math.exp(-t * A), e.clientX - n.x, e.clientY - n.y);
+			this._zoomAt(this._scale * Math.exp(-t * j), e.clientX - n.x, e.clientY - n.y);
 		}, this._handleClick = (e) => {
 			if (!this._open) return;
 			let t = this._blankPointerDown;
@@ -74,7 +75,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 				this.noBackdropClose || this.close();
 			}
 		}, this._handleDoubleClick = (e) => {
-			this._open && e.target === this._image && (this._scale > D ? this.resetZoom() : this._setScale(O / 2));
+			this._open && e.target === this._image && (this._scale > O ? this.resetZoom() : this._setScale(k / 2));
 		}, this._handlePinchStart = (e) => {
 			if (!this._open) return;
 			this._endGesture(), this._dragging = !0, this._dragged = !0;
@@ -82,7 +83,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			this._pinchScale = this._scale, this._pinchLocalX = (e.centerX - t.x - this._offsetX) / this._scale, this._pinchLocalY = (e.centerY - t.y - this._offsetY) / this._scale;
 		}, this._handlePinchMove = (e) => {
 			if (!this._open) return;
-			let t = h(this._pinchScale * e.ratio, D, O), n = this._stageOrigin();
+			let t = g(this._pinchScale * e.ratio, O, k), n = this._stageOrigin();
 			this._applyScale(t, e.centerX - n.x - this._pinchLocalX * t, e.centerY - n.y - this._pinchLocalY * t);
 		}, this._handlePinchEnd = () => {
 			this._dragging = !1;
@@ -94,9 +95,9 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			if (!this._open || (this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0, e.button !== 0 || e.isPrimary === !1)) return;
 			this._blankPointerDown = this._isBlank(e.target), this._dragged = !1;
 			let t = this._stage;
-			t && (e.target === t || t.contains(e.target)) && (this._swipeGesture = this._scale === D && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = m(e, {
+			t && (e.target === t || t.contains(e.target)) && (this._swipeGesture = this._scale === O && this.swipe && this.images.length > 1, this._swipeStartTime = e.timeStamp, this._panOriginX = this._offsetX, this._panOriginY = this._offsetY, this._gesture?.destroy(), this._gesture = h(e, {
 				axis: "both",
-				threshold: j,
+				threshold: M,
 				onMove: (e) => {
 					this._swipeGesture ? (this._swipeOffset = e.deltaX, e.deltaX !== 0 && (this._swipeDir = e.deltaX < 0 ? 1 : -1)) : this._panTo(e.deltaX, e.deltaY);
 				},
@@ -113,7 +114,11 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 		};
 	}
 	static {
-		this.styles = [x(t), x(_)];
+		this.styles = [
+			S(t),
+			S(p),
+			S(v)
+		];
 	}
 	get dialog() {
 		return this.shadowRoot?.querySelector("dialog") ?? null;
@@ -131,7 +136,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 		return this._scale;
 	}
 	configure(e) {
-		this.images = e.images, this.loop = e.loop, this.nav = e.nav, this.toolbar = e.toolbar, this.closable = e.closable, this.indicator = e.indicator, this.swipe = e.swipe, this.noScrollLock = e.noScrollLock, this.noBackdropClose = e.noBackdropClose, this._index = h(e.index, 0, Math.max(0, e.images.length - 1));
+		this.images = e.images, this.loop = e.loop, this.nav = e.nav, this.toolbar = e.toolbar, this.closable = e.closable, this.indicator = e.indicator, this.swipe = e.swipe, this.noScrollLock = e.noScrollLock, this.noBackdropClose = e.noBackdropClose, this._index = g(e.index, 0, Math.max(0, e.images.length - 1));
 	}
 	show() {
 		this._open ||= (this._dismissed = !1, !0);
@@ -142,7 +147,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 	goTo(e) {
 		let t = this.images.length;
 		if (t === 0) return;
-		let n = this.loop ? (e % t + t) % t : h(e, 0, t - 1);
+		let n = this.loop ? (e % t + t) % t : g(e, 0, t - 1);
 		n !== this._index && (this._index = n, this.resetZoom());
 	}
 	next() {
@@ -152,13 +157,13 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 		this.goTo(this._index - 1);
 	}
 	zoomIn() {
-		this._setScale(this._scale + k);
+		this._setScale(this._scale + A);
 	}
 	zoomOut() {
-		this._setScale(this._scale - k);
+		this._setScale(this._scale - A);
 	}
 	resetZoom() {
-		(this._scale !== D || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = D, this._offsetX = 0, this._offsetY = 0);
+		(this._scale !== O || this._offsetX !== 0 || this._offsetY !== 0) && (this._scale = O, this._offsetX = 0, this._offsetY = 0);
 	}
 	connectedCallback() {
 		super.connectedCallback(), this._presence.reconcile(), this._syncScrollLock(), this._attachPinch(), this._reclaimIfOpen();
@@ -174,7 +179,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 	_attachPinch() {
 		if (this._pinch) return;
 		let e = this._stage;
-		e && (this._pinch = g(e, {
+		e && (this._pinch = _(e, {
 			onStart: this._handlePinchStart,
 			onMove: this._handlePinchMove,
 			onEnd: this._handlePinchEnd,
@@ -184,7 +189,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 	updated(e) {
 		if (super.updated(e), this.isConnected) {
 			if (e.has("_open")) {
-				this._presence.sync(this._open);
+				this._presence.sync(this._open), this._open && window.getSelection()?.removeAllRanges();
 				let e = this.dialog;
 				e && (this._open ? (this._handle?.release(), this._handle = this._overlay.claim(e, { ancestryFrom: this })) : (this._handle?.release(), this._handle = null)), !this._open && !this.dialog?.open && queueMicrotask(() => this._notifyDismissed());
 			}
@@ -201,13 +206,13 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 		this._dismissed || this._open || (this._dismissed = !0, this.dispatchEvent(new CustomEvent("preview-dismissed")));
 	}
 	_zoomAt(e, t, n) {
-		let r = h(e, D, O);
+		let r = g(e, O, k);
 		if (r === this._scale) return;
 		let i = r / this._scale;
 		this._applyScale(r, t - (t - this._offsetX) * i, n - (n - this._offsetY) * i);
 	}
 	_applyScale(e, t, n) {
-		if (this._scale = e, e === D) {
+		if (this._scale = e, e === O) {
 			this._offsetX = 0, this._offsetY = 0;
 			return;
 		}
@@ -248,11 +253,15 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 	}
 	_clampOffsets() {
 		let e = this._offsetBounds();
-		this._offsetX = h(this._offsetX, -e.x, e.x), this._offsetY = h(this._offsetY, -e.y, e.y);
+		this._offsetX = g(this._offsetX, -e.x, e.x), this._offsetY = g(this._offsetY, -e.y, e.y);
 	}
 	_isBlank(e) {
 		return e === this.dialog || e === this._stage;
 	}
+	_markLoaded(e) {
+		let t = this.images[Number(e.dataset.index)]?.src;
+		t !== void 0 && this._loadedSources.add(t);
+	}
 	_endGesture() {
 		this._gesture?.destroy(), this._gesture = void 0, this._dragging = !1, this._cancelSwipeSettle(), this._swipeDir = 0, this._swipeOffset = 0;
 	}
@@ -282,16 +291,16 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			this._swipeOffset = 0;
 			return;
 		}
-		let a = Math.max(1, Math.round(i * M)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= N || Math.abs(e) >= P && Math.max(Math.abs(t), Math.abs(s)) >= F) && this._adjacentIndex(r) !== -1;
-		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), I);
+		let a = Math.max(1, Math.round(i * N)), o = n - this._swipeStartTime, s = o >= 2 ? e / o * 1e3 : 0, c = (Math.abs(e) >= a || Math.abs(t) >= P || Math.abs(e) >= F && Math.max(Math.abs(t), Math.abs(s)) >= I) && this._adjacentIndex(r) !== -1;
+		this._swipeSettling = !0, this._swipeSettleCommit = c, this._swipeSettleDir = r, this._swipeOffset = c ? -r * i : 0, this._swipeSettleTimer = setTimeout(() => this._finishSwipeSettle(), L);
 	}
 	_panTo(e, t) {
 		let n = this._offsetBounds();
-		this._offsetX = h(this._panOriginX + e, -n.x, n.x), this._offsetY = h(this._panOriginY + t, -n.y, n.y);
+		this._offsetX = g(this._panOriginX + e, -n.x, n.x), this._offsetY = g(this._panOriginY + t, -n.y, n.y);
 	}
 	render() {
-		let e = this.images.length, t = this._scale > D, c = e > 0 ? this._adjacentIndex(-1) : -1, l = e > 0 ? this._adjacentIndex(1) : -1, u = `translate3d(${this._swipeOffset}px, 0, 0)`, d = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`, f = t ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
-		return y`
+		let e = this.images.length, t = this._scale > O, c = e > 0 ? this._adjacentIndex(-1) : -1, l = e > 0 ? this._adjacentIndex(1) : -1, u = `translate3d(${this._swipeOffset}px, 0, 0)`, d = `translate3d(${this._offsetX}px, ${this._offsetY}px, 0) scale(${this._scale})`, f = t ? "translate3d(0, 0, 0) scale(1)" : `translate3d(0, ${this._offsetY}px, 0) scale(1)`;
+		return b`
       <dialog
         aria-label="图片预览"
         @cancel=${this._handleCancel}
@@ -307,7 +316,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
         <div class="wui-image-preview-content">
           <div class="wui-image-preview-surface">
             <div
-              class=${T({
+              class=${E({
 			"wui-image-preview-stage": !0,
 			"is-zoomed": t,
 			"is-dragging": this._dragging,
@@ -316,65 +325,68 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
             >
               <div
                 class="wui-image-preview-track"
-                style=${E({ transform: u })}
+                style=${D({ transform: u })}
                 @transitionend=${this._handleSwipeSettleEnd}
               >
-                ${c >= 0 ? y`
+                ${c >= 0 ? b`
                         <div class="wui-image-preview-slide is-prev" aria-hidden="true">
                           <img
-                            class=${T({
+                            class=${E({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[c].src)
 		})}
+                            data-index=${c}
                             src=${this.images[c].src}
                             alt=${this.images[c].alt ?? ""}
                             draggable="false"
-                            style=${E({ transform: f })}
+                            style=${D({ transform: f })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : b}
-                ${e > 0 ? y`
+                      ` : x}
+                ${e > 0 ? b`
                         <div class="wui-image-preview-slide is-current">
                           <img
-                            class=${T({
+                            class=${E({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[this._index].src)
 		})}
+                            data-index=${this._index}
                             src=${this.images[this._index].src}
                             alt=${this.images[this._index].alt ?? ""}
                             draggable="false"
-                            style=${E({ transform: d })}
+                            style=${D({ transform: d })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : b}
-                ${l >= 0 ? y`
+                      ` : x}
+                ${l >= 0 ? b`
                         <div class="wui-image-preview-slide is-next" aria-hidden="true">
                           <img
-                            class=${T({
+                            class=${E({
 			"wui-image-preview-image": !0,
 			"is-loaded": this._loadedSources.has(this.images[l].src)
 		})}
+                            data-index=${l}
                             src=${this.images[l].src}
                             alt=${this.images[l].alt ?? ""}
                             draggable="false"
-                            style=${E({ transform: f })}
+                            style=${D({ transform: f })}
                             @load=${this._handleImageSettled}
                             @error=${this._handleImageSettled}
                           />
                         </div>
-                      ` : b}
+                      ` : x}
               </div>
             </div>
           </div>
           <div class="wui-image-preview-controls">
-            ${this.indicator ? y`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
+            ${this.indicator ? b`<span class="wui-image-preview-counter wui-glass" aria-live="polite"
                     >${this._index + 1} / ${e}</span
-                  >` : b}
-            ${this.closable ? y`
+                  >` : x}
+            ${this.closable ? b`
                     <web-ui-button
                       class="wui-image-preview-close"
                       variant="glass"
@@ -385,8 +397,8 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                     >
                       <web-ui-icon size="16" .icon=${o}></web-ui-icon>
                     </web-ui-button>
-                  ` : b}
-            ${this.nav && e > 1 ? y`
+                  ` : x}
+            ${this.nav && e > 1 ? b`
                     <web-ui-button
                       class="wui-image-preview-nav wui-image-preview-nav-prev"
                       variant="glass"
@@ -409,15 +421,15 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                     >
                       <web-ui-icon size="20" .icon=${r}></web-ui-icon>
                     </web-ui-button>
-                  ` : b}
-            ${this.toolbar ? y`
+                  ` : x}
+            ${this.toolbar ? b`
                     <div class="wui-image-preview-toolbar wui-glass">
                       <web-ui-button
                         variant="glass"
                         icon
                         size="30"
                         aria-label="缩小"
-                        ?disabled=${this._scale <= D}
+                        ?disabled=${this._scale <= O}
                         @click=${this.zoomOut}
                       >
                         <web-ui-icon size="16" .icon=${a}></web-ui-icon>
@@ -428,7 +440,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                         icon
                         size="30"
                         aria-label="放大"
-                        ?disabled=${this._scale >= O}
+                        ?disabled=${this._scale >= k}
                         @click=${this.zoomIn}
                       >
                         <web-ui-icon size="16" .icon=${i}></web-ui-icon>
@@ -438,21 +450,21 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
                         icon
                         size="30"
                         aria-label="重置缩放"
-                        ?disabled=${this._scale <= D && !this._isPanned}
+                        ?disabled=${this._scale <= O && !this._isPanned}
                         @click=${this.resetZoom}
                       >
                         <web-ui-icon size="16" .icon=${s}></web-ui-icon>
                       </web-ui-button>
                     </div>
-                  ` : b}
+                  ` : x}
           </div>
         </div>
       </dialog>
     `;
 	}
 };
-e([C({ attribute: !1 })], L.prototype, "images", void 0), e([C({ attribute: !1 })], L.prototype, "loop", void 0), e([C({ attribute: !1 })], L.prototype, "nav", void 0), e([C({ attribute: !1 })], L.prototype, "toolbar", void 0), e([C({ attribute: !1 })], L.prototype, "closable", void 0), e([C({ attribute: !1 })], L.prototype, "indicator", void 0), e([C({ attribute: !1 })], L.prototype, "swipe", void 0), e([C({ attribute: !1 })], L.prototype, "noScrollLock", void 0), e([C({ attribute: !1 })], L.prototype, "noBackdropClose", void 0), e([w()], L.prototype, "_open", void 0), e([w()], L.prototype, "_index", void 0), e([w()], L.prototype, "_scale", void 0), e([w()], L.prototype, "_offsetX", void 0), e([w()], L.prototype, "_offsetY", void 0), e([w()], L.prototype, "_swipeOffset", void 0), e([w()], L.prototype, "_swipeSettling", void 0), e([w()], L.prototype, "_dragging", void 0), L = e([S("web-ui-image-preview")], L);
-function R(e) {
+e([w({ attribute: !1 })], R.prototype, "images", void 0), e([w({ attribute: !1 })], R.prototype, "loop", void 0), e([w({ attribute: !1 })], R.prototype, "nav", void 0), e([w({ attribute: !1 })], R.prototype, "toolbar", void 0), e([w({ attribute: !1 })], R.prototype, "closable", void 0), e([w({ attribute: !1 })], R.prototype, "indicator", void 0), e([w({ attribute: !1 })], R.prototype, "swipe", void 0), e([w({ attribute: !1 })], R.prototype, "noScrollLock", void 0), e([w({ attribute: !1 })], R.prototype, "noBackdropClose", void 0), e([T()], R.prototype, "_open", void 0), e([T()], R.prototype, "_index", void 0), e([T()], R.prototype, "_scale", void 0), e([T()], R.prototype, "_offsetX", void 0), e([T()], R.prototype, "_offsetY", void 0), e([T()], R.prototype, "_swipeOffset", void 0), e([T()], R.prototype, "_swipeSettling", void 0), e([T()], R.prototype, "_dragging", void 0), R = e([C("web-ui-image-preview")], R);
+function z(e) {
 	let t = (e.images ?? []).map((e) => ({
 		src: e.src,
 		alt: e.alt ?? ""
@@ -499,6 +511,6 @@ function R(e) {
 	};
 }
 //#endregion
-export { R as imagePreview };
+export { z as imagePreview };
 
 //# sourceMappingURL=index.js.map