@sikt/sds-toggle 2.0.0 → 3.0.0
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 +74 -0
- package/dist/index.css +309 -61
- package/dist/index.css.map +1 -1
- package/dist/index.d.mts +37 -0
- package/dist/index.d.ts +18 -22
- package/dist/index.js +1 -2
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +1 -0
- package/dist/index.mjs.map +1 -0
- package/package.json +8 -5
- package/dist/cjs/index.css +0 -62
- package/dist/cjs/index.css.map +0 -1
- package/dist/cjs/index.d.ts +0 -41
- package/dist/cjs/index.js +0 -2
- package/dist/cjs/index.js.map +0 -1
package/CHANGELOG.md
ADDED
|
@@ -0,0 +1,74 @@
|
|
|
1
|
+
# Changelog
|
|
2
|
+
|
|
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
|
+
|
|
5
|
+
## [3.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@2.1.0...@sikt/sds-toggle@3.0.0) (2024-04-01)
|
|
6
|
+
|
|
7
|
+
### ⚠ BREAKING CHANGES
|
|
8
|
+
|
|
9
|
+
- **toggle-segment:** remove unneeded children prop
|
|
10
|
+
|
|
11
|
+
### Bug Fixes
|
|
12
|
+
|
|
13
|
+
- allow props on input components to be ReactNode where possible ([68d2500](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/68d2500c5a6d97c72e119829169dffa278b0b2a3))
|
|
14
|
+
- **deps:** update sds-form ([795b9d7](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/795b9d7b46639c019c336f8c9e4a3a58e748fdc5))
|
|
15
|
+
- **toggle-segment:** remove unneeded children prop ([4ef6ab4](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/4ef6ab4be72c4c1249a7918e8ec1ceadc1fba806))
|
|
16
|
+
|
|
17
|
+
## [2.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@2.0.0...@sikt/sds-toggle@2.1.0) (2023-11-02)
|
|
18
|
+
|
|
19
|
+
### Features
|
|
20
|
+
|
|
21
|
+
- **toggle-segment:** fixed width variant & accessibility fix ([2efd3c5](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/2efd3c527bbc73a70fe521eeeb954448e90053dc))
|
|
22
|
+
|
|
23
|
+
## [2.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@1.2.0...@sikt/sds-toggle@2.0.0) (2023-10-28)
|
|
24
|
+
|
|
25
|
+
### ⚠ BREAKING CHANGES
|
|
26
|
+
|
|
27
|
+
- move ...props to input element
|
|
28
|
+
- **tokens:** add new tokens to toggle package
|
|
29
|
+
- **toggle-segment:** The change might be breaking in cases where one
|
|
30
|
+
has selected elements in custom css, as the semantics of the
|
|
31
|
+
component are changed, or one has made use of custom html markup.
|
|
32
|
+
|
|
33
|
+
### Features
|
|
34
|
+
|
|
35
|
+
- move ...props to input element ([1488289](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/1488289d882cd77515e720228180690ac2138c73))
|
|
36
|
+
- **tokens:** add new tokens to toggle package ([083ff67](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/083ff674c4334ff9f4c7ad0701642a92d0a32dfb))
|
|
37
|
+
|
|
38
|
+
### Bug Fixes
|
|
39
|
+
|
|
40
|
+
- **toggle-segment:** tweak focus to be :focus-visible ([20baa9a](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/20baa9a7f9a45d484c5b8a29cf3f8713e3f1fbf1))
|
|
41
|
+
|
|
42
|
+
## [1.2.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@1.1.1...@sikt/sds-toggle@1.2.0) (2023-09-19)
|
|
43
|
+
|
|
44
|
+
### Features
|
|
45
|
+
|
|
46
|
+
- **toggle-segment:** add toggle-segment component ([a95fe4a](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a95fe4ad21ef014cc0c79085117f46b6f7a8fd6a))
|
|
47
|
+
|
|
48
|
+
### [1.1.1](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@1.1.0...@sikt/sds-toggle@1.1.1) (2023-08-15)
|
|
49
|
+
|
|
50
|
+
### Bug Fixes
|
|
51
|
+
|
|
52
|
+
- **toggle-button:** fix flash of white on click ([5d920a6](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/5d920a61b6f57df699915779e249030bae1193ec))
|
|
53
|
+
|
|
54
|
+
## [1.1.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@1.0.0...@sikt/sds-toggle@1.1.0) (2023-07-06)
|
|
55
|
+
|
|
56
|
+
### Features
|
|
57
|
+
|
|
58
|
+
- **toggle-button:** add toggle-button component ([4e65a90](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/4e65a90b4f04b9787cadff4a87205479f3c53b51))
|
|
59
|
+
|
|
60
|
+
## 1.0.0 (2023-06-22)
|
|
61
|
+
|
|
62
|
+
### ⚠ BREAKING CHANGES
|
|
63
|
+
|
|
64
|
+
- **toggle-switch:** rename component
|
|
65
|
+
|
|
66
|
+
### Features
|
|
67
|
+
|
|
68
|
+
- **toggle-switch:** add role switch ([9df7f3d](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/9df7f3d5d80eefd85304ad30edaaa190b02b3c89))
|
|
69
|
+
- **toggle-switch:** rename component ([8cb652b](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/8cb652b8d5c076337d609baefeb7146a253f41e4))
|
|
70
|
+
- **toggle:** add toggle component ([b55ba18](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/b55ba18640beba5e1beca2805e16984e85d4759d))
|
|
71
|
+
|
|
72
|
+
### Bug Fixes
|
|
73
|
+
|
|
74
|
+
- **toggle-switch:** update styling with new design ([9725756](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/97257568434c9c946f25ff62322919122af22b09))
|
package/dist/index.css
CHANGED
|
@@ -1,62 +1,310 @@
|
|
|
1
|
-
.
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
26
|
-
|
|
27
|
-
|
|
28
|
-
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
1
|
+
/* ../icons/icon.pcss */
|
|
2
|
+
.sds-icon {
|
|
3
|
+
fill: currentcolor;
|
|
4
|
+
stroke: currentcolor;
|
|
5
|
+
stroke-width: 1;
|
|
6
|
+
stroke-linecap: round;
|
|
7
|
+
stroke-linejoin: round;
|
|
8
|
+
width: 1em;
|
|
9
|
+
height: 1em;
|
|
10
|
+
}
|
|
11
|
+
.sds-icon--spinner {
|
|
12
|
+
animation: spinner 1s steps(8, end) infinite;
|
|
13
|
+
}
|
|
14
|
+
@keyframes spinner {
|
|
15
|
+
to {
|
|
16
|
+
transform: rotate(360deg);
|
|
17
|
+
}
|
|
18
|
+
}
|
|
19
|
+
.sds-icon-logo {
|
|
20
|
+
--icon-color: #000;
|
|
21
|
+
fill: var(--icon-color);
|
|
22
|
+
stroke: var(--icon-color);
|
|
23
|
+
}
|
|
24
|
+
@media (prefers-color-scheme: dark) {
|
|
25
|
+
.sds-icon-logo {
|
|
26
|
+
--icon-color: #fff ;
|
|
27
|
+
}
|
|
28
|
+
}
|
|
29
|
+
.sds-icon-logo--color-white {
|
|
30
|
+
--icon-color: #fff;
|
|
31
|
+
}
|
|
32
|
+
.sds-icon-logo--color-black {
|
|
33
|
+
--icon-color: #000;
|
|
34
|
+
}
|
|
35
|
+
[data-color-scheme=dark] .sds-icon-logo {
|
|
36
|
+
--icon-color: #fff;
|
|
37
|
+
}
|
|
38
|
+
[data-color-scheme=dark] .sds-icon-logo--color-white {
|
|
39
|
+
--icon-color: #fff;
|
|
40
|
+
}
|
|
41
|
+
[data-color-scheme=dark] .sds-icon-logo--color-black {
|
|
42
|
+
--icon-color: #000;
|
|
43
|
+
}
|
|
44
|
+
[data-color-scheme=light] .sds-icon-logo {
|
|
45
|
+
--icon-color: #000;
|
|
46
|
+
}
|
|
47
|
+
[data-color-scheme=light] .sds-icon-logo--color-white {
|
|
48
|
+
--icon-color: #fff;
|
|
49
|
+
}
|
|
50
|
+
[data-color-scheme=light] .sds-icon-logo--color-black {
|
|
51
|
+
--icon-color: #000;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
/* toggle-switch.pcss */
|
|
55
|
+
.sds-toggle-switch {
|
|
56
|
+
--toggle-transition-duration: var(--sds-effect-animation-duration-medium);
|
|
57
|
+
--toggle-track-width: var(--sds-base-size-l);
|
|
58
|
+
--toggle-thumb-size: var(--sds-base-size-s1);
|
|
59
|
+
--toggle-border-width: var(--sds-space-border-weight-regular);
|
|
60
|
+
--toggle-padding: var(--sds-space-padding-minimal);
|
|
61
|
+
--toggle-thumb-offset: var(--toggle-padding);
|
|
62
|
+
--toggle-track-background-color: var(--sds-color-layout-background-default);
|
|
63
|
+
--toggle-track-border-color: var( --sds-color-interaction-neutral-strong-default );
|
|
64
|
+
--toggle-thumb-background-color: var( --sds-color-interaction-neutral-strong-default );
|
|
65
|
+
--toggle-thumb-color: var(--sds-color-text-on-strong);
|
|
66
|
+
--toggle-thumb-position: 0;
|
|
67
|
+
}
|
|
68
|
+
.sds-toggle-switch__label {
|
|
69
|
+
align-items: center;
|
|
70
|
+
cursor: pointer;
|
|
71
|
+
display: inline-flex;
|
|
72
|
+
gap: var(--sds-space-padding-small);
|
|
73
|
+
}
|
|
74
|
+
.sds-toggle-switch:hover {
|
|
75
|
+
--toggle-track-border-color: var( --sds-color-interaction-neutral-strong-highlight );
|
|
76
|
+
--toggle-thumb-background-color: var( --sds-color-interaction-neutral-strong-highlight );
|
|
77
|
+
}
|
|
78
|
+
.sds-toggle-switch:active {
|
|
79
|
+
--toggle-track-border-color: var( --sds-color-interaction-neutral-strong-pressed );
|
|
80
|
+
--toggle-thumb-background-color: var( --sds-color-interaction-neutral-strong-pressed );
|
|
81
|
+
}
|
|
82
|
+
.sds-toggle-switch--checked {
|
|
83
|
+
--toggle-track-background-color: var( --sds-color-interaction-primary-strong-default );
|
|
84
|
+
--toggle-track-border-color: var(--toggle-track-background-color);
|
|
85
|
+
--toggle-thumb-background-color: var(--sds-color-layout-background-default);
|
|
86
|
+
--toggle-thumb-color: var(--sds-color-text-primary);
|
|
87
|
+
--toggle-thumb-position: calc( var(--toggle-track-width) - var(--toggle-thumb-size) - 2 * var(--toggle-thumb-offset) );
|
|
88
|
+
}
|
|
89
|
+
.sds-toggle-switch--checked:hover,
|
|
90
|
+
.sds-toggle-switch--checked:active {
|
|
91
|
+
--toggle-thumb-background-color: var( --sds-color-layout-background-default );
|
|
92
|
+
}
|
|
93
|
+
.sds-toggle-switch--checked:hover {
|
|
94
|
+
--toggle-track-background-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
95
|
+
--toggle-track-border-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
96
|
+
}
|
|
97
|
+
.sds-toggle-switch--checked:active {
|
|
98
|
+
--toggle-track-background-color: var( --sds-color-interaction-primary-strong-pressed );
|
|
99
|
+
--toggle-track-border-color: var( --sds-color-interaction-primary-strong-pressed );
|
|
100
|
+
}
|
|
101
|
+
.sds-toggle-switch__inner {
|
|
102
|
+
align-items: center;
|
|
103
|
+
display: inline-flex;
|
|
104
|
+
padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;
|
|
105
|
+
position: relative;
|
|
106
|
+
}
|
|
107
|
+
.sds-toggle-switch__label-text {
|
|
108
|
+
align-items: center;
|
|
109
|
+
color: var(--sds-color-text-primary);
|
|
110
|
+
display: flex;
|
|
111
|
+
font-size: var(--sds-typography-body-fontsize-regular);
|
|
112
|
+
font-weight: var(--sds-typography-weight-regular);
|
|
113
|
+
line-height: var(--sds-typography-body-lineheight-regular);
|
|
114
|
+
padding: var(--sds-space-padding-tiny);
|
|
115
|
+
}
|
|
116
|
+
.sds-toggle-switch__track {
|
|
117
|
+
-webkit-appearance: none;
|
|
118
|
+
appearance: none;
|
|
119
|
+
cursor: pointer;
|
|
120
|
+
background-color: var(--toggle-track-background-color);
|
|
121
|
+
border: var(--toggle-border-width) solid var(--toggle-track-border-color);
|
|
122
|
+
border-radius: var(--toggle-thumb-size);
|
|
123
|
+
height: calc(var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset)));
|
|
124
|
+
width: var(--toggle-track-width);
|
|
125
|
+
padding: var(--toggle-padding);
|
|
126
|
+
transition: background-color var(--toggle-transition-duration), border-color var(--toggle-transition-duration);
|
|
127
|
+
}
|
|
128
|
+
.sds-toggle-switch__track:focus-visible {
|
|
129
|
+
outline: var(--sds-focus-outline);
|
|
130
|
+
outline-offset: 0;
|
|
131
|
+
}
|
|
132
|
+
.sds-toggle-switch__thumb {
|
|
133
|
+
display: inline-flex;
|
|
134
|
+
align-items: center;
|
|
135
|
+
justify-content: center;
|
|
136
|
+
position: absolute;
|
|
137
|
+
left: var(--toggle-thumb-offset);
|
|
138
|
+
height: var(--toggle-thumb-size);
|
|
139
|
+
width: var(--toggle-thumb-size);
|
|
140
|
+
border-radius: var(--sds-space-border-radius-full);
|
|
141
|
+
transition: all var(--toggle-transition-duration);
|
|
142
|
+
background-color: var(--toggle-thumb-background-color);
|
|
143
|
+
transform: translateX(var(--toggle-thumb-position));
|
|
144
|
+
padding: var(--sds-space-border-weight-regular);
|
|
145
|
+
}
|
|
146
|
+
.sds-toggle-switch__thumb > * {
|
|
147
|
+
transition: all var(--toggle-transition-duration);
|
|
148
|
+
color: var(--toggle-thumb-color);
|
|
149
|
+
font-size: var(--sds-base-size-s);
|
|
150
|
+
}
|
|
151
|
+
.sds-toggle-switch--error,
|
|
152
|
+
.sds-toggle-switch--error.sds-toggle-switch--checked {
|
|
153
|
+
--toggle-track-border-color: var( --sds-color-interaction-danger-strong-default );
|
|
154
|
+
--toggle-thumb-background-color: var( --sds-color-interaction-danger-strong-default );
|
|
155
|
+
}
|
|
156
|
+
.sds-toggle-switch--error:hover,
|
|
157
|
+
.sds-toggle-switch--error.sds-toggle-switch--checked:hover {
|
|
158
|
+
--toggle-track-border-color: var( --sds-color-interaction-danger-strong-highlight );
|
|
159
|
+
--toggle-thumb-background-color: var( --sds-color-interaction-danger-strong-highlight );
|
|
160
|
+
}
|
|
161
|
+
.sds-toggle-switch--error:active,
|
|
162
|
+
.sds-toggle-switch--error.sds-toggle-switch--checked:active {
|
|
163
|
+
--toggle-track-border-color: var( --sds-color-interaction-danger-strong-pressed );
|
|
164
|
+
--toggle-thumb-background-color: var( --sds-color-interaction-danger-strong-pressed );
|
|
165
|
+
}
|
|
166
|
+
.sds-toggle-switch--error.sds-toggle-switch--checked {
|
|
167
|
+
--toggle-track-background-color: var( --sds-color-interaction-danger-strong-default );
|
|
168
|
+
--toggle-thumb-background-color: var(--sds-color-text-on-strong);
|
|
169
|
+
}
|
|
170
|
+
.sds-toggle-switch--error.sds-toggle-switch--checked:hover {
|
|
171
|
+
--toggle-track-background-color: var( --sds-color-interaction-danger-strong-highlight );
|
|
172
|
+
--toggle-thumb-background-color: var(--sds-color-text-on-strong);
|
|
173
|
+
}
|
|
174
|
+
.sds-toggle-switch--error.sds-toggle-switch--checked:active {
|
|
175
|
+
--toggle-track-background-color: var( --sds-color-interaction-danger-strong-pressed );
|
|
176
|
+
--toggle-thumb-background-color: var(--sds-color-text-on-strong);
|
|
177
|
+
}
|
|
178
|
+
|
|
179
|
+
/* toggle-button.pcss */
|
|
180
|
+
.sds-toggle-button {
|
|
181
|
+
--toggle-button-background-color: inherit;
|
|
182
|
+
--toggle-button-border-color: var( --sds-color-interaction-primary-strong-default );
|
|
183
|
+
--toggle-button-color: var(--sds-color-text-primary);
|
|
184
|
+
--toggle-button-outline: none;
|
|
185
|
+
display: inline-block;
|
|
186
|
+
}
|
|
187
|
+
.sds-toggle-button__label {
|
|
188
|
+
align-items: center;
|
|
189
|
+
background-color: var(--toggle-button-background-color);
|
|
190
|
+
border: var(--sds-space-border-weight-regular) solid var(--toggle-button-border-color);
|
|
191
|
+
border-radius: var(--sds-space-border-radius-full);
|
|
192
|
+
color: var(--toggle-button-color);
|
|
193
|
+
cursor: pointer;
|
|
194
|
+
display: flex;
|
|
195
|
+
gap: var(--sds-space-gap-small);
|
|
196
|
+
font-size: var(--sds-typography-body-fontsize-regular);
|
|
197
|
+
font-weight: var(--sds-typography-weight-regular);
|
|
198
|
+
line-height: var(--sds-typography-body-lineheight-regular);
|
|
199
|
+
padding: calc(var(--sds-space-padding-small) - var(--sds-space-border-weight-regular));
|
|
200
|
+
outline: var(--toggle-button-outline);
|
|
201
|
+
outline-offset: 0;
|
|
202
|
+
-webkit-user-select: none;
|
|
203
|
+
user-select: none;
|
|
204
|
+
}
|
|
205
|
+
.sds-toggle-button__label-text {
|
|
206
|
+
padding: 0 var(--sds-space-padding-tiny);
|
|
207
|
+
}
|
|
208
|
+
.sds-toggle-button__label:hover {
|
|
209
|
+
--toggle-button-border-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
210
|
+
}
|
|
211
|
+
.sds-toggle-button__label:active {
|
|
212
|
+
--toggle-button-border-color: var( --sds-color-interaction-primary-strong-pressed );
|
|
213
|
+
}
|
|
214
|
+
.sds-toggle-button__label--checked {
|
|
215
|
+
--toggle-button-background-color: var( --sds-color-interaction-primary-strong-default );
|
|
216
|
+
--toggle-button-border-color: var(--toggle-button-background-color);
|
|
217
|
+
--toggle-button-color: var(--sds-color-text-on-strong);
|
|
218
|
+
}
|
|
219
|
+
.sds-toggle-button__label--checked:hover {
|
|
220
|
+
--toggle-button-background-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
221
|
+
}
|
|
222
|
+
.sds-toggle-button__label--checked:active {
|
|
223
|
+
--toggle-button-background-color: var( --sds-color-interaction-primary-strong-pressed );
|
|
224
|
+
}
|
|
225
|
+
.sds-toggle-button__label--checked:focus {
|
|
226
|
+
--toggle-button-outline: var(--sds-focus-outline);
|
|
227
|
+
}
|
|
228
|
+
.sds-toggle-button__icon {
|
|
229
|
+
height: var(--sds-base-size-m);
|
|
230
|
+
width: var(--sds-base-size-m);
|
|
231
|
+
transform: rotateY(0deg) rotate(0deg);
|
|
232
|
+
transition: transform 0.3s ease;
|
|
233
|
+
}
|
|
234
|
+
.sds-toggle-button__icon--checked {
|
|
235
|
+
transform: rotateY(0deg) rotate(-45deg);
|
|
236
|
+
}
|
|
237
|
+
.sds-toggle-button__input {
|
|
238
|
+
cursor: pointer;
|
|
239
|
+
position: absolute;
|
|
240
|
+
opacity: 0;
|
|
241
|
+
}
|
|
242
|
+
.sds-toggle-button__input:focus-visible + .sds-toggle-button__label {
|
|
243
|
+
--toggle-button-border-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
244
|
+
--toggle-button-outline: var(--sds-focus-outline);
|
|
245
|
+
}
|
|
246
|
+
.sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {
|
|
247
|
+
--toggle-button-background-color: var( --sds-color-interaction-primary-strong-highlight );
|
|
248
|
+
}
|
|
249
|
+
|
|
250
|
+
/* toggle-segment.pcss */
|
|
251
|
+
.sds-toggle-segment__fieldset {
|
|
252
|
+
display: flex;
|
|
253
|
+
align-items: center;
|
|
254
|
+
}
|
|
255
|
+
.sds-toggle-segment__fieldset .sds-form-fieldset__legend {
|
|
256
|
+
float: left;
|
|
257
|
+
}
|
|
258
|
+
.sds-toggle-segment__group {
|
|
259
|
+
border-radius: var(--sds-space-border-radius-small);
|
|
260
|
+
display: inline-grid;
|
|
261
|
+
grid-auto-flow: column;
|
|
262
|
+
outline: var(--sds-space-border-weight-regular) solid var(--sds-color-interaction-primary-strong-default);
|
|
263
|
+
outline-offset: calc(var(--sds-space-border-weight-regular) * -1);
|
|
264
|
+
}
|
|
265
|
+
.sds-toggle-segment--fixed .sds-toggle-segment__group {
|
|
266
|
+
grid-auto-columns: 1fr;
|
|
267
|
+
}
|
|
268
|
+
.sds-toggle-segment__option {
|
|
269
|
+
align-items: center;
|
|
270
|
+
border-radius: var(--sds-space-border-radius-small);
|
|
271
|
+
display: flex;
|
|
272
|
+
justify-content: center;
|
|
273
|
+
}
|
|
274
|
+
.sds-toggle-segment__option:hover {
|
|
275
|
+
background: var(--sds-color-interaction-primary-transparent-highlight);
|
|
276
|
+
}
|
|
277
|
+
.sds-toggle-segment__option:active {
|
|
278
|
+
background: var(--sds-color-interaction-primary-transparent-pressed);
|
|
279
|
+
}
|
|
280
|
+
.sds-toggle-segment__option--checked {
|
|
281
|
+
background-color: var(--sds-color-interaction-primary-strong-default);
|
|
282
|
+
color: var(--sds-color-text-on-strong);
|
|
283
|
+
}
|
|
284
|
+
.sds-toggle-segment__option--checked:hover {
|
|
285
|
+
background-color: var(--sds-color-interaction-primary-strong-highlight);
|
|
286
|
+
}
|
|
287
|
+
.sds-toggle-segment__option--checked:active {
|
|
288
|
+
background-color: var(--sds-color-interaction-primary-strong-pressed);
|
|
289
|
+
}
|
|
290
|
+
.sds-toggle-segment__option:has(:focus-visible) {
|
|
291
|
+
outline: var(--sds-focus-outline);
|
|
292
|
+
}
|
|
293
|
+
.sds-toggle-segment__label {
|
|
294
|
+
border-radius: var(--sds-space-border-radius-small);
|
|
295
|
+
cursor: pointer;
|
|
296
|
+
font-size: var(--sds-typography-body-fontsize-small);
|
|
297
|
+
font-weight: var(--sds-typography-weight-regular);
|
|
298
|
+
line-height: var(--sds-typography-body-lineheight-small);
|
|
299
|
+
min-width: 44px;
|
|
300
|
+
padding: var(--sds-space-padding-small);
|
|
301
|
+
position: relative;
|
|
302
|
+
text-align: center;
|
|
303
|
+
width: 100%;
|
|
304
|
+
}
|
|
305
|
+
.sds-toggle-segment__input {
|
|
306
|
+
opacity: 0;
|
|
307
|
+
position: absolute;
|
|
308
|
+
pointer-events: none;
|
|
309
|
+
}
|
|
62
310
|
/*# sourceMappingURL=index.css.map */
|
package/dist/index.css.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["toggle-switch.pcss","toggle-button.pcss","toggle-segment.pcss","fieldset.pcss","label.pcss","help-text.pcss"],"names":[],"mappings":"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","file":"index.css","sourcesContent":[".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-base-size-l);\n --toggle-thumb-size: var(--sds-base-size-s1);\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 &__label {\n align-items: center;\n cursor: pointer;\n display: inline-flex;\n gap: var(--sds-space-padding-small);\n }\n\n &: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 &: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 &--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 &:hover,\n &:active {\n --toggle-thumb-background-color: var(\n --sds-color-layout-background-default\n );\n }\n\n &: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 &: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\n &__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 &__label-text {\n align-items: center;\n color: var(--sds-color-text-primary);\n display: flex;\n font-size: var(--sds-typography-body-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\n padding: var(--sds-space-padding-tiny);\n }\n\n &__track {\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: background-color var(--toggle-transition-duration),\n border-color var(--toggle-transition-duration);\n\n &:focus-visible {\n outline: var(--sds-focus-outline);\n outline-offset: 0;\n }\n }\n\n &__thumb {\n display: inline-flex;\n align-items: center;\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 border-radius: var(--sds-space-border-radius-full);\n transition: all var(--toggle-transition-duration);\n background-color: var(--toggle-thumb-background-color);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n\n > * {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n font-size: var(--sds-base-size-s);\n }\n }\n\n &--error,\n &--error&--checked {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n\n &:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n\n &:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n &--error&--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n\n &:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n &:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n }\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 &__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-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\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 user-select: none;\n\n &-text {\n padding: 0 var(--sds-space-padding-tiny);\n }\n\n &:hover {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n &:active {\n --toggle-button-border-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n &--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 &:hover {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n\n &:active {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-pressed\n );\n }\n\n &:focus {\n --toggle-button-outline: var(--sds-focus-outline);\n }\n }\n }\n\n &__icon {\n height: var(--sds-base-size-m);\n width: var(--sds-base-size-m);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\n\n &--checked {\n transform: rotateY(0deg) rotate(-45deg);\n }\n }\n\n &__input {\n cursor: pointer;\n position: absolute;\n opacity: 0;\n\n &: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 &--checked {\n --toggle-button-background-color: var(\n --sds-color-interaction-primary-strong-highlight\n );\n }\n }\n }\n}\n",".sds-toggle-segment {\n &__fieldset {\n display: flex;\n align-items: center;\n\n .sds-form-fieldset__legend {\n float: left;\n }\n }\n\n &__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n grid-auto-flow: column;\n grid-auto-columns: 1fr;\n outline: var(--sds-space-border-weight-regular) solid\n var(--sds-color-interaction-primary-strong-default);\n outline-offset: calc(var(--sds-space-border-weight-regular) * -1);\n }\n\n &__option {\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n &__label {\n border-radius: var(--sds-space-border-radius-small);\n cursor: pointer;\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n padding: var(--sds-space-padding-tiny);\n position: relative;\n\n &:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n\n &:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\n }\n\n &--checked {\n background-color: var(--sds-color-interaction-primary-strong-default);\n color: var(--sds-color-text-on-strong);\n\n &:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n\n &:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n }\n }\n\n &__input {\n opacity: 0;\n position: absolute;\n pointer-events: none;\n\n &:focus-visible + .sds-toggle-segment__label {\n background-color: var(\n --sds-color-interaction-primary-transparent-highlight\n );\n outline: var(--sds-focus-outline);\n\n &--checked {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n }\n }\n}\n",".sds-form-fieldset {\n --fieldset-color: var(--sds-color-text-secondary);\n\n &__legend,\n &__help-text {\n color: var(--fieldset-color);\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n padding: var(--sds-space-padding-tiny);\n }\n\n &--error {\n --fieldset-color: var(--sds-color-text-critical);\n }\n}\n",".sds-form-field__label {\n --label-color: var(--sds-color-text-secondary);\n\n &-text {\n color: var(--label-color);\n cursor: pointer;\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n padding: var(--sds-space-padding-tiny);\n }\n\n &--error {\n --label-color: var(--sds-color-text-critical);\n }\n}\n",".sds-form-field__help-text {\n --help-text-color: var(--sds-color-text-secondary);\n\n color: var(--help-text-color);\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n padding: var(--sds-space-padding-tiny);\n\n &--error {\n --help-text-color: var(--sds-color-text-critical);\n }\n}\n"]}
|
|
1
|
+
{"version":3,"sources":["../../icons/icon.pcss","../toggle-switch.pcss","../toggle-button.pcss","../toggle-segment.pcss"],"sourcesContent":[".sds-icon {\n fill: currentcolor;\n stroke: currentcolor;\n stroke-width: 1;\n stroke-linecap: round;\n stroke-linejoin: round;\n width: 1em;\n height: 1em;\n}\n\n .sds-icon--spinner {\n animation: spinner 1s steps(8, end) infinite;\n }\n\n @keyframes spinner {\n to {\n transform: rotate(360deg);\n }\n }\n\n.sds-icon-logo {\n --icon-color: #000;\n\n fill: var(--icon-color);\n stroke: var(--icon-color);\n}\n\n@media (prefers-color-scheme: dark) {\n\n.sds-icon-logo {\n --icon-color: #fff\n}\n }\n\n.sds-icon-logo--color-white {\n --icon-color: #fff;\n }\n\n.sds-icon-logo--color-black {\n --icon-color: #000;\n }\n\n[data-color-scheme=\"dark\"] .sds-icon-logo {\n --icon-color: #fff;\n }\n\n[data-color-scheme=\"dark\"] .sds-icon-logo--color-white {\n --icon-color: #fff;\n }\n\n[data-color-scheme=\"dark\"] .sds-icon-logo--color-black {\n --icon-color: #000;\n }\n\n[data-color-scheme=\"light\"] .sds-icon-logo {\n --icon-color: #000;\n }\n\n[data-color-scheme=\"light\"] .sds-icon-logo--color-white {\n --icon-color: #fff;\n }\n\n[data-color-scheme=\"light\"] .sds-icon-logo--color-black {\n --icon-color: #000;\n }\n",".sds-toggle-switch {\n --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n --toggle-track-width: var(--sds-base-size-l);\n --toggle-thumb-size: var(--sds-base-size-s1);\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-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\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 display: inline-flex;\n align-items: center;\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 border-radius: var(--sds-space-border-radius-full);\n transition: all var(--toggle-transition-duration);\n background-color: var(--toggle-thumb-background-color);\n transform: translateX(var(--toggle-thumb-position));\n padding: var(--sds-space-border-weight-regular);\n }\n\n .sds-toggle-switch__thumb > * {\n transition: all var(--toggle-transition-duration);\n color: var(--toggle-thumb-color);\n font-size: var(--sds-base-size-s);\n }\n\n .sds-toggle-switch--error,\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n }\n\n .sds-toggle-switch--error:hover, .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n }\n\n .sds-toggle-switch--error:active, .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-border-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n }\n\n /* stylelint-disable-next-line no-descending-specificity */\n\n .sds-toggle-switch--error.sds-toggle-switch--checked {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-default\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:hover {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-highlight\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\n }\n\n .sds-toggle-switch--error.sds-toggle-switch--checked:active {\n --toggle-track-background-color: var(\n --sds-color-interaction-danger-strong-pressed\n );\n --toggle-thumb-background-color: var(--sds-color-text-on-strong);\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-fontsize-regular);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-regular);\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 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-base-size-m);\n width: var(--sds-base-size-m);\n transform: rotateY(0deg) rotate(0deg);\n transition: transform 0.3s ease;\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__fieldset {\n display: flex;\n align-items: center;\n }\n\n .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n float: left;\n }\n .sds-toggle-segment__group {\n border-radius: var(--sds-space-border-radius-small);\n display: inline-grid;\n grid-auto-flow: column;\n outline: var(--sds-space-border-weight-regular) solid\n var(--sds-color-interaction-primary-strong-default);\n outline-offset: calc(var(--sds-space-border-weight-regular) * -1);\n }\n .sds-toggle-segment--fixed .sds-toggle-segment__group {\n grid-auto-columns: 1fr;\n }\n .sds-toggle-segment__option {\n align-items: center;\n border-radius: var(--sds-space-border-radius-small);\n display: flex;\n justify-content: center;\n }\n .sds-toggle-segment__option:hover {\n background: var(--sds-color-interaction-primary-transparent-highlight);\n }\n .sds-toggle-segment__option:active {\n background: var(--sds-color-interaction-primary-transparent-pressed);\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 .sds-toggle-segment__option--checked:hover {\n background-color: var(--sds-color-interaction-primary-strong-highlight);\n }\n .sds-toggle-segment__option--checked:active {\n background-color: var(--sds-color-interaction-primary-strong-pressed);\n }\n .sds-toggle-segment__option:has(:focus-visible) {\n outline: var(--sds-focus-outline);\n }\n .sds-toggle-segment__label {\n border-radius: var(--sds-space-border-radius-small);\n cursor: pointer;\n font-size: var(--sds-typography-body-fontsize-small);\n font-weight: var(--sds-typography-weight-regular);\n line-height: var(--sds-typography-body-lineheight-small);\n min-width: 44px;\n padding: var(--sds-space-padding-small);\n position: relative;\n text-align: center;\n width: 100%;\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/dist/index.d.mts
ADDED
|
@@ -0,0 +1,37 @@
|
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, ChangeEventHandler, InputHTMLAttributes, ChangeEvent } from 'react';
|
|
3
|
+
import { FieldsetProps } from '@sikt/sds-form';
|
|
4
|
+
|
|
5
|
+
interface ToggleSwitchProps {
|
|
6
|
+
checked?: boolean;
|
|
7
|
+
label: ReactNode;
|
|
8
|
+
labelFirst?: boolean;
|
|
9
|
+
showIcons?: boolean;
|
|
10
|
+
error?: boolean;
|
|
11
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
12
|
+
}
|
|
13
|
+
declare const ToggleSwitch: react.ForwardRefExoticComponent<ToggleSwitchProps & react.RefAttributes<HTMLInputElement>>;
|
|
14
|
+
|
|
15
|
+
interface ToggleButtonProps {
|
|
16
|
+
checked?: boolean;
|
|
17
|
+
label: ReactNode;
|
|
18
|
+
showIcons?: boolean;
|
|
19
|
+
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
20
|
+
}
|
|
21
|
+
declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLInputElement>>;
|
|
22
|
+
|
|
23
|
+
interface ToggleSegmentProps extends Omit<FieldsetProps, "onChange"> {
|
|
24
|
+
children: ReactNode;
|
|
25
|
+
variant?: "default" | "fixed";
|
|
26
|
+
}
|
|
27
|
+
declare const ToggleSegment: react.ForwardRefExoticComponent<ToggleSegmentProps & react.RefAttributes<HTMLFieldSetElement>>;
|
|
28
|
+
|
|
29
|
+
interface ToggleSegmentOptionProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
|
|
30
|
+
value: string | number;
|
|
31
|
+
label: ReactNode;
|
|
32
|
+
checked?: boolean;
|
|
33
|
+
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
34
|
+
}
|
|
35
|
+
declare const ToggleSegmentOption: react.ForwardRefExoticComponent<ToggleSegmentOptionProps & react.RefAttributes<HTMLInputElement>>;
|
|
36
|
+
|
|
37
|
+
export { ToggleButton, type ToggleButtonProps, ToggleSegment, ToggleSegmentOption, type ToggleSegmentOptionProps, type ToggleSegmentProps, ToggleSwitch, type ToggleSwitchProps };
|
package/dist/index.d.ts
CHANGED
|
@@ -1,41 +1,37 @@
|
|
|
1
|
-
|
|
2
|
-
import
|
|
3
|
-
import {
|
|
4
|
-
|
|
1
|
+
import * as react from 'react';
|
|
2
|
+
import { ReactNode, ChangeEventHandler, InputHTMLAttributes, ChangeEvent } from 'react';
|
|
3
|
+
import { FieldsetProps } from '@sikt/sds-form';
|
|
4
|
+
|
|
5
|
+
interface ToggleSwitchProps {
|
|
5
6
|
checked?: boolean;
|
|
6
7
|
label: ReactNode;
|
|
7
8
|
labelFirst?: boolean;
|
|
8
9
|
showIcons?: boolean;
|
|
9
10
|
error?: boolean;
|
|
10
11
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
11
|
-
}
|
|
12
|
-
declare const ToggleSwitch:
|
|
13
|
-
|
|
12
|
+
}
|
|
13
|
+
declare const ToggleSwitch: react.ForwardRefExoticComponent<ToggleSwitchProps & react.RefAttributes<HTMLInputElement>>;
|
|
14
|
+
|
|
15
|
+
interface ToggleButtonProps {
|
|
14
16
|
checked?: boolean;
|
|
15
17
|
label: ReactNode;
|
|
16
18
|
showIcons?: boolean;
|
|
17
19
|
onChange?: ChangeEventHandler<HTMLInputElement>;
|
|
18
|
-
};
|
|
19
|
-
declare const ToggleButton: React.ForwardRefExoticComponent<ToggleButtonProps & React.RefAttributes<HTMLInputElement>>;
|
|
20
|
-
interface FieldsetProps extends HTMLAttributes<HTMLFieldSetElement> {
|
|
21
|
-
className?: string;
|
|
22
|
-
legend: string;
|
|
23
|
-
name?: string;
|
|
24
|
-
errorText?: string;
|
|
25
|
-
helpText?: string;
|
|
26
|
-
children: ReactNode;
|
|
27
20
|
}
|
|
21
|
+
declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLInputElement>>;
|
|
22
|
+
|
|
28
23
|
interface ToggleSegmentProps extends Omit<FieldsetProps, "onChange"> {
|
|
29
24
|
children: ReactNode;
|
|
25
|
+
variant?: "default" | "fixed";
|
|
30
26
|
}
|
|
31
|
-
declare const ToggleSegment:
|
|
27
|
+
declare const ToggleSegment: react.ForwardRefExoticComponent<ToggleSegmentProps & react.RefAttributes<HTMLFieldSetElement>>;
|
|
28
|
+
|
|
32
29
|
interface ToggleSegmentOptionProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "onChange"> {
|
|
33
30
|
value: string | number;
|
|
34
|
-
label:
|
|
35
|
-
children?: ReactNode;
|
|
31
|
+
label: ReactNode;
|
|
36
32
|
checked?: boolean;
|
|
37
33
|
onChange: (event: ChangeEvent<HTMLInputElement>) => void;
|
|
38
34
|
}
|
|
39
|
-
declare const ToggleSegmentOption:
|
|
40
|
-
|
|
41
|
-
export {
|
|
35
|
+
declare const ToggleSegmentOption: react.ForwardRefExoticComponent<ToggleSegmentOptionProps & react.RefAttributes<HTMLInputElement>>;
|
|
36
|
+
|
|
37
|
+
export { ToggleButton, type ToggleButtonProps, ToggleSegment, ToggleSegmentOption, type ToggleSegmentOptionProps, type ToggleSegmentProps, ToggleSwitch, type ToggleSwitchProps };
|