@navikt/ds-react 4.7.1 → 4.7.3

package/_docs.json

@@ -1296,6 +1296,111 @@
       }
     }
   },
+  {
+    "filePath": "src/chips/Removable.tsx",
+    "displayName": "Removable",
+    "props": {
+      "variant": {
+        "defaultValue": {
+          "value": "action"
+        },
+        "description": "Chip-variants",
+        "name": "variant",
+        "parent": {
+          "fileName": "src/chips/Removable.tsx",
+          "name": "RemovableChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Removable.tsx",
+            "name": "RemovableChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "\"action\" | \"neutral\""
+        }
+      },
+      "removeLabel": {
+        "defaultValue": {
+          "value": "slett"
+        },
+        "description": "Replaces label read for screen-readers",
+        "name": "removeLabel",
+        "parent": {
+          "fileName": "src/chips/Removable.tsx",
+          "name": "RemovableChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Removable.tsx",
+            "name": "RemovableChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "onDelete": {
+        "defaultValue": null,
+        "description": "Click callback",
+        "name": "onDelete",
+        "parent": {
+          "fileName": "src/chips/Removable.tsx",
+          "name": "RemovableChipsProps"
+        },
+        "declarations": [
+          {
+            "fileName": "src/chips/Removable.tsx",
+            "name": "RemovableChipsProps"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "(() => void)"
+        }
+      },
+      "className": {
+        "defaultValue": null,
+        "description": "",
+        "name": "className",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "HTMLAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "HTMLAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "string"
+        }
+      },
+      "ref": {
+        "defaultValue": null,
+        "description": "Allows getting a ref to the component instance.\nOnce the component unmounts, React will set `ref.current` to `null` (or call the ref with `null` if you passed a callback ref).\n@see https://react.dev/learn/referencing-values-with-refs#refs-and-the-dom",
+        "name": "ref",
+        "parent": {
+          "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+          "name": "RefAttributes"
+        },
+        "declarations": [
+          {
+            "fileName": "aksel/node_modules/@types/react/ts5.0/index.d.ts",
+            "name": "RefAttributes"
+          }
+        ],
+        "required": false,
+        "type": {
+          "name": "Ref<HTMLButtonElement>"
+        }
+      }
+    }
+  },
   {
     "filePath": "src/chips/Toggle.tsx",
     "displayName": "ToggleChips",
@@ -5494,7 +5599,7 @@
         "defaultValue": {
           "value": "medium"
         },
-        "description": "Changes Loader width/height\n64px | 40px | 32px | 24px | 20px | 16px",
+        "description": "Changes Loader width/height\n88px | 64px | 40px | 32px | 24px | 20px | 16px",
         "name": "size",
         "parent": {
           "fileName": "src/loader/Loader.tsx",

package/cjs/chips/Removable.js

@@ -42,8 +42,8 @@ const aksel_icons_1 = require("@navikt/aksel-icons");
 const clsx_1 = __importDefault(require("clsx"));
 const react_1 = __importStar(require("react"));
 exports.RemovableChips = (0, react_1.forwardRef)((_a, ref) => {
-    var { className, children, variant = "action", as: Component = "button", removeLabel = "slett", onDelete } = _a, rest = __rest(_a, ["className", "children", "variant", "as", "removeLabel", "onDelete"]);
-    return (react_1.default.createElement(Component, Object.assign({}, rest, { ref: ref, className: (0, clsx_1.default)("navds-chips__chip navds-chips__removable navds-chips--icon-right", className, `navds-chips__removable--${variant}`), "aria-label": `${children} ${removeLabel}`, onClick: (e) => {
+    var { className, children, variant = "action", removeLabel = "slett", onDelete, type = "button" } = _a, rest = __rest(_a, ["className", "children", "variant", "removeLabel", "onDelete", "type"]);
+    return (react_1.default.createElement("button", Object.assign({}, rest, { ref: ref, type: type, className: (0, clsx_1.default)("navds-chips__chip navds-chips__removable navds-chips--icon-right", className, `navds-chips__removable--${variant}`), "aria-label": `${children} ${removeLabel}`, onClick: (e) => {
             var _a;
             onDelete === null || onDelete === void 0 ? void 0 : onDelete();
             (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);

package/cjs/stepper/Stepper.js

@@ -77,8 +77,14 @@ exports.Stepper = (0, react_1.forwardRef)((_a, ref) => {
                 orientation,
                 interactive,
             } }, react_1.default.Children.map(children, (step, index) => {
-            var _a, _b;
-            return (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-stepper__item"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") },
+            var _a, _b, _c, _d, _e;
+            return (react_1.default.createElement("li", { className: (0, clsx_1.default)("navds-stepper__item", {
+                    "navds-stepper__item--behind": activeStep > index,
+                    "navds-stepper__item--completed": react_1.default.isValidElement(step) &&
+                        ((_a = step === null || step === void 0 ? void 0 : step.props) === null || _a === void 0 ? void 0 : _a.completed),
+                    "navds-stepper__item--non-interactive": react_1.default.isValidElement(step) &&
+                        !((_c = (_b = step === null || step === void 0 ? void 0 : step.props) === null || _b === void 0 ? void 0 : _b.interactive) !== null && _c !== void 0 ? _c : interactive),
+                }), key: index + ((_e = (_d = children === null || children === void 0 ? void 0 : children.toString) === null || _d === void 0 ? void 0 : _d.call(children)) !== null && _e !== void 0 ? _e : "") },
                 react_1.default.createElement("span", { className: "navds-stepper__line navds-stepper__line--1" }),
                 react_1.default.isValidElement(step)
                     ? react_1.default.cloneElement(step, Object.assign(Object.assign({}, step.props), { unsafe_index: index }))

package/esm/chips/Removable.d.ts

@@ -1,5 +1,4 @@
 import React from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
 export interface RemovableChipsProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
     children: string;
     /**
@@ -17,5 +16,5 @@ export interface RemovableChipsProps extends React.ButtonHTMLAttributes<HTMLButt
      */
     onDelete?: () => void;
 }
-export declare const RemovableChips: OverridableComponent<RemovableChipsProps, HTMLButtonElement>;
+export declare const RemovableChips: React.ForwardRefExoticComponent<RemovableChipsProps & React.RefAttributes<HTMLButtonElement>>;
 export default RemovableChips;

package/esm/chips/Removable.js

@@ -13,8 +13,8 @@ import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
 export const RemovableChips = forwardRef((_a, ref) => {
-    var { className, children, variant = "action", as: Component = "button", removeLabel = "slett", onDelete } = _a, rest = __rest(_a, ["className", "children", "variant", "as", "removeLabel", "onDelete"]);
-    return (React.createElement(Component, Object.assign({}, rest, { ref: ref, className: cl("navds-chips__chip navds-chips__removable navds-chips--icon-right", className, `navds-chips__removable--${variant}`), "aria-label": `${children} ${removeLabel}`, onClick: (e) => {
+    var { className, children, variant = "action", removeLabel = "slett", onDelete, type = "button" } = _a, rest = __rest(_a, ["className", "children", "variant", "removeLabel", "onDelete", "type"]);
+    return (React.createElement("button", Object.assign({}, rest, { ref: ref, type: type, className: cl("navds-chips__chip navds-chips__removable navds-chips--icon-right", className, `navds-chips__removable--${variant}`), "aria-label": `${children} ${removeLabel}`, onClick: (e) => {
             var _a;
             onDelete === null || onDelete === void 0 ? void 0 : onDelete();
             (_a = rest === null || rest === void 0 ? void 0 : rest.onClick) === null || _a === void 0 ? void 0 : _a.call(rest, e);

package/esm/chips/Removable.js.map

@@ -1 +1 @@
-{"version":3,"file":"Removable.js","sourceRoot":"","sources":["../../src/chips/Removable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAsB1C,MAAM,CAAC,MAAM,cAAc,GAGvB,UAAU,CACZ,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,EAAE,EAAE,SAAS,GAAG,QAAQ,EACxB,WAAW,GAAG,OAAO,EACrB,QAAQ,OAET,EADI,IAAI,cAPT,qEAQC,CADQ;IAIT,OAAO,CACL,oBAAC,SAAS,oBACJ,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,kEAAkE,EAClE,SAAS,EACT,2BAA2B,OAAO,EAAE,CACrC,gBACW,GAAG,QAAQ,IAAI,WAAW,EAAE,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;YACb,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;YACb,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,CAAC,CAAC,CAAC;QACrB,CAAC;QAED,8BAAM,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAQ;QAC1D,8BAAM,SAAS,EAAC,6BAA6B;YAC3C,oBAAC,SAAS,0BAAe,CACpB,CACG,CACb,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC"}
+{"version":3,"file":"Removable.js","sourceRoot":"","sources":["../../src/chips/Removable.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,qBAAqB,CAAC;AAChD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAqB1C,MAAM,CAAC,MAAM,cAAc,GAAG,UAAU,CAItC,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,SAAS,EACT,QAAQ,EACR,OAAO,GAAG,QAAQ,EAClB,WAAW,GAAG,OAAO,EACrB,QAAQ,EACR,IAAI,GAAG,QAAQ,OAEhB,EADI,IAAI,cAPT,uEAQC,CADQ;IAIT,OAAO,CACL,gDACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,IAAI,EAAE,IAAI,EACV,SAAS,EAAE,EAAE,CACX,kEAAkE,EAClE,SAAS,EACT,2BAA2B,OAAO,EAAE,CACrC,gBACW,GAAG,QAAQ,IAAI,WAAW,EAAE,EACxC,OAAO,EAAE,CAAC,CAAC,EAAE,EAAE;;YACb,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,EAAI,CAAC;YACb,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,OAAO,qDAAG,CAAC,CAAC,CAAC;QACrB,CAAC;QAED,8BAAM,SAAS,EAAC,wBAAwB,IAAE,QAAQ,CAAQ;QAC1D,8BAAM,SAAS,EAAC,6BAA6B;YAC3C,oBAAC,SAAS,0BAAe,CACpB,CACA,CACV,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,eAAe,cAAc,CAAC"}

package/esm/loader/Loader.d.ts

@@ -2,7 +2,7 @@ import React, { SVGProps } from "react";
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
     /**
      * Changes Loader width/height
-     * 64px | 40px | 32px | 24px | 20px | 16px
+     * 88px | 64px | 40px | 32px | 24px | 20px | 16px
      * @default "medium"
      */
     size?: "3xlarge" | "2xlarge" | "xlarge" | "large" | "medium" | "small" | "xsmall";

package/esm/stepper/Stepper.js

@@ -48,8 +48,14 @@ export const Stepper = forwardRef((_a, ref) => {
                 orientation,
                 interactive,
             } }, React.Children.map(children, (step, index) => {
-            var _a, _b;
-            return (React.createElement("li", { className: cl("navds-stepper__item"), key: index + ((_b = (_a = children === null || children === void 0 ? void 0 : children.toString) === null || _a === void 0 ? void 0 : _a.call(children)) !== null && _b !== void 0 ? _b : "") },
+            var _a, _b, _c, _d, _e;
+            return (React.createElement("li", { className: cl("navds-stepper__item", {
+                    "navds-stepper__item--behind": activeStep > index,
+                    "navds-stepper__item--completed": React.isValidElement(step) &&
+                        ((_a = step === null || step === void 0 ? void 0 : step.props) === null || _a === void 0 ? void 0 : _a.completed),
+                    "navds-stepper__item--non-interactive": React.isValidElement(step) &&
+                        !((_c = (_b = step === null || step === void 0 ? void 0 : step.props) === null || _b === void 0 ? void 0 : _b.interactive) !== null && _c !== void 0 ? _c : interactive),
+                }), key: index + ((_e = (_d = children === null || children === void 0 ? void 0 : children.toString) === null || _d === void 0 ? void 0 : _d.call(children)) !== null && _e !== void 0 ? _e : "") },
                 React.createElement("span", { className: "navds-stepper__line navds-stepper__line--1" }),
                 React.isValidElement(step)
                     ? React.cloneElement(step, Object.assign(Object.assign({}, step.props), { unsafe_index: index }))

package/esm/stepper/Stepper.js.map

@@ -1 +1 @@
-{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,IAA0B,MAAM,QAAQ,CAAC;AAiDhD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAqB,UAAU,CAIjD,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,GAAG,UAAU,EACxB,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,WAAW,GAAG,IAAI,OAEnB,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,UAAU,GAAG,UAAU,GAAG,CAAC,CAAC;IAC5B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,eAAe,EACf,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAC/D,SAAS,CACV;QAED,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;gBACL,UAAU;gBACV,YAAY;gBACZ,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;gBACzC,WAAW;gBACX,WAAW;aACZ,IAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC5C,OAAO,CACL,4BACE,SAAS,EAAE,EAAE,CAAC,qBAAqB,CAAC,EACpC,GAAG,EAAE,KAAK,GAAG,CAAC,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,wDAAI,mCAAI,EAAE,CAAC;gBAE3C,8BAAM,SAAS,EAAC,4CAA4C,GAAG;gBAC9D,KAAK,CAAC,cAAc,CAAmB,IAAI,CAAC;oBAC3C,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,kCAClB,IAAI,CAAC,KAAK,KACb,YAAY,EAAE,KAAK,IACnB;oBACJ,CAAC,CAAC,IAAI;gBACR,8BAAM,SAAS,EAAC,4CAA4C,GAAG,CAC5D,CACN,CAAC;QACJ,CAAC,CAAC,CACsB,CACvB,CACN,CAAC;AACJ,CAAC,CACkB,CAAC;AAEtB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;AAEpB,eAAe,OAAO,CAAC"}
+{"version":3,"file":"Stepper.js","sourceRoot":"","sources":["../../src/stepper/Stepper.tsx"],"names":[],"mappings":";;;;;;;;;;;AAAA,OAAO,KAAK,EAAE,EAAE,aAAa,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AACzD,OAAO,EAAE,MAAM,MAAM,CAAC;AACtB,OAAO,IAA0B,MAAM,QAAQ,CAAC;AAiDhD,MAAM,CAAC,MAAM,cAAc,GAAG,aAAa,CAA6B,IAAI,CAAC,CAAC;AAE9E;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,CAAC,MAAM,OAAO,GAAqB,UAAU,CAIjD,CACE,EAQC,EACD,GAAG,EACH,EAAE;QAVF,EACE,QAAQ,EACR,SAAS,EACT,UAAU,EACV,WAAW,GAAG,UAAU,EACxB,YAAY,GAAG,GAAG,EAAE,GAAE,CAAC,EACvB,WAAW,GAAG,IAAI,OAEnB,EADI,IAAI,cAPT,qFAQC,CADQ;IAIT,UAAU,GAAG,UAAU,GAAG,CAAC,CAAC;IAC5B,OAAO,CACL,4CACM,IAAI,IACR,GAAG,EAAE,GAAG,EACR,SAAS,EAAE,EAAE,CACX,eAAe,EACf,WAAW,KAAK,YAAY,CAAC,CAAC,CAAC,2BAA2B,CAAC,CAAC,CAAC,EAAE,EAC/D,SAAS,CACV;QAED,oBAAC,cAAc,CAAC,QAAQ,IACtB,KAAK,EAAE;gBACL,UAAU;gBACV,YAAY;gBACZ,SAAS,EAAE,KAAK,CAAC,QAAQ,CAAC,KAAK,CAAC,QAAQ,CAAC;gBACzC,WAAW;gBACX,WAAW;aACZ,IAEA,KAAK,CAAC,QAAQ,CAAC,GAAG,CAAC,QAAQ,EAAE,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;;YAC5C,OAAO,CACL,4BACE,SAAS,EAAE,EAAE,CAAC,qBAAqB,EAAE;oBACnC,6BAA6B,EAAE,UAAU,GAAG,KAAK;oBACjD,gCAAgC,EAC9B,KAAK,CAAC,cAAc,CAAmB,IAAI,CAAC;yBAC5C,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,SAAS,CAAA;oBACxB,sCAAsC,EACpC,KAAK,CAAC,cAAc,CAAmB,IAAI,CAAC;wBAC5C,CAAC,CAAC,MAAA,MAAA,IAAI,aAAJ,IAAI,uBAAJ,IAAI,CAAE,KAAK,0CAAE,WAAW,mCAAI,WAAW,CAAC;iBAC7C,CAAC,EACF,GAAG,EAAE,KAAK,GAAG,CAAC,MAAA,MAAA,QAAQ,aAAR,QAAQ,uBAAR,QAAQ,CAAE,QAAQ,wDAAI,mCAAI,EAAE,CAAC;gBAE3C,8BAAM,SAAS,EAAC,4CAA4C,GAAG;gBAC9D,KAAK,CAAC,cAAc,CAAmB,IAAI,CAAC;oBAC3C,CAAC,CAAC,KAAK,CAAC,YAAY,CAAC,IAAI,kCAClB,IAAI,CAAC,KAAK,KACb,YAAY,EAAE,KAAK,IACnB;oBACJ,CAAC,CAAC,IAAI;gBACR,8BAAM,SAAS,EAAC,4CAA4C,GAAG,CAC5D,CACN,CAAC;QACJ,CAAC,CAAC,CACsB,CACvB,CACN,CAAC;AACJ,CAAC,CACkB,CAAC;AAEtB,OAAO,CAAC,IAAI,GAAG,IAAI,CAAC;AAEpB,eAAe,OAAO,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@navikt/ds-react",
-  "version": "4.7.1",
+  "version": "4.7.3",
   "description": "Aksel react-components for NAV designsystem",
   "author": "Aksel | NAV designsystem team",
   "license": "MIT",
@@ -38,7 +38,7 @@
   },
   "dependencies": {
     "@floating-ui/react": "0.24.1",
-    "@navikt/aksel-icons": "^4.7.1",
+    "@navikt/aksel-icons": "^4.7.3",
     "@radix-ui/react-tabs": "1.0.0",
     "@radix-ui/react-toggle-group": "1.0.0",
     "clsx": "^1.2.1",

package/src/chips/Removable.tsx

@@ -1,7 +1,6 @@
 import { XMarkIcon } from "@navikt/aksel-icons";
 import cl from "clsx";
 import React, { forwardRef } from "react";
-import { OverridableComponent } from "../util/OverridableComponent";
 
 export interface RemovableChipsProps
   extends React.ButtonHTMLAttributes<HTMLButtonElement> {
@@ -22,26 +21,27 @@ export interface RemovableChipsProps
   onDelete?: () => void;
 }
 
-export const RemovableChips: OverridableComponent<
-  RemovableChipsProps,
-  HTMLButtonElement
-> = forwardRef(
+export const RemovableChips = forwardRef<
+  HTMLButtonElement,
+  RemovableChipsProps
+>(
   (
     {
       className,
       children,
       variant = "action",
-      as: Component = "button",
       removeLabel = "slett",
       onDelete,
+      type = "button",
       ...rest
     },
     ref
   ) => {
     return (
-      <Component
+      <button
         {...rest}
         ref={ref}
+        type={type}
         className={cl(
           "navds-chips__chip navds-chips__removable navds-chips--icon-right",
           className,
@@ -57,7 +57,7 @@ export const RemovableChips: OverridableComponent<
         <span className="navds-chips__removable-icon">
           <XMarkIcon aria-hidden />
         </span>
-      </Component>
+      </button>
     );
   }
 );

package/src/loader/Loader.tsx

@@ -5,7 +5,7 @@ import { useId } from "..";
 export interface LoaderProps extends SVGProps<SVGSVGElement> {
   /**
    * Changes Loader width/height
-   * 64px | 40px | 32px | 24px | 20px | 16px
+   * 88px | 64px | 40px | 32px | 24px | 20px | 16px
    * @default "medium"
    */
   size?:

package/src/stepper/Stepper.tsx

@@ -114,7 +114,15 @@ export const Stepper: StepperComponent = forwardRef<
           {React.Children.map(children, (step, index) => {
             return (
               <li
-                className={cl("navds-stepper__item")}
+                className={cl("navds-stepper__item", {
+                  "navds-stepper__item--behind": activeStep > index,
+                  "navds-stepper__item--completed":
+                    React.isValidElement<StepperStepProps>(step) &&
+                    step?.props?.completed,
+                  "navds-stepper__item--non-interactive":
+                    React.isValidElement<StepperStepProps>(step) &&
+                    !(step?.props?.interactive ?? interactive),
+                })}
                 key={index + (children?.toString?.() ?? "")}
               >
                 <span className="navds-stepper__line navds-stepper__line--1" />

package/src/stepper/stepper.stories.tsx

@@ -11,8 +11,8 @@ export default {
     orientation: {
       control: {
         type: "radio",
-        options: ["horizontal", "vertical"],
       },
+      options: ["horizontal", "vertical"],
     },
     activeStep: {
       control: {