@orbit-work/ui 0.1.0

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

@@ -0,0 +1,122 @@
+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

@@ -0,0 +1,61 @@
+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

@@ -0,0 +1,93 @@
+"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

@@ -0,0 +1,376 @@
+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

@@ -0,0 +1,27 @@
+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/)
+})