Planning
Changelog
1.1.0
Store and administration templates
Two interactive template applications now cover store operations and administration.
Application blocks
Authentication and dashboard blocks provide focused previews alongside complete Angular component code.
Stable public APIs
Renamed or refined chart, combobox, and tooltip APIs retain compatibility aliases and tokens for existing applications.
Added
- Added store templates for overview, product catalog, inventory, orders, suppliers, and procurement workflows.
- Added administration templates for user management, roles and permissions, audit history, and settings.
- Added separate downloadable Angular applications under projects/templates/store and projects/templates/administration, each with its own dependencies, routes, start command, and build configuration.
- Added authentication and dashboard blocks with responsive previews and complete Angular component source.
- Added an opt-out for decorative corner handles through [frCornerHandles]="false".
Fixed
- Comboboxes now resolve initial labels from lazy item content while retaining the itemToStringValue compatibility input.
- Hover card and popover projected content now keeps access to its overlay controller.
- Improved table borders, template navigation, responsive filtering, and overlay layout details.
Changed
- FrChartDataPoint is now the preferred chart datum type; FrChartDatum remains available as a deprecated alias.
1.0.1
Custom Tokens in Customize Preview
Customize Preview now includes Custom Tokens, allowing the theme to be adjusted freely in the preview by editing the core color tokens directly.
Carousel primitive refactor
Carousel primitives were refactored around a more flexible composition model, with clearer controls, pagination dots, thumbnails, drag-free behavior, and updated docs examples.
Modal and sheet exit motion
Modal and sheet overlays now keep their panel and backdrop mounted long enough for the leave animation to run instead of disappearing immediately when closed.
Switch default surface polish
Switch now uses the border token for its unchecked surface, giving the control a quieter default state that fits better with the rest of the 1.0 theme.
Added
- Customize Preview now includes Custom Tokens, allowing the theme to be adjusted freely in the preview by editing the core color tokens directly.
Fixed
- Fixed modal close behavior so the panel and backdrop can play their leave animations before the dialog is disposed.
- Fixed sheet close behavior so side-aware exit animations run for right, left, top, and bottom sheets.
- Kept reduced-motion preferences respected for modal and sheet close transitions.
Changed
- Refactored Carousel primitives around a more flexible composition model, including clearer controls, pagination dots, thumbnails, drag-free behavior, and updated docs examples.
- Adjusted the default switch background and hover tokens to use the border color instead of the input color.
- Cleaned up obsolete foundation token references.
1.0.0
First stable Frame UI release
Frame UI now has its first full release line. The beta foundation and component work graduates into a stable baseline, and this release adds charts as the next package in the system.
Dedicated charts package
Added @frame-ui-ng/charts as a standalone Angular package with its own module, stylesheet export, build target, tests, and publish scripts.
Installation
npm install @frame-ui-ng/foundation @frame-ui-ng/chartsstyles.css
@import '@frame-ui-ng/charts/styles.css';component.ts
import { FrChartModule } from '@frame-ui-ng/charts';Composable chart primitive
The new frame-chart primitive renders area, line, bar, composed, pie, donut, sparkline, heatmap, calendar heatmap, and radial charts from the same data and series model.
traffic-chart.html
<frame-chart
aria-label="Traffic by device"
type="area"
xKey="month"
[data]="trafficData"
[series]="trafficSeries"
/>Charts documentation
Docs now include a dedicated Charts area with category pages, previews, token inspection, examples, and search entries for the new chart family.
Added
- Added the @frame-ui-ng/charts package with FrChartModule, frame-chart, and [frChart] exports.
- Added chart support for area, line, bar, composed, pie, donut, sparkline, heatmap, calendar heatmap, and radial visualizations.
- Added grouped and stacked bar layouts, vertical and horizontal bar orientation, smooth, linear, sharp, and step curves, plus composed series with area, bar, and line marks.
- Added interactive chart affordances including tooltips, legends, optional legend toggling, chartClick events, value formatting, and per-datum or per-series colors.
- Added chart empty states for missing data and chart types where no positive values can be displayed.
- Added chart CSS with design tokens for height, generated palettes, grid lines, axis labels, tooltips, heatmap cells, motion, and legend treatment.
- Added chart unit coverage for all supported chart families, empty states, legend toggling, click events, label shortening, stacked bars, horizontal bars, and sparkline baselines.
- Added a dedicated /charts docs area with pages for area, bar, composed, line, pie, donut, sparkline, heatmap, and radial charts.
0.6.0-beta.0
Reusable corner handles
Corner handles are now rendered from one shared directive and stylesheet instead of being duplicated inside individual component styles. Use frCornerHandles on custom surfaces, or import the dedicated corner-handles stylesheet when only the renderer is needed.
custom-surface.html
<section frCornerHandles class="settings-panel">
...
</section>Accordion component composition
Accordion now uses component hosts backed by Angular CDK accordion state. The public composition moved from attribute-only item and content directives to frame-accordion, frame-accordion-item, and ng-template based content.
Before
accordion.html
<div frAccordion type="single" collapsible>
<section frAccordionItem value="details">
<button frAccordionTrigger type="button">Details</button>
<div frAccordionContent>More information.</div>
</section>
</div>After
accordion.html
<frame-accordion type="single" collapsible>
<frame-accordion-item value="details">
<button frameAccordionTrigger type="button">Details</button>
<ng-template frameAccordionContent>More information.</ng-template>
</frame-accordion-item>
</frame-accordion>Date picker dropdown caption
Date Picker now opens with month and year selectors by default, uses the Frame UI Select primitives for those controls, places presets below the calendar, and uses SVG calendar/navigation icons instead of text glyph defaults.
Combobox state fixes
Combobox now keeps selected labels reactive, preserves typed queries while searching from a selected value, scrolls highlighted items into view during keyboard navigation, and supports ArrowUp navigation from the chips input.
Breaking
- Accordion markup now uses <frame-accordion> and <frame-accordion-item> instead of frAccordion and frAccordionItem host directives.
- Accordion content now uses ng-template[frameAccordionContent] instead of an inline element with frAccordionContent.
- Accordion trigger and icon selectors were renamed to frameAccordionTrigger and frameAccordionIcon.
- Calendar and Date Picker no longer expose previousMonthIcon and nextMonthIcon text inputs; use previousMonthTemplate and nextMonthTemplate for custom navigation icons.
Added
- Added the FrCornerHandles directive for applying Frame UI corner handles to custom boxes.
- Added a standalone styles/corner-handles.css export and included it in the component styles bundle.
- Added Accordion openAll and closeAll helpers through the CDK-backed root component.
- Added grouped Combobox filtering coverage, chip keyboard navigation coverage, Date Picker caption layout coverage, and Sheet positioning coverage.
Changed
- Accordion state, default values, single versus multiple behavior, and content height transitions now run through CDK accordion primitives.
- Accordion borders are opt-in by default, and the docs/examples now show the new component composition.
- Calendar dropdown captions now use Frame UI Select controls and inline SVG chevrons.
- Date Picker now defaults captionLayout to dropdown and moves preset actions below the calendar.
- Sheet overlays now use side-aware CDK global positioning and side-specific panel classes.
- Docs surfaces were updated to use the shared corner-handle directive, and component examples were refreshed for Accordion, Collapsible, Date Picker, Sheet, and related pages.
Fixed
- Fixed Combobox selected-value display updates when item labels are registered after an initial value is set.
- Fixed Combobox query editing so deleting the typed query from a selected value keeps the input empty instead of restoring the previous label too early.
- Fixed Combobox keyboard navigation so highlighted options scroll into view and chip inputs can move upward as well as downward.
- Fixed grouped Combobox filtering so empty groups are hidden and the empty state is shown when no grouped item matches.
- Fixed Date Picker overlay layout and focus expectations for the new default dropdown caption.
- Fixed Sheet side positioning for service-opened sheets, including left and RTL examples.
- Fixed Checkbox checked and indeterminate indicator motion so state changes render more cleanly.
- Fixed Button, Modal, Sheet, Input, and overlay-adjacent components to use the shared corner-handle renderer instead of duplicated pseudo-element rules.
0.5.0-beta.0
Shared base values
Density, radius, and shadow values now start from one shared layer. Components still have their own CSS variables, but their defaults point back to these shared values instead of repeating separate numbers everywhere.
Before
component defaults
:root {
--frame-modal-shadow: 0 24px 80px rgb(0 0 0 / 0.18);
--frame-sheet-shadow: 0 24px 80px rgb(0 0 0 / 0.2);
--frame-toast-shadow: 0 18px 45px rgb(0 0 0 / 0.14);
}After
shared defaults
:root {
--frame-shadow-sm: none;
--frame-shadow-md: 0 10px 15px -3px rgb(0 0 0 / 0.1);
--frame-shadow-lg: 0 24px 80px rgb(0 0 0 / 0.18), 0 8px 24px rgb(0 0 0 / 0.12);
}
:root {
--frame-modal-shadow: var(--frame-shadow-lg);
--frame-sheet-shadow: var(--frame-shadow-lg);
--frame-toast-shadow: var(--frame-shadow-md);
}Simpler theme config
The theme options now describe the actual decision: who controls the root theme state, and which selector is used.
Before
app.config.ts
provideFrameUI({
theme: {
strategy: 'attribute',
mode: 'managed',
attribute: 'data-theme',
},
});After
app.config.ts
provideFrameUI({
theme: {
controlledBy: 'frame',
using: 'data-theme',
},
});App-wide appearance presets
Apps can now adjust the broad feel of the interface from provideFrameUI instead of tuning component defaults one by one.
app.config.ts
import { ApplicationConfig } from '@angular/core';
import { provideFrameUI } from '@frame-ui-ng/foundation';
export const appConfig: ApplicationConfig = {
providers: [
provideFrameUI({
density: 'compact',
shadow: 'raised',
}),
],
};Docs preview export
The docs header now lets users preview palettes, radius, shadow, and corner handles, then export the matching CSS and TypeScript.
Breaking
- Replaced theme.strategy, theme.mode, theme.attribute, and theme.className with theme.controlledBy and theme.using.
Added
- Added docs preview controls for palette, radius, shadow, corner handles, and CSS/TypeScript export.
Changed
- Density, radius, and shadow defaults now come from shared FrameUI values.
- Component spacing, sizing, radius, and elevation defaults now point to those shared values.
Fixed
- Fixed primary Button styling so it follows theme tokens.
- Fixed Input focus styling so Inputs no longer gain corner handles on focus.
0.4.2-beta.0
Added
- Added the --frame-calendar-width token so Calendar width can be configured through the component token contract.
- Added the --frame-calendar-month-flex token to opt into fluid month layouts without making the compact Calendar default stretch in wide containers.
Changed
- Calendar layout now keeps the default month grid content-sized while still allowing responsive day resizing through explicit width and flex token overrides.
- Calendar Select examples now render the calendar panel at a compact fit-content size without introducing internal scrolling.
- Date Picker calendar overlays now handle multi-month layouts and viewport-constrained overflow more consistently.
- Modal width, height, min, and max size options now apply to the rendered modal panel as well as the overlay pane.
0.4.1-beta.0
Added
- Added the new Drag and Drop component package built on top of Angular CDK Drag&Drop.
- Added the new Confirm Popover component package for anchored confirmation prompts with config-object and individual-input APIs.
Changed
- Updated component internals to avoid Angular effect() usage in favor of explicit lifecycle synchronization, computed values, linked signals, and host bindings.
0.4.0-beta.0
Added
- Added the new Confirm Modal component package with FrConfirmModalService and the frConfirmModal trigger directive.
- Added a disableCornerHandles option to provideFrameUI for turning off blueprint-style corner handles across all components.
- Added a resizable input to Sidebar so rail resizing can be disabled when a fixed navigation width is required.
Changed
- Modal service overloads now support passing component data directly as the second open() argument.
- Modal bodies can now inject FrModalRef<Component, Result> directly.
- Modal shell configuration now supports inputs as the preferred replacement for bodyInputs.
- Buttons now use fit-content as their minimum width so compact labels and icon compositions size more naturally.
- Interactive Item rows now show a pointer cursor on hover.
- Dropdown submenu side offset was reduced for tighter submenu placement.
- Tooltip arrows now stay centered on their trigger when the overlay is shifted by viewport positioning.
- Sidebar icon-collapse rail interactions now keep labels hidden and preserve the expanded sidebar width when toggled again.
- Sidebar rail dragging from icon-collapsed state now expands and resizes the sidebar consistently.
- Disabled Sidebar menu buttons no longer animate or receive hover styling.
0.3.0-beta.0
Added
- Command dialogs now focus the command input when opened.
- Datepicker calendar grids now support ARIA-style arrow key focus movement.
- Dropdown menus now support side placement with auto, bottom, left, right, and top options; submenus stay constrained to left and right placement with a small parent-menu offset.
- Input group addons now support connected button actions.
- Input group addons now support a ghost variant for icons, shortcuts, and text without a separate addon surface.
- Modal bodies can now inject FrModalRef<Component, Result> directly without using the FR_MODAL_REF token.
- Modal service calls now support opening a component with data and dialog config directly.
- Sidebar resizing now supports minSize and maxSize bounds.
- Select triggers now support custom leading icons.
Changed
- Accordion content now collapses with measured height transitions so closed panels take no visible height without runtime DOM changes.
- Disabled buttons no longer run hover animations across appearances.
- Dropdown menu items now use a pointer cursor.
- Icon buttons now keep square dimensions across all supported sizes.
- Sidebar no longer renders blueprint corner handles.
- Select no longer renders trigger or panel corner handles.
- Tooltip now opens immediately by default; use frTooltipOpenDelay when delayed hover behavior is needed.
Breaking
- Tooltip now uses the direct frTooltip trigger API. The old frame-tooltip, frTooltipTrigger, frTooltipContent, and frTooltipPanel primitives were removed.
0.2.0-beta.0
Changed
- New default visual style with sharper surfaces, clearer borders, and less shadow.
- Theme setup now keeps light and dark as the only built-in theme modes.
0.1.0-beta.0
Added
- Initial foundation package with CSS tokens and light/dark support.
- Initial components package with Angular primitives and shared styles.
- Docs site with installation, theming, theme tokens, and component pages.
Included components
- Actions, forms, overlays, navigation, feedback, layout, and data display primitives.
- Reactive forms support where the component represents form state.
- Component-level CSS variables for local styling changes.