@leavepulse/ui 0.22.12 → 0.22.14

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

@@ -1,12 +1,12 @@
 import { defineComponent, defineAsyncComponent, computed, ref, onMounted, watch, openBlock, createElementBlock, createVNode, withCtx, createElementVNode, unref, createBlock, createCommentVNode, createTextVNode, toDisplayString, renderSlot, normalizeClass } from "vue";
 import { OSM_TILES, createNominatimProvider, emptyAddress, formatAddress } from "../components/address.js";
 import { flagEmoji, loadCountries } from "../components/countries.js";
-import { _ as _sfc_main$2 } from "./LpAutocomplete-DIgXmtCA.js";
+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-BauZRyzm.js";
-import { _ as _sfc_main$7 } from "./LpModal-CF7G_0D_.js";
+import { _ as _sfc_main$5 } from "./LpInput-DYc9O-db.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" };
 const _hoisted_2 = { class: "flex items-stretch gap-2" };

package/dist/chunks/{LpAutocomplete-DIgXmtCA.js → LpAutocomplete-DExlIZe_.js}

@@ -105,6 +105,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createVNode(unref(ComboboxAnchor), {
+            "data-lp-ring-owner": "",
             class: normalizeClass(["flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55", [
               anchorSize[__props.size],
               isInvalidState.value ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand"
@@ -123,7 +124,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 disabled: __props.disabled,
                 "aria-invalid": isInvalidState.value || void 0,
                 "auto-focus": "",
-                class: "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted",
+                class: "lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted",
                 onBeforeinput: unref(onBeforeInput),
                 onPaste: unref(onPaste),
                 onInput,

package/dist/chunks/{LpConfirmDialog-B_3ML33f.js → LpConfirmDialog-CmgeAdCh.js}

@@ -1,6 +1,6 @@
 import { defineComponent, openBlock, createBlock, withCtx, renderSlot, createVNode, createTextVNode, toDisplayString } from "vue";
 import { _ as _sfc_main$2 } from "./LpButton-5VXXCjwF.js";
-import { _ as _sfc_main$1 } from "./LpModal-CF7G_0D_.js";
+import { _ as _sfc_main$1 } from "./LpModal-CNNSf5pv.js";
 const _sfc_main = /* @__PURE__ */ defineComponent({
   __name: "LpConfirmDialog",
   props: {

package/dist/chunks/{LpFileTree-DWx77B1F.js → LpFileTree-Cw50eG_y.js}

@@ -1,5 +1,5 @@
 import { defineComponent, ref, watch, computed, openBlock, createElementBlock, Fragment, renderList, normalizeStyle, createBlock, createVNode, withCtx, createElementVNode, renderSlot, mergeProps, normalizeProps, guardReactiveProps, createTextVNode, toDisplayString, createCommentVNode } from "vue";
-import { formatSize, sortNodes, computeStats, subtreeIds, ancestorIds } from "../components/fileTree.js";
+import { computeStats, formatSize, sortNodes, subtreeIds, ancestorIds } from "../components/fileTree.js";
 import { _ as _sfc_main$1 } from "./LpEmptyState-CrfyRJUG.js";
 import { _ as _sfc_main$3 } from "./LpFileTreeNode-DFg4PhOK.js";
 import { _ as _sfc_main$2 } from "./LpScrollArea-D8xyKXcF.js";
@@ -67,6 +67,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       return { byId: byId2, parentOfId };
     });
     const byId = computed(() => index.value.byId);
+    const stats = computed(() => computeStats(props.nodes, checkedIds.value));
     const summary = computed(() => {
       let files = 0;
       let dirs = 0;
@@ -146,7 +147,6 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     }
     const requested = /* @__PURE__ */ new Set();
     const roots = computed(() => props.sort ? sortNodes(props.nodes) : props.nodes);
-    const stats = computed(() => computeStats(props.nodes, checkedIds.value));
     const visible = computed(() => {
       const out = [];
       function walk(list) {

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

@@ -91,6 +91,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }, {
         default: withCtx(() => [
           createElementVNode("div", {
+            "data-lp-ring-owner": "",
             class: normalizeClass([shellClass.value, hasLeading.value ? "pl-2.5" : "", hasTrailing.value ? "pr-1.5" : "", hasField.value ? "" : rootClass.value]),
             style: normalizeStyle(hasField.value ? void 0 : rootStyle.value)
           }, [
@@ -113,7 +114,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
               disabled: __props.disabled,
               "aria-invalid": isInvalidState.value || void 0,
               class: [
-                "min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted",
+                "lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted",
                 hasLeading.value ? "pl-2" : padX[__props.size ?? "md"],
                 hasTrailing.value ? "" : padX[__props.size ?? "md"]
               ],

package/dist/chunks/{LpModal-CF7G_0D_.js → LpModal-CNNSf5pv.js}

@@ -70,16 +70,15 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         const target = panel.querySelector(selector);
         if (!target || target.hasAttribute("disabled")) continue;
         event.preventDefault();
-        target.setAttribute("data-lp-focus-ring", "");
-        target.addEventListener(
-          "blur",
-          () => target.removeAttribute("data-lp-focus-ring"),
-          { once: true }
-        );
-        target.focus();
-        if (target instanceof HTMLInputElement && target.type === "text") {
-          target.select();
+        if (!target.closest("[data-lp-ring-owner]")) {
+          target.setAttribute("data-lp-focus-ring", "");
+          target.addEventListener(
+            "blur",
+            () => target.removeAttribute("data-lp-focus-ring"),
+            { once: true }
+          );
         }
+        target.focus();
         return;
       }
     }

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

@@ -19,6 +19,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         max: __props.max,
         step: __props.step,
         disabled: __props.disabled,
+        "data-lp-ring-owner": "",
         class: "flex h-(--size-control-md) w-full items-center rounded-control border border-line bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55",
         "onUpdate:modelValue": _cache[0] || (_cache[0] = (v) => _ctx.$emit("update:modelValue", v ?? null))
       }, {

package/dist/chunks/{LpPasswordInput-DIHFw4u0.js → LpPasswordInput-BvF2omhn.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-BauZRyzm.js";
+import { _ as _sfc_main$1 } from "./LpInput-DYc9O-db.js";
 const _hoisted_1 = ["aria-label"];
 const __default__ = { inheritAttrs: false };
 const _sfc_main = /* @__PURE__ */ defineComponent({

package/dist/chunks/{LpPhoneInput-LQvVFGMw.js → LpPhoneInput-BxuDyXp3.js}

@@ -86,6 +86,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
     };
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock("div", {
+        "data-lp-ring-owner": "",
         class: normalizeClass(["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],
           __props.invalid ? "border-danger focus-within:border-danger focus-within:ring-danger-soft" : "border-line focus-within:border-brand",
@@ -183,7 +184,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           type: "tel",
           inputmode: "tel",
           autocomplete: "tel",
-          class: "min-w-0 flex-1 bg-transparent px-3 outline-none placeholder:text-muted",
+          class: "lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted",
           onBeforeinput: _cache[2] || (_cache[2] = //@ts-ignore
           (...args) => unref(onBeforeInput) && unref(onBeforeInput)(...args)),
           onPaste: _cache[3] || (_cache[3] = //@ts-ignore

package/dist/components/LpAddressInput.vue.js

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

package/dist/components/LpAutocomplete.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpAutocomplete-DIgXmtCA.js";
+import { _ as _sfc_main } from "../chunks/LpAutocomplete-DExlIZe_.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpConfirmDialog.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpConfirmDialog-B_3ML33f.js";
+import { _ as _sfc_main } from "../chunks/LpConfirmDialog-CmgeAdCh.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpFileTree.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpFileTree-DWx77B1F.js";
+import { _ as _sfc_main } from "../chunks/LpFileTree-Cw50eG_y.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpInput.vue.js

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

package/dist/components/LpModal.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpModal-CF7G_0D_.js";
+import { _ as _sfc_main } from "../chunks/LpModal-CNNSf5pv.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpNumberField.vue.js

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

package/dist/components/LpPasswordInput.vue.js

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

package/dist/components/LpPhoneInput.vue.js

@@ -1,4 +1,4 @@
-import { _ as _sfc_main } from "../chunks/LpPhoneInput-LQvVFGMw.js";
+import { _ as _sfc_main } from "../chunks/LpPhoneInput-BxuDyXp3.js";
 export {
   _sfc_main as default
 };

package/dist/components/LpShortcutsDialog.vue.js

@@ -1,5 +1,5 @@
 import { defineComponent, openBlock, createBlock, withCtx, createElementVNode, createElementBlock, Fragment, renderList, toDisplayString, unref } from "vue";
-import { _ as _sfc_main$1 } from "../chunks/LpModal-CF7G_0D_.js";
+import { _ as _sfc_main$1 } from "../chunks/LpModal-CNNSf5pv.js";
 import { appleModifierLabel } from "../composables/useHotkeys.js";
 import { _ as _export_sfc } from "../chunks/_plugin-vue_export-helper-1tPrXgE0.js";
 import '../assets/LpShortcutsDialog-B7H-RZLQ.css';const _hoisted_1 = { class: "shortcut-groups" };

package/dist/index.js

@@ -1,10 +1,10 @@
 import { _ } from "./chunks/LayoutCanvas-Dd20boUG.js";
-import { _ as _2 } from "./chunks/LpAddressInput-BWuIOt_4.js";
+import { _ as _2 } from "./chunks/LpAddressInput-DoiamNCt.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";
 import { _ as _5 } from "./chunks/LpAppShell-D8CAP9oF.js";
-import { _ as _6 } from "./chunks/LpAutocomplete-DIgXmtCA.js";
+import { _ as _6 } from "./chunks/LpAutocomplete-DExlIZe_.js";
 import { _ as _7 } from "./chunks/LpAvatar-B1Ez0ZAx.js";
 import { _ as _8 } from "./chunks/LpBadge-BPodVcJa.js";
 import { _ as _9 } from "./chunks/LpBreadcrumbs-B7Aqatzw.js";
@@ -14,7 +14,7 @@ import { _ as _12 } from "./chunks/LpCard-BmrTvWOe.js";
 import { _ as _13 } from "./chunks/LpCheckbox-BO0zuuPh.js";
 import { _ as _14 } from "./chunks/LpCodeBlock-CSiOSPs8.js";
 import { default as default2 } from "./components/LpCommandPalette.vue.js";
-import { _ as _15 } from "./chunks/LpConfirmDialog-B_3ML33f.js";
+import { _ as _15 } from "./chunks/LpConfirmDialog-CmgeAdCh.js";
 import { _ as _16 } from "./chunks/LpContextMenu-D0mzXqA7.js";
 import { _ as _17 } from "./chunks/LpDatePicker-dY2q4dr4.js";
 import { _ as _18 } from "./chunks/LpDisclosure-DP6yfgfM.js";
@@ -22,23 +22,23 @@ import { _ as _19 } from "./chunks/LpDivider-CUX46KR0.js";
 import { _ as _20 } from "./chunks/LpDrawer-DAJN5rGK.js";
 import { _ as _21 } from "./chunks/LpDropdownMenu-DJpoqRCb.js";
 import { _ as _22 } from "./chunks/LpEmptyState-CrfyRJUG.js";
-import { _ as _23 } from "./chunks/LpFileTree-DWx77B1F.js";
+import { _ as _23 } from "./chunks/LpFileTree-Cw50eG_y.js";
 import { ancestorIds, checkStateOf, checkedCount, computeStats, fileIcon, formatModified, formatSize, sortNodes, subtreeIds, subtreeSize } from "./components/fileTree.js";
 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-BauZRyzm.js";
+import { _ as _27 } from "./chunks/LpInput-DYc9O-db.js";
 import { _ as _28 } from "./chunks/LpLightbox-Ci35Y_xP.js";
 import { fileNameOf } from "./components/lightbox.js";
 import { _ as _29 } from "./chunks/LpLink-DHwOEp4e.js";
 import { _ as _30 } from "./chunks/LpLogViewer-B1aLUVdz.js";
-import { _ as _31 } from "./chunks/LpModal-CF7G_0D_.js";
+import { _ as _31 } from "./chunks/LpModal-CNNSf5pv.js";
 import { _ as _32 } from "./chunks/LpNotificationBell-DWDEkmdA.js";
-import { _ as _33 } from "./chunks/LpNumberField-C5ar-OwE.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-DIHFw4u0.js";
-import { _ as _37 } from "./chunks/LpPhoneInput-LQvVFGMw.js";
+import { _ as _36 } from "./chunks/LpPasswordInput-BvF2omhn.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";
 import { _ as _39 } from "./chunks/LpProgress-BhI0IbjC.js";

package/package.json

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

package/src/components/LpAutocomplete.vue

@@ -180,6 +180,7 @@ function clear() {
     class="relative"
   >
     <ComboboxAnchor
+      data-lp-ring-owner
       class="flex w-full items-center gap-2 rounded-control border bg-surface-soft px-3 text-ink transition-colors duration-[var(--duration-fast)] focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
       :class="[
         anchorSize[size],
@@ -202,7 +203,7 @@ function clear() {
         :disabled="disabled"
         :aria-invalid="isInvalidState || undefined"
         auto-focus
-        class="min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted"
+        class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted"
         @beforeinput="onBeforeInput"
         @paste="onPaste"
         @input="onInput"

package/src/components/LpFileTree.vue

@@ -155,6 +155,12 @@ const index = computed(() => {
 
 const byId = computed(() => index.value.byId)
 
+// One pass for the whole tree; every row reads its entry by id instead of
+// walking its own subtree on each render. Declared before `summary`, which
+// reads it and is watched eagerly — a `const` below that watcher is still in
+// its temporal dead zone when the watcher first runs.
+const stats = computed(() => computeStats(props.nodes, checkedIds.value))
+
 /**
  * What the ticked set adds up to. Directories are counted but not sized — their
  * bytes arrive through the files inside them, so summing both would double-count.
@@ -268,10 +274,6 @@ const requested = new Set<string>()
 
 const roots = computed(() => (props.sort ? sortNodes(props.nodes) : props.nodes))
 
-// One pass for the whole tree; every row reads its entry by id instead of
-// walking its own subtree on each render.
-const stats = computed(() => computeStats(props.nodes, checkedIds.value))
-
 /** Rows currently visible, in render order — the axis the arrow keys walk. */
 const visible = computed(() => {
   const out: FileNode[] = []

package/src/components/LpInput.vue

@@ -118,6 +118,7 @@ defineExpose({
     :style="hasField ? rootStyle : undefined"
   >
     <div
+      data-lp-ring-owner
       :class="[shellClass, hasLeading ? 'pl-2.5' : '', hasTrailing ? 'pr-1.5' : '', hasField ? '' : rootClass]"
       :style="hasField ? undefined : rootStyle"
     >
@@ -133,7 +134,7 @@ defineExpose({
         :disabled="disabled"
         :aria-invalid="isInvalidState || undefined"
         :class="[
-          'min-w-0 flex-1 bg-transparent outline-none placeholder:text-muted',
+          'lp-autofill min-w-0 flex-1 self-stretch bg-transparent outline-none placeholder:text-muted',
           hasLeading ? 'pl-2' : padX[size ?? 'md'],
           hasTrailing ? '' : padX[size ?? 'md'],
         ]"

package/src/components/LpModal.vue

@@ -140,16 +140,19 @@ function onOpenAutoFocus(event: Event) {
     // `focus-visible` is the browser's own heuristic and cannot be forced, so
     // the ring is driven off an attribute the kit owns. Removed as soon as the
     // element loses focus, leaving normal focus-visible behaviour in charge.
-    target.setAttribute("data-lp-focus-ring", "")
-    target.addEventListener(
-      "blur",
-      () => target.removeAttribute("data-lp-focus-ring"),
-      { once: true },
-    )
-    target.focus()
-    if (target instanceof HTMLInputElement && target.type === "text") {
-      target.select()
+    //
+    // Skipped for a control whose own shell already draws a ring on
+    // focus-within: our fields put the border and ring on the wrapper, so
+    // adding one to the bare <input> stacks a second ring inside the first.
+    if (!target.closest("[data-lp-ring-owner]")) {
+      target.setAttribute("data-lp-focus-ring", "")
+      target.addEventListener(
+        "blur",
+        () => target.removeAttribute("data-lp-focus-ring"),
+        { once: true },
+      )
     }
+    target.focus()
     return
   }
 }

package/src/components/LpNumberField.vue

@@ -28,6 +28,7 @@ defineEmits<{ (e: "update:modelValue", value: number | null): void }>()
     :max="max"
     :step="step"
     :disabled="disabled"
+    data-lp-ring-owner
     class="flex h-(--size-control-md) w-full items-center rounded-control border border-line bg-surface-soft transition-colors duration-[var(--duration-fast)] focus-within:border-brand focus-within:ring-2 focus-within:ring-ring data-[disabled]:cursor-not-allowed data-[disabled]:opacity-55"
     @update:model-value="(v) => $emit('update:modelValue', v ?? null)"
   >

package/src/components/LpPhoneInput.vue

@@ -150,6 +150,7 @@ const sizeClass = {
 
 <template>
   <div
+    data-lp-ring-owner
     class="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"
     :class="[
       sizeClass[size],
@@ -232,7 +233,7 @@ const sizeClass = {
       type="tel"
       inputmode="tel"
       autocomplete="tel"
-      class="min-w-0 flex-1 bg-transparent px-3 outline-none placeholder:text-muted"
+      class="lp-autofill min-w-0 flex-1 self-stretch bg-transparent px-3 outline-none placeholder:text-muted"
       @beforeinput="onBeforeInput"
       @paste="onPaste"
       @input="onInput"

package/src/tokens/utilities.css

@@ -36,3 +36,35 @@
   outline: none;
   box-shadow: 0 0 0 2px var(--color-ring);
 }
+
+/*
+ * Autofilled fields keep the field's own colours.
+ *
+ * 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.
+ *
+ * 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.
+ */
+.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);
+  -webkit-text-fill-color: var(--color-ink);
+  caret-color: var(--color-ink);
+  transition: background-color 100000s ease-in-out 0s;
+}
+
+/* Firefox names it differently and does honour a background here. */
+.lp-autofill:autofill,
+.lp-autofill:-moz-autofill {
+  background-color: var(--color-surface-soft);
+  color: var(--color-ink);
+  filter: none;
+}