feat: new cosmoz-email-list input

[ionut]

feat: new cosmoz-email-list input

A new tag-based email list input component for collecting multiple email addresses. FE-343

New files

• src/cosmoz-email-list.ts — Component definition (<cosmoz-email-list>). Renders email tags via cosmoz-tag with a text input. Reuses the shared render() wrapper for label, placeholder, error, prefix/suffix slots. Invalid emails get color="error" on their tag.
• src/use-email-list.ts — Core hook (useEmailList) with all state and interaction logic:
  • Add emails via Enter, comma, or blur
  • Remove emails via tag ✕ button or Backspace on empty input
  • Comma-separated paste support (splits and adds multiple)
  • Automatic lowercase normalization and duplicate prevention
  • Email validation via regex, sets invalid attribute on host
  • validate() imperative API exposed on the element
  • value-changed and focused-changed events via notifyProperty
  • Click-to-focus delegation (mousedown on non-interactive areas focuses input)
• stories/cosmoz-email-list.stories.ts — Demo stories: Basic, WithValues, Disabled, WithError, WithSuffix, Contour
• stories/cosmoz-email-list.test.stories.ts — 16 interaction test stories covering: Focus, AddEmailViaEnter, AddEmailViaComma, AddEmailViaBlur, InvalidEmail, DuplicateEmail, RemoveEmailViaTag, RemoveEmailViaBackspace, Validate, ValidateInvalid, ValueChanged, DelegatesFocus, Mousedown, Placeholder, PlaceholderHidesWithValues, MultipleEmailsViaComma, EmailNormalization

Modified files

• src/styles.ts — Added emailListStyles with flex-wrap layout for tags, floating label when tags present, and avatar-style prefix circle
• src/index.ts — Exports the new component
• package.json — Added ./email-list export map entry and @neovici/cosmoz-tag, @neovici/cosmoz-tokens dependencies
• .storybook/preview.js — Updated storybook preview config

Key design decisions

• Uses getPlaceholder() util from cosmoz-input — placeholder hides (becomes ' ') when emails are present
• No change event — follows the value-changed pattern used across the cosmoz-* ecosystem
• Tags show color="error" for emails that don't pass regex validation (e.g., set externally via .value)

[github-actions]

PR Preview Action v1.8.1
🚀 View preview at https://Neovici.github.io/cosmoz-input/pr/pr-226/
Built to branch gh-pages at 2026-03-19 14:08 UTC. Preview will be ready when the GitHub Pages deployment is complete.