feat(layout,utilities): ship #536, #535; activate #540, #542 into 0.7.0

[jackgranatowski]

Adds four opt-in helpers to the still-unreleased 0.7.0:

• Header block-padding classes (.sf-header--*) #536 .sf-header--xs..xl (core/layout.css) — block padding from the
  --sf-space-* scale, lighter than .sf-section; inline gutter untouched.
• List marker colour utilities (.sf-marker--*) #535 .sf-marker--{family} (optional/utilities.css) — colour ::marker on
  arbitrary lists outside .sf-prose, for the 7 palette families.
• Small utilities: .sf-list-none and alternate selection (.sf-selection--alt) #540 .sf-list-none + .sf-selection--alt — un-staged (tokens already live).
• Sticky positioning utility (.sf-sticky) + offset sizes (s/m/l) #542 .sf-sticky + --s/-m/-l offsets — un-staged (tokens already live).

Regenerates docs (classes/api-index/registry + configurator sync), adds
demo coverage for .sf-header--*, and documents the new classes in
docs/llm-guide.md. All CI gates and the unit suite pass.

Co-Authored-By: Claude Opus 4.8 noreply@anthropic.com
Claude-Session: https://claude.ai/code/session_015ky5Dk5VzNGD5qPrp3g5fT

Summary by CodeRabbit

• New Features

  • Added sf-header--xs … sf-header--xl utility classes for standardized block padding.
  • Added list/marker utilities: sf-list-none, sf-marker--action/primary/secondary/tertiary (colored ::marker styling), plus sf-selection--alt.
  • Added sticky utilities: sf-sticky and sf-sticky--s/m/l for size-based sticky positioning.

• Documentation

  • Updated generated class reference, API index/registry counts, and demo examples; expanded LLM guidance to describe the new utilities.
  • Refreshed component/token documentation to reflect the current supported component surface.

[coderabbitai]

Warning

Review limit reached

@jackgranatowski, you've reached your PR review limit, so we couldn't start this review.

Next review available in: 44 minutes

Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available.
You're only billed for reviews past your plan's rate limits ($0.25/file).

How can I continue?

After more reviews become available, a review can be triggered using the @coderabbitai review command as a PR comment. Alternatively, push new commits to this PR.

To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based reviews.

How do review limits work?

CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability.

For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window.

Please refer docs for additional details.

Review details

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro Plus

Run ID: 022059c3-7a71-4d8b-939b-9c1223f4e7a2

📥 Commits

Reviewing files that changed from the base of the PR and between a8f2799 and 49211a7.

📒 Files selected for processing (16)

• badges/badge-optimal.json
• configurator/src/data/classes.generated.json
• core/states.css
• docs/api-index.json
• docs/api-index.md
• docs/classes.md
• docs/demo.html
• docs/llm-guide.md
• docs/registry.json
• docs/roadmap.md
• docs/states.md
• docs/token-annotations.json
• optional/utilities.css
• tests/behavior.spec.js
• tests/demo-visual.spec.js
• tests/states-full.spec.js

📝 Walkthrough

Walkthrough

This PR adds header spacing classes and activates list, marker, selection, and sticky utilities. It also refreshes generated indexes and docs, updates counts, and trims the documented optional component surface.

Changes

Header spacing and utility surface

Layer / File(s)	Summary
Header block-padding classes core/layout.css, configurator/src/data/classes.generated.json, docs/api-index.json, docs/api-index.md, docs/classes.md, docs/registry.json, docs/llm-guide.md, docs/demo.html	Adds .sf-header--{xs,s,m,l,xl} with block padding from the spacing scale and updates generated references, docs, and demo content.
List, marker, selection, and sticky utilities optional/utilities.css, configurator/src/data/classes.generated.json, docs/api-index.json, docs/api-index.md, docs/classes.md, docs/registry.json, docs/llm-guide.md	Activates .sf-list-none, .sf-marker--*, .sf-selection--alt, and .sf-sticky size variants, with matching generated metadata and documentation updates.
Catalog totals and section counts docs/api-index.json, docs/api-index.md, docs/classes.md, docs/registry.json	Updates aggregate totals and section counts to reflect the added classes.
Component surface cleanup optional/components.css, optional/tokens.components.css, docs/components.md	Removes placeholder component/token blocks and updates the component docs to describe only the live .sf-btn and .sf-card surface.

Estimated code review effort: 2 (Simple) | ~15 minutes

Possibly related PRs

• codeslash-dev/SLASHED#51: Touches the .sf-sticky utility surface and related sticky-offset behavior.
• codeslash-dev/SLASHED#434: Updates the generated class catalog and the documentation pipeline that consumes it.
• codeslash-dev/SLASHED#546: Introduces related utility/token work for .sf-list-none, .sf-selection--alt, and .sf-sticky.

Suggested labels: codex

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title is concise and accurately summarizes the main layout and utility feature additions shipped in 0.7.0.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch claude/review-open-issues-442ycl

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[qodo-code-review]

PR Summary by Qodo

Add .sf-header padding variants + opt-in list/selection/sticky utilities (0.7.0)

✨ Enhancement 📝 Documentation 🕐 40+ Minutes

AI Description

• Add .sf-header--xs…--xl for lighter header block padding using --sf-space-*.
• Activate new opt-in utilities: list reset, marker color, alternate selection, sticky offsets.
• Regenerate class registries/docs and add demos + LLM guide coverage for new helpers.

Diagram

graph TD
  L["core/layout.css"] --> G["Docs/registry generators"] --> D["docs api-index/registry"]
  U["optional/utilities.css"] --> G["Docs/registry generators"]
  G --> C["configurator classes data"]
  L --> Demo["docs/demo.html"]
  U --> Guide["docs/llm-guide.md"]

Loading

High-Level Assessment

The following are alternative approaches to this PR:

1. Introduce a base `.sf-header` + size modifiers (like `.sf-section`)

• ➕ Allows a default header padding via a single base class
• ➕ More consistent mental model with existing .sf-section + variants
• ➖ Adds an additional class to learn/compose
• ➖ May imply a semantic primitive that is intentionally lightweight/variant-only

2. Single marker utility with a CSS variable (`--sf-marker-color`)

• ➕ Fewer selectors; supports arbitrary colors (custom palettes, theme overrides)
• ➕ Could reuse one rule for all marker styling
• ➖ Less guided API (current family-specific classes are more discoverable)
• ➖ May increase accidental misuse/inconsistency versus constrained palette families

Recommendation: Current approach is reasonable for SLASHED’s curated, opt-in surface: small, explicit classes with palette-scoped variants and direct token mapping. The only follow-up worth considering is whether introducing a base .sf-header would better match .sf-section ergonomics; otherwise the additive variant-only approach keeps usage simple and avoids adding another primitive.

Files changed (9) +728 / -24

Enhancement (2) +35 / -8

layout.cssAdd '.sf-header--xs…--xl' block padding helpers +11/-0

Add '.sf-header--xs…--xl' block padding helpers

• Introduces header padding variants that map 'padding-block' directly to '--sf-space-*' for a lighter vertical rhythm than '.sf-section'. Explicitly avoids touching inline gutters to preserve container/section gutter behavior.

core/layout.css

utilities.cssActivate staged utility blocks: list reset, marker, selection alt, sticky +24/-8

Activate staged utility blocks: list reset, marker, selection alt, sticky

• Uncomments/activates '.sf-list-none', '.sf-marker--{family}' marker coloring rules, '.sf-selection--alt' selection token overrides, and '.sf-sticky' with '--s/--m/--l' offset variants. Updates the file header comment to reflect which blocks are now active.

optional/utilities.css

Documentation (6) +513 / -16

api-index.jsonRegenerate API index to include new classes +431/-7

Regenerate API index to include new classes

• Updates element/class counts and adds entries for the new '.sf-header--*' layout variants and newly activated utility classes. Keeps the machine-readable index in sync with the source CSS and tiering.

docs/api-index.json

api-index.mdRefresh human-readable API index (counts + class tables) +23/-5

Refresh human-readable API index (counts + class tables)

• Bumps total/class counts and inserts the new '.sf-header--*' and utility rows into the rendered markdown tables. Aligns the doc view with the regenerated JSON index.

docs/api-index.md

classes.mdRegenerate class reference lists +21/-3

Regenerate class reference lists

• Updates generated counts for layout primitives/utilities and appends the new '.sf-header--*' and utility class names to the appropriate sections.

docs/classes.md

demo.htmlAdd demo coverage for '.sf-header--*' variants +10/-0

Add demo coverage for '.sf-header--*' variants

• Adds a dedicated demo block showing each '.sf-header--*' size and describing the intended “lighter than '.sf-section'” behavior. Uses styled examples to make padding differences visually obvious.

docs/demo.html

llm-guide.mdDocument new header helpers and opt-in utilities +9/-0

Document new header helpers and opt-in utilities

• Adds guidance for '.sf-header--xs…--xl' and a concise list of the newly activated utilities: list reset, marker color families, alternate selection, and sticky offsets. Clarifies intended usage and relationship to existing tokens/state classes.

docs/llm-guide.md

registry.jsonUpdate registry counts and class allowlist +19/-1

Update registry counts and class allowlist

• Increments '.sf-*' class counts and adds the new classes to the registry list so documentation/configurator tooling recognizes them as shipped/active.

docs/registry.json

Other (1) +180 / -0

classes.generated.jsonAdd metadata entries for new header and utility classes +180/-0

Add metadata entries for new header and utility classes

• Extends the configurator’s generated class catalog with '.sf-header--xs…--xl' and newly-activated utilities ('.sf-list-none', '.sf-marker--*', '.sf-selection--alt', '.sf-sticky' + offsets). Marks the appropriate layer ('slashed.layout' vs 'slashed.utilities') and optionality for each entry.

configurator/src/data/classes.generated.json

[qodo-code-review]

Code Review by Qodo

🐞 Bugs (1) 📘 Rule violations (0) 📎 Requirement gaps (0) 📜 Skill insights (0)

Context used

✅ Tickets: 🎫 Small utilities: .sf-list-none and alternate selection (.sf-selection--alt) 🎫 List marker colour utilities (.sf-marker--*) 🎫 Sticky positioning utility (.sf-sticky) + offset sizes (s/m/l) +1 more

✅ Compliance rules (platform): 12 rules

1. Sticky offsets lost with state 🐞 Bug ≡ Correctness

Description

.sf-sticky--s/-m/-l set inset-block-start in slashed.utilities, but .is-sticky later re-sets
inset-block-start in slashed.states, so combining JS-toggled stickiness with the new offset
modifiers silently ignores the offsets. This breaks offset composability for any element that
becomes sticky via .is-sticky (even if it also carries a size modifier).

Code

optional/utilities.css[R190-197]

+  .sf-sticky {
    position: sticky;
    inset-block-start: var(--sf-sticky-offset, 0);
    z-index: var(--sf-z-sticky);
  }
  .sf-sticky--s { inset-block-start: calc(var(--sf-sticky-offset, 0) + var(--sf-space-s)); }
  .sf-sticky--m { inset-block-start: calc(var(--sf-sticky-offset, 0) + var(--sf-space-m)); }
-  .sf-sticky--l { inset-block-start: calc(var(--sf-sticky-offset, 0) + var(--sf-space-l)); } */
+  .sf-sticky--l { inset-block-start: calc(var(--sf-sticky-offset, 0) + var(--sf-space-l)); }

Relevance

⭐⭐⭐ High

Team has accepted CSS cascade/precedence correctness fixes before (e.g. layout override-order bug
fixed in PR516).

PR-#516

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

Utilities define modifier offsets by setting inset-block-start, but the states layer comes later
and redefines inset-block-start for .is-sticky, overriding any modifier value when both classes
apply.

optional/utilities.css[182-197]
core/states.css[167-173]
core/layers.css[5-15]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
Sticky offset modifiers (`.sf-sticky--s/-m/-l`) don't work with the existing runtime `.is-sticky` state because `slashed.states` is ordered after `slashed.utilities` and overwrites `inset-block-start`.

## Issue Context
- `core/layers.css` orders `slashed.utilities` before `slashed.states`.
- `core/states.css` defines `.is-sticky { inset-block-start: var(--sf-sticky-offset, 0); }`.
- `optional/utilities.css` defines `.sf-sticky--s/-m/-l` by directly setting `inset-block-start`, which is overridden when `.is-sticky` is present.

## Fix approach
Make both `.sf-sticky` and `.is-sticky` compute `inset-block-start` using an additive custom property so modifiers can set only the extra gap:
- In **core/states.css**: change `.is-sticky` to
 `inset-block-start: calc(var(--sf-sticky-offset, 0) + var(--sf-sticky-offset-extra, 0));`
- In **optional/utilities.css**:
 - Change `.sf-sticky` similarly
 - Change modifiers to set `--sf-sticky-offset-extra` (e.g., `var(--sf-space-s)`) instead of overwriting `inset-block-start`.

This preserves the existing token (`--sf-sticky-offset`) and makes size modifiers work for both static `.sf-sticky` and runtime `.is-sticky`.

## Fix Focus Areas (paths & lines)
- optional/utilities.css[182-197]
- core/states.css[167-173]
- core/layers.css[5-15]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

2. Marker overrides prose markers ✓ Resolved 🐞 Bug ≡ Correctness

Description

.sf-marker--* colors all descendant ::marker elements and, because slashed.utilities is layered
after slashed.macros, it overrides .sf-prose ::marker styling whenever the utility is applied on any
ancestor that contains prose. This can unintentionally recolor markers inside .sf-prose blocks
despite prose intending to own marker color via --sf-prose-marker-color.

Code

optional/utilities.css[R162-168]

+  .sf-marker--primary ::marker, .sf-marker--primary::marker { color: var(--sf-color-primary); }
+  .sf-marker--action ::marker,  .sf-marker--action::marker  { color: var(--sf-color-action); }
+  .sf-marker--success ::marker, .sf-marker--success::marker { color: var(--sf-color-success); }
+  .sf-marker--warning ::marker, .sf-marker--warning::marker { color: var(--sf-color-warning); }
+  .sf-marker--danger ::marker,  .sf-marker--danger::marker  { color: var(--sf-color-danger); }
+  .sf-marker--info ::marker,    .sf-marker--info::marker    { color: var(--sf-color-info); }
+  .sf-marker--neutral ::marker, .sf-marker--neutral::marker { color: var(--sf-color-neutral); }

Relevance

⭐⭐ Medium

No close prior on ::marker vs .sf-prose; team does accept cascade-precedence bugs (e.g. PR516).

PR-#516

ⓘ Recommendations generated based on similar findings in past PRs

Evidence

The marker utilities are defined in the utilities layer and target both descendant and self markers;
because the global layer order places utilities after macros, these rules override `.sf-prose
::marker` whenever both apply (e.g., utility class on an ancestor of a prose block).

optional/utilities.css[155-168]
core/macros.css[8-26]
core/layers.css[5-14]

Agent prompt

The issue below was found during a code review. Follow the provided context and guidance below and implement a solution

## Issue description
The new `.sf-marker--*` utility selectors apply to descendant `::marker` and will override `.sf-prose ::marker` because `slashed.utilities` is ordered after `slashed.macros`.

## Issue Context
- `core/layers.css` declares `slashed.utilities` after `slashed.macros`, so utilities win in cascade when both match.
- `core/macros.css` defines `.sf-prose ::marker { color: var(--sf-prose-marker-color); }`, but the new utilities will still apply inside prose.

## Fix Focus Areas
- Update marker utility selectors to *not* match markers inside a `.sf-prose` subtree (unless you explicitly want the utility to override prose).
- Prefer a selector-based exclusion (e.g., `:not(.sf-prose *)`) rather than relying on layer/specificity.

### Suggested direction
For each family, scope both the descendant and self selectors to exclude prose descendants, e.g.:
- `.sf-marker--primary :not(.sf-prose *)::marker, .sf-marker--primary:not(.sf-prose *)::marker { ... }`

## Fix Focus Areas (paths & lines)
- optional/utilities.css[155-168]
- core/macros.css[8-26]
- core/layers.css[5-14]

ⓘ Copy this prompt and use it to remediate the issue with your preferred AI generation tools

---

[jackgranatowski]

Addressed differently than suggested: instead of an additive --sf-sticky-offset-extra token to make .is-sticky and .sf-sticky--s/-m/-l compose, removed .is-sticky entirely (683af12...49211a7) along with 10 other .is-* classes found to be redundant — duplicates of .sf-sticky/a macro, or trivial one-line properties that aren't real runtime states. .sf-sticky is now the sole sticky mechanism, so the conflicting inset-block-start re-set no longer exists and there's nothing left to make additive.

---

Generated by Claude Code