fold-ng 0.6.0 → 0.7.0

package/CHANGELOG.md

@@ -8,6 +8,100 @@ All notable changes to **fold-ng** are documented here. The format follows
 
 _Nothing yet._
 
+## [0.7.0] - 2026-07-29
+
+### Added
+
+- **`fold-panel-host` gains two per-panel options: `modal` and `surface`.**
+  Passed through `FoldPanelHostService.open(component, { modal, surface })` (and
+  available on template-panel descriptors).
+  - **`modal`** (default `true`) — the existing modal barrier: page scroll frozen,
+    background `inert`, focus trapped, backdrop click dismisses. **`modal: false`**
+    makes a **non-modal** panel: the page keeps scrolling and stays interactive
+    behind it, focus is not trapped, and clicking outside no longer closes it
+    (only the header / `Escape` / `close()` do). The barrier is now gated on
+    _whether any open panel is modal_, so a lone non-modal panel never freezes the
+    page; `aria-modal` reflects the real modality.
+  - **`surface`** (`"glass"` default · `"solid"`) — `solid` renders an **opaque**
+    sheet (`--fold-color-surface-card`, no `backdrop-filter`) for content that must
+    stay legible over any background or a plain white-sheet design; `glass` keeps
+    the frosted translucent look. Both default to today's behaviour, so existing
+    panels are unchanged. Specs cover barrier-gating, scroll-lock, pass-through
+    dock, surface + `aria-modal` reflection, and focus-trap gating.
+
+- **Panel config now cascades through three layers instead of only the call
+  site.** A panel's shape (`side`, `width`, `modal`, `surface`) is resolved
+  highest-priority-first: the per-call `open()` option → the component's own
+  `static readonly foldPanel: FoldPanelDefaults` → an app-wide
+  `FOLD_PANEL_DEFAULTS` token. So a panel declares its **intrinsic** nature once
+  on the class (a cart _is_ non-modal + solid → `open(CartPanel)` with no
+  options), an app sets its **identity** once at bootstrap
+  (`provideFoldPanelDefaults({ surface: "solid" })`), and the call site is left
+  for genuine one-offs. `data` / `providers` / `stack` / `ariaLabel` stay
+  per-call. Fully backward-compatible: with no token and no static, every panel
+  keeps today's literal defaults (`right` / `490` / modal / `glass`). New
+  exports: `FOLD_PANEL_DEFAULTS`, `provideFoldPanelDefaults`, and the
+  `FoldPanelDefaults` / `FoldPanelDefaultsProvider` / `FoldPanelSurface` types.
+  Specs cover each layer and their precedence.
+
+- **Named panel widths — `width: 'sm' | 'md' | 'lg' | 'xl'`.** A token scale
+  (`360 · 490 · 640 · 820px`) replaces the magic pixel number at the call site;
+  `md` is the historical default, and a raw `number` still works for a bespoke
+  case. Cascades like the rest (`FoldPanelDefaults.width`). New `FoldPanelSize`
+  type.
+
+- **`disableClose` — guard the casual close.** Set it (per-call, on the
+  component static, or app-wide) to suppress the host's _implicit_ dismiss
+  gestures — `Escape` and a backdrop click — for a panel with unsaved edits. The
+  header close button and `FoldPanelRef.close()` are unaffected, so the panel
+  stays closeable on purpose. Default `false`; orthogonal to `modal`. Specs cover
+  Escape + backdrop suppression and that an ordinary panel still dismisses.
+
+### Fixed
+
+- **A vertical `fold-view-nav` / `fold-tabs` rail no longer flips to a crammed
+  horizontal bar on a narrow _window_ while its layout keeps it on the side.**
+  The shared tab-bar carried a leftover `@media (max-width: 768px)` block that
+  rotated `.dir-vertical` items to a row on the **viewport** width. Since the nav
+  redesign, orientation is owned entirely by `resolvedDirection` — an explicit
+  `direction`, or, inside a `fold-nav-layout`, the layout folding the rail on top
+  on its **own** width. The viewport query fought that: when the window dropped
+  below `768px` but the nav-layout's own width stayed above `foldAt` (so it kept
+  the rail on the side, `is-row`), the items turned horizontal _inside_ the
+  vertical rail instead of moving above the content. The block is removed;
+  orientation is now purely container-driven, honouring fold's "responsive on its
+  own width, never the viewport" contract. A standalone vertical nav that must
+  collapse belongs in a `fold-nav-layout` (the container-driven tool).
+
+## [0.6.1] - 2026-07-28
+
+### Changed
+
+- **`fold-tab-panel` now owns the vertical rhythm between its children.** It was
+  a neutral `display: block` with no spacing, so stacked `fold-page-section`s (or
+  cards) inside a panel sat flush against each other — the page gap only reaches
+  the _direct_ children of `.page-body`, and a tab panel isn't one. A panel is a
+  content region, like `.page-body`, so it now lays its children out as a flex
+  column with a `gap`. The gap is the new **`--fold-panel-gap`** token — fluid
+  `16 → 24px`, deliberately one notch tighter than `--fold-page-gap` (`20 → 32px`)
+  so panel content reads as one screen rather than distinct page bands. Escape
+  hatch unchanged from `.page-body`: wrap two elements in a container to tighten
+  them (a single child gets no gap at all). Consumers that re-established this
+  spacing by hand on the panel can drop it.
+
+### Fixed
+
+- **`fold-page-layout` header no longer starves the title/description on narrow
+  screens.** The head was a permanent `space-between` row: the actions slot held
+  its intrinsic width (`flex: none`) while the text column carried `min-width: 0`,
+  so wide `[pageActions]` (e.g. two full-label buttons) squeezed the description
+  down to its longest word — one word per line, stacked vertically. Below `640px`
+  the head now stacks: title/description take the full width and the actions drop
+  onto their own row beneath. Keyed to **both** the viewport (`@media`) and an
+  ancestor container (`@container`, for the gallery's responsive preview), mirroring
+  `app-shell`. The actions slot also gained `flex-wrap` so several wide buttons
+  wrap among themselves instead of overflowing the gutter.
+
 ## [0.6.0] - 2026-07-28
 
 ### Added
@@ -621,7 +715,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.6.0...HEAD
+[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.7.0...HEAD
+[0.7.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.7.0
+[0.6.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.6.1
 [0.6.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.6.0
 [0.5.2]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.5.2
 [0.5.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.5.1