@kerfjs/ui 5.0.0-beta.12 → 5.0.0-beta.13
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.
- package/ai/component-catalog.json +0 -2
- package/ai/public-api-signatures-v1.md +1 -1
- package/ai/webawesome-jsx-signatures-v1.md +1 -1
- package/dist/styles/list-action-row.css +1 -1
- package/dist/styles/list-item.css +1 -1
- package/docs/accessibility.md +4 -2
- package/docs/design/templates/list-action-row/selected-dark.svg +1 -1
- package/docs/design/templates/list-action-row/selected.svg +1 -1
- package/docs/design/templates/list-action-row-dark.svg +1 -1
- package/docs/design/templates/list-action-row.svg +1 -1
- package/docs/design/templates/list-item/selected-dark.svg +1 -1
- package/docs/design/templates/list-item/selected.svg +1 -1
- package/docs/design/templates/list-item-dark.svg +1 -1
- package/docs/design/templates/list-item.svg +1 -1
- package/package.json +1 -1
|
@@ -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",
|
|
@@ -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.
|
|
3
|
+
Generated from emitted declarations for `@kerfjs/ui@5.0.0-beta.13` and `kerfjs@5.0.0-beta.13`. 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
|
|
|
@@ -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.
|
|
3
|
+
Generated from the emitted `@kerfjs/ui@5.0.0-beta.13` 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';
|
|
@@ -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-
|
|
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(
|
|
@@ -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-
|
|
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/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.
|
|
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
|
|
|
@@ -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(
|
|
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, "-apple-system", 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>
|
|
@@ -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(
|
|
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, "-apple-system", 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>
|
|
@@ -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, "-apple-system", 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(
|
|
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, "-apple-system", 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>
|
|
@@ -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, "-apple-system", 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(
|
|
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, "-apple-system", 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>
|
|
@@ -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(
|
|
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, "-apple-system", sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Billing & plans</text></g></g></svg>
|
|
@@ -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(
|
|
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, "-apple-system", sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Billing & plans</text></g></g></svg>
|
|
@@ -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, "-apple-system", 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(
|
|
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, "-apple-system", sans-serif" font-size="16" font-weight="650" fill="rgb(245,245,247)">Billing & 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, "-apple-system", sans-serif" font-size="16" fill="rgb(245,245,247)">Notifications</text></g></g><text x="313.28" y="48" font-family="system-ui, "-apple-system", 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>
|
|
@@ -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, "-apple-system", 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(
|
|
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, "-apple-system", sans-serif" font-size="16" font-weight="650" fill="rgb(29,29,31)">Billing & 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, "-apple-system", sans-serif" font-size="16" fill="rgb(29,29,31)">Notifications</text></g></g><text x="313.28" y="48" font-family="system-ui, "-apple-system", 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>
|