@greypan/web-ui 3.0.0 → 4.0.0

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/layout/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n.layout-grid {\n  display: grid;\n  grid-template-areas:\n    'sidebar header'\n    'sidebar content';\n  grid-template-columns: var(--web-ui-base-layout-sidebar-width, 240px) 1fr;\n  grid-template-rows: var(--web-ui-base-layout-header-height, 64px) 1fr;\n\n  box-sizing: border-box;\n  min-height: 100dvh;\n  min-height: 100vh;\n\n  * {\n    box-sizing: inherit;\n  }\n}\n\nheader {\n  position: sticky;\n  z-index: var(--wui-layer-header, 10);\n  top: 0;\n  right: 0;\n\n  grid-area: header;\n}\n\nmain {\n  grid-area: content;\n}\n\naside {\n  position: sticky;\n  top: 0;\n  left: 0;\n\n  grid-area: sidebar;\n\n  height: 100dvh;\n  height: 100vh;\n  padding: 8px;\n\n  .menu {\n    height: 100%;\n    border-radius: 24px;\n    background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n  }\n}\n\nfooter {\n  grid-area: footer;\n}\n\n.backdrop {\n  display: none;\n}\n\n.mobile-toggle {\n  position: fixed;\n  z-index: var(--wui-layer-header, 20);\n  top: 12px;\n  left: 12px;\n\n  visibility: hidden;\n}\n\n@media (width <= 640px) {\n  .layout-grid {\n    grid-template-areas:\n      'header'\n      'content';\n    grid-template-columns: 1fr;\n  }\n\n  aside {\n    position: fixed;\n    z-index: var(--wui-layer-drawer, 100);\n    top: 0;\n    left: 0;\n    transform: translateX(-100%);\n\n    width: var(--web-ui-base-layout-sidebar-width, 240px);\n    height: 100dvh;\n    padding: 8px;\n\n    transition: transform var(--wui-duration-drawer-enter, 280ms) ease;\n  }\n\n  aside.open {\n    transform: translateX(0);\n  }\n\n  .backdrop {\n    position: fixed;\n    z-index: var(--wui-layer-backdrop, 90);\n    inset: 0;\n\n    display: none;\n\n    background: rgb(0 0 0 / 0.3);\n  }\n\n  .backdrop.open {\n    display: block;\n  }\n\n  .mobile-toggle {\n    visibility: visible;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/layout/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  --wui-layout-visible-banner-height: 0px;\n  --wui-layout-header-glow-color: var(--wui-color-page, #fff);\n\n  /*\n   * 内部变量：晕染伪元素的总高度（相对于 header 盒子高度的百分比）。\n   * 默认 150% 表示伪元素从 header 顶部向上延伸 50% header 高度，\n   * 向下延伸 100% header 高度。sticky 到顶后，可见范围为 header 底部到\n   * 下方 100% header 高度处，实现从实色到透明的自然过渡。\n   *\n   * 调大此值会加深晕染浓度并扩大覆盖范围，但过大会遮挡内容区。\n   */\n  --wui-internal-layout-header-glow-height: 150%;\n  display: block;\n}\n\n/* 页面级滚动容器。Banner 位于正文前，随页面一起滚动。 */\n.layout-page {\n  display: flex;\n  flex-direction: column;\n  min-height: 100vh;\n  min-height: 100dvh;\n}\n\n.layout-banner {\n  position: relative;\n  z-index: var(--wui-layer-banner, 30);\n}\n\n/* 参考 book-fe：正文区域负责撑高 sidebar 的 relative wrapper。 */\n.layout-body {\n  display: flex;\n  flex: 1;\n}\n\n.sidebar-wrapper {\n  position: relative;\n  align-self: stretch;\n}\n\n/* Layout 只提供可用高度；Consumer 决定其内部 scrollport。 */\n.sidebar-viewport {\n  flex: 1;\n  min-height: 0;\n}\n\n/* headless drawer 只提供 overlay 基础设施；此卡片与桌面端 aside-panel 相同。 */\n.mobile-sidebar {\n  display: flex;\n  flex-direction: column;\n\n  width: calc(var(--wui-layout-mobile-sidebar-width, 240px) - 16px);\n  max-width: calc(100vw - 16px);\n  height: calc(100vh - 16px);\n  height: calc(100dvh - 16px);\n  min-height: 0;\n  margin: 8px;\n  border-radius: var(--wui-layout-sidebar-radius, 28px);\n\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n}\n\n/*\n * Banner 可见时，组件用它的当前可见高度缩短 aside；Banner 滚出后该值归零。\n * 因而圆角卡片始终完整可见，同时 sticky Sidebar 可在 Banner 消失后填满视口。\n */\naside {\n  position: sticky;\n  z-index: var(--wui-layer-sidebar, 50);\n  top: 0;\n\n  display: flex;\n  flex-direction: column;\n  flex-shrink: 0;\n\n  height: calc(100vh - var(--wui-layout-visible-banner-height));\n  height: calc(100dvh - var(--wui-layout-visible-banner-height));\n  max-height: calc(100vh - var(--wui-layout-visible-banner-height));\n  max-height: calc(100dvh - var(--wui-layout-visible-banner-height));\n  padding: 8px;\n\n  transition: width var(--wui-duration-layout, 200ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n\n  .aside-panel {\n    display: flex;\n    flex: 1;\n    flex-direction: column;\n\n    min-height: 0;\n    border-radius: var(--wui-layout-sidebar-radius, 28px);\n\n    background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n  }\n\n  .sidebar-toggle-area {\n    display: flex;\n    flex-shrink: 0;\n    align-items: center;\n  }\n\n  .sidebar-toggle {\n    width: fit-content;\n    margin: 8px;\n  }\n\n  &.collapsed {\n    .sidebar-viewport {\n      overflow: hidden;\n    }\n  }\n}\n\n.layout-content {\n  display: flex;\n  flex: 1;\n  flex-direction: column;\n  min-width: 0;\n}\n\nheader {\n  /* 将负层级 glow 限定在 Header 的局部 stacking context，slot 内容自然位于其上。 */\n  isolation: isolate;\n  position: sticky;\n  z-index: var(--wui-layer-header, 10);\n  top: 0;\n\n  display: flex;\n  gap: 8px;\n  align-items: center;\n}\n\n/*\n * Header 的装饰性背景晕染\n * ========================\n *\n * 伪元素随 header 的实际盒子尺寸和 sticky 位置变化，自然适配 header slot 的\n * 高度与位置，无需单独维护一层 DOM。\n *\n * 几何模型（以 --wui-internal-layout-header-glow-height: 150% 为例）：\n *   伪元素总高度 = 1.5 × header 高度\n *   inset top    = 100% - 150% = -50%（即向上延伸 0.5 个 header 高度）\n *   sticky 到顶后，上半段位于视口外，下半段（header 底部 → 下方 1 header 高度）\n *   为可见区域，形成从实色到透明的渐变过渡。\n *\n * 渐变浓度控制（0% 在伪元素顶部，100% 在底部）：\n *   0%  - 55%   实色（覆盖可见区域上方约 1/3，确保 header 后方完全不透明）\n *   55% - 70%   快速衰减（90% → 40% 混合透明，覆盖中间过渡带）\n *   70% - 100%  柔和收尾（40% → 完全透明，过渡到内容区背景）\n */\n:host([header-glow]) header::before {\n  pointer-events: none;\n  content: '';\n\n  position: absolute;\n  z-index: -1;\n  inset: calc(100% - var(--wui-internal-layout-header-glow-height)) -20px auto;\n  transform: scaleY(1.5);\n\n  height: var(--wui-internal-layout-header-glow-height);\n\n  background: linear-gradient(\n    to bottom,\n    var(--wui-layout-header-glow-color) 0%,\n    var(--wui-layout-header-glow-color) 55%,\n    color-mix(in srgb, var(--wui-layout-header-glow-color) 90%, transparent) 62%,\n    color-mix(in srgb, var(--wui-layout-header-glow-color) 40%, transparent) 70%,\n    transparent 100%\n  );\n  filter: blur(10px);\n}\n\nmain {\n  flex: 1;\n}\n\nfooter {\n  position: sticky;\n  z-index: var(--wui-layer-tabbar, 40);\n  bottom: 0;\n}\n\n@media (width <= 640px) {\n  aside,\n  .sidebar-wrapper {\n    display: none;\n  }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  aside {\n    transition: none;\n  }\n}\n"],"mappings":""}

package/dist/components/option/index.js

@@ -1,4 +1,4 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import "../icon/index.js";
 import t from "../../icons/generated/heroicons-check-16-solid.js";
 import n from "./style.js";

package/dist/components/option/style.js

@@ -1,5 +1,5 @@
 //#region src/components/option/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([disabled]){cursor:not-allowed;opacity:.4}.option-label{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;height:32px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;transition:color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), background-color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));border-radius:2147483647px;align-items:center;gap:8px;padding:0 8px;display:flex;overflow:hidden}.check{flex-shrink:0}.content-wrap{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:host(:not([selected])) .check{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0}.option-label:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px}:host([active]) .option-label{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}@media (hover:hover) and (pointer:fine){.option-label:hover{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}}:host([disabled]) .option-label{cursor:not-allowed}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:block}:host([disabled]){cursor:not-allowed;opacity:.4}.option-label{cursor:pointer;-webkit-user-select:none;user-select:none;box-sizing:border-box;height:32px;font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);text-overflow:ellipsis;white-space:nowrap;transition:color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1)), background-color var(--wui-duration-feedback,.1s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));border-radius:2147483647px;align-items:center;gap:8px;padding:0 8px;display:flex;overflow:hidden}.check{display:var(--wui-option-check-display,block);flex-shrink:0}.content-wrap{text-overflow:ellipsis;white-space:nowrap;flex:1;overflow:hidden}:host(:not([selected])) .check{visibility:hidden}::slotted([slot=prefix]),::slotted([slot=suffix]){flex-shrink:0}.option-label:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}:host([active]) .option-label{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}@media (hover:hover) and (pointer:fine){.option-label:hover{color:var(--wui-color-on-accent,#fff);background:var(--wui-color-accent,#08f)}}:host([disabled]) .option-label{cursor:not-allowed}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/option/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.option-label {\n  cursor: pointer;\n  user-select: none;\n\n  overflow: hidden;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text, #1b1b1b);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  transition:\n    color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    background-color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.check {\n  flex-shrink: 0;\n}\n\n.content-wrap {\n  overflow: hidden;\n  flex: 1;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(:not([selected])) .check {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  flex-shrink: 0;\n}\n\n.option-label:focus-visible {\n  outline: 3px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n  outline-offset: 2px;\n}\n\n:host([active]) .option-label {\n  color: var(--wui-color-on-accent, #fff);\n  background: var(--wui-color-accent, #08f);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .option-label:hover {\n    color: var(--wui-color-on-accent, #fff);\n    background: var(--wui-color-accent, #08f);\n  }\n}\n\n:host([disabled]) .option-label {\n  cursor: not-allowed;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/option/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: block;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n  opacity: 0.4;\n}\n\n.option-label {\n  cursor: pointer;\n  user-select: none;\n\n  overflow: hidden;\n  display: flex;\n  gap: 8px;\n  align-items: center;\n\n  box-sizing: border-box;\n  height: 32px;\n  padding: 0 8px;\n  border-radius: calc(infinity * 1px);\n\n  font-size: var(--wui-font-size, 14px);\n  color: var(--wui-color-text, #1b1b1b);\n  text-overflow: ellipsis;\n  white-space: nowrap;\n\n  transition:\n    color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1)),\n    background-color var(--wui-duration-feedback, 100ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.check {\n  display: var(--wui-option-check-display, block);\n  flex-shrink: 0;\n}\n\n.content-wrap {\n  overflow: hidden;\n  flex: 1;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n:host(:not([selected])) .check {\n  visibility: hidden;\n}\n\n::slotted([slot='prefix']),\n::slotted([slot='suffix']) {\n  flex-shrink: 0;\n}\n\n.option-label:focus-visible {\n  outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n  outline-offset: 2px;\n}\n\n:host([active]) .option-label {\n  color: var(--wui-color-on-accent, #fff);\n  background: var(--wui-color-accent, #08f);\n}\n\n@media (hover: hover) and (pointer: fine) {\n  .option-label:hover {\n    color: var(--wui-color-on-accent, #fff);\n    background: var(--wui-color-accent, #08f);\n  }\n}\n\n:host([disabled]) .option-label {\n  cursor: not-allowed;\n}\n"],"mappings":""}

package/dist/components/popover/index.js

@@ -1,4 +1,4 @@
-import e from "../../_virtual/_@oxc-project_runtime@0.140.0/helpers/esm/decorate.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
 import t from "../../assets/glass.js";
 import n from "../../assets/overlay-motion.js";
 import { normalizeLiteral as r, normalizeNumber as i } from "../../shared/normalize/index.js";
@@ -105,10 +105,12 @@ var m = [
 		this.open && (requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly)), this._shouldOpenInstantly = !0);
 	}
 	updated(e) {
-		if (e.has("portal") || e.has("overlayContainer") ? requestAnimationFrame(() => this._reconfigureOverlay()) : (e.has("placement") || e.has("offset")) && requestAnimationFrame(() => this._panel.updatePosition()), e.has("open")) if (this.open) {
-			let e = this._shouldOpenInstantly;
-			this._shouldOpenInstantly = !0, requestAnimationFrame(() => this._openOverlay(e)), this._userOpenChange.consume() && this._dispatchChange(!0), this._focusPanel();
-		} else this._returnFocus(), this._closeOverlay(), this._userOpenChange.consume() && this._dispatchChange(!1);
+		if (e.has("portal") || e.has("overlayContainer") ? requestAnimationFrame(() => this._reconfigureOverlay()) : (e.has("placement") || e.has("offset")) && requestAnimationFrame(() => this._panel.updatePosition()), e.has("open")) {
+			if (this.open) {
+				let e = this._shouldOpenInstantly;
+				this._shouldOpenInstantly = !0, requestAnimationFrame(() => this._openOverlay(e)), this._userOpenChange.consume() && this._dispatchChange(!0), this._focusPanel();
+			} else this._returnFocus(), this._closeOverlay(), this._userOpenChange.consume() && this._dispatchChange(!1);
+		}
 		e.has("trigger") && (this.removeEventListener("pointerenter", this._onPointerEnter), this.removeEventListener("pointerleave", this._onPointerLeave), clearTimeout(this._showTimer), clearTimeout(this._hideTimer), this._syncTriggerListeners());
 	}
 	show() {

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = [\n  'top',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-start',\n  'bottom-end',\n  'left',\n  'left-start',\n  'left-end',\n  'right',\n  'right-start',\n  'right-end'\n] as const\n\nconst ALLOWED_TRIGGERS = ['click', 'hover', 'manual'] as const\n\nlet popoverIdCounter = 0\n\n@customElement('web-ui-popover')\nexport class WebUiPopover extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  @property({ type: String, reflect: true })\n  get placement(): Placement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'bottom')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: Placement = 'bottom'\n\n  @property({ type: Number })\n  get offset(): number {\n    return this._offset\n  }\n  set offset(v: number) {\n    const old = this._offset\n    this._offset = normalizeNumber(v, 0, 100, 8)\n    this.requestUpdate('offset', old)\n  }\n  private _offset = 8\n\n  @property({ type: String, reflect: true })\n  get trigger(): 'click' | 'hover' | 'manual' {\n    return this._trigger\n  }\n  set trigger(v: string) {\n    const old = this._trigger\n    this._trigger = normalizeLiteral(v, ALLOWED_TRIGGERS, 'click')\n    this.requestUpdate('trigger', old)\n  }\n  private _trigger: 'click' | 'hover' | 'manual' = 'click'\n\n  @property({ type: Boolean, reflect: true }) portal = false\n  @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n  private _showTimer?: ReturnType<typeof setTimeout>\n  private _hideTimer?: ReturnType<typeof setTimeout>\n  private readonly _userOpenChange = new UserChangeController()\n  private _shouldOpenInstantly = true\n\n  private _panelId = `wui-popover-panel-${++popoverIdCounter}`\n  private readonly _panel = defineAnchoredPanel().make({\n    getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-trigger') ?? null,\n    getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-panel') ?? null,\n    getPositioning: () => ({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: this.portal ? 'fixed' : 'absolute'\n    }),\n    isPortal: () => this.portal,\n    createPortal: () => this._createPortal()\n  })\n\n  // 当前是否打开\n  get isOpen(): boolean {\n    return this.open\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    document.addEventListener('click', this._onClickOutside)\n    document.addEventListener('keydown', this._onKeydown)\n    this.addEventListener('focusout', this._onFocusOut)\n    this._syncTriggerListeners()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onClickOutside)\n    document.removeEventListener('keydown', this._onKeydown)\n    this.removeEventListener('focusout', this._onFocusOut)\n    this.removeEventListener('pointerenter', this._onPointerEnter)\n    this.removeEventListener('pointerleave', this._onPointerLeave)\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    this._panel.dispose()\n  }\n\n  override firstUpdated() {\n    if (this.open) {\n      requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly))\n      this._shouldOpenInstantly = true\n    }\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has('portal') || changed.has('overlayContainer'))\n      requestAnimationFrame(() => this._reconfigureOverlay())\n    else if (changed.has('placement') || changed.has('offset'))\n      requestAnimationFrame(() => this._panel.updatePosition())\n\n    if (changed.has('open')) {\n      if (this.open) {\n        const isInstant = this._shouldOpenInstantly\n        this._shouldOpenInstantly = true\n        requestAnimationFrame(() => this._openOverlay(isInstant))\n        if (this._userOpenChange.consume()) this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._returnFocus()\n        void this._closeOverlay()\n        if (this._userOpenChange.consume()) this._dispatchChange(false)\n      }\n    }\n\n    if (changed.has('trigger')) {\n      this.removeEventListener('pointerenter', this._onPointerEnter)\n      this.removeEventListener('pointerleave', this._onPointerLeave)\n      clearTimeout(this._showTimer)\n      clearTimeout(this._hideTimer)\n      this._syncTriggerListeners()\n    }\n  }\n\n  // 打开 popover\n  show() {\n    if (this.disabled || this.open) return\n    this.open = true\n  }\n\n  // 关闭 popover\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  // 切换 popover\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  private _isInsideShadowRoot(e: MouseEvent): boolean {\n    for (const node of e.composedPath()) {\n      if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n    }\n    return false\n  }\n\n  private _syncTriggerListeners() {\n    if (this.trigger === 'hover') {\n      this.addEventListener('pointerenter', this._onPointerEnter)\n      this.addEventListener('pointerleave', this._onPointerLeave)\n    }\n  }\n\n  private _openOverlay(isInstant = false) {\n    this._panel.open(isInstant)\n  }\n\n  private _createPortal(): OverlayPortal {\n    const portal = defineOverlayPortal().make({\n      container: this.overlayContainer,\n      target: this,\n      style: `${glass}\\n${overlayMotion}\\n${style}`,\n      className: 'popover-panel portal wui-glass wui-floating-panel'\n    })\n    portal.panel.id = this._panelId\n    portal.panel.setAttribute('role', 'dialog')\n    portal.panel.tabIndex = -1\n    portal.panel.addEventListener('pointerenter', this._onPanelPointerEnter)\n    portal.panel.addEventListener('pointerleave', this._onPanelPointerLeave)\n    portal.moveContent(\n      Array.from(this.childNodes).filter(node => !(node instanceof HTMLElement && node.slot === 'trigger'))\n    )\n    return portal\n  }\n\n  private async _closeOverlay() {\n    await this._panel.close(() => this.open)\n  }\n\n  private _reconfigureOverlay() {\n    this._panel.reconfigure(this.open)\n  }\n\n  private _dispatchChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _focusPanel() {\n    requestAnimationFrame(() => {\n      const panel = this._panel.getPanel()\n      const autofocus = panel?.querySelector<HTMLElement>('[autofocus]')\n      if (autofocus && !autofocus.matches(':disabled, [disabled]')) autofocus.focus()\n    })\n  }\n\n  private _returnFocus() {\n    const panel = this._panel.getPanel()\n    if (!panel?.matches(':focus-within')) return\n    const trigger = this._queryTrigger()\n    trigger?.focus()\n  }\n\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    if (this.trigger === 'hover') return\n    if (!this.open) this._shouldOpenInstantly = event.detail === 0\n    this._userOpenChange.mark()\n    this.toggle()\n  }\n\n  private _onClickOutside = (e: MouseEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n    if (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target)) return\n    if (this._isInsideShadowRoot(e)) return\n    this._userOpenChange.mark()\n    this.open = false\n  }\n\n  private _onFocusOut = () => {\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n\n    requestAnimationFrame(() => {\n      if (this.open && !this.matches(':focus-within') && !this._panel.getPanel()?.matches(':focus-within')) {\n        this._userOpenChange.mark()\n        this.open = false\n      }\n    })\n  }\n\n  private _onKeydown = (e: KeyboardEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual') return\n    if (e.key === 'Escape') {\n      this._userOpenChange.mark()\n      this.open = false\n      e.preventDefault()\n    }\n  }\n\n  private _onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n    this._showTimer = setTimeout(() => {\n      this._shouldOpenInstantly = false\n      if (this.open) return\n      this._userOpenChange.mark()\n      this.show()\n    }, 100)\n  }\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._showTimer)\n    this._hideTimer = setTimeout(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 100)\n  }\n\n  private _onPanelPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n  }\n\n  private _onPanelPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    this._hideTimer = setTimeout(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 100)\n  }\n\n  override render() {\n    return html`\n      <div class=\"popover-anchor\">\n        <div\n          class=\"popover-trigger\"\n          aria-expanded=${String(this.open)}\n          aria-controls=${this._panelId}\n          @click=${this._onTriggerClick}\n        >\n          <slot name=\"trigger\"></slot>\n        </div>\n        <div\n          id=${this._panelId}\n          class=\"popover-panel wui-glass wui-floating-panel\"\n          hidden\n          role=\"dialog\"\n          tabindex=\"-1\"\n          @pointerenter=${this._onPanelPointerEnter}\n          @pointerleave=${this._onPanelPointerLeave}\n        >\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-popover': WebUiPopover\n  }\n}\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/popover/index.ts"],"sourcesContent":["import type { Placement } from '@floating-ui/dom'\nimport { html, LitElement, unsafeCSS } from 'lit'\nimport { customElement, property } from 'lit/decorators.js'\n\nimport glass from '@/assets/glass.css?inline'\nimport overlayMotion from '@/assets/overlay-motion.css?inline'\nimport { UserChangeController } from '@/shared/events/user-change'\nimport { normalizeLiteral, normalizeNumber } from '@/shared/normalize'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\n\nconst ALLOWED_PLACEMENTS = [\n  'top',\n  'top-start',\n  'top-end',\n  'bottom',\n  'bottom-start',\n  'bottom-end',\n  'left',\n  'left-start',\n  'left-end',\n  'right',\n  'right-start',\n  'right-end'\n] as const\n\nconst ALLOWED_TRIGGERS = ['click', 'hover', 'manual'] as const\n\nlet popoverIdCounter = 0\n\n@customElement('web-ui-popover')\nexport class WebUiPopover extends LitElement {\n  static override styles = [unsafeCSS(glass), unsafeCSS(overlayMotion), unsafeCSS(style)]\n\n  @property({ type: Boolean, reflect: true }) open = false\n  @property({ type: Boolean, reflect: true }) disabled = false\n\n  @property({ type: String, reflect: true })\n  get placement(): Placement {\n    return this._placement\n  }\n  set placement(v: string) {\n    const old = this._placement\n    this._placement = normalizeLiteral(v, ALLOWED_PLACEMENTS, 'bottom')\n    this.requestUpdate('placement', old)\n  }\n  private _placement: Placement = 'bottom'\n\n  @property({ type: Number })\n  get offset(): number {\n    return this._offset\n  }\n  set offset(v: number) {\n    const old = this._offset\n    this._offset = normalizeNumber(v, 0, 100, 8)\n    this.requestUpdate('offset', old)\n  }\n  private _offset = 8\n\n  @property({ type: String, reflect: true })\n  get trigger(): 'click' | 'hover' | 'manual' {\n    return this._trigger\n  }\n  set trigger(v: string) {\n    const old = this._trigger\n    this._trigger = normalizeLiteral(v, ALLOWED_TRIGGERS, 'click')\n    this.requestUpdate('trigger', old)\n  }\n  private _trigger: 'click' | 'hover' | 'manual' = 'click'\n\n  @property({ type: Boolean, reflect: true }) portal = false\n  @property({ attribute: false }) overlayContainer?: OverlayContainer\n\n  private _showTimer?: ReturnType<typeof setTimeout>\n  private _hideTimer?: ReturnType<typeof setTimeout>\n  private readonly _userOpenChange = new UserChangeController()\n  private _shouldOpenInstantly = true\n\n  private _panelId = `wui-popover-panel-${++popoverIdCounter}`\n  private readonly _panel = defineAnchoredPanel().make({\n    getAnchor: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-trigger') ?? null,\n    getLocalPanel: () => this.shadowRoot?.querySelector<HTMLElement>('.popover-panel') ?? null,\n    getPositioning: () => ({\n      placement: this.placement,\n      offset: this.offset,\n      strategy: this.portal ? 'fixed' : 'absolute'\n    }),\n    isPortal: () => this.portal,\n    createPortal: () => this._createPortal()\n  })\n\n  // 当前是否打开\n  get isOpen(): boolean {\n    return this.open\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    document.addEventListener('click', this._onClickOutside)\n    document.addEventListener('keydown', this._onKeydown)\n    this.addEventListener('focusout', this._onFocusOut)\n    this._syncTriggerListeners()\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onClickOutside)\n    document.removeEventListener('keydown', this._onKeydown)\n    this.removeEventListener('focusout', this._onFocusOut)\n    this.removeEventListener('pointerenter', this._onPointerEnter)\n    this.removeEventListener('pointerleave', this._onPointerLeave)\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    this._panel.dispose()\n  }\n\n  override firstUpdated() {\n    if (this.open) {\n      requestAnimationFrame(() => this._openOverlay(this._shouldOpenInstantly))\n      this._shouldOpenInstantly = true\n    }\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    if (changed.has('portal') || changed.has('overlayContainer'))\n      requestAnimationFrame(() => this._reconfigureOverlay())\n    else if (changed.has('placement') || changed.has('offset'))\n      requestAnimationFrame(() => this._panel.updatePosition())\n\n    if (changed.has('open')) {\n      if (this.open) {\n        const isInstant = this._shouldOpenInstantly\n        this._shouldOpenInstantly = true\n        requestAnimationFrame(() => this._openOverlay(isInstant))\n        if (this._userOpenChange.consume()) this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._returnFocus()\n        void this._closeOverlay()\n        if (this._userOpenChange.consume()) this._dispatchChange(false)\n      }\n    }\n\n    if (changed.has('trigger')) {\n      this.removeEventListener('pointerenter', this._onPointerEnter)\n      this.removeEventListener('pointerleave', this._onPointerLeave)\n      clearTimeout(this._showTimer)\n      clearTimeout(this._hideTimer)\n      this._syncTriggerListeners()\n    }\n  }\n\n  // 打开 popover\n  show() {\n    if (this.disabled || this.open) return\n    this.open = true\n  }\n\n  // 关闭 popover\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\n  // 切换 popover\n  toggle() {\n    if (this.open) this.close()\n    else this.show()\n  }\n\n  private _isInsideShadowRoot(e: MouseEvent): boolean {\n    for (const node of e.composedPath()) {\n      if (node instanceof Node && node.getRootNode() === this.shadowRoot) return true\n    }\n    return false\n  }\n\n  private _syncTriggerListeners() {\n    if (this.trigger === 'hover') {\n      this.addEventListener('pointerenter', this._onPointerEnter)\n      this.addEventListener('pointerleave', this._onPointerLeave)\n    }\n  }\n\n  private _openOverlay(isInstant = false) {\n    this._panel.open(isInstant)\n  }\n\n  private _createPortal(): OverlayPortal {\n    const portal = defineOverlayPortal().make({\n      container: this.overlayContainer,\n      target: this,\n      style: `${glass}\\n${overlayMotion}\\n${style}`,\n      className: 'popover-panel portal wui-glass wui-floating-panel'\n    })\n    portal.panel.id = this._panelId\n    portal.panel.setAttribute('role', 'dialog')\n    portal.panel.tabIndex = -1\n    portal.panel.addEventListener('pointerenter', this._onPanelPointerEnter)\n    portal.panel.addEventListener('pointerleave', this._onPanelPointerLeave)\n    portal.moveContent(\n      Array.from(this.childNodes).filter(node => !(node instanceof HTMLElement && node.slot === 'trigger'))\n    )\n    return portal\n  }\n\n  private async _closeOverlay() {\n    await this._panel.close(() => this.open)\n  }\n\n  private _reconfigureOverlay() {\n    this._panel.reconfigure(this.open)\n  }\n\n  private _dispatchChange(open: boolean) {\n    this.dispatchEvent(\n      new CustomEvent('open-change', {\n        detail: { open },\n        bubbles: true,\n        composed: true\n      })\n    )\n  }\n\n  private _focusPanel() {\n    requestAnimationFrame(() => {\n      const panel = this._panel.getPanel()\n      const autofocus = panel?.querySelector<HTMLElement>('[autofocus]')\n      if (autofocus && !autofocus.matches(':disabled, [disabled]')) autofocus.focus()\n    })\n  }\n\n  private _returnFocus() {\n    const panel = this._panel.getPanel()\n    if (!panel?.matches(':focus-within')) return\n    const trigger = this._queryTrigger()\n    trigger?.focus()\n  }\n\n  private _queryTrigger(): HTMLElement | null {\n    const slot = this.shadowRoot?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n    const el = slot?.assignedElements()[0]\n    return el instanceof HTMLElement ? el : null\n  }\n\n  private _onTriggerClick = (event: MouseEvent) => {\n    if (this.disabled) return\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    if (this.trigger === 'hover') return\n    if (!this.open) this._shouldOpenInstantly = event.detail === 0\n    this._userOpenChange.mark()\n    this.toggle()\n  }\n\n  private _onClickOutside = (e: MouseEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n    if (e.target instanceof Node && this.portal && this._panel.getPanel()?.contains(e.target)) return\n    if (this._isInsideShadowRoot(e)) return\n    this._userOpenChange.mark()\n    this.open = false\n  }\n\n  private _onFocusOut = () => {\n    if (this.trigger === 'manual' || this.trigger === 'hover') return\n\n    requestAnimationFrame(() => {\n      if (this.open && !this.matches(':focus-within') && !this._panel.getPanel()?.matches(':focus-within')) {\n        this._userOpenChange.mark()\n        this.open = false\n      }\n    })\n  }\n\n  private _onKeydown = (e: KeyboardEvent) => {\n    if (!this.open) return\n    if (this.trigger === 'manual') return\n    if (e.key === 'Escape') {\n      this._userOpenChange.mark()\n      this.open = false\n      e.preventDefault()\n    }\n  }\n\n  private _onPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n    this._showTimer = setTimeout(() => {\n      this._shouldOpenInstantly = false\n      if (this.open) return\n      this._userOpenChange.mark()\n      this.show()\n    }, 100)\n  }\n\n  private _onPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.disabled || this.trigger !== 'hover') return\n    clearTimeout(this._showTimer)\n    this._hideTimer = setTimeout(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 100)\n  }\n\n  private _onPanelPointerEnter = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    clearTimeout(this._hideTimer)\n  }\n\n  private _onPanelPointerLeave = (e: PointerEvent) => {\n    if (e.pointerType === 'touch') return\n    if (this.trigger !== 'hover') return\n    this._hideTimer = setTimeout(() => {\n      if (!this.open) return\n      this._userOpenChange.mark()\n      this.close()\n    }, 100)\n  }\n\n  override render() {\n    return html`\n      <div class=\"popover-anchor\">\n        <div\n          class=\"popover-trigger\"\n          aria-expanded=${String(this.open)}\n          aria-controls=${this._panelId}\n          @click=${this._onTriggerClick}\n        >\n          <slot name=\"trigger\"></slot>\n        </div>\n        <div\n          id=${this._panelId}\n          class=\"popover-panel wui-glass wui-floating-panel\"\n          hidden\n          role=\"dialog\"\n          tabindex=\"-1\"\n          @pointerenter=${this._onPanelPointerEnter}\n          @pointerleave=${this._onPanelPointerLeave}\n        >\n          <slot></slot>\n        </div>\n      </div>\n    `\n  }\n\n  declare readonly $events: {\n    'open-change': CustomEvent<{ open: boolean }>\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'web-ui-popover': WebUiPopover\n  }\n}\n"],"mappings":"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"}

package/dist/components/popover/style.js

@@ -1,5 +1,5 @@
 //#region src/components/popover/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-flex}:host([disabled]){cursor:not-allowed}.popover-trigger{display:inline-flex}.popover-anchor{display:inline-flex;position:relative}.popover-panel{--wui-glass-shadow:var(--wui-shadow-pop,0 3px 9px #00000045);z-index:var(--wui-layer-local-overlay,1);box-sizing:border-box;width:max-content;max-width:min(90vw,400px);font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-overlay,#f6f6f6e0);border-radius:20px;padding:8px 12px;line-height:1.5;position:absolute;top:-9999px;left:-9999px}.popover-panel:where([hidden]){display:none}.popover-panel:focus-visible{outline:2px solid var(--wui-focus-ring,#08f6);outline-offset:2px}.popover-panel.portal{z-index:var(--wui-layer-menu,100);position:fixed}:host([portal]) .popover-panel{display:none}";
+var e = "*,:before,:after{box-sizing:border-box}:host{display:inline-flex}:host([disabled]){cursor:not-allowed}.popover-trigger{display:inline-flex}.popover-anchor{display:inline-flex;position:relative}.popover-panel{--wui-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);z-index:var(--wui-layer-inline-overlay,1);box-sizing:border-box;width:max-content;max-width:min(90vw,400px);font-size:var(--wui-font-size,14px);color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-overlay,#f6f6f6d1);border-radius:20px;padding:8px 12px;line-height:1.5;position:absolute;top:-9999px;left:-9999px}.popover-panel:where([hidden]){display:none}.popover-panel:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px}.popover-panel.portal{z-index:var(--wui-layer-menu,100);position:fixed}:host([portal]) .popover-panel{display:none}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/popover/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-flex;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.popover-trigger {\n  display: inline-flex;\n}\n\n.popover-anchor {\n  position: relative;\n  display: inline-flex;\n}\n\n.popover-panel {\n  --wui-glass-shadow: var(--wui-shadow-pop, 0 3px 9px rgb(0 0 0 / 0.27));\n  position: absolute;\n  z-index: var(--wui-layer-local-overlay, 1);\n  top: -9999px;\n  left: -9999px;\n\n  box-sizing: border-box;\n  width: max-content;\n  max-width: min(90vw, 400px);\n  padding: 8px 12px;\n  border-radius: 20px;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.88));\n\n  &:where([hidden]) {\n    display: none;\n  }\n\n  &:focus-visible {\n    outline: 2px solid var(--wui-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n.popover-panel.portal {\n  position: fixed;\n  z-index: var(--wui-layer-menu, 100);\n}\n\n:host([portal]) .popover-panel {\n  display: none;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/popover/style.css?inline"],"sourcesContent":["*,\n*::before,\n*::after {\n  box-sizing: border-box;\n}\n\n:host {\n  display: inline-flex;\n}\n\n:host([disabled]) {\n  cursor: not-allowed;\n}\n\n.popover-trigger {\n  display: inline-flex;\n}\n\n.popover-anchor {\n  position: relative;\n  display: inline-flex;\n}\n\n.popover-panel {\n  --wui-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  position: absolute;\n  z-index: var(--wui-layer-inline-overlay, 1);\n  top: -9999px;\n  left: -9999px;\n\n  box-sizing: border-box;\n  width: max-content;\n  max-width: min(90vw, 400px);\n  padding: 8px 12px;\n  border-radius: 20px;\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n\n  background-color: var(--wui-color-surface-overlay, rgb(246 246 246 / 0.82));\n\n  &:where([hidden]) {\n    display: none;\n  }\n\n  &:focus-visible {\n    outline: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n.popover-panel.portal {\n  position: fixed;\n  z-index: var(--wui-layer-menu, 100);\n}\n\n:host([portal]) .popover-panel {\n  display: none;\n}\n"],"mappings":""}

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

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

package/dist/components/radio/index.js

@@ -1,15 +1,33 @@
-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";
-import { classMap as c } from "lit/directives/class-map.js";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import { FormAssociationController as t, defineFormAssociation as n } from "../../shared/form-association/index.js";
+import { defineGroupManaged as r } from "../../shared/group-management/index.js";
+import i from "./style.js";
+import { LitElement as a, html as o, unsafeCSS as s } from "lit";
+import { customElement as c, property as l, state as u } from "lit/decorators.js";
+import { classMap as d } from "lit/directives/class-map.js";
 //#region src/components/radio/index.ts
-var l = class extends n {
+var f = class extends a {
 	constructor(...e) {
-		super(...e), this._formDisabled = !1, this._groupDisabled = !1, this._checked = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1;
+		super(...e), this._groupManagement = r(this, { requestUpdate: () => this.requestUpdate() }).make(), this._checked = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1, this._formAssociation = n({
+			host: this,
+			initialize: () => {
+				this.hasAttribute("checked") && (this._checked = !0);
+			},
+			getState: () => this._checked,
+			setState: (e) => {
+				this.checked = e;
+			},
+			getFormValue: () => !this._isManagedByGroup && this._checked ? this.value || "on" : null,
+			getFormState: () => String(this._checked),
+			restoreState: (e) => {
+				typeof e == "string" && (this.checked = e === "true");
+			},
+			isStateManaged: () => this._isManagedByGroup,
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new t(this, this._formAssociation);
 	}
 	static {
-		this.styles = i(t);
+		this.styles = s(i);
 	}
 	static {
 		this.formAssociated = !0;
@@ -19,44 +37,36 @@ var l = class extends n {
 	}
 	set checked(e) {
 		let t = this._checked;
-		this._checked = e, this._syncFormValue(), this.requestUpdate("checked", t);
+		this._checked = e, this._formAssociation.sync(), this.requestUpdate("checked", t);
 	}
 	get _isDisabled() {
-		return this.disabled || this._formDisabled || this._groupDisabled;
+		return this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === !0;
 	}
 	get _isManagedByGroup() {
-		return this.closest("web-ui-radio-group") !== null;
-	}
-	setGroupDisabled(e) {
-		this._groupDisabled = e;
-	}
-	connectedCallback() {
-		super.connectedCallback(), !this._internals && (this._internals = this.attachInternals(), this.hasAttribute("checked") && (this._checked = !0), this._syncFormValue());
+		return this._groupManagement.getContext() !== void 0;
 	}
 	formResetCallback() {
-		this.checked = this.hasAttribute("checked");
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e;
-	}
-	updated() {
-		this._syncFormValue(), this._syncValidity();
+		this._formAssociation.setDisabled(e);
 	}
-	_syncFormValue() {
-		this._internals?.setFormValue?.(!this._isManagedByGroup && this._checked ? this.value || "on" : null);
+	formStateRestoreCallback(e) {
+		this._formAssociation.restore(e);
 	}
 	_syncValidity() {
-		if (!(!this._internals || typeof this._internals.setValidity != "function")) {
+		let e = this._formAssociation.getInternals();
+		if (!(!e || typeof e.setValidity != "function")) {
 			if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {
-				this._internals.setValidity({});
+				e.setValidity({});
 				return;
 			}
-			this._internals.setValidity({ valueMissing: !0 }, "请选择一项");
+			e.setValidity({ valueMissing: !0 }, "请选择一项");
 		}
 	}
 	handleClick() {
 		if (this._isDisabled || this._checked) return;
-		this._checked = !0, this._syncFormValue(), this.requestUpdate("checked", !1);
+		this._checked = !0, this._formAssociation.sync(), this.requestUpdate("checked", !1);
 		let e = this._isManagedByGroup ? {
 			bubbles: !1,
 			composed: !1
@@ -70,13 +80,14 @@ var l = class extends n {
 		(e.key === "Enter" || e.key === " ") && (e.preventDefault(), this.handleClick());
 	}
 	render() {
-		return r`
-      <label
-        class=${c({
+		let e = {
 			"wui-radio": !0,
 			"is-checked": this._checked,
 			"is-disabled": this._isDisabled
-		})}
+		};
+		return o`
+      <label
+        class=${d(e)}
         tabindex=${this._isDisabled ? "-1" : "0"}
         role="radio"
         aria-checked=${String(this._checked)}
@@ -92,17 +103,17 @@ var l = class extends n {
     `;
 	}
 };
-e([s()], l.prototype, "_formDisabled", void 0), e([s()], l.prototype, "_groupDisabled", void 0), e([s()], l.prototype, "_checked", void 0), e([o({ type: String })], l.prototype, "value", void 0), e([o({
+e([u()], f.prototype, "_checked", void 0), e([l({ type: String })], f.prototype, "value", void 0), e([l({
 	type: String,
 	reflect: !0
-})], l.prototype, "name", void 0), e([o({
+})], f.prototype, "name", void 0), e([l({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "disabled", void 0), e([o({
+})], f.prototype, "disabled", void 0), e([l({
 	type: Boolean,
 	reflect: !0
-})], l.prototype, "required", void 0), l = e([a("web-ui-radio")], l);
+})], f.prototype, "required", void 0), f = e([c("web-ui-radio")], f);
 //#endregion
-export { l as WebUiRadio };
+export { f as WebUiRadio };
 
 //# sourceMappingURL=index.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio/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 style from './style.css?inline'\n\n@customElement('web-ui-radio')\nexport class WebUiRadio 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-radio-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 || this._checked) return\n    this._checked = true\n    this._syncFormValue()\n    this.requestUpdate('checked', false)\n    // group-managed 时事件不冒泡/不组合，由 group 统一派发一次 host 事件\n    const opts: EventInit = this._isManagedByGroup\n      ? { bubbles: false, composed: false }\n      : { bubbles: true, composed: true }\n    this.dispatchEvent(new Event('input', opts))\n    this.dispatchEvent(new Event('change', opts))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-radio': true,\n      'is-checked': this._checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <label\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"radio\"\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-radio-circle\">\n          <span class=\"wui-radio-dot\"></span>\n        </span>\n        <span class=\"wui-radio-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-radio': WebUiRadio\n  }\n}\n"],"mappings":";;;;;;AAOO,IAAM,IAAN,cAAyB,EAAW;;EA0Bc,aApBtB,KAAA,gBAAA,IACC,KAAA,iBAAA,IAGN,KAAA,WAAA,IAaQ,KAAA,QAAA,IACc,KAAA,OAAA,IACK,KAAA,WAAA,IACA,KAAA,WAAA;;;EAzB9B,KAAA,SAAA,EAAU,CAAK;;;EAChB,KAAA,iBAAA;;CAUxB,IAAI,UAAmB;EACrB,OAAO,KAAK;CACd;CAEA,IAAI,QAAQ,GAAY;EACtB,IAAM,IAAM,KAAK;EAGjB,AAFA,KAAK,WAAW,GAChB,KAAK,eAAe,GACpB,KAAK,cAAc,WAAW,CAAG;CACnC;CAOA,IAAY,cAAuB;EACjC,OAAO,KAAK,YAAY,KAAK,iBAAiB,KAAK;CACrD;CAEA,IAAY,oBAA6B;EACvC,OAAO,KAAK,QAAQ,oBAAoB,MAAM;CAChD;CAEA,iBAAiB,GAAmB;EAClC,KAAK,iBAAiB;CACxB;CAEA,oBAA6B;EAC3B,MAAM,kBAAkB,GACpB,MAAK,eACT,KAAK,aAAa,KAAK,gBAAgB,GACnC,KAAK,aAAa,SAAS,MAC7B,KAAK,WAAW,KAElB,KAAK,eAAe;CACtB;CAEA,oBAAoB;EAClB,KAAK,UAAU,KAAK,aAAa,SAAS;CAC5C;CAEA,qBAAqB,GAAmB;EACtC,KAAK,gBAAgB;CACvB;CAEA,UAAmB;EAEjB,AADA,KAAK,eAAe,GACpB,KAAK,cAAc;CACrB;CAEA,iBAAyB;EACvB,KAAK,YAAY,eAAe,CAAC,KAAK,qBAAqB,KAAK,WAAW,KAAK,SAAS,OAAO,IAAI;CACtG;CAEA,gBAAwB;EAClB,OAAC,KAAK,cAAc,OAAO,KAAK,WAAW,eAAgB,aAC/D;OAAI,KAAK,eAAe,KAAK,qBAAqB,CAAC,KAAK,YAAY,KAAK,UAAU;IACjF,KAAK,WAAW,YAAY,CAAC,CAAC;IAC9B;GACF;GACA,KAAK,WAAW,YAAY,EAAE,cAAc,GAAK,GAAG,OAAO;EAD3D;CAEF;CAGA,cAAsB;EACpB,IAAI,KAAK,eAAe,KAAK,UAAU;EAGvC,AAFA,KAAK,WAAW,IAChB,KAAK,eAAe,GACpB,KAAK,cAAc,WAAW,EAAK;EAEnC,IAAM,IAAkB,KAAK,oBACzB;GAAE,SAAS;GAAO,UAAU;EAAM,IAClC;GAAE,SAAS;GAAM,UAAU;EAAK;EAEpC,AADA,KAAK,cAAc,IAAI,MAAM,SAAS,CAAI,CAAC,GAC3C,KAAK,cAAc,IAAI,MAAM,UAAU,CAAI,CAAC;CAC9C;CAEA,cAAsB,GAAkB;EACtC,CAAI,EAAE,QAAQ,WAAW,EAAE,QAAQ,SACjC,EAAE,eAAe,GACjB,KAAK,YAAY;CAErB;CAEA,SAAkB;EAOhB,OAAO,CAAI;;gBAEC,EAAS;GAPnB,aAAa;GACb,cAAc,KAAK;GACnB,eAAe,KAAK;EAKD,CAAG,EAAE;mBACX,KAAK,cAAc,OAAO,IAAI;;uBAE1B,OAAO,KAAK,QAAQ,EAAE;wBACrB,OAAO,KAAK,WAAW,EAAE;iBAChC,KAAK,YAAY;mBACf,KAAK,cAAc;;;;;;;;CAQpC;AAMF;AAxHG,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,iBAAA,KAAA,CAAA,GACN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,kBAAA,KAAA,CAAA,GAGN,EAAA,CAAA,EAAM,CAAA,GAAA,EAAA,WAAA,YAAA,KAAA,CAAA,GAaN,EAAA,CAAA,EAAS,EAAE,MAAM,OAAO,CAAC,CAAA,GAAA,EAAA,WAAA,SAAA,KAAA,CAAA,GACzB,EAAA,CAAA,EAAS;CAAE,MAAM;CAAQ,SAAS;AAAK,CAAC,CAAA,GAAA,EAAA,WAAA,QAAA,KAAA,CAAA,GACxC,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,YAAA,KAAA,CAAA,GA3B3C,IAAA,EAAA,CAAA,EAAc,cAAc,CAAA,GAAA,CAAA"}
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/components/radio/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 { defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupManaged, type SelectionGroupContext } from '@/shared/group-management'\n\nimport style from './style.css?inline'\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends LitElement {\n  static override styles = unsafeCSS(style)\n  static formAssociated = true\n\n  private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n    requestUpdate: () => this.requestUpdate()\n  }).make()\n\n  @state() private _checked = false\n\n  get checked(): boolean {\n    return this._checked\n  }\n\n  set checked(v: boolean) {\n    const old = this._checked\n    this._checked = v\n    this._formAssociation.sync()\n    this.requestUpdate('checked', old)\n  }\n\n  @property({ type: String }) value = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private get _isDisabled(): boolean {\n    return (\n      this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === true\n    )\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this._groupManagement.getContext() !== undefined\n  }\n\n  private readonly _formAssociation = defineFormAssociation<boolean>({\n    host: this,\n    initialize: () => {\n      if (this.hasAttribute('checked')) this._checked = true\n    },\n    getState: () => this._checked,\n    setState: checked => {\n      this.checked = checked\n    },\n    getFormValue: () => (!this._isManagedByGroup && this._checked ? this.value || 'on' : null),\n    getFormState: () => String(this._checked),\n    restoreState: state => {\n      if (typeof state === 'string') this.checked = state === 'true'\n    },\n    isStateManaged: () => this._isManagedByGroup,\n    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  formResetCallback() {\n    this._formAssociation.reset()\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this._formAssociation.setDisabled(disabled)\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this._formAssociation.restore(state)\n  }\n\n  private _syncValidity() {\n    const internals = this._formAssociation.getInternals()\n    if (!internals || typeof internals.setValidity !== 'function') return\n    if (this._isDisabled || this._isManagedByGroup || !this.required || this._checked) {\n      internals.setValidity({})\n      return\n    }\n    internals.setValidity({ valueMissing: true }, '请选择一项')\n  }\n\n  private handleClick() {\n    if (this._isDisabled || this._checked) return\n    this._checked = true\n    this._formAssociation.sync()\n    this.requestUpdate('checked', false)\n    // group-managed 时事件不冒泡/不组合，由 group 统一派发一次 host 事件\n    const opts: EventInit = this._isManagedByGroup\n      ? { bubbles: false, composed: false }\n      : { bubbles: true, composed: true }\n    this.dispatchEvent(new Event('input', opts))\n    this.dispatchEvent(new Event('change', opts))\n  }\n\n  private handleKeyDown(e: KeyboardEvent) {\n    if (e.key === 'Enter' || e.key === ' ') {\n      e.preventDefault()\n      this.handleClick()\n    }\n  }\n\n  override render() {\n    const cls = {\n      'wui-radio': true,\n      'is-checked': this._checked,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <label\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"radio\"\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-radio-circle\">\n          <span class=\"wui-radio-dot\"></span>\n        </span>\n        <span class=\"wui-radio-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-radio': WebUiRadio\n  }\n}\n"],"mappings":"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"}

package/dist/components/radio/style.js

@@ -1,5 +1,5 @@
 //#region src/components/radio/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{cursor:pointer;display:inline-block}:host([disabled]){cursor:not-allowed}.wui-radio{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-radio:focus-visible{outline:3px solid var(--wui-focus-ring,#08f6);outline-offset:2px;border-radius:2147483647px}.wui-radio.is-disabled{cursor:not-allowed;color:var(--wui-color-text-muted,#6a6a6a);opacity:.4}.wui-radio-circle{background-color:var(--wui-color-surface-raised,#f2f2f7);border-radius:2147483647px;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-radio-circle{background-color:var(--wui-color-accent,#08f)}.wui-radio-dot{opacity:0;background-color:var(--wui-color-surface,#fff);width:8px;height:8px;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));border-radius:2147483647px;transform:scale(.85);box-shadow:inset 0 -1px 2px #0000001f,inset 0 1px 2px #ffffff80,0 0 4px #0088ff4d}.is-checked .wui-radio-dot{opacity:1;transform:scale(1)}.wui-radio-label{pointer-events:none}@media (prefers-reduced-motion:reduce){.wui-radio-dot,.is-checked .wui-radio-dot{transform:none}}";
+var e = "*,:before,:after{box-sizing:border-box}:host{cursor:pointer;display:inline-block}:host([disabled]){cursor:not-allowed}.wui-radio{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-radio:focus-visible{outline:var(--wui-focus-ring-width,3px) solid var(--wui-color-focus-ring,#08f6);outline-offset:2px;border-radius:2147483647px}.wui-radio.is-disabled{cursor:not-allowed;color:var(--wui-color-text-secondary,#6a6a6a);opacity:.4}.wui-radio-circle{background-color:var(--wui-color-surface-raised,#f2f2f7);border-radius:2147483647px;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-radio-circle{background-color:var(--wui-color-accent,#08f)}.wui-radio-dot{opacity:0;background-color:var(--wui-color-surface,#fff);width:8px;height:8px;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));border-radius:2147483647px;transform:scale(.85);box-shadow:inset 0 -1px 2px #0000001f,inset 0 1px 2px #ffffff80,0 0 4px #0088ff4d}.is-checked .wui-radio-dot{opacity:1;transform:scale(1)}.wui-radio-label{pointer-events:none}@media (prefers-reduced-motion:reduce){.wui-radio-dot,.is-checked .wui-radio-dot{transform:none}}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio/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}\n\n.wui-radio {\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.wui-radio.is-disabled {\n  cursor: not-allowed;\n  color: var(--wui-color-text-muted, #6a6a6a);\n  opacity: 0.4;\n}\n\n.wui-radio-circle {\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: calc(infinity * 1px);\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-radio-circle {\n  background-color: var(--wui-color-accent, #08f);\n}\n\n.wui-radio-dot {\n  transform: scale(0.85);\n\n  width: 8px;\n  height: 8px;\n  border-radius: calc(infinity * 1px);\n\n  opacity: 0;\n  background-color: var(--wui-color-surface, #fff);\n  box-shadow:\n    inset 0 -1px 2px rgb(0 0 0 / 0.12),\n    inset 0 1px 2px rgb(255 255 255 / 0.5),\n    0 0 4px rgb(0 136 255 / 0.3);\n\n  transition:\n    opacity var(--wui-duration-trigger, 160ms) ease,\n    transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-checked .wui-radio-dot {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.wui-radio-label {\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-radio-dot,\n  .is-checked .wui-radio-dot {\n    transform: none;\n  }\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio/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}\n\n.wui-radio {\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: var(--wui-focus-ring-width, 3px) solid var(--wui-color-focus-ring, rgb(0 136 255 / 0.4));\n    outline-offset: 2px;\n  }\n}\n\n.wui-radio.is-disabled {\n  cursor: not-allowed;\n  color: var(--wui-color-text-secondary, #6a6a6a);\n  opacity: 0.4;\n}\n\n.wui-radio-circle {\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: calc(infinity * 1px);\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-radio-circle {\n  background-color: var(--wui-color-accent, #08f);\n}\n\n.wui-radio-dot {\n  transform: scale(0.85);\n\n  width: 8px;\n  height: 8px;\n  border-radius: calc(infinity * 1px);\n\n  opacity: 0;\n  background-color: var(--wui-color-surface, #fff);\n  box-shadow:\n    inset 0 -1px 2px rgb(0 0 0 / 0.12),\n    inset 0 1px 2px rgb(255 255 255 / 0.5),\n    0 0 4px rgb(0 136 255 / 0.3);\n\n  transition:\n    opacity var(--wui-duration-trigger, 160ms) ease,\n    transform var(--wui-duration-trigger, 160ms) var(--wui-ease-enter, cubic-bezier(0.23, 1, 0.32, 1));\n}\n\n.is-checked .wui-radio-dot {\n  transform: scale(1);\n  opacity: 1;\n}\n\n.wui-radio-label {\n  pointer-events: none;\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .wui-radio-dot,\n  .is-checked .wui-radio-dot {\n    transform: none;\n  }\n}\n"],"mappings":""}

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

@@ -5,23 +5,17 @@ export declare class WebUiRadioGroup extends LitElement {
     name: string;
     disabled: boolean;
     required: boolean;
-    private _internals?;
     private _value;
-    private _formDisabled;
-    private _initialValue;
+    private readonly _groupController;
     get value(): string;
     set value(v: string);
     private get _isDisabled();
-    connectedCallback(): void;
-    disconnectedCallback(): void;
-    updated(changed: Map<string, unknown>): void;
+    private readonly _formAssociation;
+    private readonly _formAssociationController;
     formResetCallback(): void;
     formDisabledCallback(disabled: boolean): void;
-    private _syncFormValue;
+    formStateRestoreCallback(state: string | File | FormData | null): void;
     private _syncValidity;
-    private _syncValueToChildren;
-    private _handleChildChange;
-    private _handleSlotChange;
     render(): import('lit').TemplateResult<1>;
     readonly $events: {
         input: Event;

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

@@ -1,14 +1,57 @@
-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";
+import e from "../../_virtual/_@oxc-project_runtime@0.146.0/helpers/esm/decorate.js";
+import { FormAssociationController as t, defineFormAssociation as n } from "../../shared/form-association/index.js";
+import { GroupController as r, defineGroupCoordinator as i } from "../../shared/group-management/index.js";
+import a from "./style.js";
+import { LitElement as o, html as s, unsafeCSS as c } from "lit";
+import { customElement as l, property as u, state as d } from "lit/decorators.js";
 //#region src/components/radio-group/index.ts
-var c = class extends n {
+var f = class extends o {
 	constructor(...e) {
-		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._value = "", this._formDisabled = !1, this._initialValue = "";
+		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._value = "", this._groupController = new r(this, i({
+			host: this,
+			getItems: () => [...this.querySelectorAll("web-ui-radio")],
+			getValue: () => this._value,
+			setValue: (e) => {
+				this.value = e;
+			},
+			getDisabled: () => this._isDisabled,
+			isItem: (e) => e instanceof HTMLElement && e.matches("web-ui-radio"),
+			isItemSelected: (e, t) => e.value === t,
+			getNextValue: (e, t) => e.checked ? e.value : t,
+			valuesEqual: (e, t) => e === t,
+			copyValue: (e) => e,
+			setItemSelected: (e, t) => {
+				e.checked = t;
+			},
+			dispatchValueChange: () => {
+				this.dispatchEvent(new Event("input", {
+					bubbles: !0,
+					composed: !0
+				})), this.dispatchEvent(new Event("change", {
+					bubbles: !0,
+					composed: !0
+				}));
+			}
+		}).make()), this._formAssociation = n({
+			host: this,
+			initialize: () => {
+				let e = this.getAttribute("value");
+				e !== null && (this.value = e);
+			},
+			getState: () => this._value,
+			setState: (e) => {
+				this.value = e;
+			},
+			getFormValue: () => this.name && this._value ? this._value : null,
+			getFormState: () => this._value,
+			restoreState: (e) => {
+				typeof e == "string" && (this.value = e);
+			},
+			syncValidity: () => this._syncValidity()
+		}).make(), this._formAssociationController = new t(this, this._formAssociation);
 	}
 	static {
-		this.styles = i(t);
+		this.styles = c(a);
 	}
 	static {
 		this.formAssociated = !0;
@@ -18,70 +61,45 @@ var c = class extends n {
 	}
 	set value(e) {
 		let t = this._value;
-		this._value = e, this._syncFormValue(), this.requestUpdate("value", t);
+		this._value = e, this._formAssociation.sync(), 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), this._initialValue = this._value, this.addEventListener("change", this._handleChildChange, !0);
-	}
-	disconnectedCallback() {
-		super.disconnectedCallback(), this.removeEventListener("change", this._handleChildChange, !0);
-	}
-	updated(e) {
-		(e.has("value") || e.has("disabled") || e.has("_formDisabled")) && this._syncValueToChildren(), this._syncFormValue(), this._syncValidity();
+		return this.disabled || this._formAssociation.isFormDisabled();
 	}
 	formResetCallback() {
-		this.value = this._initialValue;
+		this._formAssociation.reset();
 	}
 	formDisabledCallback(e) {
-		this._formDisabled = e;
+		this._formAssociation.setDisabled(e), this._groupController.sync();
 	}
-	_syncFormValue() {
-		this._internals?.setFormValue?.(this.name && this._value ? this._value : null);
+	formStateRestoreCallback(e) {
+		this._formAssociation.restore(e);
 	}
 	_syncValidity() {
-		!this._internals || typeof this._internals.setValidity != "function" || (this._isDisabled || !this.required || this._value ? this._internals.setValidity({}) : this._internals.setValidity({ valueMissing: !0 }, "请选择一项"));
-	}
-	_syncValueToChildren() {
-		this.querySelectorAll("web-ui-radio").forEach((e) => {
-			e.checked = e.value === this._value, e.setGroupDisabled(this._isDisabled);
-		});
-	}
-	_handleChildChange(e) {
-		if (this._isDisabled) return;
-		let t = e.target;
-		if (!t.matches?.("web-ui-radio")) return;
-		let n = t;
-		!n.checked || n.value === this._value || (this.value = n.value, this.dispatchEvent(new Event("input", {
-			bubbles: !0,
-			composed: !0
-		})), this.dispatchEvent(new Event("change", {
-			bubbles: !0,
-			composed: !0
-		})));
-	}
-	_handleSlotChange() {
-		this._syncValueToChildren();
+		let e = this._formAssociation.getInternals();
+		if (!(!e || typeof e.setValidity != "function")) {
+			if (this._isDisabled || !this.required || this._value) {
+				e.setValidity({});
+				return;
+			}
+			e.setValidity({ valueMissing: !0 }, "请选择一项");
+		}
 	}
 	render() {
-		return r`<div class="wui-radio-group"><slot @slotchange=${this._handleSlotChange}></slot></div>`;
+		return s`<div class="wui-radio-group"><slot></slot></div>`;
 	}
 };
-e([o({
+e([u({
 	type: String,
 	reflect: !0
-})], c.prototype, "name", void 0), e([o({
+})], f.prototype, "name", void 0), e([u({
 	type: Boolean,
 	reflect: !0
-})], c.prototype, "disabled", void 0), e([o({
+})], f.prototype, "disabled", void 0), e([u({
 	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-radio-group")], c);
+})], f.prototype, "required", void 0), e([d()], f.prototype, "_value", void 0), f = e([l("web-ui-radio-group")], f);
 //#endregion
-export { c as WebUiRadioGroup };
+export { f as WebUiRadioGroup };
 
 //# sourceMappingURL=index.js.map