v1.7.1

@digdir/[email protected]

@digdir/[email protected]

@digdir/[email protected]

Patch Changes

• Suggestion: Fix onSelectedChange not always calling the latest callback (#4176)

@digdir/[email protected]

v1.7.0

@digdir/[email protected]

Minor Changes

• Restructure design tokens: (#4105)

  • Removes primitives/modes/color-scheme/[dark/light]/global.json
  • Removes global colors (red, green, blue, orange, purple)
  • Moved severity colors directly to your theme file
  • "link.color.visited" now references "$value": "color.link.visited" from your theme file

  Make sure to regenerate your design tokens: npx @digdir/designsystemet tokens create <options> --clean

Patch Changes

• Update npm non-major dependencies (#4147)

• Export zod schema and type for config file: (#4170)

  • configSchema
  • type ConfigSchema

• Add option override severity colors from config. (#4105)
  You can override the base-hexcode, as well as individual steps:

  "theme": {
    "overrides": {
      "colors": {
        "danger": {
          "background-default": {
            "light": "#0000ff",
            "dark": "#0000ff"
          }
        }
      },
      "severity": {
        "danger": "#ff00ff"
      }
    }
  }

• Update npm non-major dependencies (#4167)

• Update dependency ramda to ^0.32.0 (#4146)

@digdir/[email protected]

Patch Changes

• Field: Set display: block on <label> (#4134)

• ToggleGroup: ensure ToggleGroup has same height as Button, and that individual buttons within the group never wrap their text (#4139)

• ToggleGroup: use correct border-color (--ds-color-text-default) to match text/icon color on selected button in secondary variant (#4139)

• Label: Use line-height: var(--ds-body-md-line-height); (#4134)

• Field: data-field="description" no longer gets margin-top (#4134)

• chip: Remove hover effect on .ds-input (#4165)

@digdir/[email protected]

Patch Changes

• Update npm non-major dependencies (#4147)

• Suggestion, Tooltip, Popover: Positioning of floating elements rounded to nearest pixel (#4142)

• Update npm non-major dependencies (#4167)

• Dialog: Removed the autofocus attribute from built in closeButton, which prevented setting autofocus on other elements in Dialog. (#4159)

• Field.Counter: Adjustments to how it works internally. (#4140)
  Now, none of the validation messages underneath are aria-described on the input/textarea. This is done by an aria-live region only for screenreaders.

  A new hint prop has been added, to announce how many characters are allowed when entering the input/textarea. Default value is 'Maks %d tegn tillatt.'.

@digdir/[email protected]

Patch Changes

• Update design-tokens to reflect changes made in @digdir/designsystemet. See changelog for changes (#4105)

v1.6.1

@digdir/[email protected]

Patch Changes

• Update npm non-major dependencies (#4129)

• Update npm non-major dependencies (#4110)

@digdir/[email protected]

Patch Changes

• pagination: If direct child of li has aria-hidden="true" it sets visibility: hidden; (#4123)

• input: Add outline on :hover when not :focus-visible, :disabled or [readonly]. This adds a few new CSS variables: (#4125)

  • --dsc-input-outline-color--hover
  • --dsc-input-outline-color--toggle--hover
  • --dsc-input-outline-width--hover
  • --dsc-input-outline-style--hover

• Chip, Tag: Ensure font size scales correctly with the current size mode by using the token --ds-body-sm-font-size. Note: there might be a small visual change for Chip used without explicit data-size, since it used to have font-size: 90%. (#4098)

@digdir/[email protected]

Patch Changes

• Button: For icon-buttons, dont render children if loading is true (#4023)

• Update npm non-major dependencies (#4129)

• Suggestion: Updated u-combobox to 1.0.2 to fix a bug where input would not clear in conrolled mode (#4119)

• Update npm non-major dependencies (#4110)

• usePagination: Hide prev/next buttons with aria-hidden="true" and visibility: hidden; instead of disabling (#4123)

• Textfield: Move counter error message before error (#4104)

@digdir/[email protected]

v1.6.0

@digdir/[email protected]

Patch Changes

• Add possiblity to override colors in config: (#4073)

  "theme": {
    "overrides": {
      "colors": {
        "dominant": {
          "background-default": {
            "light": "#ff0000",
            "dark": "#000fff"
          },
          "background-tinted": {
            "light": "#f0ff00",
            "dark": "#ff00ff"
          }
        }
      }
    }
  }

• Font size variables are now rounded to the nearest pixel. This affects size modes "sm" and "lg", which had subpixel values after v1.5.0. (#4070)

• Update npm non-major dependencies (#4093)

• Update supported engines. Now supports node >=20 <25 (#3925)

@digdir/[email protected]

Minor Changes

• toggle-group: Added new secondary design available with data-variant="secondary" (or variant="secondary" in react) (#4092)

• toggle-group: Changed border-radius to --ds-border-radius-default, border-color to --ds-color-border-default and color to --ds-color-text-default. (#4092)

Patch Changes

• link: Change :focus-visible styling to use border, not background (#4095)

  • Removes --dsc-link-background--focus
  • Removes --dsc-link-color--focus

• link: Add --dsc-link-border-radius, default is var(--ds-border-radius-md) (#4095)

• Dropdown: Dropdown.Heading (h2-h6) - changed color to text-default and font-weight to 500 (#4076)

@digdir/[email protected]

Minor Changes

• ToggleGroup: Added new prop variant to enable new secondary design option (#4092)

Patch Changes

• Spinner: Allow using aria-hidden when aria-label is set, which can be useful to hide or show the element from the accessibility tree based on some UI state like whether a visual label is also rendered. (#4077)

• Update npm non-major dependencies (#4093)

• Avatar: Allow using aria-hidden instead of aria-label in situations with visible text (#4077)

@digdir/[email protected]

Patch Changes

• Font size variables are now rounded to the nearest pixel. This affects size modes "sm" and "lg", which had subpixel values after v1.5.0. (#4070)

v1.5.1

@digdir/[email protected]

Patch Changes

• Update dependency @types/ramda to ^0.31.1 (#4060)

@digdir/[email protected]

Patch Changes

• Field: Make sure <select> and <textarea> is not on same line as label (#4048)

@digdir/[email protected]

Patch Changes

• Field.Counter: Update count when react controls the input (#4047)

• Popover: Only call onClose when Popover is open (#4065)

@digdir/[email protected]

v1.5.0

@digdir/[email protected]

Minor Changes

• Sizing and size modes have been reimplemented align code and Figma implementations, and to support setting size mode in css queries. (#3866)

  --ds-size-* variables are now independent of the element's font size, and only depend on the size mode, which aligns the code implementation with how the modes already worked in Figma. Important: This will have a large visual impact on existing code where size variables have been used to style Heading elements (e.g. margin).

  Read Sizes in code for info on how size modes work after these changes.

Patch Changes

• Update npm non-major dependencies (#4039)

@digdir/[email protected]

Minor Changes

• Sizing and size modes have been reimplemented align code and Figma implementations, and to support setting size mode in css queries. (#3866)

  --ds-size-* variables are now independent of the element's font size, and only depend on the size mode, which aligns the code implementation with how the modes already worked in Figma. Important: This will have a large visual impact on existing code where size variables have been used to style Heading elements (e.g. margin).

  Read Sizes in code for info on how size modes work after these changes.

@digdir/[email protected]

Minor Changes

• Sizing and size modes have been reimplemented align code and Figma implementations, and to support setting size mode in css queries. (#3866)

  --ds-size-* variables are now independent of the element's font size, and only depend on the size mode, which aligns the code implementation with how the modes already worked in Figma. Important: This will have a large visual impact on existing code where size variables have been used to style Heading elements (e.g. margin).

  Read Sizes in code for info on how size modes work after these changes.

Patch Changes

• Update npm non-major dependencies (#4039)

• Details: Updated u-details package to adress an issue where you could tab into the content when details was closed (firefox only) (#4022)

@digdir/[email protected]

Minor Changes

• Sizing and size modes have been reimplemented align code and Figma implementations, and to support setting size mode in css queries. (#3866)

  --ds-size-* variables are now independent of the element's font size, and only depend on the size mode, which aligns the code implementation with how the modes already worked in Figma. Important: This will have a large visual impact on existing code where size variables have been used to style Heading elements (e.g. margin).

  Read Sizes in code for info on how size modes work after these changes.

v1.4.0

@digdir/[email protected]

Patch Changes

• Update npm non-major dependencies (#3989)

• Update npm non-major dependencies (#4014)

@digdir/[email protected]

Patch Changes

• Card: If .ds-link is used in a heading, remove focus and active styling (#4005)

• Fieldset: Removed uneccessary margin when visually hiding Fieldset.Legend with .ds-sr-only (#3996)

• Update npm non-major dependencies (#3989)

• Button: Change sizes of svg and icon (#3998)

  • In icon button ([data-icon]), it is 1.5em
  • In normal button, it is 1.3em

@digdir/[email protected]

Patch Changes

• Update npm non-major dependencies (#3989)

• Update npm non-major dependencies (#4014)

• Switch: correct jsdoc on label prop (#3984)

@digdir/[email protected]

Minor Changes

• Default export: changed color values and removed brand3 (#4008)
  • The old values are still available from import '@digdir/designsystemet-theme/digdir.css';

v1.3.0

@digdir/[email protected]

Minor Changes

• Renamed $designsystemet.json to $designsystemet.jsonc so token-studio ignores the file (#3970)

Patch Changes

• Update npm non-major dependencies (#3973)

@digdir/[email protected]

@digdir/[email protected]

Minor Changes

• Suggestion: TypeScript typing now depends on whether multiple is true or false. When multiple is true, selected, defaultSelected and onSelectedChange are typed for arrays of items. Otherwise, they are typed for single items. (#3909)

• Suggestion: Removed type SuggestionValues, as this union is no longer useful. Use string or SuggestionItem when multiple is false, and string[] or SuggestionItem[] when multiple is true. (#3909)

• Suggestion: remove deprecated props value, defaultValue and onValueChange. Use selected, defaultSelected and onSelectedChange instead. (#3909)

Patch Changes

• update u-elements/u-details to 0.1.3 (#3981)

• update u-elements/u-combobox to 1.0.1 (#3981)

• Suggestion: Remove deprecated Suggestion.Chips (#3981)

• update u-elements/u-datalist to 1.0.14 (#3981)

• Update npm non-major dependencies (#3973)

@digdir/[email protected]

v1.2.0

@digdir/[email protected]

Patch Changes

• Update npm non-major dependencies (#3923)

• Replace chalk with picocolors (#3910)

@digdir/[email protected]

Minor Changes

• Badge: Allow adjusting the position of the badge using css variables --dsc-badge-{top,bottom,left,right} (#3965)

• Link: Automatically add recommended spacing to icons (svg or img), when there is also a <span> present. (#3942)

  • <Link><Icon />Text</Link> will not get spacing
  • <Link><Icon /> Text</Link> will get a leading underlined space character between icon and text, which looks bad
  • <Link><Icon /><span>Text</span></Link> will get recommended spacing

Patch Changes

• Dialog: Rework close button (#3959)
  • An empty button with data-command="close" will get an "X" icon
  • If button[data-command="close"] is the first child of .ds-dialog, it will float to the top right

@digdir/[email protected]

Patch Changes

• Field: Don't check for hidden elements (#3950)

• Dialog: Add data-command="close", which you can use to close the modal. (#3959)

  • This removes use of <form> on our close button

• Dialog: Deprecate asChild. Should always be a <dialog> element. Will be removed in the next major version (#3940)

• Tabs.Panel: Add aria-labelledby to associated button (#3939)

• Tabs: Don't conditionally render TabPanel, use hidden instead (#3936)

  • If any of your TabPanel components have heavy code, consider conditional rendering to improve performance

• Update dependency @u-elements/u-details to ^0.1.2 (#3955)

• Update npm non-major dependencies (#3923)

• Skeleton: Deprecate characters prop, which never had any effect. (#3961)

• Tooltip: Close on click outside, applicable for mobile devices (#3957)

@digdir/[email protected]

v1.1.10

@digdir/[email protected]

Patch Changes

• Update dependency zod-validation-error to v4 (#3897)

• update dependency @types/ramda to ^0.31.0 (#3922)

• Update dependency zod to v4 (#3896)

• Updated non-major dependencies (#3890)

• Updated non-major dependencies (#3894)

@digdir/[email protected]

Patch Changes

• Details: Using margin instead of padding to style children of Details to allow direct children such as Button (#3883)

• Updated non-major dependencies (#3890)

@digdir/[email protected]

Patch Changes

• Dialog: Respect default prevented keydown event (#3908)

• Update @u-elements/u-datalist to 1.0.12 (#3908)

• Updated non-major dependencies (#3890)

• Update @u-elements/u-combobox to 0.0.20 (#3908)

• RovingFocus: Eliminate unnecessary rerender (#3929)

• Updated non-major dependencies (#3894)

@digdir/[email protected]