@godxjp/ui 27.9.0 → 27.10.0

package/dist/components/data-entry/upload.d.ts

@@ -4,4 +4,4 @@ export type { UploadProp, UploadProp as UploadProps, UploadFileItemProp, UploadV
 export type { UploadFileItem, UploadVariant, UploadCommitAction } from "./upload-types.js";
 export { collectUploadCommitActions, createUploadItem, UPLOAD_LIST_IGNORE } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, listType, triggerSize, triggerVariant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled: disabledProp, readOnly, directory, pastable, openFileDialogOnClick, name, action, method, headers, data, withCredentials, beforeUpload, onReject, onRemove, onPreview, onDownload, previewFile, onDrop, showUploadList, itemRender, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;
+export declare function Upload({ variant, listType, triggerSize, triggerVariant, triggerIcon: TriggerIcon, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled: disabledProp, readOnly, directory, pastable, openFileDialogOnClick, name, action, method, headers, data, withCredentials, beforeUpload, onReject, onRemove, onPreview, onDownload, previewFile, onDrop, showUploadList, itemRender, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;

package/dist/components/data-entry/upload.js

@@ -70,6 +70,7 @@ function Upload({
   listType,
   triggerSize,
   triggerVariant = "outline",
+  triggerIcon: TriggerIcon = UploadIcon,
   value,
   defaultValue,
   onValueChange,
@@ -498,7 +499,7 @@ function Upload({
           "aria-label": triggerAriaLabel,
           children: [
             /* @__PURE__ */ jsx(
-              UploadIcon,
+              TriggerIcon,
               {
                 className: "ui-upload-trigger-icon",
                 "data-with-label": iconOnly ? void 0 : "",

package/dist/components/general/button.d.ts

@@ -21,5 +21,6 @@ export declare const Button: React.ForwardRefExoticComponent<React.ButtonHTMLAtt
     count?: number;
     overflowCount?: number;
     showZero?: boolean;
+    countLabel?: string;
 } & React.RefAttributes<HTMLButtonElement>>;
 export { buttonVariants };

package/dist/components/general/button.js

@@ -71,6 +71,7 @@ const Button = React.forwardRef(
     count,
     overflowCount = 99,
     showZero = true,
+    countLabel,
     disabled,
     type,
     children,
@@ -84,8 +85,14 @@ const Button = React.forwardRef(
       loadingText ?? children
     ] }) : children;
     const showCount = !asChild && count != null && (count !== 0 || showZero);
-    const countLabel = showCount && count != null && count > overflowCount ? `${numberFormat(locale).format(overflowCount)}+` : count != null ? numberFormat(locale).format(count) : "";
-    const countNode = showCount ? /* @__PURE__ */ jsx("span", { "data-slot": "button-count", className: "ui-button-count", children: countLabel }) : null;
+    const countText = showCount && count != null && count > overflowCount ? `${numberFormat(locale).format(overflowCount)}+` : count != null ? numberFormat(locale).format(count) : "";
+    const spokenCount = countLabel ? `${countText} ${countLabel}` : countText;
+    const ariaLabel = props["aria-label"];
+    const foldedAriaLabel = showCount && ariaLabel != null ? { "aria-label": `${ariaLabel}, ${spokenCount}` } : null;
+    const countNode = showCount ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx("span", { "data-slot": "button-count", className: "ui-button-count", "aria-hidden": "true", children: countText }),
+      /* @__PURE__ */ jsx("span", { className: "sr-only", children: `, ${spokenCount}` })
+    ] }) : null;
     return /* @__PURE__ */ jsx(
       Comp,
       {
@@ -109,6 +116,7 @@ const Button = React.forwardRef(
         ),
         ref,
         ...props,
+        ...foldedAriaLabel,
         children: asChild ? children : /* @__PURE__ */ jsxs(Fragment, { children: [
           content,
           countNode

package/dist/components/layout/page-container.d.ts

@@ -1,5 +1,5 @@
 import type { PageContainerProp, PageInsetProp } from "../../props/components/layout.prop.js";
-export type { PageContainerProp, PageContainerProp as PageContainerProps, } from "../../props/components/layout.prop.js";
+export type { PageContainerProp, PageContainerProp as PageContainerProps, PageContainerExtraProp, } from "../../props/components/layout.prop.js";
 export type { BreadcrumbItemProp, BreadcrumbItemProp as BreadcrumbItem, } from "../../props/vocabulary/navigation.prop.js";
 export declare function PageContainerInset({ className, children, ...props }: PageInsetProp): import("react").JSX.Element;
 declare function PageContainerRoot({ title, subtitle, status, extra, toolbar, footer, toolbarPad, footerPad, breadcrumb, breadcrumbLabel, breadcrumbAriaLabel, linkComponent: LinkComponent, headerLoading, density, variant, preset, headerLayout, headerScale, measure, stickyFooter, footerReveal, fill, children, className, }: PageContainerProp): import("react").JSX.Element;

package/dist/components/layout/page-container.js

@@ -1,6 +1,6 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useEffect, useRef, useState } from "react";
+import { isValidElement, useEffect, useRef, useState } from "react";
 import { ChevronRight } from "lucide-react";
 import { useTranslation } from "../../i18n/use-translation.js";
 import { cn } from "../../lib/utils.js";
@@ -33,6 +33,12 @@ function useFooterReveal(enabled) {
 function PageContainerInset({ className, children, ...props }) {
   return /* @__PURE__ */ jsx("div", { className: cn("ui-page-container-inset", className), ...props, children });
 }
+function resolvePageExtra(extra) {
+  if (extra === void 0 || extra === null || extra === false) return {};
+  const isSlotMap = typeof extra === "object" && !isValidElement(extra) && !Array.isArray(extra);
+  if (isSlotMap) return extra;
+  return { start: extra };
+}
 function footerPadStyle(footerPad) {
   const style = padStyle(footerPad, void 0);
   const end = style?.paddingInlineEnd ?? style?.padding;
@@ -68,6 +74,7 @@ function PageContainerRoot({
   const reveal = stickyFooter && footer != null && footerReveal === "onScroll";
   const { headerRef, revealed } = useFooterReveal(reveal);
   const { t } = useTranslation();
+  const { start: extraStart, end: extraEnd } = resolvePageExtra(extra);
   return /* @__PURE__ */ jsxs(
     "div",
     {
@@ -149,7 +156,10 @@ function PageContainerRoot({
                     )
                   ) : subtitle && /* @__PURE__ */ jsx("p", { className: "ui-page-subtitle", children: subtitle })
                 ] }),
-                extra && /* @__PURE__ */ jsx("div", { className: "ui-page-header-extra", children: extra })
+                (extraStart != null || extraEnd != null) && /* @__PURE__ */ jsxs("div", { className: "ui-page-header-extra", children: [
+                  extraStart,
+                  extraEnd
+                ] })
               ] })
             ]
           }

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

@@ -2,9 +2,11 @@ import * as React from "react";
 import { type ToggleCountFields, type ToggleProp } from "./toggle.js";
 type ToggleGroupVariant = ToggleProp["variant"];
 type ToggleGroupSize = ToggleProp["size"];
+type ToggleGroupShape = ToggleProp["shape"];
 type ToggleGroupBaseProp = Omit<React.ComponentPropsWithoutRef<"div">, "defaultValue" | "dir"> & {
     variant?: ToggleGroupVariant;
     size?: ToggleGroupSize;
+    shape?: ToggleGroupShape;
     /** Disable every item at once — RAC `isDisabled`. */
     disabled?: boolean;
     /** Which way the arrow keys walk the group. */
@@ -51,6 +53,7 @@ export type ToggleGroupItemProp = Omit<React.ComponentPropsWithoutRef<"button">,
     value: string;
     variant?: ToggleGroupVariant;
     size?: ToggleGroupSize;
+    shape?: ToggleGroupShape;
 };
 export type ToggleGroupItemProps = ToggleGroupItemProp;
 export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref">, "value"> & ToggleCountFields & {
@@ -61,5 +64,6 @@ export declare const ToggleGroupItem: React.ForwardRefExoticComponent<Omit<Omit<
     value: string;
     variant?: ToggleGroupVariant;
     size?: ToggleGroupSize;
+    shape?: ToggleGroupShape;
 } & React.RefAttributes<HTMLButtonElement>>;
 export {};

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

@@ -31,6 +31,7 @@ const ToggleGroup = React.forwardRef(
     className,
     variant,
     size,
+    shape,
     children,
     type,
     value,
@@ -40,7 +41,7 @@ const ToggleGroup = React.forwardRef(
     loop: _loop,
     ...props
   }, ref) => {
-    const context = React.useMemo(() => ({ variant, size }), [variant, size]);
+    const context = React.useMemo(() => ({ variant, size, shape }), [variant, size, shape]);
     const selectedKeys = React.useMemo(() => toSelectedKeys(value), [value]);
     const defaultSelectedKeys = React.useMemo(() => toSelectedKeys(defaultValue), [defaultValue]);
     const handleSelectionChange = (keys) => {
@@ -58,6 +59,7 @@ const ToggleGroup = React.forwardRef(
         "data-slot": "toggle-group",
         "data-variant": variant,
         "data-size": size,
+        "data-shape": shape,
         className: cn("ui-toggle-group", className),
         ...props,
         selectionMode: type,
@@ -77,6 +79,7 @@ const ToggleGroupItem = React.forwardRef(
     className,
     variant,
     size,
+    shape,
     count,
     overflowCount,
     showZero,
@@ -90,6 +93,7 @@ const ToggleGroupItem = React.forwardRef(
     const context = React.useContext(ToggleGroupContext);
     const resolvedVariant = variant ?? context.variant;
     const resolvedSize = size ?? context.size;
+    const resolvedShape = shape ?? context.shape;
     const { pill, resolvedAriaLabel } = useCounterPill({
       count,
       overflowCount,
@@ -107,8 +111,12 @@ const ToggleGroupItem = React.forwardRef(
         "data-state": isPressed ? "on" : "off",
         "data-variant": resolvedVariant,
         "data-size": resolvedSize,
+        "data-shape": resolvedShape,
         "aria-label": resolvedAriaLabel,
-        className: cn(toggleVariants({ variant: resolvedVariant, size: resolvedSize }), className),
+        className: cn(
+          toggleVariants({ variant: resolvedVariant, size: resolvedSize, shape: resolvedShape }),
+          className
+        ),
         ...props,
         id: value,
         isDisabled: disabled,

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

@@ -1,8 +1,9 @@
 import * as React from "react";
 import { type VariantProps } from "class-variance-authority";
 declare const toggleVariants: (props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "soft" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+    shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
 /**
  * Not exported on its own — it is folded into `ToggleProp` and `ToggleGroupItemProp` so there is
@@ -68,8 +69,9 @@ declare function restoreDomProps<P extends {
 export type ToggleProp = React.ComponentPropsWithoutRef<"button"> & TogglePressedFields & VariantProps<typeof toggleVariants> & ToggleCountFields;
 export type ToggleProps = ToggleProp;
 export declare const Toggle: React.ForwardRefExoticComponent<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & TogglePressedFields & VariantProps<(props?: ({
-    variant?: "default" | "outline" | null | undefined;
+    variant?: "default" | "outline" | "soft" | null | undefined;
     size?: "lg" | "md" | "sm" | "xs" | null | undefined;
+    shape?: "default" | "pill" | "sharp" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string> & ToggleCountFields & React.RefAttributes<HTMLButtonElement>>;
 export { toggleVariants, useCounterPill, restoreDomProps };
 export type { ToggleCountFields, TogglePressedFields };

package/dist/components/ui/toggle.js

@@ -10,7 +10,15 @@ const toggleVariants = cva("ui-toggle", {
   variants: {
     variant: {
       default: "ui-toggle-default",
-      outline: "ui-toggle-outline"
+      outline: "ui-toggle-outline",
+      // The REST FILL (gh#734). `default` is a 1px TRANSPARENT border and `outline` a hairline on
+      // `--background`, so neither draws a chip that reads as filled before it is pressed — which
+      // is why a consumer building a tag-filter panel reported its tags "look transparent" and
+      // fell back to `Button variant="secondary" shape="pill" aria-pressed`, a control that paints
+      // no pressed state at all. `soft` is antd `Tag`'s resting surface, on the SAME
+      // `hsl(var(--secondary))` fill `Badge variant="secondary"` and `Button variant="secondary"`
+      // already paint, so a chip, a badge and a button on one row are one family.
+      soft: "ui-toggle-soft"
     },
     size: {
       // The fourth step of the shared control ladder (gh#716): 24px, `--control-height-xs`, the
@@ -20,11 +28,21 @@ const toggleVariants = cva("ui-toggle", {
       sm: "ui-toggle-sm",
       md: "ui-toggle-default-size",
       lg: "ui-toggle-lg"
+    },
+    // Corner shape at parity with `Button` and `Badge` — the same three values mapped to the same
+    // two radius tokens, so `shape="pill"` means one thing across the library. `default` is empty
+    // on purpose: it leaves `.ui-toggle`'s own `--radius-md` in place instead of restating it,
+    // exactly as `badgeVariants` does.
+    shape: {
+      default: "",
+      pill: "rounded-[var(--radius-pill)]",
+      sharp: "rounded-[var(--radius-sharp)]"
     }
   },
   defaultVariants: {
     variant: "default",
-    size: "md"
+    size: "md",
+    shape: "default"
   }
 });
 function useCounterPill({
@@ -82,6 +100,7 @@ const Toggle = React.forwardRef(
     className,
     variant,
     size,
+    shape,
     count,
     overflowCount,
     showZero,
@@ -113,7 +132,7 @@ const Toggle = React.forwardRef(
         "data-slot": "toggle",
         "data-state": isPressed ? "on" : "off",
         "aria-label": resolvedAriaLabel,
-        className: cn(toggleVariants({ variant, size }), className),
+        className: cn(toggleVariants({ variant, size, shape }), className),
         ...props,
         isSelected: isPressed,
         onChange: onSelectionChange,

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

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

@@ -1546,6 +1546,22 @@ export type UploadProp = FieldA11yProps & {
      * @see Button — same variant scale
      */
     triggerVariant?: "default" | "destructive" | "outline" | "dashed" | "secondary" | "ghost" | "link";
+    /**
+     * `variant="button"` only — the glyph COMPONENT the trigger draws, `triggerIcon={Plus}` rather
+     * than `<Plus />`. Defaults to the upload arrow.
+     *
+     * It exists because the glyph was hard-coded and `triggerVariant` only moves emphasis, so a
+     * "create new" action that HAPPENS to be an upload could not carry a plus and had to announce
+     * itself as an upload (gh#734). The component is rendered onto the `<svg>` itself, at the same
+     * `--upload-row-icon-size` the built-in glyph uses, so a swapped icon cannot change the
+     * trigger's metrics.
+     *
+     * Typed as the widened glyph component (SVG props + ref) rather than the narrower `IconProp`,
+     * for the reason `IconGlyphProp.as` already records: the library hands the glyph its class, its
+     * `aria-hidden` and its label-spacing attribute, none of which `IconProp` can accept. Every
+     * `lucide-react` icon and every `Icon`-compatible component qualifies.
+     */
+    triggerIcon?: React.ComponentType<React.SVGProps<SVGSVGElement> & React.RefAttributes<SVGSVGElement>>;
     className?: ClassNameProp;
     children?: React.ReactNode;
 };

package/dist/props/components/general.prop.d.ts

@@ -269,6 +269,18 @@ export type ButtonProp = React.ButtonHTMLAttributes<HTMLButtonElement> & {
      * `true` (a `0` pill shows); pass `false` to hide the pill at zero.
      */
     showZero?: boolean;
+    /**
+     * Localized description of what the count MEANS, folded into the accessible name so the control
+     * never announces as a bare digit run. The SAME prop and the same contract `Toggle` has carried
+     * since gh#312 — without it a counted button measured `"Git3"` in the accessibility tree, not
+     * "Git, 3 pages" (gh#734).
+     *
+     * The pill itself is `aria-hidden` and the spoken form is an `sr-only` sibling, so the name
+     * reads `"<label>, <count> <countLabel>"` from the contents; with an explicit `aria-label`
+     * (an icon-only counted button) the same clause is folded into that instead. Pass a
+     * `t()`-resolved string — the library does not own this wording.
+     */
+    countLabel?: string;
 };
 /**
  * @see Reveal — entrance-motion primitive (staggered fade-up). Wraps content in a real element

package/dist/props/components/index.d.ts

@@ -1,4 +1,4 @@
-export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelLabels, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
+export type { AppLauncherApp, AppLauncherGroup, AppLauncherLabels, AppLauncherProp, AppShellProp, AuthFooterProp, AuthIdentityProp, OrgSwitcherLabels, OrgSwitcherOrganization, OrgSwitcherProp, DragAxisProp, DragBoundsProp, DraggablePanelLabels, DraggablePanelPlacementProp, DraggablePanelPositionProp, DraggablePanelProp, PageContainerExtraProp, PageContainerProp, PageInsetProp, SidebarItemProp, SidebarProductProp, SidebarProp, SidebarSectionProp, TopbarProp, } from "./layout.prop.js";
 export type { ButtonProp } from "./general.prop.js";
 export type { CommandProp, InputProp, TextareaProp, FormFieldProp, SearchInputProp, CheckboxProp, CheckboxGroupProp, ChoiceOptionProp, RadioProp, RadioGroupProp, SwitchProp, SliderProp, CalendarProp, DatePickerProp, TimePickerProp, ColorPickerProp, UploadProp, UploadFileItemProp, UploadVariantProp, TreeOptionProp, TreeFieldNamesProp, CascaderProp, TreeSelectProp, ShowCheckedStrategyProp, TransferProp, TransferItemProp, } from "./data-entry.prop.js";
 export type { AvatarProp, EmptyStateProp, DescriptionsProp, DescriptionsItemProp, BadgeProp, DataTableProp, QrCodeProp, } from "./data-display.prop.js";

package/dist/props/components/layout.prop.d.ts

@@ -22,6 +22,24 @@ export type PageContainerMeasureProp = "default" | "narrow" | "medium";
  * `document` (default) — the row is the page's TITLE: a record, a form, a collection, a report.
  */
 export type PageContainerHeaderScaleProp = "document" | "chrome";
+/**
+ * @see PageContainer — the header's trailing slot, one node or two named sub-slots.
+ *
+ * The bare node is the shape every page already passes and stays the whole API for a single
+ * action cluster. `{ start, end }` splits that cluster in two so a page can put something AFTER
+ * the actions: the convention a consumer's four record screens share is identity → actions →
+ * pager LAST, and with one slot the pager had to live in a second header band inside the body,
+ * so the app carried two header shapes (gh#734).
+ *
+ * The shape is `TabsExtraProp`'s, deliberately — `Tabs.extra` already accepts exactly this union
+ * for exactly this reason, and a second spelling of one axis is what `check:prop-vocabulary`
+ * exists to prevent. Logical inline names (`start`/`end`, never `left`/`right`), so the slots
+ * swap sides under `dir="rtl"` with no second code path.
+ */
+export type PageContainerExtraProp = ExtraProp | {
+    start?: ReactNode;
+    end?: ReactNode;
+};
 /** @see PageContainer */
 export type PageContainerProp = {
     toolbarPad?: PadProp;
@@ -40,7 +58,8 @@ export type PageContainerProp = {
      * violation) so the page's heading outline never disappears mid-load.
      */
     headerLoading?: boolean;
-    extra?: ExtraProp;
+    /** @see PageContainerExtraProp */
+    extra?: PageContainerExtraProp;
     /**
      * FIXED chrome band between the page header and the scrolling body — a filter strip, a status
      * bar, a "channel workflow" rail. It is a first-class page-chrome slot precisely because the

package/dist/props/registry.d.ts

@@ -711,6 +711,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/layout.prop.ts";
         readonly vocabulary: readonly [];
     };
+    readonly PageContainerExtraProp: {
+        readonly group: "layout";
+        readonly file: "components/layout.prop.ts";
+        readonly vocabulary: readonly ["ExtraProp"];
+    };
     readonly PageContainerMeasureProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
@@ -2449,7 +2454,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly ToggleProp: {
         readonly group: "data-entry";
         readonly file: "components/ui/toggle.tsx";
-        readonly vocabulary: readonly ["SizeProp", "ClassNameProp", {
+        readonly vocabulary: readonly ["SizeProp", "ShapeProp", "ClassNameProp", {
             readonly field: "count";
             readonly local: true;
             readonly reason: "Counter-pill vocabulary shared VERBATIM with ButtonProp (count/overflowCount/showZero) so a counted filter tab and a counted pressed chip are one vocabulary — gh#312.";
@@ -2462,7 +2467,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly ToggleGroupItemProp: {
         readonly group: "data-entry";
         readonly file: "components/ui/toggle-group.tsx";
-        readonly vocabulary: readonly ["SizeProp", "ClassNameProp", {
+        readonly vocabulary: readonly ["SizeProp", "ShapeProp", "ClassNameProp", {
             readonly field: "count";
             readonly local: true;
             readonly reason: "Per-item counter pill — variant/size come from group context, but the number is per-item data (gh#312).";

package/dist/props/registry.js

@@ -722,6 +722,11 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/layout.prop.ts",
     vocabulary: []
   },
+  PageContainerExtraProp: {
+    group: "layout",
+    file: "components/layout.prop.ts",
+    vocabulary: ["ExtraProp"]
+  },
   PageContainerMeasureProp: {
     group: "layout",
     file: "components/layout.prop.ts",
@@ -2842,6 +2847,9 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/ui/toggle.tsx",
     vocabulary: [
       "SizeProp",
+      // The control `ShapeProp` verbatim — same three values, same two radius tokens as Button and
+      // Badge, so `shape="pill"` means one thing library-wide (gh#734).
+      "ShapeProp",
       "ClassNameProp",
       {
         field: "count",
@@ -2860,6 +2868,8 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/ui/toggle-group.tsx",
     vocabulary: [
       "SizeProp",
+      // Reaches the item through the group's context, exactly as `variant`/`size` do (gh#734).
+      "ShapeProp",
       "ClassNameProp",
       {
         field: "count",

package/dist/styles/control.css

@@ -26,6 +26,12 @@
     background: hsl(var(--background));
   }
 
+  .ui-toggle-soft {
+    border: 1px solid transparent;
+    background: var(--toggle-soft-background, hsl(var(--secondary)));
+    color: var(--toggle-soft-color, hsl(var(--secondary-foreground)));
+  }
+
   .ui-toggle-default-size {
     min-height: var(--control-height);
     padding-inline: var(--space-3);
@@ -53,6 +59,11 @@
     color: hsl(var(--accent-foreground));
   }
 
+  .ui-toggle-soft:hover {
+    background: var(--toggle-soft-hover-background, hsl(var(--secondary-hover)));
+    color: var(--toggle-soft-color, hsl(var(--secondary-foreground)));
+  }
+
   .ui-toggle[data-state="on"] {
     background: var(--toggle-on-background, hsl(var(--primary)));
     color: hsl(var(--primary-foreground));

package/dist/styles/toggle.css

@@ -16,6 +16,11 @@
     font-variant-numeric: tabular-nums;
   }
 
+  .ui-toggle-soft .ui-toggle-count {
+    background: var(--toggle-soft-count-background, hsl(var(--background)));
+    color: var(--toggle-soft-count-color, hsl(var(--foreground)));
+  }
+
   .ui-toggle[data-state="on"] {
     border-color: var(--toggle-pressed-border-color, hsl(var(--primary)));
   }

package/dist/tokens/components/toggle.css

@@ -11,6 +11,13 @@
   --toggle-count-background: initial;
   --toggle-count-color: initial;
 
+  --toggle-soft-background: initial;
+  --toggle-soft-color: initial;
+  --toggle-soft-hover-background: initial;
+
+  --toggle-soft-count-background: initial;
+  --toggle-soft-count-color: initial;
+
   --toggle-pressed-count-background: initial;
   --toggle-pressed-count-color: initial;
 

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

@@ -72,6 +72,14 @@ const TICKETS: Ticket[] = [
   },
 ];
 
+const TAGS = [
+  { value: "design", label: "設計", count: 12 },
+  { value: "runbook", label: "運用手順", count: 148 },
+  { value: "onboarding", label: "入社手続き", count: 7 },
+  { value: "security", label: "セキュリティ", count: 31 },
+  { value: "archive", label: "アーカイブ", count: 1240 },
+];
+
 const STATUS_LABEL: Record<Ticket["status"], string> = {
   open: "未対応",
   waiting: "保留中",
@@ -93,6 +101,8 @@ const COLUMNS = [
 ];
 
 export default function Demo() {
+  // The tag panel of a Wiki/document screen — the chip this vocabulary exists for.
+  const [tags, setTags] = useState<string[]>(["design"]);
   // Faceted filter chips — pressed = the facet is applied. Counts are the facet sizes.
   const [facets, setFacets] = useState<string[]>(["open"]);
   // A reaction row: the count is how many people reacted, the pressed state is whether YOU did.
@@ -112,6 +122,47 @@ export default function Demo() {
       subtitle="カウント付きの押下チップ · faceted filter · リアクション"
     >
       <Flex direction="col" gap="lg">
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>タグで絞り込む · soft + pill のチップ</CardTitle>
+            <CardDescription>
+              Wiki / ドキュメントのタグパネル。variant=&quot;soft&quot; が休止時の面（--secondary、
+              Badge variant=&quot;secondary&quot; と同じ塗り）、shape=&quot;pill&quot; が角、count
+              が件数、押下が選択。variant / size / shape はグループに一度だけ書けば context
+              で全アイテムに届く。default や outline
+              だとチップは押されるまで透明に見えるので、チップ列にはこの組み合わせを使う。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <ToggleGroup
+                type="multiple"
+                variant="soft"
+                shape="pill"
+                size="xs"
+                value={tags}
+                onValueChange={setTags}
+                aria-label="タグで絞り込み"
+              >
+                {TAGS.map((tag) => (
+                  <ToggleGroupItem
+                    key={tag.value}
+                    value={tag.value}
+                    count={tag.count}
+                    countLabel="ページ"
+                  >
+                    {tag.label}
+                  </ToggleGroupItem>
+                ))}
+              </ToggleGroup>
+              <Text tone="muted" size="sm">
+                読み上げは「設計, 12 ページ」。数字はピル側が aria-hidden で、単位つきの一文が
+                sr-only で並ぶので、ラベルと数字がくっついて「設計12」になることはない。
+              </Text>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>問い合わせ受信箱</CardTitle>

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

@@ -95,10 +95,11 @@ export default function Demo() {
 
         <Card>
           <CardHeader>
-            <CardTitle level={2}>variant · default / outline</CardTitle>
+            <CardTitle level={2}>variant · default / outline / soft</CardTitle>
             <CardDescription>
               variant は ToggleGroup にだけ指定すれば全アイテムへ伝播する（各 ToggleGroupItem
-              への繰り返し指定は不要）。default は選択時に背景が塗られ、outline は枠線で示す。
+              への繰り返し指定は不要）。default は選択時に背景が塗られ、outline は枠線で示す。soft
+              は休止時から --secondary で塗られるので、チップの列に使う。
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -123,6 +124,43 @@ export default function Demo() {
                   <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
                 </ToggleGroup>
               </Flex>
+              <Flex direction="col" gap="sm">
+                <Text as="p" size="sm" tone="muted">
+                  variant=&quot;soft&quot;
+                </Text>
+                <ToggleGroup type="single" variant="soft" defaultValue="pdf">
+                  <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
+                  <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
+                  <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
+                </ToggleGroup>
+              </Flex>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>shape · default / pill / sharp</CardTitle>
+            <CardDescription>
+              shape も variant / size と同じく行の決定なので、ToggleGroup
+              に一度書けば全アイテムへ伝播する。値は Button / Badge と同じ三つで、読む radius
+              トークンも同じ。チップの列は soft + pill。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              {(["default", "pill", "sharp"] as const).map((shape) => (
+                <Flex key={shape} direction="col" gap="sm">
+                  <Text as="p" size="sm" tone="muted">
+                    shape=&quot;{shape}&quot;
+                  </Text>
+                  <ToggleGroup type="single" variant="soft" shape={shape} defaultValue="pdf">
+                    <ToggleGroupItem value="pdf">PDF</ToggleGroupItem>
+                    <ToggleGroupItem value="csv">CSV</ToggleGroupItem>
+                    <ToggleGroupItem value="xlsx">Excel</ToggleGroupItem>
+                  </ToggleGroup>
+                </Flex>
+              ))}
             </Flex>
           </CardContent>
         </Card>

package/docs/data-entry/toggle.tsx

@@ -46,11 +46,14 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Variants</CardTitle>
             <CardDescription>
-              default (filled background when pressed) vs outline (border style).
+              default（押下時だけ面が出る・休止時は透明な 1px 枠）· outline（--background
+              の上の細い枠）· soft（休止時から --secondary で塗られる）。
+              最初の二つはツールバー向けで、休止しているチップは「何もない」ように見える。
+              チップとして並べるときは soft。
             </CardDescription>
           </CardHeader>
           <CardContent>
-            <Flex direction="row" gap="md">
+            <Flex direction="row" gap="md" wrap>
               <Toggle
                 variant="default"
                 pressed={pinned}
@@ -67,6 +70,55 @@ export default function Demo() {
               >
                 消費税対象のみ
               </Toggle>
+              <Toggle variant="soft" aria-label="草案のみ">
+                草案のみ
+              </Toggle>
+            </Flex>
+          </CardContent>
+        </Card>
+
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>
+              soft + shape=&quot;pill&quot; · チェック可能なタグチップ
+            </CardTitle>
+            <CardDescription>
+              antd の Tag.CheckableTag にあたる形。soft が休止時の面を、shape が角を担う。shape は
+              Button / Badge と同じ default / pill / sharp の三値で、同じ radius
+              トークンを読む。押下すると面が --primary に反転するので、状態は色だけに依存しない。
+              取り消せる（×つきの）タグは選択ではなく削除なので Badge の onRemove
+              側、つまり別のコンポーネントになる。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="col" gap="md">
+              <Flex direction="row" gap="sm" wrap align="center">
+                <Toggle variant="soft" shape="pill" size="xs" defaultPressed>
+                  設計
+                </Toggle>
+                <Toggle variant="soft" shape="pill" size="xs">
+                  実装
+                </Toggle>
+                <Toggle variant="soft" shape="pill" size="xs">
+                  検証
+                </Toggle>
+              </Flex>
+              <Flex direction="row" gap="sm" wrap align="center">
+                <Toggle variant="soft" shape="default">
+                  default（--radius-md）
+                </Toggle>
+                <Toggle variant="soft" shape="pill">
+                  pill
+                </Toggle>
+                <Toggle variant="soft" shape="sharp">
+                  sharp
+                </Toggle>
+              </Flex>
+              <Text as="p" size="xs" tone="muted">
+                soft の面は Badge variant=&quot;secondary&quot; / Button
+                variant=&quot;secondary&quot; と同じ --secondary。ホバーは不透明な --secondary-hover
+                なので、ページの上でもカードの上でも同じ色になる。
+              </Text>
             </Flex>
           </CardContent>
         </Card>

package/docs/data-entry/upload.tsx

@@ -9,6 +9,7 @@ import {
 } from "@godxjp/ui/data-entry";
 import { Button, Text } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
+import { FilePlus2, Plus } from "lucide-react";
 
 /**
  * Upload — drag-and-drop / button / avatar / picture file uploader (6 variants).
@@ -32,6 +33,7 @@ export default function Demo() {
   const [submittedFiles, setSubmittedFiles] = useState<string[]>([]);
   const [dropzoneItems, setDropzoneItems] = useState<UploadFileItem[]>([]);
   const [buttonItems, setButtonItems] = useState<UploadFileItem[]>([]);
+  const [triggerIconItems, setTriggerIconItems] = useState<UploadFileItem[]>([]);
   const [pictureCardItems, setPictureCardItems] = useState<UploadFileItem[]>([]);
   const [pictureItem, setPictureItem] = useState<UploadFileItem[]>([]);
   const [avatarItem, setAvatarItem] = useState<UploadFileItem[]>([]);
@@ -187,6 +189,48 @@ export default function Demo() {
           </CardContent>
         </Card>
 
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>triggerIcon · 「新規作成」がアップロードのとき</CardTitle>
+            <CardDescription>
+              variant=&quot;button&quot;
+              のトリガーが描くグリフを差し替える。コンポーネントを渡す（triggerIcon=&#123;Plus&#125;、
+              要素ではない）。triggerVariant
+              は強弱しか変えられないので、実体はアップロードでも「新規作成」として並ぶボタンは
+              これまで矢印を背負うしかなかった。クラスと余白と aria-hidden
+              はライブラリ側が持ったままなので、差し替えても大きさは --upload-row-icon-size
+              のまま、読み上げにも出ない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Flex direction="row" gap="md" wrap align="center">
+              <Upload
+                variant="button"
+                triggerIcon={Plus}
+                triggerVariant="default"
+                value={triggerIconItems}
+                onValueChange={setTriggerIconItems}
+                accept=".pdf"
+                onUpload={demoUpload}
+              >
+                資料を追加
+              </Upload>
+              <Upload
+                variant="button"
+                triggerIcon={FilePlus2}
+                triggerSize="icon-sm"
+                triggerVariant="ghost"
+                value={[]}
+                onValueChange={() => {}}
+                aria-label="請求書を添付"
+              />
+              <Upload variant="button" value={[]} onValueChange={() => {}}>
+                既定のグリフ
+              </Upload>
+            </Flex>
+          </CardContent>
+        </Card>
+
         <Card>
           <CardHeader>
             <CardTitle level={2}>Picture Card</CardTitle>

package/docs/general/button/index.tsx

@@ -8,7 +8,7 @@ import {
 } from "@godxjp/ui/data-display";
 import { Button } from "@godxjp/ui/general";
 import { Flex, PageContainer } from "@godxjp/ui/layout";
-import { Pencil, Plus, Trash2 } from "lucide-react";
+import { Bell, Pencil, Plus, Trash2 } from "lucide-react";
 
 /**
  * Button — the core action primitive. Composed only from real @godxjp/ui
@@ -26,23 +26,35 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Count</CardTitle>
             <CardDescription>
-              Trailing totals, overflow cap, and explicit zero visibility.
+              Trailing totals, overflow cap, and explicit zero visibility. countLabel
+              は数字が何を数えているかを読み上げに渡す（Toggle と同じ語彙）。ピルは aria-hidden
+              で、単位つきの一文が sr-only で並ぶので、名前は「保留中, 18 件」。countLabel
+              を渡さなくても「保留中, 18」までは分かれる。
             </CardDescription>
           </CardHeader>
           <CardContent>
             <Flex direction="row" wrap align="center" gap="md">
-              <Button variant="outline" count={18}>
+              <Button variant="outline" count={18} countLabel="件">
                 保留中
               </Button>
-              <Button variant="outline" count={128} overflowCount={99}>
+              <Button variant="outline" count={128} overflowCount={99} countLabel="件">
                 受信トレイ
               </Button>
-              <Button variant="ghost" count={0} showZero>
+              <Button variant="ghost" count={0} showZero countLabel="件">
                 完了
               </Button>
-              <Button variant="ghost" count={0} showZero={false}>
+              <Button variant="ghost" count={0} showZero={false} countLabel="件">
                 非表示のゼロ
               </Button>
+              <Button
+                variant="outline"
+                size="icon-sm"
+                aria-label="通知"
+                count={3}
+                countLabel="件の未読"
+              >
+                <Bell aria-hidden="true" />
+              </Button>
             </Flex>
           </CardContent>
         </Card>

package/docs/layout/page-container.tsx

@@ -17,7 +17,7 @@ import type { ColumnDef } from "@godxjp/ui/data-display";
 import { Button, Text } from "@godxjp/ui/general";
 import { SearchInput } from "@godxjp/ui/data-entry";
 import { ResponsiveGrid } from "@godxjp/ui/layout";
-import { Toolbar, ToolbarGroup } from "@godxjp/ui/navigation";
+import { Pagination, Toolbar, ToolbarGroup } from "@godxjp/ui/navigation";
 import { Plus, Download, Filter, Search } from "lucide-react";
 
 /**
@@ -129,6 +129,9 @@ export default function Demo() {
     { key: "ghost", label: "ghost" },
   ] as const;
 
+  /** The record pager that must sit AFTER the header's action cluster (`extra.end`). */
+  const [recordPage, setRecordPage] = useState(12);
+
   const densities = [
     { key: "compact", label: "compact" },
     { key: "default", label: "default" },
@@ -165,6 +168,69 @@ export default function Demo() {
         </ResponsiveGrid>
       </PageContainer>
 
+      {/* ── 1a. `extra` as { start, end } · 本人確認 → 操作 → ページャが最後 ── */}
+      {/* `extra` はノード 1 つでも、start / end の 2 スロットでも受ける（Tabs.extra と同じ形）。
+          レコード画面の並びは「誰の何か → 操作の束 → ページャ」で、ページャは操作の“あと”に
+          来る。1 スロットしかなかったころは、この最後の一つを本文の中に第二のヘッダ帯として
+          置くしかなく、アプリがヘッダを 2 種類抱えることになっていた。両方とも同じ
+          .ui-page-header-extra の直下に並ぶので、DOM 順がそのまま読み上げ順になる。 */}
+      <PageContainer
+        title="不具合 #1042 · 請求書の消費税区分が誤っている"
+        subtitle="Issue detail · 担当 佐藤 · 更新 2026-09-14"
+        breadcrumb={[
+          { label: "ホーム", to: "/" },
+          { label: "不具合", to: "/issues" },
+          { label: "#1042" },
+        ]}
+        breadcrumbLabel="不具合詳細のパンくず"
+        extra={{
+          start: (
+            <Flex gap="sm">
+              <Button variant="outline" size="sm">
+                <Download />
+                エクスポート
+              </Button>
+              <Button size="sm">
+                <Plus />
+                コメント
+              </Button>
+            </Flex>
+          ),
+          end: (
+            <Pagination
+              size="sm"
+              value={recordPage}
+              onValueChange={setRecordPage}
+              total={48}
+              pageSize={1}
+              simple
+              ariaLabel="不具合の前後移動"
+            />
+          ),
+        }}
+      >
+        <Card>
+          <CardHeader>
+            <CardTitle level={2}>ページャはヘッダの最後に置く</CardTitle>
+            <CardDescription>
+              extra にノードを 1 つ渡したときは start に入るので、既存のページは 1
+              文字も変わらない。end を足したときだけ、その後ろにもう 1
+              スロットが増える。名前は論理方向（start / end）なので dir=&quot;rtl&quot;
+              でそのまま入れ替わる。本文の中にもう一段ヘッダ帯を作る必要はない。
+            </CardDescription>
+          </CardHeader>
+          <CardContent>
+            <Descriptions
+              items={[
+                { label: "状態", value: "未対応" },
+                { label: "優先度", value: "高" },
+                { label: "報告者", value: "鈴木" },
+              ]}
+            />
+          </CardContent>
+        </Card>
+      </PageContainer>
+
       {/* ── 1b. Canonical page-header contract · status/meta band ── */}
       {/* PageContainer's embedded header IS the DXS PageHeader: breadcrumbs + title +
           subtitle + status/meta + actions + responsive overflow on ONE renderer. The

package/package.json

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