@greypan/web-ui 6.0.0 → 6.2.0

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

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

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

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

package/dist/components/badge/style.js

@@ -1,5 +1,5 @@
 //#region src/components/badge/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:inline-block}.badge-wrapper{display:inline-flex}.badge-wrapper-fixed{position:relative}.badge{z-index:1;border:1px solid var(--wui-color-page,#fff);min-width:18px;height:18px;color:var(--wui-color-on-accent,#fff);white-space:nowrap;background-color:var(--wui-color-danger,#dc2626);border-radius:2147483647px;justify-content:center;align-items:center;padding:0 4px;font-size:12px;font-weight:500;line-height:1;display:inline-flex}.badge-fixed{transform:translate(calc(var(--badge-x,50%) + var(--badge-offset-x,0px)), calc(var(--badge-y,-50%) + var(--badge-offset-y,0px)));position:absolute}:host([placement=top-right]) .badge{--badge-x:50%;--badge-y:-50%;top:0;right:0}:host([placement=top-left]) .badge{--badge-x:-50%;--badge-y:-50%;top:0;left:0}:host([placement=bottom-right]) .badge{--badge-x:50%;--badge-y:50%;bottom:0;right:0}:host([placement=bottom-left]) .badge{--badge-x:-50%;--badge-y:50%;bottom:0;left:0}.badge-dot{min-width:8px;height:8px;padding:0;font-size:0}.badge-fixed.badge-dot{--badge-x:40%;--badge-y:-40%}";
+var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;display:inline-block}.badge-wrapper{display:inline-flex}.badge-wrapper-fixed{position:relative}.badge{z-index:1;border:1px solid var(--wui-color-page,#fff);border-radius:var(--wui-radius-control,calc(infinity * 1px));min-width:18px;height:18px;color:var(--wui-color-on-accent,#fff);white-space:nowrap;background-color:var(--wui-color-danger,#dc2626);justify-content:center;align-items:center;padding:0 4px;font-size:12px;font-weight:500;line-height:1;display:inline-flex}.badge-fixed{transform:translate(calc(var(--badge-x,50%) + var(--badge-offset-x,0px)), calc(var(--badge-y,-50%) + var(--badge-offset-y,0px)));position:absolute}:host([placement=top-right]) .badge{--badge-x:50%;--badge-y:-50%;top:0;right:0}:host([placement=top-left]) .badge{--badge-x:-50%;--badge-y:-50%;top:0;left:0}:host([placement=bottom-right]) .badge{--badge-x:50%;--badge-y:50%;bottom:0;right:0}:host([placement=bottom-left]) .badge{--badge-x:-50%;--badge-y:50%;bottom:0;left:0}.badge-dot{min-width:8px;height:8px;padding:0;font-size:0}.badge-fixed.badge-dot{--badge-x:40%;--badge-y:-40%}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/badge/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  user-select: none;\n  display: inline-block;\n}\n\n.badge-wrapper {\n  display: inline-flex;\n}\n\n.badge-wrapper-fixed {\n  position: relative;\n}\n\n.badge {\n  z-index: 1;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  border: 1px solid var(--wui-color-page, #fff);\n  border-radius: calc(infinity * 1px);\n\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  color: var(--wui-color-on-accent, #fff);\n  white-space: nowrap;\n\n  background-color: var(--wui-color-danger, #dc2626);\n}\n\n.badge-fixed {\n  position: absolute;\n  transform: translate(\n    calc(var(--badge-x, 50%) + var(--badge-offset-x, 0px)),\n    calc(var(--badge-y, -50%) + var(--badge-offset-y, 0px))\n  );\n}\n\n/* ===== Placement ===== */\n\n:host([placement='top-right']) .badge {\n  --badge-x: 50%;\n  --badge-y: -50%;\n  top: 0;\n  right: 0;\n}\n\n:host([placement='top-left']) .badge {\n  --badge-x: -50%;\n  --badge-y: -50%;\n  top: 0;\n  left: 0;\n}\n\n:host([placement='bottom-right']) .badge {\n  --badge-x: 50%;\n  --badge-y: 50%;\n  right: 0;\n  bottom: 0;\n}\n\n:host([placement='bottom-left']) .badge {\n  --badge-x: -50%;\n  --badge-y: 50%;\n  bottom: 0;\n  left: 0;\n}\n\n/* ===== Dot ===== */\n\n.badge-dot {\n  min-width: 8px;\n  height: 8px;\n  padding: 0;\n  font-size: 0;\n}\n\n/* ===== Fixed mode (has slotted content) ===== */\n\n.badge-fixed.badge-dot {\n  --badge-x: 40%;\n  --badge-y: -40%;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/badge/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  user-select: none;\n  display: inline-block;\n}\n\n.badge-wrapper {\n  display: inline-flex;\n}\n\n.badge-wrapper-fixed {\n  position: relative;\n}\n\n.badge {\n  z-index: 1;\n\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n\n  min-width: 18px;\n  height: 18px;\n  padding: 0 4px;\n  border: 1px solid var(--wui-color-page, #fff);\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  font-size: 12px;\n  font-weight: 500;\n  line-height: 1;\n  color: var(--wui-color-on-accent, #fff);\n  white-space: nowrap;\n\n  background-color: var(--wui-color-danger, #dc2626);\n}\n\n.badge-fixed {\n  position: absolute;\n  transform: translate(\n    calc(var(--badge-x, 50%) + var(--badge-offset-x, 0px)),\n    calc(var(--badge-y, -50%) + var(--badge-offset-y, 0px))\n  );\n}\n\n/* ===== Placement ===== */\n\n:host([placement='top-right']) .badge {\n  --badge-x: 50%;\n  --badge-y: -50%;\n  top: 0;\n  right: 0;\n}\n\n:host([placement='top-left']) .badge {\n  --badge-x: -50%;\n  --badge-y: -50%;\n  top: 0;\n  left: 0;\n}\n\n:host([placement='bottom-right']) .badge {\n  --badge-x: 50%;\n  --badge-y: 50%;\n  right: 0;\n  bottom: 0;\n}\n\n:host([placement='bottom-left']) .badge {\n  --badge-x: -50%;\n  --badge-y: 50%;\n  bottom: 0;\n  left: 0;\n}\n\n/* ===== Dot ===== */\n\n.badge-dot {\n  min-width: 8px;\n  height: 8px;\n  padding: 0;\n  font-size: 0;\n}\n\n/* ===== Fixed mode (has slotted content) ===== */\n\n.badge-fixed.badge-dot {\n  --badge-x: 40%;\n  --badge-y: -40%;\n}\n"],"mappings":""}

package/dist/components/button/index.js

@@ -3,48 +3,51 @@ 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 { 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";
+import { installPointerFocusSuppression as i } from "../../shared/focus/pointer-focus.js";
+import { buttonGroupContextKey as a, defineGroupManaged as o } from "../../shared/group-management/index.js";
+import s from "./style.js";
+import { LitElement as c, html as l, nothing as u, unsafeCSS as d } from "lit";
+import { customElement as f, property as p } from "lit/decorators.js";
+import { ifDefined as m } from "lit/directives/if-defined.js";
+import { classMap as h } from "lit/directives/class-map.js";
+import { styleMap as g } from "lit/directives/style-map.js";
 //#region src/components/button/index.ts
-var g = [
+var _ = [
 	"primary",
 	"secondary",
 	"ghost",
 	"danger",
 	"glass"
-], _ = [
+], v = [
 	"button",
 	"submit",
 	"reset"
-], v = class extends s {
+];
+i();
+var y = class extends c {
 	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, this._groupManagement = a(this, {
-			context: i,
+		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 = o(this, {
+			context: a,
 			requestUpdate: () => this.requestUpdate(),
 			equals: (e, t) => e?.direction === t?.direction && e?.isLast === t?.isLast
 		}).make();
 	}
 	static {
-		this.styles = [u(n), u(o)];
+		this.styles = [d(n), d(s)];
 	}
 	get variant() {
 		return this._variant;
 	}
 	set variant(e) {
 		let t = this._variant;
-		this._variant = r(e, g, "glass"), this.requestUpdate("variant", t);
+		this._variant = r(e, _, "glass"), this.requestUpdate("variant", t);
 	}
 	get type() {
 		return this._type;
 	}
 	set type(e) {
 		let t = this._type;
-		this._type = r(e, _, "button"), this.requestUpdate("type", t);
+		this._type = r(e, v, "button"), this.requestUpdate("type", t);
 	}
 	get _groupContext() {
 		return this._groupManagement.getContext();
@@ -64,52 +67,53 @@ var g = [
 			"group-divider": !0,
 			vertical: e?.direction === "vertical"
 		};
-		return c`
+		return l`
       <button
         type=${this.type}
-        aria-label=${p(this.ariaLabel)}
-        class=${m(n)}
-        style=${Object.keys(this._sizeStyle).length > 0 ? h(this._sizeStyle) : l}
+        aria-label=${m(this.ariaLabel)}
+        class=${h(n)}
+        part="button"
+        style=${Object.keys(this._sizeStyle).length > 0 ? g(this._sizeStyle) : u}
         ?disabled=${this.disabled || this.loading}
         @click=${this.handleClick}
       >
-        ${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>` : ""}
+        ${this.icon ? this.loading ? l`<web-ui-icon .icon=${t} spin></web-ui-icon>` : l`<slot></slot>` : l`
+                ${this.loading ? l`<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 && !e.isLast ? l`<span class=${h(r)} aria-hidden="true"></span>` : ""}
     `;
 	}
 };
-e([f({
+e([p({
 	type: String,
 	reflect: !0
-})], v.prototype, "variant", null), e([f({
+})], y.prototype, "variant", null), e([p({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "disabled", void 0), e([f({
+})], y.prototype, "disabled", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "loading", void 0), e([f({
+})], y.prototype, "loading", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "full", void 0), e([f({
+})], y.prototype, "full", void 0), e([p({
 	type: Boolean,
 	reflect: !0
-})], v.prototype, "icon", void 0), e([f({
+})], y.prototype, "icon", void 0), e([p({
 	type: String,
 	reflect: !0
-})], v.prototype, "size", void 0), e([f({
+})], y.prototype, "size", void 0), e([p({
 	type: String,
 	reflect: !0
-})], v.prototype, "type", null), e([f({
+})], y.prototype, "type", null), e([p({
 	type: String,
 	attribute: "aria-label"
-})], v.prototype, "ariaLabel", void 0), v = e([d("web-ui-button")], v);
+})], y.prototype, "ariaLabel", void 0), y = e([f("web-ui-button")], y);
 //#endregion
-export { v as WebUiButton };
+export { y 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 { 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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"}
+{"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 { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\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 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        part=\"button\"\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;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%)}";
+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);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,#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([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,#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  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":""}
+{"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: 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 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/* pointer-focus helper 把标记写到 shadow host 上；这里抑制 Shadow DOM 内按钮的 focus ring。 */\n:host([data-wui-pointer-focus]) button:focus-visible {\n  outline-color: transparent;\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/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);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}";
+var e = "*,:before,:after{box-sizing:border-box}:host{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);width:max-content;height:var(--wui-control-size,36px);border-radius:var(--wui-radius-control,calc(infinity * 1px));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: 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":""}
+{"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  --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: 4px;\n  align-items: center;\n\n  width: max-content;\n  height: var(--wui-control-size, 36px);\n  padding: 0 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  width: var(--wui-control-size, 36px);\n  height: auto;\n  padding: 4px 0;\n}\n"],"mappings":""}