@versini/ui-toggle 7.0.2 → 8.0.0

package/dist/index.d.ts

@@ -1,6 +1,6 @@
 import { JSX } from 'react/jsx-runtime';
 
-export declare const Toggle: ({ checked, onChange, label, labelHidden, name, mode, labelMode, className, noBorder, narrow, noHaptic, labelPosition, subLabel, splitBackground, }: ToggleProps) => JSX.Element;
+export declare const Toggle: ({ checked, onChange, label, labelHidden, name, mode, labelMode, className, noBorder, narrow, noHaptic, labelPosition, subLabel, flat, }: ToggleProps) => JSX.Element;
 
 export declare const TOGGLE_CLASSNAME = "av-toggle";
 
@@ -66,11 +66,11 @@ declare type ToggleProps = {
      */
     labelPosition?: "left" | "right";
     /**
-     * Whether or not to render the toggle track with a split background
-     * gradient overlay (aqua-style).
+     * Whether to render the Toggle with a flat solid background
+     * instead of the default Aqua-style gradient overlay.
      * @default false
      */
-    splitBackground?: boolean;
+    flat?: boolean;
 };
 
 export { }

package/dist/index.js

@@ -1,5 +1,5 @@
 /*!
-  @versini/ui-toggle v7.0.2
+  @versini/ui-toggle v8.0.0
   © 2026 gizmette.com
 */
 
@@ -24,17 +24,13 @@ const getToggleBaseClasses = ({ narrow })=>{
 const getToggleKnobFocusClasses = ()=>{
     return clsx("peer-focus:outline", "peer-focus:outline-2", "peer-focus:outline-offset-2", "peer-focus:outline-focus-dark");
 };
-// Aqua-style split background overlay for the toggle knob:
-// - Top half: flat white overlay (light, uniform)
-// - Bottom half: starts darker, gradually lightens toward the bottom edge
-const KNOB_SPLIT_OVERLAY = "after:bg-[linear-gradient(to_bottom,oklch(1_0_0/0.2)_50%,oklch(0_0_0/0.1)_50%,oklch(1_0_0/0.05)_100%)]";
-const getToggleKnobOnClasses = ({ narrow, splitBackground })=>{
+const getToggleKnobOnClasses = ({ narrow, flat })=>{
     return clsx({
         "peer-checked:after:translate-x-full": !narrow,
         "peer-checked:after:translate-x-4": narrow
     }, // background color when checked
     "peer-checked:bg-action-light", // split background overlay on the knob (both states)
-    splitBackground && KNOB_SPLIT_OVERLAY, // knob circle and border color when checked
+    !flat && "after:av-bg-split-overlay", // knob circle and border color when checked
     "peer-checked:after:bg-white", "peer-checked:after:border-white");
 };
 const getToggleKnobOffClasses = ({ narrow })=>{
@@ -79,7 +75,7 @@ const getWrapperClasses = ({ className })=>{
 const getToggleWrapperClasses = ()=>{
     return "relative inline-block";
 };
-const getToggleClasses = ({ mode, labelHidden, className, noBorder, narrow, labelMode, labelPosition = "right", subLabel, splitBackground })=>{
+const getToggleClasses = ({ mode, labelHidden, className, noBorder, narrow, labelMode, labelPosition = "right", subLabel, flat })=>{
     return {
         toggle: clsx(getToggleBaseClasses({
             narrow
@@ -90,7 +86,7 @@ const getToggleClasses = ({ mode, labelHidden, className, noBorder, narrow, labe
             narrow
         }), getToggleKnobOnClasses({
             narrow,
-            splitBackground
+            flat
         })),
         label: getLabelClasses({
             labelHidden,
@@ -116,7 +112,7 @@ const getToggleClasses = ({ mode, labelHidden, className, noBorder, narrow, labe
 
 
 
-const Toggle = ({ checked = false, onChange, label, labelHidden = false, name, mode = "system", labelMode, className, noBorder = false, narrow = false, noHaptic = false, labelPosition = "right", subLabel, splitBackground = false })=>{
+const Toggle = ({ checked = false, onChange, label, labelHidden = false, name, mode = "system", labelMode, className, noBorder = false, narrow = false, noHaptic = false, labelPosition = "right", subLabel, flat = false })=>{
     const { haptic } = useHaptic();
     const toggleClasses = getToggleClasses({
         mode,
@@ -127,7 +123,7 @@ const Toggle = ({ checked = false, onChange, label, labelHidden = false, name, m
         labelMode,
         labelPosition,
         subLabel: !!subLabel,
-        splitBackground
+        flat
     });
     const handleChange = (e)=>{
         if (!noHaptic) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@versini/ui-toggle",
-	"version": "7.0.2",
+	"version": "8.0.0",
 	"license": "MIT",
 	"author": "Arno Versini",
 	"publishConfig": {
@@ -34,10 +34,14 @@
 		"test:coverage:ui": "vitest --coverage --ui",
 		"test:coverage": "vitest run --coverage",
 		"test:watch": "vitest",
-		"test": "vitest run"
+		"test": "vitest run",
+		"test:visual": "playwright test -c playwright-ct.config.ts",
+		"test:visual:report": "playwright show-report playwright-report",
+		"test:visual:update": "playwright test -c playwright-ct.config.ts --update-snapshots",
+		"test:visual:ui": "playwright test -c playwright-ct.config.ts --ui"
 	},
 	"devDependencies": {
-		"@versini/ui-types": "9.1.0"
+		"@versini/ui-types": "10.0.0"
 	},
 	"dependencies": {
 		"@versini/ui-hooks": "6.1.1",
@@ -47,5 +51,5 @@
 	"sideEffects": [
 		"**/*.css"
 	],
-	"gitHead": "7cec17f37e7c539ba81294ec754563b4e5733ce8"
+	"gitHead": "0c985a7fdf2ab23b36c43b42663d9625d0ccb4c5"
 }