@filip.mazev/blocks 1.4.3 → 1.4.4

package/effects/effects.css

@@ -1,147 +1,226 @@
 /* The material inherits Blocks colors, spacing, radius and elevation. No theme or palette is defined here. */
 :where([data-bx-surface]) {
-  border: 1px solid var(--bx-glass-edge, var(--bx-border-subtle, GrayText));
-  border-radius: var(--bx-glass-radius, var(--bx-rounded-lg, 0));
+    border: 1px solid var(--bx-glass-edge, var(--bx-border-subtle, GrayText));
+    border-radius: var(--bx-glass-radius, var(--bx-rounded-lg, 0));
 }
+
 [data-bx-surface] {
-  isolation: isolate;
-  background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important;
-  -webkit-backdrop-filter: blur(var(--bx-glass-blur, var(--bx-glass-material-blur, 10px))) saturate(1.15);
-  backdrop-filter: blur(var(--bx-glass-blur, var(--bx-glass-material-blur, 10px))) saturate(1.15);
-  box-shadow: var(--bx-glass-shadow, 0 2px 6px rgb(0 0 0 / .08));
-  color: var(--bx-glass-text, var(--bx-text-primary, CanvasText));
-  border-color: var(--bx-glass-edge, var(--bx-border-subtle, GrayText));
-  --bx-glass-material-blur: 10px;
-  --bx-glass-material-opacity: .4;
-}
-[data-bx-surface="frosted"] { --bx-glass-material-blur: 24px; --bx-glass-material-opacity: .65; }
+    isolation: isolate;
+    background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important;
+    -webkit-backdrop-filter: blur(var(--bx-glass-blur, var(--bx-glass-material-blur, 10px))) saturate(1.15);
+    backdrop-filter: blur(var(--bx-glass-blur, var(--bx-glass-material-blur, 10px))) saturate(1.15);
+    box-shadow: var(--bx-glass-shadow, 0 2px 6px rgb(0 0 0 / .08));
+    color: var(--bx-glass-text, var(--bx-text-primary, CanvasText));
+    border-color: var(--bx-glass-edge, var(--bx-border-subtle, GrayText));
+    --bx-glass-material-blur: calc(4px + 24px * var(--bx-glassiness, .5) * var(--bx-glassiness, .5));
+    --bx-glass-material-opacity: calc(.06 + 1.02 * var(--bx-glassiness, .5) - .28 * var(--bx-glassiness, .5) * var(--bx-glassiness, .5));
+}
+
 .bx-glass-decoration {
-  position: absolute;
-  inset: 0;
-  display: block;
-  z-index: -1;
-  pointer-events: none;
-  overflow: hidden;
-  border-radius: inherit;
-  box-sizing: border-box;
-  background: transparent;
-  opacity: var(--bx-glass-decoration-opacity, 1);
-}
+    position: absolute;
+    inset: 0;
+    display: block;
+    z-index: -1;
+    pointer-events: none;
+    overflow: hidden;
+    border-radius: inherit;
+    box-sizing: border-box;
+    background: transparent;
+    opacity: var(--bx-glass-decoration-opacity, 1);
+}
+
 /* Keep the clipping box still: transforming it would enlarge an ancestor's scrollable area. */
-.bx-glass-decoration > .bx-glass-light,
+.bx-glass-decoration>.bx-glass-light,
 .bx-glass-decoration::before,
 .bx-glass-decoration::after {
-  transform-origin: var(--bx-glass-light-x, 50%) var(--bx-glass-light-y, 50%);
-  transform: scale(calc(1 + var(--bx-glass-press, 0) * .012), calc(1 - var(--bx-glass-press, 0) * .018));
+    transform-origin: var(--bx-glass-light-x, 50%) var(--bx-glass-light-y, 50%);
+    transform: scale(calc(1 + var(--bx-glass-press, 0) * .012), calc(1 - var(--bx-glass-press, 0) * .018));
 }
+
 @supports (background: color-mix(in srgb, white, transparent)) {
-  [data-bx-surface] {
-    background: color-mix(in srgb, var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) calc(max(var(--bx-glass-min-opacity, 0), var(--bx-glass-opacity, var(--bx-glass-material-opacity, .4))) * 100%), transparent) !important;
-  }
-  .bx-glass-decoration {
-    box-shadow: inset 0 1px 0 color-mix(in srgb, white calc(var(--bx-glass-rim-opacity, 1) * 10%), transparent),
-      inset 0 -1px 0 color-mix(in srgb, black calc(var(--bx-glass-rim-opacity, 1) * 6%), transparent);
-  }
-}
+    [data-bx-surface] {
+        background: color-mix(in srgb, var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) calc(max(var(--bx-glass-min-opacity, 0), var(--bx-glass-opacity, var(--bx-glass-material-opacity, .5))) * 100%), transparent) !important;
+    }
+
+    .bx-glass-decoration {
+        box-shadow: inset 0 1px 0 color-mix(in srgb, white calc(var(--bx-glass-rim-opacity, 1) * 10%), transparent),
+            inset 0 -1px 0 color-mix(in srgb, black calc(var(--bx-glass-rim-opacity, 1) * 6%), transparent);
+    }
+}
+
 /* Nested glass keeps its tint and reflection; only the outer surface performs a backdrop pass. */
-[data-bx-surface] [data-bx-surface] { -webkit-backdrop-filter: none; backdrop-filter: none; }
-/* Fading overlays deliberately keep an opaque backing, including at rest. */
-[data-bx-motion-material="solid"] {
-  background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important;
-  -webkit-backdrop-filter: none;
-  backdrop-filter: none;
+[data-bx-surface] [data-bx-surface] {
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
 }
+
 .bx-glass-light {
-  position: absolute;
-  display: block;
-  inset: 0;
-  pointer-events: none;
-  border-radius: inherit;
-  opacity: .04;
-  background: radial-gradient(ellipse at 25% 0%, white, transparent 68%);
-}
-.bx-glass-ambient, .bx-glass-contribution {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-}
+    position: absolute;
+    display: block;
+    inset: 0;
+    pointer-events: none;
+    border-radius: inherit;
+    opacity: .04;
+    background: radial-gradient(ellipse at 25% 0%, white, transparent 68%);
+}
+
+.bx-glass-ambient,
+.bx-glass-contribution {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+}
+
 .bx-glass-rim {
-  position: absolute;
-  /* The runtime aligns this box with the host's border, including asymmetric borders. */
-  inset: 0;
-  z-index: 1;
-  border-radius: inherit;
-  pointer-events: none;
-  padding: 1px;
-  box-sizing: border-box;
-  display: none;
-  opacity: var(--bx-glass-rim-visibility, 1);
-}
+    position: absolute;
+    /* The runtime aligns this box with the host's border, including asymmetric borders. */
+    inset: 0;
+    z-index: 1;
+    border-radius: inherit;
+    pointer-events: none;
+    padding: 2px;
+    box-sizing: border-box;
+    display: none;
+    opacity: var(--bx-glass-rim-visibility, 1);
+}
+
+.bx-glass-environment {
+    transition: opacity 180ms ease-out;
+}
+
+[data-bx-reduced-motion="true"] > .bx-glass-rim > .bx-glass-environment {
+    transition: none;
+}
+
+@supports (-webkit-mask-composite: xor) {
+    .bx-glass-rim {
+        display: block;
+        -webkit-mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
+        -webkit-mask-composite: xor;
+    }
+}
+
 @supports (mask-composite: exclude) {
-  .bx-glass-rim {
-    display: block;
-    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    mask-composite: exclude;
-  }
+    .bx-glass-rim {
+        display: block;
+        mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
+        mask-composite: exclude;
+    }
 }
+
 /* Enhanced mode adds a depth-colored reflection and a narrow specular edge, with no extra backdrop filter. */
-[data-bx-glass-renderer="enhanced"] > .bx-glass-decoration::before,
-[data-bx-glass-renderer="enhanced"] > .bx-glass-decoration::after {
-  content: '';
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
-  pointer-events: none;
-}
-[data-bx-glass-renderer="enhanced"] > .bx-glass-decoration::before {
-  background: radial-gradient(ellipse at var(--bx-glass-reflection-x, 50%) var(--bx-glass-reflection-y, 50%), var(--bx-glass-reflection-color, transparent), transparent 75%);
-  opacity: var(--bx-glass-reflection-strength, 0);
-}
+[data-bx-glass-renderer="enhanced"]>.bx-glass-decoration::before,
+[data-bx-glass-renderer="enhanced"]>.bx-glass-decoration::after {
+    content: '';
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    pointer-events: none;
+}
+
+[data-bx-glass-renderer="enhanced"]>.bx-glass-decoration::before {
+    background: radial-gradient(ellipse at var(--bx-glass-reflection-x, 50%) var(--bx-glass-reflection-y, 50%), var(--bx-glass-reflection-color, transparent), transparent 75%);
+    opacity: var(--bx-glass-reflection-strength, 0);
+}
+
 @supports (mask-composite: exclude) {
-  [data-bx-glass-renderer="enhanced"] > .bx-glass-decoration::after {
-    padding: 1px;
-    background: radial-gradient(ellipse at 25% 0%, white, transparent 65%);
-    opacity: calc(.04 * var(--bx-glass-rim-opacity, .5));
-    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-    mask-composite: exclude;
-  }
-}
-[data-bx-surface]:focus-visible { outline: 2px solid var(--bx-border-brand, Highlight); outline-offset: -2px; }
-[data-bx-surface="solid"],
+    [data-bx-glass-renderer="enhanced"]>.bx-glass-decoration::after {
+        padding: 1px;
+        background: radial-gradient(ellipse at 25% 0%, white, transparent 65%);
+        opacity: calc(.04 * var(--bx-glass-rim-opacity, .5));
+        mask: linear-gradient(#ffffff 0 0) content-box, linear-gradient(#ffffff 0 0);
+        mask-composite: exclude;
+    }
+}
+
+[data-bx-surface]:focus-visible {
+    outline: 2px solid var(--bx-border-brand, Highlight);
+    outline-offset: -2px;
+}
+
 [data-bx-surface][data-bx-reduced-transparency="true"] {
-  background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important;
-  -webkit-backdrop-filter: none; backdrop-filter: none;
-}
-[data-bx-surface="solid"] > .bx-glass-decoration::before,
-[data-bx-surface="solid"] > .bx-glass-decoration::after,
-[data-bx-reduced-transparency="true"] > .bx-glass-decoration::before,
-[data-bx-reduced-transparency="true"] > .bx-glass-decoration::after { display: none; }
-[data-bx-surface="solid"] > .bx-glass-decoration > .bx-glass-light,
-[data-bx-reduced-transparency="true"] > .bx-glass-decoration > .bx-glass-light { opacity: .025; }
+    background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important;
+    -webkit-backdrop-filter: none;
+    backdrop-filter: none;
+}
+
+[data-bx-reduced-transparency="true"]>.bx-glass-decoration::before,
+[data-bx-reduced-transparency="true"]>.bx-glass-decoration::after {
+    display: none;
+}
+
+[data-bx-reduced-transparency="true"]>.bx-glass-decoration>.bx-glass-light {
+    opacity: .025;
+}
+
 @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
-  [data-bx-surface] { background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important; }
+    [data-bx-surface] {
+        background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important;
+    }
 }
+
 @media (prefers-reduced-transparency: reduce) {
-  [data-bx-surface]:not([data-bx-reduced-transparency="false"]) {
-    background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important; -webkit-backdrop-filter: none; backdrop-filter: none;
-  }
-}
-[data-bx-reduced-motion="true"] > .bx-glass-decoration > .bx-glass-light,
-[data-bx-reduced-motion="true"] > .bx-glass-decoration::before,
-[data-bx-reduced-motion="true"] > .bx-glass-decoration::after { transform: none; }
+    [data-bx-surface]:not([data-bx-reduced-transparency="false"]) {
+        background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important;
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+    }
+}
+
+[data-bx-reduced-motion="true"]>.bx-glass-decoration>.bx-glass-light,
+[data-bx-reduced-motion="true"]>.bx-glass-decoration::before,
+[data-bx-reduced-motion="true"]>.bx-glass-decoration::after {
+    transform: none;
+}
+
 @media (prefers-reduced-motion: reduce) {
-  [data-bx-surface]:not([data-bx-reduced-motion="false"]) > .bx-glass-decoration > .bx-glass-light,
-  [data-bx-surface]:not([data-bx-reduced-motion="false"]) > .bx-glass-decoration::before,
-  [data-bx-surface]:not([data-bx-reduced-motion="false"]) > .bx-glass-decoration::after { transform: none; }
-}
+
+    [data-bx-surface]:not([data-bx-reduced-motion="false"])>.bx-glass-decoration>.bx-glass-light,
+    [data-bx-surface]:not([data-bx-reduced-motion="false"])>.bx-glass-decoration::before,
+    [data-bx-surface]:not([data-bx-reduced-motion="false"])>.bx-glass-decoration::after {
+        transform: none;
+    }
+}
+
 @media (prefers-contrast: more) {
-  [data-bx-surface] { border-color: currentColor; }
-  [data-bx-surface] { background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
-  .bx-glass-rim, .bx-glass-light, .bx-glass-ambient, .bx-glass-decoration::before, .bx-glass-decoration::after { display: none; }
-}
+    [data-bx-surface] {
+        border-color: currentColor;
+    }
+
+    [data-bx-surface] {
+        background: var(--bx-glass-surface, var(--bx-bg-surface, Canvas)) !important;
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+    }
+
+    .bx-glass-rim,
+    .bx-glass-light,
+    .bx-glass-ambient,
+    .bx-glass-decoration::before,
+    .bx-glass-decoration::after {
+        display: none;
+    }
+}
+
 @media (forced-colors: active) {
-  [data-bx-surface] { color: ButtonText; border: 1px solid ButtonText; box-shadow: none; }
-  [data-bx-surface] { background: Canvas !important; -webkit-backdrop-filter: none; backdrop-filter: none; }
-  .bx-glass-rim, .bx-glass-light, .bx-glass-ambient, .bx-glass-decoration::before, .bx-glass-decoration::after { display: none; }
+    [data-bx-surface] {
+        color: ButtonText;
+        border: 1px solid ButtonText;
+        box-shadow: none;
+    }
+
+    [data-bx-surface] {
+        background: Canvas !important;
+        -webkit-backdrop-filter: none;
+        backdrop-filter: none;
+    }
+
+    .bx-glass-rim,
+    .bx-glass-light,
+    .bx-glass-ambient,
+    .bx-glass-decoration::before,
+    .bx-glass-decoration::after {
+        display: none;
+    }
 }

package/effects/runtime/README.md

@@ -13,7 +13,7 @@ import '@filip.mazev/blocks/effects/effects.css';
 import { configureAppearance, mountSurface, createGlassTransition } from '@filip.mazev/blocks/effects/runtime';
 
 const config = configureAppearance(document.documentElement, {
-  material: 'glass', blur: 10, tint: .4,
+  glassiness: 0.5,
   quality: 'auto',
 });
 const buttonSkin = mountSurface(button);
@@ -22,7 +22,7 @@ const panelSkin = mountSurface(panel);
 // The application or overlay library positions the panel before this call.
 const transition = createGlassTransition(button, panel);
 await transition.enter();
-config.update({ tint: .45 }); // All existing surfaces and body-mounted overlays update.
+config.update({ glassiness: .45 }); // All existing surfaces and body-mounted overlays update.
 const result = await transition.exit();
 if (result === 'finished') panel.hidden = true;
 
@@ -36,17 +36,17 @@ transition.destroy(); buttonSkin.destroy(); panelSkin.destroy(); config.destroy(
 
 The renderer defines no brand palette or spacing system. It uses the existing Blocks semantic tokens and preserves each component's border radius, size and layout. Load the glass CSS once after your theme CSS, and set border radius on your native element when using the package outside Blocks.
 
-`mountSurface(element)` includes a default token-based border. Buttons, links, native field surfaces and actionable ARIA roles automatically illuminate their border and nearby surfaces on interaction or an active ARIA state. Decorative containers receive nearby light without their own hover effect. The default color is the theme accent, or the error color inside an invalid Blocks form field. Override `emission`/`focusEmission` for a different semantic color; `interactive` explicitly overrides automatic control/action detection.
+`mountSurface(element)` includes a default token-based border. Buttons, links, native field surfaces and actionable ARIA roles automatically illuminate their border and nearby surfaces on interaction or an active ARIA state. Decorative containers receive nearby light without their own hover effect, even when they contain a single input such as a slider. Only wrappers within `bx-form-field` infer interactivity from their input; other custom wrappers can opt in with `interactive: true`. The default color is the theme accent, or the error color inside an invalid Blocks form field. Override `emission`/`focusEmission` for a different semantic color; `interactive` explicitly overrides automatic control/action detection.
 
 | Setting | Values | Inherited CSS property |
 | --- | --- | --- |
-| `material` | `glass`, `frosted`, `solid` | root `data-bx-glass-material` |
-| `blur` | 0–40 CSS pixels | `--bx-glass-blur` |
-| `tint` | 0–1, larger means more opaque | `--bx-glass-opacity` |
+| `glassiness` | 0–1, balanced default 0.5 | `--bx-glassiness` |
 | `quality` | `auto`, `baseline`, `enhanced` | root `data-bx-glass-quality` |
 | `reducedTransparency` | boolean | root `data-bx-reduced-transparency` |
 | `reducedMotion` | boolean | root `data-bx-reduced-motion` |
 
+Glassiness controls tint and blur together. Tint is `0.06 + 1.02 × glassiness − 0.28 × glassiness²`; blur is `4 + 24 × glassiness²` CSS pixels. The minimum is nearly clear with a light blur, the midpoint uses 10 px blur and a balanced tint, and the maximum caps tint at 80% to remain glassy. Components retain their semantic minimum opacity where needed for readable controls. There are no selectable material presets or independent blur/tint options. Reduced transparency disables backdrop filtering and provides fully opaque surfaces without discarding the glassiness preference.
+
 Local color aliases preserve component intent:
 
 | Glass alias | Blocks fallback |
@@ -79,21 +79,29 @@ scene.update({ lights: [{ x: 300, y: 80, z: 220, intensity: 1 }] });
 scene.destroy();
 ```
 
-Coordinates are viewport CSS pixels. An element supplies its live bounding-box center (`offsetX`/`offsetY`, from 0 to 1, can move the source within it); a reflector uses its computed background color unless `color` is supplied. Signed `depth` places foreground and background reflection proxies relative to the glass plane. Light distance, height and falloff affect the position and strength of the highlight. Scrolling, resizing, visibility changes and explicit refreshes invalidate the scene; call `refresh()` after application-driven transforms or layout changes.
+Coordinates are viewport CSS pixels. An element supplies its live bounding-box center (`offsetX`/`offsetY`, from 0 to 1, can move the source within it); a reflector uses its computed background color unless `color` is supplied. Signed `depth` places foreground and background reflection proxies relative to the glass plane. Light distance, height and falloff affect the position and strength of the highlight. Scrolling, resizing, visibility changes and explicit refreshes invalidate the scene; call `refresh()` after application-driven transforms or layout changes. For frequent updates that only move lights, `reuseGeometry: true` in the scene options retains receiver measurements until those invalidations. Ordinary scene updates continue to remeasure receivers.
+
+Every mounted glass surface also gets subtle, localized edge colors from the visible layers around its perimeter. Different sources keep their own colors; ambient gradients crossfade beneath hover, focus, validation and explicit scene lights. The runtime samples nearby computed backgrounds and local pixels from visible images, video and canvas, including `pointer-events: none` backdrops. Hit-test order and stacking layers distinguish foreground from background; depth and distance reduce the contribution. CSS gradients are approximated from their color stops. If the browser blocks pixel access to cross-origin or tainted media, the runtime falls back to the element's computed CSS colors. Asset loads, layout/scroll changes, and visual class/style changes refresh the samples; call `refreshGlassLighting(element)` after application-driven changes to a custom surface's surroundings.
+
+Portalled overlays can call `inheritGlassLighting(overlay, trigger)` before mounting their surfaces to receive light from the trigger's context. Call the returned cleanup function after removing the overlay. Tooltips and menus use this connection to preserve dialog boundaries and receive nearby colors. Tooltips remain transparent to pointer events.
+
+For compound opaque shapes, `--bx-glass-unified-lighting: 1` exposes restrained samples of received lighting through `--bx-glass-lit-edge` and its `-top`, `-right`, `-bottom`, and `-left` variants. Tooltip bodies retain their neutral backing and use a subtle spatial rim; arrows sample their facing side instead of tinting the entire outline. Interior decorative lighting stays hidden to avoid coloring the fill or introducing seams.
 
-This is a bounded, stylized lighting model. Actual content behind glass contributes through the browser's backdrop filter. Registered foreground/background objects contribute colored reflection proxies; the package does **not** rasterize arbitrary HTML, implement ray tracing, or physically refract arbitrary page pixels. Gradient-backed reflectors should supply an explicit representative color.
+This is a bounded, stylized lighting model. The browser's backdrop filter still displays content behind glass. Raster sampling uses a shared 32-by-32 scratch buffer and caches each source across receivers and frames; the package does **not** capture or mirror the page or arbitrary DOM into a texture, implement ray tracing, or physically refract page pixels. Registered foreground/background objects remain available as explicit reflection proxies when a more deliberate scene is needed. Gradient-backed reflectors can supply an explicit representative color.
 
 ## Overlay fades
 
-Overlays fade in over 180 ms and out over 140 ms. Their dimensions, clipping and text size remain unchanged. The backing stays opaque and theme-colored both during the fade and at rest, avoiding delayed backdrop blur. Other surfaces retain their normal glass material. Reversing an active fade continues from its current opacity; the interrupted promise resolves to `cancelled`.
+Overlays fade in over 180 ms and out over 140 ms. Their dimensions, clipping and text size remain unchanged. The fade composites the material surface itself, keeping its configured blur and tint throughout. The surrounding positioning pane stays opaque so it does not create a backdrop root that cuts off the page behind the glass. Reversing an active fade continues from its current opacity; the interrupted promise resolves to `cancelled`.
 
-The transition temporarily owns `opacity`, `visibility` and the backing’s `data-bx-motion-material` attribute. The overlay positioner retains all geometry and transforms. Supply an already positioned target and destroy the transition when its overlay is removed. Both endpoints must belong to the same document. `refresh()` remains a compatibility no-op because a fade requires no geometry measurements. Version 0.1’s `createLiquidTransition` and associated type names remain deprecated aliases for `createGlassTransition`.
+The transition temporarily owns the first material surface’s `opacity` and the target’s `visibility`. If no material is present, it fades the target. The overlay positioner retains all geometry and transforms. Supply an already positioned target and destroy the transition when its overlay is removed. Both endpoints must belong to the same document. `refresh()` remains a compatibility no-op because a fade requires no geometry measurements. Version 0.1’s `createLiquidTransition` and associated type names remain deprecated aliases for `createGlassTransition`.
 
 ## Performance and accessibility
 
 - One lazy animation clock and delegated press, hover-boundary and focus handling per document. Moving the pointer within an element does not change lighting. Settled scenes schedule no animation frames.
 - At most four explicit lights and four reflectors per scene, and 24 visible surface lighting updates per frame. Interaction and active-state emitters share one delegated event stream and semantic-attribute observer; there is no observer per control.
-- Geometry is cached between invalidations and measured before a batch writes lighting values. No screenshot capture, DOM mirroring, canvas renderer, permanent animation loop or drag handling.
+- Ambient geometry/style invalidations coalesce over 180 ms. A sampling frame handles at most four receivers, yielding after about 4 ms between receivers; a single receiver/readback remains atomic. Sixteen perimeter probes discover nearby colors, and media inventories update on insertion rather than on each frame.
+- Static images and failed readbacks are cached until their assets change. Only media used by visible receivers is polled: live canvas/video checks begin at 500 ms and back off to 2 seconds while unchanged. Color-only changes reuse source bindings and geometry without hit testing; coverage or layout changes rediscover the layers. Unchanged samples do not repaint. Image/video samples respect object fit and position.
+- Each surface uses two shared ambient edge layers for a 180 ms crossfade, instead of a DOM layer and animation per sample. Semantic lighting retains its independent contributions and immediate interaction updates. Hidden documents, reduced-motion receivers and unused media stop live polling; removing the last receiver tears down sampling. Static scenes schedule no polling or animation frames.
 - Nested surfaces retain their tint and reflection but skip additional backdrop filters.
 - `baseline` uses one backdrop pass and a dynamic highlight. Supported `enhanced` rendering adds a narrow specular edge and colored reflection overlay without another backdrop pass. `auto` chooses the baseline for coarse pointers, data saving or low reported CPU concurrency; capability checks guard enhancements. Hardware hints are conservative defaults, not measured frame-rate guarantees.
 - Operating-system reduced motion/transparency, increased contrast and forced colors receive simpler rendering. A global `reducedTransparency: false` leaves the OS transparency preference enabled; explicit surface options can override it. An explicit reduced-motion setting takes precedence so Blocks can preserve its existing manual accessibility override; omit it to follow the OS. Reduced motion finishes transitions immediately. Unsupported backdrop filtering or color mixing produces an opaque fallback.

package/fesm2022/filip.mazev-blocks-core.mjs

@@ -31,10 +31,12 @@ var DeviceTypeService = class DeviceTypeService {
 		if (this.isBrowser) {
 			const win = this.document.defaultView;
 			const screenObj = win?.screen;
-			this.screenOrientation = (screenObj?.orientation || {}).type ?? screenObj?.mozOrientation ?? screenObj?.msOrientation ?? (!screenObj?.orientation && win?.matchMedia("(orientation: portrait)").matches ? "portrait-primary" : "landscape-primary");
+			const orientation = screenObj?.orientation?.type ?? screenObj?.mozOrientation ?? screenObj?.msOrientation;
+			this.screenOrientation = this.toDeviceOrientation(orientation) ?? (win?.matchMedia("(orientation: portrait)").matches ? "portrait-primary" : "landscape-primary");
 			if (screenObj?.orientation) screenObj.orientation.addEventListener("change", (ev) => {
-				const orientation = ev.target;
-				if (orientation?.type) this.screenOrientation = orientation.type;
+				const eventOrientation = ev.target?.type;
+				const supportedOrientation = this.toDeviceOrientation(eventOrientation);
+				if (supportedOrientation) this.screenOrientation = supportedOrientation;
 			});
 		}
 	}
@@ -71,6 +73,9 @@ var DeviceTypeService = class DeviceTypeService {
 		const win = this.document.defaultView;
 		return win?.navigator?.userAgent || win?.navigator?.vendor || win?.opera || "";
 	}
+	toDeviceOrientation(value) {
+		return value === "portrait-primary" || value === "landscape-primary" || value === "portrait-secondary" || value === "landscape-secondary" ? value : void 0;
+	}
 	get isDesktopDevice() {
 		return !this.isMobileDevice() && !this.isTabletDevice();
 	}
@@ -91,7 +96,8 @@ var DeviceTypeService = class DeviceTypeService {
 			const ua = this.userAgent;
 			if (/windows phone/i.test(ua)) return MobileOS.WindowsPhone;
 			if (/android/i.test(ua)) return MobileOS.Android;
-			if (/iPad|iPhone|iPod/.test(ua) && !this.document.defaultView?.MSStream) return MobileOS.iOS;
+			const view = this.document.defaultView;
+			if (/iPad|iPhone|iPod/.test(ua) && !view?.MSStream) return MobileOS.iOS;
 			return MobileOS.Unknown;
 		}
 	}
@@ -338,9 +344,7 @@ i0.ɵɵngDeclareClassMetadata({
 	}]
 });
 const DEFAULT_APPEARANCE_CONFIG = Object.freeze({
-	material: "glass",
-	blur: 10,
-	tint: .4,
+	glassiness: .5,
 	quality: "auto",
 	reducedTransparency: false
 });
@@ -455,7 +459,7 @@ var ThemingService = class ThemingService {
 	palettes = THEME_PALETTES;
 	_palette = signal("white", ...ngDevMode ? [{ debugName: "_palette" }] : /* istanbul ignore next */ []);
 	palette = this._palette.asReadonly();
-	paletteLabel = computed(() => this.palettes.find((item) => item.id === this.palette()).label, ...ngDevMode ? [{ debugName: "paletteLabel" }] : /* istanbul ignore next */ []);
+	paletteLabel = computed(() => this.palettes.find((item) => item.id === this.palette())?.label ?? this.palettes[0].label, ...ngDevMode ? [{ debugName: "paletteLabel" }] : /* istanbul ignore next */ []);
 	platformId = inject(PLATFORM_ID);
 	isBrowser = isPlatformBrowser(this.platformId);
 	_systemTheme = signal("light", ...ngDevMode ? [{ debugName: "_systemTheme" }] : /* istanbul ignore next */ []);
@@ -502,25 +506,18 @@ var ThemingService = class ThemingService {
 		if (this.isBrowser) this.writeStored("theme-palette", palette);
 	}
 	setAppearance(settings) {
+		const current = this.appearance();
+		const glassiness = settings.glassiness ?? current.glassiness;
 		const next = {
-			...this.appearance(),
-			...settings
+			glassiness: Number.isFinite(glassiness) ? Math.min(1, Math.max(0, glassiness)) : DEFAULT_APPEARANCE_CONFIG.glassiness,
+			quality: settings.quality ?? current.quality,
+			reducedTransparency: (settings.reducedTransparency ?? current.reducedTransparency) === true
 		};
-		const finite = (value, fallback, min, max) => Number.isFinite(value) ? Math.min(max, Math.max(min, value)) : fallback;
-		next.blur = finite(next.blur, DEFAULT_APPEARANCE_CONFIG.blur, 0, 40);
-		next.tint = finite(next.tint, DEFAULT_APPEARANCE_CONFIG.tint, 0, 1);
-		if (![
-			"glass",
-			"frosted",
-			"solid"
-		].includes(next.material)) next.material = "glass";
 		if (![
 			"auto",
 			"baseline",
 			"enhanced"
 		].includes(next.quality)) next.quality = "auto";
-		for (const key of Object.keys(next)) if (!(key in DEFAULT_APPEARANCE_CONFIG)) delete next[key];
-		next.reducedTransparency = next.reducedTransparency === true;
 		this._appearance.set(next);
 		this.appearanceController?.update(next);
 		if (this.isBrowser) this.writeStored("blocks-appearance", JSON.stringify(next));
@@ -537,7 +534,15 @@ var ThemingService = class ThemingService {
 	restoreAppearance() {
 		try {
 			const stored = this.readStored("blocks-appearance");
-			if (stored) this.setAppearance(JSON.parse(stored));
+			if (stored) {
+				const saved = JSON.parse(stored);
+				if (!saved || typeof saved !== "object") return;
+				this.setAppearance({
+					glassiness: saved.glassiness ?? saved.tint ?? DEFAULT_APPEARANCE_CONFIG.glassiness,
+					quality: saved.quality ?? DEFAULT_APPEARANCE_CONFIG.quality,
+					reducedTransparency: saved.reducedTransparency === true || saved.material === "solid"
+				});
+			}
 		} catch {}
 	}
 	readStored(key) {
@@ -1083,7 +1088,7 @@ function inheritOverlayTheme(source, pane) {
 		const current = /* @__PURE__ */ new Set();
 		for (let index = 0; index < styles.length; index++) {
 			const property = styles.item(index);
-			if (property.startsWith("--bx-") && !property.startsWith("--bx-glass-")) {
+			if (property.startsWith("--bx-") && property !== "--bx-glassiness" && (!property.startsWith("--bx-glass-") || property === "--bx-glass-radius")) {
 				pane.style.setProperty(property, styles.getPropertyValue(property));
 				current.add(property);
 			}