@godxjp/ui 28.6.0 → 28.7.0

package/dist/props/components/data-display.prop.d.ts

@@ -605,6 +605,20 @@ export type ScrollAreaProp = {
      * from it — anchoring must never be the only route back to new content.
      */
     onAnchoredChange?: (anchored: boolean) => void;
+    /**
+     * Accessible name for the scroll REGION — the `tabindex="0"` element a keyboard user lands on to
+     * scroll content taller or wider than the box.
+     *
+     * Optional on purpose. A consumer is never forced to invent a name for every scrolling box: left
+     * out, the region takes the localized `dataDisplay.scrollArea.region` default ("Scrollable
+     * region"), which is what a screen-reader user needs to hear anyway — that the arrow keys now
+     * scroll something. Pass a plain string when the screen can say WHICH region ("Activity log"); a
+     * non-string node cannot be an `aria-label`, so it falls back to the default.
+     *
+     * The region is only announced while it HAS overflow to reach, on the axes `orientation` opens:
+     * no overflow, no tab stop, no role and no name. (gh#821)
+     */
+    label?: LabelProp;
 };
 /**
  * @see TimelineGrid — one COLUMN of the grid (a day, a room, a machine). The label names the

package/dist/props/registry.d.ts

@@ -1851,7 +1851,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly field: "onAnchoredChange";
             readonly local: true;
             readonly reason: 'Pinned-state change handler (boolean), so the consumer can render its own focusable "jump to newest" affordance.';
-        }];
+        }, "LabelProp"];
     };
     readonly ChartSeriesProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -2261,7 +2261,8 @@ const COMPONENT_PROP_REGISTRY = {
         field: "onAnchoredChange",
         local: true,
         reason: 'Pinned-state change handler (boolean), so the consumer can render its own focusable "jump to newest" affordance.'
-      }
+      },
+      "LabelProp"
     ]
   },
   ChartSeriesProp: {

package/dist/styles/form-layout.css

@@ -259,4 +259,26 @@
       text-align: end;
     }
   }
+
+  .ui-form-feedback > svg {
+    inline-size: var(--form-feedback-icon-size);
+    block-size: var(--form-feedback-icon-size);
+    flex-shrink: 0;
+  }
+
+  .ui-form-feedback[data-status="success"] {
+    color: hsl(var(--text-success));
+  }
+
+  .ui-form-feedback[data-status="warning"] {
+    color: hsl(var(--text-warning));
+  }
+
+  .ui-form-feedback[data-status="error"] {
+    color: hsl(var(--text-error));
+  }
+
+  .ui-form-feedback[data-status="validating"] {
+    color: hsl(var(--muted-foreground));
+  }
 }

package/dist/styles/layout.css

@@ -1053,7 +1053,6 @@
   }
 
   .ui-pagination-size-trigger {
-    width: var(--pagination-size-width);
 
     height: var(--control-height);
   }

package/dist/styles/navigation-layout.css

@@ -220,27 +220,27 @@
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="start"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
-    [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="start"] [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
 
   [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
-  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
-    [data-slot="tabs-list"] {
+  [data-slot="tabs"][data-variant="editable-card"][data-placement="end"] [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="start"]
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="card"][data-placement="start"]
     [data-slot="tabs-list"],
-  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="editable-card"][data-placement="start"]
     [data-slot="tabs-list"] {
     box-shadow: inset var(--tabs-card-rail-border-width) 0 0 hsl(var(--border));
   }
 
-  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"]
-    [data-slot="tabs-list"],
-  [dir="rtl"] [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
+  [dir="rtl"] [data-slot="tabs"][data-variant="card"][data-placement="end"] [data-slot="tabs-list"],
+  [dir="rtl"]
+    [data-slot="tabs"][data-variant="editable-card"][data-placement="end"]
     [data-slot="tabs-list"] {
     box-shadow: inset calc(-1 * var(--tabs-card-rail-border-width)) 0 0 hsl(var(--border));
   }
@@ -277,7 +277,7 @@
     margin-inline-start: calc(var(--tabs-panel-space-inset) + var(--tabs-panel-border-width));
   }
 
-    [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
+  [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-panel"],
   [data-slot="tabs"][data-bodied="true"] > [data-slot="tabs-content"] {
     border: var(--tabs-panel-border-width) solid hsl(var(--border));
     border-radius: var(--tabs-panel-radius);
@@ -1002,7 +1002,6 @@
   }
 
   .ui-app-setting-picker-icon {
-    inline-size: var(--control-height);
     justify-content: center;
     border-color: transparent;
     background: transparent;
@@ -1026,35 +1025,35 @@
 
   @media (min-width: 40rem) {
     .ui-app-setting-picker-trigger[data-kind="locale"] {
-      inline-size: var(--app-setting-picker-locale-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-locale-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="timezone"] {
-      inline-size: var(--app-setting-picker-timezone-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-timezone-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="dateFormat"] {
-      inline-size: var(--app-setting-picker-date-format-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-date-format-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="timeFormat"] {
-      inline-size: var(--app-setting-picker-time-format-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-time-format-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="theme"] {
-      inline-size: var(--app-setting-picker-theme-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-theme-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="brand"] {
-      inline-size: var(--app-setting-picker-brand-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-brand-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="density"] {
-      inline-size: var(--app-setting-picker-density-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-density-width);
     }
 
     .ui-app-setting-picker-trigger[data-kind="fontSize"] {
-      inline-size: var(--app-setting-picker-font-size-width);
+      --app-setting-picker-trigger-width: var(--app-setting-picker-font-size-width);
     }
   }
 }

package/dist/tokens/components/form.css

@@ -10,6 +10,8 @@
 
   --form-block-gap: var(--space-4);
 
+  --form-feedback-icon-size: var(--icon-size-sm);
+
   --form-field-row-gap: var(--space-3);
 
   --form-grid-row-gap: var(--form-field-row-gap);

package/dist/tokens/components/navigation.css

@@ -187,6 +187,8 @@
   --app-setting-picker-density-width: 10rem;
   --app-setting-picker-font-size-width: 9rem;
 
+  --app-setting-picker-trigger-width: auto;
+
   --app-setting-picker-width-breakpoint: 40rem;
   --app-setting-picker-bar-border-width: 0;
   --app-setting-picker-bar-shadow: none;

package/docs/COMPOSITION-VS-COMPONENT.md

@@ -77,6 +77,7 @@ new UI need
 | `Select` (incl. search/async)                           | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component**                                                  |
 | `DataTable`, `Dialog`, `Calendar`, `Switch`, `Combobox` | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component**                                                  |
 | `StatCard` (+ `icon`)                                   | ✅  | ➖  | ✅  | ✅  | ✅  | ✅  | ✅  | **Framework component** (a reusable KPI tile with a stable API + tokens) |
+| `ServiceLauncherCard`                                   | ➖  | ❌  | ❌  | ✅  | ✅  | ➖  | ➖  | **Composition by the test — RETAINED as a recorded exception** (gh#814) |
 | Marketing **Hero**                                      | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — section, static, composable, brand-specific            |
 | **Navbar** / **Footer**                                 | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — layout of `Text`/`Button`/`Flex`                       |
 | **PricingTable** / feature grid                         | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | ❌  | **Composition** — `ResponsiveGrid` + `Card`                              |
@@ -85,6 +86,8 @@ new UI need
 
 `✅ pass · ❌ fail · ➖ borderline`. **StatCard** is the instructive borderline: C2 is weak (it owns little behavior), but it is a universal KPI tile with a controlled API, fully tokenized, broadly reused — so it earns its place. A **Hero** fails six of seven; it is unambiguously a composition.
 
+**ServiceLauncherCard is the ONE recorded exception, and it is recorded so that it stays one.** It shipped before the test was run against it, and when the test was run it came back with two hard FAILs: **C2** — no state, no keyboard handling, no focus management, its only ARIA three static attributes — and **C3** — its own imports are `Card` + `CardContent` + `Badge` + a Lucide glyph, so "could I build this right now from primitives?" is yes. By §2 that makes it a composition pattern. It is kept anyway because `src/components/layout/app-launcher.tsx` consumes it: it is an internal building block of a component that **does** pass, so the question was never "should it exist" but "should it be PUBLIC", and removing a public export is breaking. Keeping it public was the cheaper call and the ledger lives on gh#814 and at the top of `src/components/data-display/service-launcher-card.tsx`. **Consumers should compose `Card` + `Badge` for a service tile** — reach for `ServiceLauncherCard` only to match `AppLauncher`'s own tiles — and this row is not precedent for adding another static tile to `src/components/`.
+
 ---
 
 ## 4. How to build a composition pattern correctly

package/docs/DESIGN-AUTHORITY.md

@@ -648,11 +648,31 @@ because removing it would break the contents anchor.
 
 **Every other focusable non-interactive element in this library is a genuinely scrollable region**
 — `.app-main`, `.ui-mobile-shell-main`, `.ui-timeline-grid`, `.ui-code-block` when it overflows,
-MasterDetail's bounded master, the DataTable and Table scroll containers, ScrollArea, and the
-BranchScopePicker list. Each carries `tabIndex={0}` for axe `scrollable-region-focusable` and must
-stay reachable, so each keeps BOTH halves rather than becoming focusable-but-unpainted. The region
-ring (`--region-focus-ring-width`, off by default) now also multiplies by `--focus-outline`, so a
-service that opts it in still cannot paint while the library-wide switch is off.
+MasterDetail's bounded master, the DataTable and Table scroll containers when they overflow,
+ScrollArea, and the BranchScopePicker list. Each carries `tabIndex={0}` for axe
+`scrollable-region-focusable` and must stay reachable, so each keeps BOTH halves rather than
+becoming focusable-but-unpainted. The region ring (`--region-focus-ring-width`, off by default) now
+also multiplies by `--focus-outline`, so a service that opts it in still cannot paint while the
+library-wide switch is off.
+
+### A focusable scroll region is ROLED and NAMED, and only exists while it scrolls (gh#817)
+
+Reaching the overflow is half the contract; knowing what you reached is the other half. A stop with
+no role and no accessible name announces nothing at all, which is why `godx-jp/id` found `Table`'s
+wrapper sitting at tab stop 27 as a bare `<div tabindex="0">`. So the Table and DataTable scroll
+containers carry `role="group"` plus a name that defaults to the localized `dataTable.scrollRegion`
+— a consumer is never forced to invent one per table, and `label` overrides it per instance.
+
+`group`, not `region`: a NAMED `region` is a landmark, so a page with three tables would ship three
+identically-named landmarks and fail axe `landmark-unique`. That collision is the reason the role
+was left off in the first place; `group` is announced, takes a name, and is not a landmark.
+
+And all three attributes are withheld until the box provably overflows (`useScrollsHorizontally`,
+`src/lib/hooks.ts`) — a focus stop that scrolls nothing is noise. The measurement may only ever
+REMOVE the stop: an unlaid-out box reports `clientWidth === 0` (SSR, jsdom, a `display:none`
+ancestor), and reading that as "nothing overflows" would strand the overflow from every keyboard
+user, a worse failure than the extra stop. Gated by
+`src/components/data-display/__tests__/table-scroll-region-a11y-817.test.tsx`.
 
 ## How a decision gets made from here
 

package/docs/data-display/scroll-area.tsx

@@ -355,6 +355,37 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>スクロール領域に名前を付ける（label）</CardTitle>
+            <CardDescription>
+              溢れている間、ビューポートは Tab
+              で止まる（キーボードだけで中身を送るために必要）。その停止点は名前を持つ。既定は
+              「スクロール可能な領域」の翻訳で、画面がその領域を呼べるときは label
+              で「監査ログ」と名乗る。ロールはランドマークの region ではなく group
+              にしてある。同じ名前のランドマークが一画面に並ぶと axe landmark-unique
+              に触れるため。溢れていなければ停止点も role も名前も出ない（gh#821）。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Card variant="outline" className="w-full">
+              <CardContent flush>
+                <ScrollArea className="h-40" label="監査ログ">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>内容が収まる場合（バー非表示）</CardTitle>