@juwel-development/design-system 3.2.0 → 3.3.0

package/src/Interaction/Tabs/Tabs.tsx

@@ -0,0 +1,284 @@
+import { cva } from 'class-variance-authority';
+import {
+  createContext,
+  type FocusEvent,
+  type FunctionComponent,
+  type KeyboardEvent,
+  type ReactNode,
+  useContext,
+  useId,
+} from 'react';
+import type { Subject } from 'rxjs';
+import { TabsCompositionError } from './TabsCompositionError';
+
+// The row is a single scrolling line, never a wrap: overflow is an accommodation, not a strip. The
+// ring room is written from the two focus-ring tokens so it cannot drift from the ring it exists
+// for: padding holds the scroll clip off the outline, the negative margin hands the room back to
+// the page, and scroll-padding makes a nearest scrollIntoView stop with the ring inside the clip.
+const tabsList = cva(
+  [
+    'flex flex-row overflow-x-auto',
+    'p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]',
+    'm-[calc(-1*(var(--focus-ring-width)+var(--focus-ring-offset)))]',
+    'scroll-p-[calc(var(--focus-ring-width)+var(--focus-ring-offset))]',
+  ].join(' '),
+);
+
+// Navigation typography - the tracked grotesk label, muted at rest, foreground when current -
+// keyed on aria-selected, so the attribute the device reads is the one the paint follows. The
+// marker keeps one thickness and flips only colour on the shared motion token, so selection
+// shifts no geometry. The focus ring sits in the base with its colour at rest, as on Button.
+const tabsTab = cva(
+  [
+    'font-secondary text-label tracking-label',
+    'text-muted hover:text-foreground aria-selected:text-foreground',
+    'border-b-[length:var(--tab-marker-thickness)] border-solid border-transparent aria-selected:border-foreground',
+    'shrink-0 cursor-pointer select-none text-nowrap px-[var(--tab-inset-inline)] py-[var(--tab-inset-block)]',
+    'transition-colors duration-[var(--motion-duration-color)]',
+    'outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]',
+  ].join(' '),
+);
+
+// The panel paints nothing of its own; the recipe carries only the focus ring its Tab stop needs -
+// the ring follows focusability, not control-ness.
+const tabsPanel = cva(
+  'outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]',
+);
+
+type TabsContract = {
+  active: string;
+  onSelect$: Subject<string>;
+  label: string;
+  baseId: string;
+};
+
+const TabsContext = createContext<TabsContract | undefined>(undefined);
+
+const useTabsContract = (member: string): TabsContract => {
+  const contract = useContext(TabsContext);
+  if (contract === undefined) {
+    throw new TabsCompositionError(member);
+  }
+  return contract;
+};
+
+// Fixed-width UTF-16 units preserve every string, including lone surrogates, without whitespace
+// or collisions between escaped and literal values. Encoding changes IDs only, never selection.
+const encodeValue = (value: string): string =>
+  value
+    .split('')
+    .map((unit) => unit.charCodeAt(0).toString(16).padStart(4, '0'))
+    .join('');
+
+const keepFocusedTabVisible = (event: FocusEvent<HTMLButtonElement>): void => {
+  event.currentTarget.scrollIntoView({ block: 'nearest', inline: 'nearest' });
+};
+
+const tabId = (baseId: string, value: string): string =>
+  `${baseId}tab-${encodeValue(value)}`;
+const panelId = (baseId: string, value: string): string =>
+  `${baseId}panel-${encodeValue(value)}`;
+
+// The wrap-around rule on its own: the neighbouring tab in the arrow's direction, from the
+// rendered row (`:scope >` keeps a nested instance's tabs out of it), wrapping at either end -
+// so tab order is rendered order.
+const neighbourTab = (
+  current: HTMLButtonElement,
+  step: 1 | -1,
+): HTMLButtonElement | undefined => {
+  const row = current.closest('[role="tablist"]');
+  if (row === null) {
+    return undefined;
+  }
+  const tabs = Array.from(
+    row.querySelectorAll<HTMLButtonElement>(':scope > [role="tab"]'),
+  );
+  const index = tabs.indexOf(current);
+  return tabs[(index + step + tabs.length) % tabs.length];
+};
+
+export interface ITabsRootProps {
+  /** The key of the active tab. Must name a declared tab/panel pair; the consumer owns it. */
+  active: string;
+  /** Emits the selected key on click and on arrow navigation. Tabs never selects on its own. */
+  onSelect$: Subject<string>;
+  /** The tab list's accessible name. */
+  label: string;
+  children: ReactNode;
+  testId?: string;
+}
+
+export interface ITabsListProps {
+  children: ReactNode;
+  testId?: string;
+}
+
+export interface ITabsTabProps {
+  /** The stable identity connecting this tab to its panel and emitted by selection requests.
+   *  Not React's `key`, and never inferred from the label or the position. */
+  value: string;
+  /** The visible text label. Text only - no icons, no per-tab markup. */
+  children: string;
+  testId?: string;
+}
+
+export interface ITabsPanelProps {
+  /** The tab this panel belongs to - exactly one panel per tab value within a Root. */
+  value: string;
+  /** Mounted only while active; departure unmounts it, return mounts it fresh. */
+  children: ReactNode;
+  testId?: string;
+}
+
+// useId gives each Root one stable id namespace, so two instances on a page cannot collide and the
+// tab/panel associations survive rerenders. That hook and the context are the component's only
+// state-shaped machinery; the selection itself stays the consumer's.
+const TabsRoot: FunctionComponent<ITabsRootProps> = ({
+  active,
+  onSelect$,
+  label,
+  children,
+  testId,
+}) => {
+  const baseId = useId();
+  return (
+    <TabsContext.Provider value={{ active, onSelect$, label, baseId }}>
+      <div data-testid={testId}>{children}</div>
+    </TabsContext.Provider>
+  );
+};
+
+const TabsList: FunctionComponent<ITabsListProps> = ({ children, testId }) => {
+  const { label } = useTabsContract('List');
+  return (
+    <div
+      role="tablist"
+      aria-label={label}
+      className={tabsList()}
+      data-testid={testId}
+    >
+      {children}
+    </div>
+  );
+};
+
+const TabsTab: FunctionComponent<ITabsTabProps> = ({
+  value,
+  children,
+  testId,
+}) => {
+  const { active, onSelect$, baseId } = useTabsContract('Tab');
+  const isActive = active === value;
+
+  // Left/Right move focus to the neighbouring tab and request its selection immediately -
+  // activation follows focus. Other keys fall through: Up/Down keep scrolling the page, Tab
+  // leaves the list for the active panel.
+  const requestNeighbour = (event: KeyboardEvent<HTMLButtonElement>): void => {
+    if (event.key !== 'ArrowLeft' && event.key !== 'ArrowRight') {
+      return;
+    }
+    event.preventDefault();
+    const neighbour = neighbourTab(
+      event.currentTarget,
+      event.key === 'ArrowRight' ? 1 : -1,
+    );
+    if (neighbour === undefined) {
+      return;
+    }
+    neighbour.focus();
+    const neighbourValue = neighbour.dataset.value;
+    if (neighbourValue !== undefined) {
+      onSelect$.next(neighbourValue);
+    }
+  };
+
+  return (
+    <button
+      type="button"
+      role="tab"
+      id={tabId(baseId, value)}
+      aria-selected={isActive}
+      aria-controls={panelId(baseId, value)}
+      tabIndex={isActive ? 0 : -1}
+      data-value={value}
+      data-testid={testId}
+      className={tabsTab()}
+      onClick={() => onSelect$.next(value)}
+      onKeyDown={requestNeighbour}
+      onFocus={keepFocusedTabVisible}
+    >
+      {children}
+    </button>
+  );
+};
+
+const TabsPanel: FunctionComponent<ITabsPanelProps> = ({
+  value,
+  children,
+  testId,
+}) => {
+  const { active, baseId } = useTabsContract('Panel');
+  const isActive = active === value;
+  return (
+    <div
+      role="tabpanel"
+      id={panelId(baseId, value)}
+      aria-labelledby={tabId(baseId, value)}
+      hidden={!isActive}
+      tabIndex={isActive ? 0 : undefined}
+      className={tabsPanel()}
+      data-testid={testId}
+    >
+      {isActive ? children : undefined}
+    </div>
+  );
+};
+
+/**
+ * A few named views sharing one surface: a horizontal tab list over exactly one visible panel,
+ * following the WAI-ARIA tabs pattern. Controlled - the consumer owns the active key and all
+ * content; Tabs owns the controls and the panels that present it. Composed from four members:
+ * `Root` carries the contract, `List` the scrolling row, `Tab` one control, `Panel` one view.
+ *
+ * @Guarantees — enforced on every render
+ * - Renders `role="tablist"`/`tab`/`tabpanel` with `aria-selected`, `aria-controls` and
+ *   `aria-labelledby` wired per pair; ids are namespaced per instance, so two Tabs on one page
+ *   cannot collide and associations survive rerenders.
+ * - Selection is the value of `active`, nothing else: a selection request that goes unanswered
+ *   changes nothing, and no fallback selection is invented or emitted - ever.
+ * - Only the active panel mounts its children; inactive panels stay hidden and empty, so departure
+ *   unmounts a view and returning mounts it fresh, with no cache and no preserved state.
+ * - Left/Right move focus to the neighbouring tab, wrapping at either end, and request selection
+ *   immediately; focus stays on the operated tab. Up/Down are left to the browser.
+ * - Roving tabindex: Tab enters the list at the active tab, then the active panel - a consistent
+ *   Tab stop whether or not its content is focusable. Inactive panels add no stop.
+ * - The row scrolls horizontally on overflow - one line, no wrap, no shrink - and holds its own
+ *   ring room, so the focused tab's ring survives the scroll clip.
+ * - Selection is marked by a persistent line under the active tab: `--tab-marker-thickness` in
+ *   `foreground`, constant thickness in both states, so switching shifts no widths and no weights.
+ *   Keyboard focus is the separate shared focus ring. Colour moves on the one motion token.
+ *
+ * @CallerMustEnsure — the component cannot see these and does not check them
+ * - One List with Tab elements as direct DOM children (arrays and fragments are supported),
+ *   and sibling Panels under Root. Do not wrap tabs in host elements.
+ * - At least two tabs, each `value` unique and stable, each with exactly one matching `Panel`
+ *   under the same `Root`, and `active` naming a declared pair. Invalid input is a contract
+ *   violation, not a request for a fallback.
+ * - An update removing the active tab supplies a valid replacement `active` and the matching
+ *   composition in the same update.
+ * - The newly selected view renders without noticeable delay - slower data belongs inside the
+ *   immediately displayed view. Any state shared or preserved across views is the consumer's.
+ *
+ * @UXGuidelines
+ * - Labels are short names for views, not actions; the consuming app words and translates them.
+ * - This is not a router: no location, no history, no deep links. Wire `onSelect$` to whatever
+ *   owns the active key and pass that key back in.
+ * - The panel is an opaque slot: compose the view's own rhythm inside it - a `Stack`, a `Prose` -
+ *   as the view owns it; Tabs sets no spacing between the row and the panel.
+ */
+export const Tabs = {
+  Root: TabsRoot,
+  List: TabsList,
+  Tab: TabsTab,
+  Panel: TabsPanel,
+} as const;

package/src/Interaction/Tabs/TabsCompositionError.ts

@@ -0,0 +1,6 @@
+export class TabsCompositionError extends Error {
+  constructor(member: string) {
+    super(`Tabs.${member} must be composed inside Tabs.Root`);
+    this.name = 'TabsCompositionError';
+  }
+}

package/src/Layout/Cover/Cover.tsx

@@ -15,9 +15,9 @@ const cover = cva(
 
 // Not a second recipe - the slot has nothing to vary, and the standard allows one cva()
 // (design-system-components.md §4), the frame's own above. Block-axis auto margins split the leftover
-// space equally, so a foot after the slot still lands on the bottom edge - justify-center on the
-// frame would centre slot and foot as one group and lift the foot off that edge.
-const slot = 'my-auto';
+// space equally, so a foot after the slot still lands on the bottom edge. The full-width cap keeps a
+// definite-width child - an action column asking for its bound (#99) - inside the frame's inset.
+const slot = 'my-auto max-w-full';
 
 export interface ICoverProps {
   /** The screen's one opaque slot, centred on both axes. Rendered unmodified: a menu composes a title,

package/src/Layout/Sidebar/Sidebar.tsx

@@ -0,0 +1,224 @@
+import { cva } from 'class-variance-authority';
+import type { FunctionComponent, ReactNode, RefCallback } from 'react';
+import { Children, createContext, isValidElement, useContext } from 'react';
+import type { Subject } from 'rxjs';
+
+// One column below 64rem, the whole list above the content in normal flow; at `lg` a fixed 12rem nav
+// track beside `minmax(0,1fr)`, whose zero minimum keeps wide content from displacing the track (it
+// does not fix that content's own overflow). Root styles only its owned first child, leaving consumer
+// navigation untouched. Padding and scroll padding reserve the focus ring's width + offset.
+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',
+    '[&>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(' '),
+);
+
+// A percentage max-height resolves against the content-driven grid cell, not its scrollport;
+// dvh alone left an 800px nav clipped by a 384px frame (#101). Measure that external boundary.
+// The ref runs only after client attachment; CSS owns the breakpoint and the viewport fallback.
+const observeScrollport: RefCallback<HTMLElement> = (navigation) => {
+  if (!navigation) return;
+  const ancestors: HTMLElement[] = [];
+  for (
+    let ancestor = navigation.parentElement;
+    ancestor && ancestor !== navigation.ownerDocument.documentElement;
+    ancestor = ancestor.parentElement
+  ) {
+    ancestors.push(ancestor);
+  }
+  const measure = () => {
+    const scrollport = ancestors.find((ancestor) =>
+      /^(auto|scroll|hidden|overlay)$/.test(
+        getComputedStyle(ancestor).overflowY,
+      ),
+    );
+    if (scrollport) {
+      navigation.style.setProperty(
+        '--sidebar-scrollport-height',
+        `${scrollport.clientHeight}px`,
+      );
+    } else {
+      navigation.style.removeProperty('--sidebar-scrollport-height');
+    }
+  };
+  measure();
+  // Observe ancestors so a resized wrapper or responsive change of scrollport is remeasured.
+  const observer =
+    typeof ResizeObserver === 'undefined'
+      ? undefined
+      : new ResizeObserver(measure);
+  for (const ancestor of ancestors) observer?.observe(ancestor);
+  window.addEventListener('resize', measure);
+  return () => {
+    observer?.disconnect();
+    window.removeEventListener('resize', measure);
+    navigation.style.removeProperty('--sidebar-scrollport-height');
+  };
+};
+
+// An entry at the label role, told apart by colour and underline alone - the agreed treatment carries
+// no active-background role. Active keeps a persistent underline at the at-rest thickness; usable
+// raises one on hover, instantly (underlines are off the motion allowlist, docs/adr/0001); inert is
+// muted with no interactive response. The focus ring is the library's one contract (docs/adr/0002).
+const sidebarEntry = cva(
+  [
+    'w-full text-left font-secondary text-label tracking-label',
+    'underline-offset-[var(--underline-offset)]',
+    'outline-focus-ring outline-offset-[var(--focus-ring-offset)] focus-visible:outline focus-visible:outline-[length:var(--focus-ring-width)]',
+  ].join(' '),
+  {
+    variants: {
+      state: {
+        active:
+          'text-foreground underline decoration-[length:var(--underline-thickness)] cursor-pointer',
+        usable:
+          'text-foreground hover:underline hover:decoration-[length:var(--underline-thickness)] cursor-pointer',
+        inert: 'text-muted cursor-not-allowed',
+      },
+    },
+    defaultVariants: { state: 'usable' },
+  },
+);
+
+// What an Item derives its treatment and emission from - carried by context because the agreed surface
+// gives Item no active prop and no Subject; Root alone speaks them.
+type SidebarSelection = {
+  active: string;
+  onSelect$: Subject<string>;
+};
+
+const SidebarSelectionContext = createContext<SidebarSelection | undefined>(
+  undefined,
+);
+
+export interface ISidebarRootProps {
+  /** 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;
+  /** The nav landmark's accessible name. */
+  label: string;
+  /** Emits the selected entry's key when a usable inactive entry is activated. The active and inert
+   *  entries emit nothing, and neither does any render. */
+  onSelect$: Subject<string>;
+  /** Direct `Sidebar.Item` children in display order, then one `Sidebar.Content`. */
+  children?: ReactNode;
+  testId?: string;
+}
+
+export interface ISidebarItemProps {
+  /** Identifies the entry to the application - what `onSelect$` emits and `active` names. React's
+   *  reserved `key` is not the entry identifier. */
+  entryKey: string;
+  /** The entry's visible text. Text-only by type: an entry is a label, never arbitrary markup. */
+  children: string;
+  /** Present in the order but unavailable: muted, semantically disabled, skipped by Tab. */
+  inert?: boolean;
+  testId?: string;
+}
+
+export interface ISidebarContentProps {
+  children?: ReactNode;
+  testId?: string;
+}
+
+const SidebarItem: FunctionComponent<ISidebarItemProps> = ({
+  entryKey,
+  children,
+  inert,
+  testId,
+}) => {
+  const selection = useContext(SidebarSelectionContext);
+  const isActive = selection !== undefined && selection.active === entryKey;
+  const selectEntry = () => {
+    if (!isActive) selection?.onSelect$.next(entryKey);
+  };
+  return (
+    <li>
+      <button
+        type="button"
+        className={sidebarEntry({
+          state: inert ? 'inert' : isActive ? 'active' : 'usable',
+        })}
+        disabled={inert}
+        aria-current={isActive ? 'true' : undefined}
+        data-testid={testId}
+        onClick={selectEntry}
+      >
+        {children}
+      </button>
+    </li>
+  );
+};
+
+const SidebarContent: FunctionComponent<ISidebarContentProps> = ({
+  children,
+  testId,
+}) => <div data-testid={testId}>{children}</div>;
+
+const SidebarRoot: FunctionComponent<ISidebarRootProps> = ({
+  active,
+  label,
+  onSelect$,
+  children,
+  testId,
+}) => {
+  const parts = Children.toArray(children).filter(isValidElement);
+  return (
+    <div className={sidebarRoot()} data-testid={testId}>
+      <div>
+        <nav ref={observeScrollport} aria-label={label}>
+          <SidebarSelectionContext value={{ active, onSelect$ }}>
+            <ul>{parts.filter((part) => part.type === SidebarItem)}</ul>
+          </SidebarSelectionContext>
+        </nav>
+      </div>
+      {parts.filter((part) => part.type === SidebarContent)}
+    </div>
+  );
+};
+
+/**
+ * The standing application navigation beside the active section's content: a `nav` landmark named by
+ * `label`, listing text entries as plain buttons, and a `Content` track for the section the
+ * application shows. Selection is a request - activating a usable inactive entry emits its key through
+ * `onSelect$` - and the application answers by rerendering with a new `active`. Composed from `Root`,
+ * `Item` and `Content`; Root assembles its direct Items into the list, in order, and places Content
+ * beside them at 64rem or below them under it.
+ *
+ * @Guarantees — enforced on every render
+ * - For valid caller input, the active entry alone carries `aria-current="true"`. Sidebar owns no
+ *   selection, URL, history or fallback: it renders the key it is given; a missing key marks nothing.
+ * - Activating the active entry or an inert one emits nothing; no render emits anything. Entries are
+ *   non-submitting `type="button"` buttons with native Tab/Enter/Space behaviour - no tabs/menu model.
+ * - An inert entry stays visible but muted and disabled, so Tab skips it and activation is inert too.
+ * - At and above 64rem the nav is a fixed 12rem track, sticky at the top of the scrolling area with no
+ *   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.
+ * - 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
+ * - 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.
+ * - Focus after the content changes belongs to the application; Sidebar leaves it on the activated
+ *   entry.
+ *
+ * @UXGuidelines
+ * - Entries are section labels: short, parallel, text-only. A destination that is a URL belongs to
+ *   `Link` in a `Header` or `Footer`, not here - Sidebar requests sections, it does not navigate.
+ * - Keep inert entries listed: a section that exists but holds nothing yet keeps its place in the
+ *   order, which is the point of inertness being a visual state rather than an absence.
+ */
+export const Sidebar = {
+  Root: SidebarRoot,
+  Item: SidebarItem,
+  Content: SidebarContent,
+} as const;

package/src/Theme/renderTokens.ts

@@ -155,6 +155,13 @@ const SPACING = `:root {
   --space-band: 4em;
 }`;
 
+/* Collection item padding is air inside each freely composed item (#103), distinct from a sibling
+   gap or a page band. One em above and below keeps it tied to inherited type without imposing a
+   type role on the content. A separate role lets a brand tune this air without moving other groups. */
+const COLLECTION_SPACING = `:root {
+  --space-collection-item: 1em;
+}`;
+
 /* The gutter is the horizontal inset holding content off the viewport edge (#9), and the one spacing role
    measured against the screen rather than the type: it answers to how much room there is, not how large
    the words are, so it is in rem/vw and never em. A clamp() lets it grow with the viewport with no
@@ -204,6 +211,22 @@ const TICK = `:root {
   --tick-thickness: 1px;
 }`;
 
+/* 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. */
+const TAB_INSETS = `:root {
+  --tab-inset-inline: 1em;
+  --tab-inset-block: 0.5em;
+}`;
+
+/* Not a colour: like the tick, the thickness lives in :root only, never @theme inline, so a brand
+   can re-point the marker's weight. Not an --underline-* token - those name an anchor's line
+   (docs/adr/0006); this names the persistent mark under the active tab, drawn in `foreground`,
+   no new role. Constraint: > 0 - the line is the one persistent selection cue, zero erases it. */
+const TAB_MARKER = `:root {
+  --tab-marker-thickness: 2px;
+}`;
+
 const toKebabCase = (name: string): string =>
   name.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
 
@@ -271,6 +294,9 @@ ${MEASURE}
    re-pointing - so the three roles sit in :root beside the measure. */
 ${SPACING}
 
+/* Collection's vertical item padding, measured against inherited type. */
+${COLLECTION_SPACING}
+
 /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
 ${GUTTER}
 
@@ -282,6 +308,11 @@ ${COVER}
 
 /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
 ${TICK}
+
+/* The tab marker's thickness is not a colour either, and sits in :root beside the tick block. */
+${TAB_MARKER}
+
+${TAB_INSETS}
 `;
 
 /**

package/src/index.ts

@@ -4,6 +4,7 @@ export { Cluster } from 'Arrangement/Cluster/Cluster';
 export { Stack } from 'Arrangement/Stack/Stack';
 export { Brandmark } from 'Display/Brandmark/Brandmark';
 export { Checklist } from 'Display/Checklist/Checklist';
+export { Collection } from 'Display/Collection/Collection';
 export { DefinitionList } from 'Display/DefinitionList/DefinitionList';
 export { Figure } from 'Display/Figure/Figure';
 export { Rail } from 'Display/Rail/Rail';
@@ -21,6 +22,7 @@ export { Prose } from 'Display/Typography/Prose/Prose';
 export { Button } from 'Interaction/Button/Button';
 export { Input } from 'Interaction/Input/Input';
 export { Link } from 'Interaction/Link/Link';
+export { Tabs } from 'Interaction/Tabs/Tabs';
 export { TextArea } from 'Interaction/TextArea/TextArea';
 export { Cover } from 'Layout/Cover/Cover';
 export { Footer } from 'Layout/Footer/Footer';
@@ -30,5 +32,6 @@ export { Header } from 'Layout/Header/Header';
 export { Hero } from 'Layout/Hero/Hero';
 export { PageHead } from 'Layout/PageHead/PageHead';
 export { Section } from 'Layout/Section/Section';
+export { Sidebar } from 'Layout/Sidebar/Sidebar';
 export type { PaletteTokens } from 'Theme/Palette';
 export { dark, light } from 'Theme/Palette';

package/src/tokens.css

@@ -195,6 +195,11 @@
   --space-band: 4em;
 }
 
+/* Collection's vertical item padding, measured against inherited type. */
+:root {
+  --space-collection-item: 1em;
+}
+
 /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
 :root {
   --gutter: clamp(1.5rem, 5vw, 4rem);
@@ -215,3 +220,13 @@
   --tick-length: 0.9rem;
   --tick-thickness: 1px;
 }
+
+/* The tab marker's thickness is not a colour either, and sits in :root beside the tick block. */
+:root {
+  --tab-marker-thickness: 2px;
+}
+
+:root {
+  --tab-inset-inline: 1em;
+  --tab-inset-block: 0.5em;
+}

package/src/tokens.dark.css

@@ -166,6 +166,11 @@
   --space-band: 4em;
 }
 
+/* Collection's vertical item padding, measured against inherited type. */
+:root {
+  --space-collection-item: 1em;
+}
+
 /* The gutter has no Tailwind namespace either, so it sits in :root beside the space roles. */
 :root {
   --gutter: clamp(1.5rem, 5vw, 4rem);
@@ -186,3 +191,13 @@
   --tick-length: 0.9rem;
   --tick-thickness: 1px;
 }
+
+/* The tab marker's thickness is not a colour either, and sits in :root beside the tick block. */
+:root {
+  --tab-marker-thickness: 2px;
+}
+
+:root {
+  --tab-inset-inline: 1em;
+  --tab-inset-block: 0.5em;
+}