@i-cell/ids-styles 0.0.67 → 0.0.69

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 (22) hide show
  1. package/dist/checkbox/checkbox-group.css +88 -28
  2. package/dist/checkbox/checkbox-group.min.css +1 -1
  3. package/dist/checkbox/checkbox-group.plugin.js +124 -36
  4. package/dist/checkbox/checkbox.css +36 -36
  5. package/dist/checkbox/checkbox.min.css +1 -1
  6. package/dist/checkbox/checkbox.plugin.js +36 -36
  7. package/dist/components.css +238 -130
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +255 -133
  10. package/dist/notification/notification.css +3 -1
  11. package/dist/notification/notification.min.css +1 -1
  12. package/dist/notification/notification.plugin.js +1 -1
  13. package/dist/option/option.css +5 -6
  14. package/dist/option/option.min.css +1 -1
  15. package/dist/option/option.plugin.js +5 -5
  16. package/dist/radio/radio.css +34 -2
  17. package/dist/radio/radio.min.css +1 -1
  18. package/dist/radio/radio.plugin.js +26 -3
  19. package/dist/switch/switch.css +72 -57
  20. package/dist/switch/switch.min.css +1 -1
  21. package/dist/switch/switch.plugin.js +63 -52
  22. package/package.json +2 -2
package/dist/checkbox/checkbox-group.css CHANGED
@@ -4,7 +4,7 @@
4
4
  justify-content: center;
5
5
  align-items: flex-start;
6
6
  }
7
- .ids-checkbox-group > .ids-checkbox-group__label {
7
+ .ids-checkbox-group > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
8
8
  font-style: normal;
9
9
  }
10
10
  .ids-checkbox-group > .ids-checkbox-group__list {
@@ -19,71 +19,131 @@
19
19
  align-items: flex-start;
20
20
  }
21
21
  .ids-checkbox-group.ids-checkbox-group-compact {
22
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);
23
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-compact);
22
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact);
23
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact);
24
24
  }
25
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
25
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend {
26
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact);
27
+ }
28
+ .ids-checkbox-group.ids-checkbox-group-compact > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
26
29
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
27
30
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
28
31
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
29
32
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
30
33
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
31
34
  }
32
- .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list {
33
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);
34
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact);
35
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
36
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact);
37
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact);
38
+ }
39
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
40
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact);
41
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact);
42
+ }
43
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
44
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact);
45
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
46
+ }
47
+ .ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
48
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact);
49
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact);
35
50
  }
36
51
  .ids-checkbox-group.ids-checkbox-group-comfortable {
37
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);
38
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable);
52
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);
53
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable);
39
54
  }
40
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
55
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend {
56
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable);
57
+ }
58
+ .ids-checkbox-group.ids-checkbox-group-comfortable > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
41
59
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
42
60
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
43
61
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
44
62
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
45
63
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
46
64
  }
47
- .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list {
48
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);
49
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable);
65
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
66
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable);
67
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable);
68
+ }
69
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
70
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable);
71
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable);
72
+ }
73
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
74
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable);
75
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
76
+ }
77
+ .ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
78
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable);
79
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable);
50
80
  }
51
81
  .ids-checkbox-group.ids-checkbox-group-spacious {
52
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);
53
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious);
82
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);
83
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious);
54
84
  }
55
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
85
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend {
86
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious);
87
+ }
88
+ .ids-checkbox-group.ids-checkbox-group-spacious > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
56
89
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
57
90
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
58
91
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
59
92
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
60
93
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
61
94
  }
62
- .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list {
63
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);
64
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious);
95
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
96
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious);
97
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious);
98
+ }
99
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
100
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious);
101
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious);
102
+ }
103
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
104
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious);
105
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
106
+ }
107
+ .ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
108
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious);
109
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious);
65
110
  }
66
111
  .ids-checkbox-group.ids-checkbox-group-dense {
67
- padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);
68
- gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-dense);
112
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);
113
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense);
69
114
  }
70
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
115
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend {
116
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense);
117
+ }
118
+ .ids-checkbox-group.ids-checkbox-group-dense > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
71
119
  font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
72
120
  font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
73
121
  font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
74
122
  line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
75
123
  letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
76
124
  }
77
- .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list {
78
- padding: var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);
79
- gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense);
125
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
126
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense);
127
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense);
128
+ }
129
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
130
+ padding: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense);
131
+ gap: var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense);
132
+ }
133
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list {
134
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense);
135
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
136
+ }
137
+ .ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list {
138
+ padding: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);
139
+ gap: var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense);
80
140
  }
81
- .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
141
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
82
142
  color: var(--ids-comp-checkbox-label-color-fg-light-default);
83
143
  }
84
- .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
144
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
85
145
  color: var(--ids-comp-checkbox-label-color-fg-dark-default);
86
146
  }
87
- .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
147
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__legend > .ids-checkbox-group__legend-label {
88
148
  color: var(--ids-comp-checkbox-label-color-fg-surface-default);
89
149
  }
package/dist/checkbox/checkbox-group.min.css CHANGED
@@ -1 +1 @@
1
- .ids-checkbox-group{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.ids-checkbox-group>.ids-checkbox-group__label{font-style:normal}.ids-checkbox-group>.ids-checkbox-group__list{display:flex}.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list{flex-direction:row;align-items:center}.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list{flex-direction:column;align-items:flex-start}.ids-checkbox-group.ids-checkbox-group-compact{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-compact);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-compact);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-compact);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-compact);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)}.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-comfortable{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-spacious{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-spacious);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-spacious);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-spacious);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-dense{padding:var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-container-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-dense);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-dense);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-dense);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-dense);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)}.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-light-default)}.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-dark-default)}.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label{color:var(--ids-comp-checkbox-label-color-fg-surface-default)}
1
+ .ids-checkbox-group{display:flex;flex-direction:column;justify-content:center;align-items:flex-start}.ids-checkbox-group>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-style:normal}.ids-checkbox-group>.ids-checkbox-group__list{display:flex}.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list{flex-direction:row;align-items:center}.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list{flex-direction:column;align-items:flex-start}.ids-checkbox-group.ids-checkbox-group-compact{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-compact);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-compact);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-compact);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-compact);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)}.ids-checkbox-group.ids-checkbox-group-comfortable{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)}.ids-checkbox-group.ids-checkbox-group-spacious{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-spacious);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-spacious);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-spacious);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)}.ids-checkbox-group.ids-checkbox-group-dense{padding:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend{gap:var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{font-family:var(--ids-comp-checkbox-group-label-typography-font-family-dense);font-size:var(--ids-comp-checkbox-group-label-typography-font-size-dense);font-weight:var(--ids-comp-checkbox-group-label-typography-font-weight-dense);line-height:var(--ids-comp-checkbox-group-label-typography-line-height-dense);letter-spacing:var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list{padding:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense);gap:var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)}.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-light-default)}.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-dark-default)}.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label{color:var(--ids-comp-checkbox-label-color-fg-surface-default)}
package/dist/checkbox/checkbox-group.plugin.js CHANGED
@@ -3,85 +3,173 @@ module.exports = function CheckboxGroupPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
5
  '.ids-checkbox-group': { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' },
6
- '.ids-checkbox-group>.ids-checkbox-group__label': { fontStyle: 'normal' },
6
+ '.ids-checkbox-group>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': { fontStyle: 'normal' },
7
7
  '.ids-checkbox-group>.ids-checkbox-group__list': { display: 'flex' },
8
8
  '.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list': { flexDirection: 'row', alignItems: 'center' },
9
9
  '.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list': { flexDirection: 'column', alignItems: 'flex-start' },
10
10
  '.ids-checkbox-group.ids-checkbox-group-compact': {
11
11
  padding:
12
- 'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact)',
13
- gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-compact)',
12
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-compact)',
13
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-compact)',
14
14
  },
15
- '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label': {
15
+ '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend': {
16
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-compact)',
17
+ },
18
+ '.ids-checkbox-group.ids-checkbox-group-compact>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
16
19
  fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-compact)',
17
20
  fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-compact)',
18
21
  fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-compact)',
19
22
  lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-compact)',
20
23
  letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)',
21
24
  },
22
- '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list': {
23
- padding:
24
- 'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-compact)',
25
- gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact)',
26
- },
25
+ '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
26
+ {
27
+ padding:
28
+ 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-compact)',
29
+ gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)',
30
+ },
31
+ '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
32
+ {
33
+ padding:
34
+ 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-compact)',
35
+ gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-compact) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-compact)',
36
+ },
37
+ '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
38
+ {
39
+ padding:
40
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-compact)',
41
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)',
42
+ },
43
+ '.ids-checkbox-group.ids-checkbox-group-compact.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
44
+ {
45
+ padding:
46
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-compact)',
47
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-compact)',
48
+ },
27
49
  '.ids-checkbox-group.ids-checkbox-group-comfortable': {
28
50
  padding:
29
- 'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable)',
30
- gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable)',
51
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-comfortable)',
52
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-comfortable)',
31
53
  },
32
- '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label': {
54
+ '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend': {
55
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-comfortable)',
56
+ },
57
+ '.ids-checkbox-group.ids-checkbox-group-comfortable>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
33
58
  fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-comfortable)',
34
59
  fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-comfortable)',
35
60
  fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable)',
36
61
  lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-comfortable)',
37
62
  letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)',
38
63
  },
39
- '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list': {
40
- padding:
41
- 'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-comfortable)',
42
- gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable)',
43
- },
64
+ '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
65
+ {
66
+ padding:
67
+ 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-comfortable)',
68
+ gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)',
69
+ },
70
+ '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
71
+ {
72
+ padding:
73
+ 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-comfortable)',
74
+ gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-comfortable) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-comfortable)',
75
+ },
76
+ '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
77
+ {
78
+ padding:
79
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-comfortable)',
80
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)',
81
+ },
82
+ '.ids-checkbox-group.ids-checkbox-group-comfortable.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
83
+ {
84
+ padding:
85
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-comfortable)',
86
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-comfortable)',
87
+ },
44
88
  '.ids-checkbox-group.ids-checkbox-group-spacious': {
45
89
  padding:
46
- 'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious)',
47
- gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious)',
90
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-spacious)',
91
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-spacious)',
48
92
  },
49
- '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label': {
93
+ '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend': {
94
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-spacious)',
95
+ },
96
+ '.ids-checkbox-group.ids-checkbox-group-spacious>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
50
97
  fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-spacious)',
51
98
  fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-spacious)',
52
99
  fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-spacious)',
53
100
  lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-spacious)',
54
101
  letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)',
55
102
  },
56
- '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list': {
57
- padding:
58
- 'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-spacious)',
59
- gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious)',
60
- },
103
+ '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
104
+ {
105
+ padding:
106
+ 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-spacious)',
107
+ gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)',
108
+ },
109
+ '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
110
+ {
111
+ padding:
112
+ 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-spacious)',
113
+ gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-spacious) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-spacious)',
114
+ },
115
+ '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
116
+ {
117
+ padding:
118
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-spacious)',
119
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)',
120
+ },
121
+ '.ids-checkbox-group.ids-checkbox-group-spacious.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
122
+ {
123
+ padding:
124
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-spacious)',
125
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-spacious)',
126
+ },
61
127
  '.ids-checkbox-group.ids-checkbox-group-dense': {
62
128
  padding:
63
- 'var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense)',
64
- gap: 'var(--ids-comp-checkbox-group-vertical-container-size-gap-dense)',
129
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-padding-x-dense)',
130
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-size-gap-dense)',
65
131
  },
66
- '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label': {
132
+ '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend': {
133
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-legend-size-gap-dense)',
134
+ },
135
+ '.ids-checkbox-group.ids-checkbox-group-dense>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
67
136
  fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-dense)',
68
137
  fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-dense)',
69
138
  fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-dense)',
70
139
  lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-dense)',
71
140
  letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)',
72
141
  },
73
- '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list': {
74
- padding:
75
- 'var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-list-indeterminated-size-padding-x-dense)',
76
- gap: 'var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense)',
77
- },
78
- '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__label': {
142
+ '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
143
+ {
144
+ padding:
145
+ 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-indeterminated-size-padding-x-dense)',
146
+ gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)',
147
+ },
148
+ '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-horizontal:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
149
+ {
150
+ padding:
151
+ 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-padding-x-dense)',
152
+ gap: 'var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-y-dense) var(--ids-comp-checkbox-group-horizontal-fieldset-list-size-gap-x-dense)',
153
+ },
154
+ '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical.ids-checkbox-group-indeterminated .ids-checkbox-group__list':
155
+ {
156
+ padding:
157
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-indeterminated-size-padding-x-dense)',
158
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)',
159
+ },
160
+ '.ids-checkbox-group.ids-checkbox-group-dense.ids-checkbox-group-vertical:not(.ids-checkbox-group-indeterminated) .ids-checkbox-group__list':
161
+ {
162
+ padding:
163
+ 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-fieldset-list-size-padding-x-dense)',
164
+ gap: 'var(--ids-comp-checkbox-group-vertical-fieldset-list-size-gap-dense)',
165
+ },
166
+ '.ids-checkbox-group.ids-checkbox-group-light>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
79
167
  color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
80
168
  },
81
- '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label': {
169
+ '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
82
170
  color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
83
171
  },
84
- '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label': {
172
+ '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__legend>.ids-checkbox-group__legend-label': {
85
173
  color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
86
174
  },
87
175
  };