@jirawatpyk/aura-react 5.25.0 → 5.26.0

package/dist/index.d.ts

@@ -236,6 +236,14 @@ 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
+	 * `flushBelow` width, and outside a Card, it does nothing. */
+	bleed?: 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;
 	className?: string | undefined;
 }
 /** An AURA icon name, or any icon element (e.g. `<Building />` from lucide-react). AURA sizes it and hides it from screen readers. */
@@ -300,7 +308,9 @@ export interface CheckboxProps extends Omit<React$1.InputHTMLAttributes<HTMLInpu
 	hideLabel?: boolean | undefined;
 	/** The visible label beside the box. */
 	children?: React$1.ReactNode | undefined;
-	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). */
+	/** Second line under the visible label, linked by `aria-describedby` after any id you pass there (5.11). Since 5.26
+	 * it is not part of the name: the box is named by the visible label alone, or by your `aria-label` /
+	 * `aria-labelledby` (Chamber-OS 125). */
 	description?: React$1.ReactNode | undefined;
 	onChange?: ((checked: boolean) => void) | undefined;
 	disabled?: boolean | undefined;
@@ -468,6 +478,7 @@ export interface CommandItem {
 	/** Items with the same group are listed together under its heading, in first-seen order. */
 	group?: string | undefined;
 	icon?: IconInput | undefined;
+	/** A second line; read after the item's name (label and shortcut), not as part of it (5.26). */
 	description?: string | undefined;
 	/** Extra words that find it ("invoice" → Billing). */
 	keywords?: string[] | undefined;
@@ -542,6 +553,8 @@ export interface FilterSelectProps extends Omit<React$1.SelectHTMLAttributes<HTM
 	 * readers keep the option's own text. */
 	allLabel?: string | undefined;
 }
+/** A RadioGroup option. `description` is a second line under the label; since 5.26 the radio is named by `label`
+ * alone and the description is read after it (`aria-describedby`), also when the option is disabled (Chamber-OS 125). */
 export type ChoiceOption = string | {
 	value: string;
 	label: string;
@@ -841,7 +854,7 @@ export interface DropdownMenuProps {
 export interface ComboboxOption {
 	value: string;
 	label: string;
-	/** Second line in the list; also searched. */
+	/** Second line in the list; also searched. Read after the option's name, not as part of it (5.26). */
 	description?: string | undefined;
 	/** Extra search terms (English name, phone, code…). */
 	keywords?: string[] | undefined;
@@ -1035,6 +1048,39 @@ export interface DateRange {
 	start: ISODate | null;
 	end: ISODate | null;
 }
+/** A FilterDateRange preset: a name and the range it sets (5.26). */
+export interface DateRangePreset {
+	label: string;
+	range: DateRange;
+}
+/** A compact date-range filter for FilterBar (5.26, Chamber-OS 128): "Submitted Any time ▾", one click to the range
+ * calendar. Dates as DateRangePicker: `locale` / `calendar` from the provider (Thai shows Buddhist-era years), `min`,
+ * `max`, `timeZone`, `weekStartsOn`. */
+export interface FilterDateRangeProps extends DateDisplayOptions, Pick<React$1.HTMLAttributes<HTMLButtonElement>, "style">, React$1.AriaAttributes, DataAttributes {
+	/** The filter's name: first on the face ("Submitted"), the popover's name, and the start of the face's accessible
+	 * name ("Submitted: Any time"). */
+	label: string;
+	value?: DateRange | undefined;
+	defaultValue?: DateRange | undefined;
+	/** Runs once a range is complete, a preset is picked, or "Any time" clears it — never on a lone start day, and
+	 * not when the same range is picked again. There is no form field: write the range to the URL or state here. */
+	onChange?: ((value: DateRange) => void) | undefined;
+	/** Choices beside the calendar (Last 7 days, This month…), each setting a whole range; one that reaches past
+	 * `min` / `max` or onto an `isDateDisabled` day is shown disabled. */
+	presets?: DateRangePreset[] | undefined;
+	/** The empty value and the choice that clears it. Default "Any time" in the date locale. */
+	anyLabel?: string | undefined;
+	min?: ISODate | "today" | undefined;
+	max?: ISODate | "today" | undefined;
+	isDateDisabled?: ((iso: ISODate) => boolean) | undefined;
+	weekStartsOn?: 0 | 1 | undefined;
+	timeZone?: string | undefined;
+	/** Today, given outright (ISO); wins over `timeZone`. */
+	today?: ISODate | undefined;
+	disabled?: boolean | undefined;
+	id?: string | undefined;
+	className?: string | undefined;
+}
 export interface DateRangePickerProps extends DateFieldProps {
 	value?: DateRange | undefined;
 	defaultValue?: DateRange | undefined;
@@ -1149,6 +1195,22 @@ 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. */
+	bleed?: 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
+	 * scrolls sideways instead and its header can't pin to the page then: give it `maxHeight`. Inside your own scroll
+	 * container within an AppShell set `--aura-table-sticky-top: 0px` or use `maxHeight`. With `maxHeight` the box
+	 * scrolls both ways and the header pins to its top. One header row. Stacked rows (`stackBelow`) have no visible header, so it
+	 * does nothing there. Default off. */
+	stickyHeader?: boolean | undefined;
+	/** Caps the table's box (px, or any CSS length such as `60vh`); the rows scroll inside it. (5.26) */
+	maxHeight?: number | string | undefined;
 	/** How stacked rows look (5.15, Chamber-OS 85): `list` (default) — one frame, rows divided by rules; `cards` —
 	 * each row its own framed card, spaced like DataTable's cards, with no frame around them. From the `stackBelow`
 	 * width up the table is unchanged. The table then sits in one more `div` (`.aura-tbl-cards`). */
@@ -1421,6 +1483,7 @@ export interface PaginationProps {
 export interface AccordionItem {
 	id: string;
 	title: React$1.ReactNode;
+	/** A second line under the title; read as the header button's description, not its name (5.26). */
 	description?: React$1.ReactNode | undefined;
 	content: React$1.ReactNode;
 	icon?: IconInput | undefined;
@@ -1548,6 +1611,10 @@ export declare const Select: React$1.ForwardRefExoticComponent<SelectProps & Rea
 /** A compact filter for FilterBar (5.12): a small button reading "Status All ▾" that opens Select's list. The name
  * is the accessible name, the chosen option its value; forms, refs and the keyboard work as in Select. */
 export declare const FilterSelect: React$1.ForwardRefExoticComponent<FilterSelectProps & React$1.RefAttributes<HTMLSelectElement>>;
+/** A compact date-range filter for FilterBar (5.26, Chamber-OS 128): a face like FilterSelect's — "Submitted Any
+ * time ▾" — that opens the range calendar, with optional presets, in one click. `onChange` runs once a range is
+ * complete, a preset is picked or the range is cleared; never on a lone start day. */
+export declare const FilterDateRange: React$1.ForwardRefExoticComponent<FilterDateRangeProps & React$1.RefAttributes<HTMLButtonElement>>;
 export declare const RadioGroup: React$1.ForwardRefExoticComponent<RadioGroupProps & React$1.RefAttributes<HTMLFieldSetElement>>;
 export declare const Switch: React$1.ForwardRefExoticComponent<SwitchProps & React$1.RefAttributes<HTMLButtonElement>>;
 /** One value, or with `multiple` any number (chips). Two call signatures so value/onChange are typed for each. */
@@ -1644,11 +1711,17 @@ export declare const Avatar: React$1.ForwardRefExoticComponent<AvatarProps & Rea
 export declare const Stack: React$1.ForwardRefExoticComponent<StackProps & React$1.RefAttributes<HTMLElement>>;
 /** Grid — equal columns. columns may be responsive ({ base: 1, md: 2, lg: 3 }), or use minItemWidth to fit as many as fit. */
 export declare const Grid: React$1.ForwardRefExoticComponent<GridProps & React$1.RefAttributes<HTMLElement>>;
-/** Centred page column. */
-export interface ContainerProps {
+/** 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` or `margin` (e.g. `max-w-[672px] mx-0`) are supported with `styles.layer.css`,
+	 * where a utility beats `.aura-container` (5.26). */
 	className?: string | undefined;
 	style?: React$1.CSSProperties | undefined;
 	children?: React$1.ReactNode | undefined;

package/dist/styles.css

@@ -125,6 +125,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .aura-table__row-link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
 /* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
 .aura-table.is-refreshing .aura-table__row { opacity: 0.6; pointer-events: none; }
+.aura-table.aura-table--borderless { border: 0; border-radius: 0; } /* 5.26: bordered={false} */
 .aura-table__busy-bar {
   position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
   border-radius: var(--aura-radius-full); pointer-events: none;
@@ -653,13 +654,33 @@ a.aura-icon-btn { text-decoration: none; }
   padding: var(--aura-card-padding); background: var(--aura-bg-surface); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-card-radius); box-shadow: var(--aura-shadow-enterprise);
   font-family: var(--font-sans); font-size: 14px;
+  --aura-card-bleed: var(--aura-card-padding); /* 5.26: how far a bleeding table reaches out; 0 where the card is flush */
 }
 .aura-card.is-interactive { cursor: pointer; transition: border-color var(--aura-duration-fast) var(--aura-ease); }
 .aura-card.is-interactive:hover { border-color: var(--aura-border-control); }
 /* 5.15 (Chamber-OS 93): frameless below a width — the rows inside become cards of their own. */
-@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; } }
-@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; } }
-@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; } }
+@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
+ * 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; }
+/* 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 {
+  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 {
+  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)));
+}
 .aura-card--creative { border: 2px solid var(--aura-border-strong); box-shadow: var(--aura-card-shadow-creative); }
 .aura-card__head { display: flex; align-items: flex-start; gap: var(--aura-space-3); }
 .aura-card__heading { flex: 1; min-width: 0; }
@@ -960,6 +981,7 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-container { box-sizing: border-box; width: 100%; max-width: var(--aura-container-max); margin: 0 auto; padding: 0 var(--aura-space-4); }
 .aura-container.is-narrow { max-width: var(--aura-container-narrow); }
+.aura-container.is-start { margin-inline: 0; } /* 5.26 (Chamber-OS 126): align="start" */
 /* Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280 (aura-bp-* tokens; media queries can't read variables) */
 @media (min-width: 640px) {
   .aura-stack { flex-direction: var(--aura-stack-dir-sm, var(--aura-stack-dir-base, column)); align-items: var(--aura-stack-align-sm, stretch); gap: var(--aura-stack-gap-sm, var(--aura-stack-gap-base, var(--aura-space-4))); }
@@ -1412,7 +1434,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
   .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }
   .aura-toaster.is-top { top: calc(var(--aura-toaster-offset, var(--aura-space-4)) + env(safe-area-inset-top, 0px)); }
-  .aura-card { padding: var(--aura-space-4); }
+  .aura-card { padding: var(--aura-space-4); --aura-card-bleed: var(--aura-space-4); }
   .aura-stat { padding: var(--aura-space-4); }
   .aura-stat__value { font-size: 24px; }
   .aura-tabs__list { gap: var(--aura-space-4); }
@@ -1531,6 +1553,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
 .aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
 @media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
+/* 5.26 (Chamber-OS 128) FilterDateRange: presets beside the range calendar; above it on phones. */
+.aura-filterdate__pop { display: flex; gap: var(--aura-space-3); overflow-y: auto; }
+.aura-filterdate__presets { display: flex; flex-direction: column; gap: 2px; min-width: 8rem; padding-inline-end: var(--aura-space-3); border-inline-end: 1px solid var(--aura-border-subtle); }
+.aura-filterdate__preset { justify-content: flex-start; }
+.aura-filterdate__preset.is-selected { background: var(--aura-bg-selected); }
+@media (forced-colors: active) { .aura-filterdate__preset.is-selected { outline: 2px solid Highlight; outline-offset: -2px; } }
+@media (max-width: 639.98px) {
+  .aura-filterdate__pop { flex-direction: column; }
+  .aura-filterdate__presets { flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 0 0 var(--aura-space-2); border: 0; border-bottom: 1px solid var(--aura-border-subtle); }
+}
 
 /* Command palette: a search field over a grouped list, above everything else (it can open from a Dialog) */
 .aura-dialog-layer.aura-command-layer { z-index: var(--aura-z-menu); align-items: flex-start; padding: 12vh var(--aura-space-4) var(--aura-space-4); }
@@ -1698,6 +1730,22 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-end { text-align: right; }
 .aura-tbl .is-center { text-align: center; }
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* 5.26 (Chamber-OS 129) stickyHeader. To the page: the box must not be a scroll container, so it clips sideways
+ * instead (nothing overflows while it fits; JavaScript marks a table that doesn't, which scrolls as before). In a
+ * maxHeight box: the box scrolls both ways and the header pins to its top. The rule under the band moves with it. */
+.aura-tbl-wrap.is-sticky-page:not(.is-wide) { overflow-x: clip; }
+.aura-tbl-wrap.has-max, .aura-tbl-cards > .aura-tbl-wrap.has-max { overflow: auto; box-sizing: border-box; }
+.aura-tbl-wrap.is-sticky-page > .aura-tbl > .aura-tbl__head .aura-tbl__th, .aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th {
+  position: sticky; top: var(--aura-table-sticky-top, var(--aura-shell-bar-height, 0px)); z-index: 2;
+  border-bottom-width: 0; box-shadow: inset 0 -1px 0 var(--aura-border-default); /* one rule, at rest and pinned */
+}
+/* Forced colours drop the shadow; a pseudo-element line moves with the pinned cell (a collapsed border doesn't). */
+@media (forced-colors: active) {
+  .aura-tbl-wrap.is-sticky-page > .aura-tbl > .aura-tbl__head .aura-tbl__th::after, .aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th::after {
+    content: ''; position: absolute; inset: auto 0 0 0; border-bottom: 1px solid CanvasText;
+  }
+}
+.aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th { top: 0; }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
@@ -1739,6 +1787,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     content: attr(data-label); content: attr(data-label) / '';
     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); }
 }
 @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; }
@@ -1761,6 +1811,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     content: attr(data-label); content: attr(data-label) / '';
     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); }
 }
 
 /* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
@@ -1768,6 +1820,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-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);
@@ -1779,6 +1833,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-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);
@@ -1808,6 +1864,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * screen readers; the labels are generated content with empty alt text, so they aren't read twice. */
 @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-table__scroll { overflow: visible; height: auto; }
   .aura-table__busy-bar { top: 0; }
   .aura-table__picker { display: none; }

package/dist/styles.layer.css

@@ -127,6 +127,7 @@ button.aura-btn--creative[aria-disabled='true']:hover { box-shadow: var(--aura-s
 .aura-table__row-link:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; border-radius: var(--aura-radius-xs); }
 /* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
 .aura-table.is-refreshing .aura-table__row { opacity: 0.6; pointer-events: none; }
+.aura-table.aura-table--borderless { border: 0; border-radius: 0; } /* 5.26: bordered={false} */
 .aura-table__busy-bar {
   position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
   border-radius: var(--aura-radius-full); pointer-events: none;
@@ -655,13 +656,33 @@ a.aura-icon-btn { text-decoration: none; }
   padding: var(--aura-card-padding); background: var(--aura-bg-surface); color: var(--aura-fg-primary);
   border: 1px solid var(--aura-border-default); border-radius: var(--aura-card-radius); box-shadow: var(--aura-shadow-enterprise);
   font-family: var(--font-sans); font-size: 14px;
+  --aura-card-bleed: var(--aura-card-padding); /* 5.26: how far a bleeding table reaches out; 0 where the card is flush */
 }
 .aura-card.is-interactive { cursor: pointer; transition: border-color var(--aura-duration-fast) var(--aura-ease); }
 .aura-card.is-interactive:hover { border-color: var(--aura-border-control); }
 /* 5.15 (Chamber-OS 93): frameless below a width — the rows inside become cards of their own. */
-@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; } }
-@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; } }
-@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; } }
+@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
+ * 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; }
+/* 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 {
+  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 {
+  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)));
+}
 .aura-card--creative { border: 2px solid var(--aura-border-strong); box-shadow: var(--aura-card-shadow-creative); }
 .aura-card__head { display: flex; align-items: flex-start; gap: var(--aura-space-3); }
 .aura-card__heading { flex: 1; min-width: 0; }
@@ -962,6 +983,7 @@ a.aura-tab { text-decoration: none; }
 }
 .aura-container { box-sizing: border-box; width: 100%; max-width: var(--aura-container-max); margin: 0 auto; padding: 0 var(--aura-space-4); }
 .aura-container.is-narrow { max-width: var(--aura-container-narrow); }
+.aura-container.is-start { margin-inline: 0; } /* 5.26 (Chamber-OS 126): align="start" */
 /* Breakpoints: sm 640 · md 768 · lg 1024 · xl 1280 (aura-bp-* tokens; media queries can't read variables) */
 @media (min-width: 640px) {
   .aura-stack { flex-direction: var(--aura-stack-dir-sm, var(--aura-stack-dir-base, column)); align-items: var(--aura-stack-align-sm, stretch); gap: var(--aura-stack-gap-sm, var(--aura-stack-gap-base, var(--aura-space-4))); }
@@ -1414,7 +1436,7 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
   .aura-toaster { left: var(--aura-space-4); right: var(--aura-space-4); bottom: var(--aura-space-4); width: auto; }
   .aura-toaster.is-center { left: var(--aura-space-4); right: var(--aura-space-4); transform: none; }
   .aura-toaster.is-top { top: calc(var(--aura-toaster-offset, var(--aura-space-4)) + env(safe-area-inset-top, 0px)); }
-  .aura-card { padding: var(--aura-space-4); }
+  .aura-card { padding: var(--aura-space-4); --aura-card-bleed: var(--aura-space-4); }
   .aura-stat { padding: var(--aura-space-4); }
   .aura-stat__value { font-size: 24px; }
   .aura-tabs__list { gap: var(--aura-space-4); }
@@ -1533,6 +1555,16 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-filterselect.is-disabled .aura-filterselect__face { background: var(--aura-bg-input-disabled); color: var(--aura-fg-secondary); border-color: var(--aura-border-default); cursor: not-allowed; }
 .aura-filterselect.is-disabled .aura-filterselect__native { cursor: not-allowed; }
 @media (forced-colors: active) { .aura-filterselect__face { border-color: ButtonText; } }
+/* 5.26 (Chamber-OS 128) FilterDateRange: presets beside the range calendar; above it on phones. */
+.aura-filterdate__pop { display: flex; gap: var(--aura-space-3); overflow-y: auto; }
+.aura-filterdate__presets { display: flex; flex-direction: column; gap: 2px; min-width: 8rem; padding-inline-end: var(--aura-space-3); border-inline-end: 1px solid var(--aura-border-subtle); }
+.aura-filterdate__preset { justify-content: flex-start; }
+.aura-filterdate__preset.is-selected { background: var(--aura-bg-selected); }
+@media (forced-colors: active) { .aura-filterdate__preset.is-selected { outline: 2px solid Highlight; outline-offset: -2px; } }
+@media (max-width: 639.98px) {
+  .aura-filterdate__pop { flex-direction: column; }
+  .aura-filterdate__presets { flex-direction: row; flex-wrap: wrap; min-width: 0; padding: 0 0 var(--aura-space-2); border: 0; border-bottom: 1px solid var(--aura-border-subtle); }
+}
 
 /* Command palette: a search field over a grouped list, above everything else (it can open from a Dialog) */
 .aura-dialog-layer.aura-command-layer { z-index: var(--aura-z-menu); align-items: flex-start; padding: 12vh var(--aura-space-4) var(--aura-space-4); }
@@ -1700,6 +1732,22 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
 .aura-tbl .is-end { text-align: right; }
 .aura-tbl .is-center { text-align: center; }
 .aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
+/* 5.26 (Chamber-OS 129) stickyHeader. To the page: the box must not be a scroll container, so it clips sideways
+ * instead (nothing overflows while it fits; JavaScript marks a table that doesn't, which scrolls as before). In a
+ * maxHeight box: the box scrolls both ways and the header pins to its top. The rule under the band moves with it. */
+.aura-tbl-wrap.is-sticky-page:not(.is-wide) { overflow-x: clip; }
+.aura-tbl-wrap.has-max, .aura-tbl-cards > .aura-tbl-wrap.has-max { overflow: auto; box-sizing: border-box; }
+.aura-tbl-wrap.is-sticky-page > .aura-tbl > .aura-tbl__head .aura-tbl__th, .aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th {
+  position: sticky; top: var(--aura-table-sticky-top, var(--aura-shell-bar-height, 0px)); z-index: 2;
+  border-bottom-width: 0; box-shadow: inset 0 -1px 0 var(--aura-border-default); /* one rule, at rest and pinned */
+}
+/* Forced colours drop the shadow; a pseudo-element line moves with the pinned cell (a collapsed border doesn't). */
+@media (forced-colors: active) {
+  .aura-tbl-wrap.is-sticky-page > .aura-tbl > .aura-tbl__head .aura-tbl__th::after, .aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th::after {
+    content: ''; position: absolute; inset: auto 0 0 0; border-bottom: 1px solid CanvasText;
+  }
+}
+.aura-tbl-wrap.is-sticky-box > .aura-tbl > .aura-tbl__head .aura-tbl__th { top: 0; }
 .aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
 /* 5.13 (Chamber-OS 81): align="middle" centres body and footer cells on their row; bordered={false} drops the frame and
  * the outer cells' side padding, so the table lines up with what's around it (a Card's heading). */
@@ -1741,6 +1789,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     content: attr(data-label); content: attr(data-label) / '';
     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); }
 }
 @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; }
@@ -1763,6 +1813,8 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
     content: attr(data-label); content: attr(data-label) / '';
     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); }
 }
 
 /* 5.15 (Chamber-OS 85): stackStyle="cards" — each stacked row its own card (DataTable's card spacing), no outer frame.
@@ -1770,6 +1822,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-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);
@@ -1781,6 +1835,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-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);
@@ -1810,6 +1866,9 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
  * screen readers; the labels are generated content with empty alt text, so they aren't read twice. */
 @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-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.25.0",
+  "version": "5.26.0",
   "description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
   "license": "MIT",
   "type": "module",