@revolist/ui 4.0.4-rc → 4.0.4

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-qIhp5vaX.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

@@ -25,6 +25,15 @@
     width: 100%;
   }
 }
+
+// Validation follows the picker's width without contributing to popup sizing.
+.rv-temporal-picker > .rv-alert,
+.rv-temporal-draft > .rv-alert {
+  inline-size: 0;
+  min-inline-size: 100%;
+  white-space: normal;
+}
+
 .rv-date-time-field {
   display: inline-flex;
   align-items: center;
@@ -41,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;
@@ -50,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,
@@ -61,55 +84,235 @@
   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;
   gap: 6px;
-  flex: 0 1 194px;
+  flex: 0 1 224px;
   min-width: 0;
-  > .rv-control { flex: 0 1 88px; min-width: 0; width: 88px; }
-  > .rv-temporal-picker__time { flex: 0 1 100px; min-width: 86px; }
+  // 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-temporal-picker__endpoint:not(:has(.rv-temporal-picker__time)) {
+  flex: 0 0 auto;
 }
-.rv-temporal-picker__endpoint:not(:has(.rv-temporal-picker__time)) { flex-basis: 110px; }
 
-.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-editor-popup.rv-editor-popup--datetime { width: min(540px, calc(100vw - 16px)); }
-.rv-temporal-picker__body { display: flex; align-items: start; flex-wrap: wrap; gap: 16px; }
-.rv-temporal-picker--datetime .rv-temporal-picker__body > .rv-time-selection { flex: 1 1 196px; }
-.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;
   gap: 12px;
   min-width: 0;
   width: 100%;
   font-variant-numeric: tabular-nums;
-  &__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-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
+) {
+  width: min(480px, calc(100vw - 16px));
+}
+.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 {
+  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 .rv-temporal-picker__body { flex-direction: column; align-items: stretch; }
-  .rv-temporal-picker--datetime .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) {
+  width: min(512px, calc(100vw - 16px));
+}
+
+// Paired clocks need a wider surface than a single time-only field.
+.rv-editor-popup:has(.rv-temporal-picker--time > .rv-temporal-picker__times) {
+  width: min(458px, calc(100vw - 16px));
+}
+
+// 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)
+  ) {
+  min-width: min(234px, calc(100vw - 16px));
+  width: 234px;
 }

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

@@ -10,6 +10,8 @@ export interface TimeSelectionProps {
     min?: string;
     max?: string;
     step?: number;
+    /** Calendar compositions keep clock columns behind an explicit toggle. */
+    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 }: 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[];

package/dialog/dialog.dom.js

@@ -1,12 +1,12 @@
 import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t } from "../_chunks/native-control-C_yok8_-.js";
-import { createPreactElement as n } from "../preact-mount.js";
-import { a as r, i, n as a, r as o, s } from "../_chunks/dialog.parts-CKGkC5zP.js";
-//#region src/dialog/dialog.dom.view.tsx
-function c(t, c, l) {
+import { createPreactElement as t } from "../preact-mount.js";
+import { t as n } from "../_chunks/native-control-um1L1wgZ.js";
+import { a as r, i, n as a, r as o, s } from "../_chunks/dialog.parts-NqEEVc9P.js";
+//#region package/dialog/dialog.dom.tsx
+function c(n, c, l) {
 	let u = f(), d, p, m, h, g;
 	return {
-		root: n(t, /* @__PURE__ */ e("div", {
+		root: t(n, /* @__PURE__ */ e("div", {
 			class: ["rv-dialog-overlay", c.overlayClass].filter(Boolean).join(" "),
 			role: "dialog",
 			"aria-modal": "true",
@@ -57,15 +57,15 @@ function c(t, c, l) {
 		actions: g
 	};
 }
-function l(t, r, a) {
-	return n(t, /* @__PURE__ */ e(i, {
+function l(n, r, a) {
+	return t(n, /* @__PURE__ */ e(i, {
 		"aria-label": r,
 		title: r,
 		onClick: a
 	}));
 }
 function u(r, i, a, o = "default") {
-	return n(r, /* @__PURE__ */ e(t, {
+	return t(r, /* @__PURE__ */ e(n, {
 		title: i || void 0,
 		class: o === "default" ? "rv-btn" : `rv-btn-${o}`,
 		onClick: a,

package/dialog/dialog.drag.js

@@ -1,4 +1,4 @@
-//#region src/dialog/dialog.drag.ts
+//#region package/dialog/dialog.drag.ts
 var e = [
 	"a",
 	"button",

package/dialog/dialog.parts.d.ts

@@ -59,4 +59,4 @@ export type DialogActionFooterProps = JSX.IntrinsicElements['footer'] & {
     readonly actionsClass?: string;
 };
 /** Default Cancel/Save, opt-in Delete/Reset; false hides any standard action. */
-export declare function DialogActionFooter(props: DialogActionFooterProps): import('../_vendor/preact/src/index').VNode<import('../_vendor/preact/src/index').Attributes>;
+export declare function DialogActionFooter(props: DialogActionFooterProps): h.JSX.Element;

package/dialog/dialog.parts.js

@@ -1 +1 @@
-export { t as DialogActionFooter, n as DialogActions, r as DialogBody, i as DialogCloseButton, a as DialogFooter, o as DialogForm, s as DialogHeader, c as DialogTitleInput, l as EditableDialogHeader } from "../_chunks/dialog.parts-CKGkC5zP.js";
+export { t as DialogActionFooter, n as DialogActions, r as DialogBody, i as DialogCloseButton, a as DialogFooter, o as DialogForm, s as DialogHeader, c as DialogTitleInput, l as EditableDialogHeader } from "../_chunks/dialog.parts-NqEEVc9P.js";

package/dialog/dialog.preact.js

@@ -1,6 +1,6 @@
 import { c as e } from "../_chunks/hooks.module-CG3gN83z.js";
 import { attachDialogDrag as t } from "./dialog.drag.js";
-//#region src/dialog/dialog.preact.ts
+//#region package/dialog/dialog.preact.ts
 function n({ targetRef: n, handleRef: r, enabled: i = !0 }) {
 	e(() => {
 		let e = n.current, a = r.current;