@syncedco/flow 0.3.1 → 0.4.1

package/CHANGELOG.md

@@ -1,5 +1,38 @@
 # Changelog
 
+## 0.4.1 - 2026-09-09
+
+- Fix source-tree generated-CSS checks when the package is tested from a
+  root-only installation, and refresh tracked example outputs against the
+  current theme tokens.
+
+## 0.4.0 - 2026-09-09
+
+- Add native checkbox-backed switches, radio-backed segmented controls,
+  grouped inputs, styled file/range inputs, and a reduced-motion-safe spinner.
+- Add app-tier presentation contracts for searchable selects, bulk actions,
+  complete pagination, and multi-step forms while keeping JavaScript state in
+  consuming apps.
+- Expand CLI catalogue, suggestion routing, patterns, and the
+  `app-settings-workflow` recipe across the new public surface.
+- Expand the TypeScript `fluidSystem.components` shortcuts and document the
+  existing code-window, token-strip, marquee, command-list, and platform-card
+  presentation classes as public.
+- Fix modal Cancel form association and move sortable-table `aria-sort` to the
+  column header.
+- Add generated-CSS freshness, semantic React/Next compilation, package dry-run,
+  and cross-browser accessibility/interaction release gates.
+- Darken default light-theme action and link tokens to meet normal-text colour
+  contrast, including hover states.
+
+## 0.3.2 - 2026-06-15
+
+- Add an explicit accessible root typography baseline with `html { font-size: 100%; }`.
+- Add `--sf-text-base` and generated `--text-base` aliases for fluid body text.
+- Use the new fluid body text token in shipped and generated base CSS.
+- Convert CLI-generated utility lengths for blur, rings, outlines, and thicker borders from static `px` to `rem`.
+- Extend guardrails and tests so shipped generated examples reject raw pixels outside allowed hairline, visually-hidden, and forced-colors exceptions.
+
 ## 0.3.1 - 2026-06-13
 
 - Fix mobile app drawer scrolling by giving the drawer sidebar a viewport block size.

package/CONTRIBUTING.md

@@ -9,15 +9,24 @@ documentation.
 ## Local Setup
 
 ```bash
-pnpm install
-pnpm test
+pnpm install --ignore-scripts
+pnpm build:types
+pnpm check:generated
+pnpm exec playwright install chromium
 ```
 
+Lifecycle scripts rebuild tracked CSS, so install with `--ignore-scripts` when
+reviewing a checkout. `check:generated` verifies package CSS and the tracked
+plain HTML, Vite, Next, Astro, and WordPress outputs before a build can refresh
+them.
+
 Useful commands:
 
 ```bash
-pnpm build
 pnpm check
+pnpm test
+pnpm test:browser
+pnpm test:browser:all
 pnpm pack --dry-run
 ```
 
@@ -39,13 +48,17 @@ pnpm pack --dry-run
 Run:
 
 ```bash
+pnpm check:generated
 pnpm check
 pnpm test
+pnpm test:browser
 pnpm pack --dry-run
 ```
 
-For documentation-only changes, `pnpm check` is usually enough unless package
-metadata or generated files changed.
+Install all release browsers with
+`pnpm exec playwright install chromium firefox webkit` before running
+`pnpm test:browser:all`. Pull requests and `main` run Chromium in CI; version
+tags must pass Chromium, Firefox, and WebKit before npm publishing can start.
 
 ## Commercial Work
 

package/README.md

@@ -22,12 +22,12 @@ brand drift, or generated class chaos.
   project usage
 - layout primitives: container, section, stack, cluster, grid, sidebar,
   switcher, frame, cover, hero, and flow
-- component primitives: buttons, cards, surfaces, navigation, forms, alerts,
-  badges, avatars, charts, and section headers
+- component primitives: buttons and loading states, cards, navigation, complete
+  forms, switches, segmented choices, app data controls, charts, and feedback
 - website patterns: logo clouds, feature blocks, stats, testimonials, pricing,
   FAQ, CTA, and footer helpers
 - native component styling: dialog, popover, drawer, tooltip, disclosure, tabs,
-  breadcrumbs, pagination, scroll snap, and sticky patterns
+  breadcrumbs, complete pagination, file/range inputs, scroll snap, and sticky patterns
 - AI-friendly CLI discovery: `catalog --json`, `suggest`, `lint`, `watch`, and
   `theme init --from` for turning a site brief into reusable theme tokens
 - project-level AI agent setup: `agents install`, `agents status`, and `skill`
@@ -133,17 +133,17 @@ breakpoint-heavy patterns: fluid `clamp()` scales, CSS custom properties,
 logical sizing and spacing, cascade layers, OKLCH colour tokens,
 container-aware layout primitives, and `prefers-reduced-motion` handling.
 
-Current built CSS sizes from `pnpm build` on 2026-05-28:
+Current built CSS sizes from `pnpm build` on 2026-09-09:
 
 | File | Raw | Gzip | Purpose |
 | --- | ---: | ---: | --- |
-| `styles.css` | 59.1 KB | 10.5 KB | Full core stylesheet for simple setup. |
-| `tokens.css` | 9.5 KB | 2.2 KB | Design tokens only. |
+| `styles.css` | 98.0 KB | 15.7 KB | Full core stylesheet for simple setup. |
+| `tokens.css` | 12.0 KB | 2.5 KB | Design tokens only. |
 | `reset.css` | 0.7 KB | 0.4 KB | Reset layer only. |
-| `base.css` | 3.4 KB | 1.2 KB | Base element styles. |
+| `base.css` | 3.5 KB | 1.1 KB | Base element styles. |
 | `defaults.css` | 0.5 KB | 0.3 KB | Optional site/UI defaults for links, lists, and native controls. |
-| `layout.css` | 7.5 KB | 1.9 KB | Fluid layout, app shell, scroll, sticky, media, and split primitives. |
-| `components.css` | 31.3 KB | 5.0 KB | Button, icon, avatar, chart, card, surface, nav, form, alert, native component, website pattern, accessibility state, and input primitives. |
+| `layout.css` | 12.2 KB | 2.8 KB | Fluid layout, app shell, scroll, sticky, media, and split primitives. |
+| `components.css` | 62.9 KB | 9.3 KB | Button, form, native control, app data, overlay, website, accessibility, and presentation primitives. |
 | `utilities.css` | 7.5 KB | 1.9 KB | Static `sf-*` content, positioning, motion, and helper utilities. |
 
 CSS is not automatically tree-shaken like JavaScript in every environment. The
@@ -235,6 +235,15 @@ import '@syncedco/flow/styles.css'
 import './synced-flow.generated.css'
 ```
 
+JavaScript and TypeScript consumers can use the dependency-free `cx()` helper
+and typed class shortcuts without importing CSS through JavaScript:
+
+```ts
+import { cx, fluidSystem } from '@syncedco/flow'
+
+const settingClass = cx(fluidSystem.components.switch, 'project-setting')
+```
+
 Add package scripts:
 
 ```json
@@ -262,7 +271,11 @@ pnpm exec synced-flow tokens
 pnpm exec synced-flow tokens --json
 pnpm exec synced-flow catalog --json
 pnpm exec synced-flow suggest "full page scroll portfolio"
+pnpm exec synced-flow suggest "searchable select and multi-step settings" --json
+pnpm exec synced-flow pattern switch-control --markup
+pnpm exec synced-flow pattern searchable-select --markup
 pnpm exec synced-flow recipe portfolio-scroll --markup
+pnpm exec synced-flow recipe app-settings-workflow --markup
 pnpm exec synced-flow recipe portfolio-scroll --framework next --markup
 pnpm exec synced-flow theme init --from brief.md
 pnpm exec synced-flow theme init --from brief.md --preset-base neutral-saas
@@ -330,7 +343,17 @@ an existing codebase that still contains compatibility classes such as `sm:` or
 ## Scripts
 
 ```bash
+pnpm check:generated
 pnpm build
 pnpm check
+pnpm test
+pnpm test:browser
+pnpm test:browser:all
+pnpm pack --dry-run
 pnpm type-check
 ```
+
+Run `pnpm check:generated` before a build or package lifecycle script when
+reviewing tracked CSS freshness. `test:browser` uses Chromium for the normal
+development gate; `test:browser:all` adds Firefox and WebKit for release
+readiness.

package/base.css

@@ -4,6 +4,7 @@
   html {
     background: var(--sf-colour-background);
     color: var(--sf-colour-foreground);
+    font-size: 100%;
     scroll-behavior: smooth;
   }
 
@@ -11,7 +12,7 @@
     background: var(--sf-colour-background);
     color: var(--sf-colour-foreground);
     font-family: var(--sf-font-sans);
-    font-size: var(--sf-type-body);
+    font-size: var(--sf-text-base);
     line-height: var(--sf-line-height-body);
     -webkit-font-smoothing: antialiased;
     text-rendering: optimizeLegibility;