@leavepulse/ui 0.28.0 → 0.28.1

package/dist/chunks/{LpNumberField-B3JuQFol.js → LpNumberField-NPE8Bumx.js}

@@ -1,6 +1,7 @@
-import { defineComponent, openBlock, createBlock, unref, withCtx, createVNode } from "vue";
+import { defineComponent, useId, openBlock, createBlock, unref, withCtx, createVNode, createElementBlock, toDisplayString, createCommentVNode } from "vue";
 import { NumberFieldRoot, NumberFieldDecrement, NumberFieldInput, NumberFieldIncrement } from "reka-ui";
 import { _ as _sfc_main$1 } from "./LpIcon-CCnX5_2j.js";
+const _hoisted_1 = ["id"];
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpNumberField",
   props: {
@@ -8,10 +9,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     min: {},
     max: {},
     step: {},
-    disabled: { type: Boolean }
+    disabled: { type: Boolean },
+    unit: {}
   },
   emits: ["update:modelValue"],
   setup(__props) {
+    const unitId = useId();
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(NumberFieldRoot), {
         "model-value": __props.modelValue ?? void 0,
@@ -34,7 +37,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
             ]),
             _: 1
           }),
-          createVNode(unref(NumberFieldInput), { class: "min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none" }),
+          createVNode(unref(NumberFieldInput), {
+            "aria-describedby": __props.unit ? unref(unitId) : void 0,
+            class: "min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
+          }, null, 8, ["aria-describedby"]),
+          __props.unit ? (openBlock(), createElementBlock("span", {
+            key: 0,
+            id: unref(unitId),
+            class: "shrink-0 pr-1 text-xs text-muted"
+          }, toDisplayString(__props.unit), 9, _hoisted_1)) : createCommentVNode("", true),
           createVNode(unref(NumberFieldIncrement), { class: "group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40" }, {
             default: withCtx(() => [
               createVNode(_sfc_main$1, {

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

@@ -4,6 +4,7 @@ type __VLS_Props = {
     max?: number;
     step?: number;
     disabled?: boolean;
+    unit?: string;
 };
 declare const __VLS_export: import('vue').DefineComponent<__VLS_Props, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {} & {
     "update:modelValue": (value: number | null) => any;

package/dist/components/LpNumberField.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpNumberField-B3JuQFol.js";
+import { _ as _sfc_main } from "../chunks/LpNumberField-NPE8Bumx.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -36,7 +36,7 @@ import { _ as _30 } from "./chunks/LpLink-BHZ1CLlF.js";
 import { _ as _31 } from "./chunks/LpLogViewer-CcQ3s3Fp.js";
 import { _ as _32 } from "./chunks/LpModal-D_o-56To.js";
 import { _ as _33 } from "./chunks/LpNotificationBell-Dvu-b6Vn.js";
-import { _ as _34 } from "./chunks/LpNumberField-B3JuQFol.js";
+import { _ as _34 } from "./chunks/LpNumberField-NPE8Bumx.js";
 import { _ as _35 } from "./chunks/LpNumberFlow-amWYaeuA.js";
 import { _ as _36 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _37 } from "./chunks/LpPagination-CeGuNe_q.js";

package/package.json

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

package/src/components/LpNumberField.vue

@@ -6,6 +6,7 @@ import {
   NumberFieldInput,
   NumberFieldRoot,
 } from "reka-ui"
+import { useId } from "vue"
 import LpIcon from "./LpIcon.vue"
 
 defineProps<{
@@ -16,9 +17,19 @@ defineProps<{
   max?: number
   step?: number
   disabled?: boolean
+  // The unit the number is in ("mm", "W", "mA"). It sits inside the field
+  // rather than in the label, because a grid of bare boxes labelled "Width",
+  // "Depth", "Weight" tells the reader nothing about which one wants grams.
+  // Not part of the value: it is never typed, selected, or submitted.
+  unit?: string
 }>()
 
 defineEmits<{ (e: "update:modelValue", value: number | null): void }>()
+
+// The unit is described to the input rather than merely placed beside it: on
+// screen the two read as one field, and without this a reader announces "380"
+// and leaves out the milliamps that make it mean anything.
+const unitId = useId()
 </script>
 
 <template>
@@ -42,8 +53,13 @@ defineEmits<{ (e: "update:modelValue", value: number | null): void }>()
       />
     </NumberFieldDecrement>
     <NumberFieldInput
+      :aria-describedby="unit ? unitId : undefined"
       class="min-w-0 flex-1 bg-transparent text-center text-sm text-ink outline-none [appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none"
     />
+    <!-- The unit sits between the value and the increment button, so a long one
+         narrows the field rather than covering the digits. Not focusable and
+         not part of the value: it is read, never typed. -->
+    <span v-if="unit" :id="unitId" class="shrink-0 pr-1 text-xs text-muted">{{ unit }}</span>
     <NumberFieldIncrement
       class="group grid h-full w-8 place-items-center text-muted transition-colors duration-[var(--duration-fast)] hover:text-ink disabled:opacity-40"
     >