@apliteni/apliteni-ui 0.34.0 → 0.34.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@apliteni/apliteni-ui",
-  "version": "0.34.0",
+  "version": "0.34.1",
   "workspaces": [
     "react"
   ],

package/src/styles/layout.css

@@ -333,9 +333,11 @@
 .ui-app--topbar > .ui-app__rail > .ui-app__head { height: var(--ui-app-band); padding-bottom: 0; }
 .ui-app--topbar > .ui-app__rail > .ui-app__foot { height: var(--ui-app-band); padding-top: 0; }
 
-/* Drawn as a field, behaving as a button. The ladder is the field's — the sunken
-   step, the hairline and the radius src/styles/input.css:20 `.ui-input` sets — because
-   what it looks like is the point. It gives way before anything else on the band.
+/* Drawn as a field, behaving as a button. The hairline and the radius are the
+   field's — src/styles/input.css:20 `.ui-input,` sets both — because what it looks
+   like is the point. The STEP is not, and that is the one thing this control does
+   differently from every other field in the kit: the reason is on the declaration
+   below. It gives way before anything else on the band.
    why: docs/specification.md#the-page-shell */
 .ui-app__search {
   display: flex;
@@ -350,13 +352,28 @@
   font-size: var(--text-sm);
   text-align: start;
   color: var(--muted);
-  background: var(--surface-2);
+  /* --surface, not the sunken --surface-2 every other field in the kit takes:
+     those sit on a card and this one sits on the band, and the band IS --bg, the
+     bottom of the ladder — so a sunken fill has nowhere to go but down into its
+     own ground. Measured in light, the field was 1.10:1 BELOW the band and its
+     key cap 1.04:1 against the field it sits in; they are 1.08 above and 1.14 now.
+     Dark trades the other way and is stated rather than hidden: the cap goes
+     1.29 -> 1.16, because --surface-3 and --surface are adjacent rungs there.
+     Artur chose this over three alternatives on #318; the survey of what seven
+     other systems do is docs/reviews/318-search-field.md.
+     why: docs/specification.md#elevation */
+  background: var(--surface);
   border: 1px solid var(--border);
   border-radius: var(--radius-md);
   cursor: pointer;
   transition: border-color var(--dur-med) var(--ease), color var(--dur-med) var(--ease);
 }
 .ui-app__search:hover { border-color: var(--border-strong); color: var(--strong); }
+/* Every other control on the band takes the kit's ring. This one is a <button>
+   without `.ui-btn`, so base.css's shared rule never reached it and focus fell
+   through to the browser's own square outline, drawn around a 12px radius.
+   why: docs/specification.md#the-focus-ring */
+.ui-app__search:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--accent); }
 /* The same glyph the palette draws in its own search box, at the same box and the
    same stroke: the trigger and the thing it opens are not two search marks.
    src/styles/command-palette.css:107 `.ui-cmdk__search-ic svg` */