@sovereignfs/ui 0.41.0 → 0.54.0

package/src/stories/SwipableMobileCarousel.stories.tsx

@@ -0,0 +1,304 @@
+import { useState } from 'react';
+import type { Meta, StoryObj } from '@storybook/react-vite';
+import { SwipableMobileCarousel } from '../components/SwipableMobileCarousel/SwipableMobileCarousel';
+import { SwipableMobileCarouselSlide } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlide';
+import { SwipableMobileCarouselSlideHeader } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideHeader';
+import { SwipableMobileCarouselSlideBody } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideBody';
+import { SwipableMobileCarouselSlideFooter } from '../components/SwipableMobileCarousel/SwipableMobileCarouselSlideFooter';
+import { SwipableMobileCarouselDots } from '../components/SwipableMobileCarouselDots/SwipableMobileCarouselDots';
+
+const SLIDES = [
+  { key: 'lists', label: 'Lists' },
+  { key: 'groceries', label: 'Groceries' },
+  { key: 'errands', label: 'Errands' },
+  { key: 'work', label: 'Work' },
+];
+
+function slideBodyStyle(): React.CSSProperties {
+  return {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    height: '100%',
+    fontFamily: 'var(--sv-font-family)',
+    color: 'var(--sv-color-text-primary)',
+  };
+}
+
+function headerStyle(): React.CSSProperties {
+  return {
+    padding: 'var(--sv-space-4)',
+    fontFamily: 'var(--sv-font-family)',
+    fontWeight: 'var(--sv-font-weight-semibold)',
+    color: 'var(--sv-color-text-primary)',
+    borderBottom: '1px solid var(--sv-color-border)',
+  };
+}
+
+function CarouselFrame({ children }: { children: React.ReactNode }) {
+  return (
+    <div
+      style={{
+        height: 480,
+        maxWidth: 375,
+        margin: '0 auto',
+        border: '1px solid var(--sv-color-border)',
+        borderRadius: 'var(--sv-radius-md)',
+        overflow: 'hidden',
+      }}
+    >
+      {children}
+    </div>
+  );
+}
+
+function DefaultDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={setActiveIndex}
+        aria-label="Task lists"
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody>
+              <div style={slideBodyStyle()}>{slide.label} content</div>
+            </SwipableMobileCarouselSlideBody>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function LazyLoadingBodyDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  const [loadedKeys, setLoadedKeys] = useState<Set<string>>(new Set(['lists']));
+
+  function simulateLoad(key: string) {
+    setTimeout(() => setLoadedKeys((s) => new Set(s).add(key)), 1200);
+  }
+
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={(i) => {
+          setActiveIndex(i);
+          const key = SLIDES[i]?.key;
+          if (key && !loadedKeys.has(key)) simulateLoad(key);
+        }}
+        aria-label="Task lists (simulated fetch)"
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            {/* The title renders immediately from already-known metadata —
+                only the Body below waits on its own simulated 1.2s fetch. */}
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody loading={!loadedKeys.has(slide.key)}>
+              <div style={slideBodyStyle()}>{slide.label} content (loaded)</div>
+            </SwipableMobileCarouselSlideBody>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function CustomIndicatorDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={setActiveIndex}
+        aria-label="Task lists"
+        renderIndicator={({ count, activeIndex: i, onJump }) => (
+          <div
+            style={{
+              position: 'absolute',
+              top: 8,
+              right: 8,
+              fontFamily: 'var(--sv-font-family)',
+              fontSize: 'var(--sv-font-size-sm)',
+              color: 'var(--sv-color-text-primary)',
+              background: 'var(--sv-color-surface-raised)',
+              borderRadius: 'var(--sv-radius-md)',
+              padding: 'var(--sv-space-1) var(--sv-space-2)',
+            }}
+          >
+            <button type="button" onClick={() => onJump(Math.max(0, i - 1))}>
+              ‹
+            </button>{' '}
+            {i + 1} / {count}{' '}
+            <button type="button" onClick={() => onJump(Math.min(count - 1, i + 1))}>
+              ›
+            </button>
+          </div>
+        )}
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody>
+              <div style={slideBodyStyle()}>{slide.label} content</div>
+            </SwipableMobileCarouselSlideBody>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function NoIndicatorDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={setActiveIndex}
+        aria-label="Task lists"
+        renderIndicator={null}
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody>
+              <div style={slideBodyStyle()}>{slide.label} content</div>
+            </SwipableMobileCarouselSlideBody>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function FooterDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <CarouselFrame>
+      <SwipableMobileCarousel
+        activeIndex={activeIndex}
+        onSettle={setActiveIndex}
+        aria-label="Task lists"
+      >
+        {SLIDES.map((slide) => (
+          <SwipableMobileCarouselSlide key={slide.key} slideKey={slide.key} label={slide.label}>
+            <SwipableMobileCarouselSlideHeader>
+              <div style={headerStyle()}>{slide.label}</div>
+            </SwipableMobileCarouselSlideHeader>
+            <SwipableMobileCarouselSlideBody>
+              <div style={slideBodyStyle()}>{slide.label} content</div>
+            </SwipableMobileCarouselSlideBody>
+            <SwipableMobileCarouselSlideFooter>
+              <div
+                style={{
+                  padding: 'var(--sv-space-3) var(--sv-space-4)',
+                  borderTop: '1px solid var(--sv-color-border)',
+                  fontFamily: 'var(--sv-font-family)',
+                  fontSize: 'var(--sv-font-size-sm)',
+                  color: 'var(--sv-color-text-muted)',
+                }}
+              >
+                + Add to {slide.label}
+              </div>
+            </SwipableMobileCarouselSlideFooter>
+          </SwipableMobileCarouselSlide>
+        ))}
+      </SwipableMobileCarousel>
+    </CarouselFrame>
+  );
+}
+
+function DotsStandaloneDemo() {
+  const [activeIndex, setActiveIndex] = useState(0);
+  return (
+    <SwipableMobileCarouselDots
+      count={4}
+      activeIndex={activeIndex}
+      onJump={setActiveIndex}
+      labels={['Lists', 'Groceries', 'Errands', 'Work']}
+      aria-label="Task lists"
+    />
+  );
+}
+
+const meta = {
+  title: 'Components/SwipableMobileCarousel',
+  component: SwipableMobileCarousel,
+  parameters: {
+    layout: 'padded',
+    docs: {
+      description: {
+        component:
+          "A compound component for swiping between full-width slides (each an independent route/view on mobile), wrapping useSnapCarousel. Owns rendering and mount-window mechanics only — it has no opinion on where slide data lives. Do NOT aggregate cross-slide data or mount a detail overlay (Sheet, Dialog) inside a Slide's children; see docs/design-system.md's carousel section.",
+      },
+    },
+  },
+  // Every story below supplies its own render(), which is stateful (activeIndex
+  // lives in useState) — these args only satisfy the required-prop typing.
+  args: {
+    activeIndex: 0,
+    onSettle: () => {},
+    'aria-label': 'Task lists',
+    children: null,
+  },
+} satisfies Meta<typeof SwipableMobileCarousel>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = { render: () => <DefaultDemo /> };
+
+export const LazyLoadingBody: Story = {
+  render: () => <LazyLoadingBodyDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Swipe to a new slide — its title renders immediately from already-known metadata, while only the Body region shows a brief loading placeholder for its simulated 1.2s fetch. This is the fix for the "whole slide blanks out, title included, until its own fetch resolves" bug.',
+      },
+    },
+  },
+};
+
+export const CustomIndicator: Story = { render: () => <CustomIndicatorDemo /> };
+
+export const NoIndicator: Story = { render: () => <NoIndicatorDemo /> };
+
+export const WithFooter: Story = { render: () => <FooterDemo /> };
+
+export const MobileViewport: Story = {
+  render: () => <DefaultDemo />,
+  parameters: { viewport: { defaultViewport: 'mobile1' } },
+};
+
+// ---------------------------------------------------------------------------
+// SwipableMobileCarouselDots — standalone, also this carousel's default
+// indicator. Grouped in this file rather than its own (Table's sub-parts
+// share one story file too), though it has its own component subfolder and
+// barrel export for independent reuse.
+// ---------------------------------------------------------------------------
+
+export const DotsStandalone: Story = {
+  render: () => <DotsStandaloneDemo />,
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'SwipableMobileCarouselDots used on its own, outside a carousel — a real role="tablist"/role="tab" component (tappable, labeled, focusable), unlike the aria-hidden decorative dots both sovereign-tasks and sovereign-shopper currently hand-roll.',
+      },
+    },
+  },
+};

package/src/stories/TokenGallery.stories.tsx

@@ -1,4 +1,4 @@
-import { useEffect, useState } from 'react';
+import { useEffect, useRef, useState } from 'react';
 import type { Meta, StoryObj } from '@storybook/react-vite';
 
 // ---------------------------------------------------------------------------
@@ -63,6 +63,34 @@ const RADIUS_TOKENS = [
   '--sv-radius-3xl',
   '--sv-radius-full',
 ];
+// RFC 0077 — instance corner-radius presets. Base px values mirror
+// primitives.css's own comments (sm 6px, md 8px, xl 12px at scale 1).
+//
+// Each swatch's radius is computed here in JS rather than by overriding
+// --sv-radius-scale on a local wrapper and letting --sv-radius-md etc.
+// recompute from it. That would be the more elegant approach, but CSS custom
+// properties don't support it: a custom property that references another
+// custom property inside calc() (--sv-radius-md: calc(var(--sv-radius-scale)
+// * 0.5rem)) has that inner reference resolved once, at the element where
+// --sv-radius-md itself is *declared* (:root in primitives.css) — not at
+// wherever it's later consumed via var(). A descendant overriding
+// --sv-radius-scale doesn't reach back and change --sv-radius-md's
+// already-fixed value (confirmed empirically — this isn't a guess). The
+// production mechanism (instance-provider.tsx) still works fine: its
+// override is injected as another :root { } rule, the *same* cascade node
+// primitives.css declares --sv-radius-md at, not a descendant — but a
+// side-by-side, multi-preset comparison on one page has no such single
+// :root to share, so the swatches below compute the resulting px directly.
+const RADIUS_PRESETS = [
+  { preset: 'none', scale: 0 },
+  { preset: 'xs', scale: 0.35 },
+  { preset: 's', scale: 0.65 },
+  { preset: 'm', scale: 1 },
+  { preset: 'l', scale: 2.75 },
+] as const;
+
+const RADIUS_BASE_PX = { sm: 6, md: 8, xl: 12 };
+
 const ICON_SIZE_TOKENS = [
   '--sv-icon-size-xs',
   '--sv-icon-size-sm',
@@ -81,6 +109,20 @@ const FONT_SIZE_TOKENS = [
   '--sv-font-size-2xl',
 ];
 
+// Task 10.2 — in-app text-size control. --sv-text-size-scale is theme-stable
+// like --sv-radius-scale, but unlike radius (a calc() chain resolved once at
+// :root's declaration site — see the RADIUS_PRESETS comment below), rem units
+// genuinely re-resolve against the root element's live computed font-size, so
+// these swatches compute the result directly in JS rather than needing a real
+// [data-text-size] toggle on the document root.
+const TEXT_SIZE_PRESETS = [
+  { preset: 'default', scale: 1 },
+  { preset: 'large', scale: 1.125 },
+  { preset: 'larger', scale: 1.25 },
+] as const;
+
+const TEXT_SIZE_BASE_PX = { md: 16, lg: 18, '2xl': 24 };
+
 const FONT_WEIGHT_TOKENS = [
   '--sv-font-weight-normal',
   '--sv-font-weight-medium',
@@ -189,6 +231,113 @@ function ScaleRow({
   );
 }
 
+// Radius tokens are calc() expressions since RFC 0077 (proportional to
+// --sv-radius-scale) — reading the raw custom property text now shows the
+// unresolved formula (e.g. "calc(1 * 0.375rem)"), not a pixel value. Render
+// the swatch, then read the browser's own computed border-radius off it
+// (a real CSS property, so calc() is fully resolved) instead of ScaleRow's
+// getPropertyValue text read.
+function RadiusScaleRow({ token }: { token: string }) {
+  const ref = useRef<HTMLDivElement>(null);
+  const [resolved, setResolved] = useState('');
+  useEffect(() => {
+    if (ref.current) setResolved(getComputedStyle(ref.current).borderRadius);
+  }, []);
+  return (
+    <div style={row}>
+      <div
+        ref={ref}
+        style={{
+          width: 40,
+          height: 24,
+          background: 'var(--sv-color-accent)',
+          borderRadius: `var(${token})`,
+          flexShrink: 0,
+        }}
+      />
+      <span style={label}>{token}</span>
+      <span style={value}>{resolved}</span>
+    </div>
+  );
+}
+
+function TextSizePresetRow({ preset, scale }: { preset: string; scale: number }) {
+  return (
+    <div style={row}>
+      <div style={{ display: 'flex', gap: 12, alignItems: 'baseline', flexShrink: 0, width: 180 }}>
+        <span
+          style={{
+            fontSize: `${scale * TEXT_SIZE_BASE_PX.md}px`,
+            color: 'var(--sv-color-text-primary)',
+          }}
+          title="body (--sv-font-size-md)"
+        >
+          Aa
+        </span>
+        <span
+          style={{
+            fontSize: `${scale * TEXT_SIZE_BASE_PX.lg}px`,
+            color: 'var(--sv-color-text-primary)',
+          }}
+          title="large (--sv-font-size-lg)"
+        >
+          Aa
+        </span>
+        <span
+          style={{
+            fontSize: `${scale * TEXT_SIZE_BASE_PX['2xl']}px`,
+            color: 'var(--sv-color-text-primary)',
+          }}
+          title="heading (--sv-font-size-2xl)"
+        >
+          Aa
+        </span>
+      </div>
+      <span style={label}>{preset}</span>
+      <span style={value}>scale {scale}</span>
+    </div>
+  );
+}
+
+function RadiusPresetRow({ preset, scale }: { preset: string; scale: number }) {
+  return (
+    <div style={row}>
+      <div style={{ display: 'flex', gap: 12, alignItems: 'center', flexShrink: 0 }}>
+        <div
+          style={{
+            width: 56,
+            height: 40,
+            background: 'var(--sv-color-surface-sunken)',
+            border: '1px solid var(--sv-color-border)',
+            borderRadius: `${scale * RADIUS_BASE_PX.xl}px`,
+          }}
+          title="card (--sv-radius-xl)"
+        />
+        <div
+          style={{
+            width: 64,
+            height: 36,
+            background: 'var(--sv-color-accent)',
+            borderRadius: `${scale * RADIUS_BASE_PX.md}px`,
+          }}
+          title="button, 36px tall (--sv-radius-md)"
+        />
+        <div
+          style={{
+            width: 48,
+            height: 18,
+            background: 'var(--sv-color-accent-subtle)',
+            borderRadius: `${scale * RADIUS_BASE_PX.sm}px`,
+          }}
+          title="badge, 18px tall (--sv-radius-sm)"
+        />
+      </div>
+      <span style={label}>{preset}</span>
+      <span style={value}>scale {scale}</span>
+    </div>
+  );
+}
+
 // Auto-loops so the duration/easing is visible without needing to interact —
 // same technique Dialog/Drawer use for their own open/close transition
 // (see motion.ts), just driven by a timer instead of an `open` prop.
@@ -349,23 +498,35 @@ function TokenGalleryComponent() {
         ))}
       </Section>
 
+      <Section title="Text-size presets (task 10.2)">
+        <p style={{ color: 'var(--sv-color-text-muted)', fontSize: 13, marginBottom: 12 }}>
+          Account → Preferences → Appearance. Overrides <code>--sv-text-size-scale</code> via{' '}
+          <code>[data-text-size]</code> on <code>&lt;html&gt;</code> — every rem-based token above
+          (font sizes, but also spacing and radii) scales with it, since the root element&apos;s
+          font-size is what rem resolves against. Discharges the accessibility debt from disabling
+          pinch-zoom (<code>runtime/app/layout.tsx</code>).
+        </p>
+        {TEXT_SIZE_PRESETS.map((p) => (
+          <TextSizePresetRow key={p.preset} preset={p.preset} scale={p.scale} />
+        ))}
+      </Section>
+
       <Section title="Radius scale">
         {RADIUS_TOKENS.map((t) => (
-          <ScaleRow
-            key={t}
-            token={t}
-            renderPreview={(_v) => (
-              <div
-                style={{
-                  width: 40,
-                  height: 24,
-                  background: 'var(--sv-color-accent)',
-                  borderRadius: `var(${t})`,
-                  flexShrink: 0,
-                }}
-              />
-            )}
-          />
+          <RadiusScaleRow key={t} token={t} />
+        ))}
+      </Section>
+
+      <Section title="Radius presets (RFC 0077)">
+        <p style={{ color: 'var(--sv-color-text-muted)', fontSize: 13, marginBottom: 12 }}>
+          Instance-level corner-radius intensity — Console → Instance identity, or{' '}
+          <code>INSTANCE_RADIUS</code>. Overrides <code>--sv-radius-scale</code>; every{' '}
+          <code>--sv-radius-*</code> token above stays proportional to it. Note how the button
+          swatch clips to a full pill by L — <code>border-radius</code>&apos;s own half-height
+          clamp, not a separate mechanism.
+        </p>
+        {RADIUS_PRESETS.map((p) => (
+          <RadiusPresetRow key={p.preset} preset={p.preset} scale={p.scale} />
         ))}
       </Section>
 

package/src/tokens/primitives.css

@@ -77,20 +77,44 @@
   --sv-font-weight-semibold: 600;
   --sv-font-weight-bold: 700;
 
+  /* In-app text-size control (task 10.2), discharging the pinch-zoom-disabled
+     accessibility debt (runtime/app/layout.tsx sets userScalable: false).
+     Every --sv-font-size-* above is rem-based, so scaling the root font size
+     scales the whole type system with no per-component changes. Driven by
+     [data-text-size] on <html>, set pre-paint by runtime/src/theme-script.ts
+     from the `sv-text-size` cookie — same mechanism as [data-theme]. Like
+     --sv-radius-scale, this is a theme-stable scale token with no separate
+     semantic tier. */
+  --sv-text-size-scale: 1;
+
   /* Icon sizes — scale tokens used directly by the Icon component */
   --sv-icon-size-xs: 0.75rem; /* 12px — inline metadata (e.g. a due-date badge) */
   --sv-icon-size-sm: 1rem; /* 16px — inline with body text */
   --sv-icon-size-md: 1.25rem; /* 20px — standard affordance */
   --sv-icon-size-lg: 1.5rem; /* 24px — prominent / standalone */
 
-  /* Border radii (v3.1 spec values) */
-  --sv-radius-sm: 0.375rem; /* 6px — badge, tag */
-  --sv-radius-md: 0.5rem; /* 8px — button, input */
-  --sv-radius-lg: 0.6875rem; /* 11px — sidebar icon, card */
-  --sv-radius-xl: 0.75rem; /* 12px — card, panel */
-  --sv-radius-2xl: 0.875rem; /* 14px — popover */
-  --sv-radius-3xl: 1.25rem; /* 20px — bottom sheet (Drawer top corners) */
-  --sv-radius-full: 9999px; /* pill / avatar */
+  /* Border radii (v3.1 spec values). --sv-radius-scale is the one
+     instance-controllable exception to "scale tokens are theme-stable"
+     (RFC 0077) — an operator's corner-radius preset (None/XS/S/M/L)
+     overrides it at :root via the InstanceProvider style injection
+     (runtime/src/instance-provider.tsx), same pipeline as --sv-color-accent.
+     Every corner token below is proportional to it, so a plugin author never
+     references --sv-radius-scale directly — they keep using --sv-radius-sm
+     etc. exactly as before. --sv-radius-full is deliberately NOT derived
+     from the scale: it's a shape token (circle/pill), not a corner-rounding
+     one, and stays fixed regardless of the instance preset. */
+  --sv-radius-scale: 1;
+  --sv-radius-sm: calc(var(--sv-radius-scale) * 0.375rem); /* 6px @ scale 1 — badge, tag */
+  --sv-radius-md: calc(var(--sv-radius-scale) * 0.5rem); /* 8px @ scale 1 — button, input */
+  --sv-radius-lg: calc(
+    var(--sv-radius-scale) * 0.6875rem
+  ); /* 11px @ scale 1 — sidebar icon, card */
+  --sv-radius-xl: calc(var(--sv-radius-scale) * 0.75rem); /* 12px @ scale 1 — card, panel */
+  --sv-radius-2xl: calc(var(--sv-radius-scale) * 0.875rem); /* 14px @ scale 1 — popover */
+  --sv-radius-3xl: calc(
+    var(--sv-radius-scale) * 1.25rem
+  ); /* 20px @ scale 1 — bottom sheet (Drawer top corners) */
+  --sv-radius-full: 9999px; /* pill / avatar — unaffected by --sv-radius-scale */
 
   /* Touch targets — minimum hit-area dimension for interactive controls.
      44px follows the WCAG 2.5.5 / Apple HIG / Material guideline for reliable
@@ -116,3 +140,18 @@
     1
   ); /* slight overshoot — playful emphasis, use sparingly */
 }
+
+/* Root font size scales with --sv-text-size-scale — see the token comment
+   above. calc(...  * 100%) keeps the browser/OS text-zoom default intact at
+   scale 1 rather than hardcoding a px value. */
+html {
+  font-size: calc(var(--sv-text-size-scale) * 100%);
+}
+
+:root[data-text-size='large'] {
+  --sv-text-size-scale: 1.125; /* +12.5% */
+}
+
+:root[data-text-size='larger'] {
+  --sv-text-size-scale: 1.25; /* +25% */
+}