@greypan/web-ui 8.0.0 → 9.0.0

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 { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOpenOverlay } from '@/shared/overlay/open-overlay'\nimport { FLOATING_PLACEMENTS } from '@/shared/overlay/placement-props'\nimport { defineOverlayPortal } from '@/shared/overlay/portal'\nimport type { OverlayContainer, OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\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, FLOATING_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 _portal?: OverlayPortal\n  /**\n   * 开启态浮层（issue #120 Block 1）：本组件不再自行监听 keydown，只声明「我开着」，\n   * 由唯一仲裁者决定一次 Escape 关谁。实例作用域的帧事务入口也在这里（合并了原\n   * lifecycle）—— 它的 lifetime 长于一次开合（跨 `suspend()`/`resume()`），\n   * 但不长于实例本身。\n   */\n  private readonly _overlay = defineOpenOverlay().make({\n    requestClose: () => {\n      this._userOpenChange.mark()\n      this.open = false\n    },\n    isConnected: () => this.isConnected\n  })\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    openOverlay: this._overlay\n  })\n\n  get isOpen(): boolean {\n    return this.open\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._overlay.resume()\n    document.addEventListener('click', this._onClickOutside)\n    this.addEventListener('focusout', this._onFocusOut)\n    this._syncTriggerListeners()\n  }\n\n  override firstUpdated() {\n    // trigger slot 内容增删不触发宿主响应式更新：显式请求一轮渲染，\n    // 由 updated() 的 ARIA 回写覆盖晚到的 trigger 元素。\n    this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n      ?.addEventListener('slotchange', () => this.requestUpdate())\n\n    if (this.open) {\n      // 建立会话的那一帧没有句柄可作 liveness 凭据：关闭路径会 invalidate()（见 updated），\n      // 微任务先于 rAF 排空，因此该帧不可能跨过一次关闭执行。\n      this._overlay.scheduleFrame(() => {\n        this._openOverlay(this._shouldOpenInstantly)\n      })\n      this._shouldOpenInstantly = true\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onClickOutside)\n    this.removeEventListener('focusout', this._onFocusOut)\n    this.removeEventListener('pointerenter', this._onPointerEnter)\n    this.removeEventListener('pointerleave', this._onPointerLeave)\n    // 停止帧调度；撤销登记由 _panel.dispose() 完成（句柄归它持有）。\n    this._overlay.suspend()\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    this._panel.dispose()\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    // ARIA 回写不依赖 open 分支，任何渲染后都保持与宿主状态同步。\n    this._syncTriggerAria()\n\n    if (changed.has('portal') || changed.has('overlayContainer')) {\n      // 同帧 open + reconfigure 可能排两个回调；先结束旧事务，让 reconfigure 成为本帧唯一入口。\n      this._overlay.invalidate()\n      this._overlay.scheduleFrame(() => 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        this._overlay.scheduleFrame(() => {\n          this._openOverlay(isInstant)\n        })\n        if (this._userOpenChange.consume()) this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._overlay.invalidate()\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    this._syncOverlayInert()\n  }\n\n  show() {\n    if (this.disabled || this.open) return\n    this.open = true\n  }\n\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\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  /*\n   * `manual` 触发器的 popover 不由用户关闭，但仍是候选：Escape 被它吞掉（同时压掉\n   * 原生 cancel），只是不走关闭入口。与旧的「跳过候选」语义不同 —— 旧语义放任 Escape\n   * 落到下层浮层，把外层一起关掉。trigger 可在开启期间改写，所以走动态通道同步。\n   */\n  private _syncOverlayInert() {\n    this._panel.getHandle()?.setInert(this.trigger === 'manual')\n  }\n\n  private _openOverlay(isInstant = false) {\n    /*\n     * 登记与仲裁归属由 anchored panel 完成（claim 要求 panel 已就位，祖先链才判得对）。\n     * 原实现在这里额外以宿主为 owner 再登记一次：anchor 是宿主 shadow 内的\n     * `.popover-trigger` 包装 div（不是会被 slot 重定向的 trigger 内容），其祖先链上\n     * 首个已开启浮层与从宿主上溯结果一致，因此那一次是冗余的。\n     */\n    this._panel.open(isInstant)\n    this._syncOverlayInert()\n  }\n\n  private _migratableContentNodes(nodes: Node[]): Node[] {\n    // 框架注释锚点（v-if/v-for 占位）必须留在宿主：面板内容是实时渲染契约，\n    // 框架后续 patch 以宿主内锚点为插入基准，锚点进面板会让插入落空。\n    return nodes.filter(node => !(node instanceof Comment) && !(node instanceof HTMLElement && node.slot === 'trigger'))\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      // 已迁移节点被框架删除后的解除追踪是 portal 内建默认行为，这里无需 onContentChange\n      migrateAddedNodes: addedNodes => this._migratableContentNodes(addedNodes)\n    })\n    this._portal = portal\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(this._migratableContentNodes(Array.from(this.childNodes)))\n    return portal\n  }\n\n  private async _closeOverlay() {\n    await this._panel.close(() => this.open)\n  }\n\n  private _reconfigureOverlay() {\n    // portal 变更也会登记 rAF；宿主卸载后不得再通过 reconfigure 重建面板。\n    if (!this.isConnected) return\n    this._panel.reconfigure(this.open)\n    /*\n     * reconfigure 重新 claim = 新会话，inert 回到 false。这里的重推是**承重的**，不是\n     * 防御性备份：`reconfigure` 不触发 Lit 渲染，`updated()` 那次同步不会跟着来。\n     * 实测摘掉本行，「portal 变更后 Escape 仍不关闭」立刻转红（select / autocomplete 的\n     * 同类重推则被各自的渲染掩盖，摘掉仍绿）。\n     */\n    this._syncOverlayInert()\n  }\n\n  private _dispatchChange(open: boolean) {\n    dispatchOpenChangeEvent(this, open)\n  }\n\n  /*\n   * trigger 包装 div 不可聚焦，AT 读不到其 aria 状态：把 aria-expanded /\n   * aria-controls 同步回写到 trigger slot 的首个 assigned element（Q8a）。\n   * 包装 div 上的同名属性保留（additive，兼容既有查询）。\n   */\n  private _syncTriggerAria() {\n    const trigger = this._queryTrigger()\n    if (!trigger) return\n    trigger.setAttribute('aria-expanded', String(this.open))\n    trigger.setAttribute('aria-controls', this._panelId)\n  }\n\n  private _focusPanel() {\n    this._overlay.scheduleFrame(() => {\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    // 在监听器内部判定：composedPath() 在派发结束后会被清空。\n    if (this._panel.getHandle()?.containsEvent(e)) 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    this._overlay.scheduleFrame(() => {\n      if (!this.matches(':focus-within') && !this._panel.getHandle()?.hasFocusWithin()) {\n        this._userOpenChange.mark()\n        this.open = false\n      }\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-floating-panel wui-glass\"\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 { dispatchOpenChangeEvent } from '@/shared/open-state'\nimport { defineAnchoredPanel } from '@/shared/overlay/anchored-panel'\nimport { defineOpenOverlay } from '@/shared/overlay/open-overlay'\nimport { FLOATING_PLACEMENTS } from '@/shared/overlay/placement-props'\nimport { defineOverlayPortal, type OverlayContainer, type OverlayPortal } from '@/shared/overlay/portal'\n\nimport style from './style.css?inline'\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, FLOATING_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 _portal?: OverlayPortal\n  /**\n   * 开启态浮层（issue #120 Block 1）：本组件不再自行监听 keydown，只声明「我开着」，\n   * 由唯一仲裁者决定一次 Escape 关谁。实例作用域的帧事务入口也在这里（合并了原\n   * lifecycle）—— 它的 lifetime 长于一次开合（跨 `suspend()`/`resume()`），\n   * 但不长于实例本身。\n   */\n  private readonly _overlay = defineOpenOverlay().make({\n    requestClose: () => {\n      this._userOpenChange.mark()\n      this.open = false\n    },\n    isConnected: () => this.isConnected\n  })\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    openOverlay: this._overlay\n  })\n\n  get isOpen(): boolean {\n    return this.open\n  }\n\n  override connectedCallback() {\n    super.connectedCallback()\n    this._overlay.resume()\n    document.addEventListener('click', this._onClickOutside)\n    this.addEventListener('focusout', this._onFocusOut)\n    this._syncTriggerListeners()\n  }\n\n  override firstUpdated() {\n    // trigger slot 内容增删不触发宿主响应式更新：显式请求一轮渲染，\n    // 由 updated() 的 ARIA 回写覆盖晚到的 trigger 元素。\n    this.shadowRoot\n      ?.querySelector<HTMLSlotElement>('slot[name=\"trigger\"]')\n      ?.addEventListener('slotchange', () => this.requestUpdate())\n\n    if (this.open) {\n      // 建立会话的那一帧没有句柄可作 liveness 凭据：关闭路径会 invalidate()（见 updated），\n      // 微任务先于 rAF 排空，因此该帧不可能跨过一次关闭执行。\n      this._overlay.scheduleFrame(() => {\n        this._openOverlay(this._shouldOpenInstantly)\n      })\n      this._shouldOpenInstantly = true\n    }\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback()\n    document.removeEventListener('click', this._onClickOutside)\n    this.removeEventListener('focusout', this._onFocusOut)\n    this.removeEventListener('pointerenter', this._onPointerEnter)\n    this.removeEventListener('pointerleave', this._onPointerLeave)\n    // 停止帧调度；撤销登记由 _panel.dispose() 完成（句柄归它持有）。\n    this._overlay.suspend()\n    clearTimeout(this._showTimer)\n    clearTimeout(this._hideTimer)\n    this._panel.dispose()\n  }\n\n  protected override updated(changed: Map<string, unknown>) {\n    // ARIA 回写不依赖 open 分支，任何渲染后都保持与宿主状态同步。\n    this._syncTriggerAria()\n\n    if (changed.has('portal') || changed.has('overlayContainer')) {\n      // 同帧 open + reconfigure 可能排两个回调；先结束旧事务，让 reconfigure 成为本帧唯一入口。\n      this._overlay.invalidate()\n      this._overlay.scheduleFrame(() => 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        this._overlay.scheduleFrame(() => {\n          this._openOverlay(isInstant)\n        })\n        if (this._userOpenChange.consume()) this._dispatchChange(true)\n        this._focusPanel()\n      } else {\n        this._overlay.invalidate()\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    this._syncOverlayInert()\n  }\n\n  show() {\n    if (this.disabled || this.open) return\n    this.open = true\n  }\n\n  close() {\n    if (!this.open) return\n    this.open = false\n  }\n\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  /*\n   * `manual` 触发器的 popover 不由用户关闭，但仍是候选：Escape 被它吞掉（同时压掉\n   * 原生 cancel），只是不走关闭入口。与旧的「跳过候选」语义不同 —— 旧语义放任 Escape\n   * 落到下层浮层，把外层一起关掉。trigger 可在开启期间改写，所以走动态通道同步。\n   */\n  private _syncOverlayInert() {\n    this._panel.getHandle()?.setInert(this.trigger === 'manual')\n  }\n\n  private _openOverlay(isInstant = false) {\n    /*\n     * 登记与仲裁归属由 anchored panel 完成（claim 要求 panel 已就位，祖先链才判得对）。\n     * 原实现在这里额外以宿主为 owner 再登记一次：anchor 是宿主 shadow 内的\n     * `.popover-trigger` 包装 div（不是会被 slot 重定向的 trigger 内容），其祖先链上\n     * 首个已开启浮层与从宿主上溯结果一致，因此那一次是冗余的。\n     */\n    this._panel.open(isInstant)\n    this._syncOverlayInert()\n  }\n\n  private _migratableContentNodes(nodes: Node[]): Node[] {\n    // 框架注释锚点（v-if/v-for 占位）必须留在宿主：面板内容是实时渲染契约，\n    // 框架后续 patch 以宿主内锚点为插入基准，锚点进面板会让插入落空。\n    return nodes.filter(node => !(node instanceof Comment) && !(node instanceof HTMLElement && node.slot === 'trigger'))\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      // 已迁移节点被框架删除后的解除追踪是 portal 内建默认行为，这里无需 onContentChange\n      migrateAddedNodes: addedNodes => this._migratableContentNodes(addedNodes)\n    })\n    this._portal = portal\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(this._migratableContentNodes(Array.from(this.childNodes)))\n    return portal\n  }\n\n  private async _closeOverlay() {\n    await this._panel.close(() => this.open)\n  }\n\n  private _reconfigureOverlay() {\n    // portal 变更也会登记 rAF；宿主卸载后不得再通过 reconfigure 重建面板。\n    if (!this.isConnected) return\n    this._panel.reconfigure(this.open)\n    /*\n     * reconfigure 重新 claim = 新会话，inert 回到 false。这里的重推是**承重的**，不是\n     * 防御性备份：`reconfigure` 不触发 Lit 渲染，`updated()` 那次同步不会跟着来。\n     * 实测摘掉本行，「portal 变更后 Escape 仍不关闭」立刻转红（select / autocomplete 的\n     * 同类重推则被各自的渲染掩盖，摘掉仍绿）。\n     */\n    this._syncOverlayInert()\n  }\n\n  private _dispatchChange(open: boolean) {\n    dispatchOpenChangeEvent(this, open)\n  }\n\n  /*\n   * trigger 包装 div 不可聚焦，AT 读不到其 aria 状态：把 aria-expanded /\n   * aria-controls 同步回写到 trigger slot 的首个 assigned element（Q8a）。\n   * 包装 div 上的同名属性保留（additive，兼容既有查询）。\n   */\n  private _syncTriggerAria() {\n    const trigger = this._queryTrigger()\n    if (!trigger) return\n    trigger.setAttribute('aria-expanded', String(this.open))\n    trigger.setAttribute('aria-controls', this._panelId)\n  }\n\n  private _focusPanel() {\n    this._overlay.scheduleFrame(() => {\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    // 在监听器内部判定：composedPath() 在派发结束后会被清空。\n    if (this._panel.getHandle()?.containsEvent(e)) 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    this._overlay.scheduleFrame(() => {\n      if (!this.matches(':focus-within') && !this._panel.getHandle()?.hasFocusWithin()) {\n        this._userOpenChange.mark()\n        this.open = false\n      }\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-floating-panel wui-glass\"\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-internal-glass-shadow:var(--wui-shadow-panel,0 3px 9px #00000045);--wui-glass-corner-radius:var(--wui-radius-menu,18px);z-index:var(--wui-layer-inline-overlay,1);box-sizing:border-box;border-radius:var(--wui-radius-menu,18px);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-menu,#f6f6f6d1);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}";
+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);--wui-glass-corner-radius:var(--wui-radius-menu,18px);--wui-color-glass-ring:transparent;z-index:var(--wui-layer-inline-overlay,1);box-sizing:border-box;width:max-content;max-width:min(90vw,400px);padding:var(--wui-space-2,8px) var(--wui-space-3,12px);border-radius:var(--wui-radius-menu,18px);font-size:var(--wui-font-size,14px);line-height:var(--wui-line-height-normal,1.5);color:var(--wui-color-text,#1b1b1b);background-color:var(--wui-color-surface-menu,#fafafac2);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,color-mix(in srgb, var(--wui-color-accent,#08f) 40%, transparent));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-internal-glass-shadow: var(--wui-shadow-panel, 0 3px 9px rgb(0 0 0 / 0.27));\n  --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\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: var(--wui-radius-menu, 18px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: 1.5;\n  color: var(--wui-color-text, #1b1b1b);\n\n  /* 玻璃背景：wui-glass 在面板自身，这里覆盖其默认玻璃底为菜单表面色 */\n  background-color: var(--wui-color-surface-menu, 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":""}
+{"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  --wui-glass-corner-radius: var(--wui-radius-menu, 18px);\n\n  /* 面板宽远大于角半径，环底色铺出的整圈铺底会在长边中段读成一条比四角更重的\n     直边描边；转 transparent 后只剩四段角弧，见 menu-portal.css 同处注释。 */\n  --wui-color-glass-ring: transparent;\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: var(--wui-space-2, 8px) var(--wui-space-3, 12px);\n  border-radius: var(--wui-radius-menu, 18px);\n\n  font-size: var(--wui-font-size, 14px);\n  line-height: var(--wui-line-height-normal, 1.5);\n  color: var(--wui-color-text, #1b1b1b);\n\n  /* 玻璃背景：wui-glass 在面板自身，这里覆盖其默认玻璃底为菜单表面色 */\n  background-color: var(--wui-color-surface-menu, rgb(250 250 250 / 0.76));\n\n  &:where([hidden]) {\n    display: none;\n  }\n\n  &:focus-visible {\n    outline: var(--wui-focus-ring-width, 3px) solid\n      var(--wui-color-focus-ring, color-mix(in srgb, var(--wui-color-accent, #08f) 40%, transparent));\n    outline-offset: 2px;\n  }\n}\n\n.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

@@ -367,6 +367,8 @@ export declare class WebUiRadio extends WebUiRadio_base {
     static styles: import('lit').CSSResult[];
     private readonly _groupManagement;
     private _checked;
+    /** 标签没有可渲染内容（空槽位，或只挂着一个无障碍名）时收掉 gap，见 LabelEmptinessController。 */
+    private _labelEmpty;
     get checked(): boolean;
     set checked(v: boolean);
     value: string;
@@ -377,6 +379,7 @@ export declare class WebUiRadio extends WebUiRadio_base {
     private get _isManagedByGroup();
     private readonly _formAssociation;
     private readonly _formAssociationController;
+    private readonly _labelEmptiness;
     private _syncValidity;
     private handleClick;
     private handleKeyDown;

package/dist/components/radio/index.js

@@ -1,20 +1,21 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import { installPointerFocusSuppression as t } from "../../shared/focus/pointer-focus.js";
-import { defineGroupManaged as n, selectionGroupContextKey as r } from "../../shared/group-management/index.js";
-import { FormAssociated as i, FormAssociationController as a, defineFormAssociation as o } from "../../shared/form-association/index.js";
+import { FormAssociated as n, FormAssociationController as r, defineFormAssociation as i } from "../../shared/form-association/index.js";
+import { defineGroupManaged as a, selectionGroupContextKey as o } from "../../shared/group-management/index.js";
 import s from "../../assets/selection-control.js";
-import c from "./style.js";
-import { LitElement as l, html as u, unsafeCSS as d } from "lit";
-import { customElement as f, property as p, state as m } from "lit/decorators.js";
-import { classMap as h } from "lit/directives/class-map.js";
+import { LabelEmptinessController as c } from "../../shared/label-emptiness/index.js";
+import l from "./style.js";
+import { LitElement as u, html as d, unsafeCSS as f } from "lit";
+import { customElement as p, property as m, state as h } from "lit/decorators.js";
+import { classMap as g } from "lit/directives/class-map.js";
 //#region src/components/radio/index.ts
 t();
-var g = class extends i(l) {
+var _ = class extends n(u) {
 	constructor(...e) {
-		super(...e), this._groupManagement = n(this, {
-			context: r,
+		super(...e), this._groupManagement = a(this, {
+			context: o,
 			requestUpdate: () => this.requestUpdate()
-		}).make(), this._checked = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1, this._formAssociation = o({
+		}).make(), this._checked = !1, this._labelEmpty = !1, this.value = "", this.name = "", this.disabled = !1, this.required = !1, this._formAssociation = i({
 			host: this,
 			initialize: () => {
 				this.hasAttribute("checked") && (this._checked = !0);
@@ -30,10 +31,12 @@ var g = class extends i(l) {
 			},
 			isStateManaged: () => this._isManagedByGroup,
 			syncValidity: () => this._syncValidity()
-		}).make(), this._formAssociationController = new a(this, this._formAssociation);
+		}).make(), this._formAssociationController = new r(this, this._formAssociation), this._labelEmptiness = new c(this, ".wui-radio-label", (e) => {
+			this._labelEmpty = e;
+		});
 	}
 	static {
-		this.styles = [d(s), d(c)];
+		this.styles = [f(s), f(l)];
 	}
 	get checked() {
 		return this._checked;
@@ -77,11 +80,12 @@ var g = class extends i(l) {
 		let e = {
 			"wui-radio": !0,
 			"is-checked": this._checked,
+			"is-label-empty": this._labelEmpty,
 			"is-disabled": this._isDisabled
 		};
-		return u`
+		return d`
       <label
-        class=${h(e)}
+        class=${g(e)}
         tabindex=${this._isDisabled ? "-1" : "0"}
         role="radio"
         aria-checked=${String(this._checked)}
@@ -97,17 +101,17 @@ var g = class extends i(l) {
     `;
 	}
 };
-e([m()], g.prototype, "_checked", void 0), e([p({ type: String })], g.prototype, "value", void 0), e([p({
+e([h()], _.prototype, "_checked", void 0), e([h()], _.prototype, "_labelEmpty", void 0), e([m({ type: String })], _.prototype, "value", void 0), e([m({
 	type: String,
 	reflect: !0
-})], g.prototype, "name", void 0), e([p({
+})], _.prototype, "name", void 0), e([m({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "disabled", void 0), e([p({
+})], _.prototype, "disabled", void 0), e([m({
 	type: Boolean,
 	reflect: !0
-})], g.prototype, "required", void 0), g = e([f("web-ui-radio")], g);
+})], _.prototype, "required", void 0), _ = e([p("web-ui-radio")], _);
 //#endregion
-export { g as WebUiRadio };
+export { _ 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 selectionControl from '@/assets/selection-control.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupManaged, selectionGroupContextKey, type SelectionGroupContext } from '@/shared/group-management'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(selectionControl), unsafeCSS(style)]\n  private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n    context: selectionGroupContextKey,\n    requestUpdate: () => this.requestUpdate()\n  }).make()\n\n  @state() private _checked = false\n\n  get checked(): boolean {\n    return this._checked\n  }\n\n  set checked(v: boolean) {\n    const old = this._checked\n    this._checked = v\n    this._formAssociation.sync()\n    this.requestUpdate('checked', old)\n  }\n\n  @property({ type: String }) value = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private get _isDisabled(): boolean {\n    return (\n      this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === true\n    )\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this._groupManagement.getContext() !== undefined\n  }\n\n  private readonly _formAssociation = defineFormAssociation<boolean>({\n    host: this,\n    initialize: () => {\n      if (this.hasAttribute('checked')) this._checked = true\n    },\n    getState: () => this._checked,\n    setState: checked => {\n      this.checked = checked\n    },\n    getFormValue: () => (!this._isManagedByGroup && this._checked ? this.value || 'on' : null),\n    getFormState: () => String(this._checked),\n    restoreState: state => {\n      if (typeof state === 'string') this.checked = state === 'true'\n    },\n    isStateManaged: () => this._isManagedByGroup,\n    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  private _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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"}
+{"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 selectionControl from '@/assets/selection-control.css?inline'\nimport { installPointerFocusSuppression } from '@/shared/focus/pointer-focus'\nimport { FormAssociated, defineFormAssociation, FormAssociationController } from '@/shared/form-association'\nimport { defineGroupManaged, selectionGroupContextKey, type SelectionGroupContext } from '@/shared/group-management'\nimport { LabelEmptinessController } from '@/shared/label-emptiness'\n\nimport style from './style.css?inline'\n\ninstallPointerFocusSuppression()\n\n@customElement('web-ui-radio')\nexport class WebUiRadio extends FormAssociated(LitElement) {\n  static override styles = [unsafeCSS(selectionControl), unsafeCSS(style)]\n  private readonly _groupManagement = defineGroupManaged<SelectionGroupContext>(this, {\n    context: selectionGroupContextKey,\n    requestUpdate: () => this.requestUpdate()\n  }).make()\n\n  @state() private _checked = false\n\n  /** 标签没有可渲染内容（空槽位，或只挂着一个无障碍名）时收掉 gap，见 LabelEmptinessController。 */\n  @state() private _labelEmpty = false\n\n  get checked(): boolean {\n    return this._checked\n  }\n\n  set checked(v: boolean) {\n    const old = this._checked\n    this._checked = v\n    this._formAssociation.sync()\n    this.requestUpdate('checked', old)\n  }\n\n  @property({ type: String }) value = ''\n  @property({ type: String, reflect: true }) name = ''\n  @property({ type: Boolean, reflect: true }) disabled = false\n  @property({ type: Boolean, reflect: true }) required = false\n\n  private get _isDisabled(): boolean {\n    return (\n      this.disabled || this._formAssociation.isFormDisabled() || this._groupManagement.getContext()?.disabled === true\n    )\n  }\n\n  private get _isManagedByGroup(): boolean {\n    return this._groupManagement.getContext() !== undefined\n  }\n\n  private readonly _formAssociation = defineFormAssociation<boolean>({\n    host: this,\n    initialize: () => {\n      if (this.hasAttribute('checked')) this._checked = true\n    },\n    getState: () => this._checked,\n    setState: checked => {\n      this.checked = checked\n    },\n    getFormValue: () => (!this._isManagedByGroup && this._checked ? this.value || 'on' : null),\n    getFormState: () => String(this._checked),\n    restoreState: state => {\n      if (typeof state === 'string') this.checked = state === 'true'\n    },\n    isStateManaged: () => this._isManagedByGroup,\n    syncValidity: () => this._syncValidity()\n  }).make()\n\n  private readonly _formAssociationController = new FormAssociationController(this, this._formAssociation)\n\n  private readonly _labelEmptiness = new LabelEmptinessController(this, '.wui-radio-label', empty => {\n    this._labelEmpty = empty\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-label-empty': this._labelEmpty,\n      'is-disabled': this._isDisabled\n    }\n\n    return html`\n      <label\n        class=${classMap(cls)}\n        tabindex=${this._isDisabled ? '-1' : '0'}\n        role=\"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 = ".wui-radio-circle{border-radius:var(--wui-radius-control,calc(infinity * 1px))}.is-checked .wui-radio-circle{background-color:var(--wui-color-accent,#08f)}.wui-radio-dot{border-radius:var(--wui-radius-control,calc(infinity * 1px));opacity:0;background-color:var(--wui-color-on-control,#fff);width:6px;height:6px;transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));transform:scale(0);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)}@media (prefers-reduced-motion:reduce){.wui-radio-dot,.is-checked .wui-radio-dot{transform:none}}";
+var e = ".wui-radio-circle{border-radius:var(--wui-radius-control,calc(infinity * 1px))}.is-checked .wui-radio-circle{background-color:var(--wui-color-accent,#08f)}.wui-radio-dot{border-radius:var(--wui-radius-control,calc(infinity * 1px));opacity:0;background-color:var(--wui-color-on-control,#fff);width:6px;height:6px;box-shadow:inset 0 -1px 2px #0000001f, inset 0 1px 2px #ffffff80,  0 0 4px color-mix(in srgb, var(--wui-color-accent,#08f) 30%, transparent);transition:opacity var(--wui-duration-trigger,.16s) ease, transform var(--wui-duration-trigger,.16s) var(--wui-ease-enter,cubic-bezier(.23, 1, .32, 1));transform:scale(0)}.is-checked .wui-radio-dot{opacity:1;transform:scale(1)}@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":[".wui-radio-circle {\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\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);\n\n  width: 6px;\n  height: 6px;\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  opacity: 0;\n  background-color: var(--wui-color-on-control, #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@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":[".wui-radio-circle {\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\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);\n\n  width: 6px;\n  height: 6px;\n  border-radius: var(--wui-radius-control, calc(infinity * 1px));\n\n  opacity: 0;\n  background-color: var(--wui-color-on-control, #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    /*\n     * 外发光跟着 accent，而不是 --wui-color-focus-ring：这是选中态的装饰性辉光，\n     * 与键盘焦点环是两种东西（alpha 也不同：0.3 vs 0.4/0.62）。默认值下与原值等价。\n     */\n    0 0 4px color-mix(in srgb, var(--wui-color-accent, #08f) 30%, transparent);\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@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.js

@@ -1,14 +1,14 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
-import { GroupController as t, defineGroupCoordinator as n } from "../../shared/group-management/index.js";
-import { normalizeLiteral as r } from "../../shared/normalize/index.js";
-import { FormAssociated as i, FormAssociationController as a, defineFormAssociation as o } from "../../shared/form-association/index.js";
+import { FormAssociated as t, FormAssociationController as n, defineFormAssociation as r } from "../../shared/form-association/index.js";
+import { GroupController as i, defineGroupCoordinator as a } from "../../shared/group-management/index.js";
+import { normalizeLiteral as o } from "../../shared/normalize/index.js";
 import s from "./style.js";
 import { LitElement as c, html as l, unsafeCSS as u } from "lit";
 import { customElement as d, property as f, state as p } from "lit/decorators.js";
 //#region src/components/radio-group/index.ts
-var m = ["horizontal", "vertical"], h = class extends i(c) {
+var m = ["horizontal", "vertical"], h = class extends t(c) {
 	constructor(...e) {
-		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._direction = "vertical", this._value = "", this._groupController = new t(this, n({
+		super(...e), this.name = "", this.disabled = !1, this.required = !1, this._direction = "vertical", this._value = "", this._groupController = new i(this, a({
 			host: this,
 			getItems: () => [...this.querySelectorAll("web-ui-radio")],
 			getValue: () => this._value,
@@ -33,7 +33,7 @@ var m = ["horizontal", "vertical"], h = class extends i(c) {
 					composed: !0
 				}));
 			}
-		}).make()), this._formAssociation = o({
+		}).make()), this._formAssociation = r({
 			host: this,
 			initialize: () => {
 				let e = this.getAttribute("value");
@@ -49,7 +49,7 @@ var m = ["horizontal", "vertical"], h = class extends i(c) {
 				typeof e == "string" && (this.value = e);
 			},
 			syncValidity: () => this._syncValidity()
-		}).make(), this._formAssociationController = new a(this, this._formAssociation);
+		}).make(), this._formAssociationController = new n(this, this._formAssociation);
 	}
 	static {
 		this.styles = u(s);
@@ -59,7 +59,7 @@ var m = ["horizontal", "vertical"], h = class extends i(c) {
 	}
 	set direction(e) {
 		let t = this._direction;
-		this._direction = r(e, m, "vertical"), this.requestUpdate("direction", t);
+		this._direction = o(e, m, "vertical"), this.requestUpdate("direction", t);
 	}
 	get value() {
 		return this._value;

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

@@ -1,5 +1,5 @@
 //#region src/components/radio-group/style.css?inline
-var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;gap:var(--wui-radio-group-gap,8px);flex-direction:column;display:inline-flex}.wui-radio-group{flex-direction:inherit;gap:inherit;display:flex}:host([direction=horizontal]){flex-direction:row}";
+var e = "*,:before,:after{box-sizing:border-box}:host{-webkit-user-select:none;user-select:none;gap:var(--wui-radio-group-gap,var(--wui-space-2,8px));flex-direction:column;display:inline-flex}.wui-radio-group{flex-direction:inherit;gap:inherit;display:flex}:host([direction=horizontal]){flex-direction:row}";
 //#endregion
 export { e as default };
 

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

@@ -1 +1 @@
-{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio-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: var(--wui-radio-group-gap, 8px);\n}\n\n.wui-radio-group {\n  display: flex;\n  flex-direction: inherit;\n  gap: inherit;\n}\n\n:host([direction='horizontal']) {\n  flex-direction: row;\n}\n"],"mappings":""}
+{"version":3,"file":"style.js","names":[],"sources":["../../../src/components/radio-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: var(--wui-radio-group-gap, var(--wui-space-2, 8px));\n}\n\n.wui-radio-group {\n  display: flex;\n  flex-direction: inherit;\n  gap: inherit;\n}\n\n:host([direction='horizontal']) {\n  flex-direction: row;\n}\n"],"mappings":""}

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

@@ -373,15 +373,20 @@ export declare class WebUiSegmented extends WebUiSegmented_base {
     required: boolean;
     private _value;
     private _indicatorReady;
+    private _settling;
     private _pressed;
     private _isDragging;
     private _dragGestureHandle;
+    private _settleFlight;
+    private _settleRequest;
+    private _settleTimer;
     disconnectedCallback(): void;
     private readonly _groupController;
     get value(): string;
     set value(v: string);
     private get _isDisabled();
     private _updateIndicator;
+    private _openSettleFlight;
     private handlePointerDown;
     private handlePointerUp;
     private handlePointerLeave;

package/dist/components/segmented/index.js

@@ -1,20 +1,26 @@
 import e from "../../_virtual/_@oxc-project_runtime@0.149.0/helpers/esm/decorate.js";
 import t from "../../assets/glass.js";
 import { installPointerFocusSuppression as n } from "../../shared/focus/pointer-focus.js";
-import { GroupController as r, defineGroupCoordinator as i } from "../../shared/group-management/index.js";
-import { normalizeLiteral as a } from "../../shared/normalize/index.js";
-import { FormAssociated as o, FormAssociationController as s, defineFormAssociation as c } from "../../shared/form-association/index.js";
-import { attachDragGesture as l } from "../../shared/gesture/drag-gesture.js";
-import { clamp as u, snapToNearest as d } from "../../shared/gesture/physics.js";
-import f from "./style.js";
-import { LitElement as p, html as m, unsafeCSS as h } from "lit";
-import { customElement as g, property as _, state as v } from "lit/decorators.js";
-import { classMap as y } from "lit/directives/class-map.js";
+import { FormAssociated as r, FormAssociationController as i, defineFormAssociation as a } from "../../shared/form-association/index.js";
+import { GroupController as o, defineGroupCoordinator as s } from "../../shared/group-management/index.js";
+import { normalizeLiteral as c } from "../../shared/normalize/index.js";
+import { parseDuration as l } from "../../shared/theme/duration.js";
+import { attachDragGesture as u } from "../../shared/gesture/drag-gesture.js";
+import { clamp as d, snapToNearest as f } from "../../shared/gesture/physics.js";
+import p from "./style.js";
+import { LitElement as m, html as h, unsafeCSS as g } from "lit";
+import { customElement as _, property as v, state as y } from "lit/decorators.js";
+import { classMap as b } from "lit/directives/class-map.js";
 //#region src/components/segmented/index.ts
 n();
-var b = ["inset", "raised"], x = class extends o(p) {
+var x = ["inset", "raised"];
+function S(e) {
+	let t = l(getComputedStyle(e).getPropertyValue("--wui-duration-trigger"));
+	return t === null ? 160 : Math.max(0, t);
+}
+var C = class extends r(m) {
 	constructor(...e) {
-		super(...e), this.name = "", this._variant = "inset", this.disabled = !1, this.required = !1, this._value = "", this._indicatorReady = !1, this._pressed = !1, this._isDragging = !1, this._dragGestureHandle = null, this._groupController = new r(this, i({
+		super(...e), this.name = "", this._variant = "inset", this.disabled = !1, this.required = !1, this._value = "", this._indicatorReady = !1, this._settling = !1, this._pressed = !1, this._isDragging = !1, this._dragGestureHandle = null, this._settleFlight = null, this._settleRequest = 0, this._groupController = new o(this, s({
 			host: this,
 			getItems: () => [...this.querySelectorAll("web-ui-segmented-trigger")],
 			getValue: () => this._value,
@@ -39,7 +45,7 @@ var b = ["inset", "raised"], x = class extends o(p) {
 					composed: !0
 				}));
 			}
-		}).make(), { afterSync: () => requestAnimationFrame(() => this._updateIndicator()) }), this._formAssociation = c({
+		}).make(), { afterSync: () => requestAnimationFrame(() => void this._updateIndicator()) }), this._formAssociation = a({
 			host: this,
 			initialize: () => {
 				let e = this.getAttribute("value");
@@ -54,20 +60,20 @@ var b = ["inset", "raised"], x = class extends o(p) {
 			restoreState: (e) => {
 				typeof e == "string" && (this.value = e);
 			}
-		}).make(), this._formAssociationController = new s(this, this._formAssociation);
+		}).make(), this._formAssociationController = new i(this, this._formAssociation);
 	}
 	static {
-		this.styles = [h(t), h(f)];
+		this.styles = [g(t), g(p)];
 	}
 	get variant() {
 		return this._variant;
 	}
 	set variant(e) {
 		let t = this._variant;
-		this._variant = a(e, b, "inset"), this.requestUpdate("variant", t);
+		this._variant = c(e, x, "inset"), this.requestUpdate("variant", t);
 	}
 	disconnectedCallback() {
-		super.disconnectedCallback(), this._dragGestureHandle?.destroy(), this._dragGestureHandle = null;
+		super.disconnectedCallback(), this._dragGestureHandle?.destroy(), this._dragGestureHandle = null, clearTimeout(this._settleTimer), this._settleTimer = void 0;
 	}
 	get value() {
 		return this._value;
@@ -79,14 +85,24 @@ var b = ["inset", "raised"], x = class extends o(p) {
 	get _isDisabled() {
 		return this.disabled || this._formAssociation.isFormDisabled();
 	}
-	_updateIndicator() {
+	async _updateIndicator() {
 		let e = this.querySelectorAll("web-ui-segmented-trigger"), t = 0, n = 0;
 		e.forEach((e) => {
 			if (e.value === this._value) {
 				let r = e.getBoundingClientRect(), i = this.getBoundingClientRect();
 				t = r.left - i.left, n = r.width;
 			}
-		}), this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${n}px`), this._indicatorReady ||= (this.renderRoot.querySelector(".wui-segmented-indicator")?.offsetWidth, !0);
+		}), this._indicatorReady && this._openSettleFlight() && await this.updateComplete, this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${n}px`), this._indicatorReady ||= (this.renderRoot.querySelector(".wui-segmented-indicator")?.offsetWidth, !0);
+	}
+	_openSettleFlight() {
+		let e = this._settleTimer !== void 0, t = {};
+		this._settleFlight = t;
+		let n = ++this._settleRequest;
+		clearTimeout(this._settleTimer);
+		let r = S(this);
+		return r === 0 ? (this._settleTimer = void 0, this._settleFlight = null, this._settling = !1, !1) : (this._settling = e, this._settleTimer = setTimeout(() => {
+			this._settleTimer = void 0, this._settleRequest === n && this._settleFlight === t && (this._settleFlight = null, this._settling = !1);
+		}, r), e);
 	}
 	handlePointerDown(e) {
 		if (this._isDisabled) return;
@@ -97,22 +113,22 @@ var b = ["inset", "raised"], x = class extends o(p) {
 		let i = r.getBoundingClientRect();
 		if (!(e.clientX >= i.left && e.clientX <= i.right && e.clientY >= i.top && e.clientY <= i.bottom)) return;
 		this._pressed = !0;
-		let a = this.getBoundingClientRect(), o = r.getBoundingClientRect(), s = o.left - a.left, c = o.width, f = t[0].getBoundingClientRect(), p = t[t.length - 1].getBoundingClientRect(), m = f.left - a.left, h = p.right - a.left - c, g = n.map((e) => {
+		let a = this.getBoundingClientRect(), o = r.getBoundingClientRect(), s = o.left - a.left, c = o.width, l = t[0].getBoundingClientRect(), p = t[t.length - 1].getBoundingClientRect(), m = l.left - a.left, h = p.right - a.left - c, g = n.map((e) => {
 			let t = e.getBoundingClientRect();
 			return t.left - a.left + t.width / 2;
 		});
-		this._dragGestureHandle?.destroy(), this._dragGestureHandle = l(e, {
+		this._dragGestureHandle?.destroy(), this._dragGestureHandle = u(e, {
 			axis: "x",
 			threshold: 6,
 			onMove: (e) => {
 				this._isDragging = !0;
-				let t = u(s + e.deltaX, m, h);
+				let t = d(s + e.deltaX, m, h);
 				this.style.setProperty("--indicator-left", `${t}px`), this.style.setProperty("--indicator-width", `${c}px`);
 			},
 			onEnd: (e) => {
 				let t = this._isDragging;
 				if (this._isDragging = !1, this._pressed = !1, t) {
-					let t = u(s + e.deltaX, m, h) + c / 2, i = r;
+					let t = d(s + e.deltaX, m, h) + c / 2, i = r;
 					if (e.velocityX > 300) {
 						let e = n.indexOf(r);
 						i = e !== -1 && e < n.length - 1 ? n[e + 1] : n[n.length - 1];
@@ -120,7 +136,7 @@ var b = ["inset", "raised"], x = class extends o(p) {
 						let e = n.indexOf(r);
 						i = e > 0 ? n[e - 1] : n[0];
 					} else {
-						let e = d(t, g);
+						let e = f(t, g);
 						e !== -1 && n[e] && (i = n[e]);
 					}
 					i.value === this._value ? this._updateIndicator() : (this.value = i.value, this._groupController.sync(), this.dispatchEvent(new Event("input", {
@@ -148,15 +164,16 @@ var b = ["inset", "raised"], x = class extends o(p) {
 		this._formAssociation.setDisabled(e), this._groupController.sync();
 	}
 	render() {
-		return m`
+		return h`
       <div
-        class=${y({
+        class=${b({
 			"wui-glass": !0,
 			"wui-segmented": !0,
 			"is-disabled": this._isDisabled,
 			"is-pressed": this._pressed,
 			"is-dragging": this._isDragging,
-			"is-indicator-ready": this._indicatorReady
+			"is-indicator-ready": this._indicatorReady,
+			"is-settling": this._settling
 		})}
         role="listbox"
         aria-orientation="horizontal"
@@ -171,20 +188,20 @@ var b = ["inset", "raised"], x = class extends o(p) {
     `;
 	}
 };
-e([_({
+e([v({
 	type: String,
 	reflect: !0
-})], x.prototype, "name", void 0), e([_({
+})], C.prototype, "name", void 0), e([v({
 	type: String,
 	reflect: !0
-})], x.prototype, "variant", null), e([_({
+})], C.prototype, "variant", null), e([v({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "disabled", void 0), e([_({
+})], C.prototype, "disabled", void 0), e([v({
 	type: Boolean,
 	reflect: !0
-})], x.prototype, "required", void 0), e([v()], x.prototype, "_value", void 0), e([v()], x.prototype, "_indicatorReady", void 0), e([v()], x.prototype, "_pressed", void 0), e([v()], x.prototype, "_isDragging", void 0), x = e([g("web-ui-segmented")], x);
+})], C.prototype, "required", void 0), e([y()], C.prototype, "_value", void 0), e([y()], C.prototype, "_indicatorReady", void 0), e([y()], C.prototype, "_settling", void 0), e([y()], C.prototype, "_pressed", void 0), e([y()], C.prototype, "_isDragging", void 0), C = e([_("web-ui-segmented")], C);
 //#endregion
-export { x as WebUiSegmented };
+export { C as WebUiSegmented };
 
 //# sourceMappingURL=index.js.map