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

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",
@@ -760,6 +771,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",
@@ -769,6 +781,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 +825,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 +938,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 +1098,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-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/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

@@ -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",
@@ -247,9 +248,9 @@
         {
           "name": "size",
           "type": "'sm' | 'md' | 'lg' | 'xl' | 'full' | 'content'",
-          "defaultValue": "md",
+          "defaultValue": "content on top and bottom, md on start and end",
           "appliesTo": "<sl-drawer>, provideDrawerDefaults",
-          "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",
@@ -405,6 +406,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",
@@ -458,6 +464,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/docs/drawer.md

@@ -133,7 +133,7 @@ export class DrawerBasic {
 | `snapPoints` | `readonly number[]` | — | <sl-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 | <sl-drawer>, provideDrawerDefaults | 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 | <sl-drawer>, provideDrawerDefaults | 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 | <sl-drawer>, provideDrawerDefaults | 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 | <sl-drawer>, provideDrawerDefaults | 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 | <sl-drawer>, provideDrawerDefaults | 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 | <sl-drawer>, provideDrawerDefaults | 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 | <sl-drawer>, provideDrawerDefaults | 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. |
@@ -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. |
@@ -171,7 +172,7 @@ export class 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` |
@@ -192,7 +193,7 @@ export class 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