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

package/dist/docs/detail-panel.md

@@ -106,7 +106,7 @@ Excerpt — not a complete module
 
 ## Tokens
 
-`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-detail-panel-aside-size-lg`, `--slotted-detail-panel-aside-size-md`, `--slotted-detail-panel-aside-size-sm`, `--slotted-detail-panel-border`, `--slotted-detail-panel-gap-lg`, `--slotted-detail-panel-gap-md`, `--slotted-detail-panel-gap-sm`, `--slotted-detail-panel-inset-block-lg`, `--slotted-detail-panel-inset-block-md`, `--slotted-detail-panel-inset-block-sm`, `--slotted-detail-panel-rhythm`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-page-ground`, `--slotted-space-12`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-gap-md`, `--slotted-detail-panel-aside-size-lg`, `--slotted-detail-panel-aside-size-md`, `--slotted-detail-panel-aside-size-sm`, `--slotted-detail-panel-border`, `--slotted-detail-panel-footer-backdrop-filter`, `--slotted-detail-panel-footer-background`, `--slotted-detail-panel-gap-lg`, `--slotted-detail-panel-gap-md`, `--slotted-detail-panel-gap-sm`, `--slotted-detail-panel-inset-block-lg`, `--slotted-detail-panel-inset-block-md`, `--slotted-detail-panel-inset-block-sm`, `--slotted-detail-panel-rhythm`, `--slotted-duration-short`, `--slotted-easing-enter`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-page-ground`, `--slotted-space-12`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface`, `--slotted-text`, `--slotted-text-muted`, `--slotted-z-index-sticky`
 
 ## Examples
 
@@ -157,7 +157,7 @@ Excerpt — not a complete module
 
 ### Three hosts, one anatomy
 
-The same panel as a page’s content at level 1, as a drawer’s body with the drawer’s own close in the header actions, and as a split’s pane scrolling itself. Nothing in the panel names its host: scroll="self" is the one difference a pane makes.
+The same panel as a page’s content at level 1, as a drawer’s body with the drawer’s own close in the header actions, and as a split’s pane scrolling itself. Nothing in the panel names its host: scroll="self" is the one difference a pane makes. A pane that paints a ground of its own declares --slotted-page-ground with that ground, so a sticky section header inside the panel matches the pane and not the page.
 
 Excerpt — not a complete module
 
@@ -172,9 +172,19 @@ Excerpt — not a complete module
   </DrawerPanel>
 </Drawer>;
 
-<DetailPanel recordKey={order.id} scroll="self">
-  …
-</DetailPanel>;
+<div
+  className="pane"
+  style={
+    {
+      background: 'var(--slotted-surface)',
+      '--slotted-page-ground': 'var(--slotted-surface)',
+    } as CSSProperties
+  }
+>
+  <DetailPanel recordKey={order.id} scroll="self">
+    …
+  </DetailPanel>
+</div>;
 ```
 
 ### Previous and next: focus follows the record

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)",
@@ -757,6 +768,7 @@
     "--slotted-control-radius",
     "--slotted-control-transition-duration",
     "--slotted-control-transition-easing",
+    "--slotted-dialog-backdrop-filter",
     "--slotted-dialog-body-color",
     "--slotted-dialog-border-color",
     "--slotted-dialog-close-active-background",
@@ -766,6 +778,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 +822,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 +935,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 +1095,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-backdrop-filter`, `--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

@@ -58,7 +58,7 @@
       "defaults": {
         "mode": "overlay",
         "side": "end",
-        "size": "md",
+        "size": "content on top and bottom, md on start and end",
         "mount": "active",
         "modal": true,
         "escape": "close",
@@ -89,7 +89,8 @@
         "focus-visible",
         "open",
         "loading",
-        "dragging"
+        "dragging",
+        "expanded"
       ],
       "parts": [
         "root",
@@ -260,9 +261,9 @@
         {
           "name": "size",
           "type": "'sm' | 'md' | 'lg' | 'xl' | 'full' | 'content'",
-          "defaultValue": "md",
+          "defaultValue": "content on top and bottom, md on start and end",
           "appliesTo": "Drawer, DrawerDefaultsProvider",
-          "description": "The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. When unset, content on top and bottom and md on start and end. A step wider than the screen is held to it."
+          "description": "The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. A step wider than the screen is held to it."
         },
         {
           "name": "mount",
@@ -413,6 +414,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)",
@@ -461,6 +467,7 @@
     "--slotted-drawer-extent-xl",
     "--slotted-drawer-footer-surface",
     "--slotted-drawer-radius",
+    "--slotted-drawer-radius-expanded",
     "--slotted-drawer-resizer-line-active-color",
     "--slotted-drawer-resizer-line-color",
     "--slotted-drawer-rule-color",

package/dist/docs/drawer.md

@@ -122,7 +122,7 @@ export default function DrawerBasic() {
 | `snapPoints` | `readonly number[]` | — | Drawer | The stops the measure moves between, as fractions. With them an arrow key moves to the next stop, Home and End go to the first and the last, and a drag is released onto the nearest. |
 | `mode` | `'overlay' \| 'inline'` | overlay | Drawer, DrawerDefaultsProvider | overlay puts the drawer over the page, in a portal; inline puts it in your own layout. The value can change while the drawer is open, and the panel’s content and the state of its fields are kept across the change. |
 | `side` | `'start' \| 'end' \| 'top' \| 'bottom'` | end | Drawer, DrawerDefaultsProvider | The edge the panel comes from. start and end follow the writing direction, so the drawer changes sides in a right-to-left document. |
-| `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'content'` | md | Drawer, DrawerDefaultsProvider | The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. When unset, content on top and bottom and md on start and end. A step wider than the screen is held to it. |
+| `size` | `'sm' \| 'md' \| 'lg' \| 'xl' \| 'full' \| 'content'` | content on top and bottom, md on start and end | Drawer, DrawerDefaultsProvider | The panel’s measure at rest: one of the steps sm (18rem), md (24rem), lg (30rem), xl (40rem) and full, or content, which fits what the panel holds, up to 4rem short of the screen. A step wider than the screen is held to it. |
 | `mount` | `'active' \| 'lazy' \| 'eager'` | active | Drawer, DrawerDefaultsProvider | When an overlay layer is in the document: active only while it is open or closing, lazy from the first open on, and eager from the start, inert while closed. An inline drawer is always in the document. |
 | `modal` | `boolean` | true | Drawer, DrawerDefaultsProvider | Whether the page behind is inert, its scroll is locked and focus is contained in the panel, and whether the panel carries aria-modal. The scrim is painted either way. Always false under mode="inline". |
 | `escape` | `'close' \| 'none'` | close | Drawer, DrawerDefaultsProvider | Whether Escape asks to close the drawer. Escape reaches only the topmost layer, and a layer that refuses it does not pass it to the one below. |
@@ -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. |
 
@@ -158,7 +159,7 @@ export default function DrawerBasic() {
 | --- | --- | --- |
 | `mode` | `overlay`, `inline` | `overlay` |
 | `side` | `start`, `end`, `top`, `bottom` | `end` |
-| `size` | `sm`, `md`, `lg`, `xl`, `full`, `content` | `md` |
+| `size` | `sm`, `md`, `lg`, `xl`, `full`, `content` | content on top and bottom, md on start and end |
 | `mount` | `active`, `lazy`, `eager` | `active` |
 | `modal` | `true`, `false` | `true` |
 | `escape` | `close`, `none` | `close` |
@@ -179,7 +180,7 @@ export default function DrawerBasic() {
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-drawer-body-color`, `--slotted-drawer-border-color`, `--slotted-drawer-close-active-background`, `--slotted-drawer-close-color`, `--slotted-drawer-close-hover-background`, `--slotted-drawer-color`, `--slotted-drawer-description-color`, `--slotted-drawer-extent`, `--slotted-drawer-extent-lg`, `--slotted-drawer-extent-md`, `--slotted-drawer-extent-sm`, `--slotted-drawer-extent-xl`, `--slotted-drawer-footer-surface`, `--slotted-drawer-radius`, `--slotted-drawer-resizer-line-active-color`, `--slotted-drawer-resizer-line-color`, `--slotted-drawer-rule-color`, `--slotted-drawer-scrim`, `--slotted-drawer-sheet-inline-size`, `--slotted-drawer-surface`, `--slotted-drawer-title-color`, `--slotted-drawer-title-font-family`, `--slotted-duration-instant`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--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-lg`, `--slotted-line-height-md`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-overlay`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thick`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-icon-size-md`, `--slotted-control-inner-size-md`, `--slotted-control-radius`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-drawer-body-color`, `--slotted-drawer-border-color`, `--slotted-drawer-close-active-background`, `--slotted-drawer-close-color`, `--slotted-drawer-close-hover-background`, `--slotted-drawer-color`, `--slotted-drawer-description-color`, `--slotted-drawer-extent`, `--slotted-drawer-extent-lg`, `--slotted-drawer-extent-md`, `--slotted-drawer-extent-sm`, `--slotted-drawer-extent-xl`, `--slotted-drawer-footer-surface`, `--slotted-drawer-radius`, `--slotted-drawer-radius-expanded`, `--slotted-drawer-resizer-line-active-color`, `--slotted-drawer-resizer-line-color`, `--slotted-drawer-rule-color`, `--slotted-drawer-scrim`, `--slotted-drawer-sheet-inline-size`, `--slotted-drawer-surface`, `--slotted-drawer-title-color`, `--slotted-drawer-title-font-family`, `--slotted-duration-instant`, `--slotted-duration-long`, `--slotted-duration-medium`, `--slotted-duration-short`, `--slotted-easing-enter`, `--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-lg`, `--slotted-line-height-md`, `--slotted-radius-full`, `--slotted-radius-lg`, `--slotted-radius-sm`, `--slotted-scrim`, `--slotted-shadow-lg`, `--slotted-space-11`, `--slotted-space-12`, `--slotted-space-2`, `--slotted-space-4`, `--slotted-space-5`, `--slotted-space-6`, `--slotted-space-7`, `--slotted-space-8`, `--slotted-space-9`, `--slotted-surface-raised`, `--slotted-surface-sunken`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-overlay`
 
 ## Examples