@nxgt/material-vue 0.25.0 → 0.25.2

package/README.md

@@ -45,6 +45,7 @@ lists the React equivalent for each entry.
 - [Guides](#guides)
 - [Components](#components)
 - [Traps](#traps)
+- [Using with Claude Code](#using-with-claude-code)
 - [Documentation](#documentation)
 - [Development](#development)
 - [License](#license)
@@ -76,8 +77,8 @@ stores silently split between two instances.
 
 The tarball ships `dist/`, `docs/`, the stylesheets (`lib/styles.css`, the
 component stylesheets it imports, `lib/components/**/*.css`, and
-`lib/map/map.css`) and the Nuxt module (`lib/nuxt`, with the `lib/vite/index.ts` it imports). There is no
-`postinstall` build.
+`lib/map/map.css`) and the Nuxt module (`lib/nuxt`, with the `lib/vite/index.ts` it imports), and, from the
+release after 0.25.1, `CHANGELOG.md`. There is no `postinstall` build.
 
 ## Setup
 
@@ -587,6 +588,27 @@ The ones that cost the most time. Every error message, with its fix, is in
 | `Cannot find module '…/pdfkit/js/standard-fonts/Helvetica.cjs'` from a Nuxt or Nitro production server | use the Nuxt module, or add pdfkit's font files to `nitro.externals.traceInclude` ([troubleshooting](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/troubleshooting.md#cannot-find-module-pdfkitjsstandard-fontshelveticacjs)) |
 | CSS or a test selecting `[data-variant=destructive]` on a menu item stops matching | menu items render `data-variant="error"`, for `variant="error"` and the deprecated `"destructive"` alike: select `[data-variant=error]` |
 
+## Using with Claude Code
+
+The `nxgt-material-vue` plugin teaches Claude Code to build a Vue or Nuxt app with this
+package. Add the marketplace once, then install the plugin in the app's
+repository:
+
+```
+/plugin marketplace add softistx/nxgt-material
+/plugin install nxgt-material-vue@nxgt-material
+```
+
+The marketplace lives in the `softistx/nxgt-material` GitHub repository,
+which is private: adding it needs a GitHub account with access to it.
+
+| Part | What it does |
+| --- | --- |
+| skill `use-nxgt-material-vue` | picks the component by need, and wires imports, `styles.css` and the tokens, forms, i18n, tests by role and SSR from these docs, read in `node_modules/@nxgt/material-vue/docs/` |
+| agent `vue-screen-builder` | builds a page or a form from the catalogue, with tests by role and name and an accessibility check |
+| agent `vue-upgrade-assistant` | upgrades between two versions: reads the release notes in between, applies the migrations that match, runs the app's typecheck and tests |
+| hook (after Write / Edit) | names the component and its docs page when a file hand-rolls one (a native date input, a home-made dialog or tabs, a paged `<table>`, a file input with a preview). Advisory only; `NXGT_MATERIAL_ADVISOR_DISABLE=1` turns it off |
+
 ## Documentation
 
 - [docs/README.md](https://cdn.jsdelivr.net/npm/@nxgt/material-vue@0/docs/README.md) — every page, and when to read it

package/docs/getting-started.md

@@ -35,8 +35,8 @@ does not import that entry never has them in its tree.
 The tarball contains the built `dist/`, `lib/styles.css`, the component
 stylesheets it imports (`lib/components/**/*.css`), `lib/map/map.css`, the
 Nuxt module (`lib/nuxt`, with the
-`lib/vite/index.ts` it imports) and these docs. There is no `postinstall`
-build step.
+`lib/vite/index.ts` it imports), these docs and `CHANGELOG.md` (from the
+release after 0.25.1). There is no `postinstall` build step.
 
 ## Styles
 

package/docs/roadmap.md

@@ -6,22 +6,7 @@ the version something shipped in.
 
 ## Now
 
-- **TreeSelectField** — pick one or several items from a tree inside a form
-  field, as chips when several, with an optional filter that keeps each match
-  under its ancestors (`TreeSelectField`, `TreeSelectFormField`).
-- **The same options as `@nxgt/material`** — a generic `Autocomplete` and
-  `FilesFormField` typed by your items, a `ConfirmationDialog` that holds a
-  form, date fields that disable chosen days, `SliderField` ticks and
-  leading/trailing content, a presence status on `Avatar`, a logo slot on the
-  QR code, slots on `AccordionCard`, an option slot on `SelectField`, Monaco's
-  own options on `CodeEditor` and a line variant for `Tabs`.
-- **DateRangeField presets and time** — one-click ranges such as Today, Last 7
-  days and This month, or your own, beside the calendar (`presets`), and a time
-  of day on each end of the range (`with-time`), and `min-date` / `max-date`.
-- **FilePreview** — preview a file picked by its type, in one component: an
-  image, a PDF in `PdfReader`, a video or audio file, the text of a text, JSON,
-  CSV or Markdown file, or a card with a download link for anything else
-  (`FilePreview`, `@error`). Safe on a server.
+Nothing in progress right now; see Next.
 
 ## Next
 
@@ -107,6 +92,23 @@ the version something shipped in.
 
 ## Shipped
 
+- **TreeSelectField** — pick one or several items from a tree inside a form
+  field, as chips when several, with an optional filter that keeps each match
+  under its ancestors (`TreeSelectField`, `TreeSelectFormField`). 0.25.0.
+- **The same options as `@nxgt/material`** — a generic `Autocomplete` and
+  `FilesFormField` typed by your items, a `ConfirmationDialog` that holds a
+  form, date fields that disable chosen days, `SliderField` ticks and
+  leading/trailing content, a presence status on `Avatar`, a logo slot on the
+  QR code, slots on `AccordionCard`, an option slot on `SelectField`, Monaco's
+  own options on `CodeEditor` and a line variant for `Tabs`. 0.25.0.
+- **DateRangeField presets and time** — one-click ranges such as Today, Last 7
+  days and This month, or your own, beside the calendar (`presets`), and a time
+  of day on each end of the range (`with-time`), and `min-date` / `max-date`.
+  0.25.0.
+- **FilePreview** — preview a file picked by its type, in one component: an
+  image, a PDF in `PdfReader`, a video or audio file, the text of a text, JSON,
+  CSV or Markdown file, or a card with a download link for anything else
+  (`FilePreview`, `@error`). Safe on a server. 0.25.0.
 - **Spinner `light` colour renders** — a `Spinner` with `color="light"` shows
   its light ring, for loading states on dark or coloured surfaces. 0.24.0.
 - **Range filters announce their field name** — the slider thumbs and the

package/docs/troubleshooting.md

@@ -117,6 +117,7 @@ words in your error.
 - [A form with a required `Switch` no longer submits](#a-form-with-a-required-switch-no-longer-submits)
 - [A `RichTextEditor` became editable after upgrading](#a-richtexteditor-became-editable-after-upgrading)
 - [Focus falls to `<body>` when a controlled `Drawer` closes](#focus-falls-to-body-when-a-controlled-drawer-closes)
+- [A `TimePicker` test expects AM / PM to add 12 hours, or a click on the pressed half to switch to PM](#a-timepicker-test-expects-am--pm-to-add-12-hours-or-a-click-on-the-pressed-half-to-switch-to-pm)
 
 **PDF reader**
 
@@ -2073,6 +2074,33 @@ const opener = useTemplateRef<InstanceType<typeof Button>>('opener');
 </template>
 ```
 
+### A `TimePicker` test expects AM / PM to add 12 hours, or a click on the pressed half to switch to PM
+
+**When:** after upgrading to 0.25.0, a test (or code of yours) around a
+`TimePicker` — or the popover of a `DateField` with `show-time-picker`, a
+`TimeField` or a `DateRangeField` with `with-time`, which hold one — sees a
+different time, or no `change` event, when it clicks AM or PM.
+**Why:** before 0.25.0 the toggle added 12 hours on every PM and took
+`% 12` on AM. A time already in the afternoon went 12 hours further — PM on
+14:00 gave 02:00 the next day — and a click on the half already pressed
+(which Reka reports as no value, unpressing it) was read as PM and did the
+same. The AM / PM shown was also read once, from the first `date`, so a
+`date` changed from outside kept its old half. Now AM / PM follows the `date`
+it is given, switching moves the time into that half and no further (09:30 +
+PM is 21:30, 21:30 + PM stays 21:30, 21:30 + AM is 09:30, on the same day),
+and a click on the pressed half changes nothing and emits no `change`. This
+is the same fix as `@nxgt/material`'s 2.6.0 (`periodOf` / `withPeriod`). The
+hours and minutes inputs are also named "Hours" and "Minutes"
+(`material.time-picker.hours`, `material.time-picker.minutes`).
+**Fix:** expect the time in the half you picked, and no event for a click on
+the pressed half. Find the inputs by their names rather than by position:
+
+```ts
+await userEvent.click(canvas.getByRole('button', { name: 'PM' }));
+expect(onChange).toHaveBeenLastCalledWith(new Date(2026, 0, 1, 21, 30)); // from 09:30
+await userEvent.type(canvas.getByRole('spinbutton', { name: 'Hours' }), '10');
+```
+
 ---
 
 ## PDF reader
@@ -2470,7 +2498,9 @@ own error inside it.
 **When:** a `FilePreview` given a URL, or a file it cannot show, renders that
 message (and `@error` receives the error).
 **Why:** a text, JSON, CSV or Markdown URL is fetched with `fetch`: an HTTP
-error is a `FilePreviewHttpError` with its `status`, and a cross-origin URL
+error is a `FilePreviewHttpError` with its `status`, whose message is
+`Could not read …: HTTP 404` (the URL as you passed it, then the status —
+`Could not read /files/notes.txt: HTTP 404`), and a cross-origin URL
 without CORS headers is a `TypeError: Failed to fetch`. An image, video or
 audio file the browser cannot decode (a corrupt file, a codec the browser
 lacks, a URL that answers an error page) fails in its own element. A URL

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material-vue",
-	"version": "0.25.0",
+	"version": "0.25.2",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -18,6 +18,7 @@
 		"lib/components/**/*.css",
 		"docs",
 		"README.md",
+		"CHANGELOG.md",
 		"package.json"
 	],
 	"exports": {
@@ -118,7 +119,7 @@
 		"docs:previews": "vitest run --project previews"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.3.0",
+		"@nxgt/material-core": "^0.3.2",
 		"@floating-ui/dom": "^1.8.0",
 		"@fortawesome/fontawesome-common-types": "7.3.1",
 		"@lucide/vue": "^1.45.0",