@triptease/stylesheet 2.0.2 → 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 (9) 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.d.ts +2 -0
  6. package/dist/lit/triptease.js +1509 -0
  7. package/dist/triptease.css +33 -1
  8. package/dist/utilities.css +1 -1
  9. package/package.json +13 -3
package/dist/triptease.css CHANGED
@@ -1,5 +1,5 @@
1
1
  /*
2
- * @triptease/stylesheet v2.0.2
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.0.2
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.0.2",
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",
@@ -10,7 +10,16 @@
10
10
  "license": "MIT",
11
11
  "exports": {
12
12
  ".": "./dist/triptease.css",
13
- "./tokens": "./dist/web/tokens.json"
13
+ "./tokens": "./dist/web/tokens.json",
14
+ "./lit": "./dist/lit/triptease.js"
15
+ },
16
+ "peerDependencies": {
17
+ "lit": "^3.0.0"
18
+ },
19
+ "peerDependenciesMeta": {
20
+ "lit": {
21
+ "optional": true
22
+ }
14
23
  },
15
24
  "devDependencies": {
16
25
  "@csstools/postcss-design-tokens": "^4.0.5",
@@ -29,7 +38,8 @@
29
38
  "scripts": {
30
39
  "build:tokens": "style-dictionary build --config tokens/config.js",
31
40
  "build:css": "postcss --dir dist/ src/*.css",
32
- "build": "yarn build:tokens && yarn build:css",
41
+ "build:lit": "node scripts/generate-lit-css.mjs",
42
+ "build": "yarn build:tokens && yarn build:css && yarn build:lit",
33
43
  "serve:css": "yarn build -w",
34
44
  "serve:http": "http-server dist -p 8081",
35
45
  "serve": "concurrently \"yarn serve:css\" \"yarn serve:http\""