@signal9/era-ui 31.0.0 → 32.0.0

package/package.json

@@ -1,10 +1,11 @@
 {
 	"name": "@signal9/era-ui",
-	"version": "31.0.0",
+	"version": "32.0.0",
 	"scripts": {
 		"dev": "vite dev --host",
 		"build": "vite build && npm run prepack",
 		"test:visual": "playwright test",
+		"test:visual:deep": "ERA_TEST_DEPTH=deep playwright test",
 		"deploy": "npm run build && npx --yes wrangler@latest deploy",
 		"preview": "wrangler dev .svelte-kit/cloudflare/_worker.js --port 4173",
 		"prepare": "git config core.hooksPath .githooks 2>/dev/null || true; svelte-kit sync || echo ''",

package/skill/SKILL.md

@@ -125,9 +125,11 @@ relationship with its own badge or chip depend on unrelated outer chrome.
   `bg-highlight` + `shadow-highlight` (surface-owned; translucent on glass).
   Held state (toggle on, current tab, active button) uses opaque `bg-hover`.
   Never swap.
-- Panels: resting fill `bg-well` (pairs with `shadow-well`), raised fill
-  `bg-elevated` (pairs with `shadow-lg` + `glass-blur` on floating panels),
-  modal scrim `bg-overlay`. Menu panels pad with `p-menu` and their rows take
+- Panels: use `material-popover` for transient floating chrome and
+  `material-panel` for persistent floating chrome. These atomically bind fill,
+  relief, and backdrop without naming flat/glass/bevel. Use `surface-backdrop`
+  only when a custom surface must choose its own fill and relief. Modal scrims
+  use `bg-overlay`. Menu panels pad with `p-menu` and their rows take
   `rounded-menu-item` so the row highlight stays concentric inside the frame.
 
 ## Motion
@@ -177,7 +179,10 @@ a component into the role. Full reference (including every named scale above):
 | `era-text-trim-caps` | the same for ALL-CAPS strings (kbd hints, acronym badges)                                                              |
 | `era-shimmer`        | a "working…" / streaming label — motion-aware, dies at `instant` and under reduced-motion                              |
 | `scrollbar-none`     | an overflowing strip that scrolls with no visible bar (ScrollArea is for when the bar IS the design)                   |
-| `glass-blur`         | backdrop blur on a floating panel; inert outside a `data-surface="glass"` subtree                                      |
+| `material-popover`   | complete transient floating material: raised fill, floating relief, and surface-owned backdrop                         |
+| `material-panel`     | complete persistent floating material: resting fill, floating relief, and surface-owned backdrop                       |
+| `surface-backdrop`   | backdrop treatment only, for a custom surface whose fill and relief are deliberately separate                          |
+| `pressable`          | physical pressed face; moves its marked direct content plane by the surface-owned travel                               |
 
 ## Composing the library
 

package/dist/styles/surfaces/base.css

@@ -1,257 +0,0 @@
-/*
- * Era UI — Surface Contract (base) + flat defaults
- *
- * A surface answers, through tokens alone: what do fills, edges, wells,
- * pressed faces, transient highlights, and menu geometry look like here?
- * Values are hand-authored per surface (design is sculpting); this file
- * centralizes the contract every surface answers against.
- *
- * ARCHITECTURE
- * ============
- *
- * The selector pairs :root (page default = flat) with [data-surface], so
- * every element that DECLARES a surface re-baselines the full contract —
- * a bevel subtree nested inside glass inherits nothing frosted, and a
- * surface file only writes its deltas.
- *
- * Same-element var() defaults: --era-shadow-well, --era-shadow-pressed, and
- * --era-highlight-shadow default to var(--era-shadow). Because a surface's own
- * block and this base block apply to the SAME element, the var() resolves
- * against that surface's shadow — no literal duplication, and a surface
- * only overrides these when its wells/press/shine genuinely differ.
- *
- * Colors use light-dark(<light>, <dark>) instead of duplicated
- * @media/.light blocks. Themes set color-scheme (including on scoped
- * .light/.dark subtrees), which drives resolution per element.
- *
- * TOKEN GLOSSARY
- * ==============
- *
- * --era-surface-bg / -elevated   surface fills (resting / raised tier)
- * --era-field-bg                 the RECESSED tier — a text field's resting
- *                              fill, which is the theme's hover tone: a field
- *                              rests at the weight a control reaches on hover
- * --era-field-highlight          a field's OWN transient fill — one step past
- *                              its resting fill, since that already sits where
- *                              --era-highlight does and could not show a hover
- * --era-shadow / --era-shadow-lg   resting edge chrome (controls / floating)
- * --era-shadow-well              recessed container (inputs, tracks, checks)
- * --era-shadow-pressed           a control's :active or latched face
- * --era-press-sink-x / -y        how far the CONTENT (icon/label) sinks on
- *                              press while the frame stays put — bevel nudges
- *                              it inward (down + right, Win95-style) so a
- *                              keycap depresses in place without the box moving.
- * --era-highlight                TRANSIENT feedback fill (hover, focus,
- *                              keyboard, drag-over). LATCHED states
- *                              (toggled on, open trigger, active page,
- *                              pill fills) stay on opaque bg-hover — a
- *                              held state reads solid, a passing state
- *                              reads as light.
- * --era-highlight-shadow         the material half of transient feedback;
- *                              paired as hover:shadow-(--era-highlight-shadow)
- * --era-panel-inset              menu-panel padding so row highlights stay
- *                              inside the surface's frame
- * --era-divider-color / -faded   separator lines
- * --era-overlay-bg               modal scrim
- * --era-blur / --era-saturate      backdrop-filter inputs (glass-blur utility)
- * --era-selection-bg / -fg       ::selection highlight fill + glyph color
- * --era-selection-shadow         text-shadow INSIDE a selection — the one
- *                              extra channel highlight pseudos allow (glass
- *                              glow; none elsewhere)
- */
-:root,
-[data-surface] {
-	--era-border-color: transparent;
-	--era-divider-color: var(--color-border);
-	--era-divider-faded: color-mix(in oklch, var(--era-divider-color) 40%, transparent);
-	--era-surface-bg: var(--color-2);
-	/* THE RAISED TIER HAS ITS OWN TONE, which is how a floating panel is told
-	 * apart from what it covers now that flat draws no edge (see --era-shadow-lg
-	 * below). It used to track --era-surface-bg, so a Popover over a Card was
-	 * the same fill with nothing to separate it.
-	 *
-	 * Derived, not indexed. --color-3 is the obvious pick and it is the trap
-	 * --era-field-bg already fell into: the 12-step scale is not symmetric about
-	 * its ends, so --color-3 sits ΔL 0.09 from the page in dark and ΔL 0.21 in
-	 * light — a step that reads right on a dark page and as a heavy grey slab on
-	 * a light one. Mixing toward --color-bright inverts with the mode by
-	 * construction (bright is L 0.93 in dark, L 0.16 in light), which is the
-	 * same idiom --era-field-highlight uses one tier down.
-	 *
-	 * 6% measured to ΔL 0.044 in dark and 0.040 in light — symmetric, and both
-	 * larger than the ΔL 0.033 that already separates a card from the page. If
-	 * that step is enough to say "this is a card", it is enough to say "this is
-	 * on top of it". */
-	--era-surface-bg-elevated: color-mix(in oklch, var(--era-surface-bg) 94%, var(--color-bright));
-	/* The third fill tier, and the one that was missing. A field is RECESSED, so
-	 * it was reaching for -elevated (the RAISED tier) and relying on
-	 * --era-shadow-well to sell the depth — which works on a surface that has
-	 * shadows and does nothing at all on flat. Measured before this token
-	 * existed: a resting input sat at 1.06:1 against its backdrop on flat and
-	 * bevel dark, and at 1.00:1 on glass light. Invisible until you touched it.
-	 *
-	 * A field rests at the weight a control reaches on HOVER — the theme's own
-	 * --color-hover, not a value derived from the page.
-	 *
-	 * It was derived once: a fixed 16% of the foreground mixed into the page,
-	 * chosen because the 12-step scale is not symmetric about its ends (--color-3
-	 * sits ΔL 0.09 from the page in dark but ΔL 0.21 in light, so a scale index
-	 * that looked right on a dark page rendered a heavy grey slab on a light
-	 * one). The mix did hold ΔL ≈ 0.11 in both modes, but it landed just PAST the
-	 * hover tone in dark and just SHORT of it in light — the two crossing over
-	 * between themes. A resting field out-read a hovered button on a dark page,
-	 * and hovering a field moved it toward the page background while hovering a
-	 * button moved it away.
-	 *
-	 * Naming the hover tone directly is what makes the ladder read the same in
-	 * both modes — page → field (= a hovered control) → field under the pointer —
-	 * and it hands the value to the theme, which is where a palette that is not a
-	 * smooth gradient needs it to live. */
-	--era-field-bg: var(--color-hover);
-	/* One small step past the resting field, toward the theme's brightest ink —
-	 * "brighter" in dark, deeper in light, which is what emphasis means on each.
-	 * Expressed against --era-field-bg rather than a literal so a surface that
-	 * retints its field (glass) gets a matching hover for free: base and the
-	 * surface block apply to the SAME element, so the var() resolves against
-	 * that surface's own field. Same trick as --era-shadow-well above. */
-	--era-field-highlight: color-mix(in oklch, var(--era-field-bg) 96%, var(--color-bright));
-	--era-shadow: none;
-	/* FLAT DRAWS NO EDGE, INCLUDING ON A FLOATING PANEL.
-	 *
-	 * This held `0 0 0 1px var(--era-divider-color)` for a while (f329475). The
-	 * reasoning was sound and the result was not: flat's fill tiers are not
-	 * split, so a Popover over a Card had the same fill AND no edge, and a hover
-	 * card's text interleaved with the prose underneath. A hairline fixed that,
-	 * and it is genuinely flat's own idiom — Pane, the Switch track and every
-	 * divider draw one.
-	 *
-	 * It is still an outline around every menu, dialog and popover on the
-	 * surface whose entire premise is that there is no chrome, and that is how
-	 * it read in use. Removed on the owner's call, twice asked for.
-	 *
-	 * WHAT THIS COSTS, stated rather than buried: a floating panel over content
-	 * at the SAME fill has no separation on flat again. That is f329475's bug
-	 * returning, and it is real — but it needs a panel over a same-fill card to
-	 * appear, not a menu over the page, which is the common case and reads fine
-	 * on the page's own tone step. If it bites, the fix is to split the fill
-	 * tiers (give --era-surface-bg-elevated its own tone) rather than to put the
-	 * ring back: separation by FILL is what "solid fills, no chrome" means, and
-	 * a raw scale index is the wrong tool for it — --color-3 sits ΔL 0.09 from
-	 * the page in dark and ΔL 0.21 in light, the asymmetry --era-field-bg was
-	 * derived from --color-hover to avoid.
-	 *
-	 * glass and bevel override this with a rim and a chisel and are untouched. */
-	--era-shadow-lg: none;
-	--era-shadow-well: var(--era-shadow);
-	--era-shadow-pressed: var(--era-shadow);
-	/* THE NESTING LAW: transient feedback is a translucent ink wash, never an
-	 * opaque swatch — because highlights CONTAIN things. A chip rides inside a
-	 * hovered select trigger; a pin button hovers inside a hovered list row.
-	 * With an opaque highlight equal to the pill fill (the old --color-hover),
-	 * the moment the container lit up, everything inside it dissolved into the
-	 * same colour. A wash composes instead: each nested layer stacks one more
-	 * step of ink on whatever is beneath it, so container-hover, pill fill and
-	 * control-hover are always three distinguishable values — at any depth,
-	 * with no per-component opt-in. Glass has worked this way all along (its
-	 * highlight is a bright wash by necessity); this gives flat and bevel the
-	 * same compositional property.
-	 *
-	 * Calibrated to be INVISIBLE at rest: over the standard surface the wash
-	 * resolves to the exact colour the opaque token painted. Dark — color-2
-	 * 0.195 + 8% of bright 0.925 = 0.253 ≈ the old hover 0.25. Light — color-2
-	 * 0.863 + 9% of bright 0.166 = 0.800 = the old hover 0.8 exactly. Nothing
-	 * moves except where two layers meet, which is the point. */
-	--era-highlight: light-dark(
-		color-mix(in oklch, var(--color-bright) 9%, transparent),
-		color-mix(in oklch, var(--color-bright) 8%, transparent)
-	);
-	--era-highlight-shadow: var(--era-shadow);
-	/* The standing pill fill (Chip, Badge, KV, an active tool chip) — the
-	 * LATCHED counterpart of --era-highlight, public name `bg-fill`. Follows
-	 * the highlight's wash here (so a pill on a lit container steps up with
-	 * it), while glass overrides it back to the opaque swatch: there the
-	 * latched-reads-solid / transient-reads-light distinction is the surface's
-	 * own grammar, and its highlight was already a wash so the collision this
-	 * solves never existed. */
-	--era-fill: var(--era-highlight);
-	--era-press-sink-x: 0px;
-	--era-press-sink-y: 0px;
-	--era-panel-inset: 0px;
-	--era-overlay-bg: color-mix(in oklch, var(--color-1) 60%, transparent);
-	--era-blur: 0px;
-	--era-saturate: 100%;
-	/* Flat's selection is inverse video: a solid maximum-contrast block, the
-	 * terminal's own idiom — no chrome, like everything else here. */
-	--era-selection-bg: var(--color-bright);
-	--era-selection-fg: var(--color-1);
-	--era-selection-shadow: none;
-}
-
-/* Text selection — the one paint a surface gets INSIDE the glyphs. Highlight
- * pseudos only carry color / background-color / text-shadow / text-decoration
- * (no box-shadow, no backdrop-filter — a selection can't wear a chisel or
- * frost), so each surface expresses its material through these three tokens.
- * var() in ::selection resolves against the originating element, so a nested
- * surface re-baselines its selection exactly like every other contract token. */
-::selection {
-	background-color: var(--era-selection-bg);
-	color: var(--era-selection-fg);
-	text-shadow: var(--era-selection-shadow);
-}
-
-/* Concentric radius for a row inside a panel: the panel's radius minus its
- * inset. Declared on the universal selector (like the density ladder) so it
- * re-derives against each element's own --era-rd-control — density subtree
- * overrides stay correct.
- *
- * NO SURFACE GATE. This used to be multiplied by --era-item-rd-scale, which
- * flat set to 0 — so on the default surface a row was square no matter what
- * data-corners said, and a consumer who set corners globally got square rows
- * anyway. That is the surface axis overriding the CORNERS axis, and the axes
- * are meant to be orthogonal: surface owns fills, shadows and frames; corners
- * owns radii, globally, with no exceptions for a consumer to discover.
- *
- * The gate was also redundant. The formula already answers both axes on its
- * own: at data-corners="square" --era-rd-control collapses to 0, so this collapses
- * with it; on flat --era-panel-inset is 0, so a flush full-width row simply
- * takes the panel's own radius — which is the concentric answer for a row
- * whose panel has no frame to nest inside. Flat menus keep their flush,
- * full-width rows; only the highlight's corners now follow the axis. */
-* {
-	--era-item-rd: max(0px, calc(var(--era-rd-control) - var(--era-panel-inset)));
-}
-
-/*
- * SURFACE-TAILORED ANIMATION — recipe
- * ===================================
- * Timing belongs to the MOTION axis (motion.css): components read
- * --era-duration and --era-ease, so speed and curve follow data-motion for
- * free — a surface never sets duration.
- *
- * A surface can shape motion two ways:
- *   • FEEL — override --era-ease inside the surface's [data-surface] block.
- *     motion.css is imported before surfaces, so a surface delta wins;
- *     e.g. a surface could soften or sharpen every transition's curve.
- *   • STRATEGY — for a genuinely different technique (a glass crossfade vs.
- *     a bevel thumb sliding along a track), scope a rule to the surface and
- *     target the component's stable part, e.g. in the surface's own file:
- *       [data-surface='<name>'] [data-slot='switch-thumb'] { … }
- *     Keyframes live in that surface's file. Surface-only UTILITIES cannot:
- *     the surface files are imported into a cascade layer, and `@utility` may
- *     not be nested inside one — so they live in styles/index.css alongside
- *     the rest (precedent: `glass-blur`, which is gated to glass subtrees).
- *
- * Reduced-motion is handled centrally in motion.css — surfaces need not.
- */
-
-/* Reduced transparency: the washes go back to the solid swatch — the same
- * degradation glass.css applies to its own translucent tokens. Declared after
- * the defaults in THIS file so it wins over them; glass, declared later in
- * import order, keeps its own pair of declarations for glass elements. */
-@media (prefers-reduced-transparency: reduce) {
-	:root,
-	[data-surface] {
-		--era-highlight: var(--color-hover);
-		--era-fill: var(--color-hover);
-	}
-}