@livestorm/ui-vue 2.0.4 → 2.0.5

package/README.md

@@ -117,7 +117,7 @@ import { setTranslator } from '@livestorm/ui-vue/integrations'
 setTranslator((key) => myI18n.t(`ui-vue.${key}`))
 ```
 
-On an SSR server rendering a locale per request, provide the translator on the app instance instead — `setTranslator` is process-wide state shared by concurrent requests:
+On an SSR server, provide the translator on the app instance instead — `setTranslator` is process-wide state shared by concurrent requests, and without a translator the server falls back to English (it cannot read `<html lang>`). For a non-English SSR app this is the difference between hydrating correct labels and keeping English aria-labels:
 
 ```ts
 import { UI_VUE_TRANSLATOR } from '@livestorm/ui-vue/integrations'
@@ -159,7 +159,7 @@ registerComponents(app, 'Ls')    // <LsButton>, <LsTextField>, ...
 | `@livestorm/ui-vue/style` | Base stylesheet (import once) |
 | `@livestorm/ui-vue/fonts` | Optional: loads Inter from Google Fonts (skip it if you self-host) |
 | `@livestorm/ui-vue/components-vite` | `registerComponents` for global registration |
-| `@livestorm/ui-vue/integrations` | Toast helpers (`openToast`, ...) |
+| `@livestorm/ui-vue/integrations` | Toast helpers (`openToast`, ... — call client-side only: toast state is per-process on a server) and translation wiring (`setTranslator`, `UI_VUE_TRANSLATOR`) |
 | `@livestorm/ui-vue/layouts` | Layout components such as the toast container |
 | `@livestorm/ui-vue/utils` | Helpers (`useCopyToClipboard`, `useRouteQueryModel`, ...) — the one entry that requires `vue-router` |
 | `@livestorm/ui-vue/responsive` | Optional responsive plugin |

package/dist/{UiTimelineItem.vue_vue_type_style_index_0_lang-BtG5oABt.mjs → UiTimelineItem.vue_vue_type_style_index_0_lang-DJFdCn2R.mjs}

@@ -1,14 +1,14 @@
-import { defineComponent as $, provide as le, computed as r, createElementBlock as s, openBlock as o, normalizeStyle as K, normalizeClass as f, renderSlot as x, inject as Q, createBlock as z, unref as d, withCtx as g, createVNode as k, resolveDynamicComponent as ve, mergeProps as j, createCommentVNode as v, createTextVNode as q, toDisplayString as U, createElementVNode as c, ref as P, watch as Z, useSlots as Y, Fragment as H, renderList as G, toValue as pe, getCurrentInstance as qe, resolveComponent as ie, mergeModels as Le, useModel as ft, onMounted as se, nextTick as ue, withDirectives as vt, vShow as gt, onBeforeUnmount as ce, normalizeProps as W, guardReactiveProps as J, withModifiers as Ke, useAttrs as ht, createSlots as ge, useId as mt, toRef as xe } from "vue";
+import { defineComponent as $, provide as le, computed as r, createElementBlock as s, openBlock as o, normalizeStyle as K, normalizeClass as f, renderSlot as x, inject as Q, createBlock as z, unref as d, withCtx as g, createVNode as k, resolveDynamicComponent as ve, mergeProps as j, createCommentVNode as v, createTextVNode as q, toDisplayString as U, createElementVNode as c, ref as V, watch as Z, useSlots as Y, Fragment as H, renderList as G, toValue as pe, getCurrentInstance as qe, resolveComponent as ie, mergeModels as Le, useModel as ft, onMounted as se, nextTick as ue, withDirectives as vt, vShow as gt, onBeforeUnmount as ce, normalizeProps as W, guardReactiveProps as J, withModifiers as Ke, useAttrs as ht, createSlots as ge, useId as mt, toRef as xe } from "vue";
 import { TooltipProvider as bt, TooltipRoot as pt, TooltipTrigger as yt, TooltipPortal as xt, TooltipContent as wt, TooltipArrow as Ct, ToggleGroupRoot as kt, ToggleGroupItem as $t, useForwardPropsEmits as ae, PopoverRoot as zt, useForwardProps as ze, PopoverTrigger as St, PopoverPortal as Bt, PopoverContent as Mt, SelectRoot as _t, SelectTrigger as Lt, SelectValue as It, SelectIcon as Tt, SelectPortal as Ot, SelectContent as Ut, SelectScrollUpButton as At, SelectViewport as Vt, SelectScrollDownButton as Pt, SelectItem as Et, SelectItemText as Dt, SelectSeparator as Rt, useId as he, convertToHsb as Ie, convertToHsl as jt, convertToRgb as Ht, isValidColor as ye, colorToHex as fe, ColorAreaRoot as Ft, ColorAreaArea as Nt, ColorAreaThumb as qt, ColorSliderRoot as Te, ColorSliderTrack as Oe, ColorSliderThumb as Ue, ColorFieldRoot as Ae, ColorSwatch as Kt, Label as Se, ColorFieldInput as Ve, ColorSwatchPickerRoot as Gt, ColorSwatchPickerItem as Zt, ColorSwatchPickerItemSwatch as Wt, normalizeColor as Pe, colorToString as Ee, DialogRoot as Yt, DialogClose as Xt, DialogPortal as Qt, DialogOverlay as Jt, DialogContent as ea, VisuallyHidden as De, DialogTitle as Re, DialogDescription as je, DialogTrigger as ta, DropdownMenuRoot as aa, DropdownMenuPortal as Ge, DropdownMenuContent as la, DropdownMenuGroup as oa, DropdownMenuLabel as Ze, DropdownMenuItem as na, DropdownMenuSeparator as sa, DropdownMenuSub as ra, DropdownMenuSubContent as ia, DropdownMenuSubTrigger as ua, DropdownMenuTrigger as ca, PopoverAnchor as da, ProgressRoot as fa, ProgressIndicator as va, useForwardExpose as ga, StepperRoot as ha, StepperDescription as ma, StepperIndicator as ba, StepperItem as pa, StepperSeparator as ya, StepperTitle as xa } from "reka-ui";
 import { DotLottieVue as wa } from "@lottiefiles/dotlottie-vue";
 import { useLocalStorage as Ca, useDebounceFn as We, useResizeObserver as Ye, useThrottleFn as ka, useMutationObserver as $a } from "@vueuse/core";
 import { u as Be } from "./i18n-Cktw9hIu.mjs";
 import za from "embla-carousel-vue";
 import Sa from "embla-carousel-autoplay";
-import { _ as de, b as Xe, c as Qe, a as Je, f as Ba } from "./a11y--y7uaY4j.mjs";
+import { _ as de, b as Xe, c as Qe, a as Je, f as Ba } from "./a11y-BhF_nl7L.mjs";
 import { BREAKPOINT_LG as Ma } from "./breakpoints.mjs";
 import { useResponsive as _a } from "./responsive.mjs";
-import { u as La } from "./useThemeAndModes-CUK56j0z.mjs";
+import { u as La } from "./useThemeAndModes-BzYwSOEv.mjs";
 import { RenderSlot as Ia, useSlotsAsComponents as Ta } from "./slot.mjs";
 import "./bus.mjs";
 const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label", "aria-orientation"], Ts = /* @__PURE__ */ $({
@@ -217,7 +217,7 @@ const Me = /* @__PURE__ */ Symbol("ui-action-bar-context"), Oa = ["aria-label",
     const t = e, a = r(() => {
       if (t.variant !== "more" && !(t.src && !l.value) && t.color)
         return { backgroundColor: t.color };
-    }), l = P(!1);
+    }), l = V(!1);
     Z(() => t.src, () => {
       l.value = !1;
     });
@@ -752,7 +752,7 @@ const tt = /* @__PURE__ */ $({
       variant: () => e.variant,
       color: () => e.color,
       disabled: u
-    }), h = I, w = r(() => y.value ? [y.value] : []), V = "group-focus-visible:ring-2 group-focus-visible:ring-inset group-focus-visible:ring-focus-ring";
+    }), h = I, w = r(() => y.value ? [y.value] : []), P = "group-focus-visible:ring-2 group-focus-visible:ring-inset group-focus-visible:ring-focus-ring";
     return Z(() => !e.label && !e.icon && !e.iconRight && !a.value, (L) => {
       L && console.warn("UiButton: You must provide a label or an icon to the button");
     }, { immediate: !0 }), {
@@ -764,7 +764,7 @@ const tt = /* @__PURE__ */ $({
       iconSizeClasses: p,
       buttonClasses: O,
       bgClasses: h,
-      focusRingClasses: V,
+      focusRingClasses: P,
       textClasses: w,
       borderClasses: S,
       overlayClasses: M,
@@ -870,7 +870,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
   }),
   emits: /* @__PURE__ */ Le(["banner-action", "close"], ["update:closed"]),
   setup(e, { emit: t }) {
-    const a = Be(), l = e, n = t, i = ft(e, "closed"), u = l.bannerId && l.rememberClosed ? Ca(`banner-closed-${l.bannerId}`, null) : P(null), m = r(() => {
+    const a = Be(), l = e, n = t, i = ft(e, "closed"), u = l.bannerId && l.rememberClosed ? Ca(`banner-closed-${l.bannerId}`, null) : V(null), m = r(() => {
       if (!l.rememberClosed || u.value === null) return !1;
       if (l.closedExpirySeconds === -1) return !0;
       if (l.closedExpirySeconds <= 0) return !1;
@@ -982,7 +982,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
     function h() {
       n("banner-action");
     }
-    return (w, V) => i.value ? v("", !0) : (o(), s("div", {
+    return (w, P) => i.value ? v("", !0) : (o(), s("div", {
       key: 0,
       class: f(O.value),
       "data-testid": "ui-banner",
@@ -1133,16 +1133,17 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
   setup(e, { emit: t }) {
     const a = e, l = t;
     le(at, r(() => a.size)), le(lt, r(() => a.color));
-    const n = /* @__PURE__ */ new Map(), i = P(null), u = P(a.modelValue ?? a.defaultValue);
+    const n = /* @__PURE__ */ new Map(), i = V(null), u = V(a.modelValue ?? a.defaultValue);
     Z(() => a.modelValue, (L) => {
       u.value = L;
     });
-    const m = P({
+    const m = V({
       transform: "translate(0px, 0px)",
       width: "0px",
       height: "0px"
-    }), b = P(!1);
+    }), b = V(!1);
     function p() {
+      if (typeof HTMLElement > "u") return null;
       const L = i.value?.$el;
       return L instanceof HTMLElement ? L : null;
     }
@@ -1204,7 +1205,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
       md: "rounded-lg",
       lg: "rounded-lg"
     }, M = r(() => I[a.color]), h = r(() => y[a.color]), w = r(() => S[a.size]);
-    function V(L) {
+    function P(L) {
       const A = Array.isArray(L) ? L[0] : L, E = typeof A == "string" ? A : void 0;
       E === void 0 && !a.allowDeselect || (u.value = E, l("update:modelValue", E));
     }
@@ -1218,7 +1219,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
       "roving-focus": !0,
       type: "single",
       class: f(["relative inline-flex w-full items-stretch rounded-lg", [O.value, M.value, { "flex-col h-auto": e.orientation === "vertical" }]]),
-      "onUpdate:modelValue": V
+      "onUpdate:modelValue": P
     }, {
       default: g(() => [
         vt(c("div", {
@@ -1242,8 +1243,9 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
     ariaLabel: { default: void 0 }
   },
   setup(e) {
-    const t = e, a = Q(at, r(() => "md")), l = Q(lt, r(() => "neutral")), n = Q(ot, null), i = P(null);
+    const t = e, a = Q(at, r(() => "md")), l = Q(lt, r(() => "neutral")), n = Q(ot, null), i = V(null);
     function u() {
+      if (typeof HTMLElement > "u") return null;
       const C = i.value?.$el;
       return C instanceof HTMLElement ? C : null;
     }
@@ -1424,7 +1426,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
       watchDrag: n.draggable,
       containScroll: "trimSnaps",
       ...n.options
-    })), [m, b] = za(u, i), p = P(0), C = P([]), B = P(!1), T = P(!0);
+    })), [m, b] = za(u, i), p = V(0), C = V([]), B = V(!1), T = V(!0);
     function O() {
       b.value && (p.value = b.value.selectedScrollSnap(), B.value = b.value.canScrollPrev(), T.value = b.value.canScrollNext(), l("select", p.value));
     }
@@ -1481,7 +1483,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
           onClick: y
         }, null, 8, ["disabled"])) : v("", !0),
         e.showDots && C.value.length > 1 ? (o(), s("div", yl, [
-          (o(!0), s(H, null, G(C.value, (V, L) => (o(), s("button", {
+          (o(!0), s(H, null, G(C.value, (P, L) => (o(), s("button", {
             key: L,
             "data-testid": `carousel-dot-${L}`,
             "aria-label": `Slide ${L + 1}`,
@@ -1960,11 +1962,11 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
       if (!(!D || !ye(D)))
         return D.trim().startsWith("#") ? "hex" : Pe(D).space;
     }
-    const y = I(a.modelValue), S = P(
+    const y = I(a.modelValue), S = V(
       y && a.modes.includes(y) ? y : a.modes[0]
     ), M = r(
       () => a.outputFormat === "auto" ? S.value : a.outputFormat
-    ), h = r(() => a.modes.length > 1), w = r(() => a.variant !== "swatch-only"), V = r(
+    ), h = r(() => a.modes.length > 1), w = r(() => a.variant !== "swatch-only"), P = r(
       () => S.value === "hex" ? [] : O[S.value]
     ), L = r(() => {
       switch (S.value) {
@@ -1977,7 +1979,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
         default:
           return A.value;
       }
-    }), A = P(
+    }), A = V(
       B(
         a.color ?? (a.modelValue && ye(a.modelValue) ? a.modelValue : Pl)
       )
@@ -2152,7 +2154,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
             }, null, 8, ["id"])
           ]),
           _: 1
-        }, 8, ["model-value", "disabled", "class"])) : (o(!0), s(H, { key: 2 }, G(V.value, (R) => (o(), z(d(Ae), {
+        }, 8, ["model-value", "disabled", "class"])) : (o(!0), s(H, { key: 2 }, G(P.value, (R) => (o(), z(d(Ae), {
           key: R.channel,
           "model-value": L.value,
           disabled: e.disabled,
@@ -2326,7 +2328,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
   },
   emits: ["update:modelValue", "clear", "focus", "blur", "keydown", "keyup"],
   setup(e, { expose: t, emit: a }) {
-    const l = e, n = a, i = Y(), u = P(null), m = P(!1), b = r(() => !!i.icon), p = r(() => !!i["right-action"]), C = r(() => l.clearable && !!l.modelValue && !l.disabled && !l.loading), B = r(() => {
+    const l = e, n = a, i = Y(), u = V(null), m = V(!1), b = r(() => !!i.icon), p = r(() => !!i["right-action"]), C = r(() => l.clearable && !!l.modelValue && !l.disabled && !l.loading), B = r(() => {
       const h = ["ui-text-field-field"];
       return l.size === "sm" && h.push("h-8 text-content-text-md-regular"), l.size === "md" && h.push("h-10 text-content-text-md-regular"), l.size === "lg" && h.push("h-12 text-content-text-md-regular"), l.size === "xl" && h.push("h-16 text-content-text-md-regular"), l.error ? h.push("ui-text-field-field--error") : h.push("ui-text-field-field--default"), l.disabled && h.push("ui-text-field-field--disabled"), m.value && !l.disabled && h.push("ui-text-field-field--focused"), h;
     });
@@ -2355,9 +2357,9 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
       insertAtCursor: (h) => {
         const w = u.value;
         if (!w) return;
-        const V = w.selectionStart ?? w.value.length, L = w.selectionEnd ?? V, A = w.value.slice(0, V), E = w.value.slice(L), X = A + h + E;
+        const P = w.selectionStart ?? w.value.length, L = w.selectionEnd ?? P, A = w.value.slice(0, P), E = w.value.slice(L), X = A + h + E;
         n("update:modelValue", X), ue(() => {
-          const re = V + h.length;
+          const re = P + h.length;
           w.setSelectionRange(re, re), w.focus();
         });
       }
@@ -2370,7 +2372,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
       "helper-message": e.helperMessage,
       "error-message": e.errorMessage
     }, {
-      default: g(({ fieldId: V }) => [
+      default: g(({ fieldId: P }) => [
         c("div", {
           class: f(B.value)
         }, [
@@ -2386,7 +2388,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
             x(h.$slots, "icon", {}, void 0, !0)
           ], 2)) : v("", !0),
           c("input", {
-            id: e.id || V,
+            id: e.id || P,
             ref_key: "textFieldRef",
             ref: u,
             type: e.type,
@@ -2397,7 +2399,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
             autocomplete: e.autocomplete,
             "aria-label": e.ariaLabel,
             "aria-invalid": e.error || void 0,
-            "aria-describedby": e.ariaDescribedby || (e.helperMessage || e.errorMessage ? `${V}-message` : void 0),
+            "aria-describedby": e.ariaDescribedby || (e.helperMessage || e.errorMessage ? `${P}-message` : void 0),
             class: "ui-text-field-element text-text-neutral-base placeholder:text-text-neutral-tertiary",
             onInput: T,
             onFocus: I,
@@ -2446,7 +2448,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
   },
   emits: ["update:modelValue", "change"],
   setup(e, { emit: t }) {
-    const a = e, l = t, n = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, i = P(!1), u = P(a.modelValue ?? "");
+    const a = e, l = t, n = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/, i = V(!1), u = V(a.modelValue ?? "");
     Z(() => a.modelValue, (y) => {
       p(u.value) !== y && (u.value = y ?? "");
     });
@@ -2609,7 +2611,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
       "3xl": "max-w-3xl",
       "5xl": "max-w-5xl",
       "7xl": "max-w-7xl"
-    }, n = r(() => l[a.size] ?? ""), u = ae(a, t), m = P(null), b = P(!1);
+    }, n = r(() => l[a.size] ?? ""), u = ae(a, t), m = V(null), b = V(!1);
     function p() {
       m.value && (b.value = m.value.scrollHeight > m.value.clientHeight);
     }
@@ -2920,11 +2922,11 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
   },
   emits: ["update:modelValue", "change", "focus", "blur"],
   setup(e, { expose: t, emit: a }) {
-    const l = e, n = a, i = P(null);
+    const l = e, n = a, i = V(null);
     function u() {
       l.disabled || i.value?.click();
     }
-    const m = P(!1), b = he(), p = r(() => l.checked !== void 0 ? l.checked : Array.isArray(l.modelValue) ? l.value !== void 0 && l.modelValue.includes(l.value) : typeof l.modelValue == "boolean" ? l.modelValue : l.value !== void 0 && l.modelValue !== void 0 ? l.modelValue === l.value : !1), C = r(() => {
+    const m = V(!1), b = he(), p = r(() => l.checked !== void 0 ? l.checked : Array.isArray(l.modelValue) ? l.value !== void 0 && l.modelValue.includes(l.value) : typeof l.modelValue == "boolean" ? l.modelValue : l.value !== void 0 && l.modelValue !== void 0 ? l.modelValue === l.value : !1), C = r(() => {
       const h = [
         "appearance-none",
         "relative shrink-0 grid place-content-center",
@@ -2957,16 +2959,16 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
     });
     function y(h) {
       const w = h.target;
-      let V;
+      let P;
       if (Array.isArray(l.modelValue)) {
-        if (V = [...l.modelValue], w.checked)
-          l.value !== void 0 && !V.includes(l.value) && V.push(l.value);
+        if (P = [...l.modelValue], w.checked)
+          l.value !== void 0 && !P.includes(l.value) && P.push(l.value);
         else if (l.value !== void 0) {
-          const L = V.indexOf(l.value);
-          L > -1 && V.splice(L, 1);
+          const L = P.indexOf(l.value);
+          L > -1 && P.splice(L, 1);
         }
-      } else l.value !== void 0 ? V = w.checked ? l.value : !1 : V = w.checked;
-      n("update:modelValue", V), n("change", h);
+      } else l.value !== void 0 ? P = w.checked ? l.value : !1 : P = w.checked;
+      n("update:modelValue", P), n("change", h);
     }
     function S(h) {
       m.value = !0, n("focus", h);
@@ -3239,7 +3241,7 @@ const oe = /* @__PURE__ */ N(tl, [["render", nl]]), Es = /* @__PURE__ */ Object.
   },
   emits: ["update:modelValue", "focus", "blur", "keydown", "keyup"],
   setup(e, { expose: t, emit: a }) {
-    const l = e, n = a, i = P(null), u = P(!1), m = r(() => {
+    const l = e, n = a, i = V(null), u = V(!1), m = r(() => {
       const y = { sm: 1.25, md: 1.5, lg: 1.5, xl: 1.75 }, S = { sm: 0.25, md: 0.5, lg: 0.5, xl: 0.5 };
       return `${l.rows * y[l.size] + S[l.size] * 2}rem`;
     }), b = r(() => {
@@ -3819,15 +3821,15 @@ const Io = /* @__PURE__ */ N(_o, [["render", Lo], ["__scopeId", "data-v-568a716f
     }, 16));
   }
 }), ee = {
-  isMobileMenuOpen: P(!1),
+  isMobileMenuOpen: V(!1),
   // Number of mounted components (e.g. UiPageHeader) that render their own
   // open-menu trigger. UiShell uses this to decide whether it must provide a
   // fallback hamburger, so a headerless page still has a way to open the menu.
-  triggerCount: P(0),
+  triggerCount: V(0),
   // Label shown next to UiShell's fallback menu topbar. Pages set this (via
   // setMenuLabel) to give the headerless mobile topbar a meaningful title
   // (e.g. "Home"); null falls back to UiShell's openMenuLabel prop default.
-  menuLabel: P(null)
+  menuLabel: V(null)
 };
 function be() {
   const e = () => {
@@ -3892,14 +3894,14 @@ const Ao = {
     const C = qe();
     if (!C)
       throw new Error("No current instance found");
-    const B = r(() => C.appContext.config.globalProperties.$responsive ?? _a()), T = r(() => B.value.width >= Ma), O = P(), I = P(), { addElementToWatch: y } = La(), S = localStorage.getItem("ls-internal-theming") === "true";
+    const B = r(() => C.appContext.config.globalProperties.$responsive ?? _a()), T = r(() => B.value.width >= Ma), O = V(), I = V(), { addElementToWatch: y } = La(), S = V(!1);
     return se(() => {
-      y(
+      S.value = localStorage.getItem("ls-internal-theming") === "true", y(
         "content",
         {
           selector: '[data-name="ui-page-content"]',
           element: I.value,
-          ...S ? {} : { modeOverride: "light" }
+          ...S.value ? {} : { modeOverride: "light" }
         }
       );
     }), (M, h) => (o(), s("main", {
@@ -3924,7 +3926,7 @@ const Ao = {
           ref: I,
           "data-name": "pageContent",
           class: "page-content flex-1 overflow-y-auto w-full grid has-[>:nth-child(2)]:lg:grid-cols-[1fr_2fr] lg:gap-x-8 min-h-0",
-          "data-colors-semantic": S ? void 0 : "light"
+          "data-colors-semantic": S.value ? void 0 : "light"
         }, [
           u.value && T.value ? (o(), s("aside", Ro, [
             x(M.$slots, "leftSlot")
@@ -4366,7 +4368,7 @@ const Ao = {
   default: $e
 }, Symbol.toStringTag, { value: "Module" })), zn = "(min-width: 768px) and (max-height: 599.98px) and (hover: hover) and (pointer: fine)";
 function Sn() {
-  const e = P(!1);
+  const e = V(!1);
   let t = null;
   const a = (l) => {
     e.value = l.matches;
@@ -4481,7 +4483,7 @@ const te = /* @__PURE__ */ $({
     organizationId: { default: void 0 }
   },
   setup(e) {
-    const { close: t, isOpen: a } = be(), l = Be(), n = P(!1), i = P(!1), u = P(null), m = P(!1);
+    const { close: t, isOpen: a } = be(), l = Be(), n = V(!1), i = V(!1), u = V(null), m = V(!1);
     let b = null;
     const p = (E) => {
       m.value = E.matches;
@@ -4489,7 +4491,7 @@ const te = /* @__PURE__ */ $({
     se(() => {
       typeof window > "u" || (b = window.matchMedia("(max-height: 768px) and (hover: hover) and (pointer: fine)"), m.value = b.matches, b.addEventListener("change", p));
     });
-    const C = P(!1);
+    const C = V(!1);
     let B = null;
     const T = (E) => {
       C.value = E.matches;
@@ -4515,7 +4517,7 @@ const te = /* @__PURE__ */ $({
       i.value = !1;
     }, w = (E) => {
       h(), E.onClick?.();
-    }, V = (E) => {
+    }, P = (E) => {
       h(), setTimeout(() => E.onClick(), 0);
     }, L = r(
       () => !!I.collapsedMenuItems && I.collapsedMenuItems.length > 0 || !!O.collapsedMenuExtra
@@ -4684,7 +4686,7 @@ const te = /* @__PURE__ */ $({
                               icon: _.icon,
                               "is-active": !1,
                               "show-label-tooltip": "",
-                              onClick: (ne) => V(_)
+                              onClick: (ne) => P(_)
                             }, null, 8, ["label", "icon", "onClick"])
                           ]))), 128))
                         ], 64)) : v("", !0)
@@ -5084,10 +5086,10 @@ const rs = /* @__PURE__ */ N(ns, [["render", ss]]), Ar = /* @__PURE__ */ Object.
       container: "gap-4",
       tab: a.size === "sm" ? "pb-4" : "pb-6",
       text: a.size === "sm" ? "text-action-button-sm" : "text-action-button-md"
-    })), m = P({
+    })), m = V({
       transform: "translateX(0px)",
       width: "0px"
-    }), b = P(null), p = P(/* @__PURE__ */ new Map()), C = r(() => a.tabs.filter((M) => !M.disabled));
+    }), b = V(null), p = V(/* @__PURE__ */ new Map()), C = r(() => a.tabs.filter((M) => !M.disabled));
     function B(M) {
       a.tabs.find((w) => w.value === M)?.disabled || l("update:modelValue", M);
     }
@@ -5098,16 +5100,16 @@ const rs = /* @__PURE__ */ N(ns, [["render", ss]]), Ar = /* @__PURE__ */ Object.
       M && M instanceof HTMLElement ? p.value.set(h, M) : p.value.delete(h);
     }
     function I(M, h) {
-      const w = C.value.map((E) => E.value), V = w.indexOf(h);
-      let L = V;
+      const w = C.value.map((E) => E.value), P = w.indexOf(h);
+      let L = P;
       switch (M.key) {
         case "ArrowLeft":
         case "ArrowUp":
-          M.preventDefault(), L = V > 0 ? V - 1 : w.length - 1;
+          M.preventDefault(), L = P > 0 ? P - 1 : w.length - 1;
           break;
         case "ArrowRight":
         case "ArrowDown":
-          M.preventDefault(), L = V < w.length - 1 ? V + 1 : 0;
+          M.preventDefault(), L = P < w.length - 1 ? P + 1 : 0;
           break;
         case "Home":
           M.preventDefault(), L = 0;
@@ -5150,7 +5152,7 @@ const rs = /* @__PURE__ */ N(ns, [["render", ss]]), Ar = /* @__PURE__ */ Object.
         (o(!0), s(H, null, G(e.tabs, (w) => (o(), s("button", {
           key: w.value,
           ref_for: !0,
-          ref: (V) => O(V, w.value),
+          ref: (P) => O(P, w.value),
           type: "button",
           role: "tab",
           "aria-selected": T(w.value),
@@ -5166,8 +5168,8 @@ const rs = /* @__PURE__ */ N(ns, [["render", ss]]), Ar = /* @__PURE__ */ Object.
             }
           ]]),
           disabled: w.disabled,
-          onClick: (V) => B(w.value),
-          onKeydown: (V) => I(V, w.value)
+          onClick: (P) => B(w.value),
+          onKeydown: (P) => I(P, w.value)
         }, [
           w.icon ? (o(), s("span", {
             key: 0,

package/dist/a11y-BhF_nl7L.mjs

@@ -0,0 +1,159 @@
+import { defineComponent as m, createBlock as i, openBlock as r, unref as a, normalizeProps as f, guardReactiveProps as g, withCtx as n, renderSlot as l, computed as h, createVNode as c, mergeProps as w, createCommentVNode as b, getCurrentInstance as x, createElementBlock as C, Fragment as T, createTextVNode as $, toDisplayString as v } from "vue";
+import { TooltipProvider as k, useForwardProps as P, TooltipTrigger as D, useForwardPropsEmits as B, TooltipPortal as S, TooltipContent as F, TooltipArrow as W, TooltipRoot as y } from "reka-ui";
+import { reactiveOmit as N } from "@vueuse/core";
+const O = /* @__PURE__ */ m({
+  __name: "UiTooltipProvider",
+  props: {
+    delayDuration: { default: 700 },
+    skipDelayDuration: { default: 300 },
+    disableHoverableContent: { type: Boolean },
+    disableClosingTrigger: { type: Boolean },
+    disabled: { type: Boolean },
+    ignoreNonKeyboardFocus: { type: Boolean },
+    content: {}
+  },
+  setup(e) {
+    return (s, t) => (r(), i(a(k), f(g(s.$props)), {
+      default: n(() => [
+        l(s.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), z = /* @__PURE__ */ m({
+  __name: "UiTooltipTrigger",
+  props: {
+    reference: {},
+    asChild: { type: Boolean },
+    as: {}
+  },
+  setup(e) {
+    const t = P(e);
+    return (d, p) => (r(), i(a(D), f(g({ ...a(t), ...d.$attrs })), {
+      default: n(() => [
+        l(d.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+}), A = /* @__PURE__ */ m({
+  __name: "UiTooltipContent",
+  props: {
+    colorsSemantic: { default: "light" },
+    maxWidth: { default: "base" },
+    showArrow: { type: Boolean, default: !0 },
+    arrowWidth: { default: 10 },
+    arrowHeight: { default: 5 },
+    forceMount: { type: Boolean },
+    ariaLabel: {},
+    asChild: { type: Boolean },
+    as: {},
+    side: {},
+    sideOffset: { default: 12 },
+    align: {},
+    alignOffset: {},
+    avoidCollisions: { type: Boolean },
+    collisionBoundary: {},
+    collisionPadding: {},
+    arrowPadding: {},
+    sticky: {},
+    hideWhenDetached: { type: Boolean },
+    positionStrategy: {},
+    updatePositionStrategy: {}
+  },
+  emits: ["escapeKeyDown", "pointerDownOutside"],
+  setup(e, { emit: s }) {
+    const t = e, p = B(t, s), u = h(() => ({
+      xs: "max-w-[150px]",
+      sm: "max-w-[240px]",
+      md: "max-w-md",
+      base: "max-w-xs",
+      lg: "max-w-lg",
+      xl: "max-w-xl"
+    })[t.maxWidth]);
+    return (o, _) => (r(), i(a(S), null, {
+      default: n(() => [
+        c(a(F), w({ ...a(p), ...o.$attrs }, {
+          "data-colors-semantic": t.colorsSemantic,
+          class: [
+            "ui-tooltip-content py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-md text-center z-50 shadow-shadows-drop-shadow-lg",
+            "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95",
+            u.value
+          ]
+        }), {
+          default: n(() => [
+            l(o.$slots, "default"),
+            t.showArrow ? (r(), i(a(W), {
+              key: 0,
+              width: t.arrowWidth,
+              height: t.arrowHeight,
+              class: "fill-surface-neutral-invert-bg-alpha"
+            }, null, 8, ["width", "height"])) : b("", !0)
+          ]),
+          _: 3
+        }, 16, ["data-colors-semantic", "class"])
+      ]),
+      _: 3
+    }));
+  }
+}), K = /* @__PURE__ */ m({
+  inheritAttrs: !1,
+  __name: "UiTooltip",
+  props: {
+    content: {},
+    side: {},
+    defaultOpen: { type: Boolean },
+    open: { type: Boolean },
+    delayDuration: {},
+    disableHoverableContent: { type: Boolean },
+    disableClosingTrigger: { type: Boolean },
+    disabled: { type: Boolean },
+    ignoreNonKeyboardFocus: { type: Boolean }
+  },
+  emits: ["update:open"],
+  setup(e, { emit: s }) {
+    const t = e, d = s, p = h(() => {
+      const o = x()?.vnode.props;
+      return !!o && "content" in o;
+    }), u = B(N(t, "content", "side"), d);
+    return (o, _) => p.value ? (r(), C(T, { key: 0 }, [
+      e.content ? (r(), i(O, { key: 0 }, {
+        default: n(() => [
+          c(a(y), f(g({ ...a(u), ...o.$attrs })), {
+            default: n(() => [
+              c(z, { "as-child": "" }, {
+                default: n(() => [
+                  l(o.$slots, "default")
+                ]),
+                _: 3
+              }),
+              c(A, { side: e.side }, {
+                default: n(() => [
+                  $(v(e.content), 1)
+                ]),
+                _: 1
+              }, 8, ["side"])
+            ]),
+            _: 3
+          }, 16)
+        ]),
+        _: 3
+      })) : l(o.$slots, "default", { key: 1 })
+    ], 64)) : (r(), i(a(y), f(w({ key: 1 }, { ...a(u), ...o.$attrs })), {
+      default: n(() => [
+        l(o.$slots, "default")
+      ]),
+      _: 3
+    }, 16));
+  }
+});
+function L(e) {
+  e.preventDefault(), (e.target.closest('[role="menu"]') || e.target).querySelector("a")?.focus();
+}
+export {
+  K as _,
+  A as a,
+  O as b,
+  z as c,
+  L as f
+};

package/dist/components.mjs

@@ -1,5 +1,5 @@
-import { _ as xe, a as he, b as ke, c as Ge, d as He, e as Re, f as Ee, I as We, g as Ne, h as qe, i as Ke, j as Qe, k as Ve, l as Xe, X as Ye, $ as Ze, Z as Je, t as eo, x as oo, u as to, v as no, w as _o, n as io, z as ro, m as co, o as lo, p as so, r as ao, s as uo, y as po, A as mo, D as vo, F as bo, G as Uo, K as go, L as fo, M as So, N as To, O as yo, P as jo, Q as Oo, R as Mo, S as Po, T as zo, V as $o, W as Bo, Y as Do, a2 as Co, a5 as Io, a4 as Lo, a7 as Ao, a8 as wo, aa as Fo, ab as xo, ae as ho, ag as ko, ah as Go, ai as Ho, aj as Ro, ak as Eo, an as Wo, ao as No, ap as r, aq as c, ar as l, as as s, at as a, au as u, av as p, aw as m, ax as v, ay as b, az as U, aA as g, aB as d, aC as f, aD as S, aE as T, aF as y } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-BtG5oABt.mjs";
-import { b as qo, c as Ko, a as Qo, _ as Vo } from "./a11y--y7uaY4j.mjs";
+import { _ as xe, a as he, b as ke, c as Ge, d as He, e as Re, f as Ee, I as We, g as Ne, h as qe, i as Ke, j as Qe, k as Ve, l as Xe, X as Ye, $ as Ze, Z as Je, t as eo, x as oo, u as to, v as no, w as _o, n as io, z as ro, m as co, o as lo, p as so, r as ao, s as uo, y as po, A as mo, D as vo, F as bo, G as Uo, K as go, L as fo, M as So, N as To, O as yo, P as jo, Q as Oo, R as Mo, S as Po, T as zo, V as $o, W as Bo, Y as Do, a2 as Co, a5 as Io, a4 as Lo, a7 as Ao, a8 as wo, aa as Fo, ab as xo, ae as ho, ag as ko, ah as Go, ai as Ho, aj as Ro, ak as Eo, an as Wo, ao as No, ap as r, aq as c, ar as l, as as s, at as a, au as u, av as p, aw as m, ax as v, ay as b, az as U, aA as g, aB as d, aC as f, aD as S, aE as T, aF as y } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-DJFdCn2R.mjs";
+import { b as qo, c as Ko, a as Qo, _ as Vo } from "./a11y-BhF_nl7L.mjs";
 import { RenderSlot as j } from "./slot.mjs";
 const O = /* @__PURE__ */ Object.freeze(/* @__PURE__ */ Object.defineProperty({
   __proto__: null,

package/dist/index.mjs

@@ -1,5 +1,5 @@
-import { _ as e, a as s, b as o, c as U, d as r, e as t, f as n, g as p, h as l, U as u, i as d, j as g, k as T, l as S, m, n as b, o as C, p as M, q as I, r as c, s as B, t as D, u as P, v as L, w as v, x as A, y as w, z as F, A as x, B as h, C as H, D as f, E as k, F as G, G as y, H as R, I as j, J as z, K as E, L as W, M as _, N as q, O as J, P as K, Q as N, R as O, S as Q, T as V, V as X, W as Y, X as Z, Y as $, Z as aa, $ as ia, a0 as ea, a1 as sa, a2 as oa, a3 as Ua, a4 as ra, a5 as ta, a6 as na, a7 as pa, a8 as la, a9 as ua, aa as da, ab as ga, ac as Ta, ad as Sa, ae as ma, af as ba, ag as Ca, ah as Ma, ai as Ia, aj as ca, ak as Ba, al as Da, am as Pa, an as La, ao as va } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-BtG5oABt.mjs";
-import { _ as wa, a as Fa, b as xa, c as ha } from "./a11y--y7uaY4j.mjs";
+import { _ as e, a as s, b as o, c as U, d as r, e as t, f as n, g as p, h as l, U as u, i as d, j as g, k as T, l as S, m, n as b, o as C, p as M, q as I, r as c, s as B, t as D, u as P, v as L, w as v, x as A, y as w, z as F, A as x, B as h, C as H, D as f, E as k, F as G, G as y, H as R, I as j, J as z, K as E, L as W, M as _, N as q, O as J, P as K, Q as N, R as O, S as Q, T as V, V as X, W as Y, X as Z, Y as $, Z as aa, $ as ia, a0 as ea, a1 as sa, a2 as oa, a3 as Ua, a4 as ra, a5 as ta, a6 as na, a7 as pa, a8 as la, a9 as ua, aa as da, ab as ga, ac as Ta, ad as Sa, ae as ma, af as ba, ag as Ca, ah as Ma, ai as Ia, aj as ca, ak as Ba, al as Da, am as Pa, an as La, ao as va } from "./UiTimelineItem.vue_vue_type_style_index_0_lang-DJFdCn2R.mjs";
+import { _ as wa, a as Fa, b as xa, c as ha } from "./a11y-BhF_nl7L.mjs";
 export {
   e as UiActionBar,
   s as UiActionBarItem,

package/dist/layouts.mjs

@@ -1,7 +1,7 @@
 import { defineComponent as I, computed as w, ref as C, onMounted as M, resolveComponent as E, createElementBlock as n, openBlock as t, createElementVNode as v, createCommentVNode as a, createBlock as y, resolveDynamicComponent as P, normalizeProps as z, guardReactiveProps as H, Fragment as k, normalizeClass as b, normalizeStyle as N, toDisplayString as f, withKeys as S, withCtx as h, createTextVNode as B, getCurrentInstance as D, createVNode as L, Transition as V, TransitionGroup as A, renderList as R, unref as x, mergeProps as j } from "vue";
 import { useResponsive as K } from "./responsive.mjs";
 import { u as U } from "./toastDSV2-wMh-UMzW.mjs";
-import { u as F } from "./useThemeAndModes-CUK56j0z.mjs";
+import { u as F } from "./useThemeAndModes-BzYwSOEv.mjs";
 const G = ["data-testid"], O = {
   key: 1,
   class: "absolute h-1 bg-grey-100 top-0 left-0 w-full"

package/dist/{useThemeAndModes-CUK56j0z.mjs → useThemeAndModes-BzYwSOEv.mjs}

@@ -1,5 +1,5 @@
 import { useStorage as A } from "@vueuse/core";
-import { ref as E, computed as d, watch as f, getCurrentInstance as b } from "vue";
+import { computed as d, watch as f, ref as E, getCurrentInstance as b } from "vue";
 const T = {
   LIVESTORM: "Livestorm",
   CUSTOMER1: "customer1",

package/dist/utils.mjs

@@ -1,36 +1,36 @@
-import { BREAKPOINT_2XL as F, BREAKPOINT_LG as N, BREAKPOINT_MD as X, BREAKPOINT_SM as D, BREAKPOINT_XL as Q, BREAKPOINT_XL_PLUS as U } from "./breakpoints.mjs";
+import { BREAKPOINT_2XL as Y, BREAKPOINT_LG as Z, BREAKPOINT_MD as ee, BREAKPOINT_SM as te, BREAKPOINT_XL as ne, BREAKPOINT_XL_PLUS as oe } from "./breakpoints.mjs";
 import "./bus.mjs";
-import { computed as h, createApp as _, h as f } from "vue";
-import { useClipboard as g, usePermission as x } from "@vueuse/core";
-import { u as R } from "./i18n-Cktw9hIu.mjs";
-import { b as A, _ as C, c as T, a as P } from "./a11y--y7uaY4j.mjs";
-import { f as j, h as G, d as z, u as H } from "./a11y--y7uaY4j.mjs";
-import { useResponsive as Y } from "./responsive.mjs";
-import { useRoute as $, useRouter as S } from "vue-router";
-import { RenderSlot as ee, getSlotAsComponent as te, unwrapFragments as oe, useSlotsAsComponents as ne } from "./slot.mjs";
-let d = null;
-function k(n, c) {
-  d && d();
-  const t = n.getBoundingClientRect(), s = document.createElement("div");
-  document.body.appendChild(s);
-  const a = _({
-    render: () => f(A, null, () => f(C, { open: !0, delayDuration: 0 }, () => [
-      f(T, { asChild: !0 }, () => f("span", {
+import { computed as l, createApp as g, h as y, ref as T, watch as x, onUnmounted as k, getCurrentInstance as S, onMounted as _, nextTick as w } from "vue";
+import { useClipboard as b, usePermission as A, onKeyDown as C } from "@vueuse/core";
+import { u as E } from "./i18n-Cktw9hIu.mjs";
+import { b as I, _ as R, c as B, a as P } from "./a11y-BhF_nl7L.mjs";
+import { f as ie } from "./a11y-BhF_nl7L.mjs";
+import { useResponsive as ue } from "./responsive.mjs";
+import { useRoute as $, useRouter as q } from "vue-router";
+import { RenderSlot as ae, getSlotAsComponent as de, unwrapFragments as le, useSlotsAsComponents as fe } from "./slot.mjs";
+let v = null;
+function L(s, i) {
+  v && v();
+  const e = s.getBoundingClientRect(), t = document.createElement("div");
+  document.body.appendChild(t);
+  const f = g({
+    render: () => y(I, null, () => y(R, { open: !0, delayDuration: 0 }, () => [
+      y(B, { asChild: !0 }, () => y("span", {
         "aria-hidden": "true",
         style: {
           position: "fixed",
-          left: `${t.left}px`,
-          top: `${t.top}px`,
-          width: `${t.width}px`,
-          height: `${t.height}px`,
+          left: `${e.left}px`,
+          top: `${e.top}px`,
+          width: `${e.width}px`,
+          height: `${e.height}px`,
           pointerEvents: "none"
         }
       })),
-      f(P, { side: "top" }, () => c),
+      y(P, { side: "top" }, () => i),
       // The bubble lives in reka's portal where attrs like role are not
       // forwardable; announce the feedback from a visually hidden live
       // region instead so screen readers hear the copy confirmation.
-      f("span", {
+      y("span", {
         role: "status",
         style: {
           position: "absolute",
@@ -39,108 +39,163 @@ function k(n, c) {
           overflow: "hidden",
           clipPath: "inset(50%)"
         }
-      }, c)
+      }, i)
     ]))
   });
-  a.mount(s);
-  let p = !1;
-  const r = () => {
-    p || (p = !0, d === r && (d = null), a.unmount(), s.remove());
+  f.mount(t);
+  let a = !1;
+  const u = () => {
+    a || (a = !0, v === u && (v = null), f.unmount(), t.remove());
   };
-  return d = r, r;
+  return v = u, u;
 }
-function O() {
-  const { isSupported: n, copy: c } = g(), t = x("clipboard-write"), s = R(), a = h(() => n.value && t.value);
-  async function p(r, i, m = s("general_misc_copied-text")) {
-    if (await c(r), i) {
-      i.classList.add("copied");
-      const e = k(i, m);
+function H() {
+  const { isSupported: s, copy: i } = b(), e = A("clipboard-write"), t = E(), f = l(() => s.value && e.value);
+  async function a(u, d, m = t("general_misc_copied-text")) {
+    if (await i(u), d) {
+      d.classList.add("copied");
+      const n = L(d, m);
       setTimeout(() => {
-        i.classList.remove("copied"), e();
+        d.classList.remove("copied"), n();
       }, 600);
     }
   }
   return {
-    canCopy: a,
-    copy: p
+    canCopy: f,
+    copy: a
   };
 }
-function q(n, c = !1) {
-  const t = $(), s = S(), a = `${n}-`;
-  function p() {
-    const e = [];
-    for (const o in t.query)
-      o.startsWith(a) && e.push(o);
-    return e;
+function Q(s, i = !1) {
+  const e = $(), t = q(), f = `${s}-`;
+  function a() {
+    const n = [];
+    for (const r in e.query)
+      r.startsWith(f) && n.push(r);
+    return n;
   }
-  function r(e) {
-    return e === "true" ? !0 : e === "false" ? !1 : e ?? !1;
+  function u(n) {
+    return n === "true" ? !0 : n === "false" ? !1 : n ?? !1;
   }
-  const i = h(() => {
-    if (c) {
-      const e = p();
-      if (e.length === 0)
+  const d = l(() => {
+    if (i) {
+      const n = a();
+      if (n.length === 0)
         return !1;
-      const o = {};
-      for (const u of e)
-        o[u.substring(a.length)] = r(t.query[u]);
-      return o;
+      const r = {};
+      for (const c of n)
+        r[c.substring(f.length)] = u(e.query[c]);
+      return r;
     } else
-      return r(t.query[n]);
-  }), m = !!i.value;
-  return h({
-    get: () => i.value,
-    set: (e) => {
-      if (e === i.value) return;
-      const o = e == null || e === !1;
-      if (o && !m)
-        s.back();
+      return u(e.query[s]);
+  }), m = !!d.value;
+  return l({
+    get: () => d.value,
+    set: (n) => {
+      if (n === d.value) return;
+      const r = n == null || n === !1;
+      if (r && !m)
+        t.back();
       else {
-        let u;
-        if (c)
-          if (u = {}, o) {
-            const l = p();
-            for (const y of l)
-              u[y] = void 0;
+        let c;
+        if (i)
+          if (c = {}, r) {
+            const h = a();
+            for (const o of h)
+              c[o] = void 0;
           } else
-            for (const l in e)
-              u[`${n}-${l}`] = e[l];
+            for (const h in n)
+              c[`${s}-${h}`] = n[h];
         else
-          u = {
-            [n]: o ? void 0 : e
+          c = {
+            [s]: r ? void 0 : n
           };
-        s[o ? "replace" : "push"]({
-          ...t,
+        t[r ? "replace" : "push"]({
+          ...e,
           query: {
-            ...t.query,
-            ...u
+            ...e.query,
+            ...c
           }
         });
       }
     }
   });
 }
-let E = 0;
-function M() {
-  return ++E;
+let K = 0;
+const p = T([]), O = l(() => p.value.length > 0);
+function W(s, i) {
+  const e = K++, t = l(() => p.value.findIndex((o) => o.id === e));
+  function f() {
+    p.value.some((o) => o.id === e) || p.value.push({
+      id: e,
+      type: i
+    });
+  }
+  function a() {
+    t.value !== -1 && p.value.splice(t.value, 1);
+  }
+  x(s, (o) => {
+    o ? f() : a();
+  }, {
+    immediate: !0
+  }), k(() => {
+    a();
+  });
+  const u = l(() => e === p.value[p.value.length - 1]?.id), d = l(() => t.value > 0), m = l(() => p.value.filter((o) => o.type === i)), n = l(() => m.value.findIndex((o) => o.id === e) < m.value.length - 1), r = l(() => m.value.findIndex((o) => o.id === e) > 0), c = [];
+  function h(o) {
+    c.push(o);
+  }
+  return C("Escape", () => {
+    u.value && c.forEach((o) => o());
+  }), {
+    isActiveStacked: u,
+    hasStackedBehind: d,
+    isBehindSameType: n,
+    hasStackedSameTypeBehind: r,
+    stackIndex: t,
+    onClose: h
+  };
+}
+typeof document < "u" && x(O, (s) => {
+  s ? document.documentElement.classList.add("overflow-hidden") : document.documentElement.classList.remove("overflow-hidden");
+}, {
+  immediate: !0
+});
+function j() {
+  const s = S();
+  let i = null;
+  _(async () => {
+    await w();
+    const e = s.proxy.$el;
+    if (!e?.querySelector) return;
+    let t = e.querySelector("[data-stackview-autofocus]");
+    t ? ["INPUT", "A", "BUTTON", "TEXTAREA"].includes(t.tagName) || (t = t.querySelector("input, a, button, textarea") || t) : (t = e.querySelector('button[type="submit"]'), console.warn(
+      "%cDEV",
+      "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
+      "A element should have the data-stackview-autofocus attribute in this component. Fallback to submit button."
+    )), clearTimeout(i), i = setTimeout(() => t?.focus(), 150);
+  });
+}
+let U = 0;
+function G() {
+  return ++U;
 }
 export {
-  F as BREAKPOINT_2XL,
-  N as BREAKPOINT_LG,
-  X as BREAKPOINT_MD,
-  D as BREAKPOINT_SM,
-  Q as BREAKPOINT_XL,
-  U as BREAKPOINT_XL_PLUS,
-  ee as RenderSlot,
-  j as focusFirstMenuItem,
-  te as getSlotAsComponent,
-  M as getUid,
-  G as hasStackedComponents,
-  oe as unwrapFragments,
-  O as useCopyToClipboard,
-  Y as useResponsive,
-  q as useRouteQueryModel,
-  ne as useSlotsAsComponents,
-  z as useStackAutofocus,
-  H as useStackedComponent
+  Y as BREAKPOINT_2XL,
+  Z as BREAKPOINT_LG,
+  ee as BREAKPOINT_MD,
+  te as BREAKPOINT_SM,
+  ne as BREAKPOINT_XL,
+  oe as BREAKPOINT_XL_PLUS,
+  ae as RenderSlot,
+  ie as focusFirstMenuItem,
+  de as getSlotAsComponent,
+  G as getUid,
+  O as hasStackedComponents,
+  le as unwrapFragments,
+  H as useCopyToClipboard,
+  ue as useResponsive,
+  Q as useRouteQueryModel,
+  fe as useSlotsAsComponents,
+  j as useStackAutofocus,
+  W as useStackedComponent
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@livestorm/ui-vue",
-  "version": "2.0.4",
+  "version": "2.0.5",
   "description": "Livestorm UI components for Vue 3",
   "license": "UNLICENSED",
   "repository": {
@@ -11,6 +11,11 @@
   "main": "./dist/index.mjs",
   "module": "./dist/index.mjs",
   "types": "./dist/types/index.d.ts",
+  "sideEffects": [
+    "**/*.css",
+    "./index.js",
+    "./style.js"
+  ],
   "files": [
     "dist",
     "src",
@@ -38,8 +43,8 @@
     "i18next": "^26.3.4",
     "mitt": "^3.0.1",
     "reka-ui": "^2.9.10",
-    "@livestorm/ui-tokens": "^2.0.4",
-    "@livestorm/ui-icons": "^2.0.4"
+    "@livestorm/ui-tokens": "^2.0.5",
+    "@livestorm/ui-icons": "^2.0.5"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",

package/src/components/UiButtonGroup/UiButtonGroup.vue

@@ -69,6 +69,8 @@ const indicatorStyle = ref<Record<string, string>>({
 const indicatorVisible = ref(false)
 
 function getRootEl (): HTMLElement | null {
+  // HTMLElement does not exist during SSR — this can run server-side.
+  if (typeof HTMLElement === 'undefined') return null
   const el = (rootRef.value as unknown as { $el?: unknown })?.$el
   return el instanceof HTMLElement ? el : null
 }

package/src/components/UiButtonGroup/UiButtonGroupItem.vue

@@ -26,6 +26,8 @@ const registry = inject(BUTTON_GROUP_REGISTER_KEY, null)
 const itemRef = ref<InstanceType<typeof ToggleGroupItem> | null>(null)
 
 function resolveEl (): HTMLElement | null {
+  // HTMLElement does not exist during SSR — this can run server-side.
+  if (typeof HTMLElement === 'undefined') return null
   const el = (itemRef.value as unknown as { $el?: unknown })?.$el
   return el instanceof HTMLElement ? el : null
 }

package/src/components/UiPage/UiPage.vue

@@ -98,15 +98,20 @@ const { addElementToWatch } = useThemeAndModes()
 // the internal theming tooling is enabled, so the stored content mode
 // (driven by the ThemePicker) can apply; for everyone else the content
 // stays light regardless of what localStorage may hold.
-const isInternalThemingEnabled = localStorage.getItem('ls-internal-theming') === 'true'
+// Read in onMounted, not at setup: setup also runs during SSR (no
+// localStorage), and server + client-hydration markup must be identical —
+// the pin lifts right after mount for the internal tooling instead.
+const isInternalThemingEnabled = ref(false)
 
 onMounted(() => {
+  isInternalThemingEnabled.value = localStorage.getItem('ls-internal-theming') === 'true'
+
   addElementToWatch(
     'content',
     {
       selector: '[data-name="ui-page-content"]',
       element: PageContent.value!,
-      ...(isInternalThemingEnabled ? {} : { modeOverride: 'light' }),
+      ...(isInternalThemingEnabled.value ? {} : { modeOverride: 'light' }),
     })
 })
 

package/dist/a11y--y7uaY4j.mjs

@@ -1,217 +0,0 @@
-import { defineComponent as g, createBlock as f, openBlock as c, unref as i, normalizeProps as y, guardReactiveProps as b, withCtx as l, renderSlot as m, computed as r, createVNode as h, mergeProps as T, createCommentVNode as D, getCurrentInstance as B, createElementBlock as A, Fragment as E, createTextVNode as U, toDisplayString as F, ref as N, watch as S, onUnmounted as I, onMounted as H, nextTick as O } from "vue";
-import { TooltipProvider as W, useForwardProps as q, TooltipTrigger as L, useForwardPropsEmits as C, TooltipPortal as M, TooltipContent as z, TooltipArrow as K, TooltipRoot as x } from "reka-ui";
-import { reactiveOmit as V, onKeyDown as R } from "@vueuse/core";
-const X = /* @__PURE__ */ g({
-  __name: "UiTooltipProvider",
-  props: {
-    delayDuration: { default: 700 },
-    skipDelayDuration: { default: 300 },
-    disableHoverableContent: { type: Boolean },
-    disableClosingTrigger: { type: Boolean },
-    disabled: { type: Boolean },
-    ignoreNonKeyboardFocus: { type: Boolean },
-    content: {}
-  },
-  setup(t) {
-    return (s, e) => (c(), f(i(W), y(b(s.$props)), {
-      default: l(() => [
-        m(s.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-}), j = /* @__PURE__ */ g({
-  __name: "UiTooltipTrigger",
-  props: {
-    reference: {},
-    asChild: { type: Boolean },
-    as: {}
-  },
-  setup(t) {
-    const e = q(t);
-    return (o, p) => (c(), f(i(L), y(b({ ...i(e), ...o.$attrs })), {
-      default: l(() => [
-        m(o.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-}), G = /* @__PURE__ */ g({
-  __name: "UiTooltipContent",
-  props: {
-    colorsSemantic: { default: "light" },
-    maxWidth: { default: "base" },
-    showArrow: { type: Boolean, default: !0 },
-    arrowWidth: { default: 10 },
-    arrowHeight: { default: 5 },
-    forceMount: { type: Boolean },
-    ariaLabel: {},
-    asChild: { type: Boolean },
-    as: {},
-    side: {},
-    sideOffset: { default: 12 },
-    align: {},
-    alignOffset: {},
-    avoidCollisions: { type: Boolean },
-    collisionBoundary: {},
-    collisionPadding: {},
-    arrowPadding: {},
-    sticky: {},
-    hideWhenDetached: { type: Boolean },
-    positionStrategy: {},
-    updatePositionStrategy: {}
-  },
-  emits: ["escapeKeyDown", "pointerDownOutside"],
-  setup(t, { emit: s }) {
-    const e = t, p = C(e, s), u = r(() => ({
-      xs: "max-w-[150px]",
-      sm: "max-w-[240px]",
-      md: "max-w-md",
-      base: "max-w-xs",
-      lg: "max-w-lg",
-      xl: "max-w-xl"
-    })[e.maxWidth]);
-    return (a, w) => (c(), f(i(M), null, {
-      default: l(() => [
-        h(i(z), T({ ...i(p), ...a.$attrs }, {
-          "data-colors-semantic": e.colorsSemantic,
-          class: [
-            "ui-tooltip-content py-1.5 px-3 bg-surface-neutral-invert-bg-alpha text-text-neutral-invert-base text-content-text-md-regular rounded-md text-center z-50 shadow-shadows-drop-shadow-lg",
-            "data-[state=delayed-open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=delayed-open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=delayed-open]:zoom-in-95",
-            u.value
-          ]
-        }), {
-          default: l(() => [
-            m(a.$slots, "default"),
-            e.showArrow ? (c(), f(i(K), {
-              key: 0,
-              width: e.arrowWidth,
-              height: e.arrowHeight,
-              class: "fill-surface-neutral-invert-bg-alpha"
-            }, null, 8, ["width", "height"])) : D("", !0)
-          ]),
-          _: 3
-        }, 16, ["data-colors-semantic", "class"])
-      ]),
-      _: 3
-    }));
-  }
-}), te = /* @__PURE__ */ g({
-  inheritAttrs: !1,
-  __name: "UiTooltip",
-  props: {
-    content: {},
-    side: {},
-    defaultOpen: { type: Boolean },
-    open: { type: Boolean },
-    delayDuration: {},
-    disableHoverableContent: { type: Boolean },
-    disableClosingTrigger: { type: Boolean },
-    disabled: { type: Boolean },
-    ignoreNonKeyboardFocus: { type: Boolean }
-  },
-  emits: ["update:open"],
-  setup(t, { emit: s }) {
-    const e = t, o = s, p = r(() => {
-      const a = B()?.vnode.props;
-      return !!a && "content" in a;
-    }), u = C(V(e, "content", "side"), o);
-    return (a, w) => p.value ? (c(), A(E, { key: 0 }, [
-      t.content ? (c(), f(X, { key: 0 }, {
-        default: l(() => [
-          h(i(x), y(b({ ...i(u), ...a.$attrs })), {
-            default: l(() => [
-              h(j, { "as-child": "" }, {
-                default: l(() => [
-                  m(a.$slots, "default")
-                ]),
-                _: 3
-              }),
-              h(G, { side: t.side }, {
-                default: l(() => [
-                  U(F(t.content), 1)
-                ]),
-                _: 1
-              }, 8, ["side"])
-            ]),
-            _: 3
-          }, 16)
-        ]),
-        _: 3
-      })) : m(a.$slots, "default", { key: 1 })
-    ], 64)) : (c(), f(i(x), y(T({ key: 1 }, { ...i(u), ...a.$attrs })), {
-      default: l(() => [
-        m(a.$slots, "default")
-      ]),
-      _: 3
-    }, 16));
-  }
-});
-let J = 0;
-const d = N([]), Q = r(() => d.value.length > 0);
-function oe(t, s) {
-  const e = J++, o = r(() => d.value.findIndex((n) => n.id === e));
-  function p() {
-    d.value.some((n) => n.id === e) || d.value.push({
-      id: e,
-      type: s
-    });
-  }
-  function u() {
-    o.value !== -1 && d.value.splice(o.value, 1);
-  }
-  S(t, (n) => {
-    n ? p() : u();
-  }, {
-    immediate: !0
-  }), I(() => {
-    u();
-  });
-  const a = r(() => e === d.value[d.value.length - 1]?.id), w = r(() => o.value > 0), v = r(() => d.value.filter((n) => n.type === s)), _ = r(() => v.value.findIndex((n) => n.id === e) < v.value.length - 1), $ = r(() => v.value.findIndex((n) => n.id === e) > 0), k = [];
-  function P(n) {
-    k.push(n);
-  }
-  return R("Escape", () => {
-    a.value && k.forEach((n) => n());
-  }), {
-    isActiveStacked: a,
-    hasStackedBehind: w,
-    isBehindSameType: _,
-    hasStackedSameTypeBehind: $,
-    stackIndex: o,
-    onClose: P
-  };
-}
-typeof document < "u" && S(Q, (t) => {
-  t ? document.documentElement.classList.add("overflow-hidden") : document.documentElement.classList.remove("overflow-hidden");
-}, {
-  immediate: !0
-});
-function ae() {
-  const t = B();
-  let s = null;
-  H(async () => {
-    await O();
-    const e = t.proxy.$el;
-    if (!e?.querySelector) return;
-    let o = e.querySelector("[data-stackview-autofocus]");
-    o ? ["INPUT", "A", "BUTTON", "TEXTAREA"].includes(o.tagName) || (o = o.querySelector("input, a, button, textarea") || o) : (o = e.querySelector('button[type="submit"]'), console.warn(
-      "%cDEV",
-      "background: red; color: white; padding: 2px 4px; border-radius: 3px; font-weight: bold;",
-      "A element should have the data-stackview-autofocus attribute in this component. Fallback to submit button."
-    )), clearTimeout(s), s = setTimeout(() => o?.focus(), 150);
-  });
-}
-function ne(t) {
-  t.preventDefault(), (t.target.closest('[role="menu"]') || t.target).querySelector("a")?.focus();
-}
-export {
-  te as _,
-  G as a,
-  X as b,
-  j as c,
-  ae as d,
-  ne as f,
-  Q as h,
-  oe as u
-};