@orbit-work/ui 0.1.0

package/src/components/composite/ContentRecommendation/ContentRecommendation.stories.tsx

@@ -0,0 +1,300 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { useState } from "react"
+import { Doc as Code, Server as Database, Doc as FileText, Globe, Image, Volume as Music, Sparkles } from "../Icons"
+import { ContentRecommendation } from "./index"
+
+const meta = {
+  title: "Composite/ContentRecommendation",
+  component: ContentRecommendation,
+  parameters: {
+    layout: "padded",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ContentRecommendation>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    items: [
+      { key: "1", title: "如何使用 React Hooks？" },
+      { key: "2", title: "TypeScript 最佳实践" },
+      { key: "3", title: "性能优化技巧" },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const WithDescriptions: Story = {
+  args: {
+    items: [
+      { key: "1", title: "什么是 REST API？", description: "了解 RESTful 设计原则" },
+      { key: "2", title: "GraphQL 入门", description: "查询语言和数据获取" },
+      { key: "3", title: "WebSocket 实时通信", description: "双向实时数据传输" },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const WithIcons: Story = {
+  args: {
+    items: [
+      { key: "1", title: "代码示例", description: "查看实际代码片段", icon: <Code /> },
+      { key: "2", title: "数据库设计", description: "关系型数据库最佳实践", icon: <Database /> },
+      { key: "3", title: "API 文档", description: "完整的接口说明", icon: <Globe /> },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const CustomTitle: Story = {
+  args: {
+    title: "推荐阅读",
+    items: [
+      { key: "1", title: "React 18 新特性" },
+      { key: "2", title: "Next.js 路由指南" },
+      { key: "3", title: "Tailwind CSS 实战" },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const NoTitle: Story = {
+  args: {
+    title: null,
+    items: [
+      { key: "1", title: "快速入门指南" },
+      { key: "2", title: "常见问题解答" },
+      { key: "3", title: "进阶教程" },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const WithDisabledItems: Story = {
+  args: {
+    items: [
+      { key: "1", title: "可用选项", description: "点击查看详情" },
+      { key: "2", title: "已禁用选项", description: "暂时不可用", disabled: true },
+      { key: "3", title: "另一个可用选项" },
+      { key: "4", title: "也是禁用的", disabled: true },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const SingleItem: Story = {
+  args: {
+    items: [{ key: "1", title: "唯一的推荐项", description: "查看更多信息", icon: <Sparkles /> }],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const ManyItems: Story = {
+  args: {
+    items: [
+      { key: "1", title: "JavaScript 基础", description: "变量、函数、对象", icon: <Code /> },
+      { key: "2", title: "CSS 布局", description: "Flexbox 和 Grid", icon: <Code /> },
+      { key: "3", title: "数据库查询", description: "SQL 和 NoSQL", icon: <Database /> },
+      { key: "4", title: "Web API", description: "RESTful 设计", icon: <Globe /> },
+      { key: "5", title: "图像处理", description: "格式和优化", icon: <Image /> },
+      { key: "6", title: "视频编码", description: "流媒体技术", icon: <Image /> },
+      { key: "7", title: "音频处理", description: "Web Audio API", icon: <Music /> },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const LongText: Story = {
+  args: {
+    items: [
+      {
+        key: "1",
+        title: "这是一个很长的标题用来测试文本溢出和换行行为在不同的视口宽度下的表现",
+        description: "这是一个很长的描述文本，用来展示当内容超过容器宽度时的处理方式，包括文本换行和布局调整。",
+      },
+      { key: "2", title: "正常长度的标题", description: "正常长度的描述" },
+      {
+        key: "3",
+        title: "VeryLongWordWithoutSpacesToTestWordBreakingBehaviorInDifferentScenarios",
+        description: "AnotherVeryLongWordWithoutAnySpacesOrHyphensToTestHowTheLayoutHandlesIt",
+      },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+export const Interactive: Story = {
+  render: () => {
+    const [selected, setSelected] = useState<string | null>(null)
+    const items = [
+      { key: "react", title: "React 教程", description: "学习组件化开发", icon: <Code /> },
+      { key: "typescript", title: "TypeScript 指南", description: "类型安全的 JavaScript", icon: <Code /> },
+      { key: "database", title: "数据库设计", description: "关系型和非关系型", icon: <Database /> },
+    ]
+
+    return (
+      <div>
+        <ContentRecommendation items={items} onSelect={(item) => setSelected(item.key)} />
+        {selected && (
+          <div
+            style={{
+              marginTop: 20,
+              padding: 16,
+              background: "var(--ow-surface)",
+              borderRadius: 8,
+              color: "var(--ow-text-2)",
+              fontSize: 14,
+            }}
+          >
+            已选择：<strong style={{ color: "var(--ow-text)" }}>{selected}</strong>
+          </div>
+        )}
+      </div>
+    )
+  },
+}
+
+export const MultipleGroups: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24 }}>
+      <ContentRecommendation
+        title="基础知识"
+        items={[
+          { key: "1", title: "HTML 入门", icon: <Code /> },
+          { key: "2", title: "CSS 基础", icon: <Code /> },
+          { key: "3", title: "JavaScript 语法", icon: <Code /> },
+        ]}
+        onSelect={(item) => console.log("基础:", item)}
+      />
+      <ContentRecommendation
+        title="进阶主题"
+        items={[
+          { key: "4", title: "前端框架对比", icon: <Code /> },
+          { key: "5", title: "状态管理方案", icon: <Database /> },
+          { key: "6", title: "性能优化技巧", icon: <Sparkles /> },
+        ]}
+        onSelect={(item) => console.log("进阶:", item)}
+      />
+    </div>
+  ),
+}
+
+export const ConstrainedWidth: Story = {
+  render: () => (
+    <div style={{ maxWidth: 400 }}>
+      <ContentRecommendation
+        items={[
+          { key: "1", title: "窄容器中的推荐", description: "测试在受限宽度下的表现", icon: <Sparkles /> },
+          { key: "2", title: "另一个项目", description: "查看换行效果" },
+          { key: "3", title: "第三个选项" },
+        ]}
+        onSelect={(item) => console.log("selected:", item)}
+      />
+    </div>
+  ),
+}
+
+export const WideLayout: Story = {
+  render: () => (
+    <div style={{ width: 800 }}>
+      <ContentRecommendation
+        items={[
+          { key: "1", title: "宽容器中的推荐", description: "在较宽的空间中显示", icon: <Globe /> },
+          { key: "2", title: "测试横向布局", description: "查看项目如何填充空间", icon: <Image /> },
+          { key: "3", title: "第三个项目", description: "完整的描述文本", icon: <Image /> },
+        ]}
+        onSelect={(item) => console.log("selected:", item)}
+      />
+    </div>
+  ),
+}
+
+export const WithoutCallback: Story = {
+  args: {
+    items: [
+      { key: "1", title: "无回调函数的项目", description: "点击不会触发任何操作" },
+      { key: "2", title: "另一个项目" },
+    ],
+  },
+}
+
+export const EmptyItems: Story = {
+  args: {
+    items: [],
+    title: "暂无推荐",
+  },
+}
+
+export const MixedStates: Story = {
+  args: {
+    items: [
+      { key: "1", title: "普通项目", description: "带描述的正常项目", icon: <Code /> },
+      { key: "2", title: "无描述项目", icon: <Code /> },
+      { key: "3", title: "无图标但有描述", description: "这个项目没有图标" },
+      { key: "4", title: "禁用的项目", description: "当前不可用", icon: <Database />, disabled: true },
+      { key: "5", title: "只有标题" },
+    ],
+    onSelect: (item) => console.log("selected:", item),
+  },
+}
+
+// ── DS2 §6 容器状态完整性：空 / 载 / 错 ───────────────────────────────────────
+export const EmptyState_: Story = {
+  name: "Empty",
+  args: {
+    items: [],
+  },
+}
+
+export const EmptyCustomMessage: Story = {
+  args: {
+    title: "接着聊点什么",
+    items: [],
+    emptyMessage: "这轮没有想到合适的追问，你直接说需求也行",
+  },
+}
+
+export const Loading: Story = {
+  args: {
+    items: [],
+    loading: true,
+  },
+}
+
+export const LoadingSingleRow: Story = {
+  args: {
+    items: [],
+    loading: true,
+    loadingRows: 1,
+  },
+}
+
+export const ErrorState: Story = {
+  args: {
+    items: [],
+    error: "推荐没能生成，模型这次没返回内容",
+    errorDetail: "TimeoutError: recommendation stream idle for 30s",
+  },
+}
+
+// ── §6 交互态陈列：default / hover / press / focus-visible / disabled ────────
+export const StateMatrix: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: 24, maxWidth: 460 }}>
+      <ContentRecommendation
+        title="可用（hover 与 press 走地面档 --ow-hover / --ow-press）"
+        items={[
+          { key: "a", title: "默认态", description: "鼠标移上去看 hover，按住看 press" },
+          { key: "b", title: "Tab 过来看 focus-visible", description: "2px 环 + 2px 留白缝，无光晕" },
+        ]}
+        onSelect={(item) => console.log(item)}
+      />
+      <ContentRecommendation
+        title="禁用（逐 token 上色，非统一透明度）"
+        items={[{ key: "c", title: "暂时不可选", description: "底/边/文字各取 disabled token", disabled: true }]}
+      />
+    </div>
+  ),
+}

package/src/components/composite/ContentRecommendation/ContentRecommendationSource.test.mjs

@@ -0,0 +1,48 @@
+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")
+
+// ── DS2 P5-5 归口锁 ──────────────────────────────────────────────────────────
+test("recommendation rows sit on the ground: surface + 1px border + r12, no shadow", () => {
+  assert.match(source, /bg-ow-surface border border-ow-border \[border-radius:var\(--ow-radius-card\)\]/)
+  assert.doesNotMatch(source, /shadow-/)
+  // 旧口径整段 inline style，无法承载 hover/press/focus 伪态
+  assert.doesNotMatch(source, /const itemStyle: React\.CSSProperties/)
+})
+
+test("rows carry the full §6 state set, disabled coloured token by token", () => {
+  assert.match(source, /hover:bg-\[var\(--ow-hover\)\] active:bg-\[var\(--ow-press\)\]/)
+  assert.match(source, /ow-focus-ring/)
+  assert.match(source, /disabled:bg-\[var\(--ow-disabled-bg\)\]/)
+  assert.match(source, /disabled:border-\[color:var\(--ow-disabled-border\)\]/)
+  assert.match(source, /disabled:text-\[color:var\(--ow-disabled-text\)\]/)
+  // 禁统一透明度禁用态（字面量拆开写，避免被 check-ds2 的 disabled 规则误当成违规源码）
+  assert.doesNotMatch(source, new RegExp(`disabled:${"opacity"}-`))
+})
+
+test("motion uses the single beacon easing at the 120ms hover step", () => {
+  assert.match(
+    source,
+    /\[transition-duration:var\(--ow-dur-1\)\] \[transition-timing-function:var\(--ow-ease-beacon\)\]/,
+  )
+})
+
+test("heading icon takes a neutral text tone, not the brand primary", () => {
+  assert.match(source, /<Sparkles className="h-4 w-4 text-ow-text-3" \/>/)
+  assert.doesNotMatch(source, /--ow-primary/)
+})
+
+test("container states are complete: empty / loading / error", () => {
+  assert.match(source, /import \{ EmptyState, InlineMessage \} from ["']\.\.\/\.\.\/primitives["']/)
+  assert.match(source, /import \{ Skeleton \} from ["']\.\.\/Skeleton["']/)
+  assert.match(source, /<InlineMessage variant="error"/)
+  assert.match(source, /<Skeleton key=\{i\} variant="block"/)
+  assert.match(source, /items\.length === 0 \? \(\s*<EmptyState/)
+})
+
+// R3：中性件禁信标
+test("content recommendation is a neutral component — no beacon, no yellow", () => {
+  assert.doesNotMatch(source, /--ow-beacon|--ow-accent-dot|--ow-yellow/)
+})

package/src/components/composite/ContentRecommendation/index.tsx

@@ -0,0 +1,116 @@
+import type { ReactNode } from "react"
+import { cn } from "../../../lib/utils"
+import { EmptyState, InlineMessage } from "../../primitives"
+import { ChevRight, Sparkles } from "../Icons"
+import { Skeleton } from "../Skeleton"
+
+export type ContentRecommendationItem = {
+  key: string
+  title: ReactNode
+  description?: ReactNode
+  icon?: ReactNode
+  disabled?: boolean
+}
+
+export type ContentRecommendationProps = {
+  items: ContentRecommendationItem[]
+  title?: ReactNode
+  onSelect?: (item: ContentRecommendationItem) => void
+  /** 加载态：skeleton 呼吸，禁 shimmer（§6/§9） */
+  loading?: boolean
+  /** 加载卡片数，默认 3 */
+  loadingRows?: number
+  /** 错误态：人话一句 */
+  error?: ReactNode
+  /** 错误技术详情（mono ≤2 行） */
+  errorDetail?: string
+  /** 空态一句话，默认「暂时没有可推荐的内容」 */
+  emptyMessage?: ReactNode
+  className?: string
+}
+
+/**
+ * ContentRecommendation — 聊天/工作流里的追问推荐列表（蓝图 03，DS2 P5-5 归口）。
+ *
+ * 每项是一张贴地卡行：surface ＋ 1px --ow-border ＋ r12，0 影；hover/press 走地面档
+ * --ow-hover/--ow-press，focus-visible 2px 环 ＋ 2px 缝，禁用态逐 token 上色（§5/§6）。
+ * 眉标图标色只取 text-3（§7 图标色只取 text/text-2/text-3，功能色仅状态语境）。
+ * 容器三态齐备：空 / 载 / 错。R3 中性件：无信标、无荧黄。
+ */
+export function ContentRecommendation({
+  items,
+  title = "你可能还想了解",
+  onSelect,
+  loading = false,
+  loadingRows = 3,
+  error,
+  errorDetail,
+  emptyMessage = "暂时没有可推荐的内容",
+  className = "",
+}: ContentRecommendationProps) {
+  return (
+    <section data-slot="content-recommendation" className={cn("font-[family-name:var(--ow-font-sans)]", className)}>
+      {title && (
+        <div
+          data-ow-part="heading"
+          className="mb-2 flex items-center gap-1.5 text-[length:var(--ow-fs-ui)] font-medium leading-5 text-ow-text-2"
+        >
+          <Sparkles className="h-4 w-4 text-ow-text-3" />
+          {title}
+        </div>
+      )}
+      {error ? (
+        <InlineMessage variant="error" detail={errorDetail}>
+          {error}
+        </InlineMessage>
+      ) : loading ? (
+        <div data-ow-part="loading" className="grid gap-2" role="status" aria-label="正在生成推荐">
+          {Array.from({ length: loadingRows }, (_, i) => (
+            <Skeleton key={i} variant="block" height={44} radius="var(--ow-radius-card)" />
+          ))}
+        </div>
+      ) : items.length === 0 ? (
+        <EmptyState message={emptyMessage} size="sm" />
+      ) : (
+        <div data-ow-part="list" className="grid gap-2">
+          {items.map((item) => (
+            <button
+              key={item.key}
+              data-ow-part="row"
+              type="button"
+              disabled={item.disabled}
+              onClick={() => onSelect?.(item)}
+              className={cn(
+                "ow-focus-ring box-border flex min-h-[var(--ow-h-lg)] w-full items-center gap-2.5 px-3 py-[9px] text-left",
+                "bg-ow-surface border border-ow-border [border-radius:var(--ow-radius-card)] text-ow-text",
+                "cursor-pointer transition-colors [transition-duration:var(--ow-dur-1)] [transition-timing-function:var(--ow-ease-beacon)]",
+                "hover:bg-[var(--ow-hover)] active:bg-[var(--ow-press)]",
+                // §6 禁统一透明度：禁用态逐 token 上色
+                "disabled:cursor-not-allowed disabled:bg-[var(--ow-disabled-bg)] disabled:border-[color:var(--ow-disabled-border)]",
+                "disabled:text-[color:var(--ow-disabled-text)] disabled:hover:bg-[var(--ow-disabled-bg)]",
+              )}
+            >
+              {item.icon && (
+                <span
+                  data-ow-part="icon"
+                  className="inline-flex h-5 w-5 shrink-0 items-center justify-center text-ow-text-2"
+                >
+                  {item.icon}
+                </span>
+              )}
+              <span className="flex min-w-0 flex-1 flex-col">
+                <span className="text-[length:var(--ow-fs-body)] leading-5">{item.title}</span>
+                {item.description && (
+                  <span className="text-[length:var(--ow-fs-caption)] leading-[18px] text-ow-text-3">
+                    {item.description}
+                  </span>
+                )}
+              </span>
+              <ChevRight className="h-4 w-4 shrink-0 text-ow-text-3" />
+            </button>
+          ))}
+        </div>
+      )}
+    </section>
+  )
+}

package/src/components/composite/ContextChip/ContextChip.stories.tsx

@@ -0,0 +1,123 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { Doc, Folder, Image } from "../Icons"
+import { ContextChip } from "./index"
+
+// ContextChip 已并入 primitives/Chip（DS 2.0）；此处 stories 验证薄兼容层行为。
+const meta = {
+  title: "Composite/ContextChip (deprecated)",
+  component: ContextChip,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+} satisfies Meta<typeof ContextChip>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const WithIcon: Story = {
+  args: {
+    icon: <Doc />,
+    label: "README.md",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const WithAvatar: Story = {
+  args: {
+    /* 头像底走现存的 --ow-data-* 系列色，字色走实底档 --ow-on-fill——
+       原来引的 --ow-sky-500 是 V1 调色板残留（全仓无定义，头像整个透明），字色是字面 white。 */
+    avatar: (
+      <div
+        style={{
+          width: 20,
+          height: 20,
+          borderRadius: "var(--ow-radius-pill)",
+          background: "var(--ow-data-1)",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center",
+          fontSize: 10,
+          color: "var(--ow-on-fill)",
+        }}
+      >
+        JD
+      </div>
+    ),
+    label: "John Doe",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const WithDescription: Story = {
+  args: {
+    icon: <Folder />,
+    label: "src/components",
+    description: "React component library",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const WithTooltip: Story = {
+  args: {
+    icon: <Doc />,
+    label: "config.ts",
+    tooltip: "Application configuration file",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const NotRemovable: Story = {
+  args: {
+    icon: <Doc />,
+    label: "locked-context.md",
+  },
+}
+
+export const LongLabel: Story = {
+  args: {
+    icon: <Doc />,
+    label: "very-long-filename-that-might-overflow-the-chip-container.tsx",
+    onRemove: () => console.log("remove"),
+  },
+}
+
+export const CustomRemoveLabel: Story = {
+  args: {
+    icon: <Image />,
+    label: "banner.png",
+    removeLabel: "Remove image",
+    onRemove: () => console.log("remove banner"),
+  },
+}
+
+export const MultipleChips: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: 8, flexWrap: "wrap", maxWidth: 400 }}>
+      <ContextChip icon={<Doc />} label="App.tsx" onRemove={() => console.log("remove App")} />
+      <ContextChip icon={<Doc />} label="index.css" onRemove={() => console.log("remove index")} />
+      <ContextChip icon={<Folder />} label="components/" onRemove={() => console.log("remove components")} />
+      <ContextChip
+        avatar={
+          <div
+            style={{
+              width: 20,
+              height: 20,
+              borderRadius: "var(--ow-radius-pill)",
+              background: "var(--ow-data-2)",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              fontSize: 10,
+              color: "var(--ow-on-fill)",
+            }}
+          >
+            AI
+          </div>
+        }
+        label="Claude Mode"
+        onRemove={() => console.log("remove mode")}
+      />
+    </div>
+  ),
+}

package/src/components/composite/ContextChip/ContextChipSource.test.mjs

@@ -0,0 +1,24 @@
+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("context chip is a thin deprecated compat layer over primitives/Chip", () => {
+  assert.match(source, /import \{ Chip \} from ['"]\.\.\/\.\.\/primitives\/Chip['"]/)
+  assert.match(source, /@deprecated/)
+  assert.match(source, /export type ContextChipProps = \{/)
+  assert.match(source, /icon\?: ReactNode/)
+  assert.match(source, /avatar\?: ReactNode/)
+  assert.match(source, /description\?: string/)
+  assert.match(source, /tooltip\?: ReactNode/)
+  assert.match(source, /removeLabel\?: string/)
+  assert.match(source, /<Chip data-slot="context-chip" removeMode="hover" \{\.\.\.props\} \/>/)
+})
+
+test("context chip keeps hover-revealed removal via Chip removeMode", () => {
+  assert.match(source, /removeMode="hover"/)
+  // 兼容层内不再持有自绘 chip 结构
+  assert.doesNotMatch(source, /data-ow-part="remove"/)
+  assert.doesNotMatch(source, /border-ow-border-strong/)
+})

package/src/components/composite/ContextChip/index.tsx

@@ -0,0 +1,25 @@
+"use client"
+
+import type { ReactNode } from "react"
+import { Chip } from "../../primitives/Chip"
+
+export type ContextChipProps = {
+  icon?: ReactNode
+  avatar?: ReactNode
+  label: ReactNode
+  description?: string
+  onRemove?: () => void
+  className?: string
+  tooltip?: ReactNode
+  removeLabel?: string
+}
+
+/**
+ * Compact removable chip for selected composer context or mode state.
+ *
+ * @deprecated DS 2.0 起并入 `Chip`（primitives/Chip，胶囊 999 归口件）。
+ * 本导出为薄兼容层，仅转发 props（删除钮保持 hover/focus 才显）；新代码请直接使用 `Chip`。
+ */
+export function ContextChip(props: ContextChipProps) {
+  return <Chip data-slot="context-chip" removeMode="hover" {...props} />
+}

package/src/components/composite/ContextUsageIndicatorView/ContextUsageIndicatorSizeSource.test.mjs

@@ -0,0 +1,15 @@
+import assert from "node:assert/strict"
+import { readFile } from "node:fs/promises"
+import test from "node:test"
+
+const css = await readFile(new URL("../../../../styles/desktop-surfaces.css", import.meta.url), "utf8")
+
+// W-R2 合并：研发这条断言原本要求触发器是 28×28 的方形命中区。DS2 侧这枚指示器
+// 除了弧还并排出一段读数（index.tsx: `<ContextUsage size={18} showReadout …>`），
+// 写死 28 宽会把读数裁掉——所以高仍锁 §7 的 28（--ow-h-sm 档），宽由内容决定、
+// 左右各留 5 的内距。18px 的图标尺寸照研发这版收下。
+test("context usage indicator keeps its hit target while rendering an 18px icon", () => {
+  assert.match(css, /\.context-usage-indicator__trigger \{[^}]*height: 28px;[^}]*padding: 0 5px;/s)
+  assert.doesNotMatch(css, /\.context-usage-indicator__trigger \{[^}]*width: 28px;/s)
+  assert.match(css, /\.context-usage-indicator__trigger svg \{[^}]*width: 18px;[^}]*height: 18px;/s)
+})