@greypan/web-ui 3.0.1 → 5.0.0

package/dist/components/button/index.js

@@ -1,101 +1,115 @@
-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 { buttonGroupContextKey as i, defineGroupManaged as a } from "../../shared/group-management/index.js";
+import o from "./style.js";
+import { LitElement as s, html as c, nothing as l, unsafeCSS as u } from "lit";
+import { customElement as d, property as f } from "lit/decorators.js";
+import { ifDefined as p } from "lit/directives/if-defined.js";
+import { classMap as m } from "lit/directives/class-map.js";
+import { styleMap as h } from "lit/directives/style-map.js";
 //#region src/components/button/index.ts
-var m = [
+var g = [
 	"primary",
 	"secondary",
 	"ghost",
 	"danger",
 	"glass"
-], h = [
+], _ = [
 	"button",
 	"submit",
 	"reset"
-], g = class extends a {
+], v = class extends s {
 	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 = a(this, {
+			context: i,
+			requestUpdate: () => this.requestUpdate(),
+			equals: (e, t) => e?.direction === t?.direction && e?.isLast === t?.isLast
+		}).make();
 	}
 	static {
-		this.styles = [c(n), c(i)];
+		this.styles = [u(n), u(o)];
 	}
 	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, g, "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, _, "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 ? "30" : 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 c`
       <button
         type=${this.type}
-        aria-label=${d(this.ariaLabel)}
-        class=${f(e)}
-        style=${this.size ? p(this._sizeStyle) : s}
+        aria-label=${p(this.ariaLabel)}
+        class=${m(n)}
+        style=${Object.keys(this._sizeStyle).length > 0 ? h(this._sizeStyle) : l}
         ?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.icon ? this.loading ? c`<web-ui-icon .icon=${t} spin></web-ui-icon>` : c`<slot></slot>` : c`
+                ${this.loading ? c`<web-ui-icon .icon=${t} spin></web-ui-icon>` : ""}
+                <slot name="prefix"></slot>
+                <span class="label"><slot></slot></span>
+                <slot name="suffix"></slot>
+              `}
       </button>
+      ${e && !e.isLast ? c`<span class=${m(r)} aria-hidden="true"></span>` : ""}
     `;
 	}
 };
-e([u({
+e([f({
 	type: String,
 	reflect: !0
-})], g.prototype, "variant", null), e([u({
+})], v.prototype, "variant", null), e([f({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "disabled", void 0), e([u({
+})], v.prototype, "disabled", void 0), e([f({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "loading", void 0), e([u({
+})], v.prototype, "loading", void 0), e([f({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "full", void 0), e([u({
+})], v.prototype, "full", void 0), e([f({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "icon", void 0), e([u({
+})], v.prototype, "icon", void 0), e([f({
 	type: String,
 	reflect: !0
-})], g.prototype, "size", void 0), e([u({
+})], v.prototype, "size", void 0), e([f({
 	type: String,
 	reflect: !0
-})], g.prototype, "type", null), e([u({
+})], v.prototype, "type", null), e([f({
 	type: String,
 	attribute: "aria-label"
-})], g.prototype, "ariaLabel", void 0), g = e([l("web-ui-button")], g);
+})], v.prototype, "ariaLabel", void 0), v = e([d("web-ui-button")], v);
 //#endregion
-export { g as WebUiButton };
+export { v 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 { 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\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    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  private get _sizeStyle(): Record<string, string> {\n    // size 仅控制按钮高度；icon 模式下 min-width 同步为相同值，天然保持正方形。\n    const size = this._groupContext ? '30' : 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        ${\n          this.icon\n            ? // loading 优先于 icon 内容：icon 模式下只展示 spinner，不投影默认 slot，避免双图标叠加\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,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{--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,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,12px);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;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)}: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-button-bg,#08f) 88%, black);--wui-button-bg-active:color-mix(in srgb, var(--wui-button-bg,#08f) 76%, 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;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  --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, 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, 12px);\n  border: none;\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  &: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/* ===== 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-button-bg, #08f) 88%, black);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-button-bg, #08f) 76%, black);\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(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/* ===== 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-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,47 @@
-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, buttonGroupContextKey as i, defineGroupPresentation as a } 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 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 l = ["horizontal", "vertical"], u = class extends i {
+var f = ["horizontal", "vertical"], p = class extends s {
 	constructor(...e) {
-		super(...e), this._direction = "horizontal";
+		super(...e), this._direction = "horizontal", this._groupController = new r(this, a({
+			host: this,
+			context: 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 = [l(t), l(o)];
 	}
 	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, f, "horizontal"), this.requestUpdate("direction", t);
 	}
 	render() {
-		return a`
+		return c`
       <div class="wui-glass wui-button-group-inner">
         <slot></slot>
       </div>
     `;
 	}
 };
-e([c({
+e([d({
 	type: String,
 	reflect: !0
-})], u.prototype, "direction", null), u = e([s("web-ui-button-group")], u);
+})], p.prototype, "direction", null), p = e([u("web-ui-button-group")], p);
 //#endregion
-export { u as WebUiButtonGroup };
+export { p as 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\n// web-ui-button 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-button-group')\nexport class WebUiButtonGroup extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get direction(): 'horizontal' | 'vertical' {\n    return this._direction\n  }\n  set direction(v: string) {\n    const old = this._direction\n    this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'horizontal')\n    this.requestUpdate('direction', old)\n  }\n  private _direction: 'horizontal' | 'vertical' = 'horizontal'\n\n  override updated() {\n    this.syncChildButtons()\n  }\n\n  private syncChildButtons() {\n    const buttons = this.querySelectorAll<HTMLElement & { variant: string }>('web-ui-button')\n    const isVertical = this.direction === 'vertical'\n    for (const [i, btn] of [...buttons].entries()) {\n      if (!btn.hasAttribute('group')) btn.setAttribute('group', '')\n      btn.variant = 'glass'\n      btn.style.setProperty('--wui-button-size', '32px')\n      btn.setAttribute('direction', isVertical ? 'vertical' : 'horizontal')\n      const isLast = i === buttons.length - 1\n      btn.toggleAttribute('last', isLast)\n      btn.style.setProperty('--wui-button-divider-width', isLast ? '0px' : '1px')\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"wui-glass wui-button-group-inner\">\n        <slot></slot>\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button-group': WebUiButtonGroup\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAqB,CAAC,cAAc,UAAU,GAGvC,IAAN,cAA+B,EAAW;;EAYC,aAAA,KAAA,aAAA;;;EAXvB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,YAAuC;EACzC,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAiB,GAAG,GAAoB,YAAY,GACtE,KAAK,cAAc,aAAa,CAAG;CACrC;CAGA,UAAmB;EACjB,KAAK,iBAAiB;CACxB;CAEA,mBAA2B;EACzB,IAAM,IAAU,KAAK,iBAAoD,eAAe,GAClF,IAAa,KAAK,cAAc;EACtC,KAAK,IAAM,CAAC,GAAG,MAAQ,CAAC,GAAG,CAAO,CAAC,CAAC,QAAQ,GAAG;GAI7C,AAHK,EAAI,aAAa,OAAO,KAAG,EAAI,aAAa,SAAS,EAAE,GAC5D,EAAI,UAAU,SACd,EAAI,MAAM,YAAY,qBAAqB,MAAM,GACjD,EAAI,aAAa,aAAa,IAAa,aAAa,YAAY;GACpE,IAAM,IAAS,MAAM,EAAQ,SAAS;GAEtC,AADA,EAAI,gBAAgB,QAAQ,CAAM,GAClC,EAAI,MAAM,YAAY,8BAA8B,IAAS,QAAQ,KAAK;EAC5E;CACF;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;CAKb;AACF;AApCG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAJ1C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n// web-ui-button 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport {\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  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":";;;;;;;;;AAkBA,IAAM,IAAqB,CAAC,cAAc,UAAU,GAGvC,IAAN,cAA+B,EAAW;;EAcX,aAFY,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;;;EAxByB,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;CAgBA,SAAkB;EAChB,OAAO,CAAI;;;;;CAKb;AACF;AA/BG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,aAAA,IAAA,GAJ1C,IAAA,EAAA,CAAA,EAAc,qBAAqB,CAAA,GAAA,CAAA"}

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

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

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  display: inline-block;\n}\n\n.wui-button-group-inner {\n  display: flex;\n  flex-direction: var(--wui-button-group-flex-direction, row);\n  gap: 4px;\n  align-items: center;\n\n  width: max-content;\n  height: 40px;\n  padding: 0 4px;\n  border-radius: 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  width: 40px;\n  height: auto;\n  padding: 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  display: inline-block;\n}\n\n.wui-button-group-inner {\n  display: flex;\n  flex-direction: var(--wui-button-group-flex-direction, row);\n  gap: 4px;\n  align-items: center;\n\n  width: max-content;\n  height: var(--wui-control-size, 36px);\n  padding: 0 4px;\n  border-radius: 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  width: var(--wui-control-size, 36px);\n  height: auto;\n  padding: 4px 0;\n}\n"],"mappings":""}

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

@@ -2,9 +2,7 @@ import { LitElement } from 'lit';
 export declare class WebUiCheckbox extends LitElement {
     static styles: import('lit').CSSResult;
     static formAssociated: boolean;
-    private _internals?;
-    private _formDisabled;
-    private _groupDisabled;
+    private readonly _groupManagement;
     private _checked;
     get checked(): boolean;
     set checked(v: boolean);
@@ -14,12 +12,11 @@ export declare class WebUiCheckbox extends LitElement {
     required: boolean;
     private get _isDisabled();
     private get _isManagedByGroup();
-    setGroupDisabled(disabled: boolean): void;
-    connectedCallback(): void;
+    private readonly _formAssociation;
+    private readonly _formAssociationController;
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
-    updated(): void;
-    private _syncFormValue;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     private _syncValidity;
     private handleClick;
     private handleKeyDown;

package/dist/components/checkbox/index.js

@@ -1,17 +1,38 @@
-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/heroicons-check-16-solid.js";
-import n from "./style.js";
-import { LitElement as r, html as i, unsafeCSS as a } from "lit";
-import { customElement as o, property as s, state as c } from "lit/decorators.js";
-import { classMap as l } from "lit/directives/class-map.js";
+import { FormAssociationController as n, defineFormAssociation as r } from "../../shared/form-association/index.js";
+import { defineGroupManaged as i, selectionGroupContextKey as a } from "../../shared/group-management/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, state as f } from "lit/decorators.js";
+import { classMap as p } from "lit/directives/class-map.js";
 //#region src/components/checkbox/index.ts
-var u = class extends r {
+var m = class extends s {
 	constructor(...e) {
-		super(...e), this._formDisabled = !1, this._groupDisabled = !1, this._checked = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1;
+		super(...e), this._groupManagement = i(this, {
+			context: a,
+			requestUpdate: () => this.requestUpdate()
+		}).make(), this._checked = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1, this._formAssociation = r({
+			host: this,
+			initialize: () => {
+				this.hasAttribute("checked") && (this._checked = !0);
+			},
+			getState: () => this._checked,
+			setState: (e) => {
+				this.checked = e;
+			},
+			getFormValue: () => !this._isManagedByGroup && this._checked ? this.value || "on" : null,
+			getFormState: () => String(this._checked),
+			restoreState: (e) => {
+				typeof e == "string" && (this.checked = e === "true");
+			},
+			isStateManaged: () => this._isManagedByGroup,
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new n(this, this._formAssociation);
 	}
 	static {
-		this.styles = a(n);
+		this.styles = l(o);
 	}
 	static {
 		this.formAssociated = !0;
@@ -21,45 +42,37 @@ var u = class extends r {
 	}
 	set checked(e) {
 		let t = this._checked;
-		this._checked = e, this._syncFormValue(), this.requestUpdate("checked", t);
+		this._checked = e, this._formAssociation.sync(), this.requestUpdate("checked", t);
 	}
 	get _isDisabled() {
-		return this.disabled || this._formDisabled || this._groupDisabled;
+		return this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === !0;
 	}
 	get _isManagedByGroup() {
-		return this.closest("web-ui-checkbox-group") !== null;
-	}
-	setGroupDisabled(e) {
-		this._groupDisabled = e;
-	}
-	connectedCallback() {
-		super.connectedCallback(), !this._internals && (this._internals = this.attachInternals(), this.hasAttribute("checked") && (this._checked = !0), this._syncFormValue());
+		return this._groupManagement.getContext() !== void 0;
 	}
 	formResetCallback() {
-		this.checked = this.hasAttribute("checked");
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e;
-	}
-	updated() {
-		this._syncFormValue(), this._syncValidity();
+		this._formAssociation.setDisabled(e);
 	}
-	_syncFormValue() {
-		this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || "on" : null);
+	formStateRestoreCallback(e) {
+		this._formAssociation.restore(e);
 	}
 	_syncValidity() {
-		if (!(!this._internals || typeof this._internals.setValidity != "function")) {
+		let e = this._formAssociation.getInternals();
+		if (!(!e || typeof e.setValidity != "function")) {
 			if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {
-				this._internals.setValidity({});
+				e.setValidity({});
 				return;
 			}
-			this._internals.setValidity({ valueMissing: !0 }, "请选择此项");
+			e.setValidity({ valueMissing: !0 }, "请选择此项");
 		}
 	}
 	handleClick() {
 		if (this._isDisabled) return;
 		let e = this._checked;
-		this._checked = !e, this._syncFormValue(), this.requestUpdate("checked", e);
+		this._checked = !e, this._formAssociation.sync(), this.requestUpdate("checked", e);
 		let t = this._isManagedByGroup ? {
 			bubbles: !1,
 			composed: !1
@@ -73,13 +86,14 @@ var u = class extends r {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
 	}
 	render() {
-		return i`
-      <label
-        class=${l({
+		let e = {
 			"wui-checkbox": !0,
 			"is-checked": this._checked,
 			"is-disabled": this._isDisabled
-		})}
+		};
+		return c`
+      <label
+        class=${p(e)}
         tabindex=${this._isDisabled ? "-1" : "0"}
         role="checkbox"
         aria-checked=${String(this._checked)}
@@ -89,7 +103,11 @@ var u = class extends r {
       >
         <span class="wui-checkbox-box">
           <span class="wui-checkbox-icon"
-            ><web-ui-icon .icon=${t} size="18" color="#fff"></web-ui-icon
+            ><web-ui-icon
+              .icon=${t}
+              size="18"
+              color="var(--wui-color-on-control, #fff)"
+            ></web-ui-icon
           ></span>
         </span>
         <span class="wui-checkbox-label"><slot></slot></span>
@@ -97,17 +115,17 @@ var u = class extends r {
     `;
 	}
 };
-e([c()], u.prototype, "_formDisabled", void 0), e([c()], u.prototype, "_groupDisabled", void 0), e([c()], u.prototype, "_checked", void 0), e([s({ type: String })], u.prototype, "value", void 0), e([s({
+e([f()], m.prototype, "_checked", void 0), e([d({ type: String })], m.prototype, "value", void 0), e([d({
 	type: String,
 	reflect: !0
-})], u.prototype, "name", void 0), e([s({
+})], m.prototype, "name", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "disabled", void 0), e([s({
+})], m.prototype, "disabled", void 0), e([d({
 	type: Boolean,
 	reflect: !0
-})], u.prototype, "required", void 0), u = e([o("web-ui-checkbox")], u);
+})], m.prototype, "required", void 0), m = e([u("web-ui-checkbox")], m);
 //#endregion
-export { u as WebUiCheckbox };
+export { m as WebUiCheckbox };
 
 //# sourceMappingURL=index.js.map

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

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

package/dist/components/checkbox/style.js

@@ -1,5 +1,5 @@
 //#region src/components/checkbox/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{cursor:pointer;display:inline-block}:host([disabled]){cursor:not-allowed}.wui-checkbox{cursor:pointer;-webkit-user-select:none;user-select:none;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);align-items:center;gap:10px;line-height:1;display:inline-flex}.wui-checkbox:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px;border-radius:2147483647px}.wui-checkbox.is-disabled{cursor:not-allowed;color:var(--wui-color-text-muted,#6a6a6a);opacity:.4}.wui-checkbox-box{background-color:var(--wui-color-surface-raised,#f2f2f7);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:background-color .2s,border-color .2s;display:flex}.is-checked .wui-checkbox-box{border-color:var(--wui-color-accent,#08f);background-color:var(--wui-color-accent,#08f)}.wui-checkbox-icon{opacity:0;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));font-size:0;line-height:0;display:block;overflow:hidden;transform:scale(.85)}.is-checked .wui-checkbox-icon{opacity:1;transform:scale(1)}.wui-checkbox-label{pointer-events:none}@media (prefers-reduced-motion:reduce){.wui-checkbox-icon,.is-checked .wui-checkbox-icon{transform:none}}";
+var e = "*,:before,:after{box-sizing:border-box}:host{cursor:default;display:inline-block}:host([disabled]){cursor:not-allowed}.wui-checkbox{cursor:default;-webkit-user-select:none;user-select:none;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);align-items:center;gap:10px;line-height:1;display:inline-flex}.wui-checkbox:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px;border-radius:2147483647px}.wui-checkbox.is-disabled{cursor:not-allowed;color:var(--wui-color-text-secondary,#6a6a6a);opacity:.4}.wui-checkbox-box{background-color:var(--wui-color-surface-raised,#f2f2f7);border-radius:6px;flex-shrink:0;justify-content:center;align-items:center;width:18px;height:18px;transition:background-color .2s,border-color .2s;display:flex}.is-checked .wui-checkbox-box{border-color:var(--wui-color-accent,#08f);background-color:var(--wui-color-accent,#08f)}.wui-checkbox-icon{opacity:0;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));font-size:0;line-height:0;display:block;overflow:hidden;transform:scale(.85)}.is-checked .wui-checkbox-icon{opacity:1;transform:scale(1)}.wui-checkbox-label{pointer-events:none}@media (prefers-reduced-motion:reduce){.wui-checkbox-icon,.is-checked .wui-checkbox-icon{transform:none}}";
 //#endregion
 export { e as default };