docs: add comprehensive .sf-* class coverage audit page - #619
Conversation
Standalone page loading only dist/slashed.full.css (no overrides, no scripts) that exercises all 294 .sf-* classes and 28 .sf-is-* state classes documented in docs/classes.md, organized by source file.
|
Warning Review limit reached
Next review available in: 24 minutes Enable usage-based reviews in Billing to review now. Otherwise, wait until the next included review is available. How can I continue?After more reviews become available, a review can be triggered using the 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 configurationConfiguration used: Organization UI Review profile: CHILL Plan: Pro Plus Run ID: ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (12)
📝 WalkthroughWalkthroughThe PR removes the ChangesCorner-scoop removal
Estimated code review effort: 3 (Moderate) | ~20 minutes Possibly related PRs
Suggested labels: Suggested reviewers: 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
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. Comment |
Greptile SummaryThis PR adds
Confidence Score: 3/5The file is documentation-only with no build or test impact, but two of its demos are actively incorrect and will render incorrectly or inconsistently in browsers. The demo-audit.html — the imposter--fixed demo (lines 221–223) and the orphaned Important Files Changed
Flowchart%%{init: {'theme': 'neutral'}}%%
flowchart TD
A[Browser opens demo-audit.html] --> B[Loads dist/slashed.full.css]
B --> C{CSS file present?}
C -- Yes --> D[Renders audit sections]
C -- No --> E[Page renders unstyled / broken]
D --> F[Layout primitives section]
D --> G[Macro classes section]
D --> H[State classes section]
D --> I[Accessibility section]
D --> J[Motion section]
D --> K[Print / Theme sections]
D --> L[Forms section]
D --> M[Components section]
D --> N[Utilities section]
F & G & H & I & J & K & L & M & N --> O[Visual QA baseline]
%%{init: {'theme': 'base', 'themeVariables': {"darkMode": true, "background": "#0d1117", "primaryColor": "#21262d", "primaryTextColor": "#e6edf3", "primaryBorderColor": "#8b949e", "lineColor": "#8b949e", "textColor": "#e6edf3", "edgeLabelBackground": "#161b22", "actorBkg": "#21262d", "actorBorder": "#8b949e", "actorTextColor": "#e6edf3", "actorLineColor": "#8b949e", "signalColor": "#8b949e", "signalTextColor": "#e6edf3", "noteBkgColor": "#373320", "noteBorderColor": "#d4a72c", "noteTextColor": "#f0e6c0", "labelBoxBkgColor": "#21262d", "labelBoxBorderColor": "#8b949e", "labelTextColor": "#e6edf3", "loopTextColor": "#e6edf3", "activationBkgColor": "#30363d", "activationBorderColor": "#8b949e"}}}%%
flowchart TD
A[Browser opens demo-audit.html] --> B[Loads dist/slashed.full.css]
B --> C{CSS file present?}
C -- Yes --> D[Renders audit sections]
C -- No --> E[Page renders unstyled / broken]
D --> F[Layout primitives section]
D --> G[Macro classes section]
D --> H[State classes section]
D --> I[Accessibility section]
D --> J[Motion section]
D --> K[Print / Theme sections]
D --> L[Forms section]
D --> M[Components section]
D --> N[Utilities section]
F & G & H & I & J & K & L & M & N --> O[Visual QA baseline]
Reviews (1): Last reviewed commit: "docs: add commented CDN link for local t..." | Re-trigger Greptile |
![greptile-apps[bot]](https://avatars.githubusercontent.com/in/867647?s=60&v=4){kind=small}
|
|
||
| <h3>Overlay helper</h3> | ||
| <div class="sf-box" style="position: relative; min-block-size: 6rem"> |
There was a problem hiding this comment.
position: fixed escapes the parent positioning context
sf-imposter--fixed (assumed to apply position: fixed) is demonstrated inside a div that only carries position: relative. CSS position: fixed elements are positioned relative to the viewport, not position: relative ancestors — the only exceptions are when a parent has transform, filter, or perspective applied. As a result, when someone opens this audit page and scrolls, this button will be anchored to the viewport and float over whatever content is currently visible, rather than being centered inside its apparent parent box. The demo is both visually broken and misleading about what the class actually does in practice.
Consider wrapping the imposter demo in a scrollable overflow: hidden container, or applying transform: translateZ(0) to the parent box to create a new stacking/fixed context, so the fixed-positioned element stays contained within the demo region.
| <div class="sf-box sf-is-highlighted">is-highlighted</div> | ||
| <div class="sf-box sf-is-open">is-open panel</div> | ||
| <div class="sf-box sf-is-collapsed">is-collapsed panel</div> | ||
| <button class="sf-btn" aria-expanded="true"> |
There was a problem hiding this comment.
<li> outside a list element is invalid HTML
The <li> here is a direct child of <div class="sf-grid sf-grid--s">, which is not a <ul>, <ol>, or <menu>. Per the HTML spec, <li> is only permitted as a child of those three elements. Browsers apply differing error correction, so the rendered output is implementation-defined and may look inconsistent across Chrome, Firefox, and Safari. The aria-selected attribute on an element that isn't inside a role="listbox" also won't carry its intended semantics for screen readers. Wrapping the element in a <ul style="list-style:none"> (or switching to a <div>) would make the markup valid and the demo reliable.
|
|
||
| <div class="sf-container"> | ||
| <div class="sf-box sf-surface--info"> | ||
| <p>This page is an automated coverage audit for the SLASHED framework. Every |
There was a problem hiding this comment.
The intro paragraph calls this "an automated coverage audit", which implies the page is programmatically generated from docs/classes.md. It is actually a manually-authored static file. If future contributors believe it is auto-generated, they may not think to update it when new classes are added — or they may search for a script that doesn't exist.
| <p>This page is an automated coverage audit for the SLASHED framework. Every | |
| <p>This page is a hand-authored coverage audit for the SLASHED framework. Every |
Note: If this suggestion doesn't match your team's coding style, reply to this and let me know. I'll remember it for next time!
- Address CodeRabbit/Greptile review feedback: fix imposter--fixed escaping its host via a containing-block transform, wrap the orphaned <li> in a <ul>, and correct the "automated" -> "hand-authored" wording. - Set --sf-box-border-width once on <body> so .sf-box demos (invisible by default, border-width: 0) are actually visible throughout the page. - Fix low-contrast text on .sf-card instances nested inside .sf-surface--neutral sections (corner-scoop, clickable-parent, hover cards) by dropping the ambient dark-surface wrapper where cards were affected. - Give the overlap/overlap-host row clearance so .sf-overlap no longer intrudes into the heading above it. - Fix .sf-is-pressed / .sf-is-expanded button demos (contrast + text overflow). - Reset --sf-sticky-offset to 0 on the sticky demo boxes so the sticky element isn't pushed down by the page-header-height token this page doesn't have.
Remove the .sf-corner-scoop macro (and its --top-left/--top-right/
--bottom-left/--bottom-right modifiers plus the --sf-corner-scoop-size/
--sf-corner-scoop-at knobs). Judged too niche for the public API
relative to its cost while still pre-1.0:
- a single absolute --sf-corner-scoop-size needs per-element tuning to
read well across control-sized and hero-sized boxes (no size tier);
- the mask clips box-shadow/border at the cut and can't compose with the
other mask-based macros (.sf-overflow-fade, .sf-scroll-shadow) on the
same element.
Source removed from core/macros.css + core/tokens.macros.css; all
generated docs/registry/configurator/demo artifacts regenerated; the
hand-authored guides (macros.md, llm-guide.md, roadmap.md, CHANGELOG,
token-annotations) and the static QA artifacts (token-reference coverage
page, full-api tokens report, token-api snapshot) updated to match. The
parse-lib regression test that used corner-scoop as an inline fixture was
repointed to a neutral synthetic fixture, preserving its coverage.
To keep a concave corner, apply the mask directly on the element:
style="-webkit-mask-image: radial-gradient(circle at 100% 0, transparent 24px, black 24.5px);
mask-image: radial-gradient(circle at 100% 0, transparent 24px, black 24.5px)"
BREAKING CHANGE: .sf-corner-scoop and its modifiers/tokens are removed.
Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01XnmdrS2b2HnP2gjyTKoa2Y
Reconcile the corner-scoop removal with main's concurrent changes: - CHANGELOG: keep both Breaking Changes bullets (corner-scoop removal + .sf-bento--compact/--tall → --row-compact/--row-tall rename). - demo-audit.html: adopt the new .sf-bento--row-compact/--row-tall names. - Regenerated all docs/api-index/registry artifacts from the merged source so generated-file conflicts resolve to the combined state. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XnmdrS2b2HnP2gjyTKoa2Y
The corner-scoop removal is a breaking change (refactor(macros)!), so the CI "Check migration docs for breaking changes" gate requires a docs/migration.md entry. Add one under 0.7.8 → 0.8.0 documenting the removal and the inline mask-image replacement. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com> Claude-Session: https://claude.ai/code/session_01XnmdrS2b2HnP2gjyTKoa2Y
2 participants
Summary
Adds
demo-audit.html, a comprehensive, self-contained audit page that visually demonstrates every.sf-*class documented indocs/classes.md. The page loads onlydist/slashed.full.csswith no custom CSS, scripts, or third-party resources, making it a reliable reference for framework coverage and a visual regression baseline.The audit is organized by source file (layout primitives, macros, states, accessibility, motion, print, themes, forms, components, and utilities) with realistic markup examples for each class and its modifiers. This serves as both developer documentation and a QA tool for verifying that all documented classes render correctly.
Type
Checklist
feat:,fix:,docs:, …) — enforced by commitlintnpm run lint:csspasses (stylelint) — no CSS changesnpm run buildrebuildsdist/— no source changesnpm testpasses (unit + Playwright e2e) — no code changescore/*.css,optional/*.css, ortoken-registry.jsonchanged — no token changesCHANGELOG.mdupdated under## [Unreleased]— documentation-only change, no user-facing API changeNotes
This is a static HTML audit page with no build or test impact. It serves as a living reference for framework class coverage and can be opened directly in a browser (
open demo-audit.htmlor serve via a local HTTP server). The page is self-documenting and requires no additional tooling or scripts to function.https://claude.ai/code/session_01XnmdrS2b2HnP2gjyTKoa2Y
Summary by CodeRabbit
Breaking Changes
.sf-corner-scoopmacro, its directional variants, and related customization tokens.Documentation
Tests