UI kit with no native pickers

Internal test page for js/ui-kit.js + css/ui-kit.css (window.WIKit). Every control below is a real native element enhanced in place, or built with the API. The log on the right shows the native input / change events existing page code listens to.

Colour picker

Visible native input, a label-wrapped transparent input (the editor pattern), a hidden input opened by .click() (the Live pattern; focus comes back to its button), and an API trigger whose palette arrives late and whose preview stays in view above the phone sheet. Swatches try a colour live and keep the picker open: double-click or Enter commits.

Icon colour

Any colour

Background

Duo tone (API)

Preview

not closed yet

Native value now:

Dropdown

A native <select> with groups and swatches, a long one (search appears above 8 options), and one built from data.

Style

Export format

Size (API)

Slider

The native range stays on top (transparent) and keeps pointer, touch, keyboard and screen-reader behaviour.

Stroke width

1.75

Size

Inline in text: strokeWidth 4

Stepper and time

Custom size px

Width (in)

Alarm time

Reminder (24h, 5 min)

Hard places

Inside a scrolling box, inside a transformed modal, and a region with data-wikit-all (every native inside is upgraded).

In a scroller

Plain select

Plain colour

Plain range

Opt out

API

<link rel="stylesheet" href="css/ui-kit.css">  <script src="js/ui-kit.js" defer></script>

<input type="color" data-wikit>            auto-enhanced on load (also select, range, number, time)
<section data-wikit-all>…</section>        WIKit.enhance(section) upgrades every native inside

WIKit.enhance(root?, {all?, color:{…}, select:{…}})  → instances
WIKit.observe(root?, opts?)                  → stop()   (enhances nodes added later)
WIKit.colorPicker(el, {value, label, palette (list | fn), paletteLabel (string | fn), swatches, recent, eyedropper,
                   closeOnSwatch, returnTo, preview, compact, onInput, onChange, onClose})
  colour instance: .setPalette(list, label?) · .isOpen()      events: input · change · wikit:close {value, changed}
WIKit.select(el, {options, value, label, placeholder, name, search, onChange, onClose})
WIKit.slider(input, {format, bubble})   WIKit.stepper(input)   WIKit.timePicker(input, {hour12, minuteStep})
WIKit.get(el) · WIKit.destroy(el) · WIKit.close() · WIKit.parseColor('rgb(255 90 54)') → '#ff5a36'
instance: .value (get/set) · .open() · .close() · .refresh() · .destroy()