@adia-ai/web-components 0.4.4 → 0.4.6

package/components/code/code.d.ts

@@ -0,0 +1,39 @@
+/**
+ * `<code-ui>` — Syntax-highlighted code block (CodeMirror 6 under the hood).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/code
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface CodeChangeEventDetail {
+  value: string;
+}
+export type CodeChangeEvent = CustomEvent<CodeChangeEventDetail>;
+export type CodeInputEvent = CustomEvent<CodeChangeEventDetail>;
+
+export class UICode extends UIFormElement {
+  /** CodeMirror language slug — `javascript` / `typescript` / `html` / `css` / `json` / `markdown` / `python` etc. */
+  language: string;
+  /** Inline mode — drops chrome, renders as a single-line code fragment. */
+  inline: boolean;
+  /** Text content of the code block (alternative to slotted children). */
+  text: string;
+  /** Alias for `text` — set via `el.textContent` round-trips. */
+  textContent: string;
+  /** Show line numbers in the gutter. */
+  lineNumbers: boolean;
+  /** Editable mode — user can type. Form-associated only when this is true. */
+  editable: boolean;
+  /** Drop chrome (border, background) for inline composition. */
+  bare: boolean;
+  placeholder: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UICode, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: CodeChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: CodeInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/color-picker/color-picker.d.ts

@@ -0,0 +1,37 @@
+/**
+ * `<color-picker-ui>` — Color picker with hex / rgb / hsl / oklch formats.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/color-picker
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export type ColorFormat = 'hex' | 'rgb' | 'hsl' | 'oklch';
+
+export interface ColorPickerChangeEventDetail {
+  value: string;
+  format: ColorFormat;
+}
+export type ColorPickerChangeEvent = CustomEvent<ColorPickerChangeEventDetail>;
+export type ColorPickerInputEvent = CustomEvent<ColorPickerChangeEventDetail>;
+
+export interface ColorPickerFormatChangeEventDetail {
+  format: ColorFormat;
+}
+export type ColorPickerFormatChangeEvent = CustomEvent<ColorPickerFormatChangeEventDetail>;
+
+export class UIColorPicker extends UIFormElement {
+  /** Current color as a string in the active `format`. */
+  value: string;
+  /** Output format. */
+  format: ColorFormat;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIColorPicker, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: ColorPickerChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: ColorPickerInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'format-change', listener: (ev: ColorPickerFormatChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/index.js

@@ -87,6 +87,7 @@ export { UIEmbed } from './embed/embed.js';
 export { UIBlock } from './block/block.js';
 export { UIText } from './text/text.js';
 export { UIToggleGroup, UIToggleOption } from './toggle-group/toggle-group.js';
+export { UIToggleScheme } from './toggle-scheme/toggle-scheme.js';
 export { UIDemoToggle } from './demo-toggle/demo-toggle.js';
 export { UIRichText } from './richtext/richtext.js';
 export { UIStream } from './stream/stream.js';

package/components/input/input.d.ts

@@ -0,0 +1,61 @@
+/**
+ * `<input-ui>` — Text + email + password + number + tel + url + search input.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/input
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+/** Native HTML input types this primitive supports. */
+export type UIInputType =
+  | 'text'
+  | 'email'
+  | 'password'
+  | 'number'
+  | 'tel'
+  | 'url'
+  | 'search';
+
+export interface InputChangeEventDetail {
+  value: string;
+}
+export type InputChangeEvent = CustomEvent<InputChangeEventDetail>;
+export type InputInputEvent = CustomEvent<InputChangeEventDetail>;
+
+export class UIInput extends UIFormElement {
+  placeholder: string;
+  type: UIInputType;
+  label: string;
+  prefix: string;
+  suffix: string;
+  /** Raw mode — drops chrome (border, padding) for inline composition. */
+  raw: boolean;
+
+  // ── Number-mode properties (active when type="number") ──
+  /** Minimum value. `null` to disable. */
+  min: number | null;
+  /** Maximum value. `null` to disable. */
+  max: number | null;
+  /** Step size for stepper buttons + arrow keys. */
+  step: number;
+  /** Decimal precision (places); `null` to derive from step. */
+  precision: number | null;
+  /**
+   * BCP-47 locale tag for number formatting — e.g. `"de-DE"` / `"fr-FR"` /
+   * `"en-IN"`. Default empty = en-US (`.` decimal separator, no thousands
+   * grouping). `.value` stays canonical (`Number(v)` round-trips).
+   */
+  locale: string;
+
+  // ── Number-mode accessor ──
+  /** Parsed numeric value. Returns `NaN` if value isn't a number. */
+  readonly valueAsNumber: number;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIInput, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: InputChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: InputInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/input/input.js

@@ -462,8 +462,8 @@ class UIInput extends UIFormElement {
     if (next === this.valueAsNumber) return;
     this.value = this.#format(next);
     this.syncValue(this.value);
-    this.dispatchEvent(new Event('input', { bubbles: true }));
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   }
 
   // ── Event handlers ──
@@ -488,7 +488,7 @@ class UIInput extends UIFormElement {
     this.value = text;
     if (!this.#isNativePassword) this.#textEl.toggleAttribute('data-empty', !text);
     this.syncValue(text);
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
   };
 
   #onBeforeInput = (e) => {
@@ -600,7 +600,7 @@ class UIInput extends UIFormElement {
           e.preventDefault();
           // Commit normalized value before firing form events.
           this.#commitOnBlur();
-          this.dispatchEvent(new Event('change', { bubbles: true }));
+          this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
           this.dispatchEvent(new Event('submit', { bubbles: true }));
           return;
       }
@@ -608,7 +608,7 @@ class UIInput extends UIFormElement {
     }
     if (e.key === 'Enter') {
       e.preventDefault();
-      this.dispatchEvent(new Event('change', { bubbles: true }));
+      this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
       this.dispatchEvent(new Event('submit', { bubbles: true }));
     }
   };
@@ -631,7 +631,7 @@ class UIInput extends UIFormElement {
 
   #onBlur = () => {
     if (this.#isNumberMode) this.#commitOnBlur();
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   };
 
   #commitOnBlur() {
@@ -650,7 +650,7 @@ class UIInput extends UIFormElement {
     if (this.value !== stored) {
       this.value = stored;
       this.syncValue(stored);
-      this.dispatchEvent(new Event('input', { bubbles: true }));
+      this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
     }
     if (this.#textEl.textContent !== displayed) {
       this.#textEl.textContent = displayed;
@@ -665,8 +665,8 @@ class UIInput extends UIFormElement {
     this.syncValue(this.value);
     this.#textEl.textContent = this.value;
     this.#textEl.toggleAttribute('data-empty', !this.value);
-    this.dispatchEvent(new Event('input', { bubbles: true }));
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   }
 
   #onPaste = (e) => {

package/components/option-card/option-card.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `<option-card-ui>` — Radio-style card with heading + description + icon.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/option-card
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface OptionCardChangeEventDetail {
+  value: string;
+  checked: boolean;
+}
+export type OptionCardChangeEvent = CustomEvent<OptionCardChangeEventDetail>;
+
+export class UIOptionCard extends UIFormElement {
+  /** Selected state — reflected; setting `checked=true` deselects siblings in the group. */
+  checked: boolean;
+  heading: string;
+  description: string;
+  icon: string;
+  /** Layout — `default` (vertical) / `horizontal` / `compact`. */
+  layout: 'default' | 'horizontal' | 'compact';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIOptionCard, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: OptionCardChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/option-card/option-card.js

@@ -116,7 +116,7 @@ class UIOptionCard extends UIFormElement {
       }
     }
     this.checked = true;
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, checked: this.checked } }));
   };
 
   #onKey = (e) => {

package/components/otp-input/otp-input.d.ts

@@ -0,0 +1,25 @@
+/**
+ * `<otp-input-ui>` — Auto-focus-advancing one-time-passcode input (6 digits by default).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/otp-input
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface OtpInputEventDetail {
+  /** Combined digits as a string (e.g. `"123456"`). */
+  value: string;
+}
+export type OtpInputEvent = CustomEvent<OtpInputEventDetail>;
+
+export class UIOtpInput extends UIFormElement {
+  /** Number of digit slots. */
+  length: number;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIOtpInput, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'input', listener: (ev: OtpInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/otp-input/otp-input.js

@@ -93,7 +93,7 @@ class UIOtpInput extends UIFormElement {
     input.value = input.value.replace(/\D/g, '').slice(0, 1);
 
     this.#syncCombined();
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
 
     if (input.value && index < this.#inputs.length - 1) {
       this.#inputs[index + 1].focus();
@@ -107,7 +107,7 @@ class UIOtpInput extends UIFormElement {
       this.#inputs[index - 1].focus();
       this.#inputs[index - 1].value = '';
       this.#syncCombined();
-      this.dispatchEvent(new Event('input', { bubbles: true }));
+      this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
     }
   }
 
@@ -118,7 +118,7 @@ class UIOtpInput extends UIFormElement {
       this.#inputs[i].value = text[i] || '';
     }
     this.#syncCombined();
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
 
     // Focus last filled or first empty
     const firstEmpty = this.#inputs.findIndex(inp => !inp.value);

package/components/pane/pane.css

@@ -54,6 +54,15 @@
     overflow: hidden;
   }
 
+  /* During an active drag-resize: kill all transitions so pointer-driven
+     width updates track 1:1 instead of interpolating through a consumer-
+     declared width transition (e.g. editor-shell's collapse animation).
+     Mirrors the admin-sidebar pattern. */
+  :scope[data-resizing] {
+    user-select: none;
+    transition: none;
+  }
+
   /* Side-aware border treatment.
      `leading`  — pane sits at the leading edge of a horizontal row, so
                   the only visual separator it needs is on its trailing
@@ -187,6 +196,7 @@
     cursor: col-resize;
     background: transparent;
     transition: background var(--pane-duration) var(--pane-easing);
+    touch-action: none;
     z-index: 1;
   }
 

package/components/pane/pane.js

@@ -48,6 +48,8 @@ class UIPane extends UIElement {
   #dragging = false;
   #startX = 0;
   #startW = 0;
+  #pointerId = null;
+  #prevDocCursor = '';
   #bound = false;
 
   connected() {
@@ -110,15 +112,30 @@ class UIPane extends UIElement {
   };
 
   // ── Resize ──
+  //
+  // Pointer capture + handle-level listeners (not document-level): keeps
+  // pointer events flowing to the grabber even when the cursor races past
+  // it, and works under touch. Cursor is locked at the documentElement
+  // level so it stays `col-resize` across the whole viewport during drag,
+  // not just over the 4px handle. CSS bypasses any width transition while
+  // `[data-resizing]` is set, so resizes track the pointer 1:1.
 
   #onResizeDown = (e) => {
+    if (!e.isPrimary) return;
     e.preventDefault();
     this.#dragging = true;
     this.#startX = e.clientX;
     this.#startW = this.getBoundingClientRect().width;
+    this.#pointerId = e.pointerId;
     this.setAttribute('data-resizing', '');
-    document.addEventListener('pointermove', this.#onResizeMove);
-    document.addEventListener('pointerup', this.#onResizeUp, { once: true });
+
+    try { this.#resizeEl.setPointerCapture(e.pointerId); } catch {}
+    this.#resizeEl.addEventListener('pointermove', this.#onResizeMove);
+    this.#resizeEl.addEventListener('pointerup', this.#onResizeUp, { once: true });
+    this.#resizeEl.addEventListener('pointercancel', this.#onResizeUp, { once: true });
+
+    this.#prevDocCursor = document.documentElement.style.cursor;
+    document.documentElement.style.cursor = 'col-resize';
   };
 
   #onResizeMove = (e) => {
@@ -134,16 +151,23 @@ class UIPane extends UIElement {
   };
 
   #onResizeUp = () => {
+    if (!this.#dragging) return;
     this.#dragging = false;
     this.removeAttribute('data-resizing');
-    document.removeEventListener('pointermove', this.#onResizeMove);
+    try { this.#resizeEl?.releasePointerCapture(this.#pointerId); } catch {}
+    this.#pointerId = null;
+    this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);
+    document.documentElement.style.cursor = this.#prevDocCursor;
   };
 
   disconnected() {
     this.removeEventListener('click', this.#onClick);
     this.removeEventListener('keydown', this.#onKey);
     this.#resizeEl?.removeEventListener('pointerdown', this.#onResizeDown);
-    document.removeEventListener('pointermove', this.#onResizeMove);
+    this.#resizeEl?.removeEventListener('pointermove', this.#onResizeMove);
+    if (this.#dragging) {
+      document.documentElement.style.cursor = this.#prevDocCursor;
+    }
     this.#bound = false;
   }
 }

package/components/radio/radio.d.ts

@@ -0,0 +1,28 @@
+/**
+ * `<radio-ui>` — Radio button (boolean-semantic form control; group via shared name).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/radio
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface RadioChangeEventDetail {
+  /** Submitted value (the radio's `value` attribute). */
+  value: string;
+  /** Current checked state. */
+  checked: boolean;
+}
+export type RadioChangeEvent = CustomEvent<RadioChangeEventDetail>;
+
+export class UIRadio extends UIFormElement {
+  /** Checked state — reflected; setting `checked=true` deselects siblings in the group. */
+  checked: boolean;
+  label: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIRadio, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: RadioChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/radio/radio.js

@@ -38,7 +38,7 @@ class UIRadio extends UIFormElement {
       }
     }
     this.checked = true;
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value, checked: this.checked } }));
   };
 
   #onKey = (e) => {

package/components/range/range.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<range-ui>` — Range track with click-to-jump + drag.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/range
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface RangeChangeEventDetail {
+  value: number;
+}
+export type RangeChangeEvent = CustomEvent<RangeChangeEventDetail>;
+export type RangeInputEvent = CustomEvent<RangeChangeEventDetail>;
+
+export class UIRange extends UIFormElement {
+  /** Numeric value — overrides UIFormElement.value (which is String). */
+  value: number;
+  min: number;
+  max: number;
+  step: number;
+  label: string;
+  suffix: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIRange, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: RangeChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: RangeInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/range/range.js

@@ -103,7 +103,7 @@ class UIRange extends UIFormElement {
     const snapped = this.#snap(v);
     if (snapped === this.value) return;
     this.value = snapped;
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
   }
 
   // ── Pointer drag ──
@@ -147,7 +147,7 @@ class UIRange extends UIFormElement {
     this.#fieldEl.releasePointerCapture(e.pointerId);
     this.#fieldEl.removeEventListener('pointermove', this.#onPointerMove);
     this.#fieldEl.removeEventListener('pointerup', this.#onPointerUp);
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   };
 
   // ── Keyboard ──
@@ -166,7 +166,7 @@ class UIRange extends UIFormElement {
     }
     e.preventDefault();
     this.#setValue(v);
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
   };
 
   disconnected() {

package/components/rating/rating.d.ts

@@ -0,0 +1,33 @@
+/**
+ * `<rating-ui>` — Star rating input (or other icon set).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/rating
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface RatingChangeEventDetail {
+  value: number;
+}
+export type RatingChangeEvent = CustomEvent<RatingChangeEventDetail>;
+
+export class UIRating extends UIFormElement {
+  /** Numeric rating value — overrides UIFormElement.value (which is String). */
+  value: number;
+  /** Maximum rating — number of icons rendered. */
+  max: number;
+  /** Phosphor icon name (default: `star`). */
+  icon: string;
+  /** Read-only mode (display only; no interaction). */
+  readonly: boolean;
+  /** Allow half-step values (0.5, 1.5, …). */
+  allowHalf: boolean;
+  size: 'sm' | 'md' | 'lg';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UIRating, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: RatingChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/rating/rating.js

@@ -121,7 +121,7 @@ class UIRating extends UIFormElement {
     this.value = v;
     this.#hoverValue = null;
     this.syncValue(String(v));
-    this.dispatchEvent(new Event('change', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('change', { bubbles: true, detail: { value: this.value } }));
     this.render();
   }
 

package/components/search/search.d.ts

@@ -0,0 +1,35 @@
+/**
+ * `<search-ui>` — Search input with debounce + clear button + Enter-to-search.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/search
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SearchInputEventDetail {
+  value: string;
+}
+export type SearchInputEvent = CustomEvent<SearchInputEventDetail>;
+
+export interface SearchEventDetail {
+  value: string;
+}
+/** Fired after debounce OR on Enter — your "do the search" trigger. */
+export type SearchEvent = CustomEvent<SearchEventDetail>;
+
+export class UISearch extends UIFormElement {
+  placeholder: string;
+  /** Debounce delay in ms before `search` event fires. */
+  debounce: number;
+
+  /** Programmatically focus the inner input. */
+  focus(): void;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISearch, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'input', listener: (ev: SearchInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'search', listener: (ev: SearchEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/search/search.js

@@ -62,7 +62,7 @@ class UISearch extends UIFormElement {
   #onInput = () => {
     this.value = this.#inputEl.value;
     this.syncValue(this.value);
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
 
     clearTimeout(this.#timer);
     this.#timer = setTimeout(() => {
@@ -92,7 +92,7 @@ class UISearch extends UIFormElement {
     if (this.#inputEl) this.#inputEl.value = '';
     this.syncValue('');
     this.setAttribute('value', '');
-    this.dispatchEvent(new Event('input', { bubbles: true }));
+    this.dispatchEvent(new CustomEvent('input', { bubbles: true, detail: { value: this.value } }));
     this.dispatchEvent(new CustomEvent('search', {
       bubbles: true,
       detail: { value: '' },

package/components/segmented/segmented.d.ts

@@ -0,0 +1,24 @@
+/**
+ * `<segmented-ui>` — Segmented control for 2-5 mutually-exclusive options.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/segmented
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SegmentedChangeEventDetail {
+  value: string;
+}
+export type SegmentedChangeEvent = CustomEvent<SegmentedChangeEventDetail>;
+
+export class UISegmented extends UIFormElement {
+  /** Selected segment's value. */
+  value: string;
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISegmented, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SegmentedChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}