emily-css 1.0.26 → 1.0.28

package/CHANGELOG.md

@@ -4,259 +4,285 @@ All notable changes to `emily-css` are documented here.
 
 ---
 
-## v1.0.26 — May 2026
+## v1.0.28 — May 2026
 
-**Expand utility coverage and typography scale**
-
-### Added
-- Expand utility coverage and typography scale
-
----
-## v1.0.26 — May 2026
-
-**Colour utilities now variable-based; fix grey text on dark surfaces**
-
-### Fixed
-- `generateColourUtilities` now emits `var(--color-*)` references instead of hardcoded hex values for all `text-*`, `bg-*`, `border-*`, and `accent-*` utilities. Consistent with how semantic colours and ring/fill/stroke utilities already worked. Enables theme-layer overrides without specificity hacks.
-- Homepage "How it works" cards: `text-neutral-80` / `text-neutral-40` on `bg-dark` produced near-invisible text in light mode (contrast ~2.3:1). Fixed to `text-neutral-10` / `text-neutral-30` — matches the pattern used by the hero and CTA banner.
-- Removed erroneous backslash in `h-2\.5` HTML class strings in `index.vue` (rendered fine via Vue template compilation, but confusing and inconsistent).
-- Stripped null bytes from `pages/index.vue` (6) and `package.json` (339) in `emilyui-site`.
+**added new utilities**
 
 ### Changed
-- `tests/test.js`: updated `accent-brand-80` assertion to expect `var(--color-brand-80)` rather than hardcoded hex, matching the new generation behaviour.
+- added new utilties and tests
 
 ---
-
-## v1.0.25 — May 2026
-
-**updaed colour**
-
-### Fixed
-- change colour on code
-
----
-## v1.0.24 — May 2026
+## v1.0.27 — May 2026
 
 **colour system redesign — brand/accent tokens + semantic colours (v1.0.23)**
 
 ### Added
 - colour system redesign — brand/accent tokens + semantic colours (v1.0.23)
 
----
-## v1.0.23 — May 2026
-
-**Colour system redesign: brand/accent naming + semantic colour tokens**
-
 ### Changed
-- Renamed `primary` colour token to `brand`, `secondary` to `accent` across config, utilities, and showcase
-- `btn-primary` and `btn-secondary` are now explicit separate colour tokens (no longer aliases)
-- Default config generated by `emily-css init` updated to reflect new naming
-
-### Added
-- `semanticColours` config key: single-value colour tokens with no shade scale
-- `generateSemanticColourUtilities()`: generates `bg-dark`, `text-dark`, `border-dark`, `fill-dark` etc.
-- Semantic colour utilities automatically pick up `hover:`, `focus:`, `dark:`, and responsive variants
-- Default config includes `dark: "#1A1A1A"` and `light: "#FAFAFA"` as semantic colour examples
-
----
-
-## v1.0.22 — May 2026
-
-**· Improve purge extraction and package robustness tests**
-
----
-## v1.0.21 — May 2026
-
-**"Include bundled showcase template**
-
----
-## v1.0.20 — May 2026
-
-**replace folder structure template to tempalates**
-
-### Fixed
-- replace folder structure template to tempalates
-
----
-## v1.0.19 — May 2026
-
-**Add framework-aware output paths and bundled showcase template**
-
----
-## v1.0.18 — May 2026
-
-****
-
-### Changed
-- added more utitlies as a code block
-
----
-## v1.0.17 — May 2026
-
-**added new utilties, and added component patterns**
-
-### Added
-- added new utilties, and added component patterns
-
----
-## v1.0.16 — May 2026
-
-**feat: add Round 2 utility set — 156/156 tests passing**
-
-### Added
-- feat: add Round 2 utility set — 156/156 tests passing
-
----
-## v1.0.15 — May 2026
-
-**updated readme**
-
----
-## v1.0.14 — May 2026
-
-**updated readme**
-
-### Changed
-- updated readme
-
----
-## v1.0.13 — May 2026
-
-**added functionality to commit to github and then push to npm release**
-
-### Added
-- added functionality to commit to github and then push to npm release
-
----
-## v1.0.12 — May 2026
-
-****
-
----
-## v1.0.11 — May 2026
-
-****
-
----
-## v1.0.10 — May 2026
-
-**Changelog automation**
-
-### Added
-- Release script (`npm run release`) — reads git log, prompts for version bump, writes CHANGELOG.md, commits and tags automatically
-
----
-
-## v1.0.9 — May 2026
-
-**Showcase server + code block utilities**
-
-### Added
-- Showcase server — run `npm run emily:showcase` to browse components on localhost:3456
-- Code block utilities (`.code-window`, `.token-*`) in generated CSS — VSCode Dark+ style syntax highlighting
-- `pre`/`code` base styles added to `@layer base`
-
----
-
-## v1.0.8 — May 2026
-
-**Watch mode + build pipeline**
-
-### Added
-- Watch mode — `npx emily-css watch` rebuilds CSS automatically on config change
-- Build + purge can now be chained in a single pipeline
-- npm scripts wired into `package.json` during `npx emily-css init`
-
-### Changed
-- `init.js` provides a more guided setup experience with clearer prompts
-- `bin/emilyui.js` updated to correctly route `watch`/`build`/`purge` subcommands
-
----
-
-## v1.0.7 — April 2026
-
-**Purge regex fix**
-
-### Fixed
-- Purge crashed when class names contained regex metacharacters (`[`, `]`, `(`, `)`, `{`, `}`, etc). Previously only `:` and `.` were escaped — now uses full metacharacter escaping
-
----
-
-## v1.0.6 — April 2026
-
-**Dist + font cleanup**
-
-### Changed
-- `dist/` and `fonts/` directories removed from git tracking
-
-### Breaking changes
-- If you were pulling `dist/emily.css` directly from GitHub, run `npx emily-css build` locally instead
-
----
-
-## v1.0.5 — April 2026
-
-**Split font system**
-
-### Added
-- Separate heading and body font config — `fontFamily.heading` and `fontFamily.body` are now independent
-- Google Fonts CDN integration — fonts loaded via `@import` in generated CSS
-- Font-specific tests added to test suite
-
-### Changed
-- Bundled font files removed from the npm package
-- `emily.config.json` updated with split `fontFamily` structure
-
-### Breaking changes
-- If your config has `fontFamily` as a single string, update it to `{ "heading": "...", "body": "..." }`
-
----
-
-## v1.0.3 — April 2026
-
-**Package size reduction**
-
-### Changed
-- Demo CSS removed from the published npm package
-
----
-
-## v1.0.2 — April 2026
-
-**Package distribution fix**
-
-### Added
-- `.npmignore` added — controls which files are included in the published package
-- `dist` files explicitly declared in `package.json` `files` array
-
-### Fixed
-- Unnecessary files (tests, src, docs) were being included in the npm tarball
-
----
-
-## v1.0.1 — April 2026
-
-**CLI rename fix**
-
-### Fixed
-- Internal references to old `emily-ui` CLI name updated to `emily-css`
-
-### Breaking changes
-- If you had scripts referencing `npx emily-ui`, update them to `npx emily-css`
-
----
-
-## v1.0.0 — April 2026
-
-**Initial release**
-
-### Added
-- 11,844 utility classes generated from `emily.config.json`
-- OKLCH colour scale generation — one hex in, 10-shade scale out
-- Responsive variants (`sm:` `md:` `lg:` `xl:` `2xl:`)
-- State variants (`hover:` `focus-visible:` `active:` `disabled:` `dark:`)
-- Purge system — strips unused classes, ~97% file size reduction
-- Interactive setup wizard (`npx emily-css init`)
-- 72 tests, all passing
+- updated utilties and new showcase
 
 ---
+# Changelog
+
+All notable changes to `emily-css` are documented here.
+
+---
+
+## v1.0.26 — May 2026
+
+**Expand utility coverage and typography scale**
+
+### Added
+- Expand utility coverage and typography scale
+
+---
+## v1.0.26 — May 2026
+
+**Colour utilities now variable-based; fix grey text on dark surfaces**
+
+### Fixed
+- `generateColourUtilities` now emits `var(--color-*)` references instead of hardcoded hex values for all `text-*`, `bg-*`, `border-*`, and `accent-*` utilities. Consistent with how semantic colours and ring/fill/stroke utilities already worked. Enables theme-layer overrides without specificity hacks.
+- Homepage "How it works" cards: `text-neutral-80` / `text-neutral-40` on `bg-dark` produced near-invisible text in light mode (contrast ~2.3:1). Fixed to `text-neutral-10` / `text-neutral-30` — matches the pattern used by the hero and CTA banner.
+- Removed erroneous backslash in `h-2\.5` HTML class strings in `index.vue` (rendered fine via Vue template compilation, but confusing and inconsistent).
+- Stripped null bytes from `pages/index.vue` (6) and `package.json` (339) in `emilyui-site`.
+
+### Changed
+- `tests/test.js`: updated `accent-brand-80` assertion to expect `var(--color-brand-80)` rather than hardcoded hex, matching the new generation behaviour.
+
+---
+
+## v1.0.25 — May 2026
+
+**updaed colour**
+
+### Fixed
+- change colour on code
+
+---
+## v1.0.24 — May 2026
+
+**colour system redesign — brand/accent tokens + semantic colours (v1.0.23)**
+
+### Added
+- colour system redesign — brand/accent tokens + semantic colours (v1.0.23)
+
+---
+## v1.0.23 — May 2026
+
+**Colour system redesign: brand/accent naming + semantic colour tokens**
+
+### Changed
+- Renamed `primary` colour token to `brand`, `secondary` to `accent` across config, utilities, and showcase
+- `btn-primary` and `btn-secondary` are now explicit separate colour tokens (no longer aliases)
+- Default config generated by `emily-css init` updated to reflect new naming
+
+### Added
+- `semanticColours` config key: single-value colour tokens with no shade scale
+- `generateSemanticColourUtilities()`: generates `bg-dark`, `text-dark`, `border-dark`, `fill-dark` etc.
+- Semantic colour utilities automatically pick up `hover:`, `focus:`, `dark:`, and responsive variants
+- Default config includes `dark: "#1A1A1A"` and `light: "#FAFAFA"` as semantic colour examples
+
+---
+
+
+## v1.0.22 — May 2026
+
+**· Improve purge extraction and package robustness tests**
+
+---
+## v1.0.21 — May 2026
+
+**"Include bundled showcase template**
+
+---
+## v1.0.20 — May 2026
+
+**replace folder structure template to tempalates**
+
+### Fixed
+- replace folder structure template to tempalates
+
+---
+## v1.0.19 — May 2026
+
+**Add framework-aware output paths and bundled showcase template**
+
+---
+## v1.0.18 — May 2026
+
+****
+
+### Changed
+- added more utitlies as a code block
+
+---
+## v1.0.17 — May 2026
+
+**added new utilties, and added component patterns**
+
+### Added
+- added new utilties, and added component patterns
+
+---
+## v1.0.16 — May 2026
+
+**feat: add Round 2 utility set — 156/156 tests passing**
+
+### Added
+- feat: add Round 2 utility set — 156/156 tests passing
+
+---
+## v1.0.15 — May 2026
+
+**updated readme**
+
+---
+## v1.0.14 — May 2026
+
+**updated readme**
+
+### Changed
+- updated readme
+
+---
+## v1.0.13 — May 2026
+
+**added functionality to commit to github and then push to npm release**
+
+### Added
+- added functionality to commit to github and then push to npm release
+
+---
+## v1.0.12 — May 2026
+
+****
+
+---
+## v1.0.11 — May 2026
+
+****
+
+---
+## v1.0.10 — May 2026
+
+**Changelog automation**
+
+### Added
+- Release script (`npm run release`) — reads git log, prompts for version bump, writes CHANGELOG.md, commits and tags automatically
+
+---
+
+## v1.0.9 — May 2026
+
+**Showcase server + code block utilities**
+
+### Added
+- Showcase server — run `npm run emily:showcase` to browse components on localhost:3456
+- Code block utilities (`.code-window`, `.token-*`) in generated CSS — VSCode Dark+ style syntax highlighting
+- `pre`/`code` base styles added to `@layer base`
+
+---
+
+## v1.0.8 — May 2026
+
+**Watch mode + build pipeline**
+
+### Added
+- Watch mode — `npx emily-css watch` rebuilds CSS automatically on config change
+- Build + purge can now be chained in a single pipeline
+- npm scripts wired into `package.json` during `npx emily-css init`
+
+### Changed
+- `init.js` provides a more guided setup experience with clearer prompts
+- `bin/emilyui.js` updated to correctly route `watch`/`build`/`purge` subcommands
+
+---
+
+## v1.0.7 — April 2026
+
+**Purge regex fix**
+
+### Fixed
+- Purge crashed when class names contained regex metacharacters (`[`, `]`, `(`, `)`, `{`, `}`, etc). Previously only `:` and `.` were escaped — now uses full metacharacter escaping
+
+---
+
+## v1.0.6 — April 2026
+
+**Dist + font cleanup**
+
+### Changed
+- `dist/` and `fonts/` directories removed from git tracking
+
+### Breaking changes
+- If you were pulling `dist/emily.css` directly from GitHub, run `npx emily-css build` locally instead
+
+---
+
+## v1.0.5 — April 2026
+
+**Split font system**
+
+### Added
+- Separate heading and body font config — `fontFamily.heading` and `fontFamily.body` are now independent
+- Google Fonts CDN integration — fonts loaded via `@import` in generated CSS
+- Font-specific tests added to test suite
+
+### Changed
+- Bundled font files removed from the npm package
+- `emily.config.json` updated with split `fontFamily` structure
+
+### Breaking changes
+- If your config has `fontFamily` as a single string, update it to `{ "heading": "...", "body": "..." }`
+
+---
+
+## v1.0.3 — April 2026
+
+**Package size reduction**
+
+### Changed
+- Demo CSS removed from the published npm package
+
+---
+
+## v1.0.2 — April 2026
+
+**Package distribution fix**
+
+### Added
+- `.npmignore` added — controls which files are included in the published package
+- `dist` files explicitly declared in `package.json` `files` array
+
+### Fixed
+- Unnecessary files (tests, src, docs) were being included in the npm tarball
+
+---
+
+## v1.0.1 — April 2026
+
+**CLI rename fix**
+
+### Fixed
+- Internal references to old `emily-ui` CLI name updated to `emily-css`
+
+### Breaking changes
+- If you had scripts referencing `npx emily-ui`, update them to `npx emily-css`
+
+---
+
+## v1.0.0 — April 2026
+
+**Initial release**
+
+### Added
+- 11,844 utility classes generated from `emily.config.json`
+- OKLCH colour scale generation — one hex in, 10-shade scale out
+- Responsive variants (`sm:` `md:` `lg:` `xl:` `2xl:`)
+- State variants (`hover:` `focus-visible:` `active:` `disabled:` `dark:`)
+- Purge system — strips unused classes, ~97% file size reduction
+- Interactive setup wizard (`npx emily-css init`)
+- 72 tests, all passing
+
+---

package/package.json

@@ -1,59 +1,59 @@
-{
-  "name": "emily-css",
-  "version": "1.0.26",
-  "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
-  "main": "src/index.js",
-  "bin": {
-    "emily-css": "bin/emilyui.js"
-  },
-  "files": [
-    "bin/",
-    "src/",
-    "templates/",
-    "README.md",
-    "LICENSE",
-    "CHANGELOG.md"
-  ],
-  "scripts": {
-    "build": "node src/index.js",
-    "dev": "nodemon src/index.js",
-    "dev:full": "nodemon src/index.js -- --keep-full",
-    "init": "node src/init.js",
-    "test": "node tests/test.js",
-    "emily:showcase": "node src/showcase.js",
-    "commit": "node scripts/commit.js",
-    "release": "node scripts/release.js",
-    "ship": "node scripts/ship.js",
-    "emily:build": "emily-css build",
-    "emily:watch": "emily-css watch",
-    "emily:help": "emily-css help"
-  },
-  "keywords": [
-    "css",
-    "design-system",
-    "components",
-    "config-driven",
-    "utility-css",
-    "accessibility",
-    "drupal",
-    "legacy",
-    "no-build-step"
-  ],
-  "author": "Andy Terry",
-  "license": "MIT",
-  "engines": {
-    "node": ">=16.0.0"
-  },
-  "devDependencies": {
-    "nodemon": "^3.0.0"
-  },
-  "dependencies": {
-    "boxen": "^5.1.2",
-    "chalk": "^4.1.2",
-    "chokidar": "^5.0.0",
-    "cross-spawn": "^7.0.6",
-    "enquirer": "^2.4.1",
-    "fast-glob": "^3.3.3",
-    "ora": "^5.4.1"
-  }
-}
+{
+  "name": "emily-css",
+  "version": "1.0.28",
+  "description": "A config-driven utility CSS framework. Define your brand once, generate the CSS.",
+  "main": "src/index.js",
+  "bin": {
+    "emily-css": "bin/emilyui.js"
+  },
+  "files": [
+    "bin/",
+    "src/",
+    "templates/",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "build": "node src/index.js",
+    "dev": "nodemon src/index.js",
+    "dev:full": "nodemon src/index.js -- --keep-full",
+    "init": "node src/init.js",
+    "test": "node tests/test.js",
+    "emily:showcase": "node src/showcase.js",
+    "commit": "node scripts/commit.js",
+    "release": "node scripts/release.js",
+    "ship": "node scripts/ship.js",
+    "emily:build": "emily-css build",
+    "emily:watch": "emily-css watch",
+    "emily:help": "emily-css help"
+  },
+  "keywords": [
+    "css",
+    "design-system",
+    "components",
+    "config-driven",
+    "utility-css",
+    "accessibility",
+    "drupal",
+    "legacy",
+    "no-build-step"
+  ],
+  "author": "Andy Terry",
+  "license": "MIT",
+  "engines": {
+    "node": ">=16.0.0"
+  },
+  "devDependencies": {
+    "nodemon": "^3.0.0"
+  },
+  "dependencies": {
+    "boxen": "^5.1.2",
+    "chalk": "^4.1.2",
+    "chokidar": "^5.0.0",
+    "cross-spawn": "^7.0.6",
+    "enquirer": "^2.4.1",
+    "fast-glob": "^3.3.3",
+    "ora": "^5.4.1"
+  }
+}

package/src/generators.js

@@ -424,6 +424,12 @@ function svgUtilities(colours) {
 
   css += `.fill-current { fill: currentColor; }\n`;
   css += `.stroke-current { stroke: currentColor; }\n`;
+  css += `.fill-white { fill: #FAFAFA; }\n`;
+  css += `.fill-black { fill: #111110; }\n`;
+  css += `.fill-transparent { fill: transparent; }\n`;
+  css += `.stroke-white { stroke: #FAFAFA; }\n`;
+  css += `.stroke-black { stroke: #111110; }\n`;
+  css += `.stroke-transparent { stroke: transparent; }\n`;
   css += `.stroke-0 { stroke-width: 0; }\n`;
   css += `.stroke-1 { stroke-width: 1; }\n`;
   css += `.stroke-2 { stroke-width: 2; }\n`;
@@ -602,6 +608,10 @@ function accessibilityUtilities() {
   return `/* Accessibility */
 .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
 .not-sr-only { position: static; width: auto; height: auto; padding: 0; margin: 0; overflow: visible; clip: auto; white-space: normal; }
+.sr-only-focusable:not(:focus):not(:focus-within) { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; }
+.focus-ring:focus-visible { outline: 2px solid var(--color-brand-80); outline-offset: 2px; }
+.focus-ring-inset:focus-visible { outline: 2px solid var(--color-brand-80); outline-offset: -2px; }
+.focus-ring-none:focus-visible { outline: none; }
 .focus-visible:focus { outline: 2px solid currentColor; outline-offset: 2px; }
 .focus\\:outline-none:focus { outline: 2px solid transparent; outline-offset: 2px; }
 
@@ -756,8 +766,8 @@ function divideUtilities(spacing, colours) {
       css += `.divide-${colourName}-${shade} > * + * { border-color: var(--color-${colourName}-${shade}); }\n`;
     });
   });
-  css += `.divide-white > * + * { border-color: #ffffff; }\n`;
-  css += `.divide-black > * + * { border-color: #000000; }\n`;
+  css += `.divide-white > * + * { border-color: #FAFAFA; }\n`;
+  css += `.divide-black > * + * { border-color: #111110; }\n`;
   css += `.divide-transparent > * + * { border-color: transparent; }\n`;
   css += `\n`;
   return css;

package/src/index.js

@@ -693,8 +693,8 @@ function generateBorderUtilities(config) {
   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`;
+  css += `.border-black { border-color: #111110; }\n`;
+  css += `.border-white { border-color: #FAFAFA; }\n`;
 
   const baseRadius = config.spacing.borderRadius['base'] || '8px';
   css += `.rounded { border-radius: ${baseRadius}; }\n`;
@@ -791,9 +791,15 @@ function generateColourUtilities(colours) {
     });
   });
 
-  css += `.bg-white { background-color: #ffffff; }\n`;
+  css += `.bg-white { background-color: #FAFAFA; }\n`;
+  css += `.bg-black { background-color: #111110; }\n`;
   css += `.bg-transparent { background-color: transparent; }\n`;
-  css += `.text-white { color: #ffffff; }\n`;
+  css += `.bg-current { background-color: currentColor; }\n`;
+
+  css += `.text-white { color: #FAFAFA; }\n`;
+  css += `.text-black { color: #111110; }\n`;
+  css += `.text-transparent { color: transparent; }\n`;
+  css += `.text-current { color: currentColor; }\n`;
 
   css += `\n`;
   return css;
@@ -812,6 +818,63 @@ function generateSemanticColourUtilities(semanticColours) {
   return css;
 }
 
+// ============================================================================
+// ARIA & DATA-STATE VARIANTS
+// ============================================================================
+// Generates ARIA attribute and data-state variants for all utility classes.
+// Selectors target the attribute value directly so they work without JS —
+// just toggle the attribute and the utility activates.
+//
+// Usage in HTML:
+//   aria-expanded: class="aria-expanded:block" aria-expanded="true"
+//   data-open:     class="data-open:flex"       data-state="open"
+//
+// Output examples:
+//   .aria-expanded\:block[aria-expanded="true"] { display: block; }
+//   .data-open\:flex[data-state="open"] { display: flex; }
+
+function addAriaDataVariants(css) {
+  const variants = [
+    { name: 'aria-expanded', selector: '[aria-expanded="true"]' },
+    { name: 'aria-selected', selector: '[aria-selected="true"]' },
+    { name: 'aria-current',  selector: '[aria-current="page"]' },
+    { name: 'aria-disabled', selector: '[aria-disabled="true"]' },
+    { name: 'data-open',     selector: '[data-state="open"]' },
+    { name: 'data-closed',   selector: '[data-state="closed"]' },
+  ];
+
+  let variantCss = css;
+
+  variants.forEach(variant => {
+    let variantRules = '';
+    const lines = css.split('\n');
+
+    lines.forEach(line => {
+      if (line.startsWith('.') && line.includes('{')) {
+        const className = line.split('{')[0].trim();
+        // Skip already-variant lines (contain ':' in class name) and special selectors
+        if (
+          !className.startsWith(':root') &&
+          !className.includes('@') &&
+          !className.includes('::') &&
+          !className.includes(':')
+        ) {
+          const classWithoutDot = className.substring(1);
+          const ariaSelector = `.${variant.name}\\:${classWithoutDot}${variant.selector}`;
+          const ariaRule = line.replace(className, ariaSelector);
+          variantRules += ariaRule + '\n';
+        }
+      }
+    });
+
+    if (variantRules) {
+      variantCss += `\n/* ARIA/data-state variant: ${variant.name} */\n` + variantRules;
+    }
+  });
+
+  return variantCss;
+}
+
 // ============================================================================
 // DARK MODE VARIANTS
 // ============================================================================
@@ -983,6 +1046,65 @@ function generatePatternComponents() {
     margin-inline: auto;
   }
 
+  .prose-emily {
+    max-width: 65ch;
+    margin-inline: auto;
+  }
+
+  .prose-emily > * + * {
+    margin-top: var(--space-4, 1rem);
+  }
+
+  .prose-emily h2,
+  .prose-emily h3 {
+    font-family: inherit;
+    color: var(--color-neutral-90);
+    line-height: 1.25;
+  }
+
+  .prose-emily h2 {
+    font-size: var(--text-2xl, 24px);
+    margin-top: var(--space-10, 2.5rem);
+  }
+
+  .prose-emily h3 {
+    font-size: var(--text-xl, 20px);
+    margin-top: var(--space-8, 2rem);
+  }
+
+  .prose-emily p,
+  .prose-emily li {
+    color: var(--color-neutral-70);
+    line-height: 1.75;
+  }
+
+  .prose-emily ul,
+  .prose-emily ol {
+    padding-left: var(--space-6, 1.5rem);
+  }
+
+  .prose-emily ul {
+    list-style-type: disc;
+  }
+
+  .prose-emily ol {
+    list-style-type: decimal;
+  }
+
+  .prose-emily a {
+    color: var(--color-brand-80);
+    text-decoration: underline;
+    text-underline-offset: 2px;
+  }
+
+  .prose-emily code {
+    font-size: var(--text-sm, 14px);
+    background-color: var(--color-neutral-10);
+    border: 1px solid var(--color-neutral-20);
+    border-radius: var(--space-1, 0.25rem);
+    padding: 0.125rem 0.375rem;
+  }
+
   /* ---- Composition ---- */
 
   /* Vertical stack with consistent gap — replaces manual margin chains */
@@ -999,6 +1121,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;
+  }
 `;
 }
 
@@ -1097,6 +1543,7 @@ function buildFullFramework() {
   utilityCss += filterUtilities();
 
   utilityCss = addStateVariants(utilityCss);
+  utilityCss = addAriaDataVariants(utilityCss);
   utilityCss = addDarkModeVariants(utilityCss);
   utilityCss = addResponsiveVariants(utilityCss, config);
 
@@ -1145,6 +1592,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;
@@ -1268,8 +1768,8 @@ function build(options = {}) {
   const fullCssPath = getFullCssPath(config);
   const result = buildProductionCss();
 
-  console.log('✓ Generated production CSS: ' + path.relative(process.cwd(), result.outputPath));
-  console.log('✓ File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
+  console.log('\u2713 Generated production CSS: ' + path.relative(process.cwd(), result.outputPath));
+  console.log('\u2713 File size: ' + (result.outputSize / 1024).toFixed(2) + ' KB');
 
   if (!options.keepFull && fs.existsSync(fullCssPath)) {
     try {
@@ -1306,6 +1806,7 @@ module.exports = {
   generateFlexboxUtilities,
   generateGridUtilities,
   addStateVariants,
+  addAriaDataVariants,
   addResponsiveVariants,
   generateFontCSS,
   codeUtilities,

package/src/purge.js

@@ -173,7 +173,7 @@ function purgeBlock(block, usedClasses) {
         .replace(/:/g, "\\\\:");
 
       const boundaryRegex = new RegExp(
-        `\\.${escapedUsed}(?::[\\w\\-]+|[\\s,>+~]|$)`,
+        `\\.${escapedUsed}(?::[\\w\\-]+|\\[|[\\s,>+~]|$)`,
       );
 
       if (boundaryRegex.test(selector)) return true;
@@ -275,5 +275,5 @@ function purgeCSS(css, scanDir, config) {
 module.exports = {
   purgeCSS,
   getAllFiles,
-  extractClassNames,
-};
+  extractClassNames
+};

package/templates/showcase.html

@@ -4,7 +4,7 @@
   <meta charset="utf-8">
   <meta name="viewport" content="width=device-width, initial-scale=1">
   <title>EmilyUI Showcase</title>
-  <link rel="stylesheet" href="./dist/emily.min.css">
+  <link rel="stylesheet" href="../dist/emily.min.css">
 <style>
   html {
     scroll-behavior: smooth;
@@ -949,7 +949,7 @@
 
         <div class="lg:col-span-2">
           <h3 class="font-bold mb-3">.center-screen</h3>
-          <div class="border border-neutral-20 rounded-t-lg overflow-hidden bg-neutral-80" style="min-height: 200px; position: relative;">
+          <div class="border border-neutral-20 rounded-t-lg overflow-hidden bg-neutral-80" style="min-height: 50vh; position: relative;">
             <div class="center-screen" style="position: absolute;">
               <div class="bg-white rounded-lg shadow-lg border border-neutral-20 p-6 text-center" style="max-width: 340px; width: 90%;">
                 <h4 class="text-lg font-bold mb-2">Confirm action</h4>