@i-cell/ids-styles 0.0.4 → 0.0.6

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 (19) hide show
  1. package/dist/accessibility.css +11 -0
  2. package/dist/accessibility.min.css +1 -0
  3. package/dist/accessibility.plugin.js +20 -0
  4. package/dist/checkbox/checkbox.css +1 -1
  5. package/dist/checkbox/checkbox.min.css +1 -1
  6. package/dist/checkbox/checkbox.plugin.js +1 -1
  7. package/dist/components.css +1096 -9
  8. package/dist/components.min.css +1 -1
  9. package/dist/components.plugin.js +1054 -10
  10. package/dist/paginator/paginator.css +46 -8
  11. package/dist/paginator/paginator.min.css +1 -1
  12. package/dist/paginator/paginator.plugin.js +38 -9
  13. package/dist/segmented-control/segmented-control-toggle.css +505 -0
  14. package/dist/segmented-control/segmented-control-toggle.min.css +1 -0
  15. package/dist/segmented-control/segmented-control-toggle.plugin.js +515 -0
  16. package/dist/segmented-control/segmented-control.css +542 -0
  17. package/dist/segmented-control/segmented-control.min.css +1 -0
  18. package/dist/segmented-control/segmented-control.plugin.js +518 -0
  19. package/package.json +2 -2
package/dist/paginator/paginator.css CHANGED
@@ -23,20 +23,22 @@
23
23
  justify-content: center;
24
24
  align-items: center;
25
25
  font-style: normal;
26
+ border-style: none;
26
27
  }
27
28
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus {
28
29
  outline-width: var(--ids-comp-paginator-page-links-focused-outline-size-outline);
29
30
  outline-style: solid;
31
+ outline-offset: 2px;
30
32
  }
31
33
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.first, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous {
32
34
  order: 1;
33
35
  }
34
- .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container {
35
- order: 2;
36
- }
37
36
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next, .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.last {
38
37
  order: 3;
39
38
  }
39
+ .ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container {
40
+ order: 2;
41
+ }
40
42
  .ids-paginator .ids-paginator__navigation-container .ids-paginator__help-text {
41
43
  order: 4;
42
44
  }
@@ -48,7 +50,7 @@
48
50
  white-space: nowrap;
49
51
  }
50
52
  .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container {
51
- gap: var(--ids-comp-paginator-size-gap-comfortable);
53
+ gap: var(--ids-comp-paginator-size-gap-compact);
52
54
  }
53
55
  .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button {
54
56
  height: var(--ids-comp-paginator-page-links-size-height-compact);
@@ -61,6 +63,15 @@
61
63
  line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-compact);
62
64
  border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact);
63
65
  }
66
+ .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
67
+ gap: var(--ids-comp-paginator-page-links-size-gap-compact);
68
+ }
69
+ .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
70
+ padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-compact);
71
+ }
72
+ .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
73
+ padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-compact);
74
+ }
64
75
  .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
65
76
  height: var(--ids-comp-paginator-page-links-size-height-compact);
66
77
  width: var(--ids-comp-paginator-page-links-size-min-width-compact);
@@ -89,6 +100,15 @@
89
100
  line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable);
90
101
  border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable);
91
102
  }
103
+ .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
104
+ gap: var(--ids-comp-paginator-page-links-size-gap-comfortable);
105
+ }
106
+ .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
107
+ padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-comfortable);
108
+ }
109
+ .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
110
+ padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-comfortable);
111
+ }
92
112
  .ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
93
113
  height: var(--ids-comp-paginator-page-links-size-height-comfortable);
94
114
  width: var(--ids-comp-paginator-page-links-size-min-width-comfortable);
@@ -104,7 +124,7 @@
104
124
  padding: var(--ids-comp-paginator-help-text-size-padding-y-comfortable);
105
125
  }
106
126
  .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container {
107
- gap: var(--ids-comp-paginator-size-gap-comfortable);
127
+ gap: var(--ids-comp-paginator-size-gap-spacious);
108
128
  }
109
129
  .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button {
110
130
  height: var(--ids-comp-paginator-page-links-size-height-spacious);
@@ -117,6 +137,15 @@
117
137
  line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-spacious);
118
138
  border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious);
119
139
  }
140
+ .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
141
+ gap: var(--ids-comp-paginator-page-links-size-gap-spacious);
142
+ }
143
+ .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
144
+ padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-spacious);
145
+ }
146
+ .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
147
+ padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-spacious);
148
+ }
120
149
  .ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
121
150
  height: var(--ids-comp-paginator-page-links-size-height-spacious);
122
151
  width: var(--ids-comp-paginator-page-links-size-min-width-spacious);
@@ -132,7 +161,7 @@
132
161
  padding: var(--ids-comp-paginator-help-text-size-padding-y-spacious);
133
162
  }
134
163
  .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container {
135
- gap: var(--ids-comp-paginator-size-gap-comfortable);
164
+ gap: var(--ids-comp-paginator-size-gap-dense);
136
165
  }
137
166
  .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button {
138
167
  height: var(--ids-comp-paginator-page-links-size-height-dense);
@@ -145,6 +174,15 @@
145
174
  line-height: var(--ids-comp-paginator-page-links-label-typography-line-height-dense);
146
175
  border-radius: var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense);
147
176
  }
177
+ .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow {
178
+ gap: var(--ids-comp-paginator-page-links-size-gap-dense);
179
+ }
180
+ .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous > .ids-paginator__page-button-arrow__label {
181
+ padding-right: var(--ids-comp-paginator-page-links-label-size-padding-right-dense);
182
+ }
183
+ .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next > .ids-paginator__page-button-arrow__label {
184
+ padding-left: var(--ids-comp-paginator-page-links-label-size-padding-left-dense);
185
+ }
148
186
  .ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation {
149
187
  height: var(--ids-comp-paginator-page-links-size-height-dense);
150
188
  width: var(--ids-comp-paginator-page-links-size-min-width-dense);
@@ -303,10 +341,10 @@
303
341
  .ids-paginator.ids-paginator-surface .ids-paginator__help-text {
304
342
  color: var(--ids-comp-paginator-help-text-color-fg-surface-default);
305
343
  }
306
- .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-container {
344
+ .ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__page-button-container {
307
345
  display: none;
308
346
  }
309
- .ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__help-text {
347
+ .ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__help-text {
310
348
  order: 2;
311
349
  margin-left: 0;
312
350
  }
package/dist/paginator/paginator.min.css CHANGED
@@ -1 +1 @@
1
- .ids-paginator{display:inline-flex}.ids-paginator .ids-paginator__navigation-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;width:100%}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container{display:flex;align-items:center}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container .ids-paginator__page-button-truncation{display:flex;align-items:center;justify-content:center}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button{display:flex;justify-content:center;align-items:center;font-style:normal}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus{outline-width:var(--ids-comp-paginator-page-links-focused-outline-size-outline);outline-style:solid}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.first,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous{order:1}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container{order:2}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.last{order:3}.ids-paginator .ids-paginator__navigation-container .ids-paginator__help-text{order:4}.ids-paginator .ids-paginator__help-text{margin-left:auto;display:flex;justify-content:center;align-items:center;white-space:nowrap}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container{gap:var(--ids-comp-paginator-size-gap-comfortable)}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button{height:var(--ids-comp-paginator-page-links-size-height-compact);min-width:var(--ids-comp-paginator-page-links-size-min-width-compact);padding:var(--ids-comp-paginator-page-links-size-padding-y-compact) var(--ids-comp-paginator-page-links-size-padding-x-compact);font-family:var(--ids-comp-paginator-page-links-label-typography-font-family-compact);font-size:var(--ids-comp-paginator-page-links-label-typography-font-size-compact);font-weight:var(--ids-comp-paginator-page-links-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-paginator-page-links-label-typography-letter-spacing-compact);line-height:var(--ids-comp-paginator-page-links-label-typography-line-height-compact);border-radius:var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact)}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation{height:var(--ids-comp-paginator-page-links-size-height-compact);width:var(--ids-comp-paginator-page-links-size-min-width-compact)}.ids-paginator.ids-paginator-compact .ids-paginator__help-text{font-family:var(--ids-comp-paginator-help-text-label-typography-font-family-compact);font-size:var(--ids-comp-paginator-help-text-label-typography-font-size-compact);font-weight:var(--ids-comp-paginator-help-text-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-paginator-help-text-label-typography-letter-spacing-compact);line-height:var(--ids-comp-paginator-help-text-label-typography-line-height-compact);border-radius:var(--ids-comp-paginator-help-text-size-border-radius-compact);height:var(--ids-comp-paginator-help-text-size-height-compact);padding:var(--ids-comp-paginator-help-text-size-padding-y-compact)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container{gap:var(--ids-comp-paginator-size-gap-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button{height:var(--ids-comp-paginator-page-links-size-height-comfortable);min-width:var(--ids-comp-paginator-page-links-size-min-width-comfortable);padding:var(--ids-comp-paginator-page-links-size-padding-y-comfortable) var(--ids-comp-paginator-page-links-size-padding-x-comfortable);font-family:var(--ids-comp-paginator-page-links-label-typography-font-family-comfortable);font-size:var(--ids-comp-paginator-page-links-label-typography-font-size-comfortable);font-weight:var(--ids-comp-paginator-page-links-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-paginator-page-links-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable);border-radius:var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation{height:var(--ids-comp-paginator-page-links-size-height-comfortable);width:var(--ids-comp-paginator-page-links-size-min-width-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__help-text{font-family:var(--ids-comp-paginator-help-text-label-typography-font-family-comfortable);font-size:var(--ids-comp-paginator-help-text-label-typography-font-size-comfortable);font-weight:var(--ids-comp-paginator-help-text-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-paginator-help-text-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-paginator-help-text-label-typography-line-height-comfortable);border-radius:var(--ids-comp-paginator-help-text-size-border-radius-comfortable);height:var(--ids-comp-paginator-help-text-size-height-comfortable);padding:var(--ids-comp-paginator-help-text-size-padding-y-comfortable)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container{gap:var(--ids-comp-paginator-size-gap-comfortable)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button{height:var(--ids-comp-paginator-page-links-size-height-spacious);min-width:var(--ids-comp-paginator-page-links-size-min-width-spacious);padding:var(--ids-comp-paginator-page-links-size-padding-y-spacious) var(--ids-comp-paginator-page-links-size-padding-x-spacious);font-family:var(--ids-comp-paginator-page-links-label-typography-font-family-spacious);font-size:var(--ids-comp-paginator-page-links-label-typography-font-size-spacious);font-weight:var(--ids-comp-paginator-page-links-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-paginator-page-links-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-paginator-page-links-label-typography-line-height-spacious);border-radius:var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation{height:var(--ids-comp-paginator-page-links-size-height-spacious);width:var(--ids-comp-paginator-page-links-size-min-width-spacious)}.ids-paginator.ids-paginator-spacious .ids-paginator__help-text{font-family:var(--ids-comp-paginator-help-text-label-typography-font-family-spacious);font-size:var(--ids-comp-paginator-help-text-label-typography-font-size-spacious);font-weight:var(--ids-comp-paginator-help-text-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-paginator-help-text-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-paginator-help-text-label-typography-line-height-spacious);border-radius:var(--ids-comp-paginator-help-text-size-border-radius-spacious);height:var(--ids-comp-paginator-help-text-size-height-spacious);padding:var(--ids-comp-paginator-help-text-size-padding-y-spacious)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container{gap:var(--ids-comp-paginator-size-gap-comfortable)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button{height:var(--ids-comp-paginator-page-links-size-height-dense);min-width:var(--ids-comp-paginator-page-links-size-min-width-dense);padding:var(--ids-comp-paginator-page-links-size-padding-y-dense) var(--ids-comp-paginator-page-links-size-padding-x-dense);font-family:var(--ids-comp-paginator-page-links-label-typography-font-family-dense);font-size:var(--ids-comp-paginator-page-links-label-typography-font-size-dense);font-weight:var(--ids-comp-paginator-page-links-label-typography-font-weight-dense);letter-spacing:var(--ids-comp-paginator-page-links-label-typography-letter-spacing-dense);line-height:var(--ids-comp-paginator-page-links-label-typography-line-height-dense);border-radius:var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation{height:var(--ids-comp-paginator-page-links-size-height-dense);width:var(--ids-comp-paginator-page-links-size-min-width-dense)}.ids-paginator.ids-paginator-dense .ids-paginator__help-text{font-family:var(--ids-comp-paginator-help-text-label-typography-font-family-dense);font-size:var(--ids-comp-paginator-help-text-label-typography-font-size-dense);font-weight:var(--ids-comp-paginator-help-text-label-typography-font-weight-dense);letter-spacing:var(--ids-comp-paginator-help-text-label-typography-letter-spacing-dense);line-height:var(--ids-comp-paginator-help-text-label-typography-line-height-dense);border-radius:var(--ids-comp-paginator-help-text-size-border-radius-dense);height:var(--ids-comp-paginator-help-text-size-height-dense);padding:var(--ids-comp-paginator-help-text-size-padding-y-dense)}.ids-paginator.ids-paginator-primary .ids-paginator__page-button:focus{outline-color:var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-default);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-default)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled){background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-active);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-active)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-focused);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-focused)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-hovered);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-hovered)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-pressed);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-pressed)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-disabled);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-disabled)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled){color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button-truncation{color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-disabled)}.ids-paginator.ids-paginator-primary .ids-paginator__help-text{color:var(--ids-comp-paginator-help-text-color-fg-primary-default)}.ids-paginator.ids-paginator-secondary .ids-paginator__page-button:focus{outline-color:var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-default);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-default)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled){background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-active);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-active)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-focused);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-focused)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-hovered);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-hovered)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-pressed);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-pressed)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-disabled);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-disabled)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled){color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button-truncation{color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-disabled)}.ids-paginator.ids-paginator-secondary .ids-paginator__help-text{color:var(--ids-comp-paginator-help-text-color-fg-secondary-default)}.ids-paginator.ids-paginator-light .ids-paginator__page-button:focus{outline-color:var(--ids-comp-paginator-page-links-focused-outline-color-light-focused)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-default);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-default)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled){background:var(--ids-comp-paginator-page-links-plain-color-bg-light-active);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-active)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-focused);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-focused)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-hovered);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-hovered)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-pressed);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-pressed)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-disabled);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-disabled)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled){color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button-truncation{color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-disabled)}.ids-paginator.ids-paginator-light .ids-paginator__help-text{color:var(--ids-comp-paginator-help-text-color-fg-light-default)}.ids-paginator.ids-paginator-surface .ids-paginator__page-button:focus{outline-color:var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-default);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-default)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled){background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-active);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-active)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-focused);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-focused)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-hovered);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-hovered)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-pressed);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-pressed)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-disabled);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-disabled)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled){color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button-truncation{color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-disabled)}.ids-paginator.ids-paginator-surface .ids-paginator__help-text{color:var(--ids-comp-paginator-help-text-color-fg-surface-default)}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-container{display:none}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__help-text{order:2;margin-left:0}
1
+ .ids-paginator{display:inline-flex}.ids-paginator .ids-paginator__navigation-container{display:flex;flex-direction:row;flex-wrap:nowrap;align-items:center;justify-content:flex-start;width:100%}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container{display:flex;align-items:center}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container .ids-paginator__page-button-truncation{display:flex;align-items:center;justify-content:center}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button{display:flex;justify-content:center;align-items:center;font-style:normal;border-style:none}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus{outline-width:var(--ids-comp-paginator-page-links-focused-outline-size-outline);outline-style:solid;outline-offset:2px}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.first,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous{order:1}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.last{order:3}.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-container{order:2}.ids-paginator .ids-paginator__navigation-container .ids-paginator__help-text{order:4}.ids-paginator .ids-paginator__help-text{margin-left:auto;display:flex;justify-content:center;align-items:center;white-space:nowrap}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container{gap:var(--ids-comp-paginator-size-gap-compact)}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button{height:var(--ids-comp-paginator-page-links-size-height-compact);min-width:var(--ids-comp-paginator-page-links-size-min-width-compact);padding:var(--ids-comp-paginator-page-links-size-padding-y-compact) var(--ids-comp-paginator-page-links-size-padding-x-compact);font-family:var(--ids-comp-paginator-page-links-label-typography-font-family-compact);font-size:var(--ids-comp-paginator-page-links-label-typography-font-size-compact);font-weight:var(--ids-comp-paginator-page-links-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-paginator-page-links-label-typography-letter-spacing-compact);line-height:var(--ids-comp-paginator-page-links-label-typography-line-height-compact);border-radius:var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact)}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow{gap:var(--ids-comp-paginator-page-links-size-gap-compact)}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label{padding-right:var(--ids-comp-paginator-page-links-label-size-padding-right-compact)}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label{padding-left:var(--ids-comp-paginator-page-links-label-size-padding-left-compact)}.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation{height:var(--ids-comp-paginator-page-links-size-height-compact);width:var(--ids-comp-paginator-page-links-size-min-width-compact)}.ids-paginator.ids-paginator-compact .ids-paginator__help-text{font-family:var(--ids-comp-paginator-help-text-label-typography-font-family-compact);font-size:var(--ids-comp-paginator-help-text-label-typography-font-size-compact);font-weight:var(--ids-comp-paginator-help-text-label-typography-font-weight-compact);letter-spacing:var(--ids-comp-paginator-help-text-label-typography-letter-spacing-compact);line-height:var(--ids-comp-paginator-help-text-label-typography-line-height-compact);border-radius:var(--ids-comp-paginator-help-text-size-border-radius-compact);height:var(--ids-comp-paginator-help-text-size-height-compact);padding:var(--ids-comp-paginator-help-text-size-padding-y-compact)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container{gap:var(--ids-comp-paginator-size-gap-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button{height:var(--ids-comp-paginator-page-links-size-height-comfortable);min-width:var(--ids-comp-paginator-page-links-size-min-width-comfortable);padding:var(--ids-comp-paginator-page-links-size-padding-y-comfortable) var(--ids-comp-paginator-page-links-size-padding-x-comfortable);font-family:var(--ids-comp-paginator-page-links-label-typography-font-family-comfortable);font-size:var(--ids-comp-paginator-page-links-label-typography-font-size-comfortable);font-weight:var(--ids-comp-paginator-page-links-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-paginator-page-links-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable);border-radius:var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow{gap:var(--ids-comp-paginator-page-links-size-gap-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label{padding-right:var(--ids-comp-paginator-page-links-label-size-padding-right-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label{padding-left:var(--ids-comp-paginator-page-links-label-size-padding-left-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation{height:var(--ids-comp-paginator-page-links-size-height-comfortable);width:var(--ids-comp-paginator-page-links-size-min-width-comfortable)}.ids-paginator.ids-paginator-comfortable .ids-paginator__help-text{font-family:var(--ids-comp-paginator-help-text-label-typography-font-family-comfortable);font-size:var(--ids-comp-paginator-help-text-label-typography-font-size-comfortable);font-weight:var(--ids-comp-paginator-help-text-label-typography-font-weight-comfortable);letter-spacing:var(--ids-comp-paginator-help-text-label-typography-letter-spacing-comfortable);line-height:var(--ids-comp-paginator-help-text-label-typography-line-height-comfortable);border-radius:var(--ids-comp-paginator-help-text-size-border-radius-comfortable);height:var(--ids-comp-paginator-help-text-size-height-comfortable);padding:var(--ids-comp-paginator-help-text-size-padding-y-comfortable)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container{gap:var(--ids-comp-paginator-size-gap-spacious)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button{height:var(--ids-comp-paginator-page-links-size-height-spacious);min-width:var(--ids-comp-paginator-page-links-size-min-width-spacious);padding:var(--ids-comp-paginator-page-links-size-padding-y-spacious) var(--ids-comp-paginator-page-links-size-padding-x-spacious);font-family:var(--ids-comp-paginator-page-links-label-typography-font-family-spacious);font-size:var(--ids-comp-paginator-page-links-label-typography-font-size-spacious);font-weight:var(--ids-comp-paginator-page-links-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-paginator-page-links-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-paginator-page-links-label-typography-line-height-spacious);border-radius:var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow{gap:var(--ids-comp-paginator-page-links-size-gap-spacious)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label{padding-right:var(--ids-comp-paginator-page-links-label-size-padding-right-spacious)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label{padding-left:var(--ids-comp-paginator-page-links-label-size-padding-left-spacious)}.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation{height:var(--ids-comp-paginator-page-links-size-height-spacious);width:var(--ids-comp-paginator-page-links-size-min-width-spacious)}.ids-paginator.ids-paginator-spacious .ids-paginator__help-text{font-family:var(--ids-comp-paginator-help-text-label-typography-font-family-spacious);font-size:var(--ids-comp-paginator-help-text-label-typography-font-size-spacious);font-weight:var(--ids-comp-paginator-help-text-label-typography-font-weight-spacious);letter-spacing:var(--ids-comp-paginator-help-text-label-typography-letter-spacing-spacious);line-height:var(--ids-comp-paginator-help-text-label-typography-line-height-spacious);border-radius:var(--ids-comp-paginator-help-text-size-border-radius-spacious);height:var(--ids-comp-paginator-help-text-size-height-spacious);padding:var(--ids-comp-paginator-help-text-size-padding-y-spacious)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container{gap:var(--ids-comp-paginator-size-gap-dense)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button{height:var(--ids-comp-paginator-page-links-size-height-dense);min-width:var(--ids-comp-paginator-page-links-size-min-width-dense);padding:var(--ids-comp-paginator-page-links-size-padding-y-dense) var(--ids-comp-paginator-page-links-size-padding-x-dense);font-family:var(--ids-comp-paginator-page-links-label-typography-font-family-dense);font-size:var(--ids-comp-paginator-page-links-label-typography-font-size-dense);font-weight:var(--ids-comp-paginator-page-links-label-typography-font-weight-dense);letter-spacing:var(--ids-comp-paginator-page-links-label-typography-letter-spacing-dense);line-height:var(--ids-comp-paginator-page-links-label-typography-line-height-dense);border-radius:var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow{gap:var(--ids-comp-paginator-page-links-size-gap-dense)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label{padding-right:var(--ids-comp-paginator-page-links-label-size-padding-right-dense)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label{padding-left:var(--ids-comp-paginator-page-links-label-size-padding-left-dense)}.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation{height:var(--ids-comp-paginator-page-links-size-height-dense);width:var(--ids-comp-paginator-page-links-size-min-width-dense)}.ids-paginator.ids-paginator-dense .ids-paginator__help-text{font-family:var(--ids-comp-paginator-help-text-label-typography-font-family-dense);font-size:var(--ids-comp-paginator-help-text-label-typography-font-size-dense);font-weight:var(--ids-comp-paginator-help-text-label-typography-font-weight-dense);letter-spacing:var(--ids-comp-paginator-help-text-label-typography-letter-spacing-dense);line-height:var(--ids-comp-paginator-help-text-label-typography-line-height-dense);border-radius:var(--ids-comp-paginator-help-text-size-border-radius-dense);height:var(--ids-comp-paginator-help-text-size-height-dense);padding:var(--ids-comp-paginator-help-text-size-padding-y-dense)}.ids-paginator.ids-paginator-primary .ids-paginator__page-button:focus{outline-color:var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-default);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-default)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled){background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-active);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-active)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-focused);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-focused)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-hovered);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-hovered)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-pressed);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-pressed)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled{background:var(--ids-comp-paginator-page-links-plain-color-bg-primary-disabled);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-primary-disabled)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled){color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-default)}.ids-paginator.ids-paginator-primary .ids-paginator__navigation-container .ids-paginator__page-button-truncation{color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-primary-disabled)}.ids-paginator.ids-paginator-primary .ids-paginator__help-text{color:var(--ids-comp-paginator-help-text-color-fg-primary-default)}.ids-paginator.ids-paginator-secondary .ids-paginator__page-button:focus{outline-color:var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-default);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-default)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled){background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-active);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-active)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-focused);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-focused)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-hovered);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-hovered)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-pressed);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-pressed)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled{background:var(--ids-comp-paginator-page-links-plain-color-bg-secondary-disabled);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-secondary-disabled)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled){color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-default)}.ids-paginator.ids-paginator-secondary .ids-paginator__navigation-container .ids-paginator__page-button-truncation{color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-secondary-disabled)}.ids-paginator.ids-paginator-secondary .ids-paginator__help-text{color:var(--ids-comp-paginator-help-text-color-fg-secondary-default)}.ids-paginator.ids-paginator-light .ids-paginator__page-button:focus{outline-color:var(--ids-comp-paginator-page-links-focused-outline-color-light-focused)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-default);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-default)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled){background:var(--ids-comp-paginator-page-links-plain-color-bg-light-active);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-active)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-focused);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-focused)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-hovered);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-hovered)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-pressed);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-pressed)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled{background:var(--ids-comp-paginator-page-links-plain-color-bg-light-disabled);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-light-disabled)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled){color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-default)}.ids-paginator.ids-paginator-light .ids-paginator__navigation-container .ids-paginator__page-button-truncation{color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-light-disabled)}.ids-paginator.ids-paginator-light .ids-paginator__help-text{color:var(--ids-comp-paginator-help-text-color-fg-light-default)}.ids-paginator.ids-paginator-surface .ids-paginator__page-button:focus{outline-color:var(--ids-comp-paginator-page-links-focused-outline-color-dark-focused)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-default);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-default)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.active:not(:disabled){background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-active);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-active)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:focus{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-focused);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-focused)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:hover{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-hovered);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-hovered)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:active{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-pressed);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-pressed)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain:disabled{background:var(--ids-comp-paginator-page-links-plain-color-bg-surface-disabled);color:var(--ids-comp-paginator-page-links-plain-color-fg-label-surface-disabled)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button.ids-paginator__page-button-plain.ids-paginator__page-button-arrow:not(:disabled){color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-default)}.ids-paginator.ids-paginator-surface .ids-paginator__navigation-container .ids-paginator__page-button-truncation{color:var(--ids-comp-paginator-page-links-plain-color-fg-icon-surface-disabled)}.ids-paginator.ids-paginator-surface .ids-paginator__help-text{color:var(--ids-comp-paginator-help-text-color-fg-surface-default)}.ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__page-button-container{display:none}.ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__help-text{order:2;margin-left:0}
package/dist/paginator/paginator.plugin.js CHANGED
@@ -26,10 +26,12 @@ module.exports = function PaginatorPlugin() {
26
26
  justifyContent: 'center',
27
27
  alignItems: 'center',
28
28
  fontStyle: 'normal',
29
+ borderStyle: 'none',
29
30
  },
30
31
  '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button:focus': {
31
32
  outlineWidth: 'var(--ids-comp-paginator-page-links-focused-outline-size-outline)',
32
33
  outlineStyle: 'solid',
34
+ outlineOffset: '2px',
33
35
  },
34
36
  '.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.first,.ids-paginator .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous':
35
37
  { order: 1 },
@@ -43,9 +45,7 @@ module.exports = function PaginatorPlugin() {
43
45
  alignItems: 'center',
44
46
  whiteSpace: 'nowrap',
45
47
  },
46
- '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container': {
47
- gap: 'var(--ids-comp-paginator-size-gap-comfortable)',
48
- },
48
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-compact)' },
49
49
  '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button': {
50
50
  height: 'var(--ids-comp-paginator-page-links-size-height-compact)',
51
51
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-compact)',
@@ -57,6 +57,13 @@ module.exports = function PaginatorPlugin() {
57
57
  lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-compact)',
58
58
  borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-compact)',
59
59
  },
60
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow': {
61
+ gap: 'var(--ids-comp-paginator-page-links-size-gap-compact)',
62
+ },
63
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label':
64
+ { paddingRight: 'var(--ids-comp-paginator-page-links-label-size-padding-right-compact)' },
65
+ '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label':
66
+ { paddingLeft: 'var(--ids-comp-paginator-page-links-label-size-padding-left-compact)' },
60
67
  '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
61
68
  height: 'var(--ids-comp-paginator-page-links-size-height-compact)',
62
69
  width: 'var(--ids-comp-paginator-page-links-size-min-width-compact)',
@@ -86,6 +93,13 @@ module.exports = function PaginatorPlugin() {
86
93
  lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-comfortable)',
87
94
  borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-comfortable)',
88
95
  },
96
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow': {
97
+ gap: 'var(--ids-comp-paginator-page-links-size-gap-comfortable)',
98
+ },
99
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label':
100
+ { paddingRight: 'var(--ids-comp-paginator-page-links-label-size-padding-right-comfortable)' },
101
+ '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label':
102
+ { paddingLeft: 'var(--ids-comp-paginator-page-links-label-size-padding-left-comfortable)' },
89
103
  '.ids-paginator.ids-paginator-comfortable .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
90
104
  height: 'var(--ids-comp-paginator-page-links-size-height-comfortable)',
91
105
  width: 'var(--ids-comp-paginator-page-links-size-min-width-comfortable)',
@@ -100,9 +114,7 @@ module.exports = function PaginatorPlugin() {
100
114
  height: 'var(--ids-comp-paginator-help-text-size-height-comfortable)',
101
115
  padding: 'var(--ids-comp-paginator-help-text-size-padding-y-comfortable)',
102
116
  },
103
- '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container': {
104
- gap: 'var(--ids-comp-paginator-size-gap-comfortable)',
105
- },
117
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-spacious)' },
106
118
  '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button': {
107
119
  height: 'var(--ids-comp-paginator-page-links-size-height-spacious)',
108
120
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-spacious)',
@@ -115,6 +127,13 @@ module.exports = function PaginatorPlugin() {
115
127
  lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-spacious)',
116
128
  borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-spacious)',
117
129
  },
130
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow': {
131
+ gap: 'var(--ids-comp-paginator-page-links-size-gap-spacious)',
132
+ },
133
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label':
134
+ { paddingRight: 'var(--ids-comp-paginator-page-links-label-size-padding-right-spacious)' },
135
+ '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label':
136
+ { paddingLeft: 'var(--ids-comp-paginator-page-links-label-size-padding-left-spacious)' },
118
137
  '.ids-paginator.ids-paginator-spacious .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
119
138
  height: 'var(--ids-comp-paginator-page-links-size-height-spacious)',
120
139
  width: 'var(--ids-comp-paginator-page-links-size-min-width-spacious)',
@@ -129,7 +148,7 @@ module.exports = function PaginatorPlugin() {
129
148
  height: 'var(--ids-comp-paginator-help-text-size-height-spacious)',
130
149
  padding: 'var(--ids-comp-paginator-help-text-size-padding-y-spacious)',
131
150
  },
132
- '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-comfortable)' },
151
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container': { gap: 'var(--ids-comp-paginator-size-gap-dense)' },
133
152
  '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button': {
134
153
  height: 'var(--ids-comp-paginator-page-links-size-height-dense)',
135
154
  minWidth: 'var(--ids-comp-paginator-page-links-size-min-width-dense)',
@@ -141,6 +160,13 @@ module.exports = function PaginatorPlugin() {
141
160
  lineHeight: 'var(--ids-comp-paginator-page-links-label-typography-line-height-dense)',
142
161
  borderRadius: 'var(--ids-comp-paginator-page-links-page-link-size-border-radius-dense)',
143
162
  },
163
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow': {
164
+ gap: 'var(--ids-comp-paginator-page-links-size-gap-dense)',
165
+ },
166
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.previous>.ids-paginator__page-button-arrow__label':
167
+ { paddingRight: 'var(--ids-comp-paginator-page-links-label-size-padding-right-dense)' },
168
+ '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-arrow.next>.ids-paginator__page-button-arrow__label':
169
+ { paddingLeft: 'var(--ids-comp-paginator-page-links-label-size-padding-left-dense)' },
144
170
  '.ids-paginator.ids-paginator-dense .ids-paginator__navigation-container .ids-paginator__page-button-truncation': {
145
171
  height: 'var(--ids-comp-paginator-page-links-size-height-dense)',
146
172
  width: 'var(--ids-comp-paginator-page-links-size-min-width-dense)',
@@ -319,10 +345,13 @@ module.exports = function PaginatorPlugin() {
319
345
  '.ids-paginator.ids-paginator-surface .ids-paginator__help-text': {
320
346
  color: 'var(--ids-comp-paginator-help-text-color-fg-surface-default)',
321
347
  },
322
- '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__page-button-container': {
348
+ '.ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__page-button-container': {
323
349
  display: 'none',
324
350
  },
325
- '.ids-paginator.ids-paginator-compact .ids-paginator__navigation-container .ids-paginator__help-text': { order: 2, marginLeft: '0' },
351
+ '.ids-paginator.ids-paginator-compact-layout .ids-paginator__navigation-container .ids-paginator__help-text': {
352
+ order: 2,
353
+ marginLeft: '0',
354
+ },
326
355
  };
327
356
 
328
357
  addComponents(cssObj);