fold-ng 0.2.1 → 0.3.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +59 -1
- package/README.md +3 -2
- package/fesm2022/fold-ng.mjs +360 -74
- package/fesm2022/fold-ng.mjs.map +1 -1
- package/llms.txt +2 -2
- package/package.json +1 -1
- package/tokens/scales.css +8 -0
- package/types/fold-ng.d.ts +294 -65
- package/types/fold-ng.d.ts.map +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,63 @@ All notable changes to **fold-ng** are documented here. The format follows
|
|
|
8
8
|
|
|
9
9
|
_Nothing yet._
|
|
10
10
|
|
|
11
|
+
## [0.3.0] - 2026-07-25
|
|
12
|
+
|
|
13
|
+
### Added
|
|
14
|
+
|
|
15
|
+
- **`fold-page-layout` — a custom title slot.** Project `[pageTitle]`
|
|
16
|
+
(`FoldPageTitleDirective`) for a rich header — an avatar, a two-tone name — in
|
|
17
|
+
place of the plain `icon` + `title` inputs; it renders inside the page `<h1>`
|
|
18
|
+
and its presence alone switches the header on. Non-breaking.
|
|
19
|
+
- **`fold-tabs` + `fold-tab-panel` — the in-page ARIA Tabs widget.** A
|
|
20
|
+
`role="tablist"` of `role="tab"` buttons that switch layered panels without
|
|
21
|
+
navigating: full roving-tabindex keyboard (arrows on both axes, `Home`/`End`,
|
|
22
|
+
wrap), `aria-selected` + `aria-orientation`, and each tab wired to its panel
|
|
23
|
+
(`aria-controls` ↔ `aria-labelledby`). The panels take the bar by template ref
|
|
24
|
+
(`[tabs]="t"`, `#t="foldTabs"`), so bar and panels coordinate even in separate
|
|
25
|
+
`fold-nav-layout` slots. Same look as `fold-view-nav`, different semantics.
|
|
26
|
+
- **Rail-width token scale** — `--fold-rail-primary` / `--fold-rail-secondary` /
|
|
27
|
+
`--fold-rail-tertiary`, named to pair 1:1 with the `--fold-color-bg-rail-*`
|
|
28
|
+
colours. `fold-app-shell`, `fold-aside-layout`, and `fold-nav-layout` default
|
|
29
|
+
their rail widths from this one scale (values unchanged).
|
|
30
|
+
|
|
31
|
+
### Changed
|
|
32
|
+
|
|
33
|
+
- **BREAKING — the tabs family is renamed** so the roles read at a glance (only
|
|
34
|
+
the in-page widget keeps "tab"):
|
|
35
|
+
- `fold-tab-layout` → **`fold-nav-layout`** (`FoldNavLayoutComponent`,
|
|
36
|
+
`exportAs="foldNavLayout"`, tokens `--fold-nav-layout-gap` /
|
|
37
|
+
`--fold-nav-layout-rail-width`). It lays out a bar — a nav _or_ a tabs
|
|
38
|
+
widget — plus content, so "tab" was misleading.
|
|
39
|
+
- `fold-tab-nav` → **`fold-view-nav`** (`FoldViewNavComponent`,
|
|
40
|
+
`FoldViewNavItem`). It is a navigation bar styled as tabs — now honest about
|
|
41
|
+
it, with `aria-current="page"` on the active item.
|
|
42
|
+
- Migration: rename the selectors/classes/tokens; for **in-page** (non-routing)
|
|
43
|
+
tabs, move to the new `fold-tabs` + `fold-tab-panel`.
|
|
44
|
+
- **BREAKING — `fold-view-nav` is now a real navigation component.** Items carry
|
|
45
|
+
a `link` (routerLink), `href`, or nothing (a button), plus optional `disabled`.
|
|
46
|
+
A linked item renders an actual `<a>`: cmd/middle-click opens a new tab, the
|
|
47
|
+
URL is a deep link, and the active state comes from `routerLinkActive` +
|
|
48
|
+
`aria-current="page"` — no `activeKey`. The inputs read as navigation too:
|
|
49
|
+
`[tabs]` → `[items]`, `(tabChange)` → `(activeChange)`.
|
|
50
|
+
- **BREAKING — `collapsed` split from `size`.** `size` is now pure density
|
|
51
|
+
(`compact` / `comfortable`); the icon mode is the boolean `collapsed`
|
|
52
|
+
(`size="reduce"` → `collapsed`). Applies to `fold-tabs` too. Collapsed +
|
|
53
|
+
vertical is an icon rail like a folded `fold-menu` — icon only, label as a
|
|
54
|
+
hover/focus tooltip, count as a corner bubble; narrow
|
|
55
|
+
`--fold-nav-layout-rail-width` to match.
|
|
56
|
+
- **BREAKING — `direction` defaults to `auto`** on `fold-view-nav` and
|
|
57
|
+
`fold-tabs`: inside a `fold-nav-layout` the bar follows the layout with no
|
|
58
|
+
wiring (the `[direction]="tl.stacked() ? …"` binding is no longer needed);
|
|
59
|
+
standalone it is `vertical` for `fold-view-nav`, `horizontal` for `fold-tabs`.
|
|
60
|
+
`fold-view-nav`'s `background` also defaults to `transparent` (was `surface`).
|
|
61
|
+
|
|
62
|
+
### Docs
|
|
63
|
+
|
|
64
|
+
- **`fold-nav-layout`** documents its two roles — page scaffold vs. a tabbed
|
|
65
|
+
section composed inside a `fold-page-section` — and that its bar is a
|
|
66
|
+
`fold-view-nav` (routes) or a `fold-tabs` (panels).
|
|
67
|
+
|
|
11
68
|
## [0.2.1] - 2026-07-24
|
|
12
69
|
|
|
13
70
|
### Fixed
|
|
@@ -76,7 +133,8 @@ design-token stylesheet.
|
|
|
76
133
|
`currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
|
|
77
134
|
strings localise via inputs / providers (`provideFoldPanelLabels`).
|
|
78
135
|
|
|
79
|
-
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.
|
|
136
|
+
[unreleased]: https://github.com/hugoheynard/fold-ng/compare/v0.3.0...HEAD
|
|
137
|
+
[0.3.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.3.0
|
|
80
138
|
[0.2.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.2.1
|
|
81
139
|
[0.2.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.2.0
|
|
82
140
|
[0.1.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.1.0
|
package/README.md
CHANGED
|
@@ -219,7 +219,7 @@ the package root.
|
|
|
219
219
|
| `FoldPageSectionComponent` | `fold-page-section` | Semantic `<section>` grouping — eyebrow title (names the region via `aria-labelledby`) + description + actions; `stack` / `bleed` helpers. Not a box — compose a `fold-card` inside for that. |
|
|
220
220
|
| `FoldHeroSectionComponent` | `fold-hero-section` | Full-bleed page splash — the borderless intro band at the top of a page (carries the `<h1>`). Direct child of `fold-page-layout`: cancels the gutter + top pad to sit flush, brand-tinted wash + hairline. `align` center·start, `wash`, `[heroBackdrop]` decorative lane. (For a bordered header card, see `fold-hero-card`.) |
|
|
221
221
|
| `FoldAsideLayoutComponent` | `fold-aside-layout` | Detail-page grid — a centred column flanked by up to two sticky rails (`[asideLeft]` / `[asideRight]`), collapsing to one column on its own container width (`:has()`-driven, container queries). Labelled rails become `complementary` landmarks; every track is a CSS var. |
|
|
222
|
-
| `
|
|
222
|
+
| `FoldNavLayoutComponent` | `fold-nav-layout` | Places a bar (`[tabNav]` — a `fold-view-nav` or a `fold-tabs`) with its content — `placement="top"` or a `side` rail that folds back on top (hysteretic, on its own width) below `foldAt`. `exportAs="foldNavLayout"` exposes `stacked()` so the projected bar follows in one binding. |
|
|
223
223
|
| `FoldCardComponent` | `fold-card` | Raised content surface (`surface-card` + consistent radius). |
|
|
224
224
|
| `FoldContextCardComponent` | `fold-context-card` | Titled info card: icon header + body + optional footer action. |
|
|
225
225
|
| `FoldHeroCardComponent` | `fold-hero-card` | Prominent header **card** — bordered surface × accent overlay + optional accent bar. (For a full-bleed page splash, see `fold-hero-section`.) |
|
|
@@ -241,7 +241,8 @@ the package root.
|
|
|
241
241
|
| `FoldBadgeComponent` | `fold-badge` | Status / count pill (accent/info/warning/alert/success). |
|
|
242
242
|
| `FoldStatusBadgeComponent` | `fold-status-badge` | Status→colour badge (maps a domain status key to a tone). |
|
|
243
243
|
| `FoldChoiceRowComponent` | `fold-choice-row` | Segmented / chip selector. |
|
|
244
|
-
| `
|
|
244
|
+
| `FoldViewNavComponent` | `fold-view-nav` | Navigation bar styled as tabs. Items carry a `link` (routerLink → a real `<a>`: cmd-click, deep-links, active state auto), an `href`, or nothing (a button); `aria-current="page"` on the active one. `direction="auto"` follows a wrapping `fold-nav-layout`; `collapsed` for an icon rail. For in-page panel switching use `fold-tabs` instead. |
|
|
245
|
+
| `FoldTabsComponent` + `FoldTabPanelComponent` | `fold-tabs` + `fold-tab-panel` | The in-page ARIA Tabs widget: `role="tablist"` + roving arrow-key keyboard, `aria-selected`/`aria-orientation`, each tab wired to its `fold-tab-panel` (`aria-controls` ↔ `aria-labelledby`). Panels take the bar by ref (`[tabs]="t"`) so they coordinate across `fold-nav-layout` slots. |
|
|
245
246
|
| `FoldIconComponent` | `fold-icon` | SVG icon (114-icon built-in set + `FoldIconRegistry`). |
|
|
246
247
|
| `FoldSpinnerComponent` | `fold-spinner` | Indeterminate loading arc (`currentColor`, icon-sized, reduced-motion aware). Decorative by default; `label` → `role="status"`. Powers `loading` on the buttons. |
|
|
247
248
|
| `FoldAvatarComponent` / `…Detail` | `fold-avatar` | Initials/image avatar (square, muted, status ring) + identity cell. |
|