orio-ui 1.20.0 → 1.23.2

package/dist/runtime/components/Canvas/tools/transformTool.js

@@ -0,0 +1,210 @@
+import { defineCanvasTool } from "../types.js";
+import {
+  findTopNode,
+  getNodeBounds,
+  hitTestNode,
+  renderHighlightRect,
+  toLocalPoint
+} from "./hitTest.js";
+import {
+  computeResizePatch,
+  cursorForHandle,
+  hitHandle,
+  normalizeAngleDelta,
+  renderResizeHandles,
+  renderRotationHandle
+} from "./transformHandles.js";
+import TransformTooltip from "./tooltips/Transform.vue";
+const RESIZE_HANDLES = [
+  "n",
+  "s",
+  "e",
+  "w",
+  "nw",
+  "ne",
+  "sw",
+  "se"
+];
+const ALL_HANDLES = [...RESIZE_HANDLES, "rotate"];
+export function transformTool(options = {}) {
+  let selectedNodeId = null;
+  let mode = null;
+  let hoveredHandle = null;
+  let activeHandle = null;
+  let dragCtx = null;
+  let prevAngle = 0;
+  let accumulatedRotation = 0;
+  let lastX = 0;
+  let lastY = 0;
+  function reset() {
+    mode = null;
+    activeHandle = null;
+    dragCtx = null;
+  }
+  function clearSelection(api) {
+    if (selectedNodeId) {
+      selectedNodeId = null;
+      hoveredHandle = null;
+      api.setCursor(null);
+      api.requestRender();
+    }
+  }
+  return defineCanvasTool({
+    id: "transform",
+    label: "Transform",
+    icon: "transform",
+    cursor: "default",
+    tooltip: TransformTooltip,
+    defaultOptions: {
+      radius: 10,
+      minSize: 8,
+      ...options
+    },
+    onPointerDown(e, api) {
+      if (selectedNodeId) {
+        const node2 = api.getNode(selectedNodeId);
+        if (node2) {
+          const handle = hitHandle(node2, e, { handles: ALL_HANDLES });
+          const bounds = getNodeBounds(node2);
+          const center = {
+            x: bounds.x + bounds.width / 2,
+            y: bounds.y + bounds.height / 2
+          };
+          if (handle === "rotate") {
+            mode = "rotate";
+            accumulatedRotation = node2.rotation ?? 0;
+            prevAngle = Math.atan2(e.y - center.y, e.x - center.x);
+            api.setCursor("none");
+            return;
+          }
+          if (handle && handle !== "rotate") {
+            mode = "resize";
+            activeHandle = handle;
+            dragCtx = {
+              original: {
+                ...node2,
+                data: JSON.parse(JSON.stringify(node2.data))
+              },
+              originalBounds: bounds,
+              startLocal: toLocalPoint(node2, e)
+            };
+            api.setCursor("none");
+            return;
+          }
+          const tools = api.getTools();
+          const toolMap = new Map(tools.map((t) => [t.id, t]));
+          if (hitTestNode(node2, e, api.options.radius, toolMap)) {
+            mode = "move";
+            lastX = e.x;
+            lastY = e.y;
+            api.setCursor("grabbing");
+            return;
+          }
+        }
+      }
+      const node = findTopNode(e, api, api.options.radius);
+      selectedNodeId = node ? node.id : null;
+      hoveredHandle = null;
+      api.requestRender();
+    },
+    onPointerMove(e, api) {
+      if (mode && selectedNodeId && e.buttons !== 0) {
+        const node = api.getNode(selectedNodeId);
+        if (!node) return;
+        if (mode === "resize" && activeHandle && dragCtx) {
+          const local = toLocalPoint(dragCtx.original, e);
+          const patch = computeResizePatch(activeHandle, local, dragCtx, {
+            minSize: api.options.minSize
+          });
+          if (patch) api.updateNode(selectedNodeId, patch);
+          api.setCursor("none");
+          return;
+        }
+        if (mode === "rotate") {
+          const b = getNodeBounds(node);
+          const angle = Math.atan2(
+            e.y - (b.y + b.height / 2),
+            e.x - (b.x + b.width / 2)
+          );
+          accumulatedRotation += normalizeAngleDelta(angle - prevAngle);
+          prevAngle = angle;
+          api.updateNode(selectedNodeId, { rotation: accumulatedRotation });
+          api.setCursor("none");
+          return;
+        }
+        if (mode === "move") {
+          const dx = e.x - lastX;
+          const dy = e.y - lastY;
+          lastX = e.x;
+          lastY = e.y;
+          const patch = {
+            x: node.x + dx,
+            y: node.y + dy
+          };
+          if (Array.isArray(node.data?.points)) {
+            const data = node.data;
+            patch.data = {
+              ...node.data,
+              points: data.points.map((p) => ({ x: p.x + dx, y: p.y + dy }))
+            };
+          }
+          api.updateNode(selectedNodeId, patch);
+          api.setCursor("grabbing");
+          return;
+        }
+      }
+      if (selectedNodeId) {
+        const node = api.getNode(selectedNodeId);
+        if (node) {
+          const handle = hitHandle(node, e, { handles: ALL_HANDLES });
+          if (handle !== hoveredHandle) {
+            hoveredHandle = handle;
+            api.requestRender();
+          }
+          if (handle) {
+            api.setCursor(cursorForHandle(handle, node.rotation));
+            return;
+          }
+          const tools = api.getTools();
+          const toolMap = new Map(tools.map((t) => [t.id, t]));
+          if (hitTestNode(node, e, api.options.radius, toolMap)) {
+            api.setCursor("grab");
+            return;
+          }
+        }
+      }
+      api.setCursor(null);
+    },
+    onPointerUp(_e, api) {
+      reset();
+      api.setCursor(null);
+    },
+    onDeactivate(api) {
+      reset();
+      api.setCursor(null);
+      clearSelection(api);
+    },
+    onKeyDown(e, api) {
+      if (e.key === "Escape" && selectedNodeId) {
+        clearSelection(api);
+        e.preventDefault();
+      }
+    },
+    renderOverlay(ctx, api) {
+      if (!selectedNodeId) return;
+      const node = api.getNode(selectedNodeId);
+      if (!node) {
+        selectedNodeId = null;
+        return;
+      }
+      renderHighlightRect(ctx, node);
+      renderResizeHandles(ctx, node, {
+        handles: RESIZE_HANDLES,
+        hovered: mode === "resize" ? activeHandle : hoveredHandle && hoveredHandle !== "rotate" ? hoveredHandle : null
+      });
+      renderRotationHandle(ctx, node, {
+        hovered: mode === "rotate" || hoveredHandle === "rotate"
+      });
+    }
+  });
+}

package/dist/runtime/components/Canvas/tools/undoTool.d.ts

@@ -0,0 +1 @@
+export declare function undoTool(): import("../types.js").CanvasTool<unknown, Record<string, unknown>>;

package/dist/runtime/components/Canvas/tools/undoTool.js

@@ -0,0 +1,17 @@
+import { defineCanvasTool } from "../types.js";
+import UndoTooltip from "./tooltips/Undo.vue";
+export function undoTool() {
+  return defineCanvasTool({
+    id: "undo",
+    label: "Undo",
+    icon: "undo",
+    kind: "action",
+    tooltip: UndoTooltip,
+    action(api) {
+      api.undo();
+    },
+    disabled(api) {
+      return !api.canUndo.value;
+    }
+  });
+}

package/dist/runtime/components/Canvas/types.d.ts

@@ -0,0 +1,125 @@
+import type { Component, ComputedRef, Ref } from "vue";
+import type { IconName } from "../../utils/icon-registry.js";
+export interface CanvasPoint {
+    x: number;
+    y: number;
+}
+export interface CanvasNode<TData = unknown> {
+    id: string;
+    /** Matches the id of the tool that owns (renders) this node. */
+    type: string;
+    x: number;
+    y: number;
+    width?: number;
+    height?: number;
+    rotation?: number;
+    /** When true, future interaction tools should skip this node. */
+    frozen?: boolean;
+    zIndex?: number;
+    data: TData;
+}
+export interface CanvasPointerEvent {
+    /** Canvas-space x (origin is the top-left of the stage). */
+    x: number;
+    /** Canvas-space y. */
+    y: number;
+    /** Viewport-space x — useful for positioning HTML overlays. */
+    clientX: number;
+    /** Viewport-space y. */
+    clientY: number;
+    /** Pressed buttons bitmask from the underlying PointerEvent. */
+    buttons: number;
+    originalEvent: PointerEvent;
+}
+export interface CanvasToolApi<TOptions extends Record<string, unknown> = Record<string, unknown>> {
+    /** Reactive, mutable options bag for this tool. */
+    options: TOptions;
+    /** All current nodes — treat as read-only; use helpers to mutate. */
+    nodes: Ref<CanvasNode[]>;
+    addNode: (node: Omit<CanvasNode, "id"> & {
+        id?: string;
+    }) => CanvasNode;
+    updateNode: (id: string, patch: Partial<Omit<CanvasNode, "id">>) => void;
+    removeNode: (id: string) => void;
+    getNode: (id: string) => CanvasNode | undefined;
+    clear: () => void;
+    /** Schedule a redraw on the next animation frame. */
+    requestRender: () => void;
+    /** The stage's root element — mount overlay DOM here. */
+    stageEl: () => HTMLElement | null;
+    /** Current canvas size in CSS pixels. */
+    size: () => {
+        width: number;
+        height: number;
+    };
+    /** Undo the last action. */
+    undo: () => void;
+    /** Redo the last undone action. */
+    redo: () => void;
+    /** Whether there's anything to undo. */
+    canUndo: ComputedRef<boolean>;
+    /** Whether there's anything to redo. */
+    canRedo: ComputedRef<boolean>;
+    /** Read/write another tool's reactive options. */
+    getToolOptions: <T extends Record<string, unknown>>(id: string) => T;
+    /** All registered tools — useful for hit-testing across tool types. */
+    getTools: () => CanvasTool[];
+    /**
+     * Override the stage cursor — pass `null` to fall back to the active tool's
+     * static `cursor`. Use for hover-state feedback (resize handles, rotation
+     * handle, etc.).
+     */
+    setCursor: (cursor: string | null) => void;
+}
+/**
+ * Tool kind determines how the toolbar renders the tool:
+ * - `"interaction"` (default) — activates on click, receives pointer events on the stage.
+ * - `"action"` — fires `action()` on click, never becomes the active tool.
+ * - `"widget"` — renders a custom `toolbar` component instead of a button.
+ */
+export type CanvasToolKind = "interaction" | "action" | "widget";
+export interface CanvasTool<TNodeData = unknown, TOptions extends Record<string, unknown> = Record<string, unknown>> {
+    /** Stable id — also used as `node.type` for nodes produced by this tool. */
+    id: string;
+    label?: string;
+    /** Icon name from the Orio icon registry. */
+    icon?: IconName | (string & {});
+    /** CSS cursor applied to the stage while this tool is active. */
+    cursor?: string;
+    tooltip?: Component;
+    /**
+     * Tool kind. Defaults to `"interaction"`.
+     * - `"interaction"` — standard pointer tool (draw, text, etc.)
+     * - `"action"` — one-shot action (undo, redo, clear)
+     * - `"widget"` — renders a custom component in the toolbar
+     */
+    kind?: CanvasToolKind;
+    /** For action tools: callback fired when the button is clicked. */
+    action?: (api: CanvasToolApi<TOptions>) => void;
+    /** For action tools: reactive disabled state. */
+    disabled?: (api: CanvasToolApi<TOptions>) => boolean;
+    /** For widget tools: Vue component rendered in the toolbar instead of a button. */
+    toolbar?: Component;
+    defaultOptions?: TOptions;
+    onPointerDown?: (e: CanvasPointerEvent, api: CanvasToolApi<TOptions>) => void;
+    onPointerMove?: (e: CanvasPointerEvent, api: CanvasToolApi<TOptions>) => void;
+    onPointerUp?: (e: CanvasPointerEvent, api: CanvasToolApi<TOptions>) => void;
+    onActivate?: (api: CanvasToolApi<TOptions>) => void;
+    onDeactivate?: (api: CanvasToolApi<TOptions>) => void;
+    onKeyDown?: (e: KeyboardEvent, api: CanvasToolApi<TOptions>) => void;
+    render?: (ctx: CanvasRenderingContext2D, node: CanvasNode<TNodeData>) => void;
+    /** Draw overlay graphics after all nodes have been rendered. */
+    renderOverlay?: (ctx: CanvasRenderingContext2D, api: CanvasToolApi<TOptions>) => void;
+    /**
+     * Hit-test a node against a point. Used by the erase tool (and future
+     * selection tools) to determine if a pointer intersects this node.
+     * Return `true` if the node is "hit".
+     *
+     * @param node    The node to test.
+     * @param point   The pointer position in canvas-space.
+     * @param radius  The eraser/selection radius in CSS pixels.
+     */
+    hitTest?: (node: CanvasNode<TNodeData>, point: CanvasPoint, radius: number) => boolean;
+}
+/** Author-facing helper that preserves generics on a tool definition. */
+export declare function defineCanvasTool<TNodeData = unknown, TOptions extends Record<string, unknown> = Record<string, unknown>>(tool: CanvasTool<TNodeData, TOptions>): CanvasTool<TNodeData, TOptions>;

package/dist/runtime/components/Canvas/types.js

@@ -0,0 +1,3 @@
+export function defineCanvasTool(tool) {
+  return tool;
+}

package/dist/runtime/components/ControlElement.vue

@@ -54,6 +54,7 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
   display: flex;
   flex-direction: column;
   gap: 0.1rem;
+  border-radius: var(--control-radius);
 }
 .control .control-label {
   font-size: var(--control-label-font-size);
@@ -75,7 +76,10 @@ const sizeStyle = computed(() => sizeTokens[props.size]);
 .control .slot-wrapper :deep(*) {
   font-size: var(--control-font-size);
 }
-.control.has-error .slot-wrapper {
+.control.has-error .slot-wrapper:not(:has(:deep(.error-fields))) {
+  border: 1px solid var(--color-danger);
+}
+.control.has-error .slot-wrapper :deep(.error-fields .slot-wrapper > *) {
   border: 1px solid var(--color-danger);
 }
 .control.has-error .slot-wrapper :deep(*) {

package/dist/runtime/components/DateRangePicker.vue

@@ -1,8 +1,10 @@
 <script setup>
 import { ref, watch, computed } from "vue";
+import { useI18n } from "vue-i18n";
 defineProps({
   month: { type: Boolean, required: false }
 });
+const { t } = useI18n();
 const dates = defineModel("dates", { type: Object, ...{ required: true } });
 const present = ref(dates.value.endDate !== "" && !dates.value.endDate);
 watch(present, (value) => {
@@ -24,12 +26,22 @@ defineExpose({ dateIsCorrect });
 <template>
   <orio-control-element
     v-bind="$attrs"
-    :error="!dateIsCorrect && 'Start date must be before end date.'"
+    :error="!dateIsCorrect ? t('dateRangePicker.startBeforeEnd') : null"
   >
     <div class="date-range-picker">
-      <orio-date-picker v-model:date="dates.startDate" :month />
-      <orio-date-picker v-model:date="dates.endDate" :month />
-      <orio-check-box v-model="present"> Present </orio-check-box>
+      <orio-date-picker
+        v-model:date="dates.startDate"
+        class="error-fields"
+        :month
+      />
+      <orio-date-picker
+        v-model:date="dates.endDate"
+        class="error-fields"
+        :month
+      />
+      <orio-check-box v-model="present">
+        {{ t("dateRangePicker.present") }}
+      </orio-check-box>
     </div>
   </orio-control-element>
 </template>

package/dist/runtime/components/Icon.vue

@@ -15,12 +15,12 @@ const sizeValue = computed(() => {
 
 <template>
   <span
-    class="orio-icon"
+    class="icon"
     :style="{ color, width: sizeValue, height: sizeValue }"
     v-html="iconSvg"
   />
 </template>
 
 <style scoped>
-.orio-icon{align-items:center;display:inline-flex;flex-shrink:0;height:var(--control-icon-size,1.5em);justify-content:center;width:var(--control-icon-size,1.5em)}.orio-icon :deep(svg){fill:currentColor;height:100%;width:100%}
+.icon{align-items:center;display:inline-flex;flex-shrink:0;height:var(--control-icon-size,1.5em);justify-content:center;width:var(--control-icon-size,1.5em)}.icon :deep(svg){fill:currentColor;height:100%;width:100%}
 </style>

package/dist/runtime/components/LocaleSwitcher.d.vue.ts

@@ -0,0 +1,13 @@
+export interface LocaleOption {
+    code: string;
+    flag: string;
+    label: string;
+}
+interface Props {
+    locales?: LocaleOption[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    locales: LocaleOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/LocaleSwitcher.vue

@@ -0,0 +1,43 @@
+<script setup>
+import { computed } from "vue";
+import { useI18n } from "vue-i18n";
+const props = defineProps({
+  locales: { type: Array, required: false, default: () => [
+    { code: "en", flag: "\u{1F1EC}\u{1F1E7}", label: "English" },
+    { code: "uk", flag: "\u{1F1FA}\u{1F1E6}", label: "\u0423\u043A\u0440\u0430\u0457\u043D\u0441\u044C\u043A\u0430" }
+  ] }
+});
+const { locale } = useI18n();
+const selected = computed({
+  get: () => props.locales.find((l) => l.code === locale.value) ?? props.locales[0],
+  set: (val) => {
+    locale.value = val.code;
+  }
+});
+</script>
+
+<template>
+  <orio-selector
+    v-model="selected"
+    :options="locales"
+    field="code"
+    option-name="label"
+  >
+    <template #trigger-label>
+      <span class="locale-trigger">
+        <span class="locale-flag">{{ selected.flag }}</span>
+        <span class="locale-label">{{ selected.label }}</span>
+      </span>
+    </template>
+    <template #option="{ option }">
+      <span class="locale-option">
+        <span class="locale-flag">{{ option.flag }}</span>
+        <span>{{ option.label }}</span>
+      </span>
+    </template>
+  </orio-selector>
+</template>
+
+<style scoped>
+.locale-option,.locale-trigger{align-items:center;display:flex;gap:.5rem}.locale-flag{font-size:1.25em;line-height:1}
+</style>

package/dist/runtime/components/LocaleSwitcher.vue.d.ts

@@ -0,0 +1,13 @@
+export interface LocaleOption {
+    code: string;
+    flag: string;
+    label: string;
+}
+interface Props {
+    locales?: LocaleOption[];
+}
+declare const __VLS_export: import("vue").DefineComponent<Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<Props> & Readonly<{}>, {
+    locales: LocaleOption[];
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

package/dist/runtime/components/Selector.vue

@@ -2,12 +2,14 @@
 import { computed, ref, toRef, toRefs } from "vue";
 import { useControlTokens } from "../composables/useControlSize";
 import { useListKeyboard } from "../composables/useListKeyboard";
+import { useI18n } from "vue-i18n";
+const { t } = useI18n();
 const props = defineProps({
   options: { type: Array, required: true },
   multiple: { type: Boolean, required: false },
   field: { type: String, required: false, default: "id" },
   optionName: { type: String, required: false },
-  placeholder: { type: String, required: false, default: "Select an option" },
+  placeholder: { type: String, required: false },
   appearance: { type: String, required: false },
   error: { type: [String, null], required: false },
   group: { type: Boolean, required: false },
@@ -17,7 +19,10 @@ const props = defineProps({
   size: { type: String, required: false },
   fill: { type: Boolean, required: false }
 });
-const { field, optionName, placeholder } = toRefs(props);
+const { field, optionName } = toRefs(props);
+const resolvedPlaceholder = computed(
+  () => props.placeholder ?? t("selector.placeholder")
+);
 const modelValue = defineModel({ type: null, ...{
   required: true
 } });
@@ -60,7 +65,7 @@ function isOptionSelected(option) {
   }
 }
 function getOptionLabel(option) {
-  if (!option) return placeholder.value;
+  if (!option) return resolvedPlaceholder.value;
   if (typeof option === "string") return option;
   if (optionName.value) return String(option[label.value]);
   return JSON.stringify(option);
@@ -134,7 +139,11 @@ const {
                     {{ getOptionLabel(modelValue) }}
                   </template>
                   <template v-else-if="Array.isArray(modelValue)">
-                    <span> {{ modelValue.length }} selected </span>
+                    <span>
+                      {{
+                        t("selector.selected", { count: modelValue.length })
+                      }}
+                    </span>
                   </template>
                 </slot>
               </div>
@@ -175,7 +184,7 @@ const {
             </orio-list-item>
           </ul>
           <slot v-else name="no-options">
-            <orio-empty-state title="No options found" size="small" />
+            <orio-empty-state :title="t('selector.noOptions')" size="small" />
           </slot>
           <slot name="options-addon" />
         </div>

package/dist/runtime/components/Tooltip.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, nextTick } from "vue";
+import { ref, computed, nextTick, toRefs, watch } from "vue";
 import { useEventListener } from "@vueuse/core";
 const props = defineProps({
   text: { type: String, required: false, default: void 0 },
@@ -8,6 +8,10 @@ const props = defineProps({
   disabled: { type: Boolean, required: false, default: false },
   offset: { type: Number, required: false, default: 8 }
 });
+const { disabled } = toRefs(props);
+watch(disabled, () => {
+  if (disabled.value) hideTooltip();
+});
 const isVisible = ref(false);
 const trigger = ref(null);
 const tooltip = ref(null);
@@ -42,7 +46,7 @@ function calculatePosition() {
   position.value = { top, left };
 }
 function showTooltip() {
-  if (props.disabled) return;
+  if (disabled.value) return;
   if (props.delay > 0) {
     showTimeout = setTimeout(() => {
       isVisible.value = true;
@@ -75,7 +79,9 @@ const tooltipStyle = computed(() => ({
   top: `${position.value.top}px`,
   left: `${position.value.left}px`
 }));
-const arrowClass = computed(() => `arrow-${props.placement}`);
+const arrowClass = computed(
+  () => `orio-tooltip-arrow orio-tooltip-arrow-${props.placement}`
+);
 </script>
 
 <template>
@@ -91,22 +97,26 @@ const arrowClass = computed(() => `arrow-${props.placement}`);
     <Teleport v-if="isVisible" to="body">
       <div
         ref="tooltip"
-        class="tooltip"
+        class="orio-tooltip"
         :style="tooltipStyle"
         role="tooltip"
         :aria-hidden="!isVisible"
       >
-        <div class="content">
+        <div class="orio-tooltip-content">
           <slot name="content">
             {{ text }}
           </slot>
         </div>
-        <div :class="['arrow', arrowClass]" />
+        <div :class="arrowClass" />
       </div>
     </Teleport>
   </div>
 </template>
 
 <style scoped>
-.trigger{align-items:center;display:inline-flex;justify-content:center}.tooltip{pointer-events:none;position:absolute;z-index:9999}.content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:var(--font-md);padding:.5rem .75rem;white-space:nowrap}.arrow{border-style:solid;height:0;position:absolute;width:0}.arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px}.arrow-bottom,.arrow-top{left:50%;transform:translateX(-50%)}.arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;top:-4px}.arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px}.arrow-left,.arrow-right{top:50%;transform:translateY(-50%)}.arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px}
+.trigger{align-items:center;display:inline-flex;justify-content:center}
+</style>
+
+<style>
+.orio-tooltip{pointer-events:none;position:absolute;z-index:9999}.orio-tooltip-content{background-color:rgba(0,0,0,.9);border-radius:var(--border-radius-sm,4px);box-shadow:0 2px 8px rgba(0,0,0,.15);color:#fff;font-size:var(--font-md);padding:.5rem .75rem;white-space:nowrap}.orio-tooltip-arrow{border-style:solid;height:0;position:absolute;width:0}.orio-tooltip-arrow-top{border-color:rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 0;bottom:-4px;left:50%;transform:translateX(-50%)}.orio-tooltip-arrow-bottom{border-color:transparent transparent rgba(0,0,0,.9);border-width:0 4px 4px;left:50%;top:-4px;transform:translateX(-50%)}.orio-tooltip-arrow-left{border-color:transparent transparent transparent rgba(0,0,0,.9);border-width:4px 0 4px 4px;right:-4px;top:50%;transform:translateY(-50%)}.orio-tooltip-arrow-right{border-color:transparent rgba(0,0,0,.9) transparent transparent;border-width:4px 4px 4px 0;left:-4px;top:50%;transform:translateY(-50%)}
 </style>