@godxjp/ui 27.10.0 → 27.11.0

package/dist/components/ui/toggle-group.d.ts

@@ -11,6 +11,23 @@ type ToggleGroupBaseProp = Omit<React.ComponentPropsWithoutRef<"div">, "defaultV
     disabled?: boolean;
     /** Which way the arrow keys walk the group. */
     orientation?: "horizontal" | "vertical";
+    /**
+     * Let the row break onto further lines instead of running past its rail (gh#741). Same name,
+     * same boolean shape and same `data-wrap` attribute as `Flex` — one spelling answers "what does
+     * this row do when it does not fit" across the library.
+     *
+     * OPT-IN (`false`), and deliberately the SAME default for every `variant`. `Flex`'s `wrap` is
+     * `false`, and one word must not mean two defaults. Measured in Chromium at a 320px rail:
+     * forcing `flex-wrap: wrap` on all 18 groups of the docs page left the 17 that FIT untouched
+     * (same line count, same height, at a 320px and a 1358px rail) — including every `soft` one, so
+     * paint is not the axis that decides. The only row it moves is the one that overflows, from
+     * 171.5px to 108px: a default of `true` reflows exactly those rows, silently, on an upgrade
+     * whose call sites did not change.
+     *
+     * Wrapping keeps the group's single `gap`, so the two axes stay equal (4px × 4px measured);
+     * `flex-wrap` reorders nothing, so arrow keys still walk the items in DOM order across lines.
+     */
+    wrap?: boolean;
     /**
      * Writing direction. It still lands on the DOM node, but React Aria reads the direction it
      * navigates by from the ambient locale (`I18nProvider`), NOT from this attribute — where Radix

package/dist/components/ui/toggle-group.js

@@ -32,6 +32,7 @@ const ToggleGroup = React.forwardRef(
     variant,
     size,
     shape,
+    wrap,
     children,
     type,
     value,
@@ -60,6 +61,7 @@ const ToggleGroup = React.forwardRef(
         "data-variant": variant,
         "data-size": size,
         "data-shape": shape,
+        "data-wrap": wrap ? "true" : void 0,
         className: cn("ui-toggle-group", className),
         ...props,
         selectionMode: type,

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": "27.10.0",
+  "version": "27.11.0",
   "targetSize": {
     "standard": "WCAG 2.2 SC 2.5.8 Target Size (Minimum), level AA — 24×24 CSS px",
     "min": 24,

package/dist/props/registry.d.ts

@@ -2464,6 +2464,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: "Localized unit folded into the accessible name so a counted icon/emoji chip never announces as a bare number.";
         }];
     };
+    readonly ToggleGroupProp: {
+        readonly group: "data-entry";
+        readonly file: "components/ui/toggle-group.tsx";
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "SizeProp", "ShapeProp", "ClassNameProp", {
+            readonly field: "wrap";
+            readonly local: true;
+            readonly reason: "The SAME boolean shorthand for flex-wrap that FlexProp carries, on the row that owns a chip set — one spelling for 'what does this row do when it does not fit' (gh#741). Opt-in, and the same default for every variant: paint must not decide geometry.";
+        }];
+    };
     readonly ToggleGroupItemProp: {
         readonly group: "data-entry";
         readonly file: "components/ui/toggle-group.tsx";

package/dist/props/registry.js

@@ -2863,6 +2863,24 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  ToggleGroupProp: {
+    group: "data-entry",
+    file: "components/ui/toggle-group.tsx",
+    vocabulary: [
+      "ValueProp",
+      "DefaultValueProp",
+      "OnValueChangeProp",
+      "DisabledProp",
+      "SizeProp",
+      "ShapeProp",
+      "ClassNameProp",
+      {
+        field: "wrap",
+        local: true,
+        reason: "The SAME boolean shorthand for flex-wrap that FlexProp carries, on the row that owns a chip set \u2014 one spelling for 'what does this row do when it does not fit' (gh#741). Opt-in, and the same default for every variant: paint must not decide geometry."
+      }
+    ]
+  },
   ToggleGroupItemProp: {
     group: "data-entry",
     file: "components/ui/toggle-group.tsx",

package/dist/styles/control.css

@@ -78,9 +78,14 @@
   .ui-toggle-group {
     display: inline-flex;
     align-items: center;
+
     gap: var(--space-1);
   }
 
+  .ui-toggle-group[data-wrap="true"] {
+    flex-wrap: wrap;
+  }
+
   .ui-button {
     display: inline-flex;
     align-items: center;

package/docs/data-entry/toggle-group.tsx

@@ -5,6 +5,22 @@ import { FormField, ToggleGroup, ToggleGroupItem } from "@godxjp/ui/data-entry";
 import { Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
 
+/** A folder's tag facets — more chips than any rail is wide, which is the `wrap` case (gh#741). */
+const folderTags = [
+  { value: "design", label: "設計", count: 12 },
+  { value: "runbook", label: "運用手順", count: 148 },
+  { value: "security", label: "セキュリティ", count: 37 },
+  { value: "onboarding", label: "オンボーディング", count: 9 },
+  { value: "incident", label: "障害報告", count: 64 },
+  { value: "contract", label: "契約", count: 21 },
+  { value: "billing", label: "請求", count: 83 },
+  { value: "release", label: "リリース", count: 156 },
+  { value: "meeting", label: "議事録", count: 402 },
+  { value: "hr", label: "人事", count: 18 },
+  { value: "legal", label: "法務", count: 6 },
+  { value: "archive", label: "アーカイブ", count: 311 },
+];
+
 /**
  * ToggleGroup — single or multi-select toggle set. type='single' for mutually
  * exclusive modes; type='multiple' for independent selections. Never raw radio
@@ -14,6 +30,7 @@ export default function Demo() {
   const [period, setPeriod] = useState<string>("monthly");
   const [formats, setFormats] = useState<string[]>(["pdf"]);
   const [view, setView] = useState<string>("list");
+  const [tags, setTags] = useState<string[]>(["design", "runbook"]);
 
   return (
     <PageContainer
@@ -165,6 +182,72 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>wrap · 折り返すタグ絞り込みの行</CardTitle>
+            <CardDescription>
+              wrap
+              を付けた行は、レールに収まらなくなった時点で次の行へ折り返す（gh#741）。名前も真偽値も
+              data-wrap 属性も Flex と同じ。既定は false で、variant
+              によって既定を変えることはしない。320px のレールで測ると 4 項目のセグメントは wrap
+              の有無に関わらず 1 行 32px
+              のままで、変わるのは元から溢れていた行だけだからである。折り返しても gap は 1
+              つなので、行間と列間は同じ 4px になる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  wrap · variant=&quot;soft&quot; shape=&quot;pill&quot; size=&quot;xs&quot; ·
+                  タグが 12 個あっても ToggleGroup は 1 つのまま（value / onValueChange も 1
+                  つ、矢印キーは折り返した行をまたいで DOM 順に進む）
+                </Text>
+                <ToggleGroup
+                  type="multiple"
+                  variant="soft"
+                  shape="pill"
+                  size="xs"
+                  wrap
+                  value={tags}
+                  onValueChange={(v) => setTags(v as string[])}
+                  aria-label="タグで絞り込み"
+                >
+                  {folderTags.map((tag) => (
+                    <ToggleGroupItem
+                      key={tag.value}
+                      value={tag.value}
+                      count={tag.count}
+                      countLabel="ページ"
+                    >
+                      {tag.label}
+                    </ToggleGroupItem>
+                  ))}
+                </ToggleGroup>
+                <Text as="p" size="sm" tone="muted">
+                  選択中: {tags.length === 0 ? "なし" : tags.join(" / ")}
+                </Text>
+              </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  wrap なし（既定）· セグメントは 1 行 32px のまま、何も変わらない
+                </Text>
+                <ToggleGroup
+                  type="single"
+                  variant="outline"
+                  defaultValue="daily"
+                  aria-label="集計単位"
+                >
+                  <ToggleGroupItem value="daily">日次</ToggleGroupItem>
+                  <ToggleGroupItem value="monthly">月次</ToggleGroupItem>
+                  <ToggleGroupItem value="quarterly">四半期</ToggleGroupItem>
+                  <ToggleGroupItem value="yearly">年次</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>size · xs / sm / md / lg</CardTitle>

package/package.json

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