feat: implement all 0.5.0.0 CSS & JS roadmap items#12
Merged
codeslash-net merged 3 commits intomainfrom May 3, 2026
Merged
Conversation
Tokens (tokens-default.css): - Add --info color system (sky-500/#0ea5e9, --info-100, --info-600) with dark-mode variants - Remove @Property for --success/--warning/--error (status colors, not brand; no transition needed) - Fix status colors to static light-mode values instead of light-dark() - Add --border-width-2/4, --border-style, --font-weight-body/medium/semi, --shadow-2xs - Add semantic aliases: --color-text-body, --color-placeholder, --color-link-active, --color-text-on-success/warning/error/info Core (slashed-core.css): - ::placeholder uses --color-placeholder token with fallback chain - .section--soft (primary-50 tint) and .section--bold (full primary + on-primary text) Utilities (slashed-utilities.css): - Text: .text-body, .text-info, .break-all, .break-keep, .hyphens-auto/none, .tabular-nums - Lists: .list-disc, .list-decimal - Sizing: .max-w-content, .size-full, .size-fit, .min-h-svh - Overflow: .overflow-clip, .overflow-x-clip, .overflow-y-clip - Interaction: .pointer-events-auto, .select-text, .select-all, .isolate, .isolation-auto - CSS Columns: .cols-2/3/4, .cols-auto-xs/s/m, .col-gap-m/l, .col-span-all, .col-break-before/after/avoid Visual utilities (slashed-utilities-visual.css): - Opacity scale expanded from 4 to 14 stops (0/5/10/20/25/30/40/50/60/70/75/80/90/100) - .shadow-2xs added; .border-2/.border-4 use --border-width-2/4 tokens - .isolation-isolate removed (replaced by .isolate in core utilities) - .bg-primary/secondary/accent cascade --color-text/link/border to children Components (slashed-components.css): - .cs-notice/badge/toast/message --info variants (complete 4-status set) - .cs-modal--drawer-start/.--drawer-end: slide-in drawer via translate + @starting-style (--drawer-width instance token, RTL-aware, no JS required for animation) - .cs-btn--icon: square icon-only button (aspect-ratio:1, --btn-icon-padding token) - @media (hover:hover) guards on 4 hover rules to prevent stuck states on touch JS (slashed-ui.js): - openModal(dialog), toggleModal(dialog), dismissToast(el) added to window.slashedUI Cheatsheet updated for all new tokens, utilities, components, and JS API. CHANGELOG.md: 0.5.0.0 entry (absorbs unreleased fixes). ROADMAP.md: completed 0.5.0.0 items moved to "Explicitly NOT" section. CLAUDE.md + CONTRIBUTING.md: version bumped to 0.5.0.0. check-version-sync: ok (0.5.0.0). https://claude.ai/code/session_01QJs8xHtTbo2ZqjxRTiY8At
|
No actionable comments were generated in the recent review. 🎉 ℹ️ Recent review info⚙️ Run configurationConfiguration used: defaults Review profile: CHILL Plan: Pro Plus Run ID: 📒 Files selected for processing (1)
✅ Files skipped from review due to trivial changes (1)
📝 WalkthroughWalkthroughRelease v0.5.0.0: adds an Changes0.5.0.0 Release
Sequence Diagram(s)sequenceDiagram
participant Dev as Developer
participant Win as window.slashedUI
participant Dialog as <dialog> element
participant Toast as Toast manager
Dev->>Win: openModal(dialog)
Win->>Dialog: if dialog && dialog.isConnected && !dialog.open -> dialog.showModal()
Dev->>Win: toggleModal(dialog)
Win->>Dialog: if dialog.open -> dialog.close() else -> dialog.showModal()
Dev->>Win: dismissToast(el)
Win->>Toast: dismiss(el) -- delegates to internal dismiss routine
Toast-->>Dev: optional animation/end callback
Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes Possibly related PRs
Poem
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches📝 Generate docstrings
🧪 Generate unit tests (beta)
Review rate limit: 9/10 reviews remaining, refill in 6 minutes. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 9
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@CHANGELOG.md`:
- Around line 86-89: Move the `.isolation-isolate` → `.isolate` entry out of the
"Removed — visual utilities" section and add it as a one-line rename map under a
new or existing `### Breaking` section in CHANGELOG.md; specifically, create a
`### Breaking` heading (if missing) and add a single-line entry like
"`.isolation-isolate` → `.isolate`" to record the public-surface rename,
removing the old bullet under "Removed — visual utilities" to avoid duplication.
In `@css/slashed-components.css`:
- Around line 3073-3076: The toast helper in js/slashed-ui.js currently only
recognizes "success|warning|error", so add "info" to the allowed variants and
ensure it maps to the CSS modifier (cs-toast--info); update the validation/enum
or switch inside slashedUI.toast (and any helper like
getToastClass/getVariantClass) to accept 'info', and ensure the DOM class
construction or case branch applies 'cs-toast--info' when variant === 'info' so
slashedUI.toast({ variant: 'info' }) uses the new CSS variant.
- Around line 142-162: The .cs-modal--drawer-start rule lacks an explicit
horizontal anchor; add inset-inline-start: 0 to the .cs-modal--drawer-start
selector so the drawer is pinned to the viewport's start edge (mirroring
.cs-modal--drawer-end which uses inset-inline-end: 0), ensuring the translate
transform will animate it from off-screen into the correct docked position.
In `@css/slashed-core.css`:
- Around line 771-773: .section--bold currently only changes the color; update
the .section--bold rule to override the token aliases used by descendants so
they resolve on-primary variants inside the section (e.g. set --color-link,
--color-text-muted, --color-text-subtle, etc. to their corresponding
--*-on-primary variables). Locate the .section--bold selector and add
assignments like --color-link: var(--color-link-on-primary) and similar mappings
for other --color-text-* tokens so unclassed links and token-driven content
inherit the on-primary palette.
In `@css/slashed-full.css`:
- Around line 6378-6379: Update the .text-info utility to use the darker token
--info-600 instead of the fill token --info: change the CSS rule for .text-info
to color: var(--info-600); apply this change in the source CSS (not the
generated bundle) so it matches other info surfaces like .cs-badge--info and
.cs-message--info, then regenerate the compiled bundle using your project's CSS
build script.
- Around line 1514-1515: .section--bold only changes the inherited color but not
the semantic CSS custom properties used by SLASHED children (e.g.
var(--color-text), var(--color-link)), so update the source CSS (not the
generated css/slashed-full.css) to scope and override those semantic tokens
inside .section--bold by setting them to their "on-primary" equivalents (for
example assign --color-text: var(--color-text-on-primary) and --color-link:
var(--color-link-on-primary) etc. inside the .section--bold rule), then run
bin/build-bundle.sh to regenerate css/slashed-full.css so links and token-driven
copy use the high-contrast on-primary palette.
In `@css/slashed-utilities-visual.css`:
- Around line 98-115: The .bg-primary/.bg-secondary/.bg-accent rules set token
variables but don’t actually apply them to descendants or link states; add a
declaration to each class to set the inherited text color (color:
var(--color-text)) and ensure link states inside those surfaces are overridden
(selectors like .bg-primary a, .bg-primary a:visited, .bg-primary a:hover,
.bg-primary a:active should use color: var(--color-link)), and likewise for
.bg-secondary and .bg-accent; also ensure borders use --color-border (or
currentColor) where appropriate so all descendants and interactive link states
consistently use the branded tokens (--color-text, --color-link,
--color-border).
In `@js/slashed-ui.js`:
- Around line 129-137: openModal currently calls dialog.showModal()
unconditionally which throws InvalidStateError if the dialog is already open;
change openModal(dialog) to be idempotent by first checking dialog && typeof
dialog.showModal === 'function' && !dialog.open before calling
dialog.showModal(), so repeated calls are safe; ensure toggleModal (which calls
openModal/closeModal) continues to work with the new guard and does not need
try/catch.
In `@ROADMAP.md`:
- Around line 384-395: Update the ROADMAP.md entry that still claims all six
status colors are registered with `@property`: remove or edit the stale
"`@property` for brand colors" bullet so it no longer asserts
`--success`/`--warning`/`--error` are registered; instead state that only the
brand colors remain registered with `@property` while `--success`, `--warning`,
and `--error` now use static light-mode values (as noted in the `--info` color
system and tokens-default.css bullets). Reference the status tokens `--success`,
`--warning`, `--error`, the `--info` change, and the `tokens-default.css` note
when making the update.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 7093d07a-5676-4697-8f0b-09126b92e848
📒 Files selected for processing (12)
CHANGELOG.mdCLAUDE.mdCONTRIBUTING.mdROADMAP.mdcheatsheet.htmlcss/slashed-components.csscss/slashed-core.csscss/slashed-full.csscss/slashed-utilities-visual.csscss/slashed-utilities.csscss/tokens-default.cssjs/slashed-ui.js
Comment on lines
+86
to
+89
| ### Removed — visual utilities (`slashed-utilities-visual.css`) | ||
|
|
||
| - **`.isolation-isolate`** — replaced by `.isolate` in core utilities. | ||
|
|
There was a problem hiding this comment.
Move the class rename to a ### Breaking rename map.
.isolation-isolate → .isolate is a public-surface breaking rename, so it should be recorded under ### Breaking with a one-line map.
Suggested changelog adjustment
+### Breaking
+
+- `.isolation-isolate` → `.isolate`
+
### Removed — visual utilities (`slashed-utilities-visual.css`)
- **`.isolation-isolate`** — replaced by `.isolate` in core utilities.As per coding guidelines CHANGELOG.md: “For every framework-surface change (new/renamed/removed class, token, or JS API), add an entry to CHANGELOG.md ... Breaking changes go under ### Breaking with a one-line rename map.”
🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed.
In `@CHANGELOG.md` around lines 86 - 89, Move the `.isolation-isolate` →
`.isolate` entry out of the "Removed — visual utilities" section and add it as a
one-line rename map under a new or existing `### Breaking` section in
CHANGELOG.md; specifically, create a `### Breaking` heading (if missing) and add
a single-line entry like "`.isolation-isolate` → `.isolate`" to record the
public-surface rename, removing the old bullet under "Removed — visual
utilities" to avoid duplication.
CHANGELOG.md:
- Add ### Breaking section for .isolation-isolate → .isolate rename
css/slashed-components.css:
- Add inset-inline-start: 0 to .cs-modal--drawer-start to pin it to the
viewport start edge (mirroring .cs-modal--drawer-end's inset-inline-end: 0)
css/slashed-core.css:
- .section--bold now cascades full on-primary token set:
--color-text, --color-text-body, --color-text-muted, --color-link,
--color-link-hover, --color-link-visited, --color-link-active, --color-border
so all SLASHED token-driven descendants render correctly on primary bg
css/slashed-utilities.css:
- .text-info uses --info-600 instead of --info for WCAG AA legibility
(matches .cs-badge--info and .cs-message--info pattern)
css/slashed-utilities-visual.css:
- .bg-primary/.bg-secondary/.bg-accent now set color: explicitly and
cascade full link token set (--color-link-hover, --color-link-visited,
--color-link-active, --color-text-body) so all descendants and link
states resolve correctly on branded surfaces
js/slashed-ui.js:
- openModal: guard !dialog.open to prevent InvalidStateError on repeated calls
- toast: add 'info' to allowedVariants so slashedUI.toast({variant:'info'})
applies .cs-toast--info correctly
ROADMAP.md:
- Fix stale @Property note: only --primary/secondary/accent remain registered;
--success/warning/error @Property removed in 0.5.0.0; --info never registered
https://claude.ai/code/session_01QJs8xHtTbo2ZqjxRTiY8At
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@js/slashed-ui.js`:
- Around line 129-131: The openModal helper may call dialog.showModal() on a
detached <dialog> which throws InvalidStateError; update openModal(dialog) to
first confirm the element is connected (e.g., check dialog.isConnected or
document.contains(dialog)), still verify typeof dialog.showModal === 'function'
and !dialog.open, and only then call showModal; if the dialog is not connected,
fail-safe by doing nothing (or return) so the public API never throws.
Reference: openModal, dialog.showModal, and dialog.open.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: defaults
Review profile: CHILL
Plan: Pro Plus
Run ID: 25a0ab6a-b1cf-43f3-a200-762173e154b2
📒 Files selected for processing (8)
CHANGELOG.mdROADMAP.mdcss/slashed-components.csscss/slashed-core.csscss/slashed-full.csscss/slashed-utilities-visual.csscss/slashed-utilities.cssjs/slashed-ui.js
✅ Files skipped from review due to trivial changes (3)
- css/slashed-utilities.css
- css/slashed-utilities-visual.css
- CHANGELOG.md
🚧 Files skipped from review as they are similar to previous changes (3)
- ROADMAP.md
- css/slashed-components.css
- css/slashed-full.css
Add dialog.isConnected check before calling showModal() so the public API never throws InvalidStateError when called on a dialog that has been removed from the DOM. https://claude.ai/code/session_01QJs8xHtTbo2ZqjxRTiY8At
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Tokens (tokens-default.css):
--color-text-on-success/warning/error/info
Core (slashed-core.css):
Utilities (slashed-utilities.css):
.col-break-before/after/avoid
Visual utilities (slashed-utilities-visual.css):
Components (slashed-components.css):
(--drawer-width instance token, RTL-aware, no JS required for animation)
JS (slashed-ui.js):
Cheatsheet updated for all new tokens, utilities, components, and JS API.
CHANGELOG.md: 0.5.0.0 entry (absorbs unreleased fixes).
ROADMAP.md: completed 0.5.0.0 items moved to "Explicitly NOT" section.
CLAUDE.md + CONTRIBUTING.md: version bumped to 0.5.0.0.
check-version-sync: ok (0.5.0.0).
https://claude.ai/code/session_01QJs8xHtTbo2ZqjxRTiY8At
Summary by CodeRabbit
New Features
Breaking Changes
Bug Fixes
Documentation