@atelic-action/ui 3.3.0 → 3.3.1

package/README.md

@@ -23,6 +23,7 @@ Every export, grouped by the entry it is imported from. The gallery column links
 | `IconList` | `@atelic-action/ui/components` | A list whose bullets are icons, one for the list or one per item, each in a tone | [#icon-list](https://ui.atelic.me/#icon-list) |
 | `DataTable` | `@atelic-action/ui/components` | A table whose first column names each row, sortable, stacking on a phone | [#data-table](https://ui.atelic.me/#data-table) |
 | `ReportCard` | `@atelic-action/ui/components` | A name, a grade, and a line per row, in labeled groups, each row a link to its section | [#report-card](https://ui.atelic.me/#report-card) |
+| `reportCardLabels`, `ReportCardLabels` | `@atelic-action/ui/components` | The words a screen reader hears around a report card's letters by default, and their type | none |
 | `Rank` | `@atelic-action/ui/components` | A figure with its badge in a tone, for a table cell: a rank, a place in an answer, or a dash | [#rank](https://ui.atelic.me/#rank) |
 | `StatRow` | `@atelic-action/ui/components` | A row of large figures with periods, deltas, and trends | [#stat-row](https://ui.atelic.me/#stat-row) |
 | `Callout` | `@atelic-action/ui/components` | One finding: an icon in its tone, the title, the explainer | [#callout](https://ui.atelic.me/#callout) |

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atelic-action/ui",
-	"version": "3.3.0",
+	"version": "3.3.1",
 	"description": "Shared UI for the Atelic templates: site chrome, base styles, the component library, the access gate, and the app shell they install",
 	"type": "module",
 	"license": "UNLICENSED",

package/src/styles/components.css

@@ -661,11 +661,23 @@
 			grid-column: 4;
 		}
 	}
+	/* A clipping card can defeat a row's break-inside in print engines other
+	   than Chrome, so the card stops clipping there and the first group
+	   label rounds its own top corners instead. A label or a heading never
+	   ends a page alone. */
 	@media print {
 		.atelic-ui .rc-card {
+			overflow: visible;
 			box-shadow: none;
 			border-color: var(--neutral-200);
 		}
+		.atelic-ui .rc-card > .rc-group:first-child {
+			border-radius: calc(var(--radius-md) - 1px) calc(var(--radius-md) - 1px) 0 0;
+		}
+		.atelic-ui .rc-head,
+		.atelic-ui .rc-group {
+			break-after: avoid;
+		}
 		.atelic-ui .rc-row {
 			break-inside: avoid;
 		}