@proyecto-viviana/ui 0.6.2 → 0.6.3

package/src/calendar/index.tsx

@@ -355,10 +355,10 @@ const calendarCellInner = style<{
     isPressed: "gray-100",
     isDisabled: "transparent",
     isSelected: {
-      default: lightDark("accent-900", "accent-700"),
-      isHovered: lightDark("accent-1000", "accent-800"),
-      isPressed: lightDark("accent-1000", "accent-800"),
-      isFocusVisible: lightDark("accent-1000", "accent-800"),
+      default: "interactive-fill",
+      isHovered: lightDark("accent-1000", "accent-600"),
+      isPressed: lightDark("accent-1000", "accent-600"),
+      isFocusVisible: lightDark("accent-1000", "accent-600"),
       isDisabled: "transparent",
       isInvalid: {
         default: lightDark("negative-900", "negative-700"),

package/src/form/index.tsx

@@ -158,6 +158,10 @@ const formStyles = style<{ labelPosition: FormLabelPosition; size: FormSize }>(
 );
 
 export function Form(props: FormProps): JSX.Element {
+  // Leave `children` on the headless rest props so they flow through as a
+  // lazy Solid getter — do not split them off and re-wrap. A forced
+  // `(rp) => children` render-prop wrapper desyncs createUniqueId between SSR
+  // and client (Form+Button hydration mismatch). See solid-spectrum Form.
   const [local, headlessProps] = splitProps(props, [
     "size",
     "labelPosition",
@@ -170,7 +174,6 @@ export function Form(props: FormProps): JSX.Element {
     "UNSAFE_className",
     "UNSAFE_style",
     "ref",
-    "children",
   ]);
 
   const size = () => local.size ?? "M";
@@ -214,11 +217,7 @@ export function Form(props: FormProps): JSX.Element {
           .filter(Boolean)
           .join(" ")}
         style={local.UNSAFE_style}
-      >
-        {(renderProps) =>
-          typeof local.children === "function" ? local.children(renderProps) : local.children
-        }
-      </HeadlessForm>
+      />
     </FormContext.Provider>
   );
 }

package/src/icon/pixel-icons/PixelChartIcon.tsx

@@ -18,7 +18,10 @@ function PixelChartIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elem
       {...rest}
       class={className}
     >
-      <path d="M4 12h3v6H4zM10 9h3v9h-3zM16 5h3v13h-3zM3 18h18v2H3z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M4 12h3v6H4zM10 9h3v9h-3zM16 5h3v13h-3zM3 18h18v2H3z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelCheckIcon.tsx

@@ -18,7 +18,10 @@ function PixelCheckIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elem
       {...rest}
       class={className}
     >
-      <path d="M7 12h2v2H7zM9 14h2v2H9zM11 12h2v2h-2zM13 10h2v2h-2zM15 8h2v2h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M7 12h2v2H7zM9 14h2v2H9zM11 12h2v2h-2zM13 10h2v2h-2zM15 8h2v2h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelChevronDownIcon.tsx

@@ -18,7 +18,10 @@ function PixelChevronDownIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JS
       {...rest}
       class={className}
     >
-      <path d="M6 9h2v2H6zM8 11h2v2H8zM10 13h2v2h-2zM12 11h2v2h-2zM14 9h2v2h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M6 9h2v2H6zM8 11h2v2H8zM10 13h2v2h-2zM12 11h2v2h-2zM14 9h2v2h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelChevronRightIcon.tsx

@@ -18,7 +18,10 @@ function PixelChevronRightIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): J
       {...rest}
       class={className}
     >
-      <path d="M9 6h2v2H9zM11 8h2v2h-2zM13 10h2v2h-2zM11 12h2v2h-2zM9 14h2v2H9z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M9 6h2v2H9zM11 8h2v2h-2zM13 10h2v2h-2zM11 12h2v2h-2zM9 14h2v2H9z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelClockIcon.tsx

@@ -18,7 +18,10 @@ function PixelClockIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elem
       {...rest}
       class={className}
     >
-      <path d="M9 4h6v2H9zM9 18h6v2H9zM5 9h2v6H5zM17 9h2v6h-2zM7 6h2v2H7zM15 6h2v2h-2zM7 16h2v2H7zM15 16h2v2h-2zM11 8h2v4h-2zM13 12h2v2h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M9 4h6v2H9zM9 18h6v2H9zM5 9h2v6H5zM17 9h2v6h-2zM7 6h2v2H7zM15 6h2v2h-2zM7 16h2v2H7zM15 16h2v2h-2zM11 8h2v4h-2zM13 12h2v2h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelCodeIcon.tsx

@@ -18,7 +18,10 @@ function PixelCodeIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Eleme
       {...rest}
       class={className}
     >
-      <path d="M7 9h2v2H7zM5 11h2v2H5zM7 13h2v2H7zM15 9h2v2h-2zM17 11h2v2h-2zM15 13h2v2h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M7 9h2v2H7zM5 11h2v2H5zM7 13h2v2H7zM15 9h2v2h-2zM17 11h2v2h-2zM15 13h2v2h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelCommunityIcon.tsx

@@ -18,7 +18,10 @@ function PixelCommunityIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.
       {...rest}
       class={className}
     >
-      <path d="M5 5h4v4H5zM15 5h4v4h-4zM3 11h8v6H3zM13 11h8v6h-8z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M5 5h4v4H5zM15 5h4v4h-4zM3 11h8v6H3zM13 11h8v6h-8z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelCubeIcon.tsx

@@ -18,7 +18,10 @@ function PixelCubeIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Eleme
       {...rest}
       class={className}
     >
-      <path d="M5 5h14v2H5zM5 17h14v2H5zM5 7h2v10H5zM17 7h2v10h-2zM9 9h6v6H9z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M5 5h14v2H5zM5 17h14v2H5zM5 7h2v10H5zM17 7h2v10h-2zM9 9h6v6H9z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelFlameIcon.tsx

@@ -18,7 +18,10 @@ function PixelFlameIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elem
       {...rest}
       class={className}
     >
-      <path d="M11 4h2v2h-2zM10 6h4v2h-4zM9 8h6v2H9zM8 10h8v6H8zM9 16h6v2H9z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M11 4h2v2h-2zM10 6h4v2h-4zM9 8h6v2H9zM8 10h8v6H8zM9 16h6v2H9z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelHomeIcon.tsx

@@ -18,7 +18,10 @@ function PixelHomeIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Eleme
       {...rest}
       class={className}
     >
-      <path d="M11 4h2v2h-2zM9 6h2v2H9zM13 6h2v2h-2zM7 8h2v2H7zM15 8h2v2h-2zM5 10h2v2H5zM17 10h2v2h-2zM7 12h2v8H7zM15 12h2v8h-2zM9 18h6v2H9z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M11 4h2v2h-2zM9 6h2v2H9zM13 6h2v2h-2zM7 8h2v2H7zM15 8h2v2h-2zM5 10h2v2H5zM17 10h2v2h-2zM7 12h2v8H7zM15 12h2v8h-2zM9 18h6v2H9z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelLayoutIcon.tsx

@@ -18,7 +18,10 @@ function PixelLayoutIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Ele
       {...rest}
       class={className}
     >
-      <path d="M4 5h16v2H4zM4 17h16v2H4zM4 7h2v10H4zM18 7h2v10h-2zM6 7h12v2H6zM9 9h2v8H9z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M4 5h16v2H4zM4 17h16v2H4zM4 7h2v10H4zM18 7h2v10h-2zM6 7h12v2H6zM9 9h2v8H9z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelMessageIcon.tsx

@@ -18,7 +18,10 @@ function PixelMessageIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.El
       {...rest}
       class={className}
     >
-      <path d="M4 5h16v2H4zM4 7h2v6H4zM18 7h2v6h-2zM4 13h16v2H4zM7 15h2v2H7z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M4 5h16v2H4zM4 7h2v6H4zM18 7h2v6h-2zM4 13h16v2H4zM7 15h2v2H7z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavCommunityIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavCommunityIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): J
       {...rest}
       class={className}
     >
-      <path d="M7 4h4v4H7zM13 4h4v4h-4zM5 10h4v2H5zM15 10h4v2h-4zM5 12h2v4H5zM17 12h2v4h-2zM11 12h2v6h-2zM9 10h6v2H9z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M7 4h4v4H7zM13 4h4v4h-4zM5 10h4v2H5zM15 10h4v2h-4zM5 12h2v4H5zM17 12h2v4h-2zM11 12h2v6h-2zM9 10h6v2H9z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavExploreIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavExploreIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX
       {...rest}
       class={className}
     >
-      <path d="M9 3h6v2H9zM7 5h2v2H7zM15 5h2v2h-2zM5 7h2v10H5zM17 7h2v10h-2zM7 17h2v2H7zM15 17h2v2h-2zM9 19h6v2H9zM11 8h2v2h-2zM11 11h2v2h-2zM11 14h2v2h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M9 3h6v2H9zM7 5h2v2H7zM15 5h2v2h-2zM5 7h2v10H5zM17 7h2v10h-2zM7 17h2v2H7zM15 17h2v2h-2zM9 19h6v2H9zM11 8h2v2h-2zM11 11h2v2h-2zM11 14h2v2h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavLiveIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavLiveIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.El
       {...rest}
       class={className}
     >
-      <path d="M10 10h4v4h-4zM5 5h2v2H5zM17 5h2v2h-2zM3 7h2v10H3zM19 7h2v10h-2zM5 17h2v2H5zM17 17h2v2h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M10 10h4v4h-4zM5 5h2v2H5zM17 5h2v2h-2zM3 7h2v10H3zM19 7h2v10h-2zM5 17h2v2H5zM17 17h2v2h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavPathwaysIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavPathwaysIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JS
       {...rest}
       class={className}
     >
-      <path d="M4 4h4v4H4zM6 8h2v4H6zM8 10h6v2H8zM12 12h2v4h-2zM10 16h6v4h-6z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M4 4h4v4H4zM6 8h2v4H6zM8 10h6v2H8zM12 12h2v4h-2zM10 16h6v4h-6z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavPlaygroundIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavPlaygroundIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>):
       {...rest}
       class={className}
     >
-      <path d="M13 2h4v3h-4zM11 5h4v3h-4zM9 8h6v3H9zM12 11h4v3h-4zM10 14h4v3h-4zM8 17h4v5H8z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M13 2h4v3h-4zM11 5h4v3h-4zM9 8h6v3H9zM12 11h4v3h-4zM10 14h4v3h-4zM8 17h4v5H8z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavProjectsIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavProjectsIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JS
       {...rest}
       class={className}
     >
-      <path d="M3 5h7v2H3zM3 7h18v2H3zM3 9h18v2H3zM3 11h2v8H3zM19 11h2v8h-2zM5 17h14v2H5z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M3 5h7v2H3zM3 7h18v2H3zM3 9h18v2H3zM3 11h2v8H3zM19 11h2v8h-2zM5 17h14v2H5z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavReferenceIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavReferenceIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): J
       {...rest}
       class={className}
     >
-      <path d="M5 3h12v2H5zM5 5h2v16H5zM17 5h2v14h-2zM7 19h10v2H7zM9 8h6v2H9zM9 11h6v2H9z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M5 3h12v2H5zM5 5h2v16H5zM17 5h2v14h-2zM7 19h10v2H7zM9 8h6v2H9zM9 11h6v2H9z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavSettingsIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavSettingsIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JS
       {...rest}
       class={className}
     >
-      <path d="M10 2h4v3h-4zM10 19h4v3h-4zM2 10h3v4H2zM19 10h3v4h-3zM4 4h3v3H4zM17 4h3v3h-3zM4 17h3v3H4zM17 17h3v3h-3zM9 9h6v6H9z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M10 2h4v3h-4zM10 19h4v3h-4zM2 10h3v4H2zM19 10h3v4h-3zM4 4h3v3H4zM17 4h3v3h-3zM4 17h3v3H4zM17 17h3v3h-3zM9 9h6v6H9z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNavTopicsIcon.tsx

@@ -18,7 +18,10 @@ function PixelNavTopicsIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.
       {...rest}
       class={className}
     >
-      <path d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M4 4h7v7H4zM13 4h7v7h-7zM4 13h7v7H4zM13 13h7v7h-7z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelNotificationIcon.tsx

@@ -18,7 +18,10 @@ function PixelNotificationIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): J
       {...rest}
       class={className}
     >
-      <path d="M11 3h2v2h-2zM9 5h6v2H9zM8 7h2v7H8zM14 7h2v7h-2zM6 14h12v2H6zM10 17h4v2h-4z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M11 3h2v2h-2zM9 5h6v2H9zM8 7h2v7H8zM14 7h2v7h-2zM6 14h12v2H6zM10 17h4v2h-4z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelPathwaysIcon.tsx

@@ -18,7 +18,10 @@ function PixelPathwaysIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.E
       {...rest}
       class={className}
     >
-      <path d="M4 15h4v4H4zM8 11h4v4H8zM12 7h4v4h-4zM16 3h4v4h-4z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M4 15h4v4H4zM8 11h4v4H8zM12 7h4v4h-4zM16 3h4v4h-4z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelPlayIcon.tsx

@@ -18,7 +18,10 @@ function PixelPlayIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Eleme
       {...rest}
       class={className}
     >
-      <path d="M7 4h2v16H7zM9 6h2v12H9zM11 8h2v8h-2zM13 10h2v4h-2zM15 11h2v2h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M7 4h2v16H7zM9 6h2v12H9zM11 8h2v8h-2zM13 10h2v4h-2zM15 11h2v2h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelSearchIcon.tsx

@@ -18,7 +18,10 @@ function PixelSearchIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Ele
       {...rest}
       class={className}
     >
-      <path d="M4 4h10v2H4zM4 12h10v2H4zM4 6h2v6H4zM12 6h2v6h-2zM14 14h2v2h-2zM16 16h2v2h-2zM18 18h2v2h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M4 4h10v2H4zM4 12h10v2H4zM4 6h2v6H4zM12 6h2v6h-2zM14 14h2v2h-2zM16 16h2v2h-2zM18 18h2v2h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelSettingsIcon.tsx

@@ -18,7 +18,10 @@ function PixelSettingsIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.E
       {...rest}
       class={className}
     >
-      <path d="M9 9h6v6H9zM10 4h4v5h-4zM10 15h4v5h-4zM4 10h5v4H4zM15 10h5v4h-4zM6 6h3v3H6zM15 6h3v3h-3zM6 15h3v3H6zM15 15h3v3h-3z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M9 9h6v6H9zM10 4h4v5h-4zM10 15h4v5h-4zM4 10h5v4H4zM15 10h5v4h-4zM6 6h3v3H6zM15 6h3v3h-3zM6 15h3v3H6zM15 15h3v3h-3z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelSparkleIcon.tsx

@@ -18,7 +18,10 @@ function PixelSparkleIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.El
       {...rest}
       class={className}
     >
-      <path d="M11 3h2v6h-2zM11 15h2v6h-2zM3 11h6v2H3zM15 11h6v2h-6zM10 10h4v4h-4z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M11 3h2v6h-2zM11 15h2v6h-2zM3 11h6v2H3zM15 11h6v2h-6zM10 10h4v4h-4z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelTopicsIcon.tsx

@@ -18,7 +18,10 @@ function PixelTopicsIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Ele
       {...rest}
       class={className}
     >
-      <path d="M5 5h6v6H5zM13 5h6v6h-6zM5 13h6v6H5zM13 13h6v6h-6z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M5 5h6v6H5zM13 5h6v6h-6zM5 13h6v6H5zM13 13h6v6h-6z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelUserIcon.tsx

@@ -18,7 +18,10 @@ function PixelUserIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Eleme
       {...rest}
       class={className}
     >
-      <path d="M9 4h6v2H9zM8 6h2v4H8zM14 6h2v4h-2zM9 10h6v2H9zM8 13h8v2H8zM6 15h2v5H6zM16 15h2v5h-2z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M9 4h6v2H9zM8 6h2v4H8zM14 6h2v4h-2zM9 10h6v2H9zM8 13h8v2H8zM6 15h2v5H6zM16 15h2v5h-2z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/icon/pixel-icons/PixelZapIcon.tsx

@@ -18,7 +18,10 @@ function PixelZapIconSvg(props: JSX.SvgSVGAttributes<SVGSVGElement>): JSX.Elemen
       {...rest}
       class={className}
     >
-      <path d="M13 2h4v3h-4zM11 5h4v3h-4zM9 8h6v3H9zM12 11h4v3h-4zM10 14h4v3h-4zM8 17h4v5H8z" fill="var(--iconPrimary, currentColor)" />
+      <path
+        d="M13 2h4v3h-4zM11 5h4v3h-4zM9 8h6v3H9zM12 11h4v3h-4zM10 14h4v3h-4zM8 17h4v5H8z"
+        fill="var(--iconPrimary, currentColor)"
+      />
     </svg>
   );
 }

package/src/layout/Flex.tsx

@@ -15,6 +15,8 @@ export interface FlexProps {
   inline?: boolean;
   /** Additional CSS class name. */
   class?: string;
+  /** Additional inline styles. */
+  style?: JSX.CSSProperties;
   /** The content. */
   children?: JSX.Element;
 }
@@ -69,12 +71,17 @@ export function Flex(props: FlexProps): JSX.Element {
     "justifyContent",
     "inline",
     "class",
+    "style",
     "children",
   ]);
 
+  // `style` is merged rather than left in `rest`, where the assignment below would have
+  // silently dropped it. Grid already accepted one; the two primitives are meant to be
+  // interchangeable, and without it every decorated row has to fall back to a bare div.
   const flexStyle = (): JSX.CSSProperties => {
     const s: JSX.CSSProperties = {
       display: local.inline ? "inline-flex" : "flex",
+      ...local.style,
     };
 
     if (local.direction) s["flex-direction"] = local.direction;

package/src/link/index.tsx

@@ -89,7 +89,9 @@ const linkStyles = style<
     },
     color: {
       variant: {
-        primary: baseColor("accent"),
+        // Accent-as-ink has its own AA-safe role. `accent` remains the brighter
+        // brand blue used by decorative marks, rings, and indicators.
+        primary: "[var(--text-link)]",
         secondary: baseColor("neutral"),
       },
       isStaticColor: "transparent-overlay-1000",

package/src/menu/index.tsx

@@ -811,9 +811,7 @@ export interface MenuSeparatorProps {
  * A visual separator between menu items.
  */
 export function MenuSeparator(props: MenuSeparatorProps): JSX.Element {
-  return (
-    <div role="separator" class={[separatorStyles, props.class].filter(Boolean).join(" ")} />
-  );
+  return <div role="separator" class={[separatorStyles, props.class].filter(Boolean).join(" ")} />;
 }
 
 function ChevronIcon(props: { class?: string }): JSX.Element {

package/src/meter/index.tsx

@@ -442,9 +442,7 @@ export function Meter(props: MeterProps): JSX.Element {
   };
   const filledCount = createMemo(() => {
     const segments = segmentCount();
-    return segments == null
-      ? 0
-      : clamp(Math.round((percentage() / 100) * segments), 0, segments);
+    return segments == null ? 0 : clamp(Math.round((percentage() / 100) * segments), 0, segments);
   });
   const showValue = () => !!local.label;
   const mergedStyles = () => mergeContextStyles(contextProps?.styles, props.styles);

package/src/progress/ProgressCircle.tsx

@@ -372,7 +372,7 @@ export function ProgressCircle(props: ProgressCircleProps): JSX.Element {
         }}
       </For>
       {/* Read `children` exactly once per run — a repeated getter read
-        * re-instantiates the subtree and desyncs hydration keys. */}
+       * re-instantiates the subtree and desyncs hydration keys. */}
       {(() => {
         const content = local.children;
         return content != null ? <div class={centerStyles}>{content}</div> : undefined;

package/src/segmentedcontrol/index.tsx

@@ -119,14 +119,14 @@ const segmentedControlItem = style<ToggleButtonRenderProps & { isJustified?: boo
   borderStyle: "none",
   backgroundColor: "transparent",
   /* With the plate gone, ink is the ONLY selection signal — which is how the register
-     does it: the selected segment is `var(--accent-primary)` and its siblings are
-     `var(--text-tertiary)` (TerminalGlassLab.tsx:21-25). neutral-subdued vs neutral was
-     too small a step to carry selection on its own. `accent` is the semantic ink stop,
-     the same one link/picker/combobox use; it refs accent-color-900, which this library
-     re-points at the brand blue ramp (glasselated-ramps.ts). */
+     does it: the selected segment is accent ink and its siblings are secondary ink
+     (TerminalGlassLab.tsx:21-25). The decorative `--accent-primary` is only 2.98:1 on
+     the daylight panel, so text consumes the scheme-specific `--text-link` role instead:
+     it preserves the blue selection signal while meeting AA on every published surface.
+     `viviana-tokens.css` owns the actual register values for both schemes. */
   color: {
     default: baseColor("neutral-subdued"),
-    isSelected: baseColor("accent"),
+    isSelected: "[var(--text-link)]",
     isDisabled: "disabled",
   },
   cursor: {