@zywave/zui-table 4.0.0-pre.1 → 4.0.0-pre.2

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 (38) hide show
  1. package/demo/index.html +254 -13
  2. package/dist/css/zui-table.fouc.css +1 -1
  3. package/dist/custom-elements.json +25 -51
  4. package/dist/zui-table-cell-css.js +1 -1
  5. package/dist/zui-table-cell-css.js.map +1 -1
  6. package/dist/zui-table-cell.d.ts +7 -3
  7. package/dist/zui-table-cell.js +10 -3
  8. package/dist/zui-table-cell.js.map +1 -1
  9. package/dist/zui-table-css.js +1 -1
  10. package/dist/zui-table-css.js.map +1 -1
  11. package/dist/zui-table-footer-css.js +1 -1
  12. package/dist/zui-table-footer-css.js.map +1 -1
  13. package/dist/zui-table-row-css.js +1 -1
  14. package/dist/zui-table-row-css.js.map +1 -1
  15. package/dist/zui-table-row.d.ts +2 -7
  16. package/dist/zui-table-row.js +2 -7
  17. package/dist/zui-table-row.js.map +1 -1
  18. package/dist/zui-table-topbar-css.js +1 -1
  19. package/dist/zui-table-topbar-css.js.map +1 -1
  20. package/dist/zui-table.d.ts +4 -11
  21. package/dist/zui-table.js +4 -11
  22. package/dist/zui-table.js.map +1 -1
  23. package/lab.html +252 -13
  24. package/package.json +2 -2
  25. package/src/css/zui-table.fouc.scss +8 -0
  26. package/src/zui-table-cell-css.js +1 -1
  27. package/src/zui-table-cell.scss +13 -0
  28. package/src/zui-table-cell.ts +9 -3
  29. package/src/zui-table-css.js +1 -1
  30. package/src/zui-table-footer-css.js +1 -1
  31. package/src/zui-table-footer.scss +4 -0
  32. package/src/zui-table-row-css.js +1 -1
  33. package/src/zui-table-row.scss +4 -0
  34. package/src/zui-table-row.ts +2 -7
  35. package/src/zui-table-topbar-css.js +1 -1
  36. package/src/zui-table-topbar.scss +4 -0
  37. package/src/zui-table.scss +1 -0
  38. package/src/zui-table.ts +4 -11
package/demo/index.html CHANGED
@@ -5,6 +5,9 @@
5
5
  if (!customElements.get("zui-table")) {
6
6
  import("../dist/index.js");
7
7
  }
8
+ if (!customElements.get("zui-button")) {
9
+ import("../../zui-button/dist/index.js");
10
+ }
8
11
  if (!customElements.get("zui-pager")) {
9
12
  import("../../zui-pager/dist/index.js");
10
13
  }
@@ -51,14 +54,155 @@
51
54
  </zui-table>
52
55
  </section>
53
56
 
57
+ <section component="zui-table" heading="Table with 1-2 actions">
58
+ <zui-table columns="6">
59
+ <zui-table-row>
60
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
61
+ <zui-table-cell>Old Duke</zui-table-cell>
62
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
63
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
64
+ <zui-table-cell>67 years old</zui-table-cell>
65
+ <zui-table-cell action>
66
+ <zui-button class="secondary">Betray</zui-button>
67
+ </zui-table-cell>
68
+ </zui-table-row>
69
+ <zui-table-row>
70
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
71
+ <zui-table-cell>Red Duke</zui-table-cell>
72
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
73
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
74
+ <zui-table-cell>51 years old</zui-table-cell>
75
+ <zui-table-cell action>
76
+ <zui-button class="secondary">Betray</zui-button>
77
+ </zui-table-cell>
78
+ </zui-table-row>
79
+ <zui-table-row>
80
+ <zui-table-cell>Paul Atreides</zui-table-cell>
81
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
82
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
83
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
84
+ <zui-table-cell>43 years old</zui-table-cell>
85
+ <zui-table-cell action>
86
+ <zui-button class="secondary">Betray</zui-button>
87
+ </zui-table-cell>
88
+ </zui-table-row>
89
+ <zui-table-row>
90
+ <zui-table-cell>Alia Atreides</zui-table-cell>
91
+ <zui-table-cell>Imperial Regent</zui-table-cell>
92
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
93
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
94
+ <zui-table-cell>28 years old</zui-table-cell>
95
+ <zui-table-cell action>
96
+ <zui-button class="secondary">Betray</zui-button>
97
+ </zui-table-cell>
98
+ </zui-table-row>
99
+ <zui-table-row>
100
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
101
+ <zui-table-cell>God Emperor</zui-table-cell>
102
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
103
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
104
+ <zui-table-cell>3,521 years old</zui-table-cell>
105
+ <zui-table-cell action>
106
+ <zui-button class="secondary">Betray</zui-button>
107
+ </zui-table-cell>
108
+ </zui-table-row>
109
+ </zui-table>
110
+ </section>
111
+
112
+ <section component="zui-table" heading="Table with 3+ actions">
113
+ <zui-table columns="6">
114
+ <zui-table-row>
115
+ <zui-table-cell>Paulus Atreides</zui-table-cell>
116
+ <zui-table-cell>Old Duke</zui-table-cell>
117
+ <zui-table-cell>10,089 A.G.</zui-table-cell>
118
+ <zui-table-cell>10,156 A.G.</zui-table-cell>
119
+ <zui-table-cell>67 years old</zui-table-cell>
120
+ <zui-table-cell action>
121
+ <zui-button-dropdown type="icon secondary">
122
+ <zui-icon icon="zui-more"></zui-icon>
123
+ <button slot="option">Become ally</button>
124
+ <button slot="option">Betray</button>
125
+ <a href="#" slot="option">Poison</a>
126
+ <a href="#" slot="option">Warn</a>
127
+ </zui-button-dropdown>
128
+ </zui-table-cell>
129
+ </zui-table-row>
130
+ <zui-table-row>
131
+ <zui-table-cell>Leto Atreides I</zui-table-cell>
132
+ <zui-table-cell>Red Duke</zui-table-cell>
133
+ <zui-table-cell>10,140 A.G.</zui-table-cell>
134
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
135
+ <zui-table-cell>51 years old</zui-table-cell>
136
+ <zui-table-cell action>
137
+ <zui-button-dropdown type="icon secondary">
138
+ <zui-icon icon="zui-more"></zui-icon>
139
+ <button slot="option">Become ally</button>
140
+ <button slot="option">Betray</button>
141
+ <a href="#" slot="option">Poison</a>
142
+ <a href="#" slot="option">Warn</a>
143
+ </zui-button-dropdown>
144
+ </zui-table-cell>
145
+ </zui-table-row>
146
+ <zui-table-row>
147
+ <zui-table-cell>Paul Atreides</zui-table-cell>
148
+ <zui-table-cell>Padishah Emperor</zui-table-cell>
149
+ <zui-table-cell>10,176 A.G.</zui-table-cell>
150
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
151
+ <zui-table-cell>43 years old</zui-table-cell>
152
+ <zui-table-cell action>
153
+ <zui-button-dropdown type="icon secondary">
154
+ <zui-icon icon="zui-more"></zui-icon>
155
+ <button slot="option">Become ally</button>
156
+ <button slot="option">Betray</button>
157
+ <a href="#" slot="option">Poison</a>
158
+ <a href="#" slot="option">Warn</a>
159
+ </zui-button-dropdown>
160
+ </zui-table-cell>
161
+ </zui-table-row>
162
+ <zui-table-row>
163
+ <zui-table-cell>Alia Atreides</zui-table-cell>
164
+ <zui-table-cell>Imperial Regent</zui-table-cell>
165
+ <zui-table-cell>10,191 A.G.</zui-table-cell>
166
+ <zui-table-cell>10,219 A.G.</zui-table-cell>
167
+ <zui-table-cell>28 years old</zui-table-cell>
168
+ <zui-table-cell action>
169
+ <zui-button-dropdown type="icon secondary">
170
+ <zui-icon icon="zui-more"></zui-icon>
171
+ <button slot="option">Become ally</button>
172
+ <button slot="option">Betray</button>
173
+ <a href="#" slot="option">Poison</a>
174
+ <a href="#" slot="option">Warn</a>
175
+ </zui-button-dropdown>
176
+ </zui-table-cell>
177
+ </zui-table-row>
178
+ <zui-table-row>
179
+ <zui-table-cell>Leto Atreides II</zui-table-cell>
180
+ <zui-table-cell>God Emperor</zui-table-cell>
181
+ <zui-table-cell>10,207 A.G.</zui-table-cell>
182
+ <zui-table-cell>13,728 A.G.</zui-table-cell>
183
+ <zui-table-cell>3,521 years old</zui-table-cell>
184
+ <zui-table-cell action>
185
+ <zui-button-dropdown type="icon secondary">
186
+ <zui-icon icon="zui-more"></zui-icon>
187
+ <button slot="option">Become ally</button>
188
+ <button slot="option">Betray</button>
189
+ <a href="#" slot="option">Poison</a>
190
+ <a href="#" slot="option">Warn</a>
191
+ </zui-button-dropdown>
192
+ </zui-table-cell>
193
+ </zui-table-row>
194
+ </zui-table>
195
+ </section>
196
+
54
197
  <section component="zui-table" heading="Table with row headers">
55
- <zui-table columns="5">
198
+ <zui-table columns="6">
56
199
  <zui-table-row header>
57
200
  <zui-table-cell>Name</zui-table-cell>
58
201
  <zui-table-cell>Title</zui-table-cell>
59
202
  <zui-table-cell>Born</zui-table-cell>
60
203
  <zui-table-cell>Died</zui-table-cell>
61
204
  <zui-table-cell>Age</zui-table-cell>
205
+ <zui-table-cell>Action</zui-table-cell>
62
206
  </zui-table-row>
63
207
  <zui-table-row>
64
208
  <zui-table-cell>Paulus Atreides</zui-table-cell>
@@ -66,6 +210,9 @@
66
210
  <zui-table-cell>10,089 A.G.</zui-table-cell>
67
211
  <zui-table-cell>10,156 A.G.</zui-table-cell>
68
212
  <zui-table-cell>67 years old</zui-table-cell>
213
+ <zui-table-cell action>
214
+ <zui-button class="secondary">Betray</zui-button>
215
+ </zui-table-cell>
69
216
  </zui-table-row>
70
217
  <zui-table-row>
71
218
  <zui-table-cell>Leto Atreides I</zui-table-cell>
@@ -73,6 +220,9 @@
73
220
  <zui-table-cell>10,140 A.G.</zui-table-cell>
74
221
  <zui-table-cell>10,191 A.G.</zui-table-cell>
75
222
  <zui-table-cell>51 years old</zui-table-cell>
223
+ <zui-table-cell action>
224
+ <zui-button class="secondary">Betray</zui-button>
225
+ </zui-table-cell>
76
226
  </zui-table-row>
77
227
  <zui-table-row>
78
228
  <zui-table-cell>Paul Atreides</zui-table-cell>
@@ -80,6 +230,9 @@
80
230
  <zui-table-cell>10,176 A.G.</zui-table-cell>
81
231
  <zui-table-cell>10,219 A.G.</zui-table-cell>
82
232
  <zui-table-cell>43 years old</zui-table-cell>
233
+ <zui-table-cell action>
234
+ <zui-button class="secondary">Betray</zui-button>
235
+ </zui-table-cell>
83
236
  </zui-table-row>
84
237
  <zui-table-row>
85
238
  <zui-table-cell>Alia Atreides</zui-table-cell>
@@ -87,6 +240,9 @@
87
240
  <zui-table-cell>10,191 A.G.</zui-table-cell>
88
241
  <zui-table-cell>10,219 A.G.</zui-table-cell>
89
242
  <zui-table-cell>28 years old</zui-table-cell>
243
+ <zui-table-cell action>
244
+ <zui-button class="secondary">Betray</zui-button>
245
+ </zui-table-cell>
90
246
  </zui-table-row>
91
247
  <zui-table-row>
92
248
  <zui-table-cell>Leto Atreides II</zui-table-cell>
@@ -94,18 +250,22 @@
94
250
  <zui-table-cell>10,207 A.G.</zui-table-cell>
95
251
  <zui-table-cell>13,728 A.G.</zui-table-cell>
96
252
  <zui-table-cell>3,521 years old</zui-table-cell>
253
+ <zui-table-cell action>
254
+ <zui-button class="secondary">Betray</zui-button>
255
+ </zui-table-cell>
97
256
  </zui-table-row>
98
257
  </zui-table>
99
258
  </section>
100
259
 
101
260
  <section component="zui-table" heading="Table with summary row">
102
- <zui-table columns="5">
261
+ <zui-table columns="6">
103
262
  <zui-table-row header>
104
263
  <zui-table-cell>Name</zui-table-cell>
105
264
  <zui-table-cell>Title</zui-table-cell>
106
265
  <zui-table-cell>Born</zui-table-cell>
107
266
  <zui-table-cell>Died</zui-table-cell>
108
267
  <zui-table-cell>Age</zui-table-cell>
268
+ <zui-table-cell>Action</zui-table-cell>
109
269
  </zui-table-row>
110
270
  <zui-table-row>
111
271
  <zui-table-cell>Paulus Atreides</zui-table-cell>
@@ -113,6 +273,9 @@
113
273
  <zui-table-cell>10,089 A.G.</zui-table-cell>
114
274
  <zui-table-cell>10,156 A.G.</zui-table-cell>
115
275
  <zui-table-cell>67 years old</zui-table-cell>
276
+ <zui-table-cell action>
277
+ <zui-button class="secondary">Betray</zui-button>
278
+ </zui-table-cell>
116
279
  </zui-table-row>
117
280
  <zui-table-row>
118
281
  <zui-table-cell>Leto Atreides I</zui-table-cell>
@@ -120,6 +283,9 @@
120
283
  <zui-table-cell>10,140 A.G.</zui-table-cell>
121
284
  <zui-table-cell>10,191 A.G.</zui-table-cell>
122
285
  <zui-table-cell>51 years old</zui-table-cell>
286
+ <zui-table-cell action>
287
+ <zui-button class="secondary">Betray</zui-button>
288
+ </zui-table-cell>
123
289
  </zui-table-row>
124
290
  <zui-table-row>
125
291
  <zui-table-cell>Paul Atreides</zui-table-cell>
@@ -127,6 +293,9 @@
127
293
  <zui-table-cell>10,176 A.G.</zui-table-cell>
128
294
  <zui-table-cell>10,219 A.G.</zui-table-cell>
129
295
  <zui-table-cell>43 years old</zui-table-cell>
296
+ <zui-table-cell action>
297
+ <zui-button class="secondary">Betray</zui-button>
298
+ </zui-table-cell>
130
299
  </zui-table-row>
131
300
  <zui-table-row>
132
301
  <zui-table-cell>Alia Atreides</zui-table-cell>
@@ -134,6 +303,9 @@
134
303
  <zui-table-cell>10,191 A.G.</zui-table-cell>
135
304
  <zui-table-cell>10,219 A.G.</zui-table-cell>
136
305
  <zui-table-cell>28 years old</zui-table-cell>
306
+ <zui-table-cell action>
307
+ <zui-button class="secondary">Betray</zui-button>
308
+ </zui-table-cell>
137
309
  </zui-table-row>
138
310
  <zui-table-row>
139
311
  <zui-table-cell>Leto Atreides II</zui-table-cell>
@@ -141,9 +313,12 @@
141
313
  <zui-table-cell>10,207 A.G.</zui-table-cell>
142
314
  <zui-table-cell>13,728 A.G.</zui-table-cell>
143
315
  <zui-table-cell>3,521 years old</zui-table-cell>
316
+ <zui-table-cell action>
317
+ <zui-button class="secondary">Betray</zui-button>
318
+ </zui-table-cell>
144
319
  </zui-table-row>
145
320
  <zui-table-row summary>
146
- <zui-table-cell span="5" style="text-align: right;">
321
+ <zui-table-cell span="6" style="text-align: right;">
147
322
  Average lifespan: 742 years
148
323
  </zui-table-cell>
149
324
  </zui-table-row>
@@ -151,7 +326,7 @@
151
326
  </section>
152
327
 
153
328
  <section component="zui-table" heading="Table topbar with search and counter">
154
- <zui-table columns="5">
329
+ <zui-table columns="6">
155
330
  <zui-table-topbar>
156
331
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
157
332
  <div slot="counter">5 family members</div>
@@ -162,6 +337,7 @@
162
337
  <zui-table-cell>Born</zui-table-cell>
163
338
  <zui-table-cell>Died</zui-table-cell>
164
339
  <zui-table-cell>Age</zui-table-cell>
340
+ <zui-table-cell>Action</zui-table-cell>
165
341
  </zui-table-row>
166
342
  <zui-table-row>
167
343
  <zui-table-cell>Paulus Atreides</zui-table-cell>
@@ -169,6 +345,9 @@
169
345
  <zui-table-cell>10,089 A.G.</zui-table-cell>
170
346
  <zui-table-cell>10,156 A.G.</zui-table-cell>
171
347
  <zui-table-cell>67 years old</zui-table-cell>
348
+ <zui-table-cell action>
349
+ <zui-button class="secondary">Betray</zui-button>
350
+ </zui-table-cell>
172
351
  </zui-table-row>
173
352
  <zui-table-row>
174
353
  <zui-table-cell>Leto Atreides I</zui-table-cell>
@@ -176,6 +355,9 @@
176
355
  <zui-table-cell>10,140 A.G.</zui-table-cell>
177
356
  <zui-table-cell>10,191 A.G.</zui-table-cell>
178
357
  <zui-table-cell>51 years old</zui-table-cell>
358
+ <zui-table-cell action>
359
+ <zui-button class="secondary">Betray</zui-button>
360
+ </zui-table-cell>
179
361
  </zui-table-row>
180
362
  <zui-table-row>
181
363
  <zui-table-cell>Paul Atreides</zui-table-cell>
@@ -183,6 +365,9 @@
183
365
  <zui-table-cell>10,176 A.G.</zui-table-cell>
184
366
  <zui-table-cell>10,219 A.G.</zui-table-cell>
185
367
  <zui-table-cell>43 years old</zui-table-cell>
368
+ <zui-table-cell action>
369
+ <zui-button class="secondary">Betray</zui-button>
370
+ </zui-table-cell>
186
371
  </zui-table-row>
187
372
  <zui-table-row>
188
373
  <zui-table-cell>Alia Atreides</zui-table-cell>
@@ -190,6 +375,9 @@
190
375
  <zui-table-cell>10,191 A.G.</zui-table-cell>
191
376
  <zui-table-cell>10,219 A.G.</zui-table-cell>
192
377
  <zui-table-cell>28 years old</zui-table-cell>
378
+ <zui-table-cell action>
379
+ <zui-button class="secondary">Betray</zui-button>
380
+ </zui-table-cell>
193
381
  </zui-table-row>
194
382
  <zui-table-row>
195
383
  <zui-table-cell>Leto Atreides II</zui-table-cell>
@@ -197,9 +385,12 @@
197
385
  <zui-table-cell>10,207 A.G.</zui-table-cell>
198
386
  <zui-table-cell>13,728 A.G.</zui-table-cell>
199
387
  <zui-table-cell>3,521 years old</zui-table-cell>
388
+ <zui-table-cell action>
389
+ <zui-button class="secondary">Betray</zui-button>
390
+ </zui-table-cell>
200
391
  </zui-table-row>
201
392
  <zui-table-row summary>
202
- <zui-table-cell span="5" style="text-align: right;">
393
+ <zui-table-cell span="6" style="text-align: right;">
203
394
  Average lifespan: 742 years
204
395
  </zui-table-cell>
205
396
  </zui-table-row>
@@ -207,7 +398,7 @@
207
398
  </section>
208
399
 
209
400
  <section component="zui-table" heading="Table topbar with search, counter, and actions">
210
- <zui-table columns="5">
401
+ <zui-table columns="6">
211
402
  <zui-table-topbar>
212
403
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
213
404
  <div slot="counter">5 family members</div>
@@ -220,6 +411,7 @@
220
411
  <zui-table-cell>Born</zui-table-cell>
221
412
  <zui-table-cell>Died</zui-table-cell>
222
413
  <zui-table-cell>Age</zui-table-cell>
414
+ <zui-table-cell>Action</zui-table-cell>
223
415
  </zui-table-row>
224
416
  <zui-table-row>
225
417
  <zui-table-cell>Paulus Atreides</zui-table-cell>
@@ -227,6 +419,9 @@
227
419
  <zui-table-cell>10,089 A.G.</zui-table-cell>
228
420
  <zui-table-cell>10,156 A.G.</zui-table-cell>
229
421
  <zui-table-cell>67 years old</zui-table-cell>
422
+ <zui-table-cell action>
423
+ <zui-button class="secondary">Betray</zui-button>
424
+ </zui-table-cell>
230
425
  </zui-table-row>
231
426
  <zui-table-row>
232
427
  <zui-table-cell>Leto Atreides I</zui-table-cell>
@@ -234,6 +429,9 @@
234
429
  <zui-table-cell>10,140 A.G.</zui-table-cell>
235
430
  <zui-table-cell>10,191 A.G.</zui-table-cell>
236
431
  <zui-table-cell>51 years old</zui-table-cell>
432
+ <zui-table-cell action>
433
+ <zui-button class="secondary">Betray</zui-button>
434
+ </zui-table-cell>
237
435
  </zui-table-row>
238
436
  <zui-table-row>
239
437
  <zui-table-cell>Paul Atreides</zui-table-cell>
@@ -241,6 +439,9 @@
241
439
  <zui-table-cell>10,176 A.G.</zui-table-cell>
242
440
  <zui-table-cell>10,219 A.G.</zui-table-cell>
243
441
  <zui-table-cell>43 years old</zui-table-cell>
442
+ <zui-table-cell action>
443
+ <zui-button class="secondary">Betray</zui-button>
444
+ </zui-table-cell>
244
445
  </zui-table-row>
245
446
  <zui-table-row>
246
447
  <zui-table-cell>Alia Atreides</zui-table-cell>
@@ -248,6 +449,9 @@
248
449
  <zui-table-cell>10,191 A.G.</zui-table-cell>
249
450
  <zui-table-cell>10,219 A.G.</zui-table-cell>
250
451
  <zui-table-cell>28 years old</zui-table-cell>
452
+ <zui-table-cell action>
453
+ <zui-button class="secondary">Betray</zui-button>
454
+ </zui-table-cell>
251
455
  </zui-table-row>
252
456
  <zui-table-row>
253
457
  <zui-table-cell>Leto Atreides II</zui-table-cell>
@@ -255,9 +459,12 @@
255
459
  <zui-table-cell>10,207 A.G.</zui-table-cell>
256
460
  <zui-table-cell>13,728 A.G.</zui-table-cell>
257
461
  <zui-table-cell>3,521 years old</zui-table-cell>
462
+ <zui-table-cell action>
463
+ <zui-button class="secondary">Betray</zui-button>
464
+ </zui-table-cell>
258
465
  </zui-table-row>
259
466
  <zui-table-row summary>
260
- <zui-table-cell span="5" style="text-align: right;">
467
+ <zui-table-cell span="6" style="text-align: right;">
261
468
  Average lifespan: 742 years
262
469
  </zui-table-cell>
263
470
  </zui-table-row>
@@ -265,7 +472,7 @@
265
472
  </section>
266
473
 
267
474
  <section component="zui-table" heading="Table with footer">
268
- <zui-table columns="5">
475
+ <zui-table columns="6">
269
476
  <zui-table-topbar>
270
477
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
271
478
  <div slot="counter">5 family members</div>
@@ -278,6 +485,7 @@
278
485
  <zui-table-cell>Born</zui-table-cell>
279
486
  <zui-table-cell>Died</zui-table-cell>
280
487
  <zui-table-cell>Age</zui-table-cell>
488
+ <zui-table-cell>Action</zui-table-cell>
281
489
  </zui-table-row>
282
490
  <zui-table-row>
283
491
  <zui-table-cell>Paulus Atreides</zui-table-cell>
@@ -285,6 +493,9 @@
285
493
  <zui-table-cell>10,089 A.G.</zui-table-cell>
286
494
  <zui-table-cell>10,156 A.G.</zui-table-cell>
287
495
  <zui-table-cell>67 years old</zui-table-cell>
496
+ <zui-table-cell action>
497
+ <zui-button class="secondary">Betray</zui-button>
498
+ </zui-table-cell>
288
499
  </zui-table-row>
289
500
  <zui-table-row>
290
501
  <zui-table-cell>Leto Atreides I</zui-table-cell>
@@ -292,6 +503,9 @@
292
503
  <zui-table-cell>10,140 A.G.</zui-table-cell>
293
504
  <zui-table-cell>10,191 A.G.</zui-table-cell>
294
505
  <zui-table-cell>51 years old</zui-table-cell>
506
+ <zui-table-cell action>
507
+ <zui-button class="secondary">Betray</zui-button>
508
+ </zui-table-cell>
295
509
  </zui-table-row>
296
510
  <zui-table-row>
297
511
  <zui-table-cell>Paul Atreides</zui-table-cell>
@@ -299,6 +513,9 @@
299
513
  <zui-table-cell>10,176 A.G.</zui-table-cell>
300
514
  <zui-table-cell>10,219 A.G.</zui-table-cell>
301
515
  <zui-table-cell>43 years old</zui-table-cell>
516
+ <zui-table-cell action>
517
+ <zui-button class="secondary">Betray</zui-button>
518
+ </zui-table-cell>
302
519
  </zui-table-row>
303
520
  <zui-table-row>
304
521
  <zui-table-cell>Alia Atreides</zui-table-cell>
@@ -306,6 +523,9 @@
306
523
  <zui-table-cell>10,191 A.G.</zui-table-cell>
307
524
  <zui-table-cell>10,219 A.G.</zui-table-cell>
308
525
  <zui-table-cell>28 years old</zui-table-cell>
526
+ <zui-table-cell action>
527
+ <zui-button class="secondary">Betray</zui-button>
528
+ </zui-table-cell>
309
529
  </zui-table-row>
310
530
  <zui-table-row>
311
531
  <zui-table-cell>Leto Atreides II</zui-table-cell>
@@ -313,9 +533,12 @@
313
533
  <zui-table-cell>10,207 A.G.</zui-table-cell>
314
534
  <zui-table-cell>13,728 A.G.</zui-table-cell>
315
535
  <zui-table-cell>3,521 years old</zui-table-cell>
536
+ <zui-table-cell action>
537
+ <zui-button class="secondary">Betray</zui-button>
538
+ </zui-table-cell>
316
539
  </zui-table-row>
317
540
  <zui-table-row summary>
318
- <zui-table-cell span="5" style="text-align: right;">
541
+ <zui-table-cell span="6" style="text-align: right;">
319
542
  Average lifespan: 742 years
320
543
  </zui-table-cell>
321
544
  </zui-table-row>
@@ -326,7 +549,7 @@
326
549
  </section>
327
550
 
328
551
  <section component="zui-table" heading="No results table with simple custom message">
329
- <zui-table columns="5" no-results>
552
+ <zui-table columns="6" no-results>
330
553
  <zui-table-topbar>
331
554
  <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
332
555
  <div slot="counter">0 family members</div>
@@ -339,6 +562,7 @@
339
562
  <zui-table-cell>Born</zui-table-cell>
340
563
  <zui-table-cell>Died</zui-table-cell>
341
564
  <zui-table-cell>Age</zui-table-cell>
565
+ <zui-table-cell>Action</zui-table-cell>
342
566
  </zui-table-row>
343
567
  <div slot="no-results-message" class="zui font-weight-semibold">No results found for "Spongebob Squarepants"</div>
344
568
  <zui-table-footer>
@@ -348,7 +572,7 @@
348
572
  </section>
349
573
 
350
574
  <section component="zui-table" heading="No results table with elaborate custom message">
351
- <zui-table columns="5" no-results>
575
+ <zui-table columns="6" no-results>
352
576
  <zui-table-topbar>
353
577
  <zui-search placeholder="Search for a family member" value="Spongebob Squarepants" no-submit></zui-search>
354
578
  <div slot="counter">0 family members</div>
@@ -361,6 +585,7 @@
361
585
  <zui-table-cell>Born</zui-table-cell>
362
586
  <zui-table-cell>Died</zui-table-cell>
363
587
  <zui-table-cell>Age</zui-table-cell>
588
+ <zui-table-cell>Action</zui-table-cell>
364
589
  </zui-table-row>
365
590
  <div slot="no-results-message" style="text-align: center;">
366
591
  <div style="font-size: 2rem; margin-bottom: 0.5em;">¯\_(ツ)_/¯</div>
@@ -374,7 +599,7 @@
374
599
  </section>
375
600
 
376
601
  <section component="zui-table" heading="Table with banded rows">
377
- <zui-table columns="5" banded>
602
+ <zui-table columns="6" banded>
378
603
  <zui-table-topbar>
379
604
  <zui-search placeholder="Search for a family member" no-submit></zui-search>
380
605
  <div slot="counter">5 family members</div>
@@ -387,6 +612,7 @@
387
612
  <zui-table-cell>Born</zui-table-cell>
388
613
  <zui-table-cell>Died</zui-table-cell>
389
614
  <zui-table-cell>Age</zui-table-cell>
615
+ <zui-table-cell>Action</zui-table-cell>
390
616
  </zui-table-row>
391
617
  <zui-table-row>
392
618
  <zui-table-cell>Paulus Atreides</zui-table-cell>
@@ -394,6 +620,9 @@
394
620
  <zui-table-cell>10,089 A.G.</zui-table-cell>
395
621
  <zui-table-cell>10,156 A.G.</zui-table-cell>
396
622
  <zui-table-cell>67 years old</zui-table-cell>
623
+ <zui-table-cell action>
624
+ <zui-button class="secondary">Betray</zui-button>
625
+ </zui-table-cell>
397
626
  </zui-table-row>
398
627
  <zui-table-row>
399
628
  <zui-table-cell>Leto Atreides I</zui-table-cell>
@@ -401,6 +630,9 @@
401
630
  <zui-table-cell>10,140 A.G.</zui-table-cell>
402
631
  <zui-table-cell>10,191 A.G.</zui-table-cell>
403
632
  <zui-table-cell>51 years old</zui-table-cell>
633
+ <zui-table-cell action>
634
+ <zui-button class="secondary">Betray</zui-button>
635
+ </zui-table-cell>
404
636
  </zui-table-row>
405
637
  <zui-table-row>
406
638
  <zui-table-cell>Paul Atreides</zui-table-cell>
@@ -408,6 +640,9 @@
408
640
  <zui-table-cell>10,176 A.G.</zui-table-cell>
409
641
  <zui-table-cell>10,219 A.G.</zui-table-cell>
410
642
  <zui-table-cell>43 years old</zui-table-cell>
643
+ <zui-table-cell action>
644
+ <zui-button class="secondary">Betray</zui-button>
645
+ </zui-table-cell>
411
646
  </zui-table-row>
412
647
  <zui-table-row>
413
648
  <zui-table-cell>Alia Atreides</zui-table-cell>
@@ -415,6 +650,9 @@
415
650
  <zui-table-cell>10,191 A.G.</zui-table-cell>
416
651
  <zui-table-cell>10,219 A.G.</zui-table-cell>
417
652
  <zui-table-cell>28 years old</zui-table-cell>
653
+ <zui-table-cell action>
654
+ <zui-button class="secondary">Betray</zui-button>
655
+ </zui-table-cell>
418
656
  </zui-table-row>
419
657
  <zui-table-row>
420
658
  <zui-table-cell>Leto Atreides II</zui-table-cell>
@@ -422,9 +660,12 @@
422
660
  <zui-table-cell>10,207 A.G.</zui-table-cell>
423
661
  <zui-table-cell>13,728 A.G.</zui-table-cell>
424
662
  <zui-table-cell>3,521 years old</zui-table-cell>
663
+ <zui-table-cell action>
664
+ <zui-button class="secondary">Betray</zui-button>
665
+ </zui-table-cell>
425
666
  </zui-table-row>
426
667
  <zui-table-row summary>
427
- <zui-table-cell span="5" style="text-align: right;">
668
+ <zui-table-cell span="6" style="text-align: right;">
428
669
  Average lifespan: 742 years
429
670
  </zui-table-cell>
430
671
  </zui-table-row>
package/dist/css/zui-table.fouc.css CHANGED
@@ -1 +1 @@
1
- zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}zui-table:not(:defined) [slot=topbar]{display:flex;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table:not(:defined) [slot=footer]{margin-top:.625rem}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table-topbar:not(:defined) [slot=counter]{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}zui-table-topbar:not(:defined) [slot=action]{margin-left:.625rem}zui-table-topbar:not(:defined) [slot=action] zui-button:not(:first-of-type){margin-left:.625rem}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;background-color:#fff}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}zui-table-row[header]:not(:defined) zui-table-cell{font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:1px solid var(--zui-gray-100)}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}
1
+ zui-table:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:block;width:100%;box-shadow:0 1px 3px rgba(0,0,0,.29);border-collapse:collapse;border-spacing:0}zui-table:not(:defined) [slot=topbar]{display:flex;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table:not(:defined) [slot=footer]{margin-top:.625rem}zui-table:not(:defined) [slot=no-results-message]{display:none}zui-table:not(:defined) *,zui-table:not(:defined) *::before,zui-table:not(:defined) *::after{box-sizing:inherit}zui-table[banded]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[banded]:not(:defined) zui-table-row:not([header]):nth-child(even){background-color:var(--zui-gray-25)}zui-table[banded]:not(:defined) zui-table-row:not([header]){border:0}zui-table[banded]:not(:defined) *,zui-table[banded]:not(:defined) *::before,zui-table[banded]:not(:defined) *::after{box-sizing:inherit}zui-table[no-results]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%}zui-table[no-results]:not(:defined) [slot=no-results-message]{display:block;padding:.75rem 1.25rem}zui-table[no-results]:not(:defined) *,zui-table[no-results]:not(:defined) *::before,zui-table[no-results]:not(:defined) *::after{box-sizing:inherit}zui-table-topbar:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;width:100%;min-height:3.75rem;align-items:center;padding:.625rem 1.25rem;background-color:var(--zui-gray-25)}zui-table-topbar:not(:defined) [slot=counter]{flex-shrink:0;margin-left:auto;padding-left:.625rem;font-size:.75rem;color:var(--zui-gray-400)}zui-table-topbar:not(:defined) [slot=action]{margin-left:.625rem}zui-table-topbar:not(:defined) [slot=action] zui-button:not(:first-of-type){margin-left:.625rem}zui-table-topbar:not(:defined) *,zui-table-topbar:not(:defined) *::before,zui-table-topbar:not(:defined) *::after{box-sizing:inherit}zui-table-row:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;background-color:#fff}zui-table-row:not(:defined) *,zui-table-row:not(:defined) *::before,zui-table-row:not(:defined) *::after{box-sizing:inherit}zui-table-row[header]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:#fff;border-bottom:1px solid var(--zui-gray-200)}zui-table-row[header]:not(:defined) zui-table-cell{font-weight:600}zui-table-row[header]:not(:defined) *,zui-table-row[header]:not(:defined) *::before,zui-table-row[header]:not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:1px solid var(--zui-gray-100)}zui-table-row:not([header]):not(:defined) *,zui-table-row:not([header]):not(:defined) *::before,zui-table-row:not([header]):not(:defined) *::after{box-sizing:inherit}zui-table-row:not([header]):last-of-type:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;border-bottom:0}zui-table-row:not([header]):last-of-type:not(:defined) *,zui-table-row:not([header]):last-of-type:not(:defined) *::before,zui-table-row:not([header]):last-of-type:not(:defined) *::after{box-sizing:inherit}zui-table-row[summary]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;background-color:var(--zui-table-summary-background-color, var(--zui-gray-600)) !important}zui-table-row[summary]:not(:defined) zui-table-cell{font-weight:600;color:var(--zui-table-summary-text-color, #fff)}zui-table-row[summary]:not(:defined) *,zui-table-row[summary]:not(:defined) *::before,zui-table-row[summary]:not(:defined) *::after{box-sizing:inherit}zui-table-cell:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;flex-grow:1;flex-basis:0;padding:var(--zui-table-cell-padding, 0.8125rem 1.25rem)}zui-table-cell:not(:defined) *,zui-table-cell:not(:defined) *::before,zui-table-cell:not(:defined) *::after{box-sizing:inherit}zui-table-cell[action]:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;--zui-table-cell-padding: 0.375rem 1.25rem;display:flex;align-items:center}zui-table-cell[action]:not(:defined) *,zui-table-cell[action]:not(:defined) *::before,zui-table-cell[action]:not(:defined) *::after{box-sizing:inherit}zui-table-footer:not(:defined){font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:var(--zui-font-size, 0.875rem);font-weight:400;line-height:var(--zui-line-height, 1.6);box-sizing:border-box;-webkit-text-size-adjust:100%;display:flex;justify-content:center;align-items:center;margin-top:var(--zui-table-footer-margin, 0.625rem)}zui-table-footer:not(:defined) zui-pager{width:100%}zui-table-footer:not(:defined) *,zui-table-footer:not(:defined) *::before,zui-table-footer:not(:defined) *::after{box-sizing:inherit}