FEAT: Toast component

[Arnimag]

In order to receive timely and accessible feedback on system actions
As a customer or content manager
I want to see and interact with toast notifications categorized by type (info, success, error, warning) that support optional icons, manual dismissal, and automated duration-based closing.

Acceptance Criteria

• Visual Feedback: Toasts render with distinct styling and color-coding for info, info-light, success, error, and warning` types.
• Content Support: Components support an optional icon, a text message, and a dedicated close button.
• Behavioural Logic:
  • duration prop correctly controls the auto-close timer. Default 7 seconds. For errors 15 seconds.
  • Multiple active toasts stack vertically without obscuring critical navigation or primary UI elements.
• Accessibility (Standard): The toast container region uses role="status" and aria-live="polite" by default.
• Accessibility (Critical): When "Critical" mode is enabled, the toast uses aria-live="assertive" to ensure immediate announcement by screen readers.
• Interaction: Users can manually dismiss a toast via the close button or keyboard interaction.
• Looks and works consistent across all supported browsers and devices.
• Can be viewed and manipulable in Storybook.

Background & Resources

https://demo.shopin.dev/storybook/?path=/story/ui-toast--playground