@slotted/angular 0.1.0-beta.0 → 0.1.0-beta.10

package/docs/dialog.examples.md

@@ -622,6 +622,164 @@ Excerpt — not a complete module
 <button slButton variant="outline" [slDialogTrigger]="d">Edit project</button>
 ```
 
+### A layout of its own
+
+The panel 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
+
+```html
+<sl-dialog #d="slDialog">
+  <div class="rename">
+    <h2 slDialogTitle>Rename file</h2>
+    <input slTextField aria-label="Name" value="report-q3.pdf" />
+    <img alt="First page of report-q3.pdf" [src]="preview" />
+  </div>
+  <footer slDialogFooter><button slButton size="sm">Rename</button></footer>
+</sl-dialog>
+<!-- .rename { display: grid; gap: var(--slotted-space-5);
+     padding-block: var(--slotted-dialog-inset-block);
+     padding-inline: var(--slotted-dialog-inset-inline); } -->
+```
+
+### A dialog that is a form
+
+A dialog that edits a record submits with Enter from any field and with the footer’s submit. A form written around the header, the body and the footer draws no box of its own, so the parts stay the panel’s rows and keep its inset.
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import { SlButton } from '@slotted/angular/button';
+import {
+  SlDialog,
+  SlDialogBody,
+  SlDialogClose,
+  SlDialogDescription,
+  SlDialogFooter,
+  SlDialogHeader,
+  SlDialogTitle,
+  SlDialogTrigger,
+} from '@slotted/angular/dialog';
+import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
+import { SlInline } from '@slotted/angular/inline';
+import { SlStack } from '@slotted/angular/stack';
+import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
+import { SlText } from '@slotted/angular/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 '';
+}
+
+@Component({
+  selector: 'app-dialog-form',
+  imports: [
+    SlButton,
+    SlDialog,
+    SlDialogBody,
+    SlDialogClose,
+    SlDialogDescription,
+    SlDialogFooter,
+    SlDialogHeader,
+    SlDialogTitle,
+    SlDialogTrigger,
+    SlField,
+    SlFieldError,
+    SlFieldLabel,
+    SlInline,
+    SlStack,
+    SlText,
+    SlTextField,
+    SlTextFieldInput,
+  ],
+  template: `
+    <div slInline align="center" [gap]="3">
+      <button slButton [slDialogTrigger]="dialog">Add contact</button>
+      <sl-dialog #dialog="slDialog" [open]="open()" (openChange)="toggle($event)">
+        <header slDialogHeader>
+          <h2 slDialogTitle>New contact</h2>
+          <p slDialogDescription>Contoso Foods, Seattle.</p>
+          <button slDialogClose></button>
+        </header>
+        <div slDialogBody>
+          <form id="new-contact" novalidate (submit)="submit($event)">
+            <div slStack [gap]="4">
+              <div slField required [invalid]="errors()?.name ? true : undefined">
+                <label slFieldLabel>Full name</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    autocomplete="name"
+                    [value]="name()"
+                    (valueChange)="name.set($event.value)"
+                  />
+                </div>
+                <span slFieldError live="polite" reserve>{{ errors()?.name }}</span>
+              </div>
+              <div slField required [invalid]="errors()?.email ? true : undefined">
+                <label slFieldLabel>Email</label>
+                <div slTextField>
+                  <input
+                    slTextFieldInput
+                    autocomplete="email"
+                    type="email"
+                    [value]="email()"
+                    (valueChange)="email.set($event.value)"
+                  />
+                </div>
+                <span slFieldError live="polite" reserve>{{ errors()?.email }}</span>
+              </div>
+            </div>
+          </form>
+        </div>
+        <footer slDialogFooter>
+          <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
+            Cancel
+          </button>
+          <button slButton type="submit" form="new-contact">Add contact</button>
+        </footer>
+      </sl-dialog>
+      @if (added(); as message) {
+        <span slText role="status" size="sm" tone="muted">{{ message }}</span>
+      }
+    </div>
+  `,
+})
+export class DialogForm {
+  readonly open = signal(false);
+  readonly name = signal('');
+  readonly email = signal('');
+  readonly submitted = signal(false);
+  readonly added = signal<string | null>(null);
+  readonly errors = computed(() =>
+    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,
+  );
+
+  toggle(next: boolean): void {
+    if (next) {
+      this.name.set('');
+      this.email.set('');
+      this.submitted.set(false);
+    }
+    this.open.set(next);
+  }
+
+  submit(event: Event): void {
+    event.preventDefault();
+    this.submitted.set(true);
+    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;
+    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);
+    this.open.set(false);
+  }
+}
+```
+
 ### 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.
@@ -1619,142 +1777,6 @@ export class DialogDismiss {
 }
 ```
 
-### form.ts
-
-Example
-
-```ts
-import { Component, computed, signal } from '@angular/core';
-import { SlButton } from '@slotted/angular/button';
-import {
-  SlDialog,
-  SlDialogBody,
-  SlDialogClose,
-  SlDialogDescription,
-  SlDialogFooter,
-  SlDialogHeader,
-  SlDialogTitle,
-  SlDialogTrigger,
-} from '@slotted/angular/dialog';
-import { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';
-import { SlInline } from '@slotted/angular/inline';
-import { SlStack } from '@slotted/angular/stack';
-import { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';
-import { SlText } from '@slotted/angular/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 '';
-}
-
-@Component({
-  selector: 'app-dialog-form',
-  imports: [
-    SlButton,
-    SlDialog,
-    SlDialogBody,
-    SlDialogClose,
-    SlDialogDescription,
-    SlDialogFooter,
-    SlDialogHeader,
-    SlDialogTitle,
-    SlDialogTrigger,
-    SlField,
-    SlFieldError,
-    SlFieldLabel,
-    SlInline,
-    SlStack,
-    SlText,
-    SlTextField,
-    SlTextFieldInput,
-  ],
-  template: `
-    <div slInline align="center" [gap]="3">
-      <button slButton [slDialogTrigger]="dialog">Add contact</button>
-      <sl-dialog #dialog="slDialog" [open]="open()" (openChange)="toggle($event)">
-        <header slDialogHeader>
-          <h2 slDialogTitle>New contact</h2>
-          <p slDialogDescription>Contoso Foods, Seattle.</p>
-          <button slDialogClose></button>
-        </header>
-        <div slDialogBody>
-          <form id="new-contact" novalidate (submit)="submit($event)">
-            <div slStack [gap]="4">
-              <div slField required [invalid]="errors()?.name ? true : undefined">
-                <label slFieldLabel>Full name</label>
-                <div slTextField>
-                  <input
-                    slTextFieldInput
-                    autocomplete="name"
-                    [value]="name()"
-                    (valueChange)="name.set($event.value)"
-                  />
-                </div>
-                <span slFieldError live="polite" reserve>{{ errors()?.name }}</span>
-              </div>
-              <div slField required [invalid]="errors()?.email ? true : undefined">
-                <label slFieldLabel>Email</label>
-                <div slTextField>
-                  <input
-                    slTextFieldInput
-                    autocomplete="email"
-                    type="email"
-                    [value]="email()"
-                    (valueChange)="email.set($event.value)"
-                  />
-                </div>
-                <span slFieldError live="polite" reserve>{{ errors()?.email }}</span>
-              </div>
-            </div>
-          </form>
-        </div>
-        <footer slDialogFooter>
-          <button slButton variant="ghost" tone="secondary" (click)="open.set(false)">
-            Cancel
-          </button>
-          <button slButton type="submit" form="new-contact">Add contact</button>
-        </footer>
-      </sl-dialog>
-      @if (added(); as message) {
-        <span slText role="status" size="sm" tone="muted">{{ message }}</span>
-      }
-    </div>
-  `,
-})
-export class DialogForm {
-  readonly open = signal(false);
-  readonly name = signal('');
-  readonly email = signal('');
-  readonly submitted = signal(false);
-  readonly added = signal<string | null>(null);
-  readonly errors = computed(() =>
-    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,
-  );
-
-  toggle(next: boolean): void {
-    if (next) {
-      this.name.set('');
-      this.email.set('');
-      this.submitted.set(false);
-    }
-    this.open.set(next);
-  }
-
-  submit(event: Event): void {
-    event.preventDefault();
-    this.submitted.set(true);
-    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;
-    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);
-    this.open.set(false);
-  }
-}
-```
-
 ### full-screen.ts
 
 Example

package/docs/dialog.json

@@ -55,6 +55,7 @@
     "tone": [
       "accent",
       "secondary",
+      "info",
       "success",
       "warning",
       "danger"
@@ -208,7 +209,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: slDialogHeader, slDialogBody and slDialogFooter 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",
@@ -431,6 +432,11 @@
           "payload": "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 close() together."
         },
+        {
+          "name": "(openChangeComplete)",
+          "payload": "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."
+        },
         {
           "name": "(openChange)",
           "payload": "boolean",
@@ -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: slDialogHeader, slDialogBody and slDialogFooter 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",
@@ -628,7 +634,7 @@
         },
         {
           "name": "tone",
-          "type": "'accent' | 'secondary' | 'success' | 'warning' | 'danger'",
+          "type": "'accent' | 'secondary' | 'info' | 'success' | 'warning' | 'danger'",
           "defaultValue": "danger",
           "appliesTo": "sl-alert-dialog",
           "description": "The kind of decision. It sets the mark slAlertDialogIcon draws and its colour."
@@ -719,6 +725,11 @@
           "payload": "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 close() together."
         },
+        {
+          "name": "(openChangeComplete)",
+          "payload": "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."
+        },
         {
           "name": "(openChange)",
           "payload": "boolean",
@@ -769,6 +780,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",
@@ -809,6 +824,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",
@@ -921,6 +937,22 @@
       "source": "<button slButton variant=\"outline\" [slDialogTrigger]=\"d\">Edit project</button>\n",
       "verdict": "excerpt"
     },
+    {
+      "id": "layout",
+      "title": "A layout of its own",
+      "note": "The panel 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": "html",
+      "source": "<sl-dialog #d=\"slDialog\">\n  <div class=\"rename\">\n    <h2 slDialogTitle>Rename file</h2>\n    <input slTextField aria-label=\"Name\" value=\"report-q3.pdf\" />\n    <img alt=\"First page of report-q3.pdf\" [src]=\"preview\" />\n  </div>\n  <footer slDialogFooter><button slButton size=\"sm\">Rename</button></footer>\n</sl-dialog>\n<!-- .rename { display: grid; gap: var(--slotted-space-5);\n     padding-block: var(--slotted-dialog-inset-block);\n     padding-inline: var(--slotted-dialog-inset-inline); } -->\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. A form written around the header, the body and the footer draws no box of its own, so the parts stay the panel’s rows and keep its inset.",
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-form',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton [slDialogTrigger]=\"dialog\">Add contact</button>\n      <sl-dialog #dialog=\"slDialog\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>New contact</h2>\n          <p slDialogDescription>Contoso Foods, Seattle.</p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <form id=\"new-contact\" novalidate (submit)=\"submit($event)\">\n            <div slStack [gap]=\"4\">\n              <div slField required [invalid]=\"errors()?.name ? true : undefined\">\n                <label slFieldLabel>Full name</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"name\"\n                    [value]=\"name()\"\n                    (valueChange)=\"name.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.name }}</span>\n              </div>\n              <div slField required [invalid]=\"errors()?.email ? true : undefined\">\n                <label slFieldLabel>Email</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"email\"\n                    type=\"email\"\n                    [value]=\"email()\"\n                    (valueChange)=\"email.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.email }}</span>\n              </div>\n            </div>\n          </form>\n        </div>\n        <footer slDialogFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton type=\"submit\" form=\"new-contact\">Add contact</button>\n        </footer>\n      </sl-dialog>\n      @if (added(); as message) {\n        <span slText role=\"status\" size=\"sm\" tone=\"muted\">{{ message }}</span>\n      }\n    </div>\n  `,\n})\nexport class DialogForm {\n  readonly open = signal(false);\n  readonly name = signal('');\n  readonly email = signal('');\n  readonly submitted = signal(false);\n  readonly added = signal<string | null>(null);\n  readonly errors = computed(() =>\n    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,\n  );\n\n  toggle(next: boolean): void {\n    if (next) {\n      this.name.set('');\n      this.email.set('');\n      this.submitted.set(false);\n    }\n    this.open.set(next);\n  }\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.submitted.set(true);\n    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;\n    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);\n    this.open.set(false);\n  }\n}\n",
+      "verdict": "example"
+    },
     {
       "id": "defaults",
       "title": "Deciding once for the application",
@@ -1065,14 +1097,6 @@
       "source": "import { Component, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlText } from '@slotted/angular/typography';\n\n@Component({\n  selector: 'app-dialog-dismiss',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlText,\n  ],\n  template: `\n    <button slButton [slDialogTrigger]=\"dialog\">Import products</button>\n    <sl-dialog #dialog=\"slDialog\" escape=\"none\" outsidePress=\"none\" [(open)]=\"open\">\n      <header slDialogHeader>\n        <h2 slDialogTitle>Import 1,240 products</h2>\n        <p slDialogDescription>From spring-catalogue.csv into the Northwind price list.</p>\n      </header>\n      <div slDialogBody>\n        <span slText 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        </span>\n      </div>\n      <footer slDialogFooter>\n        <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n          Cancel import\n        </button>\n        <button slButton (click)=\"open.set(false)\">Start import</button>\n      </footer>\n    </sl-dialog>\n  `,\n})\nexport class DialogDismiss {\n  readonly open = signal(false);\n}\n",
       "verdict": "example"
     },
-    {
-      "id": "form",
-      "title": "form.ts",
-      "note": null,
-      "language": "ts",
-      "source": "import { Component, computed, signal } from '@angular/core';\nimport { SlButton } from '@slotted/angular/button';\nimport {\n  SlDialog,\n  SlDialogBody,\n  SlDialogClose,\n  SlDialogDescription,\n  SlDialogFooter,\n  SlDialogHeader,\n  SlDialogTitle,\n  SlDialogTrigger,\n} from '@slotted/angular/dialog';\nimport { SlField, SlFieldError, SlFieldLabel } from '@slotted/angular/field';\nimport { SlInline } from '@slotted/angular/inline';\nimport { SlStack } from '@slotted/angular/stack';\nimport { SlTextField, SlTextFieldInput } from '@slotted/angular/text-field';\nimport { SlText } from '@slotted/angular/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\n@Component({\n  selector: 'app-dialog-form',\n  imports: [\n    SlButton,\n    SlDialog,\n    SlDialogBody,\n    SlDialogClose,\n    SlDialogDescription,\n    SlDialogFooter,\n    SlDialogHeader,\n    SlDialogTitle,\n    SlDialogTrigger,\n    SlField,\n    SlFieldError,\n    SlFieldLabel,\n    SlInline,\n    SlStack,\n    SlText,\n    SlTextField,\n    SlTextFieldInput,\n  ],\n  template: `\n    <div slInline align=\"center\" [gap]=\"3\">\n      <button slButton [slDialogTrigger]=\"dialog\">Add contact</button>\n      <sl-dialog #dialog=\"slDialog\" [open]=\"open()\" (openChange)=\"toggle($event)\">\n        <header slDialogHeader>\n          <h2 slDialogTitle>New contact</h2>\n          <p slDialogDescription>Contoso Foods, Seattle.</p>\n          <button slDialogClose></button>\n        </header>\n        <div slDialogBody>\n          <form id=\"new-contact\" novalidate (submit)=\"submit($event)\">\n            <div slStack [gap]=\"4\">\n              <div slField required [invalid]=\"errors()?.name ? true : undefined\">\n                <label slFieldLabel>Full name</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"name\"\n                    [value]=\"name()\"\n                    (valueChange)=\"name.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.name }}</span>\n              </div>\n              <div slField required [invalid]=\"errors()?.email ? true : undefined\">\n                <label slFieldLabel>Email</label>\n                <div slTextField>\n                  <input\n                    slTextFieldInput\n                    autocomplete=\"email\"\n                    type=\"email\"\n                    [value]=\"email()\"\n                    (valueChange)=\"email.set($event.value)\"\n                  />\n                </div>\n                <span slFieldError live=\"polite\" reserve>{{ errors()?.email }}</span>\n              </div>\n            </div>\n          </form>\n        </div>\n        <footer slDialogFooter>\n          <button slButton variant=\"ghost\" tone=\"secondary\" (click)=\"open.set(false)\">\n            Cancel\n          </button>\n          <button slButton type=\"submit\" form=\"new-contact\">Add contact</button>\n        </footer>\n      </sl-dialog>\n      @if (added(); as message) {\n        <span slText role=\"status\" size=\"sm\" tone=\"muted\">{{ message }}</span>\n      }\n    </div>\n  `,\n})\nexport class DialogForm {\n  readonly open = signal(false);\n  readonly name = signal('');\n  readonly email = signal('');\n  readonly submitted = signal(false);\n  readonly added = signal<string | null>(null);\n  readonly errors = computed(() =>\n    this.submitted() ? { name: nameError(this.name()), email: emailError(this.email()) } : null,\n  );\n\n  toggle(next: boolean): void {\n    if (next) {\n      this.name.set('');\n      this.email.set('');\n      this.submitted.set(false);\n    }\n    this.open.set(next);\n  }\n\n  submit(event: Event): void {\n    event.preventDefault();\n    this.submitted.set(true);\n    if (nameError(this.name()) !== '' || emailError(this.email()) !== '') return;\n    this.added.set(`${this.name().trim()} was added to Contoso Foods.`);\n    this.open.set(false);\n  }\n}\n",
-      "verdict": "example"
-    },
     {
       "id": "full-screen",
       "title": "full-screen.ts",

package/docs/dialog.md

@@ -160,6 +160,7 @@ See [dialog.props.md](./dialog.props.md).
 | Name | Payload | When |
 | --- | --- | --- |
 | `(openChangeRequest)` | `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 close() together. |
+| `(openChangeComplete)` | `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. |
 | `(openChange)` | `boolean` | After the open state changed, so a template can bind [(open)]. It carries the new state only; the reason is on (openChangeRequest). |
 | `(fullscreenChangeRequest)` | `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. |
 | `(fullscreenChange)` | `boolean` | After the expanded state changed, so a template can bind [(fullscreen)]. |
@@ -170,6 +171,7 @@ See [dialog.props.md](./dialog.props.md).
 | Name | Payload | When |
 | --- | --- | --- |
 | `(openChangeRequest)` | `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 close() together. |
+| `(openChangeComplete)` | `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. |
 | `(openChange)` | `boolean` | After the open state changed, so a template can bind [(open)]. It carries the new state only; the reason is on (openChangeRequest). |
 | `(fullscreenChangeRequest)` | `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. |
 | `(fullscreenChange)` | `boolean` | After the expanded state changed, so a template can bind [(fullscreen)]. |
@@ -189,7 +191,7 @@ See [dialog.props.md](./dialog.props.md).
 | `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
@@ -210,7 +212,7 @@ See [dialog.props.md](./dialog.props.md).
 
 ## 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/docs/dialog.props.md

@@ -49,7 +49,7 @@
 | `initialFocus` | `'first' \| 'container' \| 'cancel' \| HTMLElement \| false` | cancel | sl-alert-dialog | Where focus goes when the dialog opens. The default, cancel, is the least destructive answer. |
 | `finalFocus` | `HTMLElement \| false` | — | sl-dialog, sl-alert-dialog | 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` | — | slDialogClose, slAlertDialogCancel, slAlertDialogAction | The result this button closes the dialog with, read from request.result in (openChangeRequest) and from (closed). slAlertDialogCancel defaults to "cancel" and slAlertDialogAction to "confirm". |
-| `tone` | `'accent' \| 'secondary' \| 'success' \| 'warning' \| 'danger'` | danger | sl-alert-dialog | The kind of decision. It sets the mark slAlertDialogIcon draws and its colour. |
+| `tone` | `'accent' \| 'secondary' \| 'info' \| 'success' \| 'warning' \| 'danger'` | danger | sl-alert-dialog | The kind of decision. It sets the mark slAlertDialogIcon draws and its colour. |
 | `modal` | `boolean` | true | sl-alert-dialog | Fixed: an alert dialog is always modal. |
 | `outsidePress` | `'close' \| 'none'` | none | sl-alert-dialog | Fixed: a press outside never closes an alert dialog. |
 | `back` | `'close' \| 'none'` | close | sl-alert-dialog | Whether the browser’s way back cancels the confirmation, as Escape does. The close request carries the reason back. |

package/docs/drawer.json

@@ -405,6 +405,11 @@
           "payload": "DrawerChangeRequest",
           "when": "Before the drawer opens or closes, for every way it can: the trigger, the ✕, Escape, a press outside, the back gesture and a call from code. 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": "openChangeComplete",
+          "payload": "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": "extentChange",
           "payload": "number | undefined",

package/docs/drawer.md

@@ -161,6 +161,7 @@ export class DrawerBasic {
 | --- | --- | --- |
 | `openChange` | `boolean` | The two-way half of open, which [(open)] binds. It fires once the drawer has opened or closed. |
 | `openChangeRequest` | `DrawerChangeRequest` | Before the drawer opens or closes, for every way it can: the trigger, the ✕, Escape, a press outside, the back gesture and a call from code. 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. |
+| `openChangeComplete` | `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. |
 | `extentChange` | `number \| undefined` | The two-way half of extent, which [(extent)] binds. It fires once the measure has changed. |
 | `extentChangeRequest` | `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". |
 | `closed` | `string \| undefined` | Once the drawer has closed, with the result of the close, or undefined for a close that carried none. |

package/docs/entity-picker.json

@@ -176,8 +176,8 @@
   "docs": {
     "entity-picker": {
       "imports": {
-        "source": "import { SlEntityPicker, SlEntityPickerChip, SlEntityPickerOption, provideEntityPickerDefaults } from '@slotted/angular/entity-picker';",
-        "selector": "sl-entity-picker, ng-template[slEntityPickerOption], ng-template[slEntityPickerChip]",
+        "source": "import { SlEntityPicker, SlEntityPickerChip, SlEntityPickerOption, SlEntityPickerOptionDescription, SlEntityPickerOptionLabel, SlEntityPickerOptionMedia, SlEntityPickerOptionMeta, provideEntityPickerDefaults } from '@slotted/angular/entity-picker';",
+        "selector": "sl-entity-picker, ng-template[slEntityPickerOption], ng-template[slEntityPickerChip], [slEntityPickerOptionLabel], [slEntityPickerOptionDescription], [slEntityPickerOptionMeta], [slEntityPickerOptionMedia]",
         "exportAs": "slEntityPicker"
       },
       "anatomy": [
@@ -610,12 +610,26 @@
           "appliesTo": "sl-entity-picker",
           "description": "The name when no field labels it"
         },
+        {
+          "name": "virtualize",
+          "type": "boolean",
+          "defaultValue": "above 100 options without headings",
+          "appliesTo": "sl-entity-picker",
+          "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": "sl-entity-picker",
+          "description": "The height an option is counted at until it has been drawn and measured"
+        },
         {
           "name": "slEntityPickerOption",
           "type": "ng-template, context { $implicit, query, selected, current, disabled }",
           "defaultValue": "—",
           "appliesTo": "option content",
-          "description": "The content of an option"
+          "description": "The content of an option, written with slEntityPickerOptionLabel, slEntityPickerOptionDescription, slEntityPickerOptionMeta and slEntityPickerOptionMedia, which place it in the row. With media=\"none\" an option draws its own face in slEntityPickerOptionMedia"
         },
         {
           "name": "slEntityPickerChip",
@@ -687,6 +701,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",
@@ -939,7 +954,7 @@
       "title": "Composition",
       "note": "An option template adds the team after the address; a chip template adds the role; provideSlotted says every sentence in Portuguese once.",
       "language": "html",
-      "source": "<sl-entity-picker aria-label=\"Reviewers\" selectionMode=\"multiple\" [source]=\"directory\">\n  <ng-template slEntityPickerOption let-person>\n    <span data-part=\"label\">{{ person.label }}</span>\n    <span data-part=\"description\">{{ person.description }} · Northwind</span>\n  </ng-template>\n  <ng-template slEntityPickerChip let-person>{{ person.label }} · {{ person.meta }}</ng-template>\n</sl-entity-picker>\n",
+      "source": "<sl-entity-picker aria-label=\"Reviewers\" selectionMode=\"multiple\" [source]=\"directory\">\n  <ng-template slEntityPickerOption let-person>\n    <span slEntityPickerOptionLabel>{{ person.label }}</span>\n    <span slEntityPickerOptionDescription>{{ person.description }} · Northwind</span>\n  </ng-template>\n  <ng-template slEntityPickerChip let-person>{{ person.label }} · {{ person.meta }}</ng-template>\n</sl-entity-picker>\n",
       "verdict": "excerpt"
     }
   ]

package/docs/entity-picker.md

@@ -6,10 +6,10 @@
 ## Import
 
 ```ts
-import { SlEntityPicker, SlEntityPickerChip, SlEntityPickerOption, provideEntityPickerDefaults } from '@slotted/angular/entity-picker';
+import { SlEntityPicker, SlEntityPickerChip, SlEntityPickerOption, SlEntityPickerOptionDescription, SlEntityPickerOptionLabel, SlEntityPickerOptionMedia, SlEntityPickerOptionMeta, provideEntityPickerDefaults } from '@slotted/angular/entity-picker';
 ```
 
-Selector: `sl-entity-picker, ng-template[slEntityPickerOption], ng-template[slEntityPickerChip]` · exportAs: `slEntityPicker`
+Selector: `sl-entity-picker, ng-template[slEntityPickerOption], ng-template[slEntityPickerChip], [slEntityPickerOptionLabel], [slEntityPickerOptionDescription], [slEntityPickerOptionMeta], [slEntityPickerOptionMedia]` · exportAs: `slEntityPicker`
 
 ## Minimal example
 
@@ -98,7 +98,9 @@ Excerpt — not a complete module
 | `locale` | `string` | — | sl-entity-picker | BCP 47. The language in force when absent |
 | `messages` | `Partial<EntityPickerMessages>` | — | sl-entity-picker | Words laid over the language in force, key by key; {count}, {query}, {label}, {id} and {max} are slots |
 | `aria-label` | `string` | — | sl-entity-picker | The name when no field labels it |
-| `slEntityPickerOption` | `ng-template, context { $implicit, query, selected, current, disabled }` | — | option content | The content of an option |
+| `virtualize` | `boolean` | above 100 options without headings | sl-entity-picker | 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 | sl-entity-picker | The height an option is counted at until it has been drawn and measured |
+| `slEntityPickerOption` | `ng-template, context { $implicit, query, selected, current, disabled }` | — | option content | The content of an option, written with slEntityPickerOptionLabel, slEntityPickerOptionDescription, slEntityPickerOptionMeta and slEntityPickerOptionMedia, which place it in the row. With media="none" an option draws its own face in slEntityPickerOptionMedia |
 | `slEntityPickerChip` | `ng-template, context { $implicit }` | — | chip words | The words of a chip |
 | `provideEntityPickerDefaults` | `(defaults) => Provider` | — | an injector | The decisions an application takes once |
 
@@ -147,7 +149,7 @@ Excerpt — not a complete module
 
 ## 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
 
@@ -357,8 +359,8 @@ Excerpt — not a complete module
 ```html
 <sl-entity-picker aria-label="Reviewers" selectionMode="multiple" [source]="directory">
   <ng-template slEntityPickerOption let-person>
-    <span data-part="label">{{ person.label }}</span>
-    <span data-part="description">{{ person.description }} · Northwind</span>
+    <span slEntityPickerOptionLabel>{{ person.label }}</span>
+    <span slEntityPickerOptionDescription>{{ person.description }} · Northwind</span>
   </ng-template>
   <ng-template slEntityPickerChip let-person>{{ person.label }} · {{ person.meta }}</ng-template>
 </sl-entity-picker>