@triptease/stylesheet 2.1.0 → 2.1.1

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 +33 -1
  3. package/dist/compositions.css +1 -1
  4. package/dist/exceptions.css +1 -1
  5. package/dist/lit/triptease.js +33 -1
  6. package/dist/triptease.css +33 -1
  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.0
2
+ * @triptease/stylesheet v2.1.1
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.0
2
+ * @triptease/stylesheet v2.1.1
3
3
  */
4
4
  /*
5
5
  Suppress "invalid at-rule" warnings: @import-glob is a build-time feature
@@ -315,6 +315,38 @@ th {
315
315
  &:first-child {
316
316
  text-align: left;
317
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");
338
+ }
339
+ }
340
+
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
+ }
345
+
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
+ }
318
350
  }
319
351
 
320
352
  td {
package/dist/compositions.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.0
2
+ * @triptease/stylesheet v2.1.1
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.0
2
+ * @triptease/stylesheet v2.1.1
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.0
3
+ * @triptease/stylesheet v2.1.1
4
4
  */
5
5
 
6
6
 
@@ -1349,6 +1349,38 @@ th {
1349
1349
  &:first-child {
1350
1350
  text-align: left;
1351
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");
1372
+ }
1373
+ }
1374
+
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
+ }
1379
+
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
+ }
1352
1384
  }
1353
1385
 
1354
1386
  td {
package/dist/triptease.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.0
2
+ * @triptease/stylesheet v2.1.1
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);
@@ -1348,6 +1348,38 @@ th {
1348
1348
  &:first-child {
1349
1349
  text-align: left;
1350
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");
1371
+ }
1372
+ }
1373
+
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
+ }
1378
+
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
+ }
1351
1383
  }
1352
1384
 
1353
1385
  td {
package/dist/utilities.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.1.0
2
+ * @triptease/stylesheet v2.1.1
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.0",
3
+ "version": "2.1.1",
4
4
  "description": "The stylesheet for the Triptease design system",
5
5
  "main": "dist/triptease.css",
6
6
  "type": "module",