@greypan/web-ui 8.0.0 → 9.0.0

package/dist/components/empty/index.d.ts

@@ -1,17 +1,34 @@
 import { LitElement } from 'lit';
-export type EmptySize = 'small' | 'medium' | 'large';
 export declare class WebUiEmpty extends LitElement {
     static styles: import('lit').CSSResult[];
     title: string;
     description: string;
-    private get _iconSize();
-    set size(value: string);
-    get size(): EmptySize;
+    /**
+     * 版面缩放基准，单位 px，默认 56。驱动图标盒、min-height、padding 与标题/描述字号，
+     * 使大图标不再配 medium 留白。
+     *
+     * 派生规则：图标容器边长即 `size`，默认字形边长 `round(size * 3 / 7)`，min-height
+     * `round(size * 30 / 7)`，padding 块 `round(size * 4 / 7)`、行 `round(size * 3 / 7)`；
+     * 字号在 56 处分两档，低于 56 为 14px / 13px，56 及以上为 16px / 14px。段间距与内容宽度
+     * 不随它变化。
+     *
+     * 派生值全部落在 `--wui-internal-empty-*` 上，`--wui-empty-*` 仍压在其上，所以逐项覆盖
+     * 优先于本属性。非法输入（非有限数、0、负数）回退默认边长 56。
+     */
+    get size(): number;
+    set size(value: number);
     private _size;
+    private get _iconSize();
+    /**
+     * `size` 派生的整套度量。CSS 侧按 `var(--wui-empty-*, var(--wui-internal-empty-*, 默认值))`
+     * 消费，公开 token 因此始终压在派生值之上。
+     */
+    private get _sizeStyle();
     private _hasTitleSlot;
     private _hasDescriptionSlot;
     private _hasActionSlot;
     connectedCallback(): void;
+    protected updated(): void;
     private _syncSlotContent;
     private _hasAssignedContent;
     render(): import('lit').TemplateResult<1>;

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/icon/index.js

@@ -5,7 +5,7 @@ import { customElement as o, property as s } from "lit/decorators.js";
 import { classMap as c } from "lit/directives/class-map.js";
 import { unsafeSVG as l } from "lit/directives/unsafe-svg.js";
 //#region src/components/icon/index.ts
-var u = class extends n {
+var u = 16, d = class extends n {
 	constructor(...e) {
 		super(...e), this.spin = !1, this.size = 18;
 	}
@@ -14,7 +14,7 @@ var u = class extends n {
 	}
 	render() {
 		if (!this.icon) return i;
-		let e = this.color ? `color: ${this.color}` : "", t = `${this.icon.left ?? 0} ${this.icon.top ?? 0} ${this.icon.width ?? 24} ${this.icon.height ?? 24}`;
+		let e = this.color ? `color: ${this.color}` : "", t = `${this.icon.left ?? 0} ${this.icon.top ?? 0} ${this.icon.width ?? u} ${this.icon.height ?? u}`;
 		return r`
       <svg
         class=${c({ spin: this.spin })}
@@ -29,17 +29,17 @@ var u = class extends n {
     `;
 	}
 };
-t([s({ attribute: !1 })], u.prototype, "icon", void 0), t([s({
+t([s({ attribute: !1 })], d.prototype, "icon", void 0), t([s({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "spin", void 0), t([s({
+})], d.prototype, "spin", void 0), t([s({
 	type: Number,
 	reflect: !0
-})], u.prototype, "size", void 0), t([s({
+})], d.prototype, "size", void 0), t([s({
 	type: String,
 	reflect: !0
-})], u.prototype, "color", void 0), u = t([o("web-ui-icon")], u);
+})], d.prototype, "color", void 0), d = t([o("web-ui-icon")], d);
 //#endregion
-export { u as WebUiIcon };
+export { d as WebUiIcon };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon/index.ts"],"sourcesContent":["import type { IconifyIcon } from '@iconify/types'\nimport { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-icon')\nexport class WebUiIcon extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ attribute: false }) icon?: IconifyIcon\n  @property({ type: Boolean, reflect: true }) spin = false\n  @property({ type: Number, reflect: true }) size: number = 18\n  @property({ type: String, reflect: true }) color?: string\n\n  override render() {\n    if (!this.icon) return nothing\n\n    const svgStyle = this.color ? `color: ${this.color}` : ''\n    const viewBox = `${this.icon.left ?? 0} ${this.icon.top ?? 0} ${this.icon.width ?? 24} ${this.icon.height ?? 24}`\n\n    return html`\n      <svg\n        class=${classMap({ spin: this.spin })}\n        style=${svgStyle}\n        viewBox=\"${viewBox}\"\n        width=\"${this.size}\"\n        height=\"${this.size}\"\n        aria-hidden=\"true\"\n      >\n        ${unsafeSVG(this.icon.body)}\n      </svg>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-icon': WebUiIcon\n  }\n}\n"],"mappings":";;;;;;;AASO,IAAM,IAAN,cAAwB,EAAW;;EAKkB,aADP,KAAA,OAAA,IACO,KAAA,OAAA;;;EAJjC,KAAA,SAAA,EAAU,CAAK;;CAOxC,SAAkB;EAChB,IAAI,CAAC,KAAK,MAAM,OAAO;EAEvB,IAAM,IAAW,KAAK,QAAQ,UAAU,KAAK,UAAU,IACjD,IAAU,GAAG,KAAK,KAAK,QAAQ,EAAE,GAAG,KAAK,KAAK,OAAO,EAAE,GAAG,KAAK,KAAK,SAAS,GAAG,GAAG,KAAK,KAAK,UAAU;EAE7G,OAAO,CAAI;;gBAEC,EAAS,EAAE,MAAM,KAAK,KAAK,CAAC,EAAE;gBAC9B,EAAS;mBACN,EAAQ;iBACV,KAAK,KAAK;kBACT,KAAK,KAAK;;;UAGlB,EAAU,KAAK,KAAK,IAAI,EAAE;;;CAGlC;AACF;AAxBG,EAAA,CAAA,EAAS,EAAE,WAAW,GAAM,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAC7B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAP1C,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/icon/index.ts"],"sourcesContent":["import type { IconifyIcon } from '@iconify/types'\nimport { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { unsafeSVG } from 'lit/directives/unsafe-svg.js'\n\nimport style from './style.css?inline'\n\n/*\n * Iconify 规范里 width/height 缺省即 16（见 @iconify/types README），这里必须跟规范一致：\n * 猜成别的值不会报错，只会把图形按错误比例缩放并偏到画布一角。生成资产已自带尺寸，\n * 这条兜底服务的是直接喂进来的原始 IconifyIcon 对象。\n */\nconst ICONIFY_DEFAULT_CANVAS = 16\n\n@customElement('web-ui-icon')\nexport class WebUiIcon extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ attribute: false }) icon?: IconifyIcon\n  @property({ type: Boolean, reflect: true }) spin = false\n  @property({ type: Number, reflect: true }) size: number = 18\n  @property({ type: String, reflect: true }) color?: string\n\n  override render() {\n    if (!this.icon) return nothing\n\n    const svgStyle = this.color ? `color: ${this.color}` : ''\n    const viewBox = `${this.icon.left ?? 0} ${this.icon.top ?? 0} ${this.icon.width ?? ICONIFY_DEFAULT_CANVAS} ${this.icon.height ?? ICONIFY_DEFAULT_CANVAS}`\n\n    return html`\n      <svg\n        class=${classMap({ spin: this.spin })}\n        style=${svgStyle}\n        viewBox=\"${viewBox}\"\n        width=\"${this.size}\"\n        height=\"${this.size}\"\n        aria-hidden=\"true\"\n      >\n        ${unsafeSVG(this.icon.body)}\n      </svg>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-icon': WebUiIcon\n  }\n}\n"],"mappings":";;;;;;;AAaA,IAAM,IAAyB,IAGlB,IAAN,cAAwB,EAAW;;EAKkB,aADP,KAAA,OAAA,IACO,KAAA,OAAA;;;EAJjC,KAAA,SAAA,EAAU,CAAK;;CAOxC,SAAkB;EAChB,IAAI,CAAC,KAAK,MAAM,OAAO;EAEvB,IAAM,IAAW,KAAK,QAAQ,UAAU,KAAK,UAAU,IACjD,IAAU,GAAG,KAAK,KAAK,QAAQ,EAAE,GAAG,KAAK,KAAK,OAAO,EAAE,GAAG,KAAK,KAAK,SAAS,EAAuB,GAAG,KAAK,KAAK,UAAU;EAEjI,OAAO,CAAI;;gBAEC,EAAS,EAAE,MAAM,KAAK,KAAK,CAAC,EAAE;gBAC9B,EAAS;mBACN,EAAQ;iBACV,KAAK,KAAK;kBACT,KAAK,KAAK;;;UAGlB,EAAU,KAAK,KAAK,IAAI,EAAE;;;CAGlC;AACF;AAxBG,EAAA,CAAA,EAAS,EAAE,WAAW,GAAM,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAC7B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GAP1C,IAAA,EAAA,CAAA,EAAc,aAAa,CAAA,GAAA,CAAA"}

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

@@ -33,7 +33,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			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) => {
 			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 = () => {
@@ -184,7 +184,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());
 			}
@@ -253,6 +253,10 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 	_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;
 	}
@@ -326,6 +330,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			"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"
@@ -342,6 +347,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			"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"
@@ -358,6 +364,7 @@ var D = 1, O = 4, k = .5, A = .002, j = 3, M = .15, N = 320, P = 16, F = 160, I
 			"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"