@juwel-development/design-system 3.4.0 → 3.6.0

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@juwel-development/design-system",
-	"version": "3.4.0",
+	"version": "3.6.0",
 	"type": "module",
 	"description": "Shared design system: tokens and components.",
 	"license": "MIT",

package/src/Display/Typography/Eyebrow/Eyebrow.tsx

@@ -10,7 +10,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const eyebrow = cva('font-secondary text-label tracking-label font-medium', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'muted' },
 });
@@ -28,12 +35,15 @@ interface IEyebrowProps extends VariantProps<typeof eyebrow> {
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary`, sized by `--text-label` and tracked by
  *   `--tracking-label`, at weight 500.
- * - `color` selects the `muted` (default) or `foreground` role; nothing else paints text.
+ * - `color` selects `muted` (default), `foreground`, `success`, `warning`, `error` or `info`;
+ *   nothing else paints text. A status tone changes colour only and adds no announcement semantics.
  * - Sets neither `font-variant-caps` nor `font-variant-numeric` under any prop.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is **not a form label**: it renders no `htmlFor` and labels no control. A labelled control
  *   uses `Input`/`TextArea`, which label themselves.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Eyebrow: FunctionComponent<IEyebrowProps> = ({
   children,

package/src/Display/Typography/H1/H1.tsx

@@ -12,7 +12,14 @@ const h1 = cva(
   'font-primary text-display leading-display tracking-optical max-w-[var(--measure-display)]',
   {
     variants: {
-      color: { foreground: 'text-foreground', muted: 'text-muted' },
+      color: {
+        foreground: 'text-foreground',
+        muted: 'text-muted',
+        success: 'text-success',
+        warning: 'text-warning',
+        error: 'text-error',
+        info: 'text-info',
+      },
     },
     defaultVariants: { color: 'foreground' },
   },
@@ -34,7 +41,8 @@ interface IH1Props extends VariantProps<typeof h1> {
  *   because bigger type wants fewer characters per line (docs/adr/0004). The bound is the recipe's,
  *   not a caller's: the level fixes the role and the role fixes the measure, so there is no `measure`
  *   prop to select between roles (docs/adr/0008). It holds under every `color`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - This is an ordinary page title, and it is also a hero's lead - `display` is the hero role, so a
@@ -44,6 +52,8 @@ interface IH1Props extends VariantProps<typeof h1> {
  * - A subpage head is the exception: `PageHead` renders its own `h1` at the `title` role, the one
  *   sanctioned escape valve from level-fixes-role (docs/adr/0005). Reach for it where it fits.
  * - Heading levels descend without skipping — an `h1` is followed by an `h2`, never an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H1: FunctionComponent<IH1Props> = ({
   children,

package/src/Display/Typography/H2/H2.tsx

@@ -9,7 +9,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // Colour is a semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h2 = cva('font-primary text-title leading-title tracking-optical', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -27,10 +34,13 @@ interface IH2Props extends VariantProps<typeof h2> {
  * - Reads `--font-primary`, sized by `--text-title`, led by `--leading-title` and optically corrected
  *   by `--tracking-optical` — the title role is the smallest role that carries it, so `H3` and below
  *   take none.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h2` sits under an `h1`, not under an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H2: FunctionComponent<IH2Props> = ({
   children,

package/src/Display/Typography/H3/H3.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // class.
 const h3 = cva('font-primary text-subtitle leading-subtitle', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH3Props extends VariantProps<typeof h3> {
  * @Guarantees — enforced on every render
  * - Renders an `h3`; its outline level and the subtitle role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-subtitle` and led by `--leading-subtitle`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h3` sits under an `h2`, not under an `h1`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H3: FunctionComponent<IH3Props> = ({
   children,

package/src/Display/Typography/H4/H4.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h4 = cva('font-primary text-body leading-body font-bold', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -24,10 +31,13 @@ interface IH4Props extends VariantProps<typeof h4> {
  * @Guarantees — enforced on every render
  * - Renders an `h4`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, and is bold so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h4` sits under an `h3`, not under an `h2`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H4: FunctionComponent<IH4Props> = ({
   children,

package/src/Display/Typography/H5/H5.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h5 = cva('font-primary text-body leading-body font-semibold', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH5Props extends VariantProps<typeof h5> {
  * @Guarantees — enforced on every render
  * - Renders an `h5`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, semibold so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h5` sits under an `h4`, not under an `h3`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H5: FunctionComponent<IH5Props> = ({
   children,

package/src/Display/Typography/H6/H6.tsx

@@ -8,7 +8,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const h6 = cva('font-primary text-body leading-body font-medium', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -25,10 +32,13 @@ interface IH6Props extends VariantProps<typeof h6> {
  * @Guarantees — enforced on every render
  * - Renders an `h6`; its outline level and the body role are one choice, not two (docs/adr/0005).
  * - Reads `--font-primary`, sized by `--text-body`, medium so it stands apart from a paragraph.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Heading levels descend without skipping — an `h6` sits under an `h5`, not under an `h4`.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const H6: FunctionComponent<IH6Props> = ({
   children,

package/src/Display/Typography/Note/Note.tsx

@@ -11,7 +11,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // the page owns the rhythm around it. Colour is re-pointed by `.dark`, so no variant carries `dark:`.
 const note = cva('font-secondary text-small', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -30,7 +37,8 @@ export interface INoteProps extends VariantProps<typeof note> {
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-secondary` and sized by `--text-small`.
- * - `color` selects the `foreground` (default) or `muted` role; nothing else paints text.
+ * - `color` selects `foreground` (default), `muted`, `success`, `warning`, `error` or `info`;
+ *   nothing else paints text. A status tone changes colour only.
  * - Emits no tracking, no font-weight, no measure and no margin under any prop.
  * - Carries no ARIA role and no live region under any prop.
  *
@@ -44,6 +52,8 @@ export interface INoteProps extends VariantProps<typeof note> {
  *   architecture standard's one-way dependency rule is why `Prose` restates `P`'s utilities.
  * - Where the annotation is a form's status message, `Form` owns `role="status"`/`role="alert"` by
  *   state; a `Note` announces nothing.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Note: FunctionComponent<INoteProps> = ({
   children,

package/src/Display/Typography/P/P.tsx

@@ -7,7 +7,14 @@ import type { FunctionComponent, ReactNode } from 'react';
 // P owns no reading measure - that belongs to whatever owns the reading column (Prose #21).
 const p = cva('font-primary text-body leading-body', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -23,13 +30,16 @@ interface IPProps extends VariantProps<typeof p> {
  *
  * @Guarantees — enforced on every render
  * - Renders a `p`, reading `--font-primary`, sized by `--text-body` and led by `--leading-body`.
- * - `color` selects the `foreground` or `muted` role; nothing else paints text.
+ * - `color` selects `foreground`, `muted`, `success`, `warning`, `error` or `info`; nothing else
+ *   paints text. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Where line length matters, place the paragraph inside whatever bounds the reading measure; `P`
  *   does not constrain its own width.
  * - For a paragraph inside a reading column, reach for `Prose.Body`, which is measure-bounded by its
  *   `Prose.Root`; `P` is for a paragraph with no reading column around it.
+ * - Status-toned content communicates its status without relying on colour. If a change needs to be
+ *   announced, the caller owns that behavior; selecting a tone does not create a status event.
  */
 export const P: FunctionComponent<IPProps> = ({ children, color, testId }) => (
   <p className={p({ color })} data-testid={testId}>

package/src/Display/Typography/Prose/Prose.tsx

@@ -20,7 +20,14 @@ const proseLede = cva('font-primary text-lede leading-lede text-foreground');
 // semantic token re-pointed by `.dark`, so no variant carries a `dark:` class.
 const proseBody = cva('font-primary text-body leading-body', {
   variants: {
-    color: { foreground: 'text-foreground', muted: 'text-muted' },
+    color: {
+      foreground: 'text-foreground',
+      muted: 'text-muted',
+      success: 'text-success',
+      warning: 'text-warning',
+      error: 'text-error',
+      info: 'text-info',
+    },
   },
   defaultVariants: { color: 'foreground' },
 });
@@ -76,12 +83,15 @@ const ProseTail: FunctionComponent<IProseTailProps> = ({ children }) => (
  *   `--measure`, setting no font-size so the `ch` measure resolves against inherited body type.
  * - `Root` stacks its children on `--space-stack` and takes no outer margin: the page owns the
  *   rhythm around the block, and the air the block wants is at its edges and inside the type.
- * - `Lede` renders a `p` at the lede role; `Body` at the body role with a `foreground`/`muted`
- *   `color`; `Tail` at the small role, muted. No drop cap or other invented device.
+ * - `Lede` renders a fixed-foreground `p` at the lede role; `Body` at the body role with a
+ *   `foreground`, `muted`, `success`, `warning`, `error` or `info` `color`; `Tail` at the small
+ *   role, always muted. A status tone changes colour only and adds no announcement semantics.
  *
  * @CallerMustEnsure — the component cannot see these and does not check them
  * - Use `Prose.Body` for a paragraph inside this reading column; for a paragraph with no reading
  *   column around it - in a form, a card, a table cell - use `P` instead.
+ * - Status-toned content communicates its status without relying on colour. The caller owns any
+ *   announcement behavior required when that status changes.
  */
 export const Prose = {
   Root: ProseRoot,