fancy-ui-svelte 0.7.0 → 0.8.0

package/dist/fancy-ui/frosted-glass/FrostedGlass.svelte

@@ -155,11 +155,13 @@
 		}
 	}
 
-	/* Safari can't combine filter:url() with backdrop-filter — fall back to
-	   plain frosted blur */
-	@supports (-webkit-hyphens: none) {
+	/* Safari can't combine filter:url() with backdrop-filter, so it needs a plain-blur
+	   fallback. -webkit-named-image is a WebKit-only feature query (Chromium and Firefox
+	   return false). Ship the -webkit- prefixed backdrop-filter too for Safari and iOS 17 and older. */
+	@supports (background: -webkit-named-image(i)) {
 		.frosted-glass-filter {
 			filter: none !important;
+			-webkit-backdrop-filter: blur(var(--fg-fallback-blur)) saturate(var(--fg-fallback-saturation));
 			backdrop-filter: blur(var(--fg-fallback-blur)) saturate(var(--fg-fallback-saturation));
 		}
 

package/dist/fancy-ui/frosted-glass/README.md

@@ -13,8 +13,6 @@ The effect stacks four layers inside a rounded container:
 
 An optional conic-gradient border (`border` prop) frames the container.
 
-Safari cannot combine `filter: url()` with `backdrop-filter`, so it falls back to a plain `blur() saturate()` frosted look (tunable via `fallbackBlur` / `fallbackSaturation`).
-
 ## Usage
 
 ```svelte
@@ -57,3 +55,7 @@ Safari cannot combine `filter: url()` with `backdrop-filter`, so it falls back t
 ## Notes
 
 - The displacement only shows over content that scrolls or moves behind the glass; over a flat background the effect reads as a subtle frost.
+
+## Browser support
+
+Safari (WebKit) cannot combine an SVG `filter: url(#…)` with `backdrop-filter`, so the turbulence displacement silently disappears there. To keep the component usable, FrostedGlass automatically detects Safari (via a WebKit-only `@supports` feature query) and falls back to a plain frosted `blur()` + `saturate()` (both `-webkit-` prefixed and unprefixed), tunable via the `fallbackBlur` and `fallbackSaturation` props. Chromium and Firefox get the full turbulence refraction.

package/dist/fancy-ui/index.d.ts

@@ -58,4 +58,5 @@ export * from "./terminal-text/index.js";
 export * from "./noise-reveal/index.js";
 export * from "./line-reveal/index.js";
 export * from "./editorial-engine/index.js";
+export * from "./liquid-text/index.js";
 export { registry, categories, categoryLabels, categoryDescriptions, getAllComponents, getComponent, getComponentsByStatus, getComponentsByCategory, getComponentsGroupedByCategory, getComponentsGroupedByStatus, searchComponents, getStats, hasComponent, getComponentCategory, } from "./registry.js";

package/dist/fancy-ui/index.js

@@ -63,6 +63,7 @@ export * from "./terminal-text/index.js";
 export * from "./noise-reveal/index.js";
 export * from "./line-reveal/index.js";
 export * from "./editorial-engine/index.js";
+export * from "./liquid-text/index.js";
 // =============================================================================
 // Registry
 // =============================================================================

package/dist/fancy-ui/liquid-glass/LiquidGlass.svelte

@@ -18,6 +18,10 @@
 		bOffset?: number;
 		scale?: number;
 		frost?: number;
+		/** Backdrop blur in pixels for the Safari fallback */
+		fallbackBlur?: number;
+		/** Backdrop saturation percentage for the Safari fallback */
+		fallbackSaturation?: number;
 		class?: string;
 		containerClass?: string;
 		children?: Snippet;
@@ -38,6 +42,8 @@
 		bOffset = 20,
 		scale = -180,
 		frost = 0.05,
+		fallbackBlur = 20,
+		fallbackSaturation = 180,
 		class: className = "",
 		containerClass = "",
 		children,
@@ -57,8 +63,8 @@
 
 	let backdropStyle = $derived(
 		filterId
-			? `--frost:${frost};border-radius:${radius}px;backdrop-filter:url(#displacementFilter-${filterId});`
-			: `--frost:${frost};border-radius:${radius}px;`
+			? `--frost:${frost};border-radius:${radius}px;backdrop-filter:url(#displacementFilter-${filterId});--lg-fallback-blur:${fallbackBlur}px;--lg-fallback-saturation:${fallbackSaturation}%;`
+			: `--frost:${frost};border-radius:${radius}px;--lg-fallback-blur:${fallbackBlur}px;--lg-fallback-saturation:${fallbackSaturation}%;`
 	);
 
 	onMount(() => {
@@ -187,6 +193,17 @@
 			0px 16px 56px rgba(17, 17, 26, 0.05) inset;
 	}
 
+	/* Safari cannot resolve SVG url() references inside backdrop-filter, so it needs a
+	   plain-blur fallback. -webkit-named-image is a WebKit-only feature query (Chromium
+	   and Firefox return false), so this never overrides Chromium's working SVG filter.
+	   Ship the -webkit- prefixed backdrop-filter too for Safari and iOS 17 and older. */
+	@supports (background: -webkit-named-image(i)) {
+		.liquid-glass-effect {
+			-webkit-backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturation)) !important;
+			backdrop-filter: blur(var(--lg-fallback-blur)) saturate(var(--lg-fallback-saturation)) !important;
+		}
+	}
+
 	.liquid-glass-slot {
 		width: 100%;
 		height: 100%;

package/dist/fancy-ui/liquid-glass/LiquidGlass.svelte.d.ts

@@ -14,6 +14,10 @@ interface Props {
     bOffset?: number;
     scale?: number;
     frost?: number;
+    /** Backdrop blur in pixels for the Safari fallback */
+    fallbackBlur?: number;
+    /** Backdrop saturation percentage for the Safari fallback */
+    fallbackSaturation?: number;
     class?: string;
     containerClass?: string;
     children?: Snippet;

package/dist/fancy-ui/liquid-glass/LiquidGlass.test.js

@@ -45,4 +45,18 @@ describe("LiquidGlass", () => {
         expect(wrapper.getAttribute("style")).toContain("border-radius");
         expect(wrapper.getAttribute("style")).toContain("24px");
     });
+    it("exposes Safari fallback CSS variables from props", () => {
+        const { container: defaultContainer } = render(LiquidGlass);
+        const defaultWrapper = defaultContainer.querySelector(".liquid-glass-effect");
+        const defaultStyle = defaultWrapper.getAttribute("style") ?? "";
+        expect(defaultStyle).toMatch(/--lg-fallback-blur:\s*20px/);
+        expect(defaultStyle).toMatch(/--lg-fallback-saturation:\s*180%/);
+        const { container: customContainer } = render(LiquidGlass, {
+            props: { fallbackBlur: 8, fallbackSaturation: 120 },
+        });
+        const customWrapper = customContainer.querySelector(".liquid-glass-effect");
+        const customStyle = customWrapper.getAttribute("style") ?? "";
+        expect(customStyle).toMatch(/--lg-fallback-blur:\s*8px/);
+        expect(customStyle).toMatch(/--lg-fallback-saturation:\s*120%/);
+    });
 });

package/dist/fancy-ui/liquid-glass/README.md

@@ -20,6 +20,8 @@ A glass-like visual effect using SVG filters for chromatic displacement, creatin
 | `bOffset`        | `number`      | `20`           | Blue channel offset                  |
 | `scale`          | `number`      | `-180`         | Displacement scale                   |
 | `frost`          | `number`      | `0.05`         | Frosted overlay opacity              |
+| `fallbackBlur`   | `number`      | `20`           | Backdrop blur in pixels for the Safari fallback |
+| `fallbackSaturation` | `number`  | `180`          | Backdrop saturation percentage for the Safari fallback |
 | `class`          | `string`      | `""`           | CSS classes for inner container      |
 | `containerClass` | `string`      | `""`           | CSS classes for outer container      |
 
@@ -31,4 +33,8 @@ A glass-like visual effect using SVG filters for chromatic displacement, creatin
 </LiquidGlass>
 ```
 
-**Note**: This component uses `position: fixed` and `backdrop-filter` with SVG filters. Place it over content to see the refraction effect.
+**Note**: This component uses `position: relative` and `backdrop-filter` with SVG filters. Place it over content to see the refraction effect.
+
+## Browser support
+
+Safari (WebKit) cannot resolve an SVG `url(#…)` filter reference inside `backdrop-filter`, so the chromatic displacement silently disappears there. To keep the component usable, LiquidGlass automatically detects Safari (via a WebKit-only `@supports` feature query) and falls back to a plain frosted `blur()` + `saturate()` (both `-webkit-` prefixed and unprefixed), tunable via the `fallbackBlur` and `fallbackSaturation` props. Chromium and Firefox get the full chromatic refraction.