@leavepulse/ui 0.77.3 → 0.78.0

package/dist/chunks/{LpTableOfContents-BN5zvpnx.js → LpTableOfContents-CKkWEK6R.js}

@@ -1,6 +1,7 @@
 import { defineComponent, computed, ref, useId, onMounted, watch, onBeforeUnmount, openBlock, createElementBlock, createElementVNode, toDisplayString, Fragment, renderList, normalizeStyle, normalizeClass, createBlock, unref, createCommentVNode, createTextVNode } from "vue";
 import { Motion } from "motion-v";
 import { useLabels } from "../composables/useLpConfig.js";
+import { useView, viewDocument, viewWindow } from "../composables/useView.js";
 import { scrollParent, scrollToElement, scrollMarginTop, atScrollEnd } from "../composables/scroll.js";
 import { usePillTransition } from "../composables/usePillTransition.js";
 const _hoisted_1 = ["aria-label"];
@@ -35,25 +36,28 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     let spySuppressed = false;
     let rafId = null;
     let safetyTimer = null;
+    const host = useView();
     function setup() {
       stopSpy?.();
       stopSpy = null;
       const ids = flatIds(props.links);
       if (!ids.length) return;
-      const first = document.getElementById(ids[0]);
+      const page = viewDocument(host.value);
+      const win = viewWindow(host.value);
+      const first = page.getElementById(ids[0]);
       const scroller = first ? scrollParent(first) : null;
       let frame = 0;
       const measure = () => {
         frame = 0;
         if (spySuppressed) return;
         const top = scroller ? scroller.getBoundingClientRect().top : 0;
-        const headings = ids.map((id) => document.getElementById(id)).filter((el) => !!el);
+        const headings = ids.map((id) => page.getElementById(id)).filter((el) => !!el);
         if (!headings.length) return;
         let current = headings[0].id;
-        const view = scroller ? scroller.clientHeight : window.innerHeight;
+        const view = scroller ? scroller.clientHeight : win.innerHeight;
         const line = Math.max(props.offset, view / 4);
         for (const el of headings) if (el.getBoundingClientRect().top - top <= line + 1) current = el.id;
-        const scrolled = scroller ? scroller.scrollTop : window.scrollY;
+        const scrolled = scroller ? scroller.scrollTop : win.scrollY;
         const end = atScrollEnd(headings[0]);
         if (scrolled > 0 && end) current = headings[headings.length - 1].id;
         activeId.value = current;
@@ -61,13 +65,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       const onScroll = () => {
         if (!frame) frame = requestAnimationFrame(measure);
       };
-      const target = scroller ?? window;
+      const target = scroller ?? win;
       target.addEventListener("scroll", onScroll, { passive: true });
-      window.addEventListener("resize", onScroll);
+      win.addEventListener("resize", onScroll);
       measure();
       stopSpy = () => {
         target.removeEventListener("scroll", onScroll);
-        window.removeEventListener("resize", onScroll);
+        win.removeEventListener("resize", onScroll);
         if (frame) cancelAnimationFrame(frame);
       };
     }
@@ -83,7 +87,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (rafId != null) cancelAnimationFrame(rafId);
       if (safetyTimer != null) clearTimeout(safetyTimer);
       const scroller = scrollParent(target);
-      const position = () => scroller ? scroller.scrollTop : window.scrollY;
+      const win = viewWindow(host.value);
+      const position = () => scroller ? scroller.scrollTop : win.scrollY;
       let last = position();
       const tick = () => {
         const y = position();
@@ -98,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       safetyTimer = setTimeout(unfreeze, 1e3);
     }
     function onClick(id, ev) {
-      const el = document.getElementById(id);
+      const el = viewDocument(host.value).getElementById(id);
       if (!el) return;
       ev.preventDefault();
       activeId.value = id;

package/dist/chunks/{LpTagsInput-C-mDG648.js → LpTagsInput-Dt0mteSj.js}

@@ -1,18 +1,19 @@
-import { defineComponent, useAttrs, computed, ref, useId, watch, openBlock, createBlock, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, createVNode, mergeProps, TransitionGroup, createElementBlock, Fragment, renderList, createCommentVNode, toDisplayString, withModifiers } from "vue";
+import { defineComponent, useAttrs, computed, ref, useId, watch, openBlock, createBlock, mergeProps, unref, withCtx, createElementVNode, createVNode, TransitionGroup, createElementBlock, Fragment, renderList, normalizeClass, createCommentVNode, toDisplayString, withModifiers, normalizeStyle } from "vue";
+import { isNode, isInputElement } from "../composables/realm.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { TagsInputRoot, TagsInputItem, TagsInputItemText, TagsInputItemDelete, TagsInputInput, PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
-import { useField, useFieldControl } from "../composables/useField.js";
+import { useField, useFieldControl, mergeDescribedBy, fieldWrapperBinds } from "../composables/useField.js";
 import { prefersReducedMotion } from "../composables/easing.js";
 import { useFieldNotice } from "../composables/useFieldNotice.js";
 import { useShift } from "../composables/useShift.js";
 import { useLabels } from "../composables/useLpConfig.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$4 } from "./LpFieldNotice-CzQ2_5rQ.js";
-import { _ as _sfc_main$1 } from "./FieldWrapper-CORPzo9s.js";
+import { _ as _sfc_main$4 } from "./LpFieldNotice-DJ10cYIo.js";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
 import { BADGE_REMOVE } from "../components/badge.js";
-import { _ as _sfc_main$2 } from "./LpBadge-wUYLN4U9.js";
-import { _ as _sfc_main$3 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$5 } from "./OptionContent-22UT8zLn.js";
+import { _ as _sfc_main$2 } from "./LpBadge-D5QQdDQ_.js";
+import { _ as _sfc_main$3 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$5 } from "./OptionContent-CGb8QlHA.js";
 import { POPOVER_PANEL, OPTION_ITEM, optionStagger } from "../components/dropdown.js";
 import { splitTags, addTags } from "../components/tags.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
@@ -111,11 +112,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       disabled: props.disabled
     }));
     const describedBy = computed(
-      () => [
+      () => mergeDescribedBy(
+        attrs["aria-describedby"],
         field.value.describedBy,
         hasField.value && field.value.id ? `${field.value.id}-notice` : void 0,
         standalone.value && notice.message.value ? noticeId : void 0
-      ].filter(Boolean).join(" ") || void 0
+      )
     );
     const rootAttrs = computed(() => {
       const { class: _c, style: _s, id: _i, ...rest } = attrs;
@@ -222,7 +224,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function keepOpenInside(event) {
       guardOutside(event);
       const target = event.target;
-      if (target instanceof Node && boxEl.value?.contains(target)) event.preventDefault();
+      if (isNode(target) && boxEl.value?.contains(target)) event.preventDefault();
     }
     function isDelimiter(data) {
       const d = props.delimiter;
@@ -230,7 +232,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return (typeof d === "string" ? [d] : d).includes(data);
     }
     function onKeydown(event) {
-      if (event.isComposing || !(event.target instanceof HTMLInputElement)) return;
+      if (event.isComposing || !isInputElement(event.target)) return;
       const count = suggestions.value.length;
       if (listOpen.value && count) {
         if (event.key === "ArrowDown" || event.key === "ArrowUp") {
@@ -252,21 +254,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     }
     function onBeforeInput(event) {
-      if (event.isComposing || !(event.target instanceof HTMLInputElement)) return;
+      if (event.isComposing || !isInputElement(event.target)) return;
       if (event.inputType === "insertText" && event.data && isDelimiter(event.data)) {
         event.preventDefault();
         commit(event.target);
       }
     }
     function onInput(event) {
-      if (event.target instanceof HTMLInputElement) sync(event.target);
+      if (isInputElement(event.target)) sync(event.target);
       if (!stuck.value) return;
       stuck.value = false;
       unsay();
     }
     function onPaste(event) {
       const pasted = event.clipboardData?.getData("text") ?? "";
-      if (!(event.target instanceof HTMLInputElement) || !pasted) return;
+      if (!isInputElement(event.target) || !pasted) return;
       if (splitTags(pasted, props.delimiter).length < 2) return;
       event.preventDefault();
       const el = event.target;
@@ -277,7 +279,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onBlur(event) {
       focused.value = false;
       emit("blur", event);
-      if (props.addOnBlur && event.target instanceof HTMLInputElement && event.target.value.trim()) commit(event.target);
+      if (props.addOnBlur && isInputElement(event.target) && event.target.value.trim()) commit(event.target);
     }
     function onFocus() {
       focused.value = true;
@@ -301,17 +303,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const guardOutside = useOutsideGuard();
     usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ label: void 0, hint: void 0, error: void 0 }) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, {
-        wrapped: hasField.value,
-        ref: bindField,
-        id: unref(field).id,
-        label: __props.label,
-        hint: __props.hint,
-        error: __props.error,
-        required: __props.required,
-        class: normalizeClass(unref(attrs).class),
-        style: normalizeStyle(unref(attrs).style)
-      }, {
+      return openBlock(), createBlock(_sfc_main$1, mergeProps(unref(fieldWrapperBinds)(hasField.value, unref(field), _ctx.$props, unref(attrs)), { ref: bindField }), {
         default: withCtx(() => [
           createElementVNode("div", _hoisted_1, [
             createVNode(unref(TagsInputRoot), mergeProps(rootAttrs.value, {
@@ -480,7 +472,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createElementVNode("span", _hoisted_8, toDisplayString(announcement.value), 1)
         ]),
         _: 1
-      }, 8, ["wrapped", "id", "label", "hint", "error", "required", "class", "style"]);
+      }, 16);
     };
   }
 });

package/dist/chunks/{LpTextarea-TE-yZv2U.js → LpTextarea-Co0b9PVx.js}

@@ -1,8 +1,9 @@
-import { defineComponent, computed, useAttrs, ref, watch, nextTick, onMounted, openBlock, createBlock, normalizeStyle, unref, normalizeClass, withCtx, createElementVNode, mergeProps } from "vue";
+import { defineComponent, computed, useAttrs, ref, watch, nextTick, onMounted, openBlock, createBlock, normalizeProps, guardReactiveProps, unref, withCtx, createElementVNode, mergeProps } from "vue";
+import { nodeWindow } from "../composables/realm.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
-import { useFieldControl } from "../composables/useField.js";
+import { useFieldControl, fieldWrapperBinds, mergeDescribedBy } from "../composables/useField.js";
 import { mergeClass } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./FieldWrapper-CORPzo9s.js";
+import { _ as _sfc_main$1 } from "./FieldWrapper-DnuMTrqW.js";
 const _hoisted_1 = ["id", "value", "placeholder", "rows", "disabled", "required", "aria-invalid", "aria-describedby"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -43,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function fit() {
       const el = box.value;
       if (!props.autosize || !el) return;
-      const style = getComputedStyle(el);
+      const style = nodeWindow(el).getComputedStyle(el);
       const line = parseFloat(style.lineHeight) || parseFloat(style.fontSize) * 1.4;
       const borders = parseFloat(style.borderTopWidth) + parseFloat(style.borderBottomWidth);
       const padding = parseFloat(style.paddingTop) + parseFloat(style.paddingBottom);
@@ -65,16 +66,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     );
     usePaletteControl({ label: () => props.label, disabled: () => field.value.disabled, invalid: () => field.value.invalid, editorProps: () => ({ label: void 0, hint: void 0, error: void 0 }) });
     return (_ctx, _cache) => {
-      return openBlock(), createBlock(_sfc_main$1, {
-        wrapped: hasField.value,
-        id: unref(field).id,
-        label: __props.label,
-        hint: __props.hint,
-        error: __props.error,
-        required: __props.required,
-        class: normalizeClass(unref(attrs).class),
-        style: normalizeStyle(unref(attrs).style)
-      }, {
+      return openBlock(), createBlock(_sfc_main$1, normalizeProps(guardReactiveProps(unref(fieldWrapperBinds)(hasField.value, unref(field), _ctx.$props, unref(attrs)))), {
         default: withCtx(() => [
           createElementVNode("textarea", mergeProps({
             ref_key: "box",
@@ -87,7 +79,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             disabled: unref(field).disabled,
             required: unref(field).required || void 0,
             "aria-invalid": unref(field).invalid || void 0,
-            "aria-describedby": unref(field).describedBy,
+            "aria-describedby": unref(mergeDescribedBy)(unref(attrs)["aria-describedby"], unref(field).describedBy),
             class: textareaClass.value,
             style: hasField.value ? void 0 : unref(attrs).style,
             onInput: _cache[0] || (_cache[0] = ($event) => {
@@ -97,7 +89,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), null, 16, _hoisted_1)
         ]),
         _: 1
-      }, 8, ["wrapped", "id", "label", "hint", "error", "required", "class", "style"]);
+      }, 16);
     };
   }
 });

package/dist/chunks/LpThemeProvider-XK6ZeWAE.js

@@ -0,0 +1,81 @@
+import { defineComponent, ref, shallowRef, computed, onMounted, watch, openBlock, createBlock, resolveDynamicComponent, mergeProps, unref, withCtx, renderSlot, nextTick } from "vue";
+import { themeEntries, revealTransition } from "../theme/useTheme.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useView, viewWindow } from "../composables/useView.js";
+import { isElement, nodeWindow } from "../composables/realm.js";
+const PRESS_FRESH_MS = 1500;
+const presses = /* @__PURE__ */ new WeakMap();
+function trackPresses(win) {
+  if (presses.has(win)) return;
+  presses.set(win, null);
+  win.addEventListener(
+    "pointerdown",
+    (event) => presses.set(win, { x: event.clientX, y: event.clientY, at: performance.now() }),
+    { capture: true, passive: true }
+  );
+}
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpThemeProvider",
+  props: {
+    theme: {},
+    as: { default: "div" },
+    transition: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const props = __props;
+    const { class: rootClass, attrs: rest } = useMergedAttrs("bg-surface text-ink");
+    const root = ref(null);
+    const shown = shallowRef(props.theme);
+    const style = computed(() => ({
+      ...Object.fromEntries(themeEntries(shown.value)),
+      colorScheme: shown.value.mode
+    }));
+    const view = useView();
+    onMounted(() => trackPresses(viewWindow(view.value)));
+    function rootElement() {
+      const value = root.value;
+      const el = isElement(value) ? value : value?.$el;
+      return isElement(el) ? el : void 0;
+    }
+    function originOf(el) {
+      const press = presses.get(el ? nodeWindow(el) : viewWindow(view.value));
+      if (press && performance.now() - press.at < PRESS_FRESH_MS) return press;
+      const box = el?.getBoundingClientRect();
+      return box ? { x: box.left + box.width / 2, y: box.top + box.height / 2 } : void 0;
+    }
+    watch(
+      () => props.theme,
+      (next) => {
+        if (!props.transition) {
+          shown.value = next;
+          return;
+        }
+        const el = rootElement();
+        const update = async () => {
+          shown.value = next;
+          await nextTick();
+        };
+        revealTransition(update, originOf(el), void 0, el?.ownerDocument);
+      }
+    );
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(resolveDynamicComponent(__props.as), mergeProps({
+        ref_key: "root",
+        ref: root,
+        style: style.value,
+        "data-theme-mode": shown.value.mode,
+        class: unref(rootClass)
+      }, unref(rest)), {
+        default: withCtx(() => [
+          renderSlot(_ctx.$slots, "default")
+        ]),
+        _: 3
+      }, 16, ["style", "data-theme-mode", "class"]);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpThemeStudio-BpORDvH6.js → LpThemeStudio-DzYfE-5k.js}

@@ -1,191 +1,16 @@
-import { shallowRef, computed, ref, watch, watchEffect, defineComponent, openBlock, createElementBlock, unref, createElementVNode, toDisplayString, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, renderSlot, normalizeClass, Fragment, renderList, normalizeStyle, h } from "vue";
-import { u as usePaletteTheme } from "./palette-Co8tSASo.js";
+import { defineComponent, computed, ref, openBlock, createElementBlock, unref, createElementVNode, toDisplayString, createBlock, withCtx, createVNode, createTextVNode, createCommentVNode, renderSlot, normalizeClass, Fragment, renderList, normalizeStyle, h } from "vue";
+import { usePaletteTheme } from "../theme/palette.js";
 import { useLabels } from "../composables/useLpConfig.js";
-import { usePersisted } from "../composables/usePersisted.js";
-import { parseColor, rgbToHex } from "../components/color.js";
-import { p as presets, u as useTheme, o as themeToCssRule, s as serializeTheme, _ as _sfc_main$8 } from "./LpThemeProvider-8MG6yqU9.js";
-import { _ as _sfc_main$1 } from "./LpButton-CFb44IjC.js";
-import { _ as _sfc_main$7 } from "./LpCodeBlock-DRC8VbXW.js";
-import { _ as _sfc_main$4 } from "./LpColorPicker-1y1QJHZR.js";
-import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
-import { _ as _sfc_main$5 } from "./LpSegmented-CeACsMMA.js";
-import { _ as _sfc_main$6 } from "./LpDisclosure-Cpa7Hc5T.js";
+import { useThemeStudio, STUDIO_BRANDS, STUDIO_SYSTEM } from "../theme/studio.js";
+import { _ as _sfc_main$1 } from "./LpButton-DSHioIfD.js";
+import { _ as _sfc_main$7 } from "./LpCodeBlock-DuzmnIHl.js";
+import { _ as _sfc_main$4 } from "./LpColorPicker-BxAHEnR5.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
+import { _ as _sfc_main$5 } from "./LpSegmented-DbEJhbv-.js";
+import { _ as _sfc_main$6 } from "./LpDisclosure-DG7JCo-d.js";
+import { _ as _sfc_main$8 } from "./LpThemeProvider-XK6ZeWAE.js";
 import { _ as _sfc_main$3 } from "./LpThemeStudioSection-B7bt8Iyg.js";
-function defineTheme(base, overrides = {}) {
-  const src = typeof base === "string" ? presets[base] : base;
-  return {
-    name: overrides.name ?? src.name,
-    mode: overrides.mode ?? src.mode,
-    colors: { ...src.colors, ...overrides.colors },
-    shape: { ...src.shape, ...overrides.shape },
-    density: { ...src.density, ...overrides.density },
-    font: { ...src.font, ...overrides.font },
-    surface: src.surface || overrides.surface ? { ...src.surface, ...overrides.surface } : void 0
-  };
-}
-function luminance({ r, g, b }) {
-  const lin = (n) => {
-    const x = n / 255;
-    return x <= 0.03928 ? x / 12.92 : ((x + 0.055) / 1.055) ** 2.4;
-  };
-  return 0.2126 * lin(r) + 0.7152 * lin(g) + 0.0722 * lin(b);
-}
-function contrast(a, b) {
-  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
-  return (hi + 0.05) / (lo + 0.05);
-}
-const READABLE = 4.5;
-const mixRgb = (a, b, t) => ({
-  r: Math.round(a.r + (b.r - a.r) * t),
-  g: Math.round(a.g + (b.g - a.g) * t),
-  b: Math.round(a.b + (b.b - a.b) * t),
-  a: 1
-});
-function textOn(fill, current) {
-  const now = parseColor(current);
-  if (now && contrast(fill, now) >= READABLE) return current;
-  const dark = { r: 11, g: 15, b: 18 };
-  const light = { r: 255, g: 255, b: 255 };
-  return contrast(fill, dark) >= contrast(fill, light) ? "#0b0f12" : "#ffffff";
-}
-function withBrand(base, color) {
-  const src = typeof base === "string" ? presets[base] : base;
-  const rgb = parseColor(color);
-  if (!rgb) return src;
-  const solid = { ...rgb, a: 1 };
-  const dark = src.mode === "dark";
-  const hover = mixRgb(solid, dark ? { r: 255, g: 255, b: 255 } : { r: 0, g: 0, b: 0 }, dark ? 0.12 : 0.1);
-  const tint = (alpha) => `rgba(${solid.r}, ${solid.g}, ${solid.b}, ${alpha})`;
-  return defineTheme(src, {
-    colors: {
-      brand: rgbToHex(solid),
-      brandHover: rgbToHex(hover),
-      brandSoft: tint(dark ? 0.16 : 0.12),
-      ring: tint(0.45),
-      inkInverse: textOn(solid, src.colors.inkInverse)
-    }
-  });
-}
-const STUDIO_BRANDS = ["#00bcff", "#7c5cff", "#ff5ca8", "#ff6b3d", "#f0b35a", "#c6ff3d", "#39e58c", "#2dd4bf"];
-const STUDIO_CORNERS = {
-  sharp: { radiusControl: 3, radiusCard: 6 },
-  default: {},
-  round: { radiusControl: 12, radiusCard: 22 }
-};
-const STUDIO_SIZES = {
-  compact: { controlSm: 28, controlMd: 34, controlLg: 40 },
-  default: {},
-  comfortable: { controlSm: 36, controlMd: 42, controlLg: 48 }
-};
-const STUDIO_MOTION = { fast: 0.6, normal: 1, slow: 1.8 };
-const STUDIO_SYSTEM = "system";
-const DURATIONS = ["--duration-fast", "--duration-medium", "--duration-slow"];
-const studios = /* @__PURE__ */ new Map();
-function useThemeStudio(options = {}) {
-  const key = options.storageKey ?? "lp-theme-studio";
-  let entry = studios.get(key);
-  if (!entry) {
-    const config = shallowRef({});
-    entry = { config, studio: create(key, config) };
-    studios.set(key, entry);
-  }
-  const { themes, system } = entry.config.value;
-  if (!themes && options.themes || !system && options.system) {
-    entry.config.value = { themes: themes ?? options.themes, system: system ?? options.system };
-  }
-  return entry.studio;
-}
-function create(key, config) {
-  const themes = computed(() => config.value.themes?.length ? config.value.themes : Object.values(presets));
-  const system = computed(() => {
-    const pair = config.value.system;
-    const light = pair && themes.value.find((t) => t.name === pair.light);
-    const dark = pair && themes.value.find((t) => t.name === pair.dark);
-    return light && dark ? { light, dark } : null;
-  });
-  const prefersDark = ref(typeof window !== "undefined" && !!window.matchMedia?.("(prefers-color-scheme: dark)").matches);
-  if (typeof window !== "undefined") {
-    window.matchMedia?.("(prefers-color-scheme: dark)").addEventListener("change", (e) => prefersDark.value = e.matches);
-  }
-  const engine = useTheme();
-  const defaults = () => ({
-    theme: engine.currentName.value || themes.value[0]?.name || "",
-    brand: null,
-    corners: "default",
-    size: "default",
-    motion: "normal"
-  });
-  const initial = defaults();
-  const state = usePersisted(key, initial, {
-    validate: (v) => !!v && typeof v === "object" && typeof v.theme === "string"
-  });
-  const base = (s) => {
-    if (s.theme === STUDIO_SYSTEM && system.value) return prefersDark.value ? system.value.dark : system.value.light;
-    return themes.value.find((t) => t.name === s.theme) ?? themes.value[0];
-  };
-  function build(s) {
-    const shaped = defineTheme(base(s), { shape: STUDIO_CORNERS[s.corners], density: STUDIO_SIZES[s.size] });
-    return s.brand ? withBrand(shaped, s.brand) : shaped;
-  }
-  const theme = computed(() => build(state.value));
-  if (state.value.theme !== initial.theme || state.value.brand || state.value.corners !== "default" || state.value.size !== "default") {
-    engine.apply(theme.value);
-  }
-  function pickTheme(name, origin) {
-    if (name === state.value.theme) return;
-    state.value = { ...state.value, theme: name };
-    engine.setTheme(theme.value, origin);
-  }
-  function tune(patch) {
-    state.value = { ...state.value, ...patch };
-  }
-  function reset(origin) {
-    state.value = { ...initial };
-    engine.setTheme(theme.value, origin);
-  }
-  watch(
-    () => `${state.value.brand}|${state.value.corners}|${state.value.size}`,
-    () => engine.apply(theme.value)
-  );
-  watch(prefersDark, () => {
-    if (state.value.theme === STUDIO_SYSTEM) engine.setTheme(theme.value);
-  });
-  watch(system, () => {
-    if (state.value.theme === STUDIO_SYSTEM) engine.apply(theme.value);
-  });
-  const brand = computed({
-    get: () => state.value.brand ?? base(state.value).colors.brand,
-    set: (value) => tune({ brand: value })
-  });
-  const changed = computed(() => JSON.stringify(state.value) !== JSON.stringify(initial));
-  if (typeof document !== "undefined") {
-    watchEffect(() => {
-      const scale = STUDIO_MOTION[state.value.motion ?? "normal"];
-      const root = document.documentElement;
-      for (const name of DURATIONS) root.style.removeProperty(name);
-      if (scale === 1) return;
-      const style = getComputedStyle(root);
-      for (const name of DURATIONS) {
-        const ms = parseFloat(style.getPropertyValue(name));
-        if (Number.isFinite(ms)) root.style.setProperty(name, `${Math.round(ms * scale)}ms`);
-      }
-    });
-  }
-  function exportState(s) {
-    const built = build(s);
-    const preset = Object.entries(presets).find(([, p]) => p.name === base(s).name)?.[0];
-    const source = preset ? `"${preset}"` : "yourTheme";
-    const overrides = [];
-    if (s.corners !== "default") overrides.push(`shape: ${JSON.stringify(STUDIO_CORNERS[s.corners])}`);
-    if (s.size !== "default") overrides.push(`density: ${JSON.stringify(STUDIO_SIZES[s.size])}`);
-    const shaped = overrides.length ? `defineTheme(${source}, { ${overrides.join(", ")} })` : source;
-    const code = s.brand ? `withBrand(${shaped}, "${s.brand}")` : overrides.length ? shaped : preset ? `presets.${preset}` : source;
-    return { code, json: serializeTheme(built), css: themeToCssRule(built) };
-  }
-  const exported = computed(() => exportState(state.value));
-  const preview = (draft) => ({ theme: build(draft), exported: exportState(draft) });
-  return { state, themes, system, theme, brand, changed, exported, pickTheme, tune, reset, preview };
-}
+import { withBrand } from "../theme/define.js";
 const _hoisted_1 = { class: "@container flex flex-col gap-4" };
 const _hoisted_2 = {
   key: 0,
@@ -442,13 +267,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   }
 });
 export {
-  STUDIO_SYSTEM as S,
-  _sfc_main as _,
-  STUDIO_BRANDS as a,
-  STUDIO_CORNERS as b,
-  STUDIO_MOTION as c,
-  STUDIO_SIZES as d,
-  defineTheme as e,
-  useThemeStudio as u,
-  withBrand as w
+  _sfc_main as _
 };

package/dist/chunks/{LpThemeSwitcher-BnEn_mvf.js → LpThemeSwitcher-CFLkdbBL.js}

@@ -1,15 +1,17 @@
 import { defineComponent, ref, useId, computed, onMounted, openBlock, createBlock, unref, withCtx, createVNode, createElementVNode, normalizeClass, createElementBlock, createCommentVNode, renderSlot, normalizeProps, guardReactiveProps } from "vue";
-import { u as usePaletteTheme } from "./palette-Co8tSASo.js";
+import { usePaletteTheme } from "../theme/palette.js";
 import { PopoverRoot, PopoverAnchor, PopoverPortal, PopoverContent } from "reka-ui";
 import { useLabels } from "../composables/useLpConfig.js";
 import { usePortalTarget, useOutsideGuard } from "../composables/useView.js";
-import { u as useTheme, p as presets } from "./LpThemeProvider-8MG6yqU9.js";
-import { u as useThemeStudio, S as STUDIO_SYSTEM, _ as _sfc_main$5 } from "./LpThemeStudio-BpORDvH6.js";
+import { presets } from "../theme/presets.js";
+import { useThemeStudio, STUDIO_SYSTEM } from "../theme/studio.js";
+import { useTheme } from "../theme/useTheme.js";
 import { POPOVER_PANEL } from "../components/dropdown.js";
-import { _ as _sfc_main$1 } from "./LpContextMenu-rx2tCjwk.js";
-import { _ as _sfc_main$2 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$1 } from "./LpContextMenu--eMGIql6.js";
+import { _ as _sfc_main$2 } from "./LpIcon-C6JpQ5td.js";
 import { _ as _sfc_main$4 } from "./LpRollingText-B54Pje7P.js";
-import { _ as _sfc_main$3 } from "./LpShift-CCq7dofl.js";
+import { _ as _sfc_main$3 } from "./LpShift-DAgS_d2x.js";
+import { _ as _sfc_main$5 } from "./LpThemeStudio-DzYfE-5k.js";
 const _hoisted_1 = ["aria-label", "title"];
 const _hoisted_2 = {
   key: 1,

package/dist/chunks/{LpTimeField-BawSVsmt.js → LpTimeField-DeOcKWJq.js}

@@ -1,10 +1,11 @@
 import { defineComponent, computed, openBlock, createBlock, unref, mergeProps, withCtx, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode, toDisplayString } from "vue";
+import { CONTROL_SIZE } from "../components/controlSize.js";
 import { usePaletteControl } from "../composables/usePaletteCommands.js";
 import { Time } from "@internationalized/date";
 import { TimeFieldRoot, TimeFieldInput } from "reka-ui";
-import { useFieldControl, focusLeft } from "../composables/useField.js";
+import { useFieldControl, mergeDescribedBy, focusLeft } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
-import { _ as _sfc_main$1 } from "./LpIcon--5WSb3jJ.js";
+import { _ as _sfc_main$1 } from "./LpIcon-C6JpQ5td.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -43,11 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       invalid: props.invalid,
       disabled: props.disabled
     }));
-    const shellSize = {
-      sm: "h-(--size-control-sm) text-xs",
-      md: "h-(--size-control-md) text-sm",
-      lg: "h-(--size-control-lg) text-sm"
-    };
+    const shellSize = CONTROL_SIZE;
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       () => [
         "flex w-full items-center gap-0.5 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
@@ -65,10 +62,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         disabled: unref(field).disabled,
         required: unref(field).required,
         "aria-invalid": unref(field).invalid || void 0,
-        "aria-describedby": unref(field).describedBy,
         "aria-labelledby": unref(field).labelId,
         class: unref(rootClass)
       }, unref(rest), {
+        "aria-describedby": unref(mergeDescribedBy)(unref(rest)["aria-describedby"], unref(field).describedBy),
         "onUpdate:modelValue": onUpdate,
         onFocusout: onFocusOut
       }), {
@@ -104,7 +101,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         _: 1
-      }, 16, ["model-value", "hour-cycle", "locale", "disabled", "required", "aria-invalid", "aria-describedby", "aria-labelledby", "class"]);
+      }, 16, ["model-value", "hour-cycle", "locale", "disabled", "required", "aria-invalid", "aria-labelledby", "class", "aria-describedby"]);
     };
   }
 });