@orbit-work/ui 0.1.2-preview.0 → 0.1.3

package/src/components/primitives/BackTop/BackTop.stories.tsx

@@ -1,122 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { useState } from "react"
-import { BackTop } from "./index"
-
-/**
- * 滚动容器样板。
- *
- * R2：原来两条「滚动容器」故事在 render 内写 `const containerRef = { current: null }`，
- * 拿到元素前就把 `containerRef.current`（永远是首帧的 null）传给了 `target`——BackTop
- * 于是退回监听 window，而容器的 scroll 事件不冒泡到 window，scoped 形态（sticky 定位那条
- * 分支）在 Storybook 里从来没被渲出来过。改成 ref callback ＋ state：拿到真元素后触发一次
- * 重渲，`target` 才是活的 DOM 节点，滚过阈值就能看见浮钮。
- */
-function ScrollableDemo({ threshold, title, hint }: { threshold: number; title: string; hint: string }) {
-  const [container, setContainer] = useState<HTMLDivElement | null>(null)
-  return (
-    <div
-      ref={setContainer}
-      style={{
-        height: 400,
-        overflow: "auto",
-        position: "relative",
-        border: "1px solid var(--ow-border)",
-      }}
-    >
-      <div style={{ padding: 24, height: 1200 }}>
-        <h2>{title}</h2>
-        <p>{hint}</p>
-        {Array.from({ length: 20 }, (_, i) => (
-          <p key={`p-${i + 1}`} style={{ marginTop: 16 }}>
-            Content paragraph {i + 1}. Lorem ipsum dolor sit amet, consectetur adipiscing elit.
-          </p>
-        ))}
-      </div>
-      <BackTop target={container} threshold={threshold} />
-    </div>
-  )
-}
-
-const meta = {
-  title: "Primitives/BackTop",
-  component: BackTop,
-  parameters: {
-    layout: "fullscreen",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof BackTop>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Default: Story = {
-  args: {
-    alwaysVisible: true,
-  },
-}
-
-export const InScrollableContainer: Story = {
-  render: () => (
-    <ScrollableDemo
-      threshold={100}
-      title="Scrollable Content"
-      hint="Scroll down to see the back-to-top button appear（scoped 形态：sticky 定位，随容器走）。"
-    />
-  ),
-}
-
-export const AlwaysVisible: Story = {
-  args: {
-    alwaysVisible: true,
-  },
-  render: (args) => (
-    <div style={{ height: 400, position: "relative", padding: 24, border: "1px solid var(--ow-border)" }}>
-      <p>This button is always visible for demonstration purposes.</p>
-      <BackTop {...args} />
-    </div>
-  ),
-}
-
-export const CustomThreshold: Story = {
-  render: () => (
-    <ScrollableDemo
-      threshold={500}
-      title="Custom Threshold (500px)"
-      hint="Button appears only after scrolling 500px."
-    />
-  ),
-}
-
-export const Disabled: Story = {
-  name: "禁用",
-  render: () => (
-    <div style={{ height: 200, position: "relative", padding: 24, background: "var(--ow-bg)" }}>
-      <p style={{ margin: 0, fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
-        禁用态逐 token 落色（disabled-bg / disabled-text / disabled-border），不用统一透明度。
-      </p>
-      <BackTop alwaysVisible disabled className="absolute right-6 bottom-6" />
-    </div>
-  ),
-}
-
-export const DualTheme: Story = {
-  name: "双主题对照",
-  parameters: { layout: "fullscreen" },
-  render: () => (
-    <div style={{ display: "flex" }}>
-      {(["light", "dark"] as const).map((theme) => (
-        <div
-          key={theme}
-          data-theme={theme}
-          style={{ position: "relative", flex: 1, height: 220, background: "var(--ow-bg)", padding: 16 }}
-        >
-          <p style={{ margin: 0, fontSize: "var(--ow-fs-ui, 13px)", color: "var(--ow-text-2)" }}>
-            弹层档浮钮：popover-bg 底 + 1px 边 + shadow-pop，hover/press 走 pop 档。
-          </p>
-          <BackTop alwaysVisible className="absolute right-6 bottom-6" />
-          <BackTop alwaysVisible disabled className="absolute right-20 bottom-6" />
-        </div>
-      ))}
-    </div>
-  ),
-}

package/src/components/primitives/BackTop/BackTopSource.test.mjs

@@ -1,61 +0,0 @@
-import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
-import test from "node:test"
-
-const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
-/** 注释里点名退役写法是文档，不是用法——禁令只在剥掉注释的代码上验。 */
-const code = source.replace(/\/\*[\s\S]*?\*\//g, "").replace(/^[ \t]*\/\/.*$/gm, "")
-
-// 这两条模式在源码里是违规写法，check-ds2 也扫测试文件，
-// 所以拼接构造而不写成字面量，免得守卫把断言本身当成违规。
-const OPACITY = "opacity"
-const NO_UNIFORM_DISABLED = new RegExp(`disabled:${OPACITY}-`)
-const NO_HOVER_TRANSFORM = new RegExp(`hover:[\\w[\\]-]*(?:${"scale"}-|${"translate"}-)`)
-
-test("BackTop 立面走 DS2 §5 弹层档：popover-bg + 1px border + shadow-pop", () => {
-  assert.match(source, /bg-\[var\(--ow-popover-bg\)\] border border-\[color:var\(--ow-border\)\]/)
-  assert.match(source, /\[box-shadow:var\(--ow-shadow-pop\)\]/)
-  // 旧 2.0 前形态：border-strong 边、bg-ow-bg 底、shadow-ow-shadow-2/3 都不再出现
-  assert.doesNotMatch(source, /border-ow-border-strong|bg-ow-bg\b|shadow-ow-shadow-[23]/)
-})
-
-test("BackTop 悬浮层内交互底色用 pop 档，hover 只换色不位移不缩放", () => {
-  assert.match(source, /hover:bg-\[var\(--ow-hover-pop\)\]/)
-  assert.match(source, /active:bg-\[var\(--ow-press-pop\)\]/)
-  assert.doesNotMatch(source, /hover:bg-ow-surface|hover:shadow/)
-  assert.doesNotMatch(source, NO_HOVER_TRANSFORM)
-})
-
-test("BackTop 动效用 ease-beacon + dur-1，不用 transition-all", () => {
-  assert.match(source, /duration-\[var\(--ow-dur-1\)\] ease-\[var\(--ow-ease-beacon\)\]/)
-  assert.doesNotMatch(source, /transition-all/)
-})
-
-test("BackTop 圆角/层级/焦点走 token，不用裸 Tailwind 值", () => {
-  // W3：§7 形状表——图标钮是 8px 档，999 只留给带状态点/计数的 chip 与真圆形元素。
-  assert.match(source, /\[border-radius:var\(--ow-radius-action\)\]/)
-  assert.doesNotMatch(code, /--ow-radius-pill/)
-  assert.match(source, /z-\[var\(--ow-z-sticky\)\]/)
-  assert.match(source, /ow-focus-ring/)
-  assert.doesNotMatch(source, /\brounded-full\b|\bz-50\b|focus-visible:outline-ow-focus-border/)
-})
-
-test("BackTop 尺寸落 §7 控件高度档 {28,32,40}，不是 36 圆 FAB", () => {
-  assert.match(code, /"h-8 w-8 p-0 /)
-  assert.doesNotMatch(code, /h-9 w-9/)
-})
-
-test("BackTop 禁用态逐 token 落色，不用统一透明度", () => {
-  assert.match(source, /disabled:bg-\[var\(--ow-disabled-bg\)\]/)
-  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
-  assert.match(source, /disabled:border-\[color:var\(--ow-disabled-border\)\]/)
-  assert.doesNotMatch(source, NO_UNIFORM_DISABLED)
-})
-
-test("浮钮配方对外导出，供 JumpToLatest 共用", () => {
-  assert.match(source, /export const owFloatingActionClass/)
-})
-
-test("BackTop 是 R3 中性件：不带信标/荧黄", () => {
-  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
-})

package/src/components/primitives/BackTop/index.tsx

@@ -1,93 +0,0 @@
-"use client"
-
-import { useCallback, useEffect, useState } from "react"
-import { cn } from "../../../lib/utils"
-import { Arrow } from "../../composite/Icons"
-import { Button } from "../Button"
-
-/**
- * 浮钮配方（DS 2.0 立面 §5 弹层档）——离地之物：--ow-popover-bg 底 ＋ 1px --ow-border
- * ＋ --ow-shadow-pop（悬浮层永远保留边框）；坐在弹层上的交互底色一律 pop 档
- * hover-pop → press-pop；无内阴影/发光/渐变；hover 只换色，不位移不缩放（§9）。
- *
- * BackTop 与 composite/TranscriptDividers 的 JumpToLatest 共用此配方，两枚浮钮同形同料。
- */
-export const owFloatingActionClass = [
-  "inline-flex items-center justify-center cursor-pointer select-none",
-  "bg-[var(--ow-popover-bg)] border border-[color:var(--ow-border)]",
-  "[box-shadow:var(--ow-shadow-pop)]",
-  "text-[color:var(--ow-text-2)]",
-  "transition-[background-color,color,border-color] duration-[var(--ow-dur-1)] ease-[var(--ow-ease-beacon)]",
-  "hover:bg-[var(--ow-hover-pop)] hover:text-[color:var(--ow-text)]",
-  "active:bg-[var(--ow-press-pop)]",
-  "disabled:cursor-not-allowed disabled:bg-[var(--ow-disabled-bg)] disabled:text-[color:var(--ow-disabled-text)] disabled:border-[color:var(--ow-disabled-border)] disabled:[box-shadow:none]",
-  "ow-focus-ring",
-].join(" ")
-
-export type BackTopProps = {
-  /** Scroll threshold (px) before showing the button (default 200) */
-  threshold?: number
-  /** The scrollable container element (defaults to window) */
-  target?: HTMLElement | null
-  /** Keep visible regardless of scroll position, useful for static layouts and demos */
-  alwaysVisible?: boolean
-  /** 禁用态：逐 token 落色，不用统一透明度 */
-  disabled?: boolean
-  className?: string
-}
-
-/**
- * BackTop — 回到顶部浮钮（DS 2.0 原语，R3 中性件，无信标元素）。
- *
- * 立面按 §5 弹层档（见 owFloatingActionClass）；图标按钮 32×32（§7 控件高 {28,32,40}，
- * ≥28 命中区）；圆角 --ow-radius-action(8)；z 用 --ow-z-sticky（贴滚动容器，低于下拉/弹层/模态）。
- *
- * W3 验收修：原为 36px 圆形 FAB（h-9 w-9 ＋ --ow-radius-pill）——36 不在 §7 高度表，
- * 999 圆按 §7 只留给带状态点/计数的 chip 与真圆形元素（头像/状态点），图标钮一律 8px 档。
- * 同料的 JumpToLatest（composite/TranscriptDividers）同步落 8px。
- */
-export function BackTop({ threshold = 200, target, alwaysVisible = false, disabled, className }: BackTopProps) {
-  const [visible, setVisible] = useState(false)
-
-  useEffect(() => {
-    const el = target || window
-    const handler = () => {
-      const scrollTop = target ? target.scrollTop : window.scrollY || document.documentElement.scrollTop
-      setVisible(scrollTop > threshold)
-    }
-    handler()
-    el.addEventListener("scroll", handler, { passive: true })
-    return () => el.removeEventListener("scroll", handler)
-  }, [target, threshold])
-
-  const scrollToTop = useCallback(() => {
-    if (target) {
-      target.scrollTo({ top: 0, behavior: "smooth" })
-    } else {
-      window.scrollTo({ top: 0, behavior: "smooth" })
-    }
-  }, [target])
-
-  if (!visible && !alwaysVisible) return null
-
-  return (
-    <Button
-      data-slot="backtop"
-      data-scoped={!!target}
-      data-ow-part="action"
-      data-ow-role="navigation"
-      variant="unstyled"
-      disabled={disabled}
-      className={cn(
-        owFloatingActionClass,
-        "h-8 w-8 p-0 [border-radius:var(--ow-radius-action)] z-[var(--ow-z-sticky)]",
-        target ? "sticky left-[calc(100%-64px)] bottom-6" : "fixed right-6 bottom-10",
-        className,
-      )}
-      onClick={scrollToTop}
-      aria-label="回到顶部"
-    >
-      <Arrow aria-hidden="true" style={{ width: 16, height: 16 }} />
-    </Button>
-  )
-}

package/src/components/primitives/Badge/Badge.stories.tsx

@@ -1,376 +0,0 @@
-import type { Meta, StoryObj } from "@storybook/react"
-import { Badge } from "./index"
-
-const meta = {
-  title: "Primitives/Badge",
-  component: Badge,
-  parameters: {
-    layout: "centered",
-  },
-  tags: ["autodocs"],
-} satisfies Meta<typeof Badge>
-
-export default meta
-type Story = StoryObj<typeof meta>
-
-export const Normal: Story = {
-  args: {
-    children: "Normal",
-  },
-}
-
-export const Pending: Story = {
-  args: {
-    variant: "pending",
-    children: "Pending",
-  },
-}
-
-export const Warning: Story = {
-  args: {
-    variant: "warning",
-    children: "Warning",
-  },
-}
-
-export const Error: Story = {
-  args: {
-    variant: "error",
-    children: "Error",
-  },
-}
-
-export const Success: Story = {
-  args: {
-    variant: "success",
-    children: "Success",
-  },
-}
-
-export const WithCustomClassName: Story = {
-  args: {
-    variant: "normal",
-    children: "Custom",
-    className: "custom-badge",
-  },
-}
-
-export const ShortText: Story = {
-  args: {
-    variant: "success",
-    children: "OK",
-  },
-}
-
-export const LongText: Story = {
-  args: {
-    variant: "warning",
-    children: "System maintenance scheduled",
-  },
-}
-
-export const Numbers: Story = {
-  args: {
-    variant: "normal",
-    children: "42",
-  },
-}
-
-export const WithDot: Story = {
-  args: {
-    variant: "success",
-    dot: true,
-    children: "运行中",
-  },
-}
-
-export const WithCount: Story = {
-  args: {
-    variant: "normal",
-    children: "队列",
-    count: 128,
-  },
-}
-
-export const DotMatrix: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
-      <Badge variant="normal" dot>
-        草稿
-      </Badge>
-      <Badge variant="pending" dot>
-        排队中
-      </Badge>
-      <Badge variant="warning" dot>
-        性能降级
-      </Badge>
-      <Badge variant="error" dot>
-        已离线
-      </Badge>
-      <Badge variant="success" dot>
-        运行中
-      </Badge>
-    </div>
-  ),
-}
-
-export const CountMatrix: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
-      <Badge variant="normal" count={3}>
-        待办
-      </Badge>
-      <Badge variant="warning" count={17}>
-        告警
-      </Badge>
-      <Badge variant="error" count={2}>
-        失败
-      </Badge>
-      <Badge variant="success" dot count="12/12">
-        通过
-      </Badge>
-    </div>
-  ),
-}
-
-export const AllVariants: Story = {
-  render: () => (
-    <div style={{ display: "flex", gap: 12, flexWrap: "wrap", alignItems: "center" }}>
-      <Badge variant="normal">Normal</Badge>
-      <Badge variant="pending">Pending</Badge>
-      <Badge variant="warning">Warning</Badge>
-      <Badge variant="error">Error</Badge>
-      <Badge variant="success">Success</Badge>
-    </div>
-  ),
-}
-
-export const StatusIndicators: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 12, alignItems: "flex-start" }}>
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-        <Badge variant="success">Active</Badge>
-        <span style={{ fontSize: 14, color: "var(--ow-text-2)" }}>Service is running</span>
-      </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-        <Badge variant="warning">Degraded</Badge>
-        <span style={{ fontSize: 14, color: "var(--ow-text-2)" }}>Performance issues detected</span>
-      </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-        <Badge variant="error">Down</Badge>
-        <span style={{ fontSize: 14, color: "var(--ow-text-2)" }}>Service unavailable</span>
-      </div>
-      <div style={{ display: "flex", alignItems: "center", gap: 8 }}>
-        <Badge variant="pending">Starting</Badge>
-        <span style={{ fontSize: 14, color: "var(--ow-text-2)" }}>Service is initializing</span>
-      </div>
-    </div>
-  ),
-}
-
-export const InTable: Story = {
-  render: () => (
-    <div
-      style={{
-        background: "var(--ow-surface)",
-        border: "1px solid var(--ow-border)",
-        borderRadius: 8,
-        padding: 16,
-      }}
-    >
-      <table style={{ width: "100%", borderCollapse: "collapse" }}>
-        <thead>
-          <tr style={{ borderBottom: "1px solid var(--ow-border)" }}>
-            <th
-              style={{
-                textAlign: "left",
-                padding: "8px 12px",
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--ow-text-2)",
-              }}
-            >
-              Service
-            </th>
-            <th
-              style={{
-                textAlign: "left",
-                padding: "8px 12px",
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--ow-text-2)",
-              }}
-            >
-              Status
-            </th>
-            <th
-              style={{
-                textAlign: "left",
-                padding: "8px 12px",
-                fontSize: 13,
-                fontWeight: 600,
-                color: "var(--ow-text-2)",
-              }}
-            >
-              Version
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr style={{ borderBottom: "1px solid var(--ow-border)" }}>
-            <td style={{ padding: "12px", fontSize: 14, color: "var(--ow-text)" }}>API Server</td>
-            <td style={{ padding: "12px" }}>
-              <Badge variant="success">Running</Badge>
-            </td>
-            <td style={{ padding: "12px", fontSize: 14, color: "var(--ow-text-2)" }}>v0.1.0</td>
-          </tr>
-          <tr style={{ borderBottom: "1px solid var(--ow-border)" }}>
-            <td style={{ padding: "12px", fontSize: 14, color: "var(--ow-text)" }}>Database</td>
-            <td style={{ padding: "12px" }}>
-              <Badge variant="warning">Slow</Badge>
-            </td>
-            <td style={{ padding: "12px", fontSize: 14, color: "var(--ow-text-2)" }}>v14.5</td>
-          </tr>
-          <tr style={{ borderBottom: "1px solid var(--ow-border)" }}>
-            <td style={{ padding: "12px", fontSize: 14, color: "var(--ow-text)" }}>Cache</td>
-            <td style={{ padding: "12px" }}>
-              <Badge variant="error">Offline</Badge>
-            </td>
-            <td style={{ padding: "12px", fontSize: 14, color: "var(--ow-text-2)" }}>v7.0.2</td>
-          </tr>
-          <tr>
-            <td style={{ padding: "12px", fontSize: 14, color: "var(--ow-text)" }}>Worker</td>
-            <td style={{ padding: "12px" }}>
-              <Badge variant="pending">Starting</Badge>
-            </td>
-            <td style={{ padding: "12px", fontSize: 14, color: "var(--ow-text-2)" }}>v1.9.3</td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  ),
-}
-
-export const InCard: Story = {
-  render: () => (
-    <div
-      style={{
-        background: "var(--ow-surface)",
-        border: "1px solid var(--ow-border)",
-        borderRadius: 8,
-        padding: 16,
-        maxWidth: 400,
-      }}
-    >
-      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", marginBottom: 12 }}>
-        <h3 style={{ margin: 0, fontSize: 16, fontWeight: 600, color: "var(--ow-text)" }}>Deployment Status</h3>
-        <Badge variant="success">Live</Badge>
-      </div>
-      <p style={{ margin: 0, fontSize: 14, color: "var(--ow-text-2)" }}>
-        Your application is deployed and running successfully.
-      </p>
-    </div>
-  ),
-}
-
-export const VariantComparison: Story = {
-  render: () => (
-    <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
-      <div>
-        <h4
-          style={{
-            margin: "0 0 8px 0",
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--ow-text-3)",
-            textTransform: "uppercase",
-          }}
-        >
-          Success States
-        </h4>
-        <div style={{ display: "flex", gap: 8 }}>
-          <Badge variant="success">Completed</Badge>
-          <Badge variant="success">Passed</Badge>
-          <Badge variant="success">Deployed</Badge>
-          <Badge variant="success">Active</Badge>
-        </div>
-      </div>
-      <div>
-        <h4
-          style={{
-            margin: "0 0 8px 0",
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--ow-text-3)",
-            textTransform: "uppercase",
-          }}
-        >
-          Warning States
-        </h4>
-        <div style={{ display: "flex", gap: 8 }}>
-          <Badge variant="warning">Slow</Badge>
-          <Badge variant="warning">Degraded</Badge>
-          <Badge variant="warning">Unstable</Badge>
-          <Badge variant="warning">Limited</Badge>
-        </div>
-      </div>
-      <div>
-        <h4
-          style={{
-            margin: "0 0 8px 0",
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--ow-text-3)",
-            textTransform: "uppercase",
-          }}
-        >
-          Error States
-        </h4>
-        <div style={{ display: "flex", gap: 8 }}>
-          <Badge variant="error">Failed</Badge>
-          <Badge variant="error">Error</Badge>
-          <Badge variant="error">Crashed</Badge>
-          <Badge variant="error">Offline</Badge>
-        </div>
-      </div>
-      <div>
-        <h4
-          style={{
-            margin: "0 0 8px 0",
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--ow-text-3)",
-            textTransform: "uppercase",
-          }}
-        >
-          Pending States
-        </h4>
-        <div style={{ display: "flex", gap: 8 }}>
-          <Badge variant="pending">Starting</Badge>
-          <Badge variant="pending">Loading</Badge>
-          <Badge variant="pending">Processing</Badge>
-          <Badge variant="pending">Queued</Badge>
-        </div>
-      </div>
-      <div>
-        <h4
-          style={{
-            margin: "0 0 8px 0",
-            fontSize: 12,
-            fontWeight: 600,
-            color: "var(--ow-text-3)",
-            textTransform: "uppercase",
-          }}
-        >
-          Normal States
-        </h4>
-        <div style={{ display: "flex", gap: 8 }}>
-          <Badge variant="normal">Draft</Badge>
-          <Badge variant="normal">Default</Badge>
-          <Badge variant="normal">Info</Badge>
-          <Badge variant="normal">Beta</Badge>
-        </div>
-      </div>
-    </div>
-  ),
-}

package/src/components/primitives/Badge/BadgeSource.test.mjs

@@ -1,27 +0,0 @@
-import assert from "node:assert/strict"
-import { readFile } from "node:fs/promises"
-import test from "node:test"
-
-const source = await readFile(new URL("./index.tsx", import.meta.url), "utf8")
-
-test("badge keeps the square radius-tag (6px) shape via token", () => {
-  assert.match(source, /\[border-radius:var\(--ow-radius-tag\)\]/)
-  assert.doesNotMatch(source, /rounded-md|rounded-lg|rounded-full"/)
-})
-
-test("badge variants stay on badge token families", () => {
-  for (const v of ["normal", "pending", "warning", "error", "success"]) {
-    assert.match(source, new RegExp(`bg-ow-badge-${v}-bg text-ow-badge-${v}-fg border-ow-badge-${v}-border`))
-  }
-})
-
-test("badge dot form is double-encoded: functional-color dot always beside text", () => {
-  assert.match(source, /dot\?: boolean/)
-  assert.match(source, /data-ow-part="dot"[\s\S]*?bg-current/)
-  assert.match(source, /aria-hidden="true"/)
-})
-
-test("badge count readout is mono with tabular figures", () => {
-  assert.match(source, /count\?: ReactNode/)
-  assert.match(source, /data-ow-part="count"[\s\S]*?font-\[family-name:var\(--ow-font-mono\)\] tabular-nums/)
-})