add-component

name	add-component
description	Add or modify a component in the destiny-ui-css framework itself (new SCSS module, new variant, token change). Use when the framework needs a component it doesn't have, or an existing component needs new styles.

Add a component to destiny-ui-css

Checklist

1. Tokens first. All colors come from src/_variables.scss. Reuse an existing token if one fits. If a genuinely new color is needed, add it in all three places: a $_-prefixed raw value, a --d2-* line in the destiny-color-tokens mixin, and a public $var: var(--d2-…) reference. Never hardcode a palette color in a component file (neutral white/black rgba overlays are the only exception).
2. Derived shades. Public $vars are var() references, so Sass color functions (lighten, darken, rgba) will NOT work on them. Use the helpers from _variables.scss instead — shade-light($c, 12%), shade-dark($c, 18%), fade($c, 70%) — which compile to CSS color-mix() and keep the shade tied to the token when users re-theme. For per-rarity or per-element rule sets, iterate the shared $rarityColors / $damageColors maps.
3. Create the module at src/components/<name>.scss with a short header comment describing which in-game UI element it models. Follow the existing conventions: uppercase + letter-spacing for labels, translucent fills, thin borders, the white-fill hover language, .active/.selected/.disabled state classes, and a @media (max-width: 486px) block if sizes need to shrink on mobile.
4. Register it in the import list inside the .destiny block of src/main.scss (keep the grouping comments). The nested @import pattern is intentional — do not convert to @use.
5. Build: npm run build-css. The compiled dist/ and docs/dist/ files are committed — include them in the same commit.
6. Document it in docs/index.html: add a section with a .header.tooltip title, a short intro, and a demo inside <div class="example" data-code>…</div>. The data-code attribute auto-generates the "view code" toggle from the block's exact innerHTML, so the demo markup must be clean and properly indented. Add a sidebar link for the section. Update the module table in README.md and the component reference in docs/llms.txt with the canonical markup.
7. Verify visually. Open docs/index.html in a (headless) browser and screenshot the new section; check hover/checked/active states, not just the static render. There is no test suite — the screenshot is the review artifact.