@filip.mazev/blocks 1.4.11 → 1.4.12

package/core/styles/_choice-finish.scss

@@ -0,0 +1,49 @@
+@mixin choice-well {
+    background-image: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--bx-border-strong) 24%, var(--bx-glass-surface)),
+        var(--bx-glass-surface) 55%,
+        color-mix(in srgb, var(--bx-border-strong) 10%, var(--bx-glass-surface))
+    ) !important;
+    border-top-color: var(--bx-border-strong);
+    border-bottom-color: var(--bx-border-default);
+}
+
+@mixin choice-accent-face {
+    background-image: linear-gradient(
+        180deg,
+        color-mix(in srgb, var(--bx-color-accent-50) 24%, var(--bx-accent)),
+        var(--bx-accent) 42%,
+        var(--bx-accent) 65%,
+        color-mix(in srgb, var(--bx-border-accent) 18%, var(--bx-accent))
+    ) !important;
+    border-top-color: color-mix(in srgb, var(--bx-color-accent-100) 60%, var(--bx-accent));
+    border-inline-color: var(--bx-accent);
+    border-bottom-color: var(--bx-border-accent);
+}
+
+@mixin choice-thumb {
+    background-image: radial-gradient(
+        circle at 32% 22%,
+        var(--bx-color-accent-50),
+        var(--bx-color-accent-100) 38%,
+        var(--bx-color-accent-300) 80%,
+        var(--bx-color-accent-400)
+    ) !important;
+    border-top-color: var(--bx-color-accent-50);
+    border-inline-color: var(--bx-color-accent-200);
+    border-bottom-color: var(--bx-color-accent-500);
+}
+
+@mixin choice-flat-accessibility {
+    :host-context(.high-contrast) &,
+    :host-context(.bx-high-contrast-scope) & {
+        background-image: none !important;
+        border-color: var(--bx-glass-edge);
+    }
+
+    @media (forced-colors: active) {
+        background-image: none !important;
+        border-color: ButtonText;
+    }
+}

package/core/styles/_helpers.scss

@@ -4,3 +4,4 @@
 @forward 'palettes';
 @forward 'motion';
 @forward 'field-state';
+@forward 'choice-finish';

package/core/styles/_slider.scss

@@ -9,7 +9,7 @@
     border-radius: radius(pill);
     background: linear-gradient(
         to right,
-        var(--bx-primary) 0 var(--bx-slider-progress, 50%),
+        var(--bx-accent) 0 var(--bx-slider-progress, 50%),
         var(--bx-bg-neutral) var(--bx-slider-progress, 50%) 100%
     );
     box-shadow: inset 0 1px 2px rgb(0 0 0 / 16%);
@@ -28,7 +28,7 @@
         var(--bx-bg-surface);
     border-color: color-mix(
         in srgb,
-        var(--bx-slider-light-color, var(--bx-primary))
+        var(--bx-slider-light-color, var(--bx-accent))
             calc(var(--bx-slider-light-strength, 0.18) * 100%),
         var(--bx-border-strong)
     );
@@ -36,7 +36,7 @@
     box-shadow:
         inset 0 1px 1px rgb(255 255 255 / 45%),
         inset 0 -1px 2px
-            color-mix(in srgb, var(--bx-slider-light-color, var(--bx-primary)) 30%, transparent),
+            color-mix(in srgb, var(--bx-slider-light-color, var(--bx-accent)) 30%, transparent),
         0 2px 5px rgb(0 0 0 / 18%);
 }
 
@@ -90,7 +90,7 @@
         padding: 1px;
         background: radial-gradient(
             circle at var(--bx-slider-light-x, 35%) var(--bx-slider-light-y, 0%),
-            var(--bx-slider-light-color, var(--bx-primary)),
+            var(--bx-slider-light-color, var(--bx-accent)),
             transparent 75%
         );
         opacity: var(--bx-slider-light-strength, 0.25);
@@ -135,7 +135,7 @@ input.bx-slider {
     }
 
     &:focus-visible {
-        outline: 2px solid var(--bx-border-brand);
+        outline: 2px solid var(--bx-border-accent);
         outline-offset: 3px;
         border-radius: radius(pill);
     }

package/core/styles/_theme-engine.scss

@@ -83,7 +83,7 @@ $required-theme-keys: (
     }
 
     @each $key, $value in $theme {
-        @if string.index($key, 'meta-') !=1 {
+        @if string.index($key, 'meta-') != 1 {
             @if not list.index($required-theme-keys, $key) {
                 @error "Strict Theme Error: '#{$theme-name}' contains an invalid key '#{$key}'. Remove or rename it.";
             }
@@ -102,22 +102,20 @@ $required-theme-keys: (
         'blue': 0.0722,
     );
 
-@each $channel, $weight in $weights {
-    $part: math.div(color.channel($value, $channel, $space: rgb), 255);
+    @each $channel, $weight in $weights {
+        $part: math.div(color.channel($value, $channel, $space: rgb), 255);
 
-    /* stylelint-disable-next-line number-max-precision -- Preserve the exact sRGB linearization threshold. */
-    @if $part <=0.04045 {
-        $part: math.div($part, 12.92);
-    }
+        /* stylelint-disable-next-line number-max-precision -- Preserve the exact sRGB linearization threshold. */
+        @if $part <= 0.04045 {
+            $part: math.div($part, 12.92);
+        } @else {
+            $part: math.pow(math.div($part + 0.055, 1.055), 2.4);
+        }
 
-    @else {
-        $part: math.pow(math.div($part + 0.055, 1.055), 2.4);
+        $result: $result + $part * $weight;
     }
 
-    $result: $result + $part * $weight;
-}
-
-@return $result;
+    @return $result;
 }
 
 @function _contrast($first, $second) {
@@ -134,7 +132,7 @@ $required-theme-keys: (
         $dark: #000000;
     }
 
-    @if _contrast($dark, $background)>=_contrast(#ffffff, $background) {
+    @if _contrast($dark, $background) >= _contrast(#ffffff, $background) {
         @return $dark;
     }
 
@@ -163,12 +161,13 @@ $required-theme-keys: (
     $text-key: 'text-accent';
     $border-key: 'border-accent';
 
-    @if $role =='primary' {
+    @if $role == 'primary' {
         $text-key: 'text-brand';
         $border-key: 'border-brand';
     }
 
-    @return ($role: $base,
+    @return (
+        $role: $base,
         '#{$role}-hover': $hover,
         '#{$role}-active': $active,
         '#{$role}-subtle': $subtle,
@@ -176,38 +175,21 @@ $required-theme-keys: (
         'on-#{$role}-hover': _on-color($hover),
         'on-#{$role}-active': _on-color($active),
         $text-key: $text,
-        $border-key: get-color-from-palette($palette, _mode($dark, 800, 300)));
+        $border-key: get-color-from-palette($palette, _mode($dark, 800, 300))
+    );
 }
 
 @function _make-theme($brand, $accent, $dark, $overrides) {
     $base: (
-        'bg-canvas': color.mix(get-color-from-palette($brand, _mode($dark, 50, 900)),
-            _mode($brand, #ffffff, #000000),
-            2%),
-        'bg-surface': color.mix(get-color-from-palette($brand, _mode($dark, 50, 900)),
-            get-color-from-palette('neutral', _mode($dark, 50, 1000)),
-            2%),
-        'bg-surface-alt': color.mix(get-color-from-palette($brand, _mode($dark, 50, 900)),
-            get-color-from-palette('neutral', _mode($dark, 50, 900)),
-            2%),
-        'bg-element': color.mix(get-color-from-palette($brand, _mode($dark, 100, 900)),
-            get-color-from-palette('neutral', _mode($dark, 100, 800)),
-            2%),
-        'bg-element-hover': color.mix(get-color-from-palette($brand, _mode($dark, 100, 900)),
-            get-color-from-palette('neutral', _mode($dark, 200, 700)),
-            2%),
-        'bg-element-active': color.mix(get-color-from-palette($brand, _mode($dark, 100, 900)),
-            get-color-from-palette('neutral', _mode($dark, 300, 600)),
-            2%),
-        'bg-neutral': color.mix(get-color-from-palette($brand, _mode($dark, 50, 900)),
-            get-color-from-palette('neutral', _mode($dark, 100, 900)),
-            2%),
-        'bg-neutral-hover': color.mix(get-color-from-palette($brand, _mode($dark, 50, 900)),
-            get-color-from-palette('neutral', _mode($dark, 50, 800)),
-            2%),
-        'bg-neutral-active': color.mix(get-color-from-palette($brand, _mode($dark, 50, 900)),
-            get-color-from-palette('neutral', _mode($dark, 200, 600)),
-            2%),
+        'bg-canvas': _mode($dark, #ffffff, #000000),
+        'bg-surface': get-color-from-palette('neutral', _mode($dark, 50, 1000)),
+        'bg-surface-alt': get-color-from-palette('neutral', _mode($dark, 50, 900)),
+        'bg-element': get-color-from-palette('neutral', _mode($dark, 100, 800)),
+        'bg-element-hover': get-color-from-palette('neutral', _mode($dark, 200, 700)),
+        'bg-element-active': get-color-from-palette('neutral', _mode($dark, 300, 600)),
+        'bg-neutral': get-color-from-palette('neutral', _mode($dark, 100, 900)),
+        'bg-neutral-hover': get-color-from-palette('neutral', _mode($dark, 50, 800)),
+        'bg-neutral-active': get-color-from-palette('neutral', _mode($dark, 200, 600)),
         'text-heading': _mode($dark, get-color-from-palette('neutral', 900), #ffffff),
         'text-primary': get-color-from-palette('neutral', _mode($dark, 700, 200)),
         'text-secondary': get-color-from-palette('neutral', _mode($dark, 600, 400)),
@@ -222,23 +204,28 @@ $required-theme-keys: (
         'meta-accent-palette': $accent,
     );
 
-@each $status,
-$palette in ('info': 'information', 'success': 'success', 'warn': 'warn', 'danger': 'danger') {
-    $base: map.merge($base,
-            ('text-#{$status}': get-color-from-palette($palette, _mode($dark, 700, 400)),
+    @each $status,
+        $palette
+            in ('info': 'information', 'success': 'success', 'warn': 'warn', 'danger': 'danger')
+    {
+        $base: map.merge(
+            $base,
+            (
+                'text-#{$status}': get-color-from-palette($palette, _mode($dark, 700, 400)),
                 'border-#{$status}': get-color-from-palette($palette, 400),
                 'bg-#{$status}': get-color-from-palette($palette, _mode($dark, 100, 900)),
                 'bg-#{$status}-hover': get-color-from-palette($palette, _mode($dark, 200, 800)),
                 'bg-#{$status}-active': get-color-from-palette($palette, _mode($dark, 300, 700)),
                 'bg-#{$status}-disabled': get-color-from-palette($palette, _mode($dark, 50, 1000)),
                 'bg-#{$status}-subtle': get-color-from-palette($palette, _mode($dark, 50, 1000)),
-            ));
-}
+            )
+        );
+    }
 
-$base: map.merge($base, _color-roles($brand, 'primary', $dark));
-$base: map.merge($base, _color-roles($accent, 'accent', $dark));
+    $base: map.merge($base, _color-roles($brand, 'primary', $dark));
+    $base: map.merge($base, _color-roles($accent, 'accent', $dark));
 
-@return validate-theme(map.merge($base, $overrides), '#{$brand}-#{$accent}');
+    @return validate-theme(map.merge($base, $overrides), '#{$brand}-#{$accent}');
 }
 
 /* stylelint-enable scss/at-function-pattern */
@@ -257,7 +244,7 @@ $base: map.merge($base, _color-roles($accent, 'accent', $dark));
     --bx-glass-accent: var(--bx-primary);
 
     @each $key, $value in $config {
-        @if string.index($key, 'meta-') !=1 {
+        @if string.index($key, 'meta-') != 1 {
             --bx-#{$key}: #{$value};
         }
     }
@@ -270,28 +257,22 @@ $base: map.merge($base, _color-roles($accent, 'accent', $dark));
 }
 
 @each $key in $required-theme-keys {
-    @if string.index($key, 'bg-')==1 {
+    @if string.index($key, 'bg-') == 1 {
         .bx-#{$key} {
             background-color: var(--bx-#{$key});
             transition: background-color 0.2s ease-in-out;
         }
-    }
-
-    @else if string.index($key, 'text-')==1 {
+    } @else if string.index($key, 'text-') == 1 {
         .bx-#{$key} {
             color: var(--bx-#{$key});
             transition: color 0.2s ease-in-out;
         }
-    }
-
-    @else if string.index($key, 'border-')==1 {
+    } @else if string.index($key, 'border-') == 1 {
         .bx-#{$key} {
             border-color: var(--bx-#{$key});
             transition: border-color 0.2s ease-in-out;
         }
-    }
-
-    @else if not string.index($key, 'scroll-') and string.index($key, 'meta-') !=1 {
+    } @else if not string.index($key, 'scroll-') and string.index($key, 'meta-') != 1 {
         .bx-bg-#{$key} {
             background-color: var(--bx-#{$key});
             transition: background-color 0.2s ease-in-out;
@@ -307,4 +288,4 @@ $base: map.merge($base, _color-roles($accent, 'accent', $dark));
             transition: border-color 0.2s ease-in-out;
         }
     }
-}
+}

package/effects/effects.css

@@ -12,6 +12,10 @@
     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));
+}
+
+/* Buttons use the same curve before their runtime surface mounts. */
+[data-bx-surface], .bx-btn {
     --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));
 }

package/effects/runtime/README.md

@@ -91,7 +91,7 @@ This is a bounded, stylized lighting model. The browser's backdrop filter still
 
 ## Overlay fades
 
-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`.
+Overlays fade in over 180 ms and out over 140 ms using the Web Animations API. 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. Native opacity interpolation avoids per-frame style mutations and lighting invalidation. Reversing an active fade continues from its current opacity; the interrupted promise resolves to `cancelled`.
 
 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`.
 

package/fesm2022/filip.mazev-blocks-effects-runtime.mjs

@@ -19,10 +19,6 @@ function rememberAttributes(element, attributes) {
 function finiteClamp(value, low, high, fallback) {
 	return value === void 0 || !Number.isFinite(value) ? fallback : Math.min(high, Math.max(low, value));
 }
-function smoothstep(low, high, value) {
-	const t = Math.min(1, Math.max(0, (value - low) / (high - low)));
-	return t * t * (3 - 2 * t);
-}
 const configurationEvent = "bx-glass-config-change";
 const attributes = [
 	"data-bx-glass-quality",
@@ -1823,29 +1819,28 @@ function createGlassTransition(origin, target, options = {}) {
 	if (!view) throw new Error("Glass transitions must be mounted in a browser document.");
 	if (origin.ownerDocument !== doc) throw new Error("Glass transition endpoints must share a document.");
 	const skin = target.matches("[data-bx-surface]") ? target : target.querySelector("[data-bx-surface]") ?? target;
-	const restoreOpacity = rememberStyles(skin, ["opacity"]);
 	const restoreVisibility = rememberStyles(target, ["visibility"]);
 	const opacity = Number(view.getComputedStyle(skin).opacity);
+	const readOpacity = () => Number(view.getComputedStyle(skin).opacity);
 	const preference = view.matchMedia("(prefers-reduced-motion: reduce)");
 	let disposed = false;
 	let active = false;
-	let value = 0, from = 0, destination = 0, elapsed = 0;
+	let value = 0;
+	let destination = 0;
+	let animation;
 	let unsubscribe;
 	let resolvePending;
 	const reduced = () => {
 		const inherited = inheritedAttribute(origin, "data-bx-reduced-motion");
 		return options.reducedMotion ?? (inherited === null ? preference.matches : inherited === "true");
 	};
-	const paint = () => {
-		skin.style.opacity = String(value * opacity);
-		options.onUpdate?.();
-	};
 	function settle() {
 		active = false;
 		value = destination;
 		unsubscribe?.();
 		unsubscribe = void 0;
-		restoreOpacity();
+		animation?.cancel();
+		animation = void 0;
 		restoreVisibility();
 		if (destination === 0) target.style.visibility = "hidden";
 		const resolve = resolvePending;
@@ -1854,12 +1849,13 @@ function createGlassTransition(origin, target, options = {}) {
 	}
 	function move(open) {
 		if (disposed) return Promise.resolve("cancelled");
+		const from = animation && opacity > 0 ? readOpacity() / opacity : value;
 		resolvePending?.("cancelled");
+		animation?.cancel();
+		animation = void 0;
 		unsubscribe?.();
 		unsubscribe = void 0;
-		from = value;
 		destination = open ? 1 : 0;
-		elapsed = 0;
 		active = true;
 		restoreVisibility();
 		const finished = new Promise((resolve) => {
@@ -1867,18 +1863,18 @@ function createGlassTransition(origin, target, options = {}) {
 		});
 		if (reduced() || from === destination) settle();
 		else {
-			paint();
-			const duration = (open ? .18 : .14) * Math.abs(destination - from);
-			unsubscribe = subscribeFrame((dt) => {
-				elapsed += dt;
-				value = from + (destination - from) * smoothstep(0, duration, elapsed);
-				paint();
-				if (disposed) return false;
-				if (elapsed >= duration) {
-					settle();
-					return false;
-				}
-				return true;
+			const current = skin.animate([{ opacity: from * opacity }, { opacity: destination * opacity }], {
+				duration: (open ? 180 : 140) * Math.abs(destination - from),
+				easing: "ease-in-out",
+				fill: "both"
+			});
+			animation = current;
+			current.finished.then(() => {
+				if (animation === current && !disposed) settle();
+			}).catch(() => {});
+			if (options.onUpdate) unsubscribe = subscribeFrame(() => {
+				options.onUpdate?.();
+				return active && !disposed;
 			});
 		}
 		return finished;
@@ -1902,7 +1898,8 @@ function createGlassTransition(origin, target, options = {}) {
 			resolvePending = void 0;
 			preference.removeEventListener("change", onPreference);
 			doc.removeEventListener(configurationEvent, onPreference);
-			restoreOpacity();
+			animation?.cancel();
+			animation = void 0;
 			restoreVisibility();
 		}
 	};