@leavepulse/ui 0.43.4 → 0.45.0

package/dist/chunks/LpPhoneInput-BCbrrhgE.js

@@ -0,0 +1,336 @@
+import { defineComponent, ref, computed, shallowRef, onMounted, useAttrs, openBlock, createElementBlock, normalizeStyle, unref, normalizeClass, createVNode, withCtx, createElementVNode, toDisplayString, createTextVNode, Fragment, renderList, createBlock, withModifiers, mergeProps, createCommentVNode } from "vue";
+import { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, ComboboxPortal, ComboboxContent, ComboboxInput, ComboboxViewport, ComboboxEmpty, ComboboxItem } from "reka-ui";
+import { useField, useFieldControl } from "../composables/useField.js";
+import { useFieldNotice } from "../composables/useFieldNotice.js";
+import { useInputFilter } from "../composables/useInputFilter.js";
+import { useLabels } from "../composables/useLpConfig.js";
+import { matchCountryByValue, filterCountries, loadCountries, flagEmoji } from "../components/countries.js";
+import { POPOVER_PANEL, OPTION_ITEM } from "../components/dropdown.js";
+import { _ as _sfc_main$2 } from "./LpFieldNotice-wtieLUTj.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { loadPhoneLib, formatPhone, loadPhoneExamples, digitsBefore, caretAfterDigits, digitsOf } from "../components/phone.js";
+import { useMergedAttrs } from "../composables/useMergedClass.js";
+const _hoisted_1 = { class: "text-base leading-none" };
+const _hoisted_2 = { class: "border-b border-line p-2" };
+const _hoisted_3 = { class: "text-base leading-none" };
+const _hoisted_4 = { class: "min-w-0 flex-1 truncate" };
+const _hoisted_5 = { class: "shrink-0 text-xs text-muted" };
+const _hoisted_6 = ["id", "value", "placeholder", "disabled", "required", "aria-invalid", "aria-describedby"];
+const __default__ = { inheritAttrs: false };
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  ...__default__,
+  __name: "LpPhoneInput",
+  props: {
+    modelValue: {},
+    only: {},
+    defaultCountry: {},
+    placeholder: { default: void 0 },
+    disabled: { type: Boolean },
+    invalid: { type: Boolean },
+    size: { default: "md" },
+    emptyText: { default: "No country" },
+    searchPlaceholder: { default: "Search country…" }
+  },
+  emits: ["update:modelValue", "change"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const PHONE_CHARS = /[\d+()\-\s]/;
+    const { onBeforeInput, onInput: filterInput, onCompositionEnd, onPaste } = useInputFilter({
+      restrict: () => PHONE_CHARS
+    });
+    const allCountries = ref([]);
+    const countries = computed(() => {
+      if (!props.only?.length) return allCountries.value;
+      const set = new Set(props.only.map((c) => c.toUpperCase()));
+      return allCountries.value.filter((c) => set.has(c.iso2));
+    });
+    const fallback = computed(() => {
+      const iso = props.defaultCountry?.toUpperCase();
+      return iso ? countries.value.find((c) => c.iso2 === iso) : void 0;
+    });
+    const activeCountry = computed(
+      () => matchCountryByValue(props.modelValue ?? "", countries.value) ?? fallback.value
+    );
+    const open = ref(false);
+    const query = ref("");
+    const filtered = computed(() => filterCountries(countries.value, query.value));
+    const phoneLib = shallowRef();
+    function parse(value) {
+      const formatted = formatPhone(value, phoneLib.value);
+      const country = (formatted.country && countries.value.find((c) => c.iso2 === formatted.country)) ?? matchCountryByValue(value, countries.value);
+      const digits = digitsOf(formatted.e164);
+      const base = { e164: formatted.e164, possible: formatted.possible, valid: formatted.valid, type: formatted.type };
+      if (country) return { ...base, country, dialCode: country.dial, number: digits.slice(country.dial.length) };
+      return { ...base, country: void 0, dialCode: "", number: digits };
+    }
+    function setValue(value) {
+      emit("update:modelValue", value);
+      emit("change", parse(value));
+    }
+    const notice = useFieldNotice();
+    const outerField = useField();
+    const ownNotice = computed(() => !outerField?.value.notify);
+    function say(message, options) {
+      if (outerField?.value.notify) outerField.value.notify(message, options);
+      else notice.show(message, options);
+    }
+    function unsay() {
+      if (outerField?.value.clearNotice) outerField.value.clearNotice();
+      else notice.clear();
+    }
+    const flagged = ref(false);
+    const countryName = (iso) => iso && countries.value.find((c) => c.iso2 === iso)?.name || "";
+    function onInput(e) {
+      filterInput(e);
+      const el = e.target;
+      const before = digitsBefore(el.value, el.selectionStart ?? el.value.length);
+      const result = formatPhone(el.value, phoneLib.value);
+      if (el.value !== result.display) {
+        el.value = result.display;
+        const caret = caretAfterDigits(result.display, Math.min(before, digitsOf(result.display).length));
+        el.setSelectionRange(caret, caret);
+      }
+      if (flagged.value) {
+        flagged.value = false;
+        unsay();
+      }
+      if (result.dropped) {
+        const name = countryName(result.country);
+        say(
+          (name ? text.value.tooLongFor : text.value.tooLong).replace("{country}", name).replace("{max}", String(digitsOf(result.e164).length - (result.callingCode?.length ?? 0)))
+        );
+      }
+      setValue(result.display);
+    }
+    function onKeyEdit(e) {
+      const el = e.target;
+      const start = el.selectionStart ?? 0;
+      const end = el.selectionEnd ?? 0;
+      const backward = e.inputType === "deleteContentBackward";
+      const forward = e.inputType === "deleteContentForward";
+      if (!backward && !forward || start !== end) return;
+      const value = el.value;
+      const at = backward ? start - 1 : start;
+      if (at < 0 || at >= value.length || /\d/.test(value[at])) return;
+      let i = at;
+      while (i >= 0 && i < value.length && !/\d/.test(value[i])) i += backward ? -1 : 1;
+      if (i < 0 || i >= value.length) return;
+      e.preventDefault();
+      el.value = value.slice(0, i) + value.slice(i + 1);
+      const caret = backward ? i : start;
+      el.setSelectionRange(caret, caret);
+      el.dispatchEvent(new Event("input", { bubbles: true }));
+    }
+    function onBeforeEdit(e) {
+      onKeyEdit(e);
+      if (!e.defaultPrevented) onBeforeInput(e);
+    }
+    function chooseCountry(c) {
+      const detail = parse(props.modelValue ?? "");
+      const national = detail.number;
+      setValue(`+${c.dial}${national ? " " + national : ""}`);
+      open.value = false;
+      query.value = "";
+    }
+    onMounted(async () => {
+      const [list, phone] = await Promise.all([loadCountries(), loadPhoneLib().catch(() => void 0)]);
+      allCountries.value = list;
+      phoneLib.value = phone;
+      if (phone && props.modelValue) {
+        const display = formatPhone(props.modelValue, phone).display;
+        if (display !== props.modelValue) setValue(display);
+      }
+      if (props.placeholder === void 0) examplesFor.value = await loadPhoneExamples().catch(() => void 0);
+    });
+    const examplesFor = shallowRef();
+    const shownPlaceholder = computed(() => {
+      if (props.placeholder !== void 0) return props.placeholder;
+      const phone = phoneLib.value;
+      const iso = activeCountry.value?.iso2;
+      if (phone && examplesFor.value && iso) {
+        try {
+          return phone.getExampleNumber(iso, examplesFor.value)?.formatInternational() ?? text.value.placeholder;
+        } catch {
+          return text.value.placeholder;
+        }
+      }
+      return text.value.placeholder;
+    });
+    const seeded = computed(() => fallback.value ? `+${fallback.value.dial} ` : "");
+    function onFocus() {
+      if (!props.modelValue && seeded.value) setValue(seeded.value);
+    }
+    function onBlur() {
+      if (seeded.value && props.modelValue?.trim() === seeded.value.trim()) {
+        setValue("");
+        return;
+      }
+      const result = phoneLib.value && props.modelValue ? formatPhone(props.modelValue, phoneLib.value) : void 0;
+      if (!result || result.valid || digitsOf(result.e164).length <= (activeCountry.value?.dial.length ?? 0)) return;
+      flagged.value = true;
+      const name = countryName(result.country) || activeCountry.value?.name || "";
+      const reason = result.problem === "too-short" ? name ? text.value.tooShortFor : text.value.tooShort : result.problem === "invalid-country" ? text.value.unknownCountry : text.value.invalidNumber;
+      say(reason.replace("{country}", name), { tone: "danger", duration: 0 });
+    }
+    const sizeClass = {
+      sm: "h-(--size-control-sm) text-xs",
+      md: "h-(--size-control-md) text-sm",
+      lg: "h-(--size-control-lg) text-sm"
+    };
+    const attrs = useAttrs();
+    const field = useFieldControl(() => ({
+      wrapped: false,
+      id: typeof attrs.id === "string" ? attrs.id : void 0,
+      invalid: props.invalid || flagged.value,
+      disabled: props.disabled
+    }));
+    const text = useLabels("phoneInput", {
+      selectCountry: "Select country",
+      placeholder: "Phone number",
+      tooLong: "A phone number has at most {max} digits",
+      tooLongFor: "Numbers in {country} have at most {max} digits after the code",
+      tooShort: "This number is too short",
+      tooShortFor: "Too short for {country}",
+      invalidNumber: "Not a valid phone number",
+      unknownCountry: "Unknown country code"
+    });
+    const noticeId = `${field.value.id ?? "lp-phone"}-notice`;
+    const { class: rootClass, attrs: rest } = useMergedAttrs(
+      () => [
+        "relative flex w-full items-stretch rounded-control border bg-surface-soft text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring",
+        sizeClass[props.size],
+        field.value.invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand",
+        field.value.disabled ? "cursor-not-allowed opacity-55" : ""
+      ].join(" ")
+    );
+    const inputAttrs = computed(() => {
+      const { style: _s, ...others } = rest.value;
+      return others;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        "data-lp-ring-owner": "",
+        class: normalizeClass(unref(rootClass)),
+        style: normalizeStyle(unref(attrs).style)
+      }, [
+        createVNode(unref(ComboboxRoot), {
+          open: open.value,
+          "onUpdate:open": _cache[1] || (_cache[1] = ($event) => open.value = $event),
+          "ignore-filter": true,
+          "reset-search-term-on-select": false,
+          "reset-search-term-on-blur": false,
+          disabled: unref(field).disabled,
+          class: "flex"
+        }, {
+          default: withCtx(() => [
+            createVNode(unref(ComboboxAnchor), { "as-child": "" }, {
+              default: withCtx(() => [
+                createVNode(unref(ComboboxTrigger), {
+                  type: "button",
+                  disabled: unref(field).disabled,
+                  class: "flex shrink-0 items-center gap-1 rounded-l-control border-r border-line px-2.5 outline-none hover:bg-ink/5 data-[state=open]:bg-ink/5",
+                  "aria-label": unref(text).selectCountry
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("span", _hoisted_1, toDisplayString(activeCountry.value ? unref(flagEmoji)(activeCountry.value.iso2) : "🌐"), 1),
+                    createVNode(_sfc_main$1, {
+                      name: "lucide:chevron-down",
+                      size: 14,
+                      class: "text-muted transition-transform data-[state=open]:rotate-180"
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["disabled", "aria-label"])
+              ]),
+              _: 1
+            }),
+            createVNode(unref(ComboboxPortal), null, {
+              default: withCtx(() => [
+                createVNode(unref(ComboboxContent), {
+                  "collision-padding": 8,
+                  position: "popper",
+                  align: "start",
+                  "side-offset": 6,
+                  class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) max-h-72 w-72 overflow-hidden"])
+                }, {
+                  default: withCtx(() => [
+                    createElementVNode("div", _hoisted_2, [
+                      createVNode(unref(ComboboxInput), {
+                        "model-value": query.value,
+                        placeholder: __props.searchPlaceholder,
+                        "auto-focus": "",
+                        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",
+                        onInput: _cache[0] || (_cache[0] = ($event) => query.value = $event.target.value)
+                      }, null, 8, ["model-value", "placeholder"])
+                    ]),
+                    createVNode(unref(ComboboxViewport), { class: "max-h-56 overflow-y-auto p-1" }, {
+                      default: withCtx(() => [
+                        createVNode(unref(ComboboxEmpty), { class: "px-3 py-4 text-center text-sm italic text-muted" }, {
+                          default: withCtx(() => [
+                            createTextVNode(toDisplayString(__props.emptyText), 1)
+                          ]),
+                          _: 1
+                        }),
+                        (openBlock(true), createElementBlock(Fragment, null, renderList(filtered.value, (c, i) => {
+                          return openBlock(), createBlock(unref(ComboboxItem), {
+                            key: c.iso2,
+                            value: c.iso2,
+                            style: normalizeStyle({ animationDelay: `${Math.min(i, 12) * 22}ms` }),
+                            class: normalizeClass([unref(OPTION_ITEM), "gap-2.5"]),
+                            onSelect: withModifiers(($event) => chooseCountry(c), ["prevent"])
+                          }, {
+                            default: withCtx(() => [
+                              createElementVNode("span", _hoisted_3, toDisplayString(unref(flagEmoji)(c.iso2)), 1),
+                              createElementVNode("span", _hoisted_4, toDisplayString(c.name), 1),
+                              createElementVNode("span", _hoisted_5, "+" + toDisplayString(c.dial), 1)
+                            ]),
+                            _: 2
+                          }, 1032, ["value", "style", "class", "onSelect"]);
+                        }), 128))
+                      ]),
+                      _: 1
+                    })
+                  ]),
+                  _: 1
+                }, 8, ["class"])
+              ]),
+              _: 1
+            })
+          ]),
+          _: 1
+        }, 8, ["open", "disabled"]),
+        createElementVNode("input", mergeProps({
+          type: "tel",
+          inputmode: "tel",
+          autocomplete: "tel"
+        }, inputAttrs.value, {
+          id: unref(field).id,
+          value: __props.modelValue,
+          placeholder: shownPlaceholder.value,
+          disabled: unref(field).disabled,
+          required: unref(field).required || void 0,
+          "aria-invalid": unref(field).invalid || void 0,
+          "aria-describedby": [unref(field).describedBy, unref(notice).message.value ? noticeId : ""].filter(Boolean).join(" ") || void 0,
+          class: "lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted",
+          onBeforeinput: onBeforeEdit,
+          onPaste: _cache[2] || (_cache[2] = //@ts-ignore
+          (...args) => unref(onPaste) && unref(onPaste)(...args)),
+          onCompositionend: _cache[3] || (_cache[3] = //@ts-ignore
+          (...args) => unref(onCompositionEnd) && unref(onCompositionEnd)(...args)),
+          onInput,
+          onFocus,
+          onBlur
+        }), null, 16, _hoisted_6),
+        ownNotice.value ? (openBlock(), createBlock(_sfc_main$2, {
+          key: 0,
+          notice: unref(notice),
+          id: noticeId
+        }, null, 8, ["notice"])) : createCommentVNode("", true)
+      ], 6);
+    };
+  }
+});
+export {
+  _sfc_main as _
+};

package/dist/chunks/{LpPie-D6OnzwlJ.js → LpPie-BEJ2SfI6.js}

@@ -2,13 +2,14 @@ import { defineComponent, computed, ref, watch, onBeforeUnmount, openBlock, crea
 import { prefersReducedMotion, easeTravel } from "../composables/easing.js";
 import { useReveal } from "../composables/useReveal.js";
 import { resolveSlices, arcPath, calloutLabels, formatTick } from "../components/chart.js";
-import { _ as _sfc_main$2 } from "./LpContextMenu-CwW1QXe_.js";
-import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$4 } from "./LpNumberFlow-amWYaeuA.js";
-import { _ as _sfc_main$5 } from "./LpRollingText-CM5gkSeF.js";
+import { _ as _sfc_main$2 } from "./LpContextMenu-BqkAYa9X.js";
+import { _ as _sfc_main$1 } from "./LpIcon-DYtaid0K.js";
+import { _ as _sfc_main$4 } from "./LpNumberFlow-z4WPZcZu.js";
+import { _ as _sfc_main$5 } from "./LpRollingText-DB7upf-5.js";
 import { _ as _sfc_main$6 } from "./LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$3 } from "./LpTooltip-hCLPAqMG.js";
+import { _ as _sfc_main$3 } from "./LpTooltip-CXVKcOXT.js";
 import { useMergedAttrs } from "../composables/useMergedClass.js";
+import { useLabels } from "../composables/useLpConfig.js";
 const _hoisted_1 = {
   key: 0,
   class: "flex flex-col gap-0.5"
@@ -24,7 +25,7 @@ const _hoisted_3 = {
 const _hoisted_4 = { class: "text-xs" };
 const _hoisted_5 = { class: "flex flex-wrap items-start gap-x-6 gap-y-3" };
 const _hoisted_6 = { class: "flex items-center gap-1.5" };
-const _hoisted_7 = ["width", "height"];
+const _hoisted_7 = ["viewBox", "aria-label"];
 const _hoisted_8 = { key: 0 };
 const _hoisted_9 = ["id"];
 const _hoisted_10 = ["d"];
@@ -39,13 +40,19 @@ const _hoisted_18 = {
   key: 0,
   class: "pointer-events-none absolute inset-0 flex flex-col items-center justify-center text-center"
 };
-const _hoisted_19 = ["aria-pressed", "onPointerenter", "onPointerleave", "onPointerdown", "onContextmenu"];
+const _hoisted_19 = ["aria-pressed", "onPointerenter", "onPointerleave", "onPointerdown", "onClick", "onFocus", "onBlur", "onContextmenu"];
 const _hoisted_20 = { class: "truncate text-muted-strong group-hover:text-ink" };
 const _hoisted_21 = {
   key: 0,
   class: "shrink-0 text-muted"
 };
 const _hoisted_22 = { class: "ml-auto shrink-0 pl-2 font-mono tabular-nums text-muted" };
+const _hoisted_23 = {
+  key: 3,
+  class: "sr-only"
+};
+const _hoisted_24 = { key: 0 };
+const _hoisted_25 = { scope: "row" };
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({
   ...__default__,
@@ -58,7 +65,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     title: {},
     subtitle: {},
     maxSlices: { default: 6 },
-    otherLabel: { default: "Other" },
+    otherLabel: {},
     sortBySize: { type: Boolean },
     unit: {},
     formatValue: {},
@@ -73,17 +80,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     animate: { type: Boolean, default: true },
     duration: { default: 900 },
     menuItems: {},
-    emptyLabel: { default: "No data" }
+    emptyLabel: {},
+    ariaLabel: {},
+    dataTable: { type: Boolean, default: false },
+    text: {}
   },
   emits: ["sliceClick", "selectionChange", "sliceContextMenu"],
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emit = __emit;
+    const strings = useLabels(
+      "pie",
+      { empty: "No data", other: "Other", total: "total", selected: "{n} selected" },
+      () => props.text
+    );
     const resolved = computed(
       () => resolveSlices(
         props.slices,
         props.maxSlices || void 0,
-        props.otherLabel,
+        props.otherLabel ?? strings.value.other,
         !props.sortBySize
       )
     );
@@ -193,6 +208,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const anchor = ref(-1);
     const dragging = ref(false);
     const isSelected = (i) => selected.value.has(i);
+    watch(
+      () => arcs.value.length,
+      (n) => {
+        if (active.value >= n) active.value = -1;
+        if (anchor.value >= n) anchor.value = -1;
+        if ([...selected.value].some((i) => i >= n)) {
+          selected.value = new Set([...selected.value].filter((i) => i < n));
+          emitSelection();
+        }
+      }
+    );
     const payloadFor = (i) => {
       const a = arcs.value[i];
       return { index: i, label: a.label, value: a.value, isOther: a.isOther };
@@ -208,7 +234,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       for (let k = lo; k <= hi; k++) next.add(k);
       return next;
     };
-    const onSlicePointerDown = (i, e) => {
+    const onSlicePointerDown = (i, e, drag = true) => {
       if (e.button === 2) return;
       if (e.shiftKey) {
         selected.value = rangeTo(i);
@@ -222,11 +248,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const only = selected.value.size === 1 && selected.value.has(i);
         selected.value = only ? /* @__PURE__ */ new Set() : /* @__PURE__ */ new Set([i]);
         anchor.value = only ? -1 : i;
-        if (!only) beginDrag();
+        if (!only && drag) beginDrag();
       }
       emitSelection();
       emit("sliceClick", payloadFor(i));
     };
+    const onLegendClick = (i, e) => {
+      if (e.detail === 0) onSlicePointerDown(i, e, false);
+    };
     const onSlicePointerEnter = (i) => {
       clearTimeout(leaveTimer);
       active.value = i;
@@ -299,15 +328,17 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       emit("sliceContextMenu", menuPoint.value);
     };
     const focused = computed(() => {
-      if (active.value >= 0) return active.value;
-      return selected.value.size === 1 ? [...selected.value][0] : -1;
+      const n = arcs.value.length;
+      if (active.value >= 0 && active.value < n) return active.value;
+      const only = selected.value.size === 1 ? [...selected.value][0] : -1;
+      return only < n ? only : -1;
     });
     const dimmed = (i) => selected.value.size > 0 && !selected.value.has(i);
     const total = computed(() => resolved.value.total);
     const selectedArcs = computed(
-      () => [...selected.value].sort((x, y) => x - y).map((i) => arcs.value[i])
+      () => [...selected.value].sort((x, y) => x - y).filter((i) => i < arcs.value.length).map((i) => arcs.value[i])
     );
-    const hovered = computed(() => active.value >= 0 ? arcs.value[active.value] : null);
+    const hovered = computed(() => arcs.value[active.value] ?? null);
     const tipSlice = ref(null);
     watch(hovered, (v) => {
       if (v) tipSlice.value = v;
@@ -320,9 +351,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     });
     const centreLabel = computed(() => {
       if (focused.value >= 0) return arcs.value[focused.value].label;
-      if (selected.value.size > 1) return `${selected.value.size} selected`;
-      return "total";
+      if (selected.value.size > 1)
+        return strings.value.selected.replace("{n}", String(selected.value.size));
+      return strings.value.total;
     });
+    const summary = computed(
+      () => props.ariaLabel ?? [
+        props.title,
+        ...arcs.value.map((a) => `${a.label}: ${fmt(a.value)} (${pct(a.fraction)})`)
+      ].filter(Boolean).join(", ")
+    );
     const { class: rootClass, attrs: rest } = useMergedAttrs(
       "flex flex-col gap-3"
     );
@@ -345,7 +383,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             name: "lucide:chart-pie",
             size: 18
           }),
-          createElementVNode("span", _hoisted_4, toDisplayString(__props.emptyLabel), 1)
+          createElementVNode("span", _hoisted_4, toDisplayString(__props.emptyLabel ?? unref(strings).empty), 1)
         ], 4)) : (openBlock(), createBlock(_sfc_main$2, {
           key: 2,
           items: menuEntries.value,
@@ -396,13 +434,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 ]),
                 default: withCtx(() => [
                   createElementVNode("div", {
-                    class: "relative shrink-0",
-                    style: normalizeStyle({ width: `${canvasWidth.value}px`, height: `${canvasHeight.value}px` })
+                    class: "relative max-w-full shrink-0 max-sm:mx-auto",
+                    style: normalizeStyle({ width: `${canvasWidth.value}px`, aspectRatio: `${canvasWidth.value} / ${canvasHeight.value}` })
                   }, [
                     (openBlock(), createElementBlock("svg", {
-                      width: canvasWidth.value,
-                      height: canvasHeight.value,
-                      class: "touch-none select-none",
+                      viewBox: `0 0 ${canvasWidth.value} ${canvasHeight.value}`,
+                      class: "block size-full touch-none select-none",
+                      role: "img",
+                      "aria-label": summary.value,
                       onPointerleave: leaveChart,
                       onPointerup: endDrag,
                       onClick: withModifiers(clearSelection, ["self"])
@@ -419,7 +458,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       }, [
                         (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
                           return openBlock(), createElementBlock("path", {
-                            key: a.label,
+                            key: `${i}-${a.label}`,
                             d: a.d,
                             fill: a.color,
                             class: "pointer-events-none transition-[transform,opacity] duration-medium ease-[var(--ease-emphasized)] motion-reduce:transition-none",
@@ -430,7 +469,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                       ], 8, _hoisted_11),
                       (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
                         return openBlock(), createElementBlock("path", {
-                          key: `hit-${a.label}`,
+                          key: `hit-${i}-${a.label}`,
                           d: a.d,
                           fill: "transparent",
                           class: "cursor-pointer",
@@ -499,13 +538,16 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               }, [
                 (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
                   return openBlock(), createElementBlock("button", {
-                    key: a.label,
+                    key: `${i}-${a.label}`,
                     type: "button",
                     class: normalizeClass(["group flex cursor-pointer items-center gap-2 rounded-md px-1 py-0.5 text-xs outline-none transition-[opacity,background-color] duration-fast focus-visible:ring-2 focus-visible:ring-ring", [dimmed(i) ? "opacity-45" : "", isSelected(i) ? "bg-surface-soft" : ""]]),
                     "aria-pressed": isSelected(i),
                     onPointerenter: ($event) => onSlicePointerEnter(i),
                     onPointerleave: ($event) => onSlicePointerLeave(i),
                     onPointerdown: ($event) => onSlicePointerDown(i, $event),
+                    onClick: ($event) => onLegendClick(i, $event),
+                    onFocus: ($event) => active.value = i,
+                    onBlur: ($event) => active.value === i && (active.value = -1),
                     onContextmenu: ($event) => onSliceContextMenu(i)
                   }, [
                     createElementVNode("span", {
@@ -521,7 +563,21 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ])
           ]),
           _: 3
-        }, 8, ["items", "always"]))
+        }, 8, ["items", "always"])),
+        __props.dataTable && hasData.value ? (openBlock(), createElementBlock("table", _hoisted_23, [
+          __props.title ? (openBlock(), createElementBlock("caption", _hoisted_24, toDisplayString(__props.title), 1)) : createCommentVNode("", true),
+          createElementVNode("tbody", null, [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(arcs.value, (a, i) => {
+              return openBlock(), createElementBlock("tr", {
+                key: `${i}-${a.label}`
+              }, [
+                createElementVNode("th", _hoisted_25, toDisplayString(a.label), 1),
+                createElementVNode("td", null, toDisplayString(fmt(a.value)), 1),
+                createElementVNode("td", null, toDisplayString(pct(a.fraction)), 1)
+              ]);
+            }), 128))
+          ])
+        ])) : createCommentVNode("", true)
       ], 16);
     };
   }

package/dist/chunks/{LpPopover-8268UmlC.js → LpPopover-DCKeqiVn.js}

@@ -7,7 +7,8 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     side: { default: "bottom" },
     align: { default: "center" },
     sideOffset: { default: 6 },
-    panelClass: {}
+    panelClass: {},
+    ariaLabel: {}
   }, {
     "open": { type: Boolean },
     "openModifiers": {}
@@ -30,16 +31,18 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           createVNode(unref(PopoverPortal), null, {
             default: withCtx(() => [
               createVNode(unref(PopoverContent), {
+                "collision-padding": 8,
                 side: __props.side,
                 align: __props.align,
                 "side-offset": __props.sideOffset,
+                "aria-label": __props.ariaLabel,
                 class: normalizeClass([unref(POPOVER_PANEL), "z-(--z-popover) w-64 rounded-card p-3 text-sm text-ink outline-none", __props.panelClass])
               }, {
                 default: withCtx(() => [
                   renderSlot(_ctx.$slots, "default")
                 ]),
                 _: 3
-              }, 8, ["side", "align", "side-offset", "class"])
+              }, 8, ["side", "align", "side-offset", "aria-label", "class"])
             ]),
             _: 3
           })

package/dist/chunks/{LpProgress-Btq5W4Ut.js → LpProgress-CBU1iI69.js}

@@ -2,7 +2,7 @@ import { defineComponent, ref, onBeforeUnmount, watch, computed, openBlock, crea
 import { ProgressRoot, ProgressIndicator } from "reka-ui";
 import { prefersReducedMotion, easeOut } from "../composables/easing.js";
 import { useReveal } from "../composables/useReveal.js";
-import { _ as _sfc_main$1 } from "./LpNumberFlow-amWYaeuA.js";
+import { _ as _sfc_main$1 } from "./LpNumberFlow-z4WPZcZu.js";
 const _hoisted_1 = ["width", "height"];
 const _hoisted_2 = ["cx", "cy", "r", "stroke-width"];
 const _hoisted_3 = ["cx", "cy", "r", "stroke", "stroke-width", "stroke-dasharray"];
@@ -71,9 +71,10 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       () => [props.value, props.max],
       () => runSweep(props.value, props.duration)
     );
-    const pct = computed(
-      () => Math.max(0, Math.min(100, shown.value / props.max * 100))
-    );
+    const pct = computed(() => {
+      const ratio = props.max > 0 ? shown.value / props.max * 100 : 0;
+      return Number.isFinite(ratio) ? Math.max(0, Math.min(100, ratio)) : 0;
+    });
     const paintedTone = computed(() => {
       if (props.tone !== "auto") return props.tone;
       const fraction = props.max > 0 ? props.value / props.max : 0;