fold-ng 0.9.0 → 0.10.1

package/CHANGELOG.md

@@ -8,6 +8,136 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.10.1] - 2026-08-12
+
+### Fixed
+
+- **A `side="auto"` panel now docks to the bottom on a narrow host.** It got the
+  bottom-sheet _shape_ (content height, rounded top, slide-up, grabber) but not
+  its _alignment_: the rule that pinned it, `align-items: flex-end`, selected
+  `.panel-dock` from **inside** the dock's own `@container` query — and an
+  element can never match its own container query (`container-type` makes it a
+  container for its _descendants_). The sheet kept the dock's default `stretch`
+  and filled the whole region, which reads as a sheet stuck to the top of the
+  screen. The alignment now rides on the panel (`align-self`), a real
+  descendant. Regression test in `e2e/panel.spec.ts` — a **wide viewport with a
+  narrow stage**, because shrinking the viewport instead lets some ancestor
+  container match ≤640 and answer the query in the dock's place, hiding the bug.
+
+- **A `background="surface"` tab bar is opaque.** `fold-view-nav` / `fold-tabs`
+  painted the rail-3 role, which is a 3% white **overlay** — so a bar a consumer
+  pinned with `position: sticky` had page content scrolling visibly through it.
+  The overlay is now layered over the page fill. On the page background — where
+  a filled bar belongs — the paint is unchanged; anywhere else it is opaque,
+  which is what "carries its own surface" always claimed.
+
+### Changed
+
+- **Tighter insets below 640px.** Three defaults step one notch down the spacing
+  scale on a phone, where a horizontal inset is charged twice against a reading
+  width that has none to spare: the nav↔content gap (`fold-nav-layout` and a
+  standalone `fold-view-nav`, 16 → 8px), the `fold-card` body and chrome padding
+  (16 → 12px, 12/16 → 8/12px), and the panel host's template-panel body
+  (16 → 12px, keyed to the dock's width, not the viewport). Every one keeps its
+  override: `--fold-nav-layout-gap`, `--fold-card-padding` and the card's
+  `padding` input (`p-sm` / `p-lg` / `p-none`) still win at every width — an
+  author who asked for a generous card meant it.
+
+## [0.10.0] - 2026-08-11
+
+### Changed
+
+- **BREAKING — `fold-file-dropzone` defaults to English copy.** `label` was
+  `"Glissez un fichier ou parcourez"` and `busyLabel` `"Téléversement en
+cours…"`; they are now `"Drag a file or browse"` and `"Uploading…"`. Both were
+  always inputs, so the fix for a French app is to pass the old strings — but a
+  library that defaults to one natural language makes every other consumer
+  override it just to be readable, which is the portability promise leaking. It
+  was the last of the seven release blockers in `docs/RELEASE-READINESS.md`.
+
+- **BREAKING — identical toasts collapse instead of stacking.** A `show()` whose
+  message _and_ variant match a toast already on screen now folds into it as a
+  `×N` tally and restarts its countdown, rather than queueing a copy: a retry
+  loop used to bury the screen under the same sentence. Opt out with
+  `provideFoldToasts({ dedupe: false })`. `FoldToast` gained a required
+  `repeats` field, so anything constructing that type by hand must supply it.
+
+- **`FoldToastService.show()` returns the toast's id** (it returned `void`). The
+  id was generated and thrown away, which made a sticky "Uploading…" impossible
+  to close from the code that opened it. A deduped call returns the id of the
+  toast it folded into. Ids now come from `FoldIdService`'s counter rather than
+  `crypto.randomUUID()`, which **throws outright** in a non-secure context
+  (plain http off localhost) and whose randomness bought nothing for an id that
+  only has to be unique within one queue.
+
+### Added
+
+- **`fold-info` — the `i` that answers "what is this?", now a primitive.** The
+  affordance shipped inlined in the field label row; it is extracted so the same
+  bubble works where there is no field at all — a dashboard card's corner, a
+  table header — which is exactly where the second consumer had hand-rolled it
+  (LaFolieDouce's admin: ~30 sites across the growth dashboard and the booking
+  rules). `text` · `label` (accessible name, English default) · `placement`.
+  `fold-input-base` now composes it instead of carrying its own copy, so the
+  `info` input on every labelled field renders the same component. A click, not
+  a hover: hover-only help is unreachable on a touch screen.
+
+- **`maxVisible` bounds the toast stack.** Beyond the cap the oldest toast is
+  evicted — it has been on screen longest, so it is the one already read. Unset
+  (the default) stays unbounded. Deliberately eviction and not a waiting queue:
+  a queue only drains when a visible toast leaves, and a sticky one — an
+  `error`, by default — never does, so the backlog would sit behind it forever.
+
+- **`fold-toast` pauses its countdown while it is being read.** Hovering the
+  toast, or moving the keyboard focus into it, freezes the auto-dismiss timer;
+  leaving resumes it with **the time that was left**, not a fresh `duration` —
+  a toast that renewed itself on every mouse pass would never leave. Focus
+  moving between the message and the close button counts as staying inside.
+  This is WCAG 2.2.1 (Timing Adjustable): the previous timer ran regardless, so
+  a message could expire mid-sentence, or while the pointer was travelling to
+  its ✕. The paused state is exposed as `data-paused` for styling.
+
+- **`info` on every labelled input — the explanation a `hint` can't carry.** An
+  `i` button at the end of the label line reveals a sentence or two in a
+  `fold-popover`. Lives in `fold-input-base`, so it lands on the whole family at
+  once: `fold-input`, `fold-number-input`, `fold-select`, `fold-textarea`,
+  `fold-date`, `fold-time`, `fold-listbox`, `fold-multiselect` (`[info]`, plus
+  `[infoLabel]` for the button's accessible name, default `More information`).
+  Composes with `hint` rather than replacing it — short line under the control,
+  the _why_ behind the `i`. The panel rides the popover's native top layer, so a
+  long explanation never pushes the next control down, and it escapes any
+  `overflow: hidden`. Consumers were hand-rolling this: LaFolieDouce B2B had a
+  bespoke absolutely-positioned bubble anchored to each field wrapper.
+
+### Fixed
+
+- **Opening a panel no longer shoves the page sideways.** The main content
+  jumped left by the panel's width and eased back — a long-standing glitch whose
+  cause turned out to be neither of the two suspects (an inner scrollbar, a
+  `backdrop-filter` repaint). Measured frame by frame: a panel begins its enter
+  animation parked off-edge at `translateX(100%)`, the dock did not clip, so the
+  parked panel joined the positioned host's **scrollable overflow**
+  (`scrollWidth` 960 → 1221 on the gallery); the focus trap then moved focus into
+  it and the browser scrolled the host sideways to reveal it
+  (`scrollLeft` 0 → 261); the slide-in shrank the overflow again and the scroll
+  was clamped back frame by frame, hence the eased return. Fixed with
+  `overflow: clip` on the dock — a parked panel has no business in anyone's
+  scrollable overflow — plus `focus({ preventScroll: true })` when a focus trap
+  activates, since entering an overlay must never scroll the page behind it.
+  `e2e/panel.spec.ts` samples the whole animation and fails on any sideways
+  scroll; jsdom cannot see this class of bug at all.
+
+- **A horizontal tab bar that doesn't fit now scrolls instead of clipping its
+  tail.** `fold-view-nav` and `fold-tabs` share a bar whose host clipped its
+  overflow while its items never wrap — so on a phone, the last entries of a
+  four-item `size="comfortable"` bar simply vanished, and with them any way of
+  reaching those pages. The host now scrolls on the inline axis (thin house
+  scrollbar, `overscroll-behavior-x: contain`) and the bar keeps its natural
+  width. Vertical rails are untouched — the page scroll already covers them, and
+  an inner scroll box there would trap the wheel — and so is `collapsed`, the
+  icon accordion, which is designed to fit any width and needs its overflow
+  visible for its tooltips.
+
 ## [0.9.0] - 2026-08-04
 
 ### Changed
@@ -1263,7 +1393,9 @@ design-token stylesheet.
   `currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
   strings localise via inputs / providers (`provideFoldPanelLabels`).
 
-[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.9.0...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.10.1...HEAD
+[0.10.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.10.1
+[0.10.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.10.0
 [0.9.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.9.0
 [0.8.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.8.1
 [0.8.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.8.0

package/README.md

@@ -310,6 +310,7 @@ ships it.
 | a **"delete X" danger block** (type-to-confirm)                  | `fold-danger-zone` (alert frame + blast-radius text + retype-to-arm)                                   |
 | a **status / count pill** · status→colour                        | `fold-badge` · `fold-status-badge`                                                                     |
 | a **tinted message / alert** row                                 | `fold-callout` (`inset` for in-flow)                                                                   |
+| a **"what is this?"** help bubble                                | `fold-info` (the `i` → popover; also the `info` input on every labelled field)                         |
 | a transient **toast**                                            | `fold-toast` + `FoldToastService`                                                                      |
 | a **card** · titled info card · page **splash**                  | `fold-card` · `fold-context-card` · `fold-hero-section` (bordered → `fold-hero-card`)                  |
 | in-page **tabs** · a routed **nav bar** · a segmented control    | `fold-tabs` · `fold-view-nav` · `fold-view-toggle` / `fold-choice-row`                                 |
@@ -385,6 +386,7 @@ ships it.
 | `FoldPanelFooterComponent`                               | `fold-panel-footer`                    | Panel/dialog action bar pairing with `fold-panel-header`: tokenised top border + padding + `align="end" \| "between" \| "start"`. Projects the buttons; sits `flex: none` so it stays pinned to the panel bottom while the body scrolls (no `position: sticky`).                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            |
 | `FoldPopoverComponent`                                   | `fold-popover`                         | Anchored floating layer — projected content in the native top layer (escapes `overflow`/`z-index`), positioned by a dependency-free **flip → size → shift** engine (`computePlacement`): a tall panel gets a `max-height` and scrolls inside the viewport. `[(open)]`; `autoUpdate` (ResizeObserver); optional `arrow`; native CSS enter/exit (`@starting-style` + `allow-discrete`); outside-click + `Escape` dismissal, focus-return, auto-wired `aria-haspopup`/`expanded`/`controls`.                                                                                                                                                                                                                                                                   |
 | `FoldDropdownComponent`                                  | `fold-dropdown`                        | Actions menu on `fold-popover` — `role="menu"` with `<fold-dropdown-item>`s, ↑/↓ roving, `Home`/`End`, type-ahead; opens onto the first enabled item, closes returning focus to the trigger. Give the trigger `foldPopoverTrigger="menu"`.                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                  |
+| `FoldInfoComponent`                                      | `fold-info`                            | The small `i` that answers "what is this?" — a quiet round trigger revealing a sentence or two in a `fold-popover` (native top layer, so it escapes `overflow: hidden` and every `z-index`). A **click**, not a hover: hover-only help is unreachable by touch. `text` · `label` (accessible name) · `placement`. It is what the `info` input on every labelled field renders, and it stands alone where there is no field — a card corner, a table header.                                                                                                                                                                                                                                                                                                 |
 
 | `FoldCalendarMonthComponent` | `fold-calendar-month` | Month grid where events **span** the days they cover: a date-axis `role="grid"` with one roving tab stop, and over it a lane-packed layer of bands (one per week crossed, with open edges). `+N` chips sit on the crowded day, not at the end of the row. |
 | `FoldCalendarWeekComponent` | `fold-calendar-week` | Seven day columns of stacked chips — nothing spans, so nothing is clipped and every chip is a real button in the tab order. Container-queried: labels and icons drop out before they truncate. |