@nxgt/material 2.12.0 → 2.14.0

package/docs/troubleshooting.md

@@ -18,6 +18,7 @@ words in your error.
 **Styles & assets**
 
 - [Components render unstyled, with no error](#components-render-unstyled-with-no-error)
+- [Math renders in the system fonts](#math-renders-in-the-system-fonts)
 - [`<Icon>` renders nothing](#icon-renders-nothing)
 - [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)
@@ -140,6 +141,9 @@ words in your error.
 - [A test no longer finds `aria-invalid` on an upload field's group or drop zone](#a-test-no-longer-finds-aria-invalid-on-an-upload-fields-group-or-drop-zone)
 - [A test no longer finds `aria-invalid` on a `CheckboxGroup`](#a-test-no-longer-finds-aria-invalid-on-a-checkboxgroup)
 - [A test no longer finds `aria-invalid` on a `Switch` row or an `Autocomplete`'s chips](#a-test-no-longer-finds-aria-invalid-on-a-switch-row-or-an-autocompletes-chips)
+- [An `Autocomplete` lists more options than before, or "ecole" finds "École"](#an-autocomplete-lists-more-options-than-before-or-ecole-finds-école)
+- [`onQueryChange` runs more often after upgrading](#onquerychange-runs-more-often-after-upgrading)
+- [An older search's results replace the newer ones in an `Autocomplete`](#an-older-searchs-results-replace-the-newer-ones-in-an-autocomplete)
 - [A test no longer finds `aria-invalid` on an `OtpField` slot](#a-test-no-longer-finds-aria-invalid-on-an-otpfield-slot)
 - [A test no longer finds the breadcrumb's home button](#a-test-no-longer-finds-the-breadcrumbs-home-button)
 - [A test no longer finds a sidebar entry by the `button` role](#a-test-no-longer-finds-a-sidebar-entry-by-the-button-role)
@@ -151,6 +155,7 @@ words in your error.
 - [A test no longer finds a calendar day by its number, or by "Today" or "selected"](#a-test-no-longer-finds-a-calendar-day-by-its-number-or-by-today-or-selected)
 - [`#<name>` no longer finds a `SwitchFormField` or `CheckboxFormField`](#name-no-longer-finds-a-switchformfield-or-checkboxformfield)
 - [`#<name>` or `#<option value>` no longer finds a radio or checkbox group or one of its options](#name-or-option-value-no-longer-finds-a-radio-or-checkbox-group-or-one-of-its-options)
+- [One option of a `RadioGroup` cannot be disabled](#one-option-of-a-radiogroup-cannot-be-disabled)
 - [`#<name>` no longer finds a text, OTP, number, date or picker form field, or a second form's field has no name](#name-no-longer-finds-a-text-otp-number-date-or-picker-form-field-or-a-second-forms-field-has-no-name)
 - [A double click or Enter submits a form twice, or a test finds `aria-busy` in an idle `Button`](#a-double-click-or-enter-submits-a-form-twice-or-a-test-finds-aria-busy-in-an-idle-button)
 - [An empty `UploadField` or `TimeField` is no longer tinted](#an-empty-uploadfield-or-timefield-is-no-longer-tinted)
@@ -200,6 +205,14 @@ words in your error.
 - [`onPageChange` reports another page after opening on `initialPage`](#onpagechange-reports-another-page-after-opening-on-initialpage)
 - [`FilePreview` shows a file card with a Download link for a PDF](#filepreview-shows-a-file-card-with-a-download-link-for-a-pdf)
 - [`FilePreview` says "This file could not be previewed."](#filepreview-says-this-file-could-not-be-previewed)
+
+**Content Security Policy**
+
+- [`Refused to apply inline style because it violates the following Content Security Policy directive`](#refused-to-apply-inline-style-because-it-violates-the-following-content-security-policy-directive)
+- [`Refused to load the font 'data:font/woff2…' because it violates the following Content Security Policy directive: "font-src 'self'"`](#refused-to-load-the-font-datafontwoff2-because-it-violates-the-following-content-security-policy-directive-font-src-self)
+- [`Refused to load the font 'https://fonts.gstatic.com/…' because it violates the following Content Security Policy directive: "font-src 'self'"`](#refused-to-load-the-font-httpsfontsgstaticcom-because-it-violates-the-following-content-security-policy-directive-font-src-self)
+- [`Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script`](#refused-to-evaluate-a-string-as-javascript-because-unsafe-eval-is-not-an-allowed-source-of-script)
+
 - [Reporting a bug](#reporting-a-bug)
 
 ---
@@ -368,6 +381,21 @@ first three, on an older version, add the ones you use after it:
 `CodeBlock`'s theme and the other components' CSS have no file you can
 import before 2.2.0: upgrade.
 
+### Math renders in the system fonts
+
+**When:** a formula in `Markdown` (or `ChatMarkdown`) shows in a serif or
+sans-serif system font: letters look upright or thin, `\mathbb{R}` is a
+plain R, large brackets and roots are mis-sized, and the network tab shows a
+`404` for `fonts/katex/KaTeX_*.woff2`, or no request at all.
+**Why:** the compiled stylesheet (`dist/material.css`) loads KaTeX's fonts from
+`dist/fonts/katex/`, through a relative `url()`. The stylesheet was served
+without that folder beside it (copied alone to a public folder or a CDN).
+**Fix:** serve `dist/fonts/` next to the stylesheet, at the same relative
+path, or let your bundler import it through the `style` condition
+(`@import "@nxgt/material";`), which emits the fonts as files (Vite inlines the 3.6 KB `KaTeX_Size3` font unless `assetsInlineLimit` is set: see the CSP guide's KaTeX fonts section). On the Tailwind route
+(`@nxgt/material/styles.css`) the fonts come from `katex` itself, and your bundler
+emits them.
+
 ### `<Icon>` renders nothing
 
 **When:** every `Icon` (and anything that uses one) is blank. The network tab
@@ -2674,6 +2702,60 @@ await expect(page.getByRole('switch', { name: 'Notifications' })).toHaveAttribut
 await expect(page.getByRole('combobox', { name: 'Country' })).toHaveAttribute('aria-invalid', 'true');
 ```
 
+### An `Autocomplete` lists more options than before, or "ecole" finds "École"
+
+**When:** after upgrading to 2.12.0, typing in an `Autocomplete` with local
+`options` keeps options it used to drop: `e` keeps "Évry", `orle` keeps
+"Orléans".
+**Why:** local matching is now accent-insensitive by default (`filter`
+defaults to `'accent-insensitive'`): the label or value and the query are
+both lowercased in the provider's language and stripped of their accents
+before they are compared. Before, an accent had to be typed to match.
+**Fix:** nothing, if that is what your users expect. To match as before,
+pass your own `filter`; to show `options` exactly as you give them (they are
+filtered on your server), pass `filter="none"`:
+
+```tsx
+// Back to a plain case-insensitive match, accents counted:
+<Autocomplete
+	mode="single"
+	options={options}
+	value={value}
+	filter={(option, query) => option.label.toLowerCase().includes(query.toLowerCase())}
+/>
+```
+
+### `onQueryChange` runs more often after upgrading
+
+**When:** after upgrading to 2.12.0, `onQueryChange` is called sooner after the
+user stops typing, so a server you fetch from there gets more requests.
+**Why:** the pause it waits for is now `debounceMs`, 250 ms by default; it
+was a fixed 1 s.
+**Fix:** set the pause you had, `debounceMs={1000}`, or move the fetch to `onSearch`, which
+also aborts the previous request and drops a stale response.
+
+### An older search's results replace the newer ones in an `Autocomplete`
+
+**When:** you fetch `options` yourself from `onQueryChange`, and a slow response
+for an earlier query lands after a faster one for the latest: the list shows
+the results of what the user typed before.
+**Why:** each of your requests resolves whenever the server answers, and
+the last one to resolve wins.
+**Fix:** use `onSearch`. It hands each search an `AbortSignal` (pass it to
+`fetch`), aborts the previous search, and drops any response that lands for
+an older query, even from an API that ignores the signal:
+
+```tsx
+<Autocomplete
+	mode="single"
+	value={value}
+	onValueChange={(next) => setValue(next ?? '')}
+	onSearch={(query, { signal }) =>
+		fetch(`/api/people?q=${encodeURIComponent(query)}`, { signal }).then((r) => r.json())
+	}
+/>
+```
+
 ### A test no longer finds `aria-invalid` on an `OtpField` slot
 
 **When:** `[data-slot="input-otp-slot"][aria-invalid]` (or
@@ -2884,6 +2966,29 @@ await page.locator('#married').getByRole('radio', { name: 'Yes' }).check();
 await page.locator('#married-0').check(); // the first option
 ```
 
+### One option of a `RadioGroup` cannot be disabled
+
+**When:** you need one choice greyed out (a person already linked, a plan the
+account cannot take) and `disabled` on the group disables all of them. Before
+this release the options had no `disabled`, so apps listed the unavailable ones
+apart or hand-built the group from `RadioGroupItem`.
+**Why:** an option was only `{ value, label }`; `disabled` was the group's.
+**Fix:** upgrade, and set `disabled` on the option. It is rendered and
+announced as disabled, its label is muted (still 4.5:1) and the arrow keys
+skip it; the group's own `disabled` still disables every option. An option
+that is disabled while it is the current `value` stays checked, as in the
+Radix and Reka primitives:
+
+```tsx
+<RadioGroup
+  label="Person"
+  options={[
+    { value: 'ada', label: 'Ada' },
+    { value: 'bob', label: 'Bob (already linked)', disabled: true },
+  ]}
+/>
+```
+
 ### `#<name>` no longer finds a text, OTP, number, date or picker form field, or a second form's field has no name
 
 **When:** two forms on one page have a field with the same `name` (a sign-in
@@ -3700,6 +3805,121 @@ beginning is shown, with "Showing the first … of this file." below.
 
 ---
 
+## Content Security Policy
+
+How to set up the policy is in the [Content Security Policy guide](guides/csp.md).
+
+### `Refused to apply inline style because it violates the following Content Security Policy directive`
+
+**When:** a component mounts, or a modal opens, on a page that sends
+`style-src-elem` or `style-src` without `'unsafe-inline'`. The message ends
+with `style-src-elem` for a `<style>` element and `style-src-attr` for a
+`style="…"` attribute.
+**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
+sheets take the nonce from `NonceProvider`, and report this when the app has
+none (or gives it another nonce than the header's). A `<style>` in mermaid's
+SVG is a [known gap](guides/csp.md#known-gaps). `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`.
+**Fix:** for `style-src-attr`, allow attributes: they cannot be nonced.
+
+```http
+Content-Security-Policy: style-src-elem 'self' 'nonce-X'; style-src-attr 'unsafe-inline'
+```
+
+For `style-src-elem`, wrap the app in `NonceProvider`, on the server and on
+the client, with the nonce of the header
+([the guide](guides/csp.md#nonceprovider)):
+
+```tsx
+import { NonceProvider } from '@nxgt/material';
+
+<NonceProvider nonce={nonce}>
+  <App />
+</NonceProvider>;
+```
+
+For a mermaid diagram, serve that route with `'unsafe-inline'` in
+`style-src-elem` instead of the nonce (a nonce in the same directive makes
+browsers ignore `'unsafe-inline'`).
+
+Once a page has a header-delivered CSP, browsers blank the `nonce` attribute, so React's development build may warn of an attribute mismatch when it hydrates a server-rendered `<style nonce>`. The warning is harmless.
+
+### `Refused to load the font 'data:font/woff2…' because it violates the following Content Security Policy directive: "font-src 'self'"`
+
+**When:** a formula renders in `Markdown`, with `font-src 'self'`.
+**Why:** a KaTeX font reached the browser as a `data:` URI. Vite inlines any
+asset under its 4096-byte limit, and `KaTeX_Size3-Regular.woff2` is 3.6 KB:
+on the Tailwind route (`@nxgt/material/styles.css`), and on the compiled route
+when your Vite build processes `dist/material.css`. Earlier versions' compiled
+stylesheet inlined all 60 KaTeX fonts itself; it now ships them as files.
+**Fix:** upgrade, then stop Vite from inlining fonts:
+
+```ts
+// vite.config.ts
+import { defineConfig } from 'vite';
+
+export default defineConfig({
+  build: {
+    assetsInlineLimit: (file) => (/\.(woff2?|ttf)$/.test(file) ? false : undefined),
+  },
+});
+```
+
+### `Refused to load the font 'https://fonts.gstatic.com/…' because it violates the following Content Security Policy directive: "font-src 'self'"`
+
+**When:** the page loads a font from `https://fonts.googleapis.com` or
+`https://fonts.gstatic.com`, or from `rsms.me`, on a page whose `font-src` is
+`'self'` (the message names the font's URL). The stylesheet that declares it
+is refused too, as a `style-src-elem` violation.
+**Why:** the app's `<link>` or `@import` for Inter asks another origin for CSS
+and woff2 files, and the policy allows only your own.
+**Fix:** host the font: install `@fontsource-variable/inter`, import it, and set
+`--font-sans` to `"Inter Variable"` followed by the system stack in the root
+`@theme`. The woff2 files then come from your build
+([CSP guide](guides/csp.md#inter--the-sans-font)):
+
+```css
+@import "@fontsource-variable/inter";
+
+@theme {
+  --font-sans: "Inter Variable", ui-sans-serif, system-ui, sans-serif;
+}
+```
+
+Delete the Google Fonts `<link>`, and the `fonts.googleapis.com` and
+`fonts.gstatic.com` sources you may have added to the policy.
+
+### `Refused to evaluate a string as JavaScript because 'unsafe-eval' is not an allowed source of script`
+
+**When:** an `EvalError` with this message, or a CSP report with
+`effectiveDirective: script-src` and `sample: ''`, from a stack that ends in
+zod (`allowsEval`, in `zod/v4/core/util.js`), on a page whose `script-src`
+has no `'unsafe-eval'`. Nothing visibly breaks.
+**Why:** the first `z.object()` built in the page makes zod test whether
+`new Function` works. The error is caught, but the browser sends the
+violation report. The library builds no schema at import any more (zod is
+not bundled, its schemas are factories), so the report comes from a schema
+built before `z.config({ jitless: true })` ran: one of yours, or the first
+render of a component that validates. Versions that bundled zod built their
+own schemas at import, before the app could configure anything.
+**Fix:** switch zod to its interpreter in a module the app imports before
+anything else, and build your own schemas inside functions rather than at
+module scope when that module may load first
+([CSP guide](guides/csp.md#zod-and-unsafe-eval)):
+
+```ts
+// zod-config.ts, imported first in the app entry
+import { z } from 'zod';
+
+z.config({ jitless: true });
+```
+
+---
+
 ## Reporting a bug
 
 If an error comes from inside this package and none of the entries above

package/lib/components/components.css

@@ -3,10 +3,21 @@
  * styles.css and never dist/material.css, gets it too: only
  * dist/material.css collected a component's own CSS import.
  *
- * PdfReader: react-pdf's text layer (selection, search highlights) and
- * pdf.js's annotation layer (links, notes, form widgets). */
+ * PdfReader: react-pdf's text layer (selection, search highlights),
+ * pdf.js's annotation layer (links, notes, form widgets), and our highlights
+ * and night mode. */
 @import "react-pdf/dist/Page/TextLayer.css";
 @import "react-pdf/dist/Page/AnnotationLayer.css";
+@import "./ui/media/pdf-viewer/pdf-viewer.css";
+/* What sonner (Toaster), vaul (Drawer) and input-otp (InputOTP) would inject
+ * as `<style>` elements at runtime: the build strips those injections
+ * (build/strip-style-injection.ts), so a strict CSP needs no 'unsafe-inline'.
+ * Spinner's variant 4 keyframes, for the same reason. */
+@import "sonner/dist/styles.css";
+@import "./ui/overlays/drawer/vaul-drawer.css";
+@import "./ui/overlays/drawer/vaul-keyframes.css";
+@import "./ui/fields/otp-field/input-otp.css";
+@import "./ui/feedback/spinner/spinner.css";
 /* KaTeX (Markdown), highlight.js (RichTextEditor code blocks),
  * react-easy-crop (ImageCropper), the code theme (CodeBlock), and the few
  * components styled by a stylesheet of their own rather than by classes. */

package/lib/components/ui/feedback/spinner/spinner.css

@@ -0,0 +1,28 @@
+@keyframes spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes spin2 {
+	0% {
+		stroke-dasharray: 1, 800;
+		stroke-dashoffset: 0;
+	}
+	50% {
+		stroke-dasharray: 400, 400;
+		stroke-dashoffset: -200px;
+	}
+	100% {
+		stroke-dasharray: 800, 1;
+		stroke-dashoffset: -800px;
+	}
+}
+
+.spin2 {
+	transform-origin: center;
+	animation:
+		spin2 1.5s ease-in-out infinite,
+		spin 2s linear infinite;
+	animation-direction: alternate;
+}

package/lib/components/ui/fields/otp-field/input-otp.css

@@ -0,0 +1,48 @@
+/* The rules input-otp (React, 1.4.2) and vue-input-otp (0.4.0) add on mount,
+ * through `insertRule` into a `<style id="input-otp-style">`: the hidden
+ * input's caret, selection and autofill stay invisible behind the slots.
+ * Here so a strict CSP blocks nothing. @nxgt/material strips input-otp's
+ * injection at build (build/strip-style-injection.ts); vue-input-otp is
+ * external, still injects, and takes the nonce (NonceProvider). The same file
+ * in both libraries (scripts/shared-paths.ts). */
+/* biome-ignore-all lint/complexity/noImportantStyles: input-otp's own rules */
+[data-input-otp]::selection {
+	background: transparent !important;
+	color: transparent !important;
+}
+
+/* Two rules: a browser that does not know one pseudo-class drops the list. */
+[data-input-otp]:autofill {
+	background: transparent !important;
+	color: transparent !important;
+	border-color: transparent !important;
+	opacity: 0 !important;
+	box-shadow: none !important;
+	-webkit-box-shadow: none !important;
+	-webkit-text-fill-color: transparent !important;
+}
+
+[data-input-otp]:-webkit-autofill {
+	background: transparent !important;
+	color: transparent !important;
+	border-color: transparent !important;
+	opacity: 0 !important;
+	box-shadow: none !important;
+	-webkit-box-shadow: none !important;
+	-webkit-text-fill-color: transparent !important;
+}
+
+@supports (-webkit-touch-callout: none) {
+	[data-input-otp] {
+		letter-spacing: -0.6em !important;
+		font-weight: 100 !important;
+		font-stretch: ultra-condensed;
+		font-optical-sizing: none !important;
+		left: -1px !important;
+		right: 1px !important;
+	}
+}
+
+[data-input-otp] + * {
+	pointer-events: all !important;
+}

package/lib/components/ui/media/pdf-viewer/pdf-viewer.css

@@ -0,0 +1,24 @@
+/* PdfReader's search highlights and night mode. react-pdf's text and
+ * annotation layers are imported from react-pdf by components.css. The same
+ * rules as @nxgt/material-vue's pdf-viewer.css, which also holds its text
+ * layer. */
+
+.pdf-highlight {
+	background: oklch(0.9 0.18 85);
+	color: black;
+	border-radius: 2px;
+}
+
+.pdf-highlight[data-current] {
+	outline: 2px solid var(--color-primary);
+	outline-offset: 1px;
+}
+
+.dark .pdf-highlight {
+	background: oklch(0.75 0.18 85);
+	color: black;
+}
+
+.pdf-night-page {
+	filter: invert(0.9) hue-rotate(180deg);
+}

package/lib/components/ui/overlays/drawer/vaul-drawer.css

@@ -0,0 +1,199 @@
+/*! vaul 1.1.2's stylesheet (MIT, Emil Kowalski), its rules. vaul injects it as a
+ * `<style>` at module load; the library build strips that call
+ * (build/strip-style-injection.ts, which pins the injected text) and ships
+ * it here instead, so a strict CSP needs no 'unsafe-inline'. `vaul/style.css`
+ * is not in vaul's `exports`, hence the copy: update it with vaul.
+ *
+ * Left out: `[data-vaul-handle-hitarea]: { … }` under `(pointer: fine)`, an
+ * invalid selector every browser drops.
+ *
+ * MIT License. Copyright (c) 2023 Emil Kowalski
+ *
+ * Permission is hereby granted, free of charge, to any person obtaining a copy
+ * of this software and associated documentation files (the "Software"), to deal
+ * in the Software without restriction, including without limitation the rights
+ * to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+ * copies of the Software, and to permit persons to whom the Software is
+ * furnished to do so, subject to the following conditions:
+ *
+ * The above copyright notice and this permission notice shall be included in
+ * all copies or substantial portions of the Software.
+ *
+ * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+ * IMPLIED. See vaul's LICENSE.md for the full text.
+ */
+[data-vaul-drawer] {
+	touch-action: none;
+	will-change: transform;
+	transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+	animation-duration: 0.5s;
+	animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="open"] {
+	animation-name: slideFromBottom;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="bottom"][data-state="closed"] {
+	animation-name: slideToBottom;
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="open"] {
+	animation-name: slideFromTop;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="top"][data-state="closed"] {
+	animation-name: slideToTop;
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="open"] {
+	animation-name: slideFromLeft;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="left"][data-state="closed"] {
+	animation-name: slideToLeft;
+}
+
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="open"] {
+	animation-name: slideFromRight;
+}
+[data-vaul-drawer][data-vaul-snap-points="false"][data-vaul-drawer-direction="right"][data-state="closed"] {
+	animation-name: slideToRight;
+}
+
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="bottom"] {
+	transform: translate3d(0, var(--initial-transform, 100%), 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="top"] {
+	transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="left"] {
+	transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-snap-points="true"][data-vaul-drawer-direction="right"] {
+	transform: translate3d(var(--initial-transform, 100%), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="top"] {
+	transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="bottom"] {
+	transform: translate3d(0, var(--snap-point-height, 0), 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="left"] {
+	transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[data-vaul-drawer][data-vaul-delayed-snap-points="true"][data-vaul-drawer-direction="right"] {
+	transform: translate3d(var(--snap-point-height, 0), 0, 0);
+}
+
+[data-vaul-overlay][data-vaul-snap-points="false"] {
+	animation-duration: 0.5s;
+	animation-timing-function: cubic-bezier(0.32, 0.72, 0, 1);
+}
+[data-vaul-overlay][data-vaul-snap-points="false"][data-state="open"] {
+	animation-name: fadeIn;
+}
+[data-vaul-overlay][data-state="closed"] {
+	animation-name: fadeOut;
+}
+
+[data-vaul-animate="false"] {
+	/* biome-ignore lint/complexity/noImportantStyles: vaul's own rule */
+	animation: none !important;
+}
+
+[data-vaul-overlay][data-vaul-snap-points="true"] {
+	opacity: 0;
+	transition: opacity 0.5s cubic-bezier(0.32, 0.72, 0, 1);
+}
+
+[data-vaul-overlay][data-vaul-snap-points="true"] {
+	opacity: 1;
+}
+
+[data-vaul-drawer]:not([data-vaul-custom-container="true"])::after {
+	content: "";
+	position: absolute;
+	background: inherit;
+	background-color: inherit;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction="top"]::after {
+	top: initial;
+	bottom: 100%;
+	left: 0;
+	right: 0;
+	height: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction="bottom"]::after {
+	top: 100%;
+	bottom: initial;
+	left: 0;
+	right: 0;
+	height: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction="left"]::after {
+	left: initial;
+	right: 100%;
+	top: 0;
+	bottom: 0;
+	width: 200%;
+}
+
+[data-vaul-drawer][data-vaul-drawer-direction="right"]::after {
+	left: 100%;
+	right: initial;
+	top: 0;
+	bottom: 0;
+	width: 200%;
+}
+
+[data-vaul-overlay][data-vaul-snap-points="true"]:not(
+	[data-vaul-snap-points-overlay="true"]
+):not([data-state="closed"]) {
+	opacity: 0;
+}
+
+[data-vaul-overlay][data-vaul-snap-points-overlay="true"] {
+	opacity: 1;
+}
+
+[data-vaul-handle] {
+	display: block;
+	position: relative;
+	opacity: 0.7;
+	background: #e2e2e4;
+	margin-left: auto;
+	margin-right: auto;
+	height: 5px;
+	width: 32px;
+	border-radius: 1rem;
+	touch-action: pan-y;
+}
+
+[data-vaul-handle]:active,
+[data-vaul-handle]:hover {
+	opacity: 1;
+}
+
+[data-vaul-handle-hitarea] {
+	position: absolute;
+	left: 50%;
+	top: 50%;
+	transform: translate(-50%, -50%);
+	width: max(100%, 2.75rem); /* 44px */
+	height: max(100%, 2.75rem); /* 44px */
+	touch-action: inherit;
+}
+
+@media (hover: hover) and (pointer: fine) {
+	[data-vaul-drawer] {
+		user-select: none;
+	}
+}