@revolist/ui 4.0.2-rc → 4.0.2

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,66 +65,254 @@
   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,
 .rv-temporal-picker__times .rv-control {
-  font-size: 12px;
-  min-height: 32px;
-  padding: 6px 8px;
+  font-size: var(--rv-control-font-size, 0.875rem);
+  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: 34px; font: inherit; font-size: 14px; 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,8 +1,8 @@
 import { t as e } from "../_chunks/jsxRuntime.module-F6UFnpT-.js";
 import { createPreactElement as t } from "../preact-mount.js";
-import { ButtonControl as n } from "../native-control.js";
-import { a as r, i, n as a, r as o, s } from "../_chunks/dialog.parts-DBqo3Qwb.js";
-//#region src/dialog/dialog.dom.view.tsx
+import { t as n } from "../_chunks/native-control-B_fVA5bL.js";
+import { a as r, i, n as a, r as o, s } from "../_chunks/dialog.parts-3w5FR06n.js";
+//#region src/dialog/dialog.dom.tsx
 function c(n, c, l) {
 	let u = f(), d, p, m, h, g;
 	return {

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-DBqo3Qwb.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-3w5FR06n.js";

package/distribution-chart/_distribution-chart.scss

@@ -15,7 +15,9 @@
   height: 100%;
 }
 
-.rv-distribution-chart__plot { overflow: visible; }
+.rv-distribution-chart__plot {
+  overflow: visible;
+}
 
 .rv-distribution-chart__series {
   fill: none;
@@ -23,7 +25,8 @@
   stroke-linecap: round;
   stroke-linejoin: round;
   stroke-width: 2.25px;
-  transition: stroke var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition: stroke var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-distribution-chart__series.is-selected {
@@ -31,13 +34,22 @@
 }
 
 .rv-distribution-chart__area {
-  fill: color-mix(in srgb, var(--rv-distribution-muted, var(--rv-ui-border)) 22%, transparent);
+  fill: color-mix(
+    in srgb,
+    var(--rv-distribution-muted, var(--rv-ui-border)) 22%,
+    transparent
+  );
   stroke: none;
-  transition: fill var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition: fill var(--rv-ui-motion-fast, 120ms)
+    var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-distribution-chart__area.is-selected {
-  fill: color-mix(in srgb, var(--rv-distribution-accent, var(--rv-ui-accent)) 22%, transparent);
+  fill: color-mix(
+    in srgb,
+    var(--rv-distribution-accent, var(--rv-ui-accent)) 22%,
+    transparent
+  );
 }
 
 .rv-distribution-chart__data {
@@ -55,7 +67,9 @@
 // A datum's tooltip is contained by its stacking context. Raise the active datum,
 // rather than only the tooltip, so it can paint above later bar siblings.
 .rv-distribution-chart__datum:hover,
-.rv-distribution-chart__datum:focus-visible { z-index: 2; }
+.rv-distribution-chart__datum:focus-visible {
+  z-index: 2;
+}
 
 .rv-distribution-chart__datum.is-bar {
   display: flex;
@@ -76,7 +90,11 @@
   min-height: 3px;
   border-radius: 2px 2px 0 0;
   background: var(--rv-distribution-muted, var(--rv-ui-border));
-  transition: background-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), opacity var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1));
+  transition:
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1)),
+    opacity var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-distribution-chart__datum.is-selected .rv-distribution-chart__bar {
@@ -94,7 +112,11 @@
   border: 2px solid var(--rv-distribution-muted, var(--rv-ui-border));
   border-radius: 50%;
   background: var(--rv-distribution-surface, var(--rv-ui-surface));
-  transition: border-color var(--rv-ui-motion-fast, 120ms) var(--rv-ui-motion-ease, cubic-bezier(.2, 0, 0, 1)), background-color 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)),
+    background-color var(--rv-ui-motion-fast, 120ms)
+      var(--rv-ui-motion-ease, cubic-bezier(0.2, 0, 0, 1));
 }
 
 .rv-distribution-chart__datum.is-selected .rv-distribution-chart__point {
@@ -108,89 +130,103 @@
   outline-offset: 2px;
 }
 
-.rv-distribution-chart__tooltip {
-  position: absolute;
-  z-index: 3;
-  top: 4px;
-  bottom: auto;
-  left: 50%;
-  display: none;
-  width: max-content;
-  max-width: 220px;
-  padding: 7px 9px;
-  transform: translateX(-50%);
-  border: 1px solid var(--rv-distribution-border, var(--rv-ui-border));
-  border-radius: 7px;
-  background: var(--tooltip-bg, var(--rv-ui-text));
-  box-shadow: 0 8px 24px var(--rv-ui-shadow);
-  color: var(--tooltip-color, var(--rv-ui-surface));
-  font: 11px/1.35 system-ui, sans-serif;
-  pointer-events: none;
-  white-space: nowrap;
-}
-
-.rv-distribution-chart__datum.is-point .rv-distribution-chart__tooltip {
-  top: calc(100% + 7px);
-}
-
-.rv-distribution-chart__tooltip strong,
-.rv-distribution-chart__tooltip span { display: block; }
-.rv-distribution-chart__tooltip strong { font-weight: 600; }
-.rv-distribution-chart__tooltip span { opacity: 0.82; }
-
-.rv-distribution-chart__datum:first-child .rv-distribution-chart__tooltip {
-  left: 0;
-  transform: none;
-}
-
-.rv-distribution-chart__datum:last-child .rv-distribution-chart__tooltip {
-  right: 0;
-  left: auto;
-  transform: none;
-}
-
-.rv-distribution-chart__datum:hover .rv-distribution-chart__tooltip,
-.rv-distribution-chart__datum:focus-visible .rv-distribution-chart__tooltip {
-  display: block;
-}
-
 @media (prefers-reduced-motion: reduce) {
-  .rv-distribution-chart__bar { transition: none; }
+  .rv-distribution-chart__bar {
+    transition: none;
+  }
 }
 
-.rv-distribution-chart__region { position: relative; min-width: 0; }
+.rv-distribution-chart__region {
+  position: relative;
+  min-width: 0;
+}
 .rv-distribution-chart__grid {
-  position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: space-between;
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
   pointer-events: none;
-  span { border-top: 1px dashed var(--rv-ui-border); }
+  span {
+    border-top: 1px dashed var(--rv-ui-border);
+  }
 }
 .rv-distribution-chart__labels {
-  display: flex; justify-content: space-between; gap: 8px; margin-top: 10px;
-  color: var(--rv-ui-text-muted); font-size: 11px;
-  span { min-width: 0; max-width: 22%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
-  &.is-bar span { flex: 1; text-align: center; }
+  display: flex;
+  justify-content: space-between;
+  gap: 8px;
+  margin-top: 10px;
+  color: var(--rv-ui-text-muted);
+  font-size: 11px;
+  span {
+    min-width: 0;
+    max-width: 22%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  &.is-bar span {
+    flex: 1;
+    text-align: center;
+  }
 }
 .rv-distribution-chart__value {
-  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
-  font-size: 11px; font-variant-numeric: tabular-nums; color: var(--rv-ui-text);
+  position: absolute;
+  top: 0;
+  left: 50%;
+  transform: translateX(-50%);
+  font-size: 11px;
+  font-variant-numeric: tabular-nums;
+  color: var(--rv-ui-text);
+}
+.rv-distribution-chart__datum.is-point .rv-distribution-chart__value {
+  top: -20px;
 }
-.rv-distribution-chart__datum.is-point .rv-distribution-chart__value { top: -20px; }
 .rv-distribution-chart__legend {
-  display: flex; align-items: center; justify-content: center; gap: 7px; margin-top: 16px;
-  font-size: 12px; color: var(--rv-ui-text-muted);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: 7px;
+  margin-top: 16px;
+  font-size: 12px;
+  color: var(--rv-ui-text-muted);
+}
+.rv-distribution-chart__legend i {
+  display: block;
+  width: 8px;
+  height: 8px;
+  border-radius: 2px;
+  background: var(--rv-distribution-accent, var(--rv-ui-accent));
 }
-.rv-distribution-chart__legend i,
-.rv-distribution-chart__tooltip i { display: block; width: 8px; height: 8px; border-radius: 2px; background: var(--rv-distribution-accent, var(--rv-ui-accent)); }
 .rv-distribution-chart__tooltip {
-  background: var(--rv-ui-surface); color: var(--rv-ui-text);
-  border-color: var(--rv-ui-border); box-shadow: 0 4px 12px var(--rv-ui-shadow);
-  white-space: normal; overflow-wrap: anywhere;
-  i { float: inline-start; margin-inline-end: 7px; margin-block-start: 3px; }
-  &--line i { width: 3px; height: 22px; }
-  &--dashed i { width: 8px; height: 0; background: transparent; border-top: 2px dashed var(--rv-ui-accent); margin-block-start: 7px; }
+  strong,
+  span {
+    display: block;
+  }
+  i {
+    display: block;
+    float: inline-start;
+    width: 8px;
+    height: 8px;
+    margin-inline-end: 7px;
+    margin-block-start: 3px;
+    border-radius: 2px;
+    background: var(--rv-distribution-accent, var(--rv-ui-accent));
+  }
+  &--line i {
+    width: 3px;
+    height: 22px;
+  }
+  &--dashed i {
+    height: 0;
+    background: transparent;
+    border-top: 2px dashed var(--rv-distribution-accent, var(--rv-ui-accent));
+    margin-block-start: 7px;
+  }
 }
-
 // Numeric/category progression stays left-to-right, including on RTL pages.
 // Keep SVG points, flex bars, labels and arrow-key order on the same axis.
 .rv-distribution-chart__region,
-.rv-distribution-chart__labels { direction: ltr; }
+.rv-distribution-chart__labels {
+  direction: ltr;
+}