emily-css 1.0.25 → 1.0.27

package/src/index.js

@@ -359,7 +359,6 @@ function generateSpacingUtilities(spacing) {
 function generateFlexboxUtilities(spacing) {
   let css = `/* Flexbox */\n`;
 
-  // Note: .flex is already generated in displayUtilities(), removed duplicate here
   css += `.inline-flex { display: inline-flex; }\n`;
 
   // Direction
@@ -373,22 +372,65 @@ function generateFlexboxUtilities(spacing) {
   css += `.flex-nowrap { flex-wrap: nowrap; }\n`;
   css += `.flex-wrap-reverse { flex-wrap: wrap-reverse; }\n`;
 
-  // Grow/shrink
+  // Flex shorthand
   css += `.flex-1 { flex: 1 1 0%; }\n`;
   css += `.flex-auto { flex: 1 1 auto; }\n`;
+  css += `.flex-initial { flex: 0 1 auto; }\n`;
   css += `.flex-none { flex: none; }\n`;
+
+  // Grow/shrink
   css += `.grow { flex-grow: 1; }\n`;
   css += `.grow-0 { flex-grow: 0; }\n`;
   css += `.shrink { flex-shrink: 1; }\n`;
   css += `.shrink-0 { flex-shrink: 0; }\n`;
 
+  // Flex basis
+  css += `.basis-auto { flex-basis: auto; }\n`;
+  css += `.basis-full { flex-basis: 100%; }\n`;
+  Object.entries(spacing).forEach(([key, value]) => {
+    const escaped = escapeClassName(key);
+    css += `.basis-${escaped} { flex-basis: ${value}; }\n`;
+  });
+
+  const fractions = {
+    '1\\/2': '50%', '1\\/3': '33.333333%', '2\\/3': '66.666667%',
+    '1\\/4': '25%', '2\\/4': '50%', '3\\/4': '75%',
+    '1\\/5': '20%', '2\\/5': '40%', '3\\/5': '60%', '4\\/5': '80%',
+    '1\\/6': '16.666667%', '2\\/6': '33.333333%', '3\\/6': '50%', '4\\/6': '66.666667%', '5\\/6': '83.333333%',
+    '1\\/12': '8.333333%', '2\\/12': '16.666667%', '3\\/12': '25%', '4\\/12': '33.333333%', '5\\/12': '41.666667%', '6\\/12': '50%', '7\\/12': '58.333333%', '8\\/12': '66.666667%', '9\\/12': '75%', '10\\/12': '83.333333%', '11\\/12': '91.666667%'
+  };
+  Object.entries(fractions).forEach(([name, value]) => {
+    css += `.basis-${name} { flex-basis: ${value}; }\n`;
+  });
+
+  // Order
+  css += `.order-first { order: -9999; }\n`;
+  css += `.order-last { order: 9999; }\n`;
+  css += `.order-none { order: 0; }\n`;
+  for (let i = 1; i <= 12; i++) {
+    css += `.order-${i} { order: ${i}; }\n`;
+  }
+
   // Justify (main axis)
+  css += `.justify-normal { justify-content: normal; }\n`;
   css += `.justify-start { justify-content: flex-start; }\n`;
   css += `.justify-end { justify-content: flex-end; }\n`;
   css += `.justify-center { justify-content: center; }\n`;
   css += `.justify-between { justify-content: space-between; }\n`;
   css += `.justify-around { justify-content: space-around; }\n`;
   css += `.justify-evenly { justify-content: space-evenly; }\n`;
+  css += `.justify-stretch { justify-content: stretch; }\n`;
+
+  // Content alignment
+  css += `.content-normal { align-content: normal; }\n`;
+  css += `.content-center { align-content: center; }\n`;
+  css += `.content-start { align-content: flex-start; }\n`;
+  css += `.content-end { align-content: flex-end; }\n`;
+  css += `.content-between { align-content: space-between; }\n`;
+  css += `.content-around { align-content: space-around; }\n`;
+  css += `.content-evenly { align-content: space-evenly; }\n`;
+  css += `.content-baseline { align-content: baseline; }\n`;
+  css += `.content-stretch { align-content: stretch; }\n`;
 
   // Items (cross axis)
   css += `.items-start { align-items: flex-start; }\n`;
@@ -398,11 +440,32 @@ function generateFlexboxUtilities(spacing) {
   css += `.items-stretch { align-items: stretch; }\n`;
 
   // Self alignment
+  css += `.self-auto { align-self: auto; }\n`;
   css += `.self-start { align-self: flex-start; }\n`;
   css += `.self-end { align-self: flex-end; }\n`;
   css += `.self-center { align-self: center; }\n`;
   css += `.self-stretch { align-self: stretch; }\n`;
-  css += `.self-auto { align-self: auto; }\n`;
+  css += `.self-baseline { align-self: baseline; }\n`;
+
+  // Place utilities
+  css += `.place-content-center { place-content: center; }\n`;
+  css += `.place-content-start { place-content: start; }\n`;
+  css += `.place-content-end { place-content: end; }\n`;
+  css += `.place-content-between { place-content: space-between; }\n`;
+  css += `.place-content-around { place-content: space-around; }\n`;
+  css += `.place-content-evenly { place-content: space-evenly; }\n`;
+  css += `.place-content-baseline { place-content: baseline; }\n`;
+  css += `.place-content-stretch { place-content: stretch; }\n`;
+  css += `.place-items-start { place-items: start; }\n`;
+  css += `.place-items-end { place-items: end; }\n`;
+  css += `.place-items-center { place-items: center; }\n`;
+  css += `.place-items-baseline { place-items: baseline; }\n`;
+  css += `.place-items-stretch { place-items: stretch; }\n`;
+  css += `.place-self-auto { place-self: auto; }\n`;
+  css += `.place-self-start { place-self: start; }\n`;
+  css += `.place-self-end { place-self: end; }\n`;
+  css += `.place-self-center { place-self: center; }\n`;
+  css += `.place-self-stretch { place-self: stretch; }\n`;
 
   css += `\n`;
   return css;
@@ -415,45 +478,59 @@ function generateFlexboxUtilities(spacing) {
 function generateGridUtilities(spacing) {
   let css = `/* Grid */\n`;
 
-  // Note: .grid is already generated in displayUtilities(), removed duplicate here
   css += `.inline-grid { display: inline-grid; }\n`;
 
-  // Grid columns
+  css += `.grid-cols-none { grid-template-columns: none; }\n`;
+  css += `.grid-cols-subgrid { grid-template-columns: subgrid; }\n`;
   for (let i = 1; i <= 12; i++) {
     css += `.grid-cols-${i} { grid-template-columns: repeat(${i}, minmax(0, 1fr)); }\n`;
   }
 
-  // Column span
+  css += `.grid-rows-none { grid-template-rows: none; }\n`;
+  css += `.grid-rows-subgrid { grid-template-rows: subgrid; }\n`;
+  for (let i = 1; i <= 12; i++) {
+    css += `.grid-rows-${i} { grid-template-rows: repeat(${i}, minmax(0, 1fr)); }\n`;
+  }
+
   for (let i = 1; i <= 12; i++) {
     css += `.col-span-${i} { grid-column: span ${i} / span ${i}; }\n`;
   }
   css += `.col-span-full { grid-column: 1 / -1; }\n`;
-
-  // Column start/end
+  css += `.col-auto { grid-column: auto; }\n`;
   for (let i = 1; i <= 13; i++) {
     css += `.col-start-${i} { grid-column-start: ${i}; }\n`;
     css += `.col-end-${i} { grid-column-end: ${i}; }\n`;
   }
+  css += `.col-start-auto { grid-column-start: auto; }\n`;
+  css += `.col-end-auto { grid-column-end: auto; }\n`;
 
-  // Row span
-  for (let i = 1; i <= 6; i++) {
+  for (let i = 1; i <= 12; i++) {
     css += `.row-span-${i} { grid-row: span ${i} / span ${i}; }\n`;
   }
   css += `.row-span-full { grid-row: 1 / -1; }\n`;
-
-  // Row start/end
-  for (let i = 1; i <= 6; i++) {
+  css += `.row-auto { grid-row: auto; }\n`;
+  for (let i = 1; i <= 13; i++) {
     css += `.row-start-${i} { grid-row-start: ${i}; }\n`;
     css += `.row-end-${i} { grid-row-end: ${i}; }\n`;
   }
+  css += `.row-start-auto { grid-row-start: auto; }\n`;
+  css += `.row-end-auto { grid-row-end: auto; }\n`;
+
+  css += `.grid-flow-row { grid-auto-flow: row; }\n`;
+  css += `.grid-flow-col { grid-auto-flow: column; }\n`;
+  css += `.grid-flow-dense { grid-auto-flow: dense; }\n`;
+  css += `.grid-flow-row-dense { grid-auto-flow: row dense; }\n`;
+  css += `.grid-flow-col-dense { grid-auto-flow: column dense; }\n`;
 
-  // Auto flow
   css += `.auto-cols-auto { grid-auto-columns: auto; }\n`;
+  css += `.auto-cols-min { grid-auto-columns: min-content; }\n`;
+  css += `.auto-cols-max { grid-auto-columns: max-content; }\n`;
   css += `.auto-cols-fr { grid-auto-columns: minmax(0, 1fr); }\n`;
   css += `.auto-rows-auto { grid-auto-rows: auto; }\n`;
+  css += `.auto-rows-min { grid-auto-rows: min-content; }\n`;
+  css += `.auto-rows-max { grid-auto-rows: max-content; }\n`;
   css += `.auto-rows-fr { grid-auto-rows: minmax(0, 1fr); }\n`;
 
-  // Gap
   Object.entries(spacing).forEach(([key, value]) => {
     const escaped = escapeClassName(key);
     css += `.gap-${escaped} { gap: ${value}; }\n`;
@@ -472,57 +549,76 @@ function generateGridUtilities(spacing) {
 function generateTypographyUtilities(config) {
   let css = `/* Typography */\n`;
 
-  // Font sizes
   config.typography.fontSizes.forEach(fontSize => {
     css += `.text-${fontSize.name} { font-size: var(--text-${fontSize.name}); line-height: ${fontSize.lineHeight}; }\n`;
   });
 
-  // Font weights
   Object.entries(config.typography.fontWeights).forEach(([name, weight]) => {
     css += `.font-${name} { font-weight: ${weight}; }\n`;
   });
 
-  // Text alignment
+  css += `.italic { font-style: italic; }\n`;
+  css += `.not-italic { font-style: normal; }\n`;
+
   css += `.text-left { text-align: left; }\n`;
   css += `.text-center { text-align: center; }\n`;
   css += `.text-right { text-align: right; }\n`;
   css += `.text-justify { text-align: justify; }\n`;
+  css += `.text-start { text-align: start; }\n`;
+  css += `.text-end { text-align: end; }\n`;
 
-  // Text wrapping (.truncate lives in overflowUtilities in generators.js — not duplicated here)
-  css += `.whitespace-nowrap { white-space: nowrap; }\n`;
   css += `.whitespace-normal { white-space: normal; }\n`;
-  css += `.break-words { word-break: break-word; }\n`;
+  css += `.whitespace-nowrap { white-space: nowrap; }\n`;
+  css += `.whitespace-pre { white-space: pre; }\n`;
+  css += `.whitespace-pre-line { white-space: pre-line; }\n`;
+  css += `.whitespace-pre-wrap { white-space: pre-wrap; }\n`;
+  css += `.whitespace-break-spaces { white-space: break-spaces; }\n`;
+  css += `.text-wrap { text-wrap: wrap; }\n`;
+  css += `.text-nowrap { text-wrap: nowrap; }\n`;
+  css += `.text-balance { text-wrap: balance; }\n`;
+  css += `.text-pretty { text-wrap: pretty; }\n`;
+  css += `.break-normal { overflow-wrap: normal; word-break: normal; }\n`;
+  css += `.break-words { overflow-wrap: break-word; }\n`;
   css += `.break-all { word-break: break-all; }\n`;
-
-  // Line height
-  css += `.leading-tight { line-height: 1.2; }\n`;
+  css += `.break-keep { word-break: keep-all; }\n`;
+  css += `.hyphens-none { hyphens: none; }\n`;
+  css += `.hyphens-manual { hyphens: manual; }\n`;
+  css += `.hyphens-auto { hyphens: auto; }\n`;
+
+  css += `.leading-none { line-height: 1; }\n`;
+  css += `.leading-tight { line-height: 1.25; }\n`;
+  css += `.leading-snug { line-height: 1.375; }\n`;
   css += `.leading-normal { line-height: 1.5; }\n`;
-  css += `.leading-relaxed { line-height: 1.75; }\n`;
+  css += `.leading-relaxed { line-height: 1.625; }\n`;
+  css += `.leading-loose { line-height: 2; }\n`;
+  css += `.text-display { font-size: clamp(2.5rem, 6vw, 4rem); }\n`;
 
-  // Letter spacing
   css += `.tracking-tighter { letter-spacing: -0.05em; }\n`;
-  css += `.tracking-tight { letter-spacing: -0.02em; }\n`;
+  css += `.tracking-tight { letter-spacing: -0.025em; }\n`;
   css += `.tracking-normal { letter-spacing: 0em; }\n`;
-  css += `.tracking-wide { letter-spacing: 0.02em; }\n`;
+  css += `.tracking-wide { letter-spacing: 0.025em; }\n`;
   css += `.tracking-wider { letter-spacing: 0.05em; }\n`;
   css += `.tracking-widest { letter-spacing: 0.1em; }\n`;
 
-  // Text decoration
-  css += `.underline { text-decoration: underline; }\n`;
-  css += `.no-underline { text-decoration: none; }\n`;
-  css += `.line-through { text-decoration: line-through; }\n`;
+  css += `.underline { text-decoration-line: underline; }\n`;
+  css += `.overline { text-decoration-line: overline; }\n`;
+  css += `.line-through { text-decoration-line: line-through; }\n`;
+  css += `.no-underline { text-decoration-line: none; }\n`;
+  css += `.decoration-solid { text-decoration-style: solid; }\n`;
+  css += `.decoration-double { text-decoration-style: double; }\n`;
+  css += `.decoration-dotted { text-decoration-style: dotted; }\n`;
+  css += `.decoration-dashed { text-decoration-style: dashed; }\n`;
+  css += `.decoration-wavy { text-decoration-style: wavy; }\n`;
   css += `.underline-offset-auto { text-underline-offset: auto; }\n`;
-  css += `.underline-offset-1 { text-underline-offset: 1px; }\n`;
-  css += `.underline-offset-2 { text-underline-offset: 2px; }\n`;
-  css += `.underline-offset-4 { text-underline-offset: 4px; }\n`;
-  css += `.underline-offset-8 { text-underline-offset: 8px; }\n`;
+  [0, 1, 2, 4, 8].forEach(value => {
+    css += `.underline-offset-${value} { text-underline-offset: ${value}px; }\n`;
+  });
   css += `.decoration-auto { text-decoration-thickness: auto; }\n`;
   css += `.decoration-from-font { text-decoration-thickness: from-font; }\n`;
-  css += `.decoration-1 { text-decoration-thickness: 1px; }\n`;
-  css += `.decoration-2 { text-decoration-thickness: 2px; }\n`;
-  css += `.decoration-4 { text-decoration-thickness: 4px; }\n`;
+  [0, 1, 2, 4, 8].forEach(value => {
+    css += `.decoration-${value} { text-decoration-thickness: ${value}px; }\n`;
+  });
 
-  // Font variant numeric
   css += `.normal-nums { font-variant-numeric: normal; }\n`;
   css += `.ordinal { font-variant-numeric: ordinal; }\n`;
   css += `.slashed-zero { font-variant-numeric: slashed-zero; }\n`;
@@ -533,17 +629,19 @@ function generateTypographyUtilities(config) {
   css += `.diagonal-fractions { font-variant-numeric: diagonal-fractions; }\n`;
   css += `.stacked-fractions { font-variant-numeric: stacked-fractions; }\n`;
 
-  // Text transform
   css += `.uppercase { text-transform: uppercase; }\n`;
   css += `.lowercase { text-transform: lowercase; }\n`;
   css += `.capitalize { text-transform: capitalize; }\n`;
+  css += `.normal-case { text-transform: none; }\n`;
 
-  // Font family utilities
   css += `.font-sans { font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; }\n`;
   css += `.font-serif { font-family: Georgia, "Times New Roman", serif; }\n`;
   css += `.font-mono { font-family: "Menlo", "Monaco", "Courier New", monospace; }\n`;
   css += `.font-inter { font-family: "Inter", system-ui, sans-serif; }\n`;
   css += `.font-lexend { font-family: "Lexend", system-ui, sans-serif; }\n`;
+  css += `.font-dm-sans { font-family: "DM Sans", system-ui, sans-serif; }\n`;
+  css += `.font-nunito { font-family: "Nunito", system-ui, sans-serif; }\n`;
+  css += `.font-atkinson { font-family: "Atkinson Hyperlegible", system-ui, sans-serif; }\n`;
 
   css += `\n`;
   return css;
@@ -556,53 +654,74 @@ function generateTypographyUtilities(config) {
 function generateBorderUtilities(config) {
   let css = `/* Borders & Radius */\n`;
 
-  // Border widths from config
   const borderWidths = config.spacing.borderWidths || [0, 2, 4, 8];
 
-  // Border width
-  css += `.border { border-width: 1px; }\n`;
+  css += `.border { border-width: 1px; border-style: solid; }\n`;
   borderWidths.forEach(width => {
     css += `.border-${width} { border-width: ${width}px; }\n`;
   });
 
-  // Border sides (default 1px + widths)
+  const sides = {
+    t: 'top', r: 'right', b: 'bottom', l: 'left',
+    x: ['left', 'right'], y: ['top', 'bottom'],
+    s: 'inline-start', e: 'inline-end'
+  };
 
-  ['t', 'r', 'b', 'l'].forEach(side => {
-    css += `.border-${side} { border-${side === 't' ? 'top' : side === 'r' ? 'right' : side === 'b' ? 'bottom' : 'left'}-width: 1px; }\n`;
+  Object.entries(sides).forEach(([side, value]) => {
+    if (Array.isArray(value)) {
+      css += `.border-${side} { border-${value[0]}-width: 1px; border-${value[1]}-width: 1px; border-${value[0]}-style: solid; border-${value[1]}-style: solid; }\n`;
+    } else {
+      css += `.border-${side} { border-${value}-width: 1px; border-${value}-style: solid; }\n`;
+    }
   });
 
   borderWidths.forEach(width => {
-    ['t', 'r', 'b', 'l'].forEach(side => {
-      const sideMap = { t: 'top', r: 'right', b: 'bottom', l: 'left' };
-      css += `.border-${side}-${width} { border-${sideMap[side]}-width: ${width}px; }\n`;
+    Object.entries(sides).forEach(([side, value]) => {
+      if (Array.isArray(value)) {
+        css += `.border-${side}-${width} { border-${value[0]}-width: ${width}px; border-${value[1]}-width: ${width}px; border-${value[0]}-style: solid; border-${value[1]}-style: solid; }\n`;
+      } else {
+        css += `.border-${side}-${width} { border-${value}-width: ${width}px; border-${value}-style: solid; }\n`;
+      }
     });
   });
 
-  // Border style
   css += `.border-solid { border-style: solid; }\n`;
   css += `.border-dashed { border-style: dashed; }\n`;
   css += `.border-dotted { border-style: dotted; }\n`;
   css += `.border-double { border-style: double; }\n`;
+  css += `.border-hidden { border-style: hidden; }\n`;
   css += `.border-none { border-style: none; }\n`;
+  css += `.border-transparent { border-color: transparent; }\n`;
+  css += `.border-current { border-color: currentColor; }\n`;
+  css += `.border-black { border-color: #000000; }\n`;
+  css += `.border-white { border-color: #ffffff; }\n`;
 
-  // Border radius (base)
   const baseRadius = config.spacing.borderRadius['base'] || '8px';
   css += `.rounded { border-radius: ${baseRadius}; }\n`;
 
-  // Border radius (named)
   Object.entries(config.spacing.borderRadius).forEach(([name, value]) => {
     css += `.rounded-${name} { border-radius: ${value}; }\n`;
   });
 
-  // Border radius per side
-  css += `.rounded-t { border-top-left-radius: ${baseRadius}; border-top-right-radius: ${baseRadius}; }\n`;
-  css += `.rounded-b { border-bottom-left-radius: ${baseRadius}; border-bottom-right-radius: ${baseRadius}; }\n`;
-  css += `.rounded-l { border-top-left-radius: ${baseRadius}; border-bottom-left-radius: ${baseRadius}; }\n`;
-  css += `.rounded-r { border-top-right-radius: ${baseRadius}; border-bottom-right-radius: ${baseRadius}; }\n`;
-  css += `.rounded-tl { border-top-left-radius: ${baseRadius}; }\n`;
-  css += `.rounded-tr { border-top-right-radius: ${baseRadius}; }\n`;
-  css += `.rounded-bl { border-bottom-left-radius: ${baseRadius}; }\n`;
-  css += `.rounded-br { border-bottom-right-radius: ${baseRadius}; }\n`;
+  const radiusTargets = {
+    t: ['top-left', 'top-right'], r: ['top-right', 'bottom-right'],
+    b: ['bottom-right', 'bottom-left'], l: ['top-left', 'bottom-left'],
+    tl: ['top-left'], tr: ['top-right'], br: ['bottom-right'], bl: ['bottom-left']
+  };
+
+  Object.entries(radiusTargets).forEach(([side, corners]) => {
+    corners.forEach(corner => {
+      css += `.rounded-${side} { border-${corner}-radius: ${baseRadius}; }\n`;
+    });
+  });
+
+  Object.entries(config.spacing.borderRadius).forEach(([name, value]) => {
+    Object.entries(radiusTargets).forEach(([side, corners]) => {
+      corners.forEach(corner => {
+        css += `.rounded-${side}-${name} { border-${corner}-radius: ${value}; }\n`;
+      });
+    });
+  });
 
   css += `\n`;
   return css;
@@ -625,7 +744,8 @@ function generateBaseStyles(config) {
   // Line height hints per size — keeps headings tighter than body text
   const lineHeightMap = {
     xs: '1.5', sm: '1.5', base: '1.6', lg: '1.6',
-    xl: '1.5', '2xl': '1.4', '3xl': '1.35', '4xl': '1.3'
+    xl: '1.5', '2xl': '1.4', '3xl': '1.35', '4xl': '1.3',
+    '5xl': '1.15', '6xl': '1.1', '7xl': '1.05', '8xl': '1', '9xl': '1'
   };
 
   let css = '\n  /* Base element styles (from baseStyles in emily.config.json) */\n';
@@ -645,26 +765,29 @@ function generateBaseStyles(config) {
 
 function generateColourUtilities(colours) {
   let css = `/* Colours: Background, Text, Borders, Accents */\n`;
+  // Uses CSS custom properties rather than hardcoded hex so colour utilities
+  // can be overridden via variable redefinition (e.g. dark mode, theme layers).
+  // The hex values are still declared as --color-* tokens in @layer theme.
 
   Object.entries(colours).forEach(([colourName, shades]) => {
     // Background colours
-    Object.entries(shades).forEach(([shade, hex]) => {
-      css += `.bg-${colourName}-${shade} { background-color: ${hex}; }\n`;
+    Object.entries(shades).forEach(([shade]) => {
+      css += `.bg-${colourName}-${shade} { background-color: var(--color-${colourName}-${shade}); }\n`;
     });
 
     // Text colours
-    Object.entries(shades).forEach(([shade, hex]) => {
-      css += `.text-${colourName}-${shade} { color: ${hex}; }\n`;
+    Object.entries(shades).forEach(([shade]) => {
+      css += `.text-${colourName}-${shade} { color: var(--color-${colourName}-${shade}); }\n`;
     });
 
     // Border colours
-    Object.entries(shades).forEach(([shade, hex]) => {
-      css += `.border-${colourName}-${shade} { border-color: ${hex}; }\n`;
+    Object.entries(shades).forEach(([shade]) => {
+      css += `.border-${colourName}-${shade} { border-color: var(--color-${colourName}-${shade}); }\n`;
     });
 
     // Accent colours (for form elements like checkboxes, radio buttons)
-    Object.entries(shades).forEach(([shade, hex]) => {
-      css += `.accent-${colourName}-${shade} { accent-color: ${hex}; }\n`;
+    Object.entries(shades).forEach(([shade]) => {
+      css += `.accent-${colourName}-${shade} { accent-color: var(--color-${colourName}-${shade}); }\n`;
     });
   });
 
@@ -876,6 +999,330 @@ function generatePatternComponents() {
     gap: var(--space-4, 1rem);
     align-items: center;
   }
+
+  /* ---- Layout ---- */
+
+  /* Constrained width container — 1100px max, full-width on small screens */
+  .width-container {
+    width: 100%;
+    max-width: 1100px;
+    margin-inline: auto;
+    padding-inline: var(--space-4, 1rem);
+  }
+
+  @media (min-width: 640px) {
+    .width-container {
+      padding-inline: var(--space-6, 1.5rem);
+    }
+  }
+
+  @media (min-width: 1024px) {
+    .width-container {
+      padding-inline: var(--space-8, 2rem);
+    }
+  }
+
+  @media (min-width: 1140px) {
+    .width-container {
+      padding-inline: 0;
+    }
+  }
+
+  /* ---- Forms ---- */
+
+  .field-container {
+    display: flex;
+    flex-direction: column;
+    gap: var(--space-2, 0.5rem);
+    margin-bottom: var(--space-6, 1.5rem);
+  }
+
+  .field-container label {
+    display: block;
+    font-weight: var(--font-weight-semibold, 600);
+    color: var(--color-neutral-90);
+    font-size: var(--text-base, 16px);
+    line-height: 1.4;
+    margin-bottom: var(--space-1, 0.25rem);
+  }
+
+  fieldset {
+    border: none;
+    padding: 0;
+    margin: 0 0 var(--space-6, 1.5rem);
+  }
+
+  fieldset legend {
+    display: block;
+    font-size: var(--text-lg, 18px);
+    font-weight: var(--font-weight-semibold, 600);
+    margin-bottom: var(--space-3, 0.75rem);
+    color: var(--color-neutral-90);
+    padding: 0;
+  }
+
+  .form-hint {
+    font-size: var(--text-sm, 14px);
+    color: var(--color-neutral-60);
+    margin-bottom: var(--space-1, 0.25rem);
+  }
+
+  input[type="text"],
+  input[type="email"],
+  input[type="password"],
+  input[type="number"],
+  input[type="tel"],
+  input[type="url"],
+  input[type="search"],
+  input[type="date"],
+  select,
+  textarea {
+    width: 100%;
+    max-width: 100%;
+    padding: var(--space-3, 0.75rem) var(--space-4, 1rem);
+    border: 2px solid var(--color-neutral-30);
+    border-radius: 8px;
+    background-color: #ffffff;
+    color: var(--color-neutral-90);
+    font-family: inherit;
+    font-size: var(--text-base, 16px);
+    line-height: var(--leading-base, 1.6);
+    appearance: none;
+    transition: border-color 200ms ease, box-shadow 200ms ease;
+  }
+
+  select {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+    background-position: right var(--space-2, 0.5rem) center;
+    background-repeat: no-repeat;
+    background-size: 1.5em 1.5em;
+    padding-right: var(--space-10, 2.5rem);
+    cursor: pointer;
+  }
+
+  textarea {
+    min-height: 120px;
+    resize: vertical;
+  }
+
+  input[type="text"]:focus,
+  input[type="email"]:focus,
+  input[type="password"]:focus,
+  input[type="number"]:focus,
+  input[type="tel"]:focus,
+  input[type="url"]:focus,
+  input[type="search"]:focus,
+  input[type="date"]:focus,
+  select:focus,
+  textarea:focus {
+    outline: 2px solid var(--color-neutral-80);
+    outline-offset: 3px;
+    border-color: var(--color-neutral-80);
+    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+  }
+
+  .checkbox-group,
+  .radio-group {
+    display: flex;
+    align-items: center;
+    gap: var(--space-3, 0.75rem);
+    margin-bottom: var(--space-4, 1rem);
+  }
+
+  .checkbox-group label,
+  .radio-group label {
+    font-weight: var(--font-weight-normal, 400);
+    margin-bottom: 0;
+    cursor: pointer;
+    font-size: var(--text-base, 16px);
+  }
+
+  input[type="checkbox"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0;
+    cursor: pointer;
+    accent-color: var(--color-brand-80);
+    flex-shrink: 0;
+  }
+
+  input[type="checkbox"]:focus {
+    outline: 2px solid var(--color-neutral-80);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+  }
+
+  input[type="radio"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    margin: 0;
+    border-radius: 50%;
+    appearance: none;
+    background-color: #ffffff;
+    border: 2px solid var(--color-neutral-30);
+    display: grid;
+    place-content: center;
+    cursor: pointer;
+    flex-shrink: 0;
+    transition: background-color 200ms ease, border-color 200ms ease;
+  }
+
+  input[type="radio"]::before {
+    content: "";
+    width: 0.75rem;
+    height: 0.75rem;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    background-color: var(--color-brand-80);
+  }
+
+  input[type="radio"]:checked {
+    border-color: var(--color-brand-80);
+  }
+
+  input[type="radio"]:checked::before {
+    transform: scale(1);
+  }
+
+  input[type="radio"]:hover {
+    background-color: var(--color-brand-10);
+    border-color: var(--color-brand-80);
+  }
+
+  input[type="radio"]:focus {
+    outline: 2px solid var(--color-neutral-80);
+    outline-offset: 3px;
+    border-radius: 50%;
+    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+  }
+
+  input[aria-invalid="true"] {
+    border-color: var(--color-error-80) !important;
+    border-width: 3px;
+  }
+
+  .form-error-message {
+    font-size: var(--text-sm, 14px);
+    font-weight: var(--font-weight-bold, 700);
+    color: var(--color-error-80);
+    margin-top: var(--space-1, 0.25rem);
+    display: block;
+  }
+
+  .error-summary {
+    border: 4px solid var(--color-error-80);
+    padding: var(--space-6, 1.5rem);
+    margin-bottom: var(--space-8, 2rem);
+    border-radius: 8px;
+  }
+
+  .error-summary ul {
+    list-style: disc;
+    padding-left: var(--space-5, 1.25rem);
+  }
+
+  .error-summary a {
+    color: var(--color-error-80);
+  }
+
+  /* ---- Buttons ---- */
+
+  .btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: var(--space-3, 0.75rem) var(--space-6, 1.5rem);
+    font-weight: var(--font-weight-semibold, 600);
+    border-radius: 8px;
+    cursor: pointer;
+    transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease;
+    border: 2px solid transparent;
+    text-align: center;
+    min-height: 3rem;
+    font-size: var(--text-base, 16px);
+    text-decoration: none;
+    font-family: inherit;
+    line-height: 1;
+  }
+
+  .btn-primary {
+    background-color: var(--color-brand-80);
+    color: #ffffff;
+    border-color: transparent;
+  }
+
+  .btn-primary:hover {
+    background-color: var(--color-brand-90);
+  }
+
+  .btn-primary:focus-visible {
+    outline: 2px solid var(--color-neutral-80);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+  }
+
+  .btn-secondary {
+    background-color: #ffffff;
+    color: var(--color-accent-80);
+    border-color: var(--color-accent-80);
+  }
+
+  .btn-secondary:hover {
+    background-color: var(--color-accent-10);
+    color: var(--color-accent-90);
+    border-color: var(--color-accent-90);
+  }
+
+  .btn-secondary:focus-visible {
+    outline: 2px solid var(--color-neutral-80);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+  }
+
+  .btn-ghost {
+    background-color: transparent;
+    color: var(--color-neutral-80);
+    border-color: transparent;
+  }
+
+  .btn-ghost:hover {
+    background-color: var(--color-neutral-10);
+  }
+
+  .btn-ghost:focus-visible {
+    outline: 2px solid var(--color-neutral-80);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+  }
+
+  .btn-danger {
+    background-color: var(--color-error-80);
+    color: #ffffff;
+    border-color: transparent;
+  }
+
+  .btn-danger:hover {
+    background-color: var(--color-error-90);
+  }
+
+  .btn-danger:focus-visible {
+    outline: 2px solid var(--color-neutral-80);
+    outline-offset: 3px;
+    box-shadow: 0 0 0 4px rgba(219, 39, 119, 0.1);
+  }
+
+  .btn-sm {
+    padding: var(--space-2, 0.5rem) var(--space-4, 1rem);
+    font-size: var(--text-sm, 14px);
+    min-height: 2.25rem;
+  }
+
+  .btn-lg {
+    padding: var(--space-4, 1rem) var(--space-8, 2rem);
+    font-size: var(--text-lg, 18px);
+    min-height: 3.5rem;
+  }
 `;
 }
 
@@ -1022,6 +1469,59 @@ function buildFullFramework() {
     overflow-wrap: break-word;
   }
 
+  /* Base heading scale */
+  h1 {
+    font-size: var(--text-4xl, 36px);
+    line-height: var(--leading-4xl, 1.3);
+    font-weight: var(--font-weight-bold, 700);
+    margin-bottom: var(--space-6, 1.5rem);
+  }
+
+  h2 {
+    font-size: var(--text-3xl, 30px);
+    line-height: var(--leading-3xl, 1.4);
+    font-weight: var(--font-weight-bold, 700);
+    margin-bottom: var(--space-5, 1.25rem);
+  }
+
+  h3 {
+    font-size: var(--text-2xl, 24px);
+    line-height: var(--leading-2xl, 1.4);
+    font-weight: var(--font-weight-semibold, 600);
+    margin-bottom: var(--space-4, 1rem);
+  }
+
+  h4 {
+    font-size: var(--text-xl, 20px);
+    line-height: var(--leading-xl, 1.6);
+    font-weight: var(--font-weight-semibold, 600);
+    margin-bottom: var(--space-3, 0.75rem);
+  }
+
+  h5 {
+    font-size: var(--text-lg, 18px);
+    line-height: var(--leading-lg, 1.6);
+    font-weight: var(--font-weight-medium, 500);
+    margin-bottom: var(--space-3, 0.75rem);
+  }
+
+  h6 {
+    font-size: var(--text-base, 16px);
+    line-height: var(--leading-base, 1.6);
+    font-weight: var(--font-weight-medium, 500);
+    margin-bottom: var(--space-2, 0.5rem);
+  }
+
+  p {
+    font-size: var(--text-base, 16px);
+    line-height: var(--leading-base, 1.6);
+    margin-bottom: var(--space-4, 1rem);
+  }
+
+  p:last-child {
+    margin-bottom: 0;
+  }
+
   code {
     font-family: "Menlo", "Monaco", "Courier New", monospace;
     font-size: 0.875em;
@@ -1044,7 +1544,7 @@ function buildFullFramework() {
     background-color: #0d0c0b;
     color: #e4e0db;
     padding: 1.25rem;
-    border-radius: 6px;
+    border-radius: 0 0 6px;
     overflow-x: auto;
     font-family: "Menlo", "Monaco", "Courier New", monospace;
     font-size: 0.875rem;
@@ -1180,8 +1680,10 @@ module.exports = {
   generateSemanticColourUtilities,
   generateTypographyUtilities,
   generateSpacingUtilities,
+  generateFlexboxUtilities,
+  generateGridUtilities,
   addStateVariants,
   addResponsiveVariants,
   generateFontCSS,
   codeUtilities,
-};
+};