@kerfjs/ui 5.0.0-beta.106 → 5.0.0-beta.108

package/docs/component-selection.md

@@ -108,6 +108,30 @@ useful subtree. Prefer a component prop or component-specific token when the
 change belongs to one component or instance, and preserve the documented
 foreground/background contrast relationships and visible focus ring.
 
+### Brand color
+
+Set the opt-in `--kui-color-brand` once on `:root` to give the application its
+own brand. Any color works: Kerf derives the whole brand ramp from it — the
+loud fill (and the quiet and normal fills and borders mixed from it), its
+on-loud text, brand text and links, brand text on brand fills, and the focus
+ring — clamping lightness in each color scheme so every pair keeps WCAG AA for
+any hue. Unset, every brand token keeps its tuned default exactly. With the
+Web Awesome integration the same derivation drives `--wa-color-brand-*` and
+`--wa-color-focus`.
+
+```css
+:root {
+  --kui-color-brand: #1a7f37;
+}
+```
+
+Do not change the brand by overriding `--kui-color-brand-fill-loud` alone:
+brand text (`--kui-color-brand-on-quiet`, `--kui-color-brand-on-fill`) and the
+focus ring are separate tuned values and would stay the default blue. Choose a
+brand hue apart from the status tones it shares surfaces with: `info` follows
+the brand, so a green brand makes an info banner read like `success`. For one
+subtree with a different identity, use a scoped `tint` accent instead.
+
 ### Typed runtime dimensions
 
 Use `Row`, `Grid`, or `List` spacing shorthands for repeated sibling spacing: `gap="xs"`,
@@ -259,7 +283,7 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Modal dialog, dialog or popup geometry — `DialogSurface`, `openDialog`, `closeDialog`, `PopoverDialogSurface`, `PopupSurface` | A task must block the page in a modal dialog with standard sizes/presentations/body/footer insets, typed modal viewport bounds, a definite height, or a body one child fills; a dialog must stay non-modal and light-dismiss; or a raw dropdown menu needs list-compatible inset ownership.                                                                                                               | Do not use these surfaces as generic layout. Do not toggle a `DialogSurface`'s `open` attribute (that opens it non-modally), avoid consumer `::part()` or descendant overrides, and do not stack a dialog body inset around list-owned child geometry.                                                                                     | Render `DialogSurface` with a `label` (or `labelledBy` plus a `heading`), the body as children, and its buttons as `footer`; open it with `openDialog()` and close it with `closeDialog()`, its close button, or a `data-dialog-close` element, and cancel `kui-request-close` to keep it open. Compose a dialog body as a `List` by default, use `bodyInset="none"` when its children own list geometry, and wrap bare prose in `ListInsetText`. Set `height` with `bodyLayout="fill"` when one `SplitView` or `Pane` should fill the body. For a non-modal, light-dismiss dialog render `PopoverDialogSurface` (native `popover="auto"`, opened by a `popoverTarget` control or `showPopover()`), never a hand-built popover with app chrome CSS; `presentation="embedded"` shows it in flow. Wrap a raw `wa-dropdown` in `PopupSurface` for its menu inset. | Open state, whether a close may proceed, dismissal policy, names, content, and outer placement.                                                          | `@kerfjs/ui/surface-scaffold`                                                             | [Surface scaffolds](./surface-scaffold.md)                                                     |
 | Modal list-detail — `ListDetailDialog`                                                                                        | A modal task picks one record from a list and shows its detail beside it, with the dialog's title, actions, and close control belonging to the detail.                                                                                                                                                                                                                                                    | Do not use it for a single-pane dialog; use `DialogSurface`. Do not wrap a `SplitView` in a `DialogSurface` by hand for this layout: the surface header spans both columns and stops the divider below it.                                                                                                                                 | Pass `list` (`title`, `toolbar`, `content`, `footer`, `width`) and `detail` (`title`, `description`, `actions`, `content`, `footer`); open it with `openDialog()`; pass `compact` from `deviceClass()` and `detailActive` for the compact drill-down, and pop on `nav-back`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Open state, selection, the pushed detail, device policy, content, and record actions.                                                                    | `@kerfjs/ui/list-detail-dialog`                                                           | [ListDetailDialog](./list-detail-dialog.md)                                                    |
 | Modal workbench — `WorkbenchDialog`                                                                                           | A modal editing task needs a work area with side panels (layers, an inspector) whose rails overlay the work area on compact devices.                                                                                                                                                                                                                                                                      |
-| Show and hide content — `Disclosure`                                                                                          | Optional or advanced content should stay one press away under a summary (advanced settings, a build log), or several sections should open one at a time.                                                                                                                                                                                                                                                  | Do not use it to switch peer views (use `SegmentedControl` or `TabBar`) or for a collapsible rail (use `CollapsiblePanel`). Do not hand-build a details element with its own marker CSS.                                                                                                                                                   | Render `Disclosure` with a `title`, an optional `detail`, and content that draws no inset of its own; give Disclosures the same `name` for an accordion; pick `appearance` `plain`, `framed`, or `sunken`. The open state is native: close it from code with `element.open = false`, and listen for the captured `toggle` event through `toggleAction`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Title, content, initial open state, group name, and toggle handling.                                                                                     | `@kerfjs/ui/disclosure`                                                                   | [Disclosure](./disclosure.md)                                                                  |
+| Show and hide content — `Disclosure`                                                                                          | Optional or advanced content should stay one press away under a summary (advanced settings, a build log), or several sections should open one at a time.                                                                                                                                                                                                                                                  | Do not use it to switch peer views (use `SegmentedControl` or `TabBar`) or for a collapsible rail (use `CollapsiblePanel`). Do not hand-build a details element with its own marker CSS.                                                                                                                                                   | Render `Disclosure` with a `title`, an optional `detail`, and content that draws no inset of its own; give Disclosures the same `name` for an accordion; pick `appearance` `plain`, `framed`, or `sunken`, or `embedded` inside a `ContentItem` that already owns the inset (no margin, border, or padding of its own, a compact summary row, and `flush` `Text` content). The open state is native: close it from code with `element.open = false`, and listen for the captured `toggle` event through `toggleAction`.                                                                                                                                                                                                                                                                                                                                        | Title, content, initial open state, group name, and toggle handling.                                                                                     | `@kerfjs/ui/disclosure`                                                                   | [Disclosure](./disclosure.md)                                                                  |
 | Core overlay bottom sheet — `@kerfjs/ui/overlay-sheet.css`, `wireOverlaySheets`                                               | A `kerfjs/overlay` `overlay()`, `confirm()`, `prompt()`, `form()`, or `choice()` opened with `presentation: 'bottom-sheet'` should look like a `DialogSurface` sheet, and optionally be resizable by the person.                                                                                                                                                                                          | Do not hand-style `.kerf-overlay` or build a grabber; prefer a `DialogSurface` `presentation="bottom-sheet"` when the dialog is a Kerf `DialogSurface` rather than a core overlay.                                                                                                                                                         | Import `@kerfjs/ui/overlay-sheet.css` once. Pass `exitClass: 'kui-overlay-sheet-exit'` for the slide out. For a resizable sheet, add the `kui-overlay-sheet-resizable` class (`className: 'kerf-overlay kui-overlay-sheet-resizable'`) and call `wireOverlaySheets()` once per container sheets open in (`document.body` by default).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Opening, results, content, and which sheets are resizable.                                                                                               | `@kerfjs/ui/overlay-sheet.css`, `@kerfjs/ui/wire-overlay-sheets`                          | [Core overlay bottom sheets](./surface-scaffold.md#core-dialogs-as-bottom-sheets)              |
 | Key/value facts — `ValueTable`, `ValueTableRow`                                                                               | Read-only labels and values form a semantic definition list, optionally with a leading icon.                                                                                                                                                                                                                                                                                                              | Do not use it for editable form fields or a row/column data grid; use native form or table semantics.                                                                                                                                                                                                                                      | Compose typed `ValueTableRow` entries; pass `icon` when a 24px leading icon adds useful context. Set `labelWidth` for a minimum label column, `presentation="stacked"` to put each value under its label, or `stackBelow` (`compact` 512px, `narrow` 576px) to stack only while the table is that narrow; never override `--kui-value-table-row-columns` for these.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            | Values, formatting, icon meaning, and empty/loading policy.                                                                                              | `@kerfjs/ui/value-table`                                                                  | [Component ownership](./component-contract.md#ownership-boundaries)                            |
 | Framed rows of arbitrary content — `FramedList`, `FramedListRow`                                                              | Settings rows, account or source cards, or a shortcut list group several rows of copy and controls in one rounded frame with dividers between them.                                                                                                                                                                                                                                                       | Do not use it for read-only label/value facts; use `ValueTable`. Do not use it for selectable navigation rows or a bounded result picker; use `List` with `ListItem` (a picker adds `frame`, `scrollable`, and `maxHeight`). Do not pad or border rows from application CSS.                                                               | Compose any row content (a `Row` of copy, a keycap, icon-only `Button`s) in each `FramedListRow`; mark the row being edited `highlighted`. Name the list with `label` when no heading does.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    | Row content, controls, which row is highlighted, and the list's name.                                                                                    | `@kerfjs/ui/framed-list`                                                                  | [Feedback accessibility](./accessibility.md#shared-rules)                                      |
@@ -273,15 +297,16 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Indeterminate activity — `LoadingSpinner`                                                                                     | A Kerf surface needs compact, labeled or decorative indeterminate progress.                                                                                                                                                                                                                                                                                                                               | Do not use it for known progress; use a native `<progress>` element, or `wa-progress-bar` / `wa-progress-ring` in an application using the Web Awesome integration. Do not mix spinner systems within one surface.                                                                                                                         | Pass a label when the spinner conveys status; use size for a named icon step or positive pixel size.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                           | Loading lifecycle and adjacent status copy.                                                                                                              | `@kerfjs/ui/loading-spinner`                                                              | [Accessibility](./accessibility.md#shared-rules)                                               |
 | Loading placeholder — `Skeleton` + a component's `placeholder` prop                                                           | A value or a whole component is still loading and should hold its space as a subtle, unanimated block, keeping the layout stable — an inspector or detail view rendering its real chrome with per-record values absent.                                                                                                                                                                                   | Do not use it for known progress (use `LoadingSpinner`), do not animate it, and do not hand-rebuild a component's empty state — set `placeholder` on the component instead. Prefer it over `wa-skeleton`.                                                                                                                                  | Set `placeholder` on a value-bearing component (`Select`, `ListHeader`, `ListItem`, `ValueTableRow`, `SegmentedControl`, `StateBanner`, `TabBarItem`, `ToolbarText`, `ListActionRow`) to render skeletons in its value slots with interactivity disabled; use the standalone `Skeleton` for a custom slot.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Loading lifecycle, which slots are unknown, and announcing the loading region.                                                                           | `@kerfjs/ui/skeleton`                                                                     | [Accessibility](./accessibility.md#shared-rules)                                               |
 | Command menu — `PopupMenu`                                                                                                    | A short list of commands sits behind one trigger, such as a toolbar sort or More menu, optionally grouped under headings and dividers with item icons.                                                                                                                                                                                                                                                    | Do not use it to choose a persistent value; use `Select`. Do not hand-write `wa-dropdown`/`wa-dropdown-item` markup for an action menu.                                                                                                                                                                                                    | Import `@kerfjs/ui/popup-menu/register` once. Place it in a `single` `ToolbarControlGroup` with `nestedDropdown` and a `menuInset`, or wrap it in `PopupSurface` outside a toolbar. Handle item `action`s by delegation.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Commands, enabled state, and reactions to opening or closing.                                                                                            | `@kerfjs/ui/popup-menu`                                                                   | [Toolbar composition](#toolbar-composition)                                                    |
-| Standalone action — `Button`                                                                                                  | A dialog footer, a form, or content needs an action button with visible text: `tone="brand"` for the main action, `tone="danger"` for a destructive one, and `emphasis="secondary"` or `"plain"` for the quieter actions beside it. A link that looks like a button takes `href`.                                                                                                                         | Do not use it inside a `ToolbarControlGroup`; give the group plain `<button>`s. For an icon-only action give it an `icon` and `ariaLabel` and no label, and for an on/off toggle set `pressed`; a menu trigger is a `PopupMenu`.                                                                                                           | Pass the label as children and delegate its `action`; a form button sets `type="submit"` or `"reset"` (the default `button` never submits) with `name`, `value`, and `form`. `loading` shows a spinner and `aria-busy`; the app decides what a press does meanwhile. `size="compact"` is 33px. In a `Toolbar` trailing zone or a `TabBar` action zone it keeps the control band.                                                                                                                                                                                                                                                                                                                                                                                                                                                                               | The label, delegated action, and form ownership.                                                                                                         | `@kerfjs/ui/button`                                                                       | [Feedback accessibility](./accessibility.md#shared-rules)                                      |
+| Standalone action — `Button`                                                                                                  | A dialog footer, a form, or content needs an action button with visible text: `tone="brand"` for the main action, `tone="danger"` for a destructive one, and `emphasis="secondary"` or `"plain"` for the quieter actions beside it. A link that looks like a button takes `href`.                                                                                                                         | Do not use it inside a `ToolbarControlGroup`; give the group plain `<button>`s. For an icon-only action give it an `icon` and `ariaLabel` and no label, and for an on/off toggle set `pressed`; a menu trigger is a `PopupMenu`.                                                                                                           | Pass the label as children and delegate its `action`; a form button sets `type="submit"` or `"reset"` (the default `button` never submits) with `name`, `value`, and `form`. `loading` shows a spinner and `aria-busy`; the app decides what a press does meanwhile. `size="compact"` is 33px. In a `Toolbar` trailing zone or a `TabBar` action zone it keeps the control band. Set `focusRingInset` when an ancestor clips overflow: the focus ring moves inside the box, with a surface-colored line inside it so it stays visible on a loud fill. `fill` spans a full-width primary action across its parent's inline width, label centered, as on `SplitButton`.                                                                                                                                                                                          | The label, delegated action, and form ownership.                                                                                                         | `@kerfjs/ui/button`                                                                       | [Feedback accessibility](./accessibility.md#shared-rules)                                      |
 | Icon-only action — `Button` with `icon` and `ariaLabel`                                                                       | One action is clear from its icon alone and stands by itself or beside a form field, such as Browse next to a path input: give `Button` an `icon` and an `ariaLabel` and no label.                                                                                                                                                                                                                        |
 | Standalone toggle — `Button` with `pressed`                                                                                   | An on/off control (show a panel or a conversation), icon-only or labeled, sits in content or a pane footer outside any Toolbar: `pressed` reports `aria-pressed` and draws the pressed look on top of the tone and emphasis; `shape="pill"` rounds it.                                                                                                                                                    |
-| Primary action with options — `SplitButton`                                                                                   | A prominent primary action has a closely related set of options chosen from an attached trigger, such as Drive with a provider menu.                                                                                                                                                                                                                                                                      | Do not use it for a plain action; use `Button`. Do not use it for a toolbar command menu; use `PopupMenu`. Do not assemble one from `wa-button-group`, whose hosts do not forward names or `aria-expanded`.                                                                                                                                | Pass the primary `label` and `action`, the options trigger's `optionsLabel`, `optionsAction`, and `optionsExpanded`; pick a loud `tone`, `fill` for full width, `busy` while work runs, and `disabled`/`optionsDisabled`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                      | Both actions, the options menu and its open state, the running state and tone switch, and copy.                                                          | `@kerfjs/ui/split-button`                                                                 | [Feedback accessibility](./accessibility.md#shared-rules)                                      |
+| Primary action with options — `SplitButton`                                                                                   | A prominent primary action has a closely related set of options chosen from an attached trigger, such as Drive with a provider menu; `shape="pill"` rounds both outer ends, as on `Button`.                                                                                                                                                                                                               | Do not use it for a plain action; use `Button`. Do not use it for a toolbar command menu; use `PopupMenu`. Do not assemble one from `wa-button-group`, whose hosts do not forward names or `aria-expanded`.                                                                                                                                | Pass the primary `label` and `action`, the options trigger's `optionsLabel`, `optionsAction`, and `optionsExpanded`; pick a loud `tone`, `fill` for full width, `busy` while work runs, and `disabled`/`optionsDisabled`. Set `focusRingInset` when an ancestor clips overflow, so each half's ring is drawn inside its box.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Both actions, the options menu and its open state, the running state and tone switch, and copy.                                                          | `@kerfjs/ui/split-button`                                                                 | [Feedback accessibility](./accessibility.md#shared-rules)                                      |
 | Choosing or dropping files — `FilePickerTrigger`, `FileDropZone`, `wireFilePickers`                                           | People attach or import files by browsing or by dropping them onto a target.                                                                                                                                                                                                                                                                                                                              | Do not style a native file input or its label from app CSS. Do not make the drop zone the only way in; it also opens the chooser.                                                                                                                                                                                                          | Use `FilePickerTrigger` for a compact Add control and `FileDropZone` for a dashed target; set `accept`, `multiple`, `name`, and `pickerId`. Call `wireFilePickers(root, { onFiles })` once: it reports browsed and dropped files (drops filtered by `accept`, the same check `fileMatchesAccept` exposes) and marks the zone while dragging.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | What happens to the files, the chosen-file list, copy, and accepted types.                                                                               | `@kerfjs/ui/file-picker`, `@kerfjs/ui/wire-file-pickers`                                  | [Feedback accessibility](./accessibility.md#shared-rules)                                      |
 | Value selection — `Select`                                                                                                    | A controlled form, toolbar, or compact navigation value comes from a moderate or long choice list, possibly grouped, icon-bearing, icon-only when closed, or truncating. Set `multiple` with an array `value` when the person may choose any number of them; add `selectedPresentation="icon-only"` and a fixed `triggerIcon` for a toolbar filter menu.                                                  | Do not use it for commands; use `PopupMenu`. Do not use it for a small visible choice set; use `SegmentedControl`. Prefer it over direct `wa-select`, `wa-option`, or value-like `wa-dropdown`/`wa-dropdown-item` composition.                                                                                                             | Import `@kerfjs/ui/select/register` once for registration and current-request animation ownership; listen for standard input/change events. Do not add consumer popup timing or positioning repairs. Use typed presentation props rather than consumer `::part()` overrides; let the parent own placement.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Controlled value, validation, choices, domain mapping, and outer placement.                                                                              | `@kerfjs/ui/select`                                                                       | [Web Awesome integration](../README.md#web-awesome-theme)                                      |
 | Free text — `TextField`, `wireTextFields`                                                                                     | A form or dialog collects a line of free text (a name, an address, a title) or a longer note: `label` names it (or `ariaLabel` when nearby content already does), `hint` explains it, and `error` reports a validation problem. `multiline` with `rows` (and `maxRows` to grow) takes a longer note; `maxLength` with `showCount` shows the remaining budget; `icon` and `clearable` suit a filter field. | Do not use it when only existing values are allowed; use `Select`. Do not use it to pick among suggestions or create tags; use `Combobox`. Do not use it for search text with removable filter tokens (`SearchField`) or a message with a send action (`MessageComposer`). Prefer it over `wa-input` and `wa-textarea`.                    | Call `wireTextFields(root)` once when a field is `clearable` or `showCount`. Read the value from the native `input` or `change` event.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Value, validation and error copy, hint copy, and what a cleared field means.                                                                             | `@kerfjs/ui/text-field`                                                                   | [TextField contract](./accessibility.md#textfield)                                             |
-| On/off option — `Checkbox`, `wireCheckboxes`, `Switch`                                                                        | A form or settings list has an independent yes/no option: `Checkbox` when a form submits it (with `indeterminate` for a parent of partly checked children), `Switch` when the setting applies the moment it changes.                                                                                                                                                                                      | Do not use a `Switch` for an option a form submits later, or a `Checkbox` for an immediate setting. Do not use either for one choice among several (`RadioGroup`). Prefer them over `wa-checkbox` and `wa-switch`.                                                                                                                         | Call `wireCheckboxes(root)` once when a `Checkbox` is `indeterminate`. Read `checked` from the native `change` event.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Checked and mixed state, validation copy, and what a change does.                                                                                        | `@kerfjs/ui/checkbox`, `@kerfjs/ui/switch`                                                | [Checkbox, RadioGroup, and Switch contract](./accessibility.md#checkbox-radiogroup-and-switch) |
+| On/off option — `Checkbox`, `wireCheckboxes`, `Switch`                                                                        | A form or settings list has an independent yes/no option: `Checkbox` when a form submits it (with `indeterminate` for a parent of partly checked children), `Switch` when the setting applies the moment it changes.                                                                                                                                                                                      | Do not use a `Switch` for an option a form submits later, or a `Checkbox` for an immediate setting. Do not use either for one choice among several (`RadioGroup`); a labeled set of related checkboxes is a `CheckboxGroup`. Prefer them over `wa-checkbox` and `wa-switch`.                                                               | Call `wireCheckboxes(root)` once when a `Checkbox` is `indeterminate`. Read `checked` from the native `change` event. Stack several standalone Checkboxes in a `List gap="xs"`: 8px apart, the same 28px pitch as `RadioGroup` choices; a labeled set of options is a `CheckboxGroup`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                         | Checked and mixed state, validation copy, and what a change does.                                                                                        | `@kerfjs/ui/checkbox`, `@kerfjs/ui/switch`                                                | [Checkbox, RadioGroup, and Switch contract](./accessibility.md#checkbox-radiogroup-and-switch) |
 | One of a few labeled options — `RadioGroup`                                                                                   | A form asks for one of two to about six options that people should compare at a glance, each with a readable label and an optional hint.                                                                                                                                                                                                                                                                  | Do not use it for a long list (`Select`), a view switch (`SegmentedControl`), or pill or color choices (`ChoiceChips`). Prefer it over `wa-radio-group`.                                                                                                                                                                                   | Read the value from the native `change` event and render `value`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                              | Value, choices and their copy, and validation.                                                                                                           | `@kerfjs/ui/radio-group`                                                                  | [Checkbox, RadioGroup, and Switch contract](./accessibility.md#checkbox-radiogroup-and-switch) |
+| Several of a few labeled options — `CheckboxGroup`                                                                            | A form asks for any number of two to about eight related options under one label, each with a readable label and an optional hint, and every checked value submits under one name.                                                                                                                                                                                                                        | Do not use it for one choice among several (`RadioGroup`), one independent option or a mixed parent (`Checkbox`), an immediate setting (`Switch`), or wrapping pill choices (`ChoiceChips` `multiple`). Prefer it over `wa-checkbox-group`.                                                                                                | Pass the checked values as `value` and read each change from the native `change` event. Its choices stack like `RadioGroup` choices: 8px apart, the same 28px pitch. Validate a minimum or maximum in the app and pass `error`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                | Checked values, choices and their copy, and validation.                                                                                                  | `@kerfjs/ui/checkbox-group`                                                               | [Checkbox, RadioGroup, and Switch contract](./accessibility.md#checkbox-radiogroup-and-switch) |
 | Pick or create a value by typing — `Combobox`, `wireComboboxes`                                                               | People type to find an existing value among many or create a new one (tags, labels, recipients).                                                                                                                                                                                                                                                                                                          | Do not use it when only existing values are allowed; use `Select`. Do not use it for search text with removable filter tokens; use `SearchField`. Do not style a native input with a datalist.                                                                                                                                             | Pass `id`, `label`, and `suggestions` (strings or `{ value, label }`), plus `placeholder`, `hint`, and `createLabel` (or `false` for suggestions only). Call `wireComboboxes(root, { onCommit })` once; it filters, moves the active option with the arrows, and reports `{ id, value, created, input }` on Enter, a comma, or a click.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Suggestions, committed values, normalization, and clearing the field.                                                                                    | `@kerfjs/ui/combobox`, `@kerfjs/ui/wire-comboboxes`                                       | [Feedback accessibility](./accessibility.md#shared-rules)                                      |
 | Small exclusive choice — `SegmentedControl`                                                                                   | A few visible choices switch a compact view or setting, with toolbar, rounded, or pill presentation.                                                                                                                                                                                                                                                                                                      | Do not use it for tabpanel semantics; use `TabBar`. Do not use it for many choices; use `ChoiceChips` when they stay visible and wrap, or `Select` for a long list. Prefer it over `wa-button-group` when the controls select one value.                                                                                                   | Delegate its action, read `data-segment-value`, update `value`, and rerender.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Controlled value, labels, action, and persistence.                                                                                                       | `@kerfjs/ui/segmented-control`                                                            | [SegmentedControl contract](./accessibility.md#segmentedcontrol)                               |
 | Wrapping visible choice — `ChoiceChips`                                                                                       | Several visible options, too many for one segmented track, must wrap onto more rows — a labeled color palette with swatches, a tag color, a category. Set `multiple` with an array `value` when any number may be on, such as label filters or annotation intents.                                                                                                                                        | Do not use it for a few compact choices on one track; use `SegmentedControl`. Do not use it for a long list or tight space; use `Select`. Do not use it for removable tags (`Chip`). Prefer it over `wa-radio-group` with `appearance="button"` radios, which wrap as a ragged joined group.                                               | Pass a form `name`, a `label` or `labelledBy`, and the controlled `value`; delegate the `action` on `change`, read the radio `value` (or, with `multiple`, the checked boxes under `name`), and rerender. Place it in a dark appearance scope for inverse chrome rather than restyling it. Lead choices with a `swatch` (`CssColor` or `'transparent'`) or an `icon`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                          | Controlled value, choices, swatch colors, change handling, and form submission.                                                                          | `@kerfjs/ui/choice-chips`                                                                 | [ChoiceChips contract](./accessibility.md#choicechips)                                         |
@@ -642,15 +667,15 @@ the control's dimensions, shows `LoadingSpinner` in its place, sets
 group hides only the glyph; a `content="text"` or `"mixed"` group hides the
 whole control, label included, so the spinner never draws over text.
 
-| Want                           | Put in the zone                                                                        | Notes                                                                                                          |
-| ------------------------------ | -------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------- |
-| Identity or title text         | `<ToolbarText text="…" size="large" />` (or `xlarge` for a page/panel title that fits) | Wrap in a `single` borderless group only when it must align with adjacent control pills                        |
-| One or more icon/text buttons  | `<ToolbarControlGroup>{buttons}</ToolbarControlGroup>`                                 | Use `buttonAppearance="push"` for toggle buttons with `aria-pressed`; `single` for a lone control              |
-| One primary application action | `trailing={<Button tone="brand">New Ticket…</Button>}`                                 | The standalone button keeps its own chrome; use `tone="danger"` when the action is destructive                 |
-| An exclusive view switch       | `<ToolbarControlGroup><SegmentedControl … /></ToolbarControlGroup>`                    | Not `TabBar`, which switches tabpanels                                                                         |
-| A value list                   | `<ToolbarControlGroup><Select … /></ToolbarControlGroup>`                              | Register `@kerfjs/ui/select/register` once; use `focusRingOwner="group"` so focus follows the group's geometry |
-| A command menu                 | `<ToolbarControlGroup single nestedDropdown><PopupMenu … /></ToolbarControlGroup>`     | Register `@kerfjs/ui/popup-menu/register` once; set `menuInset` on the group                                   |
-| A collapsible search box       | `<ToolbarControlGroup single><SearchField collapsible … /></ToolbarControlGroup>`      | The group animates the iconic ↔ expanded states; `wireSearchFields` manages expand/collapse/focus by default   |
+| Want                           | Put in the zone                                                                        | Notes                                                                                                                                           |
+| ------------------------------ | -------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------------------------------------------------------- |
+| Identity or title text         | `<ToolbarText text="…" size="large" />` (or `xlarge` for a page/panel title that fits) | Wrap in a `single` borderless group only when it must align with adjacent control pills                                                         |
+| One or more icon/text buttons  | `<ToolbarControlGroup>{buttons}</ToolbarControlGroup>`                                 | Use `buttonAppearance="push"` for toggle buttons with `aria-pressed`; `single` for a lone control                                               |
+| One primary application action | `trailing={<Button tone="brand">New Ticket…</Button>}`                                 | The standalone button keeps its own chrome; use `tone="success"` for a positive pricing check or `tone="danger"` when the action is destructive |
+| An exclusive view switch       | `<ToolbarControlGroup><SegmentedControl … /></ToolbarControlGroup>`                    | Not `TabBar`, which switches tabpanels                                                                                                          |
+| A value list                   | `<ToolbarControlGroup><Select … /></ToolbarControlGroup>`                              | Register `@kerfjs/ui/select/register` once; use `focusRingOwner="group"` so focus follows the group's geometry                                  |
+| A command menu                 | `<ToolbarControlGroup single nestedDropdown><PopupMenu … /></ToolbarControlGroup>`     | Register `@kerfjs/ui/popup-menu/register` once; set `menuInset` on the group                                                                    |
+| A collapsible search box       | `<ToolbarControlGroup single><SearchField collapsible … /></ToolbarControlGroup>`      | The group animates the iconic ↔ expanded states; `wireSearchFields` manages expand/collapse/focus by default                                    |
 
 ### Room for an expanded search
 
@@ -664,9 +689,11 @@ other controls; plan for it instead:
   beside the siblings.
 - If a useful search cannot fit beside the other controls, set those controls
   aside while it is open. Mark them `visibility="yield-to-expanded-sibling"`
-  (they leave a 480px-or-narrower toolbar while a sibling is expanded), or
-  gather them behind a "…" `PopupMenu` overflow group. The application decides
-  which controls yield.
+  (they leave a 480px-or-narrower toolbar while a sibling is expanded), or, in
+  a `responsive="trailing-priority"` Toolbar,
+  `visibility="yield-to-priority-row"` (they leave exactly while the expanded
+  control has its own row), or gather them behind a "…" `PopupMenu` overflow
+  group. The application decides which controls yield.
 
 ### Application surfaces below search
 
@@ -765,15 +792,22 @@ belongs to — never inside an app wrapper with `position: fixed`, a 1px size,
 or a `z-index` (the open menu is in the browser top layer). In the app's
 `contextmenu` handler, prevent the browser menu, store
 `{ x: event.clientX, y: event.clientY }` in the signal the menu renders as
-`anchor`, and call `openPopupMenu` with the menu. Because the point is part of the
+`anchor`, and call `openPopupMenu` with the menu. Its `placement` applies at
+the point: the default `bottom-start` opens below it, and `top-start` or
+`top-end` opens above it (for a menu anchored to a footer or composer), still
+flipping when that side has no room. Because the point is part of the
 menu's own template, it survives re-renders and a rebuilt menu, so the app
 never re-applies it. `openPopupMenuAt` still opens a menu rendered without `anchor` at a given
-point. Call `closePopupMenu` for programmatic dismissal. A pointer-anchored menu
+point, at its `placement` unless the call names one for that opening
+(`openPopupMenuAt(menu, x, y, { placement: 'top-start' })`). Call `closePopupMenu` for programmatic dismissal. A pointer-anchored menu
 keeps the same collision placement, focus management, submenu keyboard
 navigation, and outside/Escape dismissal as a trigger-anchored one.
 
 The menu opens in the browser top layer, flips and shifts at viewport edges,
-and limits its height to the available space, scrolling past it. The app
+and limits its height to the available space, scrolling past it. It shifts
+only along its trigger's (or point's) edge, never across it: when neither
+side fits, it opens on the side with more room and scrolls, so a tall menu
+never covers its trigger and a second press on the trigger closes it. The app
 supplies pointer coordinates and command policy; it does not need to calculate
 menu offsets. For other anchored content, use `AnchoredSurface` for help or
 popup content, a native `title` for a plain-text hint, or `kerfjs/overlay`'s
@@ -813,7 +847,10 @@ right-click, delegate `contextmenu` on the row's primary button, prevent the
 browser menu, and call `openPopupMenuAt` with the row's
 `[data-component="popup-menu"]` child and the pointer's `clientX` /
 `clientY`: a button-triggered menu opens `bottom-start` at the pointer for that
-opening and returns to its trigger once it closes.
+opening and returns to its trigger once it closes. Pass a placement for that
+opening as a fourth argument, `openPopupMenuAt(menu, x, y, { placement:
+'top-start' })`, to open it above the point instead (for a row near a footer
+or composer); the viewport flip, shift, and height cap still apply.
 
 ```tsx
 <ListActionRow
@@ -1111,7 +1148,7 @@ component below, and file a component gap rather than dropping to the raw tag.
 | `wa-button`, `wa-dropdown`, `wa-dropdown-item`                  | Use `Button` (icon-only with `icon` and `ariaLabel`, or a toggle with `pressed`) for actions and `PopupMenu` for a command menu. Use `ListItem` for a navigation row and `Select` for a value.                                                                      |
 | `wa-button-group`                                               | Use `ToolbarControlGroup` or `SplitButton` for grouped actions and `SegmentedControl` for one-of-many selection.                                                                                                                                                    |
 | `wa-input`, `wa-textarea`, `wa-tag`                             | Use `TextField` for free text (`multiline` for a textarea) and `Chip` for removable or disabled tags; use `SearchField` only when text and ordered filter tokens form one editor.                                                                                   |
-| `wa-checkbox`, `wa-checkbox-group`, `wa-switch`                 | Use `Checkbox` for a submitted option (a group of them in a `List`, or `ChoiceChips` `multiple: 'toggle'` for wrapping pills) and `Switch` for a setting that applies immediately.                                                                                  |
+| `wa-checkbox`, `wa-checkbox-group`, `wa-switch`                 | Use `Checkbox` for a submitted option (`CheckboxGroup` for a labeled set of them, or `ChoiceChips` `multiple: 'toggle'` for wrapping pills) and `Switch` for a setting that applies immediately.                                                                    |
 | `wa-radio-group`, `wa-radio`                                    | Use `RadioGroup` for a few labeled options, `ChoiceChips` for wrapping pills, and `SegmentedControl` for a view switch.                                                                                                                                             |
 | `wa-select`, `wa-option`                                        | Use `Select`, which owns Kerf spacing, controlled rendering, and form participation.                                                                                                                                                                                |
 | `wa-dialog`, `wa-drawer`                                        | Use `DialogSurface` with `openDialog` / `closeDialog` (`presentation="side-sheet"` or `"bottom-sheet"` for a drawer), or a `kerfjs/overlay` dialog. Use `CollapsiblePanel` for a rail that overlays content on compact devices.                                     |

package/docs/design/templates/button/full-width-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="cp0"><rect x="174.9" y="34" width="16.1" height="16"/></clipPath><clipPath id="cp2"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath><clipPath id="ct3"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="439" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgic1"><rect x="174.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(174.86 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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(17, 17, 19)" 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(#cp2)"><g clip-path="url(#ct3)"><text x="198.86" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Create Project</text></g></g></svg>

package/docs/design/templates/button/full-width.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="cp0"><rect x="174.9" y="34" width="16.1" height="16"/></clipPath><clipPath id="cp2"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath><clipPath id="ct3"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="439" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp0)"><g color="rgb(255, 255, 255)"><clipPath id="svgic1"><rect x="174.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgic1)"><g transform="translate(174.86 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(255, 255, 255)" 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(255, 255, 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(#cp2)"><g clip-path="url(#ct3)"><text x="198.86" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Create Project</text></g></g></svg>

package/docs/design/templates/button/tones-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="ct2"><rect x="237.3" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Cancel</text><rect x="228.3" y="20" width="122.8" height="44" rx="12" fill="rgb(255,56,60)"/><rect x="228.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete Project</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="ct2"><rect x="237.3" y="33" width="88.9" height="18"/></clipPath><clipPath id="ct3"><rect x="352.2" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Cancel</text><rect x="228.3" y="20" width="106.9" height="44" rx="12" fill="rgb(52,199,89)"/><rect x="228.5" y="20.5" width="106" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Price Check</text><rect x="343.2" y="20" width="122.8" height="44" rx="12" fill="rgb(255,56,60)"/><rect x="343.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="352.16" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete Project</text></svg>

package/docs/design/templates/button/tones.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="ct2"><rect x="237.3" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(72,72,74)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Cancel</text><rect x="228.3" y="20" width="122.8" height="44" rx="12" fill="rgb(235,0,5)"/><rect x="228.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Delete Project</text></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 84" width="520" height="84"><defs><clipPath id="ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="ct2"><rect x="237.3" y="33" width="88.9" height="18"/></clipPath><clipPath id="ct3"><rect x="352.2" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(0,117,219)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(72,72,74)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Cancel</text><rect x="228.3" y="20" width="106.9" height="44" rx="12" fill="rgb(52,199,89)"/><rect x="228.5" y="20.5" width="106" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Price Check</text><rect x="343.2" y="20" width="122.8" height="44" rx="12" fill="rgb(235,0,5)"/><rect x="343.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="352.16" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,255,255)">Delete Project</text></svg>

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

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 748" width="552" height="748"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></clipPath><clipPath id="cp4"><rect x="16" y="526" width="520" height="84"/></clipPath><clipPath id="cp5"><rect x="16" y="648" width="520" height="84"/></clipPath><clipPath id="ct6"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc7"><rect x="16" y="38" width="520" height="84" rx="0"/></clipPath><clipPath id="ct9"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="504" width="520" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="526" width="520" height="84" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="626" width="520" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="648" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="748" 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)">Primary Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc7)"><clipPath id="svgimg8vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg8vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg8ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="svgimg8ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="svgimg8ct2"><rect x="237.3" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Cancel</text><rect x="228.3" y="20" width="122.8" height="44" rx="12" fill="rgb(255,56,60)"/><rect x="228.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete Project</text></g></g></g></g><text x="16" y="150" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Secondary and Plain Emphasis</text><g clip-path="url(#cp1)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg11ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg11ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="svgimg11ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,105,108)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></g></g></g></g><text x="16" y="272" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">With an Icon, and Icon Only</text><g clip-path="url(#cp2)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg14cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg14ct2"><rect x="53" y="33" width="82.6" height="18"/></clipPath><clipPath id="svgimg14cp3"><rect x="161.6" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg14ct5"><rect x="185.6" y="33" width="45.6" height="18"/></clipPath><clipPath id="svgimg14cp6"><rect x="262" y="34" width="16.3" height="16"/></clipPath></defs><rect x="20" y="20" width="124.6" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="124" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg14cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg14svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">New Ticket</text><rect x="152.6" y="20" width="87.6" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="153.5" y="20.5" width="86" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg14cp3)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg14svgic4"><rect x="161.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic4)"><g transform="translate(161.64 34)scale(.66667)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="185.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Filters</text><rect x="248.3" y="20" width="44" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="248.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg14cp6)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg14svgic7"><rect x="262.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic7)"><g transform="translate(262.281 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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></g></g></g><text x="16" y="394" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact and Disabled</text><g clip-path="url(#cp3)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg17ct0"><rect x="29" y="33.5" width="60" height="17"/></clipPath><clipPath id="svgimg17ct1"><rect x="115" y="33" width="85.5" height="18"/></clipPath></defs><rect x="20" y="25.5" width="78" height="33" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="26.5" width="77" height="32" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="47.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="500" fill="rgb(28,28,30)">Compact</text><g opacity="0.5" style="isolation:isolate"><rect x="106" y="20" width="103.5" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="106.5" y="20.5" width="102" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.98" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Unavailable</text></g></g></g></g></g><text x="16" y="516" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Toggle, Resting and Pressed</text><g clip-path="url(#cp4)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="526" width="520" height="84"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 526)"><defs><clipPath id="svgimg20ct0"><rect x="29" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg20ishc1"><rect x="106" y="21" width="99" height="42" rx="11"/></clipPath><clipPath id="svgimg20cp2"><rect x="114" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg20ct4"><rect x="138" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg20ishc5"><rect x="215.1" y="21" width="67.1" height="42" rx="11"/></clipPath><clipPath id="svgimg20ct6"><rect x="223.1" y="33" width="51.1" height="18"/></clipPath><clipPath id="svgimg20ishc7"><rect x="292.2" y="21" width="42" height="42" rx="11"/></clipPath><clipPath id="svgimg20cp8"><rect x="305" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="77" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Favorite</text><rect x="105" y="20" width="101" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg20ishc1)"><path d="M98 13h115.1v58H98zm19 10h77.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9H117a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="105.5" y="20.5" width="100" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg20cp2)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg20svgic3"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg20svgic3)"><g transform="translate(114.047 34)scale(.66667)"><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(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="138.05" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Favorite</text><rect x="214.1" y="20" width="69.1" height="44" rx="12" fill="rgb(134,219,255)"/><g clip-path="url(#svgimg20ishc5)"><path d="M207.1 13h83.1v58h-83.1zm19 10h45.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-45.1a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="214.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="223.09" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Pinned</text><rect x="291.2" y="20" width="44" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg20ishc7)"><path d="M284.2 13h58v58h-58zm19 10h20a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-20a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="291.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg20cp8)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg20svgic9"><rect x="305.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg20svgic9)"><g transform="translate(305.219 34)scale(.66667)"><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(17, 17, 19)" 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></g></g></g><text x="16" y="638" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill Shape</text><g clip-path="url(#cp5)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="648" width="520" height="84"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 648)"><defs><clipPath id="svgimg23ct0"><rect x="29" y="33" width="47.6" height="18"/></clipPath><clipPath id="svgimg23ct1"><rect x="102.6" y="33" width="43" height="18"/></clipPath><clipPath id="svgimg23cp2"><rect x="176.6" y="34" width="16.4" height="16"/></clipPath></defs><rect x="20" y="20" width="65.6" height="44" rx="22" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="65" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Follow</text><rect x="93.6" y="20" width="61" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="94.5" y="20.5" width="60" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="102.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Share</text><rect x="162.6" y="20" width="44" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="163.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg23cp2)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg23svgic3"><rect x="176.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg23svgic3)"><g transform="translate(176.625 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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(28, 28, 30)" 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></g></g></g></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 870" width="552" height="870"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="84"/></clipPath><clipPath id="cp1"><rect x="16" y="160" width="520" height="84"/></clipPath><clipPath id="cp2"><rect x="16" y="282" width="520" height="84"/></clipPath><clipPath id="cp3"><rect x="16" y="404" width="520" height="84"/></clipPath><clipPath id="cp4"><rect x="16" y="526" width="520" height="84"/></clipPath><clipPath id="cp5"><rect x="16" y="648" width="520" height="84"/></clipPath><clipPath id="cp6"><rect x="16" y="770" width="520" height="84"/></clipPath><clipPath id="ct7"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc8"><rect x="16" y="38" width="520" height="84" rx="0"/></clipPath><clipPath id="ct10"><rect x="16" y="138" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="160" width="520" height="84" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="260" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="282" width="520" height="84" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="382" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="404" width="520" height="84" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="504" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="526" width="520" height="84" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="626" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="648" width="520" height="84" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="748" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="770" width="520" height="84" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="870" 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)">Primary Tones</text><g clip-path="url(#cp0)"><g clip-path="url(#irc8)"><clipPath id="svgimg9vclip"><rect x="16" y="38" width="520" height="84"/></clipPath><g clip-path="url(#svgimg9vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg9ct0"><rect x="29" y="33" width="105.3" height="18"/></clipPath><clipPath id="svgimg9ct1"><rect x="160.3" y="33" width="51" height="18"/></clipPath><clipPath id="svgimg9ct2"><rect x="237.3" y="33" width="88.9" height="18"/></clipPath><clipPath id="svgimg9ct3"><rect x="352.2" y="33" width="104.8" height="18"/></clipPath></defs><rect x="20" y="20" width="123.3" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Save Changes</text><rect x="151.3" y="20" width="69" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="151.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="160.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Cancel</text><rect x="228.3" y="20" width="106.9" height="44" rx="12" fill="rgb(52,199,89)"/><rect x="228.5" y="20.5" width="106" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="237.27" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(29,29,31)">Price Check</text><rect x="343.2" y="20" width="122.8" height="44" rx="12" fill="rgb(255,56,60)"/><rect x="343.5" y="20.5" width="122" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="352.16" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Delete Project</text></g></g></g></g><text x="16" y="150" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Secondary and Plain Emphasis</text><g clip-path="url(#cp1)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="160" width="520" height="84"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 160)"><defs><clipPath id="svgimg12ct0"><rect x="29" y="33" width="48.7" height="18"/></clipPath><clipPath id="svgimg12ct1"><rect x="103.7" y="33" width="59.3" height="18"/></clipPath><clipPath id="svgimg12ct2"><rect x="188.9" y="33" width="83.7" height="18"/></clipPath></defs><rect x="20.5" y="20.5" width="66" height="43" rx="11.5" fill="none" stroke="rgba(250,250,255,0.32)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Export</text><rect x="95.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgb(253,98,101)" stroke-width="1"/><text x="103.69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(255,105,108)">Remove</text><rect x="180.5" y="20.5" width="101" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="188.94" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(194,194,198)">Learn More</text></g></g></g></g><text x="16" y="272" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">With an Icon, and Icon Only</text><g clip-path="url(#cp2)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="282" width="520" height="84"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 282)"><defs><clipPath id="svgimg15cp0"><rect x="29" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg15ct2"><rect x="53" y="33" width="82.6" height="18"/></clipPath><clipPath id="svgimg15cp3"><rect x="161.6" y="34" width="16.4" height="16"/></clipPath><clipPath id="svgimg15ct5"><rect x="185.6" y="33" width="45.6" height="18"/></clipPath><clipPath id="svgimg15cp6"><rect x="262" y="34" width="16.3" height="16"/></clipPath></defs><rect x="20" y="20" width="124.6" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="124" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg15svgic1"><rect x="29" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(29 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="53" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">New Ticket</text><rect x="152.6" y="20" width="87.6" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="153.5" y="20.5" width="86" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp3)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic4"><rect x="161.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic4)"><g transform="translate(161.64 34)scale(.66667)"><path d="M10 20a1 1 0 0 0 .6.9l2 1A1 1 0 0 0 14 21v-7a2 2 0 0 1 .5-1.3l7.2-8A1 1 0 0 0 21 3H3a1 1 0 0 0-.7 1.7l7.2 8A2 2 0 0 1 10 14Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="185.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Filters</text><rect x="248.3" y="20" width="44" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="248.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg15cp6)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg15svgic7"><rect x="262.3" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic7)"><g transform="translate(262.281 34)scale(.66667)"><path d="M9.7 4.1a2.3 2.3 0 0 1 4.6 0 2.3 2.3 0 0 0 3.3 2 2.3 2.3 0 0 1 2.4 4 2.3 2.3 0 0 0 0 3.8 2.3 2.3 0 0 1-2.4 4 2.3 2.3 0 0 0-3.3 2 2.3 2.3 0 0 1-4.6 0 2.3 2.3 0 0 0-3.3-2A2.3 2.3 0 0 1 4 14a2.3 2.3 0 0 0 0-3.8 2.3 2.3 0 0 1 2.3-4 2.3 2.3 0 0 0 3.4-2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><circle cx="12" cy="12" r="3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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></g></g></g><text x="16" y="394" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Compact and Disabled</text><g clip-path="url(#cp3)"><g clip-path="url(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="404" width="520" height="84"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 404)"><defs><clipPath id="svgimg18ct0"><rect x="29" y="33.5" width="60" height="17"/></clipPath><clipPath id="svgimg18ct1"><rect x="115" y="33" width="85.5" height="18"/></clipPath></defs><rect x="20" y="25.5" width="78" height="33" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="26.5" width="77" height="32" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="47.5" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="14" font-weight="500" fill="rgb(28,28,30)">Compact</text><g opacity="0.5" style="isolation:isolate"><rect x="106" y="20" width="103.5" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="106.5" y="20.5" width="102" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="114.98" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Unavailable</text></g></g></g></g></g><text x="16" y="516" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Toggle, Resting and Pressed</text><g clip-path="url(#cp4)"><g clip-path="url(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="526" width="520" height="84"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 526)"><defs><clipPath id="svgimg21ct0"><rect x="29" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc1"><rect x="106" y="21" width="99" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp2"><rect x="114" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg21ct4"><rect x="138" y="33" width="59" height="18"/></clipPath><clipPath id="svgimg21ishc5"><rect x="215.1" y="21" width="67.1" height="42" rx="11"/></clipPath><clipPath id="svgimg21ct6"><rect x="223.1" y="33" width="51.1" height="18"/></clipPath><clipPath id="svgimg21ishc7"><rect x="292.2" y="21" width="42" height="42" rx="11"/></clipPath><clipPath id="svgimg21cp8"><rect x="305" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20" y="20" width="77" height="44" rx="12" fill="rgb(229,229,234)"/><rect x="20.5" y="20.5" width="76" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Favorite</text><rect x="105" y="20" width="101" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc1)"><path d="M98 13h115.1v58H98zm19 10h77.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9H117a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="105.5" y="20.5" width="100" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp2)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic3"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic3)"><g transform="translate(114.047 34)scale(.66667)"><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(17, 17, 19)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><text x="138.05" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Favorite</text><rect x="214.1" y="20" width="69.1" height="44" rx="12" fill="rgb(134,219,255)"/><g clip-path="url(#svgimg21ishc5)"><path d="M207.1 13h83.1v58h-83.1zm19 10h45.1a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-45.1a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="214.5" y="20.5" width="68" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="223.09" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Pinned</text><rect x="291.2" y="20" width="44" height="44" rx="12" fill="rgb(100,210,255)"/><g clip-path="url(#svgimg21ishc7)"><path d="M284.2 13h58v58h-58zm19 10h20a9 9 0 0 1 9 9v20a9 9 0 0 1-9 9h-20a9 9 0 0 1-9-9V32a9 9 0 0 1 9-9" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><rect x="291.5" y="20.5" width="43" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg21cp8)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg21svgic9"><rect x="305.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic9)"><g transform="translate(305.219 34)scale(.66667)"><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(17, 17, 19)" 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></g></g></g><text x="16" y="638" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Pill Shape</text><g clip-path="url(#cp5)"><g clip-path="url(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="648" width="520" height="84"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 648)"><defs><clipPath id="svgimg24ct0"><rect x="29" y="33" width="47.6" height="18"/></clipPath><clipPath id="svgimg24ct1"><rect x="102.6" y="33" width="43" height="18"/></clipPath><clipPath id="svgimg24cp2"><rect x="176.6" y="34" width="16.4" height="16"/></clipPath></defs><rect x="20" y="20" width="65.6" height="44" rx="22" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="65" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="29" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Follow</text><rect x="93.6" y="20" width="61" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="94.5" y="20.5" width="60" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><text x="102.64" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(28,28,30)">Share</text><rect x="162.6" y="20" width="44" height="44" rx="22" fill="rgb(229,229,234)"/><rect x="163.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg24cp2)"><g color="rgb(28, 28, 30)"><clipPath id="svgimg24svgic3"><rect x="176.6" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic3)"><g transform="translate(176.625 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(28, 28, 30)" 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(28, 28, 30)" 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></g></g></g><text x="16" y="760" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Full-Width Primary Action</text><g clip-path="url(#cp6)"><g clip-path="url(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="770" width="520" height="84"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 770)"><defs><clipPath id="svgimg27cp0"><rect x="174.9" y="34" width="16.1" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath><clipPath id="svgimg27ct3"><rect x="198.9" y="33" width="106.3" height="18"/></clipPath></defs><rect x="20" y="20" width="440" height="44" rx="12" fill="rgb(100,210,255)"/><rect x="20.5" y="20.5" width="439" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp0)"><g color="rgb(17, 17, 19)"><clipPath id="svgimg27svgic1"><rect x="174.9" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><g transform="translate(174.86 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(17, 17, 19)" 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(17, 17, 19)" 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(#svgimg27cp2)"><g clip-path="url(#svgimg27ct3)"><text x="198.86" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="500" fill="rgb(17,17,19)">Create Project</text></g></g></g></g></g></g></svg>