@symbiote-native/slider 5.0.3 → 5.1.0

package/build/angular/slider/index.android.js

@@ -34,7 +34,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared.js';
 import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core/index.js';
@@ -45,6 +46,7 @@ let Slider = (() => {
             standalone: true,
             imports: [DescriptorOutlet],
             changeDetection: ChangeDetectionStrategy.OnPush,
+            providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }],
             template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
         })];
     let _classDescriptor;

package/build/angular/slider/index.ios.js

@@ -35,7 +35,8 @@ var __runInitializers = (this && this.__runInitializers) || function (thisArg, i
     }
     return useValue ? value : void 0;
 };
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared.js';
 import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core/index.js';
@@ -46,6 +47,7 @@ let Slider = (() => {
             standalone: true,
             imports: [DescriptorOutlet],
             changeDetection: ChangeDetectionStrategy.OnPush,
+            providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }],
             template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
         })];
     let _classDescriptor;

package/build/angular/slider/shared.d.ts

@@ -1,9 +1,10 @@
 import { EventEmitter, type OnChanges } from '@angular/core';
+import type { ControlValueAccessor } from '@angular/forms';
 import type { IAccessibilityProps, IAccessibilityStateValue, IAriaProps, IDescriptor } from '@symbiote-native/components';
 import { type ISymbioteEvent } from '@symbiote-native/engine';
 import { type ISliderPlatform, type ISliderProps as ISliderBaseProps } from '../../core';
 export type ISliderProps = Omit<ISliderBaseProps, 'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'>;
-export declare abstract class SliderBase implements ISliderProps, OnChanges {
+export declare abstract class SliderBase implements ISliderProps, OnChanges, ControlValueAccessor {
     value?: number;
     minimumValue?: number;
     maximumValue?: number;
@@ -79,6 +80,10 @@ export declare abstract class SliderBase implements ISliderProps, OnChanges {
     protected readonly handleSlidingComplete: (event: ISymbioteEvent) => void;
     protected readonly handleAccessibilityAction: (event: ISymbioteEvent) => void;
     protected readonly handleLayout: (event: ISymbioteEvent) => void;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     private inputProps;
     get descriptor(): IDescriptor;
 }

package/build/angular/slider/shared.js

@@ -521,6 +521,25 @@ let SliderBase = (() => {
                 this.changeDetector.markForCheck();
             }
         };
+        // ControlValueAccessor — `value`/`disabled` are plain @Input() fields feeding the `descriptor`
+        // getter (re-evaluated on every OnPush check, no fold/commit dance), so writeValue()/
+        // setDisabledState() can set them straight, no TextInput-style stale-safe seam needed.
+        writeValue(value) {
+            this.value = value ?? undefined;
+            this.changeDetector.markForCheck();
+        }
+        registerOnChange(fn) {
+            this.valueChange.subscribe(fn);
+        }
+        registerOnTouched(fn) {
+            // Slider has no blur concept (it's a drag control, not a text field) — the thumb release is
+            // the closest "the user is done interacting" signal.
+            this.slidingComplete.subscribe(() => fn());
+        }
+        setDisabledState(isDisabled) {
+            this.disabled = isDisabled;
+            this.changeDetector.markForCheck();
+        }
         inputProps() {
             return {
                 value: this.value,

package/build/core/slider-props.js

@@ -1,7 +1,5 @@
-// Slider prop types. Every field of the slider's public surface is framework-agnostic EXCEPT the
-// custom `StepMarker`, which is a render component returning a framework element (React FC vs Vue
-// slot) — since that element type is framework-specific, it can't live in a shared type, so it
-// stays in each adapter's own flavored prop type. ISliderProps here is the shared agnostic base
-// every adapter re-exports and extends; ISliderViewProps is the pre-resolved input the render fn
-// paints.
+// Slider prop types. ISliderProps is the shared agnostic base every adapter re-exports and
+// extends; ISliderViewProps is the pre-resolved input the render fn paints. The custom
+// `StepMarker` field is per-adapter (a framework element return type can't live here) - see
+// CLAUDE.md's <prop_types_split_agnostic_vs_per_adapter>.
 export {};

package/build/svelte/index.d.ts

@@ -0,0 +1,3 @@
+import '../register';
+export { default as Slider } from './slider/index.svelte';
+export type { ISliderProps } from './slider/slider-props';

package/build/svelte/index.js

@@ -0,0 +1,9 @@
+// @symbiote-native/slider/svelte: Svelte wrapper over the @react-native-community/slider native
+// view. Importing this barrel first registers the native view's ViewConfig (../register, a
+// side-effect import of the codegen spec, never the library's React component), then exposes
+// Slider. Mirrors vue/index.ts, except the platform split lives one level down
+// (slider/slider-platform.ts, Metro-filename-selected) - matching this adapter's own
+// Switch/ActivityIndicator convention, since Svelte components are compiled `.svelte` files, not
+// factories like Vue's per-platform `createSlider(platform)`.
+import '../register';
+export { default as Slider } from './slider/index.svelte';

package/build/svelte/slider/index.svelte

@@ -0,0 +1,274 @@
+<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/build/svelte/slider/index.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ISliderProps } from './slider-props';
+export type { ISliderProps };
+declare const Index: import("svelte").Component<ISliderProps, {}, "value">;
+type Index = ReturnType<typeof Index>;
+export default Index;

package/build/svelte/slider/slider-platform.android.d.ts

@@ -0,0 +1,2 @@
+import type { ISliderPlatform } from '../../core';
+export declare const PLATFORM: ISliderPlatform;

package/build/svelte/slider/slider-platform.android.js

@@ -0,0 +1,11 @@
+// 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/index.js';
+const ANDROID_STEPS_CONTAINER_TOP = 0;
+export const PLATFORM = {
+    defaultStyle: {},
+    stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
+    stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
+};

package/build/svelte/slider/slider-platform.d.ts

@@ -0,0 +1 @@
+export * from './slider-platform.ios';

package/build/svelte/slider/slider-platform.ios.d.ts

@@ -0,0 +1,2 @@
+import type { ISliderPlatform } from '../../core';
+export declare const PLATFORM: ISliderPlatform;

package/build/svelte/slider/slider-platform.ios.js

@@ -0,0 +1,12 @@
+// 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/index.js';
+const IOS_STEPS_CONTAINER_TOP = 10;
+export const PLATFORM = {
+    defaultStyle: { height: SLIDER_IOS_DEFAULT_HEIGHT },
+    stepResolution: SLIDER_STEP_RESOLUTION_IOS,
+    stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
+};

package/build/svelte/slider/slider-platform.js

@@ -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.js';

package/build/svelte/slider/slider-props.d.ts

@@ -0,0 +1,7 @@
+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/build/svelte/slider/slider-props.js

@@ -0,0 +1 @@
+export {};

package/build-ngc/angular/slider/index.android.js

@@ -1,6 +1,7 @@
 // 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 the library's Android branches.
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared';
 import { SLIDER_STEP_RESOLUTION_ANDROID } from '../../core';
@@ -12,16 +13,17 @@ export class Slider extends SliderBase {
         stepResolution: SLIDER_STEP_RESOLUTION_ANDROID,
         stepsContainerTop: ANDROID_STEPS_CONTAINER_TOP,
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: Slider, isStandalone: true, selector: "Slider", usesInheritance: true, ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: Slider, isStandalone: true, selector: "Slider", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }], usesInheritance: true, ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Slider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Slider, decorators: [{
             type: Component,
             args: [{
                     selector: 'Slider',
                     standalone: true,
                     imports: [DescriptorOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }],
                     template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
                 }]
         }] });

package/build-ngc/angular/slider/index.android.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../src/angular/slider/index.android.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,mGAAmG;AAEnG,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;;AAG5D,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAStC,MAAM,OAAO,MAAO,SAAQ,UAAU;IACjB,QAAQ,GAAG;QAC5B,YAAY,EAAE,EAAE;QAChB,cAAc,EAAE,8BAA8B;QAC9C,iBAAiB,EAAE,2BAA2B;KAC/C,CAAC;uGALS,MAAM;2FAAN,MAAM,yFAFP,oDAAoD,4DAFpD,gBAAgB;;2FAIf,MAAM;kBAPlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE,oDAAoD;iBAC/D"}
+{"version":3,"file":"index.android.js","sourceRoot":"","sources":["../../../src/angular/slider/index.android.ts"],"names":[],"mappings":"AAAA,kGAAkG;AAClG,mGAAmG;AAEnG,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,8BAA8B,EAAE,MAAM,YAAY,CAAC;;AAG5D,MAAM,2BAA2B,GAAG,CAAC,CAAC;AAUtC,MAAM,OAAO,MAAO,SAAQ,UAAU;IACjB,QAAQ,GAAG;QAC5B,YAAY,EAAE,EAAE;QAChB,cAAc,EAAE,8BAA8B;QAC9C,iBAAiB,EAAE,2BAA2B;KAC/C,CAAC;uGALS,MAAM;2FAAN,MAAM,qDAHN,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,iDACrF,oDAAoD,4DAHpD,gBAAgB;;2FAKf,MAAM;kBARlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;oBAC/F,QAAQ,EAAE,oDAAoD;iBAC/D"}

package/build-ngc/angular/slider/index.ios.js

@@ -1,7 +1,8 @@
 // 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 (./index re-exports it) for headless. Mirrors the library's iOS branches.
-import { ChangeDetectionStrategy, Component } from '@angular/core';
+import { ChangeDetectionStrategy, Component, forwardRef } from '@angular/core';
+import { NG_VALUE_ACCESSOR } from '@angular/forms';
 import { DescriptorOutlet } from '@symbiote-native/angular';
 import { SliderBase } from './shared';
 import { SLIDER_IOS_DEFAULT_HEIGHT, SLIDER_STEP_RESOLUTION_IOS } from '../../core';
@@ -13,16 +14,17 @@ export class Slider extends SliderBase {
         stepResolution: SLIDER_STEP_RESOLUTION_IOS,
         stepsContainerTop: IOS_STEPS_CONTAINER_TOP,
     };
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
-    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.5", type: Slider, isStandalone: true, selector: "Slider", usesInheritance: true, ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Slider, deps: null, target: i0.ɵɵFactoryTarget.Component });
+    static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "22.0.8", type: Slider, isStandalone: true, selector: "Slider", providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }], usesInheritance: true, ngImport: i0, template: `<symbiote-descriptor-outlet [node]="descriptor" />`, isInline: true, dependencies: [{ kind: "component", type: DescriptorOutlet, selector: "symbiote-descriptor-outlet", inputs: ["node"] }], changeDetection: i0.ChangeDetectionStrategy.OnPush });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: Slider, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: Slider, decorators: [{
             type: Component,
             args: [{
                     selector: 'Slider',
                     standalone: true,
                     imports: [DescriptorOutlet],
                     changeDetection: ChangeDetectionStrategy.OnPush,
+                    providers: [{ provide: NG_VALUE_ACCESSOR, useExisting: forwardRef(() => Slider), multi: true }],
                     template: `<symbiote-descriptor-outlet [node]="descriptor" />`,
                 }]
         }] });

package/build-ngc/angular/slider/index.ios.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../src/angular/slider/index.ios.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,iGAAiG;AACjG,0FAA0F;AAE1F,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;;AAGnF,MAAM,uBAAuB,GAAG,EAAE,CAAC;AASnC,MAAM,OAAO,MAAO,SAAQ,UAAU;IACjB,QAAQ,GAAG;QAC5B,YAAY,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE;QACnD,cAAc,EAAE,0BAA0B;QAC1C,iBAAiB,EAAE,uBAAuB;KAC3C,CAAC;uGALS,MAAM;2FAAN,MAAM,yFAFP,oDAAoD,4DAFpD,gBAAgB;;2FAIf,MAAM;kBAPlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,QAAQ,EAAE,oDAAoD;iBAC/D"}
+{"version":3,"file":"index.ios.js","sourceRoot":"","sources":["../../../src/angular/slider/index.ios.ts"],"names":[],"mappings":"AAAA,6FAA6F;AAC7F,iGAAiG;AACjG,0FAA0F;AAE1F,OAAO,EAAE,uBAAuB,EAAE,SAAS,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC/E,OAAO,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACnD,OAAO,EAAE,gBAAgB,EAAE,MAAM,0BAA0B,CAAC;AAC5D,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,0BAA0B,EAAE,MAAM,YAAY,CAAC;;AAGnF,MAAM,uBAAuB,GAAG,EAAE,CAAC;AAUnC,MAAM,OAAO,MAAO,SAAQ,UAAU;IACjB,QAAQ,GAAG;QAC5B,YAAY,EAAE,EAAE,MAAM,EAAE,yBAAyB,EAAE;QACnD,cAAc,EAAE,0BAA0B;QAC1C,iBAAiB,EAAE,uBAAuB;KAC3C,CAAC;uGALS,MAAM;2FAAN,MAAM,qDAHN,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,CAAC,MAAM,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC,iDACrF,oDAAoD,4DAHpD,gBAAgB;;2FAKf,MAAM;kBARlB,SAAS;mBAAC;oBACT,QAAQ,EAAE,QAAQ;oBAClB,UAAU,EAAE,IAAI;oBAChB,OAAO,EAAE,CAAC,gBAAgB,CAAC;oBAC3B,eAAe,EAAE,uBAAuB,CAAC,MAAM;oBAC/C,SAAS,EAAE,CAAC,EAAE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,UAAU,CAAC,GAAG,EAAE,OAAO,CAAC,EAAE,KAAK,EAAE,IAAI,EAAE,CAAC;oBAC/F,QAAQ,EAAE,oDAAoD;iBAC/D"}

package/build-ngc/angular/slider/shared.d.ts

@@ -1,10 +1,11 @@
 import { EventEmitter, type OnChanges } from '@angular/core';
+import type { ControlValueAccessor } from '@angular/forms';
 import type { IAccessibilityProps, IAccessibilityStateValue, IAriaProps, IDescriptor } from '@symbiote-native/components';
 import { type ISymbioteEvent } from '@symbiote-native/engine';
 import { type ISliderPlatform, type ISliderProps as ISliderBaseProps } from '../../core';
 import * as i0 from "@angular/core";
 export type ISliderProps = Omit<ISliderBaseProps, 'onValueChange' | 'onSlidingStart' | 'onSlidingComplete' | 'onAccessibilityAction'>;
-export declare abstract class SliderBase implements ISliderProps, OnChanges {
+export declare abstract class SliderBase implements ISliderProps, OnChanges, ControlValueAccessor {
     value?: number;
     minimumValue?: number;
     maximumValue?: number;
@@ -80,6 +81,10 @@ export declare abstract class SliderBase implements ISliderProps, OnChanges {
     protected readonly handleSlidingComplete: (event: ISymbioteEvent) => void;
     protected readonly handleAccessibilityAction: (event: ISymbioteEvent) => void;
     protected readonly handleLayout: (event: ISymbioteEvent) => void;
+    writeValue(value: number | null): void;
+    registerOnChange(fn: (value: number) => void): void;
+    registerOnTouched(fn: () => void): void;
+    setDisabledState(isDisabled: boolean): void;
     private inputProps;
     get descriptor(): IDescriptor;
     static ɵfac: i0.ɵɵFactoryDeclaration<SliderBase, never>;

package/build-ngc/angular/slider/shared.js

@@ -155,6 +155,25 @@ export class SliderBase {
             this.changeDetector.markForCheck();
         }
     };
+    // ControlValueAccessor — `value`/`disabled` are plain @Input() fields feeding the `descriptor`
+    // getter (re-evaluated on every OnPush check, no fold/commit dance), so writeValue()/
+    // setDisabledState() can set them straight, no TextInput-style stale-safe seam needed.
+    writeValue(value) {
+        this.value = value ?? undefined;
+        this.changeDetector.markForCheck();
+    }
+    registerOnChange(fn) {
+        this.valueChange.subscribe(fn);
+    }
+    registerOnTouched(fn) {
+        // Slider has no blur concept (it's a drag control, not a text field) — the thumb release is
+        // the closest "the user is done interacting" signal.
+        this.slidingComplete.subscribe(() => fn());
+    }
+    setDisabledState(isDisabled) {
+        this.disabled = isDisabled;
+        this.changeDetector.markForCheck();
+    }
     inputProps() {
         return {
             value: this.value,
@@ -277,10 +296,10 @@ export class SliderBase {
         });
         return renderSlider(view, this.platform, { steps, onLayout: this.handleLayout });
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SliderBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
-    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.5", type: SliderBase, isStandalone: true, inputs: { value: "value", minimumValue: "minimumValue", maximumValue: "maximumValue", step: "step", lowerLimit: "lowerLimit", upperLimit: "upperLimit", minimumTrackTintColor: "minimumTrackTintColor", maximumTrackTintColor: "maximumTrackTintColor", thumbTintColor: "thumbTintColor", disabled: "disabled", inverted: "inverted", tapToSeek: "tapToSeek", vertical: "vertical", thumbImage: "thumbImage", minimumTrackImage: "minimumTrackImage", maximumTrackImage: "maximumTrackImage", trackImage: "trackImage", thumbSize: "thumbSize", accessibilityUnits: "accessibilityUnits", accessibilityIncrements: "accessibilityIncrements", renderStepNumber: "renderStepNumber", testID: "testID", style: "style", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", onAccessibilityTap: "onAccessibilityTap", onMagicTap: "onMagicTap", onAccessibilityEscape: "onAccessibilityEscape", role: "role", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLive: ["aria-live", "ariaLive"], ariaHidden: ["aria-hidden", "ariaHidden"], ariaBusy: ["aria-busy", "ariaBusy"], ariaChecked: ["aria-checked", "ariaChecked"], ariaDisabled: ["aria-disabled", "ariaDisabled"], ariaExpanded: ["aria-expanded", "ariaExpanded"], ariaSelected: ["aria-selected", "ariaSelected"], ariaModal: ["aria-modal", "ariaModal"], ariaValueMax: ["aria-valuemax", "ariaValueMax"], ariaValueMin: ["aria-valuemin", "ariaValueMin"], ariaValueNow: ["aria-valuenow", "ariaValueNow"], ariaValueText: ["aria-valuetext", "ariaValueText"] }, outputs: { valueChange: "valueChange", slidingStart: "slidingStart", slidingComplete: "slidingComplete", accessibilityAction: "accessibilityAction" }, usesOnChanges: true, ngImport: i0 });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SliderBase, deps: [], target: i0.ɵɵFactoryTarget.Directive });
+    static ɵdir = i0.ɵɵngDeclareDirective({ minVersion: "14.0.0", version: "22.0.8", type: SliderBase, isStandalone: true, inputs: { value: "value", minimumValue: "minimumValue", maximumValue: "maximumValue", step: "step", lowerLimit: "lowerLimit", upperLimit: "upperLimit", minimumTrackTintColor: "minimumTrackTintColor", maximumTrackTintColor: "maximumTrackTintColor", thumbTintColor: "thumbTintColor", disabled: "disabled", inverted: "inverted", tapToSeek: "tapToSeek", vertical: "vertical", thumbImage: "thumbImage", minimumTrackImage: "minimumTrackImage", maximumTrackImage: "maximumTrackImage", trackImage: "trackImage", thumbSize: "thumbSize", accessibilityUnits: "accessibilityUnits", accessibilityIncrements: "accessibilityIncrements", renderStepNumber: "renderStepNumber", testID: "testID", style: "style", nativeID: "nativeID", accessible: "accessible", accessibilityLabel: "accessibilityLabel", accessibilityHint: "accessibilityHint", accessibilityRole: "accessibilityRole", accessibilityState: "accessibilityState", accessibilityValue: "accessibilityValue", accessibilityActions: "accessibilityActions", accessibilityLabelledBy: "accessibilityLabelledBy", importantForAccessibility: "importantForAccessibility", accessibilityLiveRegion: "accessibilityLiveRegion", screenReaderFocusable: "screenReaderFocusable", accessibilityViewIsModal: "accessibilityViewIsModal", accessibilityElementsHidden: "accessibilityElementsHidden", accessibilityIgnoresInvertColors: "accessibilityIgnoresInvertColors", accessibilityLanguage: "accessibilityLanguage", accessibilityRespondsToUserInteraction: "accessibilityRespondsToUserInteraction", accessibilityShowsLargeContentViewer: "accessibilityShowsLargeContentViewer", accessibilityLargeContentTitle: "accessibilityLargeContentTitle", onAccessibilityTap: "onAccessibilityTap", onMagicTap: "onMagicTap", onAccessibilityEscape: "onAccessibilityEscape", role: "role", ariaLabel: ["aria-label", "ariaLabel"], ariaLabelledBy: ["aria-labelledby", "ariaLabelledBy"], ariaLive: ["aria-live", "ariaLive"], ariaHidden: ["aria-hidden", "ariaHidden"], ariaBusy: ["aria-busy", "ariaBusy"], ariaChecked: ["aria-checked", "ariaChecked"], ariaDisabled: ["aria-disabled", "ariaDisabled"], ariaExpanded: ["aria-expanded", "ariaExpanded"], ariaSelected: ["aria-selected", "ariaSelected"], ariaModal: ["aria-modal", "ariaModal"], ariaValueMax: ["aria-valuemax", "ariaValueMax"], ariaValueMin: ["aria-valuemin", "ariaValueMin"], ariaValueNow: ["aria-valuenow", "ariaValueNow"], ariaValueText: ["aria-valuetext", "ariaValueText"] }, outputs: { valueChange: "valueChange", slidingStart: "slidingStart", slidingComplete: "slidingComplete", accessibilityAction: "accessibilityAction" }, usesOnChanges: true, ngImport: i0 });
 }
-i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.5", ngImport: i0, type: SliderBase, decorators: [{
+i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "22.0.8", ngImport: i0, type: SliderBase, decorators: [{
             type: Directive
         }], propDecorators: { value: [{
                 type: Input