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

package/src/selectboxgroup/index.tsx

@@ -1,16 +1,31 @@
+/*
+ * Copyright 2025 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 CONDITIONS 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/SelectBoxGroup.tsx
+
+// Port of packages/@react-spectrum/s2/src/SelectBoxGroup.tsx.
+
 import {
   children as resolveChildren,
   createContext,
   createEffect,
   createMemo,
-  type JSX,
-  mergeProps,
   onCleanup,
   Show,
-  splitProps,
   createSignal,
   useContext,
+  createTrackedEffect,
 } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps } from "@proyecto-viviana/solidaria/utils";
 import {
   ListBox as HeadlessListBox,
   ListBoxOption as HeadlessListBoxOption,
@@ -23,9 +38,11 @@ import type { Key } from "@proyecto-viviana/solid-stately";
 import type { StyleString } from "../style";
 import { baseColor, focusRing, lightDark, style } from "../style" with { type: "macro" };
 import { mergeStyles } from "../style/runtime";
-import { useProviderProps } from "../provider";
+import { useProviderProps, type ProviderInheritedProps } from "../provider";
 import Checkmark from "../icon/ui-icons/Checkmark";
 import { pressScale } from "../pressScale";
+import { glassSurface } from "../s2-internal/style-utils" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -120,6 +137,20 @@ const selectBoxGroupStyles = style<{ orientation?: SelectBoxOrientation }>({
 
 const selectBoxStyles = style<ListBoxOptionRenderProps & { orientation?: SelectBoxOrientation }>({
   ...focusRing(),
+  /* A SelectBox is a CARD in the register's surface ladder, and now says so in one
+   * word instead of five hand-copied declarations. It was already most of the way
+   * there — `layer-2`, a 1px `border-subtle` edge, a rim — but it had assembled that
+   * by hand, and the three places it disagreed with the ladder were exactly the three
+   * a hand-assembled surface gets wrong:
+   *   - radius `panel` (14px), the PANEL rung. A card is 12px; a tile that curves more
+   *     than the panel holding it inverts the nesting the ladder encodes.
+   *   - `edge-glass`, the CONTROL rim (0.9/0.35). Cards are translucent, and on dark
+   *     that opaque-control rim outlines the tile like a button; `edge-glass-surface`
+   *     (0.45/0.09) is the surface rung.
+   *   - no backdrop blur at all, so the one thing that makes a glass surface glass was
+   *     missing and the tile read as a flat swatch over the page.
+   * State (hover/selected/disabled) stays declared below and wins over the spread. */
+  ...glassSurface("card"),
   display: "grid",
   gridAutoRows: "1fr",
   position: "relative",
@@ -202,9 +233,6 @@ const selectBoxStyles = style<ListBoxOptionRenderProps & { orientation?: SelectB
       vertical: "center",
     },
   },
-  borderRadius: "panel",
-  borderStyle: "solid",
-  borderWidth: 1,
   /* Viviana UI v2 (Glasselated): hover and selection moved from the shadow to the edge.
    * They used to be spelled in the boxShadow map below as emphasized/elevated/elevated —
    * three distinct cast shadows. Now that the theme repoints both of those tokens to the
@@ -234,7 +262,9 @@ const selectBoxStyles = style<ListBoxOptionRenderProps & { orientation?: SelectB
     isDisabled: "disabled",
   },
   boxShadow: {
-    default: "edge-glass",
+    // Restated as a map only to carry the disabled branch; the resting value must
+    // stay the surface rim the spread above established, not the control one.
+    default: "edge-glass-surface",
     isDisabled: "none",
   },
   cursor: {
@@ -251,26 +281,35 @@ const selectBoxSelectionIndicator = style({
   pointerEvents: "none",
 });
 
+/* The tile's selection mark is the same PIXEL box the Checkbox draws at size S —
+ * 14x14, 2px edge, square (checkbox/index.tsx, "Terminal Glass App.dc.html":242) —
+ * because it IS a checkbox to the reader, and two different checkbox shapes on one
+ * screen is the drift this register exists to stop.
+ *
+ * It also stops spelling its own colours as raw `light-dark(rgb(...))` literals. Those
+ * two values (#ffffff/#111111 fill, #292929/#dbdbdb edge) answer to no token in either
+ * scheme, so a theme flip moved every other surface on the tile and left this box
+ * behind. `well`/`well-border` are the register's field pair and follow the theme. */
 const selectBoxCheckboxBox = style<ListBoxOptionRenderProps>({
   ...focusRing(),
-  size: 16,
+  size: 14,
   flexShrink: 0,
   display: "flex",
   alignItems: "center",
   justifyContent: "center",
-  borderWidth: 1,
+  borderWidth: 2,
   boxSizing: "border-box",
   borderStyle: "solid",
-  borderRadius: "sm",
+  borderRadius: "none",
   transition: "default",
   forcedColorAdjust: "none",
   backgroundColor: {
-    default: "[light-dark(rgb(255, 255, 255), rgb(17, 17, 17))]",
-    isSelected: "neutral",
+    default: "well",
+    isSelected: baseColor("accent-900"),
     isDisabled: "disabled",
   },
   borderColor: {
-    default: "[light-dark(rgb(41, 41, 41), rgb(219, 219, 219))]",
+    default: "well-border",
     isDisabled: "disabled",
     isSelected: "transparent",
   },
@@ -355,12 +394,20 @@ const selectBoxLabel = style<ListBoxOptionRenderProps & { orientation?: SelectBo
  * SelectBoxGroup allows users to select one or more options from a list.
  */
 export function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>): JSX.Element {
-  const providerProps = useProviderProps(props);
+  const providerProps = useProviderProps(props) as SelectBoxGroupProps<T> & ProviderInheritedProps;
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(
     useContext(SelectBoxGroupContext) as SpectrumContextValue<SelectBoxGroupProps<T>>,
     props.slot,
   );
-  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props);
+  const mergedProps = mergeProps<SelectBoxGroupProps<T>>(flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "children",
     "orientation",
@@ -376,7 +423,9 @@ export function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>): JSX.Element {
   const orientation = (): SelectBoxOrientation => local.orientation ?? "vertical";
   const selectionMode = (): "single" | "multiple" =>
     local.selectionMode === "multiple" ? "multiple" : "single";
-  const [staticItems, setStaticItems] = createSignal<StaticSelectBoxItem[]>([]);
+  const [staticItems, setStaticItems] = createSignal<StaticSelectBoxItem[]>([], {
+    ownedWrite: true,
+  });
   const staticItemMap = new Map<Key, StaticSelectBoxItem>();
   const usesStaticChildren = () => headlessProps.items == null;
   const syncStaticItems = () => setStaticItems(Array.from(staticItemMap.values()));
@@ -458,12 +507,12 @@ export function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>): JSX.Element {
   };
 
   return (
-    <SelectBoxContext.Provider value={contextValue}>
-      <StaticSelectBoxCollectionContext.Provider
+    <SelectBoxContext value={contextValue}>
+      <StaticSelectBoxCollectionContext
         value={usesStaticChildren() ? staticCollectionContext : null}
       >
         {staticRegistrationChildren()}
-      </StaticSelectBoxCollectionContext.Provider>
+      </StaticSelectBoxCollectionContext>
       <HeadlessListBox
         {...headlessProps}
         ref={(element) => assignGroupRefs(element)}
@@ -483,7 +532,7 @@ export function SelectBoxGroup<T>(props: SelectBoxGroupProps<T>): JSX.Element {
       >
         {(item: T) => renderItem(item)}
       </HeadlessListBox>
-    </SelectBoxContext.Provider>
+    </SelectBoxContext>
   );
 }
 
@@ -577,7 +626,7 @@ export function SelectBox(props: SelectBoxProps): JSX.Element {
     "class",
     "ref",
   ]);
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (!staticCollection) {
       return;
     }
@@ -623,7 +672,9 @@ export function SelectBox(props: SelectBoxProps): JSX.Element {
 
   function SelectBoxContent(renderProps: ListBoxOptionRenderProps) {
     const resolvedChildren = resolveChildren(() => local.children);
-    createEffect(() => applySlotClasses(optionElement, renderProps, orientation(), isDisabled()));
+    createTrackedEffect(() =>
+      applySlotClasses(optionElement, renderProps, orientation(), isDisabled()),
+    );
 
     return (
       <>
@@ -634,7 +685,11 @@ export function SelectBox(props: SelectBoxProps): JSX.Element {
                 size="S"
                 class={selectBoxCheckboxIcon}
                 style={{
-                  "--iconPrimary": "var(--s2-container-bg, white)",
+                  // Same mark ink as the Checkbox: the deep well, stamped into the
+                  // accent fill (checkbox/index.tsx). `--s2-container-bg` was the
+                  // TILE's fill, which is now what the mark sits on top of, not
+                  // what it should be drawn in.
+                  "--iconPrimary": "var(--surface-well-deep)",
                   width: "10px",
                   height: "10px",
                 }}

package/src/separator/index.tsx

@@ -1,9 +1,26 @@
-import { type JSX, splitProps } from "solid-js";
+/*
+ * 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/Divider.tsx
+
+// Port of packages/@react-spectrum/s2/src/Divider.tsx.
+
+import type { JSX } from "@solidjs/web";
 import {
   Separator as HeadlessSeparator,
   type SeparatorProps as HeadlessSeparatorProps,
 } from "@proyecto-viviana/solidaria-components";
 import { style } from "../style" with { type: "macro" };
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 
 /**
  * The rule's colour weight.

package/src/shared-element/index.tsx

@@ -1,5 +1,5 @@
-import { splitProps } from "solid-js";
-import type { JSX } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   SharedElement as HeadlessSharedElement,
   SharedElementTransition as HeadlessSharedElementTransition,

package/src/skeleton/index.tsx

@@ -1,15 +1,33 @@
+/*
+ * 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/Skeleton.tsx
+// Ported to SolidJS for Proyecto Viviana; based on packages/@react-spectrum/s2/src/SkeletonCollection.tsx
+
+// Port of packages/@react-spectrum/s2/src/Skeleton.tsx.
+// Port of packages/@react-spectrum/s2/src/SkeletonCollection.tsx.
 import {
   createContext,
   createEffect,
   createMemo,
   createSignal,
   onCleanup,
-  type Accessor,
-  type JSX,
   useContext,
 } from "solid-js";
+import type { Accessor } from "solid-js";
+import type { JSX } from "@solidjs/web";
 import { createLeafComponent } from "@proyecto-viviana/solidaria-components";
 import { css } from "../style/style-macro" with { type: "macro" };
+import { skSweep } from "../style/motion" with { type: "macro" };
 import type { StyleString } from "../style";
 import { style } from "../style" with { type: "macro" };
 import { color } from "../style/spectrum-theme" with { type: "macro" };
@@ -41,15 +59,39 @@ export function useIsSkeleton(): Accessor<boolean> {
   return createIsSkeleton();
 }
 
+/* The register's loading state is a "dither shimmer", not a grey gradient sweep:
+ * a diagonal light band crossing the block, seen only through an 8px Bayer mask,
+ * so it reads as pixels lighting up in the same grammar as the theme wipe. Port
+ * of the handoff's `.sk` (glasselated.css). The sheen colour is a token because
+ * it has to invert per scheme; the sweep is a CSS animation on the pseudo-element
+ * (a pseudo cannot be reached by the Web Animations calls this module exposes),
+ * gated by the reduced-motion media condition rather than a runtime check so a
+ * server render and its hydration agree. */
 export const loadingStyle = css(
   `
-  background-image: linear-gradient(to right, ${color("gray-100")} 33%, light-dark(${color(
-    "gray-25",
-  )}, ${color("gray-300")}), ${color("gray-100")} 66%);
-  background-size: 300%;
+  position: relative;
+  overflow: hidden;
+  background: var(--surface-inset);
   * {
     visibility: hidden;
   }
+  &::after {
+    content: "";
+    position: absolute;
+    inset: 0;
+    pointer-events: none;
+    background: linear-gradient(100deg, transparent 34%, var(--sk-sheen) 50%, transparent 66%);
+    background-size: 240% 100%;
+    animation: ${skSweep()} 1.5s linear infinite;
+    mask-image: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='8'%20height='8'%3E%3Cg%20fill='%23fff'%3E%3Crect%20width='4'%20height='4'/%3E%3Crect%20x='4'%20y='4'%20width='4'%20height='4'%20fill-opacity='0.85'/%3E%3Crect%20x='4'%20width='4'%20height='4'%20fill-opacity='0.35'/%3E%3Crect%20y='4'%20width='4'%20height='4'%20fill-opacity='0.55'/%3E%3C/g%3E%3C/svg%3E");
+    mask-size: 8px 8px;
+    mask-repeat: repeat;
+  }
+  @media (prefers-reduced-motion: reduce) {
+    &::after {
+      animation: none;
+    }
+  }
 `,
   "L",
 );
@@ -89,6 +131,10 @@ function createPrefersReducedMotion(): Accessor<boolean> {
   return matches;
 }
 
+/* Kept for the components that already hold this ref (Image, Icon) and for any
+ * consumer animating its own gradient. The skeleton's own shimmer moved into
+ * `loadingStyle`'s pseudo-element when the register re-valued it, and a pseudo
+ * cannot be driven from here. */
 export function useLoadingAnimation(
   isAnimating: MaybeAccessor<boolean>,
 ): (element: Element | null) => void {
@@ -96,22 +142,28 @@ export function useLoadingAnimation(
   const [element, setElement] = createSignal<Element | null>(null);
   let animation: Animation | undefined;
 
-  createEffect(() => {
-    const target = element();
-    const shouldAnimate = access(isAnimating) && !reduceMotion();
-
-    if (target && shouldAnimate && !animation && typeof target.animate === "function") {
-      animation = target.animate([{ backgroundPosition: "100%" }, { backgroundPosition: "0%" }], {
-        duration: 2000,
-        iterations: Infinity,
-        easing: "ease-in-out",
-      });
-      animation.startTime = 0;
-    } else if ((!target || !shouldAnimate) && animation) {
-      animation.cancel();
-      animation = undefined;
-    }
-  });
+  createEffect(
+    () => {
+      const target = element();
+      const shouldAnimate = access(isAnimating) && !reduceMotion();
+      return { target, shouldAnimate };
+    },
+    ({ target, shouldAnimate }) => {
+      if (target && shouldAnimate && !animation && typeof target.animate === "function") {
+        animation = target.animate([{ backgroundPosition: "100%" }, { backgroundPosition: "0%" }], {
+          duration: 2000,
+          iterations: Infinity,
+          easing: "ease-in-out",
+        });
+        animation.startTime = 0;
+        return;
+      }
+      if ((!target || !shouldAnimate) && animation) {
+        animation.cancel();
+        animation = undefined;
+      }
+    },
+  );
 
   onCleanup(() => {
     animation?.cancel();
@@ -126,18 +178,23 @@ export function useInertAttribute(
 ): (element: Element | null) => void {
   const [element, setElement] = createSignal<Element | null>(null);
 
-  createEffect(() => {
-    const target = element();
-    if (!target) {
-      return;
-    }
-
-    if (access(isInert)) {
-      target.setAttribute("inert", "true");
-    } else {
-      target.removeAttribute("inert");
-    }
-  });
+  createEffect(
+    () => {
+      const target = element();
+      const inert = access(isInert);
+      return { target, inert };
+    },
+    ({ target, inert }) => {
+      if (!target) {
+        return;
+      }
+      if (inert) {
+        target.setAttribute("inert", "true");
+      } else {
+        target.removeAttribute("inert");
+      }
+    },
+  );
 
   return setElement;
 }
@@ -145,7 +202,7 @@ export function useInertAttribute(
 export function Skeleton(props: SkeletonProps): JSX.Element {
   const isLoading = createMemo(() => props.isLoading);
 
-  return <SkeletonContext.Provider value={isLoading}>{props.children}</SkeletonContext.Provider>;
+  return <SkeletonContext value={isLoading}>{props.children}</SkeletonContext>;
 }
 
 export function SkeletonText(props: { children: JSX.Element }): JSX.Element {
@@ -200,7 +257,7 @@ export function SkeletonWrapper(props: { children: JSX.Element }): JSX.Element {
   }
 
   return (
-    <SkeletonContext.Provider value={null}>
+    <SkeletonContext value={null}>
       {isLoading() ? (
         <span
           ref={(element) => {
@@ -214,7 +271,7 @@ export function SkeletonWrapper(props: { children: JSX.Element }): JSX.Element {
       ) : (
         props.children
       )}
-    </SkeletonContext.Provider>
+    </SkeletonContext>
   );
 }
 

package/src/slider/RangeSlider.tsx

@@ -1,17 +1,35 @@
 // @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/RangeSlider.tsx
+
+// Port of packages/@react-spectrum/s2/src/RangeSlider.tsx.
+
 import {
-  type JSX,
   createContext,
   createEffect,
   createMemo,
   createSignal,
   createUniqueId,
-  mergeProps,
   Show,
-  splitProps,
   useContext,
+  createTrackedEffect,
 } from "solid-js";
-import { useLocale } from "@proyecto-viviana/solidaria";
+import type { JSX } from "@solidjs/web";
+import { mergeProps, createStringFormatter, useLocale } from "@proyecto-viviana/solidaria";
+import { ariaTrueFalse } from "@proyecto-viviana/solidaria/utils";
+import { s2IntlStrings } from "../intl";
 import type { StyleString } from "../style";
 import { focusRing, style } from "../style" with { type: "macro" };
 import {
@@ -24,6 +42,7 @@ import {
 } from "../s2-internal/style-utils" with { type: "macro" };
 import { useProviderProps } from "../provider";
 import { useFormProps, useIsInForm } from "../form";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -113,7 +132,7 @@ const sliderRoot = style<RangeSliderStyleState>(
       },
     },
     color: {
-      default: "neutral-subdued",
+      default: "[var(--text-secondary)]",
       forcedColors: "ButtonText",
       isDisabled: "disabled",
     },
@@ -468,8 +487,16 @@ function rangesEqual(a: RangeValue, b: RangeValue): boolean {
 export function RangeSlider(props: RangeSliderProps): JSX.Element {
   const isInForm = useIsInForm();
   const providerProps = useProviderProps(useFormProps(props));
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useContext(RangeSliderContext), props.slot);
-  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props);
+  const mergedProps = mergeProps(flags, contextProps ?? {}, props);
   const [local, domProps] = splitProps(mergedProps, [
     "id",
     "value",
@@ -507,6 +534,7 @@ export function RangeSlider(props: RangeSliderProps): JSX.Element {
   ]);
 
   const locale = useLocale();
+  const stringFormatter = createStringFormatter(s2IntlStrings, "@react-spectrum/s2");
   const fallbackRootId = createUniqueId();
   const labelId = createUniqueId();
   const size = () => normalizeRangeSliderSize(local.size);
@@ -554,7 +582,7 @@ export function RangeSlider(props: RangeSliderProps): JSX.Element {
   const [internalRange, setInternalRange] = createSignal(
     normalizeRange(local.defaultValue ?? { start: minValue(), end: maxValue() }),
   );
-  createEffect(() => {
+  createTrackedEffect(() => {
     if (local.value === undefined) {
       setInternalRange(
         normalizeRange(local.defaultValue ?? { start: minValue(), end: maxValue() }),
@@ -859,13 +887,17 @@ export function RangeSlider(props: RangeSliderProps): JSX.Element {
         class={thumbContainer(thumbStyleState(thumbName))}
         style={thumbWrapperStyle(percent(), thumbName, element())}
         role="slider"
-        tabIndex={isDisabled() ? undefined : 0}
-        aria-label={isStart ? "Minimum" : "Maximum"}
+        tabindex={isDisabled() ? undefined : 0}
+        aria-label={
+          isStart
+            ? stringFormatter().format("slider.minimum")
+            : stringFormatter().format("slider.maximum")
+        }
         aria-valuemin={isStart ? minValue() : startValue()}
         aria-valuemax={isStart ? endValue() : maxValue()}
         aria-valuenow={value()}
         aria-valuetext={formatter().format(value())}
-        aria-disabled={isDisabled() || undefined}
+        aria-disabled={isDisabled() ? ariaTrueFalse(true) : undefined}
         onPointerDown={(event) => onThumbPointerDown(thumbName, event)}
         onPointerMove={onPointerMove}
         onPointerUp={onPointerUp}
@@ -889,6 +921,7 @@ export function RangeSlider(props: RangeSliderProps): JSX.Element {
       id={rootId()}
       role="group"
       data-orientation="horizontal"
+      data-disabled={isDisabled() ? "true" : undefined}
       aria-labelledby={
         local["aria-labelledby"] ?? (!local["aria-label"] && local.label ? labelId : undefined)
       }

package/src/slider/index.tsx

@@ -1,15 +1,24 @@
 // @ts-nocheck
-import {
-  type JSX,
-  createContext,
-  createMemo,
-  createUniqueId,
-  mergeProps,
-  Show,
-  splitProps,
-  useContext,
-} from "solid-js";
-import { useLocale } 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/Slider.tsx
+
+// Port of packages/@react-spectrum/s2/src/Slider.tsx.
+
+import { createContext, createMemo, createUniqueId, Show, useContext } from "solid-js";
+import type { JSX } from "@solidjs/web";
+import { mergeProps, useLocale } from "@proyecto-viviana/solidaria";
 import {
   Slider as HeadlessSlider,
   SliderFill as HeadlessSliderFill,
@@ -35,6 +44,7 @@ import {
 } from "../s2-internal/style-utils" with { type: "macro" };
 import { useProviderProps } from "../provider";
 import { useFormProps, useIsInForm } from "../form";
+import { splitProps } from "@proyecto-viviana/solidaria/utils";
 import {
   getSlottedContextProps,
   mergeContextRefs,
@@ -101,7 +111,7 @@ const sliderRoot = style<SliderStyleState>(
       },
     },
     color: {
-      default: "neutral-subdued",
+      default: "[var(--text-secondary)]",
       forcedColors: "ButtonText",
       isDisabled: "disabled",
     },
@@ -482,8 +492,16 @@ function pressScaleStyle(
 export function Slider(props: SliderProps): JSX.Element {
   const isInForm = useIsInForm();
   const providerProps = useProviderProps(useFormProps(props));
+  const [flags] = splitProps(providerProps, [
+    "isQuiet",
+    "isEmphasized",
+    "isDisabled",
+    "isRequired",
+    "isReadOnly",
+    "validationState",
+  ]);
   const contextProps = getSlottedContextProps(useContext(SliderContext), props.slot);
-  const mergedProps = mergeProps(providerProps, contextProps ?? {}, props);
+  const mergedProps = mergeProps(flags, contextProps ?? {}, props);
   const [local, headlessProps] = splitProps(mergedProps, [
     "size",
     "variant",