@spaethtech/svelte-ui 0.13.0 → 0.14.0

package/dist/index.d.ts

@@ -19,6 +19,8 @@ export { default as Input } from "./components/Input.svelte";
 export { default as NotesEditor } from "./components/NotesEditor.svelte";
 export { default as Rating } from "./components/Rating.svelte";
 export { default as Select } from "./components/Select.svelte";
+export { Combobox } from "./components/Combobox/index.js";
+export { TokenInput } from "./components/TokenInput/index.js";
 export { Slider } from "./components/Slider/index.js";
 export { default as List } from "./components/List.svelte";
 export { default as TextArea } from "./components/TextArea.svelte";
@@ -36,6 +38,9 @@ export { default as DatePicker } from "./components/DatePicker.svelte";
 export { default as TimeSpinner } from "./components/TimeSpinner.svelte";
 export { default as TimePicker } from "./components/TimePicker.svelte";
 export { default as TimeRangeInput } from "./components/TimeRangeInput.svelte";
+export { DateRangePicker } from "./components/DateRangePicker/index.js";
+export { FileUpload } from "./components/FileUpload/index.js";
+export type { RangePreset } from "./components/DateRangePicker/index.js";
 export { default as ThemeSelector } from "./components/ThemeSelector.svelte";
 export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
 export { default as Popup } from "./components/Popup.svelte";
@@ -50,6 +55,8 @@ export { default as FieldGroup } from "./components/FieldGroup.svelte";
 export { default as Grid } from "./components/Grid.svelte";
 export { Divider } from "./components/Divider/index.js";
 export type { Columns, Gap } from "./components/field-group.js";
+export { Stepper } from "./components/Stepper/index.js";
+export type { StepItem } from "./components/Stepper/index.js";
 export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
 export { default as SideBarMenu } from "./components/SideBarMenu/SideBarMenu.svelte";

package/dist/index.js

@@ -20,6 +20,8 @@ export { default as Input } from "./components/Input.svelte";
 export { default as NotesEditor } from "./components/NotesEditor.svelte";
 export { default as Rating } from "./components/Rating.svelte";
 export { default as Select } from "./components/Select.svelte";
+export { Combobox } from "./components/Combobox/index.js";
+export { TokenInput } from "./components/TokenInput/index.js";
 export { Slider } from "./components/Slider/index.js";
 export { default as List } from "./components/List.svelte";
 export { default as TextArea } from "./components/TextArea.svelte";
@@ -38,6 +40,8 @@ export { default as DatePicker } from "./components/DatePicker.svelte";
 export { default as TimeSpinner } from "./components/TimeSpinner.svelte";
 export { default as TimePicker } from "./components/TimePicker.svelte";
 export { default as TimeRangeInput } from "./components/TimeRangeInput.svelte";
+export { DateRangePicker } from "./components/DateRangePicker/index.js";
+export { FileUpload } from "./components/FileUpload/index.js";
 // Theme Components
 export { default as ThemeSelector } from "./components/ThemeSelector.svelte";
 export { default as ThemeToggle } from "./components/ThemeToggle.svelte";
@@ -51,6 +55,7 @@ export { default as Radio } from "./components/Radio.svelte";
 export { default as FieldGroup } from "./components/FieldGroup.svelte";
 export { default as Grid } from "./components/Grid.svelte";
 export { Divider } from "./components/Divider/index.js";
+export { Stepper } from "./components/Stepper/index.js";
 export { default as Disclosure } from "./components/Disclosure.svelte";
 export { default as Accordion } from "./components/Accordion.svelte";
 // Navigation Components

package/docs/components.md

@@ -79,6 +79,63 @@ Custom dropdown built on `Input` + `List`.
   `maxResults`, `headers`, `searchTerm`)
 - **Modes**: static `options` or search-as-you-type against `url`
 
+### Combobox
+
+Free-text autocomplete — a text input with a suggestion listbox. Unlike `Select` (a closed choice),
+the value is arbitrary text and options are suggestions.
+
+- **Location**: `src/lib/components/Combobox/Combobox.svelte`
+- **Axes**: `variant`, `size`
+- **Props**: `value` (bindable text), `options` (`string[]`, client substring filter) OR
+  `suggest` (`(q) => Promise<string[]>`, debounced by `debounceMs`, gated by `minChars`), `maxResults`,
+  `onselect`, `icon`, `placeholder`, plus the FieldChrome vocabulary (`label`/`aside`/`error`/
+  `description`/`id`/`required`), `class`
+- **Keyboard**: ↓/↑ highlight, Enter select, Esc close, Tab close; options select on pointerdown
+- **Accessibility**: `role="combobox"` + `aria-autocomplete`/`-expanded`/`-controls`/`-activedescendant`;
+  `role="listbox"`/`option`
+- **Composition**: `Input` (FieldChrome + frame + anchor + trailing chevron) + `Popup` (listbox)
+
+### TokenInput
+
+Multi-value entry — Enter/comma adds a removable `Chip` token.
+
+- **Location**: `src/lib/components/TokenInput/TokenInput.svelte`
+- **Axes**: `variant` (border + chip accent), `size`
+- **Props**: `values` (bindable `string[]`), `allowDuplicates`, `max`, `disabled`, `placeholder`,
+  plus the FieldChrome vocabulary (`label`/`aside`/`error`/`description`/`id`/`required`), `class`
+- **Behavior**: Enter/comma commits the trimmed draft (skips empty/duplicate/at-max); Backspace on an
+  empty draft removes the last token; each token's × removes it
+- **Composition**: a `<label>` (click-to-focus) wrapping `Chip` tokens + a bare `<input>`; the field
+  border matches `Input` (variant tint at rest / focus-within, error override)
+
+### FileUpload
+
+Drag-and-drop + click file field with thumbnails, remove, and optional progress.
+
+- **Location**: `src/lib/components/FileUpload/FileUpload.svelte`
+- **Axes**: `variant` (drag accent + browse button), `size`
+- **Props**: `files` (bindable `File[]`), `accept`, `multiple`, `maxSize` (bytes; rejects oversized),
+  `progress` (`Record<name, 0–100>` → per-file `Progress`), `onfiles`, plus FieldChrome, `class`
+- **Behavior**: drop or Browse adds; `!multiple` replaces; duplicates skipped; image thumbnails (object
+  URLs, revoked on remove/unmount); each file has a × remove
+- **Accessibility**: focusable `role="button"` dropzone (Enter/Space opens the picker); hidden
+  `<input type=file>`; labelled remove ×s
+- **Composition**: `Button` + `Progress`; FieldChrome for label/error
+
+### DateRangePicker
+
+Start–end date range with a presets rail; composes `Calendar mode="range"` + `Input` + `Popup`.
+
+- **Location**: `src/lib/components/DateRangePicker/DateRangePicker.svelte`
+- **Axes**: `variant`, `size`
+- **Props**: `start`/`end` (bindable ISO), `min`/`max`, `presets` (`RangePreset[]`; default set, `[]`
+  hides the rail), `format`, `placeholder`, plus FieldChrome (`label`/`aside`/`error`/`description`/
+  `id`/`required`), `class`
+- **Behavior**: readonly `Input` trigger shows the formatted range; the popup pairs a presets column
+  (`Button` ghost) with the range calendar; a preset or the second calendar pick closes it
+- **Note**: `DatePicker range` covers a bare range (object value, no presets); this is the
+  presets-first, `bind:start`/`bind:end` variant
+
 ### Slider
 
 Draggable range input — a single value or a `[min, max]` pair.
@@ -192,6 +249,19 @@ A thin separating rule.
 - **Accessibility**: `role="separator"` + `aria-orientation` (plain horizontal uses `<hr>`)
 - **Theming**: line = `--ui-border-color`; label muted. Vertical stretches to the row via `self-stretch`.
 
+### Stepper
+
+Step indicator for a linear multi-step flow (wizard).
+
+- **Location**: `src/lib/components/Stepper/Stepper.svelte`
+- **Axes**: `variant` (done/current markers + connectors), `size`
+- **Props**: `steps` (`StepItem[]` = `{ label, description?, icon? }`), `current` (bindable, 0-based),
+  `orientation` (`horizontal`/`vertical`), `onstep` (clickable markers), `class`
+- **Behavior**: `i<current` done (check), `i===current` current, `i>current` upcoming; connectors fill
+  up to `current`. Shows position only — panels + Next/Back + validation are the consumer's.
+- **Accessibility**: `<ol>`/`<li>`; `aria-current="step"` on the active marker; clickable markers are
+  `<button>`s with an accessible name
+
 ### Disclosure
 
 A single expand/collapse section — a `<Button>` header (title + rotating chevron) over a content

package/docs/usage.md

@@ -295,6 +295,92 @@ A neutral placeholder shown while content loads. Compose primitives to sketch th
 </Card>
 ```
 
+### FileUpload
+
+A drag-and-drop + click file field (thumbnails, remove, optional progress).
+
+```svelte
+<script>
+  import { FileUpload } from "@spaethtech/svelte-ui";
+  let files = $state([]);
+  // filename → 0-100, driven by your upload
+  let progress = $state({});
+</script>
+
+<FileUpload bind:files {progress} multiple accept="image/*,.pdf" maxSize={5 * 1024 * 1024}
+  label="Attachments" onfiles={(f) => console.log(f)} />
+```
+
+### DateRangePicker
+
+A start–end range with a presets rail (composes `Calendar mode="range"`).
+
+```svelte
+<script>
+  import { DateRangePicker } from "@spaethtech/svelte-ui";
+  let start = $state("");
+  let end = $state("");
+</script>
+
+<DateRangePicker bind:start bind:end label="Reporting period" />
+
+<!-- custom presets, or presets={[]} for calendar-only -->
+<DateRangePicker bind:start bind:end presets={[{ label: "Q1", start: "2026-01-01", end: "2026-03-31" }]} />
+```
+
+### Stepper
+
+A step indicator for a wizard; your panels + Next/Back drive `current`.
+
+```svelte
+<script>
+  import { Stepper, Button } from "@spaethtech/svelte-ui";
+  const steps = [{ label: "Account" }, { label: "Profile" }, { label: "Review" }];
+  let current = $state(0);
+</script>
+
+<Stepper {steps} bind:current onstep={(i) => (i <= current ? (current = i) : null)} />
+
+<!-- your step panels here -->
+<Button text="Back" onclick={() => current--} disabled={current === 0} />
+<Button text="Next" variant="primary" onclick={() => current++} />
+```
+
+### TokenInput
+
+Multi-value entry — Enter/comma adds a removable token.
+
+```svelte
+<script>
+  import { TokenInput } from "@spaethtech/svelte-ui";
+  let tags = $state(["svelte", "ui"]);
+</script>
+
+<!-- Type + Enter/comma to add; × or Backspace-on-empty to remove -->
+<TokenInput bind:values={tags} label="Tags" placeholder="Add a tag…" max={8} />
+```
+
+### Combobox
+
+Free-text autocomplete — a text input with suggestions (vs `Select`, a closed choice).
+
+```svelte
+<script>
+  import { Combobox } from "@spaethtech/svelte-ui";
+  const FRUITS = ["Apple", "Banana", "Cherry"];
+  let fruit = $state("");
+
+  // Async: return string[] for the query
+  const suggest = async (q) => (await fetch("/api/cities?q=" + q)).json();
+</script>
+
+<!-- Client-side filter -->
+<Combobox bind:value={fruit} options={FRUITS} label="Fruit" placeholder="Type to filter…" />
+
+<!-- Async suggestions (debounced) -->
+<Combobox bind:value={fruit} {suggest} minChars={1} label="City" />
+```
+
 ### Slider
 
 A draggable range input — a single value or a `[min, max]` pair. A form field (wears FieldChrome).

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaethtech/svelte-ui",
-  "version": "0.13.0",
+  "version": "0.14.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/spaethtech/svelte-ui.git"