`, `

`. - `
` — the morphing container, `position:absolute; z-index:2; overflow:hidden`. - `.row` — 56px flex row: `` (two stacked SVGs: `.lens`, `.back`), ``, `.av` avatar, ``, and `` (an invisible full-row button used only when closed). - `.body` — `
` + `.chips`, `
` + `
`, `

`. Sample data (six transactions; `[name, meta, amount, tile initials]`; positive amounts render in `--primary`): | Name | Meta | Amount | Tile | |------|------|-------:|------| | Halden Ceramics | Card · 27 Sep | −1 240,00 | HC | | Salary · Loam Studio | Transfer · 25 Sep | +38 900,00 | LS | | Nord Post | Postage · 24 Sep | −84,00 | NP | | Marrow Coffee | Card · 24 Sep | −46,00 | MC | | Rent · Brf Tessel | Standing order · 1 Sep | −11 250,00 | BT | | Mira Pharmacy | Card · 22 Sep | −312,50 | MP | Recent-search chips: "Halden Ceramics", "rent", "coffee". Balance card: "Everyday · SEK" / "24 318,40" / "Available · payday in 4 days". Closed suggestions show the first four rows. ## Tokens ```css :root { /* tonal surfaces — dark, green bias */ --surface: #0f1512; --surface-low: #161d19; /* row hover behind */ --surface-c: #1b2320; /* open search view */ --surface-high: #252e2a; /* closed pill, icon tiles, result hover */ --surface-highest: #303935; --on-surface: #dfe4df; --on-surface-v: #b6c4b9; /* placeholder, secondary text */ --outline: #7f8d82; --outline-v: #3b4641; /* chip border */ /* primary — sage */ --primary: #9ad6a8; /* avatar, match highlight, positive amounts, focus */ --on-primary: #003919; --primary-c: #1f4d2f; /* balance card */ --on-primary-c: #b5f2c3; /* type */ --font: "Gabarito", system-ui, sans-serif; --fs-balance: 40px; --fs-input: 17px; --fs-body: 15px; --fs-chip: 14px; --fs-h: 13px; --fs-tile: 12px; /* geometry of the transform */ --bar-h: 56px; --r-bar: 28px; --inset: 16px; --top: 62px; /* 54 clearance + 8 */ --r-card: 28px; --r-row: 16px; --r-tile: 12px; --r-chip: 10px; /* motion */ --t-micro: 150ms; --t-big: 500ms; /* open */ --t-exit: 300ms; /* close */ --t-body-delay: 200ms; --ease-emph: cubic-bezier(.2, 0, 0, 1); --ease-exit: cubic-bezier(.3, 0, .8, .15); } ``` ## Typography | Role | Family | Size | Weight | Line-height | Tracking | Case | |-------------------|----------|-----:|-------:|------------:|---------:|-----------| | Balance | Gabarito | 40px | 600 | 1.05 | −0.03em | numerals | | Balance labels | Gabarito | 13px | 500 | 1.4 | 0 | sentence | | Input / placeholder | Gabarito | 17px | 400 | 1 | 0 | sentence | | Section heading | Gabarito | 13–14px | 600 | 1.3 | +0.06em | UPPERCASE | | Row title | Gabarito | 15px | 500 | 1.35 | 0 | sentence | | Row subtitle | Gabarito | 13px | 400 | 1.4 | 0 | sentence | | Amount | Gabarito | 15px | 600 | 1 | 0 | tabular numerals | | Chip | Gabarito | 14px | 500 | 1 | 0 | as typed | | Icon tile initials| Gabarito | 12px | 700 | 1 | 0 | UPPERCASE | | Match highlight | Gabarito | 15px | 600 | — | 0 | colour `--primary` | ## Motion | Element | Trigger | Property | From → To | Duration | Easing | Delay | |----------------|---------|--------------------------------|------------------------------------|---------:|---------------|------:| | `.sv` | open | top, left, right, height, border-radius, background | 62/16/16/56px/28px/high → 0/0/0/100%/0/surface-c | 500ms | `--ease-emph` | 0 | | `.sv` | close | same | reverse | 300ms | `--ease-exit` | 0 | | `.row` | open | margin-top | 0 → 54px | 500ms | `--ease-emph` | 0 | | `.lens` | open | opacity, rotate | 1, 0 → 0, 90° | 150 / 500ms | `--ease-emph` | 0 | | `.back` | open | opacity, rotate | 0, −90° → 1, 0 | 150 / 500ms | `--ease-emph` | 0 | | `.av` | open | opacity, scale | 1, 1 → 0, .6 | 150ms | linear | 0 | | `.body` | open | opacity, translateY | 0, 8px → 1, 0 | 300 / 400ms | `--ease-emph` | 200ms | | `.body` | close | opacity, translateY | 1, 0 → 0, 8px | 150ms | `--ease-exit` | 0 | | `.clr` | typing | opacity | 0 → 1 | 150ms | linear | 0 | | `.res li` | hover | background | transparent → surface-high | 0 | — | instant | Reduced motion: all durations 1ms, delays 0. The view still swaps between pill and full screen; focus still moves into the input. ## States - **Closed:** container is the pill; `.hit` covers the row and is the only tab stop; input and leading button are `tabindex="-1"`; leading button labelled "Search". - **Open:** `body.open`; `.hit` is `display:none`; input `tabindex="0"` and focused; leading button labelled "Back"; `main` is `aria-hidden="true"`. - **Has query:** `.row.has` — clear button visible; heading shows result count; matches highlighted. - **Empty result:** `.res` empty, `.empty` visible with the quoted query. - **Focus-visible:** 3px `--primary` outline, −3px offset on buttons, chips, the hit area and result rows. - **Positive amount:** `.in` colour `--primary`. ## Accessibility - Container is `role="search"`; the input has `aria-label="Search transactions"` and `type="search"`. - Closed, the entire pill is one `
` in the tab order; open, the order is Back → input → Clear (when visible) → chips → results (rows are `tabindex="0"`). - Esc closes and returns focus to the pill's hit button. - Results list is `aria-live="polite"` so counts and matches are announced as you type; the heading text ("3 results") changes with it. - The page behind gets `aria-hidden="true"` while open. - Contrast: `--on-surface-v` on `--surface-c` 9.4:1; `--primary` on `--surface-c` 9.6:1; `--on-primary-c` on `--primary-c` 8.5:1. - Hit targets: leading and clear buttons 48px, pill 56px, chips 36px (allow 44px row spacing), result rows 56px. ## Responsive rules - 390 wide: as specified. - 360 wide: identical geometry; the balance figure drops to 36px so it fits with the labels. - ≥ 600 wide: keep the pill at `max-width:560px` centred (`left/right:auto; margin:0 auto`), and open to a 560px centred sheet with 28px radius rather than full-bleed; the scrim behind is `rgba(15,21,18,.5)`. - Landscape: the open row still reserves the top safe area; the body scrolls internally. ## Acceptance checklist - [ ] Closed pill is 56px tall, 28px radius, inset 16px, top 62px, `#252E2A`. - [ ] Opening transitions top/left/right/height/border-radius on one element over 500ms `cubic-bezier(.2,0,0,1)` to `inset:0; radius:0`. - [ ] Closing uses 300ms `cubic-bezier(.3,0,.8,.15)`. - [ ] The search glyph rotates +90° out while the back arrow rotates in from −90°; both share the 500ms clock, opacity 150ms. - [ ] The suggestions body starts fading in 200ms after the tap and rises 8px. - [ ] Input is focused within 150ms of opening; Esc and the back arrow close. - [ ] Typing filters by substring, highlights the match in `#9AD6A8`, and updates the heading to "N result(s)". - [ ] A clear button appears only when the input has text; it empties the input and keeps focus there. - [ ] Empty results show "No transactions match "…"." and the list is empty. - [ ] The page behind is `aria-hidden` while the view is open. - [ ] Focus rings are visible on the pill, back, clear, chips and result rows. - [ ] Reduced motion: state change still completes; no residual delays. ## Implementation notes **Morph one absolutely positioned container by its box, not by scale.** Scaling would distort the text; transitioning the inset keeps everything crisp. Give open and closed rules different transition lists so the two speeds are explicit: ```css .sv { position:absolute; top:62px; left:16px; right:16px; height:56px; border-radius:28px; overflow:hidden; transition: top 300ms var(--ease-exit), left 300ms var(--ease-exit), right 300ms var(--ease-exit), height 300ms var(--ease-exit), border-radius 300ms var(--ease-exit), background 300ms; } .open .sv { top:0; left:0; right:0; height:100%; border-radius:0; background:var(--surface-c); transition: top 500ms var(--ease-emph), left 500ms var(--ease-emph), right 500ms var(--ease-emph), height 500ms var(--ease-emph), border-radius 500ms var(--ease-emph), background 500ms; } ``` **Glyph swap by rotation** — stack both SVGs absolutely in one 48px button: ```css .ib svg { position:absolute; transition: opacity 150ms, transform 500ms var(--ease-emph); } .ib .back { opacity:0; transform:rotate(-90deg); } .open .ib .back { opacity:1; transform:none; } .open .ib .lens { opacity:0; transform:rotate(90deg); } ``` **Highlight the match without innerHTML injection** — split the name around the index: ```js const i = name.toLowerCase().indexOf(q.toLowerCase()); b.append(name.slice(0, i)); const m = document.createElement('mark'); m.textContent = name.slice(i, i + q.length); b.append(m, name.slice(i + q.length)); ``` Common mistakes: fading the pill out and a new full-screen view in (breaks continuity — it must be the same element); forgetting the 54px top margin on the row when open, so the input lands under the status bar; leaving the input focusable while closed (two tab stops for one control). --- *From Design Lounge (https://www.designlounge.live). Live demo and source: /p/m3-search-bar-morph. Free to use in your products. Credit line: Designed using Design Lounge.*