@godxjp/ui 28.0.0 → 28.2.0

package/docs/navigation/card-tabs.tsx

@@ -0,0 +1,344 @@
+import { useState } from "react";
+
+import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import { Button, Text } from "@godxjp/ui/general";
+import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { Tabs } from "@godxjp/ui/navigation";
+
+/**
+ * CARD TABS — the strip and its panel as ONE object (gh#762).
+ *
+ * The screen this page is built from is the one the issue draws in ASCII: a saved-view strip over
+ * a list, antd `type="editable-card"` shaped — closable views, a `+`, an action parked on the
+ * trailing edge of the bar, and a body that the open tab opens INTO rather than sits above.
+ *
+ * Everything here is `Tabs` with documented props. There is no page-local CSS and no wrapper box
+ * around the panel: the point of `bodied` is that the consumer no longer has to guess which box
+ * to put underneath, because all three guesses were wrong (`<Card>` added a second 1px border at
+ * a 9.708px radius over an 8px gap; `<Card variant="borderless">` and no box at all left the same
+ * 8px gap). Measured after: 0px of gap, one continuous 1px line, and no line at all across the
+ * active tab.
+ */
+
+type SavedView = {
+  value: string;
+  label: string;
+  count: number;
+  /** antd `Tab.closable` — 「すべての課題」 is the system view and cannot be deleted. */
+  closable?: boolean;
+  rows: string[];
+};
+
+const INITIAL_VIEWS: SavedView[] = [
+  {
+    value: "all",
+    label: "すべての課題",
+    count: 340,
+    closable: false,
+    rows: [
+      "TASK-1042 · 請求書の様式を更新",
+      "TASK-1041 · 監査ログの保存期間",
+      "TASK-1038 · 権限表の棚卸",
+    ],
+  },
+  {
+    value: "mine",
+    label: "自分の担当",
+    count: 12,
+    rows: ["TASK-1042 · 請求書の様式を更新", "TASK-1029 · 締め処理の手順書"],
+  },
+  {
+    value: "review",
+    label: "レビュー待ち",
+    count: 0,
+    rows: [],
+  },
+];
+
+/** The list body a saved view opens into — a real panel, not a placeholder paragraph. */
+function ViewBody({ view }: { view: SavedView }) {
+  if (view.rows.length === 0) {
+    return (
+      <Text as="p" tone="muted">
+        この条件に一致する課題はありません。
+      </Text>
+    );
+  }
+  return (
+    <Flex direction="col" gap="sm">
+      {view.rows.map((row) => (
+        <Text key={row} as="p">
+          {row}
+        </Text>
+      ))}
+    </Flex>
+  );
+}
+
+const PLACEMENT_ITEMS = [
+  { value: "summary", label: "サマリ", content: <Text as="p">当月の売上合計 ¥4,820,000</Text> },
+  { value: "detail", label: "明細", content: <Text as="p">明細 24 件 · 未承認 2 件</Text> },
+  { value: "audit", label: "監査", content: <Text as="p">監査ログ 96 件</Text> },
+];
+
+const COUNT_ITEMS = [
+  {
+    value: "open",
+    label: "未対応",
+    count: 12,
+    countLabel: "件の課題",
+    content: <Text as="p">未対応 12 件</Text>,
+  },
+  {
+    value: "doing",
+    label: "対応中",
+    count: 340,
+    overflowCount: 999,
+    countLabel: "件の課題",
+    content: <Text as="p">対応中 340 件</Text>,
+  },
+  {
+    value: "capped",
+    label: "全期間",
+    count: 1280,
+    countLabel: "件の課題",
+    content: <Text as="p">全期間 1,280 件 · 既定の overflowCount は 99</Text>,
+  },
+  {
+    value: "empty",
+    label: "保留",
+    count: 0,
+    countLabel: "件の課題",
+    content: <Text as="p">保留 0 件</Text>,
+  },
+  {
+    value: "hidden-zero",
+    label: "却下",
+    count: 0,
+    showZero: false,
+    countLabel: "件の課題",
+    content: <Text as="p">showZero={"{false}"} なので 0 のピルは描かれない</Text>,
+  },
+  {
+    value: "off",
+    label: "アーカイブ",
+    disabled: true,
+    count: 7,
+    countLabel: "件の課題",
+    content: <Text as="p">アーカイブ</Text>,
+  },
+];
+
+export default function Demo() {
+  const [views, setViews] = useState(INITIAL_VIEWS);
+  const [activeView, setActiveView] = useState("all");
+  const [nextView, setNextView] = useState(1);
+
+  return (
+    <PageContainer
+      title="カードタブ"
+      subtitle="ストリップとパネルをひとつの箱にする bodied と、タブの件数バッジ。"
+    >
+      <Flex direction="col" gap="lg">
+        {/* THE SCREEN THE ISSUE DRAWS — saved views over a list. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>保存したビュー · editable-card + bodied</CardTitle>
+            <CardDescription>
+              antd の <code>type=&quot;editable-card&quot;</code> と同じ形。
+              <code>bodied</code> がパネルの枠・角丸・背景を描くので、ストリップとパネルが
+              ひとつの箱として読める。「すべての課題」は <code>closable: false</code>
+              なので × が出ない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Tabs
+              id="saved-views"
+              variant="editable-card"
+              bodied
+              value={activeView}
+              onValueChange={setActiveView}
+              extra={
+                <Button size="sm" variant="outline">
+                  フィルタを保存
+                </Button>
+              }
+              onEdit={(target, action) => {
+                if (action === "add") {
+                  const value = `view-${nextView}`;
+                  setViews((prev) => [
+                    ...prev,
+                    { value, label: `新しいビュー ${nextView}`, count: 0, rows: [] },
+                  ]);
+                  setNextView((n) => n + 1);
+                  setActiveView(value);
+                  return;
+                }
+                const key = String(target);
+                setViews((prev) => prev.filter((view) => view.value !== key));
+                setActiveView((current) =>
+                  current === key ? (views.find((v) => v.value !== key)?.value ?? "all") : current,
+                );
+              }}
+              items={views.map((view) => ({
+                value: view.value,
+                label: view.label,
+                closable: view.closable,
+                count: view.count,
+                overflowCount: 999,
+                countLabel: "件の課題",
+                content: <ViewBody view={view} />,
+              }))}
+            />
+          </CardContent>
+        </Card>
+
+        {/* THE DEFECT, SIDE BY SIDE. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>bodied なし / あり</CardTitle>
+            <CardDescription>
+              <code>bodied</code> なしの card ストリップは 8px 離れた透明なパネルの上に浮く —「card
+              と tab が 1 つに融合していない」と報告された形。あり側は隙間 0px、 線は 1
+              本、アクティブなタブの下辺だけが開いている。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  bodied なし（28.0.0 まで）
+                </Text>
+                <Tabs
+                  id="card-unbodied"
+                  defaultValue="summary"
+                  variant="card"
+                  items={PLACEMENT_ITEMS}
+                />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  bodied
+                </Text>
+                <Tabs
+                  id="card-bodied"
+                  defaultValue="summary"
+                  variant="card"
+                  bodied
+                  items={PLACEMENT_ITEMS}
+                />
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* EVERY PLACEMENT — the joined edge follows the strip. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>bodied × tabPlacement</CardTitle>
+            <CardDescription>
+              角丸が落ちる辺・枠が重なる辺は、ストリップの位置に従う。
+              <code>start</code> / <code>end</code> は論理値なので RTL でも反転する （48rem 以下では
+              top / bottom に折り返す）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              {(["top", "bottom", "start", "end"] as const).map((placement) => (
+                <Flex key={placement} direction="col" gap="sm">
+                  <Text as="p" size="sm" tone="muted">
+                    tabPlacement=&quot;{placement}&quot;
+                  </Text>
+                  <Tabs
+                    id={`card-bodied-${placement}`}
+                    defaultValue="summary"
+                    variant="card"
+                    bodied
+                    tabPlacement={placement}
+                    items={PLACEMENT_ITEMS}
+                  />
+                </Flex>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* THE COUNT. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>タブの件数バッジ · count / countLabel</CardTitle>
+            <CardDescription>
+              <code>count</code> は Button・Toggle と同じカウンタ語彙で、
+              <code>Intl.NumberFormat</code> でロケール整形される。読み上げ名は 「未対応, 12
+              件の課題」 — 数字が直接ラベルに連結しないよう、ピルは <code>aria-hidden</code>、
+              読み上げ用の文だけが <code>sr-only</code> で隣に置かれる。 既定の上限は 99（
+              <code>overflowCount</code> で変更）、 0 を隠すには <code>showZero={"{false}"}</code>。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="lg">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;line&quot;
+                </Text>
+                <Tabs id="count-line" defaultValue="open" variant="line" items={COUNT_ITEMS} />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;card&quot; + bodied
+                </Text>
+                <Tabs
+                  id="count-card"
+                  defaultValue="open"
+                  variant="card"
+                  bodied
+                  items={COUNT_ITEMS}
+                />
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  size=&quot;sm&quot; / &quot;md&quot; / &quot;lg&quot;
+                </Text>
+                {(["sm", "md", "lg"] as const).map((size) => (
+                  <Tabs
+                    key={size}
+                    id={`count-${size}`}
+                    defaultValue="open"
+                    variant="line"
+                    size={size}
+                    items={COUNT_ITEMS.slice(0, 3)}
+                  />
+                ))}
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        {/* The other joined pair the package already ships. */}
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>もうひとつの「ひとつの箱」· Card tabList</CardTitle>
+            <CardDescription>
+              ストリップがカードの見出しの下に入る形は <code>Card tabList</code> が担当する （antd
+              `Card` の <code>tabList</code>）。枠はカードのもので、
+              <code>bodied</code> は要らない。card 系のストリップを単体で置くときだけ
+              <code>bodied</code> を使う。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card
+              tabList={[
+                { key: "all", tab: "すべての課題", closable: false },
+                { key: "mine", tab: "自分の担当" },
+              ]}
+            >
+              <CardContent>
+                <Text as="p">カードの枠がそのままパネルの枠になる。</Text>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+      </Flex>
+    </PageContainer>
+  );
+}

package/package.json

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

package/scripts/ui-audit.mjs

@@ -159,7 +159,25 @@ const ATTRS = String.raw`(?:"(?:\\.|[^"\\])*"|'(?:\\.|[^'\\])*'|=>|[^>"'])*`;
 const rawTag = (tag) => new RegExp(`<${tag}(?=[\\s/>])[^\\n]*`, "g");
 
 /**
- * Is the raw tag at `index` the SLOT CHILD of an `asChild` primitive?
+ * Primitives whose `asChild` hands over THE VISUAL BOX, so the borrowed element cannot be a
+ * `<Button>` — wrapping it would paint a button where a card belongs.
+ *
+ * This set is deliberately tiny and deliberately NOT "anything with asChild". The first cut of
+ * this exemption was the broad version, and measuring it against a real consumer showed what that
+ * costs: of 39 `no-raw-button` findings across its three SPAs, it silenced 11 — and
+ * every single one was a BEHAVIOUR trigger, not a box:
+ *
+ *     DropdownMenuTrigger · SheetTrigger · CollapsibleTrigger · PopoverTrigger · TooltipTrigger
+ *
+ * A Radix trigger supplies behaviour and no styling, so `<DropdownMenuTrigger asChild><Button>`
+ * is not only legal, it is the better answer — the package's button, correctly styled, keyboard
+ * and screen-reader shaped. Exempting those threw away 11 legitimate nudges to fix 0 real
+ * findings. Adding a name here means asserting that primitive paints the box itself.
+ */
+const ASCHILD_BOX_PRIMITIVES = new Set(["Card"]);
+
+/**
+ * Is the raw tag at `index` the slot child of a primitive that hands over its BOX?
  *
  * `<Card asChild hoverable><button onClick={…}>` is not a violation — it is the shape this
  * package PRESCRIBES. `Card.asChild`'s own docblock says so in as many words:
@@ -175,10 +193,11 @@ const rawTag = (tag) => new RegExp(`<${tag}(?=[\\s/>])[^\\n]*`, "g");
  * (godx-jp/shoots-gemba#8). A package that forbids its own prescription leaves the consumer no
  * legal move at all, which is exactly what #740 was opened about.
  *
- * Walks BACKWARDS to the nearest preceding `>` and asks whether the tag it closes is a
- * capitalised component carrying `asChild`. That covers both spellings prettier produces —
+ * Walks BACKWARDS to the nearest preceding `>` and asks whether the tag it closes is one of
+ * ASCHILD_BOX_PRIMITIVES carrying `asChild`. That covers both spellings prettier produces —
  * `<Card asChild><button` on one line, and the attribute wrapped onto its own line — while
- * `</Card>` or `<div>` before the tag exempts nothing, because neither starts a component.
+ * `</Card>` or `<div>` before the tag exempts nothing, because neither starts a component, and
+ * `<DropdownMenuTrigger asChild>` exempts nothing either, because a trigger paints no box.
  */
 const isAsChildSlot = (content, index) => {
   const before = content.slice(0, index).replace(/\s+$/, "");
@@ -186,8 +205,10 @@ const isAsChildSlot = (content, index) => {
   const openStart = before.lastIndexOf("<", before.length - 1);
   if (openStart === -1) return false;
   const openTag = before.slice(openStart);
-  // A component, not `</Card>` and not a lowercase host element.
-  return /^<[A-Z][\w.]*\b/.test(openTag) && /\basChild\b/.test(openTag);
+  // A component, not `</Card>` and not a lowercase host element…
+  const name = /^<([A-Z][\w.]*)\b/.exec(openTag)?.[1];
+  // …and one that hands over its BOX, not merely its behaviour. See ASCHILD_BOX_PRIMITIVES.
+  return name !== undefined && ASCHILD_BOX_PRIMITIVES.has(name) && /\basChild\b/.test(openTag);
 };
 
 /** `rawTag`, minus the matches that are an `asChild` primitive's borrowed element. */
@@ -644,10 +665,19 @@ const RULES = [
     /*
      * 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
+     * A lucide component ships `width="24" height="24"`, and this library overrides that in
+     * **31** selectors (counted 2026-09-19 across `src/styles/*.css`; this comment used to say
+     * "exactly four" and name them, which had drifted far enough to cause gh#755). Most are
+     * component-internal — a consumer cannot put a glyph inside `.ui-rating-star` — so the number
+     * is not the exemption list and never was.
+     *
+     * What a consumer CAN reach is a SLOT, and that is what `iconSizingRanges` keys on: the slot's
+     * NAME at the call site, not the selector that ends up sizing it. That is why the list there
+     * is prop names rather than CSS, and why it must cover both spellings a slot takes —
+     * `icon={<Users />}` and `icon: <Users />` inside an items array (gh#755).
+     *
+     * Outside a slot — 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).
      *
@@ -1094,9 +1124,52 @@ function iconSizingRanges(source) {
     const close = matchBracket(source, open);
     ranges.push([open, close < 0 ? source.length : close + 1]);
   }
+  /*
+   * The SAME slots, written as an object property instead of a JSX prop (gh#755).
+   *
+   *     <Tabs items={saved.map((s) => ({ icon: s.shared ? <Users /> : undefined }))} />
+   *
+   * `Tabs` wraps `items[].icon` in `<span class="ui-tabs-trigger-icon">`, and
+   * `navigation-layout.css` sizes `.ui-tabs-trigger-icon svg` — so the glyph IS measured, by the
+   * same component that owns the slot. But the prop form above requires `=`, so `icon:` matched
+   * nothing and the call site was told to size a box the design system owns — the opposite of
+   * what CONSUMER-RULES asks for.
+   *
+   * A property value is not bracketed like `={...}`, so the range runs to the `,` or `}` that
+   * closes it at depth zero. Strings and nested brackets are skipped so a comma inside
+   * `style={{a: 1, b: 2}}` or inside a string does not end it early.
+   */
+  for (const m of source.matchAll(
+    /\b(?:icon|leading|trailing|mark|indicator|avatar|prefix|suffix|addonBefore|addonAfter)\s*:/g,
+  )) {
+    const from = m.index + m[0].length;
+    ranges.push([from, objectPropertyValueEnd(source, from)]);
+  }
   return ranges;
 }
 
+/** Where an object property's value ends: the `,` or `}` closing it at depth zero. */
+function objectPropertyValueEnd(source, from) {
+  let depth = 0;
+  for (let i = from; i < source.length; i += 1) {
+    const c = source[i];
+    if (c === '"' || c === "'" || c === "`") {
+      // Skip to the closing quote of the same kind, honouring backslash escapes.
+      const quote = c;
+      i += 1;
+      while (i < source.length && source[i] !== quote) i += source[i] === "\\" ? 2 : 1;
+      continue;
+    }
+    if (c === "(" || c === "[" || c === "{") depth += 1;
+    else if (c === ")" || c === "]") depth -= 1;
+    else if (c === "}") {
+      if (depth === 0) return i;
+      depth -= 1;
+    } else if (c === "," && depth === 0) return i;
+  }
+  return source.length;
+}
+
 /** A lucide element that no rule, no slot and no author-supplied size will ever measure. */
 function* lucideGlyphMatches(source) {
   const names = lucideLocalNames(source);