Changelog
Notable changes to @eagami/ui, newest first.
4.5.1 2026-06-26
Changed
- Publish the package with npm provenance attestation and an explicit file allowlist for a more verifiable install.
4.5.0 2026-06-25
Added
- Add Ukrainian and Russian to the built-in locales, bringing the bundled languages to twelve.
4.4.0 2026-06-24
Added
- Support forced-colors (Windows High Contrast) mode across the library: keyboard focus rings now stay visible, floating surfaces (menus, dialogs, popovers, toasts, tooltips) keep a visible boundary, selected and checked states stay distinct, and meaningful colors (semantic alerts, tags, swatches, the brand wordmark) are preserved.
4.3.1 2026-06-24
Fixed
- Honor
prefers-reduced-motionfor the button's loading spinner and the file uploader's progress bar, so neither animates against the user's motion preference.
4.3.0 2026-06-22
Added
- Add a batch of icons spanning AI, editor, commerce, and nature, plus a set of popular brand marks.
- Add a
clickableinput androwActivateoutput to<ea-data-table>for click and keyboard row activation with a pointer cursor.
4.2.0 2026-06-22
Added
- Show a semantic leading icon on each
<ea-toast>variant (success, info, warning, error). - Expose per-component surface tokens (such as
--ea-dropdown-menu-background-colorand--ea-dialog-panel-background-color) so floating overlays can be re-themed without overriding the shared elevated-surface token. - Add row-level styling tokens to
<ea-data-table>(background, hover, stripe, and border) and an overline color token to<ea-eagami-wordmark>.
Fixed
- Let a consumer's
:rootdesign-token overrides take effect in light mode, OS dark mode, and forced dark mode alike, regardless of stylesheet load order. - Shrink a wrapping multi-line tooltip to its longest line so it no longer leaves empty space along the right edge.
- Center
<ea-radio>on its content instead of an inline baseline, so radios no longer sit bottom-heavy (most visible in a horizontal<ea-radio-group>).
4.1.1 2026-06-20
Fixed
- Correct the internationalization documentation to state that built-in strings ship in ten languages.
4.1.0 2026-06-20
Added
- Add
EAGAMI_LOCALE_META, exposing each built-in locale's display name and flag so apps can build a language switcher without re-declaring the list.
4.0.0 2026-06-20
Changed
- Breaking: Make the built-in locales opt-in so apps bundle only the languages they use. English is always available; register other languages via
provideEagamiUi({ locales: [...] }), or pass the newEAGAMI_ALL_LOCALESfor every shipped language. An unregistered locale now falls back to English. Replaces the removedEAGAMI_MESSAGESexport. See MIGRATION.md.
Fixed
- Keep
<ea-radio-group>options spaced apart whenorientationis left unset.
3.2.1 2026-06-20
Fixed
- Guard
<ea-dialog>and<ea-drawer>against touching the DOM during server-side rendering, so the library prerenders and hydrates without crashing.
3.2.0 2026-06-20
Added
- Add an opt-in
navigableinput to<ea-data-table>that turns the table into a keyboard-navigable grid, with roving focus, arrow-key cell movement, Home/End and Ctrl+Home/End jumps, and PageUp/PageDown paging.
3.1.1 2026-06-19
Changed
- Migrate the unit test suite from Jest to Vitest.
3.1.0 2026-06-14
Added
- Integrate every form control with Angular reactive and template-driven forms, so validation errors surface automatically once a field is invalid and touched, with localized default messages for the standard validators.
- Add an
errorMessagesinput to every form control for overriding the validation text per error key.
Changed
- Enlarge the field-level error icon slightly so it reads more clearly alongside the message.
3.0.0 2026-06-13
Added
- Add German, Brazilian Portuguese, Mandarin Chinese, Icelandic, and Dutch translations (
de,pt-BR,zh-CN,is,nl), bringing the built-in locales to ten. - Add a
maxHeightinput to<ea-menu>so long menus can scroll past a taller cap. - Add Angular 22 support by widening the
@angular/*peer range to^21.0.0 || ^22.0.0.
Changed
- Breaking: Remove the deprecated
sizeinput from<ea-drawer>and<ea-dialog>; usewidthinstead. - Breaking: Remove the deprecated
showValueinput from<ea-progress-bar>; useshowPercentageinstead. - Breaking: Remove the deprecated
rowsinput from<ea-textarea>; useminHeight,maxHeight, and the resize handle instead. - Breaking: Remove the deprecated numeric (
1/2/3) variant aliases from<ea-eagami-wordmark>; usedefault,byline, ortagline. - Breaking: Default the tooltip directive's
maxWidthto 200px, so a tooltip without an explicit width now wraps at 200px instead of running unbounded.
Fixed
- Keep
<ea-input>reflecting its bound value even when it reverts to the value last applied, so a cleared field repopulates a re-applied default. - Give tooltips a dedicated surface colour and a hairline border so they no longer blend into dark backgrounds.
- Make
<ea-segmented>block-level so it aligns with inputs and selects in a shared row instead of sitting lower.
2.12.0 2026-06-10
Added
- Add playground control metadata for the remaining components so every component has an interactive demo.
- Add an
animatedslide-in option to<ea-drawer>. - Add
sizeandgroupThousandsinputs to<ea-paginator>. - Add
clearableandpositioninputs to<ea-toast>. - Add a
maxWidthinput to the tooltip directive that wraps long text at a set width. - Add
<ea-icon-half-heart>and<ea-icon-half-circle>so half-step ratings work with heart and circle icons.
Changed
- Breaking:
<ea-multi-select>keeps selected chips on one horizontally scrollable row with an always-visible clear button, and shows every chip by default instead of capping at three.
Fixed
- Honor
<ea-drawer>'scloseOnEscapewhen off, and keep the trigger working after Escape closes the drawer. - Trim
<ea-drawer>vertical padding at the smaller sizes so top and bottom drawers no longer clip their content. - Use the interactive hover wash for
<ea-menu>items so the hover state stays visible on dark surfaces. - Fix
<ea-paginator>left and right alignment. - Show tooltips when keyboard focus lands on a wrapped trigger such as
<ea-button>. - Stretch
<ea-segmented>to the full width of its container whenfullWidthis set. - Even out the connector spacing between
<ea-stepper>steps.
2.11.0 2026-06-09
Added
- Add an
allowAllCharsinput to<ea-code-input>for accepting any non-whitespace character, not just digits.
Changed
- Lighten the avatar's initials placeholder background in light mode.
- Spread
<ea-code-input>'s placeholder one character per cell instead of repeating it across every cell. - Lighten
<ea-data-table>striped rows to a mid-tone between the header and unstriped rows instead of matching the header shade.
Fixed
- Stop the dropdown, autocomplete, and multi-select menus from revealing the content behind them when their list is scrolled past its end.
- Drop the trailing gap on an icon-only
<ea-button>so the icon is no longer offset when there is no label. - Scope
<ea-card>padding to the card's own content so a nested card no longer inherits an outer card's padding. - Make a full-width
<ea-card>stretch the host so it fills flex and inline parents, not only normal block flow. - Apply
<ea-data-table>column widths to body cells so the columns stay aligned with the header whenstickyHeaderis enabled.
2.10.0 2026-06-08
Changed
- Layer popover-based overlays (dropdowns, menus, selects, date and time pickers) above modals, drawers, and sticky headers so they are never covered, while staying below toasts and tooltips.
Fixed
- Render the
<ea-autocomplete>suggestion list in an overlay so it is no longer clipped by scrollable or overflow-hidden ancestors. - Render
<ea-accordion>as a block-level element so its width follows its container instead of stretching when a long panel opens.
2.9.0 2026-06-08
Added
- Add bounded number support to
<ea-input>:min/max(clamped on blur),step, andmaxLength/minLength. Number fields auto-narrow to their widest value, ignore the scroll-wheel, and block theekey. - Add a
groupThousandsinput (default on) to<ea-slider>and<ea-range-slider>that formats displayed values with thousands separators.
Changed
- Switch
<ea-eagami-wordmark>variantto string values (default,byline,tagline); the numeric1/2/3are deprecated and will be removed in v3.0.0. - Default
<ea-eagami-wordmark>sizeto 48px and floor it at 10px. - Add an
alloption to<ea-color-picker>format(now the default) that cycles hex/rgb/hsl from the popover toggle (with HSL inputs); a specific format locks the picker to it.
Fixed
- Keep the
<ea-eagami-wordmark>logo proportional when its size is cleared, and match the byline and tagline letter-spacing to the brand text. - Apply the
xsandxlsizes to<ea-code-input>and<ea-tabs>, which previously only boundsm/md/lg.
2.8.0 2026-06-07
Added
- Add an optional
iconinput to<ea-button>for a leading icon that scales to 1.5x the label text. - Add a
thickinput to<ea-divider>for a heavier rule. - Add
iconandborderedinputs to<ea-empty-state>. - Extend the size range to the full
xsthroughxlscale across all sized components, including<ea-drawer>and<ea-dialog>panel widths, and export sharedEaSizeandEaWidthtypes.
Changed
- Breaking: Remove the deprecated
4variant from<ea-eagami-wordmark>; use3instead. - Standardize the
sizescale sosm,md, andlgmap to the same text sizes across every component. - Rename the
<ea-drawer>and<ea-dialog>sizeinput towidth;sizeis deprecated and will be removed in v3.0.0. - Normalize
<ea-rating>to the standard size scale while keeping its stars at 1.5x the label text. - Rescale
<ea-badge>to the new range while keeping it a step smaller than body components.
Fixed
- Offset menus and other popover panels from their anchor so an open panel no longer covers the input's active focus ring.
2.7.0 2026-06-06
Added
- Add an
iconinput to<ea-alert>and<ea-input>for a leading icon, plus asizeinput on<ea-alert>. - Add
showPercentageto<ea-progress-bar>, replacingshowValue. - Add
xsandxlsizes to<ea-spinner>and<ea-radio-group>. - Add a
minHeightinput to<ea-textarea>.
Changed
- Enlarge the alert status icon to 1.5x the text, tighten its gap, and vertically center it with the message.
- Scale every component's text, icons, padding, and controls proportionally with its
size, and standardize all clear/close/dismiss/toggle buttons to one consistent affordance. - Size
<ea-spinner>so its circle is always 1.5x the label text. - Deprecate
<ea-progress-bar>showValue(useshowPercentage) and<ea-textarea>rows(usemaxHeightand the resize handle); both removed in v3.0.0.
Fixed
- Stop popovers and dropdowns from closing when scrolling inside their own scrollable list.
- Show a hover background on the alert dismiss button.
- Darken the avatar placeholder background so it stays visible on light surfaces.
- Scale avatar initials and the fallback user icon to the avatar size so they stay proportionate at small sizes.
- Shrink small badge text so it reads distinctly from the medium size.
- Stop the
<ea-textarea>focus ring being clipped at its bottom edge, and let it resize horizontally and in both directions. - Show the dividing line for a vertical
<ea-divider>with a label, and lift the divider line's contrast in dark mode. - Show the
<ea-slider>and<ea-range-slider>value whenshowValueis enabled but no label is set.
2.6.0 2026-06-05
Added
- Add
--color-state-hoverand--color-state-activetokens: translucent hover and active fills that lift off whatever sits beneath them, so they never blend with the surface.
Changed
- Route component hover and active states through the new translucent layers so they stay visible on any dark surface instead of matching the muted shade beneath.
- Add a top gap above accordion item content.
- Generate auto element ids deterministically so server and client renders stay in sync.
Fixed
- Keep ghost and secondary button labels readable when pressed in dark mode; the active fill no longer washes out near white.
2.5.3 2026-06-04
Changed
- Update dependencies to their latest compatible releases.
Fixed
- Resolve a moderate-severity security advisory.
2.5.2 2026-05-31
Added
- Add
--color-{success,warning,error,info}-textforeground tokens. Status text in<ea-badge>,<ea-tag>, and<ea-toast>now routes through them, flipping from the*-700shades to light*-200pastels in dark mode so it stays legible on the translucent status washes.
Fixed
- Soften the dark-mode muted surface (
--color-bg-muted) one step so ghost/secondary button and table-row hovers lift subtly instead of reading as a harsh mid-grey fill.
2.5.1 2026-05-29
Changed
- Rework dark-mode elevation so drop shadows render dark with a subtle top-edge highlight instead of an inverted white glow, fixing the washed-out look on cards, toasts, and other raised surfaces.
- Lift floating panels (menus, dropdowns, date/time/colour pickers, multi-select, autocomplete, command palette) onto the elevated surface tone in dark mode so they sit clearly above the page.
2.5.0 2026-05-29
Added
- Add
<ea-field-label>and<ea-field-messages>, the shared label and hint/error building blocks now used internally by every form control. Both are exported for consumers composing custom form fields.
Changed
- Tighten source comments across the library to a stricter house style.
2.4.0 2026-05-28
Added
- Add
--shadow-bevel/--shadow-bevel-strongand--shadow-well/--shadow-well-strongtokens. Each pairs an inset highlight with an inset shadow to give a surface a raised (bevel) or recessed (well) 3D look, composable with--shadow-*for an ambient drop. Dark-mode variants drop the highlight alpha and raise the shadow alpha so the relief still reads on a lifted dark surface without glowing. - Add
--text-section-heading-*composite (20px / semibold / snug / brand family) for page-level subsection titles. First composite that pins a font-family token; everything else still inherits the body sans family.
Changed
- Round out and alphabetize the README component list (Button, Color Picker, Command Palette, File Uploader, Multi-Select, Popover, Range Slider, Rating, Stepper, Time Picker, Transfer List, Tree, Virtual List were previously missing). Stepper now sits under Navigation; Accordion and Tree under Display.
Fixed
<ea-segmented>now wraps its options onto multiple rows instead of overflowing when they exceed the available width.
2.3.0 2026-05-28
Added
- Add a
paletteoption toprovideEagamiUi. Consumers pass aprimary(and optionalsecondary) base hex; the library derives a perceptually-uniform 10-shade scale via OKLCH, maps the shades to semantic brand roles in both light and dark mode, and asserts WCAG 2.1 AA contrast on every pairing before applying. A failing palette throws at bootstrap so a bad brand colour is caught before the app loads. Per-shadeoverridesand role remapping are supported for brand books that pin specific hexes. - Add
--color-bg-canvastoken for the page background, distinct from--color-bg-basewhich becomes the surface token for components that sit on the page (inputs, cards, accordion items, popover panels). In dark mode the canvas stays atneutral-950whilebg-baselifts toneutral-800, so component surfaces no longer disappear into the page. - Add
--color-brand-texttoken (defaults to--color-primary-700in light mode,--color-primary-300in dark mode). Use it for the brand colour as a foreground on a non-brand surface (selected dropdown row, today marker, sorted column, spinner, active paginator page). Keeps--color-brand-defaultfree to optimize as a surface (button bg, badge bg) without dragging text-on-surface contrast along with it. - Expose
--ea-switch-track-border-coloron<ea-switch>so consumers can recolour the track outline without overriding--color-border-*globally.
Changed
- Tighten the dark-mode brand-default flip from
primary-400toprimary-500. The smaller shift keeps the primary CTA feeling like the same brand colour across themes while still clearing WCAG 1.4.11 (3:1 brand vs canvas) and carrying a white label above 4.5:1. - Route
<ea-dropdown>selected-option,<ea-date-picker>today indicator and today button,<ea-data-table>sorted-column header,<ea-spinner>, and<ea-paginator>active page colours through the new--color-brand-texttoken. Visually unchanged at defaults; consumers can now tune surface and foreground brand roles independently. - Soften the default
<ea-switch>track border from--color-border-strongto--color-border-defaultfor a less heavy off-state ring. - Default the primary
<ea-button>text colour to--color-neutral-0(always white) instead of--color-text-inverse(which flipped to dark in dark mode). Text now stays white on the brand background in both themes; consumers can still override per-instance via--ea-button-color. - Expose
--ea-empty-state-title-coloron<ea-empty-state>so consumers can recolour the title without bleeding--color-text-primaryto its siblings.
2.2.0 2026-05-25
Added
- Add
<ea-command-palette>, a search-driven modal action launcher (Cmd/Ctrl + K-style). Wraps the native<dialog>element for focus trap and Esc dismissal. Items can be ungrouped or bucketed by agroupfield; the filter matcheslabel,description, and hiddenkeywords. Keyboard navigation (Arrow keys, Home / End, Enter) drives a rovingaria-activedescendanton the search input — the canonical ARIA combobox-with-listbox pattern. Optional per-itemshortcut,description, leadingicon, anddisabledflag.[(open)]is a two-way model and(execute)fires once with the chosen item before the palette auto-closes. - Add
<ea-virtual-list>, a low-level windowed-rendering primitive for long lists. Only the rows currently in the viewport (plus a configurable overscan) are mounted; an absolutely-positioned spacer reserves the full scroll extent so the scrollbar reflects the real item count. Fixed-height items only in v1. Consumers project the per-row template via<ng-template #item let-row let-i="index">and stay role-agnostic — the primitive provides scroll mechanics; the consumer wraps the projected item with whatever ARIA the use case calls for (role="option",role="row", etc.). Exposes ascrollIndexChangeoutput and ascrollToIndex(n)imperative method. - Add
<ea-transfer-list>, a two-pane shuttle control for moving items between a source set and a target set. Each pane is arole="listbox"witharia-multiselectable="true"; rows highlight on click and four direction buttons (move-selected and move-all in each direction) reconcile the panes against aselectedIdsmodel. Disabled items per row stay anchored to their current pane and are skipped by the move-all buttons. Three sizes (sm / md / lg) and a whole-componentdisabledflag. - Add
<ea-tree>, a hierarchical single-selection treeview with full keyboard navigation (Arrow keys, Home / End, Enter / Space), the standard ARIAtreepattern (rovingtabindex,aria-level/aria-posinset/aria-setsize/aria-expanded/aria-selected), three sizes (sm / md / lg), optional per-node leading icons, a disabled flag per node and at the tree level, andselectedId/expandedIdsmodel signals for two-way binding. Setting[selectedId]for a deeply-nested node auto-expands the ancestor chain so the selection becomes visible. - Add
[hasError]boolean input to<ea-slider>so consumers rendering the error message themselves (above the slider, in a surrounding form layout) can still trigger the built-in error recolour of the fill and thumb. The flag is OR'd with the implicit error state derived fromerrorMsg, so existing usage is unchanged.
Changed
- Route
<ea-button>variant colours through CSS custom properties so consumers can recolour any single button without overriding--color-brand-*or--color-text-inverseglobally.--ea-button-background-color,--ea-button-color, and--ea-button-border-color(and matching*-hover/*-activeper-state tokens) override the variant defaults; each per-state token falls back to its base counterpart before the variant default so setting a single base colour produces a flat-coloured button across all states. - Expose
--ea-empty-state-title-font-weight,--ea-empty-state-description-color, and--ea-empty-state-media-coloron<ea-empty-state>so consumers can fine-tune the title weight, description text colour, and media-area icon colour without piercing view encapsulation.
Fixed
- Strip leaking
roleandaria-labelattributes from the<ea-popover>host element, so assistive tech (and axe) only see the conditional ARIA on the inner surface. Resolves missing-accessible-name violations on every popover-driven component when closed (<ea-dropdown>,<ea-multi-select>,<ea-date-picker>,<ea-time-picker>, and<ea-color-picker>). - Wire
<ea-multi-select>'s<label>to its<div role="combobox">trigger viaaria-labelledby. The previous<label for>linkage was inert because the trigger is a<div>, not a form-control element, so screen readers announced the trigger as nameless. - Restructure
<ea-stepper>'s tablist from an<ol><li role="tablist">containing<button role="tab">to a flat<div role="tablist">of tab buttons. The previous structure was rejected by axe and screen readers because ARIA tablist children must be tabs directly, not wrapped in list items, and therole="tablist"overrode the list's implicit role leaving the<li>elements orphaned. Visible rendering, keyboard navigation, and selection behaviour are unchanged. - Replace the focusable
<button>star elements in<ea-rating>with presentational spans, so therole="slider"container no longer nests interactive descendants. Mouse click and keyboard navigation behaviour is unchanged.
2.1.0 2026-05-24
Added
- Add
<ea-file-uploader>, a multi-file uploader with a drag-and-drop zone and a per-file list. Supportsaccept/maxSize/maxFilesvalidation (rejections emitted via arejectedevent), amultiple=falsesingle-file mode, per-file progress bars driven by a consumer-suppliedMap<File, number>, three sizes (sm / md / lg), the standard hint / error message pattern, and Angular forms integration viaControlValueAccessor. The dropzone icon is exposed as a content slot via theiconattribute, so consumers can swap the default cloud icon for any other icon while inheriting the dropzone's size-aware sizing. - Add
<ea-rating>, a star-based rating input with whole-step (default) or half-step (allowHalf) granularity, hover preview, keyboard navigation (Arrow keys, Home/End, digit keys, Delete/Backspace to clear), a read-only display mode, three sizes (sm / md / lg), and Angular forms integration viaControlValueAccessor. Surfaces asrole="slider"witharia-valuemin/aria-valuemax/aria-valuenow. The default star can be swapped via theicon/icon-fillcontent slots (e.g.<ea-icon-heart icon />) and the fill clip handles half-step rendering automatically. - Add a
strokeWidthinput on every Feather-derived icon, exposing the SVG'sstroke-widthso consumers can thin or thicken any icon at the call site (e.g.<ea-icon-star [strokeWidth]="1.5" />). The default stays at 2 to preserve existing visuals; per-icon design choices (currently camera and upload at 1.5) are pinned via astatic override readonly defaultStrokeWidthfield onIconComponentBase. The rating component leans on this to render its dim background outline at 1.5 for visual quiet against the filled foreground.
Fixed
- Set
min-width: 0(andmax-width: 100%) on<ea-card>'s host and inner element to match the existingmin-height: 0baseline, so cards in flex / grid layouts no longer blow past their parent track when their content has an intrinsic width (long copy, wide tables, pre-formatted blocks). Removes a::ng-deepworkaround consumers were applying in every layout that nested a card under a constrained flex / grid parent.
2.0.0 2026-05-23
Added
- Add
<ea-stepper>+<ea-step>, a multi-step wizard control with linear / non-linear flows, completed / optional step flags, click + keyboard navigation, and content projection per step. - Add
<ea-multi-select>, a multi-select dropdown with removable chips, optional search filter, and a tri-state "Select all" toggle. - Add
<ea-time-picker>, a stepper-style picker with type-to-edit inputs, long-press chevron buttons, and 12h/24h display. - Add
left-half-starandright-half-starEagami-original icons. Each renders one half of the canonical Featherstarsilhouette, closed at the centre by a vertical line from the top peak to the bottom valley — paired, they read as a full star split down the middle (the building block for half-step rating components). - Add a negative-spacing scale (
--space-n-px,--space-n-0-5through--space-n-32) mirroring the existing positive tokens 1:1. Consumers reaching for negative margins (container bleeds, overlap tricks, gutter collapsing) can now reference a token instead of writingcalc(var(--space-2) * -1). - Add
<ea-range-slider>, a two-thumb sibling of<ea-slider>driven by a[low, high]numeric tuple. Each thumb supports the same keyboard model as the single-thumb slider (arrows, PageUp/PageDown, Home, End) with Tab moving between thumbs; pointer drag picks whichever thumb is closer to the click. Neither thumb is permitted to cross the other — once they meet, the moving thumb clamps to the boundary. Reuses the slider's visual chrome (track, fill spanning between thumbs, sizes, focus ring), supports min/max labels, value display, hint/error messages, and integrates with Angular forms viaControlValueAccessor. - Round out the
codetypography role and introduce akbdrole. The--text-code-*tokens now cover size (relativeemso inline code tracks surrounding text), weight, family, color, background, padding, and border-radius — enough to style a<code>chip with one block of token references. The new--text-kbd-*series styles a keyboard-key glyph with the same shape language plus a 1px border and a 1px bottom shadow for a raised appearance. The library's base reset now applies both to native<code>and<kbd>elements out of the box. - Introduce
<ea-popover>, a low-level floating-element primitive that handles anchored positioning (position: fixedagainst an external anchor element), flip-on-overflow, viewport clamping, outside-click and Escape dismissal, and SSR-safe scroll / resize handling. Supports 8 placements (top,top-start,top-end,bottom,bottom-start,bottom-end,left,right), three scroll behaviors (reposition,close,ignore), and an optionalmatchAnchorWidthmode for dropdown-style equal-width popovers. The surface is teleported todocument.bodyso it escapes any ancestor that would otherwise create a new containing block for the fixed positioning (transform,contain,filter,perspective,will-change) — a common gotcha that hides popovers inside Storybook canvases, CSS-isolated app shells, and animated panels. The purecomputePopoverPosition()helper is also exported so downstream apps can drive their own positioning. The existing menu, dropdown, color-picker, date-picker, and tooltip components are migrated onto this primitive in the same release so they share the same SSR guards and edge-case handling. - Add a
shapeinput to<ea-badge>accepting'pill' | 'pin'(defaults topill). The newpinshape enforcesmin-width = heightand appliesfont-variant-numeric: tabular-numsso the box stays a perfect square for single-character content (renders as a circle once the full--radius-fullborder-radius applies) and grows horizontally into a pill once content forces it wider. Per-size dimensions are sm 16×16 @ 9px, md 18×18 @ 10px, lg 22×22 @ 12px, all overridable via the new--ea-badge-sizeand--ea-badge-font-sizecustom properties.
Changed
- Breaking: Remove
<ea-icon-apple>/AppleIconComponent. The icon depicted Apple Inc.'s logo, which is more strictly protected than other brand marks; consumers needing it (e.g. "Sign in with Apple") should source the asset directly from Apple per their brand guidelines. The component was deprecated in v1.3.0. - Breaking: Remove
<ea-icon-pencil>/PencilIconComponent. The icon depicted the same mark as Feather's canonicaledit-2and was deprecated in v1.4.0 as redundant; switch to<ea-icon-edit-2>/Edit2IconComponent. - Default the
<ea-popover>offsetto0so the popover sits flush against its anchor on the placement axis (was 2px). - Apply a font-aware
min-heightto<ea-textarea>matching one line of text plus the active size's vertical padding, so a textarea is never visually shorter than a single-line<ea-input>at the same size. - Use a font-scaled
height(1.5em) on the vertical<ea-divider>so it lines up with adjacent text instead of collapsing to its 16pxmin-heightfallback. - Redraw the
<ea-avatar-editor>canvas when itscanvasSizeinput changes, and shrink the dropzone padding / upload icon / prompt text in two tiers below 150px and 100px so the prompt still fits at small canvases. - Migrate
<ea-dropdown>onto the new<ea-popover>primitive. The visible behavior is unchanged (same trigger, same option list, same keyboard nav), but positioning, outside-click dismissal, and scroll/resize handling now route through the shared primitive. The internal<ul role="listbox"><li role="option">markup becomes<div role="listbox"><div role="option">so the listbox role lands directly on the surface element (the canonical ARIA pattern), and the now-duplicatedposition: fixed/z-indexrules in.ea-dropdown__menuare dropped. - Migrate
<ea-menu>onto the new<ea-popover>primitive. The companion[eaMenuTrigger]directive's public API is unchanged, and the menu's role-driven keyboard navigation (ArrowUp/Down, Home/End, Escape to close and restore focus to the trigger) is preserved verbatim. Positioning, outside-click dismissal, and scroll-reposition handling now route through the shared primitive, and the menu's now-vestigial placement-class hooks (.ea-menu__list--bottom-startetc.) are dropped — the equivalent class lives on the popover surface (.ea-popover__surface--bottom-start) for any consumer that still wants to target placement-specific styling. - Migrate
<ea-color-picker>onto the new<ea-popover>primitive. Positioning, dismissal, flip-on-overflow, and scroll-close handling now route through the shared primitive (replacing the picker's bespokeclampPopoverToViewportlogic). Visible behavior — keyboard control of the SV area / hue / alpha sliders, the format toggle, presets, the EyeDropper button, and focus restoration on Escape — is preserved verbatim. - Migrate
<ea-date-picker>onto the new<ea-popover>primitive. The calendar now usesposition: fixed(via the popover surface, teleported todocument.body) instead of its previousposition: absolute, which resolves a latent bug where the calendar was clipped by any ancestor withoverflow: hidden(a common pattern in scrollable forms and content panels). Outside-click dismissal and scroll-close handling now route through the shared primitive; keyboard navigation, focus restoration on Escape, and the rest of the visible behavior are preserved verbatim. - Share positioning math between
[eaTooltip]and<ea-popover>via the newcomputePopoverPosition()helper. The tooltip directive keeps its public API and its tooltip-specific behaviors (sticky/fixed-ancestor hit-testing, hover-vs-touch detection,:focus-visiblefilter,aria-describedbymanagement, ResizeObserver, rAF-coalesced reposition); the bespoke placement switch and viewport-clamp math are replaced by the shared helper so future positioning fixes land once and apply to both. - Route
<ea-badge>variant colours through CSS custom properties so consumers can recolour the badge without piercing view encapsulation.--ea-badge-background-colorand--ea-badge-coloroverride the variant-default surface and text colours; the new--ea-badge-border-color/--ea-badge-border-widthpair adds a configurable outer border (0-width and transparent by default, so existing usage is visually unchanged). Any of these can be set on the badge itself or on an ancestor and will inherit through view encapsulation.
Fixed
- Observe the
<ea-popover>surface with aResizeObserverso the first reposition after open re-runs once the browser has actually laid out the projected content. Previously the surface's initialgetBoundingClientRectcould read its pre-layout width (a hold-over from thedisplay: none→ visible transition) and the viewport-clamp would silently skip, leaving menus / dropdowns / pickers clipped at the right edge until the next resize or scroll forced a fresh measurement.
1.5.0 2026-05-20
Added
- Add
<ea-color-picker>, a full-featured color picker with a swatch trigger that opens a popover containing a saturation/value gradient area, hue slider, optional alpha slider, hex / RGB inputs (one row at a time, toggled via a small format button), a configurable preset palette, and an eyedropper button (in browsers that expose the EyeDropper API). Pointer, touch, and full keyboard control are supported on every region (arrows step, Shift+arrows step coarse, Home/End jump to bounds). The popover positions itself viaposition: fixedso it escapes any ancestor withoverflow: hidden. Integrates with Angular forms viaControlValueAccessor, accepts any CSS color string inwriteValue(3/6/8-digit hex,rgb()/rgba(),hsl()/hsla(), named colors), and emits in the configurableformat(hex|rgb|hsl). Comes with i18n coverage in all five locales.
Changed
- Standardize field-level error and hint message rendering across every form-like component. Error messages now always lead with an alert-circle icon (previously
<ea-input>,<ea-textarea>,<ea-date-picker>, and<ea-color-picker>had it, while<ea-slider>,<ea-checkbox>,<ea-switch>,<ea-dropdown>,<ea-autocomplete>,<ea-radio-group>,<ea-code-input>, and<ea-segmented>did not). Helper-text size bumps from 12px to 13px via--text-helper-sizefor better legibility on dense forms without crowding the label hierarchy. - Replace
<ea-input>'ssetTimeout(0)-based autofocus withafterNextRender()so focus runs against a guaranteed-DOM-attached element rather than relying on the macrotask queue, and so the timing is naturally SSR-safe.
Fixed
- Guard
window.addEventListenercalls in<ea-dropdown>with atypeof window !== 'undefined'check so prerendered (SSR) pages that render a dropdown no longer throwReferenceError: window is not defined.
1.4.0 2026-05-20
Added
- Add 11 new icons drawn in the Feather style (24px viewBox, 2px stroke, round caps and joins) so they sit naturally alongside the existing set:
bottle,candle,circle,heptagon,hexagon,lamp,pentagon,rectangle-horizontal,rectangle-vertical,soccer-ball,trophy - Complete coverage of the upstream Feather Icons set (287 / 287, each at its canonical Feather slug). Adds the 39 Feather icons that were not yet bundled (
arrow-{down,left,right,up}-circle,bar-chart-2,camera-off,cast,check-square,chevrons-{down,left,right,up},cloud-{drizzle,lightning,off,rain,snow},corner-{left,right}-{down,up},divide-{circle,square},dribbble,folder-{minus,plus},framer,instagram,pen-tool,phone-{call,forwarded,incoming,missed,off,outgoing},refresh-ccw,table,trello,twitter). For the 10 brand marks that have both an Eagami brand-filled design and a Feather outline, the canonical slug now holds Feather's outline; the brand-filled variant moves to<slug>-2(e.g.facebook-2,github-2,linkedin-2). Three brand marks where the Eagami and Feather designs were already identical (codepen,codesandbox,gitlab) are deduplicated to a single component at the Feather slug - Expose per-icon metadata as static fields on each component class (
static readonly slug,category,isBrand,tags). Lets consumers build catalogues, search indices, or doc tables by readingGithubIconComponent.tagsdirectly without pulling in any other icon as a transitive dependency. The newIconCategory,IconMeta, andIconComponentTypeexports describe the shape of these static fields - Export an
ICONSarray (ReadonlyArray<IconComponentType>, sorted by slug so the base icon always precedes its-2variant) listing every non-deprecated icon component so apps that want to render the full catalogue (search pages, gallery views) can iterate one list rather than maintaining their own. Pair it with the newiconDisplayName(iconOrSlug)helper to resolve the human-readable label with the correct casing for acronyms and brand marks (GitHub,npm,CodePen,X (Twitter), etc.). ImportingICONSpulls in every icon, so apps that only render a handful should keep importing the components they use directly
Deprecated
<ea-icon-pencil>/PencilIconComponentis deprecated and will be removed in v2.0.0. The icon depicts the same mark as Feather's canonicaledit-2(with a marginally different cap curvature) and is being retired as redundant; switch to<ea-icon-edit-2>/Edit2IconComponent. The deprecated component still exports for backwards compatibility but is no longer listed on the/ui/iconsreference page
Changed
- Add an optional
countinput to<ea-checkbox>that renders inline within the same<span>as the label, dimmed to--color-text-tertiary. Inline placement shares the label's exact baseline and font metrics, so patterns likeInbox 42orBrand (30)stay aligned without a sibling element fighting flex / inline-flow centring at the consumer's call site - Hide
[eaTooltip]when its trigger has scrolled behind a sticky / fixed ancestor (typical app-header pattern), or when the calculated bubble would itself paint on top of one. UseselementFromPointplus an ancestor walk forposition: fixed | sticky, so the directive picks up an app's chrome without needing to be told about it. Feature-detected for jsdom / SSR - Scale the Netlify brand icon to the full
24×24viewBox so it visually matches the other brand marks rather than rendering as a small motif inside whitespace - Add
opacity: 1to<ea-input>'s::placeholderrule to keep the tertiary token from being washed out further by the Firefox / WebKit ~0.54 default placeholder opacity
1.3.0 2026-05-17
Added
- Expand the icon set from 100 to 268 icons. Round out the Feather Icons coverage with 148 additions (activity, airplay, alert-octagon, align-{center,justify,left,right}, anchor, aperture, arrow-down-{left,right}, arrow-up-{left,right}, award, battery, battery-charging, bell-off, bluetooth, bold, book, book-open, box, chrome, code, codepen, codesandbox, coffee, columns, command, compass, corner-{down,up}-{left,right}, cpu, crop, crosshair, database, delete, disc, divide, download-cloud, droplet, edit, edit-2, edit-3, fast-forward, feather, file-minus, file-plus, file-text, film, frown, git-branch, git-commit, git-merge, git-pull-request, gitlab, grid, hard-drive, headphones, italic, key, layers, layout, life-buoy, link-2, map, maximize-2, meh, message-circle, message-square, mic-off, minimize-2, minus-circle, minus-square, more-vertical, mouse-pointer, move, music, navigation, navigation-2, octagon, pause-circle, percent, pie-chart, play-circle, plus-circle, plus-square, pocket, power, radio, repeat, rewind, rotate-cw, rss, scissors, server, share-2, shield-off, shopping-bag, shuffle, sidebar, skip-back, skip-forward, slack, slash, sliders, smile, speaker, square, stop-circle, sunrise, sunset, tablet, tag, target, terminal, thermometer, toggle-left, toggle-right, tool, trash-2, trending-down, triangle, truck, tv, type, umbrella, underline, upload-cloud, user-check, user-minus, user-plus, user-x, video-off, voicemail, volume, volume-1, volume-x, watch, wifi-off, wind, x-octagon, x-square, zap-off, zoom-in, zoom-out)
- Add a coloured brand-icon set for nominative use: LinkedIn, Discord, YouTube, Reddit, Twitch, Spotify, Notion, Figma, Dropbox, npm, Stripe, PayPal, Mastercard, Vercel, Netlify, Cloudflare, Docker, Kubernetes, MongoDB. Each ships with a reminder that brand icons depict third-party trademarks and may only be used to identify the brand they represent
Changed
- Retire the EagamiWordmark "eagami design system" variant. Variant
3now renders the brand mark with its tagline (previously the role of variant4). Variant4is kept as a backwards-compatible alias for3and will be removed in v2.0.0 - Double the inline
EagamiWordmarkComponenttext-stack gap (calc(--_size * 0.1px)→0.2px) so the brand, separator, and tagline read as distinct words instead of crowding the em-dash - Reposition
[eaTooltip]while it is shown. Window resize, ancestor scroll, and ResizeObserver-detected layout shifts (the trigger or the page body resizing) all re-run the viewport clamp via rAF so the tooltip stays inside the viewport even when the page reflows under it. Guarded for SSR (window-free environments) - Only show
[eaTooltip]on keyboard focus, not click-focus. Clicking a tooltip-trigger that opens a menu would previously latch the tooltip open after the menu closed, because focus returned to the trigger. The directive now feature-detects:focus-visibleand only opens on focus when the browser flags it as keyboard-driven; falls back to the previous always-on-focus behaviour in test environments without:focus-visiblesupport
Deprecated
EagamiWordmarkComponentvariant4is deprecated and aliases to3. The component'svariantinput now accepts1 | 2 | 3 | 4; new code should pass3
1.2.1 2026-05-16
Changed
- Update the README to reflect the library's new monorepo home and switch the header image to a PNG so GitHub renders it inline.
1.2.0 2026-05-16
Added
- Add internationalization support across every component. Built-in strings (ARIA labels, placeholders, empty states) now ship in English, French (France), Greek, Polish, and Spanish (Spain). Set the locale once with
provideEagamiUi({ locale }), switch it at runtime throughEagamiI18nService, and override individual strings via component inputs orprovideEagamiUi({ messages }).DatePickerComponentalso follows the active locale when formatting dates - Export
frenchSpacing(), an opt-in helper that converts regular spaces to U+202F (narrow non-breaking space) before French high punctuation (?!:;») and after«. Lets consumers format user-supplied French text correctly without the library transforming arbitrary input
Fixed
- Make the
InputComponentpassword visibility toggle reachable by keyboard. It previously carriedtabindex="-1", so keyboard users could not reveal the password - Wire
DropdownComponent's listbox to its trigger for screen readers. The trigger now exposesaria-controlsandaria-activedescendant, so the highlighted option is announced as the user arrows through the list - Correct
DataTableComponent's table semantics by replacing the inconsistent ARIAgrid/row/gridcellroles with native table semantics andscope="col"headers, so assistive tech announces rows and columns reliably - Hide
AlertComponent's decorative status icon from assistive technology - Use U+202F before high punctuation in the bundled French messages so labels like
Lignes par page :can no longer wrap onto their own line
1.1.1 2026-05-12
Changed
- Tone down
--shadow-xland--shadow-2xlin dark mode — the white-at-alpha drop shadows behindDialogComponentandDrawerComponentwere reading as bright halos. Alpha values are roughly halved so the elevation cue stays readable without the overstated glow
Fixed
- Move horizontal scrolling in
DataTableComponentinto an inner wrapper so a slotted<ea-paginator>stays outside the scrolled coordinate space. On narrow viewports where the table overflowed, the paginator was being pulled into the scroll context, leaving itsborder-topdivider short of the host's right edge - Centre
AlertComponent's icon with the first line of its content. Previously the icon sat at the top of its 1.25rem box, a few pixels above the first line's visual middle; the icon span now sizes to the line-height and centres the icon inside it - Suppress hover-triggered tooltips on touch devices, and re-attach pointer listeners reactively when hover capability changes.
TooltipDirectivenow subscribes to the(hover: hover)media query, so tooltips disable on touch hardware (no more "sticky hover" where a tap latches the tooltip open) and re-enable without a refresh when a Bluetooth pointer connects or DevTools mobile emulation is toggled off. Focus/blur listeners stay attached regardless so keyboard users always get tooltips
1.1.0 2026-05-12
Added
- Expand the icon set from 52 to 100 icons. New: archive, at-sign, bar-chart, bookmark, briefcase, clipboard, cloud, credit-card, dollar-sign, flag, folder, gift, globe, hash, help-circle, home, inbox, list, lock, log-in, map-pin, maximize, mic, minimize, monitor, moon, package, paperclip, pause, phone, play, printer, refresh-cw, save, send, share, shield, shopping-cart, smartphone, sun, thumbs-down, thumbs-up, trending-up, unlock, users, video, volume-2, wifi, zap
- Honor
prefers-reduced-motiononToastComponent— the slide-in animation degrades to an opacity-only fade so the toast still appears smoothly without translateX motion that can trip vestibular sensitivity - Document icon attribution and brand-icon usage in the README. The icon set is derived from Feather Icons (Cole Bemis, MIT). Brand icons (Facebook, GitHub, Google, Microsoft, X/Twitter) include links to each platform's brand guidelines, since their use is governed by trademark rather than the library's MIT license
Changed
- Retune the dark-mode background hierarchy so elevated surfaces (
CardComponentvariant="elevated",DialogComponent,DrawerComponent) are visibly raised above the page.--color-bg-elevatednow resolves toneutral-800(wasneutral-900) and--color-bg-mutedtoneutral-700(wasneutral-800) so hover states inside elevated surfaces still read as a further step up. Light mode is unchanged - Add a hairline border to
CardComponentvariant="elevated". Shadows alone can't reliably define elevation in dark mode, and the top edge isn't visible from a downward-cast shadow in light mode either — the border now carries the edge while the shadow + bg-elevated step convey depth - Vertically center the
RadioComponentlabel against the radio circle (was top-aligned)
Deprecated
AppleIconComponentis now deprecated and will be removed in v2.0.0. The icon depicts Apple Inc.'s logo, which is more strictly protected than other brand marks; consumers needing it (e.g., "Sign in with Apple") should source the asset directly from Apple per their brand guidelines. The export remains for backward compatibility — a@deprecatedJSDoc warning surfaces in IDEs
Fixed
- Make
ToastComponentcolored variants (success, warning, error, info) opaque in dark mode. The--color-*-subtletokens are re-tinted as low-alpha rgba in dark mode (correct for inline banners) which caused floating toasts to bleed through arbitrary page content. Toasts now stack the tint over a solid--color-bg-elevatedbase and flip text to the lighter*-200shade so it reads against the darker tinted background - Prevent
DataTableComponentsticky-header text from overflowing into adjacent columns on narrow viewports — the sticky table now has a 32rem minimum width so the outeroverflow-x: autoengages and the table scrolls horizontally rather than collapsing the columns
1.0.2 2026-05-10
Fixed
- Fix hue/saturation drift in primary and secondary color palettes — all primary shades now share H=205° / S=50%, all secondary shades share H=264° / S=25%, varying only lightness, so each ramp reads as a single hue at different lightnesses rather than several different colors. Dark-mode
--color-brand-subtleand--color-brand-mutedretinted to the new primary-400 so they no longer drift from the rest of the palette - Restore visible elevation on
--shadow-*tokens in dark mode by flipping the drop-shadow color from black to white at low alpha (0.04 → 0.12). Black drop shadows are nearly invisible against a near-black page; against a dark page, white-at-low-alpha blends to a muted dark gray that mirrors the role black-at-low-alpha plays in light mode, preserving the same "floating above the page" depth cue. xl and 2xl use slightly tighter offset/blur than light mode so the lighter fade doesn't sprawl into a halo. Every surface using a shadow token now reads as elevated without any per-component change —Cardvariant="elevated",Dialog,Drawer,Dropdown,Autocomplete,Menu,Toast,DatePickercalendar,Tabsunderline indicator,Segmentedselected pill,Sliderthumb, andSwitchthumb
1.0.1 2026-05-10
Added
- Support manual theme override via
<html data-theme="light">or<html data-theme="dark">so consumers can ship their own dark/light toggles independent of the OSprefers-color-schemesetting - New
--color-bg-elevatedsemantic token for surfaces that float above the page (Card variant="elevated", Dialog, Drawer). Resolves to the page background in light mode and to a step-lighter shade in dark mode so elevated surfaces remain visibly distinct from the page
Fixed
- Restore visibility of
Cardvariant="elevated",Dialog, andDrawerin dark mode — they previously shared the same near-black background as the page, with shadows that vanished against it. Switched these surfaces to the new--color-bg-elevatedtoken and deepened--shadow-*token alpha values for additional depth - Switch the single-color brand icons (
GithubIconComponent,AppleIconComponent,FacebookIconComponent,XTwitterIconComponent) tocurrentColorso they inherit the surrounding text color and remain legible in dark mode; opt back in to the original brand color via the new[brand]input - Add dark-mode overrides for
--color-{success,warning,error,info}-{subtle,muted}soAlertComponent,ToastComponent, and other status surfaces darken enough for primary text to remain readable against them AvatarEditorComponent"Change photo" hover overlay now picks white or black ink based on the loaded photo's average luminance instead of the active theme, so the affordance stays readable on both bright and dark images
1.0.0 2026-05-09
Added
- Introduce shared
SelectOptioninterface ({ value, label, disabled? }) used byAutocompleteComponent,DropdownComponent, andSegmentedComponentfor theiroptionsinput, replacing the previous per-component option types - Bring
RadioGroupComponent,SwitchComponent,CheckboxComponent, andSegmentedComponentto parity with other form controls — they now exposelabel(where missing),hint,errorMsg, andrequiredinputs; group controls also wirearia-labelledbyto the rendered label andaria-required/aria-invalidto the host - Add
focus()public method toAutocompleteComponent,DropdownComponent, andDatePickerComponent; addreadonlyinput toDropdownComponent,DatePickerComponent, andCodeInputComponent; addplaceholderinput toCodeInputComponent - Add
focusedandblurredoutputs (FocusEvent) toAutocompleteComponent - Add
removeLabelinput toTagComponentso consumers can override the remove-button accessible name per tag - Add
headingLevelinput toEmptyStateComponent(h2–h6, defaulth2) so the title fits the surrounding document outline - Add
idinput toMenuComponent,DialogComponent,DrawerComponent, andRadioGroupComponentso externalaria-labelledby/aria-controlsreferences can target the host MenuComponentnow implements WAI-ARIA roving keyboard navigation across menu items: arrow keys, Home/End, focus the first item on open- Calendar grid in
DatePickerComponentreceives focus on open so keyboard users land on the focused day immediately AvatarEditorComponentcanvas is now keyboard-pannable (arrow keys, Shift for larger steps;+/-to zoom) and exposes a descriptivearia-labelSpinneranimation honoursprefers-reduced-motionby slowing the spin rather than disabling the loading affordance
Changed
- Breaking: Rename the
errorinput toerrorMsgonInputComponent,TextareaComponent,CodeInputComponent,DatePickerComponent,DropdownComponent,AutocompleteComponent, andSliderComponent. Migration:<ea-input error="…" />becomes<ea-input errorMsg="…" /> - Breaking:
CardComponentnow reads its header and footer from standard[slot=header]and[slot=footer]content slots rather than the[eaCardHeader]and[eaCardFooter]attribute directives. Migration:<span eaCardHeader>…</span>becomes<span slot="header">…</span>. This aligns Card withDialogComponentandDrawerComponent, which already use the slot pattern - Breaking: Replace
AutocompleteOption,DropdownOption, andSegmentedOptiontypes with the single sharedSelectOptioninterface. The shape is unchanged; update import sites accordingly - Breaking: Rename
inputFocused/inputBlurredoutputs tofocused/blurredonInputComponent, andtextareaFocused/textareaBlurredtofocused/blurredonTextareaComponent, matching native DOM event names - Breaking: Standardize event output names across components —
TabsComponent.tabChange,DataTableComponent.sortChange,MenuItemComponent.itemClicked, andBreadcrumbsComponent.itemClickedare nowchanged,sorted, andclickedrespectively - Breaking: Rename
AvatarEditorComponent.cropStateChange→cropStateChangedandfileError→erroredto follow the past-tense convention - Breaking: Rename
PaginatorComponent.placement→align(and the correspondingPaginatorPlacementtype →PaginatorAlign), since "placement" is reserved for popover positioning elsewhere in the library - Breaking: Redesign
AutocompleteComponentAPI for parity with other form controls — outputs are nowselected(wasoptionSelected) andchanged(wasvalueChanged), and the internal focus signal was renamed toisFocusedto free thefocusedname for the new output - Breaking: Rename the public type
SortDirection→DataTableSortDirectionto avoid leaking a generic name into consumer scope ProgressBarComponent.labelnow defaults toundefinedrather than the empty string, matching the convention used by all other label inputs
Fixed
- Increase contrast of the
--color-text-link-hovertoken in light mode (now--color-primary-800) and add dark-mode overrides for--color-text-linkand--color-text-link-hoverso links meet WCAG AA in both schemes and the rest→hover delta is perceptible at a glance - Scope
role="alert"to theerrorandwarningvariants ofAlertComponentandToastComponent; non-urgent variants now userole="status"with a polite live region instead of interrupting screen-reader output for routine messages - Add
aria-requiredto the focusable element ofDropdownComponent,AutocompleteComponent,DatePickerComponent,SliderComponent, andSegmentedComponentso screen readers announce required custom controls DialogComponentandDrawerComponentnow derive anaria-labelledbyfrom the slotted header when noaria-labelis supplied, giving every overlay a programmatic nameDropdownComponentno longer self-references its own trigger viaaria-labelledby; the visible label now carries an id and the trigger references itDataTableComponentsortable header cells use the implicit<th>role plusaria-sortinstead of an invalidrole="columnheader button"TooltipDirectiveappends to (and removes from)aria-describedbyrather than overwriting it, so it no longer clobbers an input's existing hint/error wiring- Unwrap the
DatePickerComponentclear button from inside the trigger button (which produced invalid HTML) and position it as a sibling ProgressBarComponentnow exposesaria-busywhile indeterminate- Each digit input in
CodeInputComponentnow reflectsaria-invalidwhen the group has an error AvatarComponentfalls back to the suppliedinitialsfor its accessible name whenaltis emptyAvatarEditorComponentfile input now exposes anaria-label
Removed
- Breaking: Remove the
statusinput ('default' | 'error' | 'success') fromInputComponent,TextareaComponent, andCodeInputComponentalong with thesuccessvisual variant. Error state is now driven solely by theerrorMsginput - Breaking: Remove the
primaryvariant fromTagComponent. Tags now cover semantic statuses only (default | success | warning | error | info); use a styled element orBadgeComponentfor brand-colored chips
0.12.0 2026-05-08
Added
- Add
SliderComponent(ea-slider) — single-value range input withmin/max/step,sm/md/lgsizes, optional value display and min/max labels, full keyboard navigation (arrows, PageUp/PageDown, Home/End), pointer drag, error/hint messages, andControlValueAccessorintegration - Add
SegmentedComponent(ea-segmented) — toggle button group for view/mode switching withsm/md/lgsizes, full-width option, per-option disabled state, arrow-key navigation, andControlValueAccessorintegration - Add
EmptyStateComponent(ea-empty-state) — pattern component for "no results" / "nothing here yet" states withmediaandactionscontent slots, optional title and description, andsm/md/lgsizes
Changed
- Breaking:
MenuComponentno longer wraps its trigger via the[slot=trigger]content slot. Apply the new[eaMenuTrigger]directive to your own button instead and reference the menu by template variable. Migration:<ea-menu><ea-button slot="trigger">…</ea-button>…</ea-menu>becomes<ea-button [eaMenuTrigger]="m">…</ea-button><ea-menu #m>…</ea-menu>. The trigger now receivesaria-haspopup/aria-expanded/aria-controlsdirectly on the focusable element rather than on a wrapping<div>, fixing the largest a11y gap in the menu API. The popup is positioned withposition: fixedso it escapes overflow-clipping ancestors
Fixed
- Improve accessibility across the library:
DropdownComponenttrigger now exposesaria-describedbyandaria-invalidfor hint/error text;AutocompleteComponentinput declaresaria-haspopup="listbox"andaria-autocomplete="list";AccordionItemComponenttrigger and panel are linked viaaria-controlsandaria-labelledby;TabComponentpanels are linked to their tab buttons viaaria-controls/aria-labelledbyand become keyboard-focusable;TooltipDirectivenow wiresaria-describedbyon the host, marks the popover withrole="tooltip", and dismisses on Escape;SwitchComponentaccepts anaria-labelfor icon-only usage;CodeInputComponentgroup falls back to a descriptivearia-labelwhen no visible label is set - Restore focus to the previously focused element when
DialogComponentandDrawerComponentclose, so keyboard users return to the trigger that opened the overlay - Remove redundant
aria-disabledfromButtonComponent(nativedisabledis authoritative) - Drop misleading
aria-modal="false"fromDatePickerComponentcalendar popover
0.11.1 2026-04-22
Fixed
- Prevent the
DropdownComponentmenu from being clipped by overflow-hidden ancestors (e.g.CardComponent) by switching it to fixed positioning anchored to the trigger
0.11.0 2026-04-21
Added
- Introduce
design-system-flutter.mdanddesign-system-react.md— self-contained framework integration guides covering the full Eagami token set, mandatory design rules, ready-to-paste theme setup, usage patterns, and component API conventions, intended to be copied into consuming Flutter and React projects and written to be readable by both human developers and AI coding agents
Fixed
- Allow the
DropdownComponentmenu to grow wider than its trigger so long option labels are no longer clipped or wrapped
0.10.1 2026-04-19
Changed
- Rework
EagamiWordmarkComponentAPI — replacevariantandtextinputs with a numericvariant(1–4) that maps to the four text options internally, addlayoutinput (stacked|inline) for single-line rendering with em dash separator, and switchsizefrom preset strings to a numeric pixel value for continuous scaling
Fixed
- Prevent menu dropdown from being clipped by card boundaries in the sandbox
0.10.0 2026-04-14
Added
- Add
DatePickerComponent(ea-date-picker) — calendar popover with prev/next month and year navigation, today shortcut,sm/md/lgsizes,short/medium/longlocale-aware display formats, configurable week start (Sunday or Monday),minDate/maxDatebounds, full keyboard navigation (arrows, PageUp/PageDown, Home/End, Enter, Escape), andControlValueAccessorintegration - Introduce a
textinput onEagamiWordmarkComponentto switch the wordmark between "eagami" and "eagami design system" - Build out
CardComponentwith aheaderDividerinput that renders anea-dividerbetween the header and the body
Changed
- Standardize multi-word component names to sentence case across the README and Storybook sidebar (e.g. "Data Table" → "Data table", "Avatar Editor" → "Avatar editor")
0.9.0 2026-04-13
Added
- Add
AutocompleteComponent(ea-autocomplete) — text input with filtered suggestion dropdown, keyboard navigation, configurableminLengthandmaxResults, andControlValueAccessorintegration - Add
BreadcrumbsComponent(ea-breadcrumbs) — navigation trail with chevron or slash separators, link/button/disabled item rendering, and automatic current-page handling for the last item - Add
DrawerComponent(ea-drawer) — side panel built on native<dialog>with four positions (left/right/top/bottom), sizes, focus trapping, backdrop/escape close, and header/footer content slots - Add
EagamiWordmarkComponent(ea-eagami-wordmark) — branded wordmark linking to eagami.com withlogo,signature, andbrandvariants andsm/md/lgsizes that scale the logo and text proportionally - Add
MenuComponent(ea-menu) andMenuItemComponent(ea-menu-item) — popup action menu with trigger slot, four placements, keyboard navigation, icon support, disabled items, anddangervariant - Add
ea-icon-eagamibrand logo icon used byEagamiWordmarkComponent
Fixed
- Set default
1em × 1emsizing on all icon components so icons render at the inherited font size when placed inside buttons without explicit sizing - Allow
PaginatorComponentcontrols to wrap onto multiple lines in narrow containers instead of overflowing horizontally - Resolve strict type checking error in Storybook build for the autocomplete story
0.8.1 2026-04-11
Fixed
- Ensure package.json version matches branch version before merge to prevent failed npm publishes
0.8.0 2026-04-11
Added
- Add
DataTableComponent(ea-data-table) with sortable columns, sticky header, density modes, striped/bordered/hoverable options, column formatting viaformatcallback, and empty state - Add
PaginatorComponent(ea-paginator) with page size selector, range label, placement option, and smart page number ellipsis - Add
aria-currentinput toButtonComponentfor active page indication in pagination - Add
captureOriginal()method toAvatarEditorComponentfor snapshotting the current image and crop state as the new original after a save - Add 25 utility icon components:
alert-triangle,arrow-left,arrow-right,bell,calendar,check-circle,chevron-up,clock,copy,download,external-link,file,filter,heart,image,link,log-out,mail,menu,more-horizontal,pencil,search,settings,star,x-circle - Add 5 brand logo icon components with official brand colors:
apple,facebook,github,microsoft,x-twitter - Add Storybook stories for Avatar, Badge, Divider, Spinner, Switch, Toast, and Tooltip components
0.7.4 2026-04-04
Added
- Add
loadinginput toAvatarEditorComponentfor showing a skeleton placeholder while avatar data is fetched externally
Fixed
- Fix
AvatarEditorComponentrevert button being enabled on initial load before any changes are made - Restore exact original zoom/pan crop state when reverting, instead of resetting to defaults
- Preserve the original image in memory so reverting after file uploads restores it instantly without a network request
- Support reverting to an empty state when the component started with no image
- Remove unused
revertSrcinput fromAvatarEditorComponent(revert now always uses the stored original from initial load)
0.7.3 2026-04-04
Added
- Separate
revertSrcinput onAvatarEditorComponentso the "revert to original" button can reset to a different image thancurrentSrc
Fixed
- Remove unused
tslibdependency from published package
0.7.2 2026-04-03
Added
- Show a loading skeleton inside
AvatarEditorComponentwhile an image is being fetched — skeleton matches the editor shape (circleorrect) and canvas size
Fixed
- Disable
AvatarEditorComponentrevert button once already reverted to original; re-enables on any zoom or pan change
0.7.1 2026-04-03
Fixed
- Fix
AvatarEditorComponentto applycropStateon everycurrentSrcchange, not just the initial load — restores crop position correctly when the source URL is swapped after the first render - Fix
AvatarEditorComponentto suppresscropStateChangeemission during programmatic image loads (currentSrcchanges and revert) — prevents transient state divergence that caused the save button to flicker enabled
0.7.0 2026-04-02
Added
- Add
ProgressBarComponent(ea-progress-bar) with determinate and indeterminate modes, semantic variants, and optional label/value display - Add
TagComponent(ea-tag) with semantic variants, sizes, and optional remove button - Add
cropStateinput toAvatarEditorComponent— when provided alongsidecurrentSrc, restores zoom and pan position after the image loads; ignored on subsequentcurrentSrcchanges - Add
cropStateChangeoutput toAvatarEditorComponent— emits the current crop state on every zoom or pan change - Add
fileSelectedoutput toAvatarEditorComponent— emits the originalFilewhen the user picks or drops a file (fires after validation passes) exportCrop()onAvatarEditorComponentnow returnsPromise<Blob>; the(cropped)output continues to fire for backwards compatibility- Add
--ea-card-header-padding,--ea-card-body-padding, and--ea-card-footer-paddingCSS custom properties toCardComponentfor per-section padding overrides - Add
--ea-input-toggle-colorCSS custom property toInputComponentfor overriding the password visibility toggle color
0.6.0 2026-03-28
Added
- Add
CodeInputComponent(ea-code-input) for verification code entry with auto-advance, paste support, arrow key navigation, andControlValueAccessorintegration - Add
TabsComponent(ea-tabs) andTabComponent(ea-tab) with underline and filled variants, keyboard navigation, and ARIA tab roles - Add
AlertComponent(ea-alert) with semantic variants (default, success, warning, error, info) and dismissible option - Add
SkeletonComponent(ea-skeleton) with text, circle, and rect variants for loading placeholders - Add
AccordionComponent(ea-accordion) andAccordionItemComponent(ea-accordion-item) with single and multi-expand modes - Add
ea-icon-chevron-downicon component
Changed
- Remove
rxjsfrom peer dependencies (no longer used by any component) - Remove
tslibfrom dependencies (not used in compiled output)
Fixed
- Fix tab panel spacing increasing with each tab due to empty host elements participating in flex gap layout
0.5.0 2026-03-22
Added
- Add hover overlay on avatar editor canvas to change photo by clicking the image
- Add revert-to-original and remove icon buttons inline with zoom controls in avatar editor
- Add tooltips to all avatar editor icon buttons
- Add
removedoutput toAvatarEditorComponent - Add icon components:
ea-icon-camera,ea-icon-minus,ea-icon-plus,ea-icon-rotate-ccw,ea-icon-trash,ea-icon-upload - Add
--shadow-focus-ring-errorand--shadow-focus-ring-successelevation tokens - Add
pnpm screenshotscommand to capture README component images via Puppeteer
Changed
- Redesign avatar editor controls: replace Change/Remove/Apply buttons with icon button row and canvas hover overlay
- Avatar editor controls are always visible (disabled when no image is loaded)
Fixed
- Fix avatar editor image not displaying until clicked by using
afterNextRenderinstead ofsetTimeout/requestAnimationFrame - Fix browser autofill adding light blue background to input fields
- Replace all hardcoded hex and rgba colors with design token references
0.4.1 2026-03-22
Fixed
- Update README so npm package page displays correctly
0.4.0 2026-03-22
Changed
- Use
--color-text-primaryas default color forAvatarEditorComponentzoom buttons instead of--color-text-secondary
Fixed
- Set
display: inline-block; line-height: 0onAvatarComponenthost element to eliminate extra space below the avatar - Load
currentSrcimage inAvatarEditorComponenton initialization so pre-existing avatars display in the editor - Use local sample avatar image in sandbox instead of external URL
0.3.0 2026-03-21
Added
- Add
xlpadding option toCardComponent(32px) - Add
--ea-card-shadowCSS custom property for overriding card box-shadow without::ng-deep - Add
--ea-button-font-sizeand--ea-button-font-weightCSS custom properties for overriding button typography without::ng-deep - Add icon components:
ea-icon-google,ea-icon-check,ea-icon-x,ea-icon-user,ea-icon-info,ea-icon-loader - Add
AvatarComponentwith image, initials, and icon fallback;size(xs–xl) andshape(circle/square) inputs - Add
BadgeComponentwith semantic variants (default/success/warning/error/info) and size options - Add
SpinnerComponentwith SVG-based loading animation and accessiblerole="status" - Add
SwitchComponentwithControlValueAccessorintegration, label, and size options - Add
TextareaComponentwithControlValueAccessorintegration, mirroringInputComponentAPI (label, hint, error, size, status, resize, maxlength) - Add
DividerComponentwith horizontal/vertical orientation and optional label - Add
TooltipDirective([eaTooltip]) with configurable position (top/bottom/left/right), triggered on hover and focus - Add
ToastComponentandToastServicefor notification toasts with semantic variants, auto-dismiss, and slide-in animation - Add
AvatarEditorComponentwith drag-and-drop upload, pan, zoom, and crop export for circle and square shapes
Fixed
- Make toast widths independent so each toast sizes to its own content; full-width layout on mobile (<640px)
- Increase
lgsize font forInputComponentandTextareaComponentto--font-size-lgfor a clearer distinction frommd - Remove double spacing between card header/body/footer sections (header no longer adds bottom padding, footer no longer adds top padding)
- Use color inheritance in
InputComponentso password toggle and hint messages respect parent context colors - Move Angular and RxJS from direct dependencies to peer dependencies to prevent version conflicts for consumers with different minor/patch versions
0.2.0 2026-03-14
Added
- Add
autocomplete,autofocus, and password visibility toggle inputs toInputComponent - Add
headerAligninput toCardComponent - Add
IconComponentandIconButtonComponent
0.1.0 2026-03-09
Added
ButtonComponentwith variant (primary,secondary,ghost,danger), size, and loading state supportInputComponentwith fullControlValueAccessorintegration, label, hint, and error stateCheckboxComponentwithControlValueAccessorintegration and indeterminate stateRadioComponentandRadioGroupComponentwith composite pattern andControlValueAccessorintegrationDropdownComponentwithControlValueAccessorintegrationDialogComponentbuilt on the native<dialog>elementCardComponent- Global SCSS design tokens for colors, typography, spacing, elevation, motion, and shape
- CSS custom property theming support