` | Optional drag area. Pointer drag adjusts value by step. |
+
+## ARIA
+
+| Part | Attribute | Value |
+|------|-----------|-------|
+| Input | `role` | `spinbutton` |
+| Input | `aria-valuenow` | Current numeric value |
+| Input | `aria-valuemin` | Minimum (if set) |
+| Input | `aria-valuemax` | Maximum (if set) |
+| Input | `aria-valuetext` | String representation of value |
+| Input | `aria-disabled` | `true` (when disabled) |
+| Input | `aria-invalid` | `true` (when invalid) |
+| Input | `aria-required` | `true` (when required) |
+| Input | `aria-readonly` | `true` (when readonly) |
+| IncrementTrigger | `aria-label` | Translated "Increment" |
+| DecrementTrigger | `aria-label` | Translated "Decrement" |
+
+## Data Attributes
+
+| Part | Attribute | Values |
+|------|-----------|--------|
+| Provider | `data-number-field` | Always present |
+| Provider | `data-disabled` | Present when disabled |
+| Provider | `data-readonly` | Present when readonly |
+| Provider | `data-required` | Present when required |
+| Provider | `data-invalid` | Present when invalid |
+| Provider | `data-focused` | Present when input is focused |
+| Provider | `data-scrubbing` | Present during scrub interaction |
+| Input | `data-number-field-input` | Always present |
+| Input | `data-disabled` | Present when disabled |
+| Input | `data-readonly` | Present when readonly |
+| Input | `data-invalid` | Present when invalid |
+| IncrementTrigger | `data-number-field-increment-trigger` | Always present |
+| IncrementTrigger | `data-disabled` | Present when disabled or at max |
+| DecrementTrigger | `data-number-field-decrement-trigger` | Always present |
+| DecrementTrigger | `data-disabled` | Present when disabled or at min |
+| Scrubber | `data-number-field-scrubber` | Always present |
+| Scrubber | `data-scrubbing` | Present during drag |
+| Scrubber | `data-disabled` | Present when disabled |
+
+## Keyboard
+
+| Key | Action |
+|-----|--------|
+| `ArrowUp` | Increment by step |
+| `ArrowDown` | Decrement by step |
+| `Shift+ArrowUp` | Increment by largeStep |
+| `Shift+ArrowDown` | Decrement by largeStep |
+| `PageUp` | Increment by largeStep |
+| `PageDown` | Decrement by largeStep |
+| `Home` | Set to minimum |
+| `End` | Set to maximum |
+
+## Behavior
+
+### Formatting
+Uses `createNumr` from glob with `NumrFormat` for locale-aware formatting and parsing. Two formatters:
+- **Display formatter** (`numr`): uses the full consumer format (style, currency, percent, etc.)
+- **Edit formatter** (`editNumr`): decimal only, no style decoration. For percent, edits 0.75 as 75.
+
+### Locale resolution
+Locale follows: prop → `Soma.translator.getLocale()` → `'en'`.
+
+### Direction resolution
+Dir follows: prop → `Soma.opts.presentation.dir` → `'ltr'`.
+
+### Decimal precision
+Uses `getDecimalPrecision(step)` to avoid floating point drift on increment/decrement (same approach as terra).
+
+### Hold to repeat
+Pressing and holding increment/decrement triggers repeats the action every 100ms.
+
+### Scrubber
+Pointer drag on the Scrubber area adjusts the value proportionally. `sensitivity` controls pixels per step (default 5). Supports horizontal and vertical directions.
+
+## Usage
+
+### Basic
+
+```svelte
+
+
+
+ -
+ +
+
+```
+
+### Currency
+
+```svelte
+
+
+```
+
+### Percentage
+
+```svelte
+
+
+
+```
+
+### With scrubber
+
+```svelte
+
+ Opacity
+
+```
+
+## Comparison with reference libraries
+
+| Feature | Ark UI | React Aria | Radix Vue | Base UI | Mantine | Soma |
+|---------|--------|------------|-----------|---------|---------|------|
+| Parts | Root, Input, Increment, Decrement, Scrubber, Label, ValueText | Hook-based | Root, Input, Increment, Decrement | Root, Input, Increment, Decrement, ScrubArea | Monolithic | Provider, Input, IncrementTrigger, DecrementTrigger, Scrubber |
+| `role="spinbutton"` | Yes | Yes | Yes | Yes | No | Yes |
+| `aria-valuenow/min/max` | Yes | Yes | Yes | Yes | No | Yes |
+| Format via glob (NumrFormat) | No (Intl direct) | No (Intl direct) | No (Intl direct) | No (Intl direct) | No (custom) | Yes (createNumr) |
+| Dual formatter (display/edit) | No | No | No | No | No | Yes |
+| Percent scaling (0.75 → 75) | No | No | No | No | No | Yes |
+| ArrowUp/Down | Yes | Yes | Yes | Yes | No | Yes |
+| Shift+Arrow (large step) | No | Yes | No | Yes | No | Yes |
+| PageUp/PageDown | Yes | Yes | Yes | No | No | Yes |
+| Home/End | Yes | Yes | Yes | No | No | Yes |
+| Mouse wheel | Yes | Yes | No | Yes | No | Future |
+| Scrubber (drag) | Yes | No | No | Yes | No | Yes |
+| Hold to repeat | Yes | Yes | Yes | Yes | Yes | Yes |
+| Decimal precision fix | Yes | Yes | No | No | No | Yes |
+| onValueCommit | Yes | No | No | Yes | No | Yes |
+| disabled/readonly/required/invalid | Yes | Yes | Yes | Yes | Yes | Yes |
+| data-scrubbing | Yes | No | No | Yes | No | Yes |
+| data-focused | Yes | No | No | Yes | No | Yes |
diff --git a/src/uix/soma/components/number-field/components/number-field-decrement-trigger.svelte b/src/uix/soma/components/number-field/components/number-field-decrement-trigger.svelte
new file mode 100644
index 000000000..25a421fff
--- /dev/null
+++ b/src/uix/soma/components/number-field/components/number-field-decrement-trigger.svelte
@@ -0,0 +1,30 @@
+
+
+{#if child}
+ {@render child({ props: mergedProps })}
+{:else}
+
{@render children?.()}
+{/if}
diff --git a/src/uix/soma/components/number-field/components/number-field-increment-trigger.svelte b/src/uix/soma/components/number-field/components/number-field-increment-trigger.svelte
new file mode 100644
index 000000000..0088cd384
--- /dev/null
+++ b/src/uix/soma/components/number-field/components/number-field-increment-trigger.svelte
@@ -0,0 +1,30 @@
+
+
+{#if child}
+ {@render child({ props: mergedProps })}
+{:else}
+
{@render children?.()}
+{/if}
diff --git a/src/uix/soma/components/number-field/components/number-field-input.svelte b/src/uix/soma/components/number-field/components/number-field-input.svelte
new file mode 100644
index 000000000..b56572e35
--- /dev/null
+++ b/src/uix/soma/components/number-field/components/number-field-input.svelte
@@ -0,0 +1,30 @@
+
+
+{#if child}
+ {@render child({ props: mergedProps })}
+{:else}
+
+{/if}
diff --git a/src/uix/soma/components/number-field/components/number-field-scrubber.svelte b/src/uix/soma/components/number-field/components/number-field-scrubber.svelte
new file mode 100644
index 000000000..a825876cd
--- /dev/null
+++ b/src/uix/soma/components/number-field/components/number-field-scrubber.svelte
@@ -0,0 +1,34 @@
+
+
+{#if child}
+ {@render child({ props: mergedProps })}
+{:else}
+
{@render children?.()}
+{/if}
diff --git a/src/uix/soma/components/number-field/components/number-field.svelte b/src/uix/soma/components/number-field/components/number-field.svelte
new file mode 100644
index 000000000..7813aade5
--- /dev/null
+++ b/src/uix/soma/components/number-field/components/number-field.svelte
@@ -0,0 +1,69 @@
+
+
+{#if child}
+ {@render child({ props: mergedProps })}
+{:else}
+
{@render children?.()}
+{/if}
diff --git a/src/uix/soma/components/number-field/exports.ts b/src/uix/soma/components/number-field/exports.ts
new file mode 100644
index 000000000..b35532613
--- /dev/null
+++ b/src/uix/soma/components/number-field/exports.ts
@@ -0,0 +1,15 @@
+export { default as Provider } from './components/number-field.svelte';
+export { default as Input } from './components/number-field-input.svelte';
+export { default as IncrementTrigger } from './components/number-field-increment-trigger.svelte';
+export { default as DecrementTrigger } from './components/number-field-decrement-trigger.svelte';
+export { default as Scrubber } from './components/number-field-scrubber.svelte';
+
+export type { NumrFormat } from './number-field-provider.svelte';
+
+export type {
+ NumberFieldProps as ProviderProps,
+ NumberFieldInputProps as InputProps,
+ NumberFieldIncrementTriggerProps as IncrementTriggerProps,
+ NumberFieldDecrementTriggerProps as DecrementTriggerProps,
+ NumberFieldScrubberProps as ScrubberProps,
+} from './types';
diff --git a/src/uix/soma/components/number-field/index.ts b/src/uix/soma/components/number-field/index.ts
new file mode 100644
index 000000000..8570a426a
--- /dev/null
+++ b/src/uix/soma/components/number-field/index.ts
@@ -0,0 +1 @@
+export * from './exports';
diff --git a/src/uix/soma/components/number-field/number-field-provider.svelte.ts b/src/uix/soma/components/number-field/number-field-provider.svelte.ts
new file mode 100644
index 000000000..bf2c9986b
--- /dev/null
+++ b/src/uix/soma/components/number-field/number-field-provider.svelte.ts
@@ -0,0 +1,492 @@
+import { watch } from 'runed';
+import { Provider, context, type WithRefOpts } from '$soma/provider';
+import { createAttrs, boolToEmptyStrOrUndef, boolToStr } from '$soma/attrs';
+import { state, readableActive, type Active, type ActiveProps, type StateProps } from '$soma/reactive';
+import type { OnChangeFn, Direction, SomaKeyboardEvent, SomaFocusEvent, SomaInputEvent } from '$soma/types';
+import { KEYS } from '$soma/keyboard';
+import { getSoma } from '$soma/core/soma.svelte';
+import { resolveSomaTranslationPath } from '$soma/core/translator.svelte';
+import { createNumr, type NumrFormat } from '@/lib';
+
+export type { NumrFormat };
+
+const attrs = createAttrs({
+ component: 'number-field',
+ parts: ['root', 'input', 'increment-trigger', 'decrement-trigger', 'scrubber'] as const,
+});
+
+// ── Helpers ──────────────────────────────────────────────────────────────────
+
+function getDecimalPrecision(n: number): number {
+ const str = String(n);
+ const dot = str.indexOf('.');
+ return dot >= 0 ? str.length - dot - 1 : 0;
+}
+
+// ── Root ─────────────────────────────────────────────────────────────────────
+
+interface NumberFieldOpts
+ extends WithRefOpts,
+ StateProps<{ value: number | undefined }>,
+ ActiveProps<{
+ min: number | undefined;
+ max: number | undefined;
+ step: number;
+ largeStep: number | undefined;
+ locale: string | undefined;
+ dir: Direction | undefined;
+ formatOptions: NumrFormat | undefined;
+ clampOnBlur: boolean;
+ allowMouseWheel: boolean;
+ disabled: boolean;
+ readonly: boolean;
+ required: boolean;
+ invalid: boolean;
+ name: string | undefined;
+ onValueCommit: OnChangeFn
| undefined;
+ }> {}
+
+export class NumberFieldProvider extends Provider {
+ static readonly ctx = context('NumberField');
+
+ static from(opts: NumberFieldOpts) {
+ return new NumberFieldProvider(opts);
+ }
+
+ readonly config = getSoma();
+ inputRef = state(null);
+
+ // Input display value
+ inputValue = $state('');
+ focused = $state(false);
+
+ // Scrub state
+ scrubbing = $state(false);
+
+ /** Resolved locale: prop → Soma.format.locale → Soma.translator.getLocale() → 'en'. */
+ readonly locale: Active;
+ /** Resolved direction: prop → Soma.dir → 'ltr'. */
+ readonly resolvedDir: Active;
+
+ private constructor(opts: NumberFieldOpts) {
+ super(opts, 'NumberField', 'root', attrs.root, NumberFieldProvider.ctx);
+
+ this.locale = readableActive(() =>
+ opts.locale.current
+ ?? this.config.translator.current.getLocale()
+ ?? 'en',
+ );
+
+ this.resolvedDir = readableActive(() =>
+ opts.dir.current
+ ?? this.config.presentation.current?.dir
+ ?? 'ltr',
+ );
+
+ // Sync inputValue with external value when not focused.
+ // Must be after locale/resolvedDir assignment since numr depends on locale.
+ watch.pre(
+ () => [opts.value.current, this.locale.current, opts.formatOptions.current] as const,
+ ([value]) => {
+ this.inputValue = this.focused
+ ? this.formatEditValue(value)
+ : this.formatValue(value);
+ },
+ );
+ }
+
+ // ── Computed ──────────────────────────────────────────────────────────────
+
+ readonly isDisabled = $derived.by(() => this.opts.disabled.current);
+ readonly isReadonly = $derived.by(() => this.opts.readonly.current);
+ readonly isRequired = $derived.by(() => this.opts.required.current);
+ readonly isInvalid = $derived.by(() => this.opts.invalid.current);
+
+ readonly step = $derived.by(() => this.opts.step.current);
+ readonly largeStep = $derived.by(() => this.opts.largeStep.current ?? this.step * 10);
+ readonly min = $derived.by(() => this.opts.min.current);
+ readonly max = $derived.by(() => this.opts.max.current);
+
+ readonly dir = $derived.by(() => this.resolvedDir.current);
+
+ /**
+ * Display formatter: uses the full consumer format (style, currency, percent...).
+ * Recreated when formatOptions or locale change.
+ */
+ readonly numr = $derived.by(() => {
+ const fmt: NumrFormat = { ...(this.opts.formatOptions.current ?? {}) };
+ return createNumr(fmt, this.locale.current);
+ });
+
+ /**
+ * Edit formatter: always decimal, no style decoration.
+ * Allows the user to edit "75" instead of "75%" or "$1,234.56".
+ * For `percent`, edit value is `value * 100`.
+ */
+ readonly editNumr = $derived.by(() => {
+ const fmt = this.opts.formatOptions.current ?? {};
+ const editFmt: NumrFormat = {
+ minDecimals: fmt.minDecimals,
+ maxDecimals: fmt.maxDecimals,
+ grouping: fmt.grouping,
+ };
+ return createNumr(editFmt, this.locale.current);
+ });
+
+ readonly atMin = $derived.by(
+ () => this.min !== undefined
+ && this.opts.value.current !== undefined
+ && this.opts.value.current <= this.min,
+ );
+ readonly atMax = $derived.by(
+ () => this.max !== undefined
+ && this.opts.value.current !== undefined
+ && this.opts.value.current >= this.max,
+ );
+
+ // ── Format / Parse ───────────────────────────────────────────────────────
+
+ /** For percent, internal 0.75 is edited as 75. */
+ toEditValue(value: number): number {
+ return this.opts.formatOptions.current?.style === 'percent' ? value * 100 : value;
+ }
+
+ fromEditValue(editValue: number): number {
+ return this.opts.formatOptions.current?.style === 'percent' ? editValue / 100 : editValue;
+ }
+
+ /** Format for display: applies style, currency, %, etc. */
+ formatValue(value: number | undefined): string {
+ if (value === undefined || Number.isNaN(value)) return '';
+ return this.numr.f(value);
+ }
+
+ /** Format for editing: pure decimal, value scaled by style. */
+ formatEditValue(value: number | undefined): string {
+ if (value === undefined || Number.isNaN(value)) return '';
+ return this.editNumr.f(this.toEditValue(value));
+ }
+
+ /** Parse edit string and convert to internal value. */
+ parseValue(raw: string): number | undefined {
+ if (!raw.trim()) return undefined;
+ const n = this.editNumr.parse(raw);
+ if (Number.isNaN(n)) return undefined;
+ return this.fromEditValue(n);
+ }
+
+ clamp(value: number): number {
+ let v = value;
+ if (this.min !== undefined) v = Math.max(this.min, v);
+ if (this.max !== undefined) v = Math.min(this.max, v);
+ return v;
+ }
+
+ round(value: number, step: number): number {
+ const precision = getDecimalPrecision(step);
+ const factor = Math.pow(10, precision);
+ return Math.round(value * factor) / factor;
+ }
+
+ commit(value: number | undefined): void {
+ if (value === undefined) {
+ this.opts.value.current = undefined;
+ this.inputValue = '';
+ return;
+ }
+ const clamped = this.clamp(this.round(value, this.step));
+ this.opts.value.current = clamped;
+ this.opts.onValueCommit.current?.(clamped);
+ this.inputValue = this.focused ? this.formatEditValue(clamped) : this.formatValue(clamped);
+ }
+
+ // ── Actions ──────────────────────────────────────────────────────────────
+
+ increment(by: number = this.step): void {
+ if (this.isDisabled || this.isReadonly) return;
+ const current = this.opts.value.current ?? 0;
+ this.commit(current + by);
+ }
+
+ decrement(by: number = this.step): void {
+ if (this.isDisabled || this.isReadonly) return;
+ const current = this.opts.value.current ?? 0;
+ this.commit(current - by);
+ }
+
+ // ── Event handlers ───────────────────────────────────────────────────────
+
+ readonly handleFocus = (_e: SomaFocusEvent): void => {
+ this.focused = true;
+ const raw = this.opts.value.current;
+ this.inputValue = raw !== undefined ? this.formatEditValue(raw) : '';
+ };
+
+ readonly handleBlur = (_e: SomaFocusEvent): void => {
+ this.focused = false;
+ const parsed = this.parseValue(this.inputValue);
+ this.commit(parsed);
+ };
+
+ readonly handleInput = (e: SomaInputEvent): void => {
+ this.inputValue = e.currentTarget.value;
+ };
+
+ readonly handleKeydown = (e: SomaKeyboardEvent): void => {
+ if (this.isDisabled || this.isReadonly) return;
+
+ switch (e.key) {
+ case KEYS.ARROW_UP:
+ e.preventDefault();
+ this.increment(e.shiftKey ? this.largeStep : this.step);
+ break;
+ case KEYS.ARROW_DOWN:
+ e.preventDefault();
+ this.decrement(e.shiftKey ? this.largeStep : this.step);
+ break;
+ case 'PageUp':
+ e.preventDefault();
+ this.increment(this.largeStep);
+ break;
+ case 'PageDown':
+ e.preventDefault();
+ this.decrement(this.largeStep);
+ break;
+ case KEYS.HOME:
+ if (this.min !== undefined) {
+ e.preventDefault();
+ this.commit(this.min);
+ }
+ break;
+ case KEYS.END:
+ if (this.max !== undefined) {
+ e.preventDefault();
+ this.commit(this.max);
+ }
+ break;
+ }
+ };
+
+ readonly props = $derived.by(() =>
+ this.assertProps({
+ ...this.baseProps,
+ 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
+ 'data-readonly': boolToEmptyStrOrUndef(this.isReadonly),
+ 'data-required': boolToEmptyStrOrUndef(this.isRequired),
+ 'data-invalid': boolToEmptyStrOrUndef(this.isInvalid),
+ 'data-focused': boolToEmptyStrOrUndef(this.focused),
+ 'data-scrubbing': boolToEmptyStrOrUndef(this.scrubbing),
+ } as const),
+ );
+}
+
+// ── Input ────────────────────────────────────────────────────────────────────
+
+interface NumberFieldInputOpts extends WithRefOpts {}
+
+export class NumberFieldInputProvider extends Provider {
+ static from(opts: NumberFieldInputOpts) {
+ return new NumberFieldInputProvider(opts);
+ }
+
+ readonly provider: NumberFieldProvider;
+
+ private constructor(opts: NumberFieldInputOpts) {
+ super(opts, 'NumberField', 'input', attrs.input);
+ this.provider = NumberFieldProvider.ctx.get();
+ }
+
+ readonly props = $derived.by(() =>
+ this.assertProps({
+ ...this.baseProps,
+ role: 'spinbutton' as const,
+ inputmode: 'decimal' as const,
+ autocomplete: 'off' as const,
+ autocorrect: 'off' as const,
+ spellcheck: false,
+ dir: this.provider.dir,
+ value: this.provider.inputValue,
+ 'aria-valuenow': this.provider.opts.value.current,
+ 'aria-valuemin': this.provider.opts.min.current,
+ 'aria-valuemax': this.provider.opts.max.current,
+ 'aria-valuetext': this.provider.opts.value.current !== undefined
+ ? String(this.provider.opts.value.current)
+ : undefined,
+ 'aria-required': boolToStr(this.provider.isRequired),
+ 'aria-disabled': boolToStr(this.provider.isDisabled),
+ 'aria-readonly': boolToStr(this.provider.isReadonly),
+ 'aria-invalid': boolToStr(this.provider.isInvalid),
+ disabled: this.provider.isDisabled || undefined,
+ readonly: this.provider.isReadonly || undefined,
+ required: this.provider.isRequired || undefined,
+ name: this.provider.opts.name.current || undefined,
+ 'data-disabled': boolToEmptyStrOrUndef(this.provider.isDisabled),
+ 'data-readonly': boolToEmptyStrOrUndef(this.provider.isReadonly),
+ 'data-invalid': boolToEmptyStrOrUndef(this.provider.isInvalid),
+ onfocus: this.provider.handleFocus,
+ onblur: this.provider.handleBlur,
+ oninput: this.provider.handleInput,
+ onkeydown: this.provider.handleKeydown,
+ } as const),
+ );
+}
+
+// ── IncrementTrigger ─────────────────────────────────────────────────────────
+
+interface NumberFieldIncrementTriggerOpts extends WithRefOpts {}
+
+export class NumberFieldIncrementTriggerProvider extends Provider {
+ static from(opts: NumberFieldIncrementTriggerOpts) {
+ return new NumberFieldIncrementTriggerProvider(opts);
+ }
+
+ readonly provider: NumberFieldProvider;
+
+ private constructor(opts: NumberFieldIncrementTriggerOpts) {
+ super(opts, 'NumberField', 'increment-trigger', attrs['increment-trigger']);
+ this.provider = NumberFieldProvider.ctx.get();
+ }
+
+ readonly isDisabled = $derived.by(() => this.provider.isDisabled || this.provider.atMax);
+
+ readonly handleClick = () => { this.provider.increment(); };
+
+ readonly props = $derived.by(() =>
+ this.assertProps({
+ ...this.baseProps,
+ type: 'button' as const,
+ tabindex: -1,
+ disabled: this.isDisabled || undefined,
+ 'aria-label':
+ resolveSomaTranslationPath('soma.number-field.increment', this.provider.config.translator.current, 'Increment'),
+ 'aria-disabled': boolToStr(this.isDisabled),
+ 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
+ onclick: this.handleClick,
+ } as const),
+ );
+}
+
+// ── DecrementTrigger ─────────────────────────────────────────────────────────
+
+interface NumberFieldDecrementTriggerOpts extends WithRefOpts {}
+
+export class NumberFieldDecrementTriggerProvider extends Provider {
+ static from(opts: NumberFieldDecrementTriggerOpts) {
+ return new NumberFieldDecrementTriggerProvider(opts);
+ }
+
+ readonly provider: NumberFieldProvider;
+
+ private constructor(opts: NumberFieldDecrementTriggerOpts) {
+ super(opts, 'NumberField', 'decrement-trigger', attrs['decrement-trigger']);
+ this.provider = NumberFieldProvider.ctx.get();
+ }
+
+ readonly isDisabled = $derived.by(() => this.provider.isDisabled || this.provider.atMin);
+
+ readonly handleClick = () => { this.provider.decrement(); };
+
+ readonly props = $derived.by(() =>
+ this.assertProps({
+ ...this.baseProps,
+ type: 'button' as const,
+ tabindex: -1,
+ disabled: this.isDisabled || undefined,
+ 'aria-label':
+ resolveSomaTranslationPath('soma.number-field.decrement', this.provider.config.translator.current, 'Decrement'),
+ 'aria-disabled': boolToStr(this.isDisabled),
+ 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
+ onclick: this.handleClick,
+ } as const),
+ );
+}
+
+// ── Scrubber ─────────────────────────────────────────────────────────────────
+
+interface NumberFieldScrubberOpts
+ extends WithRefOpts,
+ ActiveProps<{
+ direction: 'horizontal' | 'vertical';
+ sensitivity: number;
+ }> {}
+
+export class NumberFieldScrubberProvider extends Provider {
+ static from(opts: NumberFieldScrubberOpts) {
+ return new NumberFieldScrubberProvider(opts);
+ }
+
+ readonly provider: NumberFieldProvider;
+ private startX = 0;
+ private startY = 0;
+ private startValue = 0;
+
+ private constructor(opts: NumberFieldScrubberOpts) {
+ super(opts, 'NumberField', 'scrubber', attrs.scrubber);
+ this.provider = NumberFieldProvider.ctx.get();
+ }
+
+ private get isDisabled(): boolean {
+ return this.provider.isDisabled || this.provider.isReadonly;
+ }
+
+ readonly onpointerdown = (e: PointerEvent) => {
+ if (this.isDisabled || e.button !== 0) return;
+ e.preventDefault();
+
+ this.provider.scrubbing = true;
+ this.startX = e.clientX;
+ this.startY = e.clientY;
+ this.startValue = this.provider.opts.value.current ?? 0;
+
+ (e.currentTarget as HTMLElement).setPointerCapture(e.pointerId);
+ };
+
+ readonly onpointermove = (e: PointerEvent) => {
+ if (!this.provider.scrubbing) return;
+ e.preventDefault();
+
+ const sensitivity = this.opts.sensitivity.current;
+ const step = this.provider.step;
+ const isHorizontal = this.opts.direction.current === 'horizontal';
+
+ const delta = isHorizontal
+ ? e.clientX - this.startX
+ : -(e.clientY - this.startY);
+
+ const steps = Math.round(delta / sensitivity);
+ const newValue = this.startValue + steps * step;
+ this.provider.commit(newValue);
+ };
+
+ readonly onpointerup = () => {
+ if (!this.provider.scrubbing) return;
+ this.provider.scrubbing = false;
+ };
+
+ readonly onlostpointercapture = () => {
+ if (this.provider.scrubbing) {
+ this.provider.scrubbing = false;
+ }
+ };
+
+ readonly props = $derived.by(() =>
+ this.assertProps({
+ ...this.baseProps,
+ 'data-scrubbing': boolToEmptyStrOrUndef(this.provider.scrubbing),
+ 'data-disabled': boolToEmptyStrOrUndef(this.isDisabled),
+ style: {
+ cursor: this.isDisabled
+ ? 'default'
+ : this.opts.direction.current === 'horizontal'
+ ? 'ew-resize'
+ : 'ns-resize',
+ 'user-select': this.provider.scrubbing ? 'none' : undefined,
+ 'touch-action': 'none',
+ },
+ onpointerdown: this.onpointerdown,
+ onpointermove: this.onpointermove,
+ onpointerup: this.onpointerup,
+ onlostpointercapture: this.onlostpointercapture,
+ } as const),
+ );
+}
diff --git a/src/uix/soma/components/number-field/types.ts b/src/uix/soma/components/number-field/types.ts
new file mode 100644
index 000000000..a159dc282
--- /dev/null
+++ b/src/uix/soma/components/number-field/types.ts
@@ -0,0 +1,75 @@
+import type { WithChild, Without, OnChangeFn, Direction } from '$soma/types';
+import type { PrimitiveDivAttributes, PrimitiveButtonAttributes, PrimitiveInputAttributes } from '$soma/types';
+import type { NumrFormat } from './number-field-provider.svelte';
+
+export type NumberFieldProps = WithChild<{
+ /** Unique identifier. Auto-generated if omitted. */
+ id?: string;
+ /** Current numeric value. Bindable. @default undefined */
+ value?: number;
+ /**
+ * Number format definition (style, currency, unit, decimals, grouping, etc.).
+ * Uses NumrFormat from glob. Determines display formatting and edit parsing.
+ * @see NumrFormat
+ */
+ formatOptions?: NumrFormat;
+ /** Minimum allowed value. */
+ min?: number;
+ /** Maximum allowed value. */
+ max?: number;
+ /** Increment/decrement amount. @default 1 */
+ step?: number;
+ /** Large step for Shift+Arrow or PageUp/PageDown. @default step * 10 */
+ largeStep?: number;
+ /** BCP 47 locale. Resolved via: prop → Soma.format.locale → 'en'. */
+ locale?: string;
+ /** Text direction. Resolved via: prop → Soma.dir → 'ltr'. */
+ dir?: Direction;
+ /** Allow mouse wheel to increment/decrement when focused. @default false */
+ allowMouseWheel?: boolean;
+ /** Clamp value to min/max on blur. @default true */
+ clampOnBlur?: boolean;
+ /** Disables all interaction. @default false */
+ disabled?: boolean;
+ /** Prevents value changes but keeps focusable. @default false */
+ readonly?: boolean;
+ /** Marks as required for form validation. @default false */
+ required?: boolean;
+ /** Marks as invalid for form validation. @default false */
+ invalid?: boolean;
+ /** Form submission field name. */
+ name?: string;
+ /** Callback fired when value changes. */
+ onValueChange?: OnChangeFn;
+ /** Callback fired when value is committed (on blur or Enter). */
+ onValueCommit?: OnChangeFn;
+}> &
+ Without;
+
+export type NumberFieldInputProps = WithChild<{
+ /** Unique identifier. Auto-generated if omitted. */
+ id?: string;
+}> &
+ Without;
+
+export type NumberFieldIncrementTriggerProps = WithChild<{
+ /** Unique identifier. Auto-generated if omitted. */
+ id?: string;
+}> &
+ Without;
+
+export type NumberFieldDecrementTriggerProps = WithChild<{
+ /** Unique identifier. Auto-generated if omitted. */
+ id?: string;
+}> &
+ Without;
+
+export type NumberFieldScrubberProps = WithChild<{
+ /** Unique identifier. Auto-generated if omitted. */
+ id?: string;
+ /** Drag direction. @default 'horizontal' */
+ direction?: 'horizontal' | 'vertical';
+ /** Pixels per step during scrub. @default 5 */
+ sensitivity?: number;
+}> &
+ Without;
diff --git a/src/uix/soma/components/pagination/components/pagination.svelte b/src/uix/soma/components/pagination/components/pagination.svelte
index 5752ff8c3..bb7ec2efa 100644
--- a/src/uix/soma/components/pagination/components/pagination.svelte
+++ b/src/uix/soma/components/pagination/components/pagination.svelte
@@ -31,14 +31,16 @@
),
page: writableActive(
() => page,
- (v) => (page = v),
+ (v) => {
+ page = v;
+ onPageChange(v);
+ },
),
count: readableActive(() => count),
pageSize: readableActive(() => pageSize),
siblingCount: readableActive(() => siblingCount),
boundaryCount: readableActive(() => boundaryCount),
disabled: readableActive(() => disabled),
- onPageChange: readableActive(() => onPageChange),
});
const mergedProps = $derived(mergeProps(restProps, state.props));
diff --git a/src/uix/soma/components/pagination/pagination-provider.svelte.ts b/src/uix/soma/components/pagination/pagination-provider.svelte.ts
index b674c367a..f51f50cba 100644
--- a/src/uix/soma/components/pagination/pagination-provider.svelte.ts
+++ b/src/uix/soma/components/pagination/pagination-provider.svelte.ts
@@ -1,8 +1,9 @@
import { Provider, context, type WithRefOpts } from '$soma/provider';
import { createAttrs, boolToEmptyStrOrUndef } from '$soma/attrs';
import { type Active, type ActiveProps, type StateProps } from '$soma/reactive';
-import type { OnChangeFn, SomaMouseEvent } from '$soma/types';
-import { Soma } from '$soma/core/soma.svelte';
+import type { SomaMouseEvent } from '$soma/types';
+import { getSoma } from '$soma/core/soma.svelte';
+import { resolveSomaTranslationPath } from '$soma/core/translator.svelte';
const attrs = createAttrs({
component: 'pagination',
@@ -102,7 +103,6 @@ interface PaginationOpts
siblingCount: number;
boundaryCount: number;
disabled: boolean;
- onPageChange: OnChangeFn;
}> {}
export class PaginationProvider extends Provider {
@@ -112,11 +112,11 @@ export class PaginationProvider extends Provider {
return new PaginationProvider(opts);
}
- readonly soma: Soma | undefined;
+ readonly config = getSoma();
private constructor(opts: PaginationOpts) {
super(opts, 'Pagination', 'root', attrs.root, PaginationProvider.ctx);
- this.soma = Soma.getOr();
+
}
readonly totalPages = $derived.by(() => {
@@ -152,7 +152,6 @@ export class PaginationProvider extends Provider {
if (page < 1 || page > this.totalPages) return;
if (page === this.opts.page.current) return;
this.opts.page.current = page;
- this.opts.onPageChange.current(page);
}
goToPrevPage() {
@@ -182,7 +181,7 @@ export class PaginationProvider extends Provider {
...this.baseProps,
role: 'navigation' as const,
'aria-label':
- this.soma?.translate('pagination.label', 'Pagination') ?? 'Pagination',
+ resolveSomaTranslationPath('soma.pagination.label', this.config.translator.current, 'Pagination'),
'data-disabled': boolToEmptyStrOrUndef(this.opts.disabled.current),
} as const),
);
@@ -201,20 +200,20 @@ export class PaginationPrevTriggerProvider extends Provider this.opts.disabled.current || this.root.opts.disabled.current || !this.root.hasPrevPage,
+ () => this.opts.disabled.current || this.provider.opts.disabled.current || !this.provider.hasPrevPage,
);
readonly onclick = (_e: SomaMouseEvent) => {
if (this.isDisabled) return;
- this.root.goToPrevPage();
+ this.provider.goToPrevPage();
};
readonly props = $derived.by(() =>
@@ -222,7 +221,7 @@ export class PaginationPrevTriggerProvider extends Provider this.opts.disabled.current || this.root.opts.disabled.current || !this.root.hasNextPage,
+ () => this.opts.disabled.current || this.provider.opts.disabled.current || !this.provider.hasNextPage,
);
readonly onclick = (_e: SomaMouseEvent) => {
if (this.isDisabled) return;
- this.root.goToNextPage();
+ this.provider.goToNextPage();
};
readonly props = $derived.by(() =>
@@ -264,7 +263,7 @@ export class PaginationNextTriggerProvider extends Provider {
return new PaginationItemProvider(opts);
}
- readonly root: PaginationProvider;
+ readonly provider: PaginationProvider;
private constructor(opts: PaginationItemOpts) {
super(opts, 'Pagination', 'item', attrs.item);
- this.root = PaginationProvider.ctx.get();
+ this.provider = PaginationProvider.ctx.get();
}
readonly isSelected = $derived.by(
- () => this.root.opts.page.current === this.opts.value.current,
+ () => this.provider.opts.page.current === this.opts.value.current,
);
- readonly isDisabled = $derived.by(() => this.root.opts.disabled.current);
+ readonly isDisabled = $derived.by(() => this.provider.opts.disabled.current);
readonly onclick = (_e: SomaMouseEvent) => {
if (this.isDisabled) return;
- this.root.setPage(this.opts.value.current);
+ this.provider.setPage(this.opts.value.current);
};
readonly props = $derived.by(() =>
diff --git a/src/uix/soma/components/popover/components/popover-content.svelte b/src/uix/soma/components/popover/components/popover-content.svelte
index cdccedc9d..42d0e89b4 100644
--- a/src/uix/soma/components/popover/components/popover-content.svelte
+++ b/src/uix/soma/components/popover/components/popover-content.svelte
@@ -3,13 +3,13 @@
import { mergeProps } from '$soma/props';
import { styleToString } from '$soma/css';
import { createId } from '$soma/id';
- import { Soma } from '$soma/core/soma.svelte';
+ import { getSoma } from '$soma/core/soma.svelte';
import { PopoverContentProvider } from '../popover-provider.svelte';
import type { PopoverContentProps } from '../types';
import { noop } from '$lib/util/funcs';
const uid = $props.id();
- const soma = Soma.getOr();
+ const soma = getSoma();
let {
ref = $bindable(null),
@@ -40,7 +40,7 @@
interactOutsideBehavior,
onFocusOutside = noop,
onPlaced = noop,
- dir = soma?.dir.current ?? 'ltr',
+ dir = soma.presentation.current?.dir ?? 'ltr',
style = null,
children,
child,
@@ -94,10 +94,10 @@
{#if state.isPresent || forceMount}
{#if child}
- {@render child({ open: state.root.opts.open.current, props: mergedProps })}
+ {@render child({ open: state.provider.opts.open.current, props: mergedProps })}
{:else}
- {@render children?.({ open: state.root.opts.open.current })}
+ {@render children?.({ open: state.provider.opts.open.current })}
{/if}
;
- onOpenChange: OnChangeFn;
onOpenChangeComplete: OnChangeFn;
}> {}
@@ -75,7 +73,7 @@ export class SelectProvider extends Provider {
return new SelectProvider(opts);
}
- readonly soma: Soma | undefined;
+ readonly config = getSoma();
readonly floatingProvider: FloatingProvider;
readonly contentPresence: Presence;
readonly typeahead = new Typeahead();
@@ -90,7 +88,7 @@ export class SelectProvider extends Provider {
private constructor(opts: SelectOpts) {
super(opts, 'Select', 'root', attrs.root, SelectProvider.ctx);
- this.soma = Soma.getOr();
+
this.floatingProvider = FloatingProvider.create();
this.contentPresence = new Presence({
@@ -126,13 +124,11 @@ export class SelectProvider extends Provider {
}
this.opts.value.current = next;
- this.opts.onValueChange.current(next);
}
handleOpen() {
if (this.opts.disabled.current) return;
this.opts.open.current = true;
- this.opts.onOpenChange.current(true);
// Scroll selected item into view after content mounts
requestAnimationFrame(() => {
@@ -146,7 +142,6 @@ export class SelectProvider extends Provider {
this.typeahead.reset();
this.highlightedId = '';
this.opts.open.current = false;
- this.opts.onOpenChange.current(false);
this.triggerRef.current?.focus();
}
@@ -209,13 +204,13 @@ export class SelectTriggerProvider extends Provider {
return new SelectTriggerProvider(opts);
}
- readonly root: SelectProvider;
+ readonly provider: SelectProvider;
private constructor(opts: SelectTriggerOpts) {
super(opts, 'Select', 'trigger', attrs.trigger);
- this.root = SelectProvider.ctx.get();
- this.root.triggerId.current = opts.id.current;
- this.root.triggerRef = opts.ref;
+ this.provider = SelectProvider.ctx.get();
+ this.provider.triggerId.current = opts.id.current;
+ this.provider.triggerRef = opts.ref;
FloatingAnchor.create({
id: opts.id,
@@ -224,16 +219,16 @@ export class SelectTriggerProvider extends Provider {
}
readonly onclick = () => {
- this.root.toggle();
+ this.provider.toggle();
};
readonly onkeydown = (e: SomaKeyboardEvent) => {
if (e.key === KEYS.ARROW_DOWN || e.key === KEYS.ARROW_UP) {
e.preventDefault();
- this.root.handleOpen();
+ this.provider.handleOpen();
} else if (e.key === KEYS.ENTER || e.key === KEYS.SPACE) {
e.preventDefault();
- this.root.toggle();
+ this.provider.toggle();
}
};
@@ -243,14 +238,14 @@ export class SelectTriggerProvider extends Provider {
type: 'button' as const,
role: 'combobox' as const,
'aria-haspopup': 'listbox' as const,
- 'aria-expanded': this.root.opts.open.current,
- 'aria-controls': this.root.contentId.current || undefined,
- 'aria-activedescendant': this.root.highlightedId || undefined,
- 'aria-required': this.root.opts.required.current || undefined,
- 'data-state': getDataOpenClosed(this.root.opts.open.current),
- 'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled.current),
- 'data-placeholder': this.root.opts.value.current.length === 0 ? '' : undefined,
- disabled: this.root.opts.disabled.current || undefined,
+ 'aria-expanded': this.provider.opts.open.current,
+ 'aria-controls': this.provider.contentId.current || undefined,
+ 'aria-activedescendant': this.provider.highlightedId || undefined,
+ 'aria-required': this.provider.opts.required.current || undefined,
+ 'data-state': getDataOpenClosed(this.provider.opts.open.current),
+ 'data-disabled': boolToEmptyStrOrUndef(this.provider.opts.disabled.current),
+ 'data-placeholder': this.provider.opts.value.current.length === 0 ? '' : undefined,
+ disabled: this.provider.opts.disabled.current || undefined,
onclick: this.onclick,
onkeydown: this.onkeydown,
} as const),
@@ -266,23 +261,23 @@ export class SelectValueProvider extends Provider {
return new SelectValueProvider(opts);
}
- readonly root: SelectProvider;
+ readonly provider: SelectProvider;
private constructor(opts: SelectValueOpts) {
super(opts, 'Select', 'value', attrs.value);
- this.root = SelectProvider.ctx.get();
+ this.provider = SelectProvider.ctx.get();
}
readonly displayText = $derived.by(() => {
- const val = this.root.opts.value.current;
+ const val = this.provider.opts.value.current;
if (val.length === 0) return this.opts.placeholder.current;
- return this.root.getDisplayText();
+ return this.provider.getDisplayText();
});
readonly props = $derived.by(() =>
this.assertProps({
...this.baseProps,
- 'data-placeholder': this.root.opts.value.current.length === 0 ? '' : undefined,
+ 'data-placeholder': this.provider.opts.value.current.length === 0 ? '' : undefined,
} as const),
);
}
@@ -317,17 +312,17 @@ export class SelectContentProvider extends Provider {
return new SelectContentProvider(opts);
}
- readonly root: SelectProvider;
+ readonly provider: SelectProvider;
readonly floating: FloatingContent;
readonly dismissal: Dismissal;
readonly scrollLock: ScrollLock;
private constructor(opts: SelectContentOpts) {
super(opts, 'Select', 'content', attrs.content, undefined, (el) => {
- this.root.setContentRef(el);
+ this.provider.setContentRef(el);
});
- this.root = SelectProvider.ctx.get();
- this.root.contentId.current = opts.id.current;
+ this.provider = SelectProvider.ctx.get();
+ this.provider.contentId.current = opts.id.current;
// Floating
this.floating = FloatingContent.create({
@@ -348,22 +343,22 @@ export class SelectContentProvider extends Provider {
onPlaced: readableActive(() => () => {}),
dir: opts.dir,
style: opts.style,
- enabled: readableActive(() => this.root.opts.open.current),
+ enabled: readableActive(() => this.provider.opts.open.current),
customAnchor: readableActive(() => null),
});
// Dismissal — always close on outside click
this.dismissal = Dismissal.use({
ref: readableActive(() => opts.ref.current),
- enabled: readableActive(() => this.root.opts.open.current),
+ enabled: readableActive(() => this.provider.opts.open.current),
onEscapeKeydown: readableActive(() => (e: KeyboardEvent) => {
opts.onEscapeKeydown.current(e);
- if (!e.defaultPrevented) this.root.handleClose();
+ if (!e.defaultPrevented) this.provider.handleClose();
}),
escapeKeydownBehavior: opts.escapeKeydownBehavior,
onInteractOutside: readableActive(() => (e: PointerEvent) => {
opts.onInteractOutside.current(e);
- if (!e.defaultPrevented) this.root.handleClose();
+ if (!e.defaultPrevented) this.provider.handleClose();
}),
interactOutsideBehavior: opts.interactOutsideBehavior,
onFocusOutside: readableActive(() => () => {}),
@@ -373,11 +368,11 @@ export class SelectContentProvider extends Provider {
// Scroll lock
this.scrollLock = new ScrollLock();
$effect(() => {
- this.scrollLock.locked.current = this.root.opts.open.current && opts.preventScroll.current;
+ this.scrollLock.locked.current = this.provider.opts.open.current && opts.preventScroll.current;
});
}
- readonly isPresent = $derived.by(() => this.root.contentPresence.isPresent);
+ readonly isPresent = $derived.by(() => this.provider.contentPresence.isPresent);
readonly wrapperProps = $derived.by(() => ({
...this.floating.wrapperProps,
@@ -391,10 +386,10 @@ export class SelectContentProvider extends Provider {
const container = this.opts.ref.current;
if (!container) return;
- const items = this.root.getItems(container);
+ const items = this.provider.getItems(container);
const active = document.activeElement as HTMLElement;
const currentIndex = items.indexOf(active);
- const loop = this.root.opts.loop.current;
+ const loop = this.provider.opts.loop.current;
let targetIndex = -1;
@@ -417,15 +412,15 @@ export class SelectContentProvider extends Provider {
} else if (e.key === KEYS.TAB) {
// Tab closes select (returns focus to trigger)
e.preventDefault();
- this.root.handleClose();
+ this.provider.handleClose();
return;
} else {
// Typeahead
- const match = this.root.typeahead.handle(e.key, items);
+ const match = this.provider.typeahead.handle(e.key, items);
if (match) {
match.focus();
- match.scrollIntoView({ block: this.root.opts.scrollAlignment.current });
- this.root.highlightedId = match.id;
+ match.scrollIntoView({ block: this.provider.opts.scrollAlignment.current });
+ this.provider.highlightedId = match.id;
}
return;
}
@@ -433,8 +428,8 @@ export class SelectContentProvider extends Provider {
if (targetIndex >= 0 && items[targetIndex]) {
const target = items[targetIndex];
target.focus();
- target.scrollIntoView({ block: this.root.opts.scrollAlignment.current });
- this.root.highlightedId = target.id;
+ target.scrollIntoView({ block: this.provider.opts.scrollAlignment.current });
+ this.provider.highlightedId = target.id;
}
};
@@ -442,10 +437,10 @@ export class SelectContentProvider extends Provider {
this.assertProps({
...this.baseProps,
role: 'listbox' as const,
- 'aria-multiselectable': this.root.opts.type.current === 'multiple' || undefined,
- 'data-state': getDataOpenClosed(this.root.opts.open.current),
+ 'aria-multiselectable': this.provider.opts.type.current === 'multiple' || undefined,
+ 'data-state': getDataOpenClosed(this.provider.opts.open.current),
...this.floating.props,
- ...this.root.contentPresence.transitionAttrs,
+ ...this.provider.contentPresence.transitionAttrs,
...this.dismissal.props,
tabindex: -1,
onkeydown: this.onkeydown,
@@ -489,27 +484,27 @@ export class SelectItemProvider extends Provider {
return new SelectItemProvider(opts);
}
- readonly root: SelectProvider;
+ readonly provider: SelectProvider;
private constructor(opts: SelectItemOpts) {
super(opts, 'Select', 'item', attrs.item);
- this.root = SelectProvider.ctx.get();
+ this.provider = SelectProvider.ctx.get();
}
readonly isSelected = $derived.by(() =>
- this.root.isSelected(this.opts.value.current),
+ this.provider.isSelected(this.opts.value.current),
);
readonly onclick = () => {
if (this.opts.disabled.current) return;
- this.root.selectItem(this.opts.value.current);
+ this.provider.selectItem(this.opts.value.current);
};
readonly onkeydown = (e: SomaKeyboardEvent) => {
if (this.opts.disabled.current) return;
if (e.key === KEYS.ENTER || e.key === KEYS.SPACE) {
e.preventDefault();
- this.root.selectItem(this.opts.value.current);
+ this.provider.selectItem(this.opts.value.current);
}
};
diff --git a/src/uix/soma/components/slider/components/slider-thumb.svelte b/src/uix/soma/components/slider/components/slider-thumb.svelte
index 93880d2f9..5db7ecbc5 100644
--- a/src/uix/soma/components/slider/components/slider-thumb.svelte
+++ b/src/uix/soma/components/slider/components/slider-thumb.svelte
@@ -30,7 +30,7 @@
{:else}
{@render children?.()}
- {#if state.root.opts.name.current}
+ {#if state.provider.opts.name.current}
diff --git a/src/uix/soma/components/slider/components/slider.svelte b/src/uix/soma/components/slider/components/slider.svelte
index 841331a37..3ebad61ea 100644
--- a/src/uix/soma/components/slider/components/slider.svelte
+++ b/src/uix/soma/components/slider/components/slider.svelte
@@ -2,13 +2,13 @@
import { readableActive, writableActive } from '$soma/reactive';
import { mergeProps } from '$soma/props';
import { createId } from '$soma/id';
- import { Soma } from '$soma/core/soma.svelte';
+ import { getSoma } from '$soma/core/soma.svelte';
import { SliderProvider } from '../slider-provider.svelte';
import type { SliderProps } from '../types';
import { noop } from '$lib/util/funcs';
const uid = $props.id();
- const soma = Soma.getOr();
+ const soma = getSoma();
let {
ref = $bindable(null),
@@ -22,7 +22,7 @@
step = 1,
orientation = 'horizontal',
disabled = false,
- dir = soma?.dir.current ?? 'ltr',
+ dir = soma.presentation.current?.dir ?? 'ltr',
name = '',
children,
child,
@@ -33,8 +33,13 @@
id: readableActive(() => id),
ref: writableActive(() => ref, (v) => (ref = v)),
type: readableActive(() => type),
- value: writableActive(() => value, (v) => (value = v)),
- onValueChange: readableActive(() => onValueChange),
+ value: writableActive(
+ () => value,
+ (v) => {
+ value = v;
+ onValueChange(v);
+ },
+ ),
onValueCommit: readableActive(() => onValueCommit),
min: readableActive(() => min),
max: readableActive(() => max),
diff --git a/src/uix/soma/components/slider/slider-provider.svelte.ts b/src/uix/soma/components/slider/slider-provider.svelte.ts
index e5bf29e94..37f4789f1 100644
--- a/src/uix/soma/components/slider/slider-provider.svelte.ts
+++ b/src/uix/soma/components/slider/slider-provider.svelte.ts
@@ -42,7 +42,6 @@ interface SliderOpts
disabled: boolean;
dir: Direction;
name: string;
- onValueChange: OnChangeFn;
onValueCommit: OnChangeFn;
}> {}
@@ -79,7 +78,6 @@ export class SliderProvider extends Provider {
}
this.opts.value.current = values;
- this.opts.onValueChange.current(values);
}
commitValue() {
@@ -174,20 +172,20 @@ export class SliderRangeProvider extends Provider {
return new SliderRangeProvider(opts);
}
- readonly root: SliderProvider;
+ readonly provider: SliderProvider;
private constructor(opts: SliderRangeOpts) {
super(opts, 'Slider', 'range', attrs.range);
- this.root = SliderProvider.ctx.get();
+ this.provider = SliderProvider.ctx.get();
}
readonly rangeStyle = $derived.by(() => {
- const values = this.root.opts.value.current;
- const isHorizontal = this.root.opts.orientation.current === 'horizontal';
+ const values = this.provider.opts.value.current;
+ const isHorizontal = this.provider.opts.orientation.current === 'horizontal';
const min = Math.min(...values);
const max = Math.max(...values);
- const startPct = this.root.getPercent(values.length > 1 ? min : this.root.opts.min.current);
- const endPct = this.root.getPercent(max);
+ const startPct = this.provider.getPercent(values.length > 1 ? min : this.provider.opts.min.current);
+ const endPct = this.provider.getPercent(max);
if (isHorizontal) {
return { left: `${startPct}%`, width: `${endPct - startPct}%` };
@@ -198,8 +196,8 @@ export class SliderRangeProvider extends Provider {
readonly props = $derived.by(() =>
this.assertProps({
...this.baseProps,
- 'data-orientation': this.root.opts.orientation.current,
- 'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+ 'data-orientation': this.provider.opts.orientation.current,
+ 'data-disabled': boolToEmptyStrOrUndef(this.provider.opts.disabled.current),
style: {
position: 'absolute',
...this.rangeStyle,
@@ -217,28 +215,28 @@ export class SliderThumbProvider extends Provider {
return new SliderThumbProvider(opts);
}
- readonly root: SliderProvider;
+ readonly provider: SliderProvider;
private constructor(opts: SliderThumbOpts) {
super(opts, 'Slider', 'thumb', attrs.thumb);
- this.root = SliderProvider.ctx.get();
+ this.provider = SliderProvider.ctx.get();
}
readonly value = $derived.by(() =>
- this.root.opts.value.current[this.opts.index.current] ?? this.root.opts.min.current,
+ this.provider.opts.value.current[this.opts.index.current] ?? this.provider.opts.min.current,
);
- readonly percent = $derived.by(() => this.root.getPercent(this.value));
+ readonly percent = $derived.by(() => this.provider.getPercent(this.value));
readonly onkeydown = (e: KeyboardEvent) => {
- if (this.root.opts.disabled.current) return;
- const step = this.root.opts.step.current;
+ if (this.provider.opts.disabled.current) return;
+ const step = this.provider.opts.step.current;
const bigStep = step * 10;
const index = this.opts.index.current;
let delta = 0;
- const isHorizontal = this.root.opts.orientation.current === 'horizontal';
- const isRtl = this.root.opts.dir.current === 'rtl';
+ const isHorizontal = this.provider.opts.orientation.current === 'horizontal';
+ const isRtl = this.provider.opts.dir.current === 'rtl';
if (e.key === KEYS.ARROW_RIGHT || e.key === KEYS.ARROW_UP) {
delta = (isHorizontal && isRtl) ? -step : step;
@@ -249,26 +247,26 @@ export class SliderThumbProvider extends Provider {
} else if (e.key === 'PageDown') {
delta = -bigStep;
} else if (e.key === KEYS.HOME) {
- this.root.updateValue(index, this.root.opts.min.current);
- this.root.commitValue();
+ this.provider.updateValue(index, this.provider.opts.min.current);
+ this.provider.commitValue();
e.preventDefault();
return;
} else if (e.key === KEYS.END) {
- this.root.updateValue(index, this.root.opts.max.current);
- this.root.commitValue();
+ this.provider.updateValue(index, this.provider.opts.max.current);
+ this.provider.commitValue();
e.preventDefault();
return;
}
if (delta !== 0) {
e.preventDefault();
- this.root.updateValue(index, this.value + delta);
- this.root.commitValue();
+ this.provider.updateValue(index, this.value + delta);
+ this.provider.commitValue();
}
};
readonly thumbStyle = $derived.by(() => {
- const isHorizontal = this.root.opts.orientation.current === 'horizontal';
+ const isHorizontal = this.provider.opts.orientation.current === 'horizontal';
if (isHorizontal) return { left: `${this.percent}%`, top: '50%', transform: 'translate(-50%, -50%)' };
return { bottom: `${this.percent}%`, left: '50%', transform: 'translate(-50%, 50%)' };
});
@@ -277,14 +275,14 @@ export class SliderThumbProvider extends Provider {
this.assertProps({
...this.baseProps,
role: 'slider' as const,
- tabindex: this.root.opts.disabled.current ? undefined : 0,
- 'aria-valuemin': this.root.opts.min.current,
- 'aria-valuemax': this.root.opts.max.current,
+ tabindex: this.provider.opts.disabled.current ? undefined : 0,
+ 'aria-valuemin': this.provider.opts.min.current,
+ 'aria-valuemax': this.provider.opts.max.current,
'aria-valuenow': this.value,
- 'aria-orientation': this.root.opts.orientation.current,
- 'aria-disabled': this.root.opts.disabled.current || undefined,
- 'data-orientation': this.root.opts.orientation.current,
- 'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+ 'aria-orientation': this.provider.opts.orientation.current,
+ 'aria-disabled': this.provider.opts.disabled.current || undefined,
+ 'data-orientation': this.provider.opts.orientation.current,
+ 'data-disabled': boolToEmptyStrOrUndef(this.provider.opts.disabled.current),
style: { position: 'absolute', ...this.thumbStyle },
onkeydown: this.onkeydown,
} as const),
@@ -292,11 +290,11 @@ export class SliderThumbProvider extends Provider {
readonly inputProps = $derived.by(() => ({
type: 'hidden' as const,
- name: this.root.opts.name.current
- ? `${this.root.opts.name.current}${this.root.opts.type.current === 'multiple' ? `[${this.opts.index.current}]` : ''}`
+ name: this.provider.opts.name.current
+ ? `${this.provider.opts.name.current}${this.provider.opts.type.current === 'multiple' ? `[${this.opts.index.current}]` : ''}`
: undefined,
value: this.value,
- disabled: this.root.opts.disabled.current || undefined,
+ disabled: this.provider.opts.disabled.current || undefined,
}));
}
@@ -309,29 +307,29 @@ export class SliderTickProvider extends Provider {
return new SliderTickProvider(opts);
}
- readonly root: SliderProvider;
+ readonly provider: SliderProvider;
private constructor(opts: SliderTickOpts) {
super(opts, 'Slider', 'tick', attrs.tick);
- this.root = SliderProvider.ctx.get();
+ this.provider = SliderProvider.ctx.get();
}
readonly percent = $derived.by(() =>
- this.root.getPercent(this.opts.value.current),
+ this.provider.getPercent(this.opts.value.current),
);
readonly isActive = $derived.by(() => {
- const values = this.root.opts.value.current;
+ const values = this.provider.opts.value.current;
const min = Math.min(...values);
const max = Math.max(...values);
return this.opts.value.current >= min && this.opts.value.current <= max;
});
readonly props = $derived.by(() => {
- const isHorizontal = this.root.opts.orientation.current === 'horizontal';
+ const isHorizontal = this.provider.opts.orientation.current === 'horizontal';
return this.assertProps({
...this.baseProps,
- 'data-orientation': this.root.opts.orientation.current,
+ 'data-orientation': this.provider.opts.orientation.current,
'data-active': this.isActive ? '' : undefined,
'data-value': this.opts.value.current,
style: {
diff --git a/src/uix/soma/components/splitter/components/splitter.svelte b/src/uix/soma/components/splitter/components/splitter.svelte
index 105f3736e..0092ea493 100644
--- a/src/uix/soma/components/splitter/components/splitter.svelte
+++ b/src/uix/soma/components/splitter/components/splitter.svelte
@@ -2,20 +2,20 @@
import { readableActive, writableActive } from '$soma/reactive';
import { mergeProps } from '$soma/props';
import { createId } from '$soma/id';
- import { Soma } from '$soma/core/soma.svelte';
+ import { getSoma } from '$soma/core/soma.svelte';
import { SplitterProvider } from '../splitter-provider.svelte';
import type { SplitterProps } from '../types';
import { noop } from '$lib/util/funcs';
const uid = $props.id();
- const soma = Soma.getOr();
+ const soma = getSoma();
let {
ref = $bindable(null),
id = createId(uid, 'splitter'),
orientation = 'horizontal',
disabled = false,
- dir = soma?.dir.current ?? 'ltr',
+ dir = soma.presentation.current?.dir ?? 'ltr',
keyboardStep = 1,
onResize = noop,
onResizeEnd = noop,
diff --git a/src/uix/soma/components/splitter/splitter-provider.svelte.ts b/src/uix/soma/components/splitter/splitter-provider.svelte.ts
index 55a4b7519..48a4cea99 100644
--- a/src/uix/soma/components/splitter/splitter-provider.svelte.ts
+++ b/src/uix/soma/components/splitter/splitter-provider.svelte.ts
@@ -3,7 +3,7 @@ import { createAttrs, boolToEmptyStrOrUndef } from '$soma/attrs';
import { state, type Active, type ActiveProps, type StateProps } from '$soma/reactive';
import type { OnChangeFn, Orientation, Direction, SomaKeyboardEvent } from '$soma/types';
import { KEYS, getDirectionalKeys } from '$soma/keyboard';
-import { Soma } from '$soma/core/soma.svelte';
+import { getSoma } from '$soma/core/soma.svelte';
const attrs = createAttrs({
component: 'splitter',
@@ -60,12 +60,12 @@ export class SplitterProvider extends Provider {
return new SplitterProvider(opts);
}
- readonly soma: Soma | undefined;
+ readonly config = getSoma();
private panels: PanelState[] = $state([]);
private constructor(opts: SplitterOpts) {
super(opts, 'Splitter', 'root', attrs.root, SplitterProvider.ctx);
- this.soma = Soma.getOr();
+
}
// ── Panel registration ───────────────────────────────────────────────────
@@ -252,14 +252,14 @@ export class SplitterPanelProvider extends Provider {
return new SplitterPanelProvider(opts);
}
- readonly root: SplitterProvider;
+ readonly provider: SplitterProvider;
private cleanup: (() => void) | undefined;
private constructor(opts: SplitterPanelOpts) {
super(opts, 'Splitter', 'panel', attrs.panel);
- this.root = SplitterProvider.ctx.get();
+ this.provider = SplitterProvider.ctx.get();
- this.cleanup = this.root.registerPanel({
+ this.cleanup = this.provider.registerPanel({
id: opts.panelId.current,
defaultSize: opts.defaultSize.current,
minSize: opts.minSize.current,
@@ -270,11 +270,11 @@ export class SplitterPanelProvider extends Provider {
}
readonly size = $derived.by(
- () => this.root.getPanelSize(this.opts.panelId.current),
+ () => this.provider.getPanelSize(this.opts.panelId.current),
);
readonly isCollapsed = $derived.by(
- () => this.root.isPanelCollapsed(this.opts.panelId.current),
+ () => this.provider.isPanelCollapsed(this.opts.panelId.current),
);
readonly props = $derived.by(() =>
@@ -285,12 +285,12 @@ export class SplitterPanelProvider extends Provider {
'flex-grow': this.size,
'flex-shrink': 0,
overflow: 'hidden',
- 'min-width': this.root.opts.orientation.current === 'horizontal' ? '0px' : undefined,
- 'min-height': this.root.opts.orientation.current === 'vertical' ? '0px' : undefined,
+ 'min-width': this.provider.opts.orientation.current === 'horizontal' ? '0px' : undefined,
+ 'min-height': this.provider.opts.orientation.current === 'vertical' ? '0px' : undefined,
},
'data-panel-id': this.opts.panelId.current,
'data-state': this.isCollapsed ? 'collapsed' : 'expanded',
- 'data-orientation': this.root.opts.orientation.current,
+ 'data-orientation': this.provider.opts.orientation.current,
} as const),
);
}
@@ -310,7 +310,7 @@ export class SplitterResizeTriggerProvider extends Provider {
if (!this.dragging) return;
this.dragging = false;
- this.root.notifyResizeEnd();
+ this.provider.notifyResizeEnd();
};
readonly onlostpointercapture = () => {
if (this.dragging) {
this.dragging = false;
- this.root.notifyResizeEnd();
+ this.provider.notifyResizeEnd();
}
};
@@ -419,9 +419,9 @@ export class SplitterResizeTriggerProvider extends Provider {
if (this.isDisabled) return;
// Double-click toggles collapse on the panel before the trigger
- const panelBefore = this.root.getPanelState(this.panelBeforeId);
+ const panelBefore = this.provider.getPanelState(this.panelBeforeId);
if (panelBefore?.config.collapsible) {
- this.root.toggleCollapse(this.panelBeforeId);
+ this.provider.toggleCollapse(this.panelBeforeId);
}
};
@@ -430,45 +430,45 @@ export class SplitterResizeTriggerProvider extends Provider) => {
if (this.isDisabled) return;
- const orientation = this.root.opts.orientation.current;
- const dir = this.root.opts.dir.current;
+ const orientation = this.provider.opts.orientation.current;
+ const dir = this.provider.opts.dir.current;
const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
- const step = this.root.opts.keyboardStep.current;
+ const step = this.provider.opts.keyboardStep.current;
if (e.key === nextKey) {
e.preventDefault();
- this.root.resizePanels(this.panelBeforeId, this.panelAfterId, step);
- this.root.notifyResizeEnd();
+ this.provider.resizePanels(this.panelBeforeId, this.panelAfterId, step);
+ this.provider.notifyResizeEnd();
} else if (e.key === prevKey) {
e.preventDefault();
- this.root.resizePanels(this.panelBeforeId, this.panelAfterId, -step);
- this.root.notifyResizeEnd();
+ this.provider.resizePanels(this.panelBeforeId, this.panelAfterId, -step);
+ this.provider.notifyResizeEnd();
} else if (e.key === KEYS.HOME) {
e.preventDefault();
// Minimize panel before
- const panelA = this.root.getPanelState(this.panelBeforeId);
+ const panelA = this.provider.getPanelState(this.panelBeforeId);
if (panelA) {
const min = panelA.config.minSize ?? 0;
const delta = min - panelA.size;
- this.root.resizePanels(this.panelBeforeId, this.panelAfterId, delta);
- this.root.notifyResizeEnd();
+ this.provider.resizePanels(this.panelBeforeId, this.panelAfterId, delta);
+ this.provider.notifyResizeEnd();
}
} else if (e.key === KEYS.END) {
e.preventDefault();
// Maximize panel before
- const panelA = this.root.getPanelState(this.panelBeforeId);
+ const panelA = this.provider.getPanelState(this.panelBeforeId);
if (panelA) {
const max = panelA.config.maxSize ?? 100;
const delta = max - panelA.size;
- this.root.resizePanels(this.panelBeforeId, this.panelAfterId, delta);
- this.root.notifyResizeEnd();
+ this.provider.resizePanels(this.panelBeforeId, this.panelAfterId, delta);
+ this.provider.notifyResizeEnd();
}
} else if (e.key === KEYS.ENTER) {
e.preventDefault();
// Toggle collapse on panel before
- const panelBefore = this.root.getPanelState(this.panelBeforeId);
+ const panelBefore = this.provider.getPanelState(this.panelBeforeId);
if (panelBefore?.config.collapsible) {
- this.root.toggleCollapse(this.panelBeforeId);
+ this.provider.toggleCollapse(this.panelBeforeId);
}
}
};
@@ -485,13 +485,13 @@ export class SplitterResizeTriggerProvider extends Provider value,
- (v) => (value = v),
+ (v) => {
+ value = v;
+ onValueChange(v);
+ },
),
- onValueChange: readableActive(() => onValueChange),
orientation: readableActive(() => orientation),
dir: readableActive(() => dir),
linear: readableActive(() => linear),
diff --git a/src/uix/soma/components/stepper/stepper-provider.svelte.ts b/src/uix/soma/components/stepper/stepper-provider.svelte.ts
index 4c9a274f6..56bd609f7 100644
--- a/src/uix/soma/components/stepper/stepper-provider.svelte.ts
+++ b/src/uix/soma/components/stepper/stepper-provider.svelte.ts
@@ -1,9 +1,9 @@
import { Provider, context, type WithRefOpts } from '$soma/provider';
import { createAttrs, boolToEmptyStrOrUndef } from '$soma/attrs';
import { state, type Active, type ActiveProps, type StateProps } from '$soma/reactive';
-import type { OnChangeFn, Orientation, Direction, SomaKeyboardEvent, SomaMouseEvent } from '$soma/types';
+import type { Orientation, Direction, SomaKeyboardEvent, SomaMouseEvent } from '$soma/types';
import { KEYS, getDirectionalKeys } from '$soma/keyboard';
-import { Soma } from '$soma/core/soma.svelte';
+import { getSoma } from '$soma/core/soma.svelte';
const attrs = createAttrs({
component: 'stepper',
@@ -32,7 +32,6 @@ interface StepperOpts
orientation: Orientation;
dir: Direction;
linear: boolean;
- onValueChange: OnChangeFn;
}> {}
export class StepperProvider extends Provider {
@@ -42,12 +41,12 @@ export class StepperProvider extends Provider {
return new StepperProvider(opts);
}
- readonly soma: Soma | undefined;
+ readonly config = getSoma();
count = $state(0);
private constructor(opts: StepperOpts) {
super(opts, 'Stepper', 'root', attrs.root, StepperProvider.ctx);
- this.soma = Soma.getOr();
+
}
get step(): number {
@@ -67,7 +66,6 @@ export class StepperProvider extends Provider {
setStep(step: number) {
if (step < 0 || step > this.count) return;
this.opts.value.current = step;
- this.opts.onValueChange.current(step);
}
goToNextStep() {
@@ -117,19 +115,19 @@ export class StepperListProvider extends Provider {
return new StepperListProvider(opts);
}
- readonly root: StepperProvider;
+ readonly provider: StepperProvider;
private constructor(opts: StepperListOpts) {
super(opts, 'Stepper', 'list', attrs.list);
- this.root = StepperProvider.ctx.get();
+ this.provider = StepperProvider.ctx.get();
}
readonly props = $derived.by(() =>
this.assertProps({
...this.baseProps,
role: 'tablist' as const,
- 'aria-orientation': this.root.opts.orientation.current,
- 'data-orientation': this.root.opts.orientation.current,
+ 'aria-orientation': this.provider.opts.orientation.current,
+ 'data-orientation': this.provider.opts.orientation.current,
} as const),
);
}
@@ -149,23 +147,23 @@ export class StepperItemProvider extends Provider {
return new StepperItemProvider(opts);
}
- readonly root: StepperProvider;
+ readonly provider: StepperProvider;
private constructor(opts: StepperItemOpts) {
super(opts, 'Stepper', 'item', attrs.item, StepperItemProvider.ctx);
- this.root = StepperProvider.ctx.get();
+ this.provider = StepperProvider.ctx.get();
// Track count based on highest index seen
$effect(() => {
const idx = this.opts.index.current;
- if (idx + 1 > this.root.count) {
- this.root.count = idx + 1;
+ if (idx + 1 > this.provider.count) {
+ this.provider.count = idx + 1;
}
});
}
readonly stepState = $derived.by(
- () => this.root.getStepState(this.opts.index.current),
+ () => this.provider.getStepState(this.opts.index.current),
);
readonly isCurrent = $derived.by(() => this.stepState === 'current');
@@ -176,7 +174,7 @@ export class StepperItemProvider extends Provider {
this.assertProps({
...this.baseProps,
'data-state': this.stepState,
- 'data-orientation': this.root.opts.orientation.current,
+ 'data-orientation': this.provider.opts.orientation.current,
'data-current': boolToEmptyStrOrUndef(this.isCurrent),
'data-complete': boolToEmptyStrOrUndef(this.isComplete),
'data-incomplete': boolToEmptyStrOrUndef(this.isIncomplete),
@@ -197,12 +195,12 @@ export class StepperTriggerProvider extends Provider {
return new StepperTriggerProvider(opts);
}
- readonly root: StepperProvider;
+ readonly provider: StepperProvider;
readonly item: StepperItemProvider;
private constructor(opts: StepperTriggerOpts) {
super(opts, 'Stepper', 'trigger', attrs.trigger);
- this.root = StepperProvider.ctx.get();
+ this.provider = StepperProvider.ctx.get();
this.item = StepperItemProvider.ctx.get();
}
@@ -212,21 +210,21 @@ export class StepperTriggerProvider extends Provider {
readonly isDisabled = $derived.by(() => {
if (this.opts.disabled.current) return true;
- return !this.root.canSelectStep(this.index);
+ return !this.provider.canSelectStep(this.index);
});
readonly onclick = (_e: SomaMouseEvent) => {
if (this.isDisabled) return;
- this.root.setStep(this.index);
+ this.provider.setStep(this.index);
};
readonly onkeydown = (e: SomaKeyboardEvent) => {
if (this.isDisabled) return;
- const orientation = this.root.opts.orientation.current;
- const dir = this.root.opts.dir.current;
+ const orientation = this.provider.opts.orientation.current;
+ const dir = this.provider.opts.dir.current;
const { nextKey, prevKey } = getDirectionalKeys(dir, orientation);
- const triggers = this.root.getTriggers();
+ const triggers = this.provider.getTriggers();
const currentIndex = triggers.indexOf(e.currentTarget as HTMLElement);
let targetIndex = -1;
@@ -262,7 +260,7 @@ export class StepperTriggerProvider extends Provider {
'data-current': boolToEmptyStrOrUndef(this.item.isCurrent),
'data-complete': boolToEmptyStrOrUndef(this.item.isComplete),
'data-incomplete': boolToEmptyStrOrUndef(this.item.isIncomplete),
- 'data-orientation': this.root.opts.orientation.current,
+ 'data-orientation': this.provider.opts.orientation.current,
onclick: this.onclick,
onkeydown: this.onkeydown,
} as const),
@@ -307,12 +305,12 @@ export class StepperSeparatorProvider extends Provider {
}
readonly item: StepperItemProvider;
- readonly root: StepperProvider;
+ readonly provider: StepperProvider;
private constructor(opts: StepperSeparatorOpts) {
super(opts, 'Stepper', 'separator', attrs.separator);
this.item = StepperItemProvider.ctx.get();
- this.root = StepperProvider.ctx.get();
+ this.provider = StepperProvider.ctx.get();
}
readonly props = $derived.by(() =>
@@ -321,7 +319,7 @@ export class StepperSeparatorProvider extends Provider {
role: 'separator' as const,
'data-state': this.item.stepState,
'data-complete': boolToEmptyStrOrUndef(this.item.isComplete),
- 'data-orientation': this.root.opts.orientation.current,
+ 'data-orientation': this.provider.opts.orientation.current,
} as const),
);
}
@@ -339,19 +337,19 @@ export class StepperContentProvider extends Provider {
return new StepperContentProvider(opts);
}
- readonly root: StepperProvider;
+ readonly provider: StepperProvider;
private constructor(opts: StepperContentOpts) {
super(opts, 'Stepper', 'content', attrs.content);
- this.root = StepperProvider.ctx.get();
+ this.provider = StepperProvider.ctx.get();
}
readonly isCurrent = $derived.by(
- () => this.root.step === this.opts.index.current,
+ () => this.provider.step === this.opts.index.current,
);
readonly stepState = $derived.by(
- () => this.root.getStepState(this.opts.index.current),
+ () => this.provider.getStepState(this.opts.index.current),
);
readonly props = $derived.by(() =>
@@ -372,11 +370,11 @@ export class StepperCompletedContentProvider extends Provider
@@ -399,20 +397,20 @@ export class StepperPrevTriggerProvider extends Provider
return new StepperPrevTriggerProvider(opts);
}
- readonly root: StepperProvider;
+ readonly provider: StepperProvider;
private constructor(opts: StepperPrevTriggerOpts) {
super(opts, 'Stepper', 'prev-trigger', attrs['prev-trigger']);
- this.root = StepperProvider.ctx.get();
+ this.provider = StepperProvider.ctx.get();
}
readonly isDisabled = $derived.by(
- () => this.opts.disabled.current || !this.root.hasPrevStep,
+ () => this.opts.disabled.current || !this.provider.hasPrevStep,
);
readonly onclick = (_e: SomaMouseEvent) => {
if (this.isDisabled) return;
- this.root.goToPrevStep();
+ this.provider.goToPrevStep();
};
readonly props = $derived.by(() =>
@@ -439,20 +437,20 @@ export class StepperNextTriggerProvider extends Provider
return new StepperNextTriggerProvider(opts);
}
- readonly root: StepperProvider;
+ readonly provider: StepperProvider;
private constructor(opts: StepperNextTriggerOpts) {
super(opts, 'Stepper', 'next-trigger', attrs['next-trigger']);
- this.root = StepperProvider.ctx.get();
+ this.provider = StepperProvider.ctx.get();
}
readonly isDisabled = $derived.by(
- () => this.opts.disabled.current || !this.root.hasNextStep,
+ () => this.opts.disabled.current || !this.provider.hasNextStep,
);
readonly onclick = (_e: SomaMouseEvent) => {
if (this.isDisabled) return;
- this.root.goToNextStep();
+ this.provider.goToNextStep();
};
readonly props = $derived.by(() =>
diff --git a/src/uix/soma/components/switch/components/switch.svelte b/src/uix/soma/components/switch/components/switch.svelte
index f3bc71f09..82b04b1e6 100644
--- a/src/uix/soma/components/switch/components/switch.svelte
+++ b/src/uix/soma/components/switch/components/switch.svelte
@@ -25,8 +25,13 @@
const state = SwitchProvider.from({
id: readableActive(() => id),
ref: writableActive(() => ref, (v) => (ref = v)),
- checked: writableActive(() => checked, (v) => (checked = v)),
- onCheckedChange: readableActive(() => onCheckedChange),
+ checked: writableActive(
+ () => checked,
+ (v) => {
+ checked = v;
+ onCheckedChange(v);
+ },
+ ),
disabled: readableActive(() => disabled),
required: readableActive(() => required),
name: readableActive(() => name),
diff --git a/src/uix/soma/components/switch/switch-provider.svelte.ts b/src/uix/soma/components/switch/switch-provider.svelte.ts
index 6fcb78148..3b77a11d3 100644
--- a/src/uix/soma/components/switch/switch-provider.svelte.ts
+++ b/src/uix/soma/components/switch/switch-provider.svelte.ts
@@ -1,7 +1,7 @@
import { Provider, context, type WithRefOpts } from '$soma/provider';
import { createAttrs, boolToEmptyStrOrUndef } from '$soma/attrs';
import { type ActiveProps, type StateProps } from '$soma/reactive';
-import type { OnChangeFn, SomaMouseEvent, SomaKeyboardEvent } from '$soma/types';
+import type { SomaMouseEvent, SomaKeyboardEvent } from '$soma/types';
import { KEYS } from '$soma/keyboard';
const attrs = createAttrs({
@@ -19,7 +19,6 @@ interface SwitchOpts
required: boolean;
name: string;
value: string;
- onCheckedChange: OnChangeFn;
}> {}
export class SwitchProvider extends Provider {
@@ -35,9 +34,7 @@ export class SwitchProvider extends Provider {
toggle() {
if (this.opts.disabled.current) return;
- const next = !this.opts.checked.current;
- this.opts.checked.current = next;
- this.opts.onCheckedChange.current(next);
+ this.opts.checked.current = !this.opts.checked.current;
}
readonly onclick = (_e: SomaMouseEvent) => {
@@ -90,18 +87,18 @@ export class SwitchThumbProvider extends Provider {
return new SwitchThumbProvider(opts);
}
- readonly root: SwitchProvider;
+ readonly provider: SwitchProvider;
private constructor(opts: SwitchThumbOpts) {
super(opts, 'Switch', 'thumb', attrs.thumb);
- this.root = SwitchProvider.ctx.get();
+ this.provider = SwitchProvider.ctx.get();
}
readonly props = $derived.by(() =>
this.assertProps({
...this.baseProps,
- 'data-state': this.root.opts.checked.current ? 'checked' : 'unchecked',
- 'data-disabled': boolToEmptyStrOrUndef(this.root.opts.disabled.current),
+ 'data-state': this.provider.opts.checked.current ? 'checked' : 'unchecked',
+ 'data-disabled': boolToEmptyStrOrUndef(this.provider.opts.disabled.current),
} as const),
);
}
diff --git a/src/uix/soma/components/table/README.md b/src/uix/soma/components/table/README.md
new file mode 100644
index 000000000..b5322cdf7
--- /dev/null
+++ b/src/uix/soma/components/table/README.md
@@ -0,0 +1,192 @@
+# Table
+
+Headless table with sorting, row selection, and pagination. Provides a reactive state manager (`createTable`) and Svelte components with ARIA grid pattern, keyboard support, and data-* attributes for styling.
+
+## Anatomy
+
+```svelte
+
+
+
+
+
+
+ {#each table.headers as header}
+ {header.label}
+ {/each}
+
+
+
+ {#each table.rows as row (row.id)}
+
+ {#each row.cells as cell, i}
+ {cell.value}
+ {/each}
+
+ {/each}
+
+
+
+```
+
+## Parts
+
+| Part | Element | Description |
+|------|---------|-------------|
+| `Provider` | none | Root context. Receives the table instance. No DOM. |
+| `ColumnHeader` | `` | Column header. Click to sort. ARIA sort indicators. |
+| `Row` | ` ` | Table row. Click to select. ARIA selected/rowindex. |
+| `Cell` | `` | Table cell. ARIA colindex. |
+
+## State Manager (`createTable`)
+
+```ts
+const table = createTable({
+ data: () => dataArray, // reactive data source
+ columns: columnDefs, // column definitions
+ getRowId?: (row, idx) => id, // custom row ID (default: index)
+
+ sorting?: {
+ enabled: true,
+ multi: false, // allow multi-column sort (Shift+click)
+ manual: false, // server-side sort (skip client sort)
+ },
+ selection?: {
+ mode: 'none' | 'single' | 'multiple',
+ },
+ pagination?: {
+ enabled: true,
+ manual: false, // server-side pagination
+ pageSize: 10,
+ },
+ rowCount?: number, // total rows for server-side pagination
+
+ // Callbacks
+ onSortingChange?: (sorting) => void,
+ onSelectionChange?: (selection) => void,
+ onPaginationChange?: (pagination) => void,
+});
+```
+
+## ARIA
+
+| Part | Attribute | Value |
+|------|-----------|-------|
+| Root (``) | `role` | `grid` (consumer adds) |
+| Root | `aria-label` | Consumer provides |
+| Root | `aria-rowcount` | Consumer provides if server-side |
+| ColumnHeader | `role` | `columnheader` |
+| ColumnHeader | `aria-sort` | `ascending` \| `descending` \| `none` |
+| ColumnHeader | `aria-label` | Translated sort state |
+| Row | `role` | `row` |
+| Row | `aria-rowindex` | Row index (1-based) |
+| Row | `aria-selected` | `true` \| `false` (when selection enabled) |
+| Cell | `role` | `gridcell` |
+| Cell | `aria-colindex` | Column index (1-based) |
+
+## Data Attributes
+
+| Part | Attribute | Values |
+|------|-----------|--------|
+| ColumnHeader | `data-table-column-header` | Always present |
+| ColumnHeader | `data-sortable` | Present when sortable |
+| ColumnHeader | `data-sorted` | `asc` \| `desc` (when sorted) |
+| Row | `data-table-row` | Always present |
+| Row | `data-selected` | Present when selected |
+| Cell | `data-table-cell` | Always present |
+
+## Keyboard
+
+| Key | Action |
+|-----|--------|
+| `Enter` / `Space` on ColumnHeader | Toggle sort (Shift for multi-sort) |
+| `Enter` / `Space` on Row | Toggle row selection |
+
+## Sorting
+
+- **Click** a header: replaces current sort with that column (asc → desc → none)
+- **Shift+click** a header: adds column to multi-sort (when `multi: true`)
+- **Manual mode**: set `manual: true`, handle `onSortingChange`, sort data externally
+
+## Selection
+
+- **None**: no row selection
+- **Single**: one row at a time, click to select/deselect
+- **Multiple**: any number, click to toggle, checkbox integration via `getIsRowSelected` / `toggleAllSelection`
+
+## Pagination
+
+- **Client-side**: `createTable` slices data internally
+- **Server-side**: set `manual: true` + `rowCount`, load data per page externally
+
+## Usage
+
+### Sortable + Selectable + Paginated
+
+```svelte
+
+```
+
+### Server-side pagination
+
+```svelte
+
+```
+
+## Comparison with reference libraries
+
+| Feature | TanStack Table | React Aria | Soma Table |
+|---------|---------------|------------|------------|
+| Framework | Agnostic | React only | Svelte (soma) |
+| Sorting (single) | Yes | Yes | Yes |
+| Sorting (multi) | Yes | No | Yes (Shift+click) |
+| Custom sort fn | Yes | No | Yes |
+| Server-side sort | Yes | Manual | Yes (manual mode) |
+| Selection none/single/multi | Yes | Yes | Yes |
+| Select all / checkbox | Yes | Yes | Yes |
+| Pagination (client) | Yes | No | Yes |
+| Pagination (server) | Yes | No | Yes (manual mode) |
+| ARIA grid pattern | No (manual) | Yes (auto) | Yes (auto) |
+| Keyboard sort | No (manual) | Yes | Yes (Enter/Space) |
+| Keyboard select | No (manual) | Yes | Yes (Enter/Space) |
+| `aria-sort` on headers | No (manual) | Yes | Yes |
+| `data-*` attributes | No | No | Yes |
+| Svelte components | Via adapter | No | Native |
+| Column filtering | Yes | No | Planned |
+| Column visibility | Yes | No | Planned |
+| Column resizing | Yes | Partial | Planned |
+| Column pinning | Yes | No | Planned |
+| Row expansion | Yes | No | Planned |
+| Grouping / aggregation | Yes | No | Planned |
+| Virtual scrolling | Via TanStack Virtual | No | Planned |
diff --git a/src/uix/soma/components/table/components/table-cell.svelte b/src/uix/soma/components/table/components/table-cell.svelte
new file mode 100644
index 000000000..4e47c95ea
--- /dev/null
+++ b/src/uix/soma/components/table/components/table-cell.svelte
@@ -0,0 +1,36 @@
+
+
+{#if child}
+ {@render child({ props: mergedProps })}
+{:else}
+
+ {@render children?.()}
+
+{/if}
diff --git a/src/uix/soma/components/table/components/table-column-header.svelte b/src/uix/soma/components/table/components/table-column-header.svelte
new file mode 100644
index 000000000..4b55abb6c
--- /dev/null
+++ b/src/uix/soma/components/table/components/table-column-header.svelte
@@ -0,0 +1,34 @@
+
+
+{#if child}
+ {@render child({ props: mergedProps })}
+{:else}
+
+ {@render children?.()}
+
+{/if}
diff --git a/src/uix/soma/components/table/components/table-row.svelte b/src/uix/soma/components/table/components/table-row.svelte
new file mode 100644
index 000000000..87038bf9e
--- /dev/null
+++ b/src/uix/soma/components/table/components/table-row.svelte
@@ -0,0 +1,34 @@
+
+
+{#if child}
+ {@render child({ props: mergedProps })}
+{:else}
+
+ {@render children?.()}
+
+{/if}
diff --git a/src/uix/soma/components/table/components/table.svelte b/src/uix/soma/components/table/components/table.svelte
new file mode 100644
index 000000000..6a6def4cb
--- /dev/null
+++ b/src/uix/soma/components/table/components/table.svelte
@@ -0,0 +1,22 @@
+
+
+{@render children?.()}
diff --git a/src/uix/soma/components/table/exports.ts b/src/uix/soma/components/table/exports.ts
new file mode 100644
index 000000000..7abc70581
--- /dev/null
+++ b/src/uix/soma/components/table/exports.ts
@@ -0,0 +1,34 @@
+export { default as Provider } from './components/table.svelte';
+export { default as ColumnHeader } from './components/table-column-header.svelte';
+export { default as Row } from './components/table-row.svelte';
+export { default as Cell } from './components/table-cell.svelte';
+
+export { createTable, filterFns } from './table-core.svelte';
+export type { BuiltInFilterFn } from './table-core.svelte';
+
+export type {
+ ColumnDef,
+ SortingEntry,
+ SortingState,
+ PaginationState,
+ SelectionMode,
+ RowSelectionState,
+ ColumnVisibilityState,
+ ColumnPinningState,
+ ColumnSizingState,
+ ExpandedState,
+ ColumnFilterEntry,
+ ColumnFiltersState,
+ TableConfig,
+ TableInstance,
+ TableHeader,
+ TableRow,
+ TableCell,
+} from './table-core.svelte';
+
+export type {
+ TableProviderProps as ProviderProps,
+ TableColumnHeaderProps as ColumnHeaderProps,
+ TableRowProps as RowProps,
+ TableCellProps as CellProps,
+} from './types';
diff --git a/src/uix/soma/components/table/index.ts b/src/uix/soma/components/table/index.ts
new file mode 100644
index 000000000..8570a426a
--- /dev/null
+++ b/src/uix/soma/components/table/index.ts
@@ -0,0 +1 @@
+export * from './exports';
diff --git a/src/uix/soma/components/table/table-core.svelte.ts b/src/uix/soma/components/table/table-core.svelte.ts
new file mode 100644
index 000000000..f0dff6b02
--- /dev/null
+++ b/src/uix/soma/components/table/table-core.svelte.ts
@@ -0,0 +1,699 @@
+
+import { Provider, context, type WithRefOpts, type ProviderOpts } from '$soma/provider';
+import { createAttrs, boolToEmptyStrOrUndef } from '$soma/attrs';
+import { state, readableActive, type Active, type ActiveProps, type StateProps } from '$soma/reactive';
+import type { OnChangeFn, SomaKeyboardEvent } from '$soma/types';
+import { KEYS } from '$soma/keyboard';
+import { Soma } from '$soma/core/soma.svelte';
+
+const attrs = createAttrs({
+ component: 'table',
+ parts: ['root', 'header', 'body', 'footer', 'column-header', 'row', 'cell'] as const,
+});
+
+// ── Column definition ────────────────────────────────────────────────────────
+
+export interface ColumnDef {
+ /** Unique column identifier. Derived from accessorKey if omitted. */
+ id?: string;
+ /** Key in data object to access cell value. */
+ accessorKey?: string;
+ /** Function to access cell value from row data. */
+ accessorFn?: (row: TData, index: number) => any;
+
+ /** Header label or render function. */
+ header?: string;
+ /** Footer label. */
+ footer?: string;
+
+ /** Enable sorting for this column. @default false */
+ enableSorting?: boolean;
+ /** Custom sort comparator. Receives two cell values. */
+ sortingFn?: (a: any, b: any) => number;
+ /** Sort descending first when toggling. @default false */
+ sortDescFirst?: boolean;
+
+ /** Enable filtering for this column. @default false */
+ enableFiltering?: boolean;
+ /** Custom filter function. */
+ filterFn?: (row: TData, columnId: string, filterValue: any) => boolean;
+
+ /** Enable hiding for this column. @default true */
+ enableHiding?: boolean;
+ /** Enable resizing for this column. @default false */
+ enableResizing?: boolean;
+ /** Enable pinning for this column. @default false */
+ enablePinning?: boolean;
+
+ /** Initial column width in px. */
+ size?: number;
+ /** Minimum column width. @default 40 */
+ minSize?: number;
+ /** Maximum column width. */
+ maxSize?: number;
+}
+
+// ── Sort state ───────────────────────────────────────────────────────────────
+
+export interface SortingEntry {
+ /** Column ID. */
+ id: string;
+ /** Sort descending. */
+ desc: boolean;
+}
+
+export type SortingState = SortingEntry[];
+
+// ── Pagination state ─────────────────────────────────────────────────────────
+
+export interface PaginationState {
+ pageIndex: number;
+ pageSize: number;
+}
+
+// ── Selection state ──────────────────────────────────────────────────────────
+
+export type SelectionMode = 'none' | 'single' | 'multiple';
+export type RowSelectionState = Record;
+
+// ── Column visibility ────────────────────────────────────────────────────────
+
+export type ColumnVisibilityState = Record;
+
+// ── Column pinning ───────────────────────────────────────────────────────────
+
+export interface ColumnPinningState {
+ left?: string[];
+ right?: string[];
+}
+
+// ── Column sizing ────────────────────────────────────────────────────────────
+
+export type ColumnSizingState = Record;
+
+// ── Expansion ────────────────────────────────────────────────────────────────
+
+export type ExpandedState = Record