@greypan/web-ui 1.4.2 → 2.0.1

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

@@ -1,9 +1,22 @@
 import { LitElement } from 'lit';
 export declare class WebUiButton extends LitElement {
-    static styles: import('lit').CSSResult;
+    static styles: import('lit').CSSResult[];
+    get variant(): 'primary' | 'secondary' | 'ghost' | 'danger' | 'glass';
+    set variant(v: string);
+    private _variant;
+    disabled: boolean;
+    loading: boolean;
     full: boolean;
-    primary: boolean;
-    text: boolean;
     icon: boolean;
+    size: string;
+    /** size="32" → 32x32，size="32x80" → 32x80 */
+    private get _sizeStyle();
+    private handleClick;
     render(): import('lit').TemplateResult<1>;
+    readonly $events: Record<string, never>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'web-ui-button': WebUiButton;
+    }
 }

package/dist/components/button/index.js

@@ -1,41 +1,80 @@
-import e from "./style.js";
-import t from "../../_virtual/_@oxc-project_runtime@0.138.0/helpers/esm/decorate.js";
-import { LitElement as n, html as r, unsafeCSS as i } from "lit";
-import { customElement as a, property as o } from "lit/decorators.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import "../icon/index.js";
+import t from "../../assets/glass.js";
+import n from "../../icons/generated/lucide-loader-circle.js";
+import { normalizeLiteral as r } from "../../shared/normalize/index.js";
+import i from "./style.js";
+import { LitElement as a, html as o, nothing as s, unsafeCSS as c } from "lit";
+import { customElement as l, property as u } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
+import { styleMap as f } from "lit/directives/style-map.js";
 //#region src/components/button/index.ts
-var s = class extends n {
+var p = [
+	"primary",
+	"secondary",
+	"ghost",
+	"danger",
+	"glass"
+], m = class extends a {
 	constructor(...e) {
-		super(...e), this.full = !1, this.primary = !1, this.text = !1, this.icon = !1;
+		super(...e), this._variant = "glass", this.disabled = !1, this.loading = !1, this.full = !1, this.icon = !1, this.size = "";
 	}
 	static {
-		this.styles = i(e);
+		this.styles = [c(t), c(i)];
+	}
+	get variant() {
+		return this._variant;
+	}
+	set variant(e) {
+		let t = this._variant;
+		this._variant = r(e, p, "glass"), this.requestUpdate("variant", t);
+	}
+	get _sizeStyle() {
+		if (!this.size) return {};
+		let [e, t] = this.size.split("x"), n = { "--wui-button-size": `${e}px` };
+		return t && (n["--wui-button-width"] = `${t}px`), n;
+	}
+	handleClick(e) {
+		(this.disabled || this.loading) && (e.preventDefault(), e.stopPropagation());
 	}
 	render() {
-		return r`
-      <button>
-        ${this.icon ? r`<slot></slot>` : r`
+		return o`
+      <button
+        class=${d({ "wui-glass": this.variant === "glass" && !this.hasAttribute("group") })}
+        style=${this.size ? f(this._sizeStyle) : s}
+        ?disabled=${this.disabled || this.loading}
+        @click=${this.handleClick}
+      >
+        ${this.loading ? o`<web-ui-icon .icon=${n} spin></web-ui-icon>` : ""}
+        ${this.icon ? o`<slot></slot>` : o`
               <slot name="prefix"></slot>
-              <slot></slot>
+              <span class="label"><slot></slot></span>
               <slot name="suffix"></slot>
             `}
       </button>
     `;
 	}
 };
-t([o({
+e([u({
+	type: String,
+	reflect: !0
+})], m.prototype, "variant", null), e([u({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "full", void 0), t([o({
+})], m.prototype, "disabled", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "primary", void 0), t([o({
+})], m.prototype, "loading", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "text", void 0), t([o({
+})], m.prototype, "full", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], s.prototype, "icon", void 0), s = t([a("web-ui-button")], s);
+})], m.prototype, "icon", void 0), e([u({
+	type: String,
+	reflect: !0
+})], m.prototype, "size", void 0), m = e([l("web-ui-button")], m);
 //#endregion
-export { s as WebUiButton };
+export { m 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, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-button')\nexport class WebUiButton extends LitElement {\n  static override styles = unsafeCSS(style)\n\n  @property({ type: Boolean, reflect: true }) full = false\n  @property({ type: Boolean, reflect: true }) primary = false\n  @property({ type: Boolean, reflect: true }) text = false\n  @property({ type: Boolean, reflect: true }) icon = false\n\n  override render() {\n    return html`\n      <button>\n        ${this.icon\n          ? html`<slot></slot>`\n          : html`\n              <slot name=\"prefix\"></slot>\n              <slot></slot>\n              <slot name=\"suffix\"></slot>\n            `}\n      </button>\n    `\n  }\n}\n"],"mappings":";;;;;AAMO,IAAA,IAAA,cAA0B,EAAW;;2BAGS,mBACG,gBACH,gBACA;;;gBAL1B,EAAU,CAAK;;CAOxC,SAAkB;EAChB,OAAO,CAAI;;UAEL,KAAK,OACH,CAAI,kBACJ,CAAI;;;;cAIF;;;CAGZ;AACF;GAlBG,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MACzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,MACzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,MACzC,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,UAP3C,EAAc,eAAe,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button/index.ts"],"sourcesContent":["import { html, LitElement, nothing, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\nimport { styleMap } from 'lit/directives/style-map.js'\n\n// web-ui-icon 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/icon'\nimport glass from '@/assets/glass.css?inline'\nimport { lucideLoaderCircle } from '@/icons'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_VARIANTS = ['primary', 'secondary', 'ghost', 'danger', 'glass'] as const\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  /** size=\"32\" → 32x32，size=\"32x80\" → 32x80 */\n  private get _sizeStyle(): Record<string, string> {\n    if (!this.size) return {}\n    const [h, w] = this.size.split('x')\n    const style: Record<string, string> = { '--wui-button-size': `${h}px` }\n    if (w) style['--wui-button-width'] = `${w}px`\n    return style\n  }\n\n  private handleClick(e: Event) {\n    if (this.disabled || this.loading) {\n      e.preventDefault()\n      e.stopPropagation()\n    }\n  }\n\n  override render() {\n    const btnClass = { 'wui-glass': this.variant === 'glass' && !this.hasAttribute('group') }\n    return html`\n      <button\n        class=${classMap(btnClass)}\n        style=${this.size ? styleMap(this._sizeStyle) : nothing}\n        ?disabled=${this.disabled || this.loading}\n        @click=${this.handleClick}\n      >\n        ${this.loading ? html`<web-ui-icon .icon=${lucideLoaderCircle} spin></web-ui-icon>` : ''}\n        ${this.icon\n          ? html`<slot></slot>`\n          : html`\n              <slot name=\"prefix\"></slot>\n              <span class=\"label\"><slot></slot></span>\n              <slot name=\"suffix\"></slot>\n            `}\n      </button>\n    `\n  }\n\n  declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button': WebUiButton\n  }\n}\n"],"mappings":";;;;;;;;;;;AAaA,IAAM,IAAmB;CAAC;CAAW;CAAa;CAAS;CAAU;AAAO,GAG/D,IAAN,cAA0B,EAAW;;EAkBQ,aANyB,KAAA,WAAA,SAEpB,KAAA,WAAA,IACD,KAAA,UAAA,IACH,KAAA,OAAA,IACA,KAAA,OAAA,IACD,KAAA,OAAA;;;EAjBzB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,UAAkE;EACpE,OAAO,KAAK;CACd;CACA,IAAI,QAAQ,GAAW;EACrB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,WAAW,EAAiB,GAAG,GAAkB,OAAO,GAC7D,KAAK,cAAc,WAAW,CAAG;CACnC;CAUA,IAAY,aAAqC;EAC/C,IAAI,CAAC,KAAK,MAAM,OAAO,CAAC;EACxB,IAAM,CAAC,GAAG,KAAK,KAAK,KAAK,MAAM,GAAG,GAC5B,IAAgC,EAAE,qBAAqB,GAAG,EAAE,IAAI;EAEtE,OADI,MAAG,EAAM,wBAAwB,GAAG,EAAE,MACnC;CACT;CAEA,YAAoB,GAAU;EAC5B,CAAI,KAAK,YAAY,KAAK,aACxB,EAAE,eAAe,GACjB,EAAE,gBAAgB;CAEtB;CAEA,SAAkB;EAEhB,OAAO,CAAI;;gBAEC,EAAS,EAHF,aAAa,KAAK,YAAY,WAAW,CAAC,KAAK,aAAa,OAAO,EAGjE,CAAQ,EAAE;gBACnB,KAAK,OAAO,EAAS,KAAK,UAAU,IAAI,EAAQ;oBAC5C,KAAK,YAAY,KAAK,QAAQ;iBACjC,KAAK,YAAY;;UAExB,KAAK,UAAU,CAAI,sBAAsB,EAAmB,wBAAwB,GAAG;UACvF,KAAK,OACH,CAAI,kBACJ,CAAI;;;;cAIF;;;CAGZ;AAGF;AAvDG,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,IAAA,GAWxC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,WAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAS,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACzC,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GAnB1C,IAAA,EAAA,CAAA,EAAc,eAAe,CAAA,GAAA,CAAA"}

package/dist/components/button/style.js

@@ -1,5 +1,5 @@
 //#region src/components/button/style.css?inline
-var e = ":host button{cursor:pointer;gap:var(--web-ui-button-gap,8px);width:max-content;min-height:var(--web-ui-button-h,32px);padding:var(--web-ui-button-p-y,4px) var(--web-ui-button-p-x,16px);font-size:var(--web-ui-button-font-size,14px);font-weight:var(--web-ui-button-bold,500);color:var(--web-ui-button-color,#006cf9);background:0 0;background-color:var(--web-ui-button-bg,#f0f0f6);border:none;border-radius:999vmax;justify-content:center;align-items:center;display:inline-flex}:host([full]) button{width:100%;display:flex}:host([primary]) button{color:var(--web-ui-button-primary-color,#fff);background-color:var(--web-ui-button-primary-bg,#006cf9)}:host([text]) button{color:var(--web-ui-button-primary-color,#006cf9);background-color:#0000}:host([icon]) button{width:var(--web-ui-button-h,32px);height:var(--web-ui-button-h,32px);padding:var(--web-ui-button-p-y,4px)}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-block}:host([full]){width:100%;display:block}:host([disabled]){cursor:not-allowed}button{cursor:pointer;-webkit-user-select:none;user-select:none;gap:var(--wui-button-gap,8px);box-sizing:border-box;width:var(--wui-button-width,max-content);min-width:var(--wui-button-size,auto);height:var(--wui-button-size,40px);padding:0 var(--wui-button-px,16px);font-size:var(--wui-font-size,14px);color:var(--wui-button-color);white-space:nowrap;background-color:var(--wui-button-bg);transition:transform var(--wui-duration-press,.12s) var(--wui-ease-out,cubic-bezier(.23, 1, .32, 1)), background-color var(--wui-duration-fast,.16s) ease;border:1px solid #0000;border-radius:2147483647px;justify-content:center;align-items:center;line-height:1;display:inline-flex;position:relative;overflow:clip}button:disabled{cursor:not-allowed;opacity:.4}button:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}button:active:not(:disabled){transform:scale(var(--wui-scale-press,.97));background-color:var(--wui-button-bg-active)}@media (hover:hover) and (pointer:fine){button:hover:not(:disabled){background-color:var(--wui-button-bg-hover)}}@media (prefers-reduced-motion:reduce){button{transition:background-color var(--wui-duration-fast,.16s) ease}button:active:not(:disabled){transform:none}}:host([full]) button{width:100%;display:flex}:host([icon]) button{aspect-ratio:1;padding:0}:host([variant=primary]){--wui-button-color:var(--wui-color-on-accent,#fff);--wui-button-bg:var(--wui-color-accent,#08f);--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-accent,#08f) 88%, var(--wui-color-text,#1b1b1b));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-accent,#08f) 76%, var(--wui-color-text,#1b1b1b))}:host([variant=secondary]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:var(--wui-color-surface-raised-mid,#dfdfdf);--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-surface-raised-mid,#dfdfdf) 90%, var(--wui-color-text,#1b1b1b));--wui-button-bg-active:color-mix(in srgb, var(--wui-color-surface-raised-mid,#dfdfdf) 80%, var(--wui-color-text,#1b1b1b))}:host([variant=ghost]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 10%, 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) 34%, var(--wui-color-surface,#fff))}:host([variant=glass]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 10%, transparent)}:host([group]){--wui-button-color:var(--wui-color-text,#1b1b1b);--wui-button-bg:transparent;--wui-button-bg-hover:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 6%, transparent);--wui-button-bg-active:color-mix(in srgb, var(--wui-color-text,#1b1b1b) 10%, transparent);position:relative}:host([group]:not([last])):after{content:\"\";width:var(--wui-button-divider-width,0);background-color:var(--wui-color-border,#0000001a);height:24px;position:absolute;top:50%;right:-2px;transform:translateY(-50%)}:host([group][direction=vertical]:not([last])):after{width:24px;height:var(--wui-button-divider-width,0);inset:auto auto -2px 50%;transform:translate(-50%)}";
 //#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":[":host {\n  button {\n    cursor: pointer;\n\n    display: inline-flex;\n    gap: var(--web-ui-button-gap, 8px);\n    align-items: center;\n    justify-content: center;\n\n    width: max-content;\n    min-height: var(--web-ui-button-h, 32px);\n    padding: var(--web-ui-button-p-y, 4px) var(--web-ui-button-p-x, 16px);\n    border: none;\n    border-radius: 999vmax;\n\n    font-size: var(--web-ui-button-font-size, 14px);\n    font-weight: var(--web-ui-button-bold, 500);\n    color: var(--web-ui-button-color, #006cf9);\n\n    background: none;\n    background-color: var(--web-ui-button-bg, #f0f0f6);\n  }\n}\n\n:host([full]) {\n  button {\n    display: flex;\n    width: 100%;\n  }\n}\n\n:host([primary]) {\n  button {\n    color: var(--web-ui-button-primary-color, #fff);\n    background-color: var(--web-ui-button-primary-bg, #006cf9);\n  }\n}\n\n:host([text]) {\n  button {\n    color: var(--web-ui-button-primary-color, #006cf9);\n    background-color: transparent;\n  }\n}\n\n:host([icon]) {\n  button {\n    width: var(--web-ui-button-h, 32px);\n    height: var(--web-ui-button-h, 32px);\n    padding: var(--web-ui-button-p-y, 4px);\n  }\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  display: inline-block;\n}\n\n:host([full]) {\n  display: block;\n  width: 100%;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\nbutton {\n  cursor: pointer;\n  user-select: none;\n\n  position: relative;\n\n  overflow: clip;\n  display: inline-flex;\n  gap: var(--wui-button-gap, 8px);\n  align-items: center;\n  justify-content: center;\n\n  box-sizing: border-box;\n  width: var(--wui-button-width, max-content);\n  min-width: var(--wui-button-size, auto);\n  height: var(--wui-button-size, 40px);\n  padding: 0 var(--wui-button-px, 16px);\n  border: 1px solid transparent;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-button-color);\n  white-space: nowrap;\n\n  background-color: var(--wui-button-bg);\n\n  transition:\n    transform var(--wui-duration-press, 120ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1)),\n    background-color var(--wui-duration-fast, 160ms) ease;\n\n  &:disabled {\n    cursor: not-allowed;\n    opacity: 0.4;\n  }\n\n  &:focus-visible {\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n\n  &:active:not(:disabled) {\n    transform: scale(var(--wui-scale-press, 0.97));\n    background-color: var(--wui-button-bg-active);\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\n@media (prefers-reduced-motion: reduce) {\n  button {\n    transition: background-color var(--wui-duration-fast, 160ms) ease;\n  }\n\n  button:active:not(:disabled) {\n    transform: none;\n  }\n}\n\n/* ===== Full width ===== */\n\n:host([full]) button {\n  display: flex;\n  width: 100%;\n}\n\n/* ===== Icon mode ===== */\n\n:host([icon]) button {\n  aspect-ratio: 1;\n  padding: 0;\n}\n\n/* ===== Variant: primary (默认) ===== */\n\n:host([variant='primary']) {\n  --wui-button-color: var(--wui-color-on-accent, #fff);\n  --wui-button-bg: var(--wui-color-accent, #08f);\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-accent, #08f) 88%, var(--wui-color-text, #1b1b1b));\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-accent, #08f) 76%, var(--wui-color-text, #1b1b1b));\n}\n\n/* ===== Variant: secondary ===== */\n\n:host([variant='secondary']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: var(--wui-color-surface-raised-mid, #dfdfdf);\n  --wui-button-bg-hover: color-mix(\n    in srgb,\n    var(--wui-color-surface-raised-mid, #dfdfdf) 90%,\n    var(--wui-color-text, #1b1b1b)\n  );\n  --wui-button-bg-active: color-mix(\n    in srgb,\n    var(--wui-color-surface-raised-mid, #dfdfdf) 80%,\n    var(--wui-color-text, #1b1b1b)\n  );\n}\n\n/* ===== Variant: ghost ===== */\n\n:host([variant='ghost']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 10%, transparent);\n}\n\n/* ===== Variant: danger ===== */\n\n:host([variant='danger']) {\n  --wui-button-color: var(--wui-color-danger, #dc2626);\n  --wui-button-bg: color-mix(in srgb, var(--wui-color-danger, #dc2626) 18%, var(--wui-color-surface, #fff));\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-danger, #dc2626) 26%, var(--wui-color-surface, #fff));\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-danger, #dc2626) 34%, var(--wui-color-surface, #fff));\n}\n\n/* ===== Variant: glass (玻璃) ===== */\n\n/* .wui-glass 样式由 @/assets/glass.css 提供 */\n:host([variant='glass']) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 10%, transparent);\n}\n\n/* ===== Group context ===== */\n\n:host([group]) {\n  --wui-button-color: var(--wui-color-text, #1b1b1b);\n  --wui-button-bg: transparent;\n  --wui-button-bg-hover: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 6%, transparent);\n  --wui-button-bg-active: color-mix(in srgb, var(--wui-color-text, #1b1b1b) 10%, transparent);\n  position: relative;\n}\n\n:host([group]:not([last]))::after {\n  content: '';\n\n  position: absolute;\n  top: 50%;\n  right: -2px;\n  transform: translateY(-50%);\n\n  width: var(--wui-button-divider-width, 0);\n  height: 24px;\n\n  background-color: var(--wui-color-border, rgb(0 0 0 / 0.1));\n}\n\n:host([group][direction='vertical']:not([last]))::after {\n  top: auto;\n  right: auto;\n  bottom: -2px;\n  left: 50%;\n  transform: translateX(-50%);\n\n  width: 24px;\n  height: var(--wui-button-divider-width, 0);\n}\n"],"mappings":""}

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

@@ -0,0 +1,16 @@
+import { LitElement } from 'lit';
+export declare class WebUiButtonGroup extends LitElement {
+    static styles: import('lit').CSSResult[];
+    get direction(): 'horizontal' | 'vertical';
+    set direction(v: string);
+    private _direction;
+    updated(): void;
+    private syncChildButtons;
+    render(): import('lit').TemplateResult<1>;
+    readonly $events: Record<string, never>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'web-ui-button-group': WebUiButtonGroup;
+    }
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/button-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\n// web-ui-button 必须注册（Rolldown tree-shake 副作用 import，引用类名阻止删除）\nimport '@/components/button'\nimport glass from '@/assets/glass.css?inline'\nimport { normalizeLiteral } from '@/shared/normalize'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_DIRECTIONS = ['horizontal', 'vertical'] as const\n\n@customElement('web-ui-button-group')\nexport class WebUiButtonGroup extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(style)]\n\n  @property({ type: String, reflect: true })\n  get direction(): 'horizontal' | 'vertical' {\n    return this._direction\n  }\n  set direction(v: string) {\n    const old = this._direction\n    this._direction = normalizeLiteral(v, ALLOWED_DIRECTIONS, 'horizontal')\n    this.requestUpdate('direction', old)\n  }\n  private _direction: 'horizontal' | 'vertical' = 'horizontal'\n\n  override updated() {\n    this.syncChildButtons()\n  }\n\n  private syncChildButtons() {\n    const buttons = this.querySelectorAll<HTMLElement & { variant: string }>('web-ui-button')\n    const isVertical = this.direction === 'vertical'\n    for (const [i, btn] of [...buttons].entries()) {\n      if (!btn.hasAttribute('group')) btn.setAttribute('group', '')\n      btn.variant = 'glass'\n      btn.style.setProperty('--wui-button-size', '32px')\n      btn.setAttribute('direction', isVertical ? 'vertical' : 'horizontal')\n      const isLast = i === buttons.length - 1\n      btn.toggleAttribute('last', isLast)\n      btn.style.setProperty('--wui-button-divider-width', isLast ? '0px' : '1px')\n    }\n  }\n\n  override render() {\n    return html`\n      <div class=\"wui-glass wui-button-group-inner\">\n        <slot></slot>\n      </div>\n    `\n  }\n\n  declare readonly $events: Record<string, never>\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-button-group': WebUiButtonGroup\n  }\n}\n"],"mappings":";;;;;;;;AAUA,IAAM,IAAqB,CAAC,cAAc,UAAU,GAGvC,IAAN,cAA+B,EAAW;;EAYC,aAAA,KAAA,aAAA;;;EAXvB,KAAA,SAAA,CAAC,EAAU,CAAK,GAAG,EAAU,CAAK,CAAC;;CAE5D,IACI,YAAuC;EACzC,OAAO,KAAK;CACd;CACA,IAAI,UAAU,GAAW;EACvB,IAAM,IAAM,KAAK;EAEjB,AADA,KAAK,aAAa,EAAiB,GAAG,GAAoB,YAAY,GACtE,KAAK,cAAc,aAAa,CAAG;CACrC;CAGA,UAAmB;EACjB,KAAK,iBAAiB;CACxB;CAEA,mBAA2B;EACzB,IAAM,IAAU,KAAK,iBAAoD,eAAe,GAClF,IAAa,KAAK,cAAc;EACtC,KAAK,IAAM,CAAC,GAAG,MAAQ,CAAC,GAAG,CAAO,CAAC,CAAC,QAAQ,GAAG;GAI7C,AAHK,EAAI,aAAa,OAAO,KAAG,EAAI,aAAa,SAAS,EAAE,GAC5D,EAAI,UAAU,SACd,EAAI,MAAM,YAAY,qBAAqB,MAAM,GACjD,EAAI,aAAa,aAAa,IAAa,aAAa,YAAY;GACpE,IAAM,IAAS,MAAM,EAAQ,SAAS;GAEtC,AADA,EAAI,gBAAgB,QAAQ,CAAM,GAClC,EAAI,MAAM,YAAY,8BAA8B,IAAS,QAAQ,KAAK;EAC5E;CACF;CAEA,SAAkB;EAChB,OAAO,CAAI;;;;;CAKb;AAGF;AAtCG,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

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

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

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

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

@@ -0,0 +1,39 @@
+import { LitElement } from 'lit';
+export declare class WebUiCheckbox extends LitElement {
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    /** 内部表单关联实例（connectedCallback 中初始化） */
+    private _internals?;
+    private _formDisabled;
+    private _groupDisabled;
+    /** 内部 checked 状态，通过 getter/setter 暴露为公共 API */
+    private _checked;
+    get checked(): boolean;
+    set checked(v: boolean);
+    value: string;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    private get _isDisabled();
+    private get _isManagedByGroup();
+    setGroupDisabled(disabled: boolean): void;
+    connectedCallback(): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    updated(): void;
+    private _syncFormValue;
+    private _syncValidity;
+    /** 用户点击切换 */
+    private handleClick;
+    private handleKeyDown;
+    render(): import('lit').TemplateResult<1>;
+    readonly $events: {
+        input: Event;
+        change: Event;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'web-ui-checkbox': WebUiCheckbox;
+    }
+}

package/dist/components/checkbox/index.js

@@ -0,0 +1,111 @@
+import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import "../icon/index.js";
+import t from "../../icons/generated/heroicons-check-16-solid.js";
+import n from "./style.js";
+import { LitElement as r, html as i, unsafeCSS as a } from "lit";
+import { customElement as o, property as s, state as c } from "lit/decorators.js";
+import { classMap as l } from "lit/directives/class-map.js";
+//#region src/components/checkbox/index.ts
+var u = class extends r {
+	constructor(...e) {
+		super(...e), this._formDisabled = !1, this._groupDisabled = !1, this._checked = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1;
+	}
+	static {
+		this.styles = a(n);
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	get checked() {
+		return this._checked;
+	}
+	set checked(e) {
+		let t = this._checked;
+		this._checked = e, this._syncFormValue(), this.requestUpdate("checked", t);
+	}
+	get _isDisabled() {
+		return this.disabled || this._formDisabled || this._groupDisabled;
+	}
+	get _isManagedByGroup() {
+		return this.closest("web-ui-checkbox-group") !== null;
+	}
+	setGroupDisabled(e) {
+		this._groupDisabled = e;
+	}
+	connectedCallback() {
+		super.connectedCallback(), !this._internals && (this._internals = this.attachInternals(), this.hasAttribute("checked") && (this._checked = !0), this._syncFormValue());
+	}
+	formResetCallback() {
+		this.checked = this.hasAttribute("checked");
+	}
+	formDisabledCallback(e) {
+		this._formDisabled = e;
+	}
+	updated() {
+		this._syncFormValue(), this._syncValidity();
+	}
+	_syncFormValue() {
+		this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || "on" : null);
+	}
+	_syncValidity() {
+		if (!(!this._internals || typeof this._internals.setValidity != "function")) {
+			if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {
+				this._internals.setValidity({});
+				return;
+			}
+			this._internals.setValidity({ valueMissing: !0 }, "请选择此项");
+		}
+	}
+	handleClick() {
+		if (this._isDisabled) return;
+		let e = this._checked;
+		this._checked = !e, this._syncFormValue(), this.requestUpdate("checked", e), this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	handleKeyDown(e) {
+		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
+	}
+	render() {
+		return i`
+      <label
+        class=${l({
+			"wui-checkbox": !0,
+			"is-checked": this._checked,
+			"is-disabled": this._isDisabled
+		})}
+        tabindex="0"
+        role="checkbox"
+        aria-checked=${String(this._checked)}
+        aria-disabled=${String(this._isDisabled)}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        <span class="wui-checkbox-box">
+          <span class="wui-checkbox-icon"
+            ><web-ui-icon .icon=${t} size="18" color="#fff"></web-ui-icon
+          ></span>
+        </span>
+        <span class="wui-checkbox-label"><slot></slot></span>
+      </label>
+    `;
+	}
+};
+e([c()], u.prototype, "_formDisabled", void 0), e([c()], u.prototype, "_groupDisabled", void 0), e([c()], u.prototype, "_checked", void 0), e([s({ type: String })], u.prototype, "value", void 0), e([s({
+	type: String,
+	reflect: !0
+})], u.prototype, "name", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "disabled", void 0), e([s({
+	type: Boolean,
+	reflect: !0
+})], u.prototype, "required", void 0), u = e([o("web-ui-checkbox")], u);
+//#endregion
+export { u as WebUiCheckbox };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\nimport { classMap } from 'lit/directives/class-map.js'\n\nimport '@/components/icon'\nimport { heroiconsCheck16Solid } from '@/icons'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox')\nexport class WebUiCheckbox extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  /** 内部表单关联实例（connectedCallback 中初始化） */\n  private _internals?: ElementInternals\n  @state() private _formDisabled = false\n  @state() private _groupDisabled = false\n\n  /** 内部 checked 状态，通过 getter/setter 暴露为公共 API */\n  @state() private _checked = false\n\n  get checked(): boolean {\n    return this._checked\n  }\n\n  set checked(v: boolean) {\n    const old = this._checked\n    this._checked = v\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n  }\n\n  @property({ type: String }) value = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled || this._groupDisabled\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this.closest('web-ui-checkbox-group') !== null\n  }\n\n  setGroupDisabled(disabled: boolean) {\n    this._groupDisabled = disabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (this._internals) return\n    this._internals = this.attachInternals()\n    if (this.hasAttribute('checked')) {\n      this._checked = true\n    }\n    this._syncFormValue()\n  }\n\n  formResetCallback() {\n    this.checked = this.hasAttribute('checked')\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  override updated() {\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  private _syncFormValue() {\n    this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || 'on' : null)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请选择此项')\n  }\n\n  /** 用户点击切换 */\n  private handleClick() {\n    if (this._isDisabled) return\n    const old = this._checked\n    this._checked = !old\n    this._syncFormValue()\n    this.requestUpdate('checked', old)\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-checkbox': true,\n      'is-checked': this._checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <label\n        class=${classMap(cls)}\n        tabindex=\"0\"\n        role=\"checkbox\"\n        aria-checked=${String(this._checked)}\n        aria-disabled=${String(this._isDisabled)}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        <span class=\"wui-checkbox-box\">\n          <span class=\"wui-checkbox-icon\"\n            ><web-ui-icon .icon=${heroiconsCheck16Solid} size=\"18\" color=\"#fff\"></web-ui-icon\n          ></span>\n        </span>\n        <span class=\"wui-checkbox-label\"><slot></slot></span>\n      </label>\n    `\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-checkbox': WebUiCheckbox\n  }\n}\n"],"mappings":"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"}

package/dist/components/checkbox/style.js

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/checkbox/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  cursor: pointer;\n  display: inline-block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.wui-checkbox {\n  cursor: pointer;\n  user-select: none;\n\n  display: inline-flex;\n  gap: 10px;\n  align-items: center;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1;\n  color: var(--wui-color-text, #1b1b1b);\n\n  &:focus-visible {\n    border-radius: calc(infinity * 1px);\n    outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n:host([disabled]) .wui-checkbox {\n  cursor: not-allowed;\n  color: var(--wui-color-text-muted, #6a6a6a);\n}\n\n.wui-checkbox-box {\n  display: flex;\n  flex-shrink: 0;\n  align-items: center;\n  justify-content: center;\n\n  width: 18px;\n  height: 18px;\n  border-radius: 6px;\n\n  background-color: var(--wui-color-surface-raised, #f2f2f7);\n\n  transition:\n    background-color 0.2s ease,\n    border-color 0.2s ease;\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.wui-checkbox-icon {\n  transform: scale(0.85);\n\n  overflow: hidden;\n  display: block;\n\n  font-size: 0;\n  line-height: 0;\n\n  opacity: 0;\n\n  transition:\n    opacity var(--wui-duration-fast, 160ms) ease,\n    transform var(--wui-duration-fast, 160ms) var(--wui-ease-out, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-checked .wui-checkbox-icon {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.wui-checkbox-label {\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-checkbox-icon,\n  .is-checked .wui-checkbox-icon {\n    transform: none;\n  }\n}\n"],"mappings":""}

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

@@ -0,0 +1,35 @@
+import { LitElement } from 'lit';
+export declare class WebUiCheckboxGroup extends LitElement {
+    static styles: import('lit').CSSResult;
+    static formAssociated: boolean;
+    name: string;
+    disabled: boolean;
+    required: boolean;
+    private _value;
+    private _formDisabled;
+    private _internals?;
+    private _initialValue;
+    get value(): string[];
+    set value(v: string[]);
+    private get _isDisabled();
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    updated(changed: Map<string, unknown>): void;
+    formResetCallback(): void;
+    formDisabledCallback(disabled: boolean): void;
+    private _syncFormValue;
+    private _syncValidity;
+    private _syncValueToChildren;
+    private _handleChildChange;
+    private _handleSlotChange;
+    render(): import('lit').TemplateResult<1>;
+    readonly $events: {
+        input: Event;
+        change: Event;
+    };
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'web-ui-checkbox-group': WebUiCheckboxGroup;
+    }
+}

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

@@ -0,0 +1,99 @@
+import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import t from "./style.js";
+import { LitElement as n, html as r, unsafeCSS as i } from "lit";
+import { customElement as a, property as o, state as s } from "lit/decorators.js";
+//#region src/components/checkbox-group/index.ts
+var c = class extends n {
+	constructor(...e) {
+		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._value = [], this._formDisabled = !1, this._initialValue = [];
+	}
+	static {
+		this.styles = i(t);
+	}
+	static {
+		this.formAssociated = !0;
+	}
+	get value() {
+		return this._value;
+	}
+	set value(e) {
+		let t = this._value;
+		this._value = [...e], this._syncFormValue(), this.requestUpdate("value", t);
+	}
+	get _isDisabled() {
+		return this.disabled || this._formDisabled;
+	}
+	connectedCallback() {
+		super.connectedCallback(), this._internals ||= this.attachInternals();
+		let e = this.getAttribute("value");
+		e !== null && (this.value = e.split(",").filter(Boolean)), this._initialValue = [...this._value], this.addEventListener("change", this._handleChildChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.removeEventListener("change", this._handleChildChange);
+	}
+	updated(e) {
+		(e.has("value") || e.has("disabled") || e.has("_formDisabled")) && this._syncValueToChildren(), this._syncFormValue(), this._syncValidity();
+	}
+	formResetCallback() {
+		this.value = [...this._initialValue];
+	}
+	formDisabledCallback(e) {
+		this._formDisabled = e;
+	}
+	_syncFormValue() {
+		if (!this._internals) return;
+		if (!this.name || this._value.length === 0) {
+			this._internals.setFormValue?.(null);
+			return;
+		}
+		let e = new FormData();
+		this._value.forEach((t) => e.append(this.name, t)), this._internals.setFormValue?.(e);
+	}
+	_syncValidity() {
+		if (!(!this._internals || typeof this._internals.setValidity != "function")) {
+			if (this._isDisabled || !this.required || this._value.length > 0) {
+				this._internals.setValidity({});
+				return;
+			}
+			this._internals.setValidity({ valueMissing: !0 }, "请至少选择一项");
+		}
+	}
+	_syncValueToChildren() {
+		this.querySelectorAll("web-ui-checkbox").forEach((e) => {
+			e.checked = this._value.includes(e.value), e.setGroupDisabled(this._isDisabled);
+		});
+	}
+	_handleChildChange(e) {
+		if (this._isDisabled) return;
+		let t = e.target;
+		if (!t.matches?.("web-ui-checkbox")) return;
+		let n = t, r = n.checked ? [.../* @__PURE__ */ new Set([...this._value, n.value])] : this._value.filter((e) => e !== n.value);
+		this.value = r, this.dispatchEvent(new Event("input", {
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	_handleSlotChange() {
+		this._syncValueToChildren();
+	}
+	render() {
+		return r`<div class="wui-checkbox-group"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
+	}
+};
+e([o({
+	type: String,
+	reflect: !0
+})], c.prototype, "name", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], c.prototype, "required", void 0), e([s()], c.prototype, "_value", void 0), e([s()], c.prototype, "_formDisabled", void 0), c = e([a("web-ui-checkbox-group")], c);
+//#endregion
+export { c as WebUiCheckboxGroup };
+
+//# sourceMappingURL=index.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/checkbox-group/index.ts"],"sourcesContent":["import { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property, state } from 'lit/decorators.js'\n\nimport type { WebUiCheckbox } from '../checkbox'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-checkbox-group')\nexport class WebUiCheckboxGroup extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\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  @state() private _value: string[] = []\n  @state() private _formDisabled = false\n  private _internals?: ElementInternals\n  private _initialValue: string[] = []\n\n  get value(): string[] {\n    return this._value\n  }\n\n  set value(v: string[]) {\n    const old = this._value\n    this._value = [...v]\n    this._syncFormValue()\n    this.requestUpdate('value', old)\n  }\n\n  private get _isDisabled(): boolean {\n    return this.disabled || this._formDisabled\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    if (!this._internals) this._internals = this.attachInternals()\n    const attributeValue = this.getAttribute('value')\n    if (attributeValue !== null) this.value = attributeValue.split(',').filter(Boolean)\n    this._initialValue = [...this._value]\n    this.addEventListener('change', this._handleChildChange)\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    this.removeEventListener('change', this._handleChildChange)\n  }\n\n  override updated(changed: Map<string, unknown>) {\n    if (changed.has('value') || changed.has('disabled') || changed.has('_formDisabled')) this._syncValueToChildren()\n    this._syncFormValue()\n    this._syncValidity()\n  }\n\n  formResetCallback() {\n    this.value = [...this._initialValue]\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formDisabled = disabled\n  }\n\n  private _syncFormValue() {\n    if (!this._internals) return\n    if (!this.name || this._value.length === 0) {\n      this._internals.setFormValue?.(null)\n      return\n    }\n    const formData = new FormData()\n    this._value.forEach(value => formData.append(this.name, value))\n    this._internals.setFormValue?.(formData)\n  }\n\n  private _syncValidity() {\n    if (!this._internals || typeof this._internals.setValidity !== 'function') return\n    if (this._isDisabled || !this.required || this._value.length > 0) {\n      this._internals.setValidity({})\n      return\n    }\n    this._internals.setValidity({ valueMissing: true }, '请至少选择一项')\n  }\n\n  private _syncValueToChildren() {\n    this.querySelectorAll<WebUiCheckbox>('web-ui-checkbox').forEach(checkbox => {\n      checkbox.checked = this._value.includes(checkbox.value)\n      checkbox.setGroupDisabled(this._isDisabled)\n    })\n  }\n\n  private _handleChildChange(e: Event) {\n    if (this._isDisabled) return\n    const target = e.target as HTMLElement\n    if (!target.matches?.('web-ui-checkbox')) return\n\n    const checkbox = target as WebUiCheckbox\n    const next = checkbox.checked\n      ? [...new Set([...this._value, checkbox.value])]\n      : this._value.filter(v => v !== checkbox.value)\n\n    this.value = next\n    this.dispatchEvent(new Event('input', { bubbles: true, composed: true }))\n    this.dispatchEvent(new Event('change', { bubbles: true, composed: true }))\n  }\n\n  private _handleSlotChange() {\n    this._syncValueToChildren()\n  }\n\n  override render() {\n    return html`<div class=\"wui-checkbox-group\"><slot @slotchange=${this._handleSlotChange}></slot></div>`\n  }\n\n  declare readonly $events: {\n    input: Event\n    change: Event\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-checkbox-group': WebUiCheckboxGroup\n  }\n}\n"],"mappings":"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"}

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

@@ -0,0 +1,6 @@
+//#region src/components/checkbox-group/style.css?inline
+var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;flex-direction:column;gap:8px;display:inline-flex}.wui-checkbox-group{gap:inherit;flex-direction:column;display:flex}";
+//#endregion
+export { e as default };
+
+//# sourceMappingURL=style.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/checkbox-group/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  user-select: none;\n  display: inline-flex;\n  flex-direction: column;\n  gap: 8px;\n}\n\n.wui-checkbox-group {\n  display: flex;\n  flex-direction: column;\n  gap: inherit;\n}\n"],"mappings":""}