@godxjp/ui 28.3.0 → 28.4.0

package/dist/components/data-display/scroll-area.js

@@ -120,6 +120,7 @@ const ScrollArea = React.forwardRef(
     anchorOffset,
     onAnchoredChange,
     orientation = "vertical",
+    scrollbar = "auto",
     ...props
   }, ref) => {
     const [viewport, setViewport] = React.useState(null);
@@ -153,6 +154,7 @@ const ScrollArea = React.forwardRef(
           "data-slot": "scroll-area-viewport",
           "data-anchor": anchor,
           "data-orientation": orientation,
+          "data-scrollbar": scrollbar,
           className: cn("ui-scroll-area", className),
           ...props,
           children: /* @__PURE__ */ jsx("div", { "data-slot": "scroll-area-content", className: "ui-scroll-area-content", children })

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

@@ -1,4 +1,9 @@
 import * as React from "react";
+import { DayButton, dateMatchModifiers } from "react-day-picker";
+import type { DateRange, Modifiers } from "react-day-picker";
+export { DayButton, dateMatchModifiers };
+export type { DateRange, Modifiers };
+export type { DayPickerProps, DayButtonProps, Matcher, CalendarDay, DateLib, } from "react-day-picker";
 import type { CalendarProp } from "../../props/components/data-entry.prop.js";
 export type { CalendarProp, CalendarProp as CalendarProps, CalendarCellRenderProp, CalendarFooterProp, } from "../../props/components/data-entry.prop.js";
 export declare function Calendar({ className, classNames, showOutsideDays, "aria-label": ariaLabel, labels, showToday, showClose, onClose, footer, width, bordered, cellRender, month: monthProp, onMonthChange, locale: localeProp, ...props }: CalendarProp): React.JSX.Element;

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

@@ -187,7 +187,9 @@ function Calendar({
          * So the original node is passed in and the consumer decorates around it.
          */
         ...cellRender ? {
-          DayButton: (dayButtonProps) => /* @__PURE__ */ jsx(Fragment, { children: cellRender(dayButtonProps.day.date, { originNode: /* @__PURE__ */ jsx(DayButton, { ...dayButtonProps }) }) })
+          DayButton: (dayButtonProps) => /* @__PURE__ */ jsx(Fragment, { children: cellRender(dayButtonProps.day.date, {
+            originNode: /* @__PURE__ */ jsx(DayButton, { ...dayButtonProps })
+          }) })
         } : {},
         /*
          * A consumer's `components` MERGE with ours; they must not replace the object.
@@ -205,5 +207,7 @@ function Calendar({
   );
 }
 export {
-  Calendar
+  Calendar,
+  DayButton,
+  dateMatchModifiers
 };

package/dist/components/data-entry/date-picker.js

@@ -70,6 +70,7 @@ function DatePicker(props) {
     defaultOpen = false,
     onOpenChange,
     inputReadOnly,
+    width,
     preserveInvalidOnBlur,
     placement = "bottom-start",
     renderExtraFooter,
@@ -580,11 +581,16 @@ function DatePicker(props) {
           "data-size": size,
           "data-status": status,
           "data-variant": variant,
+          "data-width": width,
           "aria-disabled": allDisabled ? true : void 0,
           "data-disabled": allDisabled ? "" : void 0,
           "data-state": open ? "open" : "closed",
           className: cn(
             "ui-control ui-control-composite-field",
+            // `bounded` emits NO utility on purpose — control.css owns it, and a utility here
+            // would win the layer order and kill the token (gh#366, gh#375, gh#799).
+            width === "auto" && "w-auto",
+            width === "full" && "w-full",
             "aria-invalid:border-destructive",
             CONTROL_VARIANT_CHROME_CLASS[variant ?? "outlined"],
             CONTROL_STATUS_CHROME_CLASS,
@@ -610,6 +616,12 @@ function DatePicker(props) {
       /* @__PURE__ */ jsx(
         Input,
         {
+          "data-width": width,
+          className: cn(
+            width === "auto" && "w-auto",
+            width === "full" && "w-full",
+            width === "bounded" && "w-[var(--control-bounded-width)] max-w-full"
+          ),
           id: rootId,
           name: displayIsCanonical ? resolvedName : "",
           ref,

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

@@ -72,3 +72,5 @@ export type { UploadRequestContext, UploadResult, UploadRejection } from "./uplo
 export type { UploadItemActions } from "./upload-types.js";
 export { Attachments } from "./attachments.js";
 export type { AttachmentsProp, AttachmentsProps, AttachmentsItemProp, AttachmentsPlaceholderProp, AttachmentsOverflowProp, AttachmentsRefProp, } from "./attachments.js";
+export { DayButton, dateMatchModifiers } from "./calendar.js";
+export type { DateRange, Modifiers, DayPickerProps, DayButtonProps, Matcher, CalendarDay, DateLib, } from "./calendar.js";

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

@@ -60,6 +60,7 @@ import { Segmented } from "./segmented.js";
 import { BranchScopePicker } from "./branch-scope-picker.js";
 import { TimeRangePicker } from "./time-range-picker.js";
 import { Attachments } from "./attachments.js";
+import { DayButton, dateMatchModifiers } from "./calendar.js";
 export {
   Attachments,
   BranchScopePicker,
@@ -78,6 +79,7 @@ export {
   CommandList,
   CommandPalette,
   DatePicker,
+  DayButton,
   Field,
   Form,
   FormErrors,
@@ -127,6 +129,7 @@ export {
   Upload,
   collectUploadCommitActions,
   createUploadItem,
+  dateMatchModifiers,
   useFormLayout,
   usePasswordStrength,
   useUploadDraft

package/dist/components/data-entry/time-picker.d.ts

@@ -6,4 +6,4 @@ export type { TimePickerDisabledTimeProp, TimePickerProp, TimePickerProp as Time
  * canonical): form-submittable (give it a `name`), screen-reader friendly, and e2e-testable by
  * filling the input.
  */
-export declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, hourStep, changeOnScroll, secondStep, showSeconds: showSecondsProp, use12Hours, format, open: openProp, defaultOpen, onOpenChange, inputReadOnly, preserveInvalidOnBlur, placement, renderExtraFooter, size, status, variant, ref, disabledTime, hideDisabledOptions, showNow, needConfirm, allowClear, ...ariaProps }: TimePickerProp): React.JSX.Element;
+export declare function TimePicker({ value: controlledValue, defaultValue, onValueChange, placeholder, disabled, className, id, name, minuteStep, hourStep, changeOnScroll, secondStep, showSeconds: showSecondsProp, use12Hours, format, open: openProp, defaultOpen, onOpenChange, inputReadOnly, width, preserveInvalidOnBlur, placement, renderExtraFooter, size, status, variant, ref, disabledTime, hideDisabledOptions, showNow, needConfirm, allowClear, ...ariaProps }: TimePickerProp): React.JSX.Element;

package/dist/components/data-entry/time-picker.js

@@ -377,6 +377,7 @@ function TimePicker({
   defaultOpen = false,
   onOpenChange,
   inputReadOnly,
+  width,
   preserveInvalidOnBlur,
   placement = "bottom-end",
   renderExtraFooter,
@@ -428,6 +429,7 @@ function TimePicker({
     /* @__PURE__ */ jsx(PopoverAnchor, { asChild: true, children: /* @__PURE__ */ jsx("div", { className: cn("relative", className), children: /* @__PURE__ */ jsx(
       Input,
       {
+        "data-width": width,
         id,
         ref,
         size,
@@ -445,7 +447,12 @@ function TimePicker({
         "aria-haspopup": "dialog",
         "aria-controls": open ? dialogId : void 0,
         ...fieldA11y,
-        className: "tabular-nums",
+        className: cn(
+          "tabular-nums",
+          width === "auto" && "w-auto",
+          width === "full" && "w-full",
+          width === "bounded" && "w-[var(--control-bounded-width)] max-w-full"
+        ),
         trailingIcon: /* @__PURE__ */ jsx("span", { className: "ui-time-picker-affix", children: showClear ? /* @__PURE__ */ jsx(
           "button",
           {

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": "28.3.0",
+  "version": "28.4.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

@@ -540,6 +540,11 @@ export type PermissionMatrixProp = {
  * live stream (chat, log tail, streaming response, activity feed).
  */
 export type ScrollAreaAnchorProp = "none" | "bottom";
+/**
+ * Whether the scrollbar is always drawn, or left to the platform (gh#798). `auto` is the platform
+ * decision and the default; `always` forces a classic, space-occupying bar.
+ */
+export type ScrollAreaScrollbarProp = "auto" | "always";
 /** @see ScrollArea */
 /**
  * @see ScrollArea — which AXES scroll. This is not decoration: it IS the `overflow` the element
@@ -570,6 +575,23 @@ export type ScrollAreaProp = {
      */
     viewportRef?: React.Ref<HTMLDivElement>;
     /** Edge the viewport sticks to as content grows. Default `none` (inert). */
+    /**
+     * Whether the scrollbar is drawn ALWAYS or only when the platform feels like it (gh#798).
+     *
+     * Default `auto` — today's behaviour, unchanged: the browser decides, styled from the
+     * `--scroll-area-*` tokens. On macOS/iPadOS with the system default "Show scroll bars: when
+     * scrolling", that decision is an OVERLAY bar, which exists only while the reader is already
+     * scrolling — so the tokens style a bar nobody sees, and a wide area does not LOOK scrollable.
+     * Measured by a consumer: clientWidth 727, scrollWidth 3476, and `offsetHeight - clientHeight`
+     * of 2px (the border, twice) — no bar occupies layout at all. A manager reading a 31-column
+     * roster said it showed "only five days".
+     *
+     * `always` forces a classic, space-occupying bar via `::-webkit-scrollbar`, which Chrome and
+     * Safari honour even in overlay mode, painted from the same tokens. Reach for it where the
+     * affordance IS the information — a wide table, a roster, a board. Leave it `auto` for a chat
+     * stream, where a permanent bar is noise (gh#311).
+     */
+    scrollbar?: ScrollAreaScrollbarProp;
     anchor?: ScrollAreaAnchorProp;
     /**
      * Distance in px from the bottom edge inside which the reader still counts as "at the bottom"

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

@@ -770,6 +770,20 @@ export type CalendarFooterProp = {
 };
 /** Shared picker chrome. Placement uses logical start/end so RTL follows the locale. */
 export type PickerChromeProp = {
+    /**
+     * How the field takes its inline space, exactly as `Select` means it (gh#799).
+     *
+     * CONSUMER-RULES §5 says a control outside a form takes `width="auto"`, and `Select` has carried
+     * `width` since gh#375 — the pickers did not, so the one control in a toolbar with a KNOWN
+     * content width was the one that could not be sized. Measured in a consumer toolbar at 1440px:
+     * a month picker showing `2026/09` took 275px, against the 144px box it had before the migration,
+     * because with no prop it falls to the flex default and stretches.
+     *
+     * `auto` shrink-wraps to the display format; `full` fills the line; `bounded` holds one width
+     * while the value's length varies (its width is owned by the `[data-width="bounded"]` rule in
+     * control.css, NOT by a utility — see the note there).
+     */
+    width?: ControlWidthProp;
     open?: boolean;
     defaultOpen?: boolean;
     onOpenChange?: (open: boolean) => void;

package/dist/props/registry.d.ts

@@ -1810,6 +1810,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
             readonly reason: 'Edge the scrolling viewport sticks to as content grows ("none" | "bottom"). A closed union, not a boolean pair — the third edge ("top", for an inverted feed) is a value, not another flag.';
         }];
     };
+    readonly ScrollAreaScrollbarProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly [{
+            readonly field: "scrollbar";
+            readonly local: true;
+            readonly reason: 'Whether the scrollbar is always drawn or left to the platform ("auto" | "always"). Not a width or a colour — those are the --scroll-area-* tokens; this names WHO decides the bar exists, because on macOS/iPadOS the platform decides "only while scrolling" and a wide area then never looks scrollable (gh#798).';
+        }];
+    };
     readonly ScrollAreaOrientationProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";

package/dist/props/registry.js

@@ -2203,6 +2203,17 @@ const COMPONENT_PROP_REGISTRY = {
       }
     ]
   },
+  ScrollAreaScrollbarProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: [
+      {
+        field: "scrollbar",
+        local: true,
+        reason: 'Whether the scrollbar is always drawn or left to the platform ("auto" | "always"). Not a width or a colour \u2014 those are the --scroll-area-* tokens; this names WHO decides the bar exists, because on macOS/iPadOS the platform decides "only while scrolling" and a wide area then never looks scrollable (gh#798).'
+      }
+    ]
+  },
   ScrollAreaOrientationProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",

package/dist/styles/control.css

@@ -1326,7 +1326,9 @@
     cursor: not-allowed;
   }
 
-  .ui-control-trigger[data-width="bounded"] {
+  .ui-control-trigger[data-width="bounded"],
+
+  .ui-control[data-width="bounded"] {
     inline-size: var(--control-bounded-width);
     max-inline-size: 100%;
   }
@@ -2325,8 +2327,15 @@
 
   .ui-calendar[data-width="full"] .ui-calendar-day-button {
     inline-size: 100%;
-
     max-inline-size: none;
+    block-size: auto;
+    min-block-size: var(--control-height);
+
+    flex-direction: column;
+    align-items: stretch;
+    justify-content: flex-start;
+    text-align: start;
+    white-space: normal;
   }
 
   .ui-calendar-month {

package/dist/styles/data-display-layout.css

@@ -958,6 +958,24 @@
     overflow: auto;
   }
 
+  .ui-scroll-area[data-scrollbar="always"] {
+    scrollbar-width: auto;
+  }
+
+  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar {
+    inline-size: var(--scroll-area-always-bar-size);
+    block-size: var(--scroll-area-always-bar-size);
+  }
+
+  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar-track {
+    background: var(--scroll-area-track-color, transparent);
+  }
+
+  .ui-scroll-area[data-scrollbar="always"]::-webkit-scrollbar-thumb {
+    background: var(--scroll-area-thumb-color, hsl(var(--border)));
+    border-radius: var(--scroll-area-always-thumb-radius);
+  }
+
   .ui-scroll-area:is([data-orientation="horizontal"], [data-orientation="both"])
     > .ui-scroll-area-content {
     inline-size: max-content;
@@ -1068,6 +1086,11 @@
     color: var(--code-block-token-deleted-color, hsl(var(--text-error)));
   }
 
+  .ui-code-block [data-code-token="changed"],
+  .ui-prose pre [data-code-token="changed"] {
+    color: var(--code-block-token-changed-color, hsl(var(--text-warning)));
+  }
+
   .ui-prose {
     font-size: var(--prose-font-size);
     line-height: var(--prose-line-height);

package/dist/tokens/components/data-display.css

@@ -31,6 +31,8 @@
   --code-block-token-inserted-color: initial;
   --code-block-token-deleted-color: initial;
 
+  --code-block-token-changed-color: initial;
+
   --prose-font-size: var(--font-size-base);
   --prose-font-size-sm: var(--font-size-xs);
   --prose-line-height: var(--line-height-body);

package/dist/tokens/components/scroll-area.css

@@ -8,5 +8,8 @@
 
   --scroll-area-scrollbar-space: auto;
 
+  --scroll-area-always-bar-size: 0.625rem;
+  --scroll-area-always-thumb-radius: var(--radius-pill);
+
   --scroll-area-anchor-offset: 3rem;
 }

package/docs/data-display/code-block.tsx

@@ -136,9 +136,9 @@ export default function Demo() {
           <CardHeader>
             <CardTitle level={2}>Diff tokens · inserted and deleted</CardTitle>
             <CardDescription>
-              The same vocabulary carries a diff. inserted and deleted default to the success and
-              destructive roles, so they agree with every other affirmative and destructive mark in
-              the system rather than inventing a second green and red.
+              The same vocabulary carries a diff. inserted, deleted and changed default to the
+              success, destructive and warning roles, so they agree with every other affirmative and
+              destructive mark in the system rather than inventing a second green and red.
             </CardDescription>
           </CardHeader>
           <CardContent>
@@ -146,6 +146,9 @@ export default function Demo() {
               <span data-code-token="comment">{"--- a/tokens.css\n+++ b/tokens.css\n"}</span>
               <span data-code-token="deleted">{"-  --code-block-foreground: #111;\n"}</span>
               <span data-code-token="inserted">{"+  --code-block-foreground: initial;\n"}</span>
+              <span data-code-token="changed">
+                {"!  --code-block-token-changed-color: initial;\n"}
+              </span>
               <span data-code-token="punctuation">
                 {"   /* role-mirror: the default moved to the call site */"}
               </span>

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

@@ -16,8 +16,12 @@ import { Flex, PageContainer, ResponsiveGrid } from "@godxjp/ui/layout";
 /**
  * ScrollArea — a native scrolling box. ALWAYS give it an explicit height/max-height
  * (vertical) or width (horizontal), or nothing ever overflows and no scrollbar appears.
- * `orientation` decides which axes may scroll; the browser draws the bar, styled from
- * the --scroll-area-* tokens. Composed only from real @godxjp/ui components.
+ * `orientation` decides which axes may scroll. By default the PLATFORM draws the bar,
+ * styled from the --scroll-area-* tokens — and on macOS/iPadOS with the system default
+ * "Show scroll bars: when scrolling" that bar is an OVERLAY: it exists only while the
+ * reader is already scrolling, so a wide area does not look scrollable at rest (gh#798).
+ * `scrollbar="always"` forces a classic bar that occupies layout, from the same tokens.
+ * Composed only from real @godxjp/ui components.
  */
 const entries = Array.from(
   { length: 18 },

package/package.json

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