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.
- package/CHANGELOG.md +77 -35
- package/dist/actual.css +1 -20
- package/dist/actual.full.css +679 -221
- package/dist/actual.full.js +1 -1
- package/dist/actual.full.min.css +1 -1
- package/dist/actual.min.css +1 -1
- package/docs/design-notes/app-ui.md +33 -0
- package/docs/design-notes/enhancement-contract.md +25 -0
- package/docs/design-notes/grid.md +177 -4
- package/docs/design-notes/references.md +1 -1
- package/docs/navigation.json +7 -1
- package/docs/pages/components/alert.md +5 -0
- package/docs/pages/components/app-navigation.md +34 -0
- package/docs/pages/components/avatar.md +10 -0
- package/docs/pages/components/badge.md +2 -0
- package/docs/pages/components/button.md +30 -0
- package/docs/pages/components/card.md +5 -1
- package/docs/pages/components/fab.md +2 -0
- package/docs/pages/components/indicator.md +52 -0
- package/docs/pages/components/list.md +62 -0
- package/docs/pages/components/navbar.md +6 -0
- package/docs/pages/components/rating.md +68 -0
- package/docs/pages/components/steps.md +57 -0
- package/docs/pages/enhancements/flyout.md +2 -2
- package/docs/pages/enhancements/tabs.md +1 -2
- package/docs/pages/examples/overview.md +8 -0
- package/docs/pages/forms/otp.md +32 -0
- package/docs/pages/forms/states-and-sizes.md +3 -3
- package/docs/pages/guides/integrating-actual-css.md +6 -0
- package/docs/pages/layout/app-layout.md +57 -0
- package/docs/pages/layout/app-shell.md +28 -7
- package/docs/pages/layout/center.md +12 -1
- package/docs/pages/layout/choosing.md +15 -0
- package/docs/pages/layout/grid.md +41 -8
- package/docs/pages/layout/sidebar-layout.md +19 -0
- package/docs/pages/layout/stack.md +17 -0
- package/docs/pages/patterns/icon-slot.md +61 -0
- package/docs/pages/patterns/structured-lists.md +38 -40
- package/package.json +3 -2
- package/scripts/reserved-classes.json +17 -0
- package/src/css/components/app-nav.css +76 -0
- package/src/css/components/avatar.css +4 -0
- package/src/css/components/badge.css +1 -13
- package/src/css/components/button.css +8 -38
- package/src/css/components/card.css +11 -11
- package/src/css/components/chat.css +0 -6
- package/src/css/components/drawer.css +0 -6
- package/src/css/components/fab.css +1 -7
- package/src/css/components/index.css +5 -0
- package/src/css/components/indicator.css +47 -0
- package/src/css/components/list.css +83 -0
- package/src/css/components/menu.css +0 -7
- package/src/css/components/modal.css +0 -17
- package/src/css/components/navbar.css +6 -15
- package/src/css/components/rating.css +101 -0
- package/src/css/components/steps.css +122 -0
- package/src/css/components/tab.css +20 -22
- package/src/css/components/tooltip.css +1 -10
- package/src/css/core/focus.css +0 -8
- package/src/css/core/theme.css +0 -10
- package/src/css/core/tokens.css +1 -2
- package/src/css/effects/aura.css +1 -10
- package/src/css/forms/choice-card.css +6 -15
- package/src/css/forms/otp.css +7 -2
- package/src/css/forms/range.css +14 -4
- package/src/css/layout/app-layout.css +102 -0
- package/src/css/layout/app-shell.css +1 -1
- package/src/css/layout/center.css +1 -0
- package/src/css/layout/container-query.css +6 -4
- package/src/css/layout/grid.css +25 -11
- package/src/css/layout/index.css +4 -2
- package/src/css/layout/sidebar-layout.css +22 -1
- package/src/css/typography/prose.css +4 -0
- package/src/js/tooltip.js +2 -1
- package/docs/pages/layout/list.md +0 -41
package/CHANGELOG.md
CHANGED
|
@@ -1,6 +1,48 @@
|
|
|
1
|
-
# Actual CSS
|
|
1
|
+
# Actual CSS Changelog
|
|
2
2
|
|
|
3
|
-
|
|
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`
|
|
19
|
-
* Optional `--link`
|
|
20
|
-
* `check:color-space` guardrail
|
|
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
|
|
29
|
-
* `--grid-columns` is the explicit escape hatch for exact custom tracks
|
|
30
|
-
* `.sidebar-layout` now uses intrinsic flex wrapping instead of a hidden
|
|
31
|
-
* Grid primitives
|
|
32
|
-
* `.card` is now a column flex container
|
|
33
|
-
* Focus is a core invariant
|
|
34
|
-
* Focus rings
|
|
35
|
-
* `.prose`
|
|
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
|
|
38
|
-
* Preset theme palettes are reference/demo material rather than package API
|
|
39
|
-
* `llms.txt`
|
|
40
|
-
* Biome
|
|
41
|
-
*
|
|
42
|
-
*
|
|
43
|
-
* CI and browser diagnostics
|
|
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
|
|
49
|
-
* Drawer RTL behavior
|
|
50
|
-
* Badge typography
|
|
51
|
-
* `.sr-only`
|
|
52
|
-
* `dim` and `indigo` shadows
|
|
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
|
|
55
|
-
* OTP, switch, joined-control, floating-field, validation, and native color-control
|
|
56
|
-
* Flyout
|
|
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
|
|
59
|
-
* Navbar and status-bar guidance
|
|
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.
|
|
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
|
|
66
|
-
* `.sidebar-layout` no longer depends on `.container-query` or the old fixed breakpoint
|
|
67
|
-
* `.card` now establishes a column flex formatting context
|
|
68
|
-
* Direct imports of `typography/prose` no longer include `.lead` or `.measure
|
|
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 {
|