npm package: @ro-kit/ui-widgets
Description: <h2>See <a href="https://ui-widgets-bea86a.pages.ulb.tu-darmstadt.de/">demo here</a>.</h2>
Author: ULB Darmstadt
Latest version: 1.0.43

<h2>See <a href="https://ui-widgets-bea86a.pages.ulb.tu-darmstadt.de/">demo here</a>.</h2>

This package provides a set of Lit-based web components under the `rokit-*` prefix. All components inherit shared theme tokens from `RokitElement` and can be styled with CSS variables on the host.

Shared tokens (set on any component host):
- `--rokit-primary-color` (default: `#008877`)
- `--rokit-error-color` (default: `#F03333`)
- `--rokit-background-color` (default: `#FFF`)
- `--rokit-light-background-color` (default: `color-mix(in srgb, var(--rokit-background-color) 97%, currentColor)`)
- `--rokit-light-background-darker-color` (default: `color-mix(in srgb, var(--rokit-light-background-color) 80%, currentColor)`)
- `--rokit-shadow-color` (default: `color-mix(in srgb, currentColor 40%, transparent)`)
- `--rokit-list-indent` (default: `1em`)
- `--rokit-list-max-height` (default: `300`)
- `--rokit-caret-size` (default: `0.5em`)
- `--rokit-transition-duration` (default: `0.2s`)

Loading indicator: add the `loading` class on any component host to show a spinner on parts marked with `loader`.
## `rokit-button`
A button with optional icon/primary/text styles.

Usage:
```html
<rokit-button>Default</rokit-button>
<rokit-button primary>Primary</rokit-button>
<rokit-button text>Text</rokit-button>
<rokit-button icon class="clear" title="Close"></rokit-button>
<rokit-button href="/docs">Link button</rokit-button>
```

Attributes/properties:
- `dense` (boolean) Compact spacing.
- `primary` (boolean) Use primary colors.
- `text` (boolean) Text-only button styling.
- `icon` (boolean) Icon-only circular button.
- `rounded` (boolean) Pill shape.
- `disabled` (boolean) Disables interaction.
- `href` (string) Renders as an `<a>`.
- `class="clear"` shows an × icon via CSS.
- `class="caret"` shows a caret icon; add `down` or `right` to rotate.

Parts (`::part`):
- `button` The `<button>` or `<a>` element.
- `loader` Loading spinner anchor.

Example styling:
```css
rokit-button::part(button) {
  border-radius: 8px;
}
```

## `rokit-collapsible`
Expandable/collapsible panel with header and content.

Usage:
```html
<rokit-collapsible label="Details" open>
  <div>Content</div>
</rokit-collapsible>
```

Attributes/properties:
- `open` (boolean) Controls open state.
- `label` (string) Header label (can be overridden by slot).
- `maxHeight` (number) Max content height in pixels.
- `dense` (boolean) Compact header.
- `disabled` (boolean) Disables toggling.
- `headerInactive` (boolean) Only toggle via caret button.

Slots:
- `label` Header label content.
- `prefix` Header leading content.
- `pre-suffix` Header trailing content before caret.
- `suffix` Header trailing content after caret.
- default Slot for content.

Parts (`::part`):
- `header` Header container.
- `prefix` Header prefix slot.
- `label` Header label slot.
- `suffix` Header suffix slot.
- `toggle` Caret button.
- `content` Content container.
- `loader` Loading spinner anchor on suffix slot.

Example styling:
```css
rokit-collapsible::part(header) {
  background: var(--rokit-light-background-color);
}
rokit-collapsible::part(content) {
  padding: 12px;
}
```

## `rokit-input`
Text input with floating label and optional clear button.

Usage:
```html
<rokit-input name="email" label="Email" required></rokit-input>
<rokit-input type="number" label="Age" min="0" max="120"></rokit-input>
```

Attributes/properties:
- `dense` (boolean) Compact spacing.
- `type` (string) Input type (default `text`).
- `name`, `value`, `label`, `placeholder`.
- `required`, `disabled`, `readonly`.
- `clearable` (boolean) Shows clear button.
- `sticky` (boolean) Keeps label floated.
- `pattern`, `minLength`, `maxLength`, `min`, `max`, `step`.
- `minWidth` (number) Minimum wrapper width.
- `autoGrowLabelWidth` (boolean) Adapts min width to label.
- `supportingText` (string) Supporting text.

Slots:
- `prefix` Leading content.
- `suffix` Trailing content.
- `supportingText` Supporting text content.

Parts (`::part`):
- `prefix` Prefix slot.
- `label` Floating label.
- `input` Native `<input>`.
- `suffix` Suffix slot.
- `supportingText` Supporting text container.
- `loader` Loading spinner anchor on suffix slot.

Example styling:
```css
rokit-input::part(input) {
  color: #222;
}
rokit-input::part(supportingText) {
  color: #666;
}
```

## `rokit-textarea`
Textarea variant of `rokit-input` with auto-resize options.

Usage:
```html
<rokit-textarea label="Notes" rows="4" resize="vertical"></rokit-textarea>
<rokit-textarea label="Auto" resize="auto"></rokit-textarea>
```

Attributes/properties:
- Inherits all `rokit-input` attributes.
- `dense` (boolean) Compact spacing.
- `rows` (number) Visible rows.
- `cols` (string) Column count.
- `resize` (`none` | `both` | `vertical` | `horizontal` | `auto`).

Parts (`::part`):
- Same as `rokit-input`.

## `rokit-select`
Filterable select list with optional nested/collapsible items.

Usage:
```html
<rokit-select label="Country" name="country">
  <ul>
    <li data-value="us">United States</li>
    <li data-value="ca">Canada</li>
  </ul>
</rokit-select>
```

Attributes/properties:
- Inherits form fields from `rokit-input` (`name`, `value`, `required`, `disabled`, etc.).
- `dense` (boolean) Compact spacing.
- `emptyMessage` (string) Message when no items.
- `sort` (`asc` | `desc` | ``) Sort items.
- `collapse` (boolean) Enable nested tree toggles.
- `filterableThreshold` (number) Items before filtering is enabled. Use `< 0` to disable filtering.
- `fixedOpen` (boolean) Keeps list open.
- `collapsibleMaxHeight`, `collapsibleOrientationLeft`, `collapsibleOrientationRight`, `collapsibleWidth`.
- `inputMinWidth` (number) Min width for internal input.
- `autoGrowLabelWidth` (boolean).
- `supportingText` (string).

Slots:
- `prefix`, `suffix` pass-through to internal input header.
- Default slot must contain a single `<ul>` with `<li>` items. Use `data-value` on `li` to set values.

Parts (`::part`):
- `collapsible` The internal `rokit-collapsible` wrapper.
- `list` The rendered list container.
- `prefix` Prefix slot.
- `suffix` Suffix slot.
- `loader` Loading spinner anchor on suffix slot.

Example styling:
```css
rokit-select::part(list) {
  max-height: 240px;
}
```

## `rokit-slider`
Range slider with optional two-knob range mode.

Usage:
```html
<rokit-slider label="Volume" min="0" max="100" step="1"></rokit-slider>
<rokit-slider label="Range" min="0" max="100" range></rokit-slider>
```

Attributes/properties:
- Inherits `rokit-input` form attributes (`name`, `value`, `required`, etc.).
- `dense` (boolean) Compact spacing.
- `min`, `max`, `step`.
- `range` (string/boolean) Enables two-knob range mode. `value` is JSON `[min, max]`.
- `labelFormatter` (function) Set in JS to format knob labels.

Parts (`::part`):
- Inherits `rokit-input` parts.
- `slider` Slider track/knob container.

Note: knob label parts live inside internal `rokit-slider-knob` elements and are not exported, so they are not directly styleable from outside.

Example styling:
```css
rokit-slider::part(slider) {
  height: 20px;
}
```

## `rokit-dialog`
Modal dialog using the native `<dialog>` element.

Usage:
```html
<rokit-dialog id="dlg" title="Confirm" closable></rokit-dialog>
<script>
  document.querySelector('#dlg').open = true
</script>
```

Attributes/properties:
- `dense` (boolean) Compact spacing.
- `open` (boolean) Shows/hides modal.
- `closable` (boolean) Shows a close button.
- `title` (string) Default header title.

Slots:
- `header` Custom header content.
- default Slot for body content.

Parts (`::part`):
- `dialog` The native `<dialog>`.
- `title` Title container.
- `main` Body container.

Example styling:
```css
rokit-dialog::part(dialog) {
  border-radius: 16px;
}
```

## `rokit-progressbar`
Linear progress bar with determinate or indeterminate mode.

Usage:
```html
<rokit-progressbar percent="40"></rokit-progressbar>
<rokit-progressbar></rokit-progressbar>
```

Attributes/properties:
- `dense` (boolean) Compact spacing.
- `percent` (string) Percentage (0-100). If omitted, renders indeterminate animation.

Parts (`::part`):
- `bar` The progress bar element.

## `rokit-snackbar`
Global snackbar/toast manager. Messages are emitted via a custom event or via `showSnackbarMessage`.

Attributes/properties:
- `dense` (boolean) Compact spacing.

Usage (event):
```js
import { RokitSnackbarEvent } from './snackbar'

document.dispatchEvent(new RokitSnackbarEvent({
  message: 'Saved',
  ttl: 2000,
  closable: false,
  cssClass: 'success'
}))
```

Usage (helper):
```js
import { showSnackbarMessage } from './snackbar'

showSnackbarMessage({ message: 'Saved', ttl: 2000 })
```

Message options:
- `message` (string) HTML is allowed.
- `ttl` (number) Time-to-live in ms. Use `0` for persistent.
- `closable` (boolean) Show dismiss button.
- `cssStyle` (string) Inline styles for the message.
- `cssClass` (string) Class name for the message.

Parts (`::part`):
- `snackbar` Container for messages.

Example styling:
```css
rokit-snackbar::part(snackbar) {
  width: 360px;
}
```

## `rokit-splitpane`
Resizable split view with a draggable separator.

Usage:
```html
<rokit-splitpane dir="horizontal" pos="40%" sep="6px">
  <div slot="pane1">Left</div>
  <div slot="pane2">Right</div>
</rokit-splitpane>
```

Attributes/properties:
- `dense` (boolean) Compact spacing.
- `dir` (`horizontal` | `vertical`) Orientation.
- `pos` (string) Position (e.g. `40%`).
- `minPos`, `maxPos` (number) Clamp position in percent.
- `sep` (string) Separator size (e.g. `4px`).
- `storageKey` (string) Local storage key for persistence.

Slots:
- `pane1` First pane content.
- `pane2` Second pane content.

Parts (`::part`):
- `separator` The draggable separator.

Example styling:
```css
rokit-splitpane::part(separator) {
  background: #ddd;
}
```