Components: second batch

[jackgranatowski]

Status

Pending review — scope, order, and acceptance criteria for each component are subject to change before implementation begins. This issue consolidates all component-related tracking into one place.

Supersedes / consolidates: #354, #355, #358, #247, #220, #219

---

Overview

optional/components.css and optional/tokens.components.css are currently entirely commented out (0 live rules). The @layer slashed.components slot is real and ordered. Components land incrementally as additive minor releases — no breaking changes, no JS, BEM-first throughout.

All components:

• Live in @layer slashed.components
• Use only --sf-* tokens (color / spacing / radius / border / shadow)
• Use logical properties for spacing/sizing/inset
• Must pass WCAG 2.2 (min 24px target size, visible focus, forced-colors safe)
• Must respect prefers-reduced-motion where animation is involved
• Require tests (light + dark) under tests/ and documentation in docs/components.md
• Ship via a MINOR bump only

---

Components

3. .sf-badge

Modifiers: --success, --warning, --error, --info, --neutral

No token block or stub exists yet.

• Define --sf-badge-* tokens in optional/tokens.components.css
• Implement .sf-badge + semantic colour modifiers using --sf-color-* tokens
• Inline/inline-flex, pill shape via --sf-radius-full or --sf-badge-radius
• Forced-colors safe
• Tests + docs

---

4. .sf-tag

Modifiers: --clickable, --removable, --s, --m

No token block or stub exists yet.

• Define --sf-tag-* tokens in optional/tokens.components.css
• --clickable: button semantics, hover/focus state
• --removable: includes an × action target meeting WCAG 2.2 target size
• Size modifiers scale via --sf-tag-* tokens
• Tests + docs

---

5. .sf-alert

Modifiers: --success, --warning, --error, --info, --dismissible · Slots: __icon, __close

No token block or stub exists yet.

• Define --sf-alert-* tokens in optional/tokens.components.css
• Semantic colour modifiers map to --sf-color-* equivalents
• __close slot: WCAG 2.2 target size, aria-label
• --dismissible: no JS required — use details/summary or note JS dependency explicitly
• Forced-colors safe
• Tests + docs

---

6. .sf-avatar

Modifiers: --xs, --s, --m, --l, --xl, --square

No token block or stub exists yet.

• Define --sf-avatar-* tokens: size, radius, bg, border-color, border-width, font-size
• Size modifiers via --sf-avatar-size custom property per modifier
• --square: border-radius: 0 or --sf-radius-s; default is circular
• Works with <img>, initials text, and icon children
• Tests + docs

---

7. .sf-modal

Modifiers: --s, --m, --l, --full · Slots: __header, __body, __footer, __close

No token block or stub exists yet. Depends on native <dialog> element.

• Define --sf-modal-* tokens: width, padding, radius, shadow, backdrop-color
• Built on native <dialog> — no JS API, just CSS; consumer handles showModal()/close()
• Size modifiers control max-inline-size
• @starting-style entry animation (fade + translate-y) respecting prefers-reduced-motion
• ::backdrop styled via --sf-modal-backdrop-color
• Forced-colors safe
• Tests + docs

---

8. .sf-skeleton

Modifiers: --text, --avatar, --card, --line

Reserved commented stub exists in optional/components.css (0 live rules).

• Implement .sf-skeleton + shape modifiers
• Shimmer via background-image animation using --sf-color-* surface tokens
• Shimmer disabled under prefers-reduced-motion: reduce (static muted fill instead)
• img.sf-skeleton, .sf-skeleton img { opacity: 0 } to suppress native image rendering
• Tests (light + dark) + docs

---

9. Custom checkbox, radio, and toggle

New file: optional/forms-custom.css (opt-in, optional/forms.css accent-color approach stays as default)

• Custom checkbox — appearance: none + :checked + SVG checkmark via background-image
• Custom radio — appearance: none + :checked + filled dot
• Toggle/switch — pill shape, animating thumb on :checked
• Indeterminate state — dash indicator (:indeterminate)
• All use existing tokens: --sf-color-action, --sf-color-surface, --sf-radius-*, --sf-duration-fast, --sf-ease-out
• prefers-reduced-motion safe (disable thumb animation)
• Tests + docs

---

10. @starting-style entry/exit animations

Depends on: --sf-transition-overlay token · Ships alongside .sf-modal (and any future dialog/popover)

• Entry animation pattern (opacity + translate) on [open] / :popover-open
• Exit via :not([open]) / :not(:popover-open) with display: none transition
• Gated on prefers-reduced-motion — instant show/hide when reduced
• Progressive enhancement — no broken layout without support

---

Acceptance criteria (shared)

• All components additive — zero changes to core/, zero breaking token renames
• Each component's token block uncommented (or added) in optional/tokens.components.css
• Each component class uncommented (or added) in optional/components.css
• docs/components.md updated with usage + HTML examples per component
• Tests added under tests/ for each (light + dark modes minimum)
• MINOR version bump per batch shipped
• npm run check:version passes before each commit