Catnip

Appearance

Changelog ​

All notable changes to Catnip packages.

Versioning ​

Catnip follows Semantic Versioning:

  • Major — Breaking changes
  • Minor — New features, backward compatible
  • Patch — Bug fixes

Releases are managed via Changesets. Packages are published to the Signicat GitLab npm registry.

Canonical history — Release notes for every publishable package are maintained on this page first. Some packages also ship a CHANGELOG.md in their npm tarball for convenience. When cutting a release, manually bump package.json versions and update this document (move Unreleased → version section). Do not use Changesets unless explicitly requested.

@signicat/catnip-components ​

Unreleased ​

1.2.4 ​

  • CatnipTooltip — The arrow's point is now rounded with a 2px radius (radius-xs) instead of coming to a sharp point.

1.2.3 ​

  • CatnipTooltip — Desktop and mobile sizes now match the design; 1.2.1 had them the wrong way round. On desktop, size="m" (compact, the default) uses space-1 / space-2 padding and paragraph-s, and size="l" uses paragraph-m. Below 768px both are larger: m uses space-2 / space-3 padding and paragraph-m, and l uses paragraph-l. The m arrow sits 6px from the bubble edge on desktop and 8px on mobile.

1.2.2 ​

  • CatnipInput — type="textarea" keeps the same inset border as the single-line field. The textarea rule no longer clears the box-shadow that draws that stroke.

1.2.1 ​

  • Custom-element prop names — Renamed public props that collided with native HTMLElement / ARIA IDL properties. Titles are now component-specific (alertTitle, toastTitle, dialogTitle); accessible labels, IDs, roles, autofocus, and other forwarded native values use component-qualified names such as buttonAriaLabel, inputId, listRole, and progressAriaValueText. HTML consumers use the matching kebab-case attributes. Native global attributes such as title, id, and aria-* remain available on the custom-element host. Development builds no longer log Custom element prop "…" conflicts with an existing property on the element.
  • Deprecated: previous prop names — The old names (ariaLabel, id, title, autofocus, …) keep working as deprecated aliases: the old attribute or property sets the replacement prop while the replacement is unset, so existing markup needs no change yet. They will be removed in a future release. See Component API — Deprecated prop names for the mapping.
  • Custom-element metadata — Manifest generation now rejects public props that collide with properties inherited from HTMLElement, and no longer publishes Vue's class / style implementation metadata as component props. Generated React wrappers and declarations follow the renamed component APIs.

1.2.0 ​

  • Docs — Typing / in a Catnip input no longer opens the global documentation search; the shortcut still opens search when focus is outside an editable control.
  • CatnipDropdown, CatnipInputPhone, CatnipList — Rows no longer expose a list item between the listbox (or menu) and its options, so assistive technology sees the options as owned by the listbox.
  • CatnipButton — Pressed utility buttons with appearance="secondary" and the default intent now use border/neutral/strong for their stroke.
  • Agent skill — SKILL.md now tells agents to use the production docs origin (https://catnip.signicat.com) when the file was not loaded from a URL, such as a copy in another repo or an npm package.

CatnipInputDate ​

  • The field is now a single-line <input role="combobox"> with aria-haspopup="dialog" instead of a wrapping textarea. A value longer than the field scrolls inside it instead of growing the field.
  • Focusing the field no longer opens the calendar, so it can't cover the next fields while people tab through a form. Click the field, or press Arrow Down (also Alt + Arrow Down), which also moves focus into the panel. Tab from the field closes the panel.
  • The panel is now a named role="dialog" rendered right after the field instead of at the end of <body>, so aria-controls resolves and reading order and Tab order follow the field. It is still shown in the top layer. While focus is inside, it is aria-modal and Tab wraps inside it.
  • Each time the panel opens it shows the selected date (or today), not the month browsed last time, so Arrow Down always lands on the selection.
  • Focus returns to the field after Escape, picking a date, Apply, and Cancel. With Apply in the panel, Escape now discards the draft and emits cancel. Without Cancel, a visually hidden Close button lets touch screen reader users dismiss the panel.
  • Each month is now a <table role="grid"> named by its month, with rows and full weekday names for screen readers. The calendar has one Tab stop, on the active day, even with two months shown. Day names include today, selection, range start and end, and unavailability; today has aria-current="date". The year and month pickers also keep a single Tab stop.
  • Every month header shows its year, including the second month in range mode and each month in the vertical layout.
  • disabledDates days stay focusable and are announced as unavailable instead of being skipped. Days outside min / max stay disabled, and arrow keys stop at those bounds.
  • A polite live region announces the chosen range start, the completed range, and the month shown after the previous / next buttons. Windows contrast themes keep selection, the range band, today, and focus visible.
  • The preset list now works from the keyboard: one Tab stop, Arrow Up / Arrow Down, Home, and End move, Enter / Space pick. While the field has focus, a named preset shows its dates so they can be read and edited; leaving them unchanged restores the label, and editing them makes the range custom.
  • Typed dates are parsed more forgivingly: other separators and extra spaces (for voice input), digits without separators (27031990, or six digits such as 102226 when the format has a two-digit year), missing leading zeros, and month names in locale or English. The value is rewritten in the display format on blur.
  • The From and To fields (vertical range with time) keep what was typed until blur: a date isn't reformatted while it's typed, invalid text stays visible and flagged instead of reverting to the old date, and emptying a field clears that date. In each case Apply can no longer submit the date that was there before.
  • A single date without time whose display format is all digits (the default YYYY-MM-DD, DD.MM.YYYY, …) now sets inputmode="numeric", so phones show a number pad. It doesn't limit what can be typed.
  • update:modelValue is no longer emitted when the committed value hasn't changed, for example when focus moves from the field into the calendar.
  • close now fires whenever the panel closes, including on Tab, when focus moves elsewhere, and from the Close button. Neither close nor open-change fires any more when the panel is already closed, for example on Enter in a closed field.
  • The value and trigger slot triggers now get aria-haspopup="dialog" instead of "grid". A slotted trigger no longer gets aria-controls, which can't reach into the component's shadow root. Enter / Space on the value trigger now also move focus into the panel.
  • The panel now lives in the component's shadow root. Global CSS that targeted the old teleported panel (for example .catnip-input-date__panel in the document) no longer applies, and tests must query panel parts such as catnip-input-date-day inside the shadow root; their data-test values are unchanged. New locale keys: inputDate.chooseDate, inputDate.chooseDates, inputDate.close, inputDate.presetDescription, and shared calendar.* keys. inputDate.calendar is no longer used.
  • Selected days and every day in a selected range now use a semibold weight. The today indicator and keyboard focus ring stay circular inside a range band instead of becoming square.
  • The focus ring now appears only on keyboard focus. Previously, after changing months, a ring stayed on the same day number in every month.
  • The vertical layout now follows navigation to any month. Picking an older year or month, or opening with a value more than 12 months from today, shows that month instead of stopping at today ± 12 months.
  • Time boxes accept only digits and : (up to 5 characters) and expand shorthand such as 930 to 09:30 on blur. They use inputmode="numeric" so mobile keyboards show digits.
  • The trigger field and the panel inputs now describe their expected format to screen readers. Text that doesn't parse is no longer reverted or silently ignored: on blur it stays in place, is marked aria-invalid, and shows a "Use the format …" message. New locale keys: inputDate.formatHint, inputDate.invalidFormat, inputDate.timeFormat.
  • Apply stays enabled once the dates are complete. With an invalid typed value it flags the input and moves focus there instead of staying disabled with no explanation.
  • The panel opens 8px below the field's supporting text instead of covering it, so error and help messages stay visible while the calendar is open. A format error caused by clicking into the panel appears after the click lands, so the panel or its action row doesn't shift under the pointer.

CatnipTooltip ​

  • Size mapping follows the final design: m is now the compact tooltip (radius-s, 12 × 6 px arrow) and l the standard one (radius-m, 16 × 8 px arrow). Each size has a desktop variant and a mobile variant below 768px instead of switching to a compact layout.
  • size="m" (the default) is now smaller on desktop: space-2 / space-3 padding and radius-s instead of space-3 / space-4 and radius-m. size="l" is unchanged on desktop and keeps its padding and radius on mobile. Deprecated size="s" still renders as m.

1.1.9 ​

  • CatnipTableRow — Selected rows now use background/primary/subtler-hover on hover, matching the Figma selected-hover state.
  • CatnipButton — Utility buttons now support appearance="secondary" with intent="danger" using dedicated default, hover, pressed, focus, and disabled styling. Main buttons keep the existing primary-danger fallback and development warning.
  • CatnipDialog — The generated header now uses a flex text stack so title and description keep the designed 4px gap beside an icon. The docs preview uses M footer buttons for the default layout and L footer buttons for the centered layout.

1.1.8 ​

  • CatnipInput — type="password" now renders a native type="password" control instead of masking a text input with * in script. Password managers, autofill, screen readers, and mobile keyboards now treat it as a secure field, and pasting, IME composition, and undo work natively. The browser's own mask character replaces *; the eye toggle switches the control to type="text" and back.

CatnipTooltip ​

  • Sizes are now m and l, each with a compact layout below 768px (smaller padding, radius-s, one typography step down, and a 12 × 6 px arrow). size="s" is deprecated and renders as m, so on desktop it now uses the standard m layout.
  • Arrows follow the updated design: 16 × 8 px in the standard layout, with an inset from the bubble edge of 12 px (standard), 6 px (compact m) or 8 px (compact l), replacing the fixed 8 px inset.
  • alignment="start" / "end" now extend the bubble past the anchor edge when the anchor is too small for the arrow to reach its center (for example the default info icon), so the arrow points at the anchor. Wider anchors stay flush.

1.1.7 ​

  • Text spacing (WCAG 1.4.12) — Standard letter-spacing and word-spacing overrides on a catnip-* host or its ancestors now reach native buttons, inputs, selects, and textareas inside components instead of being reset by browser form-control defaults. A page-level letter-spacing or word-spacing now also applies to Catnip controls. Line height and paragraph spacing still require the --catnip-text-spacing-* properties.
  • Text spacing — Removes fixed near-zero letter-spacing from CatnipTabs, CatnipLink, CatnipPagination, CatnipInputFile, CatnipInputNumber, CatnipChip, CatnipFileItem, CatnipStatus, CatnipCounter, and alert messages so those labels inherit spacing overrides too. Rendering changes by at most a fraction of a pixel per character.
  • Floating overlays — Overlay styles adopted into a Catnip shadow root (for example menus inside CatnipDialog) now join that root's component layer, so they no longer outrank component rules regardless of specificity and the text-spacing properties apply to them. Overlays rendered in the document are unchanged.

1.1.6 ​

  • Text spacing — Adds inherited Shadow DOM styling hooks for WCAG 2.2 SC 1.4.12 line, letter, word, and paragraph spacing, plus guidance for testing the overrides across custom-element boundaries.
  • CatnipInput — Uses border tokens for warning and success borders and the standard primary focus ring for both intents.
  • CatnipInputPhone — Keeps disabled content and border colors when both disabled and readonly are set.
  • CatnipDropdown — An omitted modelValue remains empty and shows the configured placeholder instead of being coerced to boolean false and rendered as text. Explicit boolean option values, including false, remain supported.
  • CatnipTable — Non-selected body rows use the neutral hover background consistently in both striped and unstriped tables.
  • CatnipDialog — Aligns the default and centered layouts with the design specification: corrected icon dimensions, typography, header/footer spacing, and close-button placement; adds semantic icon intents and the layout prop.
  • CatnipButton — Main text buttons now use the Figma-specified minimum widths: 96px for s, 120px for m, and 136px for l. Utility and icon-only buttons keep their content-driven or square dimensions.

1.1.5 ​

  • CatnipInputNumber — The − / + stepper buttons retain keyboard focus after Enter or Space, allowing repeated stepping without tabbing back to the button.
  • CatnipInput / CatnipDropdown / CatnipInputPhone — Icon and action affordances no longer increase S/M/L field heights beyond 32 / 40 / 48px. Phone country controls, large flags/chevrons, clear-button treatment, expanded-border state, and country-search row geometry/colors now match Figma.
  • CatnipTable / CatnipTableRow / CatnipTableCell — Striped rows use background/neutral/subtler, while body-row and sortable header-cell hover states use background/neutral/subtler-hover, matching Figma.
  • CatnipStepper — Uses the Figma-specified 8px spacing between horizontal connectors and adjacent step content when names are positioned beside markers.

1.1.4 ​

  • CatnipList — The host no longer sets max-width: 100%, so a list positioned absolutely inside a narrow relative parent (for example a small trigger button) is no longer capped to that parent's width.
  • Dependencies — Picks up @signicat/catnip-design-tokens@1.0.5 and @signicat/catnip-css@1.0.6.

1.1.3 ​

  • CatnipDropdown / CatnipDropdownOption — Non-string label values set as DOM properties no longer throw; numbers and booleans are shown as text and other types are ignored. label remains typed as string.

CatnipDropdown ​

  • The clear button now emits update:modelValue with null instead of "" in single-select mode, so number and boolean value domains no longer receive a string. Multi-select still emits []. Consumers that compare against "" should check for null.
  • Adds a clear event, fired after update:modelValue when the clear button is pressed, for resetting to a custom default.

1.1.2 ​

  • Dependencies — Picks up @signicat/catnip-assets@1.1.1, so catnip-graphic can render the new hero illustrations.

1.1.1 ​

  • CatnipInput — Keeps the configured right icon visible alongside the clear control when a non-empty value and showClearButton are both present.

1.1.0 ​

  • CatnipCheckbox / CatnipChecklist / CatnipDropdown — Keeps checked and indeterminate marks centered at browser zoom levels above and below 100%.
  • CatnipAlert / CatnipToast — Keeps the message icon color aligned with the selected semantic intent across all appearances.
  • CatnipStepper — Keeps horizontal connectors visible when step names are hidden while preserving the 8px marker-to-connector spacing.
  • CatnipButton — Adds the utility-only ghost-subtle appearance for default intent across XS–L, including hover, pressed, focus, selected, and disabled states. Invalid purpose or danger-intent combinations render as primary and warn in development.
  • CatnipFileItem / CatnipAlert / CatnipToast / CatnipDialog / CatnipDrawer — Uses the shared ghost-subtle utility button for action and close controls, with XS buttons in medium FileItems/messages and S buttons in large variants.
  • CatnipGraphic — Shrink-wraps the custom-element host to the SVG dimensions without adding inline baseline space below it.
  • CatnipFieldLabel — Uses content/disabled/strong for optional text when the label is disabled.
  • CatnipIcon / CatnipGraphic — SVGs no longer render empty and pop in on every new element: loaded SVGs are now cached for all elements on the page, and a first use costs one request instead of 2–3. Graphics reserve their final size before loading (no layout shift) and show a catnip-skeleton until the artwork arrives. New preloadIcons(names) / preloadGraphics(names) exports (also on window.Catnip) load SVGs ahead of render. The UMD build now expects the globals CatnipIconsSvg and CatnipAssetsIllustrations.
  • CatnipSkeleton — New catnip-skeleton shimmer placeholder with width, height, and radius (CSS lengths); no animation under prefers-reduced-motion.
  • Documentation — Icon playground and usage examples use real icon names (tick instead of the non-existent check / save), CDN configuration examples no longer call window.Catnip before the standalone script has run, and FOUC CSS is described as hiding elements until they are registered.
  • Dependencies — Picks up @signicat/catnip-assets@1.1.0 (illustrationViewBoxes) and @signicat/catnip-icons@1.0.3.

1.0.11 ​

  • CatnipToast — Fixed width reduced from 640px to 420px (still capped to the viewport on narrow screens).

1.0.10 ​

  • CatnipFieldLabel (breaking) — Removes the redundant standalone s size. Large labels now keep medium (500) weight and use a 24px info icon; optional text uses regular (400) weight and content/neutral/strongest.
  • CatnipSpinner (breaking) — Replaces subtle with the Figma-aligned arc (quarter / three-quarter) and adds an independent inverse color treatment for dark and strong-color surfaces.
  • CatnipUser — Avatar initials prefer content/neutral/strongest-inverse and fall back to AA-safe pure black or white for custom color fills, including translucent fills when the underlying surface can be resolved. The catalogue's expandable picker keeps the trigger avatar color synchronized with the selected option.
  • CatnipCounter (breaking) — Aligns the API with Figma: appearance now accepts only primary / secondary, while the new boolean disabled property composes with either appearance and applies its designed token treatment.
  • CatnipToggle — The custom-element host now shrink-wraps the 20px/28px control row without adding inline baseline space below it.
  • CatnipCheckbox / CatnipChecklist / CatnipDropdown — Checked and indeterminate checkbox chrome now matches Figma: the filled box uses one uninterrupted semantic background colour, and component-specific check/dash vectors replace the differently proportioned catalogue icons.
  • Dependencies — Picks up @signicat/catnip-design-tokens@1.0.4 and @signicat/catnip-css@1.0.5.
  • Left/right icon treatments use the theme-aware button radius token.
  • Aligns icon interaction treatments with Figma: Secondary icons remain transparent on hover/press, while Tertiary icons use the neutral subtlest hover/pressed backgrounds.

1.0.9 ​

  • Test selectors — Custom testSelectors on one instance no longer leak into the shared defaults. Other instances of the same component (and instances created later) keep their default data-test values.

1.0.8 ​

  • CatnipGraphic — In dark mode, graphics paint primary with Brand 100 and accent with Brand 600 (via --catnip-graphic-primary / --catnip-graphic-accent). Light and EndUI are unchanged.
  • Dependencies — Picks up @signicat/catnip-design-tokens@1.0.3 and @signicat/catnip-css@1.0.4.

1.0.7 ​

  • CatnipAlert (breaking) — Removes the toast appearance. Alert is in-flow only (banner, inline, inlineInverse, text) and defaults to inline. Viewport overlay feedback, duration, horizontalPosition, and verticalPosition move to catnip-toast. Banner still dismisses from the close button.
  • CatnipToast — New catnip-toast viewport overlay with timed or persistent dismissal, close button, and the same intent / size / announcement / slot surface as Alert.
  • Dependencies — Picks up @signicat/catnip-design-tokens@1.0.2 and @signicat/catnip-assets@1.0.3.

1.0.6 ​

  • Package — Ships html-custom-data.json (VS Code / Cursor html.customData) generated from the Custom Elements Manifest. The manifest and custom-data file are also published on the docs host as /custom-elements.json and /html-custom-data.json.
  • CatnipFileItem — showDownload and showDelete hide those actions on ready / done rows (both default to true).

Documentation ​

  • Adds an agent skill page. Point coding agents at the published SKILL.md for this docs environment (.dev or .com) so they consume the full Catnip stack in product apps (components, React wrappers, CSS, tokens, icons, assets). The same file ships as @signicat/catnip-components/SKILL.md.
  • Installation and Quickstart include copy-paste Vue isCustomElement, TypeScript window.Catnip reference, and editor custom-data setup.

1.0.5 ​

  • CatnipDropdown / CatnipListItem — Long option and list-item labels wrap. The open list is at least as wide as the trigger and grows up to listMaxWidth (default 320px) so long values wrap instead of stretching the panel.
  • CatnipLink — Size styles keep text-token fallbacks (s 12/16, m 14/20, l 16/24, weight 500) so font-size is not empty when --catnip-font-text-* is unset.
  • Typography — Drop invented weight presets (--catnip-font-text-s-medium) and leftover Prime size/letter-spacing vars. Use the real --catnip-font-* preset plus font-weight when the design needs medium.

CatnipInputDate ​

  • value slot customizes the selected-date display inside the default trigger; trigger slot replaces the whole field shell (same pattern as Dropdown).
  • Range preset sidebar spans the full panel height (divider only, no List card shadow). Reset / Cancel / Apply sit under the calendars.

1.0.4 ​

  • CatnipTooltip — Anchor wrappers grow with the host (flex-grow: 1) so a stretched catnip-tooltip no longer shrink-wraps and clips the available width of a slotted control.
  • CatnipInputFile (breaking) — Narrows the field-level intent API to the implemented neutral and danger presentations. Warning and success remain available for individual supporting-text messages.
  • CatnipDrawer — Aligns the predefined desktop widths to the Drawer layout grid: S is now 492px and M is 578px; L remains 664px.
  • CatnipStatus / CatnipBadge / CatnipLink — Uses the disabled subtle background token for filled disabled statuses, subtle disabled badges, and primary disabled link icon backgrounds.
  • CatnipToggle — Aligns off-state borders, disabled icon and label colours, and 500-weight labels with Figma. Adds a focusable readonly state that exposes aria-readonly, preserves the current value, and rejects interaction.
  • Icons — Clear and toggle affordances use the renamed cross-filled icon instead of the removed reset icon.
  • CatnipFileItem — Uses the strong success content colour for the completed metadata tick-circle while retaining neutral percentage text.
  • CatnipAlert documentation — Restores a dismissed banner in the live example through a keyboard-accessible Show banner action, matching the existing toast preview workflow without changing the component's one-shot dismissal behaviour.
  • CatnipProgress — Aligns the L presentation with Figma by using the text-l typography token and a 24px intent icon while preserving text-m and the 20px icon for M.
  • CatnipBadge — Aligns outer padding with the updated Figma specification so one-icon badges render as 20px, 24px, and 28px squares at S, M, and L while labelled badges retain their separate inline label spacing.
  • CatnipStepper — Keeps the docs playground warning above vertical previews without overlapping the component, exposes the omitted stepNamePosition state as (none) for warning-free hidden names, and restores Figma's marker-to-connector spacing in vertical and hidden-name horizontal layouts.
  • CatnipList / CatnipListItem — Aligns danger and disabled row states with Figma: unselected rows are transparent, danger hover uses the danger subtle surface, selected single-choice rows retain their semantic selection fill, and disabled styling takes precedence over danger.
  • Documentation playground — Editable JSON arrays now remain the source of truth for live previews; option changes update Toggle Group, Checklist, and Radio Group immediately instead of being overwritten by fixed preview defaults. Tabs also keep the visual selection synchronized with modelValue after interaction. Local examples now cover Toggle Group and Dropdown country-picker states.
  • CatnipToggleGroup (breaking) — Removes the unsupported S size so the public API and docs expose only the Figma M/L variants. Option data also accepts an optional icon rendered before the label, with M/L icon sizing and updated catalogue and local playground examples.
  • CatnipRangeInput (breaking) — Removes the unsupported S size so the public API and docs match Figma's M/L variants. The value tooltip pointer stays aligned with the thumb at the range ends as well as at 50%.
  • CatnipCheckbox / CatnipChecklist — Aligns checkbox state styling with Figma: active unchecked boxes are transparent, disabled/read-only states override danger, unavailable fills and icons use disabled semantic tokens, and danger hover uses its dedicated border token. Initial indeterminate values now synchronize to the native checkbox, and forced-colors mode retains a visible focus indicator.

1.0.3 ​

  • Shared prop values — Common size, intent, appearance, orientation, placement, and alignment vocabularies now have canonical runtime values and TypeScript types, while each component remains narrowed to only the values it supports.
  • Generated APIs — Custom Elements Manifest generation preserves literal unions derived from shared aliases so framework consumers retain precise public prop types and IDE autocomplete.
  • Documentation — Component property tables consistently show exact literal unions, reusable complex types, defaults, and descriptions that match the implementation.

1.0.2 ​

  • Package types — The default export condition now exposes dist/main.d.ts to NodeNext/bundler TypeScript consumers, including the React package's browser-only dynamic registration import.

1.0.1 ​

  • Styles — Shadow roots no longer duplicate component SCSS in a <style> tag. CSS is applied only via constructed adoptedStyleSheets, shared across instances.
  • Overlays — Tooltips, dropdown/date/phone panels, and Tabs overflow menus park inside the open modal Dialog / Drawer (<dialog>) and use the Popover API so they are not left inert on document.body under showModal().

1.0.0 ​

  • Stable — First 1.0 (soft) release. Publishable Catnip packages are aligned at 1.0.0.
  • CatnipDrawer — Specs document --catnip-drawer-width on the host to override t-shirt size (same pattern as Dialog).

CatnipDialog ​

  • Breaking — Footer is the footer slot only. Removed generated cancel/submit buttons and the cancelText / submitText / *Button* / centeredFooter / footerButtonSize props, plus dialog-cancel and dialog-submit.
  • padding (default / none) controls the surface inset. --catnip-dialog-padding overrides the length. --catnip-dialog-width overrides t-shirt size (use max-content to hug content).

0.0.60 ​

  • CatnipBadge (breaking) — appearance is subtle / strong (was default / inverse). subtle is the wash; strong is the solid surface.
  • CatnipStatus (breaking) — appearance (plain / filled) is removed. Use filled for the pill; off is indicator + label only.
  • CatnipButton / CatnipSplitButton — Secondary and ghost appearances use --catnip-color-content-neutral-strongest for label and icon colour (Figma: was primary strongest).

0.0.59 ​

  • CatnipRadio — Renders the visible ring, selected dot, and focus treatment as concentric vector circles so their shape and alignment remain stable when browser zoom maps CSS pixels to fractional device pixels.

0.0.58 ​

  • CatnipFileItem — In-progress metadata uses the uploading-progress icon instead of clock.
  • Host — Shared :host font uses --catnip-font-family-default.
  • Dependencies — Picks up @signicat/catnip-assets@0.0.17 and @signicat/catnip-icons@0.0.17 (downloading-progress, uploading-progress).

0.0.57 ​

  • CatnipStatus — Optional leftIcon / leftIconSlot replace the status dot with a catalog icon. Empty default slot uses icon-only layout (dot or icon). Set aria-label for the accessible name (role="img"); a development warning is logged when it is missing. Filled uses equal container padding, extra inline padding on the label wrap, and a tighter gap between indicator and value. The status dot stays circular (aspect-ratio: 1).
  • CatnipBadge — Empty default slot uses icon-only layout (label wrap and its inline padding are hidden). Set aria-label for the accessible name (role="img"); a development warning is logged when it is missing.
  • CatnipInputNumber — Uses semantic primary/danger focus-border tokens, semantic warning/success border tokens, and non-layout-affecting inset strokes so sizes s/m/l render at their specified 32/40/48px heights without reducing the stepper targets.
  • CatnipRadio — Aligns the 20/24px control envelopes and 16/20px visible circles with Figma; updates neutral, danger-hover, disabled, and read-only tokens; prevents danger styling from overriding disabled/read-only checked states; removes the normal unchecked fill; and keeps read-only options focusable without applying the component focus ring and exposes supported aria-disabled semantics.
  • Dependencies — Picks up @signicat/catnip-design-tokens@0.1.12 and @signicat/catnip-css@0.0.17 (--catnip-color-border-danger-strong-hover).

0.0.56 ​

  • window.Catnip — First-wins host global for JS APIs (version, registerTranslate, configure, parseEmitDetail, CatnipConfig). Micro-frontend remotes must use window.Catnip and must not import a second copy of the package for i18n or config.
  • Docs — Installation documents one instance of Catnip in micro-frontends (shell mounts components and CSS; remotes inherit that version).

0.0.55 ​

  • CatnipListItem / CatnipDropdownOption (breaking) — slots leading / trailing are renamed to left / right.
  • CatnipDropdown (breaking) — slots list-header / list-footer are renamed to listHeader / listFooter.
  • CatnipAlert (breaking) — alertIcon is renamed to leftIcon. Slot alertIconSlot is renamed to leftIconSlot.
  • CatnipFileItem (breaking) — slot iconSlot is renamed to leftIconSlot.
  • CatnipInputDate (breaking) — calendarLayout is renamed to panelOrientation.
  • CatnipStepper / CatnipInputFile (breaking) — layout (horizontal / vertical) is renamed to orientation. Pagination layout (default / compact) is unchanged.
  • CatnipDivider (breaking) — vertical is replaced by orientation (horizontal / vertical). variant is renamed to appearance.
  • CatnipInput (breaking) — rightIconClick is renamed to right-icon-click. Test selector key trailingButton is renamed to rightButton (default data-test catnip-input-right-button).
  • CatnipRangeInput (breaking) — alwaysShowValueTooltip is renamed to showValueTooltip.
  • CatnipCard (breaking) — url is renamed to href.
  • CatnipSplitButton / CatnipTooltip — emit open-change for controlled open (same pattern as Dropdown / Date / Phone).
  • Events — Documented the intentional split: modals use update:open; popovers and fields use open-change. Pagination keeps page-change; update:modelValue is canonical.
  • Dependencies — Picks up @signicat/catnip-assets@0.0.16, @signicat/catnip-icons@0.0.16, and @signicat/catnip-css@0.0.16 (updated book glyph).

CatnipDialog / CatnipDrawer (breaking) ​

  • Slots headerSlot / footerSlot are renamed to header / footer (same names as List).
  • hasBackdropBlur is renamed to backdropBlur. Drawer close-dialog / after-dialog-close are renamed to close-drawer / after-drawer-close. Dialog keeps the dialog-named events and update:open.

0.0.54 ​

  • CatnipCard / CatnipUser (breaking) — interactive is a boolean (false by default). Card no longer uses behavior="container" | "interactive"; set interactive for the native link/button surface. User no longer uses interaction="static" | "expandable" | "clickable"; set interactive for the pill button, and when true use interaction="click" (default, no chevron) or interaction="expand" (chevron, Dropdown trigger).
  • CatnipUser — Extra end padding is for interaction="expand" and for chips that show the name. Avatar-only click chips keep even padding.
  • CatnipTooltip (breaking) — position is removed. Use placement (top, right, bottom, left) to match the floating-panel API. isSubtle is renamed to subtle.
  • CatnipInputDate (breaking) — placement is renamed to panelPlacement (HTML: panel-placement) so the calendar panel is distinct from Tooltip placement.
  • CatnipDialog / CatnipDrawer (breaking) — isOpen is renamed to open. Dismissal emits update:open (replaces update:isOpen).
  • CatnipAlert (breaking) — closable is renamed to showCloseButton so it matches Dialog/Drawer (show the X). Dialog/Drawer closable still means allow Escape/backdrop dismiss.
  • CatnipChip (breaking) — leadingIcon is renamed to leftIcon (HTML: left-icon) to match Button, Link, Badge, and Input. The slot remains leftIconSlot.
  • CatnipToggleGroup (breaking) — variant is renamed to appearance (default | accent).
  • CatnipStepper (breaking) — appearance (horizontal | vertical) is renamed to layout. Step item isActiveStep is renamed to activeStep.
  • CatnipSpinner (breaking) — isSubtle is renamed to subtle.

0.0.53 ​

  • CatnipInputDate — Date picker v2: one combined trigger (leading calendar icon, typed value, chevron), dual-month or vertical calendars, showPresets range sidebar with built-in rolling windows, Reset / Cancel / Apply for time and presets, calendarLayout / placement / panelAlign. Range no longer uses split From/To fields. showClearButton defaults to true. Range month/year header opens a year grid plus a month grid (side by side horizontally, stacked vertically); single date still uses the year grid. The trigger fills available width and wraps the value (growing in height) when the container is too narrow. Range time fields sit under each month with the same column divider; they are labeled HH:mm text inputs (no native time picker). Range horizontal calendars switch to the stacked vertical layout below 800px. The preset sidebar stretches with the calendar column (no fixed list height).
  • Fields — Input, Number, Phone, Chip, Date, File, Range, Dropdown, Checklist, Radio Group, Toggle Group, and Field Label hosts are display: block; width: 100% so they fill the container. Pagination and Tabs do the same. Dropdown with a custom trigger slot still shrinks to the slotted control. Single Checkbox, Radio, and Toggle stay shrink-to-fit.

0.0.52 ​

  • CatnipLink (breaking) — Figma Link appearances primary, secondary, tertiary, and underline; size s (kept default m); optional leftIcon / rightIcon (off by default; pass arrow-right for the trailing arrow); icon slots; primary/secondary hover-press icon pills; pill focus ring. Removes the underline boolean — use appearance="underline" for the always-underlined treatment.
  • Typography — Component styles use font: var(--catnip-font-…) shorthands, with a separate font-weight only when the design needs a weight the token does not include.

0.0.51 ​

  • CatnipCard — New framework-agnostic catnip-card surface with non-interactive container and single-action interactive behaviors. Interactive navigation uses a native anchor when url is present; in-page actions use a native button type="button". Includes Figma-aligned default, hover, pressed, focus, and disabled treatments; native link attributes and safe _blank relationships; accessible-name/current-item hooks; container/link/button disabled semantics; ordinary composed click behavior; a slot-only content API; stable test selector and CSS part; tests; catalogue accessibility guidance; live and local playground use cases; status registration; and a generated React wrapper.

0.0.50 ​

  • CatnipStepper — New WCAG 2.2 AA-oriented catnip-stepper with horizontal and vertical appearances, current Figma interaction styling, full-name-first responsive layout, accessible step-by-step overflow controls, ellipsis plus full-text title only for exceptionally long individual names, explicit showStepsName, independent isActiveStep state combined with default/completed/warning/danger intents, always-present completed connectors, native ordered-list and aria-current="step" semantics, optional native-button navigation with synchronized step-click state, disabled steps, localized assistive status text, development and missing-name warnings, tests, catalogue docs, playground demos, and a generated React wrapper.

0.0.49 ​

  • CatnipProgress — New determinate catnip-progress component with M/L sizes, default/success/warning/danger intents, optional label/percentage/icon presentation, a showZeroIndicator marker at 0%, native progress semantics, flow and upload guidance, tests, catalogue docs, and playground demos. Empty label uses bundled progress.label. CatnipFileItem now composes its bar-only presentation (hideLabel, showZeroIndicator off) without changing File Item's public API; composed upload names use fileItem.uploadComplete / fileItem.uploadProgress.

0.0.48 ​

  • CatnipUser — Catalogue playground and local demos compose interaction="expandable" catnip-user as a Dropdown trigger. Native button clicks compose so Dropdown can open; there is no component click event. Empty name uses bundled user.unassigned; unassignedLabel overrides that copy. Displayed initials are clipped to two characters. Avatar initials ink follows fill luminance (on-primary on dark, content-primary on light). interaction replaces the expandable boolean: static (default), expandable (pill + chevron), clickable (same pill, no chevron). selected is the open/pressed appearance when interactive; Dropdown aria-expanded on the host applies it too. The chevron rotates 180° when selected or when Dropdown sets aria-expanded. hideName shows avatar-only. avatar slot and default name slot override the built-in circle and label. Named-slot presence ignores fallback nodes so Unassigned’s user icon does not loop slotchange.
  • CatnipDropdown — Custom trigger slot now toggles open/close and applies combobox ARIA (aria-haspopup, aria-expanded, aria-controls) on the slotted control.
  • CatnipDropdown / CatnipInputPhone — Field size="l" now applies list l density to the open panel (rows inherit it). s / m keep list m.
  • Dependencies — Picks up @signicat/catnip-design-tokens@0.1.11 and @signicat/catnip-css@0.0.15 (--catnip-color-background-warning-subtle-hover).

0.0.47 ​

  • CatnipUser — Compact catnip-user from Figma: name (empty = Unassigned + user icon), overridable initials, color (default purple), clickable pill + chevron (no options list), and disabled. Catalogue docs and playground included.

0.0.46 ​

  • Dependencies — Picks up @signicat/catnip-design-tokens@0.1.10, @signicat/catnip-assets@0.0.14, and @signicat/catnip-css@0.0.14 so Signicat lockups in catnip-graphic use --catnip-logo-background / --catnip-logo-content.

0.0.45 ​

  • CatnipBadge — New catnip-badge component with S/M/L sizes, default/inverse appearances, seven semantic intents, typed Catnip icon props, custom icon slots, tests, catalogue docs, and playground demos.
  • CatnipDrawer — New modal catnip-drawer component with native dialog semantics, S/M/L widths and a CSS width override, full-width mobile behavior, controlled dismissal, focus containment and restoration, slot-only header/body/footer composition, backdrop options, tests, catalogue docs, and playground demos.

0.0.44 ​

  • CatnipPagination — New catnip-pagination: layouts default (item range + page list) and compact (first/prev/current/of N/next/last); modelValue page binding; ellipsis truncation; composes utility catnip-button. Catalogue docs and playground included.
  • CatnipInputNumber — Fix controlled modelValue not showing in the field until focus (display string now always syncs from the prop, including on mount).

0.0.43 ​

  • CatnipCounter — New catnip-counter count badge: appearances primary / secondary / disabled; sizes s / m / l; value prop. Catalogue docs and playground included.

0.0.42 ​

  • CatnipStatus — New catnip-status indicator (dot + label): intents neutral / informative / success / warning / danger / disabled / brand; appearances plain / filled; sizes m / l. Catalogue docs and playground included.
  • Floating panel — Reposition when the anchor resizes (e.g. multi-select chips wrapping to more/fewer rows) via ResizeObserver in useFloatingAnchor.
  • FloatingPanel — Ignore the shadow host on outside-click (avoids fighting the trigger toggle) and restore VueUse default capture.
  • CatnipDropdown / CatnipInputDate / CatnipInputPhone — Emit open-change for open state (replaces update:open, which Vue cannot listen to on custom elements). Always emitted on open/close. Use .open + @open-change.
  • Dependencies — Picks up @signicat/catnip-design-tokens@0.1.9.

CatnipDropdown ​

  • Fix list-header / list-footer slots in the teleported panel (reparent light-DOM content into the portal while open, same pattern as Tooltip).
  • Keep the border under the Select all row, and sync it into teleported list portal styles so it renders in the open panel.
  • Controlled open uses Tooltip-style null default and optimistic open state so the panel toggles even when the CE boolean open prop lags.

0.0.41 ​

  • CatnipAlert — New catnip-alert component with Toast, Banner, Inline, Inline inverse, and Text appearances; six semantic intents; M/L sizes; intent-mapped Catnip icons and custom icon/content slots; persistent or timed dismissal; viewport positioning; live-region announcement levels; tests, catalogue docs, and playground demos.

0.0.40 ​

  • CatnipGraphic — Breaking: remove --catnip-graphic-color / --catnip-graphic-accent-color. Color via --catnip-graphic-primary and --catnip-graphic-accent only (from :root tokens, or override on the host). Host no longer remaps primary to currentColor (that shadowed Brand 900).
  • CatnipTable — New structural catnip-table, catnip-table-row, and catnip-table-cell composition (M/L density via Catnip font/space tokens, striped body rows, sticky header with opaque surface, selected row chrome). Cell content is slotted; no typed cell catalog.
  • CatnipTableCell — Presentational header sort UI via sortable + activeSort (asc / desc); whole header cell is the hit target; icons sort / sort-up / sort-down; emits sort-click. Consumer owns sort state and data order.
  • Dependencies — Picks up @signicat/catnip-css@0.0.13.

Docs ​

  • Graphic overview / specs / guidelines and component-tokens page aligned with the two-token API.
  • Table catalogue pages (overview, specs, guidelines) with composition recipes for selection, sort, filters outside the header, caption/empty states, and more-actions menus. Playground preview matches the full composition demo. Badge / Avatar / Status called out as separate future primitives.

0.0.39 ​

  • CatnipGraphic — Host remaps --catnip-graphic-primary from color / --catnip-graphic-color so SVG var(--catnip-graphic-primary, currentColor) stays in sync with documented overrides.
  • Dependencies — Picks up @signicat/catnip-assets@0.0.13.

0.0.38 ​

  • CatnipGraphic — Consumes component tokens --catnip-graphic-primary / --catnip-graphic-accent (host overrides via color / --catnip-graphic-color and --catnip-graphic-accent / --catnip-graphic-accent-color).
  • Dependencies — Picks up @signicat/catnip-design-tokens@0.1.8 and @signicat/catnip-assets@0.0.12 (graphic tokens + tokenized illustration fills).

0.0.37 ​

  • CatnipButton — Main purpose uses component token --catnip-button-radius (default pill via design-tokens :root; EndUI / whitelabel overrides via data-theme="endui").
  • Dependencies — Picks up @signicat/catnip-design-tokens@0.1.7 (EndUI theme + component tokens).

0.0.36 ​

  • Docs — Dialog live preview opens through a demo button, keeps the isOpen control synchronized after internal dismissal, preserves explicit false values for default-enabled booleans such as showCloseButton, and leaves submit dismissal decisions to the consumer.

CatnipDialog ​

  • New catnip-dialog modal component with native <dialog> semantics, prop- or slot-based header/footer sections, CatnipButton footer actions, backdrop click/blur options, focus trap, Escape handling, focus restoration, and catalogue/playground docs.
  • Dismissal actions are fully controlled: close requests emit close-dialog and update:isOpen=false, then wait for the consumer to set isOpen=false before removing the dialog.
  • Uses the browser's native showModal() focus containment by default and keeps the custom Tab focus trap only for the non-modal fallback path.
  • closable=false now blocks Escape and backdrop dismissal; generated close and enabled cancel buttons remain explicit dismissal routes.

0.0.35 ​

  • Release — Version bump for publish. No component API changes vs 0.0.34.

0.0.34 ​

  • CatnipFileItem — New catnip-file-item row component for a single uploaded or processed file (ready, inProgress, done, warning, danger statuses; download, delete, cancel, retry, and dismiss actions; optional progress bar).

CatnipInputFile ​

  • New catnip-input-file drag-and-drop upload field with horizontal/vertical layouts, M/L sizes, inline danger presentation, native file input, form association, and a files slot for composing catnip-file-item rows.
  • Drop-zone copy is configurable via props and named slots (uploadLink, dragDrop, acceptHint, dragActive, errorTitle, errorHint).

Docs ​

  • File Input and File Item catalogue pages, playground configuration, and sidebar entries.
  • Split Button playground composition example with full keyboard navigation for consumer-rendered catnip-list menus (arrows, Home/End, Enter/Space, Escape, typeahead).

0.0.33 ​

  • Docs — Range Input catalogue pages and live playground configuration keep min, max, step, and modelValue synchronized.

CatnipRangeInput ​

  • New catnip-range-input field component with native range semantics, shared field label/supporting-text patterns, M/L Figma-aligned sizes, optional min/max labels, hover/focus/drag value tooltip, alwaysShowValueTooltip, exact-value input, form association, docs, and playground support.
  • min, max, and step normalize the selected value consistently across pointer, keyboard, and exact-value input interactions. Endpoint labels fall back to the current min / max values unless custom minLabel / maxLabel text is provided.
  • Validation copy remains consumer-owned: pass dynamic messages through supportingText and drive intent from the consumer. Danger/warning/success state is reflected in supporting text and the optional value input; the slider track and thumb remain neutral/primary.

0.0.32 ​

  • Dependencies — Version alignment with @signicat/catnip-design-tokens@0.1.6 and @signicat/catnip-css@0.0.12. No component source changes.

0.0.30 ​

  • CatnipRadio & CatnipRadioGroup — New radio and radio-group components (field label, options API, per-row validation, form association).
  • FieldSupportingText — Supporting-text lines can include an icon via the { text, icon?, intent? } object shape (used by Checkbox, Checklist, Radio, and RadioGroup).
  • CatnipCheckbox, CatnipToggle, CatnipRadio — Avoid false missing-label warnings on first paint (initialAssumeHasContent for default slot detection).
  • CatnipCheckbox — CheckboxControl hover selector fix and danger-state token alignment.

0.0.31 ​

  • Dependencies — Fix published dependency pins to @signicat/catnip-assets@0.0.11 ( countries/flags/svg export), @signicat/catnip-css@0.0.11, and @signicat/catnip-icons@0.0.14. Resolves npm hoisting @signicat/catnip-assets@0.0.10 when upgrading css without a direct assets dependency. No component source changes.

0.0.29 ​

  • CatnipDropdown — Opt-in select-all row for multi-select dropdowns (checkbox, indeterminate state, toggles visible enabled rows; with filterable, applies to filtered rows only).
  • CatnipInputDate — Restore show-actions for panel Clear / Submit row (independent of show-time).

0.0.28 ​

  • CatnipSplitButton — New catnip-split-button dual-action control: main button (click) plus suffix trigger (suffix-click) for consumer-rendered related action surfaces. Includes controlled open selected styling, default inactive/active suffix chevrons with suffixInactiveIcon / suffixActiveIcon slots, aria-controls / aria-haspopup hooks, appearances primary, secondary, ghost; sizes s, m, l; intent default / danger; loading and disabled states; docs and playground.
  • CatnipButton — Figma token alignment for utility appearance (hover/active borders, disabled background/content tokens, pressed background token).
  • CatnipChip — Figma token alignment for selected, selectable, and removable states (hover/pressed/focus, explicit heights per size, remove-button styling).
  • CatnipInput — Focus rings for primary and danger intents use existing border-*-focus tokens; warning and success keep content-*-strong for focus rings.
  • CatnipDropdownOption — Fix infinite syncRegistry() retry when an option is mounted outside catnip-dropdown (DEV warning instead).

0.0.27 ​

  • Breaking — catnip-illustration / CatnipIllustration renamed to catnip-graphic / CatnipGraphic. CSS variables --catnip-illustration-* → --catnip-graphic-*; prop-key export CATNIP_ILLUSTRATION_PROP_KEYS → CATNIP_GRAPHIC_PROP_KEYS. Docs moved from /components/illustration to /components/graphic.
  • CatnipInputPhone — New catnip-input-phone field component with country picker, preloaded country flags from @signicat/catnip-assets, browser-locale country defaulting, +-prefixed paste splitting, compact JSON form serialization, locale strings, test selectors, docs, and playground support.
  • CatnipChecklist — New catnip-checklist field control (options + modelValue, label, supporting text, role="group").
  • CatnipCheckbox — Visual alignment with Figma (radius, spacing, label weight, disabled/read-only checked states, hit target). Optional supporting-text below the option row for per-option errors; group label/copy remains on catnip-checklist.
  • CatnipListItem — Fix leading and trailing slot forwarding on the public catnip-list-item custom element by detecting named host slots before rendering the internal row slot templates.

CatnipInputDate ​

  • Range mode shows From / To segment labels above each trigger (override via startLabel / endLabel props or slots). Range placeholders use display-format hints instead of role names.
  • New catnip-input-date field component for single dates, date/time, and date ranges. Values stay canonical (YYYY-MM-DD or YYYY-MM-DDTHH:mm) while visible text can be changed with Day.js-style display formats. Includes floating calendar panel, range preview states, year selection, range-only maxRangeDays, optional inline clear button, optional Clear / Submit actions, locale strings, test selectors, docs, playground, and form-element registration.

0.0.26 ​

  • CatnipDropdown — New catnip-dropdown field component with teleported list panel, single/multi selection, keyboard navigation, and slot-first customization. Supply options via the options prop (plain { value, label, … } rows) or <catnip-dropdown-option> child elements (rich slots); options takes precedence when both are present. Multi-select displayMode: value, chips, count; overflow via maxVisibleChips. Filterable lists support built-in label search (filterable, filterLocally) or parent-controlled filtering.
  • CatnipCheckbox — New catnip-checkbox form control (sizes m / l, checked, indeterminate, disabled, read-only, danger). Shared CheckboxControl primitive also powers multi-select rows in catnip-dropdown lists.
  • CatnipFieldLabel — New public catnip-field-label custom element for labelling custom controls (native elements, third-party widgets). Same API as the label row embedded in Input, Number Input, and Chip Input; composite inputs unchanged.
  • CatnipInputChip — Draft line API: default embedded catnip-input uses internal draft with setDraftValue() (set/reset) and optional update:draftValue (observe). draftValue prop is ignored on the default path. draftInput slot: parent binds .draftValue; Add commits that value; parent clears after update:modelValue. catnipInput applies to the default draft input only.
  • Testing — pnpm run test in @signicat/catnip-components (Vitest) for dropdown value, entries, registry, filter keyboard, and listbox helpers.

0.0.25 ​

  • CatnipInputNumber — Fix stepper + / − not incrementing past the first step when the field is focused (blur-before-click on nested stepper buttons; stale modelValue from the parent resetting the value). Stepper clicks use @mousedown.capture.prevent to keep focus on the input; ignore stale parent null while a numeric value is active; commit blur from the live input value.
  • Docs — ComponentPlayground fixes modelValue sync for catnip-input-number: bridge pending value through prop sync, avoid re-applying config null over a live value, set host .modelValue before removing the attribute.

0.0.24 ​

  • CatnipInputNumber — Stepper buttons use appearance="tertiary" and purpose="utility" (was hierarchy="tertiary").
  • Docs — Button overview, specs, and playground updated for appearance, purpose, intent, selected, and utility constraints. Chip Input docs and cross-links updated for the rename.

CatnipButton ​

  • Breaking — Rename prop hierarchy → appearance with values primary, secondary, ghost, and tertiary. Rename shape → purpose with values main (was rounded) and utility (was squared). Rename intent value neutral → default. Former tertiary (label-only) styling is now ghost; tertiary is utility-only and uses a neutral subtle fill (no border in default states).
  • appearance="tertiary" with purpose="main" coerces to primary (dev warning). intent="danger" is only supported with appearance primary or ghost; other combinations coerce to primary + danger (dev warning). size="xs" requires purpose="utility"; otherwise renders as s (dev warning).
  • New selected prop (purpose="utility" only; ignored otherwise with dev warning). Sets aria-pressed="true" and catnip-button--selected. Primary selected: strong-pressed fill with on-primary text. Secondary, ghost, and tertiary selected: primary subtle fill, primary strong border, primary strong text.
  • Tertiary utility styles aligned with Figma: background-neutral-subtle / -hover / -pressed, focus ring without inset border, disabled background-disabled-subtler + content-disabled-strong.

CatnipInputChip ​

  • Breaking — Rename from Tag Input: custom element catnip-input-chip (was catnip-input-tag), component CatnipInputChip, props minChips / maxChips / maxVisibleChips (was minTags / maxTags / maxVisibleTags), locale keys inputChip.*, test selector chips, export CATNIP_INPUT_CHIP_PROP_KEYS (was CATNIP_INPUT_TAG_PROP_KEYS). Docs catalogue path input-chip.
  • Show-more / show-less controls use appearance="ghost" (was tertiary).

0.0.23 ​

  • CatnipInputNumber — New catnip-input-number custom element for a single numeric value with trailing − / + steppers (CatnipButton, tertiary). modelValue is number | null (empty field → null; placeholder is display-only). min / max clamp on commit; step (default 1) drives steppers, Arrow Up / Arrow Down, and max fractional precision (e.g. 0.01 → two decimals, rounded on blur and after stepping). Optional digit grouping via separateAt, separator (,**, **.**, space), and **decimalSeparator**; grouping applies on blur and after steppers while the emitted value stays unformatted. **role="spinbutton"** with **aria-valuenow** / **min** / **max**; stepper labels from locales **inputNumber.decrement** / **inputNumber.increment**. Same integrated label and supporting-text patterns as **CatnipInput** (**label**, **label.action**, **label.suffix** slots). Test selectors: **root**, **control**, **decrementButton**, **incrementButton**, **supportingText`.
  • Prop-key exports — Every CE component now exports a CATNIP_<NAME>_PROP_KEYS array from its *.types.ts (built from defaultProps): CATNIP_BUTTON_PROP_KEYS, CATNIP_INPUT_PROP_KEYS (full label + control surface; CATNIP_INPUT_CONTROL_PROP_KEYS still ships for draft-only forwarding), CATNIP_INPUT_NUMBER_PROP_KEYS, CATNIP_INPUT_TAG_PROP_KEYS, CATNIP_CHIP_PROP_KEYS, CATNIP_ICON_PROP_KEYS, CATNIP_LINK_PROP_KEYS, CATNIP_TOGGLE_PROP_KEYS, CATNIP_TOOLTIP_PROP_KEYS, CATNIP_DIVIDER_PROP_KEYS, CATNIP_TABS_PROP_KEYS, CATNIP_ILLUSTRATION_PROP_KEYS, CATNIP_SPINNER_PROP_KEYS. Pair with mergeProps for composed-parent forwarding.
  • CatnipInput / CatnipInputChip — Label row exposes label, label.action, and label.suffix slots, matching the <child>.<slot> namespace convention used for nested forwarding.
  • CatnipChip (breaking) — Icon slots renamed leadingIconSlot → leftIconSlot and trailingIconSlot → rightIconSlot to match CatnipButton. Default-slot warn no longer relies on a setTimeout(100); uses nextTick + a direct assignedNodes read.
  • Test selectors — testSelectors type widened from Record<string, string> | string to a recursive TestSelectorTree | string; existing flat selector maps keep working. Composed hosts may forward a child’s testSelectors via a nested object (for example { catnipInput: { leftAdornment: 'x' } } on catnip-input-chip). New asForwardedSelectors(value) helper from useTestSelectors: string → { root: string }, object → as-is.
  • Composables — New useCeSlots (renamed from useCeSlotPresence) collects useTrackedNamedSlots, useHostNamedSlotPresence (host-light-DOM MutationObserver), useDefaultSlotContentPresence, and useDefaultSlotJoinedText. Replaces ad-hoc slotchange wiring across CatnipButton, CatnipChip, CatnipToggle, and CatnipTooltip, and fixes a memory leak / flicker in CatnipInputChip that came from conditionally-rendered slots feeding useSlots().
  • Internal restructure — Renamed under src/components/_internal/: CatnipField/ → Field/, CatnipFieldLabel/ → FieldLabel/, CatnipFieldSupportingText/ → FieldSupportingText/. FieldLabel detects action / suffix through reactive useSlots() (parents conditionally render the named templates), so the old @slotchange + hasActionSlot dance is gone.
  • Docs — New Inputs overview groups shared Input, Number Input, and Chip Input behaviour. Catalogue docs and playground for catnip-input-number (overview, specs, guidelines). Component API → Test selectors adds a Multiple subcomponents of the same type subsection covering role-based keys, repeated children, and nested forwarding; Input, Number Input, Chip Input, Tabs, Configuration, Inputs overview, and Contributing cross-link to it.
  • Docs build — New apps/docs/scripts/clean-dist.js runs before pnpm run prebuild in apps/docs so stale playground assets are cleared on rebuild.

Helpers ​

  • New numberFormat module (formatGroupedNumber, parseGroupedNumber, clampNumber, getDecimalPlacesFromStep, etc.) shared by CatnipInputNumber display and parsing.
  • New generic mergeProps<T>(source, overrides, keys, { guardedKeys }) replaces catnipFieldLabelBind / catnipInputControlBind. Components export their own prop-key lists (FIELD_LABEL_PROP_KEYS / FIELD_LABEL_GUARDED_KEYS, CATNIP_INPUT_CONTROL_PROP_KEYS) so call-sites stay flat.

CatnipInputChip ​

  • Draft-input configuration forwards through a nested catnipInput prop (for example .catnipInput="{ placeholder: 'Add a tag', leftIcon: 'search', showClearButton: true }"). The tag reserves modelValue, type, hideLabel, name, and supportingText on the embedded input so chips, Add, supporting text, and the draft line stay aligned. size, intent, disabled, readonly, and required stay top-level.
  • Add-button configuration forwards through a nested addButton prop (same pattern as catnipInput). The tag reserves type, disabled, and size; everything else on CatnipButtonProps (hierarchy, shape, leftIcon, rightIcon, intent, ariaLabel, loading, name, value, form, autofocus, testSelectors) forwards as-is, plus a synthetic label for the button's visible text.
  • maxVisibleTags collapses long chip lists behind a tertiary Show n more button; expanded view shows Show less. Labels come from new locales inputChip.showMore (with {count} placeholder) and inputChip.showLess and are overridable via show-more-tags-label / show-less-tags-label.
  • Draft-input slots forward as catnipInput.leftIconSlot / catnipInput.rightIconSlot (same namespace as the prop).
  • Test-selector keys extended with addButton, showMoreButton, showLessButton, and catnipInput. addButton / showMoreButton / showLessButton accept either a string shorthand or a full CatnipButton selectors object; catnipInput is forwarded as the embedded <catnip-input>’s own testSelectors and deep-merged with that component’s defaults.

0.0.22 ​

  • Design tokens — Focus-visible box-shadow stacks use --catnip-shadow-focus-default / --catnip-shadow-focus-danger. CatnipTooltip / CatnipTabs portaled surfaces use --catnip-shadow-elevation-3.
  • Colors — Invalid --catnip-color-content-disabled-disabled replaced with --catnip-color-content-on-disabled on CatnipButton; disabled primary background uses --catnip-color-background-disabled-stronger.

0.0.21 ​

  • Dependencies — Uses @signicat/catnip-design-tokens@0.1.5 and @signicat/catnip-css@0.0.9 from the workspace (shadow tokens and shadow utility variables). No source changes under src/ vs 0.0.20.

0.0.20 ​

  • Patch release; no changes under src/ vs 0.0.19 (republish / version alignment).

0.0.19 ​

  • CatnipButton — :host([disabled]) sets cursor: not-allowed and pointer-events: none so the custom element matches disabled native-button behavior.

0.0.18 ​

  • CatnipTooltip — optional show-on-focus / showOnFocus (default true). When trigger="hover" and set to false, the tooltip follows hover only (pointer leave hides it even if the anchor stays focused). Tooltip specs updated.

0.0.17 ​

  • CatnipTooltip — new size="s" (compact padding, --catnip-font-paragraph-s, smaller arrow). size options are s, m, l.

0.0.16 ​

CatnipTooltip ​

  • Breaking — alignment accepts start, center, and end only (replaces near, middle, and far). Default center. Values map to floating cross-axis placement relative to the anchor.
  • Default maxWidth is 320px; pass an empty string to drop the cap.
  • :host line-height: 0 so inherited page line-height does not stretch the custom element’s box around small triggers.

0.0.15 ​

  • Shared styles — Removed custom ::-webkit-scrollbar rules; :host default text color uses --catnip-color-content-neutral-strongest (with hex fallback).
  • Dependencies — @signicat/catnip-design-tokens@0.1.3 (base space scale source file renamed to space.json; emitted --catnip-space-* unchanged).

0.0.14 ​

  • CatnipButton — semantic danger styling uses --catnip-color-*-danger-* CSS variables (renamed from *-negative-*) to match @signicat/catnip-design-tokens@0.1.2.
  • Playground — vanilla demo text color fallback updated to the danger token name.

0.0.13 ​

  • CatnipTooltip — outside-click close uses VueUse onClickOutside instead of a manual document pointerdown listener.
  • Dependencies — removed unused click-outside-vue3.
  • Docs — tabs page and playgrounds aligned with button-only tabs; component catalogue tabs navigate with VitePress useRouter().go.

CatnipTabs ​

  • Breaking — Tabs are buttons only; href removed from items and menu rows (legacy href keys in JSON are ignored when normalizing). Use @update:modelValue and your router for SPA-style navigation and URLs. role="tablist" when there is at least one item.
  • Optional menu on a tab (dropdown rows); dismiss via VueUse onClickOutside; testSelectors extended with tab, menuTrigger, menuRow (plus existing menu); Escape and post-selection focus return to the menu trigger; trailing chevron rotates when the menu is open; aria-haspopup="menu" on the menu trigger.

0.0.12 ​

  • CatnipLink — optional underline prop (false removes underline; useful for card-style or icon-only links).
  • Styling — SCSS across components uses Catnip design token CSS variables with semantic-first hex fallbacks (buttons, chip, link, divider, spinner, illustration, toggle, tooltip, shared scrollbar helpers).
  • Charts — default Chart.js colors resolved from @signicat/catnip-design-tokens/js.
  • Docs — package CHANGELOG.md; audit notes in COLOR_TOKEN_AUDIT.md.
  • Uses @signicat/catnip-design-tokens from the workspace (CSS variables and optional /js color constants, e.g. for charts).

0.0.11 ​

  • CatnipSelect — behaviour updates.
  • CatnipButton — SCSS adjustments.
  • CatnipChip — types, docs, playground, and catalogue/registry alignment.
  • CatnipToggle — small bugfix.
  • Manifest — custom-elements manifest updates for downstream tooling (including React wrappers).
  • Picks up @signicat/catnip-css@0.0.5 and @signicat/catnip-design-tokens@0.1.0.

0.0.10 ​

  • CatnipToggle — catnip-toggle switch (form-associated, model-value / update:modelValue); reset + tick-filled icons; transparent thumb; 1px inset from track border; removed separate change event.
  • CatnipLink — catnip-link component and docs.
  • Docs / playground — ComponentPlayground two-way modelValue for toggle; full icon list for button (and icon) demos.
  • Picks up @signicat/catnip-assets@0.0.8 and @signicat/catnip-icons@0.0.11 (SVG updates).

0.0.9 ​

  • CatnipChip (catnip-chip) — removable or selectable chip; sizes xs–l; leading icon prop and leftIconSlot / default / rightIconSlot; remove event in removable mode; testSelectors; remove button aria-label uses default-slot text (including wrapped elements).
  • CatnipButton — catnipButtonEvents dropped from type exports (docs metadata only); use native click on the element.

0.0.8 ​

  • Breaking — Removed @signicat/catnip-components/standalone from npm. The IIFE catnip-components.standalone.js is built with pnpm run build:standalone and omitted from package.json files; use static/CDN hosting (CI still builds it for GCS). Smaller npm install for bundler-based apps.
  • Build — ES/UMD treat @signicat/catnip-assets/illustrations/svg and @signicat/catnip-icons/svg as external so illustration and icon lazy chunks stay in those packages instead of being copied into components/dist.
  • CatnipIllustration — illustrations and pictograms under illustrations/ (e.g. pictograms/…); appearance via design tokens / CSS on the host; loadIllustration(name); optional width / height (0 = derive from viewBox); --catnip-illustration-* / --catnip-pictogram-accent
  • Removed CatnipPictogram — use catnip-illustration with pictograms/… names instead
  • CatnipDivider — horizontal/vertical divider with size, shape, variant, and testSelectors
  • Web Components with ElementInternals form integration

0.0.7 ​

  • Monorepo — Storybook removed (apps/storybook, *.stories.js, docs embed). Interactive examples use VitePress ComponentPlayground and /playground only.

0.0.6 ​

  • testSelectors prop — Override data-test attributes for testing. Use useTestSelectors composable; defaults per component in Test Selectors docs
  • Standalone bundle — CDN consumers get Vue bundled; no need to import Vue separately
  • Vue peer dependency — Vue moved from dependencies to peerDependencies (^3.5.0) to avoid duplicate runtime in Vue apps
  • SSR fix — _setAttr override re-runs type conversion on every attribute change, fixing post-mount setAttribute for SSR
  • Dynamic icon import — Icons loaded via dynamic import
  • Standalone build — Playground excluded from standalone bundle; improved assetFileNames typing
  • Documentation — Slots and Test Selectors sections in component docs; Props table shows type (not options); Options column for enumerated props

0.0.5 ​

  • VitePress docs integration
  • Component docs updates

0.0.4 ​

  • CatnipButton, CatnipIcon, CatnipSpinner, CatnipTooltip
  • Style injection via adoptedStyleSheets
  • Automatic type conversion for props

@signicat/catnip-design-tokens ​

Unreleased ​

1.0.7 ​

  • Native browser color scheme — The default and dark CSS themes now declare color-scheme: light and color-scheme: dark. Native controls and browser autofill inside Catnip shadow roots therefore follow the active Catnip theme instead of using a light autofill surface in dark mode.

1.0.6 ​

  • Neutral border hover colors — border/neutral/subtlest-hover now maps to Steel 200, and border/neutral/subtler-hover now maps to Steel 300 instead of Brand colors.

1.0.5 ​

  • Themes — Dark and EndUI rules now match one word of data-theme ([data-theme~='dark'], [data-theme~='endui']), so data-theme="endui dark" gives dark EndUI on <html> or a wrapper. Single values work as before.
  • EndUI scoped theme — css/endui-scoped moves the re-declared dependent tokens into a :where([data-theme~='endui']) rule. It adds no specificity, so dark values win on an endui dark wrapper whatever the stylesheet order.

1.0.4 ​

  • Semantic data colors — Dark-theme --catnip-color-data-1 now maps to Purple 300 and --catnip-color-data-4 maps to Blue 300 for contrast with inverse avatar text.

1.0.3 ​

  • Graphic dark theme — --catnip-graphic-primary is Brand 100 and --catnip-graphic-accent is Brand 600 under [data-theme="dark"] (new component/graphic.dark.json). Light and EndUI values are unchanged.

1.0.2 ​

  • Primitive colors (breaking) — Renames the accent-green scale to mint (--catnip-color-mint-*, CatnipColorMint*). Semantic --catnip-color-accent-300 still aliases Mint 300 by default (Steel 200 in EndUI). Chart --catnip-color-data-2 still uses that scale (Mint 900 light, Mint 600 dark).
  • EndUI scoped theme — New css/endui-scoped export. Same [data-theme='endui'] rule as css/endui, plus the custom properties that reference those overrides, so a wrapper data-theme="endui" recomputes primary content, background, border, and the default focus ring. css/endui stays the html-level file.
  • Accent color — New --catnip-color-accent-300, aliased to Accent-Green 300 by default and Steel 200 under data-theme="endui". --catnip-graphic-accent references it, so illustration accents follow the theme.
  • Semantic colors — Adds --catnip-color-content-danger-strong-hover (default Red 800, dark Red 300).
  • Hero tokens — --catnip-hero-primary (Brand 900), --catnip-hero-accent (Accent 300), and --catnip-hero-stroke (white). Light and dark share these values. EndUI follows the brand and accent remaps.

1.0.1 ​

  • Semantic colors — Adds neutral strong pressed border and disabled subtle content tokens for Toggle interaction states in default and dark themes.

1.0.0 ​

  • Stable — First 1.0 (soft) release. Version aligned with the other Catnip packages.

0.1.12 ​

  • Semantic colors — Adds --catnip-color-border-danger-strong-hover for danger radio hover borders (light Red 700, dark Red 300).

0.1.11 ​

  • Semantic colors — --catnip-color-background-warning-subtle-hover: light Orange 100, dark Orange 950.

0.1.10 ​

  • Component tokens — --catnip-logo-background (Brand 900) and --catnip-logo-content (white) for Signicat lockup theming. Override on an ancestor for on-brand surfaces (e.g. navbar knockout).

0.1.9 ​

  • Semantic data colors — Synced --catnip-color-data-1…8 light/dark mappings with Figma (light: purple/500, accent-green/900, red/600, blue/500, orange/700, purple/800, green/950, red/900; dark: purple/400, accent-green/600, red/300, blue/400, orange/300, purple/200, green/100, red/50).
  • Exports — ./css/default.css, ./css/dark.css, and ./css/endui.css aliases so CSS @imports with a .css extension resolve (used by @signicat/catnip-css npm passthrough).

0.1.8 ​

  • Component tokens — --catnip-graphic-primary (Brand 900) and --catnip-graphic-accent (Accent-Green-300) for illustration / catnip-graphic theming. EndUI sets --catnip-graphic-accent to Steel 50.

0.1.7 ​

  • EndUI (whitelabel) theme — New css/endui / js/endui exports; activate with data-theme="endui". Remaps color.brand.* to the blue palette and sets --catnip-button-radius to radius.s (squared main buttons). Opt-in import from the tokens package (not bundled in @signicat/catnip-css).
  • Component tokens — New src/tokens/component/ layer; first token --catnip-button-radius defaults to radius.round on :root.

0.1.6 ​

  • Typography — Code presets (--catnip-font-code-*, CatnipFontCode*, .catnip-font-code-*) use a monospace stack via new --catnip-font-family-code (was Inter via --catnip-font-family-default).

0.1.5 ​

  • Shadows (breaking vs. 0.1.4) — Elevation names and variables use elevation-1…elevation-4 (--catnip-shadow-elevation-1, CatnipShadowElevation1, …) instead of zero-padded elevation-01….
  • Docs — Package README shadow section; design-tokens CHANGELOG.md in the npm tarball.

0.1.4 ​

  • Shadow tokens — New semantic/shadow.json: elevation-1…elevation-4, focus-default, focus-danger, shipped as --catnip-shadow-* and CatnipShadow* JS exports (values aligned with Figma).

0.1.3 ​

  • Source layout — Renamed src/tokens/base/spacing.json → space.json for the base space scale. The space token tree and generated --catnip-space-* CSS variables and JS exports are unchanged.

0.1.2 ​

  • Semantic colors (breaking) — Aligned with Figma Light/Dark exports: negative → danger, positive → success, notice → warning in token paths (CSS variables and JS exports).
  • content.on.disabled — Replaces the old content.disabled.disabled slot; background.disabled.subtler, background.neutral.strong, border.primary.focus, and border.danger.focus added.
  • data — Light chart colors updated to match Figma; dark theme now defines data tokens instead of inheriting light values.
  • Docs — Semantic colors and design-tokens README updated for the new naming and data dark overrides.

0.1.1 ​

  • TypeScript — Generated default.d.ts / dark.d.ts for JS token exports; package types and conditional exports so subpath imports resolve for editors and tsc.

0.1.0 ​

  • Restructured semantic tokens (consolidated semantic/color and semantic/color.dark); removed superseded semantic token sources.
  • Refreshed base color, spacing, border, and shadow inputs; streamlined typography JSON and expanded font-related tokens.
  • Token build pipeline updates (including typography build).

0.0.8 ​

  • Base and semantic tokens
  • Light and dark themes
  • CSS variables and JS exports

@signicat/catnip-css ​

Unreleased ​

1.0.8 ​

  • Dependencies — Rebuilds the bundled token CSS against @signicat/catnip-design-tokens@1.0.7, so native controls and browser autofill inherit the active Catnip light or dark color scheme.

1.0.7 ​

  • Dependencies — Rebuilds the bundled token CSS against @signicat/catnip-design-tokens@1.0.6, updating the neutral subtlest/subtler hover borders to Steel 200/300.

1.0.6 ​

  • Dependencies — Rebuilds the bundled token CSS against @signicat/catnip-design-tokens@1.0.5 (dark rules match [data-theme~='dark'], so data-theme="endui dark" also applies dark values).

1.0.5 ​

  • Dependencies — Rebuilds the bundled token CSS against @signicat/catnip-design-tokens@1.0.4 (dark --catnip-color-data-1 / --catnip-color-data-4).

1.0.4 ​

  • Dependencies — Rebuilds the bundled token CSS against @signicat/catnip-design-tokens@1.0.3 (dark --catnip-graphic-* values).

1.0.3 ​

  • Dependencies — Rebuilds the bundled token CSS against @signicat/catnip-design-tokens@1.0.2 (--catnip-color-accent-300, --catnip-color-content-danger-strong-hover, --catnip-hero-*) and @signicat/catnip-assets@1.0.3.

1.0.2 ​

  • Dependencies — Rebuilds against @signicat/catnip-assets@1.0.2 and @signicat/catnip-icons@1.0.2.

1.0.1 ​

  • Icon CSS — The historical 24px default now targets only <i> elements with a .catnip-icon--* glyph class. Plain semantic <i> text inherits the surrounding typography instead of being enlarged.
  • Dependencies — Rebuilds against @signicat/catnip-assets@1.0.1, @signicat/catnip-design-tokens@1.0.1, and @signicat/catnip-icons@1.0.1.

1.0.0 ​

  • Stable — First 1.0 (soft) release. Version aligned with the other Catnip packages.
  • Dependencies — Picks up @signicat/catnip-icons@1.0.0 and @signicat/catnip-design-tokens@1.0.0.

0.0.17 ​

  • Dependencies — Rebuilds the bundled token CSS with @signicat/catnip-design-tokens@0.1.12 (--catnip-color-border-danger-strong-hover).

0.0.16 ​

  • Dependencies — Picks up @signicat/catnip-icons@0.0.16 (updated book glyph in the CDN icon font).

0.0.15 ​

  • Dependencies — Picks up @signicat/catnip-design-tokens@0.1.11 (--catnip-color-background-warning-subtle-hover).

0.0.14 ​

  • Dependencies — Picks up @signicat/catnip-design-tokens@0.1.10 (logo component tokens --catnip-logo-background / --catnip-logo-content) and @signicat/catnip-assets@0.0.14.

0.0.13 ​

  • Build / CDN — Dual stylesheet output: npm styles.npm.css keeps @import for @signicat/catnip-design-tokens (default + dark) and @signicat/catnip-icons, plus Inter via url("@signicat/catnip-assets/fonts/inter/…") (no font files in the css tarball). CDN styles.css inlines tokens + icon webfont CSS, rewrites Inter to ./fonts/inter/…, and ships icon + Inter font files under dist/ for GCS upload.
  • Docs — CDN css/…/styles.css is self-contained; npm consumers resolve tokens/icons/Inter through package dependencies.

0.0.12 ​

  • Dependencies — Rebuilt dist/styles.css with @signicat/catnip-design-tokens@0.1.6 (code typography uses --catnip-font-family-code).

0.0.11 ​

  • Dependencies — Version alignment with @signicat/catnip-assets@0.0.11 and @signicat/catnip-icons@0.0.14.

0.0.10 ​

  • Patch release; dependency alignment with @signicat/catnip-assets@0.0.10 and @signicat/catnip-icons@0.0.13.

0.0.9 ​

  • Shadow utilities — .catnip-shadow--* and legacy .shadow--* use --catnip-shadow-elevation-* and --catnip-shadow-focus-* from @signicat/catnip-design-tokens. .shadow--popup-modal fixed to use design-token variables (no --catnip-box-shadow-pop-up).
  • Docs — CHANGELOG.md in the npm tarball.

0.0.8 ​

  • Patch release; no changes under packages/css/styles/ vs 0.0.7 (republish / version alignment).

0.0.7 ​

  • Patch release; no changes under packages/css/styles/ vs 0.0.6 (republish / version alignment).

0.0.6 ​

  • Rebuilt dist/styles.css so :root includes the full --catnip-space-* scale from @signicat/catnip-design-tokens (spacing utilities depend on these variables).

0.0.5 ​

  • Semantic typography and spacing SCSS (and optional backwards-compatibility layer) aligned with @signicat/catnip-design-tokens@0.1.0.

@signicat/catnip-components-react ​

Unreleased ​

1.2.4 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.2.4. No wrapper API changes.

1.2.3 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.2.3. No wrapper API changes.

1.2.2 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.2.2. No wrapper API changes.

1.2.1 ​

  • Generated wrapper props — Regenerated wrappers expose the component-qualified custom-element prop names, including alertTitle, buttonAriaLabel, dialogRole, inputId, and the rest of the native-collision rename documented in Component API — Deprecated prop names. Ordinary React DOM props still target the custom-element host.
  • Deprecated: previous prop names — Old names that are not React DOM props (ariaLabel, autofocus, spellcheck, ariaCurrent, ariaValueText) stay typed as @deprecated and are copied to the replacement prop while it is unset.

1.2.0 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.2.0. No wrapper API changes.

1.1.9 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.1.9. No wrapper API changes.

1.1.8 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.1.8. No wrapper API changes.

1.1.7 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.1.7. No wrapper API changes.

1.1.6 ​

  • CatnipDialog — Adds the layout and semantic intent wrapper props and removes the deprecated centeredHeader prop.
  • Dependencies — Aligns with @signicat/catnip-components@1.1.6. No wrapper API changes.

1.1.5 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.1.5. No wrapper API changes.

1.1.4 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.1.4. No wrapper API changes.

1.1.3 ​

  • CatnipDropdown — Adds the onClear handler for the new clear event.
  • Dependencies — Aligns with @signicat/catnip-components@1.1.3.

1.1.2 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.1.2. No wrapper API changes.

1.1.1 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.1.1. No wrapper API changes.

1.1.0 ​

  • CatnipSkeleton — Generated wrapper for the new catnip-skeleton component.
  • Dependencies — Aligns with @signicat/catnip-components@1.1.0.

1.0.11 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.0.11.

1.0.10 ​

  • CatnipCounter — Generated wrapper narrows appearance to primary / secondary and adds the boolean disabled property.
  • CatnipFieldLabel (breaking) — Generated wrapper narrows size to m / l.
  • CatnipSpinner (breaking) — Generated wrapper replaces subtle with arc (quarter / three-quarter) and inverse.
  • Dependencies — Aligns with @signicat/catnip-components@1.0.10.

1.0.9 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.0.9. No wrapper API changes.

1.0.8 ​

  • Dependencies — Aligns with @signicat/catnip-components@1.0.8. No wrapper API changes.

1.0.7 ​

  • CatnipToast — Generated React wrapper for catnip-toast. CatnipAlert wrappers drop the toast appearance and overlay duration/position props. Aligns with @signicat/catnip-components@1.0.7.

1.0.6 ​

  • Generated wrappers — Aligns with @signicat/catnip-components@1.0.6, including File Item showDownload and showDelete.
  • Package — Ships SKILL.md (copied from @signicat/catnip-components) as @signicat/catnip-components-react/SKILL.md.

1.0.5 ​

  • Generated wrappers — Aligns with @signicat/catnip-components@1.0.5, including Dropdown listMaxWidth and Input Date value / trigger slots.

1.0.4 ​

  • Generated wrappers — Aligns with @signicat/catnip-components@1.0.4, including the M/L-only Range Input and Toggle Group APIs, per-option Toggle Group icons, the Toggle readonly prop, and the narrowed CatnipInputFile neutral / danger intent API.

1.0.3 ​

  • Generated prop types — React wrappers preserve the component-specific literal unions produced from shared Catnip value types, keeping unsupported values out of TypeScript autocomplete and compile-time APIs.
  • Build verification — Wrapper generation now verifies representative narrowed unions so future shared-type changes cannot silently widen React component props.

1.0.2 ​

  • React host props — Wrappers map idiomatic className to the custom element's real class attribute and preserve React style; the old class prop remains as a deprecated compatibility alias.
  • SSR — The default entry is safe to import during server rendering. Browser registration is guarded and exposed as catnipComponentsReady; property assignment waits for custom-element upgrade so pre-upgrade object/array props cannot shadow accessors.
  • Micro-frontends — New @signicat/catnip-components-react/wrappers entry exports wrappers without importing or registering another Catnip component runtime, so the shell can remain the single version owner.
  • Events — New parseCatnipEventDetail helper unwraps both direct CustomEvent.detail values and Vue custom-element one-argument arrays.
  • Quality and docs — Runtime tests cover classes, inline styles, property assignment, late upgrades, events, refs, and event detail; build verification checks SSR imports/rendering. The React guide now documents installation, props, controlled state, events, slots, refs, SSR, micro-frontends, TypeScript, and troubleshooting.

1.0.1 ​

  • Dependencies — Version alignment with @signicat/catnip-components@1.0.1; generated wrapper APIs are unchanged.

1.0.0 ​

  • Stable — First 1.0 (soft) release. Version aligned with @signicat/catnip-components@1.0.0.
  • CatnipDialog — Wrapper drops generated footer button props and dialog-cancel / dialog-submit. Footer is the footer slot.

0.0.60 ​

  • CatnipStatus — Wrapper drops appearance. Use filled for the pill.
  • CatnipBadge — Wrapper appearance is subtle / strong.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.60.

0.0.59 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.59; generated wrapper APIs are unchanged.

0.0.58 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.58; generated wrapper APIs are unchanged.

0.0.57 ​

  • CatnipStatus — Wrapper picks up leftIcon and ariaLabel for icon and icon-only status.
  • CatnipBadge — Wrapper picks up ariaLabel for icon-only badge.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.57.

0.0.56 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.56.

0.0.55 ​

  • Slots — Wrappers pick up List item / dropdown option left / right, Dialog/Drawer header / footer, Dropdown listHeader / listFooter, Alert leftIcon / leftIconSlot, and File Item leftIconSlot.
  • Naming — Wrappers pick up Date panelOrientation, Stepper/File orientation, Divider orientation / appearance, Dialog/Drawer backdropBlur, Drawer close-drawer / after-drawer-close, Input right-icon-click, Range showValueTooltip, Card href, and Split Button/Tooltip open-change.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.55.

0.0.54 ​

  • CatnipCard / CatnipUser — Wrappers pick up the interactive boolean (replaces Card behavior and User interaction="static" | "expandable" | "clickable"). User interaction is now click | expand when interactive.
  • CatnipTooltip / CatnipInputDate — Wrappers pick up Tooltip placement (replaces position) and Date Input panelPlacement.
  • Naming — Wrappers pick up Dialog/Drawer open / update:open, Alert showCloseButton, Chip leftIcon, Toggle Group appearance, Stepper layout / activeStep, and Tooltip/Spinner subtle.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.54.

0.0.53 ​

  • CatnipInputDate — Regenerated React wrapper for date picker v2 (showPresets, calendarLayout, placement, panelAlign, combined range trigger).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.53.

0.0.52 ​

  • CatnipLink — Regenerated React wrapper for the Figma Link appearances, sizes, and icon props.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.52.

0.0.51 ​

  • CatnipCard — Generated React wrapper for catnip-card.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.51.

0.0.50 ​

  • CatnipStepper — Generated React wrapper for catnip-stepper.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.50.

0.0.49 ​

  • CatnipProgress — Generated React wrapper for catnip-progress.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.49.

0.0.48 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.48.

0.0.47 ​

  • CatnipUser — Generated React wrapper for catnip-user.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.47.

0.0.46 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.46.

0.0.45 ​

  • CatnipBadge — Generated React wrapper for catnip-badge.
  • CatnipDrawer — Generated React wrapper for catnip-drawer.
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.45.

0.0.44 ​

  • CatnipPagination — Generated React wrapper for catnip-pagination (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.44.

0.0.43 ​

  • CatnipCounter — Generated React wrapper for catnip-counter (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.43.

0.0.42 ​

  • CatnipStatus — Generated React wrapper for catnip-status (regenerated from the custom-elements manifest).
  • CatnipDropdown / CatnipInputDate / CatnipInputPhone — Regenerated wrappers for open-change (replaces update:open).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.42.

0.0.41 ​

  • CatnipAlert — Generated React wrapper for catnip-alert (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.41.

0.0.40 ​

  • CatnipTable, CatnipTableRow, CatnipTableCell — Generated React wrappers for catnip-table, catnip-table-row, and catnip-table-cell (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.40.

0.0.39 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.39.

0.0.38 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.38.

0.0.36 ​

  • CatnipDialog — Generated React wrapper for catnip-dialog (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.36.

0.0.35 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.35.

0.0.34 ​

  • CatnipInputFile & CatnipFileItem — Generated React wrappers for catnip-input-file and catnip-file-item (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.34.

0.0.33 ​

  • CatnipRangeInput — Generated React wrapper for catnip-range-input (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.33.

0.0.32 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.32.

0.0.31 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.31.

0.0.30 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.30 and updated custom element wrappers.

0.0.28 ​

  • CatnipSplitButton — Generated React wrapper for catnip-split-button (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.28.

0.0.27 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.27.

0.0.26 ​

  • CatnipDropdown / CatnipCheckbox — Generated React wrappers for catnip-dropdown, catnip-dropdown-option, and catnip-checkbox (regenerated from the custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.26.

0.0.25 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.25.

0.0.24 ​

  • CatnipInputChip — Generated CatnipInputChip wrapper replaces CatnipInputTag (catnip-input-chip element).
  • CatnipButton — React props reflect appearance, purpose, intent (default / danger), and selected (wrappers regenerated from the updated custom-elements manifest).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.24.

0.0.23 ​

  • CatnipInputNumber — Generated CatnipInputNumber React wrapper (same catnip-input-number element and events as other inputs).
  • Dependencies — Version alignment with @signicat/catnip-components@0.0.23 (wrappers regenerated from the updated custom-elements manifest).

0.0.22 ​

  • Versioning — @signicat/catnip-components-react now uses the same version as @signicat/catnip-components (install both at 0.0.22). Wrapper code unchanged vs 0.0.5.

0.0.5 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.22 (no wrapper API changes). Superseded for install naming by 0.0.22.

0.0.4 ​

  • Dependencies — Version alignment with @signicat/catnip-components@0.0.21 (no wrapper API changes).

0.0.3 ​

  • Patch release for version alignment with @signicat/catnip-components@0.0.20 (no wrapper API changes).

0.0.2 ​

  • Generated React wrappers from the custom-elements manifest, createCatnipForwardRef runtime, build verification, local playground, and docs (installation and usage).
  • Depends on @signicat/catnip-components@0.0.17.

@signicat/catnip-assets ​

Unreleased ​

  • Icons — Adds add-user.

1.1.1 ​

  • Hero illustrations — Adds hero/connections-2, hero/contact-sales, hero/contact-sales-2, hero/contact-sales-3, hero/contact-sales-4, hero/contact-sales-5, hero/developer-experience-2, hero/frequently-asked-questions, hero/kyb-verification-desktop, hero/kyb-verification-mobile, hero/kyc-verification-desktop, hero/kyc-verification-desktop-2, hero/kyc-verification-mobile, hero/kyc-verification-mobile-2, hero/support-center, and hero/trusted-digital-world-2, and updates the hero/connections artwork. Like the rest of the hero set, they paint with --catnip-hero-primary, --catnip-hero-accent, and --catnip-hero-stroke.

1.1.0 ​

  • Illustrations — @signicat/catnip-assets/illustrations/svg also exports illustrationViewBoxes: the root viewBox per key (aliases included), so renderers can reserve an illustration's size before its chunk loads.

1.0.3 ​

  • Hero illustrations — Aligns the hero set with Figma and removes illustrations that are no longer in the file. Remaining filenames drop -signicat (hero/onboarding-signicat is now hero/onboarding). hero/404-error is now hero/error-404, and hero/anti-money-laundering-aml is now hero/aml. Those previous keys still resolve. Removed heroes do not. Hero SVGs paint with --catnip-hero-primary (Brand 900), --catnip-hero-accent (Accent 300), and --catnip-hero-stroke (white).

1.0.2 ​

  • Icons — Adds content-left and content-right. Removes bell-negative.

1.0.1 ​

  • Product illustrations — Updates fraud-detection to the latest Figma design.
  • Icons — Adds all-documents, bell-negative, comment, created-by-me, product-news, promote-admin, section, speaker-disabled, trending-down, trending-flat, trending-up, and view-company-user-s-documents from Figma, and renames reset to cross-filled.

1.0.0 ​

  • Stable — First 1.0 (soft) release. Version aligned with the other Catnip packages.

0.0.17 ​

  • Icons — New downloading-progress and uploading-progress glyphs.

0.0.16 ​

  • Icons — Updated book glyph.

0.0.15 ​

  • Icons — New book icon.

0.0.14 ​

  • Signicat logos — Lockups under illustrations/signicat-logos/ use --catnip-logo-background / --catnip-logo-content (with Brand 900 / white fallbacks) so inlined logos follow design tokens; override those vars on brand surfaces for knockout.

0.0.13 ​

  • Illustrations — Primary fills use var(--catnip-graphic-primary, currentColor) so tokenized primary applies when design tokens are present, with inherited currentColor as the no-token fallback.

0.0.12 ​

  • Hero illustrations — Primary fills/strokes use currentColor; accent fills use var(--catnip-graphic-accent, #41FFD1) so colors follow graphic component tokens.
  • Pictograms & product marks — Same tokenized fills as heroes. Signicat logos stay hardcoded brand colors.

0.0.11 ​

  • Countries — Public @signicat/catnip-assets/countries export with typed country metadata and @signicat/catnip-assets/countries/flags/svg lazy flag loaders, including aggregate loadCountryFlags() preloading.
  • Icons — 7 new icons: draw, hourglass, keyboard, no-category, signature-level-changes, validation, and workflow-changes.
  • Illustrations — Hero illustration hero/mint.

0.0.10 ​

  • Icons — 35 new icons added: address-book, admin-settings, business, calendar-changes, code-off, code-on, delete-forever, demote-admin-role, e-signing, encrypted, focus, front-camera, infinity, metadata-changes, missed-deadline, nfc-chip, nfc-chip-circle, page-approved, private-message, remove-key, remove-user, rename, restore, save-contact, sealing, signature-collection, signature-with-custom-purpose, sim-card, star-filled, swap, switch-account, toggle, transfer-ownership, user-waiting, and zip-file.

0.0.9 ​

  • Icons — cut.svg, paste.svg, and scissors.svg added (clipboard-style actions).

0.0.8 ​

  • Icons — tick-filled.svg inset scaled to match reset.svg optical margin; close-filled.svg added (toggle / future use).

0.0.7 ​

  • SVG maps — illustrations-load.mjs + illustration-chunks/** with loadIllustration(name); pictograms use keys under illustrations/pictograms/ (e.g. **pictograms/folder**)
  • Illustrations — single src/illustrations/ tree (products/, hero/, signicat-logos/, pictograms/, …); kebab-case keys under products/
  • Removed — top-level src/pictograms/ and @signicat/catnip-assets/pictograms/svg (loadPictogram / pictogram-chunks); use illustrations/pictograms/ and illustrations/svg only
  • Breaking — loadIllustration(theme, name) → loadIllustration(name); removed illustrationNamesLight, illustrationNamesDark, and CatnipIllustrationTheme
  • Hero and other illustration SVGs use lowercase kebab-case filenames where names have multiple words (aligned with pictogram naming)
  • Docs — assets overview and Illustration component; pictograms documented under Pictograms

@signicat/catnip-icons ​

Unreleased ​

  • Icons — Rebuilds the font and lazy SVG inventory with add-user, which is added to CatnipIconName.

1.0.3 ​

  • Build — Clears dist/icon-chunks/ before writing, so removed icons (bell-negative, close-filled, reset) no longer ship as stale chunks.
  • Dependencies — Rebuilds against @signicat/catnip-assets@1.1.0.

1.0.2 ​

  • Icons — Rebuilds the font and lazy SVG inventory with content-left and content-right. bell-negative is removed from CatnipIconName.
  • Dependencies — Rebuilds against @signicat/catnip-assets@1.0.2.

1.0.1 ​

  • Icons — Rebuilds the font and lazy SVG inventory with the new Figma icons; cross-filled replaces reset in CatnipIconName.
  • Dependencies — Rebuilds against @signicat/catnip-assets@1.0.1.

1.0.0 ​

  • Stable — First 1.0 (soft) release. Version aligned with the other Catnip packages.
  • Dependencies — Rebuilt font + lazy SVG chunks from @signicat/catnip-assets@1.0.0.

0.0.17 ​

  • Icons — New downloading-progress and uploading-progress. Rebuilt font + lazy SVG chunks from @signicat/catnip-assets@0.0.17.

0.0.16 ​

  • Icons — Rebuilt font + lazy SVG chunks from @signicat/catnip-assets@0.0.16 (updated book).

0.0.15 ​

  • Icons — New book icon. Rebuilt font + lazy SVG chunks from @signicat/catnip-assets@0.0.15.

0.0.14 ​

  • Icons — 7 new icons: draw, hourglass, keyboard, no-category, signature-level-changes, validation, and workflow-changes. Rebuilt font + lazy SVG chunks from @signicat/catnip-assets@0.0.11.

0.0.13 ​

  • Icons — 35 new icons: address-book, admin-settings, business, calendar-changes, code-off, code-on, delete-forever, demote-admin-role, e-signing, encrypted, focus, front-camera, infinity, metadata-changes, missed-deadline, nfc-chip, nfc-chip-circle, page-approved, private-message, remove-key, remove-user, rename, restore, save-contact, sealing, signature-collection, signature-with-custom-purpose, sim-card, star-filled, swap, switch-account, toggle, transfer-ownership, user-waiting, and zip-file. Rebuilt font + lazy SVG chunks from @signicat/catnip-assets@0.0.10.

0.0.12 ​

  • Patch release; no changes vs 0.0.11 in icon sources or build output (republish / version alignment).

0.0.11 ​

  • Rebuilt font + lazy SVG chunks from @signicat/catnip-assets@0.0.8 (includes close-filled, updated tick-filled).

0.0.10 ​

  • Icon webfont and SVG map
  • iconNames export for component use

Catnip Design System by Signicat

Copyright © Signicat