@nxgt/material 3.96.2 → 3.97.0

package/docs/components/data-display.md

@@ -1632,8 +1632,9 @@ import { EventChip } from '@nxgt/material/components';
 | `allDay` | `boolean` | `false` | no time |
 | `compact` | `boolean` | `false` | one line, the time before the title, for month cells |
 | `continuesBefore`, `continuesAfter` | `boolean` | `false` | square edges for a multi-day event |
-| `badge` | `{ label: string; tone?: Tone }` | — | a small tinted label after the title (neutral without a `tone`); cut with an ellipsis; in a box under 20px tall or 7rem wide it becomes a tone dot (its tooltip is the label) while the label stays in the chip's accessible name. `EventCalendar` sets it from `CalendarEvent.badge` |
-| `badges` | `{ label: string; tone?: Tone }[]` | — | further badges after `badge`, each with the same pill and tone-dot behaviour and each in the accessible name. `EventCalendar` sets it from `CalendarEvent.badges` |
+| `short` | `boolean` | `false` | the box is too short (under 60px) for title, time and a badge row: the badges join the time's line, as a tone dot under 10rem wide. `EventCalendar` sets it in the week and day views |
+| `badge` | `{ label: string; tone?: Tone }` | — | a small tinted label after the title (neutral without a `tone`); cut with an ellipsis; in a box under 60px tall (`short`) it joins the time's line, and under 10rem wide there it becomes a tone dot; in a box under 20px tall or 7rem wide it is a tone dot too (its tooltip is the label) while the label stays in the chip's accessible name. `EventCalendar` sets it from `CalendarEvent.badge` |
+| `badges` | `{ label: string; tone?: Tone }[]` | — | further badges after `badge`, each with the same time-line placement, pill and tone-dot behaviour and each in the accessible name. `EventCalendar` sets it from `CalendarEvent.badges` |
 | `tone` | `Tone` | — | draws the chip in a tone of the library (or one your app declared) when it sets no `color`; a `color` wins |
 | `cancelled` | `boolean` | `false` | a muted chip with a dashed outline, the title struck through (`<del>`) and "Cancelled" in its accessible name (`material.event-chip.cancelled`, English and French) |
 | `selected`, `disabled` | `boolean` | `false` | state |

package/docs/components/data-table-filter-and-lists.md

@@ -1334,7 +1334,9 @@ a toast takes it, so it is safe to call right after the action settles or the
 dialog closes. For those two frames the focus is claimed back to the trigger
 whatever took it, so a deliberate focus move (Tab, or a dialog or toast opened
 right after the call) within them is overridden: call it once the follow-up UI
-is done. It returns `true` when the button was found and holds the focus,
+is done. The reclaim stops when the component unmounts (a navigation right
+after the call is safe) or when the `focusRef` element is disconnected. It
+returns `true` when the button was found and holds the focus,
 and `false` when the row is gone (archived) or the button cannot take it
 (disabled, inert); the focus then stays where it is.
 

package/docs/components/form-fields.md

@@ -218,6 +218,7 @@ export function PlanForm({ onSave }: { onSave: (values: Values) => void }) {
           control={control}
           name="periods"
           label="Periods"
+          description="One period per term."
           rowLabel="period"
           addLabel="Add period"
           max={6}
@@ -247,6 +248,7 @@ export function PlanForm({ onSave }: { onSave: (values: Values) => void }) {
 | `newRow` | `() => FieldArray<T, N>` | — | the value Add appends |
 | `renderRow` | `(row) => ReactNode` | — | one row's fields; `row` is `{ field, index, position, path }` (`index` 0-based, `position` 1-based, `path` `${name}.${index}`) |
 | `label` | `ReactNode` | — | names the group (the list inside it is not named again) |
+| `description` | `ReactNode` | — | help text under the label; the group's `aria-describedby` points at it (with the group error), so it is announced with the group |
 | `rowLabel` | `string` | `'row'` (translated) | names each row's buttons ("Remove period 2") and the announcements |
 | `addLabel` | `string` | `'Add {rowLabel}'` | the Add button's text |
 | `reorderable` | `boolean` | `false` | move up / move down buttons on each row |
@@ -521,6 +523,7 @@ import { TextareaField } from '@nxgt/material/components';
 | `maxRows` | `number` | — | maximum height in lines, then it scrolls |
 | `maxLength` | `number` | — | shows an `n/max` counter, red when over |
 | `showCount` | `boolean` | `true` when `maxLength` is set | force the counter on or off |
+| `monospace` | `boolean` | `false` | React only; `TextareaFormField` takes it too. Sets the theme's monospace font (`--font-mono`) on the textarea, for code-like plain text such as test input and expected output |
 | `error` | `boolean` | — | error outline and helper colour |
 
 **Emits:** the native `ChangeEvent<HTMLTextAreaElement>`; `TextareaFormField`
@@ -857,11 +860,12 @@ export function Amount() {
 | `currency` | `string` | `'EUR'` | the suffix text; formatting follows the `I18nProvider` language |
 | `trailingAction` | `ReactNode` | — | a button after the currency code, inside the field (`CalculatorField`'s "Open calculator" uses it); it keeps its own name and focus, and the input leaves room for it |
 | `fractionDigits` | `number` | the currency's own | decimals shown once the amount is committed (on blur): ISO 4217 by default — `JPY` 0, `EUR` 2, `KWD` 3 (2 for a code `Intl` does not know). Pass `2` to keep two decimals whatever the currency; the value is clamped to 0–20 (the range every `Intl` accepts), and `NaN` or `Infinity` counts as not given. What is typed is not rounded, on screen until blur nor in the emitted number: a `JPY` field shows `1,235` for `1234.5` and emits `1234.5` |
+| `minorUnits` | `boolean` | `false` | `value`, `defaultValue` and `onChange` are whole minor units (cents, centimes, yen) instead of major units: `<CurrencyField currency="EUR" minorUnits value={1999} />` shows `19.99` and emits `1999`. The decimals are the currency's own (`EUR` 2, `XAF` 0, `KWD` 3), or `fractionDigits` when given, the same rule as `formatAmount`'s `minorUnits` option; an amount typed with more decimals is rounded half away from zero to a whole minor unit (`1.005` emits `101`). Also a prop of `CurrencyFormField`, whose form value is then the integer |
 
-**Emits:** `number | null` — never the formatted string.
+**Emits:** `number | null` (major units, whole minor units with `minorUnits`) — never the formatted string.
 **Form wrapper:** `CurrencyFormField` — `control` and `name`, see
 [forms](../guides/forms.md#the-pair) and [what each field emits](../guides/forms.md#what-each-field-emits).
-**Storybook:** `Form fields/CurrencyField` · **Vue:** `CurrencyField`, `CurrencyFormField`
+**Storybook:** `Form fields/CurrencyField` · **Vue:** `CurrencyField`, `CurrencyFormField` (`minorUnits` is React only for now, #2772)
 
 ---
 

package/docs/components/media-and-files.md

@@ -484,12 +484,12 @@ import { Button, ImageCropper, ImageCropperDialog } from '@nxgt/material/compone
 ```
 
 Parts: `ImageCropper` (inline), `ImageCropperDialog` (the same in a dialog, closed
-after `onCrop`).
+after `onCrop`, or after its promise resolves).
 
 | Prop | Type | Default | Effect |
 | --- | --- | --- | --- |
 | `src` | `string` | — | image to crop (URL or object URL) |
-| `onCrop` | `({ file, area }) => void` | — | receives the cropped `File` and the pixel area |
+| `onCrop` | `({ file, area }) => void \| Promise<void>` | — | receives the cropped `File` and the pixel area. Return a promise (an upload) and Apply stays busy (`aria-busy`, disabled) and Cancel is disabled until it settles; a rejection keeps the crop (and the dialog open) so the user can apply again, and the error is yours to show |
 | `aspect` | `number` | — | fixes the ratio and hides the presets; omitted, the user picks free / 1:1 / 4:3 / 16:9 / 3:4 |
 | `cropShape` | `'rect' \| 'round'` | `'rect'` | round mask for avatars |
 | `fileName` | `string` | — | name of the produced `File` |
@@ -497,6 +497,24 @@ after `onCrop`).
 | `cancelVariant` | `ButtonVariant` | `'tonal'` | `ImageCropper`: the Cancel button's variant; `'ghost'` restores the earlier look |
 | `open` / `onOpenChange` / `trigger` | | — | `ImageCropperDialog`: controlled or trigger-opened |
 
+A rejection from `onCrop` is swallowed: the dialog stays open and Apply is usable
+again, but nothing is shown. Handle the error inside `onCrop` (try/catch, then a
+toast), and rethrow it so the dialog stays open:
+
+```tsx
+<ImageCropperDialog
+  src={src}
+  onCrop={async ({ file }) => {
+    try {
+      await uploadAvatar(file);
+    } catch (error) {
+      toast.error('Upload failed, try again');
+      throw error; // keeps the dialog open
+    }
+  }}
+/>
+```
+
 **Storybook:** `Media & files/ImageCropper` · **Vue:** `ImageCropper`, `ImageCropperDialog`
 
 ---

package/docs/components/rich-widgets.md

@@ -400,7 +400,10 @@ const events: CalendarEvent[] = [
 - **Small boxes.** A long label is cut with an ellipsis inside its chip. In a
   box under 20px tall or 7rem wide (a phone's week column) it falls back to a
   small dot in the badge's tone, with the label as its tooltip; the label stays
-  in the event's accessible name. The agenda view wraps a long description
+  in the event's accessible name. In a week or day box under 60px tall (a
+  one-hour event at the default slot height) the badge sits on the time's line
+  instead of a row of its own, and becomes the dot under 10rem of chip width.
+  The agenda view wraps a long description
   instead of cutting it.
 
 For a status and a priority together, add `badges` (`CalendarEventBadge[]`):
@@ -2828,7 +2831,7 @@ French bundle — see [i18n](../guides/i18n.md).
 | `QuestionCard` `value` / `onValueChange` | `QuestionAnswer` | — | controlled answer |
 | `Question` `kind: 'open'` | `maxLength?` | — | a multi-line answer in a textarea named by the prompt; a counter shows while editable when `maxLength` is set. No `correct`: pass the grader's `verdict` |
 | `Question` `kind: 'code'` | `language?`, `maxLength?` | — | source code: drawn by `renderCode`, else a monospace textarea |
-| `QuestionCard` `renderCode` | `(field: QuestionCodeField) => ReactNode` | — | the code field of a `code` question; `field` is `{ value, onChange, label, labelledBy, describedBy, language, maxLength, readOnly, disabled }`. Keeps Monaco out of the card's bundle |
+| `QuestionCard` `renderCode` | `(field: QuestionCodeField) => ReactNode` | — | the code field of a `code` question; `field` is `{ value, onChange, label, labelledBy, describedBy, language, maxLength, readOnly, disabled, lang }`. Keeps Monaco out of the card's bundle |
 | `Question` `description` | `string` | — | `open`, `code`: a persistent helper line under the answer field ("A person will mark this answer"), linked to it by `aria-describedby` and passed to `renderCode` as `field.describedBy`; always shown, unlike `hint` (a reveal button). Its id is `${promptId}-description` |
 | `QuestionCard` `promptId` | `string` | generated | the id of the prompt text: point a wrapping section's `aria-labelledby` at it (and `aria-describedby` at `${promptId}-description`) |
 | `QuestionCard` `preview` | `boolean` | `false` | an author's preview, `<QuestionCard question={q} preview />`: forces `revealed` and `readOnly`, drops `onValueChange`, and shows the marks (the `question.correct` options marked, the expected text or number filled in) and the `explanation`, with no verdict banner. `verdict` and `showFeedback` are always ignored in a preview; `value` is ignored when the question has a `correct` — an `open` or `code` question has none, so pass its reference answer as `value`. Not for a learner's attempt |
@@ -2840,8 +2843,15 @@ French bundle — see [i18n](../guides/i18n.md).
 | `Question` `references` | `{ title: string; url?: string }[]` | — | a labelled "References" list once revealed or in a `preview`; a safe `url` is a link, an external one with `rel="noopener noreferrer"` |
 | `Question` `kind: 'code'` | `starterCode?`, `examples?: { input, expected }[]` | — | `starterCode` fills the field while there is no draft (`value` null or undefined; an empty string is a draft), it reaches `onValueChange` on the first edit only; `examples` is a table (Input, Expected) above the field |
 | new strings | `material.quiz.rich.*` | — | English fallbacks and a French bundle (React only for now) |
+| `QuestionCard` `contentLang` | `string` | — | the language of the question's content (a BCP 47 tag, `"en"`): sets `lang` on the prompt, the options (and their descriptions), the hints, the explanation, the option explanations, the references, the code examples and the starter code (and `lang` on the `renderCode` field). The card's own strings (hint button, kind and number labels, headings, notes) keep the page's language, which a `lang` on a wrapper around the card would also change. A grader's `feedback` and the typed answer keep the page's language (the code textarea takes the `lang` for the starter code). Without it no `lang` is set. Applies wherever the card renders: the player, a results review (`revealed`, `verdict`) and an author `preview` |
 | `QuestionCard` `variant` / `density` / `showShortcuts` / `number` / `showFeedback` | — | `'card'`, `'comfortable'`, `false`, —, `true` | framed or plain, spacing, key badges, "Question 2", the verdict banner (for a card with marks and no banner, use `preview`) |
 
+An English quiz in a French interface: `contentLang` labels the content only, the card's own strings stay in the page's language (set it only when the content differs from the page; `Quiz` does not forward it):
+
+```tsx
+<QuestionCard question={question} contentLang="en" />
+```
+
 A quiz question with Markdown, math, progressive hints and references:
 
 ```tsx
@@ -2908,7 +2918,7 @@ A server-graded answer, shown as given (no comparison in the browser):
 />
 ```
 
-**Storybook:** `Rich widgets/Quiz`, `Rich widgets/QuestionCard` · **Vue:** `Quiz`, `QuestionCard` (the modes, results, number kind and shortcuts are React only for now, #890)
+**Storybook:** `Rich widgets/Quiz`, `Rich widgets/QuestionCard` · **Vue:** `Quiz`, `QuestionCard` (the modes, results, number kind, shortcuts and `contentLang` are React only for now, #890)
 
 ### QuestionMediaView
 

package/docs/guides/csp.md

@@ -240,7 +240,6 @@ library avoids:
 | --- | --- | --- |
 | `Resizable` (react-resizable-panels) | `insertRule` | on a constructed stylesheet (`adoptedStyleSheets`), which CSP does not govern |
 | `ImageCropper` (react-easy-crop) | `createElement('style')` | the branch is skipped: `disableAutomaticStylesInjection` is passed |
-| `PdfReader` (pdf.js), both readers | the `isEvalSupported` probe, `new Function("")` | unreachable: `PdfReader` passes `isEvalSupported: false`. If you call `pdfjs.getDocument` yourself, pass it too |
 | `MermaidDiagram` (mermaid's lodash-es, cytoscape and parser) | `Function("return this")()` | only when neither `global` nor `self` exists: never in a browser |
 | `InputOTP` (input-otp) | a `<style>` inside `<noscript>` | rendered only with scripts off, where no CSP report is sent |
 

package/docs/guides/event-calendar.md

@@ -100,6 +100,11 @@ A cancelled event strikes its title (`<del>`) and adds "Cancelled" to its
 accessible name, so the state is never carried by style alone. The preview
 shows such an event's title struck and named the same way (and read-only, since
 its title is not an input then). `tone` and
+A short event (under 60px tall, such as one hour at the default slot height) in
+the week and day views draws its badges on the time's line instead of a row of
+its own, and a tone dot under 10rem of chip width; the label stays in the
+accessible name and tooltip.
+
 `badges` work in every view and in `mode="template"`. `EventChip` takes the same
 `tone`, `badges` and `cancelled`.
 
@@ -124,8 +129,8 @@ read-only one leaves out. The preview shows no Edit or Delete button, so
 | View | Spans | Day badge | Week badge | Event tone and cancelled |
 | --- | --- | --- | --- | --- |
 | Month | shades the cell, or its half for a half day; the label shows from 7rem of cell width, with a dot under it | next to the day number | on the first cell of the row, with room below its events | chip tone; struck title, dashed outline |
-| Week / workweek | hatched band under the hours with its label, and a bar in the all-day strip (a half day only the band) | in the day's header | in the gutter corner | block tone; struck title, dashed outline |
-| Day | the same as the week; with `resources`, a span shades its own column | in the day's header | in the gutter corner | the same |
+| Week / workweek | hatched band under the hours with its label, and a bar in the all-day strip (a half day only the band) | in the day's header | in the gutter corner | block tone; struck title, dashed outline; a short block keeps its badge on the time line |
+| Day | the same as the week; with `resources`, a span shades its own column | in the day's header | in the gutter corner | the same, badge on the time line in a short block |
 | Agenda, phone day list | a plain, non-clickable row | in the day's heading | in the week's heading | tone dot; struck title, "Cancelled" in words |
 
 ## weekStartsOn

package/docs/guides/forms.md

@@ -496,7 +496,7 @@ or fails validation.
 | `NumberField` · `NumberFormField` | `number \| null`. `null` when cleared; clamped to `min` / `max` on blur | `null` |
 | `PercentField` · `PercentFormField` | `number \| null`, `min` 0, `max` 100, `step` 1 by default | `null` |
 | `QuantityField` · `QuantityFormField` | `{ value: number \| null, unit: string }`. An error on the field, `.value` or `.unit` shows as one message under the pair | `{ value: null, unit: '' }` |
-| `CurrencyField` · `CurrencyFormField` | `number \| null`, the amount only, not rounded. `currency` (default `'EUR'`) and `fractionDigits` (the currency's own decimals by default) are display | `null` |
+| `CurrencyField` · `CurrencyFormField` | `number \| null`, the amount only, not rounded; with `minorUnits`, a whole number of minor units (`1999` for `19.99` EUR, the digits of the currency or `fractionDigits`). `currency` (default `'EUR'`) and `fractionDigits` (the currency's own decimals by default) are display | `null` |
 | `CalculatorField` · `CalculatorFormField` (`@nxgt/material/calculator-field`) | `number \| null`. `null` when empty; what Apply writes (a currency amount rounded half-up to its decimals, held to `min` / `max`). `onExactValueChange` gets the exact decimal string | `null` |
 | `PhoneField` · `PhoneFormField` | E.164 `string` (`'+33612345678'`), or `null` when empty. `PhoneFormField` reports a non-empty number that is not yet possible as the field error `material.phone-field.incomplete`; `PhoneField` signals it with `onValidityChange`. `defaultCountry` is `'FR'` | `null` |
 | `UrlField` · `UrlFormField` | `string` (as typed) | `''` |

package/docs/guides/i18n.md

@@ -247,7 +247,7 @@ until the bar is drawn), the `ThreadLayout` stepper's `nav` name `material.navig
 single value's input, when nothing names the slider, `material.slider.value`
 ("Value", "Valeur"). `CopyButton` reads `material.copy.copy`, `copied` and `failed` ("Copy", "Copied",
 "Copy failed"). An overflowing `TabsList`'s scroll buttons read
-`material.tabs.scroll-left` / `scroll-right` ("Scroll tabs left" / "Scroll tabs right"). `QuestionCard`'s rich content reads `material.quiz.rich.*` (the hint button and names "Show hint 1 of 3" / "Hint 1 of 3", "About each answer", "References", "Examples" with its Input / Expected headers). The other icon-only buttons are named from it too: the
+`material.tabs.scroll-left` / `scroll-right` ("Scroll tabs left" / "Scroll tabs right"). `QuestionCard`'s own strings follow the UI language while a quiz in another language sets `contentLang` for its content (see the `QuestionCard` table in `components/rich-widgets.md`). Its rich content reads `material.quiz.rich.*` (the hint button and names "Show hint 1 of 3" / "Hint 1 of 3", "About each answer", "References", "Examples" with its Input / Expected headers). The other icon-only buttons are named from it too: the
 `Sidebar` toggle (`material.sidebar.toggle`), the data table's row expander
 (`material.table.labels.toggle-row`) and its header, a hidden "Expand" / "Déplier"
 (`material.table.labels.expand`), its loading status, "Loading data…" /

package/docs/guides/pdf-reader.md

@@ -16,11 +16,22 @@ import { PdfReader } from '@nxgt/material/pdf-reader';
 </div>
 ```
 
+- [Browser support](#browser-support)
 - [Setup](#setup)
 - [Server rendering](#server-rendering)
 - [Content-Security-Policy](#content-security-policy)
 - [Moving from the classic reader](#moving-from-the-classic-reader)
 
+## Browser support
+
+The reader runs on pdf.js 6, which needs Chrome 125, Safari 18 and a current
+Firefox ESR (the target pdf.js 6 keeps; the features it needs are in Firefox
+124 and later): `AbortSignal.any()`, `:dir()`, `light-dark()` and CSS nesting.
+An older browser fails to open the reader, see
+[troubleshooting](../troubleshooting.md#the-pdf-reader-does-not-open-in-an-older-browser).
+The floor is the PDF reader's only; the rest of the library keeps its own. The
+build and the tests of an app that bundles pdf.js need Node 22.13 or later.
+
 ## Setup
 
 The pdf.js **worker** ships with the package as a file, with nothing to copy.
@@ -158,8 +169,8 @@ policy of the response that serves its script). Without it:
   little, text and layout are unaffected.
 
 `'wasm-unsafe-eval'` allows WebAssembly only; it does not allow `eval()` or
-`new Function()`. The reader opens documents with `isEvalSupported: false`, so
-it needs neither. The full policy and the rest of the library:
+`new Function()`. pdf.js 6 no longer probes for `eval`, so the reader needs
+neither. The full policy and the rest of the library:
 [CSP](csp.md).
 
 ## Moving from the classic reader

package/docs/troubleshooting.md

@@ -199,6 +199,7 @@ words in your error.
 - [A chart does not announce a point when I hover it](#a-chart-does-not-announce-a-point-when-i-hover-it)
 - [The server HTML holds a client-render marker (`data-dgst`)](#the-server-html-holds-a-client-render-marker-data-dgst)
 - [The PDF reader is empty in the server HTML, then appears](#the-pdf-reader-is-empty-in-the-server-html-then-appears)
+- [The PDF reader does not open in an older browser](#the-pdf-reader-does-not-open-in-an-older-browser)
 
 **Printing**
 
@@ -3590,6 +3591,12 @@ The marker is `<!--$!--><template data-dgst=""></template><!--/$-->`.
 **Why:** the reader is client-only by design. pdf.js needs the browser, so on the server it leaves only a client-render marker (`<!--$!--><template data-dgst=""></template><!--/$-->`) and React renders it in the browser. This is not a hydration mismatch; see [the client-render marker](#the-server-html-holds-a-client-render-marker-data-dgst).
 **Fix:** nothing to fix. Reserve the reader's height in your layout so the page does not jump when it appears, and do not import `pdfjs-dist` in your own server code. See the [SSR section of the guide](./guides/pdf-reader.md#server-rendering).
 
+### The PDF reader does not open in an older browser
+
+**When:** `PdfReader` (or the PDF viewer) shows its error state, or stays blank, on Chrome older than 125, Safari older than 18, or an old Firefox, with an error such as `AbortSignal.any is not a function` in the console.
+**Why:** pdf.js 6 dropped the older browsers and relies on `AbortSignal.any()`, `:dir()`, `light-dark()` and CSS nesting. Only the PDF reader has this floor; the rest of the library is unchanged.
+**Fix:** ask for Chrome 125, Safari 18 or a current Firefox ESR, or offer a download link next to the reader for older browsers. A build or test run that bundles pdf.js also needs Node 22.13 or later. See [browser support](./guides/pdf-reader.md#browser-support).
+
 ## Printing
 
 ### `RecoveryCodes`' Print button prints the whole page

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@nxgt/material",
-	"version": "3.96.2",
+	"version": "3.97.0",
 	"license": "MIT",
 	"bugs": {
 		"email": "stevegires@gmail.com"
@@ -390,7 +390,7 @@
 		"docs:previews": "rm -rf node_modules/.cache/nxgt-preview-free/missing && NXGT_PREVIEW_FREE=1 vitest run --project previews && bun .storybook/preview-free-report.ts"
 	},
 	"dependencies": {
-		"@nxgt/material-core": "^0.55.0",
+		"@nxgt/material-core": "^0.56.0",
 		"@base-ui/react": "^1.6.0",
 		"@dnd-kit/core": "^6.3.1",
 		"@dnd-kit/sortable": "^10.0.0",
@@ -451,7 +451,7 @@
 		"lucide-react": "^1.26.0",
 		"mermaid": "^12.0.0",
 		"next-themes": "^0.4.6",
-		"pdfjs-dist": "5.4.296",
+		"pdfjs-dist": "6.5.438",
 		"qrcode-generator": "^2.0.4",
 		"radix-ui": "^1.6.5",
 		"react-barcode": "^1.6.1",