@i-cell/ids-styles 0.0.39 → 0.0.40

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 (10) hide show
  1. package/dist/card/card.css +13 -3
  2. package/dist/card/card.min.css +1 -1
  3. package/dist/card/card.plugin.js +10 -2
  4. package/dist/components.css +43 -30
  5. package/dist/components.min.css +1 -1
  6. package/dist/components.plugin.js +34 -26
  7. package/dist/radio/radio.css +30 -27
  8. package/dist/radio/radio.min.css +1 -1
  9. package/dist/radio/radio.plugin.js +24 -24
  10. package/package.json +1 -1
package/dist/components.plugin.js CHANGED
@@ -1969,9 +1969,9 @@ module.exports = function ComponentsPlugin() {
1969
1969
  color: 'var(--ids-comp-button-text-color-fg-icon-surface-disabled)',
1970
1970
  },
1971
1971
  '.ids-card': {
1972
- boxSizing: ['border-box', 'border-box'],
1972
+ boxSizing: 'border-box',
1973
1973
  borderWidth: '0',
1974
- borderStyle: ['none', 'solid'],
1974
+ borderStyle: 'none',
1975
1975
  borderColor: 'rgba(0,0,0,0)',
1976
1976
  lineHeight: 1.5,
1977
1977
  display: 'flex',
@@ -2046,6 +2046,7 @@ module.exports = function ComponentsPlugin() {
2046
2046
  borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-compact)',
2047
2047
  },
2048
2048
  '.ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined': {
2049
+ borderStyle: 'solid',
2049
2050
  borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-compact)',
2050
2051
  },
2051
2052
  '.ids-card.ids-card-compact.ids-card-vertical': {
@@ -2055,6 +2056,7 @@ module.exports = function ComponentsPlugin() {
2055
2056
  borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-compact)',
2056
2057
  },
2057
2058
  '.ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined': {
2059
+ borderStyle: 'solid',
2058
2060
  borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-compact)',
2059
2061
  },
2060
2062
  '.ids-card.ids-card-compact.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-compact)' },
@@ -2089,6 +2091,7 @@ module.exports = function ComponentsPlugin() {
2089
2091
  borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-comfortable)',
2090
2092
  },
2091
2093
  '.ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined': {
2094
+ borderStyle: 'solid',
2092
2095
  borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-comfortable)',
2093
2096
  },
2094
2097
  '.ids-card.ids-card-comfortable.ids-card-vertical': {
@@ -2098,6 +2101,7 @@ module.exports = function ComponentsPlugin() {
2098
2101
  borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-comfortable)',
2099
2102
  },
2100
2103
  '.ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined': {
2104
+ borderStyle: 'solid',
2101
2105
  borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-comfortable)',
2102
2106
  },
2103
2107
  '.ids-card.ids-card-comfortable.ids-card-clickable:focus': {
@@ -2134,6 +2138,7 @@ module.exports = function ComponentsPlugin() {
2134
2138
  borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-spacious)',
2135
2139
  },
2136
2140
  '.ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined': {
2141
+ borderStyle: 'solid',
2137
2142
  borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-spacious)',
2138
2143
  },
2139
2144
  '.ids-card.ids-card-spacious.ids-card-vertical': {
@@ -2143,6 +2148,7 @@ module.exports = function ComponentsPlugin() {
2143
2148
  borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-spacious)',
2144
2149
  },
2145
2150
  '.ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined': {
2151
+ borderStyle: 'solid',
2146
2152
  borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-spacious)',
2147
2153
  },
2148
2154
  '.ids-card.ids-card-spacious.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-spacious)' },
@@ -2177,6 +2183,7 @@ module.exports = function ComponentsPlugin() {
2177
2183
  borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-dense)',
2178
2184
  },
2179
2185
  '.ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined': {
2186
+ borderStyle: 'solid',
2180
2187
  borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-dense)',
2181
2188
  },
2182
2189
  '.ids-card.ids-card-dense.ids-card-vertical': {
@@ -2186,6 +2193,7 @@ module.exports = function ComponentsPlugin() {
2186
2193
  borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-dense)',
2187
2194
  },
2188
2195
  '.ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined': {
2196
+ borderStyle: 'solid',
2189
2197
  borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-dense)',
2190
2198
  },
2191
2199
  '.ids-card.ids-card-dense.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-dense)' },
@@ -9013,32 +9021,32 @@ module.exports = function ComponentsPlugin() {
9013
9021
  'var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact)',
9014
9022
  gap: 'var(--ids-comp-radio-group-vertical-container-size-gap-compact)',
9015
9023
  },
9016
- '.ids-radio-group.ids-radio-group-compact>.ids-radio': {
9024
+ '.ids-radio-group.ids-radio-group-compact .ids-radio': {
9017
9025
  padding:
9018
9026
  'var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact)',
9019
9027
  gap: 'var(--ids-comp-radio-button-container-size-gap-compact)',
9020
9028
  },
9021
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9029
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9022
9030
  top: 'calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact))/2)',
9023
9031
  left: 'calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact))/2)',
9024
9032
  height: 'var(--ids-comp-radio-button-input-size-touchtarget-height-compact)',
9025
9033
  width: 'var(--ids-comp-radio-button-input-size-touchtarget-width-compact)',
9026
9034
  },
9027
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__input-wrapper input[type=radio]': {
9035
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]': {
9028
9036
  width: 'var(--ids-comp-radio-button-input-size-width-compact)',
9029
9037
  height: 'var(--ids-comp-radio-button-input-size-height-compact)',
9030
9038
  borderRadius: 'var(--ids-comp-radio-button-input-size-border-radius-compact)',
9031
9039
  borderWidth: 'var(--ids-comp-radio-button-input-size-border-width-compact)',
9032
9040
  },
9033
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9041
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9034
9042
  width: 'var(--ids-comp-radio-button-input-inner-circle-size-width-compact)',
9035
9043
  height: 'var(--ids-comp-radio-button-input-inner-circle-size-height-compact)',
9036
9044
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-compact)',
9037
9045
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-compact)',
9038
9046
  },
9039
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible':
9047
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible':
9040
9048
  { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-compact)' },
9041
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__label': {
9049
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label': {
9042
9050
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-compact) 0px',
9043
9051
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-compact)',
9044
9052
  fontSize: 'var(--ids-comp-radio-button-label-typography-font-size-compact)',
@@ -9056,33 +9064,33 @@ module.exports = function ComponentsPlugin() {
9056
9064
  'var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable)',
9057
9065
  gap: 'var(--ids-comp-radio-group-vertical-container-size-gap-comfortable)',
9058
9066
  },
9059
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio': {
9067
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio': {
9060
9068
  padding:
9061
9069
  'var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable)',
9062
9070
  gap: 'var(--ids-comp-radio-button-container-size-gap-comfortable)',
9063
9071
  },
9064
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9072
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9065
9073
  top: 'calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable))/2)',
9066
9074
  left: 'calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable))/2)',
9067
9075
  height: 'var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)',
9068
9076
  width: 'var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)',
9069
9077
  },
9070
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__input-wrapper input[type=radio]': {
9078
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]': {
9071
9079
  width: 'var(--ids-comp-radio-button-input-size-width-comfortable)',
9072
9080
  height: 'var(--ids-comp-radio-button-input-size-height-comfortable)',
9073
9081
  borderRadius: 'var(--ids-comp-radio-button-input-size-border-radius-comfortable)',
9074
9082
  borderWidth: 'var(--ids-comp-radio-button-input-size-border-width-comfortable)',
9075
9083
  },
9076
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle':
9084
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle':
9077
9085
  {
9078
9086
  width: 'var(--ids-comp-radio-button-input-inner-circle-size-width-comfortable)',
9079
9087
  height: 'var(--ids-comp-radio-button-input-inner-circle-size-height-comfortable)',
9080
9088
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-comfortable)',
9081
9089
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-comfortable)',
9082
9090
  },
9083
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible':
9091
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible':
9084
9092
  { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-comfortable)' },
9085
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__label': {
9093
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label': {
9086
9094
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px',
9087
9095
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-comfortable)',
9088
9096
  fontSize: 'var(--ids-comp-radio-button-label-typography-font-size-comfortable)',
@@ -9100,32 +9108,32 @@ module.exports = function ComponentsPlugin() {
9100
9108
  'var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious)',
9101
9109
  gap: 'var(--ids-comp-radio-group-vertical-container-size-gap-spacious)',
9102
9110
  },
9103
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio': {
9111
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio': {
9104
9112
  padding:
9105
9113
  'var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious)',
9106
9114
  gap: 'var(--ids-comp-radio-button-container-size-gap-spacious)',
9107
9115
  },
9108
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9116
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9109
9117
  top: 'calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious))/2)',
9110
9118
  left: 'calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious))/2)',
9111
9119
  height: 'var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)',
9112
9120
  width: 'var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)',
9113
9121
  },
9114
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__input-wrapper input[type=radio]': {
9122
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]': {
9115
9123
  width: 'var(--ids-comp-radio-button-input-size-width-spacious)',
9116
9124
  height: 'var(--ids-comp-radio-button-input-size-height-spacious)',
9117
9125
  borderRadius: 'var(--ids-comp-radio-button-input-size-border-radius-spacious)',
9118
9126
  borderWidth: 'var(--ids-comp-radio-button-input-size-border-width-spacious)',
9119
9127
  },
9120
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9128
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9121
9129
  width: 'var(--ids-comp-radio-button-input-inner-circle-size-width-spacious)',
9122
9130
  height: 'var(--ids-comp-radio-button-input-inner-circle-size-height-spacious)',
9123
9131
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-spacious)',
9124
9132
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-spacious)',
9125
9133
  },
9126
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible':
9134
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible':
9127
9135
  { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-spacious)' },
9128
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__label': {
9136
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label': {
9129
9137
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px',
9130
9138
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-spacious)',
9131
9139
  fontSize: 'var(--ids-comp-radio-button-label-typography-font-size-spacious)',
@@ -9143,31 +9151,31 @@ module.exports = function ComponentsPlugin() {
9143
9151
  'var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense)',
9144
9152
  gap: 'var(--ids-comp-radio-group-vertical-container-size-gap-dense)',
9145
9153
  },
9146
- '.ids-radio-group.ids-radio-group-dense>.ids-radio': {
9154
+ '.ids-radio-group.ids-radio-group-dense .ids-radio': {
9147
9155
  padding: 'var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense)',
9148
9156
  gap: 'var(--ids-comp-radio-button-container-size-gap-dense)',
9149
9157
  },
9150
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9158
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9151
9159
  top: 'calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense))/2)',
9152
9160
  left: 'calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense))/2)',
9153
9161
  height: 'var(--ids-comp-radio-button-input-size-touchtarget-height-dense)',
9154
9162
  width: 'var(--ids-comp-radio-button-input-size-touchtarget-width-dense)',
9155
9163
  },
9156
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__input-wrapper input[type=radio]': {
9164
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]': {
9157
9165
  width: 'var(--ids-comp-radio-button-input-size-width-dense)',
9158
9166
  height: 'var(--ids-comp-radio-button-input-size-height-dense)',
9159
9167
  borderRadius: 'var(--ids-comp-radio-button-input-size-border-radius-dense)',
9160
9168
  borderWidth: 'var(--ids-comp-radio-button-input-size-border-width-dense)',
9161
9169
  },
9162
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9170
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9163
9171
  width: 'var(--ids-comp-radio-button-input-inner-circle-size-width-dense)',
9164
9172
  height: 'var(--ids-comp-radio-button-input-inner-circle-size-height-dense)',
9165
9173
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-dense)',
9166
9174
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-dense)',
9167
9175
  },
9168
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible':
9176
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:focus,.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible':
9169
9177
  { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-dense)' },
9170
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__label': {
9178
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label': {
9171
9179
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-dense) 0px',
9172
9180
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-dense)',
9173
9181
  fontSize: 'var(--ids-comp-radio-button-label-typography-font-size-dense)',
package/dist/radio/radio.css CHANGED
@@ -4,9 +4,6 @@
4
4
  border-style: none;
5
5
  border-color: transparent;
6
6
  line-height: 1.5;
7
- display: inline-flex;
8
- align-items: flex-start;
9
- justify-content: start;
10
7
  }
11
8
  .ids-radio-group::before, .ids-radio-group::after, .ids-radio-group *, .ids-radio-group ::before, .ids-radio-group ::after {
12
9
  box-sizing: border-box;
@@ -14,6 +11,12 @@
14
11
  border-style: none;
15
12
  border-color: transparent;
16
13
  }
14
+
15
+ .ids-radio-group {
16
+ display: inline-flex;
17
+ align-items: flex-start;
18
+ justify-content: start;
19
+ }
17
20
  .ids-radio-group.ids-radio-group-horizontal {
18
21
  flex-direction: row;
19
22
  }
@@ -111,32 +114,32 @@
111
114
  padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact);
112
115
  gap: var(--ids-comp-radio-group-vertical-container-size-gap-compact);
113
116
  }
114
- .ids-radio-group.ids-radio-group-compact > .ids-radio {
117
+ .ids-radio-group.ids-radio-group-compact .ids-radio {
115
118
  padding: var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact);
116
119
  gap: var(--ids-comp-radio-button-container-size-gap-compact);
117
120
  }
118
- .ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
121
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
119
122
  top: calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact)) / 2);
120
123
  left: calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact)) / 2);
121
124
  height: var(--ids-comp-radio-button-input-size-touchtarget-height-compact);
122
125
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-compact);
123
126
  }
124
- .ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper input[type=radio] {
127
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio] {
125
128
  width: var(--ids-comp-radio-button-input-size-width-compact);
126
129
  height: var(--ids-comp-radio-button-input-size-height-compact);
127
130
  border-radius: var(--ids-comp-radio-button-input-size-border-radius-compact);
128
131
  border-width: var(--ids-comp-radio-button-input-size-border-width-compact);
129
132
  }
130
- .ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
133
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
131
134
  width: var(--ids-comp-radio-button-input-inner-circle-size-width-compact);
132
135
  height: var(--ids-comp-radio-button-input-inner-circle-size-height-compact);
133
136
  border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-compact);
134
137
  border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-compact);
135
138
  }
136
- .ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
139
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
137
140
  outline-width: var(--ids-comp-radio-focused-outline-outline-compact);
138
141
  }
139
- .ids-radio-group.ids-radio-group-compact > .ids-radio .ids-radio__label {
142
+ .ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label {
140
143
  padding: var(--ids-comp-radio-button-label-size-padding-y-compact) 0px;
141
144
  font-family: var(--ids-comp-radio-button-label-typography-font-family-compact);
142
145
  font-size: var(--ids-comp-radio-button-label-typography-font-size-compact);
@@ -152,32 +155,32 @@
152
155
  padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable);
153
156
  gap: var(--ids-comp-radio-group-vertical-container-size-gap-comfortable);
154
157
  }
155
- .ids-radio-group.ids-radio-group-comfortable > .ids-radio {
158
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio {
156
159
  padding: var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable);
157
160
  gap: var(--ids-comp-radio-button-container-size-gap-comfortable);
158
161
  }
159
- .ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
162
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
160
163
  top: calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)) / 2);
161
164
  left: calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)) / 2);
162
165
  height: var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable);
163
166
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable);
164
167
  }
165
- .ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper input[type=radio] {
168
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio] {
166
169
  width: var(--ids-comp-radio-button-input-size-width-comfortable);
167
170
  height: var(--ids-comp-radio-button-input-size-height-comfortable);
168
171
  border-radius: var(--ids-comp-radio-button-input-size-border-radius-comfortable);
169
172
  border-width: var(--ids-comp-radio-button-input-size-border-width-comfortable);
170
173
  }
171
- .ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
174
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
172
175
  width: var(--ids-comp-radio-button-input-inner-circle-size-width-comfortable);
173
176
  height: var(--ids-comp-radio-button-input-inner-circle-size-height-comfortable);
174
177
  border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-comfortable);
175
178
  border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-comfortable);
176
179
  }
177
- .ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
180
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
178
181
  outline-width: var(--ids-comp-radio-focused-outline-outline-comfortable);
179
182
  }
180
- .ids-radio-group.ids-radio-group-comfortable > .ids-radio .ids-radio__label {
183
+ .ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label {
181
184
  padding: var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px;
182
185
  font-family: var(--ids-comp-radio-button-label-typography-font-family-comfortable);
183
186
  font-size: var(--ids-comp-radio-button-label-typography-font-size-comfortable);
@@ -193,32 +196,32 @@
193
196
  padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious);
194
197
  gap: var(--ids-comp-radio-group-vertical-container-size-gap-spacious);
195
198
  }
196
- .ids-radio-group.ids-radio-group-spacious > .ids-radio {
199
+ .ids-radio-group.ids-radio-group-spacious .ids-radio {
197
200
  padding: var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious);
198
201
  gap: var(--ids-comp-radio-button-container-size-gap-spacious);
199
202
  }
200
- .ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
203
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
201
204
  top: calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)) / 2);
202
205
  left: calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)) / 2);
203
206
  height: var(--ids-comp-radio-button-input-size-touchtarget-height-spacious);
204
207
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-spacious);
205
208
  }
206
- .ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper input[type=radio] {
209
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio] {
207
210
  width: var(--ids-comp-radio-button-input-size-width-spacious);
208
211
  height: var(--ids-comp-radio-button-input-size-height-spacious);
209
212
  border-radius: var(--ids-comp-radio-button-input-size-border-radius-spacious);
210
213
  border-width: var(--ids-comp-radio-button-input-size-border-width-spacious);
211
214
  }
212
- .ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
215
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
213
216
  width: var(--ids-comp-radio-button-input-inner-circle-size-width-spacious);
214
217
  height: var(--ids-comp-radio-button-input-inner-circle-size-height-spacious);
215
218
  border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-spacious);
216
219
  border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-spacious);
217
220
  }
218
- .ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
221
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
219
222
  outline-width: var(--ids-comp-radio-focused-outline-outline-spacious);
220
223
  }
221
- .ids-radio-group.ids-radio-group-spacious > .ids-radio .ids-radio__label {
224
+ .ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label {
222
225
  padding: var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px;
223
226
  font-family: var(--ids-comp-radio-button-label-typography-font-family-spacious);
224
227
  font-size: var(--ids-comp-radio-button-label-typography-font-size-spacious);
@@ -234,32 +237,32 @@
234
237
  padding: var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense);
235
238
  gap: var(--ids-comp-radio-group-vertical-container-size-gap-dense);
236
239
  }
237
- .ids-radio-group.ids-radio-group-dense > .ids-radio {
240
+ .ids-radio-group.ids-radio-group-dense .ids-radio {
238
241
  padding: var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense);
239
242
  gap: var(--ids-comp-radio-button-container-size-gap-dense);
240
243
  }
241
- .ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
244
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target {
242
245
  top: calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense)) / 2);
243
246
  left: calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense)) / 2);
244
247
  height: var(--ids-comp-radio-button-input-size-touchtarget-height-dense);
245
248
  width: var(--ids-comp-radio-button-input-size-touchtarget-width-dense);
246
249
  }
247
- .ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper input[type=radio] {
250
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio] {
248
251
  width: var(--ids-comp-radio-button-input-size-width-dense);
249
252
  height: var(--ids-comp-radio-button-input-size-height-dense);
250
253
  border-radius: var(--ids-comp-radio-button-input-size-border-radius-dense);
251
254
  border-width: var(--ids-comp-radio-button-input-size-border-width-dense);
252
255
  }
253
- .ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
256
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:checked + .ids-radio__inner-circle {
254
257
  width: var(--ids-comp-radio-button-input-inner-circle-size-width-dense);
255
258
  height: var(--ids-comp-radio-button-input-inner-circle-size-height-dense);
256
259
  border-radius: var(--ids-comp-radio-button-input-inner-circle-size-border-radius-dense);
257
260
  border-width: var(--ids-comp-radio-button-input-inner-circle-size-border-width-dense);
258
261
  }
259
- .ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
262
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:focus, .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:focus-visible {
260
263
  outline-width: var(--ids-comp-radio-focused-outline-outline-dense);
261
264
  }
262
- .ids-radio-group.ids-radio-group-dense > .ids-radio .ids-radio__label {
265
+ .ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label {
263
266
  padding: var(--ids-comp-radio-button-label-size-padding-y-dense) 0px;
264
267
  font-family: var(--ids-comp-radio-button-label-typography-font-family-dense);
265
268
  font-size: var(--ids-comp-radio-button-label-typography-font-size-dense);