@slotted/angular 0.1.0-beta.3 → 0.1.0-beta.4

package/docs/calendar.json

@@ -260,6 +260,13 @@
           "appliesTo": "SlCalendar",
           "description": "The view it opens on."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "SlCalendar",
+          "description": "What a choice is. month opens on the months of a year and never shows the day grid: a month cell is the value, written as the first day of that month, the arrow keys move one month or one row of four, Home and End reach January and December, Page Up and Page Down move a year, and Enter or Space chooses. A month the bounds leave no day of carries aria-disabled."
+        },
         {
           "name": "min",
           "type": "PlainDate",

package/docs/calendar.md

@@ -53,6 +53,7 @@ Excerpt — not a complete module
 | `months` | `number` | 1 | SlCalendar | How many months are drawn side by side. They wrap when they do not fit; nothing is withdrawn. |
 | `view` | `'day' \| 'month' \| 'year'` | day | SlCalendar | Which grid is showing. Present means the consumer owns it; defaultView sets the starting one. |
 | `defaultView` | `'day' \| 'month' \| 'year'` | day | SlCalendar | The view it opens on. |
+| `granularity` | `'day' \| 'month'` | day | SlCalendar | What a choice is. month opens on the months of a year and never shows the day grid: a month cell is the value, written as the first day of that month, the arrow keys move one month or one row of four, Home and End reach January and December, Page Up and Page Down move a year, and Enter or Space chooses. A month the bounds leave no day of carries aria-disabled. |
 | `min` | `PlainDate` | — | SlCalendar | The earliest date the reader may reach. An arrow that would leave the range stops at the edge. |
 | `max` | `PlainDate` | — | SlCalendar | The latest date the reader may reach. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | SlCalendar | Refuses particular dates. A refused date stays focusable and cannot be chosen. |

package/docs/date-field.json

@@ -127,7 +127,7 @@
           "type": "PlainDate | null",
           "defaultValue": "—",
           "appliesTo": "SlDateField",
-          "description": "The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it."
+          "description": "The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, and toISODate(date) returns 'YYYY-MM-DD'."
         },
         {
           "name": "defaultValue",
@@ -136,6 +136,13 @@
           "appliesTo": "SlDateField",
           "description": "The date the control starts from when nobody else writes one. Read once, in ngOnInit, because Angular binds inputs after it constructs a component."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "SlDateField",
+          "description": "What the control holds. month shows the month and the year segments in the locale’s order, takes the first day of the month as its value, and submits YYYY-MM through name."
+        },
         {
           "name": "min",
           "type": "PlainDate",

package/docs/date-field.md

@@ -40,8 +40,9 @@ Excerpt — not a complete module
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `value` | `PlainDate \| null` | — | SlDateField | The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. |
+| `value` | `PlainDate \| null` | — | SlDateField | The date the control shows. Present means the consumer owns it: the control asks and waits rather than moving it. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, and toISODate(date) returns 'YYYY-MM-DD'. |
 | `defaultValue` | `PlainDate \| null` | — | SlDateField | The date the control starts from when nobody else writes one. Read once, in ngOnInit, because Angular binds inputs after it constructs a component. |
+| `granularity` | `'day' \| 'month'` | day | SlDateField | What the control holds. month shows the month and the year segments in the locale’s order, takes the first day of the month as its value, and submits YYYY-MM through name. |
 | `min` | `PlainDate` | — | SlDateField | The earliest date the control accepts. Reported through each segment’s aria-valuemin, and as the slottedDateRange form error. |
 | `max` | `PlainDate` | — | SlDateField | The latest date the control accepts, on the same terms as min. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | SlDateField | Refuses particular dates — a weekend, a holiday, a day already booked. Reported as the slottedDateUnavailable form error. |

package/docs/date-picker.examples.md

@@ -877,6 +877,42 @@ export class DatePickerInvoiceDue {
 }
 ```
 
+### iso-date.ts
+
+Example
+
+```ts
+import { Component, computed, signal } from '@angular/core';
+import type { CalendarValue } from '@slotted/angular/calendar';
+import { SlDatePicker } from '@slotted/angular/date-picker';
+import { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';
+import { isPlainDate, parseISODate, toISODate } from '@slotted/core/date';
+
+@Component({
+  selector: 'app-date-picker-iso-date',
+  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],
+  template: `
+    <div slField>
+      <label slFieldLabel>Statement date</label>
+      <div slDatePicker [value]="date()" (valueChange)="set($event.value)"></div>
+      <span slFieldDescription>{{ summary() }}</span>
+    </div>
+  `,
+})
+export class DatePickerIsoDate {
+  /* The API carries the date as text; the picker holds a PlainDate. */
+  protected readonly iso = signal('2026-10-19');
+  protected readonly date = computed(() => parseISODate(this.iso()));
+  protected readonly summary = computed(() =>
+    this.iso() === '' ? 'No date sent.' : `The API receives ${this.iso()}.`,
+  );
+
+  protected set(value: CalendarValue): void {
+    this.iso.set(isPlainDate(value) ? toISODate(value) : '');
+  }
+}
+```
+
 ### locale.ts
 
 Example

package/docs/date-picker.json

@@ -134,14 +134,14 @@
       "api": [
         {
           "name": "value",
-          "type": "PlainDate | DateRange | PlainDate[] | null",
+          "type": "PlainDate | DateRange | PlainDate[] | PlainYearMonth | null",
           "defaultValue": "—",
           "appliesTo": "SlDatePicker",
-          "description": "The selected value, whose shape follows selectionMode. Binding it makes the value controlled."
+          "description": "The selected value, whose shape follows selectionMode. Binding it makes the value controlled. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, toISODate(date) returns 'YYYY-MM-DD', and isPlainDate(value) narrows the CalendarValue (valueChange) reports."
         },
         {
           "name": "defaultValue",
-          "type": "PlainDate | DateRange | PlainDate[] | null",
+          "type": "PlainDate | DateRange | PlainDate[] | PlainYearMonth | null",
           "defaultValue": "—",
           "appliesTo": "SlDatePicker",
           "description": "The starting value of an uncontrolled date picker. Read once, when the date picker initializes."
@@ -162,14 +162,14 @@
         },
         {
           "name": "min",
-          "type": "PlainDate",
+          "type": "PlainDate | PlainYearMonth",
           "defaultValue": "—",
           "appliesTo": "SlDatePicker",
           "description": "The earliest date the field and the calendar accept. Earlier days are disabled in the calendar, an earlier typed date marks the date picker invalid, and a form reports slottedDateRange."
         },
         {
           "name": "max",
-          "type": "PlainDate",
+          "type": "PlainDate | PlainYearMonth",
           "defaultValue": "—",
           "appliesTo": "SlDatePicker",
           "description": "The latest date the field and the calendar accept. Later days are disabled in the calendar, a later typed date marks the date picker invalid, and a form reports slottedDateRange."
@@ -181,6 +181,13 @@
           "appliesTo": "SlDatePicker",
           "description": "Returns true for a date the reader cannot choose. The calendar disables it, a typed unavailable date marks the date picker invalid, and a form reports slottedDateUnavailable."
         },
+        {
+          "name": "granularity",
+          "type": "'day' | 'month'",
+          "defaultValue": "day",
+          "appliesTo": "SlDatePicker",
+          "description": "What a choice is. month opens the calendar on the months of a year and chooses a month cell; the field shows the month and the year segments; value, defaultValue, min and max are PlainYearMonth from @slotted/core/date ({ year, month }), (valueChange) reports one, and name submits YYYY-MM. parseISOYearMonth and toISOYearMonth convert to and from that text. selectionMode, months, isDateUnavailable and the week inputs do not apply."
+        },
         {
           "name": "selectionMode",
           "type": "'single' | 'range' | 'multiple'",
@@ -636,6 +643,14 @@
       "source": "import { Component, computed, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { SlSelect, SlSelectItem, type SelectSelection } from '@slotted/angular/select';\nimport { SlStack } from '@slotted/angular/stack';\nimport {\n  addDays,\n  createDateFormat,\n  isPlainDate,\n  plainDate,\n  type PlainDate,\n} from '@slotted/core/date';\n\nconst TERMS = [\n  { value: 'receipt', label: 'Due on receipt', days: 0 },\n  { value: 'net-15', label: 'Net 15', days: 15 },\n  { value: 'net-30', label: 'Net 30', days: 30 },\n  { value: 'net-60', label: 'Net 60', days: 60 },\n];\nconst words = createDateFormat({ locale: 'en-US' });\n\n@Component({\n  selector: 'app-date-picker-invoice-due',\n  imports: [\n    SlDatePicker,\n    SlField,\n    SlFieldDescription,\n    SlFieldLabel,\n    SlSelect,\n    SlSelectItem,\n    SlStack,\n  ],\n  template: `\n    <div slStack [gap]=\"5\">\n      <div slField required>\n        <label slFieldLabel>Invoice date</label>\n        <div slDatePicker [value]=\"issued()\" (valueChange)=\"setIssued($event.value)\"></div>\n      </div>\n      <div slField>\n        <label slFieldLabel>Payment terms</label>\n        <sl-select [items]=\"terms\" [(value)]=\"term\">\n          @for (option of terms; track option.value) {\n            <sl-select-item [value]=\"option.value\">{{ option.label }}</sl-select-item>\n          }\n        </sl-select>\n      </div>\n      <div slField readOnly>\n        <label slFieldLabel>Due date</label>\n        <div slDatePicker [value]=\"due()\"></div>\n        <span slFieldDescription>{{ summary() }}</span>\n      </div>\n    </div>\n  `,\n})\nexport class DatePickerInvoiceDue {\n  protected readonly terms = TERMS;\n  protected readonly issued = signal<PlainDate | null>(plainDate(2026, 9, 30));\n  protected readonly term = signal<SelectSelection>('net-30');\n  protected readonly due = computed(() => {\n    const issued = this.issued();\n    const days = TERMS.find((option) => option.value === this.term())?.days ?? 0;\n    return issued === null ? null : addDays(issued, days);\n  });\n  protected readonly summary = computed(() => {\n    const due = this.due();\n    return due === null ? 'Set the invoice date first.' : `Payment is due ${words.describe(due)}.`;\n  });\n\n  protected setIssued(value: CalendarValue): void {\n    this.issued.set(isPlainDate(value) ? value : null);\n  }\n}\n",
       "verdict": "example"
     },
+    {
+      "id": "iso-date",
+      "title": "iso-date.ts",
+      "note": null,
+      "language": "ts",
+      "source": "import { Component, computed, signal } from '@angular/core';\nimport type { CalendarValue } from '@slotted/angular/calendar';\nimport { SlDatePicker } from '@slotted/angular/date-picker';\nimport { SlField, SlFieldDescription, SlFieldLabel } from '@slotted/angular/field';\nimport { isPlainDate, parseISODate, toISODate } from '@slotted/core/date';\n\n@Component({\n  selector: 'app-date-picker-iso-date',\n  imports: [SlDatePicker, SlField, SlFieldDescription, SlFieldLabel],\n  template: `\n    <div slField>\n      <label slFieldLabel>Statement date</label>\n      <div slDatePicker [value]=\"date()\" (valueChange)=\"set($event.value)\"></div>\n      <span slFieldDescription>{{ summary() }}</span>\n    </div>\n  `,\n})\nexport class DatePickerIsoDate {\n  /* The API carries the date as text; the picker holds a PlainDate. */\n  protected readonly iso = signal('2026-10-19');\n  protected readonly date = computed(() => parseISODate(this.iso()));\n  protected readonly summary = computed(() =>\n    this.iso() === '' ? 'No date sent.' : `The API receives ${this.iso()}.`,\n  );\n\n  protected set(value: CalendarValue): void {\n    this.iso.set(isPlainDate(value) ? toISODate(value) : '');\n  }\n}\n",
+      "verdict": "example"
+    },
     {
       "id": "locale",
       "title": "locale.ts",

package/docs/date-picker.md

@@ -50,13 +50,14 @@ export class DatePickerBasic {}
 
 | Name | Type | Default | Applies to | Description |
 | --- | --- | --- | --- | --- |
-| `value` | `PlainDate \| DateRange \| PlainDate[] \| null` | — | SlDatePicker | The selected value, whose shape follows selectionMode. Binding it makes the value controlled. |
-| `defaultValue` | `PlainDate \| DateRange \| PlainDate[] \| null` | — | SlDatePicker | The starting value of an uncontrolled date picker. Read once, when the date picker initializes. |
+| `value` | `PlainDate \| DateRange \| PlainDate[] \| PlainYearMonth \| null` | — | SlDatePicker | The selected value, whose shape follows selectionMode. Binding it makes the value controlled. PlainDate is exported by @slotted/core/date. parseISODate(text) returns a PlainDate or null, toISODate(date) returns 'YYYY-MM-DD', and isPlainDate(value) narrows the CalendarValue (valueChange) reports. |
+| `defaultValue` | `PlainDate \| DateRange \| PlainDate[] \| PlainYearMonth \| null` | — | SlDatePicker | The starting value of an uncontrolled date picker. Read once, when the date picker initializes. |
 | `open` | `boolean` | — | SlDatePicker | Whether the calendar is showing. Binding it makes the open state controlled. |
 | `defaultOpen` | `boolean` | false | SlDatePicker | Whether the calendar shows when the date picker initializes. Focus does not move into it. |
-| `min` | `PlainDate` | — | SlDatePicker | The earliest date the field and the calendar accept. Earlier days are disabled in the calendar, an earlier typed date marks the date picker invalid, and a form reports slottedDateRange. |
-| `max` | `PlainDate` | — | SlDatePicker | The latest date the field and the calendar accept. Later days are disabled in the calendar, a later typed date marks the date picker invalid, and a form reports slottedDateRange. |
+| `min` | `PlainDate \| PlainYearMonth` | — | SlDatePicker | The earliest date the field and the calendar accept. Earlier days are disabled in the calendar, an earlier typed date marks the date picker invalid, and a form reports slottedDateRange. |
+| `max` | `PlainDate \| PlainYearMonth` | — | SlDatePicker | The latest date the field and the calendar accept. Later days are disabled in the calendar, a later typed date marks the date picker invalid, and a form reports slottedDateRange. |
 | `isDateUnavailable` | `(date: PlainDate) => boolean` | — | SlDatePicker | Returns true for a date the reader cannot choose. The calendar disables it, a typed unavailable date marks the date picker invalid, and a form reports slottedDateUnavailable. |
+| `granularity` | `'day' \| 'month'` | day | SlDatePicker | What a choice is. month opens the calendar on the months of a year and chooses a month cell; the field shows the month and the year segments; value, defaultValue, min and max are PlainYearMonth from @slotted/core/date ({ year, month }), (valueChange) reports one, and name submits YYYY-MM. parseISOYearMonth and toISOYearMonth convert to and from that text. selectionMode, months, isDateUnavailable and the week inputs do not apply. |
 | `selectionMode` | `'single' \| 'range' \| 'multiple'` | single | SlDatePicker | How many dates the calendar selects, and so the shape of the value. The field shows a single date only; for a start and an end, use slDateRangePicker. |
 | `months` | `number` | 1 | SlDatePicker | How many months the calendar draws side by side. |
 | `defaultView` | `'day' \| 'month' \| 'year'` | day | SlDatePicker | The grid the calendar opens on. |

package/docs/guidelines/composition.md

@@ -127,3 +127,13 @@ Why: The line beside Reply and Internal note was longer in one mode and wrapped
 Do: Give the varying text `flex: 1 1 0`, `min-inline-size: 0` and a one-line cut, write the two texts to similar lengths, and keep a control's label set fixed across modes.
 Don't: Let a mode add or remove a line, a hint or a control that changes the region's height, or let a row wrap differently in one mode than in the other.
 Check: At 1280, 570 and 390 pixels, switch the mode and read the bounding box of each box in the region: every top and height is the same in both modes.
+
+### CP-09 · A control that switches a region does not render the region in its own frame
+
+Level: MUST
+Applies to: tabs, a segmented control, a route link or a filter whose change mounts a region holding tables, grids, charts or forms
+Rule: The control's own state — the selected tab, the pressed segment — updates in the interaction's frame; the region renders from a deferred value (in React, useDeferredValue or startTransition) and states aria-busy while the shown value lags the selected one.
+Why: Mounting a region of families in the click's task blocks the next paint, and Interaction to Next Paint above 200 ms is "needs improvement" and above 500 ms "poor": a table of a hundred rows of twenty cells measured 160 ms in one task in a development build, and a 4× CPU throttle takes its 93 ms in a production build past the first threshold.
+Do: Keep the selection state urgent and hand the region the deferred value; mount only the selected panel, with mount active.
+Don't: Set the selection and the region from one state update inside the click handler, or mount every panel to make switching look instant.
+Check: Switch the control with the CPU throttled 4× in Chrome: the selection marker moves in the next frame, and the Performance panel shows no long task between the click and that paint.

package/docs/guidelines/index.md

@@ -29,6 +29,7 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | CP-06 | SHOULD | A screen states a state once. Where the family has a state for it, the screen sets that state and adds nothing louder beside it. | `composition.md` |
 | CP-07 | SHOULD | A list page is `bleed` with `fill`; a record, a dashboard and an overview keep the default `wide`; a create or edit form is `content`; a page of preferences read as prose is `measure`. | `composition.md` |
 | CP-08 | MUST | Switching the mode changes the words and the values in the region, never the size, the line count or the position of any box in it or around it; text whose length differs between modes stands on one line, cut with an ellipsis and read whole from its title. | `composition.md` |
+| CP-09 | MUST | The control's own state — the selected tab, the pressed segment — updates in the interaction's frame; the region renders from a deferred value (in React, useDeferredValue or startTransition) and states aria-busy while the shown value lags the selected one. | `composition.md` |
 | CV-01 | MUST | From 600 pixels the conversation fills its region and scrolls on its own with the composer under it, and the record's context scrolls on its own beside it or behind a tab of the header; below 600 pixels the page scrolls, the composer is stuck to the bottom of the screen, and the record opens on its last message. | `conversations.md` |
 | CV-02 | SHOULD | A running clock says the business time left and the hour it falls due in the organization's zone, a passed one by how much and when it was due, a paused one that it is stopped and why; a queue's row says the span alone, and no clock is ever said in raw minutes. | `conversations.md` |
 | CV-03 | SHOULD | Each queue is a view of the list's `filter-bar`, a tree of the bar's own fields, labelled with the count of the rows it opens on; choosing it writes its pills, and editing a pill leaves a view the bar marks as changed. | `conversations.md` |
@@ -72,6 +73,7 @@ Every active rule, one line each. Load this first; load a topic file when the ta
 | LP-11 | SHOULD | Where the primary input is a touch screen, the list tools leave out the row density: the theme raises every density's rows to the touch target, and the tools keep the sort, the views and the columns on one line. | `list-pages.md` |
 | LP-12 | MUST | From 600 pixels of the page's width the listing takes the height the bar and the messages leave and scrolls its own rows while the page does not scroll; below 600 the page's `fill` does not apply, the listing is as tall as its rows and the page scrolls. | `list-pages.md` |
 | LP-13 | SHOULD | The mark takes the `sm` `size`; the default `md` belongs to a record's header and to a region with room around it. | `list-pages.md` |
+| LP-14 | MUST | A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto`; `table` is for sets the page bounds, such as a statement's lines or a record's related rows. | `list-pages.md` |
 | OV-01 | SHOULD | The figure leads to the list page of the records it counts, and that list opens with the figure's condition applied as the bar's own pills, which the reader removes like any other. | `overviews.md` |
 | OV-02 | SHOULD | Below 600 pixels the figures are one `list` of rows that are destinations — label, comparison, number — followed by the records to act on, the work in flight, the charts, and the history last. | `overviews.md` |
 | OV-03 | SHOULD | Where the reader's scope holds one category, the chart is not drawn and one sentence states the numbers it would have compared. | `overviews.md` |

package/docs/guidelines/list-pages.md

@@ -27,7 +27,8 @@ triggers:
     badge,
     tag,
   ]
-families: [data-grid, filter-bar, action-bar, pagination, page, page-header, link, badge, tag]
+families:
+  [data-grid, table, filter-bar, action-bar, pagination, page, page-header, link, badge, tag]
 ---
 
 # List pages
@@ -163,3 +164,13 @@ Why: A row sets its text at the small type step, 13 pixels in a 34-pixel row; an
 Do: Give every mark a cell holds — a state, a flag, a warning — the `sm` `size`: 12-pixel words in a 19-pixel box.
 Don't: Leave a cell's mark at the family's default, or size it up to make a state stand out; a tone says that.
 Check: On every list, every `badge` and `tag` inside a cell of a `data-grid` or a `table` carries the `sm` `size`.
+
+### LP-14 · A list that can pass a hundred rows is a data-grid
+
+Level: MUST
+Applies to: a list of records whose count the reader does not bound — transactions, postings, imports
+Rule: A list that can hold more than a hundred rows, or more than twenty columns, is a `data-grid`, which windows rows and middle columns under its default `virtualize` of `auto`; `table` is for sets the page bounds, such as a statement's lines or a record's related rows.
+Why: `table` mounts every cell: a hundred rows of twenty columns measured 93 ms in one task with a production build of React in Chrome and 160 ms with a development build, and the count of rows the store returns sets that cost.
+Do: Give the store's list a `data-grid` with its query, and keep `table` for the bounded sets inside a record or a document.
+Don't: Render an unbounded store into a `table`, or page a `table` to keep it under a hundred rows where the grid's window would have kept the whole set reachable.
+Check: Every list over an unbounded store is a `data-grid`; every `table` on a page renders a set the page bounds.

package/docs/page.json

@@ -221,6 +221,7 @@
       "accessibility": [
         "The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. Write it on a main element and the directive adds nothing; on any other element it writes role=\"main\", unless landmark=\"none\" says the document already has one.",
         "The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise — read with HostAttributeToken, so the consumer’s word is never written over.",
+        "Content outside slPageBody receives no inset: the inset lives on the body, so content written straight into slPage is drawn against the viewport edges. In development, slPage warns once when it holds content and no slPageBody.",
         "The outline is typography’s. slHeadingLevel is a host directive of the body, so a section written directly in it takes h2 under the header’s h1 and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.",
         "The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.",
         "Scrolling is the platform’s. The page never writes a scroll position, and under scroll=\"self\" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus."

package/docs/page.md

@@ -67,6 +67,7 @@ Excerpt — not a complete module
 
 - The practice is the WAI-ARIA APG’s Landmark Regions (w3.org/WAI/ARIA/apg/practices/landmark-regions/): each page should have one main landmark, and the page is it. Write it on a main element and the directive adds nothing; on any other element it writes role="main", unless landmark="none" says the document already has one.
 - The footer is a footer element inside main, which is not a contentinfo landmark, so it is named: the catalog’s footer message by default, an aria-label the consumer writes otherwise — read with HostAttributeToken, so the consumer’s word is never written over.
+- Content outside slPageBody receives no inset: the inset lives on the body, so content written straight into slPage is drawn against the viewport edges. In development, slPage warns once when it holds content and no slPageBody.
 - The outline is typography’s. slHeadingLevel is a host directive of the body, so a section written directly in it takes h2 under the header’s h1 and a section inside that takes h3 — without either family reading the other, and without a skip the HTML Standard forbids.
 - The body carries aria-busy while loading, which is what tells a screen reader the region is not ready. The page draws no placeholder: the header stands skeleton text of the title’s own width, and each family inside stands its own.
 - Scrolling is the platform’s. The page never writes a scroll position, and under scroll="self" the scroll part is an ordinary scrolling box a keyboard reaches with the arrow keys once something inside it has focus.

package/docs/skills/compose-screen/SKILL.md

@@ -59,6 +59,10 @@ element stands in that slot.
   nothing louder beside it (CP-06).
 - A control that switches what a region holds changes words and values, never
   the size or the position of a box (CP-08).
+- A control that switches a region — tabs, a route, a filter — updates its
+  own state at once and renders the region from a deferred value (in React,
+  useDeferredValue or startTransition) (CP-09). A list longer than a hundred
+  rows is a `data-grid`, which windows its rows (LP-14).
 - Where no anatomy answers the problem, the screen writes an element of its
   own instead of bending a family into a shape it does not have (CP-04). That
   element is built with `node_modules/@slotted/angular/docs/skills/build-own-element/SKILL.md`.
@@ -74,3 +78,6 @@ Every region filled by a request and every control that starts one follow
 2. Each `SHOULD` rule not followed is listed with its reason.
 3. No CSS of the screen's own targets a family's parts; a family's appearance
    changes through its axes.
+4. In a browser with the CPU throttled 4×, each control that switches a region
+   paints its new state in the next frame, with no long task between the input
+   and that paint.

package/docs/table.json

@@ -12,6 +12,10 @@
       "ruled",
       "framed"
     ],
+    "edges": [
+      "inset",
+      "flush"
+    ],
     "striped": [
       true,
       false
@@ -71,6 +75,7 @@
       "nativeElement": "div",
       "defaults": {
         "variant": "ruled",
+        "edges": "inset",
         "striped": false,
         "stickyHeader": false,
         "stickyTo": "scroll",
@@ -420,6 +425,13 @@
           "appliesTo": "slTable",
           "description": "How much of a frame the set is given"
         },
+        {
+          "name": "edges",
+          "type": "'inset' | 'flush'",
+          "defaultValue": "inset",
+          "appliesTo": "slTable",
+          "description": "Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets"
+        },
         {
           "name": "striped",
           "type": "boolean",
@@ -809,6 +821,7 @@
     "--slotted-table-color-muted",
     "--slotted-table-column-actions-size",
     "--slotted-table-control-radius",
+    "--slotted-table-edge-inset",
     "--slotted-table-font-family",
     "--slotted-table-font-size",
     "--slotted-table-gap",

package/docs/table.md

@@ -205,6 +205,7 @@ export class TableBasic {
 | `expanded` | `model<readonly string[]>` | [] | slTable | The rows whose detail is open, two-way |
 | `defaultExpanded` | `model initial value` | [] | slTable | The details an unbound table starts with |
 | `variant` | `'plain' \| 'ruled' \| 'framed'` | ruled | slTable | How much of a frame the set is given |
+| `edges` | `'inset' \| 'flush'` | inset | slTable | Whether the first and the last column keep the cell inset on their outer side. flush lines a plain or ruled table up with the heading around it, leaving the theme’s --slotted-table-edge-inset (0 unless set); a framed table ignores it. Sticky and selection columns keep their own offsets |
 | `striped` | `boolean` | false | slTable | A tinted ground on every second record |
 | `stickyHeader` | `boolean` | false | slTable | Whether the header stays while the body scrolls |
 | `stickyFooter` | `boolean` | false | slTable | Whether the summary rows stay while the body scrolls. It pins the tfoot and not the footer bar, which never scrolls. |
@@ -265,6 +266,7 @@ export class TableBasic {
 | Axis | Values | Default |
 | --- | --- | --- |
 | `variant` | `plain`, `ruled`, `framed` | `ruled` |
+| `edges` | `inset`, `flush` | `inset` |
 | `striped` | `true`, `false` | `false` |
 | `stickyHeader` | `true`, `false` | `false` |
 | `stickyFooter` | `true`, `false` | `false` |
@@ -292,7 +294,7 @@ export class TableBasic {
 
 ## Tokens
 
-`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-group-color`, `--slotted-table-group-sticky-offset`, `--slotted-table-group-surface`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-current`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-sticky`
+`--slotted-border-strong`, `--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-font-family`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-icon-size-md`, `--slotted-control-padding-inline-md`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-disabled-foreground`, `--slotted-duration-short`, `--slotted-easing-standard`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-size-xs`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-font-weight-semibold`, `--slotted-ground`, `--slotted-line-height-md`, `--slotted-radius-md`, `--slotted-radius-sm`, `--slotted-shadow-xs`, `--slotted-space-2`, `--slotted-space-5`, `--slotted-space-9`, `--slotted-surface`, `--slotted-table-border-color`, `--slotted-table-border-color-strong`, `--slotted-table-border-width`, `--slotted-table-cell-padding-block`, `--slotted-table-cell-padding-inline`, `--slotted-table-color`, `--slotted-table-color-muted`, `--slotted-table-column-actions-size`, `--slotted-table-control-radius`, `--slotted-table-edge-inset`, `--slotted-table-font-family`, `--slotted-table-font-size`, `--slotted-table-gap`, `--slotted-table-group-color`, `--slotted-table-group-sticky-offset`, `--slotted-table-group-surface`, `--slotted-table-header-surface`, `--slotted-table-header-surface-hover`, `--slotted-table-icon-size`, `--slotted-table-radius`, `--slotted-table-row-color-selected`, `--slotted-table-row-min-block-size`, `--slotted-table-row-surface-current`, `--slotted-table-row-surface-hover`, `--slotted-table-row-surface-selected`, `--slotted-table-row-surface-selected-hover`, `--slotted-table-row-surface-stripe`, `--slotted-table-selection-size`, `--slotted-table-shadow`, `--slotted-table-sticky-inset`, `--slotted-table-sticky-offset`, `--slotted-table-sticky-offset-end`, `--slotted-table-surface`, `--slotted-target-comfortable`, `--slotted-target-min`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-surface`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`, `--slotted-z-index-sticky`
 
 ## Examples
 

package/docs/text-field.json

@@ -256,7 +256,7 @@
           "type": "'text' | 'search' | 'email' | 'url' | 'tel' | 'password'",
           "defaultValue": "text",
           "appliesTo": "the input element",
-          "description": "The input’s own type, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote."
+          "description": "The input’s own type, one of the six listed, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. A date, a time, a month or a number is not a text field: use date-picker (forms.md FM-16), time-picker or number-field. Other strings still reach the element for compatibility and are not supported."
         },
         {
           "name": "copyable",

package/docs/text-field.md

@@ -78,7 +78,7 @@ export class TextFieldBasic {}
 | `readOnly` | `boolean` | from the field, or false | slTextFieldInput | Unset by default, so the input takes the state of the field around it. It is the native readonly: the input stays focusable and selectable, and its value is submitted. A static readonly attribute you write is read before the binding computes. |
 | `invalid` | `boolean` | from the field, or false | slTextFieldInput | Unset by default, so the input takes the state of the field around it. It sets aria-invalid on the input and data-invalid on the frame. |
 | `required` | `boolean` | — | the input element | The input’s own attribute; slTextFieldInput never writes it. A field marks a required value with aria-required instead, because the native attribute turns on browser constraint validation. |
-| `type` | `'text' \| 'search' \| 'email' \| 'url' \| 'tel' \| 'password'` | text | the input element | The input’s own type, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. |
+| `type` | `'text' \| 'search' \| 'email' \| 'url' \| 'tel' \| 'password'` | text | the input element | The input’s own type, one of the six listed, written as a static attribute. It is read before the host binding computes, so the reveal toggle can swap it and restore what you wrote. A date, a time, a month or a number is not a text field: use date-picker (forms.md FM-16), time-picker or number-field. Other strings still reach the element for compatibility and are not supported. |
 | `copyable` | `boolean` | false | slTextField | Draws a button that writes the value to the clipboard, shows a check for two seconds and announces the outcome. It is hidden while the value is empty or the input is disabled. |
 | `loading` | `boolean` | false | slTextField | Draws the shared spinner before the buttons and sets aria-busy on the input; the value stays editable. Once loading is bound, false included, the spinner keeps its place so it can leave with a transition. |
 | `messages` | `Partial<TextFieldMessages>` | — | slTextField | Replaces words of the active language, key by key. clear, reveal and copy name the buttons; reveal does not change with the state, because aria-pressed carries it. copied and copyFailed announce the outcome of a copy. capsLock is announced once when Caps Lock turns on in a focused password field. |