Government of Spain Logo DINTEL Design System Logo Standardized Design of Electronic Procedures Home First steps First steps What is DINTEL? Designers Developers Resources Frequently Asked Questions Foundations Foundations Color Typography Box shadow Spacing Grid Border Border radius Iconography Illustrations Animations Accessibility Design tokens Writing guidelines Data visualization Interface elements Interface elements Modules Templates Components Updates Contact

Releases

On this page you can find the latest updates of our system. Always use the latest version of the system to avoid technical, performance and security problems.

1.4.3

05/27/2025

Improvements to the `dnt-header-logo` component: Style optimization. Improvements to the `dnt-hero` component: Style optimization.

1.4.2

05/13/2025

Improvements to the `dnt-header` component: The help button has been replaced with a dnt-link. Texts can now be dynamically updated when changing languages. Improvements to the `dnt-alert` component: Two new types, low_priority_notif and high_priority_notif, have been added. Improvements to the `dnt-footer-link` component: Styles have been modified to meet accessibility criteria in negative mode. Improvements to the `dnt-input` component: Rendering has been improved when it is a textarea type and when it has the success status. Improvements to the `dnt-select`` component: Rendering of the component has been improved when it is multiple and when an HTML template is used to set styles on the options. Improvements to the `dnt-breadcrumb` component: Visual improvements have been made to meet accessibility criteria. Improvements to the `dnt-table` component: Rendering of the component with fixed columns and sticky headers has been improved. The ability to programmatically update column titles has also been implemented. Improvements to the `dnt-vertical-card` and `dnt-horizontal-card` components: New tags slot to allow inserting `dnt-tags`. New card types to display only-image images. Images can also be inserted into `dnt-horizontal-card`. New interactive card examples have been created. Improvements to the `dnt-dropdown` component: Visual changes have been made to meet accessibility criteria. New components `dnt-gauge-chart`, `dnt-column-chart`, and a new notification template module. New Back-Message and Dropdown-Menu iconography. Improvements to the `dnt-header` component: Improved menu rendering in the mobile version. Improvements to the `dnt-horizontal-menu`` component: Improved rendering when it contains more than 10 items in negative mode to false. Improvements to the `dnt-dropdown` component: Visual improvements to the component. Improvements to the `dnt-gauge-chart` component: Allow setting headers on the chart. Improvements to the `dnt-column-chart` component: Allow setting headers on the table.

1.3.2

03/20/2025

Improvements to the `dnt-carousel` component: The visual aspects of the component have been optimized. Improvements to the `dnt-cookies`, `dnt-faqs`, `dnt-time-picker`, `dnt-date-picker`, `dnt-search`, and `dnt-horizontal-menu` components: Added the ability to programmatically set button title values ​​within these components. Improvements to the `dnt-checkbox` and `dnt-checkbox-button` components: The component's state management has been improved via the checked property. Note that the true-label and false-label properties will be deprecated in a future release. Improvements to the `dnt-vertical-card` and dnt-horizontal-card components: New variants have been added for information cards. A new diary card type has been introduced, configurable with the typeDiary property. A tags slot has been added to allow for embedding tags within cards. All of these improvements are documented in the storybook. Improvements to the `dnt-tags` component: A new type of anchor tags has been added. Improvements to the `dnt-select` component: A new event, endScroll, has been added, which is emitted when the end of the scroll is reached. Improvements to the `dnt-table` component: Added an allRowSelected event to detect when all rows are selected via the checkbox. Visual improvements to columns with the sortable property. New icons: SaveTimer, Save, EventOnline, EventOnsite, Folder, LargeThumbnail, SmallThumbnail, Scanner, and Documented Tag in storybook. Improvements to the `dnt-share` component: The TikTok social network has been added. Improvements to the `dnt-hero` component: New variants have been added: a full variant with an image and a variant with a light background. All of these are documented in a storybook. Improvements to the `dnt-section` component: Options have been added to select the image location using a slot, depending on the desired position. See in storybook. Improvements to the `dnt-breadcrumb` component: Visual improvements have been made. New `dnt-switch` and `dnt-vertical-bar-chart` components. Optimization of the library's style generation to prevent its global injection into the `style` of applications that use the library.

1.2.0

12/18/2024

Improvements to `dnt-file-uploader` component: Improvement to clean up error message. Improvements to the `dnt-header` component: Allow hiding the skip to content button with the new remove-skip-content-link property. The hamburger menu has been hidden when the show-menu property is false. The external-logout property has been added so that when you log out you can stay in the same active tab. The improvement has been made to be able to emit events when accessed by keyboard. Improvements to `dnt-header-item` component: New parameterleft-icon inside `dnt-header-item` of type languague that allows to display an icon on the left. `dnt-header-item` of type help can now be opened in a separate window if the external parameter is set. Improvements to the `dnt-share` component: Added content sharing options for LinkedIn and Instagram. Some styling changes have also been implemented. Improvements to the `dnt-dropdown` component: A new left-icon parameter has been added, which allows setting an icon on the left. A fit-options parameter has also been added, which allows setting the width of the component to fit the content or to have a set width. Improvements to the `dnt-vertical-menu` component: Improved detection and style change when the enabled option is modified programmatically. Improvements to the `dnt-link` component: Visual adjustments have been made to meet accessibility criteria. Improvements to the `dnt-modal` component: Changes to the component's rendering to support browser tab switching. Improvements to the `dnt-datepicker` component: Improvements to accessibility and rendering within a modal or accordion. Dnt-dopdown New `dnt-carousel` and `dnt-stepper-advanced` components and new anchor menu template module. A guide has been generated to be able to test DINTEL components using cypress. New iconography Routine-Message, Priority-Message, Urgent-Message.

1.1.1

11/20/2024

Improvements in the `dnt-accordion` component: New extra-text property to include informational text in the header and accessibility improvements. Storybook improvements: The steps to follow to integrate Lintel into React applications with TypeScript have been added. Improvements in the `dnt-table` component: The new sort-direction property is introduced in `dnt-table-column` to indicate the sorting of that column. New colors have been added in the utilities section see storybook. New `dnt-row-information` and `dnt-featured` components. Improvements in the `dnt-file-uploader` component: When uploading a file that is not allowed (according to the accept parameter), an error message is displayed in the component. Improvements to the `dnt-horizontal-menu` component: Added a new zindex parameter to configure the overlay. Improvements to the `dnt-header` component: A new zindex parameter has been added within the `dnt-header-item` to configure the overlay. `dnt-steps` component improvements: Added documentation and configured so that a `dnt-step` can be active and in a success state. Improvements in the `dnt-footer` component: New external property in `dnt-footer-link` to open links in another tab. New Calculator, Calendar-Check, Id-File, Table-Columns, Thumb-Tack icons. Improvements in the `dnt-tags` component: New functionality to indicate that it is a selectable tag with the selectable property and new buttom tag types. New section of type `dnt-section` for newsletter. Adjustments have been made for long texts within the `dnt-accordion`, `dnt-horizontal-card`, `dnt-vertical-card`, `dnt-collapse`, `dnt-modal`, `dnt-toas components `, `dnt-tooltip`, `dnt-vertical-menu`, `dnt-section` and `dnt-cookies Improvements in importing new dnt-row-information and dnt-featured components. Improvements in settings made for long texts. New social network icon X.

1.0.0

10/23/2024

Storybook update: Storybook has been updated from version 6.5.16 to 8.2.5 Improvement in the `dnt-header` component: Fixed the date and time format in the `dnt-header-item` component for the datetime type Improvement in the `dnt-accordion` component: New overflow-visible property in the `dnt-accordion-item` component, allowing the content to overhang the container Improvements to the `dnt-button` component: Improvements have been implemented to meet accessibility criteria Improvements to the `dnt-button` component: New button types have been added: primary-light, primary-dark, secondary-light, secondary-dark, tertiary-light and tertiary-dark Improvements to the `dnt-button` component: Previous button types primary, secondary, tertiary, neutral, negative and link are deprecated

0.11.0

10/01/2024

Improvements in the `dnt-header` component: Change of iconography in the mobile menu, with the new languages ​​icon. Improvements in the `dnt-datepicker` component: Detection of date changes programmatically and manually issued changes in the component input. New modal close button in mobile version. Improvements to the predictive `dnt-input` component: Hide predictive options when component focus is lost. Improvements in the `dnt-tab` component: Adjustment of the content of the tabs in the mobile version. Improvements in the `dnt-tooltip` component: New parameterizable z-index property. Improvements to the `dnt-select` component: New multiple rendering for asynchronous option loading. Improved synchronization of dynamic options. New possibility of adjusting the text of the selector options to the width of the selector, using the fit-options property. New Lock icon documented in storybook.

0.10.1

08/19/2024

Improvements to the `dnt-datepicker` component: Allow resetting the date when it is picker-only. A new invalidFormat event has been added to check that the entered format is valid when the date is entered manually. A new zindex parameter has been added to configure the overlay. Improvements in the `dnt-table` component: It is possible to define customCellTemplate for the expand type column. Improvements to the `dnt-header` component: A new parameter text-additional has been added to display a text on the left after login if necessary. A new parameter initial-date has also been added to be able to set the initial time for the dnt-header-item of type datetime. New icons File-Import, File-New, File-Validate, File-View, File-Store, Folder-Import, Folder-New, Folder-Store, Folder-Validate, Like-Dark, Like-Light, Attachment, Restore, Message, Settings, Task-Activate, Task-Pause and Task-Play documented in storybook. Improvements to the `dnt-breadcrumbs` component: Possibility of making redirects in the application without reloading the page using the new redirect parameter. Improvements to the `dnt-search` component: Improved rendering of the component. Allows setting a max-height for the results and suggestions slots with the dropDownMaxHeight property. The possibility of displaying filters first has also been incorporated with the filters-expanded parameter. The display of the delete cross has been improved so that it does not overlap the entered text. Improvements to the `dnt-input` component: Display improvements when it contains predictive text, so as not to displace the rest of the content. Improvements to `dnt-radio-group` component: Allow resetting values. Improvements to `dnt-pagination` component: Improved to display maximum range of items. Improvements to `dnt-collapse` component: Improvement to prevent content from being inaccessible when not expanded. Improvements to `dnt-accordion` component: Improvement to prevent content from being inaccessible when not expanded. Improvements to the `dnt-modal` component: Improvements to prevent accessing content outside the modal. New `dnt-section` type section for searches with no results. Improvements in the behavior of the `dnt-select` component when used in a standalone application. Storybook improvements: Logo ordering and informative messages for the user Improvement in the `dnt-datepicker` component: Adjustment in the display for month and year type selectors. Improvements to `dnt-link` component in negative mode: Do not change font color during hover to meet accessibility criteria.

0.9.2

07/02/2024

Improvements in the `dnt-header` component: Ability to make redirects in the application without reloading the page using the new redirect parameter. Own login and logout functionality avoiding redirection, through the use of clickLogin and clickLogout. Information control for the dropdown that appears in logged in users. Improvements in the user type slot in `dnt-header`: Allow synchronization of functionality options in the component. Improvements to the `dnt-spinner` component: Rendering in the Firefox browser. Improvements in the `dnt-table` component: Possibility of center-aligning the texts of the headers of a table. Display improvements for vertical scroll cases. maxheigth property documented in storybook. Improvements to the `dnt-search` component: Rendering of the component when integrated into a modal, improvements to recursive filtering and content control when the component does not yet have suggestions or results reported. Improvements in the `dnt-select` component: Options selectable using keyboard arrows. In filterbale mode, user-entered information is cleared by escaping the component's focus using the tab key. Improved behavior for filterable and multiple selectors. Limited change event broadcast. Improvements in the `dnt-dropdown` and `dnt-pagination` components: Parameterizable z-index property. Improvements in the `dnt-date-picker` component: Display improvements when the component is displayed, so as not to displace the rest of the content. When using forms, regularization of the returned value so that it is always of type date. Improvements in the `dnt-radio-button` component: Ability to associate error information both with each individual option and with the entire group of options. Logos and names of ministries updated in storybook. Improvements in the `dnt-select` component: Asynchronous loading of options to display. Improvements in the `dnt-modal` component: Optimized content display using vertical scrolling. Improvements in the `dnt-datepicker` component: Style changes in programmatically disabled date display and correct date display for month type calendars.

0.8.0

05/30/2024

New `dnt-calendar-events` component to display and manage events in the calendar. New `dnt-notification` component to display and manage user notifications in headers. New `dnt-share` component that allows sharing content. New Menu Profile Notification header option in `dnt-header` with more detail on user information. Improvements to the `dnt-header-item` component: Allow Angular directives like ngIf or ngFor. Improvements in the numeric `dnt-input` component: The entered value is adjusted according to the min and max parameters. Improvements in the `dnt-file-uploader` component: the duplication of the previewEvent, changeEvent, and removeEvent events in the component is limited. Improvements in the `dnt-table` component: parameterizable z-index property. Improvements in the `dnt-table` component: resetSelectedRows method available to clear all selected rows from the table. Improvements in the `dnt-date-picker` component: Complete redesign for a panel that meets accessibility criteria. Additionally, the readonly mode is added to the design and the possibility of parameterizing the option to edit the date value only from the panel. Improvements in the `dnt-date-picker` component: Allows programmatic deletion of a date manually entered in the input. Configurable image rendering in the `dnt-vertical-card` component, making the object-fit property parameterizable. Modification of scroll bar styles. Improvements in the `dnt-link` component: Complete redesign to meet accessibility criteria. New icons File, Doc-Excel, Doc-Word, Doc-Pdf documented in storybook

0.7.3

05/23/2024

Improvements in the `dnt-popover` component: show tooltip when hovering with the mouse

0.7.2

05/08/2024

Improvements to the `dnt-tabs` component: `tabChange` event duplication Improvements to the `dnt-select` component: modified option collapsing/unfolding mechanism

0.7.0

04/16/2024

Improvements in styles and operation of predictive text: display and closing of the list of options when writing or deleting characters Ability to set focus on the following library components: `dnt-select`, `dnt-date-picker`, `dnt-input-number`, `dnt-search` and `dnt-button` Improvements in the `dnt-select` component: For Angular forms, update the value of the selector and form simultaneously when leaving focus by clicking on the tab key Improvements to multiple and filterable `dnt-select` component styles Improvements in the `dnt-select` component: Do not display selector options if you click on its error message Improvements to the `dnt-input-number` component when increasing or decreasing its value using the arrows Improvements when updating the content of `dnt-tab-pane` from Angular Improvements in the rendering of the `dnt-accordion` component to fill the entire screen at large resolutions Improvements to the rendering of the `dnt-date-picker` component for resolutions lower than 1128px Add size property in the `dnt-modal` component to be able to parameterize its size Remove customClass property in `dnt-modal`, `dnt-spinner` and `dnt-toast` components Document clickCallback event for `dnt-collapse` in storybook

0.6.1

03/14/2024

Input component: New predictive text functionality. Modified names and logos of Ministries. Textarea component: added `maxLength` property. Select component: writing with `filterable=false` is not allowed. Vertical menu component: corrected `min-height` property. Button component: Fixed submitting form data via `ngSubmit`. U23 European Presidency logo removed. Modal and alert components: allow dynamic title parameters. Select component: fixed console error with no element selected. Dropdown component: table scroll management solved. Pagination component: expanded documentation in Storybook. Collapse component: new `expandedChange` functionality. Search component: corrected maxLength property. Accordion component: corrected `max-height` property. Search component: text accessibility problem in button has been solved. Corrections in styles and operation of predictive text. New Users icon documented in Storybook. Documented `expandedChange` for the `dnt-collapse` in Storybook. Menu component new `callback` event. Fixes to simple selection for the `dnt-table` component.

0.5.1

12/20/2023

Select: Correction of component functionality in `disabled` and `readonly` state. Correction of display in `multiple` and `filterable` mode. Extended documentation added Toast: Extended documentation added Modal: Extended documentation added Input: Input size styles are corrected so that they can be used within a `Section` component. Extended documentation added Search: Accessibility error with label is fixed File Uploader: The accessibility error with the label is corrected. The component accepts a `file-uploader-id` property generated by default, associated with the `for` of the `label` tag and the `id` of the `input` tag of the component Input Number: The `round-value` property is added, which rounds the value linked to the input, it is necessary to combine it with `step-strictly`. Extended documentation added Checkbox Group: The `checked` property of `checkbox` and `checkbox-button` is made compatible with `checkbox-group` Alert: A `slot` is added to the `Alert` component, so that custom content can be included instead of using the `description` or `link` attribute Radio: Styles for the `full-width` attribute are fixed. Extended documentation added Tabs: The use of nested tabs is corrected. Extended documentation added Toast: Added autoClose property to interface

0.4.2

09/28/2023

Toast: Added zIndex option to configure notification overlay Input, Select and Input Number: Append and prepend slots are added to place elements aligned to the left or right of the inputs Footer: The order of the primary and secondary logos is reversed Illustrations: Clear Message illustration added to Storybook Advanced Documentation: Accordion, Alert, Backtop, Breadcrumbs, Button, Cards, Checkbox, Collapse, Cookies, Datepicker, Timepicker, Divider, Dropdown

0.4.1

08/30/2023

Fix Spinner: Fix z-index of Modal and Spinner to avoid an overlap from Modal to Spinner Fix File Uploader: prevent empty listing (<ul></ul>) from appearing when file listing is not displayed New documentation: File Uploader, React component wrapper and examples in Angular and React of the Table component Theming: Correction of errors when generating color theme and documentation update Header: Header option with environment tag

0.4.0

08/01/2023

Table: New functionality with option to group rows. The data attribute accepts a two-level array, with the first level being the rowgroups. It is necessary to indicate type as section and label with the name of the group of rows Horizontal Menu: Fixed styles when hovering over an element with a very long text Accordion Item, Alert, Cookies, Drawer, Faq Item, Hero, Modal, Section, Toast: Renames the title, item-title, cookie-title, or drawer-title attribute to title-text for all components, to avoid collision with the native title attribute of HTML elements Documentation: Tutorials directory added to Storybook New documentation: Pagination

0.3.0

07/19/2023

Datepicker: Add datetime option to the type attribute, a combination of the Datepicker and Timepicker component Header and Footer: updated svg logos Illustrations: Added assets to Storybook Table: Variant with reduced spacing by using the compact attribute to true Cards: The interactive attribute is removed, the interactive elements of the cards are the internal links Select: Fix styles when inserted inside Modal component Checkbox: Correction of styles when it is inserted inside the footer of a Modal Spinner: Console bug fix Header Logo: Maximum height of 64px Header Item: Style correction Logo Presidencia España EU Footer Logo: The width attribute is added (accepts values in px, rem and %, including or not the unit), and justify (accepting the values of flex justify-content: flex-start, center, flex-end, etc) New documentation in Storybook: Dropdown, Datepicker, Table, Timepicker

0.2.4

06/21/2023

Textarea: New `textarea-min-height` property available. Fixed default max height to 40px Radio: Added `true-label` property, allows to manage checkbox values instead of using `label`. Example added in Storybook Modal: style correction when the modal has a select component inside. Added example with custom content to Storybook Fix Table: correction of the horizontal/vertical scroll when using the tooltip inside a table in windows Fix Spinner: Spinner position fix, add `scroll-to-top` property only available when `lock-screen` property is enabled Datepicker and Timepicker: added `required` property Fix Tag: the information of the clicked element is added to the `closeEvent` event Table: an example is added in the Storybook of a table with a dropdown or dropdown menu inside Form: an example of a completed form is added to the Storybook Form Elements: Added `error-message` and `slot="error"` property for checkbox and radios Fix Checkbox and Radio: adjust height styles

0.2.3

06/07/2023

Horizontal Menu: new clickCallback property on horizontal-menu-item elements, allows passing a function when performing on the click event Horizontal Menu: the itemClick event sends the entire clicked item in the detail property Vertical Menu: new clickCallback property on vertical-menu-item elements, allows to pass a function when performing on the click event Breadcrumbs: new clickCallback property on breadcrumbs-item elements, allows you to pass a function on perform on the click event Link: new clickCallback property, allows you to pass a function when performing on the click event Dropdown: new propertyxwad clickCallback on dropdown-item elements, allows to pass a function on perform on the click event Table: styles to fit images inside cells to a maximum width Timepicker: fix incorrect import EventEmitter causing a typescript error Toast: fix titleText property for title in Storybook and z-index added Hero: fix title property, replace with text-title to avoid native accessibility tooltip Checkbox: added example in Storybook with the true-label property, allows passing a different value to the text associated with the checkbox (label) Select: fix padding-right, list height and accessibility. Added option to set sizes in Storybook Fix Angular compatibility: fix compile and typescript errors Header: Added skip link to content for accessibility recommendation. The id of the container to jump to is specified with the skip-content-link prop, by default the value is '#main' Welcome page added to Storybook Fix Tree: Fixed min height to auto

0.2.1

04/26/2023

Fix generateId function: modified method for http compatibility

0.2.0

04/25/2023

Input: allows the use of new properties `input-mode` and `pattern`. Input Number: allows use of the `max-length` and `min-length` props Header: accessibility settings in the search engine, new `searchOpened` event emitted when the search engine panel is opened Vertical Menu - Tree: new component, variant of the Vertical Menu component, when we pass the prop `menu-type="tree"`.

0.1.0

04/10/2023

Footer: allows full customization of the main footer logos. Using `slot='primary-logos'`. Header: bug fix in the responsive display of logos Vertical Menu: correction of cut point and styles for hover and pressed state Input, Textarea, Checkbox, Input Number, Select, Search, Datepicker, Timepicker y Button: gestión del atributo `name`. Link: allows the `title-text` prop to add the `title` attribute to the link Form elements (Input, Textarea, Input Number, Select, Datepicker and Timepicker): new status properties `success` and `error`. New internal translations of components in ca, eu, va and gl Checkbox, Radius and Select: correction of hover, selected and disabled styles New token values: color-border-input and shadow-200 Box-shadow style correction for panel elements: Timepicker, Datepicker, Hader search panel, Select, Dropdown, Horizontal menu, Megamenu, Toast and Cookie banner. Breadcrumbs: correction in `disabled` property, changed to `is-disabled` to avoid conflicts with nativ attribute. Header: New version of the header search engine, including logos, language selector and Help button.

0.0.9

03/15/2023

Vertical Card: allows adding an image by means of a slot, in addition to the `image` property. Footer: version of the Footer without GOB logo, by adding the `show-footer-logo` property with value `false`. Section: layout correction for Cards version. The `image-object-fit` property is added with the accepted values `cover` and `contain`. Being `cover` the default value Header: media query correction DatePicker, Search, Pagination accessibility issue fixes Added documentation section for utilities to Storybook: Classes, Colors, Icons and Tokens. Added version of the library to Storybook Added Changelog page to Storybook

0.0.8

02/27/2023

Corrections of accessibility issues. CSS support for theme generation functionality Updated secondary color tokens

0.0.7

02/10/2023

Initial release of DINTEL component system Accessibility approach of the first component Utilities and aids: spacing, colours, typography and alignment Components: Accordion, Alert, BackTop, Breadcrumbs, Button, Horizontal Card, Vertical Card, Checkbox, Collapse, DatePicker, TimePicker, Splitter, Dropdown, File Loader, Horizontal Menu, Icon, Input Number, Input, Link, List, Modal, Pagination, Progress, Radius, Search, Select, Spinner, Steps, Table, Tabs, Label, Toast, Tooltip, Vertical Menu Modules: Cookies, FAQ, Comments, Footer, Header, Hero, Section.

This website uses own and third party cookies to provide a better service. If you continue browsing we consider that you accept its use.

NextGenerationEU European Union Funding Logo Transformation and Resiliency Recovery Plan Logo Spain digital logo Legal notice Accessibility Cookies policy Contact Sitemap