@greypan/web-ui 11.0.0 → 11.2.0

package/dist/components/badge/index.js

@@ -1,5 +1,5 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import t from "../../assets/glass.js";
+import t from "../../classes/glass.js";
 import { normalizeLiteral as n, normalizeNumber as r } from "../../shared/normalize/index.js";
 import i from "./style.js";
 import { LitElement as a, html as o, unsafeCSS as s } from "lit";
@@ -13,10 +13,15 @@ var m = [
 	"top-left",
 	"bottom-right",
 	"bottom-left"
-], h = 2 ** 53 - 1, g = class extends a {
+], h = 2 ** 53 - 1;
+function g(e) {
+	for (let t of e) if (t.nodeType === Node.TEXT_NODE && t.textContent?.trim() || t.nodeType === Node.ELEMENT_NODE && t.slot === "") return !0;
+	return !1;
+}
+var _ = class extends a {
 	constructor(...e) {
-		super(...e), this._count = 0, this._max = 99, this.dot = !1, this.showZero = !1, this.badgeHidden = !1, this.offsetX = 0, this.offsetY = 0, this._placement = "top-right", this._hasContent = !1, this._handleSlotChange = () => {
-			this._hasContent = this.children.length > 0;
+		super(...e), this._count = 0, this._max = 99, this.dot = !1, this.showZero = !1, this.badgeHidden = !1, this.offsetX = 0, this.offsetY = 0, this._placement = "top-right", this._hasContent = !1, this._contentObserver = new MutationObserver(() => this._syncHasContent()), this._handleSlotChange = () => {
+			this._syncHasContent();
 		};
 	}
 	static {
@@ -55,8 +60,18 @@ var m = [
 	get placement() {
 		return this._placement;
 	}
+	_syncHasContent() {
+		let e = this.renderRoot.querySelector("slot");
+		this._hasContent = g(e?.assignedNodes() ?? this.childNodes);
+	}
 	connectedCallback() {
-		super.connectedCallback(), this._hasContent = this.children.length > 0;
+		super.connectedCallback(), this._syncHasContent(), this._contentObserver.observe(this, {
+			characterData: !0,
+			subtree: !0
+		});
+	}
+	disconnectedCallback() {
+		this._contentObserver.disconnect(), super.disconnectedCallback();
 	}
 	render() {
 		let e = this.badgeHidden ? !1 : this.dot ? !0 : this.count > 0 || this.showZero, t = this.dot ? "" : this.count > this.max ? `${this.max}+` : String(this.count), n = this.dot ? "Unread" : this.count > 0 ? `${this.count} unread messages` : this.showZero ? "No unread messages" : void 0, r = {
@@ -87,33 +102,33 @@ var m = [
 e([l({
 	type: Number,
 	reflect: !0
-})], g.prototype, "count", null), e([l({
+})], _.prototype, "count", null), e([l({
 	type: Number,
 	reflect: !0
-})], g.prototype, "max", null), e([l({
+})], _.prototype, "max", null), e([l({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "dot", void 0), e([l({
+})], _.prototype, "dot", void 0), e([l({
 	type: Boolean,
 	reflect: !0,
 	attribute: "show-zero"
-})], g.prototype, "showZero", void 0), e([l({
+})], _.prototype, "showZero", void 0), e([l({
 	type: Boolean,
 	reflect: !0,
 	attribute: "badge-hidden"
-})], g.prototype, "badgeHidden", void 0), e([l({
+})], _.prototype, "badgeHidden", void 0), e([l({
 	type: Number,
 	reflect: !0,
 	attribute: "offset-x"
-})], g.prototype, "offsetX", void 0), e([l({
+})], _.prototype, "offsetX", void 0), e([l({
 	type: Number,
 	reflect: !0,
 	attribute: "offset-y"
-})], g.prototype, "offsetY", void 0), e([l({
+})], _.prototype, "offsetY", void 0), e([l({
 	type: String,
 	reflect: !0
-})], g.prototype, "placement", null), e([u()], g.prototype, "_hasContent", void 0), g = e([c("web-ui-badge")], g);
+})], _.prototype, "placement", null), e([u()], _.prototype, "_hasContent", void 0), _ = e([c("web-ui-badge")], _);
 //#endregion
-export { g as WebUiBadge };
+export { _ as WebUiBadge };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/badge/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const\nconst MAX_SAFE = Number.MAX_SAFE_INTEGER\n\n@customElement('web-ui-badge')\nexport class WebUiBadge extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: Number, reflect: true })\n  set count(value: number) {\n    const normalized = normalizeNumber(value, 0, MAX_SAFE, 0)\n    if (this._count !== normalized) {\n      const old = this._count\n      this._count = normalized\n      this.requestUpdate('count', old)\n    }\n    if (this.getAttribute('count') !== String(normalized)) {\n      this.setAttribute('count', String(normalized))\n    }\n  }\n\n  get count(): number {\n    return this._count\n  }\n\n  private _count = 0\n\n  @property({ type: Number, reflect: true })\n  set max(value: number) {\n    const normalized = normalizeNumber(value, 0, MAX_SAFE, 99)\n    if (this._max !== normalized) {\n      const old = this._max\n      this._max = normalized\n      this.requestUpdate('max', old)\n    }\n    if (this.getAttribute('max') !== String(normalized)) {\n      this.setAttribute('max', String(normalized))\n    }\n  }\n\n  get max(): number {\n    return this._max\n  }\n\n  private _max = 99\n\n  @property({ type: Boolean, reflect: true }) dot = false\n  @property({ type: Boolean, reflect: true, attribute: 'show-zero' }) showZero = false\n  @property({ type: Boolean, reflect: true, attribute: 'badge-hidden' }) badgeHidden = false\n  @property({ type: Number, reflect: true, attribute: 'offset-x' }) offsetX = 0\n  @property({ type: Number, reflect: true, attribute: 'offset-y' }) offsetY = 0\n\n  @property({ type: String, reflect: true })\n  set placement(value: string) {\n    const normalized = normalizeLiteral(value, ALLOWED_PLACEMENTS, 'top-right')\n    if (this._placement !== normalized) {\n      const old = this._placement\n      this._placement = normalized\n      this.requestUpdate('placement', old)\n    }\n    if (this.getAttribute('placement') !== normalized) {\n      this.setAttribute('placement', normalized)\n    }\n  }\n\n  get placement(): 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {\n    return this._placement\n  }\n\n  private _placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right'\n\n  @state() private _hasContent = false\n\n  private readonly _handleSlotChange = () => {\n    this._hasContent = this.children.length > 0\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._hasContent = this.children.length > 0\n  }\n\n  override render() {\n    const showBadge = this.badgeHidden ? false : this.dot ? true : this.count > 0 || this.showZero\n    const display = this.dot ? '' : this.count > this.max ? `${this.max}+` : String(this.count)\n    const ariaLabel = this.dot\n      ? 'Unread'\n      : this.count > 0\n        ? `${this.count} unread messages`\n        : this.showZero\n          ? 'No unread messages'\n          : undefined\n    const wrapperClass = { 'badge-wrapper': true, 'badge-wrapper-fixed': this._hasContent }\n    const badgeClass = { badge: true, 'badge-dot': this.dot, 'badge-fixed': this._hasContent }\n    const badgeStyle = {\n      '--badge-offset-x': `${this.offsetX}px`,\n      '--badge-offset-y': `${this.offsetY}px`\n    }\n\n    return html`\n      <div class=${classMap(wrapperClass)}>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n        ${\n          showBadge\n            ? html`<span\n                class=${classMap(badgeClass)}\n                style=${styleMap(badgeStyle)}\n                role=\"status\"\n                aria-label=${ifDefined(ariaLabel)}\n                >${display}</span\n              >`\n            : ''\n        }\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-badge': WebUiBadge\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/badge/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/classes/glass.css?inline'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = ['top-right', 'top-left', 'bottom-right', 'bottom-left'] as const\nconst MAX_SAFE = Number.MAX_SAFE_INTEGER\n\nfunction hasDefaultSlotContent(nodes: Iterable<Node>): boolean {\n  for (const node of nodes) {\n    if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) return true\n    if (node.nodeType === Node.ELEMENT_NODE && (node as Element).slot === '') return true\n  }\n  return false\n}\n\n@customElement('web-ui-badge')\nexport class WebUiBadge extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: Number, reflect: true })\n  set count(value: number) {\n    const normalized = normalizeNumber(value, 0, MAX_SAFE, 0)\n    if (this._count !== normalized) {\n      const old = this._count\n      this._count = normalized\n      this.requestUpdate('count', old)\n    }\n    if (this.getAttribute('count') !== String(normalized)) {\n      this.setAttribute('count', String(normalized))\n    }\n  }\n\n  get count(): number {\n    return this._count\n  }\n\n  private _count = 0\n\n  @property({ type: Number, reflect: true })\n  set max(value: number) {\n    const normalized = normalizeNumber(value, 0, MAX_SAFE, 99)\n    if (this._max !== normalized) {\n      const old = this._max\n      this._max = normalized\n      this.requestUpdate('max', old)\n    }\n    if (this.getAttribute('max') !== String(normalized)) {\n      this.setAttribute('max', String(normalized))\n    }\n  }\n\n  get max(): number {\n    return this._max\n  }\n\n  private _max = 99\n\n  @property({ type: Boolean, reflect: true }) dot = false\n  @property({ type: Boolean, reflect: true, attribute: 'show-zero' }) showZero = false\n  @property({ type: Boolean, reflect: true, attribute: 'badge-hidden' }) badgeHidden = false\n  @property({ type: Number, reflect: true, attribute: 'offset-x' }) offsetX = 0\n  @property({ type: Number, reflect: true, attribute: 'offset-y' }) offsetY = 0\n\n  @property({ type: String, reflect: true })\n  set placement(value: string) {\n    const normalized = normalizeLiteral(value, ALLOWED_PLACEMENTS, 'top-right')\n    if (this._placement !== normalized) {\n      const old = this._placement\n      this._placement = normalized\n      this.requestUpdate('placement', old)\n    }\n    if (this.getAttribute('placement') !== normalized) {\n      this.setAttribute('placement', normalized)\n    }\n  }\n\n  get placement(): 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' {\n    return this._placement\n  }\n\n  private _placement: 'top-right' | 'top-left' | 'bottom-right' | 'bottom-left' = 'top-right'\n\n  @state() private _hasContent = false\n\n  private readonly _contentObserver = new MutationObserver(() => this._syncHasContent())\n\n  private readonly _handleSlotChange = () => {\n    this._syncHasContent()\n  }\n\n  private _syncHasContent(): void {\n    const slot = this.renderRoot.querySelector('slot')\n    this._hasContent = hasDefaultSlotContent(slot?.assignedNodes() ?? this.childNodes)\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._syncHasContent()\n    this._contentObserver.observe(this, { characterData: true, subtree: true })\n  }\n\n  override disconnectedCallback() {\n    this._contentObserver.disconnect()\n    super.disconnectedCallback()\n  }\n\n  override render() {\n    const showBadge = this.badgeHidden ? false : this.dot ? true : this.count > 0 || this.showZero\n    const display = this.dot ? '' : this.count > this.max ? `${this.max}+` : String(this.count)\n    const ariaLabel = this.dot\n      ? 'Unread'\n      : this.count > 0\n        ? `${this.count} unread messages`\n        : this.showZero\n          ? 'No unread messages'\n          : undefined\n    const wrapperClass = { 'badge-wrapper': true, 'badge-wrapper-fixed': this._hasContent }\n    const badgeClass = { badge: true, 'badge-dot': this.dot, 'badge-fixed': this._hasContent }\n    const badgeStyle = {\n      '--badge-offset-x': `${this.offsetX}px`,\n      '--badge-offset-y': `${this.offsetY}px`\n    }\n\n    return html`\n      <div class=${classMap(wrapperClass)}>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n        ${\n          showBadge\n            ? html`<span\n                class=${classMap(badgeClass)}\n                style=${styleMap(badgeStyle)}\n                role=\"status\"\n                aria-label=${ifDefined(ariaLabel)}\n                >${display}</span\n              >`\n            : ''\n        }\n      </div>\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-badge': WebUiBadge\n  }\n}\n"],"mappings":"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"}

package/dist/components/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;min-width:18px;height:18px;padding:0 var(--wui-space-1,4px);border:1px solid var(--wui-color-page,#fff);border-radius:var(--wui-radius-control,calc(infinity * 1px));font-size:var(--wui-font-size-caption,12px);font-weight:var(--wui-font-weight-medium,500);color:var(--wui-color-on-accent,#fff);white-space:nowrap;background-color:var(--wui-color-danger,#dc2626);justify-content:center;align-items:center;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{pointer-events:none;z-index:1;min-width:18px;height:18px;padding:0 var(--wui-space-1,4px);border:1px solid var(--wui-color-page,#fff);border-radius:var(--wui-radius-control,calc(infinity * 1px));font-size:var(--wui-font-size-caption,12px);font-weight:var(--wui-font-weight-medium,500);color:var(--wui-color-on-danger,#fff);white-space:nowrap;background-color:var(--wui-color-danger,#dc2626);justify-content:center;align-items:center;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 var(--wui-space-1, 4px);\n  border: 1px solid var(--wui-color-page, #fff);\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  font-size: var(--wui-font-size-caption, 12px);\n  font-weight: var(--wui-font-weight-medium, 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: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.badge-dot {\n  min-width: 8px;\n  height: 8px;\n  padding: 0;\n  font-size: 0;\n}\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  pointer-events: none;\n\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 var(--wui-space-1, 4px);\n  border: 1px solid var(--wui-color-page, #fff);\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  font-size: var(--wui-font-size-caption, 12px);\n  font-weight: var(--wui-font-weight-medium, 500);\n  line-height: 1;\n  color: var(--wui-color-on-danger, #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: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.badge-dot {\n  min-width: 8px;\n  height: 8px;\n  padding: 0;\n  font-size: 0;\n}\n\n.badge-fixed.badge-dot {\n  --badge-x: 40%;\n  --badge-y: -40%;\n}\n"],"mappings":""}

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

@@ -378,13 +378,16 @@ export declare class WebUiButton extends WebUiButton_base {
     set type(value: unknown);
     private _type;
     ariaLabel: string | null;
+    ariaExpanded: string | null;
     private readonly _groupManagement;
     private get _groupContext();
     private readonly _formAssociation;
     private readonly _formAssociationController;
     private get _isDisabled();
+    constructor();
     private get _sizeStyle();
     private handleClick;
+    private readonly _handleHostClick;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

package/dist/components/button/index.js

@@ -1,6 +1,6 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import "../icon/index.js";
-import t from "../../assets/glass.js";
+import t from "../../classes/glass.js";
 import n from "../../icons/generated/lucide-loader-circle.js";
 import { installPointerFocusSuppression as r } from "../../shared/focus/pointer-focus.js";
 import { FormAssociated as i, FormAssociationController as a, defineFormAssociation as o } from "../../shared/form-association/index.js";
@@ -26,20 +26,6 @@ var b = [
 ];
 r();
 var S = class extends i(d) {
-	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 = c(this, {
-			context: s,
-			requestUpdate: () => this.requestUpdate(),
-			equals: (e, t) => e?.direction === t?.direction && e?.isLast === t?.isLast
-		}).make(), this._formAssociation = o({
-			host: this,
-			getState: () => null,
-			setState: () => {},
-			getFormValue: () => null,
-			getFormState: () => null,
-			restoreState: () => {}
-		}).make(), this._formAssociationController = new a(this, this._formAssociation);
-	}
 	static {
 		this.styles = [m(t), m(u)];
 	}
@@ -63,9 +49,28 @@ var S = class extends i(d) {
 	get _isDisabled() {
 		return this.disabled || this.loading || this._formAssociation.isFormDisabled();
 	}
+	constructor() {
+		super(), this._variant = "glass", this.disabled = !1, this.loading = !1, this.full = !1, this.icon = !1, this.size = "", this._type = "button", this.ariaLabel = null, this.ariaExpanded = null, this._groupManagement = c(this, {
+			context: s,
+			requestUpdate: () => this.requestUpdate(),
+			equals: (e, t) => e?.direction === t?.direction && e?.isLast === t?.isLast
+		}).make(), this._formAssociation = o({
+			host: this,
+			getState: () => null,
+			setState: () => {},
+			getFormValue: () => null,
+			getFormState: () => null,
+			restoreState: () => {}
+		}).make(), this._formAssociationController = new a(this, this._formAssociation), this._handleHostClick = (e) => {
+			e.composedPath()[0] === this && this._isDisabled && (e.preventDefault(), e.stopPropagation());
+		}, this.addEventListener("click", this._handleHostClick);
+	}
 	get _sizeStyle() {
-		let e = this._groupContext ? "30" : this.size;
-		return e ? { "--wui-control-size": `${e}px` } : {};
+		if (this._groupContext) return { "--wui-control-size": "var(--wui-internal-button-group-button-size, 30px)" };
+		let e = this.size;
+		if (typeof e != "string" && typeof e != "number") return {};
+		let t = `${e}`.trim();
+		return t ? { "--wui-control-size": /^[+-]?(?:\d+\.?\d*|\.\d+)(?:e[+-]?\d+)?$/i.test(t) ? `${Number(t)}px` : t } : {};
 	}
 	handleClick(e) {
 		if (this._isDisabled) {
@@ -91,6 +96,7 @@ var S = class extends i(d) {
       <button
         type=${this.type}
         aria-label=${v(this.ariaLabel)}
+        aria-expanded=${v(this.ariaExpanded)}
         class=${_(t)}
         part="button"
         style=${Object.keys(this._sizeStyle).length > 0 ? y(this._sizeStyle) : p}
@@ -132,7 +138,10 @@ e([g({
 })], S.prototype, "type", null), e([g({
 	type: String,
 	attribute: "aria-label"
-})], S.prototype, "ariaLabel", void 0), S = e([h("web-ui-button")], S);
+})], S.prototype, "ariaLabel", void 0), e([g({
+	type: String,
+	attribute: "aria-expanded"
+})], S.prototype, "ariaExpanded", void 0), S = e([h("web-ui-button")], S);
 //#endregion
 export { S as WebUiButton };
 

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import '@/components/icon'\n\nimport { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { buttonGroupContextKey, defineGroupManaged, type ButtonGroupContext } from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_VARIANTS = ['primary', 'secondary', 'ghost', 'danger', 'glass'] as const\nconst ALLOWED_TYPES = ['button', 'submit', 'reset'] as const\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-button')\nexport class WebUiButton extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get variant(): 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass' {\n    return this._variant\n  }\n  set variant(v: string) {\n    const old = this._variant\n    this._variant = normalizeLiteral(v, ALLOWED_VARIANTS, 'glass')\n    this.requestUpdate('variant', old)\n  }\n  private _variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass' = 'glass'\n\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean, reflect: true }) full = false\n  @property({ type: Boolean, reflect: true }) icon = false\n  @property({ type: String, reflect: true }) size = ''\n\n  @property({ type: String, reflect: true })\n  get type(): (typeof ALLOWED_TYPES)[number] {\n    return this._type\n  }\n  set type(value: unknown) {\n    const old = this._type\n    this._type = normalizeLiteral(value, ALLOWED_TYPES, 'button')\n    this.requestUpdate('type', old)\n  }\n  private _type: (typeof ALLOWED_TYPES)[number] = 'button'\n\n  // 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  /*\n   * button 不贡献表单值，接 shared form-association 只为拿 ElementInternals 与原生禁用回调：\n   * 禁用态由浏览器在宿主 disabled 反射时同步回报，自己镜像一份会漏掉更新时机。\n   */\n  private readonly _formAssociation = defineFormAssociation<null>({\n    host: this,\n    getState: () => null,\n    setState: () => {},\n    getFormValue: () => null,\n    getFormState: () => null,\n    restoreState: () => {}\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this.loading || this._formAssociation.isFormDisabled()\n  }\n\n  private get _sizeStyle(): Record<string, string> {\n    // size 仅控制 button 高度；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._isDisabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n\n    const action = this.type\n    if (action === 'button') return\n\n    /*\n     * Shadow 内 button 没有 form owner；等 composed click 的同步监听器全部完成后，\n     * 再读取宿主的 live form owner 并转发，调用方仍可用 preventDefault 取消这次原生 activation。\n     */\n    setTimeout(() => {\n      if (e.defaultPrevented) return\n      const form = this._formAssociation.getInternals()?.form\n      if (!form) return\n      if (action === 'submit') form.requestSubmit()\n      else form.reset()\n    })\n  }\n\n  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._isDisabled}\n        @click=${this.handleClick}\n      >\n        ${\n          this.icon\n            ? // loading 优先于 icon 内容：icon 模式下只展示 spinner，不投影默认 slot，避免双 icon 叠加\n              this.loading\n              ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>`\n              : html`<slot></slot>`\n            : html`\n                ${this.loading ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>` : ''}\n                <slot name=\"prefix\"></slot>\n                <span class=\"label\"><slot></slot></span>\n                <slot name=\"suffix\"></slot>\n              `\n        }\n      </button>\n      ${\n        groupContext && !groupContext.isLast\n          ? html`<span class=${classMap(dividerClass)} aria-hidden=\"true\"></span>`\n          : ''\n      }\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button': WebUiButton\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import '@/components/icon'\n\nimport { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { ifDefined } from 'lit/directives/if-defined.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\nimport glass from '@/classes/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { buttonGroupContextKey, defineGroupManaged, type ButtonGroupContext } from '@/shared/group-management'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_VARIANTS = ['primary', 'secondary', 'ghost', 'danger', 'glass'] as const\nconst ALLOWED_TYPES = ['button', 'submit', 'reset'] as const\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-button')\nexport class WebUiButton extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get variant(): 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass' {\n    return this._variant\n  }\n  set variant(v: string) {\n    const old = this._variant\n    this._variant = normalizeLiteral(v, ALLOWED_VARIANTS, 'glass')\n    this.requestUpdate('variant', old)\n  }\n  private _variant: 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass' = 'glass'\n\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) loading = false\n  @property({ type: Boolean, reflect: true }) full = false\n  @property({ type: Boolean, reflect: true }) icon = false\n  @property({ type: String, reflect: true }) size = ''\n\n  @property({ type: String, reflect: true })\n  get type(): (typeof ALLOWED_TYPES)[number] {\n    return this._type\n  }\n  set type(value: unknown) {\n    const old = this._type\n    this._type = normalizeLiteral(value, ALLOWED_TYPES, 'button')\n    this.requestUpdate('type', old)\n  }\n  private _type: (typeof ALLOWED_TYPES)[number] = 'button'\n\n  /*\n   * Explicitly delegated ARIA attributes.\n   *\n   * `aria-disabled` 不在其中：禁用只有 `disabled` 一条路径，它把内部原生 button 真的置为\n   * disabled（不可点、不进 tab 序列）。`aria-disabled` 那套「看起来禁用但仍可聚焦」的\n   * 语义不提供，因此既不读取也不转发——写上去只留在宿主，对行为零影响。\n   */\n  @property({ type: String, attribute: 'aria-label' }) override ariaLabel: string | null = null\n  @property({ type: String, attribute: 'aria-expanded' }) override ariaExpanded: string | null = null\n\n  private readonly _groupManagement = defineGroupManaged<ButtonGroupContext>(this, {\n    context: buttonGroupContextKey,\n    requestUpdate: () => this.requestUpdate(),\n    equals: (a, b) => a?.direction === b?.direction && a?.isLast === b?.isLast\n  }).make()\n\n  private get _groupContext(): ButtonGroupContext | undefined {\n    return this._groupManagement.getContext()\n  }\n\n  /*\n   * button 不贡献表单值，接 shared form-association 只为拿 ElementInternals 与原生禁用回调：\n   * 禁用态由浏览器在宿主 disabled 反射时同步回报，自己镜像一份会漏掉更新时机。\n   */\n  private readonly _formAssociation = defineFormAssociation<null>({\n    host: this,\n    getState: () => null,\n    setState: () => {},\n    getFormValue: () => null,\n    getFormState: () => null,\n    restoreState: () => {}\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this.loading || this._formAssociation.isFormDisabled()\n  }\n\n  constructor() {\n    super()\n    this.addEventListener('click', this._handleHostClick)\n  }\n\n  private get _sizeStyle(): Record<string, string> {\n    // size 仅控制 button 高度；icon 模式下 min-width 同步为相同值，天然保持正方形。\n    if (this._groupContext) {\n      return { '--wui-control-size': 'var(--wui-internal-button-group-button-size, 30px)' }\n    }\n\n    const sizeValue: unknown = this.size\n    if (typeof sizeValue !== 'string' && typeof sizeValue !== 'number') return {}\n\n    const size = `${sizeValue}`.trim()\n    if (!size) return {}\n\n    // 裸数字按 px 解释；带单位的 CSS 长度原样使用。\n    const isBareNumber = /^[+-]?(?:\\d+\\.?\\d*|\\.\\d+)(?:e[+-]?\\d+)?$/i.test(size)\n    const cssSize = isBareNumber ? `${Number(size)}px` : size\n    return { '--wui-control-size': cssSize }\n  }\n\n  private handleClick(e: Event) {\n    if (this._isDisabled) {\n      e.preventDefault()\n      e.stopPropagation()\n      return\n    }\n\n    const action = this.type\n    if (action === 'button') return\n\n    /*\n     * Shadow 内 button 没有 form owner；等 composed click 的同步监听器全部完成后，\n     * 再读取宿主的 live form owner 并转发，调用方仍可用 preventDefault 取消这次原生 activation。\n     */\n    setTimeout(() => {\n      if (e.defaultPrevented) return\n      const form = this._formAssociation.getInternals()?.form\n      if (!form) return\n      if (action === 'submit') form.requestSubmit()\n      else form.reset()\n    })\n  }\n\n  private readonly _handleHostClick = (event: Event) => {\n    if (event.composedPath()[0] !== this || !this._isDisabled) return\n    event.preventDefault()\n    event.stopPropagation()\n  }\n\n  override render() {\n    const groupContext = this._groupContext\n    const btnClass = {\n      'wui-glass': this.variant === 'glass' && !groupContext,\n      'is-grouped': Boolean(groupContext)\n    }\n    const dividerClass = {\n      'group-divider': true,\n      vertical: groupContext?.direction === 'vertical'\n    }\n\n    return html`\n      <button\n        type=${this.type}\n        aria-label=${ifDefined(this.ariaLabel)}\n        aria-expanded=${ifDefined(this.ariaExpanded)}\n        class=${classMap(btnClass)}\n        part=\"button\"\n        style=${Object.keys(this._sizeStyle).length > 0 ? styleMap(this._sizeStyle) : nothing}\n        ?disabled=${this._isDisabled}\n        @click=${this.handleClick}\n      >\n        ${\n          this.icon\n            ? // loading 优先于 icon 内容：icon 模式下只展示 spinner，不投影默认 slot，避免双 icon 叠加\n              this.loading\n              ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>`\n              : html`<slot></slot>`\n            : html`\n                ${this.loading ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>` : ''}\n                <slot name=\"prefix\"></slot>\n                <span class=\"label\"><slot></slot></span>\n                <slot name=\"suffix\"></slot>\n              `\n        }\n      </button>\n      ${\n        groupContext && !groupContext.isLast\n          ? html`<span class=${classMap(dividerClass)} aria-hidden=\"true\"></span>`\n          : ''\n      }\n    `\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button': WebUiButton\n  }\n}\n"],"mappings":"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"}

package/dist/components/button/style.js

@@ -1,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,var(--wui-space-2,8px));box-sizing:border-box;width:var(--wui-button-width,max-content);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);padding:0 var(--wui-button-px,var(--wui-space-3,12px));border-radius:var(--wui-radius-control,calc(infinity * 1px));font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-button-color);white-space:nowrap;background-color:var(--wui-button-bg);border:none;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative;overflow:clip}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#08f) 40%, transparent));outline-offset:2px}@media (hover:hover) and (pointer:fine){button:hover:not(:disabled){background-color:var(--wui-button-bg-hover)}}button:active:not(:disabled){background-color:var(--wui-button-bg-active)}:host([full]) button{width:100%;display:flex}:host([icon]) button{padding:0}:host([data-wui-pointer-focus]) button:focus-visible{outline-color:#0000}:host([variant=primary]){--wui-button-color:var(--wui-color-on-accent,#fff);--wui-button-bg:var(--wui-color-accent,#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;width:1px;height:var(--wui-button-group-divider-length,20px);background-color:var(--wui-color-border,#0000001a);position:absolute;top:50%;right:-2px;transform:translateY(-50%)}.group-divider.vertical{width:var(--wui-button-group-divider-length,20px);height:1px;inset:auto auto -2px 50%;transform:translate(-50%)}";
+var e = "*,:before,:after{box-sizing:border-box}:host{justify-content:center;align-items:center;display:inline-flex;position:relative}:host([full]){width:100%;display:block}:host([disabled]){cursor:not-allowed}button{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);cursor:default;-webkit-user-select:none;user-select:none;gap:var(--wui-button-gap,var(--wui-space-2,8px));box-sizing:border-box;width:var(--wui-button-width,max-content);min-width:var(--wui-control-size,36px);height:var(--wui-control-size,36px);padding:0 var(--wui-button-px,var(--wui-space-3,12px));border-radius:var(--wui-radius-control,calc(infinity * 1px));font:inherit;font-size:var(--wui-font-size,14px);color:var(--wui-button-color);white-space:nowrap;background-color:var(--wui-button-bg);border:none;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative;overflow:clip}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,color-mix(in srgb, var(--wui-color-accent,#0071e3) 40%, transparent));outline-offset:2px}@media (hover:hover) and (pointer:fine){button:hover:not(:disabled){background-color:var(--wui-button-bg-hover)}}button:active:not(:disabled){background-color:var(--wui-button-bg-active)}:host([full]) button{width:100%;display:flex}:host([icon]) button{padding:0}:host([data-wui-pointer-focus]) button:focus-visible{outline-color:#0000}:host([variant=primary]){--wui-button-color:var(--wui-color-on-accent,#fff);--wui-button-bg:var(--wui-color-accent,#0071e3);--wui-button-bg-hover:color-mix(in srgb, var(--wui-button-bg,#0071e3) 94%, black);--wui-button-bg-active:color-mix(in srgb, var(--wui-button-bg,#0071e3) 90%, black)}:host([variant=secondary]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:var(--wui-color-surface-control,#dfdfdf);--wui-button-bg-hover:color-mix(in srgb, var(--wui-button-bg,#dfdfdf) 92%, black);--wui-button-bg-active:color-mix(in srgb, var(--wui-button-bg,#dfdfdf) 82%, black)}:host([variant=ghost]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:var(--wui-color-state-layer-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent));--wui-button-bg-active:var(--wui-color-state-layer-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent))}:host([variant=danger]){--wui-button-color:var(--wui-color-danger,#dc2626);--wui-button-bg:color-mix(in srgb, var(--wui-color-danger,#dc2626) 18%, var(--wui-color-surface,#fff));--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-danger,#dc2626) 26%, var(--wui-color-surface,#fff));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-danger,#dc2626) 45%, var(--wui-color-surface,#fff))}:host([variant=glass]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:var(--wui-color-surface-glass-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, var(--wui-color-surface-glass,#fafafa57)));--wui-button-bg-active:var(--wui-color-surface-glass-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, var(--wui-color-surface-glass,#fafafa57)))}button.is-grouped{--wui-button-bg:transparent;--wui-button-bg-hover:var(--wui-color-state-layer-hover,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent));--wui-button-bg-active:var(--wui-color-state-layer-active,color-mix(in srgb, var(--wui-color-text,#1b1b1b) 15%, transparent))}.group-divider{z-index:1;width:1px;height:var(--wui-button-group-divider-length,20px);background-color:var(--wui-color-border,#0000001a);position:absolute;top:50%;right:-2px;transform:translateY(-50%)}.group-divider.vertical{width:var(--wui-button-group-divider-length,20px);height:1px;inset:auto auto -2px 50%;transform:translate(-50%)}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/button/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n\n  /* inline-flex 让内层 button 在宿主内完全居中，避免继承的行高撑高宿主、导致 icon 偏移 */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:host([full]) {\n  display: block;\n  width: 100%;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\nbutton {\n  --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n  cursor: default;\n  user-select: none;\n\n  position: relative;\n\n  overflow: clip;\n  display: inline-flex;\n  gap: var(--wui-button-gap, var(--wui-space-2, 8px));\n  align-items: center;\n  justify-content: center;\n\n  box-sizing: border-box;\n  width: var(--wui-button-width, max-content);\n  min-width: var(--wui-control-size, 36px);\n  height: var(--wui-control-size, 36px);\n  padding: 0 var(--wui-button-px, var(--wui-space-3, 12px));\n  border: none;\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  /* 原生 button 不继承字体；显式继承以对齐宿主排版，避免 UA 默认 Arial 差异 */\n  font: inherit;\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-button-color);\n  white-space: nowrap;\n\n  background-color: var(--wui-button-bg);\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: var(--wui-focus-ring-width, 3px) solid\n      var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #08f) 40%, transparent));\n    outline-offset: 2px;\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  button:hover:not(:disabled) {\n    background-color: var(--wui-button-bg-hover);\n  }\n}\n\nbutton:active:not(:disabled) {\n  background-color: var(--wui-button-bg-active);\n}\n\n:host([full]) button {\n  display: flex;\n  width: 100%;\n}\n\n:host([icon]) button {\n  padding: 0;\n}\n\n/* pointer-focus helper 把标记写到 shadow host 上；这里抑制 Shadow DOM 内 button 的 focus ring。 */\n:host([data-wui-pointer-focus]) button:focus-visible {\n  outline-color: transparent;\n}\n\n:host([variant='primary']) {\n  --wui-button-color: var(--wui-color-on-accent, #fff);\n  --wui-button-bg: var(--wui-color-accent, #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:host([variant='secondary']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: var(--wui-color-surface-control, #dfdfdf);\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-button-bg, #dfdfdf) 92%, black);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-button-bg, #dfdfdf) 82%, black);\n}\n\n:host([variant='ghost']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: var(\n    --wui-color-state-layer-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent)\n  );\n  --wui-button-bg-active: var(\n    --wui-color-state-layer-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent)\n  );\n}\n\n:host([variant='danger']) {\n  --wui-button-color: var(--wui-color-danger, #dc2626);\n  --wui-button-bg: color-mix(in srgb, var(--wui-color-danger, #dc2626) 18%, var(--wui-color-surface, #fff));\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-danger, #dc2626) 26%, var(--wui-color-surface, #fff));\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-danger, #dc2626) 45%, var(--wui-color-surface, #fff));\n}\n\n/* .wui-glass 样式由 @/assets/glass.css 提供 */\n:host([variant='glass']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n\n  /* standalone glass 底色由 .wui-glass 提供；hover/active 需要还原玻璃底，避免被 button 状态色整块替换 */\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: var(\n    --wui-color-surface-glass-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n  );\n  --wui-button-bg-active: var(\n    --wui-color-surface-glass-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n  );\n}\n\nbutton.is-grouped {\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: var(\n    --wui-color-state-layer-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent)\n  );\n  --wui-button-bg-active: var(\n    --wui-color-state-layer-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent)\n  );\n}\n\n.group-divider {\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  right: -2px;\n  transform: translateY(-50%);\n\n  width: 1px;\n  height: var(--wui-button-group-divider-length, 20px);\n\n  background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n.group-divider.vertical {\n  top: auto;\n  right: auto;\n  bottom: -2px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  width: var(--wui-button-group-divider-length, 20px);\n  height: 1px;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/button/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  position: relative;\n\n  /* inline-flex 让内层 button 在宿主内完全居中，避免继承的行高撑高宿主、导致 icon 偏移 */\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n}\n\n:host([full]) {\n  display: block;\n  width: 100%;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\nbutton {\n  --wui-glass-corner-radius: calc(var(--wui-control-size, 36px) / 2);\n  cursor: default;\n  user-select: none;\n\n  position: relative;\n\n  overflow: clip;\n  display: inline-flex;\n  gap: var(--wui-button-gap, var(--wui-space-2, 8px));\n  align-items: center;\n  justify-content: center;\n\n  box-sizing: border-box;\n  width: var(--wui-button-width, max-content);\n  min-width: var(--wui-control-size, 36px);\n  height: var(--wui-control-size, 36px);\n  padding: 0 var(--wui-button-px, var(--wui-space-3, 12px));\n  border: none;\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  /* 原生 button 不继承字体；显式继承以对齐宿主排版，避免 UA 默认 Arial 差异 */\n  font: inherit;\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-button-color);\n  white-space: nowrap;\n\n  background-color: var(--wui-button-bg);\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: var(--wui-focus-ring-width, 3px) solid\n      var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #0071e3) 40%, transparent));\n    outline-offset: 2px;\n  }\n}\n\n@media (hover: hover) and (pointer: fine) {\n  button:hover:not(:disabled) {\n    background-color: var(--wui-button-bg-hover);\n  }\n}\n\nbutton:active:not(:disabled) {\n  background-color: var(--wui-button-bg-active);\n}\n\n:host([full]) button {\n  display: flex;\n  width: 100%;\n}\n\n:host([icon]) button {\n  padding: 0;\n}\n\n/* pointer-focus helper 把标记写到 shadow host 上；这里抑制 Shadow DOM 内 button 的 focus ring。 */\n:host([data-wui-pointer-focus]) button:focus-visible {\n  outline-color: transparent;\n}\n\n:host([variant='primary']) {\n  --wui-button-color: var(--wui-color-on-accent, #fff);\n  --wui-button-bg: var(--wui-color-accent, #0071e3);\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-button-bg, #0071e3) 94%, black);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-button-bg, #0071e3) 90%, black);\n}\n\n:host([variant='secondary']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: var(--wui-color-surface-control, #dfdfdf);\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-button-bg, #dfdfdf) 92%, black);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-button-bg, #dfdfdf) 82%, black);\n}\n\n:host([variant='ghost']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: var(\n    --wui-color-state-layer-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent)\n  );\n  --wui-button-bg-active: var(\n    --wui-color-state-layer-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent)\n  );\n}\n\n:host([variant='danger']) {\n  --wui-button-color: var(--wui-color-danger, #dc2626);\n  --wui-button-bg: color-mix(in srgb, var(--wui-color-danger, #dc2626) 18%, var(--wui-color-surface, #fff));\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-danger, #dc2626) 26%, var(--wui-color-surface, #fff));\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-danger, #dc2626) 45%, var(--wui-color-surface, #fff));\n}\n\n/* .wui-glass 样式由 @/classes/glass.css 提供 */\n:host([variant='glass']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n\n  /* standalone glass 底色由 .wui-glass 提供；hover/active 需要还原玻璃底，避免被 button 状态色整块替换 */\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: var(\n    --wui-color-surface-glass-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n  );\n  --wui-button-bg-active: var(\n    --wui-color-surface-glass-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, var(--wui-color-surface-glass, rgb(250 250 250 / 0.34)))\n  );\n}\n\nbutton.is-grouped {\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: var(\n    --wui-color-state-layer-hover,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent)\n  );\n  --wui-button-bg-active: var(\n    --wui-color-state-layer-active,\n    color-mix(in srgb, var(--wui-color-text, #1b1b1b) 15%, transparent)\n  );\n}\n\n.group-divider {\n  position: absolute;\n  z-index: 1;\n  top: 50%;\n  right: -2px;\n  transform: translateY(-50%);\n\n  width: 1px;\n  height: var(--wui-button-group-divider-length, 20px);\n\n  background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n.group-divider.vertical {\n  top: auto;\n  right: auto;\n  bottom: -2px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  width: var(--wui-button-group-divider-length, 20px);\n  height: 1px;\n}\n"],"mappings":""}

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

@@ -5,6 +5,9 @@ export declare class WebUiButtonGroup extends LitElement {
     set direction(v: string);
     private _direction;
     private readonly _groupController;
+    private _trackResizeObserver;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
     render(): import('lit').TemplateResult<1>;
 }
 declare global {

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

@@ -1,5 +1,5 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import t from "../../assets/glass.js";
+import t from "../../classes/glass.js";
 import { GroupController as n, buttonGroupContextKey as r, defineGroupPresentation as i } from "../../shared/group-management/index.js";
 import { normalizeLiteral as a } from "../../shared/normalize/index.js";
 import o from "./style.js";
@@ -16,7 +16,7 @@ var f = ["horizontal", "vertical"], p = class extends s {
 				direction: this.direction,
 				isLast: t === n.length - 1
 			})
-		}).make());
+		}).make()), this._trackResizeObserver = null;
 	}
 	static {
 		this.styles = [l(t), l(o)];
@@ -28,6 +28,19 @@ var f = ["horizontal", "vertical"], p = class extends s {
 		let t = this._direction;
 		this._direction = a(e, f, "horizontal"), this.requestUpdate("direction", t);
 	}
+	connectedCallback() {
+		super.connectedCallback(), this.updateComplete.then(() => {
+			if (!this.isConnected || typeof ResizeObserver > "u") return;
+			let e = this.renderRoot.querySelector(".wui-button-group-inner");
+			e && (this._trackResizeObserver ??= new ResizeObserver(() => {
+				let { width: t, height: n } = getComputedStyle(e), r = Math.min(Number.parseFloat(t), Number.parseFloat(n)) / 2;
+				e.style.setProperty("--wui-glass-corner-radius", `${r}px`);
+			}), this._trackResizeObserver.observe(e, { box: "border-box" }));
+		});
+	}
+	disconnectedCallback() {
+		this._trackResizeObserver?.disconnect(), super.disconnectedCallback();
+	}
 	render() {
 		return c`
       <div class="wui-glass wui-button-group-inner">

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

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

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{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);flex-direction:var(--wui-button-group-flex-direction,row);gap:var(--wui-space-1,4px);width:max-content;height:var(--wui-control-size,36px);padding:0 var(--wui-space-1,4px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;display:flex}:host([direction=vertical]){--wui-button-group-flex-direction:column}:host([direction=vertical]) .wui-button-group-inner{width:var(--wui-control-size,36px);height:auto;padding:var(--wui-space-1,4px) 0}";
+var e = "*,:before,:after{box-sizing:border-box}:host{--wui-internal-button-group-button-size:calc(var(--wui-control-size,36px) * 5 / 6);display:inline-block}.wui-button-group-inner{--wui-glass-corner-radius:calc(var(--wui-control-size,36px) / 2);flex-direction:var(--wui-button-group-flex-direction,row);gap:var(--wui-space-1,4px);width:max-content;height:var(--wui-control-size,36px);padding:0 var(--wui-space-1,4px);border-radius:var(--wui-radius-control,calc(infinity * 1px));align-items:center;display:flex}:host([direction=vertical]){--wui-button-group-flex-direction:column}:host([direction=vertical]) .wui-button-group-inner{height:auto;padding:var(--wui-space-1,4px) 0}";
 //#endregion
 export { e as default };
 

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

package/dist/components/checkbox/index.js

@@ -5,8 +5,8 @@ import { installPointerFocusSuppression as n } from "../../shared/focus/pointer-
 import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a } from "../../shared/form-association/index.js";
 import { defineGroupManaged as o, selectionGroupContextKey as s } from "../../shared/group-management/index.js";
 import { parseDuration as c } from "../../shared/theme/duration.js";
-import l from "../../assets/selection-control.js";
-import { prefersReducedMotion as u } from "../../shared/theme/reduced-motion.js";
+import { prefersReducedMotion as l } from "../../shared/theme/reduced-motion.js";
+import u from "../../assets/selection-control.js";
 import "../svg-draw-lines/index.js";
 import { LabelEmptinessController as d } from "../../shared/label-emptiness/index.js";
 import f from "./style.js";
@@ -45,7 +45,7 @@ var S = class extends r(p) {
 		}), this._drawDurationMs = 160;
 	}
 	static {
-		this.styles = [h(l), h(f)];
+		this.styles = [h(u), h(f)];
 	}
 	get checked() {
 		return this._checked;
@@ -89,7 +89,7 @@ var S = class extends r(p) {
 	willUpdate(e) {
 		super.willUpdate(e), this._drawDurationMs = x(this);
 		let t = e.get("_checked");
-		typeof t == "boolean" && (this._retracting = t && !u(this));
+		typeof t == "boolean" && (this._retracting = t && !l(this));
 	}
 	updated(e) {
 		super.updated(e);
@@ -105,7 +105,7 @@ var S = class extends r(p) {
 			"is-disabled": this._isDisabled
 		};
 		return m`
-      <label
+      <span
         class=${b(e)}
         tabindex=${this._isDisabled ? "-1" : "0"}
         role="checkbox"
@@ -121,7 +121,7 @@ var S = class extends r(p) {
           ></span>
         </span>
         <span class="wui-checkbox-label"><slot></slot></span>
-      </label>
+      </span>
     `;
 	}
 };

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox/index.ts"],"sourcesContent":["import '@/components/icon'\n\nimport { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport selectionControl from '@/assets/selection-control.css?inline'\nimport { WebUiSvgDrawLines } from '@/components/svg-draw-lines'\nimport { akarIconsCheck } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupManaged, selectionGroupContextKey, type SelectionGroupContext } from '@/shared/group-management'\nimport { LabelEmptinessController } from '@/shared/label-emptiness'\nimport { parseDuration } from '@/shared/theme/duration'\nimport { prefersReducedMotion } from '@/shared/theme/reduced-motion'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n/*\n * 描边时长取 `--wui-duration-trigger`，让勾和 indicator 底色那条 transition 落在同一拍。\n * 读不到 token 或格式不符时兜底 160，负值钳到 0。\n */\nfunction triggerDuration(el: HTMLElement): number {\n  const parsed = parseDuration(getComputedStyle(el).getPropertyValue('--wui-duration-trigger'))\n  return parsed === null ? 160 : Math.max(0, parsed)\n}\n\n@customElement('web-ui-checkbox')\nexport class WebUiCheckbox extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(selectionControl), unsafeCSS(style)]\n  private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n    context: selectionGroupContextKey,\n    requestUpdate: () => this.requestUpdate()\n  }).make()\n\n  @state() private _checked = false\n\n  /** 描边收回期间把勾按在可见档，见 willUpdate。 */\n  @state() private _retracting = false\n\n  /** label 没有可渲染内容（空槽位，或只挂着一个无障碍名）时收掉 gap，见 LabelEmptinessController。 */\n  @state() private _labelEmpty = 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  private readonly _labelEmptiness = new LabelEmptinessController(this, '.wui-checkbox-label', empty => {\n    this._labelEmpty = empty\n  })\n\n  @query('web-ui-svg-draw-lines') private readonly _drawLines?: WebUiSvgDrawLines\n\n  /** 每次更新重读一次，交给内层描边的 duration 属性；见 willUpdate。 */\n  private _drawDurationMs = 160\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 }, 'Select this option')\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  /*\n   * 收回期间勾要留在可见档，否则 160ms 淡出抢在描边收回之前把它藏掉。翻转放在 willUpdate：\n   * 与 checked 同一次 update 落地，渲染后不再改状态。收回的终点是留在内联样式上的空白，所以这一位\n   * 不需要在动画结束后复位，下一次勾选会清掉；reduced motion 下收回根本不跑，按住可见位就是把勾\n   * 永久留在未勾选的框里，所以那里必须让位给淡出。\n   */\n  override willUpdate(changed: PropertyValues) {\n    super.willUpdate(changed)\n    this._drawDurationMs = triggerDuration(this)\n    const wasChecked = changed.get('_checked')\n    if (typeof wasChecked === 'boolean') {\n      this._retracting = wasChecked && !prefersReducedMotion(this)\n    }\n  }\n\n  /*\n   * 挂载时就勾选是初始状态而非用户勾选，不画线：_checked 的字段初始化器在构造阶段写过一次，\n   * Lit 对同一轮里已记录过旧值的键不再覆盖，所以首帧拿到的是 undefined，之后的每次真实切换才带\n   * boolean 旧值——包括 group 在子项首帧前把选中态写回去那一种。\n   */\n  override updated(changed: PropertyValues) {\n    super.updated(changed)\n    const wasChecked = changed.get('_checked')\n    if (typeof wasChecked !== 'boolean') return\n\n    if (wasChecked) void this._drawLines?.replay({ reverse: true })\n    else void this._drawLines?.replay()\n  }\n\n  override render() {\n    const cls = {\n      'wui-checkbox': true,\n      'is-checked': this._checked,\n      'is-retracting': this._retracting,\n      'is-label-empty': this._labelEmpty,\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-svg-draw-lines duration=${this._drawDurationMs} no-autoplay\n              ><web-ui-icon .icon=${akarIconsCheck}></web-ui-icon></web-ui-svg-draw-lines\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 '@/components/icon'\n\nimport { html, LitElement, type PropertyValues, unsafeCSS } from 'lit'\nimport { customElement, property, query, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport selectionControl from '@/assets/selection-control.css?inline'\nimport { WebUiSvgDrawLines } from '@/components/svg-draw-lines'\nimport { akarIconsCheck } from '@/icons'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupManaged, selectionGroupContextKey, type SelectionGroupContext } from '@/shared/group-management'\nimport { LabelEmptinessController } from '@/shared/label-emptiness'\nimport { parseDuration } from '@/shared/theme/duration'\nimport { prefersReducedMotion } from '@/shared/theme/reduced-motion'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n/*\n * 描边时长取 `--wui-duration-trigger`，让勾和 indicator 底色那条 transition 落在同一拍。\n * 读不到 token 或格式不符时兜底 160，负值钳到 0。\n */\nfunction triggerDuration(el: HTMLElement): number {\n  const parsed = parseDuration(getComputedStyle(el).getPropertyValue('--wui-duration-trigger'))\n  return parsed === null ? 160 : Math.max(0, parsed)\n}\n\n@customElement('web-ui-checkbox')\nexport class WebUiCheckbox extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(selectionControl), unsafeCSS(style)]\n  private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n    context: selectionGroupContextKey,\n    requestUpdate: () => this.requestUpdate()\n  }).make()\n\n  @state() private _checked = false\n\n  /** 描边收回期间把勾按在可见档，见 willUpdate。 */\n  @state() private _retracting = false\n\n  /** label 没有可渲染内容（空槽位，或只挂着一个无障碍名）时收掉 gap，见 LabelEmptinessController。 */\n  @state() private _labelEmpty = 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  private readonly _labelEmptiness = new LabelEmptinessController(this, '.wui-checkbox-label', empty => {\n    this._labelEmpty = empty\n  })\n\n  @query('web-ui-svg-draw-lines') private readonly _drawLines?: WebUiSvgDrawLines\n\n  /** 每次更新重读一次，交给内层描边的 duration 属性；见 willUpdate。 */\n  private _drawDurationMs = 160\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 }, 'Select this option')\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  /*\n   * 收回期间勾要留在可见档，否则 160ms 淡出抢在描边收回之前把它藏掉。翻转放在 willUpdate：\n   * 与 checked 同一次 update 落地，渲染后不再改状态。收回的终点是留在内联样式上的空白，所以这一位\n   * 不需要在动画结束后复位，下一次勾选会清掉；reduced motion 下收回根本不跑，按住可见位就是把勾\n   * 永久留在未勾选的框里，所以那里必须让位给淡出。\n   */\n  override willUpdate(changed: PropertyValues) {\n    super.willUpdate(changed)\n    this._drawDurationMs = triggerDuration(this)\n    const wasChecked = changed.get('_checked')\n    if (typeof wasChecked === 'boolean') {\n      this._retracting = wasChecked && !prefersReducedMotion(this)\n    }\n  }\n\n  /*\n   * 挂载时就勾选是初始状态而非用户勾选，不画线：_checked 的字段初始化器在构造阶段写过一次，\n   * Lit 对同一轮里已记录过旧值的键不再覆盖，所以首帧拿到的是 undefined，之后的每次真实切换才带\n   * boolean 旧值——包括 group 在子项首帧前把选中态写回去那一种。\n   */\n  override updated(changed: PropertyValues) {\n    super.updated(changed)\n    const wasChecked = changed.get('_checked')\n    if (typeof wasChecked !== 'boolean') return\n\n    if (wasChecked) void this._drawLines?.replay({ reverse: true })\n    else void this._drawLines?.replay()\n  }\n\n  override render() {\n    const cls = {\n      'wui-checkbox': true,\n      'is-checked': this._checked,\n      'is-retracting': this._retracting,\n      'is-label-empty': this._labelEmpty,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <span\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-svg-draw-lines duration=${this._drawDurationMs} no-autoplay\n              ><web-ui-icon .icon=${akarIconsCheck}></web-ui-icon></web-ui-svg-draw-lines\n          ></span>\n        </span>\n        <span class=\"wui-checkbox-label\"><slot></slot></span>\n      </span>\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 = ".wui-checkbox-box{border-radius:var(--wui-internal-checkbox-radius,6px)}.is-checked .wui-checkbox-box{border-color:var(--wui-color-accent,#08f);background-color:var(--wui-color-accent,#08f)}.wui-checkbox-icon{--wui-icon-color:var(--wui-color-on-control,#fff);opacity:0;transition:opacity var(--wui-duration-trigger,.16s) ease;font-size:0;line-height:0;display:block;overflow:hidden}.is-checked .wui-checkbox-icon,.is-retracting .wui-checkbox-icon{opacity:1}";
+var e = ".wui-checkbox-box{border-radius:var(--wui-internal-checkbox-radius,6px)}.is-checked .wui-checkbox-box{border-color:var(--wui-color-accent,#0071e3);background-color:var(--wui-color-accent,#0071e3)}.wui-checkbox-icon{--wui-icon-color:var(--wui-color-on-control,#fff);opacity:0;transition:opacity var(--wui-duration-trigger,.16s) ease;font-size:0;line-height:0;display:block;overflow:hidden}.is-checked .wui-checkbox-icon,.is-retracting .wui-checkbox-icon{opacity:1}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/checkbox/style.css?inline"],"sourcesContent":[".wui-checkbox-box {\n  border-radius: var(--wui-internal-checkbox-radius, 6px);\n}\n\n.is-checked .wui-checkbox-box {\n  border-color: var(--wui-color-accent, #08f);\n  background-color: var(--wui-color-accent, #08f);\n}\n\n/*\n * 勾是 @/icons 的描边资产，颜色经 web-ui-icon 的 --wui-icon-color 传入并取 on-control 档：勾选后\n * indicator 底是 accent，勾留在继承的文字色就是深灰压深蓝。资产必须是 fill:none + stroke:currentColor，\n * 换成实心 icon 那条 dash 动画照跑但什么都看不见（判据见 checkbox.motion.browser.spec.ts）。\n * 尺寸是 web-ui-icon 自己的默认 18，宿主够不到嵌套 shadow root 里的 svg，因此不随\n * --wui-selection-control-size 按比例放大。\n */\n.wui-checkbox-icon {\n  --wui-icon-color: var(--wui-color-on-control, #fff);\n\n  overflow: hidden;\n  display: block;\n\n  font-size: 0;\n  line-height: 0;\n\n  opacity: 0;\n\n  transition: opacity var(--wui-duration-trigger, 160ms) ease;\n}\n\n/*\n * is-retracting 是描边收回的那一段：勾得留在可见档，否则这条 160ms 的淡出会抢在收回结束之前\n * 把它藏掉，收回根本看不见。收回的终点是留在内联样式上的「整条路径落在 dash 间隙里」，动画自己\n * 收尾就撤销了，所以停在这里就是看不见的勾，不必再等一次淡出；复位由下一次勾选负责（见 index.ts 的 willUpdate）。\n */\n.is-checked .wui-checkbox-icon,\n.is-retracting .wui-checkbox-icon {\n  opacity: 1;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/checkbox/style.css?inline"],"sourcesContent":[".wui-checkbox-box {\n  border-radius: var(--wui-internal-checkbox-radius, 6px);\n}\n\n.is-checked .wui-checkbox-box {\n  border-color: var(--wui-color-accent, #0071e3);\n  background-color: var(--wui-color-accent, #0071e3);\n}\n\n/*\n * 勾是 @/icons 的描边资产，颜色经 web-ui-icon 的 --wui-icon-color 传入并取 on-control 档：勾选后\n * indicator 底是 accent，勾留在继承的文字色就是深灰压深蓝。资产必须是 fill:none + stroke:currentColor，\n * 换成实心 icon 那条 dash 动画照跑但什么都看不见（判据见 checkbox.motion.browser.spec.ts）。\n * 尺寸是 web-ui-icon 自己的默认 18，宿主够不到嵌套 shadow root 里的 svg，因此不随\n * --wui-selection-control-size 按比例放大。\n */\n.wui-checkbox-icon {\n  --wui-icon-color: var(--wui-color-on-control, #fff);\n\n  overflow: hidden;\n  display: block;\n\n  font-size: 0;\n  line-height: 0;\n\n  opacity: 0;\n\n  transition: opacity var(--wui-duration-trigger, 160ms) ease;\n}\n\n/*\n * is-retracting 是描边收回的那一段：勾得留在可见档，否则这条 160ms 的淡出会抢在收回结束之前\n * 把它藏掉，收回根本看不见。收回的终点是留在内联样式上的「整条路径落在 dash 间隙里」，动画自己\n * 收尾就撤销了，所以停在这里就是看不见的勾，不必再等一次淡出；复位由下一次勾选负责（见 index.ts 的 willUpdate）。\n */\n.is-checked .wui-checkbox-icon,\n.is-retracting .wui-checkbox-icon {\n  opacity: 1;\n}\n"],"mappings":""}