@i-cell/ids-styles 0.0.39 → 0.0.41

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 (13) hide show
  1. package/dist/button/button.css +72 -0
  2. package/dist/button/button.min.css +1 -1
  3. package/dist/button/button.plugin.js +72 -0
  4. package/dist/card/card.css +13 -3
  5. package/dist/card/card.min.css +1 -1
  6. package/dist/card/card.plugin.js +10 -2
  7. package/dist/components.css +115 -30
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +106 -26
  10. package/dist/radio/radio.css +30 -27
  11. package/dist/radio/radio.min.css +1 -1
  12. package/dist/radio/radio.plugin.js +24 -24
  13. package/package.json +2 -2
package/dist/components.plugin.js CHANGED
@@ -1026,6 +1026,14 @@ module.exports = function ComponentsPlugin() {
1026
1026
  '.ids-button.ids-button-filled.ids-button-error:active>.ids-icon': {
1027
1027
  color: 'var(--ids-comp-button-filled-color-fg-icon-error-pressed)',
1028
1028
  },
1029
+ '.ids-button.ids-button-filled.ids-button-error:disabled': {
1030
+ color: 'var(--ids-comp-button-filled-color-fg-label-error-disabled)',
1031
+ background: 'var(--ids-comp-button-filled-color-bg-error-disabled)',
1032
+ borderColor: 'var(--ids-comp-button-filled-color-border-error-disabled)',
1033
+ },
1034
+ '.ids-button.ids-button-filled.ids-button-error:disabled>.ids-icon': {
1035
+ color: 'var(--ids-comp-button-filled-color-fg-icon-error-disabled)',
1036
+ },
1029
1037
  '.ids-button.ids-button-filled.ids-button-success': {
1030
1038
  color: 'var(--ids-comp-button-filled-color-fg-label-success-default)',
1031
1039
  background: 'var(--ids-comp-button-filled-color-bg-success-default)',
@@ -1058,6 +1066,14 @@ module.exports = function ComponentsPlugin() {
1058
1066
  '.ids-button.ids-button-filled.ids-button-success:active>.ids-icon': {
1059
1067
  color: 'var(--ids-comp-button-filled-color-fg-icon-success-pressed)',
1060
1068
  },
1069
+ '.ids-button.ids-button-filled.ids-button-success:disabled': {
1070
+ color: 'var(--ids-comp-button-filled-color-fg-label-success-disabled)',
1071
+ background: 'var(--ids-comp-button-filled-color-bg-success-disabled)',
1072
+ borderColor: 'var(--ids-comp-button-filled-color-border-success-disabled)',
1073
+ },
1074
+ '.ids-button.ids-button-filled.ids-button-success:disabled>.ids-icon': {
1075
+ color: 'var(--ids-comp-button-filled-color-fg-icon-success-disabled)',
1076
+ },
1061
1077
  '.ids-button.ids-button-filled.ids-button-warning': {
1062
1078
  color: 'var(--ids-comp-button-filled-color-fg-label-warning-default)',
1063
1079
  background: 'var(--ids-comp-button-filled-color-bg-warning-default)',
@@ -1090,6 +1106,14 @@ module.exports = function ComponentsPlugin() {
1090
1106
  '.ids-button.ids-button-filled.ids-button-warning:active>.ids-icon': {
1091
1107
  color: 'var(--ids-comp-button-filled-color-fg-icon-warning-pressed)',
1092
1108
  },
1109
+ '.ids-button.ids-button-filled.ids-button-warning:disabled': {
1110
+ color: 'var(--ids-comp-button-filled-color-fg-label-warning-disabled)',
1111
+ background: 'var(--ids-comp-button-filled-color-bg-warning-disabled)',
1112
+ borderColor: 'var(--ids-comp-button-filled-color-border-warning-disabled)',
1113
+ },
1114
+ '.ids-button.ids-button-filled.ids-button-warning:disabled>.ids-icon': {
1115
+ color: 'var(--ids-comp-button-filled-color-fg-icon-warning-disabled)',
1116
+ },
1093
1117
  '.ids-button.ids-button-filled.ids-button-light': {
1094
1118
  color: 'var(--ids-comp-button-filled-color-fg-label-light-default)',
1095
1119
  background: 'var(--ids-comp-button-filled-color-bg-light-default)',
@@ -1398,6 +1422,14 @@ module.exports = function ComponentsPlugin() {
1398
1422
  '.ids-button.ids-button-outlined.ids-button-error:active>.ids-icon': {
1399
1423
  color: 'var(--ids-comp-button-outlined-color-fg-icon-error-pressed)',
1400
1424
  },
1425
+ '.ids-button.ids-button-outlined.ids-button-error:disabled': {
1426
+ color: 'var(--ids-comp-button-outlined-color-fg-label-error-disabled)',
1427
+ background: 'var(--ids-comp-button-outlined-color-bg-error-disabled)',
1428
+ borderColor: 'var(--ids-comp-button-outlined-color-border-error-disabled)',
1429
+ },
1430
+ '.ids-button.ids-button-outlined.ids-button-error:disabled>.ids-icon': {
1431
+ color: 'var(--ids-comp-button-outlined-color-fg-icon-error-disabled)',
1432
+ },
1401
1433
  '.ids-button.ids-button-outlined.ids-button-success': {
1402
1434
  color: 'var(--ids-comp-button-outlined-color-fg-label-success-default)',
1403
1435
  background: 'var(--ids-comp-button-outlined-color-bg-success-default)',
@@ -1430,6 +1462,14 @@ module.exports = function ComponentsPlugin() {
1430
1462
  '.ids-button.ids-button-outlined.ids-button-success:active>.ids-icon': {
1431
1463
  color: 'var(--ids-comp-button-outlined-color-fg-icon-success-pressed)',
1432
1464
  },
1465
+ '.ids-button.ids-button-outlined.ids-button-success:disabled': {
1466
+ color: 'var(--ids-comp-button-outlined-color-fg-label-success-disabled)',
1467
+ background: 'var(--ids-comp-button-outlined-color-bg-success-disabled)',
1468
+ borderColor: 'var(--ids-comp-button-outlined-color-border-success-disabled)',
1469
+ },
1470
+ '.ids-button.ids-button-outlined.ids-button-success:disabled>.ids-icon': {
1471
+ color: 'var(--ids-comp-button-outlined-color-fg-icon-success-disabled)',
1472
+ },
1433
1473
  '.ids-button.ids-button-outlined.ids-button-warning': {
1434
1474
  color: 'var(--ids-comp-button-outlined-color-fg-label-warning-default)',
1435
1475
  background: 'var(--ids-comp-button-outlined-color-bg-warning-default)',
@@ -1462,6 +1502,14 @@ module.exports = function ComponentsPlugin() {
1462
1502
  '.ids-button.ids-button-outlined.ids-button-warning:active>.ids-icon': {
1463
1503
  color: 'var(--ids-comp-button-outlined-color-fg-icon-warning-pressed)',
1464
1504
  },
1505
+ '.ids-button.ids-button-outlined.ids-button-warning:disabled': {
1506
+ color: 'var(--ids-comp-button-outlined-color-fg-label-warning-disabled)',
1507
+ background: 'var(--ids-comp-button-outlined-color-bg-warning-disabled)',
1508
+ borderColor: 'var(--ids-comp-button-outlined-color-border-warning-disabled)',
1509
+ },
1510
+ '.ids-button.ids-button-outlined.ids-button-warning:disabled>.ids-icon': {
1511
+ color: 'var(--ids-comp-button-outlined-color-fg-icon-warning-disabled)',
1512
+ },
1465
1513
  '.ids-button.ids-button-outlined.ids-button-light': {
1466
1514
  color: 'var(--ids-comp-button-outlined-color-fg-label-light-default)',
1467
1515
  background: 'var(--ids-comp-button-outlined-color-bg-light-default)',
@@ -1760,6 +1808,14 @@ module.exports = function ComponentsPlugin() {
1760
1808
  borderColor: 'var(--ids-comp-button-text-color-border-error-default)',
1761
1809
  },
1762
1810
  '.ids-button.ids-button-text.ids-button-error:active>.ids-icon': { color: 'var(--ids-comp-button-text-color-fg-icon-error-pressed)' },
1811
+ '.ids-button.ids-button-text.ids-button-error:disabled': {
1812
+ color: 'var(--ids-comp-button-text-color-fg-label-error-disabled)',
1813
+ background: 'var(--ids-comp-button-text-color-bg-error-disabled)',
1814
+ borderColor: 'var(--ids-comp-button-text-color-border-error-default)',
1815
+ },
1816
+ '.ids-button.ids-button-text.ids-button-error:disabled>.ids-icon': {
1817
+ color: 'var(--ids-comp-button-text-color-fg-icon-error-disabled)',
1818
+ },
1763
1819
  '.ids-button.ids-button-text.ids-button-success': {
1764
1820
  color: 'var(--ids-comp-button-text-color-fg-label-success-default)',
1765
1821
  background: 'var(--ids-comp-button-text-color-bg-success-default)',
@@ -1790,6 +1846,14 @@ module.exports = function ComponentsPlugin() {
1790
1846
  '.ids-button.ids-button-text.ids-button-success:active>.ids-icon': {
1791
1847
  color: 'var(--ids-comp-button-text-color-fg-icon-success-pressed)',
1792
1848
  },
1849
+ '.ids-button.ids-button-text.ids-button-success:disabled': {
1850
+ color: 'var(--ids-comp-button-text-color-fg-label-success-disabled)',
1851
+ background: 'var(--ids-comp-button-text-color-bg-success-disabled)',
1852
+ borderColor: 'var(--ids-comp-button-text-color-border-success-default)',
1853
+ },
1854
+ '.ids-button.ids-button-text.ids-button-success:disabled>.ids-icon': {
1855
+ color: 'var(--ids-comp-button-text-color-fg-icon-success-disabled)',
1856
+ },
1793
1857
  '.ids-button.ids-button-text.ids-button-warning': {
1794
1858
  color: 'var(--ids-comp-button-text-color-fg-label-warning-default)',
1795
1859
  background: 'var(--ids-comp-button-text-color-bg-warning-default)',
@@ -1820,6 +1884,14 @@ module.exports = function ComponentsPlugin() {
1820
1884
  '.ids-button.ids-button-text.ids-button-warning:active>.ids-icon': {
1821
1885
  color: 'var(--ids-comp-button-text-color-fg-icon-warning-pressed)',
1822
1886
  },
1887
+ '.ids-button.ids-button-text.ids-button-warning:disabled': {
1888
+ color: 'var(--ids-comp-button-text-color-fg-label-warning-disabled)',
1889
+ background: 'var(--ids-comp-button-text-color-bg-warning-disabled)',
1890
+ borderColor: 'var(--ids-comp-button-text-color-border-warning-default)',
1891
+ },
1892
+ '.ids-button.ids-button-text.ids-button-warning:disabled>.ids-icon': {
1893
+ color: 'var(--ids-comp-button-text-color-fg-icon-warning-disabled)',
1894
+ },
1823
1895
  '.ids-button.ids-button-text.ids-button-light': {
1824
1896
  color: 'var(--ids-comp-button-text-color-fg-label-light-default)',
1825
1897
  background: 'var(--ids-comp-button-text-color-bg-light-default)',
@@ -1969,9 +2041,9 @@ module.exports = function ComponentsPlugin() {
1969
2041
  color: 'var(--ids-comp-button-text-color-fg-icon-surface-disabled)',
1970
2042
  },
1971
2043
  '.ids-card': {
1972
- boxSizing: ['border-box', 'border-box'],
2044
+ boxSizing: 'border-box',
1973
2045
  borderWidth: '0',
1974
- borderStyle: ['none', 'solid'],
2046
+ borderStyle: 'none',
1975
2047
  borderColor: 'rgba(0,0,0,0)',
1976
2048
  lineHeight: 1.5,
1977
2049
  display: 'flex',
@@ -2046,6 +2118,7 @@ module.exports = function ComponentsPlugin() {
2046
2118
  borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-compact)',
2047
2119
  },
2048
2120
  '.ids-card.ids-card-compact.ids-card-horizontal.ids-card-outlined': {
2121
+ borderStyle: 'solid',
2049
2122
  borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-compact)',
2050
2123
  },
2051
2124
  '.ids-card.ids-card-compact.ids-card-vertical': {
@@ -2055,6 +2128,7 @@ module.exports = function ComponentsPlugin() {
2055
2128
  borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-compact)',
2056
2129
  },
2057
2130
  '.ids-card.ids-card-compact.ids-card-vertical.ids-card-outlined': {
2131
+ borderStyle: 'solid',
2058
2132
  borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-compact)',
2059
2133
  },
2060
2134
  '.ids-card.ids-card-compact.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-compact)' },
@@ -2089,6 +2163,7 @@ module.exports = function ComponentsPlugin() {
2089
2163
  borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-comfortable)',
2090
2164
  },
2091
2165
  '.ids-card.ids-card-comfortable.ids-card-horizontal.ids-card-outlined': {
2166
+ borderStyle: 'solid',
2092
2167
  borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-comfortable)',
2093
2168
  },
2094
2169
  '.ids-card.ids-card-comfortable.ids-card-vertical': {
@@ -2098,6 +2173,7 @@ module.exports = function ComponentsPlugin() {
2098
2173
  borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-comfortable)',
2099
2174
  },
2100
2175
  '.ids-card.ids-card-comfortable.ids-card-vertical.ids-card-outlined': {
2176
+ borderStyle: 'solid',
2101
2177
  borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-comfortable)',
2102
2178
  },
2103
2179
  '.ids-card.ids-card-comfortable.ids-card-clickable:focus': {
@@ -2134,6 +2210,7 @@ module.exports = function ComponentsPlugin() {
2134
2210
  borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-spacious)',
2135
2211
  },
2136
2212
  '.ids-card.ids-card-spacious.ids-card-horizontal.ids-card-outlined': {
2213
+ borderStyle: 'solid',
2137
2214
  borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-spacious)',
2138
2215
  },
2139
2216
  '.ids-card.ids-card-spacious.ids-card-vertical': {
@@ -2143,6 +2220,7 @@ module.exports = function ComponentsPlugin() {
2143
2220
  borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-spacious)',
2144
2221
  },
2145
2222
  '.ids-card.ids-card-spacious.ids-card-vertical.ids-card-outlined': {
2223
+ borderStyle: 'solid',
2146
2224
  borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-spacious)',
2147
2225
  },
2148
2226
  '.ids-card.ids-card-spacious.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-spacious)' },
@@ -2177,6 +2255,7 @@ module.exports = function ComponentsPlugin() {
2177
2255
  borderRadius: 'var(--ids-comp-card-container-horizontal-size-border-radius-dense)',
2178
2256
  },
2179
2257
  '.ids-card.ids-card-dense.ids-card-horizontal.ids-card-outlined': {
2258
+ borderStyle: 'solid',
2180
2259
  borderWidth: 'var(--ids-comp-card-container-horizontal-size-border-width-dense)',
2181
2260
  },
2182
2261
  '.ids-card.ids-card-dense.ids-card-vertical': {
@@ -2186,6 +2265,7 @@ module.exports = function ComponentsPlugin() {
2186
2265
  borderRadius: 'var(--ids-comp-card-container-vertical-size-border-radius-dense)',
2187
2266
  },
2188
2267
  '.ids-card.ids-card-dense.ids-card-vertical.ids-card-outlined': {
2268
+ borderStyle: 'solid',
2189
2269
  borderWidth: 'var(--ids-comp-card-container-vertical-size-border-width-dense)',
2190
2270
  },
2191
2271
  '.ids-card.ids-card-dense.ids-card-clickable:focus': { outlineWidth: 'var(--ids-comp-card-focused-outline-outline-dense)' },
@@ -9013,32 +9093,32 @@ module.exports = function ComponentsPlugin() {
9013
9093
  'var(--ids-comp-radio-group-vertical-container-size-padding-y-compact) var(--ids-comp-radio-group-vertical-container-size-padding-x-compact)',
9014
9094
  gap: 'var(--ids-comp-radio-group-vertical-container-size-gap-compact)',
9015
9095
  },
9016
- '.ids-radio-group.ids-radio-group-compact>.ids-radio': {
9096
+ '.ids-radio-group.ids-radio-group-compact .ids-radio': {
9017
9097
  padding:
9018
9098
  'var(--ids-comp-radio-button-container-size-padding-y-compact) var(--ids-comp-radio-button-container-size-padding-x-compact)',
9019
9099
  gap: 'var(--ids-comp-radio-button-container-size-gap-compact)',
9020
9100
  },
9021
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9101
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9022
9102
  top: 'calc((var(--ids-comp-radio-button-input-size-height-compact) - var(--ids-comp-radio-button-input-size-touchtarget-height-compact))/2)',
9023
9103
  left: 'calc((var(--ids-comp-radio-button-input-size-width-compact) - var(--ids-comp-radio-button-input-size-touchtarget-width-compact))/2)',
9024
9104
  height: 'var(--ids-comp-radio-button-input-size-touchtarget-height-compact)',
9025
9105
  width: 'var(--ids-comp-radio-button-input-size-touchtarget-width-compact)',
9026
9106
  },
9027
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__input-wrapper input[type=radio]': {
9107
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]': {
9028
9108
  width: 'var(--ids-comp-radio-button-input-size-width-compact)',
9029
9109
  height: 'var(--ids-comp-radio-button-input-size-height-compact)',
9030
9110
  borderRadius: 'var(--ids-comp-radio-button-input-size-border-radius-compact)',
9031
9111
  borderWidth: 'var(--ids-comp-radio-button-input-size-border-width-compact)',
9032
9112
  },
9033
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9113
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9034
9114
  width: 'var(--ids-comp-radio-button-input-inner-circle-size-width-compact)',
9035
9115
  height: 'var(--ids-comp-radio-button-input-inner-circle-size-height-compact)',
9036
9116
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-compact)',
9037
9117
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-compact)',
9038
9118
  },
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':
9119
+ '.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
9120
  { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-compact)' },
9041
- '.ids-radio-group.ids-radio-group-compact>.ids-radio .ids-radio__label': {
9121
+ '.ids-radio-group.ids-radio-group-compact .ids-radio .ids-radio__label': {
9042
9122
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-compact) 0px',
9043
9123
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-compact)',
9044
9124
  fontSize: 'var(--ids-comp-radio-button-label-typography-font-size-compact)',
@@ -9056,33 +9136,33 @@ module.exports = function ComponentsPlugin() {
9056
9136
  'var(--ids-comp-radio-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-radio-group-vertical-container-size-padding-x-comfortable)',
9057
9137
  gap: 'var(--ids-comp-radio-group-vertical-container-size-gap-comfortable)',
9058
9138
  },
9059
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio': {
9139
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio': {
9060
9140
  padding:
9061
9141
  'var(--ids-comp-radio-button-container-size-padding-y-comfortable) var(--ids-comp-radio-button-container-size-padding-x-comfortable)',
9062
9142
  gap: 'var(--ids-comp-radio-button-container-size-gap-comfortable)',
9063
9143
  },
9064
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9144
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9065
9145
  top: 'calc((var(--ids-comp-radio-button-input-size-height-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable))/2)',
9066
9146
  left: 'calc((var(--ids-comp-radio-button-input-size-width-comfortable) - var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable))/2)',
9067
9147
  height: 'var(--ids-comp-radio-button-input-size-touchtarget-height-comfortable)',
9068
9148
  width: 'var(--ids-comp-radio-button-input-size-touchtarget-width-comfortable)',
9069
9149
  },
9070
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__input-wrapper input[type=radio]': {
9150
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]': {
9071
9151
  width: 'var(--ids-comp-radio-button-input-size-width-comfortable)',
9072
9152
  height: 'var(--ids-comp-radio-button-input-size-height-comfortable)',
9073
9153
  borderRadius: 'var(--ids-comp-radio-button-input-size-border-radius-comfortable)',
9074
9154
  borderWidth: 'var(--ids-comp-radio-button-input-size-border-width-comfortable)',
9075
9155
  },
9076
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle':
9156
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle':
9077
9157
  {
9078
9158
  width: 'var(--ids-comp-radio-button-input-inner-circle-size-width-comfortable)',
9079
9159
  height: 'var(--ids-comp-radio-button-input-inner-circle-size-height-comfortable)',
9080
9160
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-comfortable)',
9081
9161
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-comfortable)',
9082
9162
  },
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':
9163
+ '.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
9164
  { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-comfortable)' },
9085
- '.ids-radio-group.ids-radio-group-comfortable>.ids-radio .ids-radio__label': {
9165
+ '.ids-radio-group.ids-radio-group-comfortable .ids-radio .ids-radio__label': {
9086
9166
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-comfortable) 0px',
9087
9167
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-comfortable)',
9088
9168
  fontSize: 'var(--ids-comp-radio-button-label-typography-font-size-comfortable)',
@@ -9100,32 +9180,32 @@ module.exports = function ComponentsPlugin() {
9100
9180
  'var(--ids-comp-radio-group-vertical-container-size-padding-y-spacious) var(--ids-comp-radio-group-vertical-container-size-padding-x-spacious)',
9101
9181
  gap: 'var(--ids-comp-radio-group-vertical-container-size-gap-spacious)',
9102
9182
  },
9103
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio': {
9183
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio': {
9104
9184
  padding:
9105
9185
  'var(--ids-comp-radio-button-container-size-padding-y-spacious) var(--ids-comp-radio-button-container-size-padding-x-spacious)',
9106
9186
  gap: 'var(--ids-comp-radio-button-container-size-gap-spacious)',
9107
9187
  },
9108
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9188
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9109
9189
  top: 'calc((var(--ids-comp-radio-button-input-size-height-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-height-spacious))/2)',
9110
9190
  left: 'calc((var(--ids-comp-radio-button-input-size-width-spacious) - var(--ids-comp-radio-button-input-size-touchtarget-width-spacious))/2)',
9111
9191
  height: 'var(--ids-comp-radio-button-input-size-touchtarget-height-spacious)',
9112
9192
  width: 'var(--ids-comp-radio-button-input-size-touchtarget-width-spacious)',
9113
9193
  },
9114
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__input-wrapper input[type=radio]': {
9194
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]': {
9115
9195
  width: 'var(--ids-comp-radio-button-input-size-width-spacious)',
9116
9196
  height: 'var(--ids-comp-radio-button-input-size-height-spacious)',
9117
9197
  borderRadius: 'var(--ids-comp-radio-button-input-size-border-radius-spacious)',
9118
9198
  borderWidth: 'var(--ids-comp-radio-button-input-size-border-width-spacious)',
9119
9199
  },
9120
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9200
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9121
9201
  width: 'var(--ids-comp-radio-button-input-inner-circle-size-width-spacious)',
9122
9202
  height: 'var(--ids-comp-radio-button-input-inner-circle-size-height-spacious)',
9123
9203
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-spacious)',
9124
9204
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-spacious)',
9125
9205
  },
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':
9206
+ '.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
9207
  { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-spacious)' },
9128
- '.ids-radio-group.ids-radio-group-spacious>.ids-radio .ids-radio__label': {
9208
+ '.ids-radio-group.ids-radio-group-spacious .ids-radio .ids-radio__label': {
9129
9209
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-spacious) 0px',
9130
9210
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-spacious)',
9131
9211
  fontSize: 'var(--ids-comp-radio-button-label-typography-font-size-spacious)',
@@ -9143,31 +9223,31 @@ module.exports = function ComponentsPlugin() {
9143
9223
  'var(--ids-comp-radio-group-vertical-container-size-padding-y-dense) var(--ids-comp-radio-group-vertical-container-size-padding-x-dense)',
9144
9224
  gap: 'var(--ids-comp-radio-group-vertical-container-size-gap-dense)',
9145
9225
  },
9146
- '.ids-radio-group.ids-radio-group-dense>.ids-radio': {
9226
+ '.ids-radio-group.ids-radio-group-dense .ids-radio': {
9147
9227
  padding: 'var(--ids-comp-radio-button-container-size-padding-y-dense) var(--ids-comp-radio-button-container-size-padding-x-dense)',
9148
9228
  gap: 'var(--ids-comp-radio-button-container-size-gap-dense)',
9149
9229
  },
9150
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9230
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper .ids-radio__touch-target': {
9151
9231
  top: 'calc((var(--ids-comp-radio-button-input-size-height-dense) - var(--ids-comp-radio-button-input-size-touchtarget-height-dense))/2)',
9152
9232
  left: 'calc((var(--ids-comp-radio-button-input-size-width-dense) - var(--ids-comp-radio-button-input-size-touchtarget-width-dense))/2)',
9153
9233
  height: 'var(--ids-comp-radio-button-input-size-touchtarget-height-dense)',
9154
9234
  width: 'var(--ids-comp-radio-button-input-size-touchtarget-width-dense)',
9155
9235
  },
9156
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__input-wrapper input[type=radio]': {
9236
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]': {
9157
9237
  width: 'var(--ids-comp-radio-button-input-size-width-dense)',
9158
9238
  height: 'var(--ids-comp-radio-button-input-size-height-dense)',
9159
9239
  borderRadius: 'var(--ids-comp-radio-button-input-size-border-radius-dense)',
9160
9240
  borderWidth: 'var(--ids-comp-radio-button-input-size-border-width-dense)',
9161
9241
  },
9162
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9242
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__input-wrapper input[type=radio]:checked+.ids-radio__inner-circle': {
9163
9243
  width: 'var(--ids-comp-radio-button-input-inner-circle-size-width-dense)',
9164
9244
  height: 'var(--ids-comp-radio-button-input-inner-circle-size-height-dense)',
9165
9245
  borderRadius: 'var(--ids-comp-radio-button-input-inner-circle-size-border-radius-dense)',
9166
9246
  borderWidth: 'var(--ids-comp-radio-button-input-inner-circle-size-border-width-dense)',
9167
9247
  },
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':
9248
+ '.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
9249
  { outlineWidth: 'var(--ids-comp-radio-focused-outline-outline-dense)' },
9170
- '.ids-radio-group.ids-radio-group-dense>.ids-radio .ids-radio__label': {
9250
+ '.ids-radio-group.ids-radio-group-dense .ids-radio .ids-radio__label': {
9171
9251
  padding: 'var(--ids-comp-radio-button-label-size-padding-y-dense) 0px',
9172
9252
  fontFamily: 'var(--ids-comp-radio-button-label-typography-font-family-dense)',
9173
9253
  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);