@signal9/era-ui 20.0.0 → 22.0.0

package/dist/ui/meter/meter.svelte

@@ -1,3 +1,38 @@
+<script lang="ts" module>
+	import { tv } from '../../utils/index.js';
+
+	/*
+	 * A meter reports a LEVEL inside a known range — disk usage, a quota, a
+	 * score — so "how is this level doing" is the one thing it exists to say,
+	 * and it was the one thing it could not say. Consumers were reaching past
+	 * the component for it (`class="[&>div]:bg-destructive"`), which reaches
+	 * through a private child and breaks the moment the fill's markup changes.
+	 *
+	 * The tones are the library's five, spelled exactly as Badge and Button
+	 * spell them, so a meter beside a badge that both read "warning" render the
+	 * same hue. `default` stays bg-fg: a meter with nothing to report should not
+	 * look like it is reporting something.
+	 *
+	 * The tone is on the FILL, not the track. The track is the well the value
+	 * sits in — it belongs to the container, not to the reading — so tinting it
+	 * would say "this whole control is in a warning state" rather than "the
+	 * value has reached the warning band".
+	 */
+	export const meterFillVariants = tv({
+		base: 'h-full w-full transition-transform duration-base ease-base',
+		variants: {
+			tone: {
+				default: 'bg-fg',
+				accent: 'bg-primary',
+				destructive: 'bg-destructive',
+				success: 'bg-success',
+				warning: 'bg-warning'
+			}
+		},
+		defaultVariants: { tone: 'default' }
+	});
+</script>
+
 <script lang="ts">
 	import { Meter } from 'bits-ui';
 	import { cn } from '../../utils/index.js';
@@ -7,9 +42,21 @@
 		value = 0,
 		min = 0,
 		max = 100,
+		tone = 'default',
 		class: className,
 		...restProps
-	}: Meter.RootProps = $props();
+	}: Meter.RootProps & {
+		/**
+		 * The band this reading falls in. Tone is the fill's colour only — the
+		 * track stays neutral, because the well belongs to the control and the
+		 * fill belongs to the value.
+		 *
+		 * Tone carries no semantics on its own: a meter in the destructive band
+		 * still needs an accessible label saying what has run out. Pair it with
+		 * `aria-label` / a visible label, never rely on the hue alone.
+		 */
+		tone?: 'default' | 'accent' | 'destructive' | 'success' | 'warning';
+	} = $props();
 
 	let percentage = $derived(((value - min) / (max - min)) * 100);
 </script>
@@ -19,6 +66,7 @@
 	{value}
 	{min}
 	{max}
+	data-tone={tone}
 	class={cn(
 		'h-(--era-sp) w-full overflow-hidden rounded-control bg-elevated shadow-well',
 		className
@@ -26,7 +74,7 @@
 	{...restProps}
 >
 	<div
-		class="h-full w-full bg-fg transition-transform duration-base ease-base"
+		class={meterFillVariants({ tone })}
 		style="transform: translateX(-{100 - percentage}%)"
 	></div>
 </Meter.Root>

package/dist/ui/meter/meter.svelte.d.ts

@@ -1,4 +1,41 @@
+export declare const meterFillVariants: import("tailwind-variants").TVReturnType<{
+    tone: {
+        default: "bg-fg";
+        accent: "bg-primary";
+        destructive: "bg-destructive";
+        success: "bg-success";
+        warning: "bg-warning";
+    };
+}, undefined, "h-full w-full transition-transform duration-base ease-base", {
+    tone: {
+        default: "bg-fg";
+        accent: "bg-primary";
+        destructive: "bg-destructive";
+        success: "bg-success";
+        warning: "bg-warning";
+    };
+}, undefined, import("tailwind-variants").TVReturnTypeLike<{
+    tone: {
+        default: "bg-fg";
+        accent: "bg-primary";
+        destructive: "bg-destructive";
+        success: "bg-success";
+        warning: "bg-warning";
+    };
+}, undefined>>;
 import { Meter } from 'bits-ui';
-declare const Meter: import("svelte").Component<Meter.RootProps, {}, "ref">;
+type $$ComponentProps = Meter.RootProps & {
+    /**
+     * The band this reading falls in. Tone is the fill's colour only — the
+     * track stays neutral, because the well belongs to the control and the
+     * fill belongs to the value.
+     *
+     * Tone carries no semantics on its own: a meter in the destructive band
+     * still needs an accessible label saying what has run out. Pair it with
+     * `aria-label` / a visible label, never rely on the hue alone.
+     */
+    tone?: 'default' | 'accent' | 'destructive' | 'success' | 'warning';
+};
+declare const Meter: import("svelte").Component<$$ComponentProps, {}, "ref">;
 type Meter = ReturnType<typeof Meter>;
 export default Meter;

package/dist/ui/time-field/time-field-input.svelte

@@ -6,8 +6,17 @@
 	let { ref = $bindable(null), class: className, ...restProps }: TimeField.InputProps = $props();
 </script>
 
+<!-- A TEXT FIELD'S SIDE PADDING IS DELIBERATELY NOT ITS CONCENTRIC INSET.
+     --era-field-px is the room where typed text STARTS — purpose-named in
+     density.css and floored at 0.5rem because the derived 6.8px read cramped at
+     dense — while the segment boxes inside are chip-tier and centre 1px from the
+     top. So this row is 8px at the sides against 1px above and below, on
+     purpose, and it says so rather than being quietly skipped by
+     layout/wall-is-isotropic's heuristics: a claim a reviewer can check beats a
+     silence. -->
 <TimeField.Input
 	bind:ref
+	data-era-anisotropic
 	data-input-field
 	class={cn(
 		inputVariants(),

package/dist/ui/time-range-field/time-range-field-input.svelte

@@ -10,8 +10,17 @@
 	}: TimeRangeField.InputProps = $props();
 </script>
 
+<!-- A TEXT FIELD'S SIDE PADDING IS DELIBERATELY NOT ITS CONCENTRIC INSET.
+     --era-field-px is the room where typed text STARTS — purpose-named in
+     density.css and floored at 0.5rem because the derived 6.8px read cramped at
+     dense — while the segment boxes inside are chip-tier and centre 1px from the
+     top. So this row is 8px at the sides against 1px above and below, on
+     purpose, and it says so rather than being quietly skipped by
+     layout/wall-is-isotropic's heuristics: a claim a reviewer can check beats a
+     silence. -->
 <TimeRangeField.Input
 	bind:ref
+	data-era-anisotropic
 	data-input-field
 	class={cn(
 		inputVariants(),

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "20.0.0",
+	"version": "22.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -25,9 +25,12 @@
 		"check:classes": "node --experimental-strip-types scripts/check-classes.ts",
 		"check:twmerge": "node --experimental-strip-types scripts/check-twmerge.ts",
 		"build:llm-docs": "node --experimental-strip-types scripts/build-llm-docs.ts",
-		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run build:llm-docs",
-		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge",
-		"test": "npm run test:visual"
+		"prebuild": "npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage && npm run build:llm-docs",
+		"validate": "npm run check && npm run lint && npm run format:check && npm run check:surfaces && npm run check:tokens && npm run check:routes && npm run check:canonical && npm run check:layers && npm run check:themes && npm run check:classes && npm run check:twmerge && npm run check:doc-tokens && npm run check:audit-controls && npm run check:specimen-coverage",
+		"test": "npm run test:visual",
+		"check:doc-tokens": "node --experimental-strip-types scripts/check-doc-tokens.ts",
+		"check:audit-controls": "node --experimental-strip-types scripts/check-audit-controls.ts",
+		"check:specimen-coverage": "node --experimental-strip-types scripts/check-specimen-coverage.ts"
 	},
 	"files": [
 		"dist",

package/skill/SKILL.md

@@ -64,13 +64,13 @@ Named for the ROLE each rung plays, never for its size — a scale whose names
 can invert is a scale nobody reads correctly (this library once shipped an
 `xxs` that was bigger than its `xs`).
 
-| Tier      | Height      | Square        | Radius           | Use for                                     |
-| --------- | ----------- | ------------- | ---------------- | ------------------------------------------- |
-| `icon`    | `h-icon`    | `size-icon`   | `rounded-icon`   | a lucide glyph, switch thumbs               |
-| `pill`    | `h-pill`    | `size-pill`   | `rounded-pill`   | a badge/chip nested INSIDE a control        |
-| `chip`    | `h-chip`    | `size-chip`   | `rounded-chip`   | standalone pills, switch tracks, KV         |
-| `control` | `h-control` | `size-control`| `rounded-control`| buttons, inputs, selects, triggers          |
-| `bar`     | `h-bar`     | `size-bar`    | `rounded-bar`    | bars, containers, dialog headers            |
+| Tier      | Height      | Square         | Radius            | Use for                              |
+| --------- | ----------- | -------------- | ----------------- | ------------------------------------ |
+| `icon`    | `h-icon`    | `size-icon`    | `rounded-icon`    | a lucide glyph, switch thumbs        |
+| `pill`    | `h-pill`    | `size-pill`    | `rounded-pill`    | a badge/chip nested INSIDE a control |
+| `chip`    | `h-chip`    | `size-chip`    | `rounded-chip`    | standalone pills, switch tracks, KV  |
+| `control` | `h-control` | `size-control` | `rounded-control` | buttons, inputs, selects, triggers   |
+| `bar`     | `h-bar`     | `size-bar`     | `rounded-bar`     | bars, containers, dialog headers     |
 
 `min-h-*`, `min-w-*` and `w-*` exist across the same rungs. There is no escape
 hatch here any more: `min-w-control` is a real class, because role names collide
@@ -90,8 +90,11 @@ corners axis.
    give EVERY element the radius of its OWN height tier, center children with
    the matching concentric inset, and nested corners share a center of
    curvature automatically. The concentric insets are advanced enough to stay
-   token-form: `--era-xs-inset-sm` (xs inside sm, = sp/2), `--era-xxs-inset-md`,
-   `--era-xs-inset-md`, `--era-xs-inset-lg`, `--era-sm-inset-lg`.
+   token-form, and each is named for the pair it centres:
+   `--era-icon-inset-chip` (an icon inside a chip, = sp/2),
+   `--era-icon-inset-pill`, `--era-pill-inset-control`, `--era-pill-inset-chip`,
+   `--era-icon-inset-control`, `--era-icon-inset-bar`, `--era-chip-inset-control`,
+   `--era-chip-inset-bar`.
 
 **The trap**: a container's radius follows its corner REGION's tier, never its
 overall bulk. A large panel whose corners are formed by a chip-tier handle bar