@godxjp/ui 27.8.0 → 27.9.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.js

@@ -772,21 +772,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/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/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/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.9.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 */

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

@@ -353,6 +353,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 +1340,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;
 };

package/dist/props/registry.d.ts

@@ -883,7 +883,15 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly AppShellProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["ChildrenProp"];
+        readonly vocabulary: readonly ["ChildrenProp", "BreakpointProp", {
+            readonly field: "logoCompact";
+            readonly local: true;
+            readonly reason: "The brand node a narrow bar gets instead of `logo` — the consumer's own mark/viewBox, which a stylesheet cannot produce (gh#728).";
+        }, {
+            readonly field: "logoCompactBelow";
+            readonly local: true;
+            readonly reason: "Flex `hideBelow` scoped to the brand cell — the step at which `logoCompact` takes over (gh#728).";
+        }];
     };
     readonly AuthShellProp: {
         readonly group: "layout";
@@ -1178,7 +1186,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly TopbarProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["ChildrenProp"];
+        readonly vocabulary: readonly ["ChildrenProp", {
+            readonly field: "overflow";
+            readonly local: true;
+            readonly reason: "The bar's overflow contract — `scroll` (default) keeps every cell reachable, `clip` is the pre-gh#728 slicing.";
+        }];
     };
     readonly TopbarItemProp: {
         readonly group: "layout";
@@ -2816,7 +2828,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly TreeProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "SizeProp", "ClassNameProp", "IdProp"];
+        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "SizeProp", "ClassNameProp", "IdProp", {
+            readonly field: "divided";
+            readonly local: true;
+            readonly reason: "Rules between the rows — a hairline on every node's block-start but the outline's first, full row width at every depth (gh#732). Default false, because chrome defaults quiet here (#44). Not antd's spelling: antd's Tree has no such capability, and `bordered` already means a grid's frame plus column rules on Table / Calendar / RangeTimeline; see docs/DESIGN-AUTHORITY.md.";
+        }];
     };
     readonly CardProp: {
         readonly group: "data-display";
@@ -2943,7 +2959,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly RangeTimelineProp: {
         readonly group: "data-display";
         readonly file: "components/data-display/range-timeline.tsx";
-        readonly vocabulary: readonly ["LabelProp", {
+        readonly vocabulary: readonly ["LabelProp", "DensityProp", {
             readonly field: "columns";
             readonly local: true;
             readonly reason: "Labels, positive numeric unit counts and an optional muted flag (non-working period) define a consumer-supplied axis.";

package/dist/props/registry.js

@@ -883,7 +883,20 @@ const COMPONENT_PROP_REGISTRY = {
   AppShellProp: {
     group: "layout",
     file: "components/layout.prop.ts",
-    vocabulary: ["ChildrenProp"]
+    vocabulary: [
+      "ChildrenProp",
+      "BreakpointProp",
+      {
+        field: "logoCompact",
+        local: true,
+        reason: "The brand node a narrow bar gets instead of `logo` \u2014 the consumer's own mark/viewBox, which a stylesheet cannot produce (gh#728)."
+      },
+      {
+        field: "logoCompactBelow",
+        local: true,
+        reason: "Flex `hideBelow` scoped to the brand cell \u2014 the step at which `logoCompact` takes over (gh#728)."
+      }
+    ]
   },
   AuthShellProp: {
     group: "layout",
@@ -1276,7 +1289,14 @@ const COMPONENT_PROP_REGISTRY = {
   TopbarProp: {
     group: "layout",
     file: "components/layout.prop.ts",
-    vocabulary: ["ChildrenProp"]
+    vocabulary: [
+      "ChildrenProp",
+      {
+        field: "overflow",
+        local: true,
+        reason: "The bar's overflow contract \u2014 `scroll` (default) keeps every cell reachable, `clip` is the pre-gh#728 slicing."
+      }
+    ]
   },
   TopbarItemProp: {
     group: "layout",
@@ -3307,7 +3327,12 @@ const COMPONENT_PROP_REGISTRY = {
       "DisabledProp",
       "SizeProp",
       "ClassNameProp",
-      "IdProp"
+      "IdProp",
+      {
+        field: "divided",
+        local: true,
+        reason: "Rules between the rows \u2014 a hairline on every node's block-start but the outline's first, full row width at every depth (gh#732). Default false, because chrome defaults quiet here (#44). Not antd's spelling: antd's Tree has no such capability, and `bordered` already means a grid's frame plus column rules on Table / Calendar / RangeTimeline; see docs/DESIGN-AUTHORITY.md."
+      }
     ]
   },
   CardProp: {
@@ -3453,6 +3478,10 @@ const COMPONENT_PROP_REGISTRY = {
     file: "components/data-display/range-timeline.tsx",
     vocabulary: [
       "LabelProp",
+      // The CANONICAL three-step axis, the same type DataTable takes — not a local subset. It
+      // moves `--range-timeline-unit-width` only (42 / 56 / 70px per day), never the row or bar
+      // height, so a compact Gantt is the same schedule with more days on screen (gh#730).
+      "DensityProp",
       {
         field: "columns",
         local: true,

package/dist/styles/control.css

@@ -2229,13 +2229,13 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week,
   .ui-calendar[data-bordered="true"] .ui-calendar-weekdays {
-    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-inline-end: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-weekday {
@@ -2247,7 +2247,7 @@
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-grid {
-    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-block-end: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day.invisible {
@@ -2268,8 +2268,8 @@
 
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number,
   .ui-calendar[data-bordered="true"] .ui-calendar-week-number-header {
-    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
-    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--input) / 0.5));
+    border-inline-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
+    border-block-start: 1px solid var(--calendar-grid-border-color, hsl(var(--border)));
   }
 
   .ui-calendar[data-bordered="true"] .ui-calendar-day {
@@ -2317,7 +2317,6 @@
     position: relative;
     display: flex;
     flex-direction: column;
-    gap: var(--calendar-month-space-gap);
   }
 
   .ui-calendar-caption {

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

@@ -464,23 +464,23 @@
     place-items: center;
     border: 1px solid transparent;
     border-radius: var(--radius-pill);
-    background: var(--timeline-dot-done-background, hsl(var(--success)));
-    color: hsl(var(--success-foreground));
+    background: var(--timeline-dot-done-background, hsl(var(--primary)));
+    color: var(--timeline-dot-done-foreground, hsl(var(--primary-foreground)));
     font-size: var(--timeline-note-font-size);
     font-weight: var(--font-weight-medium);
     line-height: 1;
   }
 
   .ui-timeline-dot[data-status="done"] {
-    background: var(--timeline-dot-done-background, hsl(var(--success)));
-    color: hsl(var(--success-foreground));
+    background: var(--timeline-dot-done-background, hsl(var(--primary)));
+    color: var(--timeline-dot-done-foreground, hsl(var(--primary-foreground)));
   }
 
   .ui-timeline-dot[data-status="current"],
   .ui-timeline-dot[data-current="true"] {
     background: var(--timeline-dot-current-background, hsl(var(--primary)));
     color: hsl(var(--primary-foreground));
-    box-shadow: 0 0 0 3px hsl(var(--primary) / 0.18);
+    box-shadow: 0 0 0 var(--timeline-dot-current-ring-width) hsl(var(--primary) / 0.2);
   }
 
   .ui-timeline-dot[data-status="pending"] {
@@ -1356,10 +1356,13 @@
     display: grid;
     grid-template-columns: repeat(var(--range-timeline-units, 1), minmax(0, 1fr));
   }
+
   .ui-range-timeline-column {
     min-inline-size: 0;
     overflow: hidden;
     padding: var(--space-2);
+    padding-inline-start: calc(var(--space-2) + var(--range-timeline-grid-width));
+    text-align: center;
     border-inline-end: var(--range-timeline-grid-width) solid
       hsl(var(--range-timeline-border-color));
   }
@@ -1392,12 +1395,19 @@
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-column,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-label,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-grid-column {
-    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--input) / 0.5));
+    border-inline-end-color: var(--range-timeline-grid-color, hsl(var(--border)));
   }
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-header + .ui-range-timeline-header,
   .ui-range-timeline[data-bordered="true"] .ui-range-timeline-row {
     border-block-start: var(--range-timeline-grid-width) solid
-      var(--range-timeline-grid-color, hsl(var(--input) / 0.5));
+      var(--range-timeline-grid-color, hsl(var(--border)));
+  }
+
+  .ui-range-timeline[data-density="compact"] {
+    --range-timeline-unit-width: var(--range-timeline-unit-width-compact);
+  }
+  .ui-range-timeline[data-density="comfortable"] {
+    --range-timeline-unit-width: var(--range-timeline-unit-width-comfortable);
   }
   .ui-range-timeline-outside {
     position: absolute;
@@ -1904,6 +1914,14 @@
     content: "";
   }
 
+  .ui-tree[data-divided="true"] .ui-tree-node {
+    border-block-start: var(--stroke-hairline) solid var(--tree-divider-color, hsl(var(--border)));
+  }
+
+  .ui-tree[data-divided="true"] > .ui-tree-node:first-child {
+    border-block-start-color: transparent;
+  }
+
   .ui-tree-loading {
     display: flex;
     align-items: center;

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

@@ -448,6 +448,7 @@
 
   .ui-upload-row {
     display: flex;
+    flex-wrap: wrap;
     align-items: center;
     gap: var(--upload-row-space-gap);
     padding-inline: var(--upload-row-space-inline);
@@ -462,6 +463,18 @@
     flex: 1 1 0%;
   }
 
+  .ui-upload-row-actions {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: var(--upload-row-space-gap);
+    margin-inline-start: auto;
+  }
+
+  .ui-upload-row-actions:empty {
+    display: none;
+  }
+
   .ui-upload-row-icon {
     inline-size: var(--upload-row-icon-size);
     block-size: var(--upload-row-icon-size);

package/dist/styles/layout.css

@@ -1450,6 +1450,7 @@
 
   @media (width < 40rem) {
     .ui-flex[data-hide-below="sm"],
+    .app-topbar-brand[data-hide-below="sm"],
     .ui-topbar-item[data-hide-below="sm"],
     [data-slot="table-head"][data-hide-below="sm"],
     [data-slot="table-cell"][data-hide-below="sm"] {
@@ -1459,6 +1460,7 @@
 
   @media (width < 48rem) {
     .ui-flex[data-hide-below="md"],
+    .app-topbar-brand[data-hide-below="md"],
     .ui-topbar-item[data-hide-below="md"],
     [data-slot="table-head"][data-hide-below="md"],
     [data-slot="table-cell"][data-hide-below="md"] {
@@ -1468,6 +1470,7 @@
 
   @media (width < 64rem) {
     .ui-flex[data-hide-below="lg"],
+    .app-topbar-brand[data-hide-below="lg"],
     .ui-topbar-item[data-hide-below="lg"],
     [data-slot="table-head"][data-hide-below="lg"],
     [data-slot="table-cell"][data-hide-below="lg"] {
@@ -1477,6 +1480,7 @@
 
   @media (width < 80rem) {
     .ui-flex[data-hide-below="xl"],
+    .app-topbar-brand[data-hide-below="xl"],
     .ui-topbar-item[data-hide-below="xl"],
     [data-slot="table-head"][data-hide-below="xl"],
     [data-slot="table-cell"][data-hide-below="xl"] {
@@ -1486,6 +1490,7 @@
 
   @media (width >= 40rem) {
     .ui-flex[data-hide-from="sm"],
+    .app-topbar-brand[data-hide-from="sm"],
     .ui-topbar-item-icon[data-hide-from="sm"] {
       display: none;
     }
@@ -1493,6 +1498,7 @@
 
   @media (width >= 48rem) {
     .ui-flex[data-hide-from="md"],
+    .app-topbar-brand[data-hide-from="md"],
     .ui-topbar-item-icon[data-hide-from="md"] {
       display: none;
     }
@@ -1500,6 +1506,7 @@
 
   @media (width >= 64rem) {
     .ui-flex[data-hide-from="lg"],
+    .app-topbar-brand[data-hide-from="lg"],
     .ui-topbar-item-icon[data-hide-from="lg"] {
       display: none;
     }
@@ -1507,6 +1514,7 @@
 
   @media (width >= 80rem) {
     .ui-flex[data-hide-from="xl"],
+    .app-topbar-brand[data-hide-from="xl"],
     .ui-topbar-item-icon[data-hide-from="xl"] {
       display: none;
     }