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

package/dist/components/CodeEditor/CodeEditorRoot.d.ts

@@ -23,7 +23,7 @@ export interface CodeEditorRootProps extends CodeEditorRootNativeProps, Testable
      * document would be seeded with the previous document's text.
      */
     documentId?: string;
-    /** Focusable, selectable, searchable, copyable — but not editable by the user */
+    /** Non-editable and unfocusable content; text remains selectable, searchable and copyable */
     readOnly?: boolean;
     /** Offsets gutter numbers; `lines`, `folds`, `diagnostics` use absolute numbers */
     startingLineNumber?: number;

package/dist/components/CodeEditor/engine/SearchPanel.js

@@ -41,9 +41,20 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
             ]
         });
     };
+    const blurReadOnlyContent = ()=>{
+        if (view.state.readOnly && view.hasFocus) view.contentDOM.blur();
+    };
+    const closeSearch = ()=>{
+        closeSearchPanel(view);
+        blurReadOnlyContent();
+    };
     const handleKeyDown = (event, onEnter)=>{
         if (event.nativeEvent.isComposing || 229 === event.keyCode) return;
-        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) return void event.preventDefault();
+        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) {
+            event.preventDefault();
+            blurReadOnlyContent();
+            return;
+        }
         if ('Enter' === event.key) {
             event.preventDefault();
             onEnter(event.shiftKey);
@@ -53,7 +64,10 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
     const handleReplaceKeyDown = (event)=>handleKeyDown(event, ()=>replaceNext(view));
     const handlePanelKeyDown = (event)=>{
         if (event.target instanceof HTMLInputElement) return;
-        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) event.preventDefault();
+        if (runScopeHandlers(view, event.nativeEvent, 'search-panel')) {
+            event.preventDefault();
+            blurReadOnlyContent();
+        }
     };
     const canSearch = query.valid;
     return /*#__PURE__*/ jsxs("div", {
@@ -154,7 +168,7 @@ const SearchPanel = ({ view, query, matchCount, readOnly, testId })=>{
                         className: "ml-auto",
                         "aria-label": "Close search",
                         "data-testid": slot('search-close'),
-                        onClick: ()=>closeSearchPanel(view),
+                        onClick: closeSearch,
                         children: /*#__PURE__*/ jsx(X, {})
                     })
                 ]

package/dist/components/CodeEditor/engine/completion.d.ts

@@ -4,9 +4,9 @@ import type { CodeEditorCompletionContext, CodeEditorCompletionSource, CodeEdito
 /** Public, engine-free view of a CodeMirror completion request (spec §4). */
 export declare const buildCompletionContext: (ctx: CompletionContext, language: CodeEditorLanguage, startingLineNumber: number) => CodeEditorCompletionContext;
 /**
- * Autocomplete (spec §7.14): built-in HTTP source for `http`, the JSON Schema source when
- * `schema` is set, then consumer sources, all through `override` (language-data sources are
- * off). `completionKeymap` comes with `defaultKeymap: true` at `Prec.highest`, so Enter,
+ * Autocomplete: HTTP and JSON Schema sources, consumer sources, then language keywords and
+ * document words, all through `override` (language-data sources are off).
+ * `completionKeymap` comes with `defaultKeymap: true` at `Prec.highest`, so Enter,
  * arrows and Escape reach the open list before `indentWithTab` / fullscreen Escape.
  */
 export declare const completionExtension: (config: {

package/dist/components/CodeEditor/engine/completion.js

@@ -1,4 +1,4 @@
-import { autocompletion } from "@codemirror/autocomplete";
+import { autocompletion, completeAnyWord, completeFromList } from "@codemirror/autocomplete";
 import { EditorView } from "@codemirror/view";
 import { cn } from "../../../utils/cn.js";
 import { dropdownMenuItemVariants } from "../../DropdownMenu/classes.js";
@@ -106,13 +106,153 @@ const adaptSource = (source, language, startingLineNumber)=>(ctx)=>{
         }
     };
 const reopensAfter = (completion)=>'string' == typeof completion.apply && completion.apply.endsWith(': ');
+const LANGUAGE_KEYWORDS = {
+    json: [
+        'true',
+        'false',
+        'null'
+    ],
+    yaml: [
+        'true',
+        'false',
+        'null'
+    ],
+    bash: [
+        'echo',
+        'export',
+        'if',
+        'then',
+        'else',
+        'fi',
+        'for',
+        'in',
+        'do',
+        'done',
+        'function'
+    ],
+    javascript: [
+        'const',
+        'let',
+        'var',
+        'function',
+        'return',
+        'if',
+        'else',
+        'for',
+        'while',
+        'class',
+        'import',
+        'export',
+        'from',
+        'async',
+        'await',
+        'true',
+        'false',
+        'null',
+        'undefined'
+    ],
+    typescript: [
+        'const',
+        'let',
+        'function',
+        'return',
+        'if',
+        'else',
+        'class',
+        'import',
+        'export',
+        'from',
+        'async',
+        'await',
+        'interface',
+        'type',
+        'enum',
+        'extends',
+        'implements',
+        'public',
+        'private',
+        'readonly',
+        'true',
+        'false',
+        'null',
+        'undefined'
+    ],
+    python: [
+        'def',
+        'class',
+        'return',
+        'if',
+        'elif',
+        'else',
+        'for',
+        'while',
+        'in',
+        'import',
+        'from',
+        'as',
+        'async',
+        'await',
+        'try',
+        'except',
+        'with',
+        'True',
+        'False',
+        'None'
+    ],
+    lua: [
+        'function',
+        'local',
+        'return',
+        'if',
+        'then',
+        'elseif',
+        'else',
+        'end',
+        'for',
+        'while',
+        'do',
+        'repeat',
+        'until',
+        'true',
+        'false',
+        'nil'
+    ]
+};
+const isInsideQuotedString = (text)=>{
+    let quoted = false;
+    for(let i = 0; i < text.length; i++)if ('\\' === text[i]) i++;
+    else if ('"' === text[i]) quoted = !quoted;
+    return quoted;
+};
+const builtInSources = (language)=>{
+    const keywords = LANGUAGE_KEYWORDS[language];
+    if (!keywords) return [
+        completeAnyWord
+    ];
+    const completeKeywords = completeFromList(keywords.map((label)=>({
+            label,
+            type: 'keyword'
+        })));
+    if ('json' === language) return [
+        (ctx)=>{
+            const line = ctx.state.doc.lineAt(ctx.pos);
+            const before = line.text.slice(0, ctx.pos - line.from);
+            if (isInsideQuotedString(before)) return completeAnyWord(ctx);
+            return /(?:^|[:,\[])[\s\w]*$/.test(before) ? completeKeywords(ctx) : null;
+        }
+    ];
+    return [
+        completeKeywords,
+        completeAnyWord
+    ];
+};
 const completionExtension = (config)=>{
     const { language, schema, sources, startingLineNumber } = config;
     const override = [];
     if ('http' === language) override.push(adaptSource(httpCompletions, language, startingLineNumber));
     if (void 0 !== schema && isJsonLike(language)) override.push(schemaCompletionSource(()=>schema, (state)=>jsonRegion(state, language)));
     for (const source of sources)override.push(adaptSource(source, language, startingLineNumber));
-    if (0 === override.length) return [];
+    override.push(...builtInSources(language));
     return [
         autocompletion({
             override,

package/dist/components/CodeEditor/engine/index.js

@@ -79,7 +79,8 @@ const SLOT_DEPS = {
     ],
     contentAttributes: [
         'contentAttributes',
-        'testId'
+        'testId',
+        'readOnly'
     ],
     cspNonce: [
         'cspNonce'
@@ -184,6 +185,7 @@ const featureExtensions = (options, callbacks)=>({
     });
 const contentAttributesFor = (options)=>{
     const attrs = sanitizeContentAttributes(options.contentAttributes);
+    if (options.readOnly) delete attrs.tabindex;
     if (options.testId) attrs['data-testid'] = `${options.testId}--editor`;
     return attrs;
 };
@@ -225,7 +227,10 @@ const gutterAria = [
 ];
 const slotExtensions = (options, callbacks)=>({
         language: ()=>languageExtension(options.language),
-        readOnly: ()=>EditorState.readOnly.of(options.readOnly),
+        readOnly: ()=>[
+                EditorState.readOnly.of(options.readOnly),
+                EditorView.editable.of(!options.readOnly)
+            ],
         wrap: ()=>options.wrapLines ? EditorView.lineWrapping : [],
         maxHeight: ()=>maxHeightTheme(options.maxHeight),
         contentAttributes: ()=>EditorView.contentAttributes.of(contentAttributesFor(options)),
@@ -298,6 +303,10 @@ const createEditor = (parent, initialOptions, callbacks)=>{
         state: createState(initialOptions.value, initialOptions),
         parent
     });
+    const preventReadOnlyMouseFocus = (event)=>{
+        if (view.state.readOnly && event.target instanceof Node && view.contentDOM.contains(event.target)) event.stopPropagation();
+    };
+    view.dom.addEventListener('mousedown', preventReadOnlyMouseFocus, true);
     const ensureLazyLanguage = (lang)=>{
         if (!isLazyLanguage(lang)) return;
         loadLanguageExtension(lang).then((extension)=>{
@@ -346,13 +355,20 @@ const createEditor = (parent, initialOptions, callbacks)=>{
     const update = (next)=>{
         const prev = options;
         options = next;
-        if (next.documentId !== prev.documentId) return void swapDocument(prev, next);
+        if (next.documentId !== prev.documentId) {
+            swapDocument(prev, next);
+            if (next.readOnly && view.hasFocus) view.contentDOM.blur();
+            return;
+        }
         reconfigure(prev, next);
+        if (next.readOnly && view.hasFocus) view.contentDOM.blur();
         if (next.language !== prev.language) ensureLazyLanguage(next.language);
         syncValue(next.value);
     };
     const api = {
-        focus: ()=>view.focus(),
+        focus: ()=>{
+            if (!view.state.readOnly) view.focus();
+        },
         getValue: ()=>view.state.doc.toString(),
         insertText: (text)=>{
             if (view.state.readOnly) return;
@@ -380,6 +396,7 @@ const createEditor = (parent, initialOptions, callbacks)=>{
         destroy: ()=>{
             destroyed = true;
             cache.clear();
+            view.dom.removeEventListener('mousedown', preventReadOnlyMouseFocus, true);
             view.destroy();
         }
     };

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.31.0",
-  "generatedAt": "2026-10-01T11:56:51.596Z",
+  "version": "1.33.0",
+  "generatedAt": "2026-10-02T12:33:35.613Z",
   "components": [
     {
       "name": "Accordion",
@@ -19208,7 +19208,7 @@
           "name": "readOnly",
           "type": "boolean | undefined",
           "required": false,
-          "description": "Focusable, selectable, searchable, copyable — but not editable by the user"
+          "description": "Non-editable and unfocusable content; text remains selectable, searchable and copyable"
         },
         {
           "name": "startingLineNumber",
@@ -19882,7 +19882,7 @@
               "name": "readOnly",
               "type": "boolean | undefined",
               "required": false,
-              "description": "Focusable, selectable, searchable, copyable — but not editable by the user",
+              "description": "Non-editable and unfocusable content; text remains selectable, searchable and copyable",
               "defaultValue": "false"
             },
             {
@@ -20301,7 +20301,7 @@
         {
           "name": "ReadOnly",
           "code": "() => (\n  <div style={{ width: '600px' }}>\n    <CodeEditorRoot\n      value={httpResponseCode}\n      language='http'\n      readOnly\n      data-testid='code-editor-read-only'\n    >\n      <CodeSnippetHeader>\n        <CodeSnippetTitle>Response</CodeSnippetTitle>\n        <CodeSnippetActions>\n          <CodeSnippetCopyButton />\n        </CodeSnippetActions>\n      </CodeSnippetHeader>\n      <CodeEditorContent lineNumbers aria-label='HTTP response, read only' />\n    </CodeEditorRoot>\n  </div>\n)",
-          "description": "`readOnly` still lets you focus, select, search and copy, but not type. Use it when the value\ncan change elsewhere but not here. If it never changes, use `CodeSnippet`."
+          "description": "`readOnly` lets you select, search and copy without focusing the code or showing a caret. Use it when the value\ncan change elsewhere but not here. If it never changes, use `CodeSnippet`."
         },
         {
           "name": "Tabs",
@@ -20344,9 +20344,9 @@
           "description": "Parity check for the three sizes: the same font size, line height and gutter padding per size."
         },
         {
-          "name": "ParityChrome",
-          "code": "() => (\n  <VStack gap={24}>\n    <ParityPair testId='parity-chrome-header' code={sampleCode} language='text'>\n      {PARITY_HEADER_CHROME}\n    </ParityPair>\n    <ParityPair testId='parity-chrome-floating' code={sampleCode} language='text'>\n      {PARITY_FLOATING_CHROME}\n    </ParityPair>\n  </VStack>\n)",
-          "description": "Parity check for the shared chrome: a header with tabs and actions, and floating actions\nwithout a header, sit in the same place with the same spacing."
+          "name": "ParityFrame",
+          "code": "() => (\n  <VStack gap={24}>\n    <ParityPair testId='parity-frame-header' code={sampleCode} language='text'>\n      {PARITY_HEADER_FRAME}\n    </ParityPair>\n    <ParityPair testId='parity-frame-floating' code={sampleCode} language='text'>\n      {PARITY_FLOATING_FRAME}\n    </ParityPair>\n  </VStack>\n)",
+          "description": "Parity check for the shared frame: a header with tabs and actions, and floating actions\nwithout a header, sit in the same place with the same spacing."
         },
         {
           "name": "ParityShowMore",
@@ -20391,7 +20391,7 @@
         {
           "name": "LongDocument",
           "code": "() => <LongDocumentDemo />",
-          "description": "2 000 read-only lines clamped by `maxLines` — the top of the envelope the colour painter is\nbuilt for, where `readOnly` still lets the text be focused, searched and copied."
+          "description": "2 000 read-only lines clamped by `maxLines` — the top of the envelope the colour painter is\nbuilt for, where `readOnly` still lets the text be selected, searched and copied."
         }
       ]
     },
@@ -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.32.0",
+  "version": "2.0.0-rc-fix-stepper.1",
   "description": "Core design system library with React components and Storybook documentation",
   "publishConfig": {
     "access": "public",