@juwel-development/design-system 3.11.0 → 4.1.0

package/src/Layout/Shell/Shell.tsx

@@ -0,0 +1,124 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import {
+  type FunctionComponent,
+  type ReactNode,
+  useLayoutEffect,
+  useRef,
+  useState,
+} from 'react';
+
+const shell = cva(
+  'h-dvh min-w-0 overflow-clip grid grid-rows-[auto_minmax(0,1fr)]',
+);
+const shellBody = cva(
+  'min-h-0 min-w-0 overflow-auto overscroll-contain p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] outline-focus-ring focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)] focus-visible:outline-offset-[calc(-1*var(--focus-ring-width))]',
+  {
+    variants: {
+      mode: { console: '[&>div]:h-full', page: '[&>div]:min-h-full' },
+    },
+    defaultVariants: { mode: 'console' },
+  },
+);
+
+// Geometry is read only to expose a keyboard stop; CSS alone allocates the height.
+const useScrollableBody = (body: {
+  current: HTMLDivElement | null;
+}): boolean => {
+  const [isScrollable, setIsScrollable] = useState(true);
+  useLayoutEffect(() => {
+    const element = body.current;
+    if (!element) return;
+    const measure = () =>
+      setIsScrollable(
+        element.scrollHeight > element.clientHeight ||
+          element.scrollWidth > element.clientWidth ||
+          element === element.ownerDocument.activeElement,
+      );
+    measure();
+    const resize =
+      typeof ResizeObserver === 'undefined'
+        ? undefined
+        : new ResizeObserver(measure);
+    const observeContent = () => {
+      resize?.disconnect();
+      resize?.observe(element);
+      for (const child of element.querySelectorAll('*')) resize?.observe(child);
+      measure();
+    };
+    observeContent();
+    const mutations = new MutationObserver(observeContent);
+    mutations.observe(element, {
+      childList: true,
+      subtree: true,
+      characterData: true,
+    });
+    window.addEventListener('resize', measure);
+    element.addEventListener('blur', measure);
+    return () => {
+      resize?.disconnect();
+      mutations.disconnect();
+      window.removeEventListener('resize', measure);
+      element.removeEventListener('blur', measure);
+    };
+  }, [body]);
+  return isScrollable;
+};
+
+export interface IShellProps extends VariantProps<typeof shellBody> {
+  /** Consumer-owned top bar; its content determines its height. */
+  bar: ReactNode;
+  /** Body content; receives the remaining height in console mode. */
+  children: ReactNode;
+  /** The body scroll group's name, exposed only while overflowing or focused. */
+  ariaLabel: string;
+  testId?: string;
+}
+
+/**
+ * A viewport-owning frame with a content-height bar and the remaining height for its body.
+ *
+ * @Guarantees
+ * - CSS allocates both tracks, including when bar content wraps. Header is unchanged.
+ * - Console (default) passes a finite height to its child; page lets body content grow.
+ *   Both keep overflow inside the body, with the bar visible and document still.
+ * - Console body scrolling is a reachability fallback for content that cannot fit; bounded
+ *   panels normally own their scrolling. Page deliberately scrolls the body as a whole.
+ * - Overflow makes the body a named, keyboard-reachable group, never a landmark. Removing
+ *   overflow does not relocate focus. Native focus reveal and scroll keys remain intact.
+ * - Body padding reserves the shared focus ring's room, with an inset ring on the body itself.
+ *
+ * @CallerMustEnsure
+ * - Place one Shell at the viewport origin, with no outside margins, padding or siblings that
+ *   add document extent. This is the application frame, not a nested fullscreen section.
+ * - The bar must leave usable body space. An arbitrarily tall bar cannot fit every viewport.
+ * - Supply the main landmark inside the body (inside Sidebar.Content when using Sidebar).
+ * - Intermediate consumer wrappers must preserve the allocated height for bounded panels;
+ *   wrappers with height: 100% and min-height: 0, or display: contents, can pass it through.
+ * - Use Sidebar.Root fill in a console; below 64rem its list stacks and the body scrolls.
+ * - Name the body in the viewer's language. Content and its panel arrangements remain yours.
+ */
+export const Shell: FunctionComponent<IShellProps> = ({
+  bar,
+  children,
+  ariaLabel,
+  mode,
+  testId,
+}) => {
+  const body = useRef<HTMLDivElement>(null);
+  const isScrollable = useScrollableBody(body);
+  return (
+    <div className={shell()} data-testid={testId}>
+      <div>{bar}</div>
+      {/* biome-ignore lint/a11y/useAriaPropsSupportedByRole: the group and its name are conditional together */}
+      <div
+        ref={body}
+        className={shellBody({ mode })}
+        role={isScrollable ? 'group' : undefined}
+        aria-label={isScrollable ? ariaLabel : undefined}
+        tabIndex={isScrollable ? 0 : undefined}
+      >
+        <div>{children}</div>
+      </div>
+    </div>
+  );
+};

package/src/Layout/Sidebar/Sidebar.tsx

@@ -1,4 +1,4 @@
-import { cva } from 'class-variance-authority';
+import { cva, type VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode, RefCallback } from 'react';
 import { Children, createContext, isValidElement, useContext } from 'react';
 import type { Subject } from 'rxjs';
@@ -12,10 +12,20 @@ const sidebarRoot = cva(
     'grid gap-[var(--space-region)] lg:grid-cols-[12rem_minmax(0,1fr)]',
     '[&>div:first-child]:border-solid [&>div:first-child]:border-border [&>div:first-child]:border-b [&>div:first-child]:pb-[var(--space-stack)]',
     'lg:[&>div:first-child]:border-b-0 lg:[&>div:first-child]:border-r lg:[&>div:first-child]:pb-0 lg:[&>div:first-child]:pr-[var(--space-stack)]',
-    'lg:[&>div:first-child>nav]:sticky lg:[&>div:first-child>nav]:top-0 lg:[&>div:first-child>nav]:max-h-[min(100dvh,var(--sidebar-scrollport-height,100dvh))] lg:[&>div:first-child>nav]:overflow-y-auto',
+    'lg:[&>div:first-child>nav]:sticky lg:[&>div:first-child>nav]:top-0 lg:[&>div:first-child>nav]:overflow-y-auto',
     '[&>div:first-child>nav]:p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))] lg:[&>div:first-child>nav]:scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]',
     '[&>div:first-child>nav>ul]:flex [&>div:first-child>nav>ul]:flex-col [&>div:first-child>nav>ul]:gap-[var(--space-stack)]',
   ].join(' '),
+  {
+    variants: {
+      fill: {
+        false:
+          'lg:[&>div:first-child>nav]:max-h-[min(100dvh,var(--sidebar-scrollport-height,100dvh))]',
+        true: 'min-h-full lg:h-full lg:min-h-0 lg:grid-rows-[minmax(0,1fr)] lg:[&>div]:min-h-0 lg:[&>div]:h-full lg:[&>div:first-child>nav]:max-h-full',
+      },
+    },
+    defaultVariants: { fill: false },
+  },
 );
 
 // A percentage max-height resolves against the content-driven grid cell, not its scrollport;
@@ -38,9 +48,13 @@ const observeScrollport: RefCallback<HTMLElement> = (navigation) => {
       ),
     );
     if (scrollport) {
+      const scrollportStyle = getComputedStyle(scrollport);
+      const padding =
+        (Number.parseFloat(scrollportStyle.paddingTop) || 0) +
+        (Number.parseFloat(scrollportStyle.paddingBottom) || 0);
       navigation.style.setProperty(
         '--sidebar-scrollport-height',
-        `${scrollport.clientHeight}px`,
+        `${Math.max(0, scrollport.clientHeight - padding)}px`,
       );
     } else {
       navigation.style.removeProperty('--sidebar-scrollport-height');
@@ -96,7 +110,10 @@ const SidebarSelectionContext = createContext<SidebarSelection | undefined>(
   undefined,
 );
 
-export interface ISidebarRootProps {
+export interface ISidebarRootProps extends VariantProps<typeof sidebarRoot> {
+  /** Pass a finite parent height through to Content at 64rem and above, using CSS alone.
+   * Below 64rem the enclosing scrollable body owns the stacked list and content. */
+  fill?: VariantProps<typeof sidebarRoot>['fill'];
   /** The key of the active entry. The caller supplies a key identifying one non-inert entry;
    *  Sidebar renders what it is given and never selects a fallback for an invalid key. */
   active: string;
@@ -166,12 +183,13 @@ const SidebarRoot: FunctionComponent<ISidebarRootProps> = ({
   onSelect$,
   children,
   testId,
+  fill,
 }) => {
   const parts = Children.toArray(children).filter(isValidElement);
   return (
-    <div className={sidebarRoot()} data-testid={testId}>
+    <div className={sidebarRoot({ fill })} data-testid={testId}>
       <div>
-        <nav ref={observeScrollport} aria-label={label}>
+        <nav ref={fill ? undefined : observeScrollport} aria-label={label}>
           <SidebarSelectionContext value={{ active, onSelect$ }}>
             <ul>{parts.filter((part) => part.type === SidebarItem)}</ul>
           </SidebarSelectionContext>
@@ -204,11 +222,17 @@ const SidebarRoot: FunctionComponent<ISidebarRootProps> = ({
  *   assumed top-bar offset, capped to the screen/scrolling-area height with independent entry scrolling.
  *   Content sits beside it in `minmax(0,1fr)`, so wide content cannot displace the track.
  * - Below 64rem the whole list lies above the content in normal flow - no stickiness, no cap, no
- *   drawer. Sidebar sets no viewport-height minimum and grows with its content.
+ *   drawer. Without fill, Sidebar grows with its content.
+ * - With fill, a finite parent height passes through Root and Content at 64rem and above;
+ *   navigation is capped to that allocated height by CSS, with no scrollport measurement.
+ *   Below 64rem the list stacks and the enclosing body scrolls. The DOM never switches.
  * - It separates the tracks itself (the region space role and a `border` hairline) but gives the
  *   content track no padding and no landmark - the consumer owns everything inside `Content`.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
+ * - Fill requires a parent with a finite height and a scrollable enclosing body for narrow
+ *   viewports or oversized fixed content. Consumer wrappers inside Content preserve that bound.
+ *   It works with any bounded parent; no Shell identity, context or offset is required.
  * - Entry keys are unique and `active` names one non-inert entry. Sidebar corrects nothing.
  * - Items and the one Content are direct children of `Root` - Root assembles only what it can see,
  *   and an Item rendered outside a Root has no selection to derive its treatment from.

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,37 @@ 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 { Screen } from 'Layout/Screen/Screen';
 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";