@proyecto-viviana/ui 0.6.2 → 0.8.0-rc.0

package/src/provider/index.tsx

@@ -1,24 +1,31 @@
-import {
-  type JSX,
-  type ParentProps,
-  createContext,
-  createMemo,
-  mergeProps,
-  splitProps,
-  useContext,
-} from "solid-js";
-import {
-  I18nProvider,
-  ModalProvider,
-  isRTL,
-  useLocale,
-  useModalProvider,
-  type Direction,
-} from "@proyecto-viviana/solidaria";
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/Provider.tsx
+
+// Port of packages/@react-spectrum/s2/src/Provider.tsx.
+import { createContext, createMemo, useContext } from "solid-js";
+import type { ParentProps } from "solid-js";
+import type { JSX } from "@solidjs/web";
+// Narrow subpaths, not the root barrel: a consumer that renders only a Provider
+// must not pull the whole primitive surface in with it. `guard:entry-import-budget`
+// holds the ceiling this keeps.
+import { I18nProvider, isRTL, useLocale, type Direction } from "@proyecto-viviana/solidaria/i18n";
+import { ModalProvider, useModalProvider } from "@proyecto-viviana/solidaria/overlays";
 import { mergeStyles } from "../style/runtime";
 import { setColorScheme, style as s2Style } from "../style" with { type: "macro" };
 import type { StyleString } from "../style";
 import { generateDefaultColorSchemeStyles } from "../s2-internal/page.macro" with { type: "macro" };
+import { mergeProps, splitProps } from "@proyecto-viviana/solidaria/utils";
 
 export type ColorScheme = "light" | "dark" | "light dark";
 export type Scale = "medium" | "large";
@@ -122,12 +129,24 @@ export function useProviderProps<T extends object>(props: T): T {
 
   return mergeProps(
     {
-      isQuiet: context.isQuiet,
-      isEmphasized: context.isEmphasized,
-      isDisabled: context.isDisabled,
-      isRequired: context.isRequired,
-      isReadOnly: context.isReadOnly,
-      validationState: context.validationState,
+      get isQuiet() {
+        return context.isQuiet;
+      },
+      get isEmphasized() {
+        return context.isEmphasized;
+      },
+      get isDisabled() {
+        return context.isDisabled;
+      },
+      get isRequired() {
+        return context.isRequired;
+      },
+      get isReadOnly() {
+        return context.isReadOnly;
+      },
+      get validationState() {
+        return context.validationState;
+      },
     } as unknown as Partial<T>,
     props,
   ) as T;
@@ -267,9 +286,9 @@ export function Provider(props: ProviderProps): JSX.Element {
   }));
 
   return (
-    <ProviderContext.Provider value={providerValue}>
-      <ThemeContext.Provider value={providerValue}>
-        <ColorSchemeContext.Provider value={colorScheme()}>
+    <ProviderContext value={providerValue}>
+      <ThemeContext value={providerValue}>
+        <ColorSchemeContext value={colorScheme()}>
           <I18nProvider locale={locale()}>
             <ModalProvider>
               <ProviderRoot
@@ -283,8 +302,11 @@ export function Provider(props: ProviderProps): JSX.Element {
               </ProviderRoot>
             </ModalProvider>
           </I18nProvider>
-        </ColorSchemeContext.Provider>
-      </ThemeContext.Provider>
-    </ProviderContext.Provider>
+        </ColorSchemeContext>
+      </ThemeContext>
+    </ProviderContext>
   );
 }
+
+export { createThemeTransition } from "./theme-transition";
+export type { ThemeTransitionOptions } from "./theme-transition";

package/src/provider/theme-transition.ts

@@ -0,0 +1,244 @@
+/* The register's theme swap. Ported from the frozen external design repository's
+ * framework-neutral `glasselated.js` (`dissolveWipe`; see CREDITS.md,
+ * "Glasselated design lane") and replacing the older `dualWipe`, which covered
+ * the page with a low-resolution guess at its own layout before swapping.
+ *
+ * There is no intermediate cover here: a frozen clone of the old theme sits over
+ * the viewport, the live tree swaps underneath it immediately, and a hard-edged
+ * radial mask erases the clone from the click outward. Every pixel is therefore
+ * either fully old or fully new, and the boundary is a dithered band — the same
+ * pixel grammar as the rest of the register.
+ *
+ * The functional outcome never depends on the animation: the swap happens before
+ * the first frame, and a failsafe timer removes the clone even if rAF never runs
+ * (background tab, throttled renderer). Under `prefers-reduced-motion` the swap
+ * is instant and nothing is cloned. */
+import { onCleanup } from "solid-js";
+
+export interface ThemeTransitionOptions {
+  /** Where the wave starts, in viewport pixels. @default the last pointerdown, else the viewport centre */
+  readonly origin?: { readonly x: number; readonly y: number } | undefined;
+  /** @default 640 */
+  readonly dur?: number | undefined;
+  /** Width of the dithered wavefront, in pixels. @default 56 */
+  readonly band?: number | undefined;
+  /** Dither cell, in pixels. @default 8 */
+  readonly tile?: number | undefined;
+  /** Colour of the sparkle on the wavefront. @default the register's accent pink */
+  readonly accent?: string | undefined;
+  /** @default true */
+  readonly sparkle?: boolean | undefined;
+  /** Runs once the clone is gone, animated or not. */
+  readonly onDone?: (() => void) | undefined;
+}
+
+/* An irregular wavefront: a fractal-noise tile intersected with the ring, so the
+ * boundary is noisy rather than a clean expanding circle. */
+const GRAIN_TILE = `url("data:image/svg+xml,${encodeURIComponent(
+  "<svg xmlns='http://www.w3.org/2000/svg' width='256' height='256'><filter id='g'>" +
+    "<feTurbulence type='fractalNoise' baseFrequency='0.045' numOctaves='3' seed='7' stitchTiles='stitch'/>" +
+    "<feColorMatrix type='matrix' values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 6 -2.6'/></filter>" +
+    "<rect width='100%' height='100%' filter='url(#g)' fill='#000'/></svg>",
+)}")`;
+
+const CHECKER = "repeating-conic-gradient(#000 0% 25%, transparent 0% 50%)";
+/* Beyond the band the old theme is still solid. */
+const SOLID =
+  "radial-gradient(circle at var(--gl-ox) var(--gl-oy), transparent calc(var(--gl-r) + var(--gl-band) / 2), #000 calc(var(--gl-r) + var(--gl-band) / 2 + 0.5px))";
+/* Inside the band the old theme thins out toward the new side. */
+const RING =
+  "radial-gradient(circle at var(--gl-ox) var(--gl-oy), transparent calc(var(--gl-r) - var(--gl-band) / 2), rgba(0, 0, 0, 0.15) calc(var(--gl-r) - var(--gl-band) / 2 + 1px), rgba(0, 0, 0, 0.6) var(--gl-r), #000 calc(var(--gl-r) + var(--gl-band) / 2), transparent calc(var(--gl-r) + var(--gl-band) / 2 + 0.5px))";
+/* The snapshot must not keep animating, and it must not re-run entrance animations. */
+const FREEZE_CSS =
+  "[data-gl-clone] * { animation-play-state: paused !important; transition: none !important }" +
+  "[data-gl-clone] .boot, [data-gl-clone] .typed { animation-delay: -100s !important }";
+
+function prefersReducedMotion(): boolean {
+  return (
+    typeof window !== "undefined" &&
+    typeof window.matchMedia === "function" &&
+    window.matchMedia("(prefers-reduced-motion: reduce)").matches
+  );
+}
+
+function setMask(
+  element: HTMLElement,
+  layers: readonly string[],
+  sizes: string,
+  repeat: string,
+): void {
+  const image = layers.join(", ");
+  element.style.setProperty("-webkit-mask-image", image);
+  element.style.setProperty("mask-image", image);
+  element.style.setProperty("-webkit-mask-size", sizes);
+  element.style.setProperty("mask-size", sizes);
+  element.style.setProperty("-webkit-mask-repeat", repeat);
+  element.style.setProperty("mask-repeat", repeat);
+}
+
+/**
+ * Solid primitive: returns a `transition(onSwap)` that swaps the theme under a
+ * pixel-dissolve of the outgoing one. `onSwap` does the actual swap (set the
+ * color scheme, flip the attribute) and is always called exactly once, whether
+ * or not the animation runs.
+ */
+export function createThemeTransition(
+  getHost: () => HTMLElement | undefined,
+  options: ThemeTransitionOptions = {},
+): (onSwap: () => void) => void {
+  /* Captured, so the origin is the toggle the user actually pressed even when the
+   * handler stops the event on the way down. */
+  let lastClick: { x: number; y: number } | undefined;
+  if (typeof document !== "undefined") {
+    /* Bound now rather than on mount: the listener has to be in place for the very
+     * first click, which may land before effects have flushed. */
+    const onPointerDown = (event: PointerEvent): void => {
+      lastClick = { x: event.clientX, y: event.clientY };
+    };
+    document.addEventListener("pointerdown", onPointerDown, true);
+    onCleanup(() => {
+      document.removeEventListener("pointerdown", onPointerDown, true);
+    });
+  }
+
+  let mounted: HTMLElement | undefined;
+  const dropClone = (): void => {
+    mounted?.remove();
+    mounted = undefined;
+  };
+  onCleanup(dropClone);
+
+  return (onSwap: () => void): void => {
+    const host = getHost();
+    dropClone();
+    if (!host || prefersReducedMotion()) {
+      onSwap();
+      options.onDone?.();
+      return;
+    }
+
+    const vw = window.innerWidth;
+    const vh = window.innerHeight;
+    const origin = options.origin ?? lastClick ?? { x: vw / 2, y: vh / 2 };
+    const dur = options.dur ?? 640;
+    const band = options.band ?? 56;
+    const tile = options.tile ?? 8;
+    const maxR = Math.max(
+      Math.hypot(origin.x, origin.y),
+      Math.hypot(vw - origin.x, origin.y),
+      Math.hypot(origin.x, vh - origin.y),
+      Math.hypot(vw - origin.x, vh - origin.y),
+    );
+
+    const rect = host.getBoundingClientRect();
+    const inner = host.cloneNode(true) as HTMLElement;
+    inner.setAttribute("data-gl-clone", "");
+    inner.removeAttribute("id");
+    inner.style.cssText += `;position:fixed;left:${String(rect.left)}px;top:${String(rect.top)}px;width:${String(rect.width)}px;height:${String(rect.height)}px;margin:0;pointer-events:none;overflow:hidden;will-change:mask-position;`;
+
+    /* cloneNode does not copy scroll offsets, and a snapshot scrolled back to the
+     * top is visibly not the page the user was looking at. */
+    const source = host.querySelectorAll("*");
+    const copies = inner.querySelectorAll("*");
+    for (let i = 0; i < source.length; i++) {
+      const from = source[i] as HTMLElement;
+      const to = copies[i] as HTMLElement | undefined;
+      if (!to) break;
+      if (from.scrollTop) to.scrollTop = from.scrollTop;
+      if (from.scrollLeft) to.scrollLeft = from.scrollLeft;
+    }
+    const freeze = document.createElement("style");
+    freeze.textContent = FREEZE_CSS;
+    inner.appendChild(freeze);
+
+    inner.style.setProperty("--gl-ox", `${String(origin.x - rect.left)}px`);
+    inner.style.setProperty("--gl-oy", `${String(origin.y - rect.top)}px`);
+    inner.style.setProperty("--gl-r", "0px");
+    inner.style.setProperty("--gl-band", `${String(band)}px`);
+    setMask(
+      inner,
+      [RING, GRAIN_TILE, CHECKER],
+      `100% 100%, 256px 256px, ${String(tile)}px ${String(tile)}px`,
+      "no-repeat, repeat, repeat",
+    );
+    inner.style.setProperty("-webkit-mask-composite", "source-in, source-in");
+    inner.style.setProperty("mask-composite", "intersect, intersect");
+
+    const outer = inner.cloneNode(true) as HTMLElement;
+    setMask(outer, [SOLID], "100% 100%", "no-repeat");
+    outer.style.removeProperty("mask-composite");
+    outer.style.removeProperty("-webkit-mask-composite");
+
+    const wrap = document.createElement("div");
+    wrap.setAttribute("data-gl-clone-wrap", "");
+    wrap.style.cssText = "position:fixed;inset:0;z-index:2147483000;pointer-events:none;";
+    wrap.append(outer, inner);
+    document.body.appendChild(wrap);
+    mounted = wrap;
+
+    /* The snapshot is frozen, so its cards must not keep tracking the live cursor. */
+    wrap.querySelectorAll<HTMLElement>("[data-mesh]").forEach((card) => {
+      card.style.setProperty("--mx", "-999px");
+      card.style.setProperty("--my", "-999px");
+    });
+
+    onSwap();
+
+    let canvas: HTMLCanvasElement | undefined;
+    let ctx: CanvasRenderingContext2D | null = null;
+    if (options.sparkle !== false) {
+      canvas = document.createElement("canvas");
+      canvas.width = vw;
+      canvas.height = vh;
+      canvas.style.cssText = "position:fixed;inset:0;z-index:2147483001;pointer-events:none;";
+      document.body.appendChild(canvas);
+      ctx = canvas.getContext("2d");
+    }
+
+    const accent = options.accent ?? "#ff9edb";
+    let start: number | null = null;
+    let done = false;
+    let failsafe = 0;
+    const cleanup = (): void => {
+      if (done) return;
+      done = true;
+      window.clearTimeout(failsafe);
+      wrap.remove();
+      canvas?.remove();
+      if (mounted === wrap) mounted = undefined;
+      options.onDone?.();
+    };
+
+    const frame = (ts: number): void => {
+      if (done) return;
+      start ??= ts;
+      const p = Math.min(1, (ts - start) / dur);
+      const eased = 1 - (1 - p) ** 2;
+      const r = eased * (maxR + band);
+      outer.style.setProperty("--gl-r", `${String(r)}px`);
+      inner.style.setProperty("--gl-r", `${String(r)}px`);
+      if (ctx) {
+        ctx.clearRect(0, 0, vw, vh);
+        if (p < 0.92) {
+          ctx.fillStyle = accent;
+          const n = Math.max(24, Math.floor(r / 6));
+          for (let k = 0; k < n; k++) {
+            if ((k * 7 + Math.floor(p * 60)) % 4 !== 0) continue;
+            const a = (k / n) * Math.PI * 2 + p * 0.7;
+            const jr = r + (((k * 37) % 11) - 5) * (band / 12);
+            const x = Math.floor((origin.x + Math.cos(a) * jr) / tile) * tile;
+            const y = Math.floor((origin.y + Math.sin(a) * jr) / tile) * tile;
+            ctx.fillRect(x, y, tile, tile);
+          }
+        }
+      }
+      if (p >= 1) {
+        cleanup();
+        return;
+      }
+      requestAnimationFrame(frame);
+    };
+    requestAnimationFrame(frame);
+    failsafe = window.setTimeout(cleanup, dur + 300);
+  };
+}

package/src/radio/index.tsx

@@ -1,14 +1,29 @@
 // @ts-nocheck
+
+/*
+ * Copyright 2024 Adobe. All rights reserved.
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/RadioGroup.tsx
+
+// Port of packages/@react-spectrum/s2/src/RadioGroup.tsx.
+
 import {
   children as resolveChildren,
-  mergeProps,
   Show,
-  splitProps,
-  type JSX,
   createContext,
   createUniqueId,
   useContext,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import {
   RadioGroup as HeadlessRadioGroup,
   Radio as HeadlessRadio,
@@ -21,12 +36,11 @@ import {
 // createRadioGroup mints them (via createField) and threads them onto both the
 // group node and every child radio's aria-describedby; the styled help-text
 // nodes below read the same ids back so the associations resolve identically.
-import { radioGroupData } from "@proyecto-viviana/solidaria";
+import { mergeProps, radioGroupData } from "@proyecto-viviana/solidaria";
 import type { StyleString } from "../style";
 import { baseColor, focusRing, style } from "../style" with { type: "macro" };
 import {
   controlFont,
-  controlSize,
   field,
   fieldLabel,
   getAllowedOverrides,
@@ -35,8 +49,11 @@ import { Text } from "../text";
 import { CenterBaseline } from "../icon/center-baseline";
 import AlertTriangleIcon from "../icon/s2wf-icons/AlertTriangleIcon";
 import AsteriskIcon from "../icon/ui-icons/Asterisk";
+import { createStringFormatter } from "@proyecto-viviana/solidaria";
+import { s2IntlStrings } from "../intl";
 import { useProviderProps } from "../provider";
 import { FormContext, useFormProps, useIsInForm } from "../form";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -212,7 +229,7 @@ const radioGroupHelpText = style<RadioGroupStyleState>({
   color: {
     default: "neutral-subdued",
     isInvalid: {
-      default: "negative",
+      default: "negative-1000",
       forcedColors: "Mark",
     },
     isDisabled: {
@@ -262,21 +279,57 @@ const wrapper = style<RadioStyleState & { isInForm?: boolean }>(
 
 const circle = style<RadioStyleState>({
   ...focusRing(),
-  size: controlSize("sm"),
+  /* Size S is the register's PIXEL radio, not a small Spectrum one. The poll rows
+   * draw the choice as a 12x12 square at `border: 2px solid` with no radius
+   * ("Terminal Glass App.dc.html":335), so S diverges from `controlSize("sm")` in
+   * three coupled ways — 14->12, `full`->`none`, 1px->2px — and every other size
+   * keeps the Spectrum circle untouched. Spelled flat rather than spread from
+   * `controlSize("sm")` because the S entry is the one being overridden. */
+  size: {
+    default: 16,
+    size: {
+      S: 12,
+      L: 18,
+      XL: 20,
+    },
+  },
   flexShrink: 0,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
   transition: "default",
-  borderRadius: "full",
+  borderRadius: {
+    default: "full",
+    size: {
+      S: "none",
+    },
+  },
   borderStyle: "solid",
   boxSizing: "border-box",
   borderWidth: {
     default: 1,
     isSelected: "calc((self(height) - (4 / 16) * 1rem) / 2)",
+    // `size` LAST so it wins the last-match-wins ordering for S+selected. The
+    // swelling border above is how M/L/XL punch their 4px centre dot; at S the
+    // handoff has no dot at all — the square floods edge to edge — so S must hold
+    // its 2px edge in BOTH states and let `backgroundColor` do the filling.
+    size: {
+      S: 2,
+    },
   },
   forcedColorAdjust: "none",
-  backgroundColor: "well",
+  backgroundColor: {
+    default: "well",
+    isSelected: {
+      default: "well",
+      // Only the pixel radio fills. The circle sizes keep `well` showing through
+      // as their dot's ground; overriding the fill for all sizes would erase the
+      // dot by painting it the same colour as the swollen border around it.
+      size: {
+        S: baseColor("accent-900"),
+      },
+    },
+  },
   borderColor: {
     default: baseColor("gray-800"),
     forcedColors: "ButtonBorder",
@@ -292,6 +345,12 @@ const circle = style<RadioStyleState>({
       // backgroundColor map it fills through there.
       default: baseColor("gray-800"),
       isEmphasized: baseColor("accent-900"),
+      // The pixel radio's edge is its fill: a `gray-800` ring around an
+      // `accent-900` square reads as a mis-selected control, so S takes the accent
+      // in the non-emphasized case too.
+      size: {
+        S: baseColor("accent-900"),
+      },
       forcedColors: "Highlight",
     },
     isInvalid: {
@@ -352,6 +411,14 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
   const isInForm = useIsInForm();
   const formContext = useContext(FormContext);
   const providerProps = useProviderProps(useFormProps(props));
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useContext(RadioGroupContext), props.slot);
   const defaultProps: Partial<RadioGroupProps> = {
     orientation: "vertical",
@@ -359,7 +426,7 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
     labelAlign: "start",
     necessityIndicator: "icon",
   };
-  const mergedProps = mergeProps(defaultProps, providerProps, contextProps ?? {}, props);
+  const mergedProps = mergeProps(defaultProps, flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "size",
     "orientation",
@@ -383,6 +450,7 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
   const labelPosition = () => local.labelPosition ?? "top";
   const labelAlign = () => local.labelAlign ?? "start";
   const necessityIndicator = () => local.necessityIndicator ?? "icon";
+  const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
   const idBase = createUniqueId();
   const labelId = `${idBase}-label`;
   const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);
@@ -433,7 +501,9 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
                   when={necessityIndicator() === "icon"}
                   fallback={
                     <span aria-hidden={headlessProps.isRequired ? true : undefined}>
-                      {headlessProps.isRequired ? "(required)" : "(optional)"}
+                      {stringFormatter().format(
+                        headlessProps.isRequired ? "label.(required)" : "label.(optional)",
+                      )}
                     </span>
                   }
                 >
@@ -459,7 +529,7 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
           orientation: local.orientation,
         })}
       >
-        <FormContext.Provider
+        <FormContext
           value={{
             ...(formContext ?? {}),
             get size() {
@@ -468,7 +538,7 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
             isRequired: undefined,
           }}
         >
-          <RadioContext.Provider
+          <RadioContext
             value={{
               get isEmphasized() {
                 return local.isEmphasized;
@@ -476,8 +546,8 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
             }}
           >
             {local.children}
-          </RadioContext.Provider>
-        </FormContext.Provider>
+          </RadioContext>
+        </FormContext>
       </div>
       {/* Byte-faithful to upstream Field.tsx HelpText: the description renders a
           RAC `<Text slot="description">` (a `<span>`), not a `<div>`. The id is
@@ -512,7 +582,7 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
   );
 
   return (
-    <RadioStyleContext.Provider
+    <RadioStyleContext
       value={{
         get size() {
           return local.size;
@@ -548,7 +618,7 @@ export function RadioGroup(props: RadioGroupProps): JSX.Element {
       >
         {renderChildren}
       </HeadlessRadioGroup>
-    </RadioStyleContext.Provider>
+    </RadioStyleContext>
   );
 }
 
@@ -559,8 +629,16 @@ export function Radio(props: RadioProps): JSX.Element {
   const groupStyleContext = useContext(RadioStyleContext);
   const isInForm = useIsInForm();
   const providerProps = useProviderProps(useFormProps(props));
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useContext(RadioContext), props.slot);
-  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props);
+  const mergedProps = mergeProps(flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "size",
     "isEmphasized",

package/src/s2-internal/page.macro.ts

@@ -1,4 +1,5 @@
 // @ts-nocheck
+
 /*
  * Copyright 2024 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -11,7 +12,10 @@
  * governing permissions and limitations under the License.
  */
 
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/page.macro.ts
+
 import tokens from "@adobe/spectrum-tokens/dist/json/variables.json";
+
 import type { MacroContext } from "@parcel/macros";
 
 function colorToken(token: (typeof tokens)["gray-25"]) {