Jelly UI

https://jelly-ui.com
Admin
Jelly UI is a dependency-free Web Components library for soft, tactile product interfaces, offering...
Tokens:64,396
Snippets:602
Trust Score:5.4
Update:3 months ago
Show doc for...
Tokens:
Raw
### jelly-textarea Examples

Source: https://jelly-ui.com/api/index.html

Examples demonstrating the usage of the jelly-textarea component for various scenarios, including auto-growing, capped height, and RTL support.

```APIDOC
## jelly-textarea Examples

#### Auto-growing notes field
```html
<jelly-textarea label="Notes" placeholder="Notes" rows="4"></jelly-textarea>
```

#### Capped height with a custom max
```html
<jelly-textarea size="large" label="Feedback" name="feedback" no-autofill
  style="--jelly-textarea-max-height: 220px"></jelly-textarea>
```

#### RTL textarea (caret ripple mirrors)
```html
<div dir="rtl">
  <jelly-textarea label="הערות" placeholder="הערות" rows="3"></jelly-textarea>
</div>
```
```

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

### Basic jelly-radio-group Example

Source: https://jelly-ui.com/api/index.html

Demonstrates a simple jelly-radio-group with a label and multiple jelly-radio options. Ensure jelly-radio is imported and available in the scope.

```html
<jelly-radio-group label="Plan">
  <jelly-radio name="plan" value="free" checked>Free</jelly-radio>
  <jelly-radio name="plan" value="pro">Pro</jelly-radio>
  <jelly-radio name="plan" value="team">Team</jelly-radio>
</jelly-radio-group>
```

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

### Basic jelly-segmented Example

Source: https://jelly-ui.com/api/index.html

Demonstrates a basic jelly-segmented component with three options: Day, Week, and Month. The 'week' option is pre-selected.

```html
<jelly-segmented value="week">
  <jelly-segment value="day">Day</jelly-segment>
  <jelly-segment value="week">Week</jelly-segment>
  <jelly-segment value="month">Month</jelly-segment>
</jelly-segmented>
```

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

### jelly-collapsible Component Usage

Source: https://jelly-ui.com/api

Example of how to use the jelly-collapsible component in HTML, demonstrating how to set attributes and use slots.

```APIDOC
## jelly-collapsible Component

A bouncy disclosure section: a header button springs its panel open and closed.

### Attributes
Name| Type| Default| Description  
---|---|---|---
`open`| boolean| ``| The expanded state (reflected).
`size`| "small"|"medium"|"large"| `medium`| Density scale.

### Properties
Name| Type| Description  
---|---|---
`open`| boolean| Get or set the expanded state.

### Methods
Signature| Description  
---|---
`toggle(force?)`| Flips (or forces) the open state; fires toggle only on a real change.
`focus(options?)`| Focuses the header button.

### Events
Event| detail| Description  
---|---|---
`toggle`| -| Fires once per open/close change.

### Slots
Slot| Description  
---|---
`header`| The header label.
`(default)`| The collapsible content.

### CSS custom properties
Property| Default| Description  
---|---|---
`--jelly-collapsible-padding-block`| `13px`| Header vertical padding.
`--jelly-collapsible-padding-inline`| `14px`| Header horizontal padding.
`--jelly-collapsible-radius`| `12px`| Header corner radius.

### Shadow parts
Part| Description  
---|---
`header`| The header button.

### Keyboard
Keys| Action  
---|---
`Enter / Space`| Toggles the section.

### Example Usage
```html
<jelly-collapsible open>
  <span slot="header">What moves?</span>
  The surface, not the text.
</jelly-collapsible>
```
```

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

### RTL field (ripples follow the caret)

Source: https://jelly-ui.com/api

Example demonstrating jelly-input in a Right-To-Left context.

```APIDOC
## RTL field (ripples follow the caret)

### Description
Example demonstrating jelly-input in a Right-To-Left context.

### Request Example
```html
<div dir="rtl">
  <jelly-input label="שם מלא" placeholder="שם מלא"></jelly-input>
</div>
```
```

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

### Basic Jelly Select with Event Listener

Source: https://jelly-ui.com/api/index.html

Demonstrates how to use the jelly-select component with options and listen for the 'change' event to get the selected value.

```html
<script type="module" src="./src/components/select.js"></script>

<jelly-select label="Plan" placeholder="Choose a plan">
  <jelly-option value="free">Free</jelly-option>
  <jelly-option value="pro" selected>Pro</jelly-option>
  <jelly-option value="team" disabled>Team (coming soon)</jelly-option>
</jelly-select>

<script>
  document.querySelector('jelly-select')
    .addEventListener('change', (event) => console.log(event.target.value));
</script>
```

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

### Jelly Alert Examples

Source: https://jelly-ui.com/api/index.html

Demonstrates the usage of the jelly-alert component with different tones and dismissibility. The first line of content acts as a title.

```html
<jelly-alert tone="success"><strong>Saved!</strong> Your changes are live.</jelly-alert>
<jelly-alert tone="danger" dismissible>Something broke.</jelly-alert>
```

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

### Jelly Segmented Control Example

Source: https://jelly-ui.com/api/index.html

Defines a jelly-segmented control with two jelly-segment options, one of which is initially selected.

```html
<jelly-segmented>
  <jelly-segment value="on" selected>On</jelly-segment>
  <jelly-segment value="off">Off</jelly-segment>
</jelly-segmented>
```

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

### Basic Tooltip Example

Source: https://jelly-ui.com/

This snippet demonstrates how to use the <jelly-tooltip> component with an embedded jelly-icon-button. The tooltip appears on hover or focus.

```html
<jelly-tooltip>
  <jelly-icon-button label="Copy">
  <svg width="18" height="18" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
  <path d="M9.25 7C9.66421 7 10 7.33579 10 7.75C10 8.12656 9.72249 8.4383 9.36083 8.49187L9.25 8.5H7C5.067 8.5 3.5 10.067 3.5 12C3.5 13.864 4.95707 15.3876 6.79435 15.4941L7 15.5H9.25C9.66421 15.5 10 15.8358 10 16.25C10 16.6266 9.72249 16.9383 9.36083 16.9919L9.25 17H7C4.23858 17 2 14.7614 2 12C2 9.32226 4.10496 7.13615 6.75045 7.00612L7 7H9.25ZM17 7C19.7614 7 22 9.23858 22 12C22 14.6777 19.895 16.8638 17.2495 16.9939L17 17H14.75C14.3358 17 14 16.6642 14 16.25C14 15.8734 14.2775 15.5617 14.6392 15.5081L14.75 15.5H17C18.933 15.5 20.5 13.933 20.5 12C20.5 10.136 19.0429 8.6124 17.2057 8.50594L17 8.5H14.75C14.3358 8.5 14 8.16421 14 7.75C14 7.37344 14.2775 7.0617 14.6392 7.00813L14.75 7H17ZM7 11.25H17C17.4142 11.25 17.75 11.5858 17.75 12C17.75 12.3797 17.4678 12.6935 17.1018 12.7432L17 12.75H7C6.58579 12.75 6.25 12.4142 6.25 12C6.25 11.6203 6.53215 11.3065 6.89823 11.2568L7 11.25Z"/>
  </svg>
  </jelly-icon-button>
</jelly-tooltip>
```

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

### Basic Jelly Buttons

Source: https://jelly-ui.com/api/index.html

Demonstrates the creation of basic jelly buttons with different variants and sizes. Includes a disabled button example.

```html
<jelly-button>Create account</jelly-button>
<jelly-button variant="rose" size="small">Delete</jelly-button>
<jelly-button variant="platinum" size="large" disabled>Unavailable</jelly-button>
```

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

### Jelly Tabs with Tab Panels Example

Source: https://jelly-ui.com/api/index.html

Implement tabbed navigation using <jelly-tabs> and <jelly-tab-panel>. The <jelly-tabs> component manages the active state and provides keyboard navigation. Each <jelly-tab-panel> should have a unique 'label' attribute that corresponds to a tab.

```html
<jelly-tabs>
  <jelly-tab-panel label="Overview" active>Project summary.</jelly-tab-panel>
  <jelly-tab-panel label="Activity">Recent events.</jelly-tab-panel>
</jelly-tabs>
```

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

### Jelly Popover Example

Source: https://jelly-ui.com/api/index.html

A jelly-popover triggered by a jelly-button, with custom content. Use this for non-modal, click-triggered floating panels.

```html
<jelly-popover placement="bottom" label="Options">
  <jelly-button slot="trigger" size="small">Options</jelly-button>
  <div slot="content">Anything can live here.</div>
</jelly-popover>
```

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

### Jelly Theme with Card and Controls

Source: https://jelly-ui.com/

Demonstrates the use of the jelly-theme component to scope design tokens and provides an example of a card containing various interactive controls like sliders, progress bars, checkboxes, and switches.

```html
<jelly-theme>
  <jelly-card style="padding: 26px; min-width: 320px;">
  <div style="display: grid; gap: 24px; justify-items: stretch;">
  <div style="display: grid; gap: 4px;">
  <strong style="font-size: 16px;">Workspace controls</strong>
  <span style="font-size: 13px; opacity: 0.68;">Preview the scoped theme</span>
  </div>
  <jelly-slider label="Volume" value="62" style="width: 100%;">
  </jelly-slider>
  <jelly-progress label="Completion" value="62" style="width: 100%;">
  </jelly-progress>
  <div style="display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px;">
  <jelly-checkbox checked>Sync</jelly-checkbox>
  <jelly-switch checked>Notifications</jelly-switch>
  </div>
  </div>
  </jelly-card>
</jelly-theme>
```

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

### Basic Jelly Menu with Button Trigger

Source: https://jelly-ui.com/api/index.html

This example demonstrates a basic jelly-menu with a jelly-button as its trigger. The menu contains several jelly-menu-item elements, including a danger-styled item for destructive actions. Items are dynamically re-read on open, ensuring additions are always visible.

```html
<jelly-menu>
  <jelly-button slot="trigger" size="small">Actions</jelly-button>
  <jelly-menu-item value="edit">Edit</jelly-menu-item>
  <jelly-menu-item value="duplicate">Duplicate</jelly-menu-item>
  <jelly-menu-item value="delete" danger>Delete</jelly-menu-item>
</jelly-menu>
```

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

### Jelly Menu Item Example

Source: https://jelly-ui.com/api/index.html

A jelly-menu-item with a value and danger styling. Use this for declarative menu entries with destructive actions.

```html
<jelly-menu-item value="delete" danger>Delete</jelly-menu-item>
```

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

### Jelly Skeleton Placeholder Examples

Source: https://jelly-ui.com/api/index.html

Use the `shape` attribute to define the placeholder's form. Inline styles can override preset sizes.

```html
<jelly-skeleton style="width: 220px; height: 16px"></jelly-skeleton>
```

```html
<jelly-skeleton shape="circle" style="width: 44px; height: 44px"></jelly-skeleton>
```

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

### jelly-segmented Basic Usage

Source: https://jelly-ui.com/api/index.html

Provides an example of how to use jelly-segment components within a jelly-segmented parent to create a selection control.

```APIDOC
## jelly-segmented Basic Usage

### Description
Demonstrates the structure for creating a segmented control using `jelly-segmented` and `jelly-segment`.

### Endpoint
N/A (Web Component Usage)

### Request Example
```html
<jelly-segmented>
  <jelly-segment value="on" selected>On</jelly-segment>
  <jelly-segment value="off">Off</jelly-segment>
</jelly-segmented>
```
```

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

### Jelly Tab Panel Example

Source: https://jelly-ui.com/api/index.html

Use this component to create a single tab panel within a <jelly-tabs> component. It displays content when its corresponding tab is active. Ensure it has a 'label' attribute for accessibility and identification.

```html
<jelly-tab-panel label="Overview" active>…</jelly-tab-panel>
```

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

### Basic Usage

Source: https://jelly-ui.com/api

Demonstrates the basic implementation of the jelly-switch component with its default settings.

```APIDOC
## jelly-switch

### Description
A draggable jelly switch: a capsule track whose thumb stretches like a liquid drop and whose color crossfades between off and on.

### Attributes
- `checked` (boolean) - `false` - Whether the switch is on. Reflected; updated by taps, drags and keyboard toggles.
- `label` (string) - `` - Explicit accessible name mapped to the inner input's aria-label; overrides the slotted text for assistive technology.
- `size` (string) - `medium` - Track geometry: 50x28 / 62x34 / 74x40 px. The sm / md / lg aliases are accepted.
- `value` (string) - `on` - The form value submitted while on (nothing is submitted when off).
- `name` (string) - `` - Form field name used on submission (native form association through ElementInternals).
- `variant` (string) - `theme accent` - The "on" track hue, resolved through theme tokens. Explicit variants also pair the thumb foreground with the variant's on-color.

### Properties
- `checked` (boolean) - Gets/sets the on state (reflects the attribute).
- `value` (string) - Gets/sets the submitted form value; defaults to "on".

### Methods
- `focus(options?: FocusOptions): void` - Moves focus to the hidden native input.

### Events
- `change` - Fired when a user interaction (tap, drag release, or Space/Enter) actually changes the state. Composed and bubbling; not fired for programmatic changes or drags that settle back.

### Slots
- `(default)` - The visible label text next to the track.

### Example
```html
<jelly-switch checked>Wi-Fi</jelly-switch>
```
```

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

### Basic Icon Buttons with Fluent Icons

Source: https://jelly-ui.com/api/index.html

Demonstrates how to create and populate icon buttons using built-in Fluent icons. Ensure the jellyIcon function is imported.

```html
<jelly-icon-button id="search" label="Search"></jelly-icon-button>
<jelly-icon-button id="favorite" label="Favorite" variant="rose"></jelly-icon-button>
<jelly-icon-button id="settings" label="Settings" variant="graphite" size="large"></jelly-icon-button>

<script type="module">
  import { jellyIcon } from './package.js';

  search.innerHTML   = jellyIcon('search');
  favorite.innerHTML = jellyIcon('heart');
  settings.innerHTML = jellyIcon('settings');
</script>
```

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

### Invite code without autofill

Source: https://jelly-ui.com/api

Example of configuring jelly-input to disable autofill features.

```APIDOC
## Invite code without autofill

### Description
Example of configuring jelly-input to disable autofill features.

### Request Example
```html
<jelly-input size="large" label="Invite code" placeholder="Invite code" no-autofill></jelly-input>
```
```

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

### Email field in a form

Source: https://jelly-ui.com/api/index.html

Example of how to use the jelly-input component for an email field within a form.

```APIDOC
## Email field in a form

### Request Example
```html
<form>
  <jelly-input label="Email" type="email" name="email" placeholder="you@example.com"></jelly-input>
</form>
```
```

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

### Sizes and Variants

Source: https://jelly-ui.com/api/index.html

Demonstrates how to set the size and color variant of the jelly-switch.

```APIDOC
## jelly-switch

### Description
A draggable jelly switch: a capsule track whose thumb stretches like a liquid drop and whose color crossfades between off and on.

### Attributes
- `size` (string) - `medium` - Track geometry: 50x28 / 62x34 / 74x40 px. The sm / md / lg aliases are accepted.
- `variant` (string) - `theme accent` - The "on" track hue, resolved through theme tokens. Explicit variants also pair the thumb foreground with the variant's on-color.

### Example
```html
<jelly-switch size="small" variant="azure">Bluetooth</jelly-switch>
<jelly-switch size="large" variant="rose" checked>Do not disturb</jelly-switch>
```
```

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

### Invite code without autofill

Source: https://jelly-ui.com/api/index.html

Example demonstrating how to disable autofill for an invite code input using the `no-autofill` attribute.

```APIDOC
## Invite code without autofill

### Request Example
```html
<jelly-input size="large" label="Invite code" placeholder="Invite code" no-autofill></jelly-input>
```
```

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

### RTL Mirroring and Change Events

Source: https://jelly-ui.com/api/index.html

Shows how the switch behaves in an RTL layout and how to listen for the `change` event.

```APIDOC
## jelly-switch

### Description
A draggable jelly switch: a capsule track whose thumb stretches like a liquid drop and whose color crossfades between off and on.

### Attributes
- `checked` (boolean) - `false` - Whether the switch is on. Reflected; updated by taps, drags and keyboard toggles.

### Events
- `change` (null) - Fired when a user interaction (tap, drag release, or Space/Enter) actually changes the state. Composed and bubbling; not fired for programmatic changes or drags that settle back.

### Example
```html
<div dir="rtl">
  <jelly-switch id="sw" checked>الإشعارات</jelly-switch>
</div>
<script>
  document.getElementById('sw').addEventListener('change', (e) => {
    console.log('now', e.target.checked ? 'on' : 'off');
  });
</script>
```
```

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

### Jelly Range Sizes and Variants

Source: https://jelly-ui.com/api/index.html

Shows how to configure jelly-range with different variants (mint, rose) and sizes (large, small), along with step increments.

```html
<jelly-range label="Threshold" variant="mint" size="large" step="5" low="20" high="70"></jelly-range>
<jelly-range label="Alert band" variant="rose" size="small"></jelly-range>
```

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

### Basic jelly-tooltip Usage

Source: https://jelly-ui.com/api/index.html

Demonstrates how to use the jelly-tooltip component with a jelly-icon-button. The tooltip text is set via the 'text' attribute and its placement is configured.

```html
<jelly-tooltip text="Copy link" placement="top">
  <jelly-icon-button id="copy" label="Copy"></jelly-icon-button>
</jelly-tooltip>

<script type="module">
  import { jellyIcon } from './package.js';

  copy.innerHTML = jellyIcon('link', { size: 18 });
</script>
```

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

### Open Jelly Drawer

Source: https://jelly-ui.com/api/index.html

Demonstrates how to open a jelly-drawer using a jelly-button. The drawer opens when the button is clicked, setting its `open` property to true.

```html
<jelly-button size="small" onclick="this.nextElementSibling.open = true">Open drawer</jelly-button>
<jelly-drawer label="Navigation">
  <h3>Drawer</h3>
  <p>I float in from the inline-end.</p>
</jelly-drawer>
```

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

### RTL field (ripples follow the caret)

Source: https://jelly-ui.com/api/index.html

Example showcasing an RTL (Right-to-Left) input field where ripples correctly follow the caret direction.

```APIDOC
## RTL field (ripples follow the caret)

### Request Example
```html
<div dir="rtl">
  <jelly-input label="שם מלא" placeholder="שם מלא"></jelly-input>
</div>
```
```

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

### Size Propagation in jelly-radio-group

Source: https://jelly-ui.com/api/index.html

Illustrates how the 'size' attribute on jelly-radio-group propagates to child jelly-radio elements that do not have their own size defined. This example shows 'small' and 'large' sizes.

```html
<div style="display: grid; gap: 18px">
  <jelly-radio-group label="Small" size="small">
    <jelly-radio name="s1" value="a" checked>Alpha</jelly-radio>
    <jelly-radio name="s1" value="b">Beta</jelly-radio>
  </jelly-radio-group>
  <jelly-radio-group label="Large" size="large">
    <jelly-radio name="s2" value="a" checked>Alpha</jelly-radio>
    <jelly-radio name="s2" value="b">Beta</jelly-radio>
  </jelly-radio-group>
</div>
```

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

### Scoped Dark Mode with jelly-theme

Source: https://jelly-ui.com/api/index.html

Use the jelly-theme component to apply a dark mode to its subtree. This example shows a jelly-card with a jelly-button inside a dark-themed subtree.

```html
<jelly-theme mode="dark">
  <jelly-card style="padding: 4px">
    <jelly-button variant="mint">Dark-token subtree</jelly-button>
  </jelly-card>
</jelly-theme>
```

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

### Full-Width Jelly Button

Source: https://jelly-ui.com/api/index.html

Illustrates how to make a jelly button occupy the full width of its container by using the 'block' attribute. The example is constrained within a div for demonstration.

```html
<div style="max-width: 360px">
  <jelly-button block size="large">Continue</jelly-button>
</div>
```

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

### Jelly Skeleton Placeholder with Custom Size

Source: https://jelly-ui.com/api

Demonstrates using jelly-skeleton for a line-shaped placeholder with specified width and height. This is useful for loading content.

```html
<jelly-skeleton style="width: 220px; height: 16px"></jelly-skeleton>
```

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

### Basic jelly-collapsible Usage

Source: https://jelly-ui.com/api/index.html

Demonstrates how to use the jelly-collapsible component with the 'open' attribute set. The content within the 'header' slot defines the collapsible header, and the default slot contains the collapsible content.

```html
<jelly-collapsible open>
  <span slot="header">What moves?</span>
  The surface, not the text.
</jelly-collapsible>
```

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

### Custom Accent with jelly-theme

Source: https://jelly-ui.com/api/index.html

Apply a custom accent color to a subtree using the jelly-theme component. This example sets the mode to 'auto' and specifies a hex color for the accent, applied to a jelly-slider.

```html
<jelly-theme mode="auto" accent="#7C3AED">
  <jelly-slider value="60"></jelly-slider>
</jelly-theme>
```

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

### Listening for Radio Button Selection Changes

Source: https://jelly-ui.com/api/index.html

Shows how to attach an event listener to a group of radio buttons to detect when a new option is selected. The example logs the value of the selected radio button to the console.

```html
<div id="hues">
  <jelly-radio name="hue" value="mint" variant="mint" checked>Mint</jelly-radio>
  <jelly-radio name="hue" value="rose" variant="rose">Rose</jelly-radio>
</div>
<script>
  document.getElementById('hues').addEventListener('change', (e) => {
    console.log('picked', e.target.value);
  });
</script>
```

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

### jelly-range Sizes and Variants

Source: https://jelly-ui.com/api/index.html

Illustrates how to configure different sizes and visual variants for the jelly-range component.

```APIDOC
## jelly-range Sizes and Variants

### Description
Demonstrates the usage of `variant` and `size` attributes for customizing the jelly-range component.

### Endpoint
N/A (Web Component Usage)

### Parameters
#### Attributes
- **label** (string) - Required - The label for the range.
- **variant** (string) - Optional - The visual style of the range (e.g., 'mint', 'rose').
- **size** (string) - Optional - The size of the range (e.g., 'large', 'small').
- **step** (number) - Optional - The increment step for the range values.
- **low** (number) - Required - The initial lower bound of the selected range.
- **high** (number) - Required - The initial upper bound of the selected range.

### Request Example
```html
<jelly-range label="Threshold" variant="mint" size="large" step="5" low="20" high="70"></jelly-range>
<jelly-range label="Alert band" variant="rose" size="small"></jelly-range>
```
```

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

### Slider in a Form with Event Listener

Source: https://jelly-ui.com/api/index.html

Shows how to integrate the jelly-slider into an HTML form using the 'name' attribute for form submission. It also includes a JavaScript example to listen for the 'change' event, which fires when the value is committed.

```html
<form id="mix">
  <jelly-slider name="volume" label="Volume" value="60"></jelly-slider>
</form>
<script type="module">
  import './package.js';
  document.querySelector('jelly-slider').addEventListener('change', (event) => {
    console.log('committed', event.target.value);
  });
</script>
```

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

### Basic Usage

Source: https://jelly-ui.com/api/index.html

A simple jelly-switch with a label. The `checked` attribute sets the initial state to 'on'.

```APIDOC
## jelly-switch

### Description
A draggable jelly switch: a capsule track whose thumb stretches like a liquid drop and whose color crossfades between off and on.

### Attributes
- `checked` (boolean) - `false` - Whether the switch is on. Reflected; updated by taps, drags and keyboard toggles.
- `label` (string) - `` - Explicit accessible name mapped to the inner input's aria-label; overrides the slotted text for assistive technology.

### Example
```html
<jelly-switch checked>Wi-Fi</jelly-switch>
```
```

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

### Basic Usage

Source: https://jelly-ui.com/api/index.html

This snippet shows the basic implementation of the jelly-otp component with a default length of 6 digits.

```APIDOC
## jelly-otp
A one-time-code input: one box per digit with typing, backspace, arrow and paste handling.

### Description
A component for inputting one-time codes, with features like individual digit boxes, keyboard navigation, and paste handling.

### Attributes
- `length` (number, default: `6`): How many digit boxes to render.
- `size` ("small"|"medium"|"large", default: `medium`): Box density scale.
- `variant` ("white"|"rose"|"amber"|"azure"|"mint"|"platinum"|"graphite", default: `(theme accent)`): Caret and focus accent hue.
- `disabled` (boolean, default: `false`): Disables every box.
- `label` (string, default: `One-time code`): Accessible name for the digit group.
- `name` (string, default: ``): Form field name used on submission.

### Properties
- `value` (string): Get or set the joined code across all boxes.

### Methods
- `focus(options?)`: Focuses the first box.

### Events
- `input`: Fires on every digit change.
- `change`: Fires when the code reaches full length.
- `complete` ({ value }): Fires when every box is filled, carrying the value.

### CSS custom properties
- `--jelly-otp-width`: Box width.
- `--jelly-otp-height`: Box height.
- `--jelly-otp-gap`: Gap between boxes.
- `--jelly-otp-font-size`: Digit font size.
- `--jelly-otp-radius`: Box corner radius.
- `--jelly-otp-accent`: Caret color.
- `--jelly-ring`: Focus border and outline color.

### Keyboard
- `0–9`: Fills the box and hops to the next.
- `Backspace`: Clears; on an empty box, hops back.
- `Arrow Left / Right`: Move between boxes.
- `Paste`: Distributes pasted digits across the remaining boxes.

### Example
```html
<jelly-otp length="6"></jelly-otp>
```
```

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

### Jelly Select with Sizes and Variants

Source: https://jelly-ui.com/api/index.html

Shows how to customize the appearance of jelly-select components using 'size' and 'variant' attributes.

```html
<script type="module" src="./src/components/select.js"></script>

<jelly-select size="small" variant="mint" label="Region" placeholder="Region">
  <jelly-option value="eu">Europe</jelly-option>
  <jelly-option value="us">United States</jelly-option>
</jelly-select>

<jelly-select size="large" variant="rose" label="Priority" value="high">
  <jelly-option value="low">Low</jelly-option>
  <jelly-option value="high">High</jelly-option>
</jelly-select>
```

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

### jelly-input Methods

Source: https://jelly-ui.com/api

Enables programmatic control over the jelly-input's focus state.

```APIDOC
## jelly-input Methods

### Description
Enables programmatic control over the jelly-input's focus state.

### Methods
Signature| Description  
---|---
`focus(options?: FocusOptions)`| Routes programmatic focus into the inner native input.  
```

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

### Sizes and Variants

Source: https://jelly-ui.com/api/index.html

Demonstrates different size and variant options for the jelly-slider.

```APIDOC
## jelly-slider

### Description
Customizable jelly-slider with various size and color options.

### Attributes
- `label` (string) - Accessible name for the slider.
- `variant` (string) - Accent hue for the fill and thumb. Accepted values: "white", "rose", "amber", "azure", "mint", "platinum", "graphite". Defaults to theme accent.
- `size` (string) - Size scale of the slider. Accepted values: "small", "medium", "large". Defaults to `medium`.
- `step` (number) - Increment used by keyboard stepping. If missing or non-positive, keyboard steps fall back to 1/100 of the span.
- `value` (number) - Current value of the slider.

### Example
```html
<jelly-slider label="Warmth" variant="amber" size="small" step="5" value="25"></jelly-slider>
<jelly-slider label="Growth" variant="mint" size="large" value="70"></jelly-slider>
```
```

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

### Form Integration and Change Event

Source: https://jelly-ui.com/api/index.html

Shows how to integrate the jelly-slider into a form and listen for the 'change' event.

```APIDOC
## jelly-slider

### Description
Integrate the jelly-slider into a form and handle the 'change' event for committed value updates.

### Attributes
- `name` (string) - Form field name for standard form-associated custom element behavior.
- `label` (string) - Accessible name for the slider.
- `value` (number) - Initial value of the slider.

### Events
- `change` - Fired when a value is committed: on pointer release/cancel after a drag, or after each keyboard step. Composed and bubbling.

### Example
```html
<form id="mix">
  <jelly-slider name="volume" label="Volume" value="60"></jelly-slider>
</form>
<script type="module">
  import './package.js';
  document.querySelector('jelly-slider').addEventListener('change', (event) => {
    console.log('committed', event.target.value);
  });
</script>
```
```
Tokens:
Raw