@drop-in/graffiti

4.10.0

Minor Changes

• Added input-group component for connected input + button patterns, commonly used for copy-to-clipboard, search, and form submission UIs

4.9.0

Minor Changes

• 4fdcf2f: Refactored .box modifiers to use compound class syntax (.box.ghost instead of .box-ghost) and added .box.invisible variant
• 4fdcf2f: Standardized line height tokens to follow consistent sizing scale (--lh-xs, --lh-s, --lh, --lh-m, --lh-l, --lh-xl)
• 4fdcf2f: Added .layout-sidebar.fixed modifier for sticky sidebar layouts. The sidebar stays pinned to the viewport while main content scrolls independently - perfect for app shells and dashboards. Works seamlessly with headers/footers without requiring hardcoded heights.

Patch Changes

• 4fdcf2f: Added --br-xl (24px) and --br-xxl (32px) border radius tokens
• 4fdcf2f: Added .pull-quote class for styled pull quote text

4.8.1

Patch Changes

• Updated callout styles and added br-xl border radius utility

4.8.0

Minor Changes

• 5a568c4: Added sidebar navigation component (.sidebar-nav) for app sidebars with collapsible sections using native details/summary. Fixed dropdown anchor positioning conflicts by using CSS variable (--anchor) for unique anchor names per dropdown.

4.7.1

Patch Changes

• Added user menu block - a composed pattern combining avatar trigger with dropdown menu for user account navigation. Works with both image and initials avatars. Also added button reset styles for clickable avatars.

4.7.0

Minor Changes

• c315536: Added .layout-sidebar.fill modifier for full-height sidebars and .split.vertical for vertical space-between layouts. Also added @property --layout-gap to prevent gap values from cascading to nested layout elements.

4.6.0

Minor Changes

• f330776: Added avatar component for circular user images or initials. Features include:
  • Multiple size variants (xs, s, default, l, xl) via modifier classes
  • Automatic initials/icon fallback when no image provided
  • Optional bordered variant
  • Fluid typography scaling for initials

4.5.0

Minor Changes

• 7cbea8f: Added dropdown menu component using native HTML popover API and CSS anchor positioning. Features include:
  • No JavaScript required for open/close behavior
  • CSS anchor positioning for automatic placement
  • Smooth open/close animations with @starting-style
  • Links and buttons inside menu are automatically styled (no extra classes needed)
  • End-aligned variant with .dropdown.end

4.4.2

Patch Changes

• Added --separator CSS variable to breadcrumbs component for customizable separators (default: "/")

4.4.1

Patch Changes

• 790d028: Added breadcrumbs component - simple breadcrumb navigation with slash separators. Uses semantic HTML with .breadcrumbs class on nav element, supports light/dark themes, and includes proper ARIA attributes for accessibility. Current page indicator uses [aria-current="page"] selector.
• d6dded6: Added toggle switch component - accessible toggle/switch input using native checkbox semantics with .toggle class. Supports checked, disabled, hover, and focus states. Includes .compact variant for smaller toggles.

4.4.0

Minor Changes

• 3449db5: Added details/summary accordion component with smooth open/close animations using @starting-style and allow-discrete. Includes variants: .bordered (container with border), .right (right-aligned trigger), and .minimal (+/− toggle). Also added button.minimal for text-only buttons.

4.3.0

Minor Changes

• Added new color scales and default input styles:
  • Added --white and --black static color scales (do not change with light/dark mode)
  • Added --bg scale (--bg-05, --bg-1 through --bg-9) for contrasting tints that adapt to light/dark mode
  • Added default input styles for input, select, and textarea elements

4.2.0

Minor Changes

• Adds .swipe class giving swipe components with ZERO js

4.1.0

Minor Changes

• Adds JS-less swiper

4.0.0

Major Changes

• • Removes tint-or-shade in favor of --fg-# vars
  • Adds initial border vars
  • Connects more vars throughout codebase

3.1.0

Minor Changes

• Add new .callout component with multiple variants for displaying informational messages, warnings, errors, and success states.New Classes:
  • .callout: Base callout component with blue styling
  • .callout.warning: Yellow warning callout
  • .callout.error: Red error callout
  • .callout.success: Green success callout
  • .callout.ghost: Neutral gray callout
  • .callout.hard: Adds a thick left border accent

  Features:

  • Customizable colors via --callout-color and --callout-border-color CSS variables
  • Vertical flex layout with configurable gap
  • Resets margins on child elements for consistent spacing
  • Uses framework design tokens for padding, border radius, and colors

3.0.1

Patch Changes

• Fixes Holy grail mobile

3.0.0

Major Changes

• • Adds many new colors (highlighter, indego, slate, brown, amber, lime)
  • Renames layout-carousel to carousel layout-reel to reel
  • Adds header component

2.0.0

Major Changes

• Adds new box styles, renames all box classes.New classes include:
  • .box
  • .box-glow
  • .box-semi-gloss
  • .box-semi-ghost

Minor Changes

• Adds Header Layout component

1.0.0

Major Changes

• Update color system to use alpha transparency instead of lightness variationsAll color scales (yellow, orange, red, pink, green, teal, blue, gray) now use alpha transparency from 10% to 100% opacity instead of varying lightness and chroma. This creates more consistent and predictable color scales.Breaking changes:
  • Scale 5 is now 50% opacity instead of the full base color
  • Scale 9 is now the full opacity base color
  • All intermediate scales use alpha transparency
  • Added new --gray base variable

  Benefits:

  • More predictable color behavior
  • Better layering and composition
  • Cleaner relative color syntax
  • Maintains hue and chroma consistency

Minor Changes

• 140b9c8: Separate @drop-in/decks component styles into optional importComponent styles for @drop-in/decks (accordion, dialog, drawer, menu, toast) are now available as a separate import to reduce main bundle size. Users who don't use @drop-in/decks components can now import just the base framework.New exports:
  • @drop-in/graffiti/decks - Component styles CSS file
  • @drop-in/graffiti/decks/raw - Component styles as JS module

  Migration: If you use @drop-in/decks components, add this import:

  import "@drop-in/graffiti/decks";

  Bundle size improvement: Main CSS bundle is now ~15% smaller for projects that don't use decks components.

0.5.0

Minor Changes

• Adds full color system and additional needed sizes

0.4.0

Initial release with base CSS framework features.