@revolist/ui 4.0.5-rc → 4.0.5

package/configurator-sections.d.ts

@@ -22,11 +22,11 @@ export declare function useConfiguratorSections(config: ConfiguratorSectionsConf
     select: (id: string) => void;
 };
 /** Shared switch spacing and opaque sticky backdrop for every configurator. */
-export declare function ConfiguratorHeader({ children, className }: {
+export declare function ConfiguratorHeader({ children, className, }: {
     children?: ComponentChildren;
     className?: string;
 }): h.JSX.Element;
-export declare function ConfiguratorSectionTabs({ sections, active, onChange, prefix, label, className }: {
+export declare function ConfiguratorSectionTabs({ sections, active, onChange, prefix, label, className, }: {
     sections: readonly ConfiguratorSection[];
     active?: string;
     onChange: (id: string) => void;
@@ -35,7 +35,7 @@ export declare function ConfiguratorSectionTabs({ sections, active, onChange, pr
     className?: string;
 }): h.JSX.Element;
 /** Inactive sections retain chat transcripts and host drafts until removed. */
-export declare function ConfiguratorSectionPanels({ sections, active, prefix }: {
+export declare function ConfiguratorSectionPanels({ sections, active, prefix, }: {
     sections: readonly ConfiguratorSection[];
     active?: string;
     prefix: string;

package/configurator-sections.js

@@ -2,7 +2,7 @@ import { i as e } from "./_chunks/preact.module-BBM36DnO.js";
 import { i as t, r as n, t as r } from "./_chunks/hooks.module-CG3gN83z.js";
 import { t as i } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
 import { SegmentedSwitch as a } from "./segmented-switch/index.js";
-//#region src/configurator-sections.tsx
+//#region package/configurator-sections.tsx
 function o(e, n, r = !1) {
 	let i = new Set(n.map((e) => e.id)), a = (e.sections ?? []).filter((e) => !e.id || i.has(e.id) ? !1 : (i.add(e.id), !0)), o = [...n, ...a].filter((e) => !e.hidden).map((e) => r ? {
 		...e,

package/control-attributes.js

@@ -1,4 +1,4 @@
-//#region src/control-attributes.ts
+//#region package/control-attributes.ts
 function e(...e) {
 	e = e.map((e) => e && typeof e == "object" && "value" in e && "subscribe" in e ? e.value : e);
 	let t = e.flatMap((e) => typeof e == "string" ? e.split(/\s+/) : e && typeof e == "object" ? Object.entries(e).filter(([, e]) => e).map(([e]) => e) : []);

package/control-presentation.d.ts

@@ -1,2 +1,8 @@
-/** Compatibility entry; markup is owned by the Preact TSX implementation. */
-export * from './control-presentation.view';
+import { ControlTag, ControlAttributes } from './control-attributes';
+export * from './control-attributes';
+export declare function renderControl<H extends (...args: any[]) => any>(h: H, tag: ControlTag, attributes?: ControlAttributes | null, ...children: any[]): ReturnType<H>;
+export declare function createControl<K extends ControlTag>(document: Document, tag: K, attributes?: ControlAttributes): HTMLElementTagNameMap[K];
+export declare function registerControl<T extends object>(component: T, tag: ControlTag): T;
+export declare function nativeControlTag(type: unknown): string | undefined;
+/** Decorate a native icon control after installing its trusted bundled SVG. */
+export declare function decorateIconAction(element: HTMLElement, label: string): void;

package/control-presentation.js

@@ -1,9 +1,9 @@
 import { c as e } from "./_chunks/preact.module-BBM36DnO.js";
 import { t } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
 import { createPreactElement as n } from "./preact-mount.js";
-import { n as r } from "./_chunks/popover-controller-D-AvKQ7B.js";
+import { TooltipController as r } from "./core/popover-controller.js";
 import { controlAttributes as i, controlClassName as a } from "./control-attributes.js";
-//#region src/control-presentation.view.tsx
+//#region package/control-presentation.tsx
 function o(e, t, n, ...r) {
 	let a = n ?? {};
 	if (t === "button" && a.busy === !0) {

package/controls.d.ts

@@ -133,6 +133,17 @@ export declare function Submenu({ label, children }: ShellProps & {
     label: string;
 }): h.JSX.Element;
 export declare function ResizeHandle(props: ResizeOptions): h.JSX.Element;
+export interface PanelResizeHandleProps extends Omit<ResizeOptions, 'value' | 'direction'> {
+    edge: 'left' | 'right';
+    initialWidth: number;
+    anchorRef?: {
+        current: HTMLDivElement | null;
+    };
+    /** Measure the outer host when it owns the resized width. */
+    resizeParent?: boolean;
+}
+/** Measures the containing panel and places a width control on its physical edge. */
+export declare function PanelResizeHandle({ edge, initialWidth, anchorRef, resizeParent, max, ...props }: PanelResizeHandleProps): h.JSX.Element;
 export type PaginationDirection = 'first' | 'previous' | 'next' | 'last';
 export type PaginationButtonOptions = Pick<ButtonProps, 'disabled' | 'variant' | 'className' | 'title'>;
 export interface PaginationProps {

package/controls.js

@@ -1,4 +1,4 @@
-import { A as e, C as t, D as n, E as r, F as i, I as a, L as o, M as s, N as c, O as l, P as u, S as d, T as f, _ as p, a as m, b as h, c as g, d as _, f as v, g as y, h as b, i as x, j as S, k as C, l as w, m as T, n as E, o as D, p as O, r as k, s as A, t as j, u as M, v as N, w as P, x as F, y as I } from "./_chunks/controls-BLQnWEd7.js";
-import { EditorList as L, EditorListGroup as R, EditorListItem as z, EditorListItemContent as B, EditorPane as V, EditorSplitLayout as H } from "./editor-layout/index.js";
-import { t as U } from "./_chunks/badge.view-D30pMUfi.js";
-export { o as Alert, U as Badge, j as Button, E as ButtonGroup, k as Chip, x as CircularProgress, m as CountBadge, D as DateInput, A as DateTimeInput, g as Disclosure, w as EmptyState, M as FieldError, _ as FieldHint, v as FormSection, O as IconButton, L as Listbox, R as ListboxGroup, z as ListboxOption, B as ListboxOptionContent, T as LoadingOverlay, b as Menu, y as MenuItem, p as MenuSeparator, N as NumberInput, I as NumberStepper, h as Pagination, V as Pane, F as Panel, d as RadioGroup, t as Rating, P as ResizeHandle, f as SegmentedControl, r as Spinner, H as SplitLayout, n as Submenu, l as TabPanel, C as Tabs, e as TextInput, S as Textarea, s as TimeInput, c as ToggleButton, u as Toolbar, i as ToolbarGroup, a as ToolbarSeparator };
+import { t as e } from "./_chunks/selection-list-tooltips-m00U3L6z.js";
+import { A as t, B as n, C as r, D as i, E as a, F as o, I as s, L as c, M as l, N as u, O as d, P as f, R as p, S as m, T as h, _ as g, a as _, b as v, c as y, d as b, f as x, g as S, h as C, i as w, j as T, k as E, l as D, m as O, n as k, o as A, p as j, r as M, s as N, t as P, u as F, v as I, w as L, x as R, y as z } from "./_chunks/controls-B3EgM_DS.js";
+import { EditorList as B, EditorListGroup as V, EditorListItem as H, EditorListItemContent as U, EditorPane as W, EditorSplitLayout as G } from "./editor-layout/index.js";
+export { p as Alert, n as Badge, P as Button, k as ButtonGroup, M as Chip, w as CircularProgress, _ as CountBadge, A as DateInput, N as DateTimeInput, y as Disclosure, D as EmptyState, F as FieldError, b as FieldHint, x as FormSection, j as IconButton, B as Listbox, V as ListboxGroup, H as ListboxOption, U as ListboxOptionContent, O as LoadingOverlay, C as Menu, S as MenuItem, g as MenuSeparator, I as NumberInput, z as NumberStepper, v as Pagination, W as Pane, R as Panel, m as PanelResizeHandle, r as RadioGroup, L as Rating, h as ResizeHandle, a as SegmentedControl, i as Spinner, G as SplitLayout, d as Submenu, E as TabPanel, t as Tabs, T as TextInput, l as Textarea, u as TimeInput, f as ToggleButton, o as Toolbar, s as ToolbarGroup, c as ToolbarSeparator, e as useSelectionListTooltips };

package/core/anchored-popover.js

@@ -1,4 +1,4 @@
-//#region src/core/anchored-popover.ts
+//#region package/core/anchored-popover.ts
 function e(e, t, n, r = 4, i = 8) {
 	let a = e.bottom + r, o = e.top - t.height - r, s = a + t.height <= n.height - i || o < i ? "below" : "above", c = e.left, l = e.right - t.width, u = c + t.width <= n.width - i || l < i ? "left" : "right";
 	return {

package/core/control-id.js

@@ -1,4 +1,4 @@
-//#region src/core/control-id.ts
+//#region package/core/control-id.ts
 function e(e = "rv-control") {
 	return `${e}-${globalThis.crypto?.randomUUID ? globalThis.crypto.randomUUID() : `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`}`;
 }

package/core/editor-popup-position.d.ts

@@ -1,8 +1,12 @@
-/** Keep the owning field visible, scrolling the popup on the roomier side when necessary. */
+/** Prefer keeping the field visible, with an optional viewport fit for larger editors. */
 export declare function calculateEditorPopupPosition(anchor: Pick<DOMRect, 'left' | 'right' | 'top' | 'bottom'>, popup: Pick<DOMRect, 'width' | 'height'>, viewport: {
     width: number;
     height: number;
-}, gap?: number, inset?: number): {
+}, { gap, inset, fitViewport }?: {
+    gap?: number | undefined;
+    inset?: number | undefined;
+    fitViewport?: boolean | undefined;
+}): {
     placementY: string;
     maxHeight: number;
     top: number;

package/core/editor-popup.d.ts

@@ -6,6 +6,10 @@ export interface EditorPopupHandle {
 export interface EditorPopupOptions {
     label: string;
     className?: string;
+    /** Allow overlap with the anchor when the popup needs more vertical room. */
+    fitViewport?: boolean;
+    /** A separate trigger can toggle the popup without applying the draft. */
+    trigger?: HTMLElement;
     onClose?: () => void;
     isAvailable?: () => boolean;
 }

package/core/editor-popup.js

@@ -1 +1 @@
-export { t as mountEditorPopup } from "../_chunks/editor-popup-BaaxL89T.js";
+export { t as mountEditorPopup } from "../_chunks/editor-popup-NNP9Fh9U.js";

package/core/motion.js

@@ -1,4 +1,4 @@
-//#region src/core/motion.ts
+//#region package/core/motion.ts
 function e(e) {
 	let t = [];
 	for (let n = e; n;) {

package/{_chunks/popover-controller-D-AvKQ7B.js → core/popover-controller.js}

@@ -1,11 +1,11 @@
-import { calculateAnchoredPopoverPosition as e } from "../core/anchored-popover.js";
-import { t } from "./jsxRuntime.module-F6UFnpT-.js";
+import { calculateAnchoredPopoverPosition as e } from "./anchored-popover.js";
+import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
 import { createPreactElement as n, releasePreactElement as r } from "../preact-mount.js";
-import { o as i, r as a, t as o } from "./top-layer-popup-CNSDdfJV.js";
-import { t as s } from "./tooltip-session-B6X6x8G_.js";
-import { createControlId as c } from "../core/control-id.js";
-import { inheritUiMotion as l } from "../core/motion.js";
-//#region src/core/popover-controller.tsx
+import { o as i, r as a, t as o } from "../_chunks/top-layer-popup-CKJ7VJOF.js";
+import { t as s } from "../_chunks/tooltip-session-CBtRMBPr.js";
+import { createControlId as c } from "./control-id.js";
+import { inheritUiMotion as l } from "./motion.js";
+//#region package/core/popover-controller.tsx
 var u = /* @__PURE__ */ new WeakMap(), d = class {
 	active;
 	get isOpen() {
@@ -99,4 +99,4 @@ var p = class {
 	}
 };
 //#endregion
-export { p as n, f as r, d as t };
+export { d as PopoverController, p as TooltipController, f as createTooltipElement };

package/core/selection-list-tooltips.d.ts

@@ -0,0 +1,2 @@
+/** One delegated binding per list, including options rendered by custom templates. */
+export declare function useSelectionListTooltips(optionSelector?: string): (root: HTMLElement | null) => void;

package/core/tooltip.d.ts

@@ -22,7 +22,7 @@ export declare function useControlTooltip(text: string, _floating?: boolean, pre
     readonly tooltip: h.JSX.Element;
 };
 /** Controlled surface adapter retained for existing consumers. */
-export declare function ControlTooltip({ id, text, content, visible, anchor, className }: {
+export declare function ControlTooltip({ id, text, content, visible, anchor, className, }: {
     readonly id: string;
     readonly text: string;
     readonly content?: ComponentChildren;

package/core/top-layer-popup.d.ts

@@ -1,4 +1,4 @@
-export { ensureTooltipStyles, prepareTooltipSurface, TOOLTIP_STYLES } from './tooltip-surface';
+export { ensureTooltipStyles, prepareTooltipSurface, TOOLTIP_STYLES, } from './tooltip-surface';
 export { ownsPopupTarget } from './popup-ownership';
 export type TopLayerPopupMode = 'popover' | 'fallback';
 export type TopLayerPopupElement = HTMLElement & {

package/core/top-layer-popup.js

@@ -1 +1 @@
-export { a as TOOLTIP_STYLES, s as ensureTooltipStyles, t as hideTopLayerPopup, i as ownsPopupTarget, n as popupOwnsTarget, c as prepareTooltipSurface, r as showTopLayerPopup } from "../_chunks/top-layer-popup-CNSDdfJV.js";
+export { a as TOOLTIP_STYLES, s as ensureTooltipStyles, t as hideTopLayerPopup, i as ownsPopupTarget, n as popupOwnsTarget, c as prepareTooltipSurface, r as showTopLayerPopup } from "../_chunks/top-layer-popup-CKJ7VJOF.js";

package/date-time/attach.d.ts

@@ -1,3 +1,3 @@
 import { TemporalPickerOptions } from './types';
-/** Adds the shared picker to an existing native input without changing its draft/commit owner. */
+/** Adds or replaces the shared picker on an existing native input. */
 export declare function attachTemporalPicker(input: HTMLInputElement, options: TemporalPickerOptions, commit: (value: string) => void): () => void;

package/date-time/date-control.d.ts

@@ -4,7 +4,7 @@ export interface DateInputOptions extends DateEntryOptions {
     /** Date-only multiple selection uses a semicolon-separated list by default. */
     multipleSeparator?: string;
 }
-export declare function DateControl({ value, label, options, multiple, invalid, errorId, disabled, readOnly, minDate, maxDate, onChange, onFocus }: {
+export declare function DateControl({ value, label, options, multiple, invalid, errorId, disabled, readOnly, minDate, maxDate, onChange, onFocus, }: {
     value: string | string[];
     label: string;
     options?: DateInputOptions;

package/date-time/field.d.ts

@@ -1,11 +1,13 @@
 import { DateTimeFieldProps, TemporalPickerOptions } from './types';
 import { TemporalControlValue } from '../_shared/dates/index';
-export declare function TemporalDraft({ value, options, apply, cancel, clearable, }: {
+export declare function TemporalDraft({ value, options, apply, cancel, onValidChange, clearable, }: {
     clearable?: boolean;
     value: TemporalControlValue;
     options: TemporalPickerOptions;
     apply: (value: TemporalControlValue) => void | string;
     cancel: () => void;
+    /** Receives each valid temporal draft value before it is applied. */
+    onValidChange?: (value: TemporalControlValue) => void;
 }): import("../_vendor/preact/src/index").JSX.Element;
 /** Native text entry plus the original shared CalendarPicker, usable in any product form. */
-export declare function DateTimeField({ value, kind, picker, onValueChange, onInput, formatValue, parseValue, ...input }: DateTimeFieldProps): import("../_vendor/preact/src/index").JSX.Element;
+export declare function DateTimeField({ value, kind, picker, livePickerUpdates, onValueChange, onInput, formatValue, parseValue, ...input }: DateTimeFieldProps): import("../_vendor/preact/src/index").JSX.Element;

package/date-time/index.js

@@ -1 +1 @@
-export { r as DateTimeField, i as TemporalDraft, a as TemporalPicker, n as attachTemporalPicker, o as defaultTemporalPickerText, t as renderTemporalValue, s as temporalPickerLabel } from "../_chunks/date-time-B8rK5gpC.js";
+export { r as DateTimeField, i as TemporalDraft, a as TemporalPicker, n as attachTemporalPicker, o as defaultTemporalPickerText, t as renderTemporalValue, s as temporalPickerLabel } from "../_chunks/date-time-CfiFYodx.js";

package/date-time/style.scss

@@ -31,6 +31,7 @@
 .rv-temporal-draft > .rv-alert {
   inline-size: 0;
   min-inline-size: 100%;
+  white-space: normal;
 }
 
 .rv-date-time-field {
@@ -49,8 +50,14 @@
   }
 }
 
-.rv-temporal-picker__dates { margin-block-end: 8px; }
-.rv-temporal-picker__dates > input { min-width: 0; width: 100%; flex: 1 1 0; }
+.rv-temporal-picker__dates {
+  margin-block-end: 8px;
+}
+.rv-temporal-picker__dates > input {
+  min-width: 0;
+  width: 100%;
+  flex: 1 1 0;
+}
 
 .rv-temporal-picker__header {
   display: flex;
@@ -58,9 +65,17 @@
   align-items: end;
   gap: 8px;
   margin-block-end: 8px;
-  &:empty { display: none; }
-  > .rv-temporal-picker__dates { flex: 1 1 112px; margin-block-end: 0; }
-  > .rv-temporal-picker__time--single { flex: 0 1 132px; min-width: 110px; }
+  &:empty {
+    display: none;
+  }
+  > .rv-temporal-picker__dates {
+    flex: 1 1 112px;
+    margin-block-end: 0;
+  }
+  > .rv-temporal-picker__time--single {
+    flex: 0 1 132px;
+    min-width: 110px;
+  }
 }
 
 .rv-temporal-picker__header .rv-control,
@@ -69,7 +84,9 @@
   min-height: var(--rv-control-height, 32px);
   padding: var(--rv-control-padding, 6px 12px);
 }
-.rv-temporal-picker__dates { flex-wrap: wrap; }
+.rv-temporal-picker__dates {
+  flex-wrap: wrap;
+}
 .rv-temporal-picker__endpoint {
   display: flex;
   align-items: center;
@@ -77,25 +94,54 @@
   flex: 0 1 224px;
   min-width: 0;
   // Ten date characters plus the control's horizontal padding and borders.
-  > .rv-control { flex: 0 0 auto; min-width: 0; width: calc(10ch + 26px); }
-  > .rv-temporal-picker__time { flex: 0 1 100px; min-width: 86px; }
+  > .rv-control {
+    flex: 0 0 auto;
+    min-width: 0;
+    width: calc(10ch + 26px);
+  }
+  > .rv-temporal-picker__time {
+    flex: 0 1 100px;
+    min-width: 86px;
+  }
+}
+.rv-temporal-picker__endpoint:not(:has(.rv-temporal-picker__time)) {
+  flex: 0 0 auto;
 }
-.rv-temporal-picker__endpoint:not(:has(.rv-temporal-picker__time)) { flex: 0 0 auto; }
 
-.rv-temporal-picker .rv-temporal-picker__endpoint > .rv-temporal-picker__time { flex: 0 1 100px; }
+.rv-temporal-picker .rv-temporal-picker__endpoint > .rv-temporal-picker__time {
+  flex: 0 1 100px;
+}
 
 // Time-only surfaces follow their content rather than the calendar's minimum width.
 .rv-editor-popup.rv-editor-popup--time {
   min-width: min(240px, calc(100vw - 16px));
   width: 240px;
 }
-.rv-temporal-picker__body { display: flex; align-items: start; flex-wrap: wrap; gap: 16px; }
-.rv-temporal-picker--datetime .rv-temporal-picker__body { flex-direction: column; align-items: stretch; }
-.rv-temporal-picker--datetime .rv-temporal-picker__body > .rv-time-selection { flex: 0 0 auto; }
-.rv-temporal-picker--time .rv-temporal-picker__body > .rv-time-selection { flex: 1 1 0; }
-.rv-temporal-picker--time .rv-temporal-picker__header { margin: 0; }
-.rv-temporal-picker__times { flex-wrap: wrap; }
-.rv-temporal-picker__times > .rv-time-selection { flex: 1 1 196px; }
+.rv-temporal-picker__body {
+  display: flex;
+  align-items: start;
+  flex-wrap: wrap;
+  gap: 16px;
+}
+.rv-temporal-picker--datetime .rv-temporal-picker__body {
+  flex-direction: column;
+  align-items: stretch;
+}
+.rv-temporal-picker--datetime .rv-temporal-picker__body > .rv-time-selection {
+  flex: 0 0 auto;
+}
+.rv-temporal-picker--time .rv-temporal-picker__body > .rv-time-selection {
+  flex: 1 1 0;
+}
+.rv-temporal-picker--time .rv-temporal-picker__header {
+  margin: 0;
+}
+.rv-temporal-picker__times {
+  flex-wrap: wrap;
+}
+.rv-temporal-picker__times > .rv-time-selection {
+  flex: 1 1 196px;
+}
 .rv-time-selection {
   max-width: 208px;
   display: grid;
@@ -103,46 +149,158 @@
   min-width: 0;
   width: 100%;
   font-variant-numeric: tabular-nums;
-  &__entry-row { display: flex; align-items: end; gap: 4px; min-width: 0; }
-  &__entry-row > .rv-time-selection__entry { flex: 1 1 0; }
-  &__clock { display: grid; gap: 12px; min-width: 0; }
-  &__toggle { flex: 0 0 auto; }
-  &__toggle[aria-expanded='true'] .rv-svg-icon { transform: rotate(180deg); }
-  &__entry { display: grid; gap: 6px; min-width: 0; font-size: 12px; font-weight: 500; }
-  &__entry > .rv-control { width: 100%; min-width: 0; height: var(--rv-control-height, 32px); font: inherit; font-size: var(--rv-control-font-size, 0.875rem); font-weight: 400; }
-  &__entry input[type='time']::-webkit-calendar-picker-indicator { display: none; }
-  &__columns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
-  &__columns--seconds { grid-template-columns: repeat(3, minmax(0, 1fr)); }
-  &__column { display: grid; gap: 6px; min-width: 0; }
-  &__label { color: var(--rv-ui-text-muted); font-size: 11px; text-align: center; }
-  &__list.rv-editor-list { position: relative; height: 174px; overflow-y: auto; overscroll-behavior: contain; padding: 3px; border: 1px solid var(--rv-ui-border); border-radius: 6px; scrollbar-width: thin; }
-  &__list .rv-editor-list__item { min-height: 32px; height: 32px; padding: 4px; text-align: center; font-size: 13px; }
-  &__list .rv-editor-list__item:disabled { opacity: .35; cursor: default; }
-  &__period .rv-editor-list { display: flex; height: auto; overflow: visible; }
-  &__period .rv-editor-list__item { flex: 1 1 0; }
-  &__empty { margin: 0; color: var(--rv-ui-text-muted); font-size: 12px; }
-}
-.rv-editor-popup .rv-temporal-draft .rv-editor-actions { position: static; }
-.rv-temporal-draft--time .rv-editor-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--rv-ui-border); }
-.rv-temporal-draft--time .rv-editor-actions__clear { margin-inline-end: auto; }
+  &__entry-row {
+    display: flex;
+    align-items: end;
+    gap: 4px;
+    min-width: 0;
+  }
+  &__entry-row > .rv-time-selection__entry {
+    flex: 1 1 0;
+  }
+  &__clock {
+    display: grid;
+    gap: 12px;
+    min-width: 0;
+  }
+  &__toggle {
+    flex: 0 0 auto;
+  }
+  &__toggle[aria-expanded='true'] .rv-svg-icon {
+    transform: rotate(180deg);
+  }
+  &__entry {
+    display: grid;
+    gap: 6px;
+    min-width: 0;
+    font-size: 12px;
+    font-weight: 500;
+  }
+  &__entry > .rv-control {
+    width: 100%;
+    min-width: 0;
+    height: var(--rv-control-height, 32px);
+    font: inherit;
+    font-size: var(--rv-control-font-size, 0.875rem);
+    font-weight: 400;
+  }
+  &__entry input[type='time']::-webkit-calendar-picker-indicator {
+    display: none;
+  }
+  &__columns {
+    display: grid;
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+    gap: 8px;
+  }
+  &__columns--seconds {
+    grid-template-columns: repeat(3, minmax(0, 1fr));
+  }
+  &__column {
+    display: grid;
+    gap: 6px;
+    min-width: 0;
+  }
+  &__label {
+    color: var(--rv-ui-text-muted);
+    font-size: 11px;
+    text-align: center;
+  }
+  &__list.rv-editor-list {
+    position: relative;
+    height: 174px;
+    overflow-y: auto;
+    overscroll-behavior: contain;
+    padding: 3px;
+    border: 1px solid var(--rv-ui-border);
+    border-radius: 6px;
+    scrollbar-width: thin;
+  }
+  &__list .rv-editor-list__item {
+    min-height: 32px;
+    height: 32px;
+    padding: 4px;
+    text-align: center;
+    font-size: 13px;
+  }
+  &__list .rv-editor-list__item:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+  &__period {
+    border-block-start: 1px solid var(--rv-ui-border);
+    padding-block-start: 6px;
+  }
+  &__period .rv-editor-list {
+    display: flex;
+    height: auto;
+    overflow: visible;
+  }
+  &__period .rv-editor-list__item {
+    flex: 1 1 0;
+  }
+  &__empty {
+    margin: 0;
+    color: var(--rv-ui-text-muted);
+    font-size: 12px;
+  }
+}
+// Keep validation and actions in scroll order when a calendar and clock are tall.
+.rv-editor-popup--datetime .rv-temporal-draft .rv-editor-actions,
+.rv-editor-popup
+  .rv-temporal-draft:has(.rv-temporal-picker--multi-month)
+  .rv-editor-actions {
+  position: static;
+}
+.rv-temporal-draft--time .rv-editor-actions {
+  margin-top: 10px;
+  padding-top: 10px;
+  border-top: 1px solid var(--rv-ui-border);
+}
+.rv-temporal-draft--time .rv-editor-actions__clear {
+  margin-inline-end: auto;
+}
 
 // One calendar keeps its clock visible alongside it; multi-month calendars keep
 // the optional clock below the calendar panels.
-.rv-editor-popup:has(.rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month) .rv-time-selection) {
+.rv-editor-popup:has(
+  .rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month)
+    .rv-time-selection
+) {
   width: min(480px, calc(100vw - 16px));
 }
-.rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month) .rv-temporal-picker__body {
+.rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month)
+  .rv-temporal-picker__body {
   flex-direction: row;
+  flex-wrap: nowrap;
+  gap: 8px;
 }
-.rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month) .rv-temporal-picker__body > .rv-time-selection {
+.rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month)
+  .rv-temporal-picker__body
+  > .rv-time-selection {
   flex: 0 1 208px;
+  border-inline-start: 1px solid var(--rv-ui-border);
+  padding-inline-start: 8px;
 }
 @media (max-width: 540px) {
-  .rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month) .rv-temporal-picker__body { flex-direction: column; }
-  .rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month) .rv-temporal-picker__body > .rv-time-selection { flex-basis: auto; }
+  .rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month)
+    .rv-temporal-picker__body {
+    flex-direction: column;
+  }
+  .rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month)
+    .rv-temporal-picker__body
+    > .rv-time-selection {
+    flex-basis: auto;
+    border-inline-start: 0;
+    padding-inline-start: 0;
+    border-block-start: 1px solid var(--rv-ui-border);
+    padding-block-start: 8px;
+  }
 }
 
-.rv-editor-popup:has(.rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month) .revo-calendar--week-numbers):has(.rv-time-selection) {
+.rv-editor-popup:has(
+    .rv-temporal-picker--datetime:not(.rv-temporal-picker--multi-month)
+      .revo-calendar--week-numbers
+  ):has(.rv-time-selection) {
   width: min(512px, calc(100vw - 16px));
 }
 
@@ -152,7 +310,9 @@
 }
 
 // Grid adapters and standalone fields share the same compact single-clock size.
-.rv-editor-popup:has(.rv-temporal-picker--time):not(:has(.rv-temporal-picker__times)) {
+.rv-editor-popup:has(.rv-temporal-picker--time):not(
+    :has(.rv-temporal-picker__times)
+  ) {
   min-width: min(234px, calc(100vw - 16px));
   width: 234px;
 }

package/date-time/time-selection.d.ts

@@ -14,4 +14,4 @@ export interface TimeSelectionProps {
     collapsible?: boolean;
 }
 /** Shared typed entry and bounded clock columns for time-only and date-time pickers. */
-export declare function TimeSelection({ value, label, text, onChange, format, precision, locale, min, max, step, collapsible }: TimeSelectionProps): import("../_vendor/preact/src/index").JSX.Element;
+export declare function TimeSelection({ value, label, text, onChange, format, precision, locale, min, max, step, collapsible, }: TimeSelectionProps): import("../_vendor/preact/src/index").JSX.Element;

package/date-time/types.d.ts

@@ -55,6 +55,8 @@ export interface TemporalPickerProps extends TemporalPickerOptions {
     value: TemporalControlValue;
     onChange: (value: TemporalControlValue) => void;
     onValidityChange?: (valid: boolean) => void;
+    /** Called for each valid edit, including intermediate edits before selection completes. */
+    onValidChange?: (value: TemporalControlValue) => void;
     /** Complete calendar selection, distinct from an in-progress keyboard draft. */
     onSelectionComplete?: (value: TemporalControlValue) => void;
 }
@@ -65,10 +67,12 @@ export interface DateTimeFieldProps extends Omit<JSX.InputHTMLAttributes<HTMLInp
     disabled?: boolean;
     readOnly?: boolean;
     picker?: Omit<TemporalPickerOptions, 'kind' | 'selection'>;
+    /** Publish valid popup edits immediately when the picker uses auto-apply. */
+    livePickerUpdates?: boolean;
     onValueChange?: (value: string) => void;
     /** Existing product text adapters can keep their custom display/parser. */
     formatValue?: (value: string) => string;
     parseValue?: (text: string) => string | undefined;
 }
-/** One accessible name for both trigger and popup; chooseDate remains a compatibility fallback. */
+/** One accessible name for both trigger and popup; date and time controls use their own localized action labels. */
 export declare function temporalPickerLabel(kind: LocalDateControlKind, text?: Partial<TemporalPickerText>): string;

package/dialog/dialog-action-footer.d.ts

@@ -1,2 +1,17 @@
-/** Compatibility entry; markup is owned by the Preact TSX implementation. */
-export * from './dialog-action-footer.view';
+import { h } from '../_vendor/preact/src/index';
+export interface NativeDialogAction {
+    label?: string;
+    disabled?: boolean;
+    onClick?: () => void;
+}
+export interface NativeDialogActionFooterProps {
+    cancel?: NativeDialogAction | false;
+    save?: NativeDialogAction | false;
+    deleteAction?: NativeDialogAction | false;
+    reset?: NativeDialogAction | false;
+}
+/** One TSX composition for Preact consumers and element-returning host adapters. */
+export declare function ActionFooterView({ cancel, save, deleteAction, reset, start, end, children, actionsClass, class: className, ...props }: Record<string, any>): h.JSX.Element;
+export declare function mountDialogActionFooter(host: HTMLElement, props: NativeDialogActionFooterProps): {
+    destroy(): void;
+};

package/dialog/dialog.dom.d.ts

@@ -1,2 +1,15 @@
-/** Compatibility entry; markup is owned by the Preact TSX implementation. */
-export * from './dialog.dom.view';
+import { DialogButtonVariant, DialogOpenOptions } from './dialog.types';
+export interface DialogElements {
+    readonly root: HTMLElement;
+    readonly surface: HTMLElement;
+    readonly header: HTMLElement;
+    readonly body: HTMLElement;
+    readonly footer: HTMLElement;
+    readonly actions: HTMLElement;
+}
+/** Element-returning native API; shared TSX owns the entire dialog chrome. */
+export declare function createDialogElements(document: Document, options: DialogOpenOptions, close: () => void): DialogElements;
+export declare function createDialogCloseButton(document: Document, label: string, close: () => void): HTMLButtonElement;
+export declare function createDialogButton(document: Document, label: string, action: () => void, variant?: DialogButtonVariant): HTMLButtonElement;
+export declare function trapDialogFocus(root: HTMLElement, event: KeyboardEvent): void;
+export declare function getDialogFocusableElements(root: HTMLElement): HTMLElement[];