@nxgt/material 3.55.0 → 3.56.0

package/docs/components/feedback-and-status.md

@@ -760,7 +760,9 @@ import { CountdownTimer } from '@nxgt/material/components';
 It ticks on the client only: the server renders the full time. The clock is a
 `role="timer"`; a polite live region speaks only when a threshold is crossed
 ("1:00 left") and when the time is up, never every second. `formatClock` and
-`countdownTone` are exported too.
+`countdownTone` are exported too, and so is the clock itself as the
+[`useCountdown`](../guides/helpers.md#usecountdown) hook (`@nxgt/material/hooks`),
+for a button that waits without a ring.
 
 **Storybook:** `Feedback & status/CountdownTimer` · **Vue:** React only for now (#890)
 
@@ -1210,7 +1212,7 @@ function invite(answer: (id: string, yes: boolean) => void): NotificationItem {
 | `footer` | `ReactNode` | — | under the list: "View all", settings… |
 | `fullScreenOnMobile` | `boolean` | `true` | a phone gets a full-screen sheet instead of the popover |
 | `toastOnArrival` | `boolean` | `false` | shows a toast for each new item (needs a `Toaster`) |
-| `linkComponent` | `LinkComponent` | native `<a>` | renders each row's `href` through your router's link, so a click navigates without a page load: `linkComponent={({ href, ...p }) => <Link to={href} {...p} />}` (spread every prop, as for `AppShell`) |
+| `linkComponent` | `LinkComponent` | native `<a>` | renders each row's `href` through your router's link, so a click navigates without a page load: `linkComponent={({ href, ...p }) => <Link to={href} {...p} />}` (spread every prop, as for `AppShell`). Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 | `error` / `onRetry` | `ReactNode \| boolean` / `() => unknown` | — | the feed could not be read: the list is replaced by an error line (`true` for the default words, a node for your own message) and, with `onRetry`, a Retry button (a returned promise keeps it loading). The empty state is not shown; counts still come from `items` / `count` |
 
 A row is interactive only when a click does something: it has an `href`, or
@@ -1284,7 +1286,7 @@ import { NotificationRow } from '@nxgt/material/components';
 | `createdAt` / `now` | `Date \| string \| number` | — | the time, counted from `now` (the clock when unset) |
 | `unread` | `boolean` | `false` | tint, bold, dot and edge |
 | `href` / `onOpen` | — | — | the row as a link or a button |
-| `linkComponent` | `LinkComponent` | native `<a>` | renders the `href` link through your router's link (`Notifications` passes its own down) |
+| `linkComponent` | `LinkComponent` | native `<a>` | renders the `href` link through your router's link (`Notifications` passes its own down). Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 | `onMarkRead` / `onDismiss` | `() => void` | — | the quick actions (mark read only while unread) |
 | `actions` | `NotificationAction[]` | — | inline buttons; the first is filled, the rest tonal (`emphasis` overrides) |
 | `density` | `'comfortable' \| 'compact'` | `'comfortable'` | spacing, avatar size, one-line description |

package/docs/components/navigation-and-layout.md

@@ -66,7 +66,7 @@ phone's menu sheet pad clear of `env(safe-area-inset-*)`, as classes; see the
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `items` | `MenuItem[]` | — | `label` (already translated), `url`, `icon`, `footer`, `display` (`'icon'`: a round icon-only button, the label as tooltip and name; see the [app shell guide](../guides/app-shell.md)), `badge` (`true` a dot, a number a count up to "99+"), `badgeLabel` (see [Badges](../guides/app-shell.md#badges)) |
-| `linkComponent` | `AppShellLinkComponent` | React Router `Link` | The link each menu entry renders, given `href`; see the [app shell guide](../guides/app-shell.md) |
+| `linkComponent` | `AppShellLinkComponent` | React Router `Link` | The link each menu entry renders, given `href`; see the [app shell guide](../guides/app-shell.md). Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 | `logo`, `name` | `AppLogo` (`ReactNode \| string \| AppLogoImage`, `AppLogoImage` = `{ src, alt? }`), `string` | — | the app's logo alone in the collapsed rail, named by `name` (also its tooltip); logo and name side by side in the phone's menu sheet |
 | `context` | `ReactNode` | — | a line at the top of the phone's menu sheet, above the brand: the current tenant's name; `name` stays the app's brand; `AppHeader` and `AppSidebar` take it too (see the [app shell guide](../guides/app-shell.md#the-brand-logo-and-name)) |
 | `brand` | `ReactNode` | — | replaces the sidebar header, in the rail and the menu sheet; wins over `logo` and `name` |
@@ -148,7 +148,7 @@ import { AccountMenu, ActivityLayout } from '@nxgt/material/components';
 | `secondary` | `ReactNode` | — | a second line under the name, the e-mail say |
 | `src` | `string` | — | the avatar's picture; the initials until it loads, or without one |
 | `items` | `AccountMenuItem[]` | `[]` | `{ label: ReactNode; url: string; icon?: IconName }`: links between the header and Sign out; `label` already translated, `icon` a [Font Awesome](https://fontawesome.com/icons) symbol id of the duotone sprite (see [Icon](primitives.md#icon)) |
-| `linkComponent` | `AppShellLinkComponent` | React Router `Link` | the link each item renders, as in the app shell |
+| `linkComponent` | `AppShellLinkComponent` | React Router `Link` | the link each item renders, as in the app shell. Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 | `onSignOut` | `() => void` | — | Sign out was chosen; the menu stays open, so `signingOut` shows |
 | `signOutLabel` | `ReactNode` | "Sign out" | `material.account-menu.sign-out` |
 | `signingOut` | `boolean` | `false` | Sign out is busy (`aria-busy`, a spinner) and ignores a second selection |
@@ -588,7 +588,7 @@ import { Pager } from '@nxgt/material/components';
 | `previous`, `next` | `{ title; href; description? }` | — | either may be omitted |
 | `shortcuts` | `boolean` | `false` | shows `[` / `]` key hints (the `Doc` shell handles the keys) |
 | `previousLabel`, `nextLabel` | `string` | translated | small labels |
-| `linkComponent` | `ComponentType<{ href; className?; children? }>` | `<a>` | your router's link |
+| `linkComponent` | `ComponentType<{ href; className?; children? }>` | `<a>` | your router's link. Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 
 External `href`s open in a new tab.
 
@@ -617,7 +617,7 @@ import { SeeAlso } from '@nxgt/material/components';
 | --- | --- | --- | --- |
 | `items` | `{ id?; title; href }[]` | — | external links get the outbound icon |
 | `label` | `string` | translated "See also" | heading |
-| `linkComponent` | `ComponentType<{ href; className?; children? }>` | `<a>` | your router's link |
+| `linkComponent` | `ComponentType<{ href; className?; children? }>` | `<a>` | your router's link. Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 
 **Storybook:** `Navigation & layout/SeeAlso` · **Vue:** `SeeAlso`
 

package/docs/components/primitives.md

@@ -28,6 +28,7 @@ other pages are built from these.
 | <img src="../previews/primitives-togglegroup.webp" width="96" alt=""> | [ToggleGroup](#togglegroup) | Connected, segmented or separate toggle group |
 | | [Activity](#activity) | React `<Activity>` switched by a boolean |
 | | [NonceProvider](#nonceprovider) | Gives the page's CSP nonce to every component below |
+| | [LinkComponentProvider](#linkcomponentprovider) | Sets, once, the link component of every component that renders a link |
 
 ## Accordion
 
@@ -960,6 +961,67 @@ import { Activity } from '@nxgt/material/components';
 
 **Storybook:** — · **Vue:** `Activity`
 
+## LinkComponentProvider
+
+No preview: it draws nothing of its own, it hands the app's link component down.
+
+Sets once the link the components below render their links with: `LinkButton`
+(with `IconLinkButton` and `ResponsiveLinkButton`), the sidebar and app shell,
+`AccountMenu`, `Pager`, `SeeAlso`, `Toc`, `PeriodCards`, `NotificationRow`,
+`Doc` (which then skips its `onNavigate`, as for its own `linkComponent`),
+`ListTile`, `DataTable`, `ServerTable`, `PageFooter`, `ListEmpty`, `Switcher`,
+`Notifications`, `Breadcrumb` and `Pagination` links, `LinkCard` (internal addresses only; an external one stays a
+plain `<a>`) and `QuestionNavigator`'s link variant.
+
+Not wired, by design: `ActionCard`'s `titleLink` and `Markdown`'s links are
+elements or content you supply, `SkipLink` and `PaginationBar` are in-page
+(`#`) anchors, `ContactLinks` renders `mailto:` and `tel:` links, and the
+`FileList` and `FilePreview` download links, `EnrolmentSecret`'s `otpauth:`
+link and the editor's action card (`target="_blank"`) are not navigation. A component's own `linkComponent` prop still wins. Without the provider
+and without the prop, each keeps its own default, so nothing changes until you
+render it.
+
+```tsx
+import {
+	LinkComponentProvider,
+	type LinkComponentProps,
+} from '@nxgt/material/components';
+import { Link } from 'react-router';
+
+// Spread every prop onto the element; a function component receives `ref`
+// as a prop in React 19, so spreading forwards it.
+const RouterLink = ({ href, ...props }: LinkComponentProps) => (
+	<Link to={href} {...props} />
+);
+
+<LinkComponentProvider component={RouterLink}>
+	<App />
+</LinkComponentProvider>;
+```
+
+| Prop | Type | Default | Effect |
+| --- | --- | --- | --- |
+| `component` | `LinkComponent` | — | the default link: `ComponentType<LinkComponentProps>`, where `LinkComponentProps` is the anchor's props plus a required `href` |
+
+`LinkComponent` and `LinkComponentProps` are exported from
+`@nxgt/material/components`, and `useLinkComponent(own?)` returns the link a
+component of your own should render (`own`, else the provider's, else
+`undefined`). `LinkButton` and its siblings take a router `to`: with a link
+component they hand it over as `href`, with `target` and `download`;
+`replace`, `state`, `reloadDocument` and `preventScrollReset` belong to React
+Router's `Link` and are not passed. They also take `linkComponent` themselves.
+
+```tsx
+import { useLinkComponent } from '@nxgt/material/components';
+
+function MyCrumb({ href, children }: { href: string; children: string }) {
+	const Link = useLinkComponent() ?? 'a';
+	return <Link href={href}>{children}</Link>;
+}
+```
+
+**Storybook:** — · **Vue:** —
+
 ## NonceProvider
 
 No preview: it draws nothing of its own, it hands the page's Content Security

package/docs/components/rich-widgets.md

@@ -2412,7 +2412,58 @@ French bundle — see [i18n](../guides/i18n.md).
 | `onComplete` | `(result: QuizResult) => void` | — | `{ correct, total, percent, answers, timedOut }`, once per results screen |
 | `onAnswersChange` / `onIndexChange` | callbacks | — | follow progress |
 | `QuestionCard` `revealed` | `boolean` | `false` | marks right / wrong and shows the verdict and `explanation` |
+| `QuestionCard` `verdict` | `'correct' \| 'incorrect' \| 'pending'` | — | the server's verdict, shown as given (word and icon, never colour alone); reveals the card. `question.correct` is optional and only highlights the right choices. Without it, `revealed` compares in the browser as before |
+| `QuestionCard` `points` / `feedback` | `{ awarded, possible }` / `string` | — | points earned and a grader's remark, in the verdict banner (with `verdict`) |
+| `Question` `media` | `{ src, alt?, kind?, type?, name? }` | — | an image (default), audio (`kind: 'audio'` or `type: 'audio/*'`, an `AudioPlayer`) or a document link (any other `type`, a `FilePreview`); `name` (else `alt`) is the text alternative |
 | `QuestionCard` `value` / `onValueChange` | `QuestionAnswer` | — | controlled answer |
 | `QuestionCard` `variant` / `density` / `showShortcuts` / `number` / `showFeedback` | — | `'card'`, `'comfortable'`, `false`, —, `true` | framed or plain, spacing, key badges, "Question 2", the verdict banner |
 
+A server-graded answer, shown as given (no comparison in the browser):
+
+```tsx
+<QuestionCard
+  question={{ id: 'q1', kind: 'text', prompt: 'Explain X' }}
+  value="my answer"
+  verdict="incorrect" // or 'correct' | 'pending'
+  points={{ awarded: 2, possible: 3 }}
+  feedback="Good, but cite a source"
+/>
+```
+
 **Storybook:** `Rich widgets/Quiz`, `Rich widgets/QuestionCard` · **Vue:** `Quiz`, `QuestionCard` (the modes, results, number kind and shortcuts are React only for now, #890)
+
+### QuestionNavigator
+
+The numbered questions of a quiz or exam player: jump to one, see the current
+one and which are answered or flagged. Import it from
+`@nxgt/material/widgets/education`.
+
+```tsx
+<QuestionNavigator
+  count={20}
+  current={3}
+  answered={[1, 2]} // or a Set
+  flagged={[2]}
+  onSelect={(n) => go(n)}
+/>
+// URL-driven player: <QuestionNavigator count={20} current={3} getHref={(n) => `/quiz/${n}`} />
+```
+
+| Prop | Type | Default | Notes |
+| --- | --- | --- | --- |
+| `count` | `number` | — | how many questions |
+| `current` | `number` | — | the current question, **from 1**; gets `aria-current="step"` |
+| `answered` / `flagged` | `number[] \| Set<number>` | — | question numbers, from 1 |
+| `onSelect` | `(n: number) => void` | — | each number is a button |
+| `getHref` | `(n: number) => string` | — | each number is a link; wins over `onSelect`. With neither, the numbers are plain marks |
+| `label` | `string` | `"Questions"` | the navigation's name |
+
+Each target is at least 44 x 44 px. Answered shows a check and flagged a flag,
+and both are named in the accessible label ("Question 2, answered, flagged,
+current"), never by colour alone. With many questions it is **one row that
+scrolls sideways and keeps the current number in view** (rather than a wrapping
+grid): its height stays constant at 20 or 100 questions on a 360px phone, so it
+can sit above the question without pushing it down. Labels live under
+`material.question-navigator.*` (`label`, `item`, `answered`, `unanswered`, `flagged`, `current`).
+
+**Storybook:** `Rich widgets/QuestionNavigator` · **Vue:** not yet (React first, #1948)

package/docs/components/selection-and-choice.md

@@ -1351,7 +1351,7 @@ To put a Switcher at the start of a page header, pass it as [EntityHeader](data-
 | `searchable` | `boolean` | from 8 options (always, expressive) | the search field of the panel; `true` also replaces the menu with the panel |
 | `recent` | `string[]` | — | up to 3 option ids shown as tiles (expressive) |
 | `getHref` | `(item) => string \| undefined` | — | link mode; falls back to `item.href` |
-| `linkComponent` | `LinkComponent` | `<a>` | your router's link: takes `href`, spreads every prop, forwards `ref` |
+| `linkComponent` | `LinkComponent` | `<a>` | your router's link: takes `href`, spreads every prop, forwards `ref`. Defaults to the [`LinkComponentProvider`](./primitives.md#linkcomponentprovider)'s link when one is set. |
 | `footer` | `{ label?, onSelect?, href? }` | — | a "Manage…" button (a link with `href`) at the end of the panel; `label` defaults to `material.switcher.manage` |
 | `emptyLabel` | `ReactNode` | `material.switcher.empty` | shown when the search matches nothing |
 | `sheet` | `boolean` | on a phone | `true` always opens a sheet, `false` never |

package/docs/guides/app-shell.md

@@ -198,7 +198,7 @@ partitionMenu(items);                              // { content, footer }
 | `context` | `ReactNode` | — | A line at the top of the phone's menu sheet, above the brand: the current tenant's name, already translated (see [The brand](#the-brand-logo-and-name)). `name` stays the app's brand; the collapsed rail shows no context |
 | `brand` | `ReactNode` | — | Replaces the sidebar header entirely, in the rail and in the menu sheet; wins over `logo` and `name` |
 | `avatar` | `ReactNode` | — | End of the header. A `string` is used as the image URL of an `Avatar`; anything else is rendered as-is |
-| `linkComponent` | `AppShellLinkComponent` | React Router `Link` | The link each menu entry renders, given `href` (see below) |
+| `linkComponent` | `AppShellLinkComponent` | React Router `Link` | The link each menu entry renders, given `href` (see below). Defaults to the [`LinkComponentProvider`](../components/primitives.md#linkcomponentprovider)'s link when one is set. |
 | `headerTitle` | `ReactNode` | — | The header's leading title: the context the app is in (the active organisation's name), right after the phone's menu button, truncated when long; when it is cut off, its full text is the `title` tooltip (#629) |
 | `titleAfter` | `ReactNode` | — | A node right after the page's title in the app bar, outside its `h1` (a record's `Switcher`); wins over a route's `handle.titleAfter` (see [A slot after the title](#a-slot-after-the-title)) |
 | `headerContext` | `ReactNode` | — | A small muted context line (the tenant's name) after the page's title and its slot, from `md` up: outside the `h1`, truncated, its full text the tooltip once cut off. Not shown on a phone, where the menu sheet's `context` carries it (see [A context line](#a-context-line-after-the-title)) |
@@ -231,7 +231,7 @@ hydration on a server-rendered page, opens in a new tab on middle-click, and
 is announced as a link, named by its label alone ("Identities": the icon beside
 it is decorative); the current page's entry carries `aria-current="page"`.
 By default it is a React Router `Link` (client-side navigation, the router's
-`basename`), so leaving `linkComponent` out never reloads the page. Pass it only
+`basename`), so leaving `linkComponent` out never reloads the page; a [`LinkComponentProvider`](../components/primitives.md#linkcomponentprovider) above the shell sets another default once. Pass it only
 for another router or a custom link: a component taking
 `href`. It must spread **every other prop it receives** onto the element it
 renders (`className`, `aria-current`, the tooltip's handlers, `data-state`) and

package/docs/guides/helpers.md

@@ -137,6 +137,7 @@ Vue: the Redux helpers are Pinia store factories: `defineLocalStore`
 | `useAllowedTransitions(status, transitions, configs)` | Status-machine actions (icon, colour, label, dialog copy) allowed from the current status. |
 | `useFocusOnMount<T>(focus = true)` | A ref whose element takes focus once mounted, and again whenever `focus` turns true: the heading of what replaced the content the user acted on. See [below](#usefocusonmount). |
 | `useScrollAway(ref?, { threshold? })` | True while the reader scrolls down (by `threshold`, 24 px, since the scroll last turned); false scrolling up, at the top or at the end. Folds an extended `Fab`. Without `ref`, the window; false on the server. See [Fab](../components/buttons-and-actions.md#fab). |
+| `useCountdown(duration, { paused?, onExpire?, key? })` | Seconds left of `duration` (the clock `CountdownTimer` draws), for a button or a message that waits: ticks on the client only, `duration` on the server and first render. A new `duration` **or a new `key`** starts over, so the same `retryAfter` twice restarts it. See [below](#usecountdown). |
 | `useSubmitOnce(busy?)` | One submit in flight: wraps a submit handler so a double click or a second Enter is dropped until the request ends (the handler's promise, or `busy` back to false). See [below](#usesubmitonce). |
 | `createSubmitGuard()`, `busySettler(guard)` | The framework-free guard behind `useSubmitOnce` (`@nxgt/material-core/submit-guard`): `{ once(run, { settleSync? }), settle(run?), pendingRun() }`, and the function that settles it from a busy flag. |
 
@@ -204,6 +205,45 @@ export function Sent({ email }: { email: string }) {
 `useFocusOnMount(open)` focuses again whenever `open` turns true, for content
 that stays mounted and is only shown. Storybook: `Guides/Hooks/useFocusOnMount`.
 
+### `useCountdown`
+
+The clock behind [`CountdownTimer`](../components/feedback-and-status.md#countdowntimer),
+without the ring: the seconds left, for a submit button that stays disabled
+while a rate limit (a 429 `retryAfter`) runs out.
+
+```tsx
+import { useState } from 'react';
+import { Button } from '@nxgt/material/components';
+import { useCountdown } from '@nxgt/material/hooks';
+
+export function SignInButton({ signIn }: { signIn: () => Promise<{ retryAfter?: number }> }) {
+  const [wait, setWait] = useState({ seconds: 0, refusals: 0 });
+  const left = useCountdown(wait.seconds, { key: wait.refusals });
+  return (
+    <Button
+      disabled={left > 0}
+      onClick={async () => {
+        const { retryAfter } = await signIn();
+        if (retryAfter) setWait((w) => ({ seconds: retryAfter, refusals: w.refusals + 1 }));
+      }}
+    >
+      {left > 0 ? `Try again in ${Math.ceil(left)} s` : 'Sign in'}
+    </Button>
+  );
+}
+```
+
+| Option | Default | Effect |
+| --- | --- | --- |
+| `paused` | `false` | holds the clock where it is; it carries on from there |
+| `onExpire` | none | called once, when it reaches zero |
+| `key` | none (`string \| number`) | a new value starts the clock over from `duration`, even for the same duration: without it, a second refusal that answers `retryAfter: 30` again would not restart anything |
+
+It returns a number of seconds, fractional (it ticks every 250 ms): use
+`Math.ceil` to show it, `formatClock` (from `@nxgt/material/components`) for
+`m:ss`. The options type is exported as `UseCountdownOptions`. A `duration` of `0` is
+already expired and never calls `onExpire`.
+
 ### `useSubmitOnce`
 
 A disabled or `loading` button only stops clicks once it has rendered, and

package/lib/components/components.css

@@ -138,6 +138,10 @@
 @import "./ui/display/seat-ring/seat-ring.css";
 @import "./ui/display/seat-ring/seat-ring-index.css";
 @import "./ui/display/seat-ring/seat-ring-ring.css";
+/* VoteTally: ranked bars with counts, shares and voters. */
+@import "./ui/display/vote-tally/vote-tally.css";
+/* SecretCard: a face that is not rendered until it is revealed. */
+@import "./ui/display/secret-card/secret-card.css";
 /* Alert and Banner span the row in the form grids (#1497). */
 @import "./ui/feedback/alert/alert.css";
 @import "./ui/display/stat-card/stat-card.css";

package/lib/components/ui/display/secret-card/secret-card.css

@@ -0,0 +1,65 @@
+/* SecretCard: a card whose secret face is not rendered until it is revealed.
+ * It carries `data-tone`, so the tone's tokens resolve on it. The hidden face
+ * is a quiet diagonal pattern in the tone's ring colour. The card's border is
+ * that colour too (set by a utility class on the Card, which wins over the
+ * Card's own). A change flips the face in, never on mount, and only when the person has not asked for reduced motion. The card is
+ * full width up to a reading width and keeps the reveal button a 44px target
+ * on a phone. */
+@layer components {
+	.nxgt-secret-card {
+		width: 100%;
+		max-width: 28rem;
+		margin-inline: auto;
+		--secret-card-line: var(--nxgt-tone-ring, var(--border));
+		border-color: var(--secret-card-line);
+		perspective: 60rem;
+	}
+	.nxgt-secret-card [data-slot="secret-card-title"] {
+		display: flex;
+		align-items: center;
+		gap: 0.5rem;
+		color: var(--nxgt-tone-text, inherit);
+	}
+	.nxgt-secret-card [data-slot="secret-card-pattern"] {
+		min-height: 6rem;
+		border-radius: 0.5rem;
+		border: 1px dashed var(--secret-card-line);
+		background-image: repeating-linear-gradient(
+			45deg,
+			color-mix(in oklab, var(--secret-card-line) 25%, transparent) 0 0.5rem,
+			transparent 0.5rem 1rem
+		);
+	}
+	.nxgt-secret-card [data-slot="secret-card-back"] {
+		min-height: 6rem;
+		display: grid;
+		place-items: center;
+		text-align: center;
+		overflow-wrap: anywhere;
+		font-size: 1.25rem;
+		font-weight: 600;
+		user-select: text;
+	}
+	.nxgt-secret-card [data-slot="secret-card-actions"] {
+		flex-wrap: wrap;
+		gap: 0.5rem;
+	}
+	.nxgt-secret-card [data-slot="secret-card-actions"] > button {
+		min-height: 44px;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.nxgt-secret-card [data-slot="secret-card-face"][data-changed] {
+			animation: nxgt-secret-flip 0.35s ease-out;
+		}
+	}
+	@keyframes nxgt-secret-flip {
+		from {
+			opacity: 0;
+			transform: rotateY(90deg);
+		}
+		to {
+			opacity: 1;
+			transform: rotateY(0);
+		}
+	}
+}

package/lib/components/ui/display/vote-tally/vote-tally.css

@@ -0,0 +1,94 @@
+/* VoteTally: ranked rows, label and "n votes, x%" as text, a decorative bar
+ * beneath. The bar is an SVG whose rect width is an attribute (no `style`,
+ * strict CSP). Leader and tie take the primary fill and a word; the others a
+ * quieter one. Layout is one column at any width: the stat wraps under the
+ * label on a phone, the bar keeps its own line, so counts changing never move
+ * a row. Bars ease only without reduced motion. */
+@layer components {
+	.nxgt-vote-tally {
+		display: flex;
+		flex-direction: column;
+		gap: 0.75rem;
+		min-inline-size: 0;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-list"] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.875rem;
+		margin: 0;
+		padding: 0;
+		list-style: none;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-row"] {
+		display: flex;
+		flex-direction: column;
+		gap: 0.375rem;
+		min-inline-size: 0;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-head"] {
+		display: flex;
+		flex-wrap: wrap;
+		align-items: baseline;
+		justify-content: space-between;
+		column-gap: 0.75rem;
+		row-gap: 0.125rem;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-name"] {
+		display: inline-flex;
+		flex-wrap: wrap;
+		align-items: center;
+		gap: 0.375rem 0.5rem;
+		min-inline-size: 0;
+		font-weight: 500;
+		overflow-wrap: anywhere;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-marks"] {
+		display: inline-flex;
+		flex-wrap: wrap;
+		gap: 0.25rem;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-stat"] {
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+		font-variant-numeric: tabular-nums;
+		white-space: nowrap;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-bar"] {
+		display: block;
+		block-size: 0.625rem;
+		overflow: hidden;
+		border-radius: 9999px;
+		background: var(--muted);
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-bar"] svg {
+		display: block;
+		inline-size: 100%;
+		block-size: 100%;
+	}
+	.nxgt-vote-tally:dir(rtl) [data-slot="vote-tally-bar"] svg {
+		transform: scaleX(-1);
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-fill"] {
+		fill: color-mix(in oklab, var(--muted-foreground) 70%, var(--background));
+	}
+	.nxgt-vote-tally [data-leader] [data-slot="vote-tally-fill"],
+	.nxgt-vote-tally [data-selected] [data-slot="vote-tally-fill"] {
+		fill: var(--primary-indicator, var(--primary));
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-voters"] {
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.8125rem;
+	}
+	.nxgt-vote-tally [data-slot="vote-tally-empty"],
+	.nxgt-vote-tally [data-slot="vote-tally-abstain"] {
+		margin: 0;
+		color: var(--muted-foreground);
+		font-size: 0.875rem;
+	}
+	@media (prefers-reduced-motion: no-preference) {
+		.nxgt-vote-tally[data-animated] [data-slot="vote-tally-fill"] {
+			transition: width 400ms cubic-bezier(0.2, 0, 0, 1);
+		}
+	}
+}

package/package.json

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

package/dist/lib/components/ui/feedback/countdown-timer/use-countdown.d.ts

@@ -1,6 +0,0 @@
-/**
- * Seconds left of `duration`, ticking on the client only (the server and the
- * first render show the full time). Pausing keeps what is left; a new
- * `duration` starts over. `onExpire` runs once, when it reaches zero.
- */
-export declare function useCountdown(duration: number, paused: boolean, onExpire?: () => void): number;