@blukavantui/community 1.0.1 → 1.1.0

package/src/form-layout/shared.ts

@@ -0,0 +1,57 @@
+import type { FieldOptions } from './types.js';
+export function el<K extends keyof HTMLElementTagNameMap>(tag: K, cls = '', text?: string) {
+  const node = document.createElement(tag); node.className = cls;
+  if (text !== undefined) node.textContent = text;
+  return node;
+}
+let sequence = 0;
+export function uid() { return 'blu-field-' + (++sequence) + '-' + Math.random().toString(36).slice(2, 8); }
+export function attr(node: Element, name: string, value?: string | number | boolean) {
+  if (value === undefined || value === false || value === '') node.removeAttribute(name);
+  else node.setAttribute(name, String(value));
+}
+export function frame(host: HTMLElement, options: FieldOptions, group = false) {
+  const root = el(group ? 'fieldset' : 'div', 'blu-field');
+  const label = el(group ? 'legend' : 'label', 'blu-field__label');
+  const body = el('div', 'blu-field__body'), description = el('div', 'blu-field__help'), error = el('div', 'blu-field__error');
+  const id = options.Id || uid(); description.id = id + '-help'; error.id = id + '-error'; error.setAttribute('aria-live', 'polite');
+  root.append(label, body, description, error); host.append(root);
+  function paint(p: FieldOptions, controls: HTMLElement[]) {
+    root.className = 'blu-field blu-field--' + (p.Size || 'Medium').toLowerCase() + (p.ExtendedClass ? ' ' + p.ExtendedClass : '');
+    root.dataset.invalid = String(!!p.Error); root.dataset.disabled = String(!!p.Disabled);
+    label.textContent = (p.Label || '') + (p.Required ? ' *' : ''); label.hidden = !p.Label;
+    if (!group && controls[0]) { controls[0].id ||= id; label.setAttribute('for', controls[0].id); }
+    description.textContent = p.Description || ''; description.hidden = !p.Description;
+    error.textContent = p.Error || ''; error.hidden = !p.Error;
+    const described = [p.Description ? description.id : '', p.Error ? error.id : ''].filter(Boolean).join(' ');
+    for (const control of controls) {
+      attr(control, 'aria-describedby', described); attr(control, 'aria-invalid', p.Error ? 'true' : undefined);
+      attr(control, 'aria-required', p.Required ? 'true' : undefined);
+    }
+  }
+  return { root, label, body, description, error, id, paint };
+}
+export function lifecycle(root: HTMLElement, reset: () => void) {
+  const abort = new AbortController(); let disposed = false;
+  // Native form reset is cancelable and restores values after event dispatch.
+  const form = root.closest('form');
+  form?.addEventListener('reset', event => queueMicrotask(() => { if (!disposed && !event.defaultPrevented) reset(); }), { signal: abort.signal });
+  return {
+    signal: abort.signal,
+    check() { if (disposed) throw Error('Component is destroyed.'); },
+    destroy() { if (disposed) return; disposed = true; abort.abort(); root.remove(); },
+  };
+}
+export function common(control: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement, p: FieldOptions) {
+  control.name = p.Name || ''; control.disabled = !!p.Disabled; control.required = !!p.Required;
+  if ('readOnly' in control) control.readOnly = !!p.ReadOnly;
+  control.setCustomValidity(p.Error || '');
+}
+export function bound(value: number | undefined, fallback: number, min: number, max: number) {
+  return Number.isFinite(value) ? Math.max(min, Math.min(max, value!)) : fallback;
+}
+export function imageUrl(value: string) {
+  const url = new URL(value, document.baseURI);
+  if (!['http:', 'https:'].includes(url.protocol)) throw Error('Adornment images must use an HTTP(S) or relative URL.');
+  return url.href;
+}

package/src/form-layout/table.ts

@@ -0,0 +1,86 @@
+import { el, bound, uid } from './shared.js';
+import type { TableOptions, TableEvents } from './types.js';
+
+export function tableRows<Row extends object>(options: TableOptions<Row>) {
+  const rows = [...options.Rows], key = options.SortKey;
+  if (key && options.Columns.some(c => c.Key === key && c.Sortable)) rows.sort((a, b) => {
+    const x = a[key], y = b[key]; if (x == null || y == null) return x == null ? (y == null ? 0 : 1) : -1;
+    const difference = typeof x === 'number' && typeof y === 'number' ? x - y : String(x).localeCompare(String(y), undefined, { numeric: true, sensitivity: 'base' });
+    return options.SortDirection === 'Descending' ? -difference : difference;
+  });
+  const size = options.PageSize ? Math.floor(bound(options.PageSize, 10, 1, 10000)) : Math.max(1, rows.length);
+  const pages = Math.max(1, Math.ceil(rows.length / size)), page = Math.floor(bound(options.Page, 1, 1, pages));
+  return { rows: rows.slice((page - 1) * size, page * size), page, pages, total: rows.length, start: rows.length ? (page - 1) * size + 1 : 0, end: Math.min(page * size, rows.length) };
+}
+
+/** Semantic HTML table, client-side sorting/paging, no grid engine or editing model. */
+export function createTable<Row extends object>(host: HTMLElement, initial: TableOptions<Row>, events: TableEvents<Row> = {}) {
+  let p = { ...initial }, disposed = false; const root = el('div', 'blu-table'), scroll = el('div', 'blu-table__scroll');
+  const table = el('table'), caption = el('caption'), head = el('thead'), body = el('tbody'), footer = el('div', 'blu-table__footer');
+  const status = el('span'), previous = el('button', 'blu-table-button', 'Previous'), next = el('button', 'blu-table-button', 'Next');
+  let headerSignature = '';
+  caption.id = uid(); scroll.tabIndex = 0; scroll.setAttribute('role', 'region'); scroll.setAttribute('aria-labelledby', caption.id);
+  previous.type = next.type = 'button'; status.setAttribute('role', 'status'); footer.append(status, previous, next); table.append(caption, head, body); scroll.append(table); root.append(scroll, footer); host.append(root);
+  function update(patch: Partial<TableOptions<Row>>) {
+    if (disposed) throw Error('Component is destroyed.'); p = { ...p, ...patch };
+    if (!p.Columns.length) throw Error('Table needs at least one column.');
+    if (new Set(p.Columns.map(c => c.Key)).size !== p.Columns.length) throw Error('Table column keys must be unique.');
+    root.className = 'blu-table' + (p.ExtendedClass ? ' ' + p.ExtendedClass : ''); root.dataset.density = p.Density || 'Comfortable'; root.dataset.striped = String(!!p.Striped);
+    table.setAttribute('aria-busy', String(!!p.Loading)); caption.textContent = p.Caption;
+    const focused = document.activeElement instanceof HTMLElement && root.contains(document.activeElement) ? document.activeElement.dataset.focusKey : undefined;
+    const focusedPagination = document.activeElement === next ? next : document.activeElement === previous ? previous : undefined;
+    const nextHeaderSignature = JSON.stringify([p.Columns.map(c => [c.Key, c.Header, !!c.Sortable, c.Align || 'Left']), !!p.Actions?.length]);
+    // Retain sortable header controls during sorting, paging and row updates.
+    // VoiceOver can activate a header without moving DOM keyboard focus to it.
+    if (nextHeaderSignature !== headerSignature) {
+      headerSignature = nextHeaderSignature;
+      head.replaceChildren(); const tr = el('tr'); head.append(tr);
+      for (const column of p.Columns) {
+        const th = el('th'); th.scope = 'col'; th.style.textAlign = (column.Align || 'Left').toLowerCase();
+        if (column.Sortable) {
+          const button = el('button', 'blu-table__sort', column.Header); button.type = 'button'; button.dataset.focusKey = 'sort-' + column.Key;
+          const glyph = el('span'); glyph.setAttribute('aria-hidden', 'true'); button.append(glyph);
+          button.onclick = () => { const direction = p.SortKey === column.Key && p.SortDirection !== 'Descending' ? 'Descending' : 'Ascending'; update({ SortKey: column.Key, SortDirection: direction, Page: 1 } as Partial<TableOptions<Row>>); events.SortChanged?.(column.Key, direction); };
+          th.append(button);
+        } else th.textContent = column.Header; tr.append(th);
+      }
+      if (p.Actions?.length) { const th = el('th', '', 'Actions'); th.scope = 'col'; tr.append(th); }
+    }
+    p.Columns.forEach((column, index) => {
+      if (!column.Sortable) return;
+      const th = head.rows[0].cells[index];
+      th.setAttribute('aria-sort', p.SortKey === column.Key ? (p.SortDirection || 'Ascending').toLowerCase() : 'none');
+      th.querySelector('span')!.textContent = p.SortKey === column.Key ? (p.SortDirection === 'Descending' ? '↓' : '↑') : '↕';
+    });
+    const state = tableRows(p); p.Page = state.page; body.replaceChildren();
+    if (p.Loading || !state.rows.length) {
+      const row = el('tr'), cell = el('td', 'blu-table__empty', p.Loading ? 'Loading records…' : (p.EmptyMessage || 'No records yet.')); cell.colSpan = p.Columns.length + (p.Actions?.length ? 1 : 0); row.append(cell); body.append(row);
+    } else for (const [index, row] of state.rows.entries()) {
+      const rowEl = el('tr'); for (const column of p.Columns) {
+        const cell = el('td'); cell.style.textAlign = (column.Align || 'Left').toLowerCase();
+        cell.textContent = column.Format ? column.Format(row[column.Key], row) : String(row[column.Key] ?? '—'); rowEl.append(cell);
+      }
+      if (p.Actions?.length) { const cell = el('td'), actions = el('div', 'blu-table__actions');
+        for (const action of p.Actions) {
+          const button = el('button', 'blu-table-button', action.Label); button.type = 'button'; button.disabled = typeof action.Disabled === 'function' ? action.Disabled(row) : !!action.Disabled;
+          button.dataset.focusKey = 'row-' + String(p.RowKey ? row[p.RowKey] : index) + '-' + action.Key;
+          if (p.RowKey) button.setAttribute('aria-label', action.Label + ' ' + String(row[p.RowKey]));
+          button.onclick = () => events.RowAction?.(action.Key, row); actions.append(button);
+        } cell.append(actions); rowEl.append(cell);
+      } body.append(rowEl);
+    }
+    status.textContent = p.Loading ? 'Loading records…' : `${state.start}–${state.end} of ${state.total} records`;
+    previous.hidden = next.hidden = !p.PageSize; previous.disabled = !!p.Loading || state.page <= 1; next.disabled = !!p.Loading || state.page >= state.pages;
+    previous.onclick = () => { update({ Page: state.page - 1 } as Partial<TableOptions<Row>>); events.PageChanged?.(p.Page!); };
+    next.onclick = () => { update({ Page: state.page + 1 } as Partial<TableOptions<Row>>); events.PageChanged?.(p.Page!); };
+    if (focused) Array.from(root.querySelectorAll<HTMLElement>('[data-focus-key]')).find(node => node.dataset.focusKey === focused)?.focus();
+    // Safari restarts Tab navigation at the page top if the focused pagination
+    // button becomes disabled. Keep the user at the available adjacent control.
+    if (!p.Loading && p.PageSize) {
+      if (focusedPagination === next && next.disabled) (previous.disabled ? scroll : previous).focus();
+      else if (focusedPagination === previous && previous.disabled) (next.disabled ? scroll : next).focus();
+    }
+  }
+  try { update({}); } catch (error) { root.remove(); throw error; }
+  return { element: root, update, getState: () => ({ Page: p.Page || 1, SortKey: p.SortKey, SortDirection: p.SortDirection || 'Ascending' }), destroy() { if (disposed) return; disposed = true; root.remove(); } };
+}

package/src/form-layout/text.ts

@@ -0,0 +1,73 @@
+import { el, attr, frame, lifecycle, common, bound, imageUrl } from './shared.js';
+import type { Adornment, TextInputOptions, TextInputEvents, TextAreaOptions, FieldEvents, FieldComponent } from './types.js';
+
+export function createTextInput(host: HTMLElement, initial: TextInputOptions = {}, events: TextInputEvents = {}): FieldComponent<TextInputOptions, string> {
+  let p = { ...initial }, revealed = false;
+  const f = frame(host, p), shell = el('div', 'blu-text'), input = el('input', 'blu-text__input');
+  const leading = el('span', 'blu-text__adornment'), trailing = el('span', 'blu-text__adornment');
+  const clear = el('button', 'blu-text__action', '×'), reveal = el('button', 'blu-text__action', 'Show');
+  clear.type = reveal.type = 'button'; clear.setAttribute('aria-label', 'Clear ' + (p.Label || 'text'));
+  shell.append(leading, input, trailing, clear, reveal); f.body.append(shell);
+  const life = lifecycle(f.root, reset);
+  const adornmentKinds = new WeakMap<HTMLElement, Adornment['Kind']>();
+  function adorn(target: HTMLElement, value?: Adornment) {
+    // Keep an existing action alive while validation/state updates run. Replacing
+    // the focused button leaves VoiceOver pointing at a detached control.
+    if (adornmentKinds.get(target) !== value?.Kind) target.replaceChildren();
+    target.removeAttribute('role'); target.removeAttribute('aria-label'); target.removeAttribute('aria-hidden'); target.hidden = !value;
+    if (!value) { adornmentKinds.delete(target); return; }
+    adornmentKinds.set(target, value.Kind);
+    if (value.Kind === 'Image') { const img = target.querySelector('img') || el('img'); const src = imageUrl(value.Src); if (img.src !== src) img.src = src; img.alt = value.Alt; if (!img.parentNode) target.append(img); }
+    else if (value.Kind === 'Action') {
+      const button = target.querySelector('button') || el('button', 'blu-text__action'); button.type = 'button'; button.textContent = value.Text; button.setAttribute('aria-label', value.Label);
+      button.disabled = !!p.Disabled || !!p.ReadOnly; button.onclick = () => events.Action?.(value.Key, input.value); if (!button.parentNode) target.append(button);
+    } else { target.textContent = value.Text; if (value.Kind === 'Icon') { attr(target, 'role', value.Label ? 'img' : undefined); attr(target, 'aria-label', value.Label); attr(target, 'aria-hidden', value.Label ? undefined : 'true'); } }
+  }
+  function refreshActions() { clear.hidden = !p.Clearable || !input.value || !!p.ReadOnly; reveal.hidden = !p.RevealPassword || p.Type !== 'password'; }
+  function update(patch: Partial<TextInputOptions>) {
+    life.check(); p = { ...p, ...patch }; f.paint(p, [input]); common(input, p);
+    input.type = p.Type === 'password' && revealed ? 'text' : (p.Type || 'text');
+    if (input.value !== (p.Value || '')) input.value = p.Value || '';
+    input.placeholder = p.Placeholder || ''; attr(input, 'maxlength', p.MaxLength === undefined ? undefined : Math.max(0, Math.floor(p.MaxLength)));
+    attr(input, 'autocomplete', p.Autocomplete); adorn(leading, p.Leading); adorn(trailing, p.Trailing);
+    clear.disabled = reveal.disabled = !!p.Disabled; clear.setAttribute('aria-label', 'Clear ' + (p.Label || 'text'));
+    reveal.textContent = revealed ? 'Hide' : 'Show'; reveal.setAttribute('aria-label', revealed ? 'Hide password' : 'Show password');
+    reveal.setAttribute('aria-pressed', String(revealed)); refreshActions();
+  }
+  function changed() { p.Value = input.value; refreshActions(); events.Change?.(input.value); }
+  function reset() { revealed = false; update({ Value: initial.Value || '' }); }
+  input.addEventListener('input', changed, { signal: life.signal });
+  input.addEventListener('blur', () => events.Blur?.(), { signal: life.signal });
+  clear.addEventListener('click', () => { input.value = ''; changed(); input.focus(); }, { signal: life.signal });
+  reveal.addEventListener('click', () => { revealed = !revealed; update({}); input.focus(); }, { signal: life.signal });
+  update({});
+  return { element: f.root, control: input, update, reset, getValue: () => input.value, focus: () => input.focus(), validate: () => input.reportValidity(), destroy: life.destroy };
+}
+
+export function createTextArea(host: HTMLElement, initial: TextAreaOptions = {}, events: FieldEvents<string> = {}): FieldComponent<TextAreaOptions, string> {
+  let p = { ...initial };
+  const f = frame(host, p), input = el('textarea', 'blu-textarea'), count = el('div', 'blu-field__count');
+  count.id = f.id + '-count'; f.body.append(input, count); const life = lifecycle(f.root, reset);
+  function resize() {
+    count.hidden = !p.ShowCount; count.textContent = input.value.length + (p.MaxLength === undefined ? ' characters' : ' / ' + p.MaxLength);
+    input.style.maxHeight = p.AutoGrow ? bound(p.MaxHeight, 320, 80, 2000) + 'px' : '';
+    input.style.resize = p.AutoGrow ? 'none' : 'vertical';
+    input.style.height = ''; if (p.AutoGrow) input.style.height = Math.min(input.scrollHeight + 2, bound(p.MaxHeight, 320, 80, 2000)) + 'px';
+  }
+  function update(patch: Partial<TextAreaOptions>) {
+    life.check(); p = { ...p, ...patch }; f.paint(p, [input]); common(input, p);
+    input.rows = Math.floor(bound(p.Rows, 4, 1, 30)); input.placeholder = p.Placeholder || '';
+    attr(input, 'maxlength', p.MaxLength === undefined ? undefined : Math.max(0, Math.floor(p.MaxLength)));
+    if (input.value !== (p.Value || '')) input.value = p.Value || '';
+    if (p.ShowCount) attr(input, 'aria-describedby', [input.getAttribute('aria-describedby'), count.id].filter(Boolean).join(' '));
+    resize();
+  }
+  function reset() { update({ Value: initial.Value || '' }); }
+  input.addEventListener('input', () => { p.Value = input.value; resize(); events.Change?.(input.value); }, { signal: life.signal });
+  input.addEventListener('blur', () => events.Blur?.(), { signal: life.signal });
+  let lastWidth = 0;
+  // Observe the host width only; height changes from auto-grow must not feed back.
+  const widthObserver = typeof ResizeObserver !== 'undefined' ? new ResizeObserver(entries => { const w = entries[0].contentRect.width; if (w !== lastWidth) { lastWidth = w; resize(); } }) : undefined;
+  widthObserver?.observe(f.root); update({});
+  return { element: f.root, control: input, update, reset, getValue: () => input.value, focus: () => input.focus(), validate: () => input.reportValidity(), destroy() { widthObserver?.disconnect(); life.destroy(); } };
+}

package/src/form-layout/types.ts

@@ -0,0 +1,59 @@
+/** Local Community additions. Not present in the published 1.0.1 package. */
+export type FieldSize = 'Small' | 'Medium' | 'Large';
+export interface FieldOptions {
+  Id?: string; Name?: string; Label?: string; Description?: string; Error?: string;
+  Required?: boolean; Disabled?: boolean; ReadOnly?: boolean; Size?: FieldSize;
+  ExtendedClass?: string;
+}
+export interface FieldEvents<T> { Change?: (value: T) => void; Blur?: () => void; }
+export interface FieldComponent<P, T> {
+  element: HTMLElement; control: HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement;
+  update(patch: Partial<P>): void; getValue(): T; reset(): void; focus(): void;
+  validate(): boolean; destroy(): void;
+}
+export type Adornment =
+  | { Kind: 'Text'; Text: string }
+  | { Kind: 'Icon'; Text: string; Label?: string }
+  | { Kind: 'Image'; Src: string; Alt: string }
+  | { Kind: 'Action'; Text: string; Label: string; Key: string };
+export interface TextInputOptions extends FieldOptions {
+  Value?: string; Type?: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url';
+  Placeholder?: string; MaxLength?: number; Autocomplete?: string;
+  Leading?: Adornment; Trailing?: Adornment; Clearable?: boolean; RevealPassword?: boolean;
+}
+export interface TextInputEvents extends FieldEvents<string> { Action?: (key: string, value: string) => void; }
+export interface TextAreaOptions extends FieldOptions {
+  Value?: string; Placeholder?: string; Rows?: number; MaxLength?: number;
+  AutoGrow?: boolean; MaxHeight?: number; ShowCount?: boolean;
+}
+export interface CheckboxOptions extends FieldOptions { Checked?: boolean; Indeterminate?: boolean; Value?: string; }
+export interface SwitchOptions extends FieldOptions { Checked?: boolean; OnText?: string; OffText?: string; }
+export interface RadioButtonOptions extends FieldOptions { Checked?: boolean; Value: string; }
+export interface Choice { Value: string; Label: string; Description?: string; Disabled?: boolean; }
+export interface RadioGroupOptions extends FieldOptions { Value?: string; Options: Choice[]; Direction?: 'Horizontal' | 'Vertical'; }
+export interface SelectOptions extends FieldOptions { Value?: string; Options: Choice[]; Placeholder?: string; Clearable?: boolean; Searchable?: boolean; }
+export interface FormFieldOptions extends FieldOptions { Control?: HTMLElement; }
+export interface ColumnsOptions {
+  Ratio?: 'Equal' | 'OneThirdTwoThirds' | 'TwoThirdsOneThird' | 'OneQuarterThreeQuarters' | 'ThreeQuartersOneQuarter' | 'WideCenter';
+  /** Match column heights within a row and stretch a single content wrapper. Stacked rows keep natural height. */
+  EqualHeight?: boolean;
+  Gap?: number; Align?: 'Start' | 'Center' | 'End' | 'Stretch';
+  StackAt?: 'Small' | 'Medium' | 'Large'; ExtendedClass?: string;
+}
+export interface ColumnsComponent { element: HTMLElement; columns: HTMLElement[]; update(patch: Partial<ColumnsOptions>): void; destroy(): void; }
+export interface TableColumn<Row extends object> {
+  Key: Extract<keyof Row, string>; Header: string; Sortable?: boolean; Align?: 'Left' | 'Center' | 'Right';
+  Format?: (value: Row[Extract<keyof Row, string>], row: Row) => string;
+}
+export interface TableAction<Row> { Key: string; Label: string; Disabled?: boolean | ((row: Row) => boolean); }
+export interface TableOptions<Row extends object> {
+  Columns: TableColumn<Row>[]; Rows: Row[]; Caption: string; RowKey?: Extract<keyof Row, string>;
+  Actions?: TableAction<Row>[]; Loading?: boolean; EmptyMessage?: string;
+  PageSize?: number; Page?: number; SortKey?: Extract<keyof Row, string>; SortDirection?: 'Ascending' | 'Descending';
+  Density?: 'Compact' | 'Comfortable'; Striped?: boolean; ExtendedClass?: string;
+}
+export interface TableEvents<Row> {
+  RowAction?: (key: string, row: Row) => void;
+  SortChanged?: (key: Extract<keyof Row, string>, direction: 'Ascending' | 'Descending') => void;
+  PageChanged?: (page: number) => void;
+}

package/src/form-layout.ts

@@ -0,0 +1,12 @@
+export * from './checkbox.js';
+export * from './text-input.js';
+export * from './text-area.js';
+export * from './radio-button.js';
+export * from './radio-group.js';
+export * from './switch.js';
+export * from './select.js';
+export * from './form-field.js';
+export * from './columns2.js';
+export * from './columns3.js';
+export * from './columns4.js';
+export * from './table.js';

package/src/index.ts

@@ -54,3 +54,5 @@ export * from './font-provider.js';
 export * from './shape-mask.js';
 export * from './chip-group.js';
 export * from './grid-basic.js';
+
+export * from './form-layout.js';

package/src/inputs.ts

@@ -6,3 +6,11 @@ export * from './date-picker.js';
 export * from './time-picker.js';
 export * from './date-time-picker.js';
 export * from './date-range-picker.js';
+export * from './checkbox.js';
+export * from './text-input.js';
+export * from './text-area.js';
+export * from './radio-button.js';
+export * from './radio-group.js';
+export * from './switch.js';
+export * from './select.js';
+export * from './form-field.js';

package/src/layout.ts

@@ -6,3 +6,6 @@ export * from './splitter.js';
 export * from './app-layout.js';
 export * from './page-layout.js';
 export * from './shape-mask.js';
+export * from './columns2.js';
+export * from './columns3.js';
+export * from './columns4.js';

package/src/native-components/form-layout.ts

@@ -0,0 +1,21 @@
+import {createCheckbox} from '../checkbox.js';
+import {createTextInput} from '../text-input.js';
+import {createTextArea} from '../text-area.js';
+import {createRadioButton} from '../radio-button.js';
+import {createRadioGroup} from '../radio-group.js';
+import {createSwitch} from '../switch.js';
+import {createSelect} from '../select.js';
+import {createTable} from '../table.js';
+import {install} from '../native-base.js';
+const wrap = (factory:any) => (host:HTMLElement,p:any,events:any) => { const instance=factory(host,json(p),events); return {...instance,update:(patch:any)=>instance.update(json(patch))}; };
+const json = (p:Record<string,unknown>) => { const result={...p}; for(const key of ['Options','Rows','Columns','Actions','Leading','Trailing']) if(key+'Json' in result) { result[key]=JSON.parse(String(result[key+'Json'] || (['Leading','Trailing'].includes(key)?'null':'[]'))); delete result[key+'Json']; } return result; };
+install({
+ Checkbox:wrap(createCheckbox),
+ TextInput:wrap(createTextInput),
+ TextArea:wrap(createTextArea),
+ RadioButton:wrap(createRadioButton),
+ RadioGroup:wrap(createRadioGroup),
+ Switch:wrap(createSwitch),
+ Select:wrap(createSelect),
+ Table:wrap(createTable)
+});

package/src/radio-button.ts

@@ -0,0 +1,2 @@
+export {createRadioButton} from './form-layout/choice.js';
+export type * from './form-layout/types.js';

package/src/radio-group.ts

@@ -0,0 +1,2 @@
+export {createRadioGroup} from './form-layout/choice.js';
+export type * from './form-layout/types.js';

package/src/runtime/date-picker.js

@@ -1,4 +1,4 @@
-// ../blu-grid/docs/scripts/advanced/shared.js
+// docs/scripts/advanced/shared.js
 import { state, register } from "./kernel.js";
 var shared = state("advanced", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
 var uid = () => `blu-advanced-${++shared.serial}`;
@@ -91,7 +91,7 @@ function createAPI(kind, init2, update2) {
   }, destroy }));
 }
 
-// ../blu-grid/docs/scripts/advanced/date-utils.js
+// docs/scripts/advanced/date-utils.js
 var pad = (n) => String(n).padStart(2, "0");
 function dateValue(d) {
   return String(d.getFullYear()).padStart(4, "0") + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
@@ -172,7 +172,7 @@ function validateRange(start, end, options = {}) {
   return "";
 }
 
-// ../blu-grid/docs/scripts/advanced/pickers.js
+// docs/scripts/advanced/pickers.js
 var formatOptions = ["YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY"];
 var today = () => dateValue(/* @__PURE__ */ new Date());
 var datePart = (value) => String(value || "").split("T")[0];
@@ -256,14 +256,15 @@ function positionPopup(s) {
   const below = Math.max(0, top + height - edge - anchor.bottom - gap), above = Math.max(0, anchor.top - gap - top - edge);
   const natural = panel.scrollHeight + 2, up = natural > below && above > below, room = Math.max(0, height - edge * 2);
   panel.style.maxHeight = room + "px";
-  panel.style.left = Math.max(left + edge, Math.min(anchor.left, left + width - edge - panelWidth)) + "px";
+  const fields = s.fieldRow.getBoundingClientRect();
+  panel.style.left = Math.max(left + edge, Math.min(fields.left + (fields.width - panelWidth) / 2, left + width - edge - panelWidth)) + "px";
   const preferred = up ? anchor.top - gap - natural : anchor.bottom + gap;
   panel.style.top = Math.max(top + edge, Math.min(preferred, top + height - edge - Math.min(natural, room))) + "px";
   panel.dataset.placement = up ? "top" : "bottom";
 }
 function focusPopup(s) {
   const timeField = s.timeOnly || s.dateTime && s.anchor === s.fields[1].input;
-  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus();
+  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus({ preventScroll: true });
 }
 function commit(s, first, end, time, keepOpen = false) {
   const issue = validate(s, first, end, time);
@@ -287,7 +288,7 @@ function commit(s, first, end, time, keepOpen = false) {
   s.inputSignature = JSON.stringify(s.range ? [s.start, s.end] : [s.value]);
   paintInputs(s);
   if (!keepOpen) close(s);
-  if (returnToInput) s.fields[0].input.focus();
+  if (returnToInput) s.fields[0].input.focus({ preventScroll: true });
   s.notice.textContent = s.range ? first ? labelDate(s, first) + " to " + labelDate(s, end) : "Date range cleared" : value ? "Selected " + (s.timeOnly ? formatTime(value, s.cycle) : labelDate(s, first) + (s.hasTime ? " at " + formatTime(time, s.cycle) : "")) : "Selection cleared";
   if (changed) {
     if (s.range) emit(s, "Change", first, end);
@@ -391,11 +392,18 @@ function appendOption(select, value, label) {
   return option;
 }
 function selectField(s, label, name) {
-  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "", label), select = node("select", "blu-picker__input");
+  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "blu-picker__select-caption", label), select = node("select", "blu-picker__input");
   select.id = s.uid + "-" + name;
   wrap.append(caption, select);
   return { wrap, select };
 }
+function focusPopupButton(event) {
+  if (event.button !== 0) return;
+  const target = event.target.closest?.("button");
+  if (!target || target.disabled) return;
+  event.preventDefault();
+  target.focus({ preventScroll: true });
+}
 function focusDay(s, value) {
   const min = datePart(s.options.Min) || "0001-01-01", max = datePart(s.options.Max) || "9999-12-31";
   value = value < min ? min : value > max ? max : value;
@@ -403,7 +411,7 @@ function focusDay(s, value) {
   s.focusDate = value;
   s.month = value.slice(0, 7);
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
 }
 function keyDay(s, event, value) {
   if (event.altKey || event.ctrlKey || event.metaKey) return;
@@ -441,7 +449,7 @@ function chooseDay(s, value) {
     return;
   }
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
   paintDraft(s);
 }
 function paintDraft(s) {
@@ -594,6 +602,7 @@ function init(s) {
   attr(s.dialog, "aria-modal", "false");
   if (s.dialog.showPopover) attr(s.dialog, "popover", "manual");
   s.root.append(s.dialog);
+  s.dialog.addEventListener("mousedown", focusPopupButton);
   s.title = node("h2", "blu-advanced-sr");
   s.title.id = s.uid + "-title";
   s.dialog.append(s.title);
@@ -606,7 +615,7 @@ function init(s) {
   const month = selectField(s, "Month", "month");
   s.monthSelect = month.select;
   const year = node("label", "blu-picker__select-field");
-  year.append(node("span", "", "Year"));
+  year.append(node("span", "blu-picker__select-caption", "Year"));
   s.yearInput = node("input", "blu-picker__input");
   s.yearInput.type = "number";
   s.yearInput.step = "1";
@@ -804,8 +813,8 @@ function update(s) {
     else {
       paintCalendar(s);
       paintTimes(s);
-      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus();
-      else if (focusId) document.getElementById(focusId)?.focus();
+      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus({ preventScroll: true });
+      else if (focusId) document.getElementById(focusId)?.focus({ preventScroll: true });
       positionPopup(s);
     }
   }

package/src/runtime/date-range-picker.js

@@ -1,4 +1,4 @@
-// ../blu-grid/docs/scripts/advanced/shared.js
+// docs/scripts/advanced/shared.js
 import { state, register } from "./kernel.js";
 var shared = state("advanced", () => ({ instances: /* @__PURE__ */ new Map(), serial: 0 }));
 var uid = () => `blu-advanced-${++shared.serial}`;
@@ -91,7 +91,7 @@ function createAPI(kind, init2, update2) {
   }, destroy }));
 }
 
-// ../blu-grid/docs/scripts/advanced/date-utils.js
+// docs/scripts/advanced/date-utils.js
 var pad = (n) => String(n).padStart(2, "0");
 function dateValue(d) {
   return String(d.getFullYear()).padStart(4, "0") + "-" + pad(d.getMonth() + 1) + "-" + pad(d.getDate());
@@ -172,7 +172,7 @@ function validateRange(start, end, options = {}) {
   return "";
 }
 
-// ../blu-grid/docs/scripts/advanced/pickers.js
+// docs/scripts/advanced/pickers.js
 var formatOptions = ["YYYY-MM-DD", "MM/DD/YYYY", "DD/MM/YYYY"];
 var today = () => dateValue(/* @__PURE__ */ new Date());
 var datePart = (value) => String(value || "").split("T")[0];
@@ -256,14 +256,15 @@ function positionPopup(s) {
   const below = Math.max(0, top + height - edge - anchor.bottom - gap), above = Math.max(0, anchor.top - gap - top - edge);
   const natural = panel.scrollHeight + 2, up = natural > below && above > below, room = Math.max(0, height - edge * 2);
   panel.style.maxHeight = room + "px";
-  panel.style.left = Math.max(left + edge, Math.min(anchor.left, left + width - edge - panelWidth)) + "px";
+  const fields = s.fieldRow.getBoundingClientRect();
+  panel.style.left = Math.max(left + edge, Math.min(fields.left + (fields.width - panelWidth) / 2, left + width - edge - panelWidth)) + "px";
   const preferred = up ? anchor.top - gap - natural : anchor.bottom + gap;
   panel.style.top = Math.max(top + edge, Math.min(preferred, top + height - edge - Math.min(natural, room))) + "px";
   panel.dataset.placement = up ? "top" : "bottom";
 }
 function focusPopup(s) {
   const timeField = s.timeOnly || s.dateTime && s.anchor === s.fields[1].input;
-  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus();
+  (timeField ? s.hours : s.calendar.querySelector('[data-date="' + s.focusDate + '"]') || s.monthSelect).focus({ preventScroll: true });
 }
 function commit(s, first, end, time, keepOpen = false) {
   const issue = validate(s, first, end, time);
@@ -287,7 +288,7 @@ function commit(s, first, end, time, keepOpen = false) {
   s.inputSignature = JSON.stringify(s.range ? [s.start, s.end] : [s.value]);
   paintInputs(s);
   if (!keepOpen) close(s);
-  if (returnToInput) s.fields[0].input.focus();
+  if (returnToInput) s.fields[0].input.focus({ preventScroll: true });
   s.notice.textContent = s.range ? first ? labelDate(s, first) + " to " + labelDate(s, end) : "Date range cleared" : value ? "Selected " + (s.timeOnly ? formatTime(value, s.cycle) : labelDate(s, first) + (s.hasTime ? " at " + formatTime(time, s.cycle) : "")) : "Selection cleared";
   if (changed) {
     if (s.range) emit(s, "Change", first, end);
@@ -391,11 +392,18 @@ function appendOption(select, value, label) {
   return option;
 }
 function selectField(s, label, name) {
-  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "", label), select = node("select", "blu-picker__input");
+  const wrap = node("label", "blu-picker__select-field"), caption = node("span", "blu-picker__select-caption", label), select = node("select", "blu-picker__input");
   select.id = s.uid + "-" + name;
   wrap.append(caption, select);
   return { wrap, select };
 }
+function focusPopupButton(event) {
+  if (event.button !== 0) return;
+  const target = event.target.closest?.("button");
+  if (!target || target.disabled) return;
+  event.preventDefault();
+  target.focus({ preventScroll: true });
+}
 function focusDay(s, value) {
   const min = datePart(s.options.Min) || "0001-01-01", max = datePart(s.options.Max) || "9999-12-31";
   value = value < min ? min : value > max ? max : value;
@@ -403,7 +411,7 @@ function focusDay(s, value) {
   s.focusDate = value;
   s.month = value.slice(0, 7);
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
 }
 function keyDay(s, event, value) {
   if (event.altKey || event.ctrlKey || event.metaKey) return;
@@ -441,7 +449,7 @@ function chooseDay(s, value) {
     return;
   }
   paintCalendar(s);
-  s.calendar.querySelector('[data-date="' + value + '"]')?.focus();
+  s.calendar.querySelector('[data-date="' + value + '"]')?.focus({ preventScroll: true });
   paintDraft(s);
 }
 function paintDraft(s) {
@@ -594,6 +602,7 @@ function init(s) {
   attr(s.dialog, "aria-modal", "false");
   if (s.dialog.showPopover) attr(s.dialog, "popover", "manual");
   s.root.append(s.dialog);
+  s.dialog.addEventListener("mousedown", focusPopupButton);
   s.title = node("h2", "blu-advanced-sr");
   s.title.id = s.uid + "-title";
   s.dialog.append(s.title);
@@ -606,7 +615,7 @@ function init(s) {
   const month = selectField(s, "Month", "month");
   s.monthSelect = month.select;
   const year = node("label", "blu-picker__select-field");
-  year.append(node("span", "", "Year"));
+  year.append(node("span", "blu-picker__select-caption", "Year"));
   s.yearInput = node("input", "blu-picker__input");
   s.yearInput.type = "number";
   s.yearInput.step = "1";
@@ -804,8 +813,8 @@ function update(s) {
     else {
       paintCalendar(s);
       paintTimes(s);
-      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus();
-      else if (focusId) document.getElementById(focusId)?.focus();
+      if (focusDate) s.calendar.querySelector('[data-date="' + focusDate + '"]')?.focus({ preventScroll: true });
+      else if (focusId) document.getElementById(focusId)?.focus({ preventScroll: true });
       positionPopup(s);
     }
   }