actual-css 0.4.0 → 0.4.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (75) hide show
  1. package/CHANGELOG.md +77 -35
  2. package/dist/actual.css +1 -20
  3. package/dist/actual.full.css +679 -221
  4. package/dist/actual.full.js +1 -1
  5. package/dist/actual.full.min.css +1 -1
  6. package/dist/actual.min.css +1 -1
  7. package/docs/design-notes/app-ui.md +33 -0
  8. package/docs/design-notes/enhancement-contract.md +25 -0
  9. package/docs/design-notes/grid.md +177 -4
  10. package/docs/design-notes/references.md +1 -1
  11. package/docs/navigation.json +7 -1
  12. package/docs/pages/components/alert.md +5 -0
  13. package/docs/pages/components/app-navigation.md +34 -0
  14. package/docs/pages/components/avatar.md +10 -0
  15. package/docs/pages/components/badge.md +2 -0
  16. package/docs/pages/components/button.md +30 -0
  17. package/docs/pages/components/card.md +5 -1
  18. package/docs/pages/components/fab.md +2 -0
  19. package/docs/pages/components/indicator.md +52 -0
  20. package/docs/pages/components/list.md +62 -0
  21. package/docs/pages/components/navbar.md +6 -0
  22. package/docs/pages/components/rating.md +68 -0
  23. package/docs/pages/components/steps.md +57 -0
  24. package/docs/pages/enhancements/flyout.md +2 -2
  25. package/docs/pages/enhancements/tabs.md +1 -2
  26. package/docs/pages/examples/overview.md +8 -0
  27. package/docs/pages/forms/otp.md +32 -0
  28. package/docs/pages/forms/states-and-sizes.md +3 -3
  29. package/docs/pages/guides/integrating-actual-css.md +6 -0
  30. package/docs/pages/layout/app-layout.md +57 -0
  31. package/docs/pages/layout/app-shell.md +28 -7
  32. package/docs/pages/layout/center.md +12 -1
  33. package/docs/pages/layout/choosing.md +15 -0
  34. package/docs/pages/layout/grid.md +41 -8
  35. package/docs/pages/layout/sidebar-layout.md +19 -0
  36. package/docs/pages/layout/stack.md +17 -0
  37. package/docs/pages/patterns/icon-slot.md +61 -0
  38. package/docs/pages/patterns/structured-lists.md +38 -40
  39. package/package.json +3 -2
  40. package/scripts/reserved-classes.json +17 -0
  41. package/src/css/components/app-nav.css +76 -0
  42. package/src/css/components/avatar.css +4 -0
  43. package/src/css/components/badge.css +1 -13
  44. package/src/css/components/button.css +8 -38
  45. package/src/css/components/card.css +11 -11
  46. package/src/css/components/chat.css +0 -6
  47. package/src/css/components/drawer.css +0 -6
  48. package/src/css/components/fab.css +1 -7
  49. package/src/css/components/index.css +5 -0
  50. package/src/css/components/indicator.css +47 -0
  51. package/src/css/components/list.css +83 -0
  52. package/src/css/components/menu.css +0 -7
  53. package/src/css/components/modal.css +0 -17
  54. package/src/css/components/navbar.css +6 -15
  55. package/src/css/components/rating.css +101 -0
  56. package/src/css/components/steps.css +122 -0
  57. package/src/css/components/tab.css +20 -22
  58. package/src/css/components/tooltip.css +1 -10
  59. package/src/css/core/focus.css +0 -8
  60. package/src/css/core/theme.css +0 -10
  61. package/src/css/core/tokens.css +1 -2
  62. package/src/css/effects/aura.css +1 -10
  63. package/src/css/forms/choice-card.css +6 -15
  64. package/src/css/forms/otp.css +7 -2
  65. package/src/css/forms/range.css +14 -4
  66. package/src/css/layout/app-layout.css +102 -0
  67. package/src/css/layout/app-shell.css +1 -1
  68. package/src/css/layout/center.css +1 -0
  69. package/src/css/layout/container-query.css +6 -4
  70. package/src/css/layout/grid.css +25 -11
  71. package/src/css/layout/index.css +4 -2
  72. package/src/css/layout/sidebar-layout.css +22 -1
  73. package/src/css/typography/prose.css +4 -0
  74. package/src/js/tooltip.js +2 -1
  75. package/docs/pages/layout/list.md +0 -41
package/CHANGELOG.md CHANGED
@@ -1,6 +1,48 @@
1
- # Actual CSS 0.4.0 — Changelog
1
+ # Actual CSS Changelog
2
2
 
3
- # 0.4.0 — unreleased
3
+ ## [Unreleased]
4
+
5
+
6
+ ## [0.4.1] - 2026-08-25
7
+
8
+ ### Added
9
+
10
+ * `indicator`, `rating`, and intrinsically responsive `steps` components.
11
+ * `list` / `list-item` for repeated application rows with leading, content, and trailing regions.
12
+ * `app-nav` and `app-layout` primitives for adaptive application shells.
13
+ * `.sidebar-layout.reverse` to place the sidebar visually first while keeping main-content-first DOM order.
14
+ * `icon-slot` documented pattern for predictable contained icon regions.
15
+ * `check:doc-classes` guardrail for validating framework classes used in documentation.
16
+ * New **Actual Tasks** mobile/application demo.
17
+ * `docs-geometry` guardrail asserting the documentation shell can reach the structural-grid thresholds, read from `grid.css` rather than hard-coded.
18
+ * `--width` on `shot:page` for captures at an exact layout viewport; the flag was previously accepted and silently ignored.
19
+
20
+ ### Changed
21
+
22
+ * Improved card and prose vertical rhythm:
23
+ * bare cards now own direct-child spacing through `--card-gap`;
24
+ * direct child block margins are normalized;
25
+ * `.stack` and `.media` keep ownership when composed with `.card`;
26
+ * prose sibling rhythm is more deterministic.
27
+ * `steps` now use one intrinsic responsive layout, filling available space and scrolling only when `--step-min` cannot be maintained.
28
+ * Added `--step-marker-radius`, `--step-connector`, and `--step-complete-mark` customization hooks.
29
+ * Improved `app-layout` / `app-nav` composition with framework-owned safe-area handling and automatic FAB/navigation avoidance.
30
+ * Clarified that `app-layout` targets persistent application shells rather than regular document pages.
31
+ * Simplified forced-colors support: native/system colors are preferred, with framework overrides limited to structural states that would otherwise disappear.
32
+ * Expanded documentation around lists, application layouts, icon containment, and framework-vs-application CSS ownership.
33
+ * Documented reference container sizes for `.grid-N`, including that the thresholds describe the query container's content box rather than the viewport.
34
+ * Recorded why the framework exposes no global breakpoint scale: container width is not a monotonic function of viewport width, measured across a composition that reveals a sidebar as the viewport grows.
35
+
36
+ ### Fixed
37
+
38
+ * Tooltip cleanup now follows enhancement-root membership correctly, including triggers moved outside the observed root while still connected.
39
+ * Documentation home-page overflow and minimum-size issues.
40
+ * Documentation demo previews could not reach the structural-grid thresholds. The article column capped every live preview at 45.9rem at any viewport width, so `.grid-3` demos rendered one column and `.grid-4` / `.grid-6` two — including on the page documenting `6 -> 3 -> 2 -> 1`. No framework CSS was involved or changed.
41
+ * Invalid or misleading documentation class examples.
42
+ * Steps sizing and narrow-container behavior.
43
+
44
+
45
+ ## [0.4.0] - 2026-08-22
4
46
 
5
47
  ### Added
6
48
 
@@ -15,9 +57,9 @@
15
57
  * “Building with Actual CSS” integration guide covering theme tokens, layout selection, hooks, utilities, and application CSS.
16
58
  * Expanded build, architecture, compatibility, browser-layout, package, and generated-output guardrails, including real `npm pack` verification.
17
59
  * `brutalist` theme.
18
- * `--soft-fg-mix` tunes soft foreground ink; at its `100%` default soft text stays the raw intent, and lowering it rebates the ink toward `--text` for palettes whose intents are too light or too saturated to carry text on their own soft surface.
19
- * Optional `--link` overrides `.prose` link ink when a theme's `--primary` works as an accent but not as inline body text.
20
- * `check:color-space` guardrail: an intent tinted against a theme-controlled surface or border must interpolate in `oklab`, with an `intentional-oklch` escape hatch.
60
+ * `--soft-fg-mix` for tuning soft foreground ink.
61
+ * Optional `--link` override for prose link ink.
62
+ * `check:color-space` guardrail for intent/context color interpolation.
21
63
  * Bundle tool.
22
64
 
23
65
  ### Changed
@@ -25,47 +67,47 @@
25
67
  * The bare `actual-css` entrypoint is now the minimal core; use `actual-css/full` for all CSS families.
26
68
  * `actual-css/js` is now the enhancement loader only; use `actual-css/js/full` or `actual.full.js` for the complete pre-registered runtime.
27
69
  * `.grid` remains space-driven through `--grid-min`; `.grid-2/3/4/6` now express bounded structural density and degrade responsively.
28
- * `.container-query` optionally gives `.grid-N` balanced divisor-based subdivisions (`2→1`, `3→1`, `4→2→1`, `6→3→2→1`) instead of being required for responsiveness.
29
- * `--grid-columns` is the explicit escape hatch for exact custom tracks, including arbitrary structural counts, asymmetric ratios, and mixed intrinsic/flexible tracks; applications own their narrow behavior.
30
- * `.sidebar-layout` now uses intrinsic flex wrapping instead of a hidden container-query/viewport breakpoint contract.
31
- * Grid primitives remove the automatic `min-inline-size` floor from their direct children to preserve overflow-safe track sizing.
32
- * `.card` is now a column flex container; a direct `<footer>` anchors to the bottom when extra space is available, aligning actions across equal-height cards.
33
- * Focus is a core invariant and no longer depends on loading focus styles after components.
34
- * Focus rings are derived from each `[data-theme]` island's own `--focus`; preset palettes only keep intentional overrides such as neon.
35
- * `.prose` now includes sane native description-list (`dt` / `dd`) styling.
70
+ * `.container-query` optionally gives `.grid-N` balanced divisor-based subdivisions.
71
+ * `--grid-columns` is the explicit escape hatch for exact custom tracks.
72
+ * `.sidebar-layout` now uses intrinsic flex wrapping instead of a hidden breakpoint contract.
73
+ * Grid primitives preserve overflow-safe track sizing.
74
+ * `.card` is now a column flex container and direct footers can anchor to the bottom.
75
+ * Focus is now a core invariant.
76
+ * Focus rings follow each theme island's `--focus`.
77
+ * `.prose` adds native description-list styling.
36
78
  * `.lead` and `.measure` are independent from `.prose`.
37
- * Utilities distinguish compact framework shortcuts from verbose optional property/value helpers; optional helpers include semantic gap sizes and common sizing, alignment, overflow, spacing, text, border, and surface escape hatches.
38
- * Preset theme palettes are reference/demo material rather than package API; their bundle is generated for demos/docs instead of `dist/`.
39
- * `llms.txt` now documents the core/full package split, layout-selection model, class manifest, and application-CSS integration workflow.
40
- * Biome now covers `src/`, `scripts/`, and `tests/`, and lint runs as part of `build:all`.
41
- * Use OKLab for intent/context color mixes to keep custom themes stable when surfaces or borders are chromatic.
42
- * Docs syntax highlighting uses a purpose-built local palette instead of the theme intents, which do not hold contrast as small text under most presets and are too close together on the monochromatic ones to stay distinguishable.
43
- * CI and browser diagnostics are updated for Bun 1.4 and verify committed `dist/`, `site/`, and `size-report.json` against fresh builds.
79
+ * Utilities are split between compact framework shortcuts and optional property/value helpers.
80
+ * Preset theme palettes are reference/demo material rather than package API.
81
+ * `llms.txt` documents package splits, layout selection, the class manifest, and application-CSS integration.
82
+ * Biome covers `src/`, `scripts/`, and `tests/`.
83
+ * Intent/context color mixes use OKLab.
84
+ * Documentation syntax highlighting uses its own local palette.
85
+ * CI and browser diagnostics were updated for Bun 1.4 and verify committed generated output.
44
86
 
45
87
  ### Fixed
46
88
 
47
89
  * Forced-colors and theme-island focus/state handling.
48
- * Grid child min-content overflow in narrow tracks.
49
- * Drawer RTL behavior now follows resolved direction through `:dir(rtl)`.
50
- * Badge typography uses shared font-size/density tokens instead of private literals.
51
- * `.sr-only` now combines modern `clip-path` hiding with the legacy `clip` fallback.
52
- * `dim` and `indigo` shadows use palette-appropriate shadow colors.
90
+ * Grid child min-content overflow.
91
+ * Drawer RTL behavior.
92
+ * Badge typography token usage.
93
+ * `.sr-only` legacy fallback.
94
+ * `dim` and `indigo` shadows.
53
95
  * Vendor pseudo-element handling for color inputs and meters.
54
- * Tooltip Escape handling and LIFO surface dismissal, including pinned tooltips.
55
- * OTP, switch, joined-control, floating-field, validation, and native color-control focus/state edge cases.
56
- * Flyout panel lifecycle cleanup.
96
+ * Tooltip Escape handling and LIFO dismissal.
97
+ * OTP, switch, joined-control, floating-field, validation, and native color-control edge cases.
98
+ * Flyout lifecycle cleanup.
57
99
  * Prose spacing and component focus regressions.
58
- * Compatibility checks ignore feature names appearing only in CSS comments.
59
- * Navbar and status-bar guidance now makes responsive trigger placement and transient-feedback semantics explicit.
100
+ * Compatibility checks matching feature names in CSS comments.
101
+ * Navbar and status-bar guidance.
60
102
 
61
103
  ### Breaking
62
104
 
63
- * `actual-css` now contains only the core. Replace it with `actual-css/full` when the previous full-framework behavior is required.
105
+ * `actual-css` now contains only the core. Use `actual-css/full` for the previous full-framework behavior.
64
106
  * `actual-css/js` / `actual.js` now contain only the enhancement loader. Use `actual-css/js/full` / `actual.full.js` for the previous complete runtime.
65
- * `.grid-N` no longer means a fixed N-column grid at every width; it is a responsive structural-density preset, with balanced divisor layouts available through `.container-query`.
66
- * `.sidebar-layout` no longer depends on `.container-query` or the old fixed breakpoint; direct children now participate in its intrinsic flex sizing contract.
67
- * `.card` now establishes a column flex formatting context so direct structural footers can anchor to the bottom; code relying on block margin collapsing inside cards should be reviewed.
68
- * Direct imports of `typography/prose` no longer include `.lead` or `.measure`; import `typography/lead` and `layout/measure` explicitly when needed.
107
+ * `.grid-N` no longer means a fixed N-column grid at every width.
108
+ * `.sidebar-layout` no longer depends on `.container-query` or the old fixed breakpoint.
109
+ * `.card` now establishes a column flex formatting context.
110
+ * Direct imports of `typography/prose` no longer include `.lead` or `.measure`.
69
111
 
70
112
 
71
113
  ## [0.3.1] - 2026-08-20
package/dist/actual.css CHANGED
@@ -204,9 +204,8 @@ select {
204
204
  @media (forced-colors: active) {
205
205
  :root,
206
206
  [data-theme] {
207
- --state-selected: Highlight;
208
- --state-selected-fg: HighlightText;
209
207
  --state-disabled: GrayText;
208
+ --disabled-opacity: 1;
210
209
  }
211
210
  }
212
211
 
@@ -432,16 +431,6 @@ select {
432
431
  }
433
432
  }
434
433
 
435
- @media (forced-colors: active) {
436
- :root,
437
- [data-theme] {
438
- --focus-outline-color: Highlight;
439
- --focus-ring-shadow: none;
440
-
441
- --backdrop-fill: Canvas;
442
- }
443
- }
444
-
445
434
  @media (prefers-contrast: more) {
446
435
  :root,
447
436
  /* The repeated attribute intentionally outranks single-attribute preset
@@ -676,14 +665,6 @@ small {
676
665
  :focus:not(:focus-visible) {
677
666
  outline: none;
678
667
  }
679
-
680
- /* Pointer focus must still signal in high-contrast mode, where the shared
681
- box-shadow rings are disabled (--focus-ring-shadow: none). */
682
- @media (forced-colors: active) {
683
- :focus:not(:focus-visible) {
684
- outline: var(--focus-outline);
685
- }
686
- }
687
668
  }
688
669
 
689
670
  @media print {