@signal9/era-ui 13.0.0 → 14.0.1

package/dist/generated-docs/time-field.md

@@ -5,7 +5,7 @@ Segmented time input with keyboard navigation.
 ## Import
 
 ```ts
-import { TimeField } from "@signal9/era-ui/time-field";
+import * as TimeField from "@signal9/era-ui/time-field";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/time-range-field.md

@@ -5,7 +5,7 @@ Segmented start/end time input.
 ## Import
 
 ```ts
-import { TimeRangeField } from "@signal9/era-ui/time-range-field";
+import * as TimeRangeField from "@signal9/era-ui/time-range-field";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/toggle-group.md

@@ -5,7 +5,7 @@ A set of toggle buttons with single or multiple selection.
 ## Import
 
 ```ts
-import { ToggleGroup } from "@signal9/era-ui/toggle-group";
+import * as ToggleGroup from "@signal9/era-ui/toggle-group";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/toolbar.md

@@ -5,7 +5,7 @@ Headless toolbar primitives re-exported from bits-ui.
 ## Import
 
 ```ts
-import { Toolbar } from "@signal9/era-ui/toolbar";
+import * as Toolbar from "@signal9/era-ui/toolbar";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/tooltip.md

@@ -5,7 +5,7 @@ Supplementary info on hover or focus.
 ## Import
 
 ```ts
-import { Tooltip } from "@signal9/era-ui/tooltip";
+import * as Tooltip from "@signal9/era-ui/tooltip";
 ```
 
 Composed from sub-components — compose explicitly at the call site:

package/dist/generated-docs/utilities.md

@@ -33,6 +33,17 @@ motion):
 | `text-body` | density-derived body/control text size |
 | `p-gutter` / `gap-gutter` / `mt-gutter` / … | the spacing scale — EVERY spacing prefix works |
 
+THE SPACING NAMES IN SIZE ORDER, smallest first, because the names do not
+imply it and guessing gets it backwards:
+
+    gutter  <  panel  <  field  <  card  <  content
+
+Measured at `data-mode="balanced"`: gutter 5px, field ~9px, card ~11px,
+content ~22px. `gutter` is the TIGHT one — the gap between sibling controls
+and a rail's own padding. `field` is a text input's side padding, not the
+label-to-input gap. Reading them the other way round produces a layout whose
+hierarchy is inverted and therefore reads flat.
+
 The spacing names (`gutter`, `card`, `panel`, `content`, `menu`, `field`, the
 `inset-*` and concentric `*-inset-*` insets, `glyph-*`) are registered as a
 Tailwind spacing scale, so every prefix derives automatically: `p-`, `px-`,

package/dist/ui/checkbox/checkbox.svelte

@@ -18,7 +18,15 @@
 	bind:checked
 	bind:indeterminate
 	class={cn(
-		'group/checkbox flex size-icon shrink-0 era-interactive cursor-pointer items-center justify-center rounded-control bg-elevated shadow-well hover:bg-highlight',
+		// bg-field, not bg-elevated: this is a RECESSED control (it takes
+		// shadow-well), and the recessed tier's fill is --era-field-bg. Wearing the
+		// RAISED fill was an internal contradiction with a visible cost — on flat,
+		// --era-surface-bg-elevated collapses to --era-surface-bg and shadow-well
+		// collapses to none, so a check inside an elevated container (a Card, a
+		// Dialog) was the same colour as its own backdrop with no edge to find it
+		// by. Two consumers reported it independently as an invisible control.
+		// Switch had already worked around the same thing with a border.
+		'group/checkbox flex size-icon shrink-0 era-interactive cursor-pointer items-center justify-center rounded-control bg-field shadow-well hover:bg-highlight',
 		className
 	)}
 	{...restProps}

package/dist/ui/pin-input/index.d.ts

@@ -1,2 +1,3 @@
 export { default as Root } from './pin-input-root.svelte';
 export { default as Cell } from './pin-input-cell.svelte';
+export { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'bits-ui';

package/dist/ui/pin-input/index.js

@@ -1,2 +1,12 @@
 export { default as Root } from './pin-input-root.svelte';
 export { default as Cell } from './pin-input-cell.svelte';
+/*
+ * The `pattern` presets, re-exported.
+ *
+ * They come from bits-ui, which is era's dependency — not the consumer's. A
+ * consumer following the docs had to `import { REGEXP_ONLY_DIGITS } from
+ * 'bits-ui'`, reaching past era into a package they never declared, and one npm
+ * is free to hoist differently or dedupe away. Re-exporting keeps the import
+ * surface era's own.
+ */
+export { REGEXP_ONLY_DIGITS, REGEXP_ONLY_CHARS, REGEXP_ONLY_DIGITS_AND_CHARS } from 'bits-ui';

package/dist/ui/radio-group/radio-group-item.svelte

@@ -8,7 +8,15 @@
 <RadioGroup.Item
 	bind:ref
 	class={cn(
-		'group/radio flex size-icon shrink-0 era-interactive cursor-pointer items-center justify-center rounded-control bg-elevated shadow-well hover:bg-highlight',
+		// bg-field, not bg-elevated: this is a RECESSED control (it takes
+		// shadow-well), and the recessed tier's fill is --era-field-bg. Wearing the
+		// RAISED fill was an internal contradiction with a visible cost — on flat,
+		// --era-surface-bg-elevated collapses to --era-surface-bg and shadow-well
+		// collapses to none, so a check inside an elevated container (a Card, a
+		// Dialog) was the same colour as its own backdrop with no edge to find it
+		// by. Two consumers reported it independently as an invisible control.
+		// Switch had already worked around the same thing with a border.
+		'group/radio flex size-icon shrink-0 era-interactive cursor-pointer items-center justify-center rounded-control bg-field shadow-well hover:bg-highlight',
 		className
 	)}
 	{...restProps}

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "13.0.0",
+	"version": "14.0.1",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
@@ -22,9 +22,10 @@
 		"check:canonical": "node --experimental-strip-types scripts/check-canonical.ts",
 		"check:layers": "node --experimental-strip-types scripts/check-layers.ts",
 		"check:themes": "node --experimental-strip-types scripts/check-themes.ts",
+		"check:classes": "node --experimental-strip-types scripts/check-classes.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 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",
+		"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 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",
 		"test": "npm run test:visual"
 	},
 	"files": [

package/dist/docs/package-name.d.ts

@@ -1,18 +0,0 @@
-/**
- * The specifier a CONSUMER writes.
- *
- * Not `$lib/ui/<slug>` — that is a SvelteKit alias which resolves only inside
- * this repo, so every doc that printed it was handing consumers an import that
- * cannot work anywhere else. It had reached 61 of the 73 generated component
- * docs and all of llms-full.txt, which is the file agents fetch, before anyone
- * tried to follow one.
- *
- * npm's name deliberately: the package publishes to two registries under two
- * names (`@sig-nine/era-ui` on GitHub Packages, where the scope must match the
- * repo owner) and npm's is the one a reader can install without auth.
- *
- * Its own module, with no imports of its own, because the node doc builder
- * loads it through --experimental-strip-types — which cannot follow the `.js`
- * specifiers the rest of src/lib/docs uses.
- */
-export declare const PACKAGE = "@signal9/era-ui";

package/dist/docs/package-name.js

@@ -1,18 +0,0 @@
-/**
- * The specifier a CONSUMER writes.
- *
- * Not `$lib/ui/<slug>` — that is a SvelteKit alias which resolves only inside
- * this repo, so every doc that printed it was handing consumers an import that
- * cannot work anywhere else. It had reached 61 of the 73 generated component
- * docs and all of llms-full.txt, which is the file agents fetch, before anyone
- * tried to follow one.
- *
- * npm's name deliberately: the package publishes to two registries under two
- * names (`@sig-nine/era-ui` on GitHub Packages, where the scope must match the
- * repo owner) and npm's is the one a reader can install without auth.
- *
- * Its own module, with no imports of its own, because the node doc builder
- * loads it through --experimental-strip-types — which cannot follow the `.js`
- * specifiers the rest of src/lib/docs uses.
- */
-export const PACKAGE = '@signal9/era-ui';

package/dist/docs/quickstart.md

@@ -1,43 +0,0 @@
-## Hero Template
-
-Use a single, pure component import from `$lib/ui` for a clean docs-friendly starter hero.
-
-```svelte
-<script lang="ts">
-	import { Badge, Bar, Button, ButtonGroup, Card, Separator } from '@signal9/era-ui';
-</script>
-
-<section class="mx-auto flex w-full max-w-4xl flex-col gap-content p-content">
-	<Badge tone="accent">Now shipping v0.8</Badge>
-
-	<div class="space-y-(--era-gap)">
-		<h1 class="font-mono text-[length:calc(var(--era-text)*2)] font-semibold text-bright">
-			Era Hero
-		</h1>
-		<p class="max-w-prose text-muted">
-			Build once, then switch feel instantly with density and surface tokens.
-		</p>
-	</div>
-
-	<Bar class="border border-[color:var(--era-border-color)] bg-[var(--era-surface-bg)]">
-		<ButtonGroup>
-			<Button tone="accent">Get started</Button>
-			<Button variant="outline">Live preview</Button>
-		</ButtonGroup>
-	</Bar>
-
-	<Separator />
-
-	<div class="grid gap-gutter md:grid-cols-3">
-		<Card class="p-gutter">Dense-ready</Card>
-		<Card class="p-gutter">Balanced defaults</Card>
-		<Card class="p-gutter">Spacious polish</Card>
-	</div>
-</section>
-```
-
-### Why this template
-
-- Pure imports keep setup simple for first-time users.
-- Every spacing and size value comes from era tokens.
-- Works in all density modes without rewriting markup.