actual-css 0.4.1 → 0.5.0

package/docs/pages/components/steps.md

@@ -6,13 +6,21 @@ Use an `<ol>` because order is part of the meaning. Add `.complete` to finished
 steps and `aria-current="step"` to exactly one current step. Unmarked items are
 future steps. The component needs no JavaScript.
 
+The three states are distinct without any glyph: future is neutral, complete is
+a filled marker with an accented connector, current is an outlined marker with a
+thicker ring. The accented connector reads as "already walked", so the segment
+leaving the current step stays neutral. A step carrying both states renders
+entirely as current — marker, glyph, and connector.
+
+**Related terms:** stepper, progress steps, step indicator, wizard steps, multi-step progress.
+
 ## Class reference
 
 | Class                   | Kind      | Description                                |
 |-------------------------|-----------|--------------------------------------------|
 | `.steps`                | Component | Ordered progression with numbered markers. |
-| `.complete`             | State     | A finished step.                           |
-| `[aria-current="step"]` | State     | The current step.                          |
+| `.complete`             | State     | A finished step: filled marker.            |
+| `[aria-current="step"]` | State     | The current step: outlined marker.         |
 
 ```html demo
 <ol class="steps">

package/docs/pages/components/table.md

@@ -7,6 +7,7 @@
 - Use `.text-end` for numeric columns and `.text-nowrap` for non-wrapping cells.
 - For wide tables, make the wrapper an accessible scroll region with `role="region"`, `aria-labelledby`, and `tabindex="0"`.
 - Tables stay content-first and neutral by default.
+- `.table` is a static, content-first table. It provides no sorting, filtering, search, selection, pagination, or row actions. For an interactive data grid ("datatable"), use a dedicated component — see the [data grid template](../../demo/templates/data-grid.html), which themes `data-grid-component` with Actual CSS tokens.
 - `.table` does not consume shared variants or intent colors (`--ui-bg` / `--intent`): a `.soft` + intent combo on a `<tr>` has no effect. To tint rows or headers, style them with a class of your own.
 
 ## Class reference

package/docs/pages/enhancements/flyout.md

@@ -2,6 +2,8 @@
 
 > Positioned surface attached to a trigger, commonly used for action lists and small panels.
 
+**Related terms:** popover, dropdown, dropdown menu, action menu, context menu, bottom sheet, action sheet, anchored panel.
+
 ## Class reference
 
 | Class             | Kind        | Description                                                          |

package/docs/pages/enhancements/status-bar.md

@@ -11,9 +11,18 @@ replace the previous one. Keep one element in the HTML, styled with
 `.status-bar` and carrying the `[data-status][role="status"]` contract that the
 runtime targets, empty by default.
 
-- JavaScript only updates its text content; it shows when non-empty and hides when empty, while staying available as a live region.
+- JavaScript writes the text content and toggles `.is-open`, the state class the CSS animates. The element is never hidden, so it stays available as a live region.
 - Use it for transient status (`Saved.`, `Reconnected.`, `Copied.`). Critical, persistent, or actionable information belongs in `.alert`, inline messages, or dialogs.
 - Intents: `danger`, `success`, `warning`, `neutral`. The default (no intent) is a neutral dark pill.
+- On mobile, the runtime keeps the bar above the software keyboard by tracking `visualViewport` while a message is showing.
+
+Clearing is deferred, not immediate: the bar closes first and only empties its
+text and intent once the exit transition has finished, so it leaves at the size
+and color it was shown at. A new message during that exit wins — it cancels the
+pending cleanup instead of being wiped by it. Read the bar's content right after
+`clear()` and you still see the outgoing message; that is the contract, not a
+race. An empty message clears too, so `status(response.error)` on a successful
+response closes the bar rather than opening a blank pill.
 
 The runtime auto-wires the status bar to Actual's form validation: a form that
 fails to submit shows its `data-validation-message` in the status bar with the

package/docs/pages/examples/overview.md

@@ -4,7 +4,8 @@
 
 The examples live in the repository under `demo/` and load `actual.full.css`
 and `actual.full.js` from `dist/`, plus the theme palettes bundle from
-`demo/assets/` (`bun run build:themes`).
+`demo/assets/`. The bundle is committed and regenerated by
+`bun run build:themes`, so the pages open from a fresh checkout.
 
 ## Templates
 

package/docs/pages/forms/joined-controls.md

@@ -2,6 +2,8 @@
 
 > Use `.join` when controls need to be visually joined into a single unit.
 
+**Related terms:** segmented control, button group, input group.
+
 ## Class reference
 
 | Class         | Kind        | Description                                                                     |

package/docs/pages/forms/overview.md

@@ -164,7 +164,7 @@ A full form using the control classes, field wrappers, and form actions:
 - `required` is the semantic source of truth. Add `<span class="required-mark" aria-hidden="true">*</span>` inside a label only when a visual required marker is wanted; the framework does not add one automatically.
 - `.field` is the canonical field wrapper. It works on `<label>` and `<div>`.
 - `.field-label` is element-agnostic. Use it on `<span>` inside a wrapped label, on `<label for="…">` in a detached layout, or on `<legend>` inside a fieldset.
-- `.field-group` styles a `<fieldset class="field-group">` as a grouped field container. Its legend gutter is tunable with `--fieldset-legend-padding-inline` (`var(--space-10)`).
+- `.field-group` styles a `<fieldset class="field-group">` as a grouped field container. Its legend gutter is tunable with `--fieldset-legend-padding-inline` (`var(--space-10)`). It carries no sibling margin: space consecutive groups with `.stack` on the form, so the rhythm follows the layout instead of the component.
 - Use native `<optgroup>` and `disabled` options in `.select` controls when applicable; the customizable picker preserves both as a progressive enhancement.
 - `.choice` is the choice-label API. Use `.check` or `.radio` on the nested control. The control goes first, the label group second, so multi-line labels align the control with the first line.
 - For a switch, use `class="switch"` and `role="switch"`.

package/docs/pages/forms/range.md

@@ -4,6 +4,8 @@
 
 Core: native range, enhanced by `accent-color`. Optional richer skin may come later.
 
+**Related terms:** slider, range input, scrubber.
+
 ```html demo
 <label class="field">
   <span class="field-label">Volume</span>

package/docs/pages/forms/states-and-sizes.md

@@ -21,7 +21,7 @@ without its label would only break the alignment. Scale them by scaling their
 type instead.
 
 ```html demo
-<form novalidate>
+<form class="stack" novalidate>
   <fieldset class="field-group">
     <legend class="field-label">Text control states</legend>
     <div class="stack" style="--grid-min: 14rem;">

package/docs/pages/forms/validation.md

@@ -2,6 +2,8 @@
 
 > Inline error feedback that respects assistive technology and form state.
 
+**Related terms:** inline validation, field error.
+
 ## Class reference
 
 | Class               | Kind        | Description                                                                     |

package/docs/pages/foundations/philosophy.md

@@ -10,9 +10,19 @@ Components are semantic boxes: `.btn`, `.badge`, `.alert`, `.card`, `.avatar`, e
 
 `.primary`, `.secondary`, `.success`, `.warning`, `.danger` do not style elements directly. They only expose `--intent` and `--intent-fg`. Components and variants decide how to consume them.
 
+Intent classes define the current `--intent` value; they do not form a
+general-purpose color utility system. Use `.intent-color` when a simple element
+should consume the current intent as its foreground color. It works with an
+intent on the same element or inherited from an ancestor.
+
 ```html demo
 <button class="btn primary">Primary</button>
 <span class="badge success">Success</span>
+<span class="success intent-color">Success text</span>
+<span class="danger">
+  <i class="ti ti-alert-triangle intent-color" aria-hidden="true"></i>
+  Something needs attention
+</span>
 ```
 
 There is no `.btn-primary` or `.badge-success`. Intents are generic and reusable across any component that supports them.
@@ -35,7 +45,7 @@ Custom intents need no framework support — define `--intent` and `--intent-fg`
 
 ## Variants
 
-`.solid`, `.soft`, `.outline` define the visual treatment by setting `--ui-bg`, `--ui-fg`, `--ui-border`. Components consume these tokens with sensible fallbacks. Interactive components also set a `--ui-hover-bg` recipe that their hover rule reads.
+`.solid`, `.soft`, `.outline`, `.surface` define the visual treatment by setting `--ui-bg`, `--ui-fg`, `--ui-border`. Components consume these tokens with sensible fallbacks. Interactive components also set a `--ui-hover-bg` recipe that their hover rule reads.
 
 `.btn` defaults to `.solid`; `.badge` and `.alert` default to `.soft`.
 

package/docs/pages/foundations/tokens.md

@@ -133,7 +133,7 @@ Spacing should be useful without becoming a design-token encyclopedia.
 }
 ```
 
-Official steps are named in tens so the scale stays extensible: Actual CSS only publishes multiples of 10, and applications can intercalate intermediate values (`--space-15`, `--space-45`, …) without colliding with a future framework step.
+Official steps are named in tens so the scale stays extensible. **Actual CSS will never define a `--space-*` token that is not a multiple of 10.** The intermediate names (`--space-15`, `--space-45`, …) are reserved for application-level interpolation: defining them is not writing into the framework namespace, it is using the half of the scale the framework has permanently given up.
 
 Use `em` for spacing that should scale with the component text size, such as button gaps and inline padding. Use `rem` for global rhythm, layouts, and fixed density.
 
@@ -220,7 +220,7 @@ With `color-mix()` support the shadows derive from `--shadow-color` (a theme tok
 
 ### Motion
 
-Motion tokens keep transitions consistent and easy to disable.
+Motion durations keep transitions consistent and easy to disable.
 
 ```css
 :root {
@@ -229,10 +229,13 @@ Motion tokens keep transitions consistent and easy to disable.
   --duration-slow: 200ms;     /* one-shot open/close */
   --duration-spin: 0.75s;     /* continuous spin (.spinner) */
   --duration-shimmer: 1.2s;   /* continuous shimmer (.skeleton, indeterminate .progress) */
-  --ease: ease;
+  --ease-enter: cubic-bezier(0.2, 0, 0, 1);
+  --ease-exit: cubic-bezier(0.4, 0, 1, 1);
 }
 ```
 
+Ordinary interaction/state transitions have **no easing token**: they use the CSS default `ease` directly, and the dialog shake feedback plus the `actual-dialog` View Transition keep that default deliberately. The presence pair exists only for one-shot open/close where open and closed states own separate transition declarations (`.status-bar`/`.is-open`, `dialog.modal[open]`, `dialog.drawer[open]`): `--ease-enter` decelerates the appearance, `--ease-exit` accelerates the departure. The pair follows Material's standard rhythm; the emphasized-decelerate entrance is deliberately not offered because it only pays off at 250–400ms durations, beyond this vocabulary. Backdrops keep `ease` — a scrim only fades, it does not travel — but track their surface's duration. Toggles that share one transition list at `--duration-fast` (flyout, tooltip) also stay on `ease`: at 100ms the curve barely resolves and entry/exit cannot split on a single rule. These absences are deliberate, not gaps; a theme with a different motion character overrides `--ease-enter` / `--ease-exit`.
+
 `reset.css` clamps raw animation and transition durations to `0.01ms`, resets their delays, and restores `html` scroll behavior under `prefers-reduced-motion: reduce`. Decorative loops effectively complete immediately without blanket-disabling animation support.
 
 ### Icons
@@ -294,6 +297,7 @@ The shared visual variants are:
 - `.solid`: full background, paired foreground. This is the default for buttons.
 - `.soft`: lightly tinted background, colored text. Good for alerts, badges, and secondary actions.
 - `.outline`: transparent background, colored border and text.
+- `.surface`: the page surface with the theme border, and the intent only in the text. The neutral chrome neither `.soft` (the intent-tinted treatment) nor `.outline` (no fill) can give.
 
 Buttons also support two button-only variants:
 

package/docs/pages/foundations/typography.md

@@ -77,7 +77,15 @@ There is also a non-fluid `.lead` utility in the core, for a simple readable int
 
 Global links are intentionally neutral. Only `.prose` styles them as prose links, and only components style their own link-like elements (nav links, button-as-link, tabs, breadcrumbs, etc.). The reason is that underlining every `a` globally fights against button-like links, nav links, clickable cards, menu items, and tab triggers. Components that need link semantics should opt in with their own rule.
 
-Prose links take `--primary`. That breaks down for a theme whose primary is a light or fully saturated accent: it can carry a filled button, where it is the background under its own `--primary-fg`, but not inline body text, where it has to hold contrast against `--surface` on its own. `--link` is the optional override for exactly that case — a theme sets it and `.prose` link ink follows, hover included, with no rule to restate. Unset, it falls back to `--primary`, so existing themes are unaffected.
+`--link` is the theme-level link ink. It is unset by default, so a bare `a` inherits its color and `.prose` links fall back to `--primary` — nothing changes until a theme opts in. Setting it is that opt-in, and it reaches both places at once:
+
+```css
+:root {
+  --link: var(--primary); /* bare links become link-colored, prose included */
+}
+```
+
+The `.prose` fallback to `--primary` breaks down for a theme whose primary is a light or fully saturated accent: it can carry a filled button, where it is the background under its own `--primary-fg`, but not inline body text, where it has to hold contrast against `--surface` on its own. `--link` is the override for exactly that case — hover included, with no rule to restate.
 
 ```css
 [data-theme="vivid"] {
@@ -133,7 +141,7 @@ There is no `--line-height-normal`. It would be redundant with `--line-height`.
 - `--prose-line-height` — body line height inside `.prose`.
 - `--prose-heading-line-height` — heading line height inside `.prose`.
 - `--prose-flow` — vertical rhythm between sibling blocks inside `.prose`.
-- `--link` — prose link ink; falls back to `--primary` when a theme leaves it unset.
+- `--link` — theme-level link ink, listed here because `.prose` is its main consumer. Unset, bare links inherit and prose links fall back to `--primary`.
 
 ## text-wrap
 

package/docs/pages/guides/introduction.md

@@ -75,7 +75,7 @@ Actual CSS uses a small unprefixed class grammar:
 ```
 
 Intents are `.primary`, `.secondary`, `.success`, `.warning`, and `.danger`, and
-work across components. Variants such as `.solid`, `.soft`, and `.outline` are
+work across components. Variants such as `.solid`, `.soft`, `.outline`, and `.surface` are
 shared by buttons, badges, alerts, and cards; `.inverted` is a shared surface
 modifier that paints any block with the inverse surface. `.ghost` and `.link`
 are button-only. Size variants `.sm` and `.lg` scale controls consistently.

package/docs/pages/layout/scroll-snap.md

@@ -6,6 +6,8 @@ Horizontal rails that stay useful without JavaScript and snap in modern browsers
 
 Use `.scroll-snap` for a niche row of items that should scroll horizontally, such as card rails, media strips, overflow tabs, or a simple touch-friendly carousel baseline. Scrolling only appears when the items are wider than the container; set `--scroll-snap-item-size` for card rails.
 
+**Related terms:** carousel, card carousel, horizontal scroller, media rail, scrolling rail.
+
 ```html demo
 <section class="stack" aria-labelledby="featured-title">
   <h2 id="featured-title">Featured articles</h2>

package/docs/pages/layout/sidebar-layout.md

@@ -5,6 +5,8 @@ switches intrinsically according to its own available width: the regions sit
 side by side when the main minimum, preferred aside width, and gap fit; they
 otherwise stack. No `.container-query` ancestor is required.
 
+**Related terms:** master-detail, split view.
+
 ```html demo
 <div class="sidebar-layout">
   <article class="stack">

package/docs/pages/layout/topbar.md

@@ -21,3 +21,5 @@ Use `.topbar` for the structural shell of an app-shell header: sticky positionin
 ```
 
 This is for the app-shell topbar specifically — a structural need that recurs unchanged across app UIs regardless of brand. It is not for marketing or editorial site headers, which are one-off visual identity per page.
+
+**Related terms:** sticky header, app bar, application header.

package/docs/pages/utilities/accessibility.md

@@ -32,3 +32,21 @@ Use `.sr-only` for text that should be available to assistive technology but vis
   border: 0;
 }
 ```
+
+## Touch targets
+
+`.touch-target` adds 8px of invisible hit area around a small control on coarse
+primary pointers, without growing the visual. Apply it opt-in to targets that
+are genuinely small — icon buttons, close buttons, compact actions.
+
+```html demo
+<button class="btn icon-only touch-target" type="button" aria-label="Close">
+  <i class="ti ti-x" aria-hidden="true"></i>
+</button>
+```
+
+**Related terms:** touch target, hit area, tap target, target size.
+
+On fine pointers the class is fully neutral. On coarse pointers it establishes
+a relative positioning context — do not apply it to controls whose positioning
+is structural (`fixed`, `absolute`, `sticky`).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "actual-css",
-  "version": "0.4.1",
+  "version": "0.5.0",
   "description": "Plain CSS component framework with semantic classes, universal variants, small tokens, theme hooks, and progressive enhancements.",
   "type": "module",
   "packageManager": "bun@1.4.0",

package/scripts/reserved-classes.json

@@ -79,6 +79,7 @@
   "container-query",
   "cursor-pointer",
   "danger",
+  "data-list",
   "dialog-close",
   "dialog-confirmation",
   "dialog-icon",
@@ -134,6 +135,7 @@
   "inline-size-full",
   "input",
   "input-icon",
+  "intent-color",
   "inverted",
   "is-open",
   "is-sheet",
@@ -246,6 +248,7 @@
   "stretch",
   "subtle",
   "success",
+  "surface",
   "surface-backdrop",
   "switch",
   "switcher",
@@ -269,6 +272,7 @@
   "textarea",
   "tooltip",
   "topbar",
+  "touch-target",
   "truncate",
   "user-select-none",
   "visibility-hidden",

package/src/css/components/actions.css

@@ -11,6 +11,7 @@
   --gap: var(--space-20);
 
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--gap);

package/src/css/components/breadcrumb.css

@@ -6,6 +6,7 @@
  */
 .breadcrumb {
   display: flex;
+  flex-direction: row;
   flex-wrap: wrap;
   align-items: center;
   gap: var(--space-10);

package/src/css/components/data-list.css

@@ -0,0 +1,27 @@
+/*
+ * Data list — term/value pairs for the properties of a single object.
+ *
+ * Expects alternating <dt>/<dd> children: one term, one value per property.
+ * A plain <dl> handles richer relationships (several terms or descriptions)
+ * and stays untouched by this component.
+ *
+ * Why margin resets: neutralizes .prose list margins if .data-list appears
+ * inside an authored rich-text scope; the grid owns row/column rhythm.
+ */
+.data-list {
+  display: grid;
+  grid-template-columns: max-content minmax(0, 1fr);
+  align-items: baseline;
+  gap: var(--space-20) var(--space-40);
+}
+
+.data-list > dt {
+  min-inline-size: 0;
+  margin-block-start: 0;
+  font-weight: var(--font-weight-strong);
+}
+
+.data-list > dd {
+  min-inline-size: 0;
+  margin: 0;
+}

package/src/css/components/drawer.css

@@ -13,11 +13,16 @@
  *
  * Internal:
  * --drawer-closed-translate (side/RTL positioning state)
+ * --drawer-motion-duration (shared by panel and ::backdrop so exit duration
+ *   changes in one place; entry state redefines it longer)
  */
 dialog.drawer {
   --drawer-size: 20rem;
   --drawer-pad: var(--space-40);
   --drawer-closed-translate: -100%;
+  /* Exit is shorter than entry so the panel clears quickly; the scrim reads
+     the same variable through inheritance and never lags the panel. */
+  --drawer-motion-duration: var(--duration);
 
   /* Keep the surface anchored to the viewport in the top layer. This also
      provides the containing block for the absolutely positioned close button.
@@ -41,16 +46,20 @@ dialog.drawer {
   opacity: 0;
   transform: translateX(var(--drawer-closed-translate));
   transition:
-    opacity var(--duration-slow),
-    transform var(--duration-slow);
+    opacity var(--drawer-motion-duration) var(--ease-exit),
+    transform var(--drawer-motion-duration) var(--ease-exit);
 }
 
 dialog.drawer[open] {
+  --drawer-motion-duration: var(--duration-slow);
   display: grid;
   grid-template-rows: auto minmax(0, 1fr) auto;
   gap: var(--space-40);
   opacity: 1;
   transform: translateX(0);
+  transition:
+    opacity var(--drawer-motion-duration) var(--ease-enter),
+    transform var(--drawer-motion-duration) var(--ease-enter);
 }
 
 /* Backdrop color sourced from components/surface.css so it matches .modal
@@ -58,7 +67,9 @@ dialog.drawer[open] {
 dialog.drawer::backdrop {
   background: var(--backdrop-fill);
   opacity: 0;
-  transition: opacity var(--duration-slow);
+  /* Scrim curve stays neutral `ease`; only the panel's character curves
+     apply. Duration follows --drawer-motion-duration through inheritance. */
+  transition: opacity var(--drawer-motion-duration) ease;
 }
 
 dialog.drawer[data-side="end"] {
@@ -94,17 +105,25 @@ dialog.drawer nav {
 @supports (transition-behavior: allow-discrete) {
   dialog.drawer {
     transition:
-      opacity var(--duration-slow),
-      transform var(--duration-slow),
-      overlay var(--duration-slow) allow-discrete,
-      display var(--duration-slow) allow-discrete;
+      opacity var(--drawer-motion-duration) var(--ease-exit),
+      transform var(--drawer-motion-duration) var(--ease-exit),
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
+  }
+
+  dialog.drawer[open] {
+    transition:
+      opacity var(--drawer-motion-duration) var(--ease-enter),
+      transform var(--drawer-motion-duration) var(--ease-enter),
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
   }
 
   dialog.drawer::backdrop {
     transition:
-      opacity var(--duration-slow),
-      overlay var(--duration-slow) allow-discrete,
-      display var(--duration-slow) allow-discrete;
+      opacity var(--drawer-motion-duration) ease,
+      overlay var(--drawer-motion-duration) allow-discrete,
+      display var(--drawer-motion-duration) allow-discrete;
   }
 }
 
@@ -140,7 +159,7 @@ dialog.drawer nav {
 
 @media (prefers-reduced-motion: no-preference) {
   dialog.drawer.is-static {
-    animation: actual-dialog-static var(--duration-slow) var(--ease);
+    animation: actual-dialog-static var(--duration-slow) ease;
   }
 }
 

package/src/css/components/flyout.css

@@ -73,11 +73,10 @@
   box-shadow: var(--shadow-popout);
   list-style: none;
   opacity: 1;
-  scale: 1;
-  transition:
-    opacity var(--duration-fast) var(--ease),
-    scale var(--duration-fast) var(--ease),
-    translate var(--duration-fast) var(--ease);
+  /* Anchored flyouts fade in and out; scaling around the center would detach
+     the anchored edge from its trigger on wide panels. The sheet presentation
+     below adds its own translate motion. */
+  transition: opacity var(--duration-fast) ease;
 }
 
 .flyout.is-open:not(.is-sheet) {
@@ -87,7 +86,6 @@
 @starting-style {
   .flyout.is-open {
     opacity: 0;
-    scale: 0.98;
   }
 }
 
@@ -109,22 +107,24 @@
     max(var(--space-30), env(safe-area-inset-bottom));
   border-end-start-radius: 0;
   border-end-end-radius: 0;
+  /* Sheet motion is a directional slide from the viewport edge; it replaces
+     the base fade-only recipe. */
+  transition:
+    opacity var(--duration-fast) ease,
+    translate var(--duration-fast) ease;
 }
 
 .flyout[hidden] {
   display: none;
   opacity: 0;
-  scale: 0.98;
 }
 
 .flyout.is-sheet[hidden] {
-  scale: 1;
   translate: 0 var(--space-30);
 }
 
 @starting-style {
   .flyout.is-sheet.is-open {
-    scale: 1;
     translate: 0 var(--space-30);
   }
 }
@@ -132,9 +132,14 @@
 @supports (transition-behavior: allow-discrete) {
   .flyout {
     transition:
-      opacity var(--duration-fast) var(--ease),
-      scale var(--duration-fast) var(--ease),
-      translate var(--duration-fast) var(--ease),
+      opacity var(--duration-fast) ease,
+      display var(--duration-fast) allow-discrete;
+  }
+
+  .flyout.is-sheet {
+    transition:
+      opacity var(--duration-fast) ease,
+      translate var(--duration-fast) ease,
       display var(--duration-fast) allow-discrete;
   }
 }

package/src/css/components/index.css

@@ -43,6 +43,7 @@
 @import "./scrollspy.css";
 
 /* Data */
+@import "./data-list.css";
 @import "./list.css";
 @import "./table.css";
 @import "./meter.css";

package/src/css/components/meter.css

@@ -1,8 +1,16 @@
 /*
- * Meter — native gauge for known-range values.
+ * Meter — native and segmented gauges for known-range values.
  *
  * Maps the three standard meter zones (optimum / suboptimum / even-less-good)
  * to the shared success / warning / danger intent colors.
+ *
+ * Thickness is a dimension, not a density step: the bar always spans its
+ * container and only gets thinner or thicker, so --bar-height is the API and
+ * .sm/.lg are deliberately not supported.
+ *
+ * Public hooks:
+ * --meter-value
+ * --bar-height
  */
 
 .meter {
@@ -17,6 +25,25 @@
   background: var(--surface-subtle);
 }
 
+/* A non-native meter is a weighted flex container. The element type keeps the
+   native <meter> API and the composed segmented API distinct without another
+   public variant class. */
+.meter:not(meter) {
+  --intent: initial;
+
+  display: flex;
+}
+
+.meter:not(meter) > * {
+  flex: var(--meter-value, 1) 1 0;
+  min-inline-size: 0;
+  background: var(--intent);
+}
+
+.meter:not(meter) > * + * {
+  border-inline-start: var(--border-width) solid var(--surface);
+}
+
 .meter::-webkit-meter-bar {
   -webkit-appearance: none;
   block-size: var(--bar-height);