@kerfjs/ui 5.0.0-beta.12 → 5.0.0-beta.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (20) hide show
  1. package/ai/component-catalog.json +2 -4
  2. package/ai/public-api-signatures-v1.md +1 -1
  3. package/ai/webawesome-jsx-signatures-v1.md +1 -1
  4. package/dist/styles/foundation.css +7 -0
  5. package/dist/styles/list-action-row.css +1 -1
  6. package/dist/styles/list-item.css +1 -1
  7. package/dist/styles/select.css +3 -1
  8. package/dist/styles/state-banner.css +1 -1
  9. package/docs/accessibility.md +4 -2
  10. package/docs/design/templates/list-action-row/selected-dark.svg +1 -1
  11. package/docs/design/templates/list-action-row/selected.svg +1 -1
  12. package/docs/design/templates/list-action-row-dark.svg +1 -1
  13. package/docs/design/templates/list-action-row.svg +1 -1
  14. package/docs/design/templates/list-item/selected-dark.svg +1 -1
  15. package/docs/design/templates/list-item/selected.svg +1 -1
  16. package/docs/design/templates/list-item-dark.svg +1 -1
  17. package/docs/design/templates/list-item.svg +1 -1
  18. package/docs/design/templates/state-banner/info.svg +1 -1
  19. package/docs/design/templates/state-banner.svg +1 -1
  20. package/package.json +1 -1
package/ai/component-catalog.json CHANGED
@@ -1003,7 +1003,6 @@
1003
1003
  "publicTokens": [
1004
1004
  "--kui-color-brand-border-quiet",
1005
1005
  "--kui-color-brand-fill-normal",
1006
- "--kui-color-brand-on-quiet",
1007
1006
  "--kui-color-neutral-border-normal",
1008
1007
  "--kui-color-neutral-fill-normal",
1009
1008
  "--kui-color-neutral-fill-quiet",
@@ -1091,7 +1090,6 @@
1091
1090
  ],
1092
1091
  "publicTokens": [
1093
1092
  "--kui-color-brand-fill-normal",
1094
- "--kui-color-brand-on-quiet",
1095
1093
  "--kui-color-neutral-fill-quiet",
1096
1094
  "--kui-color-neutral-on-normal",
1097
1095
  "--kui-color-neutral-on-quiet",
@@ -1766,7 +1764,7 @@
1766
1764
  ],
1767
1765
  "publicTokens": [
1768
1766
  "--kui-color-brand-fill-normal",
1769
- "--kui-color-brand-on-quiet",
1767
+ "--kui-color-brand-on-fill",
1770
1768
  "--kui-color-neutral-border-quiet",
1771
1769
  "--kui-color-neutral-on-quiet",
1772
1770
  "--kui-disclosure-icon-scale",
@@ -1914,7 +1912,7 @@
1914
1912
  "publicTokens": [
1915
1913
  "--kui-color-brand-border-quiet",
1916
1914
  "--kui-color-brand-fill-quiet",
1917
- "--kui-color-brand-on-quiet",
1915
+ "--kui-color-brand-on-fill",
1918
1916
  "--kui-color-danger-border-quiet",
1919
1917
  "--kui-color-danger-fill-quiet",
1920
1918
  "--kui-color-danger-on-quiet",
package/ai/public-api-signatures-v1.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Public API signatures for the UI authoring corpus
2
2
 
3
- Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.12` and `kerfjs@5.0.0-beta.12`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
3
+ Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.14` and `kerfjs@5.0.0-beta.14`. This bounded reference covers only APIs used by the seven-task corpus. It is interface evidence, not an implementation or runtime guarantee.
4
4
 
5
5
  ## `@kerfjs/ui/disclosure-arrow`
6
6
 
package/ai/webawesome-jsx-signatures-v1.md CHANGED
@@ -1,6 +1,6 @@
1
1
  # Web Awesome JSX signatures for the UI authoring corpus
2
2
 
3
- Generated from the emitted `@kerfjs/ui@5.0.0-beta.12` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
3
+ Generated from the emitted `@kerfjs/ui@5.0.0-beta.14` declaration boundary. Import `@kerfjs/ui/webawesome` for type effects when authoring direct `wa-*` JSX. The module emits no runtime behavior and does not register custom elements.
4
4
 
5
5
  ```ts
6
6
  import { KerfCustomElement } from 'kerfjs/jsx-runtime';
package/dist/styles/foundation.css CHANGED
@@ -178,6 +178,13 @@
178
178
  var(--kui-color-brand-on-quiet)
179
179
  );
180
180
  --kui-color-brand-on-loud: var(--wa-color-brand-on-loud, #fff);
181
+ /* Brand accent text placed directly ON a brand fill (quiet or normal), such as
182
+ the info StateBanner and Select's current option. Darker than brand-on-quiet
183
+ so it clears WCAG AA (>=4.5:1): brand-on-quiet (#1e6ef4) resolves to only
184
+ 3.77:1 over brand-fill-normal (#d6ecff) and 4.15:1 over brand-fill-quiet
185
+ (#ebf6ff), while #1a5dcf (same hue) clears ~4.9:1 and ~5.2:1 there. The dark
186
+ value matches brand-on-quiet, which already passes over the dark fills. */
187
+ --kui-color-brand-on-fill: light-dark(#1a5dcf, #8acbff);
181
188
 
182
189
  --kui-color-success-fill-loud: var(--wa-color-success-fill-loud, #34c759);
183
190
  --kui-color-success-fill-quiet: var(
package/dist/styles/list-action-row.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --kui-list-action-row-background: transparent;
5
5
  --kui-list-action-row-hover-border: var(--kui-color-neutral-border-normal);
6
6
  --kui-list-action-row-hover-background: var(--kui-color-neutral-fill-quiet);
7
- --kui-list-action-row-selected-color: var(--kui-color-brand-on-quiet);
7
+ --kui-list-action-row-selected-color: var(--kui-color-neutral-on-normal);
8
8
  --kui-list-action-row-selected-border: var(--kui-color-brand-border-quiet);
9
9
  --kui-list-action-row-selected-background: var(--kui-color-brand-fill-normal);
10
10
  --kui-list-action-row-trailing-hover-background: var(
package/dist/styles/list-item.css CHANGED
@@ -4,7 +4,7 @@
4
4
  --kui-list-item-background: transparent;
5
5
  --kui-list-item-hover-border: var(--kui-color-neutral-border-normal);
6
6
  --kui-list-item-hover-background: var(--kui-color-neutral-fill-quiet);
7
- --kui-list-item-selected-color: var(--kui-color-brand-on-quiet);
7
+ --kui-list-item-selected-color: var(--kui-color-neutral-on-normal);
8
8
  --kui-list-item-selected-border: var(--kui-color-brand-border-quiet);
9
9
  --kui-list-item-selected-background: var(--kui-color-brand-fill-normal);
10
10
  display: grid;
package/dist/styles/select.css CHANGED
@@ -32,7 +32,9 @@
32
32
  }
33
33
  .kui-select wa-option {
34
34
  --wa-form-control-activated-color: var(--kui-color-brand-fill-normal);
35
- --current-text-color: var(--kui-color-brand-on-quiet);
35
+ /* Current option text sits on the activated brand fill; use the darker on-fill
36
+ accent so it clears WCAG AA (brand-on-quiet was 3.77:1 over that fill). */
37
+ --current-text-color: var(--kui-color-brand-on-fill);
36
38
  }
37
39
  .kui-select wa-option::part(start) {
38
40
  align-self: center;
package/dist/styles/state-banner.css CHANGED
@@ -52,7 +52,7 @@
52
52
  );
53
53
  --_kui-state-banner-foreground: var(
54
54
  --kui-state-banner-foreground,
55
- var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-quiet))
55
+ var(--kui-state-banner-info-foreground, var(--kui-color-brand-on-fill))
56
56
  );
57
57
  }
58
58
  .kui-state-banner[data-tone="success"] {
package/docs/accessibility.md CHANGED
@@ -6,7 +6,7 @@ These are normative contracts for package components and consuming applications.
6
6
 
7
7
  - All controls have accessible names and visible `:focus-visible` treatment.
8
8
  - Decorative `LucideIcon` output is `aria-hidden`; pass `label` only when the SVG itself conveys meaning.
9
- - `ListItem` uses native button Enter/Space behavior. `selected` maps to `aria-current="page"`; `pressed` maps to `aria-pressed`. Its `trailing` content is dormant and must not contain controls. Its `rootAttributes` slot accepts only application `data-*` metadata and deliberately cannot emit `role="menuitem"` in isolation—a true ARIA menu must own arrow, Home/End, Escape, and focus behavior as one widget.
9
+ - `ListItem` uses native button Enter/Space behavior. `selected` maps to `aria-current="page"`; `pressed` maps to `aria-pressed`. Selected rows keep the normal foreground over their brand-tinted fill so text retains WCAG AA contrast in light and dark themes. Its `trailing` content is dormant and must not contain controls. Its `rootAttributes` slot accepts only application `data-*` metadata and deliberately cannot emit `role="menuitem"` in isolation—a true ARIA menu must own arrow, Home/End, Escape, and focus behavior as one widget.
10
10
  - `ListHeader` owns action naming, disabled state, and disclosure `aria-expanded`. Toggle mode supplies one decorative 18px `DisclosureArrow` when `actionIcon` is omitted; it mirrors `expanded` while the native button's accessible name stays stable. The application must update that controlled state and reveal or hide real content. A valid `count` is visually rendered in an `aria-hidden` neutral pill while the required localized `countLabel` becomes part of the owning heading or disclosure button's accessible name; zero remains a real count. Its narrow `triggerAttributes` slot may describe a native popover or controlled-content relationship with `popoverTarget`, `popoverTargetAction`, `aria-controls`, and `aria-haspopup`; the application owns the target surface and its focus/dismissal behavior.
11
11
  - In any `.kui-pane`, menu rows, `ListHeader` actions, and toolbar groups keep a minimum 44px target in both dimensions. A `ListHeader` fills the available inline width and keeps that action at the logical end, including in RTL. Its action visual defaults to 18px through `--kui-list-header-action-icon-size`; do not reduce the target to the visible icon.
12
12
  - `LoadingSpinner` is either labeled (`role="img"`) or hidden. Its rotation stops for reduced motion.
@@ -25,7 +25,9 @@ the row's item id for application delegation, while the root deliberately has
25
25
  no action or role. `label`, `icon`, and `trailingActionIcon` are dormant visual
26
26
  content and must not contain buttons, links, interactive roles, or other
27
27
  controls. A trailing click, double click, context menu, Enter, or Space
28
- must never activate the primary control. The application owns controlled
28
+ must never activate the primary control. Selected rows keep the normal
29
+ foreground over their brand-tinted fill so text retains WCAG AA contrast in
30
+ light and dark themes. The application owns controlled
29
31
  selection and the lifecycle, focus, and dismissal policy of any related
30
32
  popover or context menu.
31
33
 
package/docs/design/templates/list-action-row/selected-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(53,92,109)" fill-rule="evenodd"/></g><g clip-path="url(#cp1)"><g transform="translate(362 34)" color="rgb(138, 203, 255)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 5 4 4" 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"/></svg></g></g><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(138,203,255)">production.example.com</text></g></g><g clip-path="url(#cp4)"><g transform="translate(37 30)" color="rgb(138, 203, 255)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" 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"/></svg></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(53,92,109)" fill-rule="evenodd"/></g><g clip-path="url(#cp1)"><g transform="translate(362 34)" color="rgb(245, 245, 247)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.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="m15 5 4 4" 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"/></svg></g></g><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">production.example.com</text></g></g><g clip-path="url(#cp4)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" 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="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" 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 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" 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"/></svg></g></g></svg>
package/docs/design/templates/list-action-row/selected.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(214,236,255)"/><g clip-path="url(#ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(166,213,255)" fill-rule="evenodd"/></g><g clip-path="url(#cp1)"><g transform="translate(362 34)" color="rgb(30, 110, 244)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 5 4 4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(30,110,244)">production.example.com</text></g></g><g clip-path="url(#cp4)"><g transform="translate(37 30)" color="rgb(30, 110, 244)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(214,236,255)"/><g clip-path="url(#ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(166,213,255)" fill-rule="evenodd"/></g><g clip-path="url(#cp1)"><g transform="translate(362 34)" color="rgb(29, 29, 31)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.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="m15 5 4 4" 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"/></svg></g></g><g clip-path="url(#cp2)"><g clip-path="url(#ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">production.example.com</text></g></g><g clip-path="url(#cp4)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" 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="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" 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 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" 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"/></svg></g></g></svg>
package/docs/design/templates/list-action-row-dark.svg CHANGED
@@ -3,5 +3,5 @@
3
3
  <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Primary with a trailing action</text>
4
4
  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v0-ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="v0-cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="v0-cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v0-ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v0-cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#v0-ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#v0-cp1)"><g transform="translate(362 34)" color="rgb(245, 245, 247)"><svg data-lucide="trash-2" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M10 11v6" 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="M14 11v6" 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="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" 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 6h18" 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 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" 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"/></svg></g></g><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">staging.example.com</text></g></g><g clip-path="url(#v0-cp4)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" 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="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" 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 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" 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"/></svg></g></g></svg>
5
5
  <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Selected primary</text>
6
- <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v1-ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="v1-cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="v1-cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#v1-ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(53,92,109)" fill-rule="evenodd"/></g><g clip-path="url(#v1-cp1)"><g transform="translate(362 34)" color="rgb(138, 203, 255)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 5 4 4" 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"/></svg></g></g><g clip-path="url(#v1-cp2)"><g clip-path="url(#v1-ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(138,203,255)">production.example.com</text></g></g><g clip-path="url(#v1-cp4)"><g transform="translate(37 30)" color="rgb(138, 203, 255)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" 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"/></svg></g></g></svg>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v1-ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="v1-cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="v1-cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(40,57,66)"/><g clip-path="url(#v1-ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(53,92,109)" fill-rule="evenodd"/></g><g clip-path="url(#v1-cp1)"><g transform="translate(362 34)" color="rgb(245, 245, 247)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.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="m15 5 4 4" 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"/></svg></g></g><g clip-path="url(#v1-cp2)"><g clip-path="url(#v1-ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">production.example.com</text></g></g><g clip-path="url(#v1-cp4)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" 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="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" 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 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" 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"/></svg></g></g></svg>
7
7
  </svg>
package/docs/design/templates/list-action-row.svg CHANGED
@@ -3,5 +3,5 @@
3
3
  <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Primary with a trailing action</text>
4
4
  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v0-ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="v0-cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="v0-cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v0-ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v0-cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><g clip-path="url(#v0-ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgba(0,0,0,0)" fill-rule="evenodd"/></g><g clip-path="url(#v0-cp1)"><g transform="translate(362 34)" color="rgb(29, 29, 31)"><svg data-lucide="trash-2" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M10 11v6" 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="M14 11v6" 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="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" 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 6h18" 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 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" 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"/></svg></g></g><g clip-path="url(#v0-cp2)"><g clip-path="url(#v0-ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">staging.example.com</text></g></g><g clip-path="url(#v0-cp4)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" 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="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" 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 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" 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"/></svg></g></g></svg>
5
5
  <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Selected primary</text>
6
- <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v1-ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="v1-cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="v1-cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(214,236,255)"/><g clip-path="url(#v1-ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(166,213,255)" fill-rule="evenodd"/></g><g clip-path="url(#v1-cp1)"><g transform="translate(362 34)" color="rgb(30, 110, 244)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.5Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m15 5 4 4" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v1-cp2)"><g clip-path="url(#v1-ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(30,110,244)">production.example.com</text></g></g><g clip-path="url(#v1-cp4)"><g transform="translate(37 30)" color="rgb(30, 110, 244)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g></svg>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 420 92" width="420" height="92"><defs><clipPath id="v1-ishc0"><rect x="28" y="20" width="364" height="44" rx="12"/></clipPath><clipPath id="v1-cp1"><rect x="362" y="34" width="16" height="16"/></clipPath><clipPath id="v1-cp2"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-ct3"><rect x="69" y="28" width="271" height="28"/></clipPath><clipPath id="v1-cp4"><rect x="37" y="30" width="24" height="24"/></clipPath></defs><rect x="28" y="20" width="364" height="44" rx="12" fill="rgb(214,236,255)"/><g clip-path="url(#v1-ishc0)"><path d="M24 16h372v52H24zm16 5h340a11 11 0 0 1 11 11v20a11 11 0 0 1-11 11H40a11 11 0 0 1-11-11V32a11 11 0 0 1 11-11" fill="rgb(166,213,255)" fill-rule="evenodd"/></g><g clip-path="url(#v1-cp1)"><g transform="translate(362 34)" color="rgb(29, 29, 31)"><svg data-lucide="pencil" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><path d="M21.2 6.8a1 1 0 0 0-4-4L3.8 16.2l-.5.8L2 21.4a.5.5 0 0 0 .6.6L7 20.7l.8-.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="m15 5 4 4" 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"/></svg></g></g><g clip-path="url(#v1-cp2)"><g clip-path="url(#v1-ct3)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">production.example.com</text></g></g><g clip-path="url(#v1-cp4)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="rocket" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M12 15v5s3-.6 4-2c1-1.6 0-5 0-5" 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="M4.5 16.5c-1.5 1.3-2 5-2 5s3.7-.5 5-2c.7-.8.7-2.1 0-3a2 2 0 0 0-3 0" 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 12a22 22 0 0 1 2-4 13 13 0 0 1 11-6c0 2.7-.8 7.5-6 11a22 22 0 0 1-4 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="M9 12H4s.5-3 2-4c1.6-1 5 0 5 0" 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"/></svg></g></g></svg>
7
7
  </svg>
package/docs/design/templates/list-item/selected-dark.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(138, 203, 255)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(138,203,255)">Billing &amp; plans</text></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Billing &amp; plans</text></g></g></svg>
package/docs/design/templates/list-item/selected.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(30, 110, 244)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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(30, 110, 244)" 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(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(30,110,244)">Billing &amp; plans</text></g></g></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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"/></svg></g></g><g clip-path="url(#cp1)"><g clip-path="url(#ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Billing &amp; plans</text></g></g></svg>
package/docs/design/templates/list-item-dark.svg CHANGED
@@ -3,7 +3,7 @@
3
3
  <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Icon and label</text>
4
4
  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v0-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v0-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v0-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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"/></svg></g></g><g clip-path="url(#v0-cp1)"><g clip-path="url(#v0-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Overview</text></g></g></svg>
5
5
  <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Selected (aria-current)</text>
6
- <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v1-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v1-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v1-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(37 30)" color="rgb(138, 203, 255)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(138, 203, 255)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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"/></svg></g></g><g clip-path="url(#v1-cp1)"><g clip-path="url(#v1-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(138,203,255)">Billing &amp; plans</text></g></g></svg>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v1-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v1-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v1-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(40,57,66)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(53,92,109)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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"/></svg></g></g><g clip-path="url(#v1-cp1)"><g clip-path="url(#v1-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Billing &amp; plans</text></g></g></svg>
7
7
  <text x="16" y="290" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Trailing metadata</text>
8
8
  <svg x="16" y="298" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v2-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v2-cp1"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="v2-ct2"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="v2-ct3"><rect x="313.3" y="33" width="9.7" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g transform="translate(37 30)" color="rgb(245, 245, 247)"><svg data-lucide="bell" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(245, 245, 247)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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(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.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(245, 245, 247)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v2-cp1)"><g clip-path="url(#v2-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">Notifications</text></g></g><text x="313.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(245,245,247)">3</text></svg>
9
9
  <text x="16" y="420" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#aeaeb2">Multiline label (icon aligns to first line)</text>
package/docs/design/templates/list-item.svg CHANGED
@@ -3,7 +3,7 @@
3
3
  <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Icon and label</text>
4
4
  <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v0-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v0-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v0-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="file-text" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><path d="M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2 2 0 0 1 1.7.7l3.6 3.6A2 2 0 0 1 20 8v12a2 2 0 0 1-2 2Z" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(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="M14 2v5a1 1 0 0 0 1 1h5" 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="M10 9H8" 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="M16 13H8" 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="M16 17H8" 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"/></svg></g></g><g clip-path="url(#v0-cp1)"><g clip-path="url(#v0-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Overview</text></g></g></svg>
5
5
  <text x="16" y="160" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Selected (aria-current)</text>
6
- <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v1-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v1-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v1-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(37 30)" color="rgb(30, 110, 244)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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(30, 110, 244)" 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(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v1-cp1)"><g clip-path="url(#v1-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(30,110,244)">Billing &amp; plans</text></g></g></svg>
6
+ <svg x="16" y="168" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v1-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v1-cp1"><rect x="69" y="33" width="246" height="18"/></clipPath><clipPath id="v1-ct2"><rect x="69" y="33" width="246" height="18"/></clipPath></defs><rect x="28" y="20" width="304" height="44" rx="12" fill="rgb(214,236,255)"/><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="settings" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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"/></svg></g></g><g clip-path="url(#v1-cp1)"><g clip-path="url(#v1-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Billing &amp; plans</text></g></g></svg>
7
7
  <text x="16" y="290" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Trailing metadata</text>
8
8
  <svg x="16" y="298" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 380 92" width="380" height="92"><defs><clipPath id="v2-cp0"><rect x="37" y="30" width="24" height="24"/></clipPath><clipPath id="v2-cp1"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="v2-ct2"><rect x="69" y="33" width="236.3" height="18"/></clipPath><clipPath id="v2-ct3"><rect x="313.3" y="33" width="9.7" height="18"/></clipPath></defs><rect x="28.5" y="20.5" width="303" height="43" rx="11.5" fill="none" stroke="rgba(0,0,0,0)" stroke-width="1"/><g clip-path="url(#v2-cp0)"><g transform="translate(37 30)" color="rgb(29, 29, 31)"><svg data-lucide="bell" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(29, 29, 31)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="24" height="24"><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(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.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(29, 29, 31)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><g clip-path="url(#v2-cp1)"><g clip-path="url(#v2-ct2)"><text x="69" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">Notifications</text></g></g><text x="313.28" y="48" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="16" fill="rgb(29,29,31)">3</text></svg>
9
9
  <text x="16" y="420" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Multiline label (icon aligns to first line)</text>
package/docs/design/templates/state-banner/info.svg CHANGED
@@ -1 +1 @@
1
- <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="ct1"><rect x="61" y="29" width="368.6" height="15"/></clipPath><clipPath id="cp2"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="ct3"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="ct4"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,245,255)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 35.4)" color="rgb(30, 110, 244)"><svg data-lucide="circle-alert" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(30,110,244)">Draft not published</text><g opacity="0.78" clip-path="url(#cp2)" style="isolation:isolate"><g clip-path="url(#ct3)"><text x="61" y="55.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(30,110,244)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(30,110,244)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(30,110,244)">Publish</text></svg>
1
+ <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="ct1"><rect x="61" y="29" width="368.6" height="15"/></clipPath><clipPath id="cp2"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="ct3"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="ct4"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,245,255)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#cp0)"><g transform="translate(37 35.4)" color="rgb(26, 93, 207)"><svg data-lucide="circle-alert" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(26,93,207)">Draft not published</text><g opacity="0.78" clip-path="url(#cp2)" style="isolation:isolate"><g clip-path="url(#ct3)"><text x="61" y="55.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(26,93,207)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(26,93,207)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(26,93,207)">Publish</text></svg>
package/docs/design/templates/state-banner.svg CHANGED
@@ -1,7 +1,7 @@
1
1
  <svg xmlns="http://www.w3.org/2000/svg" width="592" height="632" viewBox="0 0 592 632">
2
2
  <rect width="592" height="632" fill="#ffffff"/>
3
3
  <text x="16" y="30" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Info</text>
4
- <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="v0-cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="v0-ct1"><rect x="61" y="29" width="368.6" height="15"/></clipPath><clipPath id="v0-cp2"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="v0-ct3"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="v0-ct4"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,245,255)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g transform="translate(37 35.4)" color="rgb(30, 110, 244)"><svg data-lucide="circle-alert" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(30, 110, 244)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(30,110,244)">Draft not published</text><g opacity="0.78" clip-path="url(#v0-cp2)" style="isolation:isolate"><g clip-path="url(#v0-ct3)"><text x="61" y="55.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(30,110,244)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(30,110,244)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(30,110,244)">Publish</text></svg>
4
+ <svg x="16" y="38" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="v0-cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="v0-ct1"><rect x="61" y="29" width="368.6" height="15"/></clipPath><clipPath id="v0-cp2"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="v0-ct3"><rect x="61" y="44.8" width="368.6" height="13"/></clipPath><clipPath id="v0-ct4"><rect x="437.6" y="29" width="65.4" height="28.8"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(235,245,255)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(166,213,255)" stroke-width="1"/><g clip-path="url(#v0-cp0)"><g transform="translate(37 35.4)" color="rgb(26, 93, 207)"><svg data-lucide="circle-alert" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12" y1="8" y2="12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><line x1="12" x2="12.01" y1="16" y2="16" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(26, 93, 207)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(26,93,207)">Draft not published</text><g opacity="0.78" clip-path="url(#v0-cp2)" style="isolation:isolate"><g clip-path="url(#v0-ct3)"><text x="61" y="55.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(26,93,207)">Changes are saved but only visible to your team.</text></g></g><rect x="437.6" y="29" width="65.4" height="28.8" rx="14.4" fill="rgba(255,255,255,0.52)"/><rect x="438.5" y="29.5" width="64" height="28" rx="13.9" fill="none" stroke="rgb(26,93,207)" stroke-width="1"/><text x="449.83" y="47.89" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" font-weight="650" fill="rgb(26,93,207)">Publish</text></svg>
5
5
  <text x="16" y="184" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Success</text>
6
6
  <svg x="16" y="192" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 560 116" width="560" height="116"><defs><clipPath id="v1-cp0"><rect x="37" y="35" width="16" height="16.4"/></clipPath><clipPath id="v1-ct1"><rect x="61" y="29" width="434" height="15"/></clipPath><clipPath id="v1-cp2"><rect x="61" y="44.8" width="434" height="13"/></clipPath><clipPath id="v1-ct3"><rect x="61" y="44.8" width="434" height="13"/></clipPath></defs><rect x="28" y="20" width="484" height="46.8" rx="12" fill="rgb(227,247,232)"/><rect x="28.5" y="20.5" width="483" height="46" rx="11.5" fill="none" stroke="rgb(154,227,172)" stroke-width="1"/><g clip-path="url(#v1-cp0)"><g transform="translate(37 35.4)" color="rgb(0, 137, 50)"><svg data-lucide="circle-check" aria-hidden="true" viewBox="0 0 24 24" fill="none" stroke="rgb(0, 137, 50)" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" font-family="system-ui, -apple-system, sans-serif" style="overflow:hidden" width="16" height="16"><circle cx="12" cy="12" r="10" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 137, 50)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/><path d="m16 9-5.5 5.5L8 12" style="marker:none;vector-effect:none;color-interpolation:srgb" fill="none" stroke="rgb(0, 137, 50)" stroke-width="2px" stroke-dasharray="none" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="1" fill-opacity="1" opacity="1"/></svg></g></g><text x="61" y="41" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="12" font-weight="700" fill="rgb(0,137,50)">Deployment complete</text><g opacity="0.78" clip-path="url(#v1-cp2)" style="isolation:isolate"><g clip-path="url(#v1-ct3)"><text x="61" y="55.8" font-family="system-ui, &quot;-apple-system&quot;, sans-serif" font-size="11" fill="rgb(0,137,50)">production.example.com is serving the new build.</text></g></g></svg>
7
7
  <text x="16" y="338" font-family="system-ui, sans-serif" font-size="12" font-weight="600" fill="#6e6e73">Warning</text>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kerfjs/ui",
3
- "version": "5.0.0-beta.12",
3
+ "version": "5.0.0-beta.14",
4
4
  "description": "Accessible, composable UI primitives for kerf applications.",
5
5
  "type": "module",
6
6
  "license": "MIT",