shelving 1.253.2 → 1.253.3

package/ui/block/Section.js

@@ -17,13 +17,11 @@ const SECTION_CLASS = getModuleClass(SECTION_CSS, "section");
  * @see https://dhoulb.github.io/shelving/ui/block/Section/getSectionClass
  */
 export function getSectionClass(variants) {
-    return getClass(SECTION_CLASS, getColorClass(variants), getSpaceClass(variants), getTypographyClass(variants), getWidthClass(variants));
-}
-function renderSection(defaultComponent, { as: Component = defaultComponent, children, ...variants }) {
-    return _jsx(Component, { className: getSectionClass(variants), children: children });
+    return getClass(SECTION_CLASS, //
+    getColorClass(variants), getSpaceClass(variants), getTypographyClass(variants), getWidthClass(variants));
 }
 /**
- * `<section>` block with block-level spacing.
+ * `<section>` block with section-level spacing.
  * - Pass `as` to render a different semantic element.
  *
  * @kind component
@@ -31,61 +29,51 @@ function renderSection(defaultComponent, { as: Component = defaultComponent, chi
  * @example <Section><Heading>About</Heading></Section>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Section
  */
-export function Section(props) {
-    return renderSection("section", props);
+export function Section({ as: Element = "section", children, ...variants }) {
+    return _jsx(Element, { className: getSectionClass(variants), children: children });
 }
 /**
- * `<header>` block with block-level spacing.
+ * `<header>` block with section-level spacing.
  *
  * @kind component
  * @returns Rendered `<header>` element.
  * @example <Header><Title>Welcome</Title></Header>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Header
  */
-export function Header(props) {
-    return renderSection("header", props);
+export function Header({ as: Element = "section", children, ...variants }) {
+    return _jsx(Element, { className: getSectionClass(variants), children: children });
 }
 /**
- * `<footer>` block with block-level spacing.
+ * `<footer>` block with section-level spacing.
  *
  * @kind component
  * @returns Rendered `<footer>` element.
  * @example <Footer><Small>© 2026</Small></Footer>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Footer
  */
-export function Footer(props) {
-    return renderSection("footer", props);
-}
-/**
- * `<nav>` block with block-level spacing.
- *
- * @kind component
- * @returns Rendered `<nav>` element.
- * @example <Nav><Link href="/">Home</Link></Nav>
- * @see https://dhoulb.github.io/shelving/ui/block/Section/Nav
- */
-export function Nav(props) {
-    return renderSection("nav", props);
+export function Footer({ as: Element = "section", children, ...variants }) {
+    return _jsx(Element, { className: getSectionClass(variants), children: children });
 }
 /**
- * `<aside>` block with block-level spacing.
+ * `<article>` block with section-level spacing.
+ * - Use a `<Card>` instead to display boxed content.
  *
  * @kind component
- * @returns Rendered `<aside>` element.
- * @example <Aside width="narrow"><Paragraph>Sidebar</Paragraph></Aside>
- * @see https://dhoulb.github.io/shelving/ui/block/Section/Aside
+ * @returns Rendered `<article>` element.
+ * @see https://dhoulb.github.io/shelving/ui/block/Section/Article
  */
-export function Aside(props) {
-    return renderSection("aside", props);
+export function Article({ as: Element = "article", children, ...variants }) {
+    return _jsx(Element, { className: getSectionClass(variants), children: children });
 }
 /**
- * `<figure>` block with block-level spacing. Pair with `<Caption>` for `<figcaption>` content.
+ * `<figure>` block with section-level spacing.
+ * - Pair with `<Caption>` for `<figcaption>` content.
  *
  * @kind component
  * @returns Rendered `<figure>` element.
  * @example <Figure><Image src="/cat.jpg" /><Caption>A cat</Caption></Figure>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Figure
  */
-export function Figure(props) {
-    return renderSection("figure", props);
+export function Figure({ as: Element = "figure", children, ...variants }) {
+    return _jsx(Element, { className: getSectionClass(variants), children: children });
 }

package/ui/block/Section.md

@@ -1,10 +1,10 @@
 # Section
 
-A landmark content region — renders a `<section>` with block-level spacing and a constrained content width. `Section.tsx` exports the whole family of semantic landmarks (`Section`, `Header`, `Footer`, `Nav`, `Aside`, `Figure`) — they share `SectionProps` and differ only in the HTML element they render.
+A landmark content region — renders a `<section>` with block-level spacing and a constrained content width. `Section.tsx` exports the whole family of semantic landmarks (`<Section>`, `<Header>`, `<Footer>`, `<Figure>`) — they share `SectionProps` and differ only in the HTML element they render.
 
 **Things to know:**
 
-- Pick the component whose HTML element matches the semantic meaning rather than reaching for a generic `<Block>`. `<Section>` is a `<section>`, `<Nav>` a `<nav>`, `<Figure>` a `<figure>`, and so on.
+- Pick the component whose HTML element matches the semantic meaning rather than reaching for a generic `<Block>`. `<Section>` is a `<section>`, `<Figure>` a `<figure>`, and so on.
 - Every section centres its content and caps the line length so text never touches the viewport edges. Nested sections relax that cap so they can fill their parent.
 - Sections default to the `--width-normal` content width, so most of the time you set no width at all. Pass `width="narrow"` / `"wide"` / `"full"` (or `"fit"`) to change that, and the usual `color` / `space` / typography variants to retint and respace.
 - Pair `Figure` with `<Caption>` for a `<figure>` / `<figcaption>` pair.

package/ui/block/Section.module.css

@@ -1,4 +1,6 @@
 @import "../style/layers.css";
+@import "../style/Color.module.css";
+@import "../style/Typography.module.css";
 @import "../style/Space.module.css";
 @import "../style/Width.module.css";
 

package/ui/block/Section.tsx

@@ -5,24 +5,22 @@ import { getTypographyClass, type TypographyVariants } from "../style/Typography
 import { getWidthClass, type WidthVariants } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import type { OptionalChildProps } from "../util/props.js";
+import type { BlockElement } from "./Block.js";
 import SECTION_CSS from "./Section.module.css";
 
 const SECTION_CLASS = getModuleClass(SECTION_CSS, "section");
 
-/**
- * Semantic element names a `Section` may render as via its `as` prop.
- *
- * @see https://dhoulb.github.io/shelving/ui/block/Section/SectionElement
- */
-export type SectionElement = "section" | "header" | "footer" | "nav" | "aside" | "figure";
-
 /**
  * Props for `Section` and its semantic siblings — colour, space, typography, and width variants plus an optional `as` element override.
  *
  * @see https://dhoulb.github.io/shelving/ui/block/Section/SectionProps
  */
 export interface SectionProps extends ColorVariants, SpaceVariants, TypographyVariants, WidthVariants, OptionalChildProps {
-	as?: SectionElement | undefined;
+	/**
+	 * Element this `<Section>` renders as, e.g. "header" to output a "<header>"
+	 * @default "section"
+	 */
+	as?: BlockElement | undefined;
 }
 
 /**
@@ -36,18 +34,17 @@ export interface SectionProps extends ColorVariants, SpaceVariants, TypographyVa
  * @see https://dhoulb.github.io/shelving/ui/block/Section/getSectionClass
  */
 export function getSectionClass(variants: SectionProps): string {
-	return getClass(SECTION_CLASS, getColorClass(variants), getSpaceClass(variants), getTypographyClass(variants), getWidthClass(variants));
-}
-
-function renderSection(
-	defaultComponent: SectionElement,
-	{ as: Component = defaultComponent, children, ...variants }: SectionProps,
-): ReactElement {
-	return <Component className={getSectionClass(variants)}>{children}</Component>;
+	return getClass(
+		SECTION_CLASS, //
+		getColorClass(variants),
+		getSpaceClass(variants),
+		getTypographyClass(variants),
+		getWidthClass(variants),
+	);
 }
 
 /**
- * `<section>` block with block-level spacing.
+ * `<section>` block with section-level spacing.
  * - Pass `as` to render a different semantic element.
  *
  * @kind component
@@ -55,66 +52,55 @@ function renderSection(
  * @example <Section><Heading>About</Heading></Section>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Section
  */
-export function Section(props: SectionProps): ReactElement {
-	return renderSection("section", props);
+export function Section({ as: Element = "section", children, ...variants }: SectionProps): ReactElement {
+	return <Element className={getSectionClass(variants)}>{children}</Element>;
 }
 
 /**
- * `<header>` block with block-level spacing.
+ * `<header>` block with section-level spacing.
  *
  * @kind component
  * @returns Rendered `<header>` element.
  * @example <Header><Title>Welcome</Title></Header>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Header
  */
-export function Header(props: SectionProps): ReactElement {
-	return renderSection("header", props);
+export function Header({ as: Element = "section", children, ...variants }: SectionProps): ReactElement {
+	return <Element className={getSectionClass(variants)}>{children}</Element>;
 }
 
 /**
- * `<footer>` block with block-level spacing.
+ * `<footer>` block with section-level spacing.
  *
  * @kind component
  * @returns Rendered `<footer>` element.
  * @example <Footer><Small>© 2026</Small></Footer>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Footer
  */
-export function Footer(props: SectionProps): ReactElement {
-	return renderSection("footer", props);
-}
-
-/**
- * `<nav>` block with block-level spacing.
- *
- * @kind component
- * @returns Rendered `<nav>` element.
- * @example <Nav><Link href="/">Home</Link></Nav>
- * @see https://dhoulb.github.io/shelving/ui/block/Section/Nav
- */
-export function Nav(props: SectionProps): ReactElement {
-	return renderSection("nav", props);
+export function Footer({ as: Element = "section", children, ...variants }: SectionProps): ReactElement {
+	return <Element className={getSectionClass(variants)}>{children}</Element>;
 }
 
 /**
- * `<aside>` block with block-level spacing.
+ * `<article>` block with section-level spacing.
+ * - Use a `<Card>` instead to display boxed content.
  *
  * @kind component
- * @returns Rendered `<aside>` element.
- * @example <Aside width="narrow"><Paragraph>Sidebar</Paragraph></Aside>
- * @see https://dhoulb.github.io/shelving/ui/block/Section/Aside
+ * @returns Rendered `<article>` element.
+ * @see https://dhoulb.github.io/shelving/ui/block/Section/Article
  */
-export function Aside(props: SectionProps): ReactElement {
-	return renderSection("aside", props);
+export function Article({ as: Element = "article", children, ...variants }: SectionProps): ReactElement {
+	return <Element className={getSectionClass(variants)}>{children}</Element>;
 }
 
 /**
- * `<figure>` block with block-level spacing. Pair with `<Caption>` for `<figcaption>` content.
+ * `<figure>` block with section-level spacing.
+ * - Pair with `<Caption>` for `<figcaption>` content.
  *
  * @kind component
  * @returns Rendered `<figure>` element.
  * @example <Figure><Image src="/cat.jpg" /><Caption>A cat</Caption></Figure>
  * @see https://dhoulb.github.io/shelving/ui/block/Section/Figure
  */
-export function Figure(props: SectionProps): ReactElement {
-	return renderSection("figure", props);
+export function Figure({ as: Element = "figure", children, ...variants }: SectionProps): ReactElement {
+	return <Element className={getSectionClass(variants)}>{children}</Element>;
 }

package/ui/block/Subheading.module.css

@@ -1,8 +1,7 @@
 @import "../style/layers.css";
-@import "../style/Font.module.css";
-@import "../style/Size.module.css";
 @import "../style/Space.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Color.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.subheading,

package/ui/block/Title.module.css

@@ -1,8 +1,7 @@
 @import "../style/layers.css";
-@import "../style/Font.module.css";
-@import "../style/Size.module.css";
+@import "../style/Color.module.css";
 @import "../style/Space.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.title,

package/ui/block/Video.js

@@ -5,6 +5,7 @@ import { getSpaceClass } from "../style/Space.js";
 import { getWidthClass } from "../style/Width.js";
 import { getClass, getModuleClass } from "../util/css.js";
 import styles from "./Video.module.css";
+const VIDEO_CLASS = getModuleClass(styles, "video");
 /**
  * Video container element.
  * - Has a black background and a 16:9 aspect ratio.
@@ -17,7 +18,8 @@ import styles from "./Video.module.css";
  */
 export function Video({ children, ...variants }) {
     const ref = useRef(null);
-    return (_jsx("figure", { ref: ref, className: getClass(getModuleClass(styles, "video"), getSpaceClass(variants), getWidthClass(variants)), children: children }));
+    return (_jsx("figure", { ref: ref, className: getClass(VIDEO_CLASS, //
+        getSpaceClass(variants), getWidthClass(variants)), children: children }));
 }
 /**
  * Set of video buttons floating over a video.

package/ui/block/Video.tsx

@@ -6,6 +6,8 @@ import { getClass, getModuleClass } from "../util/css.js";
 import type { ChildProps, OptionalChildProps } from "../util/props.js";
 import styles from "./Video.module.css";
 
+const VIDEO_CLASS = getModuleClass(styles, "video");
+
 /**
  * Props for `Video` — space and width variants plus optional `children`.
  *
@@ -48,7 +50,14 @@ export function Video({ children, ...variants }: VideoProps): ReactElement {
 	const ref = useRef<HTMLElement | null>(null);
 
 	return (
-		<figure ref={ref} className={getClass(getModuleClass(styles, "video"), getSpaceClass(variants), getWidthClass(variants))}>
+		<figure
+			ref={ref}
+			className={getClass(
+				VIDEO_CLASS, //
+				getSpaceClass(variants),
+				getWidthClass(variants),
+			)}
+		>
 			{children}
 		</figure>
 	);

package/ui/form/Button.module.css

@@ -1,13 +1,11 @@
 @import "../style/layers.css";
 @import "../style/Color.module.css";
 @import "../style/Duration.module.css";
-@import "../style/Font.module.css";
 @import "../style/Radius.module.css";
-@import "../style/Size.module.css";
 @import "../style/Space.module.css";
 @import "../style/Stroke.module.css";
 @import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.button {

package/ui/form/Field.module.css

@@ -1,9 +1,8 @@
 @import "../style/layers.css";
 @import "../style/Color.module.css";
-@import "../style/Size.module.css";
+@import "../style/Typography.module.css";
 @import "../style/Space.module.css";
 @import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
 
 @layer components {
 	.field {

package/ui/form/Input.module.css

@@ -1,13 +1,11 @@
 @import "../style/layers.css";
 @import "../style/Color.module.css";
 @import "../style/Duration.module.css";
-@import "../style/Font.module.css";
 @import "../style/Radius.module.css";
-@import "../style/Size.module.css";
 @import "../style/Space.module.css";
 @import "../style/Stroke.module.css";
 @import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.input {

package/ui/inline/Code.module.css

@@ -1,10 +1,8 @@
 @import "../style/layers.css";
-@import "../style/Font.module.css";
 @import "../style/Radius.module.css";
-@import "../style/Size.module.css";
 @import "../style/Space.module.css";
 @import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.code,

package/ui/inline/Deleted.module.css

@@ -1,7 +1,7 @@
 @import "../style/layers.css";
 @import "../style/Color.module.css";
 @import "../style/Stroke.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.deleted,

package/ui/inline/Inserted.module.css

@@ -1,7 +1,7 @@
 @import "../style/layers.css";
 @import "../style/Color.module.css";
 @import "../style/Stroke.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.inserted,

package/ui/inline/Link.module.css

@@ -1,7 +1,7 @@
 @import "../style/layers.css";
 @import "../style/Color.module.css";
 @import "../style/Stroke.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.link,

package/ui/inline/Mark.module.css

@@ -1,6 +1,6 @@
 @import "../style/layers.css";
 @import "../style/Radius.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.mark,

package/ui/inline/Small.module.css

@@ -1,5 +1,5 @@
 @import "../style/layers.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.small,

package/ui/inline/Strong.module.css

@@ -1,5 +1,5 @@
 @import "../style/layers.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.strong,

package/ui/menu/Menu.module.css

@@ -1,12 +1,9 @@
 @import "../style/layers.css";
 @import "../style/Color.module.css";
-@import "../style/Font.module.css";
 @import "../style/Radius.module.css";
-@import "../style/Size.module.css";
 @import "../style/Space.module.css";
 @import "../style/Stroke.module.css";
-@import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.menu {

package/ui/misc/Loading.module.css

@@ -1,5 +1,5 @@
 @import "../style/layers.css";
-@import "../style/Size.module.css";
+@import "../style/Typography.module.css";
 @import "../style/Tint.module.css";
 
 @layer components {

package/ui/misc/StatusIcon.module.css

@@ -1,5 +1,5 @@
 @import "../style/layers.css";
-@import "../style/Size.module.css";
+@import "../style/Typography.module.css";
 @import "../style/Tint.module.css";
 
 @layer components {

package/ui/misc/Tag.module.css

@@ -1,12 +1,10 @@
 @import "../style/layers.css";
 @import "../style/Color.module.css";
-@import "../style/Font.module.css";
 @import "../style/Radius.module.css";
-@import "../style/Size.module.css";
 @import "../style/Space.module.css";
 @import "../style/Stroke.module.css";
 @import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.tag {

package/ui/notice/Message.module.css

@@ -1,6 +1,6 @@
 @import "../style/layers.css";
 @import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
+@import "../style/Typography.module.css";
 
 @layer components {
 	.message {

package/ui/notice/Notice.module.css

@@ -1,10 +1,9 @@
 @import "../style/layers.css";
 @import "../style/Radius.module.css";
-@import "../style/Size.module.css";
+@import "../style/Typography.module.css";
 @import "../style/Space.module.css";
 @import "../style/Stroke.module.css";
 @import "../style/Tint.module.css";
-@import "../style/Weight.module.css";
 
 @layer components {
 	.notice {

package/ui/style/Flex.js

@@ -13,7 +13,8 @@ import { getGapClass } from "./Gap.js";
  * @see https://dhoulb.github.io/shelving/ui/style/Flex/getFlexClass
  */
 export function getFlexClass(variants) {
-    return getClass(getModuleClass(FLEX_CSS, "flex", variants), getGapClass(variants));
+    return getClass(getModuleClass(FLEX_CSS, "flex", variants), //
+    getGapClass(variants));
 }
 /**
  * Flex container that arranges its children as a row by default.

package/ui/style/Flex.module.css

@@ -1,5 +1,5 @@
 @import "layers.css";
-@import "Size.module.css";
+@import "Typography.module.css";
 @import "Space.module.css";
 
 @layer defaults {

package/ui/style/Flex.tsx

@@ -81,7 +81,10 @@ export interface FlexVariants extends GapVariants {
  * @see https://dhoulb.github.io/shelving/ui/style/Flex/getFlexClass
  */
 export function getFlexClass(variants: FlexVariants): string {
-	return getClass(getModuleClass(FLEX_CSS, "flex", variants), getGapClass(variants));
+	return getClass(
+		getModuleClass(FLEX_CSS, "flex", variants), //
+		getGapClass(variants),
+	);
 }
 
 /**

package/ui/style/Padding.js

@@ -9,5 +9,5 @@ import PADDING_CSS from "./Padding.module.css";
  * @see https://dhoulb.github.io/shelving/ui/style/Padding/getPaddingClass
  */
 export function getPaddingClass({ padding }) {
-    return padding && getModuleClass(PADDING_CSS, padding);
+    return padding && getModuleClass(PADDING_CSS, `padding-${padding}`);
 }

package/ui/style/Padding.module.css

@@ -3,60 +3,60 @@
 
 @layer variants {
 	/* Block-padding variants. */
-	.none {
+	.padding-none {
 		padding-block: 0;
 	}
-	.xxsmall {
+	.padding-xxsmall {
 		padding-block: var(--space-xxsmall);
 	}
-	.xsmall {
+	.padding-xsmall {
 		padding-block: var(--space-xsmall);
 	}
-	.small {
+	.padding-small {
 		padding-block: var(--space-small);
 	}
-	.normal {
+	.padding-normal {
 		padding-block: var(--space-normal);
 	}
-	.large {
+	.padding-large {
 		padding-block: var(--space-large);
 	}
-	.xlarge {
+	.padding-xlarge {
 		padding-block: var(--space-xlarge);
 	}
-	.xxlarge {
+	.padding-xxlarge {
 		padding-block: var(--space-xxlarge);
 	}
 
 	/* Numeric block-padding multiples of `--space-normal` (`1x` … `10x`). */
-	.\31 x {
+	.padding-1x {
 		padding-block: calc(var(--space-normal) * 1);
 	}
-	.\32 x {
+	.padding-2x {
 		padding-block: calc(var(--space-normal) * 2);
 	}
-	.\33 x {
+	.padding-3x {
 		padding-block: calc(var(--space-normal) * 3);
 	}
-	.\34 x {
+	.padding-4x {
 		padding-block: calc(var(--space-normal) * 4);
 	}
-	.\35 x {
+	.padding-5x {
 		padding-block: calc(var(--space-normal) * 5);
 	}
-	.\36 x {
+	.padding-6x {
 		padding-block: calc(var(--space-normal) * 6);
 	}
-	.\37 x {
+	.padding-7x {
 		padding-block: calc(var(--space-normal) * 7);
 	}
-	.\38 x {
+	.padding-8x {
 		padding-block: calc(var(--space-normal) * 8);
 	}
-	.\39 x {
+	.padding-9x {
 		padding-block: calc(var(--space-normal) * 9);
 	}
-	.\31 0x {
+	.padding-10x {
 		padding-block: calc(var(--space-normal) * 10);
 	}
 }

package/ui/style/Padding.tsx

@@ -45,5 +45,5 @@ export interface PaddingVariants {
  * @see https://dhoulb.github.io/shelving/ui/style/Padding/getPaddingClass
  */
 export function getPaddingClass({ padding }: PaddingVariants): string | undefined {
-	return padding && getModuleClass(PADDING_CSS, padding);
+	return padding && getModuleClass(PADDING_CSS, `padding-${padding}`);
 }