@greypan/web-ui 2.1.7 → 3.0.0

package/dist/components/back-top/index.js

@@ -62,7 +62,7 @@ var f = class extends a {
 		});
 	}
 	onEnter(e) {
-		e.key === "Enter" && (e.preventDefault(), this.toTop());
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.toTop());
 	}
 	render() {
 		return o`

package/dist/components/back-top/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/back-top/index.ts"],"sourcesContent":["import { getRootScrollTop } from '@greypan/browser-kit'\nimport { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport { lucideArrowUpToLine } from '@/icons'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-back-top')\nexport class WebUiBackTop extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ reflect: true, attribute: 'scroll-behavior', useDefault: true })\n  get scrollBehavior(): 'smooth' | 'auto' {\n    return this._scrollBehavior\n  }\n  set scrollBehavior(value: string) {\n    const old = this._scrollBehavior\n    this._scrollBehavior = normalizeLiteral(value, ['smooth', 'auto'] as const, 'smooth')\n    this.requestUpdate('scrollBehavior', old)\n  }\n  private _scrollBehavior: 'smooth' | 'auto' = 'smooth'\n  @property({ type: Boolean, reflect: true }) visible = false\n  @property({ attribute: false }) scrollTarget: HTMLElement | Window = window\n\n  @property({ type: Number, reflect: true })\n  get threshold(): number {\n    return this._threshold\n  }\n  set threshold(v: number) {\n    const old = this._threshold\n    this._threshold = normalizeNumber(v, 0, 10000, 200)\n    this.requestUpdate('threshold', old)\n  }\n  private _threshold = 200\n\n  @state() private eventController?: AbortController\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.computeVisible()\n    this.onScrollTarget()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.eventController?.abort()\n  }\n\n  protected override willUpdate(props: PropertyValues) {\n    super.willUpdate(props)\n\n    if (props.has('threshold') || props.has('scrollTarget')) {\n      this.computeVisible()\n    }\n    // 不设 hasUpdated 门控：scrollTarget 可能在首次更新完成前赋值（如框架 onMounted 中），\n    // 此时 connectedCallback 已按 window 绑定，必须重绑到新容器；onScrollTarget 幂等，重复调用安全\n    if (props.has('scrollTarget')) {\n      // 容器模式：scrollTarget 为元素时按钮通过 sticky 悬浮于容器底部，而非固定视口角落\n      this.toggleAttribute('container-mode', this.target !== window)\n      this.onScrollTarget()\n    }\n  }\n\n  private get target() {\n    if (!this.scrollTarget) return window\n    const isRoot =\n      this.scrollTarget === window ||\n      this.scrollTarget === document.documentElement ||\n      this.scrollTarget === document.body\n    return isRoot ? window : this.scrollTarget\n  }\n\n  private onScrollTarget() {\n    this.eventController?.abort()\n    this.eventController = new AbortController()\n\n    this.target.addEventListener(\n      'scroll',\n      () => {\n        this.computeVisible()\n      },\n      { signal: this.eventController.signal, passive: true }\n    )\n  }\n\n  private computeVisible() {\n    const target = this.target\n    if (target === window) {\n      this.visible = getRootScrollTop() >= this.threshold\n    } else if (target instanceof HTMLElement) {\n      this.visible = target.scrollTop >= this.threshold\n    } else {\n      throw new Error('Prop scrollTarget must be HTMLElement or Window.')\n    }\n  }\n\n  toTop() {\n    this.target.scrollTo({\n      top: 0,\n      behavior: this.scrollBehavior\n    })\n  }\n\n  private onEnter(e: KeyboardEvent) {\n    if (e.key === 'Enter') {\n      e.preventDefault()\n      this.toTop()\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"back-top-inner\" role=\"button\" tabindex=\"0\" @click=${this.toTop} @keydown=${this.onEnter}>\n        <slot>\n          <web-ui-button tabindex=\"-1\" icon>\n            <web-ui-icon .icon=${lucideArrowUpToLine}></web-ui-icon>\n          </web-ui-button>\n        </slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-back-top': WebUiBackTop\n  }\n}\n"],"mappings":";;;;;;;;;;AAYO,IAAM,IAAN,cAA2B,EAAW;;EAyBtB,aAbwB,KAAA,kBAAA,UACS,KAAA,UAAA,IACe,KAAA,eAAA,QAWhD,KAAA,aAAA;;;EAxBI,KAAA,SAAA,EAAU,CAAK;;CAExC,IACI,iBAAoC;EACtC,OAAO,KAAK;CACd;CACA,IAAI,eAAe,GAAe;EAChC,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,kBAAkB,EAAiB,GAAO,CAAC,UAAU,MAAM,GAAY,QAAQ,GACpF,KAAK,cAAc,kBAAkB,CAAG;CAC1C;CAKA,IACI,YAAoB;EACtB,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAgB,GAAG,GAAG,KAAO,GAAG,GAClD,KAAK,cAAc,aAAa,CAAG;CACrC;CAKA,oBAA6B;EAG3B,AAFA,MAAM,kBAAkB,GACxB,KAAK,eAAe,GACpB,KAAK,eAAe;CACtB;CAEA,uBAAgC;EAE9B,AADA,MAAM,qBAAqB,GAC3B,KAAK,iBAAiB,MAAM;CAC9B;CAEA,WAA8B,GAAuB;EAQnD,AAPA,MAAM,WAAW,CAAK,IAElB,EAAM,IAAI,WAAW,KAAK,EAAM,IAAI,cAAc,MACpD,KAAK,eAAe,GAIlB,EAAM,IAAI,cAAc,MAE1B,KAAK,gBAAgB,kBAAkB,KAAK,WAAW,MAAM,GAC7D,KAAK,eAAe;CAExB;CAEA,IAAY,SAAS;EAMnB,OALK,KAAK,eAER,KAAK,iBAAiB,UACtB,KAAK,iBAAiB,SAAS,mBAC/B,KAAK,iBAAiB,SAAS,OACjB,SAAS,KAAK,eALC;CAMjC;CAEA,iBAAyB;EAIvB,AAHA,KAAK,iBAAiB,MAAM,GAC5B,KAAK,kBAAkB,IAAI,gBAAgB,GAE3C,KAAK,OAAO,iBACV,gBACM;GACJ,KAAK,eAAe;EACtB,GACA;GAAE,QAAQ,KAAK,gBAAgB;GAAQ,SAAS;EAAK,CACvD;CACF;CAEA,iBAAyB;EACvB,IAAM,IAAS,KAAK;EACpB,IAAI,MAAW,QACb,KAAK,UAAU,EAAiB,KAAK,KAAK;OACrC,IAAI,aAAkB,aAC3B,KAAK,UAAU,EAAO,aAAa,KAAK;OAExC,MAAU,MAAM,kDAAkD;CAEtE;CAEA,QAAQ;EACN,KAAK,OAAO,SAAS;GACnB,KAAK;GACL,UAAU,KAAK;EACjB,CAAC;CACH;CAEA,QAAgB,GAAkB;EAChC,AAAI,EAAE,QAAQ,YACZ,EAAE,eAAe,GACjB,KAAK,MAAM;CAEf;CAEA,SAAkB;EAChB,OAAO,CAAI;sEACuD,KAAK,MAAM,YAAY,KAAK,QAAQ;;;iCAGzE,EAAoB;;;;;CAKnD;AAGF;AAhHG,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,WAAW;CAAmB,YAAY;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,IAAA,GAU1E,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS,EAAE,WAAW,GAAM,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAE7B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAWxC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GA5BR,IAAA,EAAA,CAAA,EAAc,iBAAiB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/back-top/index.ts"],"sourcesContent":["import { getRootScrollTop } from '@greypan/browser-kit'\nimport { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport '@/components/icon'\nimport '@/components/button'\nimport { lucideArrowUpToLine } from '@/icons'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-back-top')\nexport class WebUiBackTop extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ reflect: true, attribute: 'scroll-behavior', useDefault: true })\n  get scrollBehavior(): 'smooth' | 'auto' {\n    return this._scrollBehavior\n  }\n  set scrollBehavior(value: string) {\n    const old = this._scrollBehavior\n    this._scrollBehavior = normalizeLiteral(value, ['smooth', 'auto'] as const, 'smooth')\n    this.requestUpdate('scrollBehavior', old)\n  }\n  private _scrollBehavior: 'smooth' | 'auto' = 'smooth'\n  @property({ type: Boolean, reflect: true }) visible = false\n  @property({ attribute: false }) scrollTarget: HTMLElement | Window = window\n\n  @property({ type: Number, reflect: true })\n  get threshold(): number {\n    return this._threshold\n  }\n  set threshold(v: number) {\n    const old = this._threshold\n    this._threshold = normalizeNumber(v, 0, 10000, 200)\n    this.requestUpdate('threshold', old)\n  }\n  private _threshold = 200\n\n  @state() private eventController?: AbortController\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this.computeVisible()\n    this.onScrollTarget()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.eventController?.abort()\n  }\n\n  protected override willUpdate(props: PropertyValues) {\n    super.willUpdate(props)\n\n    if (props.has('threshold') || props.has('scrollTarget')) {\n      this.computeVisible()\n    }\n    // 不设 hasUpdated 门控：scrollTarget 可能在首次更新完成前赋值（如框架 onMounted 中），\n    // 此时 connectedCallback 已按 window 绑定，必须重绑到新容器；onScrollTarget 幂等，重复调用安全\n    if (props.has('scrollTarget')) {\n      // 容器模式：scrollTarget 为元素时按钮通过 sticky 悬浮于容器底部，而非固定视口角落\n      this.toggleAttribute('container-mode', this.target !== window)\n      this.onScrollTarget()\n    }\n  }\n\n  private get target() {\n    if (!this.scrollTarget) return window\n    const isRoot =\n      this.scrollTarget === window ||\n      this.scrollTarget === document.documentElement ||\n      this.scrollTarget === document.body\n    return isRoot ? window : this.scrollTarget\n  }\n\n  private onScrollTarget() {\n    this.eventController?.abort()\n    this.eventController = new AbortController()\n\n    this.target.addEventListener(\n      'scroll',\n      () => {\n        this.computeVisible()\n      },\n      { signal: this.eventController.signal, passive: true }\n    )\n  }\n\n  private computeVisible() {\n    const target = this.target\n    if (target === window) {\n      this.visible = getRootScrollTop() >= this.threshold\n    } else if (target instanceof HTMLElement) {\n      this.visible = target.scrollTop >= this.threshold\n    } else {\n      throw new Error('Prop scrollTarget must be HTMLElement or Window.')\n    }\n  }\n\n  toTop() {\n    this.target.scrollTo({\n      top: 0,\n      behavior: this.scrollBehavior\n    })\n  }\n\n  // ARIA button 契约要求 Enter 与 Space 均能激活\n  private onEnter(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.toTop()\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"back-top-inner\" role=\"button\" tabindex=\"0\" @click=${this.toTop} @keydown=${this.onEnter}>\n        <slot>\n          <web-ui-button tabindex=\"-1\" icon>\n            <web-ui-icon .icon=${lucideArrowUpToLine}></web-ui-icon>\n          </web-ui-button>\n        </slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-back-top': WebUiBackTop\n  }\n}\n"],"mappings":";;;;;;;;;;AAYO,IAAM,IAAN,cAA2B,EAAW;;EAyBtB,aAbwB,KAAA,kBAAA,UACS,KAAA,UAAA,IACe,KAAA,eAAA,QAWhD,KAAA,aAAA;;;EAxBI,KAAA,SAAA,EAAU,CAAK;;CAExC,IACI,iBAAoC;EACtC,OAAO,KAAK;CACd;CACA,IAAI,eAAe,GAAe;EAChC,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,kBAAkB,EAAiB,GAAO,CAAC,UAAU,MAAM,GAAY,QAAQ,GACpF,KAAK,cAAc,kBAAkB,CAAG;CAC1C;CAKA,IACI,YAAoB;EACtB,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAgB,GAAG,GAAG,KAAO,GAAG,GAClD,KAAK,cAAc,aAAa,CAAG;CACrC;CAKA,oBAA6B;EAG3B,AAFA,MAAM,kBAAkB,GACxB,KAAK,eAAe,GACpB,KAAK,eAAe;CACtB;CAEA,uBAAgC;EAE9B,AADA,MAAM,qBAAqB,GAC3B,KAAK,iBAAiB,MAAM;CAC9B;CAEA,WAA8B,GAAuB;EAQnD,AAPA,MAAM,WAAW,CAAK,IAElB,EAAM,IAAI,WAAW,KAAK,EAAM,IAAI,cAAc,MACpD,KAAK,eAAe,GAIlB,EAAM,IAAI,cAAc,MAE1B,KAAK,gBAAgB,kBAAkB,KAAK,WAAW,MAAM,GAC7D,KAAK,eAAe;CAExB;CAEA,IAAY,SAAS;EAMnB,OALK,KAAK,eAER,KAAK,iBAAiB,UACtB,KAAK,iBAAiB,SAAS,mBAC/B,KAAK,iBAAiB,SAAS,OACjB,SAAS,KAAK,eALC;CAMjC;CAEA,iBAAyB;EAIvB,AAHA,KAAK,iBAAiB,MAAM,GAC5B,KAAK,kBAAkB,IAAI,gBAAgB,GAE3C,KAAK,OAAO,iBACV,gBACM;GACJ,KAAK,eAAe;EACtB,GACA;GAAE,QAAQ,KAAK,gBAAgB;GAAQ,SAAS;EAAK,CACvD;CACF;CAEA,iBAAyB;EACvB,IAAM,IAAS,KAAK;EACpB,IAAI,MAAW,QACb,KAAK,UAAU,EAAiB,KAAK,KAAK;OACrC,IAAI,aAAkB,aAC3B,KAAK,UAAU,EAAO,aAAa,KAAK;OAExC,MAAU,MAAM,kDAAkD;CAEtE;CAEA,QAAQ;EACN,KAAK,OAAO,SAAS;GACnB,KAAK;GACL,UAAU,KAAK;EACjB,CAAC;CACH;CAGA,QAAgB,GAAkB;EAChC,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,KAAK,MAAM;CAEf;CAEA,SAAkB;EAChB,OAAO,CAAI;sEACuD,KAAK,MAAM,YAAY,KAAK,QAAQ;;;iCAGzE,EAAoB;;;;;CAKnD;AACF;AA/GG,EAAA,CAAA,EAAS;CAAE,SAAS;CAAM,WAAW;CAAmB,YAAY;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,kBAAA,IAAA,GAU1E,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS,EAAE,WAAW,GAAM,CAAC,CAAA,GAAA,EAAA,WAAA,gBAAA,KAAA,CAAA,GAE7B,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAWxC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,mBAAA,KAAA,CAAA,GA5BR,IAAA,EAAA,CAAA,EAAc,iBAAiB,CAAA,GAAA,CAAA"}

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

@@ -18,7 +18,6 @@ export declare class WebUiBadge extends LitElement {
     private _hasContent;
     connectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
-    readonly $events: Record<string, never>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/badge/index.js

@@ -4,8 +4,8 @@ import { normalizeLiteral as n, normalizeNumber as r } from "../../shared/normal
 import i from "./style.js";
 import { LitElement as a, html as o, unsafeCSS as s } from "lit";
 import { customElement as c, property as l, state as u } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
-import { ifDefined as f } from "lit/directives/if-defined.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { classMap as f } from "lit/directives/class-map.js";
 import { styleMap as p } from "lit/directives/style-map.js";
 //#region src/components/badge/index.ts
 var m = [
@@ -73,13 +73,13 @@ var m = [
 			"--badge-offset-y": `${this.offsetY}px`
 		};
 		return o`
-      <div class=${d(r)}>
+      <div class=${f(r)}>
         <slot></slot>
         ${e ? o`<span
-              class=${d(i)}
+              class=${f(i)}
               style=${p(a)}
               role="status"
-              aria-label=${f(n)}
+              aria-label=${d(n)}
               >${t}</span
             >` : ""}
       </div>

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/badge/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'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const\nconst MAX_SAFE = Number.MAX_SAFE_INTEGER\n\n@customElement('web-ui-badge')\nexport class WebUiBadge extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: Number, reflect: true })\n  set count(value: number) {\n    const normalized = normalizeNumber(value, 0, MAX_SAFE, 0)\n    if (this._count !== normalized) {\n      const old = this._count\n      this._count = normalized\n      this.requestUpdate('count', old)\n    }\n    if (this.getAttribute('count') !== String(normalized)) {\n      this.setAttribute('count', String(normalized))\n    }\n  }\n\n  get count(): number {\n    return this._count\n  }\n\n  private _count = 0\n\n  @property({ type: Number, reflect: true })\n  set max(value: number) {\n    const normalized = normalizeNumber(value, 0, MAX_SAFE, 99)\n    if (this._max !== normalized) {\n      const old = this._max\n      this._max = normalized\n      this.requestUpdate('max', old)\n    }\n    if (this.getAttribute('max') !== String(normalized)) {\n      this.setAttribute('max', String(normalized))\n    }\n  }\n\n  get max(): number {\n    return this._max\n  }\n\n  private _max = 99\n\n  @property({ type: Boolean, reflect: true }) dot = false\n  @property({ type: Boolean, reflect: true, attribute: 'show-zero' }) showZero = false\n  @property({ type: Boolean, reflect: true, attribute: 'badge-hidden' }) badgeHidden = false\n  @property({ type: Number, reflect: true, attribute: 'offset-x' }) offsetX = 0\n  @property({ type: Number, reflect: true, attribute: 'offset-y' }) offsetY = 0\n\n  @property({ type: String, reflect: true })\n  set placement(value: string) {\n    const normalized = normalizeLiteral(value, ALLOWED_PLACEMENTS, 'top-right')\n    if (this._placement !== normalized) {\n      const old = this._placement\n      this._placement = normalized\n      this.requestUpdate('placement', old)\n    }\n    if (this.getAttribute('placement') !== normalized) {\n      this.setAttribute('placement', normalized)\n    }\n  }\n\n  get placement(): 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {\n    return this._placement\n  }\n\n  private _placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right'\n\n  @state() private _hasContent = false\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._hasContent = this.children.length > 0\n    void this.updateComplete.then(() => {\n      this.shadowRoot?.querySelector('slot')?.addEventListener('slotchange', () => {\n        this._hasContent = this.children.length > 0\n      })\n    })\n  }\n\n  override render() {\n    const showBadge = this.badgeHidden ? false : this.dot ? true : this.count > 0 || this.showZero\n    const display = this.dot ? '' : this.count > this.max ? `${this.max}+` : String(this.count)\n    const ariaLabel = this.dot\n      ? '未读'\n      : this.count > 0\n        ? `${this.count} 条未读消息`\n        : this.showZero\n          ? '无未读消息'\n          : undefined\n    const wrapperClass = { 'badge-wrapper': true, 'badge-wrapper-fixed': this._hasContent }\n    const badgeClass = { badge: true, 'badge-dot': this.dot, 'badge-fixed': this._hasContent }\n    const badgeStyle = {\n      '--badge-offset-x': `${this.offsetX}px`,\n      '--badge-offset-y': `${this.offsetY}px`\n    }\n\n    return html`\n      <div class=${classMap(wrapperClass)}>\n        <slot></slot>\n        ${showBadge\n          ? html`<span\n              class=${classMap(badgeClass)}\n              style=${styleMap(badgeStyle)}\n              role=\"status\"\n              aria-label=${ifDefined(ariaLabel)}\n              >${display}</span\n            >`\n          : ''}\n      </div>\n    `\n  }\n\n  declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-badge': WebUiBadge\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/badge/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'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const\nconst MAX_SAFE = Number.MAX_SAFE_INTEGER\n\n@customElement('web-ui-badge')\nexport class WebUiBadge extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: Number, reflect: true })\n  set count(value: number) {\n    const normalized = normalizeNumber(value, 0, MAX_SAFE, 0)\n    if (this._count !== normalized) {\n      const old = this._count\n      this._count = normalized\n      this.requestUpdate('count', old)\n    }\n    if (this.getAttribute('count') !== String(normalized)) {\n      this.setAttribute('count', String(normalized))\n    }\n  }\n\n  get count(): number {\n    return this._count\n  }\n\n  private _count = 0\n\n  @property({ type: Number, reflect: true })\n  set max(value: number) {\n    const normalized = normalizeNumber(value, 0, MAX_SAFE, 99)\n    if (this._max !== normalized) {\n      const old = this._max\n      this._max = normalized\n      this.requestUpdate('max', old)\n    }\n    if (this.getAttribute('max') !== String(normalized)) {\n      this.setAttribute('max', String(normalized))\n    }\n  }\n\n  get max(): number {\n    return this._max\n  }\n\n  private _max = 99\n\n  @property({ type: Boolean, reflect: true }) dot = false\n  @property({ type: Boolean, reflect: true, attribute: 'show-zero' }) showZero = false\n  @property({ type: Boolean, reflect: true, attribute: 'badge-hidden' }) badgeHidden = false\n  @property({ type: Number, reflect: true, attribute: 'offset-x' }) offsetX = 0\n  @property({ type: Number, reflect: true, attribute: 'offset-y' }) offsetY = 0\n\n  @property({ type: String, reflect: true })\n  set placement(value: string) {\n    const normalized = normalizeLiteral(value, ALLOWED_PLACEMENTS, 'top-right')\n    if (this._placement !== normalized) {\n      const old = this._placement\n      this._placement = normalized\n      this.requestUpdate('placement', old)\n    }\n    if (this.getAttribute('placement') !== normalized) {\n      this.setAttribute('placement', normalized)\n    }\n  }\n\n  get placement(): 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {\n    return this._placement\n  }\n\n  private _placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right'\n\n  @state() private _hasContent = false\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._hasContent = this.children.length > 0\n    void this.updateComplete.then(() => {\n      this.shadowRoot?.querySelector('slot')?.addEventListener('slotchange', () => {\n        this._hasContent = this.children.length > 0\n      })\n    })\n  }\n\n  override render() {\n    const showBadge = this.badgeHidden ? false : this.dot ? true : this.count > 0 || this.showZero\n    const display = this.dot ? '' : this.count > this.max ? `${this.max}+` : String(this.count)\n    const ariaLabel = this.dot\n      ? '未读'\n      : this.count > 0\n        ? `${this.count} 条未读消息`\n        : this.showZero\n          ? '无未读消息'\n          : undefined\n    const wrapperClass = { 'badge-wrapper': true, 'badge-wrapper-fixed': this._hasContent }\n    const badgeClass = { badge: true, 'badge-dot': this.dot, 'badge-fixed': this._hasContent }\n    const badgeStyle = {\n      '--badge-offset-x': `${this.offsetX}px`,\n      '--badge-offset-y': `${this.offsetY}px`\n    }\n\n    return html`\n      <div class=${classMap(wrapperClass)}>\n        <slot></slot>\n        ${showBadge\n          ? html`<span\n              class=${classMap(badgeClass)}\n              style=${styleMap(badgeStyle)}\n              role=\"status\"\n              aria-label=${ifDefined(ariaLabel)}\n              >${display}</span\n            >`\n          : ''}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-badge': WebUiBadge\n  }\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,5 @@
 import { LitElement } from 'lit';
+declare const ALLOWED_TYPES: readonly ["button", "submit", "reset"];
 export declare class WebUiButton extends LitElement {
     static styles: import('lit').CSSResult[];
     get variant(): 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass';
@@ -9,14 +10,17 @@ export declare class WebUiButton extends LitElement {
     full: boolean;
     icon: boolean;
     size: string;
-    /** size="32" → 32x32，size="32x80" → 32x80 */
+    get type(): (typeof ALLOWED_TYPES)[number];
+    set type(value: unknown);
+    private _type;
+    ariaLabel: string | null;
     private get _sizeStyle();
     private handleClick;
     render(): import('lit').TemplateResult<1>;
-    readonly $events: Record<string, never>;
 }
 declare global {
     interface HTMLElementTagNameMap {
         'web-ui-button': WebUiButton;
     }
 }
+export {};

package/dist/components/button/index.js

@@ -1,33 +1,45 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../assets/glass.js";
-import n from "../../icons/generated/lucide-loader-circle.js";
+import t from "../../icons/generated/lucide-loader-circle.js";
+import n from "../../assets/glass.js";
 import { normalizeLiteral as r } from "../../shared/normalize/index.js";
 import i from "./style.js";
 import { LitElement as a, html as o, nothing as s, unsafeCSS as c } from "lit";
 import { customElement as l, property as u } from "lit/decorators.js";
-import { classMap as d } from "lit/directives/class-map.js";
-import { styleMap as f } from "lit/directives/style-map.js";
+import { ifDefined as d } from "lit/directives/if-defined.js";
+import { classMap as f } from "lit/directives/class-map.js";
+import { styleMap as p } from "lit/directives/style-map.js";
 //#region src/components/button/index.ts
-var p = [
+var m = [
 	"primary",
 	"secondary",
 	"ghost",
 	"danger",
 	"glass"
-], m = class extends a {
+], h = [
+	"button",
+	"submit",
+	"reset"
+], g = class extends a {
 	constructor(...e) {
-		super(...e), this._variant = "glass", this.disabled = !1, this.loading = !1, this.full = !1, this.icon = !1, this.size = "";
+		super(...e), this._variant = "glass", this.disabled = !1, this.loading = !1, this.full = !1, this.icon = !1, this.size = "", this._type = "button", this.ariaLabel = null;
 	}
 	static {
-		this.styles = [c(t), c(i)];
+		this.styles = [c(n), c(i)];
 	}
 	get variant() {
 		return this._variant;
 	}
 	set variant(e) {
 		let t = this._variant;
-		this._variant = r(e, p, "glass"), this.requestUpdate("variant", t);
+		this._variant = r(e, m, "glass"), this.requestUpdate("variant", t);
+	}
+	get type() {
+		return this._type;
+	}
+	set type(e) {
+		let t = this._type;
+		this._type = r(e, h, "button"), this.requestUpdate("type", t);
 	}
 	get _sizeStyle() {
 		if (!this.size) return {};
@@ -38,14 +50,17 @@ var p = [
 		(this.disabled || this.loading) && (e.preventDefault(), e.stopPropagation());
 	}
 	render() {
+		let e = { "wui-glass": this.variant === "glass" && !this.hasAttribute("group") };
 		return o`
       <button
-        class=${d({ "wui-glass": this.variant === "glass" && !this.hasAttribute("group") })}
-        style=${this.size ? f(this._sizeStyle) : s}
+        type=${this.type}
+        aria-label=${d(this.ariaLabel)}
+        class=${f(e)}
+        style=${this.size ? p(this._sizeStyle) : s}
         ?disabled=${this.disabled || this.loading}
         @click=${this.handleClick}
       >
-        ${this.loading ? o`<web-ui-icon .icon=${n} spin></web-ui-icon>` : ""}
+        ${this.loading ? o`<web-ui-icon .icon=${t} spin></web-ui-icon>` : ""}
         ${this.icon ? o`<slot></slot>` : o`
               <slot name="prefix"></slot>
               <span class="label"><slot></slot></span>
@@ -58,23 +73,29 @@ var p = [
 e([u({
 	type: String,
 	reflect: !0
-})], m.prototype, "variant", null), e([u({
+})], g.prototype, "variant", null), e([u({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "disabled", void 0), e([u({
+})], g.prototype, "disabled", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "loading", void 0), e([u({
+})], g.prototype, "loading", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "full", void 0), e([u({
+})], g.prototype, "full", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], m.prototype, "icon", void 0), e([u({
+})], g.prototype, "icon", void 0), e([u({
 	type: String,
 	reflect: !0
-})], m.prototype, "size", void 0), m = e([l("web-ui-button")], m);
+})], g.prototype, "size", void 0), e([u({
+	type: String,
+	reflect: !0
+})], g.prototype, "type", null), e([u({
+	type: String,
+	attribute: "aria-label"
+})], g.prototype, "ariaLabel", void 0), g = e([l("web-ui-button")], g);
 //#endregion
-export { m as WebUiButton };
+export { g as WebUiButton };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\n// web-ui-icon 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_VARIANTS = ['primary', 'secondary', 'ghost', 'danger', 'glass'] as const\n\n@customElement('web-ui-button')\nexport class WebUiButton extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get variant(): 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass' {\n    return this._variant\n  }\n  set variant(v: string) {\n    const old = this._variant\n    this._variant = normalizeLiteral(v, ALLOWED_VARIANTS, 'glass')\n    this.requestUpdate('variant', old)\n  }\n  private _variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass' = 'glass'\n\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean, reflect: true }) full = false\n  @property({ type: Boolean, reflect: true }) icon = false\n  @property({ type: String, reflect: true }) size = ''\n\n  /** size=\"32\" → 32x32，size=\"32x80\" → 32x80 */\n  private get _sizeStyle(): Record<string, string> {\n    if (!this.size) return {}\n    const [h, w] = this.size.split('x')\n    const style: Record<string, string> = { '--wui-button-size': `${h}px` }\n    if (w) style['--wui-button-width'] = `${w}px`\n    return style\n  }\n\n  private handleClick(e: Event) {\n    if (this.disabled || this.loading) {\n      e.preventDefault()\n      e.stopPropagation()\n    }\n  }\n\n  override render() {\n    const btnClass = { 'wui-glass': this.variant === 'glass' && !this.hasAttribute('group') }\n    return html`\n      <button\n        class=${classMap(btnClass)}\n        style=${this.size ? styleMap(this._sizeStyle) : nothing}\n        ?disabled=${this.disabled || this.loading}\n        @click=${this.handleClick}\n      >\n        ${this.loading ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>` : ''}\n        ${this.icon\n          ? html`<slot></slot>`\n          : html`\n              <slot name=\"prefix\"></slot>\n              <span class=\"label\"><slot></slot></span>\n              <slot name=\"suffix\"></slot>\n            `}\n      </button>\n    `\n  }\n\n  declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button': WebUiButton\n  }\n}\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,IAAmB;CAAC;CAAW;CAAa;CAAS;CAAU;AAAO,GAG/D,IAAN,cAA0B,EAAW;;EAkBQ,aANyB,KAAA,WAAA,SAEpB,KAAA,WAAA,IACD,KAAA,UAAA,IACH,KAAA,OAAA,IACA,KAAA,OAAA,IACD,KAAA,OAAA;;;EAjBzB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,UAAkE;EACpE,OAAO,KAAK;CACd;CACA,IAAI,QAAQ,GAAW;EACrB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,WAAW,EAAiB,GAAG,GAAkB,OAAO,GAC7D,KAAK,cAAc,WAAW,CAAG;CACnC;CAUA,IAAY,aAAqC;EAC/C,IAAI,CAAC,KAAK,MAAM,OAAO,CAAC;EACxB,IAAM,CAAC,GAAG,KAAK,KAAK,KAAK,MAAM,GAAG,GAC5B,IAAgC,EAAE,qBAAqB,GAAG,EAAE,IAAI;EAEtE,OADI,MAAG,EAAM,wBAAwB,GAAG,EAAE,MACnC;CACT;CAEA,YAAoB,GAAU;EAC5B,CAAI,KAAK,YAAY,KAAK,aACxB,EAAE,eAAe,GACjB,EAAE,gBAAgB;CAEtB;CAEA,SAAkB;EAEhB,OAAO,CAAI;;gBAEC,EAAS,EAHF,aAAa,KAAK,YAAY,WAAW,CAAC,KAAK,aAAa,OAAO,EAGjE,CAAQ,EAAE;gBACnB,KAAK,OAAO,EAAS,KAAK,UAAU,IAAI,EAAQ;oBAC5C,KAAK,YAAY,KAAK,QAAQ;iBACjC,KAAK,YAAY;;UAExB,KAAK,UAAU,CAAI,sBAAsB,EAAmB,wBAAwB,GAAG;UACvF,KAAK,OACH,CAAI,kBACJ,CAAI;;;;cAIF;;;CAGZ;AAGF;AAvDG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,IAAA,GAWxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,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,GAnB1C,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_VARIANTS = ['primary', 'secondary', 'ghost', 'danger', 'glass'] as const\nconst ALLOWED_TYPES = ['button', 'submit', 'reset'] as const\n\n@customElement('web-ui-button')\nexport class WebUiButton extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get variant(): 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass' {\n    return this._variant\n  }\n  set variant(v: string) {\n    const old = this._variant\n    this._variant = normalizeLiteral(v, ALLOWED_VARIANTS, 'glass')\n    this.requestUpdate('variant', old)\n  }\n  private _variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass' = 'glass'\n\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean, reflect: true }) full = false\n  @property({ type: Boolean, reflect: true }) icon = false\n  @property({ type: String, reflect: true }) size = ''\n\n  @property({ type: String, reflect: true })\n  get type(): (typeof ALLOWED_TYPES)[number] {\n    return this._type\n  }\n  set type(value: unknown) {\n    const old = this._type\n    this._type = normalizeLiteral(value, ALLOWED_TYPES, 'button')\n    this.requestUpdate('type', old)\n  }\n  private _type: (typeof ALLOWED_TYPES)[number] = 'button'\n\n  // Explicitly delegated accessible naming attributes.\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n\n  // size=\"32\" → 32x32，size=\"32x80\" → 32x80\n  private get _sizeStyle(): Record<string, string> {\n    if (!this.size) return {}\n    const [h, w] = this.size.split('x')\n    const style: Record<string, string> = { '--wui-button-size': `${h}px` }\n    if (w) style['--wui-button-width'] = `${w}px`\n    return style\n  }\n\n  private handleClick(e: Event) {\n    if (this.disabled || this.loading) {\n      e.preventDefault()\n      e.stopPropagation()\n    }\n  }\n\n  override render() {\n    const btnClass = { 'wui-glass': this.variant === 'glass' && !this.hasAttribute('group') }\n    return html`\n      <button\n        type=${this.type}\n        aria-label=${ifDefined(this.ariaLabel)}\n        class=${classMap(btnClass)}\n        style=${this.size ? styleMap(this._sizeStyle) : nothing}\n        ?disabled=${this.disabled || this.loading}\n        @click=${this.handleClick}\n      >\n        ${this.loading ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>` : ''}\n        ${this.icon\n          ? html`<slot></slot>`\n          : html`\n              <slot name=\"prefix\"></slot>\n              <span class=\"label\"><slot></slot></span>\n              <slot name=\"suffix\"></slot>\n            `}\n      </button>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button': WebUiButton\n  }\n}\n"],"mappings":";;;;;;;;;;;;AAaA,IAAM,IAAmB;CAAC;CAAW;CAAa;CAAS;CAAU;AAAO,GACtE,IAAgB;CAAC;CAAU;CAAU;AAAO,GAGrC,IAAN,cAA0B,EAAW;;EAgC+C,aApBd,KAAA,WAAA,SAEpB,KAAA,WAAA,IACD,KAAA,UAAA,IACH,KAAA,OAAA,IACA,KAAA,OAAA,IACD,KAAA,OAAA,IAWF,KAAA,QAAA,UAGyC,KAAA,YAAA;;;EA/BhE,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,UAAkE;EACpE,OAAO,KAAK;CACd;CACA,IAAI,QAAQ,GAAW;EACrB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,WAAW,EAAiB,GAAG,GAAkB,OAAO,GAC7D,KAAK,cAAc,WAAW,CAAG;CACnC;CASA,IACI,OAAuC;EACzC,OAAO,KAAK;CACd;CACA,IAAI,KAAK,GAAgB;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,QAAQ,EAAiB,GAAO,GAAe,QAAQ,GAC5D,KAAK,cAAc,QAAQ,CAAG;CAChC;CAOA,IAAY,aAAqC;EAC/C,IAAI,CAAC,KAAK,MAAM,OAAO,CAAC;EACxB,IAAM,CAAC,GAAG,KAAK,KAAK,KAAK,MAAM,GAAG,GAC5B,IAAgC,EAAE,qBAAqB,GAAG,EAAE,IAAI;EAEtE,OADI,MAAG,EAAM,wBAAwB,GAAG,EAAE,MACnC;CACT;CAEA,YAAoB,GAAU;EAC5B,CAAI,KAAK,YAAY,KAAK,aACxB,EAAE,eAAe,GACjB,EAAE,gBAAgB;CAEtB;CAEA,SAAkB;EAChB,IAAM,IAAW,EAAE,aAAa,KAAK,YAAY,WAAW,CAAC,KAAK,aAAa,OAAO,EAAE;EACxF,OAAO,CAAI;;eAEA,KAAK,KAAK;qBACJ,EAAU,KAAK,SAAS,EAAE;gBAC/B,EAAS,CAAQ,EAAE;gBACnB,KAAK,OAAO,EAAS,KAAK,UAAU,IAAI,EAAQ;oBAC5C,KAAK,YAAY,KAAK,QAAQ;iBACjC,KAAK,YAAY;;UAExB,KAAK,UAAU,CAAI,sBAAsB,EAAmB,wBAAwB,GAAG;UACvF,KAAK,OACH,CAAI,kBACJ,CAAI;;;;cAIF;;;CAGZ;AACF;AArEG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,IAAA,GAWxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,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,GAExC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,IAAA,GAYxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,WAAW;AAAa,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,KAAA,CAAA,GAjCpD,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}

package/dist/components/button/style.js

@@ -1,5 +1,5 @@
 //#region src/components/button/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([full]){width:100%;display:block}:host([disabled]){cursor:not-allowed}button{cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--wui-button-gap,8px);box-sizing:border-box;width:var(--wui-button-width,max-content);min-width:var(--wui-button-size,auto);height:var(--wui-button-size,40px);padding:0 var(--wui-button-px,16px);font-size:var(--wui-font-size,14px);color:var(--wui-button-color);white-space:nowrap;background-color:var(--wui-button-bg);transition:background-color var(--wui-duration-trigger,.16s) ease;border:1px solid #0000;border-radius:2147483647px;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative;overflow:clip}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}@media (hover:hover) and (pointer:fine){button:hover:not(:disabled){background-color:var(--wui-button-bg-hover)}}button:active:not(:disabled){background-color:var(--wui-button-bg-active)}@media (prefers-reduced-motion:reduce){button{transition:background-color var(--wui-duration-trigger,.16s) ease}}:host([full]) button{width:100%;display:flex}:host([icon]) button{aspect-ratio:1;padding:0}:host([variant=primary]){--wui-button-color:var(--wui-color-on-accent,#fff);--wui-button-bg:var(--wui-color-accent,#08f);--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-accent,#08f) 88%, var(--wui-color-text,#1b1b1b));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-accent,#08f) 65%, var(--wui-color-text,#1b1b1b))}:host([variant=secondary]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:var(--wui-color-surface-raised-mid,#dfdfdf);--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-surface-raised-mid,#dfdfdf) 90%, var(--wui-color-text,#1b1b1b));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-surface-raised-mid,#dfdfdf) 70%, var(--wui-color-text,#1b1b1b))}:host([variant=ghost]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent)}:host([variant=danger]){--wui-button-color:var(--wui-color-danger,#dc2626);--wui-button-bg:color-mix(in srgb, var(--wui-color-danger,#dc2626) 18%, var(--wui-color-surface,#fff));--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-danger,#dc2626) 26%, var(--wui-color-surface,#fff));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-danger,#dc2626) 45%, var(--wui-color-surface,#fff))}:host([variant=glass]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent)}:host([group]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent);position:relative}:host([group]:not([last])):after{content:\"\";width:var(--wui-button-divider-width,0);background-color:var(--wui-color-border,#0000001a);height:24px;position:absolute;top:50%;right:-2px;transform:translateY(-50%)}:host([group][direction=vertical]:not([last])):after{width:24px;height:var(--wui-button-divider-width,0);inset:auto auto -2px 50%;transform:translate(-50%)}";
+var e = "*,:before,:after{box-sizing:border-box}:host{justify-content:center;align-items:center;display:inline-flex}:host([full]){width:100%;display:block}:host([disabled]){cursor:not-allowed}button{cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--wui-button-gap,8px);box-sizing:border-box;width:var(--wui-button-width,max-content);min-width:var(--wui-button-size,auto);height:var(--wui-button-size,40px);padding:0 var(--wui-button-px,16px);font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-button-color);white-space:nowrap;background-color:var(--wui-button-bg);transition:background-color var(--wui-duration-trigger,.16s) ease;border:1px solid #0000;border-radius:2147483647px;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative;overflow:clip}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}@media (hover:hover) and (pointer:fine){button:hover:not(:disabled){background-color:var(--wui-button-bg-hover)}}button:active:not(:disabled){background-color:var(--wui-button-bg-active)}@media (prefers-reduced-motion:reduce){button{transition:background-color var(--wui-duration-trigger,.16s) ease}}:host([full]) button{width:100%;display:flex}:host([icon]) button{aspect-ratio:1;padding:0}:host([variant=primary]){--wui-button-color:var(--wui-color-on-accent,#fff);--wui-button-bg:var(--wui-color-accent,#08f);--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-accent,#08f) 88%, var(--wui-color-text,#1b1b1b));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-accent,#08f) 65%, var(--wui-color-text,#1b1b1b))}:host([variant=secondary]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:var(--wui-color-surface-raised-mid,#dfdfdf);--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-surface-raised-mid,#dfdfdf) 90%, var(--wui-color-text,#1b1b1b));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-surface-raised-mid,#dfdfdf) 70%, var(--wui-color-text,#1b1b1b))}:host([variant=ghost]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent)}:host([variant=danger]){--wui-button-color:var(--wui-color-danger,#dc2626);--wui-button-bg:color-mix(in srgb, var(--wui-color-danger,#dc2626) 18%, var(--wui-color-surface,#fff));--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-danger,#dc2626) 26%, var(--wui-color-surface,#fff));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-danger,#dc2626) 45%, var(--wui-color-surface,#fff))}:host([variant=glass]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent)}:host([group]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent);position:relative}:host([group]:not([last])):after{content:\"\";width:var(--wui-button-divider-width,0);background-color:var(--wui-color-border,#0000001a);height:24px;position:absolute;top:50%;right:-2px;transform:translateY(-50%)}:host([group][direction=vertical]:not([last])):after{width:24px;height:var(--wui-button-divider-width,0);inset:auto auto -2px 50%;transform:translate(-50%)}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/button/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-block;\n}\n\n:host([full]) {\n  display: block;\n  width: 100%;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\nbutton {\n  cursor: pointer;\n  user-select: none;\n\n  position: relative;\n\n  overflow: clip;\n  display: inline-flex;\n  gap: var(--wui-button-gap, 8px);\n  align-items: center;\n  justify-content: center;\n\n  box-sizing: border-box;\n  width: var(--wui-button-width, max-content);\n  min-width: var(--wui-button-size, auto);\n  height: var(--wui-button-size, 40px);\n  padding: 0 var(--wui-button-px, 16px);\n  border: 1px solid transparent;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-button-color);\n  white-space: nowrap;\n\n  background-color: var(--wui-button-bg);\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  button:hover:not(:disabled) {\n    background-color: var(--wui-button-bg-hover);\n  }\n}\n\nbutton:active:not(:disabled) {\n  background-color: var(--wui-button-bg-active);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  button {\n    transition: background-color var(--wui-duration-trigger, 160ms) ease;\n  }\n}\n\n/* ===== Full width ===== */\n\n:host([full]) button {\n  display: flex;\n  width: 100%;\n}\n\n/* ===== Icon mode ===== */\n\n:host([icon]) button {\n  aspect-ratio: 1;\n  padding: 0;\n}\n\n/* ===== Variant: primary (默认) ===== */\n\n:host([variant='primary']) {\n  --wui-button-color: var(--wui-color-on-accent, #fff);\n  --wui-button-bg: var(--wui-color-accent, #08f);\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-accent, #08f) 88%, var(--wui-color-text, #1b1b1b));\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-accent, #08f) 65%, var(--wui-color-text, #1b1b1b));\n}\n\n/* ===== Variant: secondary ===== */\n\n:host([variant='secondary']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: var(--wui-color-surface-raised-mid, #dfdfdf);\n  --wui-button-bg-hover: color-mix(\n    in srgb,\n    var(--wui-color-surface-raised-mid, #dfdfdf) 90%,\n    var(--wui-color-text, #1b1b1b)\n  );\n  --wui-button-bg-active: color-mix(\n    in srgb,\n    var(--wui-color-surface-raised-mid, #dfdfdf) 70%,\n    var(--wui-color-text, #1b1b1b)\n  );\n}\n\n/* ===== Variant: ghost ===== */\n\n:host([variant='ghost']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent);\n}\n\n/* ===== Variant: danger ===== */\n\n:host([variant='danger']) {\n  --wui-button-color: var(--wui-color-danger, #dc2626);\n  --wui-button-bg: color-mix(in srgb, var(--wui-color-danger, #dc2626) 18%, var(--wui-color-surface, #fff));\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-danger, #dc2626) 26%, var(--wui-color-surface, #fff));\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-danger, #dc2626) 45%, var(--wui-color-surface, #fff));\n}\n\n/* ===== Variant: glass (玻璃) ===== */\n\n/* .wui-glass 样式由 @/assets/glass.css 提供 */\n:host([variant='glass']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent);\n}\n\n/* ===== Group context ===== */\n\n:host([group]) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent);\n  position: relative;\n}\n\n:host([group]:not([last]))::after {\n  content: '';\n\n  position: absolute;\n  top: 50%;\n  right: -2px;\n  transform: translateY(-50%);\n\n  width: var(--wui-button-divider-width, 0);\n  height: 24px;\n\n  background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n:host([group][direction='vertical']:not([last]))::after {\n  top: auto;\n  right: auto;\n  bottom: -2px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  width: 24px;\n  height: var(--wui-button-divider-width, 0);\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/button/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  /* inline-flex 让内层按钮在宿主内完全居中，避免继承的行高撑高宿主、导致图标偏移 */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:host([full]) {\n  display: block;\n  width: 100%;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\nbutton {\n  cursor: pointer;\n  user-select: none;\n\n  position: relative;\n\n  overflow: clip;\n  display: inline-flex;\n  gap: var(--wui-button-gap, 8px);\n  align-items: center;\n  justify-content: center;\n\n  box-sizing: border-box;\n  width: var(--wui-button-width, max-content);\n  min-width: var(--wui-button-size, auto);\n  height: var(--wui-button-size, 40px);\n  padding: 0 var(--wui-button-px, 16px);\n  border: 1px solid transparent;\n  border-radius: calc(infinity * 1px);\n\n  /* 原生 button 不继承字体；显式继承以对齐宿主排版，避免 UA 默认 Arial 差异 */\n  font: inherit;\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-button-color);\n  white-space: nowrap;\n\n  background-color: var(--wui-button-bg);\n\n  transition: background-color var(--wui-duration-trigger, 160ms) ease;\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  button:hover:not(:disabled) {\n    background-color: var(--wui-button-bg-hover);\n  }\n}\n\nbutton:active:not(:disabled) {\n  background-color: var(--wui-button-bg-active);\n}\n\n@media (prefers-reduced-motion: reduce) {\n  button {\n    transition: background-color var(--wui-duration-trigger, 160ms) ease;\n  }\n}\n\n/* ===== Full width ===== */\n\n:host([full]) button {\n  display: flex;\n  width: 100%;\n}\n\n/* ===== Icon mode ===== */\n\n:host([icon]) button {\n  aspect-ratio: 1;\n  padding: 0;\n}\n\n/* ===== Variant: primary (默认) ===== */\n\n:host([variant='primary']) {\n  --wui-button-color: var(--wui-color-on-accent, #fff);\n  --wui-button-bg: var(--wui-color-accent, #08f);\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-accent, #08f) 88%, var(--wui-color-text, #1b1b1b));\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-accent, #08f) 65%, var(--wui-color-text, #1b1b1b));\n}\n\n/* ===== Variant: secondary ===== */\n\n:host([variant='secondary']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: var(--wui-color-surface-raised-mid, #dfdfdf);\n  --wui-button-bg-hover: color-mix(\n    in srgb,\n    var(--wui-color-surface-raised-mid, #dfdfdf) 90%,\n    var(--wui-color-text, #1b1b1b)\n  );\n  --wui-button-bg-active: color-mix(\n    in srgb,\n    var(--wui-color-surface-raised-mid, #dfdfdf) 70%,\n    var(--wui-color-text, #1b1b1b)\n  );\n}\n\n/* ===== Variant: ghost ===== */\n\n:host([variant='ghost']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent);\n}\n\n/* ===== Variant: danger ===== */\n\n:host([variant='danger']) {\n  --wui-button-color: var(--wui-color-danger, #dc2626);\n  --wui-button-bg: color-mix(in srgb, var(--wui-color-danger, #dc2626) 18%, var(--wui-color-surface, #fff));\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-danger, #dc2626) 26%, var(--wui-color-surface, #fff));\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-danger, #dc2626) 45%, var(--wui-color-surface, #fff));\n}\n\n/* ===== Variant: glass (玻璃) ===== */\n\n/* .wui-glass 样式由 @/assets/glass.css 提供 */\n:host([variant='glass']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent);\n}\n\n/* ===== Group context ===== */\n\n:host([group]) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent);\n  position: relative;\n}\n\n:host([group]:not([last]))::after {\n  content: '';\n\n  position: absolute;\n  top: 50%;\n  right: -2px;\n  transform: translateY(-50%);\n\n  width: var(--wui-button-divider-width, 0);\n  height: 24px;\n\n  background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n:host([group][direction='vertical']:not([last]))::after {\n  top: auto;\n  right: auto;\n  bottom: -2px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  width: 24px;\n  height: var(--wui-button-divider-width, 0);\n}\n"],"mappings":""}

package/dist/components/button-group/index.d.ts

@@ -7,7 +7,6 @@ export declare class WebUiButtonGroup extends LitElement {
     updated(): void;
     private syncChildButtons;
     render(): import('lit').TemplateResult<1>;
-    readonly $events: Record<string, never>;
 }
 declare global {
     interface HTMLElementTagNameMap {

package/dist/components/button-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n// web-ui-button 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-button-group')\nexport class WebUiButtonGroup extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get direction(): 'horizontal' | 'vertical' {\n    return this._direction\n  }\n  set direction(v: string) {\n    const old = this._direction\n    this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'horizontal')\n    this.requestUpdate('direction', old)\n  }\n  private _direction: 'horizontal' | 'vertical' = 'horizontal'\n\n  override updated() {\n    this.syncChildButtons()\n  }\n\n  private syncChildButtons() {\n    const buttons = this.querySelectorAll<HTMLElement & { variant: string }>('web-ui-button')\n    const isVertical = this.direction === 'vertical'\n    for (const [i, btn] of [...buttons].entries()) {\n      if (!btn.hasAttribute('group')) btn.setAttribute('group', '')\n      btn.variant = 'glass'\n      btn.style.setProperty('--wui-button-size', '32px')\n      btn.setAttribute('direction', isVertical ? 'vertical' : 'horizontal')\n      const isLast = i === buttons.length - 1\n      btn.toggleAttribute('last', isLast)\n      btn.style.setProperty('--wui-button-divider-width', isLast ? '0px' : '1px')\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"wui-glass wui-button-group-inner\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button-group': WebUiButtonGroup\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAqB,CAAC,cAAc,UAAU,GAGvC,IAAN,cAA+B,EAAW;;EAYC,aAAA,KAAA,aAAA;;;EAXvB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,YAAuC;EACzC,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAiB,GAAG,GAAoB,YAAY,GACtE,KAAK,cAAc,aAAa,CAAG;CACrC;CAGA,UAAmB;EACjB,KAAK,iBAAiB;CACxB;CAEA,mBAA2B;EACzB,IAAM,IAAU,KAAK,iBAAoD,eAAe,GAClF,IAAa,KAAK,cAAc;EACtC,KAAK,IAAM,CAAC,GAAG,MAAQ,CAAC,GAAG,CAAO,CAAC,CAAC,QAAQ,GAAG;GAI7C,AAHK,EAAI,aAAa,OAAO,KAAG,EAAI,aAAa,SAAS,EAAE,GAC5D,EAAI,UAAU,SACd,EAAI,MAAM,YAAY,qBAAqB,MAAM,GACjD,EAAI,aAAa,aAAa,IAAa,aAAa,YAAY;GACpE,IAAM,IAAS,MAAM,EAAQ,SAAS;GAEtC,AADA,EAAI,gBAAgB,QAAQ,CAAM,GAClC,EAAI,MAAM,YAAY,8BAA8B,IAAS,QAAQ,KAAK;EAC5E;CACF;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;CAKb;AAGF;AAtCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAJ1C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n// web-ui-button 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-button-group')\nexport class WebUiButtonGroup extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get direction(): 'horizontal' | 'vertical' {\n    return this._direction\n  }\n  set direction(v: string) {\n    const old = this._direction\n    this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'horizontal')\n    this.requestUpdate('direction', old)\n  }\n  private _direction: 'horizontal' | 'vertical' = 'horizontal'\n\n  override updated() {\n    this.syncChildButtons()\n  }\n\n  private syncChildButtons() {\n    const buttons = this.querySelectorAll<HTMLElement & { variant: string }>('web-ui-button')\n    const isVertical = this.direction === 'vertical'\n    for (const [i, btn] of [...buttons].entries()) {\n      if (!btn.hasAttribute('group')) btn.setAttribute('group', '')\n      btn.variant = 'glass'\n      btn.style.setProperty('--wui-button-size', '32px')\n      btn.setAttribute('direction', isVertical ? 'vertical' : 'horizontal')\n      const isLast = i === buttons.length - 1\n      btn.toggleAttribute('last', isLast)\n      btn.style.setProperty('--wui-button-divider-width', isLast ? '0px' : '1px')\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"wui-glass wui-button-group-inner\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button-group': WebUiButtonGroup\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAqB,CAAC,cAAc,UAAU,GAGvC,IAAN,cAA+B,EAAW;;EAYC,aAAA,KAAA,aAAA;;;EAXvB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,YAAuC;EACzC,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAiB,GAAG,GAAoB,YAAY,GACtE,KAAK,cAAc,aAAa,CAAG;CACrC;CAGA,UAAmB;EACjB,KAAK,iBAAiB;CACxB;CAEA,mBAA2B;EACzB,IAAM,IAAU,KAAK,iBAAoD,eAAe,GAClF,IAAa,KAAK,cAAc;EACtC,KAAK,IAAM,CAAC,GAAG,MAAQ,CAAC,GAAG,CAAO,CAAC,CAAC,QAAQ,GAAG;GAI7C,AAHK,EAAI,aAAa,OAAO,KAAG,EAAI,aAAa,SAAS,EAAE,GAC5D,EAAI,UAAU,SACd,EAAI,MAAM,YAAY,qBAAqB,MAAM,GACjD,EAAI,aAAa,aAAa,IAAa,aAAa,YAAY;GACpE,IAAM,IAAS,MAAM,EAAQ,SAAS;GAEtC,AADA,EAAI,gBAAgB,QAAQ,CAAM,GAClC,EAAI,MAAM,YAAY,8BAA8B,IAAS,QAAQ,KAAK;EAC5E;CACF;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;CAKb;AACF;AApCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAJ1C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}

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

@@ -2,11 +2,9 @@ import { LitElement } from 'lit';
 export declare class WebUiCheckbox extends LitElement {
     static styles: import('lit').CSSResult;
     static formAssociated: boolean;
-    /** 内部表单关联实例（connectedCallback 中初始化） */
     private _internals?;
     private _formDisabled;
     private _groupDisabled;
-    /** 内部 checked 状态，通过 getter/setter 暴露为公共 API */
     private _checked;
     get checked(): boolean;
     set checked(v: boolean);
@@ -23,7 +21,6 @@ export declare class WebUiCheckbox extends LitElement {
     updated(): void;
     private _syncFormValue;
     private _syncValidity;
-    /** 用户点击切换 */
     private handleClick;
     private handleKeyDown;
     render(): import('lit').TemplateResult<1>;

package/dist/components/checkbox/index.js

@@ -59,13 +59,15 @@ var u = class extends r {
 	handleClick() {
 		if (this._isDisabled) return;
 		let e = this._checked;
-		this._checked = !e, this._syncFormValue(), this.requestUpdate("checked", e), this.dispatchEvent(new Event("input", {
+		this._checked = !e, this._syncFormValue(), this.requestUpdate("checked", e);
+		let t = this._isManagedByGroup ? {
+			bubbles: !1,
+			composed: !1
+		} : {
 			bubbles: !0,
 			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
-		}));
+		};
+		this.dispatchEvent(new Event("input", t)), this.dispatchEvent(new Event("change", t));
 	}
 	handleKeyDown(e) {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox/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 { heroiconsCheck16Solid } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox')\nexport class WebUiCheckbox extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  /** 内部表单关联实例（connectedCallback 中初始化） */\n  private _internals?: ElementInternals\n  @state() private _formDisabled = false\n  @state() private _groupDisabled = false\n\n  /** 内部 checked 状态，通过 getter/setter 暴露为公共 API */\n  @state() private _checked = false\n\n  get checked(): boolean {\n    return this._checked\n  }\n\n  set checked(v: boolean) {\n    const old = this._checked\n    this._checked = v\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n  }\n\n  @property({ type: String }) value = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled || this._groupDisabled\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this.closest('web-ui-checkbox-group') !== null\n  }\n\n  setGroupDisabled(disabled: boolean) {\n    this._groupDisabled = disabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (this._internals) return\n    this._internals = this.attachInternals()\n    if (this.hasAttribute('checked')) {\n      this._checked = true\n    }\n    this._syncFormValue()\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked')\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  override updated() {\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || 'on' : null)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请选择此项')\n  }\n\n  /** 用户点击切换 */\n  private handleClick() {\n    if (this._isDisabled) return\n    const old = this._checked\n    this._checked = !old\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-checkbox': true,\n      'is-checked': this._checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <label\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"checkbox\"\n        aria-checked=${String(this._checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <span class=\"wui-checkbox-box\">\n          <span class=\"wui-checkbox-icon\"\n            ><web-ui-icon .icon=${heroiconsCheck16Solid} size=\"18\" color=\"#fff\"></web-ui-icon\n          ></span>\n        </span>\n        <span class=\"wui-checkbox-label\"><slot></slot></span>\n      </label>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-checkbox': WebUiCheckbox\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox/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 { heroiconsCheck16Solid } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox')\nexport class WebUiCheckbox extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  // 内部表单关联实例（connectedCallback 中初始化）\n  private _internals?: ElementInternals\n  @state() private _formDisabled = false\n  @state() private _groupDisabled = false\n\n  // 内部 checked 状态，通过 getter/setter 暴露为公共 API\n  @state() private _checked = false\n\n  get checked(): boolean {\n    return this._checked\n  }\n\n  set checked(v: boolean) {\n    const old = this._checked\n    this._checked = v\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n  }\n\n  @property({ type: String }) value = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled || this._groupDisabled\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this.closest('web-ui-checkbox-group') !== null\n  }\n\n  setGroupDisabled(disabled: boolean) {\n    this._groupDisabled = disabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (this._internals) return\n    this._internals = this.attachInternals()\n    if (this.hasAttribute('checked')) {\n      this._checked = true\n    }\n    this._syncFormValue()\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked')\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  override updated() {\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || 'on' : null)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请选择此项')\n  }\n\n  // 用户点击切换\n  private handleClick() {\n    if (this._isDisabled) return\n    const old = this._checked\n    this._checked = !old\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n    // group-managed 时事件不冒泡/不组合，由 group 统一派发一次 host 事件，避免同名事件外泄\n    const opts: EventInit = this._isManagedByGroup\n      ? { bubbles: false, composed: false }\n      : { bubbles: true, composed: true }\n    this.dispatchEvent(new Event('input', opts))\n    this.dispatchEvent(new Event('change', opts))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-checkbox': true,\n      'is-checked': this._checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <label\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"checkbox\"\n        aria-checked=${String(this._checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <span class=\"wui-checkbox-box\">\n          <span class=\"wui-checkbox-icon\"\n            ><web-ui-icon .icon=${heroiconsCheck16Solid} size=\"18\" color=\"#fff\"></web-ui-icon\n          ></span>\n        </span>\n        <span class=\"wui-checkbox-label\"><slot></slot></span>\n      </label>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-checkbox': WebUiCheckbox\n  }\n}\n"],"mappings":"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"}

package/dist/components/checkbox-group/index.js

@@ -26,10 +26,10 @@ var c = class extends n {
 	connectedCallback() {
 		super.connectedCallback(), this._internals ||= this.attachInternals();
 		let e = this.getAttribute("value");
-		e !== null && (this.value = e.split(",").filter(Boolean)), this._initialValue = [...this._value], this.addEventListener("change", this._handleChildChange);
+		e !== null && (this.value = e.split(",").filter(Boolean)), this._initialValue = [...this._value], this.addEventListener("change", this._handleChildChange, !0);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("change", this._handleChildChange);
+		super.disconnectedCallback(), this.removeEventListener("change", this._handleChildChange, !0);
 	}
 	updated(e) {
 		(e.has("value") || e.has("disabled") || e.has("_formDisabled")) && this._syncValueToChildren(), this._syncFormValue(), this._syncValidity();

package/dist/components/checkbox-group/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { WebUiCheckbox } from '../checkbox'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox-group')\nexport class WebUiCheckboxGroup extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  @state() private _value: string[] = []\n  @state() private _formDisabled = false\n  private _internals?: ElementInternals\n  private _initialValue: string[] = []\n\n  get value(): string[] {\n    return this._value\n  }\n\n  set value(v: string[]) {\n    const old = this._value\n    this._value = [...v]\n    this._syncFormValue()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (!this._internals) this._internals = this.attachInternals()\n    const attributeValue = this.getAttribute('value')\n    if (attributeValue !== null) this.value = attributeValue.split(',').filter(Boolean)\n    this._initialValue = [...this._value]\n    this.addEventListener('change', this._handleChildChange)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('change', this._handleChildChange)\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('disabled') || changed.has('_formDisabled')) this._syncValueToChildren()\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  formResetCallback() {\n    this.value = [...this._initialValue]\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  private _syncFormValue() {\n    if (!this._internals) return\n    if (!this.name || this._value.length === 0) {\n      this._internals.setFormValue?.(null)\n      return\n    }\n    const formData = new FormData()\n    this._value.forEach(value => formData.append(this.name, value))\n    this._internals.setFormValue?.(formData)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value.length > 0) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请至少选择一项')\n  }\n\n  private _syncValueToChildren() {\n    this.querySelectorAll<WebUiCheckbox>('web-ui-checkbox').forEach(checkbox => {\n      checkbox.checked = this._value.includes(checkbox.value)\n      checkbox.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-checkbox')) return\n\n    const checkbox = target as WebUiCheckbox\n    const next = checkbox.checked\n      ? [...new Set([...this._value, checkbox.value])]\n      : this._value.filter(v => v !== checkbox.value)\n\n    this.value = next\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private _handleSlotChange() {\n    this._syncValueToChildren()\n  }\n\n  override render() {\n    return html`<div class=\"wui-checkbox-group\"><slot @slotchange=${this._handleSlotChange}></slot></div>`\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-checkbox-group': WebUiCheckboxGroup\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { WebUiCheckbox } from '../checkbox'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox-group')\nexport class WebUiCheckboxGroup extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  @state() private _value: string[] = []\n  @state() private _formDisabled = false\n  private _internals?: ElementInternals\n  private _initialValue: string[] = []\n\n  get value(): string[] {\n    return this._value\n  }\n\n  set value(v: string[]) {\n    const old = this._value\n    this._value = [...v]\n    this._syncFormValue()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (!this._internals) this._internals = this.attachInternals()\n    const attributeValue = this.getAttribute('value')\n    if (attributeValue !== null) this.value = attributeValue.split(',').filter(Boolean)\n    this._initialValue = [...this._value]\n    // group-managed 子项以 bubbles:false 派发 change，须用 capture 相位才能观察到子项事件，\n    // 同时该事件不会冒泡到 group 外部的同名监听器\n    this.addEventListener('change', this._handleChildChange, true)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('change', this._handleChildChange, true)\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('disabled') || changed.has('_formDisabled')) this._syncValueToChildren()\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  formResetCallback() {\n    this.value = [...this._initialValue]\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  private _syncFormValue() {\n    if (!this._internals) return\n    if (!this.name || this._value.length === 0) {\n      this._internals.setFormValue?.(null)\n      return\n    }\n    const formData = new FormData()\n    this._value.forEach(value => formData.append(this.name, value))\n    this._internals.setFormValue?.(formData)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value.length > 0) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请至少选择一项')\n  }\n\n  private _syncValueToChildren() {\n    this.querySelectorAll<WebUiCheckbox>('web-ui-checkbox').forEach(checkbox => {\n      checkbox.checked = this._value.includes(checkbox.value)\n      checkbox.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-checkbox')) return\n\n    const checkbox = target as WebUiCheckbox\n    const next = checkbox.checked\n      ? [...new Set([...this._value, checkbox.value])]\n      : this._value.filter(v => v !== checkbox.value)\n\n    this.value = next\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private _handleSlotChange() {\n    this._syncValueToChildren()\n  }\n\n  override render() {\n    return html`<div class=\"wui-checkbox-group\"><slot @slotchange=${this._handleSlotChange}></slot></div>`\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-checkbox-group': WebUiCheckboxGroup\n  }\n}\n"],"mappings":"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"}

package/dist/components/context-menu/index.d.ts

@@ -15,9 +15,9 @@ export declare class WebUiContextMenu extends LitElement {
     private _hoverCleanupFns;
     private _menu?;
     private readonly _scrollLock;
+    private readonly _userOpenChange;
     private _restoreFocusTarget?;
     private _shouldOpenInstantly;
-    /** 当前菜单是否打开 */
     get isOpen(): boolean;
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -26,15 +26,16 @@ export declare class WebUiContextMenu extends LitElement {
      * 在指定视口坐标打开菜单。
      * @param x 水平坐标（px）。
      * @param y 垂直坐标（px）。
-     * @returns 无返回值；打开后派发 `open-change` 事件。
+     * @returns 无返回值；命令式打开不派发 `open-change` 事件。
      */
     openAt(x: number, y: number): void;
     private _openAt;
     /**
      * 关闭菜单。
-     * @returns 无返回值；关闭后派发 `open-change` 事件。
+     * @returns 无返回值；命令式关闭不派发 `open-change` 事件。
      */
     close(): void;
+    private readonly _closeFromUser;
     private _positionMenu;
     private _focusFirstItem;
     private _setupMenuItems;