css-is-awesome 1.6.0 → 1.6.2

package/AGENTS.md

@@ -27,7 +27,8 @@ When asked to add a UI element, follow this order:
 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()`. Mobile navigation follows the same doctrine: the `hamburger` / `drawer` / `sheet` / `dock` mixin family rides `[popover]` + CSS Grid — see the `mobile-nav` recipe (hamburger + drawer) and the `bottom-nav` recipe (dock + sheets). **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. **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"]`).
+8. **On phones, things take the space they're in.** Below the mobile breakpoint an interactive surface fills its *container* — 100% of the column it lives in, inside the page's existing padding and formatting (never edge-to-edge past the page's gutters, never a floating mid-width popup). Triggers stretch to 100% with `justify-content: space-between` (label left, affordance right). A top-layer popover menu can't size to its container directly, so match its trigger via CSS anchor positioning (`anchor-name` on the trigger; `inset-inline: anchor(start) anchor(end)` under `@supports (anchor-name: --a)`) — opening directly under the trigger, with `position-try-fallbacks: flip-block` so it flips above when it would run off the bottom of the screen — with viewport-minus-gutters as the no-anchor fallback — and set it at `&[popover]` specificity, since the dropdown mixin's `inset: unset` reset otherwise wins. Also set `width: auto`: the UA's `[popover] { width: fit-content }` otherwise beats both inset edges and the menu hugs its content. `cia.sheet`, `cia.drawer($side: top|bottom)` and `cia.dock` already obey the rule. **Deliberate exception — code blocks:** on phones, code is allowed to run off into a horizontal scroll *inside its own box* (`white-space: pre; overflow-x: auto`) — never wrap, shrink, or reflow code to fit, and never let it widen the page; the copy button carries usability for long lines.
+9. **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,23 @@
+## [1.6.2](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.6.1...v1.6.2) (2026-09-04)
+
+
+### Bug Fixes
+
+* **mobile:** width: auto on the dash-nav menu - UA fit-content was ([faafe88](https://github.com/Jerry2d3d/css-is-awesome/commit/faafe88d19fc7df4a600633fcfc249cf0b4815d4))
+
+## [1.6.1](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.6.0...v1.6.1) (2026-09-04)
+
+
+### Bug Fixes
+
+* **dropdown:** cia.dropdown no longer renders permanently open on [popover] ([4f3a325](https://github.com/Jerry2d3d/css-is-awesome/commit/4f3a325f0e267917bc4422e2f7e2c724c585e708))
+* **mobile:** dashboard dropdown opens under the box, flips above at screen bottom ([e29fd6a](https://github.com/Jerry2d3d/css-is-awesome/commit/e29fd6a60166135f2cce2182ca93e30551e7dc5e)), closes [#8](https://github.com/Jerry2d3d/css-is-awesome/issues/8)
+* **mobile:** dropdown sits a line under its box; long links wrap ([3955ea8](https://github.com/Jerry2d3d/css-is-awesome/commit/3955ea8aa30dc8d0570737807cd2ad8c9b373c34))
+* **mobile:** exactly 1px between the dropdown button and its menu ([95bb067](https://github.com/Jerry2d3d/css-is-awesome/commit/95bb0673e7c7a582b06272563604c584cc04e226))
+* **mobile:** full-width rule - dashboard dropdown spans, shell loses double frame ([3c2a5ee](https://github.com/Jerry2d3d/css-is-awesome/commit/3c2a5eeff78ca236b14f93ef60bb7e2665889da5)), closes [#8](https://github.com/Jerry2d3d/css-is-awesome/issues/8)
+* **mobile:** picking a dropdown selection closes the dashboard menu ([3a8fbd6](https://github.com/Jerry2d3d/css-is-awesome/commit/3a8fbd67e742774e4ac1f8fe8082a4008d0b20e8))
+* **mobile:** the rule is take-the-space-you-are-in, not span-the-viewport ([6698aaa](https://github.com/Jerry2d3d/css-is-awesome/commit/6698aaa4d65fd88298b51df6dae19212dd37cb2d)), closes [#8](https://github.com/Jerry2d3d/css-is-awesome/issues/8)
+
 # [1.6.0](https://github.com/Jerry2d3d/css-is-awesome/compare/v1.5.0...v1.6.0) (2026-09-04)
 
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "css-is-awesome",
-  "version": "1.6.0",
+  "version": "1.6.2",
   "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": {

package/scss/components/_overlay.scss

@@ -240,6 +240,16 @@
   &[popover] {
     margin: 0;
     inset: unset;
+
+    /* dropdown-menu's author-level `display: flex` outranks the UA's
+       `[popover] { display: none }` closed state — without this guard the
+       menu renders permanently open, in flow. Re-assert closed, and
+       restore flex only while actually open. */
+    display: none;
+
+    &:popover-open {
+      display: flex;
+    }
   }
 
   &:popover-open {