@godxjp/ui 19.2.0 → 19.3.1

package/dist/components/data-display/badge.d.ts

@@ -9,7 +9,7 @@ export type BadgeVariant = "default" | "secondary" | "outline" | "dashed";
  */
 export type BadgeTone = ToneProp | "primary";
 declare const badgeVariants: (props?: ({
-    variant?: "dashed" | "default" | "outline" | "secondary" | null | undefined;
+    variant?: "dashed" | "default" | "outline" | "secondary" | "tinted" | null | undefined;
     shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "children">, Omit<VariantProps<typeof badgeVariants>, "variant" | "shape"> {
@@ -17,13 +17,29 @@ export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "
     /** Corner shape — `default` (badge radius) · `pill` (fully rounded) · `sharp` (square). */
     shape?: ShapeProp | null;
     tone?: BadgeTone | null;
+    /**
+     * The entity's OWN colour — a status colour, an issue type, a tag — as a CSS
+     * colour. A third axis beside `variant` (structure) and `tone` (meaning):
+     * this one carries DATA, a colour a person picked in a settings screen.
+     *
+     * The chip is washed rather than filled, and the reason is a contrast floor
+     * rather than taste: no foreground clears WCAG AA against every colour a
+     * picker can produce (near-black and white measure equal at luminance 0.2029,
+     * both 4.15:1). Washing the colour `--badge-tint-fill` into
+     * `--badge-tint-surface` and keeping the surface's own label makes the ratio
+     * a function of the tokens instead — 8.52:1 at the defaults, worst case
+     * across the sRGB cube on both themes.
+     *
+     * Wins over `tone` and over `variant`'s fill when both are given.
+     */
+    color?: string;
     icon?: React.ComponentType<{
         className?: string;
     }> | null;
     status?: string;
     children?: React.ReactNode;
 }
-export declare function Badge({ className, variant, shape, tone, icon, status, children, ...props }: BadgeProps): React.JSX.Element;
+export declare function Badge({ className, variant, shape, tone, color, icon, status, style, children, ...props }: BadgeProps): React.JSX.Element;
 /**
  * Status-aware badge with the shared domain-status-to-tone mapping. `Badge` remains the
  * general-purpose primitive.

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

@@ -57,7 +57,13 @@ const badgeVariants = cva(
         default: "border-transparent bg-primary text-primary-foreground",
         secondary: "border-transparent bg-secondary text-secondary-foreground",
         outline: "text-foreground",
-        dashed: "border-dashed text-foreground"
+        dashed: "border-dashed text-foreground",
+        /* `color` mode. Deliberately empty and deliberately NOT in the public
+         * `BadgeVariant` union: every fill, border and text utility has to stay
+         * off the element so badge-layout.css's `[data-tinted]` rule is
+         * reachable (a utility beats a components-layer rule whatever the
+         * specificity — gh#260). Selected by the `color` prop, never by hand. */
+        tinted: ""
       },
       // Corner shape — default inherits the badge radius token; pill/sharp override via the tokens.
       shape: {
@@ -84,8 +90,10 @@ function Badge({
   variant,
   shape,
   tone,
+  color,
   icon,
   status,
+  style,
   children,
   ...props
 }) {
@@ -94,17 +102,23 @@ function Badge({
   const resolvedTone = tone ?? statusDef?.tone ?? "default";
   const ResolvedIcon = icon === void 0 ? statusDef?.icon : icon;
   const resolvedChildren = children ?? (status ? status in STATUS_MAP ? t(`status.${status}`) : status : void 0);
+  const tinted = color != null && color !== "";
   return /* @__PURE__ */ jsxs(
     "div",
     {
       "data-slot": "badge",
-      "data-tone": resolvedTone,
+      "data-tone": tinted ? void 0 : resolvedTone,
+      "data-tinted": tinted ? "" : void 0,
       "data-shape": shape ?? "default",
       className: cn(
-        badgeVariants({ variant: variant ?? "default", shape: shape ?? "default" }),
-        badgeToneClass[resolvedTone],
+        badgeVariants({
+          variant: tinted ? "tinted" : variant ?? "default",
+          shape: shape ?? "default"
+        }),
+        tinted ? void 0 : badgeToneClass[resolvedTone],
         className
       ),
+      style: tinted ? { ...style, ["--badge-color"]: color } : style,
       ...props,
       children: [
         ResolvedIcon ? /* @__PURE__ */ jsx(ResolvedIcon, { "data-slot": "badge-icon", "aria-hidden": "true" }) : null,

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

@@ -140,6 +140,13 @@ export type BadgeProp = {
     variant?: "default" | "secondary" | "outline";
     /** Status tones plus a brand `primary` tone (soft brand pill); solid brand = `variant="default"`. */
     tone?: ToneProp | "primary";
+    /**
+     * The entity's OWN colour (a status, an issue type, a tag) as a CSS colour —
+     * DATA, not a semantic tone. Washed into `--badge-tint-surface` rather than
+     * filled, because no foreground clears WCAG AA against every colour a picker
+     * can produce. Wins over `tone` and over `variant`'s fill.
+     */
+    color?: string;
     status?: string;
     icon?: React.ComponentType<{
         className?: string;

package/dist/props/registry.d.ts

@@ -1160,7 +1160,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly BadgeProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["BadgeVariantProp", "ShapeProp", "ToneProp", "ChildrenProp", "ClassNameProp"];
+        readonly vocabulary: readonly ["BadgeVariantProp", "ShapeProp", "ToneProp", "ChildrenProp", "ClassNameProp", {
+            readonly field: "color";
+            readonly local: true;
+            readonly reason: "The entity's OWN colour as a CSS colour string — DATA a person picked in a settings screen (a status, an issue type, a tag), a third axis beside `variant` (structure) and `tone` (meaning). No vocabulary type fits: ToneProp is the closed semantic set, and this value is open by definition. Washed into --badge-tint-surface rather than filled, because no foreground clears WCAG AA against every colour a picker can produce.";
+        }];
     };
     readonly DataTableProp: {
         readonly group: "data-display";

package/dist/props/registry.js

@@ -1345,7 +1345,18 @@ const COMPONENT_PROP_REGISTRY = {
   BadgeProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
-    vocabulary: ["BadgeVariantProp", "ShapeProp", "ToneProp", "ChildrenProp", "ClassNameProp"]
+    vocabulary: [
+      "BadgeVariantProp",
+      "ShapeProp",
+      "ToneProp",
+      "ChildrenProp",
+      "ClassNameProp",
+      {
+        field: "color",
+        local: true,
+        reason: "The entity's OWN colour as a CSS colour string \u2014 DATA a person picked in a settings screen (a status, an issue type, a tag), a third axis beside `variant` (structure) and `tone` (meaning). No vocabulary type fits: ToneProp is the closed semantic set, and this value is open by definition. Washed into --badge-tint-surface rather than filled, because no foreground clears WCAG AA against every colour a picker can produce."
+      }
+    ]
   },
   DataTableProp: {
     group: "data-display",

package/dist/styles/badge-layout.css

@@ -25,6 +25,21 @@
     }
   }
 
+  [data-slot="badge"][data-tinted] {
+
+    background-color: color-mix(
+      in srgb,
+      var(--badge-tint-surface),
+      var(--badge-color) var(--badge-tint-fill)
+    );
+    border-color: color-mix(
+      in srgb,
+      var(--badge-tint-surface),
+      var(--badge-color) var(--badge-tint-edge)
+    );
+    color: var(--badge-tint-foreground);
+  }
+
   [data-slot="badge-icon"] {
     width: var(--badge-icon-size);
     height: var(--badge-icon-size);

package/dist/tokens/components/badge.css

@@ -10,4 +10,12 @@
   --badge-line-height: calc(1 / 0.75);
 
   --badge-icon-size: var(--icon-size-xs);
+
+  --badge-tint-fill: 18%;
+  --badge-tint-edge: 45%;
+
+  --badge-tint-surface: hsl(var(--card));
+  --badge-tint-foreground: hsl(var(--card-foreground));
+
+  --badge-color: var(--badge-tint-surface);
 }

package/docs/data-display/badge.tsx

@@ -30,6 +30,21 @@ const shapes = [
   { shape: "sharp" as const, label: "角 Sharp" },
 ];
 
+/**
+ * Colours a person picked, not colours that mean something — a status and an
+ * issue type out of a project's own settings screen, plus the two ends of the
+ * range an administrator can still type. `#488a5a` is here because it is the
+ * worst case for a SOLID chip: near-black and white measure equal on it, both
+ * 4.15:1, under the 4.5 badge-sized text needs. Washed, it clears 8.52.
+ */
+const dataColours = [
+  { color: "#4488c5", label: "処理中 In progress" },
+  { color: "#ea9a10", label: "未対応 Open" },
+  { color: "#488a5a", label: "完了 Done" },
+  { color: "#000000", label: "黒 Black" },
+  { color: "#ffffff", label: "白 White" },
+];
+
 const tones = [
   { tone: "default" as const, label: "既定 Default" },
   { tone: "primary" as const, label: "ブランド Brand" },
@@ -120,6 +135,27 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>The record&rsquo;s own colour</CardTitle>
+            <CardDescription>
+              color carries DATA: a status an administrator coloured, an issue type, a tag. The chip
+              is washed into the surface rather than filled, because a solid chip has to choose a
+              foreground and no choice is readable for every colour a picker can produce. Retune the
+              wash with --badge-tint-fill / --badge-tint-edge.
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" wrap align="center" gap="sm">
+              {dataColours.map((c) => (
+                <Badge key={c.color} shape="pill" color={c.color}>
+                  {c.label}
+                </Badge>
+              ))}
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Semantic tones</CardTitle>

package/docs/data-display/carousel.tsx

@@ -39,7 +39,7 @@ const slides = [
 function DotNavExample() {
   return (
     <Carousel
-      className="px-10"
+      style={{ paddingInline: "var(--space-10)" }}
       opts={{ loop: true }}
       aria-label="ドットナビゲーション付きカルーセル"
     >
@@ -71,7 +71,7 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Carousel className="px-10" aria-label="月次 KPI カルーセル">
+            <Carousel style={{ paddingInline: "var(--space-10)" }} aria-label="月次 KPI カルーセル">
               <CarouselContent>
                 {months.map((m) => (
                   <CarouselItem key={m.label} className="basis-full sm:basis-1/2 lg:basis-1/3">
@@ -96,7 +96,7 @@ export default function Demo() {
           </CardHeader>
           <CardContent>
             <Carousel
-              className="px-10"
+              style={{ paddingInline: "var(--space-10)" }}
               opts={{ loop: true, align: "start" }}
               aria-label="ループギャラリーカルーセル"
             >
@@ -137,7 +137,11 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Carousel className="py-10" opts={{ axis: "y" }} aria-label="縦方向カルーセル">
+            <Carousel
+              style={{ paddingBlock: "var(--space-10)" }}
+              opts={{ axis: "y" }}
+              aria-label="縦方向カルーセル"
+            >
               <CarouselContent className="h-48">
                 {slides.map((s) => (
                   <CarouselItem key={s.label}>

package/docs/data-display/data-table/examples/grid-features.tsx

@@ -149,7 +149,7 @@ export default function Demo() {
       </Card>
 
       {lastClicked ? (
-        <Text as="p" tone="muted" className="mt-3">
+        <Text as="p" tone="muted">
           行クリック: {lastClicked}
         </Text>
       ) : null}

package/docs/data-display/permission-matrix.tsx

@@ -145,15 +145,19 @@ export default function Demo() {
                   <Label htmlFor="pm-doc-diff-only">差分のみ</Label>
                 </Flex>
               </Flex>
-              <div className="border-border overflow-hidden rounded-md border">
-                <PermissionMatrix
-                  roles={ROLES}
-                  permissions={PERMISSIONS}
-                  grants={grants}
-                  compare={[compareA, compareB]}
-                  diffOnly={diffOnly}
-                />
-              </div>
+              <Card variant="outline" className="overflow-hidden">
+                <CardContent flush>
+                  <div>
+                    <PermissionMatrix
+                      roles={ROLES}
+                      permissions={PERMISSIONS}
+                      grants={grants}
+                      compare={[compareA, compareB]}
+                      diffOnly={diffOnly}
+                    />
+                  </div>
+                </CardContent>
+              </Card>
             </Flex>
           </CardContent>
         </Card>

package/docs/data-display/popover.tsx

@@ -1,5 +1,6 @@
 import { useState } from "react";
 import {
+  Badge,
   Card,
   CardContent,
   CardDescription,
@@ -40,7 +41,7 @@ export default function Demo() {
           <CardContent>
             <Popover defaultOpen>
               <PopoverAnchor asChild>
-                <span className="inline-flex rounded border px-3 py-2">請求額 ¥482,000</span>
+                <Badge variant="outline">請求額 ¥482,000</Badge>
               </PopoverAnchor>
               <PopoverContent side="right" aria-label="請求額の補足">
                 <PopoverDescription>税額と支払条件の補足情報です。</PopoverDescription>

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

@@ -109,31 +109,38 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea
-              anchor="bottom"
-              viewportRef={streamViewport}
-              onAnchoredChange={setAnchored}
-              type="always"
-              className="border-border h-64 w-full rounded-md border"
-            >
-              <Flex direction="col" className="px-3">
-                {posts.map((post) => (
-                  <Flex key={post.id} direction="col" className="py-2">
-                    <Flex gap="sm" align="baseline">
-                      <Text size="sm" weight="medium">
-                        {post.author}
-                      </Text>
-                      <Text size="xs" tone="muted">
-                        {timeFormatter.format(new Date(STREAM_EPOCH + post.id * STREAM_STEP_MS))}
-                      </Text>
+            <Card variant="outline" className="h-64 w-full">
+              <CardContent flush>
+                <ScrollArea
+                  anchor="bottom"
+                  viewportRef={streamViewport}
+                  onAnchoredChange={setAnchored}
+                  type="always"
+                >
+                  <CardContent>
+                    <Flex direction="col">
+                      {posts.map((post) => (
+                        <Flex key={post.id} direction="col" gap="xs">
+                          <Flex gap="sm" align="baseline">
+                            <Text size="sm" weight="medium">
+                              {post.author}
+                            </Text>
+                            <Text size="xs" tone="muted">
+                              {timeFormatter.format(
+                                new Date(STREAM_EPOCH + post.id * STREAM_STEP_MS),
+                              )}
+                            </Text>
+                          </Flex>
+                          <Text size="sm" tone="muted">
+                            {post.body}
+                          </Text>
+                        </Flex>
+                      ))}
                     </Flex>
-                    <Text size="sm" tone="muted">
-                      {post.body}
-                    </Text>
-                  </Flex>
-                ))}
-              </Flex>
-            </ScrollArea>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
           <CardFooter>
             <Flex gap="sm" wrap>
@@ -164,20 +171,21 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea
-              anchor="bottom"
-              anchorOffset={0}
-              type="always"
-              className="border-border h-40 w-full rounded-md border"
-            >
-              <Flex direction="col" gap="xs" className="p-3">
-                {entries.map((e) => (
-                  <Text key={e} size="sm" className="tabular-nums">
-                    {e}
-                  </Text>
-                ))}
-              </Flex>
-            </ScrollArea>
+            <Card variant="outline" className="h-40 w-full">
+              <CardContent flush>
+                <ScrollArea anchor="bottom" anchorOffset={0} type="always">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {entries.map((e) => (
+                        <Text key={e} size="sm" className="tabular-nums">
+                          {e}
+                        </Text>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -189,15 +197,21 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea className="border-border h-56 w-full rounded-md border">
-              <Flex direction="col" gap="xs" className="p-3">
-                {entries.map((e) => (
-                  <div key={e} className="text-sm tabular-nums">
-                    {e}
-                  </div>
-                ))}
-              </Flex>
-            </ScrollArea>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea>
+                  <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>
 
@@ -210,15 +224,21 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea type="always" className="border-border h-56 w-full rounded-md border">
-              <Flex direction="col" gap="xs" className="p-3">
-                {entries.map((e) => (
-                  <div key={e} className="text-sm tabular-nums">
-                    {e}
-                  </div>
-                ))}
-              </Flex>
-            </ScrollArea>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea type="always">
+                  <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>
 
@@ -233,16 +253,22 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea className="border-border w-full rounded-md border">
-              <Flex gap="lg" className="w-max p-3">
-                {columns.map((c) => (
-                  <div key={c} className="text-sm whitespace-nowrap tabular-nums">
-                    {c}
-                  </div>
-                ))}
-              </Flex>
-              <ScrollBar orientation="horizontal" />
-            </ScrollArea>
+            <Card variant="outline" className="w-full">
+              <CardContent flush>
+                <ScrollArea>
+                  <CardContent>
+                    <Flex gap="lg" className="w-max">
+                      {columns.map((c) => (
+                        <div key={c} className="text-sm whitespace-nowrap tabular-nums">
+                          {c}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                  <ScrollBar orientation="horizontal" />
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
 
@@ -254,15 +280,21 @@ export default function Demo() {
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <ScrollArea type="always" className="border-border h-56 w-full rounded-md border">
-              <Flex direction="col" gap="xs" className="p-3">
-                {shortEntries.map((e) => (
-                  <div key={e} className="text-sm tabular-nums">
-                    {e}
-                  </div>
-                ))}
-              </Flex>
-            </ScrollArea>
+            <Card variant="outline" className="h-56 w-full">
+              <CardContent flush>
+                <ScrollArea type="always">
+                  <CardContent>
+                    <Flex direction="col" gap="xs">
+                      {shortEntries.map((e) => (
+                        <div key={e} className="text-sm tabular-nums">
+                          {e}
+                        </div>
+                      ))}
+                    </Flex>
+                  </CardContent>
+                </ScrollArea>
+              </CardContent>
+            </Card>
           </CardContent>
         </Card>
       </Flex>

package/docs/data-display/table.tsx

@@ -38,7 +38,7 @@ export default function Demo() {
           </CardHeader>
           <CardContent flush>
             <Table>
-              <caption className="px-4 py-2 text-start">
+              <caption className="text-start" style={{ padding: "var(--space-2) var(--space-4)" }}>
                 <Text size="xs" tone="muted">
                   2026年5月 売上計上（税込）
                 </Text>

package/docs/data-entry/calendar.tsx

@@ -83,7 +83,7 @@ export default function Demo() {
                   期間を選択
                 </Button>
               </PopoverTrigger>
-              <PopoverContent className="w-auto p-0" align="start">
+              <PopoverContent className="w-auto" style={{ padding: 0 }} align="start">
                 <Calendar
                   mode="range"
                   selected={range}

package/docs/data-entry/checkbox.tsx

@@ -111,7 +111,7 @@ export default function Demo() {
                   onCheckedChange={(next) => setScopes(next === true ? ALL_SCOPES : [])}
                 />
               </Field>
-              <Flex direction="col" gap="sm" className="ps-6">
+              <Flex direction="col" gap="sm" style={{ paddingInlineStart: "var(--space-6)" }}>
                 <Field id="scope-read" label="閲覧">
                   <Checkbox
                     id="scope-read"

package/docs/data-entry/country-picker-recipe.tsx

@@ -1,6 +1,13 @@
 import { useState } from "react";
 
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@godxjp/ui/data-display";
+import {
+  Badge,
+  Card,
+  CardContent,
+  CardDescription,
+  CardHeader,
+  CardTitle,
+} from "@godxjp/ui/data-display";
 import { FormField, Select } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
@@ -63,12 +70,10 @@ async function loadCountries({ query }: SelectLoadParams): Promise<SelectLoadRes
 // real product ships an SVG flag set and renders it here. Tokens only — no hex, no inline style.
 function renderCountry(option: SelectOption) {
   return (
-    <span className="flex items-center gap-2">
-      <Text size="xs" tone="muted" mono className="bg-muted rounded px-1.5 py-0.5">
-        {option.value}
-      </Text>
+    <Flex align="center" gap="sm">
+      <Badge variant="secondary">{option.value}</Badge>
       <Text truncate>{option.label}</Text>
-    </span>
+    </Flex>
   );
 }