@viraui/react 2026.10.0 → 2026.11.0-next.0

package/dist/specs/components/gauge/patterns.xml

@@ -0,0 +1,1158 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<patterns surface="gauge">
+  <!-- Round dial templates only (bars omitted). Demos are source; examples mirror them. -->
+
+  <example title="activity-ring">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        <GaugeTrack width={44} color={TOKEN.foreground} opacity={0.12} />
+        <GaugeArc width={44} color={TOKEN.foreground} />
+        <GaugeValue fontSize={80} font="rounded" weight="bold" {...pos(0, 0.06)} />
+        <GaugeText fontSize={24} font="rounded" {...pos(0, -0.3)}>
+          kcal
+        </GaugeText>
+        <GaugeText
+          fontSize={22}
+          font="rounded"
+          weight="semibold"
+          color={TOKEN.foreground}
+          {...pos(0, 0.4)}
+        >
+          Move
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `activity-ring` from demos/activity-ring.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="air-quality">
+    <tsx><![CDATA[
+const zones: Zone[] = [
+  { to: 50, color: TOKEN.muted },
+  { to: 100, color: TOKEN.contrast },
+  { to: 500, color: TOKEN.foreground },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={90}
+        endAngle={270}
+        fit="content"
+        label={label}
+      >
+        <GaugeTrack width={20} />
+        <GaugeArc width={20} color={TOKEN.foreground} />
+        <GaugeZones
+          zones={zones}
+          width={6}
+          offset={-22}
+          gap={2}
+          cap="butt"
+          endCap="round"
+        />
+        <GaugeMarks values={zoneCutoffs(zones)} length={10} width={2} offset={-22} />
+        <GaugeValue fontSize={84} font="rounded" weight="bold" {...pos(0, 0.22)} />
+        <GaugeText fontSize={24} {...pos(0, -0.08)}>
+          AQI
+        </GaugeText>
+        <GaugeText fontSize={20} {...pos(0, 0.62)}>
+          Air quality
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `air-quality` from demos/air-quality.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="analog-dial">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={45}
+        endAngle={315}
+        label={label}
+      >
+        <GaugeTicks
+          count={10}
+          length={20}
+          width={2.5}
+          offset={-10}
+          cap="butt"
+          color={TOKEN.foreground}
+        />
+        <GaugeTicks count={50} length={10} width={1.5} offset={-5} cap="butt" opacity={0.6} />
+        <GaugeTickLabels count={10} offset={-46} fontSize={18} font="mono" weight="regular" />
+        <GaugeNeedle kind="line" length={0.86} width={4} tail={40} />
+        <GaugeHub radius={10} />
+        <GaugeValue fontSize={40} font="mono" weight="regular" {...pos(0, -0.48)} />
+        <GaugeText fontSize={18} font="mono" {...pos(0, -0.66)}>
+          psi
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `analog-dial` from demos/analog-dial.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="battery">
+    <tsx><![CDATA[
+const zones: Zone[] = [
+  { to: 80, color: TOKEN.muted },
+  { to: 100, color: TOKEN.muted },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        <GaugeTrack width={30} cap="butt" />
+        <GaugeArc width={30} color={TOKEN.foreground} cap="butt" />
+        <GaugeZones
+          zones={zones}
+          width={30}
+          offset={0}
+          gap={0}
+          cap="butt"
+          endCap="butt"
+          opacity={0}
+        />
+        <GaugeMarks
+          values={zoneCutoffs(zones)}
+          length={46}
+          width={5}
+          offset={0}
+          cap="butt"
+          color={TOKEN.foreground}
+        />
+        <GaugeValue
+          fontSize={92}
+          font="rounded"
+          weight="bold"
+          {...pos(-0.06, 0.02)}
+        />
+        <GaugeText fontSize={30} anchor="start" {...pos(0.24, 0.06)}>
+          %
+        </GaugeText>
+        <GaugeText fontSize={22} {...pos(0, -0.36)}>
+          307 km
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `battery` from demos/battery.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="chronograph">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        <GaugeTicks
+          count={12}
+          length={22}
+          width={4}
+          offset={-11}
+          cap="butt"
+          color={TOKEN.foreground}
+        />
+        <GaugeTicks count={60} length={14} width={2.5} offset={-7} cap="butt" opacity={0.6} />
+        <GaugeTickLabels
+          count={12}
+          offset={-50}
+          fontSize={26}
+          weight="semibold"
+          color={TOKEN.foreground}
+        />
+        <GaugeNeedle kind="line" length={0.92} width={4} tail={44} tailDot={10} />
+        <GaugeHub radius={11} />
+        <GaugeText fontSize={30} font="mono" {...pos(0, 0.36)}>
+          05:42.1
+        </GaugeText>
+        <GaugeInset
+          value={5.7}
+          min={0}
+          max={30}
+          startAngle={180}
+          endAngle={540}
+          scale={0.28}
+          {...pos(0, -0.36)}
+        >
+          <GaugeTrack width={6} cap="butt" opacity={0.25} offset={-3} />
+          <GaugeTicks
+            count={6}
+            length={34}
+            width={9}
+            offset={-26}
+            cap="butt"
+            color={TOKEN.foreground}
+          />
+          <GaugeTicks count={30} length={18} width={5} offset={-18} cap="butt" opacity={0.5} />
+          <GaugeNeedle kind="pointer" length={0.78} width={30} tail={0} />
+          <GaugeHub radius={22} />
+        </GaugeInset>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `chronograph` from demos/chronograph.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="clock">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        <GaugeTicks
+          count={12}
+          length={16}
+          width={3}
+          offset={-8}
+          cap="butt"
+          color={TOKEN.foreground}
+        />
+        <GaugeTicks count={60} length={6} width={1.5} offset={-3} cap="butt" opacity={0.6} />
+        <GaugeTickLabels
+          count={12}
+          offset={-48}
+          fontSize={26}
+          weight="semibold"
+          color={TOKEN.foreground}
+          format={clockLabel}
+        />
+        <GaugeNeedle kind="pointer" length={0.5} width={12} tail={0} />
+        <GaugeNeedle kind="pointer" length={0.74} width={8} tail={0} turns={12} />
+        <GaugeHub radius={7} />
+      </Gauge>
+]]></tsx>
+    <notes>Round template `clock` from demos/clock.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="compass">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        <GaugeTrack width={2} color={TOKEN.muted} opacity={0.4} />
+        <GaugeTicks
+          count={8}
+          length={18}
+          width={3}
+          offset={-9}
+          cap="butt"
+          color={TOKEN.foreground}
+        />
+        <GaugeTicks count={36} length={8} width={1.5} offset={-4} cap="butt" opacity={0.8} />
+        <GaugeTickLabels
+          count={8}
+          offset={-46}
+          fontSize={22}
+          weight="bold"
+          color={TOKEN.foreground}
+          format={compassLabel}
+        />
+        <GaugeNeedle
+          kind="compass"
+          length={0.62}
+          width={22}
+          tail={124}
+          color={TOKEN.foreground}
+          tailColor={TOKEN.muted}
+        />
+        <GaugeHub radius={5} color={TOKEN.background} />
+      </Gauge>
+]]></tsx>
+    <notes>Round template `compass` from demos/compass.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="data-usage">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={60}
+        endAngle={300}
+        label={label}
+      >
+        <GaugeTrack width={28} />
+        <GaugeArc width={28} />
+        <GaugeDot radius={7} color={TOKEN.background} />
+        <GaugeTooltip label="Used" unit="GB" decimals={1} position="value" />
+        <GaugeValue
+          fontSize={96}
+          font="rounded"
+          weight="bold"
+          {...pos(-0.08, 0.06)}
+        />
+        <GaugeText fontSize={32} font="rounded" weight="bold" anchor="start" {...pos(0.2, 0.02)}>
+          GB
+        </GaugeText>
+        <GaugeText fontSize={26} {...pos(0, -0.26)}>
+          of 50 GB
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `data-usage` from demos/data-usage.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="dimmer">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={40}
+        endAngle={320}
+        label={label}
+      >
+        <GaugeTrack width={40} opacity={0.1} />
+        <GaugeArc width={40} />
+        <GaugeDot radius={9} color={TOKEN.background} />
+        <GaugeValue fontSize={84} font="rounded" weight="bold" {...pos(-0.07, 0)} />
+        <GaugeText
+          fontSize={30}
+          font="rounded"
+          weight="bold"
+          anchor="start"
+          {...pos(0.22, 0.04)}
+        >
+          %
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `dimmer` from demos/dimmer.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="fuel">
+    <tsx><![CDATA[
+const zones: Zone[] = [
+  { to: 12, color: TOKEN.foreground },
+  { to: 100, color: TOKEN.muted },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={90}
+        endAngle={270}
+        label={label}
+      >
+        <GaugeZones zones={zones} width={10} gap={0} cap="butt" endCap="butt" />
+        <GaugeTicks
+          count={4}
+          length={18}
+          width={3}
+          offset={-20}
+          cap="butt"
+          color={TOKEN.foreground}
+        />
+        <GaugeTicks count={16} length={8} width={1.5} offset={-15} cap="butt" opacity={0.5} />
+        <GaugeNeedle kind="pointer" length={0.85} width={9} tail={24} />
+        <GaugeHub radius={10} />
+        <GaugeValue fontSize={36} font="mono" weight="semibold" {...pos(0, -0.42)} />
+        <GaugeText fontSize={28} weight="bold" color={TOKEN.foreground} {...pos(0.8, -0.16)}>
+          F
+        </GaugeText>
+        <GaugeText fontSize={28} weight="bold" color={TOKEN.foreground} {...pos(-0.8, -0.16)}>
+          E
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `fuel` from demos/fuel.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="heart-rate">
+    <tsx><![CDATA[
+const zones: Zone[] = [
+  { to: 100, color: TOKEN.muted },
+  { to: 160, color: TOKEN.primary },
+  { to: 200, color: TOKEN.foreground },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={60}
+        endAngle={300}
+        label={label}
+      >
+        <GaugeTrack width={14} />
+        <GaugeArc width={14} color={zoneColor(zones, value, TOKEN.foreground)} />
+        <GaugeZones
+          zones={zones}
+          width={4}
+          offset={-18}
+          gap={1.5}
+          cap="butt"
+          endCap="round"
+        />
+        <GaugeValue fontSize={96} font="rounded" weight="bold" />
+        <GaugeText fontSize={28} {...pos(0, -0.34)}>
+          bpm
+        </GaugeText>
+        <GaugeText fontSize={22} {...pos(0, 0.36)}>
+          Heart rate
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `heart-rate` from demos/heart-rate.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="internet-speed">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={60}
+        endAngle={300}
+        label={label}
+      >
+        <GaugeTrack width={18} />
+        <GaugeArc width={18} />
+        <GaugeTicks count={40} length={6} width={1.5} offset={-34} opacity={0.5} />
+        <GaugeText fontSize={20} {...pos(0, -0.7)}>
+          Download
+        </GaugeText>
+        <GaugeText fontSize={24} {...pos(0, -0.28)}>
+          Mbps
+        </GaugeText>
+        <GaugeValue fontSize={92} font="rounded" weight="bold" {...pos(0, 0.04)} />
+      </Gauge>
+]]></tsx>
+    <notes>Round template `internet-speed` from demos/internet-speed.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="nested-rings">
+    <tsx><![CDATA[
+const RING = {
+  stand: 'var(--highlight-cyan)',
+  exercise: 'var(--highlight-acid)',
+  move: 'var(--highlight-red)',
+} as const;
+
+<Gauge value={value} min={min} max={max} startAngle={180} endAngle={540} label={label}>
+        <GaugeTrack width={44} color={RING.move} opacity={0.18} />
+        <GaugeArc width={44} color={RING.move} />
+        <GaugeValue fontSize={52} font="rounded" weight="bold" {...pos(0, 0.08)} />
+        <GaugeText fontSize={20} font="rounded" weight="semibold" {...pos(0, -0.12)}>
+          {label}
+        </GaugeText>
+
+        <GaugeInset value={exercise} min={min} max={max} startAngle={180} endAngle={540} scale={0.74}>
+          <GaugeTrack width={60} color={RING.exercise} opacity={0.18} />
+          <GaugeArc width={60} color={RING.exercise} />
+        </GaugeInset>
+
+        <GaugeInset value={stand} min={min} max={max} startAngle={180} endAngle={540} scale={0.5}>
+          <GaugeTrack width={76} color={RING.stand} opacity={0.18} />
+          <GaugeArc width={76} color={RING.stand} />
+        </GaugeInset>
+      </Gauge>
+]]></tsx>
+    <notes>Concentric rings centre→rim cyan/acid/red (highlight); tracks share arc colour at low opacity.</notes>
+  </example>
+
+  <example title="optional-token-colors">
+    <tsx><![CDATA[
+{/* Omit color → part defaults (Track contrast, Arc primary, text foreground). */}
+<Gauge value={72} min={0} max={100} label="Charge">
+  <GaugeTrack width={20} />
+  <GaugeArc width={20} />
+  <GaugeValue fontSize={72} />
+</Gauge>
+
+{/* Optional: pass theme CSS vars on part `color` / zone entries. */}
+const zones: Zone[] = [
+  { to: 20, color: 'var(--highlight-red)' },
+  { to: 70, color: 'var(--highlight-yellow)' },
+  { to: 100, color: 'var(--highlight-green)' },
+];
+
+<Gauge value={value} min={0} max={100} label="Health">
+  <GaugeTrack width={16} color="var(--global-contrast)" opacity={0.35} />
+  <GaugeArc width={16} color={zoneColor(zones, value)} />
+  <GaugeZones zones={zones} width={5} offset={-18} gap={1} cap="butt" endCap="round" />
+  <GaugeTicks count={10} length={10} width={2} color="var(--global-foreground)" />
+  <GaugeNeedle
+    kind="pointer"
+    color="var(--global-primary)"
+    tailColor="var(--global-muted)"
+  />
+  <GaugeHub radius={10} color="var(--global-background)" />
+  <GaugeValue fontSize={64} color="var(--global-foreground)" />
+  <GaugeText fontSize={20} color="var(--global-muted)" {...pos(0, -0.34)}>
+    status
+  </GaugeText>
+</Gauge>
+]]></tsx>
+    <notes>Optional paint only. Defaults from props.xml. Chrome/labels → `--global-*`; status bands → `--highlight-*`. No Meter/Chip `variant` — use CSS var strings. Also see `nested-rings` for multi-highlight arcs.</notes>
+  </example>
+
+  <example title="orrery">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        <PlanetOrbit offset={0} size={7} />
+        <GaugeNeedle kind="line" length={0.1} width={1} tail={0} />
+        <GaugeHub radius={24} color={TOKEN.foreground} />
+
+        <GaugeInset
+          value={earth}
+          min={min}
+          max={max}
+          startAngle={180}
+          endAngle={540}
+          scale={1}
+          {...pos(0, 0)}
+        >
+          <PlanetOrbit offset={-40} size={9} />
+        </GaugeInset>
+
+        <GaugeInset
+          value={venus}
+          min={min}
+          max={max}
+          startAngle={180}
+          endAngle={540}
+          scale={1}
+          {...pos(0, 0)}
+        >
+          <PlanetOrbit offset={-80} size={8.5} />
+        </GaugeInset>
+
+        <GaugeInset
+          value={mercury}
+          min={min}
+          max={max}
+          startAngle={180}
+          endAngle={540}
+          scale={1}
+          {...pos(0, 0)}
+        >
+          <PlanetOrbit offset={-120} size={6} />
+        </GaugeInset>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `orrery` from demos/orrery.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="power-meter">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={90}
+        endAngle={270}
+        fit="content"
+        label={label}
+      >
+        <GaugeTrack width={20} cap="butt" />
+        <GaugeTicks
+          count={4}
+          length={14}
+          width={3}
+          offset={-24}
+          cap="butt"
+          color={TOKEN.foreground}
+        />
+        <GaugeTicks count={20} length={8} width={2} offset={-20} opacity={0.5} />
+        <GaugeTickLabels count={4} offset={-56} fontSize={22} weight="semibold" />
+        <GaugeNeedle kind="pointer" length={0.9} width={18} tail={0} />
+        <GaugeHub radius={16} />
+        <GaugeText fontSize={20} {...pos(-0.42, 0.16)}>
+          kW out
+        </GaugeText>
+        <GaugeText fontSize={20} {...pos(0.42, 0.16)}>
+          kW in
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `power-meter` from demos/power-meter.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="progress-ring">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={0}
+        endAngle={360}
+        label={label}
+      >
+        <GaugeTrack width={20} />
+        <GaugeArc width={20} />
+        <GaugeValue fontSize={84} font="sans" weight="semibold" />
+        <GaugeText fontSize={26} {...pos(0, -0.32)}>
+          %
+        </GaugeText>
+        <GaugeText fontSize={20} {...pos(0, 0.34)}>
+          Complete
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `progress-ring` from demos/progress-ring.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="range">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={40}
+        endAngle={320}
+        label={label}
+      >
+        <GaugeTrack width={28} cap="butt" />
+        <GaugeArc width={28} opacity={0.35} cap="butt" />
+        <GaugeTicks count={20} length={8} width={2} offset={-38} opacity={0.6} />
+        <GaugeDot end="from" radius={16} />
+        <GaugeDot end="to" radius={16} />
+        <GaugeValue fontSize={76} font="rounded" weight="bold" {...pos(0, 0.02)} />
+        <GaugeText fontSize={24} {...pos(0, -0.3)}>
+          °C
+        </GaugeText>
+        <GaugeText fontSize={20} weight="semibold" {...pos(0, 0.36)}>
+          Comfort
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `range` from demos/range.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="saas-metric">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={90}
+        endAngle={270}
+        fit="content"
+        label={label}
+      >
+        <GaugeTrack width={28} />
+        <GaugeArc width={28} />
+        <GaugeValue fontSize={84} weight="semibold" {...pos(0, 0.22)} />
+        <GaugeText fontSize={28} anchor="start" {...pos(0.27, 0.26)}>
+          %
+        </GaugeText>
+        <GaugeText fontSize={20} {...pos(0, -0.04)}>
+          Conversion rate
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `saas-metric` from demos/saas-metric.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="segments">
+    <tsx><![CDATA[
+<Gauge value={value} min={min} max={max} label={label}>
+        <GaugeTickFill
+          count={40}
+          length={28}
+          litLength={40}
+          width={7}
+          color={TOKEN.foreground}
+          dimColor={TOKEN.muted}
+        />
+        <GaugeValue fontSize={104} font="rounded" weight="bold" />
+        <GaugeText fontSize={26} {...pos(0, -0.34)}>
+          %
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `segments` from demos/segments.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="simple">
+    <tsx><![CDATA[
+<Gauge value={value} min={min} max={max} label={label}>
+        <GaugeTrack />
+        <GaugeArc />
+        <GaugeValue fontSize={104} />
+      </Gauge>
+]]></tsx>
+    <notes>Round template `simple` from demos/simple.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="speed-fuel">
+    <tsx><![CDATA[
+const zones: Zone[] = [
+  { to: 180, color: TOKEN.muted },
+  { to: 240, color: TOKEN.foreground },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={40}
+        endAngle={320}
+        label={label}
+      >
+        <GaugeZones zones={zones} width={8} gap={0} cap="butt" endCap="butt" />
+        <GaugeMarks values={zoneCutoffs(zones)} length={8} width={2} />
+        <GaugeTicks count={12} length={18} width={3} offset={-16} cap="butt" />
+        <GaugeTicks count={48} length={8} width={1.5} offset={-12} cap="butt" opacity={0.6} />
+        <GaugeTickLabels count={12} offset={-54} fontSize={20} weight="semibold" />
+        <GaugeInset
+          value={fuel}
+          min={0}
+          max={100}
+          startAngle={326}
+          endAngle={394}
+          scale={1}
+          {...pos(0, 0)}
+        >
+          <GaugeTrack width={8} color={TOKEN.muted} cap="butt" />
+          <GaugeArc
+            width={8}
+            color={TOKEN.muted}
+            cap="butt"
+            reverse
+          />
+          <GaugeTicks
+            count={4}
+            length={10}
+            width={2}
+            offset={-12}
+            cap="butt"
+            color={TOKEN.muted}
+          />
+          <GaugeText fontSize={20} weight="semibold" {...pos(-0.64, -0.94)}>
+            E
+          </GaugeText>
+          <GaugeText fontSize={20} weight="semibold" {...pos(0.64, -0.94)}>
+            F
+          </GaugeText>
+        </GaugeInset>
+        <GaugeNeedle kind="pointer" length={0.85} width={10} tail={32} />
+        <GaugeHub radius={12} />
+        <GaugeValue fontSize={40} font="mono" weight="semibold" {...pos(0, -0.28)} />
+        <GaugeText fontSize={16} {...pos(0, -0.44)}>
+          km/h
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `speed-fuel` from demos/speed-fuel.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="speedometer">
+    <tsx><![CDATA[
+const zones: Zone[] = [
+  { to: 180, color: 'var(--global-contrast)' },
+  { to: 240, color: 'var(--global-foreground)' },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={40}
+        endAngle={320}
+        label={label}
+      >
+        <GaugeZones zones={zones} width={8} gap={0} cap="butt" endCap="butt" />
+        <GaugeMarks values={zoneCutoffs(zones)} length={8} width={2} />
+        <GaugeTicks count={12} length={18} width={3} offset={-16} cap="butt" />
+        <GaugeTicks count={48} length={8} width={1.5} offset={-12} cap="butt" opacity={0.6} />
+        <GaugeTickLabels count={12} offset={-54} fontSize={20} weight="semibold" />
+        <GaugeNeedle kind="pointer" length={0.85} width={10} tail={32} />
+        <GaugeHub radius={12} />
+        <GaugeValue fontSize={44} font="mono" weight="semibold" {...pos(0, -0.46)} />
+        <GaugeText fontSize={18} {...pos(0, -0.64)}>
+          km/h
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `speedometer` from demos/speedometer.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="sprint">
+    <tsx><![CDATA[
+const RINGS: SprintRing[] = [
+  { x: -0.5, y: 0.5, value: 85, title: 'Design', done: 17, total: 20 },
+  { x: 0.5, y: 0.5, value: 12, title: 'QA', done: 3, total: 25 },
+  { x: -0.5, y: -0.5, value: 62, title: 'Frontend', done: 13, total: 21 },
+  { x: 0.5, y: -0.5, value: 38, title: 'Backend', done: 9, total: 24 },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        {RINGS.map((ring) => (
+          <GaugeInset
+            key={ring.title}
+            value={ring.value}
+            min={0}
+            max={100}
+            startAngle={180}
+            endAngle={540}
+            scale={0.42}
+            {...pos(ring.x, ring.y)}
+          >
+            <GaugeTrack width={36} />
+            <GaugeArc width={36} color={TOKEN.foreground} />
+            <GaugeText fontSize={52} weight="semibold" {...pos(0, 0)}>
+              {ring.title}
+            </GaugeText>
+            <GaugeTooltip
+              position="value"
+              label={`${ring.done} of ${ring.total} tasks`}
+              unit="%"
+            />
+          </GaugeInset>
+        ))}
+      </Gauge>
+]]></tsx>
+    <notes>Round template `sprint` from demos/sprint.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="sun-path">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={90}
+        endAngle={270}
+        fit="content"
+        label={label}
+      >
+        <GaugeTrack width={26} opacity={0.19} />
+        <GaugeArc width={24} color={TOKEN.contrast} />
+        <GaugeTicks count={24} length={2} width={3} offset={0} color={TOKEN.foreground} opacity={0.5} />
+        <GaugeDot radius={17.5} />
+        <GaugeText fontSize={19} font="rounded" weight="semibold" {...pos(0, 0.1)}>
+          06:12 – 18:04
+        </GaugeText>
+        <GaugeText
+          fontSize={24}
+          font="rounded"
+          weight="semibold"
+          color={TOKEN.foreground}
+          {...pos(0, 0.33)}
+        >
+          Daylight
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `sun-path` from demos/sun-path.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="system">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={90}
+        endAngle={270}
+        label={label}
+      >
+        <GaugeTrack width={26} />
+        <GaugeArc width={26} />
+        <GaugeValue fontSize={76} font="rounded" weight="bold" {...pos(-0.06, 0.3)} />
+        <GaugeText fontSize={26} anchor="start" {...pos(0.19, 0.34)}>
+          %
+        </GaugeText>
+        <GaugeText fontSize={22} {...pos(0, 0.62)}>
+          {label}
+        </GaugeText>
+        <HalfDialInset x={-0.5} value={mem} title="MEM" color={TOKEN.foreground} min={min} max={max} />
+        <HalfDialInset x={0.5} value={disk} title="DISK" color={TOKEN.muted} min={min} max={max} />
+      </Gauge>
+]]></tsx>
+    <notes>Round template `system` from demos/system.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="tachometer">
+    <tsx><![CDATA[
+const zones: Zone[] = [
+  { to: 6.5, color: TOKEN.muted },
+  { to: 8, color: TOKEN.foreground },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={40}
+        endAngle={320}
+        label={label}
+      >
+        <GaugeZones
+          zones={zones}
+          width={10}
+          offset={4}
+          gap={0}
+          cap="butt"
+          endCap="butt"
+        />
+        <GaugeMarks values={zoneCutoffs(zones)} length={8} width={2} />
+        <GaugeTicks count={8} length={18} width={3} offset={-16} cap="butt" />
+        <GaugeTicks count={40} length={8} width={1.5} offset={-12} cap="butt" opacity={0.6} />
+        <GaugeTickLabels count={8} offset={-52} fontSize={24} weight="bold" />
+        <GaugeNeedle kind="pointer" length={0.88} width={10} tail={30} />
+        <GaugeHub radius={12} />
+        <GaugeValue fontSize={44} font="mono" weight="semibold" decimals={1} {...pos(0, -0.46)} />
+        <GaugeText fontSize={16} {...pos(0, -0.64)}>
+          x1000 rpm
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `tachometer` from demos/tachometer.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="temperature">
+    <tsx><![CDATA[
+const zones: Zone[] = [
+  { to: 10, color: TOKEN.contrast },
+  { to: 26, color: TOKEN.primary },
+  { to: 40, color: TOKEN.foreground },
+];
+
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={40}
+        endAngle={320}
+        label={label}
+      >
+        <GaugeTrack width={16} />
+        <GaugeArc width={16} color={zoneColor(zones, value, TOKEN.foreground)} />
+        <GaugeZones
+          zones={zones}
+          width={6}
+          offset={-20}
+          gap={1}
+          cap="butt"
+          endCap="butt"
+          opacity={0.9}
+        />
+        <GaugeMarks values={zoneCutoffs(zones)} length={6} width={2} offset={-20} />
+        <GaugeTicks count={60} length={6} width={1.5} offset={-34} opacity={0.5} />
+        <GaugeDot radius={5} offset={-54} color={TOKEN.foreground} />
+        <GaugeValue fontSize={84} decimals={1} />
+        <GaugeText fontSize={28} {...pos(0, -0.34)}>
+          °C
+        </GaugeText>
+        <GaugeText fontSize={22} {...pos(0, 0.36)}>
+          Cabin
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `temperature` from demos/temperature.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="thermostat">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={40}
+        endAngle={320}
+        label={label}
+      >
+        <GaugeTrack width={26} cap="butt" />
+        <GaugeArc width={26} opacity={0.4} cap="butt" />
+        <GaugeTicks
+          count={80}
+          length={30}
+          width={2.5}
+          offset={0}
+          cap="butt"
+          color={TOKEN.background}
+          opacity={1}
+        />
+        <GaugeDot radius={13} />
+        <GaugeValue fontSize={88} font="rounded" weight="bold" decimals={1} {...pos(0, 0.02)} />
+        <GaugeText fontSize={24} {...pos(0, -0.32)}>
+          °C
+        </GaugeText>
+        <GaugeText fontSize={20} weight="semibold" {...pos(0, 0.4)}>
+          Heating
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `thermostat` from demos/thermostat.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="timer">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        <GaugeTrack width={8} cap="butt" />
+        <GaugeArc width={8} color={TOKEN.foreground} cap="butt" />
+        <GaugeTicks
+          count={12}
+          length={10}
+          width={2.5}
+          offset={18}
+          color={TOKEN.foreground}
+        />
+        <GaugeTicks
+          count={60}
+          length={5}
+          width={1.5}
+          offset={16}
+          opacity={0.5}
+        />
+        <GaugeValue
+          fontSize={110}
+          font="mono"
+          weight="regular"
+          {...pos(0, 0.04)}
+        />
+        <GaugeText fontSize={24} font="mono" {...pos(0, -0.3)}>
+          sec
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `timer` from demos/timer.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="volume">
+    <tsx><![CDATA[
+<GaugeControl
+        value={value}
+        onChange={setValue}
+        min={min}
+        max={max}
+        startAngle={40}
+        endAngle={320}
+        label={label}
+        knob
+      >
+        <Gauge
+          value={value}
+          min={min}
+          max={max}
+          startAngle={40}
+          endAngle={320}
+          padding={56}
+          transition={{ type: 'spring', visualDuration: 0.3, bounce: 0 }}
+          aria-hidden
+        >
+          <GaugeHub radius={156} color={TOKEN.muted} />
+          <GaugeTrack width={6} color={TOKEN.foreground} opacity={0.12} offset={-18} />
+          <GaugeArc width={6} color={TOKEN.foreground} offset={-18} />
+          <GaugeTicks
+            count={20}
+            length={12}
+            width={3}
+            offset={6}
+            cap="round"
+            color={TOKEN.contrast}
+            opacity={0.45}
+          />
+          <GaugeDot radius={11} offset={-76} color={TOKEN.foreground} />
+          <GaugeValue fontSize={64} font="rounded" weight="bold" />
+        </Gauge>
+      </GaugeControl>
+]]></tsx>
+    <notes>Round template `volume` from demos/volume.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+
+  <example title="wind">
+    <tsx><![CDATA[
+<Gauge
+        value={value}
+        min={min}
+        max={max}
+        startAngle={180}
+        endAngle={540}
+        label={label}
+      >
+        <GaugeTrack cap="butt" />
+        <GaugeTicks count={4} length={8} offset={0} />
+        <GaugeTicks count={36} length={4} width={3} offset={0} />
+        <GaugeTickLabels
+          count={4}
+          offset={-44}
+          fontSize={32}
+          font="rounded"
+          weight="bold"
+          format={compassLabel}
+        />
+        <GaugeNeedle
+          kind="arrow"
+          length={1.05}
+          width={7}
+          tail={200}
+          tailDot={12}
+          gap={84}
+        />
+        <GaugeText
+          fontSize={72}
+          font="rounded"
+          weight="bold"
+          color={TOKEN.foreground}
+          {...pos(0, 0.07)}
+        >
+          5
+        </GaugeText>
+        <GaugeText
+          fontSize={26}
+          font="rounded"
+          weight="medium"
+          color={TOKEN.muted}
+          {...pos(0, -0.16)}
+        >
+          m/s
+        </GaugeText>
+      </Gauge>
+]]></tsx>
+    <notes>Round template `wind` from demos/wind.tsx. Text/inset via pos() (y-up). Tokens: contrast not muted.</notes>
+  </example>
+</patterns>