@revolist/ui 4.0.5-rc → 4.0.5

package/styles.scss

@@ -21,12 +21,9 @@
 @use './styles/editor-slider';
 @use './styles/editor-counter';
 
-
-
 @use './progress/circular';
-@use './styles/legacy-rating.css';
-@use './styles/legacy-pagination.css';
-
+@use './styles/rating.css';
+@use './styles/pagination.css';
 
 @use './distribution-chart/distribution-chart';
 @use './brush-range/brush-range';
@@ -40,6 +37,7 @@
 @use './styles/activity-message';
 @use './styles/motion';
 
+@use './view-switcher';
 
 @include slider.styles;
 

package/surfaces.d.ts

@@ -1,5 +1,38 @@
-/** Compatibility entry; markup is owned by the Preact TSX implementation. */
-export * from './surfaces.view';
-export { useTooltip, ControlTooltip as TooltipSurface } from './core/tooltip';
-export { prepareTooltipSurface, ensureTooltipStyles } from './core/tooltip-surface';
+import { DialogHandle, DialogOpenOptions } from './dialog/dialog.types';
+export interface DialogEnvironment {
+    beforeMount?: (root: HTMLElement) => void;
+    onOpen?: (options: DialogOpenOptions) => void;
+    restoreFocus?: (explicit?: HTMLElement, previous?: HTMLElement) => void;
+}
+/** Standalone modal lifecycle. Integration hooks belong to the host application. */
+export declare class DialogController {
+    private readonly document;
+    private readonly environment;
+    private active?;
+    constructor(document: Document, environment?: DialogEnvironment);
+    get isOpen(): boolean;
+    open(options: DialogOpenOptions): DialogHandle;
+    close(root?: HTMLElement): void;
+    destroy(): void;
+}
+export { PopoverController, TooltipController, createTooltipElement, type PopoverOptions, } from './core/popover-controller';
+/** Keyboard behavior for menu surfaces; activation stays on native buttons. */
+export declare function attachMenuKeyboard(menu: HTMLElement, onClose?: () => void, options?: {
+    closeOnEscape?: boolean;
+}): () => void;
+export interface ResizeOptions {
+    value: number;
+    min?: number;
+    max?: number;
+    step?: number;
+    label: string;
+    /** Rejects a proposed width without changing the handle's current value. */
+    acceptValue?: (value: number) => boolean;
+    onChange: (value: number) => void;
+    direction?: 'ltr' | 'rtl';
+}
+/** Width resize controller. An options reader keeps controlled updates from interrupting a drag. */
+export declare function attachResizeHandle(handle: HTMLElement, options: ResizeOptions | (() => ResizeOptions)): () => void;
+export { useTooltip, ControlTooltip } from './core/tooltip';
+export { prepareTooltipSurface, ensureTooltipStyles, } from './core/tooltip-surface';
 export { TooltipText } from './core/tooltip-text';

package/surfaces.js

@@ -1,12 +1,12 @@
 import { releasePreactElement as e } from "./preact-mount.js";
-import { c as t, s as n } from "./_chunks/top-layer-popup-CNSDdfJV.js";
+import { c as t, s as n } from "./_chunks/top-layer-popup-CKJ7VJOF.js";
 import { inheritUiMotion as r } from "./core/motion.js";
-import { n as i, r as a, t as o } from "./_chunks/popover-controller-D-AvKQ7B.js";
-import { r as s, t as c } from "./_chunks/tooltip-D4xkio5G.js";
+import { PopoverController as i, TooltipController as a, createTooltipElement as o } from "./core/popover-controller.js";
+import { r as s, t as c } from "./_chunks/tooltip-h-Z8yFBY.js";
 import { createDialogElements as l, getDialogFocusableElements as u, trapDialogFocus as d } from "./dialog/dialog.dom.js";
 import { attachDialogDrag as f } from "./dialog/dialog.drag.js";
-import { t as p } from "./_chunks/tooltip-text-BXsUEmBH.js";
-//#region src/surfaces.view.tsx
+import { t as p } from "./_chunks/tooltip-text-BN5WdGHn.js";
+//#region package/surfaces.tsx
 var m = /* @__PURE__ */ new WeakMap(), h = class {
 	document;
 	environment;
@@ -70,8 +70,8 @@ function _(e, t) {
 		let e = n();
 		return e.value !== i && (i = e.value, r = e.value), e;
 	}, o = () => {}, s = (t) => {
-		let n = a();
-		r = Math.min(n.max ?? Infinity, Math.max(n.min ?? 0, t)), e.setAttribute("aria-valuenow", String(r)), n.onChange(r);
+		let n = a(), i = Math.min(n.max ?? Infinity, Math.max(n.min ?? 0, t));
+		n.acceptValue?.(i) !== !1 && (r = i, e.setAttribute("aria-valuenow", String(r)), n.onChange(r));
 	}, c = n();
 	e.setAttribute("role", "separator"), e.setAttribute("aria-orientation", "vertical"), e.setAttribute("aria-label", c.label), e.tabIndex = 0, e.setAttribute("aria-valuenow", String(r)), c.min !== void 0 && e.setAttribute("aria-valuemin", String(c.min)), c.max !== void 0 && e.setAttribute("aria-valuemax", String(c.max));
 	let l = (e) => {
@@ -98,4 +98,4 @@ function _(e, t) {
 	};
 }
 //#endregion
-export { h as DialogController, o as PopoverController, i as TooltipController, c as TooltipSurface, p as TooltipText, g as attachMenuKeyboard, _ as attachResizeHandle, a as createTooltipElement, n as ensureTooltipStyles, t as prepareTooltipSurface, s as useTooltip };
+export { c as ControlTooltip, h as DialogController, i as PopoverController, a as TooltipController, p as TooltipText, g as attachMenuKeyboard, _ as attachResizeHandle, o as createTooltipElement, n as ensureTooltipStyles, t as prepareTooltipSurface, s as useTooltip };

package/svelte/UiComponent.svelte

@@ -1,17 +1,35 @@
 <script lang="ts">
   import { onMount, untrack, type Snippet } from 'svelte';
-  import { uiComponents, componentModels, createFrameworkMount, withFrameworkContent, type UiContentTarget, type UiFrameworkMount } from '../framework';
+  import {
+    uiComponents,
+    componentModels,
+    createFrameworkMount,
+    withFrameworkContent,
+    type UiContentTarget,
+    type UiFrameworkMount,
+  } from '../framework';
   import type { SvelteUiProps } from '../svelte-props';
 
-  let { component, props = {}, children, slots = {}, onValueChange, onUiEvent }: SvelteUiProps = $props();
+  let {
+    component,
+    props = {},
+    children,
+    slots = {},
+    onValueChange,
+    onUiEvent,
+  }: SvelteUiProps = $props();
   type Content = Snippet<[Record<string, unknown>]>;
   let host: HTMLSpanElement;
   let targets = $state.raw<UiContentTarget<Content>[]>([]);
   let mount = $state.raw<UiFrameworkMount<Content>>();
   onMount(() => {
-    const current = createFrameworkMount<Content>(host, next => { targets = next; });
+    const current = createFrameworkMount<Content>(host, (next) => {
+      targets = next;
+    });
     mount = current;
-    return () => { current.destroy(); };
+    return () => {
+      current.destroy();
+    };
   });
   $effect(() => {
     const next = { ...props };
@@ -21,8 +39,11 @@
     const event = onUiEvent;
     const renderer = mount;
     const model = componentModels[name];
-    const callbacks = new Set([...Object.keys(next).filter(key => /^on[A-Z]/.test(key)),
-      'onClose', ...(model ? [model.callback] : [])]);
+    const callbacks = new Set([
+      ...Object.keys(next).filter((key) => /^on[A-Z]/.test(key)),
+      'onClose',
+      ...(model ? [model.callback] : []),
+    ]);
     for (const key of callbacks) {
       const original = next[key];
       next[key] = (...args: unknown[]) => {
@@ -32,18 +53,30 @@
         return result;
       };
     }
-    untrack(() => renderer?.render(uiComponents[name], next,
-      (props, content) => withFrameworkContent(name, props, contents, content)));
+    untrack(() =>
+      renderer?.render(uiComponents[name], next, (props, content) =>
+        withFrameworkContent(name, props, contents, content),
+      ),
+    );
   });
   function portal(node: HTMLElement, target: HTMLElement) {
     target.appendChild(node);
-    return { update(next: HTMLElement) { next.appendChild(node); } };
+    return {
+      update(next: HTMLElement) {
+        next.appendChild(node);
+      },
+    };
   }
 </script>
 
-<span bind:this={host} style="display: contents" data-rv-svelte-host={component}></span>
+<span bind:this={host} style="display: contents" data-rv-svelte-host={component}
+></span>
 {#each targets as target (target.id)}
-  <span use:portal={target.element} style="display: contents" data-rv-svelte-content>
+  <span
+    use:portal={target.element}
+    style="display: contents"
+    data-rv-svelte-content
+  >
     {@render target.content(target.scope)}
   </span>
 {/each}

package/svelte-control.js

@@ -1,5 +1,5 @@
 import { controlAttributes as e } from "./control-attributes.js";
-//#region src/svelte-control.ts
+//#region package/svelte-control.ts
 function t(t) {
 	let n = [], r = () => {
 		let r = t.localName, i = e(r, { ...r === "input" ? { type: t.type } : {} }), a = i.class.split(/\s+/).filter(Boolean);

package/svelte.d.ts

@@ -5,5 +5,5 @@ export type { SvelteUiProps } from './svelte-props';
 export type { UiComponentName, UiComponentProps } from './component-catalog';
 export type { PdfViewerProps, PdfViewerText } from './pdf-viewer/component';
 export type { PdfViewerToolbarProps } from './pdf-viewer/toolbar';
-export type { PdfViewerButton, PdfViewerButtonOptions, PdfViewerToolbarOptions, PdfViewerToolbarConfig } from './pdf-viewer/toolbar-options';
+export type { PdfViewerButton, PdfViewerButtonOptions, PdfViewerToolbarOptions, PdfViewerToolbarConfig, } from './pdf-viewer/toolbar-options';
 export { defaultPdfViewerText } from './pdf-viewer/translations';

package/svelte.js

@@ -1,11 +1,11 @@
-import { i as e } from "./_chunks/component-qKctqdzk.js";
-import { t } from "./_chunks/component-metadata-BMOOmqx5.js";
-import { n, t as r } from "./_chunks/framework-mount--RTLIqE-.js";
+import { i as e } from "./_chunks/component-C3k_8uIq.js";
+import { t } from "./_chunks/component-metadata-DlVkpW3h.js";
+import { n, t as r } from "./_chunks/framework-mount-D4I8HpVp.js";
 import { uiComponents as i } from "./framework.js";
 import "svelte/internal/disclose-version";
 import * as a from "svelte/internal/client";
 import { onMount as o, untrack as s } from "svelte";
-//#region src/svelte/UiComponent.svelte
+//#region package/svelte/UiComponent.svelte
 var c = a.from_html("<span style=\"display: contents\" data-rv-svelte-content=\"\"><!></span>"), l = a.from_html("<span style=\"display: contents\"></span> <!>", 1);
 function u(e, u) {
 	a.push(u, !0);
@@ -52,7 +52,7 @@ function u(e, u) {
 	}), a.template_effect(() => a.set_attribute(v, "data-rv-svelte-host", u.component)), a.append(e, _), a.pop();
 }
 //#endregion
-//#region src/svelte.ts
+//#region package/svelte.ts
 var d = u;
 //#endregion
 export { d as UiComponent, e as defaultPdfViewerText };

package/switch/index.js

@@ -1,6 +1,6 @@
 import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t } from "../_chunks/native-control-DO0d1kgx.js";
-//#region src/switch/index.tsx
+import { t } from "../_chunks/native-control-um1L1wgZ.js";
+//#region package/switch/index.tsx
 function n({ checked: n, onChange: r, label: i, ariaLabel: a, className: o = "", disabled: s = !1, labelPosition: c = "before", title: l, testId: u }) {
 	let d = /* @__PURE__ */ e("span", {
 		class: "rv-switch-label",

package/time-grid.d.ts

@@ -11,7 +11,6 @@ export interface TimeGridDayLabel {
 }
 export interface TimeGridProps {
     readonly disabled?: boolean;
-    readonly legacyClassPrefix?: string;
     readonly days: readonly TimeGridDayLabel[];
     readonly cells: ReadonlySet<string>;
     readonly focused: string;

package/time-grid.js

@@ -1,8 +1,8 @@
 import { r as e, t } from "./_chunks/hooks.module-CG3gN83z.js";
 import { t as n } from "./_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t as r } from "./_chunks/native-control-DO0d1kgx.js";
-import { t as i } from "./_chunks/tooltip-text-BXsUEmBH.js";
-//#region src/time-grid.tsx
+import { t as r } from "./_chunks/native-control-um1L1wgZ.js";
+import { t as i } from "./_chunks/tooltip-text-BN5WdGHn.js";
+//#region package/time-grid.tsx
 var a = (e, t) => `${e}:${t}`;
 function o(e) {
 	return [
@@ -12,7 +12,7 @@ function o(e) {
 	].filter(Boolean).join(" ");
 }
 function s(e) {
-	let t = (t) => `rv-time-grid__${t}${e.legacyClassPrefix ? ` ${e.legacyClassPrefix}__${t}` : ""}`, s = Array.from({ length: 12 }, (e, t) => t * 2);
+	let t = (e) => `rv-time-grid__${e}`, s = Array.from({ length: 12 }, (e, t) => t * 2);
 	return /* @__PURE__ */ n("div", {
 		class: t("schedule"),
 		children: [/* @__PURE__ */ n("div", {
@@ -46,10 +46,10 @@ function s(e) {
 							disabled: e.disabled,
 							role: "gridcell",
 							"data-time-cell": i,
-							class: `${o({
+							class: o({
 								weekend: f,
 								outsideWorkHours: u
-							})} ${e.legacyClassPrefix ? `${e.legacyClassPrefix}__cell` : ""}`,
+							}),
 							"aria-selected": s,
 							"aria-label": e.cellLabel(c, e.hourLabel(t), e.hourLabel(t + 2), s),
 							tabIndex: e.focused === i ? 0 : -1,

package/timeline-track/_style.scss

@@ -6,11 +6,29 @@
   height: 112px;
   margin: 0 0 12px;
   overflow: hidden;
-  border: 1px solid var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border)));
+  border: 1px solid
+    var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border)));
   border-radius: 11px;
   background:
-    repeating-linear-gradient(to right, transparent 0, transparent calc(25% - 1px), color-mix(in srgb, var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border))) 58%, transparent) 25%),
-    var(--rv-ui-surface-sunken, color-mix(in srgb, var(--rv-dialog-bg, var(--rv-ui-surface)) 96%, var(--rv-ui-text-muted, var(--rv-dialog-muted, var(--rv-ui-text-muted)))));
+    repeating-linear-gradient(
+      to right,
+      transparent 0,
+      transparent calc(25% - 1px),
+      color-mix(
+          in srgb,
+          var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border))) 58%,
+          transparent
+        )
+        25%
+    ),
+    var(
+      --rv-ui-surface-sunken,
+      color-mix(
+        in srgb,
+        var(--rv-dialog-bg, var(--rv-ui-surface)) 96%,
+        var(--rv-ui-text-muted, var(--rv-dialog-muted, var(--rv-ui-text-muted)))
+      )
+    );
 }
 .rv-timeline-control__track::before {
   position: absolute;
@@ -18,12 +36,29 @@
   right: 0;
   left: 0;
   height: 1px;
-  background: color-mix(in srgb, var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border))) 82%, transparent);
+  background: color-mix(
+    in srgb,
+    var(--rv-ui-border, var(--rv-dialog-border, var(--rv-ui-border))) 82%,
+    transparent
+  );
   content: '';
 }
-.rv-timeline-control__range { position: absolute; bottom: 8px; color: var(--rv-ui-text-muted, var(--rv-dialog-muted, var(--rv-ui-text-muted))); font-size: 11px; font-variant-numeric: tabular-nums; }
-.rv-timeline-control__range--start { left: 10px; }
-.rv-timeline-control__range--end { right: 10px; }
+.rv-timeline-control__range {
+  position: absolute;
+  bottom: 8px;
+  color: var(
+    --rv-ui-text-muted,
+    var(--rv-dialog-muted, var(--rv-ui-text-muted))
+  );
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+}
+.rv-timeline-control__range--start {
+  left: 10px;
+}
+.rv-timeline-control__range--end {
+  right: 10px;
+}
 .rv-timeline-control__bar {
   position: absolute;
   top: 39px;
@@ -37,7 +72,11 @@
   color: var(--timeline-event-text-color, #0f172a);
   box-shadow: 0 1px 2px var(--rv-ui-shadow);
   touch-action: none;
-  transition: border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), box-shadow var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition:
+    border-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    box-shadow var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 .rv-timeline-control__bar-move {
   position: absolute;
@@ -55,14 +94,28 @@
   cursor: grab;
   touch-action: none;
 }
-.rv-timeline-control__bar-move:active { cursor: grabbing; }
+.rv-timeline-control__bar-move:active {
+  cursor: grabbing;
+}
 .rv-timeline-control__bar:hover {
   border-color: var(--timeline-event-hover-color-end, #166534);
 }
-.rv-timeline-control__bar--selected { box-shadow: 0 0 0 3px color-mix(in srgb, var(--timeline-event-color, #16a34a) 22%, transparent), 0 1px 2px var(--rv-ui-shadow); }
-.rv-timeline-control__bar--milestone { border-radius: 50%; }
-.rv-timeline-control__bar--milestone .rv-timeline-control__bar-label { display: none; }
-.rv-timeline-control__bar--outside { outline: 2px dashed var(--rv-structured-warning, var(--rv-ui-warning)); outline-offset: 2px; }
+.rv-timeline-control__bar--selected {
+  box-shadow:
+    0 0 0 3px
+      color-mix(in srgb, var(--timeline-event-color, #16a34a) 22%, transparent),
+    0 1px 2px var(--rv-ui-shadow);
+}
+.rv-timeline-control__bar--milestone {
+  border-radius: 50%;
+}
+.rv-timeline-control__bar--milestone .rv-timeline-control__bar-label {
+  display: none;
+}
+.rv-timeline-control__bar--outside {
+  outline: 2px dashed var(--rv-structured-warning, var(--rv-ui-warning));
+  outline-offset: 2px;
+}
 .rv-timeline-control__bar-label {
   display: block;
   overflow: hidden;
@@ -89,16 +142,27 @@
   width: 4px;
   border-radius: 999px;
   background: rgb(255 255 255 / 82%);
-  opacity: .45;
-  transition: opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  opacity: 0.45;
+  transition: opacity var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
   content: '';
 }
 .rv-timeline-control__bar:hover .rv-timeline-control__handle::after,
-.rv-timeline-control__bar--selected .rv-timeline-control__handle::after { opacity: 1; }
-.rv-timeline-control__handle--start { left: -12px; }
-.rv-timeline-control__handle--start::after { left: 10px; }
-.rv-timeline-control__handle--end { right: -12px; }
-.rv-timeline-control__handle--end::after { right: 10px; }
+.rv-timeline-control__bar--selected .rv-timeline-control__handle::after {
+  opacity: 1;
+}
+.rv-timeline-control__handle--start {
+  left: -12px;
+}
+.rv-timeline-control__handle--start::after {
+  left: 10px;
+}
+.rv-timeline-control__handle--end {
+  right: -12px;
+}
+.rv-timeline-control__handle--end::after {
+  right: 10px;
+}
 
 .rv-timeline-control__track button:focus-visible {
   outline: 0;
@@ -106,16 +170,24 @@
   box-shadow: 0 0 0 3px var(--rv-ui-focus-ring);
 }
 @media (prefers-reduced-motion: reduce) {
-  .rv-timeline-control__bar { transition: none; }
+  .rv-timeline-control__bar {
+    transition: none;
+  }
 }
 @media (forced-colors: active) {
-  .rv-timeline-control__track { border-color: CanvasText; }
+  .rv-timeline-control__track {
+    border-color: CanvasText;
+  }
   .rv-timeline-control__bar {
     border-color: Highlight;
     background: Highlight;
     color: HighlightText;
     forced-color-adjust: auto;
   }
-  .rv-timeline-control__bar--selected { outline: 2px solid Highlight; }
-  .rv-timeline-control__handle::after { background: HighlightText; }
+  .rv-timeline-control__bar--selected {
+    outline: 2px solid Highlight;
+  }
+  .rv-timeline-control__handle::after {
+    background: HighlightText;
+  }
 }

package/timeline-track/index.js

@@ -1,9 +1,9 @@
 import { t as e } from "../_chunks/hooks.module-CG3gN83z.js";
 import { t } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
-import { t as n } from "../_chunks/native-control-DO0d1kgx.js";
-import { n as r } from "../_chunks/tooltip-D4xkio5G.js";
+import { t as n } from "../_chunks/native-control-um1L1wgZ.js";
+import { n as r } from "../_chunks/tooltip-h-Z8yFBY.js";
 import { eventOutsideRange as i, moveTimelineEvent as a, niceTimelineStep as o, resizeTimelineEvent as s, timelineEventBackground as c, timelineGeometry as l } from "./model.js";
-//#region src/timeline-track/component.tsx
+//#region package/timeline-track/component.tsx
 var u = {
 	preview: "Timeline preview",
 	moveEvent: (e) => `Move event ${e}`,

package/timeline-track/model.js

@@ -1,4 +1,4 @@
-//#region src/timeline-track/model.ts
+//#region package/timeline-track/model.ts
 function e(e, t) {
 	return e.start < t.start || e.end > t.end;
 }