@godxjp/ui 27.8.0 → 27.10.0

package/dist/components/data-display/range-timeline.d.ts

@@ -1,4 +1,5 @@
 import * as React from "react";
+import type { DensityProp } from "../../props/vocabulary/index.js";
 export type RangeTimelineRow = {
     id: string;
     label: React.ReactNode;
@@ -34,6 +35,15 @@ export type RangeTimelineProps = React.HTMLAttributes<HTMLElement> & {
      * the header-only ruling. Colour `--range-timeline-grid-color`, weight `--range-timeline-grid-width`.
      */
     bordered?: boolean;
+    /**
+     * How wide ONE axis unit is — the canonical density vocabulary, the same three steps
+     * `DataTable density` uses. `default` (56px/day) is the shipped width, so an existing Gantt
+     * does not move; `compact` (42px/day) fits a third more days on the same screen; `comfortable`
+     * (70px/day) spreads them out. It moves the column width ONLY — row height, bar height and the
+     * label column are identical at every step. Retune a step with
+     * `--range-timeline-unit-width-{compact,default,comfortable}`.
+     */
+    density?: DensityProp;
     /**
      * Controlled ids of the EXPANDED parent rows (same spelling as `Tree expandedValues`). A folded
      * parent hides every descendant row — label and bar.
@@ -66,6 +76,15 @@ export declare const RangeTimeline: React.ForwardRefExoticComponent<React.HTMLAt
      * the header-only ruling. Colour `--range-timeline-grid-color`, weight `--range-timeline-grid-width`.
      */
     bordered?: boolean;
+    /**
+     * How wide ONE axis unit is — the canonical density vocabulary, the same three steps
+     * `DataTable density` uses. `default` (56px/day) is the shipped width, so an existing Gantt
+     * does not move; `compact` (42px/day) fits a third more days on the same screen; `comfortable`
+     * (70px/day) spreads them out. It moves the column width ONLY — row height, bar height and the
+     * label column are identical at every step. Retune a step with
+     * `--range-timeline-unit-width-{compact,default,comfortable}`.
+     */
+    density?: DensityProp;
     /**
      * Controlled ids of the EXPANDED parent rows (same spelling as `Tree expandedValues`). A folded
      * parent hides every descendant row — label and bar.

package/dist/components/data-display/range-timeline.js

@@ -15,6 +15,7 @@ const RangeTimeline = React.forwardRef(
     today,
     onRangeChange,
     bordered = true,
+    density = "default",
     expandedValues,
     defaultExpandedValues,
     onExpandedValuesChange,
@@ -92,6 +93,7 @@ const RangeTimeline = React.forwardRef(
         ref,
         className: cn("ui-range-timeline", className),
         "data-bordered": bordered ? "true" : void 0,
+        "data-density": density === "default" ? void 0 : density,
         "aria-label": label,
         tabIndex: 0,
         children: /* @__PURE__ */ jsxs(

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

@@ -64,6 +64,7 @@ function TreeRoot({
   titleRender,
   showLine = false,
   showIcon = false,
+  divided = false,
   variant = "default",
   size = "md",
   disabled = false,
@@ -411,6 +412,7 @@ function TreeRoot({
         "data-size": size,
         "data-variant": variant,
         "data-show-line": showLine ? "true" : void 0,
+        "data-divided": divided ? "true" : void 0,
         "data-empty": isEmpty ? "true" : void 0,
         className: cn("ui-tree", className),
         children: isEmpty ? null : renderNodes(options, 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 : "",
@@ -772,21 +773,23 @@ function UploadFileList({
         ] }),
         item.status === "uploading" && /* @__PURE__ */ jsx(Progress, { value: item.percent ?? 0, "aria-label": t("dataEntry.upload.uploading") })
       ] }),
-      onPreview && (hasCustomPreview || item.previewUrl) && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onPreview(item), children: t("dataEntry.upload.preview") }),
-      onDownload && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onDownload(item), children: t("dataEntry.upload.download") }),
-      onStart && item.file && item.status !== "uploading" && item.status !== "done" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onStart(item), children: t(item.status === "error" ? "dataEntry.upload.retry" : "dataEntry.upload.start") }),
-      onCancel && item.status === "uploading" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onCancel(item.uid), children: t("dataEntry.upload.cancel") }),
-      onRemove && /* @__PURE__ */ jsx(
-        Button,
-        {
-          type: "button",
-          size: "sm",
-          variant: "ghost",
-          "aria-label": t("dataEntry.upload.removeFile", { name: item.name }),
-          onClick: () => onRemove(item.uid),
-          children: /* @__PURE__ */ jsx(X, { className: "ui-upload-row-icon", "aria-hidden": "true" })
-        }
-      )
+      /* @__PURE__ */ jsxs("div", { className: "ui-upload-row-actions", children: [
+        onPreview && (hasCustomPreview || item.previewUrl) && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onPreview(item), children: t("dataEntry.upload.preview") }),
+        onDownload && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onDownload(item), children: t("dataEntry.upload.download") }),
+        onStart && item.file && item.status !== "uploading" && item.status !== "done" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onStart(item), children: t(item.status === "error" ? "dataEntry.upload.retry" : "dataEntry.upload.start") }),
+        onCancel && item.status === "uploading" && /* @__PURE__ */ jsx(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => onCancel(item.uid), children: t("dataEntry.upload.cancel") }),
+        onRemove && /* @__PURE__ */ jsx(
+          Button,
+          {
+            type: "button",
+            size: "sm",
+            variant: "ghost",
+            "aria-label": t("dataEntry.upload.removeFile", { name: item.name }),
+            onClick: () => onRemove(item.uid),
+            children: /* @__PURE__ */ jsx(X, { className: "ui-upload-row-icon", "aria-hidden": "true" })
+          }
+        )
+      ] })
     ] });
     return /* @__PURE__ */ jsx("li", { children: itemRender ? itemRender(node, item, items, {
       remove: () => onRemove?.(item.uid),

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/app-shell.d.ts

@@ -3,4 +3,4 @@ import type { AppShellProp } from "../../props/components/layout.prop.js";
 export type { AppShellProp, AppShellProp as AppShellProps, } from "../../props/components/layout.prop.js";
 /** Same rail boundary as shell-layout.css; SSR starts in docked mode. */
 export declare function useAppShellNavigationMode(): "drawer" | "docked";
-export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;
+export declare function AppShell({ sidebar, topbar, topbarLeft, topbarRight, logo, logoCompact, logoCompactBelow, breadcrumb, footer, children, sidebarCollapsed, responsiveNavigation, topbarSpan, navRail, navRailPosition, navRailEnd, navRailLabel, mobileNav, mobileNavLabel, mobileNavOpen, onMobileNavOpenChange, }: AppShellProp): React.JSX.Element;

package/dist/components/layout/app-shell.js

@@ -17,6 +17,8 @@ function AppShell({
   topbarLeft,
   topbarRight,
   logo,
+  logoCompact,
+  logoCompactBelow = "sm",
   breadcrumb,
   footer,
   children,
@@ -72,11 +74,15 @@ function AppShell({
     }
   }
   const logoInRail = hasSidebar && logo !== void 0 && topbarSpan !== "full";
+  const brand = logoCompact === void 0 ? logo : /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx("span", { className: "app-topbar-brand", "data-hide-below": logoCompactBelow, children: logo }),
+    /* @__PURE__ */ jsx("span", { className: "app-topbar-brand", "data-hide-from": logoCompactBelow, children: logoCompact })
+  ] });
   const resolvedTopbar = topbar !== void 0 ? /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
-    !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
+    !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: brand }),
     /* @__PURE__ */ jsx("div", { className: "app-topbar-custom", children: topbar })
   ] }) : /* @__PURE__ */ jsxs("div", { className: "app-topbar-rail", children: [
-    !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: logo }),
+    !logoInRail && logo !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-logo", children: brand }),
     topbarLeft !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-left", children: topbarLeft }),
     /* @__PURE__ */ jsx("div", { className: "app-topbar-spacer" }),
     topbarRight !== void 0 && /* @__PURE__ */ jsx("div", { className: "app-topbar-right", children: topbarRight })

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/layout/topbar.d.ts

@@ -4,4 +4,4 @@ export type { TopbarProp, TopbarProp as TopbarProps } from "../../props/componen
  * Topbar — a PURE SLOT bar. It positions three clusters (`start` / `center` / `end`) and owns the
  * bar's flex layout; it does NOT bake any chrome.
  */
-export declare function Topbar({ start, center, end, className, children, height, pad, style, ...props }: TopbarProp): import("react").JSX.Element;
+export declare function Topbar({ start, center, end, className, children, height, overflow, pad, style, ...props }: TopbarProp): import("react").JSX.Element;

package/dist/components/layout/topbar.js

@@ -8,6 +8,7 @@ function Topbar({
   className,
   children,
   height,
+  overflow = "scroll",
   pad,
   style,
   ...props
@@ -16,6 +17,7 @@ function Topbar({
     "div",
     {
       "data-height": height,
+      "data-overflow": overflow,
       style: { ...style, ...padStyle(pad, void 0) },
       "data-slot": "topbar",
       className: cn("ui-topbar", className),

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.8.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-display.prop.d.ts

@@ -700,6 +700,17 @@ export type TreeProp = {
     titleRender?: (node: TreeNodeProp) => React.ReactNode;
     /** Draw the connector rails between a parent and its children (antd `showLine`). */
     showLine?: boolean;
+    /**
+     * Rule between the rows: a hairline on every node's block-start except the outline's first, so a
+     * tree used as navigation inside a Card reads as a list instead of one block (gh#732). The rule
+     * runs the FULL width of the row at every depth — it is never indented per level, which would
+     * make the children read as a nested table. Colour is `--tree-divider-color`.
+     *
+     * Off by default: a rule is chrome, and this component's chrome defaults quiet (cardinal rule
+     * #44 — the same reason `showLine` ships off). Not antd's name — antd's `Tree` has no such
+     * capability; see docs/DESIGN-AUTHORITY.md.
+     */
+    divided?: boolean;
     /** Draw each node's `icon` (antd `showIcon`). `variant="directory"` supplies folder/file glyphs. */
     showIcon?: boolean;
     /** `directory` is antd's `<DirectoryTree>`: folder/file glyphs and a full-row selected band. */

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

@@ -745,9 +745,12 @@ export type CalendarProp = DayPickerProps & CalendarFooterProp & {
      *
      * Default `true` — the owner's call, from a real screen: with no ruling the month read as a
      * cloud of numbers and was "very hard to read". Pass `bordered={false}` for the floating-button
-     * look. The line colour is `--calendar-grid-border-color` (default `--input` at 0.5 alpha,
-     * 1.74:1 light / 1.95:1 dark on the popover; the full `--input` read too dark, and the
-     * decorative `--border` measured 1.15:1 and was invisible as a 1px ruling).
+     * look. The line colour is `--calendar-grid-border-color`, default `hsl(var(--border))` — the
+     * same tier as the popover edge, a Card edge and a DataTable row rule, so the ruling can never
+     * out-weigh the surface it is drawn on (L* 93.80 / 1.149:1 light, L* 20.76 / 1.270:1 dark).
+     * It was `--input` at 0.5 alpha (L* 78.67 / 1.738:1) through 27.6.0 and was reported darker
+     * than every card and table in the system (gh#730); the full `--input` (3.463:1) was reported
+     * too dark before that. Set `--calendar-grid-border-color` to retint.
      */
     bordered?: boolean;
     /** Decorate a day cell — 祝日, a booked day, a deadline. @see CalendarCellRenderProp */
@@ -1543,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
@@ -353,6 +372,28 @@ export type AppShellProp = {
     topbarLeft?: ReactNode;
     topbarRight?: ReactNode;
     logo?: ReactNode;
+    /**
+     * The brand node a NARROW bar gets instead of `logo` — a mark without the wordmark, a shorter
+     * lockup, a different `viewBox` (gh#728).
+     *
+     * The brand cell shrinks without this prop: below the `sm` step it is capped at
+     * `--app-shell-brand-compact-max-inline-size` and anything past the cap is cropped from the
+     * inline-end. A CROP is all a stylesheet can do to artwork it did not author — `viewBox` is an
+     * attribute, which is why consumers were re-cropping their own SVG through a media-query hook.
+     * Passing a node here is how you CHOOSE what the narrow bar shows instead.
+     *
+     * Both nodes are rendered; the breakpoint drops one with `display: none`, so exactly one brand
+     * is ever in the accessibility tree. Applies to the brand IN THE BAR only: under the default
+     * `topbarSpan="content"` with a sidebar the brand sits at the head of the rail, which the
+     * responsive shell has already replaced with the drawer at that width.
+     */
+    logoCompact?: ReactNode;
+    /**
+     * The step at which `logoCompact` takes over — `Flex hideBelow`'s own vocabulary and the same
+     * canonical scale (sm 40rem · md 48rem · lg 64rem · xl 80rem). Defaults to `"sm"`, the step the
+     * brand cap uses. Ignored without `logoCompact`.
+     */
+    logoCompactBelow?: BreakpointProp;
     breadcrumb?: ReactNode;
     footer?: ReactNode;
     sidebarCollapsed?: boolean;
@@ -1318,6 +1359,24 @@ export type TopbarProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children">
     center?: ReactNode;
     /** Inline-end cluster — settings pickers, notifications, the user menu. */
     end?: ReactNode;
+    /**
+     * What a bar that does not fit does with the cells that do not fit (gh#728).
+     *
+     * - `"scroll"` (default) — the BAR scrolls on the inline axis while the `start` and `end`
+     *   clusters keep their cells whole (`start` floors at one cell, `end` at its content), so what
+     *   does not fit is off-port rather than half-painted. Every cell stays in the DOM and in the
+     *   accessibility tree, Tab reaches each one in order, and the browser scrolls a focused cell
+     *   fully into view; the scrollbar is suppressed (a horizontal bar inside a 48px chrome row
+     *   would eat the height that caused the deficit) so the pointer affordance is drag/wheel.
+     * - `"clip"` — the pre-gh#728 behaviour: a cell past the cluster's edge is simply not painted.
+     *   Still focusable, still announced, invisible and unreachable by pointer. Choose it only for a
+     *   bar you have measured as never overflowing.
+     *
+     * Independent of `TopbarItem hideBelow`, which REMOVES a cell at a step: dropping a cell is the
+     * consumer saying it does not belong on a phone, and that remains the way to spend the budget
+     * deliberately. This prop is only about what happens once there is no budget left.
+     */
+    overflow?: "scroll" | "clip";
     /** Escape hatch — render fully custom bar content instead of the three slots. */
     children?: ReactNode;
 };