@i-cell/ids-styles 0.0.16 → 0.0.18-beta.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -0,0 +1,89 @@
1
+ .ids-checkbox-group {
2
+ display: flex;
3
+ flex-direction: column;
4
+ justify-content: center;
5
+ align-items: flex-start;
6
+ }
7
+ .ids-checkbox-group > .ids-checkbox-group__label {
8
+ font-style: normal;
9
+ }
10
+ .ids-checkbox-group > .ids-checkbox-group__list {
11
+ display: flex;
12
+ }
13
+ .ids-checkbox-group.ids-checkbox-group-horizontal > .ids-checkbox-group__list {
14
+ flex-direction: row;
15
+ align-items: center;
16
+ }
17
+ .ids-checkbox-group.ids-checkbox-group-vertical > .ids-checkbox-group__list {
18
+ flex-direction: column;
19
+ align-items: flex-start;
20
+ }
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);
24
+ }
25
+ .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
26
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
27
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
28
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
29
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
30
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
31
+ }
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
+ }
36
+ .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);
39
+ }
40
+ .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
41
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
42
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
43
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
44
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
45
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
46
+ }
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);
50
+ }
51
+ .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);
54
+ }
55
+ .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
56
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
57
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
58
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
59
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
60
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
61
+ }
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);
65
+ }
66
+ .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);
69
+ }
70
+ .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
71
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
72
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
73
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
74
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
75
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
76
+ }
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);
80
+ }
81
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
82
+ color: var(--ids-comp-checkbox-label-color-fg-light-default);
83
+ }
84
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
85
+ color: var(--ids-comp-checkbox-label-color-fg-dark-default);
86
+ }
87
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
88
+ color: var(--ids-comp-checkbox-label-color-fg-surface-default);
89
+ }
@@ -0,0 +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)}
@@ -0,0 +1,91 @@
1
+ // Tailwind CSS plugin for the checkbox-group component in the i-Cell Design System
2
+ module.exports = function CheckboxGroupPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-checkbox-group': { display: 'flex', flexDirection: 'column', justifyContent: 'center', alignItems: 'flex-start' },
6
+ '.ids-checkbox-group>.ids-checkbox-group__label': { fontStyle: 'normal' },
7
+ '.ids-checkbox-group>.ids-checkbox-group__list': { display: 'flex' },
8
+ '.ids-checkbox-group.ids-checkbox-group-horizontal>.ids-checkbox-group__list': { flexDirection: 'row', alignItems: 'center' },
9
+ '.ids-checkbox-group.ids-checkbox-group-vertical>.ids-checkbox-group__list': { flexDirection: 'column', alignItems: 'flex-start' },
10
+ '.ids-checkbox-group.ids-checkbox-group-compact': {
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)',
14
+ },
15
+ '.ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label': {
16
+ fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-compact)',
17
+ fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-compact)',
18
+ fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-compact)',
19
+ lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-compact)',
20
+ letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact)',
21
+ },
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
+ },
27
+ '.ids-checkbox-group.ids-checkbox-group-comfortable': {
28
+ 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)',
31
+ },
32
+ '.ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label': {
33
+ fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-comfortable)',
34
+ fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-comfortable)',
35
+ fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable)',
36
+ lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-comfortable)',
37
+ letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable)',
38
+ },
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
+ },
44
+ '.ids-checkbox-group.ids-checkbox-group-spacious': {
45
+ 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)',
48
+ },
49
+ '.ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label': {
50
+ fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-spacious)',
51
+ fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-spacious)',
52
+ fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-spacious)',
53
+ lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-spacious)',
54
+ letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious)',
55
+ },
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
+ },
61
+ '.ids-checkbox-group.ids-checkbox-group-dense': {
62
+ 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)',
65
+ },
66
+ '.ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label': {
67
+ fontFamily: 'var(--ids-comp-checkbox-group-label-typography-font-family-dense)',
68
+ fontSize: 'var(--ids-comp-checkbox-group-label-typography-font-size-dense)',
69
+ fontWeight: 'var(--ids-comp-checkbox-group-label-typography-font-weight-dense)',
70
+ lineHeight: 'var(--ids-comp-checkbox-group-label-typography-line-height-dense)',
71
+ letterSpacing: 'var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense)',
72
+ },
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': {
79
+ color: 'var(--ids-comp-checkbox-label-color-fg-light-default)',
80
+ },
81
+ '.ids-checkbox-group.ids-checkbox-group-dark>.ids-checkbox-group__label': {
82
+ color: 'var(--ids-comp-checkbox-label-color-fg-dark-default)',
83
+ },
84
+ '.ids-checkbox-group.ids-checkbox-group-surface>.ids-checkbox-group__label': {
85
+ color: 'var(--ids-comp-checkbox-label-color-fg-surface-default)',
86
+ },
87
+ };
88
+
89
+ addComponents(cssObj);
90
+ };
91
+ };
@@ -1805,6 +1805,96 @@
1805
1805
  color: var(--ids-comp-button-text-color-fg-icon-surface-disabled);
1806
1806
  }
1807
1807
 
1808
+ .ids-checkbox-group {
1809
+ display: flex;
1810
+ flex-direction: column;
1811
+ justify-content: center;
1812
+ align-items: flex-start;
1813
+ }
1814
+ .ids-checkbox-group > .ids-checkbox-group__label {
1815
+ font-style: normal;
1816
+ }
1817
+ .ids-checkbox-group > .ids-checkbox-group__list {
1818
+ display: flex;
1819
+ }
1820
+ .ids-checkbox-group.ids-checkbox-group-horizontal > .ids-checkbox-group__list {
1821
+ flex-direction: row;
1822
+ align-items: center;
1823
+ }
1824
+ .ids-checkbox-group.ids-checkbox-group-vertical > .ids-checkbox-group__list {
1825
+ flex-direction: column;
1826
+ align-items: flex-start;
1827
+ }
1828
+ .ids-checkbox-group.ids-checkbox-group-compact {
1829
+ padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-compact) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-compact);
1830
+ gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-compact);
1831
+ }
1832
+ .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__label {
1833
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-compact);
1834
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-compact);
1835
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-compact);
1836
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-compact);
1837
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-compact);
1838
+ }
1839
+ .ids-checkbox-group.ids-checkbox-group-compact .ids-checkbox-group__list {
1840
+ 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);
1841
+ gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-compact);
1842
+ }
1843
+ .ids-checkbox-group.ids-checkbox-group-comfortable {
1844
+ padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-comfortable) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-comfortable);
1845
+ gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-comfortable);
1846
+ }
1847
+ .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__label {
1848
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-comfortable);
1849
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-comfortable);
1850
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-comfortable);
1851
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-comfortable);
1852
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-comfortable);
1853
+ }
1854
+ .ids-checkbox-group.ids-checkbox-group-comfortable .ids-checkbox-group__list {
1855
+ 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);
1856
+ gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-comfortable);
1857
+ }
1858
+ .ids-checkbox-group.ids-checkbox-group-spacious {
1859
+ padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-spacious) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-spacious);
1860
+ gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-spacious);
1861
+ }
1862
+ .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__label {
1863
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-spacious);
1864
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-spacious);
1865
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-spacious);
1866
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-spacious);
1867
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-spacious);
1868
+ }
1869
+ .ids-checkbox-group.ids-checkbox-group-spacious .ids-checkbox-group__list {
1870
+ 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);
1871
+ gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-spacious);
1872
+ }
1873
+ .ids-checkbox-group.ids-checkbox-group-dense {
1874
+ padding: var(--ids-comp-checkbox-group-vertical-container-size-padding-y-dense) var(--ids-comp-checkbox-group-vertical-container-size-padding-x-dense);
1875
+ gap: var(--ids-comp-checkbox-group-vertical-container-size-gap-dense);
1876
+ }
1877
+ .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__label {
1878
+ font-family: var(--ids-comp-checkbox-group-label-typography-font-family-dense);
1879
+ font-size: var(--ids-comp-checkbox-group-label-typography-font-size-dense);
1880
+ font-weight: var(--ids-comp-checkbox-group-label-typography-font-weight-dense);
1881
+ line-height: var(--ids-comp-checkbox-group-label-typography-line-height-dense);
1882
+ letter-spacing: var(--ids-comp-checkbox-group-label-typography-letter-spacing-dense);
1883
+ }
1884
+ .ids-checkbox-group.ids-checkbox-group-dense .ids-checkbox-group__list {
1885
+ 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);
1886
+ gap: var(--ids-comp-checkbox-group-horizontal-list-size-gap-dense);
1887
+ }
1888
+ .ids-checkbox-group.ids-checkbox-group-light > .ids-checkbox-group__label {
1889
+ color: var(--ids-comp-checkbox-label-color-fg-light-default);
1890
+ }
1891
+ .ids-checkbox-group.ids-checkbox-group-dark > .ids-checkbox-group__label {
1892
+ color: var(--ids-comp-checkbox-label-color-fg-dark-default);
1893
+ }
1894
+ .ids-checkbox-group.ids-checkbox-group-surface > .ids-checkbox-group__label {
1895
+ color: var(--ids-comp-checkbox-label-color-fg-surface-default);
1896
+ }
1897
+
1808
1898
  .ids-checkbox {
1809
1899
  display: inline-flex;
1810
1900
  align-self: stretch;
@@ -9141,6 +9231,7 @@
9141
9231
  display: block;
9142
9232
  }
9143
9233
  .ids-select > .ids-select__trigger > .ids-select__arrow {
9234
+ display: flex;
9144
9235
  flex-shrink: 0;
9145
9236
  }
9146
9237
  .ids-select.ids-select-compact > .ids-select__trigger {