@godxjp/ui 33.12.8 → 33.14.0

package/dist/i18n/messages/ja.json

@@ -155,19 +155,20 @@
       "placeholder": "年月を選択"
     },
     "branchScope": {
-      "label": "ブランチ範囲",
-      "all": "すべてのブランチ",
-      "allDescription": "現在および今後のすべてのブランチに適用",
-      "selected": "選択したブランチのみ",
-      "selectedDescription": "下で選択したブランチにのみ適用",
-      "listLabel": "ブランチ",
-      "searchPlaceholder": "ブランチを検索",
+      "label": "支店範囲",
+      "all": "すべての支店",
+      "allDescription": "現在および今後のすべての支店に適用",
+      "selected": "選択した支店のみ",
+      "selectedDescription": "下で選択した支店にのみ適用",
+      "listLabel": "支店",
+      "searchPlaceholder": "支店を検索",
       "selectedCount": "{count} 件選択中",
-      "empty": "選択できるブランチがありません",
-      "error": "ブランチを取得できませんでした",
-      "denied": "ブランチを表示する権限がありません",
-      "loading": "ブランチを読み込み中…",
-      "noMatches": "検索に一致するブランチがありません"
+      "empty": "選択できる支店がありません",
+      "error": "支店を取得できませんでした",
+      "denied": "支店を表示する権限がありません",
+      "loading": "支店を読み込み中…",
+      "noMatches": "検索に一致する支店がありません",
+      "choose": "支店を選択"
     },
     "formErrors": {
       "title": "入力内容にエラーがあります"

package/dist/i18n/messages/vi.json

@@ -167,7 +167,8 @@
       "error": "Không tải được danh sách chi nhánh",
       "denied": "Bạn không có quyền xem chi nhánh",
       "loading": "Đang tải chi nhánh…",
-      "noMatches": "Không có chi nhánh khớp với tìm kiếm"
+      "noMatches": "Không có chi nhánh khớp với tìm kiếm",
+      "choose": "Chọn chi nhánh"
     },
     "formErrors": {
       "title": "Dữ liệu nhập có lỗi, vui lòng kiểm tra"

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

@@ -1424,3 +1424,13 @@ export type TextDiffProp = Omit<React.HTMLAttributes<HTMLDivElement>, "children"
     lang?: string;
     className?: ClassNameProp;
 };
+/** @see Persona — static identity; pass translated labels and badge content from the consumer. */
+export type PersonaProp = Omit<React.HTMLAttributes<HTMLSpanElement>, "children"> & {
+    name: string;
+    description?: string;
+    avatarSrc?: string;
+    avatarFallback?: React.ReactNode;
+    /** Optional inline badge beside the name, never part of the clipped name. */
+    trailing?: React.ReactNode;
+    size?: Extract<SizeProp, "sm" | "md">;
+};

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

@@ -2216,6 +2216,12 @@ export type BranchScopePickerProp = FieldA11yProps & {
     defaultValue?: BranchScopeValueProp;
     /** Value change handler (fires for mode switches AND branch checks). */
     onValueChange?: (value: BranchScopeValueProp) => void;
+    /** Single compact Select for navigation/record fields; multiple preserves the all/subset editor. */
+    selectionMode?: "single" | "multiple";
+    /** Permit organization-wide scope. Set false for record forms; validate one concrete branch on submit. Default true. */
+    allowAll?: boolean;
+    /** Hide after a successful one-branch read, unless disabled branch or validation error. Does not emit or normalize value. Default false. */
+    hideWhenSingle?: boolean;
     /** Disable the whole control. */
     disabled?: DisabledProp;
     /** Render the current value without any editable affordance (locked view). */

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

@@ -1,7 +1,7 @@
 /** Layout component prop types — @see docs/COMPONENTS.md#layout */
 import type * as React from "react";
 import type { ComponentType, ReactNode, SVGProps } from "react";
-import type { BreadcrumbProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, DensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp, SizeProp } from "../vocabulary/index.js";
+import type { BreadcrumbProp, BreadcrumbCurrentItemProp, TitleProp, SubtitleProp, StatusProp, ExtraProp, FooterProp, PageDensityProp, DensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TextAlignProp, TextToneProp, BreakpointProp, GapProp, PadProp, PadRawProp, ClassNameProp, ChildrenProp, IdProp, DisabledProp, DescriptionProp, ActionProp, IconProp, HeadingLevelProp, ToneProp, WidthProp, SizeProp } from "../vocabulary/index.js";
 import type { EmptyStateToneProp } from "./data-display.prop.js";
 import type { SearchInputProp } from "./data-entry.prop.js";
 /**
@@ -82,6 +82,8 @@ export type PageContainerProp = {
     toolbar?: ReactNode;
     footer?: FooterProp;
     breadcrumb?: BreadcrumbProp;
+    /** Last item is current by default; none keeps an ancestor-only trail linked. */
+    breadcrumbCurrentItem?: BreadcrumbCurrentItemProp;
     /**
      * Override the breadcrumb `<nav>` landmark's accessible name. Defaults to a localized
      * "Breadcrumb".
@@ -1467,6 +1469,8 @@ export type SidebarProp = {
      */
     brand?: ReactNode | ((collapsed: boolean) => ReactNode);
     /**
+     * Also accepts one app-local scope control (BranchScopePicker selectionMode="single").
+     * This is viewing scope, not an organization/platform switch.
      * The rail's ONE primary action ("New issue", "+ Create", "New page"), rendered between `brand`
      * and the scrolling nav and never scrolling with it. Put exactly one primary control here: a
      * `Button` (variant primary) full width when expanded, icon-only with an `aria-label` + tooltip

package/dist/props/registry.d.ts

@@ -604,6 +604,11 @@ export declare const VOCABULARY_REGISTRY: {
         readonly category: "navigation";
         readonly description: "One-line truncation of a breadcrumb segment, with the full label in a tooltip";
     };
+    readonly BreadcrumbCurrentItemProp: {
+        readonly file: "vocabulary/navigation.prop.ts";
+        readonly category: "navigation";
+        readonly description: "Current breadcrumb item: last (default) or none for ancestors only";
+    };
     readonly BreadcrumbProp: {
         readonly file: "vocabulary/navigation.prop.ts";
         readonly category: "navigation";
@@ -778,7 +783,7 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly PageContainerProp: {
         readonly group: "layout";
         readonly file: "components/layout.prop.ts";
-        readonly vocabulary: readonly ["TitleProp", "SubtitleProp", "StatusProp", "ExtraProp", "FooterProp", "BreadcrumbProp", "DensityProp", "PageContainerVariantProp", {
+        readonly vocabulary: readonly ["TitleProp", "SubtitleProp", "StatusProp", "ExtraProp", "FooterProp", "BreadcrumbProp", "BreadcrumbCurrentItemProp", "DensityProp", "PageContainerVariantProp", {
             readonly field: "toolbar";
             readonly local: true;
             readonly reason: "FIXED chrome band between the page header and the scrolling body (filter strip, status bar, channel workflow rail). Distinct from ExtraProp (header actions, inside the title row) and FooterProp (action bar after the body): it is the only slot that stays OUT of the `fill` scroll viewport while sharing the header/body gutters and measure, so a consumer never hand-lays `position: sticky` page chrome.";
@@ -2166,6 +2171,11 @@ export declare const COMPONENT_PROP_REGISTRY: {
         readonly file: "components/data-display.prop.ts";
         readonly vocabulary: readonly ["ColumnDefProp", "DensityProp", "SortStateProp", "SelectedIdsProp", "GetRowLabelProp", "HandlerProp", "TablePresetProp", "TableColumnPriorityProp", "BreakpointProp", "ColumnFixedProp", "ColumnFilterItemProp", "ColumnFilterStateProp", "ColumnSorterProp", "TableRowSelectionProp", "TableSelectionBuiltInProp", "TableSelectAllMatchingProp", "TableExpandableProp", "TableSummaryProp", "TableScrollProp", "TableStickyProp", "OnRowProp", "TablePaginationProp", "TablePaginationPositionProp", "SortDirectionProp", "OnColumnFilterChangeProp"];
     };
+    readonly PersonaProp: {
+        readonly group: "data-display";
+        readonly file: "components/data-display.prop.ts";
+        readonly vocabulary: readonly ["SizeProp", "ClassNameProp", "DescriptionProp"];
+    };
     readonly ListRowDensityProp: {
         readonly group: "data-display";
         readonly file: "components/data-display.prop.ts";
@@ -3822,7 +3832,19 @@ export declare const COMPONENT_PROP_REGISTRY: {
     readonly BranchScopePickerProp: {
         readonly group: "data-entry";
         readonly file: "components/data-entry.prop.ts";
-        readonly vocabulary: readonly ["ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "ErrorProp", "NameProp", "IdProp", "ClassNameProp", {
+        readonly vocabulary: readonly [{
+            readonly field: "selectionMode";
+            readonly local: true;
+            readonly reason: "Single navigation scope or existing multiple-branch subset editor.";
+        }, {
+            readonly field: "allowAll";
+            readonly local: true;
+            readonly reason: "Whether organization-wide branch scope is selectable.";
+        }, {
+            readonly field: "hideWhenSingle";
+            readonly local: true;
+            readonly reason: "Hide a settled single-branch navigation scope without changing consumer state.";
+        }, "ValueProp", "DefaultValueProp", "OnValueChangeProp", "DisabledProp", "ErrorProp", "NameProp", "IdProp", "ClassNameProp", {
             readonly field: "branches";
             readonly local: true;
             readonly reason: "Consumer-supplied selectable branches (see BranchScopeOptionProp).";

package/dist/props/registry.js

@@ -604,6 +604,11 @@ const VOCABULARY_REGISTRY = {
     category: "navigation",
     description: "One-line truncation of a breadcrumb segment, with the full label in a tooltip"
   },
+  BreadcrumbCurrentItemProp: {
+    file: "vocabulary/navigation.prop.ts",
+    category: "navigation",
+    description: "Current breadcrumb item: last (default) or none for ancestors only"
+  },
   BreadcrumbProp: {
     file: "vocabulary/navigation.prop.ts",
     category: "navigation",
@@ -794,6 +799,7 @@ const COMPONENT_PROP_REGISTRY = {
       "ExtraProp",
       "FooterProp",
       "BreadcrumbProp",
+      "BreadcrumbCurrentItemProp",
       "DensityProp",
       "PageContainerVariantProp",
       {
@@ -2645,6 +2651,11 @@ const COMPONENT_PROP_REGISTRY = {
       "OnColumnFilterChangeProp"
     ]
   },
+  PersonaProp: {
+    group: "data-display",
+    file: "components/data-display.prop.ts",
+    vocabulary: ["SizeProp", "ClassNameProp", "DescriptionProp"]
+  },
   ListRowDensityProp: {
     group: "data-display",
     file: "components/data-display.prop.ts",
@@ -4579,6 +4590,21 @@ const COMPONENT_PROP_REGISTRY = {
     group: "data-entry",
     file: "components/data-entry.prop.ts",
     vocabulary: [
+      {
+        field: "selectionMode",
+        local: true,
+        reason: "Single navigation scope or existing multiple-branch subset editor."
+      },
+      {
+        field: "allowAll",
+        local: true,
+        reason: "Whether organization-wide branch scope is selectable."
+      },
+      {
+        field: "hideWhenSingle",
+        local: true,
+        reason: "Hide a settled single-branch navigation scope without changing consumer state."
+      },
       "ValueProp",
       "DefaultValueProp",
       "OnValueChangeProp",

package/dist/props/vocabulary/index.d.ts

@@ -3,5 +3,5 @@ export type { ClassNameProp, ChildrenProp, IdProp, OpenProp, DefaultOpenProp, On
 export type { TitleProp, SubtitleProp, StatusProp, DescriptionProp, ExtraProp, FooterProp, ActionProp, IconProp, ConfirmLabelProp, CancelLabelProp, ActionsProp, EmptyMessageProp, } from "./content.prop.js";
 export type { PageDensityProp, PageContainerVariantProp, CenteredShellWidthProp, CenteredShellAlignProp, CenteredShellPresetProp, ErrorSurfaceModeProp, ErrorSurfaceStatusProp, AuthShellPresetProp, MobileShellHeightProp, MobileShellWidthProp, OrientationProp, TableDensityProp, DensityProp, GapNameProp, PadProp, PadRawProp, PadSides, GapProp, GapStepProp, } from "./layout.prop.js";
 export type { ButtonVariantProp, ButtonSizeProp, BadgeVariantProp, AppSettingPickerAppearanceProp, AppSettingCycleAppearanceProp, ShapeProp, AvatarShapeProp, TextSizeProp, TextToneProp, FontWeightProp, HeadingLevelProp, TextAlignProp, TextWhitespaceProp, TextBreakProp, TypographyTypeProp, TypographyCopyConfigProp, TypographyEditConfigProp, TypographyEllipsisConfigProp, TypographyActionsConfigProp, SizeProp, ControlStatusProp, ControlVariantProp, FormLayoutProp, DescriptionsLayoutProp, BreakpointProp, ConfirmVariantProp, ToneProp, AlertVariantProp, CalloutKindProp, SortDirectionProp, ColumnAlignProp, SortStateProp, RevealDelayProp, RevealTriggerProp, InViewAmountProp, ActivityVariantProp, ActivityAnnounceProp, IconSizeProp, } from "./interaction.prop.js";
-export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbItemMenuProp, BreadcrumbItemEllipsisProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
+export type { BreadcrumbItemProp, BreadcrumbProp, BreadcrumbCurrentItemProp, BreadcrumbItemMenuProp, BreadcrumbItemEllipsisProp, BreadcrumbItemMenuEntryProp, BreadcrumbSeparatorProp, BreadcrumbItemRenderProp, } from "./navigation.prop.js";
 export type { GetRowIdProp, GetRowLabelProp, OnRowClickProp, ColumnDefProp, TablePresetProp, TableColumnPriorityProp, TableCellIndentProp, SelectedIdsProp, OnSelectChangeProp, OnTableDensityChangeProp, TableRowToneProp, RowToneProp, OnSortChangeProp, OnSearchChangeProp, OnClearFiltersProp, HasActiveFiltersProp, StickyProp, ColumnFixedProp, ColumnFilterValueProp, ColumnFilterItemProp, ColumnFilterStateProp, OnColumnFilterChangeProp, ColumnCompareProp, ColumnSorterProp, TableSelectionItemProp, TableSelectionBuiltInProp, TableSelectAllMatchingProp, TableRowSelectionProp, TableExpandableProp, TableSummaryProp, TableScrollProp, TableStickyProp, OnRowProp, TablePaginationProp, TablePaginationPositionProp, DescriptionsColumnProp, DescriptionsSpanProp, DescriptionsItemsProp, } from "./data.prop.js";

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

@@ -48,6 +48,8 @@ export type BreadcrumbItemProp = {
 export type BreadcrumbItemEllipsisProp = boolean | {
     tooltip?: React.ReactNode;
 };
+/** Which item represents the current page; none is an ancestor-only trail. */
+export type BreadcrumbCurrentItemProp = "last" | "none";
 /** Ordered breadcrumb trail above page title. */
 export type BreadcrumbProp = BreadcrumbItemProp[];
 /**

package/dist/styles/control.css

@@ -1850,8 +1850,7 @@
   .ui-number-input-step::after {
     content: "";
     position: absolute;
-    inset-inline-start: 50%;
-    translate: -50% 0;
+    inset-inline-start: calc((100% - var(--touch-target-min)) / 2);
     inline-size: var(--touch-target-min);
     block-size: var(--touch-target-min);
   }
@@ -2689,6 +2688,7 @@
   .ui-calendar {
     position: relative;
     inline-size: fit-content;
+    max-inline-size: 100%;
     padding: var(--calendar-space-inset);
   }
 
@@ -2912,12 +2912,37 @@
     block-size: var(--calendar-chevron-size);
   }
 
+  .ui-calendar-month {
+    min-inline-size: 0;
+  }
+
+  .ui-calendar-day,
+  .ui-calendar-weekday {
+    flex: 0 1 var(--control-height);
+    min-inline-size: calc(var(--touch-target-min) + var(--stroke-hairline));
+  }
+
   .ui-calendar-grid {
     margin-block-start: var(--calendar-grid-space-block-start);
-    inline-size: 100%;
+    inline-size: calc(7 * var(--control-height));
+    max-inline-size: 100%;
+    table-layout: fixed;
     border-collapse: collapse;
   }
 
+  .ui-calendar[data-bordered="true"] .ui-calendar-grid {
+    inline-size: calc(7 * var(--control-height) + var(--stroke-hairline));
+  }
+
+  .ui-calendar .ui-calendar-grid:has(.ui-calendar-week-number) {
+    inline-size: 100%;
+    table-layout: auto;
+  }
+
+  .ui-calendar[data-width="full"] .ui-calendar-grid {
+    inline-size: 100%;
+  }
+
   .ui-calendar-weekday {
     inline-size: var(--control-height);
     border-radius: var(--calendar-weekday-radius, calc(var(--radius) / var(--radius-ratio)));
@@ -2947,6 +2972,7 @@
   .ui-calendar .ui-calendar-day-button {
 
     color: inherit;
+    max-inline-size: 100%;
     inline-size: var(--control-height);
     block-size: var(--control-height);
     padding: 0;

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

@@ -1,4 +1,62 @@
 @layer components {
+  .ui-persona {
+    display: flex;
+    align-items: center;
+    flex-wrap: nowrap;
+    min-inline-size: 0;
+    max-inline-size: 100%;
+    gap: var(--persona-avatar-gap, var(--space-2));
+  }
+
+  .ui-persona [data-slot="persona-body"] {
+    display: flex;
+    flex-direction: column;
+    flex: 1;
+    min-inline-size: 0;
+    gap: var(--persona-label-gap, 0);
+  }
+
+  .ui-persona [data-slot="persona-name-line"] {
+    display: flex;
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--persona-trailing-gap, var(--space-1));
+  }
+
+  .ui-persona [data-slot="persona-name"],
+  .ui-persona [data-slot="persona-description"] {
+    display: block;
+    min-inline-size: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    text-align: start;
+    line-height: var(--persona-label-line-height);
+  }
+
+  .ui-persona [data-slot="persona-name"] {
+    font-size: var(--persona-name-font-size, var(--font-size-sm));
+    font-weight: var(--persona-name-font-weight, var(--font-weight-medium));
+    color: var(--persona-name-color, hsl(var(--foreground)));
+  }
+
+  .ui-persona[data-size="sm"] [data-slot="persona-name"] {
+    font-size: var(--persona-name-font-size-sm, var(--font-size-xs));
+  }
+
+  .ui-persona [data-slot="persona-description"] {
+    align-self: flex-start;
+    max-inline-size: 100%;
+    font-size: var(--persona-description-font-size, var(--font-size-xs));
+    color: var(--persona-description-color, hsl(var(--muted-foreground)));
+  }
+
+  .ui-persona [data-slot="persona-trailing"] {
+    flex: none;
+    display: inline-flex;
+    white-space: nowrap;
+  }
+
   .ui-avatar {
     position: relative;
     display: inline-flex;

package/dist/styles/layers.json

@@ -1,5 +1,5 @@
 {
-  "version": "33.12.8",
+  "version": "33.14.0",
   "generatedBy": "scripts/gen-style-layers.mjs — do not edit by hand; run `pnpm gen:style-layers`",
   "base": "base.css",
   "fonts": "fonts.css",
@@ -215,7 +215,8 @@
         "alert-layout.css",
         "badge-layout.css",
         "data-entry-layout.css",
-        "form-layout.css"
+        "form-layout.css",
+        "navigation-layout.css"
       ]
     },
     "Breadcrumb": {
@@ -767,6 +768,11 @@
         "form-layout.css"
       ]
     },
+    "Persona": {
+      "layers": [
+        "data-display-layout.css"
+      ]
+    },
     "PieChart": {
       "layers": [
         "layout.css",

package/dist/styles/table-layout.css

@@ -1050,19 +1050,24 @@
       display: block;
 
       height: auto;
-      border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+      border: 0;
+      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
-        var(--table-stacked-collection-card-padding-x);
+        var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
       margin-block-end: var(--table-stacked-collection-card-gap);
     }
 
     [data-collapse-below="sm"] .ui-table-row:last-child {
       margin-block-end: 0;
+      border-block-end-width: 0;
     }
 
     [data-collapse-below="sm"] [data-slot="table-cell"] {
       display: block;
+
+      inline-size: auto !important;
       padding-block: var(--table-stacked-collection-cell-padding-y);
 
       padding-inline: var(--table-stacked-collection-cell-padding-x);
@@ -1104,19 +1109,24 @@
       display: block;
 
       height: auto;
-      border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+      border: 0;
+      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
-        var(--table-stacked-collection-card-padding-x);
+        var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
       margin-block-end: var(--table-stacked-collection-card-gap);
     }
 
     [data-collapse-below="md"] .ui-table-row:last-child {
       margin-block-end: 0;
+      border-block-end-width: 0;
     }
 
     [data-collapse-below="md"] [data-slot="table-cell"] {
       display: block;
+
+      inline-size: auto !important;
       padding-block: var(--table-stacked-collection-cell-padding-y);
       padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;
@@ -1156,19 +1166,24 @@
       display: block;
 
       height: auto;
-      border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+      border: 0;
+      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
-        var(--table-stacked-collection-card-padding-x);
+        var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
       margin-block-end: var(--table-stacked-collection-card-gap);
     }
 
     [data-collapse-below="lg"] .ui-table-row:last-child {
       margin-block-end: 0;
+      border-block-end-width: 0;
     }
 
     [data-collapse-below="lg"] [data-slot="table-cell"] {
       display: block;
+
+      inline-size: auto !important;
       padding-block: var(--table-stacked-collection-cell-padding-y);
       padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;
@@ -1208,19 +1223,24 @@
       display: block;
 
       height: auto;
-      border: var(--stroke-hairline) solid hsl(var(--border));
-      border-radius: var(--radius-md, calc(var(--radius) / var(--radius-ratio)));
+
+      border: 0;
+      border-block-end: var(--stroke-hairline) solid hsl(var(--border));
+      border-radius: 0;
       padding: var(--table-stacked-collection-card-padding-y)
-        var(--table-stacked-collection-card-padding-x);
+        var(--table-stacked-collection-card-padding-x, var(--card-space-inset));
       margin-block-end: var(--table-stacked-collection-card-gap);
     }
 
     [data-collapse-below="xl"] .ui-table-row:last-child {
       margin-block-end: 0;
+      border-block-end-width: 0;
     }
 
     [data-collapse-below="xl"] [data-slot="table-cell"] {
       display: block;
+
+      inline-size: auto !important;
       padding-block: var(--table-stacked-collection-cell-padding-y);
       padding-inline: var(--table-stacked-collection-cell-padding-x);
       white-space: normal;