@heyramzi/ui 2.24.0 → 3.0.0

package/src/charts/stat-card.css

@@ -1,105 +1,123 @@
+@layer theme, base, components, utilities;
+
 /* Styles for StatCard. Plain stylesheet (see area-chart.css for why). All
    selectors are already namespaced under `.hr-stat-card`. */
 
-.hr-stat-card {
-  display: flex;
-  flex-direction: column;
-  gap: 0.375rem;
-  padding: 1.25rem 1.5rem;
-  border: 0;
-  border-radius: var(--radius-xl);
-  background: var(--card, white);
-  box-shadow: var(--chart-card-shadow);
-  min-width: 0;
-  /* WHY: clips the edge-to-edge chart to the card's rounded corners. */
-  overflow: hidden;
-  transition: box-shadow var(--chart-motion) var(--chart-ease-out);
-}
-@media (hover: hover) and (pointer: fine) {
-  .hr-stat-card:hover {
-    box-shadow: var(--chart-card-shadow-hover);
+@layer components {
+  .hr-stat-card {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    padding: 1.25rem 1.5rem;
+    border: 0;
+    border-radius: var(--radius-xl);
+    background: var(--card, white);
+    box-shadow: var(--chart-card-shadow);
+    min-width: 0;
+    /* WHY: clips the edge-to-edge chart to the card's rounded corners. */
+    overflow: hidden;
+    transition: box-shadow var(--chart-motion) var(--chart-ease-out);
   }
-}
-/* WHY: a bare figure, not a card. Dropping the chrome avoids a card-in-card
-   when the figure is placed inside another surface, and lets the chart be the
-   whole element. */
-.hr-stat-figure-only {
-  padding: 0;
-  gap: 0;
-  border: 0;
-  border-radius: 0;
-  background: none;
-  box-shadow: none;
-}
 
-/* WHY: the gauge variant sits the figure and a radial gauge side by side
-   instead of bleeding a chart to the bottom edge; no negative margins here. */
-.hr-stat-gauge-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: 1rem;
-}
-/* WHY the floor: below the width a gauge and a figure share, the row wraps the
-   gauge to its own line rather than squeezing the figure to nothing. */
-.hr-stat-gauge-row .hr-stat-gauge-figure {
-  flex: 1 1 auto;
-  min-width: 6rem;
-}
-.hr-stat-gauge-row .hr-gauge {
-  flex: 0 0 auto;
-}
+  @media (hover: hover) and (pointer: fine) {
+    .hr-stat-card:hover {
+      box-shadow: var(--chart-card-shadow-hover);
+    }
+  }
 
-/* WHY: the chart bleeds past the card padding to the left/right/bottom edges,
-   matching bklit's edge-to-edge stat-card chart; overflow:hidden on the card
-   clips the corners to the radius. */
-.hr-stat-chart {
-  margin: 0.5rem -1.5rem -1.25rem;
-  width: auto;
-}
-.hr-stat-figure-only .hr-stat-chart {
-  margin: 0;
-}
+  /* WHY: a bare figure, not a card. Dropping the chrome avoids a card-in-card
+     when the figure is placed inside another surface, and lets the chart be the
+     whole element. */
+  .hr-stat-figure-only {
+    padding: 0;
+    gap: 0;
+    border: 0;
+    border-radius: 0;
+    background: none;
+    box-shadow: none;
+  }
 
-.hr-stat-card .hr-stat-spline {
-  transition: opacity var(--chart-motion-fast, 150ms) ease;
-}
-.hr-stat-card .hr-stat-bars {
-  transform-box: fill-box;
-  transform-origin: bottom;
-  animation: hr-stat-grow var(--chart-motion-reveal, 1100ms)
-    var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(2) {
-  animation-delay: var(--chart-stagger, 30ms);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(3) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 2);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(4) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 3);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(5) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 4);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(6) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 5);
-}
-.hr-stat-card .hr-stat-bars:nth-of-type(n + 7) {
-  animation-delay: calc(var(--chart-stagger, 30ms) * 6);
+  /* WHY: the gauge variant sits the figure and a radial gauge side by side
+     instead of bleeding a chart to the bottom edge; no negative margins here. */
+  .hr-stat-gauge-row {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    gap: 1rem;
+  }
+
+  /* WHY the floor: below the width a gauge and a figure share, the row wraps the
+     gauge to its own line rather than squeezing the figure to nothing. */
+  .hr-stat-gauge-row .hr-stat-gauge-figure {
+    flex: 1 1 auto;
+    min-width: 6rem;
+  }
+
+  .hr-stat-gauge-row .hr-gauge {
+    flex: 0 0 auto;
+  }
+
+  /* WHY: the chart bleeds past the card padding to the left/right/bottom edges,
+     matching bklit's edge-to-edge stat-card chart; overflow:hidden on the card
+     clips the corners to the radius. */
+  .hr-stat-chart {
+    margin: 0.5rem -1.5rem -1.25rem;
+    width: auto;
+  }
+
+  .hr-stat-figure-only .hr-stat-chart {
+    margin: 0;
+  }
+
+  .hr-stat-card .hr-stat-spline {
+    transition: opacity var(--chart-motion-fast, 150ms) ease;
+  }
+
+  .hr-stat-card .hr-stat-bars {
+    transform-box: fill-box;
+    transform-origin: bottom;
+    animation: hr-stat-grow var(--chart-motion-reveal, 1100ms)
+      var(--chart-ease-reveal, cubic-bezier(0.85, 0, 0.15, 1)) both;
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(2) {
+    animation-delay: var(--chart-stagger, 30ms);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(3) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 2);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(4) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 3);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(5) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 4);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(6) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 5);
+  }
+
+  .hr-stat-card .hr-stat-bars:nth-of-type(n + 7) {
+    animation-delay: calc(var(--chart-stagger, 30ms) * 6);
+  }
+
+  .hr-stat-card .hr-stat-bar-active {
+    filter: brightness(1.08);
+    pointer-events: none;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-stat-card .hr-stat-bars {
+      animation: none;
+    }
+  }
 }
+
 @keyframes hr-stat-grow {
   from {
     transform: scaleY(0);
   }
 }
-.hr-stat-card .hr-stat-bar-active {
-  filter: brightness(1.08);
-  pointer-events: none;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-stat-card .hr-stat-bars {
-    animation: none;
-  }
-}

package/src/charts/stat-card.svelte.d.ts

@@ -0,0 +1,65 @@
+import "./chart-tokens.css";
+import "./stat-card.css";
+import type { Snippet } from "svelte";
+declare function $$render<TData extends Record<string, unknown>>(): {
+    props: {
+        /** Series for the line/area/bar variants. Unused by the gauge variant. */
+        data?: TData[];
+        xKey?: keyof TData & string;
+        yKey?: keyof TData & string;
+        /** Chart kind. "gauge" puts a radial gauge to the right of the figure. */
+        variant?: "line" | "area" | "bar" | "gauge";
+        /** Arc fill 0-100 for variant="gauge". Falls back to `value` when numeric. */
+        gaugeValue?: number;
+        /** Label under the gauge percentage. */
+        gaugeLabel?: string;
+        /** Metric name shown top-left. Omit (or set `figureOnly`) for a bare chart. */
+        label?: string;
+        /** Headline number; counts up on mount. */
+        value?: number;
+        /** Percentage change. Its sign drives the trend color/arrow unless `trend` is set. */
+        delta?: number;
+        /** Force the trend direction independent of `delta`'s sign. */
+        trend?: "neutral" | "up" | "down";
+        /** Caption under the value, e.g. "Avg" or "vs last month". */
+        caption?: string;
+        /** Render only the edge-to-edge chart, no header/value/caption. */
+        figureOnly?: boolean;
+        color?: string;
+        /** Chart height in px. */
+        height?: number;
+        smooth?: boolean;
+        /**
+         * Softens the left and right ends of the line and the area fill instead of cutting them off at the card edge.
+         */
+        edgeFade?: boolean | number;
+        /** Format for the headline value. */
+        formatValue?: (v: number) => string;
+        /** Format for the x value shown as the tooltip header (e.g. a date/period). */
+        formatX?: (v: unknown) => string;
+        /** Leading icon next to the label. */
+        icon?: Snippet;
+        class?: string;
+    };
+    exports: {};
+    bindings: "";
+    slots: {};
+    events: {};
+};
+declare class __sveltets_Render<TData extends Record<string, unknown>> {
+    props(): ReturnType<typeof $$render<TData>>['props'];
+    events(): ReturnType<typeof $$render<TData>>['events'];
+    slots(): ReturnType<typeof $$render<TData>>['slots'];
+    bindings(): "";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <TData extends Record<string, unknown>>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<TData>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<TData>['props']>, ReturnType<__sveltets_Render<TData>['events']>, ReturnType<__sveltets_Render<TData>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<TData>['bindings']>;
+    } & ReturnType<__sveltets_Render<TData>['exports']>;
+    <TData extends Record<string, unknown>>(internal: unknown, props: ReturnType<__sveltets_Render<TData>['props']> & {}): ReturnType<__sveltets_Render<TData>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const $$Component: $$IsomorphicComponent;
+type $$Component<TData extends Record<string, unknown>> = InstanceType<typeof $$Component<TData>>;
+export default $$Component;

package/src/charts/time-series-chart.css

@@ -1,25 +1,30 @@
+@layer theme, base, components, utilities;
+
 /* A plain stylesheet, not a `<style>` block, because Tailwind v4's Vite plugin mis-parses that
    virtual module when this package is consumed from node_modules (tailwindcss#20000). */
 
-.hr-ts-chart {
-  width: 100%;
-  overflow: hidden;
-}
+@layer components {
+  .hr-ts-chart {
+    width: 100%;
+    overflow: hidden;
+  }
 
-.hr-ts-chart .empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  height: 100%;
-  border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
-  border-radius: 0.5rem;
-}
-.hr-ts-chart .empty p {
-  font-size: 0.875rem;
-  color: var(--chart-label, oklch(0.5 0.01 286));
-  margin: 0;
-}
+  .hr-ts-chart .empty {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    border: 1px dashed var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+    border-radius: 0.5rem;
+  }
+
+  .hr-ts-chart .empty p {
+    font-size: 0.875rem;
+    color: var(--chart-label, oklch(0.5 0.01 286));
+    margin: 0;
+  }
 
-.hr-ts-chart .hr-ts-grid {
-  stroke: var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+  .hr-ts-chart .hr-ts-grid {
+    stroke: var(--chart-grid, oklch(0.5 0.01 286 / 0.2));
+  }
 }

package/src/charts/time-series-chart.svelte

@@ -16,7 +16,10 @@
 		Spline,
 		Svg,
 		Tooltip,
+		type ChartState,
 	} from "layerchart";
+	import { chartTable } from "./chart-a11y.js";
+	import ChartPlot from "./chart-plot.svelte";
 	import Crosshair from "./crosshair.svelte";
 	import EdgeFade from "./edge-fade.svelte";
 	import { resolveEdgeFade } from "./edge-fade.js";
@@ -53,6 +56,8 @@
 		 * `true` fades 8% of the width per side, a number sets the fraction (0-0.45), `false` keeps the hard edges.
 		 */
 		edgeFade?: boolean | number;
+		/** The chart's accessible name. Its date range and values are read after it. */
+		ariaLabel?: string;
 	}
 
 	// =========================
@@ -70,8 +75,26 @@
 		softMax = false,
 		yMin = 0,
 		edgeFade = true,
+		ariaLabel = label,
 	}: Props = $props();
 
+	// =========================
+	// STATE
+	// =========================
+	let context = $state<ChartState<(typeof chartData)[number]>>();
+
+	// =========================
+	// FUNCTIONS
+	// =========================
+	function day(d: Date): string {
+		return d.toLocaleDateString("en", { month: "short", day: "numeric", year: "numeric" });
+	}
+
+	function step(i: number | null) {
+		if (i === null) context?.tooltip.hide();
+		else context?.tooltip.show({ data: chartData[i] });
+	}
+
 	// =========================
 	// DERIVED
 	// =========================
@@ -88,6 +111,21 @@
 		})),
 	);
 
+	const table = $derived(
+		chartTable(
+			chartData,
+			(d) => day(d.dateObj),
+			[
+				{ label, value: (d: DataPoint) => d.value },
+				...(label2
+					? [{ label: label2, value: (d: DataPoint) => d.value2, format: formatValue2 }]
+					: []),
+			],
+			formatValue,
+			{ xLabel: "Date" },
+		),
+	);
+
 	let yMax = $derived.by(() => {
 		const allValues = [
 			...data.map((d) => d.value),
@@ -110,7 +148,7 @@
 <!-- =========================== -->
 <!-- TIME SERIES CHART -->
 <!-- =========================== -->
-<div class="hr-ts-chart" style="height: {height}px">
+<ChartPlot class="hr-ts-chart" height="{height}px" label={ariaLabel} {table} onStep={step}>
 	{#if chartData.length === 0}
 		<div class="empty"><p>No historical data yet</p></div>
 	{:else}
@@ -124,8 +162,9 @@
 			padding={{ left: 56, bottom: 36, top: 12, right: 16 }}
 			tooltipContext={{ mode: "bisect-x" }}
 			motion={DOMAIN_MOTION}
+			bind:context
 		>
-			<Svg>
+			<Svg aria-hidden="true">
 				<Axis placement="left" format={(v) => formatValue(v)} ticks={6} />
 				<Axis
 					placement="bottom"
@@ -160,13 +199,7 @@
 			</Svg>
 			<Tooltip.Root>
 				{#snippet children({ data: d })}
-					<Tooltip.Header
-						value={d.dateObj.toLocaleDateString("en", {
-							month: "short",
-							day: "numeric",
-							year: "numeric",
-						})}
-					/>
+					<Tooltip.Header value={day(d.dateObj)} />
 					<Tooltip.List>
 						<Tooltip.Item {label} {color} value={formatValue(d.value)} />
 						{#if label2 && d.value2 !== undefined}
@@ -181,4 +214,4 @@
 			</Tooltip.Root>
 		</Chart>
 	{/if}
-</div>
+</ChartPlot>

package/src/charts/time-series-chart.svelte.d.ts

@@ -0,0 +1,30 @@
+import "./chart-tokens.css";
+import "./time-series-chart.css";
+interface DataPoint {
+    date: string;
+    value: number;
+    value2?: number;
+}
+interface Props {
+    data: DataPoint[];
+    label?: string;
+    label2?: string;
+    color?: string;
+    color2?: string;
+    formatValue?: (v: number) => string;
+    formatValue2?: (v: number) => string;
+    height?: number;
+    /** Clamp Y-axis to 95th percentile so outlier spikes don't flatten normal data */
+    softMax?: boolean;
+    /** Y-axis floor. Raise above 0 to frame variation around a baseline. */
+    yMin?: number;
+    /**
+     * Softens the left and right ends of the filled area instead of cutting them off at the plot edge.
+     */
+    edgeFade?: boolean | number;
+    /** The chart's accessible name. Its date range and values are read after it. */
+    ariaLabel?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/charts/trend-pill.css

@@ -1,36 +1,43 @@
+@layer theme, base, components, utilities;
+
 /* Styles for TrendPill. Plain stylesheet (see area-chart.css for why). All
    selectors are already namespaced under `.hr-trend`. */
 
-.hr-trend {
-  display: inline-flex;
-  /* WHY no shrink: the delta is the row's point, and it is only three characters wide. */
-  flex: 0 0 auto;
-  align-items: center;
-  gap: 0.1875rem;
-  padding: 0.1875rem 0.5rem;
-  border-radius: 999px;
-  border: 1px solid color-mix(in srgb, var(--stat-trend, currentColor) 22%, transparent);
-  background: color-mix(in srgb, var(--stat-trend, currentColor) 10%, transparent);
-  /* The raw hue measured 3.5:1 on its own wash, so it mixes toward --foreground,
-	   which fixes the contrast in both themes with one rule. */
-  color: color-mix(
-    in oklab,
-    var(--stat-trend, var(--muted-foreground, oklch(0.5 0.01 286))) 72%,
-    var(--foreground, oklch(0.2 0.01 286))
-  );
-  font-size: 0.75rem;
-  font-weight: 600;
-  font-feature-settings: "tnum";
-  line-height: 1.2;
-  white-space: nowrap;
-}
-.hr-trend[data-trend="up"] {
-  --stat-trend: var(--stat-up, oklch(0.6 0.13 163));
-}
-.hr-trend[data-trend="down"] {
-  --stat-trend: var(--stat-down, oklch(0.58 0.22 25));
-}
-.hr-trend-arrow {
-  font-size: 0.8125rem;
-  line-height: 1;
+@layer components {
+  .hr-trend {
+    display: inline-flex;
+    /* WHY no shrink: the delta is the row's point, and it is only three characters wide. */
+    flex: 0 0 auto;
+    align-items: center;
+    gap: 0.1875rem;
+    padding: 0.1875rem 0.5rem;
+    border-radius: 999px;
+    border: 1px solid color-mix(in srgb, var(--stat-trend, currentColor) 22%, transparent);
+    background: color-mix(in srgb, var(--stat-trend, currentColor) 10%, transparent);
+    /* The raw hue measured 3.5:1 on its own wash, so it mixes toward --foreground,
+  	   which fixes the contrast in both themes with one rule. */
+    color: color-mix(
+      in oklab,
+      var(--stat-trend, var(--muted-foreground, oklch(0.5 0.01 286))) 72%,
+      var(--foreground, oklch(0.2 0.01 286))
+    );
+    font-size: 0.75rem;
+    font-weight: 600;
+    font-variant-numeric: tabular-nums;
+    line-height: 1.2;
+    white-space: nowrap;
+  }
+
+  .hr-trend[data-trend="up"] {
+    --stat-trend: var(--stat-up, oklch(0.6 0.13 163));
+  }
+
+  .hr-trend[data-trend="down"] {
+    --stat-trend: var(--stat-down, oklch(0.58 0.22 25));
+  }
+
+  .hr-trend-arrow {
+    font-size: 0.8125rem;
+    line-height: 1;
+  }
 }

package/src/charts/trend-pill.svelte.d.ts

@@ -0,0 +1,14 @@
+import "./trend-pill.css";
+type Trend = "up" | "down" | "neutral";
+interface Props {
+    /** Percentage change. Its sign drives the color/arrow unless `trend` is set. */
+    delta: number;
+    /** Force the direction independent of `delta`'s sign. */
+    trend?: Trend;
+    /** Format the delta text. */
+    format?: (v: number) => string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/class-tokens.test.ts

@@ -0,0 +1,34 @@
+/*
+ * A missing space glues two classes into one Tailwind never matches: trace-line's pending state never dimmed (10 Nov 2026).
+ */
+
+import { readdirSync, readFileSync } from "node:fs";
+import { dirname, join, relative } from "node:path";
+import { fileURLToPath } from "node:url";
+import { describe, expect, it } from "vite-plus/test";
+
+const src = dirname(fileURLToPath(import.meta.url));
+
+function svelteFiles(dir: string): string[] {
+  return readdirSync(dir, { withFileTypes: true }).flatMap((entry) => {
+    const path = join(dir, entry.name);
+    if (entry.isDirectory()) return svelteFiles(path);
+    return entry.name.endsWith(".svelte") ? [path] : [];
+  });
+}
+
+// A data-[...] or aria-[...] variant starts a class, so a letter or digit right before it is a lost space.
+const GLUED = /[a-z0-9](?:data|aria)-\[/g;
+
+describe("class strings", () => {
+  it("never glue a variant onto the class before it", () => {
+    const found = svelteFiles(src).flatMap((file) => {
+      const source = readFileSync(file, "utf8");
+      return [...source.matchAll(GLUED)].map((match) => {
+        const line = source.slice(0, match.index).split("\n").length;
+        return `${relative(src, file)}:${line}`;
+      });
+    });
+    expect(found).toEqual([]);
+  });
+});

package/src/components/chip/count-chip.svelte.d.ts

@@ -0,0 +1,12 @@
+import type { HTMLAttributes } from "svelte/elements";
+interface Props extends Omit<HTMLAttributes<HTMLSpanElement>, "class" | "children"> {
+    count: number;
+    /** `sm` is 16px, for a count inside a control or on a button; `md` is 20px, beside a heading. */
+    size?: "sm" | "md";
+    /** `brand` marks a count that is on: an applied filter, the selected segment. */
+    tone?: "neutral" | "brand";
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/components/chip/tag-chip.svelte

@@ -8,7 +8,7 @@
 		/** A leading mark: a tag icon, a colour dot, an avatar. */
 		icon?: Snippet;
 		/** Shows a remove button after the label. */
-		onremove?: () => void;
+		onRemove?: () => void;
 		/** The remove button's accessible name. */
 		removeLabel?: string;
 		/**
@@ -22,7 +22,7 @@
 
 	let {
 		icon,
-		onremove,
+		onRemove,
 		removeLabel = "Remove",
 		removeFocusable = true,
 		children,
@@ -38,14 +38,14 @@
 	class={cn(
 		"inline-flex h-5 max-w-full shrink-0 items-center gap-1 overflow-hidden rounded-sm border border-border bg-muted/60 px-1.5 text-xs text-foreground",
 		"[&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:text-muted-foreground",
-		onremove && "pr-0.5",
+		onRemove && "pr-0.5",
 		className,
 	)}
 	{...restProps}
 >
 	{@render icon?.()}
 	<span class="min-w-0 truncate">{@render children?.()}</span>
-	{#if onremove}
+	{#if onRemove}
 		<!-- The glyph is 12px; the after: box takes the hit area to 24px without growing the chip. -->
 		<button
 			type="button"
@@ -55,9 +55,9 @@
 			onmousedown={(e) => {
 				if (!removeFocusable) e.preventDefault();
 			}}
-			onclick={onremove}
+			onclick={onRemove}
 		>
-			<X class="size-3" weight="bold" />
+			<X aria-hidden="true" class="size-3" weight="bold" />
 		</button>
 	{/if}
 </span>