@godxjp/ui 19.4.0 → 19.4.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (65) hide show
  1. package/dist/components/data-display/badge.d.ts +1 -1
  2. package/dist/components/data-display/list-row.d.ts +2 -0
  3. package/dist/components/data-display/list-row.js +16 -12
  4. package/dist/components/data-display/popover.d.ts +1 -1
  5. package/dist/components/data-display/table.d.ts +1 -1
  6. package/dist/components/data-display/timeline-grid.js +5 -3
  7. package/dist/components/data-entry/checkbox.js +1 -1
  8. package/dist/components/data-entry/form-field.js +5 -5
  9. package/dist/components/data-entry/input.js +1 -1
  10. package/dist/components/data-entry/radio.js +1 -1
  11. package/dist/components/data-entry/search-input.d.ts +2 -18
  12. package/dist/components/data-entry/search-input.js +3 -0
  13. package/dist/components/data-entry/select.js +1 -1
  14. package/dist/components/general/button.d.ts +2 -0
  15. package/dist/components/general/button.js +5 -1
  16. package/dist/components/general/inert-background.js +2 -1
  17. package/dist/components/layout/app-shell.js +1 -1
  18. package/dist/components/layout/master-detail.d.ts +1 -1
  19. package/dist/components/layout/master-detail.js +47 -3
  20. package/dist/components/layout/mobile-shell.d.ts +1 -1
  21. package/dist/components/layout/responsive-grid.js +7 -4
  22. package/dist/components/navigation/app-setting-picker.js +10 -1
  23. package/dist/email/tokens.generated.d.ts +1 -1
  24. package/dist/email/tokens.generated.js +1 -1
  25. package/dist/props/components/data-display.prop.d.ts +1 -1
  26. package/dist/props/components/data-entry.prop.d.ts +10 -5
  27. package/dist/props/components/general.prop.d.ts +4 -0
  28. package/dist/props/components/layout.prop.d.ts +8 -2
  29. package/dist/props/registry.d.ts +2 -2
  30. package/dist/props/registry.js +2 -1
  31. package/dist/props/vocabulary/layout.prop.d.ts +1 -1
  32. package/dist/styles/control.css +29 -0
  33. package/dist/styles/data-display-layout.css +22 -1
  34. package/dist/styles/focus-ring.css +9 -0
  35. package/dist/styles/form-layout.css +6 -0
  36. package/dist/styles/layout.css +36 -1
  37. package/dist/styles/navigation-layout.css +2 -1
  38. package/dist/tokens/components/data-display.css +2 -1
  39. package/dist/tokens/foundation.css +2 -1
  40. package/docs/FRAME-A11Y-CI.md +99 -17
  41. package/docs/FRAME-COVERAGE-REPORT.md +4 -2
  42. package/docs/data-display/list-row.tsx +21 -0
  43. package/docs/data-display/popover.tsx +4 -1
  44. package/docs/data-entry/date-picker.tsx +2 -1
  45. package/docs/data-entry/form-field/index.tsx +2 -2
  46. package/docs/data-entry/search-input.tsx +1 -0
  47. package/docs/data-entry/select-matrix.tsx +2 -1
  48. package/docs/data-entry/select.tsx +3 -1
  49. package/docs/feedback/dialog.tsx +2 -1
  50. package/docs/feedback/sheet.tsx +2 -1
  51. package/docs/general/button/index.md +4 -0
  52. package/docs/layout/app-shell.tsx +4 -4
  53. package/docs/layout/master-detail.tsx +3 -0
  54. package/docs/layout/responsive-grid.tsx +21 -4
  55. package/docs/layout/sidebar.tsx +3 -3
  56. package/docs/layout/split-pane.tsx +4 -5
  57. package/docs/navigation/context-menu.tsx +6 -1
  58. package/docs/navigation/dropdown-menu.tsx +2 -1
  59. package/docs/navigation/tabs.tsx +2 -2
  60. package/docs/showcase/case6-agency-handy.tsx +2 -2
  61. package/docs/showcase/org-switcher.tsx +1 -1
  62. package/docs/showcase/settings-account-sections.tsx +2 -2
  63. package/docs/showcase/table-master-detail.tsx +1 -1
  64. package/docs/showcase/table-view-tabs.tsx +1 -1
  65. package/package.json +2 -2
@@ -402,7 +402,7 @@ export default function Demo() {
402
402
  <CardDescription>
403
403
  行の中身まで利用側が書く旧エスケープハッチ。これが原因で
404
404
  <code>&lt;Link&gt;{"{item.label}"}&lt;/Link&gt;</code>
405
- がアイコンを全て落とす回帰が発生しました(gh#213)。 現在は rowProps.children
405
+ がアイコンを全て落とす回帰が発生しました。 現在は rowProps.children
406
406
  にライブラリ製の行内容が入るので、それを描画すれば 正規の行が復元されます(ここでは
407
407
  その右にお気に入りスターを添えています)。 新規コードでは linkComponent か
408
408
  SidebarItem asChild を使ってください。
@@ -436,7 +436,7 @@ export default function Demo() {
436
436
  sections を使わず SidebarSection / SidebarItem を直接組み立てて、
437
437
  ナビゲーション全体を 自前で構成します。右は同じ構成に SidebarItem の asChild
438
438
  を足したものです。子として ルーターの Link
439
- を「要素だけ」渡すと、アイコン・ラベル・バッジは ライブラリが差し込みます(gh#213。
439
+ を「要素だけ」渡すと、アイコン・ラベル・バッジは ライブラリが差し込みます(。
440
440
  children は書きません)。
441
441
  </CardDescription>
442
442
  </CardHeader>
@@ -590,7 +590,7 @@ export default function Demo() {
590
590
  "badgeTone で未読(neutral)と自分宛て(destructive)を色だけで区別",
591
591
  "disabled=true で項目を非活性化(クリック不可)",
592
592
  "footer prop でスクロール外にユーザー情報を固定",
593
- "linkComponent · ルーター Link は「要素だけ」渡す。行の中身はライブラリが組み立てる(gh#213)",
593
+ "linkComponent · ルーター Link は「要素だけ」渡す。行の中身はライブラリが組み立てる",
594
594
  "linkComponent は葉・サブメニュー・折りたたみレール・フライアウトの全てに適用される",
595
595
  "グループのトリガーは aria-expanded を持つ開閉ボタンのままなので linkComponent は適用されない",
596
596
  ].map((note) => (
@@ -302,8 +302,8 @@ export default function Demo() {
302
302
  </Text>
303
303
  <Text as="p" tone="muted">
304
304
  パネル自身の幅が 48rem 未満になると縦積みにフォールバックします
305
- (ビューポートではなくコンテナ基準 · gh#165)。
306
- 常にサイドバイサイドが必要な場合は CSS Grid を使用してください。
305
+ (ビューポートではなくコンテナ基準)。 常にサイドバイサイドが必要な場合は CSS
306
+ Grid を使用してください。
307
307
  </Text>
308
308
  </Flex>
309
309
  </CardContent>
@@ -410,9 +410,8 @@ export default function Demo() {
410
410
  <CardHeader>
411
411
  <CardTitle level={2}>Container stress · narrow vs wide embed</CardTitle>
412
412
  <CardDescription>
413
- 大きな viewport 内でも、パネル自身の幅で分割が決まる(gh#165)。狭い埋め込み(約
414
- 28rem)は 1 カラムに潰れ、広い埋め込み(約 56rem)は 2 カラムに分割する。ビューポート
415
- 幅は同一。
413
+ 大きな viewport 内でも、パネル自身の幅で分割が決まる。狭い埋め込み(約 28rem)は 1
414
+ カラムに潰れ、広い埋め込み(約 56rem)は 2 カラムに分割する。ビューポート 幅は同一。
416
415
  </CardDescription>
417
416
  </CardHeader>
418
417
  <CardContent>
@@ -48,7 +48,12 @@ export default function Demo() {
48
48
  <CardContent>
49
49
  <ContextMenu>
50
50
  {/* ui-audit-disable-next-line no-hand-rolled-surface — the dashed area is the right-click target the demo asks you to use */}
51
- <ContextMenuTrigger className="border-border h-36 w-full cursor-context-menu rounded-md border border-dashed">
51
+ {/* data-axe-open="contextmenu": check-frame-axe right-clicks here before its
52
+ overlay scan. */}
53
+ <ContextMenuTrigger
54
+ data-axe-open="contextmenu"
55
+ className="border-border h-36 w-full cursor-context-menu rounded-md border border-dashed"
56
+ >
52
57
  <Flex align="center" justify="center" gap="xs">
53
58
  <Text tone="muted">ここを右クリックしてください</Text>
54
59
  </Flex>
@@ -52,7 +52,8 @@ export default function Demo() {
52
52
  <Text>JE-0042 · 売上計上 ¥480,000</Text>
53
53
  <DropdownMenu>
54
54
  <DropdownMenuTrigger asChild>
55
- <Button variant="ghost" size="icon-sm" aria-label="行アクション">
55
+ {/* data-axe-open: opened by check-frame-axe before its overlay scan. */}
56
+ <Button data-axe-open variant="ghost" size="icon-sm" aria-label="行アクション">
56
57
  <MoreHorizontal />
57
58
  </Button>
58
59
  </DropdownMenuTrigger>
@@ -73,7 +73,7 @@ export default function Demo() {
73
73
  <CardTitle level={2}>先頭タブが disabled · フォールバック選択</CardTitle>
74
74
  <CardDescription>
75
75
  defaultValue/value を渡さない場合、Tabs は先頭の ENABLED タブを自動選択する(disabled
76
- の先頭タブは選ばない)。全タブが disabled の場合は何も選択しない (gh#175)。
76
+ の先頭タブは選ばない)。全タブが disabled の場合は何も選択しない。
77
77
  </CardDescription>
78
78
  </CardHeader>
79
79
  <CardContent>
@@ -106,7 +106,7 @@ export default function Demo() {
106
106
  <CardTitle level={2}>320px stress · 長いローカライズラベル</CardTitle>
107
107
  <CardDescription>
108
108
  狭いコンテナでも長いラベルはクリップされず、水平タブリストが自身でスクロールする
109
- (gh#175)。compact navigation への変換は Tabs API に存在しないため擬似実装しない —
109
+ 。compact navigation への変換は Tabs API に存在しないため擬似実装しない —
110
110
  スクロールが意図した縮退動作。
111
111
  </CardDescription>
112
112
  </CardHeader>
@@ -333,7 +333,7 @@ function SectionHeader({ children, count }: { children: React.ReactNode; count?:
333
333
  // ── Phone shell ──────────────────────────────────────────────────────────────
334
334
 
335
335
  /**
336
- * gh#354 §6 — this file used to BUILD the shell: a `Card` + `CardContent flush` phone frame, a
336
+ * This file used to BUILD the shell: a `Card` + `CardContent flush` phone frame, a
337
337
  * `ui-card-inset-x h-9` status row, an `h-14 border-b` header, a `flex-1 overflow-y-auto` body, a
338
338
  * `shrink-0 border-t` action strip and a `ResponsiveGrid` tab bar. It reproduced the look and
339
339
  * neither behaviour that matters on a device — the document still scrolled, and nothing padded out
@@ -962,7 +962,7 @@ export default function AgencyHandyShowcase() {
962
962
 
963
963
  // SELECT MODE REPLACES THE APP BAR — it does not stack a second strip under it. That is the
964
964
  // platform pattern on both iOS and Android, and it is what the `header` slot is for: one bar to
965
- // read at a time. Before gh#354 this file rendered the title bar AND a contextual strip, because
965
+ // read at a time. This file once rendered the title bar AND a contextual strip, because
966
966
  // there was no bar to swap.
967
967
  const header = selectMode ? (
968
968
  <Flex align="center" justify="between" gap="xs" className="w-full">
@@ -120,7 +120,7 @@ function OrgSwitcher({ organizations, currentId, onSelect, onCreate, onJoin }: O
120
120
  className="w-full justify-between"
121
121
  >
122
122
  {/* Inside a Button, i.e. inside a <button>, whose content model is phrasing content
123
- only — so every Flex on this branch renders as a <span> (gh#354). */}
123
+ only — so every Flex on this branch renders as a <span>. */}
124
124
  <Flex as="span" align="center" gap="sm" className="min-w-0">
125
125
  <Avatar className="size-7 rounded-md">
126
126
  <AvatarFallback>{monogram(current.name)}</AvatarFallback>
@@ -61,7 +61,7 @@ import { AlertDialog } from "@godxjp/ui/feedback";
61
61
  import { Flex, PageContainer } from "@godxjp/ui/layout";
62
62
 
63
63
  // ── Label bundles: the SAME screen at its longest JA / EN / VI wording ────────────────────────
64
- // Long-label stress is a first-class acceptance criterion (#216), so the bundle intentionally
64
+ // Long-label stress is a first-class acceptance criterion, so the bundle intentionally
65
65
  // carries the verbose form of each label instead of the tidy demo form.
66
66
 
67
67
  type LabelBundle = {
@@ -348,7 +348,7 @@ export default function SettingsAccountSectionsShowcase() {
348
348
  title={b.pageTitle}
349
349
  subtitle={b.pageSubtitle}
350
350
  breadcrumb={[{ label: b.pageTitle }]}
351
- // PageHeader action composition (#216): the header owns the page-level actions through
351
+ // PageHeader action composition: the header owns the page-level actions through
352
352
  // `extra`. It wraps at 390 instead of overflowing, so no page-local header geometry.
353
353
  extra={
354
354
  <Flex direction="row" align="end" gap="sm" wrap>
@@ -417,7 +417,7 @@ export default function Demo() {
417
417
  </Card>
418
418
 
419
419
  {/* ── Empty detail state (nothing selected) ──
420
- Fixed-track split, so the geometry belongs to MasterDetail, not this page (gh#223):
420
+ Fixed-track split, so the geometry belongs to MasterDetail, not this page:
421
421
  rail="master" keeps the leading 一覧 on the fixed track while the detail surface stays
422
422
  fluid, and collapseBelow="md" stacks 一覧→詳細 once the card body itself is too narrow
423
423
  for two tracks. No grid tracks, no per-breakpoint widths, no page-local spacing. */}
@@ -369,7 +369,7 @@ const DOT_CLASS: Record<SavedView["dot"], string> = {
369
369
 
370
370
  // TabsTrigger renders a <button>, whose content model is phrasing content only — so the row and
371
371
  // the count chip take `as="span"`. Before Flex/Badge had that seam the only valid shape here was a
372
- // raw `<span className="flex …">`, i.e. utility layout (gh#354).
372
+ // raw `<span className="flex …">`, i.e. utility layout.
373
373
  function ViewTrigger({ view, count }: { view: SavedView; count: number }) {
374
374
  return (
375
375
  <Flex as="span" align="center" gap="sm">
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@godxjp/ui",
3
- "version": "19.4.0",
4
- "godxUiMcp": "19.4.0",
3
+ "version": "19.4.2",
4
+ "godxUiMcp": "19.4.2",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
7
7
  "type": "git",