@leavepulse/ui 0.22.15 → 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.15",
+  "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

@@ -38,26 +38,31 @@
 }
 
 /*
- * Autofilled fields keep the field's own colours.
+ * Autofilled fields, in the kit's own palette.
  *
- * A browser paints its own background on an autofilled control, and it wins
- * over `background` outright. Our inputs draw their surface and border on the
- * WRAPPER, so that paint lands on the bare <input> inside — a band of colour
- * that stops short of the field's real height and reads as a rendering fault.
+ * A browser paints its own background on an autofilled control and it beats any
+ * `background`, so the state cannot simply be styled — it has to be covered.
+ * Keeping it VISIBLE is the point: a filled-in field should still say it was
+ * filled in by the password manager. What it must not do is look broken, and
+ * the browser default did two things that read as a rendering fault.
  *
- * The background cannot be overridden, so it is covered: a large inset shadow
- * repaints the control in the field's own surface colour, and the text colour
- * is forced back with `-webkit-text-fill-color`, which the autofill style also
- * hijacks. The transition delay keeps Chrome from flashing its yellow during
- * the fade it runs on load.
+ * First, our fields draw their surface and border on the WRAPPER, so the paint
+ * 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 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 {
-  box-shadow: inset 0 0 0 1000px var(--color-surface-soft);
+  box-shadow: inset 0 0 0 1000px var(--color-brand-soft);
   -webkit-text-fill-color: var(--color-ink);
   caret-color: var(--color-ink);
+  /* Outruns the fade Chrome plays on load, which would flash its yellow. */
   transition: background-color 100000s ease-in-out 0s;
 }
 
@@ -69,7 +74,7 @@
  * nothing on Firefox.
  */
 .lp-autofill:autofill {
-  box-shadow: inset 0 0 0 1000px var(--color-surface-soft);
+  box-shadow: inset 0 0 0 1000px var(--color-brand-soft);
   -webkit-text-fill-color: var(--color-ink);
   caret-color: var(--color-ink);
   filter: none;