@cl-light-ds/ui 0.3.0 → 0.5.0

package/src/components/command-search/CommandSearchItem.astro

@@ -0,0 +1,64 @@
+---
+/**
+ * One result row in a `CommandSearch`: optional media (an icon or avatar), the
+ * label, and optional muted text on the right (`meta` slot, e.g. "in Acme
+ * Finance"). Highlighted while active (arrow keys or hover); Enter or a click
+ * chooses it.
+ *
+ * Searching matches `label` and `keywords` (case-insensitive, anywhere in the
+ * text), so give every item a `label`. `value` identifies it in
+ * `command-search:select`; it defaults to the label, so pass one when two items
+ * can share a name.
+ */
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import type { HTMLAttributes } from "astro/types";
+
+import { commandSearchItemClasses, commandSearchLabelClasses, commandSearchMetaClasses } from "./classes";
+
+interface Props extends HTMLAttributes<"div"> {
+  /** The text searched and shown (the default slot can replace what is shown). */
+  label: string;
+  /** Unique value, sent with `command-search:select`. Defaults to `label`. */
+  value?: string;
+  /** More terms that find this item. */
+  keywords?: string[];
+  /** Navigate here when chosen. */
+  href?: string;
+  disabled?: boolean;
+  class?: string;
+}
+
+const {
+  label,
+  value = label,
+  keywords = [],
+  href,
+  disabled = false,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasMedia = Astro.slots.has("media");
+const hasMeta = Astro.slots.has("meta");
+---
+
+<div
+  data-slot="command-item"
+  data-value={value}
+  data-label={label}
+  data-keywords={keywords.length ? keywords.join(",") : undefined}
+  data-href={href}
+  data-disabled={disabled ? "true" : undefined}
+  class={cn(commandSearchItemClasses, className)}
+  {...rest}
+>
+  {hasMedia && <slot name="media" />}
+  <span class={commandSearchLabelClasses}><slot>{label}</slot></span>
+  {
+    hasMeta && (
+      <span class={commandSearchMetaClasses}>
+        <slot name="meta" />
+      </span>
+    )
+  }
+</div>

package/src/components/command-search/classes.ts

@@ -0,0 +1,18 @@
+/**
+ * Class strings shared by the Astro parts and the results the script renders
+ * from `setCommandSearchResults()`, so both look the same.
+ */
+export const commandSearchGroupClasses = "flex flex-col gap-1";
+
+export const commandSearchHeadingClasses =
+  "text-muted-foreground flex items-baseline gap-2 px-2 pt-1 text-xs font-semibold tracking-wide uppercase";
+
+export const commandSearchCountClasses = "font-normal tabular-nums";
+
+export const commandSearchItemClasses =
+  "hover:bg-background-hover data-[selected=true]:bg-background-hover aria-disabled:pointer-events-none aria-disabled:opacity-50 flex cursor-pointer items-center gap-3 rounded-md px-2 py-2 text-sm transition-colors outline-none";
+
+export const commandSearchLabelClasses = "min-w-0 flex-1 truncate";
+
+export const commandSearchMetaClasses =
+  "text-muted-foreground flex max-w-56 min-w-0 shrink-0 items-center gap-1.5 truncate text-xs";

package/src/components/command-search/index.ts

@@ -0,0 +1,12 @@
+export { default as CommandSearch } from "./CommandSearch.astro";
+export { default as CommandSearchGroup } from "./CommandSearchGroup.astro";
+export { default as CommandSearchItem } from "./CommandSearchItem.astro";
+export {
+  openCommandSearch,
+  closeCommandSearch,
+  setCommandSearchResults,
+} from "../../lib/command-search";
+export type {
+  CommandSearchResultGroup,
+  CommandSearchResultItem,
+} from "../../lib/command-search";

package/src/components/command-search/nothing-matches.svg

@@ -0,0 +1,42 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="184" height="124" viewBox="-12 -12 184 124" fill="none" xmlns:c2pa="http://c2pa.org/manifest"><metadata><c2pa:manifest>AAAWgmp1bWIAAAAeanVtZGMycGEAEQAQgAAAqgA4m3EDYzJwYQAAABZcanVtYgAAAEdqdW1kYzJtYQARABCAAACqADibcQN1cm46YzJwYTplODIyOThlNC1jNGQ2LTQwYTQtOGU3Ny1hYWY2OTcxYjM2OTIAAAADl2p1bWIAAAApanVtZGMyYXMAEQAQgAAAqgA4m3EDYzJwYS5hc3NlcnRpb25zAAAAALxqdW1iAAAARGp1bWRjYm9yABEAEIAAAKoAOJtxE2MycGEuaW5ncmVkaWVudC52MwAAAAAYYzJzaKqugmJMsqYC8viyOBbRbhIAAABwY2JvcqNpZGM6Zm9ybWF0bWltYWdlL3N2Zyt4bWxqaW5zdGFuY2VJRHgseG1wOmlpZDo0MWIxMTE5NC02ZTQ0LTRlMzUtOTU5MS0xYjY1M2ViNWUyNTJscmVsYXRpb25zaGlwaHBhcmVudE9mAAAB4mp1bWIAAABBanVtZGNib3IAEQAQgAAAqgA4m3ETYzJwYS5hY3Rpb25zLnYyAAAAABhjMnNouXZVAYt+XHRTFpV6GfvZOgAAAZljYm9yomdhY3Rpb25zgqJmYWN0aW9ua2MycGEub3BlbmVkanBhcmFtZXRlcnOha2luZ3JlZGllbnRzgaJjdXJseC1zZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmluZ3JlZGllbnQudjNkaGFzaFggVgKr/4T9xsUXed1EvB+dGw4hkEVHK5LpA88frFSdO46kZmFjdGlvbngdY29tLmFudGhyb3BpYy5jbGF1ZGUucHJvdmlkZWRqcGFyYW1ldGVyc6F4H2NvbS5hbnRocm9waWMub3JpZ2luLWNvbmZpZGVuY2VndW5rbm93bmtkZXNjcmlwdGlvbnhmQ2xhdWRlIHByb3ZpZGVkIHRoaXMgZmlsZSBhdCB0aGUgcmVxdWVzdCBvZiBhIHVzZXIgYW5kIG1heSBoYXZlIGNyZWF0ZWQgb3IgbW9kaWZpZWQgdGhlIGZpbGUgY29udGVudHMubXNvZnR3YXJlQWdlbnShZG5hbWVmQ2xhdWRlcmFsbEFjdGlvbnNJbmNsdWRlZPUAAADIanVtYgAAAEBqdW1kY2JvcgARABCAAACqADibcRNjMnBhLmhhc2guZGF0YQAAAAAYYzJzaNb7nH0x+zMDR8g/a81tYxUAAACAY2JvcqVjYWxnZnNoYTI1NmNwYWRNAAAAAAAAAAAAAAAAAGRoYXNoWCB8IybuiUW/D1GR1OoeQ940FnLg0RBFnD1vqhoG+GGrd2RuYW1lbmp1bWJmIG1hbmlmZXN0amV4Y2x1c2lvbnOBomVzdGFydBimZmxlbmd0aBkeBAAAAj5qdW1iAAAAJ2p1bWRjMmNsABEAEIAAAKoAOJtxA2MycGEuY2xhaW0udjIAAAACD2Nib3KlY2FsZ2ZzaGEyNTZpc2lnbmF0dXJleE1zZWxmI2p1bWJmPS9jMnBhL3VybjpjMnBhOmU4MjI5OGU0LWM0ZDYtNDBhNC04ZTc3LWFhZjY5NzFiMzY5Mi9jMnBhLnNpZ25hdHVyZWppbnN0YW5jZUlEeCx4bXA6aWlkOjExNmJiZmVjLWQxNjEtNDM1YS1iNzkxLTM1YjRlNTM4MzljYXJjcmVhdGVkX2Fzc2VydGlvbnODomN1cmx4LXNlbGYjanVtYmY9YzJwYS5hc3NlcnRpb25zL2MycGEuaW5ncmVkaWVudC52M2RoYXNoWCBWAqv/hP3GxRd53US8H50bDiGQRUcrkukDzx+sVJ07jqJjdXJseCpzZWxmI2p1bWJmPWMycGEuYXNzZXJ0aW9ucy9jMnBhLmFjdGlvbnMudjJkaGFzaFggWNJwmATXeq3w/IjLwhFkIQQ1fvC8gXIQ/CRzxbJAz4aiY3VybHgpc2VsZiNqdW1iZj1jMnBhLmFzc2VydGlvbnMvYzJwYS5oYXNoLmRhdGFkaGFzaFgg3x7o2h9I/3508c0ufWUiNo2ld5HoEd8e5vBDPLAJa0t0Y2xhaW1fZ2VuZXJhdG9yX2luZm+jZG5hbWVvQW50aHJvcGljIEZpbGVzZ3ZlcnNpb25lMS4wLjBrc3BlY1ZlcnNpb25lMi40LjAAABA4anVtYgAAAChqdW1kYzJjcwARABCAAACqADibcQNjMnBhLnNpZ25hdHVyZQAAABAIY2JvctKEWQISogEmGCFZAgowggIGMIIBjaADAgECAhRA5aAK7sI50L64g/oGQgU9Z1UTADAKBggqhkjOPQQDAzBJMRcwFQYDVQQKEw5BbnRocm9waWMsIFBCQzEuMCwGA1UEAxMlQW50aHJvcGljIENvbnRlbnQgQ3JlZGVudGlhbHMgUm9vdCBDQTAeFw0yNjA4MDcxODQzNTZaFw0yODA4MDYxOTQzNTZaMEQxFzAVBgNVBAoTDkFudGhyb3BpYywgUEJDMSkwJwYDVQQDEyBBbnRocm9waWMgQ2xhdWRlIENvbnRlbnQgU2lnbmluZzBZMBMGByqGSM49AgEGCCqGSM49AwEHA0IABJh6CmvLUBgFFNU0vUKlOVtE6djd17L5SuwX0LemFisBM3dkd/3cyjxFA3Qo5S46fX0/ihY0VZ7mfb9KF703t5OjWDBWMA4GA1UdDwEB/wQEAwIHgDAVBgNVHSUEDjAMBgorBgEEAYPoXgIBMAwGA1UdEwEB/wQCMAAwHwYDVR0jBBgwFoAUzlHiBIFOZFsj+OPEz5o+nMHXXMIwCgYIKoZIzj0EAwMDZwAwZAIwMXMdFJ4BetLLVY7ORuE9noqbbAZOZn/aArXyTwFAZfKrPzxF2vPoJNf1+UCdg1XGAjBwX1zd9WGqYkqmL5SFqw1QySjr1zJfpJM9+1rdDwSPLMOPOjKuiXjoU/pUUeG9RwmhY3BhZFkNngAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAPZYQBQ6fFVaIySaTkZAvfiIN0Vu6miBN8tscscJnyxn5eEUXN2x49nEHZ+/F/hQydOi3j5/kryWAn8JzV93uuuUbDg=</c2pa:manifest></metadata>
+  <defs>
+    <filter id="sBack" x="-30%" y="-30%" width="160%" height="160%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id="sFront" x="-40%" y="-30%" width="180%" height="170%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id="sLens" x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="4" stdDeviation="4" flood-color="#3785E0" flood-opacity="0.28"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="80" cy="50" r="44" stroke="#F5F9FE" stroke-width="12"></circle>
+  <circle cx="80" cy="50" r="24" stroke="#EBF3FC" stroke-width="10"></circle>
+  <g transform="rotate(-12 44 52)">
+    <g filter="url(#sBack)"><rect x="22" y="26" width="44" height="52" rx="8" fill="#FFFFFF"></rect></g>
+    <rect x="22.5" y="26.5" width="43" height="51" rx="7.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+    <rect x="28" y="32" width="14" height="14" rx="4" fill="#D7E7F9"></rect>
+    <rect x="28" y="54" width="24" height="4" rx="2" fill="#E4E4E7"></rect>
+    <rect x="28" y="62" width="16" height="4" rx="2" fill="#F4F4F5"></rect>
+  </g>
+  <g transform="rotate(12 116 52)">
+    <g filter="url(#sBack)"><rect x="94" y="26" width="44" height="52" rx="8" fill="#FFFFFF"></rect></g>
+    <rect x="94.5" y="26.5" width="43" height="51" rx="7.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+    <rect x="100" y="34" width="28" height="4" rx="2" fill="#E4E4E7"></rect>
+    <rect x="100" y="42" width="32" height="4" rx="2" fill="#F4F4F5"></rect>
+    <rect x="100" y="50" width="22" height="4" rx="2" fill="#F4F4F5"></rect>
+    <rect x="100" y="58" width="28" height="4" rx="2" fill="#F4F4F5"></rect>
+  </g>
+  <g filter="url(#sFront)"><rect x="56" y="18" width="48" height="58" rx="9" fill="#FFFFFF"></rect></g>
+  <rect x="56.5" y="18.5" width="47" height="57" rx="8.5" stroke="#09090B" stroke-opacity="0.06"></rect>
+  <rect x="62" y="24" width="36" height="22" rx="5" fill="#EBF3FC"></rect>
+  <path d="M77 30.5 L84.5 35 L77 39.5 Z" fill="#87B6EC" stroke="#87B6EC" stroke-width="1.5" stroke-linejoin="round"></path>
+  <rect x="62" y="53" width="28" height="4" rx="2" fill="#E4E4E7"></rect>
+  <rect x="62" y="61" width="18" height="4" rx="2" fill="#F4F4F5"></rect>
+  <g filter="url(#sLens)">
+    <line x1="113.5" y1="79.5" x2="122" y2="88" stroke="#1F5FAA" stroke-width="6" stroke-linecap="round"></line>
+    <circle cx="104" cy="70" r="13" fill="#FFFFFF" stroke="#3785E0" stroke-width="4"></circle>
+  </g>
+  <line x1="100" y1="66" x2="108" y2="74" stroke="#87B6EC" stroke-width="2.2" stroke-linecap="round"></line>
+  <line x1="108" y1="66" x2="100" y2="74" stroke="#87B6EC" stroke-width="2.2" stroke-linecap="round"></line>
+</svg>

package/src/components/dialog/CHANGELOG.md

@@ -2,6 +2,19 @@
 
 All notable changes to the `Dialog` component family (`Dialog`, `DialogTrigger`, `DialogContent`, `DialogOverlay`, `DialogHeader`, `DialogFooter`, `DialogTitle`, `DialogDescription`, `DialogClose`) are documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C9, C16; gap G15)
+
+### `DialogClose`
+
+- **`asChild` (C9):** `<DialogClose asChild><Button variant="outline">Cancel</Button></DialogClose>` closes the dialog with your own button. The wrapper is `display: contents`. Without it, wrapping a Button nested a button in a button.
+- **✕ hover (C16):** `hover:bg-background-button-hover` (zinc-200). The ghost hover (zinc-100) didn't show on light grey surfaces.
+
+### Storybook
+
+- "Cancel with DialogClose asChild" preview.
+
+
 ## Earlier (commit `c3cec7d`, undocumented at the time)
 
 - `DialogContent`: `rounded-xl` → `rounded-lg` (Figma binds 8px radius).

package/src/components/dialog/DialogClose.astro

@@ -5,19 +5,33 @@ import Button from "../button/Button.astro";
 
 interface Props extends HTMLAttributes<"button"> {
   class?: string;
+  /**
+   * Radix-like: render a wrapper so your own element closes the dialog, e.g. a
+   * Cancel `<Button>`. The wrapper is `display: contents`, so the child lays out
+   * as if it were placed directly.
+   */
+  asChild?: boolean;
 }
 
-const { class: className = "", ...rest } = Astro.props as Props;
+const { class: className = "", asChild = false, ...rest } = Astro.props as Props;
 ---
 
-<Button
-  {...rest}
-  data-slot="dialog-close"
-  data-dialog-close
-  variant="ghost"
-  size="icon-sm"
-  class={cn("absolute top-2 right-2", className)}
->
-  <slot />
-  {!Astro.slots.has("default") && <span class="sr-only">Close</span>}
-</Button>
+{
+  asChild ? (
+    <div data-slot="dialog-close" data-dialog-close data-as-child class={cn("contents", className)}>
+      <slot />
+    </div>
+  ) : (
+    <Button
+      {...rest}
+      data-slot="dialog-close"
+      data-dialog-close
+      variant="ghost"
+      size="icon-sm"
+      class={cn("absolute top-2 right-2 hover:bg-background-button-hover", className)}
+    >
+      <slot />
+      {!Astro.slots.has("default") && <span class="sr-only">Close</span>}
+    </Button>
+  )
+}

package/src/components/dropdown-menu/CHANGELOG.md

@@ -2,6 +2,13 @@
 
 All notable changes to the `DropdownMenu` component will be documented in this file.
 
+## Date 15th Oct 2026
+## Workspace selection handover (C17, gap G7)
+
+### States
+
+- `destructive` item hover is now `bg-callout-error` (`--callout-background-error`, Figma Red/50), was the neutral `background-hover`. The workspace-selection screen overrode it with `destructive/10`, which this replaces. Dark mode keeps `destructive/20`.
+
 ## Date 10th Sep 2026
 ## Figma alignment (node 2329-6521, prop table 7392-10142)
 

package/src/components/dropdown-menu/dropdown-menu-item-variants.ts

@@ -11,7 +11,7 @@ export const itemVariants = cva(
       variant: {
         default: "p-2 text-xs font-semibold text-foreground hover:bg-background-hover hover:text-foreground",
         destructive:
-          "p-2 text-xs font-semibold text-destructive hover:bg-background-hover hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:text-destructive",
+          "p-2 text-xs font-semibold text-destructive hover:bg-callout-error hover:text-destructive dark:hover:bg-destructive/20 [&_svg]:text-destructive",
         category: "pointer-events-none gap-1 pt-1 pr-1 pb-0 pl-1 text-xs font-medium text-muted-foreground",
       },
     },

package/src/components/empty-state/CHANGELOG.md

@@ -0,0 +1,18 @@
+# Changelog
+
+All notable changes to the `EmptyState` component will be documented in this file.
+
+## Date 15th Oct 2026
+## Workspace selection handover (N15)
+
+### Added
+
+- `EmptyState`: illustration (or icon), title, text and an optional action, centred.
+  - `size="page"`: 280×200 illustrations, 18px semibold title (`h2`), 14px text, 16px gaps, `py-12`.
+  - `size="menu"`: 144×104 / 184×124 illustrations, 14px medium title (`p`), 12px text, 8px gaps, `py-10`.
+  - `variant="panel"`: on a white (`bg-background`) dashed, rounded panel, for card grids (D188, D202). `plain` (default) has no frame, e.g. inside `TableEmpty` or a popover.
+  - `illustration`: built-in name; `icon`: a Lucide component in a 48px muted circle (the reference's "no favourites" state); `illustration` slot for custom artwork.
+  - `title` / `description` props or slots, `titleAs` to change the heading element, `action` slot for buttons. Other attributes pass through (e.g. `role="alert"` for a load error).
+- Illustrations (`illustrations/`), from the designer's handover SVGs: `empty`, `no-results`, `error` (280×200), `all-caught-up` (144×104), `nothing-matches` (184×124). Converted to inline Astro components so their colours are design tokens (`background`, `foreground`, `muted`, `border`, `primary`, `primary-50/100/300/700`, `destructive`) and follow the theme; the C2PA metadata is stripped and filter ids are unique per instance. Exceptions without a token: two neutral greys (`zinc-400`, `zinc-300`, via Tailwind's variables with hex fallbacks), the lightest ring (a mix of `primary-50` and `background`), and the drop shadows' `#051729` (the same colour as `shadow-card-light`).
+- `emptyStateIllustrations`, `EMPTY_STATE_ILLUSTRATIONS`, `EmptyStateIllustrationName` exported.
+- Storybook: "Empty State" under Feedback.

package/src/components/empty-state/EmptyState.astro

@@ -0,0 +1,157 @@
+---
+/**
+ * @component EmptyState
+ * @title Empty State
+ * @description A message for when there is nothing to show, or something failed: an illustration, a title, a line of text and an optional action. Page and menu sizes, optionally on a white dashed panel.
+ *
+ * @preview
+ *
+ * <EmptyState
+ *   illustration="empty"
+ *   title="You're not in any workspaces yet"
+ *   description="Create one to get started, or ask a colleague to invite you to theirs."
+ *   variant="panel"
+ * >
+ *   <Button slot="action">New workspace</Button>
+ * </EmptyState>
+ *
+ * @usage
+ *
+ * ```astro nocollapse
+ * ---
+ * import { EmptyState } from '@cl-light-ds/ui/components/empty-state';
+ * import { Button } from '@cl-light-ds/ui/components/button';
+ * ---
+ *
+ * <EmptyState illustration="no-results" title="No results for “acme”" description="Check the spelling, or try a shorter name.">
+ *   <Button slot="action" variant="outline">Clear search</Button>
+ * </EmptyState>
+ *
+ * <EmptyState size="menu" illustration="all-caught-up" title="You're all caught up" description="New notifications show up here." />
+ * ```
+ *
+ * - Built-in illustrations (`illustration`): `empty`, `no-results`, `error`
+ *   (280×200, for pages), `all-caught-up` (144×104) and `nothing-matches`
+ *   (184×124, for menus). Drawn with design tokens, so they follow the theme.
+ * - Or an `icon` (a Lucide component) in a 48px muted circle, or your own
+ *   artwork in the `illustration` slot.
+ * - For a failure that appears after an action, add `role="alert"` so it is
+ *   announced; for results that change as you type, `role="status"`.
+ */
+
+import type { HTMLAttributes, HTMLTag } from "astro/types";
+import type { AstroComponent } from "@lucide/astro";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "@cl-light-ds/ui/lib/utils";
+import { emptyStateIllustrations, type EmptyStateIllustrationName } from "./illustrations";
+
+export const emptyStateVariants = cva("flex flex-col items-center text-center", {
+  variants: {
+    size: {
+      page: "gap-4 px-6 py-12",
+      menu: "gap-2 px-6 py-10",
+    },
+    variant: {
+      plain: "",
+      panel: "rounded-lg border border-dashed bg-background",
+    },
+  },
+  defaultVariants: {
+    size: "page",
+    variant: "plain",
+  },
+});
+
+interface Props extends VariantProps<typeof emptyStateVariants>, Omit<HTMLAttributes<"div">, "class" | "title"> {
+  /** A built-in illustration. */
+  illustration?: EmptyStateIllustrationName;
+  /** Or a Lucide icon in a 48px muted circle (ignored when there is an illustration). */
+  icon?: AstroComponent;
+  /** The title. Or the `title` slot. */
+  title?: string;
+  /** The text under the title. Or the `description` slot. */
+  description?: string;
+  /** Element for the title: `h2` on pages, `p` in menus by default. */
+  titleAs?: HTMLTag;
+  class?: string;
+}
+
+const {
+  illustration,
+  icon,
+  title,
+  description,
+  size = "page",
+  variant = "plain",
+  titleAs,
+  class: className = "",
+  ...rest
+} = Astro.props as Props;
+
+const hasIllustrationSlot = Astro.slots.has("illustration");
+const hasTitleSlot = Astro.slots.has("title");
+const hasDescriptionSlot = Astro.slots.has("description");
+const hasAction = Astro.slots.has("action");
+
+const art = illustration ? emptyStateIllustrations[illustration] : undefined;
+const Illustration = art?.component;
+const Icon = icon;
+const TitleTag = titleAs ?? (size === "menu" ? "p" : "h2");
+const isMenu = size === "menu";
+---
+
+<div
+  {...rest}
+  data-slot="empty-state"
+  data-size={size}
+  data-variant={variant}
+  class={cn(emptyStateVariants({ size, variant }), className)}
+>
+  {
+    hasIllustrationSlot ? (
+      <div data-slot="empty-state-illustration" class="flex justify-center">
+        <slot name="illustration" />
+      </div>
+    ) : Illustration && art ? (
+      <Illustration data-slot="empty-state-illustration" class={cn("max-w-full shrink-0", art.pull)} />
+    ) : (
+      Icon && (
+        <span
+          data-slot="empty-state-icon"
+          class="flex size-12 items-center justify-center rounded-full bg-muted text-muted-foreground"
+          aria-hidden="true"
+        >
+          <Icon class="size-6" />
+        </span>
+      )
+    )
+  }
+
+  <div class={cn("flex flex-col", isMenu ? "max-w-xs gap-2" : "max-w-md gap-1")}>
+    {
+      (hasTitleSlot || title) && (
+        <TitleTag
+          data-slot="empty-state-title"
+          class={cn("text-foreground", isMenu ? "text-sm font-medium" : "text-lg font-semibold")}
+        >
+          {hasTitleSlot ? <slot name="title" /> : title}
+        </TitleTag>
+      )
+    }
+    {
+      (hasDescriptionSlot || description) && (
+        <p data-slot="empty-state-description" class={cn("text-muted-foreground", isMenu ? "text-xs" : "text-sm")}>
+          {hasDescriptionSlot ? <slot name="description" /> : description}
+        </p>
+      )
+    }
+  </div>
+
+  {
+    hasAction && (
+      <div data-slot="empty-state-action" class="flex flex-wrap items-center justify-center gap-2">
+        <slot name="action" />
+      </div>
+    )
+  }
+</div>

package/src/components/empty-state/illustrations/AllCaughtUp.astro

@@ -0,0 +1,52 @@
+---
+/**
+ * Illustration "all-caught-up" (144×104, with its own padding inside the viewBox).
+ * The designer's artwork; colours mapped to design tokens so it follows the theme.
+ * Decorative. Generated from the workspace selection handover assets (N15).
+ */
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"svg">, "width" | "height">;
+
+const props = Astro.props as Props;
+// Unique ids per instance, so several illustrations on one page don't share filters.
+const uid = `es-all-caught-up-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="144"
+  height="104"
+  viewBox="-12 -12 144 104"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+  {...props}
+>
+  <defs>
+    <filter id={`${uid}-sBack`} x="-30%" y="-40%" width="160%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="1.5" stdDeviation="2" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sFront`} x="-40%" y="-40%" width="180%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="5" stdDeviation="6" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sCheck`} x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="3" stdDeviation="3" flood-opacity="0.32" style="flood-color:var(--primary)"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="60" cy="40" r="35" stroke-width="10" style="stroke:color-mix(in oklab, var(--primary-50) 50%, var(--background))"></circle>
+  <circle cx="60" cy="40" r="19" stroke-width="8" style="stroke:var(--primary-50)"></circle>
+  <g filter={`url(#${uid}-sBack)`}><rect x="22" y="12" width="76" height="18" rx="6" style="fill:var(--background)"></rect></g>
+  <rect x="22.5" y="12.5" width="75" height="17" rx="5.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  <circle cx="31" cy="21" r="4" style="fill:var(--muted)"></circle>
+  <rect x="39" y="19" width="30" height="4" rx="2" style="fill:var(--muted)"></rect>
+  <g filter={`url(#${uid}-sFront)`}><rect x="16" y="34" width="88" height="24" rx="7" style="fill:var(--background)"></rect></g>
+  <rect x="16.5" y="34.5" width="87" height="23" rx="6.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  <circle cx="28" cy="46" r="6" style="fill:var(--primary-50)"></circle>
+  <path d="M25.5 45.5 a2.5 2.5 0 0 1 5 0 c0 2.2 1 3 1 3 h-7 s1 -0.8 1 -3 Z M27.2 50.2 a1 1 0 0 0 1.6 0" stroke-width="1.1" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--primary)"></path>
+  <rect x="39" y="41" width="40" height="4" rx="2" style="fill:var(--border)"></rect>
+  <rect x="39" y="48.5" width="26" height="3.5" rx="1.75" style="fill:var(--muted)"></rect>
+  <g filter={`url(#${uid}-sCheck)`}><circle cx="100" cy="58" r="11" style="fill:var(--primary)"></circle></g>
+  <circle cx="100" cy="58" r="11" stroke-width="2.5" style="stroke:var(--background)"></circle>
+  <path d="M95.5 58.2 l3 3 l6 -6" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--background)"></path>
+</svg>

package/src/components/empty-state/illustrations/EmptyWorkspaces.astro

@@ -0,0 +1,56 @@
+---
+/**
+ * Illustration "empty-workspaces" (280×200, with its own padding inside the viewBox).
+ * The designer's artwork; colours mapped to design tokens so it follows the theme.
+ * Decorative. Generated from the workspace selection handover assets (N15).
+ */
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"svg">, "width" | "height">;
+
+const props = Astro.props as Props;
+// Unique ids per instance, so several illustrations on one page don't share filters.
+const uid = `es-empty-workspaces-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="280"
+  height="200"
+  viewBox="-20 -20 280 200"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+  {...props}
+>
+  <defs>
+    <filter id={`${uid}-sBack`} x="-20%" y="-30%" width="140%" height="160%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sFront`} x="-30%" y="-40%" width="160%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sBlue`} x="-60%" y="-60%" width="220%" height="240%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="4" stdDeviation="5" flood-opacity="0.35" style="flood-color:var(--primary)"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="120" cy="80" r="69" stroke-width="20" style="stroke:color-mix(in oklab, var(--primary-50) 50%, var(--background))"></circle>
+  <circle cx="120" cy="80" r="40" stroke-width="16" style="stroke:var(--primary-50)"></circle>
+  <g transform="rotate(-9 94 70)" filter={`url(#${uid}-sBack)`}>
+    <rect x="34" y="34" width="120" height="72" rx="10" style="fill:var(--background)"></rect>
+    <rect x="34.5" y="34.5" width="119" height="71" rx="9.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  </g>
+  <g transform="rotate(8 152 66)" filter={`url(#${uid}-sBack)`}>
+    <rect x="92" y="30" width="120" height="72" rx="10" style="fill:var(--background)"></rect>
+    <rect x="92.5" y="30.5" width="119" height="71" rx="9.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  </g>
+  <g filter={`url(#${uid}-sFront)`}>
+    <rect x="50" y="52" width="140" height="84" rx="12" style="fill:var(--background)"></rect>
+  </g>
+  <rect x="50.5" y="52.5" width="139" height="83" rx="11.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  <rect x="64" y="66" width="28" height="28" rx="8" filter={`url(#${uid}-sBlue)`} style="fill:var(--primary)"></rect>
+  <rect x="77" y="74" width="2" height="12" rx="1" style="fill:var(--background)"></rect>
+  <rect x="72" y="79" width="12" height="2" rx="1" style="fill:var(--background)"></rect>
+  <rect x="64" y="106" width="76" height="7" rx="3.5" style="fill:var(--primary-100)"></rect>
+  <rect x="64" y="119" width="48" height="7" rx="3.5" style="fill:var(--muted)"></rect>
+</svg>

package/src/components/empty-state/illustrations/LoadError.astro

@@ -0,0 +1,61 @@
+---
+/**
+ * Illustration "load-error" (280×200, with its own padding inside the viewBox).
+ * The designer's artwork; colours mapped to design tokens so it follows the theme.
+ * Decorative. Generated from the workspace selection handover assets (N15).
+ */
+import type { HTMLAttributes } from "astro/types";
+
+type Props = Omit<HTMLAttributes<"svg">, "width" | "height">;
+
+const props = Astro.props as Props;
+// Unique ids per instance, so several illustrations on one page don't share filters.
+const uid = `es-load-error-${Math.random().toString(36).slice(2, 8)}`;
+---
+
+<svg
+  xmlns="http://www.w3.org/2000/svg"
+  width="280"
+  height="200"
+  viewBox="-20 -20 280 200"
+  fill="none"
+  aria-hidden="true"
+  focusable="false"
+  {...props}
+>
+  <defs>
+    <filter id={`${uid}-sBack`} x="-20%" y="-30%" width="140%" height="160%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="2" stdDeviation="3" flood-color="#051729" flood-opacity="0.05"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sFront`} x="-30%" y="-40%" width="160%" height="190%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="8" stdDeviation="10" flood-color="#051729" flood-opacity="0.10"></feDropShadow>
+    </filter>
+    <filter id={`${uid}-sBadge`} x="-60%" y="-60%" width="220%" height="220%" color-interpolation-filters="sRGB">
+      <feDropShadow dx="0" dy="4" stdDeviation="5" flood-opacity="0.28" style="flood-color:var(--destructive)"></feDropShadow>
+    </filter>
+  </defs>
+  <circle cx="120" cy="80" r="69" stroke-width="20" style="stroke:color-mix(in oklab, var(--primary-50) 50%, var(--background))"></circle>
+  <circle cx="120" cy="80" r="40" stroke-width="16" style="stroke:var(--primary-50)"></circle>
+  <g transform="rotate(-9 94 70)" filter={`url(#${uid}-sBack)`}>
+    <rect x="34" y="34" width="120" height="72" rx="10" style="fill:var(--background)"></rect>
+    <rect x="34.5" y="34.5" width="119" height="71" rx="9.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  </g>
+  <g transform="rotate(8 152 66)" filter={`url(#${uid}-sBack)`}>
+    <rect x="92" y="30" width="120" height="72" rx="10" style="fill:var(--background)"></rect>
+    <rect x="92.5" y="30.5" width="119" height="71" rx="9.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  </g>
+  <g filter={`url(#${uid}-sFront)`}>
+    <rect x="50" y="52" width="140" height="84" rx="12" style="fill:var(--background)"></rect>
+  </g>
+  <rect x="50.5" y="52.5" width="139" height="83" rx="11.5" stroke-opacity="0.06" style="stroke:var(--foreground)"></rect>
+  <rect x="64" y="66" width="28" height="28" rx="8" style="fill:var(--muted)"></rect>
+  <path d="M71 80 h3 l2.5 -5 l4 10 l2.5 -5 h3" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="stroke:var(--color-zinc-400, #a1a1aa)"></path>
+  <rect x="64" y="106" width="76" height="7" rx="3.5" style="fill:var(--border)"></rect>
+  <rect x="64" y="119" width="48" height="7" rx="3.5" style="fill:var(--muted)"></rect>
+  <g filter={`url(#${uid}-sBadge)`}>
+    <circle cx="180" cy="62" r="20" style="fill:var(--destructive)"></circle>
+  </g>
+  <circle cx="180" cy="62" r="20" stroke-width="4" style="stroke:var(--background)"></circle>
+  <rect x="178" y="51" width="4" height="14" rx="2" style="fill:var(--background)"></rect>
+  <circle cx="180" cy="71.5" r="2.4" style="fill:var(--background)"></circle>
+</svg>