fold-ng 0.2.0 → 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 +72 -1
- package/README.md +11 -3
- package/fesm2022/fold-ng.mjs +362 -76
- 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/tsconfig.lib.tsbuildinfo +0 -1
package/CHANGELOG.md
CHANGED
|
@@ -8,6 +8,75 @@ 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
|
+
|
|
68
|
+
## [0.2.1] - 2026-07-24
|
|
69
|
+
|
|
70
|
+
### Fixed
|
|
71
|
+
|
|
72
|
+
- **`fold-app-shell`** now sets the drawer's background `inert` via an attribute
|
|
73
|
+
binding (`[attr.inert]`) rather than a property binding. No behaviour change —
|
|
74
|
+
AOT was always clean — but it silences an `NG0303` "unknown property" warning
|
|
75
|
+
raised by the JIT element-schema in dev/test runtimes.
|
|
76
|
+
- **Published tarball** no longer ships `tsconfig.lib.tsbuildinfo` — a ~100 kB
|
|
77
|
+
TypeScript incremental-build cache that `finalize-dist` now prunes. Smaller
|
|
78
|
+
install (14 → 13 files).
|
|
79
|
+
|
|
11
80
|
## [0.2.0] - 2026-07-24
|
|
12
81
|
|
|
13
82
|
### Added
|
|
@@ -64,6 +133,8 @@ design-token stylesheet.
|
|
|
64
133
|
`currentColor`; `prefers-reduced-motion` + `forced-colors` are respected;
|
|
65
134
|
strings localise via inputs / providers (`provideFoldPanelLabels`).
|
|
66
135
|
|
|
67
|
-
[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
|
|
138
|
+
[0.2.1]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.2.1
|
|
68
139
|
[0.2.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.2.0
|
|
69
140
|
[0.1.0]: https://github.com/hugoheynard/fold-ng/releases/tag/v0.1.0
|
package/README.md
CHANGED
|
@@ -2,11 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
[](https://www.npmjs.com/package/fold-ng)
|
|
4
4
|
[](https://www.npmjs.com/package/fold-ng)
|
|
5
|
-
[](https://packagephobia.com/result?p=fold-ng)
|
|
6
6
|
[](https://www.npmjs.com/package/fold-ng)
|
|
7
7
|
[](./LICENSE)
|
|
8
8
|
[](./CHANGELOG.md)
|
|
9
9
|
[](https://hugoheynard.github.io/fold-ng/)
|
|
10
|
+
[](https://github.com/sponsors/hugoheynard)
|
|
10
11
|
|
|
11
12
|
**fold-ng** is an accessible, **dark-first Angular 22 UI component library and
|
|
12
13
|
design system** — signals-first, standalone, zoneless, and SSR-ready. It ships a
|
|
@@ -35,6 +36,12 @@ npm install fold-ng
|
|
|
35
36
|
Angular 22 (`@angular/core`, `@angular/common`, `@angular/forms`,
|
|
36
37
|
`@angular/platform-browser`) is a peer dependency.
|
|
37
38
|
|
|
39
|
+
> **Bundle size.** Components are standalone and the package is side-effect-free
|
|
40
|
+
> except its CSS (`sideEffects: ["**/*.css"]`), so you only ship what you import —
|
|
41
|
+
> not the whole library. (No Bundlephobia badge: it can't measure an Angular
|
|
42
|
+
> partial-Ivy package, which needs the Angular linker to become final JS — the
|
|
43
|
+
> install-size badge above is the honest figure.)
|
|
44
|
+
|
|
38
45
|
## Quickstart
|
|
39
46
|
|
|
40
47
|
Import the tokens once, then use any standalone component directly:
|
|
@@ -212,7 +219,7 @@ the package root.
|
|
|
212
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. |
|
|
213
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`.) |
|
|
214
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. |
|
|
215
|
-
| `
|
|
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. |
|
|
216
223
|
| `FoldCardComponent` | `fold-card` | Raised content surface (`surface-card` + consistent radius). |
|
|
217
224
|
| `FoldContextCardComponent` | `fold-context-card` | Titled info card: icon header + body + optional footer action. |
|
|
218
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`.) |
|
|
@@ -234,7 +241,8 @@ the package root.
|
|
|
234
241
|
| `FoldBadgeComponent` | `fold-badge` | Status / count pill (accent/info/warning/alert/success). |
|
|
235
242
|
| `FoldStatusBadgeComponent` | `fold-status-badge` | Status→colour badge (maps a domain status key to a tone). |
|
|
236
243
|
| `FoldChoiceRowComponent` | `fold-choice-row` | Segmented / chip selector. |
|
|
237
|
-
| `
|
|
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. |
|
|
238
246
|
| `FoldIconComponent` | `fold-icon` | SVG icon (114-icon built-in set + `FoldIconRegistry`). |
|
|
239
247
|
| `FoldSpinnerComponent` | `fold-spinner` | Indeterminate loading arc (`currentColor`, icon-sized, reduced-motion aware). Decorative by default; `label` → `role="status"`. Powers `loading` on the buttons. |
|
|
240
248
|
| `FoldAvatarComponent` / `…Detail` | `fold-avatar` | Initials/image avatar (square, muted, status ring) + identity cell. |
|