@recursica/adapter-mantine-v8 1.0.0

package/src/components/Label/Label.tsx

@@ -0,0 +1,113 @@
+import React, { forwardRef } from "react";
+import { Input, type InputLabelProps } from "@mantine/core";
+import {
+  filterStylingProps,
+  omitUnsupportedProps,
+  mergeClassNames,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Label.module.css";
+
+import { type RecursicaLabelProps } from "@recursica/adapter-common";
+
+export type LabelProps = RecursicaOverStyled<
+  Omit<InputLabelProps, "size"> & RecursicaLabelProps
+>;
+
+export const Label = forwardRef<HTMLLabelElement, LabelProps>(function Label(
+  {
+    labelSize = "default",
+    labelAlignment,
+    required = false,
+    labelOptionalText,
+    labelWithEditIcon,
+    labelActionArea,
+    onLabelEditClick,
+    children,
+    overStyled = false,
+    ...rest
+  },
+  ref,
+) {
+  const resolvedAlignment = labelAlignment || "left";
+
+  let resolvedOptionalText: React.ReactNode | undefined;
+  if (!required) {
+    if (labelOptionalText === true) resolvedOptionalText = "optional";
+    else if (labelOptionalText) resolvedOptionalText = labelOptionalText;
+  }
+
+  // Props this component intentionally doesn't support — deleted at runtime so they can't leak
+  // through even if a caller forces them via plain JavaScript, bypassing the `Omit<>` above.
+  const UNSUPPORTED_PROPS = [
+    "size", // Recursica controls label sizing via `labelSize` + design tokens, not Mantine's native `size`.
+  ] as const satisfies readonly (keyof InputLabelProps)[];
+
+  const sanitizedProps = omitUnsupportedProps(
+    filterStylingProps(rest, overStyled),
+    UNSUPPORTED_PROPS,
+  );
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames = mergeClassNames(
+    {
+      label: styles.root,
+      required: styles.required,
+    },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return (
+    <Input.Label
+      ref={ref}
+      {...sanitizedProps}
+      className={finalClass}
+      classNames={mergedClassNames}
+      data-size={labelSize}
+      data-alignment={resolvedAlignment}
+      required={required && !labelWithEditIcon}
+    >
+      <span className={styles.labelText}>{children}</span>
+      {resolvedOptionalText && (
+        <span className={styles.optionalText}>
+          {typeof resolvedOptionalText === "string"
+            ? `(${resolvedOptionalText})`
+            : resolvedOptionalText}
+        </span>
+      )}
+      {labelActionArea ? (
+        <span className={styles.actionAreaWrapper}>{labelActionArea}</span>
+      ) : labelWithEditIcon ? (
+        <button
+          type="button"
+          className={styles.editIconWrapper}
+          data-replaces-asterisk={required ? "true" : undefined}
+          onClick={onLabelEditClick}
+          aria-label="Edit"
+        >
+          <svg
+            width="16"
+            height="16"
+            viewBox="0 0 16 16"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M11.5303 2.46967C11.8232 2.17678 12.2981 2.17678 12.591 2.46967L13.5303 3.40898C13.8232 3.70188 13.8232 4.17675 13.5303 4.46964L5.61288 12.3871C5.45268 12.5473 5.24434 12.6483 5.01809 12.6766L2.39534 13.0044C2.10091 13.0412 1.83856 12.7789 1.87538 12.4845L2.2032 9.86175C2.23147 9.63551 2.3325 9.42716 2.4927 9.26696L11.5303 2.46967Z"
+              stroke="currentColor"
+              strokeLinecap="round"
+              strokeLinejoin="round"
+            />
+          </svg>
+        </button>
+      ) : null}
+    </Input.Label>
+  );
+});
+
+Label.displayName = "Label";

package/src/components/Label/USAGE.md

@@ -0,0 +1,47 @@
+# Label - Usage Guide
+
+This document describes how to integrate and use the `Label` component in your projects using `@recursica/adapter-mantine-v8`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Label } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Label } from "@recursica/adapter-mantine-v8";
+
+export default function Demo() {
+  return <Label required>Field Label</Label>;
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/adapter-mantine-v8` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Behavior Notes
+
+- A label cannot be both required and optional: if `required` is `true`, `optionalText` is not rendered.
+- Set `optionalText` to `true` to render the default "(Optional)" text, or pass a custom string for different wording.
+- `withEditIcon` and `required` are mutually exclusive: when both are set, the edit icon is shown in place of the required asterisk.
+- `labelSize` only affects layout when the surrounding form uses `formLayout="side-by-side"`, where it constrains the label's width.
+- `Label` does not currently support a `description` prop.
+- The edit icon does not currently have a distinct hover background.

package/src/components/Label/index.ts

@@ -0,0 +1 @@
+export * from "./Label";

package/src/components/Layer/USAGE.md

@@ -0,0 +1,54 @@
+# Layer - Usage Guide
+
+This document describes how to integrate and use the `Layer` component in your projects using `@recursica/adapter-mantine-v8`.
+
+> [!NOTE] > `Layer` is defined once in `@recursica/adapter-common` and re-exported here so it shares the exact same behavior across every Recursica adapter.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Layer } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+`Layer` sets `data-recursica-layer` on its root element, which is what makes the theme+layer scoped CSS variables (surface color, border, elevation, padding) in `recursica_variables_scoped.css` actually apply. [`RecursicaThemeProvider`](../RecursicaThemeProvider/USAGE.md) automatically wraps your app in a `layer={0}` `Layer` by default (via its `initLayer0` prop), so you don't need to add one yourself for the base page. You still add `Layer`s manually for anything visually elevated above the page background:
+
+```tsx
+import {
+  RecursicaThemeProvider,
+  Layer,
+  Card,
+} from "@recursica/adapter-mantine-v8";
+
+function App() {
+  return (
+    <RecursicaThemeProvider theme="light">
+      {/* Page background/surface already uses layer 0, applied automatically */}
+      <Layer layer={1}>
+        <Card>Elevated content sits on layer 1</Card>
+      </Layer>
+    </RecursicaThemeProvider>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+> [!IMPORTANT]
+>
+> - **Layer 0 is automatic**: `RecursicaThemeProvider` applies it for you by default. Only opt out (`initLayer0={false}`) if you need to control exactly where layer 0 starts in the tree, or need `contentsOnly` on the base layer — see [RecursicaThemeProvider usage](../RecursicaThemeProvider/USAGE.md).
+> - **Layers 1–3 are manual**: Wrap any content that's visually elevated above the page background (a Card, Modal, Popover, etc.) in its own `<Layer layer={1|2|3}>`. Nesting `Layer`s is how Recursica communicates elevation to descendant components — do **not** pass a `layer` prop directly to other components; wrap them in a `Layer` instead (every other component's `USAGE.md` repeats this rule).
+> - **`contentsOnly`**: When `true`, `Layer` renders with `display: contents` and omits `data-recursica-layer` entirely — use this when you need a layer boundary in your component tree without adding an extra DOM box or applying layer styling (e.g. a purely structural wrapper).
+
+---
+
+## 4. Key Integration Features & Constraints
+
+`Layer` has no visual variants of its own — its entire purpose is to bind a subtree to a numbered layer's design tokens. It does not accept `overStyled`; instead, if you find yourself needing to override a layer's surface styling, that's a signal you may want a different layer number rather than an escape hatch.

package/src/components/Link/IMPLEMENTATION_NOTES.md

@@ -0,0 +1,19 @@
+# Link Component Implementation Notes
+
+## States in Design Tokens
+
+The design tokens (`recursica_variables_scoped.css`) provide the base link styling directly on `--recursica_ui-kit_components_link_properties_*` (no distinct `default` state), plus a `visited` variant that overrides only `colors_text-color`/`colors_icon-color`. Hover is not a per-component `link_variants_states_hover_*` token; it's driven by the brand-level `--recursica_brand_states_link_decoration` token (resolves to `underline`), applied on `.root:hover`. Earlier this token was exported as an invalid quoted string (`"underline"`), which silently failed and was mistaken for the token not existing at all — now fixed upstream to a bare keyword. There is no token for `active`. There isn't a per-component `focus` token either, but focus isn't left to the browser default: like every other interactive component (see Button), `.root:focus-visible` replaces the native outline with the global `--recursica_brand_states_focus_*` ring. This was previously missing here — Link (and anything composing it, e.g. Breadcrumb) fell back to the browser's native focus outline instead.
+
+## Overriding Mantine's underline Prop
+
+Mantine's `Anchor` component uses `underline="hover"` by default. Because our design system specifies exact `text-decoration` styles via CSS tokens, we explicitly pass `underline="never"` to the underlying Mantine component. This prevents Mantine from injecting its own text-decoration inline or via generic classnames, ensuring our scoped CSS remains the single source of truth.
+
+## Base Layout
+
+Mantine's `Anchor` renders an inline element by default and does not natively support `leftSection` like the `Button` component. To support an optional `icon` alongside the text, we enforce a baseline layout of `display: inline-flex` and `align-items: center` in `Link.module.css`.
+
+When an icon is present, the component conditionally passes a `data-has-icon` attribute to the root element. The CSS module uses this attribute to apply the `icon-text-gap` token via the CSS `gap` property.
+
+## Inner Wrappers
+
+The icon and children are wrapped in internal `<span>` tags (`.iconWrapper` and `.labelText` respectively). This follows the component development guide for structural robustness, allowing us to enforce specific sizing on the icon and intrinsic text truncation behavior if the link is placed in a bounded container.

package/src/components/Link/Link.module.css

@@ -0,0 +1,110 @@
+/* Brand-layer exemptions (recursica-allow-brand) — see recursica-token-analyzer README.md.
+ * Only source for link hover-underline; no per-component token exists (see IMPLEMENTATION_NOTES.md).
+ *   recursica-allow-brand: --recursica_brand_states_link_decoration
+ * Global focus-ring tokens (recursica_variables_scoped.css header, 'Hover & Focus states' —
+ * implicit rule for every interactive element; components must not define their own per-component
+ * treatment). Same pattern as Button.module.css.
+ *   recursica-allow-brand: --recursica_brand_states_focus_blur
+ *   recursica-allow-brand: --recursica_brand_states_focus_border-size
+ *   recursica-allow-brand: --recursica_brand_states_focus_color
+ *   recursica-allow-brand: --recursica_brand_states_focus_margin
+ */
+
+/* EXEMPTIONS:
+   - text_text-transform is ignored because links naturally inherit casing directly from text
+     children rather than requiring custom CSS transforms. */
+/* recursica-ignore: --recursica_ui-kit_components_link_properties_text_text-transform */
+
+/*
+HARDCODED VALUES:
+- display: inline-flex; (Base layout to align icon and text correctly)
+- align-items: center;
+- cursor: pointer;
+- text-decoration: none; (Overridden by our design tokens instead of using Mantine's underline prop)
+- color: inherit; (Reset before applying token)
+*/
+
+.root {
+  /* HARDCODE: base layout */
+  display: inline;
+  cursor: pointer;
+
+  /* HARDCODE: Reset underline and color so we can explicitly use our tokens */
+  text-decoration: none;
+  color: inherit;
+
+  /* Typography Tokens */
+  font-family: var(
+    --recursica_ui-kit_components_link_properties_text_font-family
+  );
+  font-size: var(--recursica_ui-kit_components_link_properties_text_font-size);
+  font-style: var(
+    --recursica_ui-kit_components_link_properties_text_font-style
+  );
+  font-weight: var(
+    --recursica_ui-kit_components_link_properties_text_font-weight
+  );
+  letter-spacing: var(
+    --recursica_ui-kit_components_link_properties_text_letter-spacing
+  );
+  line-height: var(
+    --recursica_ui-kit_components_link_properties_text_line-height
+  );
+  text-decoration: var(
+    --recursica_ui-kit_components_link_properties_text_text-decoration
+  );
+  color: var(--recursica_ui-kit_components_link_properties_colors_text-color);
+}
+
+.root[data-has-icon] {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--recursica_ui-kit_components_link_properties_icon-text-gap);
+}
+
+.root:visited {
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_visited_properties_colors_text-color
+  );
+}
+
+.root:hover {
+  text-decoration: var(--recursica_brand_states_link_decoration);
+}
+
+/* Focus State Mapping (native browser focus outline replaced with the recursica focus ring).
+   Was previously unset here, so Link (and anything using it, e.g. Breadcrumb) fell back to the
+   browser's native focus outline instead of the recursica ring. */
+.root:focus-visible {
+  outline: none;
+  box-shadow:
+    0 0 0 var(--recursica_brand_states_focus_border-size)
+      var(--recursica_brand_states_focus_color),
+    0 0 var(--recursica_brand_states_focus_blur)
+      var(--recursica_brand_states_focus_margin)
+      var(--recursica_brand_states_focus_color);
+}
+
+/* Icon Support */
+.iconWrapper {
+  /* HARDCODE: maintain intrinsic icon bounds */
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  width: var(--recursica_ui-kit_components_link_properties_icon-size);
+  height: var(--recursica_ui-kit_components_link_properties_icon-size);
+  color: var(--recursica_ui-kit_components_link_properties_colors_icon-color);
+}
+
+.root:visited .iconWrapper {
+  color: var(
+    --recursica_ui-kit_components_link_variants_states_visited_properties_colors_icon-color
+  );
+}
+
+/* Label text wrapper */
+.labelText {
+  /* HARDCODE: allows text truncation if bounded */
+  min-width: 0;
+}

package/src/components/Link/Link.stories.tsx

@@ -0,0 +1,58 @@
+/* eslint-disable @typescript-eslint/no-explicit-any */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import type { Meta, StoryObj } from "@storybook/react";
+import { Link } from "./Link";
+
+const meta: Meta<typeof Link> = {
+  title: "UI-Kit/Link",
+  component: Link,
+  tags: ["autodocs"],
+  args: {
+    children: "Link text",
+    href: "#",
+  },
+  render: ({ withLayer, layer, ...args }: any) => <Link {...args} />,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Link>;
+
+export const Default: Story = {};
+
+export const WithIcon: Story = {
+  args: {
+    icon: (
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
+        <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
+      </svg>
+    ),
+    children: "Link with Icon",
+  },
+};
+
+export const Polymorphic: Story = {
+  args: {
+    component: "button",
+    onClick: () => alert("Button clicked!"),
+    children: "Rendered as <button>",
+  },
+};
+
+export const InlineText: Story = {
+  render: () => (
+    <p>
+      Here is some text with an <Link href="#">inline link</Link> inside it.
+    </p>
+  ),
+};

package/src/components/Link/Link.test.tsx

@@ -0,0 +1 @@
+// Placeholder for future Link component tests. Add tests here if/when needed.

package/src/components/Link/Link.tsx

@@ -0,0 +1,67 @@
+import { forwardRef } from "react";
+import {
+  Anchor as MantineAnchor,
+  type AnchorProps as MantineAnchorProps,
+  createPolymorphicComponent,
+} from "@mantine/core";
+import {
+  filterStylingProps,
+  mergeClassNames,
+  type RecursicaOverStyled,
+} from "../../utils/filterStylingProps";
+import styles from "./Link.module.css";
+
+import { type RecursicaLinkProps } from "@recursica/adapter-common";
+
+export type LinkProps = RecursicaOverStyled<
+  Omit<MantineAnchorProps, "underline"> & Omit<RecursicaLinkProps, "component">
+>;
+
+const _Link = forwardRef<HTMLAnchorElement, LinkProps>(function Link(
+  { icon, children, overStyled = false, ...rest },
+  ref,
+) {
+  const sanitizedProps = filterStylingProps(rest, overStyled);
+  const restRecord = sanitizedProps as Record<string, unknown>;
+
+  const mergedClassNames = mergeClassNames(
+    { root: styles.root },
+    restRecord.classNames as Partial<Record<string, string>> | undefined,
+  );
+
+  const classNameProp = restRecord.className as string | undefined;
+  const finalClass = classNameProp
+    ? `${styles.root} ${classNameProp}`
+    : styles.root;
+
+  return (
+    <MantineAnchor
+      ref={ref}
+      {...(sanitizedProps as Record<string, unknown>)}
+      className={finalClass}
+      classNames={mergedClassNames}
+      underline="never"
+      {...(icon ? { "data-has-icon": "" } : {})}
+    >
+      {icon && (
+        <span className={styles.iconWrapper} aria-hidden>
+          {icon}
+        </span>
+      )}
+      <span className={styles.labelText}>{children}</span>
+    </MantineAnchor>
+  );
+});
+_Link.displayName = "Link";
+
+/**
+ * Recursica Link component wrapping Mantine's Anchor.
+ *
+ * Supports polymorphism via the `component` prop or `renderRoot` for custom element rendering (e.g. react-router Link).
+ * @example
+ * ```tsx
+ * <Link component="a" href="https://example.com">External Link</Link>
+ * <Link renderRoot={(props) => <RouterLink to="/home" {...props} />}>Home</Link>
+ * ```
+ */
+export const Link = createPolymorphicComponent<"a", LinkProps>(_Link);

package/src/components/Link/USAGE.md

@@ -0,0 +1,56 @@
+# Link - Usage Guide
+
+This document describes how to integrate and use the `Link` component in your projects using `@recursica/adapter-mantine-v8`.
+
+---
+
+## 1. Import Reference
+
+```tsx
+import { Link } from "@recursica/adapter-mantine-v8";
+```
+
+---
+
+## 2. Basic Example
+
+```tsx
+import React from "react";
+import { Link } from "@recursica/adapter-mantine-v8";
+
+export default function Demo() {
+  return (
+    <Link href="/dashboard" variant="inline">
+      Go to Dashboard
+    </Link>
+  );
+}
+```
+
+---
+
+## 3. Design System Integration
+
+All Recursica components in the `@recursica/adapter-mantine-v8` package adhere strictly to design system spacing, scaling, and behavior patterns.
+
+> [!IMPORTANT]
+>
+> - **Anti-override protection**: Rogues style injections (like inline `style` or arbitrary `className`) are automatically blocked by our prop layer unless `overStyled={true}` is explicitly provided.
+> - **No Direct Layers**: Do not pass a `layer` prop to this component. To place it on a specific visual layer, wrap it in a `<Layer layer={0|1|2|3}>` component natively.
+> - **Variables and Theming**: Styling is entirely determined by local CSS variables defined in `recursica_variables_scoped.css` and mapped in the component's CSS module.
+
+---
+
+## 4. Key Integration Features & Constraints
+
+## States in Design Tokens
+
+The design tokens (`recursica_variables_scoped.css`) provide the base link styling directly on `--recursica_ui-kit_components_link_properties_*` (no distinct `default` state), plus a `visited` variant that overrides only `colors_text-color`/`colors_icon-color`. There is no per-state token for `hover` anymore (a prior schema version had one); the component currently applies no distinct hover treatment beyond the browser's native `cursor: pointer`. There are no tokens for `active` or `focus` either; the component relies on the browser's default focus outline for accessibility unless overridden by a global reset.
+
+## Underline Behavior
+
+`Link` does not use Mantine's automatic hover-underline behavior; text decoration is fully controlled by the design system's tokens.
+
+## Icon Support
+
+When an `icon` is provided, it renders alongside the link text with spacing between them applied automatically via design tokens.

package/src/components/Link/index.ts

@@ -0,0 +1 @@
+export * from "./Link";

package/src/components/Loader/LOADER_IMPLEMENTATION_NOTES.md

@@ -0,0 +1,24 @@
+# Loader Implementation Notes
+
+## Architecture & Integration
+
+The `Loader` component acts as a strictly tokenized wrapper bridging the Recursica UI-Kit `loader` variables to the generic Mantine `@mantine/core` `Loader` primitive.
+
+### Key Decisions:
+
+- **Variant Mapping:** Recursica's `variant` directly proxies to Mantine's `type` prop for `"oval" | "bars" | "dots"`.
+- **Property Overrides Disabled:** Natively overriding specific structural variants directly on the JSX interface like `thickness` and `borderRadius` has been intentionally omitted. Component rendering relies entirely on variables exposed by the underlying UI Kit mappings tied to the size prop.
+
+### Token Mapping:
+
+Sizes are bound through `data-size` attributes (`sm`, `md`, `lg` parsing to target `<div data-size="small">`, etc.).
+
+Mantine natively sets sizing dynamically at the component root and parses thickness/variants differently natively (e.g., `oval` styles its geometry strictly via CSS `border`, while `bars` and `dots` utilize specific DOM inner spans `span.dot` / `span.bar`).
+
+#### Specific CSS Targeting Hacks Used
+
+- `border-width` and `border-radius` structurally style the `thickness` and `border-radius` configuration of the `oval` variant on the `::after` pseudo-element by resolving `--recursica_ui-kit_components_loader_variants_sizes_..._properties_thickness` and `_border-radius`.
+
+### Unsupported Properties
+
+- **xs and xl Sizing:** These sizes are explicitly unsupported in the Recursica standard logic (as surfaced in `filterStylingProps` and UI Kit mappings). Attempting to use them will safely default back or fallthrough statically unless defined later. See `COMPONENT_ISSUES.md`.

package/src/components/Loader/Loader.animate.dom.test.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { describe, it, expect } from "vitest";
+import { createRoot, type Root } from "react-dom/client";
+import { flushSync } from "react-dom";
+import { MantineProvider } from "@mantine/core";
+import "@mantine/core/styles.css";
+import { Loader } from "./Loader";
+
+function mount(node: React.ReactElement): {
+  container: HTMLElement;
+  root: Root;
+} {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  flushSync(() => root.render(node));
+  return { container, root };
+}
+
+function unmount({ container, root }: { container: HTMLElement; root: Root }) {
+  root.unmount();
+  container.remove();
+}
+
+/**
+ * `animate={false}` must deterministically freeze every variant — including
+ * the bars'/dots' individually-animated child spans that Mantine renders
+ * without our own class names, so they can only be reached by a descendant
+ * selector, not the `data-variant`-scoped rules the size/thickness CSS uses.
+ */
+describe("Loader animate prop", () => {
+  it.each(["oval", "bars", "dots"] as const)(
+    "freezes every animated element for variant=%s when animate is false, and animates by default",
+    (variant) => {
+      const animated = mount(
+        <MantineProvider defaultColorScheme="light">
+          <Loader variant={variant} />
+        </MantineProvider>,
+      );
+      const frozen = mount(
+        <MantineProvider defaultColorScheme="light">
+          <Loader variant={variant} animate={false} />
+        </MantineProvider>,
+      );
+
+      try {
+        const animatedRoot =
+          animated.container.querySelector("[data-variant]")!;
+        const frozenRoot = frozen.container.querySelector("[data-variant]")!;
+
+        const animatedTargets = [
+          animatedRoot,
+          ...Array.from(animatedRoot.querySelectorAll("*")),
+        ];
+        const frozenTargets = [
+          frozenRoot,
+          ...Array.from(frozenRoot.querySelectorAll("*")),
+        ];
+
+        // At least one element (or the root's own ::after, for oval) actually
+        // animates by default — otherwise this test would trivially pass.
+        const hasAnimation = (el: Element, pseudo?: string) =>
+          getComputedStyle(el, pseudo).animationName !== "none";
+        const animatedHasMotion =
+          animatedTargets.some((el) => hasAnimation(el)) ||
+          hasAnimation(animatedRoot, "::after");
+        expect(animatedHasMotion).toBe(true);
+
+        // Frozen: nothing animates, root included, pseudo-element included.
+        for (const el of frozenTargets) {
+          expect(getComputedStyle(el).animationName).toBe("none");
+        }
+        expect(getComputedStyle(frozenRoot, "::after").animationName).toBe(
+          "none",
+        );
+      } finally {
+        unmount(animated);
+        unmount(frozen);
+      }
+    },
+  );
+});