@symbiote-native/slider 5.0.3 → 5.2.0

package/src/svelte/slider/index.svelte

@@ -0,0 +1,326 @@
+<script lang="ts" module>
+  // Slider, the Svelte lifecycle half. Logic (value/limit/disabled folds, step-option layout) and
+  // the native render live in @symbiote-native/slider core, shared with every adapter; Svelte
+  // supplies reactivity (`$state`/`$derived`) and the descriptor bridge for the native
+  // `RNCSlider` leaf. The native view carries no symbiote metadata - the engine derives its
+  // events/color/image processors from the library's ViewConfig at runtime, registered by the
+  // side-effect import in ../index (not here, so this module and its tests stay free of the
+  // third-party spec).
+  //
+  // The leaf is bridged rather than written as `<RNCSlider>` because 'RNCSlider' is neither
+  // hyphenated nor lowercase-leading, so Svelte's compiler parses a literal tag as a COMPONENT
+  // reference, not an element (confirmed against the compiled output). The descriptor bridge
+  // (`native-view-bridge`'s `mountDescriptorChildren`, svelte-adapter-dom-shim skill §19)
+  // sidesteps this by calling `document.createElement(child.type)` programmatically, which the
+  // compiler never inspects. Imported from `native-view-bridge`, not the package's main barrel -
+  // the main barrel pulls in the whole `.svelte` module graph, fatal under vitest's plain
+  // svelte-plugin-free transform (this component's own smoke test).
+  //
+  // The custom-marker overlay's thumb-image cell uses the raw `symbiote-image` host tag rather
+  // than the framework's `Image` component: core's `render-steps-indicator.ts` paints the same
+  // default-overlay thumb with a bare `el('symbiote-image', {source, style})` Descriptor, and
+  // importing another `.svelte` component here would reintroduce the same main-barrel problem
+  // one level down.
+  import type { ISliderProps } from './slider-props';
+
+  export type { ISliderProps };
+</script>
+
+<script lang="ts">
+  import { dlog, type ISymbioteEvent } from '@symbiote-native/engine';
+  import {
+    mountDescriptorChildren,
+    createDescriptorChildrenSync,
+    type IDescriptorChildrenMount,
+    type ShimElement,
+  } from '@symbiote-native/svelte/native-view-bridge';
+  import type { IDescriptorChild } from '@symbiote-native/components';
+  import {
+    sanitizeSliderValue,
+    resolveSliderDisabled,
+    resolveSliderAccessibilityState,
+    resolveSliderLowerLimit,
+    resolveSliderUpperLimit,
+    valueFromSliderEvent,
+    shouldRenderStepsIndicator,
+    resolveThumbTintColor,
+    shouldPassNativeThumbImage,
+    isInvalidLimitConfig,
+    computeStepOptions,
+    orderStepOptions,
+    stepNumberFontSize,
+    renderSlider,
+    renderSliderNative,
+    resolveSliderWrapperStyle,
+    resolveStepsContainerStyle,
+    renderStepsIndicator,
+    STEP_INDICATOR_ELEMENT_STYLE,
+    TRACK_MARK_CONTAINER_STYLE,
+    THUMB_IMAGE_CONTAINER_STYLE,
+    THUMB_IMAGE_STYLE,
+    STEP_NUMBER_CONTAINER_STYLE,
+    SLIDER_DEFAULT_MINIMUM_VALUE,
+    SLIDER_DEFAULT_MAXIMUM_VALUE,
+    SLIDER_DEFAULT_STEP,
+    SLIDER_ON_CHANGE,
+    SLIDER_ON_VALUE_CHANGE,
+    SLIDER_ON_SLIDING_START,
+    SLIDER_ON_SLIDING_COMPLETE,
+    SLIDER_ON_ACCESSIBILITY_ACTION,
+    type ISliderViewProps,
+  } from '../../core';
+  import { PLATFORM } from './slider-platform';
+
+  function isRecord(value: unknown): value is Record<string, unknown> {
+    return typeof value === 'object' && value !== null && !Array.isArray(value);
+  }
+
+  let {
+    value = $bindable(),
+    minimumValue,
+    maximumValue,
+    step,
+    lowerLimit,
+    upperLimit,
+    disabled,
+    inverted = false,
+    thumbTintColor,
+    thumbImage,
+    accessibilityState,
+    renderStepNumber,
+    style,
+    class: className,
+    stepMarker,
+    onValueChange,
+    onSlidingStart,
+    onSlidingComplete,
+    onAccessibilityAction,
+    ...passthrough
+  }: ISliderProps = $props();
+
+  // Last value native reported, kept only to mark the active step - not the controlled value (the
+  // slider is uncontrolled during a drag, unlike Switch: native owns the thumb position). A plain
+  // number, not an engine-node reference, so `$state` (not `.raw`) is fine here; only `hostShim*`
+  // below needs `.raw`'s no-deep-proxy guarantee for the engine's WeakMap-keyed identity lookups.
+  let reportedValue = $state<number | undefined>(undefined);
+  // The measured wrapper width the step indicator lays out against; 0 until the first layout.
+  let width = $state(0);
+
+  function handleValueChange(event: ISymbioteEvent): void {
+    const next = valueFromSliderEvent(event);
+    if (next === undefined) return;
+    reportedValue = next;
+    // Additive `bind:value` sugar (svelte-adapter-dom-shim skill): reassigning a `$bindable()`
+    // prop pushes it to the caller's bound variable, on the same report path as `onValueChange`
+    // below (matches the Vue adapter's `emitModelUpdate` timing) - never replacing the
+    // `value`/`onValueChange` contract.
+    value = next;
+    onValueChange?.(next);
+  }
+  function handleSlidingStart(event: ISymbioteEvent): void {
+    const next = valueFromSliderEvent(event);
+    if (next !== undefined) onSlidingStart?.(next);
+  }
+  function handleSlidingComplete(event: ISymbioteEvent): void {
+    const next = valueFromSliderEvent(event);
+    if (next !== undefined) onSlidingComplete?.(next);
+  }
+  function handleAccessibilityAction(event: ISymbioteEvent): void {
+    onAccessibilityAction?.(event);
+  }
+  function handleLayout(event: ISymbioteEvent): void {
+    const layout = event.nativeEvent.layout;
+    if (isRecord(layout) && typeof layout.width === 'number')
+      width = layout.width;
+  }
+
+  const minimum = $derived(minimumValue ?? SLIDER_DEFAULT_MINIMUM_VALUE);
+  const maximum = $derived(maximumValue ?? SLIDER_DEFAULT_MAXIMUM_VALUE);
+  const resolvedStep = $derived(step ?? SLIDER_DEFAULT_STEP);
+  const lower = $derived(resolveSliderLowerLimit(lowerLimit));
+  const upper = $derived(resolveSliderUpperLimit(upperLimit));
+
+  $effect(() => {
+    if (isInvalidLimitConfig(lower, upper)) {
+      dlog('Slider: lowerLimit must be smaller than upperLimit');
+    }
+  });
+
+  const hasStepMarker = $derived(stepMarker !== undefined);
+  const hasThumbImage = $derived(thumbImage !== undefined);
+  const showSteps = $derived(
+    shouldRenderStepsIndicator(hasStepMarker, renderStepNumber),
+  );
+
+  // The native view gets a thumbImage only when there is one AND no custom marker (which draws
+  // its own thumb), matching the library. Passed raw — the engine runs the image processor
+  // derived from RNCSlider's ViewConfig (same path as the color tints).
+  const nativeThumbImage = $derived(
+    shouldPassNativeThumbImage(hasStepMarker, hasThumbImage)
+      ? thumbImage
+      : undefined,
+  );
+
+  const view = $derived<ISliderViewProps>({
+    value: sanitizeSliderValue(value),
+    minimumValue: minimum,
+    maximumValue: maximum,
+    step: resolvedStep,
+    lowerLimit: lower,
+    upperLimit: upper,
+    disabled: resolveSliderDisabled(disabled, accessibilityState),
+    inverted,
+    thumbTintColor: resolveThumbTintColor(
+      thumbTintColor,
+      hasStepMarker,
+      hasThumbImage,
+    ),
+    thumbImage: nativeThumbImage,
+    accessibilityState: resolveSliderAccessibilityState(
+      disabled,
+      accessibilityState,
+    ),
+    width,
+    style,
+    passthrough: {
+      ...passthrough,
+      [SLIDER_ON_CHANGE]: handleValueChange,
+      [SLIDER_ON_VALUE_CHANGE]: handleValueChange,
+      [SLIDER_ON_SLIDING_START]: handleSlidingStart,
+      [SLIDER_ON_SLIDING_COMPLETE]: handleSlidingComplete,
+      [SLIDER_ON_ACCESSIBILITY_ACTION]: handleAccessibilityAction,
+    },
+  });
+
+  const options = $derived(
+    computeStepOptions(minimum, maximum, resolvedStep, PLATFORM.stepResolution),
+  );
+  const currentValue = $derived(reportedValue ?? view.value ?? minimum);
+
+  // --- No custom marker: renderSlider() is the single source of truth (wrapper + optional
+  // default steps overlay + the native leaf), ALL pure Descriptor — mounted via the bridge.
+  // Unlike every fixed-shape component elsewhere in this adapter, this Descriptor's own shape
+  // genuinely varies with `renderStepNumber` (1 child with no overlay, 2 with one), so the sync
+  // below tolerates a child-count change with a clean rebuild instead of assuming constant shape.
+  const defaultDescriptor = $derived(
+    hasStepMarker
+      ? undefined
+      : renderSlider(
+          view,
+          PLATFORM,
+          showSteps
+            ? {
+                steps: renderStepsIndicator({
+                  options,
+                  currentValue,
+                  width,
+                  renderStepNumber: renderStepNumber === true,
+                  thumbImage,
+                  inverted,
+                  platform: PLATFORM,
+                }),
+                onLayout: handleLayout,
+              }
+            : { onLayout: handleLayout },
+        ),
+  );
+
+  let hostShimDefault = $state.raw<ShimElement | null>(null);
+  let mountedDefault: IDescriptorChildrenMount | undefined;
+  let mountedDefaultCount = -1;
+
+  function syncDefaultChildren(children: IDescriptorChild[]): void {
+    if (hostShimDefault === null) return;
+    if (
+      mountedDefault === undefined ||
+      mountedDefaultCount !== children.length
+    ) {
+      for (const child of hostShimDefault.children.slice())
+        hostShimDefault.removeChild(child);
+      mountedDefault = mountDescriptorChildren(hostShimDefault, children);
+      mountedDefaultCount = children.length;
+    } else {
+      mountedDefault.update(children);
+    }
+  }
+
+  $effect(() => {
+    const descriptor = defaultDescriptor;
+    if (descriptor === undefined) return;
+    syncDefaultChildren(descriptor.children);
+  });
+
+  // --- Custom marker: the overlay is hand-authored live template content below (it hosts the
+  // caller's `stepMarker` Snippet, a live child no Descriptor can carry — component-render-fn-
+  // boundary rule). Only the native leaf (always exactly one, constant shape) is bridged.
+  const fontSize = $derived(stepNumberFontSize(options.length));
+  const orderedOptions = $derived(orderStepOptions(options, inverted));
+  const minOption = $derived(options[0]);
+  const maxOption = $derived(options[options.length - 1]);
+  const nativeLeafDescriptor = $derived(renderSliderNative(view, PLATFORM));
+  const markerWrapperBag = $derived({
+    style: resolveSliderWrapperStyle(style, PLATFORM),
+    class: className,
+    onLayout: handleLayout,
+  });
+
+  let hostShimMarker = $state.raw<ShimElement | null>(null);
+  const syncMarkerLeaf = createDescriptorChildrenSync();
+
+  $effect(() => {
+    if (!hasStepMarker) return;
+    syncMarkerLeaf(hostShimMarker, [nativeLeafDescriptor]);
+  });
+</script>
+
+{#if hasStepMarker}
+  <symbiote-view p={markerWrapperBag} bind:this={hostShimMarker}>
+    <symbiote-view
+      p={{
+        pointerEvents: 'none',
+        testID: 'StepsIndicator-Container',
+        style: resolveStepsContainerStyle(width, PLATFORM),
+      }}
+    >
+      {#each orderedOptions as optionValue, index (optionValue)}
+        <symbiote-view p={{ style: STEP_INDICATOR_ELEMENT_STYLE }}>
+          <symbiote-view p={{ style: TRACK_MARK_CONTAINER_STYLE }}>
+            {@render stepMarker?.({
+              stepMarked: optionValue === currentValue,
+              currentValue,
+              index,
+              min: minOption,
+              max: maxOption,
+            })}
+            {#if thumbImage !== undefined && optionValue === currentValue}
+              <symbiote-view
+                p={{
+                  style: THUMB_IMAGE_CONTAINER_STYLE,
+                  testID: 'sliderTrackMark-thumbImage',
+                }}
+              >
+                <symbiote-image
+                  p={{ source: thumbImage, style: THUMB_IMAGE_STYLE }}
+                />
+              </symbiote-view>
+            {/if}
+          </symbiote-view>
+          {#if renderStepNumber}
+            <symbiote-view p={{ style: STEP_NUMBER_CONTAINER_STYLE }}>
+              <symbiote-text
+                p={{ testID: `${index}th-step`, style: { fontSize } }}
+              >
+                {String(optionValue)}
+              </symbiote-text>
+            </symbiote-view>
+          {/if}
+        </symbiote-view>
+      {/each}
+    </symbiote-view>
+  </symbiote-view>
+{:else}
+  <symbiote-view
+    p={{ ...defaultDescriptor?.props, class: className }}
+    bind:this={hostShimDefault}
+  />
+{/if}

package/src/svelte/slider/slider-platform.android.ts

@@ -0,0 +1,14 @@
+// Slider on Android: the native view sizes itself (no default height), lays out implicit steps
+// at 128-point resolution, and keeps the step row at the top. Mirrors
+// packages/slider/src/vue/slider/index.android.ts exactly, one level down (platform CONSTANT
+// here — see index.svelte's header).
+import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core';
+import type { ISliderPlatform } from '../../core';
+
+const ANDROID_STEPS_CONTAINER_TOP = 0;
+
+export const PLATFORM: ISliderPlatform = {
+  defaultStyle: {},
+  stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
+  stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
+};

package/src/svelte/slider/slider-platform.ios.ts

@@ -0,0 +1,18 @@
+// Slider on iOS: the native view has an intrinsic 40pt height (the wrapper applies it as the
+// default), lays out implicit steps at 1000-point resolution, and nudges the step row down 10pt.
+// Also the base (./slider-platform re-exports it) for headless. Mirrors
+// packages/slider/src/vue/slider/index.ios.ts exactly, one level down (platform CONSTANT here,
+// not a per-platform component — see index.svelte's header).
+import {
+  SLIDER_IOS_DEFAULT_HEIGHT,
+  SLIDER_STEP_RESOLUTION_IOS,
+} from '../../core';
+import type { ISliderPlatform } from '../../core';
+
+const IOS_STEPS_CONTAINER_TOP = 10;
+
+export const PLATFORM: ISliderPlatform = {
+  defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },
+  stepResolution: SLIDER_STEP_RESOLUTION_IOS,
+  stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
+};

package/src/svelte/slider/slider-platform.ts

@@ -0,0 +1,5 @@
+// Base / default: re-exports the iOS build. Metro overrides this with slider-platform.ios.ts /
+// slider-platform.android.ts on a real host; under tsc/vitest the host config resolves here.
+// Filename is the selector, no Platform.OS read — same convention as adapters/svelte's own
+// switch-platform.ts.
+export * from './slider-platform.ios';

package/src/svelte/slider/slider-props.ts

@@ -0,0 +1,17 @@
+// `ISliderProps`'s canonical home: reuses the shared @symbiote-native/slider core base verbatim
+// (already framework-agnostic - no children, no ref-as-prop) and adds two Svelte-only fields,
+// per CLAUDE.md's <prop_types_split_agnostic_vs_per_adapter>:
+//   - `class`, matching every component in this adapter (View/Text/Switch/…).
+//   - `stepMarker`, a Snippet<[IStepMarkerProps]> — the framework-specific render-callback field
+//     Vue takes as a `#stepMarker` scoped slot, React as `StepMarker: FC<IStepMarkerProps>`.
+import type { Snippet } from 'svelte';
+import type { IClassNameValue } from '@symbiote-native/engine';
+import type {
+  ISliderProps as ISliderBaseProps,
+  IStepMarkerProps,
+} from '../../core';
+
+export type ISliderProps = ISliderBaseProps & {
+  class?: IClassNameValue;
+  stepMarker?: Snippet<[IStepMarkerProps]>;
+};

package/src/vue/slider/index.ios.ts

@@ -3,7 +3,10 @@
 // Also the base (./index re-exports it) for headless. Mirrors the library's iOS branches.
 
 import { createSlider } from './shared';
-import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
+import {
+  SLIDER_IOS_DEFAULT_HEIGHT,
+  SLIDER_STEP_RESOLUTION_IOS,
+} from '../../core';
 
 const IOS_STEPS_CONTAINER_TOP = 10;
 

package/src/vue/slider/shared.ts

@@ -7,7 +7,13 @@
 // the side-effect import in ../register (pulled in by the package barrel, NOT here, so this module
 // and its tests stay free of the third-party spec).
 
-import { defineComponent, h, ref, type SetupContext, type VNode } from '@vue/runtime-core';
+import {
+  defineComponent,
+  h,
+  ref,
+  type SetupContext,
+  type VNode,
+} from '@vue/runtime-core';
 import {
   descriptorToVue,
   normalizeVueAttrs,
@@ -16,7 +22,11 @@ import {
   Image,
   type IImageSourceProp,
 } from '@symbiote-native/vue';
-import { dlog, type IClassNameValue, type ISymbioteEvent } from '@symbiote-native/engine';
+import {
+  dlog,
+  type IClassNameValue,
+  type ISymbioteEvent,
+} from '@symbiote-native/engine';
 import {
   sanitizeSliderValue,
   resolveSliderDisabled,
@@ -60,7 +70,10 @@ import {
 // the class-routing note on HANDLED_ATTRS below.
 export type ISliderProps = Omit<
   ISliderBaseProps,
-  'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'
+  | 'onValueChange'
+  | 'onSlidingStart'
+  | 'onSlidingComplete'
+  | 'onAccessibilityAction'
 > & {
   modelValue?: number;
   class?: IClassNameValue;
@@ -92,14 +105,21 @@ function asBoolean(value: unknown): boolean | undefined {
 }
 
 function isImageSourceProp(value: unknown): value is IImageSourceProp {
-  return typeof value === 'number' || (typeof value === 'object' && value !== null);
+  return (
+    typeof value === 'number' || (typeof value === 'object' && value !== null)
+  );
 }
 
 // accessibilityState arrives untyped; narrow its disabled flag for the fold while preserving the
 // other entries at runtime (the resolve spread carries them onto the native node).
-function asAccessibilityState(value: unknown): ISliderAccessibilityState | undefined {
+function asAccessibilityState(
+  value: unknown,
+): ISliderAccessibilityState | undefined {
   if (!isRecord(value)) return undefined;
-  return { ...value, disabled: typeof value.disabled === 'boolean' ? value.disabled : undefined };
+  return {
+    ...value,
+    disabled: typeof value.disabled === 'boolean' ? value.disabled : undefined,
+  };
 }
 
 // The props/handlers the lifecycle consumes itself; everything else (the track tints + images,
@@ -180,14 +200,17 @@ export function createSlider(platform: ISliderPlatform) {
       };
       const handleLayout = (event: ISymbioteEvent): void => {
         const layout = event.nativeEvent.layout;
-        if (isRecord(layout) && typeof layout.width === 'number') width.value = layout.width;
+        if (isRecord(layout) && typeof layout.width === 'number')
+          width.value = layout.width;
       };
 
       return () => {
         const attrs = normalizeVueAttrs(rawAttrs);
 
-        const minimumValue = asNumber(attrs.minimumValue) ?? SLIDER_DEFAULT_MINIMUM_VALUE;
-        const maximumValue = asNumber(attrs.maximumValue) ?? SLIDER_DEFAULT_MAXIMUM_VALUE;
+        const minimumValue =
+          asNumber(attrs.minimumValue) ?? SLIDER_DEFAULT_MINIMUM_VALUE;
+        const maximumValue =
+          asNumber(attrs.maximumValue) ?? SLIDER_DEFAULT_MAXIMUM_VALUE;
         const step = asNumber(attrs.step) ?? SLIDER_DEFAULT_STEP;
         const lowerLimit = resolveSliderLowerLimit(asNumber(attrs.lowerLimit));
         const upperLimit = resolveSliderUpperLimit(asNumber(attrs.upperLimit));
@@ -195,19 +218,27 @@ export function createSlider(platform: ISliderPlatform) {
           dlog('Slider: lowerLimit must be smaller than upperLimit');
         }
         const disabledAttr = asBoolean(attrs.disabled);
-        const accessibilityState = asAccessibilityState(attrs.accessibilityState);
+        const accessibilityState = asAccessibilityState(
+          attrs.accessibilityState,
+        );
         const inverted = asBoolean(attrs.inverted) ?? false;
 
         const hasStepMarker = slots.stepMarker !== undefined;
         const renderStepNumber = asBoolean(attrs.renderStepNumber);
         const hasThumbImage = attrs.thumbImage !== undefined;
-        const showSteps = shouldRenderStepsIndicator(hasStepMarker, renderStepNumber);
+        const showSteps = shouldRenderStepsIndicator(
+          hasStepMarker,
+          renderStepNumber,
+        );
 
         // The native view gets a thumbImage only when there is one AND no custom marker (which
         // draws its own thumb), matching the library. We pass the source raw — the engine runs the
         // image processor derived from RNCSlider's ViewConfig (same path as the color tints), so
         // unlike the plain-RN library wrapper we do NOT pre-call Image.resolveAssetSource here.
-        const nativeThumbImage = shouldPassNativeThumbImage(hasStepMarker, hasThumbImage)
+        const nativeThumbImage = shouldPassNativeThumbImage(
+          hasStepMarker,
+          hasThumbImage,
+        )
           ? attrs.thumbImage
           : undefined;
 
@@ -220,9 +251,16 @@ export function createSlider(platform: ISliderPlatform) {
           upperLimit,
           disabled: resolveSliderDisabled(disabledAttr, accessibilityState),
           inverted,
-          thumbTintColor: resolveThumbTintColor(attrs.thumbTintColor, hasStepMarker, hasThumbImage),
+          thumbTintColor: resolveThumbTintColor(
+            attrs.thumbTintColor,
+            hasStepMarker,
+            hasThumbImage,
+          ),
           thumbImage: nativeThumbImage,
-          accessibilityState: resolveSliderAccessibilityState(disabledAttr, accessibilityState),
+          accessibilityState: resolveSliderAccessibilityState(
+            disabledAttr,
+            accessibilityState,
+          ),
           width: width.value,
           style: attrs.style,
           passthrough: {
@@ -314,7 +352,10 @@ export function createSlider(platform: ISliderPlatform) {
 
 // The wrapper style for the steps path mirrors renderSlider's wrapper (kept here because the
 // custom-marker path builds the wrapper itself rather than going through renderSlider).
-function resolveStepsWrapperStyle(style: unknown, platform: ISliderPlatform): unknown {
+function resolveStepsWrapperStyle(
+  style: unknown,
+  platform: ISliderPlatform,
+): unknown {
   return [platform.defaultStyle, style, { justifyContent: 'center' }];
 }
 
@@ -348,12 +389,16 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): VNode {
       min,
       max,
     });
-    if (marker !== undefined) trackChildren.push(h('symbiote-view', {}, marker));
+    if (marker !== undefined)
+      trackChildren.push(h('symbiote-view', {}, marker));
     if (isImageSourceProp(params.thumbImage) && value === params.currentValue) {
       trackChildren.push(
         h(
           'symbiote-view',
-          { style: THUMB_IMAGE_CONTAINER_STYLE, testID: 'sliderTrackMark-thumbImage' },
+          {
+            style: THUMB_IMAGE_CONTAINER_STYLE,
+            testID: 'sliderTrackMark-thumbImage',
+          },
           [h(Image, { source: params.thumbImage, style: THUMB_IMAGE_STYLE })],
         ),
       );
@@ -364,11 +409,19 @@ function renderCustomStepsOverlay(params: ICustomStepsParams): VNode {
     if (params.renderStepNumber) {
       cellChildren.push(
         h('symbiote-view', { style: STEP_NUMBER_CONTAINER_STYLE }, [
-          h('symbiote-text', { testID: `${index}th-step`, style: { fontSize } }, String(value)),
+          h(
+            'symbiote-text',
+            { testID: `${index}th-step`, style: { fontSize } },
+            String(value),
+          ),
         ]),
       );
     }
-    return h('symbiote-view', { style: STEP_INDICATOR_ELEMENT_STYLE }, cellChildren);
+    return h(
+      'symbiote-view',
+      { style: STEP_INDICATOR_ELEMENT_STYLE },
+      cellChildren,
+    );
   });
   return h(
     'symbiote-view',