Changelog #

You can find a complete changelog in the repository.

1.12.0 #

• Breaking The Switch component's checked property was removed; value is now the boolean checked state (was previously a string). The afp-value-changed event detail is now the plain boolean instead of { value, checked }. This also fixes the component not working with Angular's ngModel/Reactive Forms.
• Added: percent input type to the Input component. Only allows non-negative numbers with up to 2 decimal places (. or , as separator); the value property is the displayed value divided by 100 (e.g. displayed 50 -> value="0.5").
• Fixed: An issue in the Dialog component where a persistent transform: scale(1) on the open state created a containing block for position: fixed descendants, preventing popovers (e.g. from a Select) from escaping the dialog bounds.
• Changed: The default strategy of the Select component's popover is now fixed instead of absolute, so the dropdown properly overlaps surrounding content (e.g. when used inside a Dialog) instead of being clipped by a scrolling ancestor.
• Fixed: The Date Picker calendar grid now always renders 6 weeks, filling leading/trailing cells with the previous/next month's days (shown muted via the renamed day-outside CSS part, replacing day-empty). Previously the grid height changed between months (e.g. July to August), shifting the popover position when navigating.

1.11.0 #

• Added: Column filtering to the Table component. Enable via the filterable property to render a filter dialog with a control per column (filter type: text, select, number, date, boolean); active filters appear as removable tags. Includes filterOptions/filterOptionsAuto for select options, filterLabel, filterValue, maxFilterTags for tag overflow, a filters property to preset default filters, and the afp-filter-change event.
• Added: Full-text search to the Table component via the searchable property, with per-column searchable opt-out and searchValue for custom matching.
• Added: Selectable page size to the Table component via the pageSizeOptions property, with the afp-page-size-change event.
• Added: loading property to the Table component to overlay a spinner on existing data, and pending to show skeleton rows during the initial load.
• Added: hidden property to Table columns to define filter-only columns that are excluded from the rendered table.
• Fixed: An issue in the Table component where clicking an interactive element (e.g. a switch or button) inside a cell also triggered the row/cell click.

1.10.2 #

• Fixed: An issue in the Card component where the base CSS part was missing, preventing the card's base wrapper from being styled.

1.10.1 #

• Fixed: An issue in the Dropdown component where the menu did not open when used in frameworks like Angular, caused by the trigger being resolved before its content was projected.
• Fixed: An issue in the Select, Input, Dialog, Option, and Context Menu components where exportparts were resolved by fetching the manifest at runtime, causing errors in consumer apps that do not serve it. The data is now bundled at build time.
• Fixed: An issue in the Button component where the focus-visible state showed an incorrect background color.
• Fixed: An issue in the Breadcrumb component where the separator chevron was still shown after the last item.

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 #

• Initial release

1.0.0 #

• Beta release