[maxigimenez]

Closes #22.

Summary

• add an additive Alert variant API: default | subtle
• keep the existing default alert treatment unchanged
• derive subtle surfaces and borders from the active tone and theme with 8%/30% color-mix() values
• expose --bits-alert-surface and --bits-alert-border so themes can supply exact authored colors without private selectors
• use a 12px glyph-free marker for subtle alerts and allow icon={null} to omit the marker entirely
• give subtle danger alerts advisory role="status" semantics by default while preserving explicit role overrides
• document the public API and add Storybook coverage for every tone, theme overrides, actions, and narrow layouts

Review notes

The default variant still uses --bits-raised, the full alert tone border, the existing 24px glyph marker, and role="alert" for danger. Existing consumers therefore retain their markup, visual weight, and live-region behavior.

For variant="subtle", the default surface is an 8% tone wash over --bits-surface; the border is a 30% tone mix over the same surface. Both declarations first read --bits-alert-surface/--bits-alert-border, so a theme container can replace the derived values without targeting .bits-alert-* internals.

Verification

• npm run check under Node 24.13.1
  • ESLint: passed
  • TypeScript: passed
  • Vitest: 31/31 passed
  • ESM/CJS/declaration build: passed
  • package verification: 22 public exports verified
  • static Storybook build: passed
• browser checks at 1024×768
  • default danger marker remained 24×24 with role="alert"
  • subtle danger marker rendered 12×12 without a glyph and used role="status"
  • every subtle info/warning/success/danger combination produced distinct tone-derived surface and border colors in both Ember and Ocean
  • no horizontal overflow in either theme
• exact theme override check
  • --bits-alert-surface: #170d0b resolved to rgb(23, 13, 11)
  • --bits-alert-border: #4a231c resolved to rgb(74, 35, 28)
• responsive check at 320×700
  • content and action stacked into a column
  • no horizontal overflow

Visual evidence

Ember · default versus subtle emphasis

Ocean · default versus subtle emphasis

Ember · authored theme override

Ember · 320px viewport