feat(elements): add Lit-based Web Components package#1730
Conversation
Add @seed-design/elements, a Light DOM Lit components layer that reuses @seed-design/css recipes — components only emit classNames and the CSS is loaded globally by the consumer, the same separation @seed-design/react uses with css as a peer dependency. recipe modules' self CSS imports mean each component pulls only its own CSS (no all.css). Components (Wave 0-2): ActionButton, Badge, Checkbox, RadioGroup (+Radio), SegmentedControl (+Item), Skeleton, Switch, Text, TextField. Patterns: presentational (host class), interactive (inner native button), composite form via ElementInternals, and cross-element group (parent owns selection; SegmentedControl positions its indicator with --segment-index/ --segment-count CSS vars). White-label icon strategy: the package ships no concrete icon/i18n; the checkmark is injected via a `checkedIcon` property. A layer-2 snippet dir (demo/seed-design/ui) shows consumer-owned registration. Concrete-icon injection is deferred until @karrotmarket/icon-data ships SVG files or web components rather than raw strings. Build: vite + rolldown, ESM, preserveModules, per-component define/* entries. See WEB_COMPONENTS_PLAN.md for the full design and decisions. Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>
|
|
Important Review skippedDraft detected. Please check the settings in the CodeRabbit UI or the ⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: You can disable this status message by setting the Use the checkbox below for a quick retry:
✨ 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 |
1 participant
No description provided.