@slotted/angular 0.0.0-stage → 0.1.0-beta.1

package/docs/saved-views.json

@@ -0,0 +1,384 @@
+{
+  "family": "saved-views",
+  "ui": "saved-views",
+  "binding": "angular",
+  "catalog": {
+    "group": "Data display",
+    "summary": "Named, saved sets of filters for a list."
+  },
+  "axes": {},
+  "members": {
+    "savedViews": {
+      "nativeElement": "div",
+      "defaults": {
+        "defaultOpen": false
+      },
+      "capabilities": [
+        "views",
+        "open",
+        "live",
+        "content",
+        "wiring"
+      ],
+      "states": [
+        "default",
+        "hover",
+        "active",
+        "focus-visible",
+        "open",
+        "current"
+      ],
+      "parts": [
+        "root",
+        "trigger",
+        "modified",
+        "revert",
+        "panel",
+        "list",
+        "item",
+        "apply",
+        "default-mark",
+        "actions",
+        "form",
+        "footer",
+        "confirm"
+      ]
+    }
+  },
+  "docs": {
+    "savedViews": {
+      "imports": {
+        "source": "import { SlSavedViews, persistedSavedViews } from '@slotted/angular/saved-views';\nimport type { GridView, SavedViewsState } from '@slotted/core/grid';",
+        "selector": "sl-saved-views",
+        "exportAs": "slSavedViews"
+      },
+      "anatomy": [
+        {
+          "part": "root",
+          "element": "sl-saved-views",
+          "required": true,
+          "purpose": "The host: role=\"group\" named by label, data-ui=\"saved-views\", data-modified while the grid differs from the view in use, data-open while the layer is open. A role or aria-label written on the host wins."
+        },
+        {
+          "part": "trigger",
+          "element": "button[slPopoverTrigger]",
+          "required": true,
+          "purpose": "Names the view in use — Default when none is — truncated on one line with the whole name in title and in the DOM, then modified, then a chevron. Opens the popover (aria-haspopup=\"dialog\")."
+        },
+        {
+          "part": "modified",
+          "element": "span",
+          "required": false,
+          "purpose": "Inside the trigger while the grid differs from the view in use: a dot in the accent solid and the word Modified, so the state is never colour alone."
+        },
+        {
+          "part": "revert",
+          "element": "button",
+          "required": false,
+          "purpose": "Beside the trigger while modified: asks for the view in use again, emits viewApply with action revert and moves focus to the trigger."
+        },
+        {
+          "part": "panel",
+          "element": "div inside slPopoverContent",
+          "required": true,
+          "purpose": "Carries data-ui=\"saved-views\" itself, because the layer is portalled out of the host. At --slotted-saved-views-panel-inline-size, narrowing when the popover has less room."
+        },
+        {
+          "part": "list",
+          "element": "ul role=\"list\"",
+          "required": true,
+          "purpose": "The built-in view first, then the saved views in the order the state holds them."
+        },
+        {
+          "part": "item",
+          "element": "li",
+          "required": true,
+          "purpose": "One view: data-view with its id, data-current on the view in use, data-default on the default, data-built-in on the built-in view, data-editing while its form or confirmation replaces it."
+        },
+        {
+          "part": "apply",
+          "element": "button",
+          "required": true,
+          "purpose": "The view’s name across the row; aria-current=\"true\" and a check on the view in use. A long name wraps; nothing is cut."
+        },
+        {
+          "part": "default-mark",
+          "element": "span inside apply",
+          "required": false,
+          "purpose": "A pin after the name of the view a visit opens on, with the word default hidden for the eye, so the button reads “Late orders default”."
+        },
+        {
+          "part": "actions",
+          "element": "button[slMenuTriggerFor]",
+          "required": true,
+          "purpose": "The row’s sl-menu, named “Actions for {name}”: Rename, Set as default, Delete. On the built-in view only Set as default."
+        },
+        {
+          "part": "form",
+          "element": "form",
+          "required": false,
+          "purpose": "An slField with the name label, an slTextField and the slFieldError, then Cancel and the submit: in the row for a rename, above the footer for Save as new view…"
+        },
+        {
+          "part": "footer",
+          "element": "div",
+          "required": true,
+          "purpose": "Save as new view… and Save. Save overwrites the view in use and is disabled on the built-in view and while nothing is modified."
+        },
+        {
+          "part": "confirm",
+          "element": "div role=\"group\"",
+          "required": false,
+          "purpose": "In the row being deleted: “Delete “{name}”?”, Cancel and Delete in the danger tone. Focus lands on Cancel."
+        }
+      ],
+      "api": [
+        {
+          "name": "current",
+          "type": "input.required<GridView>",
+          "defaultValue": "—",
+          "appliesTo": "sl-saved-views",
+          "description": "The view the grid shows now: its column state, query and density. Compared with the view in use by sameGridView"
+        },
+        {
+          "name": "builtIn",
+          "type": "input.required<GridView>",
+          "defaultValue": "—",
+          "appliesTo": "sl-saved-views",
+          "description": "The built-in view, named messages.builtIn: the application’s defaults, emitted when it is applied"
+        },
+        {
+          "name": "columns",
+          "type": "readonly GridColumn[]",
+          "defaultValue": "—",
+          "appliesTo": "sl-saved-views",
+          "description": "The model, so views are serialized and compared against the columns they name"
+        },
+        {
+          "name": "state",
+          "type": "model<SavedViewsState | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "sl-saved-views",
+          "description": "The views: { views, defaultId, activeId }. Two-way; cancel stateChangeRequest to hold it"
+        },
+        {
+          "name": "defaultState",
+          "type": "SavedViewsState",
+          "defaultValue": "no views",
+          "appliesTo": "sl-saved-views",
+          "description": "The views an unbound instance starts from"
+        },
+        {
+          "name": "open",
+          "type": "model<boolean | undefined>",
+          "defaultValue": "—",
+          "appliesTo": "sl-saved-views",
+          "description": "Whether the layer is open. Two-way"
+        },
+        {
+          "name": "defaultOpen",
+          "type": "boolean",
+          "defaultValue": "false",
+          "appliesTo": "sl-saved-views",
+          "description": "The layer an unbound instance starts with"
+        },
+        {
+          "name": "messages",
+          "type": "Partial<SavedViewsMessages>",
+          "defaultValue": "—",
+          "appliesTo": "sl-saved-views",
+          "description": "Words laid over the language in force, key by key: the group’s and the panel’s name (label) and every other word; {name} is the view’s name"
+        },
+        {
+          "name": "exportAs",
+          "type": "slSavedViews",
+          "defaultValue": "—",
+          "appliesTo": "sl-saved-views",
+          "description": "show(), hide(), focus(), apply(id) — show, hide and apply with the reason programmatic"
+        },
+        {
+          "name": "persistedSavedViews",
+          "type": "({ key, storage?, columns?, injector? }) => { state, openedDefault }",
+          "defaultValue": "localStorage",
+          "appliesTo": "an injection context",
+          "description": "A WritableSignal read once and written from an effect after every change; tolerates a store that throws, and null keeps the views in memory"
+        },
+        {
+          "name": "native attributes",
+          "type": "role, aria-label, data-*",
+          "defaultValue": "—",
+          "appliesTo": "sl-saved-views",
+          "description": "A static role or aria-label written on the host is read before the host bindings and wins"
+        }
+      ],
+      "composition": [],
+      "events": [
+        {
+          "name": "stateChangeRequest",
+          "payload": "SavedViewsRequest — { value, previous, reason, action, source, cancelled, cancel() }",
+          "when": "Before the views move: apply, save, create, rename, delete, default. Reasons pointer and keyboard from presses, submit from a form, remove from a confirmed delete, programmatic from apply(). Not emitted when the state would not change; cancel() keeps the model where it was and nothing is applied."
+        },
+        {
+          "name": "stateChange",
+          "payload": "SavedViewsState",
+          "when": "The model’s own event, after a request that was not refused; what [(state)] binds."
+        },
+        {
+          "name": "viewApply",
+          "payload": "{ view: GridView, request: SavedViewsRequest }",
+          "when": "After an apply or a revert the state request did not refuse: the saved view parsed with parseGridView against columns, or builtIn for the built-in view. The consumer writes it into the grid."
+        },
+        {
+          "name": "openChangeRequest",
+          "payload": "ChangeRequest<boolean>",
+          "when": "Before the layer moves: pointer or keyboard on the trigger, escape, outsidePress, apply and save closing it, programmatic from show() and hide(). Escape with a form open is not emitted: the form is cancelled instead."
+        }
+      ],
+      "accessibility": [
+        "No WAI-ARIA Authoring Practices pattern covers a list of named views, so the family is built from the ones that do: the trigger opens a non-modal dialog (aria-haspopup=\"dialog\", aria-expanded, aria-controls) held by the popover family, and each row’s actions control is the Menu Button pattern held by the menu family. Inside the panel everything is a native button, a list and a form in native tab order.",
+        "The host is a group named Views, so the trigger reads “Late orders Modified, button, Views group”. The view in use carries aria-current=\"true\" and a check; the default view reads “default” after its name from a hidden word beside the pin. Modified is a word and a dot, never the dot alone.",
+        "Escape inside a form or a confirmation cancels it and keeps the panel open — the popover asks to close in the capture phase and the family refuses that request; a second Escape closes the panel and focus returns to the trigger. A submitted form focuses the row it changed, a cancelled one the control that opened it, a confirmed delete the row above.",
+        "An empty or duplicate name marks the field invalid, and the error joins the input’s description through the field family. Applying, saving, renaming, deleting and moving the default are announced politely through the shared live announcer, because each changes something outside the focused control."
+      ]
+    }
+  },
+  "tokens": [
+    "--slotted-border-subtle",
+    "--slotted-border-width-thin",
+    "--slotted-control-border-color",
+    "--slotted-control-border-width",
+    "--slotted-control-font-size-md",
+    "--slotted-control-gap-md",
+    "--slotted-control-height-md",
+    "--slotted-control-height-sm",
+    "--slotted-control-icon-size-md",
+    "--slotted-control-icon-size-sm",
+    "--slotted-control-padding-inline-md",
+    "--slotted-control-radius",
+    "--slotted-control-shadow",
+    "--slotted-control-surface",
+    "--slotted-control-transition-duration",
+    "--slotted-control-transition-easing",
+    "--slotted-duration-instant",
+    "--slotted-focus-ring-color",
+    "--slotted-focus-ring-offset",
+    "--slotted-focus-ring-width",
+    "--slotted-font-family-sans",
+    "--slotted-font-weight-medium",
+    "--slotted-font-weight-regular",
+    "--slotted-line-height-md",
+    "--slotted-radius-full",
+    "--slotted-saved-views-panel-inline-size",
+    "--slotted-space-1",
+    "--slotted-space-2",
+    "--slotted-space-3",
+    "--slotted-space-4",
+    "--slotted-surface-sunken",
+    "--slotted-text",
+    "--slotted-text-muted",
+    "--slotted-tone-accent-solid",
+    "--slotted-tone-accent-subtle-active",
+    "--slotted-tone-accent-subtle-hover",
+    "--slotted-tone-accent-text",
+    "--slotted-tone-secondary-subtle-active",
+    "--slotted-tone-secondary-subtle-hover"
+  ],
+  "examples": [
+    {
+      "id": "playground",
+      "title": "Playground",
+      "note": "Open the trigger and apply My region: the line below changes to the view the family handed over. Press Sort by total to make the view in use differ from its saved form.",
+      "language": "html",
+      "source": "<sl-saved-views\n  [builtIn]=\"defaults\"\n  [columns]=\"columns\"\n  [current]=\"current()\"\n  [defaultState]=\"views\"\n  (viewApply)=\"current.set($event.view)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "modified-and-revert",
+      "title": "Modified, and Revert",
+      "note": "The view in use differs from Late orders by its sort: the trigger carries the dot and the word, Revert sits beside it, and Save in the panel is enabled. Revert hands the saved view back through viewApply.",
+      "language": "html",
+      "source": "<sl-saved-views\n  [builtIn]=\"defaults\"\n  [current]=\"current()\"\n  [(state)]=\"views\"\n  (viewApply)=\"current.set($event.view)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "save-as",
+      "title": "Save as a new view",
+      "note": "Save as new view… opens a named field above the footer. An empty name and a name another view has — case aside, Default included — mark the field invalid with its message; a valid one creates the view from the current one and makes it the view in use.",
+      "language": "html",
+      "source": "<sl-saved-views\n  [builtIn]=\"defaults\"\n  [current]=\"current()\"\n  [(state)]=\"views\"\n  (stateChangeRequest)=\"$event.action === 'create' && track($event.value.views.length)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "rename",
+      "title": "Rename in the row",
+      "note": "The row’s menu, then Rename: the row becomes the form holding the name, Enter submits with the reason submit and focus returns to the renamed row. Escape cancels the form and leaves the panel open.",
+      "language": "html",
+      "source": "<sl-saved-views\n  [builtIn]=\"defaults\"\n  [current]=\"current()\"\n  [(state)]=\"views\"\n  (stateChangeRequest)=\"$event.action === 'rename' && !canRename && $event.cancel()\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "delete",
+      "title": "Delete, confirmed in the row",
+      "note": "Delete asks in place, naming the view, with focus on Cancel. Confirming carries the reason remove. Deleting the view in use leaves the built-in view in its place, and the grid keeps its arrangement — which then reads as modified.",
+      "language": "html",
+      "source": "<sl-saved-views\n  [builtIn]=\"defaults\"\n  [current]=\"current()\"\n  [(state)]=\"views\"\n  (stateChangeRequest)=\"$event.action === 'delete' && api.deleteView($event.previous)\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "default-view",
+      "title": "The default view",
+      "note": "Set as default moves the pin: that view is the one a visit opens on. With persistedSavedViews, a visit whose store holds no view in use opens on the default and hands it over once as openedDefault.",
+      "language": "ts",
+      "source": "const views = persistedSavedViews({ key: 'orders:views', columns });\nconst grid = persistedGridView({\n  key: 'orders:grid',\n  columns,\n  defaultQuery: views.openedDefault?.query,\n});\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "built-in",
+      "title": "The built-in view",
+      "note": "Default is the application’s own arrangement: first in the list, never renamed, overwritten or deleted, and its menu holds Set as default alone. On it Save is disabled; Save as new view… is how a reader keeps a change.",
+      "language": "html",
+      "source": "<sl-saved-views\n  [builtIn]=\"defaults\"\n  [current]=\"current()\"\n  [defaultState]=\"{ views: views, defaultId: null, activeId: null }\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "persistence",
+      "title": "Kept across visits",
+      "note": "persistedSavedViews reads the store once with parseSavedViews — total, so a malformed entry is no views — and writes serializeSavedViews after each change from an effect. The field shows the entry as it is written. A store that throws leaves the views in memory.",
+      "language": "html",
+      "source": "<sl-saved-views [builtIn]=\"defaults\" [current]=\"current()\" [(state)]=\"views.state\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "with-data-grid",
+      "title": "Over a data grid",
+      "note": "The family above an sl-data-grid bound through persistedGridView: the store opens on Late orders, the default. Sort a column, hide one or change the search, and the trigger says Modified; apply High value and the grid takes its sort and its compact density.",
+      "language": "html",
+      "source": "<sl-saved-views\n  [builtIn]=\"defaults\"\n  [columns]=\"columns\"\n  [current]=\"{ columns: grid.columnState(), query: grid.query(), density: grid.density() }\"\n  [(state)]=\"views.state\"\n  (viewApply)=\"write($event.view)\"\n/>\n<sl-data-grid\n  aria-label=\"Orders\"\n  rowKey=\"id\"\n  [columns]=\"columns\"\n  [rows]=\"orders\"\n  [(query)]=\"grid.query\"\n  [(columnState)]=\"grid.columnState\"\n  [density]=\"grid.density()\"\n/>\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "keyboard",
+      "title": "Keyboard",
+      "note": "Tab to the trigger and press Enter: focus lands on the view in use. Tab walks apply and actions row by row, then the footer. In a form Enter submits and Escape cancels the form without closing the panel; a second Escape closes it and focus returns to the trigger.",
+      "language": "html",
+      "source": "<button slButton type=\"button\" (click)=\"views.show()\">Open the views</button>\n<sl-saved-views #views=\"slSavedViews\" [builtIn]=\"defaults\" [current]=\"current()\" />\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "accessibility",
+      "title": "What a reader hears",
+      "note": "The host is a group named Views; the trigger says the view and Modified; the view in use carries aria-current; the default reads “default” after its name. Applying, saving, renaming, deleting and moving the default are announced politely.",
+      "language": "ts",
+      "source": "providers: [provideSlotted({ locale: 'pt-BR', catalogs: { 'pt-BR': PT_BR } })];\n",
+      "verdict": "excerpt"
+    },
+    {
+      "id": "long-names",
+      "title": "Long names",
+      "note": "A name longer than the trigger is cut with an ellipsis there, with the whole name in title and in the accessible name; in the list it wraps, and a single unbroken reference breaks anywhere rather than pushing the actions out of the row.",
+      "language": "ts",
+      "source": "const views: SavedViewsState = {\n  views: [{ id: 'mw', name: 'Late orders from the Midwest distributors', view }],\n  defaultId: 'mw',\n  activeId: 'mw',\n};\n",
+      "verdict": "excerpt"
+    }
+  ]
+}

package/docs/saved-views.md

@@ -0,0 +1,242 @@
+<!-- index: ./index.md -->
+# saved-views
+
+`data-ui="saved-views"` · Named, saved sets of filters for a list.
+
+## Import
+
+```ts
+import { SlSavedViews, persistedSavedViews } from '@slotted/angular/saved-views';
+import type { GridView, SavedViewsState } from '@slotted/core/grid';
+```
+
+Selector: `sl-saved-views` · exportAs: `slSavedViews`
+
+## Minimal example
+
+Excerpt — not a complete module
+
+```html
+<sl-saved-views
+  [builtIn]="defaults"
+  [columns]="columns"
+  [current]="current()"
+  [defaultState]="views"
+  (viewApply)="current.set($event.view)"
+/>
+```
+
+## Anatomy
+
+| Part | Element | Required |
+| --- | --- | --- |
+| `root` | sl-saved-views | yes |
+| `trigger` | button[slPopoverTrigger] | yes |
+| `modified` | span | no |
+| `revert` | button | no |
+| `panel` | div inside slPopoverContent | yes |
+| `list` | ul role="list" | yes |
+| `item` | li | yes |
+| `apply` | button | yes |
+| `default-mark` | span inside apply | no |
+| `actions` | button[slMenuTriggerFor] | yes |
+| `form` | form | no |
+| `footer` | div | yes |
+| `confirm` | div role="group" | no |
+
+## Props
+
+| Name | Type | Default | Applies to | Description |
+| --- | --- | --- | --- | --- |
+| `current` | `input.required<GridView>` | — | sl-saved-views | The view the grid shows now: its column state, query and density. Compared with the view in use by sameGridView |
+| `builtIn` | `input.required<GridView>` | — | sl-saved-views | The built-in view, named messages.builtIn: the application’s defaults, emitted when it is applied |
+| `columns` | `readonly GridColumn[]` | — | sl-saved-views | The model, so views are serialized and compared against the columns they name |
+| `state` | `model<SavedViewsState \| undefined>` | — | sl-saved-views | The views: { views, defaultId, activeId }. Two-way; cancel stateChangeRequest to hold it |
+| `defaultState` | `SavedViewsState` | no views | sl-saved-views | The views an unbound instance starts from |
+| `open` | `model<boolean \| undefined>` | — | sl-saved-views | Whether the layer is open. Two-way |
+| `defaultOpen` | `boolean` | false | sl-saved-views | The layer an unbound instance starts with |
+| `messages` | `Partial<SavedViewsMessages>` | — | sl-saved-views | Words laid over the language in force, key by key: the group’s and the panel’s name (label) and every other word; {name} is the view’s name |
+| `exportAs` | `slSavedViews` | — | sl-saved-views | show(), hide(), focus(), apply(id) — show, hide and apply with the reason programmatic |
+| `persistedSavedViews` | `({ key, storage?, columns?, injector? }) => { state, openedDefault }` | localStorage | an injection context | A WritableSignal read once and written from an effect after every change; tolerates a store that throws, and null keeps the views in memory |
+| `native attributes` | `role, aria-label, data-*` | — | sl-saved-views | A static role or aria-label written on the host is read before the host bindings and wins |
+
+## Events
+
+| Name | Payload | When |
+| --- | --- | --- |
+| `stateChangeRequest` | `SavedViewsRequest — { value, previous, reason, action, source, cancelled, cancel() }` | Before the views move: apply, save, create, rename, delete, default. Reasons pointer and keyboard from presses, submit from a form, remove from a confirmed delete, programmatic from apply(). Not emitted when the state would not change; cancel() keeps the model where it was and nothing is applied. |
+| `stateChange` | `SavedViewsState` | The model’s own event, after a request that was not refused; what [(state)] binds. |
+| `viewApply` | `{ view: GridView, request: SavedViewsRequest }` | After an apply or a revert the state request did not refuse: the saved view parsed with parseGridView against columns, or builtIn for the built-in view. The consumer writes it into the grid. |
+| `openChangeRequest` | `ChangeRequest<boolean>` | Before the layer moves: pointer or keyboard on the trigger, escape, outsidePress, apply and save closing it, programmatic from show() and hide(). Escape with a form open is not emitted: the form is cancelled instead. |
+
+## Rules
+
+- No WAI-ARIA Authoring Practices pattern covers a list of named views, so the family is built from the ones that do: the trigger opens a non-modal dialog (aria-haspopup="dialog", aria-expanded, aria-controls) held by the popover family, and each row’s actions control is the Menu Button pattern held by the menu family. Inside the panel everything is a native button, a list and a form in native tab order.
+- The host is a group named Views, so the trigger reads “Late orders Modified, button, Views group”. The view in use carries aria-current="true" and a check; the default view reads “default” after its name from a hidden word beside the pin. Modified is a word and a dot, never the dot alone.
+- Escape inside a form or a confirmation cancels it and keeps the panel open — the popover asks to close in the capture phase and the family refuses that request; a second Escape closes the panel and focus returns to the trigger. A submitted form focuses the row it changed, a cancelled one the control that opened it, a confirmed delete the row above.
+- An empty or duplicate name marks the field invalid, and the error joins the input’s description through the field family. Applying, saving, renaming, deleting and moving the default are announced politely through the shared live announcer, because each changes something outside the focused control.
+
+## Tokens
+
+`--slotted-border-subtle`, `--slotted-border-width-thin`, `--slotted-control-border-color`, `--slotted-control-border-width`, `--slotted-control-font-size-md`, `--slotted-control-gap-md`, `--slotted-control-height-md`, `--slotted-control-height-sm`, `--slotted-control-icon-size-md`, `--slotted-control-icon-size-sm`, `--slotted-control-padding-inline-md`, `--slotted-control-radius`, `--slotted-control-shadow`, `--slotted-control-surface`, `--slotted-control-transition-duration`, `--slotted-control-transition-easing`, `--slotted-duration-instant`, `--slotted-focus-ring-color`, `--slotted-focus-ring-offset`, `--slotted-focus-ring-width`, `--slotted-font-family-sans`, `--slotted-font-weight-medium`, `--slotted-font-weight-regular`, `--slotted-line-height-md`, `--slotted-radius-full`, `--slotted-saved-views-panel-inline-size`, `--slotted-space-1`, `--slotted-space-2`, `--slotted-space-3`, `--slotted-space-4`, `--slotted-surface-sunken`, `--slotted-text`, `--slotted-text-muted`, `--slotted-tone-accent-solid`, `--slotted-tone-accent-subtle-active`, `--slotted-tone-accent-subtle-hover`, `--slotted-tone-accent-text`, `--slotted-tone-secondary-subtle-active`, `--slotted-tone-secondary-subtle-hover`
+
+## Examples
+
+### Modified, and Revert
+
+The view in use differs from Late orders by its sort: the trigger carries the dot and the word, Revert sits beside it, and Save in the panel is enabled. Revert hands the saved view back through viewApply.
+
+Excerpt — not a complete module
+
+```html
+<sl-saved-views
+  [builtIn]="defaults"
+  [current]="current()"
+  [(state)]="views"
+  (viewApply)="current.set($event.view)"
+/>
+```
+
+### Save as a new view
+
+Save as new view… opens a named field above the footer. An empty name and a name another view has — case aside, Default included — mark the field invalid with its message; a valid one creates the view from the current one and makes it the view in use.
+
+Excerpt — not a complete module
+
+```html
+<sl-saved-views
+  [builtIn]="defaults"
+  [current]="current()"
+  [(state)]="views"
+  (stateChangeRequest)="$event.action === 'create' && track($event.value.views.length)"
+/>
+```
+
+### Rename in the row
+
+The row’s menu, then Rename: the row becomes the form holding the name, Enter submits with the reason submit and focus returns to the renamed row. Escape cancels the form and leaves the panel open.
+
+Excerpt — not a complete module
+
+```html
+<sl-saved-views
+  [builtIn]="defaults"
+  [current]="current()"
+  [(state)]="views"
+  (stateChangeRequest)="$event.action === 'rename' && !canRename && $event.cancel()"
+/>
+```
+
+### Delete, confirmed in the row
+
+Delete asks in place, naming the view, with focus on Cancel. Confirming carries the reason remove. Deleting the view in use leaves the built-in view in its place, and the grid keeps its arrangement — which then reads as modified.
+
+Excerpt — not a complete module
+
+```html
+<sl-saved-views
+  [builtIn]="defaults"
+  [current]="current()"
+  [(state)]="views"
+  (stateChangeRequest)="$event.action === 'delete' && api.deleteView($event.previous)"
+/>
+```
+
+### The default view
+
+Set as default moves the pin: that view is the one a visit opens on. With persistedSavedViews, a visit whose store holds no view in use opens on the default and hands it over once as openedDefault.
+
+Excerpt — not a complete module
+
+```ts
+const views = persistedSavedViews({ key: 'orders:views', columns });
+const grid = persistedGridView({
+  key: 'orders:grid',
+  columns,
+  defaultQuery: views.openedDefault?.query,
+});
+```
+
+### The built-in view
+
+Default is the application’s own arrangement: first in the list, never renamed, overwritten or deleted, and its menu holds Set as default alone. On it Save is disabled; Save as new view… is how a reader keeps a change.
+
+Excerpt — not a complete module
+
+```html
+<sl-saved-views
+  [builtIn]="defaults"
+  [current]="current()"
+  [defaultState]="{ views: views, defaultId: null, activeId: null }"
+/>
+```
+
+### Kept across visits
+
+persistedSavedViews reads the store once with parseSavedViews — total, so a malformed entry is no views — and writes serializeSavedViews after each change from an effect. The field shows the entry as it is written. A store that throws leaves the views in memory.
+
+Excerpt — not a complete module
+
+```html
+<sl-saved-views [builtIn]="defaults" [current]="current()" [(state)]="views.state" />
+```
+
+### Over a data grid
+
+The family above an sl-data-grid bound through persistedGridView: the store opens on Late orders, the default. Sort a column, hide one or change the search, and the trigger says Modified; apply High value and the grid takes its sort and its compact density.
+
+Excerpt — not a complete module
+
+```html
+<sl-saved-views
+  [builtIn]="defaults"
+  [columns]="columns"
+  [current]="{ columns: grid.columnState(), query: grid.query(), density: grid.density() }"
+  [(state)]="views.state"
+  (viewApply)="write($event.view)"
+/>
+<sl-data-grid
+  aria-label="Orders"
+  rowKey="id"
+  [columns]="columns"
+  [rows]="orders"
+  [(query)]="grid.query"
+  [(columnState)]="grid.columnState"
+  [density]="grid.density()"
+/>
+```
+
+### Keyboard
+
+Tab to the trigger and press Enter: focus lands on the view in use. Tab walks apply and actions row by row, then the footer. In a form Enter submits and Escape cancels the form without closing the panel; a second Escape closes it and focus returns to the trigger.
+
+Excerpt — not a complete module
+
+```html
+<button slButton type="button" (click)="views.show()">Open the views</button>
+<sl-saved-views #views="slSavedViews" [builtIn]="defaults" [current]="current()" />
+```
+
+### What a reader hears
+
+The host is a group named Views; the trigger says the view and Modified; the view in use carries aria-current; the default reads “default” after its name. Applying, saving, renaming, deleting and moving the default are announced politely.
+
+Excerpt — not a complete module
+
+```ts
+providers: [provideSlotted({ locale: 'pt-BR', catalogs: { 'pt-BR': PT_BR } })];
+```
+
+### Long names
+
+A name longer than the trigger is cut with an ellipsis there, with the whole name in title and in the accessible name; in the list it wraps, and a single unbroken reference breaks anywhere rather than pushing the actions out of the row.
+
+Excerpt — not a complete module
+
+```ts
+const views: SavedViewsState = {
+  views: [{ id: 'mw', name: 'Late orders from the Midwest distributors', view }],
+  defaultId: 'mw',
+  activeId: 'mw',
+};
+```