sh3-core 0.11.8 → 0.13.0

package/dist/primitives/widgets/Segmented.test.js

@@ -0,0 +1,24 @@
+import { describe, expect, it } from 'vitest';
+import { nextValue, prevValue, firstValue, lastValue } from './Segmented';
+describe('Segmented keyboard nav', () => {
+    const opts = [
+        { value: 'a', label: 'A' },
+        { value: 'b', label: 'B', disabled: true },
+        { value: 'c', label: 'C' },
+    ];
+    it('nextValue skips disabled', () => {
+        expect(nextValue(opts, 'a')).toBe('c');
+    });
+    it('nextValue wraps to first', () => {
+        expect(nextValue(opts, 'c')).toBe('a');
+    });
+    it('prevValue skips disabled', () => {
+        expect(prevValue(opts, 'c')).toBe('a');
+    });
+    it('firstValue returns first non-disabled', () => {
+        expect(firstValue(opts)).toBe('a');
+    });
+    it('lastValue returns last non-disabled', () => {
+        expect(lastValue(opts)).toBe('c');
+    });
+});

package/dist/primitives/widgets/Select.d.ts

@@ -0,0 +1,11 @@
+export interface SelectOption {
+    value: string;
+    label: string;
+    disabled?: boolean;
+}
+export declare const SEARCH_THRESHOLD = 8;
+export declare function shouldShowSearch(options: SelectOption[]): boolean;
+export declare function filterOptions(options: SelectOption[], query: string): SelectOption[];
+export declare function matchTypeAhead(options: SelectOption[], buffer: string, current: number): number;
+export declare function resolveValueLabel(options: SelectOption[], value: string | string[], multiple: boolean): string;
+export declare function toggleMulti(current: string[], v: string): string[];

package/dist/primitives/widgets/Select.js

@@ -0,0 +1,42 @@
+export const SEARCH_THRESHOLD = 8;
+export function shouldShowSearch(options) {
+    return options.length >= SEARCH_THRESHOLD;
+}
+export function filterOptions(options, query) {
+    if (!query)
+        return options.slice();
+    const q = query.toLowerCase();
+    return options.filter((o) => o.label.toLowerCase().includes(q));
+}
+export function matchTypeAhead(options, buffer, current) {
+    if (!buffer)
+        return -1;
+    const b = buffer.toLowerCase();
+    const n = options.length;
+    for (let i = 1; i <= n; i++) {
+        const idx = (current + i) % n;
+        if (options[idx].disabled)
+            continue;
+        if (options[idx].label.toLowerCase().startsWith(b))
+            return idx;
+    }
+    return -1;
+}
+export function resolveValueLabel(options, value, multiple) {
+    var _a, _b;
+    if (multiple && Array.isArray(value)) {
+        return value
+            .map((v) => { var _a, _b; return (_b = (_a = options.find((o) => o.value === v)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : ''; })
+            .filter(Boolean)
+            .join(', ');
+    }
+    if (typeof value === 'string' && value) {
+        return (_b = (_a = options.find((o) => o.value === value)) === null || _a === void 0 ? void 0 : _a.label) !== null && _b !== void 0 ? _b : '';
+    }
+    return '';
+}
+export function toggleMulti(current, v) {
+    if (current.includes(v))
+        return current.filter((x) => x !== v);
+    return [...current, v];
+}

package/dist/primitives/widgets/Select.svelte

@@ -0,0 +1,163 @@
+<script lang="ts">
+  import { tick } from 'svelte';
+  import { shell } from '../../shellRuntime.svelte';
+  import Listbox from './_select-listbox.svelte';
+  import { type SelectOption, resolveValueLabel, toggleMulti } from './Select';
+
+  let {
+    options,
+    value = $bindable<string | string[]>(''),
+    multiple = false,
+    placeholder = 'Select…',
+    label,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+  }: {
+    options: SelectOption[];
+    value?: string | string[];
+    multiple?: boolean;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+  } = $props();
+
+  let trigger = $state<HTMLButtonElement | undefined>(undefined);
+  let nativeRef = $state<HTMLSelectElement | undefined>(undefined);
+  let isOpen = $state(false);
+
+  const displayLabel = $derived(resolveValueLabel(options, value, multiple));
+
+  function onPopupClose() {
+    isOpen = false;
+    trigger?.focus();
+  }
+
+  async function open() {
+    if (disabled || isOpen || !trigger) return;
+    isOpen = true;
+    const popupHandle = shell.popup.show(
+      Listbox,
+      { anchor: trigger },
+      {
+        options,
+        // Closure read so the listbox sees Select's live value across
+        // multiple selections without remount.
+        getValue: () => value,
+        multiple,
+        onSelect: (v: string) => {
+          if (multiple) {
+            const arr = Array.isArray(value) ? value : [];
+            value = toggleMulti(arr, v);
+          } else {
+            value = v;
+          }
+        },
+        // Listbox calls this on its own close paths (selection in
+        // single mode, Escape inside the listbox). Outside-click and
+        // document-Escape go through the wrap below instead.
+        onClose: onPopupClose,
+      },
+    );
+    // popup.ts's outside-click + document-Escape route through
+    // current.handle.close() — wrap that to also clear our state.
+    const origClose = popupHandle.close;
+    popupHandle.close = () => {
+      origClose();
+      onPopupClose();
+    };
+    await tick();
+    const lb = document.querySelector<HTMLElement>('.sh3-listbox');
+    lb?.focus();
+  }
+
+  function onTriggerKey(e: KeyboardEvent) {
+    if (disabled || isOpen) return;
+    switch (e.key) {
+      case 'ArrowDown': case 'ArrowUp': case 'Enter': case ' ':
+        e.preventDefault();
+        open();
+        break;
+    }
+  }
+
+  function onNativeChange() {
+    if (!nativeRef) return;
+    if (multiple) {
+      value = Array.from(nativeRef.selectedOptions).map((o) => o.value);
+    } else {
+      value = nativeRef.value;
+    }
+  }
+</script>
+
+<label class="sh3-select" class:sh3-select--invalid={invalid} class:sh3-select--sm={size === 'sm'}>
+  {#if label}<span class="sh3-select__label">{label}</span>{/if}
+  <button
+    type="button"
+    class="sh3-select__btn"
+    bind:this={trigger}
+    {disabled}
+    aria-haspopup="listbox"
+    aria-expanded={isOpen}
+    onclick={open}
+    onkeydown={onTriggerKey}
+  >
+    <span class="sh3-select__display" class:sh3-select__display--placeholder={!displayLabel}>
+      {displayLabel || placeholder}
+    </span>
+    <span class="sh3-select__chevron" aria-hidden="true">▾</span>
+  </button>
+
+  <select
+    bind:this={nativeRef}
+    class="sh3-select__native"
+    {multiple}
+    {disabled}
+    tabindex={-1}
+    aria-hidden="true"
+    onchange={onNativeChange}
+  >
+    {#each options as opt}
+      <option value={opt.value} selected={
+        multiple
+          ? Array.isArray(value) && value.includes(opt.value)
+          : value === opt.value
+      }>{opt.label}</option>
+    {/each}
+  </select>
+</label>
+
+<style>
+  .sh3-select { display: inline-flex; flex-direction: column; gap: 4px; font-size: 0.8125rem; position: relative; }
+  .sh3-select__label { color: var(--shell-fg-muted); font-size: 0.75rem; }
+  .sh3-select__btn {
+    display: inline-flex; align-items: center; gap: 8px;
+    height: var(--shell-field-height-md);
+    min-width: 140px;
+    padding: 0 var(--shell-field-pad-x);
+    background: var(--shell-input-bg);
+    color: var(--shell-fg);
+    border: 1px solid var(--shell-border);
+    border-radius: var(--shell-widget-radius);
+    cursor: pointer;
+    font: inherit;
+    text-align: left;
+  }
+  .sh3-select--sm .sh3-select__btn { height: var(--shell-field-height-sm); }
+  .sh3-select__btn:focus-visible { outline: none; box-shadow: var(--shell-focus-ring); border-color: var(--shell-input-border-focus); }
+  .sh3-select__btn:disabled { opacity: 0.55; cursor: not-allowed; }
+  .sh3-select--invalid .sh3-select__btn { border-color: var(--shell-error); }
+  .sh3-select__display { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+  .sh3-select__display--placeholder { color: var(--shell-fg-muted); }
+  .sh3-select__chevron { color: var(--shell-fg-muted); }
+  .sh3-select__native {
+    position: absolute;
+    width: 1px; height: 1px;
+    margin: 0; padding: 0;
+    border: 0; opacity: 0;
+    pointer-events: none;
+  }
+</style>

package/dist/primitives/widgets/Select.svelte.d.ts

@@ -0,0 +1,14 @@
+import { type SelectOption } from './Select';
+type $$ComponentProps = {
+    options: SelectOption[];
+    value?: string | string[];
+    multiple?: boolean;
+    placeholder?: string;
+    label?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+};
+declare const Select: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Select = ReturnType<typeof Select>;
+export default Select;

package/dist/primitives/widgets/Select.test.d.ts

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

package/dist/primitives/widgets/Select.test.js

@@ -0,0 +1,68 @@
+import { describe, expect, it } from 'vitest';
+import { shouldShowSearch, filterOptions, matchTypeAhead, resolveValueLabel, toggleMulti, SEARCH_THRESHOLD, } from './Select';
+const opts = [
+    { value: 'apple', label: 'Apple' },
+    { value: 'banana', label: 'Banana' },
+    { value: 'cherry', label: 'Cherry' },
+    { value: 'date', label: 'Date' },
+    { value: 'elderberry', label: 'Elderberry' },
+    { value: 'fig', label: 'Fig' },
+    { value: 'grape', label: 'Grape' },
+    { value: 'honeydew', label: 'Honeydew' },
+];
+describe('Select threshold', () => {
+    it('does not show search at 7 options', () => {
+        expect(shouldShowSearch(opts.slice(0, 7))).toBe(false);
+    });
+    it('shows search at 8 options (threshold)', () => {
+        expect(shouldShowSearch(opts)).toBe(true);
+    });
+    it('threshold constant is 8', () => {
+        expect(SEARCH_THRESHOLD).toBe(8);
+    });
+});
+describe('Select filtering', () => {
+    it('filters case-insensitively by substring', () => {
+        expect(filterOptions(opts, 'AN').map((o) => o.value)).toEqual(['banana']);
+    });
+    it('matches multiple', () => {
+        expect(filterOptions(opts, 'e').map((o) => o.value))
+            .toEqual(['apple', 'cherry', 'date', 'elderberry', 'grape', 'honeydew']);
+    });
+    it('empty query returns all', () => {
+        expect(filterOptions(opts, '').length).toBe(opts.length);
+    });
+});
+describe('Select type-ahead', () => {
+    it('matches by first character', () => {
+        expect(matchTypeAhead(opts, 'b', 0)).toBe(1);
+    });
+    it('matches by buffer prefix', () => {
+        expect(matchTypeAhead(opts, 'ho', 0)).toBe(7);
+    });
+    it('returns -1 when no match', () => {
+        expect(matchTypeAhead(opts, 'z', 0)).toBe(-1);
+    });
+    it('searches from current+1 forward, then wraps', () => {
+        expect(matchTypeAhead(opts, 'b', 1)).toBe(1);
+    });
+});
+describe('Select value resolution', () => {
+    it('resolveValueLabel single', () => {
+        expect(resolveValueLabel(opts, 'cherry', false)).toBe('Cherry');
+    });
+    it('resolveValueLabel single null', () => {
+        expect(resolveValueLabel(opts, '', false)).toBe('');
+    });
+    it('resolveValueLabel multi joined', () => {
+        expect(resolveValueLabel(opts, ['apple', 'cherry'], true)).toBe('Apple, Cherry');
+    });
+});
+describe('Select toggleMulti', () => {
+    it('adds new selection', () => {
+        expect(toggleMulti(['a'], 'b')).toEqual(['a', 'b']);
+    });
+    it('removes existing', () => {
+        expect(toggleMulti(['a', 'b'], 'a')).toEqual(['b']);
+    });
+});

package/dist/primitives/widgets/Slider.d.ts

@@ -0,0 +1,6 @@
+export declare function valueToPercent(value: number, min: number, max: number): number;
+export declare function percentToValue(pct: number, min: number, max: number): number;
+export declare function snapToStep(value: number, base: number, step: number, bounds?: {
+    min?: number;
+    max?: number;
+}): number;

package/dist/primitives/widgets/Slider.js

@@ -0,0 +1,19 @@
+export function valueToPercent(value, min, max) {
+    if (max === min)
+        return 0;
+    return ((value - min) / (max - min)) * 100;
+}
+export function percentToValue(pct, min, max) {
+    return min + (pct / 100) * (max - min);
+}
+export function snapToStep(value, base, step, bounds) {
+    if (step <= 0)
+        return value;
+    const k = Math.round((value - base) / step);
+    let v = base + k * step;
+    if ((bounds === null || bounds === void 0 ? void 0 : bounds.min) !== undefined && v < bounds.min)
+        v = bounds.min;
+    if ((bounds === null || bounds === void 0 ? void 0 : bounds.max) !== undefined && v > bounds.max)
+        v = bounds.max;
+    return v;
+}

package/dist/primitives/widgets/Slider.svelte

@@ -0,0 +1,205 @@
+<script lang="ts">
+  import { valueToPercent } from './Slider';
+
+  let {
+    value = $bindable(0),
+    min = 0,
+    max = 100,
+    step = 1,
+    ticks,
+    showValue = false,
+    disabled = false,
+    invalid = false,
+    size = 'md',
+    orientation = 'horizontal',
+  }: {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    ticks?: number[];
+    showValue?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    orientation?: 'horizontal' | 'vertical';
+  } = $props();
+
+  const pct = $derived(valueToPercent(value, min, max));
+</script>
+
+<div class="sh3-slider sh3-slider--{orientation}"
+     class:sh3-slider--sm={size === 'sm'}
+     class:sh3-slider--invalid={invalid}>
+  <div class="sh3-slider__track">
+    <div class="sh3-slider__fill" style:--pct="{pct}%"></div>
+    {#if ticks}
+      {#each ticks as t}
+        <span class="sh3-slider__tick" style:--tick-pct="{valueToPercent(t, min, max)}%"></span>
+      {/each}
+    {/if}
+  </div>
+  <input
+    type="range"
+    class="sh3-slider__native"
+    {min}
+    {max}
+    {step}
+    {disabled}
+    aria-invalid={invalid || undefined}
+    bind:value
+  />
+  {#if showValue}
+    <output class="sh3-slider__value" style:--pct="{pct}%">{value}</output>
+  {/if}
+</div>
+
+<style>
+  .sh3-slider {
+    --thumb-size: 14px;
+    position: relative;
+    display: inline-block;
+  }
+  .sh3-slider--sm { --thumb-size: 12px; }
+  .sh3-slider--horizontal { width: 200px; height: var(--thumb-size); }
+  .sh3-slider--vertical { width: var(--thumb-size); height: 200px; }
+
+  .sh3-slider__track {
+    position: absolute;
+    background: var(--shell-track-bg);
+    border: 1px solid var(--shell-track-border);
+    border-radius: var(--shell-widget-radius-pill);
+    pointer-events: none;
+  }
+  .sh3-slider--horizontal .sh3-slider__track {
+    top: 50%; left: 0; right: 0;
+    height: 4px;
+    transform: translateY(-50%);
+  }
+  .sh3-slider--vertical .sh3-slider__track {
+    left: 50%; top: 0; bottom: 0;
+    width: 4px;
+    transform: translateX(-50%);
+  }
+
+  .sh3-slider__fill {
+    position: absolute;
+    background: var(--shell-track-fill);
+    border-radius: inherit;
+  }
+  .sh3-slider--horizontal .sh3-slider__fill {
+    left: 0; top: 0; bottom: 0;
+    width: var(--pct);
+  }
+  .sh3-slider--vertical .sh3-slider__fill {
+    bottom: 0; left: 0; right: 0;
+    height: var(--pct);
+  }
+
+  .sh3-slider__tick {
+    position: absolute;
+    background: var(--shell-tick-bg);
+  }
+  .sh3-slider--horizontal .sh3-slider__tick {
+    width: 1px; height: 8px; top: 50%;
+    transform: translate(-50%, -50%);
+    left: var(--tick-pct);
+  }
+  .sh3-slider--vertical .sh3-slider__tick {
+    width: 8px; height: 1px; left: 50%;
+    transform: translate(-50%, 50%);
+    bottom: var(--tick-pct);
+  }
+
+  .sh3-slider__native {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    background: transparent;
+    -webkit-appearance: none;
+    appearance: none;
+    cursor: pointer;
+  }
+  .sh3-slider--vertical .sh3-slider__native {
+    writing-mode: vertical-lr;
+    direction: rtl;
+  }
+  /* Browser default applies opacity:0.5 to <input>:disabled at the
+     element level; that composites onto the thumb regardless of any
+     pseudo-element opacity overrides. Pin to 1 here so the disabled
+     thumb stays opaque and the muted-token recolor is what shows. */
+  .sh3-slider__native:disabled {
+    cursor: not-allowed;
+    opacity: 1;
+  }
+  .sh3-slider--invalid .sh3-slider__track { border-color: var(--shell-error); }
+
+  /* Disabled state: shift the fill + thumb to muted/border tokens
+     instead of using opacity, so the thumb stays opaque (no see-through). */
+  .sh3-slider:has(.sh3-slider__native:disabled) .sh3-slider__fill {
+    background: var(--shell-border-strong);
+  }
+
+  .sh3-slider__native::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    background: var(--shell-thumb-bg);
+    border: 2px solid var(--shell-thumb-border);
+    box-shadow: var(--shell-thumb-shadow);
+    cursor: pointer;
+    opacity: 1;
+  }
+  .sh3-slider__native::-moz-range-thumb {
+    width: var(--thumb-size);
+    height: var(--thumb-size);
+    border-radius: 50%;
+    background: var(--shell-thumb-bg);
+    border: 2px solid var(--shell-thumb-border);
+    box-shadow: var(--shell-thumb-shadow);
+    cursor: pointer;
+    opacity: 1;
+  }
+  .sh3-slider__native:disabled::-webkit-slider-thumb {
+    background: var(--shell-fg-subtle);
+    border-color: var(--shell-border-strong);
+    cursor: not-allowed;
+    opacity: 1;
+  }
+  .sh3-slider__native:disabled::-moz-range-thumb {
+    background: var(--shell-fg-subtle);
+    border-color: var(--shell-border-strong);
+    cursor: not-allowed;
+    opacity: 1;
+  }
+  .sh3-slider__native::-webkit-slider-runnable-track,
+  .sh3-slider__native::-moz-range-track {
+    background: transparent;
+  }
+  .sh3-slider__native:focus-visible::-webkit-slider-thumb {
+    box-shadow: var(--shell-focus-ring), var(--shell-thumb-shadow);
+  }
+  .sh3-slider__native:focus-visible::-moz-range-thumb {
+    box-shadow: var(--shell-focus-ring), var(--shell-thumb-shadow);
+  }
+
+  .sh3-slider__value {
+    position: absolute;
+    font-size: 0.75rem;
+    color: var(--shell-fg-muted);
+    pointer-events: none;
+    transform: translate(-50%, 0);
+  }
+  .sh3-slider--horizontal .sh3-slider__value {
+    top: calc(100% + 4px);
+    left: var(--pct);
+  }
+  .sh3-slider--vertical .sh3-slider__value {
+    left: calc(100% + 6px);
+    bottom: var(--pct);
+    transform: translate(0, 50%);
+  }
+</style>

package/dist/primitives/widgets/Slider.svelte.d.ts

@@ -0,0 +1,15 @@
+type $$ComponentProps = {
+    value?: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    ticks?: number[];
+    showValue?: boolean;
+    disabled?: boolean;
+    invalid?: boolean;
+    size?: 'sm' | 'md';
+    orientation?: 'horizontal' | 'vertical';
+};
+declare const Slider: import("svelte").Component<$$ComponentProps, {}, "value">;
+type Slider = ReturnType<typeof Slider>;
+export default Slider;

package/dist/primitives/widgets/Slider.test.d.ts

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

package/dist/primitives/widgets/Slider.test.js

@@ -0,0 +1,31 @@
+import { describe, expect, it } from 'vitest';
+import { valueToPercent, percentToValue, snapToStep } from './Slider';
+describe('Slider value-position math', () => {
+    it('valueToPercent at min', () => {
+        expect(valueToPercent(0, 0, 100)).toBe(0);
+    });
+    it('valueToPercent at max', () => {
+        expect(valueToPercent(100, 0, 100)).toBe(100);
+    });
+    it('valueToPercent in middle', () => {
+        expect(valueToPercent(50, 0, 100)).toBe(50);
+    });
+    it('valueToPercent with negative range', () => {
+        expect(valueToPercent(0, -10, 10)).toBe(50);
+    });
+    it('percentToValue at 50%', () => {
+        expect(percentToValue(50, 0, 100)).toBe(50);
+    });
+    it('percentToValue at 0%', () => {
+        expect(percentToValue(0, -10, 10)).toBe(-10);
+    });
+    it('snapToStep snaps to grid', () => {
+        expect(snapToStep(2.7, 0, 1)).toBe(3);
+        expect(snapToStep(2.3, 0, 1)).toBe(2);
+        expect(snapToStep(2.7, 0, 0.5)).toBe(2.5);
+    });
+    it('snapToStep clamps to min/max', () => {
+        expect(snapToStep(-5, 0, 1, { min: 0, max: 10 })).toBe(0);
+        expect(snapToStep(15, 0, 1, { min: 0, max: 10 })).toBe(10);
+    });
+});

package/dist/primitives/widgets/SliderGroup.svelte

@@ -0,0 +1,58 @@
+<script lang="ts">
+  import Slider from './Slider.svelte';
+
+  type Channel = { id: string; label: string; min?: number; max?: number; step?: number };
+
+  let {
+    orientation = 'horizontal',
+    channels,
+    values = $bindable<Record<string, number>>({}),
+    showValues = false,
+    disabled = false,
+    size = 'md',
+  }: {
+    orientation?: 'horizontal' | 'vertical';
+    channels: Channel[];
+    values?: Record<string, number>;
+    showValues?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+  } = $props();
+</script>
+
+<div class="sh3-sg sh3-sg--{orientation}">
+  {#each channels as ch (ch.id)}
+    <div class="sh3-sg__channel">
+      <span class="sh3-sg__label">{ch.label}</span>
+      <Slider
+        {orientation}
+        min={ch.min ?? 0}
+        max={ch.max ?? 100}
+        step={ch.step ?? 1}
+        {disabled}
+        {size}
+        showValue={showValues}
+        bind:value={
+          () => values[ch.id] ?? 0,
+          (n: number) => values = { ...values, [ch.id]: n }
+        }
+      />
+    </div>
+  {/each}
+</div>
+
+<style>
+  .sh3-sg { display: inline-flex; gap: var(--shell-pad-md); }
+  .sh3-sg--vertical { flex-direction: row; align-items: end; }
+  .sh3-sg--horizontal { flex-direction: column; }
+  .sh3-sg__channel {
+    display: flex; gap: 4px; align-items: center;
+  }
+  .sh3-sg--vertical .sh3-sg__channel { flex-direction: column-reverse; align-items: center; }
+  .sh3-sg__label {
+    font-size: 0.75rem;
+    color: var(--shell-fg-muted);
+    min-width: 60px;
+  }
+  .sh3-sg--vertical .sh3-sg__label { min-width: 0; text-align: center; }
+</style>

package/dist/primitives/widgets/SliderGroup.svelte.d.ts

@@ -0,0 +1,18 @@
+type Channel = {
+    id: string;
+    label: string;
+    min?: number;
+    max?: number;
+    step?: number;
+};
+type $$ComponentProps = {
+    orientation?: 'horizontal' | 'vertical';
+    channels: Channel[];
+    values?: Record<string, number>;
+    showValues?: boolean;
+    disabled?: boolean;
+    size?: 'sm' | 'md';
+};
+declare const SliderGroup: import("svelte").Component<$$ComponentProps, {}, "values">;
+type SliderGroup = ReturnType<typeof SliderGroup>;
+export default SliderGroup;