@slotted/react 0.1.0-beta.1 → 0.1.0-beta.10

package/dist/docs/dialog.examples.md

@@ -624,6 +624,150 @@ Excerpt — not a complete module
 <DialogTrigger render={(props) => <Button {...props}>Edit project</Button>} />;
 ```
 
+### A layout of its own
+
+DialogContent draws no padding: the header, the body and the footer carry the inset. A layout of its own — one field, a preview, a footer — reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, so it stands in the column the parts stand in.
+
+Excerpt — not a complete module
+
+```tsx
+<DialogContent>
+  <div
+    style={{
+      display: 'grid',
+      gap: 'var(--slotted-space-5)',
+      paddingBlock: 'var(--slotted-dialog-inset-block)',
+      paddingInline: 'var(--slotted-dialog-inset-inline)',
+    }}
+  >
+    <DialogTitle>Rename file</DialogTitle>
+    <TextField aria-label="Name" defaultValue="report-q3.pdf" />
+    <img alt="First page of report-q3.pdf" src={preview} />
+  </div>
+  <DialogFooter>
+    <Button size="sm">Rename</Button>
+  </DialogFooter>
+</DialogContent>;
+```
+
+### A dialog that is a form
+
+A dialog that edits a record submits with Enter from any field and with the footer’s submit. render makes the panel the form itself, so the header, the body and the footer stay its rows and keep its inset; a form written around them inside DialogContent keeps them too.
+
+Example
+
+```tsx
+import { useState, type SubmitEvent } from 'react';
+
+import { Button } from '@slotted/react/button';
+import {
+  Dialog,
+  DialogBody,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@slotted/react/dialog';
+import { Field, FieldError, FieldLabel } from '@slotted/react/field';
+import { Inline } from '@slotted/react/inline';
+import { Stack } from '@slotted/react/stack';
+import { TextField } from '@slotted/react/text-field';
+import { Text } from '@slotted/react/typography';
+
+function nameError(value: string): string {
+  return value.trim() === '' ? 'Enter the contact’s full name.' : '';
+}
+
+function emailError(value: string): string {
+  if (value.trim() === '') return 'Enter the address the contact reads.';
+  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';
+  return '';
+}
+
+export default function DialogForm() {
+  const [open, setOpen] = useState(false);
+  const [name, setName] = useState('');
+  const [email, setEmail] = useState('');
+  const [submitted, setSubmitted] = useState(false);
+  const [added, setAdded] = useState<string | null>(null);
+  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;
+
+  const submit = (event: SubmitEvent<HTMLFormElement>) => {
+    event.preventDefault();
+    setSubmitted(true);
+    if (nameError(name) !== '' || emailError(email) !== '') return;
+    setAdded(`${name.trim()} was added to Contoso Foods.`);
+    setOpen(false);
+  };
+
+  return (
+    <Inline align="center" gap={3}>
+      <Dialog
+        open={open}
+        onOpenChange={(next) => {
+          if (next) {
+            setName('');
+            setEmail('');
+            setSubmitted(false);
+          }
+          setOpen(next);
+        }}
+      >
+        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>New contact</DialogTitle>
+            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>
+            <DialogClose />
+          </DialogHeader>
+          <DialogBody>
+            <form id="new-contact" noValidate onSubmit={submit}>
+              <Stack gap={4}>
+                <Field required invalid={errors?.name ? true : undefined}>
+                  <FieldLabel>Full name</FieldLabel>
+                  <TextField autoComplete="name" value={name} onValueChange={setName} />
+                  <FieldError live="polite" reserve>
+                    {errors?.name}
+                  </FieldError>
+                </Field>
+                <Field required invalid={errors?.email ? true : undefined}>
+                  <FieldLabel>Email</FieldLabel>
+                  <TextField
+                    autoComplete="email"
+                    type="email"
+                    value={email}
+                    onValueChange={setEmail}
+                  />
+                  <FieldError live="polite" reserve>
+                    {errors?.email}
+                  </FieldError>
+                </Field>
+              </Stack>
+            </form>
+          </DialogBody>
+          <DialogFooter>
+            <Button variant="ghost" tone="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </Button>
+            <Button type="submit" form="new-contact">
+              Add contact
+            </Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
+      {added === null ? null : (
+        <Text role="status" size="sm" tone="muted">
+          {added}
+        </Text>
+      )}
+    </Inline>
+  );
+}
+```
+
 ### Deciding once for the application
 
 Eight decisions an application takes once instead of eight props on every dialog in a product. Angular Material is the only surveyed library with an equivalent, and a dialog that states one itself still wins.
@@ -1624,122 +1768,6 @@ export default function DialogDismiss() {
 }
 ```
 
-### form.tsx
-
-Example
-
-```tsx
-import { useState, type SubmitEvent } from 'react';
-
-import { Button } from '@slotted/react/button';
-import {
-  Dialog,
-  DialogBody,
-  DialogClose,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from '@slotted/react/dialog';
-import { Field, FieldError, FieldLabel } from '@slotted/react/field';
-import { Inline } from '@slotted/react/inline';
-import { Stack } from '@slotted/react/stack';
-import { TextField } from '@slotted/react/text-field';
-import { Text } from '@slotted/react/typography';
-
-function nameError(value: string): string {
-  return value.trim() === '' ? 'Enter the contact’s full name.' : '';
-}
-
-function emailError(value: string): string {
-  if (value.trim() === '') return 'Enter the address the contact reads.';
-  if (!/^\S+@\S+\.\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';
-  return '';
-}
-
-export default function DialogForm() {
-  const [open, setOpen] = useState(false);
-  const [name, setName] = useState('');
-  const [email, setEmail] = useState('');
-  const [submitted, setSubmitted] = useState(false);
-  const [added, setAdded] = useState<string | null>(null);
-  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;
-
-  const submit = (event: SubmitEvent<HTMLFormElement>) => {
-    event.preventDefault();
-    setSubmitted(true);
-    if (nameError(name) !== '' || emailError(email) !== '') return;
-    setAdded(`${name.trim()} was added to Contoso Foods.`);
-    setOpen(false);
-  };
-
-  return (
-    <Inline align="center" gap={3}>
-      <Dialog
-        open={open}
-        onOpenChange={(next) => {
-          if (next) {
-            setName('');
-            setEmail('');
-            setSubmitted(false);
-          }
-          setOpen(next);
-        }}
-      >
-        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />
-        <DialogContent>
-          <DialogHeader>
-            <DialogTitle>New contact</DialogTitle>
-            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>
-            <DialogClose />
-          </DialogHeader>
-          <DialogBody>
-            <form id="new-contact" noValidate onSubmit={submit}>
-              <Stack gap={4}>
-                <Field required invalid={errors?.name ? true : undefined}>
-                  <FieldLabel>Full name</FieldLabel>
-                  <TextField autoComplete="name" value={name} onValueChange={setName} />
-                  <FieldError live="polite" reserve>
-                    {errors?.name}
-                  </FieldError>
-                </Field>
-                <Field required invalid={errors?.email ? true : undefined}>
-                  <FieldLabel>Email</FieldLabel>
-                  <TextField
-                    autoComplete="email"
-                    type="email"
-                    value={email}
-                    onValueChange={setEmail}
-                  />
-                  <FieldError live="polite" reserve>
-                    {errors?.email}
-                  </FieldError>
-                </Field>
-              </Stack>
-            </form>
-          </DialogBody>
-          <DialogFooter>
-            <Button variant="ghost" tone="secondary" onClick={() => setOpen(false)}>
-              Cancel
-            </Button>
-            <Button type="submit" form="new-contact">
-              Add contact
-            </Button>
-          </DialogFooter>
-        </DialogContent>
-      </Dialog>
-      {added === null ? null : (
-        <Text role="status" size="sm" tone="muted">
-          {added}
-        </Text>
-      )}
-    </Inline>
-  );
-}
-```
-
 ### full-screen.tsx
 
 Example

package/dist/docs/dialog.json

@@ -55,6 +55,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -206,7 +207,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel. It carries role=\"dialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long."
+          "purpose": "The panel. It carries role=\"dialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long. It draws no padding: DialogHeader, DialogBody and DialogFooter carry the panel inset. A layout that skips them reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, which the panel states, and a theme sets the inset with --slotted-dialog-padding-inline and --slotted-dialog-padding-block."
         },
         {
           "part": "header",
@@ -443,6 +444,11 @@
           "payload": "(open: boolean, request: DialogChangeRequest)",
           "when": "Before the dialog opens or closes, whatever caused it. The request carries the new value, the previous value, the reason (pointer, keyboard, dismiss, escape, outsidePress, back, submit or programmatic), the result of the close, the originating event, and cancel(), which keeps the dialog as it is. One handler therefore guards the ✕, Escape, a press outside, the way back and the ref handle together."
         },
+        {
+          "name": "onOpenChangeComplete",
+          "payload": "(open: boolean)",
+          "when": "After the entrance or the exit has ended: true once the layer is settled open, false once it has left — the moment an application that renders the layer conditionally removes it, so the exit runs. A layer mounted open enters from its closed style, as one opened later does."
+        },
         {
           "name": "onFullscreenChange",
           "payload": "(fullscreen: boolean, request: DialogFullscreenRequest)",
@@ -497,7 +503,7 @@
           "part": "content",
           "element": "div",
           "required": true,
-          "purpose": "The panel. It carries role=\"alertdialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long."
+          "purpose": "The panel. It carries role=\"alertdialog\" and, while modal, aria-modal=\"true\". It is a grid of three rows, header, body and footer, and only the body row shrinks, so the actions stay on screen when the body is long. It draws no padding: DialogHeader, DialogBody and DialogFooter carry the panel inset. A layout that skips them reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, which the panel states, and a theme sets the inset with --slotted-dialog-padding-inline and --slotted-dialog-padding-block."
         },
         {
           "part": "header",
@@ -635,7 +641,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "danger",
           "appliesTo": "AlertDialog",
           "description": "The kind of decision. It sets the mark AlertDialogIcon draws and its colour."
@@ -726,6 +732,11 @@
           "payload": "(open: boolean, request: DialogChangeRequest)",
           "when": "Before the dialog opens or closes, whatever caused it. The request carries the new value, the previous value, the reason (pointer, keyboard, dismiss, escape, outsidePress, back, submit or programmatic), the result of the close, the originating event, and cancel(), which keeps the dialog as it is. One handler therefore guards the ✕, Escape, a press outside, the way back and the ref handle together."
         },
+        {
+          "name": "onOpenChangeComplete",
+          "payload": "(open: boolean)",
+          "when": "After the entrance or the exit has ended: true once the layer is settled open, false once it has left — the moment an application that renders the layer conditionally removes it, so the exit runs. A layer mounted open enters from its closed style, as one opened later does."
+        },
         {
           "name": "onFullscreenChange",
           "payload": "(fullscreen: boolean, request: DialogFullscreenRequest)",
@@ -766,6 +777,10 @@
     "--slotted-dialog-description-color",
     "--slotted-dialog-footer-surface",
     "--slotted-dialog-measure",
+    "--slotted-dialog-padding-block",
+    "--slotted-dialog-padding-block-sm",
+    "--slotted-dialog-padding-inline",
+    "--slotted-dialog-padding-inline-sm",
     "--slotted-dialog-radius",
     "--slotted-dialog-rule-color",
     "--slotted-dialog-scrim",
@@ -806,6 +821,7 @@
     "--slotted-text-muted",
     "--slotted-tone-accent-text",
     "--slotted-tone-danger-text",
+    "--slotted-tone-info-text",
     "--slotted-tone-secondary-subtle-active",
     "--slotted-tone-secondary-subtle-hover",
     "--slotted-tone-secondary-text",
@@ -918,6 +934,22 @@
       "source": "<DialogTrigger render={(props) => <Button {...props}>Edit project</Button>} />;\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "layout",
+      "title": "A layout of its own",
+      "note": "DialogContent draws no padding: the header, the body and the footer carry the inset. A layout of its own — one field, a preview, a footer — reads --slotted-dialog-inset-inline and --slotted-dialog-inset-block, so it stands in the column the parts stand in.",
+      "language": "tsx",
+      "source": "<DialogContent>\n  <div\n    style={{\n      display: 'grid',\n      gap: 'var(--slotted-space-5)',\n      paddingBlock: 'var(--slotted-dialog-inset-block)',\n      paddingInline: 'var(--slotted-dialog-inset-inline)',\n    }}\n  >\n    <DialogTitle>Rename file</DialogTitle>\n    <TextField aria-label=\"Name\" defaultValue=\"report-q3.pdf\" />\n    <img alt=\"First page of report-q3.pdf\" src={preview} />\n  </div>\n  <DialogFooter>\n    <Button size=\"sm\">Rename</Button>\n  </DialogFooter>\n</DialogContent>;\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "form",
+      "title": "A dialog that is a form",
+      "note": "A dialog that edits a record submits with Enter from any field and with the footer’s submit. render makes the panel the form itself, so the header, the body and the footer stay its rows and keep its inset; a form written around them inside DialogContent keeps them too.",
+      "language": "tsx",
+      "source": "import { useState, type SubmitEvent } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the contact’s full name.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address the contact reads.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';\n  return '';\n}\n\nexport default function DialogForm() {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [submitted, setSubmitted] = useState(false);\n  const [added, setAdded] = useState<string | null>(null);\n  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitted(true);\n    if (nameError(name) !== '' || emailError(email) !== '') return;\n    setAdded(`${name.trim()} was added to Contoso Foods.`);\n    setOpen(false);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          if (next) {\n            setName('');\n            setEmail('');\n            setSubmitted(false);\n          }\n          setOpen(next);\n        }}\n      >\n        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>New contact</DialogTitle>\n            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <form id=\"new-contact\" noValidate onSubmit={submit}>\n              <Stack gap={4}>\n                <Field required invalid={errors?.name ? true : undefined}>\n                  <FieldLabel>Full name</FieldLabel>\n                  <TextField autoComplete=\"name\" value={name} onValueChange={setName} />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.name}\n                  </FieldError>\n                </Field>\n                <Field required invalid={errors?.email ? true : undefined}>\n                  <FieldLabel>Email</FieldLabel>\n                  <TextField\n                    autoComplete=\"email\"\n                    type=\"email\"\n                    value={email}\n                    onValueChange={setEmail}\n                  />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.email}\n                  </FieldError>\n                </Field>\n              </Stack>\n            </form>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" form=\"new-contact\">\n              Add contact\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      {added === null ? null : (\n        <Text role=\"status\" size=\"sm\" tone=\"muted\">\n          {added}\n        </Text>\n      )}\n    </Inline>\n  );\n}\n",
+      "verdict": "example"
+    },
     {
       "id": "defaults",
       "title": "Deciding once for the application",
@@ -1062,14 +1094,6 @@
       "source": "import { useState } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Text } from '@slotted/react/typography';\n\nexport default function DialogDismiss() {\n  const [open, setOpen] = useState(false);\n\n  return (\n    <Dialog open={open} onOpenChange={setOpen} escape=\"none\" outsidePress=\"none\">\n      <DialogTrigger render={(props) => <Button {...props}>Import products</Button>} />\n      <DialogContent>\n        <DialogHeader>\n          <DialogTitle>Import 1,240 products</DialogTitle>\n          <DialogDescription>\n            From spring-catalogue.csv into the Northwind price list.\n          </DialogDescription>\n        </DialogHeader>\n        <DialogBody>\n          <Text size=\"sm\">\n            38 rows update existing products and 1,202 add new ones. Escape and a press outside the\n            panel leave this dialog open; choose one of the actions.\n          </Text>\n        </DialogBody>\n        <DialogFooter>\n          <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n            Cancel import\n          </Button>\n          <Button onClick={() => setOpen(false)}>Start import</Button>\n        </DialogFooter>\n      </DialogContent>\n    </Dialog>\n  );\n}\n",
       "verdict": "example"
     },
-    {
-      "id": "form",
-      "title": "form.tsx",
-      "note": null,
-      "language": "tsx",
-      "source": "import { useState, type SubmitEvent } from 'react';\n\nimport { Button } from '@slotted/react/button';\nimport {\n  Dialog,\n  DialogBody,\n  DialogClose,\n  DialogContent,\n  DialogDescription,\n  DialogFooter,\n  DialogHeader,\n  DialogTitle,\n  DialogTrigger,\n} from '@slotted/react/dialog';\nimport { Field, FieldError, FieldLabel } from '@slotted/react/field';\nimport { Inline } from '@slotted/react/inline';\nimport { Stack } from '@slotted/react/stack';\nimport { TextField } from '@slotted/react/text-field';\nimport { Text } from '@slotted/react/typography';\n\nfunction nameError(value: string): string {\n  return value.trim() === '' ? 'Enter the contact’s full name.' : '';\n}\n\nfunction emailError(value: string): string {\n  if (value.trim() === '') return 'Enter the address the contact reads.';\n  if (!/^\\S+@\\S+\\.\\S+$/.test(value)) return 'Enter an address like ana@contoso.com.';\n  return '';\n}\n\nexport default function DialogForm() {\n  const [open, setOpen] = useState(false);\n  const [name, setName] = useState('');\n  const [email, setEmail] = useState('');\n  const [submitted, setSubmitted] = useState(false);\n  const [added, setAdded] = useState<string | null>(null);\n  const errors = submitted ? { name: nameError(name), email: emailError(email) } : null;\n\n  const submit = (event: SubmitEvent<HTMLFormElement>) => {\n    event.preventDefault();\n    setSubmitted(true);\n    if (nameError(name) !== '' || emailError(email) !== '') return;\n    setAdded(`${name.trim()} was added to Contoso Foods.`);\n    setOpen(false);\n  };\n\n  return (\n    <Inline align=\"center\" gap={3}>\n      <Dialog\n        open={open}\n        onOpenChange={(next) => {\n          if (next) {\n            setName('');\n            setEmail('');\n            setSubmitted(false);\n          }\n          setOpen(next);\n        }}\n      >\n        <DialogTrigger render={(props) => <Button {...props}>Add contact</Button>} />\n        <DialogContent>\n          <DialogHeader>\n            <DialogTitle>New contact</DialogTitle>\n            <DialogDescription>Contoso Foods, Seattle.</DialogDescription>\n            <DialogClose />\n          </DialogHeader>\n          <DialogBody>\n            <form id=\"new-contact\" noValidate onSubmit={submit}>\n              <Stack gap={4}>\n                <Field required invalid={errors?.name ? true : undefined}>\n                  <FieldLabel>Full name</FieldLabel>\n                  <TextField autoComplete=\"name\" value={name} onValueChange={setName} />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.name}\n                  </FieldError>\n                </Field>\n                <Field required invalid={errors?.email ? true : undefined}>\n                  <FieldLabel>Email</FieldLabel>\n                  <TextField\n                    autoComplete=\"email\"\n                    type=\"email\"\n                    value={email}\n                    onValueChange={setEmail}\n                  />\n                  <FieldError live=\"polite\" reserve>\n                    {errors?.email}\n                  </FieldError>\n                </Field>\n              </Stack>\n            </form>\n          </DialogBody>\n          <DialogFooter>\n            <Button variant=\"ghost\" tone=\"secondary\" onClick={() => setOpen(false)}>\n              Cancel\n            </Button>\n            <Button type=\"submit\" form=\"new-contact\">\n              Add contact\n            </Button>\n          </DialogFooter>\n        </DialogContent>\n      </Dialog>\n      {added === null ? null : (\n        <Text role=\"status\" size=\"sm\" tone=\"muted\">\n          {added}\n        </Text>\n      )}\n    </Inline>\n  );\n}\n",
-      "verdict": "example"
-    },
     {
       "id": "full-screen",
       "title": "full-screen.tsx",

package/dist/docs/dialog.md

@@ -179,7 +179,7 @@ export default function DialogBasic() {
 | `initialFocus` | `'first' \| 'container' \| 'cancel' \| RefObject \| false` | cancel | AlertDialog | Where focus goes when the dialog opens. The default, cancel, is the least destructive answer. |
 | `finalFocus` | `RefObject \| false` | — | Dialog, AlertDialog | Where focus goes when the dialog closes. Unset, focus returns to the element that had it when the dialog opened, usually the trigger. false leaves focus where it is. |
 | `value` | `string` | — | DialogClose, AlertDialogCancel, AlertDialogAction | The result this button closes the dialog with, read from request.result in onOpenChange. AlertDialogCancel defaults to "cancel" and AlertDialogAction to "confirm". |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | danger | AlertDialog | The kind of decision. It sets the mark AlertDialogIcon draws and its colour. |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | danger | AlertDialog | The kind of decision. It sets the mark AlertDialogIcon draws and its colour. |
 | `modal` | `boolean` | true | AlertDialog | Fixed: an alert dialog is always modal. |
 | `outsidePress` | `'close' \| 'none'` | none | AlertDialog | Fixed: a press outside never closes an alert dialog. |
 | `back` | `'close' \| 'none'` | close | AlertDialog | Whether the browser’s way back cancels the confirmation, as Escape does. The close request carries the reason back. |
@@ -199,6 +199,7 @@ export default function DialogBasic() {
 | Name | Payload | When |
 | --- | --- | --- |
 | `onOpenChange` | `(open: boolean, request: DialogChangeRequest)` | Before the dialog opens or closes, whatever caused it. The request carries the new value, the previous value, the reason (pointer, keyboard, dismiss, escape, outsidePress, back, submit or programmatic), the result of the close, the originating event, and cancel(), which keeps the dialog as it is. One handler therefore guards the ✕, Escape, a press outside, the way back and the ref handle together. |
+| `onOpenChangeComplete` | `(open: boolean)` | After the entrance or the exit has ended: true once the layer is settled open, false once it has left — the moment an application that renders the layer conditionally removes it, so the exit runs. A layer mounted open enters from its closed style, as one opened later does. |
 | `onFullscreenChange` | `(fullscreen: boolean, request: DialogFullscreenRequest)` | Before the panel expands to the whole layer or is restored. The request carries the new value, the previous value, the reason (pointer, keyboard or programmatic), the originating event, and cancel(), which keeps the panel as it is. |
 | `onClick, onKeyDown and the other native events, on every part` | `the element’s own event` | Whenever the element fires them. Your handler runs before the dialog’s own, and calling preventDefault() in it cancels the dialog’s behaviour, such as opening on a trigger press or closing on a close press. |
 
@@ -207,6 +208,7 @@ export default function DialogBasic() {
 | Name | Payload | When |
 | --- | --- | --- |
 | `onOpenChange` | `(open: boolean, request: DialogChangeRequest)` | Before the dialog opens or closes, whatever caused it. The request carries the new value, the previous value, the reason (pointer, keyboard, dismiss, escape, outsidePress, back, submit or programmatic), the result of the close, the originating event, and cancel(), which keeps the dialog as it is. One handler therefore guards the ✕, Escape, a press outside, the way back and the ref handle together. |
+| `onOpenChangeComplete` | `(open: boolean)` | After the entrance or the exit has ended: true once the layer is settled open, false once it has left — the moment an application that renders the layer conditionally removes it, so the exit runs. A layer mounted open enters from its closed style, as one opened later does. |
 | `onFullscreenChange` | `(fullscreen: boolean, request: DialogFullscreenRequest)` | Before the panel expands to the whole layer or is restored. The request carries the new value, the previous value, the reason (pointer, keyboard or programmatic), the originating event, and cancel(), which keeps the panel as it is. |
 | `onClick, onKeyDown and the other native events, on every part` | `the element’s own event` | Whenever the element fires them. Your handler runs before the dialog’s own, and calling preventDefault() in it cancels the dialog’s behaviour, such as opening on a trigger press or closing on a close press. |
 
@@ -224,7 +226,7 @@ export default function DialogBasic() {
 | `escape` | `close`, `none` | `close` |
 | `outsidePress` | `close`, `none` | `close`, `none` |
 | `back` | `close`, `none` | `close` |
-| `tone` | `accent`, `secondary`, `success`, `warning`, `danger` | `danger` |
+| `tone` | `accent`, `secondary`, `info`, `success`, `warning`, `danger` | `danger` |
 | `initialFocus` | `first`, `container`, `cancel` | `first`, `cancel` |
 
 ## Rules
@@ -245,7 +247,7 @@ export default function DialogBasic() {
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-lg`, `--slotted-control-inner-size-lg`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-dialog-body-color`, `--slotted-dialog-border-color`, `--slotted-dialog-close-active-background`, `--slotted-dialog-close-color`, `--slotted-dialog-close-hover-background`, `--slotted-dialog-color`, `--slotted-dialog-description-color`, `--slotted-dialog-footer-surface`, `--slotted-dialog-measure`, `--slotted-dialog-radius`, `--slotted-dialog-rule-color`, `--slotted-dialog-scrim`, `--slotted-dialog-surface`, `--slotted-dialog-title-color`, `--slotted-dialog-title-font-family`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-xl`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-overlay`
+`--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-lg`, `--slotted-control-inner-size-lg`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-dialog-body-color`, `--slotted-dialog-border-color`, `--slotted-dialog-close-active-background`, `--slotted-dialog-close-color`, `--slotted-dialog-close-hover-background`, `--slotted-dialog-color`, `--slotted-dialog-description-color`, `--slotted-dialog-footer-surface`, `--slotted-dialog-measure`, `--slotted-dialog-padding-block`, `--slotted-dialog-padding-block-sm`, `--slotted-dialog-padding-inline`, `--slotted-dialog-padding-inline-sm`, `--slotted-dialog-radius`, `--slotted-dialog-rule-color`, `--slotted-dialog-scrim`, `--slotted-dialog-surface`, `--slotted-dialog-title-color`, `--slotted-dialog-title-font-family`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-heading`, `--slotted-font-family-sans`, `--slotted-font-size-lg`, `--slotted-font-size-md`, `--slotted-font-size-xl`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-text`, `--slotted-tone-danger-text`, `--slotted-tone-info-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-tone-secondary-text`, `--slotted-tone-success-text`, `--slotted-tone-warning-text`, `--slotted-z-index-overlay`
 
 ## Examples
 

package/dist/docs/drawer.json

@@ -413,6 +413,11 @@
           "payload": "(open: boolean, request: DrawerChangeRequest)",
           "when": "Before the drawer opens or closes, for every way it can: the trigger, the ✕, Escape, a press outside, the back gesture and the handle. The request carries value, previous, reason (pointer, keyboard, dismiss, escape, outsidePress, back or programmatic), result, the source event and cancel(), which keeps the drawer as it is."
         },
+        {
+          "name": "onOpenChangeComplete",
+          "payload": "(open: boolean)",
+          "when": "After the entrance or the exit has ended: true once the drawer is settled open, false once it has left — the moment an application that renders the drawer conditionally removes it, so the exit runs. A drawer mounted open enters from its closed style, as one opened later does."
+        },
         {
           "name": "onExtentChange",
           "payload": "(extent: number | undefined, request: DrawerExtentRequest)",

package/dist/docs/drawer.md

@@ -149,6 +149,7 @@ export default function DrawerBasic() {
 | Name | Payload | When |
 | --- | --- | --- |
 | `onOpenChange` | `(open: boolean, request: DrawerChangeRequest)` | Before the drawer opens or closes, for every way it can: the trigger, the ✕, Escape, a press outside, the back gesture and the handle. The request carries value, previous, reason (pointer, keyboard, dismiss, escape, outsidePress, back or programmatic), result, the source event and cancel(), which keeps the drawer as it is. |
+| `onOpenChangeComplete` | `(open: boolean)` | After the entrance or the exit has ended: true once the drawer is settled open, false once it has left — the moment an application that renders the drawer conditionally removes it, so the exit runs. A drawer mounted open enters from its closed style, as one opened later does. |
 | `onExtentChange` | `(extent: number \| undefined, request: DrawerExtentRequest)` | Before the panel’s measure changes, with the reason pointer for a drag or a tap on the grip, keyboard for an arrow key, Home, End or Enter, and programmatic for a change from code. A drag of the separator fires on every pointer move and can report a value below minExtent; a drag of a sheet’s body fires once, on release, with the stop it landed on. undefined means the panel is back on its size step, or on the height of its content under size="content". |
 | `onClick, onKeyDown, onPointerDown, on every part` | `the element’s own events` | Whenever the element fires them. Your handler runs first, and preventDefault() in it cancels the drawer’s own behaviour for that event. |
 

package/dist/docs/entity-picker.json

@@ -176,7 +176,7 @@
   "docs": {
     "entity-picker": {
       "imports": {
-        "source": "import { EntityPicker, EntityPickerDefaultsProvider, localEntitySource, rememberRecent } from '@slotted/react';"
+        "source": "import { EntityPicker, EntityPickerDefaultsProvider, EntityPickerOptionDescription, EntityPickerOptionLabel, EntityPickerOptionMedia, EntityPickerOptionMeta, localEntitySource, rememberRecent } from '@slotted/react';"
       },
       "anatomy": [
         {
@@ -475,12 +475,26 @@
           "appliesTo": "EntityPicker",
           "description": "Draws the offer to create"
         },
+        {
+          "name": "virtualize",
+          "type": "boolean",
+          "defaultValue": "above 100 options without headings",
+          "appliesTo": "EntityPicker",
+          "description": "Draws only the options in view and a few either side; the keyboard, aria-activedescendant and scrolling to the highlight reach every option. A list with section headings is drawn whole"
+        },
+        {
+          "name": "estimatedRowHeight",
+          "type": "number",
+          "defaultValue": "48",
+          "appliesTo": "EntityPicker",
+          "description": "The height an option is counted at until it has been drawn and measured"
+        },
         {
           "name": "renderOption",
           "type": "(entity, state) => ReactNode",
           "defaultValue": "name, identifier, fact",
           "appliesTo": "EntityPicker",
-          "description": "The content of an option; the face, the check and the row stay the family’s"
+          "description": "The content of an option, written with EntityPickerOptionLabel, EntityPickerOptionDescription, EntityPickerOptionMeta and EntityPickerOptionMedia, which place it in the row; the face, the check and the row stay the family’s. With media=\"none\" an option draws its own face in EntityPickerOptionMedia"
         },
         {
           "name": "renderChip",
@@ -739,6 +753,7 @@
     "--slotted-border-width-thin",
     "--slotted-control-border-color",
     "--slotted-control-border-width",
+    "--slotted-control-focus-ring-offset",
     "--slotted-control-font-family",
     "--slotted-control-font-size-lg",
     "--slotted-control-font-size-md",
@@ -991,7 +1006,7 @@
       "title": "Composition",
       "note": "renderOption adds the team after the address; renderChip adds the role to a chip; SlottedProvider says every sentence in Portuguese once.",
       "language": "tsx",
-      "source": "<SlottedProvider locale=\"pt-BR\" catalogs={{ 'pt-BR': PT_BR }}>\n  <EntityPicker\n    aria-label=\"Responsável\"\n    messages={{ retry: 'Buscar outra vez' }}\n    renderOption={(person) => <span data-part=\"label\">{person.label}</span>}\n    source={directory}\n  />\n</SlottedProvider>;\n",
+      "source": "<SlottedProvider locale=\"pt-BR\" catalogs={{ 'pt-BR': PT_BR }}>\n  <EntityPicker\n    aria-label=\"Responsável\"\n    messages={{ retry: 'Buscar outra vez' }}\n    renderOption={(person) => (\n      <>\n        <EntityPickerOptionLabel>{person.label}</EntityPickerOptionLabel>\n        <EntityPickerOptionDescription>{person.team}</EntityPickerOptionDescription>\n      </>\n    )}\n    source={directory}\n  />\n</SlottedProvider>;\n",
       "verdict": "excerpt"
     }
   ]

package/dist/docs/entity-picker.md

@@ -6,7 +6,7 @@
 ## Import
 
 ```tsx
-import { EntityPicker, EntityPickerDefaultsProvider, localEntitySource, rememberRecent } from '@slotted/react';
+import { EntityPicker, EntityPickerDefaultsProvider, EntityPickerOptionDescription, EntityPickerOptionLabel, EntityPickerOptionMedia, EntityPickerOptionMeta, localEntitySource, rememberRecent } from '@slotted/react';
 ```
 
 ## Minimal example
@@ -82,7 +82,9 @@ const directory: EntitySource = {
 | `scope` | `string \| null` | — | EntityPicker | The scope, controlled |
 | `defaultScope` | `string \| null` | null | EntityPicker | The uncontrolled scope |
 | `onCreate` | `(query) => void \| Entity \| Promise<Entity \| null \| void>` | — | EntityPicker | Draws the offer to create |
-| `renderOption` | `(entity, state) => ReactNode` | name, identifier, fact | EntityPicker | The content of an option; the face, the check and the row stay the family’s |
+| `virtualize` | `boolean` | above 100 options without headings | EntityPicker | Draws only the options in view and a few either side; the keyboard, aria-activedescendant and scrolling to the highlight reach every option. A list with section headings is drawn whole |
+| `estimatedRowHeight` | `number` | 48 | EntityPicker | The height an option is counted at until it has been drawn and measured |
+| `renderOption` | `(entity, state) => ReactNode` | name, identifier, fact | EntityPicker | The content of an option, written with EntityPickerOptionLabel, EntityPickerOptionDescription, EntityPickerOptionMeta and EntityPickerOptionMedia, which place it in the row; the face, the check and the row stay the family’s. With media="none" an option draws its own face in EntityPickerOptionMedia |
 | `renderChip` | `(entity) => ReactNode` | the name | EntityPicker | The words of a chip |
 | `render` | `(props) => ReactNode` | a div | EntityPicker | Replaces the root element |
 | `handleRef` | `Ref<{ focus, open, close, refresh }>` | — | EntityPicker | refresh() asks the source again |
@@ -158,7 +160,7 @@ const directory: EntitySource = {
 
 ## Tokens
 
-`--slotted-avatar-size-md`, `--slotted-avatar-size-sm`, `--slotted-avatar-size-xs`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-entity-picker-action-active-background`, `--slotted-entity-picker-action-color`, `--slotted-entity-picker-action-hover-background`, `--slotted-entity-picker-action-size`, `--slotted-entity-picker-autofill-background`, `--slotted-entity-picker-background`, `--slotted-entity-picker-border-color`, `--slotted-entity-picker-color`, `--slotted-entity-picker-content-border-color`, `--slotted-entity-picker-content-radius`, `--slotted-entity-picker-content-shadow`, `--slotted-entity-picker-content-text`, `--slotted-entity-picker-content-text-muted`, `--slotted-entity-picker-disabled-background`, `--slotted-entity-picker-disabled-border-color`, `--slotted-entity-picker-disabled-color`, `--slotted-entity-picker-error-color`, `--slotted-entity-picker-field-basis`, `--slotted-entity-picker-field-min`, `--slotted-entity-picker-highlight`, `--slotted-entity-picker-highlight-active`, `--slotted-entity-picker-highlight-ring`, `--slotted-entity-picker-hover-border-color`, `--slotted-entity-picker-icon-size-min`, `--slotted-entity-picker-invalid-border-color`, `--slotted-entity-picker-invalid-edge-width`, `--slotted-entity-picker-invalid-focus-ring-color`, `--slotted-entity-picker-item-radius`, `--slotted-entity-picker-measure`, `--slotted-entity-picker-meta-measure`, `--slotted-entity-picker-offer-color`, `--slotted-entity-picker-open-border-color`, `--slotted-entity-picker-placeholder-color`, `--slotted-entity-picker-plain-hover-background`, `--slotted-entity-picker-radius`, `--slotted-entity-picker-readonly-background`, `--slotted-entity-picker-scope-inline-size`, `--slotted-entity-picker-selected-color`, `--slotted-entity-picker-shadow`, `--slotted-entity-picker-subtle-background`, `--slotted-entity-picker-subtle-border-color`, `--slotted-entity-picker-subtle-hover-background`, `--slotted-entity-picker-surface`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
+`--slotted-avatar-size-md`, `--slotted-avatar-size-sm`, `--slotted-avatar-size-xs`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-focus-ring-offset`, `--slotted-control-font-family`, `--slotted-control-font-size-lg`, `--slotted-control-font-size-md`, `--slotted-control-font-size-sm`, `--slotted-control-gap-lg`, `--slotted-control-gap-md`, `--slotted-control-gap-sm`, `--slotted-control-height-lg`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-lg`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-inner-size-lg`, `--slotted-control-inner-size-md`, `--slotted-control-inner-size-sm`, `--slotted-control-invalid-edge-width`, `--slotted-control-padding-inline-lg`, `--slotted-control-padding-inline-md`, `--slotted-control-padding-inline-sm`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-shadow-focus-geometry`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-background`, `--slotted-disabled-border`, `--slotted-disabled-foreground`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-easing-exit`, `--slotted-easing-standard`, `--slotted-entity-picker-action-active-background`, `--slotted-entity-picker-action-color`, `--slotted-entity-picker-action-hover-background`, `--slotted-entity-picker-action-size`, `--slotted-entity-picker-autofill-background`, `--slotted-entity-picker-background`, `--slotted-entity-picker-border-color`, `--slotted-entity-picker-color`, `--slotted-entity-picker-content-border-color`, `--slotted-entity-picker-content-radius`, `--slotted-entity-picker-content-shadow`, `--slotted-entity-picker-content-text`, `--slotted-entity-picker-content-text-muted`, `--slotted-entity-picker-disabled-background`, `--slotted-entity-picker-disabled-border-color`, `--slotted-entity-picker-disabled-color`, `--slotted-entity-picker-error-color`, `--slotted-entity-picker-field-basis`, `--slotted-entity-picker-field-min`, `--slotted-entity-picker-highlight`, `--slotted-entity-picker-highlight-active`, `--slotted-entity-picker-highlight-ring`, `--slotted-entity-picker-hover-border-color`, `--slotted-entity-picker-icon-size-min`, `--slotted-entity-picker-invalid-border-color`, `--slotted-entity-picker-invalid-edge-width`, `--slotted-entity-picker-invalid-focus-ring-color`, `--slotted-entity-picker-item-radius`, `--slotted-entity-picker-measure`, `--slotted-entity-picker-meta-measure`, `--slotted-entity-picker-offer-color`, `--slotted-entity-picker-open-border-color`, `--slotted-entity-picker-placeholder-color`, `--slotted-entity-picker-plain-hover-background`, `--slotted-entity-picker-radius`, `--slotted-entity-picker-readonly-background`, `--slotted-entity-picker-scope-inline-size`, `--slotted-entity-picker-selected-color`, `--slotted-entity-picker-shadow`, `--slotted-entity-picker-subtle-background`, `--slotted-entity-picker-subtle-border-color`, `--slotted-entity-picker-subtle-hover-background`, `--slotted-entity-picker-surface`, `--slotted-focus-ring-color`, `--slotted-focus-ring-color-invalid`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-semibold`, `--slotted-line-height-md`, `--slotted-line-height-sm`, `--slotted-radius-lg`, `--slotted-radius-none`, `--slotted-shadow-md`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-border`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-danger-border`, `--slotted-tone-danger-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-popover`
 
 ## Examples
 
@@ -382,7 +384,12 @@ Excerpt — not a complete module
   <EntityPicker
     aria-label="Responsável"
     messages={{ retry: 'Buscar outra vez' }}
-    renderOption={(person) => <span data-part="label">{person.label}</span>}
+    renderOption={(person) => (
+      <>
+        <EntityPickerOptionLabel>{person.label}</EntityPickerOptionLabel>
+        <EntityPickerOptionDescription>{person.team}</EntityPickerOptionDescription>
+      </>
+    )}
     source={directory}
   />
 </SlottedProvider>;

package/dist/docs/event-calendar.json

@@ -557,6 +557,13 @@
           "appliesTo": "EventCalendar",
           "description": "Read once; pass it when rendering on a server"
         },
+        {
+          "name": "now",
+          "type": "PlainDateTime",
+          "defaultValue": "the clock in timeZone, ticked each minute",
+          "appliesTo": "EventCalendar",
+          "description": "Present means the consumer owns it: the clock is no longer read, and today and the now line follow it. A page dated by its content passes it."
+        },
         {
           "name": "view",
           "type": "'month' | 'week' | 'day' | 'list'",

package/dist/docs/event-calendar.md

@@ -98,6 +98,7 @@ Excerpt — not a complete module
 | `calendars` | `readonly EventCalendarCalendar[]` | [] | EventCalendar | Key, label and an optional colour slot 1–8 |
 | `date` | `PlainDate` | — | EventCalendar | The day the calendar is on; present means controlled |
 | `defaultDate` | `PlainDate` | today in timeZone | EventCalendar | Read once; pass it when rendering on a server |
+| `now` | `PlainDateTime` | the clock in timeZone, ticked each minute | EventCalendar | Present means the consumer owns it: the clock is no longer read, and today and the now line follow it. A page dated by its content passes it. |
 | `view` | `'month' \| 'week' \| 'day' \| 'list'` | month | EventCalendar | Present means controlled; uncontrolled opens on the first of views |
 | `defaultView` | `EventCalendarView` | views[0] | EventCalendar | Read once |
 | `views` | `readonly EventCalendarView[]` | month,week,day,list | EventCalendar | The switcher, in order |