Adom UI Design System

@@ -1,6 +1,6 @@ {   "slug": "adom-ui-design",-  "version": "1.40.1",+  "version": "1.41.0",   "type": "skill",   "description": "The Adom UI Design System plus a bundle of focused UI skills (tooltips, floating-windows, toasts, responsive-ui, app-shell, ai-driven-apps, clickable-paths, dark-default, input-feedback, settings-layout). One install drops the whole set of skill files onto your container, plus shared icon assets (the settings cog) so every Adom app draws the same glyph.",   "dependencies": {},

@@ -301,6 +301,36 @@ collapse, and the 744 pair is the one that matters most because it is what the u   it is the row's internal packing that keeps label and action together. - 3 to 6 rows. More than six is a menu, not an invitation. +**⛔ EVERY PHRASE MUST FIT THE CELL AT THE RESTING WIDTH. A PHRASE THAT TRUNCATES IS AN+AUTHORING BUG, NOT A LAYOUT BUG.**++parts-search measured its own panel at 744px, rail closed, two columns, which is the state+John actually sits in: phrase cell 352px, clipping span 336px, **2 of 6 phrases truncated**.+Both cut off mid-"parts search". The teaching noun is the last word of nearly every phrase,+so the ellipsis eats precisely the words the panel exists to teach, silently, behind an+ellipsis that looks deliberate. Losing a part number would be untidy; losing the trigger noun+defeats the feature.++So:++1. **The budget is ~336px of rendered span at 14px**, at 744 rail-closed two-column. Measure+   each phrase with an OFF-DOM PROBE SPAN carrying the same font and no width constraint, and+   compare to the clipping span's width. Anything over, shorten.+2. **Put the trigger noun EARLY**, not last. "with parts search, price an STM32F103RBT6" beats+   "price an STM32F103RBT6 across vendors with parts search": if the tail ever does clip, it+   clips a detail rather than the routing words. This also reads better as a prompt.+3. **`nowrap` + ellipsis stays**, but as a backstop for a user who has dragged the pane narrow,+   never as the normal resting rendering. It is not a licence to ship a phrase that does not+   fit.++**AND MEASURE THE SPAN, NOT THE CELL.** parts-search's first instrument compared `scrollWidth`+to `clientWidth` on the CELL and reported **0 of 6 truncating**, which would have told the+fleet that its content clears the two-column cell. It does not. The inner span carries its own+`overflow: hidden`, so the clipping happens one level down and the cell never overflows: a cell+that reads as fitting is telling you where the `overflow` is declared, not whether the user can+read the phrase. Point the instrument at the element that actually clips, and confirm it+against a probe span's required width.+ **The two icon buttons** - Files: `assets/icons/action-copy.svg` and `assets/icons/action-send.svg` from THIS pack.   Inline them (so `currentColor` inherits); do not draw your own.@@ -394,9 +424,9 @@ setTimeout(() => { An empty panel is never a legitimate resting state, so a page that finds itself in one should say so rather than present it as design. -## Two traps that make a CORRECT-LOOKING panel render wrong+## Three traps that make a CORRECT-LOOKING panel render wrong -Both found by parts-search on 2026-08-25, and both passed every computed-style check it ran.+All found by parts-search on 2026-08-25, and all passed every computed-style check it ran.  **1. A shared `.btn` class can silently eat the demo button's fill.** Its CSS genuinely said `background: var(--accent)` on `.demo-btn`, but `.demo-btn` and `.btn` are both single-class@@ -423,6 +453,16 @@ remove the ordering dependency entirely with explicit areas: Then the heading spans both columns BY CONSTRUCTION rather than by luck, and the single-column form just redefines the areas. +**3. A DEAD selector and a LOSING selector look identical in the source and produce the+identical wrong pixel.** parts-search's first fix for trap 1 scoped the rule to `.say .say+.demo-btn`, double-prefixing the container class. That requires a `.say` inside a `.say`, so it+matched nothing and `.btn` kept painting the button surface: two versions shipped claiming the+fix while the measured color stayed `rgb(28,33,40)`. When you scope a rule to beat a shared+class, **verify the selector MATCHES SOMETHING** before you believe the fix:+`document.querySelectorAll('.say .demo-btn').length` must be non-zero, and the measured color+must be the accent. Source-reading cannot distinguish the two failures; only the count and the+pixel can.+ ## Two traps that keep a full-width panel a column  Found by chip-fetcher, the first app to convert: