@godxjp/ui 18.14.0 → 18.15.0

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

@@ -511,8 +511,12 @@ DataTable.Content = function DataTableContent() {
                     style: columnWidth(col.width).style,
                     className: cn(
                       columnWidth(col.width).className,
-                      col.align === "right" && "text-end",
-                      col.align === "center" && "text-center",
+                      // `headerAlign` when the heading differs from the rows,
+                      // `align` otherwise. A table wanting centred headings
+                      // over start-aligned text could not say so before, and
+                      // consumers reached for `[&_th_button]:justify-center`.
+                      (col.headerAlign ?? col.align) === "right" && "text-end",
+                      (col.headerAlign ?? col.align) === "center" && "text-center",
                       col.hiddenOnMobile && "hidden md:table-cell",
                       isSortable && "select-none",
                       col.pin === "end" && "ui-data-table-pin-end"

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 } from "./upload-types.js";
 export { useUploadDraft } from "./use-upload-draft.js";
-export declare function Upload({ variant, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;
+export declare function Upload({ variant, triggerSize, value, defaultValue, onValueChange, accept: acceptProp, multiple: multipleProp, maxCount: maxCountProp, maxSizeBytes, disabled, removable, onUpload, id, className, children, ...ariaProps }: UploadProp): React.JSX.Element;

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

@@ -75,6 +75,7 @@ async function runUpload(file, item, onUpload, setItems) {
 }
 function Upload({
   variant = "dropzone",
+  triggerSize,
   value,
   defaultValue,
   onValueChange,
@@ -212,13 +213,26 @@ function Upload({
     ] });
   }
   if (variant === "button") {
+    const iconOnly = typeof triggerSize === "string" && triggerSize.startsWith("icon");
+    const label = children ?? t("dataEntry.upload.buttonLabel");
     return /* @__PURE__ */ jsxs("div", { className: cn("ui-stack-sm", className), children: [
       hiddenInput,
       liveRegion,
-      /* @__PURE__ */ jsxs(Button, { type: "button", variant: "outline", disabled, onClick: openPicker, children: [
-        /* @__PURE__ */ jsx(UploadIcon, { className: "me-2 size-4", "aria-hidden": "true" }),
-        children ?? t("dataEntry.upload.buttonLabel")
-      ] }),
+      /* @__PURE__ */ jsxs(
+        Button,
+        {
+          type: "button",
+          variant: "outline",
+          size: triggerSize,
+          disabled,
+          onClick: openPicker,
+          "aria-label": iconOnly ? typeof label === "string" ? label : void 0 : void 0,
+          children: [
+            /* @__PURE__ */ jsx(UploadIcon, { className: iconOnly ? "size-4" : "me-2 size-4", "aria-hidden": "true" }),
+            iconOnly ? null : label
+          ]
+        }
+      ),
       items.length > 0 && /* @__PURE__ */ jsx(UploadFileList, { items, onRemove: removable ? removeItem : void 0 })
     ] });
   }

package/dist/components/layout/split-pane.d.ts

@@ -2,7 +2,13 @@ import type { ReactNode } from "react";
 export type SplitPaneProps = {
     children: ReactNode;
     aside: ReactNode;
-    asideWidth?: "sm" | "md";
+    /**
+     * How wide the rail is once the pane is wide enough to split: `sm` 20rem,
+     * `md` 22rem, `lg` 30rem. `lg` is for rails that carry a panel rather than a
+     * list — a metadata table, a recently-updated feed — and it holds off
+     * splitting until 64rem so the main column stays the wider of the two.
+     */
+    asideWidth?: "sm" | "md" | "lg";
     /** Accessible complementary landmark name; required when multiple panes share a document. */
     asideLabel?: string;
 };

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

@@ -520,6 +520,15 @@ export type UploadProp = FieldA11yProps & {
     }>;
     /** Injected by FormField (or set directly) — applied to the native `<input type="file">`. */
     id?: IdProp;
+    /**
+     * `variant="button"` only — the size of the visible trigger, forwarded to
+     * Button. An icon size renders the trigger icon-only and moves the label to
+     * `aria-label`, which is what a toolbar wants: a 32px square beside the other
+     * icon buttons rather than a 147px labelled one that outweighs them.
+     *
+     * @see Button — same size scale
+     */
+    triggerSize?: "default" | "md" | "xs" | "sm" | "lg" | "icon" | "icon-xs" | "icon-sm" | "icon-lg";
     className?: ClassNameProp;
     children?: React.ReactNode;
 };

package/dist/props/vocabulary/data.prop.d.ts

@@ -34,6 +34,18 @@ export type ColumnDefProp<T> = {
      */
     width?: string;
     align?: ColumnAlignProp;
+    /**
+     * Alignment of the header cell, when it differs from the body.
+     *
+     * Defaults to `align`, which is the usual case. It exists because a table
+     * can want centred headings over start-aligned text — a long subject reads
+     * from the left while its column heading sits over the column — and `align`
+     * alone cannot say that: setting it to `center` centres the rows too.
+     *
+     * Consumers were reaching for `[&_th_button]:justify-center` to get there,
+     * which is a hand-tuned override of a layout the table owns.
+     */
+    headerAlign?: ColumnAlignProp;
     hiddenOnMobile?: boolean;
     /**
      * List this column in DataTable.ViewOptions (the column show/hide "set view"

package/dist/styles/form-layout.css

@@ -33,6 +33,16 @@
     margin-block-start: var(--form-field-row-gap);
   }
 
+  /* …except when the fields are ResponsiveGrid ITEMS (Form columns={n}): there the grid's own
+   * `gap` owns the rhythm, and a per-item margin double-spaces every row AND breaks column
+   * alignment — the FIRST field has no preceding sibling so no margin, while its row-mate does,
+   * shifting row 1's columns 11px apart and inflating every grid track by the margin. Fields
+   * merely NESTED somewhere inside a grid cell (a stacked pair in one cell) are not direct
+   * children, keep the margin, and are unaffected. */
+  .ui-responsive-grid > .ui-form-field + .ui-form-field {
+    margin-block-start: 0;
+  }
+
   /* Vertical (default + collapsed state): label stacked above the control column, LEFT-aligned.
    * Gap = the shared --field-label-gap so FormField matches Descriptions and every label-above stack. */
   .ui-form-field {

package/dist/styles/layout.css

@@ -384,6 +384,17 @@
     }
   }
 
+  /* `lg` splits later than the other two ON PURPOSE. A rail is only useful when
+   * the column it sits beside still reads as the main one, and at the 48rem
+   * threshold a 30rem rail would leave 16.5rem of main — narrower than the rail
+   * itself, which inverts the whole point. 64rem leaves the main column 33.5rem,
+   * about twice the rail, so the page still reads main-plus-rail. */
+  @container split-pane (min-width: 64rem) {
+    .ui-split-pane[data-aside-width="lg"] {
+      grid-template-columns: minmax(0, 1fr) 30rem;
+    }
+  }
+
   .ui-split-pane-main,
   .ui-split-pane-aside {
     min-width: 0;

package/dist/styles/table-layout.css

@@ -169,6 +169,44 @@
     gap: var(--space-inline-xs);
   }
 
+  /* A centred header centres its LABEL, not its button.
+   *
+   * The sort chevron lives inside the label, so centring the button alone
+   * leaves the words half an icon to the left of the column they name —
+   * measured at 8px on a 12px icon, which is enough to read as a mistake in a
+   * row of headings.
+   *
+   * The fix is symmetry, not a counterweight. Reserving the chevron's width on
+   * BOTH sides and taking the chevron itself out of flow means the words are
+   * centred by construction — the label's own box is centred in the cell, and
+   * nothing inside it can shift them. A counterweight sitting in flow as a
+   * flex sibling was the first attempt and it holds only while there is room
+   * to spare: flex items shrink, so on a column narrow enough to squeeze them
+   * the balance collapses and the label slides back off centre. Measured at
+   * 8px on a 56px column, 0px on the wide ones — a bug that only appears in
+   * the narrow case is worse than one that appears everywhere.
+   *
+   * Only when the column asked to be centred: a start-aligned header wants the
+   * icon to follow the text with nothing before it. */
+  :is(th, td).text-center > .ui-data-table-sort-button > .ui-data-table-sort-label {
+    position: relative;
+    /* The icon's width plus the gap it would have sat behind — the space the
+     * chevron occupied when it was in flow, now reserved on each side. */
+    padding-inline: calc(0.75rem + var(--space-inline-xs));
+  }
+
+  /* Out of flow, in the inline-end reservation its own padding just made.
+   * Logical inset, so RTL puts it on the other side with the padding. */
+  :is(th, td).text-center
+    > .ui-data-table-sort-button
+    > .ui-data-table-sort-label
+    > :not(:first-child) {
+    position: absolute;
+    inset-inline-end: 0;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+
   .ui-data-table-scroll {
     position: relative;
     overflow-x: auto;

package/package.json

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