@juwel-development/design-system 3.11.0 → 4.0.0

package/src/Theme/Palette.ts

@@ -10,7 +10,7 @@
  * Light and dark are two complete sets of the same roles rather than a set of `dark:` overrides
  * scattered through the components. A component therefore carries no dark-mode classes at all:
  * swapping the `.dark` class re-points the variables underneath it. Complete means `Required`: the
- * two roles the type marks optional are optional for a consumer's palette object, never here.
+ * roles the type marks optional are optional for a consumer's palette object, never here.
  *
  * The values below are still depot-tracker's brand (primary is its violet). They are carried over
  * so nothing changed visually during the extraction - a starting point to replace, not a decision.
@@ -18,6 +18,13 @@
 export type PaletteTokens = {
   /** Page and panel background. */
   surface: string;
+  /** Selected Table row surface, distinct from resting and hover surfaces. Keep foreground, muted
+   *  link and status inks at 4.5:1; marker, rule and focusRing at 3:1 in each scheme.
+   *  Optional for existing palette objects; CSS overrides inherit the shipped default. Consumers
+   *  composing other inks or controls on this surface must ensure their contrast too. */
+  selectedSurface?: string;
+  /** Error ink/fill on a selected surface: 4.5:1 against selectedSurface and errorForeground. */
+  selectedError?: string;
   /** Default text colour on `surface`. */
   foreground: string;
   /** De-emphasised text - captions, help text, placeholders. */
@@ -42,11 +49,11 @@ export type PaletteTokens = {
 
   /** The themed veil behind a Dialog, marking the page beneath as present but unavailable. The one
    *  role whose alpha is part of the colour - the page must show through, which a solid hex cannot
-   *  say - so it is an `rgb(r g b / a)` value, not a hex. Both shipped themes carry the same value;
-   *  the Dialog's modality never depends on the treatment, so no contrast constraint applies.
+   *  say - so it is an `rgb(r g b / a)` value, not a hex. Constraint: compositing over surface
+   *  must reduce its relative luminance by at least 50%; modality never depends on the treatment.
    *
    *  Migration (added with Dialog): a consumer constructing its own `PaletteTokens` object must
-   *  add this role - `rgb(15 23 42 / 0.5)` is the shipped value. Spreading `light`/`dark` and
+   *  add this role - `rgb(15 23 42 / 0.5)` is the light default. Spreading `light`/`dark` and
    *  overriding is unaffected, and a theme that only overrides the generated custom properties
    *  in CSS inherits the default. */
   scrim: string;
@@ -170,6 +177,8 @@ export type PaletteTokens = {
  */
 export const light: Required<PaletteTokens> = {
   surface: '#ffffff',
+  selectedSurface: '#f8fafc',
+  selectedError: '#cd2d7d',
   foreground: '#0f172a',
   muted: '#64748b',
   border: '#e2e8f0',
@@ -225,6 +234,8 @@ export const light: Required<PaletteTokens> = {
  */
 export const dark: Required<PaletteTokens> = {
   surface: '#0f172a',
+  selectedSurface: '#151e30',
+  selectedError: '#f48fb1',
   foreground: '#f8fafc',
   muted: '#94a3b8',
   border: '#334155',
@@ -232,7 +243,7 @@ export const dark: Required<PaletteTokens> = {
   rule: '#5b6a80',
   backing: '#1e293b',
 
-  scrim: 'rgb(15 23 42 / 0.5)',
+  scrim: 'rgb(0 0 0 / 0.6)',
 
   meterFill: '#f8fafc',
   meterTrack: '#334155',
@@ -246,7 +257,7 @@ export const dark: Required<PaletteTokens> = {
   secondaryForeground: '#020617',
 
   disabled: '#475569',
-  disabledHover: '#334155',
+  disabledHover: '#64748b',
 
   focusRing: '#cbd5e1',
 

package/src/Theme/renderTokens.ts

@@ -96,14 +96,20 @@ const TYPOGRAPHY = `@theme {
   --font-primary: inherit;
   --font-secondary: inherit;
 
+  /* Visual emphasis for body copy and annotations (#135), independent of family and size. */
+  --font-weight-strong: 700;
+
   /* Type roles, not a scale: one role per job, so a component asks for what its text is, never a rung.
      display > title > subtitle are the three heading steps H1-H3 bind to; H4-H6 share body and split
      by weight, so there is no fourth role. display is the hero and must out-scale every subpage head. */
-  --text-display: clamp(3rem, 7vw, 6rem);
+  /* At 1280, 1440 and 1920 CSS px (16px root), size(w / 2) / size(w) must be >= 0.75.
+     At 200% zoom the viewport halves, so physical growth is 2 * that ratio: at least 1.5x.
+     The rem terms preserve growth; at 1280px these sizes stay within 2px of the old vw clamps. */
+  --text-display: clamp(3rem, 3rem + 3.125vw, 6rem);
   --leading-display: 1.05;
-  --text-title: clamp(2.25rem, 5vw, 4.25rem);
+  --text-title: clamp(2.25rem, 2.25rem + 2.25vw, 4.25rem);
   --leading-title: 1.1;
-  --text-subtitle: clamp(1.5rem, 3vw, 2.25rem);
+  --text-subtitle: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
   --leading-subtitle: 1.2;
 
   /* The reading block's opening paragraph (Prose #21): sized above body and below subtitle, led
@@ -112,6 +118,10 @@ const TYPOGRAPHY = `@theme {
      subtitle was rejected in ADR 0004 - it welds the lede's size to H3's and its leading to a head's. */
   --text-lede: 1.25rem;  /* 20px */
   --leading-lede: 1.4;
+
+  /* Whole correspondence blocks, independently of opening ledes (Prose #128). */
+  --text-letter: 1.25rem;
+  --leading-letter: 1.8;
   --text-body: 1.0625rem;  /* 17px, floored at 16px: below it iOS Safari zooms the viewport when a control set at this role takes focus (#92) */
   --leading-body: 1.6;
   --text-small: 0.9375rem;  /* 15px floor: below it tabular figures stop comparing column to column */
@@ -126,7 +136,7 @@ const TYPOGRAPHY = `@theme {
   /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
      the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
      role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
-  --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
+  --text-dialog-title: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
   --leading-dialog-title: 1.2;
 
   /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
@@ -147,6 +157,9 @@ const FAMILY_ROLES = `@utility font-heading {
   font-family: var(--font-heading, var(--font-primary));
 }
 
+@utility font-letter {
+  font-family: var(--font-letter, var(--font-primary));
+}
 @utility font-body {
   font-family: var(--font-body, var(--font-primary));
 }
@@ -161,6 +174,7 @@ const FAMILY_ROLES = `@utility font-heading {
    the action column, in rem (docs/adr/0008, Amendments, #97); 20rem clears --control-min-width. */
 const MEASURE = `:root {
   --measure: 66ch;
+  --measure-letter: 60ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
   --measure-action: 20rem;
@@ -218,6 +232,20 @@ const DEFINITION_SPACING = `:root {
   initial-value: 1px;
 }`;
 
+// Resolve the fill row's width shortfall before its columns query the horizontal state.
+const COLUMN_LAYOUT_FIT = `@property --column-layout-shortfall {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 1px;
+}`;
+
+/* Callout's leading mark and separation from its content (#131). The mark stays visible at a
+   positive CSS length; its inset accepts a nonnegative CSS length and follows inherited type. */
+const CALLOUT_MARK = `:root {
+  --callout-mark-width: 0.25rem;
+  --space-callout-inset: 1em;
+}`;
+
 /* Box's inner padding (#117): one role on all four sides, distinct from a sibling gap, a region's
    air or a page band, so a brand tunes every Box at once and no Box gains a padding prop (ADR 0008,
    the token-role test). In em like --space-collection-item, so it tracks the inherited type.
@@ -286,6 +314,16 @@ const TICK = `:root {
   --tick-thickness: 1px;
 }`;
 
+/* Step geometry is independently themeable: positive marker size and line thicknesses,
+   nonnegative insets. The marker size must fit the consumer's font and ordinal count. */
+const STEPPER = `:root {
+  --step-marker-size: 2em;
+  --step-inset-inline: 1em;
+  --step-inset-block: 0.5em;
+  --step-connector-thickness: 1px;
+  --step-selection-thickness: 2px;
+}`;
+
 /* Tab label insets separate adjacent controls and give the label vertical breathing room.
    These are two axis-specific jobs, not a selectable scale; stack/region/band describe other jobs.
    Like those spacing roles, em tracks the label type. Non-negative values preserve the hit area. */
@@ -320,6 +358,13 @@ const SLIDER = `:root {
   --slider-thumb-size: 1.5rem;
 }`;
 
+/* Switch geometry is independent of choice markers: its track holds two thumb positions.
+   Both lengths must be positive; track width derives from the thumb so positions stay distinct. */
+const SWITCH = `:root {
+  --switch-thumb-size: 1rem;
+  --switch-track-inset: 0.125rem;
+}`;
+
 /* The choice marker's two dimensions are not colours: like the tick they live in :root only,
    never @theme inline, so a brand re-points the marker without Choices gaining a prop. Sized in
    rem like the tick and the slider thumb. Constraints: both > 0 (a zero dot erases the one cue
@@ -363,13 +408,8 @@ const declarations = (
     .map((name) => `  --color-${toKebabCase(name)}: ${value(name)};`)
     .join('\n');
 
-// The library no longer declares --color-ring but still reads it as a fallback, so a consumer's
-// existing value keeps working; the plain hex in the palette is the default and what the contrast
-// test checks. See docs/adr/0002-focus-ring-token-contract.md.
-const raw = (tokens: Required<PaletteTokens>) => (name: string) => {
-  const value = tokens[name as keyof PaletteTokens];
-  return name === 'focusRing' ? `var(--color-ring, ${value})` : value;
-};
+const raw = (tokens: Required<PaletteTokens>) => (name: string) =>
+  tokens[name as keyof PaletteTokens];
 const reference = () => (name: string) => `var(--color-${toKebabCase(name)})`;
 
 // Only the combined tokens.css carries the dark set; this gates it behind .dark and defines dark:.
@@ -406,7 +446,7 @@ ${UNDERLINE}
    utilities, so it is not carried in @theme inline with the palette. */
 ${TYPOGRAPHY}
 
-/* The heading, body and control family roles are utilities with a fallback to the primary face, not
+/* The heading, body, letter and control family roles are utilities with a fallback to the primary face, not
    @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
 ${FAMILY_ROLES}
 
@@ -433,9 +473,14 @@ ${COLLECTION_SPACING}
 /* DefinitionList's item air and column minimums sit in :root beside the collection role (#123). */
 ${DEFINITION_SPACING}
 
+${COLUMN_LAYOUT_FIT}
+
 /* Box's inner padding, measured against inherited type, beside Collection's. */
 ${BOX_INSET}
 
+/* Callout marks an edge without enclosing or arranging its content. */
+${CALLOUT_MARK}
+
 /* Table's cell insets, one pair per density, beside Box's. */
 ${TABLE_CELL_INSET}
 
@@ -459,11 +504,15 @@ ${TABLE_SELECTION_MARKER}
 
 ${TAB_INSETS}
 
+${STEPPER}
+
 ${SLIDER}
 
 /* The choice marker's dimensions are not colours either, and sit in :root beside the slider block. */
 ${CHOICE_MARKER}
 
+${SWITCH}
+
 /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
 ${METER_TRACK}
 

package/src/index.ts

@@ -1,20 +1,27 @@
-import './styles.css';
-
 export { Cluster } from 'Arrangement/Cluster/Cluster';
 export { ColumnLayout } from 'Arrangement/ColumnLayout/ColumnLayout';
+export { ColumnLayoutCompositionError } from 'Arrangement/ColumnLayout/ColumnLayoutCompositionError';
+export { ColumnLayoutConfigurationError } from 'Arrangement/ColumnLayout/ColumnLayoutConfigurationError';
 export { FieldRow } from 'Arrangement/FieldRow/FieldRow';
+export { FieldRowCompositionError } from 'Arrangement/FieldRow/FieldRowCompositionError';
+export { FieldRowConfigurationError } from 'Arrangement/FieldRow/FieldRowConfigurationError';
 export { Stack } from 'Arrangement/Stack/Stack';
 export { Box } from 'Display/Box/Box';
 export { Brandmark } from 'Display/Brandmark/Brandmark';
+export { Callout } from 'Display/Callout/Callout';
 export { Checklist } from 'Display/Checklist/Checklist';
 export { Collection } from 'Display/Collection/Collection';
 export { DefinitionList } from 'Display/DefinitionList/DefinitionList';
+export { DefinitionListConfigurationError } from 'Display/DefinitionList/DefinitionListConfigurationError';
 export { Figure } from 'Display/Figure/Figure';
 export { Icon } from 'Display/Icon/Icon';
 export { Meter } from 'Display/Meter/Meter';
+export { MeterConfigurationError } from 'Display/Meter/MeterConfigurationError';
 export { Rail } from 'Display/Rail/Rail';
+export { Rule } from 'Display/Rule/Rule';
 export type { TableColumnAllocation } from 'Display/Table/Table';
 export { Table } from 'Display/Table/Table';
+export { TableConfigurationError } from 'Display/Table/TableConfigurationError';
 export { Eyebrow } from 'Display/Typography/Eyebrow/Eyebrow';
 export { H1 } from 'Display/Typography/H1/H1';
 export { H2 } from 'Display/Typography/H2/H2';
@@ -27,24 +34,36 @@ export { P } from 'Display/Typography/P/P';
 export { Prose } from 'Display/Typography/Prose/Prose';
 export { Button } from 'Interaction/Button/Button';
 export { Choices } from 'Interaction/Choices/Choices';
+export { ChoicesCompositionError } from 'Interaction/Choices/ChoicesCompositionError';
 export { Input } from 'Interaction/Input/Input';
 export { Link } from 'Interaction/Link/Link';
 export { MultiSelect } from 'Interaction/MultiSelect/MultiSelect';
+export { MultiSelectCompositionError } from 'Interaction/MultiSelect/MultiSelectCompositionError';
 export { NumberInput } from 'Interaction/NumberInput/NumberInput';
 export { Select } from 'Interaction/Select/Select';
 export { Slider } from 'Interaction/Slider/Slider';
+export { SliderConfigurationError } from 'Interaction/Slider/SliderConfigurationError';
+export { Stepper } from 'Interaction/Stepper/Stepper';
+export { StepperCompositionError } from 'Interaction/Stepper/StepperCompositionError';
+export { Switch } from 'Interaction/Switch/Switch';
 export { Tabs } from 'Interaction/Tabs/Tabs';
+export { TabsCompositionError } from 'Interaction/Tabs/TabsCompositionError';
 export { TextArea } from 'Interaction/TextArea/TextArea';
 export { Cover } from 'Layout/Cover/Cover';
 export { Dialog } from 'Layout/Dialog/Dialog';
+export { DialogCompositionError } from 'Layout/Dialog/DialogCompositionError';
+export { DialogNamingError } from 'Layout/Dialog/DialogNamingError';
 export { Footer } from 'Layout/Footer/Footer';
 export type { FormState } from 'Layout/Form/Form';
 export { Form } from 'Layout/Form/Form';
+export { FormConfigurationError } from 'Layout/Form/FormConfigurationError';
 export { Header } from 'Layout/Header/Header';
 export { Hero } from 'Layout/Hero/Hero';
 export { PageHead } from 'Layout/PageHead/PageHead';
+export { Pane } from 'Layout/Pane/Pane';
 export { ScrollContainer } from 'Layout/ScrollContainer/ScrollContainer';
 export { Section } from 'Layout/Section/Section';
+export { Shell } from 'Layout/Shell/Shell';
 export { Sidebar } from 'Layout/Sidebar/Sidebar';
 export type { PaletteTokens } from 'Theme/Palette';
 export { dark, light } from 'Theme/Palette';

package/src/styles.css

@@ -1,9 +1,8 @@
 /* Component-level styles for the design system. */
-@import "tailwindcss";
+@import "tailwindcss" source(none);
 @import "./tokens.css";
 
-/* Scan the component sources explicitly so their utilities are generated no matter
-   which host imports this stylesheet. Tailwind's automatic content detection is
-   anchored to the consumer and skips node_modules, so a host pulling the components
-   in through a package would otherwise render them unstyled. */
-@source ".";
+/* Only component code contributes utilities to the published stylesheets. */
+@source "./**/*.tsx";
+@source not "./**/*.spec.tsx";
+@source not "./**/*.stories.tsx";

package/src/styles.dark.css

@@ -1,9 +1,8 @@
 /* Component-level styles for the design system, dark theme only (issue #62). */
-@import "tailwindcss";
+@import "tailwindcss" source(none);
 @import "./tokens.dark.css";
 
-/* Scan the component sources explicitly so their utilities are generated no matter
-   which host imports this stylesheet. Tailwind's automatic content detection is
-   anchored to the consumer and skips node_modules, so a host pulling the components
-   in through a package would otherwise render them unstyled. */
-@source ".";
+/* Only component code contributes utilities to the published stylesheets. */
+@source "./**/*.tsx";
+@source not "./**/*.spec.tsx";
+@source not "./**/*.stories.tsx";

package/src/styles.light.css

@@ -1,9 +1,8 @@
 /* Component-level styles for the design system, light theme only (issue #62). */
-@import "tailwindcss";
+@import "tailwindcss" source(none);
 @import "./tokens.light.css";
 
-/* Scan the component sources explicitly so their utilities are generated no matter
-   which host imports this stylesheet. Tailwind's automatic content detection is
-   anchored to the consumer and skips node_modules, so a host pulling the components
-   in through a package would otherwise render them unstyled. */
-@source ".";
+/* Only component code contributes utilities to the published stylesheets. */
+@source "./**/*.tsx";
+@source not "./**/*.spec.tsx";
+@source not "./**/*.stories.tsx";

package/src/tokens.css

@@ -11,6 +11,8 @@
 
 :root {
   --color-surface: #ffffff;
+  --color-selected-surface: #f8fafc;
+  --color-selected-error: #cd2d7d;
   --color-foreground: #0f172a;
   --color-muted: #64748b;
   --color-border: #e2e8f0;
@@ -28,7 +30,7 @@
   --color-secondary-foreground: #f8fafc;
   --color-disabled: #94a3b8;
   --color-disabled-hover: #64748b;
-  --color-focus-ring: var(--color-ring, #475569);
+  --color-focus-ring: #475569;
   --color-link: #2563eb;
   --color-success: #047857;
   --color-warning: #b45309;
@@ -40,13 +42,15 @@
 
 .dark {
   --color-surface: #0f172a;
+  --color-selected-surface: #151e30;
+  --color-selected-error: #f48fb1;
   --color-foreground: #f8fafc;
   --color-muted: #94a3b8;
   --color-border: #334155;
   --color-control-border: #94a3b8;
   --color-rule: #5b6a80;
   --color-backing: #1e293b;
-  --color-scrim: rgb(15 23 42 / 0.5);
+  --color-scrim: rgb(0 0 0 / 0.6);
   --color-meter-fill: #f8fafc;
   --color-meter-track: #334155;
   --color-primary: #8b5cf6;
@@ -56,8 +60,8 @@
   --color-secondary-hover: #38bdf8;
   --color-secondary-foreground: #020617;
   --color-disabled: #475569;
-  --color-disabled-hover: #334155;
-  --color-focus-ring: var(--color-ring, #cbd5e1);
+  --color-disabled-hover: #64748b;
+  --color-focus-ring: #cbd5e1;
   --color-link: #60a5fa;
   --color-success: #34d399;
   --color-warning: #fbbf24;
@@ -69,6 +73,8 @@
 
 @theme inline {
   --color-surface: var(--color-surface);
+  --color-selected-surface: var(--color-selected-surface);
+  --color-selected-error: var(--color-selected-error);
   --color-foreground: var(--color-foreground);
   --color-muted: var(--color-muted);
   --color-border: var(--color-border);
@@ -150,14 +156,20 @@
   --font-primary: inherit;
   --font-secondary: inherit;
 
+  /* Visual emphasis for body copy and annotations (#135), independent of family and size. */
+  --font-weight-strong: 700;
+
   /* Type roles, not a scale: one role per job, so a component asks for what its text is, never a rung.
      display > title > subtitle are the three heading steps H1-H3 bind to; H4-H6 share body and split
      by weight, so there is no fourth role. display is the hero and must out-scale every subpage head. */
-  --text-display: clamp(3rem, 7vw, 6rem);
+  /* At 1280, 1440 and 1920 CSS px (16px root), size(w / 2) / size(w) must be >= 0.75.
+     At 200% zoom the viewport halves, so physical growth is 2 * that ratio: at least 1.5x.
+     The rem terms preserve growth; at 1280px these sizes stay within 2px of the old vw clamps. */
+  --text-display: clamp(3rem, 3rem + 3.125vw, 6rem);
   --leading-display: 1.05;
-  --text-title: clamp(2.25rem, 5vw, 4.25rem);
+  --text-title: clamp(2.25rem, 2.25rem + 2.25vw, 4.25rem);
   --leading-title: 1.1;
-  --text-subtitle: clamp(1.5rem, 3vw, 2.25rem);
+  --text-subtitle: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
   --leading-subtitle: 1.2;
 
   /* The reading block's opening paragraph (Prose #21): sized above body and below subtitle, led
@@ -166,6 +178,10 @@
      subtitle was rejected in ADR 0004 - it welds the lede's size to H3's and its leading to a head's. */
   --text-lede: 1.25rem;  /* 20px */
   --leading-lede: 1.4;
+
+  /* Whole correspondence blocks, independently of opening ledes (Prose #128). */
+  --text-letter: 1.25rem;
+  --leading-letter: 1.8;
   --text-body: 1.0625rem;  /* 17px, floored at 16px: below it iOS Safari zooms the viewport when a control set at this role takes focus (#92) */
   --leading-body: 1.6;
   --text-small: 0.9375rem;  /* 15px floor: below it tabular figures stop comparing column to column */
@@ -180,7 +196,7 @@
   /* The Dialog title role: the top heading of an independent transitory task, deliberately outside
      the page heading ladder (docs/adr/0005). Ships subtitle's values while staying an independent
      role, so a consumer re-points Dialog titles without moving every H3 (docs/adr/0004, Amendments). */
-  --text-dialog-title: clamp(1.5rem, 3vw, 2.25rem);
+  --text-dialog-title: clamp(1.5rem, 1.5rem + 1vw, 2.25rem);
   --leading-dialog-title: 1.2;
 
   /* Two quantities on one property that must not collapse: --tracking-label is a fixed letter-spaced
@@ -191,12 +207,15 @@
   --tracking-optical: -0.02em;
 }
 
-/* The heading, body and control family roles are utilities with a fallback to the primary face, not
+/* The heading, body, letter and control family roles are utilities with a fallback to the primary face, not
    @theme variables, so a theme re-pointing either name at any scope reaches the text beneath it. */
 @utility font-heading {
   font-family: var(--font-heading, var(--font-primary));
 }
 
+@utility font-letter {
+  font-family: var(--font-letter, var(--font-primary));
+}
 @utility font-body {
   font-family: var(--font-body, var(--font-primary));
 }
@@ -219,6 +238,7 @@
    of controls rather than a reading line (docs/adr/0008, Amendments). */
 :root {
   --measure: 66ch;
+  --measure-letter: 60ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
   --measure-action: 20rem;
@@ -262,11 +282,23 @@
   initial-value: 1px;
 }
 
+@property --column-layout-shortfall {
+  syntax: "<length>";
+  inherits: false;
+  initial-value: 1px;
+}
+
 /* Box's inner padding, measured against inherited type, beside Collection's. */
 :root {
   --space-box-inset: 1em;
 }
 
+/* Callout marks an edge without enclosing or arranging its content. */
+:root {
+  --callout-mark-width: 0.25rem;
+  --space-callout-inset: 1em;
+}
+
 /* Table's cell insets, one pair per density, beside Box's. */
 :root {
   --table-cell-inset-inline: 1rem;
@@ -311,6 +343,14 @@
   --tab-inset-block: 0.5em;
 }
 
+:root {
+  --step-marker-size: 2em;
+  --step-inset-inline: 1em;
+  --step-inset-block: 0.5em;
+  --step-connector-thickness: 1px;
+  --step-selection-thickness: 2px;
+}
+
 :root {
   --slider-track-thickness: 0.25rem;
   --slider-thumb-size: 1.5rem;
@@ -322,6 +362,11 @@
   --choice-marker-dot-size: 0.5rem;
 }
 
+:root {
+  --switch-thumb-size: 1rem;
+  --switch-track-inset: 0.125rem;
+}
+
 /* The meter track's thickness is not a colour either, and sits in :root beside the tab blocks. */
 :root {
   --meter-track-thickness: 0.5rem;