@wallarm-org/design-system 1.33.0 → 2.0.0-rc-fix-stepper.1

package/dist/components/FilterDropdown/FilterDropdownTrigger.js

@@ -81,7 +81,8 @@ const FilterDropdownTrigger = ({ ref, className, children, onKeyDown, 'aria-labe
                     "aria-hidden": true,
                     className: "inline-flex shrink-0",
                     children: /*#__PURE__*/ jsx(NumericBadge, {
-                        type: "primary",
+                        type: "secondary",
+                        color: "neutral",
                         children: value.length
                     })
                 })

package/dist/components/NumericBadge/NumericBadge.d.ts

@@ -1,10 +1,13 @@
-import type { FC, HTMLAttributes } from 'react';
+import { type FC, type HTMLAttributes, type Ref } from 'react';
 import type { VariantProps } from 'class-variance-authority';
 import type { TestableProps } from '../../utils/testId';
 import { numericBadgeVariants } from './classes';
-type NumericBadgeNativeProps = HTMLAttributes<HTMLDivElement>;
-type NumericBadgeVariantsProps = Omit<VariantProps<typeof numericBadgeVariants>, 'clickable'>;
+type NumericBadgeNativeProps = Omit<HTMLAttributes<HTMLDivElement>, 'color'>;
+type NumericBadgeVariantsProps = Omit<VariantProps<typeof numericBadgeVariants>, 'clickable' | 'iconOnly'>;
 export type NumericBadgeProps = NumericBadgeNativeProps & NumericBadgeVariantsProps & TestableProps & {
+    ref?: Ref<HTMLDivElement>;
+    /** Applies the badge to its child element, such as a span or a native button. */
+    asChild?: boolean;
     'data-slot'?: string;
 };
 export declare const NumericBadge: FC<NumericBadgeProps>;

package/dist/components/NumericBadge/NumericBadge.figma.js

@@ -5,17 +5,28 @@ const figmaNodeUrl = 'https://www.figma.com/design/VKb5gW46uSGw0rqrhZsbXT/wip-co
 code_connect.connect(NumericBadge, figmaNodeUrl, {
     props: {
         type: code_connect["enum"]('Type', {
-            Primary: 'primary',
-            'Primary-alt': 'primary-alt',
+            Solid: 'solid',
+            Secondary: 'secondary',
+            Outline: 'outline'
+        }),
+        color: code_connect["enum"]('Color', {
+            Neutral: 'neutral',
+            'Neutral-alt': 'neutral-alt',
             Brand: 'brand',
-            Destructive: 'destructive',
-            Outline: 'outline',
-            'New / Info': 'info'
+            Danger: 'danger',
+            Info: 'info',
+            Success: 'success'
+        }),
+        size: code_connect["enum"]('Size', {
+            Medium: 'default',
+            Small: 'small'
         }),
         children: code_connect.string('#')
     },
-    example: ({ type, children })=>/*#__PURE__*/ jsx(NumericBadge, {
+    example: ({ type, color, size, children })=>/*#__PURE__*/ jsx(NumericBadge, {
             type: type,
+            color: color,
+            size: size,
             children: children
         })
 });

package/dist/components/NumericBadge/NumericBadge.js

@@ -1,19 +1,63 @@
 import { jsx } from "react/jsx-runtime";
+import { isValidElement, useRef } from "react";
+import { Slot } from "@radix-ui/react-slot";
 import { cn } from "../../utils/cn.js";
+import { isIconOnly } from "../../utils/isIconOnly.js";
 import { numericBadgeVariants } from "./classes.js";
-const NumericBadge = ({ type = 'primary', size = 'default', onClick, 'data-slot': dataSlot, ...props })=>{
-    const isClickable = !!onClick;
-    return /*#__PURE__*/ jsx("div", {
+const hasNativeKeyboardActivation = (element)=>'BUTTON' === element.tagName || 'INPUT' === element.tagName || 'A' === element.tagName && element.hasAttribute('href');
+const NumericBadge = ({ type = 'secondary', color = 'solid' === type ? 'brand' : 'neutral', size = 'default', asChild = false, children, className, ref, role, tabIndex, onClick, onKeyDown, onKeyUp, onBlur, 'data-slot': dataSlot, ...props })=>{
+    const child = asChild && /*#__PURE__*/ isValidElement(children) ? children : null;
+    const childProps = child?.props;
+    const nativeChild = child?.type === 'button' || child?.type === 'input' || child?.type === 'a' && childProps?.href != null;
+    const isClickable = !childProps?.disabled && !!(onClick || childProps?.onClick || nativeChild);
+    const spacePressed = useRef(false);
+    const Comp = asChild ? Slot : 'div';
+    const handleKeyDown = (event)=>{
+        onKeyDown?.(event);
+        if (event.defaultPrevented || !isClickable || event.target !== event.currentTarget || hasNativeKeyboardActivation(event.currentTarget)) return;
+        if ('Enter' === event.key) {
+            event.preventDefault();
+            event.currentTarget.click();
+        } else if (' ' === event.key) {
+            event.preventDefault();
+            spacePressed.current = true;
+        }
+    };
+    const handleKeyUp = (event)=>{
+        onKeyUp?.(event);
+        if (' ' !== event.key) return;
+        const activate = spacePressed.current;
+        spacePressed.current = false;
+        if (activate && !event.defaultPrevented && isClickable && event.target === event.currentTarget && !hasNativeKeyboardActivation(event.currentTarget)) {
+            event.preventDefault();
+            event.currentTarget.click();
+        }
+    };
+    return /*#__PURE__*/ jsx(Comp, {
         ...props,
-        tabIndex: isClickable ? 0 : void 0,
+        ref: ref,
+        role: role ?? (isClickable && !nativeChild ? 'button' : void 0),
+        tabIndex: tabIndex ?? (isClickable && !nativeChild ? 0 : void 0),
         "data-slot": dataSlot ?? 'numeric-badge',
         "data-type": type,
-        onClick: onClick,
+        "data-color": color,
+        onClick: onClick ? (event)=>{
+            if (!event.defaultPrevented) onClick(event);
+        } : void 0,
+        onKeyDown: handleKeyDown,
+        onKeyUp: handleKeyUp,
+        onBlur: (event)=>{
+            spacePressed.current = false;
+            onBlur?.(event);
+        },
         className: cn(numericBadgeVariants({
             type,
+            color,
             size,
-            clickable: isClickable
-        }))
+            clickable: isClickable,
+            iconOnly: isIconOnly(child ? child.props.children : children)
+        }), className),
+        children: children
     });
 };
 NumericBadge.displayName = 'NumericBadge';

package/dist/components/NumericBadge/classes.d.ts

@@ -1,5 +1,7 @@
 export declare const numericBadgeVariants: (props?: ({
-    type?: "brand" | "destructive" | "info" | "outline" | "primary" | "primary-alt" | null | undefined;
+    type?: "outline" | "secondary" | "solid" | null | undefined;
+    color?: "brand" | "danger" | "info" | "neutral" | "neutral-alt" | "success" | null | undefined;
     size?: "default" | "small" | null | undefined;
+    iconOnly?: boolean | null | undefined;
     clickable?: boolean | null | undefined;
 } & import("class-variance-authority/types").ClassProp) | undefined) => string;

package/dist/components/NumericBadge/classes.js

@@ -1,24 +1,92 @@
 import { cva } from "class-variance-authority";
-const numericBadgeVariants = cva('inline-flex items-center rounded-full font-mono font-medium transition-colors w-max', {
+const numericBadgeVariants = cva('inline-flex w-max shrink-0 items-center justify-center whitespace-nowrap rounded-full font-mono font-medium transition-colors', {
     variants: {
         type: {
-            primary: 'bg-states-primary-active text-text-primary',
-            'primary-alt': 'bg-states-primary-alt-active text-text-primary-alt',
-            brand: 'bg-bg-fill-brand text-text-primary-alt',
-            destructive: 'bg-bg-fill-danger text-text-primary-alt',
-            outline: 'border-1 border-border-primary bg-component-outline-button-bg text-text-primary',
-            info: 'bg-states-info-active text-text-info'
+            solid: '',
+            secondary: '',
+            outline: 'border-1'
+        },
+        color: {
+            neutral: '',
+            'neutral-alt': '',
+            brand: '',
+            danger: '',
+            success: '',
+            info: ''
         },
         size: {
-            default: 'px-5 py-2 text-xs',
-            small: 'p-3 text-2xs'
+            default: 'h-20 min-w-16 px-5 py-2 text-xs [&_svg]:icon-md',
+            small: 'h-16 min-w-12 px-3 py-2 text-2xs [&_svg]:icon-sm'
+        },
+        iconOnly: {
+            true: ''
         },
         clickable: {
-            true: 'cursor-pointer overlay active:outline-none active:ring-3',
+            true: 'cursor-pointer overlay active:outline-none active:ring-3 focus-visible:outline-none focus-visible:ring-3',
             false: ''
         }
     },
     compoundVariants: [
+        {
+            type: 'solid',
+            color: 'brand',
+            className: 'bg-bg-fill-brand text-text-primary-alt'
+        },
+        {
+            type: 'solid',
+            color: 'danger',
+            className: 'bg-bg-fill-danger text-text-primary-alt'
+        },
+        {
+            type: 'secondary',
+            color: 'neutral',
+            className: 'bg-states-primary-active text-text-primary'
+        },
+        {
+            type: 'secondary',
+            color: 'neutral-alt',
+            className: 'bg-states-primary-alt-active text-text-primary-alt'
+        },
+        {
+            type: 'secondary',
+            color: 'brand',
+            className: 'bg-states-brand-active text-text-brand'
+        },
+        {
+            type: 'secondary',
+            color: 'danger',
+            className: 'bg-states-danger-active text-text-danger'
+        },
+        {
+            type: 'secondary',
+            color: 'success',
+            className: 'bg-states-success-active text-text-success'
+        },
+        {
+            type: 'secondary',
+            color: 'info',
+            className: 'bg-states-info-active text-text-info'
+        },
+        {
+            type: 'outline',
+            color: 'neutral',
+            className: 'border-border-primary bg-component-outline-button-bg text-text-primary'
+        },
+        {
+            type: 'outline',
+            color: 'brand',
+            className: 'border-border-brand bg-bg-brand text-text-brand'
+        },
+        {
+            type: 'outline',
+            color: 'danger',
+            className: 'border-border-danger bg-bg-danger text-text-danger'
+        },
+        {
+            type: 'outline',
+            color: 'success',
+            className: 'border-border-success bg-bg-success text-text-success'
+        },
         {
             type: 'outline',
             size: 'default',
@@ -27,37 +95,84 @@ const numericBadgeVariants = cva('inline-flex items-center rounded-full font-mon
         {
             type: 'outline',
             size: 'small',
-            className: 'p-2'
+            className: 'px-2 py-1'
+        },
+        {
+            iconOnly: true,
+            className: 'px-2 py-2'
+        },
+        {
+            type: 'outline',
+            iconOnly: true,
+            className: 'px-1 py-1'
         },
         {
             clickable: true,
-            type: 'primary',
-            className: 'hover:overlay-states-primary-hover active:overlay-states-primary-hover active:ring-focus-primary'
+            type: [
+                'secondary',
+                'outline'
+            ],
+            color: 'neutral',
+            className: 'hover:overlay-states-primary-hover active:overlay-states-primary-hover'
         },
         {
             clickable: true,
-            type: 'primary-alt',
-            className: 'hover:overlay-states-primary-alt-hover active:overlay-states-primary-alt-hover active:ring-focus-primary'
+            type: 'secondary',
+            color: 'neutral-alt',
+            className: 'hover:overlay-states-primary-alt-hover active:overlay-states-primary-alt-hover'
         },
         {
             clickable: true,
-            type: 'brand',
-            className: 'hover:overlay-states-on-fill-hover active:overlay-states-on-fill-hover active:ring-focus-brand'
+            type: 'solid',
+            color: 'brand',
+            className: 'hover:overlay-states-on-fill-hover active:overlay-states-on-fill-hover active:ring-focus-brand focus-visible:ring-focus-brand'
         },
         {
             clickable: true,
-            type: 'destructive',
-            className: 'hover:overlay-states-on-fill-hover active:overlay-states-on-fill-hover active:ring-focus-destructive'
+            type: 'solid',
+            color: 'danger',
+            className: 'hover:overlay-states-on-fill-hover active:overlay-states-on-fill-hover active:ring-focus-destructive focus-visible:ring-focus-destructive'
         },
         {
             clickable: true,
-            type: 'outline',
-            className: 'hover:overlay-states-primary-hover active:overlay-states-primary-hover active:ring-focus-primary'
+            type: [
+                'secondary',
+                'outline'
+            ],
+            color: 'brand',
+            className: 'hover:overlay-states-brand-hover active:overlay-states-brand-hover'
+        },
+        {
+            clickable: true,
+            type: [
+                'secondary',
+                'outline'
+            ],
+            color: 'danger',
+            className: 'hover:overlay-states-danger-hover active:overlay-states-danger-hover'
+        },
+        {
+            clickable: true,
+            type: [
+                'secondary',
+                'outline'
+            ],
+            color: 'success',
+            className: 'hover:overlay-states-success-hover active:overlay-states-success-hover'
+        },
+        {
+            clickable: true,
+            type: 'secondary',
+            color: 'info',
+            className: 'hover:overlay-states-info-hover active:overlay-states-info-hover'
         },
         {
             clickable: true,
-            type: 'info',
-            className: 'hover:overlay-states-info-hover active:overlay-states-info-hover active:ring-focus-primary'
+            type: [
+                'secondary',
+                'outline'
+            ],
+            className: 'active:ring-focus-primary focus-visible:ring-focus-primary'
         }
     ]
 });

package/dist/components/Stepper/StepperIndicator.js

@@ -3,6 +3,7 @@ import { Steps } from "@ark-ui/react/steps";
 import { Check } from "../../icons/index.js";
 import { cn } from "../../utils/cn.js";
 import { useTestId } from "../../utils/testId.js";
+import { NumericBadge } from "../NumericBadge/index.js";
 import { stepperIndicatorVariants } from "./classes.js";
 import { useStepperItemContext } from "./StepperContext.js";
 const renderDefault = (status, index)=>{
@@ -17,16 +18,21 @@ const StepperIndicator = ({ children, className, ref, 'data-testid': testIdProp,
     const testId = useTestId('indicator', testIdProp);
     return /*#__PURE__*/ jsx(Steps.Indicator, {
         asChild: true,
-        children: /*#__PURE__*/ jsx("span", {
-            ...rest,
-            ref: ref,
+        children: /*#__PURE__*/ jsx(NumericBadge, {
+            asChild: true,
+            type: 'upcoming' === status ? 'outline' : 'secondary',
+            color: 'active' === status ? 'brand' : 'danger' === status ? 'danger' : 'neutral',
             "data-slot": "stepper-indicator",
-            "data-status": status,
-            "data-testid": testId,
             className: cn(stepperIndicatorVariants({
                 status
             }), className),
-            children: children ?? renderDefault(status, index)
+            children: /*#__PURE__*/ jsx("span", {
+                ...rest,
+                ref: ref,
+                "data-status": status,
+                "data-testid": testId,
+                children: children ?? renderDefault(status, index)
+            })
         })
     });
 };

package/dist/components/Stepper/StepperList.d.ts

@@ -6,7 +6,7 @@ export interface StepperListProps extends OlHTMLAttributes<HTMLOListElement>, Te
     ref?: Ref<HTMLOListElement>;
 }
 /**
- * The step bar: an `<ol>` with the Figma bottom border and padding. Name it with `aria-label` or
- * `aria-labelledby`.
+ * The step bar: an `<ol>` with 24px side insets and 12px bottom padding, as in Figma.
+ * Name it with `aria-label` or `aria-labelledby`.
  */
 export declare const StepperList: FC<StepperListProps>;

package/dist/components/Stepper/classes.js

@@ -1,16 +1,16 @@
 import { cva } from "class-variance-authority";
 import { cn } from "../../utils/cn.js";
 const stepperVariants = cva('min-w-0');
-const stepperListVariants = cva('m-0 flex min-w-0 list-none items-start border-b-1 border-border-primary-light px-24 py-8');
+const stepperListVariants = cva('m-0 flex min-w-0 list-none items-start px-24 pb-12');
 const stepperItemVariants = cva('flex min-w-0 items-start');
 const stepperTriggerVariants = cva(cn('grid min-w-0 cursor-pointer grid-cols-[auto_minmax(0,1fr)] grid-rows-[20px] items-start gap-x-4 bg-transparent p-0 text-left', 'rounded-6 focus-visible:outline-none focus-visible:ring-3 focus-visible:ring-focus-primary'));
-const stepperIndicatorVariants = cva("col-start-1 row-span-2 row-start-1 inline-flex h-20 min-w-16 shrink-0 items-center justify-center rounded-full font-mono font-medium text-xs [font-feature-settings:'liga'_0]", {
+const stepperIndicatorVariants = cva("col-start-1 row-span-2 row-start-1 min-w-16 [font-feature-settings:'liga'_0] [&_svg]:icon-sm", {
     variants: {
         status: {
-            active: 'bg-states-brand-active px-4 py-2 text-text-brand',
-            danger: 'bg-states-danger-active px-4 py-2 text-text-danger',
-            completed: 'bg-states-primary-active px-2 py-2 text-icon-primary',
-            upcoming: 'border-1 border-border-primary bg-component-outline-button-bg px-3 py-1 text-text-primary'
+            active: 'px-4 py-2',
+            danger: 'px-4 py-2',
+            completed: 'px-2 py-2 text-icon-primary',
+            upcoming: 'px-3 py-1'
         }
     },
     defaultVariants: {

package/dist/metadata/components.json

@@ -1,6 +1,6 @@
 {
-  "version": "1.32.0",
-  "generatedAt": "2026-10-02T12:06:48.075Z",
+  "version": "1.33.0",
+  "generatedAt": "2026-10-02T12:33:35.613Z",
   "components": [
     {
       "name": "Accordion",
@@ -56848,11 +56848,6 @@
           "type": "string | undefined",
           "required": false
         },
-        {
-          "name": "color",
-          "type": "string | undefined",
-          "required": false
-        },
         {
           "name": "itemProp",
           "type": "string | undefined",
@@ -56938,28 +56933,49 @@
           "required": false,
           "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
         },
+        {
+          "name": "color",
+          "type": "{ neutral: string; 'neutral-alt': string; brand: string; danger: string; success: string; info: string; }",
+          "required": false,
+          "defaultValue": "type === 'solid' ? 'brand' : 'neutral"
+        },
         {
           "name": "type",
-          "type": "{ primary: string; 'primary-alt': string; brand: string; destructive: string; outline: string; info: string; }",
+          "type": "{ solid: string; secondary: string; outline: string; }",
           "required": false,
-          "defaultValue": "primary"
+          "defaultValue": "secondary"
         },
         {
           "name": "size",
           "type": "{ default: string; small: string; }",
           "required": false,
           "defaultValue": "default"
+        },
+        {
+          "name": "asChild",
+          "type": "boolean | undefined",
+          "required": false,
+          "description": "Applies the badge to its child element, such as a span or a native button.",
+          "defaultValue": "false"
         }
       ],
       "variants": [
         {
           "name": "type",
           "options": [
-            "primary",
-            "primary-alt",
+            "solid",
+            "secondary",
+            "outline"
+          ]
+        },
+        {
+          "name": "color",
+          "options": [
+            "neutral",
+            "neutral-alt",
             "brand",
-            "destructive",
-            "outline",
+            "danger",
+            "success",
             "info"
           ]
         },
@@ -56970,6 +56986,12 @@
             "small"
           ]
         },
+        {
+          "name": "iconOnly",
+          "options": [
+            "true"
+          ]
+        },
         {
           "name": "clickable",
           "options": [
@@ -56982,7 +57004,7 @@
       "examples": [
         {
           "name": "Basic",
-          "code": "() => <NumericBadge>1</NumericBadge>",
+          "code": "args => <NumericBadge {...args}>1</NumericBadge>",
           "description": "The default count. Keep it to what the reader can take in at a glance; a four-digit count is\na number they need to read, not see."
         },
         {
@@ -56992,8 +57014,18 @@
         },
         {
           "name": "Types",
-          "code": "() => (\n  // One row per type, so the label always sits beside the badges it names.\n  <VStack gap={8} align='start'>\n    {(['primary', 'brand', 'destructive', 'outline', 'info'] as const).map(type => (\n      <HStack key={type} gap={12} align='center'>\n        <span className='sb-annotation w-144 text-right'>{type}</span>\n        <NumericBadge type={type} size='default'>\n          1\n        </NumericBadge>\n        <NumericBadge type={type} size='small'>\n          1\n        </NumericBadge>\n      </HStack>\n    ))}\n\n    <HStack gap={12} align='center'>\n      <span className='sb-annotation w-144 text-right'>primary-alt</span>\n      <div className='inline-flex items-center gap-12 bg-component-tooltip-bg p-8'>\n        <NumericBadge type='primary-alt' size='default'>\n          1\n        </NumericBadge>\n        <NumericBadge type='primary-alt' size='small'>\n          1\n        </NumericBadge>\n      </div>\n    </HStack>\n  </VStack>\n)",
-          "description": "The palette, including `destructive` and `brand`. Reach for a plain type unless the count\nitself is the thing demanding attention."
+          "code": "() => (\n  // One row per type, so the label always sits beside the badges it names.\n  <VStack gap={8} align='start'>\n    {combinations.map(({ type, color }) => (\n      <HStack key={`${type}-${color}`} gap={12} align='center'>\n        <span className='sb-annotation w-256 whitespace-nowrap text-right'>\n          {type} / {color}\n        </span>\n        <div\n          className={`inline-flex items-center gap-12 p-8 ${color === 'neutral-alt' ? 'bg-component-tooltip-bg' : ''}`}\n        >\n          <NumericBadge type={type} color={color} size='default'>\n            1\n          </NumericBadge>\n          <NumericBadge type={type} color={color} size='small'>\n            1\n          </NumericBadge>\n        </div>\n      </HStack>\n    ))}\n  </VStack>\n)",
+          "description": "Every supported Type × Color combination, in Medium and Small."
+        },
+        {
+          "name": "Content",
+          "code": "() => (\n  <VStack gap={16} align='start'>\n    {(['default', 'small'] as const).map(size => (\n      <HStack key={size} gap={12} align='center'>\n        <span className='sb-annotation w-96 text-right'>{size}</span>\n        <NumericBadge size={size}>1</NumericBadge>\n        <NumericBadge size={size}>99</NumericBadge>\n        <NumericBadge size={size} color='danger' aria-label='Needs attention'>\n          !\n        </NumericBadge>\n        <NumericBadge size={size} color='info' aria-label='Unknown'>\n          ?\n        </NumericBadge>\n        <NumericBadge size={size} color='success' aria-label='Completed'>\n          <Check />\n        </NumericBadge>\n      </HStack>\n    ))}\n  </VStack>\n)",
+          "description": "Numbers, short glyphs, and icons share the same badge heights."
+        },
+        {
+          "name": "Clickable",
+          "code": "() => {\n  const [activations, setActivations] = useState(0);\n\n  return (\n    <VStack gap={12} align='start'>\n      {combinations.map(({ type, color }) => (\n        <HStack key={`${type}-${color}`} gap={12} align='center'>\n          <span className='sb-annotation w-256 whitespace-nowrap text-right'>\n            {type} / {color}\n          </span>\n          <div className={color === 'neutral-alt' ? 'bg-component-tooltip-bg p-8' : 'p-8'}>\n            <NumericBadge\n              asChild\n              type={type}\n              color={color}\n              onClick={() => setActivations(count => count + 1)}\n            >\n              <button type='button' aria-label={`${type} ${color}`}>\n                1\n              </button>\n            </NumericBadge>\n          </div>\n        </HStack>\n      ))}\n      <output aria-label='Activations'>{activations}</output>\n    </VStack>\n  );\n}",
+          "description": "Use a native button for an action; Tab, Enter, and Space work as expected."
         }
       ]
     },
@@ -95981,7 +96013,7 @@
         {
           "name": "InDrawer",
           "code": "() => {\n  const { step, statuses, goTo } = usePolicyFlow();\n  const { nextRef, submitRef, onBackClick, onNextClick } = useFooterFocus(step);\n  const [submitted, setSubmitted] = useState(0);\n  const last = step === POLICY_STEPS.length - 1;\n  const onSubmit = (event: FormEvent) => {\n    event.preventDefault();\n    setSubmitted(n => n + 1);\n  };\n  return (\n    <Drawer data-testid='drawer' width={640}>\n      <DrawerTrigger asChild>\n        <Button variant='outline' color='neutral' data-testid='drawer-open'>\n          Create policy\n        </Button>\n      </DrawerTrigger>\n      <DrawerContent>\n        <DrawerHeader>\n          <DrawerTitle>Create policy</DrawerTitle>\n        </DrawerHeader>\n        <form onSubmit={onSubmit} className='flex min-h-0 flex-1 flex-col'>\n          <Stepper\n            data-testid='stepper'\n            count={POLICY_STEPS.length}\n            step={step}\n            onStepChange={details => goTo(details.step)}\n            className='flex min-h-0 flex-1 flex-col'\n          >\n            <StepperList aria-label='Create policy steps'>\n              {POLICY_STEPS.map((title, i) => (\n                <StepperItem key={title} index={i} status={statuses[i]}>\n                  <StepperTrigger>\n                    <StepperIndicator />\n                    <StepperTitle>{title}</StepperTitle>\n                  </StepperTrigger>\n                  <StepperSeparator />\n                </StepperItem>\n              ))}\n            </StepperList>\n            <DrawerBody>\n              {POLICY_STEPS.map((title, i) => (\n                <StepperContent key={title} index={i} className='py-16'>\n                  <BodyPlaceholder label={`${title} fields`} />\n                </StepperContent>\n              ))}\n              <span className='sb-annotation' data-testid='stepper-submitted'>\n                Submitted: {submitted}\n              </span>\n            </DrawerBody>\n            <DrawerFooter>\n              {step > 0 && (\n                <DrawerFooterControls placement='left'>\n                  <StepperPrevTrigger asChild onClick={onBackClick}>\n                    <Button variant='outline' color='neutral' size='large'>\n                      Back\n                    </Button>\n                  </StepperPrevTrigger>\n                </DrawerFooterControls>\n              )}\n              <DrawerFooterControls placement='right'>\n                {last ? (\n                  <Button\n                    ref={submitRef}\n                    type='submit'\n                    variant='primary'\n                    color='brand'\n                    size='large'\n                  >\n                    Create policy\n                  </Button>\n                ) : (\n                  <StepperNextTrigger asChild onClick={onNextClick}>\n                    <Button ref={nextRef} variant='primary' color='brand' size='large'>\n                      Next: {POLICY_STEPS[step + 1]}\n                    </Button>\n                  </StepperNextTrigger>\n                )}\n              </DrawerFooterControls>\n            </DrawerFooter>\n          </Stepper>\n        </form>\n      </DrawerContent>\n    </Drawer>\n  );\n}",
-          "description": "Inside a create drawer: the step list sits under the header, `StepperContent` shows the current\nstep's body (every body stays mounted, so fields keep their values) and the footer moves with\nBack / Next. Steps never submit the form; only the last step's own submit button does. Focus\nstays on the footer when Back or Next unmounts. Drawer parts inside the `Stepper` root take its\ntest ids (`stepper--body`, `stepper--footer`), not the Drawer's."
+          "description": "Inside a create drawer: the step list sits under the header, `StepperContent` shows the current\nstep's body (every body stays mounted, so fields keep their values) and the footer moves with\nBack / Next. Steps never submit the form; only the last step's own submit button does. Focus\nstays on the footer when Back or Next unmounts. The list sits directly below the header,\nwith 24px side insets, 12px bottom padding and no divider. Drawer parts inside the `Stepper`\nroot take its test ids (`stepper--body`, `stepper--footer`), not the Drawer's."
         },
         {
           "name": "LongLabel",
@@ -106837,7 +106869,7 @@
           "props": [
             {
               "name": "color",
-              "type": "string | undefined",
+              "type": "{ neutral: string; 'neutral-alt': string; brand: string; danger: string; success: string; info: string; }",
               "required": false
             },
             {
@@ -107104,6 +107136,12 @@
               "type": "string | undefined",
               "required": false,
               "description": "@see {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/part}"
+            },
+            {
+              "name": "asChild",
+              "type": "boolean | undefined",
+              "required": false,
+              "description": "Applies the badge to its child element, such as a span or a native button."
             }
           ]
         },

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@wallarm-org/design-system",
-  "version": "1.33.0",
+  "version": "2.0.0-rc-fix-stepper.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",