@juwel-development/design-system 3.10.0 → 4.0.0

package/dist/types/Interaction/Tabs/Tabs.d.ts

@@ -1,6 +1,14 @@
+import { type VariantProps } from 'class-variance-authority';
 import { type FunctionComponent, type ReactNode } from 'react';
 import type { Subject } from 'rxjs';
-export interface ITabsRootProps {
+declare const tabsRoot: (props?: ({
+    fill?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface ITabsRootProps extends VariantProps<typeof tabsRoot> {
+    /** Fill the allocated parent height, keeping List at content height and giving Panel the rest.
+     * In an unsized parent, panels retain content height. Compose List and Panels directly in Root;
+     * an unsized spacing wrapper does not pass the bound. No spacing is added. */
+    fill?: VariantProps<typeof tabsRoot>['fill'];
     /** 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. */
@@ -64,11 +72,23 @@ export interface ITabsPanelProps {
  *   `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.
  *
+ * - With `fill`, Root takes the allocated parent height; List keeps its content height and the
+ *   active Panel takes the remainder. Its definite height bounds a direct Pane or bounded Table.
+ *   Switching views changes neither Root height nor List position. No scrolling or spacing is added.
+ *   In an unsized parent the panel retains content height; no bound is invented.
+ * - Without `fill` (including false or null), the existing content-height composition is unchanged.
+ *
  * @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 the Panels under the same Root - as siblings of the List, or with it inside one
  *   arrangement such as a `Stack` (see the separation guidance below). Do not wrap tabs in host
  *   elements.
+ * - For `fill`, List and Panels must be direct DOM children of Root (fragments are fine), with
+ *   one height-accepting child directly inside the active Panel. Supply a definite parent height
+ *   and enough room for List and the child's fixed content. An unsized Stack between Root and
+ *   members, or between Panel and its child, breaks that height chain. Compose content spacing
+ *   inside the Pane's slots instead; Tabs adds no gap. In an unsized parent the enclosing page
+ *   owns overflow. A bounded Table requires the separate #142 API.
  * - A label is a meaningful visible text name, with non-interactive decoration at most: no link,
  *   button, input or other focusable descendant, since the tab is the one control and a nested
  *   control inside a `button` is invalid. Decorative parts - an icon that repeats the text - carry
@@ -88,8 +108,8 @@ export interface ITabsPanelProps {
  *   do not fit, so a label is never the reason to shorten a name.
  * - 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.
- * - Tabs sets no spacing between the row and the panel; the separation is a `Stack` between Root
- *   and its members - `<Tabs.Root><Stack gap="region"><Tabs.List/>…<Tabs.Panel/>…</Stack>
+ * - In the default content-height mode, Tabs sets no spacing between the row and the panel;
+ *   the separation is a `Stack` between Root and its members - `<Tabs.Root><Stack gap="region"><Tabs.List/>…<Tabs.Panel/>…</Stack>
  *   </Tabs.Root>`. `gap="stack"` holds the row and its view together as one block; `gap="region"`
  *   sets the view apart as a region of its own. Inactive panels are hidden, so the gap is exactly
  *   one whichever panel is active, from the token the consumer's other groups already use.
@@ -102,3 +122,4 @@ export declare const Tabs: {
     readonly Tab: FunctionComponent<ITabsTabProps>;
     readonly Panel: FunctionComponent<ITabsPanelProps>;
 };
+export {};

package/dist/types/Layout/Dialog/Dialog.d.ts

@@ -4,6 +4,9 @@ import type { Subject } from 'rxjs';
 declare const dialogRoot: (props?: ({
     extent?: "screen" | "content" | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;
+declare const dialogContent: (props?: ({
+    scrollOwner?: "body" | "child" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
 export interface IDialogRootProps extends VariantProps<typeof dialogRoot> {
     /** The composed regions, in the supported order: Title, Description, Content, Actions. */
     children: ReactNode;
@@ -29,7 +32,7 @@ export interface IDialogDescriptionProps {
     children: ReactNode;
     testId?: string;
 }
-export interface IDialogContentProps {
+export interface IDialogContentProps extends VariantProps<typeof dialogContent> {
     /** Arbitrary task content, composed and owned by the consumer. */
     children: ReactNode;
     testId?: string;
@@ -44,7 +47,7 @@ export interface IDialogActionsProps {
  * the platform `<dialog>` and `showModal()`: the browser owns the top layer, background inertness
  * and the modal keyboard boundary; the consumer owns all wording, controls, outcomes and
  * replacement. Composed from five members: `Root` carries the contract, `Title` the visible name,
- * `Description` one connected line, `Content` the only scrollable region, `Actions` the controls.
+ * `Description` one connected line, `Content` the scrolling region or holder of one bounded child, `Actions` the controls.
  *
  * @Guarantees — enforced on every render
  * - Presents through `showModal()`/`close()` - no portal, focus trap or polyfill - so background
@@ -67,7 +70,9 @@ export interface IDialogActionsProps {
  * - `extent="screen"` (the default) fills the viewport minus the `--gutter` inline and
  *   `--space-region` block insets, header and Actions fixed, only `Content` scrolling.
  *   `extent="content"` holds a fixed 32rem capped to the viewport with content-driven height;
- *   `Content` scrolls only as the emergency fallback when fitting is physically impossible.
+ *   Default `Content` scrolls as the fallback when its content exceeds available space.
+ * - `Content scrollOwner="child"` passes available height to one bounded child without scrolling.
+ *   A bounded Table then owns both axes and pins its header; title, description and actions stay fixed.
  * - Regions take `--space-region` padding with `--space-stack` between Title and Description and
  *   between Actions controls; hairlines separate header from `Content` and `Content` from
  *   `Actions` only where both neighbours exist. The surface reads `--radius-dialog`,
@@ -75,6 +80,9 @@ export interface IDialogActionsProps {
  *   with the theme's optional `--scrim-blur`.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
+ * - In child-scroll mode provide one child that accepts the height allocation and owns overflow.
+ *   Intermediate wrappers must preserve that allocation. Fixed regions must fit the viewport and
+ *   leave usable room for the child; a Table needs room for its header and readable rows.
  * - Direct children in the order `Title`, `Description`, `Content`, `Actions`, at most one of
  *   each; `Actions` is present and holds at least one explicit dismissal control, wired to the
  *   same dismissal and visibility transitions. Cancel-before-Confirm order puts initial focus on

package/dist/types/Layout/Form/FormConfigurationError.d.ts

@@ -0,0 +1,3 @@
+export declare class FormConfigurationError extends Error {
+    constructor(reason: string);
+}

package/dist/types/Layout/Pane/Pane.d.ts

@@ -0,0 +1,55 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type FunctionComponent, type ReactNode } from 'react';
+declare const paneBody: (props?: ({
+    scrollOwner?: "body" | "child" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+export interface IPaneRootProps {
+    children?: ReactNode;
+    /** A non-empty name makes the enclosure an accessible group, as with Box. */
+    name?: string;
+    testId?: string;
+}
+export interface IPaneSectionProps {
+    children?: ReactNode;
+    testId?: string;
+}
+export interface IPaneBodyProps extends VariantProps<typeof paneBody> {
+    children?: ReactNode;
+    /** Names the body while overflowing. Unused when the child owns scrolling. */
+    ariaLabel: string;
+    testId?: string;
+}
+/**
+ * A parent-bounded enclosure with optional content-height Head and Foot around a shrinking Body.
+ *
+ * @Guarantees
+ * - Root fills the allocated height, including its border and box inset. Without a definite
+ *   parent height it grows with content; a stacked parent or enclosing body owns scrolling.
+ * - Head and Foot never shrink. Body scrolls both axes as needed and short content does not
+ *   stretch: Foot follows it, with any unused height left in Root rather than inside Body.
+ * - Root paints surface, foreground, border and box inset, square and without elevation.
+ *   The stack space role separates slots; a non-empty name exposes a group, never a landmark.
+ * - Default Body is the sole scroll region: a named group and keyboard stop only while
+ *   overflowing, retained while focused. It reserves the shared focus ring's room and leaves
+ *   native focus reveal, scrolling and child keyboard interactions intact.
+ * - Body scrollOwner="child" passes its allocated height directly to its child, without an
+ *   inner wrapper, overflow, group or keyboard stop. The child owns scroll semantics and naming.
+ *   Use this for a bounded Table: its wrapper must own both axes so its header stays in view.
+ *
+ * @CallerMustEnsure
+ * - Compose at most one Head, Body and Foot, in that order, directly inside Root; all are optional.
+ *   Do not nest panes. The consumer owns all wording, facts, actions and internal arrangement.
+ * - Supply a finite parent height to bound a pane, and enough room for Head, Foot, inset and gaps.
+ *   At smaller sizes use an unsized stacked arrangement in a scrolling page or Shell body.
+ * - In child mode supply one child that accepts its parent's allocated height and handles its
+ *   own overflow and focus ring. Intermediate wrappers must preserve that allocation.
+ * - Filled ColumnLayout columns and active Stepper panels can pass the bound to Root. Keep
+ *   those holders and Pane directly composed so no intermediate wrapper loses the allocation.
+ */
+export declare const Pane: {
+    readonly Root: FunctionComponent<IPaneRootProps>;
+    readonly Head: FunctionComponent<IPaneSectionProps>;
+    readonly Body: FunctionComponent<IPaneBodyProps>;
+    readonly Foot: FunctionComponent<IPaneSectionProps>;
+};
+export {};

package/dist/types/Layout/Shell/Shell.d.ts

@@ -0,0 +1,39 @@
+import { type VariantProps } from 'class-variance-authority';
+import { type FunctionComponent, type ReactNode } from 'react';
+declare const shellBody: (props?: ({
+    mode?: "page" | "console" | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+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 declare const Shell: FunctionComponent<IShellProps>;
+export {};

package/dist/types/Layout/Sidebar/Sidebar.d.ts

@@ -1,6 +1,13 @@
+import { type VariantProps } from 'class-variance-authority';
 import type { FunctionComponent, ReactNode } from 'react';
 import type { Subject } from 'rxjs';
-export interface ISidebarRootProps {
+declare const sidebarRoot: (props?: ({
+    fill?: boolean | null | undefined;
+} & import("class-variance-authority/types").ClassProp) | undefined) => string;
+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;
@@ -49,11 +56,17 @@ export interface ISidebarContentProps {
  *   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.
@@ -71,3 +84,4 @@ export declare const Sidebar: {
     readonly Item: FunctionComponent<ISidebarItemProps>;
     readonly Content: FunctionComponent<ISidebarContentProps>;
 };
+export {};

package/dist/types/Theme/Palette.d.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. */
@@ -41,11 +48,11 @@ export type PaletteTokens = {
     backing: string;
     /** 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;

package/dist/types/index.d.ts

@@ -1,19 +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';
@@ -26,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/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@juwel-development/design-system",
-	"version": "3.10.0",
+	"version": "4.0.0",
 	"type": "module",
 	"description": "Shared design system: tokens and components.",
 	"license": "MIT",
@@ -29,9 +29,9 @@
 			"import": "./dist/design-system.js",
 			"default": "./dist/design-system.js"
 		},
-		"./styles.css": "./src/styles.css",
-		"./styles.light.css": "./src/styles.light.css",
-		"./styles.dark.css": "./src/styles.dark.css",
+		"./styles.css": "./dist/styles.css",
+		"./styles.light.css": "./dist/styles.light.css",
+		"./styles.dark.css": "./dist/styles.dark.css",
 		"./tokens.css": "./src/tokens.css",
 		"./tokens.light.css": "./src/tokens.light.css",
 		"./tokens.dark.css": "./src/tokens.dark.css",
@@ -41,7 +41,7 @@
 		"build:tokens": "tsx scripts/build-tokens.ts",
 		"build:components": "vite build",
 		"build:types": "tsc -p tsconfig.build.json --emitDeclarationOnly --declarationDir dist/types",
-		"build": "npm run build:components && npm run build:types",
+		"build": "npm run build:components && npm run build:styles && npm run build:types && npm run check:build",
 		"typecheck": "tsc --noEmit",
 		"test": "vitest run",
 		"test:coverage": "vitest run --coverage",
@@ -53,7 +53,9 @@
 		"fallow:human": "fallow dead-code && fallow dupes && fallow health",
 		"fallow:agent": "fallow review --brief",
 		"fallow:map": "fallow viz",
-		"prepare": "husky"
+		"prepare": "husky",
+		"build:styles": "vite build --config vite.styles.config.ts",
+		"check:build": "tsx scripts/check-build.ts"
 	},
 	"dependencies": {
 		"class-variance-authority": "^0.7.1"
@@ -61,7 +63,8 @@
 	"peerDependencies": {
 		"react": "^19.0.0",
 		"react-dom": "^19.0.0",
-		"rxjs": "^7.8.2"
+		"rxjs": "^7.8.2",
+		"tailwindcss": "^4.0.0"
 	},
 	"devDependencies": {
 		"@biomejs/biome": "^2.5.7",
@@ -93,12 +96,19 @@
 		"tsx": "^4.23.11",
 		"typescript": "^5.9.2",
 		"vite": "^8.2.1",
-		"vite-plugin-lib-inject-css": "^2.2.2",
 		"vitest": "^4.1.10"
 	},
 	"overrides": {
 		"fallow-type-aware": {
 			"typescript": "7.0.2"
 		}
+	},
+	"sideEffects": [
+		"**/*.css"
+	],
+	"peerDependenciesMeta": {
+		"tailwindcss": {
+			"optional": true
+		}
 	}
 }