actual-css 0.4.2 → 0.6.0

package/docs/pages/components/fab.md

@@ -7,13 +7,17 @@ The existing button component owns its size, shape, intent, and interaction.
 As a direct child of `.app-layout`, it instead overlays the main grid area so
 the layout keeps it clear of adaptive application navigation and safe areas.
 
+**Related terms:** fab.
+
 ```html
 <div class="fab">
   <button class="btn circle primary lg icon-only" type="button" aria-label="Create">
-    <span aria-hidden="true">+</span>
+    <i class="ti ti-plus" aria-hidden="true"></i>
   </button>
 </div>
 ```
+The plain FAB button carries the application's own icon — it is a product
+action, not a toggle.
 
 Use native `details` for a no-JavaScript speed dial. List actions in their
 visual top-to-bottom order so keyboard focus follows the same sequence.
@@ -24,9 +28,7 @@ visual top-to-bottom order so keyboard focus follows the same sequence.
     class="btn circle primary icon-only"
     style="--btn-min-size: 3.5rem"
     aria-label="Create"
-  >
-    <span aria-hidden="true">+</span>
-  </summary>
+  ></summary>
 
   <div class="fab-actions">
     <div class="fab-action">
@@ -63,9 +65,7 @@ not the FAB's containing component. Production `.fab` remains viewport-fixed.
       class="btn circle primary icon-only"
       style="--btn-min-size: 3.5rem"
       aria-label="Create"
-    >
-      <span aria-hidden="true">+</span>
-    </summary>
+    ></summary>
 
     <div class="fab-actions">
       <div class="fab-action">
@@ -99,13 +99,16 @@ Each `.fab-action` keeps its `.fab-label` and secondary button on one compact
 line. The example uses the button's existing `.lg` density for 44px secondary
 actions and its `--btn-min-size` hook for a dominant 56px trigger. Size still
 belongs to Button rather than introducing FAB-specific size modifiers.
-When the summary contains one decorative icon, FAB rotates it by 45 degrees in
-the open state so a plus naturally becomes a close symbol.
+Unlike the plain FAB, the speed dial trigger takes no icon: FAB owns it as a
+toggle and masks the shared `--icon-plus` glyph while closed and `--icon-close` —
+the same close symbol used by alerts and dialogs — while open, both sized by
+`--fab-icon-size`. No application icon and no rotated glyph is involved, so the
+two states stay visually identical in size and stroke.
 
 ## Class reference
 
 | Class          | Description                                               |
-|----------------|-----------------------------------------------------------|
+| -------------- | --------------------------------------------------------- |
 | `.fab`         | Fixed viewport placement; use `details` for a speed dial. |
 | `.fab-actions` | Collapsible vertical action list.                         |
 | `.fab-action`  | One horizontal label-and-button unit.                     |
@@ -115,6 +118,7 @@ the open state so a plus naturally becomes a close symbol.
 
 - `--fab-offset` — minimum viewport-edge offset.
 - `--fab-gap` — gap between actions and between the trigger and action list.
+- `--fab-icon-size` — size of the speed dial toggle's open and close markers.
 
 FAB is hidden in print and uses `--z-menu`, leaving tooltips and status UI above
 it. Dialogs remain in the browser's top layer.

package/docs/pages/components/indicator.md

@@ -9,12 +9,12 @@ that owns its appearance.
 
 ## Class reference
 
-| Class             | Kind      | Description                                      |
-|-------------------|-----------|--------------------------------------------------|
-| `.indicator`      | Component | Positioning context for an overlaid child.       |
-| `.indicator-item` | Part      | Item attached to the top-end corner by default.  |
-| `.start`          | Placement | Moves the item to the inline-start corner.       |
-| `.bottom`         | Placement | Moves the item to the bottom corner.             |
+| Class             | Kind      | Description                                     |
+| ----------------- | --------- | ----------------------------------------------- |
+| `.indicator`      | Component | Positioning context for an overlaid child.      |
+| `.indicator-item` | Part      | Item attached to the top-end corner by default. |
+| `.start`          | Placement | Moves the item to the inline-start corner.      |
+| `.bottom`         | Placement | Moves the item to the bottom corner.            |
 
 Combine `.bottom.start` for bottom-start. Logical inline placement follows the
 document direction automatically.

package/docs/pages/components/list.md

@@ -33,18 +33,27 @@ badges, text, switches, and buttons retain their own component sizing. The
 middle region has no minimum content floor, so supporting text and long tokens
 wrap instead of widening the page.
 
+Regions align to the row's first line: the leading check or avatar, the title,
+and the trailing metadata or control sit on one horizontal line while
+supporting text wraps beneath — a structured row, not a centered button. For a
+shared two-line arrangement where leading and trailing truly need to center,
+the app composes the alignment itself rather than switching this default.
+A pure traversal affordance such as a trailing caret can opt out of the
+first-line rule on its own item with `align-self: center`, keeping metadata
+rows unaffected.
+
 For a navigable row, keep the list semantics and put `.list-item` on the link:
 
 ```html demo
 <ul class="list">
   <li>
     <a class="list-item" href="#profile">
-      <span aria-hidden="true">👤</span>
+      <span class="avatar sm" aria-hidden="true"><i class="ti ti-user" aria-hidden="true"></i></span>
       <span class="list-item-content">
         <strong class="list-item-title">Profile</strong>
         <span class="list-item-text">Name, photo, and contact details</span>
       </span>
-      <span class="list-item-trailing" aria-hidden="true">›</span>
+      <i class="ti ti-chevron-right list-item-trailing" style="align-self: center" aria-hidden="true"></i>
     </a>
   </li>
 </ul>

package/docs/pages/components/meter.md

@@ -3,6 +3,8 @@
 > Scalar measurement within a known range, not a progress indicator.
 
 - Use native `<meter class="meter">`.
+- Use a segmented `<div class="meter" role="meter">` when the measurement
+  needs a category breakdown.
 - Shares progress styling DNA.
 - Represents a scalar measurement within a known range, not task completion.
 - Use explicit bar height to avoid padding issues.
@@ -18,6 +20,59 @@
 The three standard meter zones (optimum, suboptimum, even-less-good) map to the
 shared `--success`, `--warning`, and `--danger` colors.
 
-## CSS hooks
+Segmented meters keep the overall measurement on the meter itself and expose
+the category breakdown as composition. A segmented `.meter` is a flex container
+whose direct children are weighted by `--meter-value`; child intent classes
+define segment colors. The values are relative weights, so they do not need to
+be converted to percentages. Keep the segments decorative with
+`aria-hidden="true"` and provide category names and values in a nearby legend.
+An unintentional child remains transparent, so the meter background can
+represent an available or otherwise unclassified portion. Match its legend
+marker to that background rather than to the neutral intent.
+
+```html demo
+<div class="stack">
+  <div
+    class="meter"
+    role="meter"
+    aria-label="Storage usage"
+    aria-valuemin="0"
+    aria-valuemax="8192"
+    aria-valuenow="6854.45"
+    aria-valuetext="6854.45 MB used of 8 GB"
+  >
+    <span class="primary" style="--meter-value: 4600" aria-hidden="true"></span>
+    <span class="secondary" style="--meter-value: 1350" aria-hidden="true"></span>
+    <span class="success" style="--meter-value: 904.45" aria-hidden="true"></span>
+    <span style="--meter-value: 1337.55" aria-hidden="true"></span>
+  </div>
+
+  <div class="cluster">
+    <span>
+      <span class="badge primary" aria-hidden="true"></span>
+      Regular <span class="muted">4600 MB</span>
+    </span>
+    <span>
+      <span class="badge secondary" aria-hidden="true"></span>
+      System <span class="muted">1350 MB</span>
+    </span>
+    <span>
+      <span class="badge success" aria-hidden="true"></span>
+      Shared <span class="muted">904.45 MB</span>
+    </span>
+    <span>
+      <span class="badge" style="--intent: var(--surface-subtle)" aria-hidden="true"></span>
+      Free <span class="muted">1337.55 MB</span>
+    </span>
+  </div>
+</div>
+```
+
+### Hooks
 
 - `--bar-height` — bar thickness, shared with `.progress`.
+- `--meter-value` — relative weight of a direct child in a segmented meter.
+
+`.sm` / `.lg` are intentionally not supported: a bar keeps its inline size and only changes
+thickness, and a design asks for a 4px or a 12px bar, not for a "small" one. Set the hook
+on the element, or better, on an application class.

package/docs/pages/components/navbar.md

@@ -19,7 +19,7 @@ flex list, `.nav-list` a vertical grid. Putting both on one element resolves to
 ## Class reference
 
 | Class           | Kind        | Description                                           |
-|-----------------|-------------|-------------------------------------------------------|
+| --------------- | ----------- | ----------------------------------------------------- |
 | `.navbar`       | Component   | Horizontal bar shell.                                 |
 | `.navbar-brand` | Composition | Brand link at the inline start.                       |
 | `.navbar-nav`   | Composition | Horizontal link list.                                 |

package/docs/pages/components/pagination.md

@@ -15,7 +15,7 @@
 ## Class reference
 
 | Class         | Kind      | Description                    |
-|---------------|-----------|--------------------------------|
+| ------------- | --------- | ------------------------------ |
 | `.pagination` | Component | Ordered list of page controls. |
 | `.sm` / `.lg` | Size      | Control density.               |
 

package/docs/pages/components/progress.md

@@ -27,3 +27,13 @@
 - `--progress-track` — unfilled track color.
 - `--progress-value` — filled bar color. Prefer an intent class over setting this directly.
 - `--bar-height` — bar thickness, shared with `.meter`.
+
+`.sm` / `.lg` are intentionally not supported: a bar keeps its inline size and only changes
+thickness, and a design asks for a 4px or a 12px bar, not for a "small" one. Set the hook
+on the element, or better, on an application class.
+
+```css
+.storage-meter {
+  --bar-height: 0.375rem;
+}
+```

package/docs/pages/components/rating.md

@@ -10,10 +10,10 @@ filled while the control remains fully functional.
 
 ## Class reference
 
-| Class         | Kind      | Description                         |
-|---------------|-----------|-------------------------------------|
-| `.rating`     | Component | Radio group presented as stars.     |
-| `.sm` / `.lg` | Size      | Smaller or larger star geometry.    |
+| Class         | Kind      | Description                      |
+| ------------- | --------- | -------------------------------- |
+| `.rating`     | Component | Radio group presented as stars.  |
+| `.sm` / `.lg` | Size      | Smaller or larger star geometry. |
 
 ```html demo
 <fieldset class="field">

package/docs/pages/components/skeleton.md

@@ -8,10 +8,12 @@
 - Use layout utilities for placeholder arrangement.
 - Only relevant for simple placeholders - use more structural solutions like phantom-ui for complex cases.
 
+**Related terms:** skeleton screen, shimmer, loading placeholder.
+
 ## Class reference
 
 | Class        | Kind      | Description                                         |
-|--------------|-----------|-----------------------------------------------------|
+| ------------ | --------- | --------------------------------------------------- |
 | `.skeleton`  | Component | Animated placeholder shape.                         |
 | `data-shape` | Modifier  | Geometry presets: `text`, `title`, `avatar`, `box`. |
 

package/docs/pages/components/spinner.md

@@ -13,7 +13,7 @@
 ## Class reference
 
 | Class          | Kind      | Description                                                        |
-|----------------|-----------|--------------------------------------------------------------------|
+| -------------- | --------- | ------------------------------------------------------------------ |
 | `.spinner`     | Component | Circular loading indicator using `currentColor`.                   |
 | `.sm` / `.lg`  | Size      | Smaller (`0.75em`) or larger (`2rem`) spinner.                     |
 | Shared intents | Intent    | `.primary`, `.secondary`, `.success`, `.warning`, `.danger` color. |