@godxjp/ui 27.3.1 → 27.5.0

package/docs/general/icon.tsx

@@ -0,0 +1,215 @@
+import {
+  ArrowUpRight,
+  Check,
+  Download,
+  FileWarning,
+  Globe,
+  Lock,
+  ShieldCheck,
+  Smartphone,
+  Unlock,
+} from "lucide-react";
+
+import { Card, CardContent, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Heading, Icon, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer, Separator } from "@godxjp/ui/layout";
+
+/**
+ * Icon · a glyph on the `--icon-size-*` scale, and the only supported way to draw a standalone one.
+ *
+ * A lucide component ships `width="24" height="24"`. Four rules in this library override that
+ * (`.ui-button svg`, the menu row, the topbar cell, the ListRow leading slot) and nothing else
+ * does · so a glyph in a `Text`, a table cell or an `<a>` draws at 24px beside 14px type, 1.7× the
+ * text it annotates. `docs/CONSUMER-RULES.md` §3/§8 forbid the `size-4` / `w-[16px]` escape, which
+ * left a consumer with 38 oversized glyphs and no supported fix (gh#712).
+ *
+ * `Icon` renders ONTO the glyph · the sized element is the `<svg>` itself · so it composes
+ * anywhere a bare glyph does and adds no box to the row. Decorative (`aria-hidden`) by default;
+ * `label` switches it to `role="img"` with that accessible name.
+ *
+ * Composed only from real @godxjp/ui components. All copy is consumer-owned and localized.
+ */
+
+/** The nine steps, with the px each resolves to at a 16px root · docs/TOKENS.md. */
+const SIZES = [
+  { size: "2xs", px: "10px", note: "アバターの在席ドット" },
+  { size: "xs", px: "12px", note: "表の並べ替えカーソル" },
+  { size: "sm", px: "14px", note: 'size="sm" のコントロール' },
+  { size: "md", px: "16px", note: "既定のアイコン段" },
+  { size: "lg", px: "20px", note: "アラート・ランチャー" },
+  { size: "xl", px: "24px", note: "アップロードタイル" },
+  { size: "2xl", px: "36px", note: "StatCard のメダリオン" },
+  { size: "3xl", px: "40px", note: "ドロップゾーン" },
+  { size: "4xl", px: "48px", note: "空状態の枠" },
+] as const;
+
+/** `tone` shares Text's vocabulary · one table for the glyph and the label beside it. */
+const TONES = [
+  { tone: "default", label: "default · 前景色" },
+  { tone: "muted", label: "muted · 補足" },
+  { tone: "primary", label: "primary · 主要導線" },
+  { tone: "success", label: "success · 有効" },
+  { tone: "warning", label: "warning · 要確認" },
+  { tone: "destructive", label: "destructive · 失敗" },
+  { tone: "info", label: "info · 情報" },
+  { tone: "inherit", label: "inherit · 面の色を継承" },
+] as const;
+
+/** The real screen: a security settings list whose status is carried by a glyph beside 14px text. */
+const SESSIONS = [
+  {
+    id: "s1",
+    device: "MacBook Pro · 東京",
+    detail: "2026-09-17 09:12 · 192.0.2.24",
+    secure: true,
+  },
+  {
+    id: "s2",
+    device: "iPhone 15 · 大阪",
+    detail: "2026-09-16 21:40 · 198.51.100.7",
+    secure: true,
+  },
+  {
+    id: "s3",
+    device: "Windows PC · 未確認の拠点",
+    detail: "2026-09-15 02:05 · 203.0.113.19",
+    secure: false,
+  },
+];
+
+export default function Demo() {
+  return (
+    <PageContainer
+      title="Icon"
+      subtitle='--icon-size-* の9段にグリフを載せる唯一の方法 · 既定は装飾（aria-hidden）· label で role="img"'
+    >
+      <Flex direction="col" gap="lg">
+        {/* ── The real screen · the defect this primitive exists for: a status glyph inline with
+             14px body text, where no context rule would ever have sized it. ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>サインイン中の端末</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {SESSIONS.map((session) => (
+                <Flex key={session.id} direction="row" gap="sm" align="center" justify="between">
+                  <Flex direction="row" gap="sm" align="center">
+                    <Icon
+                      as={session.secure ? ShieldCheck : FileWarning}
+                      size="lg"
+                      tone={session.secure ? "success" : "warning"}
+                      label={session.secure ? "保護された接続" : "確認が必要な接続"}
+                    />
+                    <Flex direction="col">
+                      <Text weight="medium">{session.device}</Text>
+                      {/* A decorative glyph INSIDE 14px text · `sm` puts it on the type's own step. */}
+                      <Text size="xs" tone="muted">
+                        <Icon as={Globe} size="xs" /> {session.detail}
+                      </Text>
+                    </Flex>
+                  </Flex>
+                  <Button variant="outline" size="sm">
+                    <Icon as={session.secure ? Lock : Unlock} size="sm" />
+                    サインアウト
+                  </Button>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── Every step of the scale ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>size · 9段のアイコンスケール</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {SIZES.map((step) => (
+                <Flex key={step.size} direction="row" gap="md" align="center">
+                  <Flex direction="row" gap="sm" align="center">
+                    <Icon as={Smartphone} size={step.size} />
+                  </Flex>
+                  <Text size="sm" mono>
+                    {step.size}
+                  </Text>
+                  <Text size="sm" tone="muted" mono>
+                    {step.px}
+                  </Text>
+                  <Text size="sm" tone="muted">
+                    {step.note}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── Every tone, beside the Text that shares the vocabulary ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>tone · Text と同じ意味の語彙</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="sm">
+              {TONES.map((entry) => (
+                <Flex key={entry.tone} direction="row" gap="sm" align="center">
+                  <Icon as={Check} size="md" tone={entry.tone} />
+                  <Text size="sm" tone={entry.tone}>
+                    {entry.label}
+                  </Text>
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* ── Where it composes · inside Text, inside a Button, standalone in a link ── */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>合成 · Text の中・Button の中・単独</CardTitle>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="xs">
+                <Heading level={3}>Text の中</Heading>
+                <Text size="sm">
+                  請求書は <Icon as={Lock} size="sm" tone="muted" /> 暗号化されて保管されます。
+                </Text>
+              </Flex>
+
+              <Separator />
+
+              <Flex direction="col" gap="xs">
+                <Heading level={3}>Button の中 · 明示した段が Button の既定に勝つ</Heading>
+                <Flex direction="row" gap="sm" align="center">
+                  <Button size="sm">
+                    <Icon as={Download} size="sm" />
+                    書き出す
+                  </Button>
+                  <Button variant="outline">
+                    <Icon as={Download} size="lg" />
+                    大きめのグリフ
+                  </Button>
+                </Flex>
+              </Flex>
+
+              <Separator />
+
+              <Flex direction="col" gap="xs">
+                <Heading level={3}>単独 · 名前を持つグリフ</Heading>
+                <Flex direction="row" gap="sm" align="center">
+                  <Text as="a" href="#icon-standalone" size="sm" tone="primary">
+                    監査ログを開く <Icon as={ArrowUpRight} size="sm" />
+                  </Text>
+                  <Icon as={ShieldCheck} size="md" tone="success" label="二要素認証は有効です" />
+                </Flex>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/docs/layout/flex.tsx

@@ -5,6 +5,7 @@ import {
   CardDescription,
   CardHeader,
   CardTitle,
+  ListRow,
 } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -309,6 +310,64 @@ export default function Demo() {
             </Flex>
           </CardContent>
         </Card>
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>marker=&quot;none&quot; · 装飾のない意味的リスト</CardTitle>
+            <CardDescription>
+              as=&quot;ul&quot; は既定で中黒と字下げが付きます。設定メニューのような「行の一覧」では
+              marker=&quot;none&quot; を指定すると、ul と li の意味づけと gap トークンは残したまま、
+              中黒も字下げも消えます。行は ListRow as=&quot;li&quot;
+              で、区切り線は行が自分で描きます。
+            </CardDescription>
+          </CardHeader>
+          <CardContent flush>
+            <Flex id="semantic-list" as="ul" marker="none" direction="col" gap="none">
+              <ListRow
+                as="li"
+                title="二要素認証"
+                description="認証アプリ · 有効"
+                trailing={
+                  <Button size="xs" variant="outline">
+                    管理
+                  </Button>
+                }
+              />
+              <ListRow
+                as="li"
+                title="パスキー"
+                description="2 件登録済み"
+                trailing={
+                  <Button size="xs" variant="outline">
+                    管理
+                  </Button>
+                }
+              />
+              <ListRow
+                as="li"
+                title="回復コード"
+                description="未発行"
+                trailing={
+                  <Button size="xs" variant="outline">
+                    発行
+                  </Button>
+                }
+              />
+            </Flex>
+          </CardContent>
+          <CardContent>
+            <Flex id="semantic-list-gap" as="ul" marker="none" gap="sm" wrap>
+              <Flex as="li">
+                <Badge variant="outline">監査ログ</Badge>
+              </Flex>
+              <Flex as="li">
+                <Badge variant="outline">IP 制限</Badge>
+              </Flex>
+              <Flex as="li">
+                <Badge variant="outline">SSO</Badge>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
         <Card>
           <CardHeader>
             <CardTitle level={2}>軽い強調と行アクション</CardTitle>

package/docs/layout/topbar-item.tsx

@@ -9,7 +9,7 @@ import {
   CardHeader,
   CardTitle,
 } from "@godxjp/ui/data-display";
-import { Button, Text } from "@godxjp/ui/general";
+import { Button, Icon, Text } from "@godxjp/ui/general";
 import { AppShell, Flex, PageContainer, Sidebar, Topbar, TopbarItem } from "@godxjp/ui/layout";
 import type { SidebarSectionProp } from "@godxjp/ui/layout";
 import {
@@ -22,6 +22,7 @@ import {
 } from "@godxjp/ui/navigation";
 import {
   Bell,
+  Building2,
   FileText,
   LayoutDashboard,
   LogOut,
@@ -150,6 +151,33 @@ export default function Demo() {
               />
             </CardContent>
           </Card>
+
+          <Card>
+            <CardHeader>
+              <CardTitle level={2}>包んだグリフ（icon スロットと Icon）</CardTitle>
+              <CardDescription>
+                `.ui-topbar-item &gt; svg` は直接の子だけを見ます。ブレークポイントで隠すために
+                グリフを包むと、その規則は届かず lucide 既定の 24px で描かれます（390px
+                のセルで実測）。 セル自身が持つ `icon` スロットに渡すか、包むなら `Icon`
+                を使えば、どちらもバーの段 （--topbar-icon-size）に載ります。
+              </CardDescription>
+            </CardHeader>
+            <CardContent>
+              <Topbar
+                start={
+                  <>
+                    <TopbarItem icon={<Building2 aria-hidden="true" />}>経理部</TopbarItem>
+                    <TopbarItem aria-label="拠点を切り替える">
+                      <Flex hideBelow="sm">
+                        <Icon as={Building2} size="md" />
+                      </Flex>
+                      東京本社
+                    </TopbarItem>
+                  </>
+                }
+              />
+            </CardContent>
+          </Card>
         </Flex>
       </PageContainer>
     </AppShell>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "27.3.1",
-  "godxUiMcp": "27.3.1",
+  "version": "27.5.0",
+  "godxUiMcp": "27.5.0",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",

package/scripts/consumer-rule.md

@@ -98,23 +98,24 @@ Slack thì đặt lại **một dòng**, không fork `.app-nav-rail`.
 Hỏi MCP `godxjp-ui` (`search_components`, `get_component`). Đo được trong một
 ngày: năm thứ cần đều ĐÃ CÓ và vẫn bị dựng lại bằng thứ khác —
 
-| Cần                                             | Đã có                                                                              |
-| ----------------------------------------------- | ---------------------------------------------------------------------------------- |
-| đường kẻ chạm mép Card                          | `<CardContent flush>`                                                              |
-| header có kẻ khi thân là danh sách flush        | `<CardHeader banded>`                                                              |
-| một hàng LÀ liên kết (thay cho nút rời)         | `<ListRow asChild>`                                                                |
-| kẻ ô từng ngày trong lịch                       | `<Calendar bordered>`                                                              |
-| dải giữa hai vùng, tự kẻ theo VỊ TRÍ            | `<CardBar>` (`border` để ép khi xếp chồng)                                         |
-| chip "điều kiện đang bật" có dấu × để bỏ        | `<Badge onRemove>` — KHÔNG phải `TagInput`                                         |
-| dải tab nằm TRONG đầu Card                      | `<Card tabList activeTabKey onTabChange>`                                          |
-| tiêu đề / đoạn văn / liên kết trong văn bản     | `<Title>` · `<Paragraph>` · `<Link>` (`Text` 33 prop)                              |
-| nút nổi góc màn (quay lên đầu, hành động nhanh) | `<FloatButton>`                                                                    |
-| khung xương của một FORM khi đang tải           | `<SkeletonForm>`                                                                   |
-| ô màu chỉ để xem, màu do NGƯỜI DÙNG chọn        | `<Swatch>`                                                                         |
-| ảnh đại diện của một tệp / bản xem trước        | `<Thumbnail>`                                                                      |
-| danh sách "có gì trong gói này"                 | `<FeatureList>`                                                                    |
-| panel kéo giãn được (chia đôi màn)              | `<DraggablePanel>`                                                                 |
-| màn hội thoại AI                                | `<Welcome>` · `<Conversations>` · `<Attachments>` · `<ThoughtChain>` · `<Actions>` |
+| Cần                                                              | Đã có                                                                              |
+| ---------------------------------------------------------------- | ---------------------------------------------------------------------------------- |
+| đường kẻ chạm mép Card                                           | `<CardContent flush>`                                                              |
+| header có kẻ khi thân là danh sách flush                         | `<CardHeader banded>`                                                              |
+| một hàng LÀ liên kết (thay cho nút rời)                          | `<ListRow asChild>`                                                                |
+| kẻ ô từng ngày trong lịch                                        | `<Calendar bordered>`                                                              |
+| dải giữa hai vùng, tự kẻ theo VỊ TRÍ                             | `<CardBar>` (`border` để ép khi xếp chồng)                                         |
+| chip "điều kiện đang bật" có dấu × để bỏ                         | `<Badge onRemove>` — KHÔNG phải `TagInput`                                         |
+| dải tab nằm TRONG đầu Card                                       | `<Card tabList activeTabKey onTabChange>`                                          |
+| tiêu đề / đoạn văn / liên kết trong văn bản                      | `<Title>` · `<Paragraph>` · `<Link>` (`Text` 33 prop)                              |
+| nút nổi góc màn (quay lên đầu, hành động nhanh)                  | `<FloatButton>`                                                                    |
+| khung xương của một FORM khi đang tải                            | `<SkeletonForm>`                                                                   |
+| ô màu chỉ để xem, màu do NGƯỜI DÙNG chọn                         | `<Swatch>`                                                                         |
+| ảnh đại diện của một tệp / bản xem trước                         | `<Thumbnail>`                                                                      |
+| danh sách "có gì trong gói này"                                  | `<FeatureList>`                                                                    |
+| panel kéo giãn được (chia đôi màn)                               | `<DraggablePanel>`                                                                 |
+| màn hội thoại AI                                                 | `<Welcome>` · `<Conversations>` · `<Attachments>` · `<ThoughtChain>` · `<Actions>` |
+| một glyph lucide đứng một mình (trong `Text`, ô bảng, thẻ `<a>`) | `<Icon as={Lock} size="sm">` — KHÔNG phải `size-4` hay `size={16}`                 |
 
 Lỗi không phải "đoán sai tên prop" mà là **cho rằng nó không tồn tại nên không
 hỏi**.

package/scripts/ui-audit.mjs

@@ -590,6 +590,68 @@ const RULES = [
     message:
       "No em-dash (—) in product copy. Use a middot `·` for JP/EN label pairs, or restructure into two calm sentences. Keep copy factual and quiet.",
   },
+  {
+    id: "lucide-icon-needs-size",
+    replacement: '<Icon as={Glyph} size="sm" />',
+    // CONSUMER scope, like the other rules about what an app may write: inside this package a bare
+    // glyph is normal — Tree, Pagination, Attachments and a dozen others size their own svg from
+    // their own stylesheet, which is exactly the capability a consumer does not have. Measured:
+    // 90 findings here with the scope off, every one of them a component sizing its own glyph.
+    scope: "consumer",
+    matches: lucideGlyphMatches,
+    spansElement: true,
+    severity: "warn",
+    /*
+     * A lucide element rendered where NOTHING will size it.
+     *
+     * A lucide component ships `width="24" height="24"`, and exactly four rules in this library
+     * override that: `.ui-button svg`, `.ui-dropdown-menu-item > svg`, `.ui-topbar-item svg` and
+     * `[data-slot="list-row-leading"] > svg`. Outside them — in a `Text`, a table cell, an `<a>`,
+     * a `Flex` — the glyph draws at 24px beside 14px type. It is the one defect class that is
+     * INVISIBLE in review: the JSX is correct, the import is correct, and only the screen is
+     * wrong. A consumer swept one app and found 38 (gh#712).
+     *
+     * `warn`, not `error`, and deliberately so: the exemptions below are lexical, so a glyph
+     * inside a consumer's own wrapper component that happens to size it would be reported. The
+     * fix is cheap (`<Icon as={Lock} size="sm" />`) and the finding is worth reading even then.
+     */
+    standard: "WCAG 2.2 SC 1.4.4 · @godxjp/ui icon scale (docs/TOKENS.md, --icon-size-*)",
+    message:
+      'A lucide glyph with nothing to size it renders at its intrinsic 24px — 1.7× a 14px label. Put it on the scale with the primitive: <Icon as={Lock} size="sm" tone="muted" />, which is aria-hidden by default. A size-4 / w-[16px] utility is what docs/CONSUMER-RULES.md §3/§8 forbid, and size={16} hard-codes a number the theme owns.',
+  },
+  {
+    id: "no-hand-rolled-list",
+    replacement: 'Flex as="ul" marker="none" + ListRow as="li"',
+    scope: "consumer",
+    severity: "warn",
+    spansElement: true,
+    /*
+     * A list built by hand instead of by the primitives, in the three shapes a consumer reaches for:
+     *
+     *   1. a raw `<ul>`/`<ol>` — it cannot carry the gap token, so the spacing goes back into
+     *      utilities, and until `marker="none"` (gh#714) it was the only way to get a list without
+     *      a bullet and a --space-5 indent. It no longer is.
+     *   2. `role="list"` / `role="listitem"` on a div — ARIA re-describing markup that HTML already
+     *      has a element for (WAI-ARIA 1.2 §Using ARIA in HTML: prefer the native element).
+     *   3. a `<li>` (or any wrapper) around a library ROW instead of BEING it. This is the one that
+     *      cost real money: `[data-slot="list-row"]:not(:last-child)` draws the divider, so a row
+     *      alone in a wrapper of its own is always `:last-child` and the rule never matches — a
+     *      consumer's settings menu and dashboard lost EVERY divider, silently, and code review saw
+     *      nothing. `ListRow` has `as="li"` (and `as` + `asChild` for a row of links) precisely so
+     *      the rows stay siblings.
+     *
+     * WARN, not error, and the measurement says why: of 15 `role="list"` wrappers one consumer
+     * audited, 3 survived as deliberate exceptions (a drag-and-drop Kanban column of Cards, two
+     * evidence lists inside a TableCell). A rule wrong one time in five is a rule that gets
+     * silenced wholesale at `error`; at `warn` the three exceptions take an
+     * `ui-audit-disable-line` that states the reason and the other twelve still get fixed.
+     */
+    test: /<(?:ul|ol)(?=[\s/>])[^\n]*|\brole=["'](?:list|listitem)["']|<li(?=[\s>])(?:(?!<\/li>)[\s\S]){0,400}?<(?:ListRow|Card)(?=[\s/>])/g,
+    standard:
+      "WAI-ARIA 1.2 (list / listitem) · HTML Living Standard (ul/ol/li) · WCAG 2.2 SC 1.3.1",
+    message:
+      'Hand-rolled list — a raw <ul>/<ol>, an ARIA role="list"/"listitem", or a <li> wrapped around a library row. Build it from <Flex as="ul" marker="none"> (keeps the element, the <li> semantics and the gap token; no bullet, no indent) with <ListRow as="li"> as the rows. A row inside a wrapper of its own is an only child, so its :not(:last-child) divider never matches and every divider disappears silently (docs/CONSUMER-RULES.md §4, gh#714).',
+  },
 ];
 
 /**
@@ -946,6 +1008,72 @@ function insideStringLiteral(source, index) {
   return quote !== "";
 }
 
+/**
+ * The LOCAL names bound to `lucide-react` icons in this file — `import { Lock, Pencil as Edit }`
+ * gives `Lock` and `Edit`. Reading the import rather than matching "any PascalCase tag" is what
+ * keeps the rule from reporting every component in the file.
+ */
+function lucideLocalNames(source) {
+  const names = new Set();
+  for (const imp of source.matchAll(
+    /import\s+(?:type\s+)?\{([^}]*)\}\s*from\s*["']lucide-react["']/g,
+  )) {
+    for (const spec of imp[1].split(",")) {
+      const local =
+        spec
+          .trim()
+          .split(/\s+as\s+/)
+          .pop()
+          ?.trim() ?? "";
+      if (/^[A-Z][A-Za-z0-9]*$/.test(local)) names.add(local);
+    }
+  }
+  return names;
+}
+
+/**
+ * Character ranges in which a glyph is SOMEBODY ELSE'S to size, so a glyph inside one is quiet:
+ *
+ *  1. the body of a component whose CSS sizes its own `svg` — the four rules named on the rule
+ *     below, which are the only four that exist;
+ *  2. the value of a slot PROP (`icon={<Lock />}`, `leading={<Lock />}`). A component handed a
+ *     glyph through a named slot owns the metric for that slot — that is what a slot IS — and
+ *     reporting the call site would push consumers away from the slot and toward a bare glyph.
+ */
+function iconSizingRanges(source) {
+  const ranges = [];
+  for (const m of source.matchAll(
+    /<(Button|DropdownMenuItem|DropdownMenuCheckboxItem|DropdownMenuRadioItem|TopbarItem)\b[\s\S]*?<\/\1>/g,
+  )) {
+    ranges.push([m.index, m.index + m[0].length]);
+  }
+  for (const m of source.matchAll(
+    /\b(?:icon|leading|trailing|mark|indicator|avatar|prefix|suffix|addonBefore|addonAfter)\s*=\s*\{/g,
+  )) {
+    const open = m.index + m[0].length - 1;
+    const close = matchBracket(source, open);
+    ranges.push([open, close < 0 ? source.length : close + 1]);
+  }
+  return ranges;
+}
+
+/** A lucide element that no rule, no slot and no author-supplied size will ever measure. */
+function* lucideGlyphMatches(source) {
+  const names = lucideLocalNames(source);
+  if (names.size === 0) return;
+  const ranges = iconSizingRanges(source);
+  for (const m of source.matchAll(new RegExp(`<(?:${[...names].join("|")})(?=[\\s/>])`, "g"))) {
+    if (insideStringLiteral(source, m.index)) continue;
+    if (ranges.some(([from, to]) => m.index > from && m.index < to)) continue;
+    const end = jsxOpeningEnd(source, m.index);
+    if (end >= source.length) continue;
+    // An explicit size, or ANY className — a class list is the author saying something about this
+    // element's box, and second-guessing which utility sizes it is how a warning becomes noise.
+    if (/\s(?:size|width|height|className|style)\s*=/.test(source.slice(m.index, end))) continue;
+    yield { 0: source.slice(m.index, end + 1), index: m.index };
+  }
+}
+
 /** Match real JSX text after a balanced opening tag, including props with comparisons. */
 function* currencyMatches(source) {
   for (const opening of source.matchAll(/<(?:[A-Za-z][\w.:]*\b|(?=>))/g)) {