anentrypoint-design 0.0.314 → 0.0.316

package/app-shell.css

@@ -277,8 +277,13 @@ body.canvas-host { background: transparent !important; }
 .brand .slash { color: var(--accent-ink); font-weight: 700; margin: 0 3px; }
 
 .app-search {
-  display: inline-flex; align-items: center; gap: 10px;
-  padding: 9px 16px; background: var(--bg-2);
+  display: inline-flex; align-items: center; gap: var(--space-2-5);
+  /* Snap to the single-line control ladder (--field-height == --ctl-md, 34px,
+     density-scaled) so the topbar search aligns with sibling topbar controls and
+     shrinks under [data-density]. Was raw 9px 16px padding off the ladder — the
+     one front-door input the control-height port missed. */
+  height: var(--field-height);
+  padding: 0 var(--space-3); background: var(--bg-2);
   border-radius: var(--r-pill);
   font-size: var(--fs-sm); color: var(--fg-3);
   max-width: 360px;
@@ -1170,7 +1175,9 @@ table tr.clickable:focus-visible td { background: var(--bg-2); }
 }
 .ds-barchart-label { font-size: var(--fs-sm); color: var(--fg-2); }
 .ds-barchart-track {
-  height: var(--space-2); border-radius: var(--r-pill);
+  /* 6px unifies with the system's other bar tracks (.ds-upload-bar,
+     .ds-bar-bg); was --space-2 (8px), the lone thicker slab in the bar family. */
+  height: var(--space-1-75); border-radius: var(--r-pill);
   background: var(--bg-3); overflow: hidden;
 }
 .ds-barchart-fill {
@@ -3333,10 +3340,33 @@ hr.rule-dotted { border-top: 1px dotted var(--rule-strong); }
 }
 .ds-field--lg textarea { height: auto; padding: var(--space-2-5) var(--space-4); font-size: var(--fs-body); }
 .ds-search-input::placeholder { color: var(--fg-3); }
-/* Only present when SearchInput is passed resultCount - transparent to any
-   flex/grid layout the bare input previously sat in directly. */
+/* Only present when SearchInput is passed resultCount or has a value (clear
+   button) - transparent to any flex/grid layout the bare input previously
+   sat in directly. */
 .ds-search-input-wrap { display: contents; }
 
+/* Visible clear (X) button for SearchInput - mirrors .ds-alert-dismiss's
+   ghost-icon treatment but sized to the kit's 44px touch-target floor
+   (app-shell.css already establishes this convention for .ds-file-check /
+   .ds-density-btn / .ds-upload-act etc). Positioned by the consumer's own
+   flex/grid context (ds-search-input-wrap is display:contents), so it simply
+   sits after the input in DOM order. */
+.ds-search-clear {
+  display: inline-flex;
+  align-items: center; justify-content: center;
+  min-width: 44px; min-height: 44px;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--fg-3);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  border-radius: var(--r-1);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-search-clear:hover { background: var(--bg-2); color: var(--fg); }
+.ds-search-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+
 .ds-field input:focus-visible,
 .ds-field textarea:focus-visible,
 .ds-field .ds-select:focus-visible,

package/dist/247420.css

@@ -829,8 +829,13 @@
 .ds-247420 .brand .slash { color: var(--accent-ink); font-weight: 700; margin: 0 3px; }
 
 .ds-247420 .app-search {
-  display: inline-flex; align-items: center; gap: 10px;
-  padding: 9px 16px; background: var(--bg-2);
+  display: inline-flex; align-items: center; gap: var(--space-2-5);
+  /* Snap to the single-line control ladder (--field-height == --ctl-md, 34px,
+     density-scaled) so the topbar search aligns with sibling topbar controls and
+     shrinks under [data-density]. Was raw 9px 16px padding off the ladder — the
+     one front-door input the control-height port missed. */
+  height: var(--field-height);
+  padding: 0 var(--space-3); background: var(--bg-2);
   border-radius: var(--r-pill);
   font-size: var(--fs-sm); color: var(--fg-3);
   max-width: 360px;
@@ -1722,7 +1727,9 @@
 }
 .ds-247420 .ds-barchart-label { font-size: var(--fs-sm); color: var(--fg-2); }
 .ds-247420 .ds-barchart-track {
-  height: var(--space-2); border-radius: var(--r-pill);
+  /* 6px unifies with the system's other bar tracks (.ds-upload-bar,
+     .ds-bar-bg); was --space-2 (8px), the lone thicker slab in the bar family. */
+  height: var(--space-1-75); border-radius: var(--r-pill);
   background: var(--bg-3); overflow: hidden;
 }
 .ds-247420 .ds-barchart-fill {
@@ -3877,10 +3884,33 @@
 }
 .ds-247420 .ds-field--lg textarea { height: auto; padding: var(--space-2-5) var(--space-4); font-size: var(--fs-body); }
 .ds-247420 .ds-search-input::placeholder { color: var(--fg-3); }
-/* Only present when SearchInput is passed resultCount - transparent to any
-   flex/grid layout the bare input previously sat in directly. */
+/* Only present when SearchInput is passed resultCount or has a value (clear
+   button) - transparent to any flex/grid layout the bare input previously
+   sat in directly. */
 .ds-247420 .ds-search-input-wrap { display: contents; }
 
+/* Visible clear (X) button for SearchInput - mirrors .ds-alert-dismiss's
+   ghost-icon treatment but sized to the kit's 44px touch-target floor
+   (app-shell.css already establishes this convention for .ds-file-check /
+   .ds-density-btn / .ds-upload-act etc). Positioned by the consumer's own
+   flex/grid context (ds-search-input-wrap is display:contents), so it simply
+   sits after the input in DOM order. */
+.ds-247420 .ds-search-clear {
+  display: inline-flex;
+  align-items: center; justify-content: center;
+  min-width: 44px; min-height: 44px;
+  flex-shrink: 0;
+  cursor: pointer;
+  color: var(--fg-3);
+  background: transparent;
+  border: 0;
+  padding: 0;
+  border-radius: var(--r-1);
+  transition: background var(--dur-snap) var(--ease), color var(--dur-snap) var(--ease);
+}
+.ds-247420 .ds-search-clear:hover { background: var(--bg-2); color: var(--fg); }
+.ds-247420 .ds-search-clear:focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }
+
 .ds-247420 .ds-field input:focus-visible,
 .ds-247420 .ds-field textarea:focus-visible,
 .ds-247420 .ds-field .ds-select:focus-visible,
@@ -8994,8 +9024,8 @@
     color: var(--panel-text, var(--fg-text));
     border: 1px solid var(--rule);
     border-radius: var(--r-1, 6px);
-    padding: 6px 10px;
-    font-size: 12px;
+    padding: var(--space-1-75) var(--space-2-5);
+    font-size: var(--fs-micro);
     line-height: 1.4;
     max-width: 280px;
     box-shadow: var(--shadow-3);