@knime/kds-components 0.5.4 → 0.5.5

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.
@@ -0,0 +1,15 @@
1
+ import { KdsRadioButtonProps } from './types.ts';
2
+ type __VLS_Props = KdsRadioButtonProps;
3
+ type __VLS_PublicProps = {
4
+ modelValue?: boolean;
5
+ } & __VLS_Props;
6
+ declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
7
+ "update:modelValue": (value: boolean) => any;
8
+ }, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
9
+ "onUpdate:modelValue"?: ((value: boolean) => any) | undefined;
10
+ }>, {
11
+ disabled: boolean;
12
+ error: boolean;
13
+ }, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, HTMLButtonElement>;
14
+ export default _default;
15
+ //# sourceMappingURL=KdsRadioButton.vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"KdsRadioButton.vue.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/KdsRadioButton.vue"],"names":[],"mappings":"AAiLA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,YAAY,CAAC;AAEtD,KAAK,WAAW,GAAG,mBAAmB,CAAC;AA4BvC,KAAK,iBAAiB,GAAG;IACzB,UAAU,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,WAAW,CAAC;;;;;;;;;AAmGhB,wBASG"}
@@ -0,0 +1,3 @@
1
+ declare const _default: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
2
+ export default _default;
3
+ //# sourceMappingURL=KdsRadioButtonGroup.vue.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"KdsRadioButtonGroup.vue.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/KdsRadioButtonGroup.vue"],"names":[],"mappings":";AAshBA,wBASG"}
@@ -0,0 +1,23 @@
1
+ import { KdsLabelProps, KdsSubTextProps } from '../types.ts';
2
+ export type KdsRadioButtonProps = {
3
+ text: string;
4
+ helperText?: string;
5
+ disabled?: boolean;
6
+ error?: boolean;
7
+ };
8
+ export type KdsRadioButtonGroupAlignment = "vertical" | "horizontal";
9
+ type AtLeastTwo<T> = [T, T, ...T[]];
10
+ export type KdsRadioButtonGroupOption = {
11
+ text: string;
12
+ id: string;
13
+ disabled?: boolean;
14
+ helperText?: string;
15
+ error?: boolean;
16
+ };
17
+ export type KdsRadioButtonGroupProps = {
18
+ possibleValues: AtLeastTwo<string | KdsRadioButtonGroupOption>;
19
+ alignment?: KdsRadioButtonGroupAlignment;
20
+ disabled?: boolean;
21
+ } & KdsLabelProps & KdsSubTextProps;
22
+ export {};
23
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../../src/forms/RadioButton/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAElE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,EAAE,MAAM,CAAC;IACb,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,4BAA4B,GAAG,UAAU,GAAG,YAAY,CAAC;AAErE,KAAK,UAAU,CAAC,CAAC,IAAI,CAAC,CAAC,EAAE,CAAC,EAAE,GAAG,CAAC,EAAE,CAAC,CAAC;AAEpC,MAAM,MAAM,yBAAyB,GAAG;IACtC,IAAI,EAAE,MAAM,CAAC;IACb,EAAE,EAAE,MAAM,CAAC;IACX,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,KAAK,CAAC,EAAE,OAAO,CAAC;CACjB,CAAC;AAEF,MAAM,MAAM,wBAAwB,GAAG;IACrC,cAAc,EAAE,UAAU,CAAC,MAAM,GAAG,yBAAyB,CAAC,CAAC;IAC/D,SAAS,CAAC,EAAE,4BAA4B,CAAC;IACzC,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB,GAAG,aAAa,GACf,eAAe,CAAC"}
@@ -0,0 +1,3 @@
1
+ export { default as KdsRadioButtonGroup } from './RadioButton/KdsRadioButtonGroup.vue';
2
+ export type { KdsRadioButtonGroupAlignment, KdsRadioButtonGroupOption, KdsRadioButtonGroupProps, } from './RadioButton/types';
3
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/forms/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,uCAAuC,CAAC;AAGvF,YAAY,EACV,4BAA4B,EAC5B,yBAAyB,EACzB,wBAAwB,GACzB,MAAM,qBAAqB,CAAC"}
@@ -0,0 +1,15 @@
1
+ export type KdsLabelProps = {
2
+ label?: string;
3
+ id: string;
4
+ } | {
5
+ label: string;
6
+ id?: string;
7
+ };
8
+ export type KdsSubTextProps = {
9
+ subText?: string;
10
+ /**
11
+ * Reserve space for subtext to prevent layout shifts when helper text or errors appear
12
+ */
13
+ preserveSubTextSpace?: boolean;
14
+ };
15
+ //# sourceMappingURL=types.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/forms/types.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,aAAa,GACrB;IAAE,KAAK,CAAC,EAAE,MAAM,CAAC;IAAC,EAAE,EAAE,MAAM,CAAA;CAAE,GAC9B;IAAE,KAAK,EAAE,MAAM,CAAC;IAAC,EAAE,CAAC,EAAE,MAAM,CAAA;CAAE,CAAC;AAEnC,MAAM,MAAM,eAAe,GAAG;IAC5B,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAC;CAChC,CAAC"}
package/dist/index.css CHANGED
@@ -52,7 +52,7 @@ html.kds-legacy {
52
52
  }
53
53
 
54
54
  .button {
55
- &[data-v-18cd4b75] {
55
+ &[data-v-dd209f83] {
56
56
  position: relative;
57
57
  display: flex;
58
58
  flex-shrink: 0;
@@ -66,143 +66,143 @@ html.kds-legacy {
66
66
 
67
67
  /* for LinkButton */
68
68
  }
69
- &[data-v-18cd4b75]:is(a) {
69
+ &[data-v-dd209f83]:is(a) {
70
70
  text-decoration: none;
71
71
  }
72
- &.disabled[data-v-18cd4b75] {
73
- cursor: not-allowed;
72
+ &.disabled[data-v-dd209f83] {
73
+ cursor: default;
74
74
  }
75
- &[data-v-18cd4b75]:focus-visible {
75
+ &[data-v-dd209f83]:focus-visible {
76
76
  outline: var(--kds-border-action-focused);
77
77
  outline-offset: var(--kds-spacing-offset-focus);
78
78
  }
79
79
  &.filled {
80
- &[data-v-18cd4b75] {
80
+ &[data-v-dd209f83] {
81
81
  color: var(--kds-color-text-and-icon-primary-inverted);
82
82
  background-color: var(--kds-color-background-primary-bold-initial);
83
83
  border: var(--kds-border-action-transparent);
84
84
  }
85
- &.disabled[data-v-18cd4b75] {
85
+ &.disabled[data-v-dd209f83] {
86
86
  color: var(--kds-color-text-and-icon-disabled-inverted);
87
87
  background-color: var(--kds-color-background-disabled-primary);
88
88
  }
89
89
  &:not(.disabled) {
90
- &[data-v-18cd4b75]:hover {
90
+ &[data-v-dd209f83]:hover {
91
91
  background-color: var(--kds-color-background-primary-bold-hover);
92
92
  }
93
- &[data-v-18cd4b75]:active {
93
+ &[data-v-dd209f83]:active {
94
94
  background-color: var(--kds-color-background-primary-bold-active);
95
95
  }
96
96
  }
97
97
  &.destructive {
98
- &[data-v-18cd4b75] {
98
+ &[data-v-dd209f83] {
99
99
  color: var(--kds-color-text-and-icon-danger-inverted);
100
100
  background-color: var(--kds-color-background-danger-bold-initial);
101
101
  }
102
- &.disabled[data-v-18cd4b75] {
102
+ &.disabled[data-v-dd209f83] {
103
103
  color: var(--kds-color-text-and-icon-disabled-inverted);
104
104
  background-color: var(--kds-color-background-disabled-danger);
105
105
  }
106
106
  &:not(.disabled) {
107
- &[data-v-18cd4b75]:hover {
107
+ &[data-v-dd209f83]:hover {
108
108
  background-color: var(--kds-color-background-danger-bold-hover);
109
109
  }
110
- &[data-v-18cd4b75]:active {
110
+ &[data-v-dd209f83]:active {
111
111
  background-color: var(--kds-color-background-danger-bold-active);
112
112
  }
113
113
  }
114
114
  }
115
115
  }
116
116
  &.outlined {
117
- &[data-v-18cd4b75] {
117
+ &[data-v-dd209f83] {
118
118
  color: var(--kds-color-text-and-icon-neutral);
119
119
  background-color: var(--kds-color-background-neutral-initial);
120
120
  border: var(--kds-border-action-default);
121
121
  }
122
- &.disabled[data-v-18cd4b75] {
122
+ &.disabled[data-v-dd209f83] {
123
123
  color: var(--kds-color-text-and-icon-disabled);
124
124
  border: var(--kds-border-action-disabled);
125
125
  }
126
126
  &:not(.disabled) {
127
- &[data-v-18cd4b75]:hover {
127
+ &[data-v-dd209f83]:hover {
128
128
  background-color: var(--kds-color-background-neutral-hover);
129
129
  }
130
- &[data-v-18cd4b75]:active {
130
+ &[data-v-dd209f83]:active {
131
131
  background-color: var(--kds-color-background-neutral-active);
132
132
  }
133
133
  }
134
134
  &.destructive {
135
- &[data-v-18cd4b75] {
135
+ &[data-v-dd209f83] {
136
136
  color: var(--kds-color-text-and-icon-danger);
137
137
  border: var(--kds-border-action-error);
138
138
  }
139
- &.disabled[data-v-18cd4b75] {
139
+ &.disabled[data-v-dd209f83] {
140
140
  color: var(--kds-color-text-and-icon-disabled);
141
141
  border: var(--kds-border-action-disabled);
142
142
  }
143
143
  &:not(.disabled) {
144
- &[data-v-18cd4b75]:hover {
144
+ &[data-v-dd209f83]:hover {
145
145
  background-color: var(--kds-color-background-danger-hover);
146
146
  }
147
- &[data-v-18cd4b75]:active {
147
+ &[data-v-dd209f83]:active {
148
148
  background-color: var(--kds-color-background-danger-active);
149
149
  }
150
150
  }
151
151
  }
152
152
  }
153
153
  &.transparent {
154
- &[data-v-18cd4b75] {
154
+ &[data-v-dd209f83] {
155
155
  color: var(--kds-color-text-and-icon-neutral);
156
156
  background-color: var(--kds-color-background-neutral-initial);
157
157
  border: var(--kds-border-action-transparent);
158
158
  }
159
- &.disabled[data-v-18cd4b75] {
159
+ &.disabled[data-v-dd209f83] {
160
160
  color: var(--kds-color-text-and-icon-disabled);
161
161
  }
162
162
  &:not(.disabled) {
163
- &[data-v-18cd4b75]:hover {
163
+ &[data-v-dd209f83]:hover {
164
164
  background-color: var(--kds-color-background-neutral-hover);
165
165
  }
166
- &[data-v-18cd4b75]:active {
166
+ &[data-v-dd209f83]:active {
167
167
  background-color: var(--kds-color-background-neutral-active);
168
168
  }
169
169
  }
170
170
  &.destructive {
171
- &[data-v-18cd4b75] {
171
+ &[data-v-dd209f83] {
172
172
  color: var(--kds-color-text-and-icon-danger);
173
173
  }
174
- &.disabled[data-v-18cd4b75] {
174
+ &.disabled[data-v-dd209f83] {
175
175
  color: var(--kds-color-text-and-icon-disabled);
176
176
  }
177
177
  &:not(.disabled) {
178
- &[data-v-18cd4b75]:hover {
178
+ &[data-v-dd209f83]:hover {
179
179
  background-color: var(--kds-color-background-danger-hover);
180
180
  }
181
- &[data-v-18cd4b75]:active {
181
+ &[data-v-dd209f83]:active {
182
182
  background-color: var(--kds-color-background-danger-active);
183
183
  }
184
184
  }
185
185
  }
186
186
  }
187
187
  &.toggled {
188
- &[data-v-18cd4b75] {
188
+ &[data-v-dd209f83] {
189
189
  color: var(--kds-color-text-and-icon-selected);
190
190
  background-color: var(--kds-color-background-selected-initial);
191
191
  border: var(--kds-border-action-selected);
192
192
  }
193
- &.disabled[data-v-18cd4b75] {
193
+ &.disabled[data-v-dd209f83] {
194
194
  color: var(--kds-color-text-and-icon-disabled);
195
195
  }
196
196
  &:not(.disabled) {
197
- &[data-v-18cd4b75]:hover {
197
+ &[data-v-dd209f83]:hover {
198
198
  background-color: var(--kds-color-background-selected-hover);
199
199
  }
200
- &[data-v-18cd4b75]:active {
200
+ &[data-v-dd209f83]:active {
201
201
  background-color: var(--kds-color-background-selected-active);
202
202
  }
203
203
  }
204
204
  }
205
- & .label[data-v-18cd4b75] {
205
+ & .label[data-v-dd209f83] {
206
206
  max-width: 200px;
207
207
  padding: 0 var(--kds-spacing-container-0-12x);
208
208
  overflow: hidden;
@@ -210,7 +210,7 @@ html.kds-legacy {
210
210
  white-space: nowrap;
211
211
  text-rendering: geometricprecision;
212
212
  }
213
- &.xsmall[data-v-18cd4b75] {
213
+ &.xsmall[data-v-dd209f83] {
214
214
  gap: var(--kds-spacing-container-0-12x);
215
215
  height: var(--kds-dimension-component-height-1-25x);
216
216
  padding: 0
@@ -222,7 +222,7 @@ html.kds-legacy {
222
222
  var(--kds-border-radius-container-0-25x)
223
223
  );
224
224
  }
225
- &.small[data-v-18cd4b75] {
225
+ &.small[data-v-dd209f83] {
226
226
  gap: var(--kds-spacing-container-0-12x);
227
227
  height: var(--kds-dimension-component-height-1-5x);
228
228
  padding: 0
@@ -234,7 +234,7 @@ html.kds-legacy {
234
234
  var(--kds-border-radius-container-0-37x)
235
235
  );
236
236
  }
237
- &.medium[data-v-18cd4b75] {
237
+ &.medium[data-v-dd209f83] {
238
238
  gap: var(--kds-spacing-container-0-25x);
239
239
  height: var(--kds-dimension-component-height-1-75x);
240
240
  padding: 0
@@ -247,7 +247,7 @@ html.kds-legacy {
247
247
  );
248
248
  }
249
249
  &.large {
250
- &[data-v-18cd4b75] {
250
+ &[data-v-dd209f83] {
251
251
  gap: var(--kds-spacing-container-0-25x);
252
252
  height: var(--kds-dimension-component-height-2-25x);
253
253
  padding: 0
@@ -259,14 +259,14 @@ html.kds-legacy {
259
259
  var(--kds-border-radius-container-0-50x)
260
260
  );
261
261
  }
262
- & .label[data-v-18cd4b75] {
262
+ & .label[data-v-dd209f83] {
263
263
  padding: 0 var(--kds-spacing-container-0-25x);
264
264
  }
265
265
  }
266
266
  }
267
267
 
268
268
  .checkbox {
269
- &[data-v-77251628] {
269
+ &[data-v-a0ec0f68] {
270
270
  --bg-initial: var(--kds-color-background-input-initial);
271
271
  --bg-hover: var(--kds-color-background-input-hover);
272
272
  --bg-active: var(--kds-color-background-input-active);
@@ -285,7 +285,7 @@ html.kds-legacy {
285
285
  background: none;
286
286
  border: none;
287
287
  }
288
- & .control[data-v-77251628] {
288
+ & .control[data-v-a0ec0f68] {
289
289
  position: relative;
290
290
  display: flex;
291
291
  flex-shrink: 0;
@@ -299,54 +299,54 @@ html.kds-legacy {
299
299
  border-radius: var(--kds-border-radius-container-0-25x);
300
300
  }
301
301
  &:focus-visible {
302
- &[data-v-77251628] {
302
+ &[data-v-a0ec0f68] {
303
303
  outline: none;
304
304
  }
305
- & .control[data-v-77251628] {
305
+ & .control[data-v-a0ec0f68] {
306
306
  outline: var(--kds-border-action-focused);
307
307
  outline-offset: var(--kds-spacing-offset-focus);
308
308
  }
309
309
  }
310
- &:hover:not(.disabled) .control[data-v-77251628] {
310
+ &:hover:not(.disabled) .control[data-v-a0ec0f68] {
311
311
  background: var(--bg-hover);
312
312
  }
313
- &:active:not(.disabled) .control[data-v-77251628] {
313
+ &:active:not(.disabled) .control[data-v-a0ec0f68] {
314
314
  background: var(--bg-active);
315
315
  }
316
- &.checked[data-v-77251628],
317
- &.indeterminate[data-v-77251628] {
316
+ &.checked[data-v-a0ec0f68],
317
+ &.indeterminate[data-v-a0ec0f68] {
318
318
  --bg-initial: var(--kds-color-background-selected-initial);
319
319
  --bg-hover: var(--kds-color-background-selected-hover);
320
320
  --bg-active: var(--kds-color-background-selected-active);
321
321
  --border: var(--kds-border-action-selected);
322
322
  }
323
323
  & .content {
324
- &[data-v-77251628] {
324
+ &[data-v-a0ec0f68] {
325
325
  display: flex;
326
326
  flex-direction: column;
327
327
  gap: var(--kds-spacing-container-0-12x);
328
328
  text-rendering: geometricprecision;
329
329
  }
330
- & .label[data-v-77251628] {
330
+ & .label[data-v-a0ec0f68] {
331
331
  padding-top: var(--kds-spacing-container-0-10x);
332
332
  font: var(--kds-font-base-interactive-small);
333
333
  color: var(--text-color);
334
334
  }
335
- & .helper-text[data-v-77251628] {
335
+ & .helper-text[data-v-a0ec0f68] {
336
336
  font: var(--kds-font-base-subtext-small);
337
337
  color: var(--helper-text-color);
338
338
  }
339
339
  }
340
- &.disabled[data-v-77251628] {
340
+ &.disabled[data-v-a0ec0f68] {
341
341
  --border: var(--kds-border-action-disabled);
342
342
  --icon-color: var(--kds-color-text-and-icon-disabled);
343
343
  --text-color: var(--kds-color-text-and-icon-disabled);
344
344
  --helper-text-color: var(--kds-color-text-and-icon-disabled);
345
345
 
346
- cursor: not-allowed;
346
+ cursor: default;
347
347
  }
348
348
  &.error {
349
- &[data-v-77251628] {
349
+ &[data-v-a0ec0f68] {
350
350
  --border: var(--kds-border-action-error);
351
351
  --icon-color: var(--kds-color-text-and-icon-danger);
352
352
  --text-color: var(--kds-color-text-and-icon-danger);
@@ -354,8 +354,8 @@ html.kds-legacy {
354
354
  --bg-hover: var(--kds-color-background-danger-hover);
355
355
  --bg-active: var(--kds-color-background-danger-active);
356
356
  }
357
- &.checked[data-v-77251628],
358
- &.indeterminate[data-v-77251628] {
357
+ &.checked[data-v-a0ec0f68],
358
+ &.indeterminate[data-v-a0ec0f68] {
359
359
  --bg-initial: var(--kds-color-background-danger-initial);
360
360
  }
361
361
  }
@@ -658,3 +658,143 @@ to {
658
658
  transform: rotate(270deg);
659
659
  }
660
660
  }
661
+
662
+ .radio {
663
+ &[data-v-f6d4be71] {
664
+ --bg-initial: var(--kds-color-background-input-initial);
665
+ --bg-hover: var(--kds-color-background-input-hover);
666
+ --bg-active: var(--kds-color-background-input-active);
667
+ --border: var(--kds-border-action-input);
668
+ --dot-color: var(--kds-color-text-and-icon-selected);
669
+ --text-color: var(--kds-color-text-and-icon-neutral);
670
+ --helper-text-color: var(--kds-color-text-and-icon-muted);
671
+
672
+ display: flex;
673
+ gap: var(--kds-spacing-container-0-37x);
674
+ align-items: flex-start;
675
+ padding: 0;
676
+ margin: 0;
677
+ text-align: left;
678
+ cursor: pointer;
679
+ background: none;
680
+ border: none;
681
+ }
682
+ & .control[data-v-f6d4be71] {
683
+ position: relative;
684
+ display: flex;
685
+ flex-shrink: 0;
686
+ align-items: center;
687
+ justify-content: center;
688
+ width: var(--kds-dimension-component-height-0-88x);
689
+ height: var(--kds-dimension-component-height-0-88x);
690
+ background: var(--bg-initial);
691
+ border: var(--border);
692
+ border-radius: 50%;
693
+ }
694
+ & .control .dot[data-v-f6d4be71] {
695
+ display: block;
696
+ flex-shrink: 0;
697
+ width: 100%;
698
+ height: 100%;
699
+ }
700
+ & .control .dot circle[data-v-f6d4be71] {
701
+ fill: var(--dot-color);
702
+ transform: scale(0.5);
703
+ transform-origin: center;
704
+ transform-box: fill-box;
705
+ }
706
+ &:focus-visible {
707
+ &[data-v-f6d4be71] {
708
+ outline: none;
709
+ }
710
+ & .control[data-v-f6d4be71] {
711
+ outline: var(--kds-border-action-focused);
712
+ outline-offset: var(--kds-spacing-offset-focus);
713
+ }
714
+ }
715
+ &:hover:not(.disabled) .control[data-v-f6d4be71] {
716
+ background: var(--bg-hover);
717
+ }
718
+ &:active:not(.disabled) .control[data-v-f6d4be71] {
719
+ background: var(--bg-active);
720
+ }
721
+ &.selected[data-v-f6d4be71] {
722
+ --border: var(--kds-border-action-selected);
723
+ --bg-initial: var(--kds-color-background-selected-initial);
724
+ --bg-hover: var(--kds-color-background-selected-hover);
725
+ --bg-active: var(--kds-color-background-selected-active);
726
+ }
727
+ & .content {
728
+ &[data-v-f6d4be71] {
729
+ display: flex;
730
+ flex-direction: column;
731
+ gap: var(--kds-spacing-container-0-25x);
732
+ }
733
+ & .label[data-v-f6d4be71] {
734
+ padding-top: var(--kds-spacing-container-0-10x);
735
+ font: var(--kds-font-base-interactive-small);
736
+ color: var(--text-color);
737
+ }
738
+ & .helper-text[data-v-f6d4be71] {
739
+ font: var(--kds-font-base-subtext-small);
740
+ color: var(--helper-text-color);
741
+ }
742
+ }
743
+ &.disabled[data-v-f6d4be71] {
744
+ --bg-initial: var(--kds-color-background-input-initial);
745
+ --border: var(--kds-border-action-disabled);
746
+ --dot-color: var(--kds-color-text-and-icon-disabled);
747
+ --text-color: var(--kds-color-text-and-icon-disabled);
748
+ --helper-text-color: var(--kds-color-text-and-icon-disabled);
749
+
750
+ cursor: default;
751
+ }
752
+ &.error {
753
+ &[data-v-f6d4be71] {
754
+ --bg-hover: var(--kds-color-background-danger-hover);
755
+ --bg-active: var(--kds-color-background-danger-active);
756
+ --border: var(--kds-border-action-error);
757
+ --dot-color: var(--kds-color-text-and-icon-danger);
758
+ --text-color: var(--kds-color-text-and-icon-danger);
759
+ }
760
+ &.selected[data-v-f6d4be71] {
761
+ --bg-initial: var(--kds-color-background-danger-initial);
762
+ --border: var(--kds-border-action-error);
763
+ }
764
+ }
765
+ }
766
+
767
+ .label[data-v-fd7ae250] {
768
+ display: flex;
769
+ gap: var(--kds-spacing-container-0-25x);
770
+ align-items: center;
771
+ min-height: var(--kds-dimension-component-height-0-75x);
772
+ padding-bottom: var(--kds-spacing-input-label-spacing-bottom);
773
+ font: var(--kds-font-base-title-small-strong);
774
+ color: var(--kds-color-text-and-icon-neutral);
775
+ }
776
+ .radio-button-group[data-v-fd7ae250] {
777
+ padding: 0;
778
+ margin: 0;
779
+ border: none;
780
+ }
781
+ .options[data-v-fd7ae250] {
782
+ display: flex;
783
+ flex-direction: column;
784
+ gap: var(--kds-spacing-container-0-37x) var(--kds-spacing-container-0-75x);
785
+ }
786
+ .options.horizontal[data-v-fd7ae250] {
787
+ flex-flow: row wrap;
788
+ align-items: flex-start;
789
+ }
790
+ .subtext {
791
+ &[data-v-fd7ae250] {
792
+ min-height: 1lh;
793
+ margin-top: var(--kds-spacing-container-0-25x);
794
+ font: var(--kds-font-base-subtext-small);
795
+ color: var(--kds-color-text-and-icon-muted);
796
+ }
797
+ &.error[data-v-fd7ae250] {
798
+ color: var(--kds-color-text-and-icon-danger);
799
+ }
800
+ }
package/dist/index.d.ts CHANGED
@@ -15,4 +15,6 @@ export type * from './Icon/types';
15
15
  export type * from './Modal/types';
16
16
  export * from './util';
17
17
  export type * from './util';
18
+ export * from './forms';
19
+ export type * from './forms';
18
20
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,EACL,KAAK,6BAA6B,EAClC,KAAK,6BAA6B,EAClC,KAAK,uBAAuB,EAC5B,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AAGpC,mBAAmB,gBAAgB,CAAC;AACpC,mBAAmB,kBAAkB,CAAC;AACtC,mBAAmB,cAAc,CAAC;AAClC,mBAAmB,eAAe,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,mBAAmB,QAAQ,CAAC"}
1
+ {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,8BAA8B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AACzF,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,wCAAwC,CAAC;AACtF,OAAO,EACL,KAAK,6BAA6B,EAClC,KAAK,6BAA6B,EAClC,KAAK,uBAAuB,EAC5B,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AAGpC,mBAAmB,gBAAgB,CAAC;AACpC,mBAAmB,kBAAkB,CAAC;AACtC,mBAAmB,cAAc,CAAC;AAClC,mBAAmB,eAAe,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,mBAAmB,QAAQ,CAAC;AAG5B,cAAc,SAAS,CAAC;AACxB,mBAAmB,SAAS,CAAC"}