@bitforgehq/ui 0.3.0 → 0.3.2

package/README.md

@@ -2,12 +2,16 @@
 
 Bitforge's shared Angular component library: Meadow Sage design, Tailwind CSS v4, signals-first, Angular 22.
 
+The theme is the Meadow Sage palette (warm off-white canvas, white surfaces, sage-tinted neutrals and status colours, pill controls). Its default primary is a neutral indigo (`#2b26ba`), not the design's sage green: it is meant to be overridden with your brand colour (`--color-primary` and its set; the docs site's theme configurator derives them), so an indigo primary after install is expected, not a broken install. `bunx bf-ui theme '#238652' --dark '#5cc48a'` prints the whole set for a brand colour, as a `@theme` and a `.dark` block to paste after the theme import, with every contrast pair's ratio, and exits 1 naming the failing pairs and a shade that passes (the docs site's Theming page has the recipe and a Meadow Sage green worked example).
+
 - Widgets: `@bitforgehq/ui`
 - Number field: `@bitforgehq/ui/number-input` (`bf-number-input`; loads Angular Forms, peer
   dependency `@angular/forms`)
 - Icons: `@bitforgehq/ui/icons` (Lucide data, peer dependency `lucide`)
 - Overlay core: `@bitforgehq/ui/overlay` (no Capacitor; peer dependencies `@angular/cdk` and
   `rxjs`)
+- Charts: `@bitforgehq/ui/charts` (line, bar and donut charts, sparklines and the chart card, drawn
+  in SVG with the `--color-chart-*` tokens; no peer dependency beyond the widgets entry)
 - Mobile shell: `@bitforgehq/ui/mobile` (from v0.2)
 - Test support: `@bitforgehq/ui/testing` (jsdom shims, `provideBfTesting()`, CDK component
   harnesses; needs `@angular/cdk` as a dev dependency)
@@ -79,7 +83,7 @@ In `src/index.html`, give `<body>` the theme background and text colour, so the
 
 ### 7. Switch to dark mode
 
-Add the `dark` class to `<html>` (and remove it for light mode). Every token is redefined under `.dark`, and the theme sets `color-scheme`, so scrollbars and native controls follow too. Components need no `dark:` classes.
+Add the `dark` class to `<html>` (and remove it for light mode). Every token is redefined under `.dark`, and the theme sets `color-scheme`, so scrollbars and native controls follow too. Components need no `dark:` classes. To let users choose System, Light or Dark, add `provideBfColorScheme()` to the app providers: it sets the class, follows the OS and remembers the choice.
 
 ```html
 <html lang="en" class="dark">
@@ -136,15 +140,17 @@ Render library components only in the browser, for example in a `@defer` block o
 route. Support will be decided before 1.0.
 
 The one server-side check is a render smoke, not a support test: the library repository's
-`tools/ssr-smoke.ts` renders 28 fixtures with `renderApplication()` (every root widget, `bf-icon`,
-`bf-number-input`, a `/mobile` page with `provideBfShell()`, `bf-page`, `bf-header` and
-`bf-content`, `bf-tabs` with `bf-stack-outlet` under the router, and an `/overlay` dialog), and all
-of them render without an error. 19 of them render identically twice. The other 9 number their ids
-differently on every render, from a module-level counter, so they could not hydrate: `bf-checkbox`,
-`bf-input`, `bf-radio-group`, `bf-segmented`, `bf-select`, `bf-textarea`, `bf-toggle`,
-`bf-number-input` and the `/overlay` dialog. Hydration itself is still not supported or tested, and
-more stands in its way: `/mobile` writes to `<html>` and adds a keyboard probe to `<body>`, and an
-`/overlay` dialog renders outside the app root and marks it inert.
+`tools/ssr-smoke.ts` renders 43 fixtures with `renderApplication()` (every root widget, `bf-icon`,
+`bf-number-input`, a `/charts` line chart, a `/mobile` page with `provideBfShell()`, `bf-page`,
+`bf-header` and `bf-content`, `bf-tabs` with `bf-stack-outlet` under the router, and an `/overlay`
+dialog), and all of them render without an error. 27 of them render identically twice. The other 16
+number their ids differently on every render, from a module-level counter, so they could not
+hydrate: `bf-app-frame`, `bf-calendar`, `bf-checkbox`, `bf-input`, `bf-radio-group`, `bf-segmented`,
+`bf-select`, `bf-sidebar`, `bf-tab-group`, `bf-table`, `bf-textarea`, `bf-theme-switch`,
+`bf-toggle`, `bf-line-chart`, `bf-number-input` and the `/overlay` dialog. Hydration itself is still
+not supported or tested, and more stands in its way: `/mobile` writes to `<html>` and adds a
+keyboard probe to `<body>`, and an `/overlay` dialog renders outside the app root and marks it
+inert.
 
 ## Testing
 
@@ -156,7 +162,8 @@ jsdom lacks them. `provideBfTesting()` passes defaults and labels to the widgets
 overlays and themes leave on the document after each test (when TestBed destroys the test
 environment, so keep its default `teardown: { destroyAfterEach: true }`), and the CDK harnesses
 (`BfSelectHarness`, `BfRadioGroupHarness`, `BfSegmentedHarness`, `BfDialogHarness`,
-`BfMenuButtonHarness`, `BfMenuHarness`, `BfMenuItemHarness`, `BfDesktopToastHarness`) drive the
+`BfMenuButtonHarness`, `BfMenuHarness`, `BfMenuItemHarness`, `BfDesktopToastHarness`,
+`BfTableHarness`, `BfPaginationHarness`, `BfTabGroupHarness`, `BfCalendarHarness`, `BfChartHarness`) drive the
 widgets whose DOM a spec should not query by hand; overlays come from
 `TestbedHarnessEnvironment.documentRootLoader(fixture)`. An app on the mobile shell uses
 `provideBfShellTesting()` from `@bitforgehq/ui/mobile` instead (router, shell, an in-memory theme

package/ai/MANIFEST.index.json

@@ -37,6 +37,15 @@
       "summary": "Centred confirmation dialog with a title, message and a row of role-styled buttons",
       "since": "0.2.0"
     },
+    {
+      "name": "app-frame",
+      "selector": "bf-app-frame",
+      "className": "BfAppFrameComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Desktop app frame with skip link, sticky sidebar, narrow header and main content",
+      "since": "0.3.2"
+    },
     {
       "name": "avatar",
       "selector": "bf-avatar",
@@ -64,6 +73,33 @@
       "summary": "Small status label in semantic tones, or a compact numeric pill for counts",
       "since": "0.1.0"
     },
+    {
+      "name": "bar-chart",
+      "selector": "bf-bar-chart",
+      "className": "BfBarChartComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui/charts",
+      "summary": "Bar chart of series over categories, grouped or stacked, vertical or horizontal",
+      "since": "0.3.1"
+    },
+    {
+      "name": "breadcrumb",
+      "selector": "bf-breadcrumb",
+      "className": "BfBreadcrumbComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Desktop breadcrumb trail of links to the current page, with optional collapsing",
+      "since": "0.3.1"
+    },
+    {
+      "name": "breadcrumb-item",
+      "selector": "li[bfBreadcrumbItem]",
+      "className": "BfBreadcrumbItemComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "One level of a breadcrumb trail: a link, or the current page as text",
+      "since": "0.3.1"
+    },
     {
       "name": "button",
       "selector": "bf-button",
@@ -73,6 +109,15 @@
       "summary": "Pill-shaped action button with five variants, three sizes and a loading state",
       "since": "0.1.0"
     },
+    {
+      "name": "calendar",
+      "selector": "bf-calendar",
+      "className": "BfCalendarComponent",
+      "category": "Forms",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Inline month calendar for picking one date, with month and year jumps",
+      "since": "0.3.1"
+    },
     {
       "name": "card",
       "selector": "bf-card",
@@ -82,6 +127,15 @@
       "summary": "Content surface with an optional header slot, in four visual styles from raised to flat",
       "since": "0.1.0"
     },
+    {
+      "name": "chart-card",
+      "selector": "bf-chart-card",
+      "className": "BfChartCardComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui/charts",
+      "summary": "Card around one chart with a title, period control and loading, empty and error states",
+      "since": "0.3.1"
+    },
     {
       "name": "checkbox",
       "selector": "bf-checkbox",
@@ -109,6 +163,15 @@
       "summary": "Named row of chips that picks one like radios, or groups independent toggles",
       "since": "0.3.0"
     },
+    {
+      "name": "combobox",
+      "selector": "bf-combobox",
+      "className": "BfComboboxComponent",
+      "category": "Forms",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Text field that filters a list of options as you type and picks one",
+      "since": "0.3.1"
+    },
     {
       "name": "content",
       "selector": "bf-content",
@@ -118,6 +181,42 @@
       "summary": "Page's single scroll container that keeps focused fields clear of the soft keyboard",
       "since": "0.2.0"
     },
+    {
+      "name": "date-input",
+      "selector": "bf-date-input",
+      "className": "BfDateInputComponent",
+      "category": "Forms",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Typed date field with a calendar popover, valued as an ISO date string",
+      "since": "0.3.1"
+    },
+    {
+      "name": "datetime-input",
+      "selector": "bf-datetime-input",
+      "className": "BfDateTimeInputComponent",
+      "category": "Forms",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Typed date and time field with a calendar and time list in one popover",
+      "since": "0.3.1"
+    },
+    {
+      "name": "description-item",
+      "selector": "div[bfDescriptionItem]",
+      "className": "BfDescriptionItemComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "One label and value pair of a description list, label as term, content as value",
+      "since": "0.3.1"
+    },
+    {
+      "name": "description-list",
+      "selector": "bf-description-list",
+      "className": "BfDescriptionListComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Native description list of label-value pairs, as divided rows or a tile grid",
+      "since": "0.3.1"
+    },
     {
       "name": "desktop-toast",
       "selector": "bf-desktop-toast",
@@ -136,6 +235,15 @@
       "summary": "Desktop modal dialog with a title, scrolling body, footer actions and focus trap",
       "since": "0.3.0"
     },
+    {
+      "name": "donut-chart",
+      "selector": "bf-donut-chart",
+      "className": "BfDonutChartComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui/charts",
+      "summary": "Donut chart of the parts of a whole, with a legend, tooltip and centre slot",
+      "since": "0.3.1"
+    },
     {
       "name": "empty-state",
       "selector": "bf-empty-state",
@@ -190,6 +298,15 @@
       "summary": "Single-line text field with label, help and error text, icon slots and Signal Forms binding",
       "since": "0.1.0"
     },
+    {
+      "name": "line-chart",
+      "selector": "bf-line-chart",
+      "className": "BfLineChartComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui/charts",
+      "summary": "Line chart of series over categories, with tooltip, legend and data table",
+      "since": "0.3.1"
+    },
     {
       "name": "list",
       "selector": "bf-list",
@@ -235,6 +352,33 @@
       "summary": "Modal overlay shown as an inset card over the scaled-down page, or full screen",
       "since": "0.2.0"
     },
+    {
+      "name": "multi-combobox",
+      "selector": "bf-multi-combobox",
+      "className": "BfMultiComboboxComponent",
+      "category": "Forms",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Text field that filters options as you type and picks several as tags",
+      "since": "0.3.1"
+    },
+    {
+      "name": "nav-group",
+      "selector": "bf-nav-group",
+      "className": "BfNavGroupComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "A titled group of sidebar links with a small heading that names it",
+      "since": "0.3.1"
+    },
+    {
+      "name": "nav-item",
+      "selector": "a[bfNavItem]",
+      "className": "BfNavItemComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Navigation link for a sidebar or top nav, with icon, label and count",
+      "since": "0.3.1"
+    },
     {
       "name": "number-input",
       "selector": "bf-number-input",
@@ -253,6 +397,33 @@
       "summary": "Frame for one stacked mobile screen that supplies lifecycle events and shared page state",
       "since": "0.2.0"
     },
+    {
+      "name": "page-header",
+      "selector": "bf-page-header",
+      "className": "BfPageHeaderComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Desktop page header with breadcrumb, title, subtitle, badges and a row of actions",
+      "since": "0.3.1"
+    },
+    {
+      "name": "pagination",
+      "selector": "bf-pagination",
+      "className": "BfPaginationComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Previous, next and numbered page buttons for a long list or table",
+      "since": "0.3.1"
+    },
+    {
+      "name": "popover",
+      "selector": "bf-popover",
+      "className": "BfPopoverComponent",
+      "category": "Overlays",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Anchored, non-modal panel for filters, details or a small form",
+      "since": "0.3.1"
+    },
     {
       "name": "progress",
       "selector": "bf-progress",
@@ -307,6 +478,51 @@
       "summary": "Bottom sheet with snap points, drag to dismiss and a backdrop",
       "since": "0.2.0"
     },
+    {
+      "name": "side-panel",
+      "selector": "bf-side-panel",
+      "className": "BfSidePanelComponent",
+      "category": "Overlays",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Desktop panel sliding in from the end edge, with a title, body and footer actions",
+      "since": "0.3.1"
+    },
+    {
+      "name": "sidebar",
+      "selector": "bf-sidebar",
+      "className": "BfSidebarComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Vertical app navigation with brand, grouped links, footer and an icon rail mode",
+      "since": "0.3.1"
+    },
+    {
+      "name": "sidebar-toggle",
+      "selector": "bf-sidebar-toggle",
+      "className": "BfSidebarToggleComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Icon button inside a sidebar that collapses it to an icon rail and back",
+      "since": "0.3.2"
+    },
+    {
+      "name": "skeleton",
+      "selector": "bf-skeleton",
+      "className": "BfSkeletonComponent",
+      "category": "Feedback",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Loading placeholder shaped as text lines, a rectangle or a circle, with a shimmer",
+      "since": "0.3.1"
+    },
+    {
+      "name": "sparkline",
+      "selector": "bf-sparkline",
+      "className": "BfSparklineComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui/charts",
+      "summary": "Tiny trend line with no axes or legend, for stats and table cells",
+      "since": "0.3.1"
+    },
     {
       "name": "spinner",
       "selector": "bf-spinner",
@@ -325,6 +541,15 @@
       "summary": "Router outlet keeping a live page stack with slide transitions and iOS swipe back",
       "since": "0.2.0"
     },
+    {
+      "name": "stat",
+      "selector": "bf-stat",
+      "className": "BfStatComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "One labelled figure with an optional icon tile and a supporting line",
+      "since": "0.3.1"
+    },
     {
       "name": "tab",
       "selector": "bf-tab",
@@ -343,6 +568,33 @@
       "summary": "Floating pill tab bar for mobile apps with arrow-key selection and count badges",
       "since": "0.1.0"
     },
+    {
+      "name": "tab-group",
+      "selector": "bf-tab-group",
+      "className": "BfTabGroupComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "In-page tabs that switch between content panels, with keyboard navigation and badges",
+      "since": "0.3.1"
+    },
+    {
+      "name": "tab-panel",
+      "selector": "bf-tab-panel",
+      "className": "BfTabPanelComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "One tab of a tab group with its label, badge, icon and lazy content",
+      "since": "0.3.1"
+    },
+    {
+      "name": "table",
+      "selector": "bf-table",
+      "className": "BfTableComponent",
+      "category": "Data display",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Desktop data table with sortable headers, row selection, custom cells and an empty slot",
+      "since": "0.3.1"
+    },
     {
       "name": "tabs",
       "selector": "bf-tabs",
@@ -361,6 +613,33 @@
       "summary": "Multi-line text field with label, help and error text, and Signal Forms binding",
       "since": "0.1.0"
     },
+    {
+      "name": "theme-menu-button",
+      "selector": "bf-theme-menu-button",
+      "className": "BfThemeMenuButtonComponent",
+      "category": "Overlays",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Menu button with System, Light and Dark radio items bound to the colour scheme",
+      "since": "0.3.1"
+    },
+    {
+      "name": "theme-switch",
+      "selector": "bf-theme-switch",
+      "className": "BfThemeSwitchComponent",
+      "category": "Forms",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Segmented System, Light and Dark switch bound two-way to the app colour scheme",
+      "since": "0.3.1"
+    },
+    {
+      "name": "time-input",
+      "selector": "bf-time-input",
+      "className": "BfTimeInputComponent",
+      "category": "Forms",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Typed time-of-day field with a popover list of times, valued as an ISO string",
+      "since": "0.3.1"
+    },
     {
       "name": "toast",
       "selector": "bf-toast",
@@ -378,6 +657,33 @@
       "entryPoint": "@bitforgehq/ui",
       "summary": "On/off switch for settings that apply immediately, with Signal Forms binding",
       "since": "0.1.0"
+    },
+    {
+      "name": "toolbar",
+      "selector": "bf-toolbar",
+      "className": "BfToolbarComponent",
+      "category": "Actions",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Dense row of search, filters, view switch, result count and actions",
+      "since": "0.3.1"
+    },
+    {
+      "name": "tooltip",
+      "selector": "bf-tooltip",
+      "className": "BfTooltipComponent",
+      "category": "Overlays",
+      "entryPoint": "@bitforgehq/ui/overlay",
+      "summary": "Short hint beside a control on hover or keyboard focus, for desktop",
+      "since": "0.3.1"
+    },
+    {
+      "name": "top-nav",
+      "selector": "bf-top-nav",
+      "className": "BfTopNavComponent",
+      "category": "Navigation",
+      "entryPoint": "@bitforgehq/ui",
+      "summary": "Horizontal app navigation, a wrapping row of links for apps with few sections",
+      "since": "0.3.1"
     }
   ]
 }