@adia-ai/web-components 0.4.5 → 0.4.6

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/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/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/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/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/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/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/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;
+}

package/components/select/select.d.ts

@@ -0,0 +1,57 @@
+/**
+ * `<select-ui>` — Custom-styled select / combobox / multi-select.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/select
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SelectOption {
+  value: string;
+  label?: string;
+  icon?: string;
+  avatar?: string;
+  disabled?: boolean;
+  action?: string;
+  divider?: boolean;
+}
+
+export interface SelectChangeEventDetail {
+  value: string;
+}
+export type SelectChangeEvent = CustomEvent<SelectChangeEventDetail>;
+
+export interface SelectActionEventDetail {
+  action: string;
+}
+export type SelectActionEvent = CustomEvent<SelectActionEventDetail>;
+
+export class UISelect extends UIFormElement {
+  placeholder: string;
+  /** Open/closed reflected attribute — toggled by trigger click / keyboard. */
+  open: boolean;
+  label: string;
+  /** Leading icon name (Phosphor registry). */
+  icon: string;
+  /** Leading avatar URL or name. */
+  avatar: string;
+  multiple: boolean;
+  searchable: boolean;
+  /** Allow values not in the option list (combobox mode). */
+  freeText: boolean;
+  divider: boolean;
+
+  /**
+   * Dynamic option list. Setting `.options = [...]` stamps option elements at
+   * connection time + auto-syncs the listbox.
+   */
+  options: readonly SelectOption[];
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISelect, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SelectChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'action', listener: (ev: SelectActionEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/slider/slider.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<slider-ui>` — Single-handle slider for numeric input.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/slider
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SliderChangeEventDetail {
+  value: number;
+}
+export type SliderChangeEvent = CustomEvent<SliderChangeEventDetail>;
+export type SliderInputEvent = CustomEvent<SliderChangeEventDetail>;
+
+export class UISlider 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: UISlider, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SliderChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: SliderInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/switch/switch.d.ts

@@ -0,0 +1,30 @@
+/**
+ * `<switch-ui>` — Toggle switch (boolean-semantic form control).
+ *
+ * @see https://ui-kit.exe.xyz/site/components/switch
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface SwitchChangeEventDetail {
+  /** Submitted value (defaults to `"on"` when checked). */
+  value: string;
+  /** Current checked state. */
+  checked: boolean;
+}
+export type SwitchChangeEvent = CustomEvent<SwitchChangeEventDetail>;
+
+export class UISwitch extends UIFormElement {
+  /** Checked state — reflected, toggles on click. */
+  checked: boolean;
+  label: string;
+  /** Size — `sm` / `md` / `lg`. */
+  size: '' | 'sm' | 'md' | 'lg';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UISwitch, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: SwitchChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+}

package/components/textarea/textarea.d.ts

@@ -0,0 +1,31 @@
+/**
+ * `<textarea-ui>` — Multi-line text input with Enter-submit semantic.
+ *
+ * @see https://ui-kit.exe.xyz/site/components/textarea
+ */
+
+import { UIFormElement } from '../../core/form.js';
+
+export interface TextareaChangeEventDetail {
+  value: string;
+}
+export type TextareaChangeEvent = CustomEvent<TextareaChangeEventDetail>;
+export type TextareaInputEvent = CustomEvent<TextareaChangeEventDetail>;
+
+export class UITextarea extends UIFormElement {
+  placeholder: string;
+  label: string;
+  rows: number;
+  /** CSS `resize` value — `none` / `vertical` (default) / `horizontal` / `both`. */
+  resize: 'none' | 'vertical' | 'horizontal' | 'both';
+
+  addEventListener<K extends keyof HTMLElementEventMap>(
+    type: K,
+    listener: (this: UITextarea, ev: HTMLElementEventMap[K]) => unknown,
+    options?: boolean | AddEventListenerOptions,
+  ): void;
+  addEventListener(type: 'change', listener: (ev: TextareaChangeEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  addEventListener(type: 'input', listener: (ev: TextareaInputEvent) => unknown, options?: boolean | AddEventListenerOptions): void;
+  /** Fired on Enter without Shift; user can `e.preventDefault()` to insert newline. */
+  addEventListener(type: 'submit', listener: (ev: Event) => unknown, options?: boolean | AddEventListenerOptions): void;
+}