@kerfjs/ui 5.0.0-beta.56 → 5.0.0-beta.58

package/docs/catalog.md

@@ -281,7 +281,7 @@ import {
   wireCatalog,
   wireCatalogGeometryOverlay,
 } from "@kerfjs/ui/wire-catalog";
-import "@kerfjs/ui/styles.css"; // or import each primitive's CSS + @kerfjs/ui/catalog.css
+// A CSS-aware (browser-condition) bundler loads the Catalog's CSS with its import.
 
 type DemoKind = "component" | "composition";
 type DemoEntry = CatalogSection["entries"][number] & { kind: DemoKind };
@@ -411,7 +411,9 @@ revealCatalogEntry(app, initial, { block: "center" });
 - **`mainToolbar` / `footerToolbar`** take the entry toolbar's and the resource
   footer toolbar's `ToolbarConfig` (`dividerSides`, `centerAlign`, `responsive`,
   `responsiveAt`, `safeAreaEdges`). The defaults are a wrapping entry toolbar
-  and a divider-free footer toolbar that stacks at `narrow`; an omitted or
+  and a footer toolbar that stacks at `narrow`, all without dividers of their
+  own: `wireCatalog` wires `wireScrollDividers`, so the shell's panes draw
+  their chrome dividers only while scrolled; an omitted or
   `undefined` field keeps them. Configure these instead of styling the shell.
 - **`theme`** is a global preference — the app's signal; `wireCatalog` only reports
   the toggle, the app applies the theme (the shell reads `theme` to show the toggle's
@@ -429,7 +431,10 @@ matching options on `wireCatalog`) if they collide with your own action table.
 `Catalog` composes public components (`Workbench`, `Pane`, `Toolbar`, `List`,
 `ListHeader`, `ListItem`, `ListInsetText`, `Text`, …) and owns only the preview stage
 (the checkerboard and centered canvas), the geometry overlay, the example viewport
-options, and the brand mark's size. Import `@kerfjs/ui/styles.css` for the whole
-layer, or `@kerfjs/ui/catalog.css` plus `@kerfjs/ui/workbench.css` and each composed
-primitive's CSS. Like any Workbench it needs a definite containing height — the
+options, and the brand mark's size. A bundler that honors the `browser` export
+condition loads the Catalog's stylesheets and those of every component it renders
+internally with the `@kerfjs/ui/catalog` import alone — no dependence on which other
+subpaths the app happens to import. Without that condition, import
+`@kerfjs/ui/styles.css` for the whole layer, or `@kerfjs/ui/catalog.css` plus
+`@kerfjs/ui/workbench.css` and each composed primitive's CSS. Like any Workbench it needs a definite containing height — the
 `@kerfjs/ui/document.css` baseline's `.kui-app-root`.

package/docs/collapsible-panel.md

@@ -10,7 +10,10 @@ subpath-only, tree-shakeable modules that add nothing to the main barrel.
 npm install @kerfjs/ui # kerfjs is a peer
 ```
 
-Import the panel CSS (`@kerfjs/ui/collapsible-panel.css`) alongside `foundation.css`.
+A browser bundler that honors the `browser` export condition loads the panel's CSS
+and that of the components it renders (`Pane`, `Toolbar`, `ToolbarControlGroup`,
+`LucideIcon`) with `@kerfjs/ui/collapsible-panel`. Without that condition, import
+`@kerfjs/ui/collapsible-panel.css` plus those stylesheets alongside `foundation.css`.
 
 ## The pieces
 
@@ -126,33 +129,40 @@ Give a panel a `toolbar` (the same roles as a
 [Workbench panel toolbar](workbench.md#panel-toolbars)) and it composes its own
 top toolbar over a `Pane`, with an optional `footer` below its content:
 
-- `title` and `panelOnly` groups lead it and are available only while it is open,
-  as is optional `center` content;
-- `constant` groups and the standard `toggle: { action, name, showLabel?,
-hideLabel? }` trail it.
+- `title` precedes the `leading` zone; `leading`, `center`, and `trailing`
+  place groups wherever the open panel needs them;
+- a `ToolbarControlGroup` marked `relocateOnCollapse` stays available in the
+  work area when the panel closes; the standard `toggle: { action, name,
+showLabel?, hideLabel? }` is always the final group.
 
 The toolbar also takes the `Toolbar`'s configuration (`dividerSides`,
-`centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`); it keeps its
-bottom divider unless `dividerSides` says otherwise. The `Pane` under it takes
-the panel's `pane` (`PaneConfig`: `contentElement`, `contentLabel`,
-`separators`, `safeAreaEdges`) — for example `{ contentElement: "nav",
+`centerAlign`, `responsive`, `responsiveAt`, `safeAreaEdges`); it draws no
+divider of its own unless `dividerSides` says so. The `Pane` under it draws
+the line under the toolbar only while its content is scrolled (see
+[Scroll dividers](./layout.md#scroll-dividers)), and takes the panel's `pane`
+(`PaneConfig`: `contentElement`, `contentLabel`, `separators`,
+`safeAreaEdges`, `chromeDividers`) — for example `{ contentElement: "nav",
 contentLabel: "Sections" }` for a navigation rail. An omitted or `undefined`
 field keeps the `Pane` default; without a `toolbar` there is no `Pane`, so
 `pane` is ignored.
 
 A standalone panel does not own the rest of the screen, so the app places a
 `CollapsiblePanelRelocated` in its own work-area toolbar: it renders the panel's
-`constant` groups and toggle while the panel is collapsed, and nothing while it
+marked groups and toggle while the panel is collapsed, and nothing while it
 is open. Put it first in the leading zone for a left rail, last in the trailing
 zone for a right rail, and last in a bottom toolbar for a bottom drawer. With no
 bottom toolbar, pass it inside a `FloatingToolbar` as the drawer's
 `restoreControl`.
+Marked groups move in `leading`, `center`, `trailing` order. Pass each marked
+group directly or in an array rather than wrapping it in a JSX fragment, so
+the panel can read its render-time annotation. Its copy in the closed panel is
+inert; avoid duplicate `id` attributes on marked groups.
 
 ```tsx
 const toolbar: CollapsiblePanelToolbar = {
   label: "Navigator",
-  panelOnly: <NewFileGroup />,
-  constant: <SearchGroup />,
+  leading: <NewFileGroup />,
+  trailing: <ToolbarControlGroup relocateOnCollapse label="Search files"><SearchButton /></ToolbarControlGroup>,
   toggle: { action: "toggle-nav", name: "navigator" },
 };
 
@@ -241,7 +251,6 @@ import {
   CollapsiblePanelToggle,
 } from "@kerfjs/ui/collapsible-panel";
 import { wireSidebar } from "@kerfjs/ui/wire-sidebar";
-import "@kerfjs/ui/collapsible-panel.css";
 
 const device = deviceClass();
 // Start collapsed on a compact device; `inlineCollapsed` keeps the open inline

package/docs/component-contract.md

@@ -18,12 +18,33 @@ package delivery paths, Web Awesome's installed manifest, AI guidance, and
 documentation links. Nuanced prose in this contract and the selection guide
 remains authored rather than generated.
 
-### Composition catalog v2
-
-[`component-catalog-v2.json`](../ai/component-catalog-v2.json) adds a formal,
-machine-evaluable composition layer without changing the v1 selection and
-delivery contract. Every v1 entry projects once, in order, under the stable
-qualified key `package:id`. Each v2 entry explicitly covers parents/contexts,
+### Markdown component reference (AI entry point)
+
+[`ai/components/README.md`](../ai/components/README.md) and one
+`ai/components/<id>.md` page per catalog entry are the assistant-facing view of
+both catalogs. An assistant reads the index, then only the pages it uses,
+instead of loading the full JSON. Each page merges the entry's selection facts
+(purpose, use/avoid, alternatives), delivery (JavaScript subpath, CSS,
+registration, wiring helpers), a link into `public-api-signatures-v1.md` for
+exact props, composition (parents, contexts, zones with their JSX prop and
+cardinality, children), state and wiring ownership including wiring-owned
+state attributes, geometry, accessibility obligations, public class and token
+hooks framed as a styling boundary (components own their styles; configure
+through props rather than overriding internals), and `KUI-C###` diagnostics
+with their conditions. `scripts/sync-component-docs.mjs` renders them only from
+`component-catalog.json` and `component-composition.json` (plus the signature
+file's module headings for anchors), sorted and Prettier-formatted;
+`check:catalog` rejects a stale, missing, or orphaned page. The JSON files stay
+the canonical tool-facing sources.
+
+### Composition catalog
+
+[`component-composition.json`](../ai/component-composition.json) adds a formal,
+machine-evaluable composition layer beside `component-catalog.json` without
+changing its selection and delivery contract; it is a generated companion, not
+a newer version of that catalog. Every component-catalog entry projects once,
+in order, under the stable qualified key `package:id`. Each composition entry
+explicitly covers parents/contexts,
 named zones and cardinality, optional explicit JSX prop bindings, child concepts, state ownership, required wiring,
 responsive ownership, layout and geometry, accessibility obligations, public
 CSS boundaries, diagnostics, and provenance. A wrapper entry may add
@@ -31,6 +52,18 @@ CSS boundaries, diagnostics, and provenance. A wrapper entry may add
 composition checks treat its elements as each root rather than as an unknown
 child.
 
+`boundaries.placeableClasses` names the subset of `publicClasses` an
+application may write onto its own elements (layout utilities, the document
+root, item geometry on another carrier); absent means none, and every other
+public class is the component's rendered anatomy. `boundaries.rootElement`
+names the element a component renders around its own placeable classes
+(`content-item`: `div`), so a plain element of that tag carrying them is still
+the component recreated. `eslint-plugin-kerfjs`'s `ui-public-boundaries`
+reports both as `KUI-L103` with the export to render — for `@kerfjs/ui` and for
+every consumer catalog a `.kerf-ui-profile.json` declares, whatever the class
+prefix. `create-kerf-component` packages declare the same fields in
+`kerf.components.json`.
+
 An entry's optional `cssValueProps` makes CSS-adjacent prop grammar equally
 machine-evaluable. Each path records the property grammar, finite shorthands,
 canonical versus exceptional spacing choices, standalone and expression-only
@@ -46,7 +79,8 @@ ESLint, `kerf-ui-analyze`, and `kerf-ui-doctor` then issue the same stable
 (`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`
+helper's wiring item in the component catalog, and the composition catalog
+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
@@ -55,7 +89,7 @@ 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
-`component-catalog-v2-overrides.json` and may carry stable `KUI-C###`
+`component-composition-rules.json` and may carry stable `KUI-C###`
 diagnostics. A tool reports a diagnostic only after proving its exact `when`
 condition. Subjective choice, product policy, and visual taste remain prose.
 
@@ -64,7 +98,7 @@ Use `children` for one homogeneous primary region; use explicit named
 `SafeHtml` props for semantic positions or replacement content such as
 `header`, `footer`, `leading`, `trailing`, `icon`, and `action`. These are typed
 function-component props, not native web-component `<slot>` elements and not a
-generic `slots={{...}}` object. A v2 zone declares `jsx.prop` only when tooling
+generic `slots={{...}}` object. A composition zone declares `jsx.prop` only when tooling
 can soundly bind that zone to one public JSX prop; `children` is spelled
 explicitly. Zones without that binding remain guidance and are never guessed
 from their ids. Static tools inspect only visible JSX structure and leave
@@ -85,13 +119,14 @@ can return a region plus a sibling restore control, leaving no single root that
 can truthfully own native slot assignment. Their single-root controls and all
 alternate-root branches of supported components retain the contract.
 
-V1 consumers continue unchanged. V2 consumers read v1 for selection/delivery
-and v2 for composition. `npm run catalog:sync` projects every new component,
+Component-catalog consumers continue unchanged. Composition-aware consumers
+read `component-catalog.json` for selection/delivery and
+`component-composition.json` for composition. `npm run catalog:sync` projects every new component,
 recipe, and supported Web Awesome entry, and the completeness gate prevents
-silent omissions. Downstream catalogs use the v2 extension schema and types,
+silent omissions. Downstream catalogs use the composition extension schema and types,
 retain their own package identity, and qualify cross-catalog references. See
 the checked
-[`component-catalog-extension-v2.json`](./examples/component-catalog-extension-v2.json)
+[`component-composition-extension.json`](./examples/component-composition-extension.json)
 application-owned example.
 
 ### Compile-time contract boundary
@@ -117,10 +152,11 @@ layout/responsive conventions, and narrow rule exceptions there. Product
 records, copy, permissions, user preferences, and transport state do not belong
 in this policy file.
 
-Every catalog location names a v2 composition artifact. `selection` is optional
-for consumer packages whose generated metadata declares v1 selection guidance
-not applicable; `@kerfjs/ui` retains its required v1 selection artifact. This
-lets a generated `component-catalog-v2.json` participate directly without a
+Every catalog location names a composition artifact. `selection` is optional
+for consumer packages whose generated metadata declares component-catalog
+selection guidance not applicable; `@kerfjs/ui` retains its required
+`component-catalog.json` selection artifact. This
+lets a generated `component-composition.json` participate directly without a
 fabricated compatibility file.
 
 Discovery and precedence are deterministic:
@@ -147,6 +183,22 @@ I/O.
 See the
 [`application-ui-profile.json`](./examples/application-ui-profile.json) example.
 
+The package defaults avoid every `Discouraged` Web Awesome entry — each
+`webawesome` catalog entry whose `recommendation` is not `supported`, except the
+encouraged `wa-popup` primitive — under a concept whose `preferred` value is the
+Kerf component that wraps or replaces it (`command-menu` → `PopupMenu`,
+`value-selection` → `Select`, `application-tabs` → `TabBar`, `icon` →
+`LucideIcon`, `resizable-pane` → `ResizableRegion`, `exclusive-choice` →
+`SegmentedControl`, `hierarchy-navigation` → `List`, `embedded-media` →
+`ContentItem`). `eslint-plugin-kerfjs` `ui-preferences` (`KUI-L301`, also run by
+`kerf-ui-doctor`) therefore reports a Discouraged element written directly as a
+JSX tag (`<wa-dropdown>`) as well as through an imported component. A declared
+component's own source file is exempt, because that wrapper is the sanctioned
+owner of the element it renders. A unit test holds the avoid set and the
+catalog's Discouraged set equal in both directions, so neither can drift. A
+product that genuinely needs one of these elements records a narrow `KUI-L301`
+profile exception for the file that renders it.
+
 Catalog detail footers use one standard resource vocabulary and order. Build
 them with `catalogResources()` from `@kerfjs/ui/catalog-resources`: `Demo source`
 first, optional `Component source` and `Design template`, then `Guidance`.
@@ -232,7 +284,72 @@ documented props and tokens; package components may compose other components
 only through those public contracts, never by styling a child's classes from a
 parent stylesheet.
 
-The v2 composition catalog additionally requires `boundaries.rootClass` to be
+Inside the package, a component never styles another component or writes
+another component's variables. When a child must adapt to a composing parent,
+the child styles itself in that context from its own stylesheet: the parent's
+class and state appear only in an ancestor compound, the styled compound is
+the child's own class (or one of the child's own unclassed internals below
+it), and the child reads context values the parent provides under the
+parent's name. `ResizableRegion` widens its edge extent by the unsafe inset a
+split `SplitView` provides, and a `Skeleton` derives its fill from a solid
+`Badge`'s on-solid color, both in their own stylesheets; an `AppTab` rounds its
+outer corners in a segmented `TabBar` and shares a fill-allocated strip from
+`app-tab.css`. A `PopupMenu` sizes
+its trigger and applies a group's `menuInset` in its own stylesheet, and an
+icon-only `Select` reads the control slot a `ToolbarControlGroup` provides
+(`--_kui-toolbar-control-group-slot-*`). A parent may still style its own
+elements keyed on a child's state, naming the child by class inside `:has()`
+(`:has(> .kui-select[open])`, or `TabBar` insetting a segmented strip that
+holds compact tabs), and it keeps styling raw native and raw Web
+Awesome children no kerf component owns, excluding kerf children by class
+(`wa-dropdown:not(.kui-popup-menu)`). `npm run check:css-ownership` enforces
+this in every component stylesheet (a `src/*.css` with a same-basename
+component), deriving the component names, the Web Awesome tags each component
+renders, and its composed children from `src/*.tsx`:
+
+- **Foreign classes.** Another component's class or `[data-component]` may
+  appear only in an ancestor compound or inside `:has()` / `:not()`; the
+  styled compound is the stylesheet's own class.
+- **Owned Web Awesome tags.** Kerf components are named by class, never by a
+  `wa-*` tag they render. A tag another component renders (`wa-dropdown`,
+  `wa-select`, `wa-option`, a `PopupMenu`'s trigger `wa-button`) — as the
+  subject, or as an ancestor whose internals the rule reaches — must be scoped
+  to that component by its class or excluded with `:not()`. A direct child
+  that cannot be the owner's internal
+  (`.kui-toolbar-control-group > wa-button`) needs no exclusion.
+- **Variables.** A stylesheet writes only its own `--_kui-<self>-*` private
+  variables, and never overrides a public `--kui-<other>-*` token that another
+  component reads. Shared foundation tokens (`--kui-layout-*`,
+  `--kui-color-*`, …) are not any one component's. Context a parent provides
+  is named after the parent.
+- **Context on any child.** Custom properties set on a subject that can be any
+  element (`.kui-x > *`, `> :not(…)`) also land on composed components' roots.
+- **Hook classes.** A class the component places on a composed kerf child's
+  root (`<ToolbarText className="kui-nav-stack__title">`, a class NavStack once styled) may not be styled;
+  the child styles itself in that context instead.
+
+The documented exceptions live with their reasons in
+`scripts/lib/css-ownership.mjs`, and an exception that stops matching fails the
+check, so the list only shrinks. The layout regions' inherited edge-inset
+context (`--kui-edge-inset-*` handed to a sole Pane or layout child and cleared
+for any other content, and a Toolbar clearing it for its zones) is the one
+design exception; the others name the open fix ticket.
+
+Applications and component packages built on the package follow the same
+rules, and the downstream tools enforce them against the composition catalog
+instead of package source: `kerf-ui-analyze` / `kerf-ui-doctor` report a rule
+whose subject is another package's component (`KUI-L019`), another
+component's private `--_*` variable (`KUI-L020`), an override of a token a
+typed prop sets (`KUI-L021`), and a hook class on a component's root
+(`KUI-L022`); `eslint-plugin-kerfjs`'s `ui-component-ownership` reports
+`KUI-L020` / `KUI-L021` in script. Both share the selector parsing in
+`analyzer/selectors.mjs` with `check:css-ownership`, and
+`check:css-ownership` fails when a component renders a Web Awesome tag the
+catalog does not list, so `KUI-L019` keeps covering every tag a kerf component
+renders. Each finding names the configuration to use and routes a missing
+prop to a component-gap report (see [the analyzer guide](./ui-analyzer.md#component-ownership-kui-l019kui-l022)).
+
+The composition catalog additionally requires `boundaries.rootClass` to be
 either one exact member of `publicClasses` or `null` when the entry has no
 rendered class root. Runtime geometry tooling uses this explicit field; array
 order never implies root ownership.
@@ -262,7 +379,11 @@ primary label should wrap rather than truncate. A single-line row ends its
 primary label and description with an ellipsis before the trailing status
 slot, even when the label is one long word; a `multiline` row wraps instead,
 breaking a word wider than the label column (a long component or file name)
-rather than letting it run under the trailing slot. `ListActionRow` labels
+rather than letting it run under the trailing slot. A string label in a
+`multiline` row gets line-break opportunities at its camelCase and acronym
+boundaries, so `QuickTicketComposer` wraps as `QuickTicket` / `Composer`
+rather than mid-word; breaking anywhere is only the last resort for a single
+word that is still too wide. The text and accessible name are unchanged. `ListActionRow` labels
 follow the same single-line and `multiline` rules before the trailing action.
 
 `DisclosureArrow` uses an 18px root-scaled visual by default. Pass its typed
@@ -308,7 +429,9 @@ inset. `ToolbarControlGroup` publishes its derived radius to nested toolbar
 highlights concentric when the group switches between pill and rounded shapes.
 
 `ResizableRegion` owns the Hot Sheet 2 split treatment: a persistent 1px
-separator with a compact grip that appears on hover or keyboard focus. Override
+separator with a compact grip that appears on hover or keyboard focus. The grip
+is drawn centered on the separator line even though the pointer target is wider
+than the line, so the handle never reads as offset into a pane. Override
 `--kui-resizable-region-separator-color`,
 `--kui-resizable-region-handle-color`, or
 `--kui-resizable-region-handle-active-color` on a region when its containing
@@ -362,7 +485,10 @@ group that replaces wider toolbar controls below the Toolbar's compact container
 breakpoint; do not hide the group with an application class. Reach for
 `wa-button` only when you need
 a Web Awesome feature; a popup menu is a `PopupMenu`, which renders its own
-trigger. For a compact mixed-content group, set `nestedDropdown`; a
+trigger. Nothing wraps inside a group: an icon sits beside its label on one
+row, and a group's controls never break onto a second line — the group sizes
+to its content and the enclosing `Toolbar`'s responsive policy relocates whole
+groups. 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. 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

package/docs/component-selection.md

@@ -5,7 +5,7 @@ Use the shipped [`component-catalog.json`](../ai/component-catalog.json) when a
 tool needs exhaustive structured facts; this page remains the concise human
 decision procedure.
 
-1. Search the [Kerf UX catalog](./ux-demo.md) and the supported Web Awesome set.
+1. Search the [Kerf UX catalog](./ux-demo.md) and the supported Web Awesome set. Prefer a Kerf UI component over a Web Awesome component over a raw HTML tag, using each naturally for what it is good at.
 2. Reuse a primitive when its purpose, anatomy, state, and interaction match.
 3. Compose primitives for recurring layout through public props and tokens. Do not select one component from another component's stylesheet.
 4. Add a thin application adapter for product copy, domain mapping, actions, routing, persistence, permissions, and transport.
@@ -149,6 +149,7 @@ an upstream component or recipe request.
 | 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 `sides="rl"` 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)                                    |
 | Self-contained content child — `ContentItem`                                                                            | An ordinary surface-like child of a `Pane` or `.kui-content` stack needs the shared 8px margin / 1px border / 8px padding geometry; pass `frame="framed"` only when it marks a real distinction and must read as visibly bounded, and `shape="pill"` for the 22px radius.                                                                                | Do not wrap a component that already owns content-item geometry (`ListItem`, `ListHeader`, `StateBanner`, `Toolbar`, `ValueTable`) or pad around it — that double-insets. Do not frame an item only to make it look contained. Use `SunkenPanel` for a lowered filled surface and `ListInsetText` for bare text that only needs to align.  | Pass the item content as children; choose `frame` (`none` default, `framed`) and `shape` (`rounded` default, `pill`) instead of writing `.kui-content-item` modifier classes. Put safe `data-*` metadata in `rootAttributes`; `ariaLabel` names a distinct region and `focusTarget` makes it a programmatic focus target.                                                                                                                                                                                                                                                                                                                                                                                              | The content and whether it marks a distinction worth a visible frame.                                                                                    | `@kerfjs/ui/content-item`                                                                 | [Content items](./layout.md#content-items)                                          |
 | 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 `ContentItem` children 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)                                                 |
+| Scroll dividers — `wireScrollDividers`                                                                                  | Pinned chrome (a `Pane` header or footer, a `NavStack` top chrome or bottom toolbar, a `TabScaffold` bar, the sides of a `TabBar` strip, or app-owned chrome around a scroller) needs a divider only while content is scrolled away beneath it.                                                                                                          | Do not keep a static toolbar divider to fake it or write a border onto another component; each component draws its own line from the wiring's state.                                                                                                                                                                                       | Call `wireScrollDividers` once at the app root and retain the disposer; it covers every `Pane`, `NavStack`, `TabScaffold`, and `TabBar` below it. Name app-owned arrangements in `targets` by id; a `Toolbar` or `List` named as chrome draws its facing side. Configure a pane with `chromeDividers` (`scroll` default, `always`, `none`).                                                                                                                                                                                                                                                                                                                                                                            | Which panes follow the scroll, app-owned targets, and the disposer.                                                                                      | `@kerfjs/ui/wire-scroll-dividers`                                                         | [Scroll dividers](./layout.md#scroll-dividers)                                      |
 | One-pane navigation — `NavStack`                                                                                        | A compact flow pushes into details while keeping earlier views mounted, or a single-pane screen needs the same stable layout contract.                                                                                                                                                                                                                   | Do not use it when list and detail should remain visible together; use `SplitView`. Do not use it alone for co-equal top-level destinations; use one stack per `TabScaffold` tab.                                                                                                                                                          | Keep the ordered view array controlled, put view-specific bottom chrome on each view (or use the component fallback), import its CSS explicitly, and call `wireNavStack` for back delegation, content-slide/chrome-cross-fade transitions, and focus move/restore. Mark a preferred initial target with `data-nav-focus` when DOM order is insufficient.                                                                                                                                                                                                                                                                                                                                                               | View keys/content/titles, push and pop actions, preferred initial focus targets, and per-view or persistent bottom toolbar content.                      | `@kerfjs/ui/nav-stack`                                                                    | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
 | Responsive list-detail — `SplitView`                                                                                    | A primary list and related detail belong together on roomy devices but become a one-pane drill-down on compact devices.                                                                                                                                                                                                                                  | Do not use it for a single linear flow or a multi-panel editor shell.                                                                                                                                                                                                                                                                      | Provide controlled selection/detail state and device class; opt into resize wiring only when the separator is user adjustable.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Selection, detail content, compact back action, device policy, and optional persisted width.                                                             | `@kerfjs/ui/split-view`                                                                   | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
 | Compact top-level destinations — `TabScaffold`                                                                          | A handset or portrait-tablet app has two to five co-equal destinations whose scenes and nested navigation must remain mounted across switches.                                                                                                                                                                                                           | Do not use it for document tabs, reorderable work items, or a desktop navigation rail.                                                                                                                                                                                                                                                     | Keep the active id controlled, import its CSS explicitly, and call `wireTabScaffold`; commonly place one `NavStack` in each tab scene.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                 | Destination definitions, active id, routing, persistence, and roomy-device replacement.                                                                  | `@kerfjs/ui/tab-scaffold`                                                                 | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
@@ -190,9 +191,10 @@ an upstream component or recipe request.
   on the component instead of adding application descendant width/height fixes.
   It paints `--kui-color-surface` itself (an inline region stays transparent),
   so do not add a background to make an overlay opaque.
-- Give `Workbench` panels a `toolbar` (title, panel-only groups, constant
+- Give `Workbench` panels a `toolbar` (title, `leading` / `center` / `trailing`
   groups, and a standard `toggle`) and the work area a `mainToolbar` /
-  `mainBottomToolbar`: the Workbench moves a closed panel's constant groups
+  `mainBottomToolbar`: the Workbench moves a closed panel's groups marked
+  `relocateOnCollapse`
   and toggle into the work area's toolbar, so never hand-place or duplicate
   panel toggles. See [Workbench panel toolbars](workbench.md#panel-toolbars).
 - Configure application panels through the shared `separator`, `collapseMotion`,
@@ -224,10 +226,18 @@ copy below as app-owned content. Size the title to its track: a narrow
 peripheral rail or drawer (a navigator, inspector, or console beside a work
 area that carries the extra-large title, often with its own close control in
 the header) labels itself with the default size, because extra-large truncates
-there — "Inspector" becomes "Ins…" in a 160px rail. A bottom divider is
-enabled by default. Set `dividerSides=""` for none, or
-use the canonical physical-edge combinations (`t`, `r`, `b`, `l`, in that
-order—for example `tr` or `trbl`) when the toolbar owns other separator edges.
+there — "Inspector" becomes "Ins…" in a 160px rail. Nothing wraps inside a
+`ToolbarControlGroup`: an icon sits beside its label on one row and the group
+sizes to its content, so a row that does not fit relocates whole groups
+through the toolbar's `responsive` policy rather than breaking a group. A
+toolbar draws no divider by default: pinned over or under scrolling content,
+it gets one from the scroll state instead — the `Pane` it heads draws the line
+only while content is scrolled beneath it, once `wireScrollDividers` is wired
+(see [Scroll dividers](./layout.md#scroll-dividers)). Set `dividerSides` to the
+canonical physical-edge combinations (`t`, `r`, `b`, `l`, in that order—for
+example `b`, `tr`, or `trbl`) only when the toolbar owns a permanent separator
+edge. Dividers earn their place: never fake one with a border or pad below one
+to make it look right.
 
 Common toolbar patterns:
 
@@ -317,7 +327,10 @@ Web Awesome catalog coverage means supported and themed, not preferred. Import
 registration, and the CSS-only `@kerfjs/ui/webawesome.css` theme. The UX catalog
 marks the superseded or exceptional choices below with a visible `Discouraged`
 tag; Popup remains untagged because low-level anchored positioning can be the
-right primitive.
+right primitive. Never render a `Discouraged` element directly in application,
+demo, or recipe markup: reach it only through the Kerf component that wraps or
+replaces it (`PopupMenu` renders `wa-dropdown`; `Select` renders `wa-select` /
+`wa-option`), and file a component gap rather than dropping to the raw tag.
 
 | Web Awesome choice                                                 | Kerf decision                                                                                                                                         |
 | ------------------------------------------------------------------ | ----------------------------------------------------------------------------------------------------------------------------------------------------- |

package/docs/design/templates/tab-bar/workspace-tabs-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 96" width="640" height="96"><defs><clipPath id="cp0"><rect x="28" y="28" width="584" height="44"/></clipPath><clipPath id="ov1"><rect x="29" y="29" width="582" height="42" rx="21"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="cp3"><rect x="67" y="42" width="16.4" height="16"/></clipPath><clipPath id="cp5"><rect x="91.4" y="42.5" width="74.4" height="15"/></clipPath><clipPath id="ct6"><rect x="91.4" y="42.5" width="74.4" height="15"/></clipPath><clipPath id="cp7"><rect x="240.5" y="42" width="16.5" height="16"/></clipPath><clipPath id="cp9"><rect x="264.5" y="42.5" width="47.7" height="15"/></clipPath><clipPath id="ct10"><rect x="264.5" y="42.5" width="47.7" height="15"/></clipPath><clipPath id="cp11"><rect x="387" y="42" width="16" height="16"/></clipPath><clipPath id="cp13"><rect x="411" y="42.5" width="60" height="15"/></clipPath><clipPath id="ct14"><rect x="411" y="42.5" width="60" height="15"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28.5" y="28.5" width="583" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#ov1)"><rect x="30" y="31" width="173.1" height="40" rx="20" fill="rgba(0,0,0,0.5)" filter="url(#sh2)"/><rect x="30" y="30" width="173.1" height="40" rx="20" fill="rgb(28,28,30)"/><rect x="30.5" y="30.5" width="172" height="39" rx="19.5" fill="none" stroke="rgba(72,72,74,0.8)" stroke-width="1"/><g clip-path="url(#cp3)"><g color="rgb(138, 203, 255)"><clipPath id="svgic4"><rect x="67.4" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic4)"><g transform="translate(67.39 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" 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(#cp5)"><g clip-path="url(#ct6)"><text x="91.39" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">README.md</text></g></g></g><g clip-path="url(#ov1)"><rect x="203.5" y="30.5" width="146" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp7)"><g color="rgb(174, 174, 178)"><clipPath id="svgic8"><rect x="240.5" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic8)"><g transform="translate(240.531 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" 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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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 clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="264.53" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">index.ts</text></g></g></g><g clip-path="url(#ov1)"><rect x="350.5" y="30.5" width="157" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp11)"><g color="rgb(174, 174, 178)"><clipPath id="svgic12"><rect x="387" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic12)"><g transform="translate(387.031 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" 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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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 clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="411.03" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">styles.css</text></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 96" width="640" height="96"><defs><clipPath id="cp0"><rect x="28" y="28" width="584" height="44"/></clipPath><clipPath id="ov1"><rect x="29" y="29" width="582" height="42" rx="21"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="cp3"><rect x="67" y="42" width="16.4" height="16"/></clipPath><clipPath id="cp5"><rect x="91.4" y="42.5" width="74.4" height="15"/></clipPath><clipPath id="ct6"><rect x="91.4" y="42.5" width="74.4" height="15"/></clipPath><clipPath id="cp7"><rect x="240.5" y="42" width="16.5" height="16"/></clipPath><clipPath id="cp9"><rect x="264.5" y="42.5" width="47.7" height="15"/></clipPath><clipPath id="ct10"><rect x="264.5" y="42.5" width="47.7" height="15"/></clipPath><clipPath id="cp11"><rect x="387" y="42" width="16" height="16"/></clipPath><clipPath id="cp13"><rect x="411" y="42.5" width="60" height="15"/></clipPath><clipPath id="ct14"><rect x="411" y="42.5" width="60" height="15"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28.5" y="28.5" width="583" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g/></g><g clip-path="url(#ov1)"><rect x="30" y="31" width="173.1" height="40" rx="20" fill="rgba(0,0,0,0.5)" filter="url(#sh2)"/><rect x="30" y="30" width="173.1" height="40" rx="20" fill="rgb(28,28,30)"/><rect x="30.5" y="30.5" width="172" height="39" rx="19.5" fill="none" stroke="rgba(72,72,74,0.8)" stroke-width="1"/><g clip-path="url(#cp3)"><g color="rgb(138, 203, 255)"><clipPath id="svgic4"><rect x="67.4" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic4)"><g transform="translate(67.39 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" 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(#cp5)"><g clip-path="url(#ct6)"><text x="91.39" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(138,203,255)">README.md</text></g></g></g><g clip-path="url(#ov1)"><rect x="203.5" y="30.5" width="146" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp7)"><g color="rgb(174, 174, 178)"><clipPath id="svgic8"><rect x="240.5" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic8)"><g transform="translate(240.531 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" 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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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 clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="264.53" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">index.ts</text></g></g></g><g clip-path="url(#ov1)"><rect x="350.5" y="30.5" width="157" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp11)"><g color="rgb(174, 174, 178)"><clipPath id="svgic12"><rect x="387" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic12)"><g transform="translate(387.031 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" 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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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 clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="411.03" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(174,174,178)">styles.css</text></g></g></g></svg>

package/docs/design/templates/tab-bar/workspace-tabs.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 96" width="640" height="96"><defs><clipPath id="cp0"><rect x="28" y="28" width="584" height="44"/></clipPath><clipPath id="ov1"><rect x="29" y="29" width="582" height="42" rx="21"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="cp3"><rect x="67" y="42" width="16.4" height="16"/></clipPath><clipPath id="cp5"><rect x="91.4" y="42.5" width="74.4" height="15"/></clipPath><clipPath id="ct6"><rect x="91.4" y="42.5" width="74.4" height="15"/></clipPath><clipPath id="cp7"><rect x="240.5" y="42" width="16.5" height="16"/></clipPath><clipPath id="cp9"><rect x="264.5" y="42.5" width="47.7" height="15"/></clipPath><clipPath id="ct10"><rect x="264.5" y="42.5" width="47.7" height="15"/></clipPath><clipPath id="cp11"><rect x="387" y="42" width="16" height="16"/></clipPath><clipPath id="cp13"><rect x="411" y="42.5" width="60" height="15"/></clipPath><clipPath id="ct14"><rect x="411" y="42.5" width="60" height="15"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28.5" y="28.5" width="583" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g clip-path="url(#ov1)"><rect x="30" y="31" width="173.1" height="40" rx="20" fill="rgba(0,0,0,0.14)" filter="url(#sh2)"/><rect x="30" y="30" width="173.1" height="40" rx="20" fill="rgb(255,255,255)"/><rect x="30.5" y="30.5" width="172" height="39" rx="19.5" fill="none" stroke="rgba(209,209,214,0.8)" stroke-width="1"/><g clip-path="url(#cp3)"><g color="rgb(12, 98, 243)"><clipPath id="svgic4"><rect x="67.4" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic4)"><g transform="translate(67.39 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" 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(#cp5)"><g clip-path="url(#ct6)"><text x="91.39" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(12,98,243)">README.md</text></g></g></g><g clip-path="url(#ov1)"><rect x="203.5" y="30.5" width="146" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp7)"><g color="rgb(110, 110, 115)"><clipPath id="svgic8"><rect x="240.5" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic8)"><g transform="translate(240.531 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" 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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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 clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="264.53" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">index.ts</text></g></g></g><g clip-path="url(#ov1)"><rect x="350.5" y="30.5" width="157" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp11)"><g color="rgb(110, 110, 115)"><clipPath id="svgic12"><rect x="387" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic12)"><g transform="translate(387.031 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" 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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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 clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="411.03" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">styles.css</text></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 640 96" width="640" height="96"><defs><clipPath id="cp0"><rect x="28" y="28" width="584" height="44"/></clipPath><clipPath id="ov1"><rect x="29" y="29" width="582" height="42" rx="21"/></clipPath><filter id="sh2" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="cp3"><rect x="67" y="42" width="16.4" height="16"/></clipPath><clipPath id="cp5"><rect x="91.4" y="42.5" width="74.4" height="15"/></clipPath><clipPath id="ct6"><rect x="91.4" y="42.5" width="74.4" height="15"/></clipPath><clipPath id="cp7"><rect x="240.5" y="42" width="16.5" height="16"/></clipPath><clipPath id="cp9"><rect x="264.5" y="42.5" width="47.7" height="15"/></clipPath><clipPath id="ct10"><rect x="264.5" y="42.5" width="47.7" height="15"/></clipPath><clipPath id="cp11"><rect x="387" y="42" width="16" height="16"/></clipPath><clipPath id="cp13"><rect x="411" y="42.5" width="60" height="15"/></clipPath><clipPath id="ct14"><rect x="411" y="42.5" width="60" height="15"/></clipPath></defs><g clip-path="url(#cp0)"><rect x="28.5" y="28.5" width="583" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::before" data-domotion-pseudo-owner="source-fragments"><g/></g><g data-domotion-pseudo-source="blink-pseudo-fragment-v1" data-domotion-pseudo="::after" data-domotion-pseudo-owner="source-fragments"><g/></g><g clip-path="url(#ov1)"><rect x="30" y="31" width="173.1" height="40" rx="20" fill="rgba(0,0,0,0.14)" filter="url(#sh2)"/><rect x="30" y="30" width="173.1" height="40" rx="20" fill="rgb(255,255,255)"/><rect x="30.5" y="30.5" width="172" height="39" rx="19.5" fill="none" stroke="rgba(209,209,214,0.8)" stroke-width="1"/><g clip-path="url(#cp3)"><g color="rgb(12, 98, 243)"><clipPath id="svgic4"><rect x="67.4" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic4)"><g transform="translate(67.39 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M14 2v5a1 1 0 0 0 1 1h5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M10 9H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 13H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M16 17H8" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(12, 98, 243)" 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(#cp5)"><g clip-path="url(#ct6)"><text x="91.39" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(12,98,243)">README.md</text></g></g></g><g clip-path="url(#ov1)"><rect x="203.5" y="30.5" width="146" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp7)"><g color="rgb(110, 110, 115)"><clipPath id="svgic8"><rect x="240.5" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic8)"><g transform="translate(240.531 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" 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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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 clip-path="url(#cp9)"><g clip-path="url(#ct10)"><text x="264.53" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">index.ts</text></g></g></g><g clip-path="url(#ov1)"><rect x="350.5" y="30.5" width="157" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp11)"><g color="rgb(110, 110, 115)"><clipPath id="svgic12"><rect x="387" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic12)"><g transform="translate(387.031 42)scale(.66667)"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" 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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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 clip-path="url(#cp13)"><g clip-path="url(#ct14)"><text x="411.03" y="54.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(110,110,115)">styles.css</text></g></g></g></svg>