Changelog #

You can find a complete changelog in the repository.

1.10.0 #

Added: New Context Menu component to display a popover with menu items on right-click. Supports programmatic usage via showPopoverFromMouseEvent() and showPopoverAt(), customizable placement, animation duration, and accepts any content in the menu slot.

1.9.0 #

Added: New Sparkline component to visualize trends in a compact format.
Updated: MCP Server — the server now exposes design tokens, allowing AI assistants to resolve token names and values directly.
Updated: Button — hover state now transitions text color and border color independently; icon-only buttons now use width/height equal to the component size instead of padding.
Updated: Alert — close button now uses appearance="filled" for better visual consistency with the alert variant color.
Updated: Internal color variable system redesigned.

1.8.2 #

Fixed: Improved accessibility issues in the Table component. Also switched component rendering from shadow DOM to light DOM, enabling better styling flexibility—especially for custom rendering.

1.8.1 #

Fixed: An issue with exportpath in the Select and Input components that caused problems when used in frameworks like React or Angular.

1.8.0 #

Added: Column highlightneing function to the Table component.
Added: rowDisabled property to the Table component to disable specific rows.
Added: hideLabel property to the Checkbox component to hide the label while keeping the option accessible for screen readers.
Added: locked property to the Details component to lock the Details in its current state.
Added: --afp-select-content-prefix-padding and --afp-select-content-suffix-padding CSS variables to the Select component to control the padding of content prefix and suffix elements.
Fixed: An issue in the Details component where the focus did not use the global focus token.

1.7.0 #

Added: indicator-prefix and indicator-suffix slots to the Textarea component.
Added: New focus CSS variables to better style input-like components. For more information, see Focus and Colors.
Added: New --afp-font-family-heading variable in Typography for heading (h) elements.
Added: placeholder and placeholder-multiple CSS parts to the Select component to allow styling of the placeholder text.
Added: --afp-select-multiple-padding CSS variable to the Select component to control the padding of multiple selected options.
Added: selectRow() and selectAll() methods to the Table component for programmatically selecting rows.
Added: New CSS parts to the Table component to allow more flexible styling.
Updated: The chevron indicator that shows whether a Details component is open or closed has been rotated to the correct position for accessibility.
Updated: The close icon in the Option component is now an afp-button instead of a plain icon.
Updated: In the Option component, the check icon is now positioned on the right side instead of the left for accessibility reasons.
Fixed: An issue in the Button component where icon-only buttons did not have the correct size.
Fixed: An issue in the Details component where checkboxes triggered the toggle action when clicked.

1.6.0 #

Added: AfpPlacement property to the Timeline and Timeline Item components to define whether the timeline is displayed horizontally or vertically, enabling more flexible and visually appealing layouts.
Added: New Table component to display tabular data with support for sorting, selecting, pagination and custom cell rendering.
Added: AFP_KC_SPECIAL_CHARS option for the specialChars rule in the Password Validator component to provide a valid set of special characters accepted by Keycloak.
Fixed: An issue in the Date Picker component where selecting months and years did not provide visual feedback (hover and focus states). Additionally, the year dropdown has been replaced with a number input to avoid long lists.
Fixed: An issue in the Select component where the width was always determined by the largest <afp-option> when selected.

1.5.0 #

Added: New Stepper, Stepper Item, and Stepper Content components to visually represent progress through a sequence of steps in a process.
Added: autocomplete property to the Date Picker component to enhance user experience by providing suggestions based on previously entered values. The component has also been marked as stable.
Added: AfpInput event to the Date Picker component, which is emitted on every user input, allowing for real-time validation and feedback.
Fixed: An issue in the Date Picker component where the AfpValueChanged event was not emitted when the input field was cleared manually, which has now been resolved to ensure proper handling of empty values.

1.4.1 #

Fixed: An issue in the Date Picker component where weekday labels were shortened to two characters for improved layout consistency and the AfpValueChanged event is now emitted on manual input to properly handle empty values.
Fixed: An issue in the Drawer component where the close action now includes an animation, ensuring consistent transition behavior for both opening and closing.

1.4.0 #

Added: New Breadcrumb and Breadcrumb Item components to create breadcrumb navigation for improved user experience and navigation within applications.
Added: New Password Validator component to provide real-time feedback on password strength and compliance with security requirements.
Added: New Empty State component that is used in case of empty content like no data or error that should be displayed.
Added: New Timeline and Timeline Item components to visually represent a sequence of events in chronological order.
Added: New Drawer component that slides in from the edge of the screen to display contextual content without leaving the current page context.
Added: New Pin Input component for entering PIN codes or similar sequences of characters.
Added: New lbbw theme variant to support the LBBW corporate design.
Added: Added a converter for parsing object properties, so that these objects can be passed directly to the component.
Added: strategy property to the Date Picker and Color Picker components to define how the popup is positioned relative to the input field.
Added: Missing HTML parts to the Date Picker component for better accessibility.
Fixed: Rounding issue in the Color Picker component.
Fixed: Spelling mistakes in multiple components.

1.3.0 #

Added: New Navigation and Navigation Item components to create side or top navigation menus with support for icons, badges, and more.
Added: Introduced Pages as fully built example templates that showcase how the aFP Design System can be used to compose complete, real-world user interfaces.
Added: Extended --afp-size design tokens with percentage-based values (25%, 50%, 75%, 100%) to support more flexible and consistent sizing across layouts.
Added: Support for integrating the aFP Design System with an MCP Server. See the MCP integration guide.
Added: File state handling and retry button functionality for the File Upload component.
Added: Format options for the Color Picker component to display only selected color formats.
Fixed: Some bugs in the Tree View component.

1.2.0 #

Added: A new Tree View component that supports single and multi-selection modes, as well as disabled nodes.
Added: The language can now be changed via the documentation. This setting only affects UI components (such as ARIA labels and other accessibility-related texts), not the documentation content itself.
Fixed: An issue in the Slider component where the tooltip would sporadically remain visible. The component has also been marked as stable.

1.1.0 #

1.0.0 #