@signal9/era-ui 31.0.0 → 32.0.0

package/dist/generated-docs/llms-full.txt

@@ -63,7 +63,10 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
 - `era-token-ink` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
 - `era-label-ink` — the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
-- `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
+- `surface-backdrop` — the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.
+- `material-popover` — a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.
+- `material-panel` — a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.
+- `pressable` — the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.
 - `tier-icon · tier-pill · tier-chip · tier-control · tier-bar` — BOUNDED GEOMETRY — height and radius are one decision.
 - `h-line` — the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box.
 - `era-track-well` — instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.
@@ -223,7 +226,10 @@ source uses it where a name exists.
 | `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
 | `era-token-ink` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there. |
 | `era-label-ink` | the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip). |
-| `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
+| `surface-backdrop` | the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface. |
+| `material-popover` | a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically. |
+| `material-panel` | a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically. |
+| `pressable` | the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale. |
 | `tier-icon` `tier-pill` `tier-chip` `tier-control` `tier-bar` | — |
 | `h-line` | the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box. |
 | `era-track-well` | instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right. |
@@ -605,31 +611,64 @@ Declared in `index.css`.
 }
 ```
 
-## glass-blur
+## surface-backdrop
 
-**Use it for:** the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
+**Use it for:** the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.
 
-Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
-is a registered utility, gated to glass subtrees.
+Declared in `index.css`.
+
+```css
+@utility surface-backdrop {
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+```
+
+## material-popover
+
+**Use it for:** a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.
+
+Declared in `index.css`.
+
+```css
+@utility material-popover {
+	background-color: var(--era-surface-bg-elevated);
+	box-shadow: var(--era-shadow-lg);
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+```
+
+## material-panel
+
+**Use it for:** a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.
+
+Declared in `index.css`.
+
+```css
+@utility material-panel {
+	background-color: var(--era-surface-bg);
+	box-shadow: var(--era-shadow-lg);
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+```
 
-It lives HERE rather than in surfaces/glass.css, where a surface's own
-chrome would naturally sit, because glass.css is imported into a cascade
-layer and `@utility` cannot be nested inside one. Surface-scoped RULES stay
-in their surface file; surface-scoped UTILITIES have to come out.
+## pressable
+
+**Use it for:** the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.
 
 Declared in `index.css`.
 
 ```css
-@utility` cannot be nested inside one. Surface-scoped RULES stay
- * in their surface file; surface-scoped UTILITIES have to come out.
- *
- * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it
- * applies only inside a data-surface="glass" subtree and is inert elsewhere,
- * so it is safe to leave on a panel that renders under every surface. */
-@utility glass-blur {
-	[data-surface='glass'] & {
-		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+@utility pressable {
+	&:active {
+		box-shadow: var(--era-shadow-pressed);
+	}
+
+	&:active > [data-era-press-content] {
+		translate: var(--era-press-effective-x, var(--era-press-sink-x))
+			var(--era-press-effective-y, var(--era-press-sink-y));
 	}
 }
 ```
@@ -1163,8 +1202,8 @@ Declared in `index.css`.
 ## bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)
 
 Surface fills — bg-well is the surface's own resting fill (pairs with
-shadow-well for recessed chrome), bg-elevated the raised tier (pairs with
-shadow-lg + glass-blur for floating chrome), bg-highlight the transient
+shadow-well for recessed chrome), bg-elevated the raised tier,
+bg-highlight the transient
 hover/focus/keyboard wash (pairs with shadow-highlight; latched states
 stay on opaque bg-hover), bg-overlay the modal scrim.
 

package/dist/generated-docs/llms.txt

@@ -101,7 +101,10 @@ Classes, not components — they need no import beyond the stylesheet. Reach for
 - `era-ink-center` — on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim.
 - `era-token-ink` — the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there.
 - `era-label-ink` — the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip).
-- `glass-blur` — the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
+- `surface-backdrop` — the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.
+- `material-popover` — a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.
+- `material-panel` — a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.
+- `pressable` — the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.
 - `tier-icon · tier-pill · tier-chip · tier-control · tier-bar` — BOUNDED GEOMETRY — height and radius are one decision.
 - `h-line` — the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box.
 - `era-track-well` — instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right.

package/dist/generated-docs/manifest.json

@@ -52,7 +52,7 @@
       "slug": "utilities",
       "title": "Utilities",
       "summary": "The CSS classes era ships alongside the components — links, ink-centred text, shimmer, hidden scrollbars.",
-      "tokenEstimate": 13623,
+      "tokenEstimate": 13846,
       "sections": [
         "Overview",
         "era-interactive",
@@ -64,7 +64,10 @@
         "era-ink-center",
         "era-token-ink",
         "era-label-ink",
-        "glass-blur",
+        "surface-backdrop",
+        "material-popover",
+        "material-panel",
+        "pressable",
         "tier-icon · tier-pill · tier-chip · tier-control · tier-bar",
         "h-line",
         "era-track-well",
@@ -1120,14 +1123,44 @@
       "css": "@utility era-label-ink {\n\tdisplay: block;\n\talign-content: center;\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
     {
-      "name": "glass-blur",
+      "name": "surface-backdrop",
       "names": [
-        "glass-blur"
+        "surface-backdrop"
       ],
       "file": "index.css",
-      "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
-      "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.\n\nIt lives HERE rather than in surfaces/glass.css, where a surface's own\nchrome would naturally sit, because glass.css is imported into a cascade\nlayer and `@utility` cannot be nested inside one. Surface-scoped RULES stay\nin their surface file; surface-scoped UTILITIES have to come out.",
-      "css": "@utility` cannot be nested inside one. Surface-scoped RULES stay\n * in their surface file; surface-scoped UTILITIES have to come out.\n *\n * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it\n * applies only inside a data-surface=\"glass\" subtree and is inert elsewhere,\n * so it is safe to leave on a panel that renders under every surface. */\n@utility glass-blur {\n\t[data-surface='glass'] & {\n\t\tbackdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t\t-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t}\n}"
+      "useCase": "the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.",
+      "description": "",
+      "css": "@utility surface-backdrop {\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "material-popover",
+      "names": [
+        "material-popover"
+      ],
+      "file": "index.css",
+      "useCase": "a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.",
+      "description": "",
+      "css": "@utility material-popover {\n\tbackground-color: var(--era-surface-bg-elevated);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "material-panel",
+      "names": [
+        "material-panel"
+      ],
+      "file": "index.css",
+      "useCase": "a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.",
+      "description": "",
+      "css": "@utility material-panel {\n\tbackground-color: var(--era-surface-bg);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "pressable",
+      "names": [
+        "pressable"
+      ],
+      "file": "index.css",
+      "useCase": "the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.",
+      "description": "",
+      "css": "@utility pressable {\n\t&:active {\n\t\tbox-shadow: var(--era-shadow-pressed);\n\t}\n\n\t&:active > [data-era-press-content] {\n\t\ttranslate: var(--era-press-effective-x, var(--era-press-sink-x))\n\t\t\tvar(--era-press-effective-y, var(--era-press-sink-y));\n\t}\n}"
     },
     {
       "name": "tier-icon",
@@ -1381,7 +1414,7 @@
         "border-overlay"
       ],
       "file": "index.css",
-      "description": "Surface fills — bg-well is the surface's own resting fill (pairs with\nshadow-well for recessed chrome), bg-elevated the raised tier (pairs with\nshadow-lg + glass-blur for floating chrome), bg-highlight the transient\nhover/focus/keyboard wash (pairs with shadow-highlight; latched states\nstay on opaque bg-hover), bg-overlay the modal scrim.",
+      "description": "Surface fills — bg-well is the surface's own resting fill (pairs with\nshadow-well for recessed chrome), bg-elevated the raised tier,\nbg-highlight the transient\nhover/focus/keyboard wash (pairs with shadow-highlight; latched states\nstay on opaque bg-hover), bg-overlay the modal scrim.",
       "css": "@theme inline {\n\t--color-well: var(--era-surface-bg);\n\t--color-elevated: var(--era-surface-bg-elevated);\n\t--color-highlight: var(--era-highlight);\n\t--color-overlay: var(--era-overlay-bg);\n}"
     },
     {

package/dist/generated-docs/utilities.json

@@ -91,14 +91,44 @@
       "css": "@utility era-label-ink {\n\tdisplay: block;\n\talign-content: center;\n\tline-height: 1;\n\ttext-box: trim-both ex alphabetic;\n}"
     },
     {
-      "name": "glass-blur",
+      "name": "surface-backdrop",
       "names": [
-        "glass-blur"
+        "surface-backdrop"
       ],
       "file": "index.css",
-      "useCase": "the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface=\"glass\" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.",
-      "description": "Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter\nis a registered utility, gated to glass subtrees.\n\nIt lives HERE rather than in surfaces/glass.css, where a surface's own\nchrome would naturally sit, because glass.css is imported into a cascade\nlayer and `@utility` cannot be nested inside one. Surface-scoped RULES stay\nin their surface file; surface-scoped UTILITIES have to come out.",
-      "css": "@utility` cannot be nested inside one. Surface-scoped RULES stay\n * in their surface file; surface-scoped UTILITIES have to come out.\n *\n * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it\n * applies only inside a data-surface=\"glass\" subtree and is inert elsewhere,\n * so it is safe to leave on a panel that renders under every surface. */\n@utility glass-blur {\n\t[data-surface='glass'] & {\n\t\tbackdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t\t-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));\n\t}\n}"
+      "useCase": "the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.",
+      "description": "",
+      "css": "@utility surface-backdrop {\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "material-popover",
+      "names": [
+        "material-popover"
+      ],
+      "file": "index.css",
+      "useCase": "a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.",
+      "description": "",
+      "css": "@utility material-popover {\n\tbackground-color: var(--era-surface-bg-elevated);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "material-panel",
+      "names": [
+        "material-panel"
+      ],
+      "file": "index.css",
+      "useCase": "a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.",
+      "description": "",
+      "css": "@utility material-panel {\n\tbackground-color: var(--era-surface-bg);\n\tbox-shadow: var(--era-shadow-lg);\n\tbackdrop-filter: var(--era-backdrop-filter);\n\t-webkit-backdrop-filter: var(--era-backdrop-filter);\n}"
+    },
+    {
+      "name": "pressable",
+      "names": [
+        "pressable"
+      ],
+      "file": "index.css",
+      "useCase": "the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.",
+      "description": "",
+      "css": "@utility pressable {\n\t&:active {\n\t\tbox-shadow: var(--era-shadow-pressed);\n\t}\n\n\t&:active > [data-era-press-content] {\n\t\ttranslate: var(--era-press-effective-x, var(--era-press-sink-x))\n\t\t\tvar(--era-press-effective-y, var(--era-press-sink-y));\n\t}\n}"
     },
     {
       "name": "tier-icon",
@@ -352,7 +382,7 @@
         "border-overlay"
       ],
       "file": "index.css",
-      "description": "Surface fills — bg-well is the surface's own resting fill (pairs with\nshadow-well for recessed chrome), bg-elevated the raised tier (pairs with\nshadow-lg + glass-blur for floating chrome), bg-highlight the transient\nhover/focus/keyboard wash (pairs with shadow-highlight; latched states\nstay on opaque bg-hover), bg-overlay the modal scrim.",
+      "description": "Surface fills — bg-well is the surface's own resting fill (pairs with\nshadow-well for recessed chrome), bg-elevated the raised tier,\nbg-highlight the transient\nhover/focus/keyboard wash (pairs with shadow-highlight; latched states\nstay on opaque bg-hover), bg-overlay the modal scrim.",
       "css": "@theme inline {\n\t--color-well: var(--era-surface-bg);\n\t--color-elevated: var(--era-surface-bg-elevated);\n\t--color-highlight: var(--era-highlight);\n\t--color-overlay: var(--era-overlay-bg);\n}"
     },
     {

package/dist/generated-docs/utilities.md

@@ -73,7 +73,10 @@ source uses it where a name exists.
 | `era-ink-center` | on a native single-line <input> (or the text layer that must mirror one) inside a fixed-height field — never alongside era-text-trim. |
 | `era-token-ink` | the ink centring for a token pill — a badge, a KV value, any short caps-or-digits label in a fixed-height box, CENTRED horizontally and with no icon sibling. For a left-aligned sentence-case label use era-label-ink; when an icon really must sit beside the text, see the note there. |
 | `era-label-ink` | the ink centring for a fixed-height control holding ONE line of sentence-case text and no icon — a menu item, a nav trigger, a button label. Never alongside `truncate` (the trimmed box becomes the clip). |
-| `glass-blur` | the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface. |
+| `surface-backdrop` | the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface. |
+| `material-popover` | a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically. |
+| `material-panel` | a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically. |
+| `pressable` | the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale. |
 | `tier-icon` `tier-pill` `tier-chip` `tier-control` `tier-bar` | — |
 | `h-line` | the height of one line of the element's own text — a skeleton standing in for a line, a spacer that must match a line box. |
 | `era-track-well` | instead of `shadow-well` on a track whose value is painted by a child that covers the box — a progress/meter/slider track, a custom gauge. For a well holding ordinary content, `shadow-well` is still right. |
@@ -455,31 +458,64 @@ Declared in `index.css`.
 }
 ```
 
-## glass-blur
+## surface-backdrop
 
-**Use it for:** the backdrop blur for a floating panel (popover, dialog, taskbar) — it applies only inside a data-surface="glass" subtree and is inert elsewhere, so it is safe to leave on a panel that renders under every surface.
+**Use it for:** the surface-aware backdrop treatment without choosing a fill or relief. Prefer material-popover/material-panel when the element is a complete surface.
 
-Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
-is a registered utility, gated to glass subtrees.
+Declared in `index.css`.
+
+```css
+@utility surface-backdrop {
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+```
+
+## material-popover
+
+**Use it for:** a floating transient surface: menus, popovers, tooltips, pickers, toasts. Binds its raised fill, floating relief, and backdrop treatment atomically.
+
+Declared in `index.css`.
+
+```css
+@utility material-popover {
+	background-color: var(--era-surface-bg-elevated);
+	box-shadow: var(--era-shadow-lg);
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+```
+
+## material-panel
+
+**Use it for:** a floating persistent surface: dialogs, sheets, panes, inspectors. Binds its resting fill, floating relief, and backdrop treatment atomically.
+
+Declared in `index.css`.
+
+```css
+@utility material-panel {
+	background-color: var(--era-surface-bg);
+	box-shadow: var(--era-shadow-lg);
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+```
 
-It lives HERE rather than in surfaces/glass.css, where a surface's own
-chrome would naturally sit, because glass.css is imported into a cascade
-layer and `@utility` cannot be nested inside one. Surface-scoped RULES stay
-in their surface file; surface-scoped UTILITIES have to come out.
+## pressable
+
+**Use it for:** the physical press contract on a control whose direct content plane is marked data-era-press-content. The surface owns relief/travel; the component may scale travel with --era-press-scale.
 
 Declared in `index.css`.
 
 ```css
-@utility` cannot be nested inside one. Surface-scoped RULES stay
- * in their surface file; surface-scoped UTILITIES have to come out.
- *
- * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it
- * applies only inside a data-surface="glass" subtree and is inert elsewhere,
- * so it is safe to leave on a panel that renders under every surface. */
-@utility glass-blur {
-	[data-surface='glass'] & {
-		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+@utility pressable {
+	&:active {
+		box-shadow: var(--era-shadow-pressed);
+	}
+
+	&:active > [data-era-press-content] {
+		translate: var(--era-press-effective-x, var(--era-press-sink-x))
+			var(--era-press-effective-y, var(--era-press-sink-y));
 	}
 }
 ```
@@ -1013,8 +1049,8 @@ Declared in `index.css`.
 ## bg-well · text-well · border-well · bg-elevated · text-elevated · border-elevated · bg-highlight · text-highlight · … (12 in all)
 
 Surface fills — bg-well is the surface's own resting fill (pairs with
-shadow-well for recessed chrome), bg-elevated the raised tier (pairs with
-shadow-lg + glass-blur for floating chrome), bg-highlight the transient
+shadow-well for recessed chrome), bg-elevated the raised tier,
+bg-highlight the transient
 hover/focus/keyboard wash (pairs with shadow-highlight; latched states
 stay on opaque bg-hover), bg-overlay the modal scrim.
 

package/dist/os/notification-center.svelte

@@ -51,7 +51,7 @@
 			transition:eraFly={{ x: 320, duration: 200 }}
 			style:top="{pm.insets.top}px"
 			style:bottom="{pm.insets.bottom}px"
-			class="absolute right-0 flex w-80 flex-col bg-well shadow-lg glass-blur"
+			class="absolute right-0 flex w-80 flex-col material-panel"
 		>
 			<header
 				class="flex shrink-0 items-center gap-gutter border-b border-divider-faded px-card py-inset-chip"

package/dist/os/taskbar.svelte

@@ -210,7 +210,7 @@
 		// shadow-lg only when FLOATING. Flush, the bar's edge is its own
 		// border-b/border-t against the content it docks beside, and the ring would
 		// double it on exactly that side — the one edge a flush bar exposes.
-		'absolute flex h-bar items-center gap-gutter bg-elevated px-gutter glass-blur',
+		'absolute flex h-bar items-center gap-gutter bg-elevated px-gutter surface-backdrop',
 		floating && 'shadow-lg',
 		floating
 			? cn('inset-x-gutter rounded-bar', position === 'top' ? 'top-gutter' : 'bottom-gutter')

package/dist/os/toast.svelte

@@ -16,7 +16,7 @@
 </script>
 
 <div
-	class="pointer-events-auto relative flex w-80 gap-inset-chip overflow-hidden rounded-bar bg-elevated p-card shadow-lg glass-blur"
+	class="pointer-events-auto relative flex w-80 gap-inset-chip overflow-hidden rounded-bar material-popover p-card"
 >
 	<span class={cn('absolute inset-y-menu left-menu w-1 rounded-full', accent[n.tone])}></span>
 	{#if n.icon}

package/dist/styles/index.css

@@ -36,10 +36,9 @@
  * surfaces so a [data-surface] block can override --era-ease as a delta.
  * UNLAYERED: carries the prefers-reduced-motion !important — see above. */
 @import './motion.css';
-/* Surfaces: base contract first, then each surface's deltas. Order matters —
- * the base block and a surface's block target the same element, and the
- * surface's declarations must win. Same layer, so source order still decides. */
-@import './surfaces/base.css' layer(era.tokens);
+/* Material contract first, then complete surface implementations. */
+@import './surfaces/contract.css' layer(era.tokens);
+@import './surfaces/flat.css' layer(era.tokens);
 @import './surfaces/glass.css' layer(era.tokens);
 @import './surfaces/bevel.css' layer(era.tokens);
 /* UNLAYERED: carries the font-axis !important — see above. */
@@ -443,21 +442,43 @@
 	text-box: trim-both ex alphabetic;
 }
 
-/* Tailwind v4 cannot resolve var() inside backdrop-blur-[], so the filter
- * is a registered utility, gated to glass subtrees.
- *
- * It lives HERE rather than in surfaces/glass.css, where a surface's own
- * chrome would naturally sit, because glass.css is imported into a cascade
- * layer and `@utility` cannot be nested inside one. Surface-scoped RULES stay
- * in their surface file; surface-scoped UTILITIES have to come out.
- *
- * @use the backdrop blur for a floating panel (popover, dialog, taskbar) — it
- * applies only inside a data-surface="glass" subtree and is inert elsewhere,
- * so it is safe to leave on a panel that renders under every surface. */
-@utility glass-blur {
-	[data-surface='glass'] & {
-		backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
-		-webkit-backdrop-filter: blur(var(--era-blur)) saturate(var(--era-saturate));
+/* MATERIAL ROLES — components choose meaning; surfaces choose appearance. */
+/* @use the surface-aware backdrop treatment without choosing a fill or relief.
+ * Prefer material-popover/material-panel when the element is a complete surface. */
+@utility surface-backdrop {
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+
+/* @use a floating transient surface: menus, popovers, tooltips, pickers, toasts.
+ * Binds its raised fill, floating relief, and backdrop treatment atomically. */
+@utility material-popover {
+	background-color: var(--era-surface-bg-elevated);
+	box-shadow: var(--era-shadow-lg);
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+
+/* @use a floating persistent surface: dialogs, sheets, panes, inspectors.
+ * Binds its resting fill, floating relief, and backdrop treatment atomically. */
+@utility material-panel {
+	background-color: var(--era-surface-bg);
+	box-shadow: var(--era-shadow-lg);
+	backdrop-filter: var(--era-backdrop-filter);
+	-webkit-backdrop-filter: var(--era-backdrop-filter);
+}
+
+/* @use the physical press contract on a control whose direct content plane is
+ * marked data-era-press-content. The surface owns relief/travel; compact
+ * components select the compact travel primitives as their effective values. */
+@utility pressable {
+	&:active {
+		box-shadow: var(--era-shadow-pressed);
+	}
+
+	&:active > [data-era-press-content] {
+		translate: var(--era-press-effective-x, var(--era-press-sink-x))
+			var(--era-press-effective-y, var(--era-press-sink-y));
 	}
 }
 
@@ -758,8 +779,8 @@
 	--shadow-pressed: var(--era-shadow-pressed);
 	--shadow-highlight: var(--era-highlight-shadow);
 	/* Surface fills — bg-well is the surface's own resting fill (pairs with
-	 * shadow-well for recessed chrome), bg-elevated the raised tier (pairs with
-	 * shadow-lg + glass-blur for floating chrome), bg-highlight the transient
+	 * shadow-well for recessed chrome), bg-elevated the raised tier,
+	 * bg-highlight the transient
 	 * hover/focus/keyboard wash (pairs with shadow-highlight; latched states
 	 * stay on opaque bg-hover), bg-overlay the modal scrim. */
 	--color-well: var(--era-surface-bg);

package/dist/styles/motion.css

@@ -22,7 +22,7 @@
  *
  * Surfaces may override --era-ease (or a component-scoped ease token) as a
  * delta — motion.css is imported BEFORE surfaces/, so a [data-surface] block
- * wins. See surfaces/base.css for the surface-animation recipe.
+ * wins. Surface implementations may override only the easing primitive.
  */
 
 /* Named easing curves — design constants, referenced by the levels below. */

package/dist/styles/prose.css

@@ -372,7 +372,7 @@
 /* NO ::selection rule here, deliberately.
  *
  * era owns text selection as a surface token contract — --era-selection-bg /
- * -fg / -shadow (surfaces/base.css), which is how flat gets inverse video,
+ * -fg / -shadow (surfaces/contract.css), which is how flat gets inverse video,
  * glass a glowing wash, and bevel an opaque accent bar. This file used to
  * override it with `background: var(--color-4)` and no `color`, which threw
  * all of that away AND left body text on a mid-scale grey: the band barely

package/dist/styles/surfaces/bevel.css

@@ -23,6 +23,10 @@
  * shading reads as lighting, not tilt. Do not remove it.
  */
 [data-surface='bevel'] {
+	--era-border-color: transparent;
+	--era-divider-color: var(--color-border);
+	--era-surface-bg: var(--color-2);
+	--era-field-bg: var(--color-hover);
 	/* Horizontal cast ratio — the light-direction knob (see header). Below 1
 	 * rotates the light toward the top; the vertical cast stays a full pixel. */
 	--era-bevel-side: 0.6;
@@ -46,7 +50,7 @@
 			),
 		var(--era-bevel-rim);
 	/* ELEVATION IS A CHISEL, NOT A TONE — bevel's whole premise, and the reason
-	 * it opts out of the raised tier's tone step. base now mixes the elevated
+	 * it opts out of the flat implementation's raised-tier tone step. Flat mixes the elevated
 	 * fill 6% toward --color-bright so flat can separate a floating panel
 	 * without drawing an edge; bevel already separates one with the slab below,
 	 * and a panel that was ALSO a lighter grey would read as two mechanisms
@@ -93,19 +97,28 @@
 			),
 		var(--era-bevel-rim);
 	--era-shadow-pressed: var(--era-shadow-well);
+	--era-highlight: light-dark(
+		color-mix(in oklch, var(--color-bright) 9%, transparent),
+		color-mix(in oklch, var(--color-bright) 8%, transparent)
+	);
+	--era-fill: var(--era-highlight);
 	/* The BOX never moves on press, so releasing doesn't pop the button up.
 	 * Instead the CONTENT sinks straight DOWN 1px while
 	 * the frame holds still, so the icon/label depresses like a Win95 keycap
 	 * travelling into its socket. An earlier version also nudged it 1px RIGHT (into
 	 * the sunken bottom-right corner) but the sideways drift read as the glyph
 	 * sliding off rather than pressing in — vertical-only is the truer key press.
-	 * The smallest icon buttons override this to half — see below the block. */
+	 * Compact controls select the half-step travel from the same contract. */
 	--era-press-sink-x: 0px;
 	--era-press-sink-y: 1px;
+	--era-press-sink-compact-x: 0px;
+	--era-press-sink-compact-y: 0.5px;
 	/* Floating panels wear a 2-layer chisel frame; row highlights inset past
 	 * it with a concentric radius (square under data-corners="square", as
 	 * the era had it — Win95 drew its selection bar inside the border). */
 	--era-panel-inset: 2px;
+	--era-overlay-bg: color-mix(in oklch, var(--color-1) 60%, transparent);
+	--era-backdrop-filter: none;
 	/* Text selection is the period highlight bar: hard, fully opaque, in the
 	 * ACCENT — Win95 painted selections with the system highlight color, not
 	 * inverse video. Under the neutral theme primary is the fg step, so it
@@ -113,21 +126,5 @@
 	 * colored selection. Crisp by definition: no glow, no shadow. */
 	--era-selection-bg: var(--color-primary);
 	--era-selection-fg: var(--color-primary-fg);
-}
-
-/*
- * SMALL-BUTTON SINK — the depression, scaled to the keycap.
- *
- * The 1px content sink is tuned for a default (h-control) button, where it is ~4% of
- * the box. On the h-icon tier — size="xs" and size="icon", the 14px squares a
- * pane's close X is built from — that same 1px is ~7% of the box and the glyph,
- * which fills the button, visibly drops too far on press. Half the sink
- * (proportional: 14/24 ≈ 0.58, rounded to 0.5) puts the small keycap's travel
- * back in step with the large one. Overriding the token (not the transform)
- * means the existing `[&:active>*]` rule keeps applying it; the content wrapper
- * inherits the value.
- */
-[data-surface='bevel'] button[data-size='xs'],
-[data-surface='bevel'] button[data-size='icon'] {
-	--era-press-sink-y: 0.5px;
+	--era-selection-shadow: none;
 }