@juwel-development/design-system 3.1.0 → 3.3.0

package/src/Theme/renderTokens.ts

@@ -129,15 +129,15 @@ const TYPOGRAPHY = `@theme {
   --tracking-optical: -0.02em;
 }`;
 
-/* The reading measure is in ch, not rem, so the character count stays held when the body size moves
-   under it; --measure-display is narrower because bigger type wants fewer characters per line, and
-   --measure-wide slightly wider - the standfirst of a page head (PageHead #18) is an opening statement,
-   not a reading column, so it runs a little past the reading measure by design. All three in ch and,
-   having no Tailwind namespace, in :root beside radius, read as max-w-[var(--measure)]. */
+/* The reading measures are in ch so the character count holds when the body size moves under them:
+   --measure-display narrower because bigger type wants fewer characters per line, --measure-wide a
+   little past the reading column for the page-head standfirst (PageHead #18). --measure-action is
+   the action column, in rem (docs/adr/0008, Amendments, #97); 20rem clears --control-min-width. */
 const MEASURE = `:root {
   --measure: 66ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
+  --measure-action: 20rem;
 }`;
 
 /* Three spacing roles, not a ladder: --space-stack is the sibling gap in a stack, --space-region the air
@@ -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
@@ -173,6 +180,14 @@ const FOLD = `:root {
   --fold-height: min(70vh, 40rem);
 }`;
 
+/* The least height a whole screen takes (CONTEXT.md: Cover) - measured against the screen like the
+   fold, in :root beside it with no Tailwind namespace, read as min-h-[var(--cover-height)]. In svh so
+   a mobile browser's collapsing chrome never hides a foot pinned to the bottom edge. A floor and
+   never a ceiling, so overflowing content grows the frame; enforced per ADR 0004. */
+const COVER = `:root {
+  --cover-height: 100svh;
+}`;
+
 /* Four aspect roles in a @theme block like typography: --aspect-* is a Tailwind 4 namespace, so it
    generates the aspect-portrait utilities Figure reaches rather than a :root value. Named shapes, not
    a ladder - ADR 0003/0004 rejected a radius and spacing scale (see SPACING) because a scale lets a
@@ -196,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()}`);
 
@@ -254,21 +285,34 @@ ${TYPOGRAPHY}
    after it and are not carried in @theme inline with the palette. */
 ${ASPECT}
 
-/* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
+/* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
+   are in ch against the type; the action column is in rem against the root, since it bounds a stack
+   of controls rather than a reading line (docs/adr/0008, Amendments). */
 ${MEASURE}
 
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
    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}
 
 /* The fold height has no Tailwind namespace either, so it sits in :root beside the gutter. */
 ${FOLD}
 
+/* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
+${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,7 +22,9 @@ 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';
 export type { FormState } from 'Layout/Form/Form';
 export { Form } from 'Layout/Form/Form';
@@ -29,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

@@ -177,11 +177,14 @@
   --aspect-wide:     16 / 9;
 }
 
-/* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
+/* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
+   are in ch against the type; the action column is in rem against the root, since it bounds a stack
+   of controls rather than a reading line (docs/adr/0008, Amendments). */
 :root {
   --measure: 66ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
+  --measure-action: 20rem;
 }
 
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -192,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);
@@ -202,8 +210,23 @@
   --fold-height: min(70vh, 40rem);
 }
 
+/* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
+:root {
+  --cover-height: 100svh;
+}
+
 /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
 :root {
   --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

@@ -148,11 +148,14 @@
   --aspect-wide:     16 / 9;
 }
 
-/* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
+/* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
+   are in ch against the type; the action column is in rem against the root, since it bounds a stack
+   of controls rather than a reading line (docs/adr/0008, Amendments). */
 :root {
   --measure: 66ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
+  --measure-action: 20rem;
 }
 
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -163,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);
@@ -173,8 +181,23 @@
   --fold-height: min(70vh, 40rem);
 }
 
+/* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
+:root {
+  --cover-height: 100svh;
+}
+
 /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
 :root {
   --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.light.css

@@ -148,11 +148,14 @@
   --aspect-wide:     16 / 9;
 }
 
-/* The reading measure has no Tailwind namespace, so it sits in :root beside radius. */
+/* The measures have no Tailwind namespace, so they sit in :root beside radius. The reading measures
+   are in ch against the type; the action column is in rem against the root, since it bounds a stack
+   of controls rather than a reading line (docs/adr/0008, Amendments). */
 :root {
   --measure: 66ch;
   --measure-display: 36ch;
   --measure-wide: 72ch;
+  --measure-action: 20rem;
 }
 
 /* Spacing has no Tailwind namespace either - --spacing is a single base multiplier ADR 0004 forbids
@@ -163,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);
@@ -173,8 +181,23 @@
   --fold-height: min(70vh, 40rem);
 }
 
+/* The cover height has no Tailwind namespace either, so it sits in :root beside the fold. */
+:root {
+  --cover-height: 100svh;
+}
+
 /* The checklist tick's dimensions are not colours either, and sit in :root beside the underline block. */
 :root {
   --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;
+}