anentrypoint-design 1.0.14 → 1.0.15

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "anentrypoint-design",
-  "version": "1.0.14",
+  "version": "1.0.15",
   "description": "247420 design system SDK — webjsx + modified ripple-ui, single-file ESM bundle for reproducible use of the AnEntrypoint design.",
   "type": "module",
   "main": "./dist/247420.js",

package/src/components/shell/app-shell.js

@@ -15,9 +15,18 @@ const h = webjsx.createElement;
 // call site having to remember to wire ThemeToggle() in by hand. Pass
 // `themeToggle: false` to opt a shell out (e.g. a kit that renders its own).
 export function Topbar({ brand = '247420', leaf = '', items = [], active = '', onNav, search, themeToggle = true } = {}) {
+    // `search` is either a plain placeholder string (Topbar renders the
+    // default uncontrolled input itself, and owns the icon below) or a
+    // caller-built VElement (has .type/.props — e.g. SearchInput(), a
+    // component that already renders its own icon + input + clear button).
+    // A VElement renders as-is with NO extra wrapper: SearchInput's own
+    // markup already covers the icon and the field, so wrapping it in
+    // Topbar's own '.app-search' icon+label previously doubled the search
+    // glyph (one from Topbar, one from inside SearchInput).
+    const isElement = search && typeof search === 'object' && 'type' in search;
     return h('header', { class: 'app-topbar', role: 'banner' },
         Brand({ name: brand, leaf }),
-        search ? h('label', { class: 'app-search' },
+        isElement ? search : (search ? h('label', { class: 'app-search' },
             // Line-icon, not the literal word "search" as a pseudo-glyph: the
             // text stand-in inherited .app-search .icon's 0.6 opacity, which
             // dropped --fg-3 to 3.74:1 on --bg-2 and failed AA as real text.
@@ -25,15 +34,8 @@ export function Topbar({ brand = '247420', leaf = '', items = [], active = '', o
             // contrast rule no longer applies to it and the affordance stops
             // depending on a colour value at all.
             h('span', { class: 'icon', 'aria-hidden': 'true' }, Icon('search', { size: 15 })),
-            // `search` is either a plain placeholder string (renders the
-            // default uncontrolled input) or a caller-built VElement (has
-            // .type/.props — e.g. a controlled <input> wired to app state)
-            // rendered as-is. Stringifying a VElement into placeholder/
-            // aria-label previously produced literal "[object Object]" text.
-            (search && typeof search === 'object' && 'type' in search)
-                ? search
-                : h('input', { type: 'search', name: 'q', placeholder: search, 'aria-label': `search ${search}` })
-        ) : null,
+            h('input', { type: 'search', name: 'q', placeholder: search, 'aria-label': `search ${search}` })
+        ) : null),
         h('nav', { 'aria-label': 'main navigation' }, ...items.map(([label, href]) => {
             const cleanLabel = String(label).replace(' ->', '');
             return h('a', {

package/src/css/app-shell/topbar.css

@@ -79,6 +79,14 @@ body.canvas-host { background: transparent !important; }
 .app-chrome > .app-crumb > .crumb-right { margin-left: auto; }
 .app-topbar > .brand { flex: 0 0 auto; }
 .app-topbar > .app-search { flex: 1 1 auto; }
+/* SearchInput() passed directly as Topbar's search prop renders with no
+   Topbar-owned wrapper (see Topbar's isElement branch). Its own outer span
+   (.ds-search-input-wrap) is display:contents, so .ds-search-field becomes
+   the actual direct .app-topbar flex-item child — an inline-flex box that
+   otherwise shrinks to its content and starves the input's own width:100%
+   of anything to grow into, truncating the placeholder. Matches
+   .app-search's flex-basis above so both search-slot shapes size the same. */
+.app-topbar > .ds-search-field { flex: 1 1 auto; max-width: 360px; min-width: 0; }
 .app-topbar > nav { margin-left: auto; }
 /* Utility cluster grouping: the theme toggle sits after the repo-info nav
    links with no visual separation between the two groups, so the row read