@greypan/web-ui 3.0.1 → 4.0.0

package/dist/components/autocomplete/style.js

@@ -1,5 +1,5 @@
 //#region src/components/autocomplete/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.input-wrapper{box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-button-size,40px);height:var(--wui-button-size,40px);transition:border-color var(--wui-duration-focus,.2s), box-shadow var(--wui-duration-focus,.2s);border-radius:2147483647px;align-items:center;gap:8px;padding:0 12px;display:flex}:host([focused]) .input-wrapper{--wui-glass-shadow:var(--wui-shadow-glass,0 2px 16px #0000000f), 0 0 0 3px var(--wui-focus-ring,#08f6);border-color:var(--wui-color-border-strong,#006ee680)}.autocomplete-input{min-width:0;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}.autocomplete-input::placeholder{color:var(--wui-color-text-muted,#6a6a6a)}.autocomplete-input:disabled{cursor:not-allowed;opacity:.4}.autocomplete-overlay{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);--wui-duration-overlay-enter:var(--wui-duration-menu-enter,.14s);--wui-duration-overlay-exit:var(--wui-duration-menu-exit,.1s);--wui-overlay-min-width:200px;z-index:var(--wui-layer-local-overlay,1);box-sizing:border-box;min-width:var(--wui-overlay-min-width,120px);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;max-width:500px;position:absolute;overflow:hidden}.autocomplete-overlay.portal{z-index:var(--wui-layer-menu,100);position:fixed}.autocomplete-overlay.hidden{display:none}.autocomplete-scroll{max-height:320px;overflow-y:auto}.autocomplete-content{padding:4px}.autocomplete-empty{font-size:var(--wui-font-size,14px);color:var(--wui-color-text-muted,#6a6a6a);text-align:center;padding:8px 12px}::slotted(web-ui-option[data-filtered]),.autocomplete-content web-ui-option[data-filtered],:host([portal]) .autocomplete-overlay{display:none}.autocomplete-a11y-only,.autocomplete-a11y-listbox{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
+var e = "*,:before,:after{box-sizing:border-box}:host{--wui-autocomplete-max-width:500px;display:inline-block}:host([disabled]){cursor:not-allowed;opacity:.4}.input-wrapper{box-sizing:border-box;width:var(--wui-input-width,200px);min-width:var(--wui-control-size,40px);height:var(--wui-control-size,40px);transition:border-color var(--wui-duration-focus,.2s), box-shadow var(--wui-duration-focus,.2s);border-radius:2147483647px;align-items:center;gap:8px;padding:0 12px;display:flex}:host([focused]) .input-wrapper{--wui-internal-glass-focus-ring:inset 0 0 0 1px var(--wui-color-accent,#08f), 0 0 0 var(--wui-focus-ring-width,3px) var(--wui-color-focus-ring,#08f6)}.autocomplete-input{min-width:0;height:100%;font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background:0 0;border:none;outline:none;flex:1;margin:0;padding:0}.autocomplete-input::placeholder{color:var(--wui-color-text-secondary,#6a6a6a)}.autocomplete-input:disabled{cursor:not-allowed;opacity:.4}.autocomplete-overlay{--wui-option-check-display:none;--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-internal-duration-overlay-enter:var(--wui-duration-menu-enter,.14s);--wui-internal-duration-overlay-exit:var(--wui-duration-menu-exit,.1s);z-index:var(--wui-layer-inline-overlay,1);box-sizing:border-box;min-width:var(--wui-overlay-min-width,200px);max-width:var(--wui-autocomplete-max-width,500px);background-color:var(--wui-color-surface-overlay,#f6f6f6d1);border-radius:20px;position:absolute;overflow:hidden}.autocomplete-overlay.portal{z-index:var(--wui-layer-menu,100);position:fixed}.autocomplete-overlay.hidden{display:none}.autocomplete-scroll{max-height:320px;overflow-y:auto}.autocomplete-content{padding:4px}.autocomplete-empty{font-size:var(--wui-font-size,14px);color:var(--wui-color-text-secondary,#6a6a6a);text-align:center;padding:8px 12px}::slotted(web-ui-option[data-filtered]),.autocomplete-content web-ui-option[data-filtered],:host([portal]) .autocomplete-overlay{display:none}.autocomplete-a11y-only,.autocomplete-a11y-listbox{white-space:nowrap;clip-path:inset(50%);border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/autocomplete/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([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.input-wrapper {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  box-sizing: border-box;\n  width: var(--wui-input-width, 200px);\n  min-width: var(--wui-button-size, 40px);\n  height: var(--wui-button-size, 40px);\n  padding: 0 12px;\n  border-radius: calc(infinity * 1px);\n\n  transition:\n    border-color var(--wui-duration-focus, 200ms),\n    box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .input-wrapper {\n  --wui-glass-shadow:\n    var(--wui-shadow-glass, 0 2px 16px rgb(0 0 0 / 0.06)), 0 0 0 3px var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n  border-color: var(--wui-color-border-strong, rgb(0 110 230 / 0.5));\n}\n\n.autocomplete-input {\n  flex: 1;\n\n  min-width: 0;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  /* 表单控件不继承字体；显式继承以对齐宿主排版，避免 UA 默认字体差异 */\n  font: inherit;\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text, #1b1b1b);\n\n  background: transparent;\n  outline: none;\n\n  &::placeholder {\n    color: var(--wui-color-text-muted, #6a6a6a);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n/* ===== 浮层（glass 样式参考 select） ===== */\n\n.autocomplete-overlay {\n  --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-duration-overlay-enter: var(--wui-duration-menu-enter, 140ms);\n  --wui-duration-overlay-exit: var(--wui-duration-menu-exit, 100ms);\n  --wui-overlay-min-width: 200px;\n  position: absolute;\n  z-index: var(--wui-layer-local-overlay, 1);\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n  min-width: var(--wui-overlay-min-width, 120px);\n  max-width: 500px;\n  border-radius: 20px;\n\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n\n  &.portal {\n    position: fixed;\n    z-index: var(--wui-layer-menu, 100);\n  }\n\n  &.hidden {\n    display: none;\n  }\n}\n\n.autocomplete-scroll {\n  overflow-y: auto;\n  max-height: 320px;\n}\n\n.autocomplete-content {\n  padding: 4px;\n}\n\n.autocomplete-empty {\n  padding: 8px 12px;\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text-muted, #6a6a6a);\n  text-align: center;\n}\n\n/* 非匹配候选隐藏：本地模式经 slot 投影，portal 模式为面板直接子元素 */\n::slotted(web-ui-option[data-filtered]) {\n  display: none;\n}\n\n.autocomplete-content web-ui-option[data-filtered] {\n  display: none;\n}\n\n:host([portal]) .autocomplete-overlay {\n  display: none;\n}\n\n/* Shadow DOM idref 不能跨越 Portal 或 light DOM；保留同根可访问的语义镜像。 */\n.autocomplete-a11y-only,\n.autocomplete-a11y-listbox {\n  position: absolute;\n\n  overflow: hidden;\n\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n\n  white-space: nowrap;\n\n  clip-path: inset(50%);\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/autocomplete/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-autocomplete-max-width: 500px;\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.input-wrapper {\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  box-sizing: border-box;\n  width: var(--wui-input-width, 200px);\n  min-width: var(--wui-control-size, 40px);\n  height: var(--wui-control-size, 40px);\n  padding: 0 12px;\n  border-radius: calc(infinity * 1px);\n\n  transition:\n    border-color var(--wui-duration-focus, 200ms),\n    box-shadow var(--wui-duration-focus, 200ms);\n}\n\n:host([focused]) .input-wrapper {\n  --wui-internal-glass-focus-ring:\n    inset 0 0 0 1px var(--wui-color-accent, #08f),\n    0 0 0 var(--wui-focus-ring-width, 3px) var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n}\n\n.autocomplete-input {\n  flex: 1;\n\n  min-width: 0;\n  height: 100%;\n  margin: 0;\n  padding: 0;\n  border: none;\n\n  /* 表单控件不继承字体；显式继承以对齐宿主排版，避免 UA 默认字体差异 */\n  font: inherit;\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text, #1b1b1b);\n\n  background: transparent;\n  outline: none;\n\n  &::placeholder {\n    color: var(--wui-color-text-secondary, #6a6a6a);\n  }\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n}\n\n/* ===== 浮层（glass 样式参考 select） ===== */\n\n.autocomplete-overlay {\n  /* autocomplete 不表示选中状态；隐藏共享 option 的勾选图标及其布局占位 */\n  --wui-option-check-display: none;\n  --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-internal-duration-overlay-enter: var(--wui-duration-menu-enter, 140ms);\n  --wui-internal-duration-overlay-exit: var(--wui-duration-menu-exit, 100ms);\n  position: absolute;\n  z-index: var(--wui-layer-inline-overlay, 1);\n\n  overflow: hidden;\n\n  box-sizing: border-box;\n  min-width: var(--wui-overlay-min-width, 200px);\n  max-width: var(--wui-autocomplete-max-width, 500px);\n  border-radius: 20px;\n\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n\n  &.portal {\n    position: fixed;\n    z-index: var(--wui-layer-menu, 100);\n  }\n\n  &.hidden {\n    display: none;\n  }\n}\n\n.autocomplete-scroll {\n  overflow-y: auto;\n  max-height: 320px;\n}\n\n.autocomplete-content {\n  padding: 4px;\n}\n\n.autocomplete-empty {\n  padding: 8px 12px;\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  text-align: center;\n}\n\n/* 非匹配候选隐藏：本地模式经 slot 投影，portal 模式为面板直接子元素 */\n::slotted(web-ui-option[data-filtered]) {\n  display: none;\n}\n\n.autocomplete-content web-ui-option[data-filtered] {\n  display: none;\n}\n\n:host([portal]) .autocomplete-overlay {\n  display: none;\n}\n\n/* Shadow DOM idref 不能跨越 Portal 或 light DOM；保留同根可访问的语义镜像。 */\n.autocomplete-a11y-only,\n.autocomplete-a11y-listbox {\n  position: absolute;\n\n  overflow: hidden;\n\n  width: 1px;\n  height: 1px;\n  margin: -1px;\n  padding: 0;\n  border: 0;\n\n  white-space: nowrap;\n\n  clip-path: inset(50%);\n}\n"],"mappings":""}

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

@@ -12,7 +12,6 @@ export declare class WebUiAvatar extends LitElement {
     private _shape;
     private _imgError;
     private _hasDefaultSlot;
-    connectedCallback(): void;
     private _checkSlot;
     private get _initials();
     private get _iconSize();

package/dist/components/avatar/index.js

@@ -1,4 +1,4 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import "../icon/index.js";
 import t from "../../icons/generated/lucide-user.js";
 import n from "../../assets/glass.js";
@@ -34,11 +34,6 @@ var p = ["circle", "square"], m = class extends a {
 	get shape() {
 		return this._shape;
 	}
-	connectedCallback() {
-		super.connectedCallback(), this.updateComplete.then(() => {
-			this.shadowRoot?.querySelector("slot:not([name])")?.addEventListener("slotchange", () => this._checkSlot());
-		});
-	}
 	_checkSlot() {
 		let e = this.shadowRoot?.querySelector("slot:not([name])"), t = e instanceof HTMLSlotElement && e.assignedElements().length > 0;
 		this._hasDefaultSlot !== t && (this._hasDefaultSlot = t);
@@ -76,16 +71,16 @@ var p = ["circle", "square"], m = class extends a {
         style="width:${this.size}px;height:${this.size}px;--wui-avatar-size:${this.size}px"
       >
         ${this._showImage ? o`<img
-              class="avatar-img"
-              src=${this.src}
-              alt=${d(this.alt || void 0)}
-              @error=${this._onImgError}
-            />` : ""}
+                class="avatar-img"
+                src=${this.src}
+                alt=${d(this.alt || void 0)}
+                @error=${this._onImgError}
+              />` : ""}
         <slot @slotchange=${this._checkSlot}></slot>
         ${this._showFallback && this._initials ? o`<span class="avatar-fallback avatar-initials">${this._initials}</span>` : ""}
         ${this._showFallback && !this._initials ? o`<span class="avatar-fallback"
-              ><web-ui-icon .icon=${t} .size=${this._iconSize}></web-ui-icon
-            ></span>` : ""}
+                ><web-ui-icon .icon=${t} .size=${this._iconSize}></web-ui-icon
+              ></span>` : ""}
       </div>
     `;
 	}

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/avatar/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'\n\n// 注册 web-ui-icon（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideUser } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_SHAPES = ['circle', 'square'] as const\n\n@customElement('web-ui-avatar')\nexport class WebUiAvatar extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  set src(value: string) {\n    const old = this._src\n    this._src = value\n    if (old !== value) {\n      this._imgError = false\n      this.requestUpdate('src', old)\n    }\n  }\n\n  get src(): string {\n    return this._src\n  }\n\n  private _src = ''\n\n  @property({ type: String, reflect: true }) alt = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Number, reflect: true }) size = 40\n\n  @property({ type: String, reflect: true })\n  set shape(value: string) {\n    const normalized = normalizeLiteral(value, ALLOWED_SHAPES, 'circle')\n    if (this._shape !== normalized) {\n      const old = this._shape\n      this._shape = normalized\n      this.requestUpdate('shape', old)\n    }\n    // 外部 setAttribute 非法值后，宿主 attribute 与规范化后的值不同步，立即修正\n    if (this.getAttribute('shape') !== normalized) {\n      this.setAttribute('shape', normalized)\n    }\n  }\n\n  get shape(): 'circle' | 'square' {\n    return this._shape\n  }\n\n  private _shape: 'circle' | 'square' = 'circle'\n\n  @state() private _imgError = false\n  @state() private _hasDefaultSlot = false\n\n  override connectedCallback() {\n    super.connectedCallback()\n    void this.updateComplete.then(() => {\n      this.shadowRoot?.querySelector('slot:not([name])')?.addEventListener('slotchange', () => this._checkSlot())\n    })\n  }\n\n  private _checkSlot() {\n    const slot = this.shadowRoot?.querySelector('slot:not([name])')\n    const has = slot instanceof HTMLSlotElement && slot.assignedElements().length > 0\n    if (this._hasDefaultSlot !== has) {\n      this._hasDefaultSlot = has\n    }\n  }\n\n  private get _initials(): string {\n    const words = this.name.trim().split(/\\s+/)\n    return words\n      .slice(0, 2)\n      .map(w => Array.from(w)[0])\n      .join('')\n      .toUpperCase()\n  }\n\n  private get _iconSize(): number {\n    return Math.round(this.size * 0.4)\n  }\n\n  private get _showImage(): boolean {\n    return !!this.src && !this._imgError\n  }\n\n  private get _showFallback(): boolean {\n    return !this._showImage && !this._hasDefaultSlot\n  }\n\n  private _onImgError() {\n    this._imgError = true\n  }\n\n  private get _ariaLabel(): string | undefined {\n    if (this.alt) return this.alt\n    if (this.name) return this.name\n    return undefined\n  }\n\n  override render() {\n    const isDecorative = !this._ariaLabel\n\n    return html`\n      <div\n        class=${classMap({ 'avatar-inner': true, 'wui-glass': this._showFallback })}\n        role=${isDecorative ? 'presentation' : 'img'}\n        aria-label=${ifDefined(this._ariaLabel)}\n        aria-hidden=${isDecorative ? 'true' : undefined}\n        style=\"width:${this.size}px;height:${this.size}px;--wui-avatar-size:${this.size}px\"\n      >\n        ${this._showImage\n          ? html`<img\n              class=\"avatar-img\"\n              src=${this.src}\n              alt=${ifDefined(this.alt || undefined)}\n              @error=${this._onImgError}\n            />`\n          : ''}\n        <slot @slotchange=${this._checkSlot}></slot>\n        ${this._showFallback && this._initials\n          ? html`<span class=\"avatar-fallback avatar-initials\">${this._initials}</span>`\n          : ''}\n        ${this._showFallback && !this._initials\n          ? html`<span class=\"avatar-fallback\"\n              ><web-ui-icon .icon=${lucideUser} .size=${this._iconSize}></web-ui-icon\n            ></span>`\n          : ''}\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-avatar': WebUiAvatar\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/avatar/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'\n\n// 注册 web-ui-icon（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideUser } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_SHAPES = ['circle', 'square'] as const\n\n@customElement('web-ui-avatar')\nexport class WebUiAvatar extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  set src(value: string) {\n    const old = this._src\n    this._src = value\n    if (old !== value) {\n      this._imgError = false\n      this.requestUpdate('src', old)\n    }\n  }\n\n  get src(): string {\n    return this._src\n  }\n\n  private _src = ''\n\n  @property({ type: String, reflect: true }) alt = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Number, reflect: true }) size = 40\n\n  @property({ type: String, reflect: true })\n  set shape(value: string) {\n    const normalized = normalizeLiteral(value, ALLOWED_SHAPES, 'circle')\n    if (this._shape !== normalized) {\n      const old = this._shape\n      this._shape = normalized\n      this.requestUpdate('shape', old)\n    }\n    // 外部 setAttribute 非法值后，宿主 attribute 与规范化后的值不同步，立即修正\n    if (this.getAttribute('shape') !== normalized) {\n      this.setAttribute('shape', normalized)\n    }\n  }\n\n  get shape(): 'circle' | 'square' {\n    return this._shape\n  }\n\n  private _shape: 'circle' | 'square' = 'circle'\n\n  @state() private _imgError = false\n  @state() private _hasDefaultSlot = false\n\n  private _checkSlot() {\n    const slot = this.shadowRoot?.querySelector('slot:not([name])')\n    const has = slot instanceof HTMLSlotElement && slot.assignedElements().length > 0\n    if (this._hasDefaultSlot !== has) {\n      this._hasDefaultSlot = has\n    }\n  }\n\n  private get _initials(): string {\n    const words = this.name.trim().split(/\\s+/)\n    return words\n      .slice(0, 2)\n      .map(w => Array.from(w)[0])\n      .join('')\n      .toUpperCase()\n  }\n\n  private get _iconSize(): number {\n    return Math.round(this.size * 0.4)\n  }\n\n  private get _showImage(): boolean {\n    return !!this.src && !this._imgError\n  }\n\n  private get _showFallback(): boolean {\n    return !this._showImage && !this._hasDefaultSlot\n  }\n\n  private _onImgError() {\n    this._imgError = true\n  }\n\n  private get _ariaLabel(): string | undefined {\n    if (this.alt) return this.alt\n    if (this.name) return this.name\n    return undefined\n  }\n\n  override render() {\n    const isDecorative = !this._ariaLabel\n\n    return html`\n      <div\n        class=${classMap({ 'avatar-inner': true, 'wui-glass': this._showFallback })}\n        role=${isDecorative ? 'presentation' : 'img'}\n        aria-label=${ifDefined(this._ariaLabel)}\n        aria-hidden=${isDecorative ? 'true' : undefined}\n        style=\"width:${this.size}px;height:${this.size}px;--wui-avatar-size:${this.size}px\"\n      >\n        ${\n          this._showImage\n            ? html`<img\n                class=\"avatar-img\"\n                src=${this.src}\n                alt=${ifDefined(this.alt || undefined)}\n                @error=${this._onImgError}\n              />`\n            : ''\n        }\n        <slot @slotchange=${this._checkSlot}></slot>\n        ${\n          this._showFallback && this._initials\n            ? html`<span class=\"avatar-fallback avatar-initials\">${this._initials}</span>`\n            : ''\n        }\n        ${\n          this._showFallback && !this._initials\n            ? html`<span class=\"avatar-fallback\"\n                ><web-ui-icon .icon=${lucideUser} .size=${this._iconSize}></web-ui-icon\n              ></span>`\n            : ''\n        }\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-avatar': WebUiAvatar\n  }\n}\n"],"mappings":"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"}

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

@@ -1,4 +1,4 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import "../icon/index.js";
 import t from "../../icons/generated/lucide-arrow-up-to-line.js";
 import { normalizeLiteral as n, normalizeNumber as r } from "../../shared/normalize/index.js";

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

@@ -1,5 +1,5 @@
 //#region src/components/back-top/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{--wui-shadow-glass:var(--wui-shadow-pop);display:block}:host([container-mode]){bottom:var(--web-ui-back-top-bottom,20px);position:sticky}.back-top-inner{pointer-events:none;position:var(--web-ui-back-top-position,fixed);z-index:var(--web-ui-back-top-z-index,var(--wui-layer-auxiliary,20));top:var(--web-ui-back-top-top,auto);right:var(--web-ui-back-top-right,20px);bottom:var(--web-ui-back-top-bottom,20px);left:var(--web-ui-back-top-left,auto);visibility:hidden;opacity:0}.back-top-inner .back-top-inner:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px;border-radius:2147483647px}:host([container-mode]) .back-top-inner{margin-right:var(--web-ui-back-top-right,20px);margin-left:var(--web-ui-back-top-left,auto);position:static}:host([visible]) .back-top-inner{pointer-events:auto;visibility:visible;opacity:1}";
+var e = "*,:before,:after{box-sizing:border-box}:host{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);display:block}:host([container-mode]){bottom:var(--wui-back-top-bottom,20px);position:sticky}.back-top-inner{pointer-events:none;position:var(--wui-back-top-position,fixed);z-index:var(--wui-back-top-z-index,var(--wui-layer-auxiliary,20));top:var(--wui-back-top-top,auto);right:var(--wui-back-top-right,20px);bottom:var(--wui-back-top-bottom,20px);left:var(--wui-back-top-left,auto);visibility:hidden;opacity:0}.back-top-inner .back-top-inner:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px;border-radius:2147483647px}:host([container-mode]) .back-top-inner{margin-right:var(--wui-back-top-right,20px);margin-left:var(--wui-back-top-left,auto);position:static}:host([visible]) .back-top-inner{pointer-events:auto;visibility:visible;opacity:1}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/back-top/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-shadow-glass: var(--wui-shadow-pop);\n  display: block;\n}\n\n/* 容器模式：scrollTarget 为元素时按钮悬浮于容器底部（元素需置于容器内部），\n   横向偏移沿用 --web-ui-back-top-left/right，纵向沿用 --web-ui-back-top-bottom */\n:host([container-mode]) {\n  position: sticky;\n  bottom: var(--web-ui-back-top-bottom, 20px);\n}\n\n.back-top-inner {\n  pointer-events: none;\n\n  position: var(--web-ui-back-top-position, fixed);\n  z-index: var(--web-ui-back-top-z-index, var(--wui-layer-auxiliary, 20));\n  top: var(--web-ui-back-top-top, auto);\n  right: var(--web-ui-back-top-right, 20px);\n  bottom: var(--web-ui-back-top-bottom, 20px);\n  left: var(--web-ui-back-top-left, auto);\n\n  visibility: hidden;\n  opacity: 0;\n\n  .back-top-inner:focus-visible {\n    border-radius: calc(infinity * 1px);\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n/* 容器模式下按钮脱离 fixed，改为流内布局并按偏移变量左/右对齐 */\n:host([container-mode]) .back-top-inner {\n  position: static;\n  margin-right: var(--web-ui-back-top-right, 20px);\n  margin-left: var(--web-ui-back-top-left, auto);\n}\n\n:host([visible]) .back-top-inner {\n  pointer-events: auto;\n  visibility: visible;\n  opacity: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/back-top/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  display: block;\n}\n\n/* 容器模式：scrollTarget 为元素时按钮悬浮于容器底部（元素需置于容器内部），\n   横向偏移沿用 --wui-back-top-left/right，纵向沿用 --wui-back-top-bottom */\n:host([container-mode]) {\n  position: sticky;\n  bottom: var(--wui-back-top-bottom, 20px);\n}\n\n.back-top-inner {\n  pointer-events: none;\n\n  position: var(--wui-back-top-position, fixed);\n  z-index: var(--wui-back-top-z-index, var(--wui-layer-auxiliary, 20));\n  top: var(--wui-back-top-top, auto);\n  right: var(--wui-back-top-right, 20px);\n  bottom: var(--wui-back-top-bottom, 20px);\n  left: var(--wui-back-top-left, auto);\n\n  visibility: hidden;\n  opacity: 0;\n\n  .back-top-inner:focus-visible {\n    border-radius: calc(infinity * 1px);\n    outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n/* 容器模式下按钮脱离 fixed，改为流内布局并按偏移变量左/右对齐 */\n:host([container-mode]) .back-top-inner {\n  position: static;\n  margin-right: var(--wui-back-top-right, 20px);\n  margin-left: var(--wui-back-top-left, auto);\n}\n\n:host([visible]) .back-top-inner {\n  pointer-events: auto;\n  visibility: visible;\n  opacity: 1;\n}\n"],"mappings":""}

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

@@ -16,6 +16,7 @@ export declare class WebUiBadge extends LitElement {
     get placement(): 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left';
     private _placement;
     private _hasContent;
+    private readonly _handleSlotChange;
     connectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
 }

package/dist/components/badge/index.js

@@ -1,4 +1,4 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import t from "../../assets/glass.js";
 import { normalizeLiteral as n, normalizeNumber as r } from "../../shared/normalize/index.js";
 import i from "./style.js";
@@ -15,7 +15,9 @@ var m = [
 	"bottom-left"
 ], h = 2 ** 53 - 1, g = class extends a {
 	constructor(...e) {
-		super(...e), this._count = 0, this._max = 99, this.dot = !1, this.showZero = !1, this.badgeHidden = !1, this.offsetX = 0, this.offsetY = 0, this._placement = "top-right", this._hasContent = !1;
+		super(...e), this._count = 0, this._max = 99, this.dot = !1, this.showZero = !1, this.badgeHidden = !1, this.offsetX = 0, this.offsetY = 0, this._placement = "top-right", this._hasContent = !1, this._handleSlotChange = () => {
+			this._hasContent = this.children.length > 0;
+		};
 	}
 	static {
 		this.styles = [s(t), s(i)];
@@ -54,11 +56,7 @@ var m = [
 		return this._placement;
 	}
 	connectedCallback() {
-		super.connectedCallback(), this._hasContent = this.children.length > 0, this.updateComplete.then(() => {
-			this.shadowRoot?.querySelector("slot")?.addEventListener("slotchange", () => {
-				this._hasContent = this.children.length > 0;
-			});
-		});
+		super.connectedCallback(), this._hasContent = this.children.length > 0;
 	}
 	render() {
 		let e = this.badgeHidden ? !1 : this.dot ? !0 : this.count > 0 || this.showZero, t = this.dot ? "" : this.count > this.max ? `${this.max}+` : String(this.count), n = this.dot ? "未读" : this.count > 0 ? `${this.count} 条未读消息` : this.showZero ? "无未读消息" : void 0, r = {
@@ -74,14 +72,14 @@ var m = [
 		};
 		return o`
       <div class=${f(r)}>
-        <slot></slot>
+        <slot @slotchange=${this._handleSlotChange}></slot>
         ${e ? o`<span
-              class=${f(i)}
-              style=${p(a)}
-              role="status"
-              aria-label=${d(n)}
-              >${t}</span
-            >` : ""}
+                class=${f(i)}
+                style=${p(a)}
+                role="status"
+                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\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-badge': WebUiBadge\n  }\n}\n"],"mappings":";;;;;;;;;;AAWA,IAAM,IAAqB;CAAC;CAAa;CAAY;CAAgB;AAAa,GAC5E,iBAGO,IAAN,cAAyB,EAAW;;EAkEV,aA9Cd,KAAA,SAAA,GAmBF,KAAA,OAAA,IAEmC,KAAA,MAAA,IAC6B,KAAA,WAAA,IACM,KAAA,cAAA,IACT,KAAA,UAAA,GACA,KAAA,UAAA,GAmBI,KAAA,aAAA,aAEjD,KAAA,cAAA;;;EAjEN,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,MAAM,GAAe;EACvB,IAAM,IAAa,EAAgB,GAAO,GAAG,GAAU,CAAC;EACxD,IAAI,KAAK,WAAW,GAAY;GAC9B,IAAM,IAAM,KAAK;GAEjB,AADA,KAAK,SAAS,GACd,KAAK,cAAc,SAAS,CAAG;EACjC;EACA,AAAI,KAAK,aAAa,OAAO,MAAM,OAAO,CAAU,KAClD,KAAK,aAAa,SAAS,OAAO,CAAU,CAAC;CAEjD;CAEA,IAAI,QAAgB;EAClB,OAAO,KAAK;CACd;CAIA,IACI,IAAI,GAAe;EACrB,IAAM,IAAa,EAAgB,GAAO,GAAG,GAAU,EAAE;EACzD,IAAI,KAAK,SAAS,GAAY;GAC5B,IAAM,IAAM,KAAK;GAEjB,AADA,KAAK,OAAO,GACZ,KAAK,cAAc,OAAO,CAAG;EAC/B;EACA,AAAI,KAAK,aAAa,KAAK,MAAM,OAAO,CAAU,KAChD,KAAK,aAAa,OAAO,OAAO,CAAU,CAAC;CAE/C;CAEA,IAAI,MAAc;EAChB,OAAO,KAAK;CACd;CAUA,IACI,UAAU,GAAe;EAC3B,IAAM,IAAa,EAAiB,GAAO,GAAoB,WAAW;EAC1E,IAAI,KAAK,eAAe,GAAY;GAClC,IAAM,IAAM,KAAK;GAEjB,AADA,KAAK,aAAa,GAClB,KAAK,cAAc,aAAa,CAAG;EACrC;EACA,AAAI,KAAK,aAAa,WAAW,MAAM,KACrC,KAAK,aAAa,aAAa,CAAU;CAE7C;CAEA,IAAI,YAAuE;EACzE,OAAO,KAAK;CACd;CAMA,oBAA6B;EAG3B,AAFA,MAAM,kBAAkB,GACxB,KAAK,cAAc,KAAK,SAAS,SAAS,GAC1C,KAAU,eAAe,WAAW;GAClC,KAAK,YAAY,cAAc,MAAM,CAAC,EAAE,iBAAiB,oBAAoB;IAC3E,KAAK,cAAc,KAAK,SAAS,SAAS;GAC5C,CAAC;EACH,CAAC;CACH;CAEA,SAAkB;EAChB,IAAM,IAAY,KAAK,cAAc,KAAQ,KAAK,MAAM,KAAO,KAAK,QAAQ,KAAK,KAAK,UAChF,IAAU,KAAK,MAAM,KAAK,KAAK,QAAQ,KAAK,MAAM,GAAG,KAAK,IAAI,KAAK,OAAO,KAAK,KAAK,GACpF,IAAY,KAAK,MACnB,OACA,KAAK,QAAQ,IACX,GAAG,KAAK,MAAM,UACd,KAAK,WACH,UACA,KAAA,GACF,IAAe;GAAE,iBAAiB;GAAM,uBAAuB,KAAK;EAAY,GAChF,IAAa;GAAE,OAAO;GAAM,aAAa,KAAK;GAAK,eAAe,KAAK;EAAY,GACnF,IAAa;GACjB,oBAAoB,GAAG,KAAK,QAAQ;GACpC,oBAAoB,GAAG,KAAK,QAAQ;EACtC;EAEA,OAAO,CAAI;mBACI,EAAS,CAAY,EAAE;;UAEhC,IACE,CAAI;sBACM,EAAS,CAAU,EAAE;sBACrB,EAAS,CAAU,EAAE;;2BAEhB,EAAU,CAAS,EAAE;iBAC/B,EAAQ;iBAEb,GAAG;;;CAGb;AACF;AA3GG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,IAAA,GAmBxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,IAAA,GAmBxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,OAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAY,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACjE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;CAAM,WAAW;AAAe,CAAC,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GACpE,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAW,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAC/D,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;CAAM,WAAW;AAAW,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GAE/D,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAmBxC,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,eAAA,KAAA,CAAA,GAnER,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
+{"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  private readonly _handleSlotChange = () => {\n    this._hasContent = this.children.length > 0\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._hasContent = this.children.length > 0\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 @slotchange=${this._handleSlotChange}></slot>\n        ${\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        }\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

@@ -14,6 +14,8 @@ export declare class WebUiButton extends LitElement {
     set type(value: unknown);
     private _type;
     ariaLabel: string | null;
+    private readonly _groupManagement;
+    private get _groupContext();
     private get _sizeStyle();
     private handleClick;
     render(): import('lit').TemplateResult<1>;

package/dist/components/button/index.js

@@ -1,101 +1,114 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import "../icon/index.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 { 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";
+import { defineGroupManaged as i } from "../../shared/group-management/index.js";
+import a from "./style.js";
+import { LitElement as o, html as s, nothing as c, unsafeCSS as l } from "lit";
+import { customElement as u, property as d } from "lit/decorators.js";
+import { ifDefined as f } from "lit/directives/if-defined.js";
+import { classMap as p } from "lit/directives/class-map.js";
+import { styleMap as m } from "lit/directives/style-map.js";
 //#region src/components/button/index.ts
-var m = [
+var h = [
 	"primary",
 	"secondary",
 	"ghost",
 	"danger",
 	"glass"
-], h = [
+], g = [
 	"button",
 	"submit",
 	"reset"
-], g = class extends a {
+], _ = class extends o {
 	constructor(...e) {
-		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;
+		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, this._groupManagement = i(this, {
+			requestUpdate: () => this.requestUpdate(),
+			equals: (e, t) => e?.direction === t?.direction && e?.isLast === t?.isLast
+		}).make();
 	}
 	static {
-		this.styles = [c(n), c(i)];
+		this.styles = [l(n), l(a)];
 	}
 	get variant() {
 		return this._variant;
 	}
 	set variant(e) {
 		let t = this._variant;
-		this._variant = r(e, m, "glass"), this.requestUpdate("variant", t);
+		this._variant = r(e, h, "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);
+		this._type = r(e, g, "button"), this.requestUpdate("type", t);
+	}
+	get _groupContext() {
+		return this._groupManagement.getContext();
 	}
 	get _sizeStyle() {
-		if (!this.size) return {};
-		let [e, t] = this.size.split("x"), n = { "--wui-button-size": `${e}px` };
-		return t && (n["--wui-button-width"] = `${t}px`), n;
+		let e = this._groupContext ? "32" : this.size;
+		return e ? { "--wui-control-size": `${e}px` } : {};
 	}
 	handleClick(e) {
 		(this.disabled || this.loading) && (e.preventDefault(), e.stopPropagation());
 	}
 	render() {
-		let e = { "wui-glass": this.variant === "glass" && !this.hasAttribute("group") };
-		return o`
+		let e = this._groupContext, n = {
+			"wui-glass": this.variant === "glass" && !e,
+			"is-grouped": !!e
+		}, r = {
+			"group-divider": !0,
+			vertical: e?.direction === "vertical"
+		};
+		return s`
       <button
         type=${this.type}
-        aria-label=${d(this.ariaLabel)}
-        class=${f(e)}
-        style=${this.size ? p(this._sizeStyle) : s}
+        aria-label=${f(this.ariaLabel)}
+        class=${p(n)}
+        style=${Object.keys(this._sizeStyle).length > 0 ? m(this._sizeStyle) : c}
         ?disabled=${this.disabled || this.loading}
         @click=${this.handleClick}
       >
-        ${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>
-              <slot name="suffix"></slot>
-            `}
+        ${this.loading ? s`<web-ui-icon .icon=${t} spin></web-ui-icon>` : ""}
+        ${this.icon ? s`<slot></slot>` : s`
+                <slot name="prefix"></slot>
+                <span class="label"><slot></slot></span>
+                <slot name="suffix"></slot>
+              `}
       </button>
+      ${e && !e.isLast ? s`<span class=${p(r)} aria-hidden="true"></span>` : ""}
     `;
 	}
 };
-e([u({
+e([d({
 	type: String,
 	reflect: !0
-})], g.prototype, "variant", null), e([u({
+})], _.prototype, "variant", null), e([d({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "disabled", void 0), e([u({
+})], _.prototype, "disabled", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "loading", void 0), e([u({
+})], _.prototype, "loading", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "full", void 0), e([u({
+})], _.prototype, "full", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "icon", void 0), e([u({
+})], _.prototype, "icon", void 0), e([d({
 	type: String,
 	reflect: !0
-})], g.prototype, "size", void 0), e([u({
+})], _.prototype, "size", void 0), e([d({
 	type: String,
 	reflect: !0
-})], g.prototype, "type", null), e([u({
+})], _.prototype, "type", null), e([d({
 	type: String,
 	attribute: "aria-label"
-})], g.prototype, "ariaLabel", void 0), g = e([l("web-ui-button")], g);
+})], _.prototype, "ariaLabel", void 0), _ = e([u("web-ui-button")], _);
 //#endregion
-export { g as WebUiButton };
+export { _ 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 { 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"}
+{"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 { defineGroupManaged, type ButtonGroupContext } from '@/shared/group-management'\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  private readonly _groupManagement = defineGroupManaged<ButtonGroupContext>(this, {\n    requestUpdate: () => this.requestUpdate(),\n    equals: (a, b) => a?.direction === b?.direction && a?.isLast === b?.isLast\n  }).make()\n\n  private get _groupContext(): ButtonGroupContext | undefined {\n    return this._groupManagement.getContext()\n  }\n\n  private get _sizeStyle(): Record<string, string> {\n    // size 仅控制按钮高度；icon 模式下 min-width 同步为相同值，天然保持正方形。\n    const size = this._groupContext ? '32' : this.size\n    return size ? { '--wui-control-size': `${size}px` } : {}\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 groupContext = this._groupContext\n    const btnClass = {\n      'wui-glass': this.variant === 'glass' && !groupContext,\n      'is-grouped': Boolean(groupContext)\n    }\n    const dividerClass = {\n      'group-divider': true,\n      vertical: groupContext?.direction === 'vertical'\n    }\n\n    return html`\n      <button\n        type=${this.type}\n        aria-label=${ifDefined(this.ariaLabel)}\n        class=${classMap(btnClass)}\n        style=${Object.keys(this._sizeStyle).length > 0 ? 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        ${\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        }\n      </button>\n      ${\n        groupContext && !groupContext.isLast\n          ? html`<span class=${classMap(dividerClass)} aria-hidden=\"true\"></span>`\n          : ''\n      }\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button': WebUiButton\n  }\n}\n"],"mappings":"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"}

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{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%)}";
+var e = "*,:before,:after{box-sizing:border-box}:host{justify-content:center;align-items:center;display:inline-flex;position:relative}: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-control-size,40px);height:var(--wui-control-size,40px);padding:0 var(--wui-button-px,12px);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:var(--wui-focus-ring-width,3px) solid var(--wui-color-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{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-control,#dfdfdf);--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-surface-control,#dfdfdf) 90%, var(--wui-color-text,#1b1b1b));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-surface-control,#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:var(--wui-color-state-layer-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent));--wui-button-bg-active:var(--wui-color-state-layer-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:var(--wui-color-surface-glass-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, var(--wui-color-surface-glass,#fafafa57)));--wui-button-bg-active:var(--wui-color-surface-glass-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, var(--wui-color-surface-glass,#fafafa57)))}button.is-grouped{--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:var(--wui-color-state-layer-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent));--wui-button-bg-active:var(--wui-color-state-layer-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent))}.group-divider{z-index:1;background-color:var(--wui-color-border,#0000001a);width:1px;height:24px;position:absolute;top:50%;right:-2px;transform:translateY(-50%)}.group-divider.vertical{width:24px;height:1px;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  /* 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":""}
+{"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  position: relative;\n\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-control-size, 40px);\n  height: var(--wui-control-size, 40px);\n  padding: 0 var(--wui-button-px, 12px);\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: var(--wui-focus-ring-width, 3px) solid var(--wui-color-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  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-control, #dfdfdf);\n  --wui-button-bg-hover: color-mix(\n    in srgb,\n    var(--wui-color-surface-control, #dfdfdf) 90%,\n    var(--wui-color-text, #1b1b1b)\n  );\n  --wui-button-bg-active: color-mix(\n    in srgb,\n    var(--wui-color-surface-control, #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: var(\n    --wui-color-state-layer-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent)\n  );\n  --wui-button-bg-active: var(\n    --wui-color-state-layer-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent)\n  );\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\n  /* standalone glass 底色由 .wui-glass 提供；hover/active 需要还原玻璃底，避免被按钮状态色整块替换 */\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: var(\n    --wui-color-surface-glass-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n  );\n  --wui-button-bg-active: var(\n    --wui-color-surface-glass-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n  );\n}\n\n/* ===== Group context ===== */\n\nbutton.is-grouped {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: var(\n    --wui-color-state-layer-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent)\n  );\n  --wui-button-bg-active: var(\n    --wui-color-state-layer-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent)\n  );\n}\n\n.group-divider {\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  right: -2px;\n  transform: translateY(-50%);\n\n  width: 1px;\n  height: 24px;\n\n  background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n.group-divider.vertical {\n  top: auto;\n  right: auto;\n  bottom: -2px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  width: 24px;\n  height: 1px;\n}\n"],"mappings":""}

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

@@ -4,8 +4,7 @@ export declare class WebUiButtonGroup extends LitElement {
     get direction(): 'horizontal' | 'vertical';
     set direction(v: string);
     private _direction;
-    updated(): void;
-    private syncChildButtons;
+    private readonly _groupController;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -1,49 +1,45 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import t from "../../assets/glass.js";
 import { normalizeLiteral as n } from "../../shared/normalize/index.js";
+import { GroupController as r, defineGroupPresentation as i } from "../../shared/group-management/index.js";
 import "../button/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 } from "lit/decorators.js";
+import a from "./style.js";
+import { LitElement as o, html as s, unsafeCSS as c } from "lit";
+import { customElement as l, property as u } from "lit/decorators.js";
 //#region src/components/button-group/index.ts
-var l = ["horizontal", "vertical"], u = class extends i {
+var d = ["horizontal", "vertical"], f = class extends o {
 	constructor(...e) {
-		super(...e), this._direction = "horizontal";
+		super(...e), this._direction = "horizontal", this._groupController = new r(this, i({
+			getItems: () => [...this.querySelectorAll("web-ui-button")],
+			getContext: (e, t, n) => ({
+				direction: this.direction,
+				isLast: t === n.length - 1
+			})
+		}).make());
 	}
 	static {
-		this.styles = [o(t), o(r)];
+		this.styles = [c(t), c(a)];
 	}
 	get direction() {
 		return this._direction;
 	}
 	set direction(e) {
 		let t = this._direction;
-		this._direction = n(e, l, "horizontal"), this.requestUpdate("direction", t);
-	}
-	updated() {
-		this.syncChildButtons();
-	}
-	syncChildButtons() {
-		let e = this.querySelectorAll("web-ui-button"), t = this.direction === "vertical";
-		for (let [n, r] of [...e].entries()) {
-			r.hasAttribute("group") || r.setAttribute("group", ""), r.variant = "glass", r.style.setProperty("--wui-button-size", "32px"), r.setAttribute("direction", t ? "vertical" : "horizontal");
-			let i = n === e.length - 1;
-			r.toggleAttribute("last", i), r.style.setProperty("--wui-button-divider-width", i ? "0px" : "1px");
-		}
+		this._direction = n(e, d, "horizontal"), this.requestUpdate("direction", t);
 	}
 	render() {
-		return a`
+		return s`
       <div class="wui-glass wui-button-group-inner">
         <slot></slot>
       </div>
     `;
 	}
 };
-e([c({
+e([u({
 	type: String,
 	reflect: !0
-})], u.prototype, "direction", null), u = e([s("web-ui-button-group")], u);
+})], f.prototype, "direction", null), f = e([l("web-ui-button-group")], f);
 //#endregion
-export { u as WebUiButtonGroup };
+export { f as WebUiButtonGroup };
 
 //# sourceMappingURL=index.js.map