@greypan/web-ui 11.2.0 → 12.0.0

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/button/index.ts"],"mappings":";;cAkBM;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBAKO,oBAAoB;SACf,sBAAM;MAGlB;MAGA,QAAQ;UAKJ;EAEoC;EACA;EACA;EACA;EACD;MAGvC,gBAAgB;MAGhB,KAAK;UAKD;EASsD;EACG;mBAEhD;cAML;mBAQK;mBASA;cAEL;;cASA;UAkBJ;mBAuBS;EAMR,wBAAM;;QA6CT;YACI;IACR,iBAAiB"}

package/dist/components/button/index.js

@@ -1,47 +1,50 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../classes/glass.js";
-import n from "../../icons/generated/lucide-loader-circle.js";
-import { installPointerFocusSuppression as r } from "../../shared/focus/pointer-focus.js";
-import { FormAssociated as i, FormAssociationController as a, defineFormAssociation as o } from "../../shared/form-association/index.js";
-import { buttonGroupContextKey as s, defineGroupManaged as c } from "../../shared/group-management/index.js";
-import { normalizeLiteral as l } from "../../shared/normalize/index.js";
-import u from "./style.js";
-import { LitElement as d, html as f, nothing as p, unsafeCSS as m } from "lit";
-import { customElement as h, property as g } from "lit/decorators.js";
-import { classMap as _ } from "lit/directives/class-map.js";
-import { ifDefined as v } from "lit/directives/if-defined.js";
-import { styleMap as y } from "lit/directives/style-map.js";
-//#region src/components/button/index.ts
-var b = [
+import glass_default from "../../classes/glass.js";
+import lucide_loader_circle_default from "../../icons/generated/lucide-loader-circle.js";
+import { installPointerFocusSuppression } from "../../shared/focus/pointer-focus.js";
+import { FormAssociated, FormAssociationController, defineFormAssociation } from "../../shared/form-association/index.js";
+import { buttonGroupContextKey, defineGroupManaged } from "../../shared/group-management/index.js";
+import { normalizeLiteral } from "../../shared/normalize/index.js";
+import style_default from "./style.js";
+import { LitElement, html, nothing, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { styleMap } from "lit/directives/style-map.js";
+// src/components/button/index.ts
+const ALLOWED_VARIANTS = [
 	"primary",
 	"secondary",
 	"ghost",
 	"danger",
 	"glass"
-], x = [
+];
+const ALLOWED_TYPES = [
 	"button",
 	"submit",
 	"reset"
 ];
-r();
-var S = class extends i(d) {
+installPointerFocusSuppression();
+let WebUiButton = class WebUiButton extends FormAssociated(LitElement) {
 	static {
-		this.styles = [m(t), m(u)];
+		this.styles = [unsafeCSS(glass_default), unsafeCSS(style_default)];
 	}
 	get variant() {
 		return this._variant;
 	}
-	set variant(e) {
-		let t = this._variant;
-		this._variant = l(e, b, "glass"), this.requestUpdate("variant", t);
+	set variant(v) {
+		const old = this._variant;
+		this._variant = normalizeLiteral(v, ALLOWED_VARIANTS, "glass");
+		this.requestUpdate("variant", old);
 	}
 	get type() {
 		return this._type;
 	}
-	set type(e) {
-		let t = this._type;
-		this._type = l(e, x, "button"), this.requestUpdate("type", t);
+	set type(value) {
+		const old = this._type;
+		this._type = normalizeLiteral(value, ALLOWED_TYPES, "button");
+		this.requestUpdate("type", old);
 	}
 	get _groupContext() {
 		return this._groupManagement.getContext();
@@ -50,99 +53,130 @@ var S = class extends i(d) {
 		return this.disabled || this.loading || this._formAssociation.isFormDisabled();
 	}
 	constructor() {
-		super(), this._variant = "glass", this.disabled = !1, this.loading = !1, this.full = !1, this.icon = !1, this.size = "", this._type = "button", this.ariaLabel = null, this.ariaExpanded = null, this._groupManagement = c(this, {
-			context: s,
+		super();
+		this._variant = "glass";
+		this.disabled = false;
+		this.loading = false;
+		this.full = false;
+		this.icon = false;
+		this.size = "";
+		this._type = "button";
+		this.ariaLabel = null;
+		this.ariaExpanded = null;
+		this._groupManagement = defineGroupManaged(this, {
+			context: buttonGroupContextKey,
 			requestUpdate: () => this.requestUpdate(),
-			equals: (e, t) => e?.direction === t?.direction && e?.isLast === t?.isLast
-		}).make(), this._formAssociation = o({
+			equals: (a, b) => a?.direction === b?.direction && a?.isLast === b?.isLast
+		}).make();
+		this._formAssociation = defineFormAssociation({
 			host: this,
 			getState: () => null,
 			setState: () => {},
 			getFormValue: () => null,
 			getFormState: () => null,
 			restoreState: () => {}
-		}).make(), this._formAssociationController = new a(this, this._formAssociation), this._handleHostClick = (e) => {
-			e.composedPath()[0] === this && this._isDisabled && (e.preventDefault(), e.stopPropagation());
-		}, this.addEventListener("click", this._handleHostClick);
+		}).make();
+		this._formAssociationController = new FormAssociationController(this, this._formAssociation);
+		this._handleHostClick = (event) => {
+			if (event.composedPath()[0] !== this || !this._isDisabled) return;
+			event.preventDefault();
+			event.stopPropagation();
+		};
+		this.addEventListener("click", this._handleHostClick);
 	}
 	get _sizeStyle() {
 		if (this._groupContext) return { "--wui-control-size": "var(--wui-internal-button-group-button-size, 30px)" };
-		let e = this.size;
-		if (typeof e != "string" && typeof e != "number") return {};
-		let t = `${e}`.trim();
-		return t ? { "--wui-control-size": /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(t) ? `${Number(t)}px` : t } : {};
+		const sizeValue = this.size;
+		if (typeof sizeValue !== "string" && typeof sizeValue !== "number") return {};
+		const size = `${sizeValue}`.trim();
+		if (!size) return {};
+		return { "--wui-control-size": /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(size) ? `${Number(size)}px` : size };
 	}
 	handleClick(e) {
 		if (this._isDisabled) {
-			e.preventDefault(), e.stopPropagation();
+			e.preventDefault();
+			e.stopPropagation();
 			return;
 		}
-		let t = this.type;
-		t !== "button" && setTimeout(() => {
+		const action = this.type;
+		if (action === "button") return;
+		setTimeout(() => {
 			if (e.defaultPrevented) return;
-			let n = this._formAssociation.getInternals()?.form;
-			n && (t === "submit" ? n.requestSubmit() : n.reset());
+			const form = this._formAssociation.getInternals()?.form;
+			if (!form) return;
+			if (action === "submit") form.requestSubmit();
+			else form.reset();
 		});
 	}
 	render() {
-		let e = this._groupContext, t = {
-			"wui-glass": this.variant === "glass" && !e,
-			"is-grouped": !!e
-		}, r = {
-			"group-divider": !0,
-			vertical: e?.direction === "vertical"
+		const groupContext = this._groupContext;
+		const btnClass = {
+			"wui-glass": this.variant === "glass" && !groupContext,
+			"is-grouped": Boolean(groupContext)
+		};
+		const dividerClass = {
+			"group-divider": true,
+			vertical: groupContext?.direction === "vertical"
 		};
-		return f`
+		return html`
       <button
         type=${this.type}
-        aria-label=${v(this.ariaLabel)}
-        aria-expanded=${v(this.ariaExpanded)}
-        class=${_(t)}
+        aria-label=${ifDefined(this.ariaLabel)}
+        aria-expanded=${ifDefined(this.ariaExpanded)}
+        class=${classMap(btnClass)}
         part="button"
-        style=${Object.keys(this._sizeStyle).length > 0 ? y(this._sizeStyle) : p}
+        style=${Object.keys(this._sizeStyle).length > 0 ? styleMap(this._sizeStyle) : nothing}
         ?disabled=${this._isDisabled}
         @click=${this.handleClick}
       >
-        ${this.icon ? this.loading ? f`<web-ui-icon .icon=${n} spin></web-ui-icon>` : f`<slot></slot>` : f`
-                ${this.loading ? f`<web-ui-icon .icon=${n} spin></web-ui-icon>` : ""}
+        ${this.icon ? this.loading ? html`<web-ui-icon .icon=${lucide_loader_circle_default} spin></web-ui-icon>` : html`<slot></slot>` : html`
+                ${this.loading ? html`<web-ui-icon .icon=${lucide_loader_circle_default} spin></web-ui-icon>` : ""}
                 <slot name="prefix"></slot>
                 <span class="label"><slot></slot></span>
                 <slot name="suffix"></slot>
               `}
       </button>
-      ${e && !e.isLast ? f`<span class=${_(r)} aria-hidden="true"></span>` : ""}
+      ${groupContext && !groupContext.isLast ? html`<span class=${classMap(dividerClass)} aria-hidden="true"></span>` : ""}
     `;
 	}
 };
-e([g({
+__decorate([property({
 	type: String,
-	reflect: !0
-})], S.prototype, "variant", null), e([g({
+	reflect: true
+})], WebUiButton.prototype, "variant", null);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], S.prototype, "disabled", void 0), e([g({
+	reflect: true
+})], WebUiButton.prototype, "disabled", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], S.prototype, "loading", void 0), e([g({
+	reflect: true
+})], WebUiButton.prototype, "loading", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], S.prototype, "full", void 0), e([g({
+	reflect: true
+})], WebUiButton.prototype, "full", void 0);
+__decorate([property({
 	type: Boolean,
-	reflect: !0
-})], S.prototype, "icon", void 0), e([g({
+	reflect: true
+})], WebUiButton.prototype, "icon", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], S.prototype, "size", void 0), e([g({
+	reflect: true
+})], WebUiButton.prototype, "size", void 0);
+__decorate([property({
 	type: String,
-	reflect: !0
-})], S.prototype, "type", null), e([g({
+	reflect: true
+})], WebUiButton.prototype, "type", null);
+__decorate([property({
 	type: String,
 	attribute: "aria-label"
-})], S.prototype, "ariaLabel", void 0), e([g({
+})], WebUiButton.prototype, "ariaLabel", void 0);
+__decorate([property({
 	type: String,
 	attribute: "aria-expanded"
-})], S.prototype, "ariaExpanded", void 0), S = e([h("web-ui-button")], S);
-//#endregion
-export { S as WebUiButton };
+})], WebUiButton.prototype, "ariaExpanded", void 0);
+WebUiButton = __decorate([customElement("web-ui-button")], WebUiButton);
+export { 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 '@/components/icon'\n\nimport { 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 glass from '@/classes/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { buttonGroupContextKey, 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\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-button')\nexport class WebUiButton extends FormAssociated(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  /*\n   * Explicitly delegated ARIA attributes.\n   *\n   * `aria-disabled` 不在其中：禁用只有 `disabled` 一条路径，它把内部原生 button 真的置为\n   * disabled（不可点、不进 tab 序列）。`aria-disabled` 那套「看起来禁用但仍可聚焦」的\n   * 语义不提供，因此既不读取也不转发——写上去只留在宿主，对行为零影响。\n   */\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n  @property({ type: String, attribute: 'aria-expanded' }) override ariaExpanded: string | null = null\n\n  private readonly _groupManagement = defineGroupManaged<ButtonGroupContext>(this, {\n    context: buttonGroupContextKey,\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  /*\n   * button 不贡献表单值，接 shared form-association 只为拿 ElementInternals 与原生禁用回调：\n   * 禁用态由浏览器在宿主 disabled 反射时同步回报，自己镜像一份会漏掉更新时机。\n   */\n  private readonly _formAssociation = defineFormAssociation<null>({\n    host: this,\n    getState: () => null,\n    setState: () => {},\n    getFormValue: () => null,\n    getFormState: () => null,\n    restoreState: () => {}\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this.loading || this._formAssociation.isFormDisabled()\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('click', this._handleHostClick)\n  }\n\n  private get _sizeStyle(): Record<string, string> {\n    // size 仅控制 button 高度；icon 模式下 min-width 同步为相同值，天然保持正方形。\n    if (this._groupContext) {\n      return { '--wui-control-size': 'var(--wui-internal-button-group-button-size, 30px)' }\n    }\n\n    const sizeValue: unknown = this.size\n    if (typeof sizeValue !== 'string' && typeof sizeValue !== 'number') return {}\n\n    const size = `${sizeValue}`.trim()\n    if (!size) return {}\n\n    // 裸数字按 px 解释；带单位的 CSS 长度原样使用。\n    const isBareNumber = /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?$/i.test(size)\n    const cssSize = isBareNumber ? `${Number(size)}px` : size\n    return { '--wui-control-size': cssSize }\n  }\n\n  private handleClick(e: Event) {\n    if (this._isDisabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n\n    const action = this.type\n    if (action === 'button') return\n\n    /*\n     * Shadow 内 button 没有 form owner；等 composed click 的同步监听器全部完成后，\n     * 再读取宿主的 live form owner 并转发，调用方仍可用 preventDefault 取消这次原生 activation。\n     */\n    setTimeout(() => {\n      if (e.defaultPrevented) return\n      const form = this._formAssociation.getInternals()?.form\n      if (!form) return\n      if (action === 'submit') form.requestSubmit()\n      else form.reset()\n    })\n  }\n\n  private readonly _handleHostClick = (event: Event) => {\n    if (event.composedPath()[0] !== this || !this._isDisabled) return\n    event.preventDefault()\n    event.stopPropagation()\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        aria-expanded=${ifDefined(this.ariaExpanded)}\n        class=${classMap(btnClass)}\n        part=\"button\"\n        style=${Object.keys(this._sizeStyle).length > 0 ? styleMap(this._sizeStyle) : nothing}\n        ?disabled=${this._isDisabled}\n        @click=${this.handleClick}\n      >\n        ${\n          this.icon\n            ? // loading 优先于 icon 内容：icon 模式下只展示 spinner，不投影默认 slot，避免双 icon 叠加\n              this.loading\n              ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>`\n              : html`<slot></slot>`\n            : html`\n                ${this.loading ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>` : ''}\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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"}
+{"version":3,"file":"index.js","names":["glass","style","lucideLoaderCircle"],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import '@/components/icon'\n\nimport { 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 glass from '@/classes/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { buttonGroupContextKey, 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\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-button')\nexport class WebUiButton extends FormAssociated(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  /*\n   * Explicitly delegated ARIA attributes.\n   *\n   * `aria-disabled` 不在其中：禁用只有 `disabled` 一条路径，它把内部原生 button 真的置为\n   * disabled（不可点、不进 tab 序列）。`aria-disabled` 那套「看起来禁用但仍可聚焦」的\n   * 语义不提供，因此既不读取也不转发——写上去只留在宿主，对行为零影响。\n   */\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n  @property({ type: String, attribute: 'aria-expanded' }) override ariaExpanded: string | null = null\n\n  private readonly _groupManagement = defineGroupManaged<ButtonGroupContext>(this, {\n    context: buttonGroupContextKey,\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  /*\n   * button 不贡献表单值，接 shared form-association 只为拿 ElementInternals 与原生禁用回调：\n   * 禁用态由浏览器在宿主 disabled 反射时同步回报，自己镜像一份会漏掉更新时机。\n   */\n  private readonly _formAssociation = defineFormAssociation<null>({\n    host: this,\n    getState: () => null,\n    setState: () => {},\n    getFormValue: () => null,\n    getFormState: () => null,\n    restoreState: () => {}\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this.loading || this._formAssociation.isFormDisabled()\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('click', this._handleHostClick)\n  }\n\n  private get _sizeStyle(): Record<string, string> {\n    // size 仅控制 button 高度；icon 模式下 min-width 同步为相同值，天然保持正方形。\n    if (this._groupContext) {\n      return { '--wui-control-size': 'var(--wui-internal-button-group-button-size, 30px)' }\n    }\n\n    const sizeValue: unknown = this.size\n    if (typeof sizeValue !== 'string' && typeof sizeValue !== 'number') return {}\n\n    const size = `${sizeValue}`.trim()\n    if (!size) return {}\n\n    // 裸数字按 px 解释；带单位的 CSS 长度原样使用。\n    const isBareNumber = /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?$/i.test(size)\n    const cssSize = isBareNumber ? `${Number(size)}px` : size\n    return { '--wui-control-size': cssSize }\n  }\n\n  private handleClick(e: Event) {\n    if (this._isDisabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n\n    const action = this.type\n    if (action === 'button') return\n\n    /*\n     * Shadow 内 button 没有 form owner；等 composed click 的同步监听器全部完成后，\n     * 再读取宿主的 live form owner 并转发，调用方仍可用 preventDefault 取消这次原生 activation。\n     */\n    setTimeout(() => {\n      if (e.defaultPrevented) return\n      const form = this._formAssociation.getInternals()?.form\n      if (!form) return\n      if (action === 'submit') form.requestSubmit()\n      else form.reset()\n    })\n  }\n\n  private readonly _handleHostClick = (event: Event) => {\n    if (event.composedPath()[0] !== this || !this._isDisabled) return\n    event.preventDefault()\n    event.stopPropagation()\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        aria-expanded=${ifDefined(this.ariaExpanded)}\n        class=${classMap(btnClass)}\n        part=\"button\"\n        style=${Object.keys(this._sizeStyle).length > 0 ? styleMap(this._sizeStyle) : nothing}\n        ?disabled=${this._isDisabled}\n        @click=${this.handleClick}\n      >\n        ${\n          this.icon\n            ? // loading 优先于 icon 内容：icon 模式下只展示 spinner，不投影默认 slot，避免双 icon 叠加\n              this.loading\n              ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>`\n              : html`<slot></slot>`\n            : html`\n                ${this.loading ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>` : ''}\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,6 +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;position:relative}:host([full]){width:100%;display:block}:host([disabled]){cursor:not-allowed}button{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);cursor:default;-webkit-user-select:none;user-select:none;gap:var(--wui-button-gap,var(--wui-space-2,8px));box-sizing:border-box;width:var(--wui-button-width,max-content);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);padding:0 var(--wui-button-px,var(--wui-space-3,12px));border-radius:var(--wui-radius-control,calc(infinity * 1px));font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-button-color);white-space:nowrap;background-color:var(--wui-button-bg);border:none;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,color-mix(in srgb, var(--wui-color-accent,#0071e3) 40%, transparent));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)}:host([full]) button{width:100%;display:flex}:host([icon]) button{padding:0}:host([data-wui-pointer-focus]) button:focus-visible{outline-color:#0000}:host([variant=primary]){--wui-button-color:var(--wui-color-on-accent,#fff);--wui-button-bg:var(--wui-color-accent,#0071e3);--wui-button-bg-hover:color-mix(in srgb, var(--wui-button-bg,#0071e3) 94%, black);--wui-button-bg-active:color-mix(in srgb, var(--wui-button-bg,#0071e3) 90%, black)}: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-button-bg,#dfdfdf) 92%, black);--wui-button-bg-active:color-mix(in srgb, var(--wui-button-bg,#dfdfdf) 82%, black)}: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-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;width:1px;height:var(--wui-button-group-divider-length,20px);background-color:var(--wui-color-border,#0000001a);position:absolute;top:50%;right:-2px;transform:translateY(-50%)}.group-divider.vertical{width:var(--wui-button-group-divider-length,20px);height:1px;inset:auto auto -2px 50%;transform:translate(-50%)}";
-//#endregion
-export { e as default };
+// src/components/button/style.css?inline
+var style_default = "*,: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{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);cursor:default;-webkit-user-select:none;user-select:none;gap:var(--wui-button-gap,var(--wui-space-2,8px));box-sizing:border-box;width:var(--wui-button-width,max-content);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);padding:0 var(--wui-button-px,var(--wui-space-3,12px));border-radius:var(--wui-radius-control,calc(infinity * 1px));font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-button-color);white-space:nowrap;background-color:var(--wui-button-bg);border:none;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,color-mix(in srgb, var(--wui-color-accent,#0071e3) 40%, transparent));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)}:host([full]) button{width:100%;display:flex}:host([icon]) button{padding:0}:host([data-wui-pointer-focus]) button:focus-visible{outline-color:#0000}:host([variant=primary]){--wui-button-color:var(--wui-color-on-accent,#fff);--wui-button-bg:var(--wui-color-accent,#0071e3);--wui-button-bg-hover:color-mix(in srgb, var(--wui-button-bg,#0071e3) 94%, black);--wui-button-bg-active:color-mix(in srgb, var(--wui-button-bg,#0071e3) 90%, black)}: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-button-bg,#dfdfdf) 92%, black);--wui-button-bg-active:color-mix(in srgb, var(--wui-button-bg,#dfdfdf) 82%, black)}: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-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;width:1px;height:var(--wui-button-group-divider-length,20px);background-color:var(--wui-color-border,#0000001a);position:absolute;top:50%;right:-2px;transform:translateY(-50%)}.group-divider.vertical{width:var(--wui-button-group-divider-length,20px);height:1px;inset:auto auto -2px 50%;transform:translate(-50%)}\n";
+export { style_default as default };
 
 //# sourceMappingURL=style.js.map

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  position: relative;\n\n  /* inline-flex 让内层 button 在宿主内完全居中，避免继承的行高撑高宿主、导致 icon 偏移 */\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  --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n  cursor: default;\n  user-select: none;\n\n  position: relative;\n\n  overflow: clip;\n  display: inline-flex;\n  gap: var(--wui-button-gap, var(--wui-space-2, 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, 36px);\n  height: var(--wui-control-size, 36px);\n  padding: 0 var(--wui-button-px, var(--wui-space-3, 12px));\n  border: none;\n  border-radius: var(--wui-radius-control, 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  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: var(--wui-focus-ring-width, 3px) solid\n      var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #0071e3) 40%, transparent));\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:host([full]) button {\n  display: flex;\n  width: 100%;\n}\n\n:host([icon]) button {\n  padding: 0;\n}\n\n/* pointer-focus helper 把标记写到 shadow host 上；这里抑制 Shadow DOM 内 button 的 focus ring。 */\n:host([data-wui-pointer-focus]) button:focus-visible {\n  outline-color: transparent;\n}\n\n:host([variant='primary']) {\n  --wui-button-color: var(--wui-color-on-accent, #fff);\n  --wui-button-bg: var(--wui-color-accent, #0071e3);\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-button-bg, #0071e3) 94%, black);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-button-bg, #0071e3) 90%, black);\n}\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(in srgb, var(--wui-button-bg, #dfdfdf) 92%, black);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-button-bg, #dfdfdf) 82%, black);\n}\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: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/* .wui-glass 样式由 @/classes/glass.css 提供 */\n:host([variant='glass']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n\n  /* standalone glass 底色由 .wui-glass 提供；hover/active 需要还原玻璃底，避免被 button 状态色整块替换 */\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\nbutton.is-grouped {\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: var(--wui-button-group-divider-length, 20px);\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: var(--wui-button-group-divider-length, 20px);\n  height: 1px;\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 让内层 button 在宿主内完全居中，避免继承的行高撑高宿主、导致 icon 偏移 */\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  --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n  cursor: default;\n  user-select: none;\n\n  position: relative;\n\n  overflow: clip;\n  display: inline-flex;\n  gap: var(--wui-button-gap, var(--wui-space-2, 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, 36px);\n  height: var(--wui-control-size, 36px);\n  padding: 0 var(--wui-button-px, var(--wui-space-3, 12px));\n  border: none;\n  border-radius: var(--wui-radius-control, 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  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: var(--wui-focus-ring-width, 3px) solid\n      var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #0071e3) 40%, transparent));\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:host([full]) button {\n  display: flex;\n  width: 100%;\n}\n\n:host([icon]) button {\n  padding: 0;\n}\n\n/* pointer-focus helper 把标记写到 shadow host 上；这里抑制 Shadow DOM 内 button 的 focus ring。 */\n:host([data-wui-pointer-focus]) button:focus-visible {\n  outline-color: transparent;\n}\n\n:host([variant='primary']) {\n  --wui-button-color: var(--wui-color-on-accent, #fff);\n  --wui-button-bg: var(--wui-color-accent, #0071e3);\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-button-bg, #0071e3) 94%, black);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-button-bg, #0071e3) 90%, black);\n}\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(in srgb, var(--wui-button-bg, #dfdfdf) 92%, black);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-button-bg, #dfdfdf) 82%, black);\n}\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: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/* .wui-glass 样式由 @/classes/glass.css 提供 */\n:host([variant='glass']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n\n  /* standalone glass 底色由 .wui-glass 提供；hover/active 需要还原玻璃底，避免被 button 状态色整块替换 */\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\nbutton.is-grouped {\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: var(--wui-button-group-divider-length, 20px);\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: var(--wui-button-group-divider-length, 20px);\n  height: 1px;\n}\n"],"mappings":";AAAA,IAAA,gBAAA"}

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

@@ -1,17 +1,18 @@
-import { LitElement } from 'lit';
+import { LitElement } from "lit";
 export declare class WebUiButtonGroup extends LitElement {
-    static styles: import('lit').CSSResult[];
-    get direction(): 'horizontal' | 'vertical';
-    set direction(v: string);
-    private _direction;
-    private readonly _groupController;
-    private _trackResizeObserver;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    render(): import('lit').TemplateResult<1>;
+  static styles: import("lit").CSSResult[];
+  get direction(): 'horizontal' | 'vertical';
+  set direction(v: string);
+  private _direction;
+  private readonly _groupController;
+  private _trackResizeObserver;
+  connectedCallback(): void;
+  disconnectedCallback(): void;
+  render(): import("lit").TemplateResult<1>;
 }
 declare global {
-    interface HTMLElementTagNameMap {
-        'web-ui-button-group': WebUiButtonGroup;
-    }
+  interface HTMLElementTagNameMap {
+    'web-ui-button-group': WebUiButtonGroup;
+  }
 }
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","names":[],"sources":["../../../src/components/button-group/index.ts"],"mappings":";qBAmBa,yBAAyB;SACpB,sBAAM;MAGlB;MAGA,UAAU;UAKN;mBAES;UAaT;EAEC;EAmBA;EAKA,wBAAM;;QAST;YACI;IACR,uBAAuB"}

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

@@ -1,59 +1,69 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import t from "../../classes/glass.js";
-import { GroupController as n, buttonGroupContextKey as r, defineGroupPresentation as i } from "../../shared/group-management/index.js";
-import { normalizeLiteral as a } from "../../shared/normalize/index.js";
-import o from "./style.js";
-import { LitElement as s, html as c, unsafeCSS as l } from "lit";
-import { customElement as u, property as d } from "lit/decorators.js";
-//#region src/components/button-group/index.ts
-var f = ["horizontal", "vertical"], p = class extends s {
-	constructor(...e) {
-		super(...e), this._direction = "horizontal", this._groupController = new n(this, i({
+import __decorate from "../../_virtual/_@oxc-project_runtime@0.155.0/helpers/esm/decorate.js";
+import glass_default from "../../classes/glass.js";
+import { GroupController, buttonGroupContextKey, defineGroupPresentation } from "../../shared/group-management/index.js";
+import { normalizeLiteral } from "../../shared/normalize/index.js";
+import style_default from "./style.js";
+import { LitElement, html, unsafeCSS } from "lit";
+import { customElement, property } from "lit/decorators.js";
+// src/components/button-group/index.ts
+const ALLOWED_DIRECTIONS = ["horizontal", "vertical"];
+let WebUiButtonGroup = class WebUiButtonGroup extends LitElement {
+	constructor(..._args) {
+		super(..._args);
+		this._direction = "horizontal";
+		this._groupController = new GroupController(this, defineGroupPresentation({
 			host: this,
-			context: r,
+			context: buttonGroupContextKey,
 			getItems: () => [...this.querySelectorAll("web-ui-button")],
-			getContext: (e, t, n) => ({
+			getContext: (_, index, buttons) => ({
 				direction: this.direction,
-				isLast: t === n.length - 1
+				isLast: index === buttons.length - 1
 			})
-		}).make()), this._trackResizeObserver = null;
+		}).make());
+		this._trackResizeObserver = null;
 	}
 	static {
-		this.styles = [l(t), l(o)];
+		this.styles = [unsafeCSS(glass_default), unsafeCSS(style_default)];
 	}
 	get direction() {
 		return this._direction;
 	}
-	set direction(e) {
-		let t = this._direction;
-		this._direction = a(e, f, "horizontal"), this.requestUpdate("direction", t);
+	set direction(v) {
+		const old = this._direction;
+		this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, "horizontal");
+		this.requestUpdate("direction", old);
 	}
 	connectedCallback() {
-		super.connectedCallback(), this.updateComplete.then(() => {
-			if (!this.isConnected || typeof ResizeObserver > "u") return;
-			let e = this.renderRoot.querySelector(".wui-button-group-inner");
-			e && (this._trackResizeObserver ??= new ResizeObserver(() => {
-				let { width: t, height: n } = getComputedStyle(e), r = Math.min(Number.parseFloat(t), Number.parseFloat(n)) / 2;
-				e.style.setProperty("--wui-glass-corner-radius", `${r}px`);
-			}), this._trackResizeObserver.observe(e, { box: "border-box" }));
+		super.connectedCallback();
+		this.updateComplete.then(() => {
+			if (!this.isConnected || typeof ResizeObserver === "undefined") return;
+			const track = this.renderRoot.querySelector(".wui-button-group-inner");
+			if (!track) return;
+			this._trackResizeObserver ??= new ResizeObserver(() => {
+				const { width, height } = getComputedStyle(track);
+				const cornerRadius = Math.min(Number.parseFloat(width), Number.parseFloat(height)) / 2;
+				track.style.setProperty("--wui-glass-corner-radius", `${cornerRadius}px`);
+			});
+			this._trackResizeObserver.observe(track, { box: "border-box" });
 		});
 	}
 	disconnectedCallback() {
-		this._trackResizeObserver?.disconnect(), super.disconnectedCallback();
+		this._trackResizeObserver?.disconnect();
+		super.disconnectedCallback();
 	}
 	render() {
-		return c`
+		return html`
       <div class="wui-glass wui-button-group-inner">
         <slot></slot>
       </div>
     `;
 	}
 };
-e([d({
+__decorate([property({
 	type: String,
-	reflect: !0
-})], p.prototype, "direction", null), p = e([u("web-ui-button-group")], p);
-//#endregion
-export { p as WebUiButtonGroup };
+	reflect: true
+})], WebUiButtonGroup.prototype, "direction", null);
+WebUiButtonGroup = __decorate([customElement("web-ui-button-group")], WebUiButtonGroup);
+export { WebUiButtonGroup };
 
 //# sourceMappingURL=index.js.map

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\nimport glass from '@/classes/glass.css?inline'\nimport {\n  buttonGroupContextKey,\n  defineGroupPresentation,\n  GroupController,\n  type ButtonGroupContext\n} from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport type { WebUiButton } from '../button'\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  private readonly _groupController = new GroupController(\n    this,\n    defineGroupPresentation<WebUiButton, ButtonGroupContext>({\n      host: this,\n      context: buttonGroupContextKey,\n      getItems: () => [...this.querySelectorAll<WebUiButton>('web-ui-button')],\n      getContext: (_, index, buttons) => ({\n        direction: this.direction,\n        isLast: index === buttons.length - 1\n      })\n    }).make()\n  )\n\n  private _trackResizeObserver: ResizeObserver | null = null\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    void this.updateComplete.then(() => {\n      if (!this.isConnected || typeof ResizeObserver === 'undefined') return\n\n      const track = this.renderRoot.querySelector<HTMLElement>('.wui-button-group-inner')\n      if (!track) return\n\n      this._trackResizeObserver ??= new ResizeObserver(() => {\n        // 读取未变换的布局尺寸，避免 dialog 进退场缩放污染玻璃圆角。\n        const { width, height } = getComputedStyle(track)\n        const cornerRadius = Math.min(Number.parseFloat(width), Number.parseFloat(height)) / 2\n        // max-content 垂直轨道的短边会随成员内容变化，玻璃角点渐变需要同步跟随。\n        track.style.setProperty('--wui-glass-corner-radius', `${cornerRadius}px`)\n      })\n      this._trackResizeObserver.observe(track, { box: 'border-box' })\n    })\n  }\n\n  override disconnectedCallback(): void {\n    this._trackResizeObserver?.disconnect()\n    super.disconnectedCallback()\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":";;;;;;;;AAgBA,IAAM,IAAqB,CAAC,cAAc,UAAU,GAGvC,IAAN,cAA+B,EAAW;;EA2BO,aAfN,KAAA,aAAA,cAEZ,KAAA,mBAAA,IAAI,EACtC,MACA,EAAyD;GACvD,MAAM;GACN,SAAS;GACT,gBAAgB,CAAC,GAAG,KAAK,iBAA8B,eAAe,CAAC;GACvE,aAAa,GAAG,GAAO,OAAa;IAClC,WAAW,KAAK;IAChB,QAAQ,MAAU,EAAQ,SAAS;GACrC;EACF,CAAC,CAAC,CAAC,KAAK,CACV,GAEsD,KAAA,uBAAA;;;EA1B7B,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;CAkBA,oBAAmC;EAEjC,AADA,MAAM,kBAAkB,GACxB,KAAU,eAAe,WAAW;GAClC,IAAI,CAAC,KAAK,eAAe,OAAO,iBAAmB,KAAa;GAEhE,IAAM,IAAQ,KAAK,WAAW,cAA2B,yBAAyB;GAC7E,MAEL,KAAK,yBAAyB,IAAI,qBAAqB;IAErD,IAAM,EAAE,UAAO,cAAW,iBAAiB,CAAK,GAC1C,IAAe,KAAK,IAAI,OAAO,WAAW,CAAK,GAAG,OAAO,WAAW,CAAM,CAAC,IAAI;IAErF,EAAM,MAAM,YAAY,6BAA6B,GAAG,EAAa,GAAG;GAC1E,CAAC,GACD,KAAK,qBAAqB,QAAQ,GAAO,EAAE,KAAK,aAAa,CAAC;EAChE,CAAC;CACH;CAEA,uBAAsC;EAEpC,AADA,KAAK,sBAAsB,WAAW,GACtC,MAAM,qBAAqB;CAC7B;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;CAKb;AACF;AAzDG,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":["glass","style"],"sources":["../../../src/components/button-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/classes/glass.css?inline'\nimport {\n  buttonGroupContextKey,\n  defineGroupPresentation,\n  GroupController,\n  type ButtonGroupContext\n} from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport type { WebUiButton } from '../button'\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  private readonly _groupController = new GroupController(\n    this,\n    defineGroupPresentation<WebUiButton, ButtonGroupContext>({\n      host: this,\n      context: buttonGroupContextKey,\n      getItems: () => [...this.querySelectorAll<WebUiButton>('web-ui-button')],\n      getContext: (_, index, buttons) => ({\n        direction: this.direction,\n        isLast: index === buttons.length - 1\n      })\n    }).make()\n  )\n\n  private _trackResizeObserver: ResizeObserver | null = null\n\n  override connectedCallback(): void {\n    super.connectedCallback()\n    void this.updateComplete.then(() => {\n      if (!this.isConnected || typeof ResizeObserver === 'undefined') return\n\n      const track = this.renderRoot.querySelector<HTMLElement>('.wui-button-group-inner')\n      if (!track) return\n\n      this._trackResizeObserver ??= new ResizeObserver(() => {\n        // 读取未变换的布局尺寸，避免 dialog 进退场缩放污染玻璃圆角。\n        const { width, height } = getComputedStyle(track)\n        const cornerRadius = Math.min(Number.parseFloat(width), Number.parseFloat(height)) / 2\n        // max-content 垂直轨道的短边会随成员内容变化，玻璃角点渐变需要同步跟随。\n        track.style.setProperty('--wui-glass-corner-radius', `${cornerRadius}px`)\n      })\n      this._trackResizeObserver.observe(track, { box: 'border-box' })\n    })\n  }\n\n  override disconnectedCallback(): void {\n    this._trackResizeObserver?.disconnect()\n    super.disconnectedCallback()\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":";;;;;;;;AAgBA,MAAM,qBAAqB,CAAC,cAAc,UAAU;AAG7C,IAAM,mBAAN,MAAM,yBAAyB,WAAW;;;EAYC,KAAA,aAAA;EAEZ,KAAA,mBAAA,IAAI,gBACtC,MACA,wBAAyD;GACvD,MAAM;GACN,SAAS;GACT,gBAAgB,CAAC,GAAG,KAAK,iBAA8B,eAAe,CAAC;GACvE,aAAa,GAAG,OAAO,aAAa;IAClC,WAAW,KAAK;IAChB,QAAQ,UAAU,QAAQ,SAAS;GACrC;EACF,CAAC,CAAC,CAAC,KAAK,CACV;EAEsD,KAAA,uBAAA;;;EA1B7B,KAAA,SAAA,CAAC,UAAUA,aAAK,GAAG,UAAUC,aAAK,CAAC;;CAE5D,IACI,YAAuC;EACzC,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,MAAM,MAAM,KAAK;EACjB,KAAK,aAAa,iBAAiB,GAAG,oBAAoB,YAAY;EACtE,KAAK,cAAc,aAAa,GAAG;CACrC;CAkBA,oBAAmC;EACjC,MAAM,kBAAkB;EACxB,KAAU,eAAe,WAAW;GAClC,IAAI,CAAC,KAAK,eAAe,OAAO,mBAAmB,aAAa;GAEhE,MAAM,QAAQ,KAAK,WAAW,cAA2B,yBAAyB;GAClF,IAAI,CAAC,OAAO;GAEZ,KAAK,yBAAyB,IAAI,qBAAqB;IAErD,MAAM,EAAE,OAAO,WAAW,iBAAiB,KAAK;IAChD,MAAM,eAAe,KAAK,IAAI,OAAO,WAAW,KAAK,GAAG,OAAO,WAAW,MAAM,CAAC,IAAI;IAErF,MAAM,MAAM,YAAY,6BAA6B,GAAG,aAAa,GAAG;GAC1E,CAAC;GACD,KAAK,qBAAqB,QAAQ,OAAO,EAAE,KAAK,aAAa,CAAC;EAChE,CAAC;CACH;CAEA,uBAAsC;EACpC,KAAK,sBAAsB,WAAW;EACtC,MAAM,qBAAqB;CAC7B;CAEA,SAAkB;EAChB,OAAO,IAAI;;;;;CAKb;AACF;AAzDG,WAAA,CAAA,SAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,iBAAA,WAAA,aAAA,IAAA;AAJ1C,mBAAA,WAAA,CAAA,cAAc,qBAAqB,CAAA,GAAA,gBAAA"}

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

@@ -1,6 +1,5 @@
-//#region src/components/button-group/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{--wui-internal-button-group-button-size:calc(var(--wui-control-size,36px) * 5 / 6);display:inline-block}.wui-button-group-inner{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);flex-direction:var(--wui-button-group-flex-direction,row);gap:var(--wui-space-1,4px);width:max-content;height:var(--wui-control-size,36px);padding:0 var(--wui-space-1,4px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;display:flex}:host([direction=vertical]){--wui-button-group-flex-direction:column}:host([direction=vertical]) .wui-button-group-inner{height:auto;padding:var(--wui-space-1,4px) 0}";
-//#endregion
-export { e as default };
+// src/components/button-group/style.css?inline
+var style_default = "*,:before,:after{box-sizing:border-box}:host{--wui-internal-button-group-button-size:calc(var(--wui-control-size,36px) * 5 / 6);display:inline-block}.wui-button-group-inner{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);flex-direction:var(--wui-button-group-flex-direction,row);gap:var(--wui-space-1,4px);width:max-content;height:var(--wui-control-size,36px);padding:0 var(--wui-space-1,4px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;display:flex}:host([direction=vertical]){--wui-button-group-flex-direction:column}:host([direction=vertical]) .wui-button-group-inner{height:auto;padding:var(--wui-space-1,4px) 0}\n";
+export { style_default as default };
 
 //# sourceMappingURL=style.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/button-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-internal-button-group-button-size: calc(var(--wui-control-size, 36px) * 5 / 6);\n\n  display: inline-block;\n}\n\n.wui-button-group-inner {\n  --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n\n  display: flex;\n  flex-direction: var(--wui-button-group-flex-direction, row);\n  gap: var(--wui-space-1, 4px);\n  align-items: center;\n\n  width: max-content;\n  height: var(--wui-control-size, 36px);\n  padding: 0 var(--wui-space-1, 4px);\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n:host([direction='vertical']) {\n  --wui-button-group-flex-direction: column;\n}\n\n:host([direction='vertical']) .wui-button-group-inner {\n  height: auto;\n  padding: var(--wui-space-1, 4px) 0;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/button-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-internal-button-group-button-size: calc(var(--wui-control-size, 36px) * 5 / 6);\n\n  display: inline-block;\n}\n\n.wui-button-group-inner {\n  --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n\n  display: flex;\n  flex-direction: var(--wui-button-group-flex-direction, row);\n  gap: var(--wui-space-1, 4px);\n  align-items: center;\n\n  width: max-content;\n  height: var(--wui-control-size, 36px);\n  padding: 0 var(--wui-space-1, 4px);\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n}\n\n:host([direction='vertical']) {\n  --wui-button-group-flex-direction: column;\n}\n\n:host([direction='vertical']) .wui-button-group-inner {\n  height: auto;\n  padding: var(--wui-space-1, 4px) 0;\n}\n"],"mappings":";AAAA,IAAA,gBAAA"}