@masmarino/gabarit 1.4.0 → 2.1.0

package/README.md

@@ -13,6 +13,47 @@ dataviz, no external dependency.
 npm install @masmarino/gabarit
 ```
 
+## Imports
+
+Every component is an entry point of its own, named after its folder (the folder of the README the
+link on its name opens). Import it from there:
+
+```ts
+import { Button } from '@masmarino/gabarit/button'
+import { Select, type SelectOption } from '@masmarino/gabarit/select'
+import { AuthLogin } from '@masmarino/gabarit/auth-login'
+```
+
+An application's bundler (esbuild, behind `ng build`) splits its code by file, and an entry point is
+one file: a component only a lazily loaded page uses stays in that page's chunk, out of the first
+download. The root, `@masmarino/gabarit`, still re-exports every name, so code written for 2.0 builds
+unchanged, but importing from it puts every component the application uses anywhere into its first
+chunk: an application should not import from it.
+
+A few entry points hold more than one component, because they are used together:
+
+| Entry point      | Holds                                                                                          |
+| ---------------- | ---------------------------------------------------------------------------------------------- |
+| `accordion`      | `Accordion`, `AccordionItem`                                                                   |
+| `app-shell`      | `AppShell`, `AppShellNavGroup`                                                                 |
+| `card`           | `Card`, `CardHeader`, `CardLink`                                                               |
+| `chart`          | The chart's building blocks (`ChartFrame`, `ChartAxis`, `ChartTooltip`…) and its scales, ticks and paths |
+| `copy-button`    | `CopyButton` and the clipboard helpers (`copyToClipboard`, `ClipboardFeedback`…)               |
+| `date-picker`    | `DatePicker`, `DateRangePicker`                                                                |
+| `format`         | The formatting functions and their pipes                                                       |
+| `icon`           | `Icon`, `IconRegistry`                                                                         |
+| `list-toolbar`   | `ListToolbar`, `createListToolbarState`                                                        |
+| `menu`           | `Menu`, `MenuTrigger`, `MenuItem`                                                              |
+| `nav-tabs`       | `NavTabs`, `NavTab`                                                                            |
+| `stat-tile`      | `StatTile`, `StatTileLink`                                                                     |
+| `tabs`           | `Tabs`, `Tab`                                                                                  |
+| `auth`           | The auth kit's ports, labels, rules and error helpers, `AuthPanel`, `AuthFooter`               |
+| `mfa-enrollment` | `MfaEnrollment`, `TotpQr`, `BackupCodes`                                                       |
+| `docs`           | The documentation reader (see below)                                                           |
+
+The auth pages are `auth-login`, `auth-register`, `auth-activate` and `auth-reset-password`; the
+account settings blocks `mfa-settings` and `passkey-settings`.
+
 ## Components
 
 Each component has its own README, with the detail of its inputs and
@@ -22,104 +63,102 @@ outputs — the link is on its name.
 
 | Component                                                                               | Selector               | Role                                                                 |
 | --------------------------------------------------------------------------------------- | ---------------------- | -------------------------------------------------------------------- |
-| [Avatar](projects/gabarit/src/lib/components/atoms/avatar/README.md)                    | `gbt-avatar`           | User picture with an initials fallback.                              |
-| [Badge](projects/gabarit/src/lib/components/atoms/badge/README.md)                      | `gbt-badge`            | Status/category label pill.                                          |
-| [Button](projects/gabarit/src/lib/components/atoms/button/README.md)                    | `gbt-button`           | Action button.                                                       |
-| [ButtonLink](projects/gabarit/src/lib/components/atoms/button-link/README.md)           | `a[gbtButton]`         | Anchor styled as a button (router-agnostic).                         |
-| [Checkbox](projects/gabarit/src/lib/components/atoms/checkbox/README.md)                | `gbt-checkbox`         | Checkbox, integrated with forms.                                     |
-| [CodeChip](projects/gabarit/src/lib/components/atoms/code-chip/README.md)               | `gbt-code-chip`        | Monospace chip for a SHA, tag or branch; truncates, optional copy.   |
-| [CopyButton](projects/gabarit/src/lib/components/atoms/copy-button/README.md)           | `gbt-copy-button`      | Copies a value to the clipboard, with a live-region confirmation.    |
-| [Counter](projects/gabarit/src/lib/components/atoms/counter/README.md)                  | `gbt-counter`          | Small number pill: cap (`99+`), neutral / primary.                   |
-| [Divider](projects/gabarit/src/lib/components/atoms/divider/README.md)                  | `gbt-divider`          | Separating line with an optional centred label.                      |
-| [GaugeBar](projects/gabarit/src/lib/components/atoms/gauge-bar/README.md)               | `gbt-gauge-bar`        | Progress gauge with alert thresholds.                                |
-| [Icon](projects/gabarit/src/lib/components/atoms/icon/README.md)                        | `gbt-icon`             | Registered SVG icon, with generic built-in glyphs (`Gallery` story). |
-| [IconMarker](projects/gabarit/src/lib/components/atoms/icon-marker/README.md)           | `gbt-icon-marker`      | Icon on a soft tinted disc or tile, six tones.                       |
-| [Input](projects/gabarit/src/lib/components/atoms/input/README.md)                      | `gbt-input`            | Text or password field.                                              |
-| [JobStatus](projects/gabarit/src/lib/components/atoms/job-status/README.md)             | `gbt-job-status`       | CI job status glyph (extracted from the job graph).                  |
-| [NotificationDot](projects/gabarit/src/lib/components/atoms/notification-dot/README.md) | `gbt-notification-dot` | Dot or count overlaid on the corner of what it wraps.                |
-| [SaveStatus](projects/gabarit/src/lib/components/atoms/save-status/README.md)           | `gbt-save-status`      | Saving / saved / not saved status, live region.                      |
-| [Skeleton](projects/gabarit/src/lib/components/atoms/skeleton/README.md)                | `gbt-skeleton`         | Loading placeholder: line, circle or rectangle.                      |
-| [Slider](projects/gabarit/src/lib/components/atoms/slider/README.md)                    | `gbt-slider`           | Native range slider, integrated with forms.                          |
-| [Sparkline](projects/gabarit/src/lib/components/atoms/sparkline/README.md)              | `gbt-sparkline`        | Fixed-size trend mini-chart.                                         |
-| [Spinner](projects/gabarit/src/lib/components/atoms/spinner/README.md)                  | `gbt-spinner`          | Standalone loading indicator.                                        |
-| [Switch](projects/gabarit/src/lib/components/atoms/switch/README.md)                    | `gbt-switch`           | On/off toggle.                                                       |
-| [Tag](projects/gabarit/src/lib/components/atoms/tag/README.md)                          | `gbt-tag`              | Custom-colored, optionally removable label.                          |
-| [Textarea](projects/gabarit/src/lib/components/atoms/textarea/README.md)                | `gbt-textarea`         | Multiline text field.                                                |
+| [Avatar](projects/gabarit/avatar/README.md)                    | `gbt-avatar`           | User picture with an initials fallback.                              |
+| [Badge](projects/gabarit/badge/README.md)                      | `gbt-badge`            | Status/category label pill.                                          |
+| [Button](projects/gabarit/button/README.md)                    | `gbt-button`           | Action button.                                                       |
+| [Checkbox](projects/gabarit/checkbox/README.md)                | `gbt-checkbox`         | Checkbox, integrated with forms.                                     |
+| [CopyButton](projects/gabarit/copy-button/README.md)           | `gbt-copy-button`      | Copies a value to the clipboard, with a live-region confirmation.    |
+| [Divider](projects/gabarit/divider/README.md)                  | `gbt-divider`          | Separating line with an optional centred label.                      |
+| [GaugeBar](projects/gabarit/gauge-bar/README.md)               | `gbt-gauge-bar`        | Progress gauge with alert thresholds.                                |
+| [Icon](projects/gabarit/icon/README.md)                        | `gbt-icon`             | Registered SVG icon, with generic built-in glyphs (`Gallery` story). |
+| [IconMarker](projects/gabarit/icon-marker/README.md)           | `gbt-icon-marker`      | Icon on a soft tinted disc or tile, six tones.                       |
+| [Input](projects/gabarit/input/README.md)                      | `gbt-input`            | Text or password field.                                              |
+| [JobStatus](projects/gabarit/job-status/README.md)             | `gbt-job-status`       | CI job status glyph (extracted from the job graph).                  |
+| [NotificationDot](projects/gabarit/notification-dot/README.md) | `gbt-notification-dot` | Dot or count overlaid on the corner of what it wraps.                |
+| [SaveStatus](projects/gabarit/save-status/README.md)           | `gbt-save-status`      | Saving / saved / not saved status, live region.                      |
+| [Skeleton](projects/gabarit/skeleton/README.md)                | `gbt-skeleton`         | Loading placeholder: line, circle or rectangle.                      |
+| [Slider](projects/gabarit/slider/README.md)                    | `gbt-slider`           | Native range slider, integrated with forms.                          |
+| [Sparkline](projects/gabarit/sparkline/README.md)              | `gbt-sparkline`        | Fixed-size trend mini-chart.                                         |
+| [Spinner](projects/gabarit/spinner/README.md)                  | `gbt-spinner`          | Standalone loading indicator.                                        |
+| [Switch](projects/gabarit/switch/README.md)                    | `gbt-switch`           | On/off toggle.                                                       |
+| [Tag](projects/gabarit/tag/README.md)                          | `gbt-tag`              | Custom-colored, optionally removable label.                          |
+| [Textarea](projects/gabarit/textarea/README.md)                | `gbt-textarea`         | Multiline text field.                                                |
 
 ### Molecules
 
 | Component                                                                                     | Selector                                 | Role                                                                   |
 | --------------------------------------------------------------------------------------------- | ---------------------------------------- | ---------------------------------------------------------------------- |
-| [Accordion](projects/gabarit/src/lib/components/molecules/accordion/README.md)                | `gbt-accordion` / `gbt-accordion-item`   | Collapsible sections.                                                  |
-| [Alert](projects/gabarit/src/lib/components/molecules/alert/README.md)                        | `gbt-alert`                              | Persistent inline banner message.                                      |
-| [Autocomplete](projects/gabarit/src/lib/components/molecules/autocomplete/README.md)          | `gbt-autocomplete`                       | Text field with async suggestions.                                     |
-| [AvatarGroup](projects/gabarit/src/lib/components/molecules/avatar-group/README.md)           | `gbt-avatar-group`                       | Overlapping avatars with a +N overflow menu.                           |
-| [Breadcrumb](projects/gabarit/src/lib/components/molecules/breadcrumb/README.md)              | `gbt-breadcrumb`                         | Ancestor trail plus current segment.                                   |
-| [Card](projects/gabarit/src/lib/components/molecules/card/README.md)                          | `gbt-card`                               | Titled container.                                                      |
-| [CheckboxGroup](projects/gabarit/src/lib/components/molecules/checkbox-group/README.md)       | `gbt-checkbox-group`                     | Group of checkboxes (fieldset + legend), value is an array.            |
-| [CopyField](projects/gabarit/src/lib/components/molecules/copy-field/README.md)               | `gbt-copy-field`                         | Read-only monospace value with a copy button.                          |
-| [DatePicker](projects/gabarit/src/lib/components/molecules/date-picker/README.md)             | `gbt-date-picker`                        | Single date, calendar dropdown, integrated with forms.                 |
-| [DateRangePicker](projects/gabarit/src/lib/components/molecules/date-range-picker/README.md)  | `gbt-date-range-picker`                  | Start and end dates, calendar dropdown.                                |
-| [DescriptionList](projects/gabarit/src/lib/components/molecules/description-list/README.md)   | `gbt-description-list`                   | Label/value pairs on a `dl`, `valueAlign`, opt-in stacking.            |
-| [DimensionCard](projects/gabarit/src/lib/components/molecules/dimension-card/README.md)       | `gbt-dimension-card`                     | Dimension table with an accented hover row.                            |
-| [Disclosure](projects/gabarit/src/lib/components/molecules/disclosure/README.md)              | `gbt-disclosure`                         | Single disclosure: toggle button and panel, `open` model.              |
-| [EmptyState](projects/gabarit/src/lib/components/molecules/empty-state/README.md)             | `gbt-empty-state`                        | Placeholder for an empty list/grid.                                    |
-| [FileUpload](projects/gabarit/src/lib/components/molecules/file-upload/README.md)             | `gbt-file-upload`                        | Drag-and-drop or click file selection, removable list.                 |
-| [FunnelChart](projects/gabarit/src/lib/components/molecules/funnel-chart/README.md)           | `gbt-funnel-chart`                       | Step-by-step conversion funnel.                                        |
-| [JobGraph](projects/gabarit/src/lib/components/molecules/job-graph/README.md)                 | `gbt-job-graph`                          | Pipeline jobs by stage, linked by their dependencies.                  |
-| [ListCard](projects/gabarit/src/lib/components/molecules/list-card/README.md)                 | `gbt-list-card`                          | Card for a list: header band, loading / failed / empty / ready states. |
-| [ListRow](projects/gabarit/src/lib/components/molecules/list-row/README.md)                   | `gbt-list-row`                           | List item: leading status, title, meta, trailing actions.              |
-| [ListToolbar](projects/gabarit/src/lib/components/molecules/list-toolbar/README.md)           | `gbt-list-toolbar`                       | Search + sort controls for a list.                                     |
-| [Menu](projects/gabarit/src/lib/components/molecules/menu/README.md)                          | `gbt-menu`                               | Generic dropdown menu.                                                 |
-| [MenuItem](projects/gabarit/src/lib/components/molecules/menu-item/README.md)                 | `button[gbtMenuItem]` / `a[gbtMenuItem]` | Menu item: icon, danger variant, disabled, link form.                  |
-| [NavTabs](projects/gabarit/src/lib/components/molecules/nav-tabs/README.md)                   | `gbt-nav-tabs` / `a[gbtNavTab]`          | Router-agnostic nav links: icon, badge, orientation, fades.            |
-| [PageHeader](projects/gabarit/src/lib/components/molecules/page-header/README.md)             | `gbt-page-header`                        | Page title block: heading, badges, meta, actions.                      |
-| [Pagination](projects/gabarit/src/lib/components/molecules/pagination/README.md)              | `gbt-pagination`                         | Page navigation for a list/table.                                      |
-| [Panel](projects/gabarit/src/lib/components/molecules/panel/README.md)                        | `gbt-panel`                              | Flat side-panel section: heading, actions, content.                    |
-| [Popover](projects/gabarit/src/lib/components/molecules/popover/README.md)                    | `gbt-popover`                            | Floating panel opened by a click on its trigger.                       |
-| [RadioGroup](projects/gabarit/src/lib/components/molecules/radio-group/README.md)             | `gbt-radio-group`                        | Radio button group, integrated with forms.                             |
-| [SecretReveal](projects/gabarit/src/lib/components/molecules/secret-reveal/README.md)         | `gbt-secret-reveal`                      | Masked secret: show / hide and copy.                                   |
-| [SegmentedControl](projects/gabarit/src/lib/components/molecules/segmented-control/README.md) | `gbt-segmented-control`                  | Exclusive-choice button group (`tinted`, `fullWidth`, `wrap`).         |
-| [Select](projects/gabarit/src/lib/components/molecules/select/README.md)                      | `gbt-select`                             | Dropdown list, single or multiple.                                     |
-| [SkeletonList](projects/gabarit/src/lib/components/molecules/skeleton-list/README.md)         | `gbt-skeleton-list`                      | Placeholder rows for a loading list, with a polite status.             |
-| [StatGrid](projects/gabarit/src/lib/components/molecules/stat-grid/README.md)                 | `gbt-stat-grid`                          | Responsive grid of stat tiles (container query), loading state.        |
-| [StatTile](projects/gabarit/src/lib/components/molecules/stat-tile/README.md)                 | `gbt-stat-tile`                          | Figure with label, icon, hint, trend and optional link.                |
-| [Stepper](projects/gabarit/src/lib/components/molecules/stepper/README.md)                    | `gbt-stepper`                            | Informational progress through numbered steps.                         |
-| [Table](projects/gabarit/src/lib/components/molecules/table/README.md)                        | `gbt-table`                              | Data table.                                                            |
-| [Tabs](projects/gabarit/src/lib/components/molecules/tabs/README.md)                          | `gbt-tabs` / `gbt-tab`                   | Tab navigation.                                                        |
-| [TagInput](projects/gabarit/src/lib/components/molecules/tag-input/README.md)                 | `gbt-tag-input`                          | Free-typed values shown as removable tags.                             |
-| [Tooltip](projects/gabarit/src/lib/components/molecules/tooltip/README.md)                    | `gbt-tooltip`                            | Hover/focus info bubble for any content.                               |
-| [Tree](projects/gabarit/src/lib/components/molecules/tree/README.md)                          | `gbt-tree`                               | Expandable hierarchical list (WAI-ARIA tree view).                     |
-| [UserChip](projects/gabarit/src/lib/components/molecules/user-chip/README.md)                 | `gbt-user-chip`                          | Avatar + name on one line.                                             |
+| [Accordion](projects/gabarit/accordion/README.md)                | `gbt-accordion` / `gbt-accordion-item`   | Collapsible sections.                                                  |
+| [Alert](projects/gabarit/alert/README.md)                        | `gbt-alert`                              | Persistent inline banner message.                                      |
+| [Autocomplete](projects/gabarit/autocomplete/README.md)          | `gbt-autocomplete`                       | Text field with async suggestions.                                     |
+| [AvatarGroup](projects/gabarit/avatar-group/README.md)           | `gbt-avatar-group`                       | Overlapping avatars with a +N overflow menu.                           |
+| [Breadcrumb](projects/gabarit/breadcrumb/README.md)              | `gbt-breadcrumb`                         | Ancestor trail plus current segment.                                   |
+| [Card](projects/gabarit/card/README.md)                          | `gbt-card`                               | Titled container.                                                      |
+| [CheckboxGroup](projects/gabarit/checkbox-group/README.md)       | `gbt-checkbox-group`                     | Group of checkboxes (fieldset + legend), value is an array.            |
+| [CopyField](projects/gabarit/copy-field/README.md)               | `gbt-copy-field`                         | Read-only monospace value with a copy button.                          |
+| [DatePicker](projects/gabarit/date-picker/README.md)             | `gbt-date-picker`                        | Single date, calendar dropdown, integrated with forms.                 |
+| [DateRangePicker](projects/gabarit/date-picker/date-range-picker/README.md)  | `gbt-date-range-picker`                  | Start and end dates, calendar dropdown.                                |
+| [DescriptionList](projects/gabarit/description-list/README.md)   | `gbt-description-list`                   | Label/value pairs on a `dl`, `valueAlign`, opt-in stacking.            |
+| [DimensionCard](projects/gabarit/dimension-card/README.md)       | `gbt-dimension-card`                     | Dimension table with an accented hover row.                            |
+| [Disclosure](projects/gabarit/disclosure/README.md)              | `gbt-disclosure`                         | Single disclosure: toggle button and panel, `open` model.              |
+| [EmptyState](projects/gabarit/empty-state/README.md)             | `gbt-empty-state`                        | Placeholder for an empty list/grid.                                    |
+| [FileUpload](projects/gabarit/file-upload/README.md)             | `gbt-file-upload`                        | Drag-and-drop or click file selection, removable list.                 |
+| [FunnelChart](projects/gabarit/funnel-chart/README.md)           | `gbt-funnel-chart`                       | Step-by-step conversion funnel.                                        |
+| [JobGraph](projects/gabarit/job-graph/README.md)                 | `gbt-job-graph`                          | Pipeline jobs by stage, linked by their dependencies.                  |
+| [ListCard](projects/gabarit/list-card/README.md)                 | `gbt-list-card`                          | Card for a list: header band, loading / failed / empty / ready states. |
+| [ListRow](projects/gabarit/list-row/README.md)                   | `gbt-list-row`                           | List item: leading status, title, meta, trailing actions.              |
+| [ListToolbar](projects/gabarit/list-toolbar/README.md)           | `gbt-list-toolbar`                       | Search + sort controls for a list.                                     |
+| [Menu](projects/gabarit/menu/README.md)                          | `gbt-menu`                               | Generic dropdown menu.                                                 |
+| [MenuItem](projects/gabarit/menu/menu-item/README.md)                 | `button[gbtMenuItem]` / `a[gbtMenuItem]` | Menu item: icon, danger variant, disabled, link form.                  |
+| [NavTabs](projects/gabarit/nav-tabs/README.md)                   | `gbt-nav-tabs` / `a[gbtNavTab]`          | Router-agnostic nav links: icon, badge, orientation, fades.            |
+| [PageHeader](projects/gabarit/page-header/README.md)             | `gbt-page-header`                        | Page title block: heading, badges, meta, actions.                      |
+| [Pagination](projects/gabarit/pagination/README.md)              | `gbt-pagination`                         | Page navigation for a list/table.                                      |
+| [Panel](projects/gabarit/panel/README.md)                        | `gbt-panel`                              | Flat side-panel section: heading, actions, content.                    |
+| [Popover](projects/gabarit/popover/README.md)                    | `gbt-popover`                            | Floating panel opened by a click on its trigger.                       |
+| [RadioGroup](projects/gabarit/radio-group/README.md)             | `gbt-radio-group`                        | Radio button group, integrated with forms.                             |
+| [SecretReveal](projects/gabarit/secret-reveal/README.md)         | `gbt-secret-reveal`                      | Masked secret: show / hide and copy.                                   |
+| [SegmentedControl](projects/gabarit/segmented-control/README.md) | `gbt-segmented-control`                  | Exclusive-choice button group (`tinted`, `fullWidth`, `wrap`).         |
+| [Select](projects/gabarit/select/README.md)                      | `gbt-select`                             | Dropdown list, single or multiple.                                     |
+| [SkeletonList](projects/gabarit/skeleton-list/README.md)         | `gbt-skeleton-list`                      | Placeholder rows for a loading list, with a polite status.             |
+| [StatGrid](projects/gabarit/stat-grid/README.md)                 | `gbt-stat-grid`                          | Responsive grid of stat tiles (container query), loading state.        |
+| [StatTile](projects/gabarit/stat-tile/README.md)                 | `gbt-stat-tile`                          | Figure with label, icon, hint, trend and optional link.                |
+| [Stepper](projects/gabarit/stepper/README.md)                    | `gbt-stepper`                            | Informational progress through numbered steps.                         |
+| [Table](projects/gabarit/table/README.md)                        | `gbt-table`                              | Data table.                                                            |
+| [Tabs](projects/gabarit/tabs/README.md)                          | `gbt-tabs` / `gbt-tab`                   | Tab navigation.                                                        |
+| [TagInput](projects/gabarit/tag-input/README.md)                 | `gbt-tag-input`                          | Free-typed values shown as removable tags.                             |
+| [Tooltip](projects/gabarit/tooltip/README.md)                    | `gbt-tooltip`                            | Hover/focus info bubble for any content.                               |
+| [Tree](projects/gabarit/tree/README.md)                          | `gbt-tree`                               | Expandable hierarchical list (WAI-ARIA tree view).                     |
+| [UserChip](projects/gabarit/user-chip/README.md)                 | `gbt-user-chip`                          | Avatar + name on one line.                                             |
 
 ### Organisms
 
 | Component                                                                                          | Selector                   | Role                                                                     |
 | -------------------------------------------------------------------------------------------------- | -------------------------- | ------------------------------------------------------------------------ |
-| [BarChart](projects/gabarit/src/lib/components/organisms/bar-chart/README.md)                      | `gbt-bar-chart`            | Bar chart on the dataviz base.                                           |
-| [ChartAxis](projects/gabarit/src/lib/components/organisms/chart-axis/README.md)                    | `g[gbtChartAxis]`          | Axis ticks — base building block.                                        |
-| [ChartEmpty](projects/gabarit/src/lib/components/organisms/chart-empty/README.md)                  | `gbt-chart-empty`          | Empty state — base building block.                                       |
-| [ChartFrame](projects/gabarit/src/lib/components/organisms/chart-frame/README.md)                  | `gbt-chart-frame`          | Low-level base, for a custom chart.                                      |
-| [ChartLegend](projects/gabarit/src/lib/components/organisms/chart-legend/README.md)                | `gbt-chart-legend`         | Multi-series legend — base building block.                               |
-| [ChartTable](projects/gabarit/src/lib/components/organisms/chart-table/README.md)                  | `gbt-chart-table`          | Non-visual table — base building block.                                  |
-| [ChartTooltip](projects/gabarit/src/lib/components/organisms/chart-tooltip/README.md)              | `gbt-chart-tooltip`        | Tooltip — base building block.                                           |
-| [ConfirmDangerModal](projects/gabarit/src/lib/components/organisms/confirm-danger-modal/README.md) | `gbt-confirm-danger-modal` | Type-to-confirm destructive-action dialog.                               |
-| [Drawer](projects/gabarit/src/lib/components/organisms/drawer/README.md)                           | `gbt-drawer`               | Side panel from a screen edge, focus trapped.                            |
-| [GbtToastService](projects/gabarit/src/lib/components/organisms/toaster/README.md)                 | `GbtToastService`          | Signal store of toasts; `gbt-toaster` shows it when `toasts` is omitted. |
-| [LineChart](projects/gabarit/src/lib/components/organisms/line-chart/README.md)                    | `gbt-line-chart`           | Line(s) on the dataviz base.                                             |
-| [Modal](projects/gabarit/src/lib/components/organisms/modal/README.md)                             | `gbt-modal`                | Modal dialog box.                                                        |
-| [PieChart](projects/gabarit/src/lib/components/organisms/pie-chart/README.md)                      | `gbt-pie-chart`            | Pie or donut chart.                                                      |
-| [SearchBar](projects/gabarit/src/lib/components/organisms/search-bar/README.md)                    | `gbt-search-bar`           | Search with grouped results.                                             |
-| [TimelineChart](projects/gabarit/src/lib/components/organisms/timeline-chart/README.md)            | `gbt-timeline-chart`       | Timeline on the dataviz base.                                            |
-| [Toaster](projects/gabarit/src/lib/components/organisms/toaster/README.md)                         | `gbt-toaster`              | Stack of temporary notifications.                                        |
+| [BarChart](projects/gabarit/bar-chart/README.md)                      | `gbt-bar-chart`            | Bar chart on the dataviz base.                                           |
+| [ChartAxis](projects/gabarit/chart/chart-axis/README.md)                    | `g[gbtChartAxis]`          | Axis ticks — base building block.                                        |
+| [ChartEmpty](projects/gabarit/chart/chart-empty/README.md)                  | `gbt-chart-empty`          | Empty state — base building block.                                       |
+| [ChartFrame](projects/gabarit/chart/chart-frame/README.md)                  | `gbt-chart-frame`          | Low-level base, for a custom chart.                                      |
+| [ChartLegend](projects/gabarit/chart/chart-legend/README.md)                | `gbt-chart-legend`         | Multi-series legend — base building block.                               |
+| [ChartTable](projects/gabarit/chart/chart-table/README.md)                  | `gbt-chart-table`          | Non-visual table — base building block.                                  |
+| [ChartTooltip](projects/gabarit/chart/chart-tooltip/README.md)              | `gbt-chart-tooltip`        | Tooltip — base building block.                                           |
+| [ConfirmDangerModal](projects/gabarit/confirm-danger-modal/README.md) | `gbt-confirm-danger-modal` | Type-to-confirm destructive-action dialog.                               |
+| [Drawer](projects/gabarit/drawer/README.md)                           | `gbt-drawer`               | Side panel from a screen edge, focus trapped.                            |
+| [GbtToastService](projects/gabarit/toaster/README.md)                 | `GbtToastService`          | Signal store of toasts; `gbt-toaster` shows it when `toasts` is omitted. |
+| [LineChart](projects/gabarit/line-chart/README.md)                    | `gbt-line-chart`           | Line(s) on the dataviz base.                                             |
+| [Modal](projects/gabarit/modal/README.md)                             | `gbt-modal`                | Modal dialog box.                                                        |
+| [PieChart](projects/gabarit/pie-chart/README.md)                      | `gbt-pie-chart`            | Pie or donut chart.                                                      |
+| [SearchBar](projects/gabarit/search-bar/README.md)                    | `gbt-search-bar`           | Search with grouped results.                                             |
+| [TimelineChart](projects/gabarit/timeline-chart/README.md)            | `gbt-timeline-chart`       | Timeline on the dataviz base.                                            |
+| [Toaster](projects/gabarit/toaster/README.md)                         | `gbt-toaster`              | Stack of temporary notifications.                                        |
 
 ### Templates
 
 | Component                                                                                       | Selector                  | Role                                                      |
 | ----------------------------------------------------------------------------------------------- | ------------------------- | --------------------------------------------------------- |
-| [AppShell](projects/gabarit/src/lib/components/templates/app-shell/README.md)                   | `gbt-app-shell`           | Page shell: side nav, header, content.                    |
-| [AppShellNavGroup](projects/gabarit/src/lib/components/templates/app-shell-nav-group/README.md) | `gbt-app-shell-nav-group` | Collapsible nav group, works in the collapsed rail.       |
-| [PageLayout](projects/gabarit/src/lib/components/templates/page-layout/README.md)               | `gbt-page-layout`         | Page grid: main, aside and nav columns (container query). |
+| [AppShell](projects/gabarit/app-shell/README.md)                   | `gbt-app-shell`           | Page shell: side nav, header, content.                    |
+| [AppShellNavGroup](projects/gabarit/app-shell/app-shell-nav-group/README.md) | `gbt-app-shell-nav-group` | Collapsible nav group, works in the collapsed rail.       |
+| [GitField](projects/gabarit/git-field/README.md)                   | `gbt-git-field`           | The family's animated commit graph, behind the sign-in panel (`[auth-backdrop]`) or a dark band. |
+| [PageLayout](projects/gabarit/page-layout/README.md)               | `gbt-page-layout`         | Page grid: main, aside and nav columns (container query). |
 
 ### Directives and helper components to import
 
@@ -143,7 +182,8 @@ because it needs `@angular/router`, `marked` and `dompurify`; see [its README](d
 
 ## Primitives and pipes
 
-Pure functions exported from `@masmarino/gabarit`, usable in any TypeScript
+Pure functions from `@masmarino/gabarit/format` (the charts' scales, ticks and paths come from
+`@masmarino/gabarit/chart`), usable in any TypeScript
 file (no component, no injection context, no browser API beyond `Intl`) and
 tree-shakable. Every formatter takes the **locale first**, because Gabarit
 has no i18n of its own; the pipes default it to Angular's `LOCALE_ID`.
@@ -291,92 +331,139 @@ keep their source order); with `compare`, `desc` reverses the ascending result.
 
 ## Styles
 
-Import the tokens in the application's `styles.scss`:
+Gabarit carries the look of the Ferris family: white paper and near-black ink in the light theme, a
+cool graphite in the dark one, IBM Plex throughout, hairlines and square-ish corners. Neutrals carry
+the screens; the crab's rust is kept for the marks that are the brand's own (focus, the current page),
+patina green says success. Every text token reaches 7:1 on the page and on a panel, in both themes
+(`contrast.spec.ts`).
+
+Import the tokens, and the fonts, in the application's `styles.scss`:
 
 ```scss
-@use 'gabarit/tokens' as *;
+@use '@masmarino/gabarit/fonts' with ($path: '/fonts/ibm-plex/');
+@use '@masmarino/gabarit/tokens';
+
+// Optional: body, h1–h3, code and selection in the family's type.
+@include tokens.document-base;
+```
+
+The fonts entry declares IBM Plex Sans (400, 500, 600), Sans Condensed (600) and Mono (400, 500),
+subset to Latin-1 (OFL licence beside the files). The application serves the files at `$path`, for
+instance with an Angular asset:
+
+```json
+{ "glob": "*.woff2", "input": "node_modules/@masmarino/gabarit/fonts", "output": "fonts/ibm-plex" }
 ```
 
-Gabarit declares **no** `@font-face` rule. The tokens expose
-`--font-family: 'Inter', sans-serif`, but serving and declaring the font
-is the application's responsibility.
+Without them the stacks fall back to the system's sans and monospace.
+
+### The graphite frame
+
+`gbt-app-shell` draws its rail and its bar as one graphite frame, the same in both themes, with the
+page set into it as a sheet whose corner is rounded. The auth pages (`gbt-auth-panel`) open on the
+same graphite, their panel keeping the page's theme. An application can lay its own parts on the
+frame with the `frame-tokens` mixin, which sets the dark tokens on a deeper ground:
+
+```scss
+.public-header {
+  @include tokens.frame-tokens;
+  background: var(--bg-panel);
+}
+```
 
 ### Color tokens
 
-Every component exclusively reads the custom properties below, set on
-`:root` by `_semantic.scss`. **These, and only these, are what an
-application should override to re-theme itself** — the raw palette
-(`--brand-*`, `--grey-*`, `--red-*`…) is an internal detail, never
-referenced outside `_semantic.scss` (enforced by `token-usage.spec.ts`).
-
-| Category    | Token                                                                    | Role                                                             |
-| ----------- | ------------------------------------------------------------------------ | ---------------------------------------------------------------- |
-| Brand       | `--primary` / `--primary-hover`                                          | Action color (buttons, active links, focus) and its hover state  |
-| Backgrounds | `--bg-principal`                                                         | Page and surface background (cards, panels)                      |
-|             | `--bg-panel`                                                             | Background of persistent navigation areas (nav, header)          |
-|             | `--bg-hover`                                                             | Hover state of an interactive element on a neutral background    |
-|             | `--bg-track`                                                             | Track of a segmented control, visible on the page and on a panel |
-| Border      | `--border-color`                                                         | All borders                                                      |
-|             | `--gbt-hairline` / `--gbt-card-border`                                   | Quiet separators and card edges, derived from `--border-color`   |
-| Text        | `--text-primary` / `--text-secondary` / `--text-discret`                 | From most to least emphasized                                    |
-|             | `--text-on-primary` / `--text-on-error` / `--text-on-color`              | Text set on a `--primary` fill, an error fill, or a solid color  |
-| Success     | `--color-success-base` / `-hover` / `-text` / `-bg` / `-bg-text`         | Fill, hover, text, light background, text on that background     |
-| Warning     | `--color-warning-base` / `-hover` / `-text` / `-bg` / `-bg-text`         | Same                                                             |
-| Error       | `--color-error-base` / `-fill` / `-hover` / `-text` / `-bg` / `-bg-text` | Same (`-fill`: solid fill, e.g. an icon)                         |
-| Dataviz     | `--chart-series-1-base`, `-2-base`, `-3-base`                            | The three chart series, in order                                 |
-|             | `--chart-grid`                                                           | Chart grid and axes                                              |
-
-Other tokens live on `:root` without being colors — border radii
-(`--site-border-radius*`), shadows (`--site-shadow-*`), transition
-durations (`--site-transition-*`), the monospace stack `--gbt-font-mono` — overridable the same way.
+Every component reads only the custom properties below, set on `:root` from the `light-tokens` and
+`dark-tokens` mixins (`_themes.scss`). **These are what an application overrides to re-theme
+itself**; the raw palette (`--slate-*`, `--graphite-*`, `--rust-*`…) is never referenced by a
+component (enforced by `token-usage.spec.ts`).
+
+| Category    | Token                                                                    | Role                                                              |
+| ----------- | ------------------------------------------------------------------------ | ----------------------------------------------------------------- |
+| Brand       | `--primary` / `--primary-hover`                                          | Action colour (buttons, selected states): the ink                 |
+|             | `--accent` / `--accent-text`                                             | The rust, for marks; its text shade                               |
+|             | `--focus-ring`                                                           | Every focus outline                                               |
+| Backgrounds | `--bg-principal`                                                         | Surfaces: cards, panels, fields                                   |
+|             | `--bg-panel`                                                             | The page's ground                                                 |
+|             | `--bg-hover`                                                             | Hover state of an interactive element on a neutral background     |
+|             | `--bg-track`                                                             | Track of a segmented control, visible on the page and on a panel  |
+|             | `--frame`                                                                | The graphite of the shell and the auth pages, in both themes      |
+| Border      | `--border-color`                                                         | The edge of a field or a control (3:1)                            |
+|             | `--gbt-hairline` / `--gbt-card-border`                                   | Quiet separators and card edges                                   |
+| Text        | `--text-primary` / `--text-secondary` / `--text-discret`                 | From most to least emphasized                                     |
+|             | `--text-on-primary` / `--text-on-error` / `--text-on-color`              | Text set on a `--primary` fill, an error fill, or a solid colour  |
+| Success     | `--color-success-base` / `-hover` / `-text` / `-bg` / `-bg-text`         | Fill, hover, text, light background, text on that background      |
+| Warning     | `--color-warning-base` / `-hover` / `-text` / `-bg` / `-bg-text`         | Same                                                              |
+| Error       | `--color-error-base` / `-fill` / `-hover` / `-text` / `-bg` / `-bg-text` | Same (`-fill`: a solid fill, the danger button)                   |
+| Info        | `--color-info-bg` / `-bg-text` / `-vivid-base`                           | Light background, text on it, the mark                            |
+| Dataviz     | `--chart-series-1-base` … `-6-base`                                      | The chart series, in order                                        |
+|             | `--chart-grid`                                                           | Chart grid and axes                                               |
+
+Other tokens live on `:root` without being colours: border radii (`--site-border-radius*`, 3 to
+6px), shadows (`--site-shadow-*`, rings rather than drops), transitions (`--site-transition-*`) and
+the type stacks (`--font-family`, `--font-display`, `--gbt-font-mono`).
 
 ### Theming hooks
 
-A few more tokens are not set on `:root`: each component falls back to the
-value in the last column, resolved where it is used, so an app that leaves
-them alone looks the same. Set one to take that part of the look in hand.
-
-| Token                                           | Used by                                                                   | Fallback                                |
-| ----------------------------------------------- | ------------------------------------------------------------------------- | --------------------------------------- |
-| `--gbt-focus-ring`                              | Every focus outline                                                       | `var(--primary)`                        |
-| `--gbt-font-display`                            | Page titles, stat tile values, empty state, auth panel and modal headings | `inherit`                               |
-| `--gbt-radius-badge`                            | Badges, card and tab counts                                               | `999px` (a pill)                        |
-| `--gbt-radius-chip`                             | Mono badges, inline code in a list row, search bar keys                   | `6px`                                   |
-| `--gbt-radius-menu`                             | Select and autocomplete panels, menu items, search results                | `8px`                                   |
-| `--gbt-radius-tile`                             | Icon marker tiles, job graph nodes, avatar group overflow, TOTP QR code   | `8px` (`12px` for the QR)               |
-| `--gbt-radius-search`                           | The search bar field                                                      | `16px`                                  |
-| `--gbt-nav-active-bg` / `--gbt-nav-active-text` | The current page in the app shell navigation                              | `--primary` / its text                  |
-| `--gbt-nav-active-mark`                         | A 2px rule on the start edge of the current page link                     | `transparent`                           |
-| `--gbt-shell-border`                            | The app shell's navigation and header edges                               | `var(--border-color)`                   |
-| `--gbt-shell-header-bg`                         | The app shell's header                                                    | `transparent`                           |
-| `--gbt-shell-content-padding`                   | The app shell's main content area                                         | `1rem`                                  |
-| `--gbt-auth-panel-backdrop`                     | The page behind the auth panels (login, register…)                        | a soft `--primary` glow on `--bg-panel` |
-| `--gbt-auth-panel-radius`                       | The auth panel card                                                       | `12px`                                  |
+A few more tokens are not set on `:root`: each component falls back to the value in the last column,
+so an app that leaves them alone gets the family's look. Set one to take that part in hand.
+
+| Token                                           | Used by                                                                   | Fallback                             |
+| ----------------------------------------------- | ------------------------------------------------------------------------- | ------------------------------------ |
+| `--gbt-focus-ring`                              | Every focus outline                                                       | `var(--focus-ring)`                  |
+| `--gbt-font-display`                            | Page, card, panel, modal and drawer titles, stat tile values, empty state | `var(--font-display)`                |
+| `--gbt-radius-badge`                            | Badges, card and tab counts                                               | `3px`                                |
+| `--gbt-radius-chip`                             | Mono badges, inline code in a list row, search bar keys                   | `2px`                                |
+| `--gbt-radius-menu`                             | Select and autocomplete panels, menu items, search results                | `4px`                                |
+| `--gbt-radius-tile`                             | Icon marker tiles, job graph nodes, avatar group overflow, TOTP QR code   | `4px`                                |
+| `--gbt-radius-search`                           | The search bar field                                                      | `3px`                                |
+| `--gbt-nav-active-bg` / `--gbt-nav-active-text` | The current page in the app shell navigation                              | a 9% ink tint / `--text-primary`     |
+| `--gbt-nav-active-mark`                         | A 2px rule on the start edge of the current page link                     | `var(--accent)`                      |
+| `--gbt-shell-bar`                               | The height of the app shell's bar and of the logo's corner                | `4rem`                               |
+| `--gbt-shell-border`                            | The app shell's navigation and header edges                               | `transparent`                        |
+| `--gbt-shell-header-bg`                         | The app shell's header                                                    | the frame                            |
+| `--gbt-shell-content-padding`                   | The app shell's bar and main content area                                 | `clamp(1rem, 0.25rem + 2vw, 2rem)`   |
+| `--gbt-auth-panel-backdrop`                     | The page behind the auth panels (login, register…)                        | `var(--frame)`                       |
+| `--gbt-auth-panel-radius`                       | The auth panel card                                                       | `var(--site-border-radius-lg)`       |
 
 Overriding a token after the import:
 
 ```scss
-@use 'gabarit/tokens' as *;
+@use '@masmarino/gabarit/tokens';
 
 :root {
-  --primary: #7c3aed;
+  --accent: #7c3aed;
 }
 ```
 
-**Dark mode activates via `prefers-color-scheme` or `[data-theme='dark']`
-on `<html>`, and reapplies to the same tokens.** An override set on a bare
-`:root` applies to both themes indifferently; for a value specific to
-dark mode, redeclare it under the same conditions as Gabarit, after its
-import:
+**Dark mode activates via `prefers-color-scheme` or `[data-theme='dark']` on `<html>`, and
+reapplies to the same tokens.** An override set on a bare `:root` applies to both themes; for a value
+specific to dark mode, redeclare it under the same conditions as Gabarit, after its import:
 
 ```scss
 @media (prefers-color-scheme: dark) {
   :root {
-    --primary: #a78bfa;
+    --accent: #a78bfa;
   }
 }
 ```
 
+### Moving to the entry points (2.1)
+
+Nothing breaks: the root still exports every name. To get the smaller first chunk, replace each
+`import { … } from '@masmarino/gabarit'` by one import per entry point (see [Imports](#imports));
+the compiler names any symbol imported from the wrong one.
+
+### Upgrading from 1.x
+
+- The default look is the Ferris family's (palette, IBM Plex, radii, the graphite shell and auth
+  pages). An application that themed 1.x by mapping its own tokens onto Gabarit's can drop that map.
+- The raw palette is new (`--slate-*`, `--graphite-*`, `--rust-*`, `--patina-*`, `--amber-*`,
+  `--red-*`, `--indigo-*`); `--brand-*`, `--grey-*`, `--green-*` and `--emerald-*` are gone.
+- New tokens: `--accent`, `--accent-text`, `--focus-ring`, `--frame`, `--font-display`; new mixins:
+  `light-tokens`, `dark-tokens`, `frame-tokens`, `document-base`, `visually-hidden`, `focus-ring`.
+- `@masmarino/gabarit/fonts` replaces the font an application served for `'Inter'`.
+
 ## Internationalization
 
 Gabarit ships no translation mechanism. Every visible string is a
@@ -384,7 +471,7 @@ component input, supplied by the application.
 
 ## Accessibility
 
-[`ACCESSIBILITY.md`](./ACCESSIBILITY.md) documents what Gabarit
+[`ACCESSIBILITY.md`](ACCESSIBILITY.md) documents what Gabarit
 guarantees with respect to RGAA (30 out of 106 criteria, checked on every
 push by CI — `axe-core` in the unit tests and a dedicated contrast test —
 plus a manual audit checklist for 69 components), what remains the application's

package/accordion/README.md

@@ -0,0 +1,56 @@
+# Accordion
+
+Collapsible sections, with `gbt-accordion-item` as projected content —
+each item renders its own header and panel, so header/panel pairs stay
+next to each other in the DOM, unlike `Tabs`' separate trigger/panel
+lists.
+
+**Selector**: `gbt-accordion` (container), `gbt-accordion-item` (each
+section)
+
+Up/down arrows move focus between headers, with wraparound. Enter/Space
+toggle the focused header (native `<button>` behavior).
+
+`expanded` is an Angular `model()`, so it works uncontrolled (omit the
+binding entirely) or controlled (bind `[expanded]`/`(expandedChange)`,
+e.g. to open a specific section by default or persist it).
+
+## Inputs of `gbt-accordion`
+
+| Input      | Type                     | Default                        | Role                                                                 |
+| ---------- | ------------------------ | ------------------------------- | --------------------------------------------------------------------- |
+| `id`       | `string`                 | generated (`gbt-accordion-N`)   | Prefix of the DOM ids generated for each header/panel.                |
+| `mode`     | `'single' \| 'multiple'` | `'single'`                      | `single`: opening an item closes any other, and re-clicking an open item closes it too — nothing is ever forced open. `multiple`: each item toggles independently. |
+| `expanded` | `number[]` (model)       | `[]`                             | Indices of the currently open items.                                  |
+
+## Inputs of `gbt-accordion-item`
+
+| Input   | Type     | Role                    |
+| ------- | -------- | ------------------------ |
+| `label` | `string` | Required. Header label. |
+
+## Example
+
+```html
+<gbt-accordion>
+  <gbt-accordion-item label="Comment créer un compte ?">...</gbt-accordion-item>
+  <gbt-accordion-item label="Comment contacter le support ?">...</gbt-accordion-item>
+</gbt-accordion>
+```
+
+Open the first section by default:
+
+```html
+<gbt-accordion [expanded]="[0]">...</gbt-accordion>
+```
+
+## Behavior
+
+- The open/close transition animates `grid-template-rows` (0fr ↔ 1fr)
+  rather than a fixed `max-height` — it adapts to any content height
+  without guessing, and is disabled under `prefers-reduced-motion:
+  reduce`.
+- A collapsed panel carries `inert` — its content (and everything
+  inside it) is unreachable by keyboard or a screen reader — instead of
+  the native `hidden` attribute, which would force `display: none` and
+  break the height transition.