@nxgt/material 2.13.0 → 2.15.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)
@@ -122,6 +123,7 @@ words in your error.
 - [A test that finds a chip by `aria-selected` or `getByRole('option')` no longer finds it](#a-test-that-finds-a-chip-by-aria-selected-or-getbyroleoption-no-longer-finds-it)
 - [The `ref` of a `SelectChipField` focuses nothing](#the-ref-of-a-selectchipfield-focuses-nothing)
 - [`touchedFields` stays empty after leaving a field, or `mode: 'onBlur'` never validates](#touchedfields-stays-empty-after-leaving-a-field-or-mode-onblur-never-validates)
+- ["Required" shows as soon as the calendar opens, or while a date is being picked](#required-shows-as-soon-as-the-calendar-opens-or-while-a-date-is-being-picked)
 - [`TypeError: values.map is not a function` (a `SliderFormField`)](#typeerror-valuesmap-is-not-a-function)
 - [An end-to-end test no longer finds `aria-expanded` on a `ResponsiveButton`](#an-end-to-end-test-no-longer-finds-aria-expanded-on-a-responsivebutton)
 - [A multi-step form reopens at a later step](#a-multi-step-form-reopens-at-a-later-step)
@@ -134,6 +136,7 @@ words in your error.
 - [A button named "Icon plus Add" is now named "Add"](#a-button-named-icon-plus-add-is-now-named-add)
 - [`An invalid form control with name='…' is not focusable` (an `UploadField`)](#an-invalid-form-control-with-name-is-not-focusable)
 - [A `DateField` or `DateRangeField` with `disabled` still opens](#a-datefield-or-daterangefield-with-disabled-still-opens)
+- [The date field shows MM/DD/YYYY on a French page](#the-date-field-shows-mmddyyyy-on-a-french-page)
 - [An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is not on the trigger](#an-id-aria-describedby-or-data-testid-on-a-datefield-daterangefield-or-timefield-is-not-on-the-trigger)
 - [A test no longer finds the label or helper text inside a date or time picker's trigger](#a-test-no-longer-finds-the-label-or-helper-text-inside-a-date-or-time-pickers-trigger)
 - [A test no longer finds a `DurationField` input by the field's label, or a `Slider`'s `aria-label` on its root](#a-test-no-longer-finds-a-durationfield-input-by-the-fields-label-or-a-sliders-aria-label-on-its-root)
@@ -204,6 +207,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)
 
 ---
@@ -372,6 +383,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
@@ -2237,6 +2263,24 @@ For a field of your own, pass `field.onBlur` to the control that loses focus:
 What counts as leaving, per kind of field:
 [forms](guides/forms.md#touched-on-blur).
 
+### "Required" shows as soon as the calendar opens, or while a date is being picked
+
+**When:** a `DateFormField` or `DateRangeFormField` that is empty and required,
+in a form with `mode: 'onTouched'` or `'onBlur'`, shows its error (and
+`touchedFields` flips) after the user changes the month, opens the year view
+or goes to today, before any date is chosen. 2.14.0 and earlier.
+
+**Why:** `Calendar` gave `react-day-picker` new `Nav`, `CaptionLabel` and
+`MonthGrid` components each time the month or the view changed. The button that
+had focus was unmounted, focus fell to the page, and the field, which is
+touched when focus leaves it and its popover, took that for leaving.
+
+**Fix:** upgrade to 2.15.0 or later. Until then, validate on
+submit (`mode: 'onSubmit'`) or hide the message until the popover is closed.
+From that version, opening, moving in the calendar, Escape and picking leave
+the field untouched; it is touched when the popover closes without a value by a
+click outside, or when the trigger loses focus with the popover closed.
+
 ### `TypeError: values.map is not a function`
 
 **When:** a `SliderFormField` with one thumb crashes (in `SliderReadout`) as
@@ -2541,6 +2585,27 @@ react-day-picker's day rule, so `true` meant "every day".
 The same release moves `id`, `aria-describedby` and `data-*` to the trigger:
 see the next entry.
 
+### The date field shows MM/DD/YYYY on a French page
+
+**When:** a `DateField`, `DateFormField`, `DateRangeField` or `DateRangeFormField` (and a `TimeField`, which shows `2:30 PM` instead of `14:30`) under a French
+`I18nProvider` shows 1 September 2028 as `09/01/2028` in its trigger, while the
+calendar inside it is in French. No error is printed.
+**Why:** the trigger formatted the date without a locale, so it was always
+English (`MM/DD/YYYY`), whatever the language of the page.
+**Fix:** upgrade: the trigger now writes the date (and the time, for a
+`TimeField` or a `DateRangeField` with `withTime`) in the language of the
+calendar: the field's own `locale`, else the `I18nProvider` language, else
+English. Mount the provider above the field:
+
+```tsx
+<I18nProvider initialLanguage="fr">
+  <DateField label="Livraison" value={value} onValueChange={setValue} />
+</I18nProvider>
+```
+
+With no provider, or in English, the output is unchanged (`09/01/2028`). The
+document's `<html lang>` and the browser's language are not read.
+
 ### An `id`, `aria-describedby` or `data-testid` on a `DateField`, `DateRangeField` or `TimeField` is not on the trigger
 
 **When:** before 2.2.0: `getByTestId` finds the calendar (and only while the
@@ -3781,6 +3846,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;
+	}
+}

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

@@ -0,0 +1,95 @@
+/*! vaul 1.1.2's stylesheet (MIT, Emil Kowalski), its keyframes. 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.
+ *
+ * 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.
+ */
+@keyframes fadeIn {
+	from {
+		opacity: 0;
+	}
+	to {
+		opacity: 1;
+	}
+}
+
+@keyframes fadeOut {
+	to {
+		opacity: 0;
+	}
+}
+
+@keyframes slideFromBottom {
+	from {
+		transform: translate3d(0, var(--initial-transform, 100%), 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToBottom {
+	to {
+		transform: translate3d(0, var(--initial-transform, 100%), 0);
+	}
+}
+
+@keyframes slideFromTop {
+	from {
+		transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToTop {
+	to {
+		transform: translate3d(0, calc(var(--initial-transform, 100%) * -1), 0);
+	}
+}
+
+@keyframes slideFromLeft {
+	from {
+		transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToLeft {
+	to {
+		transform: translate3d(calc(var(--initial-transform, 100%) * -1), 0, 0);
+	}
+}
+
+@keyframes slideFromRight {
+	from {
+		transform: translate3d(var(--initial-transform, 100%), 0, 0);
+	}
+	to {
+		transform: translate3d(0, 0, 0);
+	}
+}
+
+@keyframes slideToRight {
+	to {
+		transform: translate3d(var(--initial-transform, 100%), 0, 0);
+	}
+}