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:

<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:

rokit-button::part(button) {
  border-radius: 8px;
}

rokit-collapsible

Expandable/collapsible panel with header and content.

Usage:

<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:

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:

<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:

rokit-input::part(input) {
  color: #222;
}
rokit-input::part(supportingText) {
  color: #666;
}

rokit-textarea

Textarea variant of rokit-input with auto-resize options.

Usage:

<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:

<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:

rokit-select::part(list) {
  max-height: 240px;
}

rokit-slider

Range slider with optional two-knob range mode.

Usage:

<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:

rokit-slider::part(slider) {
  height: 20px;
}

rokit-dialog

Modal dialog using the native <dialog> element.

Usage:

<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:

rokit-dialog::part(dialog) {
  border-radius: 16px;
}

rokit-progressbar

Linear progress bar with determinate or indeterminate mode.

Usage:

<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):

import { RokitSnackbarEvent } from './snackbar'

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

Usage (helper):

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:

rokit-snackbar::part(snackbar) {
  width: 360px;
}

rokit-splitpane

Resizable split view with a draggable separator.

Usage:

<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:

rokit-splitpane::part(separator) {
  background: #ddd;
}