@kenlo/sds-design-system 0.9.9

package/components/Skeleton/skeleton-variants.js

@@ -0,0 +1,16 @@
+/**
+ * The Skeleton vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Skeleton/Skeleton.tsx, where
+ * Button, Input and Image were sub-components of Skeleton. They are sibling tags here:
+ * they share nothing but a stylesheet, so nesting them under one parent would be a
+ * namespace rather than a relationship.
+ */
+export const SKELETON_SIZES = ['sm', 'md', 'lg'];
+
+export function assertSkeletonSize(size) {
+  if (!SKELETON_SIZES.includes(size)) {
+    throw new Error(`Unknown skeleton size: "${size}". Allowed: ${SKELETON_SIZES.join(', ')}`);
+  }
+  return size;
+}

package/components/Skeleton/skeleton.marko

@@ -0,0 +1,53 @@
+<!-- sds-skeleton — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Skeleton/Skeleton.tsx.
+
+A placeholder for content that has not arrived. `loading=false` renders the real content
+instead, so a caller writes the swap once rather than branching around it.
+
+It is aria-hidden and carries aria-busy on the region: a screen reader should hear
+"loading", not a description of grey rectangles. KDLS left it unannounced entirely, which
+means a screen reader user hears nothing at all while waiting.
+
+No state: it is told whether it is loading. -->
+
+import { assertSkeletonSize } from "./skeleton-variants.js";
+
+$ {
+  const {
+    loading = true,
+    rows = 3,
+    title = true,
+    avatar = false,
+    active = true,
+    size = "md",
+    label = "Carregando",
+    class: extraClass = "",
+  } = input;
+
+  assertSkeletonSize(size);
+
+  const classes = [
+    "sds-skeleton",
+    active ? "sds-skeleton--active" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<if(!loading)>
+  <${input.renderBody}/>
+</if>
+<else>
+  <div class=classes role="status" aria-busy="true" aria-label=label>
+    <if(avatar)>
+      <span class=`sds-skeleton__avatar sds-skeleton__avatar--${size}` aria-hidden="true"/>
+    </if>
+    <div class="sds-skeleton__content" aria-hidden="true">
+      <if(title)>
+        <span class="sds-skeleton__line sds-skeleton__line--title"/>
+      </if>
+      <for|_, index| of=Array.from({ length: rows })>
+        <span class=`sds-skeleton__line ${index === rows - 1 ? "sds-skeleton__line--last" : ""}`.trim()/>
+      </for>
+    </div>
+  </div>
+</else>

package/components/Spinner/Spinner.css

@@ -0,0 +1,173 @@
+/* SDS Spinner.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Spinner/Spinner.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-spinner--solid .sds-spinner__arc
+ *//* ────────────────────────────────────────────────────────────
+   Spinner — SVG stroke-dasharray spinner
+   Spinning: arc grows then shrinks via stroke-dasharray + SVG rotation
+   Done:     full circle (primary-50) + check draws via stroke-dashoffset
+   No dark block needed — all tokens auto-invert or are pivot (50)
+──────────────────────────────────────────────────────────── */
+
+/* ── Size tokens ── */
+.sds-spinner--sm { --sds-spinner-size: 24px; }
+.sds-spinner--md { --sds-spinner-size: 40px; }
+.sds-spinner--lg { --sds-spinner-size: 56px; }
+/* ── Fullscreen overlay ── */
+/* Fixed backdrop covering the viewport, spinner centered — same overlay treatment as Modal */
+.sds-spinner-fullscreen {
+  position: fixed;
+  inset: 0;
+  z-index: var(--z-notice);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-opacity-50);
+  animation: sds-spinner-overlay-in 120ms ease;
+}
+[data-theme="dark"] .sds-spinner-fullscreen {
+  background: var(--color-scrim);
+}
+@keyframes sds-spinner-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+/* ── Base wrapper ── */
+.sds-spinner {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width:  var(--sds-spinner-size);
+  height: var(--sds-spinner-size);
+  flex-shrink: 0;
+}
+/* ── SVG container ── */
+.sds-spinner__svg {
+  display: block;
+  overflow: visible;
+  transform-origin: center center;
+}
+/* ── Track ring ── */
+.sds-spinner__track {
+  fill: none;
+  stroke: var(--color-neutral-20);
+}
+/* ── Arc — base ── */
+.sds-spinner__arc {
+  fill: none;
+}
+/* Solid variant color */
+.sds-spinner--solid .sds-spinner__arc {
+  stroke: var(--color-primary-50-solid);
+}
+/* ── SPINNING STATE ── */
+
+/* SVG rotates continuously — moves the arc around the circle */
+.sds-spinner__svg {
+  animation: sds-spinner-rotate 1.4s linear infinite;
+}
+/* Arc grows from sliver → 75% → shrinks back to sliver ("worm") */
+.sds-spinner__arc {
+  stroke-dasharray: 1px, var(--c);
+  stroke-dashoffset: 0;
+  animation: sds-spinner-dash 1.4s ease-in-out infinite;
+}
+/* Gradient variant: wave color cycles continuously scheme→secondary→tertiary */
+/* ── DONE STATE ── */
+
+/* Pause (not cancel) spinning when done — prevents snap-to-0 rotation glitch */
+.sds-spinner--done .sds-spinner__svg {
+  animation-play-state: paused;
+}
+.sds-spinner--done .sds-spinner__arc {
+  animation-play-state: paused;
+}
+/* Done SVG overlay — absolutely positioned on top of the spinning SVG */
+.sds-spinner__done-svg {
+  position: absolute;
+  top: 0;
+  left: 0;
+  display: block;
+  overflow: visible;
+}
+/* Fill circle — covers full stroke area (r + sw/2 radius set in TSX) */
+.sds-spinner__done-fill {
+  fill: var(--color-primary-50-solid);
+}
+/* Mask hole — shrinks interior to zero; ease-out = starts fast, no noticeable pause */
+.sds-spinner__fill-hole {
+  transform-box: fill-box;
+  transform-origin: 50% 50%;
+  animation: sds-fill-hole-shrink 420ms ease-out forwards;
+}
+/* ── Checkmark — draws itself after fill completes ── */
+.sds-spinner__check {
+  fill: none;
+  stroke: var(--color-white);
+  stroke-dasharray: var(--check-len);
+  stroke-dashoffset: var(--check-len);
+  animation: sds-check-draw 300ms ease-out 420ms forwards;
+}
+/* ── Animations ── */
+
+@keyframes sds-spinner-rotate {
+  to { transform: rotate(360deg); }
+}
+@keyframes sds-fill-hole-shrink {
+  from { transform: scale(1); }
+  to   { transform: scale(0); }
+}
+/* Phase 1: arc grows from 1px to 75% of circumference
+   Phase 2: arc shrinks back to 1% while dashoffset advances full circle
+   Combined with SVG rotation → "traveling worm" effect            */
+@keyframes sds-spinner-dash {
+  0% {
+    stroke-dasharray: 1px, var(--c);
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: calc(var(--c) * 0.75), var(--c);
+    stroke-dashoffset: calc(var(--c) * -0.25);
+  }
+  100% {
+    stroke-dasharray: 1px, var(--c);
+    stroke-dashoffset: calc(var(--c) * -1);
+  }
+}
+@keyframes sds-check-draw {
+  to { stroke-dashoffset: 0; }
+}
+
+/* ── Variants ──────────────────────────────────────────────────────────────────
+   KDLS shipped two: `solid`, which paints the arc with the scheme colour, and
+   `gradient`, whose whole definition was to cycle scheme -> secondary -> tertiary. Those
+   two families do not exist in SDS, and there is nothing left of that variant once they
+   go — so the variant is gone and the `variant` attribute with it. The arc reads the
+   primary slot, which is what `solid` always did.
+
+   The Lya keyframe (an arc cycling between two hardcoded hexes, #77A6E0 and #BF71E5,
+   neither of which was ever a token) is removed for the same reason. */
+
+/* The way out, in plain sight. It was visually hidden until focused — the skip-link
+   shape — and that means a control whose metrics change when it takes focus, which is the
+   one thing tests/no-reflow-on-interaction.test.js exists to forbid. It is also the wrong
+   answer here: a blocking overlay with a hidden exit is a blocking overlay. */
+.sds-spinner-fullscreen__dismiss {
+  margin-top: var(--spacing-4);
+  padding: var(--spacing-2) var(--spacing-4);
+  border: 0;
+  border-radius: var(--radius-sm);
+  background: var(--component-bg-color);
+  color: var(--body-color);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  cursor: pointer;
+}
+
+/* The overlay stacks its spinner over the way out. */
+.sds-spinner-fullscreen {
+  flex-direction: column;
+}

package/components/Spinner/spinner-geometry.js

@@ -0,0 +1,39 @@
+/**
+ * The Spinner's SVG geometry, per size.
+ *
+ * Ported verbatim from kdls-design-system v2.5.1 (0f3edf8) components/Spinner/Spinner.tsx.
+ * These are drawing constants, not design tokens: they describe one shape at three sizes,
+ * and changing them changes the drawing rather than the theme.
+ *
+ * px       the box, in CSS pixels
+ * r        the circle radius
+ * sw       the arc stroke width
+ * checkSw  the checkmark stroke width
+ * checkLen the approximate path length, which drives the draw-on animation
+ * check    the checkmark path, scaled 0.75 from centre so it sits inside the circle
+ */
+export const SPINNER_SIZES = ['sm', 'md', 'lg'];
+
+export const SPINNER_GEOMETRY = {
+  sm: { px: 24, r: 9, sw: 2, checkSw: 2, checkLen: 14, check: 'M7.5 12L10.5 15.5L16.5 9' },
+  md: { px: 40, r: 16, sw: 3, checkSw: 3, checkLen: 22, check: 'M12.5 20L17.75 25.5L27.5 15' },
+  lg: { px: 56, r: 23, sw: 4, checkSw: 4, checkLen: 31, check: 'M17.5 28L24.5 35.5L38.5 20.5' },
+};
+
+export function assertSpinnerSize(size) {
+  if (!SPINNER_SIZES.includes(size)) {
+    throw new Error(`Unknown spinner size: "${size}". Allowed: ${SPINNER_SIZES.join(', ')}`);
+  }
+  return size;
+}
+
+export function geometryFor(size) {
+  const g = SPINNER_GEOMETRY[assertSpinnerSize(size)];
+  return {
+    ...g,
+    cx: g.px / 2,
+    circumference: +(2 * Math.PI * g.r).toFixed(2),
+    holeR: g.r - g.sw / 2,
+    fillR: g.r + g.sw / 2,
+  };
+}

package/components/Spinner/spinner-overlay.marko

@@ -0,0 +1,97 @@
+<!-- sds-spinner-overlay — the fullscreen half of the Spinner, and the only half that has
+     state.
+
+     The Spinner is markup and must stay markup: a listing skeleton puts fifty of them on a
+     page, and Marko decides serialisation per template at compile time, so a single
+     `on-click` anywhere in spinner.marko would be paid by every one of those fifty.
+
+     An overlay is the opposite kind of thing. There is one, it covers the viewport, and it
+     needs a way out — a spinner that finishes behind a backdrop nobody can dismiss locks
+     the page. So the state lives here, in the template that is rendered once.
+
+     It closes on a click and, once `done`, on its own after `dismissAfter` milliseconds.
+     Both are reported through `onDismiss`; a caller that controls `isOpen` decides whether
+     the close actually happens, and one that does not gets it for free. -->
+
+import { assertSpinnerSize } from "./spinner-geometry.js";
+
+class {
+  onCreate() {
+    this.state = { closed: false };
+  }
+
+  onInput(input) {
+    // Re-opening after a dismissal has to clear the flag, or the overlay stays gone.
+    if (input.isOpen && this.state.closed) this.state.closed = false;
+  }
+
+  onMount() {
+    this.arm();
+  }
+
+  onUpdate() {
+    this.arm();
+  }
+
+  onDestroy() {
+    clearTimeout(this.timer);
+  }
+
+  /** The automatic close, armed only once the spinner has something to say it is done. */
+  arm() {
+    clearTimeout(this.timer);
+    if (!this.input.done || !this.isOpen) return;
+    this.timer = setTimeout(() => this.dismiss(), this.input.dismissAfter ?? 3000);
+  }
+
+  get isOpen() {
+    return this.input.isOpen !== undefined ? this.input.isOpen : !this.state.closed;
+  }
+
+  dismiss() {
+    clearTimeout(this.timer);
+    this.input.onDismiss?.();
+    if (this.input.isOpen === undefined) this.state.closed = true;
+  }
+
+  /** A click on the backdrop, not on the spinner sitting in the middle of it. */
+  closeFromBackdrop(event, element) {
+    if (event.target !== element) return;
+    this.dismiss();
+  }
+
+  closeOnEscape(event) {
+    if (event.key !== "Escape") return;
+    event.preventDefault();
+    this.dismiss();
+  }
+}
+
+$ {
+  const { size = "md", done = false, label, dismissLabel = "Fechar" } = input;
+
+  assertSpinnerSize(size);
+}
+
+<if(component.isOpen)>
+  <div
+    class="sds-spinner-fullscreen"
+    role="alertdialog"
+    aria-label=(label ?? (done ? "Concluído" : "Carregando"))
+    on-click("closeFromBackdrop")
+    on-keydown("closeOnEscape")
+  >
+    <sds-spinner size=size done=done label=label/>
+
+    <!-- The way out, in plain sight. Hiding it until focused would mean a control whose
+         metrics change when it takes focus, and a blocking overlay whose exit is
+         invisible is a blocking overlay. -->
+    <button
+      type="button"
+      class="sds-spinner-fullscreen__dismiss"
+      on-click("dismiss")
+    >
+      ${dismissLabel}
+    </button>
+  </div>
+</if>

package/components/Spinner/spinner.marko

@@ -0,0 +1,88 @@
+<!-- sds-spinner — ported from kdls-design-system v2.5.1 (0f3edf8) components/Spinner/Spinner.tsx.
+
+Divergences:
+
+No `variant`. KDLS had two — `solid`, which paints the arc with the scheme colour, and
+`gradient`, whose entire definition was to cycle scheme to secondary to tertiary. Those
+families do not exist in SDS and nothing is left of that variant once they go, so the
+variant went with them and the attribute with it. The arc reads the primary slot, which
+is what `solid` always did.
+
+No `onComplete` callback, and therefore no state. KDLS attached a native `animationend`
+listener to the checkmark path to report completion. The event is already the API: a
+caller that needs to know listens for `animationend` on `.sds-spinner__check` itself,
+and the component stays markup.
+
+`fullscreen` moved out, to sds-spinner-overlay. It renders in place rather than through a
+portal — the overlay is position:fixed, so it covers the viewport from wherever it sits in
+the tree, and the portal was solving a React-specific problem that does not exist here.
+What it also needs is a way out, and a way out is a click handler: Marko decides
+serialisation per template at compile time, so one handler here would be paid by every
+spinner on the page, and a listing skeleton renders fifty. The overlay is rendered once,
+so that is where the state belongs. -->
+
+import { assertSpinnerSize } from "./spinner-geometry.js";
+import { geometryFor } from "./spinner-geometry.js";
+
+$ {
+  const {
+    size = "md",
+    done = false,
+    label = done ? "Concluído" : "Carregando",
+    // A spinner inside a control that already reports its own busy state must not announce
+    // itself: a button's accessible name comes from its contents, so a spinner with
+    // role="status" and aria-label="Carregando" renames the button to "Carregando
+    // Publicar" for the whole time it is working. aria-busy on the control is what says it
+    // is busy; this is just the picture of it. KDLS has the same defect and no way to opt
+    // out — the spinner is announced inside every one of its loading buttons.
+    decorative = false,
+    class: extraClass = "",
+  } = input;
+
+  assertSpinnerSize(size);
+  const g = geometryFor(size);
+
+  const classes = [
+    "sds-spinner",
+    "sds-spinner--solid",
+    `sds-spinner--${size}`,
+    done ? "sds-spinner--done" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+
+  // --c drives the arc dash animation, --check-len the checkmark draw-on.
+  const style = `--c: ${g.circumference}px; --check-len: ${g.checkLen}px`;
+}
+
+<macro|{ }| name="spinner">
+  <div
+    class=classes
+    role=(decorative ? null : "status")
+    aria-label=(decorative ? null : label)
+    aria-hidden=(decorative ? "true" : null)
+    style=style
+  >
+    <svg class="sds-spinner__svg" viewBox=`0 0 ${g.px} ${g.px}` width=g.px height=g.px fill="none" aria-hidden="true">
+      <circle class="sds-spinner__track" cx=g.cx cy=g.cx r=g.r stroke-width=g.sw/>
+      <circle class="sds-spinner__arc" cx=g.cx cy=g.cx r=g.r stroke-width=g.sw stroke-linecap="round"/>
+    </svg>
+
+    <if(done)>
+      <svg class="sds-spinner__done-svg" viewBox=`0 0 ${g.px} ${g.px}` width=g.px height=g.px fill="none" aria-hidden="true">
+        <defs>
+          <mask id=`sds-spinner-fill-mask-${size}`>
+            <!-- The hole covers the interior only, so the fill reaches the arc at t=0.
+                 White and black here are mask channels, not colour: the mask reads
+                 luminance and the values are never painted. -->
+            <rect x="0" y="0" width=g.px height=g.px fill="white"/>
+            <circle class="sds-spinner__fill-hole" cx=g.cx cy=g.cx r=g.holeR fill="black"/>
+          </mask>
+        </defs>
+        <circle class="sds-spinner__done-fill" cx=g.cx cy=g.cx r=g.fillR mask=`url(#sds-spinner-fill-mask-${size})`/>
+        <path class="sds-spinner__check" d=g.check stroke-width=g.checkSw stroke-linecap="round" stroke-linejoin="round"/>
+      </svg>
+    </if>
+  </div>
+</macro>
+
+<spinner/>

package/components/StatCard/StatCard.css

@@ -0,0 +1,90 @@
+/* SDS StatCard.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/StatCard/StatCard.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ── StatCard ───────────────────────────────────────────────────────────
+   KPI / big-number card. Typically arranged in a grid row at the top of a page.
+   BEM root: .sds-stat-card
+   ─────────────────────────────────────────────────────────────────── */
+
+/* A <dl>: a number with a name is a description list. Its default styling has to be taken
+   back — see the note on .sds-card__info-pair, same element, same trap. */
+/* The column is turned around: the DOM reads `<dt>` then `<dd>`, which is the only valid
+   order for a description list, and the card draws the number above its name. Nothing in
+   here is interactive, so there is no focus order to fall out of step with. */
+.sds-stat-card {
+  background: var(--component-bg-color);
+  border-radius: var(--radius-md);
+  padding: var(--spacing-6);
+  display: flex;
+  flex-direction: column-reverse;
+  gap: var(--spacing-1);
+  margin: 0;
+}
+
+.sds-stat-card dt,
+.sds-stat-card dd {
+  margin: 0;
+}
+.sds-stat-card--hug {
+  width: fit-content;
+  min-width: 200px;
+  max-width: 240px;
+}
+.sds-stat-card--fill {
+  width: 100%;
+}
+.sds-stat-card__top {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+/* 2 steps weaker than __value's --title-color, by design (not a bug) — neutral-70
+   auto-inverts the same way --title-color does, so the 2-step gap holds in both themes
+   without a dark override: light neutral-90→70 is 2 steps darker-to-lighter, and dark
+   mirrors that same gap from the inverted (white) end. */
+.sds-stat-card__icon {
+  display: inline-flex;
+  font-size: 24px;
+  flex-shrink: 0;
+  color: var(--color-neutral-70);
+}
+.sds-stat-card__value {
+  font-family: var(--font-family-base);
+  font-size: 24px;
+  font-weight: var(--font-weight-bold);
+  line-height: 32px;
+  letter-spacing: -0.05em;
+  color: var(--title-color);
+}
+.sds-stat-card .sds-stat-card__label {
+  font-weight: var(--font-weight-medium);
+}
+/* ── Group wrapper — flex-wrap: cards (hug) hug the text and wrap onto the line ── */
+.sds-stat-card-group {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+}
+/* Mobile: 2 per row; drops to 1 when 2 don't fit (auto-fit + smaller min).
+   The cards fill the column, ignoring the 200–240 hug clamp.
+
+   Divergence: min() around the track minimum. A bare minmax(150px, 1fr) never goes under
+   150, so a group placed in a column narrower than that is wider than its column — and
+   the page, not the group, is what scrolls. */
+@media (max-width: 799px) {
+  .sds-stat-card-group {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(min(150px, 100%), 1fr));
+  }
+  .sds-stat-card-group .sds-stat-card {
+    width: auto;
+    min-width: 0;
+    max-width: none;
+  }
+}
+
+/* Same rule the Card, the Accordion and the AttachmentList follow: a container that draws
+   its own surface needs the stroke only where that surface matches the ground behind it. */
+.sds-stat-card--bordered {
+  border: 1px solid var(--border-static-color);
+}

package/components/StatCard/stat-card-group.marko

@@ -0,0 +1,5 @@
+<!-- sds-stat-card-group — ported from kdls-design-system v2.5.1 (0f3edf8), StatCardGroup. -->
+$ const { class: extraClass = "" } = input;
+<div class=`sds-stat-card-group ${extraClass}`.trim()>
+  <${input.renderBody}/>
+</div>

package/components/StatCard/stat-card.marko

@@ -0,0 +1,57 @@
+<!-- sds-stat-card — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/StatCard/StatCard.tsx.
+
+A number and what it counts. The value and its label are a description list rather than
+two spans: "2.560 imóveis ativos" should reach a screen reader as one fact, which is the
+same correction the Card's InfoPair needed. KDLS used loose spans. -->
+
+$ {
+  const {
+    value,
+    label,
+    icon,
+    width = "hug",
+    // A bordered container separates itself from a ground of its own colour; on a
+    // different ground the stroke is one line of noise. Same rule the Card, the Accordion
+    // and the AttachmentList follow.
+    bordered = false,
+    class: extraClass = "",
+  } = input;
+
+  if (value === undefined) throw new Error("sds-stat-card needs a `value`.");
+  if (!label) throw new Error("sds-stat-card needs a `label` — a number with no name is not a statistic.");
+  if (width !== "hug" && width !== "fill") {
+    throw new Error(`Unknown stat card width: "${width}". Allowed: hug, fill`);
+  }
+
+  const renderable = (v) => (v && v.renderBody) || v;
+}
+
+<!-- A `<dl>`, with the term first — which is what makes it valid.
+
+     The value is drawn ABOVE its label, and the port wrote the DOM in that order: `<dd>`
+     then `<dt>`. `<dl>` requires the term first, so the pairing a screen reader relies on
+     was broken by the very markup chosen to express it. The reading order is term then
+     description now, and the stylesheet turns the column around so the number still sits
+     on top. Nothing here is interactive, so visual order and focus order cannot disagree.
+
+     The list stays rather than going back to KDLS's loose spans: "2560" and "Imóveis
+     ativos" as two unrelated strings is what the `<dl>` was for. -->
+<dl class=[
+  "sds-stat-card",
+  `sds-stat-card--${width}`,
+  bordered ? "sds-stat-card--bordered" : "",
+  extraClass,
+].filter(Boolean).join(" ")>
+  <dt>
+    <sds-text as="span" variant="bodyMd" class="sds-stat-card__label">${label}</sds-text>
+  </dt>
+  <dd class="sds-stat-card__top">
+    <if(icon)>
+      <span class="sds-stat-card__icon" aria-hidden="true">
+        <sds-icon><${renderable(icon)}/></sds-icon>
+      </span>
+    </if>
+    <span class="sds-stat-card__value">${value}</span>
+  </dd>
+</dl>