@i-cell/ids-styles 0.0.15-beta.8 → 0.0.15

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 (79) hide show
  1. package/dist/accordion/accordion.css +184 -45
  2. package/dist/accordion/accordion.min.css +1 -1
  3. package/dist/accordion/accordion.plugin.js +194 -55
  4. package/dist/avatar/avatar.css +23 -11
  5. package/dist/avatar/avatar.min.css +1 -1
  6. package/dist/avatar/avatar.plugin.js +23 -12
  7. package/dist/button/button.css +788 -656
  8. package/dist/button/button.min.css +1 -1
  9. package/dist/button/button.plugin.js +792 -693
  10. package/dist/card/card.css +61 -35
  11. package/dist/card/card.min.css +1 -1
  12. package/dist/card/card.plugin.js +181 -126
  13. package/dist/checkbox/checkbox.css +57 -29
  14. package/dist/checkbox/checkbox.min.css +1 -1
  15. package/dist/checkbox/checkbox.plugin.js +78 -53
  16. package/dist/checkbox/pseudo-checkbox.css +53 -25
  17. package/dist/checkbox/pseudo-checkbox.min.css +1 -1
  18. package/dist/checkbox/pseudo-checkbox.plugin.js +72 -43
  19. package/dist/components.css +2433 -1625
  20. package/dist/components.min.css +1 -1
  21. package/dist/components.plugin.js +2744 -1969
  22. package/dist/dialog/dialog.css +12 -1
  23. package/dist/dialog/dialog.min.css +1 -1
  24. package/dist/dialog/dialog.plugin.js +11 -4
  25. package/dist/divider/divider.css +0 -3
  26. package/dist/divider/divider.min.css +1 -1
  27. package/dist/divider/divider.plugin.js +1 -1
  28. package/dist/form-elements/form-field/form-field.css +84 -60
  29. package/dist/form-elements/form-field/form-field.min.css +1 -1
  30. package/dist/form-elements/form-field/form-field.plugin.js +84 -60
  31. package/dist/form-elements/message/message.css +21 -12
  32. package/dist/form-elements/message/message.min.css +1 -1
  33. package/dist/form-elements/message/message.plugin.js +21 -4
  34. package/dist/icon/icon.css +3 -2
  35. package/dist/icon/icon.min.css +1 -1
  36. package/dist/icon/icon.plugin.js +3 -2
  37. package/dist/icon-button/icon-button.css +133 -82
  38. package/dist/icon-button/icon-button.min.css +1 -1
  39. package/dist/icon-button/icon-button.plugin.js +256 -182
  40. package/dist/menu-item/menu-item.css +184 -0
  41. package/dist/menu-item/menu-item.min.css +1 -0
  42. package/dist/menu-item/menu-item.plugin.js +181 -0
  43. package/dist/option/option.css +13 -0
  44. package/dist/option/option.min.css +1 -1
  45. package/dist/option/option.plugin.js +13 -1
  46. package/dist/overlay-panel/overlay-panel.css +125 -0
  47. package/dist/overlay-panel/overlay-panel.min.css +1 -0
  48. package/dist/overlay-panel/overlay-panel.plugin.js +125 -0
  49. package/dist/paginator/paginator.css +133 -23
  50. package/dist/paginator/paginator.min.css +1 -1
  51. package/dist/paginator/paginator.plugin.js +113 -41
  52. package/dist/radio/radio.css +49 -49
  53. package/dist/radio/radio.min.css +1 -1
  54. package/dist/radio/radio.plugin.js +56 -61
  55. package/dist/segmented-control/segmented-control-toggle.css +37 -25
  56. package/dist/segmented-control/segmented-control-toggle.min.css +1 -1
  57. package/dist/segmented-control/segmented-control-toggle.plugin.js +46 -45
  58. package/dist/segmented-control/segmented-control.css +37 -25
  59. package/dist/segmented-control/segmented-control.min.css +1 -1
  60. package/dist/segmented-control/segmented-control.plugin.js +87 -75
  61. package/dist/snackbar/snackbar.css +12 -0
  62. package/dist/snackbar/snackbar.min.css +1 -1
  63. package/dist/snackbar/snackbar.plugin.js +28 -4
  64. package/dist/switch/switch.css +44 -56
  65. package/dist/switch/switch.min.css +1 -1
  66. package/dist/switch/switch.plugin.js +55 -74
  67. package/dist/tag/tag.css +230 -199
  68. package/dist/tag/tag.min.css +1 -1
  69. package/dist/tag/tag.plugin.js +228 -195
  70. package/package.json +4 -4
  71. package/dist/action-item/action-item.css +0 -185
  72. package/dist/action-item/action-item.min.css +0 -1
  73. package/dist/action-item/action-item.plugin.js +0 -176
  74. package/dist/action-panel/action-panel.css +0 -91
  75. package/dist/action-panel/action-panel.min.css +0 -1
  76. package/dist/action-panel/action-panel.plugin.js +0 -91
  77. /package/dist/{fieldset → form-elements/fieldset}/fieldset.css +0 -0
  78. /package/dist/{fieldset → form-elements/fieldset}/fieldset.min.css +0 -0
  79. /package/dist/{fieldset → form-elements/fieldset}/fieldset.plugin.js +0 -0
package/dist/menu-item/menu-item.css ADDED
@@ -0,0 +1,184 @@
1
+ .ids-menu-item {
2
+ width: 100%;
3
+ display: inline-flex;
4
+ flex-shrink: 0;
5
+ align-items: center;
6
+ justify-content: center;
7
+ }
8
+ .ids-menu-item .ids-menu-item-label {
9
+ overflow: hidden;
10
+ text-overflow: ellipsis;
11
+ font-style: normal;
12
+ }
13
+ .ids-menu-item:not(:disabled) {
14
+ cursor: pointer;
15
+ }
16
+ .ids-menu-item:disabled {
17
+ cursor: not-allowed;
18
+ }
19
+ .ids-menu-item.ids-menu-item-compact {
20
+ gap: var(--ids-comp-menu-item-size-gap-compact);
21
+ border-radius: var(--ids-comp-menu-item-size-border-radius-compact);
22
+ padding: var(--ids-comp-menu-item-size-padding-y-compact) var(--ids-comp-menu-item-size-padding-x-compact);
23
+ height: var(--ids-comp-menu-item-size-height-compact);
24
+ font-family: var(--ids-comp-menu-item-label-typography-font-family-compact);
25
+ font-size: var(--ids-comp-menu-item-label-typography-font-size-compact);
26
+ font-weight: var(--ids-comp-menu-item-label-typography-font-weight-compact);
27
+ letter-spacing: var(--ids-comp-menu-item-label-typography-letter-spacing-compact);
28
+ line-height: var(--ids-comp-menu-item-label-typography-line-height-compact);
29
+ }
30
+ .ids-menu-item.ids-menu-item-compact .ids-icon {
31
+ width: var(--ids-comp-menu-item-size-icon-compact);
32
+ height: var(--ids-comp-menu-item-size-icon-compact);
33
+ font-size: var(--ids-comp-menu-item-icon-typography-font-size-compact);
34
+ font-weight: var(--ids-comp-menu-item-icon-typography-font-weight-compact);
35
+ line-height: var(--ids-comp-menu-item-icon-typography-line-height-compact);
36
+ }
37
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface {
38
+ border-style: solid;
39
+ border-width: var(--ids-comp-menu-item-size-border-width-compact);
40
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-default);
41
+ }
42
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover {
43
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
44
+ }
45
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:disabled {
46
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
47
+ }
48
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface {
49
+ border-style: solid;
50
+ border-width: var(--ids-comp-menu-item-size-border-width-compact);
51
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-default);
52
+ }
53
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover {
54
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
55
+ }
56
+ .ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:disabled {
57
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
58
+ }
59
+ .ids-menu-item.ids-menu-item-comfortable {
60
+ gap: var(--ids-comp-menu-item-size-gap-comfortable);
61
+ border-radius: var(--ids-comp-menu-item-size-border-radius-comfortable);
62
+ padding: var(--ids-comp-menu-item-size-padding-y-comfortable) var(--ids-comp-menu-item-size-padding-x-comfortable);
63
+ height: var(--ids-comp-menu-item-size-height-comfortable);
64
+ font-family: var(--ids-comp-menu-item-label-typography-font-family-comfortable);
65
+ font-size: var(--ids-comp-menu-item-label-typography-font-size-comfortable);
66
+ font-weight: var(--ids-comp-menu-item-label-typography-font-weight-comfortable);
67
+ letter-spacing: var(--ids-comp-menu-item-label-typography-letter-spacing-comfortable);
68
+ line-height: var(--ids-comp-menu-item-label-typography-line-height-comfortable);
69
+ }
70
+ .ids-menu-item.ids-menu-item-comfortable .ids-icon {
71
+ width: var(--ids-comp-menu-item-size-icon-comfortable);
72
+ height: var(--ids-comp-menu-item-size-icon-comfortable);
73
+ font-size: var(--ids-comp-menu-item-icon-typography-font-size-comfortable);
74
+ font-weight: var(--ids-comp-menu-item-icon-typography-font-weight-comfortable);
75
+ line-height: var(--ids-comp-menu-item-icon-typography-line-height-comfortable);
76
+ }
77
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface {
78
+ border-style: solid;
79
+ border-width: var(--ids-comp-menu-item-size-border-width-comfortable);
80
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-default);
81
+ }
82
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover {
83
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
84
+ }
85
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:disabled {
86
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
87
+ }
88
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface {
89
+ border-style: solid;
90
+ border-width: var(--ids-comp-menu-item-size-border-width-comfortable);
91
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-default);
92
+ }
93
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover {
94
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
95
+ }
96
+ .ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:disabled {
97
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
98
+ }
99
+ .ids-menu-item.ids-menu-item-spacious {
100
+ gap: var(--ids-comp-menu-item-size-gap-spacious);
101
+ border-radius: var(--ids-comp-menu-item-size-border-radius-spacious);
102
+ padding: var(--ids-comp-menu-item-size-padding-y-spacious) var(--ids-comp-menu-item-size-padding-x-spacious);
103
+ height: var(--ids-comp-menu-item-size-height-spacious);
104
+ font-family: var(--ids-comp-menu-item-label-typography-font-family-spacious);
105
+ font-size: var(--ids-comp-menu-item-label-typography-font-size-spacious);
106
+ font-weight: var(--ids-comp-menu-item-label-typography-font-weight-spacious);
107
+ letter-spacing: var(--ids-comp-menu-item-label-typography-letter-spacing-spacious);
108
+ line-height: var(--ids-comp-menu-item-label-typography-line-height-spacious);
109
+ }
110
+ .ids-menu-item.ids-menu-item-spacious .ids-icon {
111
+ width: var(--ids-comp-menu-item-size-icon-spacious);
112
+ height: var(--ids-comp-menu-item-size-icon-spacious);
113
+ font-size: var(--ids-comp-menu-item-icon-typography-font-size-spacious);
114
+ font-weight: var(--ids-comp-menu-item-icon-typography-font-weight-spacious);
115
+ line-height: var(--ids-comp-menu-item-icon-typography-line-height-spacious);
116
+ }
117
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface {
118
+ border-style: solid;
119
+ border-width: var(--ids-comp-menu-item-size-border-width-spacious);
120
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-default);
121
+ }
122
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover {
123
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-hovered);
124
+ }
125
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:disabled {
126
+ border-color: var(--ids-comp-menu-item-text-color-border-surface-disabled);
127
+ }
128
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface {
129
+ border-style: solid;
130
+ border-width: var(--ids-comp-menu-item-size-border-width-spacious);
131
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-default);
132
+ }
133
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover {
134
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-hovered);
135
+ }
136
+ .ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:disabled {
137
+ border-color: var(--ids-comp-menu-item-filled-color-border-surface-disabled);
138
+ }
139
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface {
140
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-default);
141
+ background: var(--ids-comp-menu-item-text-color-bg-surface-default);
142
+ }
143
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active {
144
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-active);
145
+ background: var(--ids-comp-menu-item-text-color-bg-surface-active);
146
+ }
147
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover {
148
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);
149
+ background: var(--ids-comp-menu-item-text-color-bg-surface-hovered);
150
+ }
151
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible {
152
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-focused);
153
+ background: var(--ids-comp-menu-item-text-color-bg-surface-focused);
154
+ }
155
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active {
156
+ background: var(--ids-comp-menu-item-text-color-bg-surface-pressed);
157
+ }
158
+ .ids-menu-item.ids-menu-item-text.ids-menu-item-surface:disabled {
159
+ color: var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);
160
+ background: var(--ids-comp-menu-item-text-color-bg-surface-disabled);
161
+ }
162
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface {
163
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-default);
164
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-default);
165
+ }
166
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active {
167
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-active);
168
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-active);
169
+ }
170
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover {
171
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);
172
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-hovered);
173
+ }
174
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus, .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible {
175
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);
176
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-focused);
177
+ }
178
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active {
179
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-pressed);
180
+ }
181
+ .ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:disabled {
182
+ color: var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);
183
+ background: var(--ids-comp-menu-item-filled-color-bg-surface-disabled);
184
+ }
package/dist/menu-item/menu-item.min.css ADDED
@@ -0,0 +1 @@
1
+ .ids-menu-item{width:100%;display:inline-flex;flex-shrink:0;align-items:center;justify-content:center}.ids-menu-item .ids-menu-item-label{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-menu-item:not(:disabled){cursor:pointer}.ids-menu-item:disabled{cursor:not-allowed}.ids-menu-item.ids-menu-item-compact{gap:var(--ids-comp-menu-item-size-gap-compact);border-radius:var(--ids-comp-menu-item-size-border-radius-compact);padding:var(--ids-comp-menu-item-size-padding-y-compact) var(--ids-comp-menu-item-size-padding-x-compact);height:var(--ids-comp-menu-item-size-height-compact);font-family:var(--ids-comp-menu-item-label-typography-font-family-compact);font-size:var(--ids-comp-menu-item-label-typography-font-size-compact);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-compact);line-height:var(--ids-comp-menu-item-label-typography-line-height-compact)}.ids-menu-item.ids-menu-item-compact .ids-icon{width:var(--ids-comp-menu-item-size-icon-compact);height:var(--ids-comp-menu-item-size-icon-compact);font-size:var(--ids-comp-menu-item-icon-typography-font-size-compact);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-compact);line-height:var(--ids-comp-menu-item-icon-typography-line-height-compact)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:disabled{border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-compact);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:disabled{border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-comfortable{gap:var(--ids-comp-menu-item-size-gap-comfortable);border-radius:var(--ids-comp-menu-item-size-border-radius-comfortable);padding:var(--ids-comp-menu-item-size-padding-y-comfortable) var(--ids-comp-menu-item-size-padding-x-comfortable);height:var(--ids-comp-menu-item-size-height-comfortable);font-family:var(--ids-comp-menu-item-label-typography-font-family-comfortable);font-size:var(--ids-comp-menu-item-label-typography-font-size-comfortable);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-menu-item-label-typography-line-height-comfortable)}.ids-menu-item.ids-menu-item-comfortable .ids-icon{width:var(--ids-comp-menu-item-size-icon-comfortable);height:var(--ids-comp-menu-item-size-icon-comfortable);font-size:var(--ids-comp-menu-item-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-menu-item-icon-typography-line-height-comfortable)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:disabled{border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-comfortable);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:disabled{border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-spacious{gap:var(--ids-comp-menu-item-size-gap-spacious);border-radius:var(--ids-comp-menu-item-size-border-radius-spacious);padding:var(--ids-comp-menu-item-size-padding-y-spacious) var(--ids-comp-menu-item-size-padding-x-spacious);height:var(--ids-comp-menu-item-size-height-spacious);font-family:var(--ids-comp-menu-item-label-typography-font-family-spacious);font-size:var(--ids-comp-menu-item-label-typography-font-size-spacious);font-weight:var(--ids-comp-menu-item-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-menu-item-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-menu-item-label-typography-line-height-spacious)}.ids-menu-item.ids-menu-item-spacious .ids-icon{width:var(--ids-comp-menu-item-size-icon-spacious);height:var(--ids-comp-menu-item-size-icon-spacious);font-size:var(--ids-comp-menu-item-icon-typography-font-size-spacious);font-weight:var(--ids-comp-menu-item-icon-typography-font-weight-spacious);line-height:var(--ids-comp-menu-item-icon-typography-line-height-spacious)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-text-color-border-surface-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-text-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:disabled{border-color:var(--ids-comp-menu-item-text-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface{border-style:solid;border-width:var(--ids-comp-menu-item-size-border-width-spacious);border-color:var(--ids-comp-menu-item-filled-color-border-surface-default)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover{border-color:var(--ids-comp-menu-item-filled-color-border-surface-hovered)}.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:disabled{border-color:var(--ids-comp-menu-item-filled-color-border-surface-disabled)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface{color:var(--ids-comp-menu-item-text-color-fg-label-surface-default);background:var(--ids-comp-menu-item-text-color-bg-surface-default)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-text-color-fg-label-surface-active);background:var(--ids-comp-menu-item-text-color-bg-surface-active)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-text-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-text-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-text-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-text-color-bg-surface-focused)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-text-color-bg-surface-pressed)}.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:disabled{color:var(--ids-comp-menu-item-text-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-text-color-bg-surface-disabled)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-default);background:var(--ids-comp-menu-item-filled-color-bg-surface-default)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-active);background:var(--ids-comp-menu-item-filled-color-bg-surface-active)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered);background:var(--ids-comp-menu-item-filled-color-bg-surface-hovered)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-focused);background:var(--ids-comp-menu-item-filled-color-bg-surface-focused)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active{background:var(--ids-comp-menu-item-filled-color-bg-surface-pressed)}.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:disabled{color:var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled);background:var(--ids-comp-menu-item-filled-color-bg-surface-disabled)}
package/dist/menu-item/menu-item.plugin.js ADDED
@@ -0,0 +1,181 @@
1
+ // Tailwind CSS plugin for the menu-item component in the i-Cell Design System
2
+ module.exports = function MenuItemPlugin() {
3
+ return function ({ addComponents }) {
4
+ const cssObj = {
5
+ '.ids-menu-item': { width: '100%', display: 'inline-flex', flexShrink: 0, alignItems: 'center', justifyContent: 'center' },
6
+ '.ids-menu-item .ids-menu-item-label': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
7
+ '.ids-menu-item:not(:disabled)': { cursor: 'pointer' },
8
+ '.ids-menu-item:disabled': { cursor: 'not-allowed' },
9
+ '.ids-menu-item.ids-menu-item-compact': {
10
+ gap: 'var(--ids-comp-menu-item-size-gap-compact)',
11
+ borderRadius: 'var(--ids-comp-menu-item-size-border-radius-compact)',
12
+ padding: 'var(--ids-comp-menu-item-size-padding-y-compact) var(--ids-comp-menu-item-size-padding-x-compact)',
13
+ height: 'var(--ids-comp-menu-item-size-height-compact)',
14
+ fontFamily: 'var(--ids-comp-menu-item-label-typography-font-family-compact)',
15
+ fontSize: 'var(--ids-comp-menu-item-label-typography-font-size-compact)',
16
+ fontWeight: 'var(--ids-comp-menu-item-label-typography-font-weight-compact)',
17
+ letterSpacing: 'var(--ids-comp-menu-item-label-typography-letter-spacing-compact)',
18
+ lineHeight: 'var(--ids-comp-menu-item-label-typography-line-height-compact)',
19
+ },
20
+ '.ids-menu-item.ids-menu-item-compact .ids-icon': {
21
+ width: 'var(--ids-comp-menu-item-size-icon-compact)',
22
+ height: 'var(--ids-comp-menu-item-size-icon-compact)',
23
+ fontSize: 'var(--ids-comp-menu-item-icon-typography-font-size-compact)',
24
+ fontWeight: 'var(--ids-comp-menu-item-icon-typography-font-weight-compact)',
25
+ lineHeight: 'var(--ids-comp-menu-item-icon-typography-line-height-compact)',
26
+ },
27
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface': {
28
+ borderStyle: 'solid',
29
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-compact)',
30
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-default)',
31
+ },
32
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:hover': {
33
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
34
+ },
35
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-text.ids-menu-item-surface:disabled': {
36
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
37
+ },
38
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface': {
39
+ borderStyle: 'solid',
40
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-compact)',
41
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-default)',
42
+ },
43
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:hover': {
44
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
45
+ },
46
+ '.ids-menu-item.ids-menu-item-compact.ids-menu-item-filled.ids-menu-item-surface:disabled': {
47
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
48
+ },
49
+ '.ids-menu-item.ids-menu-item-comfortable': {
50
+ gap: 'var(--ids-comp-menu-item-size-gap-comfortable)',
51
+ borderRadius: 'var(--ids-comp-menu-item-size-border-radius-comfortable)',
52
+ padding: 'var(--ids-comp-menu-item-size-padding-y-comfortable) var(--ids-comp-menu-item-size-padding-x-comfortable)',
53
+ height: 'var(--ids-comp-menu-item-size-height-comfortable)',
54
+ fontFamily: 'var(--ids-comp-menu-item-label-typography-font-family-comfortable)',
55
+ fontSize: 'var(--ids-comp-menu-item-label-typography-font-size-comfortable)',
56
+ fontWeight: 'var(--ids-comp-menu-item-label-typography-font-weight-comfortable)',
57
+ letterSpacing: 'var(--ids-comp-menu-item-label-typography-letter-spacing-comfortable)',
58
+ lineHeight: 'var(--ids-comp-menu-item-label-typography-line-height-comfortable)',
59
+ },
60
+ '.ids-menu-item.ids-menu-item-comfortable .ids-icon': {
61
+ width: 'var(--ids-comp-menu-item-size-icon-comfortable)',
62
+ height: 'var(--ids-comp-menu-item-size-icon-comfortable)',
63
+ fontSize: 'var(--ids-comp-menu-item-icon-typography-font-size-comfortable)',
64
+ fontWeight: 'var(--ids-comp-menu-item-icon-typography-font-weight-comfortable)',
65
+ lineHeight: 'var(--ids-comp-menu-item-icon-typography-line-height-comfortable)',
66
+ },
67
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface': {
68
+ borderStyle: 'solid',
69
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-comfortable)',
70
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-default)',
71
+ },
72
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:hover': {
73
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
74
+ },
75
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-text.ids-menu-item-surface:disabled': {
76
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
77
+ },
78
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface': {
79
+ borderStyle: 'solid',
80
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-comfortable)',
81
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-default)',
82
+ },
83
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:hover': {
84
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
85
+ },
86
+ '.ids-menu-item.ids-menu-item-comfortable.ids-menu-item-filled.ids-menu-item-surface:disabled': {
87
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
88
+ },
89
+ '.ids-menu-item.ids-menu-item-spacious': {
90
+ gap: 'var(--ids-comp-menu-item-size-gap-spacious)',
91
+ borderRadius: 'var(--ids-comp-menu-item-size-border-radius-spacious)',
92
+ padding: 'var(--ids-comp-menu-item-size-padding-y-spacious) var(--ids-comp-menu-item-size-padding-x-spacious)',
93
+ height: 'var(--ids-comp-menu-item-size-height-spacious)',
94
+ fontFamily: 'var(--ids-comp-menu-item-label-typography-font-family-spacious)',
95
+ fontSize: 'var(--ids-comp-menu-item-label-typography-font-size-spacious)',
96
+ fontWeight: 'var(--ids-comp-menu-item-label-typography-font-weight-spacious)',
97
+ letterSpacing: 'var(--ids-comp-menu-item-label-typography-letter-spacing-spacious)',
98
+ lineHeight: 'var(--ids-comp-menu-item-label-typography-line-height-spacious)',
99
+ },
100
+ '.ids-menu-item.ids-menu-item-spacious .ids-icon': {
101
+ width: 'var(--ids-comp-menu-item-size-icon-spacious)',
102
+ height: 'var(--ids-comp-menu-item-size-icon-spacious)',
103
+ fontSize: 'var(--ids-comp-menu-item-icon-typography-font-size-spacious)',
104
+ fontWeight: 'var(--ids-comp-menu-item-icon-typography-font-weight-spacious)',
105
+ lineHeight: 'var(--ids-comp-menu-item-icon-typography-line-height-spacious)',
106
+ },
107
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface': {
108
+ borderStyle: 'solid',
109
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-spacious)',
110
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-default)',
111
+ },
112
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:hover': {
113
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-hovered)',
114
+ },
115
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-text.ids-menu-item-surface:disabled': {
116
+ borderColor: 'var(--ids-comp-menu-item-text-color-border-surface-disabled)',
117
+ },
118
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface': {
119
+ borderStyle: 'solid',
120
+ borderWidth: 'var(--ids-comp-menu-item-size-border-width-spacious)',
121
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-default)',
122
+ },
123
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:hover': {
124
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-hovered)',
125
+ },
126
+ '.ids-menu-item.ids-menu-item-spacious.ids-menu-item-filled.ids-menu-item-surface:disabled': {
127
+ borderColor: 'var(--ids-comp-menu-item-filled-color-border-surface-disabled)',
128
+ },
129
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface': {
130
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-default)',
131
+ background: 'var(--ids-comp-menu-item-text-color-bg-surface-default)',
132
+ },
133
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface.ids-menu-item-active': {
134
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-active)',
135
+ background: 'var(--ids-comp-menu-item-text-color-bg-surface-active)',
136
+ },
137
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:hover': {
138
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-hovered)',
139
+ background: 'var(--ids-comp-menu-item-text-color-bg-surface-hovered)',
140
+ },
141
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:focus-visible':
142
+ {
143
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-focused)',
144
+ background: 'var(--ids-comp-menu-item-text-color-bg-surface-focused)',
145
+ },
146
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:active': {
147
+ background: 'var(--ids-comp-menu-item-text-color-bg-surface-pressed)',
148
+ },
149
+ '.ids-menu-item.ids-menu-item-text.ids-menu-item-surface:disabled': {
150
+ color: 'var(--ids-comp-menu-item-text-color-fg-label-surface-disabled)',
151
+ background: 'var(--ids-comp-menu-item-text-color-bg-surface-disabled)',
152
+ },
153
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface': {
154
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-default)',
155
+ background: 'var(--ids-comp-menu-item-filled-color-bg-surface-default)',
156
+ },
157
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface.ids-menu-item-active': {
158
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-active)',
159
+ background: 'var(--ids-comp-menu-item-filled-color-bg-surface-active)',
160
+ },
161
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:hover': {
162
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-hovered)',
163
+ background: 'var(--ids-comp-menu-item-filled-color-bg-surface-hovered)',
164
+ },
165
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus,.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:focus-visible':
166
+ {
167
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-focused)',
168
+ background: 'var(--ids-comp-menu-item-filled-color-bg-surface-focused)',
169
+ },
170
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:active': {
171
+ background: 'var(--ids-comp-menu-item-filled-color-bg-surface-pressed)',
172
+ },
173
+ '.ids-menu-item.ids-menu-item-filled.ids-menu-item-surface:disabled': {
174
+ color: 'var(--ids-comp-menu-item-filled-color-fg-label-surface-disabled)',
175
+ background: 'var(--ids-comp-menu-item-filled-color-bg-surface-disabled)',
176
+ },
177
+ };
178
+
179
+ addComponents(cssObj);
180
+ };
181
+ };
package/dist/option/option.css CHANGED
@@ -2,6 +2,7 @@
2
2
  display: flex;
3
3
  align-items: center;
4
4
  align-self: stretch;
5
+ box-sizing: border-box;
5
6
  user-select: none;
6
7
  }
7
8
  .ids-option > .ids-option__text {
@@ -37,6 +38,9 @@
37
38
  .ids-option.ids-option-compact > .ids-icon {
38
39
  height: var(--ids-comp-forms-option-item-icon-size-height-compact);
39
40
  width: var(--ids-comp-forms-option-item-icon-size-width-compact);
41
+ font-size: var(--ids-comp-forms-option-icon-typography-font-size-compact);
42
+ font-weight: var(--ids-comp-forms-option-icon-typography-font-weight-compact);
43
+ line-height: var(--ids-comp-forms-option-icon-typography-line-height-compact);
40
44
  }
41
45
  .ids-option.ids-option-compact.ids-option-active {
42
46
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact);
@@ -57,6 +61,9 @@
57
61
  .ids-option.ids-option-comfortable > .ids-icon {
58
62
  height: var(--ids-comp-forms-option-item-icon-size-height-comfortable);
59
63
  width: var(--ids-comp-forms-option-item-icon-size-width-comfortable);
64
+ font-size: var(--ids-comp-forms-option-icon-typography-font-size-comfortable);
65
+ font-weight: var(--ids-comp-forms-option-icon-typography-font-weight-comfortable);
66
+ line-height: var(--ids-comp-forms-option-icon-typography-line-height-comfortable);
60
67
  }
61
68
  .ids-option.ids-option-comfortable.ids-option-active {
62
69
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable);
@@ -77,6 +84,9 @@
77
84
  .ids-option.ids-option-spacious > .ids-icon {
78
85
  height: var(--ids-comp-forms-option-item-icon-size-height-spacious);
79
86
  width: var(--ids-comp-forms-option-item-icon-size-width-spacious);
87
+ font-size: var(--ids-comp-forms-option-icon-typography-font-size-spacious);
88
+ font-weight: var(--ids-comp-forms-option-icon-typography-font-weight-spacious);
89
+ line-height: var(--ids-comp-forms-option-icon-typography-line-height-spacious);
80
90
  }
81
91
  .ids-option.ids-option-spacious.ids-option-active {
82
92
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious);
@@ -97,6 +107,9 @@
97
107
  .ids-option.ids-option-dense > .ids-icon {
98
108
  height: var(--ids-comp-forms-option-item-icon-size-height-dense);
99
109
  width: var(--ids-comp-forms-option-item-icon-size-width-dense);
110
+ font-size: var(--ids-comp-forms-option-icon-typography-font-size-dense);
111
+ font-weight: var(--ids-comp-forms-option-icon-typography-font-weight-dense);
112
+ line-height: var(--ids-comp-forms-option-icon-typography-line-height-dense);
100
113
  }
101
114
  .ids-option.ids-option-dense.ids-option-active {
102
115
  outline-width: var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense);
package/dist/option/option.min.css CHANGED
@@ -1 +1 @@
1
- .ids-option{display:flex;align-items:center;align-self:stretch;user-select:none}.ids-option>.ids-option__text{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-option:not(.ids-option-disabled){cursor:pointer}.ids-option.ids-option-disabled{cursor:not-allowed}.ids-option:not(.ids-option-multiselect){justify-content:space-between}.ids-option.ids-option-active{outline-style:solid}.ids-option.ids-option-compact{height:var(--ids-comp-forms-option-item-size-min-height-compact);padding:var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);gap:var(--ids-comp-forms-option-container-size-gap-compact);border-radius:var(--ids-comp-forms-option-item-size-border-radius-compact)}.ids-option.ids-option-compact>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-compact);font-size:var(--ids-comp-forms-option-item-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-item-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-compact)}.ids-option.ids-option-compact>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-compact);width:var(--ids-comp-forms-option-item-icon-size-width-compact)}.ids-option.ids-option-compact.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)}.ids-option.ids-option-comfortable{height:var(--ids-comp-forms-option-item-size-min-height-comfortable);padding:var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);gap:var(--ids-comp-forms-option-container-size-gap-comfortable);border-radius:var(--ids-comp-forms-option-item-size-border-radius-comfortable)}.ids-option.ids-option-comfortable>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-comfortable);font-size:var(--ids-comp-forms-option-item-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-item-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-comfortable)}.ids-option.ids-option-comfortable>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-comfortable);width:var(--ids-comp-forms-option-item-icon-size-width-comfortable)}.ids-option.ids-option-comfortable.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable)}.ids-option.ids-option-spacious{height:var(--ids-comp-forms-option-item-size-min-height-spacious);padding:var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);gap:var(--ids-comp-forms-option-container-size-gap-spacious);border-radius:var(--ids-comp-forms-option-item-size-border-radius-spacious)}.ids-option.ids-option-spacious>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-spacious);font-size:var(--ids-comp-forms-option-item-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-item-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-spacious)}.ids-option.ids-option-spacious>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-spacious);width:var(--ids-comp-forms-option-item-icon-size-width-spacious)}.ids-option.ids-option-spacious.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious)}.ids-option.ids-option-dense{height:var(--ids-comp-forms-option-item-size-min-height-dense);padding:var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);gap:var(--ids-comp-forms-option-container-size-gap-dense);border-radius:var(--ids-comp-forms-option-item-size-border-radius-dense)}.ids-option.ids-option-dense>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-dense);font-size:var(--ids-comp-forms-option-item-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-item-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-dense)}.ids-option.ids-option-dense>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-dense);width:var(--ids-comp-forms-option-item-icon-size-width-dense)}.ids-option.ids-option-dense.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense)}.ids-option.ids-option-surface:not(.ids-option-disabled){background:var(--ids-comp-forms-option-color-bg-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled)>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled)>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover{background:var(--ids-comp-forms-option-color-bg-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):active{background:var(--ids-comp-forms-option-color-bg-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled):active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled):active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active{background:var(--ids-comp-forms-option-color-bg-surface-active);outline-color:var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-active)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-active)}.ids-option.ids-option-surface.ids-option-disabled{background:var(--ids-comp-forms-option-color-bg-surface-disabled)}.ids-option.ids-option-surface.ids-option-disabled>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-disabled)}.ids-option.ids-option-surface.ids-option-disabled>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-disabled)}.ids-option.ids-option-light:not(.ids-option-disabled){background:var(--ids-comp-forms-option-color-bg-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled)>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled)>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled):hover{background:var(--ids-comp-forms-option-color-bg-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):hover>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):hover>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):active{background:var(--ids-comp-forms-option-color-bg-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled):active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled):active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active{background:var(--ids-comp-forms-option-color-bg-light-active);outline-color:var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-active)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-active)}.ids-option.ids-option-light.ids-option-disabled{background:var(--ids-comp-forms-option-color-bg-light-disabled)}.ids-option.ids-option-light.ids-option-disabled>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-disabled)}.ids-option.ids-option-light.ids-option-disabled>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-disabled)}.ids-option-group{width:100%}.ids-option-group>.ids-option-group__label{display:flex;flex-direction:column;align-items:flex-start;width:100%}.ids-option-group>.ids-option-group__label>.ids-option-group__text{display:flex;align-items:center;align-self:stretch;font-style:normal}.ids-option-group.ids-option-group-compact>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-compact)}.ids-option-group.ids-option-group-compact>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-compact) var(--ids-comp-forms-option-group-title-size-padding-x-compact);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-compact);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-compact)}.ids-option-group.ids-option-group-compact>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-right-compact) var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-left-compact)}.ids-option-group.ids-option-group-comfortable>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-comfortable)}.ids-option-group.ids-option-group-comfortable>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-comfortable) var(--ids-comp-forms-option-group-title-size-padding-x-comfortable);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-comfortable);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-comfortable)}.ids-option-group.ids-option-group-comfortable>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-right-comfortable) var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-left-comfortable)}.ids-option-group.ids-option-group-spacious>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-spacious)}.ids-option-group.ids-option-group-spacious>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-spacious) var(--ids-comp-forms-option-group-title-size-padding-x-spacious);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-spacious);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-spacious)}.ids-option-group.ids-option-group-spacious>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-right-spacious) var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-left-spacious)}.ids-option-group.ids-option-group-dense>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-dense)}.ids-option-group.ids-option-group-dense>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-dense) var(--ids-comp-forms-option-group-title-size-padding-x-dense);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-dense);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-dense)}.ids-option-group.ids-option-group-dense>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-right-dense) var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-left-dense)}.ids-option-group .ids-option-groupsurface>.ids-option-group__label>.ids-option-group__text{color:var(--ids-comp-forms-option-color-group-title-color-fg-text-default)}.ids-option-group .ids-option-grouplight>.ids-option-group__label>.ids-option-group__text{color:var(--ids-comp-forms-option-color-group-title-color-fg-text-default)}
1
+ .ids-option{display:flex;align-items:center;align-self:stretch;box-sizing:border-box;user-select:none}.ids-option>.ids-option__text{overflow:hidden;text-overflow:ellipsis;font-style:normal}.ids-option:not(.ids-option-disabled){cursor:pointer}.ids-option.ids-option-disabled{cursor:not-allowed}.ids-option:not(.ids-option-multiselect){justify-content:space-between}.ids-option.ids-option-active{outline-style:solid}.ids-option.ids-option-compact{height:var(--ids-comp-forms-option-item-size-min-height-compact);padding:var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-item-size-padding-x-compact);gap:var(--ids-comp-forms-option-container-size-gap-compact);border-radius:var(--ids-comp-forms-option-item-size-border-radius-compact)}.ids-option.ids-option-compact>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-compact);font-size:var(--ids-comp-forms-option-item-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-item-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-compact)}.ids-option.ids-option-compact>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-compact);width:var(--ids-comp-forms-option-item-icon-size-width-compact);font-size:var(--ids-comp-forms-option-icon-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-icon-typography-line-height-compact)}.ids-option.ids-option-compact.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)}.ids-option.ids-option-comfortable{height:var(--ids-comp-forms-option-item-size-min-height-comfortable);padding:var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-item-size-padding-x-comfortable);gap:var(--ids-comp-forms-option-container-size-gap-comfortable);border-radius:var(--ids-comp-forms-option-item-size-border-radius-comfortable)}.ids-option.ids-option-comfortable>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-comfortable);font-size:var(--ids-comp-forms-option-item-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-item-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-comfortable)}.ids-option.ids-option-comfortable>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-comfortable);width:var(--ids-comp-forms-option-item-icon-size-width-comfortable);font-size:var(--ids-comp-forms-option-icon-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-icon-typography-line-height-comfortable)}.ids-option.ids-option-comfortable.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable)}.ids-option.ids-option-spacious{height:var(--ids-comp-forms-option-item-size-min-height-spacious);padding:var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-item-size-padding-x-spacious);gap:var(--ids-comp-forms-option-container-size-gap-spacious);border-radius:var(--ids-comp-forms-option-item-size-border-radius-spacious)}.ids-option.ids-option-spacious>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-spacious);font-size:var(--ids-comp-forms-option-item-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-item-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-spacious)}.ids-option.ids-option-spacious>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-spacious);width:var(--ids-comp-forms-option-item-icon-size-width-spacious);font-size:var(--ids-comp-forms-option-icon-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-icon-typography-line-height-spacious)}.ids-option.ids-option-spacious.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious)}.ids-option.ids-option-dense{height:var(--ids-comp-forms-option-item-size-min-height-dense);padding:var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-item-size-padding-x-dense);gap:var(--ids-comp-forms-option-container-size-gap-dense);border-radius:var(--ids-comp-forms-option-item-size-border-radius-dense)}.ids-option.ids-option-dense>.ids-option__text{font-family:var(--ids-comp-forms-option-item-typography-font-family-dense);font-size:var(--ids-comp-forms-option-item-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-item-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-item-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-option-item-typography-letter-spacing-dense)}.ids-option.ids-option-dense>.ids-icon{height:var(--ids-comp-forms-option-item-icon-size-height-dense);width:var(--ids-comp-forms-option-item-icon-size-width-dense);font-size:var(--ids-comp-forms-option-icon-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-icon-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-icon-typography-line-height-dense)}.ids-option.ids-option-dense.ids-option-active{outline-width:var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense)}.ids-option.ids-option-surface:not(.ids-option-disabled){background:var(--ids-comp-forms-option-color-bg-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled)>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled)>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-default)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover{background:var(--ids-comp-forms-option-color-bg-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):hover>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-hovered)}.ids-option.ids-option-surface:not(.ids-option-disabled):active{background:var(--ids-comp-forms-option-color-bg-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled):active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled):active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-pressed)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active{background:var(--ids-comp-forms-option-color-bg-surface-active);outline-color:var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-active)}.ids-option.ids-option-surface:not(.ids-option-disabled).ids-option-active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-active)}.ids-option.ids-option-surface.ids-option-disabled{background:var(--ids-comp-forms-option-color-bg-surface-disabled)}.ids-option.ids-option-surface.ids-option-disabled>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-surface-disabled)}.ids-option.ids-option-surface.ids-option-disabled>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-surface-disabled)}.ids-option.ids-option-light:not(.ids-option-disabled){background:var(--ids-comp-forms-option-color-bg-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled)>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled)>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-default)}.ids-option.ids-option-light:not(.ids-option-disabled):hover{background:var(--ids-comp-forms-option-color-bg-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):hover>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):hover>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-hovered)}.ids-option.ids-option-light:not(.ids-option-disabled):active{background:var(--ids-comp-forms-option-color-bg-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled):active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled):active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-pressed)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active{background:var(--ids-comp-forms-option-color-bg-light-active);outline-color:var(--ids-comp-forms-form-field-standard-field-wrapper-container-color-focused-outline-color-dark-focused)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-active)}.ids-option.ids-option-light:not(.ids-option-disabled).ids-option-active>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-active)}.ids-option.ids-option-light.ids-option-disabled{background:var(--ids-comp-forms-option-color-bg-light-disabled)}.ids-option.ids-option-light.ids-option-disabled>.ids-option__text{color:var(--ids-comp-forms-option-color-fg-text-light-disabled)}.ids-option.ids-option-light.ids-option-disabled>.ids-icon{color:var(--ids-comp-forms-option-color-fg-icon-light-disabled)}.ids-option-group{width:100%}.ids-option-group>.ids-option-group__label{display:flex;flex-direction:column;align-items:flex-start;width:100%}.ids-option-group>.ids-option-group__label>.ids-option-group__text{display:flex;align-items:center;align-self:stretch;font-style:normal}.ids-option-group.ids-option-group-compact>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-compact)}.ids-option-group.ids-option-group-compact>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-compact) var(--ids-comp-forms-option-group-title-size-padding-x-compact);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-compact);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-compact);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-compact);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-compact);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-compact)}.ids-option-group.ids-option-group-compact>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-right-compact) var(--ids-comp-forms-option-item-size-padding-y-compact) var(--ids-comp-forms-option-group-item-size-padding-left-compact)}.ids-option-group.ids-option-group-comfortable>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-comfortable)}.ids-option-group.ids-option-group-comfortable>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-comfortable) var(--ids-comp-forms-option-group-title-size-padding-x-comfortable);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-comfortable);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-comfortable);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-comfortable);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-comfortable);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-comfortable)}.ids-option-group.ids-option-group-comfortable>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-right-comfortable) var(--ids-comp-forms-option-item-size-padding-y-comfortable) var(--ids-comp-forms-option-group-item-size-padding-left-comfortable)}.ids-option-group.ids-option-group-spacious>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-spacious)}.ids-option-group.ids-option-group-spacious>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-spacious) var(--ids-comp-forms-option-group-title-size-padding-x-spacious);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-spacious);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-spacious);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-spacious);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-spacious);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-spacious)}.ids-option-group.ids-option-group-spacious>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-right-spacious) var(--ids-comp-forms-option-item-size-padding-y-spacious) var(--ids-comp-forms-option-group-item-size-padding-left-spacious)}.ids-option-group.ids-option-group-dense>.ids-option-group__label{gap:var(--ids-comp-forms-option-container-size-gap-dense)}.ids-option-group.ids-option-group-dense>.ids-option-group__label>.ids-option-group__text{padding:var(--ids-comp-forms-option-group-title-size-padding-y-dense) var(--ids-comp-forms-option-group-title-size-padding-x-dense);font-family:var(--ids-comp-forms-option-group-title-typography-font-family-dense);font-size:var(--ids-comp-forms-option-group-title-typography-font-size-dense);font-weight:var(--ids-comp-forms-option-group-title-typography-font-weight-dense);line-height:var(--ids-comp-forms-option-group-title-typography-line-height-dense);letter-spacing:var(--ids-comp-forms-option-group-title-typography-letter-spacing-dense)}.ids-option-group.ids-option-group-dense>.ids-option{padding:var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-right-dense) var(--ids-comp-forms-option-item-size-padding-y-dense) var(--ids-comp-forms-option-group-item-size-padding-left-dense)}.ids-option-group .ids-option-groupsurface>.ids-option-group__label>.ids-option-group__text{color:var(--ids-comp-forms-option-color-group-title-color-fg-text-default)}.ids-option-group .ids-option-grouplight>.ids-option-group__label>.ids-option-group__text{color:var(--ids-comp-forms-option-color-group-title-color-fg-text-default)}
package/dist/option/option.plugin.js CHANGED
@@ -2,7 +2,7 @@
2
2
  module.exports = function OptionPlugin() {
3
3
  return function ({ addComponents }) {
4
4
  const cssObj = {
5
- '.ids-option': { display: 'flex', alignItems: 'center', alignSelf: 'stretch', userSelect: 'none' },
5
+ '.ids-option': { display: 'flex', alignItems: 'center', alignSelf: 'stretch', boxSizing: 'border-box', userSelect: 'none' },
6
6
  '.ids-option>.ids-option__text': { overflow: 'hidden', textOverflow: 'ellipsis', fontStyle: 'normal' },
7
7
  '.ids-option:not(.ids-option-disabled)': { cursor: 'pointer' },
8
8
  '.ids-option.ids-option-disabled': { cursor: 'not-allowed' },
@@ -24,6 +24,9 @@ module.exports = function OptionPlugin() {
24
24
  '.ids-option.ids-option-compact>.ids-icon': {
25
25
  height: 'var(--ids-comp-forms-option-item-icon-size-height-compact)',
26
26
  width: 'var(--ids-comp-forms-option-item-icon-size-width-compact)',
27
+ fontSize: 'var(--ids-comp-forms-option-icon-typography-font-size-compact)',
28
+ fontWeight: 'var(--ids-comp-forms-option-icon-typography-font-weight-compact)',
29
+ lineHeight: 'var(--ids-comp-forms-option-icon-typography-line-height-compact)',
27
30
  },
28
31
  '.ids-option.ids-option-compact.ids-option-active': {
29
32
  outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-compact)',
@@ -45,6 +48,9 @@ module.exports = function OptionPlugin() {
45
48
  '.ids-option.ids-option-comfortable>.ids-icon': {
46
49
  height: 'var(--ids-comp-forms-option-item-icon-size-height-comfortable)',
47
50
  width: 'var(--ids-comp-forms-option-item-icon-size-width-comfortable)',
51
+ fontSize: 'var(--ids-comp-forms-option-icon-typography-font-size-comfortable)',
52
+ fontWeight: 'var(--ids-comp-forms-option-icon-typography-font-weight-comfortable)',
53
+ lineHeight: 'var(--ids-comp-forms-option-icon-typography-line-height-comfortable)',
48
54
  },
49
55
  '.ids-option.ids-option-comfortable.ids-option-active': {
50
56
  outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-comfortable)',
@@ -65,6 +71,9 @@ module.exports = function OptionPlugin() {
65
71
  '.ids-option.ids-option-spacious>.ids-icon': {
66
72
  height: 'var(--ids-comp-forms-option-item-icon-size-height-spacious)',
67
73
  width: 'var(--ids-comp-forms-option-item-icon-size-width-spacious)',
74
+ fontSize: 'var(--ids-comp-forms-option-icon-typography-font-size-spacious)',
75
+ fontWeight: 'var(--ids-comp-forms-option-icon-typography-font-weight-spacious)',
76
+ lineHeight: 'var(--ids-comp-forms-option-icon-typography-line-height-spacious)',
68
77
  },
69
78
  '.ids-option.ids-option-spacious.ids-option-active': {
70
79
  outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-spacious)',
@@ -85,6 +94,9 @@ module.exports = function OptionPlugin() {
85
94
  '.ids-option.ids-option-dense>.ids-icon': {
86
95
  height: 'var(--ids-comp-forms-option-item-icon-size-height-dense)',
87
96
  width: 'var(--ids-comp-forms-option-item-icon-size-width-dense)',
97
+ fontSize: 'var(--ids-comp-forms-option-icon-typography-font-size-dense)',
98
+ fontWeight: 'var(--ids-comp-forms-option-icon-typography-font-weight-dense)',
99
+ lineHeight: 'var(--ids-comp-forms-option-icon-typography-line-height-dense)',
88
100
  },
89
101
  '.ids-option.ids-option-dense.ids-option-active': {
90
102
  outlineWidth: 'var(--ids-comp-forms-form-field-standard-field-wrapper-focused-outline-outline-dense)',