@kenlo/sds-design-system 0.9.9

package/foundations/contrast.js

@@ -0,0 +1,74 @@
+/**
+ * Contrast maths and the label-colour rule, shared by the token generator and its tests.
+ *
+ * The rule, in one sentence: a label reads the step of its own family that gives the most
+ * contrast against the surface it sits on, and only falls back to white or black when the
+ * family itself cannot reach WCAG AA.
+ *
+ * Why this is generated rather than written by hand: KDLS wrote these values by eye, one
+ * declaration per family per tone per theme, and got a number of them wrong in a way that
+ * is invisible until someone squints at a badge. Deriving them from the token values means
+ * the palette can change and the labels follow.
+ */
+
+/** WCAG 2.1 minimum for normal-size text. Badge labels are 12–16px, so this is the bar. */
+export const AA_NORMAL = 4.5;
+/** WCAG 2.1 minimum for large text — the floor we accept when the family cannot do better. */
+export const AA_LARGE = 3;
+
+export const STEPS = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+
+export function relativeLuminance(hex) {
+  const n = parseInt(hex.replace(/^#/, '').slice(0, 6), 16);
+  const [r, g, b] = [(n >> 16) & 255, (n >> 8) & 255, n & 255].map((c) => {
+    const v = c / 255;
+    return v <= 0.03928 ? v / 12.92 : ((v + 0.055) / 1.055) ** 2.4;
+  });
+  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+export function contrastRatio(a, b) {
+  const [hi, lo] = [relativeLuminance(a), relativeLuminance(b)].sort((x, y) => y - x);
+  return (hi + 0.05) / (lo + 0.05);
+}
+
+const WHITE = '#FFFFFF';
+const BLACK = '#000000';
+
+/**
+ * A colour is never written as a literal in this design system. The fallback pair has
+ * tokens of its own, and callers emit those — the hex here exists only so the contrast
+ * maths has something to compute against.
+ */
+export const FALLBACK_TOKENS = {
+  [WHITE]: 'var(--color-white)',
+  [BLACK]: 'var(--color-black)',
+};
+
+/**
+ * Picks the label colour for one surface.
+ *
+ * `family` is a map of step -> hex for the family the surface belongs to. The best step of
+ * that family wins whenever it clears AA. Otherwise white or black takes over — whichever
+ * reads better — because an unreadable label that happens to be on-palette is still an
+ * unreadable label.
+ *
+ * Returns { step, hex, ratio, source } where source is 'family' or 'fallback'.
+ */
+export function pickLabelColour(background, family, { threshold = AA_NORMAL } = {}) {
+  const candidates = STEPS
+    .map((step) => ({ step, hex: family[step], ratio: contrastRatio(background, family[step]) }))
+    .sort((a, b) => b.ratio - a.ratio);
+
+  const best = candidates[0];
+  if (best.ratio >= threshold) return { ...best, source: 'family' };
+
+  const fallback = [WHITE, BLACK]
+    .map((hex) => ({ step: null, hex, ratio: contrastRatio(background, hex) }))
+    .sort((a, b) => b.ratio - a.ratio)[0];
+
+  // Only take the fallback if it is actually better — on a mid-tone it sometimes is not.
+  return fallback.ratio > best.ratio
+    ? { ...fallback, source: 'fallback' }
+    : { ...best, source: 'family' };
+}

package/foundations/custom-scheme.js

@@ -0,0 +1,222 @@
+/**
+ * Custom colour and custom gradient — the two ways a site fills the primary slot.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/ColorScheme/ColorScheme.ts.
+ * The tone table, the HSL conversions and the contrast pick are carried verbatim: their
+ * output is what the design team already approved, and changing the ramp would silently
+ * restyle every consumer.
+ *
+ * Divergences, all deliberate:
+ *   - `applyCustomScheme` is renamed `applyCustomColor`, for symmetry with its new twin;
+ *   - `applyCustomGradient` is new. It is the mechanism that replaces the Lya scheme:
+ *     the gradient machinery lives on, the Kenlo brand does not. It is deliberately not
+ *     surfaced — no preset [data-color-scheme] points at it and the portal exposes no
+ *     control. Plumbing installed, tap closed;
+ *   - an invalid hex throws. KDLS returned silently, which left the page mysteriously
+ *     unthemed after a typo;
+ *   - the React `useCustomScheme` hook is not ported. SDS is not React.
+ *
+ * Both paths write to the same --color-primary-10..90 slots, which is why no component
+ * needs to know which one is active: a gradient in that slot is exactly what the Lya
+ * scheme used to put there, and the components already know how to paint it.
+ */
+
+import { pickLabelColour, FALLBACK_TOKENS } from './contrast.js';
+
+const STYLE_ID = 'sds-custom-scheme';
+const TONES = [10, 20, 30, 40, 50, 60, 70, 80, 90];
+/** The tones a component uses as a surface, and therefore needs a label colour for. */
+const SURFACE_TONES = [10, 20, 30, 40, 50];
+const HEX = /^#?[0-9a-f]{6,8}$/i;
+
+function assertHex(hex) {
+  if (typeof hex !== 'string' || !HEX.test(hex.trim())) {
+    throw new Error(`Invalid hex color: ${hex}`);
+  }
+  return hex.trim();
+}
+
+function hexToHsl(hex) {
+  const clean = hex.replace(/^#/, '').slice(0, 6);
+  const n = parseInt(clean, 16);
+  const r = ((n >> 16) & 255) / 255;
+  const g = ((n >> 8) & 255) / 255;
+  const b = (n & 255) / 255;
+  const max = Math.max(r, g, b);
+  const min = Math.min(r, g, b);
+  const l = (max + min) / 2;
+  const d = max - min;
+  const s = d === 0 ? 0 : l > 0.5 ? d / (2 - max - min) : d / (max + min);
+  let h = 0;
+  if (d !== 0) {
+    if (max === r) h = ((g - b) / d + (g < b ? 6 : 0)) / 6;
+    else if (max === g) h = ((b - r) / d + 2) / 6;
+    else h = ((r - g) / d + 4) / 6;
+  }
+  return [h, s, l];
+}
+
+function hslToHex(h, s, l) {
+  if (s === 0) {
+    const v = Math.round(l * 255).toString(16).padStart(2, '0');
+    return `#${v}${v}${v}`.toUpperCase();
+  }
+  const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
+  const p = 2 * l - q;
+  const hue = (t) => {
+    if (t < 0) t += 1;
+    if (t > 1) t -= 1;
+    if (t < 1 / 6) return p + (q - p) * 6 * t;
+    if (t < 1 / 2) return q;
+    if (t < 2 / 3) return p + (q - p) * (2 / 3 - t) * 6;
+    return p;
+  };
+  const toHex = (x) => Math.round(hue(x) * 255).toString(16).padStart(2, '0');
+  return `#${toHex(h + 1 / 3)}${toHex(h)}${toHex(h - 1 / 3)}`.toUpperCase();
+}
+
+const lerp = (a, b, t) => a + (b - a) * t;
+
+/**
+ * The lightness and saturation transform for one tone. Carried verbatim from KDLS.
+ * Both the solid and the gradient path go through here, so the ramp can only be
+ * changed in one place.
+ */
+function toneTransform(h, s, l, tone) {
+  const table = {
+    10: [lerp(l, 0.95, 0.82), lerp(s, 0.25, 0.35)],
+    20: [lerp(l, 0.95, 0.63), s],
+    30: [lerp(l, 0.95, 0.43), s],
+    40: [lerp(l, 0.95, 0.22), s],
+    50: [l, s],
+    60: [lerp(l, 0.05, 0.20), s],
+    70: [lerp(l, 0.05, 0.40), Math.min(s * 1.04, 1)],
+    80: [lerp(l, 0.05, 0.60), Math.min(s * 1.07, 1)],
+    90: [lerp(l, 0.05, 0.80), Math.min(s * 1.10, 1)],
+  };
+  const [toneL, toneS] = table[tone];
+  return hslToHex(h, toneS, toneL);
+}
+
+/** Nine solid tones from one hex. */
+export function generatePalette(hex) {
+  const [h, s, l] = hexToHsl(assertHex(hex));
+  return TONES.reduce((acc, tone) => {
+    acc[tone] = toneTransform(h, s, l, tone);
+    return acc;
+  }, {});
+}
+
+/**
+ * Nine gradients from two or more stops. Each tone applies that tone's transform to
+ * every stop, so the ramp behaves like the solid palette does — tone 10 is the pale
+ * end of the whole gradient, tone 90 the deep end.
+ */
+export function generateGradientPalette(hexes) {
+  if (!Array.isArray(hexes) || hexes.length < 2) {
+    throw new Error('generateGradientPalette needs at least two stops');
+  }
+  const parsed = hexes.map((hex) => hexToHsl(assertHex(hex)));
+
+  return TONES.reduce((acc, tone) => {
+    const stops = parsed.map(([h, s, l]) => toneTransform(h, s, l, tone));
+    acc[tone] = `linear-gradient(90deg, ${stops.join(', ')})`;
+    return acc;
+  }, {});
+}
+
+/** WCAG relative luminance, deciding whether text on the colour is white or black. */
+/** The token for the contrast pick, so a literal never reaches the stylesheet. */
+export function onPrimaryToken(hex) {
+  return FALLBACK_TOKENS[onPrimaryColor(hex)];
+}
+
+export function onPrimaryColor(hex) {
+  const clean = assertHex(hex).replace(/^#/, '').slice(0, 6);
+  const n = parseInt(clean, 16);
+  const toLinear = (c) => (c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4);
+  const r = toLinear(((n >> 16) & 255) / 255);
+  const g = toLinear(((n >> 8) & 255) / 255);
+  const b = toLinear((n & 255) / 255);
+  const lum = 0.2126 * r + 0.7152 * g + 0.0722 * b;
+  return 1.05 / (lum + 0.05) >= (lum + 0.05) / 0.05 ? '#FFFFFF' : '#000000';
+}
+
+function invertPalette(light) {
+  return {
+    10: light[90], 20: light[80], 30: light[70], 40: light[60], 50: light[50],
+    60: light[40], 70: light[30], 80: light[20], 90: light[10],
+  };
+}
+
+/**
+ * A gradient is only valid where a surface is painted. `color`, `box-shadow` and
+ * `border-color` reject one, so the ramp is written twice: the slot carries whatever
+ * was generated, and the -solid companion carries a value those properties accept.
+ * For a solid ramp the two are identical; for a gradient the companion is the stop
+ * named by `solidOf`.
+ */
+/**
+ * The label colour for each tone, by the same rule the generated tokens follow: the step
+ * of this very ramp that reads best on that surface, falling back to white or black only
+ * where the ramp cannot reach AA.
+ *
+ * This is what makes a custom colour as accessible as a built-in palette. Without it, a
+ * site that themes itself pale would get a pale label on a pale surface, and nothing in
+ * the design system would notice.
+ */
+function labelVars(palette, solidOf) {
+  const solids = TONES.reduce((acc, t) => { acc[t] = solidOf(palette[t]); return acc; }, {});
+  return SURFACE_TONES
+    .map((t) => {
+      const pick = pickLabelColour(solids[t], solids);
+      // A step of the ramp is injected as its own value; the fallback pair is emitted as
+      // a token, so no literal colour is ever written into the page.
+      return `--color-primary-${t}-on:${FALLBACK_TOKENS[pick.hex] ?? pick.hex};`;
+    })
+    .join('');
+}
+
+function buildCss(light, dark, onColor, solidOf) {
+  const vars = (palette) => TONES
+    .map((t) => `--color-primary-${t}:${palette[t]};--color-primary-${t}-solid:${solidOf(palette[t])};`)
+    .join('') + labelVars(palette, solidOf);
+  return `:root{${vars(light)}--color-on-primary:${onColor};}`
+    + `[data-theme="dark"]{${vars(dark)}--color-on-primary:${onColor};}`;
+}
+
+/** The first stop of a gradient — the edge a left-aligned label starts against. */
+export function firstStopOf(value) {
+  const match = /#[0-9A-F]{6}/i.exec(value);
+  if (!match) throw new Error(`No colour stop found in: ${value}`);
+  return match[0];
+}
+
+/** One style element, reused. A second call replaces the first — the two never stack. */
+function inject(light, onColor, solidOf) {
+  let el = document.getElementById(STYLE_ID);
+  if (!el) {
+    el = document.createElement('style');
+    el.id = STYLE_ID;
+    document.head.appendChild(el);
+  }
+  el.textContent = buildCss(light, invertPalette(light), onColor, solidOf);
+}
+
+/** Fills the primary slot with a solid ramp generated from one hex. */
+export function applyCustomColor(hex) {
+  inject(generatePalette(hex), onPrimaryToken(hex), (value) => value);
+}
+
+/**
+ * Fills the primary slot with a gradient ramp generated from two or more stops.
+ * Text contrast is decided by the first stop — the gradient's own left edge, which is
+ * where a label starts.
+ */
+export function applyCustomGradient(hexes) {
+  inject(generateGradientPalette(hexes), onPrimaryToken(hexes[0]), firstStopOf);
+}
+
+export function clearCustomScheme() {
+  document.getElementById(STYLE_ID)?.remove();
+}

package/foundations/overlay.js

@@ -0,0 +1,108 @@
+/**
+ * What every overlay has to do, in one place.
+ *
+ * Modal, Drawer and BottomSheet are the same behaviour with different geometry: they cover
+ * the page, they take the keyboard while they are open, and they give it back afterwards.
+ * KDLS writes the scroll lock and the Escape handler separately in each of the three, and
+ * none of them manages focus at all — so a keyboard user can Tab straight out of an open
+ * modal and carry on in the page behind it, with no way to know where they are.
+ *
+ * Nothing here touches the DOM until `open` is called, so it is safe to construct on the
+ * server.
+ */
+
+/** Everything that can hold focus, minus the things that only look like they can. */
+const FOCUSABLE = [
+  'a[href]',
+  'button:not([disabled])',
+  'input:not([disabled]):not([type="hidden"])',
+  'select:not([disabled])',
+  'textarea:not([disabled])',
+  '[tabindex]:not([tabindex="-1"])',
+].join(',');
+
+export function focusableWithin(root) {
+  if (!root) return [];
+  return [...root.querySelectorAll(FOCUSABLE)].filter((el) => {
+    // offsetParent is null for display:none, and for position:fixed — which an overlay's
+    // own panel is — so the fixed case is checked by size instead.
+    if (el.hidden || el.getAttribute('aria-hidden') === 'true') return false;
+    const box = el.getBoundingClientRect();
+    return box.width > 0 || box.height > 0;
+  });
+}
+
+/**
+ * The scroll lock, counted.
+ *
+ * Two overlays open at once — a modal that opens a drawer — and the first one to close
+ * would hand the page back its scrollbar while the second is still covering it. So the
+ * locks are counted and the page is only released when the last one lets go.
+ */
+let lockCount = 0;
+let previousOverflow = '';
+
+export function lockScroll(doc = globalThis.document) {
+  if (!doc) return;
+  if (lockCount === 0) {
+    previousOverflow = doc.body.style.overflow;
+    doc.body.style.overflow = 'hidden';
+  }
+  lockCount += 1;
+}
+
+export function unlockScroll(doc = globalThis.document) {
+  if (!doc || lockCount === 0) return;
+  lockCount -= 1;
+  if (lockCount === 0) doc.body.style.overflow = previousOverflow;
+}
+
+/** Only for tests: the counter is module state and survives between them. */
+export function resetScrollLock(doc = globalThis.document) {
+  lockCount = 0;
+  if (doc) doc.body.style.overflow = '';
+}
+
+/**
+ * Keeps Tab inside `panel` while it is open, and puts focus back where it came from.
+ *
+ * Returns a release function. Calling it twice is harmless — an overlay that is destroyed
+ * while closing would otherwise restore focus to an element that has since moved on.
+ */
+export function trapFocus(panel, { doc = globalThis.document, initial } = {}) {
+  if (!panel || !doc) return () => {};
+
+  const returnTo = doc.activeElement;
+  let released = false;
+
+  const first = initial ?? focusableWithin(panel)[0] ?? panel;
+  // A panel with nothing focusable in it still has to take the keyboard, or Tab lands in
+  // the page behind. tabindex="-1" makes it focusable without putting it in the tab order.
+  if (first === panel && !panel.hasAttribute('tabindex')) panel.setAttribute('tabindex', '-1');
+  first.focus?.();
+
+  const onKeyDown = (event) => {
+    if (event.key !== 'Tab') return;
+    const stops = focusableWithin(panel);
+    if (!stops.length) {
+      event.preventDefault();
+      return;
+    }
+    const edge = event.shiftKey ? stops[0] : stops[stops.length - 1];
+    if (doc.activeElement === edge || !panel.contains(doc.activeElement)) {
+      event.preventDefault();
+      (event.shiftKey ? stops[stops.length - 1] : stops[0]).focus();
+    }
+  };
+
+  doc.addEventListener('keydown', onKeyDown, true);
+
+  return () => {
+    if (released) return;
+    released = true;
+    doc.removeEventListener('keydown', onKeyDown, true);
+    // Only if it is still there: the thing that opened the overlay may have been removed
+    // by what the overlay did.
+    if (returnTo && doc.contains(returnTo)) returnTo.focus?.();
+  };
+}

package/foundations/styles.css

@@ -0,0 +1,284 @@
+/* ============================================================
+   SDS — Spacing utilities (opt-in)
+   Carried from kdls-design-system v2.5.1 (0f3edf8) with the kdls- to sds- rename.
+
+   Import:  @kenlo/sds-design-system/foundations/styles.css
+   Brings the tokens and the scrollbar utility along (self-contained),
+   so it works standalone, no need to use components.
+
+   Classes with the SAME names as Tailwind (p-4, gap-2, mx-auto…),
+   with the value coming from the tokens. Do NOT load alongside Tailwind —
+   pick one: this file OR the preset (tailwind-preset).
+
+   GENERATED by scripts/gen-styles.mjs (npm run gen:styles) — do not hand-edit.
+   ============================================================ */
+
+@import './tokens.css';
+@import './Scrollbar/Scrollbar.css';
+
+/* ── Padding ── */
+.p-0\.5 { padding: var(--spacing-0-5); }
+.p-1 { padding: var(--spacing-1); }
+.p-2 { padding: var(--spacing-2); }
+.p-3 { padding: var(--spacing-3); }
+.p-4 { padding: var(--spacing-4); }
+.p-5 { padding: var(--spacing-5); }
+.p-6 { padding: var(--spacing-6); }
+.p-7 { padding: var(--spacing-7); }
+.p-8 { padding: var(--spacing-8); }
+.p-9 { padding: var(--spacing-9); }
+.p-10 { padding: var(--spacing-10); }
+.p-12 { padding: var(--spacing-12); }
+.p-14 { padding: var(--spacing-14); }
+.p-16 { padding: var(--spacing-16); }
+.px-0\.5 { padding-left: var(--spacing-0-5); padding-right: var(--spacing-0-5); }
+.px-1 { padding-left: var(--spacing-1); padding-right: var(--spacing-1); }
+.px-2 { padding-left: var(--spacing-2); padding-right: var(--spacing-2); }
+.px-3 { padding-left: var(--spacing-3); padding-right: var(--spacing-3); }
+.px-4 { padding-left: var(--spacing-4); padding-right: var(--spacing-4); }
+.px-5 { padding-left: var(--spacing-5); padding-right: var(--spacing-5); }
+.px-6 { padding-left: var(--spacing-6); padding-right: var(--spacing-6); }
+.px-7 { padding-left: var(--spacing-7); padding-right: var(--spacing-7); }
+.px-8 { padding-left: var(--spacing-8); padding-right: var(--spacing-8); }
+.px-9 { padding-left: var(--spacing-9); padding-right: var(--spacing-9); }
+.px-10 { padding-left: var(--spacing-10); padding-right: var(--spacing-10); }
+.px-12 { padding-left: var(--spacing-12); padding-right: var(--spacing-12); }
+.px-14 { padding-left: var(--spacing-14); padding-right: var(--spacing-14); }
+.px-16 { padding-left: var(--spacing-16); padding-right: var(--spacing-16); }
+.py-0\.5 { padding-top: var(--spacing-0-5); padding-bottom: var(--spacing-0-5); }
+.py-1 { padding-top: var(--spacing-1); padding-bottom: var(--spacing-1); }
+.py-2 { padding-top: var(--spacing-2); padding-bottom: var(--spacing-2); }
+.py-3 { padding-top: var(--spacing-3); padding-bottom: var(--spacing-3); }
+.py-4 { padding-top: var(--spacing-4); padding-bottom: var(--spacing-4); }
+.py-5 { padding-top: var(--spacing-5); padding-bottom: var(--spacing-5); }
+.py-6 { padding-top: var(--spacing-6); padding-bottom: var(--spacing-6); }
+.py-7 { padding-top: var(--spacing-7); padding-bottom: var(--spacing-7); }
+.py-8 { padding-top: var(--spacing-8); padding-bottom: var(--spacing-8); }
+.py-9 { padding-top: var(--spacing-9); padding-bottom: var(--spacing-9); }
+.py-10 { padding-top: var(--spacing-10); padding-bottom: var(--spacing-10); }
+.py-12 { padding-top: var(--spacing-12); padding-bottom: var(--spacing-12); }
+.py-14 { padding-top: var(--spacing-14); padding-bottom: var(--spacing-14); }
+.py-16 { padding-top: var(--spacing-16); padding-bottom: var(--spacing-16); }
+.pt-0\.5 { padding-top: var(--spacing-0-5); }
+.pt-1 { padding-top: var(--spacing-1); }
+.pt-2 { padding-top: var(--spacing-2); }
+.pt-3 { padding-top: var(--spacing-3); }
+.pt-4 { padding-top: var(--spacing-4); }
+.pt-5 { padding-top: var(--spacing-5); }
+.pt-6 { padding-top: var(--spacing-6); }
+.pt-7 { padding-top: var(--spacing-7); }
+.pt-8 { padding-top: var(--spacing-8); }
+.pt-9 { padding-top: var(--spacing-9); }
+.pt-10 { padding-top: var(--spacing-10); }
+.pt-12 { padding-top: var(--spacing-12); }
+.pt-14 { padding-top: var(--spacing-14); }
+.pt-16 { padding-top: var(--spacing-16); }
+.pr-0\.5 { padding-right: var(--spacing-0-5); }
+.pr-1 { padding-right: var(--spacing-1); }
+.pr-2 { padding-right: var(--spacing-2); }
+.pr-3 { padding-right: var(--spacing-3); }
+.pr-4 { padding-right: var(--spacing-4); }
+.pr-5 { padding-right: var(--spacing-5); }
+.pr-6 { padding-right: var(--spacing-6); }
+.pr-7 { padding-right: var(--spacing-7); }
+.pr-8 { padding-right: var(--spacing-8); }
+.pr-9 { padding-right: var(--spacing-9); }
+.pr-10 { padding-right: var(--spacing-10); }
+.pr-12 { padding-right: var(--spacing-12); }
+.pr-14 { padding-right: var(--spacing-14); }
+.pr-16 { padding-right: var(--spacing-16); }
+.pb-0\.5 { padding-bottom: var(--spacing-0-5); }
+.pb-1 { padding-bottom: var(--spacing-1); }
+.pb-2 { padding-bottom: var(--spacing-2); }
+.pb-3 { padding-bottom: var(--spacing-3); }
+.pb-4 { padding-bottom: var(--spacing-4); }
+.pb-5 { padding-bottom: var(--spacing-5); }
+.pb-6 { padding-bottom: var(--spacing-6); }
+.pb-7 { padding-bottom: var(--spacing-7); }
+.pb-8 { padding-bottom: var(--spacing-8); }
+.pb-9 { padding-bottom: var(--spacing-9); }
+.pb-10 { padding-bottom: var(--spacing-10); }
+.pb-12 { padding-bottom: var(--spacing-12); }
+.pb-14 { padding-bottom: var(--spacing-14); }
+.pb-16 { padding-bottom: var(--spacing-16); }
+.pl-0\.5 { padding-left: var(--spacing-0-5); }
+.pl-1 { padding-left: var(--spacing-1); }
+.pl-2 { padding-left: var(--spacing-2); }
+.pl-3 { padding-left: var(--spacing-3); }
+.pl-4 { padding-left: var(--spacing-4); }
+.pl-5 { padding-left: var(--spacing-5); }
+.pl-6 { padding-left: var(--spacing-6); }
+.pl-7 { padding-left: var(--spacing-7); }
+.pl-8 { padding-left: var(--spacing-8); }
+.pl-9 { padding-left: var(--spacing-9); }
+.pl-10 { padding-left: var(--spacing-10); }
+.pl-12 { padding-left: var(--spacing-12); }
+.pl-14 { padding-left: var(--spacing-14); }
+.pl-16 { padding-left: var(--spacing-16); }
+
+/* ── Margin ── */
+.m-0\.5 { margin: var(--spacing-0-5); }
+.m-1 { margin: var(--spacing-1); }
+.m-2 { margin: var(--spacing-2); }
+.m-3 { margin: var(--spacing-3); }
+.m-4 { margin: var(--spacing-4); }
+.m-5 { margin: var(--spacing-5); }
+.m-6 { margin: var(--spacing-6); }
+.m-7 { margin: var(--spacing-7); }
+.m-8 { margin: var(--spacing-8); }
+.m-9 { margin: var(--spacing-9); }
+.m-10 { margin: var(--spacing-10); }
+.m-12 { margin: var(--spacing-12); }
+.m-14 { margin: var(--spacing-14); }
+.m-16 { margin: var(--spacing-16); }
+.mx-0\.5 { margin-left: var(--spacing-0-5); margin-right: var(--spacing-0-5); }
+.mx-1 { margin-left: var(--spacing-1); margin-right: var(--spacing-1); }
+.mx-2 { margin-left: var(--spacing-2); margin-right: var(--spacing-2); }
+.mx-3 { margin-left: var(--spacing-3); margin-right: var(--spacing-3); }
+.mx-4 { margin-left: var(--spacing-4); margin-right: var(--spacing-4); }
+.mx-5 { margin-left: var(--spacing-5); margin-right: var(--spacing-5); }
+.mx-6 { margin-left: var(--spacing-6); margin-right: var(--spacing-6); }
+.mx-7 { margin-left: var(--spacing-7); margin-right: var(--spacing-7); }
+.mx-8 { margin-left: var(--spacing-8); margin-right: var(--spacing-8); }
+.mx-9 { margin-left: var(--spacing-9); margin-right: var(--spacing-9); }
+.mx-10 { margin-left: var(--spacing-10); margin-right: var(--spacing-10); }
+.mx-12 { margin-left: var(--spacing-12); margin-right: var(--spacing-12); }
+.mx-14 { margin-left: var(--spacing-14); margin-right: var(--spacing-14); }
+.mx-16 { margin-left: var(--spacing-16); margin-right: var(--spacing-16); }
+.my-0\.5 { margin-top: var(--spacing-0-5); margin-bottom: var(--spacing-0-5); }
+.my-1 { margin-top: var(--spacing-1); margin-bottom: var(--spacing-1); }
+.my-2 { margin-top: var(--spacing-2); margin-bottom: var(--spacing-2); }
+.my-3 { margin-top: var(--spacing-3); margin-bottom: var(--spacing-3); }
+.my-4 { margin-top: var(--spacing-4); margin-bottom: var(--spacing-4); }
+.my-5 { margin-top: var(--spacing-5); margin-bottom: var(--spacing-5); }
+.my-6 { margin-top: var(--spacing-6); margin-bottom: var(--spacing-6); }
+.my-7 { margin-top: var(--spacing-7); margin-bottom: var(--spacing-7); }
+.my-8 { margin-top: var(--spacing-8); margin-bottom: var(--spacing-8); }
+.my-9 { margin-top: var(--spacing-9); margin-bottom: var(--spacing-9); }
+.my-10 { margin-top: var(--spacing-10); margin-bottom: var(--spacing-10); }
+.my-12 { margin-top: var(--spacing-12); margin-bottom: var(--spacing-12); }
+.my-14 { margin-top: var(--spacing-14); margin-bottom: var(--spacing-14); }
+.my-16 { margin-top: var(--spacing-16); margin-bottom: var(--spacing-16); }
+.mt-0\.5 { margin-top: var(--spacing-0-5); }
+.mt-1 { margin-top: var(--spacing-1); }
+.mt-2 { margin-top: var(--spacing-2); }
+.mt-3 { margin-top: var(--spacing-3); }
+.mt-4 { margin-top: var(--spacing-4); }
+.mt-5 { margin-top: var(--spacing-5); }
+.mt-6 { margin-top: var(--spacing-6); }
+.mt-7 { margin-top: var(--spacing-7); }
+.mt-8 { margin-top: var(--spacing-8); }
+.mt-9 { margin-top: var(--spacing-9); }
+.mt-10 { margin-top: var(--spacing-10); }
+.mt-12 { margin-top: var(--spacing-12); }
+.mt-14 { margin-top: var(--spacing-14); }
+.mt-16 { margin-top: var(--spacing-16); }
+.mr-0\.5 { margin-right: var(--spacing-0-5); }
+.mr-1 { margin-right: var(--spacing-1); }
+.mr-2 { margin-right: var(--spacing-2); }
+.mr-3 { margin-right: var(--spacing-3); }
+.mr-4 { margin-right: var(--spacing-4); }
+.mr-5 { margin-right: var(--spacing-5); }
+.mr-6 { margin-right: var(--spacing-6); }
+.mr-7 { margin-right: var(--spacing-7); }
+.mr-8 { margin-right: var(--spacing-8); }
+.mr-9 { margin-right: var(--spacing-9); }
+.mr-10 { margin-right: var(--spacing-10); }
+.mr-12 { margin-right: var(--spacing-12); }
+.mr-14 { margin-right: var(--spacing-14); }
+.mr-16 { margin-right: var(--spacing-16); }
+.mb-0\.5 { margin-bottom: var(--spacing-0-5); }
+.mb-1 { margin-bottom: var(--spacing-1); }
+.mb-2 { margin-bottom: var(--spacing-2); }
+.mb-3 { margin-bottom: var(--spacing-3); }
+.mb-4 { margin-bottom: var(--spacing-4); }
+.mb-5 { margin-bottom: var(--spacing-5); }
+.mb-6 { margin-bottom: var(--spacing-6); }
+.mb-7 { margin-bottom: var(--spacing-7); }
+.mb-8 { margin-bottom: var(--spacing-8); }
+.mb-9 { margin-bottom: var(--spacing-9); }
+.mb-10 { margin-bottom: var(--spacing-10); }
+.mb-12 { margin-bottom: var(--spacing-12); }
+.mb-14 { margin-bottom: var(--spacing-14); }
+.mb-16 { margin-bottom: var(--spacing-16); }
+.ml-0\.5 { margin-left: var(--spacing-0-5); }
+.ml-1 { margin-left: var(--spacing-1); }
+.ml-2 { margin-left: var(--spacing-2); }
+.ml-3 { margin-left: var(--spacing-3); }
+.ml-4 { margin-left: var(--spacing-4); }
+.ml-5 { margin-left: var(--spacing-5); }
+.ml-6 { margin-left: var(--spacing-6); }
+.ml-7 { margin-left: var(--spacing-7); }
+.ml-8 { margin-left: var(--spacing-8); }
+.ml-9 { margin-left: var(--spacing-9); }
+.ml-10 { margin-left: var(--spacing-10); }
+.ml-12 { margin-left: var(--spacing-12); }
+.ml-14 { margin-left: var(--spacing-14); }
+.ml-16 { margin-left: var(--spacing-16); }
+
+/* ── Gap ── */
+.gap-0\.5 { gap: var(--spacing-0-5); }
+.gap-1 { gap: var(--spacing-1); }
+.gap-2 { gap: var(--spacing-2); }
+.gap-3 { gap: var(--spacing-3); }
+.gap-4 { gap: var(--spacing-4); }
+.gap-5 { gap: var(--spacing-5); }
+.gap-6 { gap: var(--spacing-6); }
+.gap-7 { gap: var(--spacing-7); }
+.gap-8 { gap: var(--spacing-8); }
+.gap-9 { gap: var(--spacing-9); }
+.gap-10 { gap: var(--spacing-10); }
+.gap-12 { gap: var(--spacing-12); }
+.gap-14 { gap: var(--spacing-14); }
+.gap-16 { gap: var(--spacing-16); }
+.gap-x-0\.5 { column-gap: var(--spacing-0-5); }
+.gap-x-1 { column-gap: var(--spacing-1); }
+.gap-x-2 { column-gap: var(--spacing-2); }
+.gap-x-3 { column-gap: var(--spacing-3); }
+.gap-x-4 { column-gap: var(--spacing-4); }
+.gap-x-5 { column-gap: var(--spacing-5); }
+.gap-x-6 { column-gap: var(--spacing-6); }
+.gap-x-7 { column-gap: var(--spacing-7); }
+.gap-x-8 { column-gap: var(--spacing-8); }
+.gap-x-9 { column-gap: var(--spacing-9); }
+.gap-x-10 { column-gap: var(--spacing-10); }
+.gap-x-12 { column-gap: var(--spacing-12); }
+.gap-x-14 { column-gap: var(--spacing-14); }
+.gap-x-16 { column-gap: var(--spacing-16); }
+.gap-y-0\.5 { row-gap: var(--spacing-0-5); }
+.gap-y-1 { row-gap: var(--spacing-1); }
+.gap-y-2 { row-gap: var(--spacing-2); }
+.gap-y-3 { row-gap: var(--spacing-3); }
+.gap-y-4 { row-gap: var(--spacing-4); }
+.gap-y-5 { row-gap: var(--spacing-5); }
+.gap-y-6 { row-gap: var(--spacing-6); }
+.gap-y-7 { row-gap: var(--spacing-7); }
+.gap-y-8 { row-gap: var(--spacing-8); }
+.gap-y-9 { row-gap: var(--spacing-9); }
+.gap-y-10 { row-gap: var(--spacing-10); }
+.gap-y-12 { row-gap: var(--spacing-12); }
+.gap-y-14 { row-gap: var(--spacing-14); }
+.gap-y-16 { row-gap: var(--spacing-16); }
+
+/* ── Margin auto ── */
+.m-auto { margin: auto; }
+.mx-auto { margin-left: auto; margin-right: auto; }
+.my-auto { margin-top: auto; margin-bottom: auto; }
+.mt-auto { margin-top: auto; }
+.mr-auto { margin-right: auto; }
+.mb-auto { margin-bottom: auto; }
+.ml-auto { margin-left: auto; }
+
+/* ── Visually hidden ──
+   Text only a screen reader reads. Not `display: none` and not `visibility: hidden`:
+   both of those remove the element from the accessibility tree as well, which is the
+   opposite of the point. A control whose visible content is its *value* — a select
+   trigger showing "20" — needs its name supplied this way. */
+.sds-visually-hidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}