@nxgt/material 3.92.0 → 3.94.0

package/docs/troubleshooting.md

@@ -43,6 +43,7 @@ words in your error.
 - [`IconRefError` from `IconSpritesProvider`](#iconreferror-from-iconspritesprovider)
 - [An accessibility audit reports low contrast on a badge, a button, a toast or a menu entry](#an-accessibility-audit-reports-low-contrast-on-a-badge-a-button-a-toast-or-a-menu-entry)
 - [`ARIA hidden element must not be focusable or contain focusable elements`](#aria-hidden-element-must-not-be-focusable-or-contain-focusable-elements)
+- [An `EntityHeader` metadata test that measured the label beside its value now fails](#an-entityheader-metadata-test-that-measured-the-label-beside-its-value-now-fails)
 - [A control in an `EntityHeader`'s `icon` is hidden from assistive tech, squashed, and reports `aria-hidden-focus`](#a-control-in-an-entityheaders-icon-is-hidden-from-assistive-tech-squashed-and-reports-aria-hidden-focus)
 - [A `Switcher` in link mode leaves focus on the trigger after a navigation, and the new page's title never gets it](#a-switcher-in-link-mode-leaves-focus-on-the-trigger-after-a-navigation-and-the-new-pages-title-never-gets-it)
 - [An accessibility audit reports low contrast on a tonal or outlined button, a selected list tile or a hovered badge link](#an-accessibility-audit-reports-low-contrast-on-a-tonal-or-outlined-button-a-selected-list-tile-or-a-hovered-badge-link)
@@ -1152,6 +1153,21 @@ Elements mounted after the layer opens are not made inert: mount them
 first, or pass them to `inertOthers` in `keep` when they must stay
 reachable.
 
+### An `EntityHeader` metadata test that measured the label beside its value now fails
+
+**When:** after the metadata became a grid, a test reads the label and the value
+of an `EntityHeader` on one line, or measures their positions or heights.
+**Why:** each fact is now a grid cell with the label (`dt`) above its value
+(`dd`), as many columns as the width allows; a link or a text button in a value
+keeps the text's height.
+**Fix:** update the numbers, or assert on the text and on
+`data-slot="entity-metadata"` instead of the geometry.
+
+```tsx
+const meta = container.querySelector('[data-slot="entity-metadata"]');
+expect(meta).toHaveTextContent('Owner');
+```
+
 ### A control in an `EntityHeader`'s `icon` is hidden from assistive tech, squashed, and reports `aria-hidden-focus`
 
 **When:** an `EntityHeader` gets a `Switcher`, a button or a link as its `icon`.
@@ -8086,14 +8102,14 @@ with `style-src-elem` for a `<style>` element and `style-src-attr` for a
 **Why:** a `<style>` element needs the page's nonce, an attribute cannot carry
 one. The usual sources are the components listed in
 [the guide](guides/csp.md#style-elements-the-components-inject).
-`ScrollArea`, `Select`, `RichTextEditor` and the scroll lock of dialogs and
+`ScrollArea`, `Select`, `RichTextEditor`, `Markdown` (math) and the scroll lock of dialogs and
 sheets take the nonce from `NonceProvider`, and report this when the app has
-none (or gives it another nonce than the header's). Mermaid and KaTeX
-need none of this on a client render
+none (or gives it another nonce than the header's). Math needs no
+`style-src-attr` on the server or the client, but needs `NonceProvider` (its
+`mk-` rules are one nonce'd `<style>`)
 ([Markdown under a strict CSP](guides/csp.md#markdown-katex-mermaid-and-code-under-a-strict-csp));
-the two left are a server-rendered page with math (KaTeX's `style` attributes
-need `style-src-attr 'unsafe-inline'`) and the `<style>` cytoscape adds to
-`<head>` for mermaid's mindmap and architecture diagrams.
+the one left is the `<style>` cytoscape adds to `<head>` for mermaid's mindmap
+and architecture diagrams.
 `Toaster`, `Drawer`,
 `InputOTP`, `ImageCropper`, `Spinner` and `PdfReader` create none: their CSS is in the stylesheet, so if one of them looks unstyled, the
 app imports neither `styles.css` nor `dist/material.css`.

package/lib/components/components.css

@@ -216,5 +216,6 @@
 @import "./background-shared.css";
 @import "./ui/layout/app-search/app-search.css"; /* AppSearchBar, SearchView */
 @import "./ui/widgets/drawing/drawing.css"; /* @nxgt/material/draw: role colours, focus ring */
+@import "./ui/widgets/event-calendar/event-calendar-backdrop.css"; /* EventCalendar spans: the hatch and its label */
 @import "./ui/widgets/drawing/drawing-animate.css";
 @import "./ui/widgets/barcode/barcode.css"; /* @nxgt/material/barcode: symbol colours, label sheet */

package/lib/components/ui/widgets/event-calendar/event-calendar-backdrop.css

@@ -0,0 +1,43 @@
+/* EventCalendar spans (holidays, terms, closures): the thin hatch of direction
+ * A Refined, as CSS classes (no inline gradient, so the CSP holds). The
+ * shading is decoration under the events; the label sits on an opaque pill in
+ * the tone's text colour, which keeps it AA on the hatch. The tone comes from
+ * the nearest `data-tone`. */
+@layer components {
+	.nxgt-ec-backdrop {
+		background-image: repeating-linear-gradient(
+			135deg,
+			color-mix(in oklab, var(--nxgt-tone) 42%, transparent) 0 1px,
+			transparent 1px 7px
+		);
+	}
+	.nxgt-ec-backdrop-bar {
+		box-shadow: inset 0 0 0 1px
+			color-mix(in oklab, var(--nxgt-tone) 28%, transparent);
+	}
+	.nxgt-ec-backdrop-label {
+		display: block;
+		width: fit-content;
+		max-width: 100%;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		padding: 2px 6px;
+		border-radius: 4px;
+		border: 1px solid var(--border);
+		background: var(--card);
+		color: var(--nxgt-tone-text);
+		font-size: 11px;
+		font-weight: 500;
+		line-height: 1.2;
+	}
+	.nxgt-ec-backdrop-label-css::before {
+		content: attr(data-label);
+	}
+	.nxgt-ec-backdrop-dot {
+		width: 0.375rem;
+		height: 0.375rem;
+		border-radius: 9999px;
+		background: var(--nxgt-tone);
+	}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.92.0",
+	"version": "3.94.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"