css-is-awesome 1.3.1 → 1.4.0

package/AGENTS.md

@@ -26,7 +26,8 @@ When asked to add a UI element, follow this order:
 4. **All values come from tokens.** Never hardcode `#3A5FCD`, `1rem`, `8px`. Use `cia.color(primary)`, `cia.space(4)`, `cia.radius(md)`.
 5. **No BEM.** No `__element` / `--modifier` chains. `cia-` is a single-class namespace prefix, not BEM.
 6. **No JavaScript.** Cia ships zero JS in the npm package. The 6 interactive components (accordion, modal, tooltip, dropdown, tabs, copy-button) use native HTML primitives — `<details name>`, `<dialog>`, `[popover]`, radio + `:has()`. **This rule binds cia, not you.** If you're *consuming* cia (building an app/component library on top of it), write JavaScript/framework components freely — React, SVG charts, interactivity, all of it — and use cia purely for styling (mixins + tokens). Compose the mixins to build any visual you want; you are not limited to cia's pre-made component mixins.
-7. **Style semantic state off ARIA, not a parallel `data-*`.** When a state has an ARIA source of truth, hook your styles to *that* attribute: `[aria-selected="true"]`, `[aria-expanded="true"]`, `[aria-invalid="true"]`, `:disabled, [aria-disabled="true"]`, `[aria-pressed="true"]`, `[aria-checked="true"]`, `[aria-current]`, `[role="tab"]`. Then the state can't be styled without setting the ARIA a screen reader needs — **accessible-by-construction**, one source of truth for looks + a11y. Reserve `data-*` for **cosmetic-only** variants (`data-size`, `data-variant`, `data-color`) that carry no ARIA meaning. cia's own components already do this where native HTML doesn't cover it (`[aria-current="page"]`, `[aria-selected="true"]`, `[role="option"]`).
+7. **Pages stack by named grid areas — the layout mixins own the shell.** Every page's structure is declared once as `grid-template-areas` (`"navbar" "hero" … "footer"`), and each section claims its slot with `grid-area`. Never hand-write that: use `cia.page-layout(default | sidebar-left | sidebar-right | holy-grail)` for a full viewport shell (100dvh, sticky footer, auto mobile collapse), `cia.layout((sidebar content toc), $tracks: …)` for custom rows of regions, and `cia.page-header` / `cia.page-main` / `cia.page-footer` / `cia.area(name)` for the children. Named areas are the single source of truth for stacking — mobile is just a different `grid-template-areas`, not a pile of margin overrides. Baseline since 2020.
+8. **Style semantic state off ARIA, not a parallel `data-*`.** When a state has an ARIA source of truth, hook your styles to *that* attribute: `[aria-selected="true"]`, `[aria-expanded="true"]`, `[aria-invalid="true"]`, `:disabled, [aria-disabled="true"]`, `[aria-pressed="true"]`, `[aria-checked="true"]`, `[aria-current]`, `[role="tab"]`. Then the state can't be styled without setting the ARIA a screen reader needs — **accessible-by-construction**, one source of truth for looks + a11y. Reserve `data-*` for **cosmetic-only** variants (`data-size`, `data-variant`, `data-color`) that carry no ARIA meaning. cia's own components already do this where native HTML doesn't cover it (`[aria-current="page"]`, `[aria-selected="true"]`, `[role="option"]`).
 
 ## Install
 

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [1.4.0](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.3.1...v1.4.0) (2026-09-04)
+
+
+### Bug Fixes
+
+* **mobile:** compare tables restack into cards on phones ([da6ae93](https://github.com/Jerry2d3d/css-is-awesome/commit/da6ae93114d198ce8b3f96e30ad3d74d2b0309ce))
+* **mobile:** dock theme sheet lists families directly - one tap switches ([aa9d1ae](https://github.com/Jerry2d3d/css-is-awesome/commit/aa9d1aea358f65a0b7d05fe1c9b5b1f4304fd586))
+* **mobile:** opening the hamburger no longer darkens the page ([c097cb4](https://github.com/Jerry2d3d/css-is-awesome/commit/c097cb42f7c56bf1773a272c408e71a516f817ac))
+* **mobile:** overlay dims the page, never the nav bar ([2466dc4](https://github.com/Jerry2d3d/css-is-awesome/commit/2466dc491bbfdfd45ea8a4bfb253b5b0dd06f508))
+* **mobile:** restore the menu overlay - page and footer darken behind it ([5fad125](https://github.com/Jerry2d3d/css-is-awesome/commit/5fad12554230ce4360d6a294c02bae675eead92a))
+* **mobile:** side padding for theme dropdown option text ([3c4b341](https://github.com/Jerry2d3d/css-is-awesome/commit/3c4b341f312d0454d1274ad80ea60447f65fe940))
+* **site:** examples page gets its own shell - and its padding back ([69ce408](https://github.com/Jerry2d3d/css-is-awesome/commit/69ce40874ab6721f6ede6cc4083de88cf94abe52))
+* **site:** theme menu is a dropdown, not a popup ([886cf67](https://github.com/Jerry2d3d/css-is-awesome/commit/886cf676bf07e243543aa98371b03d07020cd251))
+
+
+### Features
+
+* **site:** painter-palette SVG replaces the theme emoji everywhere ([f11fa7a](https://github.com/Jerry2d3d/css-is-awesome/commit/f11fa7a7f8be5b657e2ae4714f43723ba02d30d7))
+* **site:** rewrite the theme dropdown as a popover menu ([da8216a](https://github.com/Jerry2d3d/css-is-awesome/commit/da8216a75b93db60e55dc9a692df9dfa549fb3c8))
+* **site:** the page control system - Nav / Main / Footer shell ([77f5a98](https://github.com/Jerry2d3d/css-is-awesome/commit/77f5a98adb51f4fc082557e450e5bc3dc6cfaa49))
+
 ## [1.3.1](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.3.0...v1.3.1) (2026-09-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-is-awesome",
-  "version": "1.3.1",
+  "version": "1.4.0",
   "description": "A token-driven SCSS design system with light/dark theming, semantic color tokens, and a 800+ LOC mixin API.",
   "homepage": "https://github.com/Jerry2d3d/css-is-awesome#readme",
   "bugs": {