@godxjp/ui 23.4.10 → 23.4.12

package/dist/components/data-display/timeline.js

@@ -1,9 +1,11 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
+import { useTranslation } from "../../i18n/use-translation.js";
 import { Check, CheckCircle2, Plane } from "lucide-react";
-const SR_PREFIX = {
-  done: "Completed: ",
-  current: "Current: ",
-  pending: "Upcoming: "
+const SR_PREFIX_KEY = {
+  done: "dataDisplay.timeline.statusDone",
+  current: "dataDisplay.timeline.statusCurrent",
+  pending: "dataDisplay.timeline.statusPending"
 };
 function resolveStatus(item) {
   if (item.status) {
@@ -15,6 +17,7 @@ function resolveStatus(item) {
   return "done";
 }
 function Timeline({ items, variant = "icon" }) {
+  const { t } = useTranslation();
   return /* @__PURE__ */ jsx("ol", { className: "ui-timeline", "data-variant": variant, children: items.map((item, index) => {
     const status = resolveStatus(item);
     const isCurrent = status === "current";
@@ -66,7 +69,7 @@ function Timeline({ items, variant = "icon" }) {
           /* @__PURE__ */ jsxs("div", { className: "ui-timeline-body", children: [
             /* @__PURE__ */ jsxs("div", { className: "ui-timeline-head", children: [
               /* @__PURE__ */ jsxs("span", { className: "ui-timeline-title", "data-current": isCurrent ? "true" : void 0, children: [
-                /* @__PURE__ */ jsx("span", { className: "sr-only", children: SR_PREFIX[status] }),
+                /* @__PURE__ */ jsx("span", { className: "sr-only", children: t(SR_PREFIX_KEY[status]) }),
                 item.title
               ] }),
               item.time ? /* @__PURE__ */ jsx("span", { className: "ui-timeline-time", children: item.time }) : null

package/dist/components/navigation/dropdown-menu.d.ts

@@ -155,9 +155,21 @@ interface DropdownMenuItemPropsOwn {
     textValue?: string;
     /** Mượn thẻ của con thay vì dựng `<div>` riêng — chỗ để nhét một `<Link>` vào một mục menu. */
     asChild?: boolean;
+    /**
+     * `id` và mọi `data-*` ĐI XUỐNG phần tử gốc của item (gh#631).
+     *
+     * Trigger của chính cụm này đã nhận cách xử lý ấy ở 20.0.0, với đúng lý do CHANGELOG ghi:
+     * "trước đó bị nuốt, nên selector e2e của consumer rời ra trong im lặng". Phần item thì chưa,
+     * nên hai nửa của cùng một component hành xử ngược nhau.
+     *
+     * TypeScript không bắt được: JSX luôn cho qua mọi thuộc tính có gạch nối, nên `data-testid`
+     * biên dịch sạch và chỉ hỏng lúc chạy. Với `id` còn tệ hơn — nó là thứ `aria-activedescendant`
+     * trỏ vào, và nó biến mất không một lời.
+     */
+    id?: string;
 }
-type DropdownMenuItemProps = React.PropsWithChildren<DropdownMenuItemPropsOwn>;
-export declare function DropdownMenuItem({ children, className, inset, variant, disabled, onSelect, textValue, asChild, }: DropdownMenuItemProps): React.JSX.Element;
+type DropdownMenuItemProps = React.PropsWithChildren<DropdownMenuItemPropsOwn> & Record<`data-${string}`, unknown>;
+export declare function DropdownMenuItem({ children, className, inset, variant, disabled, onSelect, textValue, asChild, ...forwarded }: DropdownMenuItemProps): React.JSX.Element;
 interface DropdownMenuLabelPropsOwn {
     className?: string;
     inset?: boolean;

package/dist/components/navigation/dropdown-menu.js

@@ -267,22 +267,30 @@ function DropdownMenuRadioGroup({
   value,
   onValueChange
 }) {
-  return /* @__PURE__ */ jsx(
-    MenuSection,
-    {
-      "data-slot": "dropdown-menu-radio-group",
-      className,
-      selectionMode: "single",
-      disallowEmptySelection: true,
-      selectedKeys: value == null ? [] : [value],
-      onSelectionChange: (keys) => {
-        if (keys === "all") return;
-        const [first] = [...keys];
-        if (first != null) onValueChange?.(String(first));
-      },
-      children
+  const selection = {
+    className,
+    selectionMode: "single",
+    disallowEmptySelection: true,
+    selectedKeys: value == null ? [] : [value],
+    onSelectionChange: (keys) => {
+      if (keys === "all") return;
+      const [first] = [...keys];
+      if (first != null) onValueChange?.(String(first));
     }
-  );
+  };
+  const runs = [{ label: null, items: [] }];
+  for (const child of React.Children.toArray(children)) {
+    if (React.isValidElement(child) && child.type === DropdownMenuLabel) {
+      runs.push({ label: child, items: [] });
+    } else {
+      runs[runs.length - 1].items.push(child);
+    }
+  }
+  const sections = runs.filter((run) => run.label != null || run.items.length > 0);
+  return /* @__PURE__ */ jsx(Fragment, { children: sections.map((run, index) => /* @__PURE__ */ jsxs(MenuSection, { "data-slot": "dropdown-menu-radio-group", ...selection, children: [
+    run.label,
+    run.items
+  ] }, index)) });
 }
 function DropdownMenuSub({ children }) {
   const parts = React.Children.toArray(children).filter(React.isValidElement);
@@ -372,7 +380,8 @@ function DropdownMenuItem({
   disabled,
   onSelect,
   textValue,
-  asChild
+  asChild,
+  ...forwarded
 }) {
   const tag = borrowedTag(children, asChild);
   return /* @__PURE__ */ jsx(
@@ -394,7 +403,10 @@ function DropdownMenuItem({
             "data-slot": "dropdown-menu-item",
             "data-inset": inset,
             "data-variant": variant,
-            ...radixItemState(state)
+            ...radixItemState(state),
+            // LAST, so a consumer's own `id`/`data-*` wins over ours rather than being
+            // overwritten by the slot bookkeeping above (gh#631).
+            ...forwarded
           },
           content
         );

package/dist/contracts/measurement.json

@@ -1,6 +1,6 @@
 {
   "$comment": "AUTO-GENERATED by scripts/gen-measurement-contract.mjs — do not edit. Read this instead of guessing: docs/MEASUREMENT-CONTRACT.md.",
-  "version": "23.4.10",
+  "version": "23.4.12",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,
@@ -39,6 +39,17 @@
         "components": [
           "number-input"
         ]
+      },
+      {
+        "selector": ".ui-switch",
+        "via": ".ui-choice-input",
+        "source": "src/styles/control.css",
+        "targetMin": 24,
+        "components": [
+          "label",
+          "slider",
+          "switch"
+        ]
       }
     ]
   },

package/dist/i18n/messages/en.json

@@ -339,6 +339,11 @@
         "error": "failed",
         "abort": "stopped"
       }
+    },
+    "timeline": {
+      "statusDone": "Completed: ",
+      "statusCurrent": "Current: ",
+      "statusPending": "Upcoming: "
     }
   },
   "ui": {

package/dist/i18n/messages/ja.json

@@ -332,6 +332,11 @@
         "error": "失敗",
         "abort": "中断"
       }
+    },
+    "timeline": {
+      "statusDone": "完了: ",
+      "statusCurrent": "現在: ",
+      "statusPending": "予定: "
     }
   },
   "ui": {

package/dist/i18n/messages/vi.json

@@ -333,6 +333,11 @@
         "error": "thất bại",
         "abort": "đã dừng"
       }
+    },
+    "timeline": {
+      "statusDone": "Đã xong: ",
+      "statusCurrent": "Hiện tại: ",
+      "statusPending": "Sắp tới: "
     }
   },
   "ui": {

package/dist/styles/control.css

@@ -500,6 +500,13 @@
     transition-duration: 150ms;
   }
 
+  .ui-switch > .ui-choice-input {
+    inset-block-start: 50%;
+    inset-block-end: auto;
+    block-size: max(100%, var(--touch-target-min));
+    translate: 0 -50%;
+  }
+
   .ui-switch[data-state="checked"] {
     background: var(--switch-checked-background, hsl(var(--primary)));
   }

package/docs/data-display/badge.tsx

@@ -267,7 +267,7 @@ export default function Demo() {
             <CardTitle level={2}>tabular · 数字を桁で揃える</CardTitle>
             <CardDescription>
               件数のチップが縦に並ぶときは tabular を。プロポーショナル数字だと 1 が 0
-              より狭いので、列で見たときに桁がずれてチップ幅も揺れます。既定はオフ — 語を載せる
+              より狭いので、列で見たときに桁がずれてチップ幅も揺れます。既定はオフ。語を載せる
               チップまで幅の広い数字を払う必要はありません。
             </CardDescription>
           </CardHeader>

package/docs/data-display/card/index.tsx

@@ -128,7 +128,7 @@ export default function Demo() {
 
         <Flex direction="col" gap="sm">
           <Text as="div" weight="medium">
-            hoverable · actions — Ant Design の hoverable と actions
+            hoverable · actions · Ant Design の hoverable と actions
           </Text>
           <ResponsiveGrid columns={{ sm: 1, md: 2 }}>
             {/*

package/docs/data-display/popover.tsx

@@ -210,7 +210,7 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>width · パネルの測り方</CardTitle>
             <CardDescription>
-              既定の panel は --popover-width（18rem）。auto は中身に測らせます — 自前の幅を持つもの
+              既定の panel は --popover-width（18rem）。auto は中身に測らせます。自前の幅を持つもの
               （Calendar、チャート、固定幅のプレビュー）はこれ以外に正解がありません。trigger
               はアンカーに合わせます。className に w-*
               を書くのは呼び出し側の定数で、どのテーマからも retune できません。flush が padding

package/docs/data-entry/chat-suggestion.tsx

@@ -166,7 +166,7 @@ export default function Demo() {
               </CardTitle>
               <CardDescription>
                 トリガー文字は差し替えられます。1つの入力欄に対して1つの
-                ChatSuggestion — 2種類を同時に見張るのではなく、用途ごとに別の欄にします。
+                ChatSuggestion。2種類を同時に見張るのではなく、用途ごとに別の欄にします。
               </CardDescription>
             </CardHeader>
             <CardContent>

package/docs/data-entry/segmented.tsx

@@ -89,7 +89,7 @@ export default function Demo() {
             <CardTitle level={2}>4 択 + 件数（スマホ幅では折り返す）</CardTitle>
             <CardDescription>
               一覧の上の状態フィルター。4 つが 1 行に収まらない幅では、トラックが 2 行目に折り返し
-              ます — ラベルも件数も切り詰めません。`check:segmented-wrap` がこのカードを測ります。
+              ます。ラベルも件数も切り詰めません。`check:segmented-wrap` がこのカードを測ります。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -112,7 +112,7 @@ export default function Demo() {
             <CardDescription>
               size は 3 段（sm / md / lg）。トラックの高さは --control-height そのもので、
               MobileShell のようにその変数をスコープする領域では自動的にタッチ段（44px）になります。
-              vertical では 1 行ぶんが 1 コントロールの高さになります — 横 1 行のときだけトラック
+              vertical では 1 行ぶんが 1 コントロールの高さになります。横 1 行のときだけトラック
               内側の余白を引くので、積んだときは引きません。block は幅いっぱいに広げます。
             </CardDescription>
           </CardHeader>

package/docs/layout/app-launcher.tsx

@@ -147,7 +147,7 @@ export default function Demo() {
         </Card>
         <Card>
           <CardHeader>
-            <CardTitle level={2}>バー以外の chrome — icon とパネルの向き</CardTitle>
+            <CardTitle level={2}>バー以外の chrome · icon とパネルの向き</CardTitle>
             <CardDescription>
               `appearance=&quot;icon&quot;` は正方形の ghost Button。バーではない chrome（nav rail、
               カードのヘッダ、ツールバー）のための箱で、glyph は同じです。 パネルは既定で chrome
@@ -172,7 +172,7 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>Launchpad — 画面いっぱい</CardTitle>
+            <CardTitle level={2}>Launchpad · 画面いっぱい</CardTitle>
             <CardDescription>
               `responsive=&quot;fullscreen&quot;` は plaform の start bar のための形。背後のページを
               ぼかし、その地の上にタイルが並びます（macOS Launchpad / Windows Start）。 幅に関係なく

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@godxjp/ui",
-  "version": "23.4.10",
-  "godxUiMcp": "23.4.10",
+  "version": "23.4.12",
+  "godxUiMcp": "23.4.12",
   "license": "Apache-2.0",
   "repository": {
     "type": "git",
@@ -331,6 +331,7 @@
     "check:data-entry-touch-aria": "node scripts/check-data-entry-touch-aria.mjs",
     "check:display-runtime-evidence": "node scripts/check-display-runtime-evidence.mjs",
     "check:choice-hit-target": "node scripts/check-choice-hit-target.mjs",
+    "check:state-legible": "node scripts/check-state-legible.mjs",
     "check:app-shell-narrow-grid": "node scripts/check-app-shell-narrow-grid.mjs",
     "check:frame-contracts": "pnpm check:component-api-manifest && pnpm audit:component-cases && pnpm check:frame-coverage && pnpm check:frame-coverage-ledger && pnpm check:screen-reader-evidence && pnpm check:data-entry-owner-source && pnpm check:display-runtime-evidence",
     "check:frame-runtime": "pnpm check:data-entry-touch-aria && pnpm check:app-shell-narrow-grid && pnpm check:choice-hit-target",

package/scripts/ui-audit.mjs

@@ -528,8 +528,21 @@ const RULES = [
   {
     id: "hand-rolled-close-glyph",
     severity: "warn",
-    // A literal close glyph as JSX text — almost always a hand-rolled dismiss that should be a slot.
+    /*
+     * A literal close glyph as JSX text — almost always a hand-rolled dismiss that should be a slot.
+     *
+     * NOT when the glyph carries a name. The rule's own message is "a bare glyph has no accessible
+     * name", so a glyph that HAS one is the pattern this rule wants, not the one it forbids:
+     *
+     *     <span aria-hidden="true">×</span>
+     *     <VisuallyHidden>未実施</VisuallyHidden>
+     *
+     * That is the ○ / △ / × status scale, and it was reported against our own `Segmented` docs page
+     * — one of ten standing warnings here. Flagging it would push every consumer doing the right
+     * thing toward either a suppression comment or a worse glyph.
+     */
     test: />\s*[✕✖×╳]\s*</,
+    exempt: /<VisuallyHidden\b|sr-only/,
     standard: "WAI-ARIA 1.2 (dialog) · WCAG 2.2 SC 4.1.2 · @godxjp/ui Alert/Dialog anatomy",
     message:
       "Don't hand-roll a ✕ close. Pass onDismiss to <Alert> (renders the × top-right with an aria-label), or use <Dialog>/<Sheet> which ship their own labelled close. A bare glyph has no accessible name.",
@@ -762,9 +775,25 @@ function isSuppressed(ruleId, sameLine, prevLine) {
 
 /** A rule's own in-place escape (see the `exempt` note on RULES), on the same line or the one above.
  *  Read from the ORIGINAL lines, because the scanner blanks comments before `rule.test` runs. */
-function isExempt(rule, sameLine, prevLine) {
+/**
+ * Also looks at the NEXT line, not just this one and the one before.
+ *
+ * An accessible name for a symbol is written AFTER the symbol, because that is the reading order:
+ *
+ *     <span aria-hidden="true">×</span>
+ *     <VisuallyHidden>未実施</VisuallyHidden>
+ *
+ * Checking only backwards could never see it, so `hand-rolled-close-glyph` fired on the ○/△/×
+ * status scale in our own `Segmented` docs — a glyph that is named, which is the pattern the rule
+ * wants rather than the one it forbids.
+ */
+function isExempt(rule, sameLine, prevLine, nextLine) {
   if (!rule.exempt) return false;
-  return rule.exempt.test(sameLine ?? "") || rule.exempt.test(prevLine ?? "");
+  return (
+    rule.exempt.test(sameLine ?? "") ||
+    rule.exempt.test(prevLine ?? "") ||
+    rule.exempt.test(nextLine ?? "")
+  );
 }
 
 function walk(dir, acc = []) {
@@ -857,12 +886,45 @@ function findHandCurrencyInJsxText(source, from) {
   return null;
 }
 
+/**
+ * Is `index` inside a quoted string or a template literal, counted from the start of the file?
+ *
+ * `insideTemplateLiteral` only counts backticks, and only from an arbitrary `from` — enough for the
+ * text scan, not enough to decide whether a `<` is JSX at all. A tag written INSIDE a string is not
+ * markup, and treating it as markup sends the scan off through the rest of the file:
+ *
+ *     console.warn(`[DataTable] Column "${key}" renders a <th> with no visible text…`)
+ *
+ * That `<th>` was read as an opening tag, the text scan walked past the closing backtick, skipped
+ * from quote to quote, and eventually found a currency glyph somewhere else entirely — reporting
+ * `hardcoded-currency` against a dev warning containing no currency at all. One of ten standing
+ * warnings in this repo, and the only one in `src/`.
+ */
+function insideStringLiteral(source, index) {
+  let quote = "";
+  for (let i = 0; i < index; i++) {
+    const char = source[i];
+    if (char === "\\") {
+      i++;
+      continue;
+    }
+    if (quote) {
+      if (char === quote) quote = "";
+    } else if (char === '"' || char === "'" || char === "`") {
+      quote = char;
+    }
+  }
+  return quote !== "";
+}
+
 /** 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)) {
     const end = jsxOpeningEnd(source, opening.index);
     if (end >= source.length) continue;
     if (isGenericTypeBeforeCall(source, opening.index, end)) continue;
+    // A tag inside a string or template literal is prose about markup, not markup.
+    if (insideStringLiteral(source, opening.index)) continue;
     const hit = findHandCurrencyInJsxText(source, end + 1);
     if (hit) {
       yield { 0: source.slice(opening.index, hit.end), index: opening.index };
@@ -1096,7 +1158,7 @@ for (const dir of SCAN_DIRS) {
         if (
           (typeof rule.test === "function" ? rule.test(target) : rule.test.test(target)) &&
           !suppressed(rule.id, i) &&
-          !isExempt(rule, origLines[i], origLines[i - 1])
+          !isExempt(rule, origLines[i], origLines[i - 1], origLines[i + 1])
         ) {
           findings.push({
             file: rel,