@sikt/sds-toggle 6.1.1 → 6.1.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/dist/index.css +6 -6
  3. package/dist/index.css.map +1 -1
  4. package/package.json +2 -2
package/CHANGELOG.md CHANGED
@@ -2,6 +2,18 @@
2
2
 
3
3
  All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
4
4
 
5
+ ## [6.1.3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@6.1.2...@sikt/sds-toggle@6.1.3) (2025-10-09)
6
+
7
+ ### Bug Fixes
8
+
9
+ - update border color token ([629a582](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/629a582023f405acdec8bede427e285847795891))
10
+
11
+ ## [6.1.2](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@6.1.1...@sikt/sds-toggle@6.1.2) (2025-09-09)
12
+
13
+ ### Bug Fixes
14
+
15
+ - **deps:** update @sikt/sds-form@4.1.0 ([dc490db](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/dc490dbc3a74aa8c5f1101514c6476c99b66add4))
16
+
5
17
  ## [6.1.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@6.1.0...@sikt/sds-toggle@6.1.1) (2025-09-01)
6
18
 
7
19
  ### Bug Fixes
package/dist/index.css CHANGED
@@ -7,8 +7,8 @@
7
7
  --toggle-padding: var(--sds-space-padding-minimal);
8
8
  --toggle-thumb-offset: var(--toggle-padding);
9
9
  --toggle-track-background-color: var(--sds-color-layout-background-default);
10
- --toggle-track-border-color: var( --sds-color-interaction-neutral-strong-default );
11
- --toggle-thumb-background-color: var( --sds-color-interaction-neutral-strong-default );
10
+ --toggle-track-border-color: var(--sds-color-layout-divider-strong);
11
+ --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);
12
12
  --toggle-thumb-color: var(--sds-color-text-on-strong);
13
13
  --toggle-thumb-position: 0;
14
14
  }
@@ -19,12 +19,12 @@
19
19
  gap: var(--sds-space-padding-small);
20
20
  }
21
21
  .sds-toggle-switch:hover {
22
- --toggle-track-border-color: var( --sds-color-interaction-neutral-strong-highlight );
23
- --toggle-thumb-background-color: var( --sds-color-interaction-neutral-strong-highlight );
22
+ --toggle-track-border-color: var(--sds-color-layout-divider-strong);
23
+ --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);
24
24
  }
25
25
  .sds-toggle-switch:active {
26
- --toggle-track-border-color: var( --sds-color-interaction-neutral-strong-pressed );
27
- --toggle-thumb-background-color: var( --sds-color-interaction-neutral-strong-pressed );
26
+ --toggle-track-border-color: var(--sds-color-layout-divider-strong);
27
+ --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);
28
28
  }
29
29
  .sds-toggle-switch--checked {
30
30
  --toggle-track-background-color: var( --sds-color-interaction-primary-strong-default );
package/dist/index.css.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"sources":["../src/toggle-switch.pcss","../src/toggle-button.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-typography-fontsize-1200);\n --toggle-thumb-size: var(--sds-typography-fontsize-300);\n --toggle-border-width: var(--sds-space-border-weight-regular);\n --toggle-padding: var(--sds-space-padding-minimal);\n --toggle-thumb-offset: var(--toggle-padding);\n --toggle-track-background-color: var(--sds-color-layout-background-default);\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-default\n );\n --toggle-thumb-color: var(--sds-color-text-on-strong);\n --toggle-thumb-position: 0;\n}\n\n .sds-toggle-switch__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n .sds-toggle-switch:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-highlight\n );\n }\n\n .sds-toggle-switch:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-neutral-strong-pressed\n );\n }\n\n .sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-track-border-color: var(--toggle-track-background-color);\n --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n --toggle-thumb-color: var(--sds-color-text-primary);\n --toggle-thumb-position: calc(\n var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n var(--toggle-thumb-offset)\n );\n }\n\n .sds-toggle-switch--checked:hover,\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n }\n\n .sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-switch__inner {\n align-items: center;\n display: inline-flex;\n padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n position: relative;\n }\n\n .sds-toggle-switch__label-text {\n align-items: center;\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-switch__track {\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n background-color: var(--toggle-track-background-color);\n border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n border-radius: var(--toggle-thumb-size);\n height: calc(\n var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n );\n width: var(--toggle-track-width);\n padding: var(--toggle-padding);\n transition:\n background-color var(--toggle-transition-duration),\n border-color var(--toggle-transition-duration);\n }\n\n .sds-toggle-switch__track:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-toggle-switch__thumb {\n align-items: center;\n background-color: var(--toggle-thumb-background-color);\n border-radius: var(--sds-space-border-radius-full);\n display: inline-flex;\n font-size: var(--sds-typography-fontsize-100);\n justify-content: center;\n position: absolute;\n left: var(--toggle-thumb-offset);\n height: var(--toggle-thumb-size);\n width: var(--toggle-thumb-size);\n transition: all var(--toggle-transition-duration);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > .sds-icon {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n }\n",".sds-toggle-button {\n --toggle-button-background-color: inherit;\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-color: var(--sds-color-text-primary);\n --toggle-button-outline: none;\n\n display: inline-block;\n}\n\n .sds-toggle-button__label {\n align-items: center;\n background-color: var(--toggle-button-background-color);\n border: var(--sds-space-border-weight-regular) solid\n var(--toggle-button-border-color);\n border-radius: var(--sds-space-border-radius-full);\n color: var(--toggle-button-color);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-l-fontsize);\n font-weight: var(--sds-typography-body-l-fontweight);\n line-height: var(--sds-typography-body-l-lineheight);\n padding: calc(\n var(--sds-space-padding-small) - var(--sds-space-border-weight-regular)\n );\n outline: var(--toggle-button-outline);\n outline-offset: 0;\n -webkit-user-select: none;\n user-select: none;\n }\n\n .sds-toggle-button__label-text {\n display: block;\n padding: 0 var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-button__label:hover {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label:active {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-border-color: var(--toggle-button-background-color);\n --toggle-button-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-button__label--checked:hover {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label--checked:active {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked:focus {\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__icon {\n height: var(--sds-typography-fontsize-700);\n width: var(--sds-typography-fontsize-700);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n flex-shrink: 0;\n }\n\n .sds-toggle-button__icon--checked {\n transform: rotateY(0deg) rotate(-45deg);\n }\n\n .sds-toggle-button__input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n",".sds-toggle-segment {\n --toggle-segment-border-width: var(--sds-space-border-weight-regular);\n --toggle-segment-border: var(--toggle-segment-border-width) solid\n var(--sds-color-interaction-primary-strong-default);\n}\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n gap: var(--toggle-segment-border-width);\n grid-auto-flow: column;\n padding: var(--sds-space-padding-minimal);\n outline: var(--toggle-segment-border);\n outline-offset: calc(var(--toggle-segment-border-width) * -1);\n }\n\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-minimal);\n display: flex;\n justify-content: center;\n padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n\n .sds-toggle-segment__option--checked {\n background-color: var(--sds-color-interaction-primary-strong-default);\n color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-segment__label {\n display: flex;\n cursor: pointer;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n min-width: 44px;\n position: relative;\n width: 100%;\n }\n\n .sds-toggle-segment__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],"mappings":"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","names":[]}
1
+ {"version":3,"sources":["../src/toggle-switch.pcss","../src/toggle-button.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-typography-fontsize-1200);\n --toggle-thumb-size: var(--sds-typography-fontsize-300);\n --toggle-border-width: var(--sds-space-border-weight-regular);\n --toggle-padding: var(--sds-space-padding-minimal);\n --toggle-thumb-offset: var(--toggle-padding);\n --toggle-track-background-color: var(--sds-color-layout-background-default);\n --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-color: var(--sds-color-text-on-strong);\n --toggle-thumb-position: 0;\n}\n\n .sds-toggle-switch__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n .sds-toggle-switch:hover {\n --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n }\n\n .sds-toggle-switch:active {\n --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n }\n\n .sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-track-border-color: var(--toggle-track-background-color);\n --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n --toggle-thumb-color: var(--sds-color-text-primary);\n --toggle-thumb-position: calc(\n var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n var(--toggle-thumb-offset)\n );\n }\n\n .sds-toggle-switch--checked:hover,\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n }\n\n .sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n --toggle-track-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-switch__inner {\n align-items: center;\n display: inline-flex;\n padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n position: relative;\n }\n\n .sds-toggle-switch__label-text {\n align-items: center;\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n line-height: var(--sds-typography-body-default-lineheight);\n padding: var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-switch__track {\n -webkit-appearance: none;\n appearance: none;\n cursor: pointer;\n background-color: var(--toggle-track-background-color);\n border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n border-radius: var(--toggle-thumb-size);\n height: calc(\n var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n );\n width: var(--toggle-track-width);\n padding: var(--toggle-padding);\n transition:\n background-color var(--toggle-transition-duration),\n border-color var(--toggle-transition-duration);\n }\n\n .sds-toggle-switch__track:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n\n .sds-toggle-switch__thumb {\n align-items: center;\n background-color: var(--toggle-thumb-background-color);\n border-radius: var(--sds-space-border-radius-full);\n display: inline-flex;\n font-size: var(--sds-typography-fontsize-100);\n justify-content: center;\n position: absolute;\n left: var(--toggle-thumb-offset);\n height: var(--toggle-thumb-size);\n width: var(--toggle-thumb-size);\n transition: all var(--toggle-transition-duration);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > .sds-icon {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n }\n",".sds-toggle-button {\n --toggle-button-background-color: inherit;\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-color: var(--sds-color-text-primary);\n --toggle-button-outline: none;\n\n display: inline-block;\n}\n\n .sds-toggle-button__label {\n align-items: center;\n background-color: var(--toggle-button-background-color);\n border: var(--sds-space-border-weight-regular) solid\n var(--toggle-button-border-color);\n border-radius: var(--sds-space-border-radius-full);\n color: var(--toggle-button-color);\n cursor: pointer;\n display: flex;\n gap: var(--sds-space-gap-small);\n font-size: var(--sds-typography-body-l-fontsize);\n font-weight: var(--sds-typography-body-l-fontweight);\n line-height: var(--sds-typography-body-l-lineheight);\n padding: calc(\n var(--sds-space-padding-small) - var(--sds-space-border-weight-regular)\n );\n outline: var(--toggle-button-outline);\n outline-offset: 0;\n -webkit-user-select: none;\n user-select: none;\n }\n\n .sds-toggle-button__label-text {\n display: block;\n padding: 0 var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-button__label:hover {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label:active {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-default\n );\n --toggle-button-border-color: var(--toggle-button-background-color);\n --toggle-button-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-button__label--checked:hover {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n .sds-toggle-button__label--checked:active {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n .sds-toggle-button__label--checked:focus {\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__icon {\n height: var(--sds-typography-fontsize-700);\n width: var(--sds-typography-fontsize-700);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n flex-shrink: 0;\n }\n\n .sds-toggle-button__icon--checked {\n transform: rotateY(0deg) rotate(-45deg);\n }\n\n .sds-toggle-button__input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n --toggle-button-outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n",".sds-toggle-segment {\n --toggle-segment-border-width: var(--sds-space-border-weight-regular);\n --toggle-segment-border: var(--toggle-segment-border-width) solid\n var(--sds-color-interaction-primary-strong-default);\n}\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n gap: var(--toggle-segment-border-width);\n grid-auto-flow: column;\n padding: var(--sds-space-padding-minimal);\n outline: var(--toggle-segment-border);\n outline-offset: calc(var(--toggle-segment-border-width) * -1);\n }\n\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-minimal);\n display: flex;\n justify-content: center;\n padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);\n }\n\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n\n .sds-toggle-segment__option--checked {\n background-color: var(--sds-color-interaction-primary-strong-default);\n color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n\n .sds-toggle-segment__label {\n display: flex;\n cursor: pointer;\n font-size: var(--sds-typography-body-default-fontsize);\n font-weight: var(--sds-typography-body-default-fontweight);\n justify-content: center;\n line-height: var(--sds-typography-body-default-lineheight);\n min-width: 44px;\n position: relative;\n width: 100%;\n }\n\n .sds-toggle-segment__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n }\n"],"mappings":"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","names":[]}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@sikt/sds-toggle",
3
- "version": "6.1.1",
3
+ "version": "6.1.3",
4
4
  "license": "UNLICENSED",
5
5
  "homepage": "https://designsystem.sikt.no/",
6
6
  "repository": {
@@ -36,7 +36,7 @@
36
36
  },
37
37
  "dependencies": {
38
38
  "@sikt/sds-core": "^4.6.0",
39
- "@sikt/sds-form": "^4.0.0",
39
+ "@sikt/sds-form": "^4.1.0",
40
40
  "@sikt/sds-icons": "^3.0.0"
41
41
  },
42
42
  "peerDependencies": {