@sikt/sds-toggle 8.0.0 → 8.0.1
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.
- package/CHANGELOG.md +7 -0
- package/dist/index.css +4 -2
- package/dist/index.css.map +1 -1
- package/package.json +3 -3
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
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
|
+
## [8.0.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@8.0.0...@sikt/sds-toggle@8.0.1) (2026-03-31)
|
|
6
|
+
|
|
7
|
+
### Bug Fixes
|
|
8
|
+
|
|
9
|
+
- **toggle-segment:** make the whole segment clickable ([eaea2bb](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/eaea2bbd556f0cc2b24366d13120baa87f86c8ff)), closes [#204](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/issues/204)
|
|
10
|
+
- update @sikt/sds packages ([cf35fab](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/cf35fabce72896bf98f10e2dc13c2c8015e239e7))
|
|
11
|
+
|
|
5
12
|
## [8.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@7.0.0...@sikt/sds-toggle@8.0.0) (2026-03-12)
|
|
6
13
|
|
|
7
14
|
### ⚠ BREAKING CHANGES
|
package/dist/index.css
CHANGED
|
@@ -127,7 +127,6 @@
|
|
|
127
127
|
border-radius: var(--sds-space-border-radius-minimal);
|
|
128
128
|
display: flex;
|
|
129
129
|
justify-content: center;
|
|
130
|
-
padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);
|
|
131
130
|
}
|
|
132
131
|
@media (pointer: fine) {
|
|
133
132
|
.sds-toggle-segment__option:hover {
|
|
@@ -153,15 +152,18 @@
|
|
|
153
152
|
outline: var(--sds-focus-outline);
|
|
154
153
|
}
|
|
155
154
|
.sds-toggle-segment__label {
|
|
156
|
-
|
|
155
|
+
align-items: center;
|
|
157
156
|
cursor: pointer;
|
|
157
|
+
display: flex;
|
|
158
158
|
font-size: var(--sds-typography-body-default-fontsize);
|
|
159
159
|
font-weight: var(--sds-typography-body-default-fontweight);
|
|
160
160
|
justify-content: center;
|
|
161
161
|
line-height: var(--sds-typography-body-default-lineheight);
|
|
162
162
|
min-width: 44px;
|
|
163
|
+
padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);
|
|
163
164
|
position: relative;
|
|
164
165
|
width: 100%;
|
|
166
|
+
height: 100%;
|
|
165
167
|
}
|
|
166
168
|
.sds-toggle-segment__input {
|
|
167
169
|
opacity: 0;
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/toggle-switch.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 @media (pointer: fine) {\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\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 @media (pointer: fine) {\n .sds-toggle-switch--checked:hover {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\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\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\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-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
|
|
1
|
+
{"version":3,"sources":["../src/toggle-switch.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 @media (pointer: fine) {\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\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 @media (pointer: fine) {\n .sds-toggle-switch--checked:hover {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\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\n .sds-toggle-switch--checked:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\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-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 }\n\n @media (pointer: fine) {\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\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 @media (pointer: fine) {\n .sds-toggle-segment__option--checked:hover {\n background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\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 align-items: center;\n cursor: pointer;\n display: flex;\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 padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);\n position: relative;\n width: 100%;\n height: 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": "8.0.
|
|
3
|
+
"version": "8.0.1",
|
|
4
4
|
"license": "UNLICENSED",
|
|
5
5
|
"homepage": "https://designsystem.sikt.no/",
|
|
6
6
|
"repository": {
|
|
@@ -35,9 +35,9 @@
|
|
|
35
35
|
"build": "tsup"
|
|
36
36
|
},
|
|
37
37
|
"dependencies": {
|
|
38
|
-
"@sikt/sds-core": "^
|
|
38
|
+
"@sikt/sds-core": "^5.3.0",
|
|
39
39
|
"@sikt/sds-form": "^4.1.1",
|
|
40
|
-
"@sikt/sds-icons": "^4.
|
|
40
|
+
"@sikt/sds-icons": "^4.2.0"
|
|
41
41
|
},
|
|
42
42
|
"peerDependencies": {
|
|
43
43
|
"@types/react": "^18.0.0 || ^19.0.0",
|