@kerfjs/ui 5.0.0-beta.100 → 5.0.0-beta.101

package/docs/component-selection.md

@@ -180,6 +180,7 @@ application boundary:
 | Navigation stack                    | [Catalog](../ux-demo/) · `?component=recipe-navigation-stack`      |
 | Loading inspector                   | [Catalog](../ux-demo/) · `?component=recipe-loading-inspector`     |
 | Collapsible sidebar                 | [Catalog](../ux-demo/) · `?component=recipe-collapsible-sidebar`   |
+| Media detail page                   | [Catalog](../ux-demo/) · `?component=recipe-media-detail`          |
 
 Recipes use public production exports and show ownership boundaries; they are
 copyable reference compositions, not new monolithic components.
@@ -249,12 +250,14 @@ beside a `ContentItem` value, and connect its id to the preview group's
 | Desktop multi-panel workspace — `Workbench`                                                                             | A desktop-class tool needs a central work area plus independently collapsible navigator, inspector, or console regions.                                                                                                                                                                                                                                  | Do not shrink the full shell onto compact devices or use it for one standalone panel.                                                                                                                                                                                                                                                      | Render only the required rails/drawer, keep collapse state controlled, and replace peripheral regions with stacks or overlays below desktop sizes. Opt a panel into drag/keyboard resizing with `resizable` and call `wireWorkbench` with its size signal.                                                                                                                                                                                                                                                                                                                                                                                                                                                             | Panel presence/content, collapsed states, sizes, persistence, responsive replacement, and controls.                                                      | `@kerfjs/ui/workbench`                                                                    | [Workbench](./workbench.md)                                                         |
 | Standalone rail or drawer — `CollapsiblePanel`                                                                          | One left/right rail or bottom drawer needs controlled collapse without adopting the complete `Workbench` shell.                                                                                                                                                                                                                                          | Do not use it for several coordinated workspace panels or retain an empty icon-only rail while collapsed.                                                                                                                                                                                                                                  | Pair it with `CollapsiblePanelToggle`; call `wireSidebar` for focus transfer, Escape/backdrop dismissal, compact overlay trapping, and persistence integration.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        | Panel content/size, collapsed state, toggle placement, persistence, and compact policy.                                                                  | `@kerfjs/ui/collapsible-panel`                                                            | [App-layout decision matrix](./app-layouts.md#decision-matrix)                      |
 | Lowered content surface — `SunkenPanel`                                                                                 | A main work area or nested content group needs one visually lowered surface with a compact inset and vertical stack.                                                                                                                                                                                                                                     | Do not use it merely to add padding, as a replacement for `Pane` anatomy, or around children that already own the same outer surface.                                                                                                                                                                                                      | Compose the application-owned content as children, choose the default `rounded` shape or `square` for a flush edge-to-edge area, and pass `ariaLabel` only when the surface is a distinct named region. Every sunken surface carries a fine grain texture, generated once per page by the first one that renders; call `ensureSunkenTexture` only when the page paints Web Awesome `appearance="sunken"` without any Kerf sunken component, and set `--kui-sunken-texture: none` at `:root` for a flat surface.                                                                                                                                                                                                        | Region semantics, accessible name, shape, scroll ownership, child ordering, and content.                                                                 | `@kerfjs/ui/sunken-panel`                                                                 | [SunkenPanel](./sunken-panel.md)                                                    |
+| Scrolling view's hero image — `BackdropImage`                                                                           | A scrolling `Pane` or `NavStack` view opens with a mood or identity image (an artist, album, or place page) that should lag the scroll, dissolve into a color, and read as one surface with the content below.                                                                                                                                           | Do not use it for inline content images, thumbnails, or avatars. Do not hand-roll scroll listeners, `background-attachment: fixed`, or mask gradients. Do not use it outside a vertical scroller; parallax needs one.                                                                                                                      | Place it first in the scrolling content. Pass `src`, `alt` (`""` for decoration), optional `srcset`/`sizes`, `fit`/`position` or a tiled `repeat`, a typed `height`, `parallax` (`none`, `subtle`, or a 0 to 1 factor), `blur` (`radius`, `blurredSrc`, `dim`) for a progressive blur, a typed `fadeTo` color that also paints below, a `scrim` for overlay text, `overlay` content over its block end, and `children` below. Kerf owns the scroll-driven, compositor-only parallax and its static fallbacks.                                                                                                                                                                                                          | The image and alt text, the fade color, overlay content and its contrast, and the content below.                                                         | `@kerfjs/ui/backdrop-image`                                                               | [BackdropImage](./backdrop-image.md)                                                |
 | Menu composition                                                                                                        | Navigation sections need full-size rows and the same content-item geometry as every other pane.                                                                                                                                                                                                                                                          | Do not add sidebar-specific wrapper padding, shrink targets to icon size, nest an interactive trailing control in `ListItem`, or use a chevron on a row that does not disclose content. Use ordinary links for a different navigation contract.                                                                                            | Compose `ListHeader`, `ListItem`, and `ListActionRow` in `.kui-content`; use `ListHeader` toggle mode with real controlled content, and use `ContentItem` for other surfaces plus a pane footer for toolbar actions.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                   | Information architecture, disclosure content and state, responsive drawer/shell behavior, and token overrides.                                           | `@kerfjs/ui/layout.css`                                                                   | [Pane geometry](../README.md#pane-and-content-geometry)                             |
 | Resizable application pane — `ResizableRegion`, `clampRegionSize`, `resizeRegionFromPointer`                            | A controlled split pane needs the Kerf separator, collapse state, pointer plus keyboard resizing, or a product-specific decorative grip.                                                                                                                                                                                                                 | Do not use it for static equal columns; use `Grid`. Use application CSS grid for static asymmetric or intrinsic tracks. Prefer it over Web Awesome `wa-split-panel` unless that component's distinct API is required. Keep `handleIcon` noninteractive.                                                                                    | Call `wireResizableRegions` from `@kerfjs/ui/wire-resizable-regions` once and retain its disposer.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                     | Size signal, min/max policy, collapse policy, persistence, and optional decorative handle icon.                                                          | `@kerfjs/ui/resizable-region`                                                             | [ResizableRegion contract](./accessibility.md#resizableregion)                      |
 | One application tab — `AppTab`                                                                                          | A controlled app tab needs selection, close, drag, leading/trailing anatomy, compact/segmented/icon-only presentation, label truncation, safe domain metadata, or a product-specific close glyph.                                                                                                                                                        | Do not render it alone or use it for a small settings choice; compose in `TabBar`, or use `SegmentedControl`. Keep `closeIcon` noninteractive.                                                                                                                                                                                             | Compose in `TabBar`; let `wireTabBars` manage interaction. Put only domain `data-*` values in `rootAttributes`; use typed appearance props instead of descendant CSS.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  | Tab identity, order, selection, close policy, content, domain metadata values, and outer placement.                                                      | `@kerfjs/ui/app-tab`                                                                      | [Tabs contract](./accessibility.md#tabs)                                            |
 | Application tab strip — `TabBar`, `wireTabBars`, `reorderTabs`                                                          | Tabs switch page regions and may overflow, close, reorder, fill a segmented inspector strip, sit beside a trailing action, or keep that adjacent action distinct from a far-edge end action.                                                                                                                                                             | Do not use it for a compact local view toggle; use `SegmentedControl`. Do not use it for a long choice list; use `Select`. Prefer it over Web Awesome `wa-tab-group`, `wa-tab`, and `wa-tab-panel` for Kerf app tabs.                                                                                                                      | Call `wireTabBars` once, retain the disposer, and apply `onReorder` synchronously; `reorderTabs` is the default array helper. Combine `trailingPlacement="adjacent"` with `end` for split actions; TabBar owns the shrinking/scrolling tab geometry and keeps both actions visible. Choose typed presentation/allocation props while the parent owns outer placement.                                                                                                                                                                                                                                                                                                                                                  | Ordered tabs, selection, panels, routing, closing, persistence, action content, and outer placement.                                                     | `@kerfjs/ui/tab-bar` plus `@kerfjs/ui/wire-tab-bars`                                      | [Tabs contract](./accessibility.md#tabs)                                            |
 | Panel, dialog, or page heading — `Toolbar` + `ToolbarText`                                                              | A panel, dialog, or page needs an extra-large title, optional icon, grouped trailing actions, and optional supporting copy.                                                                                                                                                                                                                              | Do not add a private heading wrapper or bespoke layout. The toolbar supplies structure, not modal behavior; use an application overlay or Web Awesome `wa-dialog` for that behavior. In a narrow peripheral rail or drawer, where xlarge would truncate at the panel's minimum size, use the default `ToolbarText` size as pane identity.  | Connect title/supporting-copy ids to the host, group controls, and delegate actions. **For a page or view title set `headingLevel` (usually `1`)** on `ToolbarText`; omit it for a dialog title referenced by `aria-labelledby`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                       | Open state, focus lifecycle, dismissal, controls, ids, copy, and heading level.                                                                          | `@kerfjs/ui/toolbar` + `@kerfjs/ui/toolbar-text`                                          | [Toolbar headings](./accessibility.md#toolbar-headings)                             |
 | Dialog or popup geometry — `DialogSurface`, `PopoverDialogSurface`, `PopupSurface`                                      | Recurring Web Awesome dialogs need 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 dropdown menus need list-compatible inset ownership.                                                                                   | Do not use these wrappers as generic layout or to replace native dialog/dropdown behavior. Avoid consumer `::part()` overrides and do not stack a dialog body inset around list-owned child geometry.                                                                                                                                      | Wrap one `wa-dialog` or `wa-dropdown`; choose the typed geometry while retaining native labeling, open state, focus, dismissal, and menu semantics. 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.                                                                    | State, focus lifecycle, dismissal, labels, content, and outer placement.                                                                                 | `@kerfjs/ui/surface-scaffold`                                                             | [Surface scaffolds](./surface-scaffold.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 Web Awesome `wa-dialog`.                                                                                                                                                                                 | 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, `IconButton`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)                           |
 | Selectable item summaries — `SummaryRow`                                                                                | A list or board shows many items as dense, selectable summaries: an identifier and title, a timestamp, and a metadata line (tickets, tasks).                                                                                                                                                                                                             | Do not use it for navigation rows; use `ListItem`. Do not use it for free-form selectable tiles; use `ContentItem`. Do not hand-roll row chrome.                                                                                                                                                                                           | Pass `title`, optional `leading`, `trailingMeta`, and `metadata`; choose `presentation` (`row` or `card`), `rail`, `selected`, `dimmed`, `listEdge`, and `titleLines`. Put rows in a labeled `role="listbox"` and own selection and arrow-key focus in the app.                                                                                                                                                                                                                                                                                                                                                                                                                                                        | The listbox, selection, keyboard movement, content, rail tone, and dimming.                                                                              | `@kerfjs/ui/summary-row`                                                                  | [Feedback accessibility](./accessibility.md#shared-rules)                           |
@@ -547,12 +550,18 @@ unset.
 
 `ToolbarControlGroup.tileTone` selects `neutral`, `brand`, `success`, `warning`, or `danger` quiet fill, matching quiet border, and on-quiet foreground for a non-interactive icon tile. Compose a contained `single` group whose only child is a direct decorative LucideIcon (`aria-hidden="true"`). Omission preserves the normal group palette. The prop does not recolor interactive, mixed, multi-control, or borderless groups; keep real actions in controls with their existing focus/hover/pressed treatments.
 
+`ToolbarControlGroup` `material="glass"` paints a group that floats over imagery or a clear (transparent) toolbar on the translucent chrome material (`--kui-chrome-material` with the blur/saturate `--kui-chrome-material-filter`), with a specular edge in place of the gray border and a soft shadow. Its controls take `--kui-color-text`, so they stay at AA over any content; a raised or outline selection paints an opaque surface pill. The fill turns opaque under reduced transparency, increased contrast, static effects (`update: slow` or `:root[data-kui-effects="static"]`), or without backdrop-filter support, and paints Canvas/CanvasText in forced colors. A `tone="dark"` glass group keeps its loud fill and gains the blur and edge; a borderless group has no surface and ignores the material. Keep the solid default on an opaque toolbar, and never add your own `backdrop-filter` or translucent background to a group.
+
 `ListItem`, `ListItemLink`, and `ListActionRow` take `iconTile` to present their leading `icon` in a filled 32px rounded tile holding an 18px glyph, for settings or command rows that identify each entry by color. Pass a tone (`neutral`, `brand`, `success`, `warning`, or `danger`) for the same quiet fill, matching quiet border, and on-quiet foreground as `ToolbarControlGroup.tileTone`, or `{ color, foreground? }` for an application color: `color` is a `CssColor` (`uiColor()`, `colorVar()`, or `fillColor('#e5484d')`) and `foreground` a `CssForegroundColor`; without one, the glyph is black or white, whichever contrasts with the fill. The tile sits 6px clear of a standard 44px row (a compact row is at least 42px tall), moves the label to the tile's edge, and keeps its colors when the row is hovered or selected. Never wrap the icon in your own tile or resize the row's icon slot.
 
 ## Toolbar composition
 
-Use `ToolbarText tone="dark"` on a loud or photo-backed toolbar surface to
-match dark control groups. It applies to read-only headings and actionable
+Use `ToolbarText tone="dark"` on a loud-filled toolbar surface (one painted
+with `--kui-color-neutral-fill-loud`, the inverse of the page) to match dark
+control groups; like them it inverts with the color scheme. Text over a dark
+photo or scrim needs a foreground that is light in both schemes instead: a
+`BackdropImage` `scrim` gives its overlay the dark scheme, so keep the
+default tone there. It applies to read-only headings and actionable
 titles at every size; default tone retains existing identity and heading colors.
 
 A `FloatingToolbar` accepts `ToolbarControlGroup` directly as its children in

package/docs/design/templates/toolbar-control-group/glass-dark.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 112" width="520" height="112"><defs><filter id="sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter><filter id="sh1" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="cp2"><rect x="42" y="42" width="16" height="16"/></clipPath><clipPath id="cp4"><rect x="82" y="42" width="16" height="16"/></clipPath><clipPath id="cp6"><rect x="122" y="42" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="35" height="60" rx="0" fill="rgb(27,42,92)"/><rect x="55" y="20" width="35" height="60" rx="0" fill="rgb(122,63,110)"/><rect x="90" y="20" width="35" height="60" rx="0" fill="rgb(194,87,122)"/><rect x="125" y="20" width="35" height="60" rx="0" fill="rgb(244,179,107)"/><rect x="28" y="34" width="124" height="44" rx="22" fill="rgba(0,0,0,0.28)" filter="url(#sh0)"/><rect x="28" y="29" width="124" height="44" rx="22" fill="rgba(0,0,0,0.32)" filter="url(#sh1)"/><rect x="28" y="28" width="124" height="44" rx="22" fill="rgba(28,28,30,0.8)"/><rect x="28.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(255,255,255,0.16)" stroke-width="1"/><rect x="30.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(245, 245, 247)"><clipPath id="svgic3"><rect x="42" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(42 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="70.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp4)"><g color="rgb(245, 245, 247)"><clipPath id="svgic5"><rect x="82" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic5)"><g transform="translate(82 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="110.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp6)"><g color="rgb(245, 245, 247)"><clipPath id="svgic7"><rect x="122" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic7)"><g transform="translate(122 42)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(245, 245, 247)" 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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>

package/docs/design/templates/toolbar-control-group/glass.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 520 112" width="520" height="112"><defs><filter id="sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter><filter id="sh1" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="cp2"><rect x="42" y="42" width="16" height="16"/></clipPath><clipPath id="cp4"><rect x="82" y="42" width="16" height="16"/></clipPath><clipPath id="cp6"><rect x="122" y="42" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="35" height="60" rx="0" fill="rgb(27,42,92)"/><rect x="55" y="20" width="35" height="60" rx="0" fill="rgb(122,63,110)"/><rect x="90" y="20" width="35" height="60" rx="0" fill="rgb(194,87,122)"/><rect x="125" y="20" width="35" height="60" rx="0" fill="rgb(244,179,107)"/><rect x="28" y="34" width="124" height="44" rx="22" fill="rgba(0,0,0,0.1)" filter="url(#sh0)"/><rect x="28" y="29" width="124" height="44" rx="22" fill="rgba(0,0,0,0.08)" filter="url(#sh1)"/><rect x="28" y="28" width="124" height="44" rx="22" fill="rgba(255,255,255,0.8)"/><rect x="28.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(255,255,255,0.72)" stroke-width="1"/><rect x="30.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp2)"><g color="rgb(29, 29, 31)"><clipPath id="svgic3"><rect x="42" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic3)"><g transform="translate(42 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="70.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp4)"><g color="rgb(29, 29, 31)"><clipPath id="svgic5"><rect x="82" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic5)"><g transform="translate(82 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="110.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#cp6)"><g color="rgb(29, 29, 31)"><clipPath id="svgic7"><rect x="122" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgic7)"><g transform="translate(122 42)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(29, 29, 31)" 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(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></svg>

package/docs/design/templates/toolbar-control-group-dark.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 1222" width="552" height="1222"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="cp4"><rect x="16" y="574" width="520" height="96"/></clipPath><clipPath id="cp5"><rect x="16" y="708" width="520" height="96"/></clipPath><clipPath id="cp6"><rect x="16" y="842" width="520" height="96"/></clipPath><clipPath id="cp7"><rect x="16" y="976" width="520" height="96"/></clipPath><clipPath id="cp8"><rect x="16" y="1110" width="520" height="96"/></clipPath><clipPath id="ct9"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="552" width="520" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="574" width="520" height="96" rx="0"/></clipPath><clipPath id="ct24"><rect x="16" y="686" width="520" height="22"/></clipPath><clipPath id="irc25"><rect x="16" y="708" width="520" height="96" rx="0"/></clipPath><clipPath id="ct27"><rect x="16" y="820" width="520" height="22"/></clipPath><clipPath id="irc28"><rect x="16" y="842" width="520" height="96" rx="0"/></clipPath><clipPath id="ct30"><rect x="16" y="954" width="520" height="22"/></clipPath><clipPath id="irc31"><rect x="16" y="976" width="520" height="96" rx="0"/></clipPath><clipPath id="ct33"><rect x="16" y="1088" width="520" height="22"/></clipPath><clipPath id="irc34"><rect x="16" y="1110" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="1222" 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)">Neutral Quiet Icon Tile</text><g clip-path="url(#cp0)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg11cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgba(228,228,255,0.075)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.125)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg11svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(34 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(194, 194, 198)" 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(194, 194, 198)" 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="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Brand Quiet Icon Tile</text><g clip-path="url(#cp1)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg14cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg14cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg14svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic1)"><g transform="translate(34 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(138, 203, 255)" 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(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Success Quiet Icon Tile</text><g clip-path="url(#cp2)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg17cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(31,52,38)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(36,83,49)" stroke-width="1"/><g clip-path="url(#svgimg17cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg17svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg17svgic1)"><g transform="translate(34 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(99, 230, 133)" 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(99, 230, 133)" 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="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Warning Quiet Icon Tile</text><g clip-path="url(#cp3)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg20cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(48,44,27)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(107,90,20)" stroke-width="1"/><g clip-path="url(#svgimg20cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg20svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg20svgic1)"><g transform="translate(34 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(255, 216, 74)" 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(255, 216, 74)" 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="564" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Danger Quiet Icon Tile</text><g clip-path="url(#cp4)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="574" width="520" height="96"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 574)"><defs><clipPath id="svgimg23cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(44,30,32)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(101,37,40)" stroke-width="1"/><g clip-path="url(#svgimg23cp0)"><g color="rgb(255, 105, 108)"><clipPath id="svgimg23svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg23svgic1)"><g transform="translate(34 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(255, 105, 108)" 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(255, 105, 108)" 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="698" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bordered Group of Icon Buttons</text><g clip-path="url(#cp5)"><g clip-path="url(#irc25)"><clipPath id="svgimg26vclip"><rect x="16" y="708" width="520" height="96"/></clipPath><g clip-path="url(#svgimg26vclip)"><g transform="translate(16 708)"><defs><clipPath id="svgimg26cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg26cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg26cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg26svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg26svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg26svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic5)"><g transform="translate(114 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(194, 194, 198)" 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(194, 194, 198)" 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="832" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Borderless Single Control</text><g clip-path="url(#cp6)"><g clip-path="url(#irc28)"><clipPath id="svgimg29vclip"><rect x="16" y="842" width="520" height="96"/></clipPath><g clip-path="url(#svgimg29vclip)"><g transform="translate(16 842)"><defs><clipPath id="svgimg29cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg29cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg29svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg29svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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(194, 194, 198)" 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="966" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label Text Beside a Control</text><g clip-path="url(#cp7)"><g clip-path="url(#irc31)"><clipPath id="svgimg32vclip"><rect x="16" y="976" width="520" height="96"/></clipPath><g clip-path="url(#svgimg32vclip)"><g transform="translate(16 976)"><defs><clipPath id="svgimg32cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg32ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg32cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg32ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg32cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg32cp0)"><g clip-path="url(#svgimg32ov1)"><g clip-path="url(#svgimg32cp2)"><g clip-path="url(#svgimg32ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg32cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg32svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg32svgic5)"><g transform="translate(116.234 34)scale(.66667)"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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="1100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Push-Appearance Buttons</text><g clip-path="url(#cp8)"><g clip-path="url(#irc34)"><clipPath id="svgimg35vclip"><rect x="16" y="1110" width="520" height="96"/></clipPath><g clip-path="url(#svgimg35vclip)"><g transform="translate(16 1110)"><defs><clipPath id="svgimg35cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg35cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg35cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg35svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg35svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg35cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg35svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg35svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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 1372" width="552" height="1372"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="cp4"><rect x="16" y="574" width="520" height="96"/></clipPath><clipPath id="cp5"><rect x="16" y="708" width="520" height="96"/></clipPath><clipPath id="cp6"><rect x="16" y="842" width="520" height="96"/></clipPath><clipPath id="cp7"><rect x="16" y="976" width="520" height="96"/></clipPath><clipPath id="cp8"><rect x="16" y="1110" width="520" height="112"/></clipPath><clipPath id="cp9"><rect x="16" y="1260" width="520" height="96"/></clipPath><clipPath id="ct10"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="552" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="574" width="520" height="96" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="686" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="708" width="520" height="96" rx="0"/></clipPath><clipPath id="ct28"><rect x="16" y="820" width="520" height="22"/></clipPath><clipPath id="irc29"><rect x="16" y="842" width="520" height="96" rx="0"/></clipPath><clipPath id="ct31"><rect x="16" y="954" width="520" height="22"/></clipPath><clipPath id="irc32"><rect x="16" y="976" width="520" height="96" rx="0"/></clipPath><clipPath id="ct34"><rect x="16" y="1088" width="520" height="22"/></clipPath><clipPath id="irc35"><rect x="16" y="1110" width="520" height="112" rx="0"/></clipPath><clipPath id="ct37"><rect x="16" y="1238" width="520" height="22"/></clipPath><clipPath id="irc38"><rect x="16" y="1260" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="1372" 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)">Neutral Quiet Icon Tile</text><g clip-path="url(#cp0)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg12cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgba(228,228,255,0.075)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.125)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg12svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic1)"><g transform="translate(34 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(194, 194, 198)" 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(194, 194, 198)" 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="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Brand Quiet Icon Tile</text><g clip-path="url(#cp1)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg15cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(34,43,48)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(138, 203, 255)"><clipPath id="svgimg15svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(34 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(138, 203, 255)" 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(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Success Quiet Icon Tile</text><g clip-path="url(#cp2)"><g clip-path="url(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg18cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(31,52,38)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(36,83,49)" stroke-width="1"/><g clip-path="url(#svgimg18cp0)"><g color="rgb(99, 230, 133)"><clipPath id="svgimg18svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg18svgic1)"><g transform="translate(34 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(99, 230, 133)" 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(99, 230, 133)" 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="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Warning Quiet Icon Tile</text><g clip-path="url(#cp3)"><g clip-path="url(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg21cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(48,44,27)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(107,90,20)" stroke-width="1"/><g clip-path="url(#svgimg21cp0)"><g color="rgb(255, 216, 74)"><clipPath id="svgimg21svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic1)"><g transform="translate(34 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(255, 216, 74)" 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(255, 216, 74)" 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="564" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Danger Quiet Icon Tile</text><g clip-path="url(#cp4)"><g clip-path="url(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="574" width="520" height="96"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 574)"><defs><clipPath id="svgimg24cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(44,30,32)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(101,37,40)" stroke-width="1"/><g clip-path="url(#svgimg24cp0)"><g color="rgb(255, 105, 108)"><clipPath id="svgimg24svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic1)"><g transform="translate(34 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(255, 105, 108)" 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(255, 105, 108)" 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="698" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Bordered Group of Icon Buttons</text><g clip-path="url(#cp5)"><g clip-path="url(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="708" width="520" height="96"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 708)"><defs><clipPath id="svgimg27cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg27cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg27svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic5)"><g transform="translate(114 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(194, 194, 198)" 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(194, 194, 198)" 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="832" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Borderless Single Control</text><g clip-path="url(#cp6)"><g clip-path="url(#irc29)"><clipPath id="svgimg30vclip"><rect x="16" y="842" width="520" height="96"/></clipPath><g clip-path="url(#svgimg30vclip)"><g transform="translate(16 842)"><defs><clipPath id="svgimg30cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg30cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg30svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg30svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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(194, 194, 198)" 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="966" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Label Text Beside a Control</text><g clip-path="url(#cp7)"><g clip-path="url(#irc32)"><clipPath id="svgimg33vclip"><rect x="16" y="976" width="520" height="96"/></clipPath><g clip-path="url(#svgimg33vclip)"><g transform="translate(16 976)"><defs><clipPath id="svgimg33cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg33ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg33cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg33ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg33cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg33cp0)"><g clip-path="url(#svgimg33ov1)"><g clip-path="url(#svgimg33cp2)"><g clip-path="url(#svgimg33ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(194,194,198)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg33cp4)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg33svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg33svgic5)"><g transform="translate(116.234 34)scale(.66667)"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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="1100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Glass Material Over Artwork</text><g clip-path="url(#cp8)"><g clip-path="url(#irc35)"><clipPath id="svgimg36vclip"><rect x="16" y="1110" width="520" height="112"/></clipPath><g clip-path="url(#svgimg36vclip)"><g transform="translate(16 1110)"><defs><filter id="svgimg36sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter><filter id="svgimg36sh1" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg36cp2"><rect x="42" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg36cp4"><rect x="82" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg36cp6"><rect x="122" y="42" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="35" height="60" rx="0" fill="rgb(27,42,92)"/><rect x="55" y="20" width="35" height="60" rx="0" fill="rgb(122,63,110)"/><rect x="90" y="20" width="35" height="60" rx="0" fill="rgb(194,87,122)"/><rect x="125" y="20" width="35" height="60" rx="0" fill="rgb(244,179,107)"/><rect x="28" y="34" width="124" height="44" rx="22" fill="rgba(0,0,0,0.28)" filter="url(#svgimg36sh0)"/><rect x="28" y="29" width="124" height="44" rx="22" fill="rgba(0,0,0,0.32)" filter="url(#svgimg36sh1)"/><rect x="28" y="28" width="124" height="44" rx="22" fill="rgba(28,28,30,0.8)"/><rect x="28.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(255,255,255,0.16)" stroke-width="1"/><rect x="30.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg36cp2)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic3"><rect x="42" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic3)"><g transform="translate(42 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="70.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg36cp4)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic5"><rect x="82" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic5)"><g transform="translate(82 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="110.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg36cp6)"><g color="rgb(245, 245, 247)"><clipPath id="svgimg36svgic7"><rect x="122" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic7)"><g transform="translate(122 42)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(245, 245, 247)" 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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="1250" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(174,174,178)">Push-Appearance Buttons</text><g clip-path="url(#cp9)"><g clip-path="url(#irc38)"><clipPath id="svgimg39vclip"><rect x="16" y="1260" width="520" height="96"/></clipPath><g clip-path="url(#svgimg39vclip)"><g transform="translate(16 1260)"><defs><clipPath id="svgimg39cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg39cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgba(253,253,255,0.133)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(253,253,255,0.196)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg39cp0)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg39svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg39svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg39cp2)"><g color="rgb(194, 194, 198)"><clipPath id="svgimg39svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg39svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(194, 194, 198)" 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>

package/docs/design/templates/toolbar-control-group.svg

@@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 552 1222" width="552" height="1222"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="cp4"><rect x="16" y="574" width="520" height="96"/></clipPath><clipPath id="cp5"><rect x="16" y="708" width="520" height="96"/></clipPath><clipPath id="cp6"><rect x="16" y="842" width="520" height="96"/></clipPath><clipPath id="cp7"><rect x="16" y="976" width="520" height="96"/></clipPath><clipPath id="cp8"><rect x="16" y="1110" width="520" height="96"/></clipPath><clipPath id="ct9"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc10"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct12"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc13"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct15"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc16"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct18"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc19"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath><clipPath id="ct21"><rect x="16" y="552" width="520" height="22"/></clipPath><clipPath id="irc22"><rect x="16" y="574" width="520" height="96" rx="0"/></clipPath><clipPath id="ct24"><rect x="16" y="686" width="520" height="22"/></clipPath><clipPath id="irc25"><rect x="16" y="708" width="520" height="96" rx="0"/></clipPath><clipPath id="ct27"><rect x="16" y="820" width="520" height="22"/></clipPath><clipPath id="irc28"><rect x="16" y="842" width="520" height="96" rx="0"/></clipPath><clipPath id="ct30"><rect x="16" y="954" width="520" height="22"/></clipPath><clipPath id="irc31"><rect x="16" y="976" width="520" height="96" rx="0"/></clipPath><clipPath id="ct33"><rect x="16" y="1088" width="520" height="22"/></clipPath><clipPath id="irc34"><rect x="16" y="1110" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="1222" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Neutral Quiet Icon Tile</text><g clip-path="url(#cp0)"><g clip-path="url(#irc10)"><clipPath id="svgimg11vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg11vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg11cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgba(0,0,98,0.05)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,49,0.1)" stroke-width="1"/><g clip-path="url(#svgimg11cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg11svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg11svgic1)"><g transform="translate(34 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(98, 98, 103)" 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(98, 98, 103)" 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="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Brand Quiet Icon Tile</text><g clip-path="url(#cp1)"><g clip-path="url(#irc13)"><clipPath id="svgimg14vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg14vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg14cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(235,244,252)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(166,207,242)" stroke-width="1"/><g clip-path="url(#svgimg14cp0)"><g color="rgb(12, 98, 243)"><clipPath id="svgimg14svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg14svgic1)"><g transform="translate(34 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(12, 98, 243)" 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(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Success Quiet Icon Tile</text><g clip-path="url(#cp2)"><g clip-path="url(#irc16)"><clipPath id="svgimg17vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg17vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg17cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(227,247,232)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(190,237,202)" stroke-width="1"/><g clip-path="url(#svgimg17cp0)"><g color="rgb(0, 127, 46)"><clipPath id="svgimg17svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg17svgic1)"><g transform="translate(34 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(0, 127, 46)" 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(0, 127, 46)" 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="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Warning Quiet Icon Tile</text><g clip-path="url(#cp3)"><g clip-path="url(#irc19)"><clipPath id="svgimg20vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg20vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg20cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(255,250,232)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(255,237,166)" stroke-width="1"/><g clip-path="url(#svgimg20cp0)"><g color="rgb(150, 98, 0)"><clipPath id="svgimg20svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg20svgic1)"><g transform="translate(34 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(150, 98, 0)" 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(150, 98, 0)" 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="564" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Danger Quiet Icon Tile</text><g clip-path="url(#cp4)"><g clip-path="url(#irc22)"><clipPath id="svgimg23vclip"><rect x="16" y="574" width="520" height="96"/></clipPath><g clip-path="url(#svgimg23vclip)"><g transform="translate(16 574)"><defs><clipPath id="svgimg23cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(254,237,238)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(249,173,175)" stroke-width="1"/><g clip-path="url(#svgimg23cp0)"><g color="rgb(194, 11, 32)"><clipPath id="svgimg23svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg23svgic1)"><g transform="translate(34 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(194, 11, 32)" 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(194, 11, 32)" 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="698" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bordered Group of Icon Buttons</text><g clip-path="url(#cp5)"><g clip-path="url(#irc25)"><clipPath id="svgimg26vclip"><rect x="16" y="708" width="520" height="96"/></clipPath><g clip-path="url(#svgimg26vclip)"><g transform="translate(16 708)"><defs><clipPath id="svgimg26cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg26cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg26cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg26svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp2)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg26svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg26cp4)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg26svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg26svgic5)"><g transform="translate(114 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(98, 98, 103)" 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(98, 98, 103)" 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="832" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Borderless Single Control</text><g clip-path="url(#cp6)"><g clip-path="url(#irc28)"><clipPath id="svgimg29vclip"><rect x="16" y="842" width="520" height="96"/></clipPath><g clip-path="url(#svgimg29vclip)"><g transform="translate(16 842)"><defs><clipPath id="svgimg29cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg29cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg29svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg29svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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(98, 98, 103)" 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="966" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label Text Beside a Control</text><g clip-path="url(#cp7)"><g clip-path="url(#irc31)"><clipPath id="svgimg32vclip"><rect x="16" y="976" width="520" height="96"/></clipPath><g clip-path="url(#svgimg32vclip)"><g transform="translate(16 976)"><defs><clipPath id="svgimg32cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg32ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg32cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg32ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg32cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg32cp0)"><g clip-path="url(#svgimg32ov1)"><g clip-path="url(#svgimg32cp2)"><g clip-path="url(#svgimg32ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg32cp4)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg32svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg32svgic5)"><g transform="translate(116.234 34)scale(.66667)"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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="1100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Push-Appearance Buttons</text><g clip-path="url(#cp8)"><g clip-path="url(#irc34)"><clipPath id="svgimg35vclip"><rect x="16" y="1110" width="520" height="96"/></clipPath><g clip-path="url(#svgimg35vclip)"><g transform="translate(16 1110)"><defs><clipPath id="svgimg35cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg35cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg35cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg35svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg35svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg35cp2)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg35svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg35svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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 1372" width="552" height="1372"><defs><clipPath id="cp0"><rect x="16" y="38" width="520" height="96"/></clipPath><clipPath id="cp1"><rect x="16" y="172" width="520" height="96"/></clipPath><clipPath id="cp2"><rect x="16" y="306" width="520" height="96"/></clipPath><clipPath id="cp3"><rect x="16" y="440" width="520" height="96"/></clipPath><clipPath id="cp4"><rect x="16" y="574" width="520" height="96"/></clipPath><clipPath id="cp5"><rect x="16" y="708" width="520" height="96"/></clipPath><clipPath id="cp6"><rect x="16" y="842" width="520" height="96"/></clipPath><clipPath id="cp7"><rect x="16" y="976" width="520" height="96"/></clipPath><clipPath id="cp8"><rect x="16" y="1110" width="520" height="112"/></clipPath><clipPath id="cp9"><rect x="16" y="1260" width="520" height="96"/></clipPath><clipPath id="ct10"><rect x="16" y="16" width="520" height="22"/></clipPath><clipPath id="irc11"><rect x="16" y="38" width="520" height="96" rx="0"/></clipPath><clipPath id="ct13"><rect x="16" y="150" width="520" height="22"/></clipPath><clipPath id="irc14"><rect x="16" y="172" width="520" height="96" rx="0"/></clipPath><clipPath id="ct16"><rect x="16" y="284" width="520" height="22"/></clipPath><clipPath id="irc17"><rect x="16" y="306" width="520" height="96" rx="0"/></clipPath><clipPath id="ct19"><rect x="16" y="418" width="520" height="22"/></clipPath><clipPath id="irc20"><rect x="16" y="440" width="520" height="96" rx="0"/></clipPath><clipPath id="ct22"><rect x="16" y="552" width="520" height="22"/></clipPath><clipPath id="irc23"><rect x="16" y="574" width="520" height="96" rx="0"/></clipPath><clipPath id="ct25"><rect x="16" y="686" width="520" height="22"/></clipPath><clipPath id="irc26"><rect x="16" y="708" width="520" height="96" rx="0"/></clipPath><clipPath id="ct28"><rect x="16" y="820" width="520" height="22"/></clipPath><clipPath id="irc29"><rect x="16" y="842" width="520" height="96" rx="0"/></clipPath><clipPath id="ct31"><rect x="16" y="954" width="520" height="22"/></clipPath><clipPath id="irc32"><rect x="16" y="976" width="520" height="96" rx="0"/></clipPath><clipPath id="ct34"><rect x="16" y="1088" width="520" height="22"/></clipPath><clipPath id="irc35"><rect x="16" y="1110" width="520" height="112" rx="0"/></clipPath><clipPath id="ct37"><rect x="16" y="1238" width="520" height="22"/></clipPath><clipPath id="irc38"><rect x="16" y="1260" width="520" height="96" rx="0"/></clipPath></defs><rect x="0" y="0" width="552" height="1372" rx="0" fill="rgb(255,255,255)"/><text x="16" y="28" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Neutral Quiet Icon Tile</text><g clip-path="url(#cp0)"><g clip-path="url(#irc11)"><clipPath id="svgimg12vclip"><rect x="16" y="38" width="520" height="96"/></clipPath><g clip-path="url(#svgimg12vclip)"><g transform="translate(16 38)"><defs><clipPath id="svgimg12cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgba(0,0,98,0.05)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,49,0.1)" stroke-width="1"/><g clip-path="url(#svgimg12cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg12svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg12svgic1)"><g transform="translate(34 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(98, 98, 103)" 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(98, 98, 103)" 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="162" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Brand Quiet Icon Tile</text><g clip-path="url(#cp1)"><g clip-path="url(#irc14)"><clipPath id="svgimg15vclip"><rect x="16" y="172" width="520" height="96"/></clipPath><g clip-path="url(#svgimg15vclip)"><g transform="translate(16 172)"><defs><clipPath id="svgimg15cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(235,244,252)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(166,207,242)" stroke-width="1"/><g clip-path="url(#svgimg15cp0)"><g color="rgb(12, 98, 243)"><clipPath id="svgimg15svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg15svgic1)"><g transform="translate(34 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(12, 98, 243)" 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(12, 98, 243)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="296" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Success Quiet Icon Tile</text><g clip-path="url(#cp2)"><g clip-path="url(#irc17)"><clipPath id="svgimg18vclip"><rect x="16" y="306" width="520" height="96"/></clipPath><g clip-path="url(#svgimg18vclip)"><g transform="translate(16 306)"><defs><clipPath id="svgimg18cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(227,247,232)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(190,237,202)" stroke-width="1"/><g clip-path="url(#svgimg18cp0)"><g color="rgb(0, 127, 46)"><clipPath id="svgimg18svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg18svgic1)"><g transform="translate(34 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(0, 127, 46)" 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(0, 127, 46)" 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="430" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Warning Quiet Icon Tile</text><g clip-path="url(#cp3)"><g clip-path="url(#irc20)"><clipPath id="svgimg21vclip"><rect x="16" y="440" width="520" height="96"/></clipPath><g clip-path="url(#svgimg21vclip)"><g transform="translate(16 440)"><defs><clipPath id="svgimg21cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(255,250,232)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(255,237,166)" stroke-width="1"/><g clip-path="url(#svgimg21cp0)"><g color="rgb(150, 98, 0)"><clipPath id="svgimg21svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg21svgic1)"><g transform="translate(34 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(150, 98, 0)" 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(150, 98, 0)" 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="564" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Danger Quiet Icon Tile</text><g clip-path="url(#cp4)"><g clip-path="url(#irc23)"><clipPath id="svgimg24vclip"><rect x="16" y="574" width="520" height="96"/></clipPath><g clip-path="url(#svgimg24vclip)"><g transform="translate(16 574)"><defs><clipPath id="svgimg24cp0"><rect x="22" y="22" width="40" height="40"/></clipPath></defs><rect x="20" y="20" width="44" height="44" rx="22" fill="rgb(254,237,238)"/><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgb(249,173,175)" stroke-width="1"/><g clip-path="url(#svgimg24cp0)"><g color="rgb(194, 11, 32)"><clipPath id="svgimg24svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg24svgic1)"><g transform="translate(34 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(194, 11, 32)" 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(194, 11, 32)" 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="698" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Bordered Group of Icon Buttons</text><g clip-path="url(#cp5)"><g clip-path="url(#irc26)"><clipPath id="svgimg27vclip"><rect x="16" y="708" width="520" height="96"/></clipPath><g clip-path="url(#svgimg27vclip)"><g transform="translate(16 708)"><defs><clipPath id="svgimg27cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg27cp2"><rect x="74" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg27cp4"><rect x="114" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="124" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="20.5" y="20.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg27svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp2)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg27svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="102.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg27cp4)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg27svgic5"><rect x="114" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg27svgic5)"><g transform="translate(114 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(98, 98, 103)" 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(98, 98, 103)" 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="832" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Borderless Single Control</text><g clip-path="url(#cp6)"><g clip-path="url(#irc29)"><clipPath id="svgimg30vclip"><rect x="16" y="842" width="520" height="96"/></clipPath><g clip-path="url(#svgimg30vclip)"><g transform="translate(16 842)"><defs><clipPath id="svgimg30cp0"><rect x="34" y="34" width="16" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="43" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg30cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg30svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg30svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M5 12h14" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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(98, 98, 103)" 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="966" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Label Text Beside a Control</text><g clip-path="url(#cp7)"><g clip-path="url(#irc32)"><clipPath id="svgimg33vclip"><rect x="16" y="976" width="520" height="96"/></clipPath><g clip-path="url(#svgimg33vclip)"><g transform="translate(16 976)"><defs><clipPath id="svgimg33cp0"><rect x="22" y="22" width="82.2" height="40"/></clipPath><clipPath id="svgimg33ov1"><rect x="22" y="22" width="82.2" height="40" rx="0"/></clipPath><clipPath id="svgimg33cp2"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg33ct3"><rect x="30" y="34.8" width="66.2" height="14.4"/></clipPath><clipPath id="svgimg33cp4"><rect x="116" y="34" width="16.2" height="16"/></clipPath></defs><rect x="20.5" y="20.5" width="125" height="43" rx="21.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg33cp0)"><g clip-path="url(#svgimg33ov1)"><g clip-path="url(#svgimg33cp2)"><g clip-path="url(#svgimg33ct3)"><text x="30" y="45.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="650" fill="rgb(98,98,103)">Workspace</text></g></g></g></g><rect x="104.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg33cp4)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg33svgic5"><rect x="116.2" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg33svgic5)"><g transform="translate(116.234 34)scale(.66667)"><path d="M10.3 21a2 2 0 0 0 3.4 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3.3 15.3A1 1 0 0 0 4 17h16a1 1 0 0 0 .7-1.7C19.4 14 18 12.5 18 8A6 6 0 0 0 6 8c0 4.5-1.4 6-2.7 7.3" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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="1100" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Glass Material Over Artwork</text><g clip-path="url(#cp8)"><g clip-path="url(#irc35)"><clipPath id="svgimg36vclip"><rect x="16" y="1110" width="520" height="112"/></clipPath><g clip-path="url(#svgimg36vclip)"><g transform="translate(16 1110)"><defs><filter id="svgimg36sh0" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="9"/></filter><filter id="svgimg36sh1" x="-50%" y="-50%" width="200%" height="200%"><feGaussianBlur stdDeviation="1.5"/></filter><clipPath id="svgimg36cp2"><rect x="42" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg36cp4"><rect x="82" y="42" width="16" height="16"/></clipPath><clipPath id="svgimg36cp6"><rect x="122" y="42" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="35" height="60" rx="0" fill="rgb(27,42,92)"/><rect x="55" y="20" width="35" height="60" rx="0" fill="rgb(122,63,110)"/><rect x="90" y="20" width="35" height="60" rx="0" fill="rgb(194,87,122)"/><rect x="125" y="20" width="35" height="60" rx="0" fill="rgb(244,179,107)"/><rect x="28" y="34" width="124" height="44" rx="22" fill="rgba(0,0,0,0.1)" filter="url(#svgimg36sh0)"/><rect x="28" y="29" width="124" height="44" rx="22" fill="rgba(0,0,0,0.08)" filter="url(#svgimg36sh1)"/><rect x="28" y="28" width="124" height="44" rx="22" fill="rgba(255,255,255,0.8)"/><rect x="28.5" y="28.5" width="123" height="43" rx="21.5" fill="none" stroke="rgba(255,255,255,0.72)" stroke-width="1"/><rect x="30.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg36cp2)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg36svgic3"><rect x="42" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic3)"><g transform="translate(42 42)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="70.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg36cp4)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg36svgic5"><rect x="82" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic5)"><g transform="translate(82 42)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="110.5" y="30.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg36cp6)"><g color="rgb(29, 29, 31)"><clipPath id="svgimg36svgic7"><rect x="122" y="42" width="16" height="16"/></clipPath><g clip-path="url(#svgimg36svgic7)"><g transform="translate(122 42)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(29, 29, 31)" 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(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g></g></g></g></g><text x="16" y="1250" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="600" fill="rgb(110,110,115)">Push-Appearance Buttons</text><g clip-path="url(#cp9)"><g clip-path="url(#irc38)"><clipPath id="svgimg39vclip"><rect x="16" y="1260" width="520" height="96"/></clipPath><g clip-path="url(#svgimg39vclip)"><g transform="translate(16 1260)"><defs><clipPath id="svgimg39cp0"><rect x="34" y="34" width="16" height="16"/></clipPath><clipPath id="svgimg39cp2"><rect x="74" y="34" width="16" height="16"/></clipPath></defs><rect x="20" y="20" width="84" height="44" rx="22" fill="rgba(0,0,49,0.1)"/><rect x="20.5" y="20.5" width="83" height="43" rx="21.5" fill="none" stroke="rgba(0,0,28,0.18)" stroke-width="1"/><rect x="22.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg39cp0)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg39svgic1"><rect x="34" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg39svgic1)"><g transform="translate(34 34)scale(.66667)"><path d="M3 5z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 12z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M3 19z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 5h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 12h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M8 19h13" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></g></g></g></g><rect x="62.5" y="22.5" width="39" height="39" rx="19.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#svgimg39cp2)"><g color="rgb(98, 98, 103)"><clipPath id="svgimg39svgic3"><rect x="74" y="34" width="16" height="16"/></clipPath><g clip-path="url(#svgimg39svgic3)"><g transform="translate(74 34)scale(.66667)"><rect width="18" height="18" x="3" y="3" rx="2" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M15 3v18" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(98, 98, 103)" 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>

package/docs/design/templates.md

@@ -138,3 +138,11 @@ pane/sidebar geometry checks cover the resulting 43px icon-label offset from the
 section edge (17px content inset + 18px icon + 8px gap).
 
 For a focused update, pass component names: `npm run design-templates:build -- toolbar`. Omit them to capture all components. Toolbar width variants use the real `wireToolbarVisibility` helper after rendering typed props. The `ListActionRow` "Trailing overflow menu" variant renders a real `trailingMenu` `PopupMenu`. Its trigger is a native button inside Web Awesome's shadow root, and domotion cannot read that button's author styles. A registered trigger would therefore be captured as a raster image, which also stops the library sheet from flattening. The capture instead leaves the PopupMenu unregistered. The template-only `staticPopupMenuTriggerCss` gives the trigger host the geometry `popup-menu.css` gives its `::part(base)` in a row: a 44px-wide box, as tall as the row, with the 16px icon centered. It also hides the closed menu's items. The icon lands at the same position as in a registered capture.
+
+The `ToolbarControlGroup` "Glass Material Over Artwork" variant draws the glass
+group over flat sample color bands with `--kui-chrome-material-filter: none`.
+domotion rasterizes a live `backdrop-filter` into an embedded image that keeps a
+nested `<svg>` in the library sheet, which design tools cannot load, and a
+gradient backdrop does the same. The template therefore shows the translucent
+material, specular edge, and shadow as designed, without the blur, which exists
+only at run time.