@gnist/design-system 4.2.2 → 4.3.0

package/CHANGELOG.md

@@ -3,6 +3,16 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [4.3.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@4.2.3...@gnist/design-system@4.3.0) (2025-10-31)
+
+### Features
+
+* simplify switch behavior ([23b2363](https://github.com/mollerdigital/design-system-design-system/commit/23b2363bf590ad5364b1a991ae43910fb317dbb5))
+
+## [4.2.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@4.2.2...@gnist/design-system@4.2.3) (2025-10-31)
+
+**Note:** Version bump only for package @gnist/design-system
+
 ## [4.2.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@4.2.1...@gnist/design-system@4.2.2) (2025-10-24)
 
 **Note:** Version bump only for package @gnist/design-system

package/dist/components/actions/selectionControls/Switch.cjs

@@ -2,47 +2,33 @@
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const jsxRuntime = require("react/jsx-runtime");
-const InputHelperText = require("../../../building-blocks/inputs/InputHelperText.cjs");
 const ScreenReaderOnly = require("../../../utilities/accessibility/ScreenReaderOnly.cjs");
 require("../../../utilities/accessibility/visuallyHidden.css.cjs");
 const index = require("../../../utilities/html/index.cjs");
 const switch_css = require("./switch.css.cjs");
 const shared_css = require("./shared.css.cjs");
-const shared = require("./shared.cjs");
-const defaultRender = (switchElement, description) => jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [switchElement, jsxRuntime.jsx("div", { className: switch_css.switchDescription, children: description })] });
-function Switch({ offLabel, onLabel, description, value = false, onChange, disabled, validity, id = index.createValidHtmlId(offLabel || onLabel || "toggle"), hideLabel = false, canShowErrorMessage = false, className, ref, ...rest }) {
+const atoms_css_js = require("@gnist/themes/atoms.css.js");
+function Switch({ label, description, value = false, onChange, disabled, id = index.createValidHtmlId(label || "toggle"), position = "left", hideLabel = false, className, ref, ...rest }) {
   const inputId = id;
-  const labelId = `${id}-label`;
-  const helperId = `${id}-helper`;
-  const { helperTextProps, inputAriaProps } = InputHelperText.useInputHelperText({
-    id: helperId,
-    validity,
-    reserveSpaceForMessage: canShowErrorMessage
-  });
-  const descriptionElement = description ? jsxRuntime.jsx(shared.SelectionDescription, { disabled, children: description }) : void 0;
-  const switchElement = jsxRuntime.jsx("span", { className: `${shared_css.InputWrapper} ${className}`, ref, children: jsxRuntime.jsxs("div", { className: switch_css.switchContainerStyle, children: [offLabel && !hideLabel && jsxRuntime.jsx("span", { className: switch_css.SwitchLabelRecipe({
-    disabled,
-    side: "left"
-  }), children: offLabel }), jsxRuntime.jsxs("label", { htmlFor: inputId, className: switch_css.SwitchRecipe({
-    selected: value,
-    disabled,
-    validity: validity?.type === "error" ? "error" : void 0
-  }), id: labelId, children: [jsxRuntime.jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: shared_css.InputStyleRecipe({ disabled }), style: {
+  const LabelElement = () => {
+    return jsxRuntime.jsxs("span", { className: switch_css.SwitchLabelRecipe({
+      disabled,
+      side: position === "right" ? "left" : "right"
+    }), children: [label, description && jsxRuntime.jsx("div", { className: switch_css.switchDescription, children: description })] });
+  };
+  return jsxRuntime.jsxs("span", { className: `${shared_css.InputWrapper} ${switch_css.focusContainer} ${className} ${atoms_css_js.atoms({ borderRadius: hideLabel ? "full" : "input" })}`, ref, children: [jsxRuntime.jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: shared_css.InputStyleRecipe({ disabled }), style: {
     position: "absolute",
     opacity: 0,
     width: "100%",
     height: "100%",
     margin: 0,
     cursor: disabled ? "not-allowed" : "pointer"
-  }, ...inputAriaProps, ...rest }), jsxRuntime.jsx("span", { className: switch_css.SwitchThumbRecipe({
-    selected: value ?? false,
+  }, ...rest }), jsxRuntime.jsxs("label", { htmlFor: inputId, className: switch_css.switchContainerStyle, children: [position === "right" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), jsxRuntime.jsx("span", { className: switch_css.SwitchRecipe({
+    selected: value,
     disabled
-  }) }), onLabel && hideLabel && jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: onLabel })] }), onLabel && !hideLabel && jsxRuntime.jsx("span", { className: switch_css.SwitchLabelRecipe({
-    disabled,
-    side: "right"
-  }), children: onLabel }), onLabel && !hideLabel && !offLabel && !onLabel && jsxRuntime.jsx("span", { className: switch_css.SwitchLabelRecipe({
+  }), children: jsxRuntime.jsx("span", { className: switch_css.SwitchThumbRecipe({
+    selected: value ?? false,
     disabled
-  }), children: onLabel })] }) });
-  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: defaultRender(switchElement, descriptionElement) });
+  }) }) }), position === "left" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), hideLabel && jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label })] })] });
 }
 exports.Switch = Switch;

package/dist/components/actions/selectionControls/Switch.d.ts

@@ -1,10 +1,8 @@
 import { Ref } from "react";
 import { SelectionControlProps } from "./shared.js";
-export interface SwitchProps extends Omit<SelectionControlProps<boolean>, "render"> {
-    /** The left side label of the switch. */
-    offLabel?: string;
-    /** The right side label of the switch. */
-    onLabel: string;
+export interface SwitchProps extends Omit<SelectionControlProps<boolean>, "render" | "validity"> {
+    /** The position of the Switch */
+    position?: string;
     ref?: Ref<HTMLSpanElement>;
 }
 /**
@@ -15,5 +13,5 @@ export interface SwitchProps extends Omit<SelectionControlProps<boolean>, "rende
  *
  * Documentation: [Switch](https://gnist.moller.no/developers/components/latest/?path=/docs/components-actions-selectioncontrols-switch--docs)
  */
-export declare function Switch({ offLabel, onLabel, description, value, onChange, disabled, validity, id, hideLabel, canShowErrorMessage, className, ref, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ label, description, value, onChange, disabled, id, position, hideLabel, className, ref, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
 //# sourceMappingURL=Switch.d.ts.map

package/dist/components/actions/selectionControls/Switch.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAgB,GAAG,EAAE,MAAM,OAAO,CAAC;AAS1C,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,QAAQ,CAAC;IACtD,yCAAyC;IACzC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,0CAA0C;IAC1C,OAAO,EAAE,MAAM,CAAC;IAChB,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC9B;AAYD;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACnB,QAAQ,EACR,OAAO,EACP,WAAW,EACX,KAAa,EACb,QAAQ,EACR,QAAQ,EACR,QAAQ,EACR,EAAuD,EACvD,SAAiB,EACjB,mBAA2B,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACV,EAAE,WAAW,2CAkGb"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Switch.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAU5B,OAAO,EAAE,qBAAqB,EAAE,MAAM,aAAa,CAAC;AAGpD,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACnE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,GAAG,CAAC,EAAE,GAAG,CAAC,eAAe,CAAC,CAAC;CAC9B;AAED;;;;;;;GAOG;AACH,wBAAgB,MAAM,CAAC,EACnB,KAAK,EACL,WAAW,EACX,KAAa,EACb,QAAQ,EACR,QAAQ,EACR,EAAyC,EACzC,QAAiB,EACjB,SAAiB,EACjB,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACV,EAAE,WAAW,2CA6Db"}

package/dist/components/actions/selectionControls/Switch.js

@@ -1,47 +1,33 @@
 "use client";
-import { jsx, jsxs, Fragment } from "react/jsx-runtime";
-import { useInputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
+import { jsxs, jsx } from "react/jsx-runtime";
 import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import { createValidHtmlId } from "../../../utilities/html/index.js";
-import { switchContainerStyle, SwitchLabelRecipe, SwitchRecipe, SwitchThumbRecipe, switchDescription } from "./switch.css.js";
+import { focusContainer, switchContainerStyle, SwitchRecipe, SwitchThumbRecipe, SwitchLabelRecipe, switchDescription } from "./switch.css.js";
 import { InputWrapper, InputStyleRecipe } from "./shared.css.js";
-import { SelectionDescription, HelperTextWrapper } from "./shared.js";
-const defaultRender = (switchElement, description) => jsxs(Fragment, { children: [switchElement, jsx("div", { className: switchDescription, children: description })] });
-function Switch({ offLabel, onLabel, description, value = false, onChange, disabled, validity, id = createValidHtmlId(offLabel || onLabel || "toggle"), hideLabel = false, canShowErrorMessage = false, className, ref, ...rest }) {
+import { atoms } from "@gnist/themes/atoms.css.js";
+function Switch({ label, description, value = false, onChange, disabled, id = createValidHtmlId(label || "toggle"), position = "left", hideLabel = false, className, ref, ...rest }) {
   const inputId = id;
-  const labelId = `${id}-label`;
-  const helperId = `${id}-helper`;
-  const { helperTextProps, inputAriaProps } = useInputHelperText({
-    id: helperId,
-    validity,
-    reserveSpaceForMessage: canShowErrorMessage
-  });
-  const descriptionElement = description ? jsx(SelectionDescription, { disabled, children: description }) : void 0;
-  const switchElement = jsx("span", { className: `${InputWrapper} ${className}`, ref, children: jsxs("div", { className: switchContainerStyle, children: [offLabel && !hideLabel && jsx("span", { className: SwitchLabelRecipe({
-    disabled,
-    side: "left"
-  }), children: offLabel }), jsxs("label", { htmlFor: inputId, className: SwitchRecipe({
-    selected: value,
-    disabled,
-    validity: validity?.type === "error" ? "error" : void 0
-  }), id: labelId, children: [jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: InputStyleRecipe({ disabled }), style: {
+  const LabelElement = () => {
+    return jsxs("span", { className: SwitchLabelRecipe({
+      disabled,
+      side: position === "right" ? "left" : "right"
+    }), children: [label, description && jsx("div", { className: switchDescription, children: description })] });
+  };
+  return jsxs("span", { className: `${InputWrapper} ${focusContainer} ${className} ${atoms({ borderRadius: hideLabel ? "full" : "input" })}`, ref, children: [jsx("input", { type: "checkbox", id: inputId, disabled, onChange, checked: value === true, className: InputStyleRecipe({ disabled }), style: {
     position: "absolute",
     opacity: 0,
     width: "100%",
     height: "100%",
     margin: 0,
     cursor: disabled ? "not-allowed" : "pointer"
-  }, ...inputAriaProps, ...rest }), jsx("span", { className: SwitchThumbRecipe({
-    selected: value ?? false,
+  }, ...rest }), jsxs("label", { htmlFor: inputId, className: switchContainerStyle, children: [position === "right" && !hideLabel && jsx(LabelElement, {}), jsx("span", { className: SwitchRecipe({
+    selected: value,
     disabled
-  }) }), onLabel && hideLabel && jsx(ScreenReaderOnly, { children: onLabel })] }), onLabel && !hideLabel && jsx("span", { className: SwitchLabelRecipe({
-    disabled,
-    side: "right"
-  }), children: onLabel }), onLabel && !hideLabel && !offLabel && !onLabel && jsx("span", { className: SwitchLabelRecipe({
+  }), children: jsx("span", { className: SwitchThumbRecipe({
+    selected: value ?? false,
     disabled
-  }), children: onLabel })] }) });
-  return jsx(HelperTextWrapper, { ...helperTextProps, children: defaultRender(switchElement, descriptionElement) });
+  }) }) }), position === "left" && !hideLabel && jsx(LabelElement, {}), hideLabel && jsx(ScreenReaderOnly, { children: label })] })] });
 }
 export {
   Switch

package/dist/components/actions/selectionControls/switch.css.cjs

@@ -5,9 +5,18 @@ const atoms_css_js = require("@gnist/themes/atoms.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
 const recipes = require("@vanilla-extract/recipes");
 const css = require("@vanilla-extract/css");
+const focusContainer = css.style({
+  display: "inline-flex",
+  alignItems: "center",
+  selectors: {
+    "&:has(:focus-visible)": {
+      outline: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.interactive}`,
+      outlineOffset: "2px"
+    }
+  }
+});
 const switchContainerStyle = css.style({
-  display: "flex",
-  alignItems: "center"
+  display: "flex"
 });
 const switchContainer = css.style([
   {
@@ -32,16 +41,6 @@ const SwitchRecipe = recipes.recipe({
       borderWidth: "1px",
       borderStyle: "solid",
       boxSizing: "border-box"
-    },
-    {
-      selectors: {
-        "&:focus:not(:focus-visible)": {
-          outline: "none"
-        },
-        "&:has(:focus-visible)": {
-          outline: `${tokens_css_js.tokens.stroke.medium} solid ${tokens_css_js.tokens.color.interactive}`
-        }
-      }
     }
   ],
   variants: {
@@ -69,13 +68,6 @@ const SwitchRecipe = recipes.recipe({
         }
       ],
       false: {}
-    },
-    validity: {
-      error: [
-        atoms_css_js.atoms({
-          borderColor: "error"
-        })
-      ]
     }
   }
 });
@@ -119,7 +111,7 @@ const switchLabel = css.style([
   {
     userSelect: "none",
     fontSize: tokens_css_js.tokens.type.small.body.fontSize,
-    lineHeight: tokens_css_js.tokens.type.small.body.lineHeight
+    lineHeight: tokens_css_js.tokens.typeface.size.xl
   },
   atoms_css_js.atoms({
     color: "on-surface"
@@ -152,12 +144,13 @@ const SwitchLabelRecipe = recipes.recipe({
 });
 const switchDescription = css.style([
   atoms_css_js.atoms({
-    color: "on-secondary"
+    color: "text-variant"
   })
 ]);
 exports.SwitchLabelRecipe = SwitchLabelRecipe;
 exports.SwitchRecipe = SwitchRecipe;
 exports.SwitchThumbRecipe = SwitchThumbRecipe;
+exports.focusContainer = focusContainer;
 exports.switchContainer = switchContainer;
 exports.switchContainerStyle = switchContainerStyle;
 exports.switchDescription = switchDescription;

package/dist/components/actions/selectionControls/switch.css.d.ts

@@ -1,3 +1,4 @@
+export declare const focusContainer: string;
 export declare const switchContainerStyle: string;
 export declare const switchContainer: string;
 export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
@@ -12,9 +13,6 @@ export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<
         })[];
         false: {};
     };
-    validity: {
-        error: string[];
-    };
 }>;
 export declare const switchThumb: string;
 export declare const SwitchThumbRecipe: import("@vanilla-extract/recipes").RuntimeFn<{

package/dist/components/actions/selectionControls/switch.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,oBAAoB,QAG/B,CAAC;AACH,eAAO,MAAM,eAAe,QAY1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;;;;EAwDvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0B5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;EAwB5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAKA,eAAO,MAAM,cAAc,QASzB,CAAC;AAEH,eAAO,MAAM,oBAAoB,QAE/B,CAAC;AAEH,eAAO,MAAM,eAAe,QAY1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;;EAuCvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAQtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0B5B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;EAwB5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}

package/dist/components/actions/selectionControls/switch.css.js

@@ -3,9 +3,18 @@ import { atoms } from "@gnist/themes/atoms.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { recipe } from "@vanilla-extract/recipes";
 import { style } from "@vanilla-extract/css";
+const focusContainer = style({
+  display: "inline-flex",
+  alignItems: "center",
+  selectors: {
+    "&:has(:focus-visible)": {
+      outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}`,
+      outlineOffset: "2px"
+    }
+  }
+});
 const switchContainerStyle = style({
-  display: "flex",
-  alignItems: "center"
+  display: "flex"
 });
 const switchContainer = style([
   {
@@ -30,16 +39,6 @@ const SwitchRecipe = recipe({
       borderWidth: "1px",
       borderStyle: "solid",
       boxSizing: "border-box"
-    },
-    {
-      selectors: {
-        "&:focus:not(:focus-visible)": {
-          outline: "none"
-        },
-        "&:has(:focus-visible)": {
-          outline: `${tokens.stroke.medium} solid ${tokens.color.interactive}`
-        }
-      }
     }
   ],
   variants: {
@@ -67,13 +66,6 @@ const SwitchRecipe = recipe({
         }
       ],
       false: {}
-    },
-    validity: {
-      error: [
-        atoms({
-          borderColor: "error"
-        })
-      ]
     }
   }
 });
@@ -117,7 +109,7 @@ const switchLabel = style([
   {
     userSelect: "none",
     fontSize: tokens.type.small.body.fontSize,
-    lineHeight: tokens.type.small.body.lineHeight
+    lineHeight: tokens.typeface.size.xl
   },
   atoms({
     color: "on-surface"
@@ -150,13 +142,14 @@ const SwitchLabelRecipe = recipe({
 });
 const switchDescription = style([
   atoms({
-    color: "on-secondary"
+    color: "text-variant"
   })
 ]);
 export {
   SwitchLabelRecipe,
   SwitchRecipe,
   SwitchThumbRecipe,
+  focusContainer,
   switchContainer,
   switchContainerStyle,
   switchDescription,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnist/design-system",
-  "version": "4.2.2",
+  "version": "4.3.0",
   "license": "UNLICENSED",
   "type": "module",
   "main": "dist/index.cjs",
@@ -50,7 +50,7 @@
     "@base-ui-components/react": "1.0.0-beta.2",
     "@formkit/auto-animate": "^0.8.2",
     "@gnist/component-utils": "3.0.10",
-    "@gnist/themes": "^3.19.0",
+    "@gnist/themes": "^3.20.0",
     "@vanilla-extract/css": "^1.17.4",
     "@vanilla-extract/css-utils": "^0.1.6",
     "@vanilla-extract/dynamic": "^2.1.5",
@@ -90,7 +90,7 @@
     "tslib": "^2.8.1",
     "tsx": "^4.20.4",
     "typescript-transform-paths": "^3.5.5",
-    "vite": "7.1.5",
+    "vite": "7.1.12",
     "vite-plugin-svgr": "^4.3.0",
     "vite-tsconfig-paths": "^5.1.4"
   },
@@ -102,5 +102,5 @@
       "optional": true
     }
   },
-  "gitHead": "8235a7662ea21f9a728260063b31724259cd7eb9"
+  "gitHead": "e18d8f7b6f49f16ce6c111a7213e2e295f112f3d"
 }