@gnist/design-system 5.6.0 → 5.6.1

package/CHANGELOG.md

@@ -3,6 +3,10 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [5.6.1](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.6.0...@gnist/design-system@5.6.1) (2026-04-17)
+
+**Note:** Version bump only for package @gnist/design-system
+
 ## [5.6.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@5.5.3...@gnist/design-system@5.6.0) (2026-03-20)
 
 ### Features

package/README.md

@@ -100,6 +100,8 @@ export const App: React.FC = () => {
 };
 ```
 
+> Note: The `brandless` and `gnist` themes are for **internal use only**. Both use the "Geist" font family, so if you are using either of these themes, import `@gnist/design-system/fonts/tools` as your font.
+
 ### Next.js projects
 
 If you are setting up in a Next.js project, the procedure is quite the same.

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

@@ -9,7 +9,7 @@ import "../../../foundation/iconography/IconVariantProvider.js";
 import "../../../foundation/iconography/icons.js";
 import { Icon } from "../../../foundation/iconography/Icon.js";
 import { CheckboxRecipe, checkbox } from "./checkbox.css.js";
-import { InputWrapper, LabelRecipe, InputStyleRecipe, LabelStyle, indentedDescriptionStyle } from "./shared.css.js";
+import { InputWrapper, InputStyleRecipe, LabelStyle, LabelRecipe, indentedDescriptionStyle } from "./shared.css.js";
 import { SelectionDescription, HelperTextWrapper } from "./shared.js";
 const CustomCheckbox = ({ value, disabled }) => {
   if (!value) {

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

@@ -5,8 +5,8 @@ import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderO
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import { createValidHtmlId } from "../../../utilities/html/index.js";
 import classNames from "classnames";
-import { RadioButtonRecipe, CheckedCircleRecipe } from "./radiobutton.css.js";
-import { LabelRecipe, InputStyleRecipe, LabelStyle, InputWrapper, indentedDescriptionStyle } from "./shared.css.js";
+import { CheckedCircleRecipe, RadioButtonRecipe } from "./radiobutton.css.js";
+import { InputStyleRecipe, LabelStyle, LabelRecipe, InputWrapper, indentedDescriptionStyle } from "./shared.css.js";
 import { SelectionDescription, HelperTextWrapper } from "./shared.js";
 import { useRadio } from "./RadioGroup.js";
 const CustomRadioButton = ({ isChecked, disabled, validity }) => {

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

@@ -2,33 +2,43 @@
 "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");
+require("../../../foundation/iconography/ExtraIconsProvider.cjs");
+require("../../../foundation/iconography/IconVariantProvider.cjs");
+require("../../../foundation/iconography/icons.cjs");
+const Icon = require("../../../foundation/iconography/Icon.cjs");
 const switch_css = require("./switch.css.cjs");
 const shared_css = require("./shared.css.cjs");
+const shared = require("./shared.cjs");
 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 }) {
+function Switch({ label, description, value = false, onChange, disabled, id = index.createValidHtmlId(label || "toggle"), position = "left", hideLabel = false, canShowErrorMessage = false, className, ref, ...rest }) {
   const inputId = id;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = InputHelperText.useInputHelperText({
+    id: helperId,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
   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.jsx("span", { className: switch_css.switchLabelContent, children: jsxRuntime.jsx("span", { className: switch_css.SwitchLabelRecipe({ disabled }), children: label }) });
   };
-  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: {
+  const descriptionElement = description ?? jsxRuntime.jsx(shared.SelectionDescription, { disabled, children: jsxRuntime.jsx("div", { className: switch_css.switchDescription, children: description }) });
+  const switchElement = jsxRuntime.jsxs("span", { className: `${switch_css.switchField} ${className ?? ""}`, ref, children: [jsxRuntime.jsxs("span", { className: `${shared_css.InputWrapper} ${switch_css.focusContainer} ${atoms_css_js.atoms({ borderRadius: hideLabel ? "full" : "input" })}`, 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"
-  }, ...rest }), jsxRuntime.jsxs("label", { htmlFor: inputId, className: switch_css.switchContainerStyle, children: [position === "right" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), jsxRuntime.jsx("span", { className: switch_css.SwitchRecipe({
+  }, ...inputAriaProps, ...rest }), jsxRuntime.jsxs("label", { htmlFor: inputId, className: switch_css.switchRow, children: [position === "right" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), jsxRuntime.jsx("span", { className: switch_css.SwitchRecipe({
     selected: value,
     disabled
   }), children: jsxRuntime.jsx("span", { className: switch_css.SwitchThumbRecipe({
-    selected: value ?? false,
+    selected: value,
     disabled
-  }) }) }), position === "left" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), hideLabel && jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label })] })] });
+  }), children: (value && !disabled) ?? jsxRuntime.jsx("span", { className: switch_css.switchThumbIcon, "aria-hidden": true, children: jsxRuntime.jsx(Icon.Icon, { icon: "check", size: "xs" }) }) }) }), position === "left" && !hideLabel && jsxRuntime.jsx(LabelElement, {}), hideLabel && jsxRuntime.jsx(ScreenReaderOnly.ScreenReaderOnly, { children: label })] })] }), descriptionElement] });
+  return jsxRuntime.jsx(shared.HelperTextWrapper, { ...helperTextProps, children: switchElement });
 }
 exports.Switch = Switch;

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

@@ -13,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({ label, description, value, onChange, disabled, id, position, hideLabel, className, ref, ...rest }: SwitchProps): import("react/jsx-runtime").JSX.Element;
+export declare function Switch({ label, description, value, onChange, disabled, id, position, hideLabel, canShowErrorMessage, 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":"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,GAAG,OAAO,CAAC;IAC5B,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"}
+{"version":3,"file":"Switch.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/Switch.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAc5B,OAAO,EAEH,qBAAqB,EAExB,MAAM,aAAa,CAAC;AAGrB,MAAM,WAAW,WACb,SAAQ,IAAI,CAAC,qBAAqB,CAAC,OAAO,CAAC,EAAE,QAAQ,GAAG,UAAU,CAAC;IACnE,iCAAiC;IACjC,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,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,mBAA2B,EAC3B,SAAS,EACT,GAAG,EACH,GAAG,IAAI,EACV,EAAE,WAAW,2CAkFb"}

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

@@ -1,33 +1,43 @@
 "use client";
-import { jsxs, jsx } from "react/jsx-runtime";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useInputHelperText } from "../../../building-blocks/inputs/InputHelperText.js";
 import { ScreenReaderOnly } from "../../../utilities/accessibility/ScreenReaderOnly.js";
 import "../../../utilities/accessibility/visuallyHidden.css.js";
 import { createValidHtmlId } from "../../../utilities/html/index.js";
-import { focusContainer, switchContainerStyle, SwitchRecipe, SwitchThumbRecipe, SwitchLabelRecipe, switchDescription } from "./switch.css.js";
+import "../../../foundation/iconography/ExtraIconsProvider.js";
+import "../../../foundation/iconography/IconVariantProvider.js";
+import "../../../foundation/iconography/icons.js";
+import { Icon } from "../../../foundation/iconography/Icon.js";
+import { switchDescription, switchField, focusContainer, switchRow, switchThumbIcon, SwitchThumbRecipe, SwitchRecipe, switchLabelContent, SwitchLabelRecipe } from "./switch.css.js";
 import { InputWrapper, InputStyleRecipe } from "./shared.css.js";
+import { SelectionDescription, HelperTextWrapper } from "./shared.js";
 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 }) {
+function Switch({ label, description, value = false, onChange, disabled, id = createValidHtmlId(label || "toggle"), position = "left", hideLabel = false, canShowErrorMessage = false, className, ref, ...rest }) {
   const inputId = id;
+  const helperId = `${id}-helper`;
+  const { helperTextProps, inputAriaProps } = useInputHelperText({
+    id: helperId,
+    reserveSpaceForMessage: canShowErrorMessage
+  });
   const LabelElement = () => {
-    return jsxs("span", { className: SwitchLabelRecipe({
-      disabled,
-      side: position === "right" ? "left" : "right"
-    }), children: [label, description && jsx("div", { className: switchDescription, children: description })] });
+    return jsx("span", { className: switchLabelContent, children: jsx("span", { className: SwitchLabelRecipe({ disabled }), children: label }) });
   };
-  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: {
+  const descriptionElement = description ?? jsx(SelectionDescription, { disabled, children: jsx("div", { className: switchDescription, children: description }) });
+  const switchElement = jsxs("span", { className: `${switchField} ${className ?? ""}`, ref, children: [jsxs("span", { className: `${InputWrapper} ${focusContainer} ${atoms({ borderRadius: hideLabel ? "full" : "input" })}`, 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"
-  }, ...rest }), jsxs("label", { htmlFor: inputId, className: switchContainerStyle, children: [position === "right" && !hideLabel && jsx(LabelElement, {}), jsx("span", { className: SwitchRecipe({
+  }, ...inputAriaProps, ...rest }), jsxs("label", { htmlFor: inputId, className: switchRow, children: [position === "right" && !hideLabel && jsx(LabelElement, {}), jsx("span", { className: SwitchRecipe({
     selected: value,
     disabled
   }), children: jsx("span", { className: SwitchThumbRecipe({
-    selected: value ?? false,
+    selected: value,
     disabled
-  }) }) }), position === "left" && !hideLabel && jsx(LabelElement, {}), hideLabel && jsx(ScreenReaderOnly, { children: label })] })] });
+  }), children: (value && !disabled) ?? jsx("span", { className: switchThumbIcon, "aria-hidden": true, children: jsx(Icon, { icon: "check", size: "xs" }) }) }) }), position === "left" && !hideLabel && jsx(LabelElement, {}), hideLabel && jsx(ScreenReaderOnly, { children: label })] })] }), descriptionElement] });
+  return jsx(HelperTextWrapper, { ...helperTextProps, children: switchElement });
 }
 export {
   Switch

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

@@ -3,56 +3,79 @@
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 const atoms_css_js = require("@gnist/themes/atoms.css.js");
 const tokens_css_js = require("@gnist/themes/tokens.css.js");
+const cssUtils = require("@vanilla-extract/css-utils");
 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"
-    }
-  }
+  position: "relative",
+  flexShrink: 0
+});
+const switchField = css.style({
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: tokens_css_js.tokens.spacing.base
 });
-const switchContainerStyle = css.style({
-  display: "flex"
+const switchRow = css.style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: tokens_css_js.tokens.spacing.xxs
+});
+const switchLabelContent = css.style({
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: tokens_css_js.tokens.spacing.base,
+  minWidth: 0
 });
 const switchContainer = css.style([
   {
     position: "relative",
     display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
     cursor: "pointer",
-    transition: "background-color 0.2s ease"
+    overflow: "hidden",
+    transition: "background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease"
   },
   atoms_css_js.atoms({
     borderRadius: "full",
     width: "xxl",
-    height: "l"
+    height: "m"
   })
 ]);
 const SwitchRecipe = recipes.recipe({
   base: [
     switchContainer,
-    atoms_css_js.atoms({
-      borderColor: "outline"
-    }),
     {
-      borderWidth: "1px",
+      borderWidth: tokens_css_js.tokens.stroke.small,
       borderStyle: "solid",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      selectors: {
+        [`${focusContainer}:has(input:focus-visible) &`]: {
+          boxShadow: `0 0 0 ${tokens_css_js.tokens.stroke.medium} ${tokens_css_js.tokens.color.interactive}`
+        },
+        [`${focusContainer}:has(input:not(:disabled):hover) &`]: {
+          filter: "brightness(0.98)"
+        },
+        [`${focusContainer}:has(input:not(:disabled):active) &`]: {
+          filter: "brightness(0.94)"
+        }
+      }
     }
   ],
   variants: {
     selected: {
       true: [
         atoms_css_js.atoms({
-          backgroundColor: "success"
+          backgroundColor: "success",
+          borderColor: "success"
         })
       ],
       false: [
         atoms_css_js.atoms({
-          backgroundColor: "surface-variant"
+          backgroundColor: "surface-variant",
+          borderColor: "on-surface"
         })
       ]
     },
@@ -60,53 +83,114 @@ const SwitchRecipe = recipes.recipe({
       true: [
         atoms_css_js.atoms({
           backgroundColor: "disabled",
-          borderColor: "disabled"
+          borderColor: "on-disabled"
         }),
         {
-          cursor: "not-allowed",
-          opacity: 0.6
+          cursor: "not-allowed"
         }
       ],
       false: {}
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        selected: true,
+        disabled: true
+      },
+      style: [
+        atoms_css_js.atoms({
+          backgroundColor: "on-disabled",
+          borderColor: "on-disabled"
+        })
+      ]
+    }
+  ]
 });
 const switchThumb = css.style({
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
-  transition: "left 0.2s ease, background-color 0.2s ease",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "left 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease",
   borderRadius: "50%",
-  backgroundColor: tokens_css_js.tokens.palette.white,
-  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+  backgroundColor: tokens_css_js.tokens.color.surface,
+  selectors: {
+    [`${focusContainer}:has(input:not(:disabled):active) &`]: {
+      transform: "translateY(-50%) scale(0.94)"
+    }
+  }
 });
 const SwitchThumbRecipe = recipes.recipe({
   base: [
     switchThumb,
     atoms_css_js.atoms({
-      width: "m",
-      height: "m"
-    })
+      width: "s",
+      height: "s"
+    }),
+    {
+      borderWidth: tokens_css_js.tokens.stroke.small,
+      borderStyle: "solid",
+      boxSizing: "border-box"
+    }
   ],
   variants: {
     selected: {
-      true: {
-        left: `calc(100% - ${tokens_css_js.tokens.spacing.m} - 1px)`
-      },
-      false: {
-        left: "1px"
-      }
+      true: [
+        atoms_css_js.atoms({
+          borderColor: "on-surface"
+        }),
+        {
+          left: cssUtils.calc.subtract("100%", cssUtils.calc.add(tokens_css_js.tokens.size.s, tokens_css_js.tokens.stroke.small))
+        }
+      ],
+      false: [
+        atoms_css_js.atoms({
+          borderColor: "on-surface"
+        }),
+        {
+          left: tokens_css_js.tokens.stroke.small
+        }
+      ]
     },
     disabled: {
       true: [
         atoms_css_js.atoms({
-          backgroundColor: "on-disabled"
+          backgroundColor: "surface",
+          borderColor: "on-disabled"
         })
       ],
       false: {}
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        selected: true,
+        disabled: true
+      },
+      style: [
+        atoms_css_js.atoms({
+          borderColor: "surface"
+        })
+      ]
+    }
+  ]
 });
+const switchThumbIcon = css.style([
+  {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 0,
+    pointerEvents: "none"
+  },
+  atoms_css_js.atoms({
+    color: "on-surface"
+  })
+]);
 const switchLabel = css.style([
   {
     userSelect: "none",
@@ -127,18 +211,6 @@ const SwitchLabelRecipe = recipes.recipe({
         })
       ],
       false: {}
-    },
-    side: {
-      left: [
-        atoms_css_js.atoms({
-          marginRight: "xxs"
-        })
-      ],
-      right: [
-        atoms_css_js.atoms({
-          marginLeft: "xxs"
-        })
-      ]
     }
   }
 });
@@ -152,7 +224,10 @@ exports.SwitchRecipe = SwitchRecipe;
 exports.SwitchThumbRecipe = SwitchThumbRecipe;
 exports.focusContainer = focusContainer;
 exports.switchContainer = switchContainer;
-exports.switchContainerStyle = switchContainerStyle;
 exports.switchDescription = switchDescription;
+exports.switchField = switchField;
 exports.switchLabel = switchLabel;
+exports.switchLabelContent = switchLabelContent;
+exports.switchRow = switchRow;
 exports.switchThumb = switchThumb;
+exports.switchThumbIcon = switchThumbIcon;

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

@@ -1,5 +1,7 @@
 export declare const focusContainer: string;
-export declare const switchContainerStyle: string;
+export declare const switchField: string;
+export declare const switchRow: string;
+export declare const switchLabelContent: string;
 export declare const switchContainer: string;
 export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     selected: {
@@ -9,7 +11,6 @@ export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<
     disabled: {
         true: (string | {
             cursor: "not-allowed";
-            opacity: number;
         })[];
         false: {};
     };
@@ -17,28 +18,25 @@ export declare const SwitchRecipe: import("@vanilla-extract/recipes").RuntimeFn<
 export declare const switchThumb: string;
 export declare const SwitchThumbRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     selected: {
-        true: {
-            left: `calc(100% - var(--${string}) - 1px)`;
-        };
-        false: {
-            left: "1px";
-        };
+        true: (string | {
+            left: string;
+        })[];
+        false: (string | {
+            left: `var(--${string})`;
+        })[];
     };
     disabled: {
         true: string[];
         false: {};
     };
 }>;
+export declare const switchThumbIcon: string;
 export declare const switchLabel: string;
 export declare const SwitchLabelRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     disabled: {
         true: string[];
         false: {};
     };
-    side: {
-        left: string[];
-        right: string[];
-    };
 }>;
 export declare const switchDescription: string;
 //# sourceMappingURL=switch.css.d.ts.map

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,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"}
+{"version":3,"file":"switch.css.d.ts","sourceRoot":"","sources":["../../../../src/components/actions/selectionControls/switch.css.ts"],"names":[],"mappings":"AAMA,eAAO,MAAM,cAAc,QAKzB,CAAC;AAEH,eAAO,MAAM,WAAW,QAItB,CAAC;AAEH,eAAO,MAAM,SAAS,QAIpB,CAAC;AAEH,eAAO,MAAM,kBAAkB,QAK7B,CAAC;AAEH,eAAO,MAAM,eAAe,QAgB1B,CAAC;AAEH,eAAO,MAAM,YAAY;;;;;;;;;;;EA8DvB,CAAC;AAEH,eAAO,MAAM,WAAW,QAgBtB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;;;;;;;;;EA0D5B,CAAC;AAEH,eAAO,MAAM,eAAe,QAW1B,CAAC;AAEH,eAAO,MAAM,WAAW,QAStB,CAAC;AAEH,eAAO,MAAM,iBAAiB;;;;;EAY5B,CAAC;AAEH,eAAO,MAAM,iBAAiB,QAI5B,CAAC"}

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

@@ -1,56 +1,79 @@
 "use client";
 import { atoms } from "@gnist/themes/atoms.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
+import { calc } from "@vanilla-extract/css-utils";
 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"
-    }
-  }
+  position: "relative",
+  flexShrink: 0
+});
+const switchField = style({
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: tokens.spacing.base
 });
-const switchContainerStyle = style({
-  display: "flex"
+const switchRow = style({
+  display: "inline-flex",
+  alignItems: "center",
+  gap: tokens.spacing.xxs
+});
+const switchLabelContent = style({
+  display: "inline-flex",
+  flexDirection: "column",
+  gap: tokens.spacing.base,
+  minWidth: 0
 });
 const switchContainer = style([
   {
     position: "relative",
     display: "inline-flex",
+    alignItems: "center",
+    flexShrink: 0,
     cursor: "pointer",
-    transition: "background-color 0.2s ease"
+    overflow: "hidden",
+    transition: "background-color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease"
   },
   atoms({
     borderRadius: "full",
     width: "xxl",
-    height: "l"
+    height: "m"
   })
 ]);
 const SwitchRecipe = recipe({
   base: [
     switchContainer,
-    atoms({
-      borderColor: "outline"
-    }),
     {
-      borderWidth: "1px",
+      borderWidth: tokens.stroke.small,
       borderStyle: "solid",
-      boxSizing: "border-box"
+      boxSizing: "border-box",
+      selectors: {
+        [`${focusContainer}:has(input:focus-visible) &`]: {
+          boxShadow: `0 0 0 ${tokens.stroke.medium} ${tokens.color.interactive}`
+        },
+        [`${focusContainer}:has(input:not(:disabled):hover) &`]: {
+          filter: "brightness(0.98)"
+        },
+        [`${focusContainer}:has(input:not(:disabled):active) &`]: {
+          filter: "brightness(0.94)"
+        }
+      }
     }
   ],
   variants: {
     selected: {
       true: [
         atoms({
-          backgroundColor: "success"
+          backgroundColor: "success",
+          borderColor: "success"
         })
       ],
       false: [
         atoms({
-          backgroundColor: "surface-variant"
+          backgroundColor: "surface-variant",
+          borderColor: "on-surface"
         })
       ]
     },
@@ -58,53 +81,114 @@ const SwitchRecipe = recipe({
       true: [
         atoms({
           backgroundColor: "disabled",
-          borderColor: "disabled"
+          borderColor: "on-disabled"
         }),
         {
-          cursor: "not-allowed",
-          opacity: 0.6
+          cursor: "not-allowed"
         }
       ],
       false: {}
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        selected: true,
+        disabled: true
+      },
+      style: [
+        atoms({
+          backgroundColor: "on-disabled",
+          borderColor: "on-disabled"
+        })
+      ]
+    }
+  ]
 });
 const switchThumb = style({
   position: "absolute",
   top: "50%",
   transform: "translateY(-50%)",
-  transition: "left 0.2s ease, background-color 0.2s ease",
+  display: "inline-flex",
+  alignItems: "center",
+  justifyContent: "center",
+  transition: "left 0.2s ease, transform 0.2s ease, background-color 0.2s ease, border-color 0.2s ease",
   borderRadius: "50%",
-  backgroundColor: tokens.palette.white,
-  boxShadow: "0 1px 3px rgba(0, 0, 0, 0.3)"
+  backgroundColor: tokens.color.surface,
+  selectors: {
+    [`${focusContainer}:has(input:not(:disabled):active) &`]: {
+      transform: "translateY(-50%) scale(0.94)"
+    }
+  }
 });
 const SwitchThumbRecipe = recipe({
   base: [
     switchThumb,
     atoms({
-      width: "m",
-      height: "m"
-    })
+      width: "s",
+      height: "s"
+    }),
+    {
+      borderWidth: tokens.stroke.small,
+      borderStyle: "solid",
+      boxSizing: "border-box"
+    }
   ],
   variants: {
     selected: {
-      true: {
-        left: `calc(100% - ${tokens.spacing.m} - 1px)`
-      },
-      false: {
-        left: "1px"
-      }
+      true: [
+        atoms({
+          borderColor: "on-surface"
+        }),
+        {
+          left: calc.subtract("100%", calc.add(tokens.size.s, tokens.stroke.small))
+        }
+      ],
+      false: [
+        atoms({
+          borderColor: "on-surface"
+        }),
+        {
+          left: tokens.stroke.small
+        }
+      ]
     },
     disabled: {
       true: [
         atoms({
-          backgroundColor: "on-disabled"
+          backgroundColor: "surface",
+          borderColor: "on-disabled"
         })
       ],
       false: {}
     }
-  }
+  },
+  compoundVariants: [
+    {
+      variants: {
+        selected: true,
+        disabled: true
+      },
+      style: [
+        atoms({
+          borderColor: "surface"
+        })
+      ]
+    }
+  ]
 });
+const switchThumbIcon = style([
+  {
+    display: "inline-flex",
+    alignItems: "center",
+    justifyContent: "center",
+    lineHeight: 0,
+    pointerEvents: "none"
+  },
+  atoms({
+    color: "on-surface"
+  })
+]);
 const switchLabel = style([
   {
     userSelect: "none",
@@ -125,18 +209,6 @@ const SwitchLabelRecipe = recipe({
         })
       ],
       false: {}
-    },
-    side: {
-      left: [
-        atoms({
-          marginRight: "xxs"
-        })
-      ],
-      right: [
-        atoms({
-          marginLeft: "xxs"
-        })
-      ]
     }
   }
 });
@@ -151,8 +223,11 @@ export {
   SwitchThumbRecipe,
   focusContainer,
   switchContainer,
-  switchContainerStyle,
   switchDescription,
+  switchField,
   switchLabel,
-  switchThumb
+  switchLabelContent,
+  switchRow,
+  switchThumb,
+  switchThumbIcon
 };

package/dist/components/feedback/alerts/AlertBanner.js

@@ -18,7 +18,7 @@ import "../../actions/buttons/styles.css.js";
 import "../../../styles/states.css.js";
 import { TextButton } from "../../actions/buttons/TextButton.js";
 import { IconButton } from "../../actions/buttons/IconButton.js";
-import { bannerHeading, icon, mainContentContainer, closeButton, messageContainer, actionButton, banner } from "./AlertBanner.css.js";
+import { bannerHeading, icon, closeButton, messageContainer, actionButton, mainContentContainer, banner } from "./AlertBanner.css.js";
 const BannerHeading = component("BannerHeading", bannerHeading, "h2");
 const AlertBanner = ({ type, heading, message, dismiss, action, density = "default", headingLevel = "h2", className }) => {
   const text = useTranslation((t) => t.components.feedback.alerts);

package/dist/components/inputs/dropdowns/SelectBase.js

@@ -4,7 +4,7 @@ import * as React from "react";
 import { useState } from "react";
 import { Select } from "@base-ui/react/select";
 import classNames from "classnames";
-import { inputFieldWrapperRecipe, inputContentWrapper, wrapperStyle } from "../shared-styles/inputField.css.js";
+import { inputContentWrapper, inputFieldWrapperRecipe, wrapperStyle } from "../shared-styles/inputField.css.js";
 import { selectStyle, popUpStyle, listBoxStyle, optionStyle, optionBackground, singleOptionStyle } from "./select.css.js";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { postInputWidth, preInputWidth } from "../shared-styles/inputFieldConstants.css.js";

package/dist/components/inputs/pickers/Calendar.css.js

@@ -1,5 +1,5 @@
 "use client";
-import { stateLayers, focusStyle } from "../../../styles/states.css.js";
+import { focusStyle, stateLayers } from "../../../styles/states.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
 import { tokens } from "@gnist/themes/tokens.css.js";
 import { style, createVar, globalStyle } from "@vanilla-extract/css";

package/dist/components/inputs/textFields/TextArea.js

@@ -15,7 +15,7 @@ import "../../../foundation/logos/Logo.css.js";
 import { atoms } from "@gnist/themes/atoms.css.js";
 import { assignInlineVars } from "@vanilla-extract/dynamic";
 import { iconButtonOverlayRecipe } from "../shared-styles/iconButtonOverlay.css.js";
-import { inputFieldWrapperRecipe, inputFieldStyle, inputContentWrapper, wrapperStyle } from "../shared-styles/inputField.css.js";
+import { inputFieldStyle, inputContentWrapper, inputFieldWrapperRecipe, wrapperStyle } from "../shared-styles/inputField.css.js";
 import { postInputWidth, preInputWidth, visibleLines } from "../shared-styles/inputFieldConstants.css.js";
 import { labelStyle } from "../shared-styles/labelStyles.css.js";
 import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";

package/dist/components/inputs/textFields/TextField.js

@@ -12,7 +12,7 @@ import "../../../utilities/layout/Row.js";
 import "@gnist/themes/tokens.css.js";
 import "react-content-loader";
 import { iconButtonOverlayRecipe } from "../shared-styles/iconButtonOverlay.css.js";
-import { inputFieldWrapperRecipe, inputFieldStyle, inputContentWrapper, wrapperStyle } from "../shared-styles/inputField.css.js";
+import { inputFieldStyle, inputContentWrapper, inputFieldWrapperRecipe, wrapperStyle } from "../shared-styles/inputField.css.js";
 import { postInputWidth, preInputWidth } from "../shared-styles/inputFieldConstants.css.js";
 import { labelStyle } from "../shared-styles/labelStyles.css.js";
 import { prefixStyle, suffixStyle } from "../shared-styles/suffixPrefix.css.js";

package/dist/components/surfaces/modal/Modal.js

@@ -30,7 +30,7 @@ import "../../../styles/animations.css.js";
 import "../../actions/chips/styles.css.js";
 import { useTranslation } from "../../../translations/index.js";
 import { createPortal } from "react-dom";
-import { modalStyle, backdropStyle, headerRowRecipe, modalHeadingStyle, contentContainerRecipe, actionRowRecipe, dialogRecipe } from "./modal.css.js";
+import { modalStyle, backdropStyle, modalHeadingStyle, headerRowRecipe, contentContainerRecipe, actionRowRecipe, dialogRecipe } from "./modal.css.js";
 const hasScroll = (size, height) => {
   switch (size) {
     case "fullscreen":

package/dist/foundation/logos/svg/index.cjs

@@ -1,32 +1,32 @@
 "use client";
 "use strict";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
-const index = require("./bilhold/index.cjs");
-const index$1 = require("./mollerbil/index.cjs");
-const index$2 = require("./skoda/index.cjs");
-const index$3 = require("./gumpen/index.cjs");
-const index$4 = require("./vw/index.cjs");
+const index$3 = require("./bilhold/index.cjs");
+const index$7 = require("./mollerbil/index.cjs");
+const index$8 = require("./skoda/index.cjs");
+const index$6 = require("./gumpen/index.cjs");
+const index$9 = require("./vw/index.cjs");
 const index$5 = require("./dahles/index.cjs");
-const index$6 = require("./autoria/index.cjs");
-const index$7 = require("./audi/index.cjs");
-const index$8 = require("./cupra/index.cjs");
-const index$9 = require("./others/index.cjs");
-exports.bilhold = index.bilhold;
-exports.mollerbil = index$1.mollerbil;
-exports.skoda = index$2.skoda;
-exports.gumpen = index$3.gumpen;
-exports.vw = index$4.vw;
-exports.vwnytte = index$4.vwnytte;
+const index$2 = require("./autoria/index.cjs");
+const index$1 = require("./audi/index.cjs");
+const index$4 = require("./cupra/index.cjs");
+const index = require("./others/index.cjs");
+exports.bilhold = index$3.bilhold;
+exports.mollerbil = index$7.mollerbil;
+exports.skoda = index$8.skoda;
+exports.gumpen = index$6.gumpen;
+exports.vw = index$9.vw;
+exports.vwnytte = index$9.vwnytte;
 exports.dahles = index$5.dahles;
-exports.autoria = index$6.autoria;
-exports.audi = index$7.audi;
-exports.cupra = index$8.cupra;
-exports.albjerk = index$9.albjerk;
-exports.alta = index$9.alta;
-exports.berge = index$9.berge;
-exports.fremme = index$9.fremme;
-exports.kirkenes = index$9.kirkenes;
-exports.mobile = index$9.mobile;
-exports.slatlem = index$9.slatlem;
-exports.sulland = index$9.sulland;
-exports.svebjorn = index$9.svebjorn;
+exports.autoria = index$2.autoria;
+exports.audi = index$1.audi;
+exports.cupra = index$4.cupra;
+exports.albjerk = index.albjerk;
+exports.alta = index.alta;
+exports.berge = index.berge;
+exports.fremme = index.fremme;
+exports.kirkenes = index.kirkenes;
+exports.mobile = index.mobile;
+exports.slatlem = index.slatlem;
+exports.sulland = index.sulland;
+exports.svebjorn = index.svebjorn;

package/dist/index.cjs

@@ -34,14 +34,14 @@ const LinkCard = require("./components/surfaces/cards/LinkCard.cjs");
 const RadioCard = require("./components/surfaces/cards/RadioCard.cjs");
 const Modal = require("./components/surfaces/modal/Modal.cjs");
 const Accordion = require("./components/surfaces/accordion/Accordion.cjs");
-const index$1 = require("./fonts/index.cjs");
+const index = require("./fonts/index.cjs");
 const ExtraIconsProvider = require("./foundation/iconography/ExtraIconsProvider.cjs");
 const IconVariantProvider = require("./foundation/iconography/IconVariantProvider.cjs");
 const icons = require("./foundation/iconography/icons.cjs");
 const Icon = require("./foundation/iconography/Icon.cjs");
-const index$2 = require("./foundation/typography/index.cjs");
+const index$1 = require("./foundation/typography/index.cjs");
 const Logo = require("./foundation/logos/Logo.cjs");
-const index = require("./translations/index.cjs");
+const index$2 = require("./translations/index.cjs");
 const ScreenReaderOnly = require("./utilities/accessibility/ScreenReaderOnly.cjs");
 const visuallyHidden_css = require("./utilities/accessibility/visuallyHidden.css.cjs");
 const formContext = require("./utilities/forms/formContext.cjs");
@@ -90,34 +90,34 @@ exports.LinkCard = LinkCard.LinkCard;
 exports.RadioCard = RadioCard.RadioCard;
 exports.Modal = Modal.Modal;
 exports.Accordion = Accordion.Accordion;
-exports.AudiFont = index$1.AudiFont;
-exports.AutoriaFont = index$1.AutoriaFont;
-exports.BilholdFont = index$1.BilholdFont;
-exports.CupraFont = index$1.CupraFont;
-exports.DahlesFont = index$1.DahlesFont;
-exports.GumpenFont = index$1.GumpenFont;
-exports.MollerFont = index$1.MollerFont;
-exports.SkodaFont = index$1.SkodaFont;
-exports.ToolsFont = index$1.ToolsFont;
-exports.VWFont = index$1.VWFont;
+exports.AudiFont = index.AudiFont;
+exports.AutoriaFont = index.AutoriaFont;
+exports.BilholdFont = index.BilholdFont;
+exports.CupraFont = index.CupraFont;
+exports.DahlesFont = index.DahlesFont;
+exports.GumpenFont = index.GumpenFont;
+exports.MollerFont = index.MollerFont;
+exports.SkodaFont = index.SkodaFont;
+exports.ToolsFont = index.ToolsFont;
+exports.VWFont = index.VWFont;
 exports.ExtraIconsProvider = ExtraIconsProvider.ExtraIconsProvider;
 exports.IconVariantProvider = IconVariantProvider.IconVariantProvider;
 exports.defineIcons = icons.defineIcons;
 exports.Icon = Icon.Icon;
-exports.BodyText = index$2.BodyText;
-exports.DetailText = index$2.DetailText;
-exports.DisplayText = index$2.DisplayText;
-exports.HeaderLevels = index$2.HeaderLevels;
-exports.Heading1Text = index$2.Heading1Text;
-exports.Heading2Text = index$2.Heading2Text;
-exports.Heading3Text = index$2.Heading3Text;
-exports.LeadText = index$2.LeadText;
-exports.Link = index$2.Link;
-exports.TextContainer = index$2.TextContainer;
+exports.BodyText = index$1.BodyText;
+exports.DetailText = index$1.DetailText;
+exports.DisplayText = index$1.DisplayText;
+exports.HeaderLevels = index$1.HeaderLevels;
+exports.Heading1Text = index$1.Heading1Text;
+exports.Heading2Text = index$1.Heading2Text;
+exports.Heading3Text = index$1.Heading3Text;
+exports.LeadText = index$1.LeadText;
+exports.Link = index$1.Link;
+exports.TextContainer = index$1.TextContainer;
 exports.Logo = Logo.Logo;
-exports.sliceTranslate = index.sliceTranslate;
-exports.translate = index.translate;
-exports.useTranslation = index.useTranslation;
+exports.sliceTranslate = index$2.sliceTranslate;
+exports.translate = index$2.translate;
+exports.useTranslation = index$2.useTranslation;
 exports.ScreenReaderOnly = ScreenReaderOnly.ScreenReaderOnly;
 exports.visuallyHidden = visuallyHidden_css.visuallyHidden;
 exports.FormProvider = formContext.FormProvider;

package/dist/utilities/validation/validation.js

@@ -1,5 +1,5 @@
 "use client";
-import { translate, translations } from "../../translations/index.js";
+import { translations, translate } from "../../translations/index.js";
 import { WHITE_SPACE } from "./regex.js";
 function getValidationMessage(result, messagePrefix, lang) {
   if (!result) {

package/dist/utilities/validation/validators.js

@@ -1,6 +1,6 @@
 "use client";
 import { sliceTranslate } from "../../translations/index.js";
-import { VALID_ADDRESS, VALID_DIGITS, VALID_EMAIL, VALID_NAME, VALID_FIRST_CELL_PHONE_DIGIT, REG_NO_FULL_LENGTH, REG_NO_FULL_PATTERN } from "./regex.js";
+import { VALID_ADDRESS, VALID_FIRST_CELL_PHONE_DIGIT, VALID_DIGITS, VALID_EMAIL, VALID_NAME, REG_NO_FULL_LENGTH, REG_NO_FULL_PATTERN } from "./regex.js";
 import { validation, stripWhitespace } from "./validation.js";
 import { matchesRegex, hasLength, maxLength } from "./validationSteps.js";
 const texts = sliceTranslate((t) => t.validation.errors);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@gnist/design-system",
-    "version": "5.6.0",
+    "version": "5.6.1",
     "license": "UNLICENSED",
     "type": "module",
     "main": "dist/index.cjs",
@@ -49,8 +49,8 @@
     "dependencies": {
         "@base-ui/react": "1.0.0",
         "@formkit/auto-animate": "^0.8.2",
-        "@gnist/component-utils": "3.0.13",
-        "@gnist/themes": "^3.28.1",
+        "@gnist/component-utils": "3.0.14",
+        "@gnist/themes": "^3.29.0",
         "@vanilla-extract/css": "^1.17.4",
         "@vanilla-extract/css-utils": "^0.1.6",
         "@vanilla-extract/dynamic": "^2.1.5",
@@ -70,8 +70,8 @@
         "@gnist/eslint-config": "",
         "@gnist/ts-config": "",
         "@rollup/plugin-typescript": "^12.1.4",
-        "@tsconfig/node22": "^22.0.2",
-        "@types/node": "^22.14.0",
+        "@tsconfig/node24": "^24.0.0",
+        "@types/node": "^24.0.0",
         "@types/react": "19.2.7",
         "@types/react-dom": "19.2.3",
         "@types/semver": "^7.7.0",
@@ -90,7 +90,7 @@
         "tslib": "^2.8.1",
         "tsx": "^4.20.4",
         "typescript-transform-paths": "^3.5.5",
-        "vite": "7.1.12",
+        "vite": "7.3.2",
         "vite-plugin-svgr": "^4.3.0",
         "vite-tsconfig-paths": "^5.1.4"
     },
@@ -102,5 +102,5 @@
             "optional": true
         }
     },
-    "gitHead": "7f6f9eaa3b805259fcd37de0d8fbb6cd74fdec86"
+    "gitHead": "1b5b7189ae8c3576e8fec2c28f1d418667a544d4"
 }