@fluid-theme/core 0.4.3 → 2.0.0

package/dist/fonts/OFL-newsreader.txt

@@ -0,0 +1,93 @@
+Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader) Newsreader-Italic[opsz,wght].ttf: Copyright 2020 The Newsreader Project Authors (http://github.com/productiontype/Newsreader)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/dist/fonts/OFL-schibsted-grotesk.txt

@@ -0,0 +1,93 @@
+Copyright 2023 The Schibsted-Grotesk Project Authors (https://github.com/schibsted/schibsted-grotesk) SchibstedGrotesk-Italic[wght].ttf: Copyright 2023 The Schibsted-Grotesk Project Authors (https://github.com/schibsted/schibsted-grotesk)
+
+This Font Software is licensed under the SIL Open Font License, Version 1.1.
+This license is copied below, and is also available with a FAQ at:
+http://scripts.sil.org/OFL
+
+
+-----------------------------------------------------------
+SIL OPEN FONT LICENSE Version 1.1 - 26 February 2007
+-----------------------------------------------------------
+
+PREAMBLE
+The goals of the Open Font License (OFL) are to stimulate worldwide
+development of collaborative font projects, to support the font creation
+efforts of academic and linguistic communities, and to provide a free and
+open framework in which fonts may be shared and improved in partnership
+with others.
+
+The OFL allows the licensed fonts to be used, studied, modified and
+redistributed freely as long as they are not sold by themselves. The
+fonts, including any derivative works, can be bundled, embedded,
+redistributed and/or sold with any software provided that any reserved
+names are not used by derivative works. The fonts and derivatives,
+however, cannot be released under any other type of license. The
+requirement for fonts to remain under this license does not apply
+to any document created using the fonts or their derivatives.
+
+DEFINITIONS
+"Font Software" refers to the set of files released by the Copyright
+Holder(s) under this license and clearly marked as such. This may
+include source files, build scripts and documentation.
+
+"Reserved Font Name" refers to any names specified as such after the
+copyright statement(s).
+
+"Original Version" refers to the collection of Font Software components as
+distributed by the Copyright Holder(s).
+
+"Modified Version" refers to any derivative made by adding to, deleting,
+or substituting -- in part or in whole -- any of the components of the
+Original Version, by changing formats or by porting the Font Software to a
+new environment.
+
+"Author" refers to any designer, engineer, programmer, technical
+writer or other person who contributed to the Font Software.
+
+PERMISSION & CONDITIONS
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of the Font Software, to use, study, copy, merge, embed, modify,
+redistribute, and sell modified and unmodified copies of the Font
+Software, subject to the following conditions:
+
+1) Neither the Font Software nor any of its individual components,
+in Original or Modified Versions, may be sold by itself.
+
+2) Original or Modified Versions of the Font Software may be bundled,
+redistributed and/or sold with any software, provided that each copy
+contains the above copyright notice and this license. These can be
+included either as stand-alone text files, human-readable headers or
+in the appropriate machine-readable metadata fields within text or
+binary files as long as those fields can be easily viewed by the user.
+
+3) No Modified Version of the Font Software may use the Reserved Font
+Name(s) unless explicit written permission is granted by the corresponding
+Copyright Holder. This restriction only applies to the primary font name as
+presented to the users.
+
+4) The name(s) of the Copyright Holder(s) or the Author(s) of the Font
+Software shall not be used to promote, endorse or advertise any
+Modified Version, except to acknowledge the contribution(s) of the
+Copyright Holder(s) and the Author(s) or with their explicit written
+permission.
+
+5) The Font Software, modified or unmodified, in part or in whole,
+must be distributed entirely under this license, and must not be
+distributed under any other license. The requirement for fonts to
+remain under this license does not apply to any document created
+using the Font Software.
+
+TERMINATION
+This license becomes null and void if any of the above conditions are
+not met.
+
+DISCLAIMER
+THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT
+OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE
+COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
+INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL
+DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
+FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM
+OTHER DEALINGS IN THE FONT SOFTWARE.

package/fluid-agent-kit/README.md

@@ -28,6 +28,7 @@ Point your assistant to read the files in `fluid-agent-kit/skills/` for framewor
 | **UX Rules** | `skills/ux-rules.md` | 12 behavioral rules for interactive components |
 | **Accessibility** | `skills/accessibility.md` | HTML, keyboard, motion, touch, color standards |
 | **Image Optimization** | `skills/image-optimization.md` | Responsive images, lazy loading, focal points, formats |
+| **Preset Composition** | `skills/preset-composition.md` | Per-preset layout DNA — which arrangements, densities, and section variants suit each preset |
 
 ## Key Principle
 

package/fluid-agent-kit/skills/accessibility.md

@@ -18,12 +18,14 @@ Accessibility is a core value of The Fluid Theme, not an afterthought. These rul
 - Escape closes all overlays (modals, dropdowns, popovers)
 - Arrow keys navigate within groups (tabs, radio buttons, dropdown items)
 - Never remove `:focus-visible` outlines — restyle if needed, never delete
+- A child theme in `@layer themes` outranks every rule in `base` and `components`, whatever the specificity. If it restyles an invalid field's border or box-shadow (`[aria-invalid]`, `[data-invalid]`, `:user-invalid`), that style also wins while the field has focus, over core's `input:focus` and `form.css`'s invalid `:focus` rules, so the focus border or ring it replaces never shows. Restyle the focused state too, with a visible change (domain-landing's Swiss look reached review without one, 2026-10-27).
+- Skip link: `<a class="skip-link" href="#main">Skip to content</a>`, never with `sr-only` added. `.sr-only` clips the link to a 1px box, and `.skip-link:focus` only slides it into view without undoing the clip (nor could it: `.sr-only` is in `@layer utilities`, which outranks `.skip-link` in `@layer base`), so the link stays clipped when a keyboard user reaches it. axe does not catch it and no gate here tabs to it (domain-landing review, 2026-10-27).
 - Native `<dialog>` focus trapping via `.showModal()` — never add manual trap
 
 ## Motion
 
 - `prefers-reduced-motion: reduce` respected in every animated component
-- `[data-motion="still"]` disables all transitions entirely
+- `[data-preset="still"]` disables all transitions entirely
 - Spinners use pulse animation in reduced motion mode
 - Skeleton shimmer uses opacity fade in reduced motion mode
 

package/fluid-agent-kit/skills/css-conventions.md

@@ -20,12 +20,29 @@ When writing or modifying CSS for a site built with The Fluid Theme, follow thes
 
 | Category | Examples |
 |----------|---------|
-| Spacing | `--space-0` through `--space-24` |
-| Typography | `--font-size-xs` through `--font-size-5xl` |
-| Colors | `--color-text`, `--color-surface`, `--accent`, `--color-success/warning/error/info` |
-| Borders | `--radius-sm` through `--radius-full`, `--border-width` |
+| Knobs | ~20 per-site values on `:root`: `--accent`, `--accent-ink`, `--on-accent`, `--neutral-tint`, fonts, radii, `--shadow-style`, … (list: `_docs/STATUS.md`) |
+| Spacing | `--space-0-5` through `--space-24` (4px base) |
+| Typography | `--font-size-xs` through `--font-size-5xl`, `--hero-headline-size` (a knob) |
+| Colors | `--color-text`, `--color-surface`, `--accent` (fills), `--accent-ink` (text), `--on-accent` (text on fills), `--color-success/warning/error/info` (text) with `-fill`, `-on`, `-subtle` |
+| Borders | `--radius-card`, `--radius-control`, `--radius-pill` (knobs), `--radius-sm`…`--radius-xl`, `--radius-full` (circles), `--border-width` |
 | Shadows | `--shadow-xs` through `--shadow-xl` |
-| Motion | `--duration-instant` through `--duration-slowest` |
+| Motion | `--duration-fast`, `-normal`, `-slow`, `-slower`, all from `--motion-base` |
+| Macro dials | `--space-section`, `--space-gutter`, `--container-content` (knobs) |
+
+## Attribute Quick Reference
+
+Theme axes (on `<html>`): `data-theme` (`light`/`dark`; absent = follow the OS) and `data-motion` (any element). `data-preset`, `data-palette`, `data-accent` and `data-contrast` were removed in Pass 0. Never use `var(--accent)` as a text colour: use `--accent-ink`.
+
+| Attribute | Values | Used on | Notes |
+|-----------|--------|---------|-------|
+| `data-text-overflow` | `hyphenate`, `break`, `clip`, `normal` | Any element | Text overflow (`@layer utilities`). Headings already default to hyphenate; `normal` opts out. Needs `lang` on `<html>` for hyphens |
+| `data-overflow` | `hidden`, `auto`, `scroll` | Any element | Box overflow (`@layer layouts`) — same attribute, different value set; one value per element |
+| `data-fit-text` | (presence) | Any element | Shrink-to-fit display text; needs `assets/js/fit-text.js`. Down only, 55% floor. `window.fluidFitText()` after injecting content |
+| `data-show-if` | one or more of `advertise`, `partner`, `buy-site`, `buy-domain`, `hire`, `other` | A field's wrapper in a form with `select[name="reason"]` | Shown only for those reasons (`@layer utilities`, `form.css`); never required, no constraint a hidden value can fail. `_docs/reference/components.md` |
+| `.hp` (class) | — | The honeypot's wrapper, with `aria-hidden="true"` | Clipped to 1px in place (`@layer utilities`); last in the form |
+| `data-arrange` | `auto` | `.hero` | Centered grid for flat hero markup (`hero__headline`/`hero__subheadline`/`hero__actions`/`hero__media` as direct children); a `hero__content` wrapper opts out. Beats `data-layout` |
+
+**Fit text with no script.** On a page whose CSP allows no script (`default-src 'none'`), `fit-text.js` never runs, and `style-src 'self'` refuses a `style=""` the server writes instead. Size the text on the server: estimate its width from a table of glyph widths, err wide, and name a step in a `data-*` attribute that the stylesheet maps to a size. Give the text a safe break (`<wbr>`) for fonts the table did not measure. Do not measure text in CSS with scroll-driven animations: Firefox does not run them, so it gets a different size. Example: domain-landing `nameLength()` in `src/domains.js`, `data-name-length` on `<main>` (2026-10-27).
 
 ## Component File Pattern
 

package/fluid-agent-kit/skills/image-optimization.md

@@ -113,3 +113,5 @@ Show different images based on viewport orientation:
 - [ ] Hero backgrounds: consider `data-focus` for focal point control
 - [ ] Card media: `data-aspect` set appropriately
 - [ ] Images served in WebP or AVIF with fallbacks
+- [ ] Photo grids: `.gallery` with `data-lightbox` and `assets/js/lightbox.js`; thumbnails link to the full-size file (so they work without JS), captions credit the photographer, and residential photos carry no location metadata
+- [ ] Before / after pairs: `.compare` with `assets/js/compare.js`; both photos the same view and size, each `alt` says which is which, and the labels are real text (they name the slider's values)

package/fluid-agent-kit/skills/preset-composition.md

@@ -0,0 +1,108 @@
+# Preset Composition — Per-Preset Layout DNA
+
+> **Superseded (2026-10-23, Pass 0).** This describes the preset/palette system, which was removed. What the theme is now, and its knobs: [`_docs/STATUS.md`](../../_docs/STATUS.md). Kept as history.
+
+When building a page with Fluid, the active `data-preset` is a COMPLETE design decision: it drives which layouts and arrangements you compose, not just colors and fonts. This skill maps each preset to the compositions that suit it.
+
+Full preset reference: `_docs/theming-guide.md` ("Visual Presets in Depth").
+
+## The Two Mechanisms
+
+**1. Runtime arrangement — `data-arrange="auto"`** (opt-in, on `.hero` and `.features`):
+
+- `.hero` — requires flat markup: `hero__headline`, `hero__subheadline`, `hero__actions`, optional `hero__media` as **direct children** (no `hero__content` wrapper). The preset then remaps the arrangement via `grid-template-areas`. `data-arrange` wins over `data-layout`.
+- `.features` — the preset remaps the grid's shape and density.
+
+| Preset | Hero signature | Features signature |
+|--------|----------------|--------------------|
+| **still** | Swiss left rail + asymmetric void | Ruled hairline grid |
+| **serene** | Editorial offset: full-width headline, copy hangs right | Single literary column |
+| **rapids** | Poster split: giant headline left, caption column right | Dense 4-up |
+| **tsunami** | Cinema poster: bottom-anchored massive headline, subheadline as kicker | Monumental 2-up |
+| **flowing / stream / cascade** | Centered classic stack | Default responsive card grid |
+
+**2. Composition-time choices (the important one)**: when generating page markup for a given preset, CHOOSE section variants, hero `data-layout` (`center` / `split` / `split-reverse`), grid densities, and content order that match the preset's layout DNA below. This applies to ALL sections — not just the two with `data-arrange`.
+
+## Layout DNA
+
+| Preset | Canvas | Section rhythm | Hero to prefer | Grid density | Alignment bias |
+|--------|--------|----------------|----------------|--------------|----------------|
+| **still** | Focused 768px column | 32px, tight | Left-rail split, restrained size | Compact, ruled | Flush left |
+| **serene** | 42rem literary column | 144px intervals | Full-width serif headline + offset deck | Single column | Centered, unboxed |
+| **stream** | 1536px wide canvas | 64px | Wide split | 3–4 col cards | Left, horizontal |
+| **flowing** | 1280px | 80px | Balanced centered | 3-up | Centered |
+| **cascade** | 1280px | 64px | Friendly centered | Generous cards | Centered |
+| **rapids** | 1536px | 32px, dense | Poster split, oversized type | Dense 4-up | Hard left |
+| **tsunami** | Full width | 96px cinematic | Full-bleed, bottom-anchored | Monumental 2-up | Left, bottom-anchored |
+
+### still — Swiss precision
+
+Mono grayscale default palette, system fonts, restrained display sizes, left-aligned Swiss grid, hairline rules.
+
+- DO: compact tables and ruled grids; flush-left headlines; 2-col asymmetric splits with deliberate void
+- DON'T: centered hero copy; decorative gradients; pill shapes
+
+### serene — literary calm
+
+Large graceful serif display, morandi default palette (dusty lavender accent), extravagant whitespace.
+
+- DO: single-column flows; generous stacked sections; full-width serif headline with offset deck; centered unboxed feature lists
+- DON'T: packed multi-column grids; dense dashboards
+
+### stream — tech-forward
+
+Plus Jakarta Sans, fluid deep-teal accent, professional and balanced.
+
+- DO: wide split heroes; 3–4 col card grids; horizontal nav emphasis; dashboard patterns
+- DON'T: narrow editorial columns
+
+### flowing — the versatile default
+
+Outfit/DM Sans, brand medium-blue accent. Balanced centered heroes, 3-up grids — the reference point when no other DNA applies.
+
+### cascade — warm and bubbly
+
+Nunito, bold vivid-purple accent, maximum roundness.
+
+- DO: friendly centered layouts; generous card grids; pill buttons
+- DON'T: sharp-edged dense tables
+
+### rapids — bold poster energy
+
+Syne/Space Grotesk at 800–900 weight, electric coral accent, oversized display type.
+
+- DO: poster splits; dense 4-up packs; tight rhythm; hard offset shadows
+- DON'T: airy whitespace; serif elegance
+
+### tsunami — cinematic maximum
+
+Bebas Neue massive display (hero headlines up to 6.5rem), storm-teal accent, asymmetric corners.
+
+- DO: full-bleed bottom-anchored heroes; monumental 2-up grids; kicker-above-headline patterns
+- DON'T: small centered cards; subtle anything
+
+### Identity presets
+
+- **editorial** — extreme-whitespace serif essay (38rem column, 8rem sections): single-column prose only
+- **brutalist** — monospace ruled rawness: hard borders, raw grids, zero decoration
+- **neon** — dark glowing cyberpunk: dark surfaces, glow shadows, high-tech density
+
+## Default Palettes
+
+Each water preset ships a default palette family + accent, so switching presets changes the color mood too:
+
+| Preset | Family | Default accent |
+|--------|--------|----------------|
+| still | mono | grayscale slate |
+| serene | morandi | dusty lavender |
+| stream | fluid | deep teal |
+| flowing | fluid | brand medium blue |
+| cascade | bold | vivid purple |
+| rapids | bold | electric coral |
+| tsunami | tsunami | storm teal |
+
+Explicit `data-palette` / `data-accent` always override. Do NOT add a `data-palette` unless the user asks for a specific color mood — the default family is part of the preset's design.
+
+## Never Mix DNA
+
+Never mix arrangement DNA across presets on one page. If the user's content fights the preset's DNA (e.g., a dense data table on serene), keep the preset's rhythm and adapt the section — or suggest a better-suited preset. Do not import another preset's arrangement to solve it.

package/package.json

@@ -1,15 +1,23 @@
 {
   "name": "@fluid-theme/core",
-  "version": "0.4.3",
+  "version": "2.0.0",
   "description": "A modern, semantic CSS design system built on physics principles — not utility classes",
   "main": "dist/fluid.min.css",
   "style": "dist/fluid.min.css",
   "exports": {
     ".": "./dist/fluid.min.css",
+    "./zero": "./dist/fluid-zero.min.css",
+    "./fonts": "./dist/fluid-fonts.min.css",
+    "./legacy-1x": "./dist/fluid-legacy-1x.css",
+    "./1x": "./dist/fluid-1x.min.css",
+    "./toc": "./dist/fluid-toc.min.css",
+    "./nav": "./dist/fluid-nav.min.css",
+    "./toc-build": "./assets/js/toc-build.mjs",
     "./src": "./src/fluid.css"
   },
   "files": [
     "dist/",
+    "assets/js/",
     "src/",
     "fluid-agent-kit/",
     "CLAUDE.md",
@@ -24,7 +32,14 @@
     "build": "node scripts/build-css.mjs",
     "prepublishOnly": "npm run build",
     "optimize-images": "node scripts/optimize-images.js",
-    "test": "echo \"Visual testing only - open examples/foundation.html in browser\""
+    "test:reveal": "node scripts/reveal-check.mjs",
+    "test:forms": "node scripts/form-check.mjs",
+    "test:axe": "node scripts/axe-check.mjs",
+    "test:focus": "node scripts/focus-check.mjs",
+    "test:toc": "node scripts/toc-check.mjs",
+    "test:nav": "node scripts/nav-check.mjs",
+    "test": "echo \"Visual testing only - open examples/foundation.html in browser\"",
+    "test:zero": "node scripts/visual-scan.mjs scripts/fixtures/zero.html && node scripts/axe-check.mjs --pages scripts/fixtures/zero.html && node scripts/focus-check.mjs --page scripts/fixtures/zero.html"
   },
   "keywords": [
     "css",
@@ -62,7 +77,18 @@
     "supports css-logical-properties"
   ],
   "devDependencies": {
+    "@capsizecss/core": "^4.1.3",
+    "@capsizecss/metrics": "^4.4.0",
+    "@fontsource-variable/newsreader": "^5.3.0",
+    "@fontsource-variable/schibsted-grotesk": "^5.3.0",
+    "axe-core": "^4.11.1",
+    "lighthouse": "^13.0.3",
     "lightningcss": "^1.32.0",
-    "sharp": "^0.34.5"
+    "playwright": "^1.64.1",
+    "puppeteer": "^24.40.0",
+    "sharp": "^0.35.5"
+  },
+  "publishConfig": {
+    "access": "public"
   }
 }