@vvedantb/ui 0.15.0 → 0.15.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vvedantb/ui",
-  "version": "0.15.0",
+  "version": "0.15.1",
   "license": "MIT",
   "description": "Shared React 19 UI for web apps: one JavaScript entry (primitives, shell pieces, app helpers including the Convex and Clerk provider, VITE env parsing and ensure-user, artifact viewers over the @vvedantb/server artifacts core, native tokens), design-token CSS, shared Tailwind v4 CSS and a Tailwind preset.",
   "type": "module",

package/src/ui/clear-input.tsx

@@ -130,25 +130,25 @@ const ClearInput = React.forwardRef<HTMLInputElement, ClearInputProps>(
           )}
           {...props}
         />
-        <div
-          ref={mirrorRef}
-          className={cn(
-            "t-clear-mirror border-0 bg-transparent text-foreground shadow-none",
-            fieldClassName,
-          )}
-          aria-hidden="true"
-        />
-        <div
-          ref={placeholderRef}
-          className={cn(
-            "t-clear-placeholder border-0 bg-transparent text-field-placeholder shadow-none",
-            fieldClassName,
-          )}
-          aria-hidden="true"
-        >
-          {placeholder}
+        <div className="t-clear-clip" aria-hidden="true">
+          <div
+            ref={mirrorRef}
+            className={cn(
+              "t-clear-mirror border-0 bg-transparent text-foreground shadow-none",
+              fieldClassName,
+            )}
+          />
+          <div
+            ref={placeholderRef}
+            className={cn(
+              "t-clear-placeholder border-0 bg-transparent text-field-placeholder shadow-none",
+              fieldClassName,
+            )}
+          >
+            {placeholder}
+          </div>
+          <div ref={glowRef} className="t-clear-glow" />
         </div>
-        <div ref={glowRef} className="t-clear-glow" aria-hidden="true" />
         {value.length > 0 && !clearing ? (
           <button
             type="button"

package/tokens/README.md

@@ -15,7 +15,7 @@ Design tokens and shared Tailwind v4 CSS for the vvedantb web apps. The CSS and
 | `@vvedantb/ui/tokens/css/tabs-pills.css` | `src/css/tabs-pills.css` | `--tabs-*` colour variables, `.t-tabs--segmented`, `.t-tabs--pills` and pill hover / active fills. |
 | `@vvedantb/ui/tokens/css/utilities.css` | `src/css/utilities.css` | `@utility hit-target` and `@utility reveal-on-hover`. `rounded-surface` moved to `tokens.css` in 0.7.1. |
 | `@vvedantb/ui/tokens/css/scrollbar-thin.css` | `src/css/scrollbar-thin.css` | `.scrollbar-thin` (`@layer utilities`, always emitted). Imported by `tokens.css` from 0.15.0. |
-| `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. |
+| `@vvedantb/ui/tokens/css/clear-input.css` | `src/css/clear-input.css` | `ClearInput` layers (`.t-clear*`) and the `--clear-*` / `--glow-*` timings. Imported by `tokens.css`. From 0.15.1 the layers clip in `.t-clear-clip`, so `.t-clear` keeps the focus ring, and the placeholder layer only shows during `.is-clearing`. |
 | `@vvedantb/ui/tokens/css/motion.css` | `src/css/motion.css` | `.ui-page-enter`, `.ui-enter`, `.ui-enter-up`, `.ui-stagger`, their keyframes and reduced-motion rules, and the `html[data-page-motion="off"]` overrides for `PageMotionProvider`. Imported by `tokens.css`. |
 | `@vvedantb/ui/tokens/css/animations.css` | `src/css/animations.css` | `animate-aurora`, `animate-fade-in-up`, `animate-indeterminate` as `@theme` (CSS-first apps). |
 | `@vvedantb/ui/tokens/css/compat-shadcn-rgb.css`, `@vvedantb/ui/tokens/compat/shadcn-rgb.css` | `src/css/compat-shadcn-rgb.css` | Replaces `tokens.css` for apps with shadcn-style `R G B` channel variables. Defines only the UI-only `--color-*` names as `rgb(var(--x) / alpha)` references, `--radius-field`, `--scrollbar`, `--field-radius`, the same three radius utilities as `tokens.css` and `.glass-panel-strong` (solid `--popover` from 0.15.0). Import it **or** `tokens.css`, never both. |

package/tokens/src/css/clear-input.css

@@ -1,6 +1,6 @@
 /*
  * @vvedantb/ui/tokens/css/clear-input.css: layers for @vvedantb/ui
- * ClearInput (`.t-clear`, mirror, placeholder and glow), the transitions.dev
+ * ClearInput (`.t-clear`, clip, mirror, placeholder and glow), the transitions.dev
  * input clear with dissolve. tokens.css imports it.
  *
  * clearInputDissolve reads the variables below from `html`. Set any of them
@@ -27,39 +27,50 @@
 }
 
 @layer components {
+  /* No overflow clip on .t-clear: it would cut the input's focus ring.
+     .t-clear-clip clips the layers to the field instead. It never moves, so
+     the mirror and placeholder can fly in and out under it. Its radius
+     follows .t-clear; put a rounded-* class on wrapperClassName to match an
+     input with another radius. */
   .t-clear {
     position: relative;
-    overflow: hidden;
+    border-radius: var(--radius-field, 0);
   }
+  .t-clear-clip,
   .t-clear-mirror,
-  .t-clear-placeholder {
+  .t-clear-placeholder,
+  .t-clear-glow {
     position: absolute;
     inset: 0;
-    display: flex;
-    align-items: center;
     pointer-events: none;
-    white-space: nowrap;
     overflow: hidden;
-    z-index: 2;
   }
-  .t-clear-mirror {
+  .t-clear-clip {
+    border-radius: inherit;
+  }
+  .t-clear-mirror,
+  .t-clear-placeholder {
+    display: flex;
+    align-items: center;
+    white-space: nowrap;
     opacity: 0;
+    z-index: 2;
   }
+  /* The input's own placeholder shows at rest. The layer only shows while
+     clearInputDissolve drops it in, and the native one hides meanwhile. */
   .t-clear.has-value .t-clear-mirror,
-  .t-clear.is-clearing .t-clear-mirror {
+  .t-clear.is-clearing .t-clear-mirror,
+  .t-clear.is-clearing .t-clear-placeholder {
     opacity: 1;
   }
+  .t-clear.is-clearing > input::placeholder {
+    opacity: 0;
+  }
   .t-clear.has-value > input,
   .t-clear.is-clearing > input {
     -webkit-text-fill-color: transparent;
   }
-  .t-clear.has-value .t-clear-placeholder {
-    opacity: 0;
-  }
   .t-clear-glow {
-    position: absolute;
-    inset: 0;
-    pointer-events: none;
     opacity: 0;
     z-index: 3;
     mix-blend-mode: multiply;