@zerodep-dev/vue-tsx-pro-ui 0.2.0 → 0.3.0

package/dist/navigation/NavList.js.map

@@ -1 +1 @@
-{"version":3,"file":"NavList.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_vtp_forwardChildren","_vtp_childrenProp","_vue_computed","_vtp_bindable","_vue_ref","_vtp_childrenStable","_Fragment"],"sources":["../../src/navigation/NavList.tsx"],"sourcesContent":["/**\n * 侧边导航，复合组件：NavList（nav > ul）> NavItem（链接）/ NavGroup（可展开的一组）/ NavSection（带小标题的一组，\n * 不能收起：文档站这类链接多、按主题分组的侧栏），里面再放 NavItem。\n * 当前页按路由适配的 isActive 判断（也可以用 active 指定），带 aria-current=\"page\" 与高亮；\n * 含当前页的分组自动展开。分组用 Collapsible（触发器带 aria-expanded / aria-controls）。\n *\n *   <NavList aria-label=\"后台\">\n *     <NavItem href=\"/\" icon={House}>概览</NavItem>\n *     <NavGroup label=\"订单\" icon={Package}>\n *       <NavItem href=\"/orders\">全部订单</NavItem>\n *       <NavItem href=\"/orders/refunds\">退款</NavItem>\n *     </NavGroup>\n *   </NavList>\n *\n * 用 vue-router 时 vueRouterAdapter(router, { match: 'prefix' }) 能让 /orders 在 /orders/42 页面也高亮。\n *\n * 紧凑（compact）：侧栏窄到只放得下图标时，各项只显示图标（文字留给读屏，悬停、聚焦时用 Tooltip 显示），\n * 小节标题换成它的图标（不能点）；分组也只剩图标，悬停、聚焦时子项从右边弹出来（HoverCard，完整的文字，\n * Tab 进入），组里有当前页时图标高亮。AppShell 的抽屉式侧栏拖窄时自动进入（NavCompactContext），\n * 也可以直接写 <NavList compact>。\n *\n * NavItem 的 badge 是计数角标（待办、未读）：展开时在文字后面，紧凑时是图标右上角的小圆点（读屏照样念出数目）。\n */\nimport { ChevronRight } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, useId, watch, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Badge } from '../base/Badge';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Indicator } from '../base/Indicator';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { Collapsible, type CollapsibleProps } from '../display/Collapsible';\nimport { HoverCard } from '../overlay/HoverCard';\nimport { Tooltip, type TooltipTriggerProps } from '../overlay/Tooltip';\nimport { useLang } from '../config/context';\nimport { useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { rippleHostStyles, useRipple } from '../utils/dom/ripple';\nimport { itemStyles } from '../utils/style/item-styles';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 分组向里面的项要的信息：哪些项是当前页（有当前页时自动展开） */\nexport interface NavGroupState {\n  /** 组内的一项报告自己是不是当前页（item 是这一项的标识） */\n  report(item: symbol, active: boolean): void;\n}\n\n/** NavGroup 的上下文：组内的项据此缩进；不在组内时为 null */\nexport const NavGroupContext = createContext<NavGroupState | null>('NavGroup');\n\n/** 导航是不是紧凑（只显示图标）：AppShell 按侧栏宽度提供，NavList 的 compact 可以覆盖 */\nexport const NavCompactContext = createContext<() => boolean>('NavCompact');\n\n/** NavList 的样式：nested、row、current、disabled、chevron、section、sectionLabel 等 */\nexport const navListStyles = css.create({\n  nested: { paddingInlineStart: '_lg', paddingTop: '_xs' },\n  // 链接与分组的触发器共用：列表行（itemStyles）之上，导航项更宽松、字重更重，平时是次要颜色\n  row: {\n    paddingInline: '_md',\n    borderRadius: '_md',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontWeight: '_medium',\n  },\n  // 当前页的颜色来自 itemStyles.current；悬停时也保持品牌色\n  current: { color: { default: '_accentText', ':hover': '_accentText' } },\n  disabled: { pointerEvents: 'none' },\n  chevron: { transition: `transform ${t.durations.md} ${t.easings.standard}` },\n  chevronOpen: { transform: 'rotate(90deg)' },\n  // 小节之间留出间隔，第一节贴着顶部\n  section: { marginBlockStart: { default: '_lg', ':first-child': 0 } },\n  sectionLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_md',\n    color: '_text',\n    fontSize: '_sm',\n    fontWeight: '_semibold',\n    letterSpacing: '_wide',\n  },\n  // 小节标题的图标只是标记，比链接的图标淡\n  sectionIcon: { color: '_textMuted', flexShrink: 0 },\n  // 紧凑：图标居中；小节标题只剩图标，上面一条细线与上一节隔开\n  compactRow: { justifyContent: 'center', paddingInline: 0 },\n  compactSection: {\n    justifyContent: 'center',\n    paddingInline: 0,\n    paddingBlockStart: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  compactNested: { paddingInlineStart: 0 },\n  // 紧凑分组弹出的卡片：比侧栏宽，放得下完整的文字\n  flyout: { padding: '_xs', minWidth: '12em' },\n});\n\n// ─────────────── NavList ───────────────\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavListProps extends PartProps<'nav'> {\n  /** 紧凑：只显示图标；不写时跟随所在的 AppShell 侧栏（拖窄时紧凑） */\n  compact?: boolean;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  children?: VNodeChild;\n}\n\n/** 侧边导航（nav > ul），里面放 NavItem 与 NavGroup */\nexport const NavList = _component(({ compact, propsList, children, ...rest }: NavListProps) => {\n  const inherited = NavCompactContext.inject(() => false);\n  const isCompact = () => compact ?? inherited();\n  NavCompactContext.provide(isCompact);\n  return () => (\n    <nav {...mergeAttrs<'nav'>({}, rest)} data-compact={isCompact() || undefined}>\n      <FlexList {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList)}>\n        {children}\n      </FlexList>\n    </nav>\n  );\n});\n\n// ─────────────── NavItem ───────────────\n\n/** 地址与当前页由组件管理 */\nexport type NavItemManaged = 'href' | 'aria-current';\n\n/** 未声明的属性落到链接（a）上 */\nexport interface NavItemProps extends PartProps<'a', NavItemManaged> {\n  /** 链接地址 */\n  href: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 是否是当前页；不写时按路由适配的 isActive 判断 */\n  active?: boolean;\n  /** 不可用：不能点、不能聚焦 */\n  disabled?: boolean;\n  /** 文字后面的内容（自定义的标记）；只是计数时用 badge */\n  end?: VNodeChild;\n  /** 计数角标（待办、未读）：展开时是文字后面的 Badge，紧凑时是图标右上角的小圆点；0 不显示 */\n  badge?: number;\n  /** 角标的色调，默认 danger */\n  badgeTone?: StatusTone;\n  /** 按下时的波纹；不写时沿用全局配置 */\n  ripple?: boolean;\n  /** 外层 li 的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 导航项（li > a）：当前页高亮并带 aria-current=\"page\" */\nexport const NavItem = _component(\n  ({\n    href,\n    icon,\n    active,\n    disabled = false,\n    end,\n    badge = 0,\n    badgeTone = 'danger',\n    ripple,\n    propsItem,\n    propsIcon,\n    propsLabel,\n    children,\n    ...rest\n  }: NavItemProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    const group = NavGroupContext.inject(null);\n    const rippleHandlers = useRipple(() => ripple);\n    const current = _derived(active ?? router.isActive(href));\n    const compact = NavCompactContext.inject(() => false);\n    const id = Symbol('NavItem');\n\n    // 告诉所在的分组自己是不是当前页（分组据此自动展开）\n    if (group) {\n      watch(\n        () => current,\n        (value) => group.report(id, value),\n        { immediate: true },\n      );\n      onBeforeUnmount(() => group.report(id, false));\n    }\n\n    const iconOnly = () => compact() && icon != null;\n    // tooltip：只剩图标时 Tooltip 给触发器的属性（定位用的 ref、悬停与聚焦的事件）\n    const link = (tooltip?: TooltipTriggerProps) => (\n      <a\n        {...mergeAttrs<'a'>(\n          {\n            ...tooltip,\n            sx: [\n              itemStyles.row,\n              itemStyles.hoverable,\n              navListStyles.row,\n              focusRingStyles.visible,\n              rippleHostStyles.host,\n              iconOnly() && navListStyles.compactRow,\n              current && [itemStyles.current, navListStyles.current],\n              disabled && [itemStyles.disabled, navListStyles.disabled],\n            ],\n          },\n          rest,\n          {\n            href: disabled ? undefined : router.href(href),\n            'aria-current': current ? 'page' : undefined,\n            'aria-disabled': disabled || undefined,\n            // 使用方的 onClick 先执行，preventDefault 可以拦下路由跳转\n            onClick: (event: MouseEvent) => router.onClick(event, href),\n            ...rippleHandlers,\n          },\n        )}\n        data-state={current ? 'active' : 'inactive'}\n      >\n        {icon &&\n          (iconOnly() && badge > 0 ? (\n            // 紧凑：图标右上角一个小圆点（图标太小，叠不下数字）；读屏照样念出数目\n            <Indicator dot tone={badgeTone} label={lang.indicatorCount(badge)}>\n              <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />\n            </Indicator>\n          ) : (\n            <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />\n          ))}\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [itemStyles.label, iconOnly() && visuallyHiddenStyles.hidden] },\n            propsLabel,\n          )}\n        >\n          {children}\n        </span>\n        {!iconOnly() && end}\n        {!iconOnly() && badge > 0 && (\n          <Badge size=\"xs\" variant=\"solid\" tone={badgeTone} radius=\"full\">\n            {badge > 99 ? '99+' : badge}\n          </Badge>\n        )}\n      </a>\n    );\n\n    return () => (\n      <li {...mergeAttrs<'li'>({}, propsItem)}>\n        {iconOnly() ? (\n          // 只剩图标：名称在读屏的文字里，看的人悬停、聚焦时从提示里读\n          <Tooltip placement=\"right\" delay={200} trigger={link}>\n            {children}\n          </Tooltip>\n        ) : (\n          link()\n        )}\n      </li>\n    );\n  },\n);\n\n// ─────────────── NavGroup ───────────────\n\n/** 未声明的属性落到外层 li 上 */\nexport interface NavGroupProps extends PartProps<'li'> {\n  /** 分组标题 */\n  label: VNodeChild;\n  /** 标题前的图标 */\n  icon?: IconData;\n  /** 是否展开：父级写 _open={x}；含当前页时自动展开 */\n  _open?: boolean;\n  /** 标题按钮的部件属性 */\n  propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;\n  /** 展开区（Collapsible）的部件属性 */\n  propsContent?: Partial<CollapsibleProps>;\n  /** 里面的列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 标题文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 标题图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  children?: VNodeChild;\n}\n\n/** 可展开的导航分组（li > 按钮 + 子列表） */\nexport const NavGroup = _component(\n  ({\n    label,\n    icon,\n    _open: open = _bindable(false),\n    propsTrigger,\n    propsContent,\n    propsList,\n    propsLabel,\n    propsIcon,\n    children,\n    ...rest\n  }: NavGroupProps) => {\n    const compact = NavCompactContext.inject(() => false);\n    const iconOnly = () => compact() && icon != null;\n    const activeItems = new Set<symbol>();\n    // 组里有当前页：紧凑时分组的图标也高亮\n    let hasCurrent = _state(false);\n    NavGroupContext.provide({\n      report(item, active) {\n        if (active) activeItems.add(item);\n        else activeItems.delete(item);\n        hasCurrent = activeItems.size > 0;\n        // 进入含当前页的分组时自动展开；离开时不自动收起（用户可能还想看）\n        if (activeItems.size > 0) open = true;\n      },\n    });\n\n    /** 紧凑时：只剩图标，悬停、聚焦时子项从右边弹出来（完整的文字，不再紧凑） */\n    function renderFlyout() {\n      return (\n        <li {...mergeAttrs<'li'>({}, rest)}>\n          <HoverCard\n            placement=\"right-start\"\n            delay={150}\n            // 子项一直渲染：它们要报告自己是不是当前页，分组的图标才知道要不要高亮\n            lazy={false}\n            sx={navListStyles.flyout}\n            trigger={(props) => (\n              <ButtonBase\n                {...mergePartProps<ButtonBaseProps>(\n                  {\n                    sx: [\n                      itemStyles.row,\n                      itemStyles.hoverable,\n                      navListStyles.row,\n                      navListStyles.compactRow,\n                      hasCurrent && [itemStyles.current, navListStyles.current],\n                    ],\n                  },\n                  propsTrigger,\n                  props as Partial<ButtonBaseProps>,\n                )}\n                data-state={hasCurrent ? 'active' : 'inactive'}\n              >\n                <Icon {...mergePartProps<IconProps>({ icon: icon! }, propsIcon)} />\n                <span {...mergeAttrs<'span'>({ sx: visuallyHiddenStyles.hidden }, propsLabel)}>\n                  {label}\n                </span>\n              </ButtonBase>\n            )}\n          >\n            <NavFlyoutContent label={label} propsList={propsList}>\n              {children}\n            </NavFlyoutContent>\n          </HoverCard>\n        </li>\n      );\n    }\n\n    return () =>\n      iconOnly() ? (\n        renderFlyout()\n      ) : (\n        <li {...mergeAttrs<'li'>({}, rest)}>\n          <Collapsible\n            {...mergePartProps<CollapsibleProps>(\n              {\n                trigger: (props) => (\n                  <ButtonBase\n                    {...mergePartProps<ButtonBaseProps>(\n                      {\n                        sx: [\n                          itemStyles.row,\n                          itemStyles.hoverable,\n                          navListStyles.row,\n                          iconOnly() && navListStyles.compactRow,\n                        ],\n                      },\n                      propsTrigger,\n                      props,\n                    )}\n                  >\n                    {icon && <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />}\n                    <span\n                      {...mergeAttrs<'span'>(\n                        { sx: [itemStyles.label, iconOnly() && visuallyHiddenStyles.hidden] },\n                        propsLabel,\n                      )}\n                    >\n                      {label}\n                    </span>\n                    {!iconOnly() && (\n                      <Icon\n                        icon={ChevronRight}\n                        flipInRtl\n                        sx={[navListStyles.chevron, open && navListStyles.chevronOpen]}\n                      />\n                    )}\n                  </ButtonBase>\n                ),\n              },\n              propsContent,\n            )}\n            _open={open}\n          >\n            <FlexList\n              {...mergePartProps<FlexProps<'ul'>>(\n                {\n                  direction: 'column',\n                  gap: 'xs',\n                  sx: [navListStyles.nested, compact() && navListStyles.compactNested],\n                },\n                propsList,\n              )}\n            >\n              {children}\n            </FlexList>\n          </Collapsible>\n        </li>\n      );\n  },\n);\n\n/** 紧凑分组弹出来的内容：标题加完整的导航项（里面不再紧凑） */\nconst NavFlyoutContent = _component(\n  ({\n    label,\n    propsList,\n    children,\n  }: {\n    label: VNodeChild;\n    propsList?: Partial<FlexProps<'ul'>>;\n    children?: VNodeChild;\n  }) => {\n    NavCompactContext.provide(() => false);\n    return () => (\n      <>\n        <span {...css.attrs(navListStyles.sectionLabel)}>{label}</span>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList)}\n        >\n          {children}\n        </FlexList>\n      </>\n    );\n  },\n);\n\n// ─────────────── NavSection ───────────────\n\n/** 未声明的属性落到外层 li 上 */\nexport interface NavSectionProps extends PartProps<'li'> {\n  /** 小节标题，同时是这组链接的无障碍名称 */\n  label: VNodeChild;\n  /** 标题前的图标：只是标记、不能点；紧凑时标题只剩它 */\n  icon?: IconData;\n  /** 标题的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 标题图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 里面的列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 小节里的 NavItem */\n  children?: VNodeChild;\n}\n\n/** 带小标题的一组导航链接（li > 标题 + ul）：一直展开，不能收起；要收起用 NavGroup */\nexport const NavSection = _component(\n  ({ label, icon, propsLabel, propsIcon, propsList, children, ...rest }: NavSectionProps) => {\n    const labelId = useId();\n    const compact = NavCompactContext.inject(() => false);\n    const iconOnly = () => compact() && icon != null;\n    return () => (\n      <li {...mergeAttrs<'li'>({ sx: navListStyles.section }, rest)}>\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [navListStyles.sectionLabel, iconOnly() && navListStyles.compactSection] },\n            propsLabel,\n          )}\n        >\n          {icon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon, sx: navListStyles.sectionIcon }, propsIcon)}\n            />\n          )}\n          <span id={labelId} {...css.attrs(iconOnly() && visuallyHiddenStyles.hidden)}>\n            {label}\n          </span>\n        </span>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList, {\n            'aria-labelledby': labelId,\n          })}\n        >\n          {children}\n        </FlexList>\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"NavList.js","names":["_isVNode","_vtp_readonlyProp","_vtp_restProps","_createVNode","_mergeProps","_vtp_forwardChildren","_vtp_childrenProp","_vue_computed","_vtp_bindable","_vue_ref","_vtp_childrenStable","_Fragment"],"sources":["../../src/navigation/NavList.tsx"],"sourcesContent":["/**\n * 侧边导航，复合组件：NavList（nav > ul）> NavItem（链接）/ NavGroup（可展开的一组）/ NavSection（带小标题的一组，\n * 不能收起：文档站这类链接多、按主题分组的侧栏），里面再放 NavItem。\n * 当前页按路由适配的 isActive 判断（也可以用 active 指定），带 aria-current=\"page\" 与高亮；\n * 含当前页的分组自动展开。分组用 Collapsible（触发器带 aria-expanded / aria-controls）。\n *\n *   <NavList aria-label=\"后台\">\n *     <NavItem href=\"/\" icon={House}>概览</NavItem>\n *     <NavGroup label=\"订单\" icon={Package}>\n *       <NavItem href=\"/orders\">全部订单</NavItem>\n *       <NavItem href=\"/orders/refunds\">退款</NavItem>\n *     </NavGroup>\n *   </NavList>\n *\n * 用 vue-router 时 vueRouterAdapter(router, { match: 'prefix' }) 能让 /orders 在 /orders/42 页面也高亮。\n *\n * 紧凑（compact）：侧栏窄到只放得下图标时，各项只显示图标（文字留给读屏，悬停、聚焦时用 Tooltip 显示），\n * 小节标题换成它的图标（不能点）；分组也只剩图标，悬停、聚焦时子项从右边弹出来（HoverCard，完整的文字，\n * Tab 进入），组里有当前页时图标高亮。AppShell 的抽屉式侧栏拖窄时自动进入（NavCompactContext），\n * 也可以直接写 <NavList compact>。\n *\n * NavItem 的 badge 是计数角标（待办、未读）：展开时在文字后面，紧凑时是图标右上角的小圆点（读屏照样念出数目）。\n */\nimport { ChevronRight } from '@lucide/icons';\nimport { createContext, _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { onBeforeUnmount, useId, watch, type VNodeChild } from 'vue';\nimport { ButtonBase, type ButtonBaseProps } from '../base/ButtonBase';\nimport { Badge } from '../base/Badge';\nimport { Icon, type IconData, type IconProps } from '../base/Icon';\nimport { Indicator } from '../base/Indicator';\nimport { visuallyHiddenStyles } from '../base/VisuallyHidden';\nimport { Collapsible, type CollapsibleProps } from '../display/Collapsible';\nimport { HoverCard } from '../overlay/HoverCard';\nimport { Tooltip, type TooltipTriggerProps } from '../overlay/Tooltip';\nimport { useLang } from '../config/context';\nimport { useRouterLink } from '../utils/dom/link';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { rippleHostStyles, useRipple } from '../utils/dom/ripple';\nimport { itemStyles } from '../utils/style/item-styles';\nimport { focusRingStyles } from '../utils/style/styles';\nimport type { StatusTone } from '../utils/style/tone-styles';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 分组向里面的项要的信息：哪些项是当前页（有当前页时自动展开） */\nexport interface NavGroupState {\n  /** 组内的一项报告自己是不是当前页（item 是这一项的标识） */\n  report(item: symbol, active: boolean): void;\n}\n\n/** NavGroup 的上下文：组内的项据此缩进；不在组内时为 null */\nexport const NavGroupContext = createContext<NavGroupState | null>('NavGroup');\n\n/** 导航是不是紧凑（只显示图标）：AppShell 按侧栏宽度提供，NavList 的 compact 可以覆盖 */\nexport const NavCompactContext = createContext<() => boolean>('NavCompact');\n\n/** NavList 的样式：nested、row、current、disabled、chevron、section、sectionLabel 等 */\nexport const navListStyles = css.create({\n  nested: { paddingInlineStart: '_lg', paddingTop: '_xs' },\n  // 链接与分组的触发器共用：列表行（itemStyles）之上，导航项更宽松、字重更重，平时是次要颜色\n  row: {\n    paddingInline: '_md',\n    borderRadius: '_md',\n    color: { default: '_textMuted', ':hover': '_text' },\n    fontWeight: '_medium',\n  },\n  // 当前页的颜色来自 itemStyles.current；悬停时也保持品牌色\n  current: { color: { default: '_accentText', ':hover': '_accentText' } },\n  disabled: { pointerEvents: 'none' },\n  chevron: { transition: `transform ${t.durations.md} ${t.easings.standard}` },\n  chevronOpen: { transform: 'rotate(90deg)' },\n  // 小节之间留出间隔，第一节贴着顶部\n  // 多栏排版（AppShell 的上下抽屉）时一个小节不被拆到两栏\n  section: {\n    display: 'flex',\n    flexDirection: 'column',\n    gap: '_xs',\n    marginBlockStart: { default: '_lg', ':first-child': 0 },\n    breakInside: 'avoid',\n  },\n  // 标题行的内边距、图标与间距和链接行同一套（随所在字号），图标与文字才和下面的项上下对齐；只有文字小一档、加粗\n  sectionLabel: {\n    display: 'flex',\n    alignItems: 'center',\n    gap: '_sm',\n    paddingBlock: '_xs',\n    paddingInline: '_md',\n    color: '_text',\n  },\n  sectionText: { fontSize: '_sm', fontWeight: '_semibold', letterSpacing: '_wide' },\n  // 小节标题的图标只是标记，比链接的图标淡\n  sectionIcon: { color: '_textMuted', flexShrink: 0 },\n  // 紧凑：图标居中；小节标题只剩图标，上面一条细线与上一节隔开\n  compactRow: { justifyContent: 'center', paddingInline: 0 },\n  compactSection: {\n    justifyContent: 'center',\n    paddingInline: 0,\n    paddingBlockStart: '_sm',\n    borderBlockStartWidth: '_xs',\n    borderBlockStartStyle: 'solid',\n    borderBlockStartColor: '_borderMuted',\n  },\n  compactNested: { paddingInlineStart: 0 },\n  // 紧凑分组弹出的卡片：比侧栏宽，放得下完整的文字\n  flyout: { padding: '_xs', minWidth: '12em' },\n});\n\n// ─────────────── NavList ───────────────\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavListProps extends PartProps<'nav'> {\n  /** 紧凑：只显示图标；不写时跟随所在的 AppShell 侧栏（拖窄时紧凑） */\n  compact?: boolean;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  children?: VNodeChild;\n}\n\n/** 侧边导航（nav > ul），里面放 NavItem 与 NavGroup */\nexport const NavList = _component(({ compact, propsList, children, ...rest }: NavListProps) => {\n  const inherited = NavCompactContext.inject(() => false);\n  const isCompact = () => compact ?? inherited();\n  NavCompactContext.provide(isCompact);\n  return () => (\n    <nav {...mergeAttrs<'nav'>({}, rest)} data-compact={isCompact() || undefined}>\n      <FlexList {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList)}>\n        {children}\n      </FlexList>\n    </nav>\n  );\n});\n\n// ─────────────── NavItem ───────────────\n\n/** 地址与当前页由组件管理 */\nexport type NavItemManaged = 'href' | 'aria-current';\n\n/** 未声明的属性落到链接（a）上 */\nexport interface NavItemProps extends PartProps<'a', NavItemManaged> {\n  /** 链接地址 */\n  href: string;\n  /** 文字前的图标 */\n  icon?: IconData;\n  /** 是否是当前页；不写时按路由适配的 isActive 判断 */\n  active?: boolean;\n  /** 不可用：不能点、不能聚焦 */\n  disabled?: boolean;\n  /** 文字后面的内容（自定义的标记）；只是计数时用 badge */\n  end?: VNodeChild;\n  /** 计数角标（待办、未读）：展开时是文字后面的 Badge，紧凑时是图标右上角的小圆点；0 不显示 */\n  badge?: number;\n  /** 角标的色调，默认 danger */\n  badgeTone?: StatusTone;\n  /** 按下时的波纹；不写时沿用全局配置 */\n  ripple?: boolean;\n  /** 外层 li 的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  children?: VNodeChild;\n}\n\n/** 导航项（li > a）：当前页高亮并带 aria-current=\"page\" */\nexport const NavItem = _component(\n  ({\n    href,\n    icon,\n    active,\n    disabled = false,\n    end,\n    badge = 0,\n    badgeTone = 'danger',\n    ripple,\n    propsItem,\n    propsIcon,\n    propsLabel,\n    children,\n    ...rest\n  }: NavItemProps) => {\n    const lang = useLang();\n    const router = useRouterLink();\n    const group = NavGroupContext.inject(null);\n    const rippleHandlers = useRipple(() => ripple);\n    const current = _derived(active ?? router.isActive(href));\n    const compact = NavCompactContext.inject(() => false);\n    const id = Symbol('NavItem');\n\n    // 告诉所在的分组自己是不是当前页（分组据此自动展开）\n    if (group) {\n      watch(\n        () => current,\n        (value) => group.report(id, value),\n        { immediate: true },\n      );\n      onBeforeUnmount(() => group.report(id, false));\n    }\n\n    const iconOnly = () => compact() && icon != null;\n    // tooltip：只剩图标时 Tooltip 给触发器的属性（定位用的 ref、悬停与聚焦的事件）\n    const link = (tooltip?: TooltipTriggerProps) => (\n      <a\n        {...mergeAttrs<'a'>(\n          {\n            ...tooltip,\n            sx: [\n              itemStyles.row,\n              itemStyles.hoverable,\n              navListStyles.row,\n              focusRingStyles.visible,\n              rippleHostStyles.host,\n              iconOnly() && navListStyles.compactRow,\n              current && [itemStyles.current, navListStyles.current],\n              disabled && [itemStyles.disabled, navListStyles.disabled],\n            ],\n          },\n          rest,\n          {\n            href: disabled ? undefined : router.href(href),\n            'aria-current': current ? 'page' : undefined,\n            'aria-disabled': disabled || undefined,\n            // 使用方的 onClick 先执行，preventDefault 可以拦下路由跳转\n            onClick: (event: MouseEvent) => router.onClick(event, href),\n            ...rippleHandlers,\n          },\n        )}\n        data-state={current ? 'active' : 'inactive'}\n      >\n        {icon &&\n          (iconOnly() && badge > 0 ? (\n            // 紧凑：图标右上角一个小圆点（图标太小，叠不下数字）；读屏照样念出数目\n            <Indicator dot tone={badgeTone} label={lang.indicatorCount(badge)}>\n              <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />\n            </Indicator>\n          ) : (\n            <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />\n          ))}\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [itemStyles.label, iconOnly() && visuallyHiddenStyles.hidden] },\n            propsLabel,\n          )}\n        >\n          {children}\n        </span>\n        {!iconOnly() && end}\n        {!iconOnly() && badge > 0 && (\n          <Badge size=\"xs\" variant=\"solid\" tone={badgeTone} radius=\"full\">\n            {badge > 99 ? '99+' : badge}\n          </Badge>\n        )}\n      </a>\n    );\n\n    return () => (\n      <li {...mergeAttrs<'li'>({}, propsItem)}>\n        {iconOnly() ? (\n          // 只剩图标：名称在读屏的文字里，看的人悬停、聚焦时从提示里读\n          <Tooltip placement=\"right\" delay={200} trigger={link}>\n            {children}\n          </Tooltip>\n        ) : (\n          link()\n        )}\n      </li>\n    );\n  },\n);\n\n// ─────────────── NavGroup ───────────────\n\n/** 未声明的属性落到外层 li 上 */\nexport interface NavGroupProps extends PartProps<'li'> {\n  /** 分组标题 */\n  label: VNodeChild;\n  /** 标题前的图标 */\n  icon?: IconData;\n  /** 是否展开：父级写 _open={x}；含当前页时自动展开 */\n  _open?: boolean;\n  /** 标题按钮的部件属性 */\n  propsTrigger?: Omit<Partial<ButtonBaseProps>, 'aria-expanded' | 'aria-controls'>;\n  /** 展开区（Collapsible）的部件属性 */\n  propsContent?: Partial<CollapsibleProps>;\n  /** 里面的列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 标题文字的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 标题图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  children?: VNodeChild;\n}\n\n/** 可展开的导航分组（li > 按钮 + 子列表） */\nexport const NavGroup = _component(\n  ({\n    label,\n    icon,\n    _open: open = _bindable(false),\n    propsTrigger,\n    propsContent,\n    propsList,\n    propsLabel,\n    propsIcon,\n    children,\n    ...rest\n  }: NavGroupProps) => {\n    const compact = NavCompactContext.inject(() => false);\n    const iconOnly = () => compact() && icon != null;\n    const activeItems = new Set<symbol>();\n    // 组里有当前页：紧凑时分组的图标也高亮\n    let hasCurrent = _state(false);\n    NavGroupContext.provide({\n      report(item, active) {\n        if (active) activeItems.add(item);\n        else activeItems.delete(item);\n        hasCurrent = activeItems.size > 0;\n        // 进入含当前页的分组时自动展开；离开时不自动收起（用户可能还想看）\n        if (activeItems.size > 0) open = true;\n      },\n    });\n\n    /** 紧凑时：只剩图标，悬停、聚焦时子项从右边弹出来（完整的文字，不再紧凑） */\n    function renderFlyout() {\n      return (\n        <li {...mergeAttrs<'li'>({}, rest)}>\n          <HoverCard\n            placement=\"right-start\"\n            delay={150}\n            // 子项一直渲染：它们要报告自己是不是当前页，分组的图标才知道要不要高亮\n            lazy={false}\n            sx={navListStyles.flyout}\n            trigger={(props) => (\n              <ButtonBase\n                {...mergePartProps<ButtonBaseProps>(\n                  {\n                    sx: [\n                      itemStyles.row,\n                      itemStyles.hoverable,\n                      navListStyles.row,\n                      navListStyles.compactRow,\n                      hasCurrent && [itemStyles.current, navListStyles.current],\n                    ],\n                  },\n                  propsTrigger,\n                  props as Partial<ButtonBaseProps>,\n                )}\n                data-state={hasCurrent ? 'active' : 'inactive'}\n              >\n                <Icon {...mergePartProps<IconProps>({ icon: icon! }, propsIcon)} />\n                <span {...mergeAttrs<'span'>({ sx: visuallyHiddenStyles.hidden }, propsLabel)}>\n                  {label}\n                </span>\n              </ButtonBase>\n            )}\n          >\n            <NavFlyoutContent label={label} propsList={propsList}>\n              {children}\n            </NavFlyoutContent>\n          </HoverCard>\n        </li>\n      );\n    }\n\n    return () =>\n      iconOnly() ? (\n        renderFlyout()\n      ) : (\n        <li {...mergeAttrs<'li'>({}, rest)}>\n          <Collapsible\n            {...mergePartProps<CollapsibleProps>(\n              {\n                trigger: (props) => (\n                  <ButtonBase\n                    {...mergePartProps<ButtonBaseProps>(\n                      {\n                        sx: [\n                          itemStyles.row,\n                          itemStyles.hoverable,\n                          navListStyles.row,\n                          iconOnly() && navListStyles.compactRow,\n                        ],\n                      },\n                      propsTrigger,\n                      props,\n                    )}\n                  >\n                    {icon && <Icon {...mergePartProps<IconProps>({ icon }, propsIcon)} />}\n                    <span\n                      {...mergeAttrs<'span'>(\n                        { sx: [itemStyles.label, iconOnly() && visuallyHiddenStyles.hidden] },\n                        propsLabel,\n                      )}\n                    >\n                      {label}\n                    </span>\n                    {!iconOnly() && (\n                      <Icon\n                        icon={ChevronRight}\n                        flipInRtl\n                        sx={[navListStyles.chevron, open && navListStyles.chevronOpen]}\n                      />\n                    )}\n                  </ButtonBase>\n                ),\n              },\n              propsContent,\n            )}\n            _open={open}\n          >\n            <FlexList\n              {...mergePartProps<FlexProps<'ul'>>(\n                {\n                  direction: 'column',\n                  gap: 'xs',\n                  sx: [navListStyles.nested, compact() && navListStyles.compactNested],\n                },\n                propsList,\n              )}\n            >\n              {children}\n            </FlexList>\n          </Collapsible>\n        </li>\n      );\n  },\n);\n\n/** 紧凑分组弹出来的内容：标题加完整的导航项（里面不再紧凑） */\nconst NavFlyoutContent = _component(\n  ({\n    label,\n    propsList,\n    children,\n  }: {\n    label: VNodeChild;\n    propsList?: Partial<FlexProps<'ul'>>;\n    children?: VNodeChild;\n  }) => {\n    NavCompactContext.provide(() => false);\n    return () => (\n      <>\n        <span {...css.attrs(navListStyles.sectionLabel)}>{label}</span>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList)}\n        >\n          {children}\n        </FlexList>\n      </>\n    );\n  },\n);\n\n// ─────────────── NavSection ───────────────\n\n/** 未声明的属性落到外层 li 上 */\nexport interface NavSectionProps extends PartProps<'li'> {\n  /** 小节标题，同时是这组链接的无障碍名称 */\n  label: VNodeChild;\n  /** 标题前的图标：只是标记、不能点；紧凑时标题只剩它 */\n  icon?: IconData;\n  /** 标题的部件属性 */\n  propsLabel?: PartProps<'span'>;\n  /** 标题图标的部件属性 */\n  propsIcon?: Partial<IconProps>;\n  /** 里面的列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 小节里的 NavItem */\n  children?: VNodeChild;\n}\n\n/** 带小标题的一组导航链接（li > 标题 + ul）：一直展开，不能收起；要收起用 NavGroup */\nexport const NavSection = _component(\n  ({ label, icon, propsLabel, propsIcon, propsList, children, ...rest }: NavSectionProps) => {\n    const labelId = useId();\n    const compact = NavCompactContext.inject(() => false);\n    const iconOnly = () => compact() && icon != null;\n    return () => (\n      <li {...mergeAttrs<'li'>({ sx: navListStyles.section }, rest)}>\n        <span\n          {...mergeAttrs<'span'>(\n            { sx: [navListStyles.sectionLabel, iconOnly() && navListStyles.compactSection] },\n            propsLabel,\n          )}\n        >\n          {icon && (\n            <Icon\n              {...mergePartProps<IconProps>({ icon, sx: navListStyles.sectionIcon }, propsIcon)}\n            />\n          )}\n          <span\n            id={labelId}\n            {...css.attrs(navListStyles.sectionText, iconOnly() && visuallyHiddenStyles.hidden)}\n          >\n            {label}\n          </span>\n        </span>\n        <FlexList\n          {...mergePartProps<FlexProps<'ul'>>({ direction: 'column', gap: 'xs' }, propsList, {\n            'aria-labelledby': labelId,\n          })}\n        >\n          {children}\n        </FlexList>\n      </li>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/NavMenu.d.ts

@@ -0,0 +1,27 @@
+import type { NavBarItem } from './NavBar';
+import { type NavListProps } from './NavList';
+/** 菜单树的一项：字段同 NavBarItem（同一份菜单数据可以同时给顶部的 NavBar 和侧栏的 NavMenu），多层嵌套 */
+export interface NavMenuItem extends Omit<NavBarItem, 'children'> {
+    /** 同一层里唯一的标识（列表的 key），默认取 href，没有 href 时取 label */
+    key?: string;
+    /** 是否是当前页；不写时按路由适配判断 */
+    active?: boolean;
+    /** 子项：有可显示的子项时这一项是一组 */
+    children?: readonly NavMenuItem[];
+}
+/** 顶层有子项的项怎么显示：section 带小标题、一直展开；group 可收起 */
+export interface NavMenuTopLevels {
+    /** 带小标题的小节，一直展开（默认） */
+    section: unknown;
+    /** 可收起的分组 */
+    group: unknown;
+}
+/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */
+export interface NavMenuProps extends Omit<NavListProps, 'children'> {
+    /** 菜单树 */
+    items: readonly NavMenuItem[];
+    /** 顶层有子项的项怎么显示，默认 section */
+    topLevel?: keyof NavMenuTopLevels;
+}
+/** 数据驱动的侧边导航：菜单树 → NavList、NavSection、NavGroup、NavItem */
+export declare const NavMenu: import("@zerodep-dev/vue-tsx-pro-tsx").TsxComponent<NavMenuProps>;

package/dist/navigation/NavMenu.js

@@ -0,0 +1,54 @@
+import { NavGroup, NavItem, NavList, NavSection } from "./NavList.js";
+import { createVNode, isVNode } from "vue";
+import { _component, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+//#region src/navigation/NavMenu.tsx
+/** 菜单树的一项：字段同 NavBarItem（同一份菜单数据可以同时给顶部的 NavBar 和侧栏的 NavMenu），多层嵌套 */
+/** 顶层有子项的项怎么显示：section 带小标题、一直展开；group 可收起 */
+/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */
+function _isSlot(s) {
+	return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
+}
+/** 这一项（或它的子孙）有没有能显示的页面：没有的目录不画 */
+var visible = (item) => item.children?.length ? item.children.some(visible) : item.href !== void 0;
+var keyOf = (item) => item.key ?? item.href ?? item.label;
+function renderLink(item) {
+	return createVNode(NavItem, {
+		"key": keyOf(item),
+		"href": item.href,
+		"icon": item.icon,
+		"badge": item.badge,
+		"disabled": item.disabled,
+		"active": item.active
+	}, { default: () => [item.label] });
+}
+function renderNode(item, depth, topLevel) {
+	if (!visible(item)) return null;
+	if (!item.children?.length) return renderLink(item);
+	const children = item.children.map((child) => renderNode(child, depth + 1, topLevel));
+	return depth === 0 && topLevel === "section" ? createVNode(NavSection, {
+		"key": keyOf(item),
+		"label": item.label,
+		"icon": item.icon
+	}, _isSlot(children) ? children : { default: () => [children] }) : createVNode(NavGroup, {
+		"key": keyOf(item),
+		"label": item.label,
+		"icon": item.icon
+	}, _isSlot(children) ? children : { default: () => [children] });
+}
+/** 数据驱动的侧边导航：菜单树 → NavList、NavSection、NavGroup、NavItem */
+var NavMenu = /*#__PURE__*/ _component((_props, _ctx) => {
+	const items = readonlyProp(_props, "items");
+	const topLevel = readonlyProp(_props, "topLevel", "section");
+	const rest = restProps(_props, _ctx, true);
+	return () => createVNode(NavList, mergeJsxProps(rest, { "key": "__site0" }), {
+		default: () => [items.value.map((item) => renderNode(item, 0, topLevel.value))],
+		$stable: true
+	});
+}, {
+	name: "NavMenu",
+	props: ["items", "topLevel"]
+});
+//#endregion
+export { NavMenu };
+
+//# sourceMappingURL=NavMenu.js.map

package/dist/navigation/NavMenu.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavMenu.js","names":["_isVNode","_createVNode","_vtp_readonlyProp","_vtp_restProps","_mergeProps"],"sources":["../../src/navigation/NavMenu.tsx"],"sourcesContent":["/**\n * 数据驱动的侧边导航：菜单是一棵树（后端按角色返回、或配置文件里写的），直接交给 NavMenu 渲染，不用自己递归拼 NavItem。\n *\n *   <NavMenu\n *     aria-label=\"主菜单\"\n *     items={[\n *       { label: '首页', href: '/', icon: House },\n *       { label: '降本管理', icon: Boxes, children: [\n *         { label: '降本项目', href: '/projects', badge: 3 },\n *         { label: '台账', href: '/ledger' },\n *       ] },\n *     ]}\n *   />\n *\n * 有 children 的项是一组：顶层的显示成带小标题、一直展开的小节（topLevel=\"section\"，默认）或可收起的分组（topLevel=\"group\"），\n * 更深的层级都是可收起的分组（含当前页的组自动展开）；没有 children 的项是链接。没有 href 又没有可显示子项的项不显示\n * （后端返回的目录下没有该用户能看的页面时，目录自然消失）。当前页按路由适配判断（NavItem 的 active），也可以逐项写 active。\n * 紧凑与抽屉里的表现同 NavList，由所在的 AppShell 决定。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport type { VNodeChild } from 'vue';\nimport type { NavBarItem } from './NavBar';\nimport { NavGroup, NavItem, NavList, NavSection, type NavListProps } from './NavList';\n\n/** 菜单树的一项：字段同 NavBarItem（同一份菜单数据可以同时给顶部的 NavBar 和侧栏的 NavMenu），多层嵌套 */\nexport interface NavMenuItem extends Omit<NavBarItem, 'children'> {\n  /** 同一层里唯一的标识（列表的 key），默认取 href，没有 href 时取 label */\n  key?: string;\n  /** 是否是当前页；不写时按路由适配判断 */\n  active?: boolean;\n  /** 子项：有可显示的子项时这一项是一组 */\n  children?: readonly NavMenuItem[];\n}\n\n/** 顶层有子项的项怎么显示：section 带小标题、一直展开；group 可收起 */\nexport interface NavMenuTopLevels {\n  /** 带小标题的小节，一直展开（默认） */\n  section: unknown;\n  /** 可收起的分组 */\n  group: unknown;\n}\n\n/** 未声明的属性落到 nav 上；aria-label 是导航的名称 */\nexport interface NavMenuProps extends Omit<NavListProps, 'children'> {\n  /** 菜单树 */\n  items: readonly NavMenuItem[];\n  /** 顶层有子项的项怎么显示，默认 section */\n  topLevel?: keyof NavMenuTopLevels;\n}\n\n/** 这一项（或它的子孙）有没有能显示的页面：没有的目录不画 */\nconst visible = (item: NavMenuItem): boolean =>\n  item.children?.length ? item.children.some(visible) : item.href !== undefined;\n\nconst keyOf = (item: NavMenuItem) => item.key ?? item.href ?? item.label;\n\nfunction renderLink(item: NavMenuItem): VNodeChild {\n  return (\n    <NavItem\n      key={keyOf(item)}\n      href={item.href!}\n      icon={item.icon}\n      badge={item.badge}\n      disabled={item.disabled}\n      active={item.active}\n    >\n      {item.label}\n    </NavItem>\n  );\n}\n\nfunction renderNode(\n  item: NavMenuItem,\n  depth: number,\n  topLevel: keyof NavMenuTopLevels,\n): VNodeChild {\n  if (!visible(item)) return null;\n  if (!item.children?.length) return renderLink(item);\n  const children = item.children.map((child) => renderNode(child, depth + 1, topLevel));\n  return depth === 0 && topLevel === 'section' ? (\n    <NavSection key={keyOf(item)} label={item.label} icon={item.icon}>\n      {children}\n    </NavSection>\n  ) : (\n    <NavGroup key={keyOf(item)} label={item.label} icon={item.icon}>\n      {children}\n    </NavGroup>\n  );\n}\n\n/** 数据驱动的侧边导航：菜单树 → NavList、NavSection、NavGroup、NavItem */\nexport const NavMenu = _component(\n  ({ items, topLevel = 'section', ...rest }: NavMenuProps) =>\n    () => <NavList {...rest}>{items.map((item) => renderNode(item, 0, topLevel))}</NavList>,\n);\n"],"mappings":";;;;;;;AA0CA,SAAA,QAAA,GAAA;CAAA,OAAA,OAAA,MAAA,cAAA,OAAA,UAAA,SAAA,KAAA,CAAA,MAAA,qBAAA,CAAAA,QAAA,CAAA;AAAA;;AASA,IAAM,WAAW,SACf,KAAK,UAAU,SAAS,KAAK,SAAS,KAAK,OAAO,IAAI,KAAK,SAAS,KAAA;AAEtE,IAAM,SAAS,SAAsB,KAAK,OAAO,KAAK,QAAQ,KAAK;AAEnE,SAAS,WAAW,MAA+B;CACjD,OAAAC,YAAA,SAAA;EAAA,OAES,MAAM,IAAI;EAAC,QACV,KAAK;EAAI,QACT,KAAK;EAAI,SACR,KAAK;EAAK,YACP,KAAK;EAAQ,UACf,KAAK;CAAM,GAAA,EAAA,eAAA,CAElB,KAAK,KAAK,EAAA,CAAA;AAGjB;AAEA,SAAS,WACP,MACA,OACA,UACY;CACZ,IAAI,CAAC,QAAQ,IAAI,GAAG,OAAO;CAC3B,IAAI,CAAC,KAAK,UAAU,QAAQ,OAAO,WAAW,IAAI;CAClD,MAAM,WAAW,KAAK,SAAS,KAAK,UAAU,WAAW,OAAO,QAAQ,GAAG,QAAQ,CAAC;CACpF,OAAO,UAAU,KAAK,aAAa,YAASA,YAAA,YAAA;EAAA,OACzB,MAAM,IAAI;EAAC,SAAS,KAAK;EAAK,QAAQ,KAAK;CAAI,GAAA,QAC7D,QAAQ,IAAR,WAAQ,EAAA,eAAA,CAAR,QAAQ,EAAA,CAAA,IAAAA,YAAA,UAAA;EAAA,OAGI,MAAM,IAAI;EAAC,SAAS,KAAK;EAAK,QAAQ,KAAK;CAAI,GAAA,QAC3D,QAAQ,IAAR,WAAQ,EAAA,eAAA,CAAR,QAAQ,EAAA,CAAA;AAGf;;AAGA,IAAa,UAAU,0BACrB,QAAA,SAAA;CAAA,MAAA,QAAAC,aAAA,QAAA,OAAA;CAAA,MAAA,WAAAA,aAAA,QAAA,YAAqB,SAAS;CAAA,MAAK,OAAIC,UAAA,QAAA,MAAA,IAAA;CAAA,aACrCF,YAAA,SAAAG,cAAmB,MAAI,EAAA,OAAA,UAAA,CAAA,GAAA;EAAA,eAAA,CAAG,MAAA,MAAM,KAAK,SAAS,WAAW,MAAM,GAAC,SAAA,KAAU,CAAC,CAAC;EAAA,SAAA;CAAA,CAAA;AAAW,GAAA;CAAA,MAAA;CAAA,OAAA,CAAA,SAAA,UAAA;AAAA,CAC3F"}

package/dist/navigation/PageJump.js

@@ -3,8 +3,8 @@ import { useLang } from "../config/context.js";
 import { mergeAttrs, mergePartProps } from "../utils/props.js";
 import { fontSizeStyles } from "../utils/style/typography.js";
 import { NumberField } from "../input/NumberField.js";
-import { createVNode, mergeProps, ref, watch } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, ref, watch } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/PageJump.tsx
 /** 未声明的属性落到外层 div 上 */
@@ -44,7 +44,7 @@ var PageJump = /*#__PURE__*/ _component((_props, _ctx) => {
 			sx: pageJumpStyles.text,
 			"aria-hidden": true
 		}, propsBefore.value), [lang.pageJumpBefore]),
-		createVNode(NumberField, mergeProps(mergePartProps({
+		createVNode(NumberField, mergeJsxProps(mergePartProps({
 			"aria-label": lang.pageJumpLabel,
 			min: 1,
 			max: Math.max(1, pageCount.value),

package/dist/navigation/PageJump.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageJump.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/navigation/PageJump.tsx"],"sourcesContent":["/**\n * 跳页：分页的配套组件，“跳至 [  ] 页”，回车或失焦后跳过去（夹在 1–pageCount），输入框随后清空。\n *\n *   <PageJump _page={page} pageCount={32} />\n *\n * 基于 NumberField：未声明的属性落到外层 div 上；输入框用 propsInput。读屏念输入框的名称（语言包的“跳到第几页”），\n * 前后的“跳至”“页”只是视觉上的提示。部件：Root（div）、Before、Input（NumberField）、After。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch } from 'vue';\nimport { useLang } from '../config/context';\nimport { NumberField, type NumberFieldProps } from '../input/NumberField';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface PageJumpProps extends PartProps<'div'> {\n  /** 当前页：父级写 _page={page}，跳页时写回 */\n  _page?: number;\n  /** 总页数：输入的页码夹在 1–pageCount */\n  pageCount: number;\n  /** 字号档位，默认 sm（同 Pagination） */\n  size?: TextSize;\n  /** 输入框前文字的部件属性 */\n  propsBefore?: PartProps<'span'>;\n  /** 输入框（NumberField）的部件属性 */\n  propsInput?: Partial<NumberFieldProps>;\n  /** 输入框后文字的部件属性 */\n  propsAfter?: PartProps<'span'>;\n}\n\n/** PageJump 的样式：root、input、text */\nexport const pageJumpStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  input: { width: '4.5em' },\n  text: { color: '_textMuted', whiteSpace: 'nowrap' },\n});\n\n/** 跳页：输入页码后跳过去 */\nexport const PageJump = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    size = 'sm',\n    propsBefore,\n    propsInput,\n    propsAfter,\n    ...rest\n  }: PageJumpProps) => {\n    const lang = useLang();\n    // 输入框只在跳之前暂存页码，跳完清空\n    let draft = _state<number | null>(null);\n    watch(\n      () => draft,\n      (target) => {\n        if (target == null) return;\n        const next = clamp(Math.round(target), 1, Math.max(1, pageCount));\n        if (next !== page) page = next;\n        draft = null;\n      },\n    );\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [pageJumpStyles.root, fontSizeStyles[size]] }, rest)}>\n        {lang.pageJumpBefore && (\n          <span\n            {...mergeAttrs<'span'>({ sx: pageJumpStyles.text, 'aria-hidden': true }, propsBefore)}\n          >\n            {lang.pageJumpBefore}\n          </span>\n        )}\n        <NumberField\n          {...mergePartProps<NumberFieldProps>(\n            {\n              'aria-label': lang.pageJumpLabel,\n              min: 1,\n              max: Math.max(1, pageCount),\n              stepper: false,\n              propsRoot: { sx: pageJumpStyles.input },\n            },\n            propsInput,\n          )}\n          _value={draft}\n        />\n        {lang.pageJumpAfter && (\n          <span\n            {...mergeAttrs<'span'>({ sx: pageJumpStyles.text, 'aria-hidden': true }, propsAfter)}\n          >\n            {lang.pageJumpAfter}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAkCA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EAAE,SAAS;EAAe,YAAY;EAAU,KAAK;CAAM;CACjE,OAAO,EAAE,OAAO,QAAQ;CACxB,MAAM;EAAE,OAAO;EAAc,YAAY;CAAS;AACpD,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAQqB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,SAAA,QAAA,eAPK,GAAC,KAAA,IAAA;CAAA,MAAA,YAAAC,aAAA,QAAA,WAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAElB,IAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAIR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,IAAI,QAAKC,IAAyB,IAAI;CACtC,YACE,MAAA,QACC,WAAW;EACV,IAAI,UAAU,MAAM;EACpB,MAAM,OAAO,MAAM,KAAK,MAAM,MAAM,GAAG,GAAG,KAAK,IAAI,GAAC,UAAA,KAAW,CAAC;EAChE,IAAI,SAAI,KAAA,OAAW,KAAA,QAAO;EAC1B,MAAA,QAAQ;CACV,CACF;CAEA,aAAOC,YAAA,OACI,WAAkB,EAAE,IAAI,CAAC,eAAe,MAAM,eAAc,KAAA,MAAM,EAAE,GAAG,IAAI,GAAC;EAClF,KAAK,kBAAcA,YAAA,QAEZ,WAAmB;GAAE,IAAI,eAAe;GAAM,eAAe;EAAK,GAAC,YAAA,KAAa,GAAC,CAEpF,KAAK,cAAc,CAAA;EAEvBA,YAAA,aAAAC,WAEK,eACF;GACE,cAAc,KAAK;GACnB,KAAK;GACL,KAAK,KAAK,IAAI,GAAC,UAAA,KAAW;GAC1B,SAAS;GACT,WAAW,EAAE,IAAI,eAAe,MAAM;EACxC,GAAC,WAAA,KAEH,GAAC;GAAA,UAAA,MAAA;GAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,QAAA;EAAA,CAAA,GAAA,IAAA;EAGF,KAAK,iBAAaD,YAAA,QAEX,WAAmB;GAAE,IAAI,eAAe;GAAM,eAAe;EAAK,GAAC,WAAA,KAAY,GAAC,CAEnF,KAAK,aAAa,CAAA;CAEtB,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"PageJump.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_createVNode","_mergeProps"],"sources":["../../src/navigation/PageJump.tsx"],"sourcesContent":["/**\n * 跳页：分页的配套组件，“跳至 [  ] 页”，回车或失焦后跳过去（夹在 1–pageCount），输入框随后清空。\n *\n *   <PageJump _page={page} pageCount={32} />\n *\n * 基于 NumberField：未声明的属性落到外层 div 上；输入框用 propsInput。读屏念输入框的名称（语言包的“跳到第几页”），\n * 前后的“跳至”“页”只是视觉上的提示。部件：Root（div）、Before、Input（NumberField）、After。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch } from 'vue';\nimport { useLang } from '../config/context';\nimport { NumberField, type NumberFieldProps } from '../input/NumberField';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\n\n/** 未声明的属性落到外层 div 上 */\nexport interface PageJumpProps extends PartProps<'div'> {\n  /** 当前页：父级写 _page={page}，跳页时写回 */\n  _page?: number;\n  /** 总页数：输入的页码夹在 1–pageCount */\n  pageCount: number;\n  /** 字号档位，默认 sm（同 Pagination） */\n  size?: TextSize;\n  /** 输入框前文字的部件属性 */\n  propsBefore?: PartProps<'span'>;\n  /** 输入框（NumberField）的部件属性 */\n  propsInput?: Partial<NumberFieldProps>;\n  /** 输入框后文字的部件属性 */\n  propsAfter?: PartProps<'span'>;\n}\n\n/** PageJump 的样式：root、input、text */\nexport const pageJumpStyles = css.create({\n  root: { display: 'inline-flex', alignItems: 'center', gap: '_sm' },\n  input: { width: '4.5em' },\n  text: { color: '_textMuted', whiteSpace: 'nowrap' },\n});\n\n/** 跳页：输入页码后跳过去 */\nexport const PageJump = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    size = 'sm',\n    propsBefore,\n    propsInput,\n    propsAfter,\n    ...rest\n  }: PageJumpProps) => {\n    const lang = useLang();\n    // 输入框只在跳之前暂存页码，跳完清空\n    let draft = _state<number | null>(null);\n    watch(\n      () => draft,\n      (target) => {\n        if (target == null) return;\n        const next = clamp(Math.round(target), 1, Math.max(1, pageCount));\n        if (next !== page) page = next;\n        draft = null;\n      },\n    );\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [pageJumpStyles.root, fontSizeStyles[size]] }, rest)}>\n        {lang.pageJumpBefore && (\n          <span\n            {...mergeAttrs<'span'>({ sx: pageJumpStyles.text, 'aria-hidden': true }, propsBefore)}\n          >\n            {lang.pageJumpBefore}\n          </span>\n        )}\n        <NumberField\n          {...mergePartProps<NumberFieldProps>(\n            {\n              'aria-label': lang.pageJumpLabel,\n              min: 1,\n              max: Math.max(1, pageCount),\n              stepper: false,\n              propsRoot: { sx: pageJumpStyles.input },\n            },\n            propsInput,\n          )}\n          _value={draft}\n        />\n        {lang.pageJumpAfter && (\n          <span\n            {...mergeAttrs<'span'>({ sx: pageJumpStyles.text, 'aria-hidden': true }, propsAfter)}\n          >\n            {lang.pageJumpAfter}\n          </span>\n        )}\n      </div>\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;;AAkCA,IAAa,iBAAiB,IAAI,OAAO;CACvC,MAAM;EAAE,SAAS;EAAe,YAAY;EAAU,KAAK;CAAM;CACjE,OAAO,EAAE,OAAO,QAAQ;CACxB,MAAM;EAAE,OAAO;EAAc,YAAY;CAAS;AACpD,CAAC;;AAGD,IAAa,WAAW,0BACtB,QAAA,SAQqB;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,OAAAA,SAAA,QAAA,eAPK,GAAC,KAAA,IAAA;CAAA,MAAA,YAAAC,aAAA,QAAA,WAAA;CAAA,MAAA,OAAAA,aAAA,QAAA,QAElB,IAAI;CAAA,MAAA,cAAAA,aAAA,QAAA,aAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAAA,aAAAA,aAAA,QAAA,YAAA;CAAA,MAIR,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,IAAI,QAAKC,IAAyB,IAAI;CACtC,YACE,MAAA,QACC,WAAW;EACV,IAAI,UAAU,MAAM;EACpB,MAAM,OAAO,MAAM,KAAK,MAAM,MAAM,GAAG,GAAG,KAAK,IAAI,GAAC,UAAA,KAAW,CAAC;EAChE,IAAI,SAAI,KAAA,OAAW,KAAA,QAAO;EAC1B,MAAA,QAAQ;CACV,CACF;CAEA,aAAOC,YAAA,OACI,WAAkB,EAAE,IAAI,CAAC,eAAe,MAAM,eAAc,KAAA,MAAM,EAAE,GAAG,IAAI,GAAC;EAClF,KAAK,kBAAcA,YAAA,QAEZ,WAAmB;GAAE,IAAI,eAAe;GAAM,eAAe;EAAK,GAAC,YAAA,KAAa,GAAC,CAEpF,KAAK,cAAc,CAAA;EAEvBA,YAAA,aAAAC,cAEK,eACF;GACE,cAAc,KAAK;GACnB,KAAK;GACL,KAAK,KAAK,IAAI,GAAC,UAAA,KAAW;GAC1B,SAAS;GACT,WAAW,EAAE,IAAI,eAAe,MAAM;EACxC,GAAC,WAAA,KAEH,GAAC;GAAA,UAAA,MAAA;GAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,MAAA,QAAA;EAAA,CAAA,GAAA,IAAA;EAGF,KAAK,iBAAaD,YAAA,QAEX,WAAmB;GAAE,IAAI,eAAe;GAAM,eAAe;EAAK,GAAC,WAAA,KAAY,GAAC,CAEnF,KAAK,aAAa,CAAA;CAEtB,CAAA;AAGP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/PageSizeSelect.js

@@ -1,8 +1,8 @@
 import { useLang } from "../config/context.js";
 import { mergePartProps } from "../utils/props.js";
 import { Select } from "../input/Select.js";
-import { createVNode, mergeProps, ref, watch } from "vue";
-import { _component, bindable, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, ref, watch } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps, untrack } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/PageSizeSelect.tsx
 /** 单选的 Select 属性 */
@@ -34,7 +34,7 @@ var PageSizeSelect = /*#__PURE__*/ _component((_props, _ctx) => {
 		value.value = size;
 		onSizeChange.value?.(size);
 	});
-	return () => createVNode(Select, mergeProps(mergePartProps({
+	return () => createVNode(Select, mergeJsxProps(mergePartProps({
 		items: options.value.map((size) => ({
 			value: String(size),
 			label: lang.pageSizeOption(size)
@@ -42,7 +42,7 @@ var PageSizeSelect = /*#__PURE__*/ _component((_props, _ctx) => {
 		selectionMode: "single",
 		"aria-label": lang.pageSizeLabel,
 		size: "sm",
-		renderValue: () => createVNode("span", css.attrs(pageSizeSelectStyles.stack), [options.value.map((size) => createVNode("span", mergeProps({
+		renderValue: () => createVNode("span", css.attrs(pageSizeSelectStyles.stack), [options.value.map((size) => createVNode("span", mergeJsxProps({
 			"key": size,
 			"aria-hidden": size !== value.value || void 0
 		}, css.attrs(pageSizeSelectStyles.option, size !== value.value && pageSizeSelectStyles.hidden)), [lang.pageSizeOption(size)]))])

package/dist/navigation/PageSizeSelect.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageSizeSelect.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/navigation/PageSizeSelect.tsx"],"sourcesContent":["/**\n * 每页条数选择：分页的配套组件，与 Pagination 并排放（各自独立，按需组合；三样都要时用 PaginationBar）。选项文字取语言包（“20 条/页”）。\n *\n *   <Flex gap=\"md\" align=\"center\">\n *     <Pagination _page={page} total={total} pageSize={size} />\n *     <PageSizeSelect _value={size} onSizeChange={() => (page = 1)} />\n *   </Flex>\n *\n * 基于 Select：未声明的属性落到 Select 上（外壳用 propsRoot 等 Select 的部件），名称默认取语言包（每页条数）。\n * 按钮按最长的选项定宽：换条数时不变宽窄，下拉（与按钮同宽）里的选项也不被截断。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch } from 'vue';\nimport { useLang } from '../config/context';\nimport { Select, type SelectProps } from '../input/Select';\nimport { mergePartProps } from '../utils/props';\nimport type { SingleSelectionProps } from '../utils/data/selection';\n\n/** 单选的 Select 属性 */\ntype SingleSelectProps = Extract<SelectProps, SingleSelectionProps>;\n\n/** 未声明的属性落到 Select 上 */\nexport interface PageSizeSelectProps extends Omit<\n  Partial<SelectProps>,\n  '_value' | 'items' | 'selectionMode'\n> {\n  /** 每页条数：父级写 _value={size} */\n  _value?: number;\n  /** 可选的条数，默认 [10, 20, 50, 100] */\n  options?: readonly number[];\n  /** 用户换了条数后调用（通常把页码回到第 1 页） */\n  onSizeChange?: (size: number) => void;\n}\n\n/** PageSizeSelect 的样式：stack、option、hidden */\nexport const pageSizeSelectStyles = css.create({\n  // 所有选项的文字叠在同一格，按最宽的那个撑开，只显示选中的\n  stack: { display: 'inline-grid' },\n  option: { gridArea: '1 / 1' },\n  hidden: { visibility: 'hidden' },\n});\n\n/** 每页条数选择（Select） */\nexport const PageSizeSelect = _component(\n  ({\n    _value: value = _bindable(10),\n    options = [10, 20, 50, 100],\n    onSizeChange,\n    ...rest\n  }: PageSizeSelectProps) => {\n    const lang = useLang();\n    // Select 的值是字符串：本地一份，与数字的 value 互相同步\n    let selected = _state(String(_untrack(value)));\n    watch(\n      () => value,\n      (size) => (selected = String(size)),\n    );\n    watch(\n      () => selected,\n      (next) => {\n        const size = Number(next);\n        if (size === value) return;\n        value = size;\n        onSizeChange?.(size);\n      },\n    );\n\n    return () => (\n      <Select\n        {...mergePartProps<SingleSelectProps>(\n          {\n            items: options.map((size) => ({\n              value: String(size),\n              label: lang.pageSizeOption(size),\n            })),\n            selectionMode: 'single',\n            'aria-label': lang.pageSizeLabel,\n            size: 'sm',\n            renderValue: () => (\n              <span {...css.attrs(pageSizeSelectStyles.stack)}>\n                {options.map((size) => (\n                  <span\n                    key={size}\n                    aria-hidden={size !== value || undefined}\n                    {...css.attrs(\n                      pageSizeSelectStyles.option,\n                      size !== value && pageSizeSelectStyles.hidden,\n                    )}\n                  >\n                    {lang.pageSizeOption(size)}\n                  </span>\n                ))}\n              </span>\n            ),\n          },\n          rest,\n        )}\n        _value={selected}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAoCA,IAAa,uBAAuB,IAAI,OAAO;CAE7C,OAAO,EAAE,SAAS,cAAc;CAChC,QAAQ,EAAE,UAAU,QAAQ;CAC5B,QAAQ,EAAE,YAAY,SAAS;AACjC,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAK2B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAJC,IAAE,KAAA,IAAA;CAAA,MAAA,UAAAC,aAAA,QAAA,iBAClB;EAAC;EAAI;EAAI;EAAI;CAAG,CAAC;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAExB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,IAAI,WAAQC,IAAU,OAAMC,cAAA,MAAA,KAAA,CAAgB,CAAC;CAC7C,YACE,MAAA,QACC,SAAU,SAAA,QAAW,OAAO,IAAI,CACnC;CACA,YACE,SAAA,QACC,SAAS;EACR,MAAM,OAAO,OAAO,IAAI;EACxB,IAAI,SAAI,MAAA,OAAY;EACpB,MAAA,QAAQ;EACR,aAAA,QAAe,IAAI;CACrB,CACF;CAEA,aAAOC,YAAA,QAAAC,WAEC,eACF;EACE,OAAO,QAAA,MAAQ,KAAK,UAAU;GAC5B,OAAO,OAAO,IAAI;GAClB,OAAO,KAAK,eAAe,IAAI;EACjC,EAAE;EACF,eAAe;EACf,cAAc,KAAK;EACnB,MAAM;EACN,mBAAaD,YAAA,QACD,IAAI,MAAM,qBAAqB,KAAK,GAAC,CAC5C,QAAA,MAAQ,KAAK,SAAIA,YAAA,QAAAC,WAAA;GAAA,OAET;GAAI,eACI,SAAI,MAAA,SAAc,KAAA;EAAS,GACpC,IAAI,MACN,qBAAqB,QACrB,SAAI,MAAA,SAAc,qBAAqB,MACzC,CAAC,GAAA,CAEA,KAAK,eAAe,IAAI,CAAC,CAAA,CAE7B,CAAC,CAAA;CAGR,GACA,IACF,GAAC;EAAA,UAAA,SAAA;EAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,SAAA,QAAA;CAAA,CAAA,GAAA,IAAA;AAIP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}
+{"version":3,"file":"PageSizeSelect.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_ref","_vtp_untrack","_createVNode","_mergeProps"],"sources":["../../src/navigation/PageSizeSelect.tsx"],"sourcesContent":["/**\n * 每页条数选择：分页的配套组件，与 Pagination 并排放（各自独立，按需组合；三样都要时用 PaginationBar）。选项文字取语言包（“20 条/页”）。\n *\n *   <Flex gap=\"md\" align=\"center\">\n *     <Pagination _page={page} total={total} pageSize={size} />\n *     <PageSizeSelect _value={size} onSizeChange={() => (page = 1)} />\n *   </Flex>\n *\n * 基于 Select：未声明的属性落到 Select 上（外壳用 propsRoot 等 Select 的部件），名称默认取语言包（每页条数）。\n * 按钮按最长的选项定宽：换条数时不变宽窄，下拉（与按钮同宽）里的选项也不被截断。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { watch } from 'vue';\nimport { useLang } from '../config/context';\nimport { Select, type SelectProps } from '../input/Select';\nimport { mergePartProps } from '../utils/props';\nimport type { SingleSelectionProps } from '../utils/data/selection';\n\n/** 单选的 Select 属性 */\ntype SingleSelectProps = Extract<SelectProps, SingleSelectionProps>;\n\n/** 未声明的属性落到 Select 上 */\nexport interface PageSizeSelectProps extends Omit<\n  Partial<SelectProps>,\n  '_value' | 'items' | 'selectionMode'\n> {\n  /** 每页条数：父级写 _value={size} */\n  _value?: number;\n  /** 可选的条数，默认 [10, 20, 50, 100] */\n  options?: readonly number[];\n  /** 用户换了条数后调用（通常把页码回到第 1 页） */\n  onSizeChange?: (size: number) => void;\n}\n\n/** PageSizeSelect 的样式：stack、option、hidden */\nexport const pageSizeSelectStyles = css.create({\n  // 所有选项的文字叠在同一格，按最宽的那个撑开，只显示选中的\n  stack: { display: 'inline-grid' },\n  option: { gridArea: '1 / 1' },\n  hidden: { visibility: 'hidden' },\n});\n\n/** 每页条数选择（Select） */\nexport const PageSizeSelect = _component(\n  ({\n    _value: value = _bindable(10),\n    options = [10, 20, 50, 100],\n    onSizeChange,\n    ...rest\n  }: PageSizeSelectProps) => {\n    const lang = useLang();\n    // Select 的值是字符串：本地一份，与数字的 value 互相同步\n    let selected = _state(String(_untrack(value)));\n    watch(\n      () => value,\n      (size) => (selected = String(size)),\n    );\n    watch(\n      () => selected,\n      (next) => {\n        const size = Number(next);\n        if (size === value) return;\n        value = size;\n        onSizeChange?.(size);\n      },\n    );\n\n    return () => (\n      <Select\n        {...mergePartProps<SingleSelectProps>(\n          {\n            items: options.map((size) => ({\n              value: String(size),\n              label: lang.pageSizeOption(size),\n            })),\n            selectionMode: 'single',\n            'aria-label': lang.pageSizeLabel,\n            size: 'sm',\n            renderValue: () => (\n              <span {...css.attrs(pageSizeSelectStyles.stack)}>\n                {options.map((size) => (\n                  <span\n                    key={size}\n                    aria-hidden={size !== value || undefined}\n                    {...css.attrs(\n                      pageSizeSelectStyles.option,\n                      size !== value && pageSizeSelectStyles.hidden,\n                    )}\n                  >\n                    {lang.pageSizeOption(size)}\n                  </span>\n                ))}\n              </span>\n            ),\n          },\n          rest,\n        )}\n        _value={selected}\n      />\n    );\n  },\n);\n"],"mappings":";;;;;;;;;;AAoCA,IAAa,uBAAuB,IAAI,OAAO;CAE7C,OAAO,EAAE,SAAS,cAAc;CAChC,QAAQ,EAAE,UAAU,QAAQ;CAC5B,QAAQ,EAAE,YAAY,SAAS;AACjC,CAAC;;AAGD,IAAa,iBAAiB,0BAC5B,QAAA,SAK2B;CAAA,MAAA,SAAA,CAAA;CAAA,MAAA,QAAAA,SAAA,QAAA,gBAJC,IAAE,KAAA,IAAA;CAAA,MAAA,UAAAC,aAAA,QAAA,iBAClB;EAAC;EAAI;EAAI;EAAI;CAAG,CAAC;CAAA,MAAA,eAAAA,aAAA,QAAA,cAAA;CAAA,MAExB,OAAIC,UAAA,QAAA,MAAA,IAAA;CAEP,MAAM,OAAO,QAAQ;CAErB,IAAI,WAAQC,IAAU,OAAMC,cAAA,MAAA,KAAA,CAAgB,CAAC;CAC7C,YACE,MAAA,QACC,SAAU,SAAA,QAAW,OAAO,IAAI,CACnC;CACA,YACE,SAAA,QACC,SAAS;EACR,MAAM,OAAO,OAAO,IAAI;EACxB,IAAI,SAAI,MAAA,OAAY;EACpB,MAAA,QAAQ;EACR,aAAA,QAAe,IAAI;CACrB,CACF;CAEA,aAAOC,YAAA,QAAAC,cAEC,eACF;EACE,OAAO,QAAA,MAAQ,KAAK,UAAU;GAC5B,OAAO,OAAO,IAAI;GAClB,OAAO,KAAK,eAAe,IAAI;EACjC,EAAE;EACF,eAAe;EACf,cAAc,KAAK;EACnB,MAAM;EACN,mBAAaD,YAAA,QACD,IAAI,MAAM,qBAAqB,KAAK,GAAC,CAC5C,QAAA,MAAQ,KAAK,SAAIA,YAAA,QAAAC,cAAA;GAAA,OAET;GAAI,eACI,SAAI,MAAA,SAAc,KAAA;EAAS,GACpC,IAAI,MACN,qBAAqB,QACrB,SAAI,MAAA,SAAc,qBAAqB,MACzC,CAAC,GAAA,CAEA,KAAK,eAAe,IAAI,CAAC,CAAA,CAE7B,CAAC,CAAA;CAGR,GACA,IACF,GAAC;EAAA,UAAA,SAAA;EAAA,mBAAA,OAAA,OAAA,OAAA,MAAA,WAAA,SAAA,QAAA;CAAA,CAAA,GAAA,IAAA;AAIP,GAAC;CAAA,MAAA;CAAA,OAAA;EAAA;EAAA;EAAA;EAAA;CAAA;AAAA,CACH"}

package/dist/navigation/Pagination.js

@@ -1,7 +1,7 @@
 import { clamp } from "../utils/data/number.js";
 import { t } from "../config/theme/tokens.js";
 import { useLang } from "../config/context.js";
-import { mergeAttrs, mergePartProps, mergeProps as mergeProps$1 } from "../utils/props.js";
+import { mergeAttrs, mergePartProps, mergeProps } from "../utils/props.js";
 import { Icon } from "../base/Icon.js";
 import { Button } from "../base/Button.js";
 import { IconButton } from "../base/IconButton.js";
@@ -9,8 +9,8 @@ import { IconLinkButton } from "../base/IconLinkButton.js";
 import { LinkButton } from "../base/LinkButton.js";
 import { FlexList } from "../layout/Flex.js";
 import { paginationItems } from "../utils/data/pagination.js";
-import { computed, createVNode, isVNode, mergeProps } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode, isVNode } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { ChevronLeft, ChevronRight, Ellipsis } from "@lucide/icons";
 //#region src/navigation/Pagination.tsx
@@ -75,7 +75,7 @@ var Pagination = /*#__PURE__*/ _component((_props, _ctx) => {
 	function pageButton(target) {
 		const isCurrent = target === current.value;
 		const own = typeof propsPage.value === "function" ? propsPage.value(target) : propsPage.value;
-		const shared = mergeProps$1({
+		const shared = mergeProps({
 			sx: [paginationStyles.page, paginationStyles.tabular],
 			size: size.value,
 			variant: isCurrent ? "soft" : "ghost",
@@ -114,7 +114,7 @@ var Pagination = /*#__PURE__*/ _component((_props, _ctx) => {
 	return () => createVNode("nav", mergeAttrs({
 		sx: paginationStyles.root,
 		"aria-label": lang.pagination
-	}, rest), [createVNode(FlexList, mergeProps(mergePartProps({
+	}, rest), [createVNode(FlexList, mergeJsxProps(mergePartProps({
 		align: "center",
 		gap: "xs"
 	}, propsList.value), { "key": "__site0" }), {
@@ -125,7 +125,7 @@ var Pagination = /*#__PURE__*/ _component((_props, _ctx) => {
 				pageCount: count.value,
 				siblings: siblings.value,
 				boundaries: boundaries.value
-			}).map((item) => createVNode("li", mergeProps({ "key": item }, mergeAttrs({}, propsItem.value)), [typeof item === "number" ? pageButton(item) : createVNode("span", mergeAttrs({ sx: paginationStyles.ellipsis }, propsEllipsis.value, { "aria-hidden": true }), [createVNode(Icon, { "icon": Ellipsis }, null)])])),
+			}).map((item) => createVNode("li", mergeJsxProps({ "key": item }, mergeAttrs({}, propsItem.value)), [typeof item === "number" ? pageButton(item) : createVNode("span", mergeAttrs({ sx: paginationStyles.ellipsis }, propsEllipsis.value, { "aria-hidden": true }), [createVNode(Icon, { "icon": Ellipsis }, null)])])),
 			createVNode("li", mergeAttrs({}, propsItem.value), [stepButton(1)])
 		],
 		$stable: true

package/dist/navigation/Pagination.js.map

@@ -1 +1 @@
-{"version":3,"file":"Pagination.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","mergeProps","_createVNode","_mergeProps"],"sources":["../../src/navigation/Pagination.tsx"],"sourcesContent":["/**\n * 分页（nav > ul）：上一页、页码、省略号、下一页，当前页带 aria-current=\"page\"。\n * 页码序列用 utils/data/pagination.ts（项数固定，翻页时按钮不跳动）；按钮用 Button / IconButton，文案取语言包。\n *\n *   <Pagination _page={page} total={320} pageSize={20} />\n *   <Pagination page={page} pageCount={12} href={(n) => `/articles?page=${n}`} />   渲染为链接（可分享、可被收录）\n */\nimport { ChevronLeft, ChevronRight, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { IconLinkButton, type IconLinkButtonProps } from '../base/IconLinkButton';\nimport { LinkButton, type LinkButtonProps } from '../base/LinkButton';\nimport { useLang } from '../config/context';\nimport { paginationItems } from '../utils/data/pagination';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { clamp } from '../utils/data/number';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（分页） */\nexport interface PaginationProps extends PartProps<'nav'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 总页数；不写时按 total 与 pageSize 算 */\n  pageCount?: number;\n  /** 总条数：给了就能算页数，showTotal 时显示“共 n 条” */\n  total?: number;\n  /** 每页条数，默认 10 */\n  pageSize?: number;\n  /** 当前页左右各显示几页，默认 1 */\n  siblings?: number;\n  /** 首尾各固定显示几页，默认 1 */\n  boundaries?: number;\n  /** 显示总条数（需要 total） */\n  showTotal?: boolean;\n  /** 给了就渲染为链接：每页的地址 */\n  href?: (page: number) => string;\n  /** 字号档位，按钮随之缩放，默认 sm */\n  size?: TextSize;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 每一项（li，包着按钮或省略号）的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 页码按钮的部件属性（按钮或链接按钮），可以按页计算 */\n  propsPage?:\n    | Partial<ButtonProps & LinkButtonProps>\n    | ((page: number) => Partial<ButtonProps & LinkButtonProps>);\n  /** 上一页、下一页按钮的部件属性（有 href 时是图标链接按钮） */\n  propsStep?: Partial<IconButtonProps & IconLinkButtonProps>;\n  /** 省略号的部件属性 */\n  propsEllipsis?: PartProps<'span'>;\n  /** 总条数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n}\n\n/** Pagination 的样式：root、list、page、ellipsis、total、tabular */\nexport const paginationStyles = css.create({\n  root: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '_md' },\n  // 页码按钮等宽，翻页时位置不晃\n  page: { minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`, paddingInline: '_xs' },\n  ellipsis: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  total: { color: '_textMuted' },\n  tabular: { fontVariantNumeric: 'tabular-nums' },\n});\n\n/** 分页：上一页、页码、省略号、下一页 */\nexport const Pagination = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    total,\n    pageSize = 10,\n    siblings = 1,\n    boundaries = 1,\n    showTotal = false,\n    href,\n    size = 'sm',\n    propsList,\n    propsItem,\n    propsPage,\n    propsStep,\n    propsEllipsis,\n    propsTotal,\n    ...rest\n  }: PaginationProps) => {\n    const lang = useLang();\n    const count = _derived(Math.max(1, pageCount ?? Math.ceil((total ?? 0) / pageSize)));\n    // 显示用的当前页：总数变少（筛选后）时父级的 page 可能超出范围，夹回去，不显示不存在的页\n    const current = _derived(clamp(page, 1, count));\n\n    function go(target: number) {\n      page = clamp(target, 1, count);\n    }\n\n    /** 一个页码：当前页是实底，其余是 ghost；有 href 时是链接 */\n    function pageButton(target: number) {\n      const isCurrent = target === current;\n      const own = typeof propsPage === 'function' ? propsPage(target) : propsPage;\n      const shared = mergeProps<ButtonProps & LinkButtonProps>(\n        {\n          sx: [paginationStyles.page, paginationStyles.tabular],\n          size,\n          variant: isCurrent ? 'soft' : 'ghost',\n          tone: isCurrent ? 'accent' : 'neutral',\n          'aria-label': lang.pageLabel(target),\n        },\n        own,\n        { 'aria-current': isCurrent ? 'page' : undefined },\n      );\n      return href ? (\n        <LinkButton\n          {...mergePartProps<LinkButtonProps>(shared as LinkButtonProps, {\n            href: href(target),\n            onClick: () => go(target),\n          })}\n        >\n          {target}\n        </LinkButton>\n      ) : (\n        <Button\n          {...mergePartProps<ButtonProps>(shared as ButtonProps, { onClick: () => go(target) })}\n        >\n          {target}\n        </Button>\n      );\n    }\n\n    /** 上一页、下一页：到头时不可用；有 href 时也是链接（rel=\"prev\" / \"next\"），与页码一样可分享 */\n    function stepButton(direction: -1 | 1) {\n      const target = current + direction;\n      const disabled = target < 1 || target > count;\n      const shared = {\n        size,\n        variant: 'ghost',\n        tone: 'neutral',\n        icon: direction < 0 ? ChevronLeft : ChevronRight,\n        propsIcon: { flipInRtl: true },\n        'aria-label': direction < 0 ? lang.previousPage : lang.nextPage,\n      } as const;\n      return href ? (\n        <IconLinkButton\n          {...mergePartProps<IconLinkButtonProps>(\n            { ...shared, href: href(disabled ? current : target) },\n            propsStep,\n            { disabled, rel: direction < 0 ? 'prev' : 'next', onClick: () => go(target) },\n          )}\n        />\n      ) : (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(shared, propsStep, {\n            disabled,\n            onClick: () => go(target),\n          })}\n        />\n      );\n    }\n\n    return () => (\n      <nav\n        {...mergeAttrs<'nav'>({ sx: paginationStyles.root, 'aria-label': lang.pagination }, rest)}\n      >\n        <FlexList {...mergePartProps<FlexProps<'ul'>>({ align: 'center', gap: 'xs' }, propsList)}>\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(-1)}</li>\n          {paginationItems({ page: current, pageCount: count, siblings, boundaries }).map(\n            (item) => (\n              <li key={item} {...mergeAttrs<'li'>({}, propsItem)}>\n                {typeof item === 'number' ? (\n                  pageButton(item)\n                ) : (\n                  <span\n                    {...mergeAttrs<'span'>({ sx: paginationStyles.ellipsis }, propsEllipsis, {\n                      'aria-hidden': true,\n                    })}\n                  >\n                    <Icon icon={Ellipsis} />\n                  </span>\n                )}\n              </li>\n            ),\n          )}\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(1)}</li>\n        </FlexList>\n        {showTotal && total != null && (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [paginationStyles.total, paginationStyles.tabular] },\n              propsTotal,\n            )}\n          >\n            {lang.paginationTotal(total)}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"Pagination.js","names":["_isVNode","_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/Pagination.tsx"],"sourcesContent":["/**\n * 分页（nav > ul）：上一页、页码、省略号、下一页，当前页带 aria-current=\"page\"。\n * 页码序列用 utils/data/pagination.ts（项数固定，翻页时按钮不跳动）；按钮用 Button / IconButton，文案取语言包。\n *\n *   <Pagination _page={page} total={320} pageSize={20} />\n *   <Pagination page={page} pageCount={12} href={(n) => `/articles?page=${n}`} />   渲染为链接（可分享、可被收录）\n */\nimport { ChevronLeft, ChevronRight, Ellipsis } from '@lucide/icons';\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport { Button, type ButtonProps } from '../base/Button';\nimport { Icon } from '../base/Icon';\nimport { IconButton, type IconButtonProps } from '../base/IconButton';\nimport { IconLinkButton, type IconLinkButtonProps } from '../base/IconLinkButton';\nimport { LinkButton, type LinkButtonProps } from '../base/LinkButton';\nimport { useLang } from '../config/context';\nimport { paginationItems } from '../utils/data/pagination';\nimport { mergeAttrs, mergePartProps, mergeProps, type PartProps } from '../utils/props';\nimport type { TextSize } from '../utils/style/typography';\nimport { clamp } from '../utils/data/number';\nimport { FlexList, type FlexProps } from '../layout/Flex';\nimport { t } from '../config/theme/tokens';\n\n/** 未声明的属性落到 nav 上；aria-label 默认取语言包（分页） */\nexport interface PaginationProps extends PartProps<'nav'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 总页数；不写时按 total 与 pageSize 算 */\n  pageCount?: number;\n  /** 总条数：给了就能算页数，showTotal 时显示“共 n 条” */\n  total?: number;\n  /** 每页条数，默认 10 */\n  pageSize?: number;\n  /** 当前页左右各显示几页，默认 1 */\n  siblings?: number;\n  /** 首尾各固定显示几页，默认 1 */\n  boundaries?: number;\n  /** 显示总条数（需要 total） */\n  showTotal?: boolean;\n  /** 给了就渲染为链接：每页的地址 */\n  href?: (page: number) => string;\n  /** 字号档位，按钮随之缩放，默认 sm */\n  size?: TextSize;\n  /** 列表（ul）的部件属性 */\n  propsList?: Partial<FlexProps<'ul'>>;\n  /** 每一项（li，包着按钮或省略号）的部件属性 */\n  propsItem?: PartProps<'li'>;\n  /** 页码按钮的部件属性（按钮或链接按钮），可以按页计算 */\n  propsPage?:\n    | Partial<ButtonProps & LinkButtonProps>\n    | ((page: number) => Partial<ButtonProps & LinkButtonProps>);\n  /** 上一页、下一页按钮的部件属性（有 href 时是图标链接按钮） */\n  propsStep?: Partial<IconButtonProps & IconLinkButtonProps>;\n  /** 省略号的部件属性 */\n  propsEllipsis?: PartProps<'span'>;\n  /** 总条数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n}\n\n/** Pagination 的样式：root、list、page、ellipsis、total、tabular */\nexport const paginationStyles = css.create({\n  root: { display: 'flex', alignItems: 'center', flexWrap: 'wrap', gap: '_md' },\n  // 页码按钮等宽，翻页时位置不晃\n  page: { minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`, paddingInline: '_xs' },\n  ellipsis: {\n    display: 'inline-flex',\n    alignItems: 'center',\n    justifyContent: 'center',\n    minWidth: `max(${t.sizes.control}, ${t.sizes.minTarget})`,\n    color: '_textMuted',\n  },\n  total: { color: '_textMuted' },\n  tabular: { fontVariantNumeric: 'tabular-nums' },\n});\n\n/** 分页：上一页、页码、省略号、下一页 */\nexport const Pagination = _component(\n  ({\n    _page: page = _bindable(1),\n    pageCount,\n    total,\n    pageSize = 10,\n    siblings = 1,\n    boundaries = 1,\n    showTotal = false,\n    href,\n    size = 'sm',\n    propsList,\n    propsItem,\n    propsPage,\n    propsStep,\n    propsEllipsis,\n    propsTotal,\n    ...rest\n  }: PaginationProps) => {\n    const lang = useLang();\n    const count = _derived(Math.max(1, pageCount ?? Math.ceil((total ?? 0) / pageSize)));\n    // 显示用的当前页：总数变少（筛选后）时父级的 page 可能超出范围，夹回去，不显示不存在的页\n    const current = _derived(clamp(page, 1, count));\n\n    function go(target: number) {\n      page = clamp(target, 1, count);\n    }\n\n    /** 一个页码：当前页是实底，其余是 ghost；有 href 时是链接 */\n    function pageButton(target: number) {\n      const isCurrent = target === current;\n      const own = typeof propsPage === 'function' ? propsPage(target) : propsPage;\n      const shared = mergeProps<ButtonProps & LinkButtonProps>(\n        {\n          sx: [paginationStyles.page, paginationStyles.tabular],\n          size,\n          variant: isCurrent ? 'soft' : 'ghost',\n          tone: isCurrent ? 'accent' : 'neutral',\n          'aria-label': lang.pageLabel(target),\n        },\n        own,\n        { 'aria-current': isCurrent ? 'page' : undefined },\n      );\n      return href ? (\n        <LinkButton\n          {...mergePartProps<LinkButtonProps>(shared as LinkButtonProps, {\n            href: href(target),\n            onClick: () => go(target),\n          })}\n        >\n          {target}\n        </LinkButton>\n      ) : (\n        <Button\n          {...mergePartProps<ButtonProps>(shared as ButtonProps, { onClick: () => go(target) })}\n        >\n          {target}\n        </Button>\n      );\n    }\n\n    /** 上一页、下一页：到头时不可用；有 href 时也是链接（rel=\"prev\" / \"next\"），与页码一样可分享 */\n    function stepButton(direction: -1 | 1) {\n      const target = current + direction;\n      const disabled = target < 1 || target > count;\n      const shared = {\n        size,\n        variant: 'ghost',\n        tone: 'neutral',\n        icon: direction < 0 ? ChevronLeft : ChevronRight,\n        propsIcon: { flipInRtl: true },\n        'aria-label': direction < 0 ? lang.previousPage : lang.nextPage,\n      } as const;\n      return href ? (\n        <IconLinkButton\n          {...mergePartProps<IconLinkButtonProps>(\n            { ...shared, href: href(disabled ? current : target) },\n            propsStep,\n            { disabled, rel: direction < 0 ? 'prev' : 'next', onClick: () => go(target) },\n          )}\n        />\n      ) : (\n        <IconButton\n          {...mergePartProps<IconButtonProps>(shared, propsStep, {\n            disabled,\n            onClick: () => go(target),\n          })}\n        />\n      );\n    }\n\n    return () => (\n      <nav\n        {...mergeAttrs<'nav'>({ sx: paginationStyles.root, 'aria-label': lang.pagination }, rest)}\n      >\n        <FlexList {...mergePartProps<FlexProps<'ul'>>({ align: 'center', gap: 'xs' }, propsList)}>\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(-1)}</li>\n          {paginationItems({ page: current, pageCount: count, siblings, boundaries }).map(\n            (item) => (\n              <li key={item} {...mergeAttrs<'li'>({}, propsItem)}>\n                {typeof item === 'number' ? (\n                  pageButton(item)\n                ) : (\n                  <span\n                    {...mergeAttrs<'span'>({ sx: paginationStyles.ellipsis }, propsEllipsis, {\n                      'aria-hidden': true,\n                    })}\n                  >\n                    <Icon icon={Ellipsis} />\n                  </span>\n                )}\n              </li>\n            ),\n          )}\n          <li {...mergeAttrs<'li'>({}, propsItem)}>{stepButton(1)}</li>\n        </FlexList>\n        {showTotal && total != null && (\n          <span\n            {...mergeAttrs<'span'>(\n              { sx: [paginationStyles.total, paginationStyles.tabular] },\n              propsTotal,\n            )}\n          >\n            {lang.paginationTotal(total)}\n          </span>\n        )}\n      </nav>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/PaginationBar.js

@@ -5,8 +5,8 @@ import { fontSizeStyles } from "../utils/style/typography.js";
 import { PageJump } from "./PageJump.js";
 import { PageSizeSelect } from "./PageSizeSelect.js";
 import { Pagination } from "./Pagination.js";
-import { computed, createVNode, mergeProps } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { computed, createVNode } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 //#region src/navigation/PaginationBar.tsx
 /** 当前页显示的是哪几条 */
@@ -80,17 +80,17 @@ var PaginationBar = /*#__PURE__*/ _component((_props, _ctx) => {
 		return createVNode("span", mergeAttrs({ sx: paginationBarStyles.total }, propsTotal.value), [content]);
 	}
 	return () => createVNode("div", mergeAttrs({ sx: [paginationBarStyles.root, fontSizeStyles[size.value]] }, rest), [renderTotal(), createVNode("div", mergeAttrs({ sx: paginationBarStyles.controls }, propsControls.value), [
-		createVNode(Pagination, mergeProps(mergePartProps({ size: size.value }, propsPagination.value), {
+		createVNode(Pagination, mergeJsxProps(mergePartProps({ size: size.value }, propsPagination.value), {
 			"_page": page.value,
 			"onUpdate:_page": _cache[0] || (_cache[0] = ($event) => page.value = $event),
 			"total": total.value,
 			"pageSize": pageSize.value
 		}), null),
-		showSizeSelect.value && createVNode(PageSizeSelect, mergeProps(mergePartProps({ options: pageSizeOptions.value }, propsSizeSelect.value, { onSizeChange: () => page.value = 1 }), {
+		showSizeSelect.value && createVNode(PageSizeSelect, mergeJsxProps(mergePartProps({ options: pageSizeOptions.value }, propsSizeSelect.value, { onSizeChange: () => page.value = 1 }), {
 			"_value": pageSize.value,
 			"onUpdate:_value": _cache[1] || (_cache[1] = ($event) => pageSize.value = $event)
 		}), null),
-		showJump.value && pageCount.value > 1 && createVNode(PageJump, mergeProps(mergePartProps({
+		showJump.value && pageCount.value > 1 && createVNode(PageJump, mergeJsxProps(mergePartProps({
 			pageCount: pageCount.value,
 			size: size.value,
 			sx: paginationBarStyles.jump

package/dist/navigation/PaginationBar.js.map

@@ -1 +1 @@
-{"version":3,"file":"PaginationBar.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/PaginationBar.tsx"],"sourcesContent":["/**\n * 分页栏：表格、列表下方的一整行，起始边是“第 1–20 条，共 320 条”，结束边是页码、每页条数、跳页。\n * 拼的是 Pagination、PageSizeSelect、PageJump，换每页条数时回到第 1 页。\n *\n *   <PaginationBar _page={page} _pageSize={size} total={320} />\n *   <PaginationBar _page={tasks.page} _pageSize={tasks.pageSize} total={tasks.total} />   接 useTableQuery\n *\n * 占满所在的行；窄于 36em 时不显示跳页，窄于 24em 时总数单独一行。只要其中几样时用 showTotal / showSizeSelect / showJump 关掉，\n * 或者直接并排三个组件。\n *\n * 部件：Root（div）、Total（span）、Controls（div）、Pagination、SizeSelect（PageSizeSelect）、Jump（PageJump）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { PageJump, type PageJumpProps } from './PageJump';\nimport { PageSizeSelect, type PageSizeSelectProps } from './PageSizeSelect';\nimport { Pagination, type PaginationProps } from './Pagination';\n\n/** 当前页显示的是哪几条 */\nexport interface PageRange {\n  /** 第一条的序号，从 1 开始；没有数据时是 0 */\n  from: number;\n  /** 最后一条的序号 */\n  to: number;\n  /** 总条数 */\n  total: number;\n}\n\n/** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */\nexport interface PaginationBarProps extends PartProps<'div'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 每页条数：父级写 _pageSize={x}，默认 10 */\n  _pageSize?: number;\n  /** 总条数 */\n  total: number;\n  /** 每页条数的选项，默认 [10, 20, 50, 100] */\n  pageSizeOptions?: readonly number[];\n  /** 起始边的总数：默认 true（“第 1–20 条，共 320 条”），也可以给函数自己写 */\n  showTotal?: boolean | ((range: PageRange) => VNodeChild);\n  /** 每页条数选择，默认 true */\n  showSizeSelect?: boolean;\n  /** 跳页，默认 true（窄于 36em 时不显示） */\n  showJump?: boolean;\n  /** 字号档位，各部分随之缩放，默认 sm */\n  size?: TextSize;\n  /** 总数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n  /** 结束边那一组（页码、条数、跳页）的部件属性 */\n  propsControls?: PartProps<'div'>;\n  /** 页码（Pagination）的部件属性 */\n  propsPagination?: Partial<PaginationProps>;\n  /** 每页条数（PageSizeSelect）的部件属性 */\n  propsSizeSelect?: Partial<PageSizeSelectProps>;\n  /** 跳页（PageJump）的部件属性 */\n  propsJump?: Partial<PageJumpProps>;\n}\n\n/** PaginationBar 的样式：root、total、controls、jump */\nexport const paginationBarStyles = css.create({\n  // 按自己的宽度决定显示什么：放在侧栏、卡片里时也合适\n  root: {\n    containerType: 'inline-size',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    rowGap: '_sm',\n    columnGap: '_md',\n  },\n  total: {\n    flexBasis: { default: 'auto', '@container (max-width: 24em)': '100%' },\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  controls: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    rowGap: '_sm',\n    columnGap: '_md',\n    marginInlineStart: 'auto',\n  },\n  jump: { display: { default: 'inline-flex', '@container (max-width: 36em)': 'none' } },\n});\n\n/** 分页栏：总数、页码、每页条数、跳页 */\nexport const PaginationBar = _component(\n  ({\n    _page: page = _bindable(1),\n    _pageSize: pageSize = _bindable(10),\n    total,\n    pageSizeOptions,\n    showTotal = true,\n    showSizeSelect = true,\n    showJump = true,\n    size = 'sm',\n    propsTotal,\n    propsControls,\n    propsPagination,\n    propsSizeSelect,\n    propsJump,\n    ...rest\n  }: PaginationBarProps) => {\n    const lang = useLang();\n    const pageCount = _derived(Math.max(1, Math.ceil(total / pageSize)));\n    // 总数变少（筛选后）时父级的 page 可能超出范围：显示时夹回去，同 Pagination\n    const range = _derived.by((): PageRange => {\n      const current = clamp(page, 1, pageCount);\n      return total === 0\n        ? { from: 0, to: 0, total }\n        : {\n            from: (current - 1) * pageSize + 1,\n            to: Math.min(current * pageSize, total),\n            total,\n          };\n    });\n\n    function renderTotal() {\n      if (!showTotal) return null;\n      const content =\n        typeof showTotal === 'function'\n          ? showTotal(range)\n          : range.total === 0\n            ? lang.paginationTotal(0)\n            : lang.paginationRange(range.from, range.to, range.total);\n      return (\n        <span {...mergeAttrs<'span'>({ sx: paginationBarStyles.total }, propsTotal)}>\n          {content}\n        </span>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [paginationBarStyles.root, fontSizeStyles[size]] }, rest)}>\n        {renderTotal()}\n        <div {...mergeAttrs<'div'>({ sx: paginationBarStyles.controls }, propsControls)}>\n          <Pagination\n            {...mergePartProps<PaginationProps>({ size }, propsPagination)}\n            _page={page}\n            total={total}\n            pageSize={pageSize}\n          />\n          {showSizeSelect && (\n            <PageSizeSelect\n              {...mergePartProps<PageSizeSelectProps>(\n                { options: pageSizeOptions },\n                propsSizeSelect,\n                { onSizeChange: () => (page = 1) },\n              )}\n              _value={pageSize}\n            />\n          )}\n          {showJump && pageCount > 1 && (\n            <PageJump\n              {...mergePartProps<PageJumpProps>(\n                { pageCount, size, sx: paginationBarStyles.jump },\n                propsJump,\n              )}\n              _page={page}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}
+{"version":3,"file":"PaginationBar.js","names":["_vtp_bindable","_vtp_readonlyProp","_vtp_restProps","_vue_computed","_createVNode","_mergeProps"],"sources":["../../src/navigation/PaginationBar.tsx"],"sourcesContent":["/**\n * 分页栏：表格、列表下方的一整行，起始边是“第 1–20 条，共 320 条”，结束边是页码、每页条数、跳页。\n * 拼的是 Pagination、PageSizeSelect、PageJump，换每页条数时回到第 1 页。\n *\n *   <PaginationBar _page={page} _pageSize={size} total={320} />\n *   <PaginationBar _page={tasks.page} _pageSize={tasks.pageSize} total={tasks.total} />   接 useTableQuery\n *\n * 占满所在的行；窄于 36em 时不显示跳页，窄于 24em 时总数单独一行。只要其中几样时用 showTotal / showSizeSelect / showJump 关掉，\n * 或者直接并排三个组件。\n *\n * 部件：Root（div）、Total（span）、Controls（div）、Pagination、SizeSelect（PageSizeSelect）、Jump（PageJump）。\n */\nimport { _component } from '@zerodep-dev/vue-tsx-pro-tsx';\nimport * as css from '@zerodep-dev/vue-tsx-pro-tsx/styles';\nimport type { VNodeChild } from 'vue';\nimport { useLang } from '../config/context';\nimport { clamp } from '../utils/data/number';\nimport { mergeAttrs, mergePartProps, type PartProps } from '../utils/props';\nimport { fontSizeStyles, type TextSize } from '../utils/style/typography';\nimport { PageJump, type PageJumpProps } from './PageJump';\nimport { PageSizeSelect, type PageSizeSelectProps } from './PageSizeSelect';\nimport { Pagination, type PaginationProps } from './Pagination';\n\n/** 当前页显示的是哪几条 */\nexport interface PageRange {\n  /** 第一条的序号，从 1 开始；没有数据时是 0 */\n  from: number;\n  /** 最后一条的序号 */\n  to: number;\n  /** 总条数 */\n  total: number;\n}\n\n/** 未声明的属性落到外层 div 上；分页导航的名称用 propsPagination 的 aria-label */\nexport interface PaginationBarProps extends PartProps<'div'> {\n  /** 当前页，从 1 开始：父级写 _page={x} */\n  _page?: number;\n  /** 每页条数：父级写 _pageSize={x}，默认 10 */\n  _pageSize?: number;\n  /** 总条数 */\n  total: number;\n  /** 每页条数的选项，默认 [10, 20, 50, 100] */\n  pageSizeOptions?: readonly number[];\n  /** 起始边的总数：默认 true（“第 1–20 条，共 320 条”），也可以给函数自己写 */\n  showTotal?: boolean | ((range: PageRange) => VNodeChild);\n  /** 每页条数选择，默认 true */\n  showSizeSelect?: boolean;\n  /** 跳页，默认 true（窄于 36em 时不显示） */\n  showJump?: boolean;\n  /** 字号档位，各部分随之缩放，默认 sm */\n  size?: TextSize;\n  /** 总数文字的部件属性 */\n  propsTotal?: PartProps<'span'>;\n  /** 结束边那一组（页码、条数、跳页）的部件属性 */\n  propsControls?: PartProps<'div'>;\n  /** 页码（Pagination）的部件属性 */\n  propsPagination?: Partial<PaginationProps>;\n  /** 每页条数（PageSizeSelect）的部件属性 */\n  propsSizeSelect?: Partial<PageSizeSelectProps>;\n  /** 跳页（PageJump）的部件属性 */\n  propsJump?: Partial<PageJumpProps>;\n}\n\n/** PaginationBar 的样式：root、total、controls、jump */\nexport const paginationBarStyles = css.create({\n  // 按自己的宽度决定显示什么：放在侧栏、卡片里时也合适\n  root: {\n    containerType: 'inline-size',\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    justifyContent: 'space-between',\n    rowGap: '_sm',\n    columnGap: '_md',\n  },\n  total: {\n    flexBasis: { default: 'auto', '@container (max-width: 24em)': '100%' },\n    color: '_textMuted',\n    fontVariantNumeric: 'tabular-nums',\n  },\n  controls: {\n    display: 'flex',\n    flexWrap: 'wrap',\n    alignItems: 'center',\n    rowGap: '_sm',\n    columnGap: '_md',\n    marginInlineStart: 'auto',\n  },\n  jump: { display: { default: 'inline-flex', '@container (max-width: 36em)': 'none' } },\n});\n\n/** 分页栏：总数、页码、每页条数、跳页 */\nexport const PaginationBar = _component(\n  ({\n    _page: page = _bindable(1),\n    _pageSize: pageSize = _bindable(10),\n    total,\n    pageSizeOptions,\n    showTotal = true,\n    showSizeSelect = true,\n    showJump = true,\n    size = 'sm',\n    propsTotal,\n    propsControls,\n    propsPagination,\n    propsSizeSelect,\n    propsJump,\n    ...rest\n  }: PaginationBarProps) => {\n    const lang = useLang();\n    const pageCount = _derived(Math.max(1, Math.ceil(total / pageSize)));\n    // 总数变少（筛选后）时父级的 page 可能超出范围：显示时夹回去，同 Pagination\n    const range = _derived.by((): PageRange => {\n      const current = clamp(page, 1, pageCount);\n      return total === 0\n        ? { from: 0, to: 0, total }\n        : {\n            from: (current - 1) * pageSize + 1,\n            to: Math.min(current * pageSize, total),\n            total,\n          };\n    });\n\n    function renderTotal() {\n      if (!showTotal) return null;\n      const content =\n        typeof showTotal === 'function'\n          ? showTotal(range)\n          : range.total === 0\n            ? lang.paginationTotal(0)\n            : lang.paginationRange(range.from, range.to, range.total);\n      return (\n        <span {...mergeAttrs<'span'>({ sx: paginationBarStyles.total }, propsTotal)}>\n          {content}\n        </span>\n      );\n    }\n\n    return () => (\n      <div {...mergeAttrs<'div'>({ sx: [paginationBarStyles.root, fontSizeStyles[size]] }, rest)}>\n        {renderTotal()}\n        <div {...mergeAttrs<'div'>({ sx: paginationBarStyles.controls }, propsControls)}>\n          <Pagination\n            {...mergePartProps<PaginationProps>({ size }, propsPagination)}\n            _page={page}\n            total={total}\n            pageSize={pageSize}\n          />\n          {showSizeSelect && (\n            <PageSizeSelect\n              {...mergePartProps<PageSizeSelectProps>(\n                { options: pageSizeOptions },\n                propsSizeSelect,\n                { onSizeChange: () => (page = 1) },\n              )}\n              _value={pageSize}\n            />\n          )}\n          {showJump && pageCount > 1 && (\n            <PageJump\n              {...mergePartProps<PageJumpProps>(\n                { pageCount, size, sx: paginationBarStyles.jump },\n                propsJump,\n              )}\n              _page={page}\n            />\n          )}\n        </div>\n      </div>\n    );\n  },\n);\n"],"mappings":"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"}

package/dist/navigation/Steps.js

@@ -9,8 +9,8 @@ import { ButtonBase } from "../base/ButtonBase.js";
 import { useRouterLink } from "../utils/dom/link.js";
 import { statusIcons } from "../utils/style/tone-styles.js";
 import { FlexOrderedList } from "../layout/Flex.js";
-import { createVNode, isVNode, mergeProps } from "vue";
-import { _component, bindable, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
+import { createVNode, isVNode } from "vue";
+import { _component, bindable, mergeJsxProps, readonlyProp, restProps } from "@zerodep-dev/vue-tsx-pro-tsx";
 import * as css from "@zerodep-dev/vue-tsx-pro-tsx/styles";
 import { Check } from "@lucide/icons";
 //#region src/navigation/Steps.tsx
@@ -146,7 +146,7 @@ var Steps = /*#__PURE__*/ _component((_props, _ctx) => {
 	return () => {
 		let _slot2;
 		const vertical = orientation.value === "vertical";
-		return createVNode(FlexOrderedList, mergeProps(mergePartProps({
+		return createVNode(FlexOrderedList, mergeJsxProps(mergePartProps({
 			direction: vertical ? "column" : "row",
 			gap: vertical ? "lg" : "sm",
 			sx: size.value && fontSizeStyles[size.value]
@@ -161,7 +161,7 @@ var Steps = /*#__PURE__*/ _component((_props, _ctx) => {
 			const reachable = state === "complete" && !item.disabled;
 			const link = reachable && item.href != null;
 			const button = reachable && !link && navigable.value;
-			return createVNode("li", mergeProps({ "key": item.key ?? index }, mergeAttrs({ sx: [stepsStyles.item, vertical && stepsStyles.itemVertical] }, own, { "aria-current": state === "current" ? "step" : void 0 }), { "data-state": state }), [link ? createVNode("a", mergeAttrs({ sx: [
+			return createVNode("li", mergeJsxProps({ "key": item.key ?? index }, mergeAttrs({ sx: [stepsStyles.item, vertical && stepsStyles.itemVertical] }, own, { "aria-current": state === "current" ? "step" : void 0 }), { "data-state": state }), [link ? createVNode("a", mergeAttrs({ sx: [
 				stepsStyles.trigger,
 				stepsStyles.link,
 				focusRingStyles.visible