maquina-components 0.6.1 → 0.7.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 0a445c4fe008c07069fd7d0e9fd4249c9a169410e9a53fa6cdaa6c2455351b92
-  data.tar.gz: c0964a27ecfdbd92797ee8c03a24d7c9e6db2b5e41147d2d81bf18ff2e38540d
+  metadata.gz: ca1b928bf464480638e3f7504164a10cfecab249eed3a970dbaaad5a3d5b311a
+  data.tar.gz: 27998f7d8cdf85c6e49af5b4db527086093149130af50a722105e8970c01838c
 SHA512:
-  metadata.gz: 7c59d1819376a7242cbac12758ceffdb6e221184a29150b6f70364b275545f84d8da7c3235a5d9bdc3a1044e08622dba5b379615e2bc7053e8647506f83b6b7c
-  data.tar.gz: 340d7fcd15e476d17e2244cb7e7b29563b27e7fff360c09f9427d2ccc0491379b4dc5c412e4b8be9447159bbb75fd9d47bade573fbfb9497284d3d9ada629931
+  metadata.gz: 8105dbdafd0bbf1f1be19ff9ba7f920f42f79b74703098e4229131b5310fb50cbd7e3ecdbf2af2cecfcd7f2f241f15be247e8592d5534995ed3cba931de50e7e
+  data.tar.gz: 31286d951a265d58bb22021f625242ce36e612ce9d0fe6a8a8ac3c057d0f845d34ea240ba1d2cf15aa4a87a33be8592bee5e1c8483a26b4bc733b069528ba27e

data/README.md

@@ -165,7 +165,8 @@ bin/rails maquina:doctor
 ```
 
 It scans your CSS, views and JavaScript and prints file:line for every pattern
-the new release changes, grouped `BREAKING` / `REVIEW` / `CLEANUP`. It is
+the new release changes, grouped `BREAKING` / `REVIEW` / `CLEANUP`, each tagged
+with the release it came from. It is
 advisory: it never edits anything and never fails a build. See
 [docs/upgrading.md](docs/upgrading.md) for what changed and how to keep the
 previous look.

data/app/assets/stylesheets/badge.css

@@ -133,8 +133,9 @@
 
   /* Focus state for keyboard navigation */
   [data-component="badge"]:where(a:focus-visible, button:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/breadcrumbs.css

@@ -55,7 +55,7 @@
     @apply text-sm;
     font-weight: var(--label-weight, 500);
     @apply underline-offset-4;
-    @apply transition-colors;
+    @apply transition-[color,background-color,border-color,text-decoration-color];
     color: var(--muted-foreground);
   }
 
@@ -73,9 +73,16 @@
     @apply underline;
   }
 
+  /* The underline is kept, but it cannot be the *only* signal: on a page whose
+     breadcrumbs are the sole keyboard stops, a text-decoration change reads as
+     nothing happening. Ring first, underline as reinforcement. */
   [data-breadcrumb-part="link"]:where(:focus-visible) {
-    @apply outline-none underline;
+    @apply underline;
     color: var(--foreground);
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
+    outline-offset: var(--focus-ring-offset, 0px);
   }
 
   /* ===== Breadcrumb Page (current) ===== */
@@ -126,6 +133,15 @@
     color: var(--foreground);
   }
 
+  /* It is a trigger, so it is a tab stop, so it rings. */
+  [data-breadcrumb-part="ellipsis"]:where(:focus-visible) {
+    color: var(--foreground);
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+
   /* ===== Overflow Dropdown (top-layer popover) ===== */
   /* Visual styling comes from dropdown_menu.css via data-dropdown-menu-part.
      Anchor positioning places the popover in modern browsers;
@@ -156,17 +172,38 @@
     @apply shrink-0 whitespace-nowrap;
   }
 
-  /* Allow the last item (current page) to truncate gracefully instead of hard-clipping */
+  /* The last item (current page) is the overflow sponge of last resort: when a
+     single long title cannot be helped by collapsing anything, it truncates
+     rather than pushing the bar out of its box. */
   :where([data-controller="breadcrumb"]) [data-breadcrumb-part="item"]:where(:last-child) {
     @apply shrink min-w-0 overflow-hidden;
-    text-overflow: ellipsis;
   }
 
+  /* display:block, not the inline-flex the other parts get. text-overflow has
+     no effect on a flex container's own box, so this rule used to hard-clip
+     mid-word -- "A Very Long Current Pag" -- while claiming to truncate
+     gracefully. A block box renders the ellipsis. An icon inside still flows
+     inline and keeps its margin. */
   :where([data-controller="breadcrumb"] [data-breadcrumb-part="item"]:last-child) :is([data-breadcrumb-part="page"], [data-breadcrumb-part="link"]) {
-    @apply overflow-hidden;
+    @apply block overflow-hidden whitespace-nowrap;
     text-overflow: ellipsis;
   }
 
+  /* Measuring mode, toggled by breadcrumb_controller.js for the length of one
+     measurement. The sponge above is exactly what makes scrollWidth useless:
+     flex resolves a deficit by shrinking a shrinkable item *before* it lets the
+     line overflow, so the label absorbs everything down to 0px and
+     scrollWidth === clientWidth at every width. Measured: content wanting 430px
+     in a 300px box reported no overflow at all, which is why the width-based
+     collapse never fired and collapse_after had to be invented to fake it.
+     Pinning the last item to its natural width for the measurement makes the
+     list report the space it actually wants. */
+  :where([data-controller="breadcrumb"]) [data-breadcrumb-part="list"].breadcrumb-measuring [data-breadcrumb-part="item"]:where(:last-child) {
+    flex-shrink: 0;
+    min-width: max-content;
+    overflow: visible;
+  }
+
   /* Items hidden by Stimulus controller */
   :where([data-controller="breadcrumb"]) [data-breadcrumb-target="item"]:where(.hidden),
   :where([data-controller="breadcrumb"]) [data-breadcrumb-target="ellipsisSeparator"]:where(.hidden) {
@@ -183,11 +220,6 @@
     [data-breadcrumb-part="list"] {
       @apply gap-1;
     }
-
-    /* Hide middle items on very small screens by default */
-    :where([data-component="breadcrumbs"][data-auto-collapse]) [data-breadcrumb-part="item"]:where(:not(:first-child):not(:last-child)) {
-      @apply hidden sm:inline-flex;
-    }
   }
 
   /* ===== Separator Variants ===== */

data/app/assets/stylesheets/calendar.css

@@ -65,7 +65,7 @@
     cursor: pointer;
     background-color: transparent;
     color: var(--foreground);
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
   }
 
   [data-calendar-part="header"] button svg {
@@ -78,8 +78,9 @@
   }
 
   [data-calendar-part="header"] button:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -135,7 +136,7 @@
     cursor: pointer;
     background-color: transparent;
     color: var(--foreground);
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
   }
 
   /* ===== Day Variants ===== */
@@ -228,8 +229,9 @@
   [data-calendar-part="day"]:where(:focus-visible) {
     position: relative;
     z-index: 10;
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 }

data/app/assets/stylesheets/card.css

@@ -127,8 +127,9 @@
   }
 
   [data-component="card"]:where(a:focus-visible, button:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 }

data/app/assets/stylesheets/combobox.css

@@ -159,6 +159,15 @@
     @apply disabled:cursor-not-allowed disabled:opacity-50;
   }
 
+  /* The search field is a real tab stop -- the popover opens onto it -- so the
+     `outline-none` above has to be paid back here, like every other field. */
+  [data-combobox-part="input"]:where(:focus-visible) {
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-offset: var(--focus-ring-offset, 0px);
+  }
+
   /* ===== Options List ===== */
   [data-combobox-part="list"] {
     @apply max-h-[300px] overflow-y-auto overflow-x-hidden p-1;
@@ -172,7 +181,7 @@
     cursor: default;
     user-select: none;
     color: var(--popover-foreground, var(--foreground));
-    @apply gap-2 py-1.5 text-sm outline-none transition-colors;
+    @apply gap-2 py-1.5 text-sm outline-none transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--combobox-item-radius, var(--control-radius, 0.375rem));
     @apply pl-8 pr-2; /* Space for check icon on left */
   }

data/app/assets/stylesheets/date_picker.css

@@ -48,7 +48,7 @@
     color: var(--foreground);
     cursor: pointer;
     text-align: left;
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
   }
 
   [data-date-picker-part="trigger"] svg {
@@ -102,8 +102,9 @@
 
   [data-date-picker-part="trigger"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -112,11 +113,11 @@
   }
 
   /* Error state — the root :has() drives the trigger */
-  :where([data-component="date-picker"]:has(input:invalid), [data-component="date-picker"]:has(input[aria-invalid="true"])) [data-date-picker-part="trigger"] {
-    border-color: var(--destructive);
+  :where([data-component="date-picker"]:has(input:user-invalid), [data-component="date-picker"]:has(input[aria-invalid="true"])) [data-date-picker-part="trigger"] {
+    border-color: var(--destructive-border, var(--destructive));
   }
 
-  :where([data-component="date-picker"]:has(input:invalid), [data-component="date-picker"]:has(input[aria-invalid="true"])) [data-date-picker-part="trigger"]:where(:focus-visible) {
+  :where([data-component="date-picker"]:has(input:user-invalid), [data-component="date-picker"]:has(input[aria-invalid="true"])) [data-date-picker-part="trigger"]:where(:focus-visible) {
     --focus-ring-color: var(--destructive);
   }
 

data/app/assets/stylesheets/drawer.css

@@ -114,7 +114,7 @@
   /* ===== Drawer Close Button ===== */
   [data-drawer-part="close"] {
     @apply inline-flex items-center justify-center p-1;
-    @apply transition-colors;
+    @apply transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--drawer-close-radius, var(--control-radius, 0.375rem));
     color: var(--foreground);
   }
@@ -130,8 +130,9 @@
 
   /* outline, not a ring: the drawer panel clips box-shadow rings */
   [data-drawer-part="close"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/dropdown_menu.css

@@ -149,7 +149,7 @@
     cursor: default;
     user-select: none;
     color: var(--popover-foreground, var(--foreground));
-    @apply gap-2 px-2 py-1.5 text-sm outline-none transition-colors;
+    @apply gap-2 px-2 py-1.5 text-sm outline-none transition-[color,background-color,border-color,text-decoration-color];
     border-radius: var(--dropdown-menu-item-radius, var(--control-radius, 0.375rem));
   }
 

data/app/assets/stylesheets/form.css

@@ -95,7 +95,7 @@
     @apply border px-3 py-1;
     @apply text-base md:text-sm;
     @apply outline-none;
-    @apply transition-[color,box-shadow,outline-color];
+    @apply transition-[color,box-shadow];
 
     border-radius: var(--input-radius, var(--control-radius, 0.375rem));
     background-color: var(--control-fill, var(--maquina-control-fill-default, transparent));
@@ -141,8 +141,9 @@
   /* Focus state — keyboard only. The bare :focus used to ring on mouse click. */
   [data-component="input"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -153,11 +154,18 @@
 
   /* Invalid/error state — the destructive halo is themeable through
      --focus-ring-color, which the :focus-visible rule above also reads. */
-  [data-component="input"]:where([aria-invalid="true"], :invalid:not(:placeholder-shown)) {
+  [data-component="input"]:where([aria-invalid="true"], :user-invalid) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    border-color: var(--destructive-border, var(--destructive));
+  }
+
+  /* The destructive halo is a focus affordance, not a resting one: painting an
+     outline on an unfocused field doubles the border and reads as a second
+     error. Gated to match the :focus-visible rule above. */
+  [data-component="input"]:where([aria-invalid="true"], :user-invalid):where(:focus-visible) {
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -178,7 +186,7 @@
     @apply border px-3 py-2;
     @apply text-base md:text-sm;
     @apply outline-none resize-y;
-    @apply transition-[color,box-shadow,outline-color];
+    @apply transition-[color,box-shadow];
 
     border-radius: var(--textarea-radius, var(--control-radius, 0.375rem));
     background-color: var(--control-fill, var(--maquina-control-fill-default, transparent));
@@ -194,8 +202,9 @@
   /* ----- States ----- */
   [data-component="textarea"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -203,11 +212,18 @@
     @apply cursor-not-allowed opacity-50;
   }
 
-  [data-component="textarea"]:where([aria-invalid="true"], :invalid:not(:placeholder-shown)) {
+  [data-component="textarea"]:where([aria-invalid="true"], :user-invalid) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    border-color: var(--destructive-border, var(--destructive));
+  }
+
+  /* The destructive halo is a focus affordance, not a resting one: painting an
+     outline on an unfocused field doubles the border and reads as a second
+     error. Gated to match the :focus-visible rule above. */
+  [data-component="textarea"]:where([aria-invalid="true"], :user-invalid):where(:focus-visible) {
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -220,7 +236,7 @@
     @apply border px-3 py-1 pr-8;
     @apply text-base md:text-sm;
     @apply outline-none appearance-none cursor-pointer;
-    @apply transition-[color,box-shadow,outline-color];
+    @apply transition-[color,box-shadow];
 
     border-radius: var(--select-radius, var(--control-radius, 0.375rem));
     background-color: var(--control-fill, var(--maquina-select-fill-default, var(--background)));
@@ -257,8 +273,9 @@
   /* ----- States ----- */
   [data-component="select"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -268,7 +285,7 @@
 
   [data-component="select"]:where([aria-invalid="true"]) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
+    border-color: var(--destructive-border, var(--destructive));
   }
 
   /* ===================================================================
@@ -338,8 +355,9 @@
 
   [data-component="checkbox"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -349,9 +367,10 @@
 
   [data-component="checkbox"]:where([aria-invalid="true"]) {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    border-color: var(--destructive-border, var(--destructive));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -392,8 +411,9 @@
 
   [data-component="radio"]:where(:focus-visible) {
     border-color: var(--ring);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -435,8 +455,9 @@
   }
 
   [data-component="switch"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--ring) 50%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -474,7 +495,15 @@
     @apply h-9 px-4 py-2;
     @apply cursor-default;
     @apply outline-none;
-    @apply transition-colors;
+    /* NOT `transition-colors`. Tailwind v4 folds outline-color into that
+       utility, so the focus ring would animate from its pre-focus value -- the
+       initial `currentColor`, i.e. the control's own text color -- over 150ms.
+       On a filled variant that is a near-white ring for the first frames, which
+       is no focus indicator at all; it also makes every getComputedStyle read
+       taken right after a Tab press report the previous color, which is how
+       this was mis-reported as an inert --focus-ring-color token. Keep
+       outline-color out of every transition in this engine. */
+    @apply transition-[color,background-color,border-color,text-decoration-color];
     @apply select-none;
 
     /* SVG icons inside buttons */
@@ -591,10 +620,20 @@
    * variant declares, so a single selector suffices and no variant can clobber
    * it; it also survives forced-colors mode and overflow-hidden ancestors, and
    * needs no knowledge of the backdrop color.
+   *
+   * Longhands, not the `outline` shorthand. The shorthand is invalid at
+   * computed-value time as a unit: if any one var() fails to resolve, all three
+   * longhands reset to their initial values and the ring vanishes entirely --
+   * and `outline-color: currentColor` looks plausible on a dark-text control,
+   * which is how a missing ring stays unreported. Longhands isolate a failure
+   * to the property that actually failed.
+   *
+   * The base rule must never transition outline-color -- see the note there.
    */
   [data-component="button"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 
@@ -626,7 +665,11 @@
   [data-form-part="error"] {
     @apply text-sm;
     font-weight: var(--label-weight, 500);
-    color: var(--destructive-foreground);
+    /* Error text sits on the page, not on a destructive fill, so it is the one
+       place --destructive-foreground is the wrong role. Which of the pair is
+       readable as text depends on the host palette's convention, so it routes
+       through its own token: see docs/theming.md. */
+    color: var(--destructive-text, var(--destructive-foreground));
   }
 
   /* Rails error wrapper compatibility */
@@ -638,9 +681,15 @@
   :where(.field_with_errors) [data-component="textarea"],
   :where(.field_with_errors) [data-component="select"] {
     --focus-ring-color: color-mix(in oklch, var(--destructive) 20%, transparent);
-    border-color: var(--destructive);
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
+    border-color: var(--destructive-border, var(--destructive));
+  }
+
+  :where(.field_with_errors) [data-component="input"]:where(:focus-visible),
+  :where(.field_with_errors) [data-component="textarea"]:where(:focus-visible),
+  :where(.field_with_errors) [data-component="select"]:where(:focus-visible) {
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, color-mix(in oklch, var(--destructive) 20%, transparent));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/menu_button.css

@@ -77,8 +77,9 @@
   }
 
   [data-menu-button-part="trigger"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--sidebar-ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--sidebar-ring, var(--ring)));
     outline-offset: var(--focus-ring-offset, 0px);
   }
 

data/app/assets/stylesheets/pagination.css

@@ -58,7 +58,7 @@
     @apply text-sm;
     border-radius: var(--pagination-radius, var(--control-radius, 0.375rem));
     font-weight: var(--label-weight, 500);
-    @apply transition-colors duration-150;
+    @apply transition-[color,background-color,border-color,text-decoration-color] duration-150;
 
     /* Size */
     @apply h-9 min-w-9 px-3;
@@ -136,8 +136,9 @@
   [data-pagination-part="link"]:where(:focus-visible),
   [data-pagination-part="previous"]:where(:focus-visible),
   [data-pagination-part="next"]:where(:focus-visible) {
-    outline: var(--focus-ring-width, 3px) var(--focus-ring-style, solid)
-             var(--focus-ring-color, var(--ring));
+    outline-width: var(--focus-ring-width, 3px);
+    outline-style: var(--focus-ring-style, solid);
+    outline-color: var(--focus-ring-color, var(--ring));
     outline-offset: var(--focus-ring-offset, 0px);
   }