@nxgt/material 3.47.0 → 3.49.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # @nxgt/material
 
+## 3.49.0
+
+### Minor Changes
+
+- [#1820](https://github.com/softistx/nxgt-material/pull/1820) [`22d3dd0`](https://github.com/softistx/nxgt-material/commit/22d3dd018e478e9cc8907697be27a34775a91de3) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `ActionCard` takes `status` (a soft badge line), `meta` (one line, with a tooltip only while it is clipped), a trailing `action` outside the press surface (the title becomes the card's one button, so the card and its action are two tab stops and nothing nests), and `variant="tile"`, a compact grid cell with no minimum width and no indicator by default. Without `action` the DOM is unchanged. With an `action`, `title` is required (the button's text; development builds warn without one and the button is then named after the status and the meta line), the `description` is the button's description, a `role` (`switch`, `checkbox`, `radio`) and its `aria-checked` move to the button instead of the plain root, hover and press answer only the title button, and the meta tooltip follows hover and focus of the card (only Escape dismisses it). A tile's `withIndicator` gets its own column. `RowMenu`'s children (radio and checkbox items) take the text size of its `items`, as their 44px floor already did.
+
+### Patch Changes
+
+- [#1823](https://github.com/softistx/nxgt-material/pull/1823) [`bc5775c`](https://github.com/softistx/nxgt-material/commit/bc5775c7cfb2354616214d21f3318102793b10bd) Thanks [@SteveGT96](https://github.com/SteveGT96)! - New recipe `Guides/Recipes/Status board`: a board of tiles in sections (an `ActionCard` tile with a status badge, the occupant as meta and a menu that changes the status) and an occupancy screen (figures, a table with a rate per section, tiles on a phone), with its code in the `nxgt-material` plugin's `screen-recipes` skill (2.5.0).
+
+## 3.48.0
+
+### Minor Changes
+
+- [#1699](https://github.com/softistx/nxgt-material/pull/1699) [`b878272`](https://github.com/softistx/nxgt-material/commit/b878272974293b2b7887dccac43d6ba5adbcb659) Thanks [@SteveGT96](https://github.com/SteveGT96)! - Filter: a field error's words show under the bar by default ([#1696](https://github.com/softistx/nxgt-material/issues/1696)). Until now a refused field read only "Invalid" on its pill and the message sat in the pill's description and editor, so a refused, empty list showed a red pill and no reason (WCAG 3.3.1, 3.3.3).
+  
+  - The bar (`Filter`, `FilterBar`, `ServerTable`'s `filter`) shows one error `Alert` under it, in the place `formError` uses, with a line per refused field that names it: "Period: choose 366 days or fewer." `formError` comes first when both are set. It is no live region; the bar's one still tells the refusal once.
+  - New prop `errorSummary?: boolean`, default `true`. **This changes what the bar shows by default**: pass `errorSummary={false}` to keep the pills only, as before this release.
+  - In the facets panel, each refused facet already shows its message inline, so its Alert holds `formError` plus the lines of refused fields that have no section (a plain chip, which would read "Invalid" alone), and the live status now reads in the order of the screen: `formError` first, then the fields. The lines are plain text, not buttons that open the editor.
+
+### Patch Changes
+
+- [#1818](https://github.com/softistx/nxgt-material/pull/1818) [`2b02261`](https://github.com/softistx/nxgt-material/commit/2b022614887e625eb18b728a4ccf0a8c6cc3ea3a) Thanks [@SteveGT96](https://github.com/SteveGT96)! - `OpeningHours` and `OpeningHoursSummary` use the shared `@nxgt/material-core/zone` helpers. An unknown `timeZone` now falls back to UTC like `DateField`, instead of the viewer's clock, so "open now" agrees with the date fields for the same zone string.
+
 ## 3.47.0
 
 ### Minor Changes

package/README.md

@@ -518,7 +518,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-loadmorebutton.webp" width="120" alt="LoadMoreButton"> | [`LoadMoreButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#loadmorebutton) | "Load more" button for cursor pagination; icon-only with a tooltip unless `expanded`. | `LoadMoreButton` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltotop.webp" width="120" alt="ScrollToTop"> | [`ScrollToTop`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltotop) | Floating button that appears past a scroll threshold. | `ScrollToTop` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-scrolltolatestbutton.webp" width="120" alt="ScrollToLatestButton"> | [`ScrollToLatestButton`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#scrolltolatestbutton) | "Jump to latest" over a scroll box: an arrow that widens into "3 new messages". | — |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator. | `ActionCard` |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-actioncard.webp" width="120" alt="ActionCard"> | [`ActionCard`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#actioncard) | Clickable card (a `role="button"` with `aria-pressed`) with a shape icon that morphs when chosen, title, description and active indicator; `status`, `meta`, a trailing `action` (a `RowMenu`) and `variant="tile"` make a compact cell for status boards. | `ActionCard` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-themetoggle.webp" width="120" alt="ThemeToggle"> | [`ThemeToggle`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#themetoggle) | Light / dark / system switch that stores and applies the choice. | `ThemeToggle` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/buttons-actions-languageswitcher.webp" width="120" alt="LanguageSwitcher"> | [`LanguageSwitcher`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/buttons-and-actions.md#languageswitcher) | Globe button with a menu of the `I18nProvider` languages. | `LanguageSwitcher` |
 
@@ -642,7 +642,7 @@ Not components: what the stylesheet gives any element.
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-pagefooter.webp" width="120" alt="PageFooter"> | [`PageFooter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#pagefooter) | The page footer of a feed that is not a table (a list of cards, a news feed) under a `FilterBar`: the range ("21–40 of 134") and Previous / Next as real links built from the URL's cursor trail (`pageInfo`, `totalCount`, `params`; `totalCount` is optional: a feed with no total shows no range, only Previous / Next), the same footer `ServerTable` draws, icon-only with `pageControls="icon"` (44px targets on a touch screen); an end with no page is a disabled button, `aria-disabled`. | `PageFooter` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-datagrid.webp" width="120" alt="DataGrid"> | [`DataGrid`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#datagrid) | An editable grid over `DataTable`'s columns: spreadsheet keys, a selected range, editors for text, numbers (with codes such as "abs"), options, dates and checkboxes, or your own; paste from Excel or Sheets, a fill handle that continues series, resizable, hideable and reorderable columns, undo, totals, and saving per cell, per row or in a batch with versions and conflicts ([guide](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/guides/data-grid.md)). Long grids render only what is in view; on a phone it is a list of rows that open a panel. | — (later) |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-daygroupedlist.webp" width="120" alt="DayGroupedList"> | [`DayGroupedList`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#daygroupedlist), `groupByDay` | A list split by day — Today, Yesterday, This week, Earlier — under headings that stick while their items scroll. | — (later) |
-| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#filter), `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterSheetTrigger`, `FilterBar`, `useFilterUrlQuery` · `FilterFormField` | Schema-driven filters with chips, presets, validation, and URL or storage persistence, and a query-driven `variant="bar"` / `"facets"` (quick filters, locked conditions, a phone sheet, a URL codec for a loader; `bandDensity="compact"` as on `ServerTable`), and `FilterBar`, the same bar bound to the URL for a feed or list without a table (`useFilterUrlQuery` is its hook, also `ServerTable`'s), a field `default` shown as an uncounted hint chip (a button that opens the editor on the default), a pressed toggle or checked values with a "Default" word (`defaults` prop), a `scope` field as a leading pill kept by "Clear all", a server refusal shown on the chip (`errors`), on the search box (`searchError`) or as an Alert under the bar (`formError`) and a model with `search: false`; the filter bar's "Filters (N)" (`FilterSheetTrigger`) can be placed inside a `ServerTable` (its actions). | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterSheetTrigger`, `FilterFormField`; `FilterBar`, `useFilterUrlQuery`: — (later, #1569) |
+| <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-filter.webp" width="120" alt="Filter"> | [`Filter`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#filter), `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterSheetTrigger`, `FilterBar`, `useFilterUrlQuery` · `FilterFormField` | Schema-driven filters with chips, presets, validation, and URL or storage persistence, and a query-driven `variant="bar"` / `"facets"` (quick filters, locked conditions, a phone sheet, a URL codec for a loader; `bandDensity="compact"` as on `ServerTable`), and `FilterBar`, the same bar bound to the URL for a feed or list without a table (`useFilterUrlQuery` is its hook, also `ServerTable`'s), a field `default` shown as an uncounted hint chip (a button that opens the editor on the default), a pressed toggle or checked values with a "Default" word (`defaults` prop), a `scope` field as a leading pill kept by "Clear all", a server refusal shown on the chip (`errors`, its words in the Alert under the bar unless `errorSummary={false}`), on the search box (`searchError`) or as an Alert under the bar (`formError`) and a model with `search: false`; the filter bar's "Filters (N)" (`FilterSheetTrigger`) can be placed inside a `ServerTable` (its actions). | `Filter`, `FilterProvider`, `FilterContent`, `FilterChips`, `FilterPresets`, `FilterSheetTrigger`, `FilterFormField`; `FilterBar`, `useFilterUrlQuery`: — (later, #1569) |
 | — | [`FilterInline`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#filterinline-filterpopover-filterdialog-filtersheet-filterdrawer), `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` | The filter panel shown inline, or in a popover, dialog, sheet or drawer. | `FilterInline`, `FilterPopover`, `FilterDialog`, `FilterSheet`, `FilterDrawer` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-facetgroup.webp" width="120" alt="FacetGroup"> | [`FacetGroup`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#facetgroup) | A collapsible facet: a header button with the title, a count Badge of the active values, Clear and a chevron, over the values (typically a `CheckboxGroup` with counts). | `FacetGroup` |
 | <img src="https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/previews/data-table-filter-lists-pagination.webp" width="120" alt="Pagination"> | [`Pagination`](https://cdn.jsdelivr.net/npm/@nxgt/material@3/docs/components/data-table-filter-and-lists.md#pagination), `PaginationContent`, `PaginationItem`, `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems`… | Pagination primitives, with first / last links. `PaginationBar` adds a sibling window with ellipses. | `Pagination` (parts), `PaginationFirst`, `PaginationLast`, `PaginationLink`, `PaginationBar`, `paginationItems` |
@@ -805,7 +805,7 @@ which is private: adding it needs a GitHub account with access to it.
 | --- | --- |
 | skill `use-nxgt-material` | an index that picks the component by need and wires imports and `styles.css`; its references cover the tokens and themes, forms, i18n, tests by role, SSR and the other subpaths, read from these docs in `node_modules/@nxgt/material/docs/` |
 | skill `design-screens` | the library's visual language for a screen (hierarchy, rhythm, tones, surfaces, states, phone, dark, motion) and an 11-criteria grid to score a screen out of 5 |
-| skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings), each the code of a tested `Guides/Recipes/<Name>` story |
+| skill `screen-recipes` | whole screens to start from (a home dashboard, a list with a detail sheet, forms and dialogs, tables and settings, a dense record page, a status board and an occupancy board), each the code of a tested `Guides/Recipes/<Name>` story |
 | agent `screen-builder` | builds a page or a form from the catalogue, with tests by role and name and an accessibility check, then looks at 360 and 1440 px screenshots in light and dark and fixes until the grid reads 4 everywhere |
 | agent `design-reviewer` | read-only: scores a screen's screenshots on the same 11 criteria and returns the fixes ranked, each with the component and prop |
 | skill `build-a-theme` + agent `theme-builder` | the app's own theme with `defineTheme`: seeds, tones, background and icon motif, generation, provider and picker; checks the AA contrast of the generated tokens in light and dark and looks at key screens |

package/dist/{button-yaltbQmC.js → button-DJgaQbBD.js}

@@ -1,9 +1,9 @@
 import { t as e } from "./utils-BLfntITJ.js";
-import { n as t, t as n } from "./dist-DVRQkaTK.js";
-import { o as r, t as i } from "./tooltip-CkttDIab.js";
-import { t as a } from "./is-production-GLw59WU8.js";
-import { t as o } from "./spinner-C4CgDEYm.js";
-import { a as s, i as c, r as l, t as u } from "./button-tones-BwuVvAmd.js";
+import { t } from "./is-production-GLw59WU8.js";
+import { n, t as r } from "./dist-DVRQkaTK.js";
+import { n as i, t as a } from "./dist-B61_o9Mg.js";
+import { a as o, i as s, r as c, t as l } from "./button-tones-BwuVvAmd.js";
+import { t as u } from "./spinner-BhuZuHK1.js";
 import { t as d } from "./button-group-context-CaP0X5p_.js";
 import { t as f } from "./has-text-content-Ds2dkHX_.js";
 import { Children as p, Fragment as m, cloneElement as h, isValidElement as g, useCallback as _, useContext as v, useEffect as y, useRef as b, useState as x } from "react";
@@ -59,42 +59,42 @@ var T = [
 	{
 		variant: "tonal",
 		color: "primary",
-		class: `${l.primary} ${u.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${c.primary} ${l.primary} bg-primary/15 hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "tonal",
 		color: "secondary",
-		class: `${l.secondary} ${u.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${c.secondary} ${l.secondary} bg-secondary/15 hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "tonal",
 		color: "info",
-		class: `${l.info} ${u.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${c.info} ${l.info} bg-info/15 hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "tonal",
 		color: "success",
-		class: `${l.success} ${u.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${c.success} ${l.success} bg-success/15 hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "tonal",
 		color: "warning",
-		class: `${l.warning} ${u.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${c.warning} ${l.warning} bg-warning/15 hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "tonal",
 		color: "error",
-		class: `${l.error} ${u.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${c.error} ${l.error} bg-error/15 hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "tonal",
 		color: "default",
-		class: `${l.default} ${u.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
+		class: `${c.default} ${l.default} bg-foreground/15 hover:bg-foreground/10 active:bg-muted focus:bg-muted`
 	},
 	{
 		variant: "ghost",
 		color: "primary",
-		class: `${l.primary} ${u.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${c.primary} ${l.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "ghost",
@@ -104,99 +104,99 @@ var T = [
 	{
 		variant: "ghost",
 		color: "secondary",
-		class: `${l.secondary} ${u.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${c.secondary} ${l.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "ghost",
 		color: "success",
-		class: `${l.success} ${u.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${c.success} ${l.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "ghost",
 		color: "info",
-		class: `${l.info} ${u.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${c.info} ${l.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "ghost",
 		color: "warning",
-		class: `${l.warning} ${u.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${c.warning} ${l.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "ghost",
 		color: "error",
-		class: `${l.error} ${u.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${c.error} ${l.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "outlined",
 		color: "primary",
-		class: `${l.primary} ${u.primary} focus:bg-primary/10 hover:bg-primary/10`
+		class: `${c.primary} ${l.primary} focus:bg-primary/10 hover:bg-primary/10`
 	},
 	{
 		variant: "outlined",
 		color: "secondary",
-		class: `${l.secondary} ${u.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
+		class: `${c.secondary} ${l.secondary} focus:bg-secondary/10 hover:bg-secondary/10`
 	},
 	{
 		variant: "outlined",
 		color: "info",
-		class: `${l.info} ${u.info} focus:bg-info/10 hover:bg-info/10`
+		class: `${c.info} ${l.info} focus:bg-info/10 hover:bg-info/10`
 	},
 	{
 		variant: "outlined",
 		color: "success",
-		class: `${l.success} ${u.success} focus:bg-success/10 hover:bg-success/10`
+		class: `${c.success} ${l.success} focus:bg-success/10 hover:bg-success/10`
 	},
 	{
 		variant: "outlined",
 		color: "warning",
-		class: `${l.warning} ${u.warning} focus:bg-warning/10 hover:bg-warning/10`
+		class: `${c.warning} ${l.warning} focus:bg-warning/10 hover:bg-warning/10`
 	},
 	{
 		variant: "outlined",
 		color: "error",
-		class: `${l.error} ${u.error} focus:bg-error/10 hover:bg-error/10`
+		class: `${c.error} ${l.error} focus:bg-error/10 hover:bg-error/10`
 	},
 	{
 		variant: "outlined",
 		color: "default",
-		class: `${l.default} ${u.default} focus:bg-foreground/10 hover:bg-foreground/10`
+		class: `${c.default} ${l.default} focus:bg-foreground/10 hover:bg-foreground/10`
 	},
 	{
 		variant: "link",
 		color: "primary",
-		class: `${l.primary} ${u.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
+		class: `${c.primary} ${l.primary} hover:bg-primary/10 active:bg-primary/5 focus:bg-primary/10`
 	},
 	{
 		variant: "link",
 		color: "secondary",
-		class: `${l.secondary} ${u.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
+		class: `${c.secondary} ${l.secondary} hover:bg-secondary/10 active:bg-secondary/5 focus:bg-secondary/10`
 	},
 	{
 		variant: "link",
 		color: "success",
-		class: `${l.success} ${u.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
+		class: `${c.success} ${l.success} hover:bg-success/10 active:bg-success/5 focus:bg-success/10`
 	},
 	{
 		variant: "link",
 		color: "info",
-		class: `${l.info} ${u.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
+		class: `${c.info} ${l.info} hover:bg-info/10 active:bg-info/5 focus:bg-info/10`
 	},
 	{
 		variant: "link",
 		color: "warning",
-		class: `${l.warning} ${u.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
+		class: `${c.warning} ${l.warning} hover:bg-warning/10 active:bg-warning/5 focus:bg-warning/10`
 	},
 	{
 		variant: "link",
 		color: "error",
-		class: `${l.error} ${u.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
+		class: `${c.error} ${l.error} hover:bg-error/10 active:bg-error/5 focus:bg-error/10`
 	},
 	{
 		variant: "link",
 		color: "default",
-		class: `${l.default} ${u.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
+		class: `${c.default} ${l.default} hover:bg-foreground/10 active:bg-muted focus:bg-foreground/10`
 	}
-], E = r("nxgt-btn nxgt-morph-fill inline-flex center gap-[var(--btn-gap,0.5rem)] h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
+], E = a("nxgt-btn nxgt-morph-fill inline-flex center gap-[var(--btn-gap,0.5rem)] h-min cursor-pointer whitespace-nowrap disabled:pointer-events-none aria-busy:cursor-progress [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-[var(--btn-ic,1rem)] shrink-0 [&_svg]:shrink-0 aria-invalid:[--btn-focus:var(--color-error)] aria-invalid:[--btn-line:var(--color-error)] px-[calc(var(--btn-px,1rem)+var(--btn-dx,0px))] py-2 has-[>svg]:px-[calc(var(--btn-px,1rem)-var(--btn-pxi,0.25rem)+var(--btn-dx,0px))]", {
 	variants: {
 		variant: {
 			filled: "",
@@ -205,7 +205,7 @@ var T = [
 			outlined: "shadow-[inset_0_0_0_1.5px_color-mix(in_oklab,var(--btn-line,currentColor)_55%,transparent)]",
 			link: "nxgt-btn-bare focus:underline underline-offset-4 hover:underline"
 		},
-		color: c,
+		color: s,
 		size: {
 			xs: "h-(--btn-h) [--btn-h:24px] [--btn-px:12px] [--btn-pxi:4px] [--btn-gap:4px] [--btn-ic:14px] [--btn-sq:6px] [--btn-fs:var(--text-label-md)] [--btn-lh:var(--text-label-md--line-height)] [--btn-ls:var(--text-label-md--letter-spacing)] [--btn-fw:560]",
 			sm: "h-(--btn-h) [--btn-h:32px] [--btn-px:16px] [--btn-pxi:4px] [--btn-gap:6px] [--btn-ic:16px] [--btn-sq:8px] [--btn-fs:var(--text-label-lg)] [--btn-lh:var(--text-label-lg--line-height)] [--btn-ls:var(--text-label-lg--letter-spacing)] [--btn-fw:580]",
@@ -282,38 +282,38 @@ function N(e, t) {
 }
 //#endregion
 //#region lib/components/ui/actions/button/button.tsx
-function P({ className: r, variant: i = "filled", asChild: c = !1, children: l, color: u, size: p, loading: m = !1, lockOnClick: h, spinnerVariant: g = "2", wrap: _, shape: b, selected: x, disabled: T, onClickCapture: E, type: O = "button", ...j }) {
-	let M = c ? n : "button", P = v(d), F = p ?? P, I = c && x !== void 0;
+function P({ className: i, variant: a = "filled", asChild: s = !1, children: c, color: l, size: p, loading: m = !1, lockOnClick: h, spinnerVariant: g = "2", wrap: _, shape: b, selected: x, disabled: T, onClickCapture: E, type: O = "button", ...j }) {
+	let M = s ? r : "button", P = v(d), F = p ?? P, I = s && x !== void 0;
 	y(() => {
-		I && !a() && console.warn("Button: `selected` is ignored with `asChild`; set aria-pressed on the child element.");
+		I && !t() && console.warn("Button: `selected` is ignored with `asChild`; set aria-pressed on the child element.");
 	}, [I]);
-	let L = !c && x !== void 0, R = v(s) || !!(j["aria-label"] || j["aria-labelledby"]) || f(l), z = N(h, m), B = m || z.locked, V = w(B, z, E);
-	return /* @__PURE__ */ S(s, {
+	let L = !s && x !== void 0, R = v(o) || !!(j["aria-label"] || j["aria-labelledby"]) || f(c), z = N(h, m), B = m || z.locked, V = w(B, z, E);
+	return /* @__PURE__ */ S(o, {
 		value: R,
 		children: /* @__PURE__ */ C(M, {
 			"data-slot": "button",
-			"data-variant": i,
-			"data-color": u,
+			"data-variant": a,
+			"data-color": l,
 			"data-size": F,
 			"data-shape": b,
 			"data-selected": L && x ? "true" : void 0,
-			className: e("w-fit max-w-full min-w-0 justify-center", c && "nxgt-btn-as-child overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:22px]", D({
-				variant: i,
-				color: u,
+			className: e("w-fit max-w-full min-w-0 justify-center", s && "nxgt-btn-as-child overflow-clip text-ellipsis whitespace-nowrap [overflow-clip-margin:22px]", D({
+				variant: a,
+				color: l,
 				size: F
-			}), k(_, F), r),
-			type: c ? void 0 : O,
+			}), k(_, F), i),
+			type: s ? void 0 : O,
 			disabled: T,
 			...j,
 			"aria-disabled": B || j["aria-disabled"],
 			"aria-busy": B || j["aria-busy"],
 			"aria-pressed": L ? x : j["aria-pressed"],
 			onClickCapture: V,
-			children: [B && /* @__PURE__ */ S(o, {
+			children: [B && /* @__PURE__ */ S(u, {
 				variant: g,
-				color: i === "filled" ? "light" : u,
+				color: a === "filled" ? "light" : l,
 				className: e("starting:scale-0 duration-500", g === "4" ? "size-7.5" : "size-4.5")
-			}), /* @__PURE__ */ S(t, { children: c ? l : A(l) })]
+			}), /* @__PURE__ */ S(n, { children: s ? c : A(c) })]
 		})
 	});
 }