@kerfjs/ui 5.0.0-beta.50 → 5.0.0-beta.51

package/docs/catalog.md

@@ -91,6 +91,18 @@ own overlay implementation.
   generated note, then one specimen or one intentionally coupled specimen
   cluster. Use one row per variant/state; do not hand-author the helper's private
   classes.
+- Focused demos do not import local stylesheets, use inline `style`, or invent
+  styling-only `demo-*` classes. Prefer a public Kerf component, then a Web
+  Awesome surface when Kerf has no equivalent, then ordinary semantic HTML.
+  Use `CatalogExample.viewport` for bounded specimen width, height, frame,
+  surface, overflow, responsive visibility, and public custom-property values;
+  keep those constraints catalog-owned instead of recreating a demo stylesheet.
+  Component heights run `short` (220px) through `tall` (360px); frame an app
+  shell, whole-screen layout, or other application-sized recipe with
+  `height: "app"` (592px), and give its root `fill` rather than a frame `Pane`.
+  An app frame stands in for the screen: it is the containing block for
+  screen-fixed chrome, so a compact `CollapsiblePanel` overlay, its backdrop,
+  and restore controls dock to the frame's edges rather than the page's.
 - The specimen is an immediate child of `CatalogExample`. A focused component
   row should place the component root there, without a decorative card or
   spacing wrapper. A composition row may place the composition root there.
@@ -143,6 +155,9 @@ from structurally widened or JavaScript objects. Do not copy the helpers'
 private `kui-catalog-*` classes into preview markup.
 
 The app owns entry ids, `kind`, routing, sources, relationships, and test hooks.
+`Catalog.stageRootAttributes` places app-owned `data-*` state on the
+catalog-owned preview stage without an extra wrapper; `data-catalog-stage`
+remains protected.
 The helpers own their structural markers, label/note anatomy, alignment marker,
 and private classes. Component metadata such as margin/border/padding ownership
 lives in `component-catalog.json`; do not infer or overwrite it from overlay
@@ -204,7 +219,13 @@ facts that source can prove without guessing at rendered intent:
   are not empty, and composition routes do not add redundant skip markers;
 - every `@kerfjs/ui` import is a published package export and relative imports
   do not reach into `ui/src`;
-- demo JSX does not copy private `kui-catalog-*` structural classes; and
+- focused demos have no relative stylesheet imports, inline style attributes,
+  or styling-only `demo-*`, `wa-demo-*`, and token-search class names;
+- demo JSX does not copy private `kui-catalog-*` structural classes;
+- recipe sources (checked by `npm run check:recipes` with the same shared
+  analyzer) import no stylesheet other than public `@kerfjs/ui` CSS, set no
+  inline style, and name only published layout and Web Awesome classes; each
+  recipe declares its catalog frame through an exported `presentation`; and
 - the shell derives both geometry-overlay enablement and documented demo mode
   from the active entry's source and kind.
 
@@ -217,7 +238,7 @@ stage geometry is itself the reviewed specimen. Add the narrow waiver to
 [`catalog-conformance-exceptions.json`](../ux-demo/catalog-conformance-exceptions.json)
 with the exact route, source file, stable diagnostic ids, a substantive reason,
 and the reviewing `KF-*` ticket. Only helper/metadata rules are waivable;
-private imports, private markup, empty examples, composition overlay drift, and
+private imports, local styling, private markup, empty examples, composition overlay drift, and
 shell-mode drift always fail. The gate rejects duplicate, malformed, unused,
 and stale exceptions, so delete a waiver when its route adopts the standard
 helpers.

package/docs/collapsible-panel.md

@@ -37,25 +37,85 @@ Import the panel CSS (`@kerfjs/ui/collapsible-panel.css`) alongside `foundation.
   is the app's: put a collapse toggle in the panel's own header and an expand toggle
   somewhere always-visible (a toolbar) so it is reachable while collapsed.
 - **`wireSidebar(root, { panels, deviceClass?, storage? })`** — the interaction
-  semantics. Each `panels` entry is `{ id, collapsed, toggleAction, storageKey? }`.
-  It:
+  semantics. Each `panels` entry is
+  `{ id, collapsed, toggleAction, storageKey?, inlineCollapsed? }`. It:
   - **toggles** the panel's `collapsed` signal when any `[data-action=toggleAction]`
     button is clicked, and remembers the trigger;
   - **manages focus** — moves focus into the panel when it opens, and restores it
-    to the trigger when it closes;
+    to the trigger when it closes. When that trigger is the collapse toggle inside
+    the now-hidden panel, focus goes to the panel's toggle outside it instead, so
+    an app may render its expand toggle only while the panel is collapsed (one
+    control per action, as the recipe does);
   - **presents a compact overlay** when `deviceClass.compact` is true (pass a
     `deviceClass()` signal): the open panel floats over the content with a
     dismissable backdrop, Escape and backdrop-click collapse it, and Tab is trapped
-    within the panel (the ARIA dialog pattern);
+    within the panel (the ARIA dialog pattern). The overlay and its backdrop are
+    fixed to the screen; an ancestor that establishes a containing block for
+    fixed descendants (such as the catalog's `height: "app"` frame) docks them to
+    its edges instead;
   - accepts `compactPresentation: "hidden"` when a compact application replaces
     the panel with different navigation instead of overlaying it;
+  - **starts every compact overlay closed** (see
+    [Compact initial state](#compact-initial-state));
   - keeps compact overlays exclusive by default, collapsing another open panel
     when a new one opens (`exclusiveCompact: false` opts out);
-  - **persists** the collapsed state to `storage` (default `localStorage`) under
-    `storageKey`, seeding the signal on wire-up.
+  - **persists** the inline collapsed state to `storage` (default
+    `localStorage`) under `storageKey`, seeding the signal on wire-up. An
+    overlay's open/closed state is never persisted;
+  - **owns the root's `data-collapsible-responsive` / `data-collapsible-overlay`
+    attributes and the injected backdrop.** Your app may re-render (and morph)
+    the wired root for reasons that never touch a panel signal — a nav
+    selection, say — and the morph drops attributes and nodes its template
+    doesn't emit. The wire observes the root and re-applies them before the
+    next paint, so don't render these attributes yourself.
 
   Returns a disposer. Retain it and call it on teardown.
 
+## Compact initial state
+
+A compact overlay is transient chrome the user summons, like a slide-over
+sidebar on a phone: it covers the content, traps focus, and must be dismissed.
+It therefore opens **only on a user action** (a toggle, or the app setting the
+signal in response to one), never by itself:
+
+- **Wire-up on a compact device.** Every panel starts collapsed, whatever its
+  signal, `inlineCollapsed`, or stored choice says. No backdrop, focus trap, or
+  Escape handling is active until the user opens a panel.
+- **Wide → compact crossing.** Open panels collapse; nothing covers the page.
+- **Compact → wide crossing.** Each panel returns to its remembered inline state
+  (open or collapsed), whatever the user did with the overlay meanwhile.
+- **Disposal** hands the inline state back to the signals.
+- **Persistence** records only the inline choice. A stored "open" rail restores
+  inline on a wide screen and is remembered, not opened, on a compact one.
+
+These presentation changes never move focus, except to rescue focus that a
+collapse would strand inside the hidden panel (it returns to the panel's last
+trigger). `compactPresentation: "hidden"` leaves the signals alone.
+
+`wireSidebar` runs after the first render, so an app that seeds an open inline
+default would render the rail open for that first frame on a compact device.
+Seed the signal from the device class instead, and declare the inline default
+with `inlineCollapsed` so a later wide crossing still opens it:
+
+```ts
+const device = deviceClass();
+const navCollapsed = signal(device.value.compact);
+// …
+wireSidebar(app, {
+  panels: [
+    {
+      id: "nav",
+      collapsed: navCollapsed,
+      toggleAction: "toggle-nav",
+      inlineCollapsed: false,
+    },
+  ],
+  deviceClass: device,
+});
+```
+
+A stored inline choice takes precedence over `inlineCollapsed`.
+
 ## Example
 
 ```tsx
@@ -68,8 +128,10 @@ import {
 import { wireSidebar } from "@kerfjs/ui/wire-sidebar";
 import "@kerfjs/ui/collapsible-panel.css";
 
-const navCollapsed = signal(false);
 const device = deviceClass();
+// Start collapsed on a compact device; `inlineCollapsed` keeps the open inline
+// default for wide screens.
+const navCollapsed = signal(device.value.compact);
 
 const app = document.querySelector("#app")!;
 mount(app, () => (
@@ -111,12 +173,22 @@ const stop = wireSidebar(app, {
       collapsed: navCollapsed,
       toggleAction: "toggle-nav",
       storageKey: "app.nav-collapsed",
+      inlineCollapsed: false,
     },
   ],
   deviceClass: device,
 });
 ```
 
+## Safe areas
+
+A panel grows by the unsafe inset of the edge it docks to and pads its content
+for every edge it touches except its interior edge. While expanded inline, it
+also clears that edge for its direct flex siblings, so a neighboring pane gains
+the inset when the panel collapses. When you wrap the panel in your own grid
+cell, set `--kui-edge-inset-*: 0px` on the sibling regions yourself (or pass
+`safeAreaEdges` to a sibling `Pane`). See [Choosing an app layout › Safe areas](app-layouts.md#safe-areas).
+
 ## When to use which
 
 - One or two independent rails / a drawer you place yourself → **`CollapsiblePanel` +
@@ -138,5 +210,6 @@ persistence: [open it](../ux-demo/?component=recipe-collapsible-sidebar) or read
 [`recipes.md`](recipes.md#collapsible-sidebar) · [TSX source](../ux-demo/recipes/collapsible-sidebar.tsx).
 It is covered end-to-end across Chromium, Firefox, and WebKit by
 `tests/browser/collapsible-sidebar-recipe.spec.ts` (collapse/expand, focus
-move/restore, the compact overlay + Escape/backdrop dismiss, and the Tab trap),
+move/restore, the compact overlay + Escape/backdrop dismiss, the Tab trap, and
+the compact initial state across first load and wide/compact crossings),
 alongside the component/wire unit tests.

package/docs/component-contract.md

@@ -36,6 +36,19 @@ bounded `items[].property` form. Consumer catalogs can publish the same facts;
 ESLint, `kerf-ui-analyze`, and `kerf-ui-doctor` then issue the same stable
 `KUI-L013`–`KUI-L017` feedback for application and third-party components.
 
+`wiring.stateAttributes` lists the **wiring-owned state attributes**: the
+`data-*` attributes a wiring helper writes at runtime, such as
+`data-handle-inset` and `data-resizing`, which `wireResizableRegions` puts on a
+`ResizableRegion`. Each entry names the attribute, the element that carries it
+(`on`), the `helper` that writes it, and what it means. An application must not
+render, remove, or treat these attributes as its own state; tools use the list
+to tell them apart from app-authored attributes. They are declared once, on the
+helper's wiring item in the v1 catalog, and v2 flattens them. `check:catalog`
+reads each `wire*` helper's source and fails when its declarations differ from
+the `data-*` attributes it actually writes. First-party entries always carry
+the list, empty when their helpers write none; it is optional in extension
+catalogs.
+
 The generator starts with permissive defaults. An `any` mode records that the
 catalog has no defensible prohibition; it does not claim every composition is
 recommended. Objective rules live in
@@ -306,8 +319,10 @@ props. Its opaque string brand improves authoring correctness; it is not a CSS
 sanitizer or security boundary.
 `Row.flex` and `List.flex` likewise accept their boolean default, finite keywords, or `CssFlex`
 from `flex(grow, shrink, basis)`. `Skeleton` width/height use `CssSize`, radius
-uses `CssLength`, and `SelectChoice.color` uses `CssColor` from `uiColor()` or
-`colorVar()`. Never exchange these property grammars. List rows expose
+uses `CssLength`, and `SelectChoice.color` uses `CssForegroundColor` from
+`uiColor()` with a foreground token such as `success-on-quiet`, or from
+`foregroundColorVar()`. Fill tokens such as `success` are pale background tints
+and do not type-check there. Never exchange these property grammars. List rows expose
 `className`, public tokens, and semantic props instead of unrestricted `style`
 declarations.
 `.kui-content` gives major children 24px vertical separation.
@@ -329,18 +344,22 @@ breakpoint; do not hide the group with an application class. Reach for
 a Web Awesome feature, chiefly the `slot="trigger"` button of a `wa-dropdown`
 popup menu. For a compact mixed-content group, set `nestedDropdown`; a
 text-and-caret trigger grows to its intrinsic width while an icon-only trigger
-can remain square. Set `menuInset` to configure the dropdown menu surface
+can remain square. A compact icon `<button>` is a 32px circle, so a selected
+compact segment never becomes an oval. An icon-only `Select` joins a group as
+one more segment with its siblings' inset, radius, hover, and focus ring; only a
+lone Select grows the group to its icon-and-caret pill. Set `menuInset` to configure the dropdown menu surface
 without application `::part(menu)` CSS. Compact mixed controls retain the standard
 item padding, omit an internal separator, and let the raised selected item paint
-over the outer border instead of shrinking to an inset highlight. The short text
-trigger has an engine-stable 66px floor because WebKit
-does not include the shadow caret in the custom-element host's intrinsic width;
-raise `--kui-toolbar-dropdown-trigger-width` for longer localized copy.
+over the outer border instead of shrinking to an inset highlight. The Web
+Awesome trigger's shadow base owns max-content sizing, so icons, localized text,
+and the shadow caret determine the width without a fixed host measurement.
 The enclosing `Toolbar` owns zone alignment and responsive topology: use
 `centerAlign="stretch"` when the center group should consume its track, and
-choose `responsive="stack"` with `responsiveAt="compact" | "narrow"` or
+choose `responsive="stack"` with `responsiveAt="compact" | "narrow"`,
+`responsive="wrap"` for a heading whose title must stay whole, or
 `responsive="center-priority"` instead of selecting its zone classes from a
-parent stylesheet.
+parent stylesheet. No policy clips an action: the trailing zone, and a stacked
+center zone, wrap whole groups onto another row.
 `ListHeader` similarly separates its dormant title and
 optional count or badge from its optional 44px action. Use the mutually
 exclusive `count`/`countLabel` pair for non-negative safe-integer section

package/docs/component-integration.md

@@ -45,9 +45,11 @@ Run `npm run check:change` after changing a public component. It synchronizes
 both catalog projections, declarations, AI signatures, and compatibility
 digests; names every checked-in projection changed by that synchronization;
 runs the catalog/component contracts, unit coverage, consumer bundle tests,
-source and packed type contracts; builds the production catalog; and reports
-the exact gzip byte delta from the last reviewed baseline. The broader
-`npm run check` remains the release gate.
+source and packed type contracts; rebuilds the package and production catalog
+through the same `demo:bundle` script `npm run demo:build` uses; and reports
+the exact gzip byte delta from the last reviewed baseline. Every step runs on
+the Node that invoked it, so `check:change` and `demo:build` measure the same
+bytes. The broader `npm run check` remains the release gate.
 
 Intentional bundle changes use the same workflow with an explicit review
 reason:
@@ -59,5 +61,8 @@ npm run check:change -- --update-bundle-budget \
 
 That mode writes `demo-bundle-budget.json`, records the previous and new exact
 measurements and budgets with the reason and timestamp, and rounds the total
-budget to the next 100 bytes. Do not edit the budget or add a history comment
+budget to the next 100 bytes. Gzip output depends on the zlib bundled with
+Node, so reviewed baselines are recorded on the repository's pinned Node major
+(`.nvmrc`, also CI's version): an update on another major is refused, and a
+plain check on one prints a warning. Do not edit the budget or add a history comment
 by hand.

package/docs/component-selection.md

@@ -27,6 +27,12 @@ CSS".
 
 ## Foundation tokens
 
+Import the opt-in `@kerfjs/ui/document.css` baseline when the application wants
+Kerf UI to own global box sizing, body typography/colors, plain-link color, and
+the definite full-height chain. Put `.kui-app-root` on the one direct mount
+container only for a full-height shell; ordinary flowing pages can omit it. See
+[Document baseline](document-baseline.md).
+
 Import `@kerfjs/ui/foundation.css` when application-owned composition CSS needs
 the same semantic typography, spacing, device breakpoints, geometry, radii,
 colors, focus ring, or shadows as Kerf components. Its complete supported
@@ -73,12 +79,17 @@ expressions fail during typechecking rather than in the browser.
 Other CSS-valued props use distinct contracts: `Spacer.width` and
 `Spacer.height` take `UiSpaceName | CssLength`; `flex()` creates `CssFlex` for
 `Row.flex`, `Grid.flex`, and `List.flex`; `Skeleton` dimensions take typed lengths (plus finite intrinsic
-keywords for width/height); and `uiColor()`/`colorVar()` create `CssColor` for
-`SelectChoice.color`. Do not substitute one brand for another. Row components
+keywords for width/height); and `SelectChoice.color` takes a
+`CssForegroundColor` from `uiColor()` with a foreground token (`*-on-*`, a text
+role, or a `*-text` alias) or from `foregroundColorVar()`. The bare `success`,
+`warning`, `danger`, `pop`, and `accent` tokens are quiet fills, not
+foregrounds, and are rejected there; `colorVar()` returns a plain `CssColor`.
+Do not substitute one brand for another. Row components
 have no declaration-string `style` prop; use `className`, documented public
 tokens, and semantic component props. Catalog media queries remain strings and
 semantic pixel measurements remain numbers because those are different APIs.
-The corresponding public builders are `flex`, `uiColor`, and `colorVar`.
+The corresponding public builders are `flex`, `uiColor`, `colorVar`, and
+`foregroundColorVar`.
 
 ## Production recipes
 
@@ -127,13 +138,13 @@ an upstream component or recipe request.
 | Application toolbar or heading — `Toolbar`                                                                              | Leading identity, optional centered content, and trailing controls form one horizontal app bar or a page/panel/dialog heading.                                                                                          | Do not add bespoke heading geometry or a private wrapper; use the same zone contract everywhere.                                                                                                                                                                                                                                           | Put identity/title text directly in a zone as `ToolbarText`; group controls and icon tiles in `ToolbarControlGroup`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Actions, command availability, responsive relocation, state, and supporting copy below a heading.                                                        | `@kerfjs/ui/toolbar`                                                                      | [Toolbar composition](../README.md#component-subpaths)                              |
 | Toolbar control cluster — `ToolbarControlGroup`, `ToolbarActionLink`                                                    | Related toolbar buttons, semantic links, compact/tight controls, avatar actions, or a dropdown trigger/menu surface need one configured chrome contract.                                                                | Do not use it merely to align unrelated controls. Do not restyle anchors or dropdown parts in application CSS; use `ToolbarActionLink`, `overflow`, and `menuInset`. Web Awesome `wa-button-group` is only for an exceptional grouped-action contract.                                                                                     | Delegate child actions; use `ToolbarActionLink` for native navigation, `overflow="scroll"` for bounded action rows, and `menuInset` for dropdown surface padding. Use `avatarImage` instead of inserting an `img`; use `SegmentedControl` for an exclusive choice.                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Actions, destinations, pressed/expanded state, content, and policy.                                                                                      | `@kerfjs/ui/toolbar-control-group`                                                        | [Component ownership](./component-contract.md#ownership-boundaries)                 |
 | Floating controls over content — `FloatingToolbar`                                                                      | A small cluster of controls (e.g. a drawer restore) must float over scrolling content — distinct and forced-dark — inside a positioned container.                                                                       | Do not use it for a primary page or panel toolbar (use `Toolbar`), or for anything that must sit above dialogs/overlays — it is not top-layer.                                                                                                                                                                                             | Compose `ToolbarControlGroup`s and delegate their actions; the app owns visibility and position.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Controls, visibility, and position.                                                                                                                      | `@kerfjs/ui/floating-toolbar`                                                             | [Component subpaths](../README.md#component-subpaths)                               |
-| Toolbar identity text — `ToolbarText`                                                                                   | A toolbar needs extra-large (page/panel title), large, default, or compact textual identity.                                                                                                                            | Plain text is not a heading by default; when a title needs heading semantics pass `headingLevel`.                                                                                                                                                                                                                                          | Optional `headingLevel` for `role="heading"` + `aria-level`. Defaults to one line, ellipsized when it does not fit; `wrap` flows onto multiple lines, `ellipsis` toggles the trailing …, and `maxLines` caps a wrap.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Text, heading level, overflow behavior, and responsive priority.                                                                                         | `@kerfjs/ui/toolbar-text`                                                                 | [Toolbar composition](../README.md#component-subpaths)                              |
-| Semantic heading or paragraph — `Text`                                                                                  | Ordinary application copy needs native `h1`–`h6` or `p` semantics plus standard geometry, or a semantic quiet/danger tone, compact size, or monospace font.                                                             | Do not choose heading levels for appearance alone or recreate muted, error, small, or code utility classes. Use `ToolbarText` for toolbar identity/title content and `ListInsetText` when list-aligned prose needs full margin/border/padding geometry.                                                                                    | Omit `variant` for the default `p`, or choose `h1`–`h6` from the document outline. Independently compose `tone="quiet                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | danger"`, `size="compact"`, and `font="monospace"`; ordinary native global, `data-_`, and `aria-_` attributes pass through.                              | Copy, localization, semantic variant, presentation roles, and document heading hierarchy. | `@kerfjs/ui/text`                                                                   | [Text](./layout.md#text) |
+| Toolbar identity text — `ToolbarText`                                                                                   | A toolbar needs extra-large (page/panel title), large, default, or compact textual identity.                                                                                                                            | Plain text is not a heading by default; when a title needs heading semantics pass `headingLevel`. Sizes below `xlarge` are intentionally quiet identity text with no tone option — do not use them as a normal-color subsection title; use `Text` with an `h2`–`h6` variant, or `ListHeader` for a list section.                           | Optional `headingLevel` for `role="heading"` + `aria-level`. Defaults to one line, ellipsized when it does not fit; `wrap` flows onto multiple lines, `ellipsis` toggles the trailing …, and `maxLines` caps a wrap.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Text, heading level, overflow behavior, and responsive priority.                                                                                         | `@kerfjs/ui/toolbar-text`                                                                 | [Toolbar composition](../README.md#component-subpaths)                              |
+| Semantic block or inline text — `Text`                                                                                  | Ordinary application copy needs native `h1`–`h6` or `p` semantics plus standard geometry, or inline secondary copy needs a native `span` without box geometry.                                                          | Do not choose heading levels for appearance alone or recreate muted, error, small, or code utility classes. Use `ToolbarText` for toolbar identity/title content and `ListInsetText` when list-aligned prose needs full margin/border/padding geometry.                                                                                    | Omit `variant` for the default `p`, choose `h1`–`h6` from the document outline, or choose `span` inside a row, label, or table cell. Independently compose `tone="quiet                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | danger"`, `size="compact"`, and `font="monospace"`; ordinary native global, `data-_`, and `aria-_` attributes pass through.                              | Copy, localization, semantic variant, presentation roles, and document heading hierarchy. | `@kerfjs/ui/text`                                                                   | [Text](./layout.md#text) |
 | Vertical stack — `List`                                                                                                 | Rows, sections, or arbitrary components need a consistent vertical stretch layout, optional standard/custom gap, flex growth, one vertical scroll owner, or edge dividers.                                              | It is layout-only and does not provide `ul`/`ol` semantics. Do not nest scroll owners or use it when a horizontal layout is required.                                                                                                                                                                                                      | Choose `gap`, `flex`, `scrollable`, and canonical `dividerSides` (`t`, `r`, `b`, `l` combinations in that order); bound the block size when scrolling.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Child semantics/content, containing height, and which optional layout behaviors apply.                                                                   | `@kerfjs/ui/list`                                                                         | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Equal-width columns — `Grid`                                                                                            | A fixed positive number of sibling columns must divide the available width evenly, including when child content has different intrinsic widths.                                                                         | Do not use it for intrinsic, asymmetric, spanning, auto-fit, or masonry tracks; use application-owned CSS grid. Do not use it for a user-operable separator; use `ResizableRegion`.                                                                                                                                                        | Choose `columns`, a typed `gap`, and optional typed `flex`; preserve source order when the app changes the count responsively.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Child semantics/content, the column count and responsive policy, and typed gap/flex choices.                                                             | `@kerfjs/ui/grid`                                                                         | [Grid](./layout.md#grid)                                                            |
 | Navigation row — `ListItem`                                                                                             | A pane or navigation area needs a selectable, disabled, dormant-trailing, or multiline action row.                                                                                                                      | Do not put a control in `trailing`; use `ListActionRow` when the trailing region must be independently interactive. Use an `<a>` for navigation that must retain link behavior, a native `<button>` for an ordinary action, or implement the complete ARIA menu widget.                                                                    | Delegate its `data-action`; compose inside a `.kui-content` section. Put domain event/drop metadata in `rootAttributes` rather than adding wrapper markup. The rounded root clips overflowing descendants; set `multiline` when the primary label should wrap.                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Routing, selection, permissions, copy, action handling, and domain `data-*` values.                                                                      | `@kerfjs/ui/list-item`                                                                    | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Navigation row with trailing action — `ListActionRow`                                                                   | A full-width row needs a selectable primary action and an independently focusable trailing action.                                                                                                                      | Use `ListItem` when trailing content is dormant metadata. Do not put controls inside the row's `label`, `icon`, or `trailingActionIcon` SafeHtml slots. Do not use `AppTab` outside tablist semantics or `ToolbarControlGroup` outside a toolbar.                                                                                          | Delegate both action strings; update controlled selection and any popover/context-menu state in the app.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | Routing, selection, both action policies, domain metadata, and popover/context-menu behavior.                                                            | `@kerfjs/ui/list-action-row`                                                              | [Accessibility](./accessibility.md#listactionrow)                                   |
-| Navigation section heading — `ListHeader`                                                                               | A menu section needs a full-width label, semantic count, non-count badge, logical-end action, or real disclosure state.                                                                                                 | Do not concatenate counts into `label` or put numeric content in `badge`; use `count` with the localized full phrase in `countLabel`. Do not add a disclosure arrow to navigation that reveals nothing. Do not shrink its 44px action target to the 18px visual. Do not use it as a page, panel, or dialog title; use a heading `Toolbar`. | Delegate its optional action; the app controls expanded state and revealed content. Toggle mode supplies `DisclosureArrow` unless `actionIcon` replaces it. Use `triggerAttributes` only for domain `data-*` or a native popover relationship.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Section organization, valid count and localized count label, disclosure state and content, non-count badge content, popover target behavior, and policy. | `@kerfjs/ui/list-header`                                                                  | [Pane geometry](../README.md#pane-and-content-geometry)                             |
+| Navigation section heading — `ListHeader`                                                                               | A menu section needs a full-width label, semantic count, non-count badge, logical-end action, or real disclosure state.                                                                                                 | Do not concatenate counts into `label` or put numeric content in `badge`; use `count` with the localized full phrase in `countLabel`. Do not add a disclosure arrow to navigation that reveals nothing. Keep its 44px hit target; do not resize its 36px square. Do not use it as a page, panel, or dialog title; use a heading `Toolbar`. | Delegate its optional action; the app controls expanded state and revealed content. Toggle mode supplies `DisclosureArrow` unless `actionIcon` replaces it. Use `triggerAttributes` only for domain `data-*` or a native popover relationship.                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Section organization, valid count and localized count label, disclosure state and content, non-count badge content, popover target behavior, and policy. | `@kerfjs/ui/list-header`                                                                  | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Inset self-bordered control — `ListInsetControl`                                                                        | A control that owns its own border and padding but no outer margin (a search input, a `SegmentedControl`) must line up inside a `.kui-content` list with the standard 8px inline margins and stretch to fill the row.   | Do not wrap a `.kui-content-item` or a `ListItem`/`ListHeader` that already owns its inline margin — that double-insets it. Do not add ad-hoc `margin`/`padding` around a bare control to align it; use this instead.                                                                                                                      | Place the self-bordered control(s) as children; they stretch to fill. It applies only the inline margin, flex stretch, and 8px gap — the child owns its own border and padding.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | The control(s), their state, and action wiring.                                                                                                          | `@kerfjs/ui/list-inset-control`                                                           | [Pane geometry](../README.md#component-subpaths)                                    |
 | Inset bare text — `ListInsetText`                                                                                       | A plain string or inline content with no margin, border, or padding of its own must sit in a `.kui-content` list with its text edge aligned to the bordered items around it.                                            | Do not use it to wrap a component that already owns content-item geometry (`ListItem`, `StateBanner`, a `.kui-content-item`) — that double-insets it. Do not hand-roll the 8px margin / 1px border / 8px padding.                                                                                                                          | Pass the text or inline `SafeHtml` as children; it supplies the 8px inline margin, 1px transparent border, and 8px padding so the text edge lands at the standard 17px inset. Pass `horizontalOnly` to keep that horizontal inset but drop the vertical margin, border, and padding for tight text layout.                                                                                                                                                                                                                                                                                                                                                                                                             | The text, copy, and localization.                                                                                                                        | `@kerfjs/ui/list-inset-text`                                                              | [Pane geometry](../README.md#component-subpaths)                                    |
 | Application column — `Pane`                                                                                             | A sidebar, main area, inspector, or dialog needs shared vertical header/content/footer organization, one scroll owner, and optional edge separators.                                                                    | Do not pad the pane shell, wrap child-owned geometry in competing insets, invent unrelated centered measures, or leave an icon-only rail for a hidden pane.                                                                                                                                                                                | Import `Pane`, use `children` for its homogeneous primary content and the named `SafeHtml` prop slots `header`/`footer` for optional fixed chrome, then opt into only the needed logical-edge separators; add `.kui-content-item` as needed. A visible pane owns collapse in its toolbar; move a hidden inline-start pane's restore control to the main toolbar leading edge and an inline-end pane's restore control to its trailing edge.                                                                                                                                                                                                                                                                            | Layout hierarchy, reading width, responsive relocation, pane visibility state, slot semantics, labels, and separator placement.                          | `@kerfjs/ui/pane`                                                                         | [Pane anatomy](./layout.md#anatomy)                                                 |
@@ -164,6 +175,14 @@ an upstream component or recipe request.
 - `TabBar` changes tabpanels and supports overflow/reorder; `SegmentedControl` chooses among a few compact views; `Select` handles a longer value list.
 - `StateBanner` persists beside affected work; `EmptyState` replaces absent content; `wa-callout` is contextual ecosystem content; `wa-toast` and `wa-toast-item` are transient and must not carry the only copy of important state.
 - `ResizableRegion` is an interactive controlled pane. `Grid` is the right answer for static equal-width columns; application CSS grid remains the answer for asymmetric or intrinsic tracks.
+- A `ResizableRegion`'s content spans the whole region, like its separator. Give
+  it one child — normally a `Pane` — and that child fills the region, so the
+  pane reaches the region's far edge and owns scrolling for long content.
+  Several children stack at their natural height. Do not size the child with
+  application `height` rules. While expanded, slide-motion content follows the
+  region's actual track, so a region its parent clamps (a `max-width`, a narrow
+  container) never shows content past its separator; the fixed expanded size
+  applies only while the collapsed content slides out.
 - A `ResizableRegion` overlay automatically clamps both its track and fixed-size
   animated content to the responsive overlay maximum. Set the policy and maximum
   on the component instead of adding application descendant width/height fixes.

package/docs/design/templates/list/stack-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 230" width="420" height="230"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="ct2"><rect x="118.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="ct9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="cp10"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="ov11"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="cp12"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="cp14"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="ov15"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="ct16"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">WORKSPACE</text></g></g><rect x="118.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="126.33" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">2</text><g clip-path="url(#cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#ov4)"><g clip-path="url(#cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ov8)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Inbox</text></g></g></g></g><g clip-path="url(#cp10)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov11)"><g clip-path="url(#cp12)"><g color="rgb(245, 245, 247)"><clipPath id="svgic13"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgic13)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp14)"><g clip-path="url(#ov15)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Projects</text></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 230" width="420" height="230"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="ct2"><rect x="118.8" y="33" width="9.3" height="18"/></clipPath><clipPath id="cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="ct9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="cp10"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="ov11"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="cp12"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="cp14"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="ov15"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="ct16"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">WORKSPACE</text></g></g><text x="118.81" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">2</text><g clip-path="url(#cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#ov4)"><g clip-path="url(#cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ov8)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Inbox</text></g></g></g></g><g clip-path="url(#cp10)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov11)"><g clip-path="url(#cp12)"><g color="rgb(245, 245, 247)"><clipPath id="svgic13"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgic13)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp14)"><g clip-path="url(#ov15)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Projects</text></g></g></g></g></svg>

package/docs/design/templates/list/stack.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 230" width="420" height="230"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="ct2"><rect x="118.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="ct9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="cp10"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="ov11"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="cp12"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="cp14"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="ov15"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="ct16"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">WORKSPACE</text></g></g><rect x="118.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="126.33" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">2</text><g clip-path="url(#cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#ov4)"><g clip-path="url(#cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ov8)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Inbox</text></g></g></g></g><g clip-path="url(#cp10)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov11)"><g clip-path="url(#cp12)"><g color="rgb(29, 29, 31)"><clipPath id="svgic13"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgic13)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp14)"><g clip-path="url(#ov15)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Projects</text></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 230" width="420" height="230"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="ct2"><rect x="118.8" y="33" width="9.3" height="18"/></clipPath><clipPath id="cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="ct9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="cp10"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="ov11"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="cp12"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="cp14"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="ov15"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="ct16"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">WORKSPACE</text></g></g><text x="118.81" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">2</text><g clip-path="url(#cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#ov4)"><g clip-path="url(#cp5)"><g color="rgb(29, 29, 31)"><clipPath id="svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp7)"><g clip-path="url(#ov8)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Inbox</text></g></g></g></g><g clip-path="url(#cp10)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#ov11)"><g clip-path="url(#cp12)"><g color="rgb(29, 29, 31)"><clipPath id="svgic13"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgic13)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#cp14)"><g clip-path="url(#ov15)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Projects</text></g></g></g></g></svg>

package/docs/design/templates/list-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 512" width="452" height="512"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="230"/></clipPath><clipPath id="cp1"><rect x="16" y="306" width="420" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="420" height="230" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="284" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="306" width="420" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="512" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Standard gap and four dividers</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="420" height="230"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="svgimg4ct1"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="svgimg4ct2"><rect x="118.8" y="31.2" width="21.6" height="21.6"/></clipPath><clipPath id="svgimg4cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="svgimg4ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg4cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="svgimg4cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="svgimg4ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg4ct9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="svgimg4cp10"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="svgimg4ov11"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg4cp12"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="svgimg4cp14"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="svgimg4ov15"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg4ct16"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">WORKSPACE</text></g></g><rect x="118.8" y="31.2" width="21.6" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="126.33" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">2</text><g clip-path="url(#svgimg4cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg4ov4)"><g clip-path="url(#svgimg4cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg4svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgimg4svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp7)"><g clip-path="url(#svgimg4ov8)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Inbox</text></g></g></g></g><g clip-path="url(#svgimg4cp10)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4ov11)"><g clip-path="url(#svgimg4cp12)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg4svgic13"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgimg4svgic13)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp14)"><g clip-path="url(#svgimg4ov15)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Projects</text></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact, no gap</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="306" width="420" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="20" width="324" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="29" y="21" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg7cp2"><rect x="37" y="33" width="18" height="18"/></clipPath><clipPath id="svgimg7cp4"><rect x="63" y="33" width="272" height="18"/></clipPath><clipPath id="svgimg7ov5"><rect x="63" y="33" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg7ct6"><rect x="63" y="33" width="272" height="18"/></clipPath><clipPath id="svgimg7cp7"><rect x="28" y="64" width="324" height="44"/></clipPath><clipPath id="svgimg7ov8"><rect x="29" y="65" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg7cp9"><rect x="37" y="77" width="18" height="18"/></clipPath><clipPath id="svgimg7cp11"><rect x="63" y="77" width="272" height="18"/></clipPath><clipPath id="svgimg7ov12"><rect x="63" y="77" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg7ct13"><rect x="63" y="77" width="272" height="18"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp2)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg7svgic3"><rect x="37" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="matrix(.75 0 0 .75 37 33)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp4)"><g clip-path="url(#svgimg7ov5)"><text x="63" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Priority</text></g></g></g></g><g clip-path="url(#svgimg7cp7)"><rect x="28.5" y="64.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov8)"><g clip-path="url(#svgimg7cp9)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg7svgic10"><rect x="37" y="77" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic10)"><g transform="matrix(.75 0 0 .75 37 77)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp11)"><g clip-path="url(#svgimg7ov12)"><text x="63" y="92" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">All work</text></g></g></g></g></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 452 512" width="452" height="512"><defs><clipPath id="cp0"><rect x="16" y="38" width="420" height="230"/></clipPath><clipPath id="cp1"><rect x="16" y="306" width="420" height="190"/></clipPath><clipPath id="ct2"><rect x="16" y="16" width="420" height="22"/></clipPath><clipPath id="irc3"><rect x="16" y="38" width="420" height="230" rx="0"/></clipPath><clipPath id="ct5"><rect x="16" y="284" width="420" height="22"/></clipPath><clipPath id="irc6"><rect x="16" y="306" width="420" height="190" rx="0"/></clipPath></defs><rect x="0" y="0" width="452" height="512" rx="0" fill="rgb(28,28,30)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Standard gap and four dividers</text><g clip-path="url(#cp0)"><g clip-path="url(#irc3)"><clipPath id="svgimg4vclip"><rect x="16" y="38" width="420" height="230"/></clipPath><g clip-path="url(#svgimg4vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg4cp0"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="svgimg4ct1"><rect x="29" y="34.5" width="81.8" height="15"/></clipPath><clipPath id="svgimg4ct2"><rect x="118.8" y="33" width="9.3" height="18"/></clipPath><clipPath id="svgimg4cp3"><rect x="28" y="72" width="324" height="44"/></clipPath><clipPath id="svgimg4ov4"><rect x="29" y="73" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg4cp5"><rect x="37" y="85" width="18" height="18"/></clipPath><clipPath id="svgimg4cp7"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="svgimg4ov8"><rect x="63" y="85" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg4ct9"><rect x="63" y="85" width="272" height="18"/></clipPath><clipPath id="svgimg4cp10"><rect x="28" y="124" width="324" height="44"/></clipPath><clipPath id="svgimg4ov11"><rect x="29" y="125" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg4cp12"><rect x="37" y="137" width="18" height="18"/></clipPath><clipPath id="svgimg4cp14"><rect x="63" y="137" width="272" height="18"/></clipPath><clipPath id="svgimg4ov15"><rect x="63" y="137" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg4ct16"><rect x="63" y="137" width="272" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4cp0)"><g clip-path="url(#svgimg4ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">WORKSPACE</text></g></g><text x="118.81" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">2</text><g clip-path="url(#svgimg4cp3)"><rect x="28" y="72" width="324" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="72.5" width="323" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg4ov4)"><g clip-path="url(#svgimg4cp5)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg4svgic6"><rect x="37" y="85" width="18" height="18"/></clipPath><g clip-path="url(#svgimg4svgic6)"><g transform="matrix(.75 0 0 .75 37 85)"><polyline points="22 12 16 12 14 15 10 15 8 12 2 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M5.5 5.1 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.4-6.9A2 2 0 0 0 16.8 4H7.2a2 2 0 0 0-1.7 1.1" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp7)"><g clip-path="url(#svgimg4ov8)"><text x="63" y="100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Inbox</text></g></g></g></g><g clip-path="url(#svgimg4cp10)"><rect x="28.5" y="124.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg4ov11)"><g clip-path="url(#svgimg4cp12)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg4svgic13"><rect x="37" y="137" width="18" height="18"/></clipPath><g clip-path="url(#svgimg4svgic13)"><g transform="matrix(.75 0 0 .75 37 137)"><path d="M20 20a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2h-7.9a2 2 0 0 1-1.7-.9l-.8-1.2A2 2 0 0 0 7.9 3H4a2 2 0 0 0-2 2v13a2 2 0 0 0 2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg4cp14)"><g clip-path="url(#svgimg4ov15)"><text x="63" y="152" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Projects</text></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact, no gap</text><g clip-path="url(#cp1)"><g clip-path="url(#irc6)"><clipPath id="svgimg7vclip"><rect x="16" y="306" width="420" height="190"/></clipPath><g clip-path="url(#svgimg7vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg7cp0"><rect x="28" y="20" width="324" height="44"/></clipPath><clipPath id="svgimg7ov1"><rect x="29" y="21" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg7cp2"><rect x="37" y="33" width="18" height="18"/></clipPath><clipPath id="svgimg7cp4"><rect x="63" y="33" width="272" height="18"/></clipPath><clipPath id="svgimg7ov5"><rect x="63" y="33" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg7ct6"><rect x="63" y="33" width="272" height="18"/></clipPath><clipPath id="svgimg7cp7"><rect x="28" y="64" width="324" height="44"/></clipPath><clipPath id="svgimg7ov8"><rect x="29" y="65" width="322" height="42" rx="11"/></clipPath><clipPath id="svgimg7cp9"><rect x="37" y="77" width="18" height="18"/></clipPath><clipPath id="svgimg7cp11"><rect x="63" y="77" width="272" height="18"/></clipPath><clipPath id="svgimg7ov12"><rect x="63" y="77" width="272" height="18" rx="0"/></clipPath><clipPath id="svgimg7ct13"><rect x="63" y="77" width="272" height="18"/></clipPath></defs><g clip-path="url(#svgimg7cp0)"><rect x="28.5" y="20.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov1)"><g clip-path="url(#svgimg7cp2)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg7svgic3"><rect x="37" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic3)"><g transform="matrix(.75 0 0 .75 37 33)"><path d="M11.5 2.3a.5.5 0 0 1 1 0L14.8 7a2 2 0 0 0 1.6 1l5.1.8a.5.5 0 0 1 .3.9l-3.7 3.6a2 2 0 0 0-.6 2l.9 5a.5.5 0 0 1-.8.6L13 18.6a2 2 0 0 0-2 0L6.4 21a.5.5 0 0 1-.8-.6l1-5a2 2 0 0 0-.7-2L2.2 9.8a.5.5 0 0 1 .3-1l5.1-.7A2 2 0 0 0 9.2 7Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp4)"><g clip-path="url(#svgimg7ov5)"><text x="63" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Priority</text></g></g></g></g><g clip-path="url(#svgimg7cp7)"><rect x="28.5" y="64.5" width="323" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg7ov8)"><g clip-path="url(#svgimg7cp9)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg7svgic10"><rect x="37" y="77" width="18" height="18"/></clipPath><g clip-path="url(#svgimg7svgic10)"><g transform="matrix(.75 0 0 .75 37 77)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g clip-path="url(#svgimg7cp11)"><g clip-path="url(#svgimg7ov12)"><text x="63" y="92" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">All work</text></g></g></g></g></g></g></g></g></svg>

package/docs/design/templates/list-header/action-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="cp2"><rect x="361" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="315" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">TEAM MEMBERS</text></g></g><rect x="352.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(174, 174, 178)"><clipPath id="svgic3"><rect x="361" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 361 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(174, 174, 178)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g/></g></svg>

package/docs/design/templates/list-header/action.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="cp2"><rect x="365" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="319" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">TEAM MEMBERS</text></g></g><rect x="356.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgic3"><rect x="365" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 365 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="104.6" height="15"/></clipPath><clipPath id="cp2"><rect x="361" y="33" width="18" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="315" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">TEAM MEMBERS</text></g></g><rect x="352.5" y="24.5" width="35" height="35" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(110, 110, 115)"><clipPath id="svgic3"><rect x="361" y="33" width="18" height="18"/></clipPath><g clip-path="url(#svgic3)"><g transform="matrix(.75 0 0 .75 361 33)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M12 5v14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(110, 110, 115)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g/></g></svg>

package/docs/design/templates/list-header/count-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct2"><rect x="132" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">OPEN TICKETS</text></g></g><rect x="132" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(17,17,19)"/><text x="137.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(174,174,178)">12</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct2"><rect x="132" y="33" width="16.5" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">OPEN TICKETS</text></g></g><text x="132.05" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(174,174,178)">12</text></svg>

package/docs/design/templates/list-header/count.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct2"><rect x="132" y="31.2" width="23" height="21.6"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">OPEN TICKETS</text></g></g><rect x="132" y="31.2" width="23" height="21.6" rx="10.8" fill="rgb(242,242,247)"/><text x="137.64" y="46" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="10" font-weight="700" fill="rgb(110,110,115)">12</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="cp0"><rect x="29" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct1"><rect x="29" y="34.5" width="95" height="15"/></clipPath><clipPath id="ct2"><rect x="132" y="33" width="16.5" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="363" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g clip-path="url(#ct1)"><text x="29" y="46.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">OPEN TICKETS</text></g></g><text x="132.05" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(110,110,115)">12</text></svg>