@jirawatpyk/aura-react 5.26.0 → 5.27.0

package/README.md

@@ -186,6 +186,12 @@ DataTable with sort and page in the URL (4.17): `onStateChange={({ sort, page })
 - **Time zone**: `timeZone` on AuraProvider, DatePicker, DateRangePicker and Calendar decides "today" (the marker, `min`/`max="today"`, the first month shown); or pass `today` as an ISO date. `todayIn('Asia/Bangkok')` is exported from the root and `/server`.
 - **Toasts** queue past three instead of dropping: six in a row all show, in order, three at a time.
 
+## 5.27 — Chamber-OS addenda 33–34
+
+- **`bleed` reaches through your own wrappers** (item 130): a bleeding DataTable or Table now spans the Card from anywhere in its content — inside a `flex flex-col gap-4` column, a container-query `div`, a `role="tabpanel"` — as long as those wrappers add no padding or frame and don't clip or scroll (`overflow` other than `visible`): a padded wrapper leaves the table short of the card's edge by that padding, and a clipping or scrolling one cuts it off or adds scrollbars. A nested Card resets the reach to its own padding. The last-content rule is unchanged: only a table that is the Card content's direct, last child drops its bottom rule automatically; inside wrappers pass **`bleedEnd`** when nothing follows the table in the card (and the Card has no `footer`), and the card's radius closes it. Without `bleedEnd`, a pager or link after the table keeps the rule; don't pass `bleedEnd` then, or what follows is pulled up over the table. Still nothing below `flushBelow` or outside a Card.
+- **`Container` from `/server`** (item 131): it is stateless, so `@jirawatpyk/aura-react/server` exports it next to Card and EmptyState, and a Server Component can render the page column without becoming a client reference. Same HTML as the root export.
+- **The override guarantee covers padding** (item 131): with `styles.layer.css`, utilities that set a Container's `padding` (e.g. your own gutter, `px-[var(--page-padding-x)]`) win as well as `max-width` and `margin`, also directly inside a padded AppShell where AURA zeroes the side padding. `check:tailwind4` tests it at 700px, between AURA's 640 and 1024px steps.
+
 ## 5.26 — Chamber-OS addenda 28–32
 
 One release: everything below shipped together in 5.26.0.
@@ -202,7 +208,7 @@ One release: everything below shipped together in 5.26.0.
 
 ### `bleed` (addendum 30)
 
-- **`bleed` on DataTable and Table** (item 127): edge to edge inside a Card — a list card with its filters in the card's padding and the table across its full inner width (Polaris IndexTable, GitHub issues). As a direct child of the Card's content the table loses its side borders and radius and is pulled out by the card's padding; its header band and top rule stay, and cell text stays level with the card's content (DataTable's 24px gutter, Table's 24px outer cells). When it is the card's last content (no Card `footer`, nothing after it) the bottom rule goes too and the card's radius closes it; a pager or footer after it keeps the rule. Below the Card's `flushBelow` width, and outside a Card, it does nothing; stacked rows inside a framed Card keep its padding. Wrap nothing between the Card and the table, or it won't bleed. The reach is the Card's padding token: change a Card's padding with `--aura-card-padding` (with a unit, `0px`), not a padding utility, or the table overshoots or falls short; `flushBelow` with `max-sm:p-0` is fine. On phones (<640px) a Card without `flushBelow` has 16px padding while DataTable's gutter stays 24px, so its text sits 8px in from the card's content there; Table's outer cells stay 24px too.
+- **`bleed` on DataTable and Table** (item 127): edge to edge inside a Card — a list card with its filters in the card's padding and the table across its full inner width (Polaris IndexTable, GitHub issues). As a direct child of the Card's content the table loses its side borders and radius and is pulled out by the card's padding; its header band and top rule stay, and cell text stays level with the card's content (DataTable's 24px gutter, Table's 24px outer cells). When it is the card's last content (no Card `footer`, nothing after it) the bottom rule goes too and the card's radius closes it; a pager or footer after it keeps the rule. Below the Card's `flushBelow` width, and outside a Card, it does nothing; stacked rows inside a framed Card keep its padding. In 5.26 it needed to be the Card content's direct child; since 5.27 it also reaches through unpadded wrappers. The reach is the Card's padding token: change a Card's padding with `--aura-card-padding` (with a unit, `0px`), not a padding utility, or the table overshoots or falls short; `flushBelow` with `max-sm:p-0` is fine. On phones (<640px) a Card without `flushBelow` has 16px padding while DataTable's gutter stays 24px, so its text sits 8px in from the card's content there; Table's outer cells stay 24px too.
 - **DataTable `bordered={false}`**: drops the frame (border and radius) and keeps the header band and the 24px gutter, for a table in a section that doesn't bleed. Table's `bordered={false}` is unchanged.
 - Budgets raised on purpose: the whole library and the `window.Aura` bundle 62 → 64 kB.
 
@@ -212,7 +218,7 @@ One release: everything below shipped together in 5.26.0.
 
 ### Container (addendum 29)
 
-- **Overriding a Container's width and margin is supported** (item 126): with `styles.layer.css`, utilities that set `max-width` or `margin` on a `Container` (`max-w-[672px]`, `mx-0`, `ms-0`) win over `.aura-container`, and that is now a guarantee rather than a side effect. AURA keeps every `.aura-container` rule in `@layer aura`, never uses `!important` on it and never adds an unlayered rule for it; `npm run check:tailwind4` fails if a 672px column, centred or at the start edge, stops working at a 1400px page. With the unlayered `styles.css` the component wins instead (as for every component), so use `size` / `align` or the layered stylesheet. The side padding (16 / 24 / 32px at <640 / ≥640 / ≥1024) and its removal directly inside a padded `AppShell` are unchanged.
+- **Overriding a Container's width and margin is supported** (item 126; padding too since 5.27): with `styles.layer.css`, utilities that set `max-width` or `margin` on a `Container` (`max-w-[672px]`, `mx-0`, `ms-0`) win over `.aura-container`, and that is now a guarantee rather than a side effect. AURA keeps every `.aura-container` rule in `@layer aura`, never uses `!important` on it and never adds an unlayered rule for it; `npm run check:tailwind4` fails if a 672px column, centred or at the start edge, stops working at a 1400px page. With the unlayered `styles.css` the component wins instead (as for every component), so use `size` / `align` or the layered stylesheet. The side padding (16 / 24 / 32px at <640 / ≥640 / ≥1024) and its removal directly inside a padded `AppShell` are unchanged.
 - **`align="start"`**: the column sits at the start edge (left; right in right-to-left) instead of being centred — a form board beside the page's start. Default `center`.
 - **Attributes reach the element**: `id`, `lang`, `dir`, `aria-*` and `data-*` (e.g. `data-slot="layout-container" data-variant="form"`), so an app's layout checks can read a Container. Other props are still not passed.
 - Budget raised on purpose: styles.css 27 → 28 kB.

package/dist/aura.bundle.js

@@ -6507,6 +6507,7 @@ window.Aura = (() => {
           /* 5.26 (Chamber-OS 127): bleed and bordered={false}; the outermost element carries aura-bleed. */
           props.bleed && "aura-bleed-frame",
           props.bleed && !levels.length && "aura-bleed",
+          props.bleed && props.bleedEnd && !levels.length && "aura-bleed-end",
           props.bordered === false && "aura-table--borderless",
           stacked && "aura-table--stacked",
           noCardSel && "aura-table--cards-nosel",
@@ -6605,7 +6606,19 @@ window.Aura = (() => {
         out
       );
     }
-    return /* @__PURE__ */ React32.createElement("div", { ref, className: cx("aura-table-box", props.bleed && "aura-bleed", props.className) }, out);
+    return /* @__PURE__ */ React32.createElement(
+      "div",
+      {
+        ref,
+        className: cx(
+          "aura-table-box",
+          props.bleed && "aura-bleed",
+          props.bleed && props.bleedEnd && "aura-bleed-end",
+          props.className
+        )
+      },
+      out
+    );
   });
   var DataTable2 = DataTableImpl;
 
@@ -7477,6 +7490,7 @@ window.Aura = (() => {
       align,
       bordered,
       bleed,
+      bleedEnd,
       stickyHeader,
       maxHeight,
       stackStyle,
@@ -7530,6 +7544,7 @@ window.Aura = (() => {
           /* 5.26 (Chamber-OS 127): the frame that bleeds; the outermost element carries aura-bleed. */
           bleed && "aura-bleed-frame",
           bleed && !cards && "aura-bleed",
+          bleed && bleedEnd && !cards && "aura-bleed-end",
           /* 5.26 (Chamber-OS 129): stickyHeader pins to the page, or inside the box when it has a maxHeight. */
           stickyHeader && (maxHeight != null ? "is-sticky-box" : "is-sticky-page"),
           maxHeight != null && "has-max",
@@ -7562,7 +7577,17 @@ window.Aura = (() => {
         labels ? /* @__PURE__ */ React45.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React45.createElement(StackLabels.Provider, { value: null }, children) : children
       )
     );
-    return cards ? /* @__PURE__ */ React45.createElement("div", { className: cx("aura-tbl-cards aura-tbl-cards--" + stackBelow, bleed && "aura-bleed") }, table) : table;
+    return cards ? /* @__PURE__ */ React45.createElement(
+      "div",
+      {
+        className: cx(
+          "aura-tbl-cards aura-tbl-cards--" + stackBelow,
+          bleed && "aura-bleed",
+          bleed && bleedEnd && "aura-bleed-end"
+        )
+      },
+      table
+    ) : table;
   });
   function section(tag, cls) {
     const C = React45.forwardRef(function TableSection(props, ref) {

package/dist/cjs/index.cjs

@@ -6489,6 +6489,7 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
         /* 5.26 (Chamber-OS 127): bleed and bordered={false}; the outermost element carries aura-bleed. */
         props.bleed && "aura-bleed-frame",
         props.bleed && !levels.length && "aura-bleed",
+        props.bleed && props.bleedEnd && !levels.length && "aura-bleed-end",
         props.bordered === false && "aura-table--borderless",
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
@@ -6587,7 +6588,19 @@ var DataTableImpl = React32.forwardRef(function DataTable(props, ref) {
       out
     );
   }
-  return /* @__PURE__ */ React32.createElement("div", { ref, className: cx("aura-table-box", props.bleed && "aura-bleed", props.className) }, out);
+  return /* @__PURE__ */ React32.createElement(
+    "div",
+    {
+      ref,
+      className: cx(
+        "aura-table-box",
+        props.bleed && "aura-bleed",
+        props.bleed && props.bleedEnd && "aura-bleed-end",
+        props.className
+      )
+    },
+    out
+  );
 });
 var DataTable2 = DataTableImpl;
 
@@ -7459,6 +7472,7 @@ var Table = React45.forwardRef(function Table2(props, ref) {
     align,
     bordered,
     bleed,
+    bleedEnd,
     stickyHeader,
     maxHeight,
     stackStyle,
@@ -7512,6 +7526,7 @@ var Table = React45.forwardRef(function Table2(props, ref) {
         /* 5.26 (Chamber-OS 127): the frame that bleeds; the outermost element carries aura-bleed. */
         bleed && "aura-bleed-frame",
         bleed && !cards && "aura-bleed",
+        bleed && bleedEnd && !cards && "aura-bleed-end",
         /* 5.26 (Chamber-OS 129): stickyHeader pins to the page, or inside the box when it has a maxHeight. */
         stickyHeader && (maxHeight != null ? "is-sticky-box" : "is-sticky-page"),
         maxHeight != null && "has-max",
@@ -7544,7 +7559,17 @@ var Table = React45.forwardRef(function Table2(props, ref) {
       labels ? /* @__PURE__ */ React45.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React45.createElement(StackLabels.Provider, { value: null }, children) : children
     )
   );
-  return cards ? /* @__PURE__ */ React45.createElement("div", { className: cx("aura-tbl-cards aura-tbl-cards--" + stackBelow, bleed && "aura-bleed") }, table) : table;
+  return cards ? /* @__PURE__ */ React45.createElement(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + stackBelow,
+        bleed && "aura-bleed",
+        bleed && bleedEnd && "aura-bleed-end"
+      )
+    },
+    table
+  ) : table;
 });
 function section(tag, cls) {
   const C = React45.forwardRef(function TableSection(props, ref) {

package/dist/esm/Container.js

@@ -1,6 +1,6 @@
 'use client';
 import * as React from "react";
-import { cx } from "./internal.js";
+import { cx } from "./classes.js";
 const h = React.createElement;
 const Container = React.forwardRef(function Container2(props, ref) {
   const attrs = {};

package/dist/esm/DataTable.js

@@ -1321,6 +1321,7 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
         /* 5.26 (Chamber-OS 127): bleed and bordered={false}; the outermost element carries aura-bleed. */
         props.bleed && "aura-bleed-frame",
         props.bleed && !levels.length && "aura-bleed",
+        props.bleed && props.bleedEnd && !levels.length && "aura-bleed-end",
         props.bordered === false && "aura-table--borderless",
         stacked && "aura-table--stacked",
         noCardSel && "aura-table--cards-nosel",
@@ -1419,7 +1420,19 @@ const DataTableImpl = React.forwardRef(function DataTable(props, ref) {
       out
     );
   }
-  return /* @__PURE__ */ React.createElement("div", { ref, className: cx("aura-table-box", props.bleed && "aura-bleed", props.className) }, out);
+  return /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      ref,
+      className: cx(
+        "aura-table-box",
+        props.bleed && "aura-bleed",
+        props.bleed && props.bleedEnd && "aura-bleed-end",
+        props.className
+      )
+    },
+    out
+  );
 });
 const DataTable2 = DataTableImpl;
 export {

package/dist/esm/Table.js

@@ -56,6 +56,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
     align,
     bordered,
     bleed,
+    bleedEnd,
     stickyHeader,
     maxHeight,
     stackStyle,
@@ -109,6 +110,7 @@ const Table = React.forwardRef(function Table2(props, ref) {
         /* 5.26 (Chamber-OS 127): the frame that bleeds; the outermost element carries aura-bleed. */
         bleed && "aura-bleed-frame",
         bleed && !cards && "aura-bleed",
+        bleed && bleedEnd && !cards && "aura-bleed-end",
         /* 5.26 (Chamber-OS 129): stickyHeader pins to the page, or inside the box when it has a maxHeight. */
         stickyHeader && (maxHeight != null ? "is-sticky-box" : "is-sticky-page"),
         maxHeight != null && "has-max",
@@ -141,7 +143,17 @@ const Table = React.forwardRef(function Table2(props, ref) {
       labels ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: labels }, children) : outer ? /* @__PURE__ */ React.createElement(StackLabels.Provider, { value: null }, children) : children
     )
   );
-  return cards ? /* @__PURE__ */ React.createElement("div", { className: cx("aura-tbl-cards aura-tbl-cards--" + stackBelow, bleed && "aura-bleed") }, table) : table;
+  return cards ? /* @__PURE__ */ React.createElement(
+    "div",
+    {
+      className: cx(
+        "aura-tbl-cards aura-tbl-cards--" + stackBelow,
+        bleed && "aura-bleed",
+        bleed && bleedEnd && "aura-bleed-end"
+      )
+    },
+    table
+  ) : table;
 });
 function section(tag, cls) {
   const C = React.forwardRef(function TableSection(props, ref) {

package/dist/index.d.cts

@@ -236,11 +236,15 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	density?: "comfortable" | "compact" | undefined;
 	/** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. With `height` (virtual rows) the server can only send the first screenful; the rest of the cards arrive on hydration. */
 	stackBelow?: number | undefined;
-	/** Edge to edge inside a Card (5.26, Chamber-OS 127): as a direct child of a Card's content, the table spans the
-	 * card's full inner width — no side borders, no radius — keeping its header band and top rule; as the card's last
-	 * content (no footer, nothing after it) it drops its bottom rule and the card's radius closes it. Below the Card's
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule. As a direct child that is the card's last content (no footer,
+	 * nothing after it), or with `bleedEnd`, it drops its bottom rule and the card's radius closes it. Below the Card's
 	 * `flushBelow` width, and outside a Card, it does nothing. */
 	bleed?: boolean | undefined;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — no bottom rule, the card's radius
+	 * closes it. Only when nothing follows it in the card and the Card has no `footer` (5.27). */
+	bleedEnd?: boolean | undefined;
 	/** `false` drops the frame — border and radius — keeping the header band and the 24px gutter, for a table that sits
 	 * in a section without bleeding (5.26). Default `true`. */
 	bordered?: boolean | undefined;
@@ -1195,12 +1199,16 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
 	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
 	bordered?: boolean | undefined;
-	/** Edge to edge inside a Card (5.26, Chamber-OS 127): as a direct child of a Card's content, the table spans the
-	 * card's full inner width — no side borders, no radius — keeping its header band and top rule, and its outer
-	 * cells' 24px padding keeps the text level with the card's content. As the card's last content it drops its
-	 * bottom rule and the card's radius closes it. Below the Card's `flushBelow` width, and outside a Card, it does
-	 * nothing. With `bordered={false}` too, the outer cells take the card's padding while it bleeds. */
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule, and its 24px outer cells keep the text level with the card's
+	 * content. As a direct child that is the card's last content, or with `bleedEnd`, it drops its bottom rule and the
+	 * card's radius closes it. Below the Card's `flushBelow` width, and outside a Card, it does nothing. With
+	 * `bordered={false}` too, the outer cells take the card's padding while it bleeds. */
 	bleed?: boolean | undefined;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — only when nothing follows it in
+	 * the card and the Card has no `footer` (5.27). */
+	bleedEnd?: boolean | undefined;
 	/** Keep the header row in view while the rows scroll (5.26, Chamber-OS 129), with its band, its bottom rule and
 	 * above the body. Without `maxHeight` it pins to the page's scroll, under an AppShell's top bar
 	 * (`--aura-shell-bar-height`; set `--aura-table-sticky-top` for another offset). A table wider than its box
@@ -1720,8 +1728,9 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
 	align?: "center" | "start" | undefined;
 	as?: keyof React$1.JSX.IntrinsicElements | undefined;
-	/** Utilities that set `max-width` or `margin` (e.g. `max-w-[672px] mx-0`) are supported with `styles.layer.css`,
-	 * where a utility beats `.aura-container` (5.26). */
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
 	className?: string | undefined;
 	style?: React$1.CSSProperties | undefined;
 	children?: React$1.ReactNode | undefined;

package/dist/index.d.ts

@@ -236,11 +236,15 @@ export interface DataTableProps<Row extends Record<string, any> = Record<string,
 	density?: "comfortable" | "compact" | undefined;
 	/** Table width in px below which rows render as stacked cards (phones). Try 640. It follows the table's own width, not the window. Since 4.20 the cards are the same markup as the grid, laid out by a container query, so any width is right before hydration and each row is in the HTML once. With `height` (virtual rows) the server can only send the first screenful; the rest of the cards arrive on hydration. */
 	stackBelow?: number | undefined;
-	/** Edge to edge inside a Card (5.26, Chamber-OS 127): as a direct child of a Card's content, the table spans the
-	 * card's full inner width — no side borders, no radius — keeping its header band and top rule; as the card's last
-	 * content (no footer, nothing after it) it drops its bottom rule and the card's radius closes it. Below the Card's
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule. As a direct child that is the card's last content (no footer,
+	 * nothing after it), or with `bleedEnd`, it drops its bottom rule and the card's radius closes it. Below the Card's
 	 * `flushBelow` width, and outside a Card, it does nothing. */
 	bleed?: boolean | undefined;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — no bottom rule, the card's radius
+	 * closes it. Only when nothing follows it in the card and the Card has no `footer` (5.27). */
+	bleedEnd?: boolean | undefined;
 	/** `false` drops the frame — border and radius — keeping the header band and the 24px gutter, for a table that sits
 	 * in a section without bleeding (5.26). Default `true`. */
 	bordered?: boolean | undefined;
@@ -1195,12 +1199,16 @@ export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableEl
 	/** `false` (5.13) drops the frame — border, radius, background — and the outer cells' side padding, so the table
 	 * lines up with the content around it, e.g. flush inside a Card under its heading. Default `true`. */
 	bordered?: boolean | undefined;
-	/** Edge to edge inside a Card (5.26, Chamber-OS 127): as a direct child of a Card's content, the table spans the
-	 * card's full inner width — no side borders, no radius — keeping its header band and top rule, and its outer
-	 * cells' 24px padding keeps the text level with the card's content. As the card's last content it drops its
-	 * bottom rule and the card's radius closes it. Below the Card's `flushBelow` width, and outside a Card, it does
-	 * nothing. With `bordered={false}` too, the outer cells take the card's padding while it bleeds. */
+	/** Edge to edge inside a Card (5.26, Chamber-OS 127): anywhere in a Card's content — also inside your own wrappers,
+	 * as long as they add no padding or frame and don't clip or scroll (5.27, 130) — the table spans the card's full inner width, no side borders
+	 * or radius, keeping its header band and top rule, and its 24px outer cells keep the text level with the card's
+	 * content. As a direct child that is the card's last content, or with `bleedEnd`, it drops its bottom rule and the
+	 * card's radius closes it. Below the Card's `flushBelow` width, and outside a Card, it does nothing. With
+	 * `bordered={false}` too, the outer cells take the card's padding while it bleeds. */
 	bleed?: boolean | undefined;
+	/** With `bleed`: the table ends the card even though it sits inside your wrappers — only when nothing follows it in
+	 * the card and the Card has no `footer` (5.27). */
+	bleedEnd?: boolean | undefined;
 	/** Keep the header row in view while the rows scroll (5.26, Chamber-OS 129), with its band, its bottom rule and
 	 * above the body. Without `maxHeight` it pins to the page's scroll, under an AppShell's top bar
 	 * (`--aura-shell-bar-height`; set `--aura-table-sticky-top` for another offset). A table wider than its box
@@ -1720,8 +1728,9 @@ export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>
 	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
 	align?: "center" | "start" | undefined;
 	as?: keyof React$1.JSX.IntrinsicElements | undefined;
-	/** Utilities that set `max-width` or `margin` (e.g. `max-w-[672px] mx-0`) are supported with `styles.layer.css`,
-	 * where a utility beats `.aura-container` (5.26). */
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
 	className?: string | undefined;
 	style?: React$1.CSSProperties | undefined;
 	children?: React$1.ReactNode | undefined;

package/dist/server/index.cjs

@@ -34,6 +34,7 @@ __export(server_exports, {
   Avatar: () => ServerAvatar,
   Badge: () => ServerBadge,
   Card: () => ServerCard,
+  Container: () => Container,
   EmptyState: () => ServerEmptyState,
   Icon: () => Icon,
   STRINGS: () => STRINGS,
@@ -605,14 +606,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h3 = String(hex).trim().replace("#", "");
-  if (h3.length === 3)
-    h3 = h3.split("").map(function(c) {
+  let h4 = String(hex).trim().replace("#", "");
+  if (h4.length === 3)
+    h4 = h4.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h3)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h3.slice(i, i + 2), 16) / 255;
+    return parseInt(h4.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1318,3 +1319,28 @@ function ServerStat(props) {
 function ServerAvatar(props) {
   return avatarElement(props, void 0, null, void 0);
 }
+
+// src/Container.tsx
+var React4 = __toESM(require("react"), 1);
+var h3 = React4.createElement;
+var Container = React4.forwardRef(function Container2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  return h3(
+    props.as || "div",
+    Object.assign(attrs, {
+      ref,
+      className: cx(
+        "aura-container",
+        props.size === "narrow" && "is-narrow",
+        props.align === "start" && "is-start",
+        props.className
+      ),
+      style: props.style
+    }),
+    props.children
+  );
+});

package/dist/server/index.d.cts

@@ -386,6 +386,24 @@ declare function ServerAvatar(props: AvatarProps): React$1.ReactElement;
  * render names with `/server`'s Icon (the two entries keep separate registries). */
 export declare function registerIcons(icons: readonly AuraIcon[]): void;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
+/** Centred page column. To name it (`aria-label`), render a landmark with `as="section"` (or `main`, `nav`): a
+ * plain `div` may not carry a name. */
+export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
+	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
+	size?: "default" | "narrow" | undefined;
+	/** `start` puts the column at the start edge (left; right in RTL) instead of centring it — a form board beside
+	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
+	align?: "center" | "start" | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+	children?: React$1.ReactNode | undefined;
+}
+/** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
+export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.d.ts

@@ -386,6 +386,24 @@ declare function ServerAvatar(props: AvatarProps): React$1.ReactElement;
  * render names with `/server`'s Icon (the two entries keep separate registries). */
 export declare function registerIcons(icons: readonly AuraIcon[]): void;
 export declare const Icon: React$1.ForwardRefExoticComponent<IconProps & React$1.RefAttributes<SVGSVGElement>>;
+/** Centred page column. To name it (`aria-label`), render a landmark with `as="section"` (or `main`, `nav`): a
+ * plain `div` may not carry a name. */
+export interface ContainerProps extends Pick<React$1.HTMLAttributes<HTMLElement>, "id" | "lang" | "dir">, React$1.AriaAttributes, DataAttributes {
+	/** `narrow` caps it at aura-container-narrow (720px). Default `default` (1280px). */
+	size?: "default" | "narrow" | undefined;
+	/** `start` puts the column at the start edge (left; right in RTL) instead of centring it — a form board beside
+	 * the page's start (5.26, Chamber-OS 126). Default `center`. */
+	align?: "center" | "start" | undefined;
+	as?: keyof React$1.JSX.IntrinsicElements | undefined;
+	/** Utilities that set `max-width`, `margin` or `padding` (e.g. `max-w-[672px] mx-0`, your own gutter) are supported
+	 * with `styles.layer.css`, where a utility beats `.aura-container` (5.26; padding 5.27). Also exported from
+	 * `/server` for Server Components (5.27). */
+	className?: string | undefined;
+	style?: React$1.CSSProperties | undefined;
+	children?: React$1.ReactNode | undefined;
+}
+/** Container — centres content up to aura-container-max (1280px) with responsive side padding. */
+export declare const Container: React$1.ForwardRefExoticComponent<ContainerProps & React$1.RefAttributes<HTMLElement>>;
 
 export {
 	ServerAlert as Alert,

package/dist/server/index.js

@@ -546,14 +546,14 @@ var STRINGS = {
 
 // src/theme.ts
 function hexToRgb(hex) {
-  let h3 = String(hex).trim().replace("#", "");
-  if (h3.length === 3)
-    h3 = h3.split("").map(function(c) {
+  let h4 = String(hex).trim().replace("#", "");
+  if (h4.length === 3)
+    h4 = h4.split("").map(function(c) {
       return c + c;
     }).join("");
-  if (!/^[0-9a-f]{6}$/i.test(h3)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
+  if (!/^[0-9a-f]{6}$/i.test(h4)) throw new Error('createTheme: "' + hex + '" is not a #rgb or #rrggbb colour');
   return [0, 2, 4].map(function(i) {
-    return parseInt(h3.slice(i, i + 2), 16) / 255;
+    return parseInt(h4.slice(i, i + 2), 16) / 255;
   });
 }
 function rgbToHex(rgb) {
@@ -1259,11 +1259,37 @@ function ServerStat(props) {
 function ServerAvatar(props) {
   return avatarElement(props, void 0, null, void 0);
 }
+
+// src/Container.tsx
+import * as React4 from "react";
+var h3 = React4.createElement;
+var Container = React4.forwardRef(function Container2(props, ref) {
+  const attrs = {};
+  Object.keys(props).forEach(function(k) {
+    if (k === "id" || k === "lang" || k === "dir" || /^(aria|data)-/.test(k))
+      attrs[k] = props[k];
+  });
+  return h3(
+    props.as || "div",
+    Object.assign(attrs, {
+      ref,
+      className: cx(
+        "aura-container",
+        props.size === "narrow" && "is-narrow",
+        props.align === "start" && "is-start",
+        props.className
+      ),
+      style: props.style
+    }),
+    props.children
+  );
+});
 export {
   ServerAlert as Alert,
   ServerAvatar as Avatar,
   ServerBadge as Badge,
   ServerCard as Card,
+  Container,
   ServerEmptyState as EmptyState,
   Icon,
   STRINGS,

package/dist/styles.css

@@ -662,21 +662,22 @@ a.aura-icon-btn { text-decoration: none; }
 @media (max-width: 639.98px) { .aura-card.aura-card--flush-below-sm, .aura-card.aura-card--flush-below-sm:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
 @media (max-width: 767.98px) { .aura-card.aura-card--flush-below-md, .aura-card.aura-card--flush-below-md:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
 @media (max-width: 1023.98px) { .aura-card.aura-card--flush-below-lg, .aura-card.aura-card--flush-below-lg:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
-/* 5.26 (Chamber-OS 127): bleed — a table that is a direct child of a Card's content spans its inner width; the side
+/* 5.26 (Chamber-OS 127): bleed — a table anywhere in a Card's content (5.27, 130: through the app's own unpadded
+ * wrappers; a nested Card resets the reach) spans its inner width; the side
  * borders and radius go (a 0px bleed — a flush card — keeps them: 1px - min(1px, 0) = 1px). As the card's last content
  * it also drops its bottom rule and the card's radius closes it. */
 /* Two classes deep so it beats a stackable Table's width: 100%. `* 1000` turns any bleed into a 0 radius; 0 keeps it. */
-.aura-card .aura-card__body > .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
+.aura-card .aura-card__body .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
 /* A Table with bordered={false} too: its outer cells take the bleed (0 where the card is flush, as before). */
-.aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
-.aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
-.aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
-.aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
-.aura-card__body > .aura-bleed.aura-bleed-frame, .aura-card__body > .aura-bleed .aura-bleed-frame {
+.aura-card__body .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
+.aura-card__body .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
+.aura-card__body .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
+.aura-card__body .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
+.aura-card__body .aura-bleed.aura-bleed-frame, .aura-card__body .aura-bleed .aura-bleed-frame {
   border-inline-width: calc(1px - min(1px, var(--aura-card-bleed))); border-radius: max(0px, var(--aura-card-radius) - var(--aura-card-bleed) * 1000);
 }
-.aura-card__body:last-child > .aura-bleed:last-child { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
-.aura-card__body:last-child > .aura-bleed:last-child.aura-bleed-frame, .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame {
+:is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
+:is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end).aura-bleed-frame, :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame {
   border-bottom-width: calc(1px - min(1px, var(--aura-card-bleed)));
   border-bottom-left-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
   border-bottom-right-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
@@ -1788,7 +1789,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
   }
   /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
@@ -1812,7 +1813,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
   }
   /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
 }
 
 /* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
@@ -1820,8 +1821,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl-cards { container: aura-tbl / inline-size; width: 100%; }
 @container aura-tbl (width < 768px) {
   .aura-tbl-cards--md > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row {
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1833,8 +1834,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row {
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1865,8 +1866,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-stack (width < 9999.5px) {
   .aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
   /* 5.26: stacked cards inside a framed Card keep its padding (0 where the Card is flush). */
-  .aura-card__body > .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
   .aura-table__scroll { overflow: visible; height: auto; }
   .aura-table__busy-bar { top: 0; }
   .aura-table__picker { display: none; }

package/dist/styles.layer.css

@@ -664,21 +664,22 @@ a.aura-icon-btn { text-decoration: none; }
 @media (max-width: 639.98px) { .aura-card.aura-card--flush-below-sm, .aura-card.aura-card--flush-below-sm:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
 @media (max-width: 767.98px) { .aura-card.aura-card--flush-below-md, .aura-card.aura-card--flush-below-md:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
 @media (max-width: 1023.98px) { .aura-card.aura-card--flush-below-lg, .aura-card.aura-card--flush-below-lg:hover { border-color: transparent; background: transparent; box-shadow: none; --aura-card-bleed: 0px; } }
-/* 5.26 (Chamber-OS 127): bleed — a table that is a direct child of a Card's content spans its inner width; the side
+/* 5.26 (Chamber-OS 127): bleed — a table anywhere in a Card's content (5.27, 130: through the app's own unpadded
+ * wrappers; a nested Card resets the reach) spans its inner width; the side
  * borders and radius go (a 0px bleed — a flush card — keeps them: 1px - min(1px, 0) = 1px). As the card's last content
  * it also drops its bottom rule and the card's radius closes it. */
 /* Two classes deep so it beats a stackable Table's width: 100%. `* 1000` turns any bleed into a 0 radius; 0 keeps it. */
-.aura-card .aura-card__body > .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
+.aura-card .aura-card__body .aura-bleed { margin-inline: calc(-1 * var(--aura-card-bleed)); width: auto; }
 /* A Table with bordered={false} too: its outer cells take the bleed (0 where the card is flush, as before). */
-.aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
-.aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
-.aura-card__body > .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
-.aura-card__body > .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
-.aura-card__body > .aura-bleed.aura-bleed-frame, .aura-card__body > .aura-bleed .aura-bleed-frame {
+.aura-card__body .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child,
+.aura-card__body .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :first-child { padding-inline-start: var(--aura-card-bleed); }
+.aura-card__body .aura-bleed .aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child,
+.aura-card__body .aura-bleed.aura-tbl-wrap.is-flush > .aura-tbl > * > .aura-tbl__row > :last-child { padding-inline-end: var(--aura-card-bleed); }
+.aura-card__body .aura-bleed.aura-bleed-frame, .aura-card__body .aura-bleed .aura-bleed-frame {
   border-inline-width: calc(1px - min(1px, var(--aura-card-bleed))); border-radius: max(0px, var(--aura-card-radius) - var(--aura-card-bleed) * 1000);
 }
-.aura-card__body:last-child > .aura-bleed:last-child { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
-.aura-card__body:last-child > .aura-bleed:last-child.aura-bleed-frame, .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame {
+:is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) { margin-bottom: calc(-1 * var(--aura-card-bleed)); }
+:is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end).aura-bleed-frame, :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame {
   border-bottom-width: calc(1px - min(1px, var(--aura-card-bleed)));
   border-bottom-left-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
   border-bottom-right-radius: calc(var(--aura-card-radius) - min(1px, var(--aura-card-bleed)));
@@ -1790,7 +1791,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
   }
   /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-md:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl--stack-sm, .aura-tbl--stack-sm > .aura-tbl__body, .aura-tbl--stack-sm > .aura-tbl__foot, .aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__th, .aura-tbl--stack-sm > * > .aura-tbl__row > .aura-tbl__td { display: block; }
@@ -1814,7 +1815,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     display: block; margin-bottom: 2px; font-family: var(--font-mono); font-size: 11px; line-height: 16px; font-weight: 400; color: var(--aura-fg-secondary);
   }
   /* 5.26: a bleeding list keeps its rows' text level with the Card's content (16px where it doesn't bleed). */
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--stack-sm:not(.aura-tbl--cards) > * > .aura-tbl__row { padding-inline: max(var(--aura-card-bleed), var(--aura-space-4) - var(--aura-card-bleed) * 1000); }
 }
 
 /* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
@@ -1822,8 +1823,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl-cards { container: aura-tbl / inline-size; width: 100%; }
 @container aura-tbl (width < 768px) {
   .aura-tbl-cards--md > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-md { padding-bottom: var(--aura-card-bleed); }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-md > .aura-tbl__foot > .aura-tbl__row {
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1835,8 +1836,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 }
 @container aura-tbl (width < 640px) {
   .aura-tbl-cards--sm > .aura-tbl-wrap { border: 0; border-radius: 0; background: transparent; overflow: visible; }
-  .aura-card__body > .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body > .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed.aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm, .aura-card__body .aura-bleed > .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame > .aura-tbl--cards.aura-tbl--stack-sm { padding-bottom: var(--aura-card-bleed); }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__caption { padding: 0 0 var(--aura-space-3); }
   .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__body > .aura-tbl__row, .aura-tbl--cards.aura-tbl--stack-sm > .aura-tbl__foot > .aura-tbl__row {
     margin-bottom: var(--aura-space-2); padding: var(--aura-tbl-card-py, var(--aura-space-4)) var(--aura-space-4);
@@ -1867,8 +1868,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 @container aura-stack (width < 9999.5px) {
   .aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
   /* 5.26: stacked cards inside a framed Card keep its padding (0 where the Card is flush). */
-  .aura-card__body > .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
-  .aura-card__body:last-child > .aura-bleed:last-child .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
+  .aura-card__body .aura-bleed .aura-bleed-frame { padding-inline: var(--aura-card-bleed); }
+  :is(.aura-card__body:last-child > .aura-bleed:last-child, .aura-card__body:last-child .aura-bleed.aura-bleed-end) .aura-bleed-frame { padding-bottom: var(--aura-card-bleed); }
   .aura-table__scroll { overflow: visible; height: auto; }
   .aura-table__busy-bar { top: 0; }
   .aura-table__picker { display: none; }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@jirawatpyk/aura-react",
-  "version": "5.26.0",
+  "version": "5.27.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",