@syncedco/flow 0.3.1 → 0.4.1

package/reset.css

@@ -3,7 +3,7 @@
 @layer reset {
   *, *::before, *::after { box-sizing: border-box; }
   *:where(:not(dialog)) { margin: 0; }
-  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
+  html { font-size: 100%; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
   body { min-block-size: 100%; }
   img, picture, video, canvas, svg { display: block; max-inline-size: 100%; }
   img, video { block-size: auto; }

package/skills/synced-flow/SKILL.md

@@ -91,14 +91,24 @@ intact. Leave out `utilities.css` unless static helpers such as `sf-text-*`,
   `sf-app-backdrop`, `sf-frame`, and `sf-flow`.
 - Prefer component primitives for common UI: `sf-button`, `sf-card`,
   `sf-badge`, `sf-status`, `sf-field`, `sf-input`, `sf-search`,
-  `sf-data-table`, `sf-table-sort`, `sf-tab__count`, and `sf-toast-stack`.
+  `sf-input-group`, `sf-file-input`, `sf-range`, `sf-switch`,
+  `sf-segmented-control`, `sf-spinner`, `sf-data-table`, `sf-table-sort`,
+  `sf-tab__count`, and `sf-toast-stack`.
 - Use `saas-landing` for public SaaS marketing pages. Use `saas-dashboard` when
   a full authenticated starter is useful, but prefer neutral app patterns for
   reusable UI in admin panels, portals, CRMs, analytics dashboards, internal
   tools, account areas, and product workspaces.
 - Use app patterns before writing project CSS:
   `app-shell-layout`, `row-action-menu`, `tabs-with-counts`,
-  `data-table-actions`, `search-field`, `modal-form`, and `toast-stack`.
+  `data-table-actions`, `search-field`, `modal-form`, `toast-stack`,
+  `searchable-select`, `bulk-actions-toolbar`, `complete-pagination`, and
+  `multi-step-form`.
+- Use `switch-control` for independent binary settings and
+  `segmented-control` for one choice from a small set. Do not use either as a
+  substitute for tabs.
+- Treat `searchable-select`, async loading, bulk selection, and multi-step
+  navigation as app-owned behavior. Flow supplies presentation and accessible
+  markup guidance, not JavaScript state machines.
 - Use app shell states instead of bespoke layout CSS: `data-layout="fixed-header"`
   for fixed app headers, `data-collapsed="true"` for collapsed sidebars, and
   `data-mobile="drawer"` with `data-sidebar-open="true"` for mobile drawer
@@ -160,9 +170,16 @@ pnpm flow:doctor
 For package or repo changes, also run:
 
 ```bash
+pnpm check:generated
 pnpm check
 pnpm test
+pnpm test:browser
+pnpm test:browser:all
 pnpm pack --dry-run
 ```
 
-If `doctor` warns about stale CSS, run `pnpm flow:build`.
+Run `pnpm check:generated` before a build or lifecycle command can refresh
+tracked CSS. It covers package CSS and the plain HTML, Vite, Next, Astro, and
+WordPress generated outputs. Use the Chromium browser gate during development
+and all three browser engines before a release. If `doctor` warns about stale
+project CSS, run `pnpm flow:build`.

package/src/index.ts

@@ -48,10 +48,79 @@ export const fluidSystem = {
   },
   components: {
     button: 'sf-button',
+    buttonGroup: 'sf-button-group',
+    icon: 'sf-icon',
+    iconButton: 'sf-icon-button',
     card: 'sf-card',
+    surface: 'sf-surface',
+    hero: 'sf-hero',
+    logoCloud: 'sf-logo-cloud',
+    feature: 'sf-feature',
+    stats: 'sf-stats',
+    testimonial: 'sf-testimonial',
+    pricingGrid: 'sf-pricing-grid',
+    faq: 'sf-faq',
+    callToAction: 'sf-cta',
+    footer: 'sf-footer',
     badge: 'sf-badge',
+    avatar: 'sf-avatar',
+    alert: 'sf-alert',
+    status: 'sf-status',
+    sectionHeader: 'sf-section-header',
+    kicker: 'sf-kicker',
+    nav: 'sf-nav',
+    form: 'sf-form',
+    fieldset: 'sf-fieldset',
     field: 'sf-field',
+    label: 'sf-label',
+    help: 'sf-help',
+    error: 'sf-error',
     input: 'sf-input',
+    inputGroup: 'sf-input-group',
+    select: 'sf-select',
+    textarea: 'sf-textarea',
+    check: 'sf-check',
+    switch: 'sf-switch',
+    fileInput: 'sf-file-input',
+    range: 'sf-range',
+    segmentedControl: 'sf-segmented-control',
+    spinner: 'sf-spinner',
+    search: 'sf-search',
+    combobox: 'sf-combobox',
+    filterBar: 'sf-filter-bar',
+    bulkActions: 'sf-bulk-actions',
+    dataTable: 'sf-data-table',
+    tableSort: 'sf-table-sort',
+    dataList: 'sf-data-list',
+    emptyState: 'sf-empty-state',
+    settingsSection: 'sf-settings-section',
+    detailPanel: 'sf-detail-panel',
+    dialog: 'sf-dialog',
+    popover: 'sf-popover',
+    drawer: 'sf-drawer',
+    tooltip: 'sf-tooltip',
+    toast: 'sf-toast',
+    toastStack: 'sf-toast-stack',
+    banner: 'sf-banner',
+    disclosure: 'sf-disclosure',
+    accordion: 'sf-accordion',
+    tabs: 'sf-tabs',
+    tab: 'sf-tab',
+    menu: 'sf-menu',
+    breadcrumb: 'sf-breadcrumb',
+    pagination: 'sf-pagination',
+    stepper: 'sf-stepper',
+    wizardActions: 'sf-wizard-actions',
+    progress: 'sf-progress',
+    skeleton: 'sf-skeleton',
+    chart: 'sf-chart',
+    meter: 'sf-meter',
+    codeWindow: 'sf-code-window',
+    codeLines: 'sf-code-lines',
+    tokenStrip: 'sf-token-strip',
+    marquee: 'sf-marquee',
+    commandList: 'sf-command-list',
+    platformCard: 'sf-platform-card',
   },
   utilities: {
     visuallyHidden: 'sf-visually-hidden',

package/src/presets.mjs

@@ -12,13 +12,13 @@ export const themePresets = {
       surfaceAlt: 'oklch(96.4% 0.011 80)',
       surfaceElevated: 'var(--sf-colour-surface-raised)',
       border: 'oklch(18% 0.026 250 / 0.12)',
-      primary: 'oklch(68% 0.18 44)',
-      primaryHover: 'oklch(60% 0.17 42)',
+      primary: 'oklch(50% 0.16 40)',
+      primaryHover: 'oklch(44% 0.14 40)',
       primaryForeground: 'oklch(100% 0 0)',
       accent: 'oklch(70% 0.12 205)',
-      link: 'oklch(58% 0.17 42)',
-      linkHover: 'oklch(68% 0.18 44)',
-      ring: 'oklch(68% 0.18 44)',
+      link: 'oklch(50% 0.16 40)',
+      linkHover: 'oklch(44% 0.14 40)',
+      ring: 'oklch(50% 0.16 40)',
     },
     components: {
       button: {

package/src/tokens.mjs

@@ -36,6 +36,8 @@ export const primitiveTokens = {
     orange500: 'oklch(74% 0.17 48)',
     orange600: 'oklch(68% 0.18 44)',
     orange700: 'oklch(58% 0.17 42)',
+    orange800: 'oklch(50% 0.16 40)',
+    orange900: 'oklch(44% 0.14 40)',
     green500: 'oklch(62% 0.13 150)',
     green600: 'oklch(54% 0.13 150)',
     green700: 'oklch(44% 0.12 150)',
@@ -82,13 +84,13 @@ export const semanticTokens = {
     border: 'oklch(18% 0.026 250 / 0.12)',
     borderStrong: 'oklch(18% 0.026 250 / 0.22)',
     backdrop: 'oklch(0% 0 0 / 0.48)',
-    primary: 'var(--sf-colour-orange-600)',
-    primaryHover: 'var(--sf-colour-orange-700)',
+    primary: 'var(--sf-colour-orange-800)',
+    primaryHover: 'var(--sf-colour-orange-900)',
     primaryForeground: 'var(--sf-colour-neutral-0)',
-    primarySoft: 'oklch(68% 0.18 44 / 0.12)',
-    primarySoftBorder: 'oklch(68% 0.18 44 / 0.28)',
-    link: 'var(--sf-colour-orange-700)',
-    linkHover: 'var(--sf-colour-orange-600)',
+    primarySoft: 'oklch(50% 0.16 40 / 0.12)',
+    primarySoftBorder: 'oklch(50% 0.16 40 / 0.28)',
+    link: 'var(--sf-colour-orange-800)',
+    linkHover: 'var(--sf-colour-orange-900)',
     accent: 'var(--sf-colour-cyan-500)',
     accentForeground: 'var(--sf-colour-neutral-950)',
     success: 'var(--sf-colour-green-500)',
@@ -97,7 +99,7 @@ export const semanticTokens = {
     warning: 'var(--sf-colour-amber-500)',
     warningForeground: 'var(--sf-colour-neutral-950)',
     warningSoft: 'oklch(78% 0.15 82 / 0.16)',
-    danger: 'var(--sf-colour-red-600)',
+    danger: 'var(--sf-colour-red-700)',
     dangerForeground: 'var(--sf-colour-neutral-0)',
     dangerSoft: 'oklch(56% 0.2 28 / 0.12)',
     info: 'var(--sf-colour-cyan-600)',
@@ -109,7 +111,7 @@ export const semanticTokens = {
     categorical4: 'var(--sf-colour-orange-600)',
     categorical5: 'var(--sf-colour-red-600)',
     categorical6: 'oklch(58% 0.15 292)',
-    ring: 'var(--sf-colour-orange-600)',
+    ring: 'var(--sf-colour-orange-800)',
   },
 }