@leavepulse/ui 0.53.0 → 0.54.0

package/dist/components/LpOtpInput.vue.d.ts

@@ -10,6 +10,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     mask?: boolean;
     /** Allow letters too (backup codes). Default: digits only (TOTP). */
     alphanumeric?: boolean;
+    /**
+     * Turn typed letters into capitals, and open a phone's keyboard in capitals.
+     * Default: on with `alphanumeric`, where codes are printed in capitals and
+     * compared without regard to case; pass `false` for a case-sensitive code.
+     */
+    uppercase?: boolean;
+    /** Draw a separator after every `group` cells (e.g. 3 for "123-456"). */
+    group?: number;
     /** Error state — tints the cells red (e.g. wrong code). */
     invalid?: boolean;
     size?: "sm" | "md" | "lg";
@@ -26,6 +34,14 @@ declare const __VLS_export: import("vue").DefineComponent<{
     mask?: boolean;
     /** Allow letters too (backup codes). Default: digits only (TOTP). */
     alphanumeric?: boolean;
+    /**
+     * Turn typed letters into capitals, and open a phone's keyboard in capitals.
+     * Default: on with `alphanumeric`, where codes are printed in capitals and
+     * compared without regard to case; pass `false` for a case-sensitive code.
+     */
+    uppercase?: boolean;
+    /** Draw a separator after every `group` cells (e.g. 3 for "123-456"). */
+    group?: number;
     /** Error state — tints the cells red (e.g. wrong code). */
     invalid?: boolean;
     size?: "sm" | "md" | "lg";
@@ -35,5 +51,6 @@ declare const __VLS_export: import("vue").DefineComponent<{
 }>, {
     size: "sm" | "md" | "lg";
     length: number;
+    uppercase: boolean;
     alphanumeric: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;

package/dist/components/LpOtpInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpOtpInput-CziPF3Oq.js";
+import { _ as _sfc_main } from "../chunks/LpOtpInput-PbeNJ5In.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPaletteHeader.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, computed, openBlock, createElementBlock, createElementVNode, renderSlot, createBlock, createVNode, createCommentVNode, toDisplayString } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpAvatar-Cb1jtOVv.js";
+import { _ as _sfc_main$1 } from "../chunks/LpAvatar-LTvy0OkE.js";
 import { _ as _sfc_main$2 } from "../chunks/LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$3 } from "../chunks/HighlightText-BvnYZkhi.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";

package/dist/components/LpPie.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPie-BdSnta11.js";
+import { _ as _sfc_main } from "../chunks/LpPie-B7ti5qCH.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpRadio.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpRadio-B5AfqTpZ.js";
+import { _ as _sfc_main } from "../chunks/LpRadio-CWA5Eb3M.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpRadioGroup.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpRadioGroup-DmEW0l78.js";
+import { _ as _sfc_main } from "../chunks/LpRadioGroup-CCn-Q2_c.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebar.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebar-DpEiGi8L.js";
+import { _ as _sfc_main } from "../chunks/LpSidebar-C2oolgwy.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSidebarNav.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSidebarNav-BUuxipX-.js";
+import { _ as _sfc_main } from "../chunks/LpSidebarNav-C9dHu-2b.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpSwitch.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpSwitch-OrcOJX9m.js";
+import { _ as _sfc_main } from "../chunks/LpSwitch-DG2AhXIL.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTable.vue.js

@@ -1,13 +1,13 @@
 import { defineComponent, computed, useAttrs, ref, shallowRef, watch, onMounted, onBeforeUnmount, openBlock, createElementBlock, normalizeClass, createVNode, withCtx, createTextVNode, toDisplayString, createCommentVNode, Fragment, renderList, createElementVNode, Transition, renderSlot, mergeProps, normalizeStyle, createBlock, TransitionGroup, unref, withModifiers, nextTick } from "vue";
-import { _ as _sfc_main$7 } from "../chunks/LpCheckbox-Bkj13CbW.js";
-import { _ as _sfc_main$6 } from "../chunks/LpContextMenu-1cKew_Dc.js";
+import { _ as _sfc_main$7 } from "../chunks/LpCheckbox-DvVYeOD-.js";
+import { _ as _sfc_main$6 } from "../chunks/LpContextMenu-EF_90u3g.js";
 import { _ as _sfc_main$2 } from "../chunks/LpIcon-DYtaid0K.js";
 import { _ as _sfc_main$a } from "../chunks/LpPagination-BcDlo3r_.js";
 import { _ as _sfc_main$8 } from "../chunks/LpPopover-DCKeqiVn.js";
 import { _ as _sfc_main$5 } from "../chunks/LpScrollArea-Hz3-JWUG.js";
 import { _ as _sfc_main$4 } from "../chunks/LpRollingText-DB7upf-5.js";
 import { _ as _sfc_main$3 } from "../chunks/LpShift-DXNsauQZ.js";
-import { _ as _sfc_main$9 } from "../chunks/LpTableFilter-BV8PpLM9.js";
+import { _ as _sfc_main$9 } from "../chunks/LpTableFilter-CrW7_Rj4.js";
 import { useAsyncTask } from "../composables/useAsyncTask.js";
 import { useHotkeys } from "../composables/useHotkeys.js";
 import { usePaintSelect } from "../composables/usePaintSelect.js";

package/dist/components/LpTableFilter.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTableFilter-BV8PpLM9.js";
+import { _ as _sfc_main } from "../chunks/LpTableFilter-CrW7_Rj4.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpTabs.vue.d.ts

@@ -3,6 +3,8 @@ export interface TabItem {
     label: string;
     /** Optional iconify name (e.g. "lucide:palette"), shown left of the label. */
     icon?: string;
+    /** A small dot on the tab: something behind it wants a look (unread, a problem). */
+    dot?: boolean;
 }
 type __VLS_Props = {
     modelValue?: string;
@@ -15,12 +17,18 @@ type __VLS_Props = {
      * sliding pill marking the active one (for nav bars over a custom surface).
      * "underline" is a flat row over a hairline baseline, marking the active
      * tab with a sliding bottom bar instead of a pill (page-section nav style).
+     * "bottom" is a phone's bottom navigation: full width, equal-share tabs
+     * with the icon over the label, a sliding bar along the top edge marking
+     * the active one, and padding for the gesture strip and side insets of an
+     * edge-to-edge screen. Place it as the last row of the layout.
      */
-    variant?: "contained" | "plain" | "underline";
+    variant?: "contained" | "plain" | "underline" | "bottom";
     /** Tint the active pill + label with the brand colour (nav-bar style). */
     accent?: boolean;
     /** Stretch the bar to full width with equal-share triggers. */
     block?: boolean;
+    /** Accessible name of the tab list, e.g. "Main" for an app's navigation. */
+    label?: string;
 };
 declare var __VLS_51: {
     value: string;
@@ -36,7 +44,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     "onUpdate:modelValue"?: ((value: string) => any) | undefined;
 }>, {
     block: boolean;
-    variant: "contained" | "plain" | "underline";
+    variant: "contained" | "plain" | "underline" | "bottom";
     accent: boolean;
 }, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;

package/dist/components/LpTabs.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpTabs-UM0FQmPA.js";
+import { _ as _sfc_main } from "../chunks/LpTabs-BMSBB78h.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpThemeSwitcher.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-BbYFFT5w.js";
+import { _ as _sfc_main } from "../chunks/LpThemeSwitcher-CPmhYOjX.js";
 export {
   _sfc_main as default
 };

package/dist/components/otp.d.ts

@@ -3,3 +3,5 @@ export type OtpCells = (string | number | undefined)[];
 export declare function joinCells(cells: OtpCells): string;
 /** Cells for a code given from outside, one character each. */
 export declare function splitCode(code: string | undefined, length: number): string[];
+export declare function upperCells<T extends OtpCells>(cells: T): T;
+export declare function groupBreaks(length: number, group: number | undefined): Set<number>;

package/dist/components/otp.js

@@ -4,7 +4,23 @@ function joinCells(cells) {
 function splitCode(code, length) {
   return (code ?? "").split("").slice(0, length);
 }
+function upperCells(cells) {
+  const out = [];
+  cells.forEach((c, i) => {
+    out[i] = typeof c === "string" ? c.toUpperCase() : c;
+  });
+  out.length = cells.length;
+  return out;
+}
+function groupBreaks(length, group) {
+  const breaks = /* @__PURE__ */ new Set();
+  if (!group || group < 1 || group >= length) return breaks;
+  for (let i = group; i < length; i += group) breaks.add(i - 1);
+  return breaks;
+}
 export {
+  groupBreaks,
   joinCells,
-  splitCode
+  splitCode,
+  upperCells
 };

package/dist/index.js

@@ -4,21 +4,21 @@ import { _ as _3 } from "./chunks/LpMapPicker-Cc84LaM3.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpActionBar-CnfFVIwC.js";
 import { _ as _5 } from "./chunks/LpAlert-B6ilrM7T.js";
-import { _ as _6 } from "./chunks/LpAppShell-BmMYcEVx.js";
+import { _ as _6 } from "./chunks/LpAppShell-DcSXik4a.js";
 import { _ as _7 } from "./chunks/LpAutocomplete-C8IgSMsi.js";
-import { _ as _8 } from "./chunks/LpAvatar-Cb1jtOVv.js";
+import { _ as _8 } from "./chunks/LpAvatar-LTvy0OkE.js";
 import { _ as _9 } from "./chunks/LpBadge-Fe0D1bYx.js";
 import { _ as _10 } from "./chunks/LpBreadcrumbs-D4TsoFju.js";
 import { _ as _11 } from "./chunks/LpButton-CKSwC6Mu.js";
 import { _ as _12 } from "./chunks/LpCalendar-DrA2McTU.js";
-import { _ as _13 } from "./chunks/LpCard-BdxkMXjo.js";
+import { _ as _13 } from "./chunks/LpCard-DbjO5yaF.js";
 import { default as default2 } from "./components/LpChart.vue.js";
 import { backgroundOf, csvField, downloadFile, fileStem, inlineSvg, resolveCssColor, svgToPng, toCsv } from "./components/exportData.js";
 import { CHART_PALETTE, axisTicks, chartSummary, formatTick, markerIndex, niceScale, resolveSlices } from "./components/chart.js";
-import { _ as _14 } from "./chunks/LpCheckbox-Bkj13CbW.js";
+import { _ as _14 } from "./chunks/LpCheckbox-DvVYeOD-.js";
 import { _ as _15 } from "./chunks/LpCodeBlock-ca7ANFyW.js";
 import { tokenizeLines } from "./components/codeHighlight.js";
-import { _ as _16 } from "./chunks/LpColorPicker-BLqPX5Vw.js";
+import { _ as _16 } from "./chunks/LpColorPicker-D1sQqtXS.js";
 import { DEFAULT_SWATCHES, clampHsv, formatColor, hsvToHsl, hsvToRgb, isLight, normalizeHue, opaqueCss, parseColor, parseHex, rgbToHex, rgbToHsv } from "./components/color.js";
 import { default as default3 } from "./components/LpCommandPalette.vue.js";
 import { applyQueryFilters, highlightParts, parseCommandQuery, parsePaletteQuery, rankCommandItems } from "./components/commandSearch.js";
@@ -33,7 +33,7 @@ import { comboKeys, comboSteps } from "./components/keys.js";
 import { _ as _18 } from "./chunks/LpConfirmDialog-Ca-CTlxT.js";
 import { _ as _19 } from "./chunks/LpConfirmHost-BAaSaT2b.js";
 import { confirm, useConfirm } from "./components/confirm.js";
-import { _ as _20 } from "./chunks/LpContextMenu-1cKew_Dc.js";
+import { _ as _20 } from "./chunks/LpContextMenu-EF_90u3g.js";
 import { _ as _21 } from "./chunks/LpDatePicker-BrdFtSTy.js";
 import { _ as _22 } from "./chunks/LpDateRangePicker-Drd7EbIz.js";
 import { _ as _23 } from "./chunks/LpRangeCalendar-DZuaRV0W.js";
@@ -44,7 +44,7 @@ import { _ as _26 } from "./chunks/LpDrawer-CBFVD624.js";
 import { _ as _27 } from "./chunks/LpDropdownMenu-DrpJJBp0.js";
 import { default as default9 } from "./components/LpDropzone.vue.js";
 import { _ as _28 } from "./chunks/LpEmptyState-BJbZXC8D.js";
-import { _ as _29 } from "./chunks/LpFileTree-bk5VjBey.js";
+import { _ as _29 } from "./chunks/LpFileTree-3E4w4Rjr.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 import { _ as _30 } from "./chunks/LpFieldNotice-wtieLUTj.js";
 import { _ as _31 } from "./chunks/LpFormField-CtVYj6tO.js";
@@ -56,25 +56,25 @@ import { _ as _34 } from "./chunks/LpInput-D-YGQbEv.js";
 import { _ as _35 } from "./chunks/LpLightbox-EVXzAq62.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _36 } from "./chunks/LpLink-Krkjhe_y.js";
-import { _ as _37 } from "./chunks/LpLogViewer-BDFXzvcl.js";
+import { _ as _37 } from "./chunks/LpLogViewer-BfgtXVKm.js";
 import { countLevels, matchPositions, matchesTerm, ringWindow, stepMatch } from "./components/logSearch.js";
 import { _ as _38 } from "./chunks/LpMediaGallery-BnlkN_1f.js";
 import { _ as _39 } from "./chunks/LpModal-JNa3B_Lr.js";
-import { _ as _40 } from "./chunks/LpModalNav-BAxC9et7.js";
-import { _ as _41 } from "./chunks/LpNotificationBell-DsqSyMwS.js";
+import { _ as _40 } from "./chunks/LpModalNav-aWwc_5CD.js";
+import { _ as _41 } from "./chunks/LpNotificationBell-wZ3meeim.js";
 import { _ as _42 } from "./chunks/LpNumberField-B77O-z28.js";
 import { _ as _43 } from "./chunks/LpTimeField-Cqe7fXnh.js";
 import { _ as _44 } from "./chunks/LpNumberFlow-z4WPZcZu.js";
-import { _ as _45 } from "./chunks/LpOtpInput-CziPF3Oq.js";
+import { _ as _45 } from "./chunks/LpOtpInput-PbeNJ5In.js";
 import { _ as _46 } from "./chunks/LpPagination-BcDlo3r_.js";
 import { _ as _47 } from "./chunks/LpPasswordInput-eKzQhbQP.js";
-import { _ as _48 } from "./chunks/LpPie-BdSnta11.js";
+import { _ as _48 } from "./chunks/LpPie-B7ti5qCH.js";
 import { _ as _49 } from "./chunks/LpPhoneInput-BCbrrhgE.js";
 import { filterCountries, flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _50 } from "./chunks/LpPopover-DCKeqiVn.js";
 import { _ as _51 } from "./chunks/LpProgress-CBU1iI69.js";
-import { _ as _52 } from "./chunks/LpRadio-B5AfqTpZ.js";
-import { _ as _53 } from "./chunks/LpRadioGroup-DmEW0l78.js";
+import { _ as _52 } from "./chunks/LpRadio-CWA5Eb3M.js";
+import { _ as _53 } from "./chunks/LpRadioGroup-CCn-Q2_c.js";
 import { _ as _54 } from "./chunks/LpRollingText-DB7upf-5.js";
 import { _ as _55 } from "./chunks/LpScrollArea-Hz3-JWUG.js";
 import { _ as _56 } from "./chunks/LpSegmented-C09EEam2.js";
@@ -83,7 +83,7 @@ import { _ as _58 } from "./chunks/LpSelect-DNIL6MB9.js";
 import { _ as _59 } from "./chunks/LpServiceNode-D8uJ8sGk.js";
 import { _ as _60 } from "./chunks/LpShift-DXNsauQZ.js";
 import { default as default11 } from "./components/LpShortcutsDialog.vue.js";
-import { _ as _61 } from "./chunks/LpSidebar-DpEiGi8L.js";
+import { _ as _61 } from "./chunks/LpSidebar-C2oolgwy.js";
 import { _ as _62 } from "./chunks/LpSkeleton-BB6XIV-w.js";
 import { _ as _63 } from "./chunks/LpSlider-Cuzmrd7p.js";
 import { _ as _64 } from "./chunks/LpRangeSlider-C1yF9-nP.js";
@@ -92,15 +92,15 @@ import { formatClipTime, isNativeLoop, planLoop, seamProgress, seamReached } fro
 import { _ as _66 } from "./chunks/LpSparkline-CB80N8SJ.js";
 import { _ as _67 } from "./chunks/LpStat-B-7udBRP.js";
 import { _ as _68 } from "./chunks/LpStepper-C7XiVKZj.js";
-import { _ as _69 } from "./chunks/LpSwitch-OrcOJX9m.js";
+import { _ as _69 } from "./chunks/LpSwitch-DG2AhXIL.js";
 import { default as default12 } from "./components/LpTable.vue.js";
 import { compareValues } from "./components/tableSort.js";
 import { _ as _70 } from "./chunks/LpTableOfContents-BUcAfGPQ.js";
-import { _ as _71 } from "./chunks/LpTabs-UM0FQmPA.js";
+import { _ as _71 } from "./chunks/LpTabs-BMSBB78h.js";
 import { _ as _72 } from "./chunks/LpTagsInput-D1SuqbhB.js";
 import { addTags, splitTags } from "./components/tags.js";
 import { _ as _73 } from "./chunks/LpTextarea-uuScWo6-.js";
-import { _ as _74 } from "./chunks/LpThemeSwitcher-BbYFFT5w.js";
+import { _ as _74 } from "./chunks/LpThemeSwitcher-CPmhYOjX.js";
 import { _ as _75 } from "./chunks/LpTilt-B7KHX1zH.js";
 import { _ as _76 } from "./chunks/LpToaster-DTtWuKvq.js";
 import { _ as _77 } from "./chunks/LpTooltip-CXVKcOXT.js";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@leavepulse/ui",
-  "version": "0.53.0",
+  "version": "0.54.0",
   "type": "module",
   "description": "LeavePulse token-driven Vue component kit.",
   "repository": {

package/src/components/LpCheckbox.vue

@@ -35,7 +35,7 @@ const field = useFieldControl(() => ({ wrapped: false, id: props.id, disabled: p
 
 // The label sits a fixed distance from the box; a dense list of options needs that closer.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "group inline-flex cursor-pointer items-center gap-2 text-sm text-ink",
+  "group/check inline-flex cursor-pointer items-center gap-2 text-sm text-ink",
 )
 </script>
 
@@ -49,7 +49,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       :model-value="indeterminate ? 'indeterminate' : modelValue"
       :disabled="field.disabled"
       :aria-describedby="field.describedBy"
-      class="flex size-[18px] items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
+      class="flex size-[18px] items-center justify-center rounded-[5px] border border-line-strong bg-surface-soft outline-none transition-[color,background-color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:not-data-[state=indeterminate]:group-hover/check:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand data-[state=indeterminate]:border-transparent data-[state=indeterminate]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
       @update:model-value="onUpdate"
     >
       <CheckboxIndicator

package/src/components/LpContextMenu.vue

@@ -79,6 +79,18 @@ function rememberField() {
     : null
 }
 
+/*
+ * A right-click the menu answers goes no further than its trigger. reka opens
+ * the menu a tick later, and only if nothing has called preventDefault by then;
+ * an app that silences the browser's own menu with a window listener (most
+ * desktop shells do) got there first, so the menu never opened while a long
+ * press, which reka times itself, still did. reka cancels the native menu on
+ * its own once it opens.
+ */
+function keepContextMenu(event: Event) {
+  if (enabled.value) event.stopPropagation()
+}
+
 function returnFocus(event: Event) {
   const saved = field
   field = null
@@ -95,7 +107,12 @@ function returnFocus(event: Event) {
        late, losing its state and focus. A disabled trigger leaves the browser's
        own menu in place. -->
   <ContextMenuRoot>
-    <ContextMenuTrigger as-child :disabled="!enabled" @contextmenu.capture="rememberField">
+    <ContextMenuTrigger
+      as-child
+      :disabled="!enabled"
+      @contextmenu.capture="rememberField"
+      @contextmenu="keepContextMenu"
+    >
       <slot />
     </ContextMenuTrigger>
     <ContextMenuPortal v-if="items.length">

package/src/components/LpOtpInput.vue

@@ -14,12 +14,16 @@ export default { inheritAttrs: false }
  * The kit-facing model is a single STRING (the joined code), not reka's per-cell
  * array: `v-model` is "123456", and @complete fires that string once every cell
  * is filled. Digits-only by default (TOTP); flip `alphanumeric` for backup codes.
+ *
+ * The cells share the row rather than keeping a fixed size: each grows to its
+ * size's width and no further, and shrinks with the row when the container is
+ * narrower, so eight cells fit a phone instead of running off its edge.
  */
 import { PinInputInput, PinInputRoot } from "reka-ui"
 import { computed, ref, watch } from "vue"
 import { useFieldControl } from "../composables/useField"
 import { useMergedAttrs } from "../composables/useMergedClass"
-import { joinCells, splitCode, type OtpCells } from "./otp"
+import { groupBreaks, joinCells, splitCode, upperCells, type OtpCells } from "./otp"
 
 const props = withDefaults(
   defineProps<{
@@ -32,11 +36,19 @@ const props = withDefaults(
     mask?: boolean
     /** Allow letters too (backup codes). Default: digits only (TOTP). */
     alphanumeric?: boolean
+    /**
+     * Turn typed letters into capitals, and open a phone's keyboard in capitals.
+     * Default: on with `alphanumeric`, where codes are printed in capitals and
+     * compared without regard to case; pass `false` for a case-sensitive code.
+     */
+    uppercase?: boolean
+    /** Draw a separator after every `group` cells (e.g. 3 for "123-456"). */
+    group?: number
     /** Error state — tints the cells red (e.g. wrong code). */
     invalid?: boolean
     size?: "sm" | "md" | "lg"
   }>(),
-  { length: 6, size: "md", alphanumeric: false },
+  { length: 6, size: "md", alphanumeric: false, uppercase: undefined },
 )
 
 const emit = defineEmits<{
@@ -45,6 +57,8 @@ const emit = defineEmits<{
   (e: "complete", value: string): void
 }>()
 
+const upper = computed(() => props.alphanumeric && (props.uppercase ?? true))
+
 // reka models the value as an array of per-cell strings; we bridge to a single
 // string at the boundary so callers never touch the array shape.
 //
@@ -52,7 +66,7 @@ const emit = defineEmits<{
 // string on every render: clearing a middle cell leaves a gap the string cannot
 // express, and re-splitting it shifted every later digit one cell left. The
 // cells are only rebuilt when the model changes from outside.
-const local = ref<string[]>(splitCode(props.modelValue, props.length))
+const local = ref<OtpCells>(splitCode(props.modelValue, props.length))
 let emitted = props.modelValue ?? ""
 watch(
   () => props.modelValue ?? "",
@@ -68,11 +82,13 @@ watch(
     local.value = local.value.slice(0, length)
   },
 )
+// Typed as reka's text-mode array; numeric mode holds numbers and holes, which
+// the helpers in ./otp are written for.
 const cells = computed<string[]>({
-  get: () => local.value,
+  get: () => local.value as string[],
   set: (arr) => {
-    local.value = arr
-    emitted = joinCells(arr)
+    local.value = upper.value ? upperCells(arr) : arr
+    emitted = joinCells(local.value)
     emit("update:modelValue", emitted)
   },
 })
@@ -84,23 +100,53 @@ const field = useFieldControl(() => ({
 }))
 
 function onComplete(arr: OtpCells) {
-  emit("complete", joinCells(arr))
+  emit("complete", joinCells(upper.value ? upperCells(arr) : arr))
+}
+
+const breaks = computed(() => groupBreaks(props.length, props.group))
+
+/*
+ * Backspace, as a phone's keyboard sends it.
+ *
+ * reka handles Backspace on keydown, but an on-screen keyboard reports most
+ * keys as "Unidentified", so its handler never ran there: the browser deleted
+ * the character itself, and reka read the now-empty cell as typed input and
+ * moved the caret FORWARD — and an empty cell could not be backed out of at
+ * all. `beforeinput` names the deletion on every keyboard, so it is done here
+ * the way a hardware Backspace does it: clear this cell, or step back into
+ * the previous one and clear that. A hardware key never reaches this, since
+ * reka's keydown handler cancels it first.
+ */
+const root = ref<{ $el: HTMLElement } | null>(null)
+function onBeforeInput(event: InputEvent, index: number) {
+  if (event.inputType !== "deleteContentBackward") return
+  event.preventDefault()
+  const target = event.target as HTMLInputElement
+  const next = [...local.value]
+  let clear = index
+  if (!target.value && index > 0) {
+    clear = index - 1
+    root.value?.$el.querySelectorAll("input")[clear]?.focus()
+  }
+  // Emptied the way reka empties a cell itself: numeric mode leaves a hole.
+  next[clear] = props.alphanumeric ? "" : undefined
+  cells.value = next as string[]
 }
 
 const cellSize = {
-  sm: "size-9 text-base",
-  md: "size-11 text-lg",
-  lg: "size-13 text-xl",
+  sm: "max-w-9 text-base",
+  md: "max-w-11 text-lg",
+  lg: "max-w-13 text-xl",
 }
 
-// The boxes sit on a fixed gap that a narrow form has to tighten.
 const { class: rootClass, attrs: rest } = useMergedAttrs(
-  "flex items-center gap-2",
+  "flex min-w-0 max-w-full items-center gap-1.5 sm:gap-2",
 )
 </script>
 
 <template>
   <PinInputRoot
+    ref="root"
     v-model="cells"
     :type="alphanumeric ? 'text' : 'number'"
     :mask="mask"
@@ -110,21 +156,31 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
     v-bind="rest"
     @complete="onComplete"
   >
-    <PinInputInput
-      v-for="i in length"
-      :key="i"
-      :index="i - 1"
-      :id="i === 1 ? field.id : undefined"
-      :aria-invalid="field.invalid || undefined"
-      :aria-describedby="field.describedBy"
-      :class="[
-        cellSize[size],
-        'rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand',
-        'outline-none transition-colors duration-[var(--duration-fast)]',
-        'focus:border-brand focus:ring-2 focus:ring-ring',
-        'disabled:cursor-not-allowed disabled:opacity-55',
-        field.invalid ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line',
-      ]"
-    />
+    <template v-for="i in length" :key="i">
+      <PinInputInput
+        :index="i - 1"
+        :id="i === 1 ? field.id : undefined"
+        :aria-invalid="field.invalid || undefined"
+        :aria-describedby="field.describedBy"
+        :autocapitalize="upper ? 'characters' : 'none'"
+        autocorrect="off"
+        :spellcheck="false"
+        :class="[
+          cellSize[size],
+          'aspect-square h-auto min-w-0 flex-1 basis-0 p-0',
+          'rounded-control border bg-surface-soft text-center font-semibold text-ink caret-brand',
+          'outline-none transition-colors duration-[var(--duration-fast)]',
+          'focus:border-brand focus:ring-2 focus:ring-ring',
+          'disabled:cursor-not-allowed disabled:opacity-55',
+          field.invalid ? 'border-danger focus:border-danger focus:ring-danger-soft' : 'border-line',
+        ]"
+        @beforeinput="onBeforeInput($event as InputEvent, i - 1)"
+      />
+      <span
+        v-if="breaks.has(i - 1)"
+        aria-hidden="true"
+        class="h-0.5 w-2 shrink-0 rounded-full bg-muted opacity-60"
+      />
+    </template>
   </PinInputRoot>
 </template>

package/src/components/LpRadio.vue

@@ -18,7 +18,7 @@ const props = defineProps<{ value: string; label?: string; disabled?: boolean }>
 // options needs to close up — `class="gap-1"` should win over the default.
 const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
   [
-    "group inline-flex cursor-pointer items-center gap-2 text-sm text-ink",
+    "group/radio inline-flex cursor-pointer items-center gap-2 text-sm text-ink",
     props.disabled ? "cursor-not-allowed opacity-55" : "",
   ].join(" "),
 )
@@ -32,7 +32,7 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(() =>
     <RadioGroupItem
       :value="value"
       :disabled="disabled"
-      class="flex size-[18px] shrink-0 items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+      class="flex size-[18px] shrink-0 items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover/radio:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
     >
       <RadioGroupIndicator
         class="flex data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)]"

package/src/components/LpRadioGroup.vue

@@ -45,11 +45,11 @@ const { class: rootClass, attrs: rest } = useMergedAttrs(
       <label
         v-for="opt in options"
         :key="opt.value"
-        class="group inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
+        class="group/radio inline-flex cursor-pointer items-center gap-2 text-sm text-ink"
       >
         <RadioGroupItem
           :value="opt.value"
-          class="flex size-[18px] items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
+          class="flex size-[18px] items-center justify-center rounded-full border border-line-strong bg-surface-soft outline-none transition-[color,border-color,box-shadow,scale] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] not-data-[state=checked]:group-hover/radio:border-brand active:scale-90 motion-reduce:active:scale-100 focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-brand disabled:cursor-not-allowed disabled:opacity-55"
         >
           <RadioGroupIndicator
             class="flex data-[state=checked]:animate-[indicator-in_140ms_var(--ease-emphasized)]"

package/src/components/LpSwitch.vue

@@ -33,9 +33,9 @@ const slots = useSlots()
 const labelled = computed(() => Boolean(props.label || props.description || slots.default))
 
 const TRACK =
-  "group inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
+  "group/switch inline-flex h-5 w-9 shrink-0 items-center rounded-pill border border-line bg-surface-soft px-0.5 outline-none transition-colors duration-[var(--duration-fast)] focus-visible:ring-2 focus-visible:ring-ring data-[state=checked]:border-transparent data-[state=checked]:bg-brand disabled:cursor-not-allowed disabled:opacity-55"
 const THUMB =
-  "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active:w-5 group-data-[state=checked]:translate-x-4 group-data-[state=checked]:bg-ink-inverse group-data-[state=checked]:group-active:translate-x-2.5 motion-reduce:group-active:w-3.5"
+  "h-3.5 w-3.5 rounded-full bg-ink shadow transition-[translate,width,background-color] duration-[var(--duration-fast)] ease-[var(--ease-emphasized)] group-active/switch:w-5 group-data-[state=checked]/switch:translate-x-4 group-data-[state=checked]/switch:bg-ink-inverse group-data-[state=checked]/switch:group-active/switch:translate-x-2.5 motion-reduce:group-active/switch:w-3.5"
 
 // Bare, the switch is the root, so a consumer asking for a bigger track must not
 // have to depend on stylesheet order to get it. With text, the row is the root