@heyramzi/ui 2.24.0 → 3.1.0

package/src/effects/marquee/Marquee.css

@@ -1,63 +1,86 @@
-.marquee {
-  display: flex;
-  flex-direction: row;
-  gap: var(--gap, 1rem);
-  overflow: hidden;
-  padding: 0.5rem;
-}
-.marquee--vertical {
-  flex-direction: column;
-}
-.marquee__track {
-  display: flex;
-  flex-direction: row;
-  flex-shrink: 0;
-  justify-content: space-around;
-  gap: var(--gap, 1rem);
-  animation: marquee-x var(--duration, 40s) linear var(--marquee-delay, 0s) infinite;
-}
-.marquee--vertical .marquee__track {
-  flex-direction: column;
-  animation-name: marquee-y;
-}
-.marquee__track--reverse {
-  animation-direction: reverse;
-}
-/* fit-content already stops at the parent's width. No max-width here: this sheet is unlayered, so
-   it would beat a caller's max-w-* utility and the line would never overflow its box. */
-.marquee[data-overflow-only] {
-  width: fit-content;
-  padding: 0;
-}
-.marquee[data-still] .marquee__track {
-  animation: none;
-}
-.marquee[data-fade] {
-  mask-image: linear-gradient(
-    to right,
-    transparent,
-    black var(--marquee-fade),
-    black calc(100% - var(--marquee-fade)),
-    transparent
-  );
-}
-.marquee--vertical[data-fade] {
-  mask-image: linear-gradient(
-    to bottom,
-    transparent,
-    black var(--marquee-fade),
-    black calc(100% - var(--marquee-fade)),
-    transparent
-  );
-}
-@media (hover: hover) and (pointer: fine) {
-  .marquee[data-pause-hover]:hover .marquee__track {
+@layer theme, base, components, utilities;
+
+@layer components {
+  .marquee {
+    display: flex;
+    flex-direction: row;
+    gap: var(--gap, 1rem);
+    overflow: hidden;
+    padding: 0.5rem;
+  }
+
+  .marquee--vertical {
+    flex-direction: column;
+  }
+
+  .marquee__track {
+    display: flex;
+    flex-direction: row;
+    flex-shrink: 0;
+    justify-content: space-around;
+    gap: var(--gap, 1rem);
+    animation: marquee-x var(--duration, 40s) linear var(--marquee-delay, 0s) infinite;
+  }
+
+  .marquee--vertical .marquee__track {
+    flex-direction: column;
+    animation-name: marquee-y;
+  }
+
+  .marquee__track--reverse {
+    animation-direction: reverse;
+  }
+
+  /* fit-content already stops at the parent's width. No max-width here: this sheet is unlayered, so
+     it would beat a caller's max-w-* utility and the line would never overflow its box. */
+  .marquee[data-overflow-only] {
+    width: fit-content;
+    padding: 0;
+  }
+
+  .marquee[data-still] .marquee__track {
+    animation: none;
+  }
+
+  .marquee[data-fade] {
+    mask-image: linear-gradient(
+      to right,
+      transparent,
+      black var(--marquee-fade),
+      black calc(100% - var(--marquee-fade)),
+      transparent
+    );
+  }
+
+  .marquee--vertical[data-fade] {
+    mask-image: linear-gradient(
+      to bottom,
+      transparent,
+      black var(--marquee-fade),
+      black calc(100% - var(--marquee-fade)),
+      transparent
+    );
+  }
+
+  @media (hover: hover) and (pointer: fine) {
+    .marquee[data-pause-hover]:hover .marquee__track {
+      animation-play-state: paused;
+    }
+  }
+
+  /* A focused link must hold still to be read and clicked, whatever pauseOnHover says. */
+  .marquee[data-paused] .marquee__track,
+  .marquee:focus-within .marquee__track {
     animation-play-state: paused;
   }
+
+  @media (prefers-reduced-motion: reduce) {
+    .marquee__track {
+      animation: none;
+    }
+  }
 }
-.marquee[data-paused] .marquee__track {
-  animation-play-state: paused;
-}
+
 @keyframes marquee-x {
   from {
     transform: translateX(0);
@@ -66,6 +89,7 @@
     transform: translateX(calc(-100% - var(--gap, 1rem)));
   }
 }
+
 @keyframes marquee-y {
   from {
     transform: translateY(0);
@@ -74,8 +98,3 @@
     transform: translateY(calc(-100% - var(--gap, 1rem)));
   }
 }
-@media (prefers-reduced-motion: reduce) {
-  .marquee__track {
-    animation: none;
-  }
-}

package/src/effects/marquee/Marquee.svelte

@@ -155,6 +155,7 @@
 		<div
 			class={cn("marquee__track", reverse && "marquee__track--reverse")}
 			aria-hidden={i > 0 ? "true" : undefined}
+			inert={i > 0}
 		>
 			{@render children?.()}
 		</div>

package/src/effects/marquee/Marquee.svelte.d.ts

@@ -0,0 +1,27 @@
+import "./Marquee.css";
+import type { Snippet } from "svelte";
+interface MarqueeProps {
+    children: Snippet;
+    class?: string;
+    reverse?: boolean;
+    pauseOnHover?: boolean;
+    vertical?: boolean;
+    repeat?: number;
+    duration?: string;
+    gap?: string;
+    /** Scroll speed in px/s. Sets the loop time from the measured track, and wins over `duration`. */
+    speed?: number;
+    /** Fades both ends along the scroll axis. Any CSS length, such as `16px` or `13%`. */
+    fade?: string;
+    /** Waits this many ms before the first scroll starts. */
+    delay?: number;
+    /**
+     * Scrolls only while the content overflows the box; when it fits, the box shrinks to it,
+     * drops its padding and shows one still copy.
+     */
+    overflowOnly?: boolean;
+    style?: string;
+}
+declare const $$Component: import("svelte").Component<MarqueeProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/marquee/index.ts

@@ -0,0 +1 @@
+export { default as Marquee } from "./Marquee.svelte";

package/src/effects/marquee/marquee.test.ts

@@ -0,0 +1,24 @@
+import { afterEach, describe, expect, it } from "vite-plus/test";
+import { createRawSnippet, flushSync, mount, unmount } from "svelte";
+import Marquee from "./Marquee.svelte";
+
+let app: ReturnType<typeof mount> | null = null;
+
+afterEach(() => {
+  if (app) unmount(app);
+  app = null;
+  document.body.innerHTML = "";
+});
+
+describe("Marquee copies", () => {
+  it("keeps only the first copy's links in the Tab order and the accessibility tree", () => {
+    const children = createRawSnippet(() => ({ render: () => '<a href="#one">One</a>' }));
+    app = mount(Marquee, { target: document.body, props: { children, repeat: 3 } });
+    flushSync();
+    const tracks = [...document.querySelectorAll<HTMLElement>(".marquee__track")];
+    expect(tracks).toHaveLength(3);
+    // jsdom has no inert, so the property Svelte sets never reflects to the attribute here.
+    expect(tracks.map((t) => Boolean(t.inert))).toEqual([false, true, true]);
+    expect(tracks.map((t) => t.getAttribute("aria-hidden"))).toEqual([null, "true", "true"]);
+  });
+});

package/src/effects/progressive-blur/ProgressiveBlur.css

@@ -1,9 +1,14 @@
-.hr-progressive-blur {
-  position: relative;
-  pointer-events: none;
-}
-.hr-progressive-blur__layer {
-  position: absolute;
-  inset: 0;
-  border-radius: inherit;
+@layer theme, base, components, utilities;
+
+@layer components {
+  .hr-progressive-blur {
+    position: relative;
+    pointer-events: none;
+  }
+
+  .hr-progressive-blur__layer {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+  }
 }

package/src/effects/progressive-blur/ProgressiveBlur.svelte.d.ts

@@ -0,0 +1,14 @@
+import "./ProgressiveBlur.css";
+type Direction = "top" | "right" | "bottom" | "left";
+interface ProgressiveBlurProps {
+    /** Edge the blur builds towards. Default `bottom`. */
+    direction?: Direction;
+    /** Stacked masked layers. More layers, smoother ramp, more compositing. */
+    layers?: number;
+    /** Blur added per layer, in px. */
+    intensity?: number;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<ProgressiveBlurProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/progressive-blur/index.ts

@@ -0,0 +1 @@
+export { default as ProgressiveBlur } from "./ProgressiveBlur.svelte";

package/src/effects/reveal/AnimatedGroup.svelte.d.ts

@@ -0,0 +1,14 @@
+import "./reveal.css";
+import type { Snippet } from "svelte";
+import type { RevealTiming, RevealViewOptions } from "./types.js";
+interface AnimatedGroupProps extends RevealTiming, RevealViewOptions {
+    children: Snippet;
+    /** Tag to render. Default `div`. */
+    as?: string;
+    class?: string;
+    /** Play on mount instead of waiting for the group to scroll into view. */
+    onMount?: boolean;
+}
+declare const $$Component: import("svelte").Component<AnimatedGroupProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/reveal/InView.svelte.d.ts

@@ -0,0 +1,12 @@
+import "./reveal.css";
+import type { Snippet } from "svelte";
+import type { RevealTiming, RevealViewOptions } from "./types.js";
+interface InViewProps extends RevealTiming, RevealViewOptions {
+    children: Snippet<[boolean]>;
+    /** Tag to render. Default `div`. */
+    as?: string;
+    class?: string;
+}
+declare const $$Component: import("svelte").Component<InViewProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/reveal/TextEffect.svelte.d.ts

@@ -0,0 +1,16 @@
+import "./reveal.css";
+import type { RevealPer, RevealTiming, RevealViewOptions } from "./types.js";
+interface TextEffectProps extends RevealTiming, RevealViewOptions {
+    /** The line to reveal. Plain text only; `\n` splits lines when `per="line"`. */
+    text: string;
+    /** What one staggered step is. Default `word`. */
+    per?: RevealPer;
+    /** Tag to render. Default `p`. */
+    as?: string;
+    class?: string;
+    /** Play on mount instead of waiting for the text to scroll into view. */
+    onMount?: boolean;
+}
+declare const $$Component: import("svelte").Component<TextEffectProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/reveal/reveal.css

@@ -1,52 +1,93 @@
+@layer theme, base, components, utilities;
+
 /* Reveal engine shared by InView, AnimatedGroup and TextEffect. */
 /* Preset geometry from motion-primitives (MIT); timing from @heyramzi/ui/design. */
 
-.hr-reveal {
-  --hr-reveal-name: hr-reveal-fade;
-  --hr-reveal-play: paused;
-  --hr-reveal-duration: var(--duration-slow, 300ms);
-  --hr-reveal-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
-  --hr-reveal-stagger: var(--duration-stagger, 40ms);
-  --hr-reveal-delay: 0ms;
-  --hr-reveal-distance: 20px;
-  --hr-reveal-blur: 12px;
-  --hr-reveal-scale: 0.9;
-}
+@layer components {
+  .hr-reveal {
+    --hr-reveal-name: hr-reveal-fade;
+    --hr-reveal-play: paused;
+    --hr-reveal-duration: var(--duration-slow, 300ms);
+    --hr-reveal-ease: var(--ease-smooth-out, cubic-bezier(0.22, 1, 0.36, 1));
+    --hr-reveal-stagger: var(--duration-stagger, 40ms);
+    --hr-reveal-delay: 0ms;
+    --hr-reveal-distance: 20px;
+    --hr-reveal-blur: 12px;
+    --hr-reveal-scale: 0.9;
+  }
 
-/* WHY: every knob is an inherited custom property, so one attribute on the root
-   drives the root itself and every descendant item without a paired selector. */
-.hr-reveal[data-reveal="in"] {
-  --hr-reveal-play: running;
-}
+  /* WHY: every knob is an inherited custom property, so one attribute on the root
+     drives the root itself and every descendant item without a paired selector. */
+  .hr-reveal[data-reveal="in"] {
+    --hr-reveal-play: running;
+  }
 
-.hr-reveal__item {
-  --i: 0;
-  animation-name: var(--hr-reveal-name);
-  animation-duration: var(--hr-reveal-duration);
-  animation-timing-function: var(--hr-reveal-ease);
-  animation-fill-mode: both;
-  animation-play-state: var(--hr-reveal-play);
-  animation-delay: calc(var(--hr-reveal-delay) + var(--i) * var(--hr-reveal-stagger));
-}
+  .hr-reveal__item {
+    --i: 0;
+    animation-name: var(--hr-reveal-name);
+    animation-duration: var(--hr-reveal-duration);
+    animation-timing-function: var(--hr-reveal-ease);
+    animation-fill-mode: both;
+    animation-play-state: var(--hr-reveal-play);
+    animation-delay: calc(var(--hr-reveal-delay) + var(--i) * var(--hr-reveal-stagger));
+  }
 
-.hr-reveal[data-preset="fade"] {
-  --hr-reveal-name: hr-reveal-fade;
-}
-.hr-reveal[data-preset="slide"] {
-  --hr-reveal-name: hr-reveal-slide;
-}
-.hr-reveal[data-preset="blur"] {
-  --hr-reveal-name: hr-reveal-blur;
-}
-.hr-reveal[data-preset="blur-slide"] {
-  --hr-reveal-name: hr-reveal-blur-slide;
-}
-.hr-reveal[data-preset="scale"] {
-  --hr-reveal-name: hr-reveal-scale;
-}
-.hr-reveal[data-preset="zoom"] {
-  --hr-reveal-name: hr-reveal-zoom;
-  --hr-reveal-ease: var(--ease-smooth-out);
+  .hr-reveal[data-preset="fade"] {
+    --hr-reveal-name: hr-reveal-fade;
+  }
+
+  .hr-reveal[data-preset="slide"] {
+    --hr-reveal-name: hr-reveal-slide;
+  }
+
+  .hr-reveal[data-preset="blur"] {
+    --hr-reveal-name: hr-reveal-blur;
+  }
+
+  .hr-reveal[data-preset="blur-slide"] {
+    --hr-reveal-name: hr-reveal-blur-slide;
+  }
+
+  .hr-reveal[data-preset="scale"] {
+    --hr-reveal-name: hr-reveal-scale;
+  }
+
+  .hr-reveal[data-preset="zoom"] {
+    --hr-reveal-name: hr-reveal-zoom;
+    --hr-reveal-ease: var(--ease-smooth-out);
+  }
+
+  /* Segment spans TextEffect emits; per-char needs the space kept and the box laid out. */
+  .hr-reveal__segment {
+    display: inline-block;
+    white-space: pre;
+  }
+
+  .hr-reveal__segment--line {
+    display: block;
+    white-space: normal;
+  }
+
+  .hr-reveal__sr {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip-path: inset(50%);
+    white-space: nowrap;
+    border-width: 0;
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .hr-reveal__item {
+      animation: none;
+      opacity: 1;
+      filter: none;
+      transform: none;
+    }
+  }
 }
 
 @keyframes hr-reveal-fade {
@@ -57,6 +98,7 @@
     opacity: 1;
   }
 }
+
 @keyframes hr-reveal-slide {
   from {
     opacity: 0;
@@ -67,6 +109,7 @@
     transform: translateY(0);
   }
 }
+
 @keyframes hr-reveal-blur {
   from {
     opacity: 0;
@@ -77,6 +120,7 @@
     filter: blur(0);
   }
 }
+
 @keyframes hr-reveal-blur-slide {
   from {
     opacity: 0;
@@ -89,6 +133,7 @@
     transform: translateY(0);
   }
 }
+
 @keyframes hr-reveal-scale {
   from {
     opacity: 0;
@@ -99,6 +144,7 @@
     transform: scale(1);
   }
 }
+
 @keyframes hr-reveal-zoom {
   from {
     opacity: 0;
@@ -109,33 +155,3 @@
     transform: scale(1);
   }
 }
-
-/* Segment spans TextEffect emits; per-char needs the space kept and the box laid out. */
-.hr-reveal__segment {
-  display: inline-block;
-  white-space: pre;
-}
-.hr-reveal__segment--line {
-  display: block;
-  white-space: normal;
-}
-.hr-reveal__sr {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border-width: 0;
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .hr-reveal__item {
-    animation: none;
-    opacity: 1;
-    filter: none;
-    transform: none;
-  }
-}

package/src/effects/shader-gradient/ShaderGradient.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { ShaderGradientProps } from "./types.js";
+declare const $$Component: import("svelte").Component<ShaderGradientProps, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/spotlight/Spotlight.css

@@ -1,3 +1,11 @@
+@layer theme, base, components, utilities;
+
+@layer components {
+  .hr-spotlight.animate-spotlight {
+    animation: spotlight 2s ease 0.75s 1 forwards;
+  }
+}
+
 @keyframes spotlight {
   0% {
     opacity: 0;
@@ -8,7 +16,3 @@
     transform: translate(-50%, -40%) scale(1);
   }
 }
-
-.hr-spotlight.animate-spotlight {
-  animation: spotlight 2s ease 0.75s 1 forwards;
-}

package/src/effects/spotlight/Spotlight.svelte.d.ts

@@ -0,0 +1,8 @@
+import "./Spotlight.css";
+interface Props {
+    class?: string;
+    fill?: string;
+}
+declare const $$Component: import("svelte").Component<Props, {}, "">;
+type $$Component = ReturnType<typeof $$Component>;
+export default $$Component;

package/src/effects/spotlight/index.ts

@@ -0,0 +1 @@
+export { default as Spotlight } from "./Spotlight.svelte";