@filip.mazev/blocks 1.4.11 → 1.4.13

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/_overlay.scss

@@ -1,4 +1,27 @@
+.bx-overlay-tracked,
+.bx-overlay-tracked > .cdk-overlay-pane {
+    transition: none !important;
+}
+
 .cdk-overlay-connected-position-bounding-box.bx-overlay-anchored {
     position: fixed !important;
     inset: var(--bx-overlay-anchor-top) auto auto var(--bx-overlay-anchor-left) !important;
 }
+
+.cdk-overlay-container.bx-overlay-document-layer {
+    position: static;
+    height: 0;
+
+    > .bx-overlay-anchored {
+        position: absolute !important;
+        width: max-content !important;
+        height: max-content !important;
+        z-index: var(--bx-overlay-layer-z-index);
+
+        > .cdk-overlay-pane {
+            position: relative !important;
+            inset: 0 auto auto 0 !important;
+            transform: none !important;
+        }
+    }
+}

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-core.mjs

@@ -1187,10 +1187,32 @@ function trackOverlayOrigin(overlay, origin) {
 	const strategy = overlay.getConfig().positionStrategy;
 	if (!view || !(strategy instanceof FlexibleConnectedPositionStrategy)) return () => {};
 	const host = overlay.hostElement;
+	host.classList.add("bx-overlay-tracked");
 	const anchor = view.CSS?.supports("position-anchor", "--bx-origin") && !!(origin.compareDocumentPosition(host) & Node.DOCUMENT_POSITION_FOLLOWING) ? `--bx-overlay-origin-${++nextAnchor}` : null;
 	const originalAnchor = origin.style.getPropertyValue("anchor-name");
 	const originalPriority = origin.style.getPropertyPriority("anchor-name");
-	if (anchor) {
+	const parent = host.parentElement;
+	let documentLayer;
+	if (anchor && !overlay.getConfig().usePopover && !overlay.getConfig().hasBackdrop && parent?.classList.contains("cdk-overlay-container")) {
+		let documentOrigin = true;
+		for (let element = origin; element; element = element.parentElement) {
+			const style = view.getComputedStyle(element);
+			const nestedScroller = element !== origin && element !== origin.ownerDocument.body && /auto|scroll|hidden/.test(`${style.overflowX} ${style.overflowY}`);
+			if (style.position === "fixed" || style.position === "sticky" || nestedScroller) {
+				documentOrigin = false;
+				break;
+			}
+		}
+		if (documentOrigin) {
+			documentLayer = origin.ownerDocument.createElement("div");
+			documentLayer.className = parent.className;
+			documentLayer.classList.add("bx-overlay-document-layer");
+			documentLayer.style.setProperty("--bx-overlay-layer-z-index", view.getComputedStyle(parent).zIndex);
+			parent.after(documentLayer);
+			documentLayer.append(host);
+		}
+	}
+	if (anchor && !documentLayer) {
 		const names = view.getComputedStyle(origin).getPropertyValue("anchor-name").trim();
 		origin.style.setProperty("anchor-name", names && names !== "none" ? `${names}, ${anchor}` : anchor);
 		host.style.setProperty("position-anchor", anchor);
@@ -1202,7 +1224,26 @@ function trackOverlayOrigin(overlay, origin) {
 			return;
 		}
 		host.classList.remove("bx-overlay-anchored");
+		documentLayer?.classList.remove("bx-overlay-document-layer");
+		const display = parent?.style.getPropertyValue("display");
+		const displayPriority = parent?.style.getPropertyPriority("display");
+		if (documentLayer) parent?.style.setProperty("display", "block");
 		overlay.updatePosition();
+		if (documentLayer && parent) {
+			if (display) parent.style.setProperty("display", display, displayPriority);
+			else parent.style.removeProperty("display");
+		}
+		if (documentLayer) {
+			const target = overlay.overlayElement.getBoundingClientRect();
+			documentLayer.classList.add("bx-overlay-document-layer");
+			host.style.setProperty("--bx-overlay-anchor-top", "0px");
+			host.style.setProperty("--bx-overlay-anchor-left", "0px");
+			host.classList.add("bx-overlay-anchored");
+			const zero = host.getBoundingClientRect();
+			host.style.setProperty("--bx-overlay-anchor-top", `${target.top - zero.top}px`);
+			host.style.setProperty("--bx-overlay-anchor-left", `${target.left - zero.left}px`);
+			return;
+		}
 		const source = origin.getBoundingClientRect();
 		const target = host.getBoundingClientRect();
 		host.style.setProperty("--bx-overlay-anchor-top", `calc(anchor(top) + ${target.top - source.top}px)`);
@@ -1234,6 +1275,11 @@ function trackOverlayOrigin(overlay, origin) {
 			if (originalAnchor) origin.style.setProperty("anchor-name", originalAnchor, originalPriority);
 			else origin.style.removeProperty("anchor-name");
 		}
+		if (documentLayer) {
+			if (host.parentElement === documentLayer) parent?.append(host);
+			documentLayer.remove();
+		}
+		host.classList.remove("bx-overlay-tracked");
 	};
 }
 export { BREAKPOINTS, BX_I18N, BxA11yService, BxBaseControl, BxOverlayPositionService, BxShortcutService, DEFAULT_APPEARANCE_CONFIG, DEFAULT_DEBOUNCE_TIME, DesktopOS, DeviceTypeService, FALLBACK_COLOR, LEGACY_THEME_IDS, MobileOS, PALETTE_NAMES, SCROLL_LOCK_INSTANCE_IDENTIFIER, SEMANTIC_PAIRS, SHADE_NUMBERS, ScrollLockService, THEME_PALETTES, TOKEN_COLOR_DELIMITER, TOKEN_DELIMITER, TOKEN_PREFIX, ThemingService, WindowDimensionsService, getComplementaryToken, inheritOverlayTheme, invertPaletteToken, isOSShortcut, isPaletteToken, isTextWithKey, isThemedColor, resolveThemeId, resolveTokenToCssVar, trackOverlayOrigin, uuidv4 };