@godxjp/ui 28.3.1 → 28.5.0

package/README.md

@@ -12,6 +12,64 @@ npm i @godxjp/ui
 
 ---
 
+## Using this from an AI agent
+
+The catalog — 165 components, 1616 tokens, 47 cardinal rules — is published in two forms from one
+source. **Entry point for either: [`AGENTS.md`](AGENTS.md).**
+
+### If your agent can run a process
+
+Claude Code · Codex CLI · Cursor · any MCP client:
+
+```bash
+npx @godxjp/ui sync-rules
+```
+
+Writes `.mcp.json`, `CLAUDE.md` and `.ai/rules/` into the consumer repo and wires
+`@godxjp/ui-mcp`. Prefer this: it is searchable, it drills down instead of dumping, and it is
+**locked to the version on disk** — the failure it prevents is an agent being told a prop does not
+exist because the catalog was two minors behind (gh#789).
+
+### If your agent can only fetch URLs
+
+ChatGPT on the web, Claude.ai, or any client without a local process. The same data is served as
+static files straight from this public repo — no hosting, no deploy step:
+
+| file                                                                                                                    | size    | what it is                                                                                             |
+| ----------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------ |
+| [`agent/START-HERE.md`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md)                   | 6 KB    | **read first** — self-contained: the four rules, the token override model, a page that passes review   |
+| [`agent/llms.txt`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/llms.txt)                             | 2 KB    | the [llms.txt](https://llmstxt.org/) entry point                                                       |
+| [`agent/index.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/index.json)                         | 2 KB    | manifest: version, counts, every file's URL                                                            |
+| [`agent/components-index.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components-index.json)   | 42 KB   | all 165 as name + group + tagline — **fetch this first**                                               |
+| [`agent/components/<Name>.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components/Select.json) | 1–32 KB | one file per component, each with its `importPath` — **this is the route to take**                     |
+| [`agent/components.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/components.json)               | 1.1 MB  | all 165 entries in one file — most URL fetchers truncate this silently; prefer the per-component files |
+| [`agent/tokens.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/tokens.json)                       | 0.6 MB  | every design token, its value and why it exists                                                        |
+| [`agent/vocabulary.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/vocabulary.json)               | 7 KB    | the controlled prop vocabulary                                                                         |
+| [`agent/rules.json`](https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/rules.json)                         | 17 KB   | the 47 cardinal rules                                                                                  |
+
+Pasteable bootstrap:
+
+> Read https://raw.githubusercontent.com/godx-jp/godxjp-ui/main/agent/START-HERE.md and follow it.
+> Then fetch .../agent/components-index.json to choose components, and
+> .../agent/components/<Name>.json for the props of each one you chose. Tell me which catalog
+> version you read.
+
+**Pin to the version you installed.** Every URL above tracks `main`. Swap `main` for the matching
+tag — `https://raw.githubusercontent.com/godx-jp/godxjp-ui/v28.4.0/agent/...` — because a catalog
+newer than your package describes props you do not have, an older one hides props you do, and
+neither failure announces itself. Pinned URLs only resolve for releases whose tag contains
+`agent/`; on a 404 the release predates this catalog, so read `main` and compare
+`index.json` → `version` against what you installed.
+
+### Why static files and not a hosted MCP endpoint
+
+GitHub serves files; it does not run servers. MCP over the network needs a process handling POST
+requests, which no amount of Pages or raw hosting provides. A hosted HTTP MCP would work and would
+need real hosting, ops and an auth decision — so the static lane ships first, carrying the same
+data at no operational cost. Regenerate both from the one source with `pnpm gen:agent-catalog`.
+
+---
+
 ## Role & boundary — read this first
 
 This package is **the single source of UI truth**. It is shared, versioned infrastructure, which means two things are non-negotiable:

package/dist/app/theme-axes.js

@@ -68,6 +68,12 @@ function applyPrimaryColor(root, color, foreground) {
     "--primary-active": "initial",
     "--primary-border": "initial",
     "--control-outline": "initial",
+    /* The brand TEXT roles derive from the seed too (gh#664), so they are reset for the same
+     * reason: an ancestor theme that pinned a link colour for the previous brand would otherwise
+     * outrank the seed just set, and a re-tinted product would keep the old brand's links. */
+    "--text-link": "initial",
+    "--text-brand": "initial",
+    "--text-primary": "initial",
     "--primary-hover-channels": `var(--primary-hover-${polarity}-channels)`,
     "--primary-active-channels": `var(--primary-active-${polarity}-channels)`,
     "--ring": hsl(rgb)

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

@@ -42,6 +42,7 @@ export type { SelectProp, SelectProp as SelectProps } from "./select.js";
 export type { SearchSelectOptionProp as SelectOption, SearchSelectLoadParamsProp as SelectLoadParams, SearchSelectLoadResultProp as SelectLoadResult, } from "./search-select.js";
 export { UPLOAD_LIST_IGNORE, Upload, collectUploadCommitActions, createUploadItem, useUploadDraft, } from "./upload.js";
 export type { UploadProps, UploadFileItem, UploadVariant, UploadCommitAction } from "./upload.js";
+export { UploadCropDialog } from "./upload-crop-dialog.js";
 export { Cascader } from "./cascader.js";
 export type { CascaderProps, TreeOption, TreeFieldNames } from "./cascader.js";
 export { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select.js";
@@ -72,3 +73,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

@@ -39,6 +39,7 @@ import {
   createUploadItem,
   useUploadDraft
 } from "./upload.js";
+import { UploadCropDialog } from "./upload-crop-dialog.js";
 import { Cascader } from "./cascader.js";
 import { TreeSelect, SHOW_CHILD, SHOW_PARENT, SHOW_ALL } from "./tree-select.js";
 import { Transfer } from "./transfer.js";
@@ -60,6 +61,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 +80,7 @@ export {
   CommandList,
   CommandPalette,
   DatePicker,
+  DayButton,
   Field,
   Form,
   FormErrors,
@@ -125,8 +128,10 @@ export {
   TreeSelect,
   UPLOAD_LIST_IGNORE,
   Upload,
+  UploadCropDialog,
   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.1",
+  "version": "28.5.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/base.css

@@ -74,7 +74,9 @@
   --color-attention: hsl(var(--attention));
   --color-attention-foreground: hsl(var(--attention-foreground));
 
-  --color-primary-strong: hsl(var(--text-primary));
+  --color-primary-strong: hsl(
+    var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels))
+  );
   --color-success-strong: hsl(var(--text-success));
   --color-warning-strong: hsl(var(--text-warning));
   --color-info-strong: hsl(var(--text-info));
@@ -97,8 +99,8 @@
 
   --color-foreground-tertiary: hsl(var(--text-tertiary));
   --color-foreground-disabled: hsl(var(--text-disabled));
-  --color-link: hsl(var(--text-link));
-  --color-brand: hsl(var(--text-brand));
+  --color-link: hsl(var(--text-link, from hsl(var(--primary)) var(--text-link-channels)));
+  --color-brand: hsl(var(--text-brand, from hsl(var(--primary)) var(--text-brand-channels)));
 
   --color-primary-hover: hsl(
     var(--primary-hover, from hsl(var(--primary)) var(--primary-hover-channels))

package/dist/styles/card-layout.css

@@ -55,27 +55,32 @@
   }
 
   [data-slot="card"][data-accent="primary"] {
-    --card-accent-color: hsl(var(--mark-primary));
+    --card-accent-color: hsl(
+      var(
+        --mark-primary,
+        var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels))
+      )
+    );
   }
 
   [data-slot="card"][data-accent="success"] {
-    --card-accent-color: hsl(var(--mark-success));
+    --card-accent-color: hsl(var(--mark-success, var(--text-success)));
   }
 
   [data-slot="card"][data-accent="warning"] {
-    --card-accent-color: hsl(var(--mark-warning));
+    --card-accent-color: hsl(var(--mark-warning, var(--text-warning)));
   }
 
   [data-slot="card"][data-accent="info"] {
-    --card-accent-color: hsl(var(--mark-info));
+    --card-accent-color: hsl(var(--mark-info, var(--text-info)));
   }
 
   [data-slot="card"][data-accent="attention"] {
-    --card-accent-color: hsl(var(--mark-attention));
+    --card-accent-color: hsl(var(--mark-attention, var(--attention)));
   }
 
   [data-slot="card"][data-accent="destructive"] {
-    --card-accent-color: hsl(var(--mark-destructive));
+    --card-accent-color: hsl(var(--mark-destructive, var(--text-error)));
   }
 
   [data-slot="card"][data-accent] {

package/dist/styles/control.css

@@ -999,7 +999,7 @@
   .ui-otp-container:has(.ui-otp-input[data-status="warning"]) .ui-otp-slot,
   .ui-otp-container:has(.ui-otp-input[data-status="warning"])
     .ui-otp-group[data-appearance="grouped"] {
-    border-color: var(--control-status-warning-border-color);
+    border-color: var(--control-status-warning-border-color, hsl(var(--text-warning)));
   }
 
   .ui-otp-container:has(.ui-otp-input[readonly]) .ui-otp-slot {
@@ -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%;
   }
@@ -1369,10 +1371,10 @@
   }
 
   .ui-control-surface[data-status="warning"] {
-    border-color: var(--control-status-warning-border-color);
+    border-color: var(--control-status-warning-border-color, hsl(var(--text-warning)));
     --focus-ring-color: var(--warning);
     --focus-outline-color: var(--warning);
-    --focus-ring-glow-color: var(--control-status-warning-outline-color);
+    --focus-ring-glow-color: var(--control-status-warning-outline-color, var(--text-warning));
   }
 
   .ui-number-input[data-size="sm"] {
@@ -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 {
@@ -2433,7 +2442,7 @@
 
   .ui-calendar .ui-calendar-day.day-today:not(.day-selected) .ui-calendar-day-button {
     box-shadow: inset 0 0 0 1px hsl(var(--primary));
-    color: hsl(var(--text-primary));
+    color: hsl(var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels)));
     font-weight: var(--font-weight-medium);
   }
 
@@ -2462,7 +2471,7 @@
 
   .ui-calendar .ui-calendar-day.day-today:not(:has(button)) {
     box-shadow: inset 0 0 0 1px hsl(var(--primary));
-    color: hsl(var(--text-primary));
+    color: hsl(var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels)));
     font-weight: var(--font-weight-medium);
     border-radius: var(--calendar-day-radius);
   }
@@ -2797,8 +2806,8 @@
 
   .ui-control[data-status="warning"],
   .ui-control-multiline[data-status="warning"] {
-    --focus-ring-color: var(--control-status-warning-outline-color);
-    --focus-outline-color: var(--control-status-warning-outline-color);
+    --focus-ring-color: var(--control-status-warning-outline-color, var(--text-warning));
+    --focus-outline-color: var(--control-status-warning-outline-color, var(--text-warning));
     --focus-ring-glow-color: var(--control-status-warning-glow-color);
     --focus-ring-glow-alpha: var(--control-status-warning-glow-alpha);
   }
@@ -2824,7 +2833,7 @@
   }
 
   .ui-control-count[data-exceeded="true"] {
-    color: hsl(var(--control-count-exceeded-color));
+    color: hsl(var(--control-count-exceeded-color, var(--text-error)));
   }
 
   .ui-textarea-count {

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

@@ -182,19 +182,19 @@
   .ui-progress-bar {
     height: 100%;
     border-radius: inherit;
-    background: var(--progress-fill-background, hsl(var(--mark-success)));
+    background: var(--progress-fill-background, hsl(var(--mark-success, var(--text-success))));
   }
 
   .ui-progress[data-tone="warning"] .ui-progress-bar {
-    background: hsl(var(--mark-warning));
+    background: hsl(var(--mark-warning, var(--text-warning)));
   }
 
   .ui-progress[data-tone="destructive"] .ui-progress-bar {
-    background: hsl(var(--mark-destructive));
+    background: hsl(var(--mark-destructive, var(--text-error)));
   }
 
   .ui-progress[data-over] .ui-progress-bar {
-    background-color: hsl(var(--mark-destructive));
+    background-color: hsl(var(--mark-destructive, var(--text-error)));
     background-image: repeating-linear-gradient(
       45deg,
       hsl(var(--destructive-foreground) / 0.4) 0,
@@ -223,15 +223,15 @@
   }
 
   .ui-progress-segment[data-tone="success"] {
-    background: hsl(var(--mark-success));
+    background: hsl(var(--mark-success, var(--text-success)));
   }
 
   .ui-progress-segment[data-tone="warning"] {
-    background: hsl(var(--mark-warning));
+    background: hsl(var(--mark-warning, var(--text-warning)));
   }
 
   .ui-progress-segment[data-tone="destructive"] {
-    background: hsl(var(--mark-destructive));
+    background: hsl(var(--mark-destructive, var(--text-error)));
   }
 
   .ui-progress-label {
@@ -273,17 +273,17 @@
   }
 
   .ui-progress-ring-indicator {
-    stroke: var(--progress-fill-background, hsl(var(--mark-success)));
+    stroke: var(--progress-fill-background, hsl(var(--mark-success, var(--text-success))));
 
     stroke-linecap: butt;
   }
 
   .ui-progress[data-tone="warning"] .ui-progress-ring-indicator {
-    stroke: hsl(var(--mark-warning));
+    stroke: hsl(var(--mark-warning, var(--text-warning)));
   }
 
   .ui-progress[data-tone="destructive"] .ui-progress-ring-indicator {
-    stroke: hsl(var(--mark-destructive));
+    stroke: hsl(var(--mark-destructive, var(--text-error)));
   }
 
   .ui-progress-ring-label {
@@ -320,23 +320,28 @@
   }
 
   .ui-legend-swatch[data-tone="default"] {
-    background: hsl(var(--mark-primary));
+    background: hsl(
+      var(
+        --mark-primary,
+        var(--text-primary, from hsl(var(--primary)) var(--text-primary-channels))
+      )
+    );
   }
 
   .ui-legend-swatch[data-tone="success"] {
-    background: hsl(var(--mark-success));
+    background: hsl(var(--mark-success, var(--text-success)));
   }
 
   .ui-legend-swatch[data-tone="warning"] {
-    background: hsl(var(--mark-warning));
+    background: hsl(var(--mark-warning, var(--text-warning)));
   }
 
   .ui-legend-swatch[data-tone="destructive"] {
-    background: hsl(var(--mark-destructive));
+    background: hsl(var(--mark-destructive, var(--text-error)));
   }
 
   .ui-legend-swatch[data-tone="info"] {
-    background: hsl(var(--mark-info));
+    background: hsl(var(--mark-info, var(--text-info)));
   }
 
   .ui-legend-swatch[data-tone="muted"],
@@ -386,11 +391,11 @@
   }
 
   .ui-feature-list-item[data-state="included"] .ui-feature-list-mark {
-    color: hsl(var(--mark-success));
+    color: hsl(var(--mark-success, var(--text-success)));
   }
 
   .ui-feature-list-item[data-state="limited"] .ui-feature-list-mark {
-    color: hsl(var(--mark-warning));
+    color: hsl(var(--mark-warning, var(--text-warning)));
   }
 
   .ui-feature-list-item[data-state="excluded"] .ui-feature-list-label {
@@ -958,6 +963,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;
@@ -1051,7 +1074,10 @@
 
   .ui-code-block [data-code-token="link"],
   .ui-prose pre [data-code-token="link"] {
-    color: var(--code-block-token-link-color, hsl(var(--text-link)));
+    color: var(
+      --code-block-token-link-color,
+      hsl(var(--text-link, from hsl(var(--primary)) var(--text-link-channels)))
+    );
     text-decoration-line: underline;
 
     text-underline-offset: var(--text-link-underline-offset);