@leavepulse/ui 0.22.16 → 0.22.17

package/dist/chunks/{LpAddressInput-DoiamNCt.js → LpAddressInput-C_zAwi_5.js}

@@ -5,7 +5,7 @@ import { _ as _sfc_main$2 } from "./LpAutocomplete-DExlIZe_.js";
 import { _ as _sfc_main$3 } from "./LpButton-5VXXCjwF.js";
 import { _ as _sfc_main$1 } from "./LpFormField-Bn-ZwC6z.js";
 import { _ as _sfc_main$4 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$5 } from "./LpInput-DYc9O-db.js";
+import { _ as _sfc_main$5 } from "./LpInput-BkomKdqQ.js";
 import { _ as _sfc_main$7 } from "./LpModal-CNNSf5pv.js";
 import { _ as _sfc_main$6 } from "./LpSelect-D5mU4cZO.js";
 const _hoisted_1 = { class: "flex flex-col gap-3" };

package/dist/chunks/{LpInput-DYc9O-db.js → LpInput-BkomKdqQ.js}

@@ -31,7 +31,11 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     const shell = tv({
       base: [
         "flex w-full items-center bg-surface-soft text-ink",
-        "rounded-control border border-line",
+        // `overflow-hidden` because rounding a box does NOT clip what is inside it:
+        // the shell carries the radius while the bare <input> is square, so any
+        // paint of its own — the background a browser applies to an autofilled
+        // field, most visibly — reached into the rounded corners.
+        "overflow-hidden rounded-control border border-line",
         "transition-colors duration-[var(--duration-fast)]",
         "focus-within:border-brand focus-within:ring-2 focus-within:ring-ring",
         "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-55"

package/dist/chunks/{LpPasswordInput-BvF2omhn.js → LpPasswordInput-DgUC2Ur7.js}

@@ -1,6 +1,6 @@
 import { defineComponent, ref, openBlock, createBlock, createSlots, withCtx, createElementVNode, createVNode, renderSlot } from "vue";
 import { _ as _sfc_main$2 } from "./LpIcon-CCnX5_2j.js";
-import { _ as _sfc_main$1 } from "./LpInput-DYc9O-db.js";
+import { _ as _sfc_main$1 } from "./LpInput-BkomKdqQ.js";
 const _hoisted_1 = ["aria-label"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/components/LpAddressInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAddressInput-DoiamNCt.js";
+import { _ as _sfc_main } from "../chunks/LpAddressInput-C_zAwi_5.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpInput-DYc9O-db.js";
+import { _ as _sfc_main } from "../chunks/LpInput-BkomKdqQ.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpPasswordInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPasswordInput-BvF2omhn.js";
+import { _ as _sfc_main } from "../chunks/LpPasswordInput-DgUC2Ur7.js";
 export {
   _sfc_main as default
 };

package/dist/index.js

@@ -1,5 +1,5 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-DoiamNCt.js";
+import { _ as _2 } from "./chunks/LpAddressInput-C_zAwi_5.js";
 import { _ as _3 } from "./chunks/LpMapPicker-DFKrd1Ne.js";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress, project, tileUrl, unproject } from "./components/address.js";
 import { _ as _4 } from "./chunks/LpAlert-BAYHDSS1.js";
@@ -27,7 +27,7 @@ import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, format
 import { _ as _24 } from "./chunks/LpFormField-Bn-ZwC6z.js";
 import { _ as _25 } from "./chunks/LpIcon-CCnX5_2j.js";
 import { _ as _26 } from "./chunks/LpInfraNode-qIL3l7IO.js";
-import { _ as _27 } from "./chunks/LpInput-DYc9O-db.js";
+import { _ as _27 } from "./chunks/LpInput-BkomKdqQ.js";
 import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
@@ -37,7 +37,7 @@ import { _ as _32 } from "./chunks/LpNotificationBell-DWDEkmdA.js";
 import { _ as _33 } from "./chunks/LpNumberField-B3JuQFol.js";
 import { _ as _34 } from "./chunks/LpOtpInput-DqaT0Z75.js";
 import { _ as _35 } from "./chunks/LpPagination-CeGuNe_q.js";
-import { _ as _36 } from "./chunks/LpPasswordInput-BvF2omhn.js";
+import { _ as _36 } from "./chunks/LpPasswordInput-DgUC2Ur7.js";
 import { _ as _37 } from "./chunks/LpPhoneInput-BxuDyXp3.js";
 import { flagEmoji, loadCountries, matchCountryByValue } from "./components/countries.js";
 import { _ as _38 } from "./chunks/LpPopover-8268UmlC.js";

package/package.json

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

package/src/components/LpInput.vue

@@ -14,7 +14,11 @@ import LpIcon from "./LpIcon.vue"
 const shell = tv({
   base: [
     "flex w-full items-center bg-surface-soft text-ink",
-    "rounded-control border border-line",
+    // `overflow-hidden` because rounding a box does NOT clip what is inside it:
+    // the shell carries the radius while the bare <input> is square, so any
+    // paint of its own — the background a browser applies to an autofilled
+    // field, most visibly — reached into the rounded corners.
+    "overflow-hidden rounded-control border border-line",
     "transition-colors duration-[var(--duration-fast)]",
     "focus-within:border-brand focus-within:ring-2 focus-within:ring-ring",
     "has-[:disabled]:cursor-not-allowed has-[:disabled]:opacity-55",

package/src/tokens/utilities.css

@@ -50,15 +50,15 @@
  * landed on the bare <input> inside — a band of colour stopping short of the
  * field's real height. The input now stretches the full inner height.
  *
- * Second, the wrapper is what carries the rounded corners, so an inset shadow
- * on a square <input> filled the rounded frame with square corners. The radius
- * is inherited here so the tint follows the same shape as the field.
+ * Second, the wrapper carries the rounded corners while the <input> is square,
+ * so this paint reached into them. Rounding a box does not clip its contents —
+ * the shell does that with `overflow-hidden`, which fixes it for anything the
+ * field ever contains rather than for this one rule.
  */
 .lp-autofill:-webkit-autofill,
 .lp-autofill:-webkit-autofill:hover,
 .lp-autofill:-webkit-autofill:focus,
 .lp-autofill:-webkit-autofill:active {
-  border-radius: inherit;
   box-shadow: inset 0 0 0 1000px var(--color-brand-soft);
   -webkit-text-fill-color: var(--color-ink);
   caret-color: var(--color-ink);
@@ -74,7 +74,6 @@
  * nothing on Firefox.
  */
 .lp-autofill:autofill {
-  border-radius: inherit;
   box-shadow: inset 0 0 0 1000px var(--color-brand-soft);
   -webkit-text-fill-color: var(--color-ink);
   caret-color: var(--color-ink);