@leavepulse/ui 0.43.4 → 0.44.0

package/dist/chunks/{LpSelect-ANIVtrpM.js → LpSelect-DrRD9I7L.js}

@@ -1,5 +1,7 @@
 import { defineComponent, computed, ref, openBlock, createBlock, unref, withCtx, createVNode, normalizeClass, createElementBlock, toDisplayString, withModifiers, createCommentVNode, createTextVNode, Fragment, renderList, normalizeStyle, createElementVNode } from "vue";
 import { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxInput, ComboboxViewport, ComboboxEmpty, ComboboxItem, ComboboxItemIndicator } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
+import { useLabels } from "../composables/useLpConfig.js";
 import { POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
 const _hoisted_1 = {
@@ -10,16 +12,17 @@ const _hoisted_2 = {
   key: 1,
   class: "truncate text-muted"
 };
-const _hoisted_3 = {
+const _hoisted_3 = ["aria-label"];
+const _hoisted_4 = {
   key: 0,
   class: "border-b border-line p-2"
 };
-const _hoisted_4 = {
+const _hoisted_5 = {
   key: 0,
   class: "px-3 py-4 text-center text-sm italic text-muted"
 };
-const _hoisted_5 = { class: "flex flex-col" };
-const _hoisted_6 = {
+const _hoisted_6 = { class: "flex flex-col" };
+const _hoisted_7 = {
   key: 0,
   class: "text-xs text-muted"
 };
@@ -35,6 +38,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     multiple: { type: Boolean, default: false },
     clearable: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
+    invalid: { type: Boolean },
     emptyText: { default: "Nothing found" },
     searchTerm: { default: void 0 },
     loading: { type: Boolean, default: false },
@@ -50,6 +54,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       lg: "h-(--size-control-lg)"
     };
     const anchorHeight = computed(() => SIZE_HEIGHT[props.size]);
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      invalid: props.invalid,
+      disabled: props.disabled
+    }));
+    const labels = useLabels("select", { clear: "Clear", selected: "{count} selected" });
     const emit = __emit;
     const serverSide = computed(() => props.searchTerm !== void 0);
     const localQuery = ref("");
@@ -93,7 +103,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         if (arr.length === 0) return "";
         if (arr.length === 1)
           return props.options.find((o) => o.value === arr[0])?.label ?? String(arr[0]);
-        return `${arr.length} selected`;
+        return labels.value.selected.replace("{count}", String(arr.length));
       }
       return props.options.find((o) => o.value === v)?.label ?? "";
     });
@@ -112,7 +122,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(unref(ComboboxRoot), {
         "model-value": comboModel.value,
         multiple: __props.multiple,
-        disabled: __props.disabled,
+        disabled: unref(field).disabled,
         "ignore-filter": true,
         "reset-search-term-on-select": false,
         "reset-search-term-on-blur": false,
@@ -124,30 +134,42 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(ComboboxAnchor), {
             class: normalizeClass([
               anchorHeight.value,
-              "group flex w-full items-center gap-2 rounded-control border border-line bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
+              "group flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-sm text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
+              unref(field).invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand focus-within:ring-ring"
             ])
           }, {
             default: withCtx(() => [
-              createVNode(unref(ComboboxTrigger), { class: "flex min-w-0 flex-1 items-center gap-2 outline-none" }, {
+              createVNode(unref(ComboboxTrigger), {
+                id: unref(field).id,
+                "aria-invalid": unref(field).invalid || void 0,
+                "aria-describedby": unref(field).describedBy,
+                class: "flex min-w-0 flex-1 items-center gap-2 outline-none"
+              }, {
                 default: withCtx(() => [
                   displayLabel.value ? (openBlock(), createElementBlock("span", _hoisted_1, toDisplayString(displayLabel.value), 1)) : (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.placeholder), 1))
                 ]),
                 _: 1
-              }),
+              }, 8, ["id", "aria-invalid", "aria-describedby"]),
               __props.clearable && hasValue.value ? (openBlock(), createElementBlock("button", {
                 key: 0,
                 type: "button",
                 class: "group flex shrink-0 items-center text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:text-ink",
-                "aria-label": "Clear",
-                onPointerdown: withModifiers(clear, ["prevent"])
+                "aria-label": unref(labels).clear,
+                onPointerdown: _cache[0] || (_cache[0] = withModifiers(() => {
+                }, ["prevent"])),
+                onClick: clear
               }, [
                 createVNode(_sfc_main$1, {
                   name: "lucide:x",
                   size: 16,
                   class: "transition-transform duration-200 ease-[var(--ease-emphasized)] group-hover:rotate-90 group-active:scale-90 motion-reduce:group-hover:rotate-0"
                 })
-              ], 32)) : createCommentVNode("", true),
-              createVNode(unref(ComboboxTrigger), { class: "group/trig flex shrink-0 items-center text-muted transition-[rotate,color] duration-200 ease-[var(--ease-emphasized)] group-hover:text-ink data-[state=open]:rotate-180" }, {
+              ], 40, _hoisted_3)) : createCommentVNode("", true),
+              createVNode(unref(ComboboxTrigger), {
+                tabindex: "-1",
+                "aria-hidden": "true",
+                class: "group/trig flex shrink-0 items-center text-muted transition-[rotate,color] duration-200 ease-[var(--ease-emphasized)] group-hover:text-ink data-[state=open]:rotate-180"
+              }, {
                 default: withCtx(() => [
                   createVNode(_sfc_main$1, {
                     name: "lucide:chevron-down",
@@ -168,17 +190,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-(--reka-combobox-trigger-width) overflow-hidden"])
               }, {
                 default: withCtx(() => [
-                  __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                  __props.searchable || serverSide.value ? (openBlock(), createElementBlock("div", _hoisted_4, [
                     createVNode(unref(ComboboxInput), {
                       modelValue: query.value,
-                      "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => query.value = $event),
+                      "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => query.value = $event),
                       placeholder: __props.searchPlaceholder,
                       class: "h-(--size-control-sm) w-full rounded-md border border-line bg-surface-soft px-2.5 text-sm text-ink outline-none placeholder:text-muted focus:border-brand"
                     }, null, 8, ["modelValue", "placeholder"])
                   ])) : createCommentVNode("", true),
                   createVNode(unref(ComboboxViewport), { class: "max-h-56 overflow-y-auto p-1" }, {
                     default: withCtx(() => [
-                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_4, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
+                      __props.loading ? (openBlock(), createElementBlock("div", _hoisted_5, toDisplayString(__props.loadingText), 1)) : (openBlock(), createBlock(unref(ComboboxEmpty), {
                         key: 1,
                         class: "px-3 py-4 text-center text-sm italic text-muted"
                       }, {
@@ -195,9 +217,9 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                           class: normalizeClass([unref(OPTION_ITEM), "justify-between"])
                         }, {
                           default: withCtx(() => [
-                            createElementVNode("span", _hoisted_5, [
+                            createElementVNode("span", _hoisted_6, [
                               createElementVNode("span", null, toDisplayString(opt.label), 1),
-                              opt.description ? (openBlock(), createElementBlock("span", _hoisted_6, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
+                              opt.description ? (openBlock(), createElementBlock("span", _hoisted_7, toDisplayString(opt.description), 1)) : createCommentVNode("", true)
                             ]),
                             createVNode(unref(ComboboxItemIndicator), { class: "flex shrink-0 items-center text-brand" }, {
                               default: withCtx(() => [

package/dist/chunks/{LpSidebar-ClBUwoEz.js → LpSidebar-BgwUNWpJ.js}

@@ -1,21 +1,23 @@
-import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, normalizeClass, renderSlot, createCommentVNode, createBlock, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
-import { _ as _sfc_main$3 } from "./LpDrawer-BZ6k3hvo.js";
-import { _ as _sfc_main$1 } from "./LpInput-9EXWUM9B.js";
-import { _ as _sfc_main$2 } from "./LpSidebarNav-llOcs_Fn.js";
-const _hoisted_1 = {
+import { defineComponent, computed, ref, useId, openBlock, createElementBlock, Fragment, createElementVNode, mergeProps, unref, normalizeClass, renderSlot, createCommentVNode, createBlock, createVNode, createSlots, withCtx, normalizeProps, guardReactiveProps } from "vue";
+import { useLabels } from "../composables/useLpConfig.js";
+import { _ as _sfc_main$3 } from "./LpDrawer-bScx-KMO.js";
+import { _ as _sfc_main$1 } from "./LpInput-C0e8y8_d.js";
+import { _ as _sfc_main$2 } from "./LpSidebarNav-Bqxz8aWT.js";
+const _hoisted_1 = ["aria-label"];
+const _hoisted_2 = {
   key: 2,
   class: "mt-2 flex shrink-0 flex-col gap-2"
 };
-const _hoisted_2 = {
+const _hoisted_3 = {
   key: 3,
   class: "mt-2 shrink-0 border-t border-line pt-3"
 };
-const _hoisted_3 = { class: "flex h-full flex-col gap-1" };
-const _hoisted_4 = {
+const _hoisted_4 = ["aria-label"];
+const _hoisted_5 = {
   key: 2,
   class: "mt-2 flex shrink-0 flex-col gap-2"
 };
-const _hoisted_5 = {
+const _hoisted_6 = {
   key: 3,
   class: "mt-2 shrink-0 border-t border-line pt-3"
 };
@@ -28,7 +30,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     sections: {},
     isActive: {},
     searchable: { type: Boolean },
-    searchPlaceholder: { default: "Search" },
+    searchPlaceholder: {},
+    labels: {},
     search: {},
     loading: { type: Boolean },
     skeletonRows: { default: 6 },
@@ -47,6 +50,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const text = useLabels("sidebar", { nav: "Sidebar", search: "Search" }, () => props.labels);
+    const placeholder = computed(() => props.searchPlaceholder ?? text.value.search);
     const allGroups = computed(
       () => props.sections ?? (props.items ? [{ items: props.items }] : [])
     );
@@ -125,7 +130,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         createElementVNode("nav", mergeProps({
           class: ["h-full flex-col gap-1 p-3", [railClass.value, chromeClass.value, __props.width ? "" : "w-60"]],
           style: __props.width ? { width: __props.width } : void 0,
-          "aria-label": "Sidebar"
+          "aria-label": unref(text).nav
         }, _ctx.$attrs), [
           _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
             key: 0,
@@ -143,8 +148,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             size: "sm",
             icon: "lucide:search",
             class: "mb-2 shrink-0",
-            placeholder: __props.searchPlaceholder,
-            "aria-label": __props.searchPlaceholder
+            placeholder: placeholder.value,
+            "aria-label": placeholder.value
           }, null, 8, ["modelValue", "placeholder", "aria-label"])) : createCommentVNode("", true),
           createVNode(_sfc_main$2, {
             groups: groups.value,
@@ -165,13 +170,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               key: "0"
             } : void 0
           ]), 1032, ["groups", "loading", "skeleton-rows", "skeleton-header", "collapsed-keys"]),
-          _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_1, [
+          _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_2, [
             renderSlot(_ctx.$slots, "actions")
           ])) : createCommentVNode("", true),
-          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_2, [
+          _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_3, [
             renderSlot(_ctx.$slots, "footer")
           ])) : createCommentVNode("", true)
-        ], 16),
+        ], 16, _hoisted_1),
         __props.responsive ? (openBlock(), createBlock(_sfc_main$3, {
           key: 0,
           open: __props.open,
@@ -182,7 +187,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "onUpdate:open": _cache[2] || (_cache[2] = (v) => emit("update:open", v))
         }, {
           default: withCtx(() => [
-            createElementVNode("div", _hoisted_3, [
+            createElementVNode("nav", {
+              class: "flex h-full flex-col gap-1",
+              "aria-label": unref(text).nav
+            }, [
               _ctx.$slots.header ? (openBlock(), createElementBlock("div", {
                 key: 0,
                 class: normalizeClass(["shrink-0", __props.divider ? "mb-3 border-b border-line pb-3" : "mb-2"])
@@ -196,8 +204,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 size: "sm",
                 icon: "lucide:search",
                 class: "mb-2 shrink-0",
-                placeholder: __props.searchPlaceholder,
-                "aria-label": __props.searchPlaceholder
+                placeholder: placeholder.value,
+                "aria-label": placeholder.value
               }, null, 8, ["modelValue", "placeholder", "aria-label"])) : createCommentVNode("", true),
               createVNode(_sfc_main$2, {
                 groups: groups.value,
@@ -218,13 +226,13 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                   key: "0"
                 } : void 0
               ]), 1032, ["groups", "loading", "skeleton-rows", "skeleton-header", "collapsed-keys"]),
-              _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_4, [
+              _ctx.$slots.actions ? (openBlock(), createElementBlock("div", _hoisted_5, [
                 renderSlot(_ctx.$slots, "actions")
               ])) : createCommentVNode("", true),
-              _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_5, [
+              _ctx.$slots.footer ? (openBlock(), createElementBlock("div", _hoisted_6, [
                 renderSlot(_ctx.$slots, "footer")
               ])) : createCommentVNode("", true)
-            ])
+            ], 8, _hoisted_4)
           ]),
           _: 3
         }, 8, ["open", "edge-open", "edge-breakpoint"])) : createCommentVNode("", true)

package/dist/chunks/{LpSidebarNav-llOcs_Fn.js → LpSidebarNav-Bqxz8aWT.js}

@@ -3,9 +3,11 @@ import { Motion } from "motion-v";
 import { CollapsibleRoot, CollapsibleTrigger, CollapsibleContent } from "reka-ui";
 import { usePillTransition } from "../composables/usePillTransition.js";
 import { _ as _sfc_main$3 } from "./LpBadge-Fe0D1bYx.js";
-import { _ as _sfc_main$4 } from "./LpContextMenu-CwW1QXe_.js";
+import { _ as _sfc_main$4 } from "./LpContextMenu-DQw5dGfG.js";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
 import { _ as _sfc_main$1 } from "./LpScrollArea-D8xyKXcF.js";
+import { resolveLink } from "../components/link.js";
+import { useLinkComponent } from "../composables/useLpConfig.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
   key: 0,
@@ -50,6 +52,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return !foldedKeys.value.has(sectionKey(section));
     }
     const pillTransition = usePillTransition();
+    const linkComponent = useLinkComponent();
+    function rowOf(item) {
+      const link = item.disabled ? null : resolveLink(linkComponent.value, { to: item.to, href: item.href });
+      if (link) return link;
+      return { is: "button", props: { type: "button", disabled: item.disabled || void 0 } };
+    }
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "flex min-h-0 flex-1 flex-col gap-4"
     );
@@ -91,7 +99,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               default: withCtx(() => [
                 section.title && section.collapsible ? (openBlock(), createBlock(unref(CollapsibleTrigger), {
                   key: 0,
-                  class: "group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-white/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
+                  class: "group/section mt-2 flex cursor-pointer items-center gap-2 rounded-control px-2 py-1 text-[11px] font-semibold uppercase tracking-[0.08em] text-muted outline-none transition-colors duration-[var(--duration-fast)] hover:bg-ink/[0.04] hover:text-ink focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring"
                 }, {
                   default: withCtx(() => [
                     section.icon ? (openBlock(), createBlock(_sfc_main$2, {
@@ -127,15 +135,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                         items: item.menu ?? []
                       }, {
                         default: withCtx(() => [
-                          (openBlock(), createBlock(resolveDynamicComponent(item.href && !item.disabled ? "a" : "button"), {
-                            href: item.href && !item.disabled ? item.href : void 0,
-                            type: item.href ? void 0 : "button",
-                            disabled: item.href ? void 0 : item.disabled,
+                          (openBlock(), createBlock(resolveDynamicComponent(rowOf(item).is), mergeProps({ ref_for: true }, rowOf(item).props, {
                             "aria-current": __props.itemActive(item) ? "page" : void 0,
                             "aria-disabled": item.disabled || void 0,
-                            class: normalizeClass(["group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", item.disabled ? "cursor-not-allowed text-muted/50" : __props.itemActive(item) ? "text-ink" : "text-muted hover:text-ink"]),
+                            class: ["group/item relative flex items-center gap-3 rounded-control px-3 py-2 text-sm font-medium outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-ring", item.disabled ? "cursor-not-allowed text-muted/50" : __props.itemActive(item) ? "text-ink" : "text-muted hover:text-ink"],
                             onClick: ($event) => emit("activate", item)
-                          }, {
+                          }), {
                             default: withCtx(() => [
                               __props.itemActive(item) ? (openBlock(), createBlock(unref(Motion), {
                                 key: 0,
@@ -167,7 +172,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                               ])
                             ]),
                             _: 2
-                          }, 1032, ["href", "type", "disabled", "aria-current", "aria-disabled", "class", "onClick"]))
+                          }, 1040, ["aria-current", "aria-disabled", "class", "onClick"]))
                         ]),
                         _: 2
                       }, 1032, ["items"]);

package/dist/chunks/{LpSkeleton-CTI-vBgW.js → LpSkeleton-BB6XIV-w.js}

@@ -1,5 +1,5 @@
 import { defineComponent, useSlots, computed, openBlock, createElementBlock, normalizeClass, renderSlot } from "vue";
-import '../assets/LpSkeleton-D7xU8IPV.css';const _sfc_main = /* @__PURE__ */ defineComponent({
+import '../assets/LpSkeleton-H3Z5dEIk.css';const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpSkeleton",
   props: {
     rounded: {}

package/dist/chunks/{LpSlider-BwNIBkAK.js → LpSlider-Cuzmrd7p.js}

@@ -1,5 +1,6 @@
 import { defineComponent, openBlock, createBlock, unref, mergeProps, withCtx, createVNode } from "vue";
 import { SliderRoot, SliderTrack, SliderRange, SliderThumb } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -23,6 +24,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     function onCommit(v) {
       if (v && v.length) emit("change", v[0]);
     }
+    const field = useFieldControl(() => ({ wrapped: false, disabled: props.disabled }));
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "relative flex h-5 w-full touch-none select-none items-center data-[disabled]:opacity-55"
     );
@@ -32,7 +34,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         min: __props.min,
         max: __props.max,
         step: __props.step,
-        disabled: __props.disabled,
+        disabled: unref(field).disabled,
         class: unref(rootClass)
       }, unref(rest), {
         "onUpdate:modelValue": onUpdate,
@@ -46,9 +48,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             _: 1
           }),
           createVNode(unref(SliderThumb), {
+            id: unref(field).id,
             "aria-label": __props.ariaLabel,
+            "aria-labelledby": __props.ariaLabel ? void 0 : unref(field).labelId,
+            "aria-describedby": unref(field).describedBy,
             class: "block size-4 rounded-pill border-2 border-brand bg-surface shadow outline-none transition-transform duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] hover:scale-110 active:scale-95 focus-visible:ring-2 focus-visible:ring-ring motion-reduce:hover:scale-100 motion-reduce:active:scale-100"
-          }, null, 8, ["aria-label"])
+          }, null, 8, ["id", "aria-label", "aria-labelledby", "aria-describedby"])
         ]),
         _: 1
       }, 16, ["model-value", "min", "max", "step", "disabled", "class"]);

package/dist/chunks/{LpSparkline-C6xQ2dwv.js → LpSparkline-CB80N8SJ.js}

@@ -1,5 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, createCommentVNode, normalizeStyle, normalizeClass } from "vue";
 import { useReveal } from "../composables/useReveal.js";
+import { useLabels } from "../composables/useLpConfig.js";
 import { normalise, extent, linePath, areaPath } from "../components/chart.js";
 import '../assets/LpSparkline-0mKTq7pb.css';const _hoisted_1 = ["width", "height", "viewBox", "aria-label"];
 const _hoisted_2 = { key: 0 };
@@ -25,7 +26,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     max: {},
     ariaLabel: {},
     animate: { type: Boolean, default: true },
-    duration: { default: 900 }
+    duration: { default: 900 },
+    labels: {}
   },
   setup(__props) {
     const props = __props;
@@ -78,14 +80,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return null;
     });
     const hasData = computed(() => series.value[0].values.some((v) => v != null));
+    const text = useLabels(
+      "sparkline",
+      { empty: "No data", up: "trending up", down: "trending down", flat: "flat", latest: "latest" },
+      () => props.labels
+    );
     const label = computed(() => {
       if (props.ariaLabel) return props.ariaLabel;
       const values = series.value[0].values.filter((v) => v != null);
-      if (!values.length) return "No data";
+      if (!values.length) return text.value.empty;
       const first = values[0];
       const last = values[values.length - 1];
-      const dir = last > first ? "trending up" : last < first ? "trending down" : "flat";
-      return `${dir}, latest ${last}`;
+      const dir = last > first ? text.value.up : last < first ? text.value.down : text.value.flat;
+      return `${dir}, ${text.value.latest} ${last}`;
     });
     const pathLength = computed(() => {
       const n = Math.max(1, props.data.length - 1);

package/dist/chunks/{LpStat-CQaW8R--.js → LpStat-dXtyrdX9.js}

@@ -1,6 +1,6 @@
 import { defineComponent, computed, openBlock, createElementBlock, mergeProps, unref, createElementVNode, createCommentVNode, createBlock, toDisplayString, Fragment, createTextVNode, normalizeClass, createVNode, renderSlot } from "vue";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$2 } from "./LpNumberFlow-amWYaeuA.js";
+import { _ as _sfc_main$2 } from "./LpNumberFlow-z4WPZcZu.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = { class: "flex items-center gap-2" };
 const _hoisted_2 = {

package/dist/chunks/{LpSwitch-Blizvqyt.js → LpSwitch-B1aLKulj.js}

@@ -1,22 +1,15 @@
-import { defineComponent, useSlots, computed, openBlock, createElementBlock, mergeProps, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, normalizeClass, withCtx, createBlock } from "vue";
+import { defineComponent, useSlots, computed, useId, openBlock, createElementBlock, normalizeClass, unref, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, mergeProps, withCtx, createBlock } from "vue";
 import { SwitchRoot, SwitchThumb } from "reka-ui";
+import { useFieldControl } from "../composables/useField.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex min-w-0 flex-col"
 };
 const _hoisted_2 = {
-  key: 0,
-  class: "text-xs text-muted"
-};
-const _hoisted_3 = {
   key: 1,
   class: "flex min-w-0 flex-col"
 };
-const _hoisted_4 = {
-  key: 0,
-  class: "text-xs text-muted"
-};
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -40,52 +33,73 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       if (!labelled.value) return TRACK;
       return props.labelPosition === "start" ? "flex w-full cursor-pointer items-center justify-between gap-3 text-sm text-ink" : "inline-flex cursor-pointer items-center gap-2 text-sm text-ink";
     });
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      id: typeof rest.value.id === "string" ? rest.value.id : void 0,
+      disabled: props.disabled
+    }));
+    const descriptionId = `${useId()}-description`;
+    const describedBy = computed(
+      () => [props.description && labelled.value ? descriptionId : "", field.value.describedBy ?? ""].filter(Boolean).join(" ") || void 0
+    );
     function onUpdate(value) {
       emit("update:modelValue", value);
     }
     return (_ctx, _cache) => {
-      return labelled.value ? (openBlock(), createElementBlock("label", mergeProps({
+      return labelled.value ? (openBlock(), createElementBlock("label", {
         key: 0,
-        class: [unref(rootClass), __props.disabled && "cursor-not-allowed"]
-      }, unref(rest)), [
+        class: normalizeClass([unref(rootClass), unref(field).disabled && "cursor-not-allowed"])
+      }, [
         __props.labelPosition === "start" ? (openBlock(), createElementBlock("span", _hoisted_1, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ]),
-          __props.description ? (openBlock(), createElementBlock("span", _hoisted_2, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+          __props.description ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            id: descriptionId,
+            class: "text-xs text-muted"
+          }, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true),
-        createVNode(unref(SwitchRoot), {
+        createVNode(unref(SwitchRoot), mergeProps(unref(rest), {
+          id: unref(field).id,
           "model-value": __props.modelValue,
-          disabled: __props.disabled,
-          class: normalizeClass(TRACK),
+          disabled: unref(field).disabled,
+          "aria-describedby": describedBy.value,
+          class: TRACK,
           "onUpdate:modelValue": onUpdate
-        }, {
+        }), {
           default: withCtx(() => [
             createVNode(unref(SwitchThumb), {
               class: normalizeClass(THUMB)
             })
           ]),
           _: 1
-        }, 8, ["model-value", "disabled"]),
-        __props.labelPosition === "end" ? (openBlock(), createElementBlock("span", _hoisted_3, [
+        }, 16, ["id", "model-value", "disabled", "aria-describedby"]),
+        __props.labelPosition === "end" ? (openBlock(), createElementBlock("span", _hoisted_2, [
           renderSlot(_ctx.$slots, "default", {}, () => [
             createTextVNode(toDisplayString(__props.label), 1)
           ]),
-          __props.description ? (openBlock(), createElementBlock("span", _hoisted_4, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
+          __props.description ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            id: descriptionId,
+            class: "text-xs text-muted"
+          }, toDisplayString(__props.description), 1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
-      ], 16)) : (openBlock(), createBlock(unref(SwitchRoot), mergeProps({
-        key: 1,
+      ], 2)) : (openBlock(), createBlock(unref(SwitchRoot), mergeProps({ key: 1 }, unref(rest), {
+        id: unref(field).id,
         "model-value": __props.modelValue,
-        disabled: __props.disabled,
-        class: unref(rootClass)
-      }, unref(rest), { "onUpdate:modelValue": onUpdate }), {
+        disabled: unref(field).disabled,
+        "aria-describedby": describedBy.value,
+        class: unref(rootClass),
+        "onUpdate:modelValue": onUpdate
+      }), {
         default: withCtx(() => [
           createVNode(unref(SwitchThumb), {
             class: normalizeClass(THUMB)
           })
         ]),
         _: 1
-      }, 16, ["model-value", "disabled", "class"]));
+      }, 16, ["id", "model-value", "disabled", "aria-describedby", "class"]));
     };
   }
 });