Svelte UX

https://next.svelte-ux.techniq.dev/
Admin
Svelte UX is a collection of UI components, actions, stores, and utilities designed to enhance...
Tokens:18,242
Snippets:271
Trust Score:5.8
Update:5 months ago
Show doc for...
Tokens:
Raw
### Add PortalTarget class and examples

Source: https://next.svelte-ux.techniq.dev/changelog

Introduces the `PortalTarget` class and provides examples for its usage.

```javascript
Add well known PortalTarget class and examples (#334)
```

--------------------------------

### Basic BarStack Example

Source: https://next.svelte-ux.techniq.dev/docs/components/BarStack

A simple example demonstrating how to use the BarStack component to render a stacked bar chart. Ensure you have the necessary charting libraries imported.

```javascript
import { BarStack } from '@visx/shape';

// Sample data structure
const data = [
  { month: 'Jan', apples: 10, bananas: 20, cherries: 5 },
  { month: 'Feb', apples: 15, bananas: 25, cherries: 10 },
  // ... more data
];

// Assuming you have scales and dimensions set up
// const xScale = ...;
// const yScale = ...;
// const colorScale = ...;

<BarStack
  data={data}
  keys={['apples', 'bananas', 'cherries']}
  x={data => data.month}
  xScale={xScale}
  yScale={yScale}
  color={colorScale}
>
  {stacks => (
    <g>
      {stacks.map(stack => (
        <g key={`bar-stack-${stack.index}`}>
          {stack.bars.map(bar => (
            <rect
              key={`bar-${bar.index}`}
              x={bar.x}
              y={bar.y}
              width={bar.width}
              height={bar.height}
              fill={bar.color}
            />
          ))}
        </g>
      ))}
    </g>
  )}
</BarStack>
```

--------------------------------

### Basic TreeList Implementation

Source: https://next.svelte-ux.techniq.dev/docs/components/TreeList

Demonstrates the fundamental setup for rendering a TreeList component. Ensure you have the necessary data structure to populate the list.

```javascript
import TreeList from "@/components/TreeList";

<TreeList data={treeData} />
```

--------------------------------

### Basic RangeField Implementation

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeField

Demonstrates the basic setup of a RangeField component. No specific imports are required for this basic usage.

```html
<RangeField label="Volume" />
```

--------------------------------

### Basic Breadcrumb Example

Source: https://next.svelte-ux.techniq.dev/docs/components/Breadcrumb

A simple implementation of the Breadcrumb component.

```svelte
<Breadcrumb>
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/components">Components</BreadcrumbItem>
  <BreadcrumbItem href="/components/breadcrumb" active>Breadcrumb</BreadcrumbItem>
</Breadcrumb>
```

--------------------------------

### Basic DateRangeField Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/DateRangeField

Demonstrates the basic implementation of the DateRangeField component. No specific setup is required beyond importing the component.

```svelte
<script>
  import DateRangeField from "./DateRangeField.svelte";

  let dateRange = {
    start: new Date(2023, 0, 1),
    end: new Date(2023, 0, 31)
  };
</script>

<DateRangeField bind:value={dateRange} />

```

--------------------------------

### Basic Lazy Loading Example

Source: https://next.svelte-ux.techniq.dev/docs/components/Lazy

Demonstrates how to import and use a component lazily. This is useful for improving initial page load performance by only loading components when they are needed.

```javascript
import { lazy } from "svelte-ux";

const MyLazyComponent = lazy(() => import("./MyLazyComponent.svelte"));

<MyLazyComponent />
```

--------------------------------

### Drawer with Custom Transition

Source: https://next.svelte-ux.techniq.dev/docs/components/Drawer

Apply custom Svelte transitions to the Drawer for animated opening and closing effects. Here, `fly` is used as an example.

```svelte
<script lang="ts">
  import { Drawer } from 'svelte-ux';
  import { fly } from 'svelte/transition';

  let open = false;
</script>

<Drawer bind:open transition={fly}>
  <div class="p-4">
    <p>Drawer with a fly-in transition.</p>
  </div>
</Drawer>

<button on:click={() => (open = true)}>Open Flying Drawer</button>
```

--------------------------------

### Vertical Progress Bar

Source: https://next.svelte-ux.techniq.dev/docs/components/Progress

A vertical progress bar example. This orientation can be useful for specific layout requirements.

```html
<div class="progress vertical">
  <div class="progress-bar" style="height: 50%;">50%</div>
</div>
```

--------------------------------

### Basic TweenedValue Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/TweenedValue

Demonstrates how to use the TweenedValue component to animate a number. Import `tweened` from 'svelte/motion' and initialize it with a starting value.

```javascript
import { tweened } from "svelte/motion";

const count = tweened(0);

$: doubled = $count * 2;
```

--------------------------------

### DateRangeField with Custom Labels

Source: https://next.svelte-ux.techniq.dev/docs/components/DateRangeField

Shows how to customize the labels for the start and end date inputs within the DateRangeField component. This is useful for internationalization or specific use cases.

```svelte
<script>
  import DateRangeField from "./DateRangeField.svelte";

  let dateRange = {
    start: new Date(2023, 0, 1),
    end: new Date(2023, 0, 31)
  };
</script>

<DateRangeField
  bind:value={dateRange}
  startLabel="Check-in"
  endLabel="Check-out"
/>

```

--------------------------------

### Basic Pagination Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/Pagination

Demonstrates the basic implementation of the Pagination component. Use this for simple navigation needs.

```svelte
<script>
  import Pagination from '$lib/components/Pagination.svelte';

  let currentPage = 1;
  let totalPages = 10;
</script>

<Pagination bind:currentPage totalPages={totalPages} />
```

--------------------------------

### Basic Drawer Implementation

Source: https://next.svelte-ux.techniq.dev/docs/components/Drawer

This snippet shows the fundamental structure for implementing a Drawer component. Ensure necessary imports are included for full functionality.

```svelte
<script lang="ts">
  import { Drawer } from 'svelte-ux';
  import { fade } from 'svelte/transition';

  let open = false;
</script>

<Drawer bind:open transition={fade}>
  <div class="p-4">
    <p>Drawer content goes here.</p>
  </div>
</Drawer>

<button on:click={() => (open = true)}>Open Drawer</button>
```

--------------------------------

### Responsive Stack

Source: https://next.svelte-ux.techniq.dev/docs/components/Stack

Demonstrates creating a responsive stack that changes direction based on screen size. This allows for adaptive layouts.

```javascript
import { Stack } from "@mui/material";

function App() {
  return (
    <Stack direction={{ xs: 'column', sm: 'row' }} spacing={{ xs: 1, sm: 2, md: 4 }}>
      <div>Column Item 1</div>
      <div>Column Item 2</div>
      <div>Row Item 3</div>
      <div>Row Item 4</div>
    </Stack>
  );
}
```

--------------------------------

### Drawer with Custom Placement

Source: https://next.svelte-ux.techniq.dev/docs/components/Drawer

Demonstrates how to position the Drawer on different sides of the screen. The `placement` prop controls this behavior.

```svelte
<script lang="ts">
  import { Drawer } from 'svelte-ux';
  import { fade } from 'svelte/transition';

  let open = false;
</script>

<Drawer bind:open transition={fade} placement="right">
  <div class="p-4">
    <p>Drawer content on the right.</p>
  </div>
</Drawer>

<button on:click={() => (open = true)}>Open Right Drawer</button>
```

--------------------------------

### Basic DateRange Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/DateRange

Demonstrates the basic implementation of the DateRange component. Ensure the component is imported correctly before use.

```javascript
import DateRange from "@/components/DateRange.svelte";

<DateRange />
```

--------------------------------

### Support calling settings() without config

Source: https://next.svelte-ux.techniq.dev/changelog

Allows calling the `settings()` function without any configuration arguments.

```javascript
Support calling `settings()` (without any config) (`178f896381a8218044295de3d17d1a64189844bd`)
```

--------------------------------

### Basic MultiSelectField Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/MultiSelectField

Demonstrates the basic implementation of a MultiSelectField component. Ensure you have the necessary Svelte imports.

```svelte
<script>
  import MultiSelectField from './MultiSelectField.svelte';

  let selectedOptions = [];
  const options = [
    { label: 'Option 1', value: '1' },
    { label: 'Option 2', value: '2' },
    { label: 'Option 3', value: '3' },
  ];
</script>

<MultiSelectField
  bind:selectedOptions
  options={options}
  placeholder="Select options"
/>

<p>Selected: {selectedOptions.join(', ')}</p>
```

--------------------------------

### Progress Bar with Contextual Colors

Source: https://next.svelte-ux.techniq.dev/docs/components/Progress

Demonstrates using different background colors to indicate status. Use 'bg-success', 'bg-info', 'bg-warning', 'bg-danger' classes.

```html
<div class="progress">
  <div class="progress-bar bg-success" style="width: 40%;">40%</div>
  <div class="progress-bar bg-warning" style="width: 30%;">30%</div>
  <div class="progress-bar bg-danger" style="width: 20%;">20%</div>
</div>
```

--------------------------------

### SpringValue with Configuration

Source: https://next.svelte-ux.techniq.dev/docs/components/SpringValue

Shows how to configure SpringValue with custom physics properties like stiffness and damping. Adjust these to control the animation's feel.

```javascript
import { SpringValue } from '@svelte-ux/core';

const position = new SpringValue(0, {
  stiffness: 0.2,
  damping: 0.4
});

position.to(100);

// The animation will now use the specified stiffness and damping.
```

--------------------------------

### Responsive Grid Layout with Tailwind CSS

Source: https://next.svelte-ux.techniq.dev/docs/components/GridTailwind

Shows how to create a grid that adjusts its column count based on screen size using Tailwind's responsive prefixes. Useful for adapting layouts to different devices.

```html
<div class="grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
  <div>Item 4</div>
  <div>Item 5</div>
  <div>Item 6</div>
</div>
```

--------------------------------

### Basic ProgressCircle Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/ProgressCircle

Demonstrates the basic implementation of the ProgressCircle component. This is useful for displaying simple progress states.

```svelte
<script>
  import ProgressCircle from "./ProgressCircle.svelte";

  let progress = 75;
</script>

<ProgressCircle value={progress} />
```

--------------------------------

### Create FALLBACK_SETTINGS on demand

Source: https://next.svelte-ux.techniq.dev/changelog

Creates `FALLBACK_SETTINGS` on demand to prevent eager calls to `createThemeStore()`, which could unintentionally set `<html class="dark">`.

```javascript
Create `FALLBACK_SETTINGS` on demand so we don't call `createThemeStore()` eagerly and thus set `\<html class="dark"\>` unintentional (`84bea840cad3b73a35f7d4d7834d3c2d31862b78`)
```

--------------------------------

### Basic RangeSlider Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeSlider

Demonstrates the basic implementation of the RangeSlider component. Ensure the component is imported correctly before use.

```javascript
import RangeSlider from "@/components/RangeSlider.svelte";

<RangeSlider
  min={0}
  max={100}
  step={1}
  bind:value={rangeValue}
/>
```

--------------------------------

### Add currencyRound style to format utility

Source: https://next.svelte-ux.techniq.dev/changelog

The `format` utility now includes a `currencyRound` style and improved handling for currency options.

```javascript
[format] Add `currencyRound` style and improve currency option handling (`0a11a579debc439d4857b1df8c9b4a7340c86824`)
```

--------------------------------

### Basic ToggleGroup Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/ToggleGroup

Demonstrates the basic implementation of a ToggleGroup component allowing single selection.

```svelte
<script lang="ts">
  import { ToggleGroup } from "svelte-ux";

  let value: string | undefined;
</script>

<ToggleGroup bind:value>
  <ToggleGroup.Item value="1">Option 1</ToggleGroup.Item>
  <ToggleGroup.Item value="2">Option 2</ToggleGroup.Item>
  <ToggleGroup.Item value="3">Option 3</ToggleGroup.Item>
</ToggleGroup>

<p>Selected: {value ?? 'None'}</p>
```

--------------------------------

### TreeList with Custom Actions

Source: https://next.svelte-ux.techniq.dev/docs/components/TreeList

Shows how to integrate custom actions for each item in the TreeList. This allows for interactive elements within the tree structure.

```javascript
import TreeList from "@/components/TreeList";

const handleAction = (item, actionType) => {
  console.log(`Action ${actionType} on item:`, item);
};

<TreeList data={treeData} actions={[
  { label: 'Edit', onClick: (item) => handleAction(item, 'edit') },
  { label: 'Delete', onClick: (item) => handleAction(item, 'delete') }
]} />
```

--------------------------------

### DateRange with Event Handling

Source: https://next.svelte-ux.techniq.dev/docs/components/DateRange

Illustrates how to handle date range selection events. The `on:change` event is emitted when the selected date range is updated.

```javascript
<script>
  import DateRange from "@/components/DateRange.svelte";

  function handleChange(event) {
    console.log("Date range changed:", event.detail);
  }
</script>

<DateRange on:change={handleChange} />
```

--------------------------------

### Progress with Label

Source: https://next.svelte-ux.techniq.dev/docs/components/Progress

Displays a progress bar with a custom label. Ensure the label text accurately reflects the progress percentage.

```html
<div class="progress">
  <div class="progress-bar" style="width: 75%;">Task 1: 75%</div>
</div>
```

--------------------------------

### ToggleGroup with Custom Styling

Source: https://next.svelte-ux.techniq.dev/docs/components/ToggleGroup

Illustrates how to apply custom styles to ToggleGroup items using CSS classes.

```svelte
<script lang="ts">
  import { ToggleGroup } from "svelte-ux";
</script>

<style>
  .custom-toggle-item {
    padding: 10px 20px;
    border-radius: 5px;
    background-color: #eee;
  }
  .custom-toggle-item.active {
    background-color: #007bff;
    color: white;
  }
</style>

<ToggleGroup>
  <ToggleGroup.Item value="x" class="custom-toggle-item">X</ToggleGroup.Item>
  <ToggleGroup.Item value="y" class="custom-toggle-item">Y</ToggleGroup.Item>
  <ToggleGroup.Item value="z" class="custom-toggle-item">Z</ToggleGroup.Item>
</ToggleGroup>
```

--------------------------------

### Basic Vertical Stack

Source: https://next.svelte-ux.techniq.dev/docs/components/Stack

Demonstrates a simple vertical stack with default spacing. Use this for arranging elements vertically.

```javascript
import { Stack } from "@mui/material";

function App() {
  return (
    <Stack spacing={2}>
      <div>Item 1</div>
      <div>Item 2</div>
      <div>Item 3</div>
    </Stack>
  );
}
```

--------------------------------

### Pagination with Custom Labels

Source: https://next.svelte-ux.techniq.dev/docs/components/Pagination

Shows how to customize the labels for the previous and next buttons. Useful for internationalization or specific UI requirements.

```svelte
<script>
  import Pagination from '$lib/components/Pagination.svelte';

  let currentPage = 1;
  let totalPages = 10;
</script>

<Pagination
  bind:currentPage
  totalPages={totalPages}
  prevLabel="Previous Page"
  nextLabel="Next Page"
/>
```

--------------------------------

### Displaying a Duration

Source: https://next.svelte-ux.techniq.dev/docs/components/Duration

This snippet shows how to render a basic duration. Ensure the Duration component is imported before use.

```svelte
<script>
  import Duration from "./Duration.svelte";
</script>

<Duration duration={10000} />
```

--------------------------------

### DateRangeField with Event Handling

Source: https://next.svelte-ux.techniq.dev/docs/components/DateRangeField

Illustrates how to handle changes to the date range using the `onChange` event. This allows you to perform actions whenever the selected date range is updated.

```svelte
<script>
  import DateRangeField from "./DateRangeField.svelte";

  let dateRange = {
    start: new Date(2023, 0, 1),
    end: new Date(2023, 0, 31)
  };

  function handleChange(event) {
    console.log("Date range changed:", event.detail);
  }
</script>

<DateRangeField bind:value={dateRange} on:change={handleChange} />

```

--------------------------------

### Make scroll options optional

Source: https://next.svelte-ux.techniq.dev/changelog

The `scrollFade`, `scrollShadow`, and `sticky` actions now have optional parameters.

```javascript
Make options optional `scrollFade`, `scrollShadow`, and `sticky` actions (#301)
```

--------------------------------

### Grid with Auto-Flow

Source: https://next.svelte-ux.techniq.dev/docs/components/GridTailwind

Demonstrates using Tailwind CSS to control the auto-placement of grid items. This can simplify layout management when the number of items changes.

```html
<div class="grid grid-flow-col auto-rows-max gap-4">
  <div>Item 1</div>
  <div>Item 2</div>
  <div>Item 3</div>
</div>
```

--------------------------------

### tableOrderStore: Support passing columns

Source: https://next.svelte-ux.techniq.dev/changelog

Supports passing `columns` to the `tableOrderStore` to simplify creating an initial handler, especially for complex columns that use `value`, `orderBy`, etc.

```javascript
[tableOrderStore] Support passing `columns` to simplify creating initialHandler for complex columns (using value, orderBy, etc) (`772699ea0940cea2b350e10a9848df69cade1b15`)
```

--------------------------------

### Add step() number utility

Source: https://next.svelte-ux.techniq.dev/changelog

Introduces the `step()` number utility, which combines `round()` and `decimalCount()` to simplify floating-point handling when stepping values.

```javascript
Add `step()` number util which combines `round()` and `decimalCount()` to simplify handling floating point handling with stepping (#319)
```

--------------------------------

### Pagination with Page Size Control

Source: https://next.svelte-ux.techniq.dev/docs/components/Pagination

Illustrates how to integrate a page size selector with the Pagination component. This allows users to control the number of items displayed per page.

```svelte
<script>
  import Pagination from '$lib/components/Pagination.svelte';

  let currentPage = 1;
  let totalPages = 10;
  let pageSize = 10;
  const pageSizes = [10, 20, 50];
</script>

<Pagination
  bind:currentPage
  totalPages={totalPages}
  bind:pageSize
  {pageSizes}
/>

<p>Current Page Size: {pageSize}</p>
```

--------------------------------

### DateRangeField with Min/Max Dates

Source: https://next.svelte-ux.techniq.dev/docs/components/DateRangeField

Illustrates how to set minimum and maximum selectable dates for the DateRangeField. This helps enforce date constraints, such as preventing selection of past dates.

```svelte
<script>
  import DateRangeField from "./DateRangeField.svelte";

  let dateRange = {
    start: new Date(),
    end: new Date()
  };

  const minDate = new Date();
  minDate.setDate(minDate.getDate() - 7);

  const maxDate = new Date();
  maxDate.setDate(maxDate.getDate() + 7);
</script>

<DateRangeField
  bind:value={dateRange}
  min={minDate}
  max={maxDate}
/>

```

--------------------------------

### Basic Grid Layout with Tailwind CSS

Source: https://next.svelte-ux.techniq.dev/docs/components/GridTailwind

Demonstrates a simple responsive grid layout using Tailwind CSS classes. This is useful for creating flexible page structures.

```html
<div class="grid grid-cols-2 gap-4">
  <div>Column 1</div>
  <div>Column 2</div>
  <div>Column 3</div>
  <div>Column 4</div>
</div>
```

--------------------------------

### Basic SpringValue Usage

Source: https://next.svelte-ux.techniq.dev/docs/components/SpringValue

Demonstrates how to use SpringValue to animate a number from an initial value to a target value. Import SpringValue from '@svelte-ux/core'.

```javascript
import { SpringValue } from '@svelte-ux/core';

const opacity = new SpringValue(0);

// To animate to a new value:
opacity.to(1);

// To get the current value:
console.log(opacity.get());
```

--------------------------------

### NavItem: Pass classes to icon

Source: https://next.svelte-ux.techniq.dev/changelog

The `NavItem` component now passes `classes` to the icon instead of a single `class`, allowing for support of multiple path classes.

```javascript
[NavItem] Pass `classes` to icon instead of single `class` (i.e. support path class(es)) (`f8338570a1a09e7acbb676d3cec39c7b2db223b0`)
```

--------------------------------

### Drawer with Overlay Click Close

Source: https://next.svelte-ux.techniq.dev/docs/components/Drawer

Configure the Drawer to close when the overlay is clicked. This is controlled by the `overlayClickClose` prop.

```svelte
<script lang="ts">
  import { Drawer } from 'svelte-ux';
  import { fade } from 'svelte/transition';

  let open = false;
</script>

<Drawer bind:open transition={fade} overlayClickClose={true}>
  <div class="p-4">
    <p>Click overlay to close.</p>
  </div>
</Drawer>

<button on:click={() => (open = true)}>Open Closable Drawer</button>
```

--------------------------------

### Add min/max/step support to TextField/Input

Source: https://next.svelte-ux.techniq.dev/changelog

The `TextField` and `Input` components now support `min`, `max`, and `step` attributes, specifically for `integer` and `decimal` types.

```javascript
[TextField/Input] Add `min`/`max`/`step` support (for `integer` / `decimal` types) (#319)
```

--------------------------------

### TreeList with Search Functionality

Source: https://next.svelte-ux.techniq.dev/docs/components/TreeList

Illustrates how to enable search within the TreeList component. This requires passing a search handler and managing the search query.

```javascript
import TreeList from "@/components/TreeList";
import { useState } from 'react';

const [searchQuery, setSearchQuery] = useState('');

const handleSearch = (query) => {
  setSearchQuery(query);
  // Logic to filter treeData based on searchQuery
};

<TreeList data={filteredTreeData} onSearch={handleSearch} />
```

--------------------------------

### Horizontal Stack

Source: https://next.svelte-ux.techniq.dev/docs/components/Stack

Shows how to create a horizontal stack by setting the direction prop. Useful for arranging items side-by-side.

```javascript
import { Stack } from "@mui/material";

function App() {
  return (
    <Stack direction="row" spacing={4}>
      <div>Item A</div>
      <div>Item B</div>
      <div>Item C</div>
    </Stack>
  );
}
```

--------------------------------

### RangeSlider with Range Selection

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeSlider

Shows how to configure the RangeSlider to allow selection of a range (min and max values) instead of a single value. Use `bind:values` for this.

```javascript
import RangeSlider from "@/components/RangeSlider.svelte";

<RangeSlider
  min={0}
  max={100}
  step={1}
  range={true}
  bind:values={rangeValues}
/>
```

--------------------------------

### ToggleGroup with Multiple Selections

Source: https://next.svelte-ux.techniq.dev/docs/components/ToggleGroup

Shows how to configure ToggleGroup to allow multiple selections by setting the 'multiple' prop.

```svelte
<script lang="ts">
  import { ToggleGroup } from "svelte-ux";

  let values: string[] = [];
</script>

<ToggleGroup bind:values multiple>
  <ToggleGroup.Item value="a">Option A</ToggleGroup.Item>
  <ToggleGroup.Item value="b">Option B</ToggleGroup.Item>
  <ToggleGroup.Item value="c">Option C</ToggleGroup.Item>
</ToggleGroup>

<p>Selected: {values.join(', ') || 'None'}</p>
```

--------------------------------

### Support NodeNext packages

Source: https://next.svelte-ux.techniq.dev/changelog

Adds support for `NodeNext` packages, likely related to module resolution and packaging.

```javascript
Support `NodeNext` packages (#281)
```

--------------------------------

### Add Menu transition customization

Source: https://next.svelte-ux.techniq.dev/changelog

Adds `transition` and `transitionParams` customization to the `settings` for the `Menu` component.

```javascript
Add Menu `transition` and `transitionParams` customization to `settings` (#305)
```

--------------------------------

### Basic Progress Indicator

Source: https://next.svelte-ux.techniq.dev/docs/components/Progress

A simple progress bar to show task completion. No specific imports are required for basic usage.

```html
<div class="progress">
  <div class="progress-bar" style="width: 60%;">60%</div>
</div>
```

--------------------------------

### Simplify Table Ordering with tableOrderStore

Source: https://next.svelte-ux.techniq.dev/changelog

This change simplifies table ordering by passing an instance of `tableOrderStore` directly to the Table component. It replaces the previous method of passing `orderBy`, `orderDirection`, and handling `on:headerClick` separately. This also fixes the display of clickable headers when order is not used and improves the sort arrow size.

```svelte
<Table on:headerClick={tableOrder.onHeaderClick} />
```

```svelte
<script>
  const order = tableOrderStore();
</script>

<Table
  orderBy={$order.by}
  orderDirection={$order.direction}
  on:headerClick={order.onHeaderClick}
/>
```

```svelte
<script>
  const order = tableOrderStore();
</script>

<Table {order} />
```

--------------------------------

### Handling Zero Duration

Source: https://next.svelte-ux.techniq.dev/docs/components/Duration

Demonstrates how the component behaves when a zero duration is provided. It typically renders an empty string or a placeholder.

```svelte
<script>
  import Duration from "./Duration.svelte";
</script>

<Duration duration={0} />
```

--------------------------------

### DateRange with Custom Props

Source: https://next.svelte-ux.techniq.dev/docs/components/DateRange

Shows how to customize the DateRange component using various props. Refer to the API section for a full list of available props.

```javascript
<script>
  import DateRange from "@/components/DateRange.svelte";

  let startDate = "2023-01-01";
  let endDate = "2023-12-31";
</script>

<DateRange bind:startDate bind:endDate />
```

--------------------------------

### DateRange with Min/Max Dates

Source: https://next.svelte-ux.techniq.dev/docs/components/DateRange

Explains how to set minimum and maximum selectable dates for the DateRange component. This helps in constraining the selectable period.

```javascript
<script>
  import DateRange from "@/components/DateRange.svelte";

  let minDate = "2023-06-01";
  let maxDate = "2023-08-31";
</script>

<DateRange minDate={minDate} maxDate={maxDate} />
```

--------------------------------

### Pagination with Limited Visible Pages

Source: https://next.svelte-ux.techniq.dev/docs/components/Pagination

Shows how to limit the number of page numbers displayed around the current page. Use the `visiblePages` prop to control this behavior.

```svelte
<script>
  import Pagination from '$lib/components/Pagination.svelte';

  let currentPage = 5;
  let totalPages = 50;
</script>

<Pagination bind:currentPage totalPages={totalPages} visiblePages={3} />
```

--------------------------------

### Support nested color objects in processThemeColors

Source: https://next.svelte-ux.techniq.dev/changelog

The `processThemeColors` utility now supports color objects with nested keys.

```javascript
Add support for color objects with nested keys to `processThemeColors` (#307)
```

--------------------------------

### ProgressCircle with Customization

Source: https://next.svelte-ux.techniq.dev/docs/components/ProgressCircle

Shows how to customize the ProgressCircle component with different colors and sizes. Use this to match your application's theme.

```svelte
<script>
  import ProgressCircle from "./ProgressCircle.svelte";

  let progress = 50;
</script>

<ProgressCircle value={progress} color="#4CAF50" size="120" />
```

--------------------------------

### Drawer with Custom Width

Source: https://next.svelte-ux.techniq.dev/docs/components/Drawer

Adjust the width of the Drawer using the `width` prop. This allows for responsive design adjustments.

```svelte
<script lang="ts">
  import { Drawer } from 'svelte-ux';
  import { fade } from 'svelte/transition';

  let open = false;
</script>

<Drawer bind:open transition={fade} width="50%">
  <div class="p-4">
    <p>Drawer with 50% width.</p>
  </div>
</Drawer>

<button on:click={() => (open = true)}>Open Wide Drawer</button>
```

--------------------------------

### Breadcrumb with Icons

Source: https://next.svelte-ux.techniq.dev/docs/components/Breadcrumb

Shows how to include icons within breadcrumb items for enhanced visual cues.

```svelte
<script>
  import IconHome from '~icons/heroicons-solid/home';
  import IconChevronRight from '~icons/heroicons-solid/chevron-right';
</script>

<Breadcrumb separatorIcon={IconChevronRight}>
  <BreadcrumbItem href="/">
    <IconHome class="w-4 h-4 mr-2" />
    Home
  </BreadcrumbItem>
  <BreadcrumbItem href="/components">Components</BreadcrumbItem>
  <BreadcrumbItem href="/components/breadcrumb" active>Breadcrumb</BreadcrumbItem>
</Breadcrumb>
```

--------------------------------

### Do not require settings() to be defined

Source: https://next.svelte-ux.techniq.dev/changelog

Removes the requirement for the `settings()` function to be defined before it can be used.

```javascript
Do not require `settings()` to be defined (`68f886e0b3d64edea62bfd896fd0608a3efe87a1`)
```

--------------------------------

### Add BarStack component

Source: https://next.svelte-ux.techniq.dev/changelog

Introduces the new `BarStack` component for creating stacked bar charts.

```javascript
Add BarStack component (`68c9e700bec3e3a4e3a33f7a4bd455e464b5cfee`)
```

--------------------------------

### MultiSelectField with Custom Styling

Source: https://next.svelte-ux.techniq.dev/docs/components/MultiSelectField

Shows how to apply custom CSS classes for styling the MultiSelectField. This allows for theme integration.

```svelte
<script>
  import MultiSelectField from './MultiSelectField.svelte';

  let selectedOptions = [];
  const options = [
    { label: 'Option A', value: 'a' },
    { label: 'Option B', value: 'b' },
  ];
</script>

<MultiSelectField
  bind:selectedOptions
  options={options}
  class="custom-multiselect"
  placeholder="Choose items"
/>

<style>
  .custom-multiselect {
    /* Add your custom styles here */
    border: 1px solid blue;
    border-radius: 4px;
  }
</style>
```

--------------------------------

### RangeSlider with Vertical Orientation

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeSlider

Demonstrates how to render the RangeSlider in a vertical orientation. This is useful for space-constrained layouts.

```javascript
import RangeSlider from "@/components/RangeSlider.svelte";

<RangeSlider
  min={0}
  max={100}
  step={1}
  orientation="vertical"
  bind:value={rangeValue}
/>
```

--------------------------------

### ToggleGroup with Controlled State

Source: https://next.svelte-ux.techniq.dev/docs/components/ToggleGroup

Demonstrates how to control the selected state of ToggleGroup programmatically using the 'value' or 'values' prop.

```svelte
<script lang="ts">
  import { ToggleGroup } from "svelte-ux";

  let controlledValue = "b";
</script>

<ToggleGroup bind:value={controlledValue}>
  <ToggleGroup.Item value="a">A</ToggleGroup.Item>
  <ToggleGroup.Item value="b">B</ToggleGroup.Item>
  <ToggleGroup.Item value="c">C</ToggleGroup.Item>
</ToggleGroup>

<p>Controlled Selected: {controlledValue}</p>

<button on:click={() => controlledValue = "c"}>Select C</button>
```

--------------------------------

### Stack with Alignment

Source: https://next.svelte-ux.techniq.dev/docs/components/Stack

Illustrates aligning items within a stack using the alignItems and justifyContent props. Adjust alignment as needed for your layout.

```javascript
import { Stack } from "@mui/material";

function App() {
  return (
    <Stack direction="row" spacing={2} alignItems="center" justifyContent="space-between">
      <div>Left</div>
      <div>Center</div>
      <div>Right</div>
    </Stack>
  );
}
```

--------------------------------

### Add isEmptyObject() util

Source: https://next.svelte-ux.techniq.dev/changelog

Adds a new utility function `isEmptyObject()` for checking if an object is empty.

```javascript
Add `isEmptyObject()` util (`e2b97b616cd1bdbfd5a6d480c829351a66b30251`)
```

--------------------------------

### Breadcrumb with Custom Separator

Source: https://next.svelte-ux.techniq.dev/docs/components/Breadcrumb

Demonstrates how to customize the separator between breadcrumb items.

```svelte
<Breadcrumb separator=">">
  <BreadcrumbItem href="/">Home</BreadcrumbItem>
  <BreadcrumbItem href="/components">Components</BreadcrumbItem>
  <BreadcrumbItem href="/components/breadcrumb" active>Breadcrumb</BreadcrumbItem>
</Breadcrumb>
```

--------------------------------

### Stacked Progress Bars

Source: https://next.svelte-ux.techniq.dev/docs/components/Progress

Shows multiple progress bars stacked within a single container. Useful for visualizing multiple contributing factors to a total progress.

```html
<div class="progress">
  <div class="progress-bar" style="width: 35%;">35%</div>
  <div class="progress-bar bg-success" style="width: 25%;">25%</div>
  <div class="progress-bar bg-info" style="width: 20%;">20%</div>
</div>
```

--------------------------------

### Formatting Duration Output

Source: https://next.svelte-ux.techniq.dev/docs/components/Duration

Customize the display format of the duration. Options include 'short' and 'long' for different levels of detail.

```svelte
<script>
  import Duration from "./Duration.svelte";
</script>

<Duration duration={3661000} format="long" />
<Duration duration={3661000} format="short" />
```

--------------------------------

### TreeList with Expand/Collapse All

Source: https://next.svelte-ux.techniq.dev/docs/components/TreeList

Provides functionality to expand or collapse all nodes in the TreeList simultaneously. This is useful for managing large, deeply nested trees.

```javascript
import TreeList from "@/components/TreeList";
import { useRef } from 'react';

const treeListRef = useRef();

const expandAll = () => treeListRef.current.expandAll();
const collapseAll = () => treeListRef.current.collapseAll();

<TreeList ref={treeListRef} data={treeData} />
<button onClick={expandAll}>Expand All</button>
<button onClick={collapseAll}>Collapse All</button>
```

--------------------------------

### Drawer with Custom Height

Source: https://next.svelte-ux.techniq.dev/docs/components/Drawer

Control the height of the Drawer using the `height` prop. This is useful for drawers that appear from the top or bottom.

```svelte
<script lang="ts">
  import { Drawer } from 'svelte-ux';
  import { fade } from 'svelte/transition';

  let open = false;
</script>

<Drawer bind:open transition={fade} placement="bottom" height="300px">
  <div class="p-4">
    <p>Drawer with 300px height from the bottom.</p>
  </div>
</Drawer>

<button on:click={() => (open = true)}>Open Bottom Drawer</button>
```

--------------------------------

### Drawer with Escape Key Close

Source: https://next.svelte-ux.techniq.dev/docs/components/Drawer

Enable closing the Drawer by pressing the Escape key. This behavior is managed by the `escClose` prop.

```svelte
<script lang="ts">
  import { Drawer } from 'svelte-ux';
  import { fade } from 'svelte/transition';

  let open = false;
</script>

<Drawer bind:open transition={fade} escClose={true}>
  <div class="p-4">
    <p>Press Escape to close.</p>
  </div>
</Drawer>

<button on:click={() => (open = true)}>Open Esc-Closable Drawer</button>
```

--------------------------------

### Update dependencies

Source: https://next.svelte-ux.techniq.dev/changelog

Updates project dependencies to their latest versions.

```javascript
Update dependencies (`6a266d314dadbca5ef7ed1711351e0a17e2b2b75`)
```

--------------------------------

### Duration with Custom Units

Source: https://next.svelte-ux.techniq.dev/docs/components/Duration

Allows specifying custom units for display, overriding the default behavior. This is useful for non-standard time representations.

```svelte
<script>
  import Duration from "./Duration.svelte";
</script>

<Duration duration={60} unit="minutes" />
```

--------------------------------

### Support simple display value in Field

Source: https://next.svelte-ux.techniq.dev/changelog

The `Field` component now supports passing a `value` for simple display, including handling of empty (null/undefined) values with a custom placeholder.

```javascript
[Field] Support passing `value` for simple display with handling of empty (null/undefined) with custom placeholder (#339)
```

--------------------------------

### Allow disabling dark themes

Source: https://next.svelte-ux.techniq.dev/changelog

Allows disabling `dark` themes, fixing `dark:` modifiers for light-only themes when system settings are set to dark.

```css
Allow disabling `dark` themes (fix `dark:` modifiers for light-only themes with dark system settings) (`42ccce391f6b0f7ba82702a47f03d1d9f998fd04`)
```

--------------------------------

### ProgressCircle with Label

Source: https://next.svelte-ux.techniq.dev/docs/components/ProgressCircle

Illustrates adding a label inside the ProgressCircle to display the current progress value or other relevant information. This enhances user feedback.

```svelte
<script>
  import ProgressCircle from "./ProgressCircle.svelte";

  let progress = 90;
</script>

<ProgressCircle value={progress} showLabel={true} />
```

--------------------------------

### RangeSlider with Custom Thumb

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeSlider

Explains how to use a custom element or component as the thumb for the RangeSlider. This allows for highly customized UI elements.

```javascript
import RangeSlider from "@/components/RangeSlider.svelte";
import CustomThumb from "@/components/CustomThumb.svelte";

<RangeSlider
  min={0}
  max={100}
  step={1}
  thumb={CustomThumb}
  bind:value={rangeValue}
/>
```

--------------------------------

### Grid with Spanning Columns

Source: https://next.svelte-ux.techniq.dev/docs/components/GridTailwind

Illustrates how to make grid items span multiple columns using Tailwind CSS. This is helpful for creating asymmetrical or emphasized grid areas.

```html
<div class="grid grid-cols-3 gap-4">
  <div class="col-span-2">Spans 2 columns</div>
  <div>Regular</div>
  <div>Regular</div>
  <div>Regular</div>
</div>
```

--------------------------------

### RangeSlider with Custom Labels

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeSlider

Shows how to add custom labels to the RangeSlider for better user experience. Labels can be strings or numbers.

```javascript
import RangeSlider from "@/components/RangeSlider.svelte";

<RangeSlider
  min={0}
  max={100}
  step={10}
  labels={["Min", "Mid", "Max"]}
  bind:value={rangeValue}
/>
```

--------------------------------

### Implement type-safe fromEntries helper

Source: https://next.svelte-ux.techniq.dev/changelog

Implements a type-safe `fromEntries` helper function for Object.fromEntries.

```typescript
Implement type-safe fromEntries type helper for Object.fromEntries (#297)
```

--------------------------------

### Pagination with Ellipsis

Source: https://next.svelte-ux.techniq.dev/docs/components/Pagination

Demonstrates the Pagination component's behavior with a large number of pages, showing ellipsis to indicate omitted page numbers. This is the default behavior when many pages are available.

```svelte
<script>
  import Pagination from '$lib/components/Pagination.svelte';

  let currentPage = 1;
  let totalPages = 50; // A large number of pages to trigger ellipsis
</script>

<Pagination bind:currentPage totalPages={totalPages} />
```

--------------------------------

### MultiSelectField with Search Functionality

Source: https://next.svelte-ux.techniq.dev/docs/components/MultiSelectField

Enables search within the MultiSelectField options for easier selection in long lists. Requires the `searchable` prop to be true.

```svelte
<script>
  import MultiSelectField from './MultiSelectField.svelte';

  let selectedOptions = [];
  const options = [
    { label: 'Apple', value: 'apple' },
    { label: 'Banana', value: 'banana' },
    { label: 'Cherry', value: 'cherry' },
    { label: 'Date', value: 'date' },
  ];
</script>

<MultiSelectField
  bind:selectedOptions
  options={options}
  searchable={true}
  placeholder="Search and select"
/>
```

--------------------------------

### tableOrderStore: Use initialDirection

Source: https://next.svelte-ux.techniq.dev/changelog

When changing the column that is currently sorted, the `tableOrderStore` now uses `initialDirection`.

```javascript
[tableOrderStore] Use `initialDirection` when changing column sorted by (`8ea0a4dd4680dc31495b5d4b521b11624760f5e2`)
```

--------------------------------

### Update sumObjects utility

Source: https://next.svelte-ux.techniq.dev/changelog

Updates the `sumObjects` utility function to return summed values as an Array if all processed items are arrays, and to automatically coerce numeric strings to numbers.

```javascript
Update `sumObjects` to return the summed values as an Array if all processed items are arrays (#324)
```

```javascript
Update `sumObjects` to automatically coerce numeric strings to numbers (#324)
```

--------------------------------

### Add FormatType as top-level export

Source: https://next.svelte-ux.techniq.dev/changelog

Adds `FormatType` as a top-level export.

```javascript
Add `FormatType` as top-level export (`d910afe63710f27ddfdace5d3ff4fe4646a39e1b`)
```

--------------------------------

### Add duration utils to top-level export

Source: https://next.svelte-ux.techniq.dev/changelog

Adds duration utility functions to the top-level export.

```javascript
Add duration utils to top-level export (`9afe883235de2d4bf2c3e76200c995e05e4d1a49`)
```

--------------------------------

### RangeField with Initial Value

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeField

Sets the initial value of the RangeField when it is first rendered. This is useful for pre-populating the field.

```html
<RangeField label="Opacity" value={0.5} />
```

--------------------------------

### Add format prop to RangeField

Source: https://next.svelte-ux.techniq.dev/changelog

The `RangeField` component now includes a `format` prop and a corresponding documentation page for enhanced formatting capabilities.

```javascript
[RangeField] Add `format` prop and docs page (`1057214390fea45be95400cc53c65bc05cf639c5`)
```

--------------------------------

### Allow multiple options with same value in SelectField/MenuField

Source: https://next.svelte-ux.techniq.dev/changelog

The `SelectField` and `MenuField` components now allow multiple options to have the same value, provided they are in different groups.

```javascript
[SelectField / MenuField] Allow multiple options with same value, but in different groups (`2a4f3f2d3b2254fcdba39568fff11e066797e594`)
```

--------------------------------

### Update tableOrderStore event handling

Source: https://next.svelte-ux.techniq.dev/changelog

Before this change, `tableOrderStore` expected only the `column` detail. Now it expects the full event object `e` to access `e.detail.column`.

```html
\<Table on:headerClick={(e) =\> tableOrder.onHeaderClick(e.detail.column)} /\>
```

--------------------------------

### ToggleGroup with Disabled Items

Source: https://next.svelte-ux.techniq.dev/docs/components/ToggleGroup

Shows how to disable specific ToggleGroup items by using the 'disabled' prop on ToggleGroup.Item.

```svelte
<script lang="ts">
  import { ToggleGroup } from "svelte-ux";
</script>

<ToggleGroup>
  <ToggleGroup.Item value="one">One</ToggleGroup.Item>
  <ToggleGroup.Item value="two" disabled>Two (Disabled)</ToggleGroup.Item>
  <ToggleGroup.Item value="three">Three</ToggleGroup.Item>
</ToggleGroup>
```

--------------------------------

### RangeField with Event Handling

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeField

Attaches an event handler to the RangeField to capture changes in its value. The `onChange` event provides the new value.

```html
<RangeField label="Volume" onChange={(value) => console.log(value)} />
```

--------------------------------

### Displaying Error Message

Source: https://next.svelte-ux.techniq.dev/docs/components/Badge

Shows how to display an internal server error message. This is typically used for backend communication failures.

```plaintext
Error: 500

## Message:
```
Internal Error
```
```

--------------------------------

### Add extensions to tailwind plugin require statements

Source: https://next.svelte-ux.techniq.dev/changelog

Adds file extensions to the `require` statements for the Tailwind CSS plugin.

```javascript
Add extentions to tailwind plugin require statements (`0a777e71fd211b9719592682baf1fab756cf9e1a`)
```

--------------------------------

### Fix NumberStepper handling of initial 0

Source: https://next.svelte-ux.techniq.dev/changelog

Corrects the handling of the initial value `0` in the `NumberStepper` and `TextField` components.

```javascript
[NumberStepper / TextField] Fix handling of initial `0` (`111c67aa5d0a03b33b727c89db8d432143ed1b55`)
```

--------------------------------

### Display Internal Error Message

Source: https://next.svelte-ux.techniq.dev/docs/components/Avatar

Shows how to display an internal error message. This is typically used for server-side errors.

```html
```
Internal Error
```
```

--------------------------------

### RangeField with Min/Max Values

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeField

Configures a RangeField to accept values only within a specified minimum and maximum range. This is useful for enforcing constraints.

```html
<RangeField label="Temperature" min={-10} max={40} />
```

--------------------------------

### Improve types for Table, Paginate, Selection, Steps, and InfiniteScroll

Source: https://next.svelte-ux.techniq.dev/changelog

Improves type definitions for several components including Table, Paginate, Selection, Steps, and InfiniteScroll.

```typescript
Improve types for Table, Paginate, Selection, Steps, and InfiniteScroll (`fc50ca2d5670596dd9c125725fff1ad38c07e723`)
```

--------------------------------

### Indeterminate ProgressCircle

Source: https://next.svelte-ux.techniq.dev/docs/components/ProgressCircle

Displays an indeterminate ProgressCircle, which is useful when the progress value is unknown or the operation is ongoing without a defined end. This indicates activity.

```svelte
<script>
  import ProgressCircle from "./ProgressCircle.svelte";
</script>

<ProgressCircle indeterminate={true} />
```

--------------------------------

### RangeSlider with Tooltip

Source: https://next.svelte-ux.techniq.dev/docs/components/RangeSlider

Configures the RangeSlider to display a tooltip showing the current value. The tooltip appears on hover or drag.

```javascript
import RangeSlider from "@/components/RangeSlider.svelte";

<RangeSlider
  min={0}
  max={100}
  step={1}
  tooltip={true}
  bind:value={rangeValue}
/>
```

--------------------------------

### Add step support to NumberStepper

Source: https://next.svelte-ux.techniq.dev/changelog

The `NumberStepper` component now supports the `step` attribute, enabling decimal stepping and HTML form validation.

```javascript
[NumberStepper] Add `step` support (to support `decimal` including HTML form validation) (#319)
```

--------------------------------

### Displaying an Error Message

Source: https://next.svelte-ux.techniq.dev/docs/components/Notification

This snippet shows how to render an error message within a notification component. It is typically used to inform the user about system failures or unexpected issues.

```html
## Message:
```
Internal Error
```
```

--------------------------------

### Make paginationStore.slice use input type for output type

Source: https://next.svelte-ux.techniq.dev/changelog

Ensures that the `paginationStore.slice` function uses the type of the input array as the output type for better type safety.

```typescript
Make paginationStore.slice use the type of the input as the output type (#265)
```

--------------------------------

### Customize CopyButton notification and return value

Source: https://next.svelte-ux.techniq.dev/changelog

Allows customization of the `CopyButton` notification and enables it to accept a function that returns a string for dynamic notification messages.

```javascript
Allow customizing CopyButton notification (#346)
```

```javascript
Allow CopyButton to take a function that returns a string (#346)
```

--------------------------------

### Fix ToggleOption value conversion

Source: https://next.svelte-ux.techniq.dev/changelog

Fixes an issue where the `ToggleOption` value was sometimes converted to a string due to `bind:value`.

```javascript
Fix ToggleOption value sometimes being converted to string due to bind:value (#294)
```

--------------------------------

### Support color prop in BarStack

Source: https://next.svelte-ux.techniq.dev/changelog

The `BarStack` component now supports passing a `color` property for individual data items, in addition to `classes` and `style`.

```javascript
[BarStack] Support passing `color` for data item (along with `classes` and `style`) (`35aa4e59dcec3aaf2b8e344fb2b01eb6191bd1e8`)
```

--------------------------------

### tableOrderStore: Ignore column.orderBy when false

Source: https://next.svelte-ux.techniq.dev/changelog

The `tableOrderStore` now ignores `column.orderBy` when it is explicitly set to `false`.

```javascript
[tableOrderStore] Ignore `column.orderBy` when `false` (`74f05e7b70eba97cf86150be6cd3c070cd003b2c`)
```

--------------------------------

### ToggleGroup: Support passing name prop

Source: https://next.svelte-ux.techniq.dev/changelog

The `ToggleGroup` component now supports passing a `name` prop to group underlying radio options. This improves keyboard navigation and form support.

```javascript
[ToggleGroup] Support passing `name` prop to group underlying radio options. Improves keyboard navigation and form support (`e4b66e85d07d994b3203208f78dd1b76c4018077`)
```

--------------------------------

### Re-export FormatNumberStyle and PeriodType

Source: https://next.svelte-ux.techniq.dev/changelog

Re-exports `FormatNumberStyle` and `PeriodType` from `utils/format.ts` for improved convenience and accessibility.

```javascript
Re-export `FormatNumberStyle` and `PeriodType` from `utils/format.ts` for convenience (`acd5d9646c3f7807d9ce758468a663fa31e93426`)
```
Tokens:
Raw