@triptease/stylesheet 2.1.2 → 2.1.4

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 (8) hide show
  1. package/dist/base.css +1 -1
  2. package/dist/blocks.css +56 -52
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +1 -1
  5. package/dist/lit/triptease.js +56 -52
  6. package/dist/triptease.css +56 -52
  7. package/dist/utilities.css +1 -1
  8. package/package.json +1 -1
package/dist/base.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.2
2
+ * @triptease/stylesheet v2.1.4
3
3
  */
4
4
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
5
5
  @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
package/dist/blocks.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.2
2
+ * @triptease/stylesheet v2.1.4
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -299,71 +299,75 @@ header[data-theme='top-nav'] {
299
299
  }
300
300
 
301
301
  @layer blocks {
302
+
302
303
  table {
303
- width: 100%;
304
- border: 1px solid var(--color-surface-500);
304
+ width: 100%;
305
+ border: 1px solid var(--color-surface-500);
306
+ line-height: var(--font-line-height-200);
307
+ color: var(--color-text-400);
305
308
  }
309
+
306
310
  thead {
307
- background-color: var(--color-surface-300);
308
- color: var(--color-text-400);
311
+ background-color: var(--color-surface-300);
312
+ color: var(--color-text-400);
309
313
  }
310
314
 
311
315
  th {
312
- padding: var(--space-scale-1);
313
- text-align: right;
314
-
315
- &:first-child {
316
316
  text-align: left;
317
- }
318
-
319
- &[data-sort-key] {
320
- cursor: pointer;
321
-
322
- &::after {
323
- content: "";
324
- display: inline-block;
325
- width: 1em;
326
- height: 1em;
327
- vertical-align: middle;
328
- margin-inline-start: 0.25em;
329
- background-color: currentColor;
330
- -webkit-mask-size: contain;
331
- mask-size: contain;
332
- -webkit-mask-repeat: no-repeat;
333
- mask-repeat: no-repeat;
334
- -webkit-mask-position: center;
335
- mask-position: center;
336
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.5 4.707C15.914 4.707 16.25 5.043 16.25 5.457V17.147l1.22-1.22a.75.75 0 0 1 1.06 1.06L15.5 20.018l-3.03-3.03a.75.75 0 0 1 1.06-1.06l1.22 1.22V5.457c0-.414.336-.75.75-.75ZM11.53 7.427a.75.75 0 0 1-1.06 1.06L9.25 7.268V18.957a.75.75 0 0 1-1.5 0V7.268L6.53 8.487a.75.75 0 0 1-1.06-1.06L8.5 4.396l3.03 3.03Z' fill='white'/%3E%3C/svg%3E");
337
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.5 4.707C15.914 4.707 16.25 5.043 16.25 5.457V17.147l1.22-1.22a.75.75 0 0 1 1.06 1.06L15.5 20.018l-3.03-3.03a.75.75 0 0 1 1.06-1.06l1.22 1.22V5.457c0-.414.336-.75.75-.75ZM11.53 7.427a.75.75 0 0 1-1.06 1.06L9.25 7.268V18.957a.75.75 0 0 1-1.5 0V7.268L6.53 8.487a.75.75 0 0 1-1.06-1.06L8.5 4.396l3.03 3.03Z' fill='white'/%3E%3C/svg%3E");
317
+ padding: var(--space-scale-2);
318
+ border: 1px solid var(--color-border-200);
319
+
320
+ &[data-sort-key] {
321
+ cursor: pointer;
322
+
323
+ & button {
324
+ all: unset;
325
+ cursor: pointer;
326
+
327
+ &:focus-visible {
328
+ outline: 4px solid rgba(1, 150, 237, 0.24);
329
+ outline-offset: 2px;
330
+ }
331
+ }
332
+
333
+ &::before {
334
+ display: none;
335
+ content: '';
336
+ width: var(--font-size-200);
337
+ height: var(--font-size-200);
338
+ vertical-align: -0.1em;
339
+ background-color: currentColor;
340
+ -webkit-mask-size: contain;
341
+ mask-size: contain;
342
+ -webkit-mask-repeat: no-repeat;
343
+ mask-repeat: no-repeat;
344
+ -webkit-mask-position: center;
345
+ mask-position: center;
346
+ margin-right: var(--space-scale-1);
347
+ }
338
348
  }
339
- }
340
349
 
341
- &[aria-sort="ascending"]::after {
342
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
343
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
344
- }
350
+ &[aria-sort='ascending']::before {
351
+ display: inline-block;
352
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
353
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
354
+ }
345
355
 
346
- &[aria-sort="descending"]::after {
347
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
348
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
349
- }
356
+ &[aria-sort='descending']::before {
357
+ display: inline-block;
358
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
359
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
360
+ }
350
361
  }
351
362
 
352
363
  td {
353
- padding: var(--space-scale-1);
354
- text-align: right;
355
- vertical-align: middle;
356
-
357
- &:first-child {
364
+ padding: var(--space-scale-2);
358
365
  text-align: left;
359
- }
360
- }
366
+ vertical-align: middle;
367
+ border: 1px solid var(--color-border-200);
361
368
 
362
- tr {
363
- border-top: 1px solid var(--color-surface-500);
364
- border-bottom: 1px solid var(--color-surface-500);
365
- }
366
-
367
- tfoot {
369
+ &:first-child {
370
+ text-align: left;
371
+ }
368
372
  }
369
373
  }
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.2
2
+ * @triptease/stylesheet v2.1.4
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/exceptions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.2
2
+ * @triptease/stylesheet v2.1.4
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/dist/lit/triptease.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import { css } from 'lit';
2
2
  export const styles = css`/*
3
- * @triptease/stylesheet v2.1.2
3
+ * @triptease/stylesheet v2.1.4
4
4
  */
5
5
 
6
6
 
@@ -1333,72 +1333,76 @@ header[data-theme='top-nav'] {
1333
1333
  }
1334
1334
  }
1335
1335
  @layer blocks{
1336
+
1336
1337
  table {
1337
- width: 100%;
1338
- border: 1px solid var(--color-surface-500);
1338
+ width: 100%;
1339
+ border: 1px solid var(--color-surface-500);
1340
+ line-height: var(--font-line-height-200);
1341
+ color: var(--color-text-400);
1339
1342
  }
1343
+
1340
1344
  thead {
1341
- background-color: var(--color-surface-300);
1342
- color: var(--color-text-400);
1345
+ background-color: var(--color-surface-300);
1346
+ color: var(--color-text-400);
1343
1347
  }
1344
1348
 
1345
1349
  th {
1346
- padding: var(--space-scale-1);
1347
- text-align: right;
1348
-
1349
- &:first-child {
1350
1350
  text-align: left;
1351
- }
1352
-
1353
- &[data-sort-key] {
1354
- cursor: pointer;
1355
-
1356
- &::after {
1357
- content: "";
1358
- display: inline-block;
1359
- width: 1em;
1360
- height: 1em;
1361
- vertical-align: middle;
1362
- margin-inline-start: 0.25em;
1363
- background-color: currentColor;
1364
- -webkit-mask-size: contain;
1365
- mask-size: contain;
1366
- -webkit-mask-repeat: no-repeat;
1367
- mask-repeat: no-repeat;
1368
- -webkit-mask-position: center;
1369
- mask-position: center;
1370
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.5 4.707C15.914 4.707 16.25 5.043 16.25 5.457V17.147l1.22-1.22a.75.75 0 0 1 1.06 1.06L15.5 20.018l-3.03-3.03a.75.75 0 0 1 1.06-1.06l1.22 1.22V5.457c0-.414.336-.75.75-.75ZM11.53 7.427a.75.75 0 0 1-1.06 1.06L9.25 7.268V18.957a.75.75 0 0 1-1.5 0V7.268L6.53 8.487a.75.75 0 0 1-1.06-1.06L8.5 4.396l3.03 3.03Z' fill='white'/%3E%3C/svg%3E");
1371
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.5 4.707C15.914 4.707 16.25 5.043 16.25 5.457V17.147l1.22-1.22a.75.75 0 0 1 1.06 1.06L15.5 20.018l-3.03-3.03a.75.75 0 0 1 1.06-1.06l1.22 1.22V5.457c0-.414.336-.75.75-.75ZM11.53 7.427a.75.75 0 0 1-1.06 1.06L9.25 7.268V18.957a.75.75 0 0 1-1.5 0V7.268L6.53 8.487a.75.75 0 0 1-1.06-1.06L8.5 4.396l3.03 3.03Z' fill='white'/%3E%3C/svg%3E");
1351
+ padding: var(--space-scale-2);
1352
+ border: 1px solid var(--color-border-200);
1353
+
1354
+ &[data-sort-key] {
1355
+ cursor: pointer;
1356
+
1357
+ & button {
1358
+ all: unset;
1359
+ cursor: pointer;
1360
+
1361
+ &:focus-visible {
1362
+ outline: 4px solid rgba(1, 150, 237, 0.24);
1363
+ outline-offset: 2px;
1364
+ }
1365
+ }
1366
+
1367
+ &::before {
1368
+ display: none;
1369
+ content: '';
1370
+ width: var(--font-size-200);
1371
+ height: var(--font-size-200);
1372
+ vertical-align: -0.1em;
1373
+ background-color: currentColor;
1374
+ -webkit-mask-size: contain;
1375
+ mask-size: contain;
1376
+ -webkit-mask-repeat: no-repeat;
1377
+ mask-repeat: no-repeat;
1378
+ -webkit-mask-position: center;
1379
+ mask-position: center;
1380
+ margin-right: var(--space-scale-1);
1381
+ }
1372
1382
  }
1373
- }
1374
1383
 
1375
- &[aria-sort="ascending"]::after {
1376
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
1377
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
1378
- }
1384
+ &[aria-sort='ascending']::before {
1385
+ display: inline-block;
1386
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
1387
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
1388
+ }
1379
1389
 
1380
- &[aria-sort="descending"]::after {
1381
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
1382
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
1383
- }
1390
+ &[aria-sort='descending']::before {
1391
+ display: inline-block;
1392
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
1393
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
1394
+ }
1384
1395
  }
1385
1396
 
1386
1397
  td {
1387
- padding: var(--space-scale-1);
1388
- text-align: right;
1389
- vertical-align: middle;
1390
-
1391
- &:first-child {
1398
+ padding: var(--space-scale-2);
1392
1399
  text-align: left;
1393
- }
1394
- }
1400
+ vertical-align: middle;
1401
+ border: 1px solid var(--color-border-200);
1395
1402
 
1396
- tr {
1397
- border-top: 1px solid var(--color-surface-500);
1398
- border-bottom: 1px solid var(--color-surface-500);
1399
- }
1400
-
1401
- tfoot {
1403
+ &:first-child {
1404
+ text-align: left;
1405
+ }
1402
1406
  }
1403
1407
  }
1404
1408
  /* noinspection CssInvalidAtRule */
package/dist/triptease.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.2
2
+ * @triptease/stylesheet v2.1.4
3
3
  */
4
4
  @import url('https://fonts.googleapis.com/css?family=Roboto:400,500') layer(base);
5
5
  @import url('https://fonts.googleapis.com/css?family=Inter:300,500,600,700') layer(base);
@@ -1332,72 +1332,76 @@ header[data-theme='top-nav'] {
1332
1332
  }
1333
1333
  }
1334
1334
  @layer blocks{
1335
+
1335
1336
  table {
1336
- width: 100%;
1337
- border: 1px solid var(--color-surface-500);
1337
+ width: 100%;
1338
+ border: 1px solid var(--color-surface-500);
1339
+ line-height: var(--font-line-height-200);
1340
+ color: var(--color-text-400);
1338
1341
  }
1342
+
1339
1343
  thead {
1340
- background-color: var(--color-surface-300);
1341
- color: var(--color-text-400);
1344
+ background-color: var(--color-surface-300);
1345
+ color: var(--color-text-400);
1342
1346
  }
1343
1347
 
1344
1348
  th {
1345
- padding: var(--space-scale-1);
1346
- text-align: right;
1347
-
1348
- &:first-child {
1349
1349
  text-align: left;
1350
- }
1351
-
1352
- &[data-sort-key] {
1353
- cursor: pointer;
1354
-
1355
- &::after {
1356
- content: "";
1357
- display: inline-block;
1358
- width: 1em;
1359
- height: 1em;
1360
- vertical-align: middle;
1361
- margin-inline-start: 0.25em;
1362
- background-color: currentColor;
1363
- -webkit-mask-size: contain;
1364
- mask-size: contain;
1365
- -webkit-mask-repeat: no-repeat;
1366
- mask-repeat: no-repeat;
1367
- -webkit-mask-position: center;
1368
- mask-position: center;
1369
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.5 4.707C15.914 4.707 16.25 5.043 16.25 5.457V17.147l1.22-1.22a.75.75 0 0 1 1.06 1.06L15.5 20.018l-3.03-3.03a.75.75 0 0 1 1.06-1.06l1.22 1.22V5.457c0-.414.336-.75.75-.75ZM11.53 7.427a.75.75 0 0 1-1.06 1.06L9.25 7.268V18.957a.75.75 0 0 1-1.5 0V7.268L6.53 8.487a.75.75 0 0 1-1.06-1.06L8.5 4.396l3.03 3.03Z' fill='white'/%3E%3C/svg%3E");
1370
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M15.5 4.707C15.914 4.707 16.25 5.043 16.25 5.457V17.147l1.22-1.22a.75.75 0 0 1 1.06 1.06L15.5 20.018l-3.03-3.03a.75.75 0 0 1 1.06-1.06l1.22 1.22V5.457c0-.414.336-.75.75-.75ZM11.53 7.427a.75.75 0 0 1-1.06 1.06L9.25 7.268V18.957a.75.75 0 0 1-1.5 0V7.268L6.53 8.487a.75.75 0 0 1-1.06-1.06L8.5 4.396l3.03 3.03Z' fill='white'/%3E%3C/svg%3E");
1350
+ padding: var(--space-scale-2);
1351
+ border: 1px solid var(--color-border-200);
1352
+
1353
+ &[data-sort-key] {
1354
+ cursor: pointer;
1355
+
1356
+ & button {
1357
+ all: unset;
1358
+ cursor: pointer;
1359
+
1360
+ &:focus-visible {
1361
+ outline: 4px solid rgba(1, 150, 237, 0.24);
1362
+ outline-offset: 2px;
1363
+ }
1364
+ }
1365
+
1366
+ &::before {
1367
+ display: none;
1368
+ content: '';
1369
+ width: var(--font-size-200);
1370
+ height: var(--font-size-200);
1371
+ vertical-align: -0.1em;
1372
+ background-color: currentColor;
1373
+ -webkit-mask-size: contain;
1374
+ mask-size: contain;
1375
+ -webkit-mask-repeat: no-repeat;
1376
+ mask-repeat: no-repeat;
1377
+ -webkit-mask-position: center;
1378
+ mask-position: center;
1379
+ margin-right: var(--space-scale-1);
1380
+ }
1371
1381
  }
1372
- }
1373
1382
 
1374
- &[aria-sort="ascending"]::after {
1375
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
1376
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
1377
- }
1383
+ &[aria-sort='ascending']::before {
1384
+ display: inline-block;
1385
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
1386
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M17.573 10.988a.75.75 0 0 1-1.06 0L12.793 7.268v11.69a.75.75 0 0 1-1.5 0V7.268l-3.72 3.72a.75.75 0 0 1-1.06-1.061l5.53-5.53 5.53 5.53a.75.75 0 0 1 0 1.06Z' fill='white'/%3E%3C/svg%3E");
1387
+ }
1378
1388
 
1379
- &[aria-sort="descending"]::after {
1380
- -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
1381
- mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
1382
- }
1389
+ &[aria-sort='descending']::before {
1390
+ display: inline-block;
1391
+ -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
1392
+ mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M6.513 13.013a.75.75 0 0 1 1.06 0l3.72 3.72V5.043a.75.75 0 0 1 1.5 0v11.69l3.72-3.72a.75.75 0 0 1 1.06 1.06l-5.53 5.531-5.53-5.53a.75.75 0 0 1 0-1.061Z' fill='white'/%3E%3C/svg%3E");
1393
+ }
1383
1394
  }
1384
1395
 
1385
1396
  td {
1386
- padding: var(--space-scale-1);
1387
- text-align: right;
1388
- vertical-align: middle;
1389
-
1390
- &:first-child {
1397
+ padding: var(--space-scale-2);
1391
1398
  text-align: left;
1392
- }
1393
- }
1399
+ vertical-align: middle;
1400
+ border: 1px solid var(--color-border-200);
1394
1401
 
1395
- tr {
1396
- border-top: 1px solid var(--color-surface-500);
1397
- border-bottom: 1px solid var(--color-surface-500);
1398
- }
1399
-
1400
- tfoot {
1402
+ &:first-child {
1403
+ text-align: left;
1404
+ }
1401
1405
  }
1402
1406
  }
1403
1407
  /* noinspection CssInvalidAtRule */
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.2
2
+ * @triptease/stylesheet v2.1.4
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@triptease/stylesheet",
3
- "version": "2.1.2",
3
+ "version": "2.1.4",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",