@jirawatpyk/aura-react 4.19.0 → 4.20.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +19 -2
- package/dist/aura.bundle.js +400 -276
- package/dist/cjs/index.cjs +399 -275
- package/dist/esm/DataTable.js +119 -125
- package/dist/esm/DatePicker.js +24 -7
- package/dist/esm/Separator.js +20 -0
- package/dist/esm/Table.js +79 -0
- package/dist/esm/Tooltip.js +21 -3
- package/dist/esm/index.js +10 -0
- package/dist/index.d.ts +57 -5
- package/dist/styles.css +104 -57
- package/dist/styles.layer.css +104 -57
- package/package.json +1 -1
package/dist/index.d.ts
CHANGED
|
@@ -74,7 +74,7 @@ export interface DataTableColumn {
|
|
|
74
74
|
pinned?: boolean | undefined;
|
|
75
75
|
/** Start hidden (show it from the columns button). */
|
|
76
76
|
hidden?: boolean | undefined;
|
|
77
|
-
/** Hide this column when the table is narrower than this (px, or a breakpoint name). For tablets: keep ID, name, date and status; drop the rest below `lg`. Not applied to stacked cards. */
|
|
77
|
+
/** Hide this column when the table is narrower than this (px, or a breakpoint name). For tablets: keep ID, name, date and status; drop the rest below `lg`. Not applied to stacked cards. Decided in CSS from the first paint (4.20) for up to three distinct widths per table; more than that apply once JavaScript runs. */
|
|
78
78
|
hideBelow?: number | "sm" | "md" | "lg" | "xl" | undefined;
|
|
79
79
|
/** Row actions (a DropdownMenu or IconButton). In stacked cards it sits top-right instead of in the field list. Give it an empty label. */
|
|
80
80
|
actions?: boolean | undefined;
|
|
@@ -171,7 +171,7 @@ export interface DataTableProps {
|
|
|
171
171
|
onPinnedColumnsChange?: ((keys: string[]) => void) | undefined;
|
|
172
172
|
/** `compact` = 40px rows (48px on touch screens). Default: the surrounding density. */
|
|
173
173
|
density?: "comfortable" | "compact" | undefined;
|
|
174
|
-
/**
|
|
174
|
+
/** 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. */
|
|
175
175
|
stackBelow?: number | undefined;
|
|
176
176
|
className?: string | undefined;
|
|
177
177
|
}
|
|
@@ -479,7 +479,9 @@ export interface TooltipProps {
|
|
|
479
479
|
content: React$1.ReactNode;
|
|
480
480
|
/** One focusable element. */
|
|
481
481
|
children: React$1.ReactElement;
|
|
482
|
-
side
|
|
482
|
+
/** Preferred side. Default `top`. `left` / `right` (4.20) for icon buttons at the right edge of a table or in a
|
|
483
|
+
* collapsed rail. Flips to the opposite side when clipped, and always stays inside the viewport. */
|
|
484
|
+
side?: "top" | "bottom" | "left" | "right" | undefined;
|
|
483
485
|
/** Hover delay in ms. Default 400. */
|
|
484
486
|
delay?: number | undefined;
|
|
485
487
|
/** Force open (demos, tests). */
|
|
@@ -866,6 +868,41 @@ export interface AppShellProps {
|
|
|
866
868
|
bottomNav?: React$1.ReactElement | undefined;
|
|
867
869
|
className?: string | undefined;
|
|
868
870
|
}
|
|
871
|
+
export interface SeparatorProps {
|
|
872
|
+
/** Default `horizontal` (full width). `vertical` fills the height of a flex row, e.g. between toolbar groups. */
|
|
873
|
+
orientation?: "horizontal" | "vertical" | undefined;
|
|
874
|
+
/** Default true: hidden from screen readers. `false` renders `role="separator"`, announced as a boundary. */
|
|
875
|
+
decorative?: boolean | undefined;
|
|
876
|
+
/** Space on both sides, as an `aura-space-*` step (e.g. 4 = 16px). Default 0. */
|
|
877
|
+
spacing?: 1 | 2 | 3 | 4 | 5 | 6 | 8 | undefined;
|
|
878
|
+
className?: string | undefined;
|
|
879
|
+
}
|
|
880
|
+
export interface TableProps extends Omit<React$1.TableHTMLAttributes<HTMLTableElement>, "className"> {
|
|
881
|
+
/** The table's name (a `<caption>`). Give every table one; `captionHidden` keeps it for screen readers only. */
|
|
882
|
+
caption?: React$1.ReactNode | undefined;
|
|
883
|
+
captionHidden?: boolean | undefined;
|
|
884
|
+
/** `compact` tightens the cell padding. Default follows the page. */
|
|
885
|
+
density?: "comfortable" | "compact" | undefined;
|
|
886
|
+
className?: string | undefined;
|
|
887
|
+
children?: React$1.ReactNode | undefined;
|
|
888
|
+
}
|
|
889
|
+
export interface TableSectionProps extends React$1.HTMLAttributes<HTMLTableSectionElement> {
|
|
890
|
+
className?: string | undefined;
|
|
891
|
+
}
|
|
892
|
+
export interface TableRowProps extends React$1.HTMLAttributes<HTMLTableRowElement> {
|
|
893
|
+
className?: string | undefined;
|
|
894
|
+
}
|
|
895
|
+
export interface TableCellProps extends Omit<React$1.TdHTMLAttributes<HTMLTableCellElement>, "align" | "scope"> {
|
|
896
|
+
/** Text alignment. `numeric` implies `end`. */
|
|
897
|
+
align?: "start" | "center" | "end" | undefined;
|
|
898
|
+
/** Money and counts: right-aligned, tabular figures. */
|
|
899
|
+
numeric?: boolean | undefined;
|
|
900
|
+
/** IDs and codes in the mono face. */
|
|
901
|
+
mono?: boolean | undefined;
|
|
902
|
+
/** Th only. Default `col`. */
|
|
903
|
+
scope?: "col" | "row" | "colgroup" | "rowgroup" | undefined;
|
|
904
|
+
className?: string | undefined;
|
|
905
|
+
}
|
|
869
906
|
export interface ActionBarProps {
|
|
870
907
|
/** Buttons, right-aligned (the primary one last). */
|
|
871
908
|
children?: React$1.ReactNode | undefined;
|
|
@@ -1190,12 +1227,14 @@ export declare const Combobox: ComboboxComponent;
|
|
|
1190
1227
|
export type FormatDateOptions = DateDisplayOptions & {
|
|
1191
1228
|
format?: "short" | "long" | "numeric" | Intl.DateTimeFormatOptions | undefined;
|
|
1192
1229
|
};
|
|
1193
|
-
/** Format an ISO date for display, e.g. "18 ก.ย. 2569" (th, Buddhist) or "18 Sept 2026" (en, Gregorian). */
|
|
1194
|
-
export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
|
|
1195
1230
|
/** Parse typed text: dd/mm/yyyy (Buddhist years ≥ 2400 are converted), d-m-yyyy, d.m.yyyy, yyyy-mm-dd or '18 ก.ย. 2569' / '18 Sep 2026'. */
|
|
1196
1231
|
export declare function parseDate(text: string | null | undefined): ISODate | null;
|
|
1197
1232
|
/** Today as an ISO date in an IANA time zone (e.g. `Asia/Bangkok`), or in the runtime's own zone without one. (4.19) */
|
|
1198
1233
|
export declare function todayIn(timeZone?: string | null): ISODate;
|
|
1234
|
+
/** Format an ISO date for display. Without a `locale` it is Thai with Buddhist-era years **until 5.0, which makes it
|
|
1235
|
+
* English and Gregorian** like `@jirawatpyk/aura-react/server` and `useFormatDate()`. Pass `{ locale }` (or use
|
|
1236
|
+
* `useFormatDate()` in components) so the switch changes nothing for you; a call without one warns once in development. */
|
|
1237
|
+
export declare function formatDate(iso: ISODate | null | undefined, opts?: FormatDateOptions): string;
|
|
1199
1238
|
/** formatDate bound to the nearest AuraProvider: its locale and calendar (English, Gregorian without one).
|
|
1200
1239
|
* Options you pass still win. Use it in components; plain formatDate() stays for code outside React. */
|
|
1201
1240
|
export declare function useFormatDate(): (iso: ISODate | null | undefined, opts?: FormatDateOptions) => string;
|
|
@@ -1257,6 +1296,19 @@ export declare const AppShell: React$1.ForwardRefExoticComponent<AppShellProps &
|
|
|
1257
1296
|
/** ActionBar — a bar stuck to the bottom of the screen or of a card: a status line and the form's or selection's
|
|
1258
1297
|
* actions. It is `position: sticky`, so it stays in the flow at the end of its parent and never covers the last field. */
|
|
1259
1298
|
export declare const ActionBar: React$1.ForwardRefExoticComponent<ActionBarProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1299
|
+
/** Separator — a 1px `aura-border-default` rule between groups of content (4.20). Decorative by default (hidden from
|
|
1300
|
+
* screen readers); `decorative={false}` makes it a `role="separator"` that is announced. */
|
|
1301
|
+
export declare const Separator: React$1.ForwardRefExoticComponent<SeparatorProps & React$1.RefAttributes<HTMLDivElement>>;
|
|
1302
|
+
/** A static table. Scrolls sideways inside its own box when it is wider than its container. */
|
|
1303
|
+
export declare const Table: React$1.ForwardRefExoticComponent<TableProps & React$1.RefAttributes<HTMLTableElement>>;
|
|
1304
|
+
export declare const THead: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1305
|
+
export declare const TBody: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1306
|
+
export declare const TFoot: React$1.ForwardRefExoticComponent<TableSectionProps & React$1.RefAttributes<HTMLTableSectionElement>>;
|
|
1307
|
+
export declare const Tr: React$1.ForwardRefExoticComponent<TableRowProps & React$1.RefAttributes<HTMLTableRowElement>>;
|
|
1308
|
+
/** Header cell. `scope` defaults to `col`; pass `scope="row"` for a row header in the body. */
|
|
1309
|
+
export declare const Th: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
1310
|
+
/** Data cell. `numeric` right-aligns with tabular figures (money, counts). */
|
|
1311
|
+
export declare const Td: React$1.ForwardRefExoticComponent<TableCellProps & React$1.RefAttributes<HTMLTableCellElement>>;
|
|
1260
1312
|
/** BottomNav — a phone tab bar: icon over a short label, a count or dot, the current page marked. Fixed to the bottom,
|
|
1261
1313
|
* padded for the home indicator, with a spacer of the same height in the flow so nothing sits under it. Which
|
|
1262
1314
|
* breakpoints show it is decided in CSS, so the server's HTML is already right and nothing shifts on hydration. */
|
package/dist/styles.css
CHANGED
|
@@ -82,16 +82,17 @@ a.aura-btn { text-decoration: none; }
|
|
|
82
82
|
background: var(--aura-bg-surface);
|
|
83
83
|
color: var(--aura-fg-primary);
|
|
84
84
|
}
|
|
85
|
-
.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; }
|
|
85
|
+
.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
|
|
86
86
|
.aura-table__head {
|
|
87
87
|
position: sticky; top: 0; z-index: 3; box-sizing: border-box; /* the hairline is inside the row height */
|
|
88
|
-
display: flex; height: var(--aura-table-row-height);
|
|
88
|
+
display: flex; height: var(--aura-table-row-height); min-width: var(--aura-row-min, 0);
|
|
89
89
|
background: var(--aura-bg-canvas);
|
|
90
90
|
border-bottom: 1px solid var(--aura-border-default);
|
|
91
91
|
font-family: var(--font-mono); font-size: 12px; color: var(--aura-fg-secondary);
|
|
92
92
|
}
|
|
93
93
|
.aura-table__row {
|
|
94
94
|
box-sizing: border-box; display: flex; height: var(--aura-table-row-height); /* exactly the virtual row height */
|
|
95
|
+
min-width: var(--aura-row-min, 0);
|
|
95
96
|
background: var(--aura-bg-surface);
|
|
96
97
|
border-bottom: 1px solid var(--aura-border-default);
|
|
97
98
|
font-size: 13px;
|
|
@@ -110,15 +111,14 @@ a.aura-btn { text-decoration: none; }
|
|
|
110
111
|
.aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-end; }
|
|
111
112
|
/* Row links (getRowHref): the first cell's text is the link; the whole row is the click target */
|
|
112
113
|
.aura-table__row-link { color: inherit; text-decoration: none; }
|
|
113
|
-
.aura-table__row-link:hover, .aura-table__row:hover .aura-table__row-link
|
|
114
|
+
.aura-table__row-link:hover, .aura-table__row:hover .aura-table__row-link { text-decoration: underline; text-underline-offset: 2px; }
|
|
114
115
|
.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); }
|
|
115
116
|
/* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
|
|
116
|
-
.aura-table.is-refreshing .aura-table__row
|
|
117
|
+
.aura-table.is-refreshing .aura-table__row { opacity: 0.6; pointer-events: none; }
|
|
117
118
|
.aura-table__busy-bar {
|
|
118
119
|
position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
|
|
119
120
|
border-radius: var(--aura-radius-full); pointer-events: none;
|
|
120
121
|
}
|
|
121
|
-
.aura-table--stacked .aura-table__busy-bar { top: 0; }
|
|
122
122
|
.aura-table__busy-bar::after {
|
|
123
123
|
content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--aura-fg-accent);
|
|
124
124
|
animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite;
|
|
@@ -132,6 +132,9 @@ a.aura-btn { text-decoration: none; }
|
|
|
132
132
|
}
|
|
133
133
|
.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
|
|
134
134
|
.aura-table__th { position: relative; box-sizing: border-box; display: flex; align-items: center; padding-right: var(--aura-space-2); }
|
|
135
|
+
/* Column sizes come from custom properties set per cell (4.20), so the card layout can override them. */
|
|
136
|
+
.aura-table__th, .aura-table__td { flex: var(--aura-cell-flex, none); width: var(--aura-cell-w, auto); min-width: var(--aura-cell-min, 0); }
|
|
137
|
+
.aura-table__break, .aura-table__sel-text { display: none; }
|
|
135
138
|
.aura-table__th-inner { display: flex; align-items: center; gap: var(--aura-space-1); min-width: 0; width: 100%; }
|
|
136
139
|
.aura-table__th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
137
140
|
.aura-table__pin-icon { color: var(--aura-fg-secondary); }
|
|
@@ -153,7 +156,7 @@ a.aura-btn { text-decoration: none; }
|
|
|
153
156
|
.aura-table__sel.is-pinned { position: sticky; left: var(--aura-space-6); z-index: 2; }
|
|
154
157
|
|
|
155
158
|
/* Pinned columns */
|
|
156
|
-
.aura-table__th.is-pinned, .aura-table__td.is-pinned { position: sticky; z-index: 2; background: inherit; }
|
|
159
|
+
.aura-table__th.is-pinned, .aura-table__td.is-pinned { position: sticky; left: var(--aura-cell-left, auto); z-index: 2; background: inherit; }
|
|
157
160
|
.aura-table.is-scrolled-x .is-pin-edge { box-shadow: inset -1px 0 0 var(--aura-border-default); }
|
|
158
161
|
|
|
159
162
|
/* Cell focus — the grid's single tab stop moves cell by cell */
|
|
@@ -850,32 +853,11 @@ a.aura-tab { text-decoration: none; }
|
|
|
850
853
|
/* The shell already pads its content: a Container directly inside only caps the width. */
|
|
851
854
|
.aura-shell__content > .aura-container { padding-left: 0; padding-right: 0; }
|
|
852
855
|
|
|
853
|
-
/* ---------- DataTable: stacked cards ---------- */
|
|
854
|
-
.aura-table--stacked { background: transparent; border: 0; border-radius: 0; overflow: visible; }
|
|
855
|
-
.aura-table__stack-bar { display: flex; align-items: center; gap: var(--aura-space-3); padding: 0 var(--aura-space-4) var(--aura-space-3); font-size: 13px; color: var(--aura-fg-secondary); }
|
|
856
|
-
.aura-table__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--aura-space-2); }
|
|
857
|
-
.aura-table__card {
|
|
858
|
-
display: flex; flex-direction: column; gap: var(--aura-space-3); padding: var(--aura-space-4);
|
|
859
|
-
background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); font-size: 13px;
|
|
860
|
-
}
|
|
861
|
-
.aura-table__card.is-selected { background: var(--aura-bg-selected); }
|
|
862
|
-
.aura-table__card.is-actionable { cursor: pointer; }
|
|
863
|
-
.aura-table__card:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
|
|
864
|
-
.aura-table__card-head { display: flex; align-items: center; gap: var(--aura-space-3); }
|
|
865
|
-
.aura-table__card-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
866
|
-
.aura-table__card-actions { display: inline-flex; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
|
|
867
|
-
.aura-table__card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aura-space-2) var(--aura-space-4); margin: 0; }
|
|
868
|
-
.aura-table__card-fields dt { font-family: var(--font-mono); font-size: 11px; color: var(--aura-fg-secondary); }
|
|
869
|
-
.aura-table__card-fields dd { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
870
|
-
.aura-table__card-fields dd.is-end { text-align: right; font-variant-numeric: tabular-nums; }
|
|
871
|
-
.aura-table__card--total { background: var(--aura-bg-canvas); font-weight: 600; }
|
|
872
856
|
/* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
|
|
873
857
|
.aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
|
|
874
858
|
.aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; }
|
|
875
859
|
.aura-table__total .aura-table__td.is-end { font-variant-numeric: tabular-nums; }
|
|
876
860
|
.aura-tooltip--above { transform: translateY(-100%); max-width: min(var(--aura-tooltip-max), 90vw); white-space: normal; }
|
|
877
|
-
.aura-table--stacked .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); }
|
|
878
|
-
.aura-table--stacked .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
|
|
879
861
|
|
|
880
862
|
/* ---------- Stat ---------- */
|
|
881
863
|
.aura-stat {
|
|
@@ -1338,36 +1320,6 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1338
1320
|
.aura-density { display: contents; }
|
|
1339
1321
|
|
|
1340
1322
|
|
|
1341
|
-
/* DataTable: cards before hydration (4.16). While a stackBelow table hasn't measured itself yet (server HTML, first
|
|
1342
|
-
* client render) it holds both layouts; these container queries show one, so a phone never sees the grid first. */
|
|
1343
|
-
.aura-table-dual { container-type: inline-size; }
|
|
1344
|
-
@container (min-width: 360px) { .aura-table-dual[data-stack-below='360'] > .aura-table--stacked { display: none; } }
|
|
1345
|
-
@container (max-width: 359.98px) { .aura-table-dual[data-stack-below='360'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1346
|
-
@container (min-width: 400px) { .aura-table-dual[data-stack-below='400'] > .aura-table--stacked { display: none; } }
|
|
1347
|
-
@container (max-width: 399.98px) { .aura-table-dual[data-stack-below='400'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1348
|
-
@container (min-width: 480px) { .aura-table-dual[data-stack-below='480'] > .aura-table--stacked { display: none; } }
|
|
1349
|
-
@container (max-width: 479.98px) { .aura-table-dual[data-stack-below='480'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1350
|
-
@container (min-width: 520px) { .aura-table-dual[data-stack-below='520'] > .aura-table--stacked { display: none; } }
|
|
1351
|
-
@container (max-width: 519.98px) { .aura-table-dual[data-stack-below='520'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1352
|
-
@container (min-width: 560px) { .aura-table-dual[data-stack-below='560'] > .aura-table--stacked { display: none; } }
|
|
1353
|
-
@container (max-width: 559.98px) { .aura-table-dual[data-stack-below='560'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1354
|
-
@container (min-width: 600px) { .aura-table-dual[data-stack-below='600'] > .aura-table--stacked { display: none; } }
|
|
1355
|
-
@container (max-width: 599.98px) { .aura-table-dual[data-stack-below='600'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1356
|
-
@container (min-width: 640px) { .aura-table-dual[data-stack-below='640'] > .aura-table--stacked { display: none; } }
|
|
1357
|
-
@container (max-width: 639.98px) { .aura-table-dual[data-stack-below='640'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1358
|
-
@container (min-width: 720px) { .aura-table-dual[data-stack-below='720'] > .aura-table--stacked { display: none; } }
|
|
1359
|
-
@container (max-width: 719.98px) { .aura-table-dual[data-stack-below='720'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1360
|
-
@container (min-width: 768px) { .aura-table-dual[data-stack-below='768'] > .aura-table--stacked { display: none; } }
|
|
1361
|
-
@container (max-width: 767.98px) { .aura-table-dual[data-stack-below='768'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1362
|
-
@container (min-width: 800px) { .aura-table-dual[data-stack-below='800'] > .aura-table--stacked { display: none; } }
|
|
1363
|
-
@container (max-width: 799.98px) { .aura-table-dual[data-stack-below='800'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1364
|
-
@container (min-width: 900px) { .aura-table-dual[data-stack-below='900'] > .aura-table--stacked { display: none; } }
|
|
1365
|
-
@container (max-width: 899.98px) { .aura-table-dual[data-stack-below='900'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1366
|
-
@container (min-width: 960px) { .aura-table-dual[data-stack-below='960'] > .aura-table--stacked { display: none; } }
|
|
1367
|
-
@container (max-width: 959.98px) { .aura-table-dual[data-stack-below='960'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1368
|
-
@container (min-width: 1024px) { .aura-table-dual[data-stack-below='1024'] > .aura-table--stacked { display: none; } }
|
|
1369
|
-
@container (max-width: 1023.98px) { .aura-table-dual[data-stack-below='1024'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1370
|
-
|
|
1371
1323
|
/* ---------- 4.19: BottomNav ---------- */
|
|
1372
1324
|
/* Fixed to the bottom and padded for the home indicator; the spacer before it holds the same height in the flow.
|
|
1373
1325
|
* Shown below its breakpoint in CSS, so the server's HTML is right before hydration. */
|
|
@@ -1431,3 +1383,98 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1431
1383
|
/* Bulk bar with nothing selected: out of sight and out of the tab order, its live region still in the page. */
|
|
1432
1384
|
.aura-actionbar.is-idle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; box-shadow: none; }
|
|
1433
1385
|
.aura-actionbar--container > .aura-actionbar__inner { padding-left: 0; padding-right: 0; }
|
|
1386
|
+
|
|
1387
|
+
/* ---------- 4.20: Separator ---------- */
|
|
1388
|
+
.aura-separator { flex: none; align-self: stretch; height: 1px; margin: var(--aura-separator-space, 0) 0; background: var(--aura-border-default); border: 0; }
|
|
1389
|
+
.aura-separator--vertical { width: 1px; height: auto; min-height: 1em; margin: 0 var(--aura-separator-space, 0); }
|
|
1390
|
+
|
|
1391
|
+
/* ---------- 4.20: Table (static) ---------- */
|
|
1392
|
+
/* DataTable's grid look — mono header band, hairlines, 20px outer radius — on plain <table> markup, with wrapping text. */
|
|
1393
|
+
.aura-tbl-wrap {
|
|
1394
|
+
overflow-x: auto; border: 1px solid var(--aura-border-default); border-radius: var(--aura-card-radius);
|
|
1395
|
+
background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans);
|
|
1396
|
+
}
|
|
1397
|
+
.aura-tbl { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 20px; }
|
|
1398
|
+
.aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) 0; text-align: left; font-size: 14px; font-weight: 600; }
|
|
1399
|
+
.aura-tbl__th, .aura-tbl__td { padding: var(--aura-space-3) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
|
|
1400
|
+
.aura-tbl__th:first-child, .aura-tbl__td:first-child { padding-left: var(--aura-space-6); }
|
|
1401
|
+
.aura-tbl__th:last-child, .aura-tbl__td:last-child { padding-right: var(--aura-space-6); }
|
|
1402
|
+
.aura-tbl__head .aura-tbl__th {
|
|
1403
|
+
background: var(--aura-bg-canvas); border-bottom: 1px solid var(--aura-border-default);
|
|
1404
|
+
font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--aura-fg-secondary); white-space: nowrap;
|
|
1405
|
+
}
|
|
1406
|
+
.aura-tbl__body .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
|
|
1407
|
+
.aura-tbl__body .aura-tbl__th { font-weight: 500; }
|
|
1408
|
+
.aura-tbl__foot > .aura-tbl__row > * { background: var(--aura-bg-canvas); font-weight: 600; }
|
|
1409
|
+
.aura-tbl__foot > .aura-tbl__row:first-child > * { border-top: 1px solid var(--aura-border-strong); }
|
|
1410
|
+
.aura-tbl__foot > .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
|
|
1411
|
+
.aura-tbl .is-end { text-align: right; }
|
|
1412
|
+
.aura-tbl .is-center { text-align: center; }
|
|
1413
|
+
.aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
1414
|
+
.aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
|
|
1415
|
+
.aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
|
|
1416
|
+
|
|
1417
|
+
/* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
|
|
1418
|
+
/* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true
|
|
1419
|
+
* exactly when the table is narrower than stackBelow or a hideBelow width — before hydration, at any width. */
|
|
1420
|
+
.aura-table-box { overflow-x: clip; }
|
|
1421
|
+
.aura-table-q { width: calc(100% * var(--aura-q-scale)); container-type: inline-size; }
|
|
1422
|
+
.aura-table-q--stack { container-name: aura-stack; }
|
|
1423
|
+
.aura-table-q--h1 { container-name: aura-h1; }
|
|
1424
|
+
.aura-table-q--h2 { container-name: aura-h2; }
|
|
1425
|
+
.aura-table-q--h3 { container-name: aura-h3; }
|
|
1426
|
+
.aura-table-q .aura-table { width: calc(100% * var(--aura-q-back)); box-sizing: border-box; }
|
|
1427
|
+
@container aura-h1 (width < 9999.5px) { .aura-table { --aura-h1-on: 0; } .aura-table [data-hide='1'] { display: none; } }
|
|
1428
|
+
@container aura-h2 (width < 9999.5px) { .aura-table { --aura-h2-on: 0; } .aura-table [data-hide='2'] { display: none; } }
|
|
1429
|
+
@container aura-h3 (width < 9999.5px) { .aura-table { --aura-h3-on: 0; } .aura-table [data-hide='3'] { display: none; } }
|
|
1430
|
+
|
|
1431
|
+
/* Below stackBelow the same grid lays out as cards: the first column is the title, the first other pill column sits
|
|
1432
|
+
* beside it, `actions` columns go top-right, the rest are label/value fields two to a line. Column headers stay for
|
|
1433
|
+
* screen readers; the labels are generated content with empty alt text, so they aren't read twice. */
|
|
1434
|
+
@container aura-stack (width < 9999.5px) {
|
|
1435
|
+
.aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
|
|
1436
|
+
.aura-table__scroll { overflow: visible; height: auto; }
|
|
1437
|
+
.aura-table__busy-bar { top: 0; }
|
|
1438
|
+
.aura-table__picker { display: none; }
|
|
1439
|
+
.aura-table__head {
|
|
1440
|
+
position: static; height: auto; min-width: 0; padding: 0 0 var(--aura-space-3); border: 0; background: none;
|
|
1441
|
+
font-family: var(--font-sans); font-size: 13px;
|
|
1442
|
+
}
|
|
1443
|
+
.aura-table__head > .aura-table__th {
|
|
1444
|
+
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
|
1445
|
+
}
|
|
1446
|
+
.aura-table__head:not(.has-select-all) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
|
|
1447
|
+
.aura-table__head > .aura-table__sel { position: static; width: auto; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); }
|
|
1448
|
+
.aura-table__sel-text { display: inline; color: var(--aura-fg-secondary); }
|
|
1449
|
+
.aura-table__gutter { display: none; }
|
|
1450
|
+
.aura-table__row, .aura-table__row:last-child {
|
|
1451
|
+
height: auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-4);
|
|
1452
|
+
margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
|
|
1453
|
+
border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg);
|
|
1454
|
+
}
|
|
1455
|
+
.aura-table__sel, .aura-table__th.is-pinned, .aura-table__td.is-pinned, .aura-table__total.is-sticky { position: static; box-shadow: none; }
|
|
1456
|
+
.aura-table__row > .aura-table__sel { order: 0; width: auto; margin-right: calc(-1 * var(--aura-space-1)); }
|
|
1457
|
+
.aura-table__td {
|
|
1458
|
+
order: 5; flex: 0 0 calc(50% - var(--aura-space-4) / 2); align-self: flex-start; width: auto; min-width: 0; height: auto;
|
|
1459
|
+
margin-bottom: var(--aura-space-1);
|
|
1460
|
+
padding: 0; line-height: normal;
|
|
1461
|
+
}
|
|
1462
|
+
.aura-table__td[data-hide] { display: block; }
|
|
1463
|
+
.aura-table__td[data-label]::before {
|
|
1464
|
+
content: attr(data-label); content: attr(data-label) / '';
|
|
1465
|
+
display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;
|
|
1466
|
+
font-family: var(--font-mono); font-size: 11px; line-height: normal; font-weight: 400; color: var(--aura-fg-secondary);
|
|
1467
|
+
}
|
|
1468
|
+
.aura-table__td[data-card='title'], .aura-table__td[data-card='pill'], .aura-table__td[data-card='actions'] { align-self: center; margin-bottom: 0; }
|
|
1469
|
+
.aura-table__td[data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
|
|
1470
|
+
.aura-table__td[data-card='pill'] { order: 2; flex: none; }
|
|
1471
|
+
.aura-table__td[data-card='actions'] { order: 3; flex: none; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
|
|
1472
|
+
/* Spacing: 12px under the title line, 8px between field lines (row gap 4 + the break's 4 + each field's 4 below). */
|
|
1473
|
+
.aura-table__break { display: block; order: 4; flex: 0 0 100%; height: var(--aura-space-1); }
|
|
1474
|
+
.aura-table__row:has(> .aura-table__break) { padding-bottom: calc(var(--aura-space-4) - var(--aura-space-1)); }
|
|
1475
|
+
.aura-table__row--skeleton .aura-table__td { display: flex; }
|
|
1476
|
+
.aura-table__total { background: var(--aura-bg-canvas); }
|
|
1477
|
+
.aura-table__total > .is-blank { display: none; }
|
|
1478
|
+
.aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }
|
|
1479
|
+
.aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
|
|
1480
|
+
}
|
package/dist/styles.layer.css
CHANGED
|
@@ -84,16 +84,17 @@ a.aura-btn { text-decoration: none; }
|
|
|
84
84
|
background: var(--aura-bg-surface);
|
|
85
85
|
color: var(--aura-fg-primary);
|
|
86
86
|
}
|
|
87
|
-
.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; }
|
|
87
|
+
.aura-table__scroll { position: relative; overflow: auto; overscroll-behavior: contain; height: var(--aura-table-h, auto); }
|
|
88
88
|
.aura-table__head {
|
|
89
89
|
position: sticky; top: 0; z-index: 3; box-sizing: border-box; /* the hairline is inside the row height */
|
|
90
|
-
display: flex; height: var(--aura-table-row-height);
|
|
90
|
+
display: flex; height: var(--aura-table-row-height); min-width: var(--aura-row-min, 0);
|
|
91
91
|
background: var(--aura-bg-canvas);
|
|
92
92
|
border-bottom: 1px solid var(--aura-border-default);
|
|
93
93
|
font-family: var(--font-mono); font-size: 12px; color: var(--aura-fg-secondary);
|
|
94
94
|
}
|
|
95
95
|
.aura-table__row {
|
|
96
96
|
box-sizing: border-box; display: flex; height: var(--aura-table-row-height); /* exactly the virtual row height */
|
|
97
|
+
min-width: var(--aura-row-min, 0);
|
|
97
98
|
background: var(--aura-bg-surface);
|
|
98
99
|
border-bottom: 1px solid var(--aura-border-default);
|
|
99
100
|
font-size: 13px;
|
|
@@ -112,15 +113,14 @@ a.aura-btn { text-decoration: none; }
|
|
|
112
113
|
.aura-table__row--skeleton .aura-table__td.is-end { justify-content: flex-end; }
|
|
113
114
|
/* Row links (getRowHref): the first cell's text is the link; the whole row is the click target */
|
|
114
115
|
.aura-table__row-link { color: inherit; text-decoration: none; }
|
|
115
|
-
.aura-table__row-link:hover, .aura-table__row:hover .aura-table__row-link
|
|
116
|
+
.aura-table__row-link:hover, .aura-table__row:hover .aura-table__row-link { text-decoration: underline; text-underline-offset: 2px; }
|
|
116
117
|
.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); }
|
|
117
118
|
/* Server mode refresh: the previous page stays, inactive, under a progress bar until the next one arrives */
|
|
118
|
-
.aura-table.is-refreshing .aura-table__row
|
|
119
|
+
.aura-table.is-refreshing .aura-table__row { opacity: 0.6; pointer-events: none; }
|
|
119
120
|
.aura-table__busy-bar {
|
|
120
121
|
position: absolute; z-index: 6; top: calc(var(--aura-table-row-height) - 2px); left: 0; right: 0; height: 2px; overflow: hidden;
|
|
121
122
|
border-radius: var(--aura-radius-full); pointer-events: none;
|
|
122
123
|
}
|
|
123
|
-
.aura-table--stacked .aura-table__busy-bar { top: 0; }
|
|
124
124
|
.aura-table__busy-bar::after {
|
|
125
125
|
content: ''; position: absolute; top: 0; bottom: 0; width: 35%; background: var(--aura-fg-accent);
|
|
126
126
|
animation: aura-progress-slide var(--aura-duration-pulse) var(--aura-ease) infinite;
|
|
@@ -134,6 +134,9 @@ a.aura-btn { text-decoration: none; }
|
|
|
134
134
|
}
|
|
135
135
|
.aura-table__td .aura-pill, .aura-table__td .aura-dropdown, .aura-table__td > .aura-icon-btn, .aura-table__td > .aura-btn { vertical-align: middle; }
|
|
136
136
|
.aura-table__th { position: relative; box-sizing: border-box; display: flex; align-items: center; padding-right: var(--aura-space-2); }
|
|
137
|
+
/* Column sizes come from custom properties set per cell (4.20), so the card layout can override them. */
|
|
138
|
+
.aura-table__th, .aura-table__td { flex: var(--aura-cell-flex, none); width: var(--aura-cell-w, auto); min-width: var(--aura-cell-min, 0); }
|
|
139
|
+
.aura-table__break, .aura-table__sel-text { display: none; }
|
|
137
140
|
.aura-table__th-inner { display: flex; align-items: center; gap: var(--aura-space-1); min-width: 0; width: 100%; }
|
|
138
141
|
.aura-table__th-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
139
142
|
.aura-table__pin-icon { color: var(--aura-fg-secondary); }
|
|
@@ -155,7 +158,7 @@ a.aura-btn { text-decoration: none; }
|
|
|
155
158
|
.aura-table__sel.is-pinned { position: sticky; left: var(--aura-space-6); z-index: 2; }
|
|
156
159
|
|
|
157
160
|
/* Pinned columns */
|
|
158
|
-
.aura-table__th.is-pinned, .aura-table__td.is-pinned { position: sticky; z-index: 2; background: inherit; }
|
|
161
|
+
.aura-table__th.is-pinned, .aura-table__td.is-pinned { position: sticky; left: var(--aura-cell-left, auto); z-index: 2; background: inherit; }
|
|
159
162
|
.aura-table.is-scrolled-x .is-pin-edge { box-shadow: inset -1px 0 0 var(--aura-border-default); }
|
|
160
163
|
|
|
161
164
|
/* Cell focus — the grid's single tab stop moves cell by cell */
|
|
@@ -852,32 +855,11 @@ a.aura-tab { text-decoration: none; }
|
|
|
852
855
|
/* The shell already pads its content: a Container directly inside only caps the width. */
|
|
853
856
|
.aura-shell__content > .aura-container { padding-left: 0; padding-right: 0; }
|
|
854
857
|
|
|
855
|
-
/* ---------- DataTable: stacked cards ---------- */
|
|
856
|
-
.aura-table--stacked { background: transparent; border: 0; border-radius: 0; overflow: visible; }
|
|
857
|
-
.aura-table__stack-bar { display: flex; align-items: center; gap: var(--aura-space-3); padding: 0 var(--aura-space-4) var(--aura-space-3); font-size: 13px; color: var(--aura-fg-secondary); }
|
|
858
|
-
.aura-table__cards { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--aura-space-2); }
|
|
859
|
-
.aura-table__card {
|
|
860
|
-
display: flex; flex-direction: column; gap: var(--aura-space-3); padding: var(--aura-space-4);
|
|
861
|
-
background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); font-size: 13px;
|
|
862
|
-
}
|
|
863
|
-
.aura-table__card.is-selected { background: var(--aura-bg-selected); }
|
|
864
|
-
.aura-table__card.is-actionable { cursor: pointer; }
|
|
865
|
-
.aura-table__card:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: var(--aura-focus-ring-offset); }
|
|
866
|
-
.aura-table__card-head { display: flex; align-items: center; gap: var(--aura-space-3); }
|
|
867
|
-
.aura-table__card-title { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
868
|
-
.aura-table__card-actions { display: inline-flex; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
|
|
869
|
-
.aura-table__card-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--aura-space-2) var(--aura-space-4); margin: 0; }
|
|
870
|
-
.aura-table__card-fields dt { font-family: var(--font-mono); font-size: 11px; color: var(--aura-fg-secondary); }
|
|
871
|
-
.aura-table__card-fields dd { margin: 2px 0 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
|
|
872
|
-
.aura-table__card-fields dd.is-end { text-align: right; font-variant-numeric: tabular-nums; }
|
|
873
|
-
.aura-table__card--total { background: var(--aura-bg-canvas); font-weight: 600; }
|
|
874
858
|
/* Totals row (4.19): under the body, a strong top edge; sticky at the bottom of a `height` table with stickyFooter. */
|
|
875
859
|
.aura-table__total { background: var(--aura-bg-canvas); border-top: 1px solid var(--aura-border-strong); font-weight: 600; }
|
|
876
860
|
.aura-table__total.is-sticky { position: sticky; bottom: 0; z-index: 3; }
|
|
877
861
|
.aura-table__total .aura-table__td.is-end { font-variant-numeric: tabular-nums; }
|
|
878
862
|
.aura-tooltip--above { transform: translateY(-100%); max-width: min(var(--aura-tooltip-max), 90vw); white-space: normal; }
|
|
879
|
-
.aura-table--stacked .aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); }
|
|
880
|
-
.aura-table--stacked .aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
|
|
881
863
|
|
|
882
864
|
/* ---------- Stat ---------- */
|
|
883
865
|
.aura-stat {
|
|
@@ -1340,36 +1322,6 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1340
1322
|
.aura-density { display: contents; }
|
|
1341
1323
|
|
|
1342
1324
|
|
|
1343
|
-
/* DataTable: cards before hydration (4.16). While a stackBelow table hasn't measured itself yet (server HTML, first
|
|
1344
|
-
* client render) it holds both layouts; these container queries show one, so a phone never sees the grid first. */
|
|
1345
|
-
.aura-table-dual { container-type: inline-size; }
|
|
1346
|
-
@container (min-width: 360px) { .aura-table-dual[data-stack-below='360'] > .aura-table--stacked { display: none; } }
|
|
1347
|
-
@container (max-width: 359.98px) { .aura-table-dual[data-stack-below='360'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1348
|
-
@container (min-width: 400px) { .aura-table-dual[data-stack-below='400'] > .aura-table--stacked { display: none; } }
|
|
1349
|
-
@container (max-width: 399.98px) { .aura-table-dual[data-stack-below='400'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1350
|
-
@container (min-width: 480px) { .aura-table-dual[data-stack-below='480'] > .aura-table--stacked { display: none; } }
|
|
1351
|
-
@container (max-width: 479.98px) { .aura-table-dual[data-stack-below='480'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1352
|
-
@container (min-width: 520px) { .aura-table-dual[data-stack-below='520'] > .aura-table--stacked { display: none; } }
|
|
1353
|
-
@container (max-width: 519.98px) { .aura-table-dual[data-stack-below='520'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1354
|
-
@container (min-width: 560px) { .aura-table-dual[data-stack-below='560'] > .aura-table--stacked { display: none; } }
|
|
1355
|
-
@container (max-width: 559.98px) { .aura-table-dual[data-stack-below='560'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1356
|
-
@container (min-width: 600px) { .aura-table-dual[data-stack-below='600'] > .aura-table--stacked { display: none; } }
|
|
1357
|
-
@container (max-width: 599.98px) { .aura-table-dual[data-stack-below='600'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1358
|
-
@container (min-width: 640px) { .aura-table-dual[data-stack-below='640'] > .aura-table--stacked { display: none; } }
|
|
1359
|
-
@container (max-width: 639.98px) { .aura-table-dual[data-stack-below='640'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1360
|
-
@container (min-width: 720px) { .aura-table-dual[data-stack-below='720'] > .aura-table--stacked { display: none; } }
|
|
1361
|
-
@container (max-width: 719.98px) { .aura-table-dual[data-stack-below='720'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1362
|
-
@container (min-width: 768px) { .aura-table-dual[data-stack-below='768'] > .aura-table--stacked { display: none; } }
|
|
1363
|
-
@container (max-width: 767.98px) { .aura-table-dual[data-stack-below='768'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1364
|
-
@container (min-width: 800px) { .aura-table-dual[data-stack-below='800'] > .aura-table--stacked { display: none; } }
|
|
1365
|
-
@container (max-width: 799.98px) { .aura-table-dual[data-stack-below='800'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1366
|
-
@container (min-width: 900px) { .aura-table-dual[data-stack-below='900'] > .aura-table--stacked { display: none; } }
|
|
1367
|
-
@container (max-width: 899.98px) { .aura-table-dual[data-stack-below='900'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1368
|
-
@container (min-width: 960px) { .aura-table-dual[data-stack-below='960'] > .aura-table--stacked { display: none; } }
|
|
1369
|
-
@container (max-width: 959.98px) { .aura-table-dual[data-stack-below='960'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1370
|
-
@container (min-width: 1024px) { .aura-table-dual[data-stack-below='1024'] > .aura-table--stacked { display: none; } }
|
|
1371
|
-
@container (max-width: 1023.98px) { .aura-table-dual[data-stack-below='1024'] > .aura-table:not(.aura-table--stacked) { display: none; } }
|
|
1372
|
-
|
|
1373
1325
|
/* ---------- 4.19: BottomNav ---------- */
|
|
1374
1326
|
/* Fixed to the bottom and padded for the home indicator; the spacer before it holds the same height in the flow.
|
|
1375
1327
|
* Shown below its breakpoint in CSS, so the server's HTML is right before hydration. */
|
|
@@ -1434,4 +1386,99 @@ button.aura-stepper__step:hover .aura-stepper__label { text-decoration: underlin
|
|
|
1434
1386
|
.aura-actionbar.is-idle { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; box-shadow: none; }
|
|
1435
1387
|
.aura-actionbar--container > .aura-actionbar__inner { padding-left: 0; padding-right: 0; }
|
|
1436
1388
|
|
|
1389
|
+
/* ---------- 4.20: Separator ---------- */
|
|
1390
|
+
.aura-separator { flex: none; align-self: stretch; height: 1px; margin: var(--aura-separator-space, 0) 0; background: var(--aura-border-default); border: 0; }
|
|
1391
|
+
.aura-separator--vertical { width: 1px; height: auto; min-height: 1em; margin: 0 var(--aura-separator-space, 0); }
|
|
1392
|
+
|
|
1393
|
+
/* ---------- 4.20: Table (static) ---------- */
|
|
1394
|
+
/* DataTable's grid look — mono header band, hairlines, 20px outer radius — on plain <table> markup, with wrapping text. */
|
|
1395
|
+
.aura-tbl-wrap {
|
|
1396
|
+
overflow-x: auto; border: 1px solid var(--aura-border-default); border-radius: var(--aura-card-radius);
|
|
1397
|
+
background: var(--aura-bg-surface); color: var(--aura-fg-primary); font-family: var(--font-sans);
|
|
1398
|
+
}
|
|
1399
|
+
.aura-tbl { width: 100%; border-collapse: collapse; border-spacing: 0; font-size: 13px; line-height: 20px; }
|
|
1400
|
+
.aura-tbl__caption { caption-side: top; padding: var(--aura-space-4) var(--aura-space-6) 0; text-align: left; font-size: 14px; font-weight: 600; }
|
|
1401
|
+
.aura-tbl__th, .aura-tbl__td { padding: var(--aura-space-3) var(--aura-space-4); text-align: left; vertical-align: top; overflow-wrap: anywhere; }
|
|
1402
|
+
.aura-tbl__th:first-child, .aura-tbl__td:first-child { padding-left: var(--aura-space-6); }
|
|
1403
|
+
.aura-tbl__th:last-child, .aura-tbl__td:last-child { padding-right: var(--aura-space-6); }
|
|
1404
|
+
.aura-tbl__head .aura-tbl__th {
|
|
1405
|
+
background: var(--aura-bg-canvas); border-bottom: 1px solid var(--aura-border-default);
|
|
1406
|
+
font-family: var(--font-mono); font-size: 12px; font-weight: 400; color: var(--aura-fg-secondary); white-space: nowrap;
|
|
1407
|
+
}
|
|
1408
|
+
.aura-tbl__body .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
|
|
1409
|
+
.aura-tbl__body .aura-tbl__th { font-weight: 500; }
|
|
1410
|
+
.aura-tbl__foot > .aura-tbl__row > * { background: var(--aura-bg-canvas); font-weight: 600; }
|
|
1411
|
+
.aura-tbl__foot > .aura-tbl__row:first-child > * { border-top: 1px solid var(--aura-border-strong); }
|
|
1412
|
+
.aura-tbl__foot > .aura-tbl__row + .aura-tbl__row > * { border-top: 1px solid var(--aura-border-default); }
|
|
1413
|
+
.aura-tbl .is-end { text-align: right; }
|
|
1414
|
+
.aura-tbl .is-center { text-align: center; }
|
|
1415
|
+
.aura-tbl .is-numeric { font-variant-numeric: tabular-nums; white-space: nowrap; }
|
|
1416
|
+
.aura-tbl-wrap[data-density='compact'] .aura-tbl__th, .aura-tbl-wrap[data-density='compact'] .aura-tbl__td { padding-top: var(--aura-space-2); padding-bottom: var(--aura-space-2); }
|
|
1417
|
+
.aura-tbl-wrap:focus-visible { outline: var(--aura-focus-ring-width) solid var(--aura-focus-ring); outline-offset: 2px; }
|
|
1418
|
+
|
|
1419
|
+
/* ---------- 4.20: DataTable width queries and cards, one markup ---------- */
|
|
1420
|
+
/* Each .aura-table-q is the table's width × 10000 / its threshold (DataTable.tsx, Q), so `(width < 9999.5px)` is true
|
|
1421
|
+
* exactly when the table is narrower than stackBelow or a hideBelow width — before hydration, at any width. */
|
|
1422
|
+
.aura-table-box { overflow-x: clip; }
|
|
1423
|
+
.aura-table-q { width: calc(100% * var(--aura-q-scale)); container-type: inline-size; }
|
|
1424
|
+
.aura-table-q--stack { container-name: aura-stack; }
|
|
1425
|
+
.aura-table-q--h1 { container-name: aura-h1; }
|
|
1426
|
+
.aura-table-q--h2 { container-name: aura-h2; }
|
|
1427
|
+
.aura-table-q--h3 { container-name: aura-h3; }
|
|
1428
|
+
.aura-table-q .aura-table { width: calc(100% * var(--aura-q-back)); box-sizing: border-box; }
|
|
1429
|
+
@container aura-h1 (width < 9999.5px) { .aura-table { --aura-h1-on: 0; } .aura-table [data-hide='1'] { display: none; } }
|
|
1430
|
+
@container aura-h2 (width < 9999.5px) { .aura-table { --aura-h2-on: 0; } .aura-table [data-hide='2'] { display: none; } }
|
|
1431
|
+
@container aura-h3 (width < 9999.5px) { .aura-table { --aura-h3-on: 0; } .aura-table [data-hide='3'] { display: none; } }
|
|
1432
|
+
|
|
1433
|
+
/* Below stackBelow the same grid lays out as cards: the first column is the title, the first other pill column sits
|
|
1434
|
+
* beside it, `actions` columns go top-right, the rest are label/value fields two to a line. Column headers stay for
|
|
1435
|
+
* screen readers; the labels are generated content with empty alt text, so they aren't read twice. */
|
|
1436
|
+
@container aura-stack (width < 9999.5px) {
|
|
1437
|
+
.aura-table { background: transparent; border: 0; border-radius: 0; overflow: visible; }
|
|
1438
|
+
.aura-table__scroll { overflow: visible; height: auto; }
|
|
1439
|
+
.aura-table__busy-bar { top: 0; }
|
|
1440
|
+
.aura-table__picker { display: none; }
|
|
1441
|
+
.aura-table__head {
|
|
1442
|
+
position: static; height: auto; min-width: 0; padding: 0 0 var(--aura-space-3); border: 0; background: none;
|
|
1443
|
+
font-family: var(--font-sans); font-size: 13px;
|
|
1444
|
+
}
|
|
1445
|
+
.aura-table__head > .aura-table__th {
|
|
1446
|
+
position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
|
|
1447
|
+
}
|
|
1448
|
+
.aura-table__head:not(.has-select-all) { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); }
|
|
1449
|
+
.aura-table__head > .aura-table__sel { position: static; width: auto; gap: var(--aura-space-3); padding: 0 var(--aura-space-4); }
|
|
1450
|
+
.aura-table__sel-text { display: inline; color: var(--aura-fg-secondary); }
|
|
1451
|
+
.aura-table__gutter { display: none; }
|
|
1452
|
+
.aura-table__row, .aura-table__row:last-child {
|
|
1453
|
+
height: auto; min-width: 0; flex-wrap: wrap; align-items: center; gap: var(--aura-space-1) var(--aura-space-4);
|
|
1454
|
+
margin-bottom: var(--aura-space-2); padding: var(--aura-space-4);
|
|
1455
|
+
border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg);
|
|
1456
|
+
}
|
|
1457
|
+
.aura-table__sel, .aura-table__th.is-pinned, .aura-table__td.is-pinned, .aura-table__total.is-sticky { position: static; box-shadow: none; }
|
|
1458
|
+
.aura-table__row > .aura-table__sel { order: 0; width: auto; margin-right: calc(-1 * var(--aura-space-1)); }
|
|
1459
|
+
.aura-table__td {
|
|
1460
|
+
order: 5; flex: 0 0 calc(50% - var(--aura-space-4) / 2); align-self: flex-start; width: auto; min-width: 0; height: auto;
|
|
1461
|
+
margin-bottom: var(--aura-space-1);
|
|
1462
|
+
padding: 0; line-height: normal;
|
|
1463
|
+
}
|
|
1464
|
+
.aura-table__td[data-hide] { display: block; }
|
|
1465
|
+
.aura-table__td[data-label]::before {
|
|
1466
|
+
content: attr(data-label); content: attr(data-label) / '';
|
|
1467
|
+
display: block; margin-bottom: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-align: start;
|
|
1468
|
+
font-family: var(--font-mono); font-size: 11px; line-height: normal; font-weight: 400; color: var(--aura-fg-secondary);
|
|
1469
|
+
}
|
|
1470
|
+
.aura-table__td[data-card='title'], .aura-table__td[data-card='pill'], .aura-table__td[data-card='actions'] { align-self: center; margin-bottom: 0; }
|
|
1471
|
+
.aura-table__td[data-card='title'] { order: 1; flex: 1 1 0; font-size: 14px; font-weight: 600; }
|
|
1472
|
+
.aura-table__td[data-card='pill'] { order: 2; flex: none; }
|
|
1473
|
+
.aura-table__td[data-card='actions'] { order: 3; flex: none; margin: calc(-1 * var(--aura-space-1)) calc(-1 * var(--aura-space-2)) calc(-1 * var(--aura-space-1)) 0; }
|
|
1474
|
+
/* Spacing: 12px under the title line, 8px between field lines (row gap 4 + the break's 4 + each field's 4 below). */
|
|
1475
|
+
.aura-table__break { display: block; order: 4; flex: 0 0 100%; height: var(--aura-space-1); }
|
|
1476
|
+
.aura-table__row:has(> .aura-table__break) { padding-bottom: calc(var(--aura-space-4) - var(--aura-space-1)); }
|
|
1477
|
+
.aura-table__row--skeleton .aura-table__td { display: flex; }
|
|
1478
|
+
.aura-table__total { background: var(--aura-bg-canvas); }
|
|
1479
|
+
.aura-table__total > .is-blank { display: none; }
|
|
1480
|
+
.aura-table__foot { border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); margin-top: var(--aura-space-2); background: var(--aura-bg-surface); }
|
|
1481
|
+
.aura-table__empty { background: var(--aura-bg-surface); border: 1px solid var(--aura-border-default); border-radius: var(--aura-radius-lg); }
|
|
1482
|
+
}
|
|
1483
|
+
|
|
1437
1484
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@jirawatpyk/aura-react",
|
|
3
|
-
"version": "4.
|
|
3
|
+
"version": "4.20.0",
|
|
4
4
|
"description": "AURA Design System — React components (Enterprise Standard, Human Creative). Thai-first: Buddhist-era dates, Thai collation.",
|
|
5
5
|
"license": "MIT",
|
|
6
6
|
"type": "module",
|