Latest Releases

Nord Design System’s parts are versioned and released using Node Package Manager. NPM’s organization page lists all packages available and their most recent versions.

Web Components #

2.6.1New#

• Simplify Drawer component usage examples.
• Release date 28.9.2022.

2.6.0 #

• Adds new Drawer component, documentation, and examples.
• At small screen sizes, the Drawer component opens on top of the content. At larger screen sizes, the component pushes the content towards left. The current breakpoint for this behaviour is 1240px.
• Layout component gets a new example that shows how to integrate the Drawer component.
• Popout component gets a new overlay in this release for smaller screens so that it’s easier to close by tapping outside.
• Popout component gets a new open property that controls whether the popout is open or not.
• We’ve improved Popout’s performance by avoiding doing work if popout is closed.
• We’ve improved the positioning of xs sized icons inside Button component.
• Navigation sidebar is now hidden in the Layout component if nothing is passed into the slot.
• Tooltip component has been improved and now closes more reliably after a click.
• Release date 27.9.2022.

2.5.0 #

• Adds new --n-button-background-color CSS Custom Property for the Button component that allows developers to control the background color of the button, using color tokens.
• Release date 27.9.2022.

2.4.0 #

• Adds new xs (10px) and xxs (8px) icon sizes which are replacements for the old xs size. This is a non-breaking change so no actions are required from your side.
• This is done to improve the rendering of our smallest icons since they now align with the pixel grid used for icons.
• Release date 16.9.2022.

2.3.0 #

• Adds support for small and large sizes for the Input component.
• Adds support for small and large sizes for the Textarea component.
• Adds support for small and large sizes for the Checkbox component.
• Adds support for small and large sizes for the Date Picker component.
• Adds support for small and large sizes for the Select component.
• Adds new usage examples for all components with new size property.
• Updates row selection table example to use correct size Checboxes (small).
• Release date 15.9.2022.

2.2.0 #

• Adds new examples in both Vue and React showing how to combine Tanstack Table and AG Grid with Nord Design System, in order to build a table with sorting, resizable columns, draggable and re-orderable columns, plus sticky/pinned columns. See the updated Table component docs and examples.
• Improves Table component CSS injection so it works inside Shadow DOM.
• Improves Table component styles when used in a Card component without a header.
• Adds column sorting styles to Table component.
• Adds documentation for more advanced Table component use cases.
• Removes our deprecated CEM plugin since it’s now natively supported.
• Makes it possible to have external examples for components.
• We’ve created a new GitHub repository with Vue and React table examples.
• Release date 13.9.2022.

2.1.0 #

• Adds new animal category icons: generic-suidae, generic-sheep, generic-rodents, generic-reptilia, generic-leporidae, generic-fish, generic-feline, generic-equidae, generic-cattle, generic-canine, generic-birds, generic-arachnida, generic-amphibia.
• Changes medical-insurance icon from “a hand holding a plus sign” to represent “a shield.”
• Improves interface-dropdown-small icon positioning.
• The small icon dimensions are changed from 11px to 12px.
• Release date 9.9.2022.

2.0.2 #

• Fixes an issue which caused the new success style of Badge component to disappear.
• Improves visual screenshot diff tests and their accuracy.
• Release date 9.9.2022.

2.0.0 #

• With the new 2.0.0 release, all Nord’s Web Components are out of draft status and production ready.
• Our Web Components now offer CSS custom property API to allow for fine grained control over their presentation. These aren’t offered as an alternative to properties, you should use properties whenever possible, but more as an “escape hatch” for when a component needs to meet an edge case. For more details, please see migration guidelines.
• We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products. For more details, please see migration guidelines.
• This release changes the way our Badge component works. The main difference is that we’ve switched away from white badges with tiny circular indicators to more noticeable badge style with colored background. For more details, please see migration guidelines.
• Button component now automatically sets the correct icon color for each style variant so that you don’t have to do this manually anymore. We’ve done this to improve the developer experience and simplify the usage. This is a non-breaking change and requires no changes from your side.
• Makes Table component have slightly tighter spacing by default to fit more data into view.
• We’ve switched to using the new status colors in Avatar component.
• Adds new neutral and progress styles for Badge component and makes “neutral” the new default style.
• Adds many new Badge component examples.
• Adds new visual style for Banner component.
• Updates all component usage examples to use correct new color styles.
• Adds 4 new progress icons for use with Badge component.
• Adds support for showing progress in Badge component.
• All component CSS Custom Properties have been updated to follow a “private” syntax.
• Any of those properties we want exposed have been opened up with a “public” property.
• Public properties have been documented and exposed in our docs site.
• Component styles have been updated to account for these changes.
• Tests adjusted from refactoring and custom property updates.
• Examples adjusted to account for new custom property names.
• Some refactoring in various components.
• Release date 7.9.2022.
• For migration guidelines, please see Migration to 2.0.0.

Migration guide to 2.0.0

1.14.3 #

• Handles case where Layout’s nav-toggle element may get replaced in SPA contexts due to route changes.
• Improves z-index stacking for active Nav Items to avoid overlap.
• Remove MediaQueryListener, merge functionality into EventListener.
• Small clean up to use EventListener in Popout and Layout components.
• Switch to using Icon component internally in Select component.
• Adds try/catch to our storage utility to avoid issues where localStorage is not available.
• Adds new Card component example with sections.
• Release date 29.8.2022.

1.14.2 #

• Fixes a bug in the Button component that in some cases could cause an infinite loop.
• Adds new medical-insurance icon.
• Release date 24.8.2022.

1.14.0 #

• Adds new size option for Dropdown component with new optional s, m and l sizes. See an example.
• Makes Dropdown component better support varying content lengths by defining sensible min and max widths.
• Remove unnecessary min-inline-sizes from all Dropdown Groups across the docs and examples.
• Adds new Button with Dropdown example under Button component.
• Make Banner component respect CSS Framework’s spacing utilities.
• Improve Dropdown component examples to include correct dropdown icons in toggles.
• Switch to using correct size tokens for Select component icon instead of random values.
• Updates all Node.js dependencies including Lit to the latest versions.
• Release date 17.8.2022.

1.13.1 #

• Adds support for null as parent value in Command Menu.
• Release date 12.8.2022.

1.13.0 #

• Adds new property to control loading state for Button. See example.
• Adds two new examples for Button to show how loading state works and how to utilize it.
• Removes old Spinner Button examples and creates new updated examples under the Button itself.
• Improves Popout component’s examples.
• Improves Spinner component’s positioning. Spinner doesn’t anymore try to absolute position itself inside a container. With this change, we’ve also added a new example which shows you how to achieve the old positioning behaviour if you need it: view an example.
• Release date 11.8.2022.

1.12.0 #

• Adds new row selection example for the Table component with the capability to select/deselect all rows via a global checkbox selection.
• Adds new striped style variant for the Table component.
• Improves Table component’s responsive behavior. Overflow behaviour has been moved from Card component to Table component and we’ve tweaked the padding of each table cell to fit more content and align better with surrounding elements.
• Adds new scroll snap feature for the Table component.
• Adds new header-end slot to Card component.
• Adds interface-grabber, interface-grid, interface-sort-small, interface-sort-up-small and interface-sort-down-small icons.
• Release date 10.8.2022.

1.11.1 #

• Adds indeterminate state to Checkbox component.
• Improves and simplifies the usage of z-index design tokens across all components.
• Release date 4.8.2022.

1.10.0 #

• Adds new QR Code component and documentation.
• Adds readonly property to input and textarea components.
• Adds autocomplete property to input, textarea, and select components.
• Improves table component’s documentation and examples.
• Release date 2.8.2022.

1.9.1 #

• Fixes Select component disabled style to match Input component disabled style.
• Release date 30.6.2022.

1.9.0 #

• Adds new Toast component and documentation.
• Adds new Toast Group component and documentation.
• Adds new Divider component and documentation.
• Improves how Badge component wraps in Chrome browser.
• Changes Layout component to not use absolute positioning.
• Fixes Modal component z-index issue.
• Improves Modal component’s body/scrollbar lock behaviour.
• Adds show() / hide() methods to Dropdown component.
• Adds improvements to Application template:
  • Adds confirm modal for delete actions in table.
  • Uses toasts throughout for messaging.
• Removes expand property from the following components which didn’t utilize it:
  • Toggle
  • Checkbox
  • Radio
• Release date 30.6.2022.

1.8.3 #

• Fixes React/Vue issue whereby updating the text of Button component after first render causes the proxy button to be removed (this is due to aggressive DOM reconciliation by the frameworks).
• Make sure users can use the scroll the Navigation component contents while the nav resize toggle is present (we’ve moved this more towards right while removing overflow hidden to allow the user to hover this outside of the edges a little).
• Makes resizing of Navigation sidebar easier as you don’t have to be so exact anymore.
• Makes sure badges show up when text does not fit into the Nav Item component. Previously if an item’s text didn’t fit into the Nav Item, the badge got pushed out of the screen and did not show at all.
• Fixes an issue which caused the Layout component resize functionality to break the layout in Safari when using keyboard only.
• Removes custom scrollbar and unnecessary shared component styles from Navigation component.
• Refactors the Tab Group list overflow scrolling shadow effect and fixes support for right to left scrolling.
• Account for flex gap in Tab Group overflow shadows.
• Use box shadows instead of gradients to reveal overflow shadows in Tab Group.
• Fixes the Tab Group component sticky header background.
• Minor adjustments to the Tab Group shadow positioning, and accounting for scrollbar.
• Fixes right to left support for Tab Group.
• Release date 27.6.2022.

1.8.2 #

• Adds two new high contrast Nord themes.
• Hide overflow-y in Tab Group, prevent scrollbar on mousedown.
• Fix issue with Select component where wrong item would be selected in Safari.
• Release date 21.6.2022.

1.8.0 #

• Adds new padding property and examples for Layout component.
• Adds new Tabs template to demonstrate how the tabs can be used in an application view.
• Adds more Tab Group component usage examples.
• Adds more Layout component usage examples.
• Improves the padding property of Tab Group component.
• Improves the sticky property of Tab Group component.
• Makes it possible to use tabs inside of Layout component without extra space.
• Release date 17.6.2022.

1.7.0 #

• Adds new Tab Group component and related examples.
• Adds new Tab component and related examples.
• Adds new Tab Panel component and related examples.
• Adds new Skeleton component and related examples.
• Nav Item badges have a new redesigned position and it’s now possible to have a badge in any item, including ones with sub items. View an example.
• Updates all component package dependencies including Lit and Floating UI Dom.
• Makes sure all :host elements have box-sizing: border-box set by default.
• Fixes Dropdown import of the Popout component.
• Release date 16.6.2022.

1.6.1 #

• Fixes font-sizing in Nav Group component.
• Release date 14.6.2022.

1.6.0 #

• Adds new Modal component and related examples.
• Adds new prefix and suffix support for Input component.
• Adds new re-designed destructive style for Button component.
• Adds support for form attribute in Button and other form components.
• Switches to using REM based font-sizes instead of pixels for better accessibility.
• Moves Toggle component out of draft status.
• Moves common font-size rules from components to shared CSS.
• Improves “enter to submit” behaviour in Input component.
• Refines Button’s transition styles to only include what is necessary rather than all.
• And other performance improvements and bug fixes.
• Release date 14.6.2022.

1.5.1 #

• Currently there is some friction when using our components in a Next.js app. It’s possible to overcome these issues yourself, but to make the process easier this version now offers specialized integration for Next.js. Please see updated usage guidelines for React.
• Restructures @nordhealth/react build process.
• Release date 6.6.2022.

1.5.0 #

• Adds new Toggle component, updated examples, and new documentation.
• Release date 24.5.2022.

1.4.0 #

• Adds new switch Button component style variant which is reserved for the clinic switcher in the top left corner of an application.
• Simplifies all Button, Navigation and Layout component examples by removing all custom CSS.
• Simplifies all templates by removing most custom CSS.
• Moves previous custom clinic icons from components into the CSS Framework.
• Release date 20.5.2022.

1.3.0 #

• We’re deprecating health-light, health-dark, vet-light and vet-dark themes to simplify and unify Nordhealth’s branding for all digital products.
• The components have now been tested on React 18 as well, so we’ve extended the React peer dependency range to >= 17.
• Support for right-to-left languages has been improved.
• Navigation can now be resized and the size is saved to localStorage for the user, no need for your team to do any work to support this, it’ll remember the settings itself.
• Navigation and Layout components now support resizing and hiding/showing with multiple different methods which should provide a lot of flexibility for our users in the future:
  • Using mouse/touch gesture to drag it to hidden state and hover to reveal for quick access and tap/click to show permanently.
  • Using keyboard tab + arrow left and arrow right keys users can resize which improves accessibility. Also supports home and end keys to minimize/maximize the width via keyboard.
  • Using the command menu you can set a hotkey for toggling the navigation menu.
  • Using keyboard shortcut to show and hide it.
  • On smallest viewports it’s hidden by default and can be revealed via the hamburger menu by tapping it.
  • You can try all these things in our Application example template.
• Fixes coverage report not being generated from Docker container.
• Improves focus styles for Clinic Switcher in all examples.
• Improves the usage examples for Navigation component and templates.
• Layout component has a new navOpen property for controlling whether the navigation is hidden off-screen or not. Defaults to true for wide viewports, and false otherwise.
• Layout component has a new navToggle property that is used reference an element that should toggle the navigation.
• Adds drag(start, end) command to existing mouse plugin for tests.
• Adds MediaQueryController for hooking easy integration of matchMedia plus listeners into component.
• Adds truncation to heading text in Nav Group component.
• Adds custom scrollbar styling for Navigation component.
• Provides :focus fallback for environments where :focus-visible is not supported.
• Fixes warning logged by Command Menu, no need to treat any action as selected if command menu is not open.
• Includes also small generic performance and bug fixes.
• Release date 20.5.2022.

1.2.0 #

• You can now control the breakpoint of a responsive Stack component.
• We’ve deprecated Stack component’s previous responsive property and will remove it in a future version. We recommend using standard CSS media queries over this old property. Please see the updated usage example.
• We’ve switched to using matchMedia instead of ResizeObserver to check the viewport size in Popout component.
• Changes x and y properties in Popout to have convention prefix and clearer names.
• Updates visual presentation of deprecated component properties in docs.
• We now show vertical scrollbar in Dropdown component only when the content requires it (if it does not fit into the available vertical space).
• Release date 12.5.2022.

1.1.2 #

• Introduces new style for dropdowns and popouts on small viewports where they slide out from the bottom of the viewport.
• Moves all visual diff tests to run inside a Docker container.
• Sets a specific width to text inputs for consistency across browsers.
• Uses box-sizing to make the Date Picker input the same size on Chrome and Safari.
• Switch to using esnext esbuild config.
• Release date 12.5.2022.

1.0.1 #

• Makes condensed table style more condensed.
• Fix issue in getMonthNames that caused February to disappear from month dropdown.
• Update dependencies to remove workaround for TS files in test/dev servers.
• Use cond directive instead of ifDefined.
• Improve typing for fsm, now TypeScript will complain about any incorrect states.
• Adds observe decorator to simplify reacting to property changes.
• Removes redundant assignments from class constructors.
• Release date 2.5.2022.

1.0.0 #

• Official production release of @nordhealth/components and @nordhealth/react!!! 🎉
• For migration guidelines, please see Migration to 1.0.0.
• For documentation and usage guidelines, please see Web Components.
• For documentation about localization, please see Localization guidelines.
• Comes with many new production ready components such as: Progress Bar, Dropdown, Dropdown Group, Dropdown Item, Popout and Header.
• We’ve renamed action slot in header to end to match the naming conventions we use elsewhere.
• We’ve set stretch as the default align-items option for Stack component.
• We’ve added baseline, space-between, space-around and space-evenly options for justify-content property in Stack component.
• Make sure the align-items property always defaults to stretch for Stack component.
• Make sure Dropdown Item contents stay on one line and get truncated if too long to fit into the available space.
• Improve Dropdown component’s close-on-blur behavior in Safari.
• Marks shadowRootOptions in Dropdown as internal to hide it from the public docs.
• Make sure we properly handle unknown icon names in Icon component when loading from CDN.
• Removes gradients from primary buttons across all themes.
• Make sure disabled Input component always has the correct border color, no matter which element is hovered.
• Adds new xxl size for Avatar component.
• Makes Card component better support Stack where cards have the same size.
• Adds support for space-between, space-around and space-evenly justification for Stack component.
• Adds new responsive property for Stack which allows you to stack contents automatically when the viewport goes under certain threshold.
• Adds new wrap property for Stack which defines whether the Stack items are forced in a single line or can be flowed into multiple lines.
• Adds many new Stack usage examples.
• Fixes icon component’s sizing when used inside a flex container.
• Adds new Profile template into documentation.
• Make sure the heading in Dropdown Group stays on one line and gets shortened if really long.
• Converts border colors in all themes to be stronger to create a more finished look.
• Adds new less prominent default, card and header box shadows for all themes and additionally improves their legibility by adding a surrounding gray surface area.
• Adds call toString() on Select component’s value, for convenience when options are numbers.
• Adds LocalizeController for use in components.
• Exposes registerTranslation function for use in apps.
• Extracts all localized strings from components and gathers them in a translation file.
• Adds new Localization guidelines into docs under “guidelines” section.
• When using our React components, the types for event handlers no longer need to be defined like this:

  // TS complained unless you had a union of both types
  function handleChange(e: FormEvent | Event) {};
  <Input onChange={handleChange} />

  Now you can define them as:

  function handleChange(e: Event) {};
  <Input onChange={handleChange} />

• Fixes positioning of Popout component when nested.
• Fixes positioning of Tooltip component when nested.
• Fixes Popout component positioning when opening for the first time.
• Removes empty space when Popout component is added into a view.
• Hides Dropdown if focus moves elsewhere (improving keyboard accessibility).
• We now hide Tooltip component on click.
• Tweaks tooltip timings: longer delay to activate, shorter transition times.
• Add new dropdown examples to application template.
• Prevent auto scrolling when returning focus to Popout component trigger.
• Prevent Popout hide/show logic if already in closed or open state.
• Use :focus-visible to Navigation component to improve mouse user experience.
• Adds better disabled day styles for Calendar component.
• Adds new expand property for Calendar component.
• Adds various new usage examples for Calendar component.
• Adds better Navigation component examples to documentation.
• Removes extra spacing from Select component icons since these are no longer needed.
• Adds new clinic switcher example for Dropdown component.
• Makes sure hover text color is always correct for slotted contents in Dropdown Item component.
• Adds performance improvements to Popout component by only running autoUpdate functionality when the popous is open.
• Improves Popout component’s automated tests.
• Fixes Command Menu font-size bug which caused icons to show in a wrong position.
• Release date 13.4.2022.
  Migration guide to 1.0.0

1.0.0-rc.1 #

• Initial release candidate of @nordhealth/components.
• For documentation and usage guidelines, please see Web Components.
• Comes with 5 new components: Progress Bar, Dropdown, Dropdown Group, Dropdown Item, and Popout.
• We now map logical to physical properties in tooltip and popout, ensuring correct animations in RTL mode.
• We now use correct chevron icon in command menu in RTL mode.
• Tooltip now uses logical positions to better support RTL mode.
• Adds support for aria-expanded to button component.
• Adds support for aria-haspopup to button component.
• Release date 31.3.2022.

1.0.0-beta.24 #

• Allow multiple elements to use the same tooltip component.
• Fixes event targets to allow removal of event listeners.
• Restructures mouse command API and adds hover command.
• Fixes to automated test suite.
• Updates Nord CSS Framework to latest.
• Release date 30.3.2022.

1.0.0-beta.21 #

• Renames before and after slots to start and end in each component.
• Fixes a CSS bug with Input component slotted icons.
• Fixes an issue caused by rollup-plugin-summary npm package.
• Release date 29.3.2022.

1.0.0-beta.20 #

• Adds new Progress Bar component and related documentation.
• Bug fixes to Radio component’s styles.
• Moves Spinner component out of draft state.
• Adds fixes to visual regression tests.
• Release date 29.3.2022.

1.0.0-beta.19 #

• Adds new line-height-caption token.
• Release date 19.3.2022.

1.0.0-beta.18 #

• Adds new color-text-success token.
• Release date 17.3.2022.

1.0.0-beta.17 #

• Rename Calendar's nord-select event to change.
• Add nord-focus-date event to calendar.
• Ensure documentation for calendar and date picker is correct.

1.0.0-beta.16 #

• Fixes an issue which prevented programmatically unchecking a checkbox after it was manually checked.
• Release date 15.3.2022.

1.0.0-beta.15 #

• We’re renaming color-primary to color-accent to better support our themes.
• We’re renaming color-text-inverse to color-text-on-accent to better support our themes and better explain where the color should be used.
• Release date 14.3.2022.

1.0.0-beta.14 #

• Adds new “justify-content” property for Stack component.
• Fixes the expand sizing for Select and Input components to respect 100% width.
• To improve usability, make the placeholders have more contrast against actual text content.
• Make sure Nord’s CSS Framework reset utility helper doesn’t break Radio component styles.
• Improve Avatar component’s theming support.
• Improve Tooltip component’s theming support.
• Release date 13.3.2022.

1.0.0-beta.13 #

• We’re removing color-primary-strong token from the system as it was only referenced in one location.
• Release date 12.3.2022.

1.0.0-beta.12 #

• Fix all button component hover styles.
• Adds the ability to prevent command menu opening.
• Release date 11.3.2022.

1.0.0-beta.11 #

• Updates correct statuses for all components to reflect their working state.
• Improves Date Picker component test automation.
• Improve behavior of button when placed in stack.
• Make sure we only show button hover styles when actual button is hovered.
• Release date 10.3.2022.

1.0.0-beta.8 #

• Adds new Avatar component.
• We fixed a bug related to form events where the user might’ve previously got double events: the native one, and the one we dispatch ourselves. This is now fixed.
• Adds two new icons into Nordicons: interface-info and interface-warning.
• Release date 9.3.2022.

1.0.0-beta.6 #

• Adds support for no shadow variant in Banner component.
• Adds responsive functionality into Layout component.
• Fix icon import in Checkbox component.
• Various bug fixes and performance improvements.
• Release date 7.3.2022.

1.0.0-beta.4 #

• Fixes Banner component layout bugs.
• Release date 5.3.2022.

1.0.0-beta.3 #

• Adds new Banner component.
• Adds new interface-info icon.
• Adds new weak status colors into tokens.
• Release date 5.3.2022.

1.0.0-beta.2 #

• Adds new Empty State component.
• Release date 5.3.2022.

1.0.0-beta.1 #

• Adds new draft Layout component.
• Adds links styles into base components.
• Release date 5.3.2022.

1.0.0-beta.0 #

• Make sure Radio component styles work with Provet Cloud.
• Make sure Checkbox component styles work with Provet Cloud.
• Make sure common FormField component styles work with Provet Cloud.
• Fix all style issues discovered in Diarium testing.
• Fixes an issue which caused nested stacks to not respect default medium space.
• Release date 4.3.2022.

1.0.0-alpha.59 #

• Redesigned dark gray shades for Vet and Nord dark themes.
• Updates medical-bandage, medical-blood, medical-instrument-stethoscope, medical-pill and medical-radiology-scan to match the style of the rest of the icons.
• Adds new interface-content-book icon.
• Release date 3.3.2022.

1.0.0-alpha.57 #

• Add a single file output for Web Components to be used on documentation website.
• Release date 1.3.2022.

1.0.0-alpha.56 #

• Adds bug fixed to Tooltip component’s styles.
• Release date 26.2.2022.

1.0.0-alpha.55 #

• Adds new @nordhealth/react output that contains auto-generated react wrappers for the web components found in @nordhealth/components.
• The versioning of our new React components follow the same versioning as Web Components (this package).
• Updates licensing and package.json details.
• Release date 24.2.2022.

1.0.0-alpha.54 #

• Adds new Navigation component that is used to display the primary navigation in the sidebar of an application.
• Adds new Navigation Group component that is used for grouping navigation items into related categories.
• Adds new Navigation Item component that populates sidebar navigation with links.
• Adds tweaks to Tooltip component:
  • Improve accessibility when tooltip is “attached” to focusable web component.
  • Ensure only one tooltip shown at a time.
  • Fix z-index issues with tooltip.
  • Adds ability to dismiss tooltip with Esc.
• Header component now has a min-height to match the navigation sidebar.
• When button is used as a disabled link, it’s now removed from tab order and correctly reported as disabled to screen readers.
• We’ve improved the primary button variant focus styles.
• Adds support for button component to customize the background gradient via CSS custom properties.
• Improve Tooltip component text wrapping.
• Release date 23.2.2022.

1.0.0-alpha.51 #

• Ensure we always see slotchange events.
• Use common component styles for all input components, remove redundant styles from FormField.css.
• Release date 18.2.2022.

1.0.0-alpha.49 #

• Changes Command Menu hotkeys property to shortcuts.
• Add font size and color to header component.
• Improves margin handling for Fieldset component.
• Fixes Checkbox component to use correct border radius.
• Updates all components to use common component CSS reset.
• Various other bug fixes and performance improvements.
• Release date 17.2.2022.

1.0.0-alpha.48 #

• Adds new Header component that provides designated space for labelling the currently viewed context as well as providing primary actions.
• Add labels to icons in Button component usage examples.
• Updates all library dependencies and migrates to Stylelint 14.
• Release date 11.2.2022.

1.0.0-alpha.47 #

• Adds new Radio component that allow user to choose only one option from a predefined set of mutually exclusive options.
• Adds new Fieldset component that is used for grouping sets of input components.
• Adds new Tooltip component that is used for displaying additional information for the currently focused element.
• Improves button components default and disabled styles.
• Improves date picker’s default and disabled styles.
• Fixes text color for current date in date picker.
• Improves checkbox component’s cursor styles.
• Makes it possible to also click on an empty area between checkbox and label to toggle checked state.
• We now use repeat directive to properly handle re-ordering of years in Calendar.
• We’ve fixed a bug in form components to ensure disabled styles are always correctly applied.
• We’ve fixed a bug with font-families in certain form components like date picker and checkbox.
• We’ve made components documentation support usage and content guidelines.
• We’ve tweaked styles to properly handle default prop values where attr is missing.
• We’ve improved Checkbox component’s disabled styles in this release.
• Release date 8.2.2022.

1.0.0-alpha.46 #

• Adds new Checkbox component that allows user to choose one or more options from a limited set of options.
• Release date 14.1.2022.

1.0.0-alpha.45 #

• Adds new Calendar component that allows user to pick a date.
• Adds new Date Picker component that allows user to enter a date either through text input, or by choosing a date from the calendar.
• Adds reusable swipe controller.
• Adds reusable language direction controller.
• Release date 13.1.2022.

1.0.0-alpha.43 #

• Add input event for all form components.
• Improve how proxy button is added to DOM (now uses Lit’s renderer, rather than imperative code).
• Add support for submitting form by hitting enter key in input field.
• Improve card with-form example to use submit event.
• Release date 13.12.2021.

1.0.0-alpha.42 #

• We’ve moved labels closer to form elements to make forms more legible.
• Adds new card component form usage examples.
• Adds new example about form validation.
• Fixed background color tokens used in docs examples.
• Release date 11.12.2021.

1.0.0-alpha.41 #

• Adds new spinner component and related examples.
• Fixes select component’s appearance in Firefox.
• Release date 10.12.2021.

1.0.0-alpha.39 #

• Prevents spellcheck in Input.
• Fixes an issue which caused textarea to animate size.
• Adds new icon usage example for button component.
• Fixes icon hover colors for button component.
• Release date 10.12.2021.

1.0.0-alpha.38 #

• Adds new textarea component.
• Adds new common form component utilities.
• Release date 9.12.2021.

1.0.0-alpha.37 #

• Improved usage examples for all components.
• New large button size introduced.
• New danger button variation introduced.
• Generic CSS fixes to components.
• Release date 9.12.2021.

1.0.0-alpha.36 #

• Adds new command menu component.
• Adds all: initial for all components.
• Makes sure components don’t break because of CSS cascade.
• Release date 7.12.2021.

1.0.0-alpha.32 #

• Adds new input component and related functionality.
• We now warn in console if you try to use draft components in production environment.
• Adds custom gap option for Stack component.
• Removes default pointer cursor from table styles
• Adds custom focus outline to select and button components.
• Adds input hint to Select.
• Spacing between different form components is made consistent.
• Adds new align-items property for Stack.
• Release date 1.12.2021.

1.0.0-alpha.31 #

• Adds new Table, Badge and Card components.
• Adds new target property for Button component.
• Not ready for production usage.
• Release date 20.10.2021.

1.0.0-alpha.29 #

• Updates Nord package dependencies to latest.
• Changes select component to use official Nordicon icons.
• Makes button component support download attribute when it is used as a link.
• Makes button component support the new currentColor functionality in Nordicons.
• Not ready for production usage.
• Release date 17.10.2021.

CSS Framework #

2.4.0New#

• Adds Description List utility helper to the CSS Framework.
• See updated usage examples for Drawer component.
• Release date 28.9.2022.

2.3.0 #

• Adds new xs (10px) and xxs (8px) icon sizes which are replacements for the old xs size. This is a non-breaking change so no actions are required from your side.
• This is done to improve the rendering of our smallest icons since they now align with the pixel grid used for icons.
• Release date 16.9.2022.

2.2.1 #

• Improves documentation and examples for new status colors.
• Release date 15.9.2022.

2.2.0 #

• The small icon dimensions are changed from 11px to 12px.
• Release date 9.9.2022.

2.1.0 #

• Adds border radius tokens as utility helpers to apply rounded corners to elements.
• Adds box shadow utility helpers to help reflect the elevation of a component or element.
• Release date 9.9.2022.

2.0.0 #

• We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products. For more details, please see migration guidelines.
• Release date 7.9.2022.

Migration guidelines

1.4.1 #

• Converts var(--n-size-icon-s) token from 12px to 11px, so that it looks visually more balanced inside buttons and similar elements.
• Updates all Node.js dependencies to latest.
• Release date 17.8.2022.

1.4.0 #

• Adds margin auto helpers so elements can be centered vertically, horizontally, and both.
• Adds grid item helpers to do the same within a grid.
• Updates demos so that stack and grid helpers are more clearly presented.
• Updates demos to show new helpers.
• Updates docs to explain new helpers.
• Release date 10.8.2022.

1.3.5 #

• Deprecates n-index-header and n-index-dropdown tokens.
• Adds new n-index-nav design token.
• Release date 4.8.2022.

1.3.4 #

• Bugfix: Missing borders and colors in CSS Framework.
• Release date 27.6.2022.

1.3.3 #

• Adds two new high contrast Nord themes.
• Release date 20.6.2022.

1.3.2 #

• Small bug fixed and performance improvements.
• Release date 17.6.2022.

1.3.1 #

• We’ve removed skeleton related gradients from CSS Framework, since the new Skeleton component does not use them anymore.
• Release date 16.6.2022.

1.3.0 #

• Switches to using REM based font-sizes instead of pixels for better accessibility.
• Adds new n-color-overlay design token that allows you to distinguish a modal layer from the layer underneath.
• Release date 14.6.2022.

1.2.1 #

• Updates to documentation and examples.
• Release date 24.5.2022.

1.2.0 #

• Adds new .n-clinic-icon helper class to generate clinic icons for Navigation and Dropdown components.
• Updates documentation for misc helpers to include examples of new clinic icons.
• Release date 20.5.2022.

1.1.2 #

• Adds new accent color styles into .n-reset utility class.
• Adds prepare script to fill gaps in npm run bootstrap so that components pkg is ready to start immediately after.
• Release date 20.5.2022.

1.1.1 #

• Adds web server for easier local development of the CSS Framework.
• Add new grid helpers and usage example, please see the documentation.
• Release date 11.5.2022.

1.0.5 #

• Adjust the specificity level of typescale styles to allow margin helpers to apply when using typescale classes.
• Adds n-typecale-m helper back into CSS Framework.
• Darkens the color-nav-surface in vet light theme to provide better contrast.
• Release date 2.5.2022.

1.0.3 #

• Adds even stronger border color styles for all light themes.
• Adds new card shadow styles with raised surfaces.
• Release date 11.4.2022.

1.0.2 #

• Converts border colors in default Nord theme to be stronger to match Veterinary theme better.
• Adds new less prominent default, card and header box shadows for all themes.
• Release date 10.4.2022.

1.0.0 #

• Initial release of @nordhealth/css.
• For documentation and usage guidelines, please see CSS Framework.
• Release date 30.3.2022.

1.0.0-beta.1 #

• Remove margins from .n-typescale helpers in CSS Framework.
• Only apply margins to typography elements when they’re inside the .n-typeset helper.
• Reduce specificity on .n-typescale helpers.
• Opt out of typeset on the typescale example to demonstrate the lack of margins on them.
• Adjust typescale helpers to be more powerful selectors.
• Release date 30.3.2022.

1.0.0-beta.0 #

• Full rewrite of CSS Framework with bug fixes and performance improvements.
• Adds new form utility classes .n-input, .n-label, .n-hint, .n-error and related states for building custom form fields.
• Adds new .n-caption text utility class.
• Adds new .n-color-accent background color utility class.
• Adds new .n-color-status-* utility classes for applying status background colors.
• Adds new .n-color-status-*-weak utility classes for applying weak status background colors.
• Adds new .n-color-text-success utility class for applying success text color.
• Release date 19.3.2022.

1.0.0-alpha.26 #

• Adds new color-text-success token.
• Release date 17.3.2022.

1.0.0-alpha.25 #

• We’re renaming color-primary to color-accent to better support our themes.
• We’re renaming color-text-inverse to color-text-on-accent to better support our themes and better explain where the color should be used.
• Release date 14.3.2022.

1.0.0-alpha.24 #

• We’re removing color-primary-strong token from the system as it was only referenced in one location.
• Release date 12.3.2022.

1.0.0-alpha.23 #

• Adds new .n-divider helper utility class.
• Release date 7.3.2022.

1.0.0-alpha.22 #

• Adds new weak status colors into tokens.
• Release date 5.3.2022.

1.0.0-alpha.21 #

• Redesigned dark gray shades for Vet and Nord dark themes.
• Release date 5.3.2022.

1.0.0-alpha.19 #

• Add anchor styles into reset.
• Add general typography into reset.
• Adjusts typography helpers to use :where() to reduce specificity.
• Adjusts reset to use :where() to reduce specificity.
• Switch to using token variables rather than static values.
• Release date 26.2.2022.

1.0.0-alpha.18 #

• Updates licensing and package.json details.
• Release date 24.2.2022.

1.0.0-alpha.17 #

• Adds new text align utilities.
• Release date 23.2.2022.

1.0.0-alpha.16 #

• We’ve created new typographic helpers for our CSS Framework.
• These make it easier to apply an HTML class to a containing element to get the basic type styles you’d expect to present content as clearly and efficiently as possible.
• Release date 18.2.2022.

1.0.0-alpha.15 #

• Updates all library dependencies and migrates to Stylelint 14.
• Release date 11.2.2022.

1.0.0-alpha.14 #

• CSS Framework package does not depend on design tokens package anymore.
• We’ve removed font CSS from the Webfonts package and moved it into this package instead.
• CSS Framework now comes with a base theme (Nord), so that it can be used standalone.
• We’ve updated the CSS Framework utils to generate margin and padding helpers with sizes at the end to improve readability.
• We’ve added diagrams to the documentation to explain how logical properties apply to different sides of an element.
• Release date 8.2.2022.

1.0.0-alpha.13 #

• Brings in latest changes from Design Tokens v2.0.3.
• Release date 13.1.2022.

1.0.0-alpha.12 #

• Complete rewrite of our CSS Framework.
• Provides a method of styling elements with as little friction as possible.
• Makes it possible to use our Design Tokens through memorable CSS based utility classes.
• We’ve tried to strike a balance between readable but brief class names in this release.
• We’ve also made sure that applying tokens using the CSS Framework comes with a reduced risk of error, to e.g. ensure you’re using our colors as they were intended to be used.
• Release date 23.12.2021.

1.0.0-alpha.11 #

• Now only includes the base tokens and relies on theming package for theming.
• Previously output file size was 21.27 KB, now is only 5.62 KB.
• Not ready for production usage.
• Release date 9.12.2021.

Design Tokens #

6.2.0New#

• Adds new xs (10px) and xxs (8px) icon sizes which are replacements for the old xs size. This is a non-breaking change so no actions are required from your side.
• This is done to improve the rendering of our smallest icons since they now align with the pixel grid used for icons.
• Release date 16.9.2022.

6.1.0 #

• The small icon dimensions are changed from 11px to 12px.
• Release date 9.9.2022.

6.0.0 #

• We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products.
• The latest version of Design Tokens introduces a few fundamental changes to the way Nord’s status colors work.
• For more details, please see migration guidelines.
• Release date 7.9.2022.

Migration guidelines

5.4.1 #

• Improves documentation for Size Design Tokens.
• Converts var(--n-size-icon-s) token from 12px to 11px, so that it looks visually more balanced inside buttons and similar elements.
• Updates all Node.js dependencies to latest.
• Release date 17.8.2022.

5.4.0 #

• Deprecates n-index-header and n-index-dropdown tokens.
• Adds new n-index-nav design token.
• Release date 4.8.2022.

5.3.0 #

• Adds new nord-high-contrast theme and related design tokens.
• Adds new nord-dark-high-contrast theme and related design tokens.
• Removes old ui properties and replaces them with theme properties instead.
• Release date 20.6.2022.

5.2.1 #

• Small bug fixed and performance improvements.
• Release date 17.6.2022.

5.2.0 #

• We’ve removed gradients section and skeleton colors, since the new Skeleton component does not utilize these anymore.
• Release date 16.6.2022.

5.1.0 #

• Switches to using REM based font-sizes instead of pixels for better accessibility.
• Adds new n-color-overlay design token that allows you to distinguish a modal layer from the layer underneath.
• Release date 14.6.2022.

5.0.0 #

• We’re deprecating health-light, health-dark, vet-light and vet-dark themes to simplify and unify Nordhealth’s branding for all digital products.
• Release date 20.5.2022.

4.2.7 #

• Adds new transition-mobile token for mobile menu transitions. Used in mobile versions of Popout and Dropdown components.
• Release date 11.5.2022.

4.2.5 #

• Darkens the color-nav-surface in vet light theme to provide better contrast.
• Release date 2.5.2022.

4.2.4 #

• Adds even stronger border color styles for all light themes.
• Adds new card shadow styles with raised surfaces.
• Release date 12.4.2022.

4.2.2 #

• Converts border colors in default Nord theme to be stronger to match Veterinary theme better.
• Adds new less prominent default, card and header box shadows for all themes.
• Release date 10.4.2022.

4.2.0 #

• Adds new line-height-caption token.
• Release date 19.3.2022.

4.1.0 #

• Adds new color-text-success token.
• Improves underlying token aliasing.
• Release date 17.3.2022.

4.0.0 #

• We’re renaming color-primary to color-accent to better support our themes.
• We’re renaming color-text-inverse to color-text-on-accent to better support our themes and better explain where the color should be used.
• We’re removing color-primary-strong token from the system as it was only referenced in one location.
• This color is now replaced with CSS filters inside the system which darken the existing color-primary.
• Hence all of these are breaking changes, we’re releasing a new major version.
• Release date 14.3.2022.

2.2.1 #

• Updates previous weak status colors with new dark variants.
• Release date 7.3.2022.

2.2.0 #

• Adds new weak status colors into design tokens.
• Release date 5.3.2022.

2.1.0 #

• Redesigned dark gray shades for Vet and Nord dark themes.
• Release date 3.3.2022.

2.0.5 #

• Updates licensing and package.json details.
• Release date 24.2.2022.

2.0.4 #

• We’ve changed tokens output to only include nord light theme, and produce additional tokens output for alternative themes to simplify usage.
• Release date 8.2.2022.

2.0.3 #

• Modifies color-border-strong for Nord light theme to match the rest of the themes better.
• Release date 13.1.2022.

2.0.2 #

• Removes size-icon-input design token.
• Release date 9.12.2021.

2.0.1 #

• Adds completely new redesigned and more accessible status colors.
• Adds new text weakest color tokens.
• Adds new text error color token.
• Better automatic sorting for tokens behind the scenes.
• Release date 4.12.2021.

1.0.8 #

• Adds new n-color-surface-raised, n-color-surface-raised-dark, n-color-surface-raised-vet, n-color-surface-raised-vet-dark, n-color-surface-raised-health, n-color-surface-raised-health-dark design tokens.
• Fixes order meta data on color tokens.
• Release date 20.10.2021.

1.0.6 #

• Converts z-index and transition design tokens to use more consistent naming.
• Small bug fixes and feature improvements.
• Updates Nord package dependencies to latest.
• Release date 17.10.2021.

1.0.0 #

• Design Tokens package reaches stable state and is now ready for production usage.
• We’ve worked on adding extensive usage documentation for the design tokens.
• Additionally, we’ve added new z-index, transition, and gradient categories.
• All color themes have been re-designed form the ground up to support dark UI.
• All dropshadows have been re-designed.
• Please see the update Design Tokens documentation for more details.
• Release date 12.10.2021.

1.0.0-alpha.13 #

• Adds new box-shadow, box-shadow-modal, box-shadow-tooltip, box-shadow-nav and box-shadow-card tokens.
• Modifies color-border and color-background and adds new color-border-dark for each theme.
• Renames border-radius-small to border-radius-s.
• Changes default border-radius from 8px to 5px.
• Adds new color-overlay token for modal overlays.
• Release date 10.8.2021.

1.0.0-alpha.10 #

• Modifies dark primary color shades.
• Updates all package dependencies to latest.
• Release date 10.6.2021.

Nord Themes #

7.0.2New#

• Updates Nord Design Tokens to the latest version.
• Release date 16.9.2022.

7.0.0 #

• We’ve redesigned the underlying color system to make it more extensible and better cover the use cases of our different products.
• The latest version of Themes introduces a few fundamental changes to the way Nord’s status colors work.
• For more details, please see migration guidelines.
• Release date 7.9.2022.

Migration guidelines

6.3.2 #

• Updates all Node.js dependencies to latest.
• Release date 17.8.2022.

6.3.1 #

• Updates themes to use the latest Nord Design Tokens.
• Release date 4.8.2022.

6.3.0 #

• Adds new nord-high-contrast theme.
• Adds new nord-dark-high-contrast theme.
• Release date 20.6.2022.

6.2.1 #

• Small bug fixed and performance improvements.
• Release date 17.6.2022.

6.2.0 #

• We’ve removed skeleton related gradients from themes, since the new Skeleton component does not need them.
• Release date 16.6.2022.

6.1.0 #

• Adds new n-color-overlay design token that allows you to distinguish a modal layer from the layer underneath.
• Adds color-scheme: light/dark; into themes so that the browser uses correct theme for native elements such as scroll bars.
• Release date 14.6.2022.

6.0.0 #

• We’re deprecating health-light, health-dark, vet-light and vet-dark themes to simplify and unify Nordhealth’s branding for all digital products.
• Release date 20.5.2022.

5.1.8 #

• Adds new transition-mobile token for mobile menu transitions. Used in mobile versions of Popout and Dropdown components.
• Release date 11.5.2022.

5.1.6 #

• Darkens the color-nav-surface in vet light theme to provide better contrast.
• Release date 2.5.2022.

5.1.5 #

• Adds even stronger border color styles for all light themes.
• Adds new card shadow styles with raised surfaces.
• Release date 12.4.2022.

5.1.3 #

• Converts border colors in default Nord theme to be stronger to match Veterinary theme better.
• Adds new less prominent default, card and header box shadows for all themes.
• Release date 10.4.2022.

5.1.1 #

• Brings in latest changes from Design Tokens v4.2.0.
• Release date 19.3.2022.

5.1.0 #

• Adds new color-text-success token.
• Release date 17.3.2022.

5.0.0 #

• We’re renaming color-primary to color-accent to better support our themes.
• We’re renaming color-text-inverse to color-text-on-accent to better support our themes and better explain where the color should be used.
• We’re removing color-primary-strong token from the system as it was only referenced in one location.
• This color is now replaced with CSS filters inside the system which darken the existing color-primary.
• Hence all of these are breaking changes, we’re releasing a new major version.
• Release date 14.3.2022.

3.2.1 #

• Updates previous weak status colors with new dark variants.
• Release date 7.3.2022.

3.2.0 #

• Adds new weak status colors into themes.
• Release date 5.3.2022.

3.1.0 #

• Redesigned dark gray shades for Vet and Nord dark themes.
• Release date 3.3.2022.

3.0.6 #

• Updates licensing and package.json details.
• Release date 24.2.2022.

3.0.5 #

• Simplifies test framework for themes package.
• Release date 23.2.2022.

3.0.4 #

• Brings in latest changes from Design Tokens v2.0.4.
• Release date 8.2.2022.

3.0.3 #

• Brings in latest changes from Design Tokens v2.0.3.
• Release date 13.1.2022.

3.0.2 #

• Brings in latest changes from Design Tokens v2.0.2.
• Release date 9.12.2021.

3.0.1 #

• Brings in latest changes from Design Tokens v2.0.1.
• Release date 4.12.2021.

2.0.8 #

• Adds new color-surface-raised style into theming.
• Release date 20.10.2021.

2.0.6 #

• Small bug fixes and feature improvements.
• Updates Nord package dependencies to latest.
• Release date 17.10.2021.

2.0.0 #

• Themes package reaches stable state and is now ready for production usage.
• We’ve reworked all the colors from the ground up.
• Additionally there’re new gradients and box-shadows added.
• We’ve added new dark themes as well, so in total there are now 6 themes included in the package: nord light, nord dark, veterinary light, veterinary dark, healthcare light, and healthcare dark.
• Please see the updated Themes documentation for more details.
• Release date 12.10.2021.

1.4.1 #

• Adds new box-shadow, box-shadow-modal, box-shadow-tooltip, box-shadow-nav and box-shadow-card tokens.
• Modifies color-border and color-background and adds new color-border-dark for each theme.
• Adds new color-overlay token for modal overlays.
• Removes color-active-menu token and deprecates it.
• Release date 10.8.2021.

1.2.1 #

• Modifies dark primary color shades.
• Updates all package dependencies to latest.
• Release date 10.6.2021.

1.2.0 #

• This release refactors and renames the different color themes to be nord, health, and vet.
• Simplifies the overall naming for colors.
• Adds Subresource Integrity support (SRI).
• Release date 5.6.2021.

1.1.0 #

• Adds new Nordhealth theme.
• Renames all CSS custom properties to follow new design token structure.
• Release date 15.5.2021.

1.0.2 #

• Adds readme and license into the package.

1.0.0 #

• Initial release of @nordhealth/themes which includes Provet Cloud and Diarium themes. For documentation and usage guidelines, please see themes.
• Release date 22.2.2021.

Webfonts #

2.0.15New#

• Updates all Node.js dependencies to latest.
• Release date 17.8.2022.

2.0.14 #

• Adds prepare script to fill gaps in npm run bootstrap so that components pkg is ready to start immediately after.
• Release date 20.5.2022.

2.0.13 #

• Updates licensing and package.json details.
• Release date 24.2.2022.

2.0.12 #

• Cleans up build dir before build to prevent accidentally publishing old files.
• Release date 23.2.2022.

2.0.11 #

• Updates all library dependencies and migrates to Stylelint 14.
• Release date 11.2.2022.

2.0.10 #

• We’ve removed font CSS from the package, but left the font-face definitions.
• Font CSS is now the responsibility of Nord’s CSS Framework.
• Webfonts package does not depend on design tokens anymore.
• Release date 8.2.2022.

2.0.9 #

• Small bug fixes and feature improvements.
• Release date 4.12.2021.

2.0.7 #

• Small bug fixes and feature improvements.
• Updates Nord package dependencies to latest.
• Release date 20.10.2021.

2.0.0 #

• Webfonts package reaches stable state and is now ready for production usage.
• Please see the updated Webfonts documentation for more details.
• Release date 12.10.2021.

1.1.3 #

• Updates all internal design system package dependencies to latest.
• Release date 10.8.2021.

1.1.0 #

• Unifies the naming of assets and simplifies the package overall.
• Adds base font-feature-settings for different heading levels.
• Adds Subresource Integrity support (SRI).
• Release date 5.6.2021.

1.0.4 #

• Internal improvements and bug fixes.
• Release date 15.5.2021.

1.0.3 #

• Makes @nordhealth/fonts package completely independent from @nordhealth/tokens.
• Can now be used standalone without any other package from Nord.
• Adds readme and license into the package.
• Release date 11.2.2021.

1.0.0 #

• Initial release of @nordhealth/fonts which includes Nordhealth Sans and Nordhealth Mono.
• For documentation and usage guidelines, please see Webfonts.
• Release date 11.2.2021.

Nordicons #

1.7.0New#

• Adds new animal category icons: generic-suidae, generic-sheep, generic-rodents, generic-reptilia, generic-leporidae, generic-fish, generic-feline, generic-equidae, generic-cattle, generic-canine, generic-birds, generic-arachnida, generic-amphibia.
• Changes medical-insurance icon from “a hand holding a plus sign” to represent “a shield.”
• The small icon dimensions are changed from 11px to 12px.
• Improves interface-dropdown-small icon positioning.
• Release date 9.9.2022.

1.6.0 #

• Adds new interface-cancelled-small, interface-complete-small, interface-incomplete-small, and interface-partially-complete-small icons.
• Release date 7.9.2022.

1.5.0 #

• Adds new medical-insurance icon.
• Updates tags for medical-heart-rate icon to cover usage with health plans.
• Release date 24.8.2022.

1.4.0 #

• Adds new interface-grabber, interface-grid, interface-sort-small, interface-sort-up-small and interface-sort-down-small icons.
• Release date 10.8.2022.

1.3.9 #

• Fixes potential security vulnerability in the dependencies.
• Release date 14.6.2022.

1.3.8 #

• Adds prepare script to fill gaps in npm run bootstrap so that components pkg is ready to start immediately after.
• Release date 20.5.2022.

1.3.7 #

• Adds two new icons into Nordicons: interface-info and interface-warning.
• Release date 10.3.2022.

1.3.5 #

• Adds new interface-checked-circle icon.
• Release date 7.3.2022.

1.3.4 #

• Adds new interface-info icon.
• Release date 5.3.2022.

1.3.3 #

• Updates medical-bandage, medical-blood, medical-instrument-stethoscope, medical-pill and medical-radiology-scan to match the style of the rest of the icons.
• Adds new interface-content-book icon.
• Release date 3.3.2022.

1.3.2 #

• Updates licensing and package.json details.
• Release date 24.2.2022.

1.3.1 #

• Outputs all icons as ES Modules now.
• Simplifies the build logic behind the scenes.
• Release date 4.12.2021

1.2.2 #

• Adds three new icons into the library: generic-bug, generic-github and generic-slack.
• Release date 20.10.2021

1.2.0 #

• We updates Nordicons interface to support downloading icons in addition to directly copying the vectors to a Figma file.
• We manually fixed 42 icons to work in Figma when you use the copy paste functionality.
• Release date 17.10.2021

1.1.2 #

• Fix currentColor definitions in 14 icons. An issue that prevented changing color of these icons.
• Updates all tags in Nordicons package to make them more consistent.
• Release date 16.10.2021

1.0.1 #

• Improves the meta data of icons and tagging.
• Updates Nord package dependencies to latest.
• Release date 15.10.2021.

1.0.0 #

• Initial release of @nordhealth/icons.
• Comes with 188 carefully hand picked and designed icons.
• For documentation and usage guidelines, please see Nordicons.
• Release date 14.10.2021.

Figma Toolkit #

2.9.0New#

• Updates Card component to use space-L token for horizontal padding
• Deprecates List component
• Adds Description list component and removes padding from base component
• Updates component name of Sheet component to Drawer, adds fixed footer, and custom content slots
• Release date 28.9.2022.

2.8.0 #

• Adds new version of the Input Component. This includes support for prefix, suffix, icons, and sizes for small and large sizes for the Input component.
• Updates the pagination component to enable interactivity and jump to first & last page.
• Adds new xs (10px) and xxs (8px) icon sizes which are replacements for the old xs size. This is a non-breaking change so no actions are required from your side.
• Adds new animal category icons: generic-suidae, generic-sheep, generic-rodents, generic-reptilia, generic-leporidae, generic-fish, generic-feline, generic-equidae, generic-cattle, generic-canine, generic-birds, generic-arachnida, generic-amphibia.
• Changes medical-insurance icon from “a hand holding a plus sign” to represent “a shield.”
• Updates default card radius to default-radius token.
• Updates Button Group component.
• Updates List, Sheet, and Table components to new Badge style.
• Updates Figma Color Styles to the redesigned color system and new status colors: https://nordhealth.design/tokens/
• Release date 15.9.2022.

2.7.0 #

• Adds new medical-insurance icon to Nordicons.
• Release date 24.8.2022.

2.6.0 #

• Adds interactivity to Navigation component and Clinic Switcher.
• Adds Table header sorting with interactivity.
• Updates naming convention to s/m/l for buttons.
• Updates naming convention for Nordicons.
• Adds new interface-grabber, interface-grid, interface-sort-small, interface-sort-up-small and interface-sort-down-small icons to Nordicons.
• Release date 10.8.2022.

2.5.0 #

• Adds number input component with interactivity.
• Adds interactivity to checkbox and checkbox group.
• Release date 1.7.2022.

2.4.0 #

• Spacing token improvements in Figma including fill horizontal and fill vertical variants.
• Added labels inside of each component.
• Examples of auto-layout with space tokens.
• Removed button base component from library.
• Removed button group atoms from library.
• Release date 27.6.2022.

2.3.2 #

• Adding toast button variants.
• Updated toast component to add danger style & instance swap for close button.
• Release date 22.6.2022.

2.2.12 #

• Bugfix for card header update.
• Generic bug fixes.
• Updated default button placeholder text.
• Added buttons and selection indicator to card header.
• Fixed default instance of checkbox component in table components.
• Release date 16.6.2022.

2.2.8 #

• Removed redundant navigation indicator.
• Reverted to original position for notification indicator.
• Updated notification position in Navigation component.
• Added indeterminate checkbox variant.
• Table cell alignment correction.
• Updated spacing for table component.
• Release date 14.6.2022.

2.2.2 #

• Updated header component to improve sort indicator.
• Added sort indicator to table.
• Removed sort variant from cell columns and moved to atom/cell.
• Generic Bugfixes.
• Added sort icon to Nordicons.
• Release date 9.6.2022.

2.1.1 #

• Updated navigation component to preserve text and color overrides following icon component update.
• Removed instances of deprecated Nordicons component.
• Release date 1.6.2022.

2.1.0 #

• Created a new Icon component to add search and categories to improve icon findability in Figma.
• Previous Icon component has been deprecated and moved to the Nordicons file for reference when migrating to the new component.
• Updated banner component to preserve text overrides.
• Modified the modal component with image to use the default button styling for improved legibility.
• Release date 31.5.2022.

2.0.1 #

• Removed deprecated drop shadow styling to move to updated theme.

2.0.0 #

• Switches to using native theming for Nord dark and light themes, meaning we now use Figma Libraries instead of the previous Themer Plugin.
• We’ve removed separate Healthcare and Veterinary themes and made the Nord light theme the default. Nord dark theme exists still as well. We will next do a similar change in the code based system as well and will release new major versions of all packages that rely on the theming.
• We’ve added new stronger border color styles for the light Nord theme to reflect recent changes in our design tokens.
• We’ve added new card shadow styles with raised surfaces to reflect recent changes in our design tokens.
• Color libraries are moved onto separate files out of the Nord Figma Toolkit.
• Minor bug fixes and cleanup.

1.0.3 #

• Minor changes to tokens to enable native theming in Figma.

1.0.2 #

• Fixed alignment issue with select component expanded state.

1.0.1 #

• Moving Nordicons to a separate file to comply with license requirements.

1.0.0 #

• Initial release of Nord Figma Toolkit.
• Release date 17.3.2022.